### Run Development and Production Tasks

Source: https://github.com/ssagroup/ui-kit/blob/main/CONTRIBUTING.md

Commands to serve or build specific dashboard examples within the monorepo.

```bash
# Run in development mode
pnpm --filter ./examples/fitness-dashboard serve

# Build for production
pnpm --filter ./examples/fitness-dashboard build
```

--------------------------------

### Install pNPM and Project Dependencies

Source: https://github.com/ssagroup/ui-kit/blob/main/CONTRIBUTING.md

Commands to install the pNPM package manager globally and set up the project environment by cloning the repository and installing workspace dependencies.

```bash
npm install -g pnpm
git clone git@github.com:ssagroup/ui-kit.git
pnpm install --frozen-lockfile
```

--------------------------------

### Build UI Kit Packages

Source: https://github.com/ssagroup/ui-kit/blob/main/CONTRIBUTING.md

Instructions for building packages in dependency order to ensure changes are correctly propagated. Includes commands for individual builds, full builds, and watch mode.

```bash
# Build packages in dependency order
pnpm build:utils
pnpm build:hooks
pnpm build:core

# Build all packages or specific ones
pnpm build:all
pnpm build:widgets

# Watch mode for automatic rebuilds
pnpm build:core:watch
```

--------------------------------

### Execute Scripts with pNPM

Source: https://github.com/ssagroup/ui-kit/blob/main/CONTRIBUTING.md

Demonstrates how to run scripts defined in package.json files, either for the root project or specific sub-packages using the --filter flag.

```bash
pnpm test
pnpm --filter ./packages/core build
```

--------------------------------

### Install @ssa-ui-kit/infra-dash

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/infra-dash/docs/index.mdx

Instructions for installing the @ssa-ui-kit/infra-dash library using npm, yarn, or pnpm. Ensure @ssa-ui-kit/core is installed as a peer dependency.

```bash
npm install @ssa-ui-kit/infra-dash
# or
yarn add @ssa-ui-kit/infra-dash
# or
pnpm add @ssa-ui-kit/infra-dash
```

--------------------------------

### Build Monorepo Projects

Source: https://github.com/ssagroup/ui-kit/blob/main/CONTRIBUTING.md

Commands to compile all sub-projects within the monorepo workspace to ensure local development readiness.

```bash
pnpm build:all
```

--------------------------------

### Execute Release Scripts

Source: https://github.com/ssagroup/ui-kit/blob/main/CONTRIBUTING.md

Commands to trigger the release process with specific version increments, tags, and dry-run capabilities.

```bash
# Perform a patch release
pnpm release --increment patch

# Perform a minor release
pnpm release --increment minor

# Dry run release to verify output
pnpm release --increment patch --dry-run
```

--------------------------------

### Install SSA UI Kit Dependencies

Source: https://github.com/ssagroup/ui-kit/blob/main/README.md

Commands to install the core library and optional hooks package using npm, yarn, or pnpm, along with required peer dependencies.

```bash
# Core components
npm install @ssa-ui-kit/core
# or
yarn add @ssa-ui-kit/core
# or
pnpm add @ssa-ui-kit/core

# Hooks (optional, separate package)
npm install @ssa-ui-kit/hooks
# or
yarn add @ssa-ui-kit/hooks
# or
pnpm add @ssa-ui-kit/hooks

# Peer Dependencies
npm install react@19.x react-dom@19.x @emotion/react @emotion/styled react-hook-form
```

--------------------------------

### Manage Node.js Version with NVM

Source: https://github.com/ssagroup/ui-kit/blob/main/CONTRIBUTING.md

Uses the NVM tool to automatically switch to the Node.js version specified in the project's .nvmrc file.

```bash
nvm use
```

--------------------------------

### Pagination: Navigation and Row Selector Examples (React)

Source: https://context7.com/ssagroup/ui-kit/llms.txt

Demonstrates the Pagination component for navigating through pages. It includes examples of basic pagination, enabling page settings and rows-per-page selection, and handling disabled states. Requires a context provider for state management.

```tsx
import { Pagination, PaginationContextProvider } from '@ssa-ui-kit/core';

// Basic pagination
<PaginationContextProvider selectedPage={5}>
  <Pagination pagesCount={10} />
</PaginationContextProvider>

// Pagination with page setting and rows per page
<PaginationContextProvider selectedPage={1}>
  <Pagination
    pagesCount={10}
    isPageSettingVisible
    isRowPerPageVisible
  />
</PaginationContextProvider>

// First page selected
<PaginationContextProvider selectedPage={1}>
  <Pagination pagesCount={10} />
</PaginationContextProvider>

// Disabled pagination
<PaginationContextProvider selectedPage={5}>
  <Pagination pagesCount={10} isDisabled />
</PaginationContextProvider>
```

--------------------------------

### Install SSA UI Kit Packages

Source: https://context7.com/ssagroup/ui-kit/llms.txt

Installs the core, hooks, and utility packages for the SSA UI Kit using npm or pnpm. These packages provide essential components and functionalities for your project.

```bash
npm install @ssa-ui-kit/core @ssa-ui-kit/hooks @ssa-ui-kit/utils
# or
pnpm add @ssa-ui-kit/core @ssa-ui-kit/hooks @ssa-ui-kit/utils
```

--------------------------------

### Implementing a Complete Form

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Form/Form.mdx

A comprehensive example showing the usage of Form, FormGroup, and TextField components, including validation schemas and textarea configuration.

