Skip to content

Commit ae92f70

Browse files
riccardoperrariccardoperra
committed
feat: dialog/modal component
1 parent dab4018 commit ae92f70

13 files changed

+774
-351
lines changed

Diff for: ‎packages/kit/dev/App.tsx

+18-335
Original file line numberDiff line numberDiff line change
@@ -1,342 +1,25 @@
11
import type { Component } from "solid-js";
2-
import { For, JSX } from "solid-js";
3-
import {
4-
Button,
5-
ButtonProps,
6-
IconButton,
7-
TextField,
8-
TextFieldProps,
9-
theme,
10-
} from "@codeui/kit";
11-
import { TextFieldLabel } from "../src/components/TextField/TextFieldLabel";
12-
13-
function ArrowRightIcon(props: JSX.IntrinsicElements["svg"]) {
14-
return (
15-
<svg
16-
xmlns="http://www.w3.org/2000/svg"
17-
viewBox="0 0 20 20"
18-
fill="currentColor"
19-
{...props}
20-
width={"1.1em"}
21-
height={"1.1em"}
22-
>
23-
<path
24-
fill-rule="evenodd"
25-
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
26-
clip-rule="evenodd"
27-
/>
28-
</svg>
29-
);
30-
}
31-
32-
function Clipboard() {
33-
return (
34-
<svg
35-
xmlns="http://www.w3.org/2000/svg"
36-
fill="none"
37-
viewBox="0 0 24 24"
38-
stroke-width="1.5"
39-
stroke="currentColor"
40-
width={"1.1em"}
41-
height={"1.1em"}
42-
>
43-
<path
44-
stroke-linecap="round"
45-
stroke-linejoin="round"
46-
d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z"
47-
/>
48-
</svg>
49-
);
50-
}
51-
52-
function SearchIcon() {
53-
return (
54-
<svg
55-
xmlns="http://www.w3.org/2000/svg"
56-
viewBox="0 0 20 20"
57-
fill="currentColor"
58-
width={"1.1em"}
59-
height={"1.1em"}
60-
>
61-
<path
62-
fill-rule="evenodd"
63-
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
64-
clip-rule="evenodd"
65-
/>
66-
</svg>
67-
);
68-
}
2+
import { theme } from "@codeui/kit";
3+
import { DialogDemo } from "./demo/Dialog";
4+
import { ButtonDemo } from "./demo/Button";
5+
import { TextInputDemo } from "./demo/TextInput";
6+
import { DemoSection } from "./ui/DemoSection";
697

