@omniumretail/component-library 1.2.71 → 1.2.72

package/src/components/Questions/Questions.stories.tsx

@@ -1,37 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-vite";
-import { Questions } from '.';
-import { SearchOutlined } from '@ant-design/icons';
-import { Button, Form, Input } from "antd";
-import { useForm } from 'antd/lib/form/Form';
-
-export default {
-    title: 'Questions',
-    component: Questions,
-} as Meta;
-
-const Template: StoryFn<any> = (args: any) => {
-    const [form] = useForm();
-
-    const onFinish = (values: any) => {
-        console.log('Received values of form:', values);
-    };
-
-    return (
-        <>
-            <Form
-                name="dynamic_form_nest_item"
-                onFinish={onFinish}
-                autoComplete="off"
-                form={form}
-            >
-                <Questions {...args}></Questions>
-            </Form>
-            <div style={{marginTop: '60px'}}></div>
-            <Button onClick={() => form.submit()}>Submit</Button>
-        </>
-);
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-};

package/src/components/Questions/SingleQuestion/index.tsx

@@ -1,337 +0,0 @@
-import { DeleteOutlined, DownOutlined, HolderOutlined, InfoCircleOutlined } from '@ant-design/icons';
-import { Checkbox, ColorPicker, Form, Input, Select, Space, Dropdown } from 'antd';
-import { t } from 'i18next';
-import styles from './styles.module.scss';
-import { useEffect, useState } from 'react';
-import classnames from 'classnames';
-
-export const SingleQuestion = ({
-    key,
-    provided,
-    snapshot,
-    remove,
-    name,
-    showGrade,
-    handleChanges,
-    showCheckbox,
-    responseTypeOptions,
-    hasHeader,
-    isTheHeader,
-    responseTypeComponent,
-    form,
-    ...restField
-}: any) => {
-
-    const responseTypeCurrentValue = form?.getFieldsValue()?.questions?.[name]?.responseType;
-    const initialEmphasisValue = form?.getFieldsValue()?.questions?.[name]?.emphasis;
-
-    const [mandatoryCheckbox, setMandatoryCheckbox] = useState<boolean>(false);
-    const [emphasisCheckbox, setEmphasisCheckbox] = useState<boolean>(initialEmphasisValue ? initialEmphasisValue : true);
-    const [multipleChoiseCheckbox, setMultipleChoiseCheckbox] = useState<boolean>(false);
-    const [flaggedOptions, setFlaggedOptions] = useState([]);
-
-
-    const filteredResponsesMultiple = responseTypeOptions
-        ?.filter((item: { IsMultipleChoise: any; }) => item.IsMultipleChoise)
-        ?.map((item: { Id: any; }) => item.Id);
-
-    const filteredResponsesEmphasised = responseTypeOptions
-        ?.filter((item: { IsEmphasis: any; }) => item.IsEmphasis)
-        ?.map((item: { Id: any; }) => item.Id);
-
-    const sortedAnswerTypeOptions = responseTypeOptions?.sort((a: any, b: any) => {
-        return Number(a.IsMultipleChoise) - Number(b.IsMultipleChoise);
-    });
-
-    const answerTypeOptions = sortedAnswerTypeOptions?.map((answerType: any) => {
-        const formattedOptions = answerType.Options?.map((option: any, idx: number) => {
-            const flag = option.NeedsAction ? "🚩" : "";
-            return (
-                <span key={idx} style={{ color: option.Color }}>
-                    {option.Value} ({option.Grade}) {flag}
-                </span>
-            );
-        }).reduce((acc: any[], curr: any, idx: number, arr: any[]) => {
-            if (idx === arr.length - 1) {
-                return acc.concat(curr);
-            } else {
-                return acc.concat(curr, ', ');
-            }
-        }, []);
-
-        return {
-            value: answerType.Id,
-            label: (
-                <div>{!answerType?.UseName ? formattedOptions : answerType.Name}</div>
-            ),
-        };
-    });
-
-    const handleResponseType = () => {
-        handleChanges();
-        setEmphasisCheckbox(true);
-        form.setFieldsValue({
-          questions: {
-            [name]: {
-              emphasis: true,
-            },
-          },
-        });
-    };
-
-    const onCheckboxMultipeChoiseHandler = (checked: boolean) => {
-        setMultipleChoiseCheckbox(checked);
-        handleChanges();
-    }
-
-    const onCheckboxMandatoryHandler = (checked: boolean) => {
-        setMandatoryCheckbox(checked);
-        handleChanges();
-    }
-
-    const onCheckboxEmphasisHandler = (checked: boolean) => {
-        setEmphasisCheckbox(checked);
-        handleChanges();
-    };
-
-    useEffect(() => {
-        const selectedResponseType = form?.getFieldValue(['questions', name, 'responseType']);
-        
-        if (selectedResponseType) {
-            const selectedAnswerType = sortedAnswerTypeOptions.find(
-                (answerType: any) => answerType.Id === selectedResponseType
-            );
-
-            if (selectedAnswerType) {
-                const flagged = selectedAnswerType.Options?.filter((option: any) => option.NeedsAction) || [];
-                setFlaggedOptions(flagged);
-            }
-        } else {
-            setFlaggedOptions([]);
-        }
-    }, [responseTypeCurrentValue]);
-
-    const getFlaggedOptionsMenu = () => {
-        return flaggedOptions.map((option: any, idx) => ({
-            key: idx,
-            label: (
-                <span key={idx} style={{ color: option.Color }}>
-                    {option.Value} ({option.Grade}) 🚩
-                </span>
-            ),
-        }));
-    };
-
-    const canDrag = !(restField.fieldKey === 0 && isTheHeader);
-
-    const questionStyle = classnames({
-        [styles.responseTypeQuestion]: responseTypeComponent
-    }, [styles.question]);
-
-    return (
-        <div
-            key={key}
-            ref={provided.innerRef}
-            snapshot={snapshot}
-            {...provided.draggableProps}
-            {...provided.dragHandleProps}
-            className={styles.dragItem}
-        >
-            <Space>
-                <div className={questionStyle}>
-
-                    <div className={styles.drag}>
-                        {canDrag &&
-                            <HolderOutlined />
-                        }
-                    </div>
-
-
-                    <div className={styles.content}>
-                        <div className={styles.label}>
-                            abc
-                        </div>
-
-                        <Form.Item
-                            {...restField}
-                            name={[name, 'question']}
-                            rules={[{ required: true, message: t('components.category.answerNameIsMissing')! }]}
-                        >
-                            <Input
-                                placeholder={!responseTypeComponent ? `${t('components.category.placeholderQuestion')}` : `${t('components.category.placeholderResponse')}`}
-                                onMouseLeave={handleChanges}
-                            />
-                        </Form.Item>
-                    </div>
-
-                    {canDrag &&
-                        <div className={styles.actions}>
-                            <div className={styles.delete}>
-                                <DeleteOutlined onClick={() => remove(name)} />
-                            </div>
-                        </div>
-                    }
-                </div>
-
-                {!responseTypeComponent &&
-                    <div className={styles.information}>
-                        <div className={styles.infoIcon}>
-                            {!hasHeader && <InfoCircleOutlined />}
-                        </div>
-
-                        <div className={styles.content}>
-                            <div className={styles.label}>
-                                xpto
-                            </div>
-
-                            <Form.Item
-                                {...restField}
-                                name={[name, 'info']}
-                            >
-                                <Input placeholder={`${t('components.category.placeholderInfo')}`} onMouseLeave={handleChanges} />
-                            </Form.Item>
-                        </div>
-
-                        {showGrade &&
-                            <div className={styles.grade}>
-                                <Form.Item
-                                    {...restField}
-                                    name={[name, 'grade']}
-                                >
-                                    <Input placeholder={`${t('components.category.placeholderGrade')}`} onMouseLeave={handleChanges} />
-                                </Form.Item>
-                            </div>
-                        }
-                    </div>
-                }
-
-                {showCheckbox &&
-                    <div className={styles.questionFooter}>
-                        <div />
-
-                        {!isTheHeader &&
-                            <>
-
-                                <div className={styles.checkboxContainer}>
-                                    <Form.Item
-                                        {...restField}
-                                        name={[name, 'mandatory']}
-                                        valuePropName='checked'
-                                    >
-                                        <Checkbox onChange={(e) => onCheckboxMandatoryHandler(e.target.checked)} checked={mandatoryCheckbox} />
-                                    </Form.Item>
-
-                                    <span>{t('components.category.mandatoryAnswer')}</span>
-                                </div>
-
-                                {filteredResponsesEmphasised?.includes(form?.getFieldsValue()?.questions?.[name]?.responseType) &&
-                                    <div className={styles.checkboxContainer}>
-                                        <Input
-                                            addonBefore={
-                                                <Form.Item
-                                                    {...restField}
-                                                    name={[name, 'emphasis']}
-                                                    valuePropName='checked'
-                                                    initialValue={initialEmphasisValue ? initialEmphasisValue : true}
-                                                >
-                                                    <Checkbox
-                                                        onChange={(e) => onCheckboxEmphasisHandler(e.target.checked)}
-                                                        checked={emphasisCheckbox}
-                                                    />
-                                                </Form.Item>
-                                            }
-                                            addonAfter={
-                                                <Dropdown menu={{ items: getFlaggedOptionsMenu() }}>
-                                                    <a>
-                                                        <DownOutlined />
-                                                    </a>
-                                                </Dropdown>
-                                            }
-                                            defaultValue={t('components.category.emphasisAnswer')!}
-                                            className={styles.emphasisInputStyle}
-                                        />
-                                    </div>
-                                }
-
-                                {filteredResponsesMultiple?.includes(form?.getFieldsValue()?.questions?.[name]?.responseType) &&
-                                    < div className={styles.checkboxContainer}>
-                                        <Form.Item
-                                            {...restField}
-                                            name={[name, 'multipleChoise']}
-                                            valuePropName='checked'
-                                        >
-                                            <Checkbox onChange={(e) => onCheckboxMultipeChoiseHandler(e.target.checked)} checked={multipleChoiseCheckbox} />
-                                        </Form.Item>
-
-                                        <span>{t('components.category.multipleChoise')}</span>
-                                    </div>
-                                }
-
-                            </>
-                        }
-
-                        <div className={styles.checkboxContainer}>
-                            <Form.Item
-                                {...restField}
-                                name={[name, 'responseType']}
-                                initialValue={"-1"}
-                            >
-                                <Select
-                                    options={answerTypeOptions}
-                                    defaultValue={"-1"}
-                                    className={styles.selectResponseType}
-                                    onChange={handleResponseType}
-                                    dropdownStyle={{ minWidth: 500 }}
-                                />
-                            </Form.Item>
-                            <span>{t('components.category.responseType')}</span>
-                        </div>
-                    </div>
-                }
-
-                {
-                    responseTypeComponent &&
-                    <div className={styles.questionFooter}>
-                        <div />
-
-                        <div className={styles.checkboxContainer}>
-                            <Form.Item
-                                {...restField}
-                                name={[name, 'color']}
-                            >
-                                <ColorPicker
-                                    size='small'
-                                    onChangeComplete={handleChanges}
-                                    defaultValue={"#00000"}
-                                />
-                            </Form.Item>
-
-                            <span>{t('components.category.color')}</span>
-                        </div>
-
-                        <div className={styles.checkboxContainer}>
-                            <Form.Item
-                                {...restField}
-                                name={[name, 'flagged']}
-                                valuePropName='checked'
-                            >
-                                <Checkbox onChange={handleChanges} />
-                            </Form.Item>
-
-                            <span>{t('components.category.flagged')}</span>
-                        </div>
-
-                        <div className={styles.checkboxContainer}>
-                            <Form.Item
-                                {...restField}
-                                name={[name, 'score']}
-                            >
-                                <Input placeholder={`${t('components.category.placeholderScore')}`} onMouseLeave={handleChanges} />
-                            </Form.Item>
-                        </div>
-                    </div>
-                }
-            </Space >
-        </div >
-    );
-};

