Merge remote-tracking branch 'origin/main' into chore/update-storybook

apps/storybook/.storybook/main.js

@@ -1,3 +1,4 @@
+import { dirname, join } from "path";
 const path = require("path");
 
 module.exports = {
@@ -8,26 +9,23 @@ module.exports = {
     "../../../packages/features/**/*.stories.mdx",
     "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
   ],
+
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "storybook-addon-rtl-direction",
-    "storybook-react-i18next",
-    "storybook-addon-next",
-    "storybook-addon-next-router",
-    /*{
-      name: "storybook-addon-next",
-      options: {
-        nextConfigPath: path.resolve(__dirname, "../../web/next.config.js"),
-      },
-    },*/
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("storybook-addon-rtl-direction"),
+    getAbsolutePath("storybook-react-i18next"),
+    getAbsolutePath("@storybook/addon-mdx-gfm")
   ],
-  framework: "@storybook/react",
-  core: {
-    builder: "webpack5",
+
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {}
   },
+
   staticDirs: ["../public"],
+
   webpackFinal: async (config, { configType }) => {
     config.resolve.fallback = {
       fs: false,
@@ -72,5 +70,14 @@ module.exports = {
 
     return config;
   },
+
   typescript: { reactDocgen: "react-docgen" },
+
+  docs: {
+    autodocs: true
+  }
 };
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}

apps/storybook/.storybook/preview.jsx

@@ -31,11 +31,14 @@ export const parameters = {
   i18n,
 };
 
-addDecorator((storyFn) => (
-  <I18nextProvider i18n={i18n}>
-    <div style={{ margin: "2rem" }}>{storyFn()}</div>
-  </I18nextProvider>
-));
+
+export const decorators = [
+  (storyFn) => (
+    <I18nextProvider i18n={i18n}>
+      <div style={{ margin: "2rem" }}>{storyFn()}</div>
+    </I18nextProvider>
+  )
+]
 
 window.getEmbedNamespace = () => {
   const url = new URL(document.URL);

apps/storybook/intro.stories.mdx

@@ -12,7 +12,7 @@ import { Meta } from "@storybook/addon-docs";
     Our{" "}
     <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">
       Figma
-    </a>{" "}
+    </a>
     library is avalible for anyone to view and use. If you have any questions or concerns, please reach out to
     the design team.
   </p>

apps/storybook/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "start-storybook -p 6006",
-    "build": "build-storybook"
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build"
   },
   "dependencies": {
     "@calcom/config": "*",
@@ -23,32 +23,28 @@
     "next": "^13.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook-addon-next-router": "^4.0.2",
     "storybook-addon-rtl-direction": "^0.0.19"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.6",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/builder-vite": "^0.2.4",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/react": "^6.5.13",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.3.2",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-interactions": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-mdx-gfm": "^7.3.2",
+    "@storybook/nextjs": "^7.3.2",
+    "@storybook/react": "^7.3.2",
+    "@storybook/testing-library": "^0.2.0",
     "@types/react": "18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^2.2.0",
     "autoprefixer": "^10.4.12",
-    "babel-loader": "^8.2.5",
     "fs": "^0.0.1-security",
     "postcss": "^8.4.18",
     "postcss-pseudo-companion-classes": "^0.1.1",
     "rollup-plugin-polyfill-node": "^0.10.2",
+    "storybook": "^7.3.2",
     "storybook-addon-designs": "^6.3.1",
-    "storybook-addon-next": "^1.6.9",
-    "storybook-react-i18next": "^1.1.2",
+    "storybook-react-i18next": "^2.0.8",
     "tailwindcss": "^3.3.1",
     "typescript": "^4.9.4",
     "vite": "^4.1.2"