@omniumretail/component-library 1.0.64 → 1.0.66

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

@@ -1,137 +1,160 @@
-.categoryResponse {
-    display: grid;
-    grid-template-columns: 300px auto;
-    gap: 16px;
-    height: 100%;
-}
-
-.sidebarWrapper {
-    background: #EBECED;
-    overflow: auto;
-}
-
-.contentWrapper {
-    background: var(--color-white);
-    overflow: auto;
-}
-
-.sidebarWrapper,
-.contentWrapper {
-    padding: 20px;
-}
-
-.title {
-    font-size: var(--font-size-body-4);
-    color: var(--color-blue);
-    margin-bottom: 36px;
-    font-weight: var(--font-weight-semibold);
-    text-transform: uppercase;
-
-}
-
-.label {
-    padding-bottom: 15px;
-    font-weight: var(--font-weight-bold);
-    font-size: var(--font-size-body-4);
-}
-
-.cursorPointer {
-    cursor: pointer;
-}
-
-.subCategory {
-    padding-left: 16px;
-
-    .label {
-        font-weight: var(--font-weight-semibold);
-    }
-
-    .labelWrapper {
-        .subCategory {
-            .label {
-                font-weight: var(--font-weight-light);
-            }
-        }
-    }
-}
-
-.labelWrapper {
-    display: block;
-}
-
-.active {
-    color: var(--color-orange);
-}
-
-.details {
-    margin-bottom: 24px;
-}
-
-.categoryName {
-    font-size: var(--font-size-body-4);
-    color: var(--color-blue);
-    font-weight: var(--font-weight-semibold);
-    margin-bottom: 8px;
-}
-
-.categoryDescription {
-    font-size: var(--font-size-body-3);
-    font-weight: var(--font-weight-light);
-    color: var(--color-black);
-}
-
-// Questions
-.questionWrapper {
-    display: flex;
-    flex-direction: row;
-    gap: 12px;
-    margin-bottom: 36px;
-}
-
-.questionWrapperOpenAnswer {
-    flex-direction: column;
-    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
-    margin-bottom: 24px;
-
-    .question {
-        width: 100%;
-        border-bottom: none;
-    }
-
-    .answer {
-        width: 100%;
-        height: auto;
-
-        :global {
-            .ant-input {
-                min-height: 140px;
-            }
-            
-            .ant-form-item {
-                margin-bottom: 16px;
-            }
-        }
-    }
-}
-
-.question {
-    width: calc(100% - 112px);
-    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
-}
-
-.answer {
-    width: 100px;
-    height: 50px;
-    align-self: flex-end;
-}
-
-.subject {
-    font-size: var(--font-size-body-3);
-    font-weight: var(--font-weight-semibold);
-    margin-bottom: 8px;
-}
-
-.description {
-    font-weight: var(--font-weight-light);
-    margin-bottom: 4px;
-}
+.categoryResponse {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+    height: 100%;
+
+    @media(min-width: 600px) {
+        grid-template-columns: 220px auto;
+    }
+
+    @media(min-width: 768px) {
+        grid-template-columns: 300px auto;
+    }
+}
+
+.sidebarWrapper {
+    background: #EBECED;
+    overflow: auto;
+}
+
+.contentWrapper {
+    background: var(--color-white);
+    overflow: auto;
+}
+
+.sidebarWrapper,
+.contentWrapper {
+    padding: 20px;
+}
+
+.title {
+    font-size: var(--font-size-body-3);
+    color: var(--color-blue);
+    margin-bottom: 36px;
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+
+    @media(min-width: 768px) {
+        font-size: var(--font-size-body-4);
+    }
+}
+
+.label {
+    padding-bottom: 15px;
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-3);
+
+    @media(min-width: 768px) {
+        font-size: var(--font-size-body-4);
+    }
+}
+
+.cursorPointer {
+    cursor: pointer;
+}
+
+.subCategory {
+    padding-left: 16px;
+
+    .label {
+        font-weight: var(--font-weight-semibold);
+    }
+
+    .labelWrapper {
+        .subCategory {
+            .label {
+                font-weight: var(--font-weight-light);
+            }
+        }
+    }
+}
+
+.labelWrapper {
+    display: block;
+}
+
+.active {
+    color: var(--color-orange);
+}
+
+.details {
+    margin-bottom: 24px;
+}
+
+.categoryName {
+    font-size: var(--font-size-body-3);
+    color: var(--color-blue);
+    font-weight: var(--font-weight-semibold);
+    margin-bottom: 8px;
+
+    @media(min-width: 768px) {
+        font-size: var(--font-size-body-4);
+    }
+}
+
+.categoryDescription {
+    font-size: var(--font-size-body-2);
+    font-weight: var(--font-weight-light);
+    color: var(--color-black);
+
+    font-size: var(--font-size-body-3);
+}
+
+// Questions
+.questionWrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    margin-bottom: 36px;
+}
+
+.questionWrapperOpenAnswer {
+    flex-direction: column;
+    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
+    margin-bottom: 24px;
+
+    .question {
+        width: 100%;
+        border-bottom: none;
+    }
+
+    .answer {
+        width: 100%;
+        height: auto;
+
+        :global {
+            .ant-input {
+                min-height: 140px;
+            }
+            
+            .ant-form-item {
+                margin-bottom: 16px;
+            }
+        }
+    }
+}
+
+.question {
+    width: calc(100% - 112px);
+    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
+}
+
+.answer {
+    width: 100px;
+    height: 50px;
+    align-self: flex-end;
+}
+
+.subject {
+    font-size: var(--font-size-body-2);
+    font-weight: var(--font-weight-semibold);
+    margin-bottom: 8px;
+
+    font-size: var(--font-size-body-3);
+}
+
+.description {
+    font-weight: var(--font-weight-light);
+    margin-bottom: 4px;
+}

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

@@ -1,16 +1,16 @@
-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 = {
-    onChange: (x: any, y: any) => {
-        console.log(x, y);
-    },
-};
+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 = {
+    onChange: (x: any, y: any) => {
+        console.log(x, y);
+    },
+};

package/src/components/DatePicker/index.tsx

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

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

@@ -1,3 +1,3 @@
-.sitooDatePicker {
-    border-color: rgba(var(--color-black-rgb), .5);
-}
+.sitooDatePicker {
+    border-color: rgba(var(--color-black-rgb), .5);
+}

package/src/components/DatePickerTag/DatePickerTag.stories.tsx

@@ -1,19 +1,19 @@
-import { Meta, Story } from "@storybook/react";
-import { DatePickerTag } from '.';
-import { TagProps } from 'antd';
-import { useState } from "react";
-
-export default {
-    title: 'DatePickerTag',
-    component: DatePickerTag,
-} as Meta;
-
-const Template: Story<TagProps> = (args) => {
-    const [tagsInfo, setTagsInfo] = useState<any>({});
-    
-    return <DatePickerTag {...args} tagsInfo={setTagsInfo}></DatePickerTag>;
-}
-
-export const Primary = Template.bind({});
-Primary.args = {
-};
+import { Meta, Story } from "@storybook/react";
+import { DatePickerTag } from '.';
+import { TagProps } from 'antd';
+import { useState } from "react";
+
+export default {
+    title: 'DatePickerTag',
+    component: DatePickerTag,
+} as Meta;
+
+const Template: Story<TagProps> = (args) => {
+    const [tagsInfo, setTagsInfo] = useState<any>({});
+    
+    return <DatePickerTag {...args} tagsInfo={setTagsInfo}></DatePickerTag>;
+}
+
+export const Primary = Template.bind({});
+Primary.args = {
+};

package/src/components/DatePickerTag/index.tsx

@@ -1,85 +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';
-
-export interface RangePickerTagProps extends TagProps {
-    customTags?: any,
-    tagsInfo?: any;
-}
-
-type DateValue = Dayjs | null;
-
-export const DatePickerTag = (props: RangePickerTagProps) => {
-    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
-                value={dateValue}
-                onChange={handleChange}
-                className={styles.picker}
-            />
-            
-            <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>
+    );
+}