Storybook setup

.storybook/main.js

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

.storybook/preview.js

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

README.md

@@ -6,6 +6,12 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
+### `npm install`
+
+**Note:** Downgrade to NPM V6 for this repo to work correctly. Storybook 6.1.18 is having issues with NPM V7.\
+Use `npm install -g npm@6` to downgrade to NPM V6\
+https://github.com/storybookjs/storybook/issues/12983
+
 ### `npm start`
 
 Runs the app in the development mode.\
@@ -14,6 +20,13 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
+### `npm run storybook`
+
+Runs the app in [Storybook](https://storybook.js.org) mode. (We are able to run Storybook and React App at the same time)\
+When Storybook runs, it looks for all stories in `src/app/**/` with this regex `*.stories.tsx`.
+
+The page will reload if you make edits.
+
 ### `npm test`
 
 Launches the test runner in the interactive watch mode.\

package.json

@@ -25,7 +25,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": [
@@ -46,7 +48,14 @@
     ]
   },
   "devDependencies": {
-    "antd": "^4.12.3"
+    "@storybook/addon-actions": "^6.1.18",
+    "@storybook/addon-essentials": "^6.1.18",
+    "@storybook/addon-links": "^6.1.18",
+    "@storybook/node-logger": "^6.1.18",
+    "@storybook/preset-create-react-app": "^3.1.6",
+    "@storybook/react": "^6.1.18",
+    "antd": "^4.12.3",
+    "storybook-addon-designs": "^5.4.5"
   },
   "jest": {
     "transformIgnorePatterns": [

src/app/content/Content.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { Content, ContentProps } from './Content';
+
+export default {
+  title: 'Content',
+  component: Content,
+} as Meta;
+
+const Template: Story<ContentProps> = (args) => <Content {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  content: 'hello world',
+};
+
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/taMF1mrqs7jAS7myzk78mT/clockwork?node-id=0%3A1',
+  },
+}

src/app/content/Content.tsx

@@ -1,5 +1,22 @@
-import React from "react";
+import React from 'react';
 
-export function Content() {
-  return <div>content</div>;
+export interface ContentProps {
+  /**
+   * Content
+   * Subject to change
+   */
+  content?: string;
 }
+
+/**
+ * Primary UI component for content
+ */
+export const Content: React.FC<ContentProps> = ({
+  content
+}) => {
+  return (
+    <div>
+      {content}
+    </div>
+  )
+};

src/app/header/Header.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { Header, HeaderProps } from './Header';
+
+export default {
+  title: 'Header',
+  component: Header,
+} as Meta;
+
+const Template: Story<HeaderProps> = (args) => <Header {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  content: 'hello world - header',
+};
+
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/taMF1mrqs7jAS7myzk78mT/clockwork?node-id=0%3A1',
+  },
+}
+

src/app/header/Header.tsx

@@ -1,5 +1,24 @@
-import React from "react";
+import React from 'react';
+// import StyledHeader from './Header.styles';
 
-export function Header() {
-  return <div>header</div>;
+
+export interface HeaderProps {
+  /**
+   * Content
+   * Subject to change
+   */
+  content?: string;
 }
+
+/**
+ * Primary UI component for content
+ */
+export const Header: React.FC<HeaderProps> = ({
+  content
+}) => {
+  return (
+    <div>
+      {content}
+    </div>
+  )
+};

src/app/sidebar/Sidebar.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { Sidebar, SidebarProps } from './Sidebar';
+
+export default {
+  title: 'Sidebar',
+  component: Sidebar,
+} as Meta;
+
+const Template: Story<SidebarProps> = (args) => <Sidebar {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  content: 'hello world - sidebar',
+};
+
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/taMF1mrqs7jAS7myzk78mT/clockwork?node-id=0%3A1',
+  },
+}
+

src/app/sidebar/Sidebar.tsx

@@ -1,5 +1,24 @@
-import React from "react";
+import React from 'react';
+// import StyledHeader from './Header.styles';
 
-export function Sidebar() {
-  return <div>sidebar</div>;
+
+export interface SidebarProps {
+  /**
+   * Content
+   * Subject to change
+   */
+  content?: string;
 }
+
+/**
+ * Primary UI component for content
+ */
+export const Sidebar: React.FC<SidebarProps> = ({
+  content
+}) => {
+  return (
+    <div>
+      {content}
+    </div>
+  )
+};