```javascript
type Inputs = {
  name: string;
  lastname: string;
  address: string;
};

const Sample = () => {
  const { register, handleSubmit, formState: { errors } } = useForm<Inputs>();

  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <FormGroup>
        <TextField
          placeholder="Name" label="Name" name="name" register={register}
          validationSchema={{
            required: 'Required',
          }} errors={errors?.name} />

        <TextField
          placeholder="Last name"
          label="Last name"
          name="lastname"
          register={register}
          validationSchema={{
            required: 'Required',
          }}
          errors={errors?.lastname}
          success
          helperText={'Success'}
        />
      </FormGroup>

      <FormGroup>
        <TextField
          placeholder="Address"
          label="Address"
          name="address"
          register={register}
          validationSchema={{
            required: 'is required',
            minLength: {
              value: 3,
              message: 'Please enter a minimum of 3 characters',
            },
          }}
          errors={errors?.address}
          helperText={'Basic text'}
        />
      </FormGroup>

      <FormGroup>
          <TextField
            multirow
            rows={10}
            label="Textarea"
            name="textarea"
            register={register}
            validationSchema={{
              required: 'Required',
            }}
            helperText="some nice text"
          />
        </FormGroup>

      <FormAction>
        <button>Submit</button>
      </FormAction>
    </Form>
);
}
```

--------------------------------

### Implement Default Pagination with Context

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Pagination/Pagination.mdx

Demonstrates the basic setup for the Pagination component. It requires the PaginationContextProvider to manage the current page state.

```tsx
import { Pagination, PaginationContextProvider } from '@ssa-ui-kit/core';

const App = () => {
  return (
    <PaginationContextProvider selectedPage={1}>
      <Pagination pagesCount={10} />
    </PaginationContextProvider>
  );
};
```

--------------------------------

### Manage pNPM Workspace Dependencies

Source: https://github.com/ssagroup/ui-kit/blob/main/CONTRIBUTING.md

Commands for adding or removing dependencies at the workspace root or within specific sub-projects using the --filter flag.

```bash
# Adds a package to the pNPM workspace root
pnpm add @emotion/react -w
# Removes a package from the pNPM workspace root
pnpm remove @emotion/react -w
# Adds a dev dependency to the workspace root
pnpm add webpack -w -D
# Adds a dev package to a specific sub-project
pnpm add @storybook/react --filter ./packages/core -D
```

--------------------------------

### Implement Basic Popover with React

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Popover/stories/Popover.mdx

Demonstrates the standard implementation of the Popover component using its compound sub-components. This setup includes a trigger, heading, description, and close action.

```tsx
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeading,
  PopoverDescription,
  PopoverClose,
} from '@ssa-ui-kit/core';

function BasicPopover() {
  return (
    <Popover>
      <PopoverTrigger>Open Popover</PopoverTrigger>
      <PopoverContent>
        <PopoverHeading variant="h4">Popover Title</PopoverHeading>
        <PopoverDescription variant="body1">
          This is the popover content. You can include any React components
          here.
        </PopoverDescription>
        <PopoverClose>Close</PopoverClose>
      </PopoverContent>
    </Popover>
  );
}
```

--------------------------------

### Implement UI Kit Components

Source: https://github.com/ssagroup/ui-kit/blob/main/README.md

Examples for rendering Buttons, Inputs with React Hook Form, and Tables using the @ssa-ui-kit/core library.

```tsx
import { Button, Icon, Input, Table, TableHead, TableBody, TableRow, TableCell, TableCellHeader } from '@ssa-ui-kit/core';
import { useForm, FormProvider } from 'react-hook-form';

// Button Example
<Button text="Save" startIcon={<Icon name="check" size={16} />} variant="secondary" />

// Input Example
function MyForm() {
  const methods = useForm();
  return (
    <FormProvider {...methods}>
      <Input name="email" placeholder="Enter your email" status="basic" />
    </FormProvider>
  );
}

// Table Example
function UserTable() {
  const data = [{ id: 1, name: 'John Doe' }];
  return (
    <Table>
      <TableHead><TableRow><TableCellHeader>Name</TableCellHeader></TableRow></TableHead>
      <TableBody>{data.map(u => <TableRow key={u.id}><TableCell>{u.name}</TableCell></TableRow>)}</TableBody>
    </Table>
  );
}
```

--------------------------------

### Configure Hover Tooltip Placements

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Tooltip/Tooltip.mdx

Shows how to use the 'placement' prop to position tooltips on different sides of the trigger element. This example utilizes the 'enableHover' prop for interaction.

```tsx
function HoverTooltips() {
  return (
    <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
      <Tooltip enableHover placement="top">
        <TooltipTrigger>
          <Button text="Top" />
        </TooltipTrigger>
        <TooltipContent>Tooltip appears on top</TooltipContent>
      </Tooltip>

      <Tooltip enableHover placement="bottom">
        <TooltipTrigger>
          <Button text="Bottom" />
        </TooltipTrigger>
        <TooltipContent>Tooltip appears at the bottom</TooltipContent>
      </Tooltip>

      <Tooltip enableHover placement="left">
        <TooltipTrigger>
          <Button text="Left" />
        </TooltipTrigger>
        <TooltipContent>Tooltip appears on the left</TooltipContent>
      </Tooltip>

      <Tooltip enableHover placement="right">
        <TooltipTrigger>
          <Button text="Right" />
        </TooltipTrigger>
        <TooltipContent>Tooltip appears on the right</TooltipContent>
      </Tooltip>
    </div>
  );
}
```

--------------------------------

### SSA UI Kit Input Component Examples with React Hook Form

Source: https://context7.com/ssagroup/ui-kit/llms.txt

Illustrates the usage of the Input component from SSA UI Kit, integrated with react-hook-form. Examples include basic input, validation, status states (error, success), helper text, and disabled states.

