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

package/src/Shared/Loader/Loader.module.css

@@ -1,12 +0,0 @@
-.loaderContainer {
-    height: 100%;
-    width: 100%;
-    display: flex;
-}
-.loader {
-    margin: auto;
-    width: fit-content;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}

package/src/Shared/Loader/Loader.tsx

@@ -1,40 +0,0 @@
-import CircularProgress from '@material-ui/core/CircularProgress';
-import styles from './Loader.module.css';
-interface LoaderProps {
-    /** The color of the loader */
-    color?: string;
-    /** If the loader should show a curtain behind it */
-    curtain?: boolean;
-    /** The zIndex of the loader */
-    zIndex?: number;
-    /** The size of the loader */
-    size?: number;
-    /** The position of the loader */
-    position?: any;
-}
-/**
- * Generic Loader Component with optional curtain.
- */
-function Loader({
-    color = '#3d5a7f',
-    curtain = false,
-    zIndex = 20,
-    size = 40,
-    position = 'absolute',
-}: LoaderProps): JSX.Element {
-    return (
-        <div
-            className={styles.loaderContainer + ' flexbox'}
-            style={{
-                backgroundColor: curtain ? 'rgb(0, 0, 0, 0.4)' : '',
-                zIndex,
-                position,
-            }}
-        >
-            <div className={styles.loader}>
-                <CircularProgress size={size} style={{ color }} />
-            </div>
-        </div>
-    );
-}
-export default Loader;

package/src/Shared/Navbar/Navbar.module.css

@@ -1,8 +0,0 @@
-.navContainer {
-    height: 60px;
-    display: flex;
-}
-.navImage {
-    height: 40px;
-    margin: auto 0 auto 15px;
-}

package/src/Shared/Navbar/Navbar.stories.tsx

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Navbar from './Navbar';
-
-const meta = {
-    component: Navbar,
-    tags: ['autodocs'],
-    args: {
-        logo: 'https://content.capta.co/Capta/CaptaWhite.svg',
-        color: '#3d5a7f',
-    },
-} satisfies Meta<typeof Navbar>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {},
-};

package/src/Shared/Navbar/Navbar.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import styles from './Navbar.module.css';
-interface NavBarProps {
-    /** Url of the current logo of the current organization */
-    logo?: string;
-    /** The color of the navbar */
-    color?: string;
-}
-
-function Navbar({ logo, color }: NavBarProps): JSX.Element {
-    return (
-        <div className={styles.navContainer} style={{ backgroundColor: color }}>
-            <img
-                src={logo}
-                alt="Organization Logo"
-                className={styles.navImage}
-            />
-        </div>
-    );
-}
-export default Navbar;

package/src/Shared/Rating/Rating.module.css

@@ -1,18 +0,0 @@
-.ratingContainer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.iconContainer,
-.disabledIconContainer {
-    font-size: 60px;
-    height: 60px;
-    color: var(--eureka-outline);
-}
-
-.iconContainer:hover {
-    transform: scale(1.2);
-    cursor: pointer;
-    color: var(--eureka-primary);
-}

package/src/Shared/Rating/Rating.stories.tsx

@@ -1,70 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Rating from './Rating';
-import { RatingTypes } from '../../constants/FormStepTypes';
-
-const meta = {
-    component: Rating,
-    tags: ['autodocs'],
-    args: {},
-} satisfies Meta<typeof Rating>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const ScaleRating: Story = {
-    args: {
-        type: RatingTypes.SCALE,
-        name: 'Rating',
-        focusColor: '#3d5a7f',
-        unSelectedColor: '#d8d8d8',
-    },
-};
-
-export const ScaleRatingWidthValue: Story = {
-    args: {
-        type: RatingTypes.SCALE,
-        name: 'Rating',
-        focusColor: '#3d5a7f',
-        unSelectedColor: '#d8d8d8',
-        value: 4,
-    },
-};
-
-export const LikeRating: Story = {
-    args: {
-        type: RatingTypes.LIKE,
-        name: 'Rating',
-        focusColor: '#3d5a7f',
-        unSelectedColor: '#d8d8d8',
-    },
-};
-
-export const LikeRatingWithValue: Story = {
-    args: {
-        type: RatingTypes.LIKE,
-        name: 'Rating',
-        focusColor: '#3d5a7f',
-        unSelectedColor: '#d8d8d8',
-        value: 1,
-    },
-};
-
-export const SatisfactionRating: Story = {
-    args: {
-        type: RatingTypes.SATISFACTION,
-        name: 'Rating',
-        focusColor: '#3d5a7f',
-        unSelectedColor: '#d8d8d8',
-    },
-};
-
-export const SatisfactionRatingWidthValue: Story = {
-    args: {
-        type: RatingTypes.SATISFACTION,
-        name: 'Rating',
-        focusColor: '#3d5a7f',
-        unSelectedColor: '#d8d8d8',
-        value: 3,
-    },
-};

