@arquimedes.co/eureka-forms 2.0.32-test → 2.0.34-test

package/dist/mjs/Shared/RoundedDatePicker/RoundedDatePicker.stories.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/preview-api';
+import RoundedDatePicker from './RoundedDatePicker';
+import { within, screen } from '@storybook/testing-library';
+import { userEvent } from '@storybook/testing-library';
+const meta = {
+    component: RoundedDatePicker,
+    tags: ['autodocs'],
+    args: {
+        focusColor: '#3d5a7f',
+        secondaryColor: '#98c1d9',
+        helperTextColor: '#989898',
+        outlineColor: '#0000003b',
+        backgroundColor: '#ffffff',
+        textColor: '#293241',
+        contrastColor: '#ee6c4d',
+        accentColor: '#293241',
+        errorColor: '#cc2936',
+        fontSize: '1rem',
+        fontWeight: '300',
+        cantEdit: false,
+    },
+    parameters: {
+        date: new Date('07-21-2021'),
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        value: null,
+    },
+};
+export const Default = {
+    args: {
+        label: 'Label',
+        value: new Date('07-21-2021'),
+    },
+};
+export const ValueAndLabel = {
+    args: {
+        label: 'Label',
+        value: null,
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return (_jsx(RoundedDatePicker, { ...args, ref: args.ref, onChange: onValueChange }));
+    },
+};
+export const Full = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+    },
+};
+export const FullDateTime = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        pickTime: true,
+    },
+};
+export const Error = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+export const Menu = {
+    args: {
+        label: 'Label',
+        value: null,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+    },
+};
+export const DateTimeDateMenu = {
+    args: {
+        label: 'Label',
+        value: null,
+        pickTime: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+    },
+};
+export const DateTimeTimeMenu = {
+    args: {
+        label: 'Label',
+        value: null,
+        pickTime: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+        const time = screen.getByText('12', {
+            selector: 'h3',
+        });
+        await userEvent.click(time);
+    },
+};
+export const ErrorColor = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        error: true,
+        errorColor: 'blue',
+    },
+};
+export const DifferentColors = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        helperTextColor: 'green',
+        outlineColor: 'purple',
+        backgroundColor: 'red',
+        textColor: 'blue',
+    },
+    render: function Component(args) {
+        return _jsx(RoundedDatePicker, { ...args, ref: args.ref });
+    },
+};

package/dist/mjs/Shared/RoundedSelect/RoundedSelect.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import { SelectProps } from '@material-ui/core/Select';
+interface StyleProps {
+    /** The color of the outline when selected and hovered on */
+    focusColor?: string;
+    /** The color of the outline when it is not selected */
+    outlineColor?: string;
+    /** The color of the background  */
+    backgroundColor?: string;
+    /** The color of the error to display */
+    errorColor?: string;
+    /** If the style should change on hover */
+    cantEdit?: boolean;
+    /** The hight of the container */
+    height?: string;
+    /** The color of the text in the form */
+    color?: string;
+    /** The fontsize of the content */
+    fontSize?: string;
+    /** The weight of the font of the value and the placeholder */
+    fontWeight?: any;
+    /** If input is readOnly */
+    readOnly?: boolean;
+    /** The color of the helper text when not error */
+    helperTextColor?: string;
+    /** The borderRadius of the input */
+    borderRadius?: number;
+    /** The padding to the left of the input */
+    paddingLeft?: number;
+    /** The padding to the right of the input */
+    paddingRight?: number;
+    /** If custom icon exists and should be displayed */
+    showIcon?: boolean;
+}
+interface RoundedSelectProps extends Omit<SelectProps, 'color'>, StyleProps {
+    /** children to display in the options */
+    children?: any;
+    /** Currently selected value */
+    value: any;
+    /** function called when value changes */
+    handleUpdate?: (event: React.ChangeEvent<{
+        name?: string | undefined;
+        value: any;
+    }>, child?: React.ReactNode) => void;
+    /** String to place in the label */
+    label?: string;
+    /** Minimum width in px of the component */
+    minWidth?: number;
+    /** The color of the outline when selected and hovered on */
+    focusColor?: string;
+    /** If outline should be error color */
+    highlightError?: boolean;
+    /** The helper Text to display */
+    helperText?: string;
+    /** the margin around the selector */
+    containerMargin?: string;
+    /** The icon to display */
+    iconComponent?: any;
+    /** the components ref */
+    ref?: any;
+}
+/**
+ * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
+ */
+declare class RoundedSelect extends React.Component<RoundedSelectProps> {
+    render(): JSX.Element;
+}
+export default RoundedSelect;

