@omniumretail/component-library 0.1.15 → 0.1.17

package/dist/main.css

@@ -52,10 +52,10 @@
   color: var(--button-disabled-default-text-color);
   pointer-events: none;
 }
-/*!***************************************************************************************************************************************************************!*\
-  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Header/styles.module.scss ***!
-  \***************************************************************************************************************************************************************/
-.SF5f_Q_Ggz_4JHUHS2Xa {
+/*!*******************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Navigation/styles.module.scss ***!
+  \*******************************************************************************************************************************************************************/
+.UxfXOleP69PjM5rFOMTD {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   justify-items: center;
@@ -65,23 +65,23 @@
   position: relative;
 }
 @media (max-width: 767px) {
-  .SF5f_Q_Ggz_4JHUHS2Xa {
+  .UxfXOleP69PjM5rFOMTD {
     padding-top: 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
 }
-.SF5f_Q_Ggz_4JHUHS2Xa .fVSt3bSZBcJGsOdA5nIN {
+.UxfXOleP69PjM5rFOMTD .LzcTbjk0fp70tXlKd3eS {
   font-size: var(--font-size-body-4);
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
 }
-.SF5f_Q_Ggz_4JHUHS2Xa .yVW6IeVCSAwXxdRW9PIK {
+.UxfXOleP69PjM5rFOMTD .gn06XRZhFG00HaVjAqNc {
   align-self: center;
 }
 @media (max-width: 767px) {
-  .SF5f_Q_Ggz_4JHUHS2Xa .yVW6IeVCSAwXxdRW9PIK {
+  .UxfXOleP69PjM5rFOMTD .gn06XRZhFG00HaVjAqNc {
     position: absolute;
     top: 0;
     margin: 0 auto;
@@ -90,10 +90,10 @@
     text-align: center;
   }
 }
-.SF5f_Q_Ggz_4JHUHS2Xa .zpR1xIlHnIvOAGtMYHMN {
+.UxfXOleP69PjM5rFOMTD .UK3esJZjnri5Jb9Jxcca {
   justify-self: start;
 }
-.SF5f_Q_Ggz_4JHUHS2Xa .cZ7HbAWj4tgAgHB3UcVg {
+.UxfXOleP69PjM5rFOMTD .U5tZ7kRlrIHUKsuduD1S {
   justify-self: end;
 }
 /*!*************************************************************************************************************************************************************!*\
@@ -273,7 +273,7 @@
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/DatePicker/styles.module.scss ***!
   \*******************************************************************************************************************************************************************/
 .vdTO5pKaLXA2FdyblLq5 {
-  border: 1px solid var(--button-border-color) !important;
+  border-color: rgba(var(--color-black-rgb), 0.5);
 }
 /*!**************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Radio/styles.module.scss ***!

package/dist/types/components/{Header/Header.stories.d.ts → Navigation/Navigation.stories.d.ts}

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

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

@@ -0,0 +1,10 @@
+export interface NavigationProps {
+    backLink?: boolean;
+    title: string;
+    homeLink?: boolean;
+    loginLink?: boolean;
+    loginOnClickFunction?: () => void;
+    backLinkOnClickFunction?: () => void;
+    homeOnClickFunction?: () => void;
+}
+export declare const Navigation: (props: NavigationProps) => JSX.Element;

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

@@ -1,2 +1,5 @@
 import { SelectProps } from 'antd';
-export declare const CustomSelect: (props: SelectProps) => any;
+export interface CustomSelectProps extends SelectProps {
+    customClass?: string;
+}
+export declare const CustomSelect: (props: CustomSelectProps) => any;

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

@@ -5,3 +5,4 @@ export default _default;
 export declare const Primary: Story<customTableProps>;
 export declare const Secondary: Story<customTableProps>;
 export declare const WithCheckbox: Story<customTableProps>;
+export declare const withActions: Story<customTableProps>;

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

@@ -4,6 +4,10 @@ export interface FilterOptions {
     label: string;
     direction: string;
 }
+export interface Actions {
+    key: string;
+    label: string;
+}
 export declare enum sortBy {
     asc = "asc",
     desc = "desc"
@@ -15,5 +19,7 @@ export interface customTableProps extends TableProps<any> {
     sortInfo?: any;
     paginationInfo?: any;
     headingTranslationsKey?: string;
+    actions: boolean;
+    actionsArray: any;
 }
 export declare const CustomTable: (props: customTableProps) => JSX.Element;

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

@@ -1,5 +1,5 @@
 export * from './Button';
-export * from './Header';
+export * from './Navigation';
 export * from './Input';
 export * from './InputCountryCode';
 export * from './Label';

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

@@ -1 +1 @@
-export {};
+export declare const mergei18n: (appResources: any) => void;

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './constants/i18n';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",
@@ -43,6 +43,7 @@
     "jest": "^27.4.3",
     "jest-resolve": "^27.4.2",
     "jest-watch-typeahead": "^1.0.0",
+    "lodash.merge": "^4.6.2",
     "mini-css-extract-plugin": "^2.7.2",
     "moment": "^2.29.4",
     "postcss": "^8.4.4",

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

@@ -1,4 +1,3 @@
 .sitooDatePicker {
-    border: 1px solid var(--button-border-color) !important;
+    border-color: rgba(var(--color-black-rgb), .5);
 }
-  

package/src/components/{Header/Header.stories.tsx → Navigation/Navigation.stories.tsx}

@@ -1,16 +1,17 @@
 import { Meta, Story } from "@storybook/react";
-import { Header, HeaderProps } from '.';
+import { Navigation, NavigationProps } from '.';
 
 export default {
-    title: 'Header',
-    component: Header,
+    title: 'Navigation',
+    component: Navigation,
 } as Meta;
 
-const Template: Story<HeaderProps> = (args) => <Header {...args}></Header>;
+const Template: Story<NavigationProps> = (args) => <Navigation {...args}></Navigation>;
 
 export const Primary = Template.bind({});
 Primary.args = {
     backLink: true,
     title: 'Gestão de Aplicações',
     homeLink: true,
+    loginLink: true,
 };

package/src/components/{Header → Navigation}/index.tsx

@@ -2,29 +2,31 @@ import styles from './styles.module.scss';
 import { Link } from '../Link';
 import { ArrowLeftOutlined, HomeOutlined, LogoutOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
-export interface HeaderProps {
+export interface NavigationProps {
     backLink?: boolean;
     title: string;
     homeLink?: boolean;
     loginLink?: boolean;
-    onClickFunction?: () => void;
+    loginOnClickFunction?: () => void;
+    backLinkOnClickFunction?: () => void;
+    homeOnClickFunction?: () => void;
 }
 
-export const Header = (props: HeaderProps) => {
-    const { backLink, title, homeLink, onClickFunction, loginLink } = props;
+export const Navigation = (props: NavigationProps) => {
+    const { backLink, title, homeLink, loginOnClickFunction, loginLink, backLinkOnClickFunction, homeOnClickFunction } = props;
     const { t } = useTranslation();
 
     return (
-        <div className={styles.header}>
+        <div className={styles.navigation}>
             <div className={styles.columnLeft}>
-            { backLink && <Link href="#" icon={<ArrowLeftOutlined />} linkSecondary> {t('navigation.back')} </Link> }
+            { backLink && <Link href="#" icon={<ArrowLeftOutlined />} linkSecondary onClick={backLinkOnClickFunction}> {t('navigation.back')} </Link> }
             </div>
             <div className={styles.columnCenter}>
                 <h1 className={styles.title}>{title}</h1>
             </div>
             <div className={styles.columnRight}>
-                {homeLink && <Link href="#" icon={<HomeOutlined />} linkSecondary iconAlignRight> {t('navigation.home')} </Link>}
-                {loginLink && <Link href="#" onClick={onClickFunction} icon={<LogoutOutlined />} linkSecondary iconAlignRight> {t('navigation.logout')} </Link>}
+                {homeLink && <Link href="#" icon={<HomeOutlined />} linkSecondary iconAlignRight onClick={homeOnClickFunction}> {t('navigation.home')} </Link>}
+                {loginLink && <Link href="#" onClick={loginOnClickFunction} icon={<LogoutOutlined />} linkSecondary iconAlignRight> {t('navigation.logout')} </Link>}
             </div>
         </div>
     )

package/src/components/{Header → Navigation}/styles.module.scss

@@ -1,4 +1,4 @@
-.header {
+.navigation {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: center;

package/src/components/Select/index.tsx

@@ -1,13 +1,17 @@
 import styles from './styles.module.scss';
 import { Select, SelectProps } from 'antd';
 
-export const CustomSelect = (props: SelectProps) => {
-    const { defaultValue, options } = props;
+export interface CustomSelectProps extends SelectProps {
+    customClass?: string;
+}
+
+export const CustomSelect = (props: CustomSelectProps) => {
+    const { defaultValue, options, customClass } = props;
 
     return (
         (options || defaultValue) && 
         <Select
-            className={styles.select}
+            className={`${styles.select} ${customClass}`}
             defaultValue={defaultValue}
             style={{ minWidth: 180 }}
             options={options}

package/src/components/Table/Table.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, Story } from "@storybook/react";
 import { CustomTable, customTableProps } from '.';
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export default {
     title: 'customTable',
@@ -8,20 +9,30 @@ export default {
 } as Meta;
 
 const Template: Story<customTableProps> = (args) => {
+    const { t } = useTranslation();
     const [pageInfo, setPageInfo] = useState<any>({});
     // const [sortingInfo, setSortingInfo] = useState<any>({});
     const [sortBy, setSortBy] = useState<string[]>(['key', 'desc']);
 
     const newDataSource = args.dataSource?.slice().sort((a, b) => {
-        if(sortBy[1] === 'asc') {
+        if (sortBy[1] === 'asc') {
             return a[sortBy[0]].localeCompare(b[sortBy[0]]);
         } else {
-            debugger;
             return b[sortBy[0]].localeCompare(a[sortBy[0]]);
         }
     });
 
-    return <CustomTable {...args} dataSource={newDataSource} onSort={(field, sort) => setSortBy([field, sort]) } paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} ></CustomTable>;
+    return <CustomTable {...args} dataSource={newDataSource} onSort={(field, sort) => setSortBy([field, sort])} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} actionsArray={
+        [
+            { key: '1', label: `${t('actions.one')}`, onClick: () => {
+                console.log('oi');
+            } },
+            { key: '2', label: `${t('actions.two')}` },
+            {
+                key: '3', label: 'label 3'
+            }
+        ]
+    }></CustomTable>;
 };
 
 export const Primary = Template.bind({});
@@ -150,3 +161,48 @@ WithCheckbox.args = {
         type: "checkbox"
     }
 };
+
+export const withActions = Template.bind({});
+withActions.args = {
+    fieldsToSort: ['store', 'mecanographicNumber'],
+    selectPlaceholder: 'Order by',
+    dataSource: [
+        {
+            key: `1`,
+            name: `John Brown`,
+            mecanographicNumber: "232",
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+        {
+            key: `2`,
+            name: `Mary Brown`,
+            mecanographicNumber: "32",
+            store: `Levi's Sta Catarina`,
+            role: `Comercial`,
+            type: `Efetivo`
+        },
+        {
+            key: `3`,
+            name: `Anna Astori`,
+            mecanographicNumber: "3212",
+            store: `Levi's Sta Catarina`,
+            role: `Funcionário`,
+            type: `Efetivo`
+        },
+        {
+            key: `4`,
+            name: `Yield Ona`,
+            mecanographicNumber: "21232",
+            store: `Adidas Restaurantes`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+    ],
+    pagination: {
+        total: 24,
+        pageSize: 4
+    },
+    actions: true,
+};

package/src/components/Table/index.tsx

@@ -1,14 +1,20 @@
 import { useState, useEffect } from 'react';
-import { Space, TableProps, Select } from 'antd';
+import { Space, TableProps, Select, Dropdown, MenuProps } from 'antd';
 import { Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import styles from './styles.module.scss';
 import { useTranslation } from 'react-i18next';
+import { EllipsisOutlined } from '@ant-design/icons';
 
 export interface FilterOptions {
-    value: string,
-    label: string,
-    direction: string,
+    value: string;
+    label: string;
+    direction: string;
+}
+
+export interface Actions {
+    key: string;
+    label: string;
 }
 
 export enum sortBy {
@@ -23,18 +29,22 @@ export interface customTableProps extends TableProps<any> {
     sortInfo?: any;
     paginationInfo?: any;
     headingTranslationsKey?: string;
+    actions: boolean;
+    actionsArray: any;
 }
 
 export const CustomTable = (props: customTableProps) => {
     const { t } = useTranslation();
 
-    const { 
-        dataSource, 
-        fieldsToSort = ['key', 'name', 'store'], 
-        selectPlaceholder, onSort, 
-        headingTranslationsKey 
+    const {
+        dataSource,
+        fieldsToSort = ['key', 'name', 'store'],
+        selectPlaceholder, onSort,
+        headingTranslationsKey,
+        actions,
+        actionsArray: items,
     } = props;
-    
+
     const [customFilters, setCustomFilters] = useState<any>([]);
     const [customColumns, setCustomColumns] = useState<ColumnsType<any>>([]);
     const [sortInfo, setSortInfo] = useState<any>([]);
@@ -44,7 +54,7 @@ export const CustomTable = (props: customTableProps) => {
             currentPage: pagination.current,
         }
 
-        const getSortAndPaginationInfo = {...sortInfo, ...getPagination}
+        const getSortAndPaginationInfo = { ...sortInfo, ...getPagination }
         props.paginationInfo(getSortAndPaginationInfo);
     };
 
@@ -60,12 +70,32 @@ export const CustomTable = (props: customTableProps) => {
 
     useEffect(() => {
         // Columns
-        const columns = Object.keys(dataSource?.[0]).map(key => ({
-            title: headingTranslationsKey ? `${headingTranslationsKey}.${key}` : key,
-            dataIndex: key,
-            key: key,
-            ellipsis: true,
-        }));
+        let columns = Object.keys(dataSource?.[0]).map(key => {
+            return ({
+                title: headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key,
+                dataIndex: key,
+                key: key,
+                ellipsis: true,
+            })
+        });
+
+        let columnActions = {
+            title: 'Action',
+            key: 'action',
+            dataIndex: 6,
+            ellipsis: false,
+            render: () => (
+                <Space size="middle">
+                    <Dropdown menu={{ items }}>
+                        <a>
+                            <EllipsisOutlined />
+                        </a>
+                    </Dropdown>
+                </Space>
+            ),
+        };
+
+        actions && columns.push(columnActions as any);
 
         setCustomColumns(columns);
 
@@ -113,15 +143,8 @@ export const CustomTable = (props: customTableProps) => {
                 dataSource={dataSource}
                 onChange={handleChange}
                 {...props}
-            >
-                {customColumns.map((column) => (
-                    <Table.Column
-                        key={column.key}
-                        title={headingTranslationsKey ? t(column.title as string) : column.title}
-                        dataIndex={(column as any).dataIndex}
-                    />
-                ))}
-            </Table>
+                columns={customColumns}
+            />
         </div>
     );
 } 

package/src/components/index.tsx

@@ -1,5 +1,5 @@
 export * from './Button';
-export * from './Header';
+export * from './Navigation';
 export * from './Input';
 export * from './InputCountryCode';
 export * from './Label';

package/src/constants/i18n.ts

@@ -4,19 +4,22 @@ import { initReactI18next } from "react-i18next";
 import en from '../locales/en.json';
 import es from '../locales/es.json';
 import pt from '../locales/pt.json';
+var merge = require('lodash.merge');
 
-i18next
+export const mergei18n = (appResources: any) => {
+    i18next
     .use(initReactI18next)
     .use(LanguageDetector)
     .init({
-        resources: {
+        resources: merge({
             en: { translation: en },
             pt: { translation: pt },
             es: { translation: es },
-        },
+        }, appResources),
         detection: {
             order: ['querystring', 'navigator', 'htmlTag'],
             lookupQuerystring: 'lng',
             htmlTag: document.documentElement,
         },
     });
+}

package/src/index.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './constants/i18n';

package/src/locales/en.json

@@ -11,5 +11,9 @@
         "back": "Go Back",
         "logout": "Log Out",
         "home": "Home"
+    },
+    "actions": {
+        "one": "one",
+        "two": "two"
     }
 }

package/src/locales/es.json

@@ -11,5 +11,9 @@
         "back": "Go Back ES",
         "logout": "Log Out ES",
         "home": "Home ES"
+    },
+    "actions": {
+        "one": "one ES",
+        "two": "two ES"
     }
 }

package/src/locales/pt.json

@@ -11,5 +11,9 @@
         "back": "Go Back PT",
         "logout": "Log Out PT",
         "home": "Home PT"
+    },
+    "actions": {
+        "one": "one PT",
+        "two": "two PT"
     }
 }

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

@@ -1,8 +0,0 @@
-export interface HeaderProps {
-    backLink?: boolean;
-    title: string;
-    homeLink?: boolean;
-    loginLink?: boolean;
-    onClickFunction?: () => void;
-}
-export declare const Header: (props: HeaderProps) => JSX.Element;