Skip to content

Commit dbb6385

Browse files
shadcnshadcn
authored
feat: add with-reflexjs example (vercel#24068)
This PR adds an example for using Next.js with [Reflexjs](https://reflexjs.org). Thank You ## Documentation / Examples - [x] Make sure the linting passes
1 parent efb2b8b commit dbb6385

File tree

9 files changed

+347
-0
lines changed

9 files changed

+347
-0
lines changed

‎examples/with-reflexjs/.babelrc‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"presets": [
3+
[
4+
"next/babel",
5+
{
6+
"preset-react": {
7+
"runtime": "automatic",
8+
"importSource": "reflexjs"
9+
}
10+
}
11+
]
12+
]
13+
}

‎examples/with-reflexjs/.gitignore‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel

‎examples/with-reflexjs/README.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Next.js + Reflexjs Example
2+
3+
Reflexjs is a library for rapid UI development with style props, color modes, themes and variants.
4+
5+
This example shows how to use [Reflexjs](https://github.com/reflexjs/reflexjs) with Next.js.
6+
7+
## Deploy your own
8+
9+
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
10+
11+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-reflexjs&project-name=with-reflexjs&repository-name=with-reflexjs)
12+
13+
## How to use
14+
15+
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
16+
17+
```bash
18+
npx create-next-app --example with-reflexjs with-reflexjs-app
19+
# or
20+
yarn create next-app --example with-reflexjs with-reflexjs-app
21+
```
22+
23+
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

‎examples/with-reflexjs/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "with-reflexjs",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"scripts": {
6+
"dev": "next",
7+
"build": "next build",
8+
"start": "next start"
9+
},
10+
"dependencies": {
11+
"next": "latest",
12+
"react": "^17.0.2",
13+
"react-dom": "^17.0.2",
14+
"reflexjs": "^2.0.0"
15+
},
16+
"devDependencies": {
17+
"@babel/core": "^7.12.9",
18+
"@types/node": "^14.14.12",
19+
"@types/react": "^17.0.0",
20+
"typescript": "^4.1.2"
21+
}
22+
}

‎examples/with-reflexjs/pages/_app.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { AppProps } from 'next/app'
2+
import { ThemeProvider } from 'reflexjs'
3+
import theme from '../src/theme'
4+
5+
export default function App({ Component, pageProps }: AppProps) {
6+
return (
7+
<ThemeProvider theme={theme}>
8+
<Component {...pageProps} />
9+
</ThemeProvider>
10+
)
11+
}

‎examples/with-reflexjs/pages/_document.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import NextDocument, { Html, Main, NextScript, Head } from 'next/document'
2+
import { InitializeColorMode } from 'reflexjs'
3+
4+
export default class Document extends NextDocument {
5+
render() {
6+
return (
7+
<Html lang="en">
8+
<Head />
9+
<body>
10+
<InitializeColorMode />
11+
<Main />
12+
<NextScript />
13+
</body>
14+
</Html>
15+
)
16+
}
17+
}

‎examples/with-reflexjs/pages/index.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export default function IndexPage() {
2+
return (
3+
<div variant="container" textAlign="center" py="20">
4+
<h1 variant="heading.h1">
5+
Welcome to <span color="primary">Reflexjs</span>
6+
</h1>
7+
<p fontSize="xl" my="4">
8+
Get started by editing pages/index.tsx
9+
</p>
10+
<a href="https://reflexjs.org/docs" variant="button.primary">
11+
Read the docs
12+
</a>
13+
</div>
14+
)
15+
}

