Skip to content

Commit

Permalink
fix(adapter-next): support React 19's updated TypeScript types (#1545)
Browse files Browse the repository at this point in the history
  • Loading branch information
@angeloashmore
angeloashmore authored Jan 29, 2025
1 parent c4fe156 commit 038287a
Show file tree
Hide file tree
Showing 13 changed files with 101 additions and 108 deletions.
3 changes: 1 addition & 2 deletions packages/adapter-next/public/AlternateGrid/javascript.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,8 @@ import { PrismicRichText } from "@prismicio/react";
*
* @typedef {import("@prismicio/react").SliceComponentProps<PascalNameToReplaceSlice>} PascalNameToReplaceProps
*
* @param {PascalNameToReplaceProps}
* @type {import("react").FC<PascalNameToReplaceProps>}
*/

const PascalNameToReplace = ({ slice }) => {
return (
<section
Expand Down
51 changes: 25 additions & 26 deletions packages/adapter-next/public/AlternateGrid/typescript.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import { PrismicNextImage } from "@prismicio/next";
import { type Content, isFilled } from "@prismicio/client";
import { FC } from "react";
import { Content, isFilled } from "@prismicio/client";
import { SliceComponentProps, PrismicRichText } from "@prismicio/react";
import { PrismicNextImage } from "@prismicio/next";

export type PascalNameToReplaceProps =
SliceComponentProps<Content.PascalNameToReplaceSlice>;

const PascalNameToReplace = ({
slice,
}: PascalNameToReplaceProps): JSX.Element => {
const PascalNameToReplace: FC<PascalNameToReplaceProps> = ({ slice }) => {
return (
<section
data-slice-type={slice.slice_type}
Expand Down Expand Up @@ -90,65 +89,65 @@ const PascalNameToReplace = ({
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;
Expand All @@ -157,25 +156,25 @@ const PascalNameToReplace = ({
.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;
Expand All @@ -184,29 +183,29 @@ const PascalNameToReplace = ({
.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__heading {
font-weight: 700;
font-size: 1.17rem;
Expand All @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/adapter-next/public/CallToAction/javascript.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { PrismicRichText } from "@prismicio/react";
*
* @typedef {import("@prismicio/react").SliceComponentProps<PascalNameToReplaceSlice>} PascalNameToReplaceProps
*
* @param {PascalNameToReplaceProps}
* @type {import("react").FC<PascalNameToReplaceProps>}
*/
const PascalNameToReplace = ({ slice }) => {
const alignment = slice.variation === "alignLeft" ? "left" : "center";
Expand Down
31 changes: 15 additions & 16 deletions packages/adapter-next/public/CallToAction/typescript.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<Content.PascalNameToReplaceSlice>;

const PascalNameToReplace = ({
slice,
}: PascalNameToReplaceProps): JSX.Element => {
const PascalNameToReplace: FC<PascalNameToReplaceProps> = ({ slice }) => {
const alignment = slice.variation === "alignLeft" ? "left" : "center";

return (
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -117,7 +116,7 @@ const PascalNameToReplace = ({
background-color: #16745f;
color: #fff;
}
.es-call-to-action__button:hover {
background-color: #0d5e4c;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/adapter-next/public/CustomerLogos/javascript.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
*
* @typedef {import("@prismicio/react").SliceComponentProps<PascalNameToReplaceSlice>} PascalNameToReplaceProps
*
* @param {PascalNameToReplaceProps}
* @type {import("react").FC<PascalNameToReplaceProps>}
*/
const PascalNameToReplace = ({ slice }) => {
return (
Expand Down
25 changes: 12 additions & 13 deletions packages/adapter-next/public/CustomerLogos/typescript.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<Content.PascalNameToReplaceSlice>;

const PascalNameToReplace = ({
slice,
}: PascalNameToReplaceProps): JSX.Element => {
const PascalNameToReplace: FC<PascalNameToReplaceProps> = ({ slice }) => {
return (
<section
data-slice-type={slice.slice_type}
Expand Down Expand Up @@ -65,13 +64,13 @@ const PascalNameToReplace = ({
background-color: #f4f0ec;
color: #333;
}
.es-customer-logos__content {
display: grid;
gap: 2rem;
justify-items: center;
}
.es-customer-logos__heading {
color: #8592e0;
font-size: 1.5rem;
Expand All @@ -81,8 +80,8 @@ const PascalNameToReplace = ({
.es-customer-logos__heading * {
margin: 0;
}
}
.es-customer-logos__logos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
Expand All @@ -92,29 +91,29 @@ const PascalNameToReplace = ({
list-style-type: none;
width: 100%;
}
@media (min-width: 1200px) {
.es-customer-logos__logos {
margin-left: -3rem;
}
}
.es-customer-logos__logo {
margin: 0;
display: flex;
justify-content: center;
}
@media (min-width: 1200px) {
.es-customer-logos__logo {
margin-left: 3rem;
}
}
.es-customer-logos__logo__link__image {
max-width: 10rem;
}
.es-customer-logos__button {
justify-self: center;
text-decoration: underline;
Expand Down
3 changes: 1 addition & 2 deletions packages/adapter-next/public/Hero/javascript.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,8 @@ import { PrismicRichText } from "@prismicio/react";
*
* @typedef {import("@prismicio/react").SliceComponentProps<PascalNameToReplaceSlice>} PascalNameToReplaceProps
*
* @param {PascalNameToReplaceProps}
* @type {import("react").FC<PascalNameToReplaceProps>}
*/

const PascalNameToReplace = ({ slice }) => {
return (
<section
Expand Down
Loading

0 comments on commit 038287a

Please sign in to comment.