### Vite Project Setup with Tiller Starter

Source: https://github.com/croz-ltd/tiller/blob/master/README.md

This snippet demonstrates how to set up a new project using the Tiller starter for Vite. It involves installing Node.js and Yarn, cloning the starter template, installing dependencies, and running the development server.

```bash
npx degit croz-ltd/tiller-starter-vite
cd %PROJECT_NAME%
yarn install
yarn run dev
```

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

### React Application Setup with Tiller Providers

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/base-documentation/Installation.stories.mdx

This JavaScript snippet shows the recommended way to set up your React application's root. It includes wrapping the `App` component with `ThemeProvider` and `IntlProvider` for Tiller's theming and internationalization features.

```javascript
import React from "react";
import ReactDOM from "react-dom/client";

import { ThemeProvider } from "@tiller-ds/theme";

import App from "./App";
import { defaultIconConfig, defaultComponentConfig } from "./theme/tiller.config";
import "./index.css";
import { IntlProvider } from "@tiller-ds/intl";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <ThemeProvider themeConfig={defaultComponentConfig} iconConfig={defaultIconConfig}>
      <IntlProvider lang="en">
        <App />
      </IntlProvider>
    </ThemeProvider>
  </React.StrictMode>,
);

```

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

### Install Dependencies

Source: https://github.com/croz-ltd/tiller/blob/master/CONTRIBUTING.md

Installs all required project dependencies using Yarn.

```bash
yarn install
```

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

### NotificationProvider Usage Example

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/alert/NotificationProvider.mdx

Demonstrates how to use the NotificationProvider to display notifications. It shows how to get the notification context and push different types of notifications with various configurations.

```tsx
const notifications = useNotificationContext()

notifications.push({
  title: "Example Notification",
  content: "Example notification description."
  icon: <Icon type="check-circle" size={6} className="text-success" />,
  onDismiss: () => {}, // custom dismiss function
});
```

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

### Login Component Setup

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/patterns/Login.mdx

This code snippet demonstrates the necessary setup for the Login component, requiring IntlProvider and ThemeProvider. It shows how to wrap the App component with these providers and pass the patternsDictionary.

```tsx
<IntlProvider lang={"en"} loadDictionary={undefined} dictionary={patternsDictionary}>
  <ThemeProvider themeConfig={defaultComponentConfig} iconConfig={defaultIconConfig}>
    <App />
  </ThemeProvider>
</IntlProvider>
```

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

### Example Items Array

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/selectors/PageResizer.mdx

Provides an example array of 'Item' objects, demonstrating the data structure expected for use with the PageResizer component.

```typescript
export type Item = {
  username: string;
  name: string;
  surname: string;
};

export const items: Item[] = [
  {
    username: "emoore",
    name: "Emily",
    surname: "Moore",
  },
  {
    username: "mwilliams",
    name: "Michael",
    surname: "Williams",
  },
  {
    username: "sbrown",
    name: "Sarah",
    surname: "Brown",
  },
  {
    username: "mdavis",
    name: "Matthew",
    surname: "Davis",
  },
  {
    username: "lmiller",
    name: "Laura",
    surname: "Miller",
  },
  {
    username: "dgarcia",
    name: "David",
    surname: "Garcia",
  },
  {
    username: "jrodriguez",
    name: "James",
    surname: "Rodriguez",
  },
  {
    username: "jmartinez",
    name: "Jessica",
    surname: "Martinez",
  },
  {
    username: "jthomas",
    name: "John",
    surname: "Thomas",
  },
  {
    username: "eharris",
    name: "Elizabeth",
    surname: "Harris",
  },
  {
    username: "dparker",
    name: "Daniel",
    surname: "Parker",
  },
];
```

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

### Create React App with Tiller Template

Source: https://github.com/croz-ltd/tiller/blob/master/README.md

This snippet shows how to create a new React application using the Tiller CRA template. It requires Node.js and Yarn to be installed. After creation, the project can be started with `yarn start`.

```bash
yarn create react-app app-name --template @tiller-ds/cra-template
yarn start
```

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

### NotificationProvider Content Examples

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/alert/NotificationProvider.mdx

Provides various examples of how to configure and display notifications using the NotificationProvider. This includes simple notifications, those with subtitles, icons, actions, and buttons.

