Atomic Components Library

A collection of reusable React atomic components for building modern web applications.

Installation

npm install ins-storybook

Or with yarn:

yarn add ins-storybook

Usage

Importing Components

import { Button, Input, CustomGrid, CustomDialog } from 'ins-storybook';
import '@your-org/atomic-components/dist/index.css'; // Import styles

function App() {
  return (
    <div>
      <Button themeColor="primary" onClick={() => alert('Clicked!')}>
        Click Me
      </Button>
      
      <Input 
        label="Username"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
}

Available Components

Button

• Description: Customizable button component
• Props: themeColor, className, onClick, disabled, label, testId

Inputs

• Input: Text input with floating label
• Checkbox: Custom checkbox component
• RadioButton: Custom radio button
• Switch: Toggle switch component
• TextArea: Multi-line text input
• NumericTextBox: Number input with controls
• Upload: File upload component

Dropdowns

• StaticAutoComplete: Autocomplete dropdown
• StaticComboBox: Combo box component
• StaticMultiSelect: Multi-select dropdown
• Tag: Tag component for selections

Layouts

• EnhancedDrawer: Drawer/sidebar component
• Header: Header component
• PanelBar: Expandable panel bar
• TabStrip: Tab navigation component
• Tooltip: Tooltip component

Date & Time

• CustomDatePicker: Date picker component
• KendoLikeDatePicker: Kendo-style date picker
• CustomTimePicker: Time picker component

Data Display

• CustomGrid: Advanced data grid component
• Charts: Chart component wrapper

Dialogs

• CustomDialog: Modal dialog component
• DialogActionsBar: Dialog action buttons

Utilities

• generateTestId: Utility for generating test IDs
• useFilter: Hook for filtering functionality

Peer Dependencies

This library requires the following peer dependencies:

• react: ^18.0.0
• react-dom: ^18.0.0

Development

Building the Library

npm run build

Watch Mode

npm run build:watch

Testing

npm test

Storybook

To view and develop components interactively, use Storybook:

npm run storybook

This will start a local Storybook server at http://localhost:6006 (default). You can browse, test, and document all components in isolation.

Story files are located in src/stories/.

License

MIT

Contributing

Contributions are welcome! Please open an issue or submit a pull request.