Skip to content

Commit ce7386e

Browse files
weotchweotch
committed
Create a simple demo page
1 parent a384f43 commit ce7386e

File tree

5 files changed

+327
-1
lines changed

5 files changed

+327
-1
lines changed

‎packages/react/demo/App.tsx‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
import React from "react";
2+
import { createRoot } from "react-dom/client";
3+
import ReactVisual from "../src/ReactVisual";
4+
import LazyVideo from "../src/LazyVideo";
5+
import VisualWrapper from "../src/VisualWrapper";
6+
7+
function App() {
8+
return (
9+
<div className="container">
10+
<h1>@react-visual/react Demo</h1>
11+
<p className="subtitle">
12+
Interactive examples of the ReactVisual component library
13+
</p>
14+
15+
{/* ReactVisual with Image */}
16+
<div className="demo-section">
17+
<h2>ReactVisual - Image Examples</h2>
18+
<div className="demo-grid">
19+
<div className="demo-item">
20+
<h3>
21+
Basic Image with <code>aspect</code>
22+
</h3>
23+
<div className="visual-container">
24+
<ReactVisual
25+
image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
26+
aspect={16 / 9}
27+
alt="Mountain landscape"
28+
/>
29+
</div>
30+
</div>
31+
32+
<div className="demo-item">
33+
<h3>
34+
Image with <code>fit="contain"</code>
35+
</h3>
36+
<div className="visual-container">
37+
<ReactVisual
38+
image="https://images.unsplash.com/photo-1511884642898-4c92249e20b6?w=800"
39+
aspect={1}
40+
fit="contain"
41+
alt="Dog portrait"
42+
/>
43+
</div>
44+
</div>
45+
46+
<div className="demo-item">
47+
<h3>Image with explicit dimensions</h3>
48+
<div className="visual-container">
49+
<ReactVisual
50+
image="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800"
51+
width={400}
52+
height={300}
53+
alt="Forest"
54+
/>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
60+
{/* ReactVisual with Video */}
61+
<div className="demo-section">
62+
<h2>ReactVisual - Video with Poster</h2>
63+
<div className="demo-grid">
64+
<div className="demo-item">
65+
<h3>Video with Image Poster</h3>
66+
<div className="visual-container">
67+
<ReactVisual
68+
video="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
69+
image="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=800"
70+
aspect={16 / 9}
71+
alt="Video with poster"
72+
/>
73+
</div>
74+
</div>
75+
76+
<div className="demo-item">
77+
<h3>Video without Poster</h3>
78+
<div className="visual-container">
79+
<ReactVisual
80+
video="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
81+
aspect={16 / 9}
82+
noPoster
83+
alt="Video without poster"
84+
/>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
90+
{/* VisualWrapper */}
91+
<div className="demo-section">
92+
<h2>VisualWrapper - Layout Container</h2>
93+
<div className="demo-grid">
94+
<div className="demo-item">
95+
<h3>Custom Content in Wrapper</h3>
96+
<VisualWrapper aspect={16 / 9}>
97+
<div
98+
style={{
99+
width: "100%",
100+
height: "100%",
101+
background:
102+
"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
103+
display: "flex",
104+
alignItems: "center",
105+
justifyContent: "center",
106+
color: "white",
107+
fontSize: "24px",
108+
fontWeight: "bold",
109+
}}
110+
>
111+
Custom Content
112+
</div>
113+
</VisualWrapper>
114+
</div>
115+
116+
<div className="demo-item">
117+
<h3>Square Aspect Ratio</h3>
118+
<VisualWrapper aspect={1}>
119+
<div
120+
style={{
121+
width: "100%",
122+
height: "100%",
123+
background:
124+
"linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
125+
display: "flex",
126+
alignItems: "center",
127+
justifyContent: "center",
128+
color: "white",
129+
fontSize: "20px",
130+
}}
131+
>
132+
1:1
133+
</div>
134+
</VisualWrapper>
135+
</div>
136+
</div>
137+
</div>
138+
139+
{/* Props Examples */}
140+
<div className="demo-section">
141+
<h2>Advanced Props Examples</h2>
142+
<div className="demo-grid">
143+
<div className="demo-item">
144+
<h3>
145+
With <code>expand</code> prop
146+
</h3>
147+
<div style={{ position: "relative", height: "200px" }}>
148+
<ReactVisual
149+
image="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800"
150+
expand
151+
alt="Stars"
152+
/>
153+
</div>
154+
</div>
155+
156+
<div className="demo-item">
157+
<h3>
158+
With <code>className</code> and <code>style</code>
159+
</h3>
160+
<div className="visual-container">
161+
<ReactVisual
162+
image="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800"
163+
aspect={16 / 9}
164+
className="custom-class"
165+
style={{ border: "4px solid #667eea", borderRadius: "8px" }}
166+
alt="Nature"
167+
/>
168+
</div>
169+
</div>
170+
</div>
171+
</div>
172+
</div>
173+
);
174+
}
175+
176+
const root = createRoot(document.getElementById("root")!);
177+
root.render(<App />);

