fixing the build fail

src/DateTimeRangePicker/DatePicker/Header/__tests__/Header.test.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import { shallow } from 'enzyme'
+ import React from 'react'
+ import { shallow } from 'enzyme'
 
-import Header from '../Header'
-import moment from 'moment'
+ import Header from '../Header'
+ import moment from 'moment'
 
-describe('Date/time range picker header', () => {
+ describe('Date/time range picker header', () => {
     it('should render correctly', () => {
         const component = shallow(
             <Header date={moment('2019-10-15 18:23:15', 'YYYY-MM-DD HH:mm:ss')}

src/stories/Button.stories.tsx

@@ -1,41 +1,41 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
 
-import { Button } from './Button';
+import { Button } from './Button'
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
+const componentMeta: ComponentMeta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as ComponentMeta<typeof Button>;
+    backgroundColor: { control: 'color' }
+  }
+}
+export default componentMeta
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
 
-export const Primary = Template.bind({});
+export const Primary = Template.bind({})
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   primary: true,
-  label: 'Button',
-};
+  label: 'Button'
+}
 
-export const Secondary = Template.bind({});
+export const Secondary = Template.bind({})
 Secondary.args = {
-  label: 'Button',
-};
+  label: 'Button'
+}
 
-export const Large = Template.bind({});
+export const Large = Template.bind({})
 Large.args = {
   size: 'large',
-  label: 'Button',
-};
+  label: 'Button'
+}
 
-export const Small = Template.bind({});
+export const Small = Template.bind({})
 Small.args = {
   size: 'small',
-  label: 'Button',
-};
+  label: 'Button'
+}

src/stories/Button.tsx

@@ -1,27 +1,27 @@
-import React from 'react';
-import './button.css';
+import React from 'react'
+import './button.css'
 
 interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
    */
-  primary?: boolean;
+  primary?: boolean
   /**
    * What background color to use
    */
-  backgroundColor?: string;
+  backgroundColor?: string
   /**
    * How large should the button be?
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large'
   /**
    * Button contents
    */
-  label: string;
+  label: string
   /**
    * Optional click handler
    */
-  onClick?: () => void;
+  onClick?: () => void
 }
 
 /**
@@ -34,7 +34,7 @@ export const Button = ({
   label,
   ...props
 }: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'
   return (
     <button
       type="button"
@@ -44,5 +44,5 @@ export const Button = ({
     >
       {label}
     </button>
-  );
-};
+  )
+}

src/stories/Header.stories.tsx

@@ -1,25 +1,26 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
 
-import { Header } from './Header';
+import { Header } from './Header'
 
-export default {
+const componentMeta: ComponentMeta<typeof Header> = {
   title: 'Example/Header',
   component: Header,
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
-  },
-} as ComponentMeta<typeof Header>;
+    layout: 'fullscreen'
+  }
+}
 
-const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+export default componentMeta
 
-export const LoggedIn = Template.bind({});
+const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />
+
+export const LoggedIn = Template.bind({})
 LoggedIn.args = {
   user: {
-    name: 'Jane Doe',
-  },
-};
+    name: 'Jane Doe'
+  }
+}
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = Template.bind({})
+LoggedOut.args = {}

src/stories/Header.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
+import React from 'react'
 
-import { Button } from './Button';
-import './header.css';
+import { Button } from './Button'
+import './header.css'
 
 type User = {
-  name: string;
-};
+  name: string
+}
 
 interface HeaderProps {
-  user?: User;
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
+  user?: User
+  onLogin: () => void
+  onLogout: () => void
+  onCreateAccount: () => void
 }
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
@@ -53,4 +53,4 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
       </div>
     </div>
   </header>
-);
+)

src/stories/Page.stories.tsx

@@ -1,26 +1,26 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
-import { Page } from './Page';
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { within, userEvent } from '@storybook/testing-library'
+import { Page } from './Page'
 
-export default {
+const componentMeta: ComponentMeta<typeof Page> = {
   title: 'Example/Page',
   component: Page,
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
-  },
-} as ComponentMeta<typeof Page>;
+    layout: 'fullscreen'
+  }
+}
+export default componentMeta
 
-const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
+const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />
 
-export const LoggedOut = Template.bind({});
+export const LoggedOut = Template.bind({})
 
-export const LoggedIn = Template.bind({});
+export const LoggedIn = Template.bind({})
 
 // More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
 LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
-};
+  const canvas = within(canvasElement)
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i })
+  await userEvent.click(loginButton)
+}

src/stories/Page.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React from 'react'
 
-import { Header } from './Header';
-import './page.css';
+import { Header } from './Header'
+import './page.css'
 
 type User = {
   name: string;
-};
+}
 
 export const Page: React.VFC = () => {
-  const [user, setUser] = React.useState<User>();
+  const [user, setUser] = React.useState<User>()
 
   return (
     <article>
@@ -69,5 +69,5 @@ export const Page: React.VFC = () => {
         </div>
       </section>
     </article>
-  );
-};
+  )
+}