pixel-react 1.8.4 → 1.8.6

package/src/components/TextArea/Textarea.stories.tsx

@@ -1,92 +1,92 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Textarea from './Textarea';
-import React ,{ ChangeEvent, useState } from 'react';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-const meta: Meta<typeof Textarea> = {
-  title: 'Components/Textarea',
-  component: Textarea,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Textarea>;
-
-const defaultArgs = {
-  name: 'textarea',
-  label: '',
-  disabled: false,
-  placeholder: 'Type Your Description Here',
-  value: '',
-  variant: 'primary',
-  rows: 4,
-  cols: 30,
-  capacity: 200,
-  resize: false,
-};
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Description',
-    variant: 'default',
-  },
-};
-export const Primary: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Description',
-    variant: 'primary',
-  },
-};
-export const Disabled: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Description',
-    variant: 'primary',
-    disabled: true,
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [value, setValue] = useState<string>('');
-    const [error, setError] = useState<boolean>(false);
-    const [helperText, setHelperText] = useState<string>();
-
-    const onChangeHandler = (event: ChangeEvent<HTMLTextAreaElement>) => {
-      const value = event.target.value;
-      if (event.target.required) {
-        if (checkEmpty(value)) {
-          setError(true);
-          setHelperText(`${event?.target?.name} is required`);
-        } else {
-          setError(false);
-          setHelperText('');
-        }
-      }
-      setValue(value);
-    };
-    return (
-      <>
-        <Textarea
-          {...defaultArgs}
-          onChange={onChangeHandler}
-          disabled={false}
-          capacity={200}
-          value={value}
-          name="Description"
-          label="Description"
-          placeholder="Type Your Description Here"
-          variant="primary"
-          required={false}
-          error={error}
-          helperText={helperText}
-        />
-      </>
-    );
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import Textarea from './Textarea';
+import React ,{ ChangeEvent, useState } from 'react';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+const meta: Meta<typeof Textarea> = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Textarea>;
+
+const defaultArgs = {
+  name: 'textarea',
+  label: '',
+  disabled: false,
+  placeholder: 'Type Your Description Here',
+  value: '',
+  variant: 'primary',
+  rows: 4,
+  cols: 30,
+  capacity: 200,
+  resize: false,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Description',
+    variant: 'default',
+  },
+};
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Description',
+    variant: 'primary',
+  },
+};
+export const Disabled: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Description',
+    variant: 'primary',
+    disabled: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<string>('');
+    const [error, setError] = useState<boolean>(false);
+    const [helperText, setHelperText] = useState<string>();
+
+    const onChangeHandler = (event: ChangeEvent<HTMLTextAreaElement>) => {
+      const value = event.target.value;
+      if (event.target.required) {
+        if (checkEmpty(value)) {
+          setError(true);
+          setHelperText(`${event?.target?.name} is required`);
+        } else {
+          setError(false);
+          setHelperText('');
+        }
+      }
+      setValue(value);
+    };
+    return (
+      <>
+        <Textarea
+          {...defaultArgs}
+          onChange={onChangeHandler}
+          disabled={false}
+          capacity={200}
+          value={value}
+          name="Description"
+          label="Description"
+          placeholder="Type Your Description Here"
+          variant="primary"
+          required={false}
+          error={error}
+          helperText={helperText}
+        />
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/TextArea/Textarea.tsx

@@ -1,86 +1,86 @@
-import classNames from 'classnames';
-import './Textarea.scss';
-import { TextareaProps } from './Types';
-import { truncateText } from '../../utils/truncateText/truncateText';
-const Textarea = ({
-  capacity = 200,
-  name,
-  label,
-  value,
-  variant = 'primary',
-  error,
-  helperText = '',
-  disabled = false,
-  required = false,
-  placeholder = 'Enter text',
-  className = '',
-  onChange,
-  onBlur,
-  onFocus,
-  onPaste,
-  rows = 4,
-  cols = 40,
-  resize = false,
-  ...props
-}: TextareaProps) => {
-  return (
-    <div
-      className={classNames('ff-textarea-container', {
-        'ff-textarea-container--disabled': disabled,
-        'ff-textarea-container--float': !!value,
-      })}
-    >
-      <label
-        htmlFor={name}
-        className={classNames('ff-textarea-label-container', {
-          'ff-textarea-label-container--danger': error,
-        })}
-      >
-        <span
-          className={classNames(
-            `ff-textarea-label ff-textarea-label--${variant}`,
-            {
-              'ff-textarea-label--danger': error,
-            }
-          )}
-        >
-          {required && <span className="required-asterisk">*</span>}
-          {label}
-        </span>
-      </label>
-      <textarea
-        maxLength={capacity}
-        name={name}
-        value={value}
-        id={name}
-        className={classNames(
-          `ff-textarea ff-textarea--${variant}`,
-          className,
-          {
-            'ff-textarea--danger': error,
-            'ff-textarea--resize': !resize,
-          }
-        )}
-        placeholder={truncateText(placeholder, 25)}
-        disabled={disabled}
-        onChange={onChange}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        onPaste={onPaste}
-        required={required}
-        rows={rows}
-        cols={cols}
-        {...props}
-      />
-      <div className="msg-character-count">
-        {!!capacity && (
-          <span>
-            <span>{value?.length}</span>/{capacity}
-          </span>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Textarea;
+import classNames from 'classnames';
+import './Textarea.scss';
+import { TextareaProps } from './Types';
+import { truncateText } from '../../utils/truncateText/truncateText';
+const Textarea = ({
+  capacity = 200,
+  name,
+  label,
+  value,
+  variant = 'primary',
+  error,
+  helperText = '',
+  disabled = false,
+  required = false,
+  placeholder = 'Enter text',
+  className = '',
+  onChange,
+  onBlur,
+  onFocus,
+  onPaste,
+  rows = 4,
+  cols = 40,
+  resize = false,
+  ...props
+}: TextareaProps) => {
+  return (
+    <div
+      className={classNames('ff-textarea-container', {
+        'ff-textarea-container--disabled': disabled,
+        'ff-textarea-container--float': !!value,
+      })}
+    >
+      <label
+        htmlFor={name}
+        className={classNames('ff-textarea-label-container', {
+          'ff-textarea-label-container--danger': error,
+        })}
+      >
+        <span
+          className={classNames(
+            `ff-textarea-label ff-textarea-label--${variant}`,
+            {
+              'ff-textarea-label--danger': error,
+            }
+          )}
+        >
+          {required && <span className="required-asterisk">*</span>}
+          {label}
+        </span>
+      </label>
+      <textarea
+        maxLength={capacity}
+        name={name}
+        value={value}
+        id={name}
+        className={classNames(
+          `ff-textarea ff-textarea--${variant}`,
+          className,
+          {
+            'ff-textarea--danger': error,
+            'ff-textarea--resize': !resize,
+          }
+        )}
+        placeholder={truncateText(placeholder, 25)}
+        disabled={disabled}
+        onChange={onChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        onPaste={onPaste}
+        required={required}
+        rows={rows}
+        cols={cols}
+        {...props}
+      />
+      <div className="msg-character-count">
+        {!!capacity && (
+          <span>
+            <span>{value?.length}</span>/{capacity}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Textarea;

package/src/components/TextArea/Types.ts

@@ -1,85 +1,85 @@
-export interface TextareaProps {
-  /**
-   * Name | name of the textarea field
-   */
-  name: string;
-  /**
-   * Label | field label to be displayed
-   */
-  label: string;
-  /**
-   * value | textarea field value
-   */
-  value: string;
-  /**
-   * variants to set color/style of the textarea field
-   */
-  variant?: 'default' | 'primary';
-  /**
-   * error | If true, error message will be displayed
-   */
-  error?: boolean;
-  /**
-   * helperText | error, success, warning message to be shown
-   */
-  helperText?: string;
-  /**
-   * to disable the textarea field
-   */
-  disabled?: boolean;
-  /**
-   * if true, textarea field will be mandatory
-   */
-  required?: boolean;
-  /**
-   * placeholder for the textarea field
-   */
-  placeholder?: string;
-  /**
-   * classnames to style the textarea field
-   */
-  className?: string;
-  /**
-   * onChange, onKeyDown, onBlur, onFocus actions
-   */
-  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-
-  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-
-  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-
-  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-
-  onPaste?: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
-  
-  /**
-   * id to select the textarea field uniquely
-   */
-  id?: string;
-  /**
-   * if on, suggestion popup will be displayed
-   */
-  autoComplete?: 'on' | 'off';
-  /**
-   * background of the textarea field prop
-   */
-
-  /**
-   * capacity | Maximum number of characters allowed in the textarea.
-   */
-  capacity?: number;
-  /**
-   * rows | Number of visible text lines in the textarea.
-   * Used to control the height of the textarea.
-   */
-  rows?: number;
-  /**
-   * cols | Number of visible character widths in the textarea.
-   * Used to control the width of the textarea.
-   */
-  cols?: number;
-  /**
-   * for resizing purpose
-   */
-  resize?: boolean;
-}
+export interface TextareaProps {
+  /**
+   * Name | name of the textarea field
+   */
+  name: string;
+  /**
+   * Label | field label to be displayed
+   */
+  label: string;
+  /**
+   * value | textarea field value
+   */
+  value: string;
+  /**
+   * variants to set color/style of the textarea field
+   */
+  variant?: 'default' | 'primary';
+  /**
+   * error | If true, error message will be displayed
+   */
+  error?: boolean;
+  /**
+   * helperText | error, success, warning message to be shown
+   */
+  helperText?: string;
+  /**
+   * to disable the textarea field
+   */
+  disabled?: boolean;
+  /**
+   * if true, textarea field will be mandatory
+   */
+  required?: boolean;
+  /**
+   * placeholder for the textarea field
+   */
+  placeholder?: string;
+  /**
+   * classnames to style the textarea field
+   */
+  className?: string;
+  /**
+   * onChange, onKeyDown, onBlur, onFocus actions
+   */
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+
+  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+
+  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+
+  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+
+  onPaste?: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
+  
+  /**
+   * id to select the textarea field uniquely
+   */
+  id?: string;
+  /**
+   * if on, suggestion popup will be displayed
+   */
+  autoComplete?: 'on' | 'off';
+  /**
+   * background of the textarea field prop
+   */
+
+  /**
+   * capacity | Maximum number of characters allowed in the textarea.
+   */
+  capacity?: number;
+  /**
+   * rows | Number of visible text lines in the textarea.
+   * Used to control the height of the textarea.
+   */
+  rows?: number;
+  /**
+   * cols | Number of visible character widths in the textarea.
+   * Used to control the width of the textarea.
+   */
+  cols?: number;
+  /**
+   * for resizing purpose
+   */
+  resize?: boolean;
+}

package/src/components/TextArea/index.tsx

@@ -1 +1 @@
-export { default } from './Textarea';
+export { default } from './Textarea';

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,27 +1,27 @@
-import React, { createContext, useState, useEffect } from 'react';
-import { ThemeContextType, ThemeProviderProps, Theme } from './types';
-import '../../assets/Themes/Theme.scss';
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-
-const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, theme }) => {
-  const [currentTheme, setCurrentTheme] = useState<Theme>(theme || 'ff-light-theme');
-
-  const applyTheme = (newTheme: Theme) => setCurrentTheme(newTheme);
-
-  useEffect(() => {
-    document.body.className = currentTheme;
-    return () => {
-      document.body.className = '';
-    };
-  }, [currentTheme]);
-
-  return (
-    <ThemeContext.Provider value={{ currentTheme, setCurrentTheme, applyTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};
-
-export { ThemeContext };
-export default ThemeProvider;
+import React, { createContext, useState, useEffect } from 'react';
+import { ThemeContextType, ThemeProviderProps, Theme } from './types';
+import '../../assets/Themes/Theme.scss';
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, theme }) => {
+  const [currentTheme, setCurrentTheme] = useState<Theme>(theme || 'ff-light-theme');
+
+  const applyTheme = (newTheme: Theme) => setCurrentTheme(newTheme);
+
+  useEffect(() => {
+    document.body.className = currentTheme;
+    return () => {
+      document.body.className = '';
+    };
+  }, [currentTheme]);
+
+  return (
+    <ThemeContext.Provider value={{ currentTheme, setCurrentTheme, applyTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export { ThemeContext };
+export default ThemeProvider;

package/src/components/ThemeProvider/index.ts

@@ -1 +1 @@
-export { default } from './ThemeProvider';
+export { default } from './ThemeProvider';

package/src/components/ThemeProvider/types.ts

@@ -1,14 +1,14 @@
-import { ReactNode } from "react";
-
-export type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme' | 'ff-blue-theme';
-
-export interface ThemeContextType {
-  currentTheme: Theme;
-  setCurrentTheme: React.Dispatch<React.SetStateAction<Theme>>;
-  applyTheme: (newTheme: Theme) => void;
-}
-
-export interface ThemeProviderProps {
-  children?: ReactNode;
-  theme?: Theme;
-}
+import { ReactNode } from "react";
+
+export type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme' | 'ff-blue-theme';
+
+export interface ThemeContextType {
+  currentTheme: Theme;
+  setCurrentTheme: React.Dispatch<React.SetStateAction<Theme>>;
+  applyTheme: (newTheme: Theme) => void;
+}
+
+export interface ThemeProviderProps {
+  children?: ReactNode;
+  theme?: Theme;
+}