```tsx
import { Input, Icon } from '@ssa-ui-kit/core';
import { useForm, FieldValues } from 'react-hook-form';

function FormExample() {
  const { register } = useForm<FieldValues>();

  return (
    <>
      {/* Basic input with validation */}
      <Input
        placeholder="Email"
        name="email"
        register={register}
        validationSchema={{
          required: 'Email is required',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: 'Invalid email address',
          }
        }}
        status="basic"
      />

      {/* Input with end icon */}
      <Input
        placeholder="Search"
        name="search"
        register={register}
        endElement={<Icon name="search" size={16} />}
      />

      {/* Password input with toggle visibility */}
      <Input
        type="password"
        placeholder="Password"
        name="password"
        register={register}
        validationSchema={{ required: 'Password is required' }}
        endElement={<Icon name="visible" size={16} />}
      />

      {/* Input with error state and helper text */}
      <Input
        placeholder="Username"
        name="username"
        register={register}
        status="error"
        showHelperText
        helperText="Username must be unique"
        errors={{ type: 'validate', message: 'Username already taken' }}
      />

      {/* Success state input */}
      <Input
        placeholder="Valid field"
        name="validField"
        register={register}
        status="success"
        showHelperText
        helperText="Looks good!"
      />

      {/* Disabled input */}
      <Input
        placeholder="Disabled"
        name="disabled"
        register={register}
        disabled
      />
    </>
  );
}
```

--------------------------------

### Quick Start with InfraDashProvider and DashboardViewer

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/infra-dash/docs/index.mdx

Demonstrates how to set up the InfraDashProvider with a RestInfraDashTransport instance and render a DashboardViewer component. Includes configuration for base URL and authentication.

```tsx
import React from 'react';
import {
  InfraDashProvider,
  DashboardViewer,
  RestInfraDashTransport
} from '@ssa-ui-kit/infra-dash';

// Create a transport instance to handle data fetching
const transport = new RestInfraDashTransport({
  // Base InfraDash URL
  baseUrl: '/api/InfraDash',
  authMiddleware: (request) => {
    request.headers.set(
      'Authorization',
      'Bearer your-auth-token-here',
    );
    return request;
  },
  unwrapResponse: (response) => {
    // Unwrap the response data if needed
    ...
  },
});

function App() {
  return (
    <InfraDashProvider transport={transport}>
      <DashboardViewer dashboardId={1} />
    </InfraDashProvider>
  );
}
```

--------------------------------

### Implement Basic FiltersMultiSelect Component

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/FiltersMultiSelect/FiltersMultiSelect.mdx

Demonstrates the basic setup of the FiltersMultiSelect component using the useFilterMultiSelect hook. It shows how to initialize the store with default selected filters and render the component with searchable options.

```tsx
import {
  FiltersMultiSelect,
  FiltersMultiSelectOptions,
  FiltersMultiSelectOption,
  useFilterMultiSelect,
  Filter,
} from '@ssa-ui-kit/core';

function BasicFiltersExample() {
  const filters: Filter[] = [
    { id: '1', label: 'Active Users' },
    { id: '2', label: 'Premium Accounts' },
    { id: '3', label: 'Recent Signups' },
    { id: '4', label: 'Marketing Segment', group: true },
    { id: '5', label: 'Mobile Users' },
    { id: '6', label: 'High Value Customers' },
  ];

  const store = useFilterMultiSelect({
    defaultSelectedFilters: [
      { id: '1', label: 'Active Users', type: 'include' },
      { id: '2', label: 'Premium Accounts', type: 'exclude' },
    ],
    onChange: (selectedFilters) => {
      console.log('Filters changed:', selectedFilters);
    },
  });

  const filtersToShow = filters.filter((filter) =>
    filter.label.toLowerCase().includes(store.search.toLowerCase()),
  );

  return (
    <FiltersMultiSelect
      store={store}
      label="User Filters"
      placeholder="Search filters..."
      description="Select filters to refine your user search">
      <FiltersMultiSelectOptions>
        {filtersToShow.map((filter) => (
          <FiltersMultiSelectOption key={filter.id} filter={filter}>
            {filter.label}
          </FiltersMultiSelectOption>
        ))}
      </FiltersMultiSelectOptions>
    </FiltersMultiSelect>
  );
}
```

--------------------------------

### AccordionGroup: Basic and Multiple Open Panels Example (React)

Source: https://context7.com/ssagroup/ui-kit/llms.txt

Demonstrates how to use the AccordionGroup component to create collapsible content panels. It requires a context provider and supports single or multiple open panels. The example shows basic usage with different sizes and content.

```tsx
import {
  AccordionGroup,
  Accordion,
  AccordionTitle,
  AccordionContent,
  AccordionGroupContextProvider,
  Typography,
} from '@ssa-ui-kit/core';

// Basic accordion group (requires context provider)
<AccordionGroupContextProvider>
  <AccordionGroup size="large">
    <Accordion
      id="first"
      title="Getting Started"
      ariaControls="first-panel"
      renderContent={(props) => (
        <AccordionContent {...props}>
          <Typography>
            Welcome to SSA UI Kit! This section covers installation and basic setup.
          </Typography>
        </AccordionContent>
      )}
      renderTitle={AccordionTitle}
    />
    <Accordion
      id="second"
      title="Components"
      isOpened
      ariaControls="second-panel"
      renderContent={(props) => (
        <AccordionContent {...props}>
          <Typography>
            Explore our comprehensive component library including buttons, inputs, and more.
          </Typography>
        </AccordionContent>
      )}
      renderTitle={AccordionTitle}
    />
    <Accordion
      id="third"
      title="Advanced Usage"
      ariaControls="third-panel"
      renderContent={(props) => (
        <AccordionContent {...props}>
          <Typography>
            Learn about theming, customization, and advanced patterns.
          </Typography>
        </AccordionContent>
      )}
      renderTitle={AccordionTitle}
    />
  </AccordionGroup>
</AccordionGroupContextProvider>

// Single accordion open at a time
<AccordionGroupContextProvider>
  <AccordionGroup size="medium" accordionsStayOpen={false}>
    {/* Accordion items... */}
  </AccordionGroup>
</AccordionGroupContextProvider>
```

