kofi-stack-template-generator 2.1.37 → 2.1.38

package/templates/marketing/payload/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/utilities/ui"
+import type * as React from "react"
+
+const Input: React.FC<
+	{
+		ref?: React.Ref<HTMLInputElement>
+	} & React.InputHTMLAttributes<HTMLInputElement>
+> = ({ type, className, ref, ...props }) => {
+	return (
+		<input
+			className={cn(
+				"flex h-10 w-full rounded border border-border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			ref={ref}
+			type={type}
+			{...props}
+		/>
+	)
+}
+
+export { Input }

package/templates/marketing/payload/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { cn } from "@/utilities/ui"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { type VariantProps, cva } from "class-variance-authority"
+import type * as React from "react"
+
+const labelVariants = cva(
+	"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+)
+
+const Label: React.FC<
+	{ ref?: React.Ref<HTMLLabelElement> } & React.ComponentProps<typeof LabelPrimitive.Root> &
+		VariantProps<typeof labelVariants>
+> = ({ className, ref, ...props }) => (
+	<LabelPrimitive.Root className={cn(labelVariants(), className)} ref={ref} {...props} />
+)
+
+export { Label }

package/templates/marketing/payload/src/components/ui/pagination.tsx

@@ -0,0 +1,92 @@
+import type { ButtonProps } from "@/components/ui/button"
+
+import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/utilities/ui"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import type * as React from "react"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+	<nav
+		aria-label="pagination"
+		className={cn("mx-auto flex w-full justify-center", className)}
+		role="navigation"
+		{...props}
+	/>
+)
+
+const PaginationContent: React.FC<
+	{ ref?: React.Ref<HTMLUListElement> } & React.HTMLAttributes<HTMLUListElement>
+> = ({ className, ref, ...props }) => (
+	<ul className={cn("flex flex-row items-center gap-1", className)} ref={ref} {...props} />
+)
+
+const PaginationItem: React.FC<
+	{ ref?: React.Ref<HTMLLIElement> } & React.HTMLAttributes<HTMLLIElement>
+> = ({ className, ref, ...props }) => <li className={cn("", className)} ref={ref} {...props} />
+
+type PaginationLinkProps = {
+	isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+	React.ComponentProps<"button">
+
+const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
+	<button
+		aria-current={isActive ? "page" : undefined}
+		className={cn(
+			buttonVariants({
+				size,
+				variant: isActive ? "outline" : "ghost",
+			}),
+			className,
+		)}
+		{...props}
+	/>
+)
+
+const PaginationPrevious = ({
+	className,
+	...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+	<PaginationLink
+		aria-label="Go to previous page"
+		className={cn("gap-1 pl-2.5", className)}
+		size="default"
+		{...props}
+	>
+		<ChevronLeft className="h-4 w-4" />
+		<span>Previous</span>
+	</PaginationLink>
+)
+
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+	<PaginationLink
+		aria-label="Go to next page"
+		className={cn("gap-1 pr-2.5", className)}
+		size="default"
+		{...props}
+	>
+		<span>Next</span>
+		<ChevronRight className="h-4 w-4" />
+	</PaginationLink>
+)
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+	<span
+		aria-hidden
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		{...props}
+	>
+		<MoreHorizontal className="h-4 w-4" />
+		<span className="sr-only">More pages</span>
+	</span>
+)
+
+export {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+}

package/templates/marketing/payload/src/components/ui/select.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import { cn } from "@/utilities/ui"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import type * as React from "react"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger: React.FC<
+	{ ref?: React.Ref<HTMLButtonElement> } & React.ComponentProps<typeof SelectPrimitive.Trigger>
+> = ({ children, className, ref, ...props }) => (
+	<SelectPrimitive.Trigger
+		className={cn(
+			"flex h-10 w-full items-center justify-between rounded border border-input bg-background px-3 py-2 text-inherit ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			className,
+		)}
+		ref={ref}
+		{...props}
+	>
+		{children}
+		<SelectPrimitive.Icon asChild>
+			<ChevronDown className="h-4 w-4 opacity-50" />
+		</SelectPrimitive.Icon>
+	</SelectPrimitive.Trigger>
+)
+
+const SelectScrollUpButton: React.FC<
+	{ ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>
+> = ({ className, ref, ...props }) => (
+	<SelectPrimitive.ScrollUpButton
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
+		ref={ref}
+		{...props}
+	>
+		<ChevronUp className="h-4 w-4" />
+	</SelectPrimitive.ScrollUpButton>
+)
+
+const SelectScrollDownButton: React.FC<
+	{ ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<
+		typeof SelectPrimitive.ScrollDownButton
+	>
+> = ({ className, ref, ...props }) => (
+	<SelectPrimitive.ScrollDownButton
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
+		ref={ref}
+		{...props}
+	>
+		<ChevronDown className="h-4 w-4" />
+	</SelectPrimitive.ScrollDownButton>
+)
+
+const SelectContent: React.FC<
+	{
+		ref?: React.Ref<HTMLDivElement>
+	} & React.ComponentProps<typeof SelectPrimitive.Content>
+> = ({ children, className, position = "popper", ref, ...props }) => (
+	<SelectPrimitive.Portal>
+		<SelectPrimitive.Content
+			className={cn(
+				"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded border bg-card text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				position === "popper" &&
+					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+				className,
+			)}
+			position={position}
+			ref={ref}
+			{...props}
+		>
+			<SelectScrollUpButton />
+			<SelectPrimitive.Viewport
+				className={cn(
+					"p-1",
+					position === "popper" &&
+						"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+				)}
+			>
+				{children}
+			</SelectPrimitive.Viewport>
+			<SelectScrollDownButton />
+		</SelectPrimitive.Content>
+	</SelectPrimitive.Portal>
+)
+
+const SelectLabel: React.FC<
+	{ ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.Label>
+> = ({ className, ref, ...props }) => (
+	<SelectPrimitive.Label
+		className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+		ref={ref}
+		{...props}
+	/>
+)
+
+const SelectItem: React.FC<
+	{ ref?: React.Ref<HTMLDivElement>; value: string } & React.ComponentProps<
+		typeof SelectPrimitive.Item
+	>
+> = ({ children, className, ref, ...props }) => (
+	<SelectPrimitive.Item
+		className={cn(
+			"relative flex w-full cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		ref={ref}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<SelectPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</SelectPrimitive.ItemIndicator>
+		</span>
+
+		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+	</SelectPrimitive.Item>
+)
+
+const SelectSeparator: React.FC<
+	{ ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.Separator>
+> = ({ className, ref, ...props }) => (
+	<SelectPrimitive.Separator
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		ref={ref}
+		{...props}
+	/>
+)
+
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+}

package/templates/marketing/payload/src/components/ui/textarea.tsx

@@ -0,0 +1,21 @@
+import { cn } from "@/utilities/ui"
+import type * as React from "react"
+
+const Textarea: React.FC<
+	{
+		ref?: React.Ref<HTMLTextAreaElement>
+	} & React.TextareaHTMLAttributes<HTMLTextAreaElement>
+> = ({ className, ref, ...props }) => {
+	return (
+		<textarea
+			className={cn(
+				"flex min-h-[80px] w-full rounded border border-border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	)
+}
+
+export { Textarea }

package/templates/marketing/payload/src/endpoints/seed/contact-form.ts

@@ -0,0 +1,111 @@
+import type { RequiredDataFromCollectionSlug } from "payload"
+
+export const contactForm: RequiredDataFromCollectionSlug<"forms"> = {
+	confirmationMessage: {
+		root: {
+			type: "root",
+			children: [
+				{
+					type: "heading",
+					children: [
+						{
+							type: "text",
+							detail: 0,
+							format: 0,
+							mode: "normal",
+							style: "",
+							text: "The contact form has been submitted successfully.",
+							version: 1,
+						},
+					],
+					direction: "ltr",
+					format: "",
+					indent: 0,
+					tag: "h2",
+					version: 1,
+				},
+			],
+			direction: "ltr",
+			format: "",
+			indent: 0,
+			version: 1,
+		},
+	},
+	confirmationType: "message",
+	createdAt: "2023-01-12T21:47:41.374Z",
+	emails: [
+		{
+			emailFrom: '"Payload" \u003Cdemo@payloadcms.com\u003E',
+			emailTo: "{{email}}",
+			message: {
+				root: {
+					type: "root",
+					children: [
+						{
+							type: "paragraph",
+							children: [
+								{
+									type: "text",
+									detail: 0,
+									format: 0,
+									mode: "normal",
+									style: "",
+									text: "Your contact form submission was successfully received.",
+									version: 1,
+								},
+							],
+							direction: "ltr",
+							format: "",
+							indent: 0,
+							textFormat: 0,
+							version: 1,
+						},
+					],
+					direction: "ltr",
+					format: "",
+					indent: 0,
+					version: 1,
+				},
+			},
+			subject: "You've received a new message.",
+		},
+	],
+	fields: [
+		{
+			name: "full-name",
+			blockName: "full-name",
+			blockType: "text",
+			label: "Full Name",
+			required: true,
+			width: 100,
+		},
+		{
+			name: "email",
+			blockName: "email",
+			blockType: "email",
+			label: "Email",
+			required: true,
+			width: 100,
+		},
+		{
+			name: "phone",
+			blockName: "phone",
+			blockType: "number",
+			label: "Phone",
+			required: false,
+			width: 100,
+		},
+		{
+			name: "message",
+			blockName: "message",
+			blockType: "textarea",
+			label: "Message",
+			required: true,
+			width: 100,
+		},
+	],
+	redirect: undefined,
+	submitButtonLabel: "Submit",
+	title: "Contact Form",
+	updatedAt: "2023-01-12T21:47:41.374Z",
+}

package/templates/marketing/payload/src/endpoints/seed/contact-page.ts

@@ -0,0 +1,56 @@
+import type { Form } from "@/payload-types"
+import type { RequiredDataFromCollectionSlug } from "payload"
+
+type ContactArgs = {
+	contactForm: Form
+}
+
+export const contact: (args: ContactArgs) => RequiredDataFromCollectionSlug<"pages"> = ({
+	contactForm,
+}) => {
+	return {
+		slug: "contact",
+		_status: "published",
+		hero: {
+			type: "none",
+		},
+		layout: [
+			{
+				blockType: "formBlock",
+				enableIntro: true,
+				form: contactForm,
+				introContent: {
+					root: {
+						type: "root",
+						children: [
+							{
+								type: "heading",
+								children: [
+									{
+										type: "text",
+										detail: 0,
+										format: 0,
+										mode: "normal",
+										style: "",
+										text: "Example contact form:",
+										version: 1,
+									},
+								],
+								direction: "ltr",
+								format: "",
+								indent: 0,
+								tag: "h3",
+								version: 1,
+							},
+						],
+						direction: "ltr",
+						format: "",
+						indent: 0,
+						version: 1,
+					},
+				},
+			},
+		],
+		title: "Contact",
+	}
+}