Merge branch 'main' into platform
This commit is contained in:
commit
cdca42eb6c
|
@ -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")));
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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: () => {},
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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}`
|
||||
);
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user