Update app directory examples to use the new examples UI (#749)

### Description Updated the app directory examples that were duplicating components from the `@vercel/examples-ui` library to the latest version of the library. Also updated the plop template and replaced all options with a default Next.js template, we can later extend it with svelte and more. ### Demo URL  ### Type of Change - [ ] New Example - [x] Example updates (Bug fixes, new features, etc.) - [x] Other (changes to the codebase, but not to examples) ### New Example Checklist - [ ] 🛫 `npm run new-example` was used to create the example - [ ] 📚 The template wasn't used but I carefuly read the [Adding a new example](https://github.com/vercel/examples#adding-a-new-example) steps and implemented them in the example - [ ] 📱 Is it responsive? Are mobile and tablets considered?
vercel · Jul 19, 2023 · 3ba01f8 · 3ba01f8 · vercel · Jul 19, 2023
1 parent dc9791a
commit 3ba01f8
Show file tree

Hide file tree

Showing 53 changed files with 6,353 additions and 5,564 deletions.
diff --git a/app-directory/css-in-js/app/demo/layout.tsx b/app-directory/css-in-js/app/demo/layout.tsx
@@ -1,8 +1,8 @@
-import type { FC, ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { Page } from '@vercel/examples-ui'
 import Providers from './providers'
 
-const RootLayout: FC<{ children: ReactNode }> = ({ children }) => (
+const RootLayout = ({ children }: { children: ReactNode }) => (
   <Page className="flex flex-col gap-6">
     <Providers>{children}</Providers>
   </Page>

diff --git a/app-directory/css-in-js/app/demo/providers.tsx b/app-directory/css-in-js/app/demo/providers.tsx
@@ -1,9 +1,9 @@
 'use client'
 
-import type { FC, ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { ChakraProvider } from '@chakra-ui/react'
 
-const Providers: FC<{ children: ReactNode }> = ({ children }) => (
+const Providers = ({ children }: { children: ReactNode }) => (
   <ChakraProvider>{children}</ChakraProvider>
 )
 

diff --git a/app-directory/css-in-js/app/demo/showcase.tsx b/app-directory/css-in-js/app/demo/showcase.tsx
@@ -14,7 +14,7 @@ import {
   Button,
 } from '@chakra-ui/react'
 
-export const Buttons: React.FC = () => {
+export const Buttons = () => {
   return (
     <Stack direction="row" spacing={4} align="center">
       <Button variant="outline">Button</Button>
@@ -24,7 +24,7 @@ export const Buttons: React.FC = () => {
   )
 }
 
-export const Tabs: React.FC = () => {
+export const Tabs = () => {
   return (
     <ChakraTabs>
       <TabList>
@@ -48,7 +48,7 @@ export const Tabs: React.FC = () => {
   )
 }
 
-export const Skeletons: React.FC = () => {
+export const Skeletons = () => {
   return (
     <>
       <Stack>

diff --git a/app-directory/css-in-js/app/head.tsx b/app-directory/css-in-js/app/head.tsx
diff --git a/app-directory/css-in-js/app/layout.tsx b/app-directory/css-in-js/app/layout.tsx
@@ -1,34 +1,19 @@
-import type { FC, ReactNode } from 'react'
-import Nav from '@vercel/examples-ui/nav'
-import Vercel from '@vercel/examples-ui/icons/vercel'
+import type { ReactNode } from 'react'
+import { Layout, getMetadata } from '@vercel/examples-ui'
 import '@vercel/examples-ui/globals.css'
 
-const RootLayout: FC<{ children: ReactNode }> = ({ children }) => (
-  <html>
-    <body>
-      <div className="mx-auto h-screen flex flex-col">
-        <Nav path="app-directory/css-in-js" />
-        <div className="px-8 bg-accents-0">
-          <main>{children}</main>
-          <footer className="py-10 w-full mt-auto border-t flex items-center justify-center bg-accents-1 z-20">
-            <span className="text-primary">Created by</span>
-            <a
-              href="https://vercel.com"
-              aria-label="Vercel.com Link"
-              target="_blank"
-              rel="noreferrer"
-              className="text-black"
-            >
-              <Vercel
-                className="inline-block h-6 ml-3 text-primary"
-                alt="Vercel.com Logo"
-              />
-            </a>
-          </footer>
-        </div>
-      </div>
-    </body>
-  </html>
-)
+export const metadata = getMetadata({
+  title: 'CSS-in-JS libraries in the app directory',
+  description:
+    'Learn how to use CSS-in-JS libraries in the Next.js app directory.',
+})
 
-export default RootLayout
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <Layout path="app-directory/css-in-js">{children}</Layout>
+      </body>
+    </html>
+  )
+}
diff --git a/app-directory/css-in-js/app/page.tsx b/app-directory/css-in-js/app/page.tsx
@@ -91,7 +91,9 @@ export default IndexPage
 
       <section className="flex flex-col gap-4">
         <Text variant="h2">Demo</Text>
-        <Link href="/demo">Click here to see a working demo</Link>.
+        <Text>
+          <Link href="/demo">Click here to see a working demo</Link>.
+        </Text>
       </section>
     </Page>
   )

diff --git a/app-directory/css-in-js/package.json b/app-directory/css-in-js/package.json
@@ -10,24 +10,24 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.5.1",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@vercel/examples-ui": "latest",
-    "framer-motion": "^6.5.1",
-    "next": "latest",
-    "react": "latest",
-    "react-dom": "latest"
+    "@chakra-ui/react": "^2.7.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@vercel/examples-ui": "^2.0.1",
+    "framer-motion": "^10.12.22",
+    "next": "^13.4.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^17.0.45",
-    "@types/react": "latest",
+    "@types/node": "^20.4.2",
+    "@types/react": "^18.2.15",
     "autoprefixer": "^10.4.14",
-    "eslint": "latest",
-    "eslint-config-next": "canary",
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.7",
-    "turbo": "^1.8.3",
-    "typescript": "^4.9.5"
+    "eslint": "^8.45.0",
+    "eslint-config-next": "^13.4.10",
+    "postcss": "^8.4.26",
+    "tailwindcss": "^3.3.3",
+    "turbo": "^1.10.8",
+    "typescript": "^5.1.6"
   }
 }