@omniumretail/component-library 1.0.37 → 1.0.38

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

@@ -0,0 +1,135 @@
+.categoryResponse {
+    display: grid;
+    grid-template-columns: 300px auto;
+    gap: 16px;
+    height: 100%;
+}
+
+.sidebarWrapper {
+    background: #EBECED;
+}
+
+.contentWrapper {
+    background: var(--color-white);
+}
+
+.sidebarWrapper,
+.contentWrapper {
+    padding: 20px;
+}
+
+.title {
+    font-size: var(--font-size-body-4);
+    color: var(--color-blue);
+    margin-bottom: 36px;
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+
+}
+
+.label {
+    padding-bottom: 15px;
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-4);
+}
+
+.cursorPointer {
+    cursor: pointer;
+}
+
+.subCategory {
+    padding-left: 16px;
+
+    .label {
+        font-weight: var(--font-weight-medium);
+    }
+
+    .labelWrapper {
+        .subCategory {
+            .label {
+                font-weight: var(--font-weight-light);
+            }
+        }
+    }
+}
+
+.labelWrapper {
+    display: block;
+}
+
+.active {
+    color: var(--color-orange);
+}
+
+.details {
+    margin-bottom: 24px;
+}
+
+.categoryName {
+    font-size: var(--font-size-body-4);
+    color: var(--color-blue);
+    font-weight: var(--font-weight-semibold);
+    margin-bottom: 8px;
+}
+
+.categoryDescription {
+    font-size: var(--font-size-body-3);
+    font-weight: var(--font-weight-light);
+    color: var(--color-black);
+}
+
+// Questions
+.questionWrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    margin-bottom: 36px;
+}
+
+.questionWrapperOpenAnswer {
+    flex-direction: column;
+    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
+    margin-bottom: 24px;
+
+    .question {
+        width: 100%;
+        border-bottom: none;
+    }
+
+    .answer {
+        width: 100%;
+        height: auto;
+
+        :global {
+            .ant-input {
+                min-height: 140px;
+            }
+            
+            .ant-form-item {
+                margin-bottom: 16px;
+            }
+        }
+    }
+}
+
+.question {
+    width: calc(100% - 112px);
+    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
+}
+
+.answer {
+    width: 100px;
+    height: 50px;
+    align-self: flex-end;
+}
+
+.subject {
+    font-size: var(--font-size-body-3);
+    font-weight: var(--font-weight-medium);
+    margin-bottom: 8px;
+}
+
+.description {
+    font-weight: var(--font-weight-light);
+    margin-bottom: 4px;
+}

package/src/components/Menu/Menu.stories.tsx

