From a7352cf587447ae42986526ec0af62c8821daafd Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Wed, 19 Nov 2025 14:48:47 +0000 Subject: [PATCH] chore: remove ui-playground app (#25266) Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .github/CODEOWNERS | 1 - apps/ui-playground/.gitignore | 44 - apps/ui-playground/README.md | 36 - apps/ui-playground/app/(home)/layout.tsx | 9 - apps/ui-playground/app/(home)/page.tsx | 12 - apps/ui-playground/app/api/search/route.ts | 16 - .../app/components/icon-swatch.tsx | 21 - apps/ui-playground/app/components/render.tsx | 57 - apps/ui-playground/app/components/row.tsx | 7 - .../app/design/[[...slug]]/page.tsx | 56 - apps/ui-playground/app/design/layout.tsx | 17 - apps/ui-playground/app/global.css | 1028 ----------------- apps/ui-playground/app/layout.config.tsx | 26 - apps/ui-playground/app/layout.tsx | 36 - apps/ui-playground/app/source.ts | 13 - apps/ui-playground/components/MDXLayout.tsx | 19 - .../components/ui/BorderRadiusTable.tsx | 65 -- apps/ui-playground/components/ui/IconGrid.tsx | 372 ------ .../components/ui/ShadowTable.tsx | 126 -- .../components/ui/SpacingTable.tsx | 45 - .../ui-playground/components/ui/TypeTable.tsx | 103 -- .../components/ui/TypographyTable.tsx | 109 -- .../content/design/border-radius.mdx | 32 - apps/ui-playground/content/design/colors.mdx | 144 --- .../design/components/MultiInputField.mdx | 106 -- .../design/components/alert.actions.tsx | 28 - .../content/design/components/alert.basic.tsx | 22 - .../components/alert.customIconColor.tsx | 24 - .../design/components/alert.customIcons.tsx | 25 - .../content/design/components/alert.mdx | 42 - .../design/components/alert.noTitle.tsx | 21 - .../design/components/avatar.image.tsx | 22 - .../design/components/avatar.indicator.tsx | 25 - .../content/design/components/avatar.link.tsx | 18 - .../content/design/components/avatar.mdx | 103 -- .../design/components/avatar.shape.tsx | 24 - .../design/components/avatar.sizes.tsx | 29 - .../design/components/avatar.tooltip.tsx | 18 - .../content/design/components/badge.dots.tsx | 33 - .../content/design/components/badge.icons.tsx | 33 - .../design/components/badge.interactive.tsx | 33 - .../content/design/components/badge.mdx | 42 - .../design/components/badge.rounded.tsx | 33 - .../design/components/badge.variants.tsx | 42 - .../design/components/button.buttongroup.tsx | 63 - .../design/components/button.disabled.tsx | 42 - .../design/components/button.icons.tsx | 42 - .../design/components/button.loading.tsx | 44 - .../content/design/components/button.mdx | 98 -- .../design/components/button.onClick.tsx | 14 - .../design/components/button.variant.tsx | 43 - .../design/components/checkbox.basic.tsx | 31 - .../components/checkbox.description.tsx | 15 - .../design/components/checkbox.infoIcon.tsx | 16 - .../components/checkbox.labelPosition.tsx | 24 - .../content/design/components/checkbox.mdx | 35 - .../design/components/dialog.basic.tsx | 33 - .../design/components/dialog.confirmation.tsx | 37 - .../content/design/components/dialog.form.tsx | 56 - .../design/components/dialog.largeContent.tsx | 58 - .../content/design/components/dialog.mdx | 35 - .../components/dropdown.avatarTrigger.tsx | 38 - .../components/dropdown.buttonTrigger.tsx | 84 -- .../design/components/dropdown.complex.tsx | 86 -- .../content/design/components/dropdown.mdx | 28 - .../design/components/emptyScreen.basic.tsx | 17 - .../design/components/emptyScreen.border.tsx | 37 - .../components/emptyScreen.customIcon.tsx | 18 - .../components/emptyScreen.htmlContent.tsx | 28 - .../content/design/components/emptyScreen.mdx | 41 - .../components/emptyScreen.rawButton.tsx | 26 - .../content/design/components/form.addOns.tsx | 67 -- .../content/design/components/form.basic.tsx | 59 - .../content/design/components/form.mdx | 26 - .../design/components/form.specialFields.tsx | 53 - .../content/design/components/input.mdx | 35 - .../design/components/input.states.tsx | 37 - .../content/design/components/input.types.tsx | 46 - .../design/components/input.values.tsx | 31 - .../design/components/input.widths.tsx | 31 - .../multiInputField.customization.tsx | 71 -- .../components/multiInputField.paste.tsx | 76 -- .../components/multiInputField.states.tsx | 55 - .../design/components/navigation.items.tsx | 92 -- .../content/design/components/navigation.mdx | 20 - .../design/components/navigation.sidebar.tsx | 204 ---- .../content/design/components/pagination.mdx | 42 - .../content/design/components/pagination.tsx | 97 -- .../design/components/rangeslider.basic.tsx | 72 -- .../content/design/components/rangeslider.mdx | 22 - .../design/components/rangeslider.popover.tsx | 71 -- .../design/components/section.basic.tsx | 58 - .../content/design/components/section.mdx | 40 - .../design/components/section.subsection.tsx | 151 --- .../design/components/section.withIcon.tsx | 63 - .../design/components/select.async.tsx | 89 -- .../design/components/select.basic.tsx | 41 - .../design/components/select.disabled.tsx | 27 - .../design/components/select.field.tsx | 63 - .../design/components/select.grouped.tsx | 32 - .../design/components/select.loading.tsx | 21 - .../content/design/components/select.mdx | 57 - .../design/components/select.multi.tsx | 42 - .../content/design/components/switch.mdx | 53 - .../content/design/components/switch.tsx | 87 -- .../design/components/tabs.horizontal.tsx | 81 -- .../content/design/components/tabs.mdx | 20 - .../design/components/tabs.vertical.tsx | 72 -- .../design/components/textarea.basic.tsx | 18 - .../content/design/components/textarea.mdx | 27 - .../design/components/textarea.sizes.tsx | 30 - .../design/components/textarea.states.tsx | 31 - .../content/design/components/toast.basic.tsx | 76 -- .../content/design/components/toast.mdx | 28 - .../design/components/toast.variants.tsx | 36 - .../design/components/toggleGroup.basic.tsx | 171 --- .../content/design/components/toggleGroup.mdx | 40 - apps/ui-playground/content/design/icons.mdx | 31 - apps/ui-playground/content/design/index.mdx | 7 - apps/ui-playground/content/design/meta.json | 6 - apps/ui-playground/content/design/shadows.mdx | 58 - apps/ui-playground/content/design/spacing.mdx | 39 - .../content/design/typography.mdx | 156 --- apps/ui-playground/eslint.config.mjs | 3 - .../fonts/CalSans-SemiBold.woff2 | Bin 40932 -> 0 bytes apps/ui-playground/lib/colorUtils.ts | 77 -- apps/ui-playground/next.config.mjs | 17 - apps/ui-playground/package.json | 37 - apps/ui-playground/postcss.config.js | 8 - apps/ui-playground/source.config.ts | 22 - apps/ui-playground/tailwind.config.js | 21 - apps/ui-playground/tsconfig.json | 17 - 132 files changed, 7366 deletions(-) delete mode 100644 apps/ui-playground/.gitignore delete mode 100644 apps/ui-playground/README.md delete mode 100644 apps/ui-playground/app/(home)/layout.tsx delete mode 100644 apps/ui-playground/app/(home)/page.tsx delete mode 100644 apps/ui-playground/app/api/search/route.ts delete mode 100644 apps/ui-playground/app/components/icon-swatch.tsx delete mode 100644 apps/ui-playground/app/components/render.tsx delete mode 100644 apps/ui-playground/app/components/row.tsx delete mode 100644 apps/ui-playground/app/design/[[...slug]]/page.tsx delete mode 100644 apps/ui-playground/app/design/layout.tsx delete mode 100644 apps/ui-playground/app/global.css delete mode 100644 apps/ui-playground/app/layout.config.tsx delete mode 100644 apps/ui-playground/app/layout.tsx delete mode 100644 apps/ui-playground/app/source.ts delete mode 100644 apps/ui-playground/components/MDXLayout.tsx delete mode 100644 apps/ui-playground/components/ui/BorderRadiusTable.tsx delete mode 100644 apps/ui-playground/components/ui/IconGrid.tsx delete mode 100644 apps/ui-playground/components/ui/ShadowTable.tsx delete mode 100644 apps/ui-playground/components/ui/SpacingTable.tsx delete mode 100644 apps/ui-playground/components/ui/TypeTable.tsx delete mode 100644 apps/ui-playground/components/ui/TypographyTable.tsx delete mode 100644 apps/ui-playground/content/design/border-radius.mdx delete mode 100644 apps/ui-playground/content/design/colors.mdx delete mode 100644 apps/ui-playground/content/design/components/MultiInputField.mdx delete mode 100644 apps/ui-playground/content/design/components/alert.actions.tsx delete mode 100644 apps/ui-playground/content/design/components/alert.basic.tsx delete mode 100644 apps/ui-playground/content/design/components/alert.customIconColor.tsx delete mode 100644 apps/ui-playground/content/design/components/alert.customIcons.tsx delete mode 100644 apps/ui-playground/content/design/components/alert.mdx delete mode 100644 apps/ui-playground/content/design/components/alert.noTitle.tsx delete mode 100644 apps/ui-playground/content/design/components/avatar.image.tsx delete mode 100644 apps/ui-playground/content/design/components/avatar.indicator.tsx delete mode 100644 apps/ui-playground/content/design/components/avatar.link.tsx delete mode 100644 apps/ui-playground/content/design/components/avatar.mdx delete mode 100644 apps/ui-playground/content/design/components/avatar.shape.tsx delete mode 100644 apps/ui-playground/content/design/components/avatar.sizes.tsx delete mode 100644 apps/ui-playground/content/design/components/avatar.tooltip.tsx delete mode 100644 apps/ui-playground/content/design/components/badge.dots.tsx delete mode 100644 apps/ui-playground/content/design/components/badge.icons.tsx delete mode 100644 apps/ui-playground/content/design/components/badge.interactive.tsx delete mode 100644 apps/ui-playground/content/design/components/badge.mdx delete mode 100644 apps/ui-playground/content/design/components/badge.rounded.tsx delete mode 100644 apps/ui-playground/content/design/components/badge.variants.tsx delete mode 100644 apps/ui-playground/content/design/components/button.buttongroup.tsx delete mode 100644 apps/ui-playground/content/design/components/button.disabled.tsx delete mode 100644 apps/ui-playground/content/design/components/button.icons.tsx delete mode 100644 apps/ui-playground/content/design/components/button.loading.tsx delete mode 100644 apps/ui-playground/content/design/components/button.mdx delete mode 100644 apps/ui-playground/content/design/components/button.onClick.tsx delete mode 100644 apps/ui-playground/content/design/components/button.variant.tsx delete mode 100644 apps/ui-playground/content/design/components/checkbox.basic.tsx delete mode 100644 apps/ui-playground/content/design/components/checkbox.description.tsx delete mode 100644 apps/ui-playground/content/design/components/checkbox.infoIcon.tsx delete mode 100644 apps/ui-playground/content/design/components/checkbox.labelPosition.tsx delete mode 100644 apps/ui-playground/content/design/components/checkbox.mdx delete mode 100644 apps/ui-playground/content/design/components/dialog.basic.tsx delete mode 100644 apps/ui-playground/content/design/components/dialog.confirmation.tsx delete mode 100644 apps/ui-playground/content/design/components/dialog.form.tsx delete mode 100644 apps/ui-playground/content/design/components/dialog.largeContent.tsx delete mode 100644 apps/ui-playground/content/design/components/dialog.mdx delete mode 100644 apps/ui-playground/content/design/components/dropdown.avatarTrigger.tsx delete mode 100644 apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx delete mode 100644 apps/ui-playground/content/design/components/dropdown.complex.tsx delete mode 100644 apps/ui-playground/content/design/components/dropdown.mdx delete mode 100644 apps/ui-playground/content/design/components/emptyScreen.basic.tsx delete mode 100644 apps/ui-playground/content/design/components/emptyScreen.border.tsx delete mode 100644 apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx delete mode 100644 apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx delete mode 100644 apps/ui-playground/content/design/components/emptyScreen.mdx delete mode 100644 apps/ui-playground/content/design/components/emptyScreen.rawButton.tsx delete mode 100644 apps/ui-playground/content/design/components/form.addOns.tsx delete mode 100644 apps/ui-playground/content/design/components/form.basic.tsx delete mode 100644 apps/ui-playground/content/design/components/form.mdx delete mode 100644 apps/ui-playground/content/design/components/form.specialFields.tsx delete mode 100644 apps/ui-playground/content/design/components/input.mdx delete mode 100644 apps/ui-playground/content/design/components/input.states.tsx delete mode 100644 apps/ui-playground/content/design/components/input.types.tsx delete mode 100644 apps/ui-playground/content/design/components/input.values.tsx delete mode 100644 apps/ui-playground/content/design/components/input.widths.tsx delete mode 100644 apps/ui-playground/content/design/components/multiInputField.customization.tsx delete mode 100644 apps/ui-playground/content/design/components/multiInputField.paste.tsx delete mode 100644 apps/ui-playground/content/design/components/multiInputField.states.tsx delete mode 100644 apps/ui-playground/content/design/components/navigation.items.tsx delete mode 100644 apps/ui-playground/content/design/components/navigation.mdx delete mode 100644 apps/ui-playground/content/design/components/navigation.sidebar.tsx delete mode 100644 apps/ui-playground/content/design/components/pagination.mdx delete mode 100644 apps/ui-playground/content/design/components/pagination.tsx delete mode 100644 apps/ui-playground/content/design/components/rangeslider.basic.tsx delete mode 100644 apps/ui-playground/content/design/components/rangeslider.mdx delete mode 100644 apps/ui-playground/content/design/components/rangeslider.popover.tsx delete mode 100644 apps/ui-playground/content/design/components/section.basic.tsx delete mode 100644 apps/ui-playground/content/design/components/section.mdx delete mode 100644 apps/ui-playground/content/design/components/section.subsection.tsx delete mode 100644 apps/ui-playground/content/design/components/section.withIcon.tsx delete mode 100644 apps/ui-playground/content/design/components/select.async.tsx delete mode 100644 apps/ui-playground/content/design/components/select.basic.tsx delete mode 100644 apps/ui-playground/content/design/components/select.disabled.tsx delete mode 100644 apps/ui-playground/content/design/components/select.field.tsx delete mode 100644 apps/ui-playground/content/design/components/select.grouped.tsx delete mode 100644 apps/ui-playground/content/design/components/select.loading.tsx delete mode 100644 apps/ui-playground/content/design/components/select.mdx delete mode 100644 apps/ui-playground/content/design/components/select.multi.tsx delete mode 100644 apps/ui-playground/content/design/components/switch.mdx delete mode 100644 apps/ui-playground/content/design/components/switch.tsx delete mode 100644 apps/ui-playground/content/design/components/tabs.horizontal.tsx delete mode 100644 apps/ui-playground/content/design/components/tabs.mdx delete mode 100644 apps/ui-playground/content/design/components/tabs.vertical.tsx delete mode 100644 apps/ui-playground/content/design/components/textarea.basic.tsx delete mode 100644 apps/ui-playground/content/design/components/textarea.mdx delete mode 100644 apps/ui-playground/content/design/components/textarea.sizes.tsx delete mode 100644 apps/ui-playground/content/design/components/textarea.states.tsx delete mode 100644 apps/ui-playground/content/design/components/toast.basic.tsx delete mode 100644 apps/ui-playground/content/design/components/toast.mdx delete mode 100644 apps/ui-playground/content/design/components/toast.variants.tsx delete mode 100644 apps/ui-playground/content/design/components/toggleGroup.basic.tsx delete mode 100644 apps/ui-playground/content/design/components/toggleGroup.mdx delete mode 100644 apps/ui-playground/content/design/icons.mdx delete mode 100644 apps/ui-playground/content/design/index.mdx delete mode 100644 apps/ui-playground/content/design/meta.json delete mode 100644 apps/ui-playground/content/design/shadows.mdx delete mode 100644 apps/ui-playground/content/design/spacing.mdx delete mode 100644 apps/ui-playground/content/design/typography.mdx delete mode 100644 apps/ui-playground/eslint.config.mjs delete mode 100644 apps/ui-playground/fonts/CalSans-SemiBold.woff2 delete mode 100644 apps/ui-playground/lib/colorUtils.ts delete mode 100644 apps/ui-playground/next.config.mjs delete mode 100644 apps/ui-playground/package.json delete mode 100644 apps/ui-playground/postcss.config.js delete mode 100644 apps/ui-playground/source.config.ts delete mode 100644 apps/ui-playground/tailwind.config.js delete mode 100644 apps/ui-playground/tsconfig.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 525c155e22..ca8815224f 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,6 +1,5 @@ /**/package.json @calcom/Foundation /apps/api/**/* @calcom/API -/apps/ui-playground/**/* @calcom/Consumer @calcom/Foundation /apps/web/**/layout.tsx @calcom/Consumer @calcom/Foundation /apps/web/lib/csp.ts @calcom/Foundation /apps/web/lib/buildNonce.ts @calcom/Foundation diff --git a/apps/ui-playground/.gitignore b/apps/ui-playground/.gitignore deleted file mode 100644 index b4ae1e735b..0000000000 --- a/apps/ui-playground/.gitignore +++ /dev/null @@ -1,44 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.* -.yarn/* -!.yarn/patches -!.yarn/plugins -!.yarn/releases -!.yarn/versions - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* -.pnpm-debug.log* - -# env files (can opt-in for committing if needed) -.env* - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts - -# Source maps -*.source/* diff --git a/apps/ui-playground/README.md b/apps/ui-playground/README.md deleted file mode 100644 index e215bc4ccf..0000000000 --- a/apps/ui-playground/README.md +++ /dev/null @@ -1,36 +0,0 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). - -## Getting Started - -First, run the development server: - -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/apps/ui-playground/app/(home)/layout.tsx b/apps/ui-playground/app/(home)/layout.tsx deleted file mode 100644 index a44af49c2a..0000000000 --- a/apps/ui-playground/app/(home)/layout.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { HomeLayout } from "fumadocs-ui/layouts/home"; -import type { ReactNode } from "react"; - -import { baseOptions } from "../layout.config"; - -export default function Layout({ children }: { children: ReactNode }) { - // @ts-expect-error weird type check - return {children}; -} diff --git a/apps/ui-playground/app/(home)/page.tsx b/apps/ui-playground/app/(home)/page.tsx deleted file mode 100644 index b7f52d73a3..0000000000 --- a/apps/ui-playground/app/(home)/page.tsx +++ /dev/null @@ -1,12 +0,0 @@ -export default function Page() { - return ( -
-
-

- Open UI for absolutely -
everyone -

-
-
- ); -} diff --git a/apps/ui-playground/app/api/search/route.ts b/apps/ui-playground/app/api/search/route.ts deleted file mode 100644 index e10d2f3b12..0000000000 --- a/apps/ui-playground/app/api/search/route.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { componentSource } from "@/app/source"; -import { createSearchAPI } from "fumadocs-core/search/server"; - -const indexes = [componentSource].flatMap((src) => - src.getPages().map((page) => ({ - title: page.data.title, - description: page.data.description, - structuredData: page.data.structuredData, - id: page.url, - url: page.url, - })) -); - -export const { GET } = createSearchAPI("advanced", { - indexes, -}); diff --git a/apps/ui-playground/app/components/icon-swatch.tsx b/apps/ui-playground/app/components/icon-swatch.tsx deleted file mode 100644 index 0fbc6cce8a..0000000000 --- a/apps/ui-playground/app/components/icon-swatch.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { PropsWithChildren } from "react"; - -type Props = { - name: string; -}; -export const Icon: React.FC> = (props) => { - return ( -
-
- {props.children} -
- - {"<"} - {props.name} - {"/>"} - -
- ); -}; - -Icon.displayName = "Icon"; diff --git a/apps/ui-playground/app/components/render.tsx b/apps/ui-playground/app/components/render.tsx deleted file mode 100644 index 10f0437ecc..0000000000 --- a/apps/ui-playground/app/components/render.tsx +++ /dev/null @@ -1,57 +0,0 @@ -"use client"; - -import { type PropsWithChildren, useState } from "react"; - -import className from "@calcom/ui/classNames"; -import { Button } from "@calcom/ui/components/button"; - -type Props = { - customCodeSnippet?: string; - className?: string; -}; - -export const RenderComponentWithSnippet: React.FC> = (props) => { - const [open, setOpen] = useState(false); - // const snippet = - // props.customCodeSnippet ?? - // reactElementToJSXString(props.children, { - // showFunctions: true, - // useBooleanShorthandSyntax: true, - - // displayName: (node) => { - // // @ts-ignore - // return node?.type.displayName ?? node?.type ?? "Unknown"; - // }, - // }); - return ( -
-
{props.children}
- -
- -
- -
-
- {/*
-            {snippet
-              .split("\n")
-              .map((_line, i) => i + 1)
-              .join("\n")}
-          
-
{snippet}
*/} -
-
-
- ); -}; diff --git a/apps/ui-playground/app/components/row.tsx b/apps/ui-playground/app/components/row.tsx deleted file mode 100644 index f5ca400e44..0000000000 --- a/apps/ui-playground/app/components/row.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import type { PropsWithChildren } from "react"; - -export const Row: React.FC = (props) => { - return
{props.children}
; -}; - -Row.displayName = "Row"; diff --git a/apps/ui-playground/app/design/[[...slug]]/page.tsx b/apps/ui-playground/app/design/[[...slug]]/page.tsx deleted file mode 100644 index 6a14cb8c87..0000000000 --- a/apps/ui-playground/app/design/[[...slug]]/page.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { componentSource } from "@/app/source"; -import { TooltipProvider } from "@radix-ui/react-tooltip"; -import { createTypeTable } from "fumadocs-typescript/ui"; -import defaultMdxComponents from "fumadocs-ui/mdx"; -import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page"; -import type { Metadata } from "next"; -import { notFound } from "next/navigation"; -import { Toaster } from "react-hot-toast"; - -export default async function Page(props: { params: Promise<{ slug?: string[] }> }) { - const params = await props.params; - - const page = componentSource.getPage(params.slug); - - if (!page) { - notFound(); - } - const { AutoTypeTable } = createTypeTable(); - - const MDX = page.data.body; - - return ( - <> - {/* @ts-expect-error idk why fumadocs doersnt like this */} - - - {page.data.title} - - {page.data.description} - - - - {/* @ts-expect-error idk why fumadocs doersnt like this */} - - - - - - ); -} - -export async function generateStaticParams() { - return componentSource.generateParams(); -} - -export async function generateMetadata({ params }: { params: Promise<{ slug?: string[] }> }) { - const page = componentSource.getPage((await params).slug); - if (!page) { - notFound(); - } - - return { - title: page.data.title, - description: page.data.description, - } satisfies Metadata; -} diff --git a/apps/ui-playground/app/design/layout.tsx b/apps/ui-playground/app/design/layout.tsx deleted file mode 100644 index 270fa5319f..0000000000 --- a/apps/ui-playground/app/design/layout.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { componentSource } from "@/app/source"; -import { TooltipProvider } from "@radix-ui/react-tooltip"; -import { DocsLayout } from "fumadocs-ui/layouts/notebook"; -import type { ReactNode } from "react"; - -import { IconSprites } from "@calcom/ui/components/icon"; - -import { baseOptions } from "../layout.config"; - -export default function Layout({ children }: { children: ReactNode }) { - return ( - - {children} - - - ); -} diff --git a/apps/ui-playground/app/global.css b/apps/ui-playground/app/global.css deleted file mode 100644 index e2544b2389..0000000000 --- a/apps/ui-playground/app/global.css +++ /dev/null @@ -1,1028 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; -/** -* Add css variables here as well for light mode in addition to tailwind.config to avoid FOUC -*/ -:root { - /* Spacing Scale */ - --cal-spacing-0: 0px; - --cal-spacing-px: 1px; - --cal-spacing-0_5: 0.125rem; /* 2px */ - --cal-spacing-1: 0.25rem; /* 4px */ - --cal-spacing-1_5: 0.375rem; /* 6px */ - --cal-spacing-2: 0.5rem; /* 8px */ - --cal-spacing-2_5: 0.625rem; /* 10px */ - --cal-spacing-3: 0.75rem; /* 12px */ - --cal-spacing-3_5: 0.875rem; /* 14px */ - --cal-spacing-4: 1rem; /* 16px */ - --cal-spacing-5: 1.25rem; /* 20px */ - --cal-spacing-6: 1.5rem; /* 24px */ - --cal-spacing-7: 1.75rem; /* 28px */ - --cal-spacing-8: 2rem; /* 32px */ - --cal-spacing-9: 2.25rem; /* 36px */ - --cal-spacing-10: 2.5rem; /* 40px */ - --cal-spacing-11: 2.75rem; /* 44px */ - --cal-spacing-12: 3rem; /* 48px */ - --cal-spacing-14: 3.5rem; /* 56px */ - --cal-spacing-16: 4rem; /* 64px */ - --cal-spacing-20: 5rem; /* 80px */ - --cal-spacing-24: 6rem; /* 96px */ - --cal-spacing-28: 7rem; /* 112px */ - --cal-spacing-32: 8rem; /* 128px */ - --cal-spacing-36: 9rem; /* 144px */ - --cal-spacing-40: 10rem; /* 160px */ - --cal-spacing-44: 11rem; /* 176px */ - --cal-spacing-48: 12rem; /* 192px */ - --cal-spacing-52: 13rem; /* 208px */ - --cal-spacing-56: 14rem; /* 224px */ - --cal-spacing-60: 15rem; /* 240px */ - --cal-spacing-64: 16rem; /* 256px */ - --cal-spacing-72: 18rem; /* 288px */ - --cal-spacing-80: 20rem; /* 320px */ - --cal-spacing-96: 24rem; /* 384px */ - - /* Border Radius */ - --cal-radius-none: 0px; - --cal-radius-sm: 0.125rem; /* 2px */ - --cal-radius: 0.25rem; /* 4px */ - --cal-radius-md: 0.375rem; /* 6px */ - --cal-radius-lg: 0.5rem; /* 8px */ - --cal-radius-xl: 0.75rem; /* 12px */ - --cal-radius-2xl: 1rem; /* 16px */ - --cal-radius-3xl: 1.5rem; /* 24px */ - --cal-radius-full: 9999px; - - /* Background Standard */ - --cal-bg-emphasis: hsla(220, 13%, 91%, 1); /* gray.200 - active items and emphasising */ - --cal-bg: hsla(0, 0%, 100%, 1); /* white - default background */ - --cal-bg-subtle: hsla(220, 14%, 94%, 1); /* gray.100 - hovering on items, subtle raising */ - --cal-bg-muted: hsla(210, 20%, 97%, 1); /* gray.50 - large items, sidebar, sections */ - --cal-bg-inverted: hsla(210, 30%, 4%, 1); /* gray.900 - tooltips */ - - /* Background Primary */ - --cal-bg-primary: hsla(214, 30%, 16%, 1); /* stone-100 */ - --cal-bg-primary-emphasis: hsla(220, 6%, 25%, 1); /* stone-800 */ - --cal-bg-primary-muted: hsla(220, 14%, 94%, 1); /* stone-400 */ - - /* Background Brand */ - --cal-bg-brand: hsla(214, 30%, 16%, 1); /* gray-50 */ - --cal-bg-brand-emphasis: hsla(220, 6%, 25%, 1); /* stone-100 */ - --cal-bg-brand-muted: hsla(220, 14%, 94%, 1); /* stone-100 */ - - /* Background Semantic */ - --cal-bg-semantic-info-subtle: hsla(212, 88%, 97%, 1); /* blue-100 */ - --cal-bg-semantic-info-emphasis: hsla(236, 80%, 25%, 1); /* blue-500 */ - --cal-bg-semantic-success-subtle: hsla(167, 54%, 93%, 1); /* green-100 */ - --cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */ - --cal-bg-semantic-attention-subtle: hsla(34, 100%, 92%, 1); /* orange-100 */ - --cal-bg-semantic-attention-emphasis: hsla(15, 79%, 34%, 1); /* orange-500 */ - --cal-bg-semantic-error-subtle: hsla(0, 93%, 94%, 1); /* red-100 */ - --cal-bg-semantic-error-emphasis: hsla(0, 63%, 24%, 1); /* red-500 */ - - /* Background Visualization */ - --cal-bg-visualization-1-subtle: hsla(326, 78%, 95%, 1); /* pink-100 */ - --cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1); /* pink-500 */ - --cal-bg-visualization-2-subtle: hsla(256, 86%, 91%, 1); /* purple-100 */ - --cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1); /* purple-500 */ - --cal-bg-visualization-3-subtle: hsla(217, 87%, 91%, 1); /* blue-100 */ - --cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1); /* blue-500 */ - --cal-bg-visualization-4-subtle: hsla(167, 54%, 93%, 1); /* green-100 */ - --cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */ - --cal-bg-visualization-5-subtle: hsla(55, 97%, 88%, 1); /* yellow-100 */ - --cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1); /* yellow-500 */ - --cal-bg-visualization-6-subtle: hsla(34, 100%, 92%, 1); /* orange-100 */ - --cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1); /* orange-500 */ - --cal-bg-visualization-7-subtle: hsla(0, 96%, 89%, 1); /* red-100 */ - --cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1); /* red-500 */ - - /* Launch Background */ - --cal-bg-launch-dark: hsla(242, 53%, 10%, 1); /* #0D0C27 - Launch card dark background */ - - /* Legacy Background Components - Consider deprecating */ - --cal-bg-info: hsla(221, 91%, 93%, 1); /* #dee9fc - info backgrounds */ - --cal-bg-success: hsla(142, 76%, 94%, 1); /* #e2fbe8 - success backgrounds */ - --cal-bg-attention: hsla(33, 100%, 92%, 1); /* #fceed8 - attention backgrounds */ - --cal-bg-error: hsla(3, 66%, 93%, 1); /* #f9e3e2 - error backgrounds */ - --cal-bg-dark-error: hsla(2, 55%, 30%, 1); /* Keeping existing dark error */ - - /* Borders */ - --cal-border-emphasis: hsla(218, 11%, 65%, 1); /* gray.400 - input:hover */ - --cal-border: hsla(216, 12%, 84%, 1); /* gray.300 - inputs */ - --cal-border-subtle: hsla(220, 13%, 91%, 1); /* gray.200 - container borders */ - --cal-border-muted: hsla(220, 14%, 94%, 1); /* gray.100 */ - --cal-border-error: hsla(0, 96%, 89%, 1); /* Keeping existing error border */ - --cal-border-semantic-error: hsla(0, 96%, 89%, 1); - - /* Content/Text Standard */ - --cal-text-emphasis: hsla(210, 30%, 4%, 1); /* gray-900 */ - --cal-text: hsla(220, 6%, 25%, 1); /* gray-700 */ - --cal-text-subtle: hsla(220, 9%, 46%, 1); /* gray-500 */ - --cal-text-muted: hsla(218, 11%, 65%, 1); /* gray-400 */ - --cal-text-inverted: hsla(0, 0%, 100%, 1); /* white */ - - /* Content/Text Semantic */ - --cal-text-semantic-info: hsla(236, 80%, 25%, 1); /* blue-800 */ - --cal-text-semantic-success: hsla(150, 84%, 22%, 1); /* green-800 */ - --cal-text-semantic-attention: hsla(15, 79%, 34%, 1); /* orange-800 */ - --cal-text-semantic-error: hsla(0, 63%, 24%, 1); /* red-800 */ - - /* Border/Semantic Subtle */ - --cal-border-semantic-attention-subtle: hsla(32, 98%, 83%, 1); - --cal-border-semantic-error-subtle: hsla(0, 96%, 89%, 1); - - /* Content/Text Visualization */ - --cal-text-visualization-1: hsla(332, 79%, 25%, 1); /* pink-800 */ - --cal-text-visualization-2: hsla(270, 91%, 25%, 1); /* purple-800 */ - --cal-text-visualization-3: hsla(217, 91%, 25%, 1); /* blue-800 */ - --cal-text-visualization-4: hsla(142, 71%, 25%, 1); /* green-800 */ - --cal-text-visualization-5: hsla(45, 93%, 25%, 1); /* yellow-800 */ - --cal-text-visualization-6: hsla(24, 95%, 25%, 1); /* orange-800 */ - --cal-text-visualization-7: hsla(0, 84%, 25%, 1); /* red-800 */ - - /* Legacy Content/Text Components - Consider deprecating */ - --cal-text-info: hsla(225, 57%, 33%, 1); /* #253985 - interactive text/icons */ - --cal-text-success: hsla(144, 34%, 24%, 1); /* #285231 */ - --cal-text-attention: hsla(16, 62%, 28%, 1); /* Keeping existing attention text */ - --cal-text-error: hsla(0, 63%, 31%, 1); /* Keeping existing error text */ - - /* Brand */ - --cal-brand: hsla(221, 39%, 11%, 1); /* Keeping existing brand color */ - --cal-brand-emphasis: hsla(0, 0%, 6%, 1); /* Keeping existing brand emphasis */ - --cal-brand-text: hsla(0, 0%, 100%, 1); /* white */ -} -.dark { - /* Background Standard */ - --cal-bg-emphasis: hsla(0, 0%, 25%, 1); /* stone-700 */ - --cal-bg: hsla(0, 0%, 6%, 1); /* stone-950 */ - --cal-bg-subtle: hsla(0, 0%, 15%, 1); /* stone-800 */ - --cal-bg-muted: hsla(0, 0%, 9%, 1); /* stone-900 */ - --cal-bg-inverted: hsla(0, 0%, 98%, 1); /* stone-50 */ - - /* Background Primary */ - --cal-bg-primary: hsla(0, 0%, 96%, 1); /* stone-100 */ - --cal-bg-primary-emphasis: hsla(0, 0%, 64%, 1); /* stone-800 */ - --cal-bg-primary-muted: hsla(0, 0%, 15%, 1); /* stone-400 */ - - /* Background Brand */ - --cal-bg-brand: hsla(0, 0%, 98%, 1); /* gray-50 */ - --cal-bg-brand-emphasis: hsla(0, 0%, 96%, 1); /* stone-100 */ - --cal-bg-brand-muted: hsla(0, 0%, 96%, 1); /* stone-100 */ - - /* Background Semantic */ - --cal-bg-semantic-info-subtle: hsla(236, 80%, 8%, 1); /* blue-800 */ - --cal-bg-semantic-info-emphasis: hsla(229, 90%, 74%, 1); /* blue-500 */ - --cal-bg-semantic-success-subtle: hsla(148, 88%, 16%, 1); /* green-800 */ - --cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */ - --cal-bg-semantic-attention-subtle: hsla(21, 86%, 8%, 1); /* orange-800 */ - --cal-bg-semantic-attention-emphasis: hsla(27, 96%, 61%, 1); /* orange-500 */ - --cal-bg-semantic-error-subtle: hsla(0, 70%, 8%, 1); /* red-800 */ - --cal-bg-semantic-error-emphasis: hsla(0, 91%, 71%, 1); /* red-500 */ - - /* Background Visualization */ - --cal-bg-visualization-1-subtle: hsla(336, 74%, 35%, 1); /* pink-200 */ - --cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1); /* pink-500 */ - --cal-bg-visualization-2-subtle: hsla(252, 83%, 23%, 1); /* purple-200 */ - --cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1); /* purple-500 */ - --cal-bg-visualization-3-subtle: hsla(236, 74%, 35%, 1); /* blue-200 */ - --cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1); /* blue-500 */ - --cal-bg-visualization-4-subtle: hsla(150, 84%, 22%, 1); /* green-200 */ - --cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */ - --cal-bg-visualization-5-subtle: hsla(28, 73%, 26%, 1); /* yellow-200 */ - --cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1); /* yellow-500 */ - --cal-bg-visualization-6-subtle: hsla(15, 75%, 23%, 1); /* orange-200 */ - --cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1); /* orange-500 */ - --cal-bg-visualization-7-subtle: hsla(0, 70%, 35%, 1); /* red-200 */ - --cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1); /* red-500 */ - - /* Launch Background */ - --cal-bg-launch-dark: hsla(242, 53%, 10%, 1); /* #0D0C27 - Launch card dark background */ - - /* Legacy Background Components - Consider deprecating */ - --cal-bg-info: hsla(228, 56%, 33%, 1); /* Keeping existing info background */ - --cal-bg-success: hsla(133, 34%, 24%, 1); /* Keeping existing success background */ - --cal-bg-attention: hsla(16, 62%, 28%, 1); /* Keeping existing attention background */ - --cal-bg-error: hsla(2, 55%, 30%, 1); /* Keeping existing error background */ - --cal-bg-dark-error: hsla(2, 55%, 30%, 1); /* Keeping existing dark error */ - - /* Border Standard */ - --cal-border: hsla(0, 0%, 30%, 1); /* stone-600 */ - --cal-border-muted: hsla(0, 0%, 9%, 1); /* stone-500 */ - --cal-border-subtle: hsla(0, 0%, 15%, 1); /* stone-700 */ - --cal-border-emphasis: hsla(0, 0%, 45%, 1); /* stone-800 */ - /* Border Semantic */ - --cal-border-semantic-error: hsla(0, 63%, 24%, 1); /* red-800 */ - - /* Legacy Border - Consider deprecating */ - --cal-border-error: hsla(0, 63%, 24%, 1); /* Keeping existing error border */ - - /* Content/Text Standard */ - --cal-text-emphasis: hsla(0, 0%, 98%, 1); /* stone-50 */ - --cal-text: hsla(0, 0%, 83%, 1); /* stone-300 */ - --cal-text-subtle: hsla(0, 0%, 64%, 1); /* stone-400 */ - --cal-text-muted: hsla(0, 0%, 64%, 1); /* stone-400 */ - --cal-text-inverted: hsla(0, 0%, 0%, 1); /* black */ - - /* Content/Text Semantic */ - --cal-text-semantic-info: hsla(229, 90%, 74%, 1); /* blue-100 */ - --cal-text-semantic-success: hsla(161, 49%, 54%, 1); /* green-100 */ - --cal-text-semantic-attention: hsla(27, 96%, 61%, 1); /* orange-100 */ - --cal-text-semantic-error: hsla(0, 91%, 71%, 1); /* red-100 */ - - /* Content/Text Semantic Emphasis */ - --cal-text-semantic-info-emphasis: hsla(217, 91%, 25%, 1); /* blue-800 */ - --cal-text-semantic-success-emphasis: hsla(142, 71%, 25%, 1); /* green-800 */ - --cal-text-semantic-attention-emphasis: hsla(24, 95%, 25%, 1); /* orange-800 */ - --cal-text-semantic-error-emphasis: hsla(0, 84%, 25%, 1); /* red-800 */ - - /* Border/Semantic Subtle */ - --cal-border-semantic-attention-subtle: hsla(15, 75%, 23%, 1); - --cal-border-semantic-error-subtle: hsla(0, 63%, 24%, 1); - - /* Legacy Content/Text Components - Consider deprecating */ - --cal-text-info: hsla(218, 83%, 93%, 1); /* Keeping existing info text */ - --cal-text-success: hsla(134, 76%, 94%, 1); /* Keeping existing success text */ - --cal-text-attention: hsla(37, 86%, 92%, 1); /* Keeping existing attention text */ - --cal-text-error: hsla(3, 66%, 93%, 1); /* Keeping existing error text */ - - /* Brand */ - --cal-brand: hsla(0, 0%, 100%, 1); /* white */ - --cal-brand-emphasis: hsla(218, 11%, 65%, 1); /* Keeping existing brand emphasis */ - --cal-brand-text: hsla(0, 0%, 0%, 1); /* black */ -} - -@layer base { - * { - @apply border-default - } -} - -::-moz-selection { - color: var(--cal-brand-text); - background: var(--cal-brand); -} - -::selection { - color: var(--cal-brand-text); - background: var(--cal-brand); -} - -body  { - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; -} - -/* - Desktop App specific CSS - https://docs.todesktop.com/ -*/ - -html.todesktop-platform-win32 .todesktop\:\!bg-transparent{ - background: inherit !important; -} - -/* disable user selection on buttons, links and images on desktop app */ -html.todesktop button, -html.todesktop a, -html.todesktop img, -html.todesktop header { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: default !important; -} - -html.todesktop, -html.todesktop div { - cursor: default !important; -} - -/* make header draggable on desktop app */ -html.todesktop header { - -webkit-app-region: drag; -} - -html.todesktop header button, -html.todesktop header a { - -webkit-app-region: no-drag; -} - -html.todesktop-platform-darwin body, html.todesktop-platform-darwin aside { - background: transparent !important; -} - -html.todesktop-platform-darwin.dark main.bg-default { - background: rgba(0, 0, 0, 0.6) !important; -} - -html.todesktop-platform-darwin.light main.bg-default { - background: rgba(255, 255, 255, 0.8) !important; -} - -html.todesktop.light { - --cal-bg-emphasis: hsla(0, 0%, 11%, 0.1); -} - -html.todesktop.dark { - --cal-bg-emphasis: hsla(220, 2%, 26%, 0.3); -} - -/* - Adds Utility to hide scrollbar to tailwind - https://github.com/tailwindlabs/tailwindcss/discussions/2394 - https://github.com/tailwindlabs/tailwindcss/pull/5732 -*/ -@layer utilities { - /* Chrome, Safari and Opera */ - .no-scrollbar::-webkit-scrollbar { - display: none; - } - - .no-scrollbar { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - } -} - -/* - * Override the default tailwindcss-forms styling (default is: 'colors.blue.600') - * @see: https://github.com/tailwindlabs/tailwindcss-forms/issues/14#issuecomment-1005376006 - */ -[type="text"]:focus, -[type="email"]:focus, -[type="url"]:focus, -[type="password"]:focus, -[type="number"]:focus, -[type="date"]:focus, -[type="datetime-local"]:focus, -[type="month"]:focus, -[type="search"]:focus, -[type="tel"]:focus, -[type="checkbox"]:focus, -[type="radio"]:focus, -[type="time"]:focus, -[type="week"]:focus, -[multiple]:focus, -textarea:focus, -select:focus { - border-color: var(--cal-border-emphasis); - box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.20), 0px 0px 0px 2px rgba(0, 0, 0, 0.10); -} - -@layer components { - .scroll-bar { - @apply scrollbar-thin scrollbar-thumb-rounded-md dark:scrollbar-thumb-darkgray-300 scrollbar-thumb-gray-300 scrollbar-track-transparent; - } -} - -/* TODO: avoid global specific css */ -/* button[role="switch"][data-state="checked"] span { - transform: translateX(16px); -} */ - -@layer components { - /* slider */ - .slider { - @apply relative flex h-4 w-40 select-none items-center; - } - - .slider > .slider-track { - @apply relative h-1 flex-grow rounded-md bg-gray-400; - } - - .slider .slider-range { - @apply absolute h-full rounded-full bg-gray-700; - } - - .slider .slider-thumb { - @apply block h-3 w-3 cursor-pointer rounded-full bg-gray-700 transition-all; - } - - .slider .slider-thumb:hover { - @apply bg-gray-600; - } - - .slider .slider-thumb:focus { - box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2); - } -} - -/* hide chat bubble on mobile */ -@media only screen and (max-width: 768px) { - /* Intercom FAB*/ - #launcher { - display: none !important; - } - - /* Zendesk FAB*/ - div[role="presentation"] > iframe { - display: none !important; - } - - /* Helpscout FAB*/ - .BeaconFabButtonFrame { - margin-left: -30px; - left: 50%; - bottom: 28px !important; - z-index: 1058 !important; - } -} - -/* TODO: implement styling for react-multi-email */ - -/* !important to override react-dates */ -.DateRangePickerInput__withBorder { - border: 0 !important; -} -.DateInput_input { - border: 1px solid #d1d5db !important; - border-radius: 2px !important; - font-size: inherit !important; - font-weight: inherit !important; - color: #000; - padding: 11px ​11px 9px !important; - line-height: 16px !important; -} - -.DateInput_input__focused { - border: 2px solid #000 !important; - border-radius: 2px !important; - box-shadow: none !important; - padding: 10px ​10px 9px !important; -} - -.DateRangePickerInput_arrow { - padding: 0px 10px; -} - -.loader { - display: block; - width: 30px; - height: 30px; - margin: 60px auto; - position: relative; - border-width: 4px; - border-style: solid; - animation: loader 2s infinite ease; -} - -.loader-inner { - vertical-align: top; - display: inline-block; - width: 100%; - animation: loader-inner 2s infinite ease-in; -} - -.no-ring-inset { - --tw-ring-inset: unset; -} - -@keyframes loader { - 0% { - transform: rotate(0deg); - } - - 25% { - transform: rotate(180deg); - } - - 50% { - transform: rotate(180deg); - } - - 75% { - transform: rotate(360deg); - } - - 100% { - transform: rotate(360deg); - } -} - -@keyframes loader-inner { - 0% { - height: 0%; - } - - 25% { - height: 0%; - } - - 50% { - height: 100%; - } - - 75% { - height: 100%; - } - - 100% { - height: 0%; - } -} - -.text-inverted-important { - color: white !important; -} - -@layer utilities { - .transition-max-width { - -webkit-transition-property: max-width; - transition-property: max-width; - } -} - -#timeZone input:focus { - box-shadow: none; -} - -/* react-date-picker forces a border upon us, cast it away */ -.react-date-picker__wrapper { - border: none !important; -} - -.react-date-picker__inputGroup__input { - padding-top: 0; - padding-bottom: 0; -} - -/* animations */ -.slideInBottom { - animation-duration: 0.3s; - animation-fill-mode: both; - animation-name: slideInBottom; -} - -@keyframes slideInBottom { - from { - opacity: 0; - transform: translateY(30%); - pointer-events: none; - } - to { - opacity: 1; - pointer-events: auto; - } -} - -/* animations */ -.slideInTop { - animation-duration: 0.3s; - animation-fill-mode: both; - animation-name: slideInTop; -} - -@keyframes slideInTop { - from { - opacity: 0; - transform: translateY(-20%); - pointer-events: none; - } - to { - opacity: 1; - pointer-events: auto; - transform: translateY(0%); - } -} - -.fadeIn { - animation-duration: 0.3s; - animation-fill-mode: both; - animation-name: fadeIn; - animation-timing-function: ease-in-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -/** - * Makes sure h-screen works on mobile Safari. By default h-screen - * does not take into account the height of the address bar, causing - * weird behaviour when scrolling — sometimes the height will be correct - * and sometimes it won't, depending on whether the address bar is - * in 'collapsed' state or not. - * @see: https://benborgers.com/posts/tailwind-h-screen - */ -@supports (-webkit-touch-callout: none) { - .h-screen { - height: -webkit-fill-available; - } -} - -::-webkit-search-cancel-button { - -webkit-appearance: none; -} - -.react-tel-input .country-list .country:hover, -.react-tel-input .country-list .country.highlight { - @apply !bg-emphasis; -} - -.react-tel-input .flag-dropdown .selected-flag, -.react-tel-input .flag-dropdown.open .selected-flag { - @apply !bg-default; -} - -.react-tel-input .flag-dropdown { - @apply !border-r-default left-0.5 !border-y-0 !border-l-0; -} - -@import "../../web/styles/tokens.css"; - -@layer base { - * { - @apply border-default - } -} - -::-moz-selection { - color: var(--cal-brand-text); - background: var(--cal-brand); -} - -::selection { - color: var(--cal-brand-text); - background: var(--cal-brand); -} - -body  { - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; -} - -/* - Desktop App specific CSS - https://docs.todesktop.com/ -*/ - -html.todesktop-platform-win32 .todesktop\:\!bg-transparent{ - background: inherit !important; -} - -/* disable user selection on buttons, links and images on desktop app */ -html.todesktop button, -html.todesktop a, -html.todesktop img, -html.todesktop header { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: default !important; -} - -html.todesktop, -html.todesktop div { - cursor: default !important; -} - -/* make header draggable on desktop app */ -html.todesktop header { - -webkit-app-region: drag; -} - -html.todesktop header button, -html.todesktop header a { - -webkit-app-region: no-drag; -} - -html.todesktop-platform-darwin body, html.todesktop-platform-darwin aside { - background: transparent !important; -} - -html.todesktop-platform-darwin.dark main.bg-default { - background: rgba(0, 0, 0, 0.6) !important; -} - -html.todesktop-platform-darwin.light main.bg-default { - background: rgba(255, 255, 255, 0.8) !important; -} - -html.todesktop.light { - --cal-bg-emphasis: hsla(0, 0%, 11%, 0.1); -} - -html.todesktop.dark { - --cal-bg-emphasis: hsla(220, 2%, 26%, 0.3); -} - -/* - Adds Utility to hide scrollbar to tailwind - https://github.com/tailwindlabs/tailwindcss/discussions/2394 - https://github.com/tailwindlabs/tailwindcss/pull/5732 -*/ -@layer utilities { - /* Chrome, Safari and Opera */ - .no-scrollbar::-webkit-scrollbar { - display: none; - } - - .no-scrollbar { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - } -} - -/* - * Override the default tailwindcss-forms styling (default is: 'colors.blue.600') - * @see: https://github.com/tailwindlabs/tailwindcss-forms/issues/14#issuecomment-1005376006 - */ -[type="text"]:focus, -[type="email"]:focus, -[type="url"]:focus, -[type="password"]:focus, -[type="number"]:focus, -[type="date"]:focus, -[type="datetime-local"]:focus, -[type="month"]:focus, -[type="search"]:focus, -[type="tel"]:focus, -[type="checkbox"]:focus, -[type="radio"]:focus, -[type="time"]:focus, -[type="week"]:focus, -[multiple]:focus, -textarea:focus, -select:focus { - --tw-ring-color: var(--brand-color); - border-color: var(--brand-color); -} - -@layer components { - .scroll-bar { - @apply scrollbar-thin scrollbar-thumb-rounded-md dark:scrollbar-thumb-darkgray-300 scrollbar-thumb-gray-300 scrollbar-track-transparent; - } -} - -/* TODO: avoid global specific css */ -/* button[role="switch"][data-state="checked"] span { - transform: translateX(16px); -} */ - -@layer components { - /* slider */ - .slider { - @apply relative flex h-4 w-40 select-none items-center; - } - - .slider > .slider-track { - @apply relative h-1 flex-grow rounded-md bg-gray-400; - } - - .slider .slider-range { - @apply absolute h-full rounded-full bg-gray-700; - } - - .slider .slider-thumb { - @apply block h-3 w-3 cursor-pointer rounded-full bg-gray-700 transition-all; - } - - .slider .slider-thumb:hover { - @apply bg-gray-600; - } - - .slider .slider-thumb:focus { - box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2); - } -} - -/* hide chat bubble on mobile */ -@media only screen and (max-width: 768px) { - /* Intercom FAB*/ - #launcher { - display: none !important; - } - - /* Zendesk FAB*/ - div[role="presentation"] > iframe { - display: none !important; - } - - /* Helpscout FAB*/ - .BeaconFabButtonFrame { - margin-left: -30px; - left: 50%; - bottom: 28px !important; - z-index: 1058 !important; - } -} - -/* TODO: implement styling for react-multi-email */ - -/* !important to override react-dates */ -.DateRangePickerInput__withBorder { - border: 0 !important; -} -.DateInput_input { - border: 1px solid #d1d5db !important; - border-radius: 2px !important; - font-size: inherit !important; - font-weight: inherit !important; - color: #000; - padding: 11px ​11px 9px !important; - line-height: 16px !important; -} - -.DateInput_input__focused { - border: 2px solid #000 !important; - border-radius: 2px !important; - box-shadow: none !important; - padding: 10px ​10px 9px !important; -} - -.DateRangePickerInput_arrow { - padding: 0px 10px; -} - -.loader { - display: block; - width: 30px; - height: 30px; - margin: 60px auto; - position: relative; - border-width: 4px; - border-style: solid; - animation: loader 2s infinite ease; -} - -.loader-inner { - vertical-align: top; - display: inline-block; - width: 100%; - animation: loader-inner 2s infinite ease-in; -} - -.no-ring-inset { - --tw-ring-inset: unset; -} - -@keyframes loader { - 0% { - transform: rotate(0deg); - } - - 25% { - transform: rotate(180deg); - } - - 50% { - transform: rotate(180deg); - } - - 75% { - transform: rotate(360deg); - } - - 100% { - transform: rotate(360deg); - } -} - -@keyframes loader-inner { - 0% { - height: 0%; - } - - 25% { - height: 0%; - } - - 50% { - height: 100%; - } - - 75% { - height: 100%; - } - - 100% { - height: 0%; - } -} - -.text-inverted-important { - color: white !important; -} - -@layer utilities { - .transition-max-width { - -webkit-transition-property: max-width; - transition-property: max-width; - } -} - -#timeZone input:focus { - box-shadow: none; -} - -/* react-date-picker forces a border upon us, cast it away */ -.react-date-picker__wrapper { - border: none !important; -} - -.react-date-picker__inputGroup__input { - padding-top: 0; - padding-bottom: 0; -} - -/* animations */ -.slideInBottom { - animation-duration: 0.3s; - animation-fill-mode: both; - animation-name: slideInBottom; -} - -@keyframes slideInBottom { - from { - opacity: 0; - transform: translateY(30%); - pointer-events: none; - } - to { - opacity: 1; - pointer-events: auto; - } -} - -/* animations */ -.slideInTop { - animation-duration: 0.3s; - animation-fill-mode: both; - animation-name: slideInTop; -} - -@keyframes slideInTop { - from { - opacity: 0; - transform: translateY(-20%); - pointer-events: none; - } - to { - opacity: 1; - pointer-events: auto; - transform: translateY(0%); - } -} - -.fadeIn { - animation-duration: 0.3s; - animation-fill-mode: both; - animation-name: fadeIn; - animation-timing-function: ease-in-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -/** - * Makes sure h-screen works on mobile Safari. By default h-screen - * does not take into account the height of the address bar, causing - * weird behaviour when scrolling — sometimes the height will be correct - * and sometimes it won't, depending on whether the address bar is - * in 'collapsed' state or not. - * @see: https://benborgers.com/posts/tailwind-h-screen - */ -@supports (-webkit-touch-callout: none) { - .h-screen { - height: -webkit-fill-available; - } -} - -::-webkit-search-cancel-button { - -webkit-appearance: none; -} - -.react-tel-input .country-list .country:hover, -.react-tel-input .country-list .country.highlight { - @apply !bg-emphasis; -} - -.react-tel-input .flag-dropdown .selected-flag, -.react-tel-input .flag-dropdown.open .selected-flag { - @apply !bg-default; -} - -.react-tel-input .flag-dropdown { - @apply !border-r-default left-0.5 !border-y-0 !border-l-0; -} - -.prose :where(a:not([data-card])):not(:where([class~="not-prose"] *)) { - text-decoration: none; -} diff --git a/apps/ui-playground/app/layout.config.tsx b/apps/ui-playground/app/layout.config.tsx deleted file mode 100644 index 4426a6bf60..0000000000 --- a/apps/ui-playground/app/layout.config.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { HomeLayoutProps } from "fumadocs-ui/layouts/home"; - -/** - * Shared layout configurations - * - * you can configure layouts individually from: - * Home Layout: app/(home)/layout.tsx - * Docs Layout: app/docs/layout.tsx - */ -export const baseOptions: HomeLayoutProps = { - nav: { - title: "Cal.com", - }, - githubUrl: "https://github.com/calcom/cal.com", - links: [ - { - text: "Design", - url: "/design", - active: "nested-url", - }, - { - text: "GitHub", - url: "https://github.com/calcom/cal.com", - }, - ], -}; diff --git a/apps/ui-playground/app/layout.tsx b/apps/ui-playground/app/layout.tsx deleted file mode 100644 index e7dbf4ab50..0000000000 --- a/apps/ui-playground/app/layout.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { RootProvider } from "fumadocs-ui/provider"; -import type { Metadata } from "next"; -import { Inter } from "next/font/google"; - -import "./global.css"; - -const inter = Inter({ - variable: "--font-inter", - subsets: ["latin"], -}); - -export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - - - - - {children} - - - ); -} diff --git a/apps/ui-playground/app/source.ts b/apps/ui-playground/app/source.ts deleted file mode 100644 index ac2303ab9d..0000000000 --- a/apps/ui-playground/app/source.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { components, docs, meta } from "@/.source"; -import { loader } from "fumadocs-core/source"; -import { createMDXSource } from "fumadocs-mdx"; - -export const source = loader({ - baseUrl: "/docs", - source: createMDXSource(docs, meta), -}); - -export const componentSource = loader({ - baseUrl: "/design", - source: createMDXSource(components, []), -}); diff --git a/apps/ui-playground/components/MDXLayout.tsx b/apps/ui-playground/components/MDXLayout.tsx deleted file mode 100644 index 260e668812..0000000000 --- a/apps/ui-playground/components/MDXLayout.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Toaster } from "react-hot-toast"; - -import { Status } from "./Status"; - -export function MDXLayout({ children, frontmatter }: { children: React.ReactNode; frontmatter: any }) { - return ( -
- - {frontmatter.airtableId && ( - - )} - {children} -
- ); -} diff --git a/apps/ui-playground/components/ui/BorderRadiusTable.tsx b/apps/ui-playground/components/ui/BorderRadiusTable.tsx deleted file mode 100644 index e22df848ab..0000000000 --- a/apps/ui-playground/components/ui/BorderRadiusTable.tsx +++ /dev/null @@ -1,65 +0,0 @@ -"use client"; - -import React from "react"; -import { Toaster } from "react-hot-toast"; - -import { showToast } from "@calcom/ui/components/toast"; - -interface BorderRadiusToken { - name: string; - value: string; - className: string; -} - -interface BorderRadiusTableProps { - tokens: BorderRadiusToken[]; -} - -const tokens: BorderRadiusToken[] = [ - { name: "None", value: "0px", className: "rounded-none" }, - { name: "Small", value: "0.125rem", className: "rounded-sm" }, - { name: "Default", value: "0.25rem", className: "rounded" }, - { name: "Medium", value: "0.375rem", className: "rounded-md" }, - { name: "Large", value: "0.5rem", className: "rounded-lg" }, - { name: "XLarge", value: "0.75rem", className: "rounded-xl" }, - { name: "2XLarge", value: "1rem", className: "rounded-2xl" }, - { name: "3XLarge", value: "1.5rem", className: "rounded-3xl" }, - { name: "Full", value: "9999px", className: "rounded-full" }, -]; - -export const BorderRadiusTable: React.FC = () => { - const handleCopy = async (value: string) => { - try { - await navigator.clipboard.writeText(value); - showToast(`Copied ${value}`, "success"); - } catch (error) { - console.error("Failed to copy:", error); - showToast("Failed to copy", "error"); - } - }; - - return ( - <> - -
- {tokens.map((token) => ( -
handleCopy(token.className)} - className="border-subtle bg-default hover:bg-subtle group relative cursor-pointer overflow-hidden rounded-lg border p-4"> -
-
-
-

{token.name}

-

{token.className}

-
-

{token.value}

-
-
-
-
- ))} -
- - ); -}; diff --git a/apps/ui-playground/components/ui/IconGrid.tsx b/apps/ui-playground/components/ui/IconGrid.tsx deleted file mode 100644 index 8ead4d51a1..0000000000 --- a/apps/ui-playground/components/ui/IconGrid.tsx +++ /dev/null @@ -1,372 +0,0 @@ -"use client"; - -import React, { useState, useMemo } from "react"; -import { Toaster } from "react-hot-toast"; - -import { Icon } from "@calcom/ui/components/icon"; -import { showToast } from "@calcom/ui/components/toast"; - -type IconName = - | "activity" - | "arrow-down" - | "arrow-left" - | "arrow-right" - | "arrow-up-right" - | "arrow-up" - | "asterisk" - | "at-sign" - | "atom" - | "badge-check" - | "ban" - | "bell" - | "binary" - | "blocks" - | "bold" - | "book" - | "book-open-check" - | "book-open" - | "book-user" - | "building" - | "calendar-check-2" - | "calendar-days" - | "calendar-heart" - | "calendar-range" - | "calendar-search" - | "calendar-x-2" - | "calendar" - | "chart-bar" - | "chart-line" - | "check-check" - | "check" - | "chevron-down" - | "chevron-left" - | "chevron-right" - | "chevron-up" - | "chevrons-down-up" - | "chevrons-left" - | "chevrons-right" - | "chevrons-up-down" - | "circle-alert" - | "circle-arrow-up" - | "circle-check-big" - | "circle-check" - | "circle-help" - | "circle-x" - | "circle" - | "clipboard-check" - | "clipboard" - | "clock" - | "code" - | "columns-3" - | "command" - | "contact" - | "copy" - | "corner-down-left" - | "corner-down-right" - | "credit-card" - | "disc" - | "dot" - | "download" - | "ellipsis-vertical" - | "ellipsis" - | "external-link" - | "eye-off" - | "eye" - | "file-down" - | "file-text" - | "file" - | "filter" - | "fingerprint" - | "flag" - | "folder" - | "gift" - | "git-merge" - | "github" - | "globe" - | "grid-3x3" - | "handshake" - | "info" - | "italic" - | "key" - | "layers" - | "layout-dashboard" - | "link-2" - | "link" - | "loader" - | "lock-open" - | "lock" - | "log-out" - | "mail-open" - | "mail" - | "map-pin" - | "map" - | "menu" - | "message-circle" - | "messages-square" - | "moon" - | "paintbrush" - | "paperclip" - | "pencil" - | "phone-call" - | "phone" - | "plus" - | "refresh-ccw" - | "refresh-cw" - | "repeat" - | "rocket" - | "rotate-ccw" - | "rotate-cw" - | "search" - | "send" - | "settings" - | "share-2" - | "shield-check" - | "shield" - | "shuffle" - | "sliders-horizontal" - | "sliders-vertical" - | "smartphone" - | "sparkles" - | "square-check" - | "star" - | "sun" - | "sunrise" - | "sunset" - | "tags" - | "terminal" - | "trash-2" - | "trash" - | "trello" - | "triangle-alert" - | "upload" - | "user-check" - | "user-plus" - | "user-x" - | "user" - | "users" - | "venetian-mask" - | "video" - | "waypoints" - | "webhook" - | "x" - | "zap"; - -interface IconGridProps { - className?: string; -} - -interface CopyMenuProps { - name: IconName; - onCopy: (format: string) => void; -} - -const CopyMenu: React.FC = ({ name, onCopy }) => { - return ( -
-
- -
-
- ); -}; - -export const IconGrid: React.FC = ({ className }) => { - const [searchQuery, setSearchQuery] = useState(""); - - const handleCopy = async (value: string) => { - try { - await navigator.clipboard.writeText(value); - showToast(`Copied ${value}`, "success"); - } catch (error) { - console.error("Failed to copy:", error); - showToast("Failed to copy", "error"); - } - }; - - const icons: IconName[] = [ - "activity", - "arrow-down", - "arrow-left", - "arrow-right", - "arrow-up-right", - "arrow-up", - "asterisk", - "at-sign", - "atom", - "badge-check", - "ban", - "bell", - "binary", - "blocks", - "bold", - "book-open-check", - "book-open", - "book-user", - "building", - "calendar-check-2", - "calendar-days", - "calendar-heart", - "calendar-range", - "calendar-search", - "calendar-x-2", - "calendar", - "chart-bar", - "chart-line", - "check-check", - "check", - "chevron-down", - "chevron-left", - "chevron-right", - "chevron-up", - "chevrons-down-up", - "chevrons-left", - "chevrons-right", - "chevrons-up-down", - "circle-alert", - "circle-arrow-up", - "circle-check-big", - "circle-check", - "circle-help", - "circle-x", - "circle", - "clipboard-check", - "clipboard", - "clock", - "code", - "columns-3", - "command", - "contact", - "copy", - "corner-down-left", - "corner-down-right", - "credit-card", - "disc", - "dot", - "download", - "ellipsis-vertical", - "ellipsis", - "external-link", - "eye-off", - "eye", - "file-down", - "file-text", - "file", - "filter", - "fingerprint", - "flag", - "folder", - "gift", - "git-merge", - "github", - "globe", - "grid-3x3", - "handshake", - "info", - "italic", - "key", - "layers", - "layout-dashboard", - "link-2", - "link", - "loader", - "lock-open", - "lock", - "log-out", - "mail-open", - "mail", - "map-pin", - "map", - "menu", - "message-circle", - "messages-square", - "moon", - "paintbrush", - "paperclip", - "pencil", - "phone-call", - "phone", - "plus", - "refresh-ccw", - "refresh-cw", - "repeat", - "rocket", - "rotate-ccw", - "rotate-cw", - "search", - "send", - "settings", - "share-2", - "shield-check", - "shield", - "shuffle", - "sliders-horizontal", - "sliders-vertical", - "smartphone", - "sparkles", - "square-check", - "star", - "sun", - "sunrise", - "sunset", - "tags", - "terminal", - "trash-2", - "trash", - "trello", - "triangle-alert", - "upload", - "user-check", - "user-plus", - "user-x", - "user", - "users", - "venetian-mask", - "video", - "waypoints", - "webhook", - "x", - "zap", - ]; - - const filteredIcons = useMemo(() => { - if (!searchQuery) return icons; - const query = searchQuery.toLowerCase(); - return icons.filter((icon) => icon.toLowerCase().includes(query)); - }, [searchQuery]); - - return ( - <> - -
-
- setSearchQuery(e.target.value)} - className="border-subtle bg-default text-emphasis focus:ring-emphasis placeholder:text-subtle w-full rounded-md border px-4 py-2 focus:outline-none focus:ring-2" - /> -
-
- {filteredIcons.map((iconName) => ( -
-
-
- -
-

{iconName}

-
- -
- ))} -
-
- - ); -}; diff --git a/apps/ui-playground/components/ui/ShadowTable.tsx b/apps/ui-playground/components/ui/ShadowTable.tsx deleted file mode 100644 index 4443fd0ac0..0000000000 --- a/apps/ui-playground/components/ui/ShadowTable.tsx +++ /dev/null @@ -1,126 +0,0 @@ -"use client"; - -import React from "react"; -import { Toaster } from "react-hot-toast"; - -import { showToast } from "@calcom/ui/components/toast"; - -interface ShadowToken { - name: string; - className: string; - description: string; -} - -interface ShadowTableProps { - tokens: ShadowToken[]; -} - -const tokens: ShadowToken[] = [ - { - name: "Dropdown", - className: "shadow-dropdown", - description: "Used for dropdown menus and popovers", - }, - { - name: "Solid Gray Rested", - className: "shadow-solid-gray-rested", - description: "Default state for solid gray buttons", - }, - { - name: "Solid Gray Hover", - className: "shadow-solid-gray-hover", - description: "Hover state for solid gray buttons", - }, - { - name: "Solid Gray Active", - className: "shadow-solid-gray-active", - description: "Active/pressed state for solid gray buttons", - }, - { - name: "Outline Gray Rested", - className: "shadow-outline-gray-rested", - description: "Default state for outline gray buttons", - }, - { - name: "Outline Gray Hover", - className: "shadow-outline-gray-hover", - description: "Hover state for outline gray buttons", - }, - { - name: "Outline Gray Active", - className: "shadow-outline-gray-active", - description: "Active/pressed state for outline gray buttons", - }, - { - name: "Outline Red Rested", - className: "shadow-outline-red-rested", - description: "Default state for outline red buttons", - }, - { - name: "Outline Red Hover", - className: "shadow-outline-red-hover", - description: "Hover state for outline red buttons", - }, - { - name: "Outline Red Active", - className: "shadow-outline-red-active", - description: "Active/pressed state for outline red buttons", - }, - { - name: "Elevation Low", - className: "shadow-elevation-low", - description: "Subtle elevation for UI elements", - }, - { - name: "Button Solid Brand Default", - className: "shadow-button-solid-brand-default", - description: "Default state for solid brand buttons", - }, - { - name: "Button Solid Brand Hover", - className: "shadow-button-solid-brand-hover", - description: "Hover state for solid brand buttons", - }, - { - name: "Button Solid Brand Active", - className: "shadow-button-solid-brand-active", - description: "Active/pressed state for solid brand buttons", - }, -]; - -export const ShadowTable: React.FC = () => { - const handleCopy = async (value: string) => { - try { - await navigator.clipboard.writeText(value); - showToast(`Copied ${value}`, "success"); - } catch (error) { - console.error("Failed to copy:", error); - showToast("Failed to copy", "error"); - } - }; - - return ( - <> - -
- {tokens.map((token) => ( -
handleCopy(token.className)} - className="group relative cursor-pointer"> -
-
-
-

{token.name}

-

{token.className}

-
-

{token.description}

-
-
-
- ))} -
- - ); -}; diff --git a/apps/ui-playground/components/ui/SpacingTable.tsx b/apps/ui-playground/components/ui/SpacingTable.tsx deleted file mode 100644 index 6d8f296a63..0000000000 --- a/apps/ui-playground/components/ui/SpacingTable.tsx +++ /dev/null @@ -1,45 +0,0 @@ -"use client"; - -import React from "react"; -import { Toaster } from "react-hot-toast"; - -interface SpacingToken { - name: string; - value: string; - pixels: string; -} - -interface SpacingTableProps { - tokens: SpacingToken[]; -} - -export const SpacingTable: React.FC = ({ tokens }) => { - return ( - <> - -
-
- {tokens.map((token, index) => ( -
-
-
-

- {token.name === "px" ? "px" : `${token.name} (${token.pixels})`} -

-
-
-
-
-
-
- ))} -
-
- - ); -}; diff --git a/apps/ui-playground/components/ui/TypeTable.tsx b/apps/ui-playground/components/ui/TypeTable.tsx deleted file mode 100644 index f9293e50a8..0000000000 --- a/apps/ui-playground/components/ui/TypeTable.tsx +++ /dev/null @@ -1,103 +0,0 @@ -"use client"; - -import { getColorFormats, copyToClipboard } from "@/lib/colorUtils"; -import React from "react"; -import { Toaster } from "react-hot-toast"; - -import { showToast } from "@calcom/ui/components/toast"; - -interface ColorSwatch { - name: string; - value: string; - className: string; -} - -interface ColorSection { - title: string; - description?: string; - colors: ColorSwatch[]; -} - -interface TypeTableProps { - sections: ColorSection[]; -} - -interface CopyMenuProps { - color: string; - className: string; - onCopy: (format: string) => void; -} - -const CopyMenu: React.FC = ({ color, className, onCopy }) => { - const formats = getColorFormats(color, className); - if (!formats) return null; - - return ( -
-
- - - - -
-
- ); -}; - -export const TypeTable: React.FC = ({ sections }) => { - const handleCopy = async (colorValue: string) => { - try { - await copyToClipboard(colorValue); - showToast(`Copied ${colorValue}`, "success"); - } catch (error) { - console.error("Failed to copy color:", error); - showToast("Failed to copy color", "error"); - } - }; - - return ( - <> - -
- {sections.map((section, sectionIndex) => ( -
-
-

{section.title}

- {section.description &&

{section.description}

} -
-
- {section.colors.map((color, colorIndex) => ( -
-
-
- -
-
-

{color.name}

-

{color.value}

-
-
- ))} -
-
- ))} -
- - ); -}; diff --git a/apps/ui-playground/components/ui/TypographyTable.tsx b/apps/ui-playground/components/ui/TypographyTable.tsx deleted file mode 100644 index 15b6f5a456..0000000000 --- a/apps/ui-playground/components/ui/TypographyTable.tsx +++ /dev/null @@ -1,109 +0,0 @@ -"use client"; - -import React from "react"; -import { Toaster } from "react-hot-toast"; - -import { showToast } from "@calcom/ui/components/toast"; - -interface TypographyStyle { - name: string; - className: string; - specs: { - fontFamily: string; - fontSize: string; - lineHeight: string; - weight: string; - }; - category?: string; -} - -interface TypographySection { - title: string; - description?: string; - styles: TypographyStyle[]; -} - -interface TypographyTableProps { - sections: TypographySection[]; -} - -interface CopyMenuProps { - style: TypographyStyle; - onCopy: (format: string) => void; -} - -const CopyMenu: React.FC = ({ style, onCopy }) => { - return ( -
-
- - -
-
- ); -}; - -export const TypographyTable: React.FC = ({ sections }) => { - const handleCopy = async (value: string) => { - try { - await navigator.clipboard.writeText(value); - showToast(`Copied to clipboard`, "success"); - } catch (error) { - console.error("Failed to copy:", error); - showToast("Failed to copy", "error"); - } - }; - - return ( - <> - -
- {sections.map((section, sectionIndex) => ( -
-
-

{section.title}

- {section.description &&

{section.description}

} -
-
- {section.styles.map((style, styleIndex) => ( -
-
-
-
-

{style.name}

-

{style.className}

-
-
The quick brown fox jumps over the lazy dog
-
-
-

Font: {style.specs.fontFamily}

-

Size: {style.specs.fontSize}px

-

Line Height: {style.specs.lineHeight}

-

Weight: {style.specs.weight}

-
-
- -
- ))} -
-
- ))} -
- - ); -}; diff --git a/apps/ui-playground/content/design/border-radius.mdx b/apps/ui-playground/content/design/border-radius.mdx deleted file mode 100644 index 804233da3f..0000000000 --- a/apps/ui-playground/content/design/border-radius.mdx +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Border Radius -description: Cal.com's border radius system ---- - -import { BorderRadiusTable } from '@/components/ui/BorderRadiusTable'; - -# Border Radius - -Our design system uses a consistent set of border radius values to create a cohesive and modern interface. The border radius scale ranges from none (sharp corners) to full (completely rounded). - -## Usage - -```tsx -// No border radius -
Sharp corners
- -// Default radius -
Default rounded corners
- -// Larger radius -
Larger rounded corners
- -// Fully rounded (useful for pills, badges) -
Completely rounded
-``` - -## Border Radius Scale - -Click on any radius to copy its Tailwind class name. Each preview shows how the radius appears when applied. - - diff --git a/apps/ui-playground/content/design/colors.mdx b/apps/ui-playground/content/design/colors.mdx deleted file mode 100644 index d751b7f121..0000000000 --- a/apps/ui-playground/content/design/colors.mdx +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Colors -description: Cal.com Color System Documentation ---- - -import { TypeTable } from '@/components/ui/TypeTable'; - -export const backgroundTokens = { - title: 'Background Tokens', - colors: [ - { name: 'emphasis', value: 'var(--cal-bg-emphasis)', className: 'bg-emphasis' }, - { name: 'default', value: 'var(--cal-bg, white)', className: 'bg-default' }, - { name: 'subtle', value: 'var(--cal-bg-subtle)', className: 'bg-subtle' }, - { name: 'muted', value: 'var(--cal-bg-muted)', className: 'bg-muted' }, - { name: 'inverted', value: 'var(--cal-bg-inverted)', className: 'bg-inverted' }, - ], -}; - -export const primaryBackgroundTokens = { - title: 'Primary Background Tokens', - colors: [ - { name: 'primary.default', value: 'var(--cal-bg-primary)', className: 'bg-primary-default' }, - { name: 'primary.emphasis', value: 'var(--cal-bg-primary-emphasis)', className: 'bg-primary-emphasis' }, - { name: 'primary.muted', value: 'var(--cal-bg-primary-muted)', className: 'bg-primary-muted' }, - ], -}; - -export const brandTokens = { - title: 'Brand Colors', - colors: [ - { name: 'brand.default', value: 'var(--cal-brand,#111827)', className: 'bg-brand-default' }, - { name: 'brand.emphasis', value: 'var(--cal-brand-emphasis,#101010)', className: 'bg-brand-emphasis' }, - { name: 'brand.subtle', value: 'var(--cal-brand-subtle,#9CA3AF)', className: 'bg-brand-subtle' }, - { name: 'brand.accent', value: 'var(--cal-brand-accent,white)', className: 'bg-brand-accent' }, - ], -}; - -export const semanticBackgroundTokens = { - title: 'Semantic Background Tokens', - colors: [ - { name: 'semantic.info.subtle', value: 'var(--cal-bg-semantic-info-subtle)', className: 'bg-semantic-info-subtle' }, - { name: 'semantic.info.emphasis', value: 'var(--cal-bg-semantic-info-emphasis)', className: 'bg-semantic-info-emphasis' }, - { name: 'semantic.success.subtle', value: 'var(--cal-bg-semantic-success-subtle)', className: 'bg-semantic-success-subtle' }, - { name: 'semantic.success.emphasis', value: 'var(--cal-bg-semantic-success-emphasis)', className: 'bg-semantic-success-emphasis' }, - { name: 'semantic.attention.subtle', value: 'var(--cal-bg-semantic-attention-subtle)', className: 'bg-semantic-attention-subtle' }, - { name: 'semantic.attention.emphasis', value: 'var(--cal-bg-semantic-attention-emphasis)', className: 'bg-semantic-attention-emphasis' }, - { name: 'semantic.error.subtle', value: 'var(--cal-bg-semantic-error-subtle)', className: 'bg-semantic-error-subtle' }, - { name: 'semantic.error.emphasis', value: 'var(--cal-bg-semantic-error-emphasis)', className: 'bg-semantic-error-emphasis' }, - ], -}; - -export const borderTokens = { - title: 'Border Tokens', - colors: [ - { name: 'border.emphasis', value: 'var(--cal-border-emphasis)', className: 'border-emphasis' }, - { name: 'border.default', value: 'var(--cal-border)', className: 'border-default' }, - { name: 'border.subtle', value: 'var(--cal-border-subtle)', className: 'border-subtle' }, - { name: 'border.muted', value: 'var(--cal-border-muted)', className: 'border-muted' }, - { name: 'border.semantic.error', value: 'var(--cal-border-semantic-error)', className: 'border-semantic-error' }, - ], -}; - -export const textTokens = { - title: 'Text Tokens', - description: 'Semantic text colors for various purposes', - colors: [ - { name: 'text.emphasis', value: 'var(--cal-text-emphasis)', className: 'text-emphasis' }, - { name: 'text.default', value: 'var(--cal-text)', className: 'text-default' }, - { name: 'text.subtle', value: 'var(--cal-text-subtle)', className: 'text-subtle' }, - { name: 'text.muted', value: 'var(--cal-text-muted)', className: 'text-muted' }, - { name: 'text.inverted', value: 'var(--cal-text-inverted)', className: 'text-inverted' }, - ], -}; - -# Color System - -Our color system is built on semantic tokens that provide consistent theming across light and dark modes. The system is organized into five main categories: - -1. Background Colors -2. Primary Colors -3. Brand Colors -4. Semantic Colors -5. Text & Border Colors - -## Usage Guidelines - -1. **Use Semantic Tokens**: Always prefer semantic tokens over direct color values to maintain consistency and theme support. -2. **Dark Mode Support**: Our semantic tokens automatically handle dark mode transitions. -3. **Component Design**: When creating new components, follow the semantic token system: - - Use `bg-*` tokens for backgrounds - - Use `text-*` tokens for text content - - Use `border-*` tokens for borders -4. **Semantic States**: Use semantic color variations to convey meaning: - - Info: For informational UI elements - - Success: For successful actions and positive states - - Attention: For warnings and important notices - - Error: For error states and destructive actions -5. **Brand Colors**: Use brand colors sparingly and primarily for: - - Primary CTAs - - Brand identity elements - - Key interactive components - - -## Using Semantic Tokens - -Our color tokens are CSS variables that automatically handle light and dark mode transitions. Here's how to use them: - -### Background Colors -```tsx -// Basic backgrounds -
Default background
-
Subtle background
-
Emphasis background
- -// Primary backgrounds -
Primary background
-
Primary emphasis
-``` - -### Semantic Colors -```tsx -// Info states -
Info subtle
-
Info emphasis
- -// Success states -
Success subtle
-
Success emphasis
- -// Error states -
Error subtle
-
Error emphasis
-``` - -### Text Colors -```tsx -

