使用故事書和網絡組件構建設計系統

Web Components和Storybook的組合為構建跨框架、可複用的設計系統提供了理想方案。 1. Web Components通過原生瀏覽器API實現樣式和行為的封裝，確保組件在React、Vue、Angular等任意技術棧中可用；2. Storybook提供隔離開發環境，支持Web Components，用於實時開發、測試和文檔化組件；3. 設置時使用npx storybook init並選擇Web Components框架，自動配置main.js和preview.js，結合Lit等庫編寫組件；4. 組件結構應清晰組織，如按/components、/tokens、/themes等目錄劃分，利用CSS自定義屬性管理設計令牌；5. 最佳實踐包括使用語義化版本發布npm包、集成@storybook/addon-a11y進行無障礙檢測、通過argTypes定義控件以提升非開發者可用性、生成Docs頁面增強文檔能力、早期在真實應用中驗證兼容性，並使用Vite或Rollup打包；6. 構建後可通過npm publish發布，消費者無論通過CDN引入script還是npm安裝均可直接使用，無需框架適配層。該方案具備高可維護性、強封裝性和長期可持續性，適合追求一致性與穩定性的團隊採用。

Building a design system with Storybook and Web Components is a solid choice if you want maximum reusability, framework-agnostic components, and a clear separation between design and application logic. Here's how to approach it effectively.

Why Web Components Storybook?

Web Components are native browser APIs that let you create custom, reusable HTML elements with encapsulated styles and behaviors. They work anywhere—React, Vue, Angular, or plain HTML—making them ideal for a truly universal design system.

Storybook, traditionally used with React or Vue, also supports Web Components. It gives you a sandbox to develop, document, and test components in isolation—perfect for design system workflows.

Together, they offer:

• Framework independence – components work in any tech stack.
• Encapsulation – Shadow DOM keeps styles and markup isolated.
• Live documentation – Storybook becomes your living style guide.
• Design-dev sync – designers and developers can collaborate around a single source of truth.

Setting Up Storybook for Web Components

Start by initializing Storybook in a new or existing project:

 npx storybook init

When prompted, choose "Web Components" as the framework.

This sets up:

• A preview.js for global configuration
• .storybook/main.js with Web Components builder
• Sample stories using lit-html (commonly used with Web Components)

If you're using Lit (a popular library for building Web Components), your component might look like:

 // components/button.js
import { LitElement, html, css } from 'lit';

export class Button extends LitElement {
  static properties = {
    variant: { type: String },
    disabled: { type: Boolean },
  };

  static styles = css`
    button {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      background: var(--button-bg, #007bff);
      color: white;
      font-size: 14px;
    }
    button:disabled { opacity: 0.5; }
  `;

  render() {
    return html`
      <button ?disabled=${this.disabled}>
        <slot></slot>
      </button>
    `;
  }
}

customElements.define(&#39;ui-button&#39;, Button);

Then create a story:

 // components/button.stories.js
import '../components/button.js';

export default {
  title: 'Components/Button',
  component: 'ui-button',
  argTypes: {
    variant: {
      control: { type: 'select' },
      options: ['primary', 'secondary'],
    },
    disabled: { control: 'boolean' },
  },
};

const Template = ({ label, ...args }) => {
  return html`
    <ui-button
      ?disabled=${args.disabled}
      @click=${() => console.log(&#39;clicked&#39;)}
    >
      ${label}
    </ui-button>
  `;
};

export const Primary = Template.bind({});
Primary.args = { label: &#39;Click me&#39;, variant: &#39;primary&#39; };

export const Disabled = Template.bind({});
Disabled.args = { label: &#39;Can&#39;t click&#39;, disabled: true };

Now run npm run storybook and see your button in the browser.

Organizing Your Design System

Structure matters. A clean folder layout helps teams scale:

 /design-system
  /components
    /button
      button.js
      button.stories.js
      button.css
    /input
      input.js
      input.stories.js
  /tokens
    colors.js
    typography.js
  /themes
    default-theme.css
  /utils
    accessibility.js

Use CSS Custom Properties (variables) for design tokens:

 /* tokens/colors.js */
const colorStyles = css`
  :host {
    --color-primary: #007bff;
    --color-danger: #dc3545;
    --color-success: #28a745;
  }
`;

Then apply them in component styles:

 static styles = [colorStyles, css`
  button { background: var(--color-primary); }
`];

This way, themes can override these values globally.

Best Practices

To make your design system maintainable and scalable:

• Use semantic versioning – publish components as npm packages.

• Document accessibility – add A11y addon to Storybook:

   npm install @storybook/addon-a11y

  It checks contrast, keyboard navigation, and ARIA attributes in real time.

• Enforce controls and args – define argTypes so non-devs can interact with props in the UI.

• Add Controls and Docs – Storybook's Docs tab turns stories into rich documentation with code samples, props tables, and usage guidelines.

• Test in real apps early – embed your Web Components in a sample app (React, Vue, etc.) to verify interoperability.

• Bundle carefully – use tools like Vite or Rollup to bundle components for distribution. Consider code-splitting if you have many components.

Publishing and Consuming

Once ready, bundle your components:

 npm run build-storybook # For documentation
# And build your components for npm

Publish to a private or public npm registry:

 npm publish

Consumers can then use them like:

 <script type="module" src="https://unpkg.com/your-design-system/button.js"></script>
<ui-button>Hi there</ui-button>

Or install via npm and import:

 import 'your-design-system/components/button';

No framework-specific wrappers needed.

Basically, Web Components give you the portability, and Storybook gives you the clarity. Combined, they form a powerful foundation for a future-proof design system. It's not flashy, but it's durable—perfect for teams serious about consistency and long-term maintainability.

以上是使用故事書和網絡組件構建設計系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！