tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore(examples/form-builder): migrates to 2.0 (#3516)

Browse Source
This commit is contained in:
Jacob Fletcher
2023-10-09 14:03:39 -04:00
committed by GitHub
parent 08f7497040
commit de20ef1e8d
160 changed files with 4311 additions and 3164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/form-builder/cms/.env.example
View File

@@ -1,4 +0,0 @@
MONGODB_URI=mongodb://127.0.0.1/payload-example-form-builder
PAYLOAD_SECRET=ENTER-STRING-HERE
PAYLOAD_PUBLIC_SITE_URL=http://localhost:3000
PAYLOAD_PUBLIC_SERVER_URL=http://localhost:8000

8
examples/form-builder/cms/.prettierrc.js
View File

@@ -1,8 +0,0 @@
module.exports = {
printWidth: 100,
parser: "typescript",
semi: false,
singleQuote: true,
trailingComma: "all",
arrowParens: "avoid",
};

13
examples/form-builder/cms/src/fields/richText/elements.ts
View File

@@ -1,13 +0,0 @@
import { RichTextElement } from 'payload/dist/fields/config/types';
const elements: RichTextElement[] = [
'blockquote',
'h2',
'h3',
'h4',
'h5',
'h6',
'link',
];
export default elements;

94
examples/form-builder/cms/src/fields/richText/index.ts
View File

@@ -1,94 +0,0 @@
import { RichTextElement, RichTextField, RichTextLeaf } from 'payload/dist/fields/config/types';
import deepMerge from '../../utilities/deepMerge';
import elements from './elements';
import leaves from './leaves';
import link from '../link';
type RichText = (
overrides?: Partial<RichTextField>,
additions?: {
elements?: RichTextElement[]
leaves?: RichTextLeaf[]
}
) => RichTextField
const richText: RichText = (
overrides,
additions = {
elements: [],
leaves: [],
},
) => deepMerge<RichTextField, Partial<RichTextField>>(
{
name: 'richText',
type: 'richText',
required: true,
admin: {
upload: {
collections: {
media: {
fields: [
{
type: 'richText',
name: 'caption',
label: 'Caption',
admin: {
elements: [
...elements,
],
leaves: [
...leaves,
],
},
},
{
type: 'radio',
name: 'alignment',
label: 'Alignment',
options: [
{
label: 'Left',
value: 'left',
},
{
label: 'Center',
value: 'center',
},
{
label: 'Right',
value: 'right',
},
],
},
{
name: 'enableLink',
type: 'checkbox',
label: 'Enable Link',
},
link({
appearances: false,
disableLabel: true,
overrides: {
admin: {
condition: (_, data) => Boolean(data?.enableLink),
},
},
}),
],
},
},
},
elements: [
...elements,
...additions.elements || [],
],
leaves: [
...leaves,
...additions.leaves || [],
],
},
},
overrides,
);
export default richText;

9
examples/form-builder/cms/src/fields/richText/leaves.ts
View File

@@ -1,9 +0,0 @@
import { RichTextLeaf } from 'payload/dist/fields/config/types';
const defaultLeaves: RichTextLeaf[] = [
'bold',
'italic',
'underline',
];
export default defaultLeaves;

23
examples/form-builder/cms/src/fields/slug.ts
View File

@@ -1,23 +0,0 @@
import { Field } from 'payload/types';
import formatSlug from '../utilities/formatSlug';
import deepMerge from '../utilities/deepMerge';
type Slug = (fieldToUse?: string, overrides?: Partial<Field>) => Field
export const slugField: Slug = (fieldToUse = 'title', overrides) => deepMerge<Field, Partial<Field>>(
{
name: 'slug',
label: 'Slug',
type: 'text',
index: true,
admin: {
position: 'sidebar',
},
hooks: {
beforeValidate: [
formatSlug(fieldToUse),
],
},
},
overrides,
);

202
examples/form-builder/cms/src/payload-types.ts
View File

@@ -1,202 +0,0 @@
/* tslint:disable */
/**
* This file was automatically generated by Payload.
* DO NOT MODIFY IT BY HAND. Instead, modify your source Payload config,
* and re-run `payload generate:types` to regenerate this file.
*/
export interface Config {}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "main-menu".
*/
export interface MainMenu {
id: string;
navItems: {
link: {
type?: 'reference' | 'custom';
newTab?: boolean;
reference: {
value: string | Page;
relationTo: 'pages';
};
url: string;
label: string;
};
id?: string;
}[];
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "pages".
*/
export interface Page {
id: string;
title: string;
layout: {
form: string | Form;
enableIntro?: boolean;
introContent: {
[k: string]: unknown;
}[];
id?: string;
blockName?: string;
blockType: 'formBlock';
}[];
slug?: string;
_status?: 'draft' | 'published';
createdAt: string;
updatedAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "forms".
*/
export interface Form {
id: string;
title: string;
fields: (
| {
name: string;
label?: string;
width?: number;
defaultValue?: string;
required?: boolean;
id?: string;
blockName?: string;
blockType: 'text';
}
| {
name: string;
label?: string;
width?: number;
defaultValue?: string;
required?: boolean;
id?: string;
blockName?: string;
blockType: 'textarea';
}
| {
name: string;
label?: string;
width?: number;
defaultValue?: string;
options: {
label: string;
value: string;
id?: string;
}[];
required?: boolean;
id?: string;
blockName?: string;
blockType: 'select';
}
| {
name: string;
label?: string;
width?: number;
required?: boolean;
id?: string;
blockName?: string;
blockType: 'email';
}
| {
name: string;
label?: string;
width?: number;
required?: boolean;
id?: string;
blockName?: string;
blockType: 'state';
}
| {
name: string;
label?: string;
width?: number;
required?: boolean;
id?: string;
blockName?: string;
blockType: 'country';
}
| {
name: string;
label?: string;
width?: number;
defaultValue?: number;
required?: boolean;
id?: string;
blockName?: string;
blockType: 'number';
}
| {
name: string;
label?: string;
width?: number;
required?: boolean;
defaultValue?: boolean;
id?: string;
blockName?: string;
blockType: 'checkbox';
}
| {
message?: {
[k: string]: unknown;
}[];
id?: string;
blockName?: string;
blockType: 'message';
}
)[];
submitButtonLabel?: string;
confirmationType?: 'message' | 'redirect';
confirmationMessage: {
[k: string]: unknown;
}[];
redirect: {
url: string;
};
emails: {
emailTo: string;
bcc?: string;
replyTo?: string;
replyToName?: string;
emailFrom?: string;
emailFromName?: string;
subject: string;
message?: {
[k: string]: unknown;
}[];
id?: string;
}[];
createdAt: string;
updatedAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "users".
*/
export interface User {
id: string;
email?: string;
resetPasswordToken?: string;
resetPasswordExpiration?: string;
loginAttempts?: number;
lockUntil?: string;
createdAt: string;
updatedAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "form-submissions".
*/
export interface FormSubmission {
id: string;
form: string | Form;
submissionData: {
field: string;
value: string;
id?: string;
}[];
createdAt: string;
updatedAt: string;
}

31
examples/form-builder/cms/src/payload.config.ts
View File

@@ -1,31 +0,0 @@
import { buildConfig } from 'payload/config';
import path from 'path';
import FormBuilder from '@payloadcms/plugin-form-builder';
import { Users } from './collections/Users';
import { Pages } from './collections/Pages';
import { MainMenu } from './globals/MainMenu';
export default buildConfig({
collections: [
Pages,
Users,
],
globals: [
MainMenu,
],
cors: [
'http://localhost:3000',
process.env.PAYLOAD_PUBLIC_SITE_URL,
],
typescript: {
outputFile: path.resolve(__dirname, 'payload-types.ts'),
},
plugins: [
FormBuilder({
fields: {
payment: false,
},
}),
],
});

21
examples/form-builder/cms/src/utilities/formatSlug.ts
View File

@@ -1,21 +0,0 @@
import { FieldHook } from 'payload/types';
const format = (val: string): string => val.replace(/ /g, '-').replace(/[^\w-]+/g, '').toLowerCase();
const formatSlug = (fallback: string): FieldHook => ({ operation, value, originalDoc, data }) => {
if (typeof value === 'string') {
return format(value);
}
if (operation === 'create') {
const fallbackData = (data && data[fallback]) || (originalDoc && originalDoc[fallback]);
if (fallbackData && typeof fallbackData === 'string') {
return format(fallbackData);
}
}
return value;
};
export default formatSlug;

0
examples/form-builder/nextjs/.editorconfig → examples/form-builder/next-pages/.editorconfig
View File

1
examples/form-builder/next-pages/.env.example Normal file
View File

@@ -0,0 +1 @@
NEXT_PUBLIC_PAYLOAD_URL=http://localhost:3000

0
examples/form-builder/nextjs/.eslintrc.js → examples/form-builder/next-pages/.eslintrc.js
View File

0
examples/form-builder/nextjs/.gitignore → examples/form-builder/next-pages/.gitignore vendored
View File

8
examples/form-builder/next-pages/.prettierrc.js Normal file
View File

@@ -0,0 +1,8 @@
module.exports = {
printWidth: 100,
parser: 'typescript',
semi: false,
singleQuote: true,
trailingComma: 'all',
arrowParens: 'avoid',
}

16
examples/form-builder/nextjs/README.md → examples/form-builder/next-pages/README.md
View File

@@ -1,14 +1,14 @@
# Form Builder Example Website
# Form Builder Example Front-End
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) that fetches data from [Payload](https://payloadcms.com).
This is a [Next.js](https://nextjs.org) app using the [Pages Router](https://nextjs.org/docs/pages). It was made explicitly for Payload's [Form Builder Example](https://github.com/payloadcms/payload/tree/master/examples/form-builder/payload).
This example repo was made explicitly to demonstrate the power and convenience of the [Form-Builder plugin](https://github.com/payloadcms/plugin-form-builder). Along with the `Form-Builder plugin`, this repo takes advantage of the popular [React Hooks Form](https://react-hook-form.com/) library for easy validation, giving users an easy way to build and manage forms.
> This example uses the Pages Router, the legacy API of Next.js. If your app is using the latest [App Router](https://nextjs.org/docs/app), we will add an example for that soon.
## Getting Started
### Payload
First you'll need a running Payload app. If you have not done so already, open up the `cms` folder and follow the setup instructions. Take note of your server URL, you'll need this in the next step.
First you'll need a running Payload app. There is one made explicitly for this example and [can be found here](https://github.com/payloadcms/payload/tree/master/examples/form-builder/payload). If you have not done so already, clone it down and follow the setup instructions there.
### Next.js App
@@ -16,13 +16,9 @@ First you'll need a running Payload app. If you have not done so already, open u
2. `cd` into this directory and run `yarn` or `npm install`
3. `cp .env.example .env` to copy the example environment variables
4. `yarn dev` or `npm run dev` to start the server
5. `open http://localhost:3000` to see the result
5. `open http://localhost:3001` to see the result
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
Once running, you will find a few seeded example forms on your local environment. Give them a try!
You can also start editing the pages by modifying the documents within your CMS.
Once running you will find a couple seeded pages on your local environment with some basic instructions. You can also start editing the pages by modifying the documents within Payload. See the [Form Builder Example](https://github.com/payloadcms/payload/tree/master/examples/form-builder/payload) for full details.
## Learn More

0
examples/form-builder/nextjs/components/Blocks/Form/Checkbox/index.module.scss → examples/form-builder/next-pages/components/Blocks/Form/Checkbox/index.module.scss
View File

58
examples/form-builder/nextjs/components/Blocks/Form/Checkbox/index.tsx → examples/form-builder/next-pages/components/Blocks/Form/Checkbox/index.tsx
View File

@@ -1,32 +1,40 @@
import React, { useState } from 'react';
import { CheckboxField } from 'payload-plugin-form-builder/dist/types';
import { UseFormRegister, FieldErrorsImpl, FieldValues } from 'react-hook-form';
import { Check } from '../../../icons/Check';
import { Error } from '../Error';
import { Width } from '../Width';
import React, { useState } from 'react'
import { CheckboxField } from 'payload-plugin-form-builder/dist/types'
import { UseFormRegister, FieldErrorsImpl, FieldValues } from 'react-hook-form'
import { Check } from '../../../icons/Check'
import { Error } from '../Error'
import { Width } from '../Width'
import classes from './index.module.scss';
import classes from './index.module.scss'
export const Checkbox: React.FC<CheckboxField & {
register: UseFormRegister<FieldValues & any>,
setValue: any,
getValues: any,
errors: Partial<FieldErrorsImpl<{
[x: string]: any;
}>>
}> = ({ name, label, width, register, setValue, getValues, required: requiredFromProps, errors }) => {
const [checked, setChecked] = useState(false);
export const Checkbox: React.FC<
CheckboxField & {
register: UseFormRegister<FieldValues & any>
setValue: any
getValues: any
errors: Partial<
FieldErrorsImpl<{
[x: string]: any
}>
>
}
> = ({
name,
label,
width,
register,
setValue,
getValues,
required: requiredFromProps,
errors,
}) => {
const [checked, setChecked] = useState(false)
const isCheckboxChecked = getValues(name);
const isCheckboxChecked = getValues(name)
return (
<Width width={width}>
<div
className={[
classes.checkbox,
checked && classes.checked
].filter(Boolean).join(' ')}
>
<div className={[classes.checkbox, checked && classes.checked].filter(Boolean).join(' ')}>
<div className={classes.container}>
<input
type="checkbox"
@@ -49,5 +57,5 @@ export const Checkbox: React.FC<CheckboxField & {
{requiredFromProps && errors[name] && checked === false && <Error />}
</div>
</Width>
);
};
)
}

0
examples/form-builder/nextjs/components/Blocks/Form/Country/index.module.scss → examples/form-builder/next-pages/components/Blocks/Form/Country/index.module.scss
View File

38
examples/form-builder/nextjs/components/Blocks/Form/Country/index.tsx → examples/form-builder/next-pages/components/Blocks/Form/Country/index.tsx
View File

@@ -1,19 +1,23 @@
import React from 'react';
import ReactSelect from 'react-select';
import { CountryField } from 'payload-plugin-form-builder/dist/types';
import { Controller, Control, FieldValues, FieldErrorsImpl } from 'react-hook-form';
import { countryOptions } from './options';
import { Error } from '../Error';
import { Width } from '../Width';
import React from 'react'
import ReactSelect from 'react-select'
import { CountryField } from 'payload-plugin-form-builder/dist/types'
import { Controller, Control, FieldValues, FieldErrorsImpl } from 'react-hook-form'
import { countryOptions } from './options'
import { Error } from '../Error'
import { Width } from '../Width'
import classes from './index.module.scss';
import classes from './index.module.scss'
export const Country: React.FC<CountryField & {
control: Control<FieldValues, any>
errors: Partial<FieldErrorsImpl<{
[x: string]: any;
}>>
}> = ({ name, label, width, control, required, errors }) => {
export const Country: React.FC<
CountryField & {
control: Control<FieldValues, any>
errors: Partial<
FieldErrorsImpl<{
[x: string]: any
}>
>
}
> = ({ name, label, width, control, required, errors }) => {
return (
<Width width={width}>
<div className={classes.select}>
@@ -30,7 +34,7 @@ export const Country: React.FC<CountryField & {
instanceId={name}
options={countryOptions}
value={countryOptions.find(c => c.value === value)}
onChange={(val) => onChange(val.value)}
onChange={val => onChange(val.value)}
className={classes.reactSelect}
classNamePrefix="rs"
/>
@@ -39,5 +43,5 @@ export const Country: React.FC<CountryField & {
{required && errors[name] && <Error />}
</div>
</Width>
);
};
)
}

498
examples/form-builder/nextjs/components/Blocks/Form/Country/options.ts → examples/form-builder/next-pages/components/Blocks/Form/Country/options.ts
View File

File diff suppressed because it is too large Load Diff

0
examples/form-builder/nextjs/components/Blocks/Form/Email/index.module.scss → examples/form-builder/next-pages/components/Blocks/Form/Email/index.module.scss
View File

32
examples/form-builder/nextjs/components/Blocks/Form/Email/index.tsx → examples/form-builder/next-pages/components/Blocks/Form/Email/index.tsx
View File

@@ -1,17 +1,21 @@
import React from 'react';
import { EmailField } from 'payload-plugin-form-builder/dist/types';
import { UseFormRegister, FieldValues, FieldErrorsImpl } from 'react-hook-form';
import { Error } from '../Error';
import { Width } from '../Width';
import React from 'react'
import { EmailField } from 'payload-plugin-form-builder/dist/types'
import { UseFormRegister, FieldValues, FieldErrorsImpl } from 'react-hook-form'
import { Error } from '../Error'
import { Width } from '../Width'
import classes from './index.module.scss';
import classes from './index.module.scss'
export const Email: React.FC<EmailField & {
register: UseFormRegister<FieldValues & any>;
errors: Partial<FieldErrorsImpl<{
[x: string]: any;
}>>
}> = ({ name, width, label, register, required: requiredFromProps, errors }) => {
export const Email: React.FC<
EmailField & {
register: UseFormRegister<FieldValues & any>
errors: Partial<
FieldErrorsImpl<{
[x: string]: any
}>
>
}
> = ({ name, width, label, register, required: requiredFromProps, errors }) => {
return (
<Width width={width}>
<div className={classes.wrap}>
@@ -27,5 +31,5 @@ export const Email: React.FC<EmailField & {
{requiredFromProps && errors[name] && <Error />}
</div>
</Width>
);
};
)
}

0
examples/form-builder/nextjs/components/Blocks/Form/Error/index.module.scss → examples/form-builder/next-pages/components/Blocks/Form/Error/index.module.scss
View File

6
examples/form-builder/next-pages/components/Blocks/Form/Error/index.tsx Normal file
View File

@@ -0,0 +1,6 @@
import * as React from 'react'
import classes from './index.module.scss'
export const Error: React.FC = () => {
return <div className={classes.error}>This field is required</div>
}

0
examples/form-builder/nextjs/components/Blocks/Form/Message/index.module.scss → examples/form-builder/next-pages/components/Blocks/Form/Message/index.module.scss
View File

14
examples/form-builder/next-pages/components/Blocks/Form/Message/index.tsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react'
import { MessageField } from 'payload-plugin-form-builder/dist/types'
import RichText from '../../../RichText'
import { Width } from '../Width'
import classes from './index.module.scss'
export const Message: React.FC<MessageField> = ({ message }) => {
return (
<Width width="100">
<RichText content={message} className={classes.message} />
</Width>
)
}

0
examples/form-builder/nextjs/components/Blocks/Form/Number/index.module.scss → examples/form-builder/next-pages/components/Blocks/Form/Number/index.module.scss
View File

32
examples/form-builder/nextjs/components/Blocks/Form/Number/index.tsx → examples/form-builder/next-pages/components/Blocks/Form/Number/index.tsx
View File

@@ -1,17 +1,21 @@
import React from 'react';
import { TextField } from 'payload-plugin-form-builder/dist/types';
import { UseFormRegister, FieldValues, FieldErrorsImpl } from 'react-hook-form';
import { Error } from '../Error';
import { Width } from '../Width';
import React from 'react'
import { TextField } from 'payload-plugin-form-builder/dist/types'
import { UseFormRegister, FieldValues, FieldErrorsImpl } from 'react-hook-form'
import { Error } from '../Error'
import { Width } from '../Width'
import classes from './index.module.scss';
import classes from './index.module.scss'
export const Number: React.FC<TextField & {
register: UseFormRegister<FieldValues & any>;
errors: Partial<FieldErrorsImpl<{
[x: string]: any;
}>>
}> = ({ name, label, width, register, required: requiredFromProps, errors }) => {
export const Number: React.FC<
TextField & {
register: UseFormRegister<FieldValues & any>
errors: Partial<
FieldErrorsImpl<{
[x: string]: any
}>
>
}
> = ({ name, label, width, register, required: requiredFromProps, errors }) => {
return (
<Width width={width}>
<div className={classes.wrap}>
@@ -26,5 +30,5 @@ export const Number: React.FC<TextField & {
{requiredFromProps && errors[name] && <Error />}
</div>
</Width>
);
};
)
}

0
examples/form-builder/nextjs/components/Blocks/Form/Select/index.module.scss → examples/form-builder/next-pages/components/Blocks/Form/Select/index.module.scss
View File

36
examples/form-builder/nextjs/components/Blocks/Form/Select/index.tsx → examples/form-builder/next-pages/components/Blocks/Form/Select/index.tsx
View File

@@ -1,18 +1,22 @@
import React from 'react';
import ReactSelect from 'react-select';
import { SelectField } from 'payload-plugin-form-builder/dist/types';
import { Controller, Control, FieldValues, FieldErrorsImpl } from 'react-hook-form';
import { Error } from '../Error';
import { Width } from '../Width';
import React from 'react'
import ReactSelect from 'react-select'
import { SelectField } from 'payload-plugin-form-builder/dist/types'
import { Controller, Control, FieldValues, FieldErrorsImpl } from 'react-hook-form'
import { Error } from '../Error'
import { Width } from '../Width'
import classes from './index.module.scss';
import classes from './index.module.scss'
export const Select: React.FC<SelectField & {
control: Control<FieldValues, any>
errors: Partial<FieldErrorsImpl<{
[x: string]: any;
}>>
}> = ({ name, label, width, options, control, required, errors }) => {
export const Select: React.FC<
SelectField & {
control: Control<FieldValues, any>
errors: Partial<
FieldErrorsImpl<{
[x: string]: any
}>
>
}
> = ({ name, label, width, options, control, required, errors }) => {
return (
<Width width={width}>
<div className={classes.select}>
@@ -29,7 +33,7 @@ export const Select: React.FC<SelectField & {
instanceId={name}
options={options}
value={options.find(s => s.value === value)}
onChange={(val) => onChange(val.value)}
onChange={val => onChange(val.value)}
className={classes.reactSelect}
classNamePrefix="rs"
/>
@@ -38,5 +42,5 @@ export const Select: React.FC<SelectField & {
{required && errors[name] && <Error />}
</div>
</Width>
);
};
)
}

0
examples/form-builder/nextjs/components/Blocks/Form/State/index.module.scss → examples/form-builder/next-pages/components/Blocks/Form/State/index.module.scss
View File

39
examples/form-builder/nextjs/components/Blocks/Form/State/index.tsx → examples/form-builder/next-pages/components/Blocks/Form/State/index.tsx
View File

@@ -1,20 +1,23 @@
import React from 'react';
import ReactSelect from 'react-select';
import { StateField } from 'payload-plugin-form-builder/dist/types';
import { Controller, Control, FieldValues, FieldErrorsImpl } from 'react-hook-form';
import { stateOptions } from './options';
import { Error } from '../Error';
import { Width } from '../Width';
import React from 'react'
import ReactSelect from 'react-select'
import { StateField } from 'payload-plugin-form-builder/dist/types'
import { Controller, Control, FieldValues, FieldErrorsImpl } from 'react-hook-form'
import { stateOptions } from './options'
import { Error } from '../Error'
import { Width } from '../Width'
import classes from './index.module.scss';
export const State: React.FC<StateField & {
control: Control<FieldValues, any>
errors: Partial<FieldErrorsImpl<{
[x: string]: any;
}>>
}> = ({ name, label, width, control, required, errors }) => {
import classes from './index.module.scss'
export const State: React.FC<
StateField & {
control: Control<FieldValues, any>
errors: Partial<
FieldErrorsImpl<{
[x: string]: any
}>
>
}
> = ({ name, label, width, control, required, errors }) => {
return (
<Width width={width}>
<div className={classes.select}>
@@ -31,7 +34,7 @@ export const State: React.FC<StateField & {
instanceId={name}
options={stateOptions}
value={stateOptions.find(t => t.value === value)}
onChange={(val) => onChange(val.value)}
onChange={val => onChange(val.value)}
className={classes.reactSelect}
classNamePrefix="rs"
/>
@@ -40,5 +43,5 @@ export const State: React.FC<StateField & {
{required && errors[name] && <Error />}
</div>
</Width>
);
};
)
}

2
examples/form-builder/nextjs/components/Blocks/Form/State/options.ts → examples/form-builder/next-pages/components/Blocks/Form/State/options.ts
View File

@@ -49,4 +49,4 @@ export const stateOptions = [
{ label: 'West Virginia', value: 'WV' },
{ label: 'Wisconsin', value: 'WI' },
{ label: 'Wyoming', value: 'WY' },
];
]

0
examples/form-builder/nextjs/components/Blocks/Form/Text/index.module.scss → examples/form-builder/next-pages/components/Blocks/Form/Text/index.module.scss
View File

33
examples/form-builder/nextjs/components/Blocks/Form/Text/index.tsx → examples/form-builder/next-pages/components/Blocks/Form/Text/index.tsx
View File

@@ -1,18 +1,21 @@
import React from 'react';
import { TextField } from 'payload-plugin-form-builder/dist/types';
import { UseFormRegister, FieldValues, FieldErrorsImpl } from 'react-hook-form';
import { Error } from '../Error';
import { Width } from '../Width';
import React from 'react'
import { TextField } from 'payload-plugin-form-builder/dist/types'
import { UseFormRegister, FieldValues, FieldErrorsImpl } from 'react-hook-form'
import { Error } from '../Error'
import { Width } from '../Width'
import classes from './index.module.scss';
import classes from './index.module.scss'
export const Text: React.FC<TextField & {
register: UseFormRegister<FieldValues & any>;
errors: Partial<FieldErrorsImpl<{
[x: string]: any;
}>>
}> = ({ name, label, width, register, required: requiredFromProps, errors }) => {
export const Text: React.FC<
TextField & {
register: UseFormRegister<FieldValues & any>
errors: Partial<
FieldErrorsImpl<{
[x: string]: any
}>
>
}
> = ({ name, label, width, register, required: requiredFromProps, errors }) => {
return (
<Width width={width}>
<div className={classes.wrap}>
@@ -27,5 +30,5 @@ export const Text: React.FC<TextField & {
{requiredFromProps && errors[name] && <Error />}
</div>
</Width>
);
};
)
}

0
examples/form-builder/nextjs/components/Blocks/Form/Textarea/index.module.scss → examples/form-builder/next-pages/components/Blocks/Form/Textarea/index.module.scss
View File

34
examples/form-builder/nextjs/components/Blocks/Form/Textarea/index.tsx → examples/form-builder/next-pages/components/Blocks/Form/Textarea/index.tsx
View File

@@ -1,18 +1,22 @@
import React from 'react';
import { TextField } from 'payload-plugin-form-builder/dist/types';
import { UseFormRegister, FieldValues, FieldErrorsImpl } from 'react-hook-form';
import { Error } from '../Error';
import { Width } from '../Width';
import React from 'react'
import { TextField } from 'payload-plugin-form-builder/dist/types'
import { UseFormRegister, FieldValues, FieldErrorsImpl } from 'react-hook-form'
import { Error } from '../Error'
import { Width } from '../Width'
import classes from './index.module.scss';
import classes from './index.module.scss'
export const Textarea: React.FC<TextField & {
register: UseFormRegister<FieldValues & any>;
rows?: number;
errors: Partial<FieldErrorsImpl<{
[x: string]: any;
}>>
}> = ({ name, label, width, rows = 3, register, required: requiredFromProps, errors }) => {
export const Textarea: React.FC<
TextField & {
register: UseFormRegister<FieldValues & any>
rows?: number
errors: Partial<
FieldErrorsImpl<{
[x: string]: any
}>
>
}
> = ({ name, label, width, rows = 3, register, required: requiredFromProps, errors }) => {
return (
<Width width={width}>
<div className={classes.wrap}>
@@ -27,5 +31,5 @@ export const Textarea: React.FC<TextField & {
{requiredFromProps && errors[name] && <Error />}
</div>
</Width>
);
};
)
}

0
examples/form-builder/nextjs/components/Blocks/Form/Width/index.module.scss → examples/form-builder/next-pages/components/Blocks/Form/Width/index.module.scss
View File

13
examples/form-builder/next-pages/components/Blocks/Form/Width/index.tsx Normal file
View File

@@ -0,0 +1,13 @@
import * as React from 'react'
import classes from './index.module.scss'
export const Width: React.FC<{
width?: string
children: React.ReactNode
}> = ({ width, children }) => {
return (
<div className={classes.width} style={{ width: width ? `${width}%` : undefined }}>
{children}
</div>
)
}

0
examples/form-builder/nextjs/components/Blocks/Form/buildInitialFormState.tsx → examples/form-builder/next-pages/components/Blocks/Form/buildInitialFormState.tsx
View File

21
examples/form-builder/next-pages/components/Blocks/Form/fields.tsx Normal file
View File

@@ -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,
}

0
examples/form-builder/nextjs/components/Blocks/Form/index.module.scss → examples/form-builder/next-pages/components/Blocks/Form/index.module.scss
View File

7
examples/form-builder/nextjs/components/Blocks/Form/index.tsx → examples/form-builder/next-pages/components/Blocks/Form/index.tsx
View File

@@ -77,7 +77,7 @@ export const FormBlock: React.FC<
}, 1000)
try {
const req = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/form-submissions`, {
const req = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/form-submissions`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -129,10 +129,7 @@ export const FormBlock: React.FC<
return (
<Gutter>
<div
className={[
classes.form,
hasSubmitted && classes.hasSubmitted,
].filter(Boolean).join(' ')}
className={[classes.form, hasSubmitted && classes.hasSubmitted].filter(Boolean).join(' ')}
>
{enableIntro && introContent && !hasSubmitted && (
<RichText className={classes.intro} content={introContent} />

0
examples/form-builder/nextjs/components/Blocks/Form/shared.scss → examples/form-builder/next-pages/components/Blocks/Form/shared.scss
View File

49
examples/form-builder/next-pages/components/Blocks/index.tsx Normal file
View File

@@ -0,0 +1,49 @@
import React, { Fragment } from 'react'
import { Page } from '../../payload-types'
import { toKebabCase } from '../../utilities/toKebabCase'
import { VerticalPadding } from '../VerticalPadding'
import { FormBlock } from './Form'
const blockComponents = {
formBlock: FormBlock,
}
const Blocks: React.FC<{
blocks: Page['layout']
}> = props => {
const { blocks } = props
const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0
if (hasBlocks) {
return (
<Fragment>
{blocks.map((block, index) => {
const { blockName, blockType, form } = block
const isFormBlock = blockType === 'formBlock'
{
/*@ts-ignore*/
}
const formID: string = isFormBlock && form && form.id
if (blockType && blockType in blockComponents) {
const Block = blockComponents[blockType]
return (
<VerticalPadding key={isFormBlock ? formID : index} top="small" bottom="small">
{/*@ts-ignore*/}
<Block id={toKebabCase(blockName)} {...block} />
</VerticalPadding>
)
}
return null
})}
</Fragment>
)
}
return null
}
export default Blocks

0
examples/form-builder/nextjs/components/Button/index.module.scss → examples/form-builder/next-pages/components/Button/index.module.scss
View File

26
examples/form-builder/nextjs/components/Button/index.tsx → examples/form-builder/next-pages/components/Button/index.tsx
View File

@@ -1,6 +1,6 @@
import Link from 'next/link';
import React from 'react';
import classes from './index.module.scss';
import Link from 'next/link'
import React from 'react'
import classes from './index.module.scss'
export type Props = {
label: string
@@ -26,11 +26,13 @@ export const Button: React.FC<Props> = ({
href,
form,
appearance,
className: classNameFromProps
className: classNameFromProps,
}) => {
const newTabProps = newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {};
const Element = elements[el];
const className = [classNameFromProps, classes[`appearance--${appearance}`], classes.button].filter(Boolean).join(' ');
const newTabProps = newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {}
const Element = elements[el]
const className = [classNameFromProps, classes[`appearance--${appearance}`], classes.button]
.filter(Boolean)
.join(' ')
const elementProps = {
...newTabProps,
@@ -41,9 +43,7 @@ export const Button: React.FC<Props> = ({
const content = (
<div className={classes.content}>
<span className={classes.label}>
{label}
</span>
<span className={classes.label}>{label}</span>
</div>
)
@@ -55,11 +55,7 @@ export const Button: React.FC<Props> = ({
{content}
</a>
)}
{el !== 'link' && (
<React.Fragment>
{content}
</React.Fragment>
)}
{el !== 'link' && <React.Fragment>{content}</React.Fragment>}
</React.Fragment>
</Element>
)

14
examples/form-builder/next-pages/components/CloseModalOnRouteChange/index.tsx Normal file
View File

@@ -0,0 +1,14 @@
import React, { useEffect } from 'react'
import { useModal } from '@faceless-ui/modal'
import { useRouter } from 'next/router'
export const CloseModalOnRouteChange: React.FC = () => {
const { closeAllModals } = useModal()
const { asPath } = useRouter()
useEffect(() => {
closeAllModals()
}, [asPath, closeAllModals])
return null
}

0
examples/form-builder/nextjs/components/Gutter/index.module.scss → examples/form-builder/next-pages/components/Gutter/index.module.scss
View File

27
examples/form-builder/next-pages/components/Gutter/index.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React, { forwardRef, Ref } from 'react'
import classes from './index.module.scss'
type Props = {
left?: boolean
right?: boolean
className?: string
children: React.ReactNode
ref?: Ref<HTMLDivElement>
}
export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
const { left = true, right = true, className, children } = props
return (
<div
ref={ref}
className={[left && classes.gutterLeft, right && classes.gutterRight, className]
.filter(Boolean)
.join(' ')}
>
{children}
</div>
)
})
Gutter.displayName = 'Gutter'

29
examples/form-builder/next-pages/components/Header/MobileMenuModal.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { Modal } from '@faceless-ui/modal'
import { HeaderBar } from '.'
import { MainMenu } from '../../payload-types'
import { Gutter } from '../Gutter'
import { CMSLink } from '../Link'
import classes from './mobileMenuModal.module.scss'
type Props = {
navItems: MainMenu['navItems']
}
export const slug = 'menu-modal'
export const MobileMenuModal: React.FC<Props> = ({ navItems }) => {
return (
<Modal slug={slug} className={classes.mobileMenuModal}>
<HeaderBar />
<Gutter>
<div className={classes.mobileMenuItems}>
{navItems.map(({ link }, i) => {
return <CMSLink className={classes.menuItem} key={i} {...link} />
})}
</div>
</Gutter>
</Modal>
)
}

0
examples/form-builder/nextjs/components/Header/index.module.scss → examples/form-builder/next-pages/components/Header/index.module.scss
View File

30
examples/form-builder/nextjs/components/Header/index.tsx → examples/form-builder/next-pages/components/Header/index.tsx
View File

@@ -1,17 +1,17 @@
import { ModalToggler } from '@faceless-ui/modal';
import Link from 'next/link';
import React from 'react';
import { useGlobals } from '../../providers/Globals';
import { Gutter } from '../Gutter';
import { MenuIcon } from '../icons/Menu';
import { CMSLink } from '../Link';
import { Logo } from '../Logo';
import { MobileMenuModal, slug as menuModalSlug } from './MobileMenuModal';
import { ModalToggler } from '@faceless-ui/modal'
import Link from 'next/link'
import React from 'react'
import { useGlobals } from '../../providers/Globals'
import { Gutter } from '../Gutter'
import { MenuIcon } from '../icons/Menu'
import { CMSLink } from '../Link'
import { Logo } from '../Logo'
import { MobileMenuModal, slug as menuModalSlug } from './MobileMenuModal'
import classes from './index.module.scss';
import classes from './index.module.scss'
type HeaderBarProps = {
children?: React.ReactNode;
children?: React.ReactNode
}
export const HeaderBar: React.FC<HeaderBarProps> = ({ children }) => {
@@ -35,16 +35,16 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({ children }) => {
}
export const Header: React.FC = () => {
const { mainMenu: { navItems } } = useGlobals();
const {
mainMenu: { navItems },
} = useGlobals()
return (
<>
<HeaderBar>
<nav className={classes.nav}>
{navItems.map(({ link }, i) => {
return (
<CMSLink key={i} {...link} />
)
return <CMSLink key={i} {...link} />
})}
</nav>
</HeaderBar>

0
examples/form-builder/nextjs/components/Header/mobileMenuModal.module.scss → examples/form-builder/next-pages/components/Header/mobileMenuModal.module.scss
View File

19
examples/form-builder/nextjs/components/Link/index.tsx → examples/form-builder/next-pages/components/Link/index.tsx
View File

@@ -1,7 +1,7 @@
import Link from 'next/link';
import React from 'react';
import { Page } from '../../payload-types';
import { Button } from '../Button';
import Link from 'next/link'
import React from 'react'
import { Page } from '../../payload-types'
import { Button } from '../Button'
type CMSLinkType = {
type?: 'custom' | 'reference'
@@ -27,10 +27,13 @@ export const CMSLink: React.FC<CMSLinkType> = ({
children,
className,
}) => {
const href = (type === 'reference' && typeof reference?.value === 'object' && reference.value.slug) ? `/${reference.value.slug}` : url;
const href =
type === 'reference' && typeof reference?.value === 'object' && reference.value.slug
? `/${reference.value.slug}`
: url
if (!appearance) {
const newTabProps = newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {};
const newTabProps = newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {}
if (type === 'custom') {
return (
@@ -60,7 +63,5 @@ export const CMSLink: React.FC<CMSLinkType> = ({
label,
}
return (
<Button className={className} {...buttonProps} el="link" />
)
return <Button className={className} {...buttonProps} el="link" />
}

48
examples/form-builder/next-pages/components/Logo/index.tsx Normal file
View File

@@ -0,0 +1,48 @@
import React from 'react'
export const Logo: React.FC = () => {
return (
<svg
width="123"
height="29"
viewBox="0 0 123 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M34.7441 22.9997H37.2741V16.3297H41.5981C44.7031 16.3297 46.9801 14.9037 46.9801 11.4537C46.9801 8.00369 44.7031 6.55469 41.5981 6.55469H34.7441V22.9997ZM37.2741 14.1447V8.73969H41.4831C43.3921 8.73969 44.3581 9.59069 44.3581 11.4537C44.3581 13.2937 43.3921 14.1447 41.4831 14.1447H37.2741Z"
fill="black"
/>
<path
d="M51.3652 23.3217C53.2742 23.3217 54.6082 22.5627 55.3672 21.3437H55.4132C55.5512 22.6777 56.1492 23.1147 57.2762 23.1147C57.6442 23.1147 58.0352 23.0687 58.4262 22.9767V21.5967C58.2882 21.6197 58.2192 21.6197 58.1502 21.6197C57.7132 21.6197 57.5982 21.1827 57.5982 20.3317V14.9497C57.5982 11.9137 55.6662 10.9017 53.2512 10.9017C49.6632 10.9017 48.1912 12.6727 48.0762 14.9267H50.3762C50.4912 13.3627 51.1122 12.7187 53.1592 12.7187C54.8842 12.7187 55.3902 13.4317 55.3902 14.2827C55.3902 15.4327 54.2632 15.6627 52.4232 16.0077C49.5022 16.5597 47.5242 17.3417 47.5242 19.9637C47.5242 21.9647 49.0192 23.3217 51.3652 23.3217ZM49.8702 19.8027C49.8702 18.5837 50.7442 18.0087 52.8142 17.5947C54.0102 17.3417 55.0222 17.0887 55.3902 16.7437V18.4227C55.3902 20.4697 53.8952 21.5047 51.8712 21.5047C50.4682 21.5047 49.8702 20.9067 49.8702 19.8027Z"
fill="black"
/>
<path
d="M61.4996 27.1167C63.3166 27.1167 64.4436 26.1737 65.5706 23.2757L70.2166 11.2697H67.8476L64.6276 20.2397H64.5816L61.1546 11.2697H58.6936L63.4316 22.8847C62.9716 24.7247 61.9136 25.1847 61.0166 25.1847C60.6486 25.1847 60.4416 25.1617 60.0506 25.1157V26.9557C60.6486 27.0707 60.9936 27.1167 61.4996 27.1167Z"
fill="black"
/>
<path d="M71.5939 22.9997H73.8479V6.55469H71.5939V22.9997Z" fill="black" />
<path
d="M81.6221 23.3447C85.2791 23.3447 87.4871 20.7917 87.4871 17.1117C87.4871 13.4547 85.2791 10.9017 81.6451 10.9017C77.9651 10.9017 75.7571 13.4777 75.7571 17.1347C75.7571 20.8147 77.9651 23.3447 81.6221 23.3447ZM78.1031 17.1347C78.1031 14.6737 79.2071 12.7877 81.6451 12.7877C84.0371 12.7877 85.1411 14.6737 85.1411 17.1347C85.1411 19.5727 84.0371 21.4817 81.6451 21.4817C79.2071 21.4817 78.1031 19.5727 78.1031 17.1347Z"
fill="black"
/>
<path
d="M92.6484 23.3217C94.5574 23.3217 95.8914 22.5627 96.6504 21.3437H96.6964C96.8344 22.6777 97.4324 23.1147 98.5594 23.1147C98.9274 23.1147 99.3184 23.0687 99.7094 22.9767V21.5967C99.5714 21.6197 99.5024 21.6197 99.4334 21.6197C98.9964 21.6197 98.8814 21.1827 98.8814 20.3317V14.9497C98.8814 11.9137 96.9494 10.9017 94.5344 10.9017C90.9464 10.9017 89.4744 12.6727 89.3594 14.9267H91.6594C91.7744 13.3627 92.3954 12.7187 94.4424 12.7187C96.1674 12.7187 96.6734 13.4317 96.6734 14.2827C96.6734 15.4327 95.5464 15.6627 93.7064 16.0077C90.7854 16.5597 88.8074 17.3417 88.8074 19.9637C88.8074 21.9647 90.3024 23.3217 92.6484 23.3217ZM91.1534 19.8027C91.1534 18.5837 92.0274 18.0087 94.0974 17.5947C95.2934 17.3417 96.3054 17.0887 96.6734 16.7437V18.4227C96.6734 20.4697 95.1784 21.5047 93.1544 21.5047C91.7514 21.5047 91.1534 20.9067 91.1534 19.8027Z"
fill="black"
/>
<path
d="M106.181 23.3217C108.021 23.3217 109.148 22.4477 109.792 21.6197H109.838V22.9997H112.092V6.55469H109.838V12.6957H109.792C109.148 11.7757 108.021 10.9247 106.181 10.9247C103.191 10.9247 100.914 13.2707 100.914 17.1347C100.914 20.9987 103.191 23.3217 106.181 23.3217ZM103.26 17.1347C103.26 14.8347 104.341 12.8107 106.549 12.8107C108.573 12.8107 109.815 14.4667 109.815 17.1347C109.815 19.7797 108.573 21.4587 106.549 21.4587C104.341 21.4587 103.26 19.4347 103.26 17.1347Z"
fill="black"
/>
<path
d="M12.2464 2.33838L22.2871 8.83812V21.1752L14.7265 25.8854V13.5484L4.67383 7.05725L12.2464 2.33838Z"
fill="black"
/>
<path d="M11.477 25.2017V15.5747L3.90039 20.2936L11.477 25.2017Z" fill="black" />
<path
d="M120.442 6.30273C119.086 6.30273 117.998 7.29978 117.998 8.75952C117.998 10.2062 119.086 11.1968 120.442 11.1968C121.791 11.1968 122.879 10.2062 122.879 8.75952C122.879 7.29978 121.791 6.30273 120.442 6.30273ZM120.442 10.7601C119.34 10.7601 118.48 9.95207 118.48 8.75952C118.48 7.54742 119.34 6.73935 120.442 6.73935C121.563 6.73935 122.397 7.54742 122.397 8.75952C122.397 9.95207 121.563 10.7601 120.442 10.7601ZM120.52 8.97457L121.048 9.9651H121.641L121.041 8.86378C121.367 8.72042 121.511 8.45975 121.511 8.17302C121.511 7.49528 121.054 7.36495 120.285 7.36495H119.49V9.9651H120.025V8.97457H120.52ZM120.37 7.78853C120.729 7.78853 120.976 7.86673 120.976 8.17953C120.976 8.43368 120.807 8.56402 120.403 8.56402H120.025V7.78853H120.37Z"
fill="black"
/>
</svg>
)
}

0
examples/form-builder/nextjs/components/RichText/index.module.scss → examples/form-builder/next-pages/components/RichText/index.module.scss
View File

18
examples/form-builder/next-pages/components/RichText/index.tsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react'
import serialize from './serialize'
import classes from './index.module.scss'
const RichText: React.FC<{ className?: string; content: any }> = ({ className, content }) => {
if (!content) {
return null
}
return (
<div className={[classes.richText, className].filter(Boolean).join(' ')}>
{serialize(content)}
</div>
)
}
export default RichText

92
examples/form-builder/next-pages/components/RichText/serialize.tsx Normal file
View File

@@ -0,0 +1,92 @@
import React, { Fragment } from 'react'
import escapeHTML from 'escape-html'
import { Text } from 'slate'
// eslint-disable-next-line no-use-before-define
type Children = Leaf[]
type Leaf = {
type: string
value?: {
url: string
alt: string
}
children?: Children
url?: string
[key: string]: unknown
}
const serialize = (children: Children): React.ReactElement[] =>
children.map((node, i) => {
if (Text.isText(node)) {
let text = <span dangerouslySetInnerHTML={{ __html: escapeHTML(node.text) }} />
if (node.bold) {
text = <strong key={i}>{text}</strong>
}
if (node.code) {
text = <code key={i}>{text}</code>
}
if (node.italic) {
text = <em key={i}>{text}</em>
}
if (node.underline) {
text = (
<span style={{ textDecoration: 'underline' }} key={i}>
{text}
</span>
)
}
if (node.strikethrough) {
text = (
<span style={{ textDecoration: 'line-through' }} key={i}>
{text}
</span>
)
}
return <Fragment key={i}>{text}</Fragment>
}
if (!node) {
return null
}
switch (node.type) {
case 'h1':
return <h1 key={i}>{serialize(node.children)}</h1>
case 'h2':
return <h2 key={i}>{serialize(node.children)}</h2>
case 'h3':
return <h3 key={i}>{serialize(node.children)}</h3>
case 'h4':
return <h4 key={i}>{serialize(node.children)}</h4>
case 'h5':
return <h5 key={i}>{serialize(node.children)}</h5>
case 'h6':
return <h6 key={i}>{serialize(node.children)}</h6>
case 'blockquote':
return <blockquote key={i}>{serialize(node.children)}</blockquote>
case 'ul':
return <ul key={i}>{serialize(node.children)}</ul>
case 'ol':
return <ol key={i}>{serialize(node.children)}</ol>
case 'li':
return <li key={i}>{serialize(node.children)}</li>
case 'link':
return (
<a href={escapeHTML(node.url)} key={i}>
{serialize(node.children)}
</a>
)
default:
return <p key={i}>{serialize(node.children)}</p>
}
})
export default serialize

0
examples/form-builder/nextjs/components/VerticalPadding/index.module.scss → examples/form-builder/next-pages/components/VerticalPadding/index.module.scss
View File

14
examples/form-builder/nextjs/components/VerticalPadding/index.tsx → examples/form-builder/next-pages/components/VerticalPadding/index.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import classes from './index.module.scss';
import React from 'react'
import classes from './index.module.scss'
export type VerticalPaddingOptions = 'large' | 'medium' | 'small' | 'none';
export type VerticalPaddingOptions = 'large' | 'medium' | 'small' | 'none'
type Props = {
top?: VerticalPaddingOptions
@@ -18,11 +18,9 @@ export const VerticalPadding: React.FC<Props> = ({
}) => {
return (
<div
className={[
className,
classes[`top-${top}`],
classes[`bottom-${bottom}`],
].filter(Boolean).join(' ')}
className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]]
.filter(Boolean)
.join(' ')}
>
{children}
</div>

0
examples/form-builder/nextjs/components/icons/Check/index.module.scss → examples/form-builder/next-pages/components/icons/Check/index.module.scss
View File

7
examples/form-builder/nextjs/components/icons/Check/index.tsx → examples/form-builder/next-pages/components/icons/Check/index.tsx
View File

@@ -3,12 +3,7 @@ import classes from './index.module.scss'
export const Check: React.FC = () => {
return (
<svg
width="100%"
height="100%"
viewBox="0 0 25 25"
className={classes.checkBox}
>
<svg width="100%" height="100%" viewBox="0 0 25 25" className={classes.checkBox}>
<path
d="M10.6092 16.0192L17.6477 8.98076"
strokeLinecap="square"

4
examples/form-builder/nextjs/components/icons/Menu/index.tsx → examples/form-builder/next-pages/components/icons/Menu/index.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React from 'react'
export const MenuIcon: React.FC = () => {
return (
@@ -8,4 +8,4 @@ export const MenuIcon: React.FC = () => {
<rect x="3.5" y="18.5" width="18" height="2" fill="currentColor" />
</svg>
)
}
}

0
examples/form-builder/nextjs/css/app.scss → examples/form-builder/next-pages/css/app.scss
View File

0
examples/form-builder/nextjs/css/colors.scss → examples/form-builder/next-pages/css/colors.scss
View File

0
examples/form-builder/nextjs/css/common.scss → examples/form-builder/next-pages/css/common.scss
View File

0
examples/form-builder/nextjs/css/queries.scss → examples/form-builder/next-pages/css/queries.scss
View File

0
examples/form-builder/nextjs/css/type.scss → examples/form-builder/next-pages/css/type.scss
View File

10
examples/form-builder/nextjs/next.config.js → examples/form-builder/next-pages/next.config.js
View File

@@ -1,14 +1,10 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: ['localhost', process.env.NEXT_PUBLIC_PAYLOAD_URL || ''].filter(Boolean),
},
reactStrictMode: true,
swcMinify: true,
images: {
domains: [
'localhost',
process.env.NEXT_PUBLIC_CMS_URL
],
},
allowJs: true,
}
module.exports = nextConfig

2
examples/form-builder/nextjs/package.json → examples/form-builder/next-pages/package.json
View File

@@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"dev": "next dev -p 3001",
"build": "next build",
"start": "next start",
"lint": "next lint"

52
examples/form-builder/next-pages/pages/[slug].tsx Normal file
View File

@@ -0,0 +1,52 @@
import React from 'react'
import { GetStaticProps, GetStaticPropsContext, GetStaticPaths } from 'next'
import Blocks from '../components/Blocks'
import type { Page, MainMenu } from '../payload-types'
const Page: React.FC<{
mainMenu: MainMenu
page: Page
}> = props => {
const {
page: { layout },
} = props
return (
<React.Fragment>
<Blocks blocks={layout} />
</React.Fragment>
)
}
export default Page
export const getStaticProps: GetStaticProps = async (context: GetStaticPropsContext) => {
const { params } = context
const slug = params?.slug || 'home'
const pageQuery = await fetch(
`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/pages?where[slug][equals]=${slug}`,
).then(res => res.json())
return {
props: {
page: pageQuery.docs[0],
},
}
}
export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {
const pagesQuery: { docs: Page[] } = await fetch(
`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/pages?limit=100`,
).then(res => res.json())
return {
paths: pagesQuery.docs.map(page => ({
params: {
slug: page.slug,
},
})),
fallback: 'blocking',
}
}

59
examples/form-builder/next-pages/pages/_app.tsx Normal file
View File

@@ -0,0 +1,59 @@
import App, { AppContext, AppProps } from 'next/app'
import { ModalContainer, ModalProvider } from '@faceless-ui/modal'
import React from 'react'
import { Header } from '../components/Header'
import { GlobalsProvider } from '../providers/Globals'
import { CloseModalOnRouteChange } from '../components/CloseModalOnRouteChange'
import { MainMenu } from '../payload-types'
import '../css/app.scss'
export interface IGlobals {
mainMenu: MainMenu
}
export const getAllGlobals = async (): Promise<IGlobals> => {
const [mainMenu] = await Promise.all([
fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/globals/main-menu?depth=1`).then(res =>
res.json(),
),
])
return {
mainMenu,
}
}
const PayloadApp = (
appProps: AppProps & {
globals: IGlobals
},
): React.ReactElement => {
const { Component, pageProps, globals } = appProps
return (
<React.Fragment>
<GlobalsProvider {...globals}>
<ModalProvider classPrefix="form" transTime={0} zIndex="var(--modal-z-index)">
<CloseModalOnRouteChange />
<Header />
<Component {...pageProps} />
<ModalContainer />
</ModalProvider>
</GlobalsProvider>
</React.Fragment>
)
}
PayloadApp.getInitialProps = async (appContext: AppContext) => {
const appProps = await App.getInitialProps(appContext)
const globals = await getAllGlobals()
return {
...appProps,
globals,
}
}
export default PayloadApp

9
examples/form-builder/next-pages/pages/index.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { GetStaticProps } from 'next'
import Page, { getStaticProps as sharedGetStaticProps } from './[slug]'
export default Page
export const getStaticProps: GetStaticProps = async ctx => {
const func = sharedGetStaticProps.bind(this)
return func(ctx)
}

241
examples/form-builder/next-pages/payload-types.ts Normal file
View File

@@ -0,0 +1,241 @@
/* tslint:disable */
/* eslint-disable */
/**
* This file was automatically generated by Payload.
* DO NOT MODIFY IT BY HAND. Instead, modify your source Payload config,
* and re-run `payload generate:types` to regenerate this file.
*/
export interface Config {
collections: {
pages: Page
users: User
forms: Form
'form-submissions': FormSubmission
'payload-preferences': PayloadPreference
'payload-migrations': PayloadMigration
}
globals: {
'main-menu': MainMenu
}
}
export interface Page {
id: string
title: string
layout: {
form: string | Form
enableIntro?: boolean
introContent: {
[k: string]: unknown
}[]
id?: string
blockName?: string
blockType: 'formBlock'
}[]
slug?: string
updatedAt: string
createdAt: string
_status?: 'draft' | 'published'
}
export interface Form {
id: string
title: string
fields?: (
| {
name: string
label?: string
width?: number
defaultValue?: string
required?: boolean
id?: string
blockName?: string
blockType: 'text'
}
| {
name: string
label?: string
width?: number
defaultValue?: string
required?: boolean
id?: string
blockName?: string
blockType: 'textarea'
}
| {
name: string
label?: string
width?: number
defaultValue?: string
options?: {
label: string
value: string
id?: string
}[]
required?: boolean
id?: string
blockName?: string
blockType: 'select'
}
| {
name: string
label?: string
width?: number
required?: boolean
id?: string
blockName?: string
blockType: 'email'
}
| {
name: string
label?: string
width?: number
required?: boolean
id?: string
blockName?: string
blockType: 'state'
}
| {
name: string
label?: string
width?: number
required?: boolean
id?: string
blockName?: string
blockType: 'country'
}
| {
name: string
label?: string
width?: number
defaultValue?: number
required?: boolean
id?: string
blockName?: string
blockType: 'number'
}
| {
name: string
label?: string
width?: number
required?: boolean
defaultValue?: boolean
id?: string
blockName?: string
blockType: 'checkbox'
}
| {
message?: {
[k: string]: unknown
}[]
id?: string
blockName?: string
blockType: 'message'
}
)[]
submitButtonLabel?: string
confirmationType?: 'message' | 'redirect'
confirmationMessage: {
[k: string]: unknown
}[]
redirect?: {
url: string
}
emails?: {
emailTo?: string
cc?: string
bcc?: string
replyTo?: string
emailFrom?: string
subject: string
message?: {
[k: string]: unknown
}[]
id?: string
}[]
updatedAt: string
createdAt: string
}
export interface User {
id: string
updatedAt: string
createdAt: string
email: string
resetPasswordToken?: string
resetPasswordExpiration?: string
salt?: string
hash?: string
loginAttempts?: number
lockUntil?: string
password?: string
}
export interface FormSubmission {
id: string
form: string | Form
submissionData?: {
field: string
value: string
id?: string
}[]
updatedAt: string
createdAt: string
}
export interface PayloadPreference {
id: string
user: {
relationTo: 'users'
value: string | User
}
key?: string
value?:
| {
[k: string]: unknown
}
| unknown[]
| string
| number
| boolean
| null
updatedAt: string
createdAt: string
}
export interface PayloadMigration {
id: string
name?: string
batch?: number
updatedAt: string
createdAt: string
}
export interface MainMenu {
id: string
navItems?: {
link: {
type?: 'reference' | 'custom'
newTab?: boolean
reference: {
relationTo: 'pages'
value: string | Page
}
url: string
label: string
}
id?: string
}[]
updatedAt?: string
createdAt?: string
}
declare module 'payload' {
export interface GeneratedTypes {
collections: {
pages: Page
users: User
forms: Form
'form-submissions': FormSubmission
'payload-preferences': PayloadPreference
'payload-migrations': PayloadMigration
}
globals: {
'main-menu': MainMenu
}
}
}

27
examples/form-builder/nextjs/providers/Globals/index.tsx → examples/form-builder/next-pages/providers/Globals/index.tsx
View File

@@ -1,22 +1,21 @@
import React, { createContext, useContext } from 'react';
import { MainMenu } from '../../payload-types';
import React, { createContext, useContext } from 'react'
import { MainMenu } from '../../payload-types'
export type MainMenuType = MainMenu
export interface IGlobals {
mainMenu: MainMenuType,
mainMenu: MainMenuType
}
export const GlobalsContext = createContext<IGlobals>({} as IGlobals);
export const useGlobals = (): IGlobals => useContext(GlobalsContext);
export const GlobalsContext = createContext<IGlobals>({} as IGlobals)
export const useGlobals = (): IGlobals => useContext(GlobalsContext)
export const GlobalsProvider: React.FC<IGlobals & {
children: React.ReactNode
}> = (props) => {
const {
mainMenu,
children,
} = props;
export const GlobalsProvider: React.FC<
IGlobals & {
children: React.ReactNode
}
> = props => {
const { mainMenu, children } = props
return (
<GlobalsContext.Provider
@@ -26,5 +25,5 @@ export const GlobalsProvider: React.FC<IGlobals & {
>
{children}
</GlobalsContext.Provider>
);
};
)
}

0
examples/form-builder/nextjs/public/favicon.ico → examples/form-builder/next-pages/public/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

0
examples/form-builder/nextjs/tsconfig.json → examples/form-builder/next-pages/tsconfig.json
View File

1
examples/form-builder/next-pages/utilities/canUseDOM.ts Normal file
View File

@@ -0,0 +1 @@
export default !!(typeof window !== 'undefined' && window.document && window.document.createElement)

29
examples/form-builder/next-pages/utilities/formatSlug.js Normal file
View File

@@ -0,0 +1,29 @@
module.exports.formatSlug = reference => {
let slug = ''
const { relationTo, value } = reference
if (typeof value === 'object' && value !== null) {
const { slug: referenceSlug, breadcrumbs } = value
// pages could be nested, so use breadcrumbs
if (relationTo === 'pages') {
if (breadcrumbs) {
const { url: lastCrumbURL = '' } = breadcrumbs?.[breadcrumbs.length - 1] || {} // last crumb
slug = lastCrumbURL
} else {
slug = referenceSlug
}
}
if (relationTo !== 'pages') {
slug = `/${relationTo}/${referenceSlug}`
if (relationTo === 'media') {
slug = value.url
}
}
}
return slug
}

5
examples/form-builder/next-pages/utilities/toKebabCase.ts Normal file
View File

@@ -0,0 +1,5 @@
export const toKebabCase = string =>
string
?.replace(/([a-z])([A-Z])/g, '$1-$2')
.replace(/\s+/g, '-')
.toLowerCase()

0
examples/form-builder/nextjs/yarn.lock → examples/form-builder/next-pages/yarn.lock
View File

1
examples/form-builder/nextjs/.env.example
View File

@@ -1 +0,0 @@
NEXT_PUBLIC_CMS_URL=http://localhost:8000

8
examples/form-builder/nextjs/.prettierrc.js
View File

@@ -1,8 +0,0 @@
module.exports = {
printWidth: 100,
parser: "typescript",
semi: false,
singleQuote: true,
trailingComma: "all",
arrowParens: "avoid",
};

10
examples/form-builder/nextjs/components/Blocks/Form/Error/index.tsx
View File

@@ -1,10 +0,0 @@
import * as React from 'react';
import classes from './index.module.scss';
export const Error: React.FC = () => {
return (
<div className={classes.error}>
This field is required
</div>
)
}

17
examples/form-builder/nextjs/components/Blocks/Form/Message/index.tsx
View File

@@ -1,17 +0,0 @@
import React from 'react';
import { MessageField } from "payload-plugin-form-builder/dist/types";
import RichText from '../../../RichText';
import { Width } from "../Width";
import classes from './index.module.scss';
export const Message: React.FC<MessageField> = ({ message }) => {
return (
<Width width="100">
<RichText
content={message}
className={classes.message}
/>
</Width>
);
};

16
examples/form-builder/nextjs/components/Blocks/Form/Width/index.tsx
View File

@@ -1,16 +0,0 @@
import * as React from 'react';
import classes from './index.module.scss';
export const Width: React.FC<{
width?: string
children: React.ReactNode
}> = ({ width, children }) => {
return (
<div
className={classes.width}
style={{ width: width ? `${width}%` : undefined }}
>
{children}
</div>
)
}

21
examples/form-builder/nextjs/components/Blocks/Form/fields.tsx
View File

@@ -1,21 +0,0 @@
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,
}

61
examples/form-builder/nextjs/components/Blocks/index.tsx
View File

@@ -1,61 +0,0 @@
import React, { Fragment } from 'react';
import { Page } from '../../payload-types';
import { toKebabCase } from '../../utilities/toKebabCase';
import { VerticalPadding } from '../VerticalPadding';
import { FormBlock } from './Form'
const blockComponents = {
formBlock: FormBlock,
}
const Blocks: React.FC<{
blocks: Page['layout']
}> = (props) => {
const {
blocks,
} = props;
const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0;
if (hasBlocks) {
return (
<Fragment>
{blocks.map((block, index) => {
const {
blockName,
blockType,
form
} = block;
const isFormBlock = blockType === 'formBlock'
{/*@ts-ignore*/ }
const formID: string = isFormBlock && form && form.id
if (blockType && blockType in blockComponents) {
const Block = blockComponents[blockType];
return (
<VerticalPadding
key={isFormBlock ? formID : index}
top='small'
bottom='small'
>
{/*@ts-ignore*/}
<Block
id={toKebabCase(blockName)}
{...block}
/>
</VerticalPadding>
);
}
return null;
})}
</Fragment>
);
}
return null;
};
export default Blocks;

14
examples/form-builder/nextjs/components/CloseModalOnRouteChange/index.tsx
View File

@@ -1,14 +0,0 @@
import React, { useEffect } from 'react';
import { useModal } from '@faceless-ui/modal';
import { useRouter } from 'next/router';
export const CloseModalOnRouteChange: React.FC = () => {
const { closeAllModals } = useModal();
const { asPath } = useRouter();
useEffect(() => {
closeAllModals();
}, [asPath, closeAllModals]);
return null;
};

35
examples/form-builder/nextjs/components/Gutter/index.tsx
View File

@@ -1,35 +0,0 @@
import React, { forwardRef, Ref } from 'react';
import classes from './index.module.scss';
type Props = {
left?: boolean
right?: boolean
className?: string
children: React.ReactNode
ref?: Ref<HTMLDivElement>
}
export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
const {
left = true,
right = true,
className,
children
} = props;
return (
<div
ref={ref}
className={[
left && classes.gutterLeft,
right && classes.gutterRight,
className
].filter(Boolean).join(' ')}
>
{children}
</div>
)
});
Gutter.displayName = 'Gutter';

31
examples/form-builder/nextjs/components/Header/MobileMenuModal.tsx
View File

@@ -1,31 +0,0 @@
import { Modal } from "@faceless-ui/modal";
import { HeaderBar } from ".";
import { MainMenu } from "../../payload-types"
import { Gutter } from "../Gutter";
import { CMSLink } from "../Link";
import classes from './mobileMenuModal.module.scss';
type Props = {
navItems: MainMenu['navItems'];
}
export const slug = 'menu-modal';
export const MobileMenuModal: React.FC<Props> = ({ navItems }) => {
return (
<Modal slug={slug} className={classes.mobileMenuModal}>
<HeaderBar />
<Gutter>
<div className={classes.mobileMenuItems}>
{navItems.map(({ link }, i) => {
return (
<CMSLink className={classes.menuItem} key={i} {...link} />
)
})}
</div>
</Gutter>
</Modal>
)
}

18
examples/form-builder/nextjs/components/Logo/index.tsx
View File

@@ -1,18 +0,0 @@
import React from 'react';
export const Logo: React.FC = () => {
return (
<svg width="123" height="29" viewBox="0 0 123 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.7441 22.9997H37.2741V16.3297H41.5981C44.7031 16.3297 46.9801 14.9037 46.9801 11.4537C46.9801 8.00369 44.7031 6.55469 41.5981 6.55469H34.7441V22.9997ZM37.2741 14.1447V8.73969H41.4831C43.3921 8.73969 44.3581 9.59069 44.3581 11.4537C44.3581 13.2937 43.3921 14.1447 41.4831 14.1447H37.2741Z" fill="black" />
<path d="M51.3652 23.3217C53.2742 23.3217 54.6082 22.5627 55.3672 21.3437H55.4132C55.5512 22.6777 56.1492 23.1147 57.2762 23.1147C57.6442 23.1147 58.0352 23.0687 58.4262 22.9767V21.5967C58.2882 21.6197 58.2192 21.6197 58.1502 21.6197C57.7132 21.6197 57.5982 21.1827 57.5982 20.3317V14.9497C57.5982 11.9137 55.6662 10.9017 53.2512 10.9017C49.6632 10.9017 48.1912 12.6727 48.0762 14.9267H50.3762C50.4912 13.3627 51.1122 12.7187 53.1592 12.7187C54.8842 12.7187 55.3902 13.4317 55.3902 14.2827C55.3902 15.4327 54.2632 15.6627 52.4232 16.0077C49.5022 16.5597 47.5242 17.3417 47.5242 19.9637C47.5242 21.9647 49.0192 23.3217 51.3652 23.3217ZM49.8702 19.8027C49.8702 18.5837 50.7442 18.0087 52.8142 17.5947C54.0102 17.3417 55.0222 17.0887 55.3902 16.7437V18.4227C55.3902 20.4697 53.8952 21.5047 51.8712 21.5047C50.4682 21.5047 49.8702 20.9067 49.8702 19.8027Z" fill="black" />
<path d="M61.4996 27.1167C63.3166 27.1167 64.4436 26.1737 65.5706 23.2757L70.2166 11.2697H67.8476L64.6276 20.2397H64.5816L61.1546 11.2697H58.6936L63.4316 22.8847C62.9716 24.7247 61.9136 25.1847 61.0166 25.1847C60.6486 25.1847 60.4416 25.1617 60.0506 25.1157V26.9557C60.6486 27.0707 60.9936 27.1167 61.4996 27.1167Z" fill="black" />
<path d="M71.5939 22.9997H73.8479V6.55469H71.5939V22.9997Z" fill="black" />
<path d="M81.6221 23.3447C85.2791 23.3447 87.4871 20.7917 87.4871 17.1117C87.4871 13.4547 85.2791 10.9017 81.6451 10.9017C77.9651 10.9017 75.7571 13.4777 75.7571 17.1347C75.7571 20.8147 77.9651 23.3447 81.6221 23.3447ZM78.1031 17.1347C78.1031 14.6737 79.2071 12.7877 81.6451 12.7877C84.0371 12.7877 85.1411 14.6737 85.1411 17.1347C85.1411 19.5727 84.0371 21.4817 81.6451 21.4817C79.2071 21.4817 78.1031 19.5727 78.1031 17.1347Z" fill="black" />
<path d="M92.6484 23.3217C94.5574 23.3217 95.8914 22.5627 96.6504 21.3437H96.6964C96.8344 22.6777 97.4324 23.1147 98.5594 23.1147C98.9274 23.1147 99.3184 23.0687 99.7094 22.9767V21.5967C99.5714 21.6197 99.5024 21.6197 99.4334 21.6197C98.9964 21.6197 98.8814 21.1827 98.8814 20.3317V14.9497C98.8814 11.9137 96.9494 10.9017 94.5344 10.9017C90.9464 10.9017 89.4744 12.6727 89.3594 14.9267H91.6594C91.7744 13.3627 92.3954 12.7187 94.4424 12.7187C96.1674 12.7187 96.6734 13.4317 96.6734 14.2827C96.6734 15.4327 95.5464 15.6627 93.7064 16.0077C90.7854 16.5597 88.8074 17.3417 88.8074 19.9637C88.8074 21.9647 90.3024 23.3217 92.6484 23.3217ZM91.1534 19.8027C91.1534 18.5837 92.0274 18.0087 94.0974 17.5947C95.2934 17.3417 96.3054 17.0887 96.6734 16.7437V18.4227C96.6734 20.4697 95.1784 21.5047 93.1544 21.5047C91.7514 21.5047 91.1534 20.9067 91.1534 19.8027Z" fill="black" />
<path d="M106.181 23.3217C108.021 23.3217 109.148 22.4477 109.792 21.6197H109.838V22.9997H112.092V6.55469H109.838V12.6957H109.792C109.148 11.7757 108.021 10.9247 106.181 10.9247C103.191 10.9247 100.914 13.2707 100.914 17.1347C100.914 20.9987 103.191 23.3217 106.181 23.3217ZM103.26 17.1347C103.26 14.8347 104.341 12.8107 106.549 12.8107C108.573 12.8107 109.815 14.4667 109.815 17.1347C109.815 19.7797 108.573 21.4587 106.549 21.4587C104.341 21.4587 103.26 19.4347 103.26 17.1347Z" fill="black" />
<path d="M12.2464 2.33838L22.2871 8.83812V21.1752L14.7265 25.8854V13.5484L4.67383 7.05725L12.2464 2.33838Z" fill="black" />
<path d="M11.477 25.2017V15.5747L3.90039 20.2936L11.477 25.2017Z" fill="black" />
<path d="M120.442 6.30273C119.086 6.30273 117.998 7.29978 117.998 8.75952C117.998 10.2062 119.086 11.1968 120.442 11.1968C121.791 11.1968 122.879 10.2062 122.879 8.75952C122.879 7.29978 121.791 6.30273 120.442 6.30273ZM120.442 10.7601C119.34 10.7601 118.48 9.95207 118.48 8.75952C118.48 7.54742 119.34 6.73935 120.442 6.73935C121.563 6.73935 122.397 7.54742 122.397 8.75952C122.397 9.95207 121.563 10.7601 120.442 10.7601ZM120.52 8.97457L121.048 9.9651H121.641L121.041 8.86378C121.367 8.72042 121.511 8.45975 121.511 8.17302C121.511 7.49528 121.054 7.36495 120.285 7.36495H119.49V9.9651H120.025V8.97457H120.52ZM120.37 7.78853C120.729 7.78853 120.976 7.86673 120.976 8.17953C120.976 8.43368 120.807 8.56402 120.403 8.56402H120.025V7.78853H120.37Z" fill="black" />
</svg>
)
}

18
examples/form-builder/nextjs/components/RichText/index.tsx
View File

@@ -1,18 +0,0 @@
import React from 'react';
import serialize from './serialize';
import classes from './index.module.scss';
const RichText: React.FC<{ className?: string, content: any }> = ({ className, content }) => {
if (!content) {
return null;
}
return (
<div className={[classes.richText, className].filter(Boolean).join(' ')}>
{serialize(content)}
</div>
);
};
export default RichText;

160
examples/form-builder/nextjs/components/RichText/serialize.tsx
View File

@@ -1,160 +0,0 @@
import React, { Fragment } from 'react';
import escapeHTML from 'escape-html';
import { Text } from 'slate';
// eslint-disable-next-line no-use-before-define
type Children = Leaf[]
type Leaf = {
type: string
value?: {
url: string
alt: string
}
children?: Children
url?: string
[key: string]: unknown
}
const serialize = (children: Children): React.ReactElement[] => children.map((node, i) => {
if (Text.isText(node)) {
let text = <span dangerouslySetInnerHTML={{ __html: escapeHTML(node.text) }} />;
if (node.bold) {
text = (
<strong key={i}>
{text}
</strong>
);
}
if (node.code) {
text = (
<code key={i}>
{text}
</code>
);
}
if (node.italic) {
text = (
<em key={i}>
{text}
</em>
);
}
if (node.underline) {
text = (
<span
style={{ textDecoration: 'underline' }}
key={i}
>
{text}
</span>
);
}
if (node.strikethrough) {
text = (
<span
style={{ textDecoration: 'line-through' }}
key={i}
>
{text}
</span>
);
}
return (
<Fragment key={i}>
{text}
</Fragment>
);
}
if (!node) {
return null;
}
switch (node.type) {
case 'h1':
return (
<h1 key={i}>
{serialize(node.children)}
</h1>
);
case 'h2':
return (
<h2 key={i}>
{serialize(node.children)}
</h2>
);
case 'h3':
return (
<h3 key={i}>
{serialize(node.children)}
</h3>
);
case 'h4':
return (
<h4 key={i}>
{serialize(node.children)}
</h4>
);
case 'h5':
return (
<h5 key={i}>
{serialize(node.children)}
</h5>
);
case 'h6':
return (
<h6 key={i}>
{serialize(node.children)}
</h6>
);
case 'blockquote':
return (
<blockquote key={i}>
{serialize(node.children)}
</blockquote>
);
case 'ul':
return (
<ul key={i}>
{serialize(node.children)}
</ul>
);
case 'ol':
return (
<ol key={i}>
{serialize(node.children)}
</ol>
);
case 'li':
return (
<li key={i}>
{serialize(node.children)}
</li>
);
case 'link':
return (
<a
href={escapeHTML(node.url)}
key={i}
>
{serialize(node.children)}
</a>
);
default:
return (
<p key={i}>
{serialize(node.children)}
</p>
);
}
});
export default serialize;

60
examples/form-builder/nextjs/pages/[slug].tsx
View File

@@ -1,60 +0,0 @@
import React from 'react';
import {
GetStaticProps,
GetStaticPropsContext,
GetStaticPaths
} from 'next';
import Blocks from '../components/Blocks';
import type { Page, MainMenu } from '../payload-types';
const Page: React.FC<{
mainMenu: MainMenu
page: Page
}> = (props) => {
const {
page: {
layout,
},
} = props;
return (
<React.Fragment>
<Blocks blocks={layout} />
</React.Fragment>
)
}
export default Page;
export const getStaticProps: GetStaticProps = async (
context: GetStaticPropsContext,
) => {
const { params } = context;
const slug = params?.slug || 'home';
const pageQuery = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/pages?where[slug][equals]=${slug}`).then(
(res) => res.json(),
);
return {
props: {
page: pageQuery.docs[0],
},
};
};
export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {
const pagesQuery: { docs: Page[] } = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/pages?limit=100`).then(
(res) => res.json(),
);
return {
paths: pagesQuery.docs.map((page) => ({
params: {
slug: page.slug,
},
})),
fallback: 'blocking',
};
};

65
examples/form-builder/nextjs/pages/_app.tsx
View File

@@ -1,65 +0,0 @@
import App, { AppContext, AppProps } from 'next/app';
import { ModalContainer, ModalProvider } from '@faceless-ui/modal';
import React from 'react';
import { Header } from '../components/Header';
import { GlobalsProvider } from '../providers/Globals';
import { CloseModalOnRouteChange } from '../components/CloseModalOnRouteChange';
import { MainMenu } from "../payload-types";
import '../css/app.scss';
export interface IGlobals {
mainMenu: MainMenu,
}
export const getAllGlobals = async (): Promise<IGlobals> => {
const [
mainMenu,
] = await Promise.all([
fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/globals/main-menu?depth=1`).then((res) => res.json()),
]);
return {
mainMenu,
}
}
const PayloadApp = (appProps: AppProps & {
globals: IGlobals,
}): React.ReactElement => {
const {
Component,
pageProps,
globals,
} = appProps;
return (
<React.Fragment>
<GlobalsProvider {...globals}>
<ModalProvider
classPrefix="form"
transTime={0}
zIndex="var(--modal-z-index)"
>
<CloseModalOnRouteChange />
<Header />
<Component {...pageProps} />
<ModalContainer />
</ModalProvider>
</GlobalsProvider>
</React.Fragment>
)
}
PayloadApp.getInitialProps = async (appContext: AppContext) => {
const appProps = await App.getInitialProps(appContext);
const globals = await getAllGlobals();
return {
...appProps,
globals
};
};
export default PayloadApp

9
examples/form-builder/nextjs/pages/index.tsx
View File

@@ -1,9 +0,0 @@
import { GetStaticProps } from 'next';
import Page, { getStaticProps as sharedGetStaticProps } from './[slug]';
export default Page;
export const getStaticProps: GetStaticProps = async (ctx) => {
const func = sharedGetStaticProps.bind(this);
return func(ctx);
};

202
examples/form-builder/nextjs/payload-types.ts
View File

@@ -1,202 +0,0 @@
/* tslint:disable */
/**
* This file was automatically generated by Payload.
* DO NOT MODIFY IT BY HAND. Instead, modify your source Payload config,
* and re-run `payload generate:types` to regenerate this file.
*/
export interface Config {}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "main-menu".
*/
export interface MainMenu {
id: string;
navItems: {
link: {
type?: 'reference' | 'custom';
newTab?: boolean;
reference: {
value: string | Page;
relationTo: 'pages';
};
url: string;
label: string;
};
id?: string;
}[];
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "pages".
*/
export interface Page {
id: string;
title: string;
layout: {
form: string | Form;
enableIntro?: boolean;
introContent: {
[k: string]: unknown;
}[];
id?: string;
blockName?: string;
blockType: 'formBlock';
}[];
slug?: string;
_status?: 'draft' | 'published';
createdAt: string;
updatedAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "forms".
*/
export interface Form {
id: string;
title: string;
fields: (
| {
name: string;
label?: string;
width?: number;
defaultValue?: string;
required?: boolean;
id?: string;
blockName?: string;
blockType: 'text';
}
| {
name: string;
label?: string;
width?: number;
defaultValue?: string;
required?: boolean;
id?: string;
blockName?: string;
blockType: 'textarea';
}
| {
name: string;
label?: string;
width?: number;
defaultValue?: string;
options: {
label: string;
value: string;
id?: string;
}[];
required?: boolean;
id?: string;
blockName?: string;
blockType: 'select';
}
| {
name: string;
label?: string;
width?: number;
required?: boolean;
id?: string;
blockName?: string;
blockType: 'email';
}
| {
name: string;
label?: string;
width?: number;
required?: boolean;
id?: string;
blockName?: string;
blockType: 'state';
}
| {
name: string;
label?: string;
width?: number;
required?: boolean;
id?: string;
blockName?: string;
blockType: 'country';
}
| {
name: string;
label?: string;
width?: number;
defaultValue?: number;
required?: boolean;
id?: string;
blockName?: string;
blockType: 'number';
}
| {
name: string;
label?: string;
width?: number;
required?: boolean;
defaultValue?: boolean;
id?: string;
blockName?: string;
blockType: 'checkbox';
}
| {
message?: {
[k: string]: unknown;
}[];
id?: string;
blockName?: string;
blockType: 'message';
}
)[];
submitButtonLabel?: string;
confirmationType?: 'message' | 'redirect';
confirmationMessage: {
[k: string]: unknown;
}[];
redirect: {
url: string;
};
emails: {
emailTo: string;
bcc?: string;
replyTo?: string;
replyToName?: string;
emailFrom?: string;
emailFromName?: string;
subject: string;
message?: {
[k: string]: unknown;
}[];
id?: string;
}[];
createdAt: string;
updatedAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "users".
*/
export interface User {
id: string;
email?: string;
resetPasswordToken?: string;
resetPasswordExpiration?: string;
loginAttempts?: number;
lockUntil?: string;
createdAt: string;
updatedAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "form-submissions".
*/
export interface FormSubmission {
id: string;
form: string | Form;
submissionData: {
field: string;
value: string;
id?: string;
}[];
createdAt: string;
updatedAt: string;
}

4
examples/form-builder/nextjs/utilities/canUseDOM.ts
View File

@@ -1,4 +0,0 @@
export default !!(
(typeof window !== 'undefined'
&& window.document && window.document.createElement)
);

Some files were not shown because too many files have changed in this diff Show More