package/src/Shared/Rating/Rating.tsx

@@ -1,33 +0,0 @@
-import { RatingTypes } from '../../constants/FormStepTypes';
-import LikeRating from './Ratings/LikeRating';
-import SatisfactionRating from './Ratings/SatisfactionRating';
-import ScaleRating from './Ratings/ScaleRating';
-
-export interface RatingProps {
-    disabled?: boolean;
-    name: string;
-    isMobile?: boolean;
-    value: any;
-    onChange: (value: number | null) => void;
-    inputRef: any;
-    focusColor: string;
-    unSelectedColor: string;
-}
-
-function Rating({
-    type,
-    ...others
-}: RatingProps & { type: RatingTypes }): JSX.Element {
-    switch (type) {
-        case RatingTypes.LIKE:
-            return <LikeRating {...others} />;
-        case RatingTypes.SATISFACTION:
-            return <SatisfactionRating {...others} />;
-        case RatingTypes.SCALE:
-            return <ScaleRating {...others} />;
-        default:
-            return <div></div>;
-    }
-}
-
-export default Rating;

package/src/Shared/Rating/Ratings/LikeRating.tsx

@@ -1,75 +0,0 @@
-import ThumbDownRoundedIcon from '@material-ui/icons/ThumbDownRounded';
-import ThumbUpRoundedIcon from '@material-ui/icons/ThumbUpRounded';
-import { RatingProps } from '../Rating';
-import styles from '../Rating.module.css';
-
-function LikeRating({
-    disabled,
-    inputRef,
-    value,
-    onChange,
-    focusColor,
-    unSelectedColor,
-}: RatingProps): JSX.Element {
-    return (
-        <div
-            className={styles.ratingContainer}
-            style={
-                {
-                    '--eureka-primary': focusColor,
-                    '--eureka-outline': unSelectedColor,
-                } as React.CSSProperties
-            }
-        >
-            <input ref={inputRef} className={'hidden-input'} />
-            <div
-                className={
-                    disabled
-                        ? styles.disabledIconContainer
-                        : styles.iconContainer
-                }
-                style={{ height: 70 }}
-                onClick={(): void => {
-                    if (!disabled) onChange(value === 1 ? null : 1);
-                }}
-            >
-                <ThumbUpRoundedIcon
-                    fontSize="inherit"
-                    style={
-                        value === 1
-                            ? {
-                                  color: focusColor,
-                              }
-                            : {}
-                    }
-                />
-            </div>
-            <div
-                className={
-                    disabled
-                        ? styles.disabledIconContainer
-                        : styles.iconContainer
-                }
-                style={{ height: 70 }}
-                onClick={(): void => {
-                    if (!disabled) onChange(value === 0 ? null : 0);
-                }}
-            >
-                <ThumbDownRoundedIcon
-                    fontSize="inherit"
-                    style={
-                        value === 0
-                            ? {
-                                  color: focusColor,
-                                  marginTop: 14,
-                                  marginLeft: 15,
-                              }
-                            : { marginTop: 14, marginLeft: 15 }
-                    }
-                />
-            </div>
-        </div>
-    );
-}
-
-export default LikeRating;

package/src/Shared/Rating/Ratings/SatisfactionRating.tsx

@@ -1,115 +0,0 @@
-import styles from '../Rating.module.css';
-import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
-import SentimentDissatisfiedIcon from '@material-ui/icons/SentimentDissatisfied';
-import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAltOutlined';
-import SentimentVerySatisfiedIcon from '@material-ui/icons/SentimentVerySatisfied';
-import { RatingProps } from '../Rating';
-
-function SatisfactionRating({
-    value,
-    inputRef,
-    disabled,
-    onChange,
-    focusColor,
-    unSelectedColor,
-}: RatingProps): JSX.Element {
-    return (
-        <div
-            className={styles.ratingContainer}
-            style={
-                {
-                    '--eureka-primary': focusColor,
-                    '--eureka-outline': unSelectedColor,
-                } as React.CSSProperties
-            }
-        >
-            <input ref={inputRef} className={'hidden-input'} />
-            <div
-                className={
-                    disabled
-                        ? styles.disabledIconContainer
-                        : styles.iconContainer
-                }
-                onClick={(): void => {
-                    if (!disabled) onChange(value === 1 ? null : 1);
-                }}
-            >
-                <SentimentVeryDissatisfiedIcon
-                    fontSize="inherit"
-                    style={
-                        value === 1
-                            ? {
-                                  color: focusColor,
-                              }
-                            : {}
-                    }
-                />
-            </div>
-            <div
-                className={
-                    disabled
-                        ? styles.disabledIconContainer
-                        : styles.iconContainer
-                }
-                onClick={(): void => {
-                    if (!disabled) onChange(value === 2 ? null : 2);
-                }}
-            >
-                <SentimentDissatisfiedIcon
-                    fontSize="inherit"
-                    style={
-                        value === 2
-                            ? {
-                                  color: focusColor,
-                              }
-                            : {}
-                    }
-                />
-            </div>
-            <div
-                className={
-                    disabled
-                        ? styles.disabledIconContainer
-                        : styles.iconContainer
-                }
-                onClick={(): void => {
-                    if (!disabled) onChange(value === 3 ? null : 3);
-                }}
-            >
-                <SentimentSatisfiedAltIcon
-                    fontSize="inherit"
-                    style={
-                        value === 3
-                            ? {
-                                  color: focusColor,
-                              }
-                            : {}
-                    }
-                />
-            </div>
-            <div
-                className={
-                    disabled
-                        ? styles.disabledIconContainer
-                        : styles.iconContainer
-                }
-                onClick={(): void => {
-                    if (!disabled) onChange(value === 4 ? null : 4);
-                }}
-            >
-                <SentimentVerySatisfiedIcon
-                    fontSize="inherit"
-                    style={
-                        value === 4
-                            ? {
-                                  color: focusColor,
-                              }
-                            : {}
-                    }
-                />
-            </div>
-        </div>
-    );
-}
-
-export default SatisfactionRating;

