Skip to content

Commit ef1d79c

Browse files
nmnnmn
committed
[chore] Update examples to use an external package to test vite behaviour
1 parent c1f4f32 commit ef1d79c

File tree

21 files changed

+281
-131
lines changed

21 files changed

+281
-131
lines changed

‎examples/example-react-router/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33
"private": true,
44
"type": "module",
55
"scripts": {
6-
"example:build": "vite build",
6+
"example:build": "rimraf dist && vite build",
77
"example:dev": "cross-env NODE_ENV=development vite",
88
"example:start": "cross-env NODE_ENV=production node server.js",
99
"example:typecheck": "tsc --noEmit"
1010
},
1111
"dependencies": {
1212
"@stylexjs/stylex": "0.17.0",
13+
"shared-ui": "*",
1314
"@remix-run/node-fetch-server": "0.12.0",
1415
"compression": "^1.8.0",
1516
"express": "^5.1.0",

‎examples/example-react-router/src/routes/root/client.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
'use client';
22

33
import * as stylex from '@stylexjs/stylex';
4+
import { Button } from 'shared-ui';
5+
import { tokens } from 'shared-ui/tokens.stylex';
46
import {
57
isRouteErrorResponse,
68
Link,
@@ -33,6 +35,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
3335
<Link to="/" {...stylex.props(layoutStyles.brand)}>
3436
React Router 🚀
3537
</Link>
38+
<Button onClick={() => console.log('Router Test')}>Ext</Button>
3639
<nav>
3740
<ul {...stylex.props(layoutStyles.navList)}>
3841
<li>
@@ -117,7 +120,7 @@ const layoutStyles = stylex.create({
117120
brand: {
118121
fontSize: '1rem',
119122
fontWeight: 600,
120-
color: '#0f172a',
123+
color: tokens.primaryColor,
121124
textDecoration: 'none',
122125
},
123126
navList: {

‎examples/example-redwoodsdk/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
"react": "19.3.0-canary-561ee24d-20251101",
2727
"react-dom": "19.3.0-canary-561ee24d-20251101",
2828
"react-server-dom-webpack": "19.3.0-canary-561ee24d-20251101",
29-
"rwsdk": "1.0.0-beta.31"
29+
"rwsdk": "1.0.0-beta.31",
30+
"shared-ui": "*"
3031
},
3132
"devDependencies": {
3233
"@stylexjs/unplugin": "0.17.0",

‎examples/example-redwoodsdk/src/app/pages/Welcome.tsx‎

Lines changed: 98 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -7,81 +7,8 @@
77

88
import { useState } from 'react';
99
import * as stylex from '@stylexjs/stylex';
10-
11-
const styles = stylex.create({
12-
container: {
13-
maxWidth: 1100,
14-
marginInline: 'auto',
15-
paddingBlock: 80,
16-
paddingInline: 32,
17-
fontFamily:
18-
"Noto Sans, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
19-
color: '#1a1a1a',
20-
minHeight: '100vh',
21-
},
22-
header: { marginBottom: 64 },
23-
title: {
24-
fontFamily: 'Playfair Display, serif',
25-
fontSize: 64,
26-
fontWeight: 700,
27-
lineHeight: 0.9,
28-
margin: 0,
29-
},
30-
subtitle: {
31-
fontFamily:
32-
"Noto Sans, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
33-
fontSize: 26,
34-
marginTop: 12,
35-
},
36-
section: { marginBottom: 64 },
37-
sectionTitle: {
38-
fontFamily: 'Playfair Display, serif',
39-
fontSize: 40,
40-
fontWeight: 700,
41-
marginBottom: 16,
42-
},
43-
list: {
44-
listStylePosition: 'inside',
45-
listStyleType: 'decimal',
46-
paddingLeft: 0,
47-
fontSize: 20,
48-
lineHeight: 1.6,
49-
},
50-
listItem: { marginBottom: 12 },
51-
link: {
52-
color: '#f47238',
53-
fontWeight: 700,
54-
textDecorationLine: 'none',
55-
':hover': { color: '#ffad48' },
56-
},
57-
codeBlock: {
58-
backgroundColor: '#1b1b1b',
59-
color: '#ffad48',
60-
padding: 16,
61-
borderRadius: 8,
62-
fontFamily:
63-
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
64-
fontSize: 20,
65-
display: 'flex',
66-
alignItems: 'center',
67-
gap: 8,
68-
marginTop: 16,
69-
},
70-
codePrompt: { color: '#f47238' },
71-
code: { flexGrow: 1 },
72-
copyButton: {
73-
backgroundColor: 'transparent',
74-
color: '#ffad48',
75-
borderWidth: 0,
76-
borderRadius: 4,
77-
paddingBlock: 4,
78-
paddingInline: 12,
79-
cursor: 'pointer',
80-
fontSize: 16,
81-
fontWeight: 700,
82-
':hover': { backgroundColor: 'rgba(255,255,255,0.1)' },
83-
},
84-
});
10+
import { Button } from 'shared-ui';
11+
import { tokens } from 'shared-ui/tokens.stylex';
8512

8613
export const Welcome = () => {
8714
return (
@@ -152,6 +79,9 @@ export const Welcome = () => {
15279
.
15380
</p>
15481
</section>
82+
<section>
83+
<Button xstyle={styles.btn}>button from shared-ui</Button>
84+
</section>
15585
</main>
15686
</div>
15787
);
@@ -173,3 +103,96 @@ const Copy = ({ textToCopy }: { textToCopy: string }) => {
173103
</button>
174104
);
175105
};
106+
107+
const opacity = (color: string, percentage: number) =>
108+
`color-mix(in oklab, ${color} ${percentage}%, transparent)`;
109+
110+
const styles = stylex.create({
111+
container: {
112+
maxWidth: 1100,
113+
marginInline: 'auto',
114+
paddingBlock: 80,
115+
paddingInline: 32,
116+
fontFamily:
117+
"Noto Sans, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
118+
color: '#1a1a1a',
119+
minHeight: '100vh',
120+
},
121+
header: { marginBottom: 64 },
122+
title: {
123+
fontFamily: 'Playfair Display, serif',
124+
fontSize: 64,
125+
fontWeight: 700,
126+
lineHeight: 0.9,
127+
margin: 0,
128+
},
129+
subtitle: {
130+
fontFamily:
131+
"Noto Sans, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
132+
fontSize: 26,
133+
marginTop: 12,
134+
},
135+
section: { marginBottom: 64 },
136+
sectionTitle: {
137+
fontFamily: 'Playfair Display, serif',
138+
fontSize: 40,
139+
fontWeight: 700,
140+
marginBottom: 16,
141+
},
142+
list: {
143+
listStylePosition: 'inside',
144+
listStyleType: 'decimal',
145+
paddingLeft: 0,
146+
fontSize: 20,
147+
lineHeight: 1.6,
148+
},
149+
listItem: { marginBottom: 12 },
150+
link: {
151+
color: '#f47238',
152+
fontWeight: 700,
153+
textDecorationLine: 'none',
154+
':hover': { color: '#ffad48' },
155+
},
156+
codeBlock: {
157+
backgroundColor: '#1b1b1b',
158+
color: '#ffad48',
159+
padding: 16,
160+
borderRadius: 8,
161+
fontFamily:
162+
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
163+
fontSize: 20,
164+
display: 'flex',
165+
alignItems: 'center',
166+
gap: 8,
167+
marginTop: 16,
168+
},
169+
codePrompt: { color: '#f47238' },
170+
code: { flexGrow: 1 },
171+
copyButton: {
172+
backgroundColor: 'transparent',
173+
color: '#ffad48',
174+
borderWidth: 0,
175+
borderRadius: 4,
176+
paddingBlock: 4,
177+
paddingInline: 12,
178+
cursor: 'pointer',
179+
fontSize: 16,
180+
fontWeight: 700,
181+
':hover': { backgroundColor: 'rgba(255,255,255,0.1)' },
182+
},
183+
btn: {
184+
backgroundColor: {
185+
default: opacity(tokens.primaryColor, 50),
186+
':hover': opacity(tokens.primaryColor, 95),
187+
},
188+
transform: {
189+
default: null,
190+
':active': 'scale(0.97)',
191+
},
192+
transitionProperty: 'transform',
193+
transitionDuration: {
194+
default: '0.3s',
195+
':active': '0.05s',
196+
},
197+
},
198+
});

‎examples/example-vite-react/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"dependencies": {
1313
"react": "^19.2.0",
1414
"react-dom": "^19.2.0",
15-
"@stylexjs/stylex": "0.17.0"
15+
"@stylexjs/stylex": "0.17.0",
16+
"shared-ui": "*"
1617
},
1718
"devDependencies": {
1819
"@eslint/js": "^9.36.0",

‎examples/example-vite-react/src/App.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { useState } from 'react';
22
import reactLogo from './assets/react.svg';
33
import viteLogo from '/vite.svg';
44
import * as stylex from '@stylexjs/stylex';
5+
import { Button } from 'shared-ui';
6+
import { tokens } from 'shared-ui/tokens.stylex';
57

68
const spin = stylex.keyframes({
79
from: { transform: 'rotate(0deg)' },
@@ -50,7 +52,7 @@ const styles = stylex.create({
5052
textDecoration: 'none',
5153
},
5254
linkHover: { color: { default: null, ':hover': '#535bf2' } },
53-
h1: { fontSize: '3.2em', lineHeight: '1.1' },
55+
h1: { fontSize: '3.2em', lineHeight: '1.1', color: tokens.primaryColor },
5456
button: {
5557
borderRadius: 8,
5658
borderWidth: 1,
@@ -104,6 +106,9 @@ function App() {
104106
</div>
105107
<h1 {...stylex.props(styles.h1)}>Vite + React</h1>
106108
<div {...stylex.props(styles.card)}>
109+
<Button onClick={() => console.log('External lib works!')}>
110+
Test External Lib
111+
</Button>
107112
<button
108113
{...stylex.props(styles.button, styles.buttonInteractive)}
109114
onClick={() => setCount((count) => count + 1)}

‎examples/example-vite-rsc/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"dependencies": {
1313
"react": "^19.2.0",
1414
"react-dom": "^19.2.0",
15-
"@stylexjs/stylex": "0.17.0"
15+
"@stylexjs/stylex": "0.17.0",
16+
"shared-ui": "*"
1617
},
1718
"devDependencies": {
1819
"@types/react": "^19.2.6",

‎examples/example-vite-rsc/src/client.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,31 @@
22

33
import React from 'react';
44
import * as stylex from '@stylexjs/stylex';
5+
import { Button } from 'shared-ui';
6+
import { tokens } from 'shared-ui/tokens.stylex';
57

68
export function ClientCounter() {
79
const [count, setCount] = React.useState(0);
810

911
return (
10-
<button
11-
{...stylex.props(styles.base, styles.button)}
12-
onClick={() => setCount((count) => count + 1)}
13-
>
14-
Client Counter: {count}
15-
</button>
12+
<>
13+
<button
14+
{...stylex.props(styles.base, styles.button)}
15+
onClick={() => setCount((count) => count + 1)}
16+
>
17+
Client Counter: {count}
18+
</button>
19+
<div style={{ marginTop: 10 }}>
20+
<Button onClick={() => console.log('RSC works')}>External Lib</Button>
21+
</div>
22+
</>
1623
);
1724
}
1825

1926
const styles = stylex.create({
2027
base: {
2128
backgroundColor: 'orange',
29+
color: tokens.secondaryColor,
2230
},
2331
button: {
2432
borderRadius: 8,

‎examples/example-vite/index.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html>
2+
<html style="color-scheme: light dark">
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -9,5 +9,4 @@
99
<div id="root"></div>
1010
<script type="module" src="/src/main.jsx"></script>
1111
</body>
12-
</html>
13-
12+
</html>

‎examples/example-vite/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
"dependencies": {
1212
"react": "^19.2.0",
1313
"react-dom": "^19.2.0",
14-
"@stylexjs/stylex": "0.17.0"
14+
"@stylexjs/stylex": "0.17.0",
15+
"shared-ui": "*"
1516
},
1617
"devDependencies": {
1718
"vite": "^7.2.4",

0 commit comments

Comments
 (0)