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

package/src/Shared/RoundedButton/RoundedButton.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Button, withStyles } from '@material-ui/core';
+
+interface ComponentProps {
+    /** Button text */
+    text: string;
+    /** Background Color */
+    backgroundColor?: string;
+    /** Font Color */
+    color?: string;
+    /** Button Click Handle */
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    /** If button is disabled */
+    disabled?: boolean;
+    /** Text font size */
+    fontSize?: number | string;
+    /** Button padding '0 13px 0 13px' format */
+    padding?: string;
+    /** border radius */
+    borderRadius?: number;
+    /** Component height */
+    height?: number;
+    /** If text is bold */
+    bold?: boolean;
+    /** The width of the button */
+    width?: string;
+}
+
+/**
+ * Generic rounded button
+ */
+function RoundedButton({
+    text,
+    backgroundColor = '#3d5a7f',
+    color = '#ffffff',
+    onClick,
+    disabled,
+    fontSize = '1rem',
+    padding = '0 13px 0 13px',
+    borderRadius = 10,
+    height = 28,
+    bold = false,
+    width = 'fit-content',
+}: ComponentProps): JSX.Element {
+    const CustomButton = withStyles({
+        root: {
+            width,
+            textTransform: 'none',
+            fontFamily: 'inherit',
+            fontSize,
+            borderRadius,
+            padding,
+            height: height,
+            boxShadow: 'none',
+            backgroundColor,
+            color,
+            '&:hover': {
+                boxShadow: 'none',
+                backgroundColor,
+            },
+            '&:disabled': {
+                backgroundColor,
+                color,
+                opacity: 0.5,
+            },
+            fontWeight: bold ? 'bold' : 'normal',
+        },
+    })(Button);
+
+    return (
+        <CustomButton
+            variant="contained"
+            onMouseDown={onClick}
+            disabled={disabled}
+        >
+            {text}
+        </CustomButton>
+    );
+}
+export default RoundedButton;

package/src/Shared/RoundedCheckBox/RoundedCheckBox.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import RoundedCheckBox from './RoundedCheckBox';
+
+const meta = {
+    component: RoundedCheckBox,
+    tags: ['autodocs'],
+    args: {
+        checkedColor: '#3d5a7f',
+        uncheckedColor: '#787878',
+        disabledColor: '#A0A0A0',
+        size: '1.5rem',
+        errorColor: '#cc2936',
+    },
+} satisfies Meta<typeof RoundedCheckBox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Uncheked: Story = {
+    args: {
+        checked: false,
+    },
+};
+
+export const Checked: Story = {
+    args: {
+        checked: true,
+    },
+};
+
+export const Error: Story = {
+    args: {
+        checked: false,
+        error: true,
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        checked: false,
+        disabled: true,
+    },
+};
+
+export const ErrorColor: Story = {
+    args: {
+        checked: false,
+        error: true,
+        errorColor: 'blue',
+    },
+};
+
+export const DifferentColors: Story = {
+    args: {
+        checked: true,
+        checkedColor: 'red',
+        uncheckedColor: 'blue',
+        disabledColor: '#A0A0A0',
+    },
+};

package/src/Shared/RoundedCheckBox/RoundedCheckBox.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Checkbox, CheckboxProps, makeStyles } from '@material-ui/core';
+import CheckBoxRoundedIcon from '@material-ui/icons/CheckBoxRounded';
+import CheckBoxOutlineBlankRoundedIcon from '@material-ui/icons/CheckBoxOutlineBlankRounded';
+import { ClassNameMap } from '@material-ui/core/styles/withStyles';
+interface StyleProps {
+    error?: boolean;
+    padding?: string;
+    uncheckedColor?: string;
+    checkedColor?: string;
+    checkedHoverColor?: string;
+    errorColor?: string;
+    disabledColor?: string;
+    size?: number | string;
+    cantEdit?: boolean;
+}
+
+const useCheckBoxStyles = (props: StyleProps): (() => ClassNameMap) =>
+    makeStyles(() => ({
+        root: {
+            padding: props.padding,
+            fontSize: props.size,
+            color: props.error ? props.errorColor : props.uncheckedColor,
+            '&.Mui-checked': {
+                color: props.checkedColor,
+            },
+            '&.Mui-checked:hover': {
+                backgroundColor: props.checkedHoverColor,
+            },
+            '&.Mui-disabled': {
+                cursor: 'default',
+                pointerEvents: 'all !important',
+                color: props.cantEdit
+                    ? props.disabledColor
+                    : props.checkedColor,
+            },
+            '&:hover': {
+                backgroundColor: props.cantEdit
+                    ? 'transparent'
+                    : props.checkedHoverColor,
+            },
+        },
+    }));
+
+interface ComponentProps
+    extends StyleProps,
+        Omit<CheckboxProps, 'size' | 'onChange'> {
+    onChange?: (checked: boolean) => void;
+    checked: boolean;
+}
+
+/**
+ * Generic rounded checkbox
+ */
+function CustomCheckBox({
+    padding = '9px',
+    onChange,
+    error = false,
+    size = '1.5rem',
+    checkedColor = '#3d5a7f',
+    uncheckedColor = '#787878',
+    disabledColor = '#A0A0A0',
+    errorColor = '#cc2936',
+    cantEdit = false,
+    checked,
+    ...others
+}: ComponentProps): JSX.Element {
+    const classes = useCheckBoxStyles({
+        size,
+        error,
+        padding,
+        cantEdit,
+        errorColor,
+        checkedColor,
+        disabledColor,
+        uncheckedColor,
+        checkedHoverColor: checkedColor + '0a',
+    })();
+
+    return (
+        <Checkbox
+            {...others}
+            disabled={cantEdit}
+            classes={classes}
+            checked={checked}
+            onChange={onChange as any}
+            required={true}
+            icon={<CheckBoxOutlineBlankRoundedIcon fontSize="inherit" />}
+            checkedIcon={<CheckBoxRoundedIcon fontSize="inherit" />}
+        />
+    );
+}
+
+/**
+ * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
+ */
+class RoundedCheckBox extends React.Component<ComponentProps> {
+    render(): JSX.Element {
+        return <CustomCheckBox {...this.props} />;
+    }
+}
+export default RoundedCheckBox;

package/src/Shared/RoundedDatePicker/RoundedDatePicker.stories.tsx

@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/react';
+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'),
+    },
+} satisfies Meta<typeof RoundedDatePicker>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {
+    args: {
+        value: null,
+    },
+};
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+        value: new Date('07-21-2021'),
+    },
+};
+
+export const ValueAndLabel: Story = {
+    args: {
+        label: 'Label',
+        value: null,
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value: any): void => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return (
+            <RoundedDatePicker
+                {...args}
+                ref={args.ref as any}
+                onChange={onValueChange}
+            />
+        );
+    },
+};
+
+export const Full: Story = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+    },
+};
+export const FullDateTime: Story = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        pickTime: true,
+    },
+};
+
+export const Error: Story = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+
+export const Menu: Story = {
+    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: Story = {
+    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: Story = {
+    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: Story = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        error: true,
+        errorColor: 'blue',
+    },
+};
+
+export const DifferentColors: Story = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        helperTextColor: 'green',
+        outlineColor: 'purple',
+        backgroundColor: 'red',
+        textColor: 'blue',
+    },
+    render: function Component(args) {
+        return <RoundedDatePicker {...args} ref={args.ref as any} />;
+    },
+};