```tsx
function Content() {
  const notifications = useNotificationContext();

  const simple: NotificationProps = {
    title: "Simple",
  };

  const withSubtitle: NotificationProps = {
    title: "Simple",
    content: "Subtitle",
  };

  const withIcon: NotificationProps = {
    title: "Simple",
    content: "Subtitle",
    icon: <Icon type="check-circle" size={6} variant="fill" className="text-emerald-500" />,
  };

  const withActionsBelow: NotificationProps = {
    title: "With Actions Below",
    content: "Anyone with a link can now view this file.",
    icon: <Icon type="check-circle" size={6} variant="fill" className="text-emerald-500" />,
    actions: [<Link key={0}>Undo</Link>, <Link key={1}>Dismiss</Link>],
    onDismiss: () => {},
  };

  const withButtonsBelow: NotificationProps = {
    title: "With Buttons Below",
    content: "Anyone with a link can now view this file.",
    icon: <Icon type="check-circle" size={6} variant="fill" className="text-emerald-500" />,
    actions: [
      <Button key={1} variant="filled">
        Accept
      </Button>,
      <Button key={0} variant="text">
        Dismiss
      </Button>,
    ],
    onDismiss: () => {},
  };

  const withActionsRight: NotificationProps = {
    title: "With Actions Right",
    content: "Anyone with a link can now view this file.",
    icon: <Icon type="check-circle" size={6} variant="fill" className="text-emerald-500" />,
    closeButton: false,
    actions: [<Link key={0}>Reply</Link>],
    onDismiss: () => {},
  };

  return (
    <div className="flex flex-col w-1/4 space-y-2">
      <Button onClick={() => notifications.push(simple)}>Simple</Button>
      <Button onClick={() => notifications.push(withSubtitle)}>With Subtitle</Button>
      <Button onClick={() => notifications.push(withIcon)}>With Icon</Button>
      <Button onClick={() => notifications.push(withActionsBelow)}>With Actions Below</Button>
      <Button onClick={() => notifications.push(withButtonsBelow)}>With Buttons Below</Button>
      <Button onClick={() => notifications.push(withActionsRight)}>With Actions Right</Button>
    </div>
  );
}
```

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

### Example Pagination Data

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/core/Pagination.mdx

Provides an example array of `Item` objects, demonstrating the structure and data format used with the Pagination component.

```typescript
export const items: Item[] = [
  {
    username: "emoore",
    name: "Emily",
    surname: "Moore",
  },
  {
    username: "mwilliams",
    name: "Michael",
    surname: "Williams",
  },
  {
    username: "sbrown",
    name: "Sarah",
    surname: "Brown",
  },
  {
    username: "mdavis",
    name: "Matthew",
    surname: "Davis",
  },
  {
    username: "lmiller",
    name: "Laura",
    surname: "Miller",
  },
  {
    username: "dgarcia",
    name: "David",
    surname: "Garcia",
  },
  {
    username: "jrodriguez",
    name: "James",
    surname: "Rodriguez",
  },
  {
    username: "jmartinez",
    name: "Jessica",
    surname: "Martinez",
  },
  {
    username: "jthomas",
    name: "John",
    surname: "Thomas",
  },
  {
    username: "eharris",
    name: "Elizabeth",
    surname: "Harris",
  },
  {
    username: "dparker",
    name: "Daniel",
    surname: "Parker",
  },
];
```

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

### Autocomplete with Placeholder

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/selectors/Autocomplete.mdx

Illustrates the Autocomplete component with a placeholder text, guiding the user on what to input.

```html
<Canvas>
  <Story id="component-library-selectors-autocomplete--with-placeholder" />
</Canvas>
```

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

### Basic Modal Example

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/alert/Modal.mdx

Demonstrates the basic implementation of the Modal component. This is the default way to render a modal dialog that interrupts users for an action.

```jsx
import { ArgsTable, Story, Canvas } from "@storybook/addon-docs";
import { Modal } from "@tiller-ds/alert";

// ... other imports

<Canvas>
  <Story id="component-library-alert-modal--simple" />
</Canvas>
```

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

### Flattened Dictionary Example

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/intl/Intl.mdx

Illustrates the expected format for custom dictionaries provided to the IntlProvider. The example shows a flattened key-value pair, where keys are dot-separated strings representing the path to the label.

```JSON
{
      "login.labels.header": "Login Here",
}
```

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

### Storybook: Improve Theming and Customization Docs

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/base-documentation/ReleaseNotes.stories.mdx

Enhances the 'Theming and Customization' documentation page in Storybook to match the layout of the 'Introduction' page. Includes a step-by-step guide for applying and modifying tokens in Figma.

```javascript
/*
 * improved the `Theming and Customization` documentation page to resemble the `Introduction` page layout ([#92](https://github.com/croz-ltd/tiller/issues/92))
 * included a step-by-step guide on how to apply and modify tokens in Figma
 */
```

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

### Import Tiller Styles

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/base-documentation/Installation.stories.mdx

This CSS snippet demonstrates how to import Tiller's global styles into your main CSS file. This is a crucial step for Tiller components to function correctly.

```css
@import "@tiller-ds/theme/styles/tiller.css";
```

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

### Tiller Configuration File

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/base-documentation/Installation.stories.mdx

This TypeScript snippet defines the structure for `tiller.config.ts`, including default component and icon configurations. It allows for customization of Tiller's behavior and appearance.

```typescript
import { iconConfig } from "@tiller-ds/icons";
import { ThemeConfigFactory, IconConfig } from "@tiller-ds/theme";

export const defaultComponentConfig: ThemeConfigFactory = {
  component: {
    // component overrides are defined here
  },
};

export const defaultIconConfig: IconConfig = {
  ...iconConfig,
};
```

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

### Configure Tailwind CSS for Tiller

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/base-documentation/Installation.stories.mdx

