Add Navbar component, emotion for css and storybook

front/.storybook/main.js

@@ -0,0 +1,46 @@
+module.exports = {
+  webpackFinal: (config) => {
+    config.module.rules.push({
+      test: /\.tsx?$/,
+      exclude: /node_modules/,
+      use: [
+        {
+          loader: require.resolve('babel-loader'),
+          options: {
+            presets: [
+              require('@babel/preset-typescript').default,
+              [require('@babel/preset-react').default, { runtime: 'automatic' }],
+              require('@babel/preset-env').default,
+            ],
+          },
+        },
+      ],
+    })
+
+    config.resolve.extensions.push('.ts', '.tsx')
+
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto',
+    })
+
+    config.resolve.extensions.push('.mjs')
+
+    return config
+  },
+  stories: [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/preset-create-react-app"
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "@storybook/builder-webpack5"
+  }
+}

front/.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}