pixel-react 1.7.9 → 1.8.1

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

@@ -1,141 +1,141 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import Input from './Input';
-import { ChangeEvent, useState } from 'react';
-
-const meta: Meta<typeof Input> = {
-  title: 'Components/Input',
-  component: Input,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Input>;
-
-const defaultArgs = {
-  name: 'input',
-  label: '',
-  disabled: false,
-  placeholder: 'Enter your name',
-  value: '',
-  type: 'text',
-};
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Name',
-    variant: 'default',
-    type: 'text',
-  },
-};
-export const Primary: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Name',
-    variant: 'primary',
-    type: 'text',
-  },
-};
-export const DisabledWithValue: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Name',
-    variant: 'primary',
-    type: 'text',
-    value: 'Disabled',
-    disabled: true,
-    required: true,
-  },
-};
-
-export const WithoutLabel: Story = {
-  render: () => {
-    const [value, setValue] = useState('');
-    const [error, setError] = useState<boolean>(false);
-    const [helperText, setHelperText] = useState<string>();
-
-    const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
-      const value = event.target.value;
-      if (event.target) {
-        if (value.length <= 0) {
-          setError(true);
-          setHelperText(`${event?.target?.name} is required`);
-        } else if (value.length >= 10) {
-          setError(true);
-          setHelperText(`Name should be within 10 characters`);
-        } else {
-          setError(false);
-          setHelperText('');
-        }
-      }
-      setValue(value);
-    };
-    return (
-      <>
-        <Input
-          {...defaultArgs}
-          type="text"
-          onChange={onChangeHandler}
-          disabled={false}
-          value={value}
-          name="Name"
-          label="Name"
-          placeholder="Enter name here"
-          variant="primary"
-          required={true}
-          error={error}
-          helperText={helperText}
-          isLabelRequired={false}
-        />
-      </>
-    );
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [value, setValue] = useState('');
-    const [error, setError] = useState<boolean>(false);
-    const [helperText, setHelperText] = useState<string>();
-
-    const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
-      const value = event.target.value;
-      if (event.target) {
-        if (value.length <= 0) {
-          setError(true);
-          setHelperText(`${event?.target?.name} is required`);
-        } else if (value.length >= 10) {
-          setError(true);
-          setHelperText(`Name should be within 10 characters`);
-        } else {
-          setError(false);
-          setHelperText('');
-        }
-      }
-      setValue(value);
-    };
-    return (
-      <>
-        <Input
-          {...defaultArgs}
-          type="text"
-          onChange={onChangeHandler}
-          disabled={false}
-          value={value}
-          name="Name"
-          label="Name"
-          placeholder="Enter name here"
-          variant="primary"
-          required={true}
-          error={error}
-          helperText={helperText}
-        />
-      </>
-    );
-  },
-};
-
-export default meta;
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Input from './Input';
+import { ChangeEvent, useState } from 'react';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Input>;
+
+const defaultArgs = {
+  name: 'input',
+  label: '',
+  disabled: false,
+  placeholder: 'Enter your name',
+  value: '',
+  type: 'text',
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Name',
+    variant: 'default',
+    type: 'text',
+  },
+};
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Name',
+    variant: 'primary',
+    type: 'text',
+  },
+};
+export const DisabledWithValue: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Name',
+    variant: 'primary',
+    type: 'text',
+    value: 'Disabled',
+    disabled: true,
+    required: true,
+  },
+};
+
+export const WithoutLabel: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    const [error, setError] = useState<boolean>(false);
+    const [helperText, setHelperText] = useState<string>();
+
+    const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value;
+      if (event.target) {
+        if (value.length <= 0) {
+          setError(true);
+          setHelperText(`${event?.target?.name} is required`);
+        } else if (value.length >= 10) {
+          setError(true);
+          setHelperText(`Name should be within 10 characters`);
+        } else {
+          setError(false);
+          setHelperText('');
+        }
+      }
+      setValue(value);
+    };
+    return (
+      <>
+        <Input
+          {...defaultArgs}
+          type="text"
+          onChange={onChangeHandler}
+          disabled={false}
+          value={value}
+          name="Name"
+          label="Name"
+          placeholder="Enter name here"
+          variant="primary"
+          required={true}
+          error={error}
+          helperText={helperText}
+          isLabelRequired={false}
+        />
+      </>
+    );
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    const [error, setError] = useState<boolean>(false);
+    const [helperText, setHelperText] = useState<string>();
+
+    const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value;
+      if (event.target) {
+        if (value.length <= 0) {
+          setError(true);
+          setHelperText(`${event?.target?.name} is required`);
+        } else if (value.length >= 10) {
+          setError(true);
+          setHelperText(`Name should be within 10 characters`);
+        } else {
+          setError(false);
+          setHelperText('');
+        }
+      }
+      setValue(value);
+    };
+    return (
+      <>
+        <Input
+          {...defaultArgs}
+          type="text"
+          onChange={onChangeHandler}
+          disabled={false}
+          value={value}
+          name="Name"
+          label="Name"
+          placeholder="Enter name here"
+          variant="primary"
+          required={true}
+          error={error}
+          helperText={helperText}
+        />
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/Input/Input.tsx

@@ -1,120 +1,120 @@
-import { forwardRef } from 'react';
-import classNames from 'classnames';
-import './Input.scss';
-import { InputProps } from './types';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      type = 'text',
-      variant = 'primary',
-      name = '',
-      label,
-      disabled = false,
-      required = false,
-      placeholder = 'Enter input',
-      value = '',
-      helperText = '',
-      error,
-      noBorder,
-      className = '',
-      onChange,
-      onBlur,
-      onFocus,
-      autoComplete = 'off',
-      minValue = -Infinity,
-      maxValue = Infinity,
-      transparentBackground = false,
-      size = 'small',
-      isLabelRequired = true,
-      ...props
-    },
-    ref
-  ) => {
-    const isValueFilled = !checkEmpty(value);
-
-    return (
-      <fieldset
-        className={classNames('ff-input-fieldset', {
-          'ff-input-fieldset--disabled': disabled,
-        })}
-      >
-        <div
-          className={classNames('ff-input-container', {
-            'ff-input-container--float': isValueFilled,
-            'ff-input-container--disabled': !!disabled,
-          })}
-        >
-          {isLabelRequired && (
-            <label
-              htmlFor={name}
-              className={classNames(
-                `ff-input-label-container ff-input-label-container--${size}`,
-                {
-                  'ff-input-label-container--danger': !!error,
-                }
-              )}
-            >
-              {required && <span className="required-asterisk">*</span>}
-              <span
-                className={classNames(
-                  `ff-input-label ff-input-label--${variant}`,
-                  {
-                    'ff-input-label--no-hover': !!value,
-                    'ff-input-label--disabled': !!disabled,
-                    'ff-input-label--danger': !!error,
-                  }
-                )}
-              >
-                {label}
-              </span>
-            </label>
-          )}
-
-          <input
-            ref={ref} // Forward the ref here
-            name={name}
-            value={value}
-            type={type}
-            spellCheck={false}
-            id={name}
-            className={classNames(
-              `ff-input ff-input-${variant} default-input ff-input--${size}`,
-              {
-                ['ff-input--transparentBackground']: !!transparentBackground,
-                'ff-input--no-hover': !!value,
-                'ff-input--disabled': !!disabled,
-                'ff-input--danger': !!error,
-                'ff-input--no-border': !!noBorder,
-                'ff-input--placeholder': !isLabelRequired,
-              },
-              `${className}`
-            )}
-            placeholder={placeholder}
-            disabled={disabled}
-            onChange={onChange}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            autoComplete={autoComplete}
-            min={minValue}
-            max={maxValue}
-            {...props}
-          />
-
-          {helperText && error && (
-            <span
-              className={classNames('ff-input-message', {
-                'ff-input-message--danger': !!error,
-              })}
-            >
-              {helperText}
-            </span>
-          )}
-        </div>
-      </fieldset>
-    );
-  }
-);
-
-export default Input;
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+import './Input.scss';
+import { InputProps } from './types';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      type = 'text',
+      variant = 'primary',
+      name = '',
+      label,
+      disabled = false,
+      required = false,
+      placeholder = 'Enter input',
+      value = '',
+      helperText = '',
+      error,
+      noBorder,
+      className = '',
+      onChange,
+      onBlur,
+      onFocus,
+      autoComplete = 'off',
+      minValue = -Infinity,
+      maxValue = Infinity,
+      transparentBackground = false,
+      size = 'small',
+      isLabelRequired = true,
+      ...props
+    },
+    ref
+  ) => {
+    const isValueFilled = !checkEmpty(value);
+
+    return (
+      <fieldset
+        className={classNames('ff-input-fieldset', {
+          'ff-input-fieldset--disabled': disabled,
+        })}
+      >
+        <div
+          className={classNames('ff-input-container', {
+            'ff-input-container--float': isValueFilled,
+            'ff-input-container--disabled': !!disabled,
+          })}
+        >
+          {isLabelRequired && (
+            <label
+              htmlFor={name}
+              className={classNames(
+                `ff-input-label-container ff-input-label-container--${size}`,
+                {
+                  'ff-input-label-container--danger': !!error,
+                }
+              )}
+            >
+              {required && <span className="required-asterisk">*</span>}
+              <span
+                className={classNames(
+                  `ff-input-label ff-input-label--${variant}`,
+                  {
+                    'ff-input-label--no-hover': !!value,
+                    'ff-input-label--disabled': !!disabled,
+                    'ff-input-label--danger': !!error,
+                  }
+                )}
+              >
+                {label}
+              </span>
+            </label>
+          )}
+
+          <input
+            ref={ref} // Forward the ref here
+            name={name}
+            value={value}
+            type={type}
+            spellCheck={false}
+            id={name}
+            className={classNames(
+              `ff-input ff-input-${variant} default-input ff-input--${size}`,
+              {
+                ['ff-input--transparentBackground']: !!transparentBackground,
+                'ff-input--no-hover': !!value,
+                'ff-input--disabled': !!disabled,
+                'ff-input--danger': !!error,
+                'ff-input--no-border': !!noBorder,
+                'ff-input--placeholder': !isLabelRequired,
+              },
+              `${className}`
+            )}
+            placeholder={placeholder}
+            disabled={disabled}
+            onChange={onChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            autoComplete={autoComplete}
+            min={minValue}
+            max={maxValue}
+            {...props}
+          />
+
+          {helperText && error && (
+            <span
+              className={classNames('ff-input-message', {
+                'ff-input-message--danger': !!error,
+              })}
+            >
+              {helperText}
+            </span>
+          )}
+        </div>
+      </fieldset>
+    );
+  }
+);
+
+export default Input;