@omniumretail/component-library 1.0.20 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/Category/Category.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, Story } from "@storybook/react";
+import { Category } from '.';
+
+export default {
+    title: 'Category',
+    component: Category,
+} as Meta;
+
+const Template: Story<any> = (args) => <Category {...args}></Category>;
+
+export const Primary = Template.bind({});
+Primary.args = {
+};
+

package/src/components/Category/CategoryContent/index.tsx

@@ -0,0 +1,159 @@
+import { Form, Select } from 'antd';
+import { useForm } from 'antd/es/form/Form';
+import { Button } from 'components/Button';
+import { InputField } from 'components/Input';
+import { Label } from 'components/Label';
+import { Questions } from 'components/Questions';
+import { Switch } from 'components/Switch';
+import { useEffect, useState } from 'react';
+import styles from './styles.module.scss';
+
+interface categoryContent {
+    categoryContentShow: boolean;
+    categoryContentInfo: any;
+    categorySidebarData: any;
+}
+
+const defaultInitialValues = {
+    generalEvaluationLevel: "0",
+    questions: []
+};
+
+export const CategoryContent = (props: categoryContent) => {
+    const {
+        categoryContentShow,
+        categorySidebarData
+    } = props;
+
+    const [contentInfo, setContentInfo] = useState<any>();
+    const [switchStatus, setSwitchStatus] = useState<boolean>(false);
+    const [initialValues, setInitialValues] = useState<any>(categorySidebarData?.data || defaultInitialValues)
+    const [form] = useForm();
+
+    const onFinish = (values: any) => {
+        setContentInfo(values);
+    };
+
+    const switchHandler = (enabled: boolean) => {
+        setSwitchStatus(enabled);
+    }
+
+    useEffect(() => {
+        props.categoryContentInfo(contentInfo);
+    }, [contentInfo]);
+
+    useEffect(() => {
+        setInitialValues(categorySidebarData?.data?.data);
+    }, [categorySidebarData]);
+
+    useEffect(() => {
+        form.setFieldsValue(initialValues);
+    }, [form, initialValues]);
+
+    return (
+        <div className={styles.categoryContent}>
+            <div className={styles.title}>Editar Categoria</div>
+
+            {
+                !categoryContentShow
+                    ? <div className={styles.uncheckedCategory}>
+                        Please Select a Category on the sidebar
+                    </div>
+
+                    : <>
+                        <Form
+                            initialValues={initialValues}
+                            name="dynamic_form_nest_item"
+                            onFinish={onFinish}
+                            autoComplete="off"
+                            form={form}
+                        >
+                            <div className={styles.formHeader}>
+                                <div className={styles.category}>
+                                    <Label isUppercase>
+                                        Nome Categoria
+                                    </Label>
+                                    <Form.Item
+                                        name={['categoryName']}
+                                        rules={[{ required: true, message: 'Category Name is Missing' }]}
+                                    >
+                                        <InputField placeholder={'Category Name'} />
+                                    </Form.Item>
+                                </div>
+
+                                {!categorySidebarData?.data?.children?.length &&
+                                    <>
+                                        <div className={styles.openAnswer}>
+                                            <Label isUppercase>
+                                                Resposta aberta
+                                            </Label>
+                                            <Form.Item
+                                                name={['openAnswer']}
+                                            >
+                                                <Switch onChange={(enabled: boolean) => switchHandler(enabled)} />
+                                            </Form.Item>
+                                        </div>
+
+                                        {
+                                            !switchStatus &&
+                                            <>
+                                                <div className={styles.generalEvaluationLevel}>
+                                                    <Label isUppercase>
+                                                        Nivel de avaliação Geral
+                                                    </Label>
+                                                    <Form.Item
+                                                        name={['generalEvaluationLevel']}
+                                                    >
+                                                        <Select options={[
+                                                            {
+                                                                value: '0',
+                                                                label: '1 a 5',
+                                                            },
+                                                            {
+                                                                value: '1',
+                                                                label: '1 a 4',
+                                                            },
+                                                            {
+                                                                value: '2',
+                                                                label: '1 a 5 ou “Não Aplicável”',
+                                                            },
+                                                        ]}
+                                                        />
+                                                    </Form.Item>
+                                                </div>
+
+                                                <div className={styles.grade}>
+                                                    <Label isUppercase>
+                                                        Ponderação
+                                                    </Label>
+                                                    <Form.Item
+                                                        name={['grade']}
+                                                        rules={[{ required: true, message: 'Grade is Missing' }]}
+                                                    >
+                                                        <InputField placeholder={'EX: 15%'} />
+                                                    </Form.Item>
+                                                </div>
+                                            </>
+                                        }
+                                    </>
+                                }
+                            </div>
+
+                            {!categorySidebarData?.data?.children?.length &&
+                                <div className={styles.questionsWrapper}>
+                                    <Label isUppercase>
+                                        Questões
+                                    </Label>
+                                    <Form.Item>
+                                        <Questions></Questions>
+                                    </Form.Item>
+                                </div>
+                            }
+                        </Form>
+
+                        <Button onClick={() => form.submit()}>Submit</Button>
+                    </>
+            }
+        </div>
+    );
+};

