upgraded to storybook 6 and changed to tsx (#58)

.storybook/main.js

@@ -1,4 +1,11 @@
 module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
-};
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

package.json

@@ -13,8 +13,8 @@
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint": "eslint ./src/**/*.ts*",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "dependencies": {
     "@patternfly/patternfly": "^4.31.6",
@@ -35,11 +35,15 @@
     "@snowpack/app-scripts-react": "^1.10.0",
     "@snowpack/plugin-postcss": "^1.0.2",
     "@snowpack/plugin-webpack": "^2.0.6",
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-info": "^5.3.19",
-    "@storybook/addon-links": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
-    "@storybook/react": "^5.3.19",
+    "@storybook/addon-actions": "^6.0.21",
+    "@storybook/addon-essentials": "^6.0.21",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^6.0.21",
+    "@storybook/addons": "^6.0.21",
+    "@storybook/node-logger": "^6.0.21",
+    "@storybook/preset-create-react-app": "^3.1.4",
+    "@storybook/preset-typescript": "^3.0.0",
+    "@storybook/react": "^6.0.21",
     "@testing-library/jest-dom": "^5.11.0",
     "@testing-library/react": "^10.4.6",
     "@types/dot": "^1.1.4",
@@ -67,6 +71,7 @@
     "postcss-cli": "^7.1.1",
     "postcss-import": "^12.0.1",
     "prettier": "^2.0.5",
+    "react-is": "^16.13.1",
     "react-scripts": "^3.4.1",
     "snowpack": "^2.10.0",
     "typescript": "^3.8.3"

src/stories/AlertPanel.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { AlertVariant, Button } from "@patternfly/react-core";
+import { Meta } from "@storybook/react";
+
+import { AlertPanel } from "../components/alert/AlertPanel";
+import { useAlerts } from "../components/alert/Alerts";
+
+export default {
+  title: "Alert Panel",
+  component: AlertPanel,
+} as Meta;
+
+export const Api = () => (
+  <AlertPanel
+    alerts={[{ key: 1, message: "Hello", variant: AlertVariant.default }]}
+    onCloseAlert={() => {}}
+  />
+);
+export const AddAlert = () => {
+  const [add, alerts, hide] = useAlerts();
+  return (
+    <>
+      <AlertPanel alerts={alerts} onCloseAlert={hide} />
+      <Button onClick={() => add("Hello", AlertVariant.default)}>Add</Button>
+    </>
+  );
+};

src/stories/ClientList.stories.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+
+import { ClientList } from "../clients/ClientList";
+import clientMock from "../clients/mock-clients.json";
+
+export default {
+  title: "Client List",
+  component: ClientList,
+} as Meta;
+
+export const ClientListExample = () => (
+  <ClientList clients={clientMock} baseUrl="http://test.nl/" />
+);