‎examples/with-reflexjs/src/theme.ts‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
import { Theme } from 'reflexjs'
2+
3+
const theme: Theme = {
4+
useRootStyles: true,
5+
initialColorModeName: 'light',
6+
colors: {
7+
text: '#191924',
8+
background: '#fff',
9+
primary: '#06f',
10+
border: '#ebece9',
11+
modes: {
12+
dark: {
13+
text: '#ededee',
14+
background: '#1a202c',
15+
primary: '#06f',
16+
border: '#2a2a3c',
17+
},
18+
},
19+
},
20+
breakpoints: ['640px', '768px', '1024px', '1280px'],
21+
fonts: {
22+
body:
23+
'-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji',
24+
heading: 'inherit',
25+
monospace:
26+
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
27+
},
28+
fontSizes: {
29+
sm: '0.875rem',
30+
md: '1rem',
31+
lg: '3rem',
32+
},
33+
fontWeights: {
34+
normal: 400,
35+
medium: 500,
36+
bold: 700,
37+
},
38+
space: {
39+
0: '0',
40+
1: '0.25rem',
41+
2: '0.5rem',
42+
3: '0.75rem',
43+
4: '1rem',
44+
5: '1.25rem',
45+
6: '1.5rem',
46+
7: '1.75rem',
47+
8: '2rem',
48+
9: '2.25rem',
49+
10: '2.5rem',
50+
},
51+
sizes: {
52+
0: '0',
53+
1: '0.25rem',
54+
2: '0.5rem',
55+
3: '0.75rem',
56+
4: '1rem',
57+
5: '1.25rem',
58+
6: '1.5rem',
59+
7: '1.75rem',
60+
8: '2rem',
61+
9: '2.25rem',
62+
10: '2.5rem',
63+
auto: 'auto',
64+
half: '50%',
65+
full: '100%',
66+
screen: '100vw',
67+
},
68+
borders: [0, '1px solid'],
69+
radii: {
70+
none: '0',
71+
sm: '0.125rem',
72+
md: '0.25rem',
73+
lg: '0.375rem',
74+
xl: '0.5rem',
75+
},
76+
shadows: {
77+
none: 'none',
78+
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
79+
md: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
80+
lg: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
81+
},
82+
gridTemplateColumns: {
83+
none: 'none',
84+
1: 'repeat(1, minmax(0, 1fr))',
85+
2: 'repeat(2, minmax(0, 1fr))',
86+
3: 'repeat(3, minmax(0, 1fr))',
87+
},
88+
gridTemplateRows: {
89+
none: 'none',
90+
1: 'repeat(1, minmax(0, 1fr))',
91+
2: 'repeat(2, minmax(0, 1fr))',
92+
3: 'repeat(3, minmax(0, 1fr))',
93+
},
94+
styles: {
95+
root: {
96+
fontFamily: 'body',
97+
fontSize: 16,
98+
lineHeight: 'normal',
99+
fontFeatureSettings: "'kern'",
100+
textRendering: 'optimizeLegibility',
101+
WebkitFontSmoothing: 'antialiased',
102+
'*': {
103+
listStyle: 'none',
104+
border: '0 solid',
105+
borderColor: 'border',
106+
m: 0,
107+
p: 0,
108+
109+
'::selection': {
110+
bg: 'selection',
111+
},
112+
},
113+
body: {
114+
color: 'text',
115+
fontFamily: 'body',
116+
fontWeight: 'normal',
117+
fontSize: 'md',
118+
lineHeight: 'relaxed',
119+
letterSpacing: 'normal',
120+
},
121+
},
122+
},
123+
124+
// Variants.
125+
text: {
126+
paragraph: {
127+
fontSize: 'lg',
128+
my: 8,
129+
lineHeight: 8,
130+
},
131+
},
132+
133+
heading: {
134+
color: 'heading',
135+
fontFamily: 'heading',
136+
fontWeight: 'semibold',
137+
lineHeight: 'tight',
138+
letterSpacing: 'tight',
139+
140+
h1: {
141+
fontWeight: 'bold',
142+
lineHeight: '1.1',
143+
fontSize: 'lg',
144+
},
145+
},
146+
147+
container: {
148+
px: '6|6|6|4',
149+
mx: 'auto',
150+
maxWidth: 1280,
151+
},
152+
153+
button: {
154+
display: 'inline-flex',
155+
alignItems: 'center',
156+
justifyContent: 'center',
157+
color: 'text',
158+
bg: 'muted',
159+
fontFamily: 'body',
160+
fontSize: 'md',
161+
fontWeight: 'medium',
162+
lineHeight: 'none',
163+
textDecoration: 'none',
164+
border: '1px solid',
165+
borderColor: 'border',
166+
borderRadius: 'md',
167+
px: 4,
168+
py: 3,
169+
cursor: 'pointer',
170+
transition: 'all .15s ease-in',
171+
172+
':hover, :focus': {
173+
transform: 'translateY(-2px)',
174+
boxShadow: 'lg',
175+
},
176+
177+
primary: {
178+
bg: 'primary',
179+
color: 'white',
180+
borderColor: 'primary',
181+
182+
'&:hover, &:focus': {
183+
bg: 'primaryHover',
184+
color: 'white',
185+
borderColor: 'primaryHover',
186+
transform: 'translateY(-2px)',
187+
boxShadow: 'lg',
188+
},
189+
},
190+
},
191+
}
192+
193+
export default theme

‎examples/with-reflexjs/tsconfig.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["dom", "dom.iterable", "esnext"],
5+
"allowJs": true,
6+
"skipLibCheck": true,
7+
"strict": false,
8+
"forceConsistentCasingInFileNames": true,
9+
"noEmit": true,
10+
"esModuleInterop": true,
11+
"module": "esnext",
12+
"moduleResolution": "node",
13+
"resolveJsonModule": true,
14+
"isolatedModules": true,
15+
"jsx": "preserve"
16+
},
17+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
18+
"exclude": ["node_modules"]
19+
}

0 commit comments

Comments
 (0)