V1.0.0 (#1)

* @mui/material@^5.14.13

* Created a default set of light and dark MUI themes

* Added polyfills for requestAnimationFrame and requestIdleCallback

* Added a simple docker-compose.yaml to create a Postgres instance.

* Added Storybook

.eslintrc.json

@@ -1,15 +1,24 @@
 {
-  "extends": ["react-app", "react-app/jest"],
+  "extends": [
+    "react-app",
+    "react-app/jest",
+    "plugin:storybook/recommended"
+  ],
   "rules": {
-    "complexity": ["error", { "max": 15 }],
+    "complexity": [
+      "error",
+      {
+        "max": 15
+      }
+    ],
     "import/no-anonymous-default-export": "off",
-    "prefer-const": "error",
-    "complexity": ["error", { "max": 15 }]
+    "prefer-const": "error"
   },
-
   "overrides": [
     {
-      "files": ["**/*.stories.*"],
+      "files": [
+        "**/*.stories.*"
+      ],
       "rules": {
         "import/no-anonymous-default-export": "off"
       }

.storybook/decorators.tsx

@@ -0,0 +1,12 @@
+import { Decorator } from "@storybook/react";
+import { Card, CardContent } from "@mui/material";
+
+export const withCard: Decorator = (Story) => {
+  return (
+    <Card>
+      <CardContent>
+        <Story />
+      </CardContent>
+    </Card>
+  );
+};

.storybook/main.ts

@@ -0,0 +1,18 @@
+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",
+  },
+  staticDirs: ["../public"], //👈 Configures the static asset folder in Storybook
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,12 @@
+<script>
+  window.global = window;
+</script>
+<style>
+  html,
+  body {
+    height: 100%;
+  }
+  .sb-main-fullscreen #storybook-root {
+    height: 100%;
+  }
+</style>

.storybook/preview.tsx

@@ -0,0 +1,67 @@
+// Imported here for storybook. These must be imported in your own project's index file
+import type { Decorator, Preview, StoryFn } from "@storybook/react";
+import { HelmetProvider } from "react-helmet-async";
+import { MemoryRouter } from "react-router-dom";
+import { ApolloProvider } from "@apollo/client";
+import { apolloClient } from "../src/services/apollo";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import NetflixDark from "../src/themes/NetflixDark";
+import NetflixLight from "../src/themes/NetflixLight";
+
+const preview: Preview = {
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    // layout: "fullscreen", // TODO not having any effect..
+    backgrounds: {
+      default: "NetflixDark",
+      values: [
+        {
+          name: "NetflixLight",
+          value: NetflixLight.palette.background.default,
+        },
+        {
+          name: "NetflixDark",
+          value: NetflixDark.palette.background.default,
+        },
+      ],
+    },
+    actions: { argTypesRegex: "^on.*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+export default preview;
+
+const withTheme: Decorator = (Story, context) => {
+  const theme =
+    context.globals.backgrounds?.value ===
+    NetflixDark.palette.background.default
+      ? NetflixDark
+      : NetflixLight;
+
+  return (
+    <>
+      <ThemeProvider theme={theme}>
+        <CssBaseline enableColorScheme />
+        <Story />
+      </ThemeProvider>
+    </>
+  );
+};
+
+export const decorators: Decorator[] = [
+  (Story: StoryFn) => (
+    <MemoryRouter>
+      <ApolloProvider client={apolloClient}>
+        <HelmetProvider>
+          <Story />
+        </HelmetProvider>
+      </ApolloProvider>
+    </MemoryRouter>
+  ),
+  withTheme,
+];