@niledatabase/react 3.0.0-alpha.9 → 3.0.1-alpha.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 (41) hide show
  1. package/dist/index.d.mts +355 -0
  2. package/dist/index.d.ts +355 -11
  3. package/dist/index.js +3 -8
  4. package/dist/index.js.map +1 -0
  5. package/dist/index.mjs +3 -0
  6. package/dist/index.mjs.map +1 -0
  7. package/dist/styles.css +1 -0
  8. package/package.json +52 -32
  9. package/dist/GoogleLoginButton/GoogleLoginButton.d.ts +0 -10
  10. package/dist/GoogleLoginButton/GoogleLoginButton.stories.d.ts +0 -11
  11. package/dist/GoogleLoginButton/index.d.ts +0 -1
  12. package/dist/SignInForm/SignInForm.d.ts +0 -3
  13. package/dist/SignInForm/UserLoginForm.stories.d.ts +0 -5
  14. package/dist/SignInForm/index.d.ts +0 -1
  15. package/dist/SignInForm/types.d.ts +0 -16
  16. package/dist/SignUpForm/NewUserSignUp.stories.d.ts +0 -5
  17. package/dist/SignUpForm/SignUpForm.d.ts +0 -3
  18. package/dist/SignUpForm/index.d.ts +0 -1
  19. package/dist/SignUpForm/types.d.ts +0 -13
  20. package/dist/UserTenantList/CreateUser.d.ts +0 -8
  21. package/dist/UserTenantList/UserList.d.ts +0 -17
  22. package/dist/UserTenantList/UserList.stories.d.ts +0 -5
  23. package/dist/UserTenantList/UserModal.d.ts +0 -7
  24. package/dist/UserTenantList/index.d.ts +0 -1
  25. package/dist/UserTenantList/useDataParser.d.ts +0 -4
  26. package/dist/context/index.d.ts +0 -9
  27. package/dist/context/theme.d.ts +0 -7
  28. package/dist/context/types.d.ts +0 -22
  29. package/dist/hooks/useResults.d.ts +0 -22
  30. package/dist/hooks/useTextSizer.d.ts +0 -1
  31. package/dist/lib/SimpleForm/CheckGroup/index.d.ts +0 -10
  32. package/dist/lib/SimpleForm/index.d.ts +0 -11
  33. package/dist/lib/SimpleForm/types.d.ts +0 -37
  34. package/dist/react.cjs.development.js +0 -943
  35. package/dist/react.cjs.development.js.map +0 -1
  36. package/dist/react.cjs.production.min.js +0 -2
  37. package/dist/react.cjs.production.min.js.map +0 -1
  38. package/dist/react.esm.d.ts +0 -11
  39. package/dist/react.esm.js +0 -911
  40. package/dist/react.esm.js.map +0 -1
  41. package/dist/utils/getColumnSize.d.ts +0 -2
