### Storybook Meta Configuration

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/docs/stories/00-getting-started/welcome.mdx

Configures Storybook documentation metadata, setting the title for the 'Getting Started/Welcome' section. This is a standard practice in Storybook for organizing documentation pages.

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

<Meta title="Getting Started/Welcome" />
```

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

### Create Webiny Project (Simple Usage)

Source: https://github.com/webiny/webiny-js/blob/next/packages/create-webiny-project/DEVELOPMENT.md

Demonstrates the basic command to create a new Webiny project using a local NPM tag. This is the simplest way to start a new project.

```bash
npx create-webiny-project@local-npm my-test-project --tag local-npm
```

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

### Install Webiny React Rich Text Lexical Renderer

Source: https://github.com/webiny/webiny-js/blob/next/packages/react-rich-text-lexical-renderer/DEVELOPMENT.md

Instructions for installing the `@webiny/react-rich-text-lexical-renderer` package using npm or yarn.

```bash
npm install --save @webiny/react-rich-text-lexical-renderer
```

```bash
yarn add @webiny/react-rich-text-lexical-renderer
```

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

### Tooltip Alignment Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Tooltip/Tooltip.mdx

Demonstrates different alignment options for tooltips relative to their trigger elements. This React example uses the 'start', 'center', and 'end' alignment values.

```jsx
import React from "react";
import { Tooltip } from "@webiny/admin-ui";

const AlignmentExample = () => {
    return (
        <Tooltip.Provider>
            <div className="flex justify-center items-center h-48">
                <Tooltip
                    trigger={<p>&nbsp;&nbsp;Start&nbsp;&nbsp;</p>}
                    content={<div>Aligned to start</div>}
                    align="start"
                />
                <Tooltip
                    trigger={<p>&nbsp;&nbsp;Center&nbsp;&nbsp;</p>}
                    content={<div>Aligned to center</div>}
                    align="center"
                />
                <Tooltip
                    trigger={<p>&nbsp;&nbsp;End&nbsp;&nbsp;</p>}
                    content={<div>Aligned to end</div>}
                    align="end"
                />
            </div>
        </Tooltip.Provider>
    );
};

export default AlignmentExample;
```

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

### Create Webiny Project (Advanced/CI Usage)

Source: https://github.com/webiny/webiny-js/blob/next/packages/create-webiny-project/DEVELOPMENT.md

Shows an advanced command for creating a Webiny project, suitable for CI/CD environments. It includes options for non-interactive setup, specifying NPM registry, and template configurations.

```bash
npx create-webiny-project@local-npm my-test-project \
          --tag local-npm --no-interactive \
          --assign-to-yarnrc '{"npmRegistryServer":"http://localhost:4873","unsafeHttpWhitelist":["localhost"]}' \
          --template-options '{"region":"eu-central-1","vpc":false}'
```

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

### Basic Tooltip Example in React

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Tooltip/Tooltip.mdx

Illustrates a basic implementation of the Tooltip component with default settings. This example shows how to render a simple tooltip that appears on hover.

```jsx
import React from "react";
import { Tooltip } from "@webiny/admin-ui";

const BasicTooltipExample = () => {
    return (
        <Tooltip.Provider>
            <Tooltip
                trigger={<p>Tooltip trigger</p>}
                content={
                    <>
                        <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec
                        viverra sit amet massa sagittis sollicitudin.
                    </>
                }
            />
        </Tooltip.Provider>
    );
};

export default BasicTooltipExample;
```

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

### Icon Component Color Variants Examples (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Icon/Icon.mdx

Provides examples of different color variants for the Icon component. This includes 'inherit', 'accent', 'neutral-light', 'neutral-strong', and 'neutral-strong-transparent'. Each example demonstrates how to apply a specific color to the icon. These examples require React and the '@webiny/admin-ui' package.

```tsx
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const InheritColorIconExample = () => {
    return (
        <div className="fill-success">
            <Icon
                icon={<CloseIcon />}
                label="This is an icon"
                size="md"
                color="inherit"
            />
        </div>
    );
};

    export default InheritColorIconExample;

```

```tsx
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const AccentIconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="This is an icon"
            size="md"
            color="accent"
        />
    );
};

export default AccentIconExample;

```

```tsx
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const NeutralLightIconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="This is an icon"
            size="md"
            color="neutral-light"
        />
    );
};

    export default NeutralLightIconExample;

```

```tsx
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const NeutralStrongIconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="This is an icon"
            size="md"
            color="neutral-strong"
        />
    );
};

        export default NeutralStrongIconExample;

```

```tsx
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const NeutralStrongTransparentIconExample = () => {
    return (
        <div className="bg-neutral-disabled p-3xl rounded-md">
            <Icon
                icon={<CloseIcon />}
                label="This is an icon"
                size="md"
                color="neutral-strong-transparent"
            />
        </div>
    );
};

export default NeutralStrongTransparentIconExample;

```

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

### HeaderBar with Start and End Content (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/HeaderBar/HeaderBar.mdx

This example shows how to configure the HeaderBar with both start and end content. The start content typically displays navigation or context, while the end content handles user actions or information. This is a common pattern for application headers.

```javascript
import React from "react";
import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";

