This repository contains regularly used ui components for ecommerce builds. Develop them in isolation with Storybook, test them with jest, then browse and install them into projects with bit.dev
You'll want to ensure you have the following already installed on your local machine before getting started:
-
Node: LTS 10.14. If you don't currently run local node versions, we recommend NVM.
-
Yarn: Dependencies are currently managed by Yarn rather than NPM due to some peculiarities of webpack peer dependencies. See Yarn for installation instructions.
Run the following command in your terminal within the root directory:
$ yarn install
Storybook environments are used for development. Run the storybook script with the configuration flag to boot up a local environment. See the following scripts table for details:
| Script | Purpose | Options |
|---|---|---|
| start | Runs and opens Storybook on a local server. | -c .storybook/react or -c .storybook/html |
| build-storybook | Exports Storybook as a static app | -c .storybook/react or -c .storybook/html |
| test | Runs jest. Use additional options immediately after yarn run test | --watch for watch mode or supply any other from the cli options |
| build | Runs webpack using the build config | Any webpack cli options |
Firstly, please develop your component on a feature branch and create a new issue for it. This provides exposure to the team and improves quality assurance and collaboration.
Create your component inside the directory applicable to it's type i.e. a react component inside src/react/<component_name>
Components should contain at the minimum a story, an index file & the component itself. You can optionally add:
- Jest tests inside a
__tests__directory - An accompanying .pcss, .scss or .css file
- Any utility or component specific files
If you wish to make your component available to legacy systems, you can use the build or build-bundle scripts provided in this repository. e.g. To build a umd version of the dropdown component so it's available on window you would run:
yarn run build --output-library-target umd --entry ./src/html/dropdown/ --o ./src/html/dropdown/dist/dropdown-umd.js
Certain decorators have been created to allow vanilla JS components to run in storybook:
| Decorator | Purpose |
|---|---|
| es6Class | Allows instantiation on imported html e.g. html loaded through a require call. Classes are also destroyed and recreated when the story is unselected/reselected to avoid any duplicate window or document event listeners |
bit.dev is used for publishing, viewing and distributing components. Before you can publish, you need to setup bit.
In your terminal run:
$ yarn global bit-bin
In the repository root run:
$ bit init
If this is your first time using bit via cli, run:
$ bit login
Once setup is complete, you can add your component to the registry!
In your terminal run:
$ bit add src/<path to your component>/<files to publish>
e.g. bit add src/react/message/* will publish all files for the react message component.
Now added, you just need to run the export to push to the remote registry:
$ bit export <account>.<collection>
// e.g space48.ui-components
Your component should now be available in your collection on bit.dev
The following are common usage examples for projects:
If you want to install a component that is compatible with a legacy system e.g. AMD or es2015, you can install the components dist files rather than the component itself e.g.
$ bit import --dist --ignore-package-json -p ./<target directory> <account>.<collection>/message
If you want to install a component with it's own package.json and node_modules:
$ bit import -p ./<target directory> <account>.<collection>/message
If you want to install a component's source files but without automatically generated dependencies:
$ bit import --ignore-package-json -p ./<target directory> <account>.<collection>/message
The components files should now have been written to the target directory you specified.