Skip to content

Commit 0eb8990

Browse files
tobuatobua
committed
feat(react): continue native React implementation
1 parent 2d0e236 commit 0eb8990

11 files changed

+416
-753
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ demo/.gitignore
66
cypress/fixtures
77
cypress/screenshots
88
cypress/support
9+
.next

‎demo-ssr/astro.config.mjs

-6
This file was deleted.

‎demo-ssr/next-env.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎demo-ssr/package.json

+23-11
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,32 @@
11
{
2-
"name": "indicate-ssr-demo",
3-
"version": "0.0.1",
2+
"name": "indicate-demo-ssr",
43
"scripts": {
5-
"dev": "astro dev",
6-
"start": "astro dev",
7-
"build": "astro build",
8-
"preview": "astro preview",
9-
"astro": "astro"
4+
"dev": "next dev",
5+
"build": "next build",
6+
"start": "next start",
7+
"lint": "next lint"
8+
},
9+
"prettier": {
10+
"semi": false,
11+
"singleQuote": true,
12+
"printWidth": 100
13+
},
14+
"eslintConfig": {
15+
"extends": "next/core-web-vitals",
16+
"root": true
1017
},
1118
"dependencies": {
12-
"astro": "^1.2.6",
19+
"next": "12.3.1",
20+
"react": "18.2.0",
21+
"react-dom": "18.2.0",
1322
"indicate": "file:.."
1423
},
1524
"devDependencies": {
16-
"@astrojs/react": "^1.1.3",
17-
"react": "^18.2.0",
18-
"react-dom": "^18.2.0"
25+
"@types/node": "18.8.3",
26+
"@types/react": "18.0.21",
27+
"@types/react-dom": "18.0.6",
28+
"eslint": "8.25.0",
29+
"eslint-config-next": "12.3.1",
30+
"typescript": "4.8.4"
1931
}
2032
}

‎demo-ssr/pages/index.tsx

