@veritone-ce/design-system 1.0.2 → 1.1.0

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 (12) hide show
  1. package/dist/assets/theme.d.ts +31 -2
  2. package/dist/assets/theme.js +221 -113
  3. package/dist/components/Button/Indicator.js +5 -1
  4. package/dist/components/Button/index.d.ts +3 -4
  5. package/dist/components/Button/index.js +14 -3
  6. package/dist/components/Button/useButtonProps.d.ts +1 -1
  7. package/dist/components/Button/useButtonProps.js +2 -2
  8. package/dist/components/ThemeProvider/index.d.ts +1 -1
  9. package/dist/components/ThemeProvider/index.js +3 -3
  10. package/dist/index.d.ts +2 -0
  11. package/dist/index.js +2 -0
  12. package/package.json +41 -57
package/dist/assets/theme.d.ts CHANGED
@@ -1,6 +1,4 @@
1
1
  import { ThemeOptions as MuiThemeOptions } from '@mui/material';
2
- import '@fontsource/nunito-sans';
3
- import '@fontsource/dosis';
4
2
  declare module '@mui/material/Button' {
5
3
  interface ButtonPropsVariantOverrides {
6
4
  primary: true;
@@ -27,5 +25,36 @@ declare module '@mui/material/styles/createPalette' {
27
25
  };
28
26
  }
29
27
  }
28
+ export declare const colors: {
29
+ light: {
30
+ one: string;
31
+ two: string;
32
+ three: string;
33
+ four: string;
34
+ five: string;
35
+ six: string;
36
+ };
37
+ primary: {
38
+ one: string;
39
+ two: string;
40
+ three: string;
41
+ };
42
+ dark: {
43
+ one: string;
44
+ two: string;
45
+ three: string;
46
+ four: string;
47
+ five: string;
48
+ };
49
+ brand: {
50
+ pink: string;
51
+ blueOne: string;
52
+ blueTwo: string;
53
+ warn: string;
54
+ success: string;
55
+ info: string;
56
+ error: string;
57
+ };
58
+ };
30
59
  declare let theme: import("@mui/material").Theme;
31
60
  export default theme;
package/dist/assets/theme.js CHANGED
@@ -1,12 +1,75 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
+ /* eslint-disable @typescript-eslint/ban-ts-comment */
2
3
  import { createTheme } from '@mui/material';
3
- import '@fontsource/nunito-sans';
4
- import '@fontsource/dosis';
5
4
  import sx from '@mui/system/sx';
6
5
  import CheckCircleIcon from '@mui/icons-material/CheckCircle';
7
6
  import InfoIcon from '@mui/icons-material/Info';
8
7
  import WarningIcon from '@mui/icons-material/Error';
9
8
  import ErrorIcon from '@mui/icons-material/Cancel';
9
+ export const colors = {
10
+ light: {
11
+ one: '#FFFFFF',
12
+ two: '#FAFAFA',
13
+ three: '#F2F7FE',
14
+ four: '#EAF1FA',
15
+ five: '#E0E8F0',
16
+ six: '#D5DFE9'
17
+ },
18
+ primary: {
19
+ one: '#1871E8',
20
+ two: '#335B89',
21
+ three: '#6098D1'
22
+ },
23
+ dark: {
24
+ one: '#2A323C',
25
+ two: '#1B1D1F',
26
+ three: '#7C848D',
27
+ four: '#465364',
28
+ five: ' #5C6269'
29
+ },
30
+ brand: {
31
+ pink: '#D43060',
32
+ blueOne: '#214167',
33
+ blueTwo: '#335B89',
34
+ warn: '#FFBB0A',
35
+ success: '#28BA3F',
36
+ info: '#325491',
37
+ error: '#EB0000'
38
+ }
39
+ };
40
+ /* const font = {
41
+ feat: 'Dosis',
42
+ family:
43
+ "Nunito Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
44
+
45
+ light: 300,
46
+ normal: 400,
47
+ medium: 600,
48
+ bold: 700,
49
+
50
+ sizes: {
51
+ heading: {
52
+ xxsmall: '1.6rem',
53
+ xsmall: '1.8rem',
54
+ small: '2rem',
55
+ medium: '2.4rem',
56
+ large: '2.6rem',
57
+ xlarge: '2.7rem',
58
+ xxlarge: '3rem',
59
+ xxxlarge: '3.6rem'
60
+ },
61
+ paragraph: {
62
+ xxsmall: '1.1rem',
63
+ xsmall: '1.2rem',
64
+ small: '1.4rem',
65
+ medium: '1.6rem',
66
+ large: '1.7rem',
67
+ xlarge: '1.8rem',
68
+ xxlarge: '2.1rem',
69
+ xxxlarge: '2.4rem'
70
+ }
71
+ }
72
+ } */
10
73
  // create theme in steps https://mui.com/material-ui/customization/theming/#api
