📦 PPA Component Library

Reusable component for faster web development, simple and easy to use. Enabling user to define it's color theme, make the UI displayed consistently.

You need additional package (mandatory) while using this component > Fontawesome and Tailwind CSS

💻 Installation

npm i @safestrong/ppa-component-library
#OR
yarn add @safestrong/ppa-component-library
#OR
pnpm add @safestrong/ppa-component-library

🕹 Usage

Import the stylesheet once, e.g. in your app's root layout or entry file import "@safestrong/ppa-component-library/styles.css" Import the component import { Button } from "@safestrong/ppa-component-library" Use component in your page or your own component <Button label="Click me" />

📂 List

Button - <Button />

| Prop | Type | Required | Default | Description | | ----------- | ---------- | -------- | ------- | ---------------------------------- | | label | string | ✅ Yes | — | The text inside the button. | | isLoading | boolean | ❌ No | false | Loading state waiting | | btnType | enum | ❌ No | primary | primary, secondary, tertiary | | icon | IconProp | ❌ No | — | Icon inside the button. | | className | string | ❌ No | — | Additional class for button. |

Card - <Card />

| Prop | Type | Required | Default | Description | | ----------- | ----------------- | -------- | ------- | ------------------------- | | children | React.ReactNode | ✅ Yes | — | Content inside. | | className | string | ❌ No | - | Additional class for card |

Text Input - <TextInput />

| Prop | Type | Required | Default | Description | | ---------- | ---------- | -------- | ------- | ---------------------------------- | | icon | IconProp | ❌ No | — | Icon inside text input | | label | string | ❌ No | - | Additional label if needed | | labelFor | string | ❌ No | - | Label (if any) htmlFor attribute |

Toast - <Toast />

| Prop | Type | Required | Default | Description | | ------------- | -------- | -------- | ------- | ----------------------------------- | | title | string | ✅ Yes | — | Toast Title | | description | string | ✅ Yes | - | Description on toast body | | type | enum | ❌ No | info | info,warning,success,danger | | className | string | ❌ No | - | Additional className for Toast body |

Expandable - <Expandable />

| Prop | Type | Required | Default | Description | | ----------- | ----------------- | -------- | ------- | ------------------------------- | | title | string | ✅ Yes | — | Title | | children | React.ReactNode | ✅ Yes | - | Content inside | | isOpen | boolean | ❌ No | false | Auto show/expand content | | className | string | ❌ No | - | Additional class for Expandable |

Tooltip - <Tooltip />

| Prop | Type | Required | Default | Description | | ---------- | ----------------- | -------- | ------- | -------------------------------- | | children | React.ReactNode | ✅ Yes | — | Text content | | text | string | ✅ Yes | - | Tooltip text | | position | string | ❌ No | top | top, bottom, right, left |

Single Select - <SingleSelect /> ✅ Client Component

| Prop | Type | Required | Default | Description | | ----------- | -------------------------------- | -------- | ------- | ---------------------------------- | | label | string | ❌ No | — | Additional label | | labelHtml | string | ❌ No | - | Label (if any) htmlFor attribute | | options | {label:string, value:string}[] | ❌ No | - | List Option | | stringOptions | string[] | ❌ No | - | List Option |

Multi Select - <MultiSelect /> ✅ Client Component

| Prop | Type | Required | Default | Description | | ------- | --------------------------------- | -------- | ------- | ------------ | | state | React.useState<{value, select}> | ✅ Yes | — | Text content | | options | {label:string, value:string}[] | ❌ No | - | List Option | stringOptions | string[] | ❌ No | - | List Option |

Example:

export default function Dashboard() {
  const [selectedItem, setSelectedItem] = useState([]);
  return (
      <MultiSelect
        list={list}
        state={{ value: selectedItem, select: setSelectedItem }}
      />
  );
}

Slider - <Slider />

| Prop | Type | Required | Default | Description | | --------------------- | --------------------- | -------- | ------- | ---------------------------------- | | InputHTMLAttributes | InputHTMLAttributes | ❌ No | — | optinal attribute of input Element |

Theme Toggle - <ThemeToggle />

| Prop | Type | Required | Default | Description | | --------------------- | --------------------- | -------- | ------- | ---------------------------------- | | InputHTMLAttributes | InputHTMLAttributes | ❌ No | — | optinal attribute of input Element |

Tab Navigation - <NavTabClient /> ✅ Client Component

| Prop | Type | Required | Default | Description | | ---------- | -------------------------------- | -------- | ------- | ------------ | | children | React.ReactNode | ✅ Yes | — | Text content | | state | string | ✅ Yes | - | Tooltip text | | items | {label:string, value:string}[] | ✅ Ye | - | List Option |