learnstorybook-design-system-01 v0.1.6

Oxinus Design System

=> Vite + React + Tailwind CSS Using these technologies for building and showcasing React components with Storybook.

Tech Stack

• Vite: A fast, modern, and lightweight build tool for JavaScript and React projects.

• React: A JavaScript library for building user interfaces.

• Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.

Installation

1)Clone this repository:

git clone https://gitlab.com/oxinus-io/design-system/admin-ui

2)Navigate to Project folder

cd admin-ui

3)Install Packages

npm install

4)Run the Code.

npm run dev

Adding Components

Create your React components in the src/components directory. Each component should have its own folder and a file inside it (e.g., Button/YourButton.js). Customize your components using Tailwind CSS classes as needed.

Adding Story of the Component.

For each components added to src/components there should be a corresponding story in the stories folder (eg. stories/Button.stories.js)

You can configure your stories using the following pattern:

import { Button } from './Button';

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
    layout: 'centered',
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
  tags: ['autodocs'],
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Primary = {
  args: {
    primary: true,
    label: 'Button',
  },
}