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