5d709cf63c
* ui playground * add types to ui * push avatar ignore ts and eslint errors * feat: V3 UI avatar (#18997) * avatar playground * add overflow-hidden back for loading indicator * update lock * feat: v3/badge (#18999) * badge intro * fix text on small badge * add dark mode warning * feat: v3/button (#19014) * TOC * wip buttons * shadows * secondary * semantic colours * minimal buttons * update disabled states * checkbox * dropdown v3 * load icons * fix design sections * fix icon gap * fix * remove client component from rsc * use peer as avatar * gif * fix button gap - dropdown iocn * support start icon in dropdowns * add alert demo + v3 component + darken semantic text * base inputs and text field * wip input * input field addon/suffix * toast page * wip select * match designs for input and select rounded * fix * fix select isloading transform * fix multi icons transition rotation * fix group heading * range slider demo + range slider * range slider popover design * v3 dialog * fix slider thumb size * wrap in suspense for useSearchParam difference in next14+ * base of tabs + horizontal tabs * fix select sizing to match input 36px * fix dark mode hover on button * target domState class for light/dark so we work on portal elements * fix default bg on popover * lightmode toasts + eleveation token * empty screen * intro to split button concept * mass colour updates * intro to themes * remove i18n from label with name * bouncy buttons * feat: small select * nav item dumb component * full demo * settings demo * fix tabs * fix mt * fix dropdown feedback from loom * alert fixes mentioned in loom * push font-cal * move to fumadocs * fix avatar * colors table * add typeography * icon + spacing guide * add border radius and shadow tables * fix colours and border radius * remove prose undline via fumas fork * fix icon buttons sizes * button group component * fix horizontal tabs * tab fixes * switches * pagination component * show toasts components raw * sync with airtable * add use client * 10px on input again * 10px in select also * fix input height * fix files merge * fix loading state for icon buttons * fix button fab * Enable addon to now overflow to next line in DS * use cal font for dialog text * add avatar square variant * fix select padding and menu size * fix type errors * fix type errors * add switch small size and fix type errors * fix ref types on input * update web styles * remove addonFilled to fix type errors * push dialog fixes * fix checkbox display * remove prose from alert examples * remove prose from all our component examples * badge rounded-lg on lg size * update colors * force w/h on icon buttons instead of inheriting * remove border-focus * remove border-focus from tailwind config * update tokens to match new colours * add new border subtle tokens and add to toasts * fix lg button padding * fix and drastically improve rtl rests * multi select use badges * use badge design for select pills * fix avatar alignment * fix tests and remove redudant ones * fix tests and remove redudant ones * update atoms globals css * extract tokens.css * extract app.css * force flex for atoms * add @calcom/ui/css * revert ui playground styles abstraction * fix input focus states * fix focus states for buttons * feat: v3/app work (#19233) * globals.css for app + event types listing search * few app wide NITS * fix select foucs within styling * fix formbuilder switch styles * fix disabled state of nested inputs * workflow fixes * webhook form fixes * i18n on tabs info * booking filters + tab * fix filters spacing * make first item so we get correct border radius if not default * round radio group in create event types + make button small * profile page * update editor br * button nits in existing places in the app * fix timezone select and multilist in guest form * fix text area on public booking page * size small event types create * margin on routing filter * filters improvments * routing insights fixes * fix date filter range * ooo fixes * fix teams/members bulk actions * create team UI * i18n in useTabs instead of in tab component now * Add event type setup border to availability * fix bulk actions on org members table * onboarding fixes * fix input types with ref stripe comparision * i18n fixes for platform * update globals of atoms * fix form builder firstname/lastname switch + correct footer useage * fix select * Revert "add @calcom/ui/css" This reverts commit 0dd8f9012907a278cfede4a98f289cb0744c9244. * revert tokens css * Revert "extract app.css" This reverts commit 10b998604816ad3310c24b36a02a638dabc5be24. * linear nits * workflow dropdown * fix page theme heading sizes to match cards * fix stepper for team creation * adjust margin to FilterSearchField * fix ooo icon * fix booker and dark mode due to darkgray 50 * more dark mode fixes * add size prop --------- Co-authored-by: Eunjae Lee <hey@eunjae.dev> Co-authored-by: Morgan Vernay <morgan@cal.com> * remove ui-playground * fix grow missing from merge * add search icon data-test-id back to search * fix FormAction style * fix datatestid for apps and tabs * change selector for team invitation e2e * fix use data-testid from item instaed of using names * rename upper case O * fix unit tests data-testid * fix unit tests data-testid * more data-testid changes * add data-testid to apps tab * data-testid to installed appPage * fix embed tests * fix filter-popover-trigger * use text-error and use dataId for locator * more e2e improvment * pass in single testId as button is now duplicate * show field-error instead * add test to eventtype tabs * Add css vars to embed too\ * add scrollbar and change dialog overlay colour * fix type * use attribute instead of class for tab detection * await promise * use new tokens for sprite generation * add correct testing Ids to e2e instead of button:text * use testIds for creation of orgs * Webhook receiver wait for 10 seconds --------- Co-authored-by: Eunjae Lee <hey@eunjae.dev> Co-authored-by: Morgan Vernay <morgan@cal.com> Co-authored-by: Hariom <hariombalhara@gmail.com> Co-authored-by: Joe Au-Yeung <j.auyeung419@gmail.com> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
146 lines
6.1 KiB
TypeScript
146 lines
6.1 KiB
TypeScript
import type { IncomingMessage } from "http";
|
|
import { dir } from "i18next";
|
|
import type { NextPageContext } from "next";
|
|
import type { DocumentContext, DocumentProps } from "next/document";
|
|
import Document, { Head, Html, Main, NextScript } from "next/document";
|
|
import { z } from "zod";
|
|
|
|
import { IS_PRODUCTION } from "@calcom/lib/constants";
|
|
|
|
import { csp } from "@lib/csp";
|
|
|
|
type Props = Record<string, unknown> & DocumentProps & { newLocale: string };
|
|
function setHeader(ctx: NextPageContext, name: string, value: string) {
|
|
try {
|
|
ctx.res?.setHeader(name, value);
|
|
} catch (e) {
|
|
// Getting "Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client" when revalidate calendar cache
|
|
console.log(`Error setting header ${name}=${value} for ${ctx.asPath || "unknown asPath"}`, e);
|
|
}
|
|
}
|
|
class MyDocument extends Document<Props> {
|
|
static async getInitialProps(ctx: DocumentContext) {
|
|
const { nonce } = csp(ctx.req || null, ctx.res || null);
|
|
if (!process.env.CSP_POLICY) {
|
|
setHeader(ctx, "x-csp", "not-opted-in");
|
|
} else if (!ctx.res?.getHeader("x-csp")) {
|
|
// If x-csp not set by gSSP, then it's initialPropsOnly
|
|
setHeader(ctx, "x-csp", "initialPropsOnly");
|
|
}
|
|
|
|
const getLocaleModule = ctx.req ? await import("@calcom/features/auth/lib/getLocale") : null;
|
|
|
|
const newLocale =
|
|
ctx.req && getLocaleModule
|
|
? // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
await getLocaleModule.getLocale(ctx.req as IncomingMessage & { cookies: Record<string, any> })
|
|
: "en";
|
|
|
|
const asPath = ctx.asPath || "";
|
|
// Use a dummy URL as default so that URL parsing works for relative URLs as well. We care about searchParams and pathname only
|
|
const parsedUrl = new URL(asPath, "https://dummyurl");
|
|
const isEmbedSnippetGeneratorPath = parsedUrl.pathname.startsWith("/event-types");
|
|
// FIXME: Revisit this logic to remove embedType query param check completely. Ideally, /embed should always be there at the end of the URL. Test properly and then remove it.
|
|
const isEmbed =
|
|
(parsedUrl.pathname.endsWith("/embed") || parsedUrl.searchParams.get("embedType") !== null) &&
|
|
!isEmbedSnippetGeneratorPath;
|
|
const embedColorScheme = parsedUrl.searchParams.get("ui.color-scheme");
|
|
const initialProps = await Document.getInitialProps(ctx);
|
|
return { isEmbed, embedColorScheme, nonce, ...initialProps, newLocale };
|
|
}
|
|
|
|
render() {
|
|
const { isEmbed, embedColorScheme } = this.props;
|
|
const newLocale = this.props.newLocale || "en";
|
|
const newDir = dir(newLocale);
|
|
|
|
const nonceParsed = z.string().safeParse(this.props.nonce);
|
|
const nonce = nonceParsed.success ? nonceParsed.data : "";
|
|
|
|
return (
|
|
<Html
|
|
lang={newLocale}
|
|
dir={newDir}
|
|
style={embedColorScheme ? { colorScheme: embedColorScheme as string } : undefined}>
|
|
<Head nonce={nonce}>
|
|
<script
|
|
nonce={nonce}
|
|
id="newLocale"
|
|
// eslint-disable-next-line react/no-danger
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
window.calNewLocale = "${newLocale}";
|
|
(function applyTheme() {
|
|
try {
|
|
const appTheme = localStorage.getItem('app-theme');
|
|
if (!appTheme) return;
|
|
|
|
let bookingTheme, username;
|
|
for (let i = 0; i < localStorage.length; i++) {
|
|
const key = localStorage.key(i);
|
|
if (key.startsWith('booking-theme:')) {
|
|
bookingTheme = localStorage.getItem(key);
|
|
username = key.split("booking-theme:")[1];
|
|
break;
|
|
}
|
|
}
|
|
|
|
const onReady = () => {
|
|
const isBookingPage = username && window.location.pathname.slice(1).startsWith(username);
|
|
|
|
if (document.body) {
|
|
document.body.classList.add(isBookingPage ? bookingTheme : appTheme);
|
|
} else {
|
|
requestAnimationFrame(onReady);
|
|
}
|
|
};
|
|
|
|
requestAnimationFrame(onReady);
|
|
} catch (e) {
|
|
console.error('Error applying theme:', e);
|
|
}
|
|
})();
|
|
`,
|
|
}}
|
|
/>
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/api/logo?type=apple-touch-icon" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/api/logo?type=favicon-32" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/api/logo?type=favicon-16" />
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
|
|
<meta name="msapplication-TileColor" content="#ff0000" />
|
|
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#F9FAFC" />
|
|
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1F1F1F" />
|
|
{!IS_PRODUCTION && process.env.VERCEL_ENV === "preview" && (
|
|
// eslint-disable-next-line @next/next/no-sync-scripts
|
|
<script
|
|
data-project-id="KjpMrKTnXquJVKfeqmjdTffVPf1a6Unw2LZ58iE4"
|
|
src="https://snippet.meticulous.ai/v1/stagingMeticulousSnippet.js"
|
|
/>
|
|
)}
|
|
</Head>
|
|
|
|
<body
|
|
className="dark:bg-default bg-subtle antialiased"
|
|
style={
|
|
isEmbed
|
|
? {
|
|
background: "transparent",
|
|
// Keep the embed hidden till parent initializes and
|
|
// - gives it the appropriate styles if UI instruction is there.
|
|
// - gives iframe the appropriate height(equal to document height) which can only be known after loading the page once in browser.
|
|
// - Tells iframe which mode it should be in (dark/light) - if there is a a UI instruction for that
|
|
visibility: "hidden",
|
|
}
|
|
: {}
|
|
}>
|
|
<Main />
|
|
<NextScript nonce={nonce} />
|
|
</body>
|
|
</Html>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default MyDocument;
|