Merge pull request #6500 from gaetanmaisse/ts-migration/components-pa…

…rt-2 Migrate @storybook/components to TS - Part II
storybookjs · Apr 16, 2019 · 2887028 · 2887028
2 parents fa03f8c + bb78d74
commit 2887028
Show file tree

Hide file tree

Showing 41 changed files with 94 additions and 131 deletions.
diff --git a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
@@ -63,12 +63,12 @@ exports[`A11YPanel should render loader when it's running 1`] = `
     <div
       className="emotion-4"
     >
-      <Styled(Icon)
+      <Styled(Icons)
         icon="sync"
         inline={true}
         status="running"
       >
-        <Icon
+        <Icons
           className="emotion-2"
           icon="sync"
           inline={true}
@@ -94,8 +94,8 @@ exports[`A11YPanel should render loader when it's running 1`] = `
               </Styled(path)>
             </svg>
           </Svg>
-        </Icon>
-      </Styled(Icon)>
+        </Icons>
+      </Styled(Icons)>
        Please wait while a11y scan is running ...
     </div>
   </Component>

diff --git a/addons/a11y/src/typings.d.ts b/addons/a11y/src/typings.d.ts
@@ -1,3 +1 @@
-// TODO: following packages need definition files or a TS migration
-declare module '@storybook/components';
 declare module 'global';
diff --git a/addons/actions/src/typings.d.ts b/addons/actions/src/typings.d.ts
@@ -1,4 +1,3 @@
 // TODO: following packages need definition files or a TS migration
-declare module '@storybook/components';
 declare module 'global';
 declare module 'react-inspector';
diff --git a/addons/backgrounds/src/typings.d.ts b/addons/backgrounds/src/typings.d.ts
diff --git a/addons/cssresources/src/typings.d.ts b/addons/cssresources/src/typings.d.ts
@@ -1,3 +1,2 @@
 // TODO: following packages need definition files or a TS migration
-declare module '@storybook/components';
 declare module 'global';
diff --git a/addons/jest/src/typings.d.ts b/addons/jest/src/typings.d.ts
@@ -1,4 +1,2 @@
 // TODO: following packages need definition files or a TS migration
-
 declare module 'global';
