@omniumretail/component-library 1.0.70 → 1.0.72

package/src/components/DatePickerTag/index.tsx

@@ -1,89 +1,89 @@
-import React, { useEffect, useState } from 'react';
-import type { Dayjs } from 'dayjs';
-import { DatePicker, Tag, TagProps } from 'antd';
-import { TweenOneGroup } from 'rc-tween-one';
-import styles from './styles.module.scss';
-import { t } from 'i18next';
-import moment, { Moment } from 'moment';
-
-export interface DatePickerTagProps extends TagProps {
-    customTags?: any,
-    tagsInfo?: any;
-}
-
-type DateValue = Dayjs | null;
-
-export const DatePickerTag = (props: DatePickerTagProps) => {
-    const { customTags = [] } = props;
-
-    const [tags, setTags] = useState<any>(customTags);
-    const [dateValue, setDateValue] = useState<DateValue>(null);
-
-    const handleClose = (removedTag: any) => {
-        const newTags = tags.filter((tag: any) => tag !== removedTag);
-        setTags(newTags);
-    };
-
-    const handleChange = (date: DateValue, dateString: string) => {
-        const formattedDate = date?.format('DD/MM/YYYY');
-        setTags([...tags, formattedDate]);
-        setDateValue(null);
-    };
-
-    useEffect(() => {
-        props?.tagsInfo(tags);
-    }, [tags]);
-
-    const forMap = (tag: any) => {
-        const tagElem = (
-            <Tag
-                closable
-                onClose={(e) => {
-                    e.preventDefault();
-                    handleClose(tag);
-                }}
-            >
-                {tag}
-            </Tag>
-        );
-        return (
-            <span key={tag} className={styles.new} style={{ display: 'inline-block' }}>
-                {tagElem}
-            </span>
-        );
-    };
-
-    const tagChild = tags.map(forMap);
-
-    return (
-        <div className={styles.tagfield}>
-            <DatePicker
-                disabledDate={(current) => current && current < moment().endOf('day')}
-                value={dateValue}
-                onChange={handleChange}
-                className={styles.picker}
-                placeholder={t('components.datePickerTag.placeholder')!}
-            />
-
-            <div style={{ marginTop: 16 }}>
-                <TweenOneGroup
-                    enter={{
-                        scale: 0.8,
-                        opacity: 0,
-                        type: 'from',
-                        duration: 100,
-                    }}
-                    onEnd={(e: any) => {
-                        if (e.type === 'appear' || e.type === 'enter') {
-                            (e.target as any).style = 'display: inline-block';
-                        }
-                    }}
-                    leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
-                    appear={false}
-                >
-                    {tagChild}
-                </TweenOneGroup>
-            </div>
-        </div>
-    );
-}
+import React, { useEffect, useState } from 'react';
+import type { Dayjs } from 'dayjs';
+import { DatePicker, Tag, TagProps } from 'antd';
+import { TweenOneGroup } from 'rc-tween-one';
+import styles from './styles.module.scss';
+import { t } from 'i18next';
+import moment, { Moment } from 'moment';
+
+export interface DatePickerTagProps extends TagProps {
+    customTags?: any,
+    tagsInfo?: any;
+}
+
+type DateValue = Dayjs | null;
+
+export const DatePickerTag = (props: DatePickerTagProps) => {
+    const { customTags = [] } = props;
+
+    const [tags, setTags] = useState<any>(customTags);
+    const [dateValue, setDateValue] = useState<DateValue>(null);
+
+    const handleClose = (removedTag: any) => {
+        const newTags = tags.filter((tag: any) => tag !== removedTag);
+        setTags(newTags);
+    };
+
+    const handleChange = (date: DateValue, dateString: string) => {
+        const formattedDate = date?.format('DD/MM/YYYY');
+        setTags([...tags, formattedDate]);
+        setDateValue(null);
+    };
+
+    useEffect(() => {
+        props?.tagsInfo(tags);
+    }, [tags]);
+
+    const forMap = (tag: any) => {
+        const tagElem = (
+            <Tag
+                closable
+                onClose={(e) => {
+                    e.preventDefault();
+                    handleClose(tag);
+                }}
+            >
+                {tag}
+            </Tag>
+        );
+        return (
+            <span key={tag} className={styles.new} style={{ display: 'inline-block' }}>
+                {tagElem}
+            </span>
+        );
+    };
+
+    const tagChild = tags.map(forMap);
+
+    return (
+        <div className={styles.tagfield}>
+            <DatePicker
+                disabledDate={(current) => current && current < moment().endOf('day')}
+                value={dateValue}
+                onChange={handleChange}
+                className={styles.picker}
+                placeholder={t('components.datePickerTag.placeholder')!}
+            />
+
+            <div style={{ marginTop: 16 }}>
+                <TweenOneGroup
+                    enter={{
+                        scale: 0.8,
+                        opacity: 0,
+                        type: 'from',
+                        duration: 100,
+                    }}
+                    onEnd={(e: any) => {
+                        if (e.type === 'appear' || e.type === 'enter') {
+                            (e.target as any).style = 'display: inline-block';
+                        }
+                    }}
+                    leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
+                    appear={false}
+                >
+                    {tagChild}
+                </TweenOneGroup>
+            </div>
+        </div>
+    );
+}

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

@@ -1,32 +1,32 @@
-.tagfield {
-    contain: inline-size;
-
-    .picker {
-        height: 50px;
-        width: 300px;
-
-        @media(min-width: 1024px) {
-            width: 450px;
-        }
-    }
-
-    .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);
-                }
-            }
-        }
-    }
+.tagfield {
+    contain: inline-size;
+
+    .picker {
+        height: 50px;
+        width: 300px;
+
+        @media(min-width: 1024px) {
+            width: 450px;
+        }
+    }
+
+    .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);
+                }
+            }
+        }
+    }
 }

package/src/components/Footer/Footer.stories.tsx

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

package/src/components/Footer/index.tsx

@@ -1,38 +1,38 @@
-import { useEffect, useState } from "react";
-import moment from 'moment';
-import styles from './styles.module.scss';
-import omniumLogo from '../../assets/images/omnium-retail-logo-white.png';
-
-export interface FooterProps {
-    storeName: string;
-}
-
-export const Footer = (props: FooterProps) => {
-    const [date, setDate] = useState(moment());
-    const { storeName = 'Missing Store Name' } = props;
-
-    useEffect(() => {
-        const time = (function updateDate() {
-            const nextMinute = moment().add(1, 'minute');
-            return setTimeout(() => {
-                setDate(moment());
-                updateDate();
-            }, nextMinute.valueOf() - moment().valueOf());
-        }());
-
-        return () => clearTimeout(time);
-    });
-
-    return (
-        <div className={styles.footer}>
-            <div className={styles.content}>
-                <div className={styles.brand}>{storeName}</div>
-                <div className={styles.date}>{date.format('DD/MM/yyyy')}</div>
-                <div className={styles.time}>{date.format('HH:mm')}</div>
-            </div>
-            <img src={omniumLogo} className={styles.omniumLogoImg} alt="omnium logo" />
-        </div>
-    );
-};
-
-
+import { useEffect, useState } from "react";
+import moment from 'moment';
+import styles from './styles.module.scss';
+import omniumLogo from '../../assets/images/omnium-retail-logo-white.png';
+
+export interface FooterProps {
+    storeName: string;
+}
+
+export const Footer = (props: FooterProps) => {
+    const [date, setDate] = useState(moment());
+    const { storeName = 'Missing Store Name' } = props;
+
+    useEffect(() => {
+        const time = (function updateDate() {
+            const nextMinute = moment().add(1, 'minute');
+            return setTimeout(() => {
+                setDate(moment());
+                updateDate();
+            }, nextMinute.valueOf() - moment().valueOf());
+        }());
+
+        return () => clearTimeout(time);
+    });
+
+    return (
+        <div className={styles.footer}>
+            <div className={styles.content}>
+                <div className={styles.brand}>{storeName}</div>
+                <div className={styles.date}>{date.format('DD/MM/yyyy')}</div>
+                <div className={styles.time}>{date.format('HH:mm')}</div>
+            </div>
+            <img src={omniumLogo} className={styles.omniumLogoImg} alt="omnium logo" />
+        </div>
+    );
+};
+
+

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

@@ -1,38 +1,38 @@
-.footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: nowrap;
-    gap: 0 16px;
-    background-color: var(--color-black);
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    padding: 12px 24px;
-    font-size: var(--font-size-body-1);
-    color: var(--color-grey-light);
-    height: 60px;
-    flex-direction: row;
-    text-align: left;
-    box-sizing: border-box;
-
-    .brand {
-        color: var(--grey2);
-        width: 100%;
-        margin-bottom: 4px;
-    }
-
-    .time {
-        margin-left: 8px;
-    }
-
-    .date,
-    .time {
-        display: inline-block;
-    }
-
-    .omniumLogoImg {
-        height: 25px;
-        align-self: flex-end;
-    }
-}
+.footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 0 16px;
+    background-color: var(--color-black);
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding: 12px 24px;
+    font-size: var(--font-size-body-1);
+    color: var(--color-grey-light);
+    height: 60px;
+    flex-direction: row;
+    text-align: left;
+    box-sizing: border-box;
+
+    .brand {
+        color: var(--grey2);
+        width: 100%;
+        margin-bottom: 4px;
+    }
+
+    .time {
+        margin-left: 8px;
+    }
+
+    .date,
+    .time {
+        display: inline-block;
+    }
+
+    .omniumLogoImg {
+        height: 25px;
+        align-self: flex-end;
+    }
+}

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

@@ -1,13 +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 = {
-};
+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

@@ -1,31 +1,31 @@
-import { Form, FormItemProps, Input, InputProps } from 'antd';
-import classNames from 'classnames';
-import styles from './styles.module.scss';
-
-export interface FormInputFieldProps extends Omit<FormItemProps, "name"> {
-    name: string;
-    inputProps?: InputProps;
-}
-
-export interface inputPropsCustom extends InputProps {
-    customClass?: string;
-}
-
-export const InputField = ({customClass, ...inputProps}: inputPropsCustom) => {
-    const inputClasses = { 
-        [styles.input]: true,
-        [`${customClass}`]: customClass,
-    }
-
-    return (
-        <Input className={classNames(inputClasses)} {...inputProps} />
-    );
-}
-
-export const FormInputField = ({ inputProps, ...itemProps }: FormInputFieldProps) => {
-    return (
-        <Form.Item {...itemProps}>
-            <InputField {...inputProps} />
-        </Form.Item>
-    )
-};
+import { Form, FormItemProps, Input, InputProps } from 'antd';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+
+export interface FormInputFieldProps extends Omit<FormItemProps, "name"> {
+    name: string;
+    inputProps?: InputProps;
+}
+
+export interface inputPropsCustom extends InputProps {
+    customClass?: string;
+}
+
+export const InputField = ({customClass, ...inputProps}: inputPropsCustom) => {
+    const inputClasses = { 
+        [styles.input]: true,
+        [`${customClass}`]: customClass,
+    }
+
+    return (
+        <Input className={classNames(inputClasses)} {...inputProps} />
+    );
+}
+
+export const FormInputField = ({ inputProps, ...itemProps }: FormInputFieldProps) => {
+    return (
+        <Form.Item {...itemProps}>
+            <InputField {...inputProps} />
+        </Form.Item>
+    )
+};

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

@@ -1,8 +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;
-}
+.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;
+}