+237
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
import type { NextPage } from 'next'
2+
import Head from 'next/head'
3+
import { Indicate } from 'indicate'
4+
5+
const Box = () => (
6+
<div
7+
style={{
8+
display: 'flex',
9+
width: 50,
10+
height: 50,
11+
background: 'lightblue',
12+
borderRadius: 5,
13+
marginRight: 10,
14+
}}
15+
/>
16+
)
17+
18+
const FewBoxes = () => (
19+
<>
20+
<Box />
21+
<Box />
22+
<Box />
23+
</>
24+
)
25+
26+
const Boxes = () => (
27+
<>
28+
<Box />
29+
<Box />
30+
<Box />
31+
<Box />
32+
<Box />
33+
<Box />
34+
<Box />
35+
<Box />
36+
<Box />
37+
<Box />
38+
<Box />
39+
<Box />
40+
<Box />
41+
<Box />
42+
<Box />
43+
<Box />
44+
<Box />
45+
<Box />
46+
<Box />
47+
<Box />
48+
</>
49+
)
50+
51+
const Table = () => (
52+
<tbody>
53+
<tr>
54+
<th>Company</th>
55+
<th>Contact</th>
56+
<th>Country</th>
57+
</tr>
58+
<tr>
59+
<td style={{ whiteSpace: 'nowrap' }}>Alfreds Futterkiste</td>
60+
<td style={{ whiteSpace: 'nowrap' }}>Maria Anders and Much More Text</td>
61+
<td style={{ whiteSpace: 'nowrap' }}>Germany and Some More Text</td>
62+
</tr>
63+
<tr>
64+
<td style={{ whiteSpace: 'nowrap' }}>Centro comercial Moctezuma</td>
65+
<td style={{ whiteSpace: 'nowrap' }}>Francisco Chang</td>
66+
<td style={{ whiteSpace: 'nowrap' }}>Mexico and Some More Text</td>
67+
</tr>
68+
<tr>
69+
<td style={{ whiteSpace: 'nowrap' }}>Centro comercial Moctezuma</td>
70+
<td style={{ whiteSpace: 'nowrap' }}>Francisco Chang</td>
71+
<td style={{ whiteSpace: 'nowrap' }}>Mexico and Some More Text</td>
72+
</tr>
73+
<tr>
74+
<td style={{ whiteSpace: 'nowrap' }}>Centro comercial Moctezuma</td>
75+
<td style={{ whiteSpace: 'nowrap' }}>Francisco Chang</td>
76+
<td style={{ whiteSpace: 'nowrap' }}>Mexico and Some More Text</td>
77+
</tr>
78+
</tbody>
79+
)
80+
81+
const Home: NextPage = () => {
82+
return (
83+
<>
84+
<Head>
85+
<title>Home</title>
86+
</Head>
87+
<main style={{ fontFamily: 'sans-serif', margin: 'auto', maxWidth: '60ch' }}>
88+
<h1>Indicate SSR</h1>
89+
<pre>{`<Indicate>`}</pre>
90+
<Indicate>
91+
<Boxes />
92+
</Indicate>
93+
<pre>{`<Indicate>`}</pre>
94+
<Indicate>
95+
<FewBoxes />
96+
</Indicate>
97+
<pre>{`<Indicate horizontal>`}</pre>
98+
<Indicate horizontal>
99+
<Boxes />
100+
</Indicate>
101+
<pre>{`<Indicate arrow={false}>`}</pre>
102+
<Indicate arrow={false}>
103+
<Boxes />
104+
</Indicate>
105+
<pre>{`<Indicate style={{ height: '90px' }}>`}</pre>
106+
<Indicate style={{ height: '90px' }}>
107+
<div style={{ display: 'flex', flexDirection: 'column', rowGap: '10px' }}>
108+
<div style={{ display: 'flex', flexDirection: 'row' }}>
109+
<Boxes />
110+
</div>
111+
<div style={{ display: 'flex', flexDirection: 'row' }}>
112+
<Boxes />
113+
</div>
114+
</div>
115+
</Indicate>
116+
<pre>{`<Indicate color="red">`}</pre>
117+
<Indicate color="red">
118+
<Boxes />
119+
</Indicate>
120+
<pre>{`<Indicate width="80px">`}</pre>
121+
<Indicate width="80px">
122+
<Boxes />
123+
</Indicate>
124+
<pre>{`<Indicate as="table">
125+
<Indicate style={{ display: 'inline' }}>`}</pre>
126+
<Indicate as="table" style={{ height: '90px' }}>
127+
<Table />
128+
</Indicate>
129+
<h2>Hydrated</h2>
130+
<pre>{`<Indicate client:load>`}</pre>
131+
<Indicate>
132+
<Boxes />
133+
</Indicate>
134+
<pre>{`<Indicate>`}</pre>
135+
<Indicate>
136+
<FewBoxes />
137+
</Indicate>
138+
<pre>{`<Indicate horizontal>`}</pre>
139+
<Indicate horizontal>
140+
<Boxes />
141+
</Indicate>
142+
<pre>{`<Indicate arrow={false}>`}</pre>
143+
<Indicate arrow={false}>
144+
<Boxes />
145+
</Indicate>
146+
<pre>{`<Indicate click={false}>`}</pre>
147+
<Indicate click={false}>
148+
<Boxes />
149+
</Indicate>
150+
<pre>{`<Indicate style={{ height: '90px' }}>`}</pre>
151+
<Indicate style={{ height: '90px' }}>
152+
<div style={{ display: 'flex', flexDirection: 'column', rowGap: '10px' }}>
153+
<div style={{ display: 'flex', flexDirection: 'row' }}>
154+
<Boxes />
155+
</div>
156+
<div style={{ display: 'flex', flexDirection: 'row' }}>
157+
<Boxes />
158+
</div>
159+
</div>
160+
</Indicate>
161+
<pre>{`<Indicate color="red">`}</pre>
162+
<Indicate color="red">
163+
<Boxes />
164+
</Indicate>
165+
<pre>{`<Indicate width="80px">`}</pre>
166+
<Indicate width="80px">
167+
<Boxes />
168+
</Indicate>
169+
<pre>{`<Indicate arrow={{ icon: 'pointer' }}>`}</pre>
170+
<Indicate arrow={{ icon: 'pointer' }}>
171+
<Boxes />
172+
</Indicate>
173+
<pre>{`<Indicate arrow={{ color: 'blue' }}>`}</pre>
174+
<Indicate arrow={{ color: 'blue' }}>
175+
<Boxes />
176+
</Indicate>
177+
<pre>{`<Indicate arrow={{ image: '/arrow.png' }}>`}</pre>
178+
<Indicate arrow={{ image: '/arrow.png' }}>
179+
<Boxes />
180+
</Indicate>
181+
<pre>{`<Indicate arrow={{ image: 'data:image/svg+xml;base64,...' }}>`}</pre>
182+
<Indicate
183+
arrow={{
184+
image:
185+
'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZGVmcz4KICA8Y2xpcFBhdGggaWQ9ImEiPgogICA8cGF0aCBkPSJtMjM5IDE1OWgzNzMuNzl2NDM0aC0zNzMuNzl6Ii8+CiAgPC9jbGlwUGF0aD4KIDwvZGVmcz4KIDxwYXRoIGQ9Im0yMTIuNDcgNTM5LjU0Yy00My42Ni00My42Ni02Ny43MDctMTAxLjc1LTY3LjcwNy0xNjMuNTQgMC02MS43ODUgMjQuMDQ3LTExOS44OCA2Ny43MDctMTYzLjUzIDQzLjY1Ni00My42NiAxMDEuNzUtNjcuNzA3IDE2My41My02Ny43MDcgNjEuNzg5IDAgMTE5Ljg4IDI0LjA1MSAxNjMuNTQgNjcuNzA3IDQzLjY1NiA0My42NTYgNjcuNzA3IDEwMS43NSA2Ny43MDcgMTYzLjUzIDAgNjEuNzg5LTI0LjA1MSAxMTkuODgtNjcuNzA3IDE2My41NC00My42NiA0My42NTYtMTAxLjc1IDY3LjcwNy0xNjMuNTQgNjcuNzA3LTYxLjc4NSAwLTExOS44OC0yNC4wNTEtMTYzLjUzLTY3LjcwN3ptLTQ5LjIwNy0xNjMuNTRjMCAxMTcuMjkgOTUuNDU3IDIxMi43NCAyMTIuNzQgMjEyLjc0czIxMi43NC05NS40NTcgMjEyLjc0LTIxMi43NGMtMC4wMDM5MDYtMTE3LjI5LTk1LjQ2MS0yMTIuNzQtMjEyLjc1LTIxMi43NHMtMjEyLjc0IDk1LjQ1My0yMTIuNzQgMjEyLjc0eiIvPgogPHBhdGggZD0ibTM2OS45OSA0MzYuMzEgNjAuMzA5LTYwLjMwOS02MC4zMDktNjAuMzA5IDI1LjYyMS0yNS43MTUgODYuMDIzIDg2LjAyMy04Ni4wMjMgODYuMDIzem0yNS42MjEtMTM2LjYyLTE2IDE2LjA5NCA2MC4zMDkgNjAuMzA5LTYwLjMwOSA2MC4zMDkgMTYgMTYuMDk0IDc2LjQwMi03Ni40MDJ6Ii8+CiA8ZyBjbGlwLXBhdGg9InVybCgjYSkiPgogIDxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KC45MjQ5NiAwIDAgLjkyNDk2IDEzOS4yMSAxMzkuMjEpIiBkPSJtMjQ5LjUgMzIxLjIgNjUuMjAxLTY1LjIwMS02NS4yMDEtNjUuMjAxIDI3LjctMjcuODAxIDkzLjAwMiA5My4wMDItOTMuMDAyIDkzLjAwMnptMjcuNy0xNDcuNy0xNy4yOTggMTcuMzk5IDY1LjIwMSA2NS4yMDEtNjUuMjAxIDY1LjIwMSAxNy4yOTggMTcuMzk5IDgyLjYtODIuNnoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjEwIi8+CiA8L2c+CiA8cGF0aCB0cmFuc2Zvcm09Im1hdHJpeCguOTI0OTYgMCAwIC45MjQ5NiAxMzkuMjEgMTM5LjIxKSIgZD0ibTE1My45IDMyMS4yIDY1LjEtNjUuMjAxLTY1LjIwMS02NS4yMDEgMjcuNy0yNy44MDEgOTMuMDAyIDkzLjAwMi05My4wMDIgOTMuMDAyem0yNy41OTgtMTQ3LjctMTcuMjk4IDE3LjM5OSA2NS4yMDEgNjUuMjAxLTY1LjIwMSA2NS4yMDEgMTcuMjk4IDE3LjM5OSA4Mi42LTgyLjZ6IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIxMCIvPgo8L3N2Zz4K',
186+
}}
187+
>
188+
<Boxes />
189+
</Indicate>
190+
<pre>{`<Indicate arrow={{ markup: '>' }}>`}</pre>
191+
<Indicate arrow={{ markup: '>' }}>
192+
<Boxes />
193+
</Indicate>
194+
<pre>{`<Indicate arrow={{ markup: <span>{\`>\`}</span> }}>`}</pre>
195+
<Indicate arrow={{ markup: <span>{`>`}</span> }}>
196+
<Boxes />
197+
</Indicate>
198+
<pre>{`<Indicate arrow={{ position: 'end' }}>`}</pre>
199+
<Indicate arrow={{ position: 'end' }}>
200+
<Boxes />
201+
</Indicate>
202+
<pre>{`<Indicate hideScrollbar={false}>`}</pre>
203+
<Indicate hideScrollbar={false}>
204+
<Boxes />
205+
</Indicate>
206+
<pre>{`<Indicate hideScrollbar={false} className="hello-class">`}</pre>
207+
<Indicate hideScrollbar={false} className="hello-class">
208+
<Boxes />
209+
</Indicate>
210+
<pre>{`<Indicate as="table">`}</pre>
211+
<Indicate as="table">
212+
<Table />
213+
</Indicate>
214+
<pre>{`<Indicate style={{ display: 'inline-flex' }}>
215+
<Indicate as="span">`}</pre>
216+
<Indicate style={{ display: 'inline-flex', width: 150 }}>
217+
<Boxes />
218+
</Indicate>
219+
<Indicate style={{ display: 'inline-block', width: 150 }}>
220+
<Boxes />
221+
</Indicate>
222+
<Indicate style={{ display: 'inline-inline', width: 150 }}>
223+
<Boxes />
224+
</Indicate>
225+
<Indicate as="span" style={{ width: 150 }}>
226+
<Boxes />
227+
</Indicate>
228+
<pre>{`<Indicate theme={{ ... }}>`}</pre>
229+
<Indicate theme={{}}>
230+
<Boxes />
231+
</Indicate>
232+
</main>
233+
</>
234+
)
235+
}
236+
237+
export default Home

‎demo-ssr/src/env.d.ts

-1
This file was deleted.

‎demo-ssr/src/layouts/Layout.astro

-41
This file was deleted.

0 commit comments

Comments
 (0)