Storybook

template/packages/frontend/.storybook/main.js

@@ -0,0 +1,14 @@
+module.exports = {
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: prop =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
+  addons: ["storybook-css-modules-preset"],
+  stories: ["../stories/*.stories.@(ts|tsx)"],
+}

template/packages/frontend/components/Title.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import styles from "./title.module.css"
+
+type Props = {
+  text: string
+}
+
+const Title = ({ text }: Props) => {
+  return (
+    <div>
+      <h2 className={styles.title}>{text}</h2>
+    </div>
+  )
+}
+
+export default Title

template/packages/frontend/components/title.module.css

@@ -0,0 +1,9 @@
+.title {
+  color: blue;
+  font-weight: bold;
+  font-size: 30px;
+}
+
+.title:hover {
+  color: red;
+}

template/packages/frontend/package.json

@@ -11,7 +11,8 @@
     "codegen:watch": "nodemon --ext ts,tsx --exec yarn codegen --ignore '/__generated__/'",
     "typecheck": "echo next && tsc -p .",
     "typecheck:watch": "yarn typecheck --watch",
-    "lint": "eslint --cache --ext .ts,.tsx --ignore-pattern __generated__ ."
+    "lint": "eslint --cache --ext .ts,.tsx --ignore-pattern __generated__ .",
+    "storybook": "start-storybook -p 6006 -c .storybook"
   },
   "dependencies": {
     "@apollo/client": "^3.2.5",
@@ -23,12 +24,19 @@
     "react-dom": "16.13.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.12.3",
     "@hallettj/eslint-plugin-ts-graphql": "^0.1.1",
+    "@storybook/addon-docs": "^6.0.28",
+    "@storybook/react": "^6.0.28",
     "@types/node": "^14.14.6",
     "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.9",
+    "@types/storybook__react": "^5.2.1",
+    "babel-loader": "^8.2.0",
+    "babel-preset-react-app": "^10.0.0",
     "concurrently": "^5.3.0",
     "eslint-plugin-graphql": "^4.0.0",
+    "storybook-css-modules-preset": "^1.0.2",
     "ts-graphql-plugin": "^2.0.2"
   }
 }

template/packages/frontend/pages/recipes/index.tsx

@@ -1,5 +1,6 @@
 import { gql, useQuery, useMutation } from "@apollo/client"
 import Link from "next/link"
+import Title from "components/Title"
 
 const getRecipesQuery = gql`
   query getRecipes {
@@ -56,7 +57,7 @@ export default function RecipesList() {
   }
   return (
     <div>
-      <h1>Recipes</h1>
+      <Title text={"Recipes"} />
       {loading ? "Loading..." : null}
       {data
         ? data.recipes.map(recipe => <Recipe {...recipe} key={recipe.id} />)

template/packages/frontend/pages/recipes/recipes.module.css

@@ -0,0 +1,19 @@
+.inputText {
+  padding: 0.3rem;
+  font-size: 20px;
+}
+
+.submitButton {
+  background-color: #6db9ee; /* Green */
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+}
+
+.submitButton:hover {
+  background-color: #2f79ad;
+}

template/packages/frontend/stories/Title.stories.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import { storiesOf } from "@storybook/react"
+import Title from "../components/Title"
+
+storiesOf("Title", module).add("with text", () => {
+  return <Title text={"My Title"} />
+})