BizWep Components

A collection of reusable React components built with TypeScript and Tailwind CSS, designed for Next.js projects.

Features

• 🎨 Beautiful Design: Modern, accessible components with Tailwind CSS
• 📦 TypeScript: Full type safety and excellent developer experience
• 🚀 Next.js Ready: Optimized for Next.js applications
• 📱 Responsive: Mobile-first design approach
• ♿ Accessible: Built with accessibility in mind
• 🎭 Customizable: Easy to theme and customize
• 📚 Storybook: Interactive component documentation

Installation

npm install bizwep-components
# or
yarn add bizwep-components
# or
pnpm add bizwep-components

Setup

1. Install Tailwind CSS in your Next.js project

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configure Tailwind CSS

Update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/bizwep-components/dist/**/*.{js,ts,jsx,tsx}', // Add this line
  ],
  theme: {
    extend: {
      // Your custom theme extensions
    },
  },
  plugins: [],
}

3. Import the CSS file

Important: You need to import the CSS file in your project for the components to display correctly.

Add this import to your main CSS file (e.g., globals.css, index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import BizWep Components styles */
@import 'bizwep-components/dist/index.css';

Or import it in your main JavaScript/TypeScript file:

import 'bizwep-components/dist/index.css';

📖 For detailed setup instructions, see CSS_SETUP.md

4. Ready to Use!

Usage

import { Button, Card, Input, Badge } from 'bizwep-components';

export default function MyComponent() {
  return (
    <div className="space-y-4">
      <Button variant="primary" size="lg">
        Click me
      </Button>
      
      <Card variant="elevated">
        <CardHeader>
          <CardTitle>Welcome</CardTitle>
          <CardDescription>This is a sample card</CardDescription>
        </CardHeader>
        <CardContent>
          <Input label="Name" placeholder="Enter your name" />
        </CardContent>
        <CardFooter>
          <Badge variant="success">Active</Badge>
        </CardFooter>
      </Card>
    </div>
  );
}

Components

Button

A versatile button component with multiple variants and sizes.

<Button variant="primary" size="md" isLoading={false}>
  Button Text
</Button>

Props:

• variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'
• size: 'sm' | 'md' | 'lg'
• isLoading: boolean
• disabled: boolean

Card

A flexible card component with header, content, and footer sections.

<Card variant="elevated">
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    Content goes here
  </CardContent>
  <CardFooter>
    Footer content
  </CardFooter>
</Card>

Input

A form input component with label, error states, and icon support.

<Input
  label="Email"
  placeholder="Enter your email"
  error="Invalid email"
  leftIcon={<EmailIcon />}
/>

Badge

A small status indicator component.

<Badge variant="success" size="md">
  Success
</Badge>

Modal

A modal dialog component with backdrop and keyboard navigation.

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Modal Title"
  size="md"
>
  Modal content
</Modal>

Development

Prerequisites

• Node.js 18+
• npm/yarn/pnpm

Setup

# Clone the repository
git clone <your-repo-url>
cd bizwep-components

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Build the library
npm run build

# Run type checking
npm run type-check

# Run linting
npm run lint

Project Structure

src/
├── components/          # Component implementations
│   ├── Button/
│   ├── Card/
│   ├── Input/
│   ├── Badge/
│   └── Modal/
├── utils/              # Utility functions
└── styles/             # Global styles
stories/                # Storybook stories

Publishing

To publish to npm:

# Build the library
npm run build

# Publish (this will run build automatically)
npm publish

Customization

Theming

You can customize the components by extending the Tailwind theme in your project:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: '#your-primary-color',
          // ... other shades
        },
      },
    },
  },
}

CSS Variables

The components use Tailwind's color system, so you can easily override colors by updating your Tailwind configuration.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - see the LICENSE file for details.

Support

If you have any questions or need help, please open an issue on GitHub.