npm publish

IDM UI Package Components

Button

Description: Material-UI Button wrapper. Supports all MUI Button props.

<Button variant="contained" color="primary">Click Me</Button>

Table

Description: Material-UI DataGrid wrapper. Supports sorting, search, pagination.

Props:

• columns: GridColDef[] — Table columns (MUI DataGrid columns)
• rows: any[] — Table data
• pageSizeOptions?: number[] — Pagination options
• initialPageSize?: number — Initial page size
• autoHeight?: boolean — Auto height

Example:

<Table columns={columns} rows={rows} pageSizeOptions={[5,10,25]} />

Toast

Description: Toast notifications using react-toastify.

Props:

• No props. Use <Toast /> and showToast('message').

Example:

<Toast />
showToast('Hello World');

Graph

Description: Line chart using recharts.

Props:

• data: Array<Record<string, any>> — Chart data
• xKey: string — X axis key
• lineKey: string — Line data key
• lineColor?: string — Line color

Example:

<Graph data={data} xKey="name" lineKey="value" />

Input

Description: Material-UI TextField supporting all input types, label, placeholder, and icon.

Props:

• All MUI TextField props
• type?: string — Input type (text, password, email, etc.)
• label?: string — Input label
• placeholder?: string — Input placeholder
• icon?: keyof typeof Icons — Icon name from MUI icons
• iconPosition?: 'start' | 'end' — Icon position
• onIconClick?: () => void — Icon click handler

Example:

<Input label="Name" placeholder="Enter name" />
<Input type="password" label="Password" />
<Input icon="Search" label="Search" />
<Input icon="Visibility" iconPosition="end" onIconClick={handler} />

Dropdown

Description: Material-UI Select supporting single and multi-select.

Props:

• label?: string — Dropdown label
• options: { label: string; value: string }[] — Options list
• value: string | string[] — Selected value(s)
• multiple?: boolean — Enable multi-select
• onChange: (value: string | string[]) => void — Change handler
• All MUI Select props

Example:

<Dropdown label="Select" options={[{label: 'A', value: 'a'}]} value="a" onChange={handler} />
<Dropdown label="Multi" options={[{label: 'A', value: 'a'}]} value={["a"]} multiple onChange={handler} />

Icons

Description: All MUI icons exported as Icons.

Example:

<Icons.Search />
<Icons.Visibility />

Theme

Description: Material-UI theme wrapper.

Props:

• children: React.ReactNode

Example:

<ThemeWrapper>
	<Button>Click Me</Button>
</ThemeWrapper>

Testing

Run tests with:

npm test

Publishing

npm publish

License

MIT