@colisweb/rescript-toolkit 2.68.0 → 2.68.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.yarn/install-state.gz +0 -0
- package/package.json +1 -1
- package/playground/PlaygroundComponents.res +5 -0
- package/playground/PlaygroundRouter.res +14 -6
- package/playground/components/Playground_Accordion.res +31 -0
- package/playground/components/Playground_ButtonGroup.res +40 -0
- package/playground/components/Playground_Notice.res +34 -0
- package/playground/components/Playground_Snackbar.res +43 -0
- package/playground/components/Playground_Spinner.res +48 -0
- package/vite.config.js +1 -1
- package/playground/stories/Toolkit__UI_AccordionStory.res +0 -34
- package/playground/stories/Toolkit__UI_NoticeStory.res +0 -66
- package/playground/stories/Toolkit__UI_SnackbarStory.res +0 -209
- package/playground/stories/Toolkit__UI_SpinnerStory.res +0 -65
- package/playground/stories/Toolkit__Ui_ButtonGroupStory.res +0 -77
package/.yarn/install-state.gz
CHANGED
|
Binary file
|
package/package.json
CHANGED
|
@@ -13,6 +13,11 @@ let components: array<(string, module(Config))> = [
|
|
|
13
13
|
("alert", module(Playground_Alert)),
|
|
14
14
|
("modal", module(Playground_Modal)),
|
|
15
15
|
("multiselect", module(Playground_MultiSelect)),
|
|
16
|
+
("accordion", module(Playground_Accordion)),
|
|
17
|
+
("buttonGroup", module(Playground_ButtonGroup)),
|
|
18
|
+
("spinner", module(Playground_Spinner)),
|
|
19
|
+
("notice", module(Playground_Notice)),
|
|
20
|
+
("snackbar", module(Playground_Snackbar)),
|
|
16
21
|
]
|
|
17
22
|
|
|
18
23
|
module List = {
|
|
@@ -21,7 +21,12 @@ module RouterConfig = {
|
|
|
21
21
|
| NotFound
|
|
22
22
|
|
|
23
23
|
let make = (url: RescriptReactRouter.url) => {
|
|
24
|
-
switch url.path {
|
|
24
|
+
let path = switch url.path {
|
|
25
|
+
| list{"colisweb-open-source", "rescript-toolkit", ...routes} => routes
|
|
26
|
+
| path => path
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
switch path {
|
|
25
30
|
| list{} => Home
|
|
26
31
|
| list{"docs", ...rest} =>
|
|
27
32
|
switch rest {
|
|
@@ -49,11 +54,14 @@ module RouterConfig = {
|
|
|
49
54
|
}
|
|
50
55
|
}
|
|
51
56
|
|
|
57
|
+
@val
|
|
58
|
+
external baseUrl: string = "import.meta.env.BASE_URL"
|
|
59
|
+
|
|
52
60
|
let toString = (route: t) =>
|
|
53
61
|
switch route {
|
|
54
|
-
| Home =>
|
|
62
|
+
| Home => baseUrl
|
|
55
63
|
| Docs(doc) => {
|
|
56
|
-
let base =
|
|
64
|
+
let base = `${baseUrl}docs`
|
|
57
65
|
|
|
58
66
|
switch doc {
|
|
59
67
|
| ApiDecoding => `${base}/api-decoding`
|
|
@@ -64,7 +72,7 @@ module RouterConfig = {
|
|
|
64
72
|
}
|
|
65
73
|
|
|
66
74
|
| DesignSystem(designRoute) => {
|
|
67
|
-
let base =
|
|
75
|
+
let base = `${baseUrl}design`
|
|
68
76
|
|
|
69
77
|
switch designRoute {
|
|
70
78
|
| Fonts => `${base}/fonts`
|
|
@@ -74,7 +82,7 @@ module RouterConfig = {
|
|
|
74
82
|
}
|
|
75
83
|
|
|
76
84
|
| Components(route) => {
|
|
77
|
-
let base =
|
|
85
|
+
let base = `${baseUrl}components`
|
|
78
86
|
|
|
79
87
|
switch route {
|
|
80
88
|
| List => `${base}`
|
|
@@ -82,7 +90,7 @@ module RouterConfig = {
|
|
|
82
90
|
}
|
|
83
91
|
}
|
|
84
92
|
|
|
85
|
-
| NotFound =>
|
|
93
|
+
| NotFound => `${baseUrl}404`
|
|
86
94
|
}
|
|
87
95
|
}
|
|
88
96
|
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
open ReachUi
|
|
2
|
+
|
|
3
|
+
let resi = ""
|
|
4
|
+
|
|
5
|
+
@module("@root/playground/components/Playground_Accordion.res?raw")
|
|
6
|
+
external codeExample: string = "default"
|
|
7
|
+
|
|
8
|
+
@react.component
|
|
9
|
+
let make = () =>
|
|
10
|
+
<div>
|
|
11
|
+
<Accordion>
|
|
12
|
+
<AccordionItem>
|
|
13
|
+
{"title"->React.string}
|
|
14
|
+
<AccordionButton>
|
|
15
|
+
<span className="cw-accordion-icon">
|
|
16
|
+
<BsReactIcons.MdKeyboardArrowRight />
|
|
17
|
+
</span>
|
|
18
|
+
</AccordionButton>
|
|
19
|
+
<AccordionPanel> {"content"->React.string} </AccordionPanel>
|
|
20
|
+
</AccordionItem>
|
|
21
|
+
<AccordionItem>
|
|
22
|
+
<AccordionButton className="flex items-center">
|
|
23
|
+
{"title"->React.string}
|
|
24
|
+
<span className="cw-accordion-icon">
|
|
25
|
+
<BsReactIcons.MdKeyboardArrowRight />
|
|
26
|
+
</span>
|
|
27
|
+
</AccordionButton>
|
|
28
|
+
<AccordionPanel> {"content"->React.string} </AccordionPanel>
|
|
29
|
+
</AccordionItem>
|
|
30
|
+
</Accordion>
|
|
31
|
+
</div>
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
@module("@root/src/ui/Toolkit__Ui_ButtonGroup.resi?raw")
|
|
2
|
+
external resi: string = "default"
|
|
3
|
+
|
|
4
|
+
@module("@root/playground/components/Playground_ButtonGroup.res?raw")
|
|
5
|
+
external codeExample: string = "default"
|
|
6
|
+
|
|
7
|
+
@react.component
|
|
8
|
+
let make = () => {
|
|
9
|
+
let sizes = Js.Dict.fromArray([("md", #md), ("lg", #xl)])
|
|
10
|
+
|
|
11
|
+
let (selectedOption, setSelectedOption) = React.useState(() => #option1)
|
|
12
|
+
|
|
13
|
+
<div>
|
|
14
|
+
{sizes
|
|
15
|
+
->Js.Dict.entries
|
|
16
|
+
->Array.mapWithIndex((i, (sizeText, size)) =>
|
|
17
|
+
<div key={i->Int.toString ++ sizeText} className="flex flex-row mb-4 items-center">
|
|
18
|
+
<strong className="w-40"> {sizeText->React.string} </strong>
|
|
19
|
+
<Toolkit__Ui_ButtonGroup className="my-4 self-center" size>
|
|
20
|
+
<button
|
|
21
|
+
className={selectedOption === #option1 ? "selected" : ""}
|
|
22
|
+
onClick={_ => setSelectedOption(_ => #option1)}>
|
|
23
|
+
{"Option 1"->React.string}
|
|
24
|
+
</button>
|
|
25
|
+
<button
|
|
26
|
+
className={selectedOption === #option2 ? "selected" : ""}
|
|
27
|
+
onClick={_ => setSelectedOption(_ => #option2)}>
|
|
28
|
+
{"Option 2"->React.string}
|
|
29
|
+
</button>
|
|
30
|
+
<button
|
|
31
|
+
className={selectedOption === #option3 ? "selected" : ""}
|
|
32
|
+
onClick={_ => setSelectedOption(_ => #option3)}>
|
|
33
|
+
{"Option 3"->React.string}
|
|
34
|
+
</button>
|
|
35
|
+
</Toolkit__Ui_ButtonGroup>
|
|
36
|
+
</div>
|
|
37
|
+
)
|
|
38
|
+
->React.array}
|
|
39
|
+
</div>
|
|
40
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
open Toolkit__Ui
|
|
2
|
+
|
|
3
|
+
@module("@root/src/ui/Toolkit__Ui_Notice.resi?raw")
|
|
4
|
+
external resi: string = "default"
|
|
5
|
+
|
|
6
|
+
@module("@root/playground/components/Playground_Notice.res?raw")
|
|
7
|
+
external codeExample: string = "default"
|
|
8
|
+
|
|
9
|
+
@react.component
|
|
10
|
+
let make = () => {
|
|
11
|
+
let pRef = React.useRef(Js.Nullable.null)
|
|
12
|
+
let noticeRef2 = React.useRef(Js.Nullable.null)
|
|
13
|
+
let (noticeVisible1, setNoticeVisible1) = React.useState(() => false)
|
|
14
|
+
let (noticeVisible2, setNoticeVisible2) = React.useState(() => false)
|
|
15
|
+
|
|
16
|
+
<div>
|
|
17
|
+
<div className="flex flex-row items-center">
|
|
18
|
+
<Button onClick={_ => setNoticeVisible1(v => !v)}> {"Toggle notice 1"->React.string} </Button>
|
|
19
|
+
<Button onClick={_ => setNoticeVisible2(v => !v)}> {"Toggle notice 2"->React.string} </Button>
|
|
20
|
+
</div>
|
|
21
|
+
<p className="text-center" ref={ReactDOM.Ref.domRef(pRef)}>
|
|
22
|
+
{"example notice 1"->React.string}
|
|
23
|
+
</p>
|
|
24
|
+
<div ref={ReactDOM.Ref.domRef(noticeRef2)} className="w-40 h-40 bg-danger-300 ml-20 mt-20">
|
|
25
|
+
{"notice 2"->React.string}
|
|
26
|
+
</div>
|
|
27
|
+
<Notice visible=noticeVisible1 baseElementRef=pRef className="bg-info-700 p-2 rounded">
|
|
28
|
+
<p className="text-white"> {"Some text there"->React.string} </p>
|
|
29
|
+
</Notice>
|
|
30
|
+
<Notice visible=noticeVisible2 baseElementRef=noticeRef2 className="bg-info-700 p-2 rounded">
|
|
31
|
+
<p className="text-white"> {"Some text there"->React.string} </p>
|
|
32
|
+
</Notice>
|
|
33
|
+
</div>
|
|
34
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
open Toolkit__Ui
|
|
2
|
+
|
|
3
|
+
@module("@root/src/ui/Toolkit__Ui_Snackbar.resi?raw")
|
|
4
|
+
external resi: string = "default"
|
|
5
|
+
|
|
6
|
+
@module("@root/playground/components/Playground_Snackbar.res?raw")
|
|
7
|
+
external codeExample: string = "default"
|
|
8
|
+
|
|
9
|
+
@react.component
|
|
10
|
+
let make = () => {
|
|
11
|
+
let variants: array<Toolkit__Ui_Snackbar.variant> = [#success, #warning, #danger]
|
|
12
|
+
|
|
13
|
+
<div>
|
|
14
|
+
<Snackbar.Provider />
|
|
15
|
+
<div className="flex flex-col gap-4">
|
|
16
|
+
{variants
|
|
17
|
+
->Array.map(variant => {
|
|
18
|
+
let variantAsString = (variant :> string)
|
|
19
|
+
|
|
20
|
+
<div className="flex flex-row gap-4">
|
|
21
|
+
<span>
|
|
22
|
+
<Button onClick={_ => Snackbar.show(~title=variantAsString, ~variant, ())->ignore}>
|
|
23
|
+
{`Trigger ${variantAsString} variant`->React.string}
|
|
24
|
+
</Button>
|
|
25
|
+
</span>
|
|
26
|
+
<span>
|
|
27
|
+
<Button
|
|
28
|
+
onClick={_ =>
|
|
29
|
+
Snackbar.show(
|
|
30
|
+
~title=variantAsString,
|
|
31
|
+
~content="Description"->React.string,
|
|
32
|
+
~variant,
|
|
33
|
+
(),
|
|
34
|
+
)->ignore}>
|
|
35
|
+
{`Trigger ${variantAsString} variant with description`->React.string}
|
|
36
|
+
</Button>
|
|
37
|
+
</span>
|
|
38
|
+
</div>
|
|
39
|
+
})
|
|
40
|
+
->React.array}
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
open Toolkit__Ui
|
|
2
|
+
|
|
3
|
+
@module("@root/src/ui/Toolkit__Ui_Spinner.resi?raw")
|
|
4
|
+
external resi: string = "default"
|
|
5
|
+
|
|
6
|
+
@module("@root/playground/components/Playground_Spinner.res?raw")
|
|
7
|
+
external codeExample: string = "default"
|
|
8
|
+
|
|
9
|
+
@react.component
|
|
10
|
+
let make = () => {
|
|
11
|
+
let colors = Js.Dict.fromArray([
|
|
12
|
+
("current", #current),
|
|
13
|
+
("black", #black),
|
|
14
|
+
("white", #white),
|
|
15
|
+
("gray", #gray),
|
|
16
|
+
("success", #success),
|
|
17
|
+
("primary", #primary),
|
|
18
|
+
("warning", #warning),
|
|
19
|
+
("info", #info),
|
|
20
|
+
("danger", #danger),
|
|
21
|
+
])
|
|
22
|
+
|
|
23
|
+
let sizes = Js.Dict.fromArray([("sm", #sm), ("md", #md), ("lg", #lg), ("xl", #xl)])
|
|
24
|
+
|
|
25
|
+
<div>
|
|
26
|
+
{colors
|
|
27
|
+
->Js.Dict.entries
|
|
28
|
+
->Array.mapWithIndex((i, (colorText, color)) =>
|
|
29
|
+
<div key={i->Int.toString ++ colorText} className="flex flex-row items-center">
|
|
30
|
+
<strong className="w-40"> {colorText->React.string} </strong>
|
|
31
|
+
<div className="flex flex-row items-center gap-8 mb-4">
|
|
32
|
+
{sizes
|
|
33
|
+
->Js.Dict.entries
|
|
34
|
+
->Array.mapWithIndex((k, (sizeText, size)) =>
|
|
35
|
+
<div
|
|
36
|
+
key={(i + k)->Int.toString ++ (colorText ++ sizeText)}
|
|
37
|
+
className="flex flex-col items-center">
|
|
38
|
+
<Spinner color size />
|
|
39
|
+
<span className="text-xxs"> {sizeText->React.string} </span>
|
|
40
|
+
</div>
|
|
41
|
+
)
|
|
42
|
+
->React.array}
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
)
|
|
46
|
+
->React.array}
|
|
47
|
+
</div>
|
|
48
|
+
}
|
package/vite.config.js
CHANGED
|
@@ -13,7 +13,7 @@ const appDirectory = fs.realpathSync(process.cwd());
|
|
|
13
13
|
const isProduction = process.env.NODE_ENV === "production";
|
|
14
14
|
|
|
15
15
|
export default defineConfig({
|
|
16
|
-
base: isProduction ? "/colisweb-open-source/rescript-toolkit/" : "",
|
|
16
|
+
base: isProduction ? "/colisweb-open-source/rescript-toolkit/" : "/",
|
|
17
17
|
build: {
|
|
18
18
|
sourcemap: true,
|
|
19
19
|
},
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
open Storybook.Story
|
|
2
|
-
open Storybook
|
|
3
|
-
|
|
4
|
-
open ReachUi
|
|
5
|
-
|
|
6
|
-
let _module = %raw("module")
|
|
7
|
-
|
|
8
|
-
module Example = {
|
|
9
|
-
@react.component
|
|
10
|
-
let make = () =>
|
|
11
|
-
<div>
|
|
12
|
-
<Accordion>
|
|
13
|
-
<AccordionItem>
|
|
14
|
-
{"title"->React.string}
|
|
15
|
-
<AccordionButton>
|
|
16
|
-
<span className="cw-accordion-icon"> <BsReactIcons.MdKeyboardArrowRight /> </span>
|
|
17
|
-
</AccordionButton>
|
|
18
|
-
<AccordionPanel> {"content"->React.string} </AccordionPanel>
|
|
19
|
-
</AccordionItem>
|
|
20
|
-
<AccordionItem>
|
|
21
|
-
<AccordionButton className="flex items-center">
|
|
22
|
-
{"title"->React.string}
|
|
23
|
-
<span className="cw-accordion-icon"> <BsReactIcons.MdKeyboardArrowRight /> </span>
|
|
24
|
-
</AccordionButton>
|
|
25
|
-
<AccordionPanel> {"content"->React.string} </AccordionPanel>
|
|
26
|
-
</AccordionItem>
|
|
27
|
-
</Accordion>
|
|
28
|
-
</div>
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
storiesOf("Components/Accordion", _module)
|
|
32
|
-
->addDecorator(Knobs.withKnobs)
|
|
33
|
-
->add("default", () => <Example />)
|
|
34
|
-
->ignore
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
open Storybook
|
|
2
|
-
open Toolkit__Ui
|
|
3
|
-
|
|
4
|
-
@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Notice.resi")
|
|
5
|
-
external source: 'a = "default"
|
|
6
|
-
|
|
7
|
-
let default = CSF.make(~title="Components/Notice", ())
|
|
8
|
-
|
|
9
|
-
let example = () => {
|
|
10
|
-
let pRef = React.useRef(Js.Nullable.null)
|
|
11
|
-
let noticeRef2 = React.useRef(Js.Nullable.null)
|
|
12
|
-
let (noticeVisible1, setNoticeVisible1) = React.useState(() => false)
|
|
13
|
-
let (noticeVisible2, setNoticeVisible2) = React.useState(() => false)
|
|
14
|
-
|
|
15
|
-
<div>
|
|
16
|
-
<div className="flex flex-row items-center">
|
|
17
|
-
<Button onClick={_ => setNoticeVisible1(v => !v)}> {"Toggle notice 1"->React.string} </Button>
|
|
18
|
-
<Button onClick={_ => setNoticeVisible2(v => !v)}> {"Toggle notice 2"->React.string} </Button>
|
|
19
|
-
</div>
|
|
20
|
-
<p className="text-center" ref={ReactDOM.Ref.domRef(pRef)}> {"example"->React.string} </p>
|
|
21
|
-
<div ref={ReactDOM.Ref.domRef(noticeRef2)} className="w-40 h-40 bg-danger-300 ml-20 mt-20" />
|
|
22
|
-
<Notice visible=noticeVisible1 baseElementRef=pRef className="bg-info-700 p-2 rounded">
|
|
23
|
-
<p className="text-white"> {"Some text there"->React.string} </p>
|
|
24
|
-
</Notice>
|
|
25
|
-
<Notice visible=noticeVisible2 baseElementRef=noticeRef2 className="bg-info-700 p-2 rounded">
|
|
26
|
-
<p className="text-white"> {"Some text there"->React.string} </p>
|
|
27
|
-
</Notice>
|
|
28
|
-
</div>
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
example->CSF.addMeta(
|
|
32
|
-
~name="example",
|
|
33
|
-
~parameters={
|
|
34
|
-
"docs": {
|
|
35
|
-
"page": () => <>
|
|
36
|
-
<CodeBlock> source </CodeBlock>
|
|
37
|
-
<Docs.Source
|
|
38
|
-
language="rescript"
|
|
39
|
-
code=j`
|
|
40
|
-
let pRef = React.useRef(Js.Nullable.null)
|
|
41
|
-
let noticeRef2 = React.useRef(Js.Nullable.null)
|
|
42
|
-
let (noticeVisible1, setNoticeVisible1) = React.useState(() => false)
|
|
43
|
-
let (noticeVisible2, setNoticeVisible2) = React.useState(() => false)
|
|
44
|
-
|
|
45
|
-
<div>
|
|
46
|
-
<div className="flex flex-row items-center">
|
|
47
|
-
<Button onClick={_ => setNoticeVisible1(v => !v)}> {"Toggle notice 1"->React.string} </Button>
|
|
48
|
-
<Button onClick={_ => setNoticeVisible2(v => !v)}> {"Toggle notice 2"->React.string} </Button>
|
|
49
|
-
</div>
|
|
50
|
-
<p className="text-center" ref={ReactDOM.Ref.domRef(pRef)}> {"example"->React.string} </p>
|
|
51
|
-
<div ref={ReactDOM.Ref.domRef(noticeRef2)} className="w-40 h-40 bg-danger-300 ml-20 mt-20" />
|
|
52
|
-
<Notice visible=noticeVisible1 baseElementRef=pRef className="bg-info-700 p-2 rounded">
|
|
53
|
-
<p className="text-white"> {"Some text there"->React.string} </p>
|
|
54
|
-
</Notice>
|
|
55
|
-
<Notice visible=noticeVisible2 baseElementRef=noticeRef2 className="bg-info-700 p-2 rounded">
|
|
56
|
-
<p className="text-white"> {"Some text there"->React.string} </p>
|
|
57
|
-
</Notice>
|
|
58
|
-
</div>
|
|
59
|
-
`
|
|
60
|
-
/>
|
|
61
|
-
<Docs.Story id="components-notice--example" />
|
|
62
|
-
</>,
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
|
-
(),
|
|
66
|
-
)
|
|
@@ -1,209 +0,0 @@
|
|
|
1
|
-
open Storybook
|
|
2
|
-
open Toolkit__Ui
|
|
3
|
-
|
|
4
|
-
@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Snackbar.resi")
|
|
5
|
-
external source: 'a = "default"
|
|
6
|
-
|
|
7
|
-
let default = CSF.make(~title="Components/Snackbar", ())
|
|
8
|
-
|
|
9
|
-
let success = () =>
|
|
10
|
-
<div>
|
|
11
|
-
<Snackbar.Provider />
|
|
12
|
-
<div className="mb-4 flex flex-row flex-col-gap-4">
|
|
13
|
-
<span>
|
|
14
|
-
<Button onClick={_ => Snackbar.show(~title="Success", ~variant=#success, ())->ignore}>
|
|
15
|
-
{"Success"->React.string}
|
|
16
|
-
</Button>
|
|
17
|
-
</span>
|
|
18
|
-
<span>
|
|
19
|
-
<Button
|
|
20
|
-
onClick={_ =>
|
|
21
|
-
Snackbar.show(
|
|
22
|
-
~title="Success",
|
|
23
|
-
~content="Description"->React.string,
|
|
24
|
-
~variant=#success,
|
|
25
|
-
(),
|
|
26
|
-
)->ignore}>
|
|
27
|
-
{"Success with description"->React.string}
|
|
28
|
-
</Button>
|
|
29
|
-
</span>
|
|
30
|
-
</div>
|
|
31
|
-
</div>
|
|
32
|
-
|
|
33
|
-
success->CSF.addMeta(
|
|
34
|
-
~name="success",
|
|
35
|
-
~parameters={
|
|
36
|
-
"docs": {
|
|
37
|
-
"page": () => <>
|
|
38
|
-
<CodeBlock> source </CodeBlock>
|
|
39
|
-
<Docs.Source
|
|
40
|
-
language="rescript"
|
|
41
|
-
code=j`
|
|
42
|
-
<div>
|
|
43
|
-
<Snackbar.Provider />
|
|
44
|
-
<div className="mb-4 flex flex-row flex-col-gap-4">
|
|
45
|
-
<span>
|
|
46
|
-
<Button
|
|
47
|
-
onClick={_ =>
|
|
48
|
-
Snackbar.show(~title="Success", ~variant=#success, ())
|
|
49
|
-
}>
|
|
50
|
-
"Success"->React.string
|
|
51
|
-
</Button>
|
|
52
|
-
</span>
|
|
53
|
-
<span>
|
|
54
|
-
<Button
|
|
55
|
-
onClick={_ =>
|
|
56
|
-
Snackbar.show(
|
|
57
|
-
~title="Success",
|
|
58
|
-
~description="Description"->React.string,
|
|
59
|
-
~variant=#success,
|
|
60
|
-
(),
|
|
61
|
-
)
|
|
62
|
-
}>
|
|
63
|
-
"Success with description"->React.string
|
|
64
|
-
</Button>
|
|
65
|
-
</span>
|
|
66
|
-
</div>
|
|
67
|
-
</div>;
|
|
68
|
-
`
|
|
69
|
-
/>
|
|
70
|
-
<Docs.Story id="components-snackbar--success" />
|
|
71
|
-
</>,
|
|
72
|
-
},
|
|
73
|
-
},
|
|
74
|
-
(),
|
|
75
|
-
)
|
|
76
|
-
|
|
77
|
-
let warning = () =>
|
|
78
|
-
<div>
|
|
79
|
-
<Snackbar.Provider />
|
|
80
|
-
<div className="mb-4 flex flex-row flex-col-gap-4">
|
|
81
|
-
<span>
|
|
82
|
-
<Button onClick={_ => Snackbar.show(~title="warning", ~variant=#warning, ())->ignore}>
|
|
83
|
-
{"warning"->React.string}
|
|
84
|
-
</Button>
|
|
85
|
-
</span>
|
|
86
|
-
<span>
|
|
87
|
-
<Button
|
|
88
|
-
onClick={_ =>
|
|
89
|
-
Snackbar.show(
|
|
90
|
-
~title="warning",
|
|
91
|
-
~content="Description"->React.string,
|
|
92
|
-
~variant=#warning,
|
|
93
|
-
(),
|
|
94
|
-
)->ignore}>
|
|
95
|
-
{"warning with description"->React.string}
|
|
96
|
-
</Button>
|
|
97
|
-
</span>
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
|
|
101
|
-
warning->CSF.addMeta(
|
|
102
|
-
~name="warning",
|
|
103
|
-
~parameters={
|
|
104
|
-
"docs": {
|
|
105
|
-
"page": () => <>
|
|
106
|
-
<CodeBlock> source </CodeBlock>
|
|
107
|
-
<Docs.Source
|
|
108
|
-
language="rescript"
|
|
109
|
-
code=j`
|
|
110
|
-
<div>
|
|
111
|
-
<Snackbar.Provider />
|
|
112
|
-
<div className="mb-4 flex flex-row flex-col-gap-4">
|
|
113
|
-
<span>
|
|
114
|
-
<Button
|
|
115
|
-
onClick={_ =>
|
|
116
|
-
Snackbar.show(~title="warning", ~variant=#warning, ())
|
|
117
|
-
}>
|
|
118
|
-
"warning"->React.string
|
|
119
|
-
</Button>
|
|
120
|
-
</span>
|
|
121
|
-
<span>
|
|
122
|
-
<Button
|
|
123
|
-
onClick={_ =>
|
|
124
|
-
Snackbar.show(
|
|
125
|
-
~title="warning",
|
|
126
|
-
~description="Description"->React.string,
|
|
127
|
-
~variant=#warning,
|
|
128
|
-
(),
|
|
129
|
-
)
|
|
130
|
-
}>
|
|
131
|
-
"warning with description"->React.string
|
|
132
|
-
</Button>
|
|
133
|
-
</span>
|
|
134
|
-
</div>
|
|
135
|
-
</div>;
|
|
136
|
-
`
|
|
137
|
-
/>
|
|
138
|
-
<Docs.Story id="components-snackbar--warning" />
|
|
139
|
-
</>,
|
|
140
|
-
},
|
|
141
|
-
},
|
|
142
|
-
(),
|
|
143
|
-
)
|
|
144
|
-
|
|
145
|
-
let danger = () =>
|
|
146
|
-
<div>
|
|
147
|
-
<Snackbar.Provider />
|
|
148
|
-
<div className="mb-4 flex flex-row flex-col-gap-4">
|
|
149
|
-
<span>
|
|
150
|
-
<Button onClick={_ => Snackbar.show(~title="danger", ~variant=#danger, ())->ignore}>
|
|
151
|
-
{"danger"->React.string}
|
|
152
|
-
</Button>
|
|
153
|
-
</span>
|
|
154
|
-
<span>
|
|
155
|
-
<Button
|
|
156
|
-
onClick={_ =>
|
|
157
|
-
Snackbar.show(
|
|
158
|
-
~title="danger title pretty long",
|
|
159
|
-
~content=<div> <p> {"Description with some text"->React.string} </p> </div>,
|
|
160
|
-
~variant=#danger,
|
|
161
|
-
(),
|
|
162
|
-
)->ignore}>
|
|
163
|
-
{"danger with description"->React.string}
|
|
164
|
-
</Button>
|
|
165
|
-
</span>
|
|
166
|
-
</div>
|
|
167
|
-
</div>
|
|
168
|
-
|
|
169
|
-
danger->CSF.addMeta(
|
|
170
|
-
~name="danger",
|
|
171
|
-
~parameters={
|
|
172
|
-
"docs": {
|
|
173
|
-
"page": () => <>
|
|
174
|
-
<CodeBlock> source </CodeBlock>
|
|
175
|
-
<Docs.Source
|
|
176
|
-
language="rescript"
|
|
177
|
-
code=j`
|
|
178
|
-
<div>
|
|
179
|
-
<Snackbar.Provider />
|
|
180
|
-
<div className="mb-4 flex flex-row flex-col-gap-4">
|
|
181
|
-
<span>
|
|
182
|
-
<Button
|
|
183
|
-
onClick={_ => Snackbar.show(~title="danger", ~variant=#danger, ())}>
|
|
184
|
-
"danger"->React.string
|
|
185
|
-
</Button>
|
|
186
|
-
</span>
|
|
187
|
-
<span>
|
|
188
|
-
<Button
|
|
189
|
-
onClick={_ =>
|
|
190
|
-
Snackbar.show(
|
|
191
|
-
~title="danger",
|
|
192
|
-
~description="Description"->React.string,
|
|
193
|
-
~variant=#danger,
|
|
194
|
-
(),
|
|
195
|
-
)
|
|
196
|
-
}>
|
|
197
|
-
"danger with description"->React.string
|
|
198
|
-
</Button>
|
|
199
|
-
</span>
|
|
200
|
-
</div>
|
|
201
|
-
</div>;
|
|
202
|
-
`
|
|
203
|
-
/>
|
|
204
|
-
<Docs.Story id="components-snackbar--danger" />
|
|
205
|
-
</>,
|
|
206
|
-
},
|
|
207
|
-
},
|
|
208
|
-
(),
|
|
209
|
-
)
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
open Storybook
|
|
2
|
-
open Toolkit__Ui
|
|
3
|
-
|
|
4
|
-
@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Spinner.resi")
|
|
5
|
-
external source: 'a = "default"
|
|
6
|
-
|
|
7
|
-
let default = CSF.make(~title="Components/Spinner", ())
|
|
8
|
-
|
|
9
|
-
let defaultPalette = () => {
|
|
10
|
-
let colors = Js.Dict.fromArray([
|
|
11
|
-
("current", #current),
|
|
12
|
-
("black", #black),
|
|
13
|
-
("white", #white),
|
|
14
|
-
("gray", #gray),
|
|
15
|
-
("success", #success),
|
|
16
|
-
("primary", #primary),
|
|
17
|
-
("warning", #warning),
|
|
18
|
-
("info", #info),
|
|
19
|
-
("danger", #danger),
|
|
20
|
-
])
|
|
21
|
-
|
|
22
|
-
let sizes = Js.Dict.fromArray([("sm", #sm), ("md", #md), ("lg", #lg), ("xl", #xl)])
|
|
23
|
-
|
|
24
|
-
<div>
|
|
25
|
-
{colors
|
|
26
|
-
->Js.Dict.entries
|
|
27
|
-
->Array.mapWithIndex((i, (colorText, color)) =>
|
|
28
|
-
<div
|
|
29
|
-
key={i->Int.toString ++ colorText}
|
|
30
|
-
className="flex flex-row flex-col-gap-4 mb-4 items-center">
|
|
31
|
-
<strong className="w-40"> {colorText->React.string} </strong>
|
|
32
|
-
<div className="flex items-center flex-col-gap-6 mb-2">
|
|
33
|
-
{sizes
|
|
34
|
-
->Js.Dict.entries
|
|
35
|
-
->Array.mapWithIndex((k, (sizeText, size)) =>
|
|
36
|
-
<div key={(i + k)->Int.toString ++ (colorText ++ sizeText)}>
|
|
37
|
-
<Spinner color size />
|
|
38
|
-
</div>
|
|
39
|
-
)
|
|
40
|
-
->React.array}
|
|
41
|
-
</div>
|
|
42
|
-
</div>
|
|
43
|
-
)
|
|
44
|
-
->React.array}
|
|
45
|
-
</div>
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
defaultPalette->CSF.addMeta(
|
|
49
|
-
~name="default palette",
|
|
50
|
-
~parameters={
|
|
51
|
-
"docs": {
|
|
52
|
-
"page": () => <>
|
|
53
|
-
<CodeBlock> source </CodeBlock>
|
|
54
|
-
<Docs.Source
|
|
55
|
-
language="rescript"
|
|
56
|
-
code=j`
|
|
57
|
-
<Spinner color=#primary size=#md />
|
|
58
|
-
`
|
|
59
|
-
/>
|
|
60
|
-
<Spinner color=#primary size=#md />
|
|
61
|
-
</>,
|
|
62
|
-
},
|
|
63
|
-
},
|
|
64
|
-
(),
|
|
65
|
-
)
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
open Storybook
|
|
2
|
-
|
|
3
|
-
@module("!!raw-loader!../../../src/ui/Toolkit__Ui_ButtonGroup.resi")
|
|
4
|
-
external source: 'a = "default"
|
|
5
|
-
|
|
6
|
-
let default = CSF.make(~title="Components/ButtonGroup", ())
|
|
7
|
-
|
|
8
|
-
let sizePalette = () => {
|
|
9
|
-
let sizes = Js.Dict.fromArray([("md", #md), ("lg", #xl)])
|
|
10
|
-
|
|
11
|
-
let (selectedOption, setSelectedOption) = React.useState(() => #option1)
|
|
12
|
-
|
|
13
|
-
<div>
|
|
14
|
-
{sizes
|
|
15
|
-
->Js.Dict.entries
|
|
16
|
-
->Array.mapWithIndex((i, (sizeText, size)) =>
|
|
17
|
-
<div key={i->Int.toString ++ sizeText} className="flex flex-row mb-4 items-center">
|
|
18
|
-
<strong className="w-40"> {sizeText->React.string} </strong>
|
|
19
|
-
<Toolkit__Ui_ButtonGroup className="my-4 self-center" size>
|
|
20
|
-
<button
|
|
21
|
-
className={selectedOption === #option1 ? "selected" : ""}
|
|
22
|
-
onClick={_ => setSelectedOption(_ => #option1)}>
|
|
23
|
-
{"Option 1"->React.string}
|
|
24
|
-
</button>
|
|
25
|
-
<button
|
|
26
|
-
className={selectedOption === #option2 ? "selected" : ""}
|
|
27
|
-
onClick={_ => setSelectedOption(_ => #option2)}>
|
|
28
|
-
{"Option 2"->React.string}
|
|
29
|
-
</button>
|
|
30
|
-
<button
|
|
31
|
-
className={selectedOption === #option3 ? "selected" : ""}
|
|
32
|
-
onClick={_ => setSelectedOption(_ => #option3)}>
|
|
33
|
-
{"Option 3"->React.string}
|
|
34
|
-
</button>
|
|
35
|
-
</Toolkit__Ui_ButtonGroup>
|
|
36
|
-
</div>
|
|
37
|
-
)
|
|
38
|
-
->React.array}
|
|
39
|
-
</div>
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
sizePalette->CSF.addMeta(
|
|
43
|
-
~name="size palette",
|
|
44
|
-
~parameters={
|
|
45
|
-
"docs": {
|
|
46
|
-
"page": () => <>
|
|
47
|
-
<CodeBlock> source </CodeBlock>
|
|
48
|
-
<Docs.Source
|
|
49
|
-
language="rescript"
|
|
50
|
-
code=j`
|
|
51
|
-
let (selectedOption, setSelectedOption) = React.useState(() => #option1);
|
|
52
|
-
|
|
53
|
-
<Toolkit__Ui_ButtonGroup
|
|
54
|
-
className="my-4 self-center" size>
|
|
55
|
-
<button
|
|
56
|
-
className={selectedOption === #option1 ? "selected" : ""}
|
|
57
|
-
onClick={_ => setSelectedOption(_ => #option1)}>
|
|
58
|
-
"Option 1"->React.string
|
|
59
|
-
</button>
|
|
60
|
-
<button
|
|
61
|
-
className={selectedOption === #option2 ? "selected" : ""}
|
|
62
|
-
onClick={_ => setSelectedOption(_ => #option2)}>
|
|
63
|
-
"Option 2"->React.string
|
|
64
|
-
</button>
|
|
65
|
-
<button
|
|
66
|
-
className={selectedOption === #option3 ? "selected" : ""}
|
|
67
|
-
onClick={_ => setSelectedOption(_ => #option3)}>
|
|
68
|
-
"Option 3"->React.string
|
|
69
|
-
</button>
|
|
70
|
-
</Toolkit__Ui_ButtonGroup>
|
|
71
|
-
`
|
|
72
|
-
/>
|
|
73
|
-
</>,
|
|
74
|
-
},
|
|
75
|
-
},
|
|
76
|
-
(),
|
|
77
|
-
)
|