This snippet shows the minimal configuration required for `tailwind.config.js` to integrate Tiller's theme preset. It ensures Tiller's styles are correctly applied.

```tsx
module.exports = {
  presets: [require("@tiller-ds/theme").preset],
};
```

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

### Using Tiller Button Component

Source: https://github.com/croz-ltd/tiller/blob/master/README.md

This snippet demonstrates how to import and use the `Button` component from the `@tiller-ds/core` package in a React application. It shows a basic example of rendering a button with the text 'Hello world!'.

```javascript
import { Button } from "@tiller-ds/core";

<Button>Hello world!</Button>
```

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

### Basic IntlProvider Usage

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/intl/Intl.mdx

Demonstrates the fundamental way to render the application within the IntlProvider, setting the language to 'en' and applying a theme configuration. This setup is essential for internationalization and theming.

```TypeScript
root.render(
  <React.StrictMode>
    <IntlProvider lang={"en"} loadDictionary={undefined}>
      <ThemeProvider themeConfig={tillerConfig}>
        <App />
      </ThemeProvider>
    </IntlProvider>
  </React.StrictMode>,
);
```

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

### AutocompleteField: With Label

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/formik-elements/AutocompleteField.mdx

Demonstrates the AutocompleteField component configured with a label. This is a basic setup for the component.

```html
<Canvas>
  <Story id="component-library-formik-elements-autocompletefield--with-label" />
</Canvas>
```

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

### Basic DragZone Usage with useFileUpload

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/upload/DragZone.mdx

Demonstrates the fundamental usage of the DragZone component. It requires the useFileUpload hook to manage the file list. The example shows how to initialize the hook and pass it to the DragZone component for handling file uploads.

```tsx
import React, { useEffect } from "react";
import { useFileUpload } from "@tiller-ds/upload";
import { DragZone } from "@tiller-ds/upload";

function MyUploadComponent() {
  const fileUploadHookValue = useFileUpload();
  const [uploadedFileIds, setUploadedFileIds] = React.useState<string[]>([]);

  React.useEffect(() => {
    fileUploadHookValue.onUpdateCallback((added, removed) => {
      setUploadedFileIds((oldFileIds) => {
        let newFileIds = [...oldFileIds];
        if (added !== undefined) {
          newFileIds.push(added);
        }
        if (removed !== undefined) {
          newFileIds = newFileIds.filter((id) => id !== removed);
        }
        // update internal file id list with correct updated list
        fileUploadHookValue.onUploadedFileIds(newFileIds);
        return newFileIds;
      });
    });
  }, []);

  return <DragZone title="Upload files" url="/api/upload-file" hook={fileUploadHookValue} />;
}
```

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

### Date Input Props Documentation

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/date/DateInput.mdx

References the documentation section detailing all available props for the DateInput component, including 'value' type examples.

```jsx
import { ArgsTable } from "@storybook/addon-docs";
import { DateInput } from "@tiller-ds/date";

// ...
<ArgsTable of={DateInput} />
// ...
```

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

### FormLayout Component Usage Example

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/form-elements/FormLayout.mdx

Demonstrates the basic structure for using the FormLayout component, including defining sections and content within those sections. It highlights the need for external form handling libraries.

```jsx
import { FormLayout } from "@tiller-ds/form-elements";

// ... inside your form component
<FormLayout>
  <FormLayout.Section>
    <FormLayout.Section.Content>
      {/* Form fields go here */}
    </FormLayout.Section.Content>
    <FormLayout.Section.Actions>
      {/* Action buttons go here */}
    </FormLayout.Section.Actions>
  </FormLayout.Section>
</FormLayout>
```

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

### Storybook Improvements

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/base-documentation/ReleaseNotes.stories.mdx

Enhancements to the Storybook environment, including improvements to the Introduction and Installation pages, code output, Playroom code snippets, factories, and the addition of custom viewports for better testing.

```JavaScript
/*
 * improved [Introduction](https://croz-ltd.github.io/tiller/?path=/docs/introduction--page)
 * and [Installation](https://croz-ltd.github.io/tiller/?path=/docs/installation-and-importing--page) pages
 * improved code output in Storybook
 * improved code snippets for [Playroom](https://croz-ltd.github.io/tiller/playroom/)
 * improved factories
 * added factories for `StackedLayout` and `SidebarLayout`
 * added custom viewports for better testing
 */

```

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

### IconButton Usage Example

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/core/IconButton.mdx

Demonstrates the basic usage of the IconButton component, including importing necessary modules and rendering the component. It highlights the use of the 'to' prop for routing and 'onClick' for custom events.

```jsx
import { ArgsTable, Stories } from "@storybook/addon-docs";

import { IconButton } from "@tiller-ds/core";
import { ThemeTokens } from "../utils";

// Example usage (assuming this is within a Storybook story file):
<IconButton to="/some-route" onClick={() => console.log('Button clicked!')} showTooltip={false} />
```

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

### Page Heading Usage Examples

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/core/PageHeading.mdx