@@ -0,0 +1,178 @@
+import { Meta, Story } from "@storybook/react";
+import { Menu } from '.';
+import { MenuProps } from 'antd';
+import { getItem } from './helpers/codeMutation';
+
+export default {
+    title: 'Menu',
+    component: Menu,
+} as Meta;
+
+const Template: Story<MenuProps> = (args) => {
+    const data = [
+        {
+            "Year": 2023,
+            "EvaluationCycles": [
+                {
+                    "Id": "D5A77A3B-1163-4590-9C98-2E6D62442F62",
+                    "Type": "Permanent",
+                    "Name": "EV1",
+                    "Year": 2023,
+                    "StartDate": "2023-03-01T00:00:00Z",
+                    "EndDate": "2023-05-31T23:00:00Z",
+                    "Users": [
+                        {
+                            "UserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                            "UserAnswer": null,
+                            "UserScore": null,
+                            "SupervisorId": null,
+                            "SupervisorAnswer": null,
+                            "SupervisorScore": null
+                        },
+                        {
+                            "UserId": "9D361E92-A748-4E4A-BC5E-0134CE62328E",
+                            "UserAnswer": "982FF376-56AD-4E3F-B0D0-5BD4282A7F78",
+                            "UserScore": 3.333,
+                            "SupervisorId": null,
+                            "SupervisorAnswer": null,
+                            "SupervisorScore": null
+                        },
+                        {
+                            "UserId": "594A4DD5-12B1-4ED0-B00C-EDF729B85C57",
+                            "UserAnswer": null,
+                            "UserScore": null,
+                            "SupervisorId": null,
+                            "SupervisorAnswer": null,
+                            "SupervisorScore": null
+                        }
+                    ],
+                    "QuestionnaireId": "4C15A0A0-7DDF-4952-810C-B46105807CB7",
+                    "State": "Started",
+                    "Notifications": [],
+                    "NotificationAgenda": null,
+                    "Status": "A",
+                    "IsOnlyForUsers": false,
+                    "CreateDate": "2023-02-27T10:50:41.737Z",
+                    "UpdateDate": "2023-02-27T10:52:50.661Z",
+                    "CreateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                    "UpdateUserId": null,
+                    "InitiatDate": "2023-02-27T10:51:00Z",
+                    "CancelDate": "0001-01-01T00:00:00Z"
+                },
+                {
+                    "Id": "42A6EFDD-6D74-4905-94AE-5B5588967BE6",
+                    "Type": "Permanent",
+                    "Name": "EV1",
+                    "Year": 2023,
+                    "StartDate": "2023-03-01T00:00:00Z",
+                    "EndDate": "2023-05-31T23:00:00Z",
+                    "Users": [],
+                    "QuestionnaireId": "4C15A0A0-7DDF-4952-810C-B46105807CB7",
+                    "State": "Draft",
+                    "Notifications": [],
+                    "NotificationAgenda": null,
+                    "Status": "A",
+                    "IsOnlyForUsers": false,
+                    "CreateDate": "2023-02-27T14:52:16.523Z",
+                    "UpdateDate": "2023-02-27T14:53:04.987Z",
+                    "CreateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                    "UpdateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                    "InitiatDate": "0001-01-01T00:00:00Z",
+                    "CancelDate": "0001-01-01T00:00:00Z"
+                }
+            ]
+        },
+        {
+            "Year": 2024,
+            "EvaluationCycles": [
+                {
+                    "Id": "D5A77A3B-1163-4590-9C98-2E6D62442F62",
+                    "Type": "Permanent",
+                    "Name": "EV2",
+                    "Year": 2024,
+                    "StartDate": "2023-03-01T00:00:00Z",
+                    "EndDate": "2023-05-31T23:00:00Z",
+                    "Users": [
+                        {
+                            "UserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                            "UserAnswer": null,
+                            "UserScore": null,
+                            "SupervisorId": null,
+                            "SupervisorAnswer": null,
+                            "SupervisorScore": null
+                        },
+                        {
+                            "UserId": "9D361E92-A748-4E4A-BC5E-0134CE62328E",
+                            "UserAnswer": "982FF376-56AD-4E3F-B0D0-5BD4282A7F78",
+                            "UserScore": 3.333,
+                            "SupervisorId": null,
+                            "SupervisorAnswer": null,
+                            "SupervisorScore": null
+                        },
+                        {
+                            "UserId": "594A4DD5-12B1-4ED0-B00C-EDF729B85C57",
+                            "UserAnswer": null,
+                            "UserScore": null,
+                            "SupervisorId": null,
+                            "SupervisorAnswer": null,
+                            "SupervisorScore": null
+                        }
+                    ],
+                    "QuestionnaireId": "4C15A0A0-7DDF-4952-810C-B46105807CB7",
+                    "State": "Started",
+                    "Notifications": [],
+                    "NotificationAgenda": null,
+                    "Status": "A",
+                    "IsOnlyForUsers": false,
+                    "CreateDate": "2023-02-27T10:50:41.737Z",
+                    "UpdateDate": "2023-02-27T10:52:50.661Z",
+                    "CreateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                    "UpdateUserId": null,
+                    "InitiatDate": "2023-02-27T10:51:00Z",
+                    "CancelDate": "0001-01-01T00:00:00Z"
+                },
+                {
+                    "Id": "42A6EFDD-6D74-4905-94AE-5B5588967BE6",
+                    "Type": "Permanent",
+                    "Name": "EV2",
+                    "Year": 2024,
+                    "StartDate": "2023-03-01T00:00:00Z",
+                    "EndDate": "2023-05-31T23:00:00Z",
+                    "Users": [],
+                    "QuestionnaireId": "4C15A0A0-7DDF-4952-810C-B46105807CB7",
+                    "State": "Draft",
+                    "Notifications": [],
+                    "NotificationAgenda": null,
+                    "Status": "A",
+                    "IsOnlyForUsers": false,
+                    "CreateDate": "2023-02-27T14:52:16.523Z",
+                    "UpdateDate": "2023-02-27T14:53:04.987Z",
+                    "CreateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                    "UpdateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                    "InitiatDate": "0001-01-01T00:00:00Z",
+                    "CancelDate": "0001-01-01T00:00:00Z"
+                }
+            ]
+        }
+    ];
+
+    const items = data.map((el: any, index: any) => {
+        return (
+            getItem(
+                el.Year, 
+                index, 
+                <></>,  
+                el.EvaluationCycles?.map((evCycle: any, subIndex: any) => {
+                    return getItem(evCycle.Name, `${index}-${subIndex}`);
+                })
+            )
+        )
+    });
+
+
+    return <Menu {...args} items={items}></Menu>;
+} 
+
+export const Primary = Template.bind({});
+Primary.args = {
+};

package/src/components/Menu/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/Menu/index.tsx

@@ -0,0 +1,23 @@
+import styles from './styles.module.scss';
+import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Menu as MenuAntd} from 'antd';
+
+export const Menu = (props: MenuProps) => {
+    const { 
+        items
+    } = props;
+
+    const onClick: MenuProps['onClick'] = (e) => {
+        // console.log('click ', e);
+    };
+
+    return (
+        <MenuAntd
+            onClick={onClick}
+            mode="inline"
+            items={items}
+            expandIcon={({ isOpen }) => (isOpen ? <MinusOutlined /> : <PlusOutlined />)}
+        />
+    );
+};

package/src/constants/translationHelper.ts

@@ -0,0 +1,7 @@
+import i18next from 'i18next';
+
+const translate = (key: any, options = {}) => {
+    return i18next.t(key, options);
+};
+
+export default translate;

package/src/locales/en.json

@@ -26,6 +26,9 @@
             "errorQuestion": "Missing Question",
             "placeholderGrade": "Grade",
             "errorGrade": "Missing Grade"
+        },
+        "categoryResponse": {
+            "notApplicable": "Not Applicable"
         }
     }
 }

package/src/locales/es.json

@@ -26,6 +26,9 @@
             "errorQuestion": "Missing Question ES",
             "placeholderGrade": "Grade ES",
             "errorGrade": "Missing Grade ES"
+        },
+        "categoryResponse": {
+            "notApplicable": "Not Applicable ES"
         }
     }
 }

package/src/locales/pt.json

@@ -27,6 +27,9 @@
             "errorQuestion": "Missing Question PT",
             "placeholderGrade": "Grade PT",
             "errorGrade": "Missing Grade PT"
+        },
+        "categoryResponse": {
+            "notApplicable": "Não Aplicável"
         }
     }
 }