const StartEndContentOnlyExample = () => {
    const StartContent = () => (
        <Text size={"sm"} className={"text-neutral-dimmed"}>
            {"Headless CMS / Articles / The best article ever"}
        </Text>
    );

    const EndContent = () => (
        <div className={"flex gap-x-sm"}>
            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
            <div
                className={
                    "flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light"
                }
            >
                <Avatar
                    size={"sm"}
                    variant={"strong"}
                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
                />
                <IconButton
                    variant={"ghost"}
                    size={"xs"}
                    color={"neutral-strong"}
                    icon={<KeyboardArrowRightIcon />}
                    onClick={() => console.log("clicked")}
                />
            </div>
        </div>
    );

    return <HeaderBar start={<StartContent />} end={<EndContent />} />;
};

export default StartEndContentOnlyExample;
```

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

### HeaderBar Component: Start Content Only Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/HeaderBar/HeaderBar.mdx

Illustrates how to use the HeaderBar component with only the 'start' prop populated. This example shows a simple text element in the start section, suitable for breadcrumbs or titles.

```tsx
import React from "react";
import { HeaderBar, Text } from "@webiny/admin-ui";

const StartContentOnlyExample = () => {
    const StartContent = () => (
        <Text size={"sm"} className={"text-neutral-dimmed"}>
            {"Headless CMS / Articles / The best article ever"}
        </Text>
    );

    return <HeaderBar start={<StartContent />} />;
};

export default StartContentOnlyExample;
```

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

### React Grid Layout Example with Webiny UI

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Grid/Grid.mdx

Demonstrates how to use the Grid component from '@webiny/admin-ui' to create a responsive layout. It showcases column spanning and spacing configurations. This example requires React and the Webiny admin UI library.

```jsx
import React from "react";
import { Grid } from "@webiny/admin-ui";

const GridExample = () => {
    return (
        <Grid gap={"comfortable"} className={"bg-neutral-light p-4"}>
            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                Col 1
            </Grid.Column>
            <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                Col 2<br/>Span: 3
            </Grid.Column>
            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                Col 3
            </Grid.Column>
            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                Col 4
            </Grid.Column>
            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                Col 5
            </Grid.Column>
            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                Col 6
            </Grid.Column>
            <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                Col 7<br/>Span: 2
            </Grid.Column>
            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                Col 8
            </Grid.Column>
            <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                Col 9
            </Grid.Column>
        </Grid>
    );
};

export default GridExample;

```

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

### List with Actions Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/List/List.mdx

Demonstrates how to add action buttons (like edit, delete, open) to list items. This example utilizes various components from `@webiny/admin-ui` and `@webiny/icons` for icons.

```javascript
import React from "react";
import { List } from "@webiny/admin-ui";
import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
import { ReactComponent as OpenIcon } from "@webiny/icons/visibility.svg";
import { ReactComponent as MoreIcon } from "@webiny/icons/more_vert.svg";
import { ReactComponent as ChartIcon } from "@webiny/icons/insert_chart.svg";

const WithActionsExample = () => {
    return (
        <List>
            <List.Item
                title="List Item 1"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                icon={<List.Item.Icon icon={<ChartIcon />} label={"Chart"} />}
                actions={
                    <>
                        <List.Item.Action icon={<EditIcon />} />
                        <List.Item.Action icon={<TrashIcon />} />
                        <List.Item.Action.Separator />
                        <List.Item.Action icon={<OpenIcon />} />
                        <List.Item.Action icon={<MoreIcon />} />
                    </>
                }
            />
            <List.Item
                title="List Item 2"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                icon={<List.Item.Icon icon={<ChartIcon />} label={"Chart"} />}
                actions={
                    <>
                        <List.Item.Action icon={<EditIcon />} />
                        <List.Item.Action icon={<TrashIcon />} />
                        <List.Item.Action.Separator />
                        <List.Item.Action icon={<OpenIcon />} />
                        <List.Item.Action icon={<MoreIcon />} />
                    </>
                }
            />
        </List>
    );
};

export default WithActionsExample;
```

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

### Sidebar Component Usage Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Sidebar/Sidebar.mdx

Demonstrates how to implement the Sidebar component for application navigation. It requires React and the '@webiny/admin-ui' package. The example showcases nested menu items, links, and icons.

```jsx
import React from "react";
import { Sidebar, SidebarProvider } from "@webiny/admin-ui";
import { ReactComponent as CmsIcon } from "@webiny/icons/web.svg";
import { ReactComponent as PageBuilderIcon } from "@webiny/icons/table_chart.svg";

const SidebarExample = () => {
    return (
        <SidebarProvider>
            <Sidebar
                title={"Webiny"}
                icon={
                    <Sidebar.Icon
                        element={<img src="/logo.png" alt="Webiny" />}
                        label={"Webiny"}
                    />
                }
            >
                <Sidebar.Link
                    text={"Headless CMS"}
                    to={"/cms"}
                    icon={<Sidebar.Item.Icon label="Headless CMS" element={<CmsIcon />} />}
                />
                <Sidebar.Item
                    text={"Page Builder"}
                    icon={<Sidebar.Item.Icon label="Page Builder" element={<PageBuilderIcon />} />}
                >
                    <Sidebar.Group text={"Pages"} />
                    <Sidebar.Link
                        to={"/page-builder/pages"}
                        text={"Pages"}
                    />
                    <Sidebar.Link
                        to={"/page-builder/templates"}
                        text={"Templates"}
                    />
                </Sidebar.Item>
            </Sidebar>
        </SidebarProvider>
    );
};