Demonstrates various ways to use the PageHeading component, including adding subtitles, actions, and breadcrumbs. It highlights customization through subcomponents like PageHeading.Title, PageHeading.Subtitle, PageHeading.Actions, PageHeading.Breadcrumbs, and PageHeading.Meta.

```jsx
import { PageHeading } from "@tiller-ds/core";

// Example with subtitle and actions
<PageHeading>
  <PageHeading.Title>Main Title</PageHeading.Title>
  <PageHeading.Subtitle>This is a subtitle</PageHeading.Subtitle>
  <PageHeading.Actions>
    {/* Add Button components here */}
  </PageHeading.Actions>
</PageHeading>

// Example with breadcrumbs
<PageHeading>
  <PageHeading.Breadcrumbs>
    <PageHeading.Breadcrumb>Home</PageHeading.Breadcrumb>
    <PageHeading.Breadcrumb>Section</PageHeading.Breadcrumb>
  </PageHeading.Breadcrumbs>
  <PageHeading.Title>Page Title with Breadcrumbs</PageHeading.Title>
</PageHeading>

// Example with meta text
<PageHeading>
  <PageHeading.Title>Title</PageHeading.Title>
  <PageHeading.Meta>Meta information here</PageHeading.Meta>
</PageHeading>
```

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

### Modal with State Render Prop

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/alert/Modal.mdx

Provides an example of using a render prop pattern with the Modal component for state management. This allows for more flexible control over how the modal's state is rendered or accessed.

```jsx
import { Canvas } from "@storybook/addon-docs";

// ... other imports

<Canvas>
  <Story id="component-library-alert-modal--with-state-render-prop" />
</Canvas>
```

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

### Storybook Meta Configuration for Release Notes

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/base-documentation/ReleaseNotes.stories.mdx

Configures Storybook's documentation view for release notes, hiding specific tabs like canvas and playroom, and setting the view mode to 'docs'. This setup ensures that the release notes are presented purely as documentation.

```javascript
import { Meta } from "@storybook/addon-docs";

<Meta
  title="Release Notes"
  parameters={{
    previewTabs: {
      canvas: { hidden: true },
      "storybook/playroom/panel": {
        hidden: true,
      },
    },
    playroom: {
      disable: true,
    },
    viewMode: "docs",
  }}
/>
```

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

### LagRadar Component Setup

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/dev/LagRadar.stories.mdx

Configuration for the LagRadar component within Storybook. It hides specific preview tabs and playroom panels, disabling playroom integration and setting the view mode to 'docs'.

```javascript
import { Meta } from "@storybook/addon-docs";

import lagRadar from './lagRadar.png';

<Meta
    title="Component Library/Dev/LagRadar"
    parameters={{
        previewTabs: {
            canvas: { hidden: true },
            "storybook/playroom/panel": {
                hidden: true,
            },
        },
        playroom: {
            disable: true,
        },
        viewMode: "docs",
    }}
/>
```

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

### Applying Tiller Preset and Customizing Colors

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/base-documentation/ThemingAndCustomization.stories.mdx

An example of a `tailwind.config.js` file that utilizes the Tiller preset and customizes various color tokens, including brand and status colors, with specific shades.

```javascript
const { preset, color } = require("@tiller-ds/theme");

module.exports = {
  presets: [preset],
  theme: {
    extend: {
      colors: {
        // brand
        primary: color("blue", { dark: "900", light: "300", default: "500" }),
        secondary: color("yellow"),
        tertiary: color("teal"),
        // status
        success: color("green", { dark: "900" }),
        danger: color("red", { dark: "900" }),
        warning: color("orange", { dark: "900" }),
        info: color("blue", { dark: "900" }),
      },
    },
  },
};
```

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

### Simplified DragZone Usage with useFileUpload

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/upload/DragZone.mdx

Presents a more concise way to use the DragZone component with the useFileUpload hook. This example assumes default handling for file list updates, simplifying the component's integration when manual state management is not required.

```tsx
import React from "react";
import { useFileUpload } from "@tiller-ds/upload";
import { DragZone } from "@tiller-ds/upload";

function MyShorterUploadComponent() {
  const fileUploadHookValue = useFileUpload([], true);

  return <DragZone title="Upload files" url="/api/upload-file" hook={fileUploadHookValue} />;
}

// To access the list of uploaded files:
// const uploadedFiles = fileUploadHookValue.uploadedFiles;
```

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

### Typography With Icon Variant Example

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/core/Typography.mdx

Illustrates the Typography component used with an icon. It showcases how to place an icon to the leading or trailing position of the text using the 'iconPlacement' prop. Different text variants are also demonstrated with icons.

```jsx
import { Typography } from "@tiller-ds/core";
import { Icon } from "@tiller-ds/icons";

// Leading icon (default)
<Typography icon={<Icon type="envelope" />}>Example</Typography>
<Typography variant="subtext" icon={<Icon type="envelope" />}>
  Example
</Typography>
<Typography variant="title" icon={<Icon type="envelope" />}>
  Example
</Typography>
<Typography variant="subtitle" icon={<Icon type="envelope" />}>
  Example
</Typography>

// Trailing icon
<Typography icon={<Icon type="envelope" />} iconPlacement="trailing">Example</Typography>
<Typography variant="subtext" icon={<Icon type="envelope" />} iconPlacement="trailing">
  Example
</Typography>
<Typography variant="title" icon={<Icon type="envelope" />} iconPlacement="trailing">
  Example
</Typography>
<Typography variant="subtitle" icon={<Icon type="envelope" />} iconPlacement="trailing">
  Example
</Typography>
```

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