package/src/components/Category/CategoryContent/styles.module.scss

@@ -0,0 +1,51 @@
+.title {
+    font-size: var(--font-size-body-4);
+    font-weight: 600;
+    line-height: 100%;
+    color: var(--color-blue);
+    text-transform: uppercase;
+    margin-bottom: 32px;
+}
+
+.uncheckedCategory {
+    font-size: var(--font-size-body-2);
+    color: var(--color-black);
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.formHeader {
+    display: grid;
+    grid-template-columns: minmax(200px, 1fr) auto 1fr auto;
+    gap: 46px;
+}
+
+.questionsWrapper {
+    margin-top: 16px;
+}
+
+Label {
+    margin-bottom: 8px;
+}
+
+.categoryContent {
+    :global {
+        .ant-select {
+            width: 100%;
+        }
+
+        .ant-select-selector {
+            border-color: rgba(var(--color-black-rgb), .5) !important;
+            height: 50px !important;
+            display: flex;
+            align-items: center;
+        }
+        .ant-select-arrow {
+            color: var(--color-black);
+        }
+
+        .ant-switch {
+            width: 30px;
+        }
+    }
+}

package/src/components/Category/CategorySidebar/index.tsx

@@ -0,0 +1,246 @@
+import React, { useEffect, useState } from 'react';
+import { Tree } from 'antd';
+import type { TreeProps } from 'antd/es/tree';
+import styles from './styles.module.scss';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button } from 'components/Button';
+
+export interface Questions {
+    grade: string;
+    questions: string;
+    info: string;
+}
+export interface Data {
+    categoryName: string;
+    generalEvaluationLevel: string;
+    grade: string;
+    openAnswer: boolean;
+    questions: Questions[];
+}
+export interface DataNode {
+    title: string;
+    key: string;
+    data?: Data;
+    children?: DataNode[];
+}
+
+interface SidebarProps {
+    categoryContentData: any;
+    categorySidebarInfo: any;
+    data: DataNode[];
+}
+
+function get_element_by_index(data: DataNode[], index: string | number): DataNode | null {
+    for (const item of data) {
+        if (item.key === index) {
+            return item;
+        } else if (item.children) {
+            const result = get_element_by_index(item.children, index);
+            if (result !== null) {
+                return result;
+            }
+        }
+    }
+    return null;
+}
+
+function addPropertyByIndex(data: DataNode[], index: string | number, property: string, value: any): DataNode[] {
+    return data.map((item: DataNode) => {
+        if (item.key === index) {
+            return { ...item, [property]: value };
+        }
+        else if (item.children) {
+            return { ...item, children: addPropertyByIndex(item.children, index, property, value) };
+        }
+        return item;
+    });
+}
+
+export const CategorySidebar = (props: SidebarProps) => {
+    const {
+        categoryContentData,
+        data
+    } = props;
+
+    const [gData, setGData] = useState(data);
+    const [expandedKeys] = useState([]);
+    const [sidebarInfo, setSidebarInfo] = useState<any>();
+
+    const onDragEnter: TreeProps['onDragEnter'] = (info) => {
+        // expandedKeys
+        // setExpandedKeys(info.expandedKeys)
+    };
+
+    const onDrop: TreeProps['onDrop'] = (info) => {
+        const dropKey = info.node.key;
+        const dragKey = info.dragNode.key;
+        const dropPos = info.node.pos.split('-');
+        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
+        const { data: nodeData } = info.node as DataNode;
+        const questions: Questions[] | undefined = nodeData?.questions;
+
+        if(questions && questions.length > 0) {
+            console.log('you cant add a subcategory to a category with questions');
+            return;
+        }
+
+        if (dropPos.length >= 4) {
+            console.log('cant have more than 3 levels');
+            return;
+        }
+
+        const loop = (
+            data: DataNode[],
+            key: React.Key,
+            callback: (node: DataNode, i: number, data: DataNode[]) => void,
+        ) => {
+            for (let i = 0; i < data.length; i++) {
+                if (data[i].key === key) {
+                    return callback(data[i], i, data);
+                }
+                if (data[i].children) {
+                    loop(data[i].children!, key, callback);
+                }
+            }
+        };
+        const data = [...gData];
+
+        // Find dragObject
+        let dragObj: DataNode;
+        loop(data, dragKey, (item, index, arr) => {
+            arr.splice(index, 1);
+            dragObj = item;
+        });
+
+        if (!info.dropToGap) {
+            // Drop on the content
+            loop(data, dropKey, (item) => {
+                item.children = item.children || [];
+                // where to insert
+                item.children.unshift(dragObj);
+                // {...dragObj, key: `${item.key}-${item.children.length}`}
+            });
+        } else if (
+            ((info.node as any).props.children || []).length > 0 && // Has children
+            (info.node as any).props.expanded && // Is expanded
+            dropPosition === 1 // On the bottom gap
+        ) {
+            loop(data, dropKey, (item) => {
+                item.children = item.children || [];
+                // where to insert
+                item.children.unshift(dragObj);
+                // in previous version, we use item.children.push(dragObj) to insert the
+                // item to the tail of the children
+            });
+        } else {
+            let ar: DataNode[] = [];
+            let i: number;
+            loop(data, dropKey, (_item, index, arr) => {
+                ar = arr;
+                i = index;
+            });
+            if (dropPosition === -1) {
+                ar.splice(i!, 0, dragObj!);
+            } else {
+                ar.splice(i! + 1, 0, dragObj!);
+            }
+        }
+
+        let newData: any = {};
+
+        // TODO: create a recursive function that does the same
+        // This code changes the indexes on the fly while dragging and dropping 
+
+        let keyCounter = 0;
+        data.forEach((category: any) => {
+            const categoryKey = `${keyCounter++}`;
+            let children: any = [];
+            if (category.children) {
+                category.children.forEach((subcategory: any, subcategoryindex: number) => {
+                    const subcategoryKey = `${categoryKey}.${subcategoryindex}`;
+                    let subChildren: any = [];
+                    if (subcategory.children) {
+                        subcategory.children.forEach((lastSubcategory: any, lastSubCategoryIndex: number) => {
+                            const lastSubcategoryKey = `${subcategoryKey}.${lastSubCategoryIndex}`;
+                            subChildren.push({ ...lastSubcategory, key: lastSubcategoryKey });
+                        });
+                    }
+                    children.push({ ...subcategory, children: subChildren, key: subcategoryKey });
+                });
+            }
+            newData[categoryKey] = { ...category, children };
+        });
+
+        // TODO: update this code if possible once the TODO before is done
+        /* 
+            This code removes the property that was assigned to the object ex: 0: {}, 1: {} changes to {}, {} 
+        */
+        const checkedData = Object.values(newData).map((category: any, index: number) => {
+            return { ...category, key: index };
+        });
+
+        setGData(checkedData);
+    };
+
+    const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
+        setSidebarInfo(selectedKeys);
+    };
+
+    const addCategory = () => {
+        setGData((prevCategories: DataNode[]) => [
+            ...prevCategories,
+            { title: `New category`, key: `${gData.length}` },
+        ])
+    }
+
+    useEffect(() => {
+        props.categorySidebarInfo({
+            selectKey: sidebarInfo,
+            data: get_element_by_index(gData, sidebarInfo && sidebarInfo[0]),
+        });
+    }, [sidebarInfo]);
+
+    useEffect(() => {
+        const newGData = addPropertyByIndex(gData, sidebarInfo && sidebarInfo[0], "data", categoryContentData);
+
+        const updatedGData = newGData.map((category: any, index) => {
+            if(category?.data) {
+                return {...category, title: `${category.data.categoryName} ${category.data.questions ? '(Q: ' + category.data.questions.length + ')' : ''} ${category.data.grade ? '(G: ' +category.data.grade + ')' : ''}`}
+            }
+            return category;
+        })
+
+        setGData(updatedGData);
+    }, [categoryContentData]);
+
+    useEffect(() => {
+        props.categorySidebarInfo({
+            selectKey: sidebarInfo, 
+            data: get_element_by_index(gData, sidebarInfo && sidebarInfo[0])
+        });
+
+        console.log(gData);
+    }, [gData]);
+
+    return (
+        <div className={styles.categorySidebar}>
+            <div className={styles.title}>Categorias</div>
+            <Button icon={<PlusOutlined />} onClick={addCategory}>
+                Adicionar Categoria
+            </Button>
+
+            <div className={styles.categoryViewer}>
+                <Tree
+                    className="draggable-tree"
+                    defaultExpandedKeys={expandedKeys}
+                    draggable
+                    blockNode
+                    onDragEnter={onDragEnter}
+                    onDrop={onDrop}
+                    treeData={gData}
+                    onSelect={onSelect}
+                />
+            </div>
+        </div>
+    );
+};

