@wireapp/react-ui-kit

Wire

This repository is part of the source code of Wire. You can find more information at wire.com or by contacting [e-mail].

You can find the published source code at github.com/wireapp.

For licensing information, see the attached LICENSE file and the list of third-party licenses at wire.com/legal/licenses/.

React UI Kit

Installation

yarn

Start Storybook

yarn start

Creating New Components

When creating a new component, follow these guidelines:

• Choose the Right Category

  • Place your component in the appropriate category folder under src/:
    • DataDisplay/: For data visualization components (tables, lists)
    • Identity/: Design system, theme, colors, etc.
    • Inputs/: For form controls and input elements
    • Layout/: For structural components
    • Navigation/: For navigation-related components
    • Surface/: For containers, cards, modals, and overlays
    • Typography/: For text-related components
    • utils/: For utility components

• Component Structure Create a new folder for your component with the following files:

  Category/
  └── ComponentName/
      ├── ComponentName.tsx       # Main component file
      ├── ComponentName.stories.tsx  # Storybook stories
      └── index.ts               # Export file
  

• Component File (ComponentName.tsx)

  • Use TypeScript
  • Include proper type definitions
  • Add JSDoc comments for documentation
  • Follow the existing component patterns

• Stories File (ComponentName.stories.tsx)

  • Create stories for all component variants
  • Include proper documentation
  • Add controls for interactive props
  • Follow the existing story patterns

• Index File (index.ts)

  • Export the component
  • Export any types or utilities specific to the component

Example:

// Button.tsx
export interface ButtonProps {
  variant: 'primary' | 'secondary';
  // ... other props
}

export const Button = ({variant, ...props}: ButtonProps) => {
  // Component implementation
};

// Button.stories.tsx
export default {
  title: 'Inputs/Button',
  component: Button,
  // ... story configuration
};

// index.ts
export * from './Button';

Remember to:

• Follow the existing naming conventions
• Add proper TypeScript types
• Include comprehensive stories
• Document your component thoroughly
• Test your component thoroughly