Roundcodebox-ui-library NPM

Roundcodebox UI Library

A React-based UI library with Tailwind CSS, designed to be easily extendable and reusable. This library includes a set of UI components that can be used in any React project with Tailwind CSS already installed.

Installation

To install the library, run:

npm install roundcodebox-ui-library

Note: This library assumes you have Tailwind CSS already installed in your project.

Usage

To use the components in your React project, import them from the roundcodebox-ui-library package.

Example

import React from 'react';
import { Button, ToggleSwitch } from 'roundcodebox-ui-library';

const App: React.FC = () => {
  return (
    <div>
      <Button variant="primary" label="Click Me" onClick={() => alert('Button clicked')} />
      <ToggleSwitch checked={true} onChange={(checked) => console.log(checked)} />
    </div>
  );
};

export default App;

Components

Button

The Button component is a customizable button with different variants and sizes.

Props

variant: 'primary' | 'secondary' | 'outline' | 'plain' | 'success' | 'danger' | 'warning' (default: 'primary')
label: string
size: 'small' | 'medium' | 'large' (default: 'medium')
All other button element attributes

Example

<Button variant="primary" label="Submit" size="large" onClick={() => console.log('Submitted')} />

All Variants and Sizes

import React from 'react';
import { Button } from 'roundcodebox-ui-library';

const App: React.FC = () => (
  <div>
    <h2>All Button Variations</h2>
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
      <div>
        <h3>Primary</h3>
        <Button variant="primary" size="small" label="Small Primary" onClick={() => console.log('Small Primary clicked')} />
        <Button variant="primary" size="medium" label="Medium Primary" onClick={() => console.log('Medium Primary clicked')} />
        <Button variant="primary" size="large" label="Large Primary" onClick={() => console.log('Large Primary clicked')} />
      </div>
      <div>
        <h3>Secondary</h3>
        <Button variant="secondary" size="small" label="Small Secondary" onClick={() => console.log('Small Secondary clicked')} />
        <Button variant="secondary" size="medium" label="Medium Secondary" onClick={() => console.log('Medium Secondary clicked')} />
        <Button variant="secondary" size="large" label="Large Secondary" onClick={() => console.log('Large Secondary clicked')} />
      </div>
      <div>
        <h3>Outline</h3>
        <Button variant="outline" size="small" label="Small Outline" onClick={() => console.log('Small Outline clicked')} />
        <Button variant="outline" size="medium" label="Medium Outline" onClick={() => console.log('Medium Outline clicked')} />
        <Button variant="outline" size="large" label="Large Outline" onClick={() => console.log('Large Outline clicked')} />
      </div>
      <div>
        <h3>Plain</h3>
        <Button variant="plain" size="small" label="Small Plain" onClick={() => console.log('Small Plain clicked')} />
        <Button variant="plain" size="medium" label="Medium Plain" onClick={() => console.log('Medium Plain clicked')} />
        <Button variant="plain" size="large" label="Large Plain" onClick={() => console.log('Large Plain clicked')} />
      </div>
      <div>
        <h3>Success</h3>
        <Button variant="success" size="small" label="Small Success" onClick={() => console.log('Small Success clicked')} />
        <Button variant="success" size="medium" label="Medium Success" onClick={() => console.log('Medium Success clicked')} />
        <Button variant="success" size="large" label="Large Success" onClick={() => console.log('Large Success clicked')} />
      </div>
      <div>
        <h3>Danger</h3>
        <Button variant="danger" size="small" label="Small Danger" onClick={() => console.log('Small Danger clicked')} />
        <Button variant="danger" size="medium" label="Medium Danger" onClick={() => console.log('Medium Danger clicked')} />
        <Button variant="danger" size="large" label="Large Danger" onClick={() => console.log('Large Danger clicked')} />
      </div>
      <div>
        <h3>Warning</h3>
        <Button variant="warning" size="small" label="Small Warning" onClick={() => console.log('Small Warning clicked')} />
        <Button variant="warning" size="medium" label="Medium Warning" onClick={() => console.log('Medium Warning clicked')} />
        <Button variant="warning" size="large" label="Large Warning" onClick={() => console.log('Large Warning clicked')} />
      </div>
    </div>
  </div>
);

export default App;

Toggle Switch

The ToggleSwitch component is a simple toggle switch with customizable checked state.

Props

checked: boolean
onChange: (checked: boolean) => void

Example

<ToggleSwitch checked={true} onChange={(checked) => console.log('Toggled:', checked)} />

Development

Building the Library

To build the library, run:

npm run build

This will create the distribution files in the dist directory.

Linting

To lint the code, run:

npm run lint

Formatting

To format the code using Prettier, run:

npm run format

Testing

To run the tests using Vitest, run:

npm run test

Storybook

To start the Storybook server for developing and testing components in isolation, run:

npm run storybook

To build the Storybook static files, run:

npm run build-storybook

Example Button Story

// src/components/Button.stories.tsx
import React from 'react';
import { Meta, StoryFn } from '@storybook/react';
import Button, { ButtonProps } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: {
      control: {
        type: 'select',
        options: ['primary', 'secondary', 'outline', 'plain', 'success', 'danger', 'warning'],
      },
    },
    size: {
      control: {
        type: 'select',
        options: ['small', 'medium', 'large'],
      },
    },
    label: { control: 'text' },
  },
} as Meta<typeof Button>;

const Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  variant: 'primary',
  size: 'medium',
  label: 'Primary Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  variant: 'secondary',
  size: 'medium',
  label: 'Secondary Button',
};

export const Outline = Template.bind({});
Outline.args = {
  variant: 'outline',
  size: 'medium',
  label: 'Outline Button',
};

export const Plain = Template.bind({});
Plain.args = {
  variant: 'plain',
  size: 'medium',
  label: 'Plain Button',
};

export const Success = Template.bind({});
Success.args = {
  variant: 'success',
  size: 'medium',
  label: 'Success Button',
};

export const Danger = Template.bind({});
Danger.args = {
  variant: 'danger',
  size: 'medium',
  label: 'Danger Button',
};

export const Warning = Template.bind({});
Warning.args = {
  variant: 'warning',
  size: 'medium',
  label: 'Warning Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Small Button',
};

export const Medium = Template.bind({});
Medium.args = {
  size: 'medium',
  label: 'Medium Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Large Button',
};