@omniumretail/component-library 1.0.70 → 1.0.72

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

@@ -1,60 +1,60 @@
-.tagfield {
-    contain: inline-size;
-
-    &__creator {
-        height: 50px;
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        padding: 16px;
-        margin-inline-end: 0;
-
-        :global {
-            .ant-input {
-                height: 50px;
-                padding-left: 40px;
-            }
-        }
-    }
-
-    &__input {
-        height: 50px;
-    }
-
-    &__new {
-        :global {
-            .ant-tag {
-                background-color: var(--color-orange);
-                color: var(--color-white);
-                padding: 6px 16px;
-                max-width: 240px;
-            }
-    
-            .anticon-close {
-                color: var(--color-white);
-                font-size: 12px;
-    
-                &:hover {
-                    color: var(--color-black);
-                }
-            }
-        }
-    }
-
-    .advancedTagsWrapper {
-        display: flex;
-        gap: 12px;
-    }
-
-    .advancedTags {
-        display: flex;
-        flex-direction: row;
-        gap: 12px;
-        font-family: "SilkaBold";
-        text-decoration: underline;
-
-        div {
-            cursor: pointer;
-        }
-    }
-}
+.tagfield {
+    contain: inline-size;
+
+    &__creator {
+        height: 50px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 16px;
+        margin-inline-end: 0;
+
+        :global {
+            .ant-input {
+                height: 50px;
+                padding-left: 40px;
+            }
+        }
+    }
+
+    &__input {
+        height: 50px;
+    }
+
+    &__new {
+        :global {
+            .ant-tag {
+                background-color: var(--color-orange);
+                color: var(--color-white);
+                padding: 6px 16px;
+                max-width: 240px;
+            }
+    
+            .anticon-close {
+                color: var(--color-white);
+                font-size: 12px;
+    
+                &:hover {
+                    color: var(--color-black);
+                }
+            }
+        }
+    }
+
+    .advancedTagsWrapper {
+        display: flex;
+        gap: 12px;
+    }
+
+    .advancedTags {
+        display: flex;
+        flex-direction: row;
+        gap: 12px;
+        font-family: "SilkaBold";
+        text-decoration: underline;
+
+        div {
+            cursor: pointer;
+        }
+    }
+}

package/src/components/Upload/Upload.stories.tsx

@@ -1,45 +1,45 @@
-import { Meta, Story } from "@storybook/react";
-import { Form, UploadFile } from "antd";
-import { Button } from "components/Button";
-import { Upload } from '.';
-
-export default {
-    title: 'Upload',
-    component: Upload,
-} as Meta;
-
-const Template: Story<any> = (args) => {
-    const [form] = Form.useForm();
-    
-    const handleSubmit = (values: any) => {
-        console.log('Form values:', values);
-    };
-
-    const handleImageChange = (file: UploadFile | null) => {
-        form.setFieldsValue({ image: file?.originFileObj });
-    };
-    
-    const initialValue = {
-        uid: '-1',
-        name: 'image.png',
-        status: 'done',
-        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-    }
-    return (
-        <Form form={form} onFinish={handleSubmit}>
-            <Form.Item name="image" valuePropName="file" initialValue={initialValue}>
-                <Upload {...args} onImageChange={handleImageChange} initialFileList={[initialValue]}></Upload>
-            </Form.Item>
-            <Form.Item>
-                <Button type="primary" htmlType="submit">
-                    Submit
-                </Button>
-            </Form.Item>
-        </Form>
-    )
-}
-
-
-export const Primary = Template.bind({});
-Primary.args = {
-};
+import { Meta, Story } from "@storybook/react";
+import { Form, UploadFile } from "antd";
+import { Button } from "components/Button";
+import { Upload } from '.';
+
+export default {
+    title: 'Upload',
+    component: Upload,
+} as Meta;
+
+const Template: Story<any> = (args) => {
+    const [form] = Form.useForm();
+    
+    const handleSubmit = (values: any) => {
+        console.log('Form values:', values);
+    };
+
+    const handleImageChange = (file: UploadFile | null) => {
+        form.setFieldsValue({ image: file?.originFileObj });
+    };
+    
+    const initialValue = {
+        uid: '-1',
+        name: 'image.png',
+        status: 'done',
+        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    }
+    return (
+        <Form form={form} onFinish={handleSubmit}>
+            <Form.Item name="image" valuePropName="file" initialValue={initialValue}>
+                <Upload {...args} onImageChange={handleImageChange} initialFileList={[initialValue]}></Upload>
+            </Form.Item>
+            <Form.Item>
+                <Button type="primary" htmlType="submit">
+                    Submit
+                </Button>
+            </Form.Item>
+        </Form>
+    )
+}
+
+
+export const Primary = Template.bind({});
+Primary.args = {
+};

