@omniumretail/component-library 1.0.37 → 1.0.38

package/dist/bundle.js

@@ -10804,7 +10804,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(module) {
 
 "use strict";
-module.exports = JSON.parse('{"tableHeadings":{"key":"key","name":"name","mecanographicNumber":"Mecanographic Number","store":"Store","role":"Role","type":"Type","id":"Id"},"navigation":{"back":"Go Back","logout":"Log Out","home":"Home"},"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"}}}');
+module.exports = JSON.parse('{"tableHeadings":{"key":"key","name":"name","mecanographicNumber":"Mecanographic Number","store":"Store","role":"Role","type":"Type","id":"Id"},"navigation":{"back":"Go Back","logout":"Log Out","home":"Home"},"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"},"categoryResponse":{"notApplicable":"Not Applicable"}}}');
 
 /***/ }),
 
@@ -10815,7 +10815,7 @@ module.exports = JSON.parse('{"tableHeadings":{"key":"key","name":"name","mecano
 /***/ (function(module) {
 
 "use strict";
-module.exports = JSON.parse('{"tableHeadings":{"key":"keyES","name":"nameES","mecanographicNumber":"Mecanographic NumberES","store":"StoreES","role":"RoleES","type":"TypeES","id":"IdES"},"navigation":{"back":"Go Back ES","logout":"Log Out ES","home":"Home ES"},"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"}}}');
+module.exports = JSON.parse('{"tableHeadings":{"key":"keyES","name":"nameES","mecanographicNumber":"Mecanographic NumberES","store":"StoreES","role":"RoleES","type":"TypeES","id":"IdES"},"navigation":{"back":"Go Back ES","logout":"Log Out ES","home":"Home ES"},"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"},"categoryResponse":{"notApplicable":"Not Applicable ES"}}}');
 
 /***/ }),
 
@@ -10826,7 +10826,7 @@ module.exports = JSON.parse('{"tableHeadings":{"key":"keyES","name":"nameES","me
 /***/ (function(module) {
 
 "use strict";
-module.exports = JSON.parse('{"tableHeadings":{"key":"Chave","name":"Nome","mecanographicNumber":"Número Mecanográfico","store":"Loja","role":"Posição","type":"Tipo","id":"Id","action":"Ação"},"navigation":{"back":"Go Back PT","logout":"Log Out PT","home":"Home PT"},"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"}}}');
+module.exports = JSON.parse('{"tableHeadings":{"key":"Chave","name":"Nome","mecanographicNumber":"Número Mecanográfico","store":"Loja","role":"Posição","type":"Tipo","id":"Id","action":"Ação"},"navigation":{"back":"Go Back PT","logout":"Log Out PT","home":"Home PT"},"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"},"categoryResponse":{"notApplicable":"Não Aplicável"}}}');
 
 /***/ })
 

package/dist/types/components/AnalyticsBar/AnalyticsBar.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from "@storybook/react";
+import { AnalyticsBarProps } from './interfaces/analyticsBar';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<AnalyticsBarProps>;

package/dist/types/components/AnalyticsBar/helpers/codeMutation.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { MenuProps } from 'antd';
+export type MenuItem = Required<MenuProps>['items'][number];
+export declare function getItem(label: React.ReactNode, key: React.Key, icon?: React.ReactNode, children?: MenuItem[], type?: 'group'): MenuItem;

package/dist/types/components/AnalyticsBar/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { AnalyticsBarProps } from './interfaces/analyticsBar';
+export declare const AnalyticsBar: (props: AnalyticsBarProps) => JSX.Element;

package/dist/types/components/AnalyticsBar/interfaces/analyticsBar.d.ts

@@ -0,0 +1,12 @@
+export interface AnalyticsBarProps {
+    data: any;
+    selectOptions: any;
+    selectDefault: any;
+    selectUserOption?: any;
+    sortedBy?: any;
+    activeListItem?: any;
+}
+export declare enum sortBy {
+    asc = "asc",
+    desc = "desc"
+}

package/dist/types/components/CategoryResponse/CategoryResponse.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from "@storybook/react";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<any>;

package/dist/types/components/CategoryResponse/evaluationOptions.d.ts

@@ -0,0 +1,10 @@
+export type EvaluationOption = {
+    value: string;
+    label: string;
+};
+export type EvaluationOptions = {
+    scale_0: EvaluationOption[];
+    scale_1: EvaluationOption[];
+    scale_2: EvaluationOption[];
+};
+export declare const evaluationOptions: EvaluationOptions;

package/dist/types/components/CategoryResponse/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface CategoryResponse {
+    data: any;
+    serverReadyData: any;
+    onNextCategoryAvailabilityChange: (hasNext: boolean) => void;
+    onPreviousCategoryAvailabilityChange: (hasPrevious: boolean) => void;
+}
+export declare const CategoryResponse: React.ForwardRefExoticComponent<CategoryResponse & React.RefAttributes<unknown>>;
+export {};

package/dist/types/components/Menu/Menu.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from "@storybook/react";
+import { MenuProps } from 'antd';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<MenuProps>;

package/dist/types/components/Menu/helpers/codeMutation.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { MenuProps } from 'antd';
+export type MenuItem = Required<MenuProps>['items'][number];
+export declare function getItem(label: React.ReactNode, key: React.Key, icon?: React.ReactNode, children?: MenuItem[], type?: 'group'): MenuItem;

package/dist/types/components/Menu/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { MenuProps } from 'antd';
+export declare const Menu: (props: MenuProps) => JSX.Element;

package/dist/types/constants/translationHelper.d.ts

@@ -0,0 +1,2 @@
+declare const translate: (key: any, options?: {}) => string;
+export default translate;

package/package.json

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

package/src/components/AnalyticsBar/AnalyticsBar.stories.tsx

@@ -0,0 +1,180 @@
+import { Meta, Story } from "@storybook/react";
+import { AnalyticsBar } from '.';
+import { AnalyticsBarProps } from './interfaces/analyticsBar';
+import { getItem } from './helpers/codeMutation';
+import { useMemo, useState } from "react";
+
+export default {
+    title: 'AnalyticsBar',
+    component: AnalyticsBar,
+} as Meta;
+
+const Template: Story<AnalyticsBarProps> = (args) => {
+    const [sortedBy, setSortedBy] = useState<any>('');
+    const [optionInUse, setOptionInUse] = useState<any>();
+    const [activeListItem, setActiveListItem] = useState<any>();
+
+    const data = [
+        {
+            "Label": "PeriodOfExperimentation",
+            "Items": [
+                {
+                    "Id": "C446FFA9-329C-4AF3-A81A-080931C6B978",
+                    "Name": "Name"
+                }
+            ]
+        },
+        {
+            "Label": "PeriodOfExperimentation",
+            "Items": [
+                {
+                    "Id": "C446FFA9-329C-4AF3-A81A-080931C6B978",
+                    "Name": "Name"
+                }
+            ]
+        },
+        {
+            "Label": "PeriodOfExperimentation",
+            "Items": [
+                {
+                    "Id": "C446FFA9-329C-4AF3-A81A-080931C6B978",
+                    "Name": "Name"
+                }
+            ]
+        },
+        {
+            "Label": "PeriodOfExperimentation",
+            "Items": [
+                {
+                    "Id": "C446FFA9-329C-4AF3-A81A-080931C6B978",
+                    "Name": "Name"
+                }
+            ]
+        },
+        {
+            "Label": "PeriodOfExperimentation",
+            "Items": [
+                {
+                    "Id": "C446FFA9-329C-4AF3-A81A-080931C6B978",
+                    "Name": "Name"
+                }
+            ]
+        },
+        {
+            "Label": "PeriodOfExperimentation",
+            "Items": [
+                {
+                    "Id": "C446FFA9-329C-4AF3-A81A-080931C6B978",
+                    "Name": "Name"
+                }
+            ]
+        },
+        {
+            "Label": "PeriodOfExperimentation",
+            "Items": [
+                {
+                    "Id": "C446FFA9-329C-4AF3-A81A-080931C6B978",
+                    "Name": "Name"
+                }
+            ]
+        },
+        {
+            "Label": "PeriodOfExperimentation",
+            "Items": [
+                {
+                    "Id": "C446FFA9-329C-4AF3-A81A-080931C6B978",
+                    "Name": "Name"
+                }
+            ]
+        },
+        {
+            "Label": "PeriodOfExperimentation",
+            "Items": [
+                {
+                    "Id": "C446FFA9-329C-4AF3-A81A-080931C6B978",
+                    "Name": "Name"
+                }
+            ]
+        },
+        {
+            "Label": "PeriodOfExperimentation",
+            "Items": [
+                {
+                    "Id": "C446FFA9-329C-4AF3-A81A-080931C6B978",
+                    "Name": "Name"
+                }
+            ]
+        },
+        {
+            "Label": "Permanent",
+            "Items": [
+                {
+                    "Id": "A3FE0C73-E771-40BB-B87D-1E40597841A6",
+                    "Name": "Evaluation Cycle"
+                },
+                {
+                    "Id": "05A411CC-4350-4779-93C4-B8A511CBBCCD",
+                    "Name": "Evaluation Cycle 2"
+                },
+                {
+                    "Id": "D5A77A3B-1163-4590-9C98-2E6D62442F62",
+                    "Name": "EV2"
+                },
+                {
+                    "Id": "42A6EFDD-6D74-4905-94AE-5B5588967BE6",
+                    "Name": "EV2"
+                },
+                {
+                    "Id": "E39FE86D-6CE1-400A-8BA2-AE31A8E9D9BE",
+                    "Name": "Suuuup"
+                },
+                {
+                    "Id": "7FC59CF0-9478-4705-B1E0-C1B709FFB81B",
+                    "Name": "CicloParaRespostas1"
+                },
+                {
+                    "Id": "767DF403-C33D-4074-B7CA-FE3F4E4B41DD",
+                    "Name": "XPTO"
+                },
+                {
+                    "Id": "DB821A00-D516-467C-8F22-710EA18BFD23",
+                    "Name": "EvaluationCycle for Notifications"
+                }
+            ]
+        }
+    ];
+
+    const selectOptions = [
+        {
+            value: 'ano',
+            label: 'ANO',
+        },
+        {
+            value: 'tipo_de_ciclo',
+            label: 'TIPO DE CICLO',
+        },
+    ];
+
+    const items = useMemo(() => data.map((el: any, index: any) => {
+        return (
+            getItem(
+                el.Label,
+                index,
+                null,
+                el.Items?.map((item: any, subIndex: any) => {
+                    return getItem(item.Name, item.Id);
+                })
+            )
+        )
+    }), [data]);
+
+    // console.log('stories:', sortedBy, optionInUse, activeListItem);
+
+    return <div style={{height: '500px'}}>
+        <AnalyticsBar {...args} data={items} selectOptions={selectOptions} selectDefault={selectOptions[0]} sortedBy={setSortedBy} selectUserOption={setOptionInUse} activeListItem={setActiveListItem}></AnalyticsBar>
+    </div>;
+}
+
+export const Primary = Template.bind({});
+Primary.args = {
+};

package/src/components/AnalyticsBar/helpers/codeMutation.tsx

@@ -0,0 +1,19 @@
+import type { MenuProps } from 'antd';
+
+export type MenuItem = Required<MenuProps>['items'][number];
+
+export function getItem(
+    label: React.ReactNode,
+    key: React.Key,
+    icon?: React.ReactNode,
+    children?: MenuItem[],
+    type?: 'group',
+): MenuItem {
+    return {
+        key,
+        icon,
+        children,
+        label,
+        type,
+    } as MenuItem;
+}

package/src/components/AnalyticsBar/index.tsx

@@ -0,0 +1,76 @@
+import styles from './styles.module.scss';
+import { MinusOutlined, PlusOutlined, SortAscendingOutlined, SortDescendingOutlined } from '@ant-design/icons';
+import { Select } from 'components/Select';
+import type { MenuProps } from 'antd';
+import { Menu } from 'antd';
+import { AnalyticsBarProps, sortBy } from './interfaces/analyticsBar';
+import { useCallback, useEffect, useState } from 'react';
+
+export const AnalyticsBar = (props: AnalyticsBarProps) => {
+    const {
+        data: items = [],
+        selectOptions,
+        selectDefault,
+        selectUserOption,
+        sortedBy,
+        activeListItem
+    } = props;
+
+    const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+    const [sortInfo, setSortInfo] = useState<any>(sortBy.desc);
+
+    const selectOnChange = useCallback((value: any) => {
+        selectUserOption(value);
+    }, [selectUserOption]);
+
+    const setSorter = useCallback(() => {
+        sortInfo === sortBy.desc
+            ? setSortInfo(sortBy.asc)
+            : setSortInfo(sortBy.desc);
+
+        sortedBy(sortInfo);
+    }, [sortInfo]);
+
+    const onClick: MenuProps['onClick'] = (e: any) => {
+        const { key } = e;
+        if (selectedKeys.includes(key)) {
+            setSelectedKeys([]);
+        } else {
+            setSelectedKeys([key]);
+        }
+
+        activeListItem(key);
+    };
+
+    console.log(sortInfo);
+    return (
+        <div className={styles.analyticsbar}>
+            <div className={styles.header}>
+                <Select
+                    options={selectOptions}
+                    customClass={styles.select}
+                    onChange={selectOnChange}
+                    defaultActiveFirstOption
+                    defaultValue={selectDefault}
+                />
+
+                <div className={styles.sorterWrapper} onClick={() => setSorter()}>
+                    {sortInfo === sortBy.desc
+                        ? <>Decrescente <SortDescendingOutlined /></>
+                        : <>Crescente <SortAscendingOutlined /></>
+                    }
+                </div>
+            </div>
+
+            <div className={styles.content}>
+                <Menu
+                    selectedKeys={selectedKeys}
+                    onClick={onClick}
+                    mode="inline"
+                    items={items}
+                    expandIcon={({ isOpen }) => (isOpen ? <MinusOutlined /> : <PlusOutlined />)}
+                />
+            </div>
+        </div>
+    );
+};

package/src/components/AnalyticsBar/interfaces/analyticsBar.tsx

@@ -0,0 +1,13 @@
+export interface AnalyticsBarProps {
+    data: any;
+    selectOptions: any;
+    selectDefault: any;
+    selectUserOption?: any;
+    sortedBy?: any;
+    activeListItem?: any;
+}
+
+export enum sortBy {
+    asc = 'asc',
+    desc = 'desc',
+}

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

@@ -0,0 +1,108 @@
+.select {
+    width: 100%;
+}
+
+.analyticsbar {
+    background: #2C2D2E0D;
+    height: 100%;
+    position: relative;
+
+    :global {
+        .ant-menu-light {
+            background-color: transparent !important;
+            border-inline-end: none !important;
+        }
+
+        .ant-menu-title-content {
+            font-size: 17px;
+            line-height: 20px;
+            font-weight: var(--font-weight-semibold);
+
+            &:hover {
+                color: var(--color-orange);
+            }
+        }
+
+        .ant-menu-sub {
+            .ant-menu-title-content {
+                font-size: 15px;
+                line-height: 18px;
+                font-weight: var(--font-weight-medium);
+            }
+
+            .ant-menu-item {
+                height: 30px;
+                line-height: 30px;
+
+                &:first-child {
+                    margin-top: -10px;
+                }
+            }
+        }
+
+        .ant-menu-submenu {
+            border-top: 1px solid var(--color-orange);
+            border-radius: 0;
+        }
+
+        .ant-menu-item {
+            &:hover {
+                background-color: initial !important;
+            }
+        }
+
+        .ant-menu-item-selected,
+        .ant-menu-submenu-selected >.ant-menu-submenu-title  {
+            color: var(--color-orange);
+            background-color: initial;
+        }
+
+        .ant-menu-inline .ant-menu-sub.ant-menu-inline {
+            background: initial;
+        }
+
+        .ant-menu-submenu-title  {
+            height: 50px !important;
+            line-height: 50px !important;
+
+            &:hover {
+                background-color: initial !important; 
+            }
+
+            .anticon {
+                color: var(--color-orange);
+            }
+        }
+    }
+}
+
+.header {
+    position: absolute;
+    top: 24px;
+    left: 24px;
+    right: 24px;
+    height: 144px;
+}
+
+.sorterWrapper {
+    font-size: var(--font-size-body-2);
+    line-height: 14px;
+    font-weight: var(--font-weight-light);
+    display: inline-block;
+    padding: 12px;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: 60px;
+}
+
+.content {
+    position: absolute;
+    top: 144px;
+    left: 24px;
+    right: 24px;
+    bottom: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-bottom: 24px;
+}

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

@@ -10,11 +10,70 @@ export default {
 const Template: Story<any> = (args) => {
     const [serverData, setServerData] = useState<any>();
 
-    // useEffect(() => {
-    //     console.log(serverData);
-    // }, [serverData])
+    useEffect(() => {
+        console.log(serverData);
+    }, [serverData])
     
-    return <Category {...args} serverReadyData={setServerData} data={[]}></Category>
+    return <Category {...args} serverReadyData={setServerData} data={[
+        {
+            "title": "opgg (Q: 1) ",
+            "key": "0",
+            "data": {
+                "categoryName": "opgg",
+                "openAnswer": true,
+                "questions": [
+                    {
+                        "question": "1",
+                        "info": "2"
+                    }
+                ]
+            },
+            "children": []
+        },
+        {
+            "title": "abcd (Q: 1) (G: 2)",
+            "key": "1",
+            "data": {
+                "categoryName": "abcd",
+                "openAnswer": false,
+                "questions": [
+                    {
+                        "question": "ax1",
+                        "info": "se2",
+                        "grade": "1s"
+                    }
+                ],
+                "generalEvaluationLevel": "2",
+                "grade": "2"
+            },
+            "children": []
+        },
+        {
+            "title": "hasCHild (Q: 0) (G: 12)",
+            "key": "2",
+            "data": {
+                "categoryName": "hasCHild",
+                "openAnswer": false,
+                "generalEvaluationLevel": "0",
+                "grade": "12",
+                "questions": []
+            },
+            "children": [
+                {
+                    "title": "theChild (Q: 0) (G: 12)",
+                    "key": "2.0",
+                    "children": [],
+                    "data": {
+                        "categoryName": "theChild",
+                        "openAnswer": false,
+                        "generalEvaluationLevel": "0",
+                        "grade": "12",
+                        "questions": []
+                    }
+                }
+            ]
+        }
+    ]}></Category>
 };
 
 export const Primary = Template.bind({});
@@ -22,36 +81,4 @@ Primary.args = {
 };
 
 
-// [
-//     {
-//         "title": "opgg (Q: 1) ",
-//         "key": "0",
-//         "data": {
-//             "categoryName": "opgg",
-//             "openAnswer": true,
-//             "questions": [
-//                 {
-//                     "question": "1",
-//                     "info": "2"
-//                 }
-//             ]
-//         }
-//     },
-//     {
-//         "title": "abcd (Q: 1) (G: 2)",
-//         "key": "1",
-//         "data": {
-//             "categoryName": "abcd",
-//             "openAnswer": false,
-//             "questions": [
-//                 {
-//                     "question": "ax1",
-//                     "info": "se2",
-//                     "grade": "1s"
-//                 }
-//             ],
-//             "generalEvaluationLevel": "2",
-//             "grade": "2"
-//         }
-//     }
-// ]
+

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

@@ -92,15 +92,15 @@ export const CategoryContent = (props: categoryContent) => {
 
                                 {categorySidebarData?.data?.children?.length > 0 &&
                                     <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>
+                                        <Label isUppercase>
+                                            Ponderação
+                                        </Label>
+                                        <Form.Item
+                                            name={['grade']}
+                                            rules={[{ required: true, message: 'Grade is Missing' }]}
+                                        >
+                                            <InputField placeholder={'EX: 15%'} />
+                                        </Form.Item>
                                     </div>
                                 }