708
const App: Component = () => {
9+
document.documentElement.classList.add(theme);
7110
return (
72-
<div class={theme} style={{ color: "white", padding: "2rem" }}>
73-
{/* Button */}
74-
<h1>Button</h1>
75-
76-
<div style={{ display: "flex", gap: "2rem", padding: "1rem" }}>
77-
<For
78-
each={
79-
["primary", "secondary", "tertiary", "negative"] as ButtonProps["theme"][]
80-
}
81-
>
82-
{variant => (
83-
<Button size={"md"} theme={variant}>
84-
Button
85-
</Button>
86-
)}
87-
</For>
88-
89-
<Button size={"md"} theme={"primary"} isDisabled>
90-
Disabled
91-
</Button>
92-
</div>
93-
94-
<div
95-
style={{
96-
display: "flex",
97-
gap: "2rem",
98-
padding: "1rem",
99-
"align-items": "center",
100-
}}
101-
>
102-
<For each={["xs", "sm", "md", "lg", "xl"] as ButtonProps["size"][]}>
103-
{size => (
104-
<Button size={size} theme={"secondary"}>
105-
Button
106-
</Button>
107-
)}
108-
</For>
109-
</div>
110-
111-
<div
112-
style={{
113-
display: "flex",
114-
gap: "2rem",
115-
padding: "1rem",
116-
"align-items": "center",
117-
}}
118-
>
119-
<For each={["xs", "sm", "md", "lg", "xl"] as ButtonProps["size"][]}>
120-
{size => (
121-
<Button leftIcon={<Clipboard />} size={size} theme={"secondary"}>
122-
Copy
123-
</Button>
124-
)}
125-
</For>
126-
</div>
127-
128-
<div
129-
style={{
130-
display: "flex",
131-
gap: "2rem",
132-
padding: "1rem",
133-
"align-items": "center",
134-
}}
135-
>
136-
<For each={["xs", "sm", "md", "lg", "xl"] as ButtonProps["size"][]}>
137-
{size => (
138-
<Button size={size} theme={"secondary"} pill>
139-
Button
140-
</Button>
141-
)}
142-
</For>
143-
</div>
144-
145-
{/* IconButton */}
146-
<h1>Icon Button</h1>
147-
148-
<div style={{ display: "flex", gap: "2rem", padding: "1rem" }}>
149-
<For
150-
each={
151-
["primary", "secondary", "tertiary", "negative"] as ButtonProps["theme"][]
152-
}
153-
>
154-
{variant => (
155-
<IconButton aria-label="Search" size={"md"} theme={variant}>
156-
<SearchIcon />
157-
</IconButton>
158-
)}
159-
</For>
160-
</div>
161-
162-
<div
163-
style={{
164-
display: "flex",
165-
gap: "2rem",
166-
padding: "1rem",
167-
"align-items": "center",
168-
}}
169-
>
170-
<For each={["xs", "sm", "md", "lg", "xl"] as ButtonProps["size"][]}>
171-
{size => (
172-
<IconButton aria-label="Search" size={size} theme={"secondary"}>
173-
<SearchIcon />
174-
</IconButton>
175-
)}
176-
</For>
177-
</div>
178-
179-
<div
180-
style={{
181-
display: "flex",
182-
gap: "2rem",
183-
padding: "1rem",
184-
"align-items": "center",
185-
}}
186-
>
187-
<For each={["xs", "sm", "md", "lg", "xl"] as ButtonProps["size"][]}>
188-
{size => (
189-
<IconButton aria-label="Search" size={size} theme={"secondary"} pill>
190-
<SearchIcon />
191-
</IconButton>
192-
)}
193-
</For>
194-
</div>
195-
196-
<div
197-
style={{
198-
display: "flex",
199-
gap: "2rem",
200-
padding: "1rem",
201-
"align-items": "center",
202-
}}
203-
>
204-
<IconButton aria-label="Search" size={"md"} theme={"secondary"}>
205-
<SearchIcon />
206-
</IconButton>
207-
</div>
208-
209-
{/* Text Input */}
210-
<h1>Text Input</h1>
211-
212-
<div
213-
style={{
214-
display: "flex",
215-
gap: "2rem",
216-
padding: "1rem",
217-
"align-items": "center",
218-
}}
219-
>
220-
<For each={["xs", "sm", "md", "lg", "xl"] as TextFieldProps["size"][]}>
221-
{size => <TextField value={"Username"} label={"Username"} size={size} />}
222-
</For>
223-
</div>
224-
225-
<div
226-
style={{
227-
display: "flex",
228-
gap: "2rem",
229-
padding: "1rem",
230-
"align-items": "center",
231-
}}
232-
>
233-
<For each={["xs", "sm", "md", "lg", "xl"] as TextFieldProps["size"][]}>
234-
{size => (
235-
<TextField
236-
value={"Username"}
237-
theme={"outline"}
238-
label={"Username"}
239-
size={size}
240-
/>
241-
)}
242-
</For>
243-
</div>
244-
245-
<div
246-
style={{
247-
display: "flex",
248-
gap: "2rem",
249-
padding: "1rem",
250-
"align-items": "center",
251-
}}
252-
>
253-
<For each={["xs", "sm", "md", "lg", "xl"] as TextFieldProps["size"][]}>
254-
{size => (
255-
<TextField
256-
value={"Username"}
257-
theme={"inline"}
258-
label={"Username"}
259-
size={size}
260-
/>
261-
)}
262-
</For>
263-
</div>
264-
265-
<div
266-
style={{
267-
display: "flex",
268-
gap: "2rem",
269-
padding: "1rem",
270-
"align-items": "center",
271-
}}
272-
>
273-
<For each={["xs", "sm", "md", "lg", "xl"] as TextFieldProps["size"][]}>
274-
{size => (
275-
<TextField
276-
value={"Username"}
277-
description={"Your username is description"}
278-
label={<TextFieldLabel>Username</TextFieldLabel>}
279-
size={size}
280-
/>
281-
)}
282-
</For>
283-
</div>
284-
285-
<For each={["outline", "filled", "inline"] as TextFieldProps["theme"][]}>
286-
{theme => (
287-
<div
288-
style={{
289-
display: "flex",
290-
gap: "2rem",
291-
padding: "1rem",
292-
"align-items": "center",
293-
}}
294-
>
295-
<TextField
296-
placeholder={"Enter text..."}
297-
theme={theme}
298-
label={"Disabled input"}
299-
size={"md"}
300-
isDisabled
301-
/>
302-
<TextField
303-
placeholder={"Enter text..."}
304-
theme={theme}
305-
label={"Readonly input"}
306-
size={"md"}
307-
isReadOnly
308-
/>
309-
<TextField
310-
placeholder={"Enter text..."}
311-
theme={theme}
312-
label={"Required input"}
313-
size={"md"}
314-
isRequired
315-
/>
316-
</div>
317-
)}
318-
</For>
319-
320-
<div
321-
style={{
322-
display: "flex",
323-
gap: "2rem",
324-
padding: "1rem",
325-
"align-items": "center",
326-
}}
327-
>
328-
<For each={["xs", "sm", "md", "lg", "xl"] as TextFieldProps["size"][]}>
329-
{size => (
330-
<TextField
331-
validationState={"invalid"}
332-
value={"Username"}
333-
label={"Username"}
334-
errorMessage={"Username is not valid"}
335-
size={size}
336-
/>
337-
)}
338-
</For>
339-
</div>
11+
<div class={theme} style={{ color: "white" }}>
12+
<DemoSection>
13+
<ButtonDemo />
14+
</DemoSection>
15+
16+
<DemoSection>
17+
<TextInputDemo />
18+
</DemoSection>
19+
20+
<DemoSection>
21+
<DialogDemo />
22+
</DemoSection>
34023
</div>
34124
);
34225
};

0 commit comments

Comments
 (0)