diff --git a/.prettierignore b/.prettierignore index 9904b212c2..3fb187bebd 100644 --- a/.prettierignore +++ b/.prettierignore @@ -23,3 +23,8 @@ apps/ui-library/public/r apps/**/.contentlayer # invalid JSON file packages/ui/src/components/Form/examples/PhoneProvidersSchema.json +apps/cms/config/api.ts +# files auto-generated by payload cms +apps/cms/src/app/* +apps/cms/src/migrations/* +apps/cms/src/payload-types.ts \ No newline at end of file diff --git a/apps/cms/.env.example b/apps/cms/.env.example new file mode 100644 index 0000000000..b8b497ca47 --- /dev/null +++ b/apps/cms/.env.example @@ -0,0 +1,13 @@ +DATABASE_URI=postgres://postgres:@127.0.0.1:5432/your-database-name +PAYLOAD_SECRET=YOUR_SECRET_HERE + +S3_BUCKET= +S3_ACCESS_KEY_ID= +S3_SECRET_ACCESS_KEY= +S3_REGION= +S3_ENDPOINT= + +NEXT_PUBLIC_SERVER_URL=http://localhost:3000/blog +CRON_SECRET=YOUR_CRON_SECRET_HERE +PREVIEW_SECRET=YOUR_SECRET_HERE +BLOG_APP_URL=http://localhost:3000 \ No newline at end of file diff --git a/apps/cms/.eslintrc.js b/apps/cms/.eslintrc.js new file mode 100644 index 0000000000..4f1d845f8c --- /dev/null +++ b/apps/cms/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ['eslint-config-supabase/next'], +} diff --git a/apps/cms/.gitignore b/apps/cms/.gitignore new file mode 100644 index 0000000000..3d53a40bcb --- /dev/null +++ b/apps/cms/.gitignore @@ -0,0 +1,43 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +/.idea/* +!/.idea/runConfigurations + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + +.env + +/media diff --git a/apps/cms/Dockerfile b/apps/cms/Dockerfile new file mode 100644 index 0000000000..93465cfa57 --- /dev/null +++ b/apps/cms/Dockerfile @@ -0,0 +1,71 @@ +# To use this Dockerfile, you have to set `output: 'standalone'` in your next.config.mjs file. +# From https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile + +FROM node:22.12.0-alpine AS base + +# Install dependencies only when needed +FROM base AS deps +# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed. +RUN apk add --no-cache libc6-compat +WORKDIR /app + +# Install dependencies based on the preferred package manager +COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./ +RUN \ + if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ + elif [ -f package-lock.json ]; then npm ci; \ + elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \ + else echo "Lockfile not found." && exit 1; \ + fi + + +# Rebuild the source code only when needed +FROM base AS builder +WORKDIR /app +COPY --from=deps /app/node_modules ./node_modules +COPY . . + +# Next.js collects completely anonymous telemetry data about general usage. +# Learn more here: https://nextjs.org/telemetry +# Uncomment the following line in case you want to disable telemetry during the build. +# ENV NEXT_TELEMETRY_DISABLED 1 + +RUN \ + if [ -f yarn.lock ]; then yarn run build; \ + elif [ -f package-lock.json ]; then npm run build; \ + elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \ + else echo "Lockfile not found." && exit 1; \ + fi + +# Production image, copy all the files and run next +FROM base AS runner +WORKDIR /app + +ENV NODE_ENV production +# Uncomment the following line in case you want to disable telemetry during runtime. +# ENV NEXT_TELEMETRY_DISABLED 1 + +RUN addgroup --system --gid 1001 nodejs +RUN adduser --system --uid 1001 nextjs + +# Remove this line if you do not have this folder +COPY --from=builder /app/public ./public + +# Set the correct permission for prerender cache +RUN mkdir .next +RUN chown nextjs:nodejs .next + +# Automatically leverage output traces to reduce image size +# https://nextjs.org/docs/advanced-features/output-file-tracing +COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ +COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static + +USER nextjs + +EXPOSE 3000 + +ENV PORT 3000 + +# server.js is created by next build from the standalone output +# https://nextjs.org/docs/pages/api-reference/next-config-js/output +CMD HOSTNAME="0.0.0.0" node server.js diff --git a/apps/cms/README.md b/apps/cms/README.md new file mode 100644 index 0000000000..f910262ecb --- /dev/null +++ b/apps/cms/README.md @@ -0,0 +1,23 @@ +# Payload CMS + +### Local Development + +1. run `cd apps/cms && supabase start` to start the local supabase project +2. run `cp .env.example .env` to copy the example environment variables and update the variables. You'll need to add the `S3_` variables to your `.env` to use Supabase Storage +3. `pnpm install && pnpm generate:importmap` to install dependencies and start the dev server +4. run `pnpm dev` in the apps/cms folder or `pnpm dev:cms` from the root +5. open `http://localhost:3030` to open the app in your browser + +Follow the on-screen instructions to login and create the first admin user. + +### Collections + +Collections are what data looks like in the Payload cms schema. The following are the collections currently configured in the app. + +- Authors +- Categories +- Events +- Media +- Posts +- Tags +- Users diff --git a/apps/cms/docker-compose.yml b/apps/cms/docker-compose.yml new file mode 100644 index 0000000000..dc5ddababa --- /dev/null +++ b/apps/cms/docker-compose.yml @@ -0,0 +1,30 @@ +version: '3' + +services: + payload: + image: node:18-alpine + ports: + - '3030:3030' + volumes: + - .:/home/node/app + - node_modules:/home/node/app/node_modules + working_dir: /home/node/app/ + command: sh -c "corepack enable && corepack prepare pnpm@latest --activate && pnpm install && pnpm dev" + depends_on: + - postgres + env_file: + - .env + + # Uncomment the following to use postgres + postgres: + restart: always + image: postgres:latest + volumes: + - pgdata:/var/lib/postgresql/data + ports: + - "5432:5432" + +volumes: + data: + # pgdata: + node_modules: diff --git a/apps/cms/next.config.mjs b/apps/cms/next.config.mjs new file mode 100644 index 0000000000..cc7ee7f02b --- /dev/null +++ b/apps/cms/next.config.mjs @@ -0,0 +1,31 @@ +import { withPayload } from '@payloadcms/next/withPayload' + +import redirects from './redirects.js' + +const NEXT_PUBLIC_SERVER_URL = process.env.VERCEL_PROJECT_PRODUCTION_URL + ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}` + : undefined || process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000' + +/** @type {import('next').NextConfig} */ +const nextConfig = { + images: { + remotePatterns: [ + ...[NEXT_PUBLIC_SERVER_URL /* 'https://example.com' */].map((item) => { + const url = new URL(item) + + return { + hostname: url.hostname, + protocol: url.protocol.replace(':', ''), + } + }), + ], + }, + reactStrictMode: true, + redirects, + eslint: { + // We are already running linting via GH action, this will skip linting during production build on Vercel + ignoreDuringBuilds: true, + }, +} + +export default withPayload(nextConfig, { devBundleServerPackages: false }) diff --git a/apps/cms/package.json b/apps/cms/package.json new file mode 100644 index 0000000000..003337863a --- /dev/null +++ b/apps/cms/package.json @@ -0,0 +1,47 @@ +{ + "name": "cms", + "version": "1.0.0", + "description": "Payload CMS for Supabase", + "license": "MIT", + "scripts": { + "build": "cross-env NODE_OPTIONS=--no-deprecation next build --turbopack", + "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev --turbopack --port 3030", + "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev", + "generate:importmap": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap", + "generate:types": "cross-env NODE_OPTIONS=--no-deprecation payload generate:types", + "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint", + "payload": "cross-env NODE_OPTIONS=--no-deprecation payload", + "start": "cross-env NODE_OPTIONS=--no-deprecation next start", + "ci": "cross-env NODE_OPTIONS=--no-deprecation payload migrate && pnpm build", + "clean": "rimraf node_modules .next", + "typecheck_IGNORED": "tsc --noEmit" + }, + "dependencies": { + "@payloadcms/db-postgres": "3.33.0", + "@payloadcms/live-preview-react": "^3.33.0", + "@payloadcms/next": "3.33.0", + "@payloadcms/payload-cloud": "3.33.0", + "@payloadcms/plugin-form-builder": "3.33.0", + "@payloadcms/plugin-nested-docs": "3.33.0", + "@payloadcms/plugin-seo": "3.33.0", + "@payloadcms/richtext-lexical": "3.33.0", + "@payloadcms/storage-s3": "3.33.0", + "@payloadcms/ui": "3.33.0", + "common": "workspace:*", + "config": "workspace:*", + "cross-env": "^7.0.3", + "eslint-config-supabase": "workspace:*", + "graphql": "^16.8.1", + "next": "~15.3.0", + "payload": "3.33.0", + "react": "catalog:", + "react-dom": "catalog:", + "sharp": "0.32.6" + }, + "devDependencies": { + "@types/node": "catalog:", + "@types/react": "catalog:", + "@types/react-dom": "catalog:", + "typescript": "5.7.3" + } +} diff --git a/apps/cms/redirects.js b/apps/cms/redirects.js new file mode 100644 index 0000000000..21b76ecc1b --- /dev/null +++ b/apps/cms/redirects.js @@ -0,0 +1,20 @@ +const redirects = async () => { + const internetExplorerRedirect = { + destination: '/ie-incompatible.html', + has: [ + { + type: 'header', + key: 'user-agent', + value: '(.*Trident.*)', // all ie browsers + }, + ], + permanent: false, + source: '/:path((?!ie-incompatible.html$).*)', // all pages except the incompatibility page + } + + const redirects = [internetExplorerRedirect] + + return redirects +} + +export default redirects diff --git a/apps/cms/src/access/isAdmin.ts b/apps/cms/src/access/isAdmin.ts new file mode 100644 index 0000000000..67922028ca --- /dev/null +++ b/apps/cms/src/access/isAdmin.ts @@ -0,0 +1,14 @@ +import type { AccessArgs, FieldAccess } from 'payload' +import type { User } from '@/payload-types' + +type isAdmin = (args: AccessArgs) => boolean + +export const isAdmin: isAdmin = ({ req: { user } }) => { + // Return true or false based on if the user has an admin role + return Boolean(user?.roles?.includes('admin')) +} + +export const isAdminFieldLevel: FieldAccess<{ id: string }, User> = ({ req: { user } }) => { + // Return true or false based on if the user has an admin role + return Boolean(user?.roles?.includes('admin')) +} diff --git a/apps/cms/src/access/isAdminOrSelf.ts b/apps/cms/src/access/isAdminOrSelf.ts new file mode 100644 index 0000000000..ad0c05e8ab --- /dev/null +++ b/apps/cms/src/access/isAdminOrSelf.ts @@ -0,0 +1,21 @@ +import type { Access } from 'payload' + +export const isAdminOrSelf: Access = ({ req: { user } }) => { + // Need to be logged in + if (user) { + // If user has role of 'admin' + if (user.roles?.includes('admin')) { + return true + } + + // If any other type of user, only provide access to themselves + return { + id: { + equals: user.id, + }, + } + } + + // Reject everyone else + return false +} diff --git a/apps/cms/src/access/isAnyone.ts b/apps/cms/src/access/isAnyone.ts new file mode 100644 index 0000000000..beb086b46c --- /dev/null +++ b/apps/cms/src/access/isAnyone.ts @@ -0,0 +1,3 @@ +import type { Access } from 'payload' + +export const isAnyone: Access = () => true diff --git a/apps/cms/src/access/isAuthenticated.ts b/apps/cms/src/access/isAuthenticated.ts new file mode 100644 index 0000000000..4112452bc3 --- /dev/null +++ b/apps/cms/src/access/isAuthenticated.ts @@ -0,0 +1,9 @@ +import type { AccessArgs } from 'payload' + +import type { User } from '@/payload-types' + +type isAuthenticated = (args: AccessArgs) => boolean + +export const isAuthenticated: isAuthenticated = ({ req: { user } }) => { + return Boolean(user) +} diff --git a/apps/cms/src/app/(frontend)/layout.tsx b/apps/cms/src/app/(frontend)/layout.tsx new file mode 100644 index 0000000000..8d03e91429 --- /dev/null +++ b/apps/cms/src/app/(frontend)/layout.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import './styles.css' + +export const metadata = { + description: 'Content Management System for the Supabase website', + title: 'Supabase CMS', +} + +export default async function RootLayout(props: { children: React.ReactNode }) { + const { children } = props + + return ( + + +
{children}
+ + + ) +} diff --git a/apps/cms/src/app/(frontend)/page.tsx b/apps/cms/src/app/(frontend)/page.tsx new file mode 100644 index 0000000000..a136f82f8b --- /dev/null +++ b/apps/cms/src/app/(frontend)/page.tsx @@ -0,0 +1,5 @@ +import { redirect } from 'next/navigation' + +export default async function HomePage() { + redirect('/admin') +} diff --git a/apps/cms/src/app/(frontend)/styles.css b/apps/cms/src/app/(frontend)/styles.css new file mode 100644 index 0000000000..d1fb9419d6 --- /dev/null +++ b/apps/cms/src/app/(frontend)/styles.css @@ -0,0 +1,164 @@ +:root { + --font-mono: 'Roboto Mono', monospace; +} + +* { + box-sizing: border-box; +} + +html { + font-size: 18px; + line-height: 32px; + + background: rgb(0, 0, 0); + -webkit-font-smoothing: antialiased; +} + +html, +body, +#app { + height: 100%; +} + +body { + font-family: system-ui; + font-size: 18px; + line-height: 32px; + + margin: 0; + color: rgb(1000, 1000, 1000); + + @media (max-width: 1024px) { + font-size: 15px; + line-height: 24px; + } +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +h1 { + margin: 40px 0; + font-size: 64px; + line-height: 70px; + font-weight: bold; + + @media (max-width: 1024px) { + margin: 24px 0; + font-size: 42px; + line-height: 42px; + } + + @media (max-width: 768px) { + font-size: 38px; + line-height: 38px; + } + + @media (max-width: 400px) { + font-size: 32px; + line-height: 32px; + } +} + +p { + margin: 24px 0; + + @media (max-width: 1024px) { + margin: calc(var(--base) * 0.75) 0; + } +} + +a { + color: currentColor; + + &:focus { + opacity: 0.8; + outline: none; + } + + &:active { + opacity: 0.7; + outline: none; + } +} + +svg { + vertical-align: middle; +} + +.home { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + height: 100vh; + padding: 45px; + max-width: 1024px; + margin: 0 auto; + overflow: hidden; + + @media (max-width: 400px) { + padding: 24px; + } + + .content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex-grow: 1; + + h1 { + text-align: center; + } + } + + .links { + display: flex; + align-items: center; + gap: 12px; + + a { + text-decoration: none; + padding: 0.25rem 0.5rem; + border-radius: 4px; + } + + .admin { + color: rgb(0, 0, 0); + background: rgb(1000, 1000, 1000); + border: 1px solid rgb(0, 0, 0); + } + + .docs { + color: rgb(1000, 1000, 1000); + background: rgb(0, 0, 0); + border: 1px solid rgb(1000, 1000, 1000); + } + } + + .footer { + display: flex; + align-items: center; + gap: 8px; + + @media (max-width: 1024px) { + flex-direction: column; + gap: 6px; + } + + p { + margin: 0; + } + + .codeLink { + text-decoration: none; + padding: 0 0.5rem; + background: rgb(60, 60, 60); + border-radius: 4px; + } + } +} diff --git a/apps/cms/src/app/(payload)/admin/[[...segments]]/not-found.tsx b/apps/cms/src/app/(payload)/admin/[[...segments]]/not-found.tsx new file mode 100644 index 0000000000..64108365fd --- /dev/null +++ b/apps/cms/src/app/(payload)/admin/[[...segments]]/not-found.tsx @@ -0,0 +1,24 @@ +/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */ +/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */ +import type { Metadata } from 'next' + +import config from '@payload-config' +import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views' +import { importMap } from '../importMap' + +type Args = { + params: Promise<{ + segments: string[] + }> + searchParams: Promise<{ + [key: string]: string | string[] + }> +} + +export const generateMetadata = ({ params, searchParams }: Args): Promise => + generatePageMetadata({ config, params, searchParams }) + +const NotFound = ({ params, searchParams }: Args) => + NotFoundPage({ config, params, searchParams, importMap }) + +export default NotFound diff --git a/apps/cms/src/app/(payload)/admin/[[...segments]]/page.tsx b/apps/cms/src/app/(payload)/admin/[[...segments]]/page.tsx new file mode 100644 index 0000000000..0de685cd62 --- /dev/null +++ b/apps/cms/src/app/(payload)/admin/[[...segments]]/page.tsx @@ -0,0 +1,24 @@ +/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */ +/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */ +import type { Metadata } from 'next' + +import config from '@payload-config' +import { RootPage, generatePageMetadata } from '@payloadcms/next/views' +import { importMap } from '../importMap' + +type Args = { + params: Promise<{ + segments: string[] + }> + searchParams: Promise<{ + [key: string]: string | string[] + }> +} + +export const generateMetadata = ({ params, searchParams }: Args): Promise => + generatePageMetadata({ config, params, searchParams }) + +const Page = ({ params, searchParams }: Args) => + RootPage({ config, params, searchParams, importMap }) + +export default Page diff --git a/apps/cms/src/app/(payload)/admin/importMap.js b/apps/cms/src/app/(payload)/admin/importMap.js new file mode 100644 index 0000000000..ab697bf4c4 --- /dev/null +++ b/apps/cms/src/app/(payload)/admin/importMap.js @@ -0,0 +1,43 @@ +import { SlugComponent as SlugComponent_92cc057d0a2abb4f6cf0307edf59f986 } from '@/fields/slug/SlugComponent' +import { RscEntryLexicalCell as RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc' +import { RscEntryLexicalField as RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc' +import { LexicalDiffComponent as LexicalDiffComponent_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc' +import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' +import { InlineToolbarFeatureClient as InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' +import { FixedToolbarFeatureClient as FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' +import { BlocksFeatureClient as BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' +import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' +import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' +import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' +import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' +import { LinkFeatureClient as LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' +import { HeadingFeatureClient as HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' +import { OverviewComponent as OverviewComponent_a8a977ebc872c5d5ea7ee689724c0860 } from '@payloadcms/plugin-seo/client' +import { MetaTitleComponent as MetaTitleComponent_a8a977ebc872c5d5ea7ee689724c0860 } from '@payloadcms/plugin-seo/client' +import { MetaImageComponent as MetaImageComponent_a8a977ebc872c5d5ea7ee689724c0860 } from '@payloadcms/plugin-seo/client' +import { MetaDescriptionComponent as MetaDescriptionComponent_a8a977ebc872c5d5ea7ee689724c0860 } from '@payloadcms/plugin-seo/client' +import { PreviewComponent as PreviewComponent_a8a977ebc872c5d5ea7ee689724c0860 } from '@payloadcms/plugin-seo/client' +import { S3ClientUploadHandler as S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24 } from '@payloadcms/storage-s3/client' + +export const importMap = { + "@/fields/slug/SlugComponent#SlugComponent": SlugComponent_92cc057d0a2abb4f6cf0307edf59f986, + "@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell": RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e, + "@payloadcms/richtext-lexical/rsc#RscEntryLexicalField": RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e, + "@payloadcms/richtext-lexical/rsc#LexicalDiffComponent": LexicalDiffComponent_44fe37237e0ebf4470c9990d8cb7b07e, + "@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient": HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, + "@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient": InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, + "@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient": FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, + "@payloadcms/richtext-lexical/client#BlocksFeatureClient": BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, + "@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, + "@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, + "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, + "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, + "@payloadcms/richtext-lexical/client#LinkFeatureClient": LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, + "@payloadcms/richtext-lexical/client#HeadingFeatureClient": HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, + "@payloadcms/plugin-seo/client#OverviewComponent": OverviewComponent_a8a977ebc872c5d5ea7ee689724c0860, + "@payloadcms/plugin-seo/client#MetaTitleComponent": MetaTitleComponent_a8a977ebc872c5d5ea7ee689724c0860, + "@payloadcms/plugin-seo/client#MetaImageComponent": MetaImageComponent_a8a977ebc872c5d5ea7ee689724c0860, + "@payloadcms/plugin-seo/client#MetaDescriptionComponent": MetaDescriptionComponent_a8a977ebc872c5d5ea7ee689724c0860, + "@payloadcms/plugin-seo/client#PreviewComponent": PreviewComponent_a8a977ebc872c5d5ea7ee689724c0860, + "@payloadcms/storage-s3/client#S3ClientUploadHandler": S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24 +} diff --git a/apps/cms/src/app/(payload)/api/[...slug]/route.ts b/apps/cms/src/app/(payload)/api/[...slug]/route.ts new file mode 100644 index 0000000000..e58c50f50c --- /dev/null +++ b/apps/cms/src/app/(payload)/api/[...slug]/route.ts @@ -0,0 +1,19 @@ +/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */ +/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */ +import config from '@payload-config' +import '@payloadcms/next/css' +import { + REST_DELETE, + REST_GET, + REST_OPTIONS, + REST_PATCH, + REST_POST, + REST_PUT, +} from '@payloadcms/next/routes' + +export const GET = REST_GET(config) +export const POST = REST_POST(config) +export const DELETE = REST_DELETE(config) +export const PATCH = REST_PATCH(config) +export const PUT = REST_PUT(config) +export const OPTIONS = REST_OPTIONS(config) diff --git a/apps/cms/src/app/(payload)/api/graphql-playground/route.ts b/apps/cms/src/app/(payload)/api/graphql-playground/route.ts new file mode 100644 index 0000000000..17d2954ca2 --- /dev/null +++ b/apps/cms/src/app/(payload)/api/graphql-playground/route.ts @@ -0,0 +1,7 @@ +/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */ +/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */ +import config from '@payload-config' +import '@payloadcms/next/css' +import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes' + +export const GET = GRAPHQL_PLAYGROUND_GET(config) diff --git a/apps/cms/src/app/(payload)/api/graphql/route.ts b/apps/cms/src/app/(payload)/api/graphql/route.ts new file mode 100644 index 0000000000..2069ff86b0 --- /dev/null +++ b/apps/cms/src/app/(payload)/api/graphql/route.ts @@ -0,0 +1,8 @@ +/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */ +/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */ +import config from '@payload-config' +import { GRAPHQL_POST, REST_OPTIONS } from '@payloadcms/next/routes' + +export const POST = GRAPHQL_POST(config) + +export const OPTIONS = REST_OPTIONS(config) diff --git a/apps/cms/src/app/(payload)/custom.scss b/apps/cms/src/app/(payload)/custom.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/cms/src/app/(payload)/layout.tsx b/apps/cms/src/app/(payload)/layout.tsx new file mode 100644 index 0000000000..8df141aeb2 --- /dev/null +++ b/apps/cms/src/app/(payload)/layout.tsx @@ -0,0 +1,31 @@ +/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */ +/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */ +import config from '@payload-config' +import '@payloadcms/next/css' +import type { ServerFunctionClient } from 'payload' +import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts' +import React from 'react' + +import { importMap } from './admin/importMap.js' +import './custom.scss' + +type Args = { + children: React.ReactNode +} + +const serverFunction: ServerFunctionClient = async function (args) { + 'use server' + return handleServerFunctions({ + ...args, + config, + importMap, + }) +} + +const Layout = ({ children }: Args) => ( + + {children} + +) + +export default Layout diff --git a/apps/cms/src/app/my-route/route.ts b/apps/cms/src/app/my-route/route.ts new file mode 100644 index 0000000000..a6422f3733 --- /dev/null +++ b/apps/cms/src/app/my-route/route.ts @@ -0,0 +1,14 @@ +import configPromise from '@payload-config' +import { getPayload } from 'payload' + +export const GET = async () => { + const payload = await getPayload({ + config: configPromise, + }) + + const data = await payload.find({ + collection: 'users', + }) + + return Response.json(data) +} diff --git a/apps/cms/src/blocks/ArchiveBlock/Component.tsx b/apps/cms/src/blocks/ArchiveBlock/Component.tsx new file mode 100644 index 0000000000..48a57ec5d6 --- /dev/null +++ b/apps/cms/src/blocks/ArchiveBlock/Component.tsx @@ -0,0 +1,65 @@ +import type { Post, ArchiveBlock as ArchiveBlockProps } from '@/payload-types' + +import configPromise from '@payload-config' +import { getPayload } from 'payload' +import React from 'react' +import RichText from '@/components/RichText' + +import { CollectionArchive } from '@/components/CollectionArchive' + +export const ArchiveBlock: React.FC< + ArchiveBlockProps & { + id?: string + } +> = async (props) => { + const { id, categories, introContent, limit: limitFromProps, populateBy, selectedDocs } = props + + const limit = limitFromProps || 3 + + let posts: Post[] = [] + + if (populateBy === 'collection') { + const payload = await getPayload({ config: configPromise }) + + const flattenedCategories = categories?.map((category) => { + if (typeof category === 'object') return category.id + else return category + }) + + const fetchedPosts = await payload.find({ + collection: 'posts', + depth: 1, + limit, + ...(flattenedCategories && flattenedCategories.length > 0 + ? { + where: { + categories: { + in: flattenedCategories, + }, + }, + } + : {}), + }) + + posts = fetchedPosts.docs + } else { + if (selectedDocs?.length) { + const filteredSelectedPosts = selectedDocs.map((post) => { + if (typeof post.value === 'object') return post.value + }) as Post[] + + posts = filteredSelectedPosts + } + } + + return ( +
+ {introContent && ( +
+ +
+ )} + +
+ ) +} diff --git a/apps/cms/src/blocks/ArchiveBlock/config.ts b/apps/cms/src/blocks/ArchiveBlock/config.ts new file mode 100644 index 0000000000..f87a376bd5 --- /dev/null +++ b/apps/cms/src/blocks/ArchiveBlock/config.ts @@ -0,0 +1,94 @@ +import type { Block } from 'payload' + +import { + FixedToolbarFeature, + HeadingFeature, + InlineToolbarFeature, + lexicalEditor, +} from '@payloadcms/richtext-lexical' + +export const Archive: Block = { + slug: 'archive', + interfaceName: 'ArchiveBlock', + fields: [ + { + name: 'introContent', + type: 'richText', + editor: lexicalEditor({ + features: ({ rootFeatures }) => { + return [ + ...rootFeatures, + HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }), + FixedToolbarFeature(), + InlineToolbarFeature(), + ] + }, + }), + label: 'Intro Content', + }, + { + name: 'populateBy', + type: 'select', + defaultValue: 'collection', + options: [ + { + label: 'Collection', + value: 'collection', + }, + { + label: 'Individual Selection', + value: 'selection', + }, + ], + }, + { + name: 'relationTo', + type: 'select', + admin: { + condition: (_, siblingData) => siblingData.populateBy === 'collection', + }, + defaultValue: 'posts', + label: 'Collections To Show', + options: [ + { + label: 'Posts', + value: 'posts', + }, + ], + }, + { + name: 'categories', + type: 'relationship', + admin: { + condition: (_, siblingData) => siblingData.populateBy === 'collection', + }, + hasMany: true, + label: 'Categories To Show', + relationTo: 'categories', + }, + { + name: 'limit', + type: 'number', + admin: { + condition: (_, siblingData) => siblingData.populateBy === 'collection', + step: 1, + }, + defaultValue: 10, + label: 'Limit', + }, + { + name: 'selectedDocs', + type: 'relationship', + admin: { + condition: (_, siblingData) => siblingData.populateBy === 'selection', + }, + hasMany: true, + label: 'Selection', + relationTo: ['posts'], + }, + ], + labels: { + plural: 'Archives', + singular: 'Archive', + }, +} diff --git a/apps/cms/src/blocks/Banner/Component.tsx b/apps/cms/src/blocks/Banner/Component.tsx new file mode 100644 index 0000000000..6abb8ad09a --- /dev/null +++ b/apps/cms/src/blocks/Banner/Component.tsx @@ -0,0 +1,26 @@ +import type { BannerBlock as BannerBlockProps } from 'src/payload-types' + +import { cn } from '@/utilities/ui' +import React from 'react' +import RichText from '@/components/RichText' + +type Props = { + className?: string +} & BannerBlockProps + +export const BannerBlock: React.FC = ({ className, content, style }) => { + return ( +
+
+ +
+
+ ) +} diff --git a/apps/cms/src/blocks/Banner/config.ts b/apps/cms/src/blocks/Banner/config.ts new file mode 100644 index 0000000000..53e46b5cbc --- /dev/null +++ b/apps/cms/src/blocks/Banner/config.ts @@ -0,0 +1,37 @@ +import type { Block } from 'payload' + +import { + FixedToolbarFeature, + InlineToolbarFeature, + lexicalEditor, +} from '@payloadcms/richtext-lexical' + +export const Banner: Block = { + slug: 'banner', + fields: [ + { + name: 'style', + type: 'select', + defaultValue: 'info', + options: [ + { label: 'Info', value: 'info' }, + { label: 'Warning', value: 'warning' }, + { label: 'Error', value: 'error' }, + { label: 'Success', value: 'success' }, + ], + required: true, + }, + { + name: 'content', + type: 'richText', + editor: lexicalEditor({ + features: ({ rootFeatures }) => { + return [...rootFeatures, FixedToolbarFeature(), InlineToolbarFeature()] + }, + }), + label: false, + required: true, + }, + ], + interfaceName: 'BannerBlock', +} diff --git a/apps/cms/src/blocks/CallToAction/Component.tsx b/apps/cms/src/blocks/CallToAction/Component.tsx new file mode 100644 index 0000000000..6b3771cf23 --- /dev/null +++ b/apps/cms/src/blocks/CallToAction/Component.tsx @@ -0,0 +1,23 @@ +import React from 'react' + +import type { CallToActionBlock as CTABlockProps } from '@/payload-types' + +import RichText from '@/components/RichText' +import { CMSLink } from '@/components/Link' + +export const CallToActionBlock: React.FC = ({ links, richText }) => { + return ( +
+
+
+ {richText && } +
+
+ {(links || []).map(({ link }, i) => { + return + })} +
+
+
+ ) +} diff --git a/apps/cms/src/blocks/CallToAction/config.ts b/apps/cms/src/blocks/CallToAction/config.ts new file mode 100644 index 0000000000..f4ffa77c6a --- /dev/null +++ b/apps/cms/src/blocks/CallToAction/config.ts @@ -0,0 +1,42 @@ +import type { Block } from 'payload' + +import { + FixedToolbarFeature, + HeadingFeature, + InlineToolbarFeature, + lexicalEditor, +} from '@payloadcms/richtext-lexical' + +import { linkGroup } from '../../fields/linkGroup' + +export const CallToAction: Block = { + slug: 'cta', + interfaceName: 'CallToActionBlock', + fields: [ + { + name: 'richText', + type: 'richText', + editor: lexicalEditor({ + features: ({ rootFeatures }) => { + return [ + ...rootFeatures, + HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }), + FixedToolbarFeature(), + InlineToolbarFeature(), + ] + }, + }), + label: false, + }, + linkGroup({ + appearances: ['default', 'outline'], + overrides: { + maxRows: 2, + }, + }), + ], + labels: { + plural: 'Calls to Action', + singular: 'Call to Action', + }, +} diff --git a/apps/cms/src/blocks/Code/Component.client.tsx b/apps/cms/src/blocks/Code/Component.client.tsx new file mode 100644 index 0000000000..fc8fb62545 --- /dev/null +++ b/apps/cms/src/blocks/Code/Component.client.tsx @@ -0,0 +1,33 @@ +'use client' +import { Highlight, themes } from 'prism-react-renderer' +import React from 'react' +import { CopyButton } from './CopyButton' + +type Props = { + code: string + language?: string +} + +export const Code: React.FC = ({ code, language = '' }) => { + if (!code) return null + + return ( + + {({ getLineProps, getTokenProps, tokens }) => ( + 
+          {tokens.map((line, i) => (
+            

+              {i + 1}
+              
+                {line.map((token, key) => (
+                  
+                ))}
+              
+            

+          ))}
+          
+
+ )} + + ) +} diff --git a/apps/cms/src/blocks/Code/Component.tsx b/apps/cms/src/blocks/Code/Component.tsx new file mode 100644 index 0000000000..7f776d74de --- /dev/null +++ b/apps/cms/src/blocks/Code/Component.tsx @@ -0,0 +1,21 @@ +import React from 'react' + +import { Code } from './Component.client' + +export type CodeBlockProps = { + code: string + language?: string + blockType: 'code' +} + +type Props = CodeBlockProps & { + className?: string +} + +export const CodeBlock: React.FC = ({ className, code, language }) => { + return ( +
+ +
+ ) +} diff --git a/apps/cms/src/blocks/Code/CopyButton.tsx b/apps/cms/src/blocks/Code/CopyButton.tsx new file mode 100644 index 0000000000..8d204bfffd --- /dev/null +++ b/apps/cms/src/blocks/Code/CopyButton.tsx @@ -0,0 +1,33 @@ +'use client' +import { Button } from '@/components/ui/button' +import { CopyIcon } from '@payloadcms/ui/icons/Copy' +import { useState } from 'react' + +export function CopyButton({ code }: { code: string }) { + const [text, setText] = useState('Copy') + + function updateCopyStatus() { + if (text === 'Copy') { + setText(() => 'Copied!') + setTimeout(() => { + setText(() => 'Copy') + }, 1000) + } + } + + return ( +
+ +
+ ) +} diff --git a/apps/cms/src/blocks/Code/config.ts b/apps/cms/src/blocks/Code/config.ts new file mode 100644 index 0000000000..7b26f805db --- /dev/null +++ b/apps/cms/src/blocks/Code/config.ts @@ -0,0 +1,33 @@ +import type { Block } from 'payload' + +export const Code: Block = { + slug: 'code', + interfaceName: 'CodeBlock', + fields: [ + { + name: 'language', + type: 'select', + defaultValue: 'typescript', + options: [ + { + label: 'Typescript', + value: 'typescript', + }, + { + label: 'Javascript', + value: 'javascript', + }, + { + label: 'CSS', + value: 'css', + }, + ], + }, + { + name: 'code', + type: 'code', + label: false, + required: true, + }, + ], +} diff --git a/apps/cms/src/blocks/Content/Component.tsx b/apps/cms/src/blocks/Content/Component.tsx new file mode 100644 index 0000000000..2c2550b759 --- /dev/null +++ b/apps/cms/src/blocks/Content/Component.tsx @@ -0,0 +1,43 @@ +import { cn } from '@/utilities/ui' +import React from 'react' +import RichText from '@/components/RichText' + +import type { ContentBlock as ContentBlockProps } from '@/payload-types' + +import { CMSLink } from '../../components/Link' + +export const ContentBlock: React.FC = (props) => { + const { columns } = props + + const colsSpanClasses = { + full: '12', + half: '6', + oneThird: '4', + twoThirds: '8', + } + + return ( +
+
+ {columns && + columns.length > 0 && + columns.map((col, index) => { + const { enableLink, link, richText, size } = col + + return ( +
+ {richText && } + + {enableLink && } +
+ ) + })} +
+
+ ) +} diff --git a/apps/cms/src/blocks/Content/config.ts b/apps/cms/src/blocks/Content/config.ts new file mode 100644 index 0000000000..5c2fb0771d --- /dev/null +++ b/apps/cms/src/blocks/Content/config.ts @@ -0,0 +1,79 @@ +import type { Block, Field } from 'payload' + +import { + FixedToolbarFeature, + HeadingFeature, + InlineToolbarFeature, + lexicalEditor, +} from '@payloadcms/richtext-lexical' + +import { link } from '@/fields/link' + +const columnFields: Field[] = [ + { + name: 'size', + type: 'select', + defaultValue: 'oneThird', + options: [ + { + label: 'One Third', + value: 'oneThird', + }, + { + label: 'Half', + value: 'half', + }, + { + label: 'Two Thirds', + value: 'twoThirds', + }, + { + label: 'Full', + value: 'full', + }, + ], + }, + { + name: 'richText', + type: 'richText', + editor: lexicalEditor({ + features: ({ rootFeatures }) => { + return [ + ...rootFeatures, + HeadingFeature({ enabledHeadingSizes: ['h2', 'h3', 'h4'] }), + FixedToolbarFeature(), + InlineToolbarFeature(), + ] + }, + }), + label: false, + }, + { + name: 'enableLink', + type: 'checkbox', + }, + link({ + overrides: { + admin: { + condition: (_data, siblingData) => { + return Boolean(siblingData?.enableLink) + }, + }, + }, + }), +] + +export const Content: Block = { + slug: 'content', + interfaceName: 'ContentBlock', + fields: [ + { + name: 'columns', + type: 'array', + admin: { + initCollapsed: true, + }, + fields: columnFields, + }, + ], +} diff --git a/apps/cms/src/blocks/Form/Checkbox/index.tsx b/apps/cms/src/blocks/Form/Checkbox/index.tsx new file mode 100644 index 0000000000..633d5db0d8 --- /dev/null +++ b/apps/cms/src/blocks/Form/Checkbox/index.tsx @@ -0,0 +1,45 @@ +import type { CheckboxField } from '@payloadcms/plugin-form-builder/types' +import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form' + +import { useFormContext } from 'react-hook-form' + +import { Checkbox as CheckboxUi } from '@/components/ui/checkbox' +import { Label } from '@/components/ui/label' +import React from 'react' + +import { Error } from '../Error' +import { Width } from '../Width' + +export const Checkbox: React.FC< + CheckboxField & { + errors: Partial + register: UseFormRegister + } +> = ({ name, defaultValue, errors, label, register, required, width }) => { + const props = register(name, { required: required }) + const { setValue } = useFormContext() + + return ( + +
+ { + setValue(props.name, checked) + }} + /> + +
+ {errors[name] && } + + ) +} diff --git a/apps/cms/src/blocks/Form/Component.tsx b/apps/cms/src/blocks/Form/Component.tsx new file mode 100644 index 0000000000..7cae8e52e6 --- /dev/null +++ b/apps/cms/src/blocks/Form/Component.tsx @@ -0,0 +1,162 @@ +'use client' +import type { FormFieldBlock, Form as FormType } from '@payloadcms/plugin-form-builder/types' + +import { useRouter } from 'next/navigation' +import React, { useCallback, useState } from 'react' +import { useForm, FormProvider } from 'react-hook-form' +import RichText from '@/components/RichText' +import { Button } from '@/components/ui/button' +import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical' + +import { fields } from './fields' +import { getClientSideURL } from '@/utilities/getURL' + +export type FormBlockType = { + blockName?: string + blockType?: 'formBlock' + enableIntro: boolean + form: FormType + introContent?: SerializedEditorState +} + +export const FormBlock: React.FC< + { + id?: string + } & FormBlockType +> = (props) => { + const { + enableIntro, + form: formFromProps, + form: { id: formID, confirmationMessage, confirmationType, redirect, submitButtonLabel } = {}, + introContent, + } = props + + const formMethods = useForm({ + defaultValues: formFromProps.fields, + }) + const { + control, + formState: { errors }, + handleSubmit, + register, + } = formMethods + + const [isLoading, setIsLoading] = useState(false) + const [hasSubmitted, setHasSubmitted] = useState() + const [error, setError] = useState<{ message: string; status?: string } | undefined>() + const router = useRouter() + + const onSubmit = useCallback( + (data: FormFieldBlock[]) => { + let loadingTimerID: ReturnType + const submitForm = async () => { + setError(undefined) + + const dataToSend = Object.entries(data).map(([name, value]) => ({ + field: name, + value, + })) + + // delay loading indicator by 1s + loadingTimerID = setTimeout(() => { + setIsLoading(true) + }, 1000) + + try { + const req = await fetch(`${getClientSideURL()}/api/form-submissions`, { + body: JSON.stringify({ + form: formID, + submissionData: dataToSend, + }), + headers: { + 'Content-Type': 'application/json', + }, + method: 'POST', + }) + + const res = await req.json() + + clearTimeout(loadingTimerID) + + if (req.status >= 400) { + setIsLoading(false) + + setError({ + message: res.errors?.[0]?.message || 'Internal Server Error', + status: res.status, + }) + + return + } + + setIsLoading(false) + setHasSubmitted(true) + + if (confirmationType === 'redirect' && redirect) { + const { url } = redirect + + const redirectUrl = url + + if (redirectUrl) router.push(redirectUrl) + } + } catch (err) { + console.warn(err) + setIsLoading(false) + setError({ + message: 'Something went wrong.', + }) + } + } + + void submitForm() + }, + [router, formID, redirect, confirmationType] + ) + + return ( +
+ {enableIntro && introContent && !hasSubmitted && ( + + )} +
+ + {!isLoading && hasSubmitted && confirmationType === 'message' && ( + + )} + {isLoading && !hasSubmitted &&

Loading, please wait...

} + {error &&
{`${error.status || '500'}: ${error.message || ''}`}
} + {!hasSubmitted && ( +
+
+ {formFromProps && + formFromProps.fields && + formFromProps.fields?.map((field, index) => { + const Field: React.FC = fields?.[field.blockType as keyof typeof fields] + if (Field) { + return ( +
+ +
+ ) + } + return null + })} +
+ + +
+ )} + +
+
+ ) +} diff --git a/apps/cms/src/blocks/Form/Country/index.tsx b/apps/cms/src/blocks/Form/Country/index.tsx new file mode 100644 index 0000000000..9c85b75397 --- /dev/null +++ b/apps/cms/src/blocks/Form/Country/index.tsx @@ -0,0 +1,65 @@ +import type { CountryField } from '@payloadcms/plugin-form-builder/types' +import type { Control, FieldErrorsImpl } from 'react-hook-form' + +import { Label } from '@/components/ui/label' +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select' +import React from 'react' +import { Controller } from 'react-hook-form' + +import { Error } from '../Error' +import { Width } from '../Width' +import { countryOptions } from './options' + +export const Country: React.FC< + CountryField & { + control: Control + errors: Partial + } +> = ({ name, control, errors, label, required, width }) => { + return ( + + + { + const controlledValue = countryOptions.find((t) => t.value === value) + + return ( + + ) + }} + rules={{ required }} + /> + {errors[name] && } + + ) +} diff --git a/apps/cms/src/blocks/Form/Country/options.ts b/apps/cms/src/blocks/Form/Country/options.ts new file mode 100644 index 0000000000..f952c1df89 --- /dev/null +++ b/apps/cms/src/blocks/Form/Country/options.ts @@ -0,0 +1,982 @@ +export const countryOptions = [ + { + label: 'Afghanistan', + value: 'AF', + }, + { + label: 'Åland Islands', + value: 'AX', + }, + { + label: 'Albania', + value: 'AL', + }, + { + label: 'Algeria', + value: 'DZ', + }, + { + label: 'American Samoa', + value: 'AS', + }, + { + label: 'Andorra', + value: 'AD', + }, + { + label: 'Angola', + value: 'AO', + }, + { + label: 'Anguilla', + value: 'AI', + }, + { + label: 'Antarctica', + value: 'AQ', + }, + { + label: 'Antigua and Barbuda', + value: 'AG', + }, + { + label: 'Argentina', + value: 'AR', + }, + { + label: 'Armenia', + value: 'AM', + }, + { + label: 'Aruba', + value: 'AW', + }, + { + label: 'Australia', + value: 'AU', + }, + { + label: 'Austria', + value: 'AT', + }, + { + label: 'Azerbaijan', + value: 'AZ', + }, + { + label: 'Bahamas', + value: 'BS', + }, + { + label: 'Bahrain', + value: 'BH', + }, + { + label: 'Bangladesh', + value: 'BD', + }, + { + label: 'Barbados', + value: 'BB', + }, + { + label: 'Belarus', + value: 'BY', + }, + { + label: 'Belgium', + value: 'BE', + }, + { + label: 'Belize', + value: 'BZ', + }, + { + label: 'Benin', + value: 'BJ', + }, + { + label: 'Bermuda', + value: 'BM', + }, + { + label: 'Bhutan', + value: 'BT', + }, + { + label: 'Bolivia', + value: 'BO', + }, + { + label: 'Bosnia and Herzegovina', + value: 'BA', + }, + { + label: 'Botswana', + value: 'BW', + }, + { + label: 'Bouvet Island', + value: 'BV', + }, + { + label: 'Brazil', + value: 'BR', + }, + { + label: 'British Indian Ocean Territory', + value: 'IO', + }, + { + label: 'Brunei Darussalam', + value: 'BN', + }, + { + label: 'Bulgaria', + value: 'BG', + }, + { + label: 'Burkina Faso', + value: 'BF', + }, + { + label: 'Burundi', + value: 'BI', + }, + { + label: 'Cambodia', + value: 'KH', + }, + { + label: 'Cameroon', + value: 'CM', + }, + { + label: 'Canada', + value: 'CA', + }, + { + label: 'Cape Verde', + value: 'CV', + }, + { + label: 'Cayman Islands', + value: 'KY', + }, + { + label: 'Central African Republic', + value: 'CF', + }, + { + label: 'Chad', + value: 'TD', + }, + { + label: 'Chile', + value: 'CL', + }, + { + label: 'China', + value: 'CN', + }, + { + label: 'Christmas Island', + value: 'CX', + }, + { + label: 'Cocos (Keeling) Islands', + value: 'CC', + }, + { + label: 'Colombia', + value: 'CO', + }, + { + label: 'Comoros', + value: 'KM', + }, + { + label: 'Congo', + value: 'CG', + }, + { + label: 'Congo, The Democratic Republic of the', + value: 'CD', + }, + { + label: 'Cook Islands', + value: 'CK', + }, + { + label: 'Costa Rica', + value: 'CR', + }, + { + label: "Cote D'Ivoire", + value: 'CI', + }, + { + label: 'Croatia', + value: 'HR', + }, + { + label: 'Cuba', + value: 'CU', + }, + { + label: 'Cyprus', + value: 'CY', + }, + { + label: 'Czech Republic', + value: 'CZ', + }, + { + label: 'Denmark', + value: 'DK', + }, + { + label: 'Djibouti', + value: 'DJ', + }, + { + label: 'Dominica', + value: 'DM', + }, + { + label: 'Dominican Republic', + value: 'DO', + }, + { + label: 'Ecuador', + value: 'EC', + }, + { + label: 'Egypt', + value: 'EG', + }, + { + label: 'El Salvador', + value: 'SV', + }, + { + label: 'Equatorial Guinea', + value: 'GQ', + }, + { + label: 'Eritrea', + value: 'ER', + }, + { + label: 'Estonia', + value: 'EE', + }, + { + label: 'Ethiopia', + value: 'ET', + }, + { + label: 'Falkland Islands (Malvinas)', + value: 'FK', + }, + { + label: 'Faroe Islands', + value: 'FO', + }, + { + label: 'Fiji', + value: 'FJ', + }, + { + label: 'Finland', + value: 'FI', + }, + { + label: 'France', + value: 'FR', + }, + { + label: 'French Guiana', + value: 'GF', + }, + { + label: 'French Polynesia', + value: 'PF', + }, + { + label: 'French Southern Territories', + value: 'TF', + }, + { + label: 'Gabon', + value: 'GA', + }, + { + label: 'Gambia', + value: 'GM', + }, + { + label: 'Georgia', + value: 'GE', + }, + { + label: 'Germany', + value: 'DE', + }, + { + label: 'Ghana', + value: 'GH', + }, + { + label: 'Gibraltar', + value: 'GI', + }, + { + label: 'Greece', + value: 'GR', + }, + { + label: 'Greenland', + value: 'GL', + }, + { + label: 'Grenada', + value: 'GD', + }, + { + label: 'Guadeloupe', + value: 'GP', + }, + { + label: 'Guam', + value: 'GU', + }, + { + label: 'Guatemala', + value: 'GT', + }, + { + label: 'Guernsey', + value: 'GG', + }, + { + label: 'Guinea', + value: 'GN', + }, + { + label: 'Guinea-Bissau', + value: 'GW', + }, + { + label: 'Guyana', + value: 'GY', + }, + { + label: 'Haiti', + value: 'HT', + }, + { + label: 'Heard Island and Mcdonald Islands', + value: 'HM', + }, + { + label: 'Holy See (Vatican City State)', + value: 'VA', + }, + { + label: 'Honduras', + value: 'HN', + }, + { + label: 'Hong Kong', + value: 'HK', + }, + { + label: 'Hungary', + value: 'HU', + }, + { + label: 'Iceland', + value: 'IS', + }, + { + label: 'India', + value: 'IN', + }, + { + label: 'Indonesia', + value: 'ID', + }, + { + label: 'Iran, Islamic Republic Of', + value: 'IR', + }, + { + label: 'Iraq', + value: 'IQ', + }, + { + label: 'Ireland', + value: 'IE', + }, + { + label: 'Isle of Man', + value: 'IM', + }, + { + label: 'Israel', + value: 'IL', + }, + { + label: 'Italy', + value: 'IT', + }, + { + label: 'Jamaica', + value: 'JM', + }, + { + label: 'Japan', + value: 'JP', + }, + { + label: 'Jersey', + value: 'JE', + }, + { + label: 'Jordan', + value: 'JO', + }, + { + label: 'Kazakhstan', + value: 'KZ', + }, + { + label: 'Kenya', + value: 'KE', + }, + { + label: 'Kiribati', + value: 'KI', + }, + { + label: "Democratic People's Republic of Korea", + value: 'KP', + }, + { + label: 'Korea, Republic of', + value: 'KR', + }, + { + label: 'Kosovo', + value: 'XK', + }, + { + label: 'Kuwait', + value: 'KW', + }, + { + label: 'Kyrgyzstan', + value: 'KG', + }, + { + label: "Lao People's Democratic Republic", + value: 'LA', + }, + { + label: 'Latvia', + value: 'LV', + }, + { + label: 'Lebanon', + value: 'LB', + }, + { + label: 'Lesotho', + value: 'LS', + }, + { + label: 'Liberia', + value: 'LR', + }, + { + label: 'Libyan Arab Jamahiriya', + value: 'LY', + }, + { + label: 'Liechtenstein', + value: 'LI', + }, + { + label: 'Lithuania', + value: 'LT', + }, + { + label: 'Luxembourg', + value: 'LU', + }, + { + label: 'Macao', + value: 'MO', + }, + { + label: 'Macedonia, The Former Yugoslav Republic of', + value: 'MK', + }, + { + label: 'Madagascar', + value: 'MG', + }, + { + label: 'Malawi', + value: 'MW', + }, + { + label: 'Malaysia', + value: 'MY', + }, + { + label: 'Maldives', + value: 'MV', + }, + { + label: 'Mali', + value: 'ML', + }, + { + label: 'Malta', + value: 'MT', + }, + { + label: 'Marshall Islands', + value: 'MH', + }, + { + label: 'Martinique', + value: 'MQ', + }, + { + label: 'Mauritania', + value: 'MR', + }, + { + label: 'Mauritius', + value: 'MU', + }, + { + label: 'Mayotte', + value: 'YT', + }, + { + label: 'Mexico', + value: 'MX', + }, + { + label: 'Micronesia, Federated States of', + value: 'FM', + }, + { + label: 'Moldova, Republic of', + value: 'MD', + }, + { + label: 'Monaco', + value: 'MC', + }, + { + label: 'Mongolia', + value: 'MN', + }, + { + label: 'Montenegro', + value: 'ME', + }, + { + label: 'Montserrat', + value: 'MS', + }, + { + label: 'Morocco', + value: 'MA', + }, + { + label: 'Mozambique', + value: 'MZ', + }, + { + label: 'Myanmar', + value: 'MM', + }, + { + label: 'Namibia', + value: 'NA', + }, + { + label: 'Nauru', + value: 'NR', + }, + { + label: 'Nepal', + value: 'NP', + }, + { + label: 'Netherlands', + value: 'NL', + }, + { + label: 'Netherlands Antilles', + value: 'AN', + }, + { + label: 'New Caledonia', + value: 'NC', + }, + { + label: 'New Zealand', + value: 'NZ', + }, + { + label: 'Nicaragua', + value: 'NI', + }, + { + label: 'Niger', + value: 'NE', + }, + { + label: 'Nigeria', + value: 'NG', + }, + { + label: 'Niue', + value: 'NU', + }, + { + label: 'Norfolk Island', + value: 'NF', + }, + { + label: 'Northern Mariana Islands', + value: 'MP', + }, + { + label: 'Norway', + value: 'NO', + }, + { + label: 'Oman', + value: 'OM', + }, + { + label: 'Pakistan', + value: 'PK', + }, + { + label: 'Palau', + value: 'PW', + }, + { + label: 'Palestinian Territory, Occupied', + value: 'PS', + }, + { + label: 'Panama', + value: 'PA', + }, + { + label: 'Papua New Guinea', + value: 'PG', + }, + { + label: 'Paraguay', + value: 'PY', + }, + { + label: 'Peru', + value: 'PE', + }, + { + label: 'Philippines', + value: 'PH', + }, + { + label: 'Pitcairn', + value: 'PN', + }, + { + label: 'Poland', + value: 'PL', + }, + { + label: 'Portugal', + value: 'PT', + }, + { + label: 'Puerto Rico', + value: 'PR', + }, + { + label: 'Qatar', + value: 'QA', + }, + { + label: 'Reunion', + value: 'RE', + }, + { + label: 'Romania', + value: 'RO', + }, + { + label: 'Russian Federation', + value: 'RU', + }, + { + label: 'Rwanda', + value: 'RW', + }, + { + label: 'Saint Helena', + value: 'SH', + }, + { + label: 'Saint Kitts and Nevis', + value: 'KN', + }, + { + label: 'Saint Lucia', + value: 'LC', + }, + { + label: 'Saint Pierre and Miquelon', + value: 'PM', + }, + { + label: 'Saint Vincent and the Grenadines', + value: 'VC', + }, + { + label: 'Samoa', + value: 'WS', + }, + { + label: 'San Marino', + value: 'SM', + }, + { + label: 'Sao Tome and Principe', + value: 'ST', + }, + { + label: 'Saudi Arabia', + value: 'SA', + }, + { + label: 'Senegal', + value: 'SN', + }, + { + label: 'Serbia', + value: 'RS', + }, + { + label: 'Seychelles', + value: 'SC', + }, + { + label: 'Sierra Leone', + value: 'SL', + }, + { + label: 'Singapore', + value: 'SG', + }, + { + label: 'Slovakia', + value: 'SK', + }, + { + label: 'Slovenia', + value: 'SI', + }, + { + label: 'Solomon Islands', + value: 'SB', + }, + { + label: 'Somalia', + value: 'SO', + }, + { + label: 'South Africa', + value: 'ZA', + }, + { + label: 'South Georgia and the South Sandwich Islands', + value: 'GS', + }, + { + label: 'Spain', + value: 'ES', + }, + { + label: 'Sri Lanka', + value: 'LK', + }, + { + label: 'Sudan', + value: 'SD', + }, + { + label: 'Suriname', + value: 'SR', + }, + { + label: 'Svalbard and Jan Mayen', + value: 'SJ', + }, + { + label: 'Swaziland', + value: 'SZ', + }, + { + label: 'Sweden', + value: 'SE', + }, + { + label: 'Switzerland', + value: 'CH', + }, + { + label: 'Syrian Arab Republic', + value: 'SY', + }, + { + label: 'Taiwan', + value: 'TW', + }, + { + label: 'Tajikistan', + value: 'TJ', + }, + { + label: 'Tanzania, United Republic of', + value: 'TZ', + }, + { + label: 'Thailand', + value: 'TH', + }, + { + label: 'Timor-Leste', + value: 'TL', + }, + { + label: 'Togo', + value: 'TG', + }, + { + label: 'Tokelau', + value: 'TK', + }, + { + label: 'Tonga', + value: 'TO', + }, + { + label: 'Trinidad and Tobago', + value: 'TT', + }, + { + label: 'Tunisia', + value: 'TN', + }, + { + label: 'Turkey', + value: 'TR', + }, + { + label: 'Turkmenistan', + value: 'TM', + }, + { + label: 'Turks and Caicos Islands', + value: 'TC', + }, + { + label: 'Tuvalu', + value: 'TV', + }, + { + label: 'Uganda', + value: 'UG', + }, + { + label: 'Ukraine', + value: 'UA', + }, + { + label: 'United Arab Emirates', + value: 'AE', + }, + { + label: 'United Kingdom', + value: 'GB', + }, + { + label: 'United States', + value: 'US', + }, + { + label: 'United States Minor Outlying Islands', + value: 'UM', + }, + { + label: 'Uruguay', + value: 'UY', + }, + { + label: 'Uzbekistan', + value: 'UZ', + }, + { + label: 'Vanuatu', + value: 'VU', + }, + { + label: 'Venezuela', + value: 'VE', + }, + { + label: 'Viet Nam', + value: 'VN', + }, + { + label: 'Virgin Islands, British', + value: 'VG', + }, + { + label: 'Virgin Islands, U.S.', + value: 'VI', + }, + { + label: 'Wallis and Futuna', + value: 'WF', + }, + { + label: 'Western Sahara', + value: 'EH', + }, + { + label: 'Yemen', + value: 'YE', + }, + { + label: 'Zambia', + value: 'ZM', + }, + { + label: 'Zimbabwe', + value: 'ZW', + }, +] diff --git a/apps/cms/src/blocks/Form/Email/index.tsx b/apps/cms/src/blocks/Form/Email/index.tsx new file mode 100644 index 0000000000..fc9fd2804c --- /dev/null +++ b/apps/cms/src/blocks/Form/Email/index.tsx @@ -0,0 +1,38 @@ +import type { EmailField } from '@payloadcms/plugin-form-builder/types' +import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form' + +import { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' +import React from 'react' + +import { Error } from '../Error' +import { Width } from '../Width' + +export const Email: React.FC< + EmailField & { + errors: Partial + register: UseFormRegister + } +> = ({ name, defaultValue, errors, label, register, required, width }) => { + return ( + + + + + {errors[name] && } + + ) +} diff --git a/apps/cms/src/blocks/Form/Error/index.tsx b/apps/cms/src/blocks/Form/Error/index.tsx new file mode 100644 index 0000000000..a7b9e47e80 --- /dev/null +++ b/apps/cms/src/blocks/Form/Error/index.tsx @@ -0,0 +1,15 @@ +'use client' + +import * as React from 'react' +import { useFormContext } from 'react-hook-form' + +export const Error = ({ name }: { name: string }) => { + const { + formState: { errors }, + } = useFormContext() + return ( +
+ {(errors[name]?.message as string) || 'This field is required'} +
+ ) +} diff --git a/apps/cms/src/blocks/Form/Message/index.tsx b/apps/cms/src/blocks/Form/Message/index.tsx new file mode 100644 index 0000000000..5924cf95f4 --- /dev/null +++ b/apps/cms/src/blocks/Form/Message/index.tsx @@ -0,0 +1,13 @@ +import RichText from '@/components/RichText' +import React from 'react' + +import { Width } from '../Width' +import { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical' + +export const Message: React.FC<{ message: SerializedEditorState }> = ({ message }) => { + return ( + + {message && } + + ) +} diff --git a/apps/cms/src/blocks/Form/Number/index.tsx b/apps/cms/src/blocks/Form/Number/index.tsx new file mode 100644 index 0000000000..f26e54a448 --- /dev/null +++ b/apps/cms/src/blocks/Form/Number/index.tsx @@ -0,0 +1,36 @@ +import type { TextField } from '@payloadcms/plugin-form-builder/types' +import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form' + +import { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' +import React from 'react' + +import { Error } from '../Error' +import { Width } from '../Width' +export const Number: React.FC< + TextField & { + errors: Partial + register: UseFormRegister + } +> = ({ name, defaultValue, errors, label, register, required, width }) => { + return ( + + + + {errors[name] && } + + ) +} diff --git a/apps/cms/src/blocks/Form/Select/index.tsx b/apps/cms/src/blocks/Form/Select/index.tsx new file mode 100644 index 0000000000..30c0e8312a --- /dev/null +++ b/apps/cms/src/blocks/Form/Select/index.tsx @@ -0,0 +1,63 @@ +import type { SelectField } from '@payloadcms/plugin-form-builder/types' +import type { Control, FieldErrorsImpl } from 'react-hook-form' + +import { Label } from '@/components/ui/label' +import { + Select as SelectComponent, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select' +import React from 'react' +import { Controller } from 'react-hook-form' + +import { Error } from '../Error' +import { Width } from '../Width' + +export const Select: React.FC< + SelectField & { + control: Control + errors: Partial + } +> = ({ name, control, errors, label, options, required, width, defaultValue }) => { + return ( + + + { + const controlledValue = options.find((t) => t.value === value) + + return ( + onChange(val)} value={controlledValue?.value}> + + + + + {options.map(({ label, value }) => { + return ( + + {label} + + ) + })} + + + ) + }} + rules={{ required }} + /> + {errors[name] && } + + ) +} diff --git a/apps/cms/src/blocks/Form/State/index.tsx b/apps/cms/src/blocks/Form/State/index.tsx new file mode 100644 index 0000000000..29e49cae0c --- /dev/null +++ b/apps/cms/src/blocks/Form/State/index.tsx @@ -0,0 +1,64 @@ +import type { StateField } from '@payloadcms/plugin-form-builder/types' +import type { Control, FieldErrorsImpl } from 'react-hook-form' + +import { Label } from '@/components/ui/label' +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select' +import React from 'react' +import { Controller } from 'react-hook-form' + +import { Error } from '../Error' +import { Width } from '../Width' +import { stateOptions } from './options' + +export const State: React.FC< + StateField & { + control: Control + errors: Partial + } +> = ({ name, control, errors, label, required, width }) => { + return ( + + + { + const controlledValue = stateOptions.find((t) => t.value === value) + + return ( + + ) + }} + rules={{ required }} + /> + {errors[name] && } + + ) +} diff --git a/apps/cms/src/blocks/Form/State/options.ts b/apps/cms/src/blocks/Form/State/options.ts new file mode 100644 index 0000000000..8dff991e7a --- /dev/null +++ b/apps/cms/src/blocks/Form/State/options.ts @@ -0,0 +1,52 @@ +export const stateOptions = [ + { label: 'Alabama', value: 'AL' }, + { label: 'Alaska', value: 'AK' }, + { label: 'Arizona', value: 'AZ' }, + { label: 'Arkansas', value: 'AR' }, + { label: 'California', value: 'CA' }, + { label: 'Colorado', value: 'CO' }, + { label: 'Connecticut', value: 'CT' }, + { label: 'Delaware', value: 'DE' }, + { label: 'Florida', value: 'FL' }, + { label: 'Georgia', value: 'GA' }, + { label: 'Hawaii', value: 'HI' }, + { label: 'Idaho', value: 'ID' }, + { label: 'Illinois', value: 'IL' }, + { label: 'Indiana', value: 'IN' }, + { label: 'Iowa', value: 'IA' }, + { label: 'Kansas', value: 'KS' }, + { label: 'Kentucky', value: 'KY' }, + { label: 'Louisiana', value: 'LA' }, + { label: 'Maine', value: 'ME' }, + { label: 'Maryland', value: 'MD' }, + { label: 'Massachusetts', value: 'MA' }, + { label: 'Michigan', value: 'MI' }, + { label: 'Minnesota', value: 'MN' }, + { label: 'Mississippi', value: 'MS' }, + { label: 'Missouri', value: 'MO' }, + { label: 'Montana', value: 'MT' }, + { label: 'Nebraska', value: 'NE' }, + { label: 'Nevada', value: 'NV' }, + { label: 'New Hampshire', value: 'NH' }, + { label: 'New Jersey', value: 'NJ' }, + { label: 'New Mexico', value: 'NM' }, + { label: 'New York', value: 'NY' }, + { label: 'North Carolina', value: 'NC' }, + { label: 'North Dakota', value: 'ND' }, + { label: 'Ohio', value: 'OH' }, + { label: 'Oklahoma', value: 'OK' }, + { label: 'Oregon', value: 'OR' }, + { label: 'Pennsylvania', value: 'PA' }, + { label: 'Rhode Island', value: 'RI' }, + { label: 'South Carolina', value: 'SC' }, + { label: 'South Dakota', value: 'SD' }, + { label: 'Tennessee', value: 'TN' }, + { label: 'Texas', value: 'TX' }, + { label: 'Utah', value: 'UT' }, + { label: 'Vermont', value: 'VT' }, + { label: 'Virginia', value: 'VA' }, + { label: 'Washington', value: 'WA' }, + { label: 'West Virginia', value: 'WV' }, + { label: 'Wisconsin', value: 'WI' }, + { label: 'Wyoming', value: 'WY' }, +] diff --git a/apps/cms/src/blocks/Form/Text/index.tsx b/apps/cms/src/blocks/Form/Text/index.tsx new file mode 100644 index 0000000000..be1e0ff12b --- /dev/null +++ b/apps/cms/src/blocks/Form/Text/index.tsx @@ -0,0 +1,32 @@ +import type { TextField } from '@payloadcms/plugin-form-builder/types' +import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form' + +import { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' +import React from 'react' + +import { Error } from '../Error' +import { Width } from '../Width' + +export const Text: React.FC< + TextField & { + errors: Partial + register: UseFormRegister + } +> = ({ name, defaultValue, errors, label, register, required, width }) => { + return ( + + + + {errors[name] && } + + ) +} diff --git a/apps/cms/src/blocks/Form/Textarea/index.tsx b/apps/cms/src/blocks/Form/Textarea/index.tsx new file mode 100644 index 0000000000..ecb6e21afd --- /dev/null +++ b/apps/cms/src/blocks/Form/Textarea/index.tsx @@ -0,0 +1,40 @@ +import type { TextField } from '@payloadcms/plugin-form-builder/types' +import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form' + +import { Label } from '@/components/ui/label' +import { Textarea as TextAreaComponent } from '@/components/ui/textarea' +import React from 'react' + +import { Error } from '../Error' +import { Width } from '../Width' + +export const Textarea: React.FC< + TextField & { + errors: Partial + register: UseFormRegister + rows?: number + } +> = ({ name, defaultValue, errors, label, register, required, rows = 3, width }) => { + return ( + + + + + + {errors[name] && } + + ) +} diff --git a/apps/cms/src/blocks/Form/Width/index.tsx b/apps/cms/src/blocks/Form/Width/index.tsx new file mode 100644 index 0000000000..bcc51a3333 --- /dev/null +++ b/apps/cms/src/blocks/Form/Width/index.tsx @@ -0,0 +1,13 @@ +import * as React from 'react' + +export const Width: React.FC<{ + children: React.ReactNode + className?: string + width?: number | string +}> = ({ children, className, width }) => { + return ( +
+ {children} +
+ ) +} diff --git a/apps/cms/src/blocks/Form/config.ts b/apps/cms/src/blocks/Form/config.ts new file mode 100644 index 0000000000..5334289f3a --- /dev/null +++ b/apps/cms/src/blocks/Form/config.ts @@ -0,0 +1,51 @@ +import type { Block } from 'payload' + +import { + FixedToolbarFeature, + HeadingFeature, + InlineToolbarFeature, + lexicalEditor, +} from '@payloadcms/richtext-lexical' + +export const FormBlock: Block = { + slug: 'formBlock', + interfaceName: 'FormBlock', + fields: [ + { + name: 'form', + type: 'relationship', + relationTo: 'forms', + required: true, + }, + { + name: 'enableIntro', + type: 'checkbox', + label: 'Enable Intro Content', + }, + { + name: 'introContent', + type: 'richText', + admin: { + condition: (_, { enableIntro }) => Boolean(enableIntro), + }, + editor: lexicalEditor({ + features: ({ rootFeatures }) => { + return [ + ...rootFeatures, + HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }), + FixedToolbarFeature(), + InlineToolbarFeature(), + ] + }, + }), + label: 'Intro Content', + }, + ], + graphQL: { + singularName: 'FormBlock', + }, + labels: { + plural: 'Form Blocks', + singular: 'Form Block', + }, +} diff --git a/apps/cms/src/blocks/Form/fields.tsx b/apps/cms/src/blocks/Form/fields.tsx new file mode 100644 index 0000000000..fa660f7e39 --- /dev/null +++ b/apps/cms/src/blocks/Form/fields.tsx @@ -0,0 +1,21 @@ +import { Checkbox } from './Checkbox' +import { Country } from './Country' +import { Email } from './Email' +import { Message } from './Message' +import { Number } from './Number' +import { Select } from './Select' +import { State } from './State' +import { Text } from './Text' +import { Textarea } from './Textarea' + +export const fields = { + checkbox: Checkbox, + country: Country, + email: Email, + message: Message, + number: Number, + select: Select, + state: State, + text: Text, + textarea: Textarea, +} diff --git a/apps/cms/src/blocks/MediaBlock/Component.tsx b/apps/cms/src/blocks/MediaBlock/Component.tsx new file mode 100644 index 0000000000..013fd87f84 --- /dev/null +++ b/apps/cms/src/blocks/MediaBlock/Component.tsx @@ -0,0 +1,67 @@ +import type { StaticImageData } from 'next/image' + +import { cn } from '@/utilities/ui' +import React from 'react' +import RichText from '@/components/RichText' + +import type { MediaBlock as MediaBlockProps } from '@/payload-types' + +import { Media } from '../../components/Media' + +type Props = MediaBlockProps & { + breakout?: boolean + captionClassName?: string + className?: string + enableGutter?: boolean + imgClassName?: string + staticImage?: StaticImageData + disableInnerContainer?: boolean +} + +export const MediaBlock: React.FC = (props) => { + const { + captionClassName, + className, + enableGutter = true, + imgClassName, + media, + staticImage, + disableInnerContainer, + } = props + + let caption + if (media && typeof media === 'object') caption = media.caption + + return ( +
+ {(media || staticImage) && ( + + )} + {caption && ( +
+ +
+ )} +
+ ) +} diff --git a/apps/cms/src/blocks/MediaBlock/config.ts b/apps/cms/src/blocks/MediaBlock/config.ts new file mode 100644 index 0000000000..7beb79b7ee --- /dev/null +++ b/apps/cms/src/blocks/MediaBlock/config.ts @@ -0,0 +1,14 @@ +import type { Block } from 'payload' + +export const MediaBlock: Block = { + slug: 'mediaBlock', + interfaceName: 'MediaBlock', + fields: [ + { + name: 'media', + type: 'upload', + relationTo: 'media', + required: true, + }, + ], +} diff --git a/apps/cms/src/blocks/Quote/Component.tsx b/apps/cms/src/blocks/Quote/Component.tsx new file mode 100644 index 0000000000..90717fa1e6 --- /dev/null +++ b/apps/cms/src/blocks/Quote/Component.tsx @@ -0,0 +1,16 @@ +import type { QuoteBlock as QuoteBlockProps } from 'src/payload-types' + +import React from 'react' + +type Props = { + className?: string +} & QuoteBlockProps + +export const QuoteBlock: React.FC = ({ className, img, caption, text }) => { + return ` + +{${text}} + + +` +} diff --git a/apps/cms/src/blocks/Quote/config.ts b/apps/cms/src/blocks/Quote/config.ts new file mode 100644 index 0000000000..e3495fe190 --- /dev/null +++ b/apps/cms/src/blocks/Quote/config.ts @@ -0,0 +1,27 @@ +import type { Block } from 'payload' + +export const Quote: Block = { + slug: 'quote', + fields: [ + { + name: 'img', + type: 'upload', + relationTo: 'media', + label: 'Avatar', + required: false, + }, + { + name: 'caption', + type: 'text', + label: 'Caption', + required: false, + }, + { + name: 'text', + type: 'textarea', + label: 'Quote Text', + required: true, + }, + ], + interfaceName: 'QuoteBlock', +} diff --git a/apps/cms/src/blocks/RelatedPosts/Component.tsx b/apps/cms/src/blocks/RelatedPosts/Component.tsx new file mode 100644 index 0000000000..8d8c9798b2 --- /dev/null +++ b/apps/cms/src/blocks/RelatedPosts/Component.tsx @@ -0,0 +1,32 @@ +import clsx from 'clsx' +import React from 'react' +import RichText from '@/components/RichText' + +import type { Post } from '@/payload-types' + +import { Card } from '../../components/Card' +import { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical' + +export type RelatedPostsProps = { + className?: string + docs?: Post[] + introContent?: SerializedEditorState +} + +export const RelatedPosts: React.FC = (props) => { + const { className, docs, introContent } = props + + return ( +
+ {introContent && } + +
+ {docs?.map((doc, index) => { + if (typeof doc === 'string') return null + + return + })} +
+
+ ) +} diff --git a/apps/cms/src/blocks/RenderBlocks.tsx b/apps/cms/src/blocks/RenderBlocks.tsx new file mode 100644 index 0000000000..c84634a64a --- /dev/null +++ b/apps/cms/src/blocks/RenderBlocks.tsx @@ -0,0 +1,51 @@ +import React, { Fragment } from 'react' + +import type { Page } from '@/payload-types' + +import { ArchiveBlock } from '@/blocks/ArchiveBlock/Component' +import { CallToActionBlock } from '@/blocks/CallToAction/Component' +import { ContentBlock } from '@/blocks/Content/Component' +import { FormBlock } from '@/blocks/Form/Component' +import { MediaBlock } from '@/blocks/MediaBlock/Component' + +const blockComponents = { + archive: ArchiveBlock, + content: ContentBlock, + cta: CallToActionBlock, + formBlock: FormBlock, + mediaBlock: MediaBlock, +} + +export const RenderBlocks: React.FC<{ + blocks: Page['layout'][0][] +}> = (props) => { + const { blocks } = props + + const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0 + + if (hasBlocks) { + return ( + + {blocks.map((block, index) => { + const { blockType } = block + + if (blockType && blockType in blockComponents) { + const Block = blockComponents[blockType] + + if (Block) { + return ( +
+ {/* @ts-expect-error there may be some mismatch between the expected types here */} + +
+ ) + } + } + return null + })} + + ) + } + + return null +} diff --git a/apps/cms/src/blocks/YouTube/Component.tsx b/apps/cms/src/blocks/YouTube/Component.tsx new file mode 100644 index 0000000000..0704f2f775 --- /dev/null +++ b/apps/cms/src/blocks/YouTube/Component.tsx @@ -0,0 +1,22 @@ +import type { YouTubeBlock as YouTubeBlockProps } from 'src/payload-types' + +import { cn } from '@/utilities/ui' +import React from 'react' + +type Props = { + className?: string +} & YouTubeBlockProps + +export const YouTubeBlock: React.FC = ({ className, youtubeId }) => { + return ( +
+