Skip to content

Commit 33b6092

Browse files
reidbarberreidbarber
authored
fix: update RAC Autocomplete starter stories to fix verdaccio build (#9070)
* fix: update RAC Autocomplete starter stories to fix verdaccio build * formatting
1 parent bd354fa commit 33b6092

File tree

2 files changed

+74
-58
lines changed

2 files changed

+74
-58
lines changed

‎starters/docs/stories/Autocomplete.stories.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
1-
import {Autocomplete} from '../src/Autocomplete';
1+
import {Button} from '../src/Button';
2+
import {CommandPalette} from '../src/CommandPalette';
3+
import {DialogTrigger} from '../src/Dialog';
24
import {MenuItem} from '../src/Menu';
35

46
import type {Meta, StoryFn} from '@storybook/react';
57

6-
const meta: Meta<typeof Autocomplete> = {
7-
component: Autocomplete,
8+
const meta: Meta<typeof CommandPalette> = {
9+
component: CommandPalette,
810
parameters: {
911
layout: 'centered'
1012
},
1113
tags: ['autodocs']
1214
};
1315

1416
export default meta;
15-
type Story = StoryFn<typeof Autocomplete>;
17+
type Story = StoryFn<typeof CommandPalette>;
1618

1719
export const Example: Story = (args) => (
18-
<Autocomplete {...args}>
19-
<MenuItem>Create new file...</MenuItem>
20-
<MenuItem>Create new folder...</MenuItem>
21-
<MenuItem>Assign to...</MenuItem>
22-
<MenuItem>Assign to me</MenuItem>
23-
<MenuItem>Change status...</MenuItem>
24-
<MenuItem>Change priority...</MenuItem>
25-
<MenuItem>Add label...</MenuItem>
26-
<MenuItem>Remove label...</MenuItem>
27-
</Autocomplete>
20+
<DialogTrigger>
21+
<Button>Open Command Palette <kbd>⌘ J</kbd></Button>
22+
<CommandPalette {...args}>
23+
<MenuItem>Create new file...</MenuItem>
24+
<MenuItem>Create new folder...</MenuItem>
25+
<MenuItem>Assign to...</MenuItem>
26+
<MenuItem>Assign to me</MenuItem>
27+
<MenuItem>Change status...</MenuItem>
28+
<MenuItem>Change priority...</MenuItem>
29+
<MenuItem>Add label...</MenuItem>
30+
<MenuItem>Remove label...</MenuItem>
31+
</CommandPalette>
32+
</DialogTrigger>
2833
);
29-
30-
Example.args = {
31-
label: 'Commands',
32-
placeholder: 'Search commands...'
33-
};

‎starters/tailwind/stories/Autocomplete.stories.tsx‎

Lines changed: 55 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,36 @@
1-
import { Meta } from '@storybook/react';
2-
import React from 'react';
3-
import { Autocomplete, AutocompleteItem, AutocompleteSection } from '../src/Autocomplete';
1+
import {Meta} from "@storybook/react";
2+
import React from "react";
3+
import {CommandPalette} from "../src/CommandPalette";
4+
import {Button} from "../src/Button";
5+
import {DialogTrigger} from "react-aria-components";
6+
import {MenuItem, MenuSection} from "../src/Menu";
47

5-
const meta: Meta<typeof Autocomplete> = {
6-
component: Autocomplete,
8+
const meta: Meta<typeof CommandPalette> = {
9+
component: CommandPalette,
710
parameters: {
811
layout: 'centered'
912
},
10-
tags: ['autodocs'],
11-
args: {
12-
label: 'Ice cream flavor'
13-
}
13+
tags: ['autodocs']
1414
};
1515

1616
export default meta;
1717

1818
export const Example = (args: any) => (
19-
<Autocomplete {...args}>
20-
<AutocompleteItem>Chocolate</AutocompleteItem>
21-
<AutocompleteItem id="mint">Mint</AutocompleteItem>
22-
<AutocompleteItem>Strawberry</AutocompleteItem>
23-
<AutocompleteItem>Vanilla</AutocompleteItem>
24-
<AutocompleteItem>Cookies and Cream</AutocompleteItem>
25-
</Autocomplete>
19+
<DialogTrigger>
20+
<Button>
21+
Open Command Palette{' '}
22+
<kbd className="px-1 ml-4 font-sans text-xs rounded-sm border border-white/20 bg-white/10">
23+
⌘ J
24+
</kbd>
25+
</Button>
26+
<CommandPalette {...args}>
27+
<MenuItem>Chocolate</MenuItem>
28+
<MenuItem id="mint">Mint</MenuItem>
29+
<MenuItem>Strawberry</MenuItem>
30+
<MenuItem>Vanilla</MenuItem>
31+
<MenuItem>Cookies and Cream</MenuItem>
32+
</CommandPalette>
33+
</DialogTrigger>
2634
);
2735

2836
export const DisabledItems = (args: any) => <Example {...args} />;
@@ -31,30 +39,38 @@ DisabledItems.args = {
3139
};
3240

3341
export const Sections = (args: any) => (
34-
<Autocomplete {...args}>
35-
<AutocompleteSection title="Fruit">
36-
<AutocompleteItem id="Apple">Apple</AutocompleteItem>
37-
<AutocompleteItem id="Banana">Banana</AutocompleteItem>
38-
<AutocompleteItem id="Orange">Orange</AutocompleteItem>
39-
<AutocompleteItem id="Honeydew">Honeydew</AutocompleteItem>
40-
<AutocompleteItem id="Grapes">Grapes</AutocompleteItem>
41-
<AutocompleteItem id="Watermelon">Watermelon</AutocompleteItem>
42-
<AutocompleteItem id="Cantaloupe">Cantaloupe</AutocompleteItem>
43-
<AutocompleteItem id="Pear">Pear</AutocompleteItem>
44-
</AutocompleteSection>
45-
<AutocompleteSection title="Vegetable">
46-
<AutocompleteItem id="Cabbage">Cabbage</AutocompleteItem>
47-
<AutocompleteItem id="Broccoli">Broccoli</AutocompleteItem>
48-
<AutocompleteItem id="Carrots">Carrots</AutocompleteItem>
49-
<AutocompleteItem id="Lettuce">Lettuce</AutocompleteItem>
50-
<AutocompleteItem id="Spinach">Spinach</AutocompleteItem>
51-
<AutocompleteItem id="Bok Choy">Bok Choy</AutocompleteItem>
52-
<AutocompleteItem id="Cauliflower">Cauliflower</AutocompleteItem>
53-
<AutocompleteItem id="Potatoes">Potatoes</AutocompleteItem>
54-
</AutocompleteSection>
55-
</Autocomplete>
42+
<DialogTrigger>
43+
<Button>
44+
Open Command Palette{' '}
45+
<kbd className="px-1 ml-4 font-sans text-xs rounded-sm border border-white/20 bg-white/10">
46+
⌘ J
47+
</kbd>
48+
</Button>
49+
<CommandPalette {...args}>
50+
<MenuSection title="Fruit">
51+
<MenuItem id="Apple">Apple</MenuItem>
52+
<MenuItem id="Banana">Banana</MenuItem>
53+
<MenuItem id="Orange">Orange</MenuItem>
54+
<MenuItem id="Honeydew">Honeydew</MenuItem>
55+
<MenuItem id="Grapes">Grapes</MenuItem>
56+
<MenuItem id="Watermelon">Watermelon</MenuItem>
57+
<MenuItem id="Cantaloupe">Cantaloupe</MenuItem>
58+
<MenuItem id="Pear">Pear</MenuItem>
59+
</MenuSection>
60+
<MenuSection title="Vegetable">
61+
<MenuItem id="Cabbage">Cabbage</MenuItem>
62+
<MenuItem id="Broccoli">Broccoli</MenuItem>
63+
<MenuItem id="Carrots">Carrots</MenuItem>
64+
<MenuItem id="Lettuce">Lettuce</MenuItem>
65+
<MenuItem id="Spinach">Spinach</MenuItem>
66+
<MenuItem id="Bok Choy">Bok Choy</MenuItem>
67+
<MenuItem id="Cauliflower">Cauliflower</MenuItem>
68+
<MenuItem id="Potatoes">Potatoes</MenuItem>
69+
</MenuSection>
70+
</CommandPalette>
71+
</DialogTrigger>
5672
);
5773

5874
Sections.args = {
59-
label: 'Preferred fruit or vegetable'
75+
label: 'Preferred fruit or vegetable',
6076
};

0 commit comments

Comments
 (0)