package/src/components/Questions/SingleQuestion/styles.module.scss

@@ -1,142 +0,0 @@
-$actionsSpace: 90px;
-$questionAndInformationGap: 20px;
-
-.dragItem {
-    :global {
-        .ant-form-item {
-            margin-bottom: 0;
-        }
-
-        .ant-space {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            border-bottom: 1px solid var(--color-blue);
-            padding: 16px 10px;
-        }
-
-        .ant-space-item {
-            width: 100%;
-        }
-    }
-}
-
-.label {
-    display: none;
-}
-
-.question {
-    display: grid;
-    grid-template-columns: minmax(18px, auto) 1fr $actionsSpace;
-    gap: $questionAndInformationGap;
-    color: var(--color-black);
-    font-size: var(--font-size-body-4);
-    line-height: 100%;
-    font-weight: var(--font-weight-medium);
-    align-items: center;
-
-    &.responseTypeQuestion {
-        max-width: 650px;
-    }
-}
-
-.information {
-    display: grid;
-    grid-template-columns: minmax(18px, auto) 1fr $actionsSpace;
-    gap: $questionAndInformationGap;
-    color: var(--color-grey-dark);
-    font-size: var(--font-size-body-3);
-    align-items: center;
-}
-
-.questionFooter {
-    display: flex;
-    gap: 40px;
-    font-size: var(--font-size-body-3);
-    align-items: center;
-
-    @media(max-width: 768px) {
-        gap: 12px;
-    }
-}
-
-.checkboxContainer {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    @media(max-width: 768px) {
-        width: 100%;
-    }
-}
-
-.actions {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 20px;
-}
-
-.selectResponseType {
-    min-width: 200px;
-    max-width: 450px;
-
-    @media(max-width: 768px) {
-        min-width: 100px;
-        max-width: 250px;
-    }
-}
-
-.notEditing {
-    display: none;
-    align-items: center;
-    justify-content: center;
-}
-
-.editing {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-}
-
-.drag,
-.edit,
-.delete {
-    font-size: var(--font-size-body-5);
-    cursor: pointer;
-}
-
-.addQuestion {
-    margin-top: 24px;
-}
-
-.emphasisInputStyle {
-    width: 150px;
-    pointer-events: none;
-
-    :global {
-        .ant-input-group-addon {
-            pointer-events: auto;
-            padding: 0 8px;
-            background: rgba(0, 0, 0, 0.01);
-        }
-
-        .ant-input {
-            height: 35px;
-            text-align: center;
-            padding: unset;
-        }
-
-        :where(.css-dev-only-do-not-override-f7vrd6).ant-space-align-center {
-            padding: 0 2px;
-            border-bottom: unset;
-        }
-    }
-}
-
-:global {
-    :where(.css-dev-only-do-not-override-f7vrd6).ant-cascader-dropdown .ant-cascader-menu-item-disabled {
-        color: unset;
-    }
-}

