Skip to content

Commit 1af59d1

Browse files
ktaborsktabors
authored
Nextjs example app - Adding fonts and improving mobile scale (#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
1 parent 4d8b655 commit 1af59d1

File tree

3 files changed

+61
-43
lines changed

3 files changed

+61
-43
lines changed

‎examples/rsp-next-ts/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@
1313
"test": "jest"
1414
},
1515
"dependencies": {
16-
"@adobe/react-spectrum": "^3.26.0",
17-
"@react-aria/optimize-locales-plugin": "^1.0.0",
18-
"@react-spectrum/color": "^3.0.0-beta.16",
16+
"@adobe/react-spectrum": "^3.35.0",
17+
"@react-aria/optimize-locales-plugin": "^1.1.0",
18+
"@react-spectrum/color": "^3.0.0-beta.33",
1919
"@react-spectrum/provider": "^3.9.7",
20-
"@react-spectrum/toast": "^3.0.0-alpha.0",
21-
"@spectrum-icons/illustrations": "^3.5.0",
20+
"@react-spectrum/toast": "^3.0.0-beta.11",
21+
"@spectrum-icons/illustrations": "^3.6.12",
2222
"@spectrum-icons/workflow": "^4.2.12",
2323
"glob": "^10.3.12",
2424
"next": "^13.4.1",

‎examples/rsp-next-ts/pages/_app.tsx

Lines changed: 45 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import Light from "@spectrum-icons/workflow/Light";
1515
import { ToastContainer } from "@react-spectrum/toast";
1616
import {enableTableNestedRows} from '@react-stately/flags';
1717
import {useRouter, type NextRouter} from 'next/router';
18+
import Script from 'next/script';
1819

1920
declare module '@adobe/react-spectrum' {
2021
interface RouterConfig {
@@ -31,39 +32,53 @@ function MyApp({ Component, pageProps }: AppProps) {
3132
enableTableNestedRows();
3233

3334
return (
34-
<Provider
35-
theme={lightTheme}
36-
colorScheme={theme}
37-
router={{
38-
navigate: (href, opts) => router.push(href, undefined, opts),
39-
useHref: (href: string) => router.basePath + href
40-
}}
41-
locale="en">
42-
<Grid
43-
areas={["header", "content"]}
44-
columns={["1fr"]}
45-
rows={["size-200", "auto"]}
46-
gap="size-100"
47-
>
48-
<Flex
49-
direction="row"
35+
<>
36+
<Script id="font-loading">
37+
{
38+
`(function(d) {
39+
var config = {
40+
kitId: 'uei1lip',
41+
scriptTimeout: 3000,
42+
async: true
43+
},
44+
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)
45+
})(document);`
46+
}
47+
</Script>
48+
<Provider
49+
theme={lightTheme}
50+
colorScheme={theme}
51+
router={{
52+
navigate: (href, opts) => router.push(href, undefined, opts),
53+
useHref: (href: string) => router.basePath + href
54+
}}
55+
locale="en">
56+
<Grid
57+
areas={["header", "content"]}
58+
columns={["1fr"]}
59+
rows={["size-200", "auto"]}
5060
gap="size-100"
51-
justifyContent="end"
52-
margin="size-100"
5361
>
54-
<ActionButton
55-
aria-label={`Switch to ${otherTheme} mode.`}
56-
onPress={() => setTheme(otherTheme)}
62+
<Flex
63+
direction="row"
64+
gap="size-100"
65+
justifyContent="end"
66+
margin="size-100"
5767
>
58-
{themeIcons[otherTheme]}
59-
</ActionButton>
60-
</Flex>
61-
<View>
62-
<Component {...pageProps} />
63-
</View>
64-
</Grid>
65-
<ToastContainer />
66-
</Provider>
68+
<ActionButton
69+
aria-label={`Switch to ${otherTheme} mode.`}
70+
onPress={() => setTheme(otherTheme)}
71+
>
72+
{themeIcons[otherTheme]}
73+
</ActionButton>
74+
</Flex>
75+
<View>
76+
<Component {...pageProps} />
77+
</View>
78+
</Grid>
79+
<ToastContainer />
80+
</Provider>
81+
</>
6782
);
6883
}
6984
export default MyApp;

‎examples/rsp-next-ts/pages/index.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ import {
8282
ColorSlider,
8383
ColorSwatch,
8484
ColorSwatchPicker,
85-
ColorWheel,
85+
ColorWheel
8686
} from "@react-spectrum/color";
8787
import ReorderableListView from "../components/ReorderableListView";
8888
import {ToastQueue} from '@react-spectrum/toast';
@@ -110,6 +110,7 @@ export default function Home() {
110110
<Head>
111111
<title>React Spectrum + NextJS</title>
112112
<meta name="description" content="React Spectrum + NextJS" />
113+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
113114
<link rel="icon" href="/favicon.ico" />
114115
</Head>
115116

@@ -240,16 +241,18 @@ export default function Home() {
240241
</Section>
241242

242243
<Section title="Color">
243-
<ColorArea defaultValue="#7f0000" />
244244
<ColorField label="Primary Color" />
245+
<ColorSwatchPicker>
246+
<ColorSwatch color="#A00" />
247+
<ColorSwatch color="#f80" />
248+
<ColorSwatch color="#080" />
249+
<ColorSwatch color="#08f" />
250+
<ColorSwatch color="#088" />
251+
<ColorSwatch color="#008" />
252+
</ColorSwatchPicker>
245253
<ColorSlider defaultValue="#7f0000" channel="red" />
254+
<ColorArea defaultValue="#7f0000" />
246255
<ColorWheel defaultValue="hsl(30, 100%, 50%)" />
247-
<ColorSwatchPicker defaultValue="#f00">
248-
<ColorSwatch color="#f00" />
249-
<ColorSwatch color="#0f0" />
250-
<ColorSwatch color="#0ff" />
251-
<ColorSwatch color="#00f" />
252-
</ColorSwatchPicker>
253256
</Section>
254257

255258
<Section title="Date and Time">

0 commit comments

Comments
 (0)