@viratio/react-components

A React components library using Material UI components with custom Viratio branding.

Installation

npm install @viratio/react-components

Usage

import { PrimaryButton, Theme } from '@viratio/react-components';

function App() {
  return (
    <Theme>
      <PrimaryButton onClick={() => console.log('Clicked!')}>
        Click Me
      </PrimaryButton>
    </Theme>
  );
}

Components

• Theme: Custom theme provider with Viratio brand colors and typography
• PrimaryButton: Styled primary button component
• JsonViewer: Interactive JSON viewer/editor with color support
• ResponsiveDrawer: Collapsible drawer component for navigation
• Icons: Collection of custom icons

Development

Running Tests

npm test

Building the Library

npm run build

Storybook

This library uses Storybook for component development and testing. Storybook files are excluded from the production build to keep the package size minimal.

Run Storybook

npm run storybook

This will start Storybook at http://localhost:6006 where you can:

• Browse all components
• Test components interactively
• View documentation
• Experiment with different component states

Build Storybook

npm run build-storybook

See .storybook/README.md for more information about Storybook configuration.

Scripts

• npm test - Run Jest tests
• npm run build - Build the library for production
• npm run storybook - Start Storybook development server
• npm run build-storybook - Build static Storybook site
• npm run format - Format code with Prettier
• npm run lint - Check code formatting
• npm run tsc - Run TypeScript compiler checks

License

ISC