package/dist/react.esm.js DELETED
@@ -1,911 +0,0 @@
1
- import * as React from 'react';
2
- import React__default, { useMemo, useContext, createContext, useState, useEffect } from 'react';
3
- import Browser from '@niledatabase/browser';
4
- import { QueryClientProvider, QueryClient, useMutation } from '@tanstack/react-query';
5
- import CssBaseline from '@mui/material/CssBaseline';
6
- import { CssVarsProvider } from '@mui/joy/styles';
7
- import Box from '@mui/joy/Box';
8
- import Button from '@mui/joy/Button';
9
- import Stack from '@mui/joy/Stack';
10
- import Typography from '@mui/joy/Typography';
11
- import { signIn } from 'next-auth/react';
12
- export * from 'next-auth/react';
13
- import Alert from '@mui/joy/Alert';
14
- import { useFormContext, Controller, useForm, FormProvider } from 'react-hook-form';
15
- import Input from '@mui/joy/Input';
16
- import FormControl from '@mui/joy/FormControl';
17
- import FormHelperText from '@mui/joy/FormHelperText';
18
- import Error$1 from '@mui/icons-material/Error';
19
- import FormLabel from '@mui/joy/FormLabel';
20
- import Select from '@mui/joy/Select';
21
- import Option from '@mui/joy/Option';
22
- import Tooltip from '@mui/joy/Tooltip';
23
- import { Switch, Modal, ModalDialog, Stack as Stack$1, Typography as Typography$1, FormControl as FormControl$1, FormLabel as FormLabel$1, Input as Input$1, Button as Button$1 } from '@mui/joy';
24
- import Checkbox from '@mui/joy/Checkbox';
25
- import List from '@mui/joy/List';
26
- import ListItem from '@mui/joy/ListItem';
27
- import { DataGrid } from '@mui/x-data-grid';
28
- import Add from '@mui/icons-material/Add';
29
-
30
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
31
- function Themer({
32
- theme,
33
- children,
34
- slotProps
35
- }) {
36
- return /*#__PURE__*/React__default.createElement(CssVarsProvider, {
37
- ...slotProps,
38
- theme: theme
39
- }, /*#__PURE__*/React__default.createElement(CssBaseline, {
40
- enableColorScheme: true
41
- }), children);
42
- }
43
-
44
- const queryClient = /*#__PURE__*/new QueryClient();
45
- const defaultContext = {
46
- api: /*#__PURE__*/new Browser({
47
- basePath: 'https://api.thenile.dev',
48
- credentials: 'include'
49
- }),
50
- apiUrl: ''
51
- };
52
- const context = /*#__PURE__*/createContext(defaultContext);
53
- const {
54
- Provider
55
- } = context;
56
- const BaseQueryProvider = ({
57
- children
58
- }) => {
59
- return /*#__PURE__*/React__default.createElement(QueryClientProvider, {
60
- client: queryClient
61
- }, children);
62
- };
63
- const NileProvider = props => {
64
- const {
65
- children,
66
- theme,
67
- slotProps,
68
- tenantId,
69
- QueryProvider = BaseQueryProvider,
70
- appUrl,
71
- apiUrl = 'https://api.thenile.dev',
72
- api
73
- } = props;
74
- const values = useMemo(() => {
75
- return {
76
- api: api ?? new Browser({
77
- basePath: appUrl,
78
- credentials: 'include'
79
- }),
80
- tenantId: String(tenantId),
81
- apiUrl,
82
- appUrl
83
- };
84
- }, [api, apiUrl, appUrl, tenantId]);
85
- return /*#__PURE__*/React__default.createElement(QueryProvider, null, /*#__PURE__*/React__default.createElement(Themer, {
86
- slotProps: slotProps?.provider,
87
- theme: theme
88
- }, /*#__PURE__*/React__default.createElement(Provider, {
89
- value: values
90
- }, children)));
91
- };
92
- const useNileContext = () => {
93
- return useContext(context);
94
- };
95
- const useNileConfig = () => {
96
- const {
97
- apiUrl,
98
- tenantId,
99
- appUrl
100
- } = useNileContext();
101
- return useMemo(() => ({
102
- tenantId,
103
- apiUrl,
104
- appUrl
105
- }), [apiUrl, tenantId, appUrl]);
106
- };
107
- const useApi = () => {
108
- return useNileContext().api;
109
- };
110
-
111
- var _g;
112
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
113
- var SvgGoogle = function SvgGoogle(props) {
114
- return /*#__PURE__*/React.createElement("svg", _extends({
115
- xmlns: "http://www.w3.org/2000/svg",
116
- width: 18,
117
- height: 18
118
- }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
119
- fillRule: "evenodd"
120
- }, /*#__PURE__*/React.createElement("path", {
121
- fill: "#EA4335",
122
- d: "M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48"
123
- }), /*#__PURE__*/React.createElement("path", {
124
- fill: "#4285F4",
125
- d: "M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62"
126
- }), /*#__PURE__*/React.createElement("path", {
127
- fill: "#FBBC05",
128
- d: "M3.88 10.78A5.5 5.5 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9 9 0 0 0 0 9c0 1.45.35 2.82.96 4.04z"
129
- }), /*#__PURE__*/React.createElement("path", {
130
- fill: "#34A853",
131
- d: "M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18"
132
- }), /*#__PURE__*/React.createElement("path", {
133
- fill: "none",
134
- d: "M0 0h18v18H0z"
135
- }))));
136
- };
137
-
138
- /**
139
- * A component for a Google login button, according to their design language.
140
- * This works when an identity provider is configured in the admin dashboard.
141
- * @param props href: a string to override the URL provided by the context
142
- * @returns a JSX.Element to render
143
- */
144
- function GoogleSSOButton(props) {
145
- const {
146
- callbackUrl
147
- } = props;
148
- return /*#__PURE__*/React__default.createElement(Box, {
149
- display: "flex",
150
- flex: 1,
151
- sx: {
152
- textDecoration: 'none'
153
- },
154
- onClick: () => {
155
- signIn('google', {
156
- callbackUrl
157
- });
158
- }
159
- }, /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(Button, {
160
- sx: {
161
- padding: 0,
162
- textTransform: 'initial',
163
- flex: 1
164
- },
165
- "aria-label": "log in with google"
166
- }, /*#__PURE__*/React__default.createElement(Stack, {
167
- direction: "row",
168
- alignItems: "center",
169
- p: 0,
170
- flex: 1,
171
- fontFamily: "Roboto, sans-serif",
172
- fontSize: "14px",
173
- display: "inline-flex",
174
- color: "rgb(255 255, 255)",
175
- boxShadow: "rgb(0 0 0 / 24%) 0px 2px 2px 0px rgb(0 0 0 / 24%) 0px 0px 1px 0px",
176
- borderRadius: "4px",
177
- border: "1px solid transparent",
178
- fontWeight: "500",
179
- sx: {
180
- backgroundColor: 'rgb(66 133, 244)'
181
- }
182
- }, /*#__PURE__*/React__default.createElement(Box, {
183
- padding: "11px",
184
- display: "flex",
185
- border: "1px solid rgb(66, 133, 244)",
186
- borderRadius: "4px",
187
- sx: {
188
- background: 'rgb(255, 255, 255)'
189
- }
190
- }, /*#__PURE__*/React__default.createElement(SvgGoogle, {
191
- "aria-hidden": "true"
192
- })), /*#__PURE__*/React__default.createElement(Box, {
193
- padding: "10px",
194
- flex: 1
195
- }, /*#__PURE__*/React__default.createElement(Typography, {
196
- sx: {
197
- color: 'white'
198
- },
199
- fontWeight: 700,
200
- fontFamily: "Roboto, sans-serif",
201
- fontSize: "14px",
202
- height: "20px"
203
- }, "Continue with Google"))))));
204
- }
205
-
206
- function CheckGroup(props) {
207
- const {
208
- options,
209
- attribute,
210
- display,
211
- helperText
212
- } = props;
213
- const {
214
- watch,
215
- control
216
- } = useFormContext();
217
- const currentVals = watch(attribute.name);
218
- const checkProps = {};
219
- if (helperText) {
220
- checkProps.color = 'danger';
221
- }
222
- return /*#__PURE__*/React.createElement(Controller, {
223
- name: attribute.name,
224
- rules: {
225
- required: Boolean(attribute.required)
226
- },
227
- control: control,
228
- render: ({
229
- field
230
- }) => {
231
- return /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(FormLabel, {
232
- htmlFor: `${field.name}`
233
- }, display.label), /*#__PURE__*/React.createElement(Box, {
234
- role: "group",
235
- "aria-labelledby": attribute.name,
236
- sx: {
237
- borderRadius: 'var(--joy-radius-sm)',
238
- p: 0.5,
239
- border: helperText ? '1px solid var(--joy-palette-danger-outlinedBorder)' : 'none'
240
- }
241
- }, /*#__PURE__*/React.createElement(List, {
242
- orientation: "horizontal",
243
- wrap: true,
244
- sx: {
245
- '--List-gap': '8px'
246
- }
247
- }, options.map(item => {
248
- checkProps.id = String(item.value);
249
- return /*#__PURE__*/React.createElement(ListItem, {
250
- key: `${item.value}-${item.label}`
251
- }, /*#__PURE__*/React.createElement(Checkbox, {
252
- overlay: options.length > 1,
253
- ...checkProps,
254
- checked: currentVals.includes(item.value),
255
- disableIcon: options.length > 1,
256
- variant: "soft",
257
- label: item.label,
258
- onChange: event => {
259
- if (attribute.allowMultiple) {
260
- if (event.target.checked) {
261
- if (!currentVals) {
262
- field.onChange([item.value]);
263
- } else {
264
- field.onChange(currentVals.concat(item.value));
265
- }
266
- } else {
267
- const remaining = currentVals.filter(val => val !== item.value);
268
- if (remaining.length > 0) {
269
- field.onChange(remaining);
270
- } else {
271
- field.onChange('');
272
- }
273
- }
274
- } else {
275
- if (event.target.checked) {
276
- field.onChange(item.value);
277
- } else {
278
- field.onChange('');
279
- }
280
- }
281
- }
282
- }));
283
- }))), /*#__PURE__*/React.createElement(Typography, {
284
- sx: {
285
- color: 'var(--joy-palette-danger-500)'
286
- },
287
- level: "body-sm"
288
- }, helperText));
289
- }
290
- });
291
- }
292
-
293
- var AttributeType;
294
- (function (AttributeType) {
295
- AttributeType["Text"] = "text";
296
- AttributeType["Email"] = "email";
297
- AttributeType["Password"] = "password";
298
- AttributeType["Select"] = "select";
299
- AttributeType["Number"] = "number";
300
- AttributeType["Float"] = "float";
301
- AttributeType["Checkbox"] = "checkbox";
302
- AttributeType["Switch"] = "switch";
303
- })(AttributeType || (AttributeType = {}));
304
-
305
- const getAttributeDefault = attribute => {
306
- // have to look to see if it is an enum
307
- if (attribute.allowMultiple === true) {
308
- if (!Array.isArray(attribute.defaultValue) && attribute.defaultValue) {
309
- if (typeof attribute.defaultValue === 'number') {
310
- return [attribute.defaultValue];
311
- }
312
- return [String(attribute.defaultValue)];
313
- }
314
- }
315
- return attribute.defaultValue ?? '';
316
- };
317
- function Labler(props) {
318
- const {
319
- error,
320
- attr
321
- } = props;
322
- if (error) {
323
- return /*#__PURE__*/React__default.createElement(Tooltip, {
324
- title: error,
325
- color: "danger",
326
- sx: {
327
- cursor: 'pointer'
328
- }
329
- }, /*#__PURE__*/React__default.createElement(FormLabel, null, attr.label ?? attr.name, /*#__PURE__*/React__default.createElement(Error$1, {
330
- sx: {
331
- ml: 0.5,
332
- '--Icon-color': '#c41c1c'
333
- },
334
- fontSize: "small"
335
- })));
336
- }
337
- return /*#__PURE__*/React__default.createElement(FormLabel, null, attr.label ?? attr.name);
338
- }
339
- function SimpleForm(props) {
340
- const {
341
- mutation,
342
- buttonText,
343
- attributes,
344
- cancelButton,
345
- loading,
346
- successMessage
347
- } = props;
348
- const defaultValues = React__default.useMemo(() => attributes.reduce((accum, attr) => {
349
- accum[attr.name] = getAttributeDefault(attr);
350
- return accum;
351
- }, {}), [attributes]);
352
- const methods = useForm({
353
- defaultValues
354
- });
355
- const {
356
- register,
357
- control,
358
- handleSubmit,
359
- formState: {
360
- errors
361
- }
362
- } = methods;
363
- const onSubmit = React__default.useCallback(
364
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
365
- data => {
366
- mutation.mutate(data);
367
- }, [mutation]);
368
- return /*#__PURE__*/React__default.createElement(FormProvider, {
369
- ...methods
370
- }, /*#__PURE__*/React__default.createElement(Stack, {
371
- component: "form",
372
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
373
- onSubmit: handleSubmit(data => onSubmit(data)),
374
- spacing: 2
375
- }, attributes.map(attr => {
376
- const fieldConfig = {};
377
- const display = {
378
- key: attr.name,
379
- label: attr.label ?? attr.name,
380
- id: attr.label ?? attr.name,
381
- placeholder: attr.placeholder ?? attr.label ?? attr.name,
382
- error: Boolean(errors[attr.name]),
383
- disabled: Boolean(attr.disabled)
384
- };
385
- const options = attr.options ?? [];
386
- const helperText = attr.helpText ?? '';
387
- let error = '';
388
- if (attr.required) {
389
- error = errors[attr.name] ? `${attr.label ?? attr.name} is required` : '';
390
- fieldConfig.required = true;
391
- }
392
- switch (attr.type) {
393
- case AttributeType.Switch:
394
- return /*#__PURE__*/React__default.createElement(FormControl, {
395
- key: display.key,
396
- id: display.id,
397
- orientation: "horizontal",
398
- sx: {
399
- alignItems: 'center'
400
- },
401
- required: attr.required
402
- }, /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(Labler, {
403
- error: error,
404
- attr: attr
405
- }), /*#__PURE__*/React__default.createElement(FormHelperText, {
406
- id: `${attr.name}-helper-text`
407
- }, helperText)), /*#__PURE__*/React__default.createElement(Controller, {
408
- control: control,
409
- rules: {
410
- required: Boolean(attr.required)
411
- },
412
- name: attr.name,
413
- render: ({
414
- field
415
- }) => {
416
- const color = {};
417
- if (errors[attr.name]) {
418
- color.color = 'danger';
419
- }
420
- return /*#__PURE__*/React__default.createElement(Switch, {
421
- id: `switch-field-${attr.name}`,
422
- ...color,
423
- ...field,
424
- checked: Boolean(field.value),
425
- onChange: event => {
426
- field.onChange(event.target.checked);
427
- },
428
- color: field.value ? 'success' : 'neutral',
429
- endDecorator: field.value ? options[0].label : options[1].label
430
- });
431
- }
432
- }));
433
- case AttributeType.Checkbox:
434
- return /*#__PURE__*/React__default.createElement(CheckGroup, {
435
- key: display.key,
436
- attribute: attr,
437
- display: display,
438
- options: options,
439
- helperText: helperText
440
- });
441
- case AttributeType.Select:
442
- return /*#__PURE__*/React__default.createElement(FormControl, {
443
- key: display.key,
444
- id: display.id,
445
- required: attr.required
446
- }, /*#__PURE__*/React__default.createElement(Labler, {
447
- error: error,
448
- attr: attr
449
- }), /*#__PURE__*/React__default.createElement(Controller, {
450
- control: control,
451
- rules: {
452
- required: Boolean(attr.required)
453
- },
454
- name: attr.name,
455
- render: ({
456
- field
457
- }) => {
458
- const color = {};
459
- if (errors[attr.name]) {
460
- color.color = 'danger';
461
- }
462
- const value = String(field.value);
463
- return /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Select, {
464
- id: `select-field-${attr.name}`,
465
- placeholder: `${display.placeholder}...`,
466
- ...color,
467
- ...field,
468
- value: value,
469
- onChange: (_, newValue) => {
470
- field.onChange(newValue);
471
- }
472
- }, options.map(option => {
473
- return /*#__PURE__*/React__default.createElement(Option, {
474
- key: String(option.value ?? ''),
475
- value: option.value
476
- }, option.label);
477
- })), /*#__PURE__*/React__default.createElement(FormHelperText, {
478
- id: `${attr.name}-helper-text`
479
- }, helperText));
480
- }
481
- }));
482
- case AttributeType.Password:
483
- return /*#__PURE__*/React__default.createElement(FormControl, {
484
- key: display.key,
485
- id: display.id,
486
- required: attr.required
487
- }, /*#__PURE__*/React__default.createElement(Labler, {
488
- error: error,
489
- attr: attr
490
- }), /*#__PURE__*/React__default.createElement(Input, {
491
- ...display,
492
- ...register(attr.name, fieldConfig),
493
- type: AttributeType.Password
494
- }), /*#__PURE__*/React__default.createElement(FormHelperText, {
495
- id: `${attr.name}-helper-text`
496
- }, helperText));
497
- case AttributeType.Number:
498
- return /*#__PURE__*/React__default.createElement(FormControl, {
499
- key: display.key,
500
- id: display.id,
501
- required: attr.required
502
- }, /*#__PURE__*/React__default.createElement(Labler, {
503
- error: error,
504
- attr: attr
505
- }), /*#__PURE__*/React__default.createElement(Input, {
506
- ...display,
507
- ...register(attr.name, fieldConfig),
508
- type: AttributeType.Number
509
- }), /*#__PURE__*/React__default.createElement(FormHelperText, {
510
- id: `${attr.name}-helper-text`
511
- }, helperText));
512
- case AttributeType.Text:
513
- default:
514
- return /*#__PURE__*/React__default.createElement(FormControl, {
515
- key: display.key,
516
- id: display.id,
517
- required: attr.required
518
- }, /*#__PURE__*/React__default.createElement(Labler, {
519
- error: error,
520
- attr: attr
521
- }), /*#__PURE__*/React__default.createElement(Input, {
522
- ...display,
523
- ...register(attr.name, fieldConfig)
524
- }), /*#__PURE__*/React__default.createElement(FormHelperText, {
525
- id: `${attr.name}-helper-text`
526
- }, helperText));
527
- }
528
- }), cancelButton ? ( /*#__PURE__*/React__default.createElement(Stack, {
529
- spacing: 2,
530
- direction: "row"
531
- }, cancelButton, /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(Button, {
532
- type: "submit"
533
- }, buttonText)))) : ( /*#__PURE__*/React__default.createElement(Box, null, /*#__PURE__*/React__default.createElement(Stack, {
534
- direction: "row",
535
- gap: 2
536
- }, /*#__PURE__*/React__default.createElement(Button, {
537
- type: "submit",
538
- loading: loading
539
- }, buttonText), successMessage)))));
540
- }
541
-
542
- function SignUpForm(props) {
543
- const [error, setError] = React__default.useState();
544
- const {
545
- buttonText = 'Sign up',
546
- onSuccess,
547
- onError,
548
- attributes,
549
- beforeMutate
550
- } = props;
551
- const api = useApi();
552
- const mutation = useMutation(async _data => {
553
- setError(undefined);
554
- const possibleData = beforeMutate && beforeMutate(_data);
555
- const data = {
556
- ..._data,
557
- ...possibleData
558
- };
559
- const {
560
- name,
561
- givenName,
562
- familyName,
563
- picture,
564
- email,
565
- password,
566
- newTenantName,
567
- ...metadata
568
- } = data;
569
- if (Object.keys(metadata).length > 0) {
570
- // eslint-disable-next-line no-console
571
- console.warn('additional metadata not supported yet.');
572
- }
573
- return await api.users.createUser({
574
- createBasicUserRequest: {
575
- email,
576
- password,
577
- name,
578
- familyName,
579
- picture,
580
- givenName,
581
- newTenantName
582
- }
583
- });
584
- }, {
585
- onSuccess,
586
- onError: (e, vars) => {
587
- setError(e.message);
588
- onError && onError(e, vars);
589
- }
590
- });
591
- const completeAttributes = React__default.useMemo(() => {
592
- const mainAttributes = [{
593
- name: 'email',
594
- label: 'Email',
595
- type: AttributeType.Email,
596
- defaultValue: '',
597
- required: true
598
- }, {
599
- name: 'password',
600
- label: 'Password',
601
- type: AttributeType.Password,
602
- defaultValue: '',
603
- required: true
604
- }];
605
- if (attributes && attributes.length > 0) {
606
- return mainAttributes.concat(attributes);
607
- }
608
- return mainAttributes;
609
- }, [attributes]);
610
- return /*#__PURE__*/React__default.createElement(Stack, {
611
- gap: 2
612
- }, error ? /*#__PURE__*/React__default.createElement(Alert, {
613
- color: "danger"
614
- }, error) : null, /*#__PURE__*/React__default.createElement(SimpleForm, {
615
- mutation: mutation,
616
- buttonText: buttonText,
617
- attributes: completeAttributes
618
- }));
619
- }
620
-
621
- function SignInForm(props) {
622
- const [error, setError] = React__default.useState();
623
- const {
624
- attributes,
625
- onSuccess,
626
- onError,
627
- beforeMutate,
628
- callbackUrl
629
- } = props;
630
- const mutation = useMutation(async _data => {
631
- setError(undefined);
632
- const d = {
633
- ..._data,
634
- callbackUrl
635
- };
636
- const possibleData = beforeMutate && beforeMutate(d);
637
- const data = possibleData ?? d;
638
- signIn('credentials', data);
639
- }, {
640
- onSuccess,
641
- onError
642
- });
643
- const completeAttributes = React__default.useMemo(() => {
644
- const mainAttributes = [{
645
- name: 'email',
646
- label: 'Email',
647
- type: AttributeType.Text,
648
- defaultValue: '',
649
- required: true
650
- }, {
651
- name: 'password',
652
- label: 'Password',
653
- type: AttributeType.Password,
654
- defaultValue: '',
655
- required: true
656
- }];
657
- if (attributes && attributes.length > 0) {
658
- return mainAttributes.concat(attributes);
659
- }
660
- return mainAttributes;
661
- }, [attributes]);
662
- return /*#__PURE__*/React__default.createElement(Stack, {
663
- gap: 2
664
- }, error ? /*#__PURE__*/React__default.createElement(Alert, {
665
- color: "danger"
666
- }, error) : null, /*#__PURE__*/React__default.createElement(SimpleForm, {
667
- mutation: mutation,
668
- buttonText: "Log in",
669
- attributes: completeAttributes
670
- }));
671
- }
672
-
673
- /* eslint-disable @typescript-eslint/no-explicit-any */
674
- function AddUser(props) {
675
- const {
676
- open,
677
- setOpen,
678
- refetch
679
- } = props;
680
- const {
681
- tenantId
682
- } = useNileConfig();
683
- const api = useApi();
684
- const [errorText, setErrorText] = React__default.useState();
685
- const {
686
- watch,
687
- register,
688
- handleSubmit
689
- } = useForm();
690
- const email = watch('email');
691
- React__default.useEffect(() => {
692
- if (errorText != null) {
693
- setErrorText();
694
- }
695
- // if email changes, no more error
696
- // eslint-disable-next-line react-hooks/exhaustive-deps
697
- }, [email]);
698
- const mutation = useMutation(data => api.users.createTenantUser({
699
- createBasicUserRequest: data,
700
- tenantId: String(tenantId)
701
- }), {
702
- onSuccess(data) {
703
- refetch && refetch(data);
704
- setOpen(false);
705
- },
706
- onError(e) {
707
- if (e instanceof Error) {
708
- setErrorText(e.message);
709
- }
710
- }
711
- });
712
- const handleUpdate = React__default.useCallback(async data => {
713
- setErrorText('');
714
- mutation.mutate(data);
715
- }, [mutation]);
716
- return /*#__PURE__*/React__default.createElement(Modal, {
717
- open: open
718
- }, /*#__PURE__*/React__default.createElement(ModalDialog, null, /*#__PURE__*/React__default.createElement(Stack$1, {
719
- spacing: 2
720
- }, /*#__PURE__*/React__default.createElement(Typography$1, {
721
- level: "h4"
722
- }, "Create user"), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, errorText && /*#__PURE__*/React__default.createElement(Typography$1, {
723
- color: "danger"
724
- }, errorText)), /*#__PURE__*/React__default.createElement(Stack$1, {
725
- component: "form",
726
- sx: {
727
- width: '40ch'
728
- },
729
- spacing: 1,
730
- onSubmit: handleSubmit(data => handleUpdate(data))
731
- }, /*#__PURE__*/React__default.createElement(FormControl$1, {
732
- sx: {
733
- '--FormHelperText-color': 'var(--joy-palette-danger-500)'
734
- }
735
- }, /*#__PURE__*/React__default.createElement(FormLabel$1, {
736
- htmlFor: "email"
737
- }, "Email"), /*#__PURE__*/React__default.createElement(Input$1, {
738
- ...register('email'),
739
- fullWidth: true,
740
- size: "lg",
741
- id: "email",
742
- name: "email",
743
- autoComplete: "current-email",
744
- required: true,
745
- error: Boolean(errorText)
746
- })), /*#__PURE__*/React__default.createElement(FormControl$1, {
747
- sx: {
748
- '--FormHelperText-color': 'var(--joy-palette-danger-500)'
749
- }
750
- }, /*#__PURE__*/React__default.createElement(FormLabel$1, {
751
- htmlFor: "password"
752
- }, "Password"), /*#__PURE__*/React__default.createElement(Input$1, {
753
- ...register('password'),
754
- fullWidth: true,
755
- size: "lg",
756
- id: "password",
757
- autoComplete: "current-password",
758
- type: "password",
759
- required: true
760
- })), /*#__PURE__*/React__default.createElement(Stack$1, {
761
- direction: "row",
762
- sx: {
763
- pt: 2
764
- },
765
- spacing: 2
766
- }, /*#__PURE__*/React__default.createElement(Button$1, {
767
- onClick: () => setOpen(false),
768
- variant: "plain"
769
- }, "Cancel"), /*#__PURE__*/React__default.createElement(Button$1, {
770
- type: "submit"
771
- }, "Create"))))));
772
- }
773
-
774
- function CreateUser(props) {
775
- const {
776
- allowCreation,
777
- buttonText,
778
- onUserCreateSuccess
779
- } = props;
780
- const [open, setOpen] = useState(false);
781
- if (!allowCreation) {
782
- return null;
783
- }
784
- return /*#__PURE__*/React__default.createElement(Stack, {
785
- alignItems: "flex-end",
786
- gap: 1
787
- }, /*#__PURE__*/React__default.createElement(AddUser, {
788
- open: open,
789
- setOpen: setOpen,
790
- refetch: onUserCreateSuccess
791
- }), /*#__PURE__*/React__default.createElement(Button, {
792
- startDecorator: /*#__PURE__*/React__default.createElement(Add, null),
793
- size: "sm",
794
- onClick: () => setOpen(true)
795
- }, buttonText));
796
- }
797
-
798
- function getColumnSize(column, rows, canvasContext) {
799
- const dataWidthReducer = (longest,
800
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
801
- nextRow) => {
802
- let value = nextRow[String(column)];
803
- if (value == null) {
804
- value = '';
805
- }
806
- value = value?.toString();
807
- return longest.length > value.length ? longest : value;
808
- };
809
- let columnHeaderLen = canvasContext && column ? canvasContext.measureText(String(column)).width : 50;
810
- /* padding 12, icon-width 15 */
811
- columnHeaderLen += 15 + 12;
812
- let width = columnHeaderLen;
813
- width = 16 + Math.ceil(canvasContext ? canvasContext.measureText(rows.reduce(dataWidthReducer, '')).width : 50);
814
- if (width < columnHeaderLen) {
815
- width = columnHeaderLen;
816
- }
817
- /* Gracefull */
818
- width += 8;
819
- return width;
820
- }
821
-
822
- function useTextSizer() {
823
- const [ctx, setCtx] = useState();
824
- useEffect(() => {
825
- const canvas = document.createElement('canvas');
826
- const canvasContext = canvas.getContext('2d');
827
- if (canvasContext) {
828
- canvasContext.font = '18px Roboto';
829
- setCtx(canvasContext);
830
- }
831
- }, []);
832
- return ctx;
833
- }
834
-
835
- const makeRenderable = vals => {
836
- return Object.keys(vals).reduce((cleaned, key) => {
837
- const val = vals[key];
838
- if (val instanceof Set) {
839
- cleaned[key] = Array.from(val).join(', ');
840
- } else if (Array.isArray(val)) {
841
- cleaned[key] = val.join(', ');
842
- } else {
843
- cleaned[key] = val;
844
- }
845
- return cleaned;
846
- }, {});
847
- };
848
- const parseResults = (data, ctx, include) => {
849
- if (!data) {
850
- return [[], []];
851
- }
852
- const rows = data.map(makeRenderable);
853
- const fields = Object.keys(rows[0]);
854
- const existentCols = {};
855
- const mapCols = col => {
856
- const width = getColumnSize(col, rows, ctx);
857
- const name = col.slice();
858
- if (include.includes(name)) {
859
- // add spaces to the end of column names so they are not duplicated in the UI
860
- if (existentCols[name] == null) {
861
- existentCols[name] = name.length;
862
- } else {
863
- existentCols[name] += 1;
864
- }
865
- return {
866
- field: name.padEnd(existentCols[name]),
867
- headerName: name.padEnd(existentCols[name]),
868
- width
869
- };
870
- }
871
- };
872
- const cols = fields?.map(mapCols).filter(Boolean) ?? [];
873
- return [cols, rows];
874
- };
875
- function useDataParser(data, include) {
876
- const ctx = useTextSizer();
877
- const [cols, rows] = useMemo(() => parseResults(data, ctx, include), [data, ctx, include]);
878
- return [cols, rows];
879
- }
880
-
881
- function UserList(props) {
882
- const {
883
- data,
884
- allowCreation = true,
885
- buttonText = 'Add a user',
886
- onUserCreateSuccess,
887
- slots,
888
- include = ['email', 'preferredName']
889
- } = props;
890
- const dataGridSx = {
891
- width: '100%',
892
- height: '100%',
893
- ...(slots?.dataGrid ?? {})
894
- };
895
- const [columns, rows] = useDataParser(data, include);
896
- return /*#__PURE__*/React__default.createElement(Stack, {
897
- flex: 1
898
- }, /*#__PURE__*/React__default.createElement(CreateUser, {
899
- allowCreation: allowCreation,
900
- buttonText: buttonText,
901
- onUserCreateSuccess: onUserCreateSuccess
902
- }), /*#__PURE__*/React__default.createElement(DataGrid, {
903
- sx: dataGridSx,
904
- rows: rows,
905
- columns: columns,
906
- hideFooter: true
907
- }));
908
- }
909
-
910
- export { AttributeType as FormAttributeType, GoogleSSOButton as Google, NileProvider, SignInForm, SignUpForm, UserList as UserTenantList, useApi };
911
- //# sourceMappingURL=react.esm.js.map