package/src/components/Upload/index.tsx

@@ -1,91 +1,91 @@
-import { Upload as UploadAntd } from 'antd';
-import ImgCrop from 'antd-img-crop';
-import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
-import { useEffect, useState } from 'react';
-
-interface UploadPropsExtended extends UploadProps {
-    onImageChange?: (file: UploadFile | null) => void;
-    initialFileList?: UploadFile[];
-    initialImageUrl?: string;
-}
-
-function generateRandomString() {
-    return Math.random().toString(36).substring(2, 14);
-}
-
-export const Upload = (props: UploadPropsExtended) => {
-    const {
-        onImageChange,
-        initialFileList,
-        initialImageUrl
-    } = props;
-    const [fileList, setFileList] = useState<UploadFile[]>(initialFileList || []);
-
-    // when component mounts or initialImageUrl changes, update fileList
-    useEffect(() => {
-        if (initialImageUrl) {
-            const newFile: UploadFile = {
-                uid: generateRandomString(), // use any unique string
-                name: initialImageUrl, // use the URL as the name
-                status: 'done',
-                url: initialImageUrl, // this is used for preview
-            };
-            setFileList((prevFileList) => [...prevFileList, newFile]);
-        }
-    }, [initialImageUrl]);
-
-    const beforeUpload: UploadProps['beforeUpload'] = async (file: RcFile) => {
-        const newFile: UploadFile = {
-            uid: file.uid,
-            name: file.name,
-            type: file.type,
-            size: file.size,
-            originFileObj: file,
-            status: 'done',
-        };
-    
-        setFileList((prevFileList) => [...prevFileList, newFile]);
-        if (onImageChange) {
-            onImageChange(newFile);
-        }
-        return false;
-    };
-
-    const onChange: UploadProps['onChange'] = ({ file, fileList: newFileList }) => {
-        if (file.status === 'removed') {
-            setFileList(newFileList);
-            if (onImageChange) {
-                onImageChange(newFileList[0] || null);
-            }
-        }
-    };
-
-    const onPreview = async (file: UploadFile) => {
-        let src = file.url as string;
-        if (!src) {
-            src = await new Promise((resolve) => {
-                const reader = new FileReader();
-                reader.readAsDataURL(file.originFileObj as RcFile);
-                reader.onload = () => resolve(reader.result as string);
-            });
-        }
-        const image = new Image();
-        image.src = src;
-        const imgWindow = window.open(src);
-        imgWindow?.document.write(image.outerHTML);
-    };
-
-    return (
-        <ImgCrop rotationSlider>
-            <UploadAntd
-                listType="picture-card"
-                fileList={fileList}
-                beforeUpload={beforeUpload}
-                onChange={onChange}
-                onPreview={onPreview}
-            >
-                {fileList.length < 1 && '+ Upload'}
-            </UploadAntd>
-        </ImgCrop>
-    );
-};
+import { Upload as UploadAntd } from 'antd';
+import ImgCrop from 'antd-img-crop';
+import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
+import { useEffect, useState } from 'react';
+
+interface UploadPropsExtended extends UploadProps {
+    onImageChange?: (file: UploadFile | null) => void;
+    initialFileList?: UploadFile[];
+    initialImageUrl?: string;
+}
+
+function generateRandomString() {
+    return Math.random().toString(36).substring(2, 14);
+}
+
+export const Upload = (props: UploadPropsExtended) => {
+    const {
+        onImageChange,
+        initialFileList,
+        initialImageUrl
+    } = props;
+    const [fileList, setFileList] = useState<UploadFile[]>(initialFileList || []);
+
+    // when component mounts or initialImageUrl changes, update fileList
+    useEffect(() => {
+        if (initialImageUrl) {
+            const newFile: UploadFile = {
+                uid: generateRandomString(), // use any unique string
+                name: initialImageUrl, // use the URL as the name
+                status: 'done',
+                url: initialImageUrl, // this is used for preview
+            };
+            setFileList((prevFileList) => [...prevFileList, newFile]);
+        }
+    }, [initialImageUrl]);
+
+    const beforeUpload: UploadProps['beforeUpload'] = async (file: RcFile) => {
+        const newFile: UploadFile = {
+            uid: file.uid,
+            name: file.name,
+            type: file.type,
+            size: file.size,
+            originFileObj: file,
+            status: 'done',
+        };
+    
+        setFileList((prevFileList) => [...prevFileList, newFile]);
+        if (onImageChange) {
+            onImageChange(newFile);
+        }
+        return false;
+    };
+
+    const onChange: UploadProps['onChange'] = ({ file, fileList: newFileList }) => {
+        if (file.status === 'removed') {
+            setFileList(newFileList);
+            if (onImageChange) {
+                onImageChange(newFileList[0] || null);
+            }
+        }
+    };
+
+    const onPreview = async (file: UploadFile) => {
+        let src = file.url as string;
+        if (!src) {
+            src = await new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.readAsDataURL(file.originFileObj as RcFile);
+                reader.onload = () => resolve(reader.result as string);
+            });
+        }
+        const image = new Image();
+        image.src = src;
+        const imgWindow = window.open(src);
+        imgWindow?.document.write(image.outerHTML);
+    };
+
+    return (
+        <ImgCrop rotationSlider>
+            <UploadAntd
+                listType="picture-card"
+                fileList={fileList}
+                beforeUpload={beforeUpload}
+                onChange={onChange}
+                onPreview={onPreview}
+            >
+                {fileList.length < 1 && '+ Upload'}
+            </UploadAntd>
+        </ImgCrop>
+    );
+};

package/src/components/UserInfo/UserInfo.stories.tsx

@@ -1,37 +1,37 @@
-import { Meta, Story } from "@storybook/react";
-import { UserInfo } from '.';
-
-export default {
-    title: 'UserInfo',
-    component: UserInfo,
-} as Meta;
-
-const Template: Story<any> = (args) => {
-    
-    const data = {
-        Date: "946080000",
-        "Store": [
-            "ola",
-            "adeus"
-        ],
-        "Team": "Delivery Team",
-        "Supervisor": "Jane Dõe Lórd Rings",
-        "TypeOfContract": "Omnium.APE.Services.API.Models.Users.ContractStateDto",
-        "Nationality": "PT",
-        "CivilStatus": "single",
-        "IdentificationDocument": "55613145664",
-        "NTaxpayer": "14244",
-        "NIB": "12312331",
-        "SocialSecurity": "123123132",
-        "NChildren": "2",
-        "Workload": "2 horas",
-        "Description": "One Desccription",
-        "Comments": "One CommentsdwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwOne CommentsdwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwOne CommentsdwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwOne CommentsdwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwOne CommentsdwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwOne CommentsdwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwOne Commentsdwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww"
-    };
-    
-    return <UserInfo {...args} userData={data} userName={ "Diogo Carvalho" } userCode={ "121212" } userInfoTranslationsKey={'userInfoColumn'}></UserInfo>;
-}
-
-export const Primary = Template.bind({});
-Primary.args = {
-};
+import { Meta, Story } from "@storybook/react";
+import { UserInfo } from '.';
+
+export default {
+    title: 'UserInfo',
+    component: UserInfo,
+} as Meta;
+
+const Template: Story<any> = (args) => {
+    
+    const data = {
+        Date: "946080000",
+        "Store": [
+            "ola",
+            "adeus"
+        ],
+        "Team": "Delivery Team",
+        "Supervisor": "Jane Dõe Lórd Rings",
+        "TypeOfContract": "Omnium.APE.Services.API.Models.Users.ContractStateDto",
+        "Nationality": "PT",
+        "CivilStatus": "single",
+        "IdentificationDocument": "55613145664",
+        "NTaxpayer": "14244",
+        "NIB": "12312331",
+        "SocialSecurity": "123123132",
+        "NChildren": "2",
+        "Workload": "2 horas",
+        "Description": "One Desccription",
+        "Comments": "One CommentsdwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwOne CommentsdwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwOne CommentsdwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwOne CommentsdwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwOne CommentsdwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwOne CommentsdwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwOne Commentsdwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww"
+    };
+    
+    return <UserInfo {...args} userData={data} userName={ "Diogo Carvalho" } userCode={ "121212" } userInfoTranslationsKey={'userInfoColumn'}></UserInfo>;
+}
+
+export const Primary = Template.bind({});
+Primary.args = {
+};

package/src/components/UserInfo/index.tsx

