Skip to content

Commit 09681cf

Browse files
JasonLovesDoggoJasonLovesDoggo
committed
convert to solid router
1 parent b5c467f commit 09681cf

File tree

3 files changed

+173
-169
lines changed

3 files changed

+173
-169
lines changed

‎src/app/views/demo/Demo.view.tsx‎

Lines changed: 160 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,166 +1,170 @@
1-
import { Component, createSignal, Show } from 'solid-js';
2-
import { useSearchParams } from 'solid-app-router';
3-
import { Root, CommandPalette, KbdShortcut } from '../../../lib';
4-
import { actions } from './actions';
5-
import { NestedActionDemo } from './NestedActionDemo/NestedActionDemo';
6-
import { DynamicActionContextDemo } from './DynamicActionContextDemo/DynamicActionContextDemo';
7-
import { components } from './CustomComponentsDemo/components';
8-
import { Profile } from './types';
1+
import {Component, createSignal, Show} from 'solid-js';
2+
import {useSearchParams} from '@solidjs/router';
3+
import {Root, CommandPalette, KbdShortcut} from '../../../lib';
4+
import {actions} from './actions';
5+
import {NestedActionDemo} from './NestedActionDemo/NestedActionDemo';
6+
import {DynamicActionContextDemo} from './DynamicActionContextDemo/DynamicActionContextDemo';
7+
import {components} from './CustomComponentsDemo/components';
8+
import {Profile} from './types';
99
import utilStyles from '../../utils.module.css';
1010
import demoStyles from './demoUtils.module.css';
1111
import styles from './Demo.module.css';
1212