package/src/Shared/Rating/Ratings/ScaleRating.tsx

@@ -1,85 +0,0 @@
-import { IconContainerProps, Rating } from '@material-ui/lab';
-import GradeRoundedIcon from '@material-ui/icons/GradeRounded';
-import { RatingProps } from '../Rating';
-import { makeStyles } from '@material-ui/core';
-import React from 'react';
-import { ClassNameMap } from '@material-ui/core/styles/withStyles';
-
-interface ColorProps {
-    /** The color of the outline when selected and hovered on */
-    focusColor?: string;
-    /** The color of the icons when it is not selected */
-    unSelectedColor?: string;
-}
-
-const useRatingStyles = (props: ColorProps): (() => ClassNameMap) =>
-    makeStyles({
-        root: {
-            '&.Mui-disabled': {
-                opacity: 1,
-            },
-            '& .EF-MuiRating-iconFilled': {
-                color: props.focusColor,
-            },
-            '& .EF-MuiRating-iconEmpty': {
-                color: props.unSelectedColor,
-            },
-        },
-    });
-
-function ScaleRating({
-    value,
-    name,
-    inputRef,
-    disabled,
-    onChange,
-    isMobile,
-    focusColor,
-    unSelectedColor,
-}: RatingProps): JSX.Element {
-    const ratingClasses = useRatingStyles({
-        unSelectedColor,
-        focusColor,
-    })();
-    return (
-        <React.Fragment>
-            <input ref={inputRef} className={'hidden-input'} />
-            <Rating
-                value={value}
-                onChange={(_event, newValue): void => {
-                    if (!disabled) onChange(newValue);
-                }}
-                disabled={disabled}
-                classes={ratingClasses}
-                name={name}
-                size="large"
-                defaultValue={0}
-                getLabelText={(value: number): string => value + '/5'}
-                max={5}
-                IconContainerComponent={
-                    isMobile ? SmallIconContainer : IconContainer
-                }
-            />
-        </React.Fragment>
-    );
-}
-
-function IconContainer({ value, ...other }: IconContainerProps): JSX.Element {
-    return (
-        <span className={'icon' + value} {...other}>
-            <GradeRoundedIcon style={{ fontSize: 60 }} />
-        </span>
-    );
-}
-
-function SmallIconContainer({
-    value,
-    ...other
-}: IconContainerProps): JSX.Element {
-    return (
-        <span className={'icon' + value} {...other}>
-            <GradeRoundedIcon style={{ fontSize: 50 }} />
-        </span>
-    );
-}
-export default ScaleRating;

package/src/Shared/RoundedButton/RoundedButton.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import RoundedButton from './RoundedButton';
-
-const meta = {
-    component: RoundedButton,
-    tags: ['autodocs'],
-    args: {
-        text: 'Label',
-        backgroundColor: '#3d5a7f',
-        color: '#ffffff',
-        disabled: false,
-        fontSize: '1rem',
-        padding: '0 13px 0 13px',
-        borderRadius: 10,
-        height: 28,
-        bold: false,
-        width: 'fit-content',
-    },
-} satisfies Meta<typeof RoundedButton>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        text: 'Label',
-    },
-};
-
-export const Disabled: Story = {
-    args: {
-        text: 'Label',
-        disabled: true,
-    },
-};
-
-export const DifferentColors: Story = {
-    args: {
-        text: 'Label',
-        backgroundColor: 'red',
-        color: 'blue',
-    },
-};

package/src/Shared/RoundedButton/RoundedButton.tsx

@@ -1,80 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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',
-    },
-};