Setting up the dev environment

⚙️  Installation

Install App

Install Node Package Managers

npm install -g npx

npm install --global yarn

Create a New React App [ Docs ]

npx create-react-app my-component-system

Run the app

cd my-component-system
yarn start

App cleanup

Removing unnecessary dependencies and files: reportVitals and tests

Install Storybook [ Docs ]

npx storybook init

Run the storybook app

yarn storybook

Troubleshooting

• https://github.com/storybookjs/storybook/issues/19927#issuecomment-1324075415

Storybook cleanup

• Move components from /stories to /components

• Enable absolute path to improve the dev experience:
1. Add alias support for Storybook . Just add this in your .storybook/main.js :

const path = require('path');

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
  webpackFinal: async (config, { configType }) => {
		config.resolve.alias = {
			...config.resolve.alias,
			components: path.resolve(__dirname, "../src/components")
		};
		return config;
	}
}

 

2. Create index.js for all our components (Button + Header + Page)

export { default } from "./<NAME_COMPONENT>";

 

3. Remove absolute paths on our 3 components ⇒ From { Button } to Button

4. Add alias support for our App by creating jsconfig.json in the root of our project

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

Issues

• Check the button:
• Let’s install A11y add-on to Storybook to help us seeing the issue

yarn add --dev @storybook/addon-a11y

// .storybook/main.js
module.exports = {
  addons: [
    ..., 
    '@storybook/addon-a11y'
  ],
};

• The primary color contrast is not enough

• We copy the code and paste it to our App:

⬇️  Download code [ Link ]