export default SidebarExample;
```

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

### Start Verdaccio Local Registry

Source: https://github.com/webiny/webiny-js/blob/next/packages/create-webiny-project/DEVELOPMENT.md

Initiates a local Verdaccio instance, which acts as a private NPM registry. This is a prerequisite for testing local package builds without publishing to the public NPM.

```bash
yarn verdaccio:start
```

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

### Icon Component Default Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Icon/Icon.mdx

Illustrates the default rendering of the Icon component. This example showcases a standard implementation without specific color or size overrides, relying on default props for presentation. It requires React and the '@webiny/admin-ui' package.

```tsx
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const DefaultIconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="This is an icon"
            size="md"
            color="accent"
        />
    );
};

export default DefaultIconExample;

```

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

### Icon Component Usage Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Icon/Icon.mdx

Demonstrates the basic usage of the Icon component from '@webiny/admin-ui'. It shows how to import the component, provide an SVG icon, accessibility label, size, and color. This example requires React and the '@webiny/admin-ui' package.

```tsx
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const IconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="Close icon"
            size="md"
            color="accent"
        />
    );
};

export default IconExample;

```

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

### Card Component Usage Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Card/Card.mdx

Demonstrates how to use the Card component from '@webiny/admin-ui'. It showcases the inclusion of title, description, actions, options, and custom content within the card. This example requires React and the '@webiny/admin-ui' package.

```tsx
import React from "react";
import { Card, Button, IconButton, Icon } from "@webiny/admin-ui";
import { ReactComponent as MoreVertical } from "@webiny/icons/more_vert.svg";

const CardExample = () => {
  return (
    <Card
      title="Card title"
      description="Card description"
      padding="standard"
      elevation="sm"
      borderRadius="md"
      actions={
        <>
          <Button variant="secondary" text="Cancel" />
          <Button variant="primary" text="Confirm" />
        </>
      }
      options={
        <IconButton
          variant={"ghost"}
          icon={<Icon icon={<MoreVertical />} label={"More options"} />}
          size={"sm"}
          iconSize={"lg"}
          onClick={() => alert("Custom action button clicked.")}
        />
      }
    >
      This is card content. Anything can go in here.
    </Card>
  );
};

export default CardExample;
```

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

### DI Container Setup and Plugin Registration

Source: https://github.com/webiny/webiny-js/blob/next/packages/api-core/src/models/cms/fieldsBuilder.md

Demonstrates how to set up the DI container and register core field types, the `FieldBuilderRegistryImplementation`, and custom plugins like the 'Color Field'. This setup is crucial for making field types available for use.

```typescript
import { Container } from "@webiny/di-container";
import { FieldBuilderRegistryImplementation } from "~/cms/FieldBuilderRegistry.js";
import { TextFieldType } from "~/cms/fields/TextFieldType.js";
import { registerColorField } from "~/plugins/color-field/index.js";

const container = new Container();

// ✅ Register core field types
container.register(TextFieldType);
// container.register(NumberFieldType);
// container.register(DateFieldType);
// ... etc

// ✅ Register registry (will automatically get all FieldType implementations)
container.register(FieldBuilderRegistryImplementation);

// ✅ Register plugin field types
registerColorField(container);
```

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

### List with Handle Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/List/List.mdx

Illustrates how to add a draggable handle to list items, enabling reordering functionality. This example uses the `List`, `List.Item`, and `List.Item.Handle` components from `@webiny/admin-ui`.

```javascript
import React from "react";
import { List } from "@webiny/admin-ui";

const WithHandleExample = () => {
    return (
        <List>
            <List.Item
                title="List Item 1"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                handle={<List.Item.Handle />}
            />
            <List.Item
                title="List Item 2"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                handle={<List.Item.Handle />}
            />
        </List>
    );
};

export default WithHandleExample;
```

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

### Tag Component Variants Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Tag/Tag.mdx

Presents various color variants available for the Tag component, useful for categorizing or indicating different states. This example requires React and '@webiny/admin-ui'.

```jsx
import React from "react";
import { Tag } from "@webiny/admin-ui";

const TagVariantsExample = () => {
    return (
        <div className={"flex gap-sm"}>
            <Tag content={"Neutral base"} variant={"neutral-base"} onDismiss={() => {}} />
            <Tag content={"Neutral base outline"} variant={"neutral-base-outline"} onDismiss={() => {}} />
            <Tag content={"Neutral light"} variant={"neutral-light"} onDismiss={() => {}} />
            <Tag content={"Neutral muted"} variant={"neutral-muted"} onDismiss={() => {}} />
            <Tag content={"Neutral strong"} variant={"neutral-strong"} onDismiss={() => {}} />
            <Tag content={"Neutral xstrong"} variant={"neutral-xstrong"} onDismiss={() => {}} />
            <Tag content={"Neutral dark"} variant={"neutral-dark"} onDismiss={() => {}} />
            <Tag content={"Success"} variant={"success"} onDismiss={() => {}} />
            <Tag content={"Success light"} variant={"success-light"} onDismiss={() => {}} />
            <Tag content={"Warning"} variant={"warning"} onDismiss={() => {}} />
            <Tag content={"Destructive"} variant={"destructive"} onDismiss={() => {}} />
            <Tag content={"Accent"} variant={"accent"} onDismiss={() => {}} />
            <Tag content={"Accent light"} variant={"accent-light"} onDismiss={() => {}} />
        </div>
    );
};

