commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 1.9k Packages Projects Releases Wiki Activity

feat: atoms as npm package (#14160)

Browse Source 
* 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
This commit is contained in:
Lauris Skraucis
2024-03-21 14:33:10 -03:00
committed by GitHub
parent 61a8543e08
commit 74e5f4bf37
34 changed files with 234 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/api/v2/src/env.ts
+2 -2
View File
@@ -17,8 +17,8 @@ export type Environment = {
export const getEnv = <K extends keyof Environment>(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}.`);
apps/api/v2/src/modules/oauth-clients/controllers/oauth-client-users/oauth-client-users.controller.ts
-1
View File
@@ -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";
apps/api/v2/swagger/documentation.json
+119 -30
View File
@@ -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 @@
}
}
}
}
}
apps/web/modules/users/views/users-type-public-view.tsx
+1 -1
View File
@@ -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";
apps/web/pages/availability/[schedule].tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { AvailabilitySettings } from "@calcom/platform-atoms";
import { AvailabilitySettings } from "@calcom/atoms/monorepo";
import PageWrapper from "@components/PageWrapper";
apps/web/pages/d/[link]/[slug].tsx
+1 -1
View File
@@ -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";
apps/web/pages/org/[orgSlug]/instant-meeting/team/[slug]/[type].tsx
+1 -1
View File
@@ -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";
apps/web/pages/team/[slug]/[type].tsx
+1 -1
View File
@@ -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";
packages/app-store/test-setup.ts
+1 -1
View File
@@ -21,7 +21,7 @@ vi.mock("@calcom/lib/hooks/useLocale", () => ({
},
}));
vi.mock("@calcom/platform-atoms", () => ({
vi.mock("@calcom/atoms/monorepo", () => ({
useIsPlatform: () => {
return false;
},
packages/features/bookings/Booker/components/EventMeta.tsx
+1 -1
View File
@@ -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";
packages/features/bookings/Booker/components/hooks/useBookings.ts
+1 -1
View File
@@ -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";
packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
+1 -1
View File
@@ -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";
packages/features/bookings/components/event-meta/Members.tsx
+1 -1
View File
@@ -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";
packages/lib/hooks/useLocale.ts
+1 -1
View File
@@ -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<typeof useTranslation>[0] = "common") => {
const context = useAtomsContext();
packages/platform/atoms/README.md
+1 -1
View File
@@ -1 +1 @@
Contains the platform atoms
Atoms - customizable UI components to integrate scheduling into products.
packages/platform/atoms/build.mjs
-32
View File
@@ -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);
packages/platform/atoms/components.ts
-6
View File
@@ -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";
packages/platform/atoms/gcal-connect/GcalConnect.tsx
+1 -1
View File
@@ -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;
packages/platform/atoms/hooks/useIsPlatform.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { useAtomsContext } from "@calcom/platform-atoms";
import { useAtomsContext } from "./useAtomsContext";
export const useIsPlatform = () => {
const context = useAtomsContext();
packages/platform/atoms/index.ts
+4 -6
View File
@@ -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";
packages/platform/atoms/monorepo.ts
+8
View File
@@ -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";
packages/platform/atoms/package.json
+17 -18
View File
@@ -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",
packages/platform/atoms/vite.config.ts
+1 -1
View File
@@ -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",
},
packages/platform/examples/base/.env.example
+3
View File
@@ -0,0 +1,3 @@
NEXT_PUBLIC_X_CAL_ID=""
X_CAL_SECRET_KEY=""
NEXT_PUBLIC_CALCOM_API_URL="http://localhost:5555/api/v2"
packages/platform/examples/base/README.md
+28 -33
View File
@@ -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.
<img width="1000" alt="Screenshot 2024-03-21 at 09 42 36" src="https://github.com/calcom/atoms-examples/assets/42170848/82ce4d7a-fc08-489a-ab06-a8eb41a68a2a">
[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.
packages/platform/examples/base/package.json
+1 -1
View File
@@ -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",
packages/platform/examples/base/src/pages/_app.tsx
+2 -2
View File
@@ -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"] });
packages/platform/examples/base/src/pages/availability.tsx
+1 -2
View File
@@ -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" }}
/>
</div>
</main>
packages/platform/examples/base/src/pages/booking.tsx
+1 -1
View File
@@ -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"] });
packages/platform/examples/base/src/pages/index.tsx
+1 -1
View File
@@ -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"] });
packages/platform/examples/base/tsconfig.json
+2 -1
View File
@@ -15,7 +15,8 @@
"incremental": true,
"paths": {
"@/*": ["./src/*"]
}
},
"forceConsistentCasingInFileNames": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
packages/ui/components/test-setup.ts
+1 -1
View File
@@ -59,7 +59,7 @@ vi.mock("@calcom/lib/hooks/useLocale", () => ({
},
}));
vi.mock("@calcom/platform-atoms", () => ({
vi.mock("@calcom/atoms/monorepo", () => ({
useIsPlatform: () => {
return false;
},
packages/ui/components/tooltip/Tooltip.tsx
+1 -1
View File
@@ -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,
yarn.lock
+28 -30
View File
@@ -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"