High emphasis text

-

Default text

-

Subtle text

-

Muted text

-``` - - - diff --git a/apps/ui-playground/content/design/components/MultiInputField.mdx b/apps/ui-playground/content/design/components/MultiInputField.mdx deleted file mode 100644 index e97a237c5e..0000000000 --- a/apps/ui-playground/content/design/components/MultiInputField.mdx +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: MultiOptionInput ---- -import { MultiOptionInput } from "@calcom/ui/components/form" -import { RenderComponentWithSnippet } from "@/app/components/render" -import { Row } from "@/app/components/row" -import { StatesExample } from "./multiInputField.states" -import { PasteExample } from "./multiInputField.paste" -import { CustomizationExample } from "./multiInputField.customization" - -## Overview - -The MultiOptionInput component is a flexible form input that allows users to manage a list of options with features like: -- Adding and removing options -- Reordering options with move up/down buttons -- Pasting multiple options with configurable delimiters -- Minimum options requirement -- Customizable placeholders and labels -- Key-value pair mode for environment variables, configuration settings, etc. - -## States - -MultiOptionInput in different states: default, disabled, and with minimum options. - - - -## Paste Support - -Demonstrates the paste functionality with different delimiters. Users can paste comma-separated values, newline-separated values, or use custom delimiters. - -In key-value mode, the component can also parse key-value pairs from pasted text. For example: -- `KEY=value` -- `NODE_ENV:production` - - - -## Customization - -Examples of different customization options like placeholders, move buttons, remove buttons, and key-value pairs. - - - -## Usage - -### Standard Options - -```tsx -import { MultiOptionInput } from "@calcom/ui/components/form/inputs/MultiOptionInput"; -import { useForm, FormProvider } from "react-hook-form"; - -type FormValues = { - options: Array<{ label: string; id: string }>; -}; - -const MyForm = () => { - const methods = useForm(); - - return ( - -
- - fieldArrayName="options" - optionPlaceholders={["Option 1", "Option 2"]} - defaultNumberOfOptions={2} - pasteDelimiters={["\n", ","]} // Optional - showMoveButtons={true} // Optional - minOptions={1} // Optional - addOptionLabel="Add another option" // Optional - /> - -
- ); -}; -``` - -### Key-Value Pairs - -```tsx -import { MultiOptionInput } from "@calcom/ui/components/form/inputs/MultiOptionInput"; -import { useForm, FormProvider } from "react-hook-form"; - -type FormValues = { - envVars: Array<{ label: string; value: string; id: string }>; -}; - -const EnvVarsForm = () => { - const methods = useForm(); - - return ( - -
- - fieldArrayName="envVars" - keyValueMode={true} - keyLabel="Environment Variable" - valueLabel="Value" - optionPlaceholders={["NODE_ENV", "PORT"]} - valuePlaceholders={["production", "3000"]} - keyValueDelimiters={[":", "="]} // Optional, defaults to [":", "="] - defaultNumberOfOptions={2} - /> - -
- ); -}; -``` diff --git a/apps/ui-playground/content/design/components/alert.actions.tsx b/apps/ui-playground/content/design/components/alert.actions.tsx deleted file mode 100644 index 28e3877c8a..0000000000 --- a/apps/ui-playground/content/design/components/alert.actions.tsx +++ /dev/null @@ -1,28 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Alert } from "@calcom/ui/components/alert"; - -const severities = ["neutral", "info", "warning", "error"] as const; - -export const ActionsExample: React.FC = () => ( - -
- {severities.map((severity) => ( - - - -
- } - /> - ))} -
- -); diff --git a/apps/ui-playground/content/design/components/alert.basic.tsx b/apps/ui-playground/content/design/components/alert.basic.tsx deleted file mode 100644 index b42cffd50b..0000000000 --- a/apps/ui-playground/content/design/components/alert.basic.tsx +++ /dev/null @@ -1,22 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Alert } from "@calcom/ui/components/alert"; - -const severities = ["neutral", "info", "warning", "error"] as const; - -export const BasicExample: React.FC = () => ( - -
- {severities.map((severity) => ( - - ))} -
-
-); diff --git a/apps/ui-playground/content/design/components/alert.customIconColor.tsx b/apps/ui-playground/content/design/components/alert.customIconColor.tsx deleted file mode 100644 index efddf9c22b..0000000000 --- a/apps/ui-playground/content/design/components/alert.customIconColor.tsx +++ /dev/null @@ -1,24 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Alert } from "@calcom/ui/components/alert"; - -const severities = ["neutral", "info", "warning", "error"] as const; - -export const CustomIconColorExample: React.FC = () => ( - -
- {severities.map((severity) => ( - - ))} -
-
-); diff --git a/apps/ui-playground/content/design/components/alert.customIcons.tsx b/apps/ui-playground/content/design/components/alert.customIcons.tsx deleted file mode 100644 index 1819b0dce3..0000000000 --- a/apps/ui-playground/content/design/components/alert.customIcons.tsx +++ /dev/null @@ -1,25 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Alert } from "@calcom/ui/components/alert"; - -const severities = ["neutral", "info", "warning", "error"] as const; -const customIcons = ["info", "alert-triangle", "circle-x", "circle-check", "bell"] as const; - -export const CustomIconsExample: React.FC = () => ( - -
- {severities.map((severity, index) => ( - - ))} -
-
-); diff --git a/apps/ui-playground/content/design/components/alert.mdx b/apps/ui-playground/content/design/components/alert.mdx deleted file mode 100644 index b5956e59da..0000000000 --- a/apps/ui-playground/content/design/components/alert.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Alert -airtableId: recnvwaXqOucqLo9Y ---- -import { Alert } from "@calcom/ui/components/alert" -import { RenderComponentWithSnippet } from "@/app/components/render" -import { Row } from "@/app/components/row" -import { BasicExample } from "./alert.basic" -import { ActionsExample } from "./alert.actions" -import { CustomIconsExample } from "./alert.customIcons" -import { CustomIconColorExample } from "./alert.customIconColor" -import { NoTitleExample } from "./alert.noTitle" - -## Basic Alerts - -Alerts come in different severities to convey different levels of importance. - - - -## Alerts with Actions - -Alerts can include action buttons to provide users with immediate options. - - - -## Custom Icons - -You can customize the alert icon to better match your message context. - - - -## Custom Icon Colors - -The icon color can be customized independently of the alert severity. - - - -## Without Title - -For simpler messages, alerts can be displayed without a title. - - diff --git a/apps/ui-playground/content/design/components/alert.noTitle.tsx b/apps/ui-playground/content/design/components/alert.noTitle.tsx deleted file mode 100644 index b7229d28eb..0000000000 --- a/apps/ui-playground/content/design/components/alert.noTitle.tsx +++ /dev/null @@ -1,21 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Alert } from "@calcom/ui/components/alert"; - -const severities = ["neutral", "info", "warning", "error"] as const; - -export const NoTitleExample: React.FC = () => ( - -
- {severities.map((severity) => ( - - ))} -
-
-); diff --git a/apps/ui-playground/content/design/components/avatar.image.tsx b/apps/ui-playground/content/design/components/avatar.image.tsx deleted file mode 100644 index 2c20ec8e52..0000000000 --- a/apps/ui-playground/content/design/components/avatar.image.tsx +++ /dev/null @@ -1,22 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Avatar } from "@calcom/ui/components/avatar"; - -const sampleImage = "https://cal.com/stakeholder/peer.jpg"; - -export const ImageExample: React.FC = () => ( - -
-
- - With Image -
-
- - Without Image -
-
-
-); diff --git a/apps/ui-playground/content/design/components/avatar.indicator.tsx b/apps/ui-playground/content/design/components/avatar.indicator.tsx deleted file mode 100644 index 25f41bad28..0000000000 --- a/apps/ui-playground/content/design/components/avatar.indicator.tsx +++ /dev/null @@ -1,25 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Avatar } from "@calcom/ui/components/avatar"; - -const sampleImage = "https://cal.com/stakeholder/peer.jpg"; - -export const IndicatorExample: React.FC = () => ( - -
-
- - } - /> - With Status Indicator -
-
-
-); diff --git a/apps/ui-playground/content/design/components/avatar.link.tsx b/apps/ui-playground/content/design/components/avatar.link.tsx deleted file mode 100644 index 61fc4ecf9e..0000000000 --- a/apps/ui-playground/content/design/components/avatar.link.tsx +++ /dev/null @@ -1,18 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Avatar } from "@calcom/ui/components/avatar"; - -const sampleImage = "https://cal.com/stakeholder/peer.jpg"; - -export const LinkExample: React.FC = () => ( - -
-
- - Clickable -
-
-
-); diff --git a/apps/ui-playground/content/design/components/avatar.mdx b/apps/ui-playground/content/design/components/avatar.mdx deleted file mode 100644 index fa843d6c80..0000000000 --- a/apps/ui-playground/content/design/components/avatar.mdx +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Avatar -airtableId: reciflFrJo5cVgGrS ---- -import { Avatar } from "@calcom/ui/components/avatar" -import { RenderComponentWithSnippet } from "@/app/components/render" -import { Row } from "@/app/components/row" -import { SizesExample } from "./avatar.sizes" -import { ImageExample } from "./avatar.image" -import { TooltipExample } from "./avatar.tooltip" -import { LinkExample } from "./avatar.link" -import { IndicatorExample } from "./avatar.indicator" -import { ShapeExample } from "./avatar.shape" - -## Size Variations - -Avatars come in different sizes to suit various use cases. - - - -## Shape Variations - -Avatars can be displayed in either circular or square shapes. - - - -## With and Without Image - -Avatars can display either an image or a fallback placeholder. - - - -## With Tooltip - -Avatars can show additional information on hover using tooltips. - - - -## With Link - -Avatars can be made clickable by providing an href. - - - -## With Indicator - -Avatars can include status indicators or badges. - - - -## Usage Example - -Here's a complete example showing how to use the Avatar component with all its props: - -```tsx -import { Avatar } from "@calcom/ui/components/avatar"; - -function Example() { - return ( -
- {/* Basic Avatar */} - - - {/* Avatar with Link */} - - - {/* Avatar with Tooltip and Indicator */} - } - /> - - {/* Avatar with Fallback */} - UN} - /> -
- ); -} -``` - - diff --git a/apps/ui-playground/content/design/components/avatar.shape.tsx b/apps/ui-playground/content/design/components/avatar.shape.tsx deleted file mode 100644 index 105f16875d..0000000000 --- a/apps/ui-playground/content/design/components/avatar.shape.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Avatar } from "@calcom/ui/components/avatar"; - -export function ShapeExample() { - return ( -
-
- - -
-
- ); -} diff --git a/apps/ui-playground/content/design/components/avatar.sizes.tsx b/apps/ui-playground/content/design/components/avatar.sizes.tsx deleted file mode 100644 index 078a626e7b..0000000000 --- a/apps/ui-playground/content/design/components/avatar.sizes.tsx +++ /dev/null @@ -1,29 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Avatar } from "@calcom/ui/components/avatar"; - -const sizes = ["xs", "xsm", "sm", "md", "mdLg", "lg", "xl"] as const; -const sampleImage = "https://cal.com/stakeholder/peer.jpg"; - -export const SizesExample: React.FC = () => ( - -
- {sizes.map((size) => ( -
- - {size} -
- ))} -
-
- {sizes.map((size) => ( -
- - {size} -
- ))} -
-
-); diff --git a/apps/ui-playground/content/design/components/avatar.tooltip.tsx b/apps/ui-playground/content/design/components/avatar.tooltip.tsx deleted file mode 100644 index 341d5a06b4..0000000000 --- a/apps/ui-playground/content/design/components/avatar.tooltip.tsx +++ /dev/null @@ -1,18 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Avatar } from "@calcom/ui/components/avatar"; - -const sampleImage = "https://cal.com/stakeholder/peer.jpg"; - -export const TooltipExample: React.FC = () => ( - -
-
- - Hover to see tooltip -
-
-
-); diff --git a/apps/ui-playground/content/design/components/badge.dots.tsx b/apps/ui-playground/content/design/components/badge.dots.tsx deleted file mode 100644 index 7f39362a50..0000000000 --- a/apps/ui-playground/content/design/components/badge.dots.tsx +++ /dev/null @@ -1,33 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Badge } from "@calcom/ui/components/badge"; - -const variants = [ - "default", - "warning", - "orange", - "success", - "green", - "gray", - "blue", - "red", - "error", - "grayWithoutHover", -] as const; - -export const DotsExample: React.FC = () => ( - -
- {variants.map((variant) => ( -
- - {variant} - - Dot -
- ))} -
-
-); diff --git a/apps/ui-playground/content/design/components/badge.icons.tsx b/apps/ui-playground/content/design/components/badge.icons.tsx deleted file mode 100644 index de3fe76340..0000000000 --- a/apps/ui-playground/content/design/components/badge.icons.tsx +++ /dev/null @@ -1,33 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Badge } from "@calcom/ui/components/badge"; - -const variants = [ - "default", - "warning", - "orange", - "success", - "green", - "gray", - "blue", - "red", - "error", - "grayWithoutHover", -] as const; - -export const IconsExample: React.FC = () => ( - -
- {variants.map((variant) => ( -
- - {variant} - - Icon -
- ))} -
-
-); diff --git a/apps/ui-playground/content/design/components/badge.interactive.tsx b/apps/ui-playground/content/design/components/badge.interactive.tsx deleted file mode 100644 index 03d94ec368..0000000000 --- a/apps/ui-playground/content/design/components/badge.interactive.tsx +++ /dev/null @@ -1,33 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Badge } from "@calcom/ui/components/badge"; - -const variants = [ - "default", - "warning", - "orange", - "success", - "green", - "gray", - "blue", - "red", - "error", - "grayWithoutHover", -] as const; - -export const InteractiveExample: React.FC = () => ( - -
- {variants.map((variant) => ( -
- alert(`${variant} badge clicked!`)}> - Click me - - Clickable -
- ))} -
-
-); diff --git a/apps/ui-playground/content/design/components/badge.mdx b/apps/ui-playground/content/design/components/badge.mdx deleted file mode 100644 index 6b6ca51ff5..0000000000 --- a/apps/ui-playground/content/design/components/badge.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Badge -airtableId: recso7QMfD2xwI04K ---- -import { Badge } from "@calcom/ui/components/badge" -import { RenderComponentWithSnippet } from "@/app/components/render" -import { Row } from "@/app/components/row" -import { VariantsExample } from "./badge.variants" -import { IconsExample } from "./badge.icons" -import { DotsExample } from "./badge.dots" -import { InteractiveExample } from "./badge.interactive" -import { RoundedExample } from "./badge.rounded" - -## Variants and Sizes - -Badges come in different variants and sizes to suit various use cases. - - - -## With Icons - -Badges can include icons to provide additional visual context. - - - -## With Dots - -Badges can include dots, useful for showing status or notifications. - - - -## Interactive - -Badges can be made interactive with click handlers. - - - -## Rounded - -Badges can be fully rounded, useful for numerical indicators. - - diff --git a/apps/ui-playground/content/design/components/badge.rounded.tsx b/apps/ui-playground/content/design/components/badge.rounded.tsx deleted file mode 100644 index e31a1c2e47..0000000000 --- a/apps/ui-playground/content/design/components/badge.rounded.tsx +++ /dev/null @@ -1,33 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Badge } from "@calcom/ui/components/badge"; - -const variants = [ - "default", - "warning", - "orange", - "success", - "green", - "gray", - "blue", - "red", - "error", - "grayWithoutHover", -] as const; - -export const RoundedExample: React.FC = () => ( - -
- {variants.map((variant) => ( -
- - 1 - - {variant} -
- ))} -
-
-); diff --git a/apps/ui-playground/content/design/components/badge.variants.tsx b/apps/ui-playground/content/design/components/badge.variants.tsx deleted file mode 100644 index b3e80a386a..0000000000 --- a/apps/ui-playground/content/design/components/badge.variants.tsx +++ /dev/null @@ -1,42 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Badge } from "@calcom/ui/components/badge"; - -const variants = [ - "default", - "warning", - "orange", - "success", - "green", - "gray", - "blue", - "red", - "error", - "grayWithoutHover", -] as const; - -const sizes = ["sm", "md", "lg"] as const; - -export const VariantsExample: React.FC = () => ( - -
- {variants.map((variant) => ( -
-

{variant}

-
- {sizes.map((size) => ( -
- - {variant} - - {size} -
- ))} -
-
- ))} -
-
-); diff --git a/apps/ui-playground/content/design/components/button.buttongroup.tsx b/apps/ui-playground/content/design/components/button.buttongroup.tsx deleted file mode 100644 index 2982634791..0000000000 --- a/apps/ui-playground/content/design/components/button.buttongroup.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Button } from "@calcom/ui/components/button"; -import { ButtonGroup } from "@calcom/ui/components/buttonGroup"; - -export const ButtonGroupExample = () => { - return ( - - {/* Basic Button Group */} - - - Disabled -
- ))} - -
- -
-

Disabled with Icons

- - {colors.map((color) => ( -
- - With Icon -
- ))} -
-
- - -); diff --git a/apps/ui-playground/content/design/components/button.icons.tsx b/apps/ui-playground/content/design/components/button.icons.tsx deleted file mode 100644 index 1c1b24c1e3..0000000000 --- a/apps/ui-playground/content/design/components/button.icons.tsx +++ /dev/null @@ -1,42 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { Row } from "@/app/components/row"; - -import { Button } from "@calcom/ui/components/button"; - -const colors = ["primary", "secondary", "minimal", "destructive"] as const; - -export const IconsExample: React.FC = () => ( - -
-
-

Start Icon

- - {colors.map((color) => ( -
- - Start Icon -
- ))} -
-
- -
-

End Icon

- - {colors.map((color) => ( -
- - End Icon -
- ))} -
-
-
-
-); diff --git a/apps/ui-playground/content/design/components/button.loading.tsx b/apps/ui-playground/content/design/components/button.loading.tsx deleted file mode 100644 index 4a5b33c34e..0000000000 --- a/apps/ui-playground/content/design/components/button.loading.tsx +++ /dev/null @@ -1,44 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { Row } from "@/app/components/row"; - -import { Button } from "@calcom/ui/components/button"; - -const colors = ["primary", "secondary", "minimal", "destructive"] as const; - -export const LoadingExample: React.FC = () => { - return ( - -
-
-

Loading State

- - {colors.map((color) => ( -
- - Loading -
- ))} -
-
- -
-

Loading with Icons

- - {colors.map((color) => ( -
- - With Icon -
- ))} -
-
-
-
- ); -}; diff --git a/apps/ui-playground/content/design/components/button.mdx b/apps/ui-playground/content/design/components/button.mdx deleted file mode 100644 index cf7a55bb7a..0000000000 --- a/apps/ui-playground/content/design/components/button.mdx +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Button -airtableId: recEJyzUeMMXCjyTB ---- -import { Button } from "@calcom/ui/components/button" -import { RenderComponentWithSnippet } from "@/app/components/render" -import { Row } from "@/app/components/row" -import { OnClickExample } from "./button.onClick" -import { VariantExample } from "./button.variant" -import { IconsExample } from "./button.icons" -import { LoadingExample } from "./button.loading" -import { DisabledExample } from "./button.disabled" -import { ButtonGroupExample,ButtonGroupSizes,ButtonGroupSizesCombined} from "./button.buttongroup" - -## Variants and Colors - -Buttons come in different variants and colors to suit different purposes. Each variant can be combined with any color and size. - - - -## Icons - -Buttons can include icons at the start or end. The icon color and size are automatically handled by the button component. - - - -## Loading State - -Buttons can show a loading state to indicate an ongoing action. The loading spinner replaces the button text while maintaining the button's width. - - - -## Disabled State - -Buttons can be disabled to indicate that they are not interactive. The disabled state is visually distinct and prevents any click events. - - - -## onClick Events - -Buttons handle click events like any other button component. You can provide an onClick handler to respond to user interactions. - - - -Providing a loading state will add a spinner on the left side of the button. - - - -## Disabled - - - -## Button Groups - -Buttons can be grouped together using the ButtonGroup component. The ButtonGroup component can be used to create a group of related buttons with consistent spacing and optional combined borders. - - - -### Button Group Sizes - -#### Separated - - - -#### Combined - - - -## Usage - -```tsx -// Primary button (default) - - -// Secondary button - - -// Minimal button - - -// Destructive button - - -// With start icon - - -// With end icon - - -// With link - - -// Different sizes - - - - -``` diff --git a/apps/ui-playground/content/design/components/button.onClick.tsx b/apps/ui-playground/content/design/components/button.onClick.tsx deleted file mode 100644 index 35f1418cd9..0000000000 --- a/apps/ui-playground/content/design/components/button.onClick.tsx +++ /dev/null @@ -1,14 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { Row } from "@/app/components/row"; - -import { Button } from "@calcom/ui/components/button"; - -export const OnClickExample: React.FC = () => ( - - - - - -); diff --git a/apps/ui-playground/content/design/components/button.variant.tsx b/apps/ui-playground/content/design/components/button.variant.tsx deleted file mode 100644 index 0a8d72ebfe..0000000000 --- a/apps/ui-playground/content/design/components/button.variant.tsx +++ /dev/null @@ -1,43 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { Row } from "@/app/components/row"; - -import { Button } from "@calcom/ui/components/button"; - -const variants = ["button", "icon"] as const; -const colors = ["primary", "secondary", "minimal", "destructive"] as const; -const sizes = ["xs", "sm", "base", "lg"] as const; - -export const VariantExample: React.FC = () => ( - -
- {variants.map((variant) => ( -
-

{variant === "button" ? "Default" : variant}

-
- {colors.map((color) => ( -
-

{color}

- - {sizes.map((size) => ( -
- - {size} -
- ))} -
-
- ))} -
-
- ))} -
-
-); diff --git a/apps/ui-playground/content/design/components/checkbox.basic.tsx b/apps/ui-playground/content/design/components/checkbox.basic.tsx deleted file mode 100644 index e8f353f9ce..0000000000 --- a/apps/ui-playground/content/design/components/checkbox.basic.tsx +++ /dev/null @@ -1,31 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Checkbox } from "@calcom/ui/components/form"; - -export const BasicExample: React.FC = () => ( - -
-
- - Unchecked -
- -
- - Checked -
- -
- - Disabled -
- -
- - Disabled Checked -
-
-
-); diff --git a/apps/ui-playground/content/design/components/checkbox.description.tsx b/apps/ui-playground/content/design/components/checkbox.description.tsx deleted file mode 100644 index 8ae2473bcf..0000000000 --- a/apps/ui-playground/content/design/components/checkbox.description.tsx +++ /dev/null @@ -1,15 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { CheckboxField } from "@calcom/ui/components/form"; - -export const DescriptionExample: React.FC = () => ( - -
- - - -
-
-); diff --git a/apps/ui-playground/content/design/components/checkbox.infoIcon.tsx b/apps/ui-playground/content/design/components/checkbox.infoIcon.tsx deleted file mode 100644 index 32e9cdcdc5..0000000000 --- a/apps/ui-playground/content/design/components/checkbox.infoIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { CheckboxField } from "@calcom/ui/components/form"; - -export const InfoIconExample: React.FC = () => ( - - - -); diff --git a/apps/ui-playground/content/design/components/checkbox.labelPosition.tsx b/apps/ui-playground/content/design/components/checkbox.labelPosition.tsx deleted file mode 100644 index 66561cfce2..0000000000 --- a/apps/ui-playground/content/design/components/checkbox.labelPosition.tsx +++ /dev/null @@ -1,24 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { CheckboxField } from "@calcom/ui/components/form"; - -export const LabelPositionExample: React.FC = () => ( - -
- -
- -
-
-
-); diff --git a/apps/ui-playground/content/design/components/checkbox.mdx b/apps/ui-playground/content/design/components/checkbox.mdx deleted file mode 100644 index fc71982bba..0000000000 --- a/apps/ui-playground/content/design/components/checkbox.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Checkbox -airtableId: recXGPNAfDJVm8NHo ---- -import { Checkbox } from "@calcom/ui/components/form" -import { RenderComponentWithSnippet } from "@/app/components/render" -import { Row } from "@/app/components/row" -import { BasicExample } from "./checkbox.basic" -import { DescriptionExample } from "./checkbox.description" -import { LabelPositionExample } from "./checkbox.labelPosition" -import { InfoIconExample } from "./checkbox.infoIcon" - -## Basic Usage - -Checkboxes in their various states - unchecked, checked, disabled, and disabled checked. - - - -## With Description - -Checkboxes can include descriptions to provide additional context. - - - -## Label Positions - -Labels can be positioned above or to the side of the checkbox. - - - -## With Information Icon - -Checkboxes can include an information icon with a tooltip for additional details. - - diff --git a/apps/ui-playground/content/design/components/dialog.basic.tsx b/apps/ui-playground/content/design/components/dialog.basic.tsx deleted file mode 100644 index 6c5eb0a568..0000000000 --- a/apps/ui-playground/content/design/components/dialog.basic.tsx +++ /dev/null @@ -1,33 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useState } from "react"; - -import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; - -export const BasicExample: React.FC = () => { - const [open, setOpen] = useState(false); - - return ( - -
- - - -

