Oxio Design System

The Oxio Design System is a collection of reusable UI components built with React, TypeScript, and Storybook, based on our Figma design files.
It follows the Atomic Design methodology for scalability and consistency.

🌎 Environments

• Dev: TBA
• Staging: TBA
• Production: TBA

🔥 Atomic Design

We organize components using Atomic Design principles:

• Atoms: Basic elements (e.g. buttons, inputs)
• Molecules: Groups of atoms (e.g. forms, cards)
• Organisms: Complex UI sections (e.g. headers, footers)

🚀 Installation

1. Clone the repository:

   git clone https://github.com/oxio-design-system.git

2. Install dependencies:

   yarn install

3. Start Storybook:

   yarn storybook

🛠️ Usage

The design system uses Storybook to display and test components in isolation.

To view the components:

yarn storybook

📚 This will open Storybook in your browser with all available components.

➕ Adding a New Component

To add a new component to the design system:

1. Start Storybook locally:

   yarn storybook

2. In the Storybook UI, click the “+” button in the sidebar (usually in the top-right corner).

3. Select your component type and enter a name. This should create a YourComponent.stories.tsx file.

4. Edit the generated files to implement your component.
   Be sure to include the correct path in the title field, e.g.:

   title: 'components/atoms/Button'

5. Your component will automatically appear in the Storybook sidebar.

✅ Tip: Use existing components as references to follow naming, structure, and code style conventions.

🤝 Contributing

1. Create a new branch:

   git checkout -b feature/TOSO-###-XYZ

2. Make your changes and commit:

   git commit -m "Add MyNewComponent"

3. Push your branch:

   git push origin feature/TOSO-###-XYZ

4. Open a Pull Request.