@omniumretail/component-library 1.0.70 → 1.0.71

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

@@ -1,236 +1,236 @@
-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": "Teste1",
-                    "Categories": {
-                        "Category": {
-                            "Name": "Category Name Here",
-                            "Questions": [
-                                {
-                                    "Name": "question1",
-                                    "Id": "abc133"
-                                },
-                                {
-                                    "Name": "question2",
-                                    "Id": "abc122"
-                                }
-                            ]
-                        }
-                    } 
-                }
-            ]
-        },
-        {
-            "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 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]);
-
-    const items = useMemo(() => {
-        const createQuestionItems = (questionsData: any[]): any[] => {
-            return questionsData.map((question: any) => {
-                return getItem(question.Name, question.Id);
-            });
-        };
-    
-        const createCategoryItems = (categoryData: any): any[] => {
-            if (categoryData) {
-                return [
-                    getItem(
-                        categoryData.Name,
-                        categoryData.Name,
-                        null,
-                        createQuestionItems(categoryData.Questions)
-                    ),
-                ];
-            }
-            return [];
-        };
-    
-        return data.map((el: any, index: any) => {
-            return getItem(
-                el.Label,
-                index,
-                null,
-                el.Items?.map((item: any) => {
-                    const categoryItems = createCategoryItems(item.Categories?.Category);
-                    return getItem(
-                        item.Name,
-                        item.Id,
-                        null,
-                        categoryItems.length ? categoryItems : undefined
-                    );
-                })
-            );
-        });
-    }, [data]);
-
-
-    const selectOptions = [
-        {
-            value: 'ano',
-            label: 'ANO',
-        },
-        {
-            value: 'tipo_de_ciclo',
-            label: 'TIPO DE CICLO',
-        },
-    ];
-
-    // 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 = {
-};
+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": "Teste1",
+                    "Categories": {
+                        "Category": {
+                            "Name": "Category Name Here",
+                            "Questions": [
+                                {
+                                    "Name": "question1",
+                                    "Id": "abc133"
+                                },
+                                {
+                                    "Name": "question2",
+                                    "Id": "abc122"
+                                }
+                            ]
+                        }
+                    } 
+                }
+            ]
+        },
+        {
+            "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 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]);
+
+    const items = useMemo(() => {
+        const createQuestionItems = (questionsData: any[]): any[] => {
+            return questionsData.map((question: any) => {
+                return getItem(question.Name, question.Id);
+            });
+        };
+    
+        const createCategoryItems = (categoryData: any): any[] => {
+            if (categoryData) {
+                return [
+                    getItem(
+                        categoryData.Name,
+                        categoryData.Name,
+                        null,
+                        createQuestionItems(categoryData.Questions)
+                    ),
+                ];
+            }
+            return [];
+        };
+    
+        return data.map((el: any, index: any) => {
+            return getItem(
+                el.Label,
+                index,
+                null,
+                el.Items?.map((item: any) => {
+                    const categoryItems = createCategoryItems(item.Categories?.Category);
+                    return getItem(
+                        item.Name,
+                        item.Id,
+                        null,
+                        categoryItems.length ? categoryItems : undefined
+                    );
+                })
+            );
+        });
+    }, [data]);
+
+
+    const selectOptions = [
+        {
+            value: 'ano',
+            label: 'ANO',
+        },
+        {
+            value: 'tipo_de_ciclo',
+            label: 'TIPO DE CICLO',
+        },
+    ];
+
+    // 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

@@ -1,19 +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;
-}
+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

@@ -1,76 +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';
-import { t } from 'i18next';
-
-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);
-    };
-
-    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
-                        ? <>{ t('components.analyticsBar.desc') }<SortDescendingOutlined /></>
-                        : <>{ t('components.analyticsBar.asc') }<SortAscendingOutlined /></>
-                    }
-                </div>
-            </div>
-
-            <div className={styles.content}>
-                <Menu
-                    selectedKeys={selectedKeys}
-                    onClick={onClick}
-                    mode="inline"
-                    items={items}
-                    expandIcon={({ isOpen }) => (isOpen ? <MinusOutlined /> : <PlusOutlined />)}
-                />
-            </div>
-        </div>
-    );
-};
+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';
+import { t } from 'i18next';
+
+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);
+    };
+
+    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
+                        ? <>{ t('components.analyticsBar.desc') }<SortDescendingOutlined /></>
+                        : <>{ t('components.analyticsBar.asc') }<SortAscendingOutlined /></>
+                    }
+                </div>
+            </div>
+
+            <div className={styles.content}>
+                <Menu
+                    selectedKeys={selectedKeys}
+                    onClick={onClick}
+                    mode="inline"
+                    items={items}
+                    expandIcon={({ isOpen }) => (isOpen ? <MinusOutlined /> : <PlusOutlined />)}
+                />
+            </div>
+        </div>
+    );
+};