Begin Storybook

.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../src/**/*.stories.js'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+  ],
+};

package.json

@@ -16,7 +16,9 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "postinstall": "printf '#/bin/sh\ncd $(git rev-parse --git-dir)/.. && yarn install' > $(git rev-parse --git-dir)/hooks/post-merge && chmod +x $(git rev-parse --git-dir)/hooks/post-merge"
+    "postinstall": "printf '#/bin/sh\ncd $(git rev-parse --git-dir)/.. && yarn install' > $(git rev-parse --git-dir)/hooks/post-merge && chmod +x $(git rev-parse --git-dir)/hooks/post-merge",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -34,6 +36,11 @@
     ]
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^5.3.12",
+    "@storybook/addon-links": "^5.3.12",
+    "@storybook/addons": "^5.3.12",
+    "@storybook/preset-create-react-app": "^1.5.2",
+    "@storybook/react": "^5.3.12",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "firebase-tools": "^7.12.1",

src/components/ForgotPassword/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 import * as ROUTES from "../../constants/routes";
 import ForgotPasswordForm from "./form";
 
@@ -8,9 +8,7 @@ export default function() {
     <div className="signin-container">
       <div className="form-info-container">
         <h1>Forgot Password</h1>
-        <p>
-          Enter your email and we'll send the instructions.
-        </p>
+        <p>Enter your email and we'll send the instructions.</p>
         <ForgotPasswordForm />
         <p>
           <Link to={ROUTES.SIGN_IN}>Back to sign in</Link>

src/components/Landing/index.js

@@ -1,5 +1,6 @@
 import React, { useContext } from "react";
 import { useHistory } from "react-router-dom";
+
 import Projects from "../Projects";
 import { SessionContext } from "../Session";
 import * as ROUTES from "../../constants/routes";

src/components/Projects/index.js

@@ -1,26 +1,27 @@
-import React, {useContext, useState, useEffect} from 'react';
-import ProjectsTable from './table'
-import './styles.css';
-import {FirebaseContext} from '../Firebase'
+import React, { useContext, useState, useEffect } from "react";
+import ProjectsTable from "./table";
+import "./styles.css";
+import { FirebaseContext } from "../Firebase";
 
 export default function() {
-  const firebase = useContext(FirebaseContext)
-  const [projects, setProjects] = useState([])
-  const [error, setError] = useState("")
+  const firebase = useContext(FirebaseContext);
+  const [projects, setProjects] = useState([]);
+  const [error, setError] = useState("");
 
-  useEffect( () => {
-    firebase.getProjects()
-      .then( setProjects )
-      .catch( setError )
-  }, [firebase])
+  useEffect(() => {
+    firebase
+      .getProjects()
+      .then(setProjects)
+      .catch(setError);
+  }, [firebase]);
 
   return (
-    <div style={{marginTop: '30px'}}>
+    <div style={{ marginTop: "30px" }}>
       <div>
         Group Collaboration
-        { error && <p>{error.message}</p> }
+        {error && <p>{error.message}</p>}
       </div>
-      <ProjectsTable projects={projects}/>
+      <ProjectsTable projects={projects} />
     </div>
   );
-};
+}

src/stories/0-Welcome.stories.js

@@ -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"
+};

src/stories/1-Button.stories.js

@@ -0,0 +1,20 @@
+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>
+);

src/stories/2-ForgotPassword.stories.js

@@ -0,0 +1,12 @@
+import React from "react";
+import ForgotPassword from "../components/ForgotPassword";
+import { MemoryRouter } from "react-router-dom";
+import { storiesOf } from "@storybook/react";
+
+storiesOf("Forgot Password", module)
+  .addDecorator(story => (
+    <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>
+  ))
+  .add("Default", () => {
+    return <ForgotPassword />;
+  });

src/stories/3-Landing.stories.js

@@ -0,0 +1,50 @@
+import React, { useContext } from "react";
+import { storiesOf } from "@storybook/react";
+import { useHistory, MemoryRouter } from "react-router-dom";
+import Landing from "../components/Landing";
+import Projects from "../components/Projects";
+import { SessionContext } from "../components/Session";
+import { FirebaseContext } from "../components/Firebase";
+import * as ROUTES from "../constants/routes";
+
+export default {
+  title: "Landing",
+  component: Landing
+};
+
+let fakeSession = false;
+let userData = {
+  displayName: "User",
+  email: "[email protected]",
+  uid: "0"
+};
+
+const projectsPromise = {
+  resolve: undefined,
+  reject: undefined
+};
+
+const fakebase = {
+  auth: { currentUser: { uid: "123" } },
+  getProjects: () =>
+    new Promise((resolve, reject) => {
+      projectsPromise.resolve = resolve;
+      projectsPromise.reject = reject;
+    })
+};
+
+storiesOf("Landing", module)
+  .addDecorator(story => (
+    <FirebaseContext value={fakebase}>
+      <SessionContext.Provider value={userData}>
+        <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>
+      </SessionContext.Provider>
+    </FirebaseContext>
+  ))
+  .add("Not Signed In", () => {
+    return <Landing />;
+  })
+  .add("Signed In", () => {
+    fakeSession = userData;
+    return <Landing />;
+  });

src/stories/4-Projects.stories.js

@@ -0,0 +1,39 @@
+import React from "react";
+import Projects from "../components/Projects";
+import { useHistory, MemoryRouter } from "react-router-dom";
+import { storiesOf } from "@storybook/react";
+import { FirebaseContext } from "../components/Firebase";
+import { SessionContext } from "../components/Session";
+
+const projectsPromise = {
+  resolve: undefined,
+  reject: undefined
+};
+
+const fakebase = {
+  auth: {
+    currentUser: {
+      uid: 1,
+      displayName: "hi",
+      email: "[email protected]"
+    }
+  }
+};
+
+let userData = {
+  displayName: "User",
+  email: "[email protected]",
+  uid: "0"
+};
+
+storiesOf("Projects", module)
+  .addDecorator(story => (
+    <FirebaseContext value={fakebase}>
+      <SessionContext.Provider value={userData}>
+        <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>
+      </SessionContext.Provider>
+    </FirebaseContext>
+  ))
+  .add("Default", () => {
+    return <Projects />;
+  });

src/stories/5-SignIn.stories.js

@@ -0,0 +1,12 @@
+import React from "react";
+import SignIn from "../components/SignIn";
+import { MemoryRouter } from "react-router-dom";
+import { storiesOf } from "@storybook/react";
+
+storiesOf("Sign In", module)
+  .addDecorator(story => (
+    <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>
+  ))
+  .add("Default", () => {
+    return <SignIn />;
+  });