diff --git a/apps/storybook/.storybook/main.js b/apps/storybook/.storybook/main.js index 9b4c7f600c..5fa1ab07ce 100644 --- a/apps/storybook/.storybook/main.js +++ b/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"))); +} diff --git a/apps/storybook/.storybook/preview.jsx b/apps/storybook/.storybook/preview.jsx index d881ca6008..0ff662d639 100644 --- a/apps/storybook/.storybook/preview.jsx +++ b/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) => ( -
{storyFn()}
+
+ +
-)); +); + +export const decorators = [withI18next]; window.getEmbedNamespace = () => { const url = new URL(document.URL); diff --git a/apps/storybook/intro.stories.mdx b/apps/storybook/intro.stories.mdx index d8ca68bf7c..f6858dc892 100644 --- a/apps/storybook/intro.stories.mdx +++ b/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.

- Our{" "} - - Figma - {" "} + Our Figma library is available for anyone to view and use. If you have any questions or concerns, please reach out to the design team.

diff --git a/apps/storybook/package.json b/apps/storybook/package.json index 3aae79cb0a..1b16a80ca3 100644 --- a/apps/storybook/package.json +++ b/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" diff --git a/packages/features/bookings/components/event-meta/EventMeta.stories.mdx b/packages/features/bookings/components/event-meta/EventMeta.stories.mdx index faa385184c..58c169224f 100644 --- a/packages/features/bookings/components/event-meta/EventMeta.stories.mdx +++ b/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"; - -<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> diff --git a/packages/features/bookings/components/verifyCodeDialog.stories.mdx b/packages/features/bookings/components/verifyCodeDialog.stories.mdx index 8679477369..6083512999 100644 --- a/packages/features/bookings/components/verifyCodeDialog.stories.mdx +++ b/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: () => {}, diff --git a/packages/features/calendars/weeklyview/components/calendar.stories.mdx b/packages/features/calendars/weeklyview/components/calendar.stories.mdx index 1d0f2227d0..fb8943ec13 100644 --- a/packages/features/calendars/weeklyview/components/calendar.stories.mdx +++ b/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> diff --git a/packages/ui/components/dialog/dialog.stories.mdx b/packages/ui/components/dialog/dialog.stories.mdx index e06fe3e75c..a3ab15df0f 100644 --- a/packages/ui/components/dialog/dialog.stories.mdx +++ b/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", diff --git a/packages/ui/components/form/color-picker/colorpicker.stories.mdx b/packages/ui/components/form/color-picker/colorpicker.stories.mdx index 39398708b3..797c4c3f86 100644 --- a/packages/ui/components/form/color-picker/colorpicker.stories.mdx +++ b/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 { diff --git a/packages/ui/components/form/color-picker/colorpicker.test.tsx b/packages/ui/components/form/color-picker/colorpicker.test.tsx index 9ea9bef86e..700c79ef1a 100644 --- a/packages/ui/components/form/color-picker/colorpicker.test.tsx +++ b/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}` ); diff --git a/packages/ui/components/form/wizard/wizard.stories.mdx b/packages/ui/components/form/wizard/wizard.stories.mdx index 1b06fdc77b..feeee3f2dc 100644 --- a/packages/ui/components/form/wizard/wizard.stories.mdx +++ b/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", diff --git a/packages/ui/components/image-uploader/imageUploader.stories.mdx b/packages/ui/components/image-uploader/imageUploader.stories.mdx index 9260a70b9b..a0c863b69f 100644 --- a/packages/ui/components/image-uploader/imageUploader.stories.mdx +++ b/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"); diff --git a/packages/ui/components/layout/spacing.stories.mdx b/packages/ui/components/layout/spacing.stories.mdx index 11c1472ec8..c6431317c1 100644 --- a/packages/ui/components/layout/spacing.stories.mdx +++ b/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>