maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updates storybook config and fixes and updates stories (#12683) 

add packages
This commit is contained in:
Henrik Klee 2023-12-06 09:41:35 +01:00 committed by GitHub
parent 9f50941904
commit ca0d23529a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 497 additions and 409 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/storybook/.gitignore vendored
View File

@ -8,7 +8,9 @@ pnpm-debug.log*
lerna-debug.log*
node_modules
storybook-static
storybook-static/*
!storybook-static/favicon.ico
!storybook-static/sb-cover.jpg
dist
dist-ssr
*.local

32
apps/storybook/.storybook/main.js → apps/storybook/.storybook/main.ts
View File

@ -1,14 +1,16 @@
import { dirname, join } from "path";
import type { StorybookConfig } from "@storybook/nextjs";
import path, { dirname, join } from "path";
const path = require("path");
module.exports = {
const config: StorybookConfig = {
stories: [
"../intro.stories.mdx",
"../../../packages/ui/components/**/*.stories.mdx",
"../../../packages/atoms/**/*.stories.mdx",
"../../../packages/features/**/*.stories.mdx",
"../../../packages/ui/components/**/*.stories.mdx", // legacy SB6 stories
"../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
"../../../packages/ui/components/**/*.docs.mdx",
"../../../packages/features/**/*.stories.@(js|jsx|ts|tsx)",
"../../../packages/features/**/*.docs.mdx",
"../../../packages/atoms/**/*.stories.@(js|jsx|ts|tsx)",
"../../../packages/atoms/**/*.docs.mdx",
],
addons: [
@ -17,23 +19,23 @@ module.exports = {
getAbsolutePath("@storybook/addon-interactions"),
getAbsolutePath("storybook-addon-rtl-direction"),
getAbsolutePath("storybook-react-i18next"),
getAbsolutePath("@storybook/addon-mdx-gfm"),
],
framework: {
name: getAbsolutePath("@storybook/nextjs"),
name: getAbsolutePath("@storybook/nextjs") as "@storybook/nextjs",
options: {
builder: {
fsCache: true,
lazyCompilation: true,
},
// builder: {
// fsCache: true,
// lazyCompilation: true,
// },
},
},
staticDirs: ["../public"],
webpackFinal: async (config, { configType }) => {
config.resolve = config.resolve || {};
config.resolve.fallback = {
fs: false,
assert: false,
@ -61,6 +63,8 @@ module.exports = {
zlib: false,
};
config.module = config.module || {};
config.module.rules = config.module.rules || [];
config.module.rules.push({
test: /\.css$/,
use: [
@ -85,6 +89,8 @@ module.exports = {
},
};
export default config;
function getAbsolutePath(value) {
return dirname(require.resolve(join(value, "package.json")));
}

44
apps/storybook/.storybook/preview.jsx
View File

@ -1,44 +0,0 @@
import { I18nextProvider } from "react-i18next";
import "../styles/globals.css";
import "../styles/storybook-styles.css";
import i18n from "./i18next";
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
globals: {
locale: "en",
locales: {
en: "English",
fr: "Français",
},
},
i18n,
};
const withI18next = (Story) => (
<I18nextProvider i18n={i18n}>
<div style={{ margin: "2rem" }}>
<Story />
</div>
</I18nextProvider>
);
export const decorators = [withI18next];
window.getEmbedNamespace = () => {
const url = new URL(document.URL);
const namespace = url.searchParams.get("embed");
return namespace;
};
window.getEmbedTheme = () => {
return "auto";
};

73
apps/storybook/.storybook/preview.tsx Normal file
View File

@ -0,0 +1,73 @@
// adds tooltip context to all stories
import { TooltipProvider } from "@radix-ui/react-tooltip";
import type { Preview } from "@storybook/react";
import React from "react";
import { I18nextProvider } from "react-i18next";
import type { EmbedThemeConfig } from "@calcom/embed-core/src/types";
// adds trpc context to all stories (esp. booker)
import { StorybookTrpcProvider } from "@calcom/ui";
import "../styles/globals.css";
import "../styles/storybook-styles.css";
import i18n from "./i18next";
const preview: Preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
globals: {
locale: "en",
locales: {
en: "English",
fr: "Français",
},
},
i18n,
nextjs: {
appDirectory: true,
},
},
decorators: [
(Story) => (
<StorybookTrpcProvider>
<TooltipProvider>
<I18nextProvider i18n={i18n}>
<div style={{ margin: "2rem" }}>
<Story />
</div>
</I18nextProvider>
</TooltipProvider>
</StorybookTrpcProvider>
),
],
};
export default preview;
declare global {
interface Window {
getEmbedNamespace: () => string | null;
getEmbedTheme: () => EmbedThemeConfig | null;
}
}
window.getEmbedNamespace = () => {
const url = new URL(document.URL);
const namespace = url.searchParams.get("embed");
return namespace;
};
window.getEmbedTheme = () => {
return "auto";
};

4
apps/storybook/components/CustomArgsTable.tsx
View File

@ -1,6 +1,6 @@
import { ArgsTable } from "@storybook/addon-docs";
import { SortType } from "@storybook/components";
import { PropDescriptor } from "@storybook/store";
import type { SortType } from "@storybook/blocks";
import type { PropDescriptor } from "@storybook/preview-api";
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- ignore storybook addon types component as any so we have to do
type Component = any;

4
apps/storybook/package.json
View File

@ -20,7 +20,10 @@
"@radix-ui/react-slider": "^1.0.0",
"@radix-ui/react-switch": "^1.0.0",
"@radix-ui/react-tooltip": "^1.0.0",
"@storybook/addon-docs": "^7.6.3",
"@storybook/blocks": "^7.6.3",
"@storybook/nextjs": "^7.6.3",
"@storybook/preview-api": "^7.6.3",
"next": "^13.4.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@ -33,7 +36,6 @@
"@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",

12
packages/atoms/booker/Booker.docs.mdx Normal file
View File

@ -0,0 +1,12 @@
import { Meta, Canvas, ArgsTable } from "@storybook/blocks";
import { Title } from "@calcom/storybook/components";
import { Booker } from "./Booker";
import * as BookerStories from "./Booker.stories";
<Meta of={BookerStories} />
<Title title="Booker" />
<ArgsTable of={Booker} />
<Canvas of={BookerStories.Default}/>

16
packages/atoms/booker/Booker.stories.tsx Normal file
View File

@ -0,0 +1,16 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Booker } from "./Booker";
const meta: Meta<typeof Booker> = {
component: Booker,
title: "Atoms/Booker",
};
export default meta;
type Story = StoryObj<typeof Booker>;
export const Default: Story = {
name: "Booker",
render: () => <Booker username="pro" eventSlug="" entity={{}} />,
};

16
packages/atoms/booker/booker.stories.mdx
View File

@ -1,16 +0,0 @@
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
import { Title } from "@calcom/storybook/components";
import { Icon } from "@calcom/ui";
import { Booker } from "./Booker";
<Meta title="Atoms/Booker" component={Booker} />
<Title title="Booker" />
<Canvas>
<Story name="Booker">
<Booker username="pro" />
</Story>
</Canvas>

24
packages/features/bookings/components/VerifyCodeDialog.docs.mdx Normal file
View File

@ -0,0 +1,24 @@
import { Canvas, Meta } from "@storybook/blocks";
import { Title, CustomArgsTable } from "@calcom/storybook/components";
import { VerifyCodeDialog } from "./VerifyCodeDialog";
import * as VerifyCodeDialogStories from "./VerifyCodeDialog.stories";
<Meta of={VerifyCodeDialogStories} />
<Title title="VerifyCodeDialog" suffix="Brief" subtitle="Version 1.0 — Last Update: 11 Sep 2023" />
## Definition
The `VerifyCodeDialog` component allows users to enter a verification code sent to their email. The component provides feedback in case of an error and can handle different verification processes depending on whether the user session is required.
## Structure
This component contains an input form to capture a 6-digit verification code, error handling UI, and action buttons.
<CustomArgsTable of={VerifyCodeDialog} />
{/* ## VerifyCodeDialog Story
<Canvas of={VerifyCodeDialogStories.Default} /> */}

48
packages/features/bookings/components/VerifyCodeDialog.stories.tsx Normal file
View File

@ -0,0 +1,48 @@
import type { Meta, StoryObj } from "@storybook/react";
import type { ComponentProps } from "react";
import { StorybookTrpcProvider } from "@calcom/ui";
import { VerifyCodeDialog } from "./VerifyCodeDialog";
type StoryArgs = ComponentProps<typeof VerifyCodeDialog>;
const meta: Meta<StoryArgs> = {
component: VerifyCodeDialog,
title: "Features/VerifyCodeDialog",
argTypes: {
isOpenDialog: { control: "boolean", description: "Indicates whether the dialog is open or not." },
setIsOpenDialog: { action: "setIsOpenDialog", description: "Function to set the dialog state." },
email: { control: "text", description: "Email to which the verification code was sent." },
onSuccess: { action: "onSuccess", description: "Callback function when verification succeeds." },
// onError: { action: "onError", description: "Callback function when verification fails." },
isUserSessionRequiredToVerify: {
control: "boolean",
description: "Indicates if user session is required for verification.",
},
},
decorators: [
(Story) => (
<StorybookTrpcProvider>
<Story />
</StorybookTrpcProvider>
),
],
render: (args) => <VerifyCodeDialog {...args} />,
};
export default meta;
type Story = StoryObj<StoryArgs>;
export const Default: Story = {
name: "Dialog",
args: {
isOpenDialog: true,
email: "example@email.com",
// onError: (err) => {
// if (err.message === "invalid_code") {
// alert("Code provided is invalid");
// }
// },
},
};

13
packages/features/bookings/components/event-meta/EventMeta.docs.mdx Normal file
View File

@ -0,0 +1,13 @@
import { Canvas, Meta } from "@storybook/blocks";
import { Title } from "@calcom/storybook/components";
import * as EventMetaStories from "./EventMeta.stories";
<Meta of={EventMetaStories} />
<Title title="Event Meta" suffix="Brief" subtitle="Version 2.0 — Last Update: 12 Dec 2022" />
<Canvas of={EventMetaStories.ExampleStory} />
<Canvas of={EventMetaStories.AllVariants} />

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

@ -1,59 +0,0 @@
import { TooltipProvider } from "@radix-ui/react-tooltip";
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
import {
Examples,
Example,
Note,
Title,
VariantsTable,
VariantColumn,
RowTitles,
CustomArgsTable,
VariantRow,
} from "@calcom/storybook/components";
import { Icon } from "@calcom/ui";
import { EventDetails } from "./Details";
import { EventMembers } from "./Members";
import { EventTitle } from "./Title";
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" />
<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 }}>
<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>
</Story>
</Canvas>

