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)}
    />
  );
}

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" |

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) |