Merge pull request #37 from oslabs-beta/storybook

Install Storybook and write first story

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 ui/build
+storybook-static

ui/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

ui/.storybook/preview.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+import { HashRouter } from 'react-router-dom';
+import CssBaseline from '@mui/material/CssBaseline';
+import { DockerMuiThemeProvider } from '@docker/docker-mui-theme';
+
+const preview: Preview = {
+  // Add global decorators to each story.
+  // DockerMuiThemeProvider and CssBaseline providing styling.
+  // HashRouter is neccessary for the <Link /> components in <NavBar /> to work
+  decorators: [
+    (Story) => {
+      return (
+        <DockerMuiThemeProvider>
+          <CssBaseline />
+          <HashRouter>
+            <Story />
+          </HashRouter>
+        </DockerMuiThemeProvider>
+      );
+    },
+  ],
+};
+
+export default preview;