62
packages/features/bookings/components/event-meta/EventMeta.stories.tsx Normal file
View File

@ -0,0 +1,62 @@
import type { Meta, StoryObj } from "@storybook/react";
import type { PublicEvent } from "bookings/types";
import type { ComponentProps } from "react";
import { Examples, Example, VariantsTable, VariantRow } from "@calcom/storybook/components";
import { EventDetails } from "./Details";
import { EventMembers } from "./Members";
import { EventTitle } from "./Title";
import { mockEvent } from "./event.mock";
type StoryArgs = ComponentProps<typeof EventDetails>;
const meta: Meta<StoryArgs> = {
component: EventDetails,
parameters: {
nextjs: {
appDirectory: true,
},
},
title: "Features/Events/Meta",
};
export default meta;
type Story = StoryObj<StoryArgs>;
export const ExampleStory: Story = {
name: "Examples",
render: () => (
<Examples title="Combined event meta block">
<div style={{ maxWidth: 300 }}>
<Example title="Event Title">
<EventTitle>{mockEvent.title}</EventTitle>
</Example>
<Example title="Event Details">
<EventDetails event={mockEvent} />
</Example>
</div>
</Examples>
),
};
export const AllVariants: Story = {
name: "All variants",
render: () => (
<VariantsTable titles={["Event Meta Components"]} columnMinWidth={150}>
<VariantRow variant="">
<div style={{ maxWidth: 300 }}>
<EventMembers
users={mockEvent.users}
schedulingType="COLLECTIVE"
entity={{ isUnpublished: false, name: "Example", orgSlug: null }}
// TODO remove type assertion
profile={{ weekStart: "Sunday" } as PublicEvent["profile"]}
/>
<EventTitle>Quick catch-up</EventTitle>
<EventDetails event={mockEvent} />
</div>
</VariantRow>
</VariantsTable>
),
};

