Skip to content

Commit 83854ff

Browse files
altaywtfaltaywtf
committed
chore(example): simplify to local dev harness
Strips the marketing chrome (logo, motion-staggered entry, footer, brand copy) from apps/example. The headless library's interactive demo now lives at uinaf.dev/projects/react-json-logic — the in-repo example exists only to exercise the library locally during development. Keeps the data-rjl-* styling block intact since it doubles as the canonical reference for library consumers building their own theme.
1 parent 8e33ee9 commit 83854ff

3 files changed

Lines changed: 25 additions & 241 deletions

File tree

‎apps/example/index.html‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,8 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>react-json-logic · uinaf</title>
7-
<link
8-
rel="icon"
9-
type="image/png"
10-
href="https://cdn.uinaf.dev/images/uinaf-computer-favicon.png"
11-
/>
12-
<link rel="apple-touch-icon" href="https://cdn.uinaf.dev/images/uinaf-computer-favicon.png" />
13-
<meta
14-
name="description"
15-
content="react-json-logic — headless react component for editing jsonlogic rules visually."
16-
/>
17-
<meta property="og:type" content="website" />
18-
<meta property="og:title" content="react-json-logic · uinaf" />
19-
<meta
20-
property="og:description"
21-
content="headless react component for editing jsonlogic rules visually."
22-
/>
23-
<meta property="og:image" content="https://cdn.uinaf.dev/images/uinaf-computer-og-image.png" />
24-
<meta property="og:image:width" content="1024" />
25-
<meta property="og:image:height" content="537" />
26-
<meta name="twitter:card" content="summary_large_image" />
27-
<meta name="twitter:image" content="https://cdn.uinaf.dev/images/uinaf-computer-og-image.png" />
6+
<title>react-json-logic · dev</title>
7+
<meta name="robots" content="noindex" />
288
</head>
299
<body>
3010
<div id="root"></div>

‎apps/example/src/app.tsx‎

Lines changed: 8 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useMemo, useState } from "react";
1+
import { useMemo, useState } from "react";
22
import JsonLogicBuilder, {
33
applyLogic,
44
type JsonLogicData,
@@ -39,21 +39,10 @@ const SAMPLES: Array<{ title: string; rule: JsonLogicValue }> = [
3939
},
4040
];
4141

42-
const MOTION_KEY = "uinaf-entry-motion-seen";
43-
4442
export default function App() {
4543
const [activeSample, setActiveSample] = useState(0);
4644
const [r, setR] = useState<JsonLogicValue>(SAMPLES[0]!.rule);
4745
const [dataText, setDataText] = useState<string>(JSON.stringify(SAMPLE_DATA, null, 2));
48-
const [skipMotion] = useState<boolean>(() => {
49-
if (typeof window === "undefined") return false;
50-
return sessionStorage.getItem(MOTION_KEY) === "1";
51-
});
52-
53-
useEffect(() => {
54-
if (typeof window === "undefined") return;
55-
sessionStorage.setItem(MOTION_KEY, "1");
56-
}, []);
5746

5847
const { data, dataError } = useMemo(() => {
5948
try {
@@ -79,33 +68,13 @@ export default function App() {
7968
}
8069

8170
return (
82-
<main className={`page${skipMotion ? " motion-skip" : ""}`}>
83-
<a
84-
href="https://uinaf.dev"
85-
className="logo motion-enter"
86-
style={{ ["--stagger-index" as never]: 0 }}
87-
aria-label="uinaf"
88-
target="_blank"
89-
rel="noreferrer"
90-
>
91-
<img src="https://cdn.uinaf.dev/images/uinaf-computer.png" alt="uinaf" />
92-
</a>
93-
71+
<main className="page">
9472
<header className="head">
95-
<h1 className="motion-enter" style={{ ["--stagger-index" as never]: 1 }}>
96-
react-json-logic
97-
</h1>
98-
<p className="motion-enter" style={{ ["--stagger-index" as never]: 2 }}>
99-
headless react component for editing jsonlogic rules visually.
100-
</p>
101-
<p className="meta motion-enter" style={{ ["--stagger-index" as never]: 3 }}>
102-
no css shipped. style with data-rjl-* hooks. base ui under the hood.
103-
</p>
73+
<h1>react-json-logic</h1>
74+
<p className="meta">local dev harness</p>
10475
</header>
10576

106-
<hr className="rule motion-enter" style={{ ["--stagger-index" as never]: 4 }} />
107-
108-
<section className="motion-enter" style={{ ["--stagger-index" as never]: 5 }}>
77+
<section>
10978
<h2>samples</h2>
11079
<div className="samples">
11180
{SAMPLES.map((s, i) => (
@@ -124,18 +93,14 @@ export default function App() {
12493
</div>
12594
</section>
12695

127-
<hr className="rule" />
128-
129-
<section className="motion-enter" style={{ ["--stagger-index" as never]: 6 }}>
96+
<section>
13097
<h2>builder</h2>
13198
<div className="builder">
13299
<JsonLogicBuilder value={r} data={data} onChange={setR} />
133100
</div>
134101
</section>
135102

136-
<hr className="rule" />
137-
138-
<section className="cols motion-enter" style={{ ["--stagger-index" as never]: 7 }}>
103+
<section className="cols">
139104
<div className="col">
140105
<div className="col-head">
141106
<h2>rule (json)</h2>
@@ -161,9 +126,7 @@ export default function App() {
161126
</div>
162127
</section>
163128

164-
<hr className="rule" />
165-
166-
<section className="motion-enter" style={{ ["--stagger-index" as never]: 8 }}>
129+
<section>
167130
<div className="col-head">
168131
<h2>evaluation</h2>
169132
<span className="status">
@@ -174,21 +137,6 @@ export default function App() {
174137
<pre>{evalError ?? JSON.stringify(evaluated, null, 2)}</pre>
175138
{evalError && <p className="error">applylogic threw: {evalError}</p>}
176139
</section>
177-
178-
<hr className="rule" />
179-
180-
<footer>
181-
<div>
182-
<a href="https://github.com/uinaf/react-json-logic">github ↗</a>
183-
<span className="sep">·</span>
184-
<a href="https://npmjs.com/package/react-json-logic">npm ↗</a>
185-
</div>
186-
<div>
187-
<a href="mailto:dev@uinaf.dev">dev@uinaf.dev</a>
188-
<span className="sep">·</span>
189-
<a href="https://uinaf.dev">uinaf ↗</a>
190-
</div>
191-
</footer>
192140
</main>
193141
);
194142
}

0 commit comments

Comments
 (0)