Merge branch 'main' into defer-shortbread

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier" // prettier should always come last
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier"],
+  "rules": {
+    "react-hooks/exhaustive-deps": "error",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error"
+  }
+}

.husky/pre-commit

@@ -2,3 +2,5 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 yarn spellcheck-diff
+
+yarn lint-staged

.lintstagedrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  '**/*.(ts|tsx|js|css|mjs)': (filenames) => [
+    `yarn eslint ${filenames.join(' ')}`,
+    `yarn prettier --write ${filenames.join(' ')}`
+  ]
+};

.prettierignore

@@ -1 +1,12 @@
-docs
+.github
+.husky
+.next
+.vscode
+client
+node_modules
+public
+README-assets
+yarn.lock
+redirects.json
+*.md
+*.mdx

.prettierrc

@@ -10,4 +10,4 @@
   "tabWidth": 2,
   "trailingComma": "none",
   "useTabs": false
-}
+}

cspell.json

@@ -165,6 +165,7 @@
     "Auth.currentAuthenticatedUser",
     "Auth.federatedSignIn",
     "Auth0",
+    "authcurrentusercredentials",
     "authData",
     "Authenticator's",
     "Authenticator",
@@ -1560,7 +1561,8 @@
     "clijson",
     "parametersjson",
     "nextamplifygen",