package/dist/mjs/Shared/RoundedSelect/RoundedSelect.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import Select from '@material-ui/core/Select';
+import { FormHelperText } from '@material-ui/core';
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+    formControl: {
+        margin: theme.spacing(1),
+        minWidth: 120,
+    },
+    selectEmpty: {
+        marginTop: theme.spacing(2),
+    },
+}));
+const useOutlinedInputStyles = (props) => makeStyles({
+    root: {
+        cursor: props.cantEdit ? 'default' : 'default',
+        height: props.height,
+        borderRadius: props.borderRadius,
+        backgroundColor: props.backgroundColor,
+        fontSize: props.fontSize,
+        '& $notchedOutline': {
+            borderColor: props.outlineColor,
+            '& legend': {
+                fontSize: 'calc(' + props.fontSize + ' * 0.75)',
+            },
+        },
+        '&:hover $notchedOutline': {
+            borderColor: props.cantEdit
+                ? props.outlineColor
+                : props.focusColor,
+        },
+        '& .Mui-disabled': {
+            cursor: 'default',
+            color: props.color,
+            pointerEvents: 'none',
+        },
+        '& .Mui-error': {
+            color: props.errorColor,
+        },
+        '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
+            borderColor: props.outlineColor,
+        },
+        '&.Mui-disabled .EF-MuiOutlinedInput-notchedOutline': {
+            borderColor: props.outlineColor,
+        },
+        '& .EF-MuiSelect-root': {
+            paddingLeft: props.paddingLeft,
+            paddingRight: props.paddingRight,
+        },
+        '&$focused $notchedOutline': {
+            borderColor: props.focusColor,
+        },
+        '& .EF-MuiSelect-icon': {
+            color: props.color?.startsWith('#')
+                ? props.color + '8a'
+                : props.color,
+        },
+        '& .EF-MuiSelect-icon.Mui-disabled': {
+            color: props.outlineColor,
+        },
+        '& .EF-MuiSelect-icon.iconOutlined': {
+            right: 8,
+        },
+        '& .EF-MuiSelect-iconOpen': {
+            transform: props.showIcon ? 'none' : 'rotate(180deg)',
+        },
+        color: props.color,
+    },
+    focused: {},
+    notchedOutline: {},
+});
+const useLabelInputStyles = (props) => makeStyles(() => ({
+    focused: {
+        color: props.focusColor + ' !important',
+    },
+    root: {
+        color: props.color?.startsWith('#')
+            ? props.color + '8a'
+            : props.color,
+        fontWeight: props.fontWeight,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        maxWidth: 'calc(100% - 45px)',
+        textOverflow: 'ellipsis',
+        marginTop: props.height != '40px' ? '-4px' : '0px',
+        '&.EF-MuiInputLabel-shrink': {
+            marginTop: '0px',
+            maxWidth: 'calc(100% - 5px)',
+        },
+        '& .Mui-error': {
+            color: props.errorColor,
+        },
+        '&.Mui-error': {
+            color: props.errorColor,
+        },
+    },
+}));
+const useHelperTextStyles = (props) => makeStyles(() => ({
+    root: {
+        color: props.helperTextColor,
+        '&.Mui-error': {
+            color: props.errorColor,
+        },
+    },
+}));
+function CustomSelect({ children, value = '', handleUpdate, label, minWidth, helperText, color = '#293241', errorColor = '#cc2936', focusColor = '#3d5a7f', outlineColor = '#0000003b', helperTextColor = '#989898', backgroundColor = '#ffffff', readOnly = false, borderRadius = 10, paddingLeft = 14, paddingRight = 32, cantEdit = false, showIcon = true, containerMargin = '8px', height = '40px', fontSize = '1rem', required, iconComponent, error, ...others }) {
+    const styleProps = {
+        color,
+        height,
+        readOnly,
+        fontSize,
+        cantEdit,
+        errorColor,
+        focusColor,
+        paddingLeft,
+        paddingRight,
+        outlineColor,
+        borderRadius,
+        helperTextColor,
+        backgroundColor,
+        showIcon: showIcon && iconComponent !== undefined,
+    };
+    const classes = useStyles();
+    const outlinedInputClasses = useOutlinedInputStyles(styleProps)();
+    const labelClasses = useLabelInputStyles(styleProps)();
+    const helperTextClasses = useHelperTextStyles(styleProps)();
+    const [open, setOpen] = useState(false);
+    return (_jsxs(FormControl, { variant: "outlined", className: classes.formControl, size: "small", style: minWidth !== undefined
+            ? { minWidth, outlineColor, margin: containerMargin }
+            : {
+                margin: containerMargin,
+            }, fullWidth: true, required: required, error: error, children: [label && _jsx(InputLabel, { classes: labelClasses, children: label }), _jsx(Select, { ...others, value: value, MenuProps: {}, onChange: handleUpdate, ...(showIcon && iconComponent
+                    ? { IconComponent: iconComponent }
+                    : {}), open: open, onFocus: (e) => {
+                    if (!e.relatedTarget?.closest('.EF-MuiPaper-root')) {
+                        setOpen(true);
+                    }
+                }, onClose: () => {
+                    setOpen(false);
+                }, onOpen: () => {
+                    setOpen(true);
+                }, input: _jsx(OutlinedInput, { disabled: cantEdit, name: label, label: label ? label + (required ? ' *' : '') : undefined, classes: outlinedInputClasses }), children: children }), helperText !== undefined && (_jsx(FormHelperText, { classes: helperTextClasses, children: helperText }))] }));
+}
+/**
+ * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
+ */
+class RoundedSelect extends React.Component {
+    render() {
+        return _jsx(CustomSelect, { ...this.props });
+    }
+}
+export default RoundedSelect;

