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");
|
const path = require("path");
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
@ -8,26 +10,29 @@ module.exports = {
|
||||||
"../../../packages/features/**/*.stories.mdx",
|
"../../../packages/features/**/*.stories.mdx",
|
||||||
"../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
|
"../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
|
||||||
],
|
],
|
||||||
|
|
||||||
addons: [
|
addons: [
|
||||||
"@storybook/addon-links",
|
getAbsolutePath("@storybook/addon-links"),
|
||||||
"@storybook/addon-essentials",
|
getAbsolutePath("@storybook/addon-essentials"),
|
||||||
"@storybook/addon-interactions",
|
getAbsolutePath("@storybook/addon-interactions"),
|
||||||
"storybook-addon-rtl-direction",
|
getAbsolutePath("storybook-addon-rtl-direction"),
|
||||||
"storybook-react-i18next",
|
getAbsolutePath("storybook-react-i18next"),
|
||||||
"storybook-addon-next",
|
getAbsolutePath("@storybook/addon-mdx-gfm"),
|
||||||
"storybook-addon-next-router",
|
|
||||||
/*{
|
|
||||||
name: "storybook-addon-next",
|
|
||||||
options: {
|
|
||||||
nextConfigPath: path.resolve(__dirname, "../../web/next.config.js"),
|
|
||||||
},
|
|
||||||
},*/
|
|
||||||
],
|
],
|
||||||
framework: "@storybook/react",
|
|
||||||
core: {
|
framework: {
|
||||||
builder: "webpack5",
|
name: getAbsolutePath("@storybook/nextjs"),
|
||||||
|
|
||||||
|
options: {
|
||||||
|
builder: {
|
||||||
|
fsCache: true,
|
||||||
|
lazyCompilation: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
staticDirs: ["../public"],
|
staticDirs: ["../public"],
|
||||||
|
|
||||||
webpackFinal: async (config, { configType }) => {
|
webpackFinal: async (config, { configType }) => {
|
||||||
config.resolve.fallback = {
|
config.resolve.fallback = {
|
||||||
fs: false,
|
fs: false,
|
||||||
|
@ -72,5 +77,14 @@ module.exports = {
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
|
|
||||||
typescript: { reactDocgen: "react-docgen" },
|
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 { I18nextProvider } from "react-i18next";
|
||||||
|
|
||||||
import "../styles/globals.css";
|
import "../styles/globals.css";
|
||||||
|
@ -14,13 +12,7 @@ export const parameters = {
|
||||||
date: /Date$/,
|
date: /Date$/,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
nextRouter: {
|
|
||||||
pathname: "/",
|
|
||||||
asPath: "/",
|
|
||||||
query: {},
|
|
||||||
push() {},
|
|
||||||
Provider: AppRouterContext.Provider,
|
|
||||||
},
|
|
||||||
globals: {
|
globals: {
|
||||||
locale: "en",
|
locale: "en",
|
||||||
locales: {
|
locales: {
|
||||||
|
@ -31,11 +23,15 @@ export const parameters = {
|
||||||
i18n,
|
i18n,
|
||||||
};
|
};
|
||||||
|
|
||||||
addDecorator((storyFn) => (
|
const withI18next = (Story) => (
|
||||||
<I18nextProvider i18n={i18n}>
|
<I18nextProvider i18n={i18n}>
|
||||||
<div style={{ margin: "2rem" }}>{storyFn()}</div>
|
<div style={{ margin: "2rem" }}>
|
||||||
|
<Story />
|
||||||
|
</div>
|
||||||
</I18nextProvider>
|
</I18nextProvider>
|
||||||
));
|
);
|
||||||
|
|
||||||
|
export const decorators = [withI18next];
|
||||||
|
|
||||||
window.getEmbedNamespace = () => {
|
window.getEmbedNamespace = () => {
|
||||||
const url = new URL(document.URL);
|
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.
|
library, we will be adding more components as we go along.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Our{" "}
|
Our <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">Figma</a>
|
||||||
<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
|
library is available for anyone to view and use. If you have any questions or concerns, please reach out to
|
||||||
the design team.
|
the design team.
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "start-storybook -p 6006",
|
"dev": "storybook dev -p 6006",
|
||||||
"build": "build-storybook"
|
"build": "storybook build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@calcom/config": "*",
|
"@calcom/config": "*",
|
||||||
|
@ -20,23 +20,23 @@
|
||||||
"@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/nextjs": "^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",
|
||||||
"storybook-addon-next-router": "^4.0.2",
|
|
||||||
"storybook-addon-rtl-direction": "^0.0.19"
|
"storybook-addon-rtl-direction": "^0.0.19"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.19.6",
|
"@babel/core": "^7.19.6",
|
||||||
"@storybook/addon-actions": "^6.5.13",
|
"@storybook/addon-actions": "^7.6.3",
|
||||||
"@storybook/addon-essentials": "^6.5.13",
|
"@storybook/addon-designs": "^7.0.7",
|
||||||
"@storybook/addon-interactions": "^6.5.13",
|
"@storybook/addon-essentials": "^7.6.3",
|
||||||
"@storybook/addon-links": "^6.5.13",
|
"@storybook/addon-interactions": "^7.6.3",
|
||||||
"@storybook/builder-vite": "^0.2.4",
|
"@storybook/addon-links": "^7.6.3",
|
||||||
"@storybook/builder-webpack5": "^6.5.13",
|
"@storybook/addon-mdx-gfm": "^7.6.3",
|
||||||
"@storybook/manager-webpack5": "^6.5.13",
|
"@storybook/nextjs": "^7.6.3",
|
||||||
"@storybook/react": "^6.5.13",
|
"@storybook/react": "^7.6.3",
|
||||||
"@storybook/testing-library": "^0.0.13",
|
"@storybook/testing-library": "^0.2.2",
|
||||||
"@types/react": "18.0.26",
|
"@types/react": "18.0.26",
|
||||||
"@types/react-dom": "^18.0.9",
|
"@types/react-dom": "^18.0.9",
|
||||||
"@vitejs/plugin-react": "^2.2.0",
|
"@vitejs/plugin-react": "^2.2.0",
|
||||||
|
@ -46,9 +46,8 @@
|
||||||
"postcss": "^8.4.18",
|
"postcss": "^8.4.18",
|
||||||
"postcss-pseudo-companion-classes": "^0.1.1",
|
"postcss-pseudo-companion-classes": "^0.1.1",
|
||||||
"rollup-plugin-polyfill-node": "^0.10.2",
|
"rollup-plugin-polyfill-node": "^0.10.2",
|
||||||
"storybook-addon-designs": "^6.3.1",
|
"storybook": "^7.6.3",
|
||||||
"storybook-addon-next": "^1.6.9",
|
"storybook-react-i18next": "^2.0.9",
|
||||||
"storybook-react-i18next": "^1.1.2",
|
|
||||||
"tailwindcss": "^3.3.3",
|
"tailwindcss": "^3.3.3",
|
||||||
"typescript": "^4.9.4",
|
"typescript": "^4.9.4",
|
||||||
"vite": "^4.1.2"
|
"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 { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -9,6 +10,7 @@ import {
|
||||||
VariantColumn,
|
VariantColumn,
|
||||||
RowTitles,
|
RowTitles,
|
||||||
CustomArgsTable,
|
CustomArgsTable,
|
||||||
|
VariantRow,
|
||||||
} from "@calcom/storybook/components";
|
} from "@calcom/storybook/components";
|
||||||
import { Icon } from "@calcom/ui";
|
import { Icon } from "@calcom/ui";
|
||||||
|
|
||||||
|
@ -20,31 +22,36 @@ import { mockEvent } from "./event.mock.ts";
|
||||||
<Meta title="Features/Events/Meta" component={EventDetails} />
|
<Meta title="Features/Events/Meta" component={EventDetails} />
|
||||||
|
|
||||||
<Title title="Event Meta" suffix="Brief" subtitle="Version 2.0 — Last Update: 12 Dec 2022" />
|
<Title title="Event Meta" suffix="Brief" subtitle="Version 2.0 — Last Update: 12 Dec 2022" />
|
||||||
|
<TooltipProvider>
|
||||||
<Examples title="Combined event meta block">
|
<Examples title="Combined event meta block">
|
||||||
<div style={{ maxWidth: 300 }}>
|
<div style={{ maxWidth: 300 }}>
|
||||||
<Example title="Event Title">
|
<Example title="Event Title">
|
||||||
<EventTitle event={mockEvent} />
|
<EventTitle event={mockEvent} />
|
||||||
</Example>
|
</Example>
|
||||||
<Example title="Event Details">
|
<Example title="Event Details">
|
||||||
<EventDetails event={mockEvent} />
|
<EventDetails event={mockEvent} />
|
||||||
</Example>
|
</Example>
|
||||||
</div>
|
</div>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
</TooltipProvider>
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story name="All variants">
|
<Story name="All variants">
|
||||||
<VariantsTable titles={["Event Meta Components"]} columnMinWidth={150}>
|
<VariantsTable titles={["Event Meta Components"]} columnMinWidth={150}>
|
||||||
<VariantRow variant="">
|
<VariantRow variant="">
|
||||||
<div style={{ maxWidth: 300 }}>
|
<div style={{ maxWidth: 300 }}>
|
||||||
<EventMembers
|
<TooltipProvider>
|
||||||
users={[
|
<EventMembers
|
||||||
{ name: "Pro example", username: "pro" },
|
entity={{ name: "entityName" }}
|
||||||
{ name: "Team example", username: "team" },
|
profile={{ name: "profileName" }}
|
||||||
]}
|
users={[
|
||||||
/>
|
{ name: "Pro example", username: "pro" },
|
||||||
<EventTitle>Quick catch-up</EventTitle>
|
{ name: "Team example", username: "team" },
|
||||||
<EventDetails event={mockEvent} />
|
]}
|
||||||
|
/>
|
||||||
|
<EventTitle>Quick catch-up</EventTitle>
|
||||||
|
<EventDetails event={mockEvent} />
|
||||||
|
</TooltipProvider>
|
||||||
</div>
|
</div>
|
||||||
</VariantRow>
|
</VariantRow>
|
||||||
</VariantsTable>
|
</VariantsTable>
|
||||||
|
|
|
@ -24,6 +24,11 @@ This component contains an input form to capture a 6-digit verification code, er
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story
|
<Story
|
||||||
name="VerifyCodeDialog"
|
name="VerifyCodeDialog"
|
||||||
|
parameters={{
|
||||||
|
nextjs: {
|
||||||
|
appDirectory: true,
|
||||||
|
},
|
||||||
|
}}
|
||||||
args={{
|
args={{
|
||||||
isOpenDialog: true,
|
isOpenDialog: true,
|
||||||
setIsOpenDialog: () => {},
|
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 {
|
import {
|
||||||
Examples,
|
|
||||||
Example,
|
|
||||||
Note,
|
|
||||||
Title,
|
Title,
|
||||||
CustomArgsTable,
|
CustomArgsTable,
|
||||||
VariantsTable,
|
|
||||||
VariantRow,
|
|
||||||
} from "@calcom/storybook/components";
|
} from "@calcom/storybook/components";
|
||||||
|
|
||||||
import { events, blockingDates } from "../_storybookData";
|
import { events, blockingDates } from "../_storybookData";
|
||||||
import "../styles/styles.css";
|
import "../styles/styles.css";
|
||||||
import { CalendarEvent } from "../types/events";
|
|
||||||
import { Calendar } from "./Calendar";
|
import { Calendar } from "./Calendar";
|
||||||
|
|
||||||
<Meta title="UI/Calendar" component={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.
|
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>
|
<Canvas>
|
||||||
<Story
|
<Story
|
||||||
|
@ -74,6 +70,7 @@ export const Template = (args) => <Calendar {...args} />;
|
||||||
},
|
},
|
||||||
}}>
|
}}>
|
||||||
{({ ...args }) => (
|
{({ ...args }) => (
|
||||||
|
<TooltipProvider>
|
||||||
<Calendar
|
<Calendar
|
||||||
{...args}
|
{...args}
|
||||||
events={events}
|
events={events}
|
||||||
|
@ -81,6 +78,7 @@ export const Template = (args) => <Calendar {...args} />;
|
||||||
onEmptyCellClick={(date) => alert(date.toString())}
|
onEmptyCellClick={(date) => alert(date.toString())}
|
||||||
sortEvents
|
sortEvents
|
||||||
/>
|
/>
|
||||||
|
</TooltipProvider>
|
||||||
)}
|
)}
|
||||||
</Story>
|
</Story>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
|
@ -53,6 +53,11 @@ The `Dialog` component is composed of the following components:
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story
|
<Story
|
||||||
name="Dialog"
|
name="Dialog"
|
||||||
|
parameters={{
|
||||||
|
nextjs: {
|
||||||
|
appDirectory: true,
|
||||||
|
},
|
||||||
|
}}
|
||||||
args={{
|
args={{
|
||||||
title: "Example Dialog",
|
title: "Example Dialog",
|
||||||
description: "Example Dialog Description",
|
description: "Example Dialog Description",
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
import { TooltipProvider } from "@radix-ui/react-tooltip";
|
import { TooltipProvider } 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 {
|
||||||
|
|
|
@ -46,14 +46,9 @@ describe("Tests for ColorPicker component", () => {
|
||||||
render(<ColorPicker defaultValue={defaultValue} onChange={onChange} />);
|
render(<ColorPicker defaultValue={defaultValue} onChange={onChange} />);
|
||||||
|
|
||||||
const colorInput = screen.getByRole("textbox");
|
const colorInput = screen.getByRole("textbox");
|
||||||
await act(async () => {
|
await act(async () => userEvent.clear(colorInput));
|
||||||
userEvent.clear(colorInput);
|
|
||||||
});
|
|
||||||
const newColorValue = "#00FF00";
|
const newColorValue = "#00FF00";
|
||||||
await act(async () => {
|
await act(async () => userEvent.type(colorInput, newColorValue));
|
||||||
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}`
|
||||||
);
|
);
|
||||||
|
|
|
@ -27,6 +27,11 @@ To observe the actual step navigation behavior, please refer to the Storybook st
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story
|
<Story
|
||||||
|
parameters={{
|
||||||
|
nextjs: {
|
||||||
|
appDirectory: true,
|
||||||
|
},
|
||||||
|
}}
|
||||||
name="Basic"
|
name="Basic"
|
||||||
args={{
|
args={{
|
||||||
href: "/wizard",
|
href: "/wizard",
|
||||||
|
|
|
@ -22,6 +22,11 @@ Below are the props for `Image uploader`
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story
|
<Story
|
||||||
|
parameters={{
|
||||||
|
nextjs: {
|
||||||
|
appDirectory: true,
|
||||||
|
},
|
||||||
|
}}
|
||||||
name="ImageUploader"
|
name="ImageUploader"
|
||||||
play={({ canvasElement }) => {
|
play={({ canvasElement }) => {
|
||||||
const darkVariantContainer = canvasElement.querySelector("#dark-variant");
|
const darkVariantContainer = canvasElement.querySelector("#dark-variant");
|
||||||
|
|
|
@ -26,7 +26,7 @@ Defines the spacing guide used in Cal.coms design system
|
||||||
|
|
||||||
<Examples title="Spacing">
|
<Examples title="Spacing">
|
||||||
<TooltipPrimitive.Provider>
|
<TooltipPrimitive.Provider>
|
||||||
<>
|
<div className="flex flex-row gap-6">
|
||||||
<Example title="0"></Example>
|
<Example title="0"></Example>
|
||||||
<Example title="px">
|
<Example title="px">
|
||||||
<Tooltip content="1px">
|
<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>
|
<div className="bg-inverted h-4 w-10 rounded-sm"> </div>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</Example>
|
</Example>
|
||||||
</>
|
</div>
|
||||||
</TooltipPrimitive.Provider>
|
</TooltipPrimitive.Provider>
|
||||||
</Examples>
|
</Examples>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user