-    "multirepo"
+    "multirepo",
+    "startbuild"
   ],
   "flagWords": ["hte", "full-stack", "Full-stack", "Full-Stack", "sudo"],
   "patterns": [

jest.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  preset: './preset.js',
+  rootDir: './',
+  roots: ['<rootDir>/src'],
+  transform: {
+    '^.+\\.(ts|tsx|js|mjs)$': [
+      'babel-jest',
+      {
+        presets: ['next/babel']
+      }
+    ]
+  },
+  testPathIgnorePatterns: ['capi', '.next', 'client'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  moduleNameMapper: {
+    '\\.(css|less|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
+    '@/components/(.*)': '<rootDir>/src/components/$1',
+    '@/constants/(.*)': '<rootDir>/src/constants/$1',
+    '@/utils/(.*)': '<rootDir>/src/utils/$1'
+  },
+  transformIgnorePatterns: []
+};

mdx-components.tsx

@@ -14,7 +14,6 @@ import preToCodeBlock from './src/utils/pre-to-code-block';
 import { Overview } from './src/components/Overview';
 import ExternalLink from './src/components/ExternalLink';
 import { ExternalLinkButton } from './src/components/ExternalLinkButton';
-import InternalLink from './src/components/InternalLink';
 import { InternalLinkButton } from './src/components/InternalLinkButton';
 import FilterContent from './src/components/FilterContent';
 import { Grid, View } from '@aws-amplify/ui-react';
@@ -63,7 +62,6 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     Overview,
     ExternalLink,
     ExternalLinkButton,
-    InternalLink,
     InternalLinkButton,
     FilterContent,
     Grid,

next.config.mjs

@@ -7,7 +7,7 @@ import rehypeImgSize from 'rehype-img-size';
 import remarkGfm from 'remark-gfm';
 dotenv.config({ path: './.env.custom' });
 
-export default () => {
+const nextJSConfig = () => {
   const withMDX = createMDX({
     extension: /\.mdx$/,
     options: {
@@ -23,21 +23,15 @@ export default () => {
     distDir: 'client/www/next-build',
     env: {
       BUILD_ENV: process.env.BUILD_ENV,
-      // eslint-disable-next-line @typescript-eslint/camelcase
       nextImageExportOptimizer_imageFolderPath: 'public',
-      // eslint-disable-next-line @typescript-eslint/camelcase
       nextImageExportOptimizer_exportFolderPath: 'out',
-      // eslint-disable-next-line @typescript-eslint/camelcase
       nextImageExportOptimizer_quality: '75',
-      // eslint-disable-next-line @typescript-eslint/camelcase
       nextImageExportOptimizer_storePicturesInWEBP: 'true',
-      // eslint-disable-next-line @typescript-eslint/camelcase
       nextImageExportOptimizer_exportFolderName: 'nextImageExportOptimizer',
 
       // If you do not want to use blurry placeholder images, then you can set
       // nextImageExportOptimizer_generateAndUseBlurImages to false and pass
       // `placeholder="empty"` to all <ExportedImage> components.
-      // eslint-disable-next-line @typescript-eslint/camelcase
       nextImageExportOptimizer_generateAndUseBlurImages: 'true'
     },
     images: {
@@ -61,7 +55,6 @@ export default () => {
   });
 
   if (shouldAnalyzeBundles) {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
     const withNextBundleAnalyzer = require('next-bundle-analyzer')({
       format: ['json'],
       reportDir: '../.github/analyze',
@@ -76,3 +69,5 @@ export default () => {
 
   return nextConfig;
 };
+
+export default nextJSConfig;

package.json

@@ -12,10 +12,8 @@
     "@aws-amplify/amplify-cli-core": "^4.2.10",
     "@aws-amplify/ui-react": "^5.3.1",
     "@docsearch/react": "3",
-    "@octokit/rest": "^19.0.7",
     "aws-amplify": "^5.0.5",
     "html-entities": "^1.2.1",
-    "mdx-prism": "^0.3.4",
     "next": "^13.5.6",
     "next-image-export-optimizer": "^1.8.3",
     "next-transpile-modules": "^9.0.0",
@@ -25,19 +23,14 @@
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.7.1",
-    "unified": "^10.1.2"
+    "react-icons": "^4.7.1"
   },
   "devDependencies": {
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@next/bundle-analyzer": "^13.5.3",
     "@next/mdx": "^13.5.4",
-    "@stencil/core": "^1.17.0",
-    "@stencil/eslint-plugin": "^0.2.1",
-    "@stencil/router": "^1.0.1",
-    "@stencil/sass": "^1.3.1",
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.5.0",
@@ -46,25 +39,24 @@
     "@types/node": "^12.12.9",
     "@types/react": "^18.0.0",
     "@types/url-parse": "^1.4.3",
-    "@typescript-eslint/eslint-plugin": "^2.7.0",
-    "@typescript-eslint/parser": "^2.7.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
     "axios": "^1.3.4",
     "classnames": "^2.3.2",
     "cross-env": "^7.0.3",
     "cspell": "^6.2.3",
     "dotenv": "^16.0.0",
-    "eslint": "^6.6.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-next": "^13.2.4",
-    "eslint-config-prettier": "^6.5.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.16.0",
+    "eslint": "8.54.0",
+    "eslint-config-next": "14.0.3",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-next": "^0.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "fs-extra": "^9.0.1",
     "git-jiggy": "1.1.1",
     "husky": "^8.0.1",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
     "json5": "^2.2.3",
+    "lint-staged": "^14.0.0",
     "next-bundle-analyzer": "^0.6.7",
     "prettier": "^3.0.3",
     "puppeteer": "^20.8.2",
@@ -96,35 +88,8 @@
     "semver": "7.5.2",
     "tough-cookie": "4.1.3",
     "aws-cdk-lib": "2.80.0",
-    "prismjs": "^1.27.0"
-  },
-  "jest": {
-    "preset": "./preset.js",
-    "roots": [
-      "<rootDir>/src"
-    ],
-    "transform": {
-      "^.+\\.(ts|tsx|js|mjs)$": [
-        "babel-jest",
-        {
-          "presets": [
-            "next/babel"
-          ]
-        }
-      ]
-    },
-    "testPathIgnorePatterns": [
-      "capi",
-      ".next",
-      "client"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/jest.setup.js"
-    ],
-    "moduleNameMapper": {
-      "\\.(css|less|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
-    },
-    "transformIgnorePatterns": []
+    "prismjs": "^1.27.0",
+    "@adobe/css-tools": "4.3.2"
   },
   "scripts": {
     "clean": "rm -rf node_modules yarn.lock",
@@ -139,6 +104,7 @@
     "next-start": "next start",
     "prepare": "husky install",
     "analyze": "ANALYZE=true yarn next-build",
-    "prebuild": "node src/directory/generateDirectory.mjs && node src/directory/generateFlatDirectory.mjs"
+    "prebuild": "node src/directory/generateDirectory.mjs && node src/directory/generateFlatDirectory.mjs",
+    "lint": "next lint"
   }
 }

src/components/Banner/Banner.tsx

@@ -19,11 +19,11 @@ export const Banner: React.FC<BannerProps> = ({ url = '/gen2' }) => {
         <Flex className="message-banner__inner">
           <Flex direction="column" gap="xxs">
             <Text as="span" className="message-banner__heading">
-              Preview: AWS Amplify's new code-first DX (Gen 2)
+              Preview: AWS Amplify&apos;s new code-first DX (Gen 2)
             </Text>
             <Text className="message-banner__content">
-              The next generation of Amplify's backend building experience with
-              a TypeScript-first DX.
+              The next generation of Amplify&apos;s backend building experience
+              with a TypeScript-first DX.
             </Text>
           </Flex>
 

src/components/Block/__tests__/Block.test.tsx

@@ -5,7 +5,7 @@ import Block from '../index';
 describe('Block', () => {
   it('should render the Block component', async () => {
     const child = <div>Block Child</div>;
-    render(<Block name={`test-block`} children={child} />);
+    render(<Block name={`test-block`}>{child}</Block>);
 
     const blockNode = await screen.findByText('Block Child');
     expect(blockNode).toBeInTheDocument();

src/components/Breadcrumbs/index.tsx

@@ -44,14 +44,14 @@ function generateBreadcrumbs(
   const breadcrumbs: BreadcrumbItem[] = [];
 
   const pieces = route.split('/').filter((str) => str);
-  let urls: string[] = [];
+  const urls: string[] = [];
   for (let i = 1; i <= pieces.length; i++) {
     urls.push(`/${pieces.slice(0, i).join('/')}`);
   }
 
   urls.forEach((url) => {
     const directoryEntry = findNode(url);
-    let href = {
+    const href = {
       pathname: url
     };
     if (url.includes('[platform]')) {
@@ -75,8 +75,8 @@ function generateBreadcrumbs(
   return breadcrumbs;
 }
 
-function BreadcrumbsComponent({ route, platform, isGen2 }: Props) {
-  const items = generateBreadcrumbs(route, platform, isGen2);
+function BreadcrumbsComponent({ route, platform }: Props) {
+  const items = generateBreadcrumbs(route, platform);
   return items.length > 1 ? (
     <div className={'breadcrumb__container'}>
       <Breadcrumbs.Container>

src/components/CliCommands/Command.tsx

@@ -1,5 +1,5 @@
 import { CliCommand, CliCommandFlag } from '@/data/cli-commands';
-import { Heading, Text, Flex, View } from '@aws-amplify/ui-react';
+import { Text, Flex } from '@aws-amplify/ui-react';
 import { MDXCode } from '../MDXComponents';
 import { CommandHeading, SubCommandHeading } from './CommandHeading';
 import { Fragment } from 'react';