zmags-ui-library v1.6.0

Zmags UI Library

Prepare

First, please prepare dependencies:

npm ci - Install dependencies

Commands

npm run storybook - Opens the storybook.

npm run build - Generates the output in the dist folder.

npm run lint - Lints the files in the src folder.

Getting Started

To start developing a new component you'll need to add a few files. 1. The tsx file under src/components. The folder should be named after the component and the file should be [component]Componnent.tsx. 2. Add the new component to src/components/index.ts. 3. Add a new story file under ./stories with the naming convention [componnent].stories.tsx. Please use the example for Button below which now uses Component Story Format.

const story = {
    component: Button,
    title: "Button",
};

const withText = () => (
    <Button label="Click here" />
);

export {
    story as default,
    withText,
};

Using in other projects

The output of this project can be used just like any other NPM package. If you want to test this out you can install via the npm command link or relative path npm install --save ../zmags-ui-library.

You must build the project before linking or installing.

You may also test the node package with the npm pack command. This will create a tarball that reflects what would be uploaded to the NPM registry.

Potential Changes

This is a Work In Progress. This will change, but not drastically.

Some ideas for changes:

1. Add Jest support and/or possibly StoryShots
2. Add Knobs support.
3. Add Console support.
4. Move stories from root stories directory into each component sub directory. This should work as long as we add the proper paths to .storybook/main.js.
5. Add support for exported Typescript Types. This will require a switch to using rollup-plugin-typescript2 over rollup-plugin-typescript. We'll also need to update the tsconfig.js based on the warnings given by the transpiler.
6. Review possible add-ons.

Additional Notes

None

Inspiration

Inspiration was taken from

https://github.com/commercetools/ui-kit

https://github.com/battlejj/typescript-storybook-starter-project

https://github.com/rollup/rollup-starter-lib