@@ -1,62 +1,62 @@
-import React from 'react';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-import { Label } from '../Label';
-import { useTranslation } from 'react-i18next';
-
-export interface UserInfoProps {
-    userData: any;
-    userName: string;
-    userCode: string;
-    userInfoTranslationsKey?: string;
-    customClass?: string;
-}
-
-export const UserInfo = ({ userData, customClass, userName, userCode, userInfoTranslationsKey }: UserInfoProps) => {
-    const { t } = useTranslation();
-
-    const userInfoStyle = classNames({
-        [`${customClass}`]: customClass,
-    }, [styles.userInfo]);
-
-    return (
-        <div className={userInfoStyle}>
-            <Label customStyle={styles.userName}>
-                {userName}
-            </Label>
-
-            <h3 className={styles.userCode}>
-                {userCode}
-            </h3>
-
-            {Object.entries(userData)?.map(([key, value]: any) => {
-                if (key === 'Store') {
-                    return (
-                        <div key={key}>
-                            <h3 className={styles.userInfoTitles}>
-                                {userInfoTranslationsKey ? t(`${userInfoTranslationsKey}.${key}`) : key}
-                            </h3>
-                            {value?.map((store: string, index: number) => (
-                                <h3 key={`${key}-${index}`} className={styles.userInfoDesc}>
-                                    {store}
-                                </h3>
-                            ))}
-                        </div>
-                    );
-                }
-
-                return (
-                    <div key={key}>
-                        <h3 className={styles.userInfoTitles}>
-                            {userInfoTranslationsKey ? t(`${userInfoTranslationsKey}.${key}`) : key}
-                        </h3>
-
-                        <h3 className={styles.userInfoDesc}>
-                            {value as string}
-                        </h3>
-                    </div>
-                );
-            })}
-        </div>
-    );
-};
+import React from 'react';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+import { Label } from '../Label';
+import { useTranslation } from 'react-i18next';
+
+export interface UserInfoProps {
+    userData: any;
+    userName: string;
+    userCode: string;
+    userInfoTranslationsKey?: string;
+    customClass?: string;
+}
+
+export const UserInfo = ({ userData, customClass, userName, userCode, userInfoTranslationsKey }: UserInfoProps) => {
+    const { t } = useTranslation();
+
+    const userInfoStyle = classNames({
+        [`${customClass}`]: customClass,
+    }, [styles.userInfo]);
+
+    return (
+        <div className={userInfoStyle}>
+            <Label customStyle={styles.userName}>
+                {userName}
+            </Label>
+
+            <h3 className={styles.userCode}>
+                {userCode}
+            </h3>
+
+            {Object.entries(userData)?.map(([key, value]: any) => {
+                if (key === 'Store') {
+                    return (
+                        <div key={key}>
+                            <h3 className={styles.userInfoTitles}>
+                                {userInfoTranslationsKey ? t(`${userInfoTranslationsKey}.${key}`) : key}
+                            </h3>
+                            {value?.map((store: string, index: number) => (
+                                <h3 key={`${key}-${index}`} className={styles.userInfoDesc}>
+                                    {store}
+                                </h3>
+                            ))}
+                        </div>
+                    );
+                }
+
+                return (
+                    <div key={key}>
+                        <h3 className={styles.userInfoTitles}>
+                            {userInfoTranslationsKey ? t(`${userInfoTranslationsKey}.${key}`) : key}
+                        </h3>
+
+                        <h3 className={styles.userInfoDesc}>
+                            {value as string}
+                        </h3>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};

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

@@ -1,30 +1,30 @@
-.userInfo {
-    display: flex;
-    flex-direction: column;
-    background-color: var(--white-color);
-    padding: 24px;
-    color: var(--color-black);
-    width: 150px;
-    word-wrap: break-word;
-}
-
-.userName {
-    color: var(--color-blue) !important;
-    font-size: var(--font-size-body-5);
-    font-weight: var(--font-weight-bold);
-}
-
-.userCode {
-    font-weight: var(--font-weight-semibold);
-    font-size: var(--font-size-label);
-}
-
-.userInfoTitles {
-    font-weight: var(--font-weight-bold);
-    font-size: var(--font-size-body-base);
-}
-
-.userInfoDesc {
-    font-weight: var(--font-weight-regular);
-    font-size: var(--font-size-label);
+.userInfo {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--white-color);
+    padding: 24px;
+    color: var(--color-black);
+    width: 150px;
+    word-wrap: break-word;
+}
+
+.userName {
+    color: var(--color-blue) !important;
+    font-size: var(--font-size-body-5);
+    font-weight: var(--font-weight-bold);
+}
+
+.userCode {
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-label);
+}
+
+.userInfoTitles {
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-base);
+}
+
+.userInfoDesc {
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-label);
 }