package/src/components/Questions/index.tsx

@@ -1,124 +0,0 @@
-import { PlusOutlined } from '@ant-design/icons';
-import { Form } from 'antd';
-import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
-import { SingleQuestion } from "./SingleQuestion";
-import { Link } from '../Link';
-import { t } from 'i18next';
-
-export interface QuestionsProps {
-    showGrade?: boolean;
-    showCheckbox?: boolean;
-    handleChanges: any;
-    responseTypeOptions: any;
-    hasHeader?: boolean;
-    isTheHeader?: boolean;
-    responseTypeComponent?: boolean;
-    form?: any
-}
-
-export const Questions = (props: QuestionsProps) => {
-    const {
-        showGrade = true,
-        showCheckbox,
-        handleChanges,
-        responseTypeOptions,
-        hasHeader,
-        responseTypeComponent,
-        isTheHeader
-    } = props;
-
-    const items = Form.useWatch('questions');
-
-    const onDragEnd = (result: any) => {
-        if (!result.destination) return; // Se o destino for inválido, não faz nada
-
-        const sourceIndex = result?.source?.index;
-        const destinationIndex = result?.destination?.index;
-
-        // Bloquear drag-and-drop apenas para os itens 0 e 1 quando isTheHeader for true
-        const isProtectedSource = (sourceIndex === 0 && isTheHeader);
-        const isProtectedDestination = (destinationIndex === 0 && isTheHeader);
-
-        if (isProtectedSource || isProtectedDestination) {
-            return; // Impede o drag-and-drop se for um dos itens protegidos
-        }
-
-        const newItems: any = [...items];
-
-        const [removed] = newItems.splice(result?.source?.index, 1);
-
-        newItems.splice(result.destination?.index, 0, removed);
-
-        console.log(props?.form?.setFieldValue('questions', newItems), "props?.form?.setFieldValue('questions', newItems)");
-    };
-
-    return (
-        <Form.List name="questions">
-            {(fields, { add, remove }) => {
-                const customRemove = (name: number) => {
-                    remove(name);
-
-                    setTimeout(() => {
-                        handleChanges();
-                    }, 1);
-                }
-
-                const fieldsUpdated = fields?.map((field, index) => {
-                    return field = { ...field, name: index, key: index, fieldKey: index };
-                })
-
-                return (
-                    <>
-                        <DragDropContext onDragEnd={onDragEnd}>
-                            <Droppable droppableId="droppable">
-                                {(provided) => (
-                                    <div {...provided.droppableProps} ref={provided.innerRef}>
-                                        <>
-                                            {fieldsUpdated?.map(({ key, name, ...restField }) => {
-                                                const cantDrag = (restField.fieldKey === 0 && isTheHeader);
-
-                                                return (
-                                                    <Draggable isDragDisabled={cantDrag} key={key} draggableId={`${key}`} index={key}>
-                                                        {(provided, snapshot) => (
-                                                            <>
-                                                                <SingleQuestion
-                                                                    provided={provided}
-                                                                    snapshot={snapshot}
-                                                                    item={name}
-                                                                    {...restField}
-                                                                    remove={customRemove}
-                                                                    name={name}
-                                                                    showGrade={showGrade}
-                                                                    showCheckbox={showCheckbox}
-                                                                    handleChanges={handleChanges}
-                                                                    responseTypeOptions={responseTypeOptions}
-                                                                    hasHeader={hasHeader}
-                                                                    isTheHeader={isTheHeader}
-                                                                    responseTypeComponent={responseTypeComponent}
-                                                                    form={props.form}
-                                                                />
-                                                            </>
-                                                        )}
-                                                    </Draggable>
-                                                )
-                                            })}
-                                        </>
-                                        {provided.placeholder}
-                                    </div>
-                                )}
-                            </Droppable>
-                        </DragDropContext>
-                        <Form.Item>
-                            <Link
-                                icon={<PlusOutlined />}
-                                onClick={() => add()}
-                            >
-                                {!responseTypeComponent ? `${t('components.category.addQuestion')}` : `${t('components.category.placeholderResponse')}`}
-                            </Link>
-                        </Form.Item>
-                    </>
-                )
-            }}
-        </Form.List>
-    );
-}

package/src/components/Radio/Radio.stories.tsx

@@ -1,43 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-vite";
-import { Radio as RadioAntd, RadioChangeEvent, RadioProps } from "antd";
-import { useState } from "react";
-import { Radio, RadioGroup } from '.';
-
-export default {
-    title: 'Radio',
-    component: Radio,
-} as Meta;
-
-const Template: StoryFn<RadioProps> = (args: any) => {
-    const [value, setValue] = useState();
-
-    const onChange = (e: RadioChangeEvent) => {
-        console.log('radio checked', e.target.value);
-        setValue(e.target.value);
-    };
-
-    return (
-        <div>
-            <RadioAntd.Group onChange={onChange} value={value} defaultValue={3}>
-                <Radio {...args} value={1}></Radio>
-                <Radio {...args} value={2}></Radio>
-                <Radio {...args} value={3}></Radio>
-                <Radio {...args} value={4}></Radio>
-            </RadioAntd.Group>
-
-            <RadioGroup
-                options={[
-                    { label: 'Option 1', value: '1' },
-                    { label: 'Option 2', value: '2' },
-                    { label: 'Option 3', value: '3' },
-                ]}
-                onChange={onChange}
-            />
-        </div>
-
-    )
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-};