export default TagVariantsExample;
```

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

### Render a Default List (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/List/List.mdx

A basic example of the Webiny JS List component, showing how to render a simple list of items without any additional styling or icons. This serves as a foundational example for using the List component.

```jsx
import React from "react";
import { List } from "@webiny/admin-ui";

const DefaultListExample = () => {
    return (
        <List>
            <List.Item title="Item 1" />
            <List.Item title="Item 2" />
            <List.Item title="Item 3" />
        </List>
    );
};

export default DefaultListExample;
```

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

### Icon Picker Component Usage Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/IconPicker/IconPicker.mdx

Demonstrates how to use the Icon Picker component in a React application. It includes setting up FontAwesome icons, managing the selected icon state, and handling validation for required fields. This example requires '@webiny/admin-ui' and '@fortawesome/react-fontawesome'.

```tsx
import React, { useState } from "react";
import { IconPicker } from "@webiny/admin-ui";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";

// Initialize FontAwesome library
library.add(fas as any);

const IconPickerExample = () => {
    const [selectedIcon, setSelectedIcon] = useState("");
    const [validation, setValidation] = useState({ isValid: true, message: "" });

    const handleChange = (newIcon: string) => {
        setSelectedIcon(newIcon);

        if (!newIcon && true) { // true represents required field
            setValidation({ isValid: false, message: "Please select an icon" });
        } else {
            setValidation({ isValid: true, message: "" });
        }
    };

    return (
        <IconPicker
            label="Select an Icon"
            description="Choose an icon for your button"
            note="Note: The selected icon will be displayed on your button"
            required={true}
            icons={[
                { prefix: "fas", name: "trash-restore-alt" },
                { prefix: "fas", name: "file-pen" },
                { prefix: "fas", name: "receipt" },
                { prefix: "fas", name: "user-circle" },
                { prefix: "fas", name: "circle-user" }
                // Add more icons as needed
            ]}
            value={selectedIcon}
            onChange={handleChange}
            validation={validation}
        />
    );
};

export default IconPickerExample;

```

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

### Input Component Usage Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Input/Input.mdx

Demonstrates the basic usage of the Input component from '@webiny/admin-ui'. It shows how to manage input state, handle user input, and implement basic validation logic on blur and enter key press. This example is suitable for standard form inputs.

```jsx
import React, { useState } from "react";

import { Input } from "@webiny/admin-ui";

const InputExample = () => {
    const [value, setValue] = useState("");
    const [validation, setValidation] = useState({ isValid: true, message: "" });

    const handleValidation = () => {
        if (!value.trim()) {
            setValidation({ isValid: false, message: "This field is required" });
        } else if (value.trim().length < 3) {
            setValidation({ isValid: false, message: "Must be at least 3 characters long" });
        } else {
            setValidation({ isValid: true, message: "" });
        }
    };

    return (
        <div>
            <Input
                type="text"
                label="Full Name"
                description="Enter your full name as it appears on your ID"
                note="This will be used for official documentation"
                placeholder="Enter your full name"
                required={true}
                value={value}
                validation={validation}
                onChange={newValue => setValue(newValue)}
                onBlur={handleValidation}
                onEnter={handleValidation}
            />
        </div>
    );
};

export default InputExample;
```

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

### HeaderBar with Multiple Start Content Items (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/HeaderBar/HeaderBar.mdx

This example illustrates how to render multiple elements within the 'start' slot of the HeaderBar. It also includes 'middle' and 'end' content. This allows for complex header layouts with breadcrumbs, contextual information, and user controls.

```javascript
import React from "react";
import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";

const MoreStartContentExample = () => {
    const StartContent = () => (
        <Text size={"sm"} className={"text-neutral-dimmed"}>
            {"Headless CMS / Articles / The best article ever"}
        </Text>
    );

    const MiddleContent = () => <>Content in the middle</>;

    const EndContent = () => (
        <div className={"flex gap-x-sm"}>
            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
            <div
                className={
                    "flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light"
                }
            >
                <Avatar
                    size={"sm"}
                    variant={"strong"}
                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
                />
                <IconButton
                    variant={"ghost"}
                    size={"xs"}
                    color={"neutral-strong"}
                    icon={<KeyboardArrowRightIcon />}
                    onClick={() => console.log("clicked")}
                />
            </div>
        </div>
    );

    return (
        <HeaderBar
            start={
                <>
                    <StartContent />
                    <StartContent />
                    <StartContent />
                </>
            }
            middle={<MiddleContent />}
            end={<EndContent />}
        />
    );
};