11
74
  let theme = createTheme({
12
75
  typography: {
@@ -14,91 +77,136 @@ let theme = createTheme({
14
77
  h2: {
15
78
  fontSize: '1.429rem',
16
79
  lineHeight: '2.143rem',
17
- fontWeight: '700',
18
- },
80
+ fontWeight: '700'
81
+ }
19
82
  },
20
83
  palette: {
84
+ action: {
85
+ disabledBackground: colors.light.two,
86
+ disabled: colors.dark.three
87
+ },
21
88
  primary: {
22
- main: '#214167',
89
+ main: colors.brand.blueOne
23
90
  },
24
91
  secondary: {
25
- main: '#335B89',
26
- contrastText: '#ffffff',
92
+ main: colors.primary.two,
93
+ contrastText: colors.light.one
27
94
  },
28
95
  neutral: {
29
- main: '#5C6269',
96
+ main: colors.dark.five
30
97
  },
31
98
  button: {
32
- main: '#1871E8',
33
- hover: '#335B89',
99
+ main: colors.primary.one,
100
+ hover: colors.primary.two
34
101
  },
35
102
  success: {
36
- main: '#28BA3F',
103
+ main: colors.brand.success
37
104
  },
38
105
  info: {
39
- main: '#325491',
106
+ main: colors.brand.info
40
107
  },
41
108
  warning: {
42
- main: '#FFBB0A',
109
+ main: colors.brand.warn
43
110
  },
44
111
  error: {
45
- main: '#FF0000',
112
+ main: colors.brand.error
46
113
  },
47
- divider: '#214167',
114
+ divider: colors.brand.blueOne
48
115
  },
49
- spacing: 10,
116
+ spacing: 10
50
117
  });
51
118
  theme = createTheme(theme, {
52
119
  components: {
53
120
  MuiButton: {
54
121
  defaultProps: {
55
122
  variant: 'contained',
56
- disableRipple: true,
123
+ disableRipple: true
57
124
  },
58
125
  styleOverrides: {
59
126
  // @ts-ignore
60
- root: ({ ownerState }) => (Object.assign(Object.assign(Object.assign({ textTransform: 'none', fontWeight: '600', paddingTop: '7px', paddingBottom: '5px', '&.Mui-disabled': {
61
- borderColor: `#E0E8F0`,
62
- }, '& .MuiButton-startIcon': {
63
- marginTop: '-1px',
64
- }, '& .MuiButton-endIcon': {
65
- marginTop: '-1px',
66
- }, '&.Mui-disabled .MuiButton-startIcon .MuiButton-endIcon': {
67
- opacity: 0.3,
127
+ root: ({ ownerState }) => (Object.assign(Object.assign(Object.assign({ textTransform: 'none', fontWeight: '600', '&.MuiButton-outlinedError': {
128
+ backgroundColor: colors.light.one
129
+ }, '&.Mui-disabled': Object.assign({}, (ownerState.variant !== `text` && {
130
+ borderColor: colors.light.five,
131
+ backgroundColor: colors.light.two,
132
+ borderWidth: '1px',
133
+ borderStyle: 'solid'
134
+ })), '& .MuiButton-startIcon': Object.assign({ marginRight: 0, marginLeft: 0, marginTop: '-1px', fontSize: '18px' }, {
135
+ '& .MuiSvgIcon-root': {
136
+ fontSize: 18
137
+ }
138
+ }), '& .MuiButton-endIcon': Object.assign({ marginRight: 0, marginLeft: 0, marginTop: '-1px', fontSize: '18px' }, {
139
+ '& .MuiSvgIcon-root': {
140
+ fontSize: 18
141
+ }
142
+ }), '&.Mui-disabled .MuiButton-startIcon .MuiButton-endIcon': {
143
+ opacity: 0.3
68
144
  } }, (ownerState.variant === `contained` &&
69
145
  {
70
146
  //@ts-ignore
71
- backgroundColor: ownerState.color === `primary` ? theme.palette.button.main : theme.palette[ownerState.color].main,
147
+ backgroundColor: ownerState.color === `primary`
148
+ ? theme.palette.button.main
149
+ : //@ts-ignore
150
+ theme.palette[ownerState.color].main,
72
151
  ':hover': {
73
152
  //@ts-ignore
74
- backgroundColor: ownerState.color === `primary` ? theme.palette.button.hover : theme.palette[ownerState.color],
75
- },
153
+ backgroundColor: ownerState.color === `primary`
154
+ ? theme.palette.button.hover
155
+ : //@ts-ignore
156
+ theme.palette[ownerState.color]
157
+ }
76
158
  })), (ownerState.variant === `outlined` &&
77
159
  {
160
+ backgroundColor: ownerState.color === `primary`
161
+ ? colors.light.one
162
+ : //@ts-ignore
163
+ theme.palette[ownerState.color],
78
164
  //@ts-ignore
79
- color: ownerState.color === `primary` ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
80
- //@ts-ignore
81
- borderColor: ownerState.color === `primary` ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
165
+ color: ownerState.color === `primary`
166
+ ? theme.palette.neutral.main
167
+ : //@ts-ignore
168
+ theme.palette[ownerState.color].main,
169
+ borderColor: ownerState.color === `primary`
170
+ ? theme.palette.neutral.main
171
+ : //@ts-ignore
172
+ theme.palette[ownerState.color].main,
82
173
  ':hover': {
174
+ backgroundColor: ownerState.color === `primary`
175
+ ? colors.light.one
176
+ : //@ts-ignore
177
+ theme.palette[ownerState.color],
83
178
  //@ts-ignore
84
- color: ownerState.color === `primary` ? theme.palette.secondary.main : theme.palette[ownerState.color],
179
+ color: ownerState.color === `primary`
180
+ ? theme.palette.secondary.main
181
+ : //@ts-ignore
182
+ theme.palette[ownerState.color],
85
183
  //@ts-ignore
86
- borderColor: ownerState.color === `primary` ? theme.palette.secondary.main : theme.palette[ownerState.color],
87
- },
184
+ borderColor: ownerState.color === `primary`
185
+ ? theme.palette.secondary.main
186
+ : //@ts-ignore
187
+ theme.palette[ownerState.color]
188
+ }
88
189
  })), (ownerState.variant === `text` &&
89
190
  {
90
- //@ts-ignore
91
- color: ownerState.color === `primary` ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
191
+ backgroundColor: 'transparent',
192
+ color: ownerState.color === `primary`
193
+ ? colors.dark.four
194
+ : //@ts-ignore
195
+ theme.palette[ownerState.color].main,
92
196
  ':hover': {
197
+ backgroundColor: 'rgba(255, 255, 255, 0.15)',
93
198
  //@ts-ignore
94
- color: ownerState.color === `primary` ? theme.palette.secondary.main : theme.palette[ownerState.color],
95
- },
96
- }))),
199
+ color: ownerState.color === `primary`
200
+ ? colors.primary.two
201
+ : //@ts-ignore
202
+ theme.palette[ownerState.color]
203
+ }
204
+ })))
97
205
  },
98
206
  variants: [
99
207
  {
100
208
  props: {
101
- variant: 'secondary',
209
+ variant: 'secondary'
102
210
  },
103
211
  style: sx({
104
212
  backgroundColor: 'white',
@@ -107,21 +215,21 @@ theme = createTheme(theme, {
107
215
  ':hover': {
108
216
  border: `1px solid ${theme.palette.primary.main}`,
109
217
  color: theme.palette.primary.main,
110
- backgroundColor: 'white',
111
- },
112
- }),
113
- },
114
- ],
218
+ backgroundColor: 'white'
219
+ }
220
+ })
221
+ }
222
+ ]
115
223
  },
