CLI: Fix typings in CRA template

This commit is contained in:
Michael Shilman 2020-08-05 21:15:50 +08:00
parent 25146ff859
commit 040ab45bc6
7 changed files with 71 additions and 14 deletions

View File

@ -1,4 +1,5 @@
import React from 'react';
import { Story, Meta } from '@storybook/react/csf';
import { Button, ButtonProps } from './Button';
@ -8,9 +9,9 @@ export default {
argTypes: {
backgroundColor: { control: 'color' },
},
};
} as Meta;
const Template = (args: ButtonProps) => <Button {...args} />;
const Template: Story<ButtonProps> = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {

View File

@ -39,7 +39,7 @@ export const Button: React.FC<ButtonProps> = ({
<button
type="button"
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
style={backgroundColor && { backgroundColor }}
style={{ backgroundColor }}
{...props}
>
{label}

View File

@ -1,13 +1,14 @@
import React from 'react';
import { Story, Meta } from '@storybook/react/csf';
import { Header, HeaderProps } from './Header';
export default {
title: 'Example/Header',
component: Header,
};
} as Meta;
const Template = (args: HeaderProps) => <Header {...args} />;
const Template: Story<HeaderProps> = (args) => <Header {...args} />;
export const LoggedIn = Template.bind({});
LoggedIn.args = {

View File

@ -5,9 +5,9 @@ import './header.css';
export interface HeaderProps {
user?: {};
onLogin: () => void;
onLogout: () => void;
onCreateAccount: () => void;
onLogin?: () => void;
onLogout?: () => void;
onCreateAccount?: () => void;
}
export const Header: React.FC<HeaderProps> = ({ user, onLogin, onLogout, onCreateAccount }) => (

View File

@ -1,4 +1,5 @@
import React from 'react';
import { Story, Meta } from '@storybook/react/csf';
import { Page, PageProps } from './Page';
import * as HeaderStories from './Header.stories';
@ -6,9 +7,9 @@ import * as HeaderStories from './Header.stories';
export default {
title: 'Example/Page',
component: Page,
};
} as Meta;
const Template = (args: PageProps) => <Page {...args} />;
const Template: Story<PageProps> = (args) => <Page {...args} />;
export const LoggedIn = Template.bind({});
LoggedIn.args = {

View File

@ -5,9 +5,9 @@ import './page.css';
export interface PageProps {
user?: {};
onLogin: () => void;
onLogout: () => void;
onCreateAccount: () => void;
onLogin?: () => void;
onLogout?: () => void;
onCreateAccount?: () => void;
}
export const Page: React.FC<PageProps> = ({ user, onLogin, onLogout, onCreateAccount }) => (

View File

@ -1 +1,55 @@
{}
{
"@storybook/addon-a11y": "6.0.0-rc.26",
"@storybook/addon-actions": "6.0.0-rc.26",
"@storybook/addon-backgrounds": "6.0.0-rc.26",
"@storybook/addon-controls": "6.0.0-rc.26",
"@storybook/addon-cssresources": "6.0.0-rc.26",
"@storybook/addon-design-assets": "6.0.0-rc.26",
"@storybook/addon-docs": "6.0.0-rc.26",
"@storybook/addon-essentials": "6.0.0-rc.26",
"@storybook/addon-events": "6.0.0-rc.26",
"@storybook/addon-google-analytics": "6.0.0-rc.26",
"@storybook/addon-graphql": "6.0.0-rc.26",
"@storybook/addon-jest": "6.0.0-rc.26",
"@storybook/addon-knobs": "6.0.0-rc.26",
"@storybook/addon-links": "6.0.0-rc.26",
"@storybook/addon-queryparams": "6.0.0-rc.26",
"@storybook/addon-storyshots": "6.0.0-rc.26",
"@storybook/addon-storyshots-puppeteer": "6.0.0-rc.26",
"@storybook/addon-storysource": "6.0.0-rc.26",
"@storybook/addon-toolbars": "6.0.0-rc.26",
"@storybook/addon-viewport": "6.0.0-rc.26",
"@storybook/addons": "6.0.0-rc.26",
"@storybook/angular": "6.0.0-rc.26",
"@storybook/api": "6.0.0-rc.26",
"@storybook/aurelia": "6.0.0-rc.26",
"@storybook/channel-postmessage": "6.0.0-rc.26",
"@storybook/channel-websocket": "6.0.0-rc.26",
"@storybook/channels": "6.0.0-rc.26",
"@storybook/cli": "6.0.0-rc.26",
"@storybook/client-api": "6.0.0-rc.26",
"@storybook/client-logger": "6.0.0-rc.26",
"@storybook/codemod": "6.0.0-rc.26",
"@storybook/components": "6.0.0-rc.26",
"@storybook/core": "6.0.0-rc.26",
"@storybook/core-events": "6.0.0-rc.26",
"@storybook/ember": "6.0.0-rc.26",
"@storybook/html": "6.0.0-rc.26",
"@storybook/marionette": "6.0.0-rc.26",
"@storybook/marko": "6.0.0-rc.26",
"@storybook/mithril": "6.0.0-rc.26",
"@storybook/node-logger": "6.0.0-rc.26",
"@storybook/postinstall": "6.0.0-rc.26",
"@storybook/preact": "6.0.0-rc.26",
"@storybook/rax": "6.0.0-rc.26",
"@storybook/react": "6.0.0-rc.26",
"@storybook/riot": "6.0.0-rc.26",
"@storybook/router": "6.0.0-rc.26",
"@storybook/server": "6.0.0-rc.26",
"@storybook/source-loader": "6.0.0-rc.26",
"@storybook/svelte": "6.0.0-rc.26",
"@storybook/theming": "6.0.0-rc.26",
"@storybook/ui": "6.0.0-rc.26",
"@storybook/vue": "6.0.0-rc.26",
"@storybook/web-components": "6.0.0-rc.26"
}