Atlas Copco VTBA – Storybook

Storybook-based design system for Atlas Copco VTBA, bootstrapped from the Leybold Storybook boilerplate.

Tech stack

• React 18 + TypeScript
• Storybook 7 with @storybook/nextjs
• SCSS modules + Tailwind CSS + PostCSS
• Next.js 13 (App Router) for optional dev app

Getting started

# Install dependencies
npm install

# Run Storybook (default: http://localhost:6006)
npm run storybook

# Build static Storybook
npm run build-storybook

Scripts

| Script | Description | |---------------------|--------------------------------| | npm run storybook | Start Storybook dev server | | npm run build-storybook | Build static Storybook | | npm run dev | Start Next.js dev server | | npm run build | Build Next.js app | | npm run lint | Run ESLint |

Project structure

.storybook/           # Storybook config, theme, preview
src/
  app/                # Next.js App Router (optional)
  components/         # React components + *.stories.tsx
  stories/            # Introduction & foundation MDX
  utils/styles/       # Design tokens, base, typography
public/               # Static assets

Adding components

1. Add a component under src/components/<Name>/ (e.g. Button.tsx, Button.module.scss).
2. Add *.stories.tsx in the same folder or in src/stories/.
3. Use design tokens from src/utils/styles/base.scss (e.g. --atlascopco-blue).

Design tokens

• Primary: --atlascopco-blue (#0062b0)
• Greys: --atlascopco-grey-100 … --atlascopco-grey-600
• Typography: --font-family-base (Inter), heading/body CSS vars in base.scss

Customize tokens in src/utils/styles/base.scss and reuse in components.