export default MoreStartContentExample;
```

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

### HeaderBar Component Usage Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/HeaderBar/HeaderBar.mdx

Demonstrates the usage of the HeaderBar component with content in the start, middle, and end sections. It utilizes various UI elements like Text, Button, IconButton, and Avatar from the @webiny/admin-ui library. The example also includes an 'Open in GitHub' action.

```tsx
import React from "react";
import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";

const HeaderBarExample = () => {
    const StartContent = () => (
        <Text size={"sm"} className={"text-neutral-dimmed"}>
            {"Headless CMS / Articles / The best article ever"}
        </Text>
    );

    const MiddleContent = () => <>Content in the middle</>;

    const EndContent = () => (
        <div className={"flex gap-x-sm"}>
            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
            <div
                className={
                    "flex items-center rounded-md " +
"gap-xxs py-xs px-xs bg-neutral-light"
                }
            >
                <Avatar
                    size={"sm"}
                    variant={"strong"}
                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
                />
                <IconButton
                    variant={"ghost"}
                    size={"xs"}
                    color={"neutral-strong"}
                    icon={<KeyboardArrowRightIcon />}
                    onClick={() => console.log("clicked")}
                />
            </div>
        </div>
    );

    return (
        <HeaderBar
            start={<StartContent />}
            middle={<MiddleContent />}
            end={<EndContent />}
        />
    );
};

export default HeaderBarExample;
```

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

### Deploy Sync System to Development Environment

Source: https://github.com/webiny/webiny-js/blob/next/packages/api-sync-system/DEVELOPMENT.md

This command deploys the Sync System to the 'dev' environment. It's a foundational step for managing deployments across different variants.

```bash
yarn webiny deploy sync --env=dev
```

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

### Storybook CSS Styling for Docs

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/docs/stories/00-getting-started/welcome.mdx

Applies custom CSS to hide the table of contents wrapper within Storybook documentation pages when a specific nested structure is detected. This is useful for controlling the layout of documentation pages.

```javascript
<style>
    {`
    .sbdocs-wrapper > div:has(div > .toc-wrapper) {
      display: none;
    }
  `}
</style>
```

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

### Webiny JS Monorepo Postinstall Script for Linking

Source: https://github.com/webiny/webiny-js/blob/next/docs/ARCHITECTURE_AND_CONCEPTS.md

Demonstrates the `postinstall` script in the root `package.json` of the Webiny JS monorepo. This script is automatically executed after `yarn` installs dependencies and is responsible for running a custom utility (`linkWorkspaces.js`) to correctly link packages, ensuring that imports resolve to the `dist` folder.

```json
{
  "name": "webiny-js",
  "private": true,
  "scripts": {
    "postinstall": "node ./packages/project-utils/workspaces/linkWorkspaces.js"
  },
  "devDependencies": {
    "@webiny/project-utils": "^1.0.0"
  }
}
```

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

### Get Folder Repository Implementation (TypeScript)

Source: https://github.com/webiny/webiny-js/blob/next/ai-context/backend-feature-implementation.md

Implements the IGetFolderRepository interface to fetch folder data from a CMS. It handles CMS-specific errors and maps them to domain-specific errors like FolderNotFoundError. Dependencies include GetEntryByIdUseCase and FolderModel.

```typescript
import { Result } from "@webiny/feature/api";
import {
  GetFolderRepository as RepositoryAbstraction,
  type IGetFolderRepository
} from "./abstractions.js";
import { GetEntryByIdUseCase } from "@webiny/api-headless-cms/features/contentEntry/GetEntryById";
import { FolderModel } from "~/domain/folder/abstractions.js";
import type { Folder } from "~/folder/folder.types.js";
import { EntryToFolderMapper } from "../shared/EntryToFolderMapper.js";
import { FolderNotFoundError, FolderPersistenceError } from "~/domain/folder/errors.js";

class GetFolderRepositoryImpl implements IGetFolderRepository {
  constructor(
    private getEntryById: GetEntryByIdUseCase.Interface,
    private folderModel: FolderModel.Interface
  ) {}

  async execute(id: string): Promise<Result<Folder, RepositoryAbstraction.Error>> {
    const result = await this.getEntryById.execute(this.folderModel, id);

    if (result.isFail()) {
      if (result.error.code === "Cms/Entry/NotFound") {
        return Result.fail(new FolderNotFoundError(id));
      }

      return Result.fail(new FolderPersistenceError(result.error));
    }

    const folder = EntryToFolderMapper.toFolder(result.value);
    return Result.ok(folder);
  }
}

export const GetFolderRepository = RepositoryAbstraction.createImplementation({
  implementation: GetFolderRepositoryImpl,
  dependencies: [GetEntryByIdUseCase, FolderModel]
});
```

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

### Register Get Folder Feature (TypeScript)

Source: https://github.com/webiny/webiny-js/blob/next/ai-context/backend-feature-implementation.md

Defines and registers the 'GetFolder' feature using createFeature. It sets up the dependency injection container by registering the GetFolderRepository as a singleton and GetFolderUseCase as transient. It also shows how to optionally register a decorator.

```typescript
import { createFeature } from "@webiny/feature/api";
import { GetFolderRepository } from "./GetFolderRepository.js";
import { GetFolderUseCase } from "./GetFolderUseCase.js";
import { GetFolderWithFolderLevelPermissions } from "./decorators/GetFolderWithFolderLevelPermissions.js";

