Leybold Design System

A comprehensive design system for Leybold, built with React, TypeScript, Storybook, and Next.js.

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository
2. Install dependencies:

npm install

Development

Run Storybook

To start the Storybook development server:

npm run storybook

This will open Storybook at http://localhost:6006

Run Next.js Development Server

npm run dev

This will start the Next.js development server at http://localhost:3000

Building

Build Storybook

npm run build-storybook

Build Next.js Application

npm run build

Build NPM Package

npm run build:npm

Publishing to npm

Publishing requires an npm access token with publish permissions for the @asantemedia-org organization.

Setup Access Token

1. Generate an access token at npmjs.com → Access Tokens
2. Configure the token:

npm config set //registry.npmjs.org/:_authToken YOUR_ACCESS_TOKEN

Publish

npm run build:npm
npm run publish:npm

Or to bump version and publish in one step:

npm run build:npm
npm version patch  # or minor/major
npm publish --access public

Project Structure

leybold-storybook/
├── .storybook/          # Storybook configuration
├── public/              # Static assets
│   ├── fonts/           # Custom fonts
│   └── assets/          # Images and other assets
├── src/
│   ├── app/             # Next.js app directory
│   ├── stories/         # Storybook stories
│   │   ├── introduction/    # Introduction pages
│   │   ├── foundation/      # Design foundations (colors, typography, etc.)
│   │   ├── atoms/           # Atomic components
│   │   ├── components/      # Component stories
│   │   ├── experiences/     # Complex component compositions
│   │   └── templates/       # Page templates
│   └── utils/           # Utility functions and styles
│       └── styles/      # Global styles and SCSS utilities
├── types/               # TypeScript type definitions
├── dist/                # Build output
└── package.json

Scripts

• npm run dev - Start Next.js development server
• npm run build - Build Next.js application
• npm run start - Start production Next.js server
• npm run lint - Run ESLint
• npm run storybook - Start Storybook development server
• npm run build-storybook - Build Storybook for production
• npm run build:npm - Build package for npm distribution
• npm run publish:npm - Publish package to npm

Technologies Used

• React 18.2.0 - UI library
• TypeScript 5.0.4 - Type safety
• Next.js 13.3.0 - React framework
• Storybook 7.0.4 - Component development and documentation
• Tailwind CSS 3.3.1 - Utility-first CSS framework
• SCSS/Sass - CSS preprocessing
• Rollup - Module bundler for npm package

Contributing

1. Create a new branch for your feature/fix
2. Make your changes
3. Write/update tests and stories
4. Submit a pull request

License

UNLICENSED - This is proprietary software for Atlas Copco/Leybold.

Design System Organization

The design system follows the Atomic Design methodology:

1. Introduction - Overview and getting started guides
2. Foundation - Design tokens (colors, typography, spacing, etc.)
3. Atoms - Basic building blocks (buttons, inputs, etc.)
4. Components - Composite components
5. Experiences - Complex patterns and page sections
6. Templates - Complete page layouts

Each component should include:

• Component implementation
• Storybook stories with different variants
• Documentation
• TypeScript types
• SCSS modules for styling