@zesty-io/material 0.2.5 → 0.3.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.
- package/es/ConfirmDialog/ConfirmDialog.stories.d.ts +6 -0
- package/es/ConfirmDialog/ConfirmDialog.stories.js +24 -0
- package/es/ConfirmDialog/index.d.ts +18 -0
- package/es/ConfirmDialog/index.js +11 -0
- package/es/ConfirmModal/ConfirmModal.stories.d.ts +6 -0
- package/es/ConfirmModal/ConfirmModal.stories.js +24 -0
- package/es/ConfirmModal/index.d.ts +18 -0
- package/es/ConfirmModal/index.js +11 -0
- package/es/CopyButton/CopyButton.stories.d.ts +5 -0
- package/es/CopyButton/CopyButton.stories.js +14 -0
- package/es/CopyButton/index.d.ts +10 -0
- package/es/CopyButton/index.js +26 -0
- package/es/FieldTypeColor/FieldTypeColor.stories.d.ts +5 -0
- package/es/FieldTypeColor/FieldTypeColor.stories.js +21 -0
- package/es/FieldTypeColor/index.d.ts +6 -0
- package/es/FieldTypeColor/index.js +16 -0
- package/es/FieldTypeDate/FieldTypeDate.stories.d.ts +5 -0
- package/es/FieldTypeDate/FieldTypeDate.stories.js +17 -0
- package/es/FieldTypeDate/index.d.ts +9 -0
- package/es/FieldTypeDate/index.js +10 -0
- package/es/FieldTypeDateTime/FieldTypeDateTime.stories.d.ts +5 -0
- package/es/FieldTypeDateTime/FieldTypeDateTime.stories.js +17 -0
- package/es/FieldTypeDateTime/index.d.ts +9 -0
- package/es/FieldTypeDateTime/index.js +10 -0
- package/es/FieldTypeDropdown/FieldTypeDropwdon.stories.d.ts +5 -0
- package/es/FieldTypeDropdown/FieldTypeDropwdon.stories.js +35 -0
- package/es/FieldTypeDropdown/index.d.ts +11 -0
- package/es/FieldTypeDropdown/index.js +10 -0
- package/es/FieldTypeNumber/FieldTypeNumber.stories.d.ts +5 -0
- package/es/FieldTypeNumber/FieldTypeNumber.stories.js +21 -0
- package/es/FieldTypeNumber/index.d.ts +6 -0
- package/es/FieldTypeNumber/index.js +7 -0
- package/es/FieldTypeOneToMany/FieldTypeOneToMany.stories.d.ts +5 -0
- package/es/FieldTypeOneToMany/FieldTypeOneToMany.stories.js +28 -0
- package/es/FieldTypeOneToMany/index.d.ts +32 -0
- package/es/FieldTypeOneToMany/index.js +29 -0
- package/es/FieldTypeOneToOne/FieldTypeOneToOne.stories.d.ts +5 -0
- package/es/FieldTypeOneToOne/FieldTypeOneToOne.stories.js +28 -0
- package/es/FieldTypeOneToOne/index.d.ts +34 -0
- package/es/FieldTypeOneToOne/index.js +33 -0
- package/es/FieldTypeSort/FieldTypeSort.stories.d.ts +5 -0
- package/es/FieldTypeSort/FieldTypeSort.stories.js +22 -0
- package/es/FieldTypeSort/index.d.ts +7 -0
- package/es/FieldTypeSort/index.js +34 -0
- package/es/FieldTypeText/FieldTypeText.stories.d.ts +6 -0
- package/es/FieldTypeText/FieldTypeText.stories.js +29 -0
- package/es/FieldTypeText/index.d.ts +12 -0
- package/es/FieldTypeText/index.js +7 -0
- package/es/FieldTypeUrl/FieldTypeUrl.stories.d.ts +5 -0
- package/es/FieldTypeUrl/FieldTypeUrl.stories.js +21 -0
- package/es/FieldTypeUrl/index.d.ts +12 -0
- package/es/FieldTypeUrl/index.js +14 -0
- package/es/LegacyTheme/index.d.ts +3 -0
- package/es/LegacyTheme/index.js +83 -0
- package/es/LegacyTheme/palette.d.ts +3 -0
- package/es/LegacyTheme/palette.js +23 -0
- package/{src/LegacyTheme/typography.ts → es/LegacyTheme/typography.d.ts} +1 -5
- package/es/LegacyTheme/typography.js +4 -0
- package/es/TextField.stories.d.ts +5 -0
- package/es/TextField.stories.js +18 -0
- package/es/VitualizedAutocomplete/VirtualizedAutocomplete.stories.d.ts +5 -0
- package/es/VitualizedAutocomplete/VirtualizedAutocomplete.stories.js +27 -0
- package/es/VitualizedAutocomplete/index.d.ts +28 -0
- package/es/VitualizedAutocomplete/index.js +21 -0
- package/es/icons/FolderGlobal.d.ts +3 -0
- package/es/icons/FolderGlobal.js +3 -0
- package/es/icons/index.d.ts +1 -0
- package/es/icons/index.js +1 -0
- package/{src/index.ts → es/index.d.ts} +4 -3
- package/es/index.js +15 -0
- package/es/stories/Theme.stories.d.ts +4 -0
- package/es/stories/Theme.stories.js +10 -0
- package/es/theme/Theme.stories.d.ts +4 -0
- package/es/theme/Theme.stories.js +10 -0
- package/es/theme/index.d.ts +11 -0
- package/es/theme/index.js +143 -0
- package/es/theme/palette.d.ts +16 -0
- package/es/theme/palette.js +138 -0
- package/es/theme/typography.d.ts +9 -0
- package/es/theme/typography.js +57 -0
- package/es/utils/virtualization.d.ts +2 -0
- package/es/utils/virtualization.js +63 -0
- package/package.json +12 -10
- package/.storybook/main.js +0 -25
- package/.storybook/preview-head.html +0 -1
- package/.storybook/preview.js +0 -15
- package/src/ConfirmDialog/ConfirmDialog.stories.tsx +0 -35
- package/src/ConfirmDialog/index.tsx +0 -50
- package/src/CopyButton/CopyButton.stories.tsx +0 -20
- package/src/CopyButton/index.tsx +0 -55
- package/src/FieldTypeColor/FieldTypeColor.stories.tsx +0 -35
- package/src/FieldTypeColor/index.tsx +0 -43
- package/src/FieldTypeDate/FieldTypeDate.stories.tsx +0 -23
- package/src/FieldTypeDate/index.tsx +0 -35
- package/src/FieldTypeDateTime/FieldTypeDateTime.stories.tsx +0 -23
- package/src/FieldTypeDateTime/index.tsx +0 -36
- package/src/FieldTypeNumber/FieldTypeNumber.stories.tsx +0 -35
- package/src/FieldTypeNumber/index.tsx +0 -22
- package/src/FieldTypeOneToMany/FieldTypeOneToMany.stories.tsx +0 -47
- package/src/FieldTypeOneToMany/index.tsx +0 -90
- package/src/FieldTypeOneToOne/FieldTypeOneToOne.stories.tsx +0 -46
- package/src/FieldTypeOneToOne/index.tsx +0 -96
- package/src/FieldTypeSort/FieldTypeSort.stories.tsx +0 -36
- package/src/FieldTypeSort/index.tsx +0 -70
- package/src/FieldTypeText/FieldTypeText.stories.tsx +0 -45
- package/src/FieldTypeText/index.tsx +0 -35
- package/src/FieldTypeUrl/FieldTypeUrl.stories.tsx +0 -33
- package/src/FieldTypeUrl/index.tsx +0 -44
- package/src/LegacyTheme/index.ts +0 -88
- package/src/LegacyTheme/palette.ts +0 -25
- package/src/VitualizedAutocomplete/VirtualizedAutocomplete.stories.tsx +0 -45
- package/src/VitualizedAutocomplete/index.tsx +0 -69
- package/src/theme/Theme.stories.tsx +0 -16
- package/src/theme/index.ts +0 -53
- package/src/theme/palette.ts +0 -153
- package/src/theme/typography.ts +0 -69
- package/src/utils/virtualization.tsx +0 -107
- package/tsconfig.json +0 -22
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { Popper, styled, TextField, FormLabel, FormControl, InputAdornment } from '@mui/material';
|
|
4
|
+
import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
|
|
5
|
+
import { ListboxComponent } from '../utils/virtualization';
|
|
6
|
+
const FieldTypeOneToOne = ({ label, helperText, placeholder, error, onOpen, options, required, startAdornment, endAdornment, ...props }) => {
|
|
7
|
+
const [loaded, setLoaded] = useState(false);
|
|
8
|
+
const [loading, setLoading] = useState(false);
|
|
9
|
+
const handleOpen = () => {
|
|
10
|
+
if (!loaded && onOpen) {
|
|
11
|
+
onOpen().then(() => {
|
|
12
|
+
setLoading(false);
|
|
13
|
+
});
|
|
14
|
+
setLoading(true);
|
|
15
|
+
setLoaded(true);
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(Autocomplete, { onOpen: handleOpen, loading: loading, fullWidth: true, disableListWrap: true, disableClearable: true, disablePortal: true, size: 'small', PopperComponent: StyledPopper, ListboxComponent: ListboxComponent, renderInput: (params) => (_jsx(TextField, { ...params, helperText: helperText, error: error, placeholder: placeholder, InputProps: {
|
|
19
|
+
...params.InputProps,
|
|
20
|
+
startAdornment: _jsx(InputAdornment, { position: 'end', children: startAdornment }),
|
|
21
|
+
endAdornment: _jsxs(_Fragment, { children: [params.InputProps.endAdornment, _jsx(InputAdornment, { sx: { position: 'relative', right: '40px' }, position: 'end', children: endAdornment })] })
|
|
22
|
+
} })), options: loading ? [] : options, getOptionLabel: (option) => option.inputLabel, renderOption: (props, option) => [props, option.component], ...props })] }));
|
|
23
|
+
};
|
|
24
|
+
export default FieldTypeOneToOne;
|
|
25
|
+
const StyledPopper = styled(Popper)({
|
|
26
|
+
[`& .${autocompleteClasses.listbox}`]: {
|
|
27
|
+
boxSizing: 'border-box',
|
|
28
|
+
'& ul': {
|
|
29
|
+
padding: 0,
|
|
30
|
+
margin: 0,
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
});
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import FieldTypeSort from './';
|
|
4
|
+
export default {
|
|
5
|
+
title: 'FieldTypeSort',
|
|
6
|
+
component: FieldTypeSort,
|
|
7
|
+
argType: {},
|
|
8
|
+
};
|
|
9
|
+
const Template = (args) => {
|
|
10
|
+
const [value, setValue] = useState('3');
|
|
11
|
+
const handleOnChange = (e) => {
|
|
12
|
+
setValue(e.target.value);
|
|
13
|
+
};
|
|
14
|
+
return (_jsx(FieldTypeSort, { ...args, value: value, onChange: handleOnChange }));
|
|
15
|
+
};
|
|
16
|
+
export const Default = Template.bind({});
|
|
17
|
+
Default.args = {
|
|
18
|
+
placeholder: 'Placeholder Text...',
|
|
19
|
+
label: 'Sort label',
|
|
20
|
+
helperText: 'Sort helper text',
|
|
21
|
+
error: false,
|
|
22
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { OutlinedTextFieldProps } from '@mui/material/TextField';
|
|
3
|
+
export interface FieldTypeSortProps extends Omit<OutlinedTextFieldProps, 'variant'> {
|
|
4
|
+
value: string;
|
|
5
|
+
}
|
|
6
|
+
declare const FieldTypeSort: ({ label, value, InputProps, required, onChange, ...props }: FieldTypeSortProps) => JSX.Element;
|
|
7
|
+
export default FieldTypeSort;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import MuiTextField from '@mui/material/TextField';
|
|
3
|
+
import { Button, FormControl, FormLabel, InputAdornment } from '@mui/material';
|
|
4
|
+
import AddIcon from '@mui/icons-material/Add';
|
|
5
|
+
import RemoveIcon from '@mui/icons-material/Remove';
|
|
6
|
+
const FieldTypeSort = ({ label, value, InputProps, required, onChange, ...props }) => {
|
|
7
|
+
return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'number', value: value, onChange: onChange, InputProps: {
|
|
8
|
+
startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
|
|
9
|
+
e.stopPropagation();
|
|
10
|
+
// References input via click event in order to obtain its value
|
|
11
|
+
const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
|
|
12
|
+
const newValue = String(+input.value - 1);
|
|
13
|
+
// Updates internal input value in case component is not controlled
|
|
14
|
+
input.value = newValue;
|
|
15
|
+
// Mocks an event change
|
|
16
|
+
const event = { target: { value: newValue } };
|
|
17
|
+
onChange && onChange(event);
|
|
18
|
+
}, children: _jsx(RemoveIcon, { fontSize: 'small' }) }) })),
|
|
19
|
+
endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
|
|
20
|
+
e.stopPropagation();
|
|
21
|
+
// References input via click event in order to obtain its value
|
|
22
|
+
const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
|
|
23
|
+
const newValue = String(+input.value + 1);
|
|
24
|
+
// Updates internal input value in case component is not controlled
|
|
25
|
+
input.value = newValue;
|
|
26
|
+
// Mocks an event change
|
|
27
|
+
const event = { target: { value: newValue } };
|
|
28
|
+
onChange && onChange(event);
|
|
29
|
+
}, children: _jsx(AddIcon, { fontSize: 'small' }) }) })),
|
|
30
|
+
// Spread props at the end to allow Input prop overrides
|
|
31
|
+
...InputProps,
|
|
32
|
+
}, ...props })] }));
|
|
33
|
+
};
|
|
34
|
+
export default FieldTypeSort;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Story, Meta } from '@storybook/react/types-6-0';
|
|
2
|
+
import { FieldTypeTextProps } from './';
|
|
3
|
+
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const Default: Story<FieldTypeTextProps>;
|
|
6
|
+
export declare const TextArea: Story<FieldTypeTextProps>;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import FieldTypeText from './';
|
|
4
|
+
export default {
|
|
5
|
+
title: 'FieldTypeText',
|
|
6
|
+
component: FieldTypeText,
|
|
7
|
+
argType: {},
|
|
8
|
+
};
|
|
9
|
+
const Template = (args) => {
|
|
10
|
+
const [value, setValue] = useState('');
|
|
11
|
+
const handleOnChange = (e) => {
|
|
12
|
+
setValue(e.target.value);
|
|
13
|
+
};
|
|
14
|
+
return (_jsx(_Fragment, { children: _jsx(FieldTypeText, { ...args, value: value, onChange: handleOnChange }) }));
|
|
15
|
+
};
|
|
16
|
+
export const Default = Template.bind({});
|
|
17
|
+
Default.args = {
|
|
18
|
+
placeholder: 'Placeholder Text...',
|
|
19
|
+
label: 'Text label',
|
|
20
|
+
helperText: 'Text helper text',
|
|
21
|
+
};
|
|
22
|
+
export const TextArea = Template.bind({});
|
|
23
|
+
TextArea.args = {
|
|
24
|
+
multiline: true,
|
|
25
|
+
rows: 4,
|
|
26
|
+
placeholder: 'Placeholder Text...',
|
|
27
|
+
label: 'Text Label',
|
|
28
|
+
helperText: 'Text helper text',
|
|
29
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { OutlinedTextFieldProps } from '@mui/material/TextField';
|
|
3
|
+
export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, 'variant'> {
|
|
4
|
+
/**
|
|
5
|
+
* Max length of the field
|
|
6
|
+
* @default 150
|
|
7
|
+
*/
|
|
8
|
+
maxLength?: number;
|
|
9
|
+
value: string;
|
|
10
|
+
}
|
|
11
|
+
declare const FieldTypeText: ({ label, maxLength, value, helperText, required, ...props }: FieldTypeTextProps) => JSX.Element;
|
|
12
|
+
export default FieldTypeText;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import MuiTextField from '@mui/material/TextField';
|
|
3
|
+
import { FormControl, FormLabel, Box } from '@mui/material';
|
|
4
|
+
const FieldTypeText = ({ label, maxLength = 150, value, helperText, required, ...props }) => {
|
|
5
|
+
return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsxs(FormLabel, { sx: { display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': { order: 2 } }, children: [_jsx(Box, { sx: { order: 1 }, children: label }), _jsxs(Box, { sx: { order: 3, flex: 1, textAlign: 'right' }, children: [value?.length, "/", maxLength] })] }), _jsx(MuiTextField, { size: "small", variant: 'outlined', value: value, error: value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : helperText, ...props })] }));
|
|
6
|
+
};
|
|
7
|
+
export default FieldTypeText;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import FieldTypeUrl from './';
|
|
4
|
+
export default {
|
|
5
|
+
title: 'FieldTypeUrl',
|
|
6
|
+
component: FieldTypeUrl,
|
|
7
|
+
argType: {},
|
|
8
|
+
};
|
|
9
|
+
const Template = (args) => {
|
|
10
|
+
const [value, setValue] = useState('');
|
|
11
|
+
const handleOnChange = (e) => {
|
|
12
|
+
setValue(e.target.value);
|
|
13
|
+
};
|
|
14
|
+
return (_jsx(FieldTypeUrl, { ...args, value: value, onChange: handleOnChange }));
|
|
15
|
+
};
|
|
16
|
+
export const Default = Template.bind({});
|
|
17
|
+
Default.args = {
|
|
18
|
+
placeholder: 'Placeholder Text...',
|
|
19
|
+
label: 'Some label',
|
|
20
|
+
fullWidth: true,
|
|
21
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { OutlinedTextFieldProps } from '@mui/material/TextField';
|
|
3
|
+
export interface FieldTypeUrlProps extends Omit<OutlinedTextFieldProps, 'variant'> {
|
|
4
|
+
/**
|
|
5
|
+
* Max length of the field
|
|
6
|
+
* @default 2000
|
|
7
|
+
*/
|
|
8
|
+
maxLength?: number;
|
|
9
|
+
value: string;
|
|
10
|
+
}
|
|
11
|
+
declare const FieldTypeUrl: ({ label, maxLength, value, helperText, required, inputProps, ...props }: FieldTypeUrlProps) => JSX.Element;
|
|
12
|
+
export default FieldTypeUrl;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import MuiTextField from '@mui/material/TextField';
|
|
4
|
+
import { FormControl, FormLabel, Box } from '@mui/material';
|
|
5
|
+
const FieldTypeUrl = ({ label, maxLength = 2000, value, helperText, required, inputProps, ...props }) => {
|
|
6
|
+
// Use state to hold input reference to re-render once ref changes in case error needs to be shown on mount
|
|
7
|
+
const [inputRef, setInputRef] = useState();
|
|
8
|
+
return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsxs(FormLabel, { sx: { display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': { order: 2 } }, children: [_jsx(Box, { sx: { order: 1 }, children: label }), _jsxs(Box, { sx: { order: 3, flex: 1, textAlign: 'right' }, children: [value?.length, "/", maxLength] })] }), _jsx(MuiTextField, { size: "small", type: 'url', variant: 'outlined', value: value, inputProps: {
|
|
9
|
+
ref: (inputRef) => setInputRef(inputRef),
|
|
10
|
+
// Spread props at the end to allow inputProps prop overrides
|
|
11
|
+
...inputProps,
|
|
12
|
+
}, error: (value && !inputRef?.validity.valid) || value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef?.validity.valid) ? 'Your input is not a valid url' : helperText, ...props })] }));
|
|
13
|
+
};
|
|
14
|
+
export default FieldTypeUrl;
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
// No checking legacy theme to not have conflicting module augmentation
|
|
2
|
+
// @ts-nocheck
|
|
3
|
+
import palette from './palette';
|
|
4
|
+
import typography from './typography';
|
|
5
|
+
import { createTheme } from '@mui/material/styles';
|
|
6
|
+
let theme = createTheme({
|
|
7
|
+
palette,
|
|
8
|
+
typography,
|
|
9
|
+
});
|
|
10
|
+
theme = createTheme(theme, {
|
|
11
|
+
components: {
|
|
12
|
+
MuiAccordionSummary: {
|
|
13
|
+
styleOverrides: {
|
|
14
|
+
root: {
|
|
15
|
+
backgroundColor: '#e4e9f1',
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
MuiButton: {
|
|
20
|
+
styleOverrides: {
|
|
21
|
+
root: {
|
|
22
|
+
minWidth: 'auto',
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
MuiTooltip: {
|
|
27
|
+
styleOverrides: {
|
|
28
|
+
tooltip: {
|
|
29
|
+
color: theme.palette.primary.contrastText,
|
|
30
|
+
backgroundColor: theme.palette.primary.main,
|
|
31
|
+
fontSize: '14px',
|
|
32
|
+
lineHeight: '20px',
|
|
33
|
+
},
|
|
34
|
+
arrow: {
|
|
35
|
+
color: theme.palette.primary.main,
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
MuiInputBase: {
|
|
40
|
+
styleOverrides: {
|
|
41
|
+
root: {
|
|
42
|
+
backgroundColor: theme.palette.primary.contrastText,
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
MuiFormLabel: {
|
|
47
|
+
styleOverrides: {
|
|
48
|
+
root: {
|
|
49
|
+
color: theme.palette.primary.dark,
|
|
50
|
+
},
|
|
51
|
+
asterisk: {
|
|
52
|
+
color: theme.palette.error.main,
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
MuiCard: {
|
|
57
|
+
styleOverrides: {
|
|
58
|
+
root: {
|
|
59
|
+
overflow: 'visible',
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
MuiCardHeader: {
|
|
64
|
+
styleOverrides: {
|
|
65
|
+
root: {
|
|
66
|
+
backgroundColor: '#e4e9f1',
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
MuiToggleButton: {
|
|
71
|
+
styleOverrides: {
|
|
72
|
+
root: ({ ownerState, theme }) => ({
|
|
73
|
+
backgroundColor: `${theme.palette[ownerState.color].contrastText} !important`,
|
|
74
|
+
...(ownerState.selected && {
|
|
75
|
+
color: `${theme.palette[ownerState.color].contrastText} !important`,
|
|
76
|
+
backgroundColor: `${theme.palette[ownerState.color].main} !important`,
|
|
77
|
+
}),
|
|
78
|
+
}),
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
});
|
|
83
|
+
export default theme;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
const palette = {
|
|
2
|
+
primary: {
|
|
3
|
+
main: '#404759',
|
|
4
|
+
contrastText: '#ffffff',
|
|
5
|
+
},
|
|
6
|
+
secondary: {
|
|
7
|
+
main: '#497edf',
|
|
8
|
+
contrastText: '#ffffff',
|
|
9
|
+
},
|
|
10
|
+
success: {
|
|
11
|
+
main: '#75bf25',
|
|
12
|
+
contrastText: '#ffffff',
|
|
13
|
+
},
|
|
14
|
+
warning: {
|
|
15
|
+
main: '#f17829',
|
|
16
|
+
contrastText: '#ffffff',
|
|
17
|
+
},
|
|
18
|
+
error: {
|
|
19
|
+
main: '#e53c05',
|
|
20
|
+
contrastText: '#ffffff',
|
|
21
|
+
},
|
|
22
|
+
};
|
|
23
|
+
export default palette;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { InputAdornment, TextField, IconButton } from '@mui/material';
|
|
3
|
+
import { Close, Search } from '@mui/icons-material';
|
|
4
|
+
export default {
|
|
5
|
+
title: 'TextField',
|
|
6
|
+
component: TextField,
|
|
7
|
+
argType: {},
|
|
8
|
+
};
|
|
9
|
+
const Template = (args) => {
|
|
10
|
+
return (_jsx(TextField, { ...args, InputProps: {
|
|
11
|
+
startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(IconButton, { size: "small", children: _jsx(Search, { fontSize: "small" }) }) })),
|
|
12
|
+
endAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(IconButton, { size: "small", children: _jsx(Close, { fontSize: "small" }) }) })),
|
|
13
|
+
} }));
|
|
14
|
+
};
|
|
15
|
+
export const Default = Template.bind({});
|
|
16
|
+
Default.args = {
|
|
17
|
+
placeholder: 'Placeholder Text...',
|
|
18
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Story, Meta } from '@storybook/react/types-6-0';
|
|
2
|
+
import { VirtualizedAutocompleteProps } from './';
|
|
3
|
+
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const Default: Story<VirtualizedAutocompleteProps>;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import VirtualizedAutocomplete from './';
|
|
4
|
+
export default {
|
|
5
|
+
title: 'VirtualizedAutocomplete',
|
|
6
|
+
component: VirtualizedAutocomplete,
|
|
7
|
+
argType: {},
|
|
8
|
+
};
|
|
9
|
+
const Template = (args) => {
|
|
10
|
+
const [value, setValue] = useState({ component: '- None -', value: '0', inputLabel: '- None -' });
|
|
11
|
+
const [options, setOptions] = useState([]);
|
|
12
|
+
const handleOnOpen = async () => {
|
|
13
|
+
const largeArr = new Array(1000).fill(null);
|
|
14
|
+
await new Promise((resolve) => setTimeout(resolve, 3000));
|
|
15
|
+
const data = largeArr.map((_, idx) => ({ component: _jsx("div", { children: `Test ${idx}` }), value: String(Math.random()), inputLabel: `Test ${idx}` }));
|
|
16
|
+
setOptions(data);
|
|
17
|
+
};
|
|
18
|
+
const handleOnChange = (e, option) => {
|
|
19
|
+
setValue(option);
|
|
20
|
+
};
|
|
21
|
+
return (_jsx(VirtualizedAutocomplete, { ...args, value: value, onChange: handleOnChange, options: options, onOpen: handleOnOpen }));
|
|
22
|
+
};
|
|
23
|
+
export const Default = Template.bind({});
|
|
24
|
+
Default.args = {
|
|
25
|
+
helperText: 'OneToOne helperText',
|
|
26
|
+
placeholder: 'OneToOne placeholder'
|
|
27
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { AutocompleteProps } from '@mui/material';
|
|
3
|
+
export interface VirtualizedAutocompleteProps extends Omit<AutocompleteProps<any, false, false, false>, 'renderInput'> {
|
|
4
|
+
helperText?: string;
|
|
5
|
+
placeholder?: string;
|
|
6
|
+
error?: boolean;
|
|
7
|
+
startAdornment?: ReactNode;
|
|
8
|
+
endAdornment?: ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* Structure for option
|
|
11
|
+
*/
|
|
12
|
+
options: {
|
|
13
|
+
/**
|
|
14
|
+
* Component to be rendered in the dropdown
|
|
15
|
+
*/
|
|
16
|
+
component: ReactNode | string;
|
|
17
|
+
/**
|
|
18
|
+
* Value of option
|
|
19
|
+
*/
|
|
20
|
+
value: string;
|
|
21
|
+
/**
|
|
22
|
+
* Label that should display in the input when selected
|
|
23
|
+
*/
|
|
24
|
+
inputLabel: string;
|
|
25
|
+
}[];
|
|
26
|
+
}
|
|
27
|
+
declare const VirtualizedAutocomplete: ({ helperText, placeholder, error, startAdornment, endAdornment, ...props }: VirtualizedAutocompleteProps) => JSX.Element;
|
|
28
|
+
export default VirtualizedAutocomplete;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Popper, styled, TextField, InputAdornment } from '@mui/material';
|
|
3
|
+
import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
|
|
4
|
+
import { ListboxComponent } from '../utils/virtualization';
|
|
5
|
+
const VirtualizedAutocomplete = ({ helperText, placeholder, error, startAdornment, endAdornment, ...props }) => {
|
|
6
|
+
return (_jsx(Autocomplete, { fullWidth: true, disableListWrap: true, size: 'small', PopperComponent: StyledPopper, ListboxComponent: ListboxComponent, renderInput: (params) => (_jsx(TextField, { ...params, helperText: helperText, error: error, placeholder: placeholder, InputProps: {
|
|
7
|
+
...params.InputProps,
|
|
8
|
+
startAdornment: _jsx(InputAdornment, { position: 'end', children: startAdornment }),
|
|
9
|
+
endAdornment: _jsxs(_Fragment, { children: [params.InputProps.endAdornment, _jsx(InputAdornment, { sx: { position: 'relative', right: '40px' }, position: 'end', children: endAdornment })] })
|
|
10
|
+
} })), getOptionLabel: (option) => option.inputLabel, renderOption: (props, option) => [props, option.component], ...props }));
|
|
11
|
+
};
|
|
12
|
+
export default VirtualizedAutocomplete;
|
|
13
|
+
const StyledPopper = styled(Popper)({
|
|
14
|
+
[`& .${autocompleteClasses.listbox}`]: {
|
|
15
|
+
boxSizing: 'border-box',
|
|
16
|
+
'& ul': {
|
|
17
|
+
padding: 0,
|
|
18
|
+
margin: 0,
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
});
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { SvgIcon } from "@mui/material";
|
|
3
|
+
export const FolderGlobal = (props) => (_jsxs(SvgIcon, { ...props, children: [_jsx("path", { d: "M10.59 4.59C10.21 4.21 9.7 4 9.17 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6H12L10.59 4.59Z", fill: "#101828", "fill-opacity": "0.4" }), _jsx("g", { "clip-path": "url(#clip0_8594_1046)", children: _jsx("path", { d: "M15.996 8.83325C13.696 8.83325 11.8335 10.6999 11.8335 12.9999C11.8335 15.2999 13.696 17.1666 15.996 17.1666C18.3002 17.1666 20.1668 15.2999 20.1668 12.9999C20.1668 10.6999 18.3002 8.83325 15.996 8.83325ZM18.8835 11.3333H17.6543C17.521 10.8124 17.3293 10.3124 17.0793 9.84992C17.846 10.1124 18.4835 10.6458 18.8835 11.3333ZM16.0002 9.68325C16.346 10.1833 16.6168 10.7374 16.796 11.3333H15.2043C15.3835 10.7374 15.6543 10.1833 16.0002 9.68325ZM12.7752 13.8333C12.7085 13.5666 12.6668 13.2874 12.6668 12.9999C12.6668 12.7124 12.7085 12.4333 12.7752 12.1666H14.1835C14.1502 12.4416 14.1252 12.7166 14.1252 12.9999C14.1252 13.2833 14.1502 13.5583 14.1835 13.8333H12.7752ZM13.1168 14.6666H14.346C14.4793 15.1874 14.671 15.6874 14.921 16.1499C14.1543 15.8874 13.5168 15.3583 13.1168 14.6666ZM14.346 11.3333H13.1168C13.5168 10.6416 14.1543 10.1124 14.921 9.84992C14.671 10.3124 14.4793 10.8124 14.346 11.3333ZM16.0002 16.3166C15.6543 15.8166 15.3835 15.2624 15.2043 14.6666H16.796C16.6168 15.2624 16.346 15.8166 16.0002 16.3166ZM16.9752 13.8333H15.0252C14.9877 13.5583 14.9585 13.2833 14.9585 12.9999C14.9585 12.7166 14.9877 12.4374 15.0252 12.1666H16.9752C17.0127 12.4374 17.0418 12.7166 17.0418 12.9999C17.0418 13.2833 17.0127 13.5583 16.9752 13.8333ZM17.0793 16.1499C17.3293 15.6874 17.521 15.1874 17.6543 14.6666H18.8835C18.4835 15.3541 17.846 15.8874 17.0793 16.1499ZM17.8168 13.8333C17.8502 13.5583 17.8752 13.2833 17.8752 12.9999C17.8752 12.7166 17.8502 12.4416 17.8168 12.1666H19.2252C19.2918 12.4333 19.3335 12.7124 19.3335 12.9999C19.3335 13.2874 19.2918 13.5666 19.2252 13.8333H17.8168Z", fill: "white" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_8594_1046", children: _jsx("rect", { width: "10", height: "10", fill: "white", transform: "translate(11 8)" }) }) })] }));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { FolderGlobal } from "./FolderGlobal";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { FolderGlobal } from "./FolderGlobal";
|
|
@@ -7,8 +7,9 @@ export { default as FieldTypeDate } from './FieldTypeDate';
|
|
|
7
7
|
export { default as FieldTypeDateTime } from './FieldTypeDateTime';
|
|
8
8
|
export { default as FieldTypeColor } from './FieldTypeColor';
|
|
9
9
|
export { default as FieldTypeNumber } from './FieldTypeNumber';
|
|
10
|
-
export { default as FieldTypeOneToOne} from './FieldTypeOneToOne';
|
|
11
|
-
export { default as FieldTypeOneToMany} from './FieldTypeOneToMany';
|
|
10
|
+
export { default as FieldTypeOneToOne } from './FieldTypeOneToOne';
|
|
11
|
+
export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
|
|
12
12
|
export { default as CopyButton } from './CopyButton';
|
|
13
13
|
export { default as ConfirmDialog } from './ConfirmDialog';
|
|
14
|
-
export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';
|
|
14
|
+
export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';
|
|
15
|
+
export * from './icons';
|
package/es/index.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export { default as legacyTheme } from './LegacyTheme';
|
|
2
|
+
export { default as theme } from './theme';
|
|
3
|
+
export { default as FieldTypeText } from './FieldTypeText';
|
|
4
|
+
export { default as FieldTypeSort } from './FieldTypeSort';
|
|
5
|
+
export { default as FieldTypeUrl } from './FieldTypeUrl';
|
|
6
|
+
export { default as FieldTypeDate } from './FieldTypeDate';
|
|
7
|
+
export { default as FieldTypeDateTime } from './FieldTypeDateTime';
|
|
8
|
+
export { default as FieldTypeColor } from './FieldTypeColor';
|
|
9
|
+
export { default as FieldTypeNumber } from './FieldTypeNumber';
|
|
10
|
+
export { default as FieldTypeOneToOne } from './FieldTypeOneToOne';
|
|
11
|
+
export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
|
|
12
|
+
export { default as CopyButton } from './CopyButton';
|
|
13
|
+
export { default as ConfirmDialog } from './ConfirmDialog';
|
|
14
|
+
export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';
|
|
15
|
+
export * from './icons';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import ReactJson from 'react-json-view';
|
|
3
|
+
import theme from '../theme';
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Theme',
|
|
6
|
+
};
|
|
7
|
+
const Template = (args) => {
|
|
8
|
+
return (_jsx(ReactJson, { src: theme }));
|
|
9
|
+
};
|
|
10
|
+
export const Default = Template.bind({});
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import ReactJson from 'react-json-view';
|
|
3
|
+
import theme from '.';
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Theme',
|
|
6
|
+
};
|
|
7
|
+
const Template = (args) => {
|
|
8
|
+
return (_jsx(ReactJson, { src: theme }));
|
|
9
|
+
};
|
|
10
|
+
export const Default = Template.bind({});
|