116
224
  MuiInputLabel: {
117
225
  styleOverrides: {
118
226
  root: sx({
119
- color: `#5C6269`,
227
+ color: colors.dark.five,
120
228
  fontSize: `14px`,
121
229
  lineHeight: `21px`,
122
- fontWeight: `600`,
123
- }),
124
- },
230
+ fontWeight: `600`
231
+ })
232
+ }
125
233
  },
126
234
  MuiFormHelperText: {
127
235
  styleOverrides: {
@@ -139,54 +247,54 @@ theme = createTheme(theme, {
139
247
  top: `50%`,
140
248
  transform: `translate(0, -50%)`,
141
249
  backgroundColor: theme.palette.error.main,
142
- borderRadius: `100%`,
143
- },
144
- },
145
- }),
146
- },
250
+ borderRadius: `100%`
251
+ }
252
+ }
253
+ })
254
+ }
147
255
  },
148
256
  MuiTextField: {
149
257
  defaultProps: {
150
- size: 'small',
258
+ size: 'small'
151
259
  },
152
260
  styleOverrides: {
153
261
  root: sx({
154
- color: `#2A323C`,
262
+ color: colors.dark.one,
155
263
  '& .MuiOutlinedInput-root': {
156
264
  '& fieldset': {
157
- borderColor: `#E0E8F0`,
265
+ borderColor: colors.light.five
158
266
  },
159
267
  '&:hover fieldset': {
160
- borderColor: `#335B89`,
268
+ borderColor: colors.primary.two
161
269
  },
162
270
  '&.Mui-focused fieldset': {
163
- border: `1px solid #5C6269`,
271
+ border: `1px solid ${colors.dark.five}`
164
272
  },
165
273
  '&.Mui-error fieldset': {
166
- borderColor: theme.palette.error.main,
167
- },
168
- },
169
- }),
170
- },
274
+ borderColor: theme.palette.error.main
275
+ }
276
+ }
277
+ })
278
+ }
171
279
  },
