Skip to content

Commit 0270a4f

Browse files
segunadebayosegunadebayo
committed
refactor: slid
1 parent 89a99d8 commit 0270a4f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+641
-509
lines changed

‎examples/solid-ts/src/components/state-visualizer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { highlightState } from "@zag-js/stringify-state"
1+
// import { highlightState } from "@zag-js/stringify-state"
22

33
type StateVisualizerProps = {
44
state: Record<string, any>
@@ -14,7 +14,7 @@ export function StateVisualizer(props: StateVisualizerProps) {
1414
<pre dir="ltr">
1515
<details open>
1616
<summary> {label || "Visualizer"} </summary>
17-
<div innerHTML={highlightState(state, omit)} />
17+
{/* <div innerHTML={highlightState(state, omit)} /> */}
1818
</details>
1919
</pre>
2020
</div>

‎examples/solid-ts/src/routes/accordion.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,8 @@ import { useControls } from "~/hooks/use-controls"
1010
export default function Page() {
1111
const controls = useControls(accordionControls)
1212

13-
const [state, send] = useMachine(accordion.machine({ id: createUniqueId() }), {
14-
context: controls.context,
15-
})
16-
17-
const api = createMemo(() => accordion.connect(state, send, normalizeProps))
13+
const service = useMachine(accordion.machine, { id: createUniqueId() })
14+
const api = createMemo(() => accordion.connect(service, normalizeProps))
1815

1916
return (
2017
<>
@@ -42,7 +39,7 @@ export default function Page() {
4239
</main>
4340

4441
<Toolbar controls={controls.ui}>
45-
<StateVisualizer state={state} />
42+
<StateVisualizer state={service} />
4643
</Toolbar>
4744
</>
4845
)

‎examples/solid-ts/src/routes/angle-slider.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,8 @@ import { useControls } from "../hooks/use-controls"
99
export default function Page() {
1010
const controls = useControls(angleSliderControls)
1111

12-
const [state, send] = useMachine(angleSlider.machine({ id: createUniqueId() }), {
13-
context: controls.context,
14-
})
15-
16-
const api = createMemo(() => angleSlider.connect(state, send, normalizeProps))
12+
const service = useMachine(angleSlider.machine, { id: createUniqueId() })
13+
const api = createMemo(() => angleSlider.connect(service, normalizeProps))
1714

1815
return (
1916
<>
@@ -35,7 +32,7 @@ export default function Page() {
3532
</main>
3633

3734
<Toolbar controls={controls.ui}>
38-
<StateVisualizer state={state} />
35+
<StateVisualizer state={service} />
3936
</Toolbar>
4037
</>
4138
)

‎examples/solid-ts/src/routes/avatar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ const images = avatarData.full
99
const getRandomImage = () => images[Math.floor(Math.random() * images.length)]
1010

1111
export default function Page() {
12-
const [state, send] = useMachine(avatar.machine({ id: createUniqueId() }))
12+
const service = useMachine(avatar.machine, { id: createUniqueId() })
1313
const [src, setSrc] = createSignal(images[0])
1414
const [showImage, setShowImage] = createSignal(true)
1515

16-
const api = createMemo(() => avatar.connect(state, send, normalizeProps))
16+
const api = createMemo(() => avatar.connect(service, normalizeProps))
1717

1818
return (
1919
<>
@@ -31,7 +31,7 @@ export default function Page() {
3131
</main>
3232

3333
<Toolbar>
34-
<StateVisualizer state={state} />
34+
<StateVisualizer state={service} />
3535
</Toolbar>
3636
</>
3737
)

‎examples/solid-ts/src/routes/carousel.tsx‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,15 @@ import { useControls } from "~/hooks/use-controls"
99
export default function Page() {
1010
const controls = useControls(carouselControls)
1111

12-
const [state, send] = useMachine(
13-
carousel.machine({
14-
id: createUniqueId(),
15-
spacing: "20px",
16-
slidesPerPage: 2,
17-
slideCount: carouselData.length,
18-
allowMouseDrag: true,
19-
}),
20-
{
21-
context: controls.context,
22-
},
23-
)
12+
const service = useMachine(carousel.machine, {
13+
id: createUniqueId(),
14+
spacing: "20px",
15+
slidesPerPage: 2,
16+
slideCount: carouselData.length,
17+
allowMouseDrag: true,
18+
})
2419

25-
const api = createMemo(() => carousel.connect(state, send, normalizeProps))
20+
const api = createMemo(() => carousel.connect(service, normalizeProps))
2621

2722
return (
2823
<>
@@ -58,7 +53,7 @@ export default function Page() {
5853
</main>
5954

6055
<Toolbar controls={controls.ui}>
61-
<StateVisualizer state={state} />
56+
<StateVisualizer state={service} />
6257
</Toolbar>
6358
</>
6459
)

‎examples/solid-ts/src/routes/checkbox.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,12 @@ import { useControls } from "~/hooks/use-controls"
1010
export default function Page() {
1111
const controls = useControls(checkboxControls)
1212

13-
const [state, send] = useMachine(
14-
checkbox.machine({
15-
name: "checkbox",
16-
id: createUniqueId(),
17-
}),
18-
{
19-
context: controls.context,
20-
},
21-
)
13+
const service = useMachine(checkbox.machine, {
14+
name: "checkbox",
15+
id: createUniqueId(),
16+
})
2217

23-
const api = createMemo(() => checkbox.connect(state, send, normalizeProps))
18+
const api = createMemo(() => checkbox.connect(service, normalizeProps))
2419

2520
return (
2621
<>
@@ -55,7 +50,7 @@ export default function Page() {
5550
</main>
5651

5752
<Toolbar controls={controls.ui}>
58-
<StateVisualizer state={state} />
53+
<StateVisualizer state={service} />
5954
</Toolbar>
6055
</>
6156
)

‎examples/solid-ts/src/routes/clipboard.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,12 @@ import { useControls } from "~/hooks/use-controls"
1010
export default function Page() {
1111
const controls = useControls(clipboardControls)
1212

13-
const [state, send] = useMachine(
14-
clipboard.machine({
15-
id: createUniqueId(),
16-
value: "https://github.com/chakra-ui/zag",
17-
}),
18-
{
19-
context: controls.context,
20-
},
21-
)
13+
const service = useMachine(clipboard.machine, {
14+
id: createUniqueId(),
15+
value: "https://github.com/chakra-ui/zag",
16+
})
2217

23-
const api = createMemo(() => clipboard.connect(state, send, normalizeProps))
18+
const api = createMemo(() => clipboard.connect(service, normalizeProps))
2419

2520
return (
2621
<>
@@ -41,7 +36,7 @@ export default function Page() {
4136
</main>
4237

4338
<Toolbar controls={controls.ui}>
44-
<StateVisualizer state={state} />
39+
<StateVisualizer state={service} />
4540
</Toolbar>
4641
</>
4742
)

‎examples/solid-ts/src/routes/collapsible.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,9 @@ import { useControls } from "~/hooks/use-controls"
99
export default function Page() {
1010
const controls = useControls(collapsibleControls)
1111

12-
const [state, send] = useMachine(collapsible.machine({ id: createUniqueId() }), {
13-
context: controls.context,
14-
})
12+
const service = useMachine(collapsible.machine, { id: createUniqueId() })
1513

16-
const api = createMemo(() => collapsible.connect(state, send, normalizeProps))
14+
const api = createMemo(() => collapsible.connect(service, normalizeProps))
1715

1816
return (
1917
<>
@@ -39,7 +37,7 @@ export default function Page() {
3937
</main>
4038

4139
<Toolbar controls={controls.ui}>
42-
<StateVisualizer state={state} />
40+
<StateVisualizer state={service} />
4341
</Toolbar>
4442
</>
4543
)

‎examples/solid-ts/src/routes/color-picker.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,14 @@ const EyeDropIcon = () => (
2626
export default function Page() {
2727
const controls = useControls(colorPickerControls)
2828

29-
const [state, send] = useMachine(
30-
colorPicker.machine({
31-
id: createUniqueId(),
32-
name: "color",
33-
format: "hsla",
34-
value: colorPicker.parse("hsl(0, 100%, 50%)"),
35-
}),
36-
{
37-
context: controls.context,
38-
},
39-
)
29+
const service = useMachine(colorPicker.machine, {
30+
id: createUniqueId(),
31+
name: "color",
32+
format: "hsla",
33+
value: colorPicker.parse("hsl(0, 100%, 50%)"),
34+
})
4035

41-
const api = createMemo(() => colorPicker.connect(state, send, normalizeProps))
36+
const api = createMemo(() => colorPicker.connect(service, normalizeProps))
4237

4338
return (
4439
<>
@@ -145,7 +140,7 @@ export default function Page() {
145140
</main>
146141

147142
<Toolbar viz controls={controls.ui}>
148-
<StateVisualizer state={state} />
143+
<StateVisualizer state={service} />
149144
</Toolbar>
150145
</>
151146
)

‎examples/solid-ts/src/routes/combobox.tsx‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -20,27 +20,21 @@ export default function Page() {
2020
}),
2121
)
2222

23-
const context = createMemo(() => ({
24-
...controls.context,
25-
collection: collection(),
26-
}))
23+
const service = useMachine(combobox.machine, {
24+
id: createUniqueId(),
25+
get collection() {
26+
return collection()
27+
},
28+
onOpenChange() {
29+
setOptions(comboboxData)
30+
},
31+
onInputValueChange({ inputValue }) {
32+
const filtered = matchSorter(comboboxData, inputValue, { keys: ["label"] })
33+
setOptions(filtered.length > 0 ? filtered : comboboxData)
34+
},
35+
})
2736

28-
const [state, send] = useMachine(
29-
combobox.machine({
30-
id: createUniqueId(),
31-
collection: collection(),
32-
onOpenChange() {
33-
setOptions(comboboxData)
34-
},
35-
onInputValueChange({ inputValue }) {
36-
const filtered = matchSorter(comboboxData, inputValue, { keys: ["label"] })
37-
setOptions(filtered.length > 0 ? filtered : comboboxData)
38-
},
39-
}),
40-
{ context },
41-
)
42-
43-
const api = createMemo(() => combobox.connect(state, send, normalizeProps))
37+
const api = createMemo(() => combobox.connect(service, normalizeProps))
4438

4539
return (
4640
<>
@@ -80,7 +74,7 @@ export default function Page() {
8074
</main>
8175

8276
<Toolbar controls={controls.ui}>
83-
<StateVisualizer state={state} omit={["collection"]} />
77+
<StateVisualizer state={service} omit={["collection"]} />
8478
</Toolbar>
8579
</>
8680
)

0 commit comments

Comments
 (0)