@slicemachine/adapter-next 0.3.14-dev-next-release.5 → 0.3.14-dev-next-release.7

package/src/plugin.ts

@@ -29,6 +29,7 @@ import { documentationRead } from "./hooks/documentation-read";
 import { projectInit } from "./hooks/project-init";
 import { sliceCreate } from "./hooks/slice-create";
 import { sliceSimulatorSetupRead } from "./hooks/sliceSimulator-setup-read";
+import { sliceTemplateLibraryRead } from "./hooks/sliceTemplateLibrary-read";
 import { snippetRead } from "./hooks/snippet-read";
 
 export const plugin = defineSliceMachinePlugin<PluginOptions>({
@@ -155,6 +156,12 @@ export const plugin = defineSliceMachinePlugin<PluginOptions>({
 			});
 		});
 
+		////////////////////////////////////////////////////////////////
+		// slice-template-library:*
+		////////////////////////////////////////////////////////////////
+
+		hook("slice-template-library:read", sliceTemplateLibraryRead);
+
 		////////////////////////////////////////////////////////////////
 		// custom-type:*
 		////////////////////////////////////////////////////////////////

package/src/sliceTemplates/CallToAction/index.ts

@@ -0,0 +1,561 @@
+import type { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
+
+import { pascalCase } from "../../lib/pascalCase";
+
+import { stripIndent } from "common-tags";
+
+export const mocks: SharedSliceContent[] = [
+	{
+		__TYPE__: "SharedSliceContent",
+		variation: "default",
+		primary: {
+			title: {
+				__TYPE__: "StructuredTextContent",
+				value: [
+					{
+						type: "heading1",
+						content: {
+							text: "Collector Slices kit",
+							spans: [],
+						},
+						direction: "ltr",
+					},
+				],
+			},
+			paragraph: {
+				__TYPE__: "StructuredTextContent",
+				value: [
+					{
+						type: "paragraph",
+						content: {
+							text: "It’s very easy to create stylish and beautiful prototypes for your future projects, both graphical and dynamic.",
+							spans: [],
+						},
+						direction: "ltr",
+					},
+				],
+			},
+			buttonLink: {
+				__TYPE__: "LinkContent",
+				value: {
+					__TYPE__: "ExternalLink",
+					url: "https://twitter.com/prismicio",
+				},
+			},
+			buttonlabel: {
+				__TYPE__: "FieldContent",
+				type: "Text",
+				value: "Click here",
+			},
+			image: {
+				origin: {
+					id: "9aOswReDKPo",
+					url: "https://images.unsplash.com/photo-1523049673857-eb18f1d7b578?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwxOXx8ZnJ1aXR8ZW58MHx8fHwxNjkzMjUxNTMxfDA&ixlib=rb-4.0.3&q=85",
+					width: 8040,
+					height: 6024,
+				},
+				url: "https://images.unsplash.com/photo-1523049673857-eb18f1d7b578?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwxOXx8ZnJ1aXR8ZW58MHx8fHwxNjkzMjUxNTMxfDA&ixlib=rb-4.0.3&q=85",
+				width: 8040,
+				height: 6024,
+				edit: {
+					background: "transparent",
+					zoom: 1,
+					crop: {
+						x: 0,
+						y: 0,
+					},
+				},
+				credits: null,
+				alt: "Example Image",
+				__TYPE__: "ImageContent",
+				thumbnails: {},
+			},
+			buttonLabel: {
+				__TYPE__: "FieldContent",
+				type: "Text",
+				value: "Learn more",
+			},
+		},
+		items: [],
+	},
+	{
+		__TYPE__: "SharedSliceContent",
+		variation: "alignLeft",
+		primary: {
+			image: {
+				origin: {
+					id: "euqiHwS38Rw",
+					url: "https://images.unsplash.com/photo-1595475207225-428b62bda831?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwyMHx8ZnJ1aXR8ZW58MHx8fHwxNjkzMjUxNTMxfDA&ixlib=rb-4.0.3&q=85",
+					width: 2500,
+					height: 2500,
+				},
+				url: "https://images.unsplash.com/photo-1595475207225-428b62bda831?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwyMHx8ZnJ1aXR8ZW58MHx8fHwxNjkzMjUxNTMxfDA&ixlib=rb-4.0.3&q=85",
+				width: 2500,
+				height: 2500,
+				edit: {
+					background: "transparent",
+					zoom: 1,
+					crop: {
+						x: 0,
+						y: 0,
+					},
+				},
+				credits: null,
+				alt: "Example Image",
+				__TYPE__: "ImageContent",
+				thumbnails: {},
+			},
+			title: {
+				__TYPE__: "StructuredTextContent",
+				value: [
+					{
+						type: "heading1",
+						content: {
+							text: "Collector Slices kit",
+							spans: [],
+						},
+						direction: "ltr",
+					},
+				],
+			},
+			paragraph: {
+				__TYPE__: "StructuredTextContent",
+				value: [
+					{
+						type: "paragraph",
+						content: {
+							text: "It’s very easy to create stylish and beautiful prototypes for your future projects, both graphical and dynamic.",
+							spans: [],
+						},
+						direction: "ltr",
+					},
+				],
+			},
+			buttonLink: {
+				__TYPE__: "LinkContent",
+				value: {
+					__TYPE__: "ExternalLink",
+					url: "https://prismic.io",
+				},
+			},
+			buttonLabel: {
+				__TYPE__: "FieldContent",
+				type: "Text",
+				value: "Learn more!",
+			},
+		},
+		items: [
+			{
+				__TYPE__: "GroupItemContent",
+				value: [],
+			},
+		],
+	},
+];
+
+export const createComponentContents = (
+	model: SharedSlice,
+	isTypeScriptProject: boolean,
+): string => {
+	const pascalName = pascalCase(model.name);
+
+	if (isTypeScriptProject) {
+		return stripIndent`
+			import { Content, isFilled } from "@prismicio/client";	
+			import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
+			import {
+				PrismicRichText,
+				PrismicText,
+				SliceComponentProps
+			} from "@prismicio/react";
+			
+			/**
+			 * Props for \`${pascalName}\`.
+			 */
+			export type ${pascalName}Props = SliceComponentProps<Content.${pascalName}Slice>;
+			
+			/**
+			 * Component for "${model.name}" Slices.
+			 */
+			const ${pascalName} = ({ slice }: ${pascalName}Props): JSX.Element => {
+				const alignment = slice.variation === "alignLeft" ? "left" : "center";
+			
+				return (
+					<section
+						data-slice-type={slice.slice_type}
+						data-slice-variation={slice.variation}
+						className="es-bounded es-call-to-action"
+					>
+						<div className="es-bounded__content es-call-to-action__content">
+							{isFilled.image(slice.primary.image) && (
+								<PrismicNextImage
+									className="es-call-to-action__image"
+									field={slice.primary.image}
+								/>
+							)}
+							<div className="es-call-to-action__content">
+								{isFilled.richText(slice.primary.title) && (
+									<h2 className="es-call-to-action__content__heading">
+										<PrismicText field={slice.primary.title} />
+									</h2>
+								)}
+								{isFilled.richText(slice.primary.paragraph) && (
+									<div className="es-call-to-action__content__paragraph">
+										<PrismicRichText field={slice.primary.paragraph} />
+									</div>
+								)}
+							</div>
+							{isFilled.link(slice.primary.buttonLink) && (
+								<PrismicNextLink
+									className="es-call-to-action__button"
+									field={slice.primary.buttonLink}
+								>
+									{slice.primary.buttonLabel || "Learn more…"}
+								</PrismicNextLink>
+							)}
+						</div>
+						<style>
+							{\`
+						.es-bounded {
+							padding: 8vw 2rem;
+						}
+						
+						.es-bounded__content {
+							margin-left: auto;
+							margin-right: auto;
+						}
+						
+						@media screen and (min-width: 640px) {
+							.es-bounded__content {
+								max-width: 90%;
+							}
+						}
+						
+						@media screen and (min-width: 896px) {
+							.es-bounded__content {
+								max-width: 80%;
+							}
+						}
+						
+						@media screen and (min-width: 1280px) {
+							.es-bounded__content {
+								max-width: 75%;
+							}
+						}
+						
+						.es-call-to-action {
+							background-color: #fff;
+							color: #333;
+						}
+						
+						.es-call-to-action__content {
+							display: grid;
+							gap: 2rem;
+						}
+						
+						.es-call-to-action__image {
+							max-width: 14rem;
+							height: auto;
+							width: auto;
+							justify-self: \${alignment};
+						}
+						
+						.es-call-to-action__content {
+							display: grid;
+							gap: 1rem;
+							justify-items: \${alignment};
+						}
+						
+						.es-call-to-action__content__heading {
+							font-size: 2rem;
+							font-weight: 700;
+							text-align: \${alignment};
+						}
+						
+						.es-call-to-action__content__paragraph {
+							font-size: 1.15rem;
+							max-width: 38rem;
+							text-align: \${alignment};
+						}
+						
+						.es-call-to-action__button {
+							justify-self: \${alignment};
+							border-radius: 0.25rem;
+							display: inline-block;
+							font-size: 0.875rem;
+							line-height: 1.3;
+							padding: 1rem 2.625rem;
+							text-align: \${alignment};
+							transition: background-color 100ms linear;
+							background-color: #16745f;
+							color: #fff;
+						}
+						
+						.es-call-to-action__button:hover {
+							background-color: #0d5e4c;
+						}
+					\`}
+						</style>
+					</section>
+				);
+			};
+			
+			export default ${pascalName};
+		`;
+	}
+
+	return stripIndent`
+			import { isFilled } from "@prismicio/client";
+			import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
+			import {
+				PrismicRichText,
+				PrismicText,
+				SliceComponentProps
+			} from "@prismicio/react";
+			
+			/**
+			 * @typedef {import("@prismicio/client").Content.${pascalName}Slice} ${pascalName}Slice
+			 * @typedef {import("@prismicio/react").SliceComponentProps<${pascalName}Slice>} ${pascalName}Props
+			 * @param {${pascalName}Props}
+			 */
+			const ${pascalName} = ({ slice }) => {
+				const alignment = slice.variation === "alignLeft" ? "left" : "center";
+			
+				return (
+					<section
+						data-slice-type={slice.slice_type}
+						data-slice-variation={slice.variation}
+						className="es-bounded es-call-to-action"
+					>
+						<div className="es-bounded__content es-call-to-action__content">
+							{isFilled.image(slice.primary.image) && (
+								<PrismicNextImage
+									className="es-call-to-action__image"
+									field={slice.primary.image}
+								/>
+							)}
+							<div className="es-call-to-action__content">
+								{isFilled.richText(slice.primary.title) && (
+									<h2 className="es-call-to-action__content__heading">
+										<PrismicText field={slice.primary.title} />
+									</h2>
+								)}
+								{isFilled.richText(slice.primary.paragraph) && (
+									<div className="es-call-to-action__content__paragraph">
+										<PrismicRichText field={slice.primary.paragraph} />
+									</div>
+								)}
+							</div>
+							{isFilled.link(slice.primary.buttonLink) && (
+								<PrismicNextLink
+									className="es-call-to-action__button"
+									field={slice.primary.buttonLink}
+								>
+									{slice.primary.buttonLabel || "Learn more…"}
+								</PrismicNextLink>
+							)}
+						</div>
+						<style>
+							{\`
+						.es-bounded {
+							padding: 8vw 2rem;
+						}
+						
+						.es-bounded__content {
+							margin-left: auto;
+							margin-right: auto;
+						}
+						
+						@media screen and (min-width: 640px) {
+							.es-bounded__content {
+								max-width: 90%;
+							}
+						}
+						
+						@media screen and (min-width: 896px) {
+							.es-bounded__content {
+								max-width: 80%;
+							}
+						}
+						
+						@media screen and (min-width: 1280px) {
+							.es-bounded__content {
+								max-width: 75%;
+							}
+						}
+						
+						.es-call-to-action {
+							background-color: #fff;
+							color: #333;
+						}
+						
+						.es-call-to-action__content {
+							display: grid;
+							gap: 2rem;
+						}
+						
+						.es-call-to-action__image {
+							max-width: 14rem;
+							height: auto;
+							width: auto;
+							justify-self: \${alignment};
+						}
+						
+						.es-call-to-action__content {
+							display: grid;
+							gap: 1rem;
+							justify-items: \${alignment};
+						}
+						
+						.es-call-to-action__content__heading {
+							font-size: 2rem;
+							font-weight: 700;
+							text-align: \${alignment};
+						}
+						
+						.es-call-to-action__content__paragraph {
+							font-size: 1.15rem;
+							max-width: 38rem;
+							text-align: \${alignment};
+						}
+						
+						.es-call-to-action__button {
+							justify-self: \${alignment};
+							border-radius: 0.25rem;
+							display: inline-block;
+							font-size: 0.875rem;
+							line-height: 1.3;
+							padding: 1rem 2.625rem;
+							text-align: \${alignment};
+							transition: background-color 100ms linear;
+							background-color: #16745f;
+							color: #fff;
+						}
+						
+						.es-call-to-action__button:hover {
+							background-color: #0d5e4c;
+						}
+					\`}
+						</style>
+					</section>
+				);
+			};
+			
+			export default ${pascalName};
+		`;
+};
+
+export const model: SharedSlice = {
+	id: "call_to_action",
+	type: "SharedSlice",
+	name: "CallToAction",
+	description: "CallToAction",
+	variations: [
+		{
+			id: "default",
+			name: "Default",
+			docURL: "...",
+			version: "initial",
+			description: "Default",
+			imageUrl: "",
+			primary: {
+				image: {
+					type: "Image",
+					config: { label: "Image", constraint: {}, thumbnails: [] },
+				},
+				title: {
+					type: "StructuredText",
+					config: {
+						label: "title",
+						placeholder: "",
+						allowTargetBlank: true,
+						single: "heading1,heading2,heading3,heading4,heading5,heading6",
+					},
+				},
+				paragraph: {
+					type: "StructuredText",
+					config: {
+						label: "paragraph",
+						placeholder: "",
+						allowTargetBlank: true,
+						single:
+							"paragraph,preformatted,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl",
+					},
+				},
+				buttonLink: {
+					type: "Link",
+					config: {
+						label: "buttonLink",
+						placeholder: "Redirect URL for CTA button",
+						allowTargetBlank: true,
+						select: null,
+					},
+				},
+				buttonLabel: {
+					type: "Text",
+					config: {
+						label: "buttonLabel",
+						placeholder: "Label for CTA button",
+					},
+				},
+			},
+			items: {},
+		},
+		{
+			id: "alignLeft",
+			name: "AlignLeft",
+			docURL: "...",
+			version: "initial",
+			description: "Default",
+			imageUrl: "",
+			primary: {
+				image: {
+					type: "Image",
+					config: { label: "Image", constraint: {}, thumbnails: [] },
+				},
+				title: {
+					type: "StructuredText",
+					config: {
+						label: "title",
+						placeholder: "",
+						allowTargetBlank: true,
+						single: "heading1,heading2,heading3,heading4,heading5,heading6",
+					},
+				},
+				paragraph: {
+					type: "StructuredText",
+					config: {
+						label: "paragraph",
+						placeholder: "",
+						allowTargetBlank: true,
+						single:
+							"paragraph,preformatted,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl",
+					},
+				},
+				buttonLink: {
+					type: "Link",
+					config: {
+						label: "buttonLink",
+						placeholder: "Redirect URL for CTA button",
+						allowTargetBlank: true,
+						select: null,
+					},
+				},
+				buttonLabel: {
+					type: "Text",
+					config: {
+						label: "buttonLabel",
+						placeholder: "Label for CTA button",
+					},
+				},
+			},
+			items: {},
+		},
+	],
+};
+
+export const screenshotPaths = {
+	default: "CallToAction/screenshot-default.png",
+	alignLeft: "CallToAction/screenshot-alignLeft.png",
+};