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

package/src/Shared/InputIcon/InputIcon.tsx

@@ -0,0 +1,134 @@
+import LeakIcon from '../../Icons/Construction/LeakIcon';
+import ProjectIcon from '../../Icons/Construction/ProjectIcon';
+import PropertyIcon from '../../Icons/Construction/PropertyIcon';
+import SpaceIcon from '../../Icons/Construction/SpaceIcon';
+import DocumentIcon from '../../Icons/DocumentIcon';
+import CheckListIcon from '../../Icons/Entities/CheckListIcon';
+import GenericEntityIcon from '../../Icons/Entities/GenericEntityIcon';
+import HandShakeIcon from '../../Icons/Entities/HandshakeIcon';
+import IconTypes from '../../constants/IconTypes';
+
+export interface InputIconProps {
+    icon: string;
+    fill?: string;
+}
+
+function InputIcon({
+    icon,
+    fill = '#757575',
+    ...others
+}: InputIconProps): JSX.Element {
+    switch (icon) {
+        case IconTypes.PROJECT:
+            return (
+                <ProjectIcon
+                    style={{
+                        display: 'flex',
+                        height: 24,
+                        width: 24,
+                    }}
+                    fill={fill}
+                    {...others}
+                />
+            );
+        case IconTypes.PROPERTY:
+            return (
+                <PropertyIcon
+                    style={{
+                        display: 'flex',
+                        height: 23,
+                        width: 23,
+                    }}
+                    fill={fill}
+                    {...others}
+                />
+            );
+        case IconTypes.SPACE:
+            return (
+                <SpaceIcon
+                    style={{
+                        display: 'flex',
+                        height: 23,
+                        width: 23,
+                    }}
+                    fill={fill}
+                    {...others}
+                />
+            );
+        case IconTypes.LEAK:
+            return (
+                <LeakIcon
+                    style={{
+                        display: 'flex',
+                        height: 23,
+                        width: 23,
+                        marginTop: 2,
+                    }}
+                    fill={fill}
+                    {...others}
+                />
+            );
+        case IconTypes.DOCUMENT:
+            return (
+                <DocumentIcon
+                    style={{
+                        display: 'flex',
+                        height: 23,
+                        width: 23,
+                    }}
+                    fill={fill}
+                    {...others}
+                />
+            );
+        case IconTypes.HANDSHAKE:
+            return (
+                <HandShakeIcon
+                    style={{
+                        display: 'flex',
+                        height: 23,
+                        width: 23,
+                    }}
+                    fill={fill}
+                    {...others}
+                />
+            );
+        case IconTypes.CHECKLIST:
+            return (
+                <CheckListIcon
+                    style={{
+                        display: 'flex',
+                        height: 24,
+                        width: 24,
+                    }}
+                    fill={fill}
+                    {...others}
+                />
+            );
+        case IconTypes.SUPPLIER:
+            return (
+                <CheckListIcon
+                    style={{
+                        display: 'flex',
+                        height: 23,
+                        width: 23,
+                    }}
+                    fill={fill}
+                    {...others}
+                />
+            );
+        case IconTypes.GENERIC:
+        default:
+            return (
+                <GenericEntityIcon
+                    style={{
+                        display: 'flex',
+                        height: 23,
+                        width: 23,
+                    }}
+                    fill={fill}
+                    {...others}
+                />
+            );
+    }
+}
+export default InputIcon;

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

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

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

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

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

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

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

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

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

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

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

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

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

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