0.0.3 • Published 6 months ago
@xkytem/design-system v0.0.3
Configuration
Explain any configuration steps if applicable.
Contributing
Instructions for how others can contribute to your project.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - 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
)
- Component file (
Available Components
PillBatora
- A pill-shaped label component
- Variants: complete
- Usage: Labels and status indicators
ItemBoxBatora
- Product/item display box
- Variants: disabled, active, error, not-available
- Features: Image, name, price, status toggle
BoxBatora
- Versatile box component
- Types: user, role, article
- States: info, complete
- Designs: overlay, normal
Running Storybook
To run Storybook locally:
Install dependencies:
npm install
Start Storybook development server:
npm run storybook
View in browser:
- Open http://localhost:6006
- The Storybook interface will load automatically
- Navigate through components in the sidebar
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