--------------------------------

### Default ButtonGroup Usage Example

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/ButtonGroup/ButtonGroup.mdx

Demonstrates the basic implementation of the ButtonGroup component, including defining items and handling click events. It requires the ButtonGroup and ButtonGroupItem types from '@ssa-ui-kit/core'.

```tsx
import { ButtonGroup, ButtonGroupItem } from '@ssa-ui-kit/core';

const items: ButtonGroupItem[] = [
  { id: 1, text: 'All (10)', isDisabled: false },
  { id: 2, text: 'Running (117)', isDisabled: false },
  { id: 3, text: 'Stopped (2)', isDisabled: false },
];

function Demo() {
  const handleClick = (item: ButtonGroupItem) => {
    console.log('Selected:', item);
  };

  return <ButtonGroup items={items} onClick={handleClick} />;
}
```

--------------------------------

### CollapsibleNavBar: Responsive Design Example (React)

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/CollapsibleNavBar/stories/CollapsibleNavBar.mdx

Illustrates how CollapsibleNavBar automatically adapts to different screen sizes, functioning as a sidebar on larger screens and a hamburger menu on smaller ones. Includes a simple app logo.

```tsx
function ResponsiveNavigation() {
  const items = [
    { path: '', iconName: 'home', iconSize: 20, title: 'Dashboard' },
    { path: 'projects', iconName: 'folder', iconSize: 20, title: 'Projects' },
    { path: 'team', iconName: 'user', iconSize: 20, title: 'Team' },
    { path: 'calendar', iconName: 'calendar', iconSize: 20, title: 'Calendar' },
  ];

  const AppLogo = () => (
    <div
      style={{
        width: '48px',
        height: '42px',
        background: 'linear-gradient(45deg, #667eea, #764ba2)',
        borderRadius: '8px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'white',
        fontWeight: 'bold',
        fontSize: '16px',
      }}>
      APP
    </div>
  );

  return (
    <MemoryRouter>
      <CollapsibleNavBar
        items={items}
        renderLogo={<AppLogo />}
        onChange={(isExpanded) => {
          console.log('Sidebar expanded:', isExpanded);
          // Handle navigation state changes
        }}
      />
    </MemoryRouter>
  );
}

```

--------------------------------

### Basic DatePicker Usage

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/DatePicker/DatePicker.mdx

Demonstrates the default usage of the DatePicker component, including its name, label, helper text, and change event handler. This is the foundational example for integrating the DatePicker into an application.

```tsx
import { DatePicker } from '@ssa-ui-kit/core';

function BasicDatePicker() {
  const handleDateChange = (date?: Date) => {
    console.log('Selected date:', date);
  };

  return (
    <DatePicker
      name="birthdate"
      label="Birth Date"
      helperText="Select your birth date"
      onChange={handleDateChange}
    />
  );
}
```

--------------------------------

### Apply Button Variants and Sizes

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Button/Button.mdx

Examples of various button variants (Primary, Secondary, Tertiary, Error, Warning, Success) and sizes (Small, Medium, Large) for different UI contexts.

```tsx
<Button variant="primary">Primary Action</Button>
<Button variant="secondary">Secondary Action</Button>
<Button variant="tertiary">Tertiary Action</Button>
<Button variant="error">Delete</Button>
<Button variant="warning">Warning</Button>
<Button variant="success">Confirm</Button>
<Button size="small">Small Button</Button>
<Button size="medium">Medium Button</Button>
<Button size="large">Large Button</Button>
```

--------------------------------

### Setup SSA UI Kit Theme Provider

Source: https://context7.com/ssagroup/ui-kit/llms.txt

Sets up the Emotion ThemeProvider with the main theme from SSA UI Kit. This is essential for applying consistent styling, colors, and breakpoints across your application's components.

```tsx
import { ThemeProvider } from '@emotion/react';
import { mainTheme } from '@ssa-ui-kit/core';

function App() {
  return (
    <ThemeProvider theme={mainTheme}>
      <YourApplication />
    </ThemeProvider>
  );
}
```

--------------------------------

### Input Component with Start and End Elements

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Input/Input.mdx

Demonstrates how to augment the Input component with leading ('startElement') and trailing ('endElement') elements, such as icons or custom buttons. This enhances usability and provides visual cues.

```tsx
// Input with end icon
<Input
  name="search"
  placeholder="Search..."
  register={register}
  endElement={<Icon name="search" size={16} />}
/>

// Input with start icon
<Input
  name="phone"
  placeholder="Phone number"
  register={register}
  startElement={<Icon name="phone" size={16} />}
/>

// Input with both icons
<Input
  name="password"
  type="password"
  placeholder="Password"
  register={register}
  startElement={<Icon name="lock" size={16} />}
  endElement={<Icon name="visible" size={16} />}
/>

// Input with custom action button
<Input
  name="confirmation"
  placeholder="Confirmation code"
  register={register}
  endElement={
    <button onClick={() => console.log('Resend code')}> 
      Resend
    </button>
  }
/>
```

--------------------------------

### CollapsibleNavBar: Default Usage Example (React)

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/CollapsibleNavBar/stories/CollapsibleNavBar.mdx

Demonstrates the basic implementation of the CollapsibleNavBar component with a list of navigation items and a custom logo. It utilizes react-router-dom for routing and logs navigation toggle events.

