@omniumretail/component-library 1.0.74 → 1.0.76

package/src/components/Questions/SingleQuestion/styles.module.scss

@@ -1,81 +1,81 @@
-$actionsSpace: 90px;
-$questionAndInformationGap: 20px;
-
-.dragItem {
-    :global {
-        .ant-form-item {
-            margin-bottom: 0;
-        }
-
-        .ant-space {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            border-bottom: 1px solid var(--color-blue);
-            padding: 16px 10px;
-        }
-
-        .ant-space-item {
-            width: 100%;
-        }
-    }
-}
-
-.label {
-    display: none;
-}
-
-.question {
-    display: grid;
-    grid-template-columns: minmax(18px, auto) 1fr $actionsSpace;
-    gap: $questionAndInformationGap;
-    color: var(--color-black);
-    font-size: var(--font-size-body-4);
-    line-height: 100%;
-    font-weight: var(--font-weight-medium);
-    align-items: center;
-}
-
-.information {
-    display: grid;
-    grid-template-columns: minmax(18px, auto) 1fr $actionsSpace;
-    gap: $questionAndInformationGap;
-    color: var(--color-grey-dark);
-    font-size: var(--font-size-body-3);
-    align-items: center;
-}
-
-.input {
-    display: none;
-}
-
-.actions {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 20px;
-}
-
-.notEditing {
-    display: none;
-    align-items: center;
-    justify-content: center;
-}
-
-.editing {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-}
-
-.drag,
-.edit,
-.delete {
-    font-size: var(--font-size-body-5);
-    cursor: pointer;
-}
-
-.addQuestion {
-    margin-top: 24px;
-}
+$actionsSpace: 90px;
+$questionAndInformationGap: 20px;
+
+.dragItem {
+    :global {
+        .ant-form-item {
+            margin-bottom: 0;
+        }
+
+        .ant-space {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            border-bottom: 1px solid var(--color-blue);
+            padding: 16px 10px;
+        }
+
+        .ant-space-item {
+            width: 100%;
+        }
+    }
+}
+
+.label {
+    display: none;
+}
+
+.question {
+    display: grid;
+    grid-template-columns: minmax(18px, auto) 1fr $actionsSpace;
+    gap: $questionAndInformationGap;
+    color: var(--color-black);
+    font-size: var(--font-size-body-4);
+    line-height: 100%;
+    font-weight: var(--font-weight-medium);
+    align-items: center;
+}
+
+.information {
+    display: grid;
+    grid-template-columns: minmax(18px, auto) 1fr $actionsSpace;
+    gap: $questionAndInformationGap;
+    color: var(--color-grey-dark);
+    font-size: var(--font-size-body-3);
+    align-items: center;
+}
+
+.input {
+    display: none;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 20px;
+}
+
+.notEditing {
+    display: none;
+    align-items: center;
+    justify-content: center;
+}
+
+.editing {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+}
+
+.drag,
+.edit,
+.delete {
+    font-size: var(--font-size-body-5);
+    cursor: pointer;
+}
+
+.addQuestion {
+    margin-top: 24px;
+}

package/src/components/Questions/index.tsx

