@omniumretail/component-library 1.0.20 → 1.0.22

package/dist/main.css

@@ -522,3 +522,163 @@
 .gER2xKwlnobsIz4BLhGJ[aria-checked=true] {
   background: var(--color-orange) !important;
 }
+/*!*****************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Category/styles.module.scss ***!
+  \*****************************************************************************************************************************************************************/
+.lOKzfPUFf3ukLT2wGZaY {
+  display: grid;
+  grid-template-columns: 300px auto;
+  gap: 16px;
+}
+
+.OIrZOBn2f036M5MGzc61,
+.adDQP_uvIYgNFVC4VdHj {
+  background: white;
+  padding: 20px;
+}
+/*!*********************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Category/CategorySidebar/styles.module.scss ***!
+  \*********************************************************************************************************************************************************************************/
+.yBjbWkudwA_AOwhHrnlc .ant-tree-title {
+  font-weight: var(--font-weight-semibold);
+}
+
+.je000VEfsPqZupGr8ymu {
+  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%;
+}
+
+.tUDGWNXopUejF6zWJloy {
+  margin-top: 20px;
+}
+/*!*********************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Questions/SingleQuestion/styles.module.scss ***!
+  \*********************************************************************************************************************************************************************************/
+.O0Juh2loT1HHb612gOA4 .ant-form-item {
+  margin-bottom: 0;
+}
+.O0Juh2loT1HHb612gOA4 .ant-space {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  border-bottom: 1px solid var(--color-blue);
+  padding: 16px 10px;
+}
+.O0Juh2loT1HHb612gOA4 .ant-space-item {
+  width: 100%;
+}
+
+.hg7oiINfKCZSUt6dEq4A {
+  display: none;
+}
+
+.BAso_dbeoowN7VtxWiKx {
+  display: grid;
+  grid-template-columns: minmax(18px, auto) 1fr 90px;
+  gap: 20px;
+  color: var(--color-black);
+  font-size: var(--font-size-body-4);
+  line-height: 100%;
+  font-weight: var(--font-weight-medium);
+  align-items: center;
+}
+
+.qg_bZXG9dQdJvLBRGuqw {
+  display: grid;
+  grid-template-columns: minmax(18px, auto) 1fr 90px;
+  gap: 20px;
+  color: var(--color-grey-dark);
+  font-size: var(--font-size-body-3);
+  align-items: center;
+}
+
+.y8UJFmCyGQzEQk4XjnI9 {
+  display: none;
+}
+
+.kknDal3CIbUXI7Lu2wPV {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 20px;
+}
+
+.upuPapYjj1uGowukEEIi {
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.KfrJPVKxY4b6bmXeJL5U {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.zRPlv7rfSSACHPLZLs16,
+.EHyxN8DmDHOLkQDROSV5,
+.NLIlnBPfo09cpWYzpZ_J {
+  font-size: var(--font-size-body-5);
+  cursor: pointer;
+}
+
+.AHIc83P7PkYUr3no83sO {
+  margin-top: 24px;
+}
+/*!*********************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Category/CategoryContent/styles.module.scss ***!
+  \*********************************************************************************************************************************************************************************/
+.vw302ajYc4_7bIROncyM {
+  font-size: var(--font-size-body-4);
+  font-weight: 600;
+  line-height: 100%;
+  color: var(--color-blue);
+  text-transform: uppercase;
+  margin-bottom: 32px;
+}
+
+.DrsaZTs1Ny6wZ76RwDR9 {
+  font-size: var(--font-size-body-2);
+  color: var(--color-black);
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.HVSssNqaNxLcYT_1lxBL {
+  display: grid;
+  grid-template-columns: minmax(200px, 1fr) auto 1fr auto;
+  gap: 46px;
+}
+
+.ACPbYsV0wNkissVLHcFh {
+  margin-top: 16px;
+}
+
+Label {
+  margin-bottom: 8px;
+}
+
+.g19LZsD26yzPPjBtV31w .ant-select {
+  width: 100%;
+}
+.g19LZsD26yzPPjBtV31w .ant-select-selector {
+  border-color: rgba(var(--color-black-rgb), 0.5) !important;
+  height: 50px !important;
+  display: flex;
+  align-items: center;
+}
+.g19LZsD26yzPPjBtV31w .ant-select-arrow {
+  color: var(--color-black);
+}
+.g19LZsD26yzPPjBtV31w .ant-switch {
+  width: 30px;
+}

package/dist/types/components/Category/Category.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/Category/CategoryContent/index.d.ts

@@ -0,0 +1,7 @@
+interface categoryContent {
+    categoryContentShow: boolean;
+    categoryContentInfo: any;
+    categorySidebarData: any;
+}
+export declare const CategoryContent: (props: categoryContent) => JSX.Element;
+export {};

package/dist/types/components/Category/CategorySidebar/index.d.ts

@@ -0,0 +1,25 @@
+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[];
+}
+export declare const CategorySidebar: (props: SidebarProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { DataNode } from './CategorySidebar';
+interface Category {
+    data: DataNode;
+}
+export declare const Category: (props: Category) => JSX.Element;
+export {};

package/dist/types/components/Questions/SingleQuestion/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, ...restField }: any) => JSX.Element;

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Questions: () => JSX.Element;

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

@@ -15,3 +15,4 @@ export * from './ModalConfirmation';
 export * from './ModalWithTable';
 export * from './Sidebar';
 export * from './Switch';
+export * from './Category';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "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 '../../Button';
+import { InputField } from '../../Input';
+import { Label } from '../../Label';
+import { Questions } from '../../Questions';
+import { Switch } from '../../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;
+        }
+    }
+}