Autocomplete Component Example

import {Autocomplete} from 'custom-component-testing';

function App() {
  const recipes = [
    { id: 1, name: "Pasta" },
    { id: 2, name: "Pizza" },
    { id: 3, name: "Salad" }
  ];

  return (
    <Autocomplete
      options={recipes}
      label="Search for recipes..."
      name="search"
      onChange={(val) => console.log("Typed:", val)}
      onSelect={(val) => console.log("Selected:", val)}
    />
  );
}

Autocomplete Component Props

| Prop | Type | Description | Example | |----------------|--------------------------------------|-----------------------------------------------------------------------------------------------|----------------------------------------------| | options | Recipe[] (optional) | Array of static suggestion objects, e.g., { id: number, name: string }. | [ { id: 1, name: "Pizza" } ] | | fetchOptions | (query: string) => void (optional) | Async function to fetch suggestions dynamically based on the input query. | (query) => fetchData(query) | | label | string | Placeholder text displayed inside the input field. | "Search for recipes..." | | name | string | Name attribute for the input field (used for forms). | "search" | | onChange | (val?: string) => void | Callback triggered when the input value changes. | (val) => console.log("Typed:", val) | | onSelect | (val?: string) => void | Callback triggered when a suggestion is selected from the dropdown. | (val) => console.log("Selected:", val) |

Button Component Example

import {Button} from 'custom-component-testing';

function App() {
  return (
    <Button
      type="primary"
      size="large"
      startIcon="https://example.com/icon.png"
      onClick={() => console.log("Clicked!")}
      borderRadius="rounded"
      customDesign={{ backgroundColor: "#007bff" }}
    >
      Click Me
    </Button>
  );
}

Button Component Props

| Prop | Type | Description | Example | | -------------- | ---------------------------------- | ------------------------------------------------------------------- | --------------------------------- | | type | string (optional) | Button style type (e.g., "primary", "secondary", "disabled"). | "primary" | | onClick | () => void (optional) | Callback when the button is clicked. | () => console.log("Clicked!") | | startIcon | string (optional) | Path or URL to an image displayed before the button text. | "/assets/arrow-left.svg" | | endIcon | string (optional) | Path or URL to an image displayed after the button text. | "/assets/arrow-right.svg" | | borderRadius | string (optional) | Controls border radius. Should match a class in index.module.css. | "normal" or "rounded" | | customDesign | React.CSSProperties (optional) | Inline custom styles applied to the button wrapper. | { backgroundColor: "#007bff" } | | children | ReactNode (optional) | Content/text inside the button. | "Submit" or <span>Save</span> | | size | string (optional) | Adjusts size via CSS module class. Should match your class names. | "small", "normal", "large" |

TextField Component Example

import { TextField } from "custom-component-testing";

function App() {
  return (
      <TextField
        type="text"
        name="username"
        placeholder="Enter your username"
        rounded="8px"
        value="hello"
        onChange={(val) => console.log("Input:", val)}
        errorMessage="Username is required"
        startIcon="/assets/user.png"
        endIcon="/assets/check.png"
      />
  );
}

TextField Component Props

| Prop | Type | Description | Example | |----------------|-----------------------------------|--------------------------------------------------------------------|----------------------------------------| | type | "password" \| "text" | Type of the input field. | "text" or "password" | | placeholder | string | Placeholder text inside the input. | "Enter your name" | | rounded | string | Border radius value or class. | "md" | | name | string | Name attribute for form handling. | "email" | | color | string | Color of the border or text. | "red" or "#ccc" | | startIcon | string | Path or URL of icon shown at the beginning of the input field. | "/icons/user.svg" | | endIcon | string | Path or URL of icon shown at the end of the input field. | "/icons/eye.svg" | | width | string | Width of the input. | "100%" | | background | string | Background color or class. | "bg-gray-100" or "#f4f4f4" | | value | string | Controlled value of the input. | "Fardeen" | | defaultValue | string | Default value if uncontrolled. | "Guest" | | readOnly | boolean | Makes the input read-only. | true | | disabled | boolean | Disables the input field. | true | | textColor | string | Text color for the input. | "black" or "#000000" | | errorMessage | string | Displays an error message below the field. | "Required field" | | onChange | (val?: unknown) => void | Callback triggered when input value changes. | (val) => console.log(val) |