```tsx
import { CollapsibleNavBar } from '@ssa-ui-kit/core';
import { MemoryRouter } from 'react-router-dom';

function BasicNavigation() {
  const navigationItems = [
    { path: '', iconName: 'home', iconSize: 20, title: 'Dashboard' },
    { path: 'users', iconName: 'user', iconSize: 20, title: 'Users' },
    { path: 'settings', iconName: 'settings', iconSize: 20, title: 'Settings' },
    {
      prefix: 'reports/',
      iconName: 'chart',
      iconSize: 22,
      title: 'Reports',
      items: [
        { path: 'analytics', title: 'Analytics' },
        { path: 'sales', title: 'Sales' },
        { path: 'performance', title: 'Performance' },
      ],
    },
    {
      path: 'notifications',
      iconName: 'notification',
      iconSize: 24,
      title: 'Notifications',
    },
  ];

  const Logo = () => (
    <img src="/logo.svg" alt="Company Logo" width={48} height={42} />
  );

  return (
    <MemoryRouter>
      <CollapsibleNavBar
        items={navigationItems}
        renderLogo={<Logo />}
        onChange={(isOpen) => console.log('Navigation toggled:', isOpen)}
      />
    </MemoryRouter>
  );
}

```

--------------------------------

### Display Color Themes for Progress Bars (React)

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Progress/Progress.mdx

Demonstrates how to use different color themes for progress bars by mapping an array of color objects. Each object specifies a color name and a percentage. This example utilizes React and JSX.

```tsx
function ColorThemeExamples() {
  const colors = [
    { name: 'blue', percentage: 90 },
    { name: 'green', percentage: 75 },
    { name: 'yellow', percentage: 60 },
    { name: 'pink', percentage: 45 },
    { name: 'purple', percentage: 30 },
    { name: 'turquoise', percentage: 85 },
    { name: 'blueLight', percentage: 55 },
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      {colors.map((color) => (
        <div key={color.name}>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              marginBottom: '4px',
              fontSize: '12px',
              fontWeight: 600,
            }}>
            <span>{color.name}</span>
            <span>{color.percentage}%</span>
          </div>
          <Progress>
            <ProgressBar percentage={color.percentage} color={color.name} />
          </Progress>
        </div>
      ))}
    </div>
  );
}
```

--------------------------------

### Implement SSA UI Kit Components in React

Source: https://github.com/ssagroup/ui-kit/blob/main/README.md

A complete example demonstrating the integration of Card, Input, Table, and Button components within a React application using React Hook Form and Emotion ThemeProvider.

```tsx
import { ThemeProvider } from '@emotion/react';
import { FormProvider, useForm } from 'react-hook-form';
import { Card, CardHeader, CardContent, Button, Input, Typography, Table, TableHead, TableBody, TableRow, TableCell, TableCellHeader, mainTheme, Theme as T } from '@ssa-ui-kit/core';

declare module '@emotion/react' {
  export interface Theme extends T {}
}

function App() {
  const methods = useForm();
  const users = [
    { id: 1, name: 'John Doe', email: 'john@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
  ];

  return (
    <ThemeProvider theme={mainTheme}>
      <FormProvider {...methods}>
        <Card>
          <CardHeader>
            <Typography variant="h2">User Management</Typography>
          </CardHeader>
          <CardContent>
            <Input
              name="search"
              placeholder="Search users..."
              register={methods.register}
              css={{ marginBottom: 16 }}
            />
            <Table>
              <TableHead>
                <TableRow>
                  <TableCellHeader>Name</TableCellHeader>
                  <TableCellHeader>Email</TableCellHeader>
                  <TableCellHeader>Actions</TableCellHeader>
                </TableRow>
              </TableHead>
              <TableBody>
                {users.map((user) => (
                  <TableRow key={user.id}>
                    <TableCell>{user.name}</TableCell>
                    <TableCell>{user.email}</TableCell>
                    <TableCell>
                      <Button size="small" text="Edit" />
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </FormProvider>
    </ThemeProvider>
  );
}
```

--------------------------------

### Initialize Theme Provider

Source: https://github.com/ssagroup/ui-kit/blob/main/README.md

Wraps the application with Emotion's ThemeProvider and augments TypeScript types to support the UI kit's mainTheme.

```tsx
import { ThemeProvider } from '@emotion/react';
import { mainTheme, Theme as T } from '@ssa-ui-kit/core';

declare module '@emotion/react' {
  export interface Theme extends T {}
}

function App() {
  return (
    <ThemeProvider theme={mainTheme}>
      {/* Your app components */}
    </ThemeProvider>
  );
}
```

--------------------------------

### Customize Dropdown Placeholder Text

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Dropdown/Dropdown.mdx

Sets custom placeholder text for the Dropdown component when no item is selected. This is achieved by passing a `placeholder` prop to the `Dropdown` component. The example demonstrates how to provide a default message to guide user selection.

```tsx
<Dropdown placeholder="Choose your preferred option..." onChange={handleChange}>
  {items.map((item) => (
    <DropdownOption key={item.id} value={item.id}>
      {item.value}
    </DropdownOption>
  ))}
</Dropdown>
```

--------------------------------

### Implement Basic Drawer with Hook API

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Drawer/Drawer.mdx

Demonstrates the standard implementation of a Drawer using the useDrawer hook and component composition. It shows how to trigger the drawer state and structure the content within the Root, Portal, and Overlay components.

```tsx
import { Drawer, useDrawer, Button } from '@ssa-ui-kit/core';

function BasicDrawer() {
  const drawer = useDrawer({
    title: 'Settings',
    withCloseButton: true,
  });

  return (
    <>
      <Button {...drawer.interactions.getReferenceProps()}>
        {drawer.opened ? 'Close' : 'Open'} Drawer
      </Button>

      <Drawer.Root store={drawer}>
        <Drawer.Portal>
          <Drawer.Overlay>
            <Drawer.Content css={{ padding: '24px', maxWidth: '400px' }}>
              <h3>Drawer Content</h3>
              <p>
                This is the drawer content area where you can place any
                components.
              </p>
            </Drawer.Content>
          </Drawer.Overlay>
        </Drawer.Portal>
      </Drawer.Root>
    </>
  );
}
```

