@egrucza/component-library NPM

Getting Started with Storybook

This project was bootstrapped with Storybook, and uses Yarn as it's package manager. It is important not to mix NPM and Yarn when using this project.

Global Development Dependencies Required

Node.js / NPM If you do not have Node.js installed on your development machine, you will need to install that first. There are multiple ways to install Node.js as outlined in their documentation: https://nodejs.dev/learn/how-to-install-nodejs

NPM

`npm install -g npm`

Yarn

`npm install -g yarn`

Rollup

`npm install -g rollup`

Available Scripts

In the project directory, you can run:

`yarn install`

Installs the local dependencies for the Storybook instance. This is rquired to run before running Storybook in the command below.

`yarn run storybook`

Runs the app in the development mode.\ Open http://localhost:6006 to view it in your browser.

The page will reload when you make changes.\ You may also see any lint errors in the console. You will need to install the local dependencies before running this command.

`yarn run build-storybook`

Builds the application for production

`yarn run lint`

Runs ESLint and prints any errors that are found. Errors need to be addressed prior to committing to the repository.

`yarn run lint:fix`

Fixes any ESLint errors that it is able to handle automatically.

`yarn run stylelint`

Runs Stylelint and prints any errors that are found. Errors need to be addressed prior to committing to the repository.

`yarn run stylelint:fix`

Fixes any Stylelint errors that it is able to handle automatically.

`rollup -c`

Bundles appropriate files needed to perform an NPM version bump to distribute the library accordingly.

`yarn run test`

This runs the unit tests which are powered by https://jestjs.io/.

Basics

Sections

Colors

You can find all of the theme colors and their variables in this section.

Typography

In this section you will see the theme's font and font sizes according to the style guide.

Atoms

The foundational building blocks of the UI. These are essentially components that will be re-used in multiple Molecule components. Examples include Button, Checkbox, and Input.

Molecules

Relatively simple groups of UI elements functioning together as a unit. Examples include Accordion, Carousel, and Hero.

Viewing A Component

When viewing a component there are multiple tabs that can give you more details and help you customize the component.

Controls

Where you can change any of the inputs or data that have been defined and preview them on screen.

Accessibility

Here you can view the accessibility validiation. It will tell you how many warnings there are and how many tests passed or failed.

HTML

In this section you can grab the HTML with any changes that you might have made in the Controls section

Code

.stories files

These files should exist for each component that you want to list on the sidebar. In these files you will pass through default arguments to the component and can also set up the customization input that allows users to change the text, colors, etc. within that component in Storybook.

Commit Messages

Commit messages should follow the Conventional Commits standardization otherwise the commit will get rejected until the message meets these standards. See more about those specifications here: https://www.conventionalcommits.org/en/v1.0.0/.

Before Committing Any Code

Before you commit any code, stop the storybook instance in your terminal and re-run it: yarn run storybook. This way the linter will pick up any changes that doesn't meet the requirements and you can clean up the code before committing into the repository. You should also run yarn run stylelint:fix and yarn run lint:fix to clean up any css and js linting issues.

Prior to committing you should also run yarn run test, this will kickoff the JEST test suite and ensure all tests are still passing. If any tests are failing unexpectedly, please fix before committing your changes.

Troubleshooting

ModuleNotFoundError

If you see an error similar to: ModuleNotFoundError: Module not found: Error: Cannot find file: 'Icon.jsx' does not match the corresponding name on disk: './src/stories/components/atoms/Icon/icon

Check the folder names in question. You might need to rename them with the correct capitlization according to the code. Git doesn't always pick up on these changes and it might be inconsistent with what the code is expecting.

Disappearing Addons Section

If the Addons section has disappeared and hitting the "A" shortcut or clicking "Show addons" in the menu does not work, you can resolve this by clearing your local storage: localStorage.clear() in the browser console.

Storybook switching to Colors page when changing the color of a component

If Storybook keeps redirecting you to the "Colors" page when making changes to components in the Controls section, you can usually resolve this by running localStorage.clear() in the browser console and then restarting the Storybook instance in your terminal.