feat(component): enhance storybook preview (#943)

This commit is contained in:
Himself65 2023-02-10 01:14:10 -06:00 committed by GitHub
parent a6a8493c35
commit 6057c5637c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 19 deletions

View File

@ -1,3 +1,5 @@
import { getLightTheme, ThemeProvider } from '../src';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
@ -7,3 +9,15 @@ export const parameters = {
},
},
};
const lightTheme = getLightTheme('page');
export const decorators = [
Story => {
return (
<ThemeProvider theme={lightTheme}>
<Story />
</ThemeProvider>
);
},
];

View File

@ -1,19 +1,25 @@
import React, { useMemo } from 'react';
/* deepscan-disable USELESS_ARROW_FUNC_BIND */
import React from 'react';
import { Meta, Story } from '@storybook/react';
import { Breadcrumbs, getLightTheme, ThemeProvider } from '..';
import { Breadcrumbs } from '..';
import { Link, Typography } from '@mui/material';
export default {
title: 'AFFiNE/Breadcrumbs',
component: Breadcrumbs,
} as Meta;
const Template: Story = args => (
<ThemeProvider theme={useMemo(() => getLightTheme('page'), [])}>
<Breadcrumbs {...args} />
</ThemeProvider>
);
const Template: Story = args => <Breadcrumbs {...args} />;
export const Primary = Template.bind({});
export const Primary = Template.bind(undefined);
Primary.args = {
children: [<span>1</span>, <span>2</span>, <span>3</span>],
children: [
<Link underline="hover" color="inherit" href="/">
AFFiNE
</Link>,
<Link underline="hover" color="inherit" href="/Docs/">
Docs
</Link>,
<Typography color="text.primary">Introduction</Typography>,
],
};

View File

@ -1,20 +1,46 @@
import React, { useMemo } from 'react';
/* deepscan-disable USELESS_ARROW_FUNC_BIND */
import React from 'react';
import { Meta, Story } from '@storybook/react';
import { Button, getLightTheme, ThemeProvider } from '..';
import { Button } from '..';
import { ButtonProps } from '../ui/button/interface';
export default {
title: 'AFFiNE/Button',
component: Button,
} as Meta;
argTypes: {
hoverBackground: { control: 'color' },
hoverColor: { control: 'color' },
},
} as Meta<ButtonProps>;
const Template: Story = args => (
<ThemeProvider theme={useMemo(() => getLightTheme('page'), [])}>
<Button {...args} />
</ThemeProvider>
);
const Template: Story<ButtonProps> = args => <Button {...args} />;
export const Primary = Template.bind({});
export const Primary = Template.bind(undefined);
Primary.args = {
type: 'primary',
children: 'This is a button',
children: 'This is a primary button',
};
export const Default = Template.bind(undefined);
Default.args = {
type: 'default',
children: 'This is a default button',
};
export const Light = Template.bind(undefined);
Light.args = {
type: 'light',
children: 'This is a light button',
};
export const Warning = Template.bind(undefined);
Warning.args = {
type: 'warning',
children: 'This is a warning button',
};
export const Danger = Template.bind(undefined);
Danger.args = {
type: 'danger',
children: 'This is a danger button',
};