172
280
  MuiStepIcon: {
173
281
  styleOverrides: {
174
282
  root: {
175
283
  borderRadius: `100%`,
176
- outline: `1px solid #465364`,
284
+ outline: `1px solid ${colors.dark.four}`,
177
285
  color: `white`,
178
286
  text: {
179
- fill: `#465364`,
287
+ fill: colors.dark.four
180
288
  },
181
289
  '&.Mui-active': {
182
290
  outline: `none`,
183
291
  color: theme.palette.button.main,
184
292
  text: {
185
- fill: `white`,
186
- },
187
- },
188
- },
189
- },
293
+ fill: `white`
294
+ }
295
+ }
296
+ }
297
+ }
190
298
  },
191
299
  MuiDialogTitle: {
192
300
  styleOverrides: {
@@ -196,9 +304,9 @@ theme = createTheme(theme, {
196
304
  paddingTop: theme.spacing(3),
197
305
  paddingLeft: theme.spacing(3),
198
306
  paddingRight: theme.spacing(3),
199
- paddingBottom: theme.spacing(1),
200
- },
201
- },
307
+ paddingBottom: theme.spacing(1)
308
+ }
309
+ }
202
310
  },
203
311
  MuiDialogContent: {
204
312
  styleOverrides: {
@@ -206,38 +314,38 @@ theme = createTheme(theme, {
206
314
  paddingTop: 0,
207
315
  paddingLeft: theme.spacing(3),
208
316
  paddingRight: theme.spacing(3),
209
- paddingBottom: theme.spacing(1),
210
- },
211
- },
317
+ paddingBottom: theme.spacing(1)
318
+ }
319
+ }
212
320
  },