export const GetFolderFeature = createFeature({
  name: "GetFolder",
  register(container) {
    container.register(GetFolderRepository).inSingletonScope();
    container.register(GetFolderUseCase);
    container.registerDecorator(GetFolderWithFolderLevelPermissions); // Optional
  }
});
```

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

### Get Folder Decorator with Permissions (TypeScript)

Source: https://github.com/webiny/webiny-js/blob/next/ai-context/backend-feature-implementation.md

A decorator implementation for the GetFolderUseCase that adds folder-level permission checks. It decorates the original use case, retrieves permissions, checks authorization, and returns either the authorized folder data or a FolderNotAuthorizedError. It uses createDecorator to export.

```typescript
import { GetFolderUseCase } from "../abstractions.js";
import { Result } from "@webiny/feature/api";
import { FolderLevelPermissions } from "~/features/flp/FolderLevelPermissions/index.js";
import { FolderNotAuthorizedError } from "~/domain/folder/errors.js";

class GetFolderWithFolderLevelPermissionsImpl implements GetFolderUseCase.Interface {
  private folderLevelPermissions: FolderLevelPermissions.Interface;
  private readonly decoretee: GetFolderUseCase.Interface;

  constructor(
    folderLevelPermissions: FolderLevelPermissions.Interface,
    decoretee: GetFolderUseCase.Interface
  ) {
    this.folderLevelPermissions = folderLevelPermissions;
    this.decoretee = decoretee;
  }

  async execute(id: string) {
    const result = await this.decoretee.execute(id);
    if (result.isFail()) {
      return Result.fail(result.error);
    }

    const folder = result.value;
    const permissions = await this.folderLevelPermissions.getFolderLevelPermissions(folder.id);

    const canAccessFolder = await this.folderLevelPermissions.canAccessFolder({
      permissions,
      rwd: "r"
    });

    if (!canAccessFolder) {
      return Result.fail(new FolderNotAuthorizedError());
    }

    return Result.ok({
      ...folder,
      permissions
    });
  }
}

export const GetFolderWithFolderLevelPermissions = GetFolderUseCase.createDecorator({
  decorator: GetFolderWithFolderLevelPermissionsImpl,
  dependencies: [FolderLevelPermissions]
});
```

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

### Define Folder Creation Domain Events in TypeScript

Source: https://github.com/webiny/webiny-js/blob/next/ai-context/backend-feature-implementation.md

This TypeScript code defines domain events for folder creation, specifically `FolderBeforeCreateEvent` and `FolderAfterCreateEvent`. Each event extends `DomainEvent` and specifies an `eventType` string literal. They also provide a method to get their corresponding handler abstraction.

```typescript
import { DomainEvent } from "@webiny/api-core/features/EventPublisher";
import { FolderBeforeCreateHandler, FolderAfterCreateHandler } from "./abstractions.js";
import type { FolderBeforeCreatePayload, FolderAfterCreatePayload } from "./abstractions.js";

// FolderBeforeCreate Event
export class FolderBeforeCreateEvent extends DomainEvent<FolderBeforeCreatePayload> {
  eventType = "folder.beforeCreate" as const;

  getHandlerAbstraction() {
    return FolderBeforeCreateHandler;
  }
}

// FolderAfterCreate Event
export class FolderAfterCreateEvent extends DomainEvent<FolderAfterCreatePayload> {
  eventType = "folder.afterCreate" as const;

  getHandlerAbstraction() {
    return FolderAfterCreateHandler;
  }
}

```

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

### Implement Use Case with Abstraction in TypeScript

Source: https://github.com/webiny/webiny-js/blob/next/ai-context/backend-developer-guide.md

Provides an example of implementing a use case, adhering to critical rules such as implementing the abstraction's interface, using correct return types, and wiring up dependencies with `createImplementation`.

```typescript
// UpdateUserUseCase.ts
import { Result } from "@webiny/feature/api";

// Import abstraction you're implementing
import { UpdateUserUseCase as UseCaseAbstraction } from "./abstractions.js";

// Import abstractions you want to depend on
import { SupportedLanguagesProvider } from "@webiny/some-package/features/SupportedLanguagesProvider";
import { UserRepository } from "../shared/abstractions.js";

// Implementation class MUST implement the abstraction's Interface
export class UpdateUserUseCase implements UseCaseAbstraction.Interface {
  private provider: SupportedLanguagesProvider.Interface;
  private repository: UserRepository.Interface;

  // Constructor parameters MUST use .Interface types
  constructor(
    provider: SupportedLanguagesProvider.Interface,
    repository: UserRepository.Interface
  ) {
    this.provider = provider;
    this.repository = repository;
  }

  // Return type MUST use the abstraction's .Error namespace type
  async execute(
    id: string,
    data: Record<string, any>
  ): Promise<Result<void, UseCaseAbstraction.Error>> {
    // Implementation goes here
    const result = await this.repository.update(id, data);
    if (result.isFail()) {
      return Result.fail(result.error);
    }

    return Result.ok();
  }
}

