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/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;