homework 2 done

.storybook/main.ts

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

.storybook/preview.ts

@@ -1,19 +0,0 @@
-import '@fontsource/roboto/400.css'
-import '@fontsource/roboto/700.css'
-import '../src/styles/index.scss'
-
-import type { Preview } from '@storybook/react'
-
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-  },
-}
-
-export default preview

.storybook/preview.tsx

@@ -0,0 +1,53 @@
+import type { Preview } from '@storybook/react'
+import '@fontsource/roboto/400.css'
+import '../src/styles/index.scss'
+import { withRouter } from 'storybook-addon-react-router-v6'
+import { themes } from '@storybook/theming'
+import { ToastContainer } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.min.css'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      theme: themes.dark,
+    },
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: '#000',
+        },
+      ],
+    },
+  },
+}
+export const decorators = [withRouter, withToasts]
+export default preview
+
+function withToasts(Story: any) {
+  return (
+    <>
+      <Story />
+      <ToastContainer
+        position="top-center"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="dark"
+      />
+    </>
+  )
+}