@omniumretail/component-library 1.0.14 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",
@@ -15,6 +15,7 @@
     "@types/jest": "^29.2.4",
     "@types/node": "^18.11.11",
     "@types/react": "^18.0.26",
+    "@types/react-beautiful-dnd": "^13.1.3",
     "@types/react-dom": "^18.0.9",
     "antd": "^5.1.2",
     "babel-jest": "^27.4.2",
@@ -55,6 +56,7 @@
     "rc-tween-one": "^3.0.6",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.1.4",

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

@@ -0,0 +1,37 @@
+import { Meta, Story } from "@storybook/react";
+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: Story<any> = (args) => {
+    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

@@ -0,0 +1,84 @@
+import { DeleteOutlined, HolderOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { Form, Input, Space } from 'antd';
+import { t } from 'i18next';
+import styles from './styles.module.scss';
+
+export const SingleQuestion = ({ key, provided, snapshot, remove, name, ...restField }: any) => {
+    return (
+        <div 
+            key={key}
+            ref={provided.innerRef}
+            snapshot={snapshot}
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            className={styles.dragItem}
+        >
+            <Space>
+                <div className={styles.question}>
+                    <div className={styles.drag}>
+                        <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.errorQuestion') }]}
+                        >
+                            <Input placeholder={`${t('components.category.placeholderQuestion')}`} />
+                        </Form.Item>
+                    </div>
+                    <div className={styles.actions}>
+                        {/* <div className={styles.edit}>
+                            <div className={styles.notEditing} 
+                            // onClick={() => handleStartEdit(index)}
+                            >
+                                <EditOutlined />
+                            </div>
+
+                            <div className={styles.editing}>
+                                <CheckOutlined style={{ color: 'var( --color-confirmation-600)' }} 
+                                onClick={() => handleSaveEdit()} 
+                                />
+                                <CloseOutlined style={{ color: 'var( --color-warning-500)' }}     
+                                //onClick={() => handleCancelEdit(index)} 
+                                />
+                            </div>
+                        </div> */}
+                        <div className={styles.delete}>
+                            <DeleteOutlined onClick={() => remove(name)} />
+                        </div>
+                    </div>
+                </div>
+                <div className={styles.information}>
+                    <div className={styles.infoIcon}>
+                        <InfoCircleOutlined />
+                    </div>
+                    <div className={styles.content}>
+                        <div className={styles.label}>
+                            xpto
+                        </div>
+                        <Form.Item
+                            {...restField}
+                            name={[name, 'info']}
+                            rules={[{ required: true, message: t('components.category.errorInfo') }]}
+                        >
+                            <Input placeholder={`${t('components.category.placeholderInfo')}`} />
+                        </Form.Item>
+                    </div>
+                    <div className={styles.grade}>
+                        <Form.Item
+                            {...restField}
+                            name={[name, 'grade']}
+                            rules={[{ required: true, message: t('components.category.errorGrade') }]}
+                        >
+                            <Input placeholder={`${t('components.category.placeholderGrade')}`} />
+                        </Form.Item>
+                    </div>
+                </div>
+            </Space>
+        </div>
+    );
+};

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

@@ -0,0 +1,81 @@
+$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;
+}
+
+.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;
+}
+
+.input {
+    display: none;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 20px;
+}
+
+.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;
+}

package/src/components/Questions/index.tsx

@@ -0,0 +1,66 @@
+import { useContext } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import { Form } from 'antd';
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import { SingleQuestion } from "./SingleQuestion";
+import { Link } from 'components/Link';
+import { FieldContext } from 'rc-field-form';
+import { t } from 'i18next';
+
+export const Questions = () => {
+    const formContext = useContext(FieldContext);
+
+    const items = Form.useWatch('questions');
+    const onDragEnd = (result: any) => {
+        const newItems: any = items;
+        const [removed] = newItems.splice(result.source.index, 1);
+        newItems.splice(result.destination.index, 0, removed);
+        formContext.setFieldValue('questions', newItems);
+    };
+
+    return (
+        <Form.List name="questions"> 
+            {(fields, { add, remove }) => {
+                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 }) => {
+                                            return (
+                                                <Draggable key={key} draggableId={`${key}`} index={key}>
+                                                    {(provided, snapshot) => (
+                                                        <>
+                                                            <SingleQuestion
+                                                                provided={provided}
+                                                                snapshot={snapshot}
+                                                                item={name}
+                                                                {...restField}
+                                                                remove={remove}
+                                                                name={name}
+                                                            />
+                                                        </>
+                                                    )}
+                                                </Draggable>
+                                            )
+                                        })}
+                                        </>
+                                        {provided.placeholder}
+                                    </div>
+                                )}
+                            </Droppable>
+                        </DragDropContext>
+                        <Form.Item>
+                            <Link icon={<PlusOutlined />} onClick={() => add()}> { t('components.category.addQuestion') }</Link>
+                        </Form.Item>
+                    </>
+                )
+            }}
+        </Form.List>
+    );
+}

package/src/components/Table/index.tsx

@@ -101,8 +101,8 @@ export const Table = (props: TableCustomProps) => {
             }).filter(el => el !== undefined) as any;
 
             let columnActions = {
-                title: 'Action',
                 key: 'action',
+                title: headingTranslationsKey ? t(`${headingTranslationsKey}.${'action'}`) : 'action',
                 dataIndex: 6,
                 ellipsis: false,
                 render: () => (

package/src/components/index.tsx

@@ -14,3 +14,4 @@ export * from './Footer';
 export * from './ModalConfirmation';
 export * from './ModalWithTable';
 export * from './Sidebar';
+export * from './Switch';

package/src/locales/en.json

@@ -16,5 +16,16 @@
     "actions": {
         "one": "one",
         "two": "two"
+    },
+    "components": {
+        "category": {
+            "addQuestion": "Add Question",
+            "placeholderInfo": "Question Information",
+            "errorInfo": "Missing Question Information",
+            "placeholderQuestion": "Question",
+            "errorQuestion": "Missing Question",
+            "placeholderGrade": "Grade",
+            "errorGrade": "Missing Grade"
+        }
     }
 }

package/src/locales/es.json

@@ -16,5 +16,16 @@
     "actions": {
         "one": "one ES",
         "two": "two ES"
+    },
+    "components": {
+        "category": {
+            "addQuestion": "Add Question ES",
+            "placeholderInfo": "Question Information ES",
+            "errorInfo": "Missing Question Information ES",
+            "placeholderQuestion": "Question ES",
+            "errorQuestion": "Missing Question ES",
+            "placeholderGrade": "Grade ES",
+            "errorGrade": "Missing Grade ES"
+        }
     }
 }

package/src/locales/pt.json

@@ -6,7 +6,8 @@
         "store": "Loja",
         "role": "Posição",
         "type": "Tipo",
-        "id": "Id"
+        "id": "Id",
+        "action": "Ação"
     },
     "navigation": {
         "back": "Go Back PT",
@@ -16,5 +17,16 @@
     "actions": {
         "one": "one PT",
         "two": "two PT"
+    },
+    "components": {
+        "category": {
+            "addQuestion": "Add Question PT",
+            "placeholderInfo": "Question Information PT",
+            "errorInfo": "Missing Question Information PT",
+            "placeholderQuestion": "Question PT",
+            "errorQuestion": "Missing Question PT",
+            "placeholderGrade": "Grade PT",
+            "errorGrade": "Missing Grade PT"
+        }
     }
 }