- Dialogs are used to display content that requires user attention or interaction. They appear - above the page content and must be closed before interacting with the page again. -

- - - - -
-
-
-
- ); -}; diff --git a/apps/ui-playground/content/design/components/dialog.confirmation.tsx b/apps/ui-playground/content/design/components/dialog.confirmation.tsx deleted file mode 100644 index d3acc63ea3..0000000000 --- a/apps/ui-playground/content/design/components/dialog.confirmation.tsx +++ /dev/null @@ -1,37 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useState } from "react"; - -import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; - -export const ConfirmationExample: React.FC = () => { - const [open, setOpen] = useState(false); - - return ( - -
- - - - - - - - - -
-
- ); -}; diff --git a/apps/ui-playground/content/design/components/dialog.form.tsx b/apps/ui-playground/content/design/components/dialog.form.tsx deleted file mode 100644 index 7e7720ea49..0000000000 --- a/apps/ui-playground/content/design/components/dialog.form.tsx +++ /dev/null @@ -1,56 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useState } from "react"; - -import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; -import { TextAreaField } from "@calcom/ui/components/form"; - -export const FormExample: React.FC = () => { - const [open, setOpen] = useState(false); - const [formInput, setFormInput] = useState(""); - - return ( - -
- - - -
- - Your Feedback - (Optional) - - } - value={formInput} - onChange={(e) => setFormInput(e.target.value)} - /> -
- - - - -
-
-
-

Current Form Input:

-
-            {formInput || "No input yet"}
-          
-
-
-
- ); -}; diff --git a/apps/ui-playground/content/design/components/dialog.largeContent.tsx b/apps/ui-playground/content/design/components/dialog.largeContent.tsx deleted file mode 100644 index 0d77357d8b..0000000000 --- a/apps/ui-playground/content/design/components/dialog.largeContent.tsx +++ /dev/null @@ -1,58 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useState } from "react"; - -import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; - -export const LargeContentExample: React.FC = () => { - const [open, setOpen] = useState(false); - - return ( - -
- - - -
- {Array.from({ length: 5 }).map((_, i) => ( -
-

Section {i + 1}

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus - hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend - nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis - nisl tempor. -

-

- Suspendisse in orci enim. Integer vel sapien at risus ultrices ornare nec sit amet nibh. - Duis blandit lectus ac odio rhoncus non congue diam bibendum. Aliquam erat volutpat. -

- {i === 2 && ( -
-

Important Notice

-

- This is a highlighted section within the content to demonstrate how different UI - elements appear within a scrollable dialog. -

-
- )} -
- ))} -
- - Decline - - -
-
-
-
- ); -}; diff --git a/apps/ui-playground/content/design/components/dialog.mdx b/apps/ui-playground/content/design/components/dialog.mdx deleted file mode 100644 index 5e03bc7ebd..0000000000 --- a/apps/ui-playground/content/design/components/dialog.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Dialog -airtableId: rechCoaoEMZLnLChR ---- -import { Dialog } from "@calcom/ui/components/dialog" -import { RenderComponentWithSnippet } from "@/app/components/render" -import { Row } from "@/app/components/row" -import { BasicExample } from "./dialog.basic" -import { LargeContentExample } from "./dialog.largeContent" -import { FormExample } from "./dialog.form" -import { ConfirmationExample } from "./dialog.confirmation" - -## Basic Dialog - -A simple dialog with a title, description, and action buttons. - - - -## Large Content Dialog - -A dialog that can handle scrollable content, such as terms and conditions. - - - -## Form Dialog - -A dialog containing a form for user input. - - - -## Confirmation Dialog - -A dialog for confirming destructive actions. - - diff --git a/apps/ui-playground/content/design/components/dropdown.avatarTrigger.tsx b/apps/ui-playground/content/design/components/dropdown.avatarTrigger.tsx deleted file mode 100644 index 1b980fa104..0000000000 --- a/apps/ui-playground/content/design/components/dropdown.avatarTrigger.tsx +++ /dev/null @@ -1,38 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Avatar } from "@calcom/ui/components/avatar"; -import { - Dropdown, - DropdownMenuTrigger, - DropdownMenuContent, - DropdownItem, - DropdownMenuLabel, - DropdownMenuSeparator, -} from "@calcom/ui/components/dropdown"; - -export const AvatarTriggerExample: React.FC = () => ( - -
-
- - - - - - Profile - - View Profile - Settings - - Sign out - - - Avatar Menu -
-
-
-); diff --git a/apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx b/apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx deleted file mode 100644 index 10fc247e37..0000000000 --- a/apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx +++ /dev/null @@ -1,84 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import type { IconName } from "@calcom/ui"; -import { Button } from "@calcom/ui/components/button"; -import { - Dropdown, - DropdownMenuTrigger, - DropdownMenuContent, - DropdownItem, - DropdownMenuLabel, -} from "@calcom/ui/components/dropdown"; - -const menuItems = [ - { label: "View", icon: "eye", kbd: "V" }, - { label: "Edit", icon: "edit", kbd: "E" }, - { label: "Share", icon: "share", kbd: "⌘S" }, - { label: "Delete", icon: "trash", destructive: true, kbd: "⌘⌫" }, -] as { - label: string; - icon: IconName; - destructive?: boolean; - kbd?: string; -}[]; - -export const ButtonTriggerExample: React.FC = () => ( - -
- {/* Default Button */} -
- - - - - - Actions - {menuItems.map((item) => ( - - {item.label} - - ))} - - - Default -
- - {/* Button with Icon */} -
- - - - - - Quick Actions - {menuItems.map((item) => ( - - {item.label} - - ))} - - - With Icon -
- - {/* Icon Button */} -
- - -
-
-
-); diff --git a/apps/ui-playground/content/design/components/dropdown.complex.tsx b/apps/ui-playground/content/design/components/dropdown.complex.tsx deleted file mode 100644 index fed3f374aa..0000000000 --- a/apps/ui-playground/content/design/components/dropdown.complex.tsx +++ /dev/null @@ -1,86 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Avatar } from "@calcom/ui/components/avatar"; -import { Button } from "@calcom/ui/components/button"; -import { - Dropdown, - DropdownMenuTrigger, - DropdownMenuContent, - DropdownItem, - DropdownMenuLabel, - DropdownMenuSeparator, -} from "@calcom/ui/components/dropdown"; - -export const ComplexExample: React.FC = () => ( - -
- {/* Example 1: Complex Menu Structure */} -
- - - - - - My account - Profile - Billing - Settings - Keyboard Shortcuts - - Team - Invite users - New team - - Github - Support - API - - - Complex Menu -
- - {/* Example 2: Avatar with Icons */} -
- - - - - - peer@cal.com - - My account - Plan - Billing - Integrations - Module - - - Log out - - - - With Icons -
- - {/* Example 3: Simple Actions */} -
- - -
-
-
-); diff --git a/apps/ui-playground/content/design/components/dropdown.mdx b/apps/ui-playground/content/design/components/dropdown.mdx deleted file mode 100644 index ace82eef94..0000000000 --- a/apps/ui-playground/content/design/components/dropdown.mdx +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Dropdown -airtableId: recMePWqulsKOCa59 ---- -import { Dropdown } from "@calcom/ui/components/dropdown" -import { RenderComponentWithSnippet } from "@/app/components/render" -import { Row } from "@/app/components/row" -import { ButtonTriggerExample } from "./dropdown.buttonTrigger" -import { AvatarTriggerExample } from "./dropdown.avatarTrigger" -import { ComplexExample } from "./dropdown.complex" - -## Button Trigger - -Dropdowns can be triggered by various types of buttons. - - - -## Avatar Trigger - -Dropdowns can be triggered by avatar components, commonly used for profile menus. - - - -## Complex Examples - -More complex dropdown examples with various combinations of labels, icons, and separators. - - diff --git a/apps/ui-playground/content/design/components/emptyScreen.basic.tsx b/apps/ui-playground/content/design/components/emptyScreen.basic.tsx deleted file mode 100644 index bf6e465ad1..0000000000 --- a/apps/ui-playground/content/design/components/emptyScreen.basic.tsx +++ /dev/null @@ -1,17 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { EmptyScreen } from "@calcom/ui/components/empty-screen"; - -export const BasicExample: React.FC = () => ( - - alert("Create Meeting clicked")} - /> - -); diff --git a/apps/ui-playground/content/design/components/emptyScreen.border.tsx b/apps/ui-playground/content/design/components/emptyScreen.border.tsx deleted file mode 100644 index f7c5d987fd..0000000000 --- a/apps/ui-playground/content/design/components/emptyScreen.border.tsx +++ /dev/null @@ -1,37 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { EmptyScreen } from "@calcom/ui/components/empty-screen"; - -export const BorderExample: React.FC = () => ( - -
- {/* Without Border */} -
-

Without Border

- alert("Browse Apps clicked")} - border={false} - /> -
- - {/* With Solid Border */} -
-

With Solid Border

- alert("Compose clicked")} - dashedBorder={false} - /> -
-
-
-); diff --git a/apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx b/apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx deleted file mode 100644 index 876276957d..0000000000 --- a/apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx +++ /dev/null @@ -1,18 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { EmptyScreen } from "@calcom/ui/components/empty-screen"; - -export const CustomIconExample: React.FC = () => ( - - alert("Add Members clicked")} - /> - -); diff --git a/apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx b/apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx deleted file mode 100644 index a51833bc0d..0000000000 --- a/apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx +++ /dev/null @@ -1,28 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { EmptyScreen } from "@calcom/ui/components/empty-screen"; - -export const HtmlContentExample: React.FC = () => ( - - - Custom Headline with HTML - - } - description={ -
-

This is a custom description with multiple paragraphs.

-

- You can include any HTML content here. -

-
- } - buttonText="Learn More" - buttonOnClick={() => alert("Learn More clicked")} - /> -
-); diff --git a/apps/ui-playground/content/design/components/emptyScreen.mdx b/apps/ui-playground/content/design/components/emptyScreen.mdx deleted file mode 100644 index 94ba61fbd3..0000000000 --- a/apps/ui-playground/content/design/components/emptyScreen.mdx +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Empty Screen ---- -import { EmptyScreen } from "@calcom/ui/components/empty-screen"; -import { RenderComponentWithSnippet } from "@/app/components/render" -import { Row } from "@/app/components/row" -import { BasicExample } from "./emptyScreen.basic" -import { CustomIconExample } from "./emptyScreen.customIcon" -import { RawButtonExample } from "./emptyScreen.rawButton" -import { BorderExample } from "./emptyScreen.border" -import { HtmlContentExample } from "./emptyScreen.htmlContent" - -## Basic Usage - -A simple empty screen with an icon, headline, description, and action button. - - - -## Custom Icon - -Empty screen with a custom icon and styling. - - - -## Raw Button - -Empty screen with custom button layout. - - - -## Border Variations - -Empty screen with different border styles. - - - -## HTML Content - -Empty screen with custom HTML content in headline and description. - - diff --git a/apps/ui-playground/content/design/components/emptyScreen.rawButton.tsx b/apps/ui-playground/content/design/components/emptyScreen.rawButton.tsx deleted file mode 100644 index 28e3ee740b..0000000000 --- a/apps/ui-playground/content/design/components/emptyScreen.rawButton.tsx +++ /dev/null @@ -1,26 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Button } from "@calcom/ui/components/button"; -import { EmptyScreen } from "@calcom/ui/components/empty-screen"; - -export const RawButtonExample: React.FC = () => ( - - - - - - } - /> - -); diff --git a/apps/ui-playground/content/design/components/form.addOns.tsx b/apps/ui-playground/content/design/components/form.addOns.tsx deleted file mode 100644 index 74883658f1..0000000000 --- a/apps/ui-playground/content/design/components/form.addOns.tsx +++ /dev/null @@ -1,67 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useForm } from "react-hook-form"; - -import { Button } from "@calcom/ui/components/button"; -import { InputField } from "@calcom/ui/components/form"; -import { Icon } from "@calcom/ui/components/icon"; - -type FormValues = { - website: string; - githubUsername: string; - customDomain: string; -}; - -export const AddOnsExample: React.FC = () => { - const form = useForm({ - defaultValues: { - website: "", - githubUsername: "", - customDomain: "", - }, - }); - - const onSubmit = (data: FormValues) => { - console.log("Form submitted:", data); - }; - - return ( - -
- - - } - {...form.register("githubUsername")} - error={form.formState.errors.githubUsername?.message} - /> - -
- - -
- -
- ); -}; diff --git a/apps/ui-playground/content/design/components/form.basic.tsx b/apps/ui-playground/content/design/components/form.basic.tsx deleted file mode 100644 index 1768e7d50b..0000000000 --- a/apps/ui-playground/content/design/components/form.basic.tsx +++ /dev/null @@ -1,59 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useForm } from "react-hook-form"; - -import { Button } from "@calcom/ui/components/button"; -import { InputField } from "@calcom/ui/components/form"; - -type FormValues = { - username: string; - email: string; - password: string; -}; - -export const BasicExample: React.FC = () => { - const form = useForm({ - defaultValues: { - username: "", - email: "", - password: "", - }, - }); - - const onSubmit = (data: FormValues) => { - console.log("Form submitted:", data); - }; - - return ( - -
- - - -
- - -
- -
- ); -}; diff --git a/apps/ui-playground/content/design/components/form.mdx b/apps/ui-playground/content/design/components/form.mdx deleted file mode 100644 index e49856bf05..0000000000 --- a/apps/ui-playground/content/design/components/form.mdx +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Form ---- -import { RenderComponentWithSnippet } from "@/app/components/render" -import { Row } from "@/app/components/row" -import { BasicExample } from "./form.basic" -import { AddOnsExample } from "./form.addOns" -import { SpecialFieldsExample } from "./form.specialFields" - -## Basic Fields - -Basic form fields with validation using React Hook Form and Zod. - - - -## Fields with Add-ons - -Form fields with leading and trailing add-ons. - - - -## Number and Special Fields - -Form fields for numbers and special input types. - - diff --git a/apps/ui-playground/content/design/components/form.specialFields.tsx b/apps/ui-playground/content/design/components/form.specialFields.tsx deleted file mode 100644 index 86dd9258e1..0000000000 --- a/apps/ui-playground/content/design/components/form.specialFields.tsx +++ /dev/null @@ -1,53 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useForm } from "react-hook-form"; - -import { Button } from "@calcom/ui/components/button"; -import { InputField } from "@calcom/ui/components/form"; - -type FormValues = { - age?: number; - phone?: string; -}; - -export const SpecialFieldsExample: React.FC = () => { - const form = useForm({ - defaultValues: { - age: undefined, - phone: "", - }, - }); - - const onSubmit = (data: FormValues) => { - console.log("Form submitted:", data); - }; - - return ( - -
- - -
- - -
- -
- ); -}; diff --git a/apps/ui-playground/content/design/components/input.mdx b/apps/ui-playground/content/design/components/input.mdx deleted file mode 100644 index b95fb005bf..0000000000 --- a/apps/ui-playground/content/design/components/input.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Input -airtableId: rec2yv97ak5hv3kIL ---- -import { Input } from "@calcom/ui/components/form" -import { RenderComponentWithSnippet } from "@/app/components/render" -import { Row } from "@/app/components/row" -import { StatesExample } from "./input.states" -import { TypesExample } from "./input.types" -import { WidthsExample } from "./input.widths" -import { ValuesExample } from "./input.values" - -## States - -Input fields in different states: default, disabled, and readonly. - - - -## Types - -Different types of input fields for various data types. - - - -## Widths - -Input fields with different width configurations. - - - -## With Values - -Input fields with default values and placeholders. - - diff --git a/apps/ui-playground/content/design/components/input.states.tsx b/apps/ui-playground/content/design/components/input.states.tsx deleted file mode 100644 index f63285e774..0000000000 --- a/apps/ui-playground/content/design/components/input.states.tsx +++ /dev/null @@ -1,37 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Input } from "@calcom/ui/components/form"; - -const states = ["default", "disabled", "readonly"] as const; -const sizes = ["sm", "md"] as const; - -export const StatesExample: React.FC = () => ( - -
-
- {states.map((state) => ( -
-

{state}

-
- {sizes.map((size) => ( -
- - {size} -
- ))} -
-
- ))} -
-
-
-); diff --git a/apps/ui-playground/content/design/components/input.types.tsx b/apps/ui-playground/content/design/components/input.types.tsx deleted file mode 100644 index e9cbc4e3fb..0000000000 --- a/apps/ui-playground/content/design/components/input.types.tsx +++ /dev/null @@ -1,46 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Input } from "@calcom/ui/components/form"; - -const types = ["text", "email", "password", "number", "tel", "url", "search"] as const; -const sizes = ["sm", "md"] as const; - -export const TypesExample: React.FC = () => ( - -
-
- {types.map((type) => ( -
-

{type}

-
- {sizes.map((size) => ( -
- - {size} -
- ))} -
-
- ))} -
-
-
-); diff --git a/apps/ui-playground/content/design/components/input.values.tsx b/apps/ui-playground/content/design/components/input.values.tsx deleted file mode 100644 index c6835482c6..0000000000 --- a/apps/ui-playground/content/design/components/input.values.tsx +++ /dev/null @@ -1,31 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Input } from "@calcom/ui/components/form"; - -const sizes = ["sm", "md"] as const; - -export const ValuesExample: React.FC = () => ( - -
-
- {sizes.map((size) => ( -
-

Size: {size}

-
-
-

Default Value

- -
-
-

Placeholder

- -
-
-
- ))} -
-
-
-); diff --git a/apps/ui-playground/content/design/components/input.widths.tsx b/apps/ui-playground/content/design/components/input.widths.tsx deleted file mode 100644 index 804f31f466..0000000000 --- a/apps/ui-playground/content/design/components/input.widths.tsx +++ /dev/null @@ -1,31 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Input } from "@calcom/ui/components/form"; - -const sizes = ["sm", "md"] as const; - -export const WidthsExample: React.FC = () => ( - -
-
- {sizes.map((size) => ( -
-

Size: {size}

-
-
-

Full Width

- -
-
-

Auto Width

- -
-
-
- ))} -
-
-
-); diff --git a/apps/ui-playground/content/design/components/multiInputField.customization.tsx b/apps/ui-playground/content/design/components/multiInputField.customization.tsx deleted file mode 100644 index efa4bf1e44..0000000000 --- a/apps/ui-playground/content/design/components/multiInputField.customization.tsx +++ /dev/null @@ -1,71 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useForm, FormProvider } from "react-hook-form"; - -import { MultiOptionInput } from "@calcom/ui/components/form"; - -type FormValues = { - customPlaceholders: Array<{ label: string; id: string }>; - noMoveButtons: Array<{ label: string; id: string }>; - customLabel: Array<{ label: string; id: string }>; - keyValuePairs: Array<{ label: string; value: string; id: string }>; -}; - -export const CustomizationExample: React.FC = () => { - const methods = useForm(); - - return ( - - -
-
-
-

Key-Value Pairs

-

Allows inputting keys and values

- - fieldArrayName="keyValuePairs" - keyValueMode - keyLabel="Environment Variable" - valueLabel="Value" - optionPlaceholders={["NODE_ENV", "PORT", "DATABASE_URL"]} - valuePlaceholders={["production", "3000", "postgres://..."]} - defaultNumberOfOptions={3} - keyValueDelimiters={[":", "="]} - /> -
- -
-

Custom Placeholders

- - fieldArrayName="customPlaceholders" - optionPlaceholders={["Enter your name", "Enter your email", "Enter your phone"]} - defaultNumberOfOptions={3} - /> -
- -
-

Without Move Buttons

- - fieldArrayName="noMoveButtons" - optionPlaceholders={["Static option 1", "Static option 2"]} - defaultNumberOfOptions={2} - showMoveButtons={false} - /> -
- -
-

Custom Add Button Label

- - fieldArrayName="customLabel" - optionPlaceholders={["Social media link"]} - defaultNumberOfOptions={1} - addOptionLabel="Add another social media link" - /> -
-
-
-
-
- ); -}; diff --git a/apps/ui-playground/content/design/components/multiInputField.paste.tsx b/apps/ui-playground/content/design/components/multiInputField.paste.tsx deleted file mode 100644 index ea6fe03f96..0000000000 --- a/apps/ui-playground/content/design/components/multiInputField.paste.tsx +++ /dev/null @@ -1,76 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useForm, FormProvider } from "react-hook-form"; - -import { MultiOptionInput } from "@calcom/ui/components/form"; - -type FormValues = { - newlineOptions: Array<{ label: string; id: string }>; - commaOptions: Array<{ label: string; id: string }>; - customOptions: Array<{ label: string; id: string }>; - keyValueOptions: Array<{ label: string; value: string; id: string }>; -}; - -export const PasteExample: React.FC = () => { - const methods = useForm(); - - return ( - - -
-
-
-

Default Delimiters (Newline and Comma)

-

- Try pasting: “Option 1, Option 2” or multiple lines -

- - fieldArrayName="newlineOptions" - optionPlaceholders={["Paste here..."]} - defaultNumberOfOptions={1} - /> -
- -
-

Comma Only Delimiter

-

Try pasting: “First, Second, Third”

- - fieldArrayName="commaOptions" - optionPlaceholders={["Paste here..."]} - defaultNumberOfOptions={1} - pasteDelimiters={[","]} - /> -
- -
-

Key-Value Pair Paste Support

-

- Try pasting: “NODE_ENV=production” or “KEY1:value1, KEY2:value2” -

- - fieldArrayName="keyValueOptions" - keyValueMode - optionPlaceholders={["Key..."]} - valuePlaceholders={["Value..."]} - defaultNumberOfOptions={1} - keyValueDelimiters={[":", "="]} - /> -
- -
-

Custom Delimiters (Semicolon and Pipe)

-

Try pasting: “One;Two|Three”

- - fieldArrayName="customOptions" - optionPlaceholders={["Paste here..."]} - defaultNumberOfOptions={1} - pasteDelimiters={[";", "|"]} - /> -
-
-
-
-
- ); -}; diff --git a/apps/ui-playground/content/design/components/multiInputField.states.tsx b/apps/ui-playground/content/design/components/multiInputField.states.tsx deleted file mode 100644 index 82f4c20678..0000000000 --- a/apps/ui-playground/content/design/components/multiInputField.states.tsx +++ /dev/null @@ -1,55 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useForm, FormProvider } from "react-hook-form"; - -import { MultiOptionInput } from "@calcom/ui/components/form"; - -type FormValues = { - defaultOptions: Array<{ label: string; id: string }>; - disabledOptions: Array<{ label: string; id: string }>; - minOptions: Array<{ label: string; id: string }>; -}; - -export const StatesExample: React.FC = () => { - const methods = useForm(); - - return ( - - -
-
-
-

Default State

- - fieldArrayName="defaultOptions" - optionPlaceholders={["First option", "Second option", "Third option"]} - defaultNumberOfOptions={3} - /> -
- -
-

Disabled State

- - fieldArrayName="disabledOptions" - optionPlaceholders={["Disabled option 1", "Disabled option 2"]} - defaultNumberOfOptions={2} - disabled - /> -
- -
-

Minimum Options (2)

- - fieldArrayName="minOptions" - optionPlaceholders={["Required option 1", "Required option 2", "Optional option"]} - defaultNumberOfOptions={3} - minOptions={2} - /> -
-
-
-
-
- ); -}; diff --git a/apps/ui-playground/content/design/components/navigation.items.tsx b/apps/ui-playground/content/design/components/navigation.items.tsx deleted file mode 100644 index cc716d34ee..0000000000 --- a/apps/ui-playground/content/design/components/navigation.items.tsx +++ /dev/null @@ -1,92 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Badge } from "@calcom/ui/components/badge"; -import { NavigationItem } from "@calcom/ui/components/navigation"; - -export const ItemsExample: React.FC = () => ( - -
-
-

Basic Items

- - -
- -
-

With Badge

- 3, - }} - /> - New, - }} - /> -
- -
-

Active State

- - 3, - isCurrent: true, - }} - /> - - -
-
-
-); diff --git a/apps/ui-playground/content/design/components/navigation.mdx b/apps/ui-playground/content/design/components/navigation.mdx deleted file mode 100644 index 093eb207ba..0000000000 --- a/apps/ui-playground/content/design/components/navigation.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Navigation -airtableId: recwHio1ktKQOdXGL ---- -import { RenderComponentWithSnippet } from "@/app/components/render" -import { Row } from "@/app/components/row" -// import { SidebarExample } from "./navigation.sidebar.tsx" -import { ItemsExample } from "./navigation.items.tsx" - -{/* ## Sidebar Navigation - -Full sidebar navigation with logo, sections, and footer. - - */} - -## Navigation Items - -Individual navigation items with different states and variants. - - diff --git a/apps/ui-playground/content/design/components/navigation.sidebar.tsx b/apps/ui-playground/content/design/components/navigation.sidebar.tsx deleted file mode 100644 index c5cdcc1aab..0000000000 --- a/apps/ui-playground/content/design/components/navigation.sidebar.tsx +++ /dev/null @@ -1,204 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useState } from "react"; - -import { NavigationItem } from "@calcom/ui"; - -export const SidebarExample: React.FC = () => { - const [isDeelExpanded, setIsDeelExpanded] = useState(true); - - return ( - -
- - - - - -
Manage
- - - -
- - -
-
- - - - - - - - - - - setIsDeelExpanded(!isDeelExpanded), - child: [ - { name: "Profile", href: "#profile" }, - { name: "Members", href: "#members" }, - { name: "Event Types", href: "#event-types" }, - { name: "Appearance", href: "#appearance" }, - { name: "Billing", href: "#billing" }, - { name: "Booking Limits", href: "#booking-limits" }, - { name: "Attributes", href: "#attributes" }, - { name: "Segments", href: "#segments", isCurrent: true }, - ], - }} - /> - - -
- - ); -}; diff --git a/apps/ui-playground/content/design/components/pagination.mdx b/apps/ui-playground/content/design/components/pagination.mdx deleted file mode 100644 index e0eb078a58..0000000000 --- a/apps/ui-playground/content/design/components/pagination.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Pagination ---- - -import { BasicExample, CustomPageSizesExample, LargeDatasetExample, WithCallbacksExample } from "./pagination"; - -# Pagination - -The Pagination component provides a consistent way to handle data pagination across the application. It includes rows per page selection and navigation controls. - -## Installation - -```ts -import { Pagination } from "@calcom/ui"; -``` - -## Examples - -### Basic Usage - -A basic pagination component with default settings. - - - -### Custom Page Sizes - -Customize the available page size options. - - - -### With Navigation Callbacks - -Use `onNext` and `onPrevious` callbacks to perform additional actions when navigating pages. - - - -### Large Dataset - -The pagination component handles large datasets efficiently. - - - diff --git a/apps/ui-playground/content/design/components/pagination.tsx b/apps/ui-playground/content/design/components/pagination.tsx deleted file mode 100644 index f81e8988c1..0000000000 --- a/apps/ui-playground/content/design/components/pagination.tsx +++ /dev/null @@ -1,97 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useState } from "react"; - -import { Pagination } from "@calcom/ui/components/pagination"; - -export const BasicExample = () => { - const [currentPage, setCurrentPage] = useState(1); - const [pageSize, setPageSize] = useState(25); - const totalItems = 61; - - return ( - -
- -
-
- ); -}; - -export const CustomPageSizesExample = () => { - const [currentPage, setCurrentPage] = useState(1); - const [pageSize, setPageSize] = useState(5); - const totalItems = 25; - - return ( - -
- -
-
- ); -}; - -export const WithCallbacksExample = () => { - const [currentPage, setCurrentPage] = useState(1); - const [pageSize, setPageSize] = useState(25); - const totalItems = 100; - - const handleNext = () => { - console.log("Next page clicked"); - }; - - const handlePrevious = () => { - console.log("Previous page clicked"); - }; - - return ( - -
- -
-
- ); -}; - -export const LargeDatasetExample = () => { - const [currentPage, setCurrentPage] = useState(1); - const [pageSize, setPageSize] = useState(25); - const totalItems = 1000; - - return ( - -
- -
-
- ); -}; diff --git a/apps/ui-playground/content/design/components/rangeslider.basic.tsx b/apps/ui-playground/content/design/components/rangeslider.basic.tsx deleted file mode 100644 index a290893398..0000000000 --- a/apps/ui-playground/content/design/components/rangeslider.basic.tsx +++ /dev/null @@ -1,72 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useState } from "react"; - -import { RangeSlider } from "@calcom/ui/components/form"; - -export const BasicExample: React.FC = () => { - const [singleValue, setSingleValue] = useState([50]); - const [rangeValue, setRangeValue] = useState([20, 80]); - const [steppedValue, setSteppedValue] = useState([25]); - - return ( - -
-
-
-
- Single Value: {singleValue[0]}% -
- -
-
-
-
-
- - Range: {rangeValue[0]}% - {rangeValue[1]}% - -
- -
-
- -
-
-
- Step Size 25: {steppedValue[0]}% -
- -
-
-
-
-
- Disabled: 50% -
- -
-
-
-
- ); -}; diff --git a/apps/ui-playground/content/design/components/rangeslider.mdx b/apps/ui-playground/content/design/components/rangeslider.mdx deleted file mode 100644 index 6b1b7410af..0000000000 --- a/apps/ui-playground/content/design/components/rangeslider.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Range Slider -airtableId: recPe8JPnGCVmjROA ---- - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { Row } from "@/app/components/row"; - -import { BasicExample } from "./rangeslider.basic.tsx"; -import { PopoverExample } from "./rangeslider.popover"; - -## Basic - -Basic range slider for selecting numeric values. - - - -## With Popover - -Range slider with a popover showing the current value. - - diff --git a/apps/ui-playground/content/design/components/rangeslider.popover.tsx b/apps/ui-playground/content/design/components/rangeslider.popover.tsx deleted file mode 100644 index 8805ed9548..0000000000 --- a/apps/ui-playground/content/design/components/rangeslider.popover.tsx +++ /dev/null @@ -1,71 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useState } from "react"; - -import { RangeSliderPopover } from "@calcom/ui/components/form"; - -export const PopoverExample: React.FC = () => { - const [defaultRange, setDefaultRange] = useState([15, 30]); - const [customRange, setCustomRange] = useState([5, 20]); - const [largeRange, setLargeRange] = useState([0, 100]); - - return ( - -
-
-

Default Range (15-30 mins)

- -
- -
-

Custom Range with Success Badge (5-20 mins)

- -
- -
-

Large Range with Warning Badge (0-100 mins)

- -
- -
-

Selected Values:

-
-            {JSON.stringify(
-              {
-                defaultRange,
-                customRange,
-                largeRange,
-              },
-              null,
-              2
-            )}
-          
-
-
-
- ); -}; diff --git a/apps/ui-playground/content/design/components/section.basic.tsx b/apps/ui-playground/content/design/components/section.basic.tsx deleted file mode 100644 index 5563890e15..0000000000 --- a/apps/ui-playground/content/design/components/section.basic.tsx +++ /dev/null @@ -1,58 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useState } from "react"; - -import { Switch } from "@calcom/ui/components/form"; -import { Section } from "@calcom/ui/components/section"; - -export const BasicExample = () => { - const [isOpen, setIsOpen] = useState(true); - - return ( - -
- - - - {isOpen && ( - -

This is the main content of the section.

-
- )} -
-
- ); -}; - -export const BasicExampleSnippet = ` -"use client"; - -import { useState } from "react"; -import { Section } from "@calcom/ui/components/section"; -import { Switch } from "@calcom/ui/components/form"; - -const BasicSection = () => { - const [isOpen, setIsOpen] = useState(true); - - return ( -
- - - - - - {isOpen && ( - -

This is the main content of the section.

-
- )} -
- ); -}; -`; diff --git a/apps/ui-playground/content/design/components/section.mdx b/apps/ui-playground/content/design/components/section.mdx deleted file mode 100644 index b98257cf2d..0000000000 --- a/apps/ui-playground/content/design/components/section.mdx +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Section ---- -import { Section } from "@calcom/ui/components/section" -import { RenderComponentWithSnippet } from "@/app/components/render" -import { Row } from "@/app/components/row" -import { BasicExample } from "./section.basic" -import { WithIconExample } from "./section.withIcon" -import { SubSectionExample } from "./section.subsection" - -## Basic Usage - -The Section component provides a structured way to organize content with a consistent visual hierarchy. It includes several subcomponents for different parts of the section. - - - -## With Icon - -Sections can include an icon in the header to provide visual context. - - - -## SubSections - -Sections can contain subsections for organizing related content in a nested structure. - - - -## Components - -The Section component is composed of several subcomponents: - -- `Section` - The root container -- `Section.Header` - Container for the section header -- `Section.Title` - The section title -- `Section.Description` - Optional description text -- `Section.Content` - The main content area -- `Section.SubSection` - A nested section -- `Section.SubSectionHeader` - Header for a subsection -- `Section.SubSectionContent` - Content area for a subsection diff --git a/apps/ui-playground/content/design/components/section.subsection.tsx b/apps/ui-playground/content/design/components/section.subsection.tsx deleted file mode 100644 index dbb461880d..0000000000 --- a/apps/ui-playground/content/design/components/section.subsection.tsx +++ /dev/null @@ -1,151 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useState } from "react"; - -import { Input, Switch } from "@calcom/ui/components/form"; -import { Section } from "@calcom/ui/components/section"; - -export const SubSectionExample = () => { - const [isMainOpen, setIsMainOpen] = useState(true); - const [isFirstSubsectionOpen, setIsFirstSubsectionOpen] = useState(true); - const [isSecondSubsectionOpen, setIsSecondSubsectionOpen] = useState(true); - - return ( - -
- - - - {isMainOpen && ( - - - - - - - - - - - {isFirstSubsectionOpen && ( - -

This is the content of the first subsection.

-
- )} -
- - - - - {isSecondSubsectionOpen && ( - -
-
Field Name
-
Field Type
-
Value
-
When to Write
-
- -
- - - - -
-
-
- )} -
-
- )} -
-
- ); -}; - -export const SubSectionExampleSnippet = ` -"use client"; - -import { useState } from "react"; -import { Section } from "@calcom/ui/components/section"; -import { Switch } from "@calcom/ui/components/form"; - -const SectionWithSubsections = () => { - const [isMainOpen, setIsMainOpen] = useState(true); - const [isFirstSubsectionOpen, setIsFirstSubsectionOpen] = useState(true); - const [isSecondSubsectionOpen, setIsSecondSubsectionOpen] = useState(true); - - return ( -
- - - - {isMainOpen && ( - - - - - - - - - - - {isFirstSubsectionOpen && ( - -

This is the content of the first subsection.

-
- )} -
- - - - - {isSecondSubsectionOpen && ( - -
-
Field Name
-
Field Type
-
Value
-
When to Write
-
- -
- - - - -
-
-
- )} -
-
- )} -
- ); -}; -`; diff --git a/apps/ui-playground/content/design/components/section.withIcon.tsx b/apps/ui-playground/content/design/components/section.withIcon.tsx deleted file mode 100644 index 7e1e032630..0000000000 --- a/apps/ui-playground/content/design/components/section.withIcon.tsx +++ /dev/null @@ -1,63 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useState } from "react"; - -import { Switch } from "@calcom/ui/components/form"; -import { Section } from "@calcom/ui/components/section"; - -export const WithIconExample = () => { - const [isOpen, setIsOpen] = useState(true); - - return ( - -
- - - - {isOpen && ( - -

- This section demonstrates how to include an icon in the header and uses FormKit auto-animate for - smooth transitions when toggling content visibility. -

-
- )} -
-
- ); -}; - -export const WithIconExampleSnippet = ` -"use client"; - -import { useState } from "react"; -import { Section } from "@calcom/ui/components/section"; -import { Switch } from "@calcom/ui/components/form"; - -const SectionWithIcon = () => { - const [isOpen, setIsOpen] = useState(true); - - return ( -
- - - - {isOpen && ( - -

- This section demonstrates how to include an icon in the header and uses FormKit auto-animate for - smooth transitions when toggling content visibility. -

-
- )} -
- ); -}; -`; diff --git a/apps/ui-playground/content/design/components/select.async.tsx b/apps/ui-playground/content/design/components/select.async.tsx deleted file mode 100644 index e6461cf60a..0000000000 --- a/apps/ui-playground/content/design/components/select.async.tsx +++ /dev/null @@ -1,89 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useCallback, useState } from "react"; - -import { Select } from "@calcom/ui/components/form"; -import { showToast } from "@calcom/ui/components/toast"; - -const countries = [ - { value: "us", label: "United States" }, - { value: "uk", label: "United Kingdom" }, - { value: "ca", label: "Canada" }, - { value: "fr", label: "France" }, - { value: "de", label: "Germany" }, - { value: "it", label: "Italy" }, - { value: "es", label: "Spain" }, - { value: "au", label: "Australia" }, - { value: "jp", label: "Japan" }, - { value: "br", label: "Brazil" }, -]; - -// Simulate an API call with delay -const searchCountries = (query: string) => { - return new Promise<{ value: string; label: string }[]>((resolve) => { - setTimeout(() => { - const filtered = countries.filter((country) => - country.label.toLowerCase().includes(query.toLowerCase()) - ); - resolve(filtered); - }, 1000); // Simulate network delay - }); -}; - -export const AsyncExample: React.FC = () => { - const [asyncOptions, setAsyncOptions] = useState<{ value: string; label: string }[]>([]); - const [isLoading, setIsLoading] = useState(false); - - const handleValueChange = (newValue: unknown, actionMeta: { action: string }) => { - showToast(`Selected: ${JSON.stringify(newValue)}, Action: ${actionMeta.action}`, "success"); - }; - - const loadOptions = useCallback(async (inputValue: string) => { - setIsLoading(true); - try { - const results = await searchCountries(inputValue); - setAsyncOptions(results); - } catch (error) { - showToast("Error loading options", "error"); - } finally { - setIsLoading(false); - } - }, []); - - return ( - -
- { - if (value) { - loadOptions(value); - } - }} - isLoading={isLoading} - placeholder="Search for a country... (small)" - noOptionsMessage={({ inputValue }) => - inputValue ? "No countries found" : "Start typing to search..." - } - onChange={handleValueChange} - size="sm" - /> -
-
- ); -}; diff --git a/apps/ui-playground/content/design/components/select.basic.tsx b/apps/ui-playground/content/design/components/select.basic.tsx deleted file mode 100644 index eab7e3da64..0000000000 --- a/apps/ui-playground/content/design/components/select.basic.tsx +++ /dev/null @@ -1,41 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; -import { useState } from "react"; - -import { Select } from "@calcom/ui/components/form"; - -const options = [ - { value: "chocolate", label: "Chocolate" }, - { value: "strawberry", label: "Strawberry" }, - { value: "vanilla", label: "Vanilla" }, - { value: "mint", label: "Mint" }, - { value: "coffee", label: "Coffee" }, -]; - -export const BasicExample: React.FC = () => { - const [singleValue, setSingleValue] = useState<{ value: string; label: string } | null>(null); - - return ( - -
- setSingleValue(newValue)} - isClearable - placeholder="Small size select..." - size="sm" - /> -
-
- ); -}; diff --git a/apps/ui-playground/content/design/components/select.disabled.tsx b/apps/ui-playground/content/design/components/select.disabled.tsx deleted file mode 100644 index 34da21f6a8..0000000000 --- a/apps/ui-playground/content/design/components/select.disabled.tsx +++ /dev/null @@ -1,27 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Select, SelectField } from "@calcom/ui/components/form"; - -const options = [ - { value: "chocolate", label: "Chocolate" }, - { value: "strawberry", label: "Strawberry" }, - { value: "vanilla", label: "Vanilla" }, - { value: "mint", label: "Mint" }, - { value: "coffee", label: "Coffee" }, -]; - -export const DisabledExample: React.FC = () => ( - -
- -
-
-); diff --git a/apps/ui-playground/content/design/components/select.loading.tsx b/apps/ui-playground/content/design/components/select.loading.tsx deleted file mode 100644 index ba9f72c525..0000000000 --- a/apps/ui-playground/content/design/components/select.loading.tsx +++ /dev/null @@ -1,21 +0,0 @@ -"use client"; - -import { RenderComponentWithSnippet } from "@/app/components/render"; - -import { Select } from "@calcom/ui/components/form"; - -const options = [ - { value: "chocolate", label: "Chocolate" }, - { value: "strawberry", label: "Strawberry" }, - { value: "vanilla", label: "Vanilla" }, - { value: "mint", label: "Mint" }, - { value: "coffee", label: "Coffee" }, -]; - -export const LoadingExample: React.FC = () => ( - -
- setMultiValue(newValue as { value: string; label: string }[])} - isMulti - isClearable - placeholder="Choose multiple flavors..." - /> -