--------------------------------

### CollapsibleNavBar: Nested Navigation Example (React)

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/CollapsibleNavBar/stories/CollapsibleNavBar.mdx

Shows how to implement hierarchical navigation structures with expandable submenus within the CollapsibleNavBar. This example includes multiple levels of nested items and customizes the submenu width.

```tsx
function NestedNavigation() {
  const items = [
    { path: '', iconName: 'home', iconSize: 20, title: 'Dashboard' },
    {
      prefix: 'ecommerce/',
      iconName: 'shopping-cart',
      iconSize: 22,
      title: 'E-commerce',
      items: [
        { path: 'products', title: 'Products' },
        { path: 'orders', title: 'Orders' },
        { path: 'customers', title: 'Customers' },
        { path: 'inventory', title: 'Inventory' },
        { path: 'analytics', title: 'Analytics' },
      ],
    },
    {
      prefix: 'content/',
      iconName: 'document',
      iconSize: 20,
      title: 'Content Management',
      items: [
        { path: 'posts', title: 'Blog Posts' },
        { path: 'pages', title: 'Static Pages' },
        { path: 'media', title: 'Media Library' },
        { path: 'categories', title: 'Categories' },
      ],
    },
    {
      prefix: 'admin/',
      iconName: 'settings',
      iconSize: 20,
      title: 'Administration',
      items: [
        { path: 'users', title: 'User Management' },
        { path: 'roles', title: 'Roles & Permissions' },
        { path: 'system', title: 'System Settings' },
        { path: 'logs', title: 'Activity Logs' },
      ],
    },
  ];

  return (
    <MemoryRouter>
      <CollapsibleNavBar
        items={items}
        renderLogo={<div>📱 CMS</div>}
        subMenuMaxWidth={220}
        onChange={(isOpen) => console.log('Navigation state:', isOpen)}
      />
    </MemoryRouter>
  );
}

```

--------------------------------

### Toggle Portal vs Container Rendering

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Drawer/Drawer.mdx

Illustrates the difference between rendering a drawer as a global overlay via Portal or inline within a specific container.

```tsx
// Portal rendering (overlay mode)
<Drawer.Root store={drawer}>
  <Drawer.Portal>
    <Drawer.Overlay>
      <Drawer.Content>
        Content overlays the page
      </Drawer.Content>
    </Drawer.Overlay>
  </Drawer.Portal>
</Drawer.Root>

// Container rendering (inline mode)
<div style={{ position: 'relative', overflow: 'hidden' }}>
  <Drawer.Root store={drawer}>
    <Drawer.Content>
      Content pushes other content
    </Drawer.Content>
  </Drawer.Root>
</div>
```

--------------------------------

### Display Content in Indicator

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Indicator/Indicator.mdx

Examples of rendering text, numeric values, or custom JSX elements within the indicator badge.

```tsx
// Simple text
<Indicator isVisible={true} position="right" text="NEW">
  <Button>New Feature</Button>
</Indicator>

// Numeric content
<Indicator isVisible={true} position="right" text={42}>
  <Button>Messages</Button>
</Indicator>

// JSX Element content
<Indicator isVisible={true} position="right" text={<Typography variant="body2" weight="regular" color="white">+2100</Typography>}>
  <Button>Progress</Button>
</Indicator>
```

--------------------------------

### Basic Dashboard Display with DashboardViewer

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/infra-dash/docs/index.mdx

A simple example of how to use the DashboardViewer component to display a specific dashboard by its ID.

```tsx
import { DashboardViewer } from '@ssa-ui-kit/infra-dash';

function MyDashboard() {
  return <DashboardViewer dashboardId={123} />;
}
```

--------------------------------

### Integrate Radio in forms

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Radio/Radio.mdx

Provides an example of using Radio buttons within a standard HTML form structure with fieldset and legend for accessibility.

```tsx
<form onSubmit={handleSubmit}>
  <fieldset>
    <legend>Select your preferred contact method:</legend>
    <Radio id="contact-email" name="contact-method" value="email" text="Email" isRequired={true} onChange={handleChange} />
    <Radio id="contact-phone" name="contact-method" value="phone" text="Phone" isRequired={true} onChange={handleChange} />
  </fieldset>
  <button type="submit">Submit</button>
</form>
```

--------------------------------

### Modal Component Examples - React

Source: https://context7.com/ssagroup/ui-kit/llms.txt

Demonstrates the usage of the Modal component for displaying dialogs. It covers basic, custom content, and controlled modal patterns using React and @ssa-ui-kit/core. Dependencies include React hooks and various UI primitives from the kit.

```tsx
import {
  Modal,
  ModalContent,
  ModalOpenButton,
  ModalDismissButton,
  Button,
  Typography,
  Icon,
} from '@ssa-ui-kit/core';
import { useState } from 'react';

// Basic modal with trigger button
<Modal>
  <ModalOpenButton>
    <Button variant="primary" text="Open Modal" />
  </ModalOpenButton>
  <ModalContent aria-label="Example modal">
    <div css={{ display: 'flex', justifyContent: 'flex-end' }}>
      <ModalDismissButton>
        <Button
          variant="primary"
          size="small"
          startIcon={<Icon name="cross" size={12} color="#fff" />}
        />
      </ModalDismissButton>
    </div>
    <Typography variant="body1">
      This is the modal content. Click the X to close.
    </Typography>
  </ModalContent>
</Modal>

// Modal with custom content and no background
<Modal>
  <ModalOpenButton>
    <Button variant="secondary" text="Custom Modal" />
  </ModalOpenButton>
  <ModalContent noBackground aria-label="Custom modal">
    <Typography variant="h3" gutter>Hello</Typography>
    <Typography variant="body1" gutter>
      This modal has no default background styling.
    </Typography>
    <ModalDismissButton>
      <Button variant="primary" text="Close" />
    </ModalDismissButton>
  </ModalContent>
</Modal>

// Controlled modal with external state
function ControlledModal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button variant="primary" text="Open" onClick={() => setIsOpen(true)} />
      <Modal isOpen={isOpen}>
        <ModalContent aria-label="Controlled modal">
          <Typography variant="h4">Controlled Modal</Typography>
          <Typography variant="body1">
            This modal's state is controlled externally.
          </Typography>
          <Button variant="primary" text="Close" onClick={() => setIsOpen(false)} />
        </ModalContent>
      </Modal>
    </>
  );
}

```