// Wire up with createImplementation
export const UpdateUserUseCaseImpl = UseCaseAbstraction.createImplementation({
  implementation: UpdateUserUseCase,
  dependencies: [SupportedLanguagesProvider, UserRepository]
});
```

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

### Horizontal Separator Example

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Separator/Separator.mdx

Demonstrates the default horizontal orientation of the Separator component. It's used to divide content vertically, with examples of headings, text, and other elements above and below the separator.

```javascript
import React from "react";
import { Separator, Heading, Text } from "@webiny/admin-ui";

const HorizontalOrientationExample = () => {
    return (
        <div>
            <div className="space-y-1">
                <Heading level={6}>{"This is a heading."}</Heading>
                <Text size="sm" className={"text-neutral-strong"}>
                    {"This is a short description here"}
                </Text>
            </div>
            <Separator margin={"lg"} orientation="horizontal" />
            <div className="flex items-center h-6 text-sm">
                <Text>{"This is text 1."}</Text>
            </div>
        </div>
    );
};

export default HorizontalOrientationExample;
```

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

### Implement Dependency Injection in Sync System Handler

Source: https://github.com/webiny/webiny-js/blob/next/packages/api-sync-system/DEVELOPMENT.md

Demonstrates the simplified approach to creating a Sync System resolver handler using dependency injection. This reduces the need to manually pass numerous creator methods, making the code cleaner and more maintainable.

```typescript
const handler = createSyncResolverHandler({
    plugins: [],
    debug: process.env.DEBUG === "true",
    awsWorkerLambdaArn: process.env.AWS_SYNC_WORKER_LAMBDA_ARN,
});
```

```typescript
const handler = createSyncResolverHandler({
    plugins: [],
    debug: process.env.DEBUG === "true",
    awsWorkerLambdaArn: process.env.AWS_SYNC_WORKER_LAMBDA_ARN,
    createS3Client,
    createLambdaClient,
    createDocumentClient,
    createCognitoIdentityProviderClient
});
```

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

### Vertical Separator Example

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Separator/Separator.mdx

Illustrates the vertical orientation of the Separator component, ideal for dividing elements in a row or creating columns. This example shows separators placed between text elements.

```javascript
import React from "react";
import { Separator, Text } from "@webiny/admin-ui";

const VerticalOrientationExample = () => {
    return (
        <div className="flex justify-center h-6 text-sm">
            <Text>{"This is text 1."}</Text>
            <Separator orientation="vertical" margin={"lg"} />
            <Text>{"This is text 2."}</Text>
            <Separator orientation="vertical" margin={"lg"} />
            <Text>{"This is text 3."}</Text>
        </div>
    );
};

export default VerticalOrientationExample;
```

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

### Configuring Target Directory for Package Linking

Source: https://github.com/webiny/webiny-js/blob/next/docs/ARCHITECTURE_AND_CONCEPTS.md

Shows how the `publishConfig.directory` field is used in a package's `package.json` to specify the output folder for the build process. This configuration is crucial for tools like `lerna` and Webiny's custom linking utility to correctly resolve the package's entry point, typically pointing to the `dist` folder.

```json
{
  "name": "@webiny/example-package",
  "version": "1.0.0",
  "scripts": {
    "build": "babel src -d dist --copy-files && tsc --emitDeclarationOnly"
  },
  "publishConfig": {
    "directory": "dist"
  }
}
```

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

### Default Separator Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Separator/Separator.mdx

Illustrates the default usage of the Separator component, featuring a horizontal divider with subtle styling and a large margin. This example requires React and the @webiny/admin-ui library.

```tsx
import React from "react";
import { Separator, Heading, Text } from "@webiny/admin-ui";

const DefaultSeparatorExample = () => {
    return (
        <div>
            <div className="space-y-1">
                <Heading level={6}>{"This is a heading."}</Heading>
                <Text size="sm" className={"text-neutral-strong"}>
                    {"This is a short description here"}
                </Text>
            </div>
            <Separator margin="lg" variant="subtle" />
            <div className="flex items-center h-6 text-sm">
                <Text>{"This is text 1."}</Text>
            </div>
        </div>
    );
};

export default DefaultSeparatorExample;
```

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

### Heading Component Usage Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Heading/Heading.mdx

Demonstrates the basic usage of the Heading component from the '@webiny/admin-ui' library. It shows how to import and render a heading with a specified level. This component is essential for maintaining consistent typography and semantic structure in the UI.

```jsx
import React from "react";
import { Heading } from "@webiny/admin-ui";

const HeadingExample = () => {
    return <Heading level={1}>This is a heading</Heading>;
};

export default HeadingExample;
```

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

### Link Component Usage and Examples (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Link/Link.mdx

Demonstrates the usage of the Link component for navigation within the Webiny JS application. It shows how to link to different pages and apply various styling variants and sizes. The component relies on the '@webiny/admin-ui' library.

```tsx
import React from "react";
import { Link } from "@webiny/admin-ui";

const LinkExample = () => {
    return (
        <div>
            <p>
                This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
            </p>
            <p>
                <Link to="/settings" variant="secondary" size="lg">
                    This is a large secondary link
                </Link>
            </p>
            <p>
                <Link to="/help" underline={true}>
                    This link is underlined by default
                </Link>
            </p>
        </div>
    );
};