213
321
  MuiDialogActions: {
214
322
  styleOverrides: {
215
323
  root: {
216
- padding: theme.spacing(3),
217
- },
218
- },
324
+ padding: theme.spacing(3)
325
+ }
326
+ }
219
327
  },
220
328
  MuiLink: {
221
329
  defaultProps: {
222
330
  underline: `none`,
223
- color: `#1871E8`,
224
- },
331
+ color: colors.primary.one
332
+ }
225
333
  },
226
334
  MuiSnackbar: {
227
335
  defaultProps: {
228
336
  autoHideDuration: 6000,
229
337
  anchorOrigin: {
230
338
  vertical: `top`,
231
- horizontal: `right`,
232
- },
339
+ horizontal: `right`
340
+ }
233
341
  },
234
342
  styleOverrides: {
235
343
  root: {
236
344
  width: `100%`,
237
345
  maxWidth: `415px`,
238
- position: `absolute`,
239
- },
240
- },
346
+ position: `absolute`
347
+ }
348
+ }
241
349
  },
242
350
  MuiAlert: {
243
351
  defaultProps: {
@@ -246,14 +354,14 @@ theme = createTheme(theme, {
246
354
  success: _jsx(CheckCircleIcon, {}),
247
355
  info: _jsx(InfoIcon, {}),
248
356
  warning: _jsx(WarningIcon, {}),
249
- error: _jsx(ErrorIcon, {}),
250
- },
357
+ error: _jsx(ErrorIcon, {})
358
+ }
251
359
  },
252
360
  styleOverrides: {
253
361
  root: {
254
362
  width: `100%`,
255
363
  backgroundColor: `white`,
256
- borderColor: `#D5DFE9`,
364
+ borderColor: colors.light.six,
257
365
  position: `relative`,
258
366
  overflow: `hidden`,
259
367
  '&:after': {
@@ -262,59 +370,59 @@ theme = createTheme(theme, {
262
370
  width: `4px`,
263
371
  left: 0,
264
372
  top: 0,
265
- bottom: 0,
373
+ bottom: 0
266
374
  },
267
375
  '&.MuiAlert-outlinedSuccess:after': {
268
- backgroundColor: theme.palette.success.main,
376
+ backgroundColor: theme.palette.success.main
269
377
  },
270
378
  '&.MuiAlert-outlinedInfo:after': {
271
- backgroundColor: theme.palette.info.main,
379
+ backgroundColor: theme.palette.info.main
272
380
  },
273
381
  '&.MuiAlert-outlinedWarning:after': {
274
- backgroundColor: theme.palette.warning.main,
382
+ backgroundColor: theme.palette.warning.main
275
383
  },
276
384
  '&.MuiAlert-outlinedError:after': {
277
- backgroundColor: theme.palette.error.main,
385
+ backgroundColor: theme.palette.error.main
278
386
  },
279
387
  '& .MuiAlert-icon': {
280
388
  opacity: 1,
281
- fontSize: 20,
389
+ fontSize: 20
282
390
  },
283
391
  '& .MuiAlert-message': {
284
392
  fontSize: `12px`,
285
393
  lineHeight: `22px`,
286
- color: `black`,
287
- },
288
- },
289
- },
394
+ color: `black`
395
+ }
396
+ }
397
+ }
290
398
  },
291
399
  MuiCircularProgress: {
292
400
  styleOverrides: {
293
401
  root: {
294
- color: theme.palette.button.main,
295
- },
296
- },
402
+ color: theme.palette.button.main
403
+ }
404
+ }
297
405
  },
298
406
  MuiCardContent: {
299
407
  styleOverrides: {
300
408
  root: {
301
409
  padding: theme.spacing(2),
302
- paddingTop: theme.spacing(1),
303
- },
304
- },
410
+ paddingTop: theme.spacing(1)
411
+ }
412
+ }
305
413
  },
