@imsabmaverick81/react-ui-control-kit

A React component library with reusable UI components including Button, Checkbox, RadioButton, and Dropdown.

Installation

npm install @imsabmaverick81/react-ui-control-kit
# or
yarn add @imsabmaverick81/react-ui-control-kit
# or
pnpm add @imsabmaverick81/react-ui-control-kit

Usage

import {
  Button,
  Checkbox,
  RadioButton,
  Dropdown,
} from "@imsabmaverick81/react-ui-control-kit";
import "@imsabmaverick81/react-ui-control-kit/styles";

function App() {
  return (
    <div>
      <Button primary label="Click me" />

      <Checkbox label="Accept terms" checked={false} />

      <RadioButton label="Option 1" checked={true} />

      <Dropdown
        label="Select Country"
        options={[
          { value: "us", label: "United States" },
          { value: "uk", label: "United Kingdom" },
        ]}
        value=""
        onChange={(value) => console.log(value)}
      />
    </div>
  );
}

Components

Button

<Button
  primary={true} // Primary styling
  disabled={false} // Disable button
  size="medium" // 'small' | 'medium' | 'large'
  stylingMode="contained" // 'contained' | 'outlined' | 'text'
  label="Button" // Button text
  onClick={() => {}} // Click handler
/>

Checkbox

<Checkbox
  label="Checkbox label" // Label text
  checked={false} // Checked state
  disabled={false} // Disable checkbox
  size="medium" // 'small' | 'medium' | 'large'
  error="Error message" // Error message
  onChange={(e) => {}} // Change handler
/>

RadioButton

<RadioButton
  label="Radio label" // Label text
  checked={false} // Checked state
  disabled={false} // Disable radio
  size="medium" // 'small' | 'medium' | 'large'
  onChange={(e) => {}} // Change handler
/>

Dropdown

<Dropdown
  label="Label" // Dropdown label
  placeholder="Select..." // Placeholder text
  options={[
    // Options array
    { value: "a", label: "Option A" },
    { value: "b", label: "Option B" },
  ]}
  value="" // Selected value (string or string[])
  disabled={false} // Disable dropdown
  multiSelect={false} // Enable multi-select
  isSearch={false} // Enable search filter
  onChange={(value) => {}} // Change handler
/>

Development

# Install dependencies
npm install

# Run Storybook for development
npm run storybook

# Build the library
npm run build

# Build Storybook documentation
npm run build-storybook

Publishing

1. Update the package name in package.json (replace @imsabmaverick81 with your npm org or remove the scope)
2. Build the library: npm run build
3. Publish to npm: npm publish

License

MIT