@temp-spotwork/ui 1.4.3 → 1.4.4
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/dist/components/molecules/navigation/sidebar/Sidebar.stories.d.ts +8 -1
- package/dist/components/molecules/navigation/sidebar/Sidebar.stories.js +299 -13
- package/dist/components/molecules/navigation/sidebar/sidebar.d.ts +7 -3
- package/dist/components/molecules/navigation/sidebar/sidebar.js +32 -28
- package/package.json +1 -1
|
@@ -4,4 +4,11 @@ import { Sidebar } from './';
|
|
|
4
4
|
declare const meta: Meta<typeof Sidebar>;
|
|
5
5
|
export default meta;
|
|
6
6
|
type Story = StoryObj<typeof meta>;
|
|
7
|
-
export declare const
|
|
7
|
+
export declare const Basic: Story;
|
|
8
|
+
export declare const WithTopAndBottomItems: Story;
|
|
9
|
+
export declare const TopItemsOnly: Story;
|
|
10
|
+
export declare const ManyItems: Story;
|
|
11
|
+
export declare const TransparentOverlay: Story;
|
|
12
|
+
export declare const CustomWidth: Story;
|
|
13
|
+
export declare const SlowTransition: Story;
|
|
14
|
+
export declare const FastTransition: Story;
|
|
@@ -1,20 +1,306 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { jsx as n, jsxs as c } from "react/jsx-runtime";
|
|
2
|
+
import { useState as r } from "react";
|
|
3
|
+
import { Sidebar as s } from "./sidebar.js";
|
|
4
|
+
import { Button as d } from "../../button/button.js";
|
|
5
|
+
const f = {
|
|
6
|
+
title: "@spotwork-ui/molecules/Sidebar",
|
|
7
|
+
component: s,
|
|
6
8
|
parameters: {
|
|
7
|
-
layout: "
|
|
9
|
+
layout: "fullscreen"
|
|
8
10
|
},
|
|
9
11
|
tags: ["autodocs"],
|
|
10
12
|
argTypes: {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
},
|
|
15
|
-
|
|
13
|
+
open: {
|
|
14
|
+
control: "boolean",
|
|
15
|
+
description: "Controls if the sidebar is open or closed"
|
|
16
|
+
},
|
|
17
|
+
width: {
|
|
18
|
+
control: "text",
|
|
19
|
+
description: "Width of the sidebar (can be px, %, rem, etc.)"
|
|
20
|
+
},
|
|
21
|
+
transitionDuration: {
|
|
22
|
+
control: { type: "number", min: 100, max: 2e3, step: 100 },
|
|
23
|
+
description: "Duration of the transition animation in milliseconds"
|
|
24
|
+
},
|
|
25
|
+
overlayTransparent: {
|
|
26
|
+
control: "boolean",
|
|
27
|
+
description: "If true, no overlay is rendered. If false, renders the overlay with background."
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}, m = ({ args: o }) => {
|
|
31
|
+
const [t, i] = r(!1);
|
|
32
|
+
return /* @__PURE__ */ c("div", { className: "p-4", children: [
|
|
33
|
+
/* @__PURE__ */ n(d, { text: "Open Sidebar", onClick: () => i(!0) }),
|
|
34
|
+
/* @__PURE__ */ n(s, { ...o, topItems: [
|
|
35
|
+
{
|
|
36
|
+
icon: "Clock",
|
|
37
|
+
label: "Clock",
|
|
38
|
+
onClick: (l) => {
|
|
39
|
+
console.log("Clicked:", l);
|
|
40
|
+
},
|
|
41
|
+
link: "/clock"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
icon: "Maximize",
|
|
45
|
+
label: "Maximize",
|
|
46
|
+
isActive: !0,
|
|
47
|
+
onClick: (l) => {
|
|
48
|
+
console.log("Clicked:", l);
|
|
49
|
+
},
|
|
50
|
+
link: "/maximize"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
icon: "CalendarSmall",
|
|
54
|
+
label: "Calendar",
|
|
55
|
+
onClick: (l) => {
|
|
56
|
+
console.log("Clicked:", l);
|
|
57
|
+
},
|
|
58
|
+
link: "/calendar"
|
|
59
|
+
}
|
|
60
|
+
], open: t, setOpen: i })
|
|
61
|
+
] });
|
|
62
|
+
}, a = ({ args: o }) => {
|
|
63
|
+
const [t, i] = r(!1);
|
|
64
|
+
return /* @__PURE__ */ c("div", { className: "p-4", children: [
|
|
65
|
+
/* @__PURE__ */ n(d, { text: "Open Sidebar with Top & Bottom Items", onClick: () => i(!0) }),
|
|
66
|
+
/* @__PURE__ */ n(s, { ...o, topItems: [
|
|
67
|
+
{
|
|
68
|
+
icon: "Clock",
|
|
69
|
+
label: "Clock",
|
|
70
|
+
onClick: (e) => {
|
|
71
|
+
console.log("Clicked:", e);
|
|
72
|
+
},
|
|
73
|
+
link: "/clock"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
icon: "Maximize",
|
|
77
|
+
label: "Maximize",
|
|
78
|
+
isActive: !0,
|
|
79
|
+
onClick: (e) => {
|
|
80
|
+
console.log("Clicked:", e);
|
|
81
|
+
},
|
|
82
|
+
link: "/maximize"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
icon: "CalendarSmall",
|
|
86
|
+
label: "Calendar",
|
|
87
|
+
onClick: (e) => {
|
|
88
|
+
console.log("Clicked:", e);
|
|
89
|
+
},
|
|
90
|
+
link: "/calendar"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
icon: "Shifts",
|
|
94
|
+
label: "Shifts",
|
|
95
|
+
onClick: (e) => {
|
|
96
|
+
console.log("Clicked:", e);
|
|
97
|
+
},
|
|
98
|
+
link: "/shifts"
|
|
99
|
+
}
|
|
100
|
+
], bottomItems: [
|
|
101
|
+
{
|
|
102
|
+
icon: "Settings",
|
|
103
|
+
label: "Settings",
|
|
104
|
+
onClick: (e) => {
|
|
105
|
+
console.log("Clicked:", e);
|
|
106
|
+
},
|
|
107
|
+
link: "/settings"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
icon: "Support",
|
|
111
|
+
label: "Help & Support",
|
|
112
|
+
onClick: (e) => {
|
|
113
|
+
console.log("Clicked:", e);
|
|
114
|
+
},
|
|
115
|
+
link: "/help"
|
|
116
|
+
}
|
|
117
|
+
], open: t, setOpen: i })
|
|
118
|
+
] });
|
|
119
|
+
}, p = ({ args: o }) => {
|
|
120
|
+
const [t, i] = r(!1);
|
|
121
|
+
return /* @__PURE__ */ c("div", { className: "p-4", children: [
|
|
122
|
+
/* @__PURE__ */ n(d, { text: "Open Sidebar (Top Items Only)", onClick: () => i(!0) }),
|
|
123
|
+
/* @__PURE__ */ n(s, { ...o, topItems: [
|
|
124
|
+
{
|
|
125
|
+
icon: "Clock",
|
|
126
|
+
label: "Clock",
|
|
127
|
+
onClick: (l) => {
|
|
128
|
+
console.log("Clicked:", l);
|
|
129
|
+
},
|
|
130
|
+
link: "/clock"
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
icon: "Maximize",
|
|
134
|
+
label: "Maximize",
|
|
135
|
+
onClick: (l) => {
|
|
136
|
+
console.log("Clicked:", l);
|
|
137
|
+
},
|
|
138
|
+
link: "/maximize"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
icon: "CalendarSmall",
|
|
142
|
+
label: "Calendar",
|
|
143
|
+
onClick: (l) => {
|
|
144
|
+
console.log("Clicked:", l);
|
|
145
|
+
},
|
|
146
|
+
link: "/calendar"
|
|
147
|
+
}
|
|
148
|
+
], open: t, setOpen: i })
|
|
149
|
+
] });
|
|
150
|
+
}, C = ({ args: o }) => {
|
|
151
|
+
const [t, i] = r(!1);
|
|
152
|
+
return /* @__PURE__ */ c("div", { className: "p-4", children: [
|
|
153
|
+
/* @__PURE__ */ n(d, { text: "Open Sidebar with Many Items", onClick: () => i(!0) }),
|
|
154
|
+
/* @__PURE__ */ n(s, { ...o, topItems: [
|
|
155
|
+
{
|
|
156
|
+
icon: "Clock",
|
|
157
|
+
label: "Clock",
|
|
158
|
+
onClick: (e) => {
|
|
159
|
+
console.log("Clicked:", e);
|
|
160
|
+
},
|
|
161
|
+
link: "/clock"
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
icon: "Maximize",
|
|
165
|
+
label: "Maximize",
|
|
166
|
+
isActive: !0,
|
|
167
|
+
onClick: (e) => {
|
|
168
|
+
console.log("Clicked:", e);
|
|
169
|
+
},
|
|
170
|
+
link: "/maximize"
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
icon: "CalendarSmall",
|
|
174
|
+
label: "Calendar",
|
|
175
|
+
onClick: (e) => {
|
|
176
|
+
console.log("Clicked:", e);
|
|
177
|
+
},
|
|
178
|
+
link: "/calendar"
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
icon: "Shifts",
|
|
182
|
+
label: "Shifts",
|
|
183
|
+
onClick: (e) => {
|
|
184
|
+
console.log("Clicked:", e);
|
|
185
|
+
},
|
|
186
|
+
link: "/shifts"
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
icon: "Jobs",
|
|
190
|
+
label: "Jobs",
|
|
191
|
+
onClick: (e) => {
|
|
192
|
+
console.log("Clicked:", e);
|
|
193
|
+
},
|
|
194
|
+
link: "/jobs"
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
icon: "Contact",
|
|
198
|
+
label: "Contacts",
|
|
199
|
+
onClick: (e) => {
|
|
200
|
+
console.log("Clicked:", e);
|
|
201
|
+
},
|
|
202
|
+
link: "/contacts"
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
icon: "File",
|
|
206
|
+
label: "Files",
|
|
207
|
+
onClick: (e) => {
|
|
208
|
+
console.log("Clicked:", e);
|
|
209
|
+
},
|
|
210
|
+
link: "/files"
|
|
211
|
+
}
|
|
212
|
+
], bottomItems: [
|
|
213
|
+
{
|
|
214
|
+
icon: "Settings",
|
|
215
|
+
label: "Settings",
|
|
216
|
+
onClick: (e) => {
|
|
217
|
+
console.log("Clicked:", e);
|
|
218
|
+
},
|
|
219
|
+
link: "/settings"
|
|
220
|
+
},
|
|
221
|
+
{
|
|
222
|
+
icon: "Support",
|
|
223
|
+
label: "Help & Support",
|
|
224
|
+
onClick: (e) => {
|
|
225
|
+
console.log("Clicked:", e);
|
|
226
|
+
},
|
|
227
|
+
link: "/help"
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
icon: "Feedback",
|
|
231
|
+
label: "Feedback",
|
|
232
|
+
onClick: (e) => {
|
|
233
|
+
console.log("Clicked:", e);
|
|
234
|
+
},
|
|
235
|
+
link: "/feedback"
|
|
236
|
+
}
|
|
237
|
+
], open: t, setOpen: i })
|
|
238
|
+
] });
|
|
239
|
+
}, S = {
|
|
240
|
+
render: (o) => /* @__PURE__ */ n(m, { args: o }),
|
|
241
|
+
args: {
|
|
242
|
+
width: "22.5rem",
|
|
243
|
+
transitionDuration: 300,
|
|
244
|
+
overlayTransparent: !1
|
|
245
|
+
}
|
|
246
|
+
}, I = {
|
|
247
|
+
render: (o) => /* @__PURE__ */ n(a, { args: o }),
|
|
248
|
+
args: {
|
|
249
|
+
width: "22.5rem",
|
|
250
|
+
transitionDuration: 300,
|
|
251
|
+
overlayTransparent: !1
|
|
252
|
+
}
|
|
253
|
+
}, x = {
|
|
254
|
+
render: (o) => /* @__PURE__ */ n(p, { args: o }),
|
|
255
|
+
args: {
|
|
256
|
+
width: "22.5rem",
|
|
257
|
+
transitionDuration: 300,
|
|
258
|
+
overlayTransparent: !1
|
|
259
|
+
}
|
|
260
|
+
}, y = {
|
|
261
|
+
render: (o) => /* @__PURE__ */ n(C, { args: o }),
|
|
262
|
+
args: {
|
|
263
|
+
width: "22.5rem",
|
|
264
|
+
transitionDuration: 300,
|
|
265
|
+
overlayTransparent: !1
|
|
266
|
+
}
|
|
267
|
+
}, O = {
|
|
268
|
+
render: (o) => /* @__PURE__ */ n(a, { args: o }),
|
|
269
|
+
args: {
|
|
270
|
+
width: "22.5rem",
|
|
271
|
+
transitionDuration: 300,
|
|
272
|
+
overlayTransparent: !0
|
|
273
|
+
}
|
|
274
|
+
}, T = {
|
|
275
|
+
render: (o) => /* @__PURE__ */ n(a, { args: o }),
|
|
276
|
+
args: {
|
|
277
|
+
width: "30rem",
|
|
278
|
+
transitionDuration: 300,
|
|
279
|
+
overlayTransparent: !1
|
|
280
|
+
}
|
|
281
|
+
}, v = {
|
|
282
|
+
render: (o) => /* @__PURE__ */ n(a, { args: o }),
|
|
283
|
+
args: {
|
|
284
|
+
width: "22.5rem",
|
|
285
|
+
transitionDuration: 1e3,
|
|
286
|
+
overlayTransparent: !1
|
|
287
|
+
}
|
|
288
|
+
}, w = {
|
|
289
|
+
render: (o) => /* @__PURE__ */ n(a, { args: o }),
|
|
290
|
+
args: {
|
|
291
|
+
width: "22.5rem",
|
|
292
|
+
transitionDuration: 150,
|
|
293
|
+
overlayTransparent: !1
|
|
294
|
+
}
|
|
16
295
|
};
|
|
17
296
|
export {
|
|
18
|
-
|
|
19
|
-
|
|
297
|
+
S as Basic,
|
|
298
|
+
T as CustomWidth,
|
|
299
|
+
w as FastTransition,
|
|
300
|
+
y as ManyItems,
|
|
301
|
+
v as SlowTransition,
|
|
302
|
+
x as TopItemsOnly,
|
|
303
|
+
O as TransparentOverlay,
|
|
304
|
+
I as WithTopAndBottomItems,
|
|
305
|
+
f as default
|
|
20
306
|
};
|
|
@@ -14,9 +14,13 @@ export type SidebarProps = {
|
|
|
14
14
|
*/
|
|
15
15
|
setOpen?: (state: boolean) => void;
|
|
16
16
|
/**
|
|
17
|
-
* Navigation items
|
|
17
|
+
* Navigation items displayed at the top of the sidebar
|
|
18
18
|
*/
|
|
19
|
-
|
|
19
|
+
topItems: SidebarItemProps[];
|
|
20
|
+
/**
|
|
21
|
+
* Navigation items displayed at the bottom of the sidebar
|
|
22
|
+
*/
|
|
23
|
+
bottomItems?: SidebarItemProps[];
|
|
20
24
|
/**
|
|
21
25
|
* Sidebar width in rem
|
|
22
26
|
*/
|
|
@@ -30,4 +34,4 @@ export type SidebarProps = {
|
|
|
30
34
|
*/
|
|
31
35
|
overlayTransparent?: boolean;
|
|
32
36
|
};
|
|
33
|
-
export declare function Sidebar({ open, setOpen,
|
|
37
|
+
export declare function Sidebar({ open, setOpen, topItems, bottomItems, transitionDuration, width, overlayTransparent, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,47 +1,51 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { NavigationItem as
|
|
3
|
-
import { u as
|
|
4
|
-
import { R as
|
|
1
|
+
import { jsx as e, jsxs as o, Fragment as h } from "react/jsx-runtime";
|
|
2
|
+
import { NavigationItem as t } from "../../../atoms/navigation/navigation-item/navigation-item.js";
|
|
3
|
+
import { u as g, a as s } from "../../../../react-spring_web.modern-BLL8Qmtg.js";
|
|
4
|
+
import { R as v, P as x, O as b, C as N, T as y, D as k } from "../../../../index-C0ZrzaoZ.js";
|
|
5
5
|
import "../../../styles/colors/colors.js";
|
|
6
|
-
import { surface as
|
|
7
|
-
function
|
|
8
|
-
open:
|
|
9
|
-
setOpen:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
6
|
+
import { surface as C } from "../../../styles/colors/colormap.js";
|
|
7
|
+
function z({
|
|
8
|
+
open: a,
|
|
9
|
+
setOpen: c,
|
|
10
|
+
topItems: d,
|
|
11
|
+
bottomItems: l = [],
|
|
12
|
+
transitionDuration: m = 300,
|
|
13
|
+
width: f = "22.5rem",
|
|
14
|
+
overlayTransparent: i = !1
|
|
14
15
|
}) {
|
|
15
|
-
const
|
|
16
|
+
const u = g(a, {
|
|
16
17
|
from: { opacity: 0, transform: "translateX(-100%)" },
|
|
17
18
|
enter: { opacity: 1, transform: "translateX(0%)" },
|
|
18
19
|
leave: { opacity: 1 },
|
|
19
20
|
config: {
|
|
20
|
-
duration:
|
|
21
|
+
duration: m
|
|
21
22
|
}
|
|
22
23
|
});
|
|
23
|
-
return /* @__PURE__ */ e(
|
|
24
|
-
(
|
|
25
|
-
!
|
|
26
|
-
|
|
24
|
+
return /* @__PURE__ */ e(v, { open: a, onOpenChange: c, modal: !i, children: /* @__PURE__ */ e(x, { children: u(
|
|
25
|
+
(n, p) => p ? /* @__PURE__ */ o(h, { children: [
|
|
26
|
+
!i && /* @__PURE__ */ e(s.div, { style: { opacity: n.opacity }, children: /* @__PURE__ */ e(
|
|
27
|
+
b,
|
|
27
28
|
{
|
|
28
29
|
forceMount: !0,
|
|
29
30
|
className: "DialogOverlay fixed inset-0 top-[6rem] z-50",
|
|
30
31
|
style: {
|
|
31
|
-
background:
|
|
32
|
+
background: C.subduedInverted,
|
|
32
33
|
opacity: "50%"
|
|
33
34
|
}
|
|
34
35
|
}
|
|
35
36
|
) }),
|
|
36
|
-
/* @__PURE__ */
|
|
37
|
-
/* @__PURE__ */ e(
|
|
38
|
-
/* @__PURE__ */ e(
|
|
39
|
-
/* @__PURE__ */
|
|
40
|
-
|
|
37
|
+
/* @__PURE__ */ o(N, { forceMount: !0, "data-state": a ? "open" : "close", children: [
|
|
38
|
+
/* @__PURE__ */ e(y, { className: "sr-only", children: "Navigation Sidebar" }),
|
|
39
|
+
/* @__PURE__ */ e(k, { className: "sr-only", children: "Navigation menu with links to different sections" }),
|
|
40
|
+
/* @__PURE__ */ o(
|
|
41
|
+
s.div,
|
|
41
42
|
{
|
|
42
|
-
style: { transform:
|
|
43
|
-
className: `fixed top-[6rem] left-0 h-screen z-50 bg-surface-default focus:outline-none ${
|
|
44
|
-
children:
|
|
43
|
+
style: { transform: n.transform, width: f },
|
|
44
|
+
className: `fixed top-[6rem] left-0 h-screen z-50 bg-surface-default focus:outline-none flex flex-col ${i ? "border-[0.1rem] border-bcolor-divider" : "shadow-[0rem_1rem_1rem_0rem_#B0B0B0] border-t-[0.1rem] border-bcolor-divider"}`,
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ e("div", { className: "flex flex-col gap-xs p-md flex-1", children: d.map((r) => /* @__PURE__ */ e("div", { onClick: () => r.onClick(r.link), children: /* @__PURE__ */ e(t, { ...r, isNavigation: !0 }) }, r.label)) }),
|
|
47
|
+
l.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-col gap-lg p-md", children: l.map((r) => /* @__PURE__ */ e("div", { onClick: () => r.onClick(r.link), children: /* @__PURE__ */ e(t, { ...r, isNavigation: !0 }) }, r.label)) })
|
|
48
|
+
]
|
|
45
49
|
}
|
|
46
50
|
)
|
|
47
51
|
] })
|
|
@@ -49,5 +53,5 @@ function w({
|
|
|
49
53
|
) }) });
|
|
50
54
|
}
|
|
51
55
|
export {
|
|
52
|
-
|
|
56
|
+
z as Sidebar
|
|
53
57
|
};
|