Skip to content

Commit 711e053

Browse files
xKevIsDevxKevIsDev
committed
refactor: standardize code formatting across components
This commit updates the formatting of various TypeScript files in the bolt-slides project. Changes include consistent use of semicolons, improved indentation, and enhanced readability of JSX elements. The updates affect configuration files, component files, and main application files, ensuring a cleaner and more maintainable codebase.
1 parent b0377f5 commit 711e053

28 files changed

Lines changed: 3529 additions & 931 deletions

‎bolt-slides/src/App.tsx‎

Lines changed: 585 additions & 113 deletions
Large diffs are not rendered by default.

‎bolt-slides/src/components/Accordion.tsx‎

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,59 @@
1-
import { useState, type ReactNode } from 'react'
2-
import { AnimatePresence, motion } from 'framer-motion'
1+
import { useState, type ReactNode } from 'react';
2+
import { AnimatePresence, motion } from 'framer-motion';
33

44
/* An expand/collapse accordion. Data-driven like Bento/StatGrid.
55
<Accordion items={[{ title: 'Q', body: 'A' }, …]} />
66
- single (default true): only one panel open at a time.
77
- defaultOpen: index open on mount (null = all closed). */
8-
export type AccordionItem = { title: string; body: ReactNode }
8+
export type AccordionItem = { title: string; body: ReactNode };
99

1010
const Chevron = () => (
11-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.9} strokeLinecap="round" strokeLinejoin="round">
11+
<svg
12+
viewBox="0 0 24 24"
13+
fill="none"
14+
stroke="currentColor"
15+
strokeWidth={1.9}
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
>
1219
<path d="M6 9l6 6 6-6" />
1320
</svg>
14-
)
21+
);
1522

1623
export default function Accordion({
17-
items, single = true, defaultOpen = 0,
24+
items,
25+
single = true,
26+
defaultOpen = 0,
1827
}: {
19-
items: AccordionItem[]
20-
single?: boolean
21-
defaultOpen?: number | null
28+
items: AccordionItem[];
29+
single?: boolean;
30+
defaultOpen?: number | null;
2231
}) {
23-
const [open, setOpen] = useState<number[]>(defaultOpen == null ? [] : [defaultOpen])
24-
const isOpen = (i: number) => open.includes(i)
32+
const [open, setOpen] = useState<number[]>(
33+
defaultOpen == null ? [] : [defaultOpen]
34+
);
35+
const isOpen = (i: number) => open.includes(i);
2536
const toggle = (i: number) =>
2637
setOpen((cur) => {
27-
const has = cur.includes(i)
28-
if (single) return has ? [] : [i]
29-
return has ? cur.filter((x) => x !== i) : [...cur, i]
30-
})
38+
const has = cur.includes(i);
39+
if (single) return has ? [] : [i];
40+
return has ? cur.filter((x) => x !== i) : [...cur, i];
41+
});
3142