306
414
  MuiDataGrid: {
307
415
  styleOverrides: {
308
416
  root: {
309
417
  '& .MuiDataGrid-columnHeader:focus': {
310
- outline: 0,
418
+ outline: 0
311
419
  },
312
420
  '& .MuiDataGrid-cell:focus': {
313
- outline: 0,
314
- },
315
- },
316
- },
317
- },
318
- },
421
+ outline: 0
422
+ }
423
+ }
424
+ }
425
+ }
426
+ }
319
427
  });
320
428
  export default theme;
package/dist/components/Button/Indicator.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { CircularProgress, Box } from '@mui/material';
3
+ import { colors } from '../../assets/theme';
3
4
  const Indicator = () => {
4
- return (_jsx(Box, Object.assign({ sx: {
5
+ return (_jsx(Box, Object.assign({ className: "button-loader", "data-testid": "loading-indicator", sx: {
5
6
  position: `absolute`,
6
7
  top: 0,
7
8
  left: 0,
@@ -10,6 +11,9 @@ const Indicator = () => {
10
11
  display: `grid`,
11
12
  justifyItems: `center`,
12
13
  alignItems: `center`,
14
+ background: colors.light.two,
15
+ border: `1px solid ${colors.light.five}`,
16
+ borderRadius: '0.2rem'
13
17
  } }, { children: _jsx(CircularProgress, { size: 20 }) })));
14
18
  };
15
19
  export default Indicator;
package/dist/components/Button/index.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  import { ButtonProps as MuiButtonProps } from '@mui/material';
2
2
  export declare type ButtonProps = {
3
- /**
4
- Use the isProcessing prop to indicate to the user that an action is in process. This will disable the button.
5
- */
6
- isProcessing?: boolean;
3
+ 'data-testid'?: string;
4
+ variant?: 'primary' | 'secondary' | 'terciary';
5
+ isLoading?: boolean;
7
6
  } & MuiButtonProps;
8
7
  /**
9
8
  - Use a button for common user click actions. Several variations available.
package/dist/components/Button/index.js CHANGED
@@ -18,10 +18,21 @@ import useButtonProps from './useButtonProps';
18
18
  **/
19
19
  const Button = (_a) => {
20
20
  var { children } = _a, props = __rest(_a, ["children"]);
21
- const _b = useButtonProps(props), { isProcessing } = _b, muiButtonProps = __rest(_b, ["isProcessing"]);
21
+ const _b = useButtonProps(props), { isLoading } = _b, muiButtonProps = __rest(_b, ["isLoading"]);
22
22
  return (_jsxs(Box, Object.assign({ sx: {
23
23
  display: `inline-flex`,
24
- position: `relative`,
25
- } }, { children: [_jsx(MuiButton, Object.assign({}, muiButtonProps, { children: children })), isProcessing ? _jsx(Indicator, {}) : null] })));
24
+ position: `relative`
25
+ } }, { children: [_jsx(MuiButton, Object.assign({ sx: {
26
+ fontSize: '14px',
27
+ gap: '5px',
28
+ paddingTop: '8px',
29
+ paddingBottom: '8px',
30
+ paddingLeft: '15px',
31
+ paddingRight: '15px',
32
+ display: 'flex',
33
+ alignItems: 'center',
34
+ lineHeight: '16px',
35
+ height: 36
36
+ }, disableElevation: true }, muiButtonProps, { children: children })), isLoading && _jsx(Indicator, {})] })));
26
37
  };
27
38
  export default Button;
package/dist/components/Button/useButtonProps.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { ButtonProps } from '.';
2
- declare const useButtonProps: ({ isProcessing, ...props }: ButtonProps) => ButtonProps;
2
+ declare const useButtonProps: ({ isLoading, ...props }: ButtonProps) => ButtonProps;
3
3
  export default useButtonProps;
package/dist/components/Button/useButtonProps.js CHANGED
@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  const useButtonProps = (_a) => {
13
- var { isProcessing = false } = _a, props = __rest(_a, ["isProcessing"]);
14
- return Object.assign({ disabled: isProcessing || props.disabled, isProcessing }, props);
13
+ var { isLoading = false } = _a, props = __rest(_a, ["isLoading"]);
14
+ return Object.assign({ disabled: isLoading || props.disabled, isLoading }, props);
15
15
  };
16
16
  export default useButtonProps;
package/dist/components/ThemeProvider/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { ThemeProviderProps } from '@mui/system';
2
- declare const ThemeProvider: ({ children, }: Omit<ThemeProviderProps, 'theme'>) => JSX.Element;
2
+ declare const ThemeProvider: ({ children }: Omit<ThemeProviderProps, 'theme'>) => JSX.Element;
3
3
  export default ThemeProvider;
package/dist/components/ThemeProvider/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { ThemeProvider as MuiThemeProvider } from '@mui/system';
3
- import theme from '../../assets/theme';
4
- const ThemeProvider = ({ children, }) => {
5
- return (_jsx(MuiThemeProvider, Object.assign({ theme: theme }, { children: children })));
3
+ import MuiTheme from '../../assets/theme';
4
+ const ThemeProvider = ({ children }) => {
5
+ return _jsx(MuiThemeProvider, Object.assign({ theme: MuiTheme }, { children: children }));
6
6
  };
7
7
  export default ThemeProvider;
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import '@fontsource/nunito-sans';
2
+ import '@fontsource/dosis';
1
3
  export { default as Button } from './components/Button';
2
4
  export { default as ThemeProvider } from './components/ThemeProvider';
3
5
  export { default as theme } from './assets/theme';
package/dist/index.js CHANGED
@@ -1,3 +1,5 @@
1
+ import '@fontsource/nunito-sans';
2
+ import '@fontsource/dosis';
1
3
  export { default as Button } from './components/Button';
2
4
  export { default as ThemeProvider } from './components/ThemeProvider';
3
5
  export { default as theme } from './assets/theme';
package/package.json CHANGED
@@ -1,29 +1,13 @@
1
1
  {
2
2
  "name": "@veritone-ce/design-system",
3
- "version": "1.0.2",
3
+ "version": "1.1.0",
4
4
  "private": false,
5
- "dependencies": {
6
- "@emotion/react": "^11.10.4",
7
- "@emotion/styled": "^11.10.4",
8
- "@fontsource/dosis": "^4.5.10",
9
- "@fontsource/nunito-sans": "^4.5.10",
10
- "@fontsource/roboto": "^4.5.8",
11
- "@mui/icons-material": "^5.10.6",
12
- "@mui/material": "^5.10.8",
13
- "@testing-library/jest-dom": "^5.14.1",
14
- "@testing-library/react": "^13.0.0",
15
- "@testing-library/user-event": "^13.2.1",
16
- "@types/jest": "^27.0.1",
17
- "@types/node": "^16.7.13",
18
- "react-scripts": "5.0.1",
19
- "typescript": "^4.4.2",
20
- "web-vitals": "^2.1.0"
21
- },
22
5
  "scripts": {
23
6
  "start": "yarn storybook",
24
7
  "build": "yarn tsc",
8
+ "lint": "eslint src",
25
9
  "build-docs": "yarn build-storybook-docs",
26
- "test": "yarn test-storybook",
10
+ "test": "jest",
27
11
  "storybook": "start-storybook -p 6006 -s public",
28
12
  "release": "auto shipit --base-branch=main",
29
13
  "generate": "yarn plop --plopfile generators/plopfile.js",
@@ -32,22 +16,6 @@
32
16
  "build-storybook-docs": "build-storybook --docs",
33
17
  "prepare": "install-peers"
34
18
  },
35
- "eslintConfig": {
36
- "extends": [
37
- "react-app",
38
- "react-app/jest"
39
- ],
40
- "overrides": [
41
- {
42
- "files": [
43
- "**/*.stories.*"
44
- ],
45
- "rules": {
46
- "import/no-anonymous-default-export": "off"
47
- }
48
- }
49
- ]
50
- },
51
19
  "browserslist": {
52
20
  "production": [
53
21
  ">0.2%",
@@ -60,29 +28,55 @@
60
28
  "last 1 safari version"
61
29
  ]
62
30
  },
31
+ "dependencies": {
32
+ "@emotion/react": "^11.10.4",
33
+ "@emotion/styled": "^11.10.4",
34
+ "@fontsource/dosis": "^4.5.10",
35
+ "@fontsource/nunito-sans": "^4.5.10",
36
+ "@fontsource/roboto": "^4.5.8",
37
+ "@mui/icons-material": "^5.10.6",
38
+ "@mui/material": "^5.10.8",
39
+ "@testing-library/jest-dom": "^5.14.1",
40
+ "@testing-library/react": "^13.4.0",
41
+ "@testing-library/user-event": "^13.2.1",
42
+ "@types/jest": "^27.0.1",
43
+ "@types/node": "^16.7.13",
44
+ "react-scripts": "5.0.1",
45
+ "typescript": "^4.4.2",
46
+ "web-vitals": "^2.1.0"
47
+ },
63
48
  "devDependencies": {
64
49
  "@babel/cli": "^7.19.3",
65
- "@storybook/addon-a11y": "^6.5.12",
66
- "@storybook/addon-actions": "^6.5.12",
67
- "@storybook/addon-essentials": "^6.5.12",
68
- "@storybook/addon-interactions": "^6.5.12",
69
- "@storybook/addon-links": "^6.5.12",
70
- "@storybook/builder-webpack5": "^6.5.12",
50
+ "@babel/preset-env": "^7.20.2",
51
+ "@babel/preset-react": "^7.18.6",
52
+ "@storybook/addon-a11y": "^6.5.13",
53
+ "@storybook/addon-actions": "^6.5.13",
54
+ "@storybook/addon-essentials": "^6.5.13",
55
+ "@storybook/addon-interactions": "^6.5.13",
56
+ "@storybook/addon-links": "^6.5.13",
57
+ "@storybook/builder-webpack5": "^6.5.13",
71
58
  "@storybook/jest": "^0.0.10",
72
- "@storybook/manager-webpack5": "^6.5.12",
73
- "@storybook/node-logger": "^6.5.12",
59
+ "@storybook/manager-webpack5": "^6.5.13",
60
+ "@storybook/node-logger": "^6.5.13",
74
61
  "@storybook/preset-create-react-app": "^4.1.2",
75
- "@storybook/react": "^6.5.12",
76
- "@storybook/test-runner": "^0.7.2",
62
+ "@storybook/react": "^6.5.13",
63
+ "@storybook/test-runner": "^0.9.1",
77
64
  "@storybook/testing-library": "^0.0.13",
65
+ "@typescript-eslint/eslint-plugin": "^5.45.0",
66
+ "@typescript-eslint/parser": "^5.45.0",
78
67
  "auto": "^10.37.6",
68
+ "babel-jest": "^29.3.1",
79
69
  "babel-plugin-named-exports-order": "^0.0.2",
80
70
  "chromatic": "^6.10.1",
81
71
  "cross-env": "^7.0.3",
72
+ "eslint-config-prettier": "^8.5.0",
73
+ "eslint-plugin-prettier": "^4.2.1",
74
+ "eslint-plugin-react-hooks": "^4.6.0",
82
75
  "install-peers-cli": "^2.2.0",
83
- "jest": "27",
76
+ "jest": "^29.3.1",
77
+ "jest-environment-jsdom": "^29.3.1",
84
78
  "plop": "^3.1.1",
85
- "prettier": "^2.7.1",
79
+ "prettier": "^2.8.0",
86
80
  "prop-types": "^15.8.1",
87
81
  "webpack": "^5.74.0"
88
82
  },
@@ -92,16 +86,6 @@
92
86
  "react": "^18.2.0",
93
87
  "react-dom": "^18.2.0"
94
88
  },
95
- "babel": {
96
- "presets": [
97
- [
98
- "react-app",
99
- {
100
- "absoluteRuntime": false
101
- }
102
- ]
103
- ]
104
- },
105
89
  "description": "Design System for Veritone CE",
106
90
  "repository": {
107
91
  "type": "git",