@xkytem/design-system v0.0.3

Configuration

Explain any configuration steps if applicable.

Contributing

Instructions for how others can contribute to your project.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the LICENSE NAME - see the LICENSE.md file for details

Contact

Your Name - @yourtwitter - email@example.com

Project Link: https://github.com/yourusername/projectname

Acknowledgments

• List any resources, inspirations, or credits here

Storybook Documentation

Our project uses Storybook for component development and documentation. Storybook provides an isolated environment to build and test UI components.

Component Structure

Components are organized in the following structure:

• /src/components/ - Contains all component folders
• Each component folder contains:
  • Component file (.tsx)
  • Stories file (.stories.tsx)
  • Styles file (.css)

Available Components

1. PillBatora

   • A pill-shaped label component
   • Variants: complete
   • Usage: Labels and status indicators

2. ItemBoxBatora

   • Product/item display box
   • Variants: disabled, active, error, not-available
   • Features: Image, name, price, status toggle

3. BoxBatora

   • Versatile box component
   • Types: user, role, article
   • States: info, complete
   • Designs: overlay, normal

Running Storybook

To run Storybook locally:

1. Install dependencies:

   npm install

2. Start Storybook development server:

   npm run storybook

3. View in browser:

   • Open http://localhost:6006
   • The Storybook interface will load automatically
   • Navigate through components in the sidebar

4. Build static Storybook (optional):

   npm run build-storybook

   This creates a static version in the storybook-static directory

Development Tips

• Components can be viewed in isolation
• Try different component variations using the Controls panel
• View component documentation in the Docs tab
• Test component interactions in the Canvas view