3243
return (
3344
<div className="accordion">
3445
{items.map((it, i) => (
3546
<div key={i} className={'acc-item' + (isOpen(i) ? ' open' : '')}>
36-
<button className="acc-head" onClick={() => toggle(i)} aria-expanded={isOpen(i)}>
47+
<button
48+
className="acc-head"
49+
onClick={() => toggle(i)}
50+
aria-expanded={isOpen(i)}
51+
>
3752
<span className="acc-index">{String(i + 1).padStart(2, '0')}</span>
3853
<h3>{it.title}</h3>
39-
<span className="acc-chevron"><Chevron /></span>
54+
<span className="acc-chevron">
55+
<Chevron />
56+
</span>
4057
</button>
4158
<AnimatePresence initial={false}>
4259
{isOpen(i) && (
@@ -54,5 +71,5 @@ export default function Accordion({
5471
</div>
5572
))}
5673
</div>
57-
)
74+
);
5875
}

‎bolt-slides/src/components/Bento.tsx‎

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,47 @@
1-
import type { CSSProperties, ReactNode } from 'react'
2-
import Reveal from '../deck/Reveal'
1+
import type { CSSProperties, ReactNode } from 'react';
2+
import Reveal from '../deck/Reveal';
33

44
/* A full-viewport slide laid out as an asymmetric bento grid. Spans via c
55
(columns of 12) and r (rows). Collapses to one column on narrow screens.
66
nav/notes are read by the engine (rail label / presenter notes). */
77
export type BentoTile = {
8-
k?: string; fig?: ReactNode; title?: string; body?: string
9-
c?: number; r?: number; variant?: 'accent' | 'glow'
10-
}
8+
k?: string;
9+
fig?: ReactNode;
10+
title?: string;
11+
body?: string;
12+
c?: number;
13+
r?: number;
14+
variant?: 'accent' | 'glow';
15+
};
1116

12-
export default function Bento({ kicker, title, tiles }: {
13-
kicker?: string; title?: string; tiles: BentoTile[]; nav?: string; notes?: string
17+
export default function Bento({
18+
kicker,
19+
title,
20+
tiles,
21+
}: {
22+
kicker?: string;
23+
title?: string;
24+
tiles: BentoTile[];
25+
nav?: string;
26+
notes?: string;
1427
}) {
1528
return (
1629
<div className="slide">
1730
<div className="container">
1831
<Reveal>
19-
{kicker && <div className="kicker" style={{ marginBottom: 10 }}>{kicker}</div>}
20-
{title && <h2 className="headline" style={{ marginBottom: 'clamp(20px,3vh,34px)', maxWidth: '24ch' }}>{title}</h2>}
32+
{kicker && (
33+
<div className="kicker" style={{ marginBottom: 10 }}>
34+
{kicker}
35+
</div>
36+
)}
37+
{title && (
38+
<h2
39+
className="headline"
40+
style={{ marginBottom: 'clamp(20px,3vh,34px)', maxWidth: '24ch' }}
41+
>
42+
{title}
43+
</h2>
44+
)}
2145
</Reveal>
2246
<Reveal className="bento" y={36}>
2347
{tiles.map((t, i) => (
@@ -28,7 +52,15 @@ export default function Bento({ kicker, title, tiles }: {
2852
>
2953
{t.k && <div className="btile-k">{t.k}</div>}
3054
<div>
31-
{t.fig != null && <div className={'btile-fig' + (t.variant === 'accent' ? '' : ' grad')}>{t.fig}</div>}
55+
{t.fig != null && (
56+
<div
57+
className={
58+
'btile-fig' + (t.variant === 'accent' ? '' : ' grad')
59+
}
60+
>
61+
{t.fig}
62+
</div>
63+
)}
3264
{t.title && <h3>{t.title}</h3>}
3365
{t.body && <p>{t.body}</p>}
3466
</div>
@@ -37,5 +69,5 @@ export default function Bento({ kicker, title, tiles }: {
3769
</Reveal>
3870
</div>
3971
</div>
40-
)
72+
);
4173
}

‎bolt-slides/src/components/BrowserFrame.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
1-
import type { ReactNode } from 'react'
1+
import type { ReactNode } from 'react';
22

33
/* Wrap a screenshot or UI mock in browser chrome. children fill the body —
44
an <img>, a <VisualDashboard/>, anything. <BrowserFrame url="app.acme.com"><img …/></BrowserFrame> */
5-
export default function BrowserFrame({ url = 'app.acme.com', children }: { url?: string; children: ReactNode }) {
5+
export default function BrowserFrame({
6+
url = 'app.acme.com',
7+
children,
8+
}: {
9+
url?: string;
10+
children: ReactNode;
11+
}) {
612
return (
713
<div className="bf">
814
<div className="bf-bar">
9-
<span className="bf-dots"><i /><i /><i /></span>
15+
<span className="bf-dots">
16+
<i />
17+
<i />
18+
<i />
19+
</span>
1020
<span className="bf-url">{url}</span>
1121
</div>
1222
<div className="bf-body">{children}</div>
1323
</div>
14-
)
24+
);
1525
}

‎bolt-slides/src/components/Charts.tsx‎

Lines changed: 124 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,157 @@
1-
import { motion } from 'framer-motion'
2-
import type { CSSProperties } from 'react'
3-
import { useInView } from '../deck/useInView'
1+
import { motion } from 'framer-motion';
2+
import type { CSSProperties } from 'react';
3+
import { useInView } from '../deck/useInView';
44

55
/* A small hand-built chart kit — bar, line/area, and donut. Each draws itself in
66
when scrolled into view. All token-driven (one accent), no chart library.
77
<BarChart data={[{label:'Mon',value:44}, …]} />
88
<LineChart points={[12,18,15,26,22,34,30]} />
99
<DonutChart value={72} label="Adoption" /> */
1010

11-
export function BarChart({ data, height = 200 }: { data: { label: string; value: number }[]; height?: number }) {
12-
const { ref, inView } = useInView<HTMLDivElement>(0.3)
13-
const max = Math.max(...data.map((d) => d.value)) || 1
11+
export function BarChart({
12+
data,
13+
height = 200,
14+
}: {
15+
data: { label: string; value: number }[];
16+
height?: number;
17+
}) {
18+
const { ref, inView } = useInView<HTMLDivElement>(0.3);
19+
const max = Math.max(...data.map((d) => d.value)) || 1;
1420
return (
1521
<div className="ch ch-bars" ref={ref} style={{ height }}>
1622
{data.map((d, i) => (
1723
<div key={i} className="ch-col">
1824
<div className="ch-bar-track">
19-
<motion.span className="ch-bar" initial={{ height: 0 }} animate={{ height: inView ? `${(d.value / max) * 100}%` : 0 }} transition={{ duration: 0.7, delay: i * 0.06, ease: [0.16, 1, 0.3, 1] }} />
25+
<motion.span
26+
className="ch-bar"
27+
initial={{ height: 0 }}
28+
animate={{ height: inView ? `${(d.value / max) * 100}%` : 0 }}
29+
transition={{
30+
duration: 0.7,
31+
delay: i * 0.06,
32+
ease: [0.16, 1, 0.3, 1],
33+
}}
34+
/>
2035
</div>
2136
<div className="ch-x">{d.label}</div>
2237
</div>
2338
))}
2439
</div>
25-
)
40+
);
2641
}
2742

28-
export function LineChart({ points, height = 200 }: { points: number[]; height?: number }) {
29-
const { ref, inView } = useInView<SVGSVGElement>(0.3)
30-
const w = 300, h = 120
31-
const max = Math.max(...points), min = Math.min(...points)
32-
const span = max - min || 1
33-
const coords = points.map((p, i) => [(i / (points.length - 1)) * w, h - ((p - min) / span) * (h - 10) - 5])
34-
const line = coords.map((c, i) => `${i === 0 ? 'M' : 'L'}${c[0].toFixed(1)},${c[1].toFixed(1)}`).join(' ')
35-
const area = `${line} L${w},${h} L0,${h} Z`
43+
export function LineChart({
44+
points,
45+
height = 200,
46+
}: {
47+
points: number[];
48+
height?: number;
49+
}) {
50+
const { ref, inView } = useInView<SVGSVGElement>(0.3);
51+
const w = 300,
52+
h = 120;
53+
const max = Math.max(...points),
54+
min = Math.min(...points);
55+
const span = max - min || 1;
56+
const coords = points.map((p, i) => [
57+
(i / (points.length - 1)) * w,
58+
h - ((p - min) / span) * (h - 10) - 5,
59+
]);
60+
const line = coords
61+
.map(
62+
(c, i) => `${i === 0 ? 'M' : 'L'}${c[0].toFixed(1)},${c[1].toFixed(1)}`
63+
)
64+
.join(' ');
65+
const area = `${line} L${w},${h} L0,${h} Z`;
3666
return (
37-
<svg ref={ref} className="ch-line" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ height }}>
67+
<svg
68+
ref={ref}
69+
className="ch-line"
70+
viewBox={`0 0 ${w} ${h}`}
71+
preserveAspectRatio="none"
72+
style={{ height }}
73+
>
3874
<defs>
39-
<linearGradient id="ch-fill" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="var(--primary)" stopOpacity="0.34" /><stop offset="100%" stopColor="var(--primary)" stopOpacity="0" /></linearGradient>
75+
<linearGradient id="ch-fill" x1="0" y1="0" x2="0" y2="1">
76+
<stop offset="0%" stopColor="var(--primary)" stopOpacity="0.34" />
77+
<stop offset="100%" stopColor="var(--primary)" stopOpacity="0" />
78+
</linearGradient>
4079
</defs>
41-
<motion.path d={area} fill="url(#ch-fill)" initial={{ opacity: 0 }} animate={{ opacity: inView ? 1 : 0 }} transition={{ duration: 0.6, delay: 0.5 }} />
42-
<motion.path d={line} fill="none" stroke="var(--primary)" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" initial={{ pathLength: 0 }} animate={{ pathLength: inView ? 1 : 0 }} transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }} />
80+
<motion.path
81+
d={area}
82+
fill="url(#ch-fill)"
83+
initial={{ opacity: 0 }}
84+
animate={{ opacity: inView ? 1 : 0 }}
85+
transition={{ duration: 0.6, delay: 0.5 }}
86+
/>
87+
<motion.path
88+
d={line}
89+
fill="none"
90+
stroke="var(--primary)"
91+
strokeWidth={2.5}
92+
strokeLinecap="round"
93+
strokeLinejoin="round"
94+
initial={{ pathLength: 0 }}
95+
animate={{ pathLength: inView ? 1 : 0 }}
96+
transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
97+
/>
4398
</svg>
44-
)
99+
);
45100
}
46101

47-
export function DonutChart({ value, label, size = 168 }: { value: number; label?: string; size?: number }) {
48-
const { ref, inView } = useInView<SVGSVGElement>(0.4)
49-
const r = 54
50-
const circ = 2 * Math.PI * r
102+
export function DonutChart({
103+
value,
104+
label,
105+
size = 168,
106+
}: {
107+
value: number;
108+
label?: string;
109+
size?: number;
110+
}) {
111+
const { ref, inView } = useInView<SVGSVGElement>(0.4);
112+
const r = 54;
113+
const circ = 2 * Math.PI * r;
51114
return (
52-
<div className="ch-donut" style={{ '--ch-size': `${size}px` } as CSSProperties}>
115+
<div
116+
className="ch-donut"
117+
style={{ '--ch-size': `${size}px` } as CSSProperties}
118+
>
53119
<svg ref={ref} viewBox="0 0 140 140">
54-
<circle cx="70" cy="70" r={r} fill="none" stroke="var(--hair)" strokeWidth={12} />
120+
<circle
121+
cx="70"
122+
cy="70"
123+
r={r}
124+
fill="none"
125+
stroke="var(--hair)"
126+
strokeWidth={12}
127+
/>
55128
<motion.circle
56-
cx="70" cy="70" r={r} fill="none" stroke="var(--primary)" strokeWidth={12} strokeLinecap="round"
57-
strokeDasharray={circ} transform="rotate(-90 70 70)"
58-
initial={{ strokeDashoffset: circ }} animate={{ strokeDashoffset: inView ? circ * (1 - value / 100) : circ }} transition={{ duration: 1.1, ease: [0.16, 1, 0.3, 1] }}
129+
cx="70"
130+
cy="70"
131+
r={r}
132+
fill="none"
133+
stroke="var(--primary)"
134+
strokeWidth={12}
135+
strokeLinecap="round"
136+
strokeDasharray={circ}
137+
transform="rotate(-90 70 70)"
138+
initial={{ strokeDashoffset: circ }}
139+
animate={{
140+
strokeDashoffset: inView ? circ * (1 - value / 100) : circ,
141+
}}
142+
transition={{ duration: 1.1, ease: [0.16, 1, 0.3, 1] }}
59143
/>
60-
<text x="70" y="70" textAnchor="middle" dominantBaseline="central" className="ch-donut-val">{value}%</text>
144+
<text
145+
x="70"
146+
y="70"
147+
textAnchor="middle"
148+
dominantBaseline="central"
149+
className="ch-donut-val"
150+
>
151+
{value}%
152+
</text>
61153
</svg>
62154
{label && <div className="ch-donut-label">{label}</div>}
63155
</div>
64-
)
156+
);
65157
}

0 commit comments

Comments
 (0)