### JavaScript Data Table Field Props and Validation

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/formik-elements/DataTableField.mdx

Demonstrates the setup of data for the data table, including sample names and surnames, and generates an array of 'Item' objects. It also includes an example of an inline edit validation schema using Yup for form validation.

```javascript
const names = ["Emily", "Michael", "Sarah", "Matthew"];
const surname = ["Moore", "Williams", "Brown", "Davis"];

const allData: Item[] = range(0, 3).map((value) => ({
  id: value + 1,
  name: names[value % names.length],
  surname: surname[value % surname.length],
  age: (12 + value * 13) % 50,
}));

const InlineEditValidationSchema = Yup.object().shape({
  name: Yup.string().required("Name is required"),
  surname: Yup.string().required("Surname is required"),
});
```

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

### Storybook Meta Configuration

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/base-documentation/Introduction.stories.mdx

This snippet shows the Storybook Meta configuration for the Introduction page. It hides the Canvas and Playroom panels and sets the view mode to 'docs'.

```javascript
import { Meta } from "@storybook/addon-docs";

<Meta
  title="Introduction"
  parameters={{
    previewTabs: {
      canvas: { hidden: true },
      "storybook/playroom/panel": {
        hidden: true,
      },
    },
    playroom: {
      disable: true,
    },
    viewMode: "docs",
  }}
/>
```

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

### SelectField Complex Props Example

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/formik-elements/SelectField.mdx

Provides an example of complex props for the SelectField, including custom rendering for options and a sorting function. It uses the 'Item' type for options.

```jsx
const complexProps = {
  name,
  options: items,
  getOptionLabel: (item: Item) => (
    <div className="flex items-center justify-between flex-wrap">
      <div>
        {item.name} {item.surname}
      </div>
      <div className="flex-shrink-0 text-sm leading-5 text-gray-500">@{item.username}</div>
    </div>
  ),
  sort: (items: Item[]) => items.sort((a, b) => a.name.localeCompare(b.name)),
};
```

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

### Slice Data for Small DataTable Example

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/data-display/DataTable.mdx

This TypeScript code demonstrates how to create a smaller dataset by slicing a larger one. It's used to generate the `smallData` object, which is then utilized in the Storybook examples for the DataTable component.

```typescript
const smallData = slice(allData, 0, 5);
```

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

### Pull Request Title Format

Source: https://github.com/croz-ltd/tiller/blob/master/CONTRIBUTING.md

Details the required format for pull request titles, starting with the issue number.

```git
#{issue number}
```

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

### Commit Message Format

Source: https://github.com/croz-ltd/tiller/blob/master/CONTRIBUTING.md

Specifies the format for commit messages, starting with the issue number and followed by an imperative description.

```git
#{issue number} {imperative description}
Example: #9 Fix Autocomplete error message
```

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

### SelectField Common Props Example

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/formik-elements/SelectField.mdx

Defines common props for the SelectField by extending complex props and adding a 'getOptionValue' function to specify how to extract the value from an item.

```jsx
const commonProps = {
  ...complexProps,
  getOptionValue: (item: Item) => item.username,
};
```

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

### Input Component Documentation

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/form-elements/Input.mdx

This snippet shows the Storybook configuration for the Input component, including meta information, arguments table, and stories. It imports necessary components from '@storybook/addon-docs' and '@tiller-ds/form-elements'.

```jsx
import { Meta, ArgsTable, Stories } from "@storybook/addon-docs";

import { Input } from "@tiller-ds/form-elements";
import { ThemeTokens } from "../utils";

<Meta title="Docs|Input" component={Input} />

# Input

Input fields let users enter and edit text.

The `Input` wrapper component is a complete form control including a label, input, and optional information such as: placeholder, help text, leading icon, trailing icon, addon and number.

Standard form attributes are supported e.g. `required, disabled`, etc. as well as a `help` prop which is used to give context about a field's input, such as how the input will be used.

(for integration with Formik see docs [here](/docs/component-library-formik-elements-inputfield--with-label))

<Stories includePrimary={true} />

## Input Props:

<ArgsTable of={Input} />

## Input Tokens:

<ThemeTokens component="Input" />
```

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

### Storybook Integration for Description List

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/data-display/DescriptionList.mdx

Shows how to import and use the DescriptionList component within a Storybook environment. It includes imports from '@storybook/addon-docs' and '@tiller-ds/data-display', setting up a Storybook canvas for interactive component visualization.

```javascript
import { ArgsTable, Story, Stories, Canvas } from "@storybook/addon-docs";

import { DescriptionList } from "@tiller-ds/data-display";
import { ThemeTokens } from "../utils";

// ... Storybook configuration and usage examples ...
```

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