11
packages/features/bookings/components/event-meta/event.mock.ts
View File

@ -1,14 +1,17 @@
import type { RouterOutputs } from "@calcom/trpc/react";
import type { PublicEvent } from "bookings/types";
export const mockEvent: RouterOutputs["viewer"]["public"]["event"] = {
export const mockEvent: PublicEvent = {
id: 1,
title: "Quick check-in",
slug: "quick-check-in",
eventName: "Quick check-in",
description:
"Use this event for a quick 15 minute catchup. Visit this long url to test the component https://cal.com/averylongurlwithoutspacesthatshouldntbreaklayout",
users: [{ name: "Pro Example", username: "pro" }],
users: [
{ name: "Pro example", username: "pro", weekStart: "Sunday", organizationId: null },
{ name: "Team example", username: "team", weekStart: "Sunday", organizationId: 1 },
],
schedulingType: null,
length: 30,
locations: [{ type: "integrations:google:meet" }, { type: "integrations:zoom" }],
};
} as PublicEvent; // TODO: complete mock and remove type assertion

60
packages/features/bookings/components/verifyCodeDialog.stories.mdx
View File

@ -1,60 +0,0 @@
import { Canvas, Meta, Story } from "@storybook/addon-docs";
import { Title, CustomArgsTable } from "@calcom/storybook/components";
import { StorybookTrpcProvider } from "../../../ui/components/mocks/trpc.tsx";
import { VerifyCodeDialog } from "./VerifyCodeDialog";
<Meta title="Features/VerifyCodeDialog" component={VerifyCodeDialog} />
<Title title="VerifyCodeDialog" suffix="Brief" subtitle="Version 1.0 — Last Update: 11 Sep 2023" />
## Definition
The `VerifyCodeDialog` component allows users to enter a verification code sent to their email. The component provides feedback in case of an error and can handle different verification processes depending on whether the user session is required.
## Structure
This component contains an input form to capture a 6-digit verification code, error handling UI, and action buttons.
<CustomArgsTable of={VerifyCodeDialog} />
## VerifyCodeDialog Story
<Canvas>
<Story
name="VerifyCodeDialog"
parameters={{
nextjs: {
appDirectory: true,
},
}}
args={{
isOpenDialog: true,
setIsOpenDialog: () => {},
email: "example@email.com",
onSuccess: () => {},
onError: (err) => {
if (err.message === "invalid_code") {
alert("Code provided is invalid");
}
},
}}
argTypes={{
isOpenDialog: { control: "boolean", description: "Indicates whether the dialog is open or not." },
setIsOpenDialog: { action: "setIsOpenDialog", description: "Function to set the dialog state." },
email: { control: "text", description: "Email to which the verification code was sent." },
onSuccess: { action: "onSuccess", description: "Callback function when verification succeeds." },
onError: { action: "onError", description: "Callback function when verification fails." },
isUserSessionRequiredToVerify: {
control: "boolean",
description: "Indicates if user session is required for verification.",
},
}}>
{(args) => (
<StorybookTrpcProvider>
<VerifyCodeDialog {...args} />
</StorybookTrpcProvider>
)}
</Story>
</Canvas>

