pixel-react 1.5.4 → 1.5.5

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,103 +1,103 @@
-import classNames from 'classnames';
-import './Input.scss';
-import { InputProps } from './types';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-
-const Input = ({
-  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
-}: InputProps) => {
-  const isValueFilled = !checkEmpty(value);
-  return (
-    <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
-        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>
-  );
-};
-
-export default Input;
+import classNames from 'classnames';
+import './Input.scss';
+import { InputProps } from './types';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+
+const Input = ({
+  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
+}: InputProps) => {
+  const isValueFilled = !checkEmpty(value);
+  return (
+    <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
+        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>
+  );
+};
+
+export default Input;

package/src/components/Input/types.ts

@@ -1,85 +1,85 @@
-export interface InputProps {
-  /**
-   * Name | name of the input field
-   */
-  name: string;
-  /**
-   * Label | field label to be displayed
-   */
-  label?: string;
-  /**
-   * value | input field value
-   */
-  value: string | number;
-  /**
-   * variants to set color/style of the input field
-   */
-  variant?: 'default' | 'primary';
-  /**
-   * type to set color/style of the input field
-   */
-  type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
-  /**
-   * error | If true, error message will be displayed
-   */
-  error?: boolean;
-  /**
-   * helperText | error, success, warning message to be shown
-   */
-  helperText?: string;
-  /**
-   * to disable the input field
-   */
-  disabled?: boolean;
-  /**
-   * if true, input field will be mandatory
-   */
-  required?: boolean;
-  /**
-   * placeholder for the input field
-   */
-  placeholder?: string;
-  /**
-   * classnames to style the input field
-   */
-  className?: string;
-  /**
-   * noBorder prop 'true' removes border of input
-   */
-  noBorder?: boolean;
-  /**
-   * onChange, onKeyDown, onBlur, onFocus actions
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-
-  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  /**
-   * id to select the input field uniquely
-   */
-  id?: string;
-  /**
-   * if on, suggestion popup will be displayed
-   */
-  autoComplete?: 'on' | 'off';
-  /**
-   *  minimum and maximum values for the number type input field and their functions
-   */
-  minValue?: number;
-  maxValue?: number;
-  /**
-   * background of the input field prop
-   */
-  transparentBackground?: boolean;
-  /**
-   * size for the input field
-   */
-  size?: 'small' | 'medium';
-  /**
-   * isLabelRequired for the input field without label,showing placeholder
-   */
-  isLabelRequired?: boolean;
-}
+export interface InputProps {
+  /**
+   * Name | name of the input field
+   */
+  name: string;
+  /**
+   * Label | field label to be displayed
+   */
+  label?: string;
+  /**
+   * value | input field value
+   */
+  value: string | number;
+  /**
+   * variants to set color/style of the input field
+   */
+  variant?: 'default' | 'primary';
+  /**
+   * type to set color/style of the input field
+   */
+  type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
+  /**
+   * error | If true, error message will be displayed
+   */
+  error?: boolean;
+  /**
+   * helperText | error, success, warning message to be shown
+   */
+  helperText?: string;
+  /**
+   * to disable the input field
+   */
+  disabled?: boolean;
+  /**
+   * if true, input field will be mandatory
+   */
+  required?: boolean;
+  /**
+   * placeholder for the input field
+   */
+  placeholder?: string;
+  /**
+   * classnames to style the input field
+   */
+  className?: string;
+  /**
+   * noBorder prop 'true' removes border of input
+   */
+  noBorder?: boolean;
+  /**
+   * onChange, onKeyDown, onBlur, onFocus actions
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * id to select the input field uniquely
+   */
+  id?: string;
+  /**
+   * if on, suggestion popup will be displayed
+   */
+  autoComplete?: 'on' | 'off';
+  /**
+   *  minimum and maximum values for the number type input field and their functions
+   */
+  minValue?: number;
+  maxValue?: number;
+  /**
+   * background of the input field prop
+   */
+  transparentBackground?: boolean;
+  /**
+   * size for the input field
+   */
+  size?: 'small' | 'medium';
+  /**
+   * isLabelRequired for the input field without label,showing placeholder
+   */
+  isLabelRequired?: boolean;
+}