### Tooltip Component Usage

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/core/Tooltip.mdx

Demonstrates the basic usage of the Tooltip component. It wraps a paragraph element ('Try me out') and displays a tooltip with the text 'This is a tooltip text' when the paragraph is hovered over. The `label` prop defines the tooltip content.

```jsx
import { Tooltip } from "@tiller-ds/core";

<Tooltip label="This is a tooltip text">
  <p>Try me out</p>
</Tooltip>
```

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

### Define Select Component Props

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/selectors/Select.mdx

Provides example props for the Select component, including complex options rendering and sorting logic. It demonstrates how to handle item display and value retrieval.

```javascript
const complexProps = {
  name,
  onBlur,
  onChange,
  options: items,
  getOptionLabel: (item: Item) => (
    <div className="flex items-center justify-between flex-wrap">
      <div>
        {item.name} {item.surname}
      </div>
      <div className="flex-shrink-0 text-sm leading-5 text-gray-500">@{item.username}</div>
    </div>
  ),
  sort: (items: Item[]) => items.sort((a, b) => a.name.localeCompare(b.name)),
};

const commonProps = {
  ...complexProps,
  getOptionValue: (item: Item) => item.username,
};
```

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

### Link Component Usage and Configuration

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/core/Link.mdx

Demonstrates the basic usage of the Link component from '@tiller-ds/core' and shows the default configuration for link colors within Tiller's theme tokens. The component requires being wrapped in a router to utilize the 'to' prop for navigation.

```typescript
import { Link } from "@tiller-ds/core";
import { ThemeTokens } from "../utils";

// Example usage (assuming router context):
// <Link to="/destination">Click Me</Link>

// Default link color configuration:
const linkColor = {
  main: "blue-800",
  hover: "blue-600",
};

// To use ThemeTokens for Link component:
// <ThemeTokens component="Link"/>
```

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

### Button with Trailing Icon

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/core/Button.mdx

Demonstrates how to add a trailing icon to the Button component. The icon color adapts to the text color. This example shows the 'outlined' variant.

```jsx
function ButtonWithTrailingIcon() {
  return (
    <Button children="Trailing" variant="outlined" trailingIcon={<Icon type="pencil" />} />
  );
}
```

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

### Button with Leading Icon

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/core/Button.mdx

Demonstrates how to add a leading icon to the Button component. The icon color adapts to the text color. This example shows the 'filled' variant.

```jsx
function ButtonWithLeadingIcon() {
  return (
    <Button children="Leading" variant="filled" leadingIcon={<Icon type="pencil" />} />
  );
}
```

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

### AutocompleteField: With Placeholder

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/formik-elements/AutocompleteField.mdx

Demonstrates the AutocompleteField component using a placeholder text. Placeholders provide a hint to the user about the expected input.

```html
<Canvas>
  <Story id="component-library-formik-elements-autocompletefield--with-placeholder" />
</Canvas>
```

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

### Import InputField and Storybook Components

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/formik-elements/InputField.mdx

Imports necessary components from @storybook/addon-docs and @tiller-ds/formik-elements for creating documentation and using the InputField component.

```javascript
import { Meta, ArgsTable, Story, Canvas, Stories } from "@storybook/addon-docs";

import { InputField } from "@tiller-ds/formik-elements";
import { ThemeTokens } from "../utils";
```

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

### TreeSelectField Formik Integration Example

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/formik-elements/TreeSelectField.mdx

Demonstrates how to use the TreeSelectField component with Formik for seamless form handling. It includes common props and configuration for the tree select functionality.

```javascript
import { TreeSelectField } from "@tiller-ds/formik-elements";
import { TreeSelect } from "@tiller-ds/selectors";

const treeItems = [
  {
    name: "Parent 1",
    items: [
      { name: "Child 1.1" },
      { name: "Child 1.2" },
    ],
  },
  {
    name: "Parent 2",
    items: [
      { name: "Child 2.1" },
    ],
  },
];

const commonProps = {
  name: "myTreeSelect",
  onChange: (value) => console.log(value),
  onBlur: () => console.log("blurred"),
  options: treeItems,
  // eslint-disable-next-line react/display-name
  getOptionLabel: (option) => <>{option.name}</>,
  getItems: (option) => option.items || [],
  itemToString: (option) => option.name,
};

// Example usage within a Formik form:
// <Formik initialValues={{ myTreeSelect: null }} onSubmit={values => console.log(values)}>
//   <Form>
//     <TreeSelectField {...commonProps} label="Select an item" />
//     <button type="submit">Submit</button>
//   </Form>
// </Formik>

```

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

### Storybook ArgsTable and Stories

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/date/DateTimeInput.mdx

Utilizes Storybook's ArgsTable to display component props and Stories to render the component's different states and examples.

```jsx
import { ArgsTable, Stories } from "@storybook/addon-docs";

<Stories includePrimary={true} />

<ArgsTable of={DateTimeInput} />
```

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

