@omniumretail/component-library 1.0.74 → 1.0.75

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

@@ -1,86 +1,86 @@
-.sidebar {
-    width: 300px;
-    max-width: 300px;
-    height: 100%;
-    background-color: var(--color-white);
-    padding: 24px;
-    position: relative;
-    transition: var(--transition-fast);
-    overflow: hidden;
-
-    &.sidebarClosed {
-        max-width: 100px;
-        width: 100px;
-        overflow: hidden;
-
-        .sidebarItem {
-            font-size: 0;
-            transition: 0;
-            padding-left: 42px;
-
-            &:first-letter {
-                font-size: var(--font-size-body-4);
-            }
-        }
-
-        .sidebarHasIcon {
-            font-size: 24px;
-            padding-left: 35px;
-        }
-    }
-}
-
-.sidebarItem {
-    color: var(--color-black);
-    padding: 16px;
-    font-weight: var(--font-weight-semibold);
-    text-transform: uppercase;
-    position: relative;
-    white-space: nowrap;
-    cursor: pointer;
-
-    &:after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        height: 1px;
-        width: 100%;
-        background-color: var(--color-orange);
-        transform: scaleY(.5);
-    }
-} 
-
-.sidebarItemActive {
-    color: var(--color-orange) !important;
-}
-
-.toggle {
-    position: absolute; 
-    top: 12px;
-    right: 24px;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1;
-    cursor: pointer;
-
-    > * {
-        font-size: var(--font-size-body-5);
-    }
-}
-
-.subMenu {
-    margin-top: 8px;
-    padding-left: 16px;
-}
-
-.subMenuItem {
-    color: var(--color-black);
-    padding: 8px;
-    margin-top: 8px;
-    font-weight: var(--font-weight-semibold);
-    cursor: pointer;
+.sidebar {
+    width: 300px;
+    max-width: 300px;
+    height: 100%;
+    background-color: var(--color-white);
+    padding: 24px;
+    position: relative;
+    transition: var(--transition-fast);
+    overflow: hidden;
+
+    &.sidebarClosed {
+        max-width: 100px;
+        width: 100px;
+        overflow: hidden;
+
+        .sidebarItem {
+            font-size: 0;
+            transition: 0;
+            padding-left: 42px;
+
+            &:first-letter {
+                font-size: var(--font-size-body-4);
+            }
+        }
+
+        .sidebarHasIcon {
+            font-size: 24px;
+            padding-left: 35px;
+        }
+    }
+}
+
+.sidebarItem {
+    color: var(--color-black);
+    padding: 16px;
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    position: relative;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 1px;
+        width: 100%;
+        background-color: var(--color-orange);
+        transform: scaleY(.5);
+    }
+} 
+
+.sidebarItemActive {
+    color: var(--color-orange) !important;
+}
+
+.toggle {
+    position: absolute; 
+    top: 12px;
+    right: 24px;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    cursor: pointer;
+
+    > * {
+        font-size: var(--font-size-body-5);
+    }
+}
+
+.subMenu {
+    margin-top: 8px;
+    padding-left: 16px;
+}
+
+.subMenuItem {
+    color: var(--color-black);
+    padding: 8px;
+    margin-top: 8px;
+    font-weight: var(--font-weight-semibold);
+    cursor: pointer;
 }

package/src/components/Switch/Switch.stories.tsx

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

package/src/components/Switch/index.tsx

@@ -1,8 +1,8 @@
-import { Switch as AntdSwitch, SwitchProps } from 'antd';
-import styles from './styles.module.scss';
-
-export const Switch = ({...props}: SwitchProps) => {
-    return (
-        <AntdSwitch { ...props } className={styles.switch}/>
-    );
-};
+import { Switch as AntdSwitch, SwitchProps } from 'antd';
+import styles from './styles.module.scss';
+
+export const Switch = ({...props}: SwitchProps) => {
+    return (
+        <AntdSwitch { ...props } className={styles.switch}/>
+    );
+};

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

@@ -1,7 +1,7 @@
-.switch {
-    background-color: var(--color-grey) !important;
-
-    &[aria-checked="true"] {
-        background: var(--color-orange) !important;
-    }
-}
+.switch {
+    background-color: var(--color-grey) !important;
+
+    &[aria-checked="true"] {
+        background: var(--color-orange) !important;
+    }
+}

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

