chore: add storybook component explorer

app/.storybook/main.js

@@ -0,0 +1,14 @@
+module.exports = {
+  stories: ['../src/**/*.stories.(ts|tsx|js|jsx|mdx)'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+      },
+    },
+  ],
+};

app/package.json

@@ -12,7 +12,9 @@
     "eject": "react-scripts eject",
     "lint": "eslint --ext .ts,.tsx --ignore-path .eslintignore .",
     "tsc": "tsc --noEmit",
-    "protos": "./scripts/build-protos.sh"
+    "protos": "./scripts/build-protos.sh",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "proxy": "https://localhost:8443",
   "dependencies": {
@@ -28,6 +30,12 @@
     "react-scripts": "3.4.1"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-docs": "5.3.18",
+    "@storybook/addon-links": "^5.3.18",
+    "@storybook/addons": "^5.3.18",
+    "@storybook/preset-create-react-app": "^2.1.1",
+    "@storybook/react": "^5.3.18",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

app/src/__stories__/0-Welcome.stories.tsx

@@ -0,0 +1,14 @@
+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',
+};

app/src/__stories__/1-Button.stories.tsx

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

app/src/__stories__/Button.tsx

@@ -0,0 +1,19 @@
+import React, { FC, ReactNode } from 'react';
+
+type ButtonProps = {
+  children: ReactNode;
+
+  /**
+   * Simple click handler
+   */
+  onClick?: () => void;
+};
+
+/**
+ * The world's most _basic_ button
+ */
+export const Button: FC<ButtonProps> = ({ children, onClick }: ButtonProps) => (
+  <button onClick={onClick} type="button">
+    {children}
+  </button>
+);