### AutocompleteField Backend Simple Props

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/formik-elements/AutocompleteField.mdx

Configuration for AutocompleteField with backend-fetched simple string options, including options as a query function and commonSimpleProps.

```javascript
const backendSimpleProps = {
  ...commonSimpleProps,
  options: (query: string) =>
    promiseTimeout(
      Promise.resolve(
        query.length > 0
          ? simpleItems.filter(
              (item) =>
                item.toLowerCase().indexOf(query.toLowerCase()) !== -1 ||
                item.toLowerCase().indexOf(query.toLowerCase()) !== -1 ||
                item.toLowerCase().indexOf(query.toLowerCase()) !== -1 ||
                item.toLowerCase().indexOf(query.toLowerCase()) !== -1,
            )
          : simpleItems,
      ),
      500,
    ),
};
```

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

### Autocomplete with Value

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/selectors/Autocomplete.mdx

Demonstrates the Autocomplete component when a value is pre-selected or provided. This is a basic usage scenario.

```html
<Canvas>
  <Story id="component-library-selectors-autocomplete--with-value" />
</Canvas>
```

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

### Typography Default Variant Example

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/core/Typography.mdx

Demonstrates the default usage of the Typography component, displaying text within a container. It shows various predefined variants like 'subtext', 'title', and 'subtitle'.

```jsx
import { Typography } from "@tiller-ds/core";

<Typography element="div">Example</Typography>
<Typography variant="subtext" element="div">
  Example
</Typography>
<Typography variant="title" element="div">
  Example
</Typography>
<Typography variant="subtitle" element="div">
  Example
</Typography>
```

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

### Expose withCredentials Prop for Uploady

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/base-documentation/ReleaseNotes.stories.mdx

Exposed the `withCredentials` Uploady prop for DragZone, DragZoneField, UploadButton, and UploadButtonField components.

```JavaScript
function exposeWithCredentialsProp() {
  // Logic to expose the withCredentials prop for Uploady integration
}
```

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

### Autocomplete with Multiple Selection and Values

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/selectors/Autocomplete.mdx

Demonstrates the Autocomplete component with multiple items selected, showcasing how multiple values are handled.

```html
<Canvas>
  <Story id="component-library-selectors-autocomplete--with-multiple-selection-and-values" />
</Canvas>
```

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

### Masked Input Field - Mask Definition

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/formik-elements/MaskedInputField.mdx

Defines a mask pattern for the Masked Input Field component. This example creates a mask for a US phone number format.

```TypeScript
const mask = [
  "(",
  /[1-9]/,
  /\d/,
  /\d/,
  ")",
  /\d/,
  /\d/,
  /\d/,
  "-",
  /\d/,
  /\d/,
  /\d/,
  /\d/
];
```

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

### Intl Component Import - Storybook Docs

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/intl/Intl.mdx

Imports necessary components from '@storybook/addon-docs' and the Intl component from '@tiller-ds/intl' for documentation and usage within Storybook.

```jsx
import { ArgsTable, Stories } from "@storybook/addon-docs";

import { Intl } from "@tiller-ds/intl";
```

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

### Import BrowserRouter as Router

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/menu/SidebarNavigation.mdx

This code snippet demonstrates how to import BrowserRouter from 'react-router-dom' and alias it as 'Router'. This is a common setup for routing in React applications, often used with navigation components.

```typescript
import { BrowserRouter as Router } from "react-router-dom";
```

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

### Import Textarea and Storybook Components

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/form-elements/Textarea.mdx

Imports necessary components from Storybook addons and Tiller UI's form elements. This setup is common for documenting UI components with Storybook.

```jsx
import { ArgsTable, Stories } from "@storybook/addon-docs";

import { Textarea } from "@tiller-ds/form-elements";
import { ThemeTokens } from "../utils";
```

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

### DragZone: Fine-tune Loader Behavior

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/base-documentation/ReleaseNotes.stories.mdx

Introduces `preLoadDelay` and `postLoadDelay` props to the DragZone component. These props allow for fine-tuning the loader's fade-in and fade-out delays during file uploads, improving the user experience.

```JavaScript
import { DragZone } from '@croz-ltd/tiller-ui';

// Usage:
<DragZone
  preLoadDelay={200} // ms
  postLoadDelay={300} // ms
>
  {/* Drag and drop content */}
</DragZone>
```

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

### Autocomplete with Help Text

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/selectors/Autocomplete.mdx

Displays the Autocomplete component with associated help text, providing additional guidance to the user.

```html
<Canvas>
  <Story id="component-library-selectors-autocomplete--with-help" />
</Canvas>
```

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

### Import Top Navigation Components

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/menu/TopNavigation.mdx

Imports necessary components and utilities for using the Top Navigation, including ArgsTable, Stories, TopNavigation, and ThemeTokens.

```javascript
import {ArgsTable, Stories} from "@storybook/addon-docs";

import { TopNavigation, TopNavigationNavigation } from "@tiller-ds/menu";

import { ThemeTokens } from "../utils";
```

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

### Stacked Layout Props Documentation

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/menu/StackedLayout.mdx