‎packages/react/demo/README.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# React Visual Demo
2+
3+
This demo app showcases the `@react-visual/react` components in action.
4+
5+
## Running Locally
6+
7+
From the `packages/react` directory, run:
8+
9+
```bash
10+
yarn demo
11+
```
12+
13+
This will start a development server at `http://localhost:3000` with hot module reloading.
14+
15+
## Testing with iOS Simulator
16+
17+
1. Start the demo server: `yarn demo`
18+
2. Open your iOS Simulator
19+
3. Navigate to `http://localhost:3000` in Safari
20+
4. You can also use your computer's local IP address (e.g., `http://192.168.1.x:3000`) to test on a physical device
21+
22+
## Using in CodeSandbox
23+
24+
This demo is designed to work seamlessly in CodeSandbox. Simply:
25+
26+
1. Open the package in CodeSandbox
27+
2. Run `yarn demo` in the terminal
28+
3. View the preview in the browser pane
29+
30+
## What's Included
31+
32+
The demo showcases:
33+
34+
- **ReactVisual** - Image rendering with various props
35+
- **LazyVideo** - Video component with lazy loading
36+
- **VisualWrapper** - Layout wrapper for custom content
37+
- Various prop combinations (aspect ratios, fit modes, etc.)
38+
39+
## Building for Production
40+
41+
To build the demo for static deployment:
42+
43+
```bash
44+
yarn demo:build
45+
```
46+
47+
The output will be in the `demo-dist` directory.

‎packages/react/demo/index.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>React Visual Demo</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family:
16+
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
17+
Cantarell, sans-serif;
18+
background: #f5f5f5;
19+
padding: 20px;
20+
}
21+
22+
.container {
23+
max-width: 1200px;
24+
margin: 0 auto;
25+
}
26+
27+
h1 {
28+
color: #333;
29+
margin-bottom: 10px;
30+
}
31+
32+
.subtitle {
33+
color: #666;
34+
margin-bottom: 40px;
35+
}
36+
37+
.demo-section {
38+
background: white;
39+
padding: 30px;
40+
margin-bottom: 30px;
41+
border-radius: 8px;
42+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
43+
}
44+
45+
.demo-section h2 {
46+
color: #333;
47+
margin-bottom: 20px;
48+
font-size: 20px;
49+
}
50+
51+
.demo-grid {
52+
display: grid;
53+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
54+
gap: 20px;
55+
}
56+
57+
.demo-item {
58+
background: #fafafa;
59+
padding: 15px;
60+
border-radius: 4px;
61+
}
62+
63+
.demo-item h3 {
64+
color: #555;
65+
font-size: 14px;
66+
margin-bottom: 10px;
67+
font-weight: 600;
68+
}
69+
70+
.demo-item .visual-container {
71+
background: #e0e0e0;
72+
border-radius: 4px;
73+
overflow: hidden;
74+
}
75+
76+
code {
77+
background: #f0f0f0;
78+
padding: 2px 6px;
79+
border-radius: 3px;
80+
font-size: 13px;
81+
color: #d73a49;
82+
}
83+
</style>
84+
</head>
85+
<body>
86+
<div id="root"></div>
87+
<script type="module" src="./App.tsx"></script>
88+
</body>
89+
</html>

‎packages/react/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"scripts": {
1414
"build": "vite build",
1515
"test": "cypress run --component",
16-
"typecheck": "tsc --noEmit"
16+
"typecheck": "tsc --noEmit",
17+
"demo": "vite --config vite.demo.config.ts"
1718
},
1819
"dependencies": {
1920
"@react-hook/media-query": "^1.1.1",

‎packages/react/vite.demo.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineConfig } from "vite";
2+
import react from "@vitejs/plugin-react";
3+
4+
// Vite config for the demo app
5+
export default defineConfig({
6+
plugins: [react()],
7+
root: "demo",
8+
server: {
9+
port: 3000,
10+
open: true,
11+
},
12+
});

0 commit comments

Comments
 (0)