diff --git a/examples/cms-agilitycms/components/alert.js b/examples/cms-agilitycms/components/alert.tsx similarity index 100% rename from examples/cms-agilitycms/components/alert.js rename to examples/cms-agilitycms/components/alert.tsx diff --git a/examples/cms-agilitycms/components/avatar.js b/examples/cms-agilitycms/components/avatar.tsx similarity index 100% rename from examples/cms-agilitycms/components/avatar.js rename to examples/cms-agilitycms/components/avatar.tsx diff --git a/examples/cms-agilitycms/components/container.js b/examples/cms-agilitycms/components/container.tsx similarity index 100% rename from examples/cms-agilitycms/components/container.js rename to examples/cms-agilitycms/components/container.tsx diff --git a/examples/cms-agilitycms/components/cover-image.js b/examples/cms-agilitycms/components/cover-image.tsx similarity index 97% rename from examples/cms-agilitycms/components/cover-image.js rename to examples/cms-agilitycms/components/cover-image.tsx index 746e5fc8579e..517d21d69bd1 100644 --- a/examples/cms-agilitycms/components/cover-image.js +++ b/examples/cms-agilitycms/components/cover-image.tsx @@ -2,7 +2,7 @@ import Image from '../lib/components/image' import cn from 'classnames' import Link from 'next/link' -export default function CoverImage({ title, responsiveImage, slug }) { +export default function CoverImage({ title, responsiveImage, slug = null }) { const image = ( // This client is used by nested components to fetch additional data within `getStaticProps` export class APIClient { + public preview: any + public client: any + constructor({ preview = false }) { this.preview = preview this.client = getClient(preview) diff --git a/examples/cms-agilitycms/lib/components/content-zone.js b/examples/cms-agilitycms/lib/components/content-zone.tsx similarity index 100% rename from examples/cms-agilitycms/lib/components/content-zone.js rename to examples/cms-agilitycms/lib/components/content-zone.tsx diff --git a/examples/cms-agilitycms/lib/components/image.js b/examples/cms-agilitycms/lib/components/image.tsx similarity index 82% rename from examples/cms-agilitycms/lib/components/image.js rename to examples/cms-agilitycms/lib/components/image.tsx index 7cbf061f35bc..38e686a6c47e 100644 --- a/examples/cms-agilitycms/lib/components/image.js +++ b/examples/cms-agilitycms/lib/components/image.tsx @@ -1,13 +1,21 @@ import React, { useCallback, useState } from 'react' import { useInView } from 'react-intersection-observer' +type State = { + lazyLoad: boolean + isSsr: boolean + isIntersectionObserverAvailable: boolean + inView?: boolean + loaded: boolean +} + const imageAddStrategy = ({ lazyLoad, isSsr, isIntersectionObserverAvailable, inView, loaded, -}) => { +}: State) => { if (!lazyLoad) { return true } @@ -28,7 +36,7 @@ const imageShowStrategy = ({ isSsr, isIntersectionObserverAvailable, loaded, -}) => { +}: State) => { if (!lazyLoad) { return true } @@ -44,6 +52,34 @@ const imageShowStrategy = ({ return true } +type ImageData = { + aspectRatio: number + base64?: string + height?: number + width: number + sizes?: string + src?: string + srcSet?: string + webpSrcSet?: string + bgColor?: string + alt?: string + title?: string +} + +type ImageProps = { + data: ImageData + className?: string + pictureClassName?: string + fadeInDuration?: number + intersectionTreshold?: number + intersectionThreshold?: number + intersectionMargin?: string + lazyLoad?: boolean + style?: React.CSSProperties + pictureStyle?: React.CSSProperties + explicitWidth?: boolean +} + const Image = function ({ className, fadeInDuration, @@ -55,7 +91,7 @@ const Image = function ({ pictureStyle, explicitWidth, data, -}) { +}: ImageProps) { const [loaded, setLoaded] = useState(false) const handleLoad = useCallback(() => { @@ -74,7 +110,7 @@ const Image = function ({ ? false : !!window.IntersectionObserver - const absolutePositioning = { + const absolutePositioning: React.CSSProperties = { position: 'absolute', left: 0, top: 0, diff --git a/examples/cms-agilitycms/lib/components/one-column-template.js b/examples/cms-agilitycms/lib/components/one-column-template.tsx similarity index 100% rename from examples/cms-agilitycms/lib/components/one-column-template.js rename to examples/cms-agilitycms/lib/components/one-column-template.tsx diff --git a/examples/cms-agilitycms/lib/components/page-template.js b/examples/cms-agilitycms/lib/components/page-template.tsx similarity index 100% rename from examples/cms-agilitycms/lib/components/page-template.js rename to examples/cms-agilitycms/lib/components/page-template.tsx diff --git a/examples/cms-agilitycms/lib/components/rich-text-area.js b/examples/cms-agilitycms/lib/components/rich-text-area.tsx similarity index 100% rename from examples/cms-agilitycms/lib/components/rich-text-area.js rename to examples/cms-agilitycms/lib/components/rich-text-area.tsx diff --git a/examples/cms-agilitycms/lib/constants.js b/examples/cms-agilitycms/lib/constants.ts similarity index 100% rename from examples/cms-agilitycms/lib/constants.js rename to examples/cms-agilitycms/lib/constants.ts diff --git a/examples/cms-agilitycms/lib/dependancies.js b/examples/cms-agilitycms/lib/dependancies.ts similarity index 77% rename from examples/cms-agilitycms/lib/dependancies.js rename to examples/cms-agilitycms/lib/dependancies.ts index 63f3e583c31f..44ccead1baee 100644 --- a/examples/cms-agilitycms/lib/dependancies.js +++ b/examples/cms-agilitycms/lib/dependancies.ts @@ -24,10 +24,10 @@ export const requireComponentDependancyByName = (name) => { if (!Component) { // eslint-disable-next-line no-throw-literal throw `Could not find a component with the name ${name}. Tried searching: - ${userComponentsPath}/${kebabCaseName}.js', - ${libComponentsPath}/${kebabCaseName}.js', - ${userComponentsPath}/${pascalCaseName}.js', - ${libComponentsPath}/${pascalCaseName}.js'.` + ${userComponentsPath}/${kebabCaseName}.tsx', + ${libComponentsPath}/${kebabCaseName}.tsx', + ${userComponentsPath}/${pascalCaseName}.tsx', + ${libComponentsPath}/${pascalCaseName}.tsx'.` } return Component @@ -38,13 +38,13 @@ const requireComponent = (name) => { try { //check the user path first (must be relative paths) - Component = require(`../components/${name}.js`).default + Component = require(`../components/${name}.tsx`).default } catch {} if (!Component) try { //fallback to lib path (must be relative paths) - Component = require(`./components/${name}.js`).default + Component = require(`./components/${name}.tsx`).default } catch {} return Component diff --git a/examples/cms-agilitycms/lib/normalize.js b/examples/cms-agilitycms/lib/normalize.ts similarity index 82% rename from examples/cms-agilitycms/lib/normalize.js rename to examples/cms-agilitycms/lib/normalize.ts index 226a8621e75c..620a979549a8 100644 --- a/examples/cms-agilitycms/lib/normalize.js +++ b/examples/cms-agilitycms/lib/normalize.ts @@ -20,6 +20,14 @@ export function normalizePosts(postsFromAgility) { excerpt: p.fields.excerpt, date: p.fields.date, content: p.fields.content, + author: p.fields.author + ? { + name: p.fields.author.fields.name, + picture: { + url: `${p.fields.author.fields.picture.url}?w=100&h=100`, + }, + } + : null, ogImage: { url: `${p.fields.coverImage.url}?w=2000&h=1000&q=70`, }, @@ -40,15 +48,6 @@ export function normalizePosts(postsFromAgility) { }, } - if (p.fields.author) { - normalizedPost.author = { - name: p.fields.author.fields.name, - picture: { - url: `${p.fields.author.fields.picture.url}?w=100&h=100`, - }, - } - } - return normalizedPost }) diff --git a/examples/cms-agilitycms/lib/preview.js b/examples/cms-agilitycms/lib/preview.ts similarity index 100% rename from examples/cms-agilitycms/lib/preview.js rename to examples/cms-agilitycms/lib/preview.ts diff --git a/examples/cms-agilitycms/lib/use-preview-redirect.js b/examples/cms-agilitycms/lib/use-preview-redirect.ts similarity index 100% rename from examples/cms-agilitycms/lib/use-preview-redirect.js rename to examples/cms-agilitycms/lib/use-preview-redirect.ts diff --git a/examples/cms-agilitycms/lib/utils.js b/examples/cms-agilitycms/lib/utils.ts similarity index 100% rename from examples/cms-agilitycms/lib/utils.js rename to examples/cms-agilitycms/lib/utils.ts diff --git a/examples/cms-agilitycms/next-env.d.ts b/examples/cms-agilitycms/next-env.d.ts new file mode 100644 index 000000000000..4f11a03dc6cc --- /dev/null +++ b/examples/cms-agilitycms/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/cms-agilitycms/package.json b/examples/cms-agilitycms/package.json index 8660055b38cb..133365354cad 100644 --- a/examples/cms-agilitycms/package.json +++ b/examples/cms-agilitycms/package.json @@ -6,19 +6,23 @@ "start": "next start" }, "dependencies": { - "@agility/content-fetch": "^0.8.1", - "classnames": "2.3.1", - "date-fns": "2.28.0", - "isomorphic-unfetch": "3.0.0", + "@agility/content-fetch": "^1.1.5", + "classnames": "^2.3.1", + "date-fns": "^2.29.1", + "isomorphic-unfetch": "^3.1.0", "next": "latest", - "react": "^17.0.2", - "react-datocms": "1.1.0", - "react-dom": "^17.0.2", - "react-intersection-observer": "^8.26.1" + "react": "^18.2.0", + "react-datocms": "^3.0.15", + "react-dom": "^18.2.0", + "react-intersection-observer": "^9.4.0" }, "devDependencies": { - "autoprefixer": "10.4.2", - "postcss": "8.4.5", - "tailwindcss": "^3.0.15" + "@types/node": "^18.6.0", + "@types/react": "^18.0.15", + "@types/react-dom": "^18.0.6", + "autoprefixer": "^10.4.7", + "postcss": "^8.4.14", + "tailwindcss": "^3.1.6", + "typescript": "^4.7.4" } } diff --git a/examples/cms-agilitycms/pages/[...slug].js b/examples/cms-agilitycms/pages/[...slug].tsx similarity index 100% rename from examples/cms-agilitycms/pages/[...slug].js rename to examples/cms-agilitycms/pages/[...slug].tsx diff --git a/examples/cms-agilitycms/pages/_app.js b/examples/cms-agilitycms/pages/_app.tsx similarity index 51% rename from examples/cms-agilitycms/pages/_app.js rename to examples/cms-agilitycms/pages/_app.tsx index d56d9bf601a9..bbd8269522fc 100644 --- a/examples/cms-agilitycms/pages/_app.js +++ b/examples/cms-agilitycms/pages/_app.tsx @@ -1,7 +1,5 @@ import '../styles/index.css' -function MyApp({ Component, pageProps }) { +export default function MyApp({ Component, pageProps }) { return } - -export default MyApp diff --git a/examples/cms-agilitycms/pages/_document.js b/examples/cms-agilitycms/pages/_document.js deleted file mode 100644 index c55951c0d5da..000000000000 --- a/examples/cms-agilitycms/pages/_document.js +++ /dev/null @@ -1,15 +0,0 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' - -export default class MyDocument extends Document { - render() { - return ( - - - -
- - - - ) - } -} diff --git a/examples/cms-agilitycms/pages/_document.tsx b/examples/cms-agilitycms/pages/_document.tsx new file mode 100644 index 000000000000..950169082cb9 --- /dev/null +++ b/examples/cms-agilitycms/pages/_document.tsx @@ -0,0 +1,13 @@ +import { Html, Head, Main, NextScript } from 'next/document' + +export default function MyDocument() { + return ( + + + +
+ + + + ) +} diff --git a/examples/cms-agilitycms/pages/api/exit-preview.js b/examples/cms-agilitycms/pages/api/exit-preview.ts similarity index 57% rename from examples/cms-agilitycms/pages/api/exit-preview.js rename to examples/cms-agilitycms/pages/api/exit-preview.ts index 03d954f4a7a9..eb19f4ed526c 100644 --- a/examples/cms-agilitycms/pages/api/exit-preview.js +++ b/examples/cms-agilitycms/pages/api/exit-preview.ts @@ -1,4 +1,9 @@ -export default async function handler(_, res) { +import type { NextApiRequest, NextApiResponse } from 'next' + +export default async function handler( + _req: NextApiRequest, + res: NextApiResponse +) { // Exit the current user from "Preview Mode". This function accepts no args. res.clearPreviewData() diff --git a/examples/cms-agilitycms/pages/api/preview.js b/examples/cms-agilitycms/pages/api/preview.ts similarity index 71% rename from examples/cms-agilitycms/pages/api/preview.js rename to examples/cms-agilitycms/pages/api/preview.ts index 4867bb03c129..1df16bf31f32 100644 --- a/examples/cms-agilitycms/pages/api/preview.js +++ b/examples/cms-agilitycms/pages/api/preview.ts @@ -1,6 +1,10 @@ +import type { NextApiRequest, NextApiResponse } from 'next' import { validatePreview } from '../../lib/api' -export default async function handler(req, res) { +export default async function handler( + req: NextApiRequest, + res: NextApiResponse +) { // Check the secret and next parameters // This secret should only be known to this API route and the CMS @@ -19,6 +23,9 @@ export default async function handler(req, res) { res.setPreviewData({}) // Redirect to the slug + if (!('slug' in validationResp)) { + throw new Error('invariant missing slug in validation response') + } res.writeHead(307, { Location: validationResp.slug }) res.end() } diff --git a/examples/cms-agilitycms/pages/index.js b/examples/cms-agilitycms/pages/index.ts similarity index 100% rename from examples/cms-agilitycms/pages/index.js rename to examples/cms-agilitycms/pages/index.ts diff --git a/examples/cms-agilitycms/tsconfig.json b/examples/cms-agilitycms/tsconfig.json new file mode 100644 index 000000000000..0c8fa8791dfd --- /dev/null +++ b/examples/cms-agilitycms/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, + "include": ["next-env.d.ts", "environment.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +}