@veritone-ce/design-system 1.0.0 → 1.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 (8) hide show
  1. package/dist/assets/theme.js +147 -161
  2. package/dist/components/Button/Indicator.js +6 -17
  3. package/dist/components/Button/index.js +7 -18
  4. package/dist/components/Button/useButtonProps.js +3 -14
  5. package/dist/components/ThemeProvider/index.js +2 -14
  6. package/dist/index.d.ts +1 -4
  7. package/dist/index.js +1 -4
  8. package/package.json +1 -1
package/dist/assets/theme.js CHANGED
@@ -1,14 +1,3 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
1
  import { jsx as _jsx } from "react/jsx-runtime";
13
2
  import { createTheme } from '@mui/material';
14
3
  import '@fontsource/nunito-sans';
@@ -19,123 +8,120 @@ import InfoIcon from '@mui/icons-material/Info';
19
8
  import WarningIcon from '@mui/icons-material/Error';
20
9
  import ErrorIcon from '@mui/icons-material/Cancel';
21
10
  // create theme in steps https://mui.com/material-ui/customization/theming/#api
22
- var theme = createTheme({
11
+ let theme = createTheme({
23
12
  typography: {
24
13
  fontFamily: ['Nunito Sans', 'Helvetica', 'sans-serif'].join(','),
25
14
  h2: {
26
15
  fontSize: '1.429rem',
27
16
  lineHeight: '2.143rem',
28
- fontWeight: '700'
29
- }
17
+ fontWeight: '700',
18
+ },
30
19
  },
31
20
  palette: {
32
21
  primary: {
33
- main: '#214167'
22
+ main: '#214167',
34
23
  },
35
24
  secondary: {
36
25
  main: '#335B89',
37
- contrastText: '#ffffff'
26
+ contrastText: '#ffffff',
38
27
  },
39
28
  neutral: {
40
- main: '#5C6269'
29
+ main: '#5C6269',
41
30
  },
42
31
  button: {
43
32
  main: '#1871E8',
44
- hover: '#335B89'
33
+ hover: '#335B89',
45
34
  },
46
35
  success: {
47
- main: '#28BA3F'
36
+ main: '#28BA3F',
48
37
  },
49
38
  info: {
50
- main: '#325491'
39
+ main: '#325491',
51
40
  },
52
41
  warning: {
53
- main: '#FFBB0A'
42
+ main: '#FFBB0A',
54
43
  },
55
44
  error: {
56
- main: '#FF0000'
45
+ main: '#FF0000',
57
46
  },
58
- divider: '#214167'
47
+ divider: '#214167',
59
48
  },
60
- spacing: 10
49
+ spacing: 10,
61
50
  });
62
51
  theme = createTheme(theme, {
63
52
  components: {
64
53
  MuiButton: {
65
54
  defaultProps: {
66
55
  variant: 'contained',
67
- disableRipple: true
56
+ disableRipple: true,
68
57
  },
69
58
  styleOverrides: {
70
59
  // @ts-ignore
71
- root: function (_a) {
72
- var ownerState = _a.ownerState;
73
- return (__assign(__assign(__assign({ textTransform: 'none', fontWeight: '600', paddingTop: '7px', paddingBottom: '5px', '&.Mui-disabled': {
74
- borderColor: "#E0E8F0"
75
- }, '& .MuiButton-startIcon': {
76
- marginTop: '-1px'
77
- }, '& .MuiButton-endIcon': {
78
- marginTop: '-1px'
79
- }, '&.Mui-disabled .MuiButton-startIcon .MuiButton-endIcon': {
80
- opacity: 0.3
81
- } }, (ownerState.variant === "contained" &&
82
- {
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,
68
+ } }, (ownerState.variant === `contained` &&
69
+ {
70
+ //@ts-ignore
71
+ backgroundColor: ownerState.color === `primary` ? theme.palette.button.main : theme.palette[ownerState.color].main,
72
+ ':hover': {
83
73
  //@ts-ignore
84
- backgroundColor: ownerState.color === "primary" ? theme.palette.button.main : theme.palette[ownerState.color].main,
85
- ':hover': {
86
- //@ts-ignore
87
- backgroundColor: ownerState.color === "primary" ? theme.palette.button.hover : theme.palette[ownerState.color]
88
- }
89
- })), (ownerState.variant === "outlined" &&
90
- {
74
+ backgroundColor: ownerState.color === `primary` ? theme.palette.button.hover : theme.palette[ownerState.color],
75
+ },
76
+ })), (ownerState.variant === `outlined` &&
77
+ {
78
+ //@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,
82
+ ':hover': {
91
83
  //@ts-ignore
92
- color: ownerState.color === "primary" ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
84
+ color: ownerState.color === `primary` ? theme.palette.secondary.main : theme.palette[ownerState.color],
93
85
  //@ts-ignore
94
- borderColor: ownerState.color === "primary" ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
95
- ':hover': {
96
- //@ts-ignore
97
- color: ownerState.color === "primary" ? theme.palette.secondary.main : theme.palette[ownerState.color],
98
- //@ts-ignore
99
- borderColor: ownerState.color === "primary" ? theme.palette.secondary.main : theme.palette[ownerState.color]
100
- }
101
- })), (ownerState.variant === "text" &&
102
- {
86
+ borderColor: ownerState.color === `primary` ? theme.palette.secondary.main : theme.palette[ownerState.color],
87
+ },
88
+ })), (ownerState.variant === `text` &&
89
+ {
90
+ //@ts-ignore
91
+ color: ownerState.color === `primary` ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
92
+ ':hover': {
103
93
  //@ts-ignore
104
- color: ownerState.color === "primary" ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
105
- ':hover': {
106
- //@ts-ignore
107
- color: ownerState.color === "primary" ? theme.palette.secondary.main : theme.palette[ownerState.color]
108
- }
109
- })));
110
- }
94
+ color: ownerState.color === `primary` ? theme.palette.secondary.main : theme.palette[ownerState.color],
95
+ },
96
+ }))),
111
97
  },
112
98
  variants: [
113
99
  {
114
100
  props: {
115
- variant: 'secondary'
101
+ variant: 'secondary',
116
102
  },
117
103
  style: sx({
118
104
  backgroundColor: 'white',
119
105
  color: theme.palette.neutral.main,
120
- border: "1px solid ".concat(theme.palette.neutral.main),
106
+ border: `1px solid ${theme.palette.neutral.main}`,
121
107
  ':hover': {
122
- border: "1px solid ".concat(theme.palette.primary.main),
108
+ border: `1px solid ${theme.palette.primary.main}`,
123
109
  color: theme.palette.primary.main,
124
- backgroundColor: 'white'
125
- }
126
- })
110
+ backgroundColor: 'white',
111
+ },
112
+ }),
127
113
  },
128
- ]
114
+ ],
129
115
  },
130
116
  MuiInputLabel: {
131
117
  styleOverrides: {
132
118
  root: sx({
133
- color: "#5C6269",
134
- fontSize: "14px",
135
- lineHeight: "21px",
136
- fontWeight: "600"
137
- })
138
- }
119
+ color: `#5C6269`,
120
+ fontSize: `14px`,
121
+ lineHeight: `21px`,
122
+ fontWeight: `600`,
123
+ }),
124
+ },
139
125
  },
140
126
  MuiFormHelperText: {
141
127
  styleOverrides: {
@@ -143,76 +129,76 @@ theme = createTheme(theme, {
143
129
  position: 'relative',
144
130
  marginLeft: 0,
145
131
  '&.Mui-error': {
146
- paddingLeft: "17px",
132
+ paddingLeft: `17px`,
147
133
  '&::before': {
148
- content: "\"\"",
149
- height: "12px",
134
+ content: `""`,
135
+ height: `12px`,
150
136
  width: '12px',
151
137
  position: 'absolute',
152
138
  left: 0,
153
- top: "50%",
154
- transform: "translate(0, -50%)",
139
+ top: `50%`,
140
+ transform: `translate(0, -50%)`,
155
141
  backgroundColor: theme.palette.error.main,
156
- borderRadius: "100%"
157
- }
158
- }
159
- })
160
- }
142
+ borderRadius: `100%`,
143
+ },
144
+ },
145
+ }),
146
+ },
161
147
  },
162
148
  MuiTextField: {
163
149
  defaultProps: {
164
- size: 'small'
150
+ size: 'small',
165
151
  },
166
152
  styleOverrides: {
167
153
  root: sx({
168
- color: "#2A323C",
154
+ color: `#2A323C`,
169
155
  '& .MuiOutlinedInput-root': {
170
156
  '& fieldset': {
171
- borderColor: "#E0E8F0"
157
+ borderColor: `#E0E8F0`,
172
158
  },
173
159
  '&:hover fieldset': {
174
- borderColor: "#335B89"
160
+ borderColor: `#335B89`,
175
161
  },
176
162
  '&.Mui-focused fieldset': {
177
- border: "1px solid #5C6269"
163
+ border: `1px solid #5C6269`,
178
164
  },
179
165
  '&.Mui-error fieldset': {
180
- borderColor: theme.palette.error.main
181
- }
182
- }
183
- })
184
- }
166
+ borderColor: theme.palette.error.main,
167
+ },
168
+ },
169
+ }),
170
+ },
185
171
  },
186
172
  MuiStepIcon: {
187
173
  styleOverrides: {
188
174
  root: {
189
- borderRadius: "100%",
190
- outline: "1px solid #465364",
191
- color: "white",
175
+ borderRadius: `100%`,
176
+ outline: `1px solid #465364`,
177
+ color: `white`,
192
178
  text: {
193
- fill: "#465364"
179
+ fill: `#465364`,
194
180
  },
195
181
  '&.Mui-active': {
196
- outline: "none",
182
+ outline: `none`,
197
183
  color: theme.palette.button.main,
198
184
  text: {
199
- fill: "white"
200
- }
201
- }
202
- }
203
- }
185
+ fill: `white`,
186
+ },
187
+ },
188
+ },
189
+ },
204
190
  },
205
191
  MuiDialogTitle: {
206
192
  styleOverrides: {
207
193
  root: {
208
- fontSize: "24px",
209
- lineHeight: "34px",
194
+ fontSize: `24px`,
195
+ lineHeight: `34px`,
210
196
  paddingTop: theme.spacing(3),
211
197
  paddingLeft: theme.spacing(3),
212
198
  paddingRight: theme.spacing(3),
213
- paddingBottom: theme.spacing(1)
214
- }
215
- }
199
+ paddingBottom: theme.spacing(1),
200
+ },
201
+ },
216
202
  },
217
203
  MuiDialogContent: {
218
204
  styleOverrides: {
@@ -220,115 +206,115 @@ theme = createTheme(theme, {
220
206
  paddingTop: 0,
221
207
  paddingLeft: theme.spacing(3),
222
208
  paddingRight: theme.spacing(3),
223
- paddingBottom: theme.spacing(1)
224
- }
225
- }
209
+ paddingBottom: theme.spacing(1),
210
+ },
211
+ },
226
212
  },
227
213
  MuiDialogActions: {
228
214
  styleOverrides: {
229
215
  root: {
230
- padding: theme.spacing(3)
231
- }
232
- }
216
+ padding: theme.spacing(3),
217
+ },
218
+ },
233
219
  },
234
220
  MuiLink: {
235
221
  defaultProps: {
236
- underline: "none",
237
- color: "#1871E8"
238
- }
222
+ underline: `none`,
223
+ color: `#1871E8`,
224
+ },
239
225
  },
240
226
  MuiSnackbar: {
241
227
  defaultProps: {
242
228
  autoHideDuration: 6000,
243
229
  anchorOrigin: {
244
- vertical: "top",
245
- horizontal: "right"
246
- }
230
+ vertical: `top`,
231
+ horizontal: `right`,
232
+ },
247
233
  },
248
234
  styleOverrides: {
249
235
  root: {
250
- width: "100%",
251
- maxWidth: "415px",
252
- position: "absolute"
253
- }
254
- }
236
+ width: `100%`,
237
+ maxWidth: `415px`,
238
+ position: `absolute`,
239
+ },
240
+ },
255
241
  },
256
242
  MuiAlert: {
257
243
  defaultProps: {
258
- variant: "outlined",
244
+ variant: `outlined`,
259
245
  iconMapping: {
260
246
  success: _jsx(CheckCircleIcon, {}),
261
247
  info: _jsx(InfoIcon, {}),
262
248
  warning: _jsx(WarningIcon, {}),
263
- error: _jsx(ErrorIcon, {})
264
- }
249
+ error: _jsx(ErrorIcon, {}),
250
+ },
265
251
  },
266
252
  styleOverrides: {
267
253
  root: {
268
- width: "100%",
269
- backgroundColor: "white",
270
- borderColor: "#D5DFE9",
271
- position: "relative",
272
- overflow: "hidden",
254
+ width: `100%`,
255
+ backgroundColor: `white`,
256
+ borderColor: `#D5DFE9`,
257
+ position: `relative`,
258
+ overflow: `hidden`,
273
259
  '&:after': {
274
260
  content: '""',
275
- position: "absolute",
276
- width: "4px",
261
+ position: `absolute`,
262
+ width: `4px`,
277
263
  left: 0,
278
264
  top: 0,
279
- bottom: 0
265
+ bottom: 0,
280
266
  },
281
267
  '&.MuiAlert-outlinedSuccess:after': {
282
- backgroundColor: theme.palette.success.main
268
+ backgroundColor: theme.palette.success.main,
283
269
  },
284
270
  '&.MuiAlert-outlinedInfo:after': {
285
- backgroundColor: theme.palette.info.main
271
+ backgroundColor: theme.palette.info.main,
286
272
  },
287
273
  '&.MuiAlert-outlinedWarning:after': {
288
- backgroundColor: theme.palette.warning.main
274
+ backgroundColor: theme.palette.warning.main,
289
275
  },
290
276
  '&.MuiAlert-outlinedError:after': {
291
- backgroundColor: theme.palette.error.main
277
+ backgroundColor: theme.palette.error.main,
292
278
  },
293
279
  '& .MuiAlert-icon': {
294
280
  opacity: 1,
295
- fontSize: 20
281
+ fontSize: 20,
296
282
  },
297
283
  '& .MuiAlert-message': {
298
- fontSize: "12px",
299
- lineHeight: "22px",
300
- color: "black"
301
- }
302
- }
303
- }
284
+ fontSize: `12px`,
285
+ lineHeight: `22px`,
286
+ color: `black`,
287
+ },
288
+ },
289
+ },
304
290
  },
305
291
  MuiCircularProgress: {
306
292
  styleOverrides: {
307
293
  root: {
308
- color: theme.palette.button.main
309
- }
310
- }
294
+ color: theme.palette.button.main,
295
+ },
296
+ },
311
297
  },
312
298
  MuiCardContent: {
313
299
  styleOverrides: {
314
300
  root: {
315
301
  padding: theme.spacing(2),
316
- paddingTop: theme.spacing(1)
317
- }
318
- }
302
+ paddingTop: theme.spacing(1),
303
+ },
304
+ },
319
305
  },
320
306
  MuiDataGrid: {
321
307
  styleOverrides: {
322
308
  root: {
323
309
  '& .MuiDataGrid-columnHeader:focus': {
324
- outline: 0
310
+ outline: 0,
325
311
  },
326
312
  '& .MuiDataGrid-cell:focus': {
327
- outline: 0
328
- }
329
- }
330
- }
331
- }
332
- }
313
+ outline: 0,
314
+ },
315
+ },
316
+ },
317
+ },
318
+ },
333
319
  });
334
320
  export default theme;
package/dist/components/Button/Indicator.js CHANGED
@@ -1,26 +1,15 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
1
  import { jsx as _jsx } from "react/jsx-runtime";
13
2
  import { CircularProgress, Box } from '@mui/material';
