@omniumretail/component-library 0.1.10 → 0.1.13

package/dist/main.css

@@ -56,10 +56,10 @@
   !*** 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 {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  justify-items: center;
   align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
   height: 75px;
   gap: 0 24px;
   position: relative;
@@ -67,11 +67,9 @@
 @media (max-width: 767px) {
   .SF5f_Q_Ggz_4JHUHS2Xa {
     padding-top: 32px;
-  }
-}
-@media (min-width: 767px) {
-  .SF5f_Q_Ggz_4JHUHS2Xa {
-    padding: 0 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 }
 .SF5f_Q_Ggz_4JHUHS2Xa .fVSt3bSZBcJGsOdA5nIN {
@@ -79,6 +77,9 @@
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
 }
+.SF5f_Q_Ggz_4JHUHS2Xa .yVW6IeVCSAwXxdRW9PIK {
+  align-self: center;
+}
 @media (max-width: 767px) {
   .SF5f_Q_Ggz_4JHUHS2Xa .yVW6IeVCSAwXxdRW9PIK {
     position: absolute;
@@ -89,6 +90,12 @@
     text-align: center;
   }
 }
+.SF5f_Q_Ggz_4JHUHS2Xa .zpR1xIlHnIvOAGtMYHMN {
+  justify-self: start;
+}
+.SF5f_Q_Ggz_4JHUHS2Xa .cZ7HbAWj4tgAgHB3UcVg {
+  justify-self: end;
+}
 /*!*************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Link/styles.module.scss ***!
   \*************************************************************************************************************************************************************/
@@ -156,8 +163,9 @@
 .YPXf1KvhUKPvYzjuCpbK:not(:first-child) {
   margin-top: 8px;
 }
-.YPXf1KvhUKPvYzjuCpbK.FpsgzNaIkKnxuWthvj1T {
-  margin-top: 24px;
+
+.ExPJyFK95xTcgtx9cRbg {
+  text-transform: uppercase;
 }
 /*!******************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Separator/styles.module.scss ***!
@@ -261,3 +269,30 @@
 .Hfh5KLg4Y_g44Ajhx9aV .anticon-close:hover {
   color: var(--color-black);
 }
+/*!*******************************************************************************************************************************************************************!*\
+  !*** 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;
+}
+/*!**************************************************************************************************************************************************************!*\
+  !*** 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 ***!
+  \**************************************************************************************************************************************************************/
+.e3BZiSKkbgvekUOREMi6 {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-body-3);
+  margin-right: 44px;
+  margin-top: 18px;
+}
+.e3BZiSKkbgvekUOREMi6 .ant-radio-checked .ant-radio-inner {
+  border-color: var(--color-black);
+}
+.e3BZiSKkbgvekUOREMi6 .ant-radio-checked .ant-radio-inner:after {
+  background-color: var(--color-black);
+}
+.e3BZiSKkbgvekUOREMi6 .ant-radio-checked:hover .ant-radio-inner:after {
+  background-color: var(--color-orange);
+}
+.e3BZiSKkbgvekUOREMi6 .ant-radio:hover .ant-radio-inner {
+  border-color: var(--color-orange);
+}

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

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

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

@@ -0,0 +1,5 @@
+import { DatePickerProps } from 'antd';
+export type CustomDatePickerProps = DatePickerProps & {
+    isRangePicker?: boolean;
+};
+export declare const CustomDatePicker: ({ className, onChange, value, isRangePicker, ...rest }: CustomDatePickerProps) => JSX.Element;

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

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

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

@@ -3,5 +3,8 @@ export interface FormInputFieldProps extends Omit<FormItemProps, "name"> {
     name: string;
     inputProps?: InputProps;
 }
-export declare const InputField: (inputProps: InputProps) => JSX.Element;
+export interface inputPropsCustom extends InputProps {
+    customClass?: string;
+}
+export declare const InputField: (inputProps: inputPropsCustom) => JSX.Element;
 export declare const FormInputField: ({ inputProps, ...itemProps }: FormInputFieldProps) => JSX.Element;

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

@@ -1,5 +1,7 @@
 export interface LabelProps {
     forAttribute?: string;
     children?: any;
+    customStyle?: string;
+    isUppercase?: boolean;
 }
 export declare const Label: (props: LabelProps) => JSX.Element;

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

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

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

@@ -0,0 +1,5 @@
+import type { RadioProps } from 'antd';
+export interface CustomRadioProps extends RadioProps {
+    description: string;
+}
+export declare const CustomRadio: (props: CustomRadioProps) => JSX.Element;

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

@@ -8,3 +8,5 @@ export * from './Select';
 export * from './Separator';
 export * from './Table';
 export * from './Tag';
+export * from './DatePicker';
+export * from './Radio';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "0.1.10",
+  "version": "0.1.13",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/DatePicker/DatePicker.stories.tsx

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

package/src/components/DatePicker/index.tsx

@@ -0,0 +1,32 @@
+import styles from './styles.module.scss';
+import { DatePicker, DatePickerProps  } from 'antd';
+
+export type CustomDatePickerProps = DatePickerProps & {
+    isRangePicker?: boolean;
+}
+
+const { RangePicker } = DatePicker;
+
+export const CustomDatePicker = ({
+    className, onChange, value, isRangePicker, ...rest
+}: CustomDatePickerProps) => {
+    
+    return (
+        <>
+            { isRangePicker
+            ?
+                <RangePicker
+                className={ `${styles.sitooDatePicker} ${className}` }
+                />
+
+            :
+                <DatePicker
+                { ...rest }
+                value={ value }
+                onChange={ onChange }
+                className={ `${styles.sitooDatePicker} ${className}` }
+                />
+            }
+        </>
+    );
+}

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

@@ -0,0 +1,4 @@
+.sitooDatePicker {
+    border: 1px solid var(--button-border-color) !important;
+}
+  

package/src/components/Header/index.tsx

@@ -1,27 +1,30 @@
 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 {
     backLink?: boolean;
     title: string;
     homeLink?: boolean;
+    loginLink?: boolean;
+    onClickFunction?: () => void;
 }
 
 export const Header = (props: HeaderProps) => {
-    const { backLink, title, homeLink } = props;
+    const { backLink, title, homeLink, onClickFunction, loginLink } = props;
+    const { t } = useTranslation();
 
     return (
         <div className={styles.header}>
             <div className={styles.columnLeft}>
-            { backLink && <Link href="#" icon={<ArrowLeftOutlined />} linkSecondary> Voltar </Link> }
+            { backLink && <Link href="#" icon={<ArrowLeftOutlined />} linkSecondary> {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> Home </Link>}
-                <Link href="#" icon={<LogoutOutlined />} linkSecondary iconAlignRight> Log Out</Link>
+                {homeLink && <Link href="#" icon={<HomeOutlined />} linkSecondary iconAlignRight> {t('navigation.home')} </Link>}
+                {loginLink && <Link href="#" onClick={onClickFunction} icon={<LogoutOutlined />} linkSecondary iconAlignRight> {t('navigation.logout')} </Link>}
             </div>
         </div>
     )

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

@@ -1,18 +1,17 @@
 .header {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    justify-items: center;
     align-items: center;
-    justify-content: space-between;
-    padding: 0 24px;
     height: 75px;
     gap: 0 24px;
     position: relative;
 
     @media(max-width: 767px) {
         padding-top: 32px;
-    }
-
-    @media(min-width: 767px) {
-        padding: 0 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
     }
 
     .title {
@@ -22,6 +21,7 @@
     }
 
     .columnCenter {
+        align-self: center;
         @media(max-width: 767px) {
             position: absolute;
             top: 0;
@@ -31,4 +31,12 @@
             text-align: center;
         }
     }
+
+    .columnLeft {
+        justify-self: start;
+    }
+
+    .columnRight {
+        justify-self: end;
+    }
 }

package/src/components/Input/index.tsx

@@ -1,6 +1,4 @@
 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"> {
@@ -8,9 +6,17 @@ export interface FormInputFieldProps extends Omit<FormItemProps, "name"> {
     inputProps?: InputProps;
 }
 
-export const InputField = (inputProps: InputProps) => (
-    <Input className={styles.input} {...inputProps} />
-);
+export interface inputPropsCustom extends InputProps {
+    customClass?: string;
+}
+
+export const InputField = (inputProps: inputPropsCustom) => {
+    const { customClass } = inputProps;
+
+    return (
+        <Input className={`${styles.input} ${customClass}`} {...inputProps} />
+    );
+}
 
 export const FormInputField = ({ inputProps, ...itemProps }: FormInputFieldProps) => {
     return (

package/src/components/Label/index.tsx

@@ -1,11 +1,19 @@
+import classNames from 'classnames';
 import styles from './styles.module.scss';
 export interface LabelProps {
     forAttribute?: string;
     children?: any;
+    customStyle?: string;
+    isUppercase?: boolean;
 }
 
 export const Label = (props: LabelProps) => {
-    const { forAttribute, children } = props;
+    const { forAttribute, children, customStyle, isUppercase } = props;
     
-    return <label className={ styles.label } htmlFor={ forAttribute }>{ children }</label>
+    const labelClasses = classNames({
+        [styles.label]: true,
+        [styles.uppercase]: isUppercase,
+    });
+        
+    return <label className={ classNames(labelClasses, customStyle) } htmlFor={ forAttribute }>{ children }</label>
 };

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

@@ -10,8 +10,8 @@
     &:not(:first-child) {
         margin-top: 8px;
     }
-
-    &.foo {
-        margin-top: 24px;
-    }
 }
+
+.uppercase {
+    text-transform: uppercase;
+}

package/src/components/Radio/Radio.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, Story } from "@storybook/react";
+import { CustomRadio, CustomRadioProps } from '.';
+
+export default {
+    title: 'Radio',
+    component: CustomRadio,
+} as Meta;
+
+const Template: Story<CustomRadioProps> = (args) => <CustomRadio {...args}></CustomRadio>;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    description: 'Permanente',
+};

package/src/components/Radio/index.tsx

@@ -0,0 +1,15 @@
+import { Radio as RadioAntd } from 'antd';
+import type { RadioProps } from 'antd';
+import styles from './styles.module.scss';
+
+export interface CustomRadioProps extends RadioProps {
+    description: string;
+}
+
+export const CustomRadio = (props: CustomRadioProps) => {
+    const { description } = props;
+
+    return (
+        <RadioAntd className={ styles.radio } { ...props } value={ description }> { description } </RadioAntd>
+    )
+};

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

@@ -0,0 +1,24 @@
+.radio {
+    :global {
+        .ant-radio-checked .ant-radio-inner{
+            border-color: var(--color-black);
+        }
+
+        .ant-radio-checked .ant-radio-inner:after{
+            background-color: var(--color-black);
+        }
+
+        .ant-radio-checked:hover .ant-radio-inner:after{
+            background-color: var(--color-orange);
+        }
+
+        .ant-radio:hover .ant-radio-inner {
+            border-color: var(--color-orange);
+        }
+    }
+
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-body-3);
+    margin-right: 44px;
+    margin-top: 18px;
+}

package/src/components/index.tsx

@@ -8,3 +8,5 @@ export * from './Select';
 export * from './Separator';
 export * from './Table';
 export * from './Tag';
+export * from './DatePicker';
+export * from './Radio';

package/src/locales/en.json

@@ -6,5 +6,10 @@
         "store": "Store",
         "role": "Role",
         "type": "Type"
+    },
+    "navigation": {
+        "back": "Go Back",
+        "logout": "Log Out",
+        "home": "Home"
     }
 }

package/src/locales/es.json

@@ -6,5 +6,10 @@
         "store": "StoreES",
         "role": "RoleES",
         "type": "TypeES"
+    },
+    "navigation": {
+        "back": "Go Back ES",
+        "logout": "Log Out ES",
+        "home": "Home ES"
     }
 }

package/src/locales/pt.json

@@ -6,5 +6,10 @@
         "store": "Loja",
         "role": "Posição",
         "type": "Tipo"
+    },
+    "navigation": {
+        "back": "Go Back PT",
+        "logout": "Log Out PT",
+        "home": "Home PT"
     }
 }

package/webpack.config.js

@@ -40,9 +40,9 @@ module.exports = {
         ],
     },
     plugins: [new MiniCssExtractPlugin()],
-    // externals: {
-    //     react: "react",
-    //     "react-dom": "react-dom",
-    //     "react-router-dom": "react-router-dom",
-    // },
+    externals: {
+        react: "react",
+        "react-dom": "react-dom",
+        "react-router-dom": "react-router-dom",
+    },
 };