package/src/components/Category/CategorySidebar/styles.module.scss

@@ -0,0 +1,24 @@
+.categorySidebar {
+    :global {
+        .ant-tree-title {
+            font-weight: var(--font-weight-semibold);
+        }
+    }
+}
+
+.title {
+    font-size: var(--font-size-body-4);
+    font-weight: 600;
+    line-height: 100%;
+    color: var(--color-blue);
+    text-transform: uppercase;
+}
+
+button {
+    margin-top: 32px;
+    width: 100%;
+}
+
+.categoryViewer {
+    margin-top: 20px;
+}

package/src/components/Category/index.tsx

@@ -0,0 +1,58 @@
+import styles from './styles.module.scss';
+import { CategorySidebar, DataNode } from './CategorySidebar';
+import { useEffect, useState } from 'react';
+import { CategoryContent } from './CategoryContent';
+
+interface Category {
+    data: DataNode;
+}
+
+const fakeData: any = {
+    data: [
+        {
+            "title": "21  (G: 2)",
+            "key": "0",
+            "data": {
+                "categoryName": "21",
+                "grade": "2"
+            }
+        },
+        {
+            "title": "asda  (G: 5)",
+            "key": "1",
+            "data": {
+                "categoryName": "asda",
+                "grade": "5"
+            }
+        }
+    ],
+    noData: []
+}
+
+export const Category = (props: Category) => {
+    const {
+        data = fakeData.noData
+    } = props;
+
+    const [categoryContentInfo, setCategoryContentInfo] = useState<any>();
+    const [categorySidebarInfo, setCategorySidebarInfo] = useState<any>();
+    const [showContent, setShowContent] = useState<boolean>(false);
+
+    useEffect(() => {
+    }, [categoryContentInfo]);
+
+    useEffect(() => {
+        setShowContent(categorySidebarInfo?.selectKey?.length > 0);
+    }, [categorySidebarInfo]);
+
+    return (
+        <div className={styles.category}>
+            <div className={styles.sidebarWrapper}>
+                <CategorySidebar categorySidebarInfo={setCategorySidebarInfo} categoryContentData={categoryContentInfo} data={data} />
+            </div>
+            <div className={styles.contentWrapper}>
+                <CategoryContent categoryContentInfo={setCategoryContentInfo} categoryContentShow={showContent} categorySidebarData={categorySidebarInfo} />
+            </div>
+        </div>
+    )
+};

package/src/components/Category/styles.module.scss

@@ -0,0 +1,12 @@
+.category {
+    display: grid;
+    grid-template-columns: 300px auto;
+    gap: 16px;
+}
+
+.sidebarWrapper,
+.contentWrapper {
+    background: white;
+    padding: 20px;
+}
+

package/src/components/Radio/index.tsx

@@ -4,7 +4,6 @@ import type { RadioGroupProps } from 'antd/lib/radio';
 import styles from './styles.module.scss';
 
 export const Radio = ({...radioProps }: RadioProps) => {
-
     return (
         <RadioAntd className={styles.radio} {...radioProps} />
     )