-
Notifications
You must be signed in to change notification settings - Fork 323
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' of github.com:enso-org/enso into wip/farmaazon…
…/fix-integration-test
- Loading branch information
Showing
15 changed files
with
529 additions
and
194 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
...ui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelector.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react' | ||
| import { userEvent, within } from '@storybook/test' | ||
| import { z } from 'zod' | ||
| import { Form } from '../../Form' | ||
| import type { MultiSelectorProps } from './MultiSelector.tsx' | ||
| import { MultiSelector } from './MultiSelector.tsx' | ||
|
|
||
| type Props = MultiSelectorProps<typeof schema, 'value'> | ||
| type Story = StoryObj<Props> | ||
|
|
||
| const schema = z.object({ value: z.array(z.enum(['one', 'two', 'three'])) }) | ||
|
|
||
| export default { | ||
| title: 'Components/AriaComponents/Inputs/MultiSelector', | ||
| component: MultiSelector, | ||
| render: (args) => <MultiSelector {...args} />, | ||
| tags: ['autodocs'], | ||
| decorators: [(Story, context) => <Form schema={schema}>{Story(context)}</Form>], | ||
| args: { name: 'value', items: ['one', 'two', 'three'] }, | ||
| } as Meta<Props> | ||
|
|
||
| export const Default: Story = {} | ||
|
|
||
| export const TwoColumns: Story = { args: { columns: 2 } } | ||
|
|
||
| export const SelectedItems: Story = { | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement) | ||
| await userEvent.click(canvas.getByText('one')) | ||
|
|
||
| await userEvent.click(canvas.getByText('two')) | ||
|
|
||
| await userEvent.click(canvas.getByText('three')) | ||
|
|
||
| await userEvent.click(canvas.getByText('one')) | ||
| }, | ||
| } |
84 changes: 84 additions & 0 deletions
84
app/gui/src/dashboard/components/AriaComponents/Inputs/Selector/Selector.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react' | ||
| import { z } from 'zod' | ||
|
|
||
| import { Form } from '#/components/AriaComponents' | ||
| import { userEvent, within } from '@storybook/test' | ||
| import type { SelectorProps } from './Selector' | ||
| import { Selector } from './Selector' | ||
|
|
||
| // Schema for our form | ||
| const schema = z.object({ | ||
| plan: z.enum(['basic', 'pro', 'enterprise']), | ||
| }) | ||
|
|
||
| type Props = SelectorProps<typeof schema, 'plan'> | ||
|
|
||
| export default { | ||
| title: 'Components/AriaComponents/Inputs/Selector', | ||
| component: Selector, | ||
| parameters: { | ||
| layout: 'centered', | ||
| }, | ||
| render: (args) => <Selector {...args} />, | ||
| args: { | ||
| name: 'plan', | ||
| items: ['basic', 'pro', 'enterprise'], | ||
| }, | ||
| decorators: [ | ||
| (Story, context) => ( | ||
| <Form schema={schema} className="w-96" defaultValues={{ plan: 'basic' }}> | ||
| {Story(context)} | ||
| </Form> | ||
| ), | ||
| ], | ||
| } as Meta<Props> | ||
|
|
||
| type Story = StoryObj<Props> | ||
|
|
||
| // Basic usage | ||
| export const Default: Story = {} | ||
|
|
||
| // Different rounded variants | ||
| export const VisualVariants: Story = { | ||
| render: (args) => { | ||
| return ( | ||
| <div className="w-full space-y-12"> | ||
| <div className="w-full space-y-2"> | ||
| {(['outline'] as const).map((variant) => ( | ||
| <Selector {...args} key={variant} label={variant} variant={variant} /> | ||
| ))} | ||
| </div> | ||
|
|
||
| <div className="w-full space-y-2"> | ||
| {(['medium', 'small'] as const).map((size) => ( | ||
| <Selector {...args} key={size} label={size} size={size} /> | ||
| ))} | ||
| </div> | ||
|
|
||
| <div className="w-full space-y-2"> | ||
| {( | ||
| ['medium', 'xxxlarge', 'none', 'small', 'large', 'xlarge', 'xxlarge', 'full'] as const | ||
| ).map((rounded) => ( | ||
| <Selector {...args} key={rounded} label={rounded} rounded={rounded} /> | ||
| ))} | ||
| </div> | ||
|
|
||
| <div className="w-full space-y-2"> | ||
| <Selector {...args} label="Invalid" isInvalid /> | ||
| <Selector {...args} label="Required" isRequired /> | ||
| <Selector {...args} label="Disabled" isDisabled /> | ||
| <Selector {...args} label="Readonly" isReadOnly /> | ||
| <Selector {...args} label="Invalid & Disabled" isInvalid isDisabled /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| }, | ||
| } | ||
|
|
||
| export const Interactions: Story = { | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement) | ||
|
|
||
| await userEvent.click(canvas.getByText('enterprise')) | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.