2
packages/ui/components/badge/badge.stories.mdx
View File

@ -15,7 +15,7 @@ import { Badge } from "./Badge";
<Meta title="UI/Badge" component={Badge} />
<Title title="Bages" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
<Title title="Badge" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
## Definition

2
packages/ui/components/breadcrumb/breadcrumb.stories.mdx
View File

@ -2,7 +2,7 @@ import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
import { Examples, Example, Note, Title, CustomArgsTable } from "@calcom/storybook/components";
import { Breadcrumb } from "./Breadcrumb";
import { Breadcrumb, BreadcrumbItem } from "./Breadcrumb";
<Meta title="UI/Breadcrumbs" component={Breadcrumb} />

52
packages/ui/components/dialog/Dialog.docs.mdx Normal file
View File

@ -0,0 +1,52 @@
import { Meta } from "@storybook/blocks";
import { Title, CustomArgsTable } from "@calcom/storybook/components";
import { Dialog, DialogContent, DialogFooter, DialogClose, DialogHeader } from "./Dialog";
import * as DialogStories from "./Dialog.stories";
<Meta of={DialogStories} />
<Title title="Dialog" suffix="Brief" subtitle="Version 1.0 — Last Update: 18 Aug 2023" />
## Definition
The `Dialog` component provides a flexible way to create dialogs in your application.
## Structure
The `Dialog` component is composed of the following components:
- `Dialog`: The main component that wraps the entire dialog. It manages the dialog's open and close states.
- `DialogContent`: Represents the content of the dialog. It can have different sizes, types, and an optional icon.
- `DialogHeader`: Renders the header of the dialog, including the title and subtitle.
- `DialogFooter`: Renders the footer of the dialog, which can contain action buttons.
- `DialogClose`: Renders a close button for the dialog.
## Components Arguments
### Dialog
<CustomArgsTable of={Dialog} />
### DialogContent
<CustomArgsTable of={DialogContent} />
### DialogHeader
<CustomArgsTable of={DialogHeader} />
### DialogFooter
<CustomArgsTable of={DialogFooter} />
### DialogClose
<CustomArgsTable of={DialogClose} />
{/* ## Dialog Story
<Canvas of={DialogStories.Default}/> */}

