chore: upgrade storybook 7.6.3 + use @storybook/nextjs (#12673)

* chore: upgrade storybook 7.6.3 + use @storybook/nextjs

* fix: color picker tests

apps/storybook/.storybook/main.js

@@ -1,3 +1,5 @@
+import { dirname, join } from "path";
+
 const path = require("path");
 
 module.exports = {
@@ -8,26 +10,29 @@ 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: {
+      builder: {
+        fsCache: true,
+        lazyCompilation: true,
+      },
+    },
   },
+
   staticDirs: ["../public"],
+
   webpackFinal: async (config, { configType }) => {
     config.resolve.fallback = {
       fs: false,
@@ -72,5 +77,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

@@ -1,5 +1,3 @@
-import { addDecorator } from "@storybook/react";
-import { AppRouterContext } from "next/dist/shared/lib/app-router-context";
 import { I18nextProvider } from "react-i18next";
 
 import "../styles/globals.css";
@@ -14,13 +12,7 @@ export const parameters = {
       date: /Date$/,
     },
   },
-  nextRouter: {
-    pathname: "/",
-    asPath: "/",
-    query: {},
-    push() {},
-    Provider: AppRouterContext.Provider,
-  },
+
   globals: {
     locale: "en",
     locales: {
@@ -31,11 +23,15 @@ export const parameters = {
   i18n,
 };
 
-addDecorator((storyFn) => (
+const withI18next = (Story) => (
   <I18nextProvider i18n={i18n}>
-    <div style={{ margin: "2rem" }}>{storyFn()}</div>
+    <div style={{ margin: "2rem" }}>
+      <Story />
+    </div>
   </I18nextProvider>
-));
+);
+
+export const decorators = [withI18next];
 
 window.getEmbedNamespace = () => {
   const url = new URL(document.URL);

apps/storybook/intro.stories.mdx

@@ -9,10 +9,7 @@ import { Meta } from "@storybook/addon-docs";
     library, we will be adding more components as we go along.
   </p>
   <p>
-    Our{" "}
-    <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">
-      Figma
-    </a>{" "}
+    Our <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">Figma</a>
     library is available 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": "*",
@@ -20,23 +20,23 @@
     "@radix-ui/react-slider": "^1.0.0",
     "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
+    "@storybook/nextjs": "^7.6.3",
     "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.6.3",
+    "@storybook/addon-designs": "^7.0.7",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-interactions": "^7.6.3",
+    "@storybook/addon-links": "^7.6.3",
+    "@storybook/addon-mdx-gfm": "^7.6.3",
+    "@storybook/nextjs": "^7.6.3",
+    "@storybook/react": "^7.6.3",
+    "@storybook/testing-library": "^0.2.2",
     "@types/react": "18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^2.2.0",
@@ -46,9 +46,8 @@
     "postcss": "^8.4.18",
     "postcss-pseudo-companion-classes": "^0.1.1",
     "rollup-plugin-polyfill-node": "^0.10.2",
-    "storybook-addon-designs": "^6.3.1",
-    "storybook-addon-next": "^1.6.9",
-    "storybook-react-i18next": "^1.1.2",
+    "storybook": "^7.6.3",
+    "storybook-react-i18next": "^2.0.9",
     "tailwindcss": "^3.3.3",
     "typescript": "^4.9.4",
     "vite": "^4.1.2"

packages/features/bookings/components/event-meta/EventMeta.stories.mdx

@@ -1,3 +1,4 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
 
 import {
@@ -9,6 +10,7 @@ import {
   VariantColumn,
   RowTitles,
   CustomArgsTable,
+  VariantRow,
 } from "@calcom/storybook/components";
 import { Icon } from "@calcom/ui";
 
@@ -20,31 +22,36 @@ import { mockEvent } from "./event.mock.ts";
 <Meta title="Features/Events/Meta" component={EventDetails} />
 
 <Title title="Event Meta" suffix="Brief" subtitle="Version 2.0 — Last Update: 12 Dec 2022" />
-
-<Examples title="Combined event meta block">
-  <div style={{ maxWidth: 300 }}>
-    <Example title="Event Title">
-      <EventTitle event={mockEvent} />
-    </Example>
-    <Example title="Event Details">
-      <EventDetails event={mockEvent} />
-    </Example>
-  </div>
-</Examples>
+<TooltipProvider>
+  <Examples title="Combined event meta block">
+    <div style={{ maxWidth: 300 }}>
+      <Example title="Event Title">
+        <EventTitle event={mockEvent} />
+      </Example>
+      <Example title="Event Details">
+        <EventDetails event={mockEvent} />
+      </Example>
+    </div>
+  </Examples>
+</TooltipProvider>
 
 <Canvas>
   <Story name="All variants">
     <VariantsTable titles={["Event Meta Components"]} columnMinWidth={150}>
       <VariantRow variant="">
         <div style={{ maxWidth: 300 }}>
-          <EventMembers
-            users={[
-              { name: "Pro example", username: "pro" },
-              { name: "Team example", username: "team" },
-            ]}
-          />
-          <EventTitle>Quick catch-up</EventTitle>
-          <EventDetails event={mockEvent} />
+          <TooltipProvider>
+            <EventMembers
+              entity={{ name: "entityName" }}
+              profile={{ name: "profileName" }}
+              users={[
+                { name: "Pro example", username: "pro" },
+                { name: "Team example", username: "team" },
+              ]}
+            />
+            <EventTitle>Quick catch-up</EventTitle>
+            <EventDetails event={mockEvent} />
+          </TooltipProvider>
         </div>
       </VariantRow>
     </VariantsTable>

packages/features/bookings/components/verifyCodeDialog.stories.mdx

@@ -24,6 +24,11 @@ This component contains an input form to capture a 6-digit verification code, er
 <Canvas>
   <Story
     name="VerifyCodeDialog"
+    parameters={{
+      nextjs: {
+        appDirectory: true,
+      },
+    }}
     args={{
       isOpenDialog: true,
       setIsOpenDialog: () => {},

packages/features/calendars/weeklyview/components/calendar.stories.mdx

@@ -1,18 +1,14 @@
-import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 
 import {
-  Examples,
-  Example,
-  Note,
+
   Title,
   CustomArgsTable,
-  VariantsTable,
-  VariantRow,
 } from "@calcom/storybook/components";
 
 import { events, blockingDates } from "../_storybookData";
 import "../styles/styles.css";
-import { CalendarEvent } from "../types/events";
 import { Calendar } from "./Calendar";
 
 <Meta title="UI/Calendar" component={Calendar} />
@@ -29,7 +25,7 @@ The Args Table below shows you a breakdown of what props can be passed into the
 
 There will be a few examples of how to use the Calendar component to show different usecases.
 
-export const Template = (args) => <Calendar {...args} />;
+export const Template = (args) => <TooltipProvider><Calendar {...args} /></TooltipProvider>;
 
 <Canvas>
   <Story
@@ -74,6 +70,7 @@ export const Template = (args) => <Calendar {...args} />;
       },
     }}>
     {({ ...args }) => (
+      <TooltipProvider>
       <Calendar
         {...args}
         events={events}
@@ -81,6 +78,7 @@ export const Template = (args) => <Calendar {...args} />;
         onEmptyCellClick={(date) => alert(date.toString())}
         sortEvents
       />
+       </TooltipProvider>
     )}
   </Story>
 </Canvas>

packages/ui/components/dialog/dialog.stories.mdx

@@ -53,6 +53,11 @@ The `Dialog` component is composed of the following components:
 <Canvas>
   <Story
     name="Dialog"
+    parameters={{
+      nextjs: {
+        appDirectory: true,
+      },
+    }}
     args={{
       title: "Example Dialog",
       description: "Example Dialog Description",

packages/ui/components/form/color-picker/colorpicker.stories.mdx

@@ -1,4 +1,7 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
+import {
+  Tooltip,
+} from "@calcom/ui";
 import { Canvas, Meta, Story } from "@storybook/addon-docs";
 
 import {

packages/ui/components/form/color-picker/colorpicker.test.tsx

@@ -46,14 +46,9 @@ describe("Tests for ColorPicker component", () => {
     render(<ColorPicker defaultValue={defaultValue} onChange={onChange} />);
 
     const colorInput = screen.getByRole("textbox");
-    await act(async () => {
-      userEvent.clear(colorInput);
-    });
+    await act(async () => userEvent.clear(colorInput));
     const newColorValue = "#00FF00";
-    await act(async () => {
-      userEvent.type(colorInput, newColorValue);
-    });
-
+    await act(async () => userEvent.type(colorInput, newColorValue));
     expect(screen.getByRole("button", { name: "pick colors" })).toHaveStyle(
       `background-color: ${newColorValue}`
     );

packages/ui/components/form/wizard/wizard.stories.mdx

@@ -27,6 +27,11 @@ To observe the actual step navigation behavior, please refer to the Storybook st
 
 <Canvas>
   <Story
+    parameters={{
+      nextjs: {
+        appDirectory: true,
+      },
+    }}
     name="Basic"
     args={{
       href: "/wizard",

packages/ui/components/image-uploader/imageUploader.stories.mdx

@@ -22,6 +22,11 @@ Below are the props for `Image uploader`
 
 <Canvas>
   <Story
+    parameters={{
+      nextjs: {
+        appDirectory: true,
+      },
+    }}
     name="ImageUploader"
     play={({ canvasElement }) => {
       const darkVariantContainer = canvasElement.querySelector("#dark-variant");

packages/ui/components/layout/spacing.stories.mdx

@@ -26,7 +26,7 @@ Defines the spacing guide used in Cal.coms design system
 
 <Examples title="Spacing">
   <TooltipPrimitive.Provider>
-    <>
+    <div className="flex flex-row gap-6">
       <Example title="0"></Example>
       <Example title="px">
         <Tooltip content="1px">
@@ -78,6 +78,6 @@ Defines the spacing guide used in Cal.coms design system
           <div className="bg-inverted h-4 w-10 rounded-sm"> </div>
         </Tooltip>
       </Example>
-    </>
+    </div>
   </TooltipPrimitive.Provider>
 </Examples>