@omniumretail/component-library 1.0.37 → 1.0.39

package/dist/main.css

@@ -709,3 +709,219 @@ Label {
 .j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .anticon-close:hover {
   color: var(--color-black);
 }
+/*!*********************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/AnalyticsBar/styles.module.scss ***!
+  \*********************************************************************************************************************************************************************/
+.BWmwZ5nFKyctBZyOAXzg {
+  width: 100%;
+}
+
+.GWTSauaAl_v9W8o4YPxW {
+  background: rgba(44, 45, 46, 0.0509803922);
+  height: 100%;
+  position: relative;
+}
+.GWTSauaAl_v9W8o4YPxW .ant-menu-light {
+  background-color: transparent !important;
+  border-inline-end: none !important;
+}
+.GWTSauaAl_v9W8o4YPxW .ant-menu-title-content {
+  font-size: 17px;
+  line-height: 20px;
+  font-weight: var(--font-weight-semibold);
+}
+.GWTSauaAl_v9W8o4YPxW .ant-menu-title-content:hover {
+  color: var(--color-orange);
+}
+.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-title-content {
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: var(--font-weight-medium);
+}
+.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-item {
+  height: 30px;
+  line-height: 30px;
+}
+.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-item:first-child {
+  margin-top: -10px;
+}
+.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu {
+  border-top: 1px solid var(--color-orange);
+  border-radius: 0;
+}
+.GWTSauaAl_v9W8o4YPxW .ant-menu-item:hover {
+  background-color: initial !important;
+}
+.GWTSauaAl_v9W8o4YPxW .ant-menu-item-selected,
+.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-selected > .ant-menu-submenu-title {
+  color: var(--color-orange);
+  background-color: initial;
+}
+.GWTSauaAl_v9W8o4YPxW .ant-menu-inline .ant-menu-sub.ant-menu-inline {
+  background: initial;
+}
+.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title {
+  height: 50px !important;
+  line-height: 50px !important;
+}
+.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title:hover {
+  background-color: initial !important;
+}
+.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title .anticon {
+  color: var(--color-orange);
+}
+
+.hWGer1IJ7RdkfQWwYfsw {
+  position: absolute;
+  top: 24px;
+  left: 24px;
+  right: 24px;
+  height: 144px;
+}
+
+.MD1FhirslDDwd2izGwai {
+  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;
+}
+
+.RxGn4c38kNq8Ai4ypW_x {
+  position: absolute;
+  top: 144px;
+  left: 24px;
+  right: 24px;
+  bottom: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 24px;
+}
+/*!*************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/CategoryResponse/styles.module.scss ***!
+  \*************************************************************************************************************************************************************************/
+.rdjN4ln3xiUoa6Q0NMMm {
+  display: grid;
+  grid-template-columns: 300px auto;
+  gap: 16px;
+  height: 100%;
+}
+
+.Q4flbvKEPN6Jx9Cob22I {
+  background: #EBECED;
+}
+
+.hK3soC6m563VuiLnNutq {
+  background: var(--color-white);
+}
+
+.Q4flbvKEPN6Jx9Cob22I,
+.hK3soC6m563VuiLnNutq {
+  padding: 20px;
+}
+
+.guqqOMHeZE56Bg2p5Ad8 {
+  font-size: var(--font-size-body-4);
+  color: var(--color-blue);
+  margin-bottom: 36px;
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+}
+
+.wRCQxnQc_MZGDeiY1bcL {
+  padding-bottom: 15px;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-4);
+}
+
+.JRmeFBsSP1f1HJwarMpc {
+  cursor: pointer;
+}
+
+.Y6yF3VITdrKdQzDtqTZX {
+  padding-left: 16px;
+}
+.Y6yF3VITdrKdQzDtqTZX .wRCQxnQc_MZGDeiY1bcL {
+  font-weight: var(--font-weight-medium);
+}
+.Y6yF3VITdrKdQzDtqTZX .aKZCkmPsc0LiPdj3sEeG .Y6yF3VITdrKdQzDtqTZX .wRCQxnQc_MZGDeiY1bcL {
+  font-weight: var(--font-weight-light);
+}
+
+.aKZCkmPsc0LiPdj3sEeG {
+  display: block;
+}
+
+.U_3frSKmaOQyTCb9oBkg {
+  color: var(--color-orange);
+}
+
+.GEZDeWAneRLnZQyf4y9l {
+  margin-bottom: 24px;
+}
+
+.YcOvMLXE7vKR2Y0_BPRr {
+  font-size: var(--font-size-body-4);
+  color: var(--color-blue);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: 8px;
+}
+
+.vlMh_CCr45wbKV4fMhJx {
+  font-size: var(--font-size-body-3);
+  font-weight: var(--font-weight-light);
+  color: var(--color-black);
+}
+
+.NZ_ohAxNxhxZsCBr2PRA {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  margin-bottom: 36px;
+}
+
+.CArVrMs2ac6JvM1VGLSw {
+  flex-direction: column;
+  border-bottom: 1px solid rgba(var(--color-blue-rgb), 0.2);
+  margin-bottom: 24px;
+}
+.CArVrMs2ac6JvM1VGLSw .OpqJ6gab6fPIq3KyckPO {
+  width: 100%;
+  border-bottom: none;
+}
+.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV {
+  width: 100%;
+  height: auto;
+}
+.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV .ant-input {
+  min-height: 140px;
+}
+.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV .ant-form-item {
+  margin-bottom: 16px;
+}
+
+.OpqJ6gab6fPIq3KyckPO {
+  width: calc(100% - 112px);
+  border-bottom: 1px solid rgba(var(--color-blue-rgb), 0.2);
+}
+
+.E9TXHxbgaI6LGMZHG9bV {
+  width: 100px;
+  height: 50px;
+  align-self: flex-end;
+}
+
+.xdLvKgnXC4tm2aa6tAap {
+  font-size: var(--font-size-body-3);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: 8px;
+}
+
+.r5obiTduSUBq1uL7oceW {
+  font-weight: var(--font-weight-light);
+  margin-bottom: 4px;
+}

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,2 @@
+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/components/index.d.ts

@@ -17,3 +17,5 @@ export * from './Sidebar';
 export * from './Switch';
 export * from './Category';
 export * from './DatePickerTag';
+export * from './AnalyticsBar';
+export * from './CategoryResponse';

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.39",
   "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 '../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',
+}