@@ -1,222 +1,222 @@
-import { Meta, Story } from "@storybook/react";
-import { Table, TableCustomProps } from '.';
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-
-export default {
-    title: 'Table',
-    component: Table,
-} as Meta;
-
-const Template: Story<TableCustomProps> = (args) => {
-    const { t } = useTranslation();
-    const [pageInfo, setPageInfo] = useState<any>({});
-    const [rowSelectionInfo, setRowSelectionInfo] = useState<any>({});
-    const [sortBy, setSortBy] = useState<string[]>(['id', 'desc']);
-
-    const handleSortByColumnChange = (sortState: any) => {
-        console.log('handleSortChange called with:', sortState);
-        // Do something with the new sort state
-        // For example, trigger an API call
-    };
-    
-    return <Table columnsSortChange={handleSortByColumnChange} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} rowSelectionInfo={setRowSelectionInfo} actionsArray={
-        [
-            { key: '1', label: `${t('actions.one')}`, onClick: () => {
-                console.log('onClick');
-            } },
-            { key: '2', label: `${t('actions.two')}` },
-            {
-                key: '3', label: 'label 3'
-            }
-        ]
-    } {...args}></Table>;
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-    selectPlaceholder: 'Order by',
-    rowKeyValue: 'mecanographicNumber',
-    dataSource: [
-        {
-            id: `1`,
-            name: `João Cachulo`,
-            mecanographicNumber: "232",
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-        {
-            id: `2`,
-            name: `Filipe Martins`,
-            mecanographicNumber: "32",
-            store: `Levi's Sta Catarina`,
-            role: `Comercial`,
-            type: `Efetivo`
-        },
-        {
-            id: `3`,
-            name: `Anna Astori`,
-            mecanographicNumber: "3212",
-            store: `Levi's Sta Catarina`,
-            role: `Funcionário`,
-            type: `Efetivo`
-        },
-        {
-            id: `4`,
-            name: `Yield Ona`,
-            mecanographicNumber: "21232",
-            store: `Adidas Restaurantes`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-    ],
-    pagination: {
-        total: 24,
-        pageSize: 4
-    },
-    hiddenColumns: ['id'],
-    sortByColumns: true,
-    columnsToSort: ["name", "mecanographicNumber"]
-};
-
-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`
-        },
-    ],
-};
-
-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
-    },
-    rowSelection: {
-        type: 'checkbox',
-        selectedRowKeys: ['1']
-    }
-};
-
-export const NoData = Template.bind({});
-NoData.args = {
-    fieldsToSort: ['store', 'mecanographicNumber'],
-    selectPlaceholder: 'Order by',
-    rowKeyValue: 'mecanographicNumber',
-    dataSource: undefined,
-    pagination: {
-        total: 24,
-        pageSize: 4
-    },
-    hiddenColumns: ['id']
-};
+import { Meta, Story } from "@storybook/react";
+import { Table, TableCustomProps } from '.';
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export default {
+    title: 'Table',
+    component: Table,
+} as Meta;
+
+const Template: Story<TableCustomProps> = (args) => {
+    const { t } = useTranslation();
+    const [pageInfo, setPageInfo] = useState<any>({});
+    const [rowSelectionInfo, setRowSelectionInfo] = useState<any>({});
+    const [sortBy, setSortBy] = useState<string[]>(['id', 'desc']);
+
+    const handleSortByColumnChange = (sortState: any) => {
+        console.log('handleSortChange called with:', sortState);
+        // Do something with the new sort state
+        // For example, trigger an API call
+    };
+    
+    return <Table columnsSortChange={handleSortByColumnChange} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} rowSelectionInfo={setRowSelectionInfo} actionsArray={
+        [
+            { key: '1', label: `${t('actions.one')}`, onClick: () => {
+                console.log('onClick');
+            } },
+            { key: '2', label: `${t('actions.two')}` },
+            {
+                key: '3', label: 'label 3'
+            }
+        ]
+    } {...args}></Table>;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+    selectPlaceholder: 'Order by',
+    rowKeyValue: 'mecanographicNumber',
+    dataSource: [
+        {
+            id: `1`,
+            name: `João Cachulo`,
+            mecanographicNumber: "232",
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+        {
+            id: `2`,
+            name: `Filipe Martins`,
+            mecanographicNumber: "32",
+            store: `Levi's Sta Catarina`,
+            role: `Comercial`,
+            type: `Efetivo`
+        },
+        {
+            id: `3`,
+            name: `Anna Astori`,
+            mecanographicNumber: "3212",
+            store: `Levi's Sta Catarina`,
+            role: `Funcionário`,
+            type: `Efetivo`
+        },
+        {
+            id: `4`,
+            name: `Yield Ona`,
+            mecanographicNumber: "21232",
+            store: `Adidas Restaurantes`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+    ],
+    pagination: {
+        total: 24,
+        pageSize: 4
+    },
+    hiddenColumns: ['id'],
+    sortByColumns: true,
+    columnsToSort: ["name", "mecanographicNumber"]
+};
+
+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`
+        },
+    ],
+};
+
+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
+    },
+    rowSelection: {
+        type: 'checkbox',
+        selectedRowKeys: ['1']
+    }
+};
+
+export const NoData = Template.bind({});
+NoData.args = {
+    fieldsToSort: ['store', 'mecanographicNumber'],
+    selectPlaceholder: 'Order by',
+    rowKeyValue: 'mecanographicNumber',
+    dataSource: undefined,
+    pagination: {
+        total: 24,
+        pageSize: 4
+    },
+    hiddenColumns: ['id']
+};