updated with-orbit-components example to utilize the App Router. (#73266

) This PR updates the with-orbit-components example for using the App Router. Here are the changes that have been made: - I renamed the `pages` folder and moved it to the `app` folder. - Added the layout.tsx file as part of the App Router. - Updated the package.json file. CC: @samcx --------- Co-authored-by: Sam Ko <sam@vercel.com>
vercel · Dec 17, 2024 · d3bb11e · d3bb11e
1 parent f54d597
commit d3bb11e
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 71 deletions.
diff --git a/examples/with-orbit-components/.babelrc b/examples/with-orbit-components/.babelrc
diff --git a/examples/with-orbit-components/app/globals.css b/examples/with-orbit-components/app/globals.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-gray-50 text-gray-900;
+  }
+}
diff --git a/examples/with-orbit-components/app/layout.tsx b/examples/with-orbit-components/app/layout.tsx
@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "With Orbit Components",
+  description: "Next.js example with Orbit components.",
+};
+
+const inter = Inter({
+  display: "swap",
+  subsets: ["latin"],
+  weight: ["400", "500", "600"],
+});
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
diff --git a/...ples/with-orbit-components/pages/index.js → examples/with-orbit-components/app/page.tsx b/...ples/with-orbit-components/pages/index.js → examples/with-orbit-components/app/page.tsx
@@ -1,13 +1,12 @@
-import React from "react";
 import { Alert, Illustration } from "@kiwicom/orbit-components";
 
 export default function Home() {
   return (
-    <React.Fragment>
+    <div>
       <Alert type="success" spaceAfter="large">
         It Works!
       </Alert>
       <Illustration name="Success" />
-    </React.Fragment>
+    </div>
   );
 }
diff --git a/examples/with-orbit-components/package.json b/examples/with-orbit-components/package.json
@@ -1,19 +1,22 @@
 {
   "private": true,
   "scripts": {
-    "dev": "next",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "@kiwicom/orbit-components": "latest",
+    "@kiwicom/orbit-components": "^18.1.1",
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^5.3.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@kiwicom/babel-plugin-orbit-components": "latest",
-    "babel-plugin-styled-components": "^1.8.0"
+    "autoprefixer": "^10.4.20",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.1",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16",
+    "typescript": "^5.7.2"
   }
 }
diff --git a/examples/with-orbit-components/pages/_app.js b/examples/with-orbit-components/pages/_app.js
diff --git a/examples/with-orbit-components/pages/_document.js b/examples/with-orbit-components/pages/_document.js
diff --git a/examples/with-orbit-components/tailwind.config.js b/examples/with-orbit-components/tailwind.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx}", // For App Router
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/examples/with-orbit-components/tsconfig.json b/examples/with-orbit-components/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}