@wonder-ops/design-system 0.0.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.
Files changed (22) hide show
  1. package/README.md +99 -0
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +336 -0
  4. package/dist/src/ModalContainer.d.ts +18 -0
  5. package/dist/src/SideMenu/LinkGroupAccordion.d.ts +15 -0
  6. package/dist/src/SideMenu/LinkItem.d.ts +18 -0
  7. package/dist/src/SideMenu/index.d.ts +14 -0
  8. package/dist/src/SideMenu/isLinkSelected.d.ts +3 -0
  9. package/dist/src/ThemeProvider.d.ts +7 -0
  10. package/dist/src/_stories/alerts.stories.d.ts +5 -0
  11. package/dist/src/_stories/buttons.stories.d.ts +6 -0
  12. package/dist/src/_stories/chips.stories.d.ts +6 -0
  13. package/dist/src/_stories/datagrid.stories.d.ts +5 -0
  14. package/dist/src/_stories/forms.stories.d.ts +5 -0
  15. package/dist/src/_stories/modals.stories.d.ts +5 -0
  16. package/dist/src/_stories/sidemenu.stories.d.ts +5 -0
  17. package/dist/src/_stories/stepper.stories.d.ts +5 -0
  18. package/dist/src/_stories/typography.stories.d.ts +5 -0
  19. package/dist/src/index.d.ts +6 -0
  20. package/dist/src/theme.d.ts +37 -0
  21. package/dist/src/utils/isServer.d.ts +1 -0
  22. package/package.json +64 -0