-declare module '@storybook/components';
diff --git a/addons/notes/src/typings.d.ts b/addons/notes/src/typings.d.ts
@@ -1,6 +1,3 @@
-// todo the following packages need definition files or a TS migration
-declare module '@storybook/components';
-
 // There are no types for markdown-to-jsx
 declare module 'markdown-to-jsx' {
   const Markdown: any;

diff --git a/lib/components/package.json b/lib/components/package.json
@@ -21,10 +21,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.28",
     "@storybook/client-logger": "5.1.0-alpha.28",
-    "@storybook/core-events": "5.1.0-alpha.28",
-    "@storybook/router": "5.1.0-alpha.28",
     "@storybook/theming": "5.1.0-alpha.28",
     "core-js": "^2.6.5",
     "global": "^4.3.2",
@@ -45,8 +42,6 @@
     "simplebar-react": "^0.1.5"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.1.0-alpha.28",
-    "@storybook/react": "5.1.0-alpha.28",
     "@types/js-beautify": "^1.8.0",
     "@types/react-syntax-highlighter": "^10.1.0",
     "@types/react-textarea-autosize": "^4.3.3",

diff --git a/lib/components/src/Badge/Badge.stories.tsx b/lib/components/src/Badge/Badge.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import Badge from './Badge';
+import { Badge } from './Badge';
 
 storiesOf('Basics|Badge', module).add('all badges', () => (
   <div>

diff --git a/lib/components/src/Badge/Badge.tsx b/lib/components/src/Badge/Badge.tsx
@@ -49,8 +49,6 @@ export interface BadgeProps {
   status: 'positive' | 'negative' | 'neutral';
 }
 
-const Badge: FunctionComponent<BadgeProps> = ({ ...props }) => {
+export const Badge: FunctionComponent<BadgeProps> = ({ ...props }) => {
   return <BadgeWrapper {...props} />;
 };
-
-export default Badge;
diff --git a/lib/components/src/Button/Button.stories.tsx b/lib/components/src/Button/Button.stories.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import Button from './Button';
-import Icon from '../icon/icon';
+import { Button } from './Button';
+import { Icons } from '../icon/icon';
 
-import Form from '../form/index';
+import { Form } from '../form/index';
 
 const { Button: FormButton } = Form;
 
@@ -16,7 +16,7 @@ storiesOf('Basics|Button', module).add('all buttons', () => (
     <Button primary>Primary</Button>
     <Button secondary>Secondary</Button>
     <Button outline containsIcon>
-      <Icon icon="link" />
+      <Icons icon="link" />
     </Button>
     <br />
     <Button outline>Outline</Button>
@@ -43,10 +43,10 @@ storiesOf('Basics|Button', module).add('all buttons', () => (
       Disabled
     </Button>
     <Button outline small containsIcon>
-      <Icon icon="link" />
+      <Icons icon="link" />
     </Button>
     <Button outline small>
-      <Icon icon="link" />
+      <Icons icon="link" />
       Link
     </Button>
   </div>

diff --git a/lib/components/src/Button/Button.tsx b/lib/components/src/Button/Button.tsx
@@ -233,7 +233,7 @@ interface ButtonProps {
   containsIcon?: boolean;
 }
 
-const Button: FunctionComponent<ButtonProps> = ({ isLink, children, ...props }) => {
+export const Button: FunctionComponent<ButtonProps> = ({ isLink, children, ...props }) => {
   if (isLink) {
     return <ButtonLink {...props}>{children}</ButtonLink>;
   }
@@ -243,5 +243,3 @@ const Button: FunctionComponent<ButtonProps> = ({ isLink, children, ...props })
 Button.defaultProps = {
   isLink: false,
 };
-
-export default Button;
diff --git a/lib/components/src/form/field/field.tsx b/lib/components/src/form/field/field.tsx
@@ -26,7 +26,7 @@ export interface FieldProps {
   label?: ReactNode;
 }
 
-const Field: FunctionComponent<FieldProps> = ({ label, children }) => (
+export const Field: FunctionComponent<FieldProps> = ({ label, children }) => (
   <Wrapper>
     {label ? (
       <Label>
@@ -40,5 +40,3 @@ const Field: FunctionComponent<FieldProps> = ({ label, children }) => (
 Field.defaultProps = {
   label: undefined,
 };
-
-export default Field;
diff --git a/lib/components/src/form/form.stories.tsx b/lib/components/src/form/form.stories.tsx
@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import { Input, Button, Select, Textarea } from './input/input';
-import Field from './field/field';
+import { Field } from './field/field';
 import { Spaced } from '../spaced/Spaced';
 
 const Flexed = styled.div({ display: 'flex' });

diff --git a/lib/components/src/form/index.tsx b/lib/components/src/form/index.tsx
@@ -1,8 +1,8 @@
 import { styled } from '@storybook/theming';
-import Field from './field/field';
+import { Field } from './field/field';
 import { Input, Select, Textarea, Button } from './input/input';
 
-const Form = Object.assign(
+export const Form = Object.assign(
   styled.form({
     boxSizing: 'border-box',
     width: '100%',
@@ -15,5 +15,3 @@ const Form = Object.assign(
     Button,
   }
 );
-
-export default Form;
diff --git a/lib/components/src/form/input/input.tsx b/lib/components/src/form/input/input.tsx
@@ -3,7 +3,7 @@ import { withProps } from 'recompose';
 
 import TextareaAutoResize from 'react-textarea-autosize';
 
-import StyledButton from '../../Button/Button';
+import { Button as StyledButton } from '../../Button/Button';
 
 const styleResets = {
   // resets

diff --git a/lib/components/src/icon/icon.stories.tsx b/lib/components/src/icon/icon.stories.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import { storiesOf } from '@storybook/react';
 
-import Icon from './icon';
-import icons, { IconKey } from './icons';
+import { Icons } from './icon';
+import { icons, IconKey } from './icons';
 
 const Meta = styled.div({
   color: '#333',
@@ -61,7 +61,7 @@ storiesOf('Basics|Icon', module)
     <List>
       {list.map(key => (
         <Item key={key}>
-          <Icon icon={key} /> <Meta>{key}</Meta>
+          <Icons icon={key} /> <Meta>{key}</Meta>
         </Item>
       ))}
     </List>
@@ -70,7 +70,7 @@ storiesOf('Basics|Icon', module)
     <List>
       {list.map(key => (
         <Item minimal key={key}>
-          <Icon icon={key} />
+          <Icons icon={key} />
         </Item>
       ))}
     </List>

diff --git a/lib/components/src/icon/icon.tsx b/lib/components/src/icon/icon.tsx
@@ -8,17 +8,15 @@ const Path = styled.path({
   fill: 'currentColor',
 });
 
-export interface IconProps {
+export interface IconsProps {
   icon: IconKey;
 }
 
 // TODO: if we can resize the 1024 to 20, we can remove the size attributes
-const Icon: FunctionComponent<IconProps> = ({ icon, ...props }) => {
+export const Icons: FunctionComponent<IconsProps> = ({ icon, ...props }) => {
   return (
     <Svg viewBox="0 0 1024 1024" {...props}>
       <Path d={icons[icon]} />
     </Svg>
   );
 };
-
-export default Icon;
diff --git a/lib/components/src/icon/icons.tsx b/lib/components/src/icon/icons.tsx
@@ -1,5 +1,5 @@
 // Icon paths
-const icons = {
+export const icons = {
   mobile:
     'M648 64h-272c-66.274 0-120 53.726-120 120v656c0 66.274 53.726 120 120 120h272c66.274 0 120-53.726 120-120v-656c0-66.274-53.726-120-120-120zM376 144h272c22.056 0 40 17.944 40 40v495.968h-352v-495.968c0-22.056 17.946-40 40-40zM648 880h-272c-22.054 0-40-17.944-40-40v-80.032h352v80.032c0 22.056-17.944 40-40 40zM544.034 819.962c0 17.676-14.33 32.002-32.004 32.002-17.67 0-32-14.326-32-32.002 0-17.672 14.33-31.998 32-31.998 17.674-0 32.004 14.326 32.004 31.998z',
   watch:

diff --git a/lib/components/src/index.ts b/lib/components/src/index.ts
@@ -1,9 +1,9 @@
-export { default as Badge } from './Badge/Badge';
+export { Badge } from './Badge/Badge';
 
 // Typography
-export { default as Link } from './typography/link/link';
-export { default as DocumentFormatting } from './typography/DocumentFormatting';
-export { default as SyntaxHighlighter } from './syntaxhighlighter/syntaxhighlighter';
+export { Link } from './typography/link/link';
+export { DocumentFormatting } from './typography/DocumentFormatting';
+export { SyntaxHighlighter } from './syntaxhighlighter/syntaxhighlighter';
 
 // UI
 export { ActionBar } from './ActionBar/ActionBar';
@@ -12,14 +12,14 @@ export { Placeholder } from './placeholder/placeholder';
 export { ScrollArea } from './ScrollArea/ScrollArea';
 
 // Forms
-export { default as Button } from './Button/Button';
-export { default as Form } from './form/index';
+export { Button } from './Button/Button';
+export { Form } from './form/index';
 
 // Tooltips
-export { default as WithTooltip } from './tooltip/WithTooltip';
-export { default as TooltipMessage } from './tooltip/TooltipMessage';
-export { default as TooltipNote } from './tooltip/TooltipNote';
-export { default as TooltipLinkList } from './tooltip/TooltipLinkList';
+export { WithTooltip } from './tooltip/WithTooltip';
+export { TooltipMessage } from './tooltip/TooltipMessage';
+export { TooltipNote } from './tooltip/TooltipNote';
+export { TooltipLinkList } from './tooltip/TooltipLinkList';
 
 // Toolbar and subcomponents
 export { Tabs, TabsState, TabBar, TabWrapper } from './tabs/tabs';
@@ -28,6 +28,6 @@ export { Separator, interleaveSeparators } from './bar/separator';
 export { Bar, FlexBar } from './bar/bar';
 
 // Graphics
-export { default as Icons } from './icon/icon';
+export { Icons } from './icon/icon';
 export { StorybookLogo } from './brand/StorybookLogo';
 export { StorybookIcon } from './brand/StorybookIcon';
diff --git a/lib/components/src/placeholder/placeholder.stories.tsx b/lib/components/src/placeholder/placeholder.stories.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 
 import { Placeholder } from './placeholder';
-import Link from '../typography/link/link';
+import { Link } from '../typography/link/link';
 
 export default {
   Component: Placeholder,

diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import SyntaxHighlighter from './syntaxhighlighter';
+import { SyntaxHighlighter } from './syntaxhighlighter';
 
 storiesOf('Basics|SyntaxHighlighter', module)
   .add('bash', () => (

diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
@@ -8,7 +8,7 @@ import bash from 'react-syntax-highlighter/languages/prism/bash';
 import css from 'react-syntax-highlighter/languages/prism/css';
 import html from 'react-syntax-highlighter/languages/prism/markup';
 
-import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
+import ReactSyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
 
 import { js as beautify } from 'js-beautify';
 import { ActionBar } from '../ActionBar/ActionBar';
@@ -76,7 +76,7 @@ const Code = styled.code({
   opacity: 1,
 });
 
-export interface CopyableCodeProps {
+export interface SyntaxHighlighterProps {
   language: string;
   copyable?: boolean;
   bordered?: boolean;
@@ -85,15 +85,17 @@ export interface CopyableCodeProps {
   className?: string;
 }
 
-export interface CopyableCodeState {
+export interface SyntaxHighlighterState {
   copied: boolean;
 }
 
-export default class CopyableCode extends Component<
-  CopyableCodeProps & SyntaxHighlighterProps,
-  CopyableCodeState
+type ReactSyntaxHighlighterProps = React.ComponentProps<typeof ReactSyntaxHighlighter>;
+
+export class SyntaxHighlighter extends Component<
+  SyntaxHighlighterProps & ReactSyntaxHighlighterProps,
+  SyntaxHighlighterState
 > {
-  static defaultProps: CopyableCodeProps = {
+  static defaultProps: SyntaxHighlighterProps = {
     language: null,
     copyable: false,
     bordered: false,
@@ -159,7 +161,7 @@ export default class CopyableCode extends Component<
     return children ? (
       <Wrapper bordered={bordered} padded={padded} className={className}>
         <Scroller>
-          <SyntaxHighlighter
+          <ReactSyntaxHighlighter
             padded={padded || bordered}
             language={language}
             useInlineStyles={false}
@@ -171,7 +173,7 @@ export default class CopyableCode extends Component<
             {format
               ? this.formatCode(language, (children as string).trim())
               : (children as string).trim()}
-          </SyntaxHighlighter>
+          </ReactSyntaxHighlighter>
         </Scroller>
         {copyable ? (
           <ActionBar actionItems={[{ title: copied ? 'Copied' : 'Copy', onClick: this.onClick }]} />

diff --git a/lib/components/src/tooltip/ListItem.stories.tsx b/lib/components/src/tooltip/ListItem.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import ListItem from './ListItem';
 
-import Icons from '../icon/icon';
+import { Icons } from '../icon/icon';
 
 storiesOf('basics|Tooltip/ListItem', module)
   .add('all', () => (

diff --git a/lib/components/src/tooltip/Tooltip.stories.tsx b/lib/components/src/tooltip/Tooltip.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { styled } from '@storybook/theming';
-import Tooltip from './Tooltip';
+import { Tooltip } from './Tooltip';
 
 // Popper would position the tooltip absolutely. We just need to make sure we are pos:rel
 const mockPopperProps = { style: { position: 'relative', top: '20px', left: '20px' } };

diff --git a/lib/components/src/tooltip/Tooltip.tsx b/lib/components/src/tooltip/Tooltip.tsx
@@ -119,7 +119,7 @@ export interface TooltipProps {
   color?: keyof Color;
 }
 
-const Tooltip: FunctionComponent<TooltipProps> = ({
+export const Tooltip: FunctionComponent<TooltipProps> = ({
   placement,
   hasChrome,
   children,
@@ -145,5 +145,3 @@ Tooltip.defaultProps = {
   placement: 'top',
   arrowProps: {},
 };
-
-export default Tooltip;