aws-amplify · dbanksdesign · Aug 20, 2024 · Aug 8, 2024 · Aug 12, 2024 · Aug 13, 2024
@@ -23,7 +23,7 @@
     "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts"
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "6.1.14",
+    "@aws-amplify/ui-react": "6.2.0",
     "@docsearch/react": "3",
     "@mdx-js/loader": "^2.1.0",
     "@mdx-js/mdx": "^2.1.0",
@@ -53,7 +53,8 @@
     "remark-mdx-images": "^1.0.2",
     "rimraf": "^3.0.2",
     "sass": "^1.43.4",
-    "slugify": "^1.6.3"
+    "slugify": "^1.6.3",
+    "style-dictionary": "3.9.1"
   },
   "license": "MIT",
   "devDependencies": {

@@ -20,7 +20,7 @@
     "@angular/platform-browser": "^14.3.0",
     "@angular/platform-browser-dynamic": "^14.3.0",
     "@angular/router": "^14.3.0",
-    "@aws-amplify/ui-angular": "^5.0.18",
+    "@aws-amplify/ui-angular": "^5.0.19",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"

@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react-hooks/exhaustive-deps": "error" // override next eslint default
+  }
+}
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = nextConfig;
@@ -0,0 +1,22 @@
+{
+  "name": "@aws-amplify/ui-next-app-example",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@aws-amplify/ui-react": "^6.1.0",
+    "next": "^14.1.1",
+    "react": "18.2.0",
+    "react-dom": "^18",
+    "react-icons": "^4.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.31",
+    "eslint-config-next": "^13.5.5"
+  }
+}
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};
@@ -0,0 +1,7 @@
+@import '@aws-amplify/ui-react/styles/reset.css';
+@import '@aws-amplify/ui-react/styles.css';
+
+[data-amplify-theme] {
+  background-color: var(--amplify-colors-background-primary);
+  color: var(--amplify-colors-font-primary);
+}
@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Amplify UI Next App Router Example',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
@@ -0,0 +1,18 @@
+import { Avatar } from '@/components/Avatar';
+import { theme } from '@/theme';
+import Link from 'next/link';
+
+export default function Home() {
+  return (
+    <main>
+      <Link href="/theme">Theme</Link>
+      <Link href="/theme-switcher">Theme Switcher</Link>
+      <Avatar />
+
+      <div {...theme.containerProps({ colorMode: 'dark' })}>
+        <h2>{`I'm dark`}</h2>
+        <Avatar />
+      </div>
+    </main>
+  );
+}
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { ColorMode } from '@aws-amplify/ui-react';
+import { ThemeStyle } from '@aws-amplify/ui-react/server';
+import { theme } from '@/theme';
+import { Header } from '@/components/Header';
+import ThemeToggle from '@/components/ThemeToggle';
+import { cookies } from 'next/headers';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const cookieStore = cookies();
+  const colorMode = (cookieStore.get('colorMode')?.value ??
+    'dark') as ColorMode;
+
+  return (
+    <div {...theme.containerProps({ colorMode })}>
+      {/* Header */}
+      <Header>
+        Amplify UI RSC
+        <ThemeToggle initialValue={colorMode} />
+      </Header>
+      {children}
+      <ThemeStyle theme={theme} />
+    </div>
+  );
+}
@@ -0,0 +1,31 @@
+import { ThemeStyle } from '@aws-amplify/ui-react/server';
+import { Avatar } from '@/components/Avatar';
+import { theme } from '@/theme';
+
+export default function ThemeSwitcherPage() {
+  return (
+    <div
+      className="flex w-full flex-row"
+      style={{
+        backgroundColor: `var(--breakpoint-large, #f90)`,
+      }}
+    >
+      <Avatar size="small" />
+      <Avatar />
+      <Avatar size="large" />
+      <div {...theme.containerProps({ colorMode: 'dark' })}>
+        <div
+          className="flex w-full flex-row"
+          style={{
+            backgroundColor: `${theme.tokens.colors.background.primary}`,
+          }}
+        >
+          <Avatar size="small" />
+          <Avatar />
+          <Avatar size="large" />
+        </div>
+      </div>
+      <ThemeStyle theme={theme} />
+    </div>
+  );
+}
@@ -0,0 +1,30 @@
+import {
+  ThemeStyle,
+  createComponentClasses,
+} from '@aws-amplify/ui-react/server';
+import { theme } from '@/theme';
+
+const headingClasses = createComponentClasses({ name: 'heading' });
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex w-full flex-row">
+      <div className="flex-1 p-2">
+        <h2 className={headingClasses({ _modifiers: ['2'] })}>Custom theme</h2>
+
+        <ThemeStyle theme={theme} />
+        <section {...theme.containerProps({ colorMode: 'dark' })}>
+          {children}
+        </section>
+      </div>
+      <div className="flex-1 p-2">
+        <h2 className={headingClasses({ _modifiers: ['2'] })}>Default theme</h2>
+        {children}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,74 @@
+'use client';
+import { Avatar } from '@/components/Avatar';
+import { MyClientComponent } from '@/components/ClientComponent';
+import { MyServerComponent } from '@/components/ServerComponent';
+import { theme } from '@/theme';
+import {
+  Alert,
+  Badge,
+  BadgeProps,
+  Button,
+  Flex,
+  Heading,
+  Text,
+} from '@aws-amplify/ui-react';
+
+const colorThemes: BadgeProps['variation'][] = [
+  undefined,
+  'success',
+  'info',
+  'warning',
+  'error',
+];
+
+export default function ThemePage() {
+  return (
+    <Flex direction="column">
+      <Heading level={3}>Badges</Heading>
+      <Flex direction="row">
+        {colorThemes.map((colorTheme, i) => (
+          <Badge key={`${i}-${colorTheme}`} variation={colorTheme}>
+            {colorTheme || 'default'}
+          </Badge>
+        ))}
+      </Flex>
+      <Heading level={3}>Buttons</Heading>
+      <Flex direction="row">
+        {colorThemes.map((colorTheme, i) => (
+          <Button key={`${i}-${colorTheme}`} colorTheme={colorTheme}>
+            {colorTheme || 'default'}
+          </Button>
+        ))}
+      </Flex>
+      <Flex direction="row">
+        {colorThemes.map((colorTheme, i) => (
+          <Button
+            key={`${i}-${colorTheme}`}
+            variation="link"
+            colorTheme={colorTheme}
+          >
+            {colorTheme || 'default'}
+          </Button>
+        ))}
+      </Flex>
+      <Flex direction="row">
+        {colorThemes.map((colorTheme, i) => (
+          <Button
+            key={`${i}-${colorTheme}`}
+            variation="primary"
+            colorTheme={colorTheme}
+          >
+            {colorTheme || 'default'}
+          </Button>
+        ))}
+      </Flex>
+      <Avatar isDisabled />
+      <MyClientComponent />
+      <MyServerComponent />
+      <Text color={theme.tokens.colors.font.success}>Success!</Text>
+      <Alert heading="Hello" />
+      <Alert heading="Hello success" variation="success" />
+      <Alert heading="Hello" variation="info" />
+    </Flex>
+  );
+}