--------------------------------

### Create Notification and Status Badges

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Indicator/Indicator.mdx

Complex examples showing how to use the Indicator component for notification counts, alert warnings, and status updates.

```tsx
function NotificationExamples() {
  const [messageCount, setMessageCount] = useState(3);
  const [hasAlert, setHasAlert] = useState(true);

  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <Indicator isVisible={messageCount > 0} position="right" text={messageCount} background="linear-gradient(291.8deg, #ff4757, #ff3742)">
        <Button variant="secondary">
          <Icon name="message" size={16} />
          Messages
        </Button>
      </Indicator>
      <Indicator isVisible={hasAlert} position="right" background="linear-gradient(291.8deg, #ffa502, #ff6348)">
        <Button variant="tertiary">
          <Icon name="warning" size={16} />
          Alerts
        </Button>
      </Indicator>
    </div>
  );
}
```

--------------------------------

### Default Dropdown Usage with Options

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Dropdown/Dropdown.mdx

Demonstrates the basic implementation of the Dropdown component, including how to define options and handle selection changes. Requires '@ssa-ui-kit/core' for Dropdown and DropdownOption components.

```tsx
import { Dropdown, DropdownOption } from '@ssa-ui-kit/core';

function BasicDropdown() {
  const items = [
    { id: 1, value: 'Option One', subText: 'Description 1' },
    { id: 2, value: 'Option Two', subText: 'Description 2' },
    { id: 3, value: 'Option Three', subText: 'Description 3' },
  ];

  const handleChange = (selectedItem) => {
    console.log('Selected:', selectedItem);
  };

  return (
    <Dropdown
      selectedItem={items[0]}
      onChange={handleChange}
      placeholder="Select an option">
      {items.map((item) => (
        <DropdownOption key={item.id} value={item.id}>
          {item.value}
        </DropdownOption>
      ))}
    </Dropdown>
  );
}

```

--------------------------------

### Drawer Component Examples - React

Source: https://context7.com/ssagroup/ui-kit/llms.txt

Illustrates the use of the Drawer component for slide-in panels. It showcases different positions (left, right, bottom) and configurations like headers and dismissable options using React and @ssa-ui-kit/core. Requires React hooks and UI primitives from the kit.

```tsx
import { Drawer, Button, Wrapper } from '@ssa-ui-kit/core';
import { useDrawer } from '@ssa-ui-kit/core';

// Basic drawer from left (default)
function LeftDrawer() {
  const drawer = useDrawer();

  return (
    <>
      <Button variant="primary" {...drawer.interactions.getReferenceProps()}>
        {drawer.opened ? 'Close' : 'Open'} Drawer
      </Button>
      <Drawer.Root store={drawer}>
        <Drawer.Portal>
          <Drawer.Overlay>
            <Drawer.Content css={{ padding: '12px', maxWidth: '400px' }}>
              <p>Drawer content here</p>
            </Drawer.Content>
          </Drawer.Overlay>
        </Drawer.Portal>
      </Drawer.Root>
    </>
  );
}

// Right-side drawer with header
function RightDrawerWithHeader() {
  const drawer = useDrawer({ position: 'right', dismissable: true });

  return (
    <>
      <Button variant="primary" {...drawer.interactions.getReferenceProps()}>
        Open Settings
      </Button>
      <Drawer.Root store={drawer}>
        <Drawer.Portal>
          <Drawer.Overlay>
            <Drawer.Content css={{ padding: '12px', maxWidth: '400px' }}>
              <Drawer.Header>
                <Drawer.Title>Settings</Drawer.Title>
                <Drawer.CloseButton />
              </Drawer.Header>
              <p>Settings content goes here</p>
            </Drawer.Content>
          </Drawer.Overlay>
        </Drawer.Portal>
      </Drawer.Root>
    </>
  );
}

// Bottom drawer
function BottomDrawer() {
  const drawer = useDrawer({ position: 'bottom' });

  return (
    <>
      <Button variant="primary" {...drawer.interactions.getReferenceProps()}>
        Show Panel
      </Button>
      <Drawer.Root store={drawer}>
        <Drawer.Portal>
          <Drawer.Overlay>
            <Drawer.Content css={{ padding: '12px', maxHeight: '200px' }}>
              <p>Bottom panel content</p>
            </Drawer.Content>
          </Drawer.Overlay>
        </Drawer.Portal>
      </Drawer.Root>
    </>
  );
}

```

--------------------------------

### Implement Button Component Usage

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Button/Button.mdx

Demonstrates basic implementation of the Button component with different variants and sizes. It shows how to handle click events and apply specific styling properties.

```tsx
import { Button } from '@ssa-ui-kit/core';

function Demo() {
  return (
    <>
      <Button onClick={() => console.log('Clicked!')}>Cancel</Button>
      <Button variant="primary" size="medium" onClick={() => console.log('Clicked!')}>
        Save
      </Button>
    </>
  );
}
```