87
packages/ui/components/dialog/Dialog.stories.tsx Normal file
View File

@ -0,0 +1,87 @@
import type { Meta, StoryObj } from "@storybook/react";
import type { ComponentProps } from "react";
import { Dialog, DialogContent, DialogFooter, DialogClose, DialogHeader } from "./Dialog";
type StoryArgs = ComponentProps<typeof Dialog> &
ComponentProps<typeof DialogContent> &
ComponentProps<typeof DialogHeader> &
ComponentProps<typeof DialogFooter> &
ComponentProps<typeof DialogClose> & {
onClick: (...args: unknown[]) => void;
};
const meta: Meta<StoryArgs> = {
component: Dialog,
parameters: {
nextjs: {
appDirectory: true,
},
},
title: "UI/Dialog",
argTypes: {
title: {
control: "text",
},
description: {
control: "text",
},
type: {
options: ["creation", "confirmation"],
control: {
type: "select",
},
},
open: {
control: "boolean",
},
showDivider: {
control: "boolean",
},
disabled: {
control: "boolean",
},
color: {
options: ["minimal", "primary", "secondary", "emphasis"],
control: {
type: "select",
},
},
onClick: { action: "clicked" }, // this is a storybook action addons action
},
render: ({ title, description, type, open, showDivider, disabled, color, onClick }) => (
<Dialog open={open}>
<DialogContent type={type}>
<DialogHeader title={title} subtitle={description} />
<DialogFooter showDivider={showDivider}>
<DialogClose
disabled={disabled}
color={color}
onClick={() => {
const currentUrl = new URL(window.location.href);
currentUrl.searchParams.set("args", "open:false");
window.open(currentUrl.toString(), "_self");
onClick();
}}
/>
</DialogFooter>
</DialogContent>
</Dialog>
),
};
export default meta;
type Story = StoryObj<StoryArgs>;
export const Default: Story = {
name: "Dialog",
args: {
title: "Example Dialog",
description: "Example Dialog Description",
type: "creation",
open: true,
showDivider: false,
disabled: false,
color: "minimal",
},
};

119
packages/ui/components/dialog/dialog.stories.mdx
View File