@@ -1,78 +1,78 @@
-import { useContext } from 'react';
-import { PlusOutlined } from '@ant-design/icons';
-import { Form } from 'antd';
-import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
-import { SingleQuestion } from "./SingleQuestion";
-import { Link } from '../Link';
-import { FieldContext } from 'rc-field-form';
-import { t } from 'i18next';
-
-export interface QuestionsProps {
-    showGrade?: boolean;
-    handleChanges: any;
-}
-
-export const Questions = (props: QuestionsProps) => {
-    const {
-        showGrade = true,
-        handleChanges,
-    } = props;
-
-    const formContext = useContext(FieldContext);
-
-    const items = Form.useWatch('questions');
-    const onDragEnd = (result: any) => {
-        const newItems: any = items;
-        const [removed] = newItems.splice(result.source.index, 1);
-        newItems.splice(result.destination.index, 0, removed);
-        formContext.setFieldValue('questions', newItems);
-    };
-
-    return (
-        <Form.List name="questions"> 
-            {(fields, { add, remove }) => {
-                const fieldsUpdated = fields.map((field, index) => {
-                    return field = { ...field, name: index, key: index, fieldKey: index };
-                })
-                return (
-                    <>
-                        <DragDropContext onDragEnd={onDragEnd}>
-                            <Droppable droppableId="droppable">
-                                {(provided) => (
-                                    <div {...provided.droppableProps} ref={provided.innerRef}>
-                                        <>
-                                        {fieldsUpdated.map(({ key, name, ...restField }) => {
-                                            return (
-                                                <Draggable key={key} draggableId={`${key}`} index={key}>
-                                                    {(provided, snapshot) => (
-                                                        <>
-                                                            <SingleQuestion
-                                                                provided={provided}
-                                                                snapshot={snapshot}
-                                                                item={name}
-                                                                {...restField}
-                                                                remove={remove}
-                                                                name={name}
-                                                                showGrade={showGrade}
-                                                                handleChanges={handleChanges}
-                                                            />
-                                                        </>
-                                                    )}
-                                                </Draggable>
-                                            )
-                                        })}
-                                        </>
-                                        {provided.placeholder}
-                                    </div>
-                                )}
-                            </Droppable>
-                        </DragDropContext>
-                        <Form.Item>
-                            <Link icon={<PlusOutlined />} onClick={() => add()}> { t('components.category.addQuestion') }</Link>
-                        </Form.Item>
-                    </>
-                )
-            }}
-        </Form.List>
-    );
-}
+import { useContext } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import { Form } from 'antd';
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import { SingleQuestion } from "./SingleQuestion";
+import { Link } from '../Link';
+import { FieldContext } from 'rc-field-form';
+import { t } from 'i18next';
+
+export interface QuestionsProps {
+    showGrade?: boolean;
+    handleChanges: any;
+}
+
+export const Questions = (props: QuestionsProps) => {
+    const {
+        showGrade = true,
+        handleChanges,
+    } = props;
+
+    const formContext = useContext(FieldContext);
+
+    const items = Form.useWatch('questions');
+    const onDragEnd = (result: any) => {
+        const newItems: any = items;
+        const [removed] = newItems.splice(result.source.index, 1);
+        newItems.splice(result.destination.index, 0, removed);
+        formContext.setFieldValue('questions', newItems);
+    };
+
+    return (
+        <Form.List name="questions"> 
+            {(fields, { add, remove }) => {
+                const fieldsUpdated = fields.map((field, index) => {
+                    return field = { ...field, name: index, key: index, fieldKey: index };
+                })
+                return (
+                    <>
+                        <DragDropContext onDragEnd={onDragEnd}>
+                            <Droppable droppableId="droppable">
+                                {(provided) => (
+                                    <div {...provided.droppableProps} ref={provided.innerRef}>
+                                        <>
+                                        {fieldsUpdated.map(({ key, name, ...restField }) => {
+                                            return (
+                                                <Draggable key={key} draggableId={`${key}`} index={key}>
+                                                    {(provided, snapshot) => (
+                                                        <>
+                                                            <SingleQuestion
+                                                                provided={provided}
+                                                                snapshot={snapshot}
+                                                                item={name}
+                                                                {...restField}
+                                                                remove={remove}
+                                                                name={name}
+                                                                showGrade={showGrade}
+                                                                handleChanges={handleChanges}
+                                                            />
+                                                        </>
+                                                    )}
+                                                </Draggable>
+                                            )
+                                        })}
+                                        </>
+                                        {provided.placeholder}
+                                    </div>
+                                )}
+                            </Droppable>
+                        </DragDropContext>
+                        <Form.Item>
+                            <Link icon={<PlusOutlined />} onClick={() => add()}> { t('components.category.addQuestion') }</Link>
+                        </Form.Item>
+                    </>
+                )
+            }}
+        </Form.List>
+    );
+}

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