export default LinkExample;
```

```tsx
import React from "react";
import { Link } from "@webiny/admin-ui";

const DefaultLinkExample = () => {
    return (
        <Link to="#">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
        </Link>
    );
};

export default DefaultLinkExample;
```

```tsx
import React from "react";
import { Link } from "@webiny/admin-ui";

const XlLinkExample = () => {
    return (
        <Link to="#" size="xl">
            Extra large link
        </Link>
    );
};

export default XlLinkExample;
```

```tsx
import React from "react";
import { Link } from "@webiny/admin-ui";

const LgLinkExample = () => {
    return (
        <Link to="#" size="lg">
            Large link
        </Link>
    );
};

export default LgLinkExample;
```

```tsx
import React from "react";
import { Link } from "@webiny/admin-ui";

const MdLinkExample = () => {
    return (
        <Link to="#" size="md">
            Medium link
        </Link>
    );
};

export default MdLinkExample;
```

```tsx
import React from "react";
import { Link } from "@webiny/admin-ui";

const SmLinkExample = () => {
    return (
        <Link to="#" size="sm">
            Small link
        </Link>
    );
};

export default SmLinkExample;
```

```tsx
import React from "react";
import { Link, Text } from "@webiny/admin-ui";

const InheritedSizeLinkExample = () => {
    return (
        <Text>
            <Text size="lg">
                Size of this text is set to large, so, 
                <Link to="#">this link's</Link> size is also automatically set to large.
            </Text>
        </Text>
    );
};

export default InheritedSizeLinkExample;
```

```tsx
import React from "react";
import { Link } from "@webiny/admin-ui";

const UnderlinedLinkExample = () => {
    return (
        <Link to="#" underline={true}>
            This link is underlined by default
        </Link>
    );
};

export default UnderlinedLinkExample;
```

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

### Webiny JS Alert Component: Danger Banner Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Alert/Alert.mdx

Provides an example of a danger alert banner using the Alert component from '@webiny/admin-ui'. This is intended for critical messages.

```jsx
import { Alert } from '@webiny/admin-ui';

<Alert type={"danger"}>
    <>
        This is a danger alert, used when something critical needs to be communicated. And{" "}
        <a href={"#"}>this thing here</a> is a short link.
    </>
</Alert>
```

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

### MultiAutoComplete Component Usage Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/MultiAutoComplete/MultiAutoComplete.mdx

Demonstrates how to use the MultiAutoComplete component in a React application. It shows state management for selected values and validation, along with configuration options like labels, placeholders, and free input allowance. This component is part of the @webiny/admin-ui package.

```tsx
import React, { useState } from "react";
import { MultiAutoComplete } from "@webiny/admin-ui";

const MultiAutoCompleteExample = () => {
const [values, setValues] = useState<string[]>([]);
const [validation, setValidation] = useState({ isValid: true, message: "" });

    const handleValidation = () => {
        if (values.length === 0) {
            setValidation({ isValid: false, message: "Please select at least one option" });
        } else {
            setValidation({ isValid: true, message: "" });
        }
    };

    const timeZones = [
        "Eastern Standard Time (EST)",
        "Central Standard Time (CST)",
        "Pacific Standard Time (PST)",
        "Greenwich Mean Time (GMT)"
    ];

    return (
        <div>
            <MultiAutoComplete
                label="Time Zones"
                description="Select one or more time zones"
                placeholder="Search or select time zones"
                options={timeZones}
                values={values}
                onValuesChange={newValues => {
                    setValues(newValues);
                    handleValidation();
                }}
                validation={validation}
                allowFreeInput={true}
                required={true}
                note="You can add custom time zones if needed"
            />
        </div>
    );
};

export default MultiAutoCompleteExample;
```

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

### List with Activated Item Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/List/List.mdx

Demonstrates how to create a list where one item is visually highlighted as 'activated'. This is useful for indicating a selected or currently active item in a list. It utilizes the `List` and `List.Item` components from `@webiny/admin-ui`.

```javascript
import React from "react";
import { List } from "@webiny/admin-ui";

const WithActivatedItemExample = () => {
    return (
        <List>
            <List.Item
                title="User Profile"
                description="View and edit your profile information"
                activated={true}
                onClick={() => console.log("User Profile clicked")}
            />
            <List.Item
                title="Settings"
                description="Configure application settings"
                onClick={() => console.log("Settings clicked")}
            />
            <List.Item
                title="Help & Support"
                description="Get assistance and view documentation"
                onClick={() => console.log("Help & Support clicked")}
            />
        </List>
    );
};

export default WithActivatedItemExample;
```

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

### Webiny JS Alert Component: Info Banner Example (React)

Source: https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/Alert/Alert.mdx

Illustrates how to render an informational alert banner using the Alert component from '@webiny/admin-ui'. This example is suitable for general notifications.

```jsx
import { Alert } from '@webiny/admin-ui';

<Alert type={"info"}>
    <>
        This type of notification is suitable for general usage where there’s no need for
        accent. And <a href={"#"}>this thing here</a> is a short link.
    </>
</Alert>
```