Dropdown Component Example

import { Dropdown } from "custom-component-testing";

const languages = [
  { id: 1, name: "JavaScript", value: "javascript" },
  { id: 2, name: "Python", value: "python" },
  { id: 3, name: "Go", value: "go" },
];

function App() {
  const [selectedLanguage, setSelectedLanguage] = useState("javascript");

  return (
    <Dropdown
      title="Select a language"
      dropdownValues={languages}
      selectedValue={selectedLanguage}
      setSelectedValue={setSelectedLanguage}
    />
  );
}

Dropdown Props

| Prop | Type | Description | Example | |--------------------|---------------------------------------------------|-----------------------------------------------------------------------------------------------|-------------------------------------------------------------------------| | title | string (optional) | Placeholder or label text displayed above the dropdown. | "Select a language" | | dropdownValues | { id: number; name: string; value: string; }[] | Array of dropdown options to choose from. Each item must include an id, name, and value. | [ { id: 1, name: "JavaScript", value: "javascript" } ] | | setSelectedValue | (val: string) => void (optional) | Callback function triggered when an item is selected. | (val) => console.log("Selected:", val) | | selectedValue | string (optional) | Currently selected value for controlled usage. | "javascript" |

RadioButton Component Example

import { RadioButton } from 'custom-component-library';

function App() {
  const handleGenderChange = (val?: string) => {
    console.log('Selected gender:', val);
  };

  return (
    <div>
      <RadioButton
        label="Male"
        value="male"
        name="gender"
        textColor="#333"
        size="normal"
        onChange={handleGenderChange}
      />
      <RadioButton
        label="Female"
        value="female"
        name="gender"
        textColor="#333"
        size="normal"
        onChange={handleGenderChange}
      />
    </div>
  );
}

RadioButton Component Props

| Prop | Type | Description | Example | |-------------|---------------------------------------------------------------|------------------------------------------------------------------------|---------------------------------| | category | 'default' | 'disabled' (optional) | Visual style of the radio button. "disabled" will disable the input. | "default" | | label | string (optional) | Text displayed next to the radio button. | "Male" | | textColor | string (optional) | Custom text color for the label. | "#333" or "white" | | value | string (required) | Value assigned to the radio button. | "male" | | name | string (optional) | Group name to logically group radio buttons. | "gender" | | onChange | (val?: string) => void (optional) | Callback triggered when the radio is selected. | (val) => console.log(val) | | size | 'small' | 'normal' | 'large' | string (optional) | Controls the size of the radio button. | "large" |

Checkbox Component Example

import { CheckBox } from 'custom-component-library';

function App() {
  const handleTermsChange = () => {
    console.log('Terms accepted');
  };

  return (
    <div>
      <CheckBox
        label="Accept Terms and Conditions"
        value="terms"
        name="agreement"
        textColor="#333"
        size="normal"
        onChange={handleTermsChange}
      />
    </div>
  );
}

CheckBox Component Props

| Prop | Type | Description | Example | |-------------|---------------------------------------------------------------|-----------------------------------------------------------------------|--------------------------------| | category | 'default' | 'disabled' (optional) | Visual style of the checkbox. "disabled" disables the checkbox. | "default" | | label | string (optional) | Label text displayed next to the checkbox. | "Accept Terms" | | textColor | string (optional) | Text color. Defaults based on theme (light/dark) auto-detection. | "#333" | | value | string (required) | The value assigned to the checkbox. | "terms" | | name | string (optional) | Checkbox name attribute (useful for forms). | "agreement" | | onChange | () => void (optional) | Function called when checkbox is toggled. | () => console.log("checked") | | size | 'small' | 'normal' | 'large' | string (optional) | Controls checkbox size via CSS module classes. Default is 'normal'. | "small" |