Setting up the dev environment

⚙️  Installation

Install App

 
System Requirements
  • macOS, Windows (including WSL), and Linux are supported.
 
Install Node Package Executer

npm install -g npx
 
Create a NextJS App [ Docs ]

npx create-next-app@latest my-component-system
 
On installation, make sure to choose the following prompts:
notion image
 
 
▶️ Run the app
cd my-component-system
npm run dev
 
 
💡 Tip
Add alias support for a better developer experience by editing the jsconfig.json in the root of our project with the following contents:
{
  "compilerOptions": {
    "baseUrl": "src"
  }
}
 
 

Install Storybook [ Docs ]

From our terminal, we will be installing the latest version of Storybook:

npx storybook@latest init
 
▶️ Run the Storybook app

npm run storybook
 
You will be able to see a screen like this one below:
notion image
 
Storybook cleanup
The Storybook installation provides 3 components under /stories:
  • Button
  • Header
  • Page
 
Moving the above components to the /components folder aligns better with our goal of creating reusable components. Here's the proposed structure:
 
/components
   - index.js  // Indexing for easy reusability
   - MyComponent.jsx // Main logic of the component
   - MyComponent.stories.jsx // Storybook component story
   - MyComponentStyles.js  // Optional - Custom styles injection
 
👉 Given the time-consuming nature of this process, we've taken care of it for you. Please download the new src folder from here and replace your previous src folder with this.
 

👁️ Add Accessibility tool

The global percentage of people with disabilities is approximately over 10%, that means that if you don’t have the proper systems in place, 1 out of 10 people won’t be able to use your new innovative product. That means that if you ever get into 1,000 users, you will be losing a 100 of them. That’s why we recommend adding these foundations from the very beginning.
 
From your terminal, let’s install A11y add-on to Storybook:

npm install @storybook/addon-a11y --save-dev
 
In the .storybook/main.js file, add this line under the addons property:
const config = {
  ...
  addons: [
    ..., 
    '@storybook/addon-a11y' // Add this line
  ],
};
 
▶️ Restart your Storybook app:

npm run storybook
 
🟡  Now in Storybook, when you click on the Button > Default section from the left navigation, you'll notice a new section called Accessibility. Here, there's a violation flagged: The contrast ratio is insufficient. This indicates that some users may struggle to read the button label clearly.
notion image
 
Let’s fix that by adding a darker blue background color, like so:
// components/Button/button.css
...
.storybook-button--primary {
  color: white;
  background-color: #1566c0;  // Darker blue
}
...
🟢 Now let’s restart the Storybook app. We should be good to go:
notion image
 
 
 

⬇️  Download code [ 🔗 Link ]