@slicemachine/adapter-next 0.3.14-dev-next-release.2 → 0.3.14-dev-slices-templates-feature.0

package/src/hooks/slice-template-library-read.ts

@@ -0,0 +1,46 @@
+import fs from "node:fs";
+import path from "node:path";
+
+import type {
+	SliceTemplateLibraryReadHook,
+	SliceTemplateLibraryReadHookData,
+} from "@slicemachine/plugin-kit";
+
+import type { PluginOptions } from "../types";
+
+import * as CallToAction from "../sliceTemplates/CallToAction";
+
+const initialTemplates = [CallToAction];
+
+export const sliceTemplateLibraryRead: SliceTemplateLibraryReadHook<
+	PluginOptions
+> = async ({
+	templateIds,
+	isTypeScriptProject,
+}: SliceTemplateLibraryReadHookData) => {
+	const templates =
+		templateIds && templateIds.length
+			? initialTemplates.filter((t) => templateIds?.includes(t.model.id))
+			: initialTemplates;
+
+	return {
+		templates: templates.map((t) => {
+			const { mocks, model, createComponentContents, screenshotPaths } = t;
+
+			return {
+				mocks,
+				model,
+				componentContents: createComponentContents(isTypeScriptProject),
+				screenshots: Object.entries(screenshotPaths).reduce(
+					(acc, curr) => ({
+						...acc,
+						[curr[0]]: fs.readFileSync(
+							path.join(globalThis.__dirname, curr[1]),
+						),
+					}),
+					{},
+				),
+			};
+		}),
+	};
+};

package/src/index.ts

@@ -1,3 +1,8 @@
+import path from "path";
+
+const rootFile = import.meta.url.slice("file://".length);
+globalThis.__dirname = path.dirname(rootFile);
+
 import { plugin } from "./plugin";
 export default plugin;
 

package/src/plugin.ts

@@ -30,6 +30,7 @@ import { projectInit } from "./hooks/project-init";
 import { sliceCreate } from "./hooks/slice-create";
 import { sliceSimulatorSetupRead } from "./hooks/sliceSimulator-setup-read";
 import { snippetRead } from "./hooks/snippet-read";
+import { sliceTemplateLibraryRead } from "./hooks/slice-template-library-read";
 
 export const plugin = defineSliceMachinePlugin<PluginOptions>({
 	meta: {
@@ -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,271 @@
+import type { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
+
+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: null,
+				__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: null,
+				__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 = (
+	isTypeScriptProject: boolean,
+): string => {
+	return isTypeScriptProject ? "t = true" : "t = false";
+};
+
+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"].join("/"),
+	alignLeft: ["CallToAction", "screenshot-alignLeft.png"].join("/"),
+};