feat: yarn 4 upgrade

.gitignore

@@ -9,3 +9,10 @@ node_modules
 /public/_graphql/
 yarn.lock
 /app/client/dist/
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.storybook/main.ts

@@ -1,13 +1,13 @@
 import type { StorybookConfig } from "@storybook/react-vite";
-const path = require("path");
+
 const config: StorybookConfig = {
-    framework: "@storybook/react-vite",
-    stories: ["../app/client/components/**/*.stories.@(js|jsx|ts|tsx)"],
-    addons: ["@storybook/addon-essentials", "@storybook/addon-links"],
-    docs: {
-        autodocs: "tag",
-    },
-    staticDirs: ["../app/client/img"],
+  framework: "@storybook/react-vite",
+  stories: ["../app/client/src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-essentials", "@storybook/addon-links"],
+  staticDirs: ["../app/client/img"],
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
 };
 
 export default config;

.storybook/preview.ts

@@ -0,0 +1,9 @@
+import { Preview } from '@storybook/react';
+
+import '../app/client/src/index.scss';
+
+const preview: Preview = {
+  parameters: {},
+};
+
+export default preview;

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.3.0.cjs

app/client/src/components/Banner/Banner.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import Banner from "./Banner";
+
+const meta: Meta<typeof Banner> = {
+  component: Banner,
+  title: "Elements / Banner",
+};
+
+export const Primary = {
+  render: () => {
+    return (
+      <>
+        <Banner title="Example banner title" />
+      </>
+    );
+  },
+};
+
+export default meta;

app/client/src/components/Banner/Banner.tsx

@@ -1,16 +1,18 @@
+import "@/styles/components/banner.scss";
+
 import React from "react";
 
 export type BannerProps = {
   title: string;
-  description: string;
+  description?: string;
 };
 
 const Banner: React.FC<BannerProps> = ({ title, description }) => {
   return (
     <div className="banner">
       <div className="banner__content">
         <h1 className="banner__title">{title}</h1>
-        <p className="banner__description">{description}</p>
+        {description && <p className="banner__description">{description}</p>}
       </div>
     </div>
   );

app/client/src/index.scss

@@ -31,7 +31,8 @@ body {
   padding: 0;
   transition: 0.1s ease;
 
-  &.lights--on {
+  &.lights--on,
+  &.sb-show-main {
     opacity: 1;
   }
 }
@@ -41,5 +42,3 @@ body {
   margin: 0 auto;
   max-width: 54ch;
 }
-
-@import "./styles/components/banner.scss";

app/client/src/styles/components/banner.scss

@@ -8,6 +8,7 @@
     font-size: 40px;
     line-height: 1;
     max-width: 54ch;
+    margin: 0 auto;
     text-wrap: balance;
   }
 }

package.json

@@ -15,13 +15,13 @@
     "storybook": "storybook dev -p 6006 --disable-telemetry"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.0.23",
-    "@storybook/addon-interactions": "^7.0.23",
-    "@storybook/addon-links": "^7.0.23",
-    "@storybook/blocks": "^7.0.23",
-    "@storybook/react": "^7.0.23",
-    "@storybook/react-vite": "^7.0.23",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-vite": "^8.1.10",
+    "@storybook/test": "^8.1.10",
     "@vitejs/plugin-react": "^4.0.1",
     "chromatic": "^6.19.8",
     "core-js": "^3.20.2",
@@ -35,7 +35,7 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^24.9.0",
     "sass": "^1.63.6",
-    "storybook": "^7.0.23",
+    "storybook": "^8.1.10",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
     "vite-tsconfig-paths": "^4.2.0"
@@ -50,5 +50,6 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
-  }
+  },
+  "packageManager": "[email protected]"
 }