@ -1,119 +0,0 @@
import { Canvas, Meta, Story } from "@storybook/addon-docs";
import { Title, CustomArgsTable } from "@calcom/storybook/components";
import { Dialog, DialogContent, DialogFooter, DialogClose, DialogHeader } from "./Dialog";
<Meta title="UI/Dialog" component={Dialog} />
<Title title="Dialog" suffix="Brief" subtitle="Version 1.0 — Last Update: 18 Aug 2023" />
## Definition
The `Dialog` component provides a flexible way to create dialogs in your application.
## Structure
The `Dialog` component is composed of the following components:
- `Dialog`: The main component that wraps the entire dialog. It manages the dialog's open and close states.
- `DialogContent`: Represents the content of the dialog. It can have different sizes, types, and an optional icon.
- `DialogHeader`: Renders the header of the dialog, including the title and subtitle.
- `DialogFooter`: Renders the footer of the dialog, which can contain action buttons.
- `DialogClose`: Renders a close button for the dialog.
## Components Arguments
### Dialog
<CustomArgsTable of={Dialog} />
### DialogContent
<CustomArgsTable of={DialogContent} />
### DialogHeader
<CustomArgsTable of={DialogHeader} />
### DialogFooter
<CustomArgsTable of={DialogFooter} />
### DialogClose
<CustomArgsTable of={DialogClose} />
## Dialog Story
<Canvas>
<Story
name="Dialog"
parameters={{
nextjs: {
appDirectory: true,
},
}}
args={{
title: "Example Dialog",
description: "Example Dialog Description",
type: "creation",
open: true,
showDivider: false,
disabled: false,
color: "minimal",
}}
argTypes={{
title: {
control: "text",
},
description: {
control: "text",
},
type: {
control: {
type: "select",
options: ["creation", "confirmation"],
},
},
open: {
control: "boolean",
},
showDivider: {
control: "boolean",
},
disabled: {
control: "boolean",
},
color: {
control: {
type: "select",
options: ["minimal", "primary", "secondary", "emphasis"],
},
},
onClick: { action: "clicked" },
}}>
{({ title, description, type, open, showDivider, disabled, color, onClick }) => (
<Dialog title="Default" open={open}>
<DialogContent type={type}>
<DialogHeader title={title} subtitle={description} />
<DialogFooter showDivider={showDivider}>
<DialogClose
disabled={disabled}
color={color}
onClick={() => {
const newPath = "?path=/story/ui-dialog--dialog&args=open:false";
window.open(newPath, "_self");
onClick();
}}
/>
</DialogFooter>
</DialogContent>
</Dialog>
)}
</Story>
</Canvas>

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