This snippet shows how to display the documentation for the Stacked Layout component's props using Storybook's ArgsTable. It requires the StackedLayout component as an argument.

```jsx
import { ArgsTable } from "@storybook/addon-docs";
import { StackedLayout } from "@tiller-ds/menu";

<ArgsTable of={StackedLayout} />
```

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

### App Picker Component Import and Usage

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/menu/AppPicker.mdx

Imports the AppPicker component and ThemeTokens utility from the Tiller Design System and React Storybook addons. It demonstrates how to display the App Picker component and its associated documentation, including stories and props.

```jsx
import { ArgsTable, Stories } from "@storybook/addon-docs";

import { AppPicker } from "@tiller-ds/menu";
import { ThemeTokens } from "../utils";

// ... component usage and documentation rendering ...
<Stories includePrimary={true} />

<ArgsTable of={AppPicker} />

<ThemeTokens component="AppPicker"/>
```

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

### Restructuring Token Configuration

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/base-documentation/ReleaseNotes.stories.mdx

Explains the restructuring of token configuration for several components, including Tooltip, Badge, ButtonGroups, and others. This change impacts how styles are managed and may require updates to custom themes.

```text
2. Restructured and/or changed token configuration structure for `Tooltip`, `Badge`, `ButtonGroups`, `Card`, `DataTable`,
   `Dropdown`, `IconButton`, `Placeholder`, `ProgressBar`, `SidebarNavigation`, `TopNavigation` and `Toggle`
   (see all changes [here](https://github.com/croz-ltd/tiller/pull/301/files#diff-5e2a6a03da42daa58c46bab675e2faeb686af1ab16d0c850fb00622a5bfcdd88))
```

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

### Checkbox Group Field Usage Example

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/formik-elements/CheckboxGroupField.mdx

Demonstrates how to define and use the CheckboxGroupField component within a form. It highlights passing CheckboxGroupField.Item components as children and the integration with Formik for managing form state.

```jsx
import { CheckboxGroupField, CheckboxGroupFieldItem } from "@tiller-ds/form-elements";
import { Formik, Form } from "formik";

function MyForm() {
  return (
    <Formik initialValues={{ interests: [] }} onSubmit={values => console.log(values)}>
      <Form>
        <CheckboxGroupField name="interests" label="Select your interests">
          <CheckboxGroupFieldItem value="coding" label="Coding" />
          <CheckboxGroupFieldItem value="reading" label="Reading" />
          <CheckboxGroupFieldItem value="hiking" label="Hiking" />
        </CheckboxGroupField>
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}
```

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

### Storybook Stories and ArgsTable for Container

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/core/Container.mdx

This snippet demonstrates how to integrate Storybook's Stories and ArgsTable components to display and document the Container component. It imports necessary modules from '@storybook/addon-docs' and the Container component from '@tiller-ds/core'.

```javascript
import {ArgsTable, Stories} from "@storybook/addon-docs";

import { Container } from "@tiller-ds/core";
import { ThemeTokens } from "../utils";

// ... component usage and documentation ...
```

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

### MaskedInput Example with Mask Prop

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/form-elements/MaskedInput.mdx

Demonstrates how to use the mask prop with the MaskedInput component to define an input format. The mask is an array that can include literal characters and regular expressions to control user input.

```typescript
const mask = ["(", /[1-9]/, /\d/, /\d/, ")", " ", /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/];
```

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

### IntlProvider: Reduce Component Dependencies

Source: https://github.com/croz-ltd/tiller/blob/master/storybook/src/base-documentation/ReleaseNotes.stories.mdx

Significantly reduces the number of components that require the IntlProvider for functionality. This improves performance and simplifies integration by allowing direct usage of components like Date, DateInput, NumberInput without IntlProvider, using new props like _format_, _dateFormat_, _thousandSeparator_, and _decimalSeparator_.

```javascript
/*
 * IntlProvider: drastically reduced the list of components which require `IntlProvider` for functioning ([#65](https://github.com/croz-ltd/tiller/issues/65))
 *
 * - Date: usage is possible without `IntlProvider` through newly added [_format_ prop](https://croz-ltd.github.io/tiller/?path=/docs/component-library-date-dateinput--with-state#usage-without-intlprovider)
 * - DateInput(Field), DateRangeInput(Field), DateTimeInput(Field): usage is possible without `IntlProvider` and is customizable through the
 *   [_dateFormat_ prop](https://croz-ltd.github.io/tiller/?path=/docs/component-library-date-dateinput--with-state#usage-without-intlprovider) (defaults to _'MM/dd/yyyy'_ if not defined)
 * - NumberInput(Field): usage is possible without `IntlProvider` through [_thousandSeparator_ and _decimalSeparator_ props](https://croz-ltd.github.io/tiller/?path=/docs/component-library-form-elements-numberinput--with-label#usage-without-intlprovider)
 * - see the reduced list of components requiring `IntlProvider` in the [`Intl` docs](https://croz-ltd.github.io/tiller/?path=/docs/component-library-intl-intl--basic#intl-provider)
 */
```