Contributing to EndUI

git clone https://github.com/yourusername/endui.git
cd endui

npm install

npm run dev

npm run storybook

npm test

endui/
├── src/
│   ├── components/           # Component implementations
│   │   ├── Button/
│   │   │   ├── Button.tsx
│   │   │   ├── Button.test.tsx
│   │   │   ├── Button.stories.tsx
│   │   │   └── index.ts
│   │   └── ...
│   ├── utils/               # Utility functions
│   ├── hooks/               # Custom React hooks
│   └── index.ts            # Main export file
├── docs/                   # Documentation files
├── examples/               # Example applications
├── .storybook/            # Storybook configuration
├── tests/                 # Test utilities and setup
└── scripts/               # Build and utility scripts

git checkout -b feature/your-feature-name
# or
git checkout -b fix/your-bug-fix

git commit -m "feat(Button): add loading state variant
 
- Add isLoading prop to Button component
- Include loading spinner from Lucide React
- Update documentation and examples
- Add tests for loading behavior"

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

feat(Alert): add dismissible functionality
fix(Modal): resolve focus trap issue on mobile
docs(Button): update examples with new variants
test(Input): add validation test cases

// Good
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'default' | 'ghost'
  size?: 'sm' | 'default' | 'lg'
  isLoading?: boolean
}
 
// Bad
interface ButtonProps {
  variant: string
  size: string
  isLoading: any
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, isLoading, children, ...props }, ref) => {
    return (
      <button
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        disabled={isLoading}
        {...props}
      >
        {isLoading && <LoadingSpinner />}
        {children}
      </button>
    )
  }
)
 
Button.displayName = 'Button'

mkdir src/components/YourComponent
cd src/components/YourComponent

'use client'
 
import React from 'react'
import { VariantProps, cva } from 'class-variance-authority'
import { cn } from '../../utils/utils'
 
const yourComponentVariants = cva(
  'base classes here',
  {
    variants: {
      variant: {
        default: 'default styles',
        secondary: 'secondary styles',
      },
      size: {
        sm: 'small styles',
        default: 'default styles',
        lg: 'large styles',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
)
 
export interface YourComponentProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof yourComponentVariants> {
  // Additional props here
}
 
const YourComponent = React.forwardRef<HTMLDivElement, YourComponentProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <div
        className={cn(yourComponentVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
 
YourComponent.displayName = 'YourComponent'
 
export { YourComponent, yourComponentVariants }

import { render, screen } from '@testing-library/react'
import { YourComponent } from './YourComponent'
 
describe('YourComponent', () => {
  it('renders correctly', () => {
    render(<YourComponent>Test content</YourComponent>)
    expect(screen.getByText('Test content')).toBeInTheDocument()
  })
 
  it('applies variant classes correctly', () => {
    const { container } = render(
      <YourComponent variant="secondary">Content</YourComponent>
    )
    expect(container.firstChild).toHaveClass('secondary-class')
  })
})

import type { Meta, StoryObj } from '@storybook/react'
import { YourComponent } from './YourComponent'
 
const meta: Meta<typeof YourComponent> = {
  title: 'Components/YourComponent',
  component: YourComponent,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: { type: 'select' },
      options: ['default', 'secondary'],
    },
  },
}
 
export default meta
type Story = StoryObj<typeof meta>
 
export const Default: Story = {
  args: {
    children: 'Your Component',
  },
}
 
export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'Secondary Variant',
  },
}

export { YourComponent, yourComponentVariants } from './YourComponent'
export type { YourComponentProps } from './YourComponent'

import { render, screen, fireEvent } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Button } from './Button'
 
describe('Button', () => {
  it('handles click events', async () => {
    const handleClick = jest.fn()
    render(<Button onClick={handleClick}>Click me</Button>)
    
    await userEvent.click(screen.getByRole('button'))
    expect(handleClick).toHaveBeenCalledTimes(1)
  })
 
  it('is accessible', () => {
    render(<Button>Accessible button</Button>)
    expect(screen.getByRole('button')).toBeInTheDocument()
  })
})

## Description
Brief description of changes
 
## Type of Change
- [ ] Bug fix
- [ ] New feature
- [ ] Documentation update
- [ ] Refactoring
 
## Testing
- [ ] Tests pass locally
- [ ] Added tests for new functionality
- [ ] Tested in multiple browsers
 
## Documentation
- [ ] Updated component documentation
- [ ] Added/updated Storybook stories
- [ ] Updated changelog
 
## Screenshots (if applicable)
Include screenshots for UI changes