1313
const DemoView: Component = () => {
14-
const [count, setCount] = createSignal(0);
15-
const [muted, setMuted] = createSignal(false);
16-
const [profile, setProfile] = createSignal<Profile>('personal');
17-
const [searchParams] = useSearchParams();
18-
19-
const increment = () => {
20-
setCount((prev) => (prev += 1));
21-
};
22-
23-
const unmuteAudio = () => {
24-
setMuted(false);
25-
};
26-
27-
const handleMuteInput = () => {
28-
setMuted((old) => !old);
29-
};
30-
31-
const handleProfileChange = (event: Event) => {
32-
const targetElem = event.currentTarget as HTMLSelectElement;
33-
34-
const newProfile = targetElem.value as Profile;
35-
setProfile(newProfile);
36-
};
37-
38-
const getCustomProps = () => {
39-
const features = searchParams.feat || [];
40-
41-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
42-
const props: Record<string, any> = {};
43-
44-
if (features.includes('components')) {
45-
props.components = components;
46-
}
47-
48-
if (features.includes('placeholder')) {
49-
props.placeholder = 'Search for an action...';
50-
}
51-
52-
return props;
53-
};
54-
55-
const actionsContext = {
56-
increment,
57-
muted,
58-
unmuteAudio,
59-
setProfile,
60-
};
61-
62-
const customProps = getCustomProps();
63-
64-
return (
65-
<Root
66-
actions={actions}
67-
actionsContext={actionsContext}
68-
components={customProps.components}
69-
>
70-
<div class={styles.demoWrapper}>
71-
<CommandPalette searchPlaceholder={customProps.placeholder} />
72-
<section class={styles.introSection}>
73-
<h1 class={styles.introHeading}>
74-
<span>Bring it up by pressing</span>
75-
<KbdShortcut
76-
class={styles.introShortcutKey}
77-
shortcut="$mod+k"
78-
/>
79-
</h1>
80-
</section>
81-
<section class={demoStyles.demoSection}>
82-
<div>
83-
<h3 class={utilStyles.stripSpace}>Controlling application state</h3>
84-
<p>
85-
We have a <strong>count</strong> signal and an <strong>increment</strong> function to
86-
increase its value by 1.
87-
</p>
88-
<p>You can trigger it by clicking on the button below it.</p>
89-
<p>
90-
We have also bound this increment function to our first action and a keyboard shortcut
91-
</p>
92-
</div>
93-
<div class={demoStyles.demoInteraction}>
94-
<p
95-
class={utilStyles.stripSpace}
96-
aria-live="polite"
97-
aria-atomic={true}
98-
>
99-
<span class={utilStyles.visuallyHidden}>Current count is</span>
100-
<strong class={styles.countValue}>{count()}</strong>
101-
</p>
102-
<button
103-
class={utilStyles.demoAction}
104-
onClick={increment}
105-
>
106-
Increment Count
107-
</button>
108-
<p class={demoStyles.demoInteractionDesc}>
109-
Try holding <KbdShortcut shortcut="$mod+e" />
110-
</p>
111-
</div>
112-
</section>
113-
<section class={demoStyles.demoSection}>
114-
<div>
115-
<h3 class={utilStyles.stripSpace}>Conditionally enable actions</h3>
116-
<p>
117-
The <strong>Unmute Audio</strong> action is only enabled when the muted signal has
118-
value <strong>true</strong>.
119-
</p>
120-
<p>
121-
The action's <strong>cond</strong> & <strong>run</strong> functions can use latest
122-
application state to enable actions or change behavior.
123-
</p>
124-
</div>
125-
<div class={demoStyles.demoInteraction}>
126-
<div>
127-
<label
128-
htmlFor="audio-mute"
129-
class={`${styles.muteLabel} ${demoStyles.demoInteractionDesc}`}
130-
>
131-
<input
132-
type="checkbox"
133-
class={utilStyles.visuallyHidden}
134-
name="audio-mute"
135-
id="audio-mute"
136-
checked={muted()}
137-
onInput={handleMuteInput}
14+
const [count, setCount] = createSignal(0);
15+
const [muted, setMuted] = createSignal(false);
16+
const [profile, setProfile] = createSignal<Profile>('personal');
17+
const [searchParams] = useSearchParams();
18+
19+
console.log("hi")
20+
const increment = () => {
21+
setCount((prev) => (prev += 1));
22+
};
23+
24+
const unmuteAudio = () => {
25+
setMuted(false);
26+
};
27+
28+
const handleMuteInput = () => {
29+
setMuted((old) => !old);
30+
};
31+
32+
const handleProfileChange = (event: Event) => {
33+
const targetElem = event.currentTarget as HTMLSelectElement;
34+
35+
const newProfile = targetElem.value as Profile;
36+
setProfile(newProfile);
37+
};
38+
39+
const getCustomProps = () => {
40+
const features = searchParams.feat || [];
41+
42+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
43+
const props: Record<string, any> = {};
44+
45+
46+
if (typeof features === "string") {
47+
if (features.includes('components')) {
48+
props.components = components;
49+
}
50+
51+
if (features.includes('placeholder')) {
52+
props.placeholder = 'Search for an action...';
53+
}
54+
}
55+
56+
return props;
57+
};
58+
59+
const actionsContext = {
60+
increment,
61+
muted,
62+
unmuteAudio,
63+
setProfile,
64+
};
65+
66+
const customProps = getCustomProps();
67+
68+
return (
69+
<Root
70+
actions={actions}
71+
actionsContext={actionsContext}
72+
components={customProps.components}
73+
>
74+
<div class={styles.demoWrapper}>
75+
<CommandPalette searchPlaceholder={customProps.placeholder}/>
76+
<section class={styles.introSection}>
77+
<h1 class={styles.introHeading}>
78+
<span>Bring it up by pressing</span>
79+
<KbdShortcut
80+
class={styles.introShortcutKey}
81+
shortcut="$mod+k"
82+
/>
83+
</h1>
84+
</section>
85+
<section class={demoStyles.demoSection}>
86+
<div>
87+
<h3 class={utilStyles.stripSpace}>Controlling application state</h3>
88+
<p>
89+
We have a <strong>count</strong> signal and an <strong>increment</strong> function to
90+
increase its value by 1.
91+
</p>
92+
<p>You can trigger it by clicking on the button below it.</p>
93+
<p>
94+
We have also bound this increment function to our first action and a keyboard shortcut
95+
</p>
96+
</div>
97+
<div class={demoStyles.demoInteraction}>
98+
<p
99+
class={utilStyles.stripSpace}
100+
aria-live="polite"
101+
aria-atomic={true}
102+
>
103+
<span class={utilStyles.visuallyHidden}>Current count is</span>
104+
<strong class={styles.countValue}>{count()}</strong>
105+
</p>
106+
<button
107+
class={utilStyles.demoAction}
108+
onClick={increment}
109+
>
110+
Increment Count
111+
</button>
112+
<p class={demoStyles.demoInteractionDesc}>
113+
Try holding <KbdShortcut shortcut="$mod+e"/>
114+
</p>
115+
</div>
116+
</section>
117+
<section class={demoStyles.demoSection}>
118+
<div>
119+
<h3 class={utilStyles.stripSpace}>Conditionally enable actions</h3>
120+
<p>
121+
The <strong>Unmute Audio</strong> action is only enabled when the muted signal has
122+
value <strong>true</strong>.
123+
</p>
124+
<p>
125+
The action's <strong>cond</strong> & <strong>run</strong> functions can use latest
126+
application state to enable actions or change behavior.
127+
</p>
128+
</div>
129+
<div class={demoStyles.demoInteraction}>
130+
<div>
131+
<label
132+
for="audio-mute"
133+
class={`${styles.muteLabel} ${demoStyles.demoInteractionDesc}`}
134+
>
135+
<input
136+
type="checkbox"
137+
class={utilStyles.visuallyHidden}
138+
name="audio-mute"
139+
id="audio-mute"
140+
checked={muted()}
141+
onInput={handleMuteInput}
142+
/>
143+
<strong>
144+
<Show
145+
when={muted()}
146+
fallback="Audible"
147+
children="Muted"
148+
/>
149+
</strong>
150+
<span>(click to toggle)</span>
151+
</label>
152+
</div>
153+
<Show when={muted()}>
154+
<p class={demoStyles.demoInteractionDesc}>
155+
Press <KbdShortcut shortcut="$mod+u"/> to unmute.
156+
</p>
157+
</Show>
158+
</div>
159+
</section>
160+
<NestedActionDemo
161+
profile={profile()}
162+
onProfileChange={handleProfileChange}
138163
/>
139-
<strong>
140-
<Show
141-
when={muted()}
142-
fallback="Audible"
143-
children="Muted"
144-
/>
145-
</strong>
146-
<span>(click to toggle)</span>
147-
</label>
164+
<DynamicActionContextDemo/>
148165
</div>
149-
<Show when={muted()}>
150-
<p class={demoStyles.demoInteractionDesc}>
151-
Press <KbdShortcut shortcut="$mod+u" /> to unmute.
152-
</p>
153-
</Show>
154-
</div>
155-
</section>
156-
<NestedActionDemo
157-
profile={profile()}
158-
onProfileChange={handleProfileChange}
159-
/>
160-
<DynamicActionContextDemo />
161-
</div>
162-
</Root>
163-
);
166+
</Root>
167+
);
164168
};
165169

