@omniumretail/component-library 1.0.70 → 1.0.72

package/src/components/InputCountryCode/index.tsx

@@ -1,75 +1,75 @@
-import { useCallback, useState, useEffect } from 'react';
-import { Form, FormItemProps, Input, InputProps, SelectProps } from 'antd';
-import { InputField } from '../Input';
-import { Select } from '../Select';
-import styles from './styles.module.scss';
-
-export interface FormInputCountryCodeProps extends Omit<FormItemProps, "name"> {
-    name?: string;
-    selectProps?: SelectProps;
-    inputProps?: InputProps;
-    inputWithSelectBoxValue?: string;
-    value?: string;
-    onChange?: (value: any) => void;
-}
-
-interface CountryCodeProps {
-    value?: string | { Number: string; CountryISO2: string };
-    onChange?: (value: any) => void;
-    selectProps?: SelectProps;
-    inputProps?: InputProps;
-}
-
-const CountryCode = ({ value, onChange, selectProps, inputProps }: CountryCodeProps) => {
-    const [inputDefaultValue, setInputDefaultValue] = useState<any>(inputProps?.defaultValue);
-    const [countryCode, setCountryCode] = useState(selectProps?.defaultValue);
-
-    useEffect(() => {
-        setInputDefaultValue(inputProps?.defaultValue);
-    }, []);
-
-    useEffect(() => {
-        if (value && typeof value === 'object') {
-            setInputDefaultValue(value.Number);
-            setCountryCode(value.CountryISO2);
-        }
-    }, [value]);
-
-    const changeLocalValue = useCallback(
-        (value: string | number, element: string) => {
-            if (element !== 'countryCode') {
-                setInputDefaultValue(value);
-                onChange?.({ Number: value, CountryISO2: countryCode }); // Update this line
-                return;
-            }
-
-            setCountryCode(value);
-            onChange?.({ Number: inputDefaultValue, CountryISO2: value }); // Update this line
-        },
-        [onChange, countryCode, inputDefaultValue],
-    );
-
-    return (
-        <Input.Group compact className={styles.inputGroup}>
-            <Select
-                {...selectProps}
-                value={countryCode || selectProps?.defaultValue}
-                onChange={(value) => changeLocalValue(value, 'countryCode')}
-            ></Select>
-            <InputField
-                {...inputProps}
-                value={inputDefaultValue}
-                onChange={(event) => changeLocalValue(event.target.value, 'phoneNumber')}
-            />
-        </Input.Group>
-    );
-};
-
-export const InputCountryCode = ({ inputProps, selectProps, name, inputWithSelectBoxValue, value, onChange, ...itemProps }: FormInputCountryCodeProps) => {
-    return (
-        <Form.Item name={name} {...itemProps}>
-            <CountryCode inputProps={inputProps} selectProps={selectProps} value={value} onChange={onChange} />
-        </Form.Item>
-    )
-}
-
+import { useCallback, useState, useEffect } from 'react';
+import { Form, FormItemProps, Input, InputProps, SelectProps } from 'antd';
+import { InputField } from '../Input';
+import { Select } from '../Select';
+import styles from './styles.module.scss';
+
+export interface FormInputCountryCodeProps extends Omit<FormItemProps, "name"> {
+    name?: string;
+    selectProps?: SelectProps;
+    inputProps?: InputProps;
+    inputWithSelectBoxValue?: string;
+    value?: string;
+    onChange?: (value: any) => void;
+}
+
+interface CountryCodeProps {
+    value?: string | { Number: string; CountryISO2: string };
+    onChange?: (value: any) => void;
+    selectProps?: SelectProps;
+    inputProps?: InputProps;
+}
+
+const CountryCode = ({ value, onChange, selectProps, inputProps }: CountryCodeProps) => {
+    const [inputDefaultValue, setInputDefaultValue] = useState<any>(inputProps?.defaultValue);
+    const [countryCode, setCountryCode] = useState(selectProps?.defaultValue);
+
+    useEffect(() => {
+        setInputDefaultValue(inputProps?.defaultValue);
+    }, []);
+
+    useEffect(() => {
+        if (value && typeof value === 'object') {
+            setInputDefaultValue(value.Number);
+            setCountryCode(value.CountryISO2);
+        }
+    }, [value]);
+
+    const changeLocalValue = useCallback(
+        (value: string | number, element: string) => {
+            if (element !== 'countryCode') {
+                setInputDefaultValue(value);
+                onChange?.({ Number: value, CountryISO2: countryCode }); // Update this line
+                return;
+            }
+
+            setCountryCode(value);
+            onChange?.({ Number: inputDefaultValue, CountryISO2: value }); // Update this line
+        },
+        [onChange, countryCode, inputDefaultValue],
+    );
+
+    return (
+        <Input.Group compact className={styles.inputGroup}>
+            <Select
+                {...selectProps}
+                value={countryCode || selectProps?.defaultValue}
+                onChange={(value) => changeLocalValue(value, 'countryCode')}
+            ></Select>
+            <InputField
+                {...inputProps}
+                value={inputDefaultValue}
+                onChange={(event) => changeLocalValue(event.target.value, 'phoneNumber')}
+            />
+        </Input.Group>
+    );
+};
+
+export const InputCountryCode = ({ inputProps, selectProps, name, inputWithSelectBoxValue, value, onChange, ...itemProps }: FormInputCountryCodeProps) => {
+    return (
+        <Form.Item name={name} {...itemProps}>
+            <CountryCode inputProps={inputProps} selectProps={selectProps} value={value} onChange={onChange} />
+        </Form.Item>
+    )
+}
+

package/src/components/InputCountryCode/inputCountryCode.stories.tsx

@@ -1,55 +1,55 @@
-import { Form, Button } from 'antd';
-import { Meta, Story } from "@storybook/react";
-import { InputCountryCode, FormInputCountryCodeProps } from '.';
-
-export default {
-    title: 'InputCountryCode',
-    component: InputCountryCode,
-} as Meta;
-
-const Template: Story<FormInputCountryCodeProps> = (args) => {
-    return (
-        <Form>
-            <InputCountryCode {...args}></InputCountryCode>
-
-            <Form.Item name={["testitem"]}>
-                <InputCountryCode
-                    selectProps={{
-                        options: [
-                            {
-                                label: 'PT',
-                                value: '+351',
-                            },
-                            {
-                                label: 'KZ',
-                                value: '94',
-                            },
-                        ],
-                        defaultValue: 'KZ',
-                    }} inputProps={{ defaultValue: '919767347' }} />
-            </Form.Item>
-
-        </Form>
-    )
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-    name: "test",
-    inputProps: {
-        defaultValue: 961303639,
-    },
-    selectProps: {
-        defaultValue: 'PT',
-        options: [
-            {
-                label: 'PT',
-                value: '+351',
-            },
-            {
-                label: 'KZ',
-                value: '94',
-            },
-        ]
-    }
-};
+import { Form, Button } from 'antd';
+import { Meta, Story } from "@storybook/react";
+import { InputCountryCode, FormInputCountryCodeProps } from '.';
+
+export default {
+    title: 'InputCountryCode',
+    component: InputCountryCode,
+} as Meta;
+
+const Template: Story<FormInputCountryCodeProps> = (args) => {
+    return (
+        <Form>
+            <InputCountryCode {...args}></InputCountryCode>
+
+            <Form.Item name={["testitem"]}>
+                <InputCountryCode
+                    selectProps={{
+                        options: [
+                            {
+                                label: 'PT',
+                                value: '+351',
+                            },
+                            {
+                                label: 'KZ',
+                                value: '94',
+                            },
+                        ],
+                        defaultValue: 'KZ',
+                    }} inputProps={{ defaultValue: '919767347' }} />
+            </Form.Item>
+
+        </Form>
+    )
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+    name: "test",
+    inputProps: {
+        defaultValue: 961303639,
+    },
+    selectProps: {
+        defaultValue: 'PT',
+        options: [
+            {
+                label: 'PT',
+                value: '+351',
+            },
+            {
+                label: 'KZ',
+                value: '94',
+            },
+        ]
+    }
+};

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

@@ -1,3 +1,3 @@
-.inputGroup {
-    display: flex !important;
-}
+.inputGroup {
+    display: flex !important;
+}

package/src/components/Label/Label.stories.tsx

@@ -1,21 +1,21 @@
-import {Meta, Story} from "@storybook/react";
-import { Label, LabelProps } from '.';
-
-export default {
-    title: 'Label',
-    component: Label,
-} as Meta;
-
-const Template: Story<LabelProps> = (args) => <Label {...args}></Label>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    forAttribute: 'Label',
-    children: 'Label',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-    forAttribute: 'someinputname',
-    children: 'Label',
-};
+import {Meta, Story} from "@storybook/react";
+import { Label, LabelProps } from '.';
+
+export default {
+    title: 'Label',
+    component: Label,
+} as Meta;
+
+const Template: Story<LabelProps> = (args) => <Label {...args}></Label>;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    forAttribute: 'Label',
+    children: 'Label',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+    forAttribute: 'someinputname',
+    children: 'Label',
+};

package/src/components/Label/index.tsx

@@ -1,19 +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, customStyle, isUppercase } = props;
-    
-    const labelClasses = classNames({
-        [styles.label]: true,
-        [styles.uppercase]: isUppercase,
-    });
-        
-    return <label className={ classNames(labelClasses, customStyle) } htmlFor={ forAttribute }>{ children }</label>
-};
+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, customStyle, isUppercase } = props;
+    
+    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

@@ -1,17 +1,17 @@
-
-.label {
-    display: block;
-    color: var(--color-black);
-    text-transform: capitalize;
-    font-size: var(--font-size-body-base);
-    line-height: 125%;
-    font-weight: var(--font-weight-semibold);
-
-    &:not(:first-child) {
-        margin-top: 8px;
-    }
-}
-
-.uppercase {
-    text-transform: uppercase;
+
+.label {
+    display: block;
+    color: var(--color-black);
+    text-transform: capitalize;
+    font-size: var(--font-size-body-base);
+    line-height: 125%;
+    font-weight: var(--font-weight-semibold);
+
+    &:not(:first-child) {
+        margin-top: 8px;
+    }
+}
+
+.uppercase {
+    text-transform: uppercase;
 }

package/src/components/Link/Link.stories.tsx

@@ -1,30 +1,30 @@
-import { Meta, Story } from "@storybook/react";
-import { Link, CustomLinkProps } from '.';
-import { SearchOutlined } from '@ant-design/icons';
-
-export default {
-    title: 'Link',
-    component: Link,
-} as Meta;
-
-const Template: Story<CustomLinkProps> = (args) => <Link {...args}> this is a link </Link>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    href: '#',
-};
-
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-    href: '#',
-    linkSecondary: true
-};
-
-export const iconAlignRight = Template.bind({});
-iconAlignRight.args = {
-    href: '#',
-    iconAlignRight: true,
-    linkSecondary: true,
-    icon: <SearchOutlined />
-};
+import { Meta, Story } from "@storybook/react";
+import { Link, CustomLinkProps } from '.';
+import { SearchOutlined } from '@ant-design/icons';
+
+export default {
+    title: 'Link',
+    component: Link,
+} as Meta;
+
+const Template: Story<CustomLinkProps> = (args) => <Link {...args}> this is a link </Link>;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    href: '#',
+};
+
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+    href: '#',
+    linkSecondary: true
+};
+
+export const iconAlignRight = Template.bind({});
+iconAlignRight.args = {
+    href: '#',
+    iconAlignRight: true,
+    linkSecondary: true,
+    icon: <SearchOutlined />
+};

package/src/components/Link/index.tsx

@@ -1,21 +1,21 @@
-import { Button as AntButton, ButtonProps } from 'antd';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-
-export interface CustomLinkProps extends ButtonProps {
-    iconAlignRight?: boolean;
-    linkSecondary?: boolean;
-    customClass?: string;
-}
-
-export const Link = ({customClass, iconAlignRight, linkSecondary, ...props}: CustomLinkProps) => {
-    const linkClasses = classNames({ 
-        [styles.iconAlignRight]: iconAlignRight,
-        [styles.linkSecondary]: linkSecondary,
-        [`${customClass}`]: customClass,
-    }, [styles.link]);
-
-    return (
-        <AntButton { ...props } className={ linkClasses } type={'link'} />
-    );
-};
+import { Button as AntButton, ButtonProps } from 'antd';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+export interface CustomLinkProps extends ButtonProps {
+    iconAlignRight?: boolean;
+    linkSecondary?: boolean;
+    customClass?: string;
+}
+
+export const Link = ({customClass, iconAlignRight, linkSecondary, ...props}: CustomLinkProps) => {
+    const linkClasses = classNames({ 
+        [styles.iconAlignRight]: iconAlignRight,
+        [styles.linkSecondary]: linkSecondary,
+        [`${customClass}`]: customClass,
+    }, [styles.link]);
+
+    return (
+        <AntButton { ...props } className={ linkClasses } type={'link'} />
+    );
+};

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

@@ -1,24 +1,24 @@
-.link {
-    display: inline-flex;
-    text-decoration: none;
-    height: auto;
-
-    color: var(--color-black);
-    font-size: var(--font-size-body-3);
-    line-height: 100%;
-    font-weight: 300;
-    font-style: var(--font-style-italic);
-}
-
-.linkSecondary {
-    color: var(--color-orange);
-    font-style: var(--font-style-normal);
-} 
-
-.iconAlignRight {
-    span:nth-child(2) {
-        margin-inline-end: 8px;
-        margin-inline-start: 0;
-        order: -1;
-    }
-}
+.link {
+    display: inline-flex;
+    text-decoration: none;
+    height: auto;
+
+    color: var(--color-black);
+    font-size: var(--font-size-body-3);
+    line-height: 100%;
+    font-weight: 300;
+    font-style: var(--font-style-italic);
+}
+
+.linkSecondary {
+    color: var(--color-orange);
+    font-style: var(--font-style-normal);
+} 
+
+.iconAlignRight {
+    span:nth-child(2) {
+        margin-inline-end: 8px;
+        margin-inline-start: 0;
+        order: -1;
+    }
+}