@@ -1,43 +1,43 @@
-import { Meta, Story } from "@storybook/react";
-import { Radio as RadioAntd, RadioChangeEvent, RadioProps } from "antd";
-import { useState } from "react";
-import { Radio, RadioGroup } from '.';
-
-export default {
-    title: 'Radio',
-    component: Radio,
-} as Meta;
-
-const Template: Story<RadioProps> = (args) => {
-    const [value, setValue] = useState();
-
-    const onChange = (e: RadioChangeEvent) => {
-        console.log('radio checked', e.target.value);
-        setValue(e.target.value);
-    };
-
-    return (
-        <div>
-            <RadioAntd.Group onChange={onChange} value={value} defaultValue={3}>
-                <Radio {...args} value={1}></Radio>
-                <Radio {...args} value={2}></Radio>
-                <Radio {...args} value={3}></Radio>
-                <Radio {...args} value={4}></Radio>
-            </RadioAntd.Group>
-
-            <RadioGroup
-                options={[
-                    { label: 'Option 1', value: '1' },
-                    { label: 'Option 2', value: '2' },
-                    { label: 'Option 3', value: '3' },
-                ]}
-                onChange={onChange}
-            />
-        </div>
-
-    )
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-};
+import { Meta, Story } from "@storybook/react";
+import { Radio as RadioAntd, RadioChangeEvent, RadioProps } from "antd";
+import { useState } from "react";
+import { Radio, RadioGroup } from '.';
+
+export default {
+    title: 'Radio',
+    component: Radio,
+} as Meta;
+
+const Template: Story<RadioProps> = (args) => {
+    const [value, setValue] = useState();
+
+    const onChange = (e: RadioChangeEvent) => {
+        console.log('radio checked', e.target.value);
+        setValue(e.target.value);
+    };
+
+    return (
+        <div>
+            <RadioAntd.Group onChange={onChange} value={value} defaultValue={3}>
+                <Radio {...args} value={1}></Radio>
+                <Radio {...args} value={2}></Radio>
+                <Radio {...args} value={3}></Radio>
+                <Radio {...args} value={4}></Radio>
+            </RadioAntd.Group>
+
+            <RadioGroup
+                options={[
+                    { label: 'Option 1', value: '1' },
+                    { label: 'Option 2', value: '2' },
+                    { label: 'Option 3', value: '3' },
+                ]}
+                onChange={onChange}
+            />
+        </div>
+
+    )
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+};

package/src/components/Radio/index.tsx

@@ -1,26 +1,26 @@
-import { Radio as RadioAntd } from 'antd';
-import type { RadioProps } from 'antd';
-import type { RadioGroupProps } from 'antd/lib/radio';
-import styles from './styles.module.scss';
-
-export const Radio = ({...radioProps }: RadioProps) => {
-    return (
-        <RadioAntd className={styles.radio} {...radioProps} />
-    )
-};
-
-export interface CustomRadioGroupProps extends RadioGroupProps {
-    options: { label: string; value: string }[];
-}
-
-export const RadioGroup = ({ options, ...radioGroupProps }: CustomRadioGroupProps) => {
-    return (
-        <RadioAntd.Group {...radioGroupProps}>
-            {options.map((option) => (
-                <Radio key={option.value} value={option.value}>
-                    {option.label}
-                </Radio>
-            ))}
-        </RadioAntd.Group>
-    );
-};
+import { Radio as RadioAntd } from 'antd';
+import type { RadioProps } from 'antd';
+import type { RadioGroupProps } from 'antd/lib/radio';
+import styles from './styles.module.scss';
+
+export const Radio = ({...radioProps }: RadioProps) => {
+    return (
+        <RadioAntd className={styles.radio} {...radioProps} />
+    )
+};
+
+export interface CustomRadioGroupProps extends RadioGroupProps {
+    options: { label: string; value: string }[];
+}
+
+export const RadioGroup = ({ options, ...radioGroupProps }: CustomRadioGroupProps) => {
+    return (
+        <RadioAntd.Group {...radioGroupProps}>
+            {options.map((option) => (
+                <Radio key={option.value} value={option.value}>
+                    {option.label}
+                </Radio>
+            ))}
+        </RadioAntd.Group>
+    );
+};

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

@@ -1,24 +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;
+.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/Select/Select.stories.tsx

@@ -1,39 +1,39 @@
-import { Meta, Story } from "@storybook/react";
-import { Select } from '.';
-import { SelectProps } from 'antd';
-
-export default {
-    title: 'Select',
-    component: Select,
-} as Meta;
-
-const Template: Story<SelectProps> = (args) => <Select {...args}></Select>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    defaultValue: 'something',
-    options: [
-        {
-            value: 'lucy',
-            label: 'Lucy',
-        },
-        {
-            value: 'Yiminghe',
-            label: 'yiminghe',
-        },
-    ]
-};
-
-export const noArguments = Template.bind({});
-noArguments.args = {
-    options: [
-        {
-            value: 'lucy',
-            label: 'Lucy',
-        },
-        {
-            value: 'Yiminghe',
-            label: 'yiminghe',
-        },
-    ]
-};
+import { Meta, Story } from "@storybook/react";
+import { Select } from '.';
+import { SelectProps } from 'antd';
+
+export default {
+    title: 'Select',
+    component: Select,
+} as Meta;
+
+const Template: Story<SelectProps> = (args) => <Select {...args}></Select>;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    defaultValue: 'something',
+    options: [
+        {
+            value: 'lucy',
+            label: 'Lucy',
+        },
+        {
+            value: 'Yiminghe',
+            label: 'yiminghe',
+        },
+    ]
+};
+
+export const noArguments = Template.bind({});
+noArguments.args = {
+    options: [
+        {
+            value: 'lucy',
+            label: 'Lucy',
+        },
+        {
+            value: 'Yiminghe',
+            label: 'yiminghe',
+        },
+    ]
+};

package/src/components/Select/index.tsx

@@ -1,27 +1,27 @@
-import styles from './styles.module.scss';
-import { Select as AntdSelect, SelectProps as AntdSelectProps } from 'antd';
-import classNames from 'classnames';
-
-export interface SelectProps extends AntdSelectProps {
-    customClass?: string;
-}
-
-export const Select = ({customClass, ...props}: SelectProps) => {
-    const { defaultValue, options } = props;
-
-    const selectClasses = { 
-        [styles.select]: true,
-        [`${customClass}`]: customClass,
-    }
-
-    return (
-        (options || defaultValue) && 
-        <AntdSelect
-            className={ classNames(selectClasses) }
-            defaultValue={defaultValue}
-            style={{ minWidth: 180 }}
-            options={options}
-            {...props}
-        ></AntdSelect>
-    )
-};
+import styles from './styles.module.scss';
+import { Select as AntdSelect, SelectProps as AntdSelectProps } from 'antd';
+import classNames from 'classnames';
+
+export interface SelectProps extends AntdSelectProps {
+    customClass?: string;
+}
+
+export const Select = ({customClass, ...props}: SelectProps) => {
+    const { defaultValue, options } = props;
+
+    const selectClasses = { 
+        [styles.select]: true,
+        [`${customClass}`]: customClass,
+    }
+
+    return (
+        (options || defaultValue) && 
+        <AntdSelect
+            className={ classNames(selectClasses) }
+            defaultValue={defaultValue}
+            style={{ minWidth: 180 }}
+            options={options}
+            {...props}
+        ></AntdSelect>
+    )
+};

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

@@ -1,13 +1,13 @@
-.select {
-    :global {
-        .ant-select-selector {
-            border-color: rgba(var(--color-black-rgb), .5) !important;
-            height: 50px !important;
-            display: flex;
-            align-items: center;
-        }
-        .ant-select-arrow {
-            color: var(--color-black);
-        }
-    }
-}
+.select {
+    :global {
+        .ant-select-selector {
+            border-color: rgba(var(--color-black-rgb), .5) !important;
+            height: 50px !important;
+            display: flex;
+            align-items: center;
+        }
+        .ant-select-arrow {
+            color: var(--color-black);
+        }
+    }
+}