@ -1,7 +1,4 @@
import { TooltipProvider } from "@radix-ui/react-tooltip";
import {
Tooltip,
} from "@calcom/ui";
import { Tooltip } from "@radix-ui/react-tooltip";
import { Canvas, Meta, Story } from "@storybook/addon-docs";
import {
@ -69,17 +66,15 @@ The `Color Picker` takes in several props
{({ defaultValue, onChange, resetDefaultValue, className, popoverAlign }) => (
<VariantsTable titles={["Default"]} columnMinWidth={150}>
<VariantRow>
<TooltipProvider>
<Tooltip content="color picker">
<ColorPicker
defaultValue={defaultValue}
onChange={onChange}
resetDefaultValue={resetDefaultValue}
className={className}
popoverAlign={popoverAlign}
/>
</Tooltip>
</TooltipProvider>
<Tooltip content="color picker">
<ColorPicker
defaultValue={defaultValue}
onChange={onChange}
resetDefaultValue={resetDefaultValue}
className={className}
popoverAlign={popoverAlign}
/>
</Tooltip>
</VariantRow>
</VariantsTable>
)}

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

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

1
packages/ui/components/form/wizard/wizard.stories.mdx
View File

@ -1,5 +1,4 @@
import { Canvas, Meta, Story } from "@storybook/addon-docs";
import { useRouter } from "next/router";
import { CustomArgsTable, Title, VariantsTable, VariantRow } from "@calcom/storybook/components";

4
packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx
View File

@ -1,4 +1,4 @@
import { Meta, Story } from "@storybook/addon-docs/blocks";
import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
import {
Title,
@ -6,7 +6,7 @@ import {
Examples,
Example,
VariantsTable,
VariantsRow,
VariantRow,
} from "@calcom/storybook/components";
import { Plus } from "@calcom/ui/components/icon";

20
packages/ui/components/tooltip/Tooltip.docs.mdx Normal file
View File

@ -0,0 +1,20 @@
import { Canvas, Meta } from "@storybook/blocks";
import { Title, CustomArgsTable } from "@calcom/storybook/components";
import { TooltipProvider } from "@radix-ui/react-tooltip";
import { Tooltip } from "./Tooltip";
import * as TooltipStories from "./Tooltip.stories";
<Meta of={TooltipStories} />
<Title title="Tooltip" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023" />
## Definition
Tooltip components can be used to provide additional information about an element when the user hovers over or focuses on the element.
<TooltipProvider>
<CustomArgsTable of={Tooltip} />
</TooltipProvider>
<Canvas of={TooltipStories.Default}/>

37
packages/ui/components/tooltip/Tooltip.stories.tsx Normal file
View File

@ -0,0 +1,37 @@
import type { Meta, StoryObj } from "@storybook/react";
import { VariantRow, VariantsTable } from "@calcom/storybook/components";
import { Tooltip } from "./Tooltip";
const meta: Meta<typeof Tooltip> = {
component: Tooltip,
title: "UI/Tooltip",
};
export default meta;
type Story = StoryObj<typeof Tooltip>;
export const Default: Story = {
name: "Tooltip",
parameters: {
hoverMsg: "Click to copy",
alertMsg: "Copied!",
content: "Copy me!",
},
render: (_, { parameters: { content, hoverMsg, alertMsg } }) => (
<VariantsTable titles={[]}>
<VariantRow variant="Default">
<Tooltip content={`${hoverMsg}`}>
<span
className="dark:text-darkgray-50 bg-brand-default dark:bg-darkgray-900 rounded-md p-2 text-gray-100 hover:cursor-pointer"
onClick={() => {
alert(`${alertMsg}`);
}}>
{content}
</span>
</Tooltip>
</VariantRow>
</VariantsTable>
),
};

69
packages/ui/components/tooltip/tooltip.stories.mdx
View File

@ -1,69 +0,0 @@
import { TooltipProvider } from "@radix-ui/react-tooltip";
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
import {
Examples,
Example,
Note,
Title,
CustomArgsTable,
VariantsTable,
VariantRow,
} from "@calcom/storybook/components";
import Tooltip from "./Tooltip";
<Meta title="UI/Tooltip" component={Tooltip} />
<Title title="Tooltip" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023" />
## Definition
Tooltip components can be used to provide additional information about an element when the user hovers over or focuses on the element.
<CustomArgsTable of={Tooltip} />
<Canvas>
<Story
name="Tooltip"
args={{
alertMsg: "Copied!",
hoverMsg: "Copy to clipboard",
content: "Hover Me",
}}
argTypes={{
alertMsg: {
control: {
type: "text",
},
},
hoverMsg: {
control: {
type: "text",
},
},
content: {
control: {
type: "text",
},
},
}}>
{({ alertMsg, hoverMsg, content }) => (
<TooltipProvider>
<VariantsTable titles={[""]} columnMinWidth={150}>
<VariantRow variant="Default">
<Tooltip content={`${hoverMsg}`}>
<span
className="dark:text-darkgray-50 bg-brand-default dark:bg-darkgray-900 rounded-md p-2 text-gray-100 hover:cursor-pointer"
onClick={() => {
alert(`${alertMsg}`);
}}>
{content}
</span>
</Tooltip>
</VariantRow>
</VariantsTable>
</TooltipProvider>
)}
</Story>
</Canvas>

2
packages/ui/index.tsx
View File

@ -164,3 +164,5 @@ export {
} from "./components/command";
export { Popover, PopoverContent, PopoverTrigger } from "./components/popover";
export { StorybookTrpcProvider } from "./components/mocks/trpc";

2
packages/ui/package.json
View File

@ -31,6 +31,8 @@
"@radix-ui/react-portal": "^1.0.0",
"@radix-ui/react-select": "^0.1.1",
"@react-icons/all-files": "^4.1.0",
"@storybook/blocks": "^7.6.3",
"@storybook/react": "^7.6.3",
"@tanstack/react-query": "^4.3.9",
"@tanstack/react-table": "^8.9.3",
"@wojtekmaj/react-daterange-picker": "^3.3.1",