Reusable React atomic components library
npm install ins-storybookbash
npm install ins-storybook
`
Or with yarn:
`bash
yarn add ins-storybook
`
Usage
$3
`javascript
import { Button, Input, CustomGrid, CustomDialog } from 'ins-storybook';
import '@your-org/atomic-components/dist/index.css'; // Import styles
function App() {
return (
label="Username"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
}
`
Available Components
$3
- Description: Customizable button component
- Props: themeColor, className, onClick, disabled, label, testId
$3
- 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
$3
- StaticAutoComplete: Autocomplete dropdown
- StaticComboBox: Combo box component
- StaticMultiSelect: Multi-select dropdown
- Tag: Tag component for selections
$3
- EnhancedDrawer: Drawer/sidebar component
- Header: Header component
- PanelBar: Expandable panel bar
- TabStrip: Tab navigation component
- Tooltip: Tooltip component
$3
- CustomDatePicker: Date picker component
- KendoLikeDatePicker: Kendo-style date picker
- CustomTimePicker: Time picker component
$3
- CustomGrid: Advanced data grid component (Full Documentation)
- Charts: Chart component wrapper
$3
- CustomDialog: Modal dialog component
- DialogActionsBar: Dialog action buttons
$3
- 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
$3
`bash
npm run build
`
$3
`bash
npm run build:watch
`
$3
`bash
npm test
``