custom-component-testing

Autocomplete Component Example

import Autocomplete from 'autocomplete-button-components';

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 'autocomplete-button-components';

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)