Contributing

# Fork the repository on GitHub
# Then clone your fork
git clone https://github.com/YOUR_USERNAME/component-library.git
cd component-library

npm install

# Start Storybook for development
npm run storybook

# Build library
npm run build

# Build everything
npm run build:all

component-library/
├── src/
│   ├── components/     # Component source files
│   │   ├── Button/
│   │   └── Input/
│   └── styles/         # Global styles
├── stories/            # Storybook stories
├── docs/               # Mintlify documentation
└── .storybook/         # Storybook configuration

mkdir src/components/NewComponent

NewComponent/
├── NewComponent.tsx
├── NewComponent.css
└── index.ts

// NewComponent.tsx
import React from 'react';
import './NewComponent.css';

export interface NewComponentProps {
  // Define props
}

export const NewComponent = React.forwardRef<HTMLElement, NewComponentProps>(
  (props, ref) => {
    return (
      // Component JSX
    );
  }
);

NewComponent.displayName = 'NewComponent';

/* NewComponent.css */
.new-component {
  /* Component styles using CSS variables */
}

// index.ts
export { NewComponent } from './NewComponent';
export type { NewComponentProps } from './NewComponent';

// src/components/index.ts
export * from './NewComponent';

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

const meta: Meta<typeof NewComponent> = {
  title: 'Components/NewComponent',
  component: NewComponent,
  tags: ['autodocs'],
};

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

export const Default: Story = {
  args: {},
};

<!-- docs/components/new-component.mdx -->
---
title: NewComponent
description: 'Component description'
---

## Overview

Component overview and usage.

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary';
}

<button
  aria-label="Close"
  aria-describedby="description"
>
  ×
</button>

.component {
  color: var(--primary-color);
}

.component--variant {
  /* Variant styles */
}

git checkout -b feature/new-component

git commit -m "feat: add NewComponent"
git commit -m "fix: resolve button focus issue"
git commit -m "docs: update installation guide"

git push origin feature/new-component

/**
 * Button component with multiple variants
 * @param variant - Visual style variant
 * @param size - Button size
 */
export const Button = ({ variant, size }: ButtonProps) => {
  // Implementation
};