updates storybook config and fixes and updates stories (#12683)
add packages
This commit is contained in:
parent
9f50941904
commit
ca0d23529a
|
@ -8,7 +8,9 @@ pnpm-debug.log*
|
||||||
lerna-debug.log*
|
lerna-debug.log*
|
||||||
|
|
||||||
node_modules
|
node_modules
|
||||||
storybook-static
|
storybook-static/*
|
||||||
|
!storybook-static/favicon.ico
|
||||||
|
!storybook-static/sb-cover.jpg
|
||||||
dist
|
dist
|
||||||
dist-ssr
|
dist-ssr
|
||||||
*.local
|
*.local
|
||||||
|
|
|
@ -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");
|
const config: StorybookConfig = {
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
stories: [
|
stories: [
|
||||||
"../intro.stories.mdx",
|
"../intro.stories.mdx",
|
||||||
"../../../packages/ui/components/**/*.stories.mdx",
|
"../../../packages/ui/components/**/*.stories.mdx", // legacy SB6 stories
|
||||||
"../../../packages/atoms/**/*.stories.mdx",
|
|
||||||
"../../../packages/features/**/*.stories.mdx",
|
|
||||||
"../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
|
"../../../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: [
|
addons: [
|
||||||
|
@ -17,23 +19,23 @@ module.exports = {
|
||||||
getAbsolutePath("@storybook/addon-interactions"),
|
getAbsolutePath("@storybook/addon-interactions"),
|
||||||
getAbsolutePath("storybook-addon-rtl-direction"),
|
getAbsolutePath("storybook-addon-rtl-direction"),
|
||||||
getAbsolutePath("storybook-react-i18next"),
|
getAbsolutePath("storybook-react-i18next"),
|
||||||
getAbsolutePath("@storybook/addon-mdx-gfm"),
|
|
||||||
],
|
],
|
||||||
|
|
||||||
framework: {
|
framework: {
|
||||||
name: getAbsolutePath("@storybook/nextjs"),
|
name: getAbsolutePath("@storybook/nextjs") as "@storybook/nextjs",
|
||||||
|
|
||||||
options: {
|
options: {
|
||||||
builder: {
|
// builder: {
|
||||||
fsCache: true,
|
// fsCache: true,
|
||||||
lazyCompilation: true,
|
// lazyCompilation: true,
|
||||||
},
|
// },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
staticDirs: ["../public"],
|
staticDirs: ["../public"],
|
||||||
|
|
||||||
webpackFinal: async (config, { configType }) => {
|
webpackFinal: async (config, { configType }) => {
|
||||||
|
config.resolve = config.resolve || {};
|
||||||
config.resolve.fallback = {
|
config.resolve.fallback = {
|
||||||
fs: false,
|
fs: false,
|
||||||
assert: false,
|
assert: false,
|
||||||
|
@ -61,6 +63,8 @@ module.exports = {
|
||||||
zlib: false,
|
zlib: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
config.module = config.module || {};
|
||||||
|
config.module.rules = config.module.rules || [];
|
||||||
config.module.rules.push({
|
config.module.rules.push({
|
||||||
test: /\.css$/,
|
test: /\.css$/,
|
||||||
use: [
|
use: [
|
||||||
|
@ -85,6 +89,8 @@ module.exports = {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
|
|
||||||
function getAbsolutePath(value) {
|
function getAbsolutePath(value) {
|
||||||
return dirname(require.resolve(join(value, "package.json")));
|
return dirname(require.resolve(join(value, "package.json")));
|
||||||
}
|
}
|
|
@ -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";
|
|
||||||
};
|
|
|
@ -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";
|
||||||
|
};
|
|
@ -1,6 +1,6 @@
|
||||||
import { ArgsTable } from "@storybook/addon-docs";
|
import { ArgsTable } from "@storybook/addon-docs";
|
||||||
import { SortType } from "@storybook/components";
|
import type { SortType } from "@storybook/blocks";
|
||||||
import { PropDescriptor } from "@storybook/store";
|
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
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- ignore storybook addon types component as any so we have to do
|
||||||
type Component = any;
|
type Component = any;
|
||||||
|
|
|
@ -20,7 +20,10 @@
|
||||||
"@radix-ui/react-slider": "^1.0.0",
|
"@radix-ui/react-slider": "^1.0.0",
|
||||||
"@radix-ui/react-switch": "^1.0.0",
|
"@radix-ui/react-switch": "^1.0.0",
|
||||||
"@radix-ui/react-tooltip": "^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/nextjs": "^7.6.3",
|
||||||
|
"@storybook/preview-api": "^7.6.3",
|
||||||
"next": "^13.4.6",
|
"next": "^13.4.6",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
@ -33,7 +36,6 @@
|
||||||
"@storybook/addon-essentials": "^7.6.3",
|
"@storybook/addon-essentials": "^7.6.3",
|
||||||
"@storybook/addon-interactions": "^7.6.3",
|
"@storybook/addon-interactions": "^7.6.3",
|
||||||
"@storybook/addon-links": "^7.6.3",
|
"@storybook/addon-links": "^7.6.3",
|
||||||
"@storybook/addon-mdx-gfm": "^7.6.3",
|
|
||||||
"@storybook/nextjs": "^7.6.3",
|
"@storybook/nextjs": "^7.6.3",
|
||||||
"@storybook/react": "^7.6.3",
|
"@storybook/react": "^7.6.3",
|
||||||
"@storybook/testing-library": "^0.2.2",
|
"@storybook/testing-library": "^0.2.2",
|
||||||
|
|
|
@ -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}/>
|
|
@ -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={{}} />,
|
||||||
|
};
|
|
@ -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>
|
|
|
@ -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} /> */}
|
|
@ -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");
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
};
|
|
@ -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} />
|
|
@ -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>
|
|
|
@ -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>
|
||||||
|
),
|
||||||
|
};
|
|
@ -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,
|
id: 1,
|
||||||
title: "Quick check-in",
|
title: "Quick check-in",
|
||||||
slug: "quick-check-in",
|
slug: "quick-check-in",
|
||||||
eventName: "Quick check-in",
|
eventName: "Quick check-in",
|
||||||
description:
|
description:
|
||||||
"Use this event for a quick 15 minute catchup. Visit this long url to test the component https://cal.com/averylongurlwithoutspacesthatshouldntbreaklayout",
|
"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,
|
schedulingType: null,
|
||||||
length: 30,
|
length: 30,
|
||||||
locations: [{ type: "integrations:google:meet" }, { type: "integrations:zoom" }],
|
locations: [{ type: "integrations:google:meet" }, { type: "integrations:zoom" }],
|
||||||
};
|
} as PublicEvent; // TODO: complete mock and remove type assertion
|
||||||
|
|
|
@ -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>
|
|
|
@ -15,7 +15,7 @@ import { Badge } from "./Badge";
|
||||||
|
|
||||||
<Meta title="UI/Badge" component={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
|
## Definition
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||||
|
|
||||||
import { Examples, Example, Note, Title, CustomArgsTable } from "@calcom/storybook/components";
|
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} />
|
<Meta title="UI/Breadcrumbs" component={Breadcrumb} />
|
||||||
|
|
||||||
|
|
|
@ -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}/> */}
|
|
@ -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",
|
||||||
|
},
|
||||||
|
};
|
|
@ -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>
|
|
|
@ -1,7 +1,4 @@
|
||||||
import { TooltipProvider } from "@radix-ui/react-tooltip";
|
import { Tooltip } from "@radix-ui/react-tooltip";
|
||||||
import {
|
|
||||||
Tooltip,
|
|
||||||
} from "@calcom/ui";
|
|
||||||
import { Canvas, Meta, Story } from "@storybook/addon-docs";
|
import { Canvas, Meta, Story } from "@storybook/addon-docs";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -69,17 +66,15 @@ The `Color Picker` takes in several props
|
||||||
{({ defaultValue, onChange, resetDefaultValue, className, popoverAlign }) => (
|
{({ defaultValue, onChange, resetDefaultValue, className, popoverAlign }) => (
|
||||||
<VariantsTable titles={["Default"]} columnMinWidth={150}>
|
<VariantsTable titles={["Default"]} columnMinWidth={150}>
|
||||||
<VariantRow>
|
<VariantRow>
|
||||||
<TooltipProvider>
|
<Tooltip content="color picker">
|
||||||
<Tooltip content="color picker">
|
<ColorPicker
|
||||||
<ColorPicker
|
defaultValue={defaultValue}
|
||||||
defaultValue={defaultValue}
|
onChange={onChange}
|
||||||
onChange={onChange}
|
resetDefaultValue={resetDefaultValue}
|
||||||
resetDefaultValue={resetDefaultValue}
|
className={className}
|
||||||
className={className}
|
popoverAlign={popoverAlign}
|
||||||
popoverAlign={popoverAlign}
|
/>
|
||||||
/>
|
</Tooltip>
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
</VariantsTable>
|
</VariantsTable>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -48,7 +48,7 @@ describe("Tests for ColorPicker component", () => {
|
||||||
const colorInput = screen.getByRole("textbox");
|
const colorInput = screen.getByRole("textbox");
|
||||||
await act(async () => userEvent.clear(colorInput));
|
await act(async () => userEvent.clear(colorInput));
|
||||||
const newColorValue = "#00FF00";
|
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(
|
expect(screen.getByRole("button", { name: "pick colors" })).toHaveStyle(
|
||||||
`background-color: ${newColorValue}`
|
`background-color: ${newColorValue}`
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { Canvas, Meta, Story } from "@storybook/addon-docs";
|
import { Canvas, Meta, Story } from "@storybook/addon-docs";
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import { CustomArgsTable, Title, VariantsTable, VariantRow } from "@calcom/storybook/components";
|
import { CustomArgsTable, Title, VariantsTable, VariantRow } from "@calcom/storybook/components";
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { Meta, Story } from "@storybook/addon-docs/blocks";
|
import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Title,
|
Title,
|
||||||
|
@ -6,7 +6,7 @@ import {
|
||||||
Examples,
|
Examples,
|
||||||
Example,
|
Example,
|
||||||
VariantsTable,
|
VariantsTable,
|
||||||
VariantsRow,
|
VariantRow,
|
||||||
} from "@calcom/storybook/components";
|
} from "@calcom/storybook/components";
|
||||||
import { Plus } from "@calcom/ui/components/icon";
|
import { Plus } from "@calcom/ui/components/icon";
|
||||||
|
|
||||||
|
|
|
@ -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}/>
|
|
@ -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>
|
||||||
|
),
|
||||||
|
};
|
|
@ -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>
|
|
|
@ -164,3 +164,5 @@ export {
|
||||||
} from "./components/command";
|
} from "./components/command";
|
||||||
|
|
||||||
export { Popover, PopoverContent, PopoverTrigger } from "./components/popover";
|
export { Popover, PopoverContent, PopoverTrigger } from "./components/popover";
|
||||||
|
|
||||||
|
export { StorybookTrpcProvider } from "./components/mocks/trpc";
|
||||||
|
|
|
@ -31,6 +31,8 @@
|
||||||
"@radix-ui/react-portal": "^1.0.0",
|
"@radix-ui/react-portal": "^1.0.0",
|
||||||
"@radix-ui/react-select": "^0.1.1",
|
"@radix-ui/react-select": "^0.1.1",
|
||||||
"@react-icons/all-files": "^4.1.0",
|
"@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-query": "^4.3.9",
|
||||||
"@tanstack/react-table": "^8.9.3",
|
"@tanstack/react-table": "^8.9.3",
|
||||||
"@wojtekmaj/react-daterange-picker": "^3.3.1",
|
"@wojtekmaj/react-daterange-picker": "^3.3.1",
|
||||||
|
|
Loading…
Reference in New Issue
Block a user