Preview:
import {CommandPalette, MinimalPage} from "ui";
import {ArgsTable, Canvas, Meta, Story} from "@storybook/addon-docs";

<Meta title="Components/Sections/CommandPalette/old" component={CommandPalette}/>

export const Template = (args) => (
    <MinimalPage pageTitle="Command Palette" pageDescription="" commandPrompt>
        <p> Press command + k or ctrl + k in order to open the command palette.</p>
        <CommandPalette {...args} />
    </MinimalPage>
);

# CommandPalette

Description of a CommandPalette

## Props

<ArgsTable story="Empty"/>

## Examples

<Canvas>
    <Story
        name="Empty"
        args={{
            startOpen: false,
            onType: (value) => {
                return value;
            },
            onSelect: (value) => {
                return value;
            },
            options: [],
            loading: false,
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

<Canvas>
    <Story
        name="Full"
        args={{
            startOpen: false,
            onType: (value) => {
                return value;
            },
            onSelect: (value) => {
                return value;
            },
            options: [
                {
                    id: "1",
                    title: "Test 1",
                    description: `Multi line string
            Text wrap Test
            testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
            `,
                },
                {
                    id: "2",
                    title: "Test 2",
                    description: "test",
                },
                {
                    id: "3",
                    title: "Test 3",
                    description: "test",
                },
                {
                    id: "4",
                    title: "Test 4",
                    description: "test",
                },
                {
                    id: "5",
                    title: "Test 5",
                    description: "test",
                },
                {
                    id: "6",
                    title: "Test 6",
                    description: "test",
                },
                {
                    id: "7",
                    title: "Test 7",
                    description: "test",
                },
                {
                    id: "8",
                    title: "Test 8",
                    description: "test",
                },
                {
                    id: "9",
                    title: "Test 9",
                    description: "test",
                },
                {
                    id: "10",
                    title: "Test 10",
                    description: "test",
                },
                {
                    id: "11",
                    title: "Test 11",
                    description: "test",
                },
                {
                    id: "12",
                    title: "Test 12",
                    description: "test",
                },
                {
                    id: "13",
                    title: "Test 13",
                    description: "test",
                },
                {
                    id: "14",
                    title: "Test 14",
                    description: "test",
                }, {
                    id: "15",
                    title: "Test 15",
                    description: "test",
                },
                {
                    id: "15",
                    title: "Test 15",
                    description: "test",
                },
            ],
            loading: false,
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

<Canvas>
    <Story
        name="Error"
        args={{
            startOpen: false,
            onType: (value) => {
                return value;
            },
            onSelect: (value) => {
                return value;
            },
            options: [],
            error: "There was an error.",
            loading: false,
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter