From 74e5f4bf3711610a6f77fe10e4d6f397ce0b2c17 Mon Sep 17 00:00:00 2001 From: Lauris Skraucis Date: Thu, 21 Mar 2024 18:33:10 +0100 Subject: [PATCH] feat: atoms as npm package (#14160) * fix: getEnv not returning fallback API_URL breaking examples app * refactor: use vite as the only way to build atoms * refactor: web use atoms from web.ts and rest from dist * refactor: update atoms version, description and set privacy to public * fix: lib and ui import from web atoms * refactor: rename @calcom/platform-atoms to @calcom/atoms * feat: atoms as npm works with example app outside monorepo * start atoms from v1.0.0 * refactor: monorepo atoms for internal use * document atoms publishing * refactor: remove unused import in v2 * fix: mistakes made during main merge * refactor: move back examples app while still having it in atoms-examples repo * refactor: monorepo examples readme * feat: atoms yarn publish command * refactor: atoms css file simplify * fix: mocking atoms in ui unit test * fix: mocking atoms in app-store unit test --- apps/api/v2/src/env.ts | 4 +- .../oauth-client-users.controller.ts | 1 - apps/api/v2/swagger/documentation.json | 149 ++++++++++++++---- .../users/views/users-type-public-view.tsx | 2 +- apps/web/pages/availability/[schedule].tsx | 2 +- apps/web/pages/d/[link]/[slug].tsx | 2 +- .../instant-meeting/team/[slug]/[type].tsx | 2 +- apps/web/pages/team/[slug]/[type].tsx | 2 +- packages/app-store/test-setup.ts | 2 +- .../bookings/Booker/components/EventMeta.tsx | 2 +- .../Booker/components/hooks/useBookings.ts | 2 +- .../event-meta/AvailableEventLocations.tsx | 2 +- .../components/event-meta/Members.tsx | 2 +- packages/lib/hooks/useLocale.ts | 2 +- packages/platform/atoms/README.md | 2 +- packages/platform/atoms/build.mjs | 32 ---- packages/platform/atoms/components.ts | 6 - .../atoms/gcal-connect/GcalConnect.tsx | 2 +- .../platform/atoms/hooks/useIsPlatform.ts | 2 +- packages/platform/atoms/index.ts | 10 +- packages/platform/atoms/monorepo.ts | 8 + packages/platform/atoms/package.json | 35 ++-- packages/platform/atoms/vite.config.ts | 2 +- packages/platform/examples/base/.env.example | 3 + packages/platform/examples/base/README.md | 61 ++++--- packages/platform/examples/base/package.json | 2 +- .../platform/examples/base/src/pages/_app.tsx | 4 +- .../examples/base/src/pages/availability.tsx | 3 +- .../examples/base/src/pages/booking.tsx | 2 +- .../examples/base/src/pages/index.tsx | 2 +- packages/platform/examples/base/tsconfig.json | 3 +- packages/ui/components/test-setup.ts | 2 +- packages/ui/components/tooltip/Tooltip.tsx | 2 +- yarn.lock | 58 ++++--- 34 files changed, 234 insertions(+), 183 deletions(-) delete mode 100644 packages/platform/atoms/build.mjs delete mode 100644 packages/platform/atoms/components.ts create mode 100644 packages/platform/atoms/monorepo.ts create mode 100644 packages/platform/examples/base/.env.example diff --git a/apps/api/v2/src/env.ts b/apps/api/v2/src/env.ts index 97d51d3813..84516b243e 100644 --- a/apps/api/v2/src/env.ts +++ b/apps/api/v2/src/env.ts @@ -17,8 +17,8 @@ export type Environment = { export const getEnv = (key: K, fallback?: Environment[K]): Environment[K] => { const value = process.env[key] as Environment[K] | undefined; - if (typeof value === "undefined") { - if (typeof fallback !== "undefined") { + if (!value) { + if (fallback) { return fallback; } throw new Error(`Missing environment variable: ${key}.`); diff --git a/apps/api/v2/src/modules/oauth-clients/controllers/oauth-client-users/oauth-client-users.controller.ts b/apps/api/v2/src/modules/oauth-clients/controllers/oauth-client-users/oauth-client-users.controller.ts index 56faad2d37..e98b2c6798 100644 --- a/apps/api/v2/src/modules/oauth-clients/controllers/oauth-client-users/oauth-client-users.controller.ts +++ b/apps/api/v2/src/modules/oauth-clients/controllers/oauth-client-users/oauth-client-users.controller.ts @@ -22,7 +22,6 @@ import { Delete, } from "@nestjs/common"; import { User } from "@prisma/client"; -import * as crypto from "crypto"; import { SUCCESS_STATUS } from "@calcom/platform-constants"; import { ApiResponse } from "@calcom/platform-types"; diff --git a/apps/api/v2/swagger/documentation.json b/apps/api/v2/swagger/documentation.json index 7f3441eebe..47258d5d5c 100644 --- a/apps/api/v2/swagger/documentation.json +++ b/apps/api/v2/swagger/documentation.json @@ -213,7 +213,9 @@ } } }, - "tags": ["Development only"] + "tags": [ + "Development only" + ] }, "get": { "operationId": "OAuthClientsController_getOAuthClients", @@ -232,7 +234,9 @@ } } }, - "tags": ["Development only"] + "tags": [ + "Development only" + ] } }, "/api/v2/oauth-clients/{clientId}": { @@ -262,7 +266,9 @@ } } }, - "tags": ["Development only"] + "tags": [ + "Development only" + ] }, "patch": { "operationId": "OAuthClientsController_updateOAuthClient", @@ -300,7 +306,9 @@ } } }, - "tags": ["Development only"] + "tags": [ + "Development only" + ] }, "delete": { "operationId": "OAuthClientsController_deleteOAuthClient", @@ -328,7 +336,9 @@ } } }, - "tags": ["Development only"] + "tags": [ + "Development only" + ] } }, "/api/v2/oauth/{clientId}/authorize": { @@ -364,7 +374,9 @@ "description": "Bad request if the OAuth client is not found, if the redirect URI is invalid, or if the user has already authorized the client." } }, - "tags": ["Development only"] + "tags": [ + "Development only" + ] } }, "/api/v2/oauth/{clientId}/exchange": { @@ -415,7 +427,9 @@ "description": "Bad request if the authorization code is missing, invalid, or if the client ID and secret do not match." } }, - "tags": ["Development only"] + "tags": [ + "Development only" + ] } }, "/api/v2/oauth/{clientId}/refresh": { @@ -461,7 +475,9 @@ } } }, - "tags": ["Development only"] + "tags": [ + "Development only" + ] } }, "/api/v2/event-types": { @@ -1059,6 +1075,9 @@ "email": { "type": "string" }, + "name": { + "type": "string" + }, "timeFormat": { "type": "number" }, @@ -1072,7 +1091,9 @@ "type": "string" } }, - "required": ["email"] + "required": [ + "email" + ] }, "UpdateUserInput": { "type": "object", @@ -1080,6 +1101,9 @@ "email": { "type": "string" }, + "name": { + "type": "string" + }, "timeFormat": { "type": "number" }, @@ -1110,7 +1134,10 @@ "example": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoib2F1dGgtY2xpZW50Iiwi" } }, - "required": ["clientId", "clientSecret"] + "required": [ + "clientId", + "clientSecret" + ] }, "CreateOAuthClientResponseDto": { "type": "object", @@ -1118,7 +1145,10 @@ "status": { "type": "string", "example": "success", - "enum": ["success", "error"] + "enum": [ + "success", + "error" + ] }, "data": { "example": { @@ -1132,7 +1162,10 @@ ] } }, - "required": ["status", "data"] + "required": [ + "status", + "data" + ] }, "PlatformOAuthClientDto": { "type": "object", @@ -1158,7 +1191,9 @@ "example": "https://example.com/logo.png" }, "redirectUris": { - "example": ["https://example.com/callback"], + "example": [ + "https://example.com/callback" + ], "type": "array", "items": { "type": "string" @@ -1171,10 +1206,18 @@ "createdAt": { "format": "date-time", "type": "string", - "example": "2024-03-08T14:10:38.418Z" + "example": "2024-03-21T16:58:29.130Z" } }, - "required": ["id", "name", "secret", "permissions", "redirectUris", "organizationId", "createdAt"] + "required": [ + "id", + "name", + "secret", + "permissions", + "redirectUris", + "organizationId", + "createdAt" + ] }, "GetOAuthClientsResponseDto": { "type": "object", @@ -1182,7 +1225,10 @@ "status": { "type": "string", "example": "success", - "enum": ["success", "error"] + "enum": [ + "success", + "error" + ] }, "data": { "type": "array", @@ -1191,7 +1237,10 @@ } } }, - "required": ["status", "data"] + "required": [ + "status", + "data" + ] }, "GetOAuthClientResponseDto": { "type": "object", @@ -1199,13 +1248,19 @@ "status": { "type": "string", "example": "success", - "enum": ["success", "error"] + "enum": [ + "success", + "error" + ] }, "data": { "$ref": "#/components/schemas/PlatformOAuthClientDto" } }, - "required": ["status", "data"] + "required": [ + "status", + "data" + ] }, "UpdateOAuthClientInput": { "type": "object", @@ -1232,7 +1287,9 @@ "type": "string" } }, - "required": ["redirectUri"] + "required": [ + "redirectUri" + ] }, "ExchangeAuthorizationCodeInput": { "type": "object", @@ -1241,7 +1298,9 @@ "type": "string" } }, - "required": ["clientSecret"] + "required": [ + "clientSecret" + ] }, "KeysDto": { "type": "object", @@ -1255,7 +1314,10 @@ "example": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9" } }, - "required": ["accessToken", "refreshToken"] + "required": [ + "accessToken", + "refreshToken" + ] }, "KeysResponseDto": { "type": "object", @@ -1263,13 +1325,19 @@ "status": { "type": "string", "example": "success", - "enum": ["success", "error"] + "enum": [ + "success", + "error" + ] }, "data": { "$ref": "#/components/schemas/KeysDto" } }, - "required": ["status", "data"] + "required": [ + "status", + "data" + ] }, "RefreshTokenInput": { "type": "object", @@ -1278,7 +1346,9 @@ "type": "string" } }, - "required": ["refreshToken"] + "required": [ + "refreshToken" + ] }, "CreateEventTypeInput": { "type": "object", @@ -1294,7 +1364,11 @@ "type": "string" } }, - "required": ["length", "slug", "title"] + "required": [ + "length", + "slug", + "title" + ] }, "CreateAvailabilityInput": { "type": "object", @@ -1314,7 +1388,11 @@ "type": "string" } }, - "required": ["days", "startTime", "endTime"] + "required": [ + "days", + "startTime", + "endTime" + ] }, "CreateScheduleInput": { "type": "object", @@ -1336,7 +1414,11 @@ "default": true } }, - "required": ["name", "timeZone", "isDefault"] + "required": [ + "name", + "timeZone", + "isDefault" + ] }, "UpdateScheduleInput": { "type": "object", @@ -1392,7 +1474,14 @@ "type": "string" } }, - "required": ["start", "eventTypeId", "timeZone", "language", "metadata", "hashedLink"] + "required": [ + "start", + "eventTypeId", + "timeZone", + "language", + "metadata", + "hashedLink" + ] }, "ReserveSlotInput": { "type": "object", @@ -1400,4 +1489,4 @@ } } } -} +} \ No newline at end of file diff --git a/apps/web/modules/users/views/users-type-public-view.tsx b/apps/web/modules/users/views/users-type-public-view.tsx index ec1ac12b70..f0d4e9650e 100644 --- a/apps/web/modules/users/views/users-type-public-view.tsx +++ b/apps/web/modules/users/views/users-type-public-view.tsx @@ -2,9 +2,9 @@ import { useSearchParams } from "next/navigation"; +import { Booker } from "@calcom/atoms/monorepo"; import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses"; import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo"; -import { Booker } from "@calcom/platform-atoms"; import { type PageProps } from "./users-type-public-view.getServerSideProps"; diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx index ead64a76e2..5629c0c701 100644 --- a/apps/web/pages/availability/[schedule].tsx +++ b/apps/web/pages/availability/[schedule].tsx @@ -1,4 +1,4 @@ -import { AvailabilitySettings } from "@calcom/platform-atoms"; +import { AvailabilitySettings } from "@calcom/atoms/monorepo"; import PageWrapper from "@components/PageWrapper"; diff --git a/apps/web/pages/d/[link]/[slug].tsx b/apps/web/pages/d/[link]/[slug].tsx index 1c7a52c5a6..f6fc4e9aa1 100644 --- a/apps/web/pages/d/[link]/[slug].tsx +++ b/apps/web/pages/d/[link]/[slug].tsx @@ -1,8 +1,8 @@ "use client"; +import { Booker } from "@calcom/atoms/monorepo"; import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses"; import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo"; -import { Booker } from "@calcom/platform-atoms"; import { getServerSideProps, type PageProps } from "@lib/d/[link]/[slug]/getServerSideProps"; diff --git a/apps/web/pages/org/[orgSlug]/instant-meeting/team/[slug]/[type].tsx b/apps/web/pages/org/[orgSlug]/instant-meeting/team/[slug]/[type].tsx index 1d391d7eb2..748cc40cf0 100644 --- a/apps/web/pages/org/[orgSlug]/instant-meeting/team/[slug]/[type].tsx +++ b/apps/web/pages/org/[orgSlug]/instant-meeting/team/[slug]/[type].tsx @@ -1,13 +1,13 @@ import type { GetServerSidePropsContext } from "next"; import { z } from "zod"; +import { Booker } from "@calcom/atoms/monorepo"; import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses"; import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo"; import { getMultipleDurationValue } from "@calcom/features/bookings/lib/get-booking"; import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains"; import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains"; import slugify from "@calcom/lib/slugify"; -import { Booker } from "@calcom/platform-atoms"; import prisma from "@calcom/prisma"; import type { inferSSRProps } from "@lib/types/inferSSRProps"; diff --git a/apps/web/pages/team/[slug]/[type].tsx b/apps/web/pages/team/[slug]/[type].tsx index fea7fe4934..112db06174 100644 --- a/apps/web/pages/team/[slug]/[type].tsx +++ b/apps/web/pages/team/[slug]/[type].tsx @@ -2,9 +2,9 @@ import { useSearchParams } from "next/navigation"; +import { Booker } from "@calcom/atoms/monorepo"; import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses"; import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo"; -import { Booker } from "@calcom/platform-atoms"; import { getServerSideProps } from "@lib/team/[slug]/[type]/getServerSideProps"; import type { inferSSRProps } from "@lib/types/inferSSRProps"; diff --git a/packages/app-store/test-setup.ts b/packages/app-store/test-setup.ts index 039f7e3a31..98ae156feb 100644 --- a/packages/app-store/test-setup.ts +++ b/packages/app-store/test-setup.ts @@ -21,7 +21,7 @@ vi.mock("@calcom/lib/hooks/useLocale", () => ({ }, })); -vi.mock("@calcom/platform-atoms", () => ({ +vi.mock("@calcom/atoms/monorepo", () => ({ useIsPlatform: () => { return false; }, diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx index 9d07759ca4..9e87e75dad 100644 --- a/packages/features/bookings/Booker/components/EventMeta.tsx +++ b/packages/features/bookings/Booker/components/EventMeta.tsx @@ -3,13 +3,13 @@ import dynamic from "next/dynamic"; import { useMemo, useEffect } from "react"; import { shallow } from "zustand/shallow"; +import { Timezone as PlatformTimezoneSelect } from "@calcom/atoms/monorepo"; import { useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe"; import { EventDetails, EventMembers, EventMetaSkeleton, EventTitle } from "@calcom/features/bookings"; import { SeatsAvailabilityText } from "@calcom/features/bookings/components/SeatsAvailabilityText"; import { EventMetaBlock } from "@calcom/features/bookings/components/event-meta/Details"; import { useTimePreferences } from "@calcom/features/bookings/lib"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { Timezone as PlatformTimezoneSelect } from "@calcom/platform-atoms"; import { Calendar, Globe, User } from "@calcom/ui/components/icon"; import { fadeInUp } from "../config"; diff --git a/packages/features/bookings/Booker/components/hooks/useBookings.ts b/packages/features/bookings/Booker/components/hooks/useBookings.ts index e36f646ae0..2e24ce3e2c 100644 --- a/packages/features/bookings/Booker/components/hooks/useBookings.ts +++ b/packages/features/bookings/Booker/components/hooks/useBookings.ts @@ -3,6 +3,7 @@ import { useRouter } from "next/navigation"; import { useRef, useState, useEffect } from "react"; import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client"; +import { useHandleBookEvent } from "@calcom/atoms/monorepo"; import dayjs from "@calcom/dayjs"; import { sdkActionManager } from "@calcom/embed-core/embed-iframe"; import { useBookerStore } from "@calcom/features/bookings/Booker/store"; @@ -12,7 +13,6 @@ import { createBooking, createRecurringBooking, createInstantBooking } from "@ca import { getFullName } from "@calcom/features/form-builder/utils"; import { useBookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { useHandleBookEvent } from "@calcom/platform-atoms"; import { BookingStatus } from "@calcom/prisma/enums"; import { bookingMetadataSchema } from "@calcom/prisma/zod-utils"; import { trpc } from "@calcom/trpc"; diff --git a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx index bd3264b5df..b9a660c524 100644 --- a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx +++ b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx @@ -4,10 +4,10 @@ import type { LocationObject, } from "@calcom/app-store/locations"; import { getEventLocationType, getTranslatedLocation } from "@calcom/app-store/locations"; +import { useIsPlatform } from "@calcom/atoms/monorepo"; import { classNames } from "@calcom/lib"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import invertLogoOnDark from "@calcom/lib/invertLogoOnDark"; -import { useIsPlatform } from "@calcom/platform-atoms"; import { Tooltip } from "@calcom/ui"; import { Link } from "@calcom/ui/components/icon"; import { Video } from "@calcom/ui/components/icon"; diff --git a/packages/features/bookings/components/event-meta/Members.tsx b/packages/features/bookings/components/event-meta/Members.tsx index bf6490e101..fbae607816 100644 --- a/packages/features/bookings/components/event-meta/Members.tsx +++ b/packages/features/bookings/components/event-meta/Members.tsx @@ -1,4 +1,4 @@ -import { useIsPlatform } from "@calcom/platform-atoms"; +import { useIsPlatform } from "@calcom/atoms/monorepo"; import { SchedulingType } from "@calcom/prisma/enums"; import { UserAvatarGroup, UserAvatarGroupWithOrg } from "@calcom/ui"; diff --git a/packages/lib/hooks/useLocale.ts b/packages/lib/hooks/useLocale.ts index bfd3e1fe4e..622aa96493 100644 --- a/packages/lib/hooks/useLocale.ts +++ b/packages/lib/hooks/useLocale.ts @@ -1,6 +1,6 @@ import { useTranslation } from "next-i18next"; -import { useAtomsContext } from "@calcom/platform-atoms"; +import { useAtomsContext } from "@calcom/atoms/monorepo"; export const useLocale = (namespace: Parameters[0] = "common") => { const context = useAtomsContext(); diff --git a/packages/platform/atoms/README.md b/packages/platform/atoms/README.md index ae58ba064c..d4b3579bbc 100644 --- a/packages/platform/atoms/README.md +++ b/packages/platform/atoms/README.md @@ -1 +1 @@ -Contains the platform atoms \ No newline at end of file +Atoms - customizable UI components to integrate scheduling into products. diff --git a/packages/platform/atoms/build.mjs b/packages/platform/atoms/build.mjs deleted file mode 100644 index c5db37a1b7..0000000000 --- a/packages/platform/atoms/build.mjs +++ /dev/null @@ -1,32 +0,0 @@ -import path from "path"; -import { fileURLToPath } from "url"; -import { build } from "vite"; - -const __dirname = path.dirname(fileURLToPath(import.meta.url)); - -// @TODO: Do we want to automate this by checking all dirs for export.ts? -const libraries = [ - { - entry: path.resolve(__dirname, "./booker/export.ts"), - fileName: "booker", - }, -]; - -const promises = libraries.map(async (lib) => { - await build({ - build: { - outDir: `./dist/${lib.fileName}`, - lib: { - ...lib, - formats: ["es", "cjs"], - }, - emptyOutDir: false, - }, - resolve: { - alias: { - crypto: require.resolve("rollup-plugin-node-builtins"), - }, - }, - }); -}); -await Promise.all(promises); diff --git a/packages/platform/atoms/components.ts b/packages/platform/atoms/components.ts deleted file mode 100644 index 3ecabb3cdf..0000000000 --- a/packages/platform/atoms/components.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { CalProvider } from "./cal-provider"; -export { GcalConnect } from "./gcal-connect"; -export { PlatformAvailabilitySettingsWrapper as AvailabilitySettings } from "./availability"; -export { BookerPlatformWrapper as Booker } from "./booker"; -export { useIsPlatform } from "./hooks/useIsPlatform"; -export { useAtomsContext } from "./hooks/useAtomsContext"; diff --git a/packages/platform/atoms/gcal-connect/GcalConnect.tsx b/packages/platform/atoms/gcal-connect/GcalConnect.tsx index d3bc5e2569..fc7a40d4b1 100644 --- a/packages/platform/atoms/gcal-connect/GcalConnect.tsx +++ b/packages/platform/atoms/gcal-connect/GcalConnect.tsx @@ -1,4 +1,3 @@ -import { cn } from "@/lib/utils"; import type { FC } from "react"; import { Button } from "@calcom/ui"; @@ -6,6 +5,7 @@ import { CalendarDays } from "@calcom/ui/components/icon"; import { useAtomsContext } from "../hooks/useAtomsContext"; import { useGcal } from "../hooks/useGcal"; +import { cn } from "../src/lib/utils"; interface GcalConnectProps { className?: string; diff --git a/packages/platform/atoms/hooks/useIsPlatform.ts b/packages/platform/atoms/hooks/useIsPlatform.ts index 259e778866..08f68bec8e 100644 --- a/packages/platform/atoms/hooks/useIsPlatform.ts +++ b/packages/platform/atoms/hooks/useIsPlatform.ts @@ -1,4 +1,4 @@ -import { useAtomsContext } from "@calcom/platform-atoms"; +import { useAtomsContext } from "./useAtomsContext"; export const useIsPlatform = () => { const context = useAtomsContext(); diff --git a/packages/platform/atoms/index.ts b/packages/platform/atoms/index.ts index 60b8a3489a..3ecabb3cdf 100644 --- a/packages/platform/atoms/index.ts +++ b/packages/platform/atoms/index.ts @@ -1,8 +1,6 @@ -export { BookerWebWrapper as Booker } from "./booker"; -export { WebAvailabilitySettingsWrapper as AvailabilitySettings } from "./availability/wrappers/WebAvailabilitySettingsWrapper"; -export { CalProvider } from "./cal-provider/CalProvider"; +export { CalProvider } from "./cal-provider"; +export { GcalConnect } from "./gcal-connect"; +export { PlatformAvailabilitySettingsWrapper as AvailabilitySettings } from "./availability"; +export { BookerPlatformWrapper as Booker } from "./booker"; export { useIsPlatform } from "./hooks/useIsPlatform"; export { useAtomsContext } from "./hooks/useAtomsContext"; -export { useHandleBookEvent } from "./hooks/useHandleBookEvent"; -export * as Dialog from "./src/components/ui/dialog"; -export { Timezone } from "./timezone"; diff --git a/packages/platform/atoms/monorepo.ts b/packages/platform/atoms/monorepo.ts new file mode 100644 index 0000000000..60b8a3489a --- /dev/null +++ b/packages/platform/atoms/monorepo.ts @@ -0,0 +1,8 @@ +export { BookerWebWrapper as Booker } from "./booker"; +export { WebAvailabilitySettingsWrapper as AvailabilitySettings } from "./availability/wrappers/WebAvailabilitySettingsWrapper"; +export { CalProvider } from "./cal-provider/CalProvider"; +export { useIsPlatform } from "./hooks/useIsPlatform"; +export { useAtomsContext } from "./hooks/useAtomsContext"; +export { useHandleBookEvent } from "./hooks/useHandleBookEvent"; +export * as Dialog from "./src/components/ui/dialog"; +export { Timezone } from "./timezone"; diff --git a/packages/platform/atoms/package.json b/packages/platform/atoms/package.json index f38ab32ebc..17e214f3be 100644 --- a/packages/platform/atoms/package.json +++ b/packages/platform/atoms/package.json @@ -1,15 +1,14 @@ { - "name": "@calcom/platform-atoms", - "private": true, + "name": "@calcom/atoms", "sideEffects": false, "type": "module", - "description": "Cal.com Atoms", + "description": "Customizable UI components to integrate scheduling into your product.", "authors": "Cal.com, Inc.", - "version": "0.0.0", + "version": "1.0.5", "scripts": { - "build": "node build.mjs", - "vite-dev": "yarn vite build --watch & npx tailwindcss -i ./globals.css -o ./globals.min.css --postcss --minify --watch", - "vite-build": "yarn vite build && npx tailwindcss -i ./globals.css -o ./globals.min.css --postcss --minify" + "dev": "yarn vite build --watch & npx tailwindcss -i ./globals.css -o ./globals.min.css --postcss --minify --watch", + "build": "yarn vite build && npx tailwindcss -i ./globals.css -o ./globals.min.css --postcss --minify", + "publish": "rm -rf dist && yarn build && npm publish --access public" }, "devDependencies": { "@rollup/plugin-node-resolve": "^15.0.1", @@ -23,25 +22,25 @@ "vite-plugin-dts": "^3.7.3" }, "files": [ - "dist" + "dist", + "globals.min.css" ], - "main": "index.ts", - "module": "index.ts", + "main": "./dist/cal-atoms.umd.cjs", + "module": "./dist/cal-atoms.js", "exports": { ".": { - "import": "./index.ts", - "require": "./index.ts" + "require": "./dist/cal-atoms.umd.cjs", + "import": "./dist/cal-atoms.js" }, - "./components": { - "import": "./dist/cal-atoms.js", - "require": "./dist/cal-atoms.umd.cjs" + "./monorepo": { + "import": "./monorepo.ts", + "require": "./monorepo.ts" }, - "./dist/globals.min.css": "./globals.min.css", + "./globals.min.css": "./globals.min.css", "./dist/index.ts": "./index.ts" }, + "types": "./dist/index.d.ts", "dependencies": { - "@calcom/platform-constants": "*", - "@calcom/ui": "*", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", diff --git a/packages/platform/atoms/vite.config.ts b/packages/platform/atoms/vite.config.ts index f5742ad70a..562170b1da 100644 --- a/packages/platform/atoms/vite.config.ts +++ b/packages/platform/atoms/vite.config.ts @@ -8,7 +8,7 @@ export default defineConfig({ plugins: [react(), dts()], build: { lib: { - entry: [resolve(__dirname, "components.ts")], + entry: [resolve(__dirname, "index.ts")], name: "CalAtoms", fileName: "cal-atoms", }, diff --git a/packages/platform/examples/base/.env.example b/packages/platform/examples/base/.env.example new file mode 100644 index 0000000000..c076b38537 --- /dev/null +++ b/packages/platform/examples/base/.env.example @@ -0,0 +1,3 @@ +NEXT_PUBLIC_X_CAL_ID="" +X_CAL_SECRET_KEY="" +NEXT_PUBLIC_CALCOM_API_URL="http://localhost:5555/api/v2" diff --git a/packages/platform/examples/base/README.md b/packages/platform/examples/base/README.md index a75ac52488..8c1f26c621 100644 --- a/packages/platform/examples/base/README.md +++ b/packages/platform/examples/base/README.md @@ -1,40 +1,35 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +# Atoms examples +Example apps using atoms - customizable UI components to integrate scheduling into your product. -## Getting Started +## Running examples apps locally -First, run the development server: +1. Cal's backend is required to run example apps, so clone `https://github.com/calcom/cal.com` and follow setup instructions in the readme. Importantly, you need to have Google credentials setup by following [this section](https://github.com/calcom/cal.com?tab=readme-ov-file#obtaining-the-google-api-credentials) in the docs. -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +2. Open "apps/api/v2/.env" and copy environment variables below, and then copy `NEXTAUTH_SECRET` from the root ".env" of repository cloned in step 1. +```jsx +NODE_ENV="development" +API_PORT=5555 +DATABASE_READ_URL="postgresql://postgres:@localhost:5450/calendso" +DATABASE_WRITE_URL="postgresql://postgres:@localhost:5450/calendso" +API_URL="http://localhost" +NEXTAUTH_SECRET="copy from .env of root of repository cloned in step 1" +DATABASE_URL="postgresql://postgres:@localhost:5450/calendso" +JWT_SECRET="asjdijI1JIO12I3O89198jojioSAJDU" +REDIS_URL="redis://localhost:6379" ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +3. Start "apps/api/v2" api using `yarn dev`. +4. Start "packages/platform/atoms" atoms package with `yarn dev`. +5. Start "apps/web" cal web app using `yarn dx`. +6. Open your browser at "http://localhost:3000/" and login with admin username `admin@example.com` and password `ADMINadmin2022!`. +7. In the web app navigate to `http://localhost:3000/settings/organizations/new` and create a sample organization. When asked for phone verification code enter `111111`. +8. In the web app navigate to `http://localhost:3000/settings/organizations/platform/oauth-clients` and create a new oAuth client - give all permissions and set redirect uri to `http://localhost:4321` which points to example app. +9. Setup environment for the example app you want to run: + 1. First, copy ".env.example" into ".env". + 2. Open ".env" file and paste client id from step 8 in `NEXT_PUBLIC_X_CAL_ID` and client secret in `X_CAL_SECRET_KEY`. If in step 2 you used the same environment variables, then `NEXT_PUBLIC_CALCOM_API_URL` can stay as is. Otherwise adjust the port to point to the same `API_PORT` as you used in step 2. +10. Navigate to example app and setup database by running `rm -f prisma/dev.db && yarn prisma db push`. +11. Start the example app by running `yarn dev` and go to `http://localhost:4321`. +12. In the Google Cloud Console "API & Services" "Credentials" `https://console.cloud.google.com/apis/credentials` open web project setup in step 1 and add `http://localhost:5555/api/v2/platform/gcal/oauth/save` to the authorized redirect URIs. -You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. +Screenshot 2024-03-21 at 09 42 36 -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. - -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. - -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. - -## 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/deployment) for more details. diff --git a/packages/platform/examples/base/package.json b/packages/platform/examples/base/package.json index a3d9961f6f..535a4ab5f2 100644 --- a/packages/platform/examples/base/package.json +++ b/packages/platform/examples/base/package.json @@ -9,7 +9,7 @@ "lint": "next lint" }, "dependencies": { - "@calcom/platform-atoms": "*", + "@calcom/atoms": "*", "@prisma/client": "5.4.2", "next": "14.0.4", "prisma": "^5.7.1", diff --git a/packages/platform/examples/base/src/pages/_app.tsx b/packages/platform/examples/base/src/pages/_app.tsx index 1bf2c6d6c6..d92557e3b8 100644 --- a/packages/platform/examples/base/src/pages/_app.tsx +++ b/packages/platform/examples/base/src/pages/_app.tsx @@ -3,8 +3,8 @@ import type { AppProps } from "next/app"; import { Poppins } from "next/font/google"; import { useEffect, useState } from "react"; -import { CalProvider } from "@calcom/platform-atoms/components"; -import "@calcom/platform-atoms/dist/globals.min.css"; +import { CalProvider } from "@calcom/atoms"; +import "@calcom/atoms/globals.min.css"; const poppins = Poppins({ subsets: ["latin"], weight: ["400", "800"] }); diff --git a/packages/platform/examples/base/src/pages/availability.tsx b/packages/platform/examples/base/src/pages/availability.tsx index a4d36127c6..ce64dbb4a5 100644 --- a/packages/platform/examples/base/src/pages/availability.tsx +++ b/packages/platform/examples/base/src/pages/availability.tsx @@ -1,7 +1,7 @@ import { Navbar } from "@/components/Navbar"; import { Inter } from "next/font/google"; -import { AvailabilitySettings } from "@calcom/platform-atoms/components"; +import { AvailabilitySettings } from "@calcom/atoms"; const inter = Inter({ subsets: ["latin"] }); @@ -28,7 +28,6 @@ export default function Availability(props: { calUsername: string; calEmail: str onDeleteSuccess={() => { console.log("Deleted successfully"); }} - translations={{ timezone: "Select your timezone" }} /> diff --git a/packages/platform/examples/base/src/pages/booking.tsx b/packages/platform/examples/base/src/pages/booking.tsx index db9d9c6d94..3b25477968 100644 --- a/packages/platform/examples/base/src/pages/booking.tsx +++ b/packages/platform/examples/base/src/pages/booking.tsx @@ -2,7 +2,7 @@ import { Navbar } from "@/components/Navbar"; import { Inter } from "next/font/google"; import { useState } from "react"; -import { Booker } from "@calcom/platform-atoms/components"; +import { Booker } from "@calcom/atoms"; const inter = Inter({ subsets: ["latin"] }); diff --git a/packages/platform/examples/base/src/pages/index.tsx b/packages/platform/examples/base/src/pages/index.tsx index 523b37533c..3014ea30aa 100644 --- a/packages/platform/examples/base/src/pages/index.tsx +++ b/packages/platform/examples/base/src/pages/index.tsx @@ -1,7 +1,7 @@ import { Navbar } from "@/components/Navbar"; import { Inter, Poppins } from "next/font/google"; -import { GcalConnect } from "@calcom/platform-atoms/components"; +import { GcalConnect } from "@calcom/atoms"; const inter = Inter({ subsets: ["latin"] }); const poppins = Poppins({ subsets: ["latin"], weight: ["400", "800"] }); diff --git a/packages/platform/examples/base/tsconfig.json b/packages/platform/examples/base/tsconfig.json index 3206756d81..cdd585164d 100644 --- a/packages/platform/examples/base/tsconfig.json +++ b/packages/platform/examples/base/tsconfig.json @@ -15,7 +15,8 @@ "incremental": true, "paths": { "@/*": ["./src/*"] - } + }, + "forceConsistentCasingInFileNames": true }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] diff --git a/packages/ui/components/test-setup.ts b/packages/ui/components/test-setup.ts index f3ebcf787e..c553d891be 100644 --- a/packages/ui/components/test-setup.ts +++ b/packages/ui/components/test-setup.ts @@ -59,7 +59,7 @@ vi.mock("@calcom/lib/hooks/useLocale", () => ({ }, })); -vi.mock("@calcom/platform-atoms", () => ({ +vi.mock("@calcom/atoms/monorepo", () => ({ useIsPlatform: () => { return false; }, diff --git a/packages/ui/components/tooltip/Tooltip.tsx b/packages/ui/components/tooltip/Tooltip.tsx index 1a66c30c9d..d784cab958 100644 --- a/packages/ui/components/tooltip/Tooltip.tsx +++ b/packages/ui/components/tooltip/Tooltip.tsx @@ -1,8 +1,8 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip"; import React from "react"; +import { useIsPlatform } from "@calcom/atoms/monorepo"; import classNames from "@calcom/lib/classNames"; -import { useIsPlatform } from "@calcom/platform-atoms"; export function Tooltip({ children, diff --git a/yarn.lock b/yarn.lock index 6eaf5c6d70..714438a397 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3480,11 +3480,38 @@ __metadata: languageName: unknown linkType: soft +"@calcom/atoms@*, @calcom/atoms@workspace:packages/platform/atoms": + version: 0.0.0-use.local + resolution: "@calcom/atoms@workspace:packages/platform/atoms" + dependencies: + "@radix-ui/react-dialog": ^1.0.4 + "@radix-ui/react-slot": ^1.0.2 + "@radix-ui/react-toast": ^1.1.5 + "@rollup/plugin-node-resolve": ^15.0.1 + "@tanstack/react-query": ^5.17.15 + "@types/node": ^20.3.1 + "@types/react": 18.0.26 + "@types/react-dom": ^18.0.9 + "@vitejs/plugin-react": ^2.2.0 + class-variance-authority: ^0.4.0 + clsx: ^2.0.0 + lucide-react: ^0.171.0 + react-use: ^17.4.2 + rollup-plugin-node-builtins: ^2.1.2 + tailwind-merge: ^1.13.2 + tailwindcss: ^3.3.3 + tailwindcss-animate: ^1.0.6 + typescript: ^4.9.4 + vite: ^5.0.10 + vite-plugin-dts: ^3.7.3 + languageName: unknown + linkType: soft + "@calcom/base@workspace:packages/platform/examples/base": version: 0.0.0-use.local resolution: "@calcom/base@workspace:packages/platform/examples/base" dependencies: - "@calcom/platform-atoms": "*" + "@calcom/atoms": "*" "@prisma/client": 5.4.2 "@types/node": ^20.3.1 "@types/react": ^18 @@ -4148,35 +4175,6 @@ __metadata: languageName: unknown linkType: soft -"@calcom/platform-atoms@*, @calcom/platform-atoms@workspace:packages/platform/atoms": - version: 0.0.0-use.local - resolution: "@calcom/platform-atoms@workspace:packages/platform/atoms" - dependencies: - "@calcom/platform-constants": "*" - "@calcom/ui": "*" - "@radix-ui/react-dialog": ^1.0.4 - "@radix-ui/react-slot": ^1.0.2 - "@radix-ui/react-toast": ^1.1.5 - "@rollup/plugin-node-resolve": ^15.0.1 - "@tanstack/react-query": ^5.17.15 - "@types/node": ^20.3.1 - "@types/react": 18.0.26 - "@types/react-dom": ^18.0.9 - "@vitejs/plugin-react": ^2.2.0 - class-variance-authority: ^0.4.0 - clsx: ^2.0.0 - lucide-react: ^0.171.0 - react-use: ^17.4.2 - rollup-plugin-node-builtins: ^2.1.2 - tailwind-merge: ^1.13.2 - tailwindcss: ^3.3.3 - tailwindcss-animate: ^1.0.6 - typescript: ^4.9.4 - vite: ^5.0.10 - vite-plugin-dts: ^3.7.3 - languageName: unknown - linkType: soft - "@calcom/platform-constants@*, @calcom/platform-constants@workspace:packages/platform/constants": version: 0.0.0-use.local resolution: "@calcom/platform-constants@workspace:packages/platform/constants"