@hari_digitus/sms-ui-library 2.0.0 → 2.0.1

package/README.md

@@ -0,0 +1,510 @@
+To import CSS, use:
+
+```js/ts
+import "@digitus-fci-oa/form-controls/style.css";
+```
+
+# CustomDatePicker
+
+## Single Date
+
+```tsx
+<CustomDatePicker
+  mode="date"
+  value={date}
+  onChangeSingle={setDate}
+/>
+```
+
+---
+
+## Date & Time
+
+```tsx
+<CustomDatePicker
+  mode="dateTime"
+  value={dateTime}
+  onChangeSingle={setDateTime}
+/>
+```
+
+---
+
+## Date Range
+
+```tsx
+<CustomDatePicker
+  mode="range"
+  fromDate={startDate}
+  endDate={endDate}
+  onRangeChange={(start, end) => {
+    setStartDate(start)
+    setEndDate(end)
+  }}
+/>
+```
+---
+
+# Checkbox
+
+## Basic Checkbox
+
+```tsx
+import { Checkbox } from "@digitus-fci-oa/form-controls";
+import { useState } from "react";
+
+export default function TestCheckbox() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <Checkbox
+      label="Mandatory Field"
+      checked={checked}
+      onChange={setChecked}
+    />
+  );
+}
+```
+
+---
+
+## Checkbox With Required
+
+```tsx
+<Checkbox
+  label="Accept Terms & Conditions"
+  checked={checked}
+  onChange={setChecked}
+  required
+/>
+```
+
+---
+
+## Disabled Checkbox
+
+```tsx
+<Checkbox
+  label="Disabled Checkbox"
+  checked={true}
+  onChange={setChecked}
+  disabled
+/>
+```
+
+---
+
+## Checkbox With Test Id
+
+```tsx
+<Checkbox
+  label="Mandatory Field"
+  checked={checked}
+  onChange={setChecked}
+  dataTestId="mandatory-checkbox"
+/>
+```
+npm install @digitus-fci-oa/form-controls
+
+```
+import { DragDropUpload } from "@digitus-fci-oa/form-controls";
+import { Upload } from "lucide-react";
+
+function App() {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+
+  return (
+    <DragDropUpload
+      inputRef={inputRef}
+      isDragging={isDragging}
+      isUploading={isUploading}
+      disabled={false}
+      multiple={true}
+      accept=".pdf,.doc,.docx,.png,.jpg"
+      onFilesChange={(files) => {
+        console.log(files);
+      }}
+      onDrop={(e) => {
+        e.preventDefault();
+        setIsDragging(false);
+      }}
+      onDragOver={(e) => {
+        e.preventDefault();
+        setIsDragging(true);
+      }}
+      onDragLeave={() => {
+        setIsDragging(false);
+      }}
+      onClick={() => inputRef.current?.click()}
+      title="Drag & Drop Files Here"
+      subtitle="or"
+      buttonText="Browse"
+      uploadingText="Uploading files..."
+      footerText="(File Size Max 10MB)"
+      icon={<Upload className="w-12 h-12" />}
+      buttonClassName="
+        !px-[25px]
+        !py-[6px]
+        !bg-[#1570EF]
+        text-white
+        hover:bg-[#0047a3]
+      "
+    />
+  );
+}
+
+```
+---
+
+## Props
+
+| Prop             | Type                          | Default     | Description                          |
+| ---------------- | ----------------------------- | ------------ | ------------------------------------ |
+| `label`          | `string`                      | `undefined` | Checkbox label text                 |
+| `checked`        | `boolean`                     | `false`     | Controls checked state              |
+| `onChange`       | `(checked: boolean) => void` | �            | Triggered when checkbox changes     |
+| `disabled`       | `boolean`                     | `false`     | Disables checkbox                   |
+| `id`             | `string`                      | `undefined` | HTML id for checkbox                |
+| `className`      | `string`                      | `""`         | Custom wrapper class                |
+| `labelClassName` | `string`                      | `""`         | Custom label class                  |
+| `required`       | `boolean`                     | `false`     | Shows required asterisk             |
+| `dataTestId`     | `string`                      | `undefined` | Test id for automation/testing      |
+| `onFilesChange`  | `(files: FileList \| null) => void` | `undefined` | Callback triggered when files are 
+| `accept`         | `string`                       | `"*"`        |          Allowed file types |
+| `multiple`       | `boolean`                      | `true`       |     Allows multiple file selection |
+| `disabled`       | `boolean`                      | `false`      | Disables uploader interactions |
+| `isUploading`     |    `boolean`                  | `false`      | Shows uploading state |
+| `title`         | `string`                        | `"Drag & Drop Files Here"` | Main upload area itle |
+| `subtitle`       | `string`                       | `"or"`            | Subtitle text below title |
+| `buttonText`     |`string`                        | `"Browse"`                    | Browse button text |
+| `uploadingText` | `string`                        | `"Uploading files..."`    | Uploading message text |
+| `footerText`     | `string`                        | `"(File Size Max 10MB)"`    | Footer/helper text |
+| `icon`            | `React.ReactNode`              | `undefined`             | Custom upload icon |
+| `containerClassName`   | `string`                   | `""`        | Custom wrapper/container class |
+| `dropZoneClassName`    | `string`                   | `""`        | Custom dropzone class |
+| `buttonClassName`      | `string`                 | `""`           | Custom browse button class |
+| `inputId`            | `string`                     | `"file-upload"`   | Custom input element id |
+
+
+
+# MultiSelect Component
+
+A lightweight, accessible multi-select dropdown built with React and Tailwind CSS.
+
+---
+
+## Usage
+
+```tsx
+import { MultiSelect } from "./components/MultiSelect";
+
+const options = [
+  { label: "Apple", value: "apple" },
+  { label: "Banana", value: "banana" },
+  { label: "Cherry", value: "cherry" },
+];
+
+function App() {
+  const [selected, setSelected] = React.useState<string[]>([]);
+
+  return (
+    <MultiSelect
+      options={options}
+      value={selected}
+      onChange={setSelected}
+      placeholder="Select fruits..."
+    />
+  );
+}
+```
+
+```
+interface TooltipProps {
+
+    value: string;
+    icon?: React.ReactNode;
+}
+import Tooltip from "@digitus-fci-oa/form-controls";
+
+<Tooltip
+  value="View Questionnaire"
+  icon={
+    <Eye
+      size={16}
+      className="cursor-pointer text-blue-600"
+    />
+  }
+/>
+
+
+```
+
+---
+
+## Props
+
+| Prop          | Type                          | Required | Default        | Description                              |
+|---------------|-------------------------------|----------|----------------|------------------------------------------|
+| `options`     | `Option[]`                    | ✅        | —              | List of options to display               |
+| `value`       | `string[]`                    | ✅        | —              | Currently selected values                |
+| `onChange`    | `(value: string[]) => void`   | ✅        | —              | Callback when selection changes          |
+| `placeholder` | `string`                      | ❌        | `"Select..."` | Text shown when nothing is selected      |
+| `error`       | `string`                      | ❌        | —              | Error message shown below the dropdown   |
+  value="View Questionnaire"| `string`    |                              |  text                 
+
+### Option Type
+
+```ts
+interface Option {
+  label: string;  // Display text
+  value: string;  // Underlying value
+}
+```
+
+---
+
+## Features
+
+- Multi-selection with toggle behavior (click to select/deselect)
+- Selected labels shown as comma-separated text in the trigger button
+- Dropdown opens/closes on button click
+- Red border and error message on validation failure via `error` prop
+- Scrollable list capped at `max-h-60`
+- Checkmark indicator on selected items
+
+---
+
+## Error State
+
+Pass an `error` string to show validation feedback:
+
+```tsx
+<MultiSelect
+  options={options}
+  value={selected}
+  onChange={setSelected}
+  error="Please select at least one option."
+/>
+```
+
+---
+
+## Close on Outside Click
+
+The dropdown does not close automatically on outside click. Add this to your component if needed:
+
+
+```
+
+---
+
+## Dependencies
+
+| Package         | Purpose                        |
+|-----------------|--------------------------------|
+| `lucide-react`  | Icons (`ChevronDown`, `Check`) |
+| `tailwindcss`   | Utility-based styling          |
+| `clsx` / `tailwind-merge` | `cn()` utility for class merging |
+
+---
+
+## File Structure
+
+```
+src/
+├── components/
+│   └── MultiSelect.tsx   ← Component file
+└── lib/
+    └── utils.ts          ← cn() utility
+```
+
+
+
+
+
+# Textarea Component
+
+A resizable textarea input built with React and Tailwind CSS, with built-in error state support.
+
+---
+
+## Usage
+
+```tsx
+import { Textarea } from "./components/Textarea";
+
+function App() {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <Textarea
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      placeholder="Enter your text here..."
+    />
+  );
+}
+```
+
+---
+
+## Props
+
+| Prop        | Type      | Required | Default                      | Description                                              |
+|-------------|-----------|----------|------------------------------|----------------------------------------------------------|
+| `error`     | `string`  | ❌        | —                            | Error message displayed below the textarea               |
+| `className` | `string`  | ❌        | —                            | Additional Tailwind classes to merge                     |
+| `ref`       | `Ref`     | ❌        | —                            | Forwarded ref to the underlying `<textarea>` element    |
+| ...rest     | `React.TextareaHTMLAttributes` | ❌ | —               | All standard HTML textarea attributes (`onChange`, `disabled`, `rows`, etc.) |
+
+> Extends all native `React.TextareaHTMLAttributes<HTMLTextAreaElement>` props.
+
+---
+
+## Features
+
+- Forwarded ref support via `React.forwardRef`
+- Built-in error state with red border and error message
+- Fixed height of `4.5rem` with `resize-none` by default
+- Custom `className` support with `cn()` merge utility
+- Default placeholder text
+
+---
+
+## Error State
+
+Pass an `error` string to highlight the field and show a message:
+
+```tsx
+<Textarea
+  value={value}
+  onChange={(e) => setValue(e.target.value)}
+  error="This field is required."
+/>
+```
+
+---
+
+## With React Hook Form
+
+```tsx
+import { useForm } from "react-hook-form";
+import { Textarea } from "./components/Textarea";
+
+function Form() {
+  const { register, formState: { errors } } = useForm();
+
+  return (
+    <Textarea
+      {...register("description", { required: "Description is required" })}
+      error={errors.description?.message}
+    />
+  );
+}
+```
+
+---
+
+## Customizing Height
+
+Override the default height using `className`:
+
+```tsx
+<Textarea className="h-32" />   {/* taller */}
+<Textarea className="h-20" />   {/* shorter */}
+```
+
+---
+
+## Dependencies
+
+| Package                   | Purpose                          |
+|---------------------------|----------------------------------|
+| `react`                   | `forwardRef`, `TextareaHTMLAttributes` |
+| `tailwindcss`             | Utility-based styling            |
+| `clsx` / `tailwind-merge` | `cn()` utility for class merging  |
+
+---
+
+## File Structure
+
+```
+src/
+├── components/
+│   └── Textarea.tsx   ← Component file
+└── lib/
+    └── utils.ts       ← cn() utility
+```
+## Toggle Switch 
+
+## Usage
+import { ToggleSwitch } from "@digitus-fci-oa/form-controls";
+import { useState } from "react";
+
+export default function TestToggleSwitch() {
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <ToggleSwitch
+      checked={enabled}
+      onChange={setEnabled}
+      label={enabled ? "Yes" : "No"}
+    />
+  );
+}
+
+## Props
+
+| Prop       | Type                         | Default     | Description                         |
+| ---------- | ---------------------------- | ----------- | ----------------------------------- |
+| `checked`  | `boolean`                    | `false`     | Controls toggle state               |
+| `onChange` | `(checked: boolean) => void` | —           | Triggered when toggle state changes |
+| `disabled` | `boolean`                    | `false`     | Disables toggle interaction         |
+| `label`    | `string`                     | `undefined` | Optional label beside toggle        |
+
+
+# RadioButton
+
+import { Radio } from "@digitus-fci-oa/form-controls";
+import { useState } from "react";
+
+export default function TestRadio() {
+  const [selected, setSelected] = useState("yes");
+
+  return (
+    <div className="flex gap-4">
+
+      <Radio
+        label="Yes"
+        name="approval"
+        value="yes"
+        checked={selected === "yes"}
+        onChange={setSelected}
+      />
+
+      <Radio
+        label="No"
+        name="approval"
+        value="no"
+        checked={selected === "no"}
+        onChange={setSelected}
+      />
+
+    </div>
+  );
+}
+
+## Props
+
+| Prop       | Type                      | Default     | Description                           |
+| ---------- | ------------------------- | ----------- | ------------------------------------- |
+| `label`    | `string`                  | `undefined` | Radio label text                      |
+| `name`     | `string`                  | —           | Shared group name for radio selection |
+| `value`    | `string`                  | —           | Value of radio option                 |
+| `checked`  | `boolean`                 | `false`     | Controls selected state               |
+| `onChange` | `(value: string) => void` | —           | Triggered when option changes         |
+| `disabled` | `boolean`                 | `false`     | Disables radio interaction            |
+