component-library-mastery

Component Library Mastery

Building, documenting, and maintaining production-quality component libraries.

---

Storybook Fundamentals

Setup & Configuration

npx storybook init
npm run storybook  # Dev server
npm run build-storybook  # Production build

Story Example

// Button.stories.tsx
import { Button } from './Button';
import type { Meta, StoryObj } from '@storybook/react';

const meta: Meta<typeof Button> = {
  component: Button,
  title: 'Components/Button',
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: { type: 'radio' },
      options: ['primary', 'secondary', 'ghost'],
    },
    size: {
      control: { type: 'radio' },
      options: ['sm', 'md', 'lg'],
    },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: { variant: 'primary', children: 'Click me' },
};

export const Secondary: Story = {
  args: { variant: 'secondary', children: 'Secondary' },
};

export const Disabled: Story = {
  args: { disabled: true, children: 'Disabled' },
};

// Interaction testing
export const Interactive: Story = {
  args: { variant: 'primary', children: 'Click' },
  play: async ({ canvasElement }) => {
    const button = canvasElement.querySelector('button');
    await userEvent.click(button);
  },
};

---

npm Publishing

Package Configuration

{
  "name": "@company/component-library",
  "version": "1.0.0",
  "description": "Reusable component library",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": ["dist"],
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    }
  },
  "scripts": {
    "build": "tsc && esbuild src/index.ts --bundle --outfile=dist/index.js",
    "publish": "npm publish"
  }
}

Export Index

// src/index.ts
export { Button } from './components/Button';
export { Card } from './components/Card';
export type { ButtonProps } from './components/Button';
export type { CardProps } from './components/Card';