GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 06:41:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

Addon-controls: Add warning to controls tab on no-args story

Browse Source
This commit is contained in:
Michael Shilman 2020-05-30 01:48:59 +08:00
parent 14d6699c71
commit 8d27e33008
2 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
addons/controls/package.json
View File

@ -34,6 +34,7 @@
"@storybook/api": "6.0.0-beta.18",
"@storybook/client-api": "6.0.0-beta.18",
"@storybook/components": "6.0.0-beta.18",
"@storybook/theming": "6.0.0-beta.18",
"core-js": "^3.0.1"
},
"peerDependencies": {

29
addons/controls/src/components/ControlsPanel.tsx
View File

@ -1,14 +1,39 @@
import React, { FC } from 'react';
import { ArgsTable } from '@storybook/components';
import { styled } from '@storybook/theming';
import { ArgsTable, Link } from '@storybook/components';
import { useArgs, useArgTypes, useParameter } from '@storybook/api';
interface ControlsParameters {
expanded?: boolean;
}
const NoControlsWrapper = styled.div(({ theme }) => ({
background: theme.background.warning,
padding: 20,
}));
const NoControlsWarning = () => (
<NoControlsWrapper>
No controls found for this component.&nbsp;
<Link
href="https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#writing-stories"
target="_blank"
cancel={false}
>
Learn how to add controls »
</Link>
</NoControlsWrapper>
);
export const ControlsPanel: FC = () => {
const [args, updateArgs] = useArgs();
const rows = useArgTypes();
const { expanded } = useParameter<ControlsParameters>('controls', {});
return <ArgsTable {...{ compact: !expanded, rows, args, updateArgs }} />;
const hasControls = Object.values(rows).filter((argType) => argType?.control?.type).length > 0;
return (
<>
{hasControls ? null : <NoControlsWarning />}
<ArgsTable {...{ compact: !expanded, rows, args, updateArgs }} />
</>
);
};