package/dist/mjs/Shared/RoundedSelect/RoundedSelect.stories.d.ts

@@ -0,0 +1,28 @@
+import type { StoryObj } from '@storybook/react';
+import RoundedSelect from './RoundedSelect';
+declare const meta: {
+    component: typeof RoundedSelect;
+    tags: string[];
+    args: {
+        focusColor: string;
+        helperTextColor: string;
+        outlineColor: string;
+        backgroundColor: string;
+        color: string;
+        readOnly: false;
+        borderRadius: number;
+        fontSize: string;
+        errorColor: string;
+        fontWeight: string;
+        cantEdit: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Empty: Story;
+export declare const Default: Story;
+export declare const ValueAndLabel: Story;
+export declare const Full: Story;
+export declare const Error: Story;
+export declare const ErrorColor: Story;
+export declare const DifferentColors: Story;

package/dist/mjs/Shared/RoundedSelect/RoundedSelect.stories.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/preview-api';
+import RoundedSelect from './RoundedSelect';
+import { MenuItem } from '@material-ui/core';
+const meta = {
+    component: RoundedSelect,
+    tags: ['autodocs'],
+    args: {
+        focusColor: '#3d5a7f',
+        helperTextColor: '#989898',
+        outlineColor: '#0000003b',
+        backgroundColor: '#ffffff',
+        color: '#293241',
+        readOnly: false,
+        borderRadius: 10,
+        fontSize: '1rem',
+        errorColor: '#cc2936',
+        fontWeight: '300',
+        cantEdit: false,
+    },
+};
+export default meta;
+export const Empty = {
+    args: {},
+};
+export const Default = {
+    args: {
+        label: 'Label',
+    },
+};
+export const ValueAndLabel = {
+    args: {
+        label: 'Label',
+        value: 'option',
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.handleUpdate?.(value);
+            setArgs({ value });
+        };
+        return (_jsx(RoundedSelect, { ...args, handleUpdate: onValueChange, children: _jsx(MenuItem, { value: 'option', style: { whiteSpace: 'normal' }, children: "Option" }) }));
+    },
+};
+export const Full = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+    },
+};
+export const Error = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+export const ErrorColor = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+        error: true,
+        errorColor: 'blue',
+    },
+};
+export const DifferentColors = {
+    args: {
+        label: 'Label',
+        value: 'option',
+        helperText: 'Helper text',
+        helperTextColor: 'green',
+        outlineColor: 'purple',
+        backgroundColor: 'red',
+        color: 'blue',
+    },
+    render: function Component(args) {
+        return (_jsx(RoundedSelect, { ...args, children: _jsx(MenuItem, { value: 'option', style: { whiteSpace: 'normal' }, children: "Option" }) }));
+    },
+};