src/stories/ConfirmationDialog.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import {
+  ConfirmationDialog,
+  ConfirmationDialogProps,
+} from "../components/confirmation-dialog/ConfirmationDialog";
+
+export default {
+  title: "Confirmation dailog",
+  component: ConfirmationDialog,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<ConfirmationDialogProps> = (args) => (
+  <ConfirmationDialog {...args} />
+);
+
+export const Dialog = Template.bind({});
+Dialog.args = {
+  onConfirm: () => "Confirm",
+};

src/stories/DataLoader.stories.tsx

@@ -0,0 +1,46 @@
+import React, { ReactNode } from "react";
+import { Meta } from "@storybook/react/types-6-0";
+
+import { DataLoader } from "../components/data-loader/DataLoader";
+
+export default {
+  title: "Data Loader",
+  component: DataLoader,
+} as Meta;
+
+type Post = {
+  title: string;
+  body: string;
+};
+
+export const loadPosts = () => {
+  const PostLoader = (props: { url: string; children: ReactNode }) => {
+    const loader = async () => {
+      const wait = (ms: number, value: Post) =>
+        new Promise((resolve) => setTimeout(resolve, ms, value));
+      return await fetch(props.url)
+        .then((res) => res.json())
+        .then((value) => wait(3000, value));
+    };
+    return <DataLoader loader={loader}>{props.children}</DataLoader>;
+  };
+
+  return (
+    <PostLoader url="https://jsonplaceholder.typicode.com/posts">
+      {(posts: Post[]) => (
+        <table>
+          <tr>
+            <th>Name</th>
+            <th>Description</th>
+          </tr>
+          {posts.map((post, i) => (
+            <tr key={i}>
+              <td>{post.title}</td>
+              <td>{post.body}</td>
+            </tr>
+          ))}
+        </table>
+      )}
+    </PostLoader>
+  );
+};

src/stories/ExternalLink.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { ExternalLink } from "../components/external-link/ExternalLink";
+
+export default {
+  title: "External link",
+  component: ExternalLink,
+} as Meta;
+
+const Template: Story<React.HTMLProps<HTMLAnchorElement>> = (args) => (
+  <ExternalLink {...args} />
+);
+
+export const WithTitle = Template.bind({});
+WithTitle.args = {
+  title: "With title",
+  href: "http://test.nl",
+};
+
+export const WithoutTitle = Template.bind({});
+WithoutTitle.args = {
+  href: "http://some-other-link.nl/super",
+};

src/stories/HelpSystem.stories.tsx

@@ -0,0 +1,49 @@
+import React, { useContext } from "react";
+import {
+  Page,
+  PageHeader,
+  PageHeaderTools,
+  PageHeaderToolsItem,
+} from "@patternfly/react-core";
+import { Meta } from "@storybook/react/types-6-0";
+
+import {
+  Help,
+  HelpContext,
+  HelpHeader,
+} from "../components/help-enabler/HelpHeader";
+
+export default {
+  title: "Help System Example",
+  component: HelpHeader,
+} as Meta;
+
+export const HelpSystem = () => {
+  return (
+    <Help>
+      <HelpSystemTest />
+    </Help>
+  );
+};
+
+const HelpSystemTest = () => {
+  const { enabled } = useContext(HelpContext);
+  return (
+    <Page
+      header={
+        <PageHeader
+          headerTools={
+            <PageHeaderTools>
+              <PageHeaderToolsItem>
+                <HelpHeader />
+              </PageHeaderToolsItem>
+              <PageHeaderToolsItem>dummy user...</PageHeaderToolsItem>
+            </PageHeaderTools>
+          }
+        />
+      }
+    >
+      Help system is {enabled ? "enabled" : "not on, guess you don't need help"}
+    </Page>
+  );
+};

src/stories/RealmForm.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { Page } from "@patternfly/react-core";
+import { NewRealmForm } from "../forms/realm/NewRealmForm";
+
+export default {
+  title: "New reaml form",
+  component: NewRealmForm,
+} as Meta;
+
+export const view = () => {
+  return (
+    <Page>
+      <NewRealmForm />
+    </Page>
+  );
+};

src/stories/ScrollSpy.stories.tsx

@@ -1,8 +1,13 @@
 import React from "react";
-import { storiesOf } from "@storybook/react";
-import { ScrollForm } from "../src/components/scroll-form/ScrollForm";
+import { Meta } from "@storybook/react";
+import { ScrollForm } from "../components/scroll-form/ScrollForm";
 
-storiesOf("Scroll Spy form", module).add("view", () => {
+export default {
+  title: "Scroll spy scroll form",
+  component: ScrollForm,
+} as Meta;
+
+export const View = () => {
   return (
     <ScrollForm sections={["Revocation", "Clustering", "Fine grain stuff"]}>
       <div style={{ height: "2400px" }}>One</div>
@@ -10,4 +15,4 @@ storiesOf("Scroll Spy form", module).add("view", () => {
       <div style={{ height: "2400px" }}>fine grain</div>
     </ScrollForm>
   );
-});
+};

src/stories/Toobar.stories.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import {
+  Nav,
+  NavItem,
+  NavList,
+  PageSidebar,
+  Page,
+} from "@patternfly/react-core";
+import { Meta } from "@storybook/react/types-6-0";
+
+import { RealmSelector } from "../components/realm-selector/RealmSelector";
+
+export default {
+  title: "Header",
+  component: RealmSelector,
+} as Meta;
+
+export const Header = () => {
+  return (
+    <Page
+      sidebar={
+        <PageSidebar
+          nav={
+            <Nav>
+              <NavList>
+                <RealmSelector
+                  realm="Master"
+                  realmList={["Master", "Photoz"]}
+                />
+
+                <NavItem id="default-link1" to="#default-link1" itemId={0}>
+                  Link 1
+                </NavItem>
+                <NavItem
+                  id="default-link2"
+                  to="#default-link2"
+                  itemId={1}
+                  isActive
+                >
+                  Current link
+                </NavItem>
+                <NavItem id="default-link3" to="#default-link3" itemId={2}>
+                  Link 3
+                </NavItem>
+                <NavItem id="default-link4" to="#default-link4" itemId={3}>
+                  Link 4
+                </NavItem>
+              </NavList>
+            </Nav>
+          }
+        />
+      }
+    />
+  );
+};

stories/0-Welcome.stories.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { linkTo } from '@storybook/addon-links';
-import { Welcome } from '@storybook/react/demo';
-
-export default {
-  title: 'Welcome',
-  component: Welcome,
-};
-
-export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
-
-ToStorybook.story = {
-  name: 'to Storybook',
-};

stories/1-Button.stories.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { Button } from '@storybook/react/demo';
-
-export default {
-  title: 'Button',
-  component: Button,
-};
-
-export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
-
-export const Emoji = () => (
-  <Button onClick={action('clicked')}>
-    <span role="img" aria-label="so cool">
-      😀 😎 👍 💯
-    </span>
-  </Button>
-);

stories/2-Toobar.stories.js

@@ -1,60 +0,0 @@
-import React, { useContext } from 'react';
-import { storiesOf } from '@storybook/react';
-import { Nav, NavItem, NavList, PageSidebar, Page, PageHeader, PageHeaderTools, PageHeaderToolsItem } from '@patternfly/react-core';
-
-import { RealmSelector } from '../src/components/realm-selector/RealmSelector';
-import { Help, HelpContext, HelpHeader } from '../src/components/help-enabler/HelpHeader';
-
-storiesOf('Toolbar')
-  .add('realm selector', () => {
-    return (
-      <Page sidebar={
-        <PageSidebar nav={
-          <Nav>
-            <NavList>
-              <RealmSelector realm="Master" realmList={["Master", "Photoz"]} />
-
-              <NavItem id="default-link1" to="#default-link1" itemId={0}>
-                Link 1
-              </NavItem>
-              <NavItem id="default-link2" to="#default-link2" itemId={1} isActive>
-                Current link
-              </NavItem>
-              <NavItem id="default-link3" to="#default-link3" itemId={2}>
-                Link 3
-              </NavItem>
-              <NavItem id="default-link4" to="#default-link4" itemId={3}>
-                Link 4
-              </NavItem>
-            </NavList>
-          </Nav>
-        } />
-      } />
-    );
-  })
-  .add('help system', () => {
-    return (
-      <Help>
-        <HelpSystemTest />
-      </Help>
-    );
-  });
-
-const HelpSystemTest = () => {
-  const { enabled } = useContext(HelpContext);
-  return (
-    <Page header={<PageHeader
-      headerTools={
-        <PageHeaderTools>
-          <PageHeaderToolsItem>
-            <HelpHeader />
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem>
-            dummy user...
-          </PageHeaderToolsItem>
-        </PageHeaderTools>}
-    />}>
-      Help system is {enabled ? 'enabled' : "not on, guess you don't need help"}
-    </Page>
-  );
-}

stories/3-DataLoader.stories.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-import { DataLoader } from '../src/components/data-loader/DataLoader';
-
-storiesOf('DataLoader', module)
-  .add('load posts', () => {
-
-    function PostLoader(props) {
-      const loader = async () => {
-        const wait = (ms, value) => new Promise(resolve => setTimeout(resolve, ms, value))
-        return await fetch(props.url).then(res => res.json()).then(value => wait(3000, value));
-      }
-      return <DataLoader loader={loader}>{props.children}</DataLoader>;
-    }
-
-    return (
-      <PostLoader url="https://jsonplaceholder.typicode.com/posts">
-        {posts => (
-          <table>
-            <tr>
-              <th>Name</th>
-              <th>Description</th>
-            </tr>
-            {posts.map((post, i) => (
-              <tr key={i}>
-                <td>{post.title}</td>
-                <td>{post.body}</td>
-              </tr>
-            ))}
-          </table>
-        )}
-      </PostLoader>
-    );
-  });

stories/4-ClientList.stories.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-import { ClientList } from '../src/clients/ClientList';
-import clientMock from '../src/clients/mock-clients.json';
-
-storiesOf('Client list page', module)
-  .add('view', () => {
-    return (<ClientList clients={clientMock} baseUrl="http://test.nl/"/>
-    );
-  })

stories/5-AlertPanel.stories.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { AlertVariant, Button } from '@patternfly/react-core';
-import { storiesOf } from '@storybook/react';
-
-import { AlertPanel } from '../src/components/alert/AlertPanel';
-import { useAlerts } from '../src/components/alert/Alerts';
-
-storiesOf('Alert Panel', module)
-  .add('api', () => <AlertPanel alerts={[{ key: 1, message: 'Hello', variant: AlertVariant.default }]} onCloseAlert={() => { }} />)
-  .add('add alert', () => {
-    const [add, alerts, hide] = useAlerts();
-    return (
-      <>
-        <AlertPanel alerts={alerts} onCloseAlert={hide} />
-        <Button onClick={() => add('Hello', AlertVariant.default)}>Add</Button>
-      </>
-    );
-  });

stories/6-RealmForm.stories.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Page } from '@patternfly/react-core';
-import { NewRealmForm } from '../src/forms/realm/NewRealmForm';
-
-storiesOf('Realm Form', module)
-  .add('view', () => {
-    return (
-      <Page>
-        <NewRealmForm  />
-      </Page>
-    );
-  })

stories/8-ExternalLink.stories.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { ExternalLink } from '../src/components/external-link/ExternalLink';
-
-storiesOf('External Link', module).add('view', () => {
-  return (
-    <>
-      <p>
-        <ExternalLink href="http://test.nl/" />
-      </p>
-      <p>
-        <ExternalLink href="http://test.nl/" title="With title" />
-      </p>
-    </>
-  );
-});