Nextjs example app - Adding fonts and improving mobile scale (adobe#6745

) * Adding fonts, color components, and improving mobile scale * remving no longer needed dev code * removing unused import * removing ColorPicker due to nextjs bug #68476 * adding adobe clean font
p1pah · Aug 7, 2024 · 1af59d1 · 1af59d1
1 parent 4d8b655
commit 1af59d1
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 43 deletions.
diff --git a/examples/rsp-next-ts/package.json b/examples/rsp-next-ts/package.json
@@ -13,12 +13,12 @@
     "test": "jest"
   },
   "dependencies": {
-    "@adobe/react-spectrum": "^3.26.0",
-    "@react-aria/optimize-locales-plugin": "^1.0.0",
-    "@react-spectrum/color": "^3.0.0-beta.16",
+    "@adobe/react-spectrum": "^3.35.0",
+    "@react-aria/optimize-locales-plugin": "^1.1.0",
+    "@react-spectrum/color": "^3.0.0-beta.33",
     "@react-spectrum/provider": "^3.9.7",
-    "@react-spectrum/toast": "^3.0.0-alpha.0",
-    "@spectrum-icons/illustrations": "^3.5.0",
+    "@react-spectrum/toast": "^3.0.0-beta.11",
+    "@spectrum-icons/illustrations": "^3.6.12",
     "@spectrum-icons/workflow": "^4.2.12",
     "glob": "^10.3.12",
     "next": "^13.4.1",

diff --git a/examples/rsp-next-ts/pages/_app.tsx b/examples/rsp-next-ts/pages/_app.tsx
@@ -15,6 +15,7 @@ import Light from "@spectrum-icons/workflow/Light";
 import { ToastContainer } from "@react-spectrum/toast";
 import {enableTableNestedRows} from '@react-stately/flags';
 import {useRouter, type NextRouter} from 'next/router';
+import Script from 'next/script';
 
 declare module '@adobe/react-spectrum' {
   interface RouterConfig {
@@ -31,39 +32,53 @@ function MyApp({ Component, pageProps }: AppProps) {
   enableTableNestedRows();
 
   return (
-    <Provider
-      theme={lightTheme}
-      colorScheme={theme}
-      router={{
-        navigate: (href, opts) => router.push(href, undefined, opts),
-        useHref: (href: string) => router.basePath + href
-      }}
-      locale="en">
-      <Grid
-        areas={["header", "content"]}
-        columns={["1fr"]}
-        rows={["size-200", "auto"]}
-        gap="size-100"
-      >
-        <Flex
-          direction="row"
+    <>
+      <Script id="font-loading">
+        {
+          `(function(d) {
+            var config = {
+              kitId: 'uei1lip',
+              scriptTimeout: 3000,
+              async: true
+            },
+            h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
+          })(document);`
+        }
+      </Script>
+      <Provider
+        theme={lightTheme}
+        colorScheme={theme}
+        router={{
+          navigate: (href, opts) => router.push(href, undefined, opts),
+          useHref: (href: string) => router.basePath + href
+        }}
+        locale="en">
+        <Grid
+          areas={["header", "content"]}
+          columns={["1fr"]}
+          rows={["size-200", "auto"]}
           gap="size-100"
-          justifyContent="end"
-          margin="size-100"
         >
-          <ActionButton
-            aria-label={`Switch to ${otherTheme} mode.`}
-            onPress={() => setTheme(otherTheme)}
+          <Flex
+            direction="row"
+            gap="size-100"
+            justifyContent="end"
+            margin="size-100"
           >
-            {themeIcons[otherTheme]}
-          </ActionButton>
-        </Flex>
-        <View>
-          <Component {...pageProps} />
-        </View>
-      </Grid>
-      <ToastContainer />
-    </Provider>
+            <ActionButton
+              aria-label={`Switch to ${otherTheme} mode.`}
+              onPress={() => setTheme(otherTheme)}
+            >
+              {themeIcons[otherTheme]}
+            </ActionButton>
+          </Flex>
+          <View>
+            <Component {...pageProps} />
+          </View>
+        </Grid>
+        <ToastContainer />
+      </Provider>
+    </>
   );
 }
 export default MyApp;
diff --git a/examples/rsp-next-ts/pages/index.tsx b/examples/rsp-next-ts/pages/index.tsx
@@ -82,7 +82,7 @@ import {
   ColorSlider,
   ColorSwatch,
   ColorSwatchPicker,
-  ColorWheel,
+  ColorWheel
 } from "@react-spectrum/color";
 import ReorderableListView from "../components/ReorderableListView";
 import {ToastQueue} from '@react-spectrum/toast';
@@ -110,6 +110,7 @@ export default function Home() {
       <Head>
         <title>React Spectrum + NextJS</title>
         <meta name="description" content="React Spectrum + NextJS" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
@@ -240,16 +241,18 @@ export default function Home() {
           </Section>
 
           <Section title="Color">
-            <ColorArea defaultValue="#7f0000" />
             <ColorField label="Primary Color" />
+            <ColorSwatchPicker>
+              <ColorSwatch color="#A00" />
+              <ColorSwatch color="#f80" />
+              <ColorSwatch color="#080" />
+              <ColorSwatch color="#08f" />
+              <ColorSwatch color="#088" />
+              <ColorSwatch color="#008" />
+            </ColorSwatchPicker>
             <ColorSlider defaultValue="#7f0000" channel="red" />
+            <ColorArea defaultValue="#7f0000" />
             <ColorWheel defaultValue="hsl(30, 100%, 50%)" />
-            <ColorSwatchPicker defaultValue="#f00">
-              <ColorSwatch color="#f00" />
-              <ColorSwatch color="#0f0" />
-              <ColorSwatch color="#0ff" />
-              <ColorSwatch color="#00f" />
-            </ColorSwatchPicker>
           </Section>
 
           <Section title="Date and Time">