package/dist/mjs/Shared/RoundedSmartSelect/RoundedSmartSelect.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { TextFieldProps } from '@material-ui/core';
+interface StyleProps {
+    /** The color of the outline when selected and hovered on */
+    focusColor?: string;
+    /** The color of the outline when it is not selected */
+    outlineColor?: string;
+    /** The color of the background  */
+    backgroundColor?: string;
+    /** The color of the error to display */
+    errorColor?: string;
+    /** If the style should change on hover */
+    cantEdit?: boolean;
+    /** The hight of the container */
+    height?: string;
+    /** The color of the text in the form */
+    color?: string;
+    /** The fontsize of the content */
+    fontSize?: string;
+    /** The borderRadius of the input */
+    borderRadius?: number;
+    /** If input is readOnly */
+    readOnly?: boolean;
+    /** The weight of the font of the value and the placeholder */
+    fontWeight?: number | string;
+    /** The color of the helper text when not error */
+    helperTextColor?: string;
+    /** If custom icon exists and should be displayed */
+    showIcon?: boolean;
+    /** If the selector is completely hidden */
+    hidden?: boolean;
+}
+export interface RoundedSmartSelectProps extends Omit<TextFieldProps, 'color' | 'onFocus'>, StyleProps {
+    /** Currently selected value */
+    value: any;
+    /** The array of options to display */
+    options?: any[];
+    /** If the input is loading */
+    loading?: boolean;
+    /** function called when value changes */
+    handleUpdate?: (value: any) => void;
+    /** Strig to place in the label */
+    label: string;
+    /** The helper Text to display */
+    helperText?: string;
+    /** The margin around the selector */
+    containerMargin?: string;
+    /** The icon to display */
+    icon?: React.ReactNode;
+    /** If the options are searchable */
+    searchable?: boolean;
+    /** If can create new option */
+    creatable?: boolean;
+    /** Function to determine the currently selected option */
+    getOptionSelected?: (option: any, value: any) => boolean;
+    /** Function to determine the current value in string format */
+    getValueString?: (value: any) => string;
+    /** Function called on each value change */
+    changeListener?: (value: any) => void;
+    onFocus?: any;
+}
+export default function RoundedSmartSelect({ options, value, handleUpdate, label, getValueString, color, errorColor, focusColor, helperTextColor, outlineColor, backgroundColor, cantEdit, loading, height, fontSize, required, changeListener, error, getOptionSelected, helperText, readOnly, borderRadius, fontWeight, icon, searchable, containerMargin, showIcon, inputRef, disabled, hidden, creatable, onBlur, name, onFocus, }: RoundedSmartSelectProps): JSX.Element;
+export {};