@omniumretail/component-library 0.1.9 → 0.1.10

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

@@ -17,7 +17,6 @@
 
     &:hover {
         background-color: var(--button-default-background-hover-color);
-        //override ANTD default colors
         color: var(--button-default-text-hover-color) !important;
     }
 
@@ -39,14 +38,13 @@
         flex-direction: row-reverse;
         gap: 5px;
     }
-    
+
     &--style1 {
         background-color: var(--button-style-1-background);
         color: var(--button-style-1-text-color);
 
         &:hover {
             background-color: var(--button-style-1-background-hover-color);
-            //override ANTD default colors
             color: var(--button-style-1-text-hover-color) !important;
         }
 

package/src/components/Header/Header.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, Story } from "@storybook/react";
-import { Header, HeaderProps } from './Header';
+import { Header, HeaderProps } from '.';
 
 export default {
     title: 'Header',

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

@@ -1,5 +1,5 @@
 import styles from './styles.module.scss';
-import { Link } from '../Link/Link';
+import { Link } from '../Link';
 import { ArrowLeftOutlined, HomeOutlined, LogoutOutlined } from '@ant-design/icons';
 
 export interface HeaderProps {
@@ -10,7 +10,7 @@ export interface HeaderProps {
 
 export const Header = (props: HeaderProps) => {
     const { backLink, title, homeLink } = props;
-    
+
     return (
         <div className={styles.header}>
             <div className={styles.columnLeft}>

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, Story } from "@storybook/react";
+import { FormInputField, FormInputFieldProps } from '.';
+
+export default {
+    title: 'FormInputField',
+    component: FormInputField,
+} as Meta;
+
+const Template: Story<FormInputFieldProps> = (args) => <FormInputField {...args}></FormInputField>;
+
+export const Primary = Template.bind({});
+Primary.args = {
+};

package/src/components/Input/index.tsx

@@ -0,0 +1,21 @@
+import { Form, FormItemProps, Input, InputProps } from 'antd';
+import React from 'react';
+import { RefAttributes } from 'react';
+import styles from './styles.module.scss';
+
+export interface FormInputFieldProps extends Omit<FormItemProps, "name"> {
+    name: string;
+    inputProps?: InputProps;
+}
+
+export const InputField = (inputProps: InputProps) => (
+    <Input className={styles.input} {...inputProps} />
+);
+
+export const FormInputField = ({ inputProps, ...itemProps }: FormInputFieldProps) => {
+    return (
+        <Form.Item {...itemProps}>
+            <InputField {...inputProps} />
+        </Form.Item>
+    )
+};

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

@@ -0,0 +1,8 @@
+.input {
+    border-color: rgba(var(--color-black-rgb), .5);
+    height: 50px;
+    font-size: var(--font-size-body-3);
+    line-height: 100%;
+    color: var(--color-black);
+    border-radius: 5px;
+}

package/src/components/InputCountryCode/index.tsx

@@ -0,0 +1,65 @@
+import { useCallback, useState, useEffect } from 'react';
+import { Form, FormItemProps, Input, InputProps, SelectProps } from 'antd';
+import { InputField } from '../Input';
+import { CustomSelect } from '../Select';
+import styles from './styles.module.scss';
+
+export interface FormInputCountryCodeProps extends Omit<FormItemProps, "name"> {
+    name: string;
+    selectProps?: SelectProps;
+    inputProps?: InputProps;
+    inputWithSelectBoxValue?: string;
+}
+
+interface CountryCodeProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    selectProps?: SelectProps;
+    inputProps?: InputProps;
+}
+
+const CountryCode = ({ value, onChange, selectProps, inputProps }: CountryCodeProps) => {
+    const[inputDefaultValue, setInputDefaultValue] = useState<any>(inputProps?.defaultValue);
+
+    useEffect(()=> {
+        setInputDefaultValue(inputProps?.defaultValue);
+    }, [])
+
+    const validCountryCode = selectProps?.options?.find((countryCode) => {
+        return value?.startsWith(countryCode.value as string);
+    })?.value || "";
+
+    const phoneNumber = value?.replace(validCountryCode as string || "", "") || "";
+    const changeLocalValue = useCallback((value: string | number, element: string) => {
+        if(element !== 'countryCode') {
+            setInputDefaultValue(value);
+            onChange?.(`${validCountryCode}${value}` || "");
+            return;
+        }
+
+        const valueReplaced = `${value}${phoneNumber}`;
+
+        onChange?.(valueReplaced || "");
+    }, [value, onChange]);
+
+    return (
+        <Input.Group compact className={styles.inputGroup}>
+            <CustomSelect
+                {...selectProps}
+                value={validCountryCode || selectProps?.defaultValue}
+                onChange={(value) => changeLocalValue(value, 'countryCode')}
+            >
+            </CustomSelect>
+            <InputField { ...inputProps } value={phoneNumber || inputDefaultValue} onChange={(event) => changeLocalValue(event.target.value, 'phoneNumber')}/>
+        </Input.Group>
+    )
+}
+
+export const InputCountryCode = ({ inputProps, selectProps, inputWithSelectBoxValue, ...itemProps}: FormInputCountryCodeProps) => {
+
+    return (
+        <Form.Item {...itemProps}>
+            <CountryCode inputProps={inputProps} selectProps={selectProps} />
+        </Form.Item>
+    )
+}

package/src/components/InputCountryCode/inputCountryCode.stories.tsx

@@ -0,0 +1,33 @@
+import { Form , Button} from 'antd';
+import { Meta, Story } from "@storybook/react";
+import { InputCountryCode, FormInputCountryCodeProps } from '.';
+
+export default {
+    title: 'InputCountryCode',
+    component: InputCountryCode,
+} as Meta;
+
+const Template: Story<FormInputCountryCodeProps> = (args) => <Form>
+        <InputCountryCode {...args}></InputCountryCode>
+    </Form>;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    name: "test",
+    inputProps: {
+        defaultValue: 961303639,
+    },
+    selectProps: {
+        defaultValue: 'PT',
+        options: [
+            {
+                label: 'PT',
+                value: '+351',
+            },
+            {
+                label: 'KZ',
+                value: '94',
+            },
+        ]
+    }
+};

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

@@ -0,0 +1,3 @@
+.inputGroup {
+    display: flex !important;
+}

package/src/components/Label/Label.stories.tsx

@@ -1,5 +1,5 @@
 import {Meta, Story} from "@storybook/react";
-import { Label, LabelProps } from './Label';
+import { Label, LabelProps } from '.';
 
 export default {
     title: 'Label',

package/src/components/Link/Link.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, Story } from "@storybook/react";
-import { Link, CustomLinkProps } from './Link';
+import { Link, CustomLinkProps } from '.';
 import { SearchOutlined } from '@ant-design/icons';
 
 export default {
@@ -28,4 +28,3 @@ iconAlignRight.args = {
     linkSecondary: true,
     icon: <SearchOutlined />
 };
-

package/src/components/Select/Select.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, Story } from "@storybook/react";
-import { CustomSelect } from './Select';
+import { CustomSelect } from '.';
 import { SelectProps } from 'antd';
 
 export default {

package/src/components/Select/{Select.tsx → index.tsx}

@@ -11,6 +11,7 @@ export const CustomSelect = (props: SelectProps) => {
             defaultValue={defaultValue}
             style={{ minWidth: 180 }}
             options={options}
-        />
+            {...props}
+        ></Select>
     )
 };

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

@@ -2,6 +2,9 @@
     :global {
         .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);

package/src/components/Separator/Separator.stories.tsx

@@ -1,5 +1,5 @@
 import {Meta, Story} from "@storybook/react";
-import { Separator, SeparatorProps, Spaces } from './Separator';
+import { Separator, SeparatorProps, Spaces } from '.';
 
 export default {
     title: 'Separator',

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

@@ -0,0 +1,152 @@
+import { Meta, Story } from "@storybook/react";
+import { CustomTable, customTableProps } from '.';
+import { useState } from "react";
+
+export default {
+    title: 'customTable',
+    component: CustomTable,
+} as Meta;
+
+const Template: Story<customTableProps> = (args) => {
+    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') {
+            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>;
+};
+
+export const Primary = Template.bind({});
+Primary.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
+    }
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+    dataSource: [
+        {
+            key: `1`,
+            name: `as John Brown`,
+            mecanographicNumber: 232,
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+        {
+            key: `2`,
+            name: `bv Mary Brown`,
+            mecanographicNumber: 32,
+            store: `Levi's Sta Catarina`,
+            role: `Comercial`,
+            type: `Efetivo`
+        },
+        {
+            key: `3`,
+            name: `as Anna Astori`,
+            mecanographicNumber: 3212,
+            store: `Levi's Sta Catarina`,
+            role: `Funcionário`,
+            type: `Efetivo`
+        },
+        {
+            key: `4`,
+            name: `bv Yield Ona`,
+            mecanographicNumber: 21232,
+            store: `Adidas Restaurantes`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+    ],
+    pagination: {
+        total: 4,
+        pageSize: 10
+    }
+};
+
+export const WithCheckbox = Template.bind({});
+WithCheckbox.args = {
+    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`
+        },
+    ],
+    rowSelection: {
+        type: "checkbox"
+    }
+};

package/src/components/Table/index.tsx

@@ -0,0 +1,127 @@
+import { useState, useEffect } from 'react';
+import { Space, TableProps, Select } 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';
+
+export interface FilterOptions {
+    value: string,
+    label: string,
+    direction: string,
+}
+
+export enum sortBy {
+    asc = 'asc',
+    desc = 'desc',
+}
+
+export interface customTableProps extends TableProps<any> {
+    fieldsToSort?: any[],
+    selectPlaceholder?: string,
+    onSort?: (field: any, sortBy: any) => void;
+    sortInfo?: any;
+    paginationInfo?: any;
+    headingTranslationsKey?: string;
+}
+
+export const CustomTable = (props: customTableProps) => {
+    const { t } = useTranslation();
+
+    const { 
+        dataSource, 
+        fieldsToSort = ['key', 'name', 'store'], 
+        selectPlaceholder, onSort, 
+        headingTranslationsKey 
+    } = props;
+    
+    const [customFilters, setCustomFilters] = useState<any>([]);
+    const [customColumns, setCustomColumns] = useState<ColumnsType<any>>([]);
+    const [sortInfo, setSortInfo] = useState<any>([]);
+
+    const handleChange: TableProps<any>['onChange'] = (pagination) => {
+        const getPagination = {
+            currentPage: pagination.current,
+        }
+
+        const getSortAndPaginationInfo = {...sortInfo, ...getPagination}
+        props.paginationInfo(getSortAndPaginationInfo);
+    };
+
+    const setSorter = (option: any) => {
+        onSort?.(option.value.split('-')[0], option.direction);
+        const sortData = {
+            sortDirection: option.direction,
+            sortValue: option.value.split('-')[0],
+        }
+
+        setSortInfo(sortData)
+    };
+
+    useEffect(() => {
+        // Columns
+        const columns = Object.keys(dataSource?.[0]).map(key => ({
+            title: headingTranslationsKey ? `${headingTranslationsKey}.${key}` : key,
+            dataIndex: key,
+            key: key,
+            ellipsis: true,
+        }));
+
+        setCustomColumns(columns);
+
+        // Filters
+        const dataKeysToFilter = Object.keys(dataSource?.[0]).filter((el) => fieldsToSort.includes(el));
+
+        const filters = ([] as FilterOptions[]).concat(
+            ...dataKeysToFilter.map(key => ({
+                value: `${key}-${sortBy.desc}`,
+                label: `${headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key} (${sortBy.desc})`,
+                direction: `${sortBy.desc}`,
+            })),
+            ...dataKeysToFilter.map(key => ({
+                value: `${key}-${sortBy.asc}`,
+                label: `${headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key} (${sortBy.asc})`,
+                direction: `${sortBy.asc}`,
+            }))
+        );
+
+        setCustomFilters(filters);
+    }, [dataSource]);
+
+    const shouldRenderSortDropdown = customFilters.length > 0;
+
+    return (
+        <div className={styles.tableWrapper}>
+            {shouldRenderSortDropdown &&
+                <Space style={{ marginBottom: 16 }}>
+                    <Select
+                        style={{ width: 'auto', minWidth: 200 }}
+                        placeholder={selectPlaceholder}
+                        onSelect={(_, option: any) => {
+                            setSorter(option);
+                        }}
+                        optionFilterProp="children"
+                        filterOption={(input, option) => (option?.label ?? '').includes(input)}
+                        filterSort={(optionA, optionB) =>
+                            (optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())
+                        }
+                        options={customFilters}
+                    />
+                </Space>
+            }
+            <Table
+                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>
+        </div>
+    );
+} 

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

@@ -0,0 +1,63 @@
+.tableWrapper {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+
+    :global {
+        .ant-table-thead > tr > th {
+            background-color: transparent;
+            border: 0px;
+            color: var(--color-blue);
+
+            &:before {
+                display: none;
+            }
+        }
+
+        .ant-table-tbody {
+            > tr {
+                cursor: pointer;
+    
+                &:last-child {
+                    > td {
+                        border-bottom: 1px solid var(--color-grey-light) !important;
+                    }
+                }
+
+                &:first-child {
+                    > td {
+                        border-top: 1px solid var(--color-blue) !important;
+                    }
+                }
+
+                &:hover {
+                    td {
+                        border-radius: 0 !important;
+                        border-bottom-color: var(--color-grey-light) !important;
+                    }
+                }
+            }
+        }
+
+        .ant-space {
+            align-self: flex-end;
+        }
+        
+        .ant-select-selection-placeholder {
+            color: var(--color-black);
+        }
+        
+        .ant-select-selector,
+        .ant-select-focused
+        .ant-select-selection-search {
+            border: none !important;
+            box-shadow: none !important;
+
+            &:focus,
+            &:hover {
+                border: none !important;
+                box-shadow: none !important;
+            }
+        }
+    }
+}

package/src/components/Tag/Tag.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, Story } from "@storybook/react";
-import { TagField } from './Tag';
+import { TagField } from '.';
 import { TagProps } from 'antd';
 
 export default {

package/src/components/index.tsx

@@ -0,0 +1,10 @@
+export * from './Button';
+export * from './Header';
+export * from './Input';
+export * from './InputCountryCode';
+export * from './Label';
+export * from './Link';
+export * from './Select';
+export * from './Separator';
+export * from './Table';
+export * from './Tag';

package/src/constants/i18n.ts

@@ -0,0 +1,22 @@
+import i18next from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from "react-i18next";
+import en from '../locales/en.json';
+import es from '../locales/es.json';
+import pt from '../locales/pt.json';
+
+i18next
+    .use(initReactI18next)
+    .use(LanguageDetector)
+    .init({
+        resources: {
+            en: { translation: en },
+            pt: { translation: pt },
+            es: { translation: es },
+        },
+        detection: {
+            order: ['querystring', 'navigator', 'htmlTag'],
+            lookupQuerystring: 'lng',
+            htmlTag: document.documentElement,
+        },
+    });

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/locales/en.json

@@ -0,0 +1,10 @@
+{
+    "tableHeadings": {
+        "key": "key",
+        "name": "name",
+        "mecanographicNumber": "Mecanographic Number",
+        "store": "Store",
+        "role": "Role",
+        "type": "Type"
+    }
+}

package/src/locales/es.json

@@ -0,0 +1,10 @@
+{
+    "tableHeadings": {
+        "key": "keyES",
+        "name": "nameES",
+        "mecanographicNumber": "Mecanographic NumberES",
+        "store": "StoreES",
+        "role": "RoleES",
+        "type": "TypeES"
+    }
+}