14
- var Indicator = function () {
15
- return (_jsx(Box, __assign({ sx: {
16
- position: "absolute",
3
+ const Indicator = () => {
4
+ return (_jsx(Box, Object.assign({ sx: {
5
+ position: `absolute`,
17
6
  top: 0,
18
7
  left: 0,
19
8
  right: 0,
20
9
  bottom: 0,
21
- display: "grid",
22
- justifyItems: "center",
23
- alignItems: "center"
10
+ display: `grid`,
11
+ justifyItems: `center`,
12
+ alignItems: `center`,
24
13
  } }, { children: _jsx(CircularProgress, { size: 20 }) })));
25
14
  };
26
15
  export default Indicator;
package/dist/components/Button/index.js CHANGED
@@ -1,14 +1,3 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
1
  var __rest = (this && this.__rest) || function (s, e) {
13
2
  var t = {};
14
3
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -27,12 +16,12 @@ import useButtonProps from './useButtonProps';
27
16
  /**
28
17
  - Use a button for common user click actions. Several variations available.
29
18
  **/
30
- var Button = function (_a) {
31
- var children = _a.children, props = __rest(_a, ["children"]);
32
- var _b = useButtonProps(props), isProcessing = _b.isProcessing, muiButtonProps = __rest(_b, ["isProcessing"]);
33
- return (_jsxs(Box, __assign({ sx: {
34
- display: "inline-flex",
35
- position: "relative"
36
- } }, { children: [_jsx(MuiButton, __assign({}, muiButtonProps, { children: children })), isProcessing ? _jsx(Indicator, {}) : null] })));
19
+ const Button = (_a) => {
20
+ var { children } = _a, props = __rest(_a, ["children"]);
21
+ const _b = useButtonProps(props), { isProcessing } = _b, muiButtonProps = __rest(_b, ["isProcessing"]);
22
+ return (_jsxs(Box, Object.assign({ sx: {
23
+ display: `inline-flex`,
24
+ position: `relative`,
25
+ } }, { children: [_jsx(MuiButton, Object.assign({}, muiButtonProps, { children: children })), isProcessing ? _jsx(Indicator, {}) : null] })));
37
26
  };
38
27
  export default Button;
package/dist/components/Button/useButtonProps.js CHANGED
@@ -1,14 +1,3 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
1
  var __rest = (this && this.__rest) || function (s, e) {
13
2
  var t = {};
14
3
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -20,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
20
9
  }
21
10
  return t;
22
11
  };
23
- var useButtonProps = function (_a) {
24
- var _b = _a.isProcessing, isProcessing = _b === void 0 ? false : _b, props = __rest(_a, ["isProcessing"]);
25
- return __assign({ disabled: isProcessing || props.disabled, isProcessing: isProcessing }, props);
12
+ const useButtonProps = (_a) => {
13
+ var { isProcessing = false } = _a, props = __rest(_a, ["isProcessing"]);
14
+ return Object.assign({ disabled: isProcessing || props.disabled, isProcessing }, props);
26
15
  };
27
16
  export default useButtonProps;
package/dist/components/ThemeProvider/index.js CHANGED
@@ -1,19 +1,7 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
1
  import { jsx as _jsx } from "react/jsx-runtime";
13
2
  import { ThemeProvider as MuiThemeProvider } from '@mui/system';
14
3
  import theme from '../../assets/theme';
15
- var ThemeProvider = function (_a) {
16
- var children = _a.children;
17
- return (_jsx(MuiThemeProvider, __assign({ theme: theme }, { children: children })));
4
+ const ThemeProvider = ({ children, }) => {
5
+ return (_jsx(MuiThemeProvider, Object.assign({ theme: theme }, { children: children })));
18
6
  };
19
7
  export default ThemeProvider;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,3 @@
1
- export * from './components/Button';
2
- export { default as Button } from "./components/Button";
3
- export * from './components/ThemeProvider';
1
+ export { default as Button } from './components/Button';
4
2
  export { default as ThemeProvider } from './components/ThemeProvider';
5
- export * from './assets/theme';
6
3
  export { default as theme } from './assets/theme';
package/dist/index.js CHANGED
@@ -1,6 +1,3 @@
1
- export * from './components/Button';
2
- export { default as Button } from "./components/Button";
3
- export * from './components/ThemeProvider';
1
+ export { default as Button } from './components/Button';
4
2
  export { default as ThemeProvider } from './components/ThemeProvider';
5
- export * from './assets/theme';
6
3
  export { default as theme } from './assets/theme';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veritone-ce/design-system",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "private": false,
5
5
  "dependencies": {
6
6
  "@emotion/react": "^11.10.4",