From 06440f762af665c53673d79ca221a016871ae987 Mon Sep 17 00:00:00 2001 From: Scott Rees <6165315+reesscot@users.noreply.github.com> Date: Tue, 17 Oct 2023 08:56:50 -0700 Subject: [PATCH] chore: remove create react app getting started guide (#4532) Create React App is no longer maintained, so we will no longer recommend it --- .../__snapshots__/sitemap.test.ts.snap | 1 - docs/next.config.js | 8 + docs/src/data/links.tsx | 6 - .../examples/AdvancedExampleCode.tsx | 209 ------------------ .../examples/BasicExampleCode.tsx | 37 ---- .../create-react-app/examples/paintings.ts | 122 ---------- .../usage/create-react-app/index.page.mdx | 22 -- .../usage/create-react-app/react.mdx | 67 ------ 8 files changed, 8 insertions(+), 464 deletions(-) delete mode 100644 docs/src/pages/[platform]/getting-started/usage/create-react-app/examples/AdvancedExampleCode.tsx delete mode 100644 docs/src/pages/[platform]/getting-started/usage/create-react-app/examples/BasicExampleCode.tsx delete mode 100644 docs/src/pages/[platform]/getting-started/usage/create-react-app/examples/paintings.ts delete mode 100644 docs/src/pages/[platform]/getting-started/usage/create-react-app/index.page.mdx delete mode 100644 docs/src/pages/[platform]/getting-started/usage/create-react-app/react.mdx diff --git a/docs/__tests__/__snapshots__/sitemap.test.ts.snap b/docs/__tests__/__snapshots__/sitemap.test.ts.snap index ad30c0ec1b2..d40147b6f27 100644 --- a/docs/__tests__/__snapshots__/sitemap.test.ts.snap +++ b/docs/__tests__/__snapshots__/sitemap.test.ts.snap @@ -120,7 +120,6 @@ exports[`Sitemap Snapshot 1`] = ` /react/getting-started/migration, /react/getting-started/troubleshooting, /react/getting-started/usage, -/react/getting-started/usage/create-react-app, /react/getting-started/usage/nextjs, /react/getting-started/usage/vite, /react/guides, diff --git a/docs/next.config.js b/docs/next.config.js index 861c119d99c..be199d549bd 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -158,6 +158,14 @@ module.exports = withNextPluginPreval({ '/:platform(react|react-native|angular|vue)/connected-components/authenticator/advanced', permanent: true, }, + /** + * Redirect traffic from CRA to Vite getting started page + */ + { + source: '/react/getting-started/usage/create-react-app', + destination: '/react/getting-started/usage/vite', + permanent: true, + }, ]; }, diff --git a/docs/src/data/links.tsx b/docs/src/data/links.tsx index 364f56a06f3..3651c4e202c 100644 --- a/docs/src/data/links.tsx +++ b/docs/src/data/links.tsx @@ -613,12 +613,6 @@ export const gettingStarted: ComponentNavItem[] = [ platforms: ['react'], tertiary: true, }, - { - href: '/getting-started/usage/create-react-app', - label: 'Create React App', - platforms: ['react'], - tertiary: true, - }, { href: '/getting-started/figma', platforms: ['react'], diff --git a/docs/src/pages/[platform]/getting-started/usage/create-react-app/examples/AdvancedExampleCode.tsx b/docs/src/pages/[platform]/getting-started/usage/create-react-app/examples/AdvancedExampleCode.tsx deleted file mode 100644 index 91296bfad23..00000000000 --- a/docs/src/pages/[platform]/getting-started/usage/create-react-app/examples/AdvancedExampleCode.tsx +++ /dev/null @@ -1,209 +0,0 @@ -import * as React from 'react'; -import { - Alert, - Badge, - Button, - Card, - Collection, - Divider, - Flex, - Heading, - Image, - Rating, - SelectField, - StepperField, - SwitchField, - Text, - View, -} from '@aws-amplify/ui-react'; -import '@aws-amplify/ui-react/styles.css'; -import { PAINTINGS } from './paintings'; - -function App() { - const [currentPainting, setCurrentPainting] = React.useState(PAINTINGS[0]); - const [image, setImage] = React.useState(PAINTINGS[0].src); - const [frame, setFrame] = React.useState(true); - const [quantity, setQuantity] = React.useState(1); - const [size, setSize] = React.useState(''); - const [error, setError] = React.useState(false); - - const handleAddToCart = () => { - if (size === '') { - setError(true); - return; - } - alert( - `Added to cart!\n${quantity} ${size} "${currentPainting.title}" by ${ - currentPainting.artist - } with ${frame ? 'a' : 'no'} frame` - ); - }; - - return ( - - - - - - {`${currentPainting.title} - - - {(item, index) => ( - setImage(item.src)} - onMouseLeave={() => setImage(currentPainting.src)} - key={index} - justifyContent="center" - > - {`${item.title} setCurrentPainting(item)} - borderRadius="5px" - padding="3px" - marginBottom="1rem" - style={{ - cursor: 'pointer', - ...(currentPainting.src === item.src && { - border: '1px solid #e77600', - boxShadow: 'rgba(0, 0, 0, 0.35) 0px 3px 8px', - }), - }} - /> - - )} - - - - - - {currentPainting.title} - - {currentPainting.bestSeller ? ( - Bestseller - ) : null} - {currentPainting.isNew ? ( - New - ) : null} - {currentPainting.limitedSupply ? ( - Limited supply - ) : null} - - - {currentPainting.artist} - - - - {currentPainting.reviews} reviews - - - - - - Price: - - - {currentPainting.price} - - - - {currentPainting.description} - - {currentPainting.readyForPickup ? ( - - - Ready within 2 hours - {' '} - for pickup inside the store - - ) : null} - { - setFrame(e.target.checked); - }} - isDisabled={!currentPainting.inStock} - /> - { - e.target.value !== '' && setError(false); - setSize(e.target.value); - }} - hasError={error} - errorMessage="Please select a size." - isDisabled={!currentPainting.inStock} - > - - {!currentPainting.inStock ? ( - Out of stock! - ) : null} - - - - Qty: - - - - - - - - - ); -} - -export default App; diff --git a/docs/src/pages/[platform]/getting-started/usage/create-react-app/examples/BasicExampleCode.tsx b/docs/src/pages/[platform]/getting-started/usage/create-react-app/examples/BasicExampleCode.tsx deleted file mode 100644 index 22526f8ee8d..00000000000 --- a/docs/src/pages/[platform]/getting-started/usage/create-react-app/examples/BasicExampleCode.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Button, Flex, Heading, Image, Text } from '@aws-amplify/ui-react'; -import '@aws-amplify/ui-react/styles.css'; - -function App() { - return ( - - Abstract art - - Abstract art - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat - sed cras ornare arcu dui. Duis aute irure dolor in reprehenderit in - voluptate velit esse. - - - - - ); -} - -export default App; diff --git a/docs/src/pages/[platform]/getting-started/usage/create-react-app/examples/paintings.ts b/docs/src/pages/[platform]/getting-started/usage/create-react-app/examples/paintings.ts deleted file mode 100644 index c99c926f5ea..00000000000 --- a/docs/src/pages/[platform]/getting-started/usage/create-react-app/examples/paintings.ts +++ /dev/null @@ -1,122 +0,0 @@ -export const PAINTINGS = [ - { - title: 'Hallway', - artist: 'Efe Kurnaz', - src: 'https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat sed cras ornare arcu dui. Ac feugiat sed lectus vestibulum.', - price: '$899.99', - avgRating: 4.8, - reviews: 445, - inStock: true, - readyForPickup: true, - bestSeller: true, - isNew: false, - limitedSupply: false, - }, - { - title: 'Fire and Ice', - artist: 'Pawel Czerwinski', - src: 'https://images.unsplash.com/photo-1604871000636-074fa5117945?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987', - description: - 'Lorem ipsum dolor sit amet, ubique patrioque at qui, modo hinc ne duo, ad consul animal volumus est. Ea quo etiam deleniti, amet singulis in sed. Omnesque lobortis vis ex. Wisi latine splendide vis ei, libris commodo no has.', - price: '$699.99', - avgRating: 4.1, - reviews: 222, - inStock: true, - readyForPickup: true, - bestSeller: false, - isNew: false, - limitedSupply: false, - }, - { - title: 'Orange, pink, yellow', - artist: 'Kseniya Lapteva', - src: 'https://images.unsplash.com/photo-1629196914375-f7e48f477b6d?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1306', - description: - 'Lorem ipsum dolor sit amet, cu porro vivendum ius. Ad mei sint homero, cum an soluta epicurei. At pri minimum corrumpit. Minim percipitur eu mei, erant habemus deserunt qui et.', - price: '$139.99', - avgRating: 3.5, - reviews: 142, - inStock: true, - readyForPickup: false, - bestSeller: false, - isNew: true, - limitedSupply: false, - }, - { - title: 'Melted Purple', - artist: 'Maria Orlova', - src: 'https://images.unsplash.com/photo-1549490349-8643362247b5?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987', - description: - 'Lorem ipsum dolor sit amet, facer nemore ei sea, mea facilis eloquentiam at. Et modus pertinax tincidunt est. Propriae argumentum necessitatibus eos ad.', - price: '$499.99', - avgRating: 4.5, - reviews: 301, - inStock: true, - readyForPickup: true, - bestSeller: true, - isNew: false, - limitedSupply: false, - }, - { - title: 'Experimental', - artist: 'Bruno Thethe', - src: 'https://images.unsplash.com/photo-1550275994-cdc89cd1948f?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987', - description: - 'Lorem ipsum dolor sit amet, ea probo choro tollit pri, ad pro justo intellegam repudiandae, labores civibus eu quo. Cum latine instructior at, est no odio tibique epicuri.', - price: '$159.99', - avgRating: 3.1, - reviews: 56, - inStock: true, - readyForPickup: true, - bestSeller: false, - isNew: true, - limitedSupply: false, - }, - { - title: 'Rainbow', - artist: 'Felix Spiske', - src: 'https://images.unsplash.com/photo-1543857778-c4a1a3e0b2eb?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1310', - description: - 'Lorem ipsum dolor sit amet, sea tritani indoctum cu, facilis praesent at qui. Cu cetero veritus vel, et prima erant perfecto vix. Tollit delectus scaevola duo et, inermis sensibus voluptatum cu ius.', - price: '$799.99', - avgRating: 4.9, - reviews: 550, - inStock: true, - readyForPickup: false, - bestSeller: true, - isNew: false, - limitedSupply: true, - }, - { - title: 'Fearless Hue', - artist: 'Radienta', - src: 'https://images.unsplash.com/photo-1579547621113-e4bb2a19bdd6?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=939', - description: - 'Lorem ipsum dolor sit amet, te labore lucilius pro, te his consul singulis, cu vel unum impedit complectitur. In usu erat dicta doctus, purto aeterno vis te. Facete deterruisset nec id. At omittam antiopam pri.', - price: '$249.99', - avgRating: 3.3, - reviews: 294, - inStock: true, - readyForPickup: true, - bestSeller: false, - isNew: false, - limitedSupply: false, - }, - { - title: 'Liquid', - artist: 'Joel Filipe', - src: 'https://images.unsplash.com/photo-1485163819542-13adeb5e0068?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987', - description: - 'Lorem ipsum dolor sit amet, cum cu meliore tacimates, vel no sale maiorum. His cu autem placerat. Homero urbanitas vituperata ad sit, ex mel convenire elaboraret.', - price: '$549.99', - avgRating: 4.5, - reviews: 440, - inStock: false, - readyForPickup: false, - bestSeller: false, - isNew: false, - limitedSupply: true, - }, -]; diff --git a/docs/src/pages/[platform]/getting-started/usage/create-react-app/index.page.mdx b/docs/src/pages/[platform]/getting-started/usage/create-react-app/index.page.mdx deleted file mode 100644 index a92f1fcbd13..00000000000 --- a/docs/src/pages/[platform]/getting-started/usage/create-react-app/index.page.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Create React App -metaTitle: Create React App -description: How to get started using Amplify UI with Create React App -metaDescription: How to get started using Amplify UI with Create React App -supportedFrameworks: react ---- - -import { Fragment } from '@/components/Fragment'; -import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; - -export async function getStaticPaths() { - return getCustomStaticPath(frontmatter.supportedFrameworks); -} - -{/* `getStaticProps` is required to prevent "Error: getStaticPaths was added without a getStaticProps. Without getStaticProps, getStaticPaths does nothing" */} - -export async function getStaticProps() { - return { props: {} } -} - -{({ platform }) => import(`./react.mdx`)} diff --git a/docs/src/pages/[platform]/getting-started/usage/create-react-app/react.mdx b/docs/src/pages/[platform]/getting-started/usage/create-react-app/react.mdx deleted file mode 100644 index ab91da6c82f..00000000000 --- a/docs/src/pages/[platform]/getting-started/usage/create-react-app/react.mdx +++ /dev/null @@ -1,67 +0,0 @@ -import { Alert, Tabs, TabItem } from '@aws-amplify/ui-react'; -import { Example, ExampleCode } from '@/components/Example'; -import { BasicShoppingCard, AdvancedShoppingCard } from '../shared'; -import { InstallScripts, TerminalCommand } from '@/components/InstallScripts.tsx'; - - - The minimum version supported by Amplify UI is Create React App v5 ([Migration Guide](https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md#migrating-from-40x-to-500)). - If you have any issue with Create React App v4, check out [Trouble Shooting](/react/getting-started/troubleshooting#create-react-app). - - -## Tutorial - -In this brief tutorial, we're going to build a basic shopping card component using Create React App ([CRA](https://create-react-app.dev)) and Amplify UI. Then, we'll elaborate on our shopping card to play with the possibilities of using Amplify UI. - -### Setup and Installation - -First, execute the command below in your terminal: - - - -This creates a basic React app from scratch named `amplify-ui-demo`. For more information, see the [Create-React-App documentation](https://create-react-app.dev). - -Then, install the Amplify UI React package: - - - -### Basic Demo - -Open up the project in your IDE and replace the contents of the `App.js` file with the code below: - - - - -```tsx file=./examples/BasicExampleCode.tsx - -``` - - - - - -When you start the app (`npm/yarn start`), you should see a basic shopping card component. - -### Advanced Demo - -If you’d like to play around with a more comprehensive demo of the Amplify UI library, create a separate file under the `src` folder named `paintings.js`, and copy/paste this code into it: - - - -```tsx file=./examples/paintings.ts - -``` - - - -Then, replace the contents of `App.js` with the code below, restart the app, and experience all the beautiful components in action! - - - - -```tsx file=./examples/AdvancedExampleCode.tsx - -``` - - - -