From c4fe15674dda0491de1ef9dd7fe2a94f10065b64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Pereira?= <7235666+jomifepe@users.noreply.github.com> Date: Mon, 27 Jan 2025 11:43:07 +0000 Subject: [PATCH 1/3] [DT-2597] feat: remove hard cap on link field variants (#1543) --- .../models/common/widgets/Link/components.tsx | 30 ++++++++----------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/components.tsx b/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/components.tsx index 0f95071cb..eef319aea 100644 --- a/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/components.tsx +++ b/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/components.tsx @@ -121,9 +121,7 @@ export function Variants({ const switchLabel = enabled ? "Enabled" : "Disabled"; - const optionsTitle = `Options (${variants?.length ?? 0}/5)`; - - const addButtonShown = (variants?.length ?? 0) < 5; + const optionsTitle = `Options (${variants?.length ?? 0})`; const deleteButtonShown = (variants?.length ?? 0) > 2; @@ -202,20 +200,18 @@ export function Variants({ )} ))} - {addButtonShown && ( - - - - )} + + + )} From 038287a9703825b48863bf8b226ddf435339926e Mon Sep 17 00:00:00 2001 From: Angelo Ashmore Date: Wed, 29 Jan 2025 00:40:15 -1000 Subject: [PATCH 2/3] fix(adapter-next): support React 19's updated TypeScript types (#1545) --- .../public/AlternateGrid/javascript.jsx | 3 +- .../public/AlternateGrid/typescript.tsx | 51 +++++++++---------- .../public/CallToAction/javascript.jsx | 2 +- .../public/CallToAction/typescript.tsx | 31 ++++++----- .../public/CustomerLogos/javascript.jsx | 2 +- .../public/CustomerLogos/typescript.tsx | 25 +++++---- .../adapter-next/public/Hero/javascript.jsx | 3 +- .../adapter-next/public/Hero/typescript.tsx | 51 +++++++++---------- .../adapter-next/src/hooks/slice-create.ts | 5 +- .../src/simulator/SliceSimulator.tsx | 14 ++--- .../src/simulator/SliceSimulatorWrapper.tsx | 6 +-- .../simulator/react-server/SliceSimulator.tsx | 10 ++-- .../test/plugin-slice-create.test.ts | 6 +-- 13 files changed, 101 insertions(+), 108 deletions(-) diff --git a/packages/adapter-next/public/AlternateGrid/javascript.jsx b/packages/adapter-next/public/AlternateGrid/javascript.jsx index f25257812..1e3ce8a2e 100644 --- a/packages/adapter-next/public/AlternateGrid/javascript.jsx +++ b/packages/adapter-next/public/AlternateGrid/javascript.jsx @@ -7,9 +7,8 @@ import { PrismicRichText } from "@prismicio/react"; * * @typedef {import("@prismicio/react").SliceComponentProps} PascalNameToReplaceProps * - * @param {PascalNameToReplaceProps} + * @type {import("react").FC} */ - const PascalNameToReplace = ({ slice }) => { return (
; -const PascalNameToReplace = ({ - slice, -}: PascalNameToReplaceProps): JSX.Element => { +const PascalNameToReplace: FC = ({ slice }) => { return (
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__heading { font-weight: 700; font-size: 1.17rem; @@ -217,11 +216,11 @@ const PascalNameToReplace = ({ .es-alternate-grid__item__heading * { margin: 0; } - + .es-alternate-grid__item__description { font-size: 0.9rem; } - + .es-alternate-grid__item__description * { margin: 0; } diff --git a/packages/adapter-next/public/CallToAction/javascript.jsx b/packages/adapter-next/public/CallToAction/javascript.jsx index a876222cd..bf489d942 100644 --- a/packages/adapter-next/public/CallToAction/javascript.jsx +++ b/packages/adapter-next/public/CallToAction/javascript.jsx @@ -7,7 +7,7 @@ import { PrismicRichText } from "@prismicio/react"; * * @typedef {import("@prismicio/react").SliceComponentProps} PascalNameToReplaceProps * - * @param {PascalNameToReplaceProps} + * @type {import("react").FC} */ const PascalNameToReplace = ({ slice }) => { const alignment = slice.variation === "alignLeft" ? "left" : "center"; diff --git a/packages/adapter-next/public/CallToAction/typescript.tsx b/packages/adapter-next/public/CallToAction/typescript.tsx index b9cb37a28..b31ed54bf 100644 --- a/packages/adapter-next/public/CallToAction/typescript.tsx +++ b/packages/adapter-next/public/CallToAction/typescript.tsx @@ -1,13 +1,12 @@ -import { type Content, isFilled } from "@prismicio/client"; +import { FC } from "react"; +import { Content, isFilled } from "@prismicio/client"; +import { SliceComponentProps, PrismicRichText } from "@prismicio/react"; import { PrismicNextLink, PrismicNextImage } from "@prismicio/next"; -import { PrismicRichText, SliceComponentProps } from "@prismicio/react"; export type PascalNameToReplaceProps = SliceComponentProps; -const PascalNameToReplace = ({ - slice, -}: PascalNameToReplaceProps): JSX.Element => { +const PascalNameToReplace: FC = ({ slice }) => { const alignment = slice.variation === "alignLeft" ? "left" : "center"; return ( @@ -46,49 +45,49 @@ const PascalNameToReplace = ({ .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 { font-family: system-ui, sans-serif; background-color: #fff; color: #333; } - + .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; @@ -98,13 +97,13 @@ const PascalNameToReplace = ({ .es-call-to-action__content__heading * { margin: 0; } - + .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; @@ -117,7 +116,7 @@ const PascalNameToReplace = ({ background-color: #16745f; color: #fff; } - + .es-call-to-action__button:hover { background-color: #0d5e4c; } diff --git a/packages/adapter-next/public/CustomerLogos/javascript.jsx b/packages/adapter-next/public/CustomerLogos/javascript.jsx index a41ffded9..7bcb28f4f 100644 --- a/packages/adapter-next/public/CustomerLogos/javascript.jsx +++ b/packages/adapter-next/public/CustomerLogos/javascript.jsx @@ -7,7 +7,7 @@ import { PrismicNextLink, PrismicNextImage } from "@prismicio/next"; * * @typedef {import("@prismicio/react").SliceComponentProps} PascalNameToReplaceProps * - * @param {PascalNameToReplaceProps} + * @type {import("react").FC} */ const PascalNameToReplace = ({ slice }) => { return ( diff --git a/packages/adapter-next/public/CustomerLogos/typescript.tsx b/packages/adapter-next/public/CustomerLogos/typescript.tsx index f17b16ee6..5183d2610 100644 --- a/packages/adapter-next/public/CustomerLogos/typescript.tsx +++ b/packages/adapter-next/public/CustomerLogos/typescript.tsx @@ -1,13 +1,12 @@ -import { type Content, isFilled } from "@prismicio/client"; +import { FC } from "react"; +import { Content, isFilled } from "@prismicio/client"; import { SliceComponentProps, PrismicRichText } from "@prismicio/react"; import { PrismicNextLink, PrismicNextImage } from "@prismicio/next"; export type PascalNameToReplaceProps = SliceComponentProps; -const PascalNameToReplace = ({ - slice, -}: PascalNameToReplaceProps): JSX.Element => { +const PascalNameToReplace: FC = ({ slice }) => { return (
} PascalNameToReplaceProps * - * @param {PascalNameToReplaceProps} + * @type {import("react").FC} */ - const PascalNameToReplace = ({ slice }) => { return (
; -const PascalNameToReplace = ({ - slice, -}: PascalNameToReplaceProps): JSX.Element => { +const PascalNameToReplace: FC = ({ slice }) => { return (
div:first-child { order: 1; } - + .es-fullpage-hero__image--left > div:nth-child(2) { order: 2; } - + .es-fullpage-hero__image--right > div:first-child { order: 2; } - + .es-fullpage-hero__image--right > div:nth-child(2) { order: 1; } - + .es-fullpage-hero__content { display: flex; flex-direction: column; gap: 2rem; } - + .es-fullpage-hero__content-right { display: flex; flex-direction: column; justify-content: space-around; padding: 1.5rem; } - + @media (min-width: 1080px) { .es-fullpage-hero__content { flex-direction: row; } - + .es-fullpage-hero__content > div { width: 50%; } } - + .es-fullpage-hero__content__intro { display: grid; gap: 1rem; } - + .es-fullpage-hero__content__intro__eyebrow { color: #47C1AF; font-size: 1.15rem; font-weight: 500; margin: 0; } - + .es-fullpage-hero__content__intro__headline { font-size: 1.625rem; font-weight: 700; } - + .es-fullpage-hero__content__intro__headline * { margin: 0; } - + @media (min-width: 640px) { .es-fullpage-hero__content__intro__headline { font-size: 2rem; } } - + @media (min-width: 1024px) { .es-fullpage-hero__content__intro__headline { font-size: 2.5rem; } } - + @media (min-width: 1200px) { .es-fullpage-hero__content__intro__headline { font-size: 2.75rem; } } - + .es-fullpage-hero__content__intro__description { font-size: 1.15rem; max-width: 38rem; } - + .es-fullpage-hero__content__intro__description > p { margin: 0; } - + @media (min-width: 1200px) { .es-fullpage-hero__content__intro__description { font-size: 1.4rem; @@ -180,7 +179,7 @@ const PascalNameToReplace = ({ background-color: #16745f; color: #fff; } - + .es-call-to-action__link:hover { background-color: #0d5e4c; } diff --git a/packages/adapter-next/src/hooks/slice-create.ts b/packages/adapter-next/src/hooks/slice-create.ts index 3012d09d6..bcea8e2a1 100644 --- a/packages/adapter-next/src/hooks/slice-create.ts +++ b/packages/adapter-next/src/hooks/slice-create.ts @@ -43,6 +43,7 @@ const createComponentFile = async ({ contents = data.componentContents; } else if (isTypeScriptProject) { contents = stripIndent` + import { FC } from "react"; import { Content } from "@prismicio/client"; import { SliceComponentProps } from "@prismicio/react"; @@ -54,7 +55,7 @@ const createComponentFile = async ({ /** * Component for "${data.model.name}" Slices. */ - const ${pascalName} = ({ slice }: ${pascalName}Props): JSX.Element => { + const ${pascalName}: FC<${pascalName}Props> = ({ slice }) => { return (
} ${pascalName}Props - * @param {${pascalName}Props} + * @type {import("react").FC<${pascalName}Props>} */ const ${pascalName} = ({ slice }) => { return ( diff --git a/packages/adapter-next/src/simulator/SliceSimulator.tsx b/packages/adapter-next/src/simulator/SliceSimulator.tsx index 2674f4cbf..4321bdb93 100644 --- a/packages/adapter-next/src/simulator/SliceSimulator.tsx +++ b/packages/adapter-next/src/simulator/SliceSimulator.tsx @@ -1,6 +1,6 @@ "use client"; -import * as React from "react"; +import { ComponentType, FC, useEffect, useState } from "react"; import { SliceSimulatorProps as BaseSliceSimulatorProps, @@ -42,7 +42,7 @@ export type SliceSimulatorProps = { * />; * ``` */ - sliceZone: (props: SliceSimulatorSliceZoneProps) => JSX.Element; + sliceZone: ComponentType; } | { children: React.ReactNode; @@ -53,22 +53,22 @@ export type SliceSimulatorProps = { * Simulate slices in isolation. The slice simulator enables live slice * development in Slice Machine and live previews in the Page Builder. */ -export const SliceSimulator = ({ +export const SliceSimulator: FC = ({ background, zIndex, className, ...restProps -}: SliceSimulatorProps): JSX.Element => { +}) => { if (!("sliceZone" in restProps)) { throw new Error( "A sliceZone prop must be provided when is rendered in a Client Component. Add a sliceZone prop or convert your simulator to a Server Component with the getSlices helper.", ); } - const [slices, setSlices] = React.useState(() => getDefaultSlices()); - const [message, setMessage] = React.useState(() => getDefaultMessage()); + const [slices, setSlices] = useState(() => getDefaultSlices()); + const [message, setMessage] = useState(() => getDefaultMessage()); - React.useEffect(() => { + useEffect(() => { simulatorManager.state.on( StateEventType.Slices, (_slices) => { diff --git a/packages/adapter-next/src/simulator/SliceSimulatorWrapper.tsx b/packages/adapter-next/src/simulator/SliceSimulatorWrapper.tsx index 13bf332f5..e911cfe0f 100644 --- a/packages/adapter-next/src/simulator/SliceSimulatorWrapper.tsx +++ b/packages/adapter-next/src/simulator/SliceSimulatorWrapper.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from "react"; +import { FC, ReactNode } from "react"; import { SliceSimulatorProps, disableEventHandler, @@ -19,14 +19,14 @@ type SliceSimulatorWrapperProps = { * A wrapper for the slice simulator that isolates the given children from the * page's layout. */ -export const SliceSimulatorWrapper = ({ +export const SliceSimulatorWrapper: FC = ({ className, children, zIndex, background, message, hasSlices, -}: SliceSimulatorWrapperProps): JSX.Element => { +}) => { const defaultProps = getDefaultProps(); return ( diff --git a/packages/adapter-next/src/simulator/react-server/SliceSimulator.tsx b/packages/adapter-next/src/simulator/react-server/SliceSimulator.tsx index db411c0bf..d8808b2dd 100644 --- a/packages/adapter-next/src/simulator/react-server/SliceSimulator.tsx +++ b/packages/adapter-next/src/simulator/react-server/SliceSimulator.tsx @@ -2,7 +2,7 @@ "use client"; -import * as React from "react"; +import { FC, useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import { @@ -25,13 +25,13 @@ export type SliceSimulatorProps = Omit & { className?: string; }; -export const SliceSimulator = ({ +export const SliceSimulator: FC = ({ children, background, zIndex, className, -}: SliceSimulatorProps): JSX.Element => { - const [message, setMessage] = React.useState(() => getDefaultMessage()); +}) => { + const [message, setMessage] = useState(() => getDefaultMessage()); const router = useRouter(); const state = @@ -40,7 +40,7 @@ export const SliceSimulator = ({ : undefined; const hasSlices = getSlices(state).length > 0; - React.useEffect(() => { + useEffect(() => { simulatorManager.state.on( StateEventType.Slices, (newSlices) => { diff --git a/packages/adapter-next/test/plugin-slice-create.test.ts b/packages/adapter-next/test/plugin-slice-create.test.ts index ee92768c8..428e5f565 100644 --- a/packages/adapter-next/test/plugin-slice-create.test.ts +++ b/packages/adapter-next/test/plugin-slice-create.test.ts @@ -255,7 +255,7 @@ test("component file is correctly typed with JSDoc when TypeScript is disabled", expect(jsDocTags).toStrictEqual([ '@typedef {import("@prismicio/client").Content.QuxQuuxSlice} QuxQuuxSlice', '@typedef {import("@prismicio/react").SliceComponentProps} QuxQuuxProps', - "@param {QuxQuuxProps}\n ", + '@type {import("react").FC}\n ', ]); }); @@ -287,9 +287,7 @@ test("component file is correctly typed when TypeScript is enabled", async (ctx) expect(propsTypeAlias.isExported()).toBe(true); expect( file.getVariableDeclarationOrThrow("QuxQuux").getType().getText(), - ).toBe( - "({ slice }: SliceComponentProps) => JSX.Element", - ); + ).toBe("FC>"); }); test("component file writes to .js file by default", async (ctx) => { From c3e8836c06e05468eff33bd11062404d0589a183 Mon Sep 17 00:00:00 2001 From: jomifepe <7235666+jomifepe@users.noreply.github.com> Date: Wed, 29 Jan 2025 11:42:22 +0000 Subject: [PATCH 3/3] release: 9 new packages --- packages/adapter-next/package.json | 2 +- packages/adapter-nuxt/package.json | 2 +- packages/adapter-nuxt2/package.json | 2 +- packages/adapter-sveltekit/package.json | 2 +- packages/init/package.json | 2 +- packages/manager/package.json | 2 +- packages/plugin-kit/package.json | 2 +- packages/slice-machine/package.json | 2 +- packages/start-slicemachine/package.json | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/adapter-next/package.json b/packages/adapter-next/package.json index 40bc5f8da..c7e8ed206 100644 --- a/packages/adapter-next/package.json +++ b/packages/adapter-next/package.json @@ -1,6 +1,6 @@ { "name": "@slicemachine/adapter-next", - "version": "0.3.65", + "version": "0.3.66", "description": "Slice Machine adapter for Next.js.", "keywords": [ "typescript", diff --git a/packages/adapter-nuxt/package.json b/packages/adapter-nuxt/package.json index f9485c4b5..e35862c29 100644 --- a/packages/adapter-nuxt/package.json +++ b/packages/adapter-nuxt/package.json @@ -1,6 +1,6 @@ { "name": "@slicemachine/adapter-nuxt", - "version": "0.3.65", + "version": "0.3.66", "description": "Slice Machine adapter for Nuxt 3.", "keywords": [ "typescript", diff --git a/packages/adapter-nuxt2/package.json b/packages/adapter-nuxt2/package.json index e2a35a005..f348cfe7b 100644 --- a/packages/adapter-nuxt2/package.json +++ b/packages/adapter-nuxt2/package.json @@ -1,6 +1,6 @@ { "name": "@slicemachine/adapter-nuxt2", - "version": "0.3.65", + "version": "0.3.66", "description": "Slice Machine adapter for Nuxt 2.", "keywords": [ "typescript", diff --git a/packages/adapter-sveltekit/package.json b/packages/adapter-sveltekit/package.json index d2e185ed9..6bbeb7283 100644 --- a/packages/adapter-sveltekit/package.json +++ b/packages/adapter-sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@slicemachine/adapter-sveltekit", - "version": "0.3.65", + "version": "0.3.66", "description": "Slice Machine adapter for SvelteKit.", "keywords": [ "typescript", diff --git a/packages/init/package.json b/packages/init/package.json index 862f76f45..a52e8b670 100644 --- a/packages/init/package.json +++ b/packages/init/package.json @@ -1,6 +1,6 @@ { "name": "@slicemachine/init", - "version": "2.10.21", + "version": "2.10.22", "description": "Init Prismic Slice Machine in your project", "keywords": [ "typescript", diff --git a/packages/manager/package.json b/packages/manager/package.json index 358c85d37..240beb253 100644 --- a/packages/manager/package.json +++ b/packages/manager/package.json @@ -1,6 +1,6 @@ { "name": "@slicemachine/manager", - "version": "0.24.2", + "version": "0.24.3", "description": "Manage all aspects of a Slice Machine project.", "repository": { "type": "git", diff --git a/packages/plugin-kit/package.json b/packages/plugin-kit/package.json index c503e9aab..3aaf8ebb4 100644 --- a/packages/plugin-kit/package.json +++ b/packages/plugin-kit/package.json @@ -1,6 +1,6 @@ { "name": "@slicemachine/plugin-kit", - "version": "0.4.64", + "version": "0.4.65", "description": "A set of helpers to develop and run Slice Machine plugins", "keywords": [ "typescript", diff --git a/packages/slice-machine/package.json b/packages/slice-machine/package.json index 45f6b695f..1c24a0cb9 100644 --- a/packages/slice-machine/package.json +++ b/packages/slice-machine/package.json @@ -1,6 +1,6 @@ { "name": "slice-machine-ui", - "version": "2.12.2", + "version": "2.12.3", "license": "MIT", "description": "A visual builder for your Slice Models with all the tools you need to generate data models and mock CMS content locally.", "repository": { diff --git a/packages/start-slicemachine/package.json b/packages/start-slicemachine/package.json index ef7d12119..1797f8de1 100644 --- a/packages/start-slicemachine/package.json +++ b/packages/start-slicemachine/package.json @@ -1,6 +1,6 @@ { "name": "start-slicemachine", - "version": "0.12.44", + "version": "0.12.45", "description": "Start Slice Machine from within a project.", "repository": { "type": "git",