--------------------------------

### Configure Responsive TreeMap Layouts

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Charts/TreeMapChart/TreeMapChart.mdx

Shows how to control the aspect ratio and container styling for TreeMapChart. Includes examples for dashboard widget cards and embedded configurations without wrappers.

```jsx
const fileSystemData = {
  name: 'Storage Usage',
  children: [
    { name: 'Documents', children: [{ name: 'PDFs', value: 2.5 }, { name: 'Spreadsheets', value: 1.8 }, { name: 'Presentations', value: 3.2 }] },
    { name: 'Media', children: [{ name: 'Photos', value: 15.6 }, { name: 'Videos', value: 45.3 }, { name: 'Audio', value: 8.9 }] },
    { name: 'Applications', value: 12.4 },
    { name: 'System Files', value: 8.7 },
  ],
};

// Square aspect ratio for dashboard widgets
<TreeMapChart
  data={fileSystemData}
  title="Disk Usage Analysis"
  features={['header']}
  widgetCardProps={{
    contentClassName: css`
      aspect-ratio: 1/1;
      max-width: 400px;
    `,
  }}
  label={(node) => `${node.id}\n${node.formattedValue}GB`}
  labelSkipSize={12}
  innerPadding={2}
/>

// No widget card for embedded use
<TreeMapChart
  data={fileSystemData}
  features={[]}
  colors={['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7']}
  labelTextColor="#333"
  parentLabelTextColor="#666"
/>
```

--------------------------------

### Handle Drawer State Change Events

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Drawer/Drawer.mdx

Demonstrates how to listen for drawer state transitions and identify the reason behind the change.

```tsx
const drawer = useDrawer({
  onOpenChange: (open, event, reason) => {
    console.log('Drawer state changed:', open);
    console.log('Reason:', reason); // 'click', 'escape-key', 'outside-press', etc.
  },
});
```

--------------------------------

### Implement Basic Tooltip with React

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Tooltip/Tooltip.mdx

Demonstrates the fundamental implementation of a Tooltip using the compound component pattern. It shows how to wrap a trigger element and content within the Tooltip provider.

```tsx
import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  Button,
} from '@ssa-ui-kit/core';

function BasicTooltip() {
  return (
    <Tooltip enableHover>
      <TooltipTrigger>
        <Button variant='primary' text="Hover me" />
      </TooltipTrigger>
      <TooltipContent>This is a helpful tooltip message</TooltipContent>
    </Tooltip>
  );
}
```

--------------------------------

### DateRangePicker Default Values

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/DateRangePicker/DateRangePicker.mdx

Illustrates how to set an initial date range for the DateRangePicker component using the `defaultValue` prop. This pre-populates the picker with a specified start and end date.

```tsx
<DateRangePicker
  name="preset-range"
  label="With Default Range"
  defaultValue={['02/10/2025', '02/15/2025']}
  onChange={handleDateRangeChange}
/>

```

--------------------------------

### Implement Vertical Progress Bars

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/Progress/Progress.mdx

Demonstrates vertical progress indicators using the ProgressVertical component. Includes examples of legends positioned on both the left and right sides of the progress bar.

```tsx
function VerticalProgressExamples() {
  return (
    <div style={{ display: 'flex', gap: '30px', height: '200px' }}>
      <ProgressVertical>
        <ProgressBar percentage={70} color="pink" />
      </ProgressVertical>
      <ProgressVertical>
        <ProgressBar percentage={85} color="purple" />
        <ProgressLegend>
          <ProgressLegendItem position="end" percentage={100}>100%</ProgressLegendItem>
          <ProgressLegendItem position="current" percentage={85}>85%</ProgressLegendItem>
          <ProgressLegendItem position="start" percentage={0}>0%</ProgressLegendItem>
        </ProgressLegend>
      </ProgressVertical>
      <ProgressVertical>
        <ProgressLegend>
          <ProgressLegendItem position="end" percentage={100}>
            <span style={{ textAlign: 'right', display: 'block', paddingRight: 6 }}>Max</span>
          </ProgressLegendItem>
          <ProgressLegendItem position="current" percentage={60}>
            <span style={{ textAlign: 'right', display: 'block', paddingRight: 6 }}>Current</span>
          </ProgressLegendItem>
          <ProgressLegendItem position="start" percentage={0}>
            <span style={{ textAlign: 'right', display: 'block', paddingRight: 6 }}>Min</span>
          </ProgressLegendItem>
        </ProgressLegend>
        <ProgressBar percentage={60} color="yellow" />
      </ProgressVertical>
    </div>
  );
}
```

--------------------------------

### Configure Specialized Number Inputs

Source: https://github.com/ssagroup/ui-kit/blob/main/packages/core/src/components/NumberField/NumberField.mdx

Examples of using the numberFormat prop to handle specific data types like currency and percentages. These configurations leverage standard Intl.NumberFormat options.

```tsx
function CurrencyInput() {
  const [amount, setAmount] = useState<number>(0);

  return (
    <NumberField
      name="currency"
      label="Price"
      placeholder="Enter price"
      description="Enter the price in USD"
      value={amount}
      onChange={setAmount}
      numberFormat={{
        style: 'currency',
        currency: 'USD',
        locales: 'en-US',
      }}
    />
  );
}

function PercentageInput() {
  const [percentage, setPercentage] = useState<number>(0);

  return (
    <NumberField
      name="percentage"
      label="Discount Percentage"
      placeholder="Enter percentage"
      description="Enter a value between 0 and 100"
      value={percentage}
      onChange={setPercentage}
      numberFormat={{
        style: 'percent',
        maximumFractionDigits: 2,
        minimumFractionDigits: 0,
      }}
    />
  );
}
```