@slicemachine/adapter-next 0.3.18-dev-next-release.2 → 0.3.18-dev-next-release.4

package/src/plugin.ts

@@ -1,3 +1,6 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
 import { defineSliceMachinePlugin } from "@slicemachine/plugin-kit";
 import {
 	deleteCustomTypeDirectory,
@@ -10,6 +13,7 @@ import {
 	readSliceFile,
 	readSliceLibrary,
 	readSliceModel,
+	readSliceTemplateLibrary,
 	renameCustomType,
 	renameSlice,
 	upsertGlobalTypeScriptTypes,
@@ -29,9 +33,14 @@ 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";
 
+// Slice Template Library
+import * as Hero from "./sliceTemplates/Hero";
+import * as CallToAction from "./sliceTemplates/CallToAction";
+import * as AlternateGrid from "./sliceTemplates/AlternateGrid";
+import * as CustomerLogos from "./sliceTemplates/CustomerLogos";
+
 export const plugin = defineSliceMachinePlugin<PluginOptions>({
 	meta: {
 		name: pkgName,
@@ -160,7 +169,18 @@ export const plugin = defineSliceMachinePlugin<PluginOptions>({
 		// slice-template-library:*
 		////////////////////////////////////////////////////////////////
 
-		hook("slice-template-library:read", sliceTemplateLibraryRead);
+		hook("slice-template-library:read", async (data, context) => {
+			return await readSliceTemplateLibrary({
+				...data,
+				...context,
+				dirName: path.dirname(fileURLToPath(new URL(import.meta.url))),
+				templates: [Hero, CustomerLogos, AlternateGrid, CallToAction],
+				componentFileNames: {
+					js: "javascript.jsx",
+					ts: "javascript.tsx",
+				},
+			});
+		});
 
 		////////////////////////////////////////////////////////////////
 		// custom-type:*

package/src/sliceTemplates/AlternateGrid/index.ts

@@ -1,7 +1,10 @@
 import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
-import { stripIndent } from "common-tags";
-import { pascalCase } from "../../lib/pascalCase";
+
+export const screenshotPaths = {
+	default: "AlternateGrid/screenshot-default.png",
+	imageRight: "AlternateGrid/screenshot-imageRight.png",
+};
 
 export const mocks: SharedSliceContent[] = [
 	{
@@ -436,511 +439,3 @@ export const model: SharedSlice = {
 		},
 	],
 };
-
-export const screenshotPaths = {
-	default: "AlternateGrid/screenshot-default.png",
-	imageRight: "AlternateGrid/screenshot-imageRight.png",
-};
-
-export const createComponentContents = (
-	model: SharedSlice,
-	isTypeScriptProject: boolean,
-): string => {
-	const pascalName = pascalCase(model.name);
-	if (isTypeScriptProject) {
-		return stripIndent`
-			import { Content, isFilled } from "@prismicio/client";
-			import { PrismicNextImage } from "@prismicio/next";
-			import { SliceComponentProps, PrismicRichText } 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 => {
-				return (
-					<section
-						data-slice-type={slice.slice_type}
-						data-slice-variation={slice.variation}
-						className="es-bounded es-alternate-grid"
-					>
-						<div
-							className={\`
-								es-bounded__content
-								es-alternate-grid__content
-								\${isFilled.image(slice.primary.image)
-									? "es-alternate-grid__content--with-image" 
-									: ""
-								}
-							\`}
-						>
-							{isFilled.image(slice.primary.image) && (
-								<PrismicNextImage
-									field={slice.primary.image}
-									className={\`
-										es-alternate-grid__image
-										\${slice.variation === "imageRight"
-											? "es-alternate-grid__image--right"
-											: "es-alternate-grid__image--left"
-										}
-									\`}
-								/>
-							)}
-							<div className="es-alternate-grid__primary-content">
-								<div className="es-alternate-grid__primary-content__intro">
-									{isFilled.keyText(slice.primary.eyebrowHeadline) && (
-										<p className="es-alternate-grid__primary-content__intro__eyebrow">
-											{slice.primary.eyebrowHeadline}
-										</p>
-									)}
-									{isFilled.richText(slice.primary.title) && (
-										<div className="es-alternate-grid__primary-content__intro__headline">
-											<PrismicRichText field={slice.primary.title} />
-										</div>
-									)}
-									{isFilled.richText(slice.primary.description) && (
-										<div className="es-alternate-grid__primary-content__intro__description">
-											<PrismicRichText field={slice.primary.description} />
-										</div>
-									)}
-								</div>
-								{slice.items.length > 0 && (
-									<div className="es-alternate-grid__primary-content__items">
-										{slice.items.map((item, i) => (
-											<div key={\`item-\${i + 1}\`} className="es-alternate-grid__item">
-												{isFilled.richText(item.title) && (
-													<div className="es-alternate-grid__item__heading">
-														<PrismicRichText field={item.title} />
-													</div>
-												)}
-												{isFilled.richText(item.description) && (
-													<div className="es-alternate-grid__item__description">
-														<PrismicRichText field={item.description} />
-													</div>
-												)}
-											</div>
-										))}
-									</div>
-								)}
-							</div>
-						</div>
-						<style>
-							{\`
-						.es-bounded {
-							margin: 0px;
-							min-width: 0px;
-							position: relative;
-							padding: 8vw 1.25rem;
-						}
-
-						.es-bounded-content {
-							min-width: 0px;
-							max-width: 90%;
-							margin: 0px auto;
-						}
-
-						.es-alternate-grid {
-							font-family: system-ui, sans-serif;
-							background-color: #fff;
-							color: #333;
-						}
-						
-						.es-alternate-grid__content {
-							display: grid;
-							gap: 1.5rem;
-							grid-auto-flow: dense;
-						}
-						
-						@media (min-width: 640px) {
-							.es-alternate-grid__content--with-image {
-								grid-template-columns: repeat(2, 1fr);
-							}
-						}
-						
-						@media (min-width: 1200px) {
-							.es-alternate-grid__content--with-image {
-								grid-template-columns: repeat(2, 1fr);
-							}
-						}
-						
-						.es-alternate-grid__image {
-							width: auto;
-							height: auto;
-							max-width: 100%;
-							align-self: center;
-						}
-						
-						.es-alternate-grid__image--left {
-							order: 1;
-						}
-	
-						.es-alternate-grid__image--left + div {
-							order: 2;
-						}
-						
-						.es-alternate-grid__image--right{
-							order: 2;
-						}
-	
-						.es-alternate-grid__image--right + div {
-							order: 1;
-						}
-						
-						.es-alternate-grid__primary-content {
-							display: grid;
-							gap: 2rem;
-						}
-						
-						.es-alternate-grid__primary-content__intro {
-							display: grid;
-							gap: 0.5rem;
-						}
-						
-						.es-alternate-grid__primary-content__intro__eyebrow {
-							color: #8592e0;
-							font-size: 1.15rem;
-							font-weight: 500;
-							margin: 0;
-						}
-						
-						.es-alternate-grid__primary-content__intro__headline {
-							font-size: 1.625rem;
-							font-weight: 700;
-						}
-			
-						.es-alternate-grid__primary-content__intro__headline > * {
-							margin: 0;
-						}
-						
-						@media (min-width: 640px) {
-							.es-alternate-grid__primary-content__intro__headline {
-								font-size: 2rem;
-							}
-						}
-						
-						@media (min-width: 1024px) {
-							.es-alternate-grid__primary-content__intro__headline {
-								font-size: 2.5rem;
-							}
-						}
-						
-						@media (min-width: 1200px) {
-							.es-alternate-grid__primary-content__intro__headline {
-								font-size: 2.75rem;
-							}
-						}
-						
-						.es-alternate-grid__primary-content__intro__description {
-							font-size: 1.15rem;
-							max-width: 38rem;
-						}
-			
-						.es-alternate-grid__primary-content__intro__description > p {
-							margin: 0;
-						}
-						
-						@media (min-width: 1200px) {
-							.es-alternate-grid__primary-content__intro__description {
-								font-size: 1.4rem;
-							}
-						}
-						
-						.es-alternate-grid__primary-content__items {
-							display: grid;
-							gap: 2rem;
-						}
-						
-						@media (min-width: 640px) {
-							.es-alternate-grid__primary-content__items {
-								grid-template-columns: repeat(2, 1fr);
-							}
-						}
-						
-						.es-alternate-grid__item {
-							display: grid;
-							align-content: start;
-						}
-						
-						.es-alternate-grid__item__icon {
-							max-height: 3rem;
-						}
-						
-						.es-alternate-grid__item__heading {
-							font-weight: 700;
-							font-size: 1.17rem;
-							margin-top: 0;
-							margin-bottom: .5rem;
-						}
-
-						.es-alternate-grid__item__heading > * {
-							margin: 0;
-						}
-						
-						.es-alternate-grid__item__description {
-							font-size: 0.9rem;
-						}
-						
-						.es-alternate-grid__item__description > * {
-							margin: 0;
-						}
-					\`}
-						</style>
-					</section>
-				);
-			};
-			
-			export default ${pascalName};
-			
-		`;
-	}
-
-	return stripIndent`
-		import { isFilled } from "@prismicio/client";
-		import { PrismicNextImage } from "@prismicio/next";
-		import { PrismicRichText } 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 }) => {
-			return (
-				<section
-					data-slice-type={slice.slice_type}
-					data-slice-variation={slice.variation}
-					className="es-bounded es-alternate-grid"
-				>
-					<div
-						className={\`
-							es-bounded__content
-							es-alternate-grid__content
-							\${isFilled.image(slice.primary.image)
-								? "es-alternate-grid__content--with-image" 
-								: ""
-							}
-						\`}
-					>
-						{isFilled.image(slice.primary.image) && (
-							<PrismicNextImage
-								field={slice.primary.image}
-								className={\`
-									es-alternate-grid__image
-									\${slice.variation === "imageRight"
-										? "es-alternate-grid__image--right"
-										: "es-alternate-grid__image--left"
-									}
-								\`}
-							/>
-						)}
-						<div className="es-alternate-grid__primary-content">
-							<div className="es-alternate-grid__primary-content__intro">
-								{isFilled.keyText(slice.primary.eyebrowHeadline) && (
-									<p className="es-alternate-grid__primary-content__intro__eyebrow">
-										{slice.primary.eyebrowHeadline}
-									</p>
-								)}
-								{isFilled.richText(slice.primary.title) && (
-									<div className="es-alternate-grid__primary-content__intro__headline">
-										<PrismicRichText field={slice.primary.title} />
-									</div>
-								)}
-								{isFilled.richText(slice.primary.description) && (
-									<div className="es-alternate-grid__primary-content__intro__description">
-										<PrismicRichText field={slice.primary.description} />
-									</div>
-								)}
-							</div>
-							{slice.items.length > 0 && (
-								<div className="es-alternate-grid__primary-content__items">
-									{slice.items.map((item, i) => (
-										<div key={\`item-\${i + 1}\`} className="es-alternate-grid__item">
-											{isFilled.richText(item.title) && (
-												<div className="es-alternate-grid__item__heading">
-													<PrismicRichText field={item.title} />
-												</div>
-											)}
-											{isFilled.richText(item.description) && (
-												<div className="es-alternate-grid__item__description">
-													<PrismicRichText field={item.description} />
-												</div>
-											)}
-										</div>
-									))}
-								</div>
-							)}
-						</div>
-					</div>
-					<style>
-						{\`
-					.es-bounded {
-						margin: 0px;
-						min-width: 0px;
-						position: relative;
-						padding: 8vw 1.25rem;
-					}
-
-					.es-bounded-content {
-						min-width: 0px;
-						max-width: 90%;
-						margin: 0px auto;
-					}
-
-					.es-alternate-grid {
-						font-family: system-ui, sans-serif;
-						background-color: #fff;
-						color: #333;
-					}
-					
-					.es-alternate-grid__content {
-						display: grid;
-						gap: 1.5rem;
-						grid-auto-flow: dense;
-					}
-					
-					@media (min-width: 640px) {
-						.es-alternate-grid__content--with-image {
-							grid-template-columns: repeat(2, 1fr);
-						}
-					}
-					
-					@media (min-width: 1200px) {
-						.es-alternate-grid__content--with-image {
-							grid-template-columns: repeat(2, 1fr);
-						}
-					}
-					
-					.es-alternate-grid__image {
-						width: auto;
-						height: auto;
-						max-width: 100%;
-						align-self: center;
-					}
-					
-					.es-alternate-grid__image--left {
-						order: 1;
-					}
-
-					.es-alternate-grid__image--left + div {
-						order: 2;
-					}
-					
-					.es-alternate-grid__image--right{
-						order: 2;
-					}
-
-					.es-alternate-grid__image--right + div {
-						order: 1;
-					}
-
-					.es-alternate-grid__primary-content {
-						display: grid;
-						gap: 2rem;
-					}
-					
-					.es-alternate-grid__primary-content__intro {
-						display: grid;
-						gap: 0.5rem;
-					}
-					
-					.es-alternate-grid__primary-content__intro__eyebrow {
-						color: #8592e0;
-						font-size: 1.15rem;
-						font-weight: 500;
-						margin: 0;
-					}
-					
-					.es-alternate-grid__primary-content__intro__headline {
-						font-size: 1.625rem;
-						font-weight: 700;
-					}
-		
-					.es-alternate-grid__primary-content__intro__headline > * {
-						margin: 0;
-					}
-					
-					@media (min-width: 640px) {
-						.es-alternate-grid__primary-content__intro__headline {
-							font-size: 2rem;
-						}
-					}
-					
-					@media (min-width: 1024px) {
-						.es-alternate-grid__primary-content__intro__headline {
-							font-size: 2.5rem;
-						}
-					}
-					
-					@media (min-width: 1200px) {
-						.es-alternate-grid__primary-content__intro__headline {
-							font-size: 2.75rem;
-						}
-					}
-					
-					.es-alternate-grid__primary-content__intro__description {
-						font-size: 1.15rem;
-						max-width: 38rem;
-					}
-		
-					.es-alternate-grid__primary-content__intro__description > p {
-						margin: 0;
-					}
-					
-					@media (min-width: 1200px) {
-						.es-alternate-grid__primary-content__intro__description {
-							font-size: 1.4rem;
-						}
-					}
-					
-					.es-alternate-grid__primary-content__items {
-						display: grid;
-						gap: 2rem;
-					}
-					
-					@media (min-width: 640px) {
-						.es-alternate-grid__primary-content__items {
-							grid-template-columns: repeat(2, 1fr);
-						}
-					}
-					
-					.es-alternate-grid__item {
-						display: grid;
-						align-content: start;
-					}
-					
-					.es-alternate-grid__item__icon {
-						max-height: 3rem;
-					}
-					
-					.es-alternate-grid__item__heading {
-						font-weight: 700;
-						font-size: 1.17rem;
-						margin-top: 0;
-						margin-bottom: .5rem;
-					}
-					
-					.es-alternate-grid__item__heading > * {
-						margin: 0;
-					}
-					
-					.es-alternate-grid__item__description {
-						font-size: 0.9rem;
-					}
-					
-					.es-alternate-grid__item__description > * {
-						margin: 0;
-					}
-				\`}
-					</style>
-				</section>
-			);
-		};
-		
-		export default ${pascalName};
-		
-	`;
-};