package/README.md ADDED
@@ -0,0 +1,99 @@
1
+ # supply-chain-design-system
2
+
3
+ Light styling and convenience on top of Material UI, for use in Supply Chain internal tools.
4
+
5
+ I'm explicitly trying to keep this as minimal and lightweight as possible. As of writing, the supply-chain team has **ZERO** frontend devs. Using off-the-shelf components will hopefully both reduce the surface area we have to maintain, and help accelerate our designers' process (by feeding MUI to their AI).
6
+
7
+ As a result, if product/design ask for something that MUI doesn't provide, you, the reader, should push back, and they, the requester, need to understand that they're leaving the safe harbor of tested components with free maintenance for the stormier sea of "I want my zero engineers to manually build me something custom and then support it forever." Sometimes, maybe that'll be worth it (side menu?). Usually, it will not be.
8
+
9
+ ## How to use
10
+
11
+ ### Setup
12
+
13
+ This package has a chunk of explicit peer dependencies -- react, MUI, `date-fns`. Use those directly in your code.
14
+
15
+ In the root of your app (which I'm assuming is React/Typescript/NextJS), wrap the whole tree in `<ThemeProvider>`. Pass it the MUI license key (which should be an env var) to make sure the data grid and date pickers work. You'll also want to use the exported `fontLinks` to ensure your app has the Inter font loaded. It'll look like this:
16
+
17
+ ```typescript
18
+ import { fontLinks, ThemeProvider } from "@wonder/supply-chain-design-system";
19
+
20
+ const RootLayout: React.FC<{ children: React.ReactNode }> = async ({ children }) => {
21
+ const muiLicenseKey = process.env.NODE_PUBLIC_MUI_LICENSE;
22
+
23
+ return (
24
+ <html translate="no" lang="en" dir="ltr">
25
+ <head>
26
+ <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
27
+ {fontLinks.map((font) => (
28
+ <link key={font} href={font} rel="stylesheet" />
29
+ ))}
30
+ </head>
31
+ <body>
32
+ <ThemeProvider muiLicenseKey={muiLicenseKey}>{children}</ThemeProvider>
33
+ </body>
34
+ </html>
35
+ );
36
+ };
37
+ ```
38
+
39
+ ### 99% of Cases
40
+
41
+ Because this is designed to be as little surface area as possible, you'll have way more success consulting the [MUI Docs](https://mui.com/material-ui/getting-started/). Go there first for questions and API details.
42
+
43
+ ### Side Menu
44
+
45
+ We export a shared sliding side menu. Consult [the storybook](src/_stories/sidemenu.stories.tsx) for a usage example. I like to think the props are mostly self-explanatory. You pass it a series of `Links` (type example below), a handle for what happens when that link is clicked, and an optional set of initials/URL for the little user avatar at the bottom.
46
+
47
+ ```typescript
48
+ const links: SideMenuLinks = [
49
+ {
50
+ label: 'Dashboard',
51
+ url: '/dashboard',
52
+ icon: <AutoGraph />,
53
+ },
54
+ {
55
+ label: 'Reports',
56
+ url: '/reports',
57
+ icon: <ContentPaste />,
58
+ },
59
+ 'divider', // <-- This'll render a little divider line
60
+ {
61
+ label: 'Bathtub',
62
+ url: '/bathtub',
63
+ icon: <Bathtub />,
64
+ },
65
+ ];
66
+ ```
67
+
68
+ You'll likely want to wrap your page in a flexbox to allow the main content to shrink/expand as the box opens and closes.
69
+
70
+ ### ModalContainer
71
+
72
+ Being able to open modals imperatively is very useful, since it allows you to affect the screen from outside the React tree. (E.g., in response to a socket message, or a 401, open a modal).
73
+
74
+ The `<ThemeProvider>` component comes with a baked-in `<ModalContainer>`. When you call the exposed `openModal()` function, we render the passed modal contents in the `<ModalContainer>`. Consider the following example (and refer to storybook for more).
75
+
76
+ ```typescript
77
+ import { openModal } from "@wonder/supply-chain-design-system";
78
+
79
+ const MODAL_ONE: AddModalData = {
80
+ modalId: 'modal-one',
81
+ content: ({ hide, visible }) => {
82
+ if (!visible) return null;
83
+ return (
84
+ <>
85
+ <DialogTitle>Modal One</DialogTitle>
86
+ <DialogContent>
87
+ I'm an imperatively-opened modal. I was opened by calling `openModal()`, which
88
+ can happen from anywhere JS runs.
89
+ </DialogContent>
90
+ <DialogActions>
91
+ <Button onClick={hide}>Woah.</Button>
92
+ </DialogActions>
93
+ </>
94
+ );
95
+ },
96
+ };
97
+
98
+ const openModalOne = () => openModal(MODAL_ONE)
99
+ ```
package/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './src/index'
2
+ export {}
package/dist/index.js ADDED
@@ -0,0 +1,336 @@
1
+ import { Avatar as e, Box as t, Button as n, CssBaseline as r, Dialog as i, Divider as a, Drawer as o, IconButton as s, ThemeProvider as c, Typography as l, createTheme as u, styled as d } from "@mui/material";
2
+ import { useEffect as f, useEffectEvent as p, useState as m } from "react";
3
+ import { LicenseInfo as h } from "@mui/x-license";
4
+ import { LocalizationProvider as g } from "@mui/x-date-pickers";
5
+ import { AdapterDateFns as _ } from "@mui/x-date-pickers/AdapterDateFns";
6
+ import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
7
+ import x from "@mui/icons-material/GridView";
8
+ import S from "@mui/icons-material/ArrowBackRounded";
9
+ //#region src/theme.ts
10
+ var C = ["https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"], w = u({
11
+ components: {
12
+ MuiButton: {
13
+ defaultProps: { variant: "contained" },
14
+ styleOverrides: {
15
+ startIcon: { marginRight: 16 },
16
+ endIcon: { marginLeft: 16 }
17
+ }
18
+ },
19
+ MuiDialog: { defaultProps: { slotProps: { paper: { elevation: 24 } } } },
20
+ MuiTextField: { defaultProps: { size: "small" } },
21
+ MuiFormLabel: { defaultProps: { sx: { color: "text.primary" } } },
22
+ MuiInputLabel: { styleOverrides: { root: { color: "rgba(0, 0, 0, 0.6)" } } },
23
+ MuiDateField: { defaultProps: { slotProps: { textField: { size: "small" } } } }
24
+ },
25
+ typography: {
26
+ fontFamily: ["Inter", "sans-serif"].join(","),
27
+ h1: {
28
+ fontSize: "6rem",
29
+ fontStyle: "normal",
30
+ fontWeight: "300",
31
+ letterSpacing: "-1.5px",
32
+ lineHeight: "116.7%"
33
+ },
34
+ h2: {
35
+ fontSize: "3.75rem",
36
+ fontStyle: "normal",
37
+ fontWeight: "300",
38
+ letterSpacing: "-0.5px",
39
+ lineHeight: "120%"
40
+ },
41
+ h3: {
42
+ fontSize: "3rem",
43
+ fontStyle: "normal",
44
+ fontWeight: "400",
45
+ letterSpacing: "0px",
46
+ lineHeight: "116.7%"
47
+ },
48
+ h4: {
49
+ fontSize: "2rem",
50
+ fontStyle: "normal",
51
+ fontWeight: "400",
52
+ letterSpacing: "0.25px",
53
+ lineHeight: "123.5%"
54
+ },
55
+ h5: {
56
+ fontSize: "1.5rem",
57
+ fontStyle: "normal",
58
+ fontWeight: "400",
59
+ letterSpacing: "0px",
60
+ lineHeight: "133.4%"
61
+ },
62
+ h6: {
63
+ fontSize: "1.25rem",
64
+ fontStyle: "normal",
65
+ fontWeight: "500",
66
+ letterSpacing: "0.15px",
67
+ lineHeight: "160%"
68
+ },
69
+ caption: {
70
+ fontSize: "0.75rem",
71
+ fontStyle: "normal",
72
+ fontWeight: "400",
73
+ letterSpacing: "0.4px",
74
+ lineHeight: "166%"
75
+ },
76
+ overline: {
77
+ fontSize: "0.75rem",
78
+ fontStyle: "normal",
79
+ fontWeight: "400",
80
+ letterSpacing: "1px",
81
+ lineHeight: "266%",
82
+ textTransform: "uppercase"
83
+ },
84
+ subtitle1: {
85
+ fontSize: "1rem",
86
+ fontStyle: "normal",
87
+ fontWeight: "400",
88
+ letterSpacing: "0.15px",
89
+ lineHeight: "175%"
90
+ },
91
+ subtitle2: {
92
+ fontSize: "0.875rem",
93
+ fontStyle: "normal",
94
+ fontWeight: "500",
95
+ letterSpacing: "0.1px",
96
+ lineHeight: "157%"
97
+ },
98
+ body1: {
99
+ fontSize: "1rem",
100
+ fontStyle: "normal",
101
+ fontWeight: "400",
102
+ letterSpacing: "0.15px",
103
+ lineHeight: "150%"
104
+ },
105
+ body2: {
106
+ fontSize: "0.875rem",
107
+ fontStyle: "normal",
108
+ fontWeight: "400",
109
+ letterSpacing: "0.17px",
110
+ lineHeight: "143%"
111
+ }
112
+ },
113
+ palette: {
114
+ primary: { main: "#276ef1" },
115
+ secondary: {
116
+ main: "#f1aa27",
117
+ contrastText: "#FFFFFF"
118
+ },
119
+ black: {
120
+ main: "#1A1B25",
121
+ contrastText: "#FFFFFF"
122
+ },
123
+ text: {
124
+ primary: "#1A1B25",
125
+ disabled: "#BDC1CC",
126
+ subdued: "#6A7383"
127
+ }
128
+ }
129
+ }), T = () => typeof window > "u", E = "addModalEvent", D = "removeModalEvent", O = (e) => {
130
+ T() || window.dispatchEvent(new CustomEvent(E, { detail: e }));
131
+ }, k = (e) => {
132
+ T() || window.dispatchEvent(new CustomEvent(D, { detail: { modalId: e } }));
133
+ }, A = () => {
134
+ let [e, t] = m({}), n = p((e) => {
135
+ t((t) => {
136
+ let n = { ...t };
137
+ return n[e.detail.modalId] = e.detail, n;
138
+ });
139
+ }), r = p((e) => {
140
+ t((t) => {
141
+ let n = { ...t };
142
+ return delete n[e.detail.modalId], n;
143
+ });
144
+ });
145
+ return f(() => (window.addEventListener(E, n, !1), window.addEventListener(D, r, !1), () => {
146
+ window.removeEventListener(E, n), window.removeEventListener(D, r);
147
+ }), []), Object.keys(e).length ? /* @__PURE__ */ y(v, { children: Object.entries(e).map(([e, t]) => {
148
+ let n = () => k(e);
149
+ return /* @__PURE__ */ y(i, {
150
+ open: !0,
151
+ onClose: n,
152
+ children: t.content({
153
+ hide: n,
154
+ visible: !0
155
+ })
156
+ }, e);
157
+ }) }) : null;
158
+ }, j = (e) => {
159
+ e ? (console.info(`Setting MUI license key to ${e}`), h.setLicenseKey(e)) : console.warn("Missing MUI license key.");
160
+ }, M = ({ children: e, muiLicenseKey: t }) => (f(() => {
161
+ j(t);
162
+ }, [t]), /* @__PURE__ */ b(c, {
163
+ theme: w,
164
+ children: [/* @__PURE__ */ b(g, {
165
+ dateAdapter: _,
166
+ children: [/* @__PURE__ */ y(r, {}), e]
167
+ }), /* @__PURE__ */ y(A, {})]
168
+ })), N = ({ link: e, open: t, onLinkClicked: r, isSelected: i }) => {
169
+ let a = () => r(e.url);
170
+ return t ? /* @__PURE__ */ y(n, {
171
+ onClick: a,
172
+ startIcon: e.icon,
173
+ variant: "text",
174
+ color: "black",
175
+ sx: F(i),
176
+ children: /* @__PURE__ */ y(l, {
177
+ variant: "subtitle2",
178
+ children: e.label
179
+ })
180
+ }) : /* @__PURE__ */ y(s, {
181
+ onClick: a,
182
+ size: "small",
183
+ color: "primary",
184
+ sx: P(i),
185
+ children: e.icon
186
+ });
187
+ }, P = (e) => ({
188
+ width: 40,
189
+ height: 40,
190
+ mx: 1,
191
+ my: .75,
192
+ color: e ? "white" : "inherit",
193
+ backgroundColor: e ? "#18427F" : "inherit",
194
+ "& > svg": {
195
+ width: 20,
196
+ height: 20
197
+ },
198
+ borderRadius: 2,
199
+ "&:hover": {
200
+ backgroundColor: (e) => e.palette.primary.dark,
201
+ color: "white"
202
+ },
203
+ transition: "all 0.1s ease-in"
204
+ }), F = (e) => ({
205
+ height: 40,
206
+ my: .75,
207
+ mx: 1,
208
+ px: 1.5,
209
+ flex: "0 0 auto",
210
+ color: e ? "white" : "inherit",
211
+ backgroundColor: e ? "#18427F" : "inherit",
212
+ textTransform: "none",
213
+ justifyContent: "flex-start",
214
+ alignItems: "center",
215
+ "& svg": {
216
+ position: "relative",
217
+ left: 2
218
+ },
219
+ borderRadius: 2,
220
+ "&:hover": {
221
+ backgroundColor: (e) => e.palette.primary.dark,
222
+ color: "white"
223
+ },
224
+ transition: "all 0.1s ease-in"
225
+ }), I = ({ group: e, open: t, onLinkClicked: n, isSelected: r }) => null, L = (e, t) => "links" in t ? t.links.some((t) => R(e, t)) : R(e, t), R = (e, t) => e.endsWith(t.url), z = ({ onLinkClicked: r, links: i, selectedRoute: o, avatarImageSrc: s, avatarName: c }) => {
226
+ let [u, d] = m(!1), f = o || window.top?.location.href || window.location.href;
227
+ return /* @__PURE__ */ b(H, {
228
+ variant: "permanent",
229
+ open: u,
230
+ sx: { borderRight: "1px solid #1E2939" },
231
+ slotProps: { paper: { sx: {
232
+ backgroundColor: "#1C1E26",
233
+ color: "text.subdued"
234
+ } } },
235
+ children: [
236
+ /* @__PURE__ */ y(n, {
237
+ variant: "text",
238
+ color: "black",
239
+ startIcon: y(u ? S : x, {}),
240
+ onClick: () => d((e) => !e),
241
+ sx: {
242
+ color: u ? "white" : "inherit",
243
+ textTransform: "none",
244
+ borderRadius: 0,
245
+ borderBottom: "1px solid #1E2939",
246
+ justifyContent: u ? "flex-start" : "flex-center",
247
+ alignItems: "center",
248
+ py: 1.5,
249
+ px: 2.5,
250
+ mb: 1.5,
251
+ height: 64,
252
+ "&:hover": { color: "white" },
253
+ "& svg": {
254
+ position: "relative",
255
+ left: 4
256
+ }
257
+ },
258
+ children: /* @__PURE__ */ y(l, {
259
+ variant: "subtitle2",
260
+ children: u && "Close Menu"
261
+ })
262
+ }),
263
+ i.map((e, t) => {
264
+ if (e === "divider") return /* @__PURE__ */ y(a, { sx: {
265
+ my: 1.5,
266
+ borderColor: "#364153"
267
+ } }, `divider_${t}`);
268
+ let n = L(f, e);
269
+ return "links" in e ? /* @__PURE__ */ y(I, {
270
+ group: e,
271
+ open: u,
272
+ onLinkClicked: r,
273
+ isSelected: n
274
+ }, `${e.label}_group`) : /* @__PURE__ */ y(N, {
275
+ link: e,
276
+ open: u,
277
+ onLinkClicked: r,
278
+ isSelected: n
279
+ }, `${e.label}_${e.url}`);
280
+ }),
281
+ /* @__PURE__ */ y(t, {
282
+ sx: {
283
+ marginTop: "auto",
284
+ pl: 1.25,
285
+ pb: 2,
286
+ pt: 2,
287
+ borderTop: "1px solid #1E2939"
288
+ },
289
+ children: /* @__PURE__ */ y(e, {
290
+ src: s,
291
+ sx: {
292
+ width: 32,
293
+ height: 32
294
+ },
295
+ alt: "",
296
+ children: c?.slice(0, 2).toLocaleUpperCase()
297
+ })
298
+ })
299
+ ]
300
+ });
301
+ }, B = (e) => ({
302
+ width: 200,
303
+ transition: e.transitions.create("width", {
304
+ easing: e.transitions.easing.sharp,
305
+ duration: e.transitions.duration.enteringScreen
306
+ }),
307
+ overflowX: "hidden"
308
+ }), V = (e) => ({
309
+ transition: e.transitions.create("width", {
310
+ easing: e.transitions.easing.sharp,
311
+ duration: e.transitions.duration.leavingScreen
312
+ }),
313
+ overflowX: "hidden",
314
+ width: `calc(${e.spacing(7)} + 1px)`
315
+ }), H = d(o, { shouldForwardProp: (e) => e !== "open" })(({ theme: e }) => ({
316
+ width: 200,
317
+ flexShrink: 0,
318
+ whiteSpace: "nowrap",
319
+ boxSizing: "border-box",
320
+ border: "none !important",
321
+ variants: [{
322
+ props: ({ open: e }) => e,
323
+ style: {
324
+ ...B(e),
325
+ "& .MuiDrawer-paper": B(e)
326
+ }
327
+ }, {
328
+ props: ({ open: e }) => !e,
329
+ style: {
330
+ ...V(e),
331
+ "& .MuiDrawer-paper": V(e)
332
+ }
333
+ }]
334
+ }));
335
+ //#endregion
336
+ export { A as ModalContainer, z as SideMenu, M as ThemeProvider, k as closeModal, C as fontLinks, O as openModal, w as theme };
package/dist/src/ModalContainer.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { default as React } from 'react';
2
+ export type ModalProps = {
3
+ hide: () => void;
4
+ visible: boolean;
5
+ };
6
+ export type AddModalData = {
7
+ /** A unique name for the modal */
8
+ modalId: string;
9
+ /** The react content to render. We'll stick it inside an MUI <Dialog /> */
10
+ content: (props: ModalProps) => React.ReactNode;
11
+ };
12
+ export type RemoveModalData = {
13
+ /** A unique name for the modal */
14
+ modalId: string;
15
+ };
16
+ export declare const openModal: (modalData: AddModalData) => void;
17
+ export declare const closeModal: (modalId: string) => void;
18
+ export declare const ModalContainer: React.FC;
package/dist/src/SideMenu/LinkGroupAccordion.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { default as React } from 'react';
2
+ import { LinkConfig } from './LinkItem';
3
+ export interface LinkGroup {
4
+ icon: React.ReactNode;
5
+ label: string;
6
+ links: LinkConfig[];
7
+ }
8
+ interface LinkGroupAccordionProps {
9
+ group: LinkGroup;
10
+ open: boolean;
11
+ onLinkClicked: (url: string) => void;
12
+ isSelected: boolean;
13
+ }
14
+ export declare const LinkGroupAccordion: React.FC<LinkGroupAccordionProps>;
15
+ export {};
package/dist/src/SideMenu/LinkItem.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { SxProps } from '@mui/material';
2
+ import { Theme } from '@mui/material/styles';
3
+ import { default as React } from 'react';
4
+ export interface LinkConfig {
5
+ icon: React.ReactNode;
6
+ label: string;
7
+ url: string;
8
+ }
9
+ interface LinkItemProps {
10
+ link: LinkConfig;
11
+ open: boolean;
12
+ onLinkClicked: (url: string) => void;
13
+ isSelected: boolean;
14
+ }
15
+ export declare const LinkItem: React.FC<LinkItemProps>;
16
+ export declare const iconButtonStyles: (isSelected: boolean) => SxProps<Theme>;
17
+ export declare const fullButtonStyles: (isSelected: boolean) => SxProps<Theme>;
18
+ export {};
package/dist/src/SideMenu/index.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { default as React } from 'react';
2
+ import { LinkConfig } from './LinkItem';
3
+ import { LinkGroup } from './LinkGroupAccordion';
4
+ export type SideMenuLinks = Array<LinkGroup | LinkConfig | 'divider'>;
5
+ export type { LinkConfig };
6
+ interface SideMenuProps {
7
+ onLinkClicked: (url: string) => void;
8
+ links: SideMenuLinks;
9
+ selectedRoute?: string;
10
+ avatarImageSrc?: string;
11
+ avatarName?: string;
12
+ }
13
+ export declare const SideMenu: React.FC<SideMenuProps>;
14
+ export declare const DRAWER_WIDTH = 200;
package/dist/src/SideMenu/isLinkSelected.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { LinkGroup } from './LinkGroupAccordion';
2
+ import { LinkConfig } from './LinkItem';
3
+ export declare const isLinkSelected: (canonicalUrl: string, link: LinkConfig | LinkGroup) => boolean;
package/dist/src/ThemeProvider.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { default as React } from 'react';
2
+ interface ThemeProviderProps {
3
+ children: React.ReactNode;
4
+ muiLicenseKey: string;
5
+ }
6
+ export declare const ThemeProvider: React.FC<ThemeProviderProps>;
7
+ export {};
package/dist/src/_stories/alerts.stories.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
2
+ declare const _default: {
3
+ title: string;
4
+ };
5
+ export default _default;
package/dist/src/_stories/buttons.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
2
+ export declare const IconButtons: () => import("react/jsx-runtime").JSX.Element;
3
+ declare const _default: {
4
+ title: string;
5
+ };
6
+ export default _default;
package/dist/src/_stories/chips.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
2
+ export declare const Playground: () => import("react/jsx-runtime").JSX.Element;
3
+ declare const _default: {
4
+ title: string;
5
+ };
6
+ export default _default;
package/dist/src/_stories/datagrid.stories.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const Main: () => import("react/jsx-runtime").JSX.Element;
2
+ declare const _default: {
3
+ title: string;
4
+ };
5
+ export default _default;
package/dist/src/_stories/forms.stories.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const Gallery: () => import("react/jsx-runtime").JSX.Element;
2
+ declare const _default: {
3
+ title: string;
4
+ };
5
+ export default _default;
package/dist/src/_stories/modals.stories.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const Examples: () => import("react/jsx-runtime").JSX.Element;
2
+ declare const _default: {
3
+ title: string;
4
+ };
5
+ export default _default;
package/dist/src/_stories/sidemenu.stories.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const Example: () => import("react/jsx-runtime").JSX.Element;
2
+ declare const _default: {
3
+ title: string;
4
+ };
5
+ export default _default;
package/dist/src/_stories/stepper.stories.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
2
+ declare const _default: {
3
+ title: string;
4
+ };
5
+ export default _default;
package/dist/src/_stories/typography.stories.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
2
+ declare const _default: {
3
+ title: string;
4
+ };
5
+ export default _default;
package/dist/src/index.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export { theme, fontLinks } from './theme';
2
+ export { ThemeProvider } from './ThemeProvider';
3
+ export { SideMenu } from './SideMenu';
4
+ export type { SideMenuLinks, LinkConfig } from './SideMenu';
5
+ export { openModal, closeModal, ModalContainer } from './ModalContainer';
6
+ export type { ModalProps, AddModalData, RemoveModalData } from './ModalContainer';
package/dist/src/theme.d.ts ADDED
@@ -0,0 +1,37 @@
1
+ import { PaletteColor, PaletteColorOptions } from '@mui/material';
2
+ declare module '@mui/material/styles' {
3
+ interface Palette {
4
+ black: PaletteColor;
5
+ }
6
+ interface PaletteOptions {
7
+ black?: PaletteColorOptions;
8
+ }
9
+ interface TypeText {
10
+ subdued?: string;
11
+ }
12
+ }
13
+ declare module '@mui/material/Button' {
14
+ interface ButtonPropsColorOverrides {
15
+ black: true;
16
+ }
17
+ }
18
+ declare module '@mui/material/IconButton' {
19
+ interface IconButtonPropsColorOverrides {
20
+ black: true;
21
+ }
22
+ }
23
+ declare module '@mui/material/Typography' {
24
+ interface TypographyPropsColorOverrides {
25
+ subdued: true;
26
+ }
27
+ }
28
+ /**
29
+ * Font links that should be injected into the head tag
30
+ *
31
+ * Example:
32
+ * ```html
33
+ * <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
34
+ * ```
35
+ */
36
+ export declare const fontLinks: string[];
37
+ export declare const theme: import('@mui/material').Theme;
package/dist/src/utils/isServer.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const isServer: () => boolean;
package/package.json ADDED
@@ -0,0 +1,64 @@
1
+ {
2
+ "name": "@wonder-ops/design-system",
3
+ "version": "0.0.1",
4
+ "description": "Light styling and convenience on top of Material UI, for use in Supply Chain internal tools.",
5
+ "type": "module",
6
+ "main": "dist/index.js",
7
+ "module": "dist/index.js",
8
+ "types": "dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "import": "./dist/index.js",
12
+ "types": "./dist/index.d.ts"
13
+ }
14
+ },
15
+ "files": [
16
+ "dist"
17
+ ],
18
+ "sideEffects": false,
19
+ "scripts": {
20
+ "build": "vite build",
21
+ "build:watch": "vite build --watch",
22
+ "storybook": "storybook dev -p 6006",
23
+ "build-storybook": "storybook build",
24
+ "storybook-deployed": "node .storybook/server.js"
25
+ },
26
+ "peerDependencies": {
27
+ "@emotion/react": "^11",
28
+ "@emotion/styled": "^11",
29
+ "@mui/icons-material": "^9.0.1",
30
+ "@mui/material": "^9.0.5",
31
+ "@mui/x-data-grid-premium": "^9.3.0",
32
+ "@mui/x-date-pickers": "^9.3.0",
33
+ "@mui/x-license": "^9.2.0",
34
+ "date-fns": "^4.4.0",
35
+ "react": "^19",
36
+ "react-dom": "^19"
37
+ },
38
+ "devDependencies": {
39
+ "@emotion/react": "^11.14.0",
40
+ "@emotion/styled": "^11.14.1",
41
+ "@mui/icons-material": "^9.0.1",
42
+ "@mui/material": "^9.0.1",
43
+ "@mui/x-data-grid-premium": "^9.3.0",
44
+ "@mui/x-date-pickers": "^9.3.0",
45
+ "@mui/x-license": "^9.2.0",
46
+ "@storybook/react": "^10.4.1",
47
+ "@storybook/react-vite": "^10.4.1",
48
+ "@types/react": "^19.2.15",
49
+ "@types/react-dom": "^19.2.3",
50
+ "@vitejs/plugin-react": "^6.0.2",
51
+ "date-fns": "^4.4.0",
52
+ "express": "^5.2.1",
53
+ "react": "^19.2.6",
54
+ "react-dom": "^19.2.6",
55
+ "storybook": "^10.4.1",
56
+ "typescript": "^6.0.3",
57
+ "vite": "^8.0.14",
58
+ "vite-plugin-dts": "^5.0.1"
59
+ },
60
+ "packageManager": "pnpm@11.5.0",
61
+ "keywords": [],
62
+ "author": "",
63
+ "license": "ISC"
64
+ }