↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

ui-components

eCommerce TypeScript

Space 48 UI Components

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

System requirements

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.

Getting started

Run the following command in your terminal within the root directory:

$ yarn install

Local development

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

Contributing components

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

Legacy system support

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

Decorators

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

Publishing

bit.dev is used for publishing, viewing and distributing components. Before you can publish, you need to setup bit.

Install the bit cli

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

Add your component

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

Import into your project

The following are common usage examples for projects:

Import dist files

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

Import with generated dependencies

If you want to install a component with it’s own package.json and node_modules:

$ bit import -p ./<target directory> <account>.<collection>/message

Import without generated dependencies

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.



↑