@lookbooklab/ui-kit v0.0.1-beta.0

@lookbooklab/ui-kit

This is a component library built with React, IBM Carbon Design System, and Emotion. It provides reusable components, including a button component, that can be easily integrated into your applications.

Installation

To install the component library, you can use a package manager of your choice, like pnpm, npm or yarn:

# npm 7+, extra double-dash is needed:
npm i @lookbooklab/ui-kit

# yarn
yarn add @lookbooklab/ui-kit

# pnpm
pnpm install @lookbooklab/ui-kit

Usage

1. Make sure you have React installed.
2. Import component to your React app.

import { Button } from '@lookbooklab/ui-kit'

export default function Home() {
  return (
    <>
      <Button>Test buttton</Button>
    </>
  )
}

Themeing

Development

To start developing to the component library, follow these steps:

1. Clone the repository:

git clone https://github.com/Gempathy/lookbooklab-ui-kit.git

2. Install dependencies:

pnpm install

3. Start the development server:

pnpm dev

View the component in the app by importing into src/App.jsx

import { Button } from '../'

function App() {
  return (
    <>
      <Button>Click me</Button>
    </>
  )
}

export default App

4. Create new components or modify existing ones in the lib/components directory. Don't forget to export the component into lib/main.js when creating new components.

5. Create stories for your components in the lib/components/ComponentName/index.stories.js file.

Example of the directory:

├── index.html
├── package.json
├── README.md
└── lib
    ├── main.js
    └── components
        ├── Button
          ├── index.jsx
          └── index.stories.js

6. To view your components in Storybook, run:

pnpm start

7. Test your changes thoroughly. Refer to Beta releases to QA the feature in your app to ensure everything works.

8. Once a feature is completed, create a pull request on the repository.

Release

To release a new version of this component library, follow these steps:

1. After merging the feature into the main branch
2. Run the release command based on semantic versioning and follow the steps to create a new release on GitHub.

pnpm release:patch

or

pnpm release:minor

or

pnpm release:major

If this is your first time releasing, log in to npm by running npm login. Then run npm adduser --scope=@lookbooklab

Beta releases

To make a beta release for QA purposes, follow these steps:

1. In your feature branch, commit all changes and push to remote
2. Run pnpm release:beta and follow the steps to create a new release on GitHub.
3. Once complete install the beta version in your project to QA.

This will make a beta release of the library that QA can test before a stable release.

Storybook Deployment

This repository is set up with GitHub Actions to automate the process of building Storybook and deploying it to GitHub Pages whenever updates are pushed to themain branch. The workflow can be found here

Storybook is published here

Contributing

Contributions are welcome! If you have any bug reports, feature requests, or pull requests, please submit them via the GitHub repository.

License

This project is licensed under the MIT License. See the LICENSE file for details.