166170
export default DemoView;

‎src/app/views/docs/Api/Api.view.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Navigate } from 'solid-app-router';
1+
import { Navigate } from '@solidjs/router';
22
import { Component } from 'solid-js';
33

44
const ApiView: Component = () => {

‎src/app/views/docs/Api/ApiDefineAction.view.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import { Component } from 'solid-js';
2-
import { Link } from 'solid-app-router';
32
import { Snippet } from '../Snippet/Snippet';
43
import docsStyles from '../docsUtils.module.css';
4+
import {A} from "@solidjs/router";
55

66
const ApiRootView: Component = () => {
7-
return (
8-
<section class={docsStyles.section}>
9-
<h2>defineAction</h2>
10-
<p class={docsStyles.text}>It helps you define an action with autocomplete suggestions.</p>
11-
<p class={docsStyles.text}>
12-
Related actions can be grouped in modules and exported. The combined map of actions is
13-
passed to <Link href="/docs/api/root">Root</Link>
14-
</p>
15-
<Snippet snippetId="api-define-action" />
16-
</section>
17-
);
7+
return (
8+
<section class={docsStyles.section}>
9+
<h2>defineAction</h2>
10+
<p class={docsStyles.text}>It helps you define an action with autocomplete suggestions.</p>
11+
<p class={docsStyles.text}>
12+
Related actions can be grouped in modules and exported. The combined map of actions is
13+
passed to <A href="/docs/api/root">Root</A>
14+
</p>
15+
<Snippet snippetId="api-define-action"/>
16+
</section>
17+
);
1818
};
1919

2020
export default ApiRootView;

0 commit comments

Comments
 (0)