reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-11-25 11:03:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

Upgrade to Storybook 7 (#1386)

Browse Source 
* Migrate

* Config updates

* Remove

* No require-from-string

* Update lock file

* Fix types

* Doesn't work

* Update to CSF3
This commit is contained in:
Nathan Bierema 2023-04-06 21:39:14 -04:00 committed by GitHub
parent 59be92a8af
commit c52cfbe469
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 2460 additions and 5276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -43,12 +43,6 @@
"pnpm": { "pnpm": {
"overrides": { "overrides": {
"@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process" "@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process"
},
"peerDependencyRules": {
"allowedVersions": {
"react": "18",
"react-dom": "18"
}
} }
} }
} }

14
packages/redux-devtools-ui/.storybook/main.js
View File

@ -1,14 +0,0 @@
module.exports = {
core: {
builder: 'webpack5',
},
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
{
name: '@storybook/addon-essentials',
options: {
backgrounds: false,
},
},
],
};

24
packages/redux-devtools-ui/.storybook/main.ts Normal file
View File

@ -0,0 +1,24 @@
import type { StorybookConfig } from '@storybook/react-webpack5';
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
{
name: '@storybook/addon-essentials',
options: {
backgrounds: false,
},
},
'@storybook/addon-interactions',
],
framework: {
name: '@storybook/react-webpack5',
options: {},
},
docs: {
autodocs: 'tag',
},
};
export default config;

75
packages/redux-devtools-ui/.storybook/preview.tsx
View File

@ -1,41 +1,9 @@
import React from 'react'; import React from 'react';
import type { Preview } from '@storybook/react';
import { Container } from '../src'; import { Container } from '../src';
import { listSchemes, listThemes } from '../src/utils/theme'; import { listSchemes, listThemes } from '../src/utils/theme';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
};
export const globalTypes = {
theme: {
name: 'Theme',
description: 'Global theme for components',
defaultValue: 'default',
toolbar: {
items: listThemes(),
showName: true,
},
},
scheme: {
name: 'Color Scheme',
description: 'Global color scheme for components',
defaultValue: 'default',
toolbar: {
items: listSchemes(),
showName: true,
},
},
color: {
name: 'Color',
description: 'Global color for components',
defaultValue: 'light',
toolbar: {
items: ['auto', 'light', 'dark'],
showName: true,
},
},
};
const withThemeProvider = (Story, context) => ( const withThemeProvider = (Story, context) => (
<Container <Container
themeData={{ themeData={{
@ -47,4 +15,41 @@ const withThemeProvider = (Story, context) => (
<Story {...context} /> <Story {...context} />
</Container> </Container>
); );
export const decorators = [withThemeProvider];
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
},
globalTypes: {
theme: {
name: 'Theme',
description: 'Global theme for components',
defaultValue: 'default',
toolbar: {
items: listThemes(),
showName: true,
},
},
scheme: {
name: 'Color Scheme',
description: 'Global color scheme for components',
defaultValue: 'default',
toolbar: {
items: listSchemes(),
showName: true,
},
},
color: {
name: 'Color',
description: 'Global color for components',
defaultValue: 'light',
toolbar: {
items: ['auto', 'light', 'dark'],
showName: true,
},
},
},
decorators: [withThemeProvider],
};
export default preview;

15
packages/redux-devtools-ui/package.json
View File

@ -25,8 +25,8 @@
}, },
"scripts": { "scripts": {
"start": "pnpm run storybook", "start": "pnpm run storybook",
"storybook": "start-storybook --port 6006 --static-dir ./fonts", "storybook": "storybook dev --port 6006 --static-dir ./fonts",
"build:storybook": "build-storybook --static-dir ./fonts --quiet", "build:storybook": "storybook build --static-dir ./fonts --quiet",
"build": "pnpm run build:lib && pnpm run build:storybook", "build": "pnpm run build:lib && pnpm run build:storybook",
"build:lib": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:css", "build:lib": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:css",
"build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs", "build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs",
@ -67,10 +67,11 @@
"@babel/preset-env": "^7.20.2", "@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6", "@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.0", "@babel/preset-typescript": "^7.21.0",
"@storybook/addon-essentials": "^6.5.16", "@storybook/addon-essentials": "^7.0.2",
"@storybook/builder-webpack5": "^6.5.16", "@storybook/addon-interactions": "^7.0.2",
"@storybook/manager-webpack5": "^6.5.16", "@storybook/addon-links": "^7.0.2",
"@storybook/react": "^6.5.16", "@storybook/react": "^7.0.2",
"@storybook/react-webpack5": "^7.0.2",
"@testing-library/dom": "^9.2.0", "@testing-library/dom": "^9.2.0",
"@testing-library/react": "^14.0.0", "@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3", "@testing-library/user-event": "^14.4.3",
@ -93,8 +94,8 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-is": "^18.2.0", "react-is": "^18.2.0",
"require-from-string": "^2.0.2",
"rimraf": "^4.4.1", "rimraf": "^4.4.1",
"storybook": "^7.0.2",
"styled-components": "^5.3.9", "styled-components": "^5.3.9",
"stylelint": "^15.3.0", "stylelint": "^15.3.0",
"stylelint-config-prettier": "^9.0.5", "stylelint-config-prettier": "^9.0.5",

79
packages/redux-devtools-ui/src/Button/Button.stories.tsx
View File

@ -1,15 +1,16 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { MdFiberManualRecord } from 'react-icons/md'; import { MdFiberManualRecord } from 'react-icons/md';
import { Story } from '@storybook/react'; import { Meta, StoryObj } from '@storybook/react';
import Button from './'; import Button from './';
import { ButtonProps } from './Button';
export default { const meta: Meta = {
title: 'Button', title: 'Button',
component: Button, component: Button,
}; };
export default meta;
const Container = styled.div` const Container = styled.div`
display: flex; display: flex;
height: 100%; height: 100%;
@ -18,41 +19,45 @@ const Container = styled.div`
align-items: center; align-items: center;
`; `;
const Template: Story<ButtonProps> = (args) => ( type Story = StoryObj<typeof Button>;
<Container>
<Button {...args} />
</Container>
);
export const Default = Template.bind({}); export const Default: Story = {
Default.args = { render: (args) => (
title: 'Hello Tooltip! \\a And from new line hello!', <Container>
tooltipPosition: 'top', <Button {...args} />
primary: true, </Container>
size: 'normal', ),
disabled: false, args: {
children: 'Hello Button', title: 'Hello Tooltip! \\a And from new line hello!',
}; tooltipPosition: 'top',
Default.argTypes = { primary: true,
onClick: { control: { disable: true } }, size: 'normal',
type: { control: { disable: true } }, disabled: false,
mark: { control: { disable: true } }, children: 'Hello Button',
theme: { control: { disable: true } }, },
argTypes: {
onClick: { control: { disable: true } },
type: { control: { disable: true } },
mark: { control: { disable: true } },
theme: { control: { disable: true } },
},
}; };
export const Mark = Template.bind({}); export const Mark: Story = {
Mark.args = { render: Default.render,
mark: 'base08', args: {
title: 'Hello Tooltip', mark: 'base08',
tooltipPosition: 'top', title: 'Hello Tooltip',
size: 'normal', tooltipPosition: 'top',
disabled: false, size: 'normal',
children: <MdFiberManualRecord />, disabled: false,
}; children: <MdFiberManualRecord />,
Mark.argTypes = { },
children: { control: { disable: true } }, argTypes: {
onClick: { control: { disable: true } }, children: { control: { disable: true } },
type: { control: { disable: true } }, onClick: { control: { disable: true } },
primary: { control: { disable: true } }, type: { control: { disable: true } },
theme: { control: { disable: true } }, primary: { control: { disable: true } },
theme: { control: { disable: true } },
},
}; };

41
packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx
View File

@ -1,15 +1,16 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Story } from '@storybook/react'; import { Meta, StoryObj } from '@storybook/react';
import ContextMenu from './'; import ContextMenu from './';
import { items } from './data'; import { items } from './data';
import { ContextMenuProps } from './ContextMenu';
export default { const meta: Meta = {
title: 'ContextMenu', title: 'ContextMenu',
component: ContextMenu, component: ContextMenu,
}; };
export default meta;
const Container = styled.div` const Container = styled.div`
display: flex; display: flex;
height: 100%; height: 100%;
@ -18,21 +19,23 @@ const Container = styled.div`
align-items: center; align-items: center;
`; `;
const Template: Story<ContextMenuProps> = (args) => ( type Story = StoryObj<typeof ContextMenu>;
<Container>
<ContextMenu {...args} />
</Container>
);
export const Default = Template.bind({}); export const Default: Story = {
Default.args = { render: (args) => (
visible: true, <Container>
x: 100, <ContextMenu {...args} />
y: 100, </Container>
items, ),
}; args: {
Default.argTypes = { visible: true,
visible: { control: { disable: true } }, x: 100,
items: { control: { disable: true } }, y: 100,
onClick: { control: { disable: true } }, items,
},
argTypes: {
visible: { control: { disable: true } },
items: { control: { disable: true } },
onClick: { control: { disable: true } },
},
}; };

84
packages/redux-devtools-ui/src/Dialog/Dialog.stories.tsx
View File

@ -1,54 +1,54 @@
import React from 'react'; import React from 'react';
import { Story } from '@storybook/react'; import { Meta, StoryObj } from '@storybook/react';
import Dialog from './'; import Dialog from './';
import { schema, uiSchema, formData } from '../Form/schema'; import { schema, uiSchema, formData } from '../Form/schema';
import { DialogProps } from './Dialog';
import { Props as FormProps } from '../Form/Form';
export default { const meta: Meta = {
title: 'Dialog', title: 'Dialog',
component: Dialog, component: Dialog,
}; };
const Template: Story<DialogProps | (DialogProps & FormProps<unknown>)> = ( export default meta;
args
) => <Dialog {...args} />;
export const Default = Template.bind({}); type Story = StoryObj<typeof Dialog>;
Default.args = {
title: 'Dialog Title', export const Default: Story = {
submitText: 'Submit!', args: {
open: true, title: 'Dialog Title',
noHeader: false, submitText: 'Submit!',
noFooter: false, open: true,
modal: false, noHeader: false,
fullWidth: false, noFooter: false,
children: 'Hello Dialog!', modal: false,
}; fullWidth: false,
Default.argTypes = { children: 'Hello Dialog!',
actions: { control: { disable: true } }, },
onDismiss: { control: { disable: true } }, argTypes: {
onSubmit: { control: { disable: true } }, actions: { control: { disable: true } },
theme: { control: { disable: true } }, onDismiss: { control: { disable: true } },
onSubmit: { control: { disable: true } },
theme: { control: { disable: true } },
},
}; };
export const WithForm = Template.bind({}); export const WithForm: Story = {
WithForm.args = { args: {
open: true, open: true,
noHeader: false, noHeader: false,
noFooter: false, noFooter: false,
fullWidth: false, fullWidth: false,
submitText: 'Submit!', submitText: 'Submit!',
formData, formData,
schema, schema,
uiSchema, uiSchema,
}; },
WithForm.argTypes = { argTypes: {
title: { control: { disable: true } }, title: { control: { disable: true } },
children: { control: { disable: true } }, children: { control: { disable: true } },
actions: { control: { disable: true } }, actions: { control: { disable: true } },
modal: { control: { disable: true } }, modal: { control: { disable: true } },
onDismiss: { control: { disable: true } }, onDismiss: { control: { disable: true } },
onSubmit: { control: { disable: true } }, onSubmit: { control: { disable: true } },
theme: { control: { disable: true } }, theme: { control: { disable: true } },
},
}; };

72
packages/redux-devtools-ui/src/Editor/Editor.stories.tsx
View File

@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import { Story } from '@storybook/react'; import { Meta, StoryObj } from '@storybook/react';
import Editor from './'; import Editor from './';
import { default as WithTabsComponent, WithTabsProps } from './WithTabs'; import { default as WithTabsComponent, WithTabsProps } from './WithTabs';
import { EditorProps } from './Editor';
const value = ` const value = `
var themes = []; var themes = [];
@ -12,45 +11,46 @@ function getThemes() {
} }
`; `;
export default { const meta: Meta = {
title: 'Editor', title: 'Editor',
component: Editor, component: Editor,
}; };
const Template: Story<EditorProps> = (args) => <Editor {...args} />; export default meta;
export const Default = Template.bind({}); type Story = StoryObj<typeof Editor>;
Default.args = {
value, export const Default: Story = {
lineNumbers: true, args: {
lineWrapping: false, value,
foldGutter: true, lineNumbers: true,
readOnly: false, lineWrapping: false,
autofocus: true, foldGutter: true,
}; readOnly: false,
Default.argTypes = { autofocus: true,
autofocus: { control: { disable: true } }, },
mode: { control: { disable: true } }, argTypes: {
theme: { control: { disable: true } }, autofocus: { control: { disable: true } },
onChange: { control: { disable: true } }, mode: { control: { disable: true } },
theme: { control: { disable: true } },
onChange: { control: { disable: true } },
},
}; };
const WithTabsTemplate: Story<WithTabsProps> = (args) => ( export const WithTabs: StoryObj<WithTabsProps> = {
<WithTabsComponent {...args} /> render: (args) => <WithTabsComponent {...args} />,
); args: {
lineNumbers: true,
export const WithTabs = WithTabsTemplate.bind({}); position: 'left',
WithTabs.args = { },
lineNumbers: true, argTypes: {
position: 'left', value: { control: { disable: true } },
mode: { control: { disable: true } },
lineWrapping: { control: { disable: true } },
readOnly: { control: { disable: true } },
theme: { control: { disable: true } },
foldGutter: { control: { disable: true } },
autofocus: { control: { disable: true } },
onChange: { control: { disable: true } },
} as any,
}; };
WithTabs.argTypes = {
value: { control: { disable: true } },
mode: { control: { disable: true } },
lineWrapping: { control: { disable: true } },
readOnly: { control: { disable: true } },
theme: { control: { disable: true } },
foldGutter: { control: { disable: true } },
autofocus: { control: { disable: true } },
onChange: { control: { disable: true } },
} as any;

34
packages/redux-devtools-ui/src/Form/Form.stories.tsx
View File

@ -1,26 +1,28 @@
import React from 'react'; import React from 'react';
import { Story } from '@storybook/react'; import { Meta, StoryObj } from '@storybook/react';
import Form from './'; import Form from './';
import { schema, uiSchema, formData } from './schema'; import { schema, uiSchema, formData } from './schema';
import { Props as FormProps } from './Form';
export default { const meta: Meta = {
title: 'Form', title: 'Form',
component: Form, component: Form,
}; };
const Template: Story<FormProps<unknown>> = (args) => <Form {...args} />; export default meta;
export const Default = Template.bind({}); type Story = StoryObj<typeof Form>;
Default.args = {
formData, export const Default: Story = {
schema, args: {
uiSchema, formData,
submitText: 'Submit', schema,
}; uiSchema,
Default.argTypes = { submitText: 'Submit',
children: { control: { disable: true } }, },
primaryButton: { control: { disable: true } }, argTypes: {
noSubmit: { control: { disable: true } }, children: { control: { disable: true } },
widgets: { control: { disable: true } }, primaryButton: { control: { disable: true } },
noSubmit: { control: { disable: true } },
widgets: { control: { disable: true } },
},
}; };

35
packages/redux-devtools-ui/src/Notification/Notification.stories.tsx
View File

@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Story } from '@storybook/react'; import { Meta, StoryObj } from '@storybook/react';
import Notification from './'; import Notification from './';
import { NotificationProps } from './Notification';
const Container = styled.div` const Container = styled.div`
display: flex; display: flex;
@ -12,23 +11,27 @@ const Container = styled.div`
align-items: center; align-items: center;
`; `;
export default { const meta: Meta = {
title: 'Notification', title: 'Notification',
component: Notification, component: Notification,
}; };
const Template: Story<NotificationProps> = (args) => ( export default meta;
<Container>
<Notification {...args} />
</Container>
);
export const Default = Template.bind({}); type Story = StoryObj<typeof Notification>;
Default.args = {
type: 'warning', export const Default: Story = {
children: 'Hello Notification', render: (args) => (
}; <Container>
Default.argTypes = { <Notification {...args} />
onClose: { control: { disable: true } }, </Container>
theme: { control: { disable: true } }, ),
args: {
type: 'warning',
children: 'Hello Notification',
},
argTypes: {
onClose: { control: { disable: true } },
theme: { control: { disable: true } },
},
}; };

38
packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx
View File

@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Story } from '@storybook/react'; import { Meta, StoryObj } from '@storybook/react';
import SegmentedControl from './'; import SegmentedControl from './';
import { SegmentedControlProps } from './SegmentedControl';
const Container = styled.div` const Container = styled.div`
display: flex; display: flex;
@ -12,25 +11,28 @@ const Container = styled.div`
align-items: center; align-items: center;
`; `;
export default { const meta: Meta = {
title: 'SegmentedControl', title: 'SegmentedControl',
component: SegmentedControl, component: SegmentedControl,
}; };
// eslint-disable-next-line react/prop-types export default meta;
const Template: Story<SegmentedControlProps> = ({ values, ...args }) => (
<Container>
<SegmentedControl values={['Button1', 'Button2', 'Button3']} {...args} />
</Container>
);
export const Default = Template.bind({}); type Story = StoryObj<typeof SegmentedControl>;
Default.args = {
selected: 'Button1', export const Default: Story = {
disabled: false, render: ({ values, ...args }) => (
}; <Container>
Default.argTypes = { <SegmentedControl values={['Button1', 'Button2', 'Button3']} {...args} />
values: { control: { disable: true } }, </Container>
onClick: { control: { disable: true } }, ),
theme: { control: { disable: true } }, args: {
selected: 'Button1',
disabled: false,
},
argTypes: {
values: { control: { disable: true } },
onClick: { control: { disable: true } },
theme: { control: { disable: true } },
},
}; };

59
packages/redux-devtools-ui/src/Select/Select.stories.tsx
View File

@ -2,8 +2,7 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import Select from './'; import Select from './';
import { options } from './options'; import { options } from './options';
import { Story } from '@storybook/react'; import { Meta, StoryObj } from '@storybook/react';
import { SelectProps } from './Select';
const Container = styled.div` const Container = styled.div`
display: flex; display: flex;
@ -17,40 +16,38 @@ const Container = styled.div`
} }
`; `;
export default { const meta: Meta = {
title: 'Select', title: 'Select',
component: Select, component: Select,
}; };
type TemplateArgs = Omit< export default meta;
SelectProps<{ value: string; label: string }, boolean>,
'value'
> & { value: string };
// eslint-disable-next-line react/prop-types type Story = StoryObj<typeof Select>;
const Template: Story<TemplateArgs> = ({ value, ...args }) => (
<Container>
<Select
options={options}
value={options.filter((option) => option.value === value)}
{...args}
/>
</Container>
);
export const Default = Template.bind({}); export const Default: Story = {
Default.args = { render: ({ value, ...args }) => (
value: 'one', <Container>
maxMenuHeight: 300, <Select
isClearable: false, options={options}
isDisabled: false, value={options.filter((option) => option.value === value)}
isLoading: false, {...args}
isMulti: false, />
isSearchable: true, </Container>
menuPlacement: 'bottom', ),
}; args: {
Default.argTypes = { value: 'one',
onChange: { maxMenuHeight: 300,
action: 'selected', isClearable: false,
isDisabled: false,
isLoading: false,
isMulti: false,
isSearchable: true,
menuPlacement: 'bottom',
},
argTypes: {
onChange: {
action: 'selected',
},
}, },
}; };

45
packages/redux-devtools-ui/src/Slider/Slider.stories.tsx
View File

@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Story } from '@storybook/react'; import { Meta, StoryObj } from '@storybook/react';
import Slider from './'; import Slider from './';
import { SliderProps } from './Slider';
const Container = styled.div` const Container = styled.div`
display: flex; display: flex;
@ -12,28 +11,32 @@ const Container = styled.div`
align-items: center; align-items: center;
`; `;
export default { const meta: Meta = {
title: 'Slider', title: 'Slider',
component: Slider, component: Slider,
}; };
const Template: Story<SliderProps> = (args) => ( export default meta;
<Container>
<Slider {...args} />
</Container>
);
export const Default = Template.bind({}); type Story = StoryObj<typeof Slider>;
Default.args = {
value: 0, export const Default: Story = {
min: 0, render: (args) => (
max: 100, <Container>
label: 'Slider label', <Slider {...args} />
sublabel: '(sublabel}', </Container>
withValue: false, ),
disabled: false, args: {
}; value: 0,
Default.argTypes = { min: 0,
onChange: { control: { disable: true } }, max: 100,
theme: { control: { disable: true } }, label: 'Slider label',
sublabel: '(sublabel}',
withValue: false,
disabled: false,
},
argTypes: {
onChange: { control: { disable: true } },
theme: { control: { disable: true } },
},
}; };

70
packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Story } from '@storybook/react'; import { Meta, StoryObj } from '@storybook/react';
import Tabs from './'; import Tabs from './';
import { tabs, simple10Tabs } from './data'; import { tabs, simple10Tabs } from './data';
import { TabsProps } from './Tabs'; import { TabsProps } from './Tabs';
@ -13,41 +13,49 @@ const Container = styled.div`
align-items: center; align-items: center;
`; `;
export default { const meta: Meta = {
title: 'Tabs', title: 'Tabs',
component: Tabs, component: Tabs,
}; };
const Template: Story<TabsProps<object>> = (args) => ( export default meta;
<Container>
<Tabs {...args} />
</Container>
);
export const Default = Template.bind({}); type Story = StoryObj<typeof Tabs>;
Default.args = {
tabs: simple10Tabs, export const Default: Story = {
selected: '2', render: (args) => (
main: true, <Container>
collapsible: true, <Tabs {...args} />
position: 'left', </Container>
}; ),
Default.argTypes = { args: {
tabs: { control: { disable: true } }, tabs: simple10Tabs,
onClick: { control: { disable: true } }, selected: '2',
main: true,
collapsible: true,
position: 'left',
},
argTypes: {
tabs: { control: { disable: true } },
onClick: { control: { disable: true } },
},
}; };
export const WithContent = ( export const WithContext: StoryObj<TabsProps<{ selected: string }>> = {
Template as Story<TabsProps<{ selected: string }>> render: (args) => (
).bind({}); <Container>
WithContent.args = { <Tabs {...args} />
tabs, </Container>
selected: 'Tab2', ),
main: false, args: {
collapsible: false, tabs,
position: 'left', selected: 'Tab2',
}; main: false,
WithContent.argTypes = { collapsible: false,
tabs: { control: { disable: true } }, position: 'left',
onClick: { control: { disable: true } }, },
argTypes: {
tabs: { control: { disable: true } },
onClick: { control: { disable: true } },
},
}; };

558
packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx
View File

@ -1,6 +1,6 @@
import React, { ReactNode } from 'react'; import React, { ReactNode } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Story } from '@storybook/react'; import { Meta, StoryObj } from '@storybook/react';
import { MdPlayArrow } from 'react-icons/md'; import { MdPlayArrow } from 'react-icons/md';
import { MdFiberManualRecord } from 'react-icons/md'; import { MdFiberManualRecord } from 'react-icons/md';
import { MdKeyboardArrowLeft } from 'react-icons/md'; import { MdKeyboardArrowLeft } from 'react-icons/md';
@ -34,11 +34,13 @@ const SliderContainer = styled.div`
height: 80px; height: 80px;
`; `;
export default { const meta: Meta = {
title: 'Toolbar', title: 'Toolbar',
component: Toolbar, component: Toolbar,
}; };
export default meta;
interface TemplateArgs { interface TemplateArgs {
borderPosition: BorderPosition; borderPosition: BorderPosition;
title?: string; title?: string;
@ -48,78 +50,78 @@ interface TemplateArgs {
label: ReactNode; label: ReactNode;
} }
const Template: Story<TemplateArgs> = ({ export const Default: StoryObj<TemplateArgs> = {
// eslint-disable-next-line react/prop-types render: ({
borderPosition, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types borderPosition,
title, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types title,
tooltipPosition, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types tooltipPosition,
disabled, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types disabled,
onClick, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types onClick,
label, // eslint-disable-next-line react/prop-types
}) => ( label,
<Container> }) => (
<Toolbar borderPosition={borderPosition}> <Container>
<Button <Toolbar borderPosition={borderPosition}>
title={title} <Button
tooltipPosition={tooltipPosition} title={title}
disabled={disabled} tooltipPosition={tooltipPosition}
onClick={onClick} disabled={disabled}
> onClick={onClick}
{label} >
</Button> {label}
<Divider /> </Button>
<Button <Divider />
title={title} <Button
tooltipPosition={tooltipPosition} title={title}
disabled={disabled} tooltipPosition={tooltipPosition}
onClick={onClick} disabled={disabled}
> onClick={onClick}
<MdFiberManualRecord /> >
</Button> <MdFiberManualRecord />
<Divider /> </Button>
<Spacer /> <Divider />
<Select options={options} /> <Spacer />
</Toolbar> <Select options={options} />
</Container> </Toolbar>
); </Container>
),
export const Default = Template.bind({}); args: {
Default.args = { borderPosition: 'top',
borderPosition: 'top', title: 'Hello Tooltip',
title: 'Hello Tooltip', tooltipPosition: 'top',
tooltipPosition: 'top', disabled: false,
disabled: false, label: 'Hello Button',
label: 'Hello Button',
};
Default.argTypes = {
borderPosition: {
control: {
type: 'select',
options: ['top', 'bottom'],
},
}, },
tooltipPosition: { argTypes: {
control: { borderPosition: {
type: 'select', control: {
options: [ type: 'select',
'top', options: ['top', 'bottom'],
'bottom', },
'left', },
'right', tooltipPosition: {
'bottom-left', control: {
'bottom-right', type: 'select',
'top-left', options: [
'top-right', 'top',
], 'bottom',
'left',
'right',
'bottom-left',
'bottom-right',
'top-left',
'top-right',
],
},
},
onClick: {
action: 'button clicked',
}, },
},
onClick: {
action: 'button clicked',
}, },
}; };
@ -136,96 +138,96 @@ interface TabsTemplateArgs {
position: Position; position: Position;
} }
const TabsTemplate: Story<TabsTemplateArgs> = ({ export const Tabs: StoryObj<TabsTemplateArgs> = {
// eslint-disable-next-line react/prop-types render: ({
title, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types title,
tooltipPosition, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types tooltipPosition,
disabled, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types disabled,
buttonOnClick, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types buttonOnClick,
label, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types label,
selected, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types selected,
main, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types main,
tabsOnClick, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types tabsOnClick,
collapsible, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types collapsible,
position, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types position,
}) => ( // eslint-disable-next-line react/prop-types
<Container> }) => (
<Toolbar> <Container>
<Button <Toolbar>
title={title} <Button
tooltipPosition={tooltipPosition} title={title}
disabled={disabled} tooltipPosition={tooltipPosition}
onClick={buttonOnClick} disabled={disabled}
> onClick={buttonOnClick}
{label} >
</Button> {label}
<TabsComponent </Button>
tabs={simple10Tabs} <TabsComponent
selected={selected} tabs={simple10Tabs}
main={main} selected={selected}
onClick={tabsOnClick} main={main}
collapsible={collapsible} onClick={tabsOnClick}
position={position} collapsible={collapsible}
/> position={position}
<Button />
title={title} <Button
tooltipPosition={tooltipPosition} title={title}
disabled={disabled} tooltipPosition={tooltipPosition}
onClick={buttonOnClick} disabled={disabled}
> onClick={buttonOnClick}
{label} >
</Button> {label}
</Toolbar> </Button>
</Container> </Toolbar>
); </Container>
),
export const Tabs = TabsTemplate.bind({}); args: {
Tabs.args = { title: 'Hello Tooltip',
title: 'Hello Tooltip', tooltipPosition: 'top',
tooltipPosition: 'top', disabled: false,
disabled: false, label: 'Hello Button',
label: 'Hello Button', selected: '2',
selected: '2', main: true,
main: true, collapsible: true,
collapsible: true, position: 'center',
position: 'center', },
}; argTypes: {
Tabs.argTypes = { tooltipPosition: {
tooltipPosition: { control: {
control: { type: 'select',
type: 'select', options: [
options: [ 'top',
'top', 'bottom',
'bottom', 'left',
'left', 'right',
'right', 'bottom-left',
'bottom-left', 'bottom-right',
'bottom-right', 'top-left',
'top-left', 'top-right',
'top-right', ],
], },
}, },
}, buttonOnClick: {
buttonOnClick: { action: 'button clicked',
action: 'button clicked', },
}, tabsOnClick: {
tabsOnClick: { action: 'tab selected',
action: 'tab selected', },
}, position: {
position: { control: {
control: { type: 'select',
type: 'select', options: ['left', 'right', 'center'],
options: ['left', 'right', 'center'], },
}, },
}, },
}; };
@ -246,123 +248,123 @@ interface WithSliderTemplateArgs {
segmentedControlOnClick: (value: string) => void; segmentedControlOnClick: (value: string) => void;
} }
const WithSliderTemplate: Story<WithSliderTemplateArgs> = ({ export const WithSlider: StoryObj<WithSliderTemplateArgs> = {
// eslint-disable-next-line react/prop-types render: ({
title, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types title,
tooltipPosition, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types tooltipPosition,
playOnClick, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types playOnClick,
value, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types value,
min, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types min,
max, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types max,
label, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types label,
withValue, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types withValue,
onChange, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types onChange,
previousStateOnClick, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types previousStateOnClick,
nextStateOnClick, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types nextStateOnClick,
selected, // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types selected,
segmentedControlOnClick, // eslint-disable-next-line react/prop-types
}) => ( segmentedControlOnClick,
<Container> }) => (
<SliderContainer> <Container>
<Toolbar noBorder fullHeight compact> <SliderContainer>
<Button <Toolbar noBorder fullHeight compact>
title={title} <Button
tooltipPosition={tooltipPosition} title={title}
onClick={playOnClick} tooltipPosition={tooltipPosition}
> onClick={playOnClick}
<MdPlayArrow /> >
</Button> <MdPlayArrow />
<Slider </Button>
value={value} <Slider
min={min} value={value}
max={max} min={min}
label={label} max={max}
withValue={withValue} label={label}
onChange={onChange} withValue={withValue}
/> onChange={onChange}
<Button />
title="Previous state" <Button
tooltipPosition={tooltipPosition} title="Previous state"
disabled tooltipPosition={tooltipPosition}
onClick={previousStateOnClick} disabled
> onClick={previousStateOnClick}
<MdKeyboardArrowLeft /> >
</Button> <MdKeyboardArrowLeft />
<Button </Button>
title="Next state" <Button
tooltipPosition={tooltipPosition} title="Next state"
onClick={nextStateOnClick} tooltipPosition={tooltipPosition}
> onClick={nextStateOnClick}
<MdKeyboardArrowRight /> >
</Button> <MdKeyboardArrowRight />
<SegmentedControl </Button>
values={['live', '1x']} <SegmentedControl
selected={selected} values={['live', '1x']}
onClick={segmentedControlOnClick} selected={selected}
/> onClick={segmentedControlOnClick}
</Toolbar> />
</SliderContainer> </Toolbar>
</Container> </SliderContainer>
); </Container>
),
export const WithSlider = WithSliderTemplate.bind({}); args: {
WithSlider.args = { title: 'Play',
title: 'Play', tooltipPosition: 'top',
tooltipPosition: 'top', value: 80,
value: 80, min: 0,
min: 0, max: 100,
max: 100, label: 'Slider label',
label: 'Slider label', withValue: false,
withValue: false, selected: 'live',
selected: 'live', },
}; argTypes: {
WithSlider.argTypes = { tooltipPosition: {
tooltipPosition: { control: {
control: { type: 'select',
type: 'select', options: [
options: [ 'top',
'top', 'bottom',
'bottom', 'left',
'left', 'right',
'right', 'bottom-left',
'bottom-left', 'bottom-right',
'bottom-right', 'top-left',
'top-left', 'top-right',
'top-right', ],
], },
},
playOnClick: {
action: 'button clicked',
},
onChange: {
action: 'slider changed',
},
previousStateOnClick: {
action: 'previous state clicked',
},
nextStateOnClick: {
action: 'next state clicked',
},
selected: {
control: {
type: 'select',
options: ['live', '1x'],
},
},
segmentedControlOnClick: {
action: 'button selected',
}, },
}, },
playOnClick: {
action: 'button clicked',
},
onChange: {
action: 'slider changed',
},
previousStateOnClick: {
action: 'previous state clicked',
},
nextStateOnClick: {
action: 'next state clicked',
},
selected: {
control: {
type: 'select',
options: ['live', '1x'],
},
},
segmentedControlOnClick: {
action: 'button selected',
},
}; };

6487
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff