Initial Storybook setup (#110)

* Storybook setup

Storybook can be started using `npm run storybook`

* moved files and bugfix

Moved component files into their own directory and moved stories next to them. Fixed a bug with loading images

* prettier and bugfix

* prettier and bugfix

* Absolute Import in Header.tsx

* import fix

some imports did not work after merging

* Storybook update for chakra ui to properly work

* Prettier main.js

* comment in preview.js about hacky solution

* webpack final update and prettier update to preview

* Updated website/readme to include storybook description

* prettier...

* Delete docker-compose 2.yaml

website/.storybook/main.js

@@ -0,0 +1,32 @@
+const path = require("path");
+
+module.exports = {
+  stories: [
+    "../src/components/**/*.stories.mdx",
+    "../src/components/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@chakra-ui/storybook-addon",
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "@storybook/builder-webpack5",
+  },
+  staticDirs: ["../public"],
+  // https://github.com/storybookjs/storybook/issues/15336#issuecomment-888528747
+  typescript: { reactDocgen: false },
+  // fix to make absolute imports working in storybook
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      src: path.resolve(__dirname, "../src"),
+    };
+    return config;
+  },
+  features: {
+    emotionAlias: false,
+  },
+};

website/.storybook/preview.js

@@ -0,0 +1,22 @@
+import "!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+// Hacky solution to get Images in next to work
+// https://dev.to/jonasmerlin/how-to-use-the-next-js-image-component-in-storybook-1415
+import * as NextImage from "next/image";
+
+const OriginalNextImage = NextImage.default;
+
+Object.defineProperty(NextImage, "default", {
+  configurable: true,
+  value: (props) => <OriginalNextImage {...props} unoptimized />,
+});

website/README.md

@@ -70,6 +70,12 @@ Whenever the website runs in development mode, you can use the debug credentials
 1. Use the `Login` button in the top right to go to the login page.
 1. You should see a section for debug credentials. Enter any username you wish, you will be logged in as that user.
 
+### Using Storybook
+
+To develop components using [Storybook](https://storybook.js.org/) run `npm run storybook`. Then navigate to in your browser to `http://localhost:6006`.
+
+To create a new story create a file named `[componentName].stories.js`. An example how such a story could look like, see `Header.stories.jsx`.
+
 ## Code Layout
 
 ### React Code

website/package.json

@@ -7,7 +7,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.4.4",
@@ -39,9 +41,23 @@
     "use-debounce": "^9.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.20.7",
+    "@chakra-ui/storybook-addon": "^4.0.16",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-interactions": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/manager-webpack5": "^6.5.15",
+    "@storybook/react": "^6.5.15",
+    "@storybook/testing-library": "^0.0.13",
     "@types/node": "18.11.17",
     "@types/react": "18.0.26",
+    "babel-loader": "^8.3.0",
+    "eslint-plugin-storybook": "^0.6.8",
     "prettier": "2.8.1",
-    "prisma": "^4.7.1"
+    "prisma": "^4.7.1",
+    "typescript": "4.9.4"
   }
 }

website/src/components/Header/Header.stories.jsx

@@ -0,0 +1,24 @@
+import { SessionContext } from "next-auth/react";
+import React from "react";
+
+import { Header } from "./Header";
+
+export default {
+  title: "Header/Header",
+  component: Header,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+const Template = (args) => {
+  var { session } = args;
+  return (
+    <SessionContext.Provider value={session}>
+      <Header {...args} />
+    </SessionContext.Provider>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = { session: { data: { user: { name: "StoryBook user" } }, status: "authenticated" } };

website/src/components/Header/Header.tsx

@@ -6,9 +6,9 @@ import Link from "next/link";
 import { signOut, useSession } from "next-auth/react";
 import { FaUser, FaSignOutAlt } from "react-icons/fa";
 
-import { UserMenu } from "./UserMenu";
-import { Container } from "./Container";
+import { Container } from "src/components/Container";
 import { NavLinks } from "./NavLinks";
+import { UserMenu } from "./UserMenu";
 
 function MenuIcon(props) {
   return (

website/src/components/Header/NavLinks.stories.jsx

@@ -0,0 +1,14 @@
+import { NavLinks } from "./NavLinks";
+
+export default {
+  title: "Header/NavLinks",
+  component: NavLinks,
+};
+
+const Template = (args) => (
+  <div className="hidden lg:flex lg:gap-10">
+    <NavLinks {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});

website/src/components/Header/UserMenu.stories.jsx

@@ -0,0 +1,25 @@
+import { SessionContext } from "next-auth/react";
+import React from "react";
+
+import UserMenu from "./UserMenu";
+
+export default {
+  title: "Header/UserMenu",
+  component: UserMenu,
+};
+
+const Template = (args) => {
+  var { session } = args;
+  return (
+    <SessionContext.Provider value={session}>
+      <div className="flex flex-col">
+        <div className="self-end">
+          <UserMenu {...args} />
+        </div>
+      </div>
+    </SessionContext.Provider>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = { session: { data: { user: { name: "StoryBook user" } }, status: "authenticated" } };

website/src/components/Header/index.ts

@@ -0,0 +1,3 @@
+export { Header } from "./Header";
+export { UserMenu } from "./UserMenu";
+export { NavLinks } from "./NavLinks";

website/src/components/Layout.tsx

@@ -3,7 +3,7 @@
 import type { NextPage } from "next";
 
 import { Footer } from "./Footer";
-import { Header } from "./Header";
+import { Header } from "src/components/Header";
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: React.ReactElement) => React.ReactNode;

website/src/pages/404.tsx

@@ -1,6 +1,6 @@
 import { useSession } from "next-auth/react";
 import { Footer } from "../components/Footer";
-import { Header } from "../components/Header";
+import { Header } from "src/components/Header";
 import Head from "next/head";
 import Link from "next/link";
 

website/src/pages/leaderboard/score-leaderboard.tsx

@@ -1,4 +1,4 @@
-import RankItem from "@/components/RankItem";
+import RankItem from "src/components/RankItem";
 import { BarsArrowUpIcon, BarsArrowDownIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import { HiBarsArrowUp, HiBarsArrowDown } from "react-icons/hi2";