pixel-react 1.10.15 → 1.10.16

package/src/components/Tabs/Tabs.tsx

@@ -1,82 +0,0 @@
-import { TabsProps } from './types';
-import './Tabs.scss';
-import classNames from 'classnames';
-import Typography from '../Typography';
-import '../../assets/styles/_colors.scss';
-
-const Tabs = ({
-  variant = 'default',
-  tabsData,
-  activeTabId,
-  onTabClick,
-  noBorder = false,
-  noPadding = false,
-}: TabsProps) => {
-  return (
-    <div className={`ff-tabs-container`}>
-      <div
-        className={classNames(`ff-tab-row--${variant}`, {
-          'ff-tab-row--no-border': noBorder,
-          'ff-tab-row--no-padding': noPadding,
-        })}
-      >
-        {tabsData.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => !tab.disabled && onTabClick(tab.id)}
-            disabled={tab.disabled}
-            className={classNames(`ff-tab-button--${variant}`, {
-              disabled: tab.disabled,
-              active: activeTabId === tab.id,
-            })}
-          >
-            <div className="label-count-section">
-              <Typography
-                children={tab.label}
-                lineHeight="18px"
-                fontWeight={activeTabId === tab.id ? 'semi-bold' : 'regular'}
-                color={
-                  activeTabId === tab.id
-                    ? 'var(--tabs-label-active-color)'
-                    : 'var(--tabs-label-default-color)'
-                }
-                className={classNames('ff-tab-label', {
-                  'ff-tab-label--active': activeTabId === tab.id,
-                })}
-              />
-              {variant === 'default' && tab.count && (
-                <span
-                  className={classNames('tab-count', {
-                    'tab-count--active': activeTabId === tab.id,
-                  })}
-                >
-                  {tab.count}
-                </span>
-              )}
-            </div>
-
-            <div
-              className={classNames('ff-tab-bar', {
-                'ff-tab-bar--active': activeTabId === tab.id,
-              })}
-            ></div>
-            <span
-              className={`ff-defaultStatus ${
-                tab.status === 'success'
-                  ? 'ff-successStatus'
-                  : tab.status === 'error'
-                  ? 'ff-dangerStatus'
-                  : ''
-              }`}
-            ></span>
-          </button>
-        ))}
-      </div>
-      <div className={`ff-tab-content`}>
-        {tabsData.find((tab) => tab.id === activeTabId)?.component}
-      </div>
-    </div>
-  );
-};
-
-export default Tabs;

package/src/components/Tabs/index.ts

@@ -1 +0,0 @@
-export { default } from './Tabs';

package/src/components/Tabs/types.ts

@@ -1,50 +0,0 @@
-export interface Tab {
-  /**
-   * Unique identifier for the tab, for handling click events.
-   */
-  id: string;
-  /**
-   * Display label for the tab.
-   */
-  label: string;
-  /**
-   * The content to display when this tab is active.
-   */
-  component?: JSX.Element | React.ReactNode;
-  /**
-   * Optional property to indicate if the tab is disabled.
-   */
-  disabled?: boolean;
-}
-
-export interface TabsProps {
-  /**
-   * An array of tab objects containing label, component, and optional disabled status.
-   */
-  tabsData: {
-    id: string;
-    label: string;
-    component?: JSX.Element;
-    disabled?: boolean;
-    count?: number | string;
-    status?: 'success' | 'error' | 'transparent';
-  }[];
-  /**
-   * Defines the styling variant of the tabs.
-   */
-  variant?: 'default' | 'capsule';
-  /**
-   * activeTabId : The ID of the currently active tab.
-   */
-  activeTabId: string;
-
-  /**
-   * onTabClick : function updates the active tab state when a user interacts with the tabs,
-   */
-  onTabClick: (id: string) => void;
-  /**
-   * noBorder:true , removes the outer border from tabs
-   */
-  noBorder?: boolean;
-  noPadding?:boolean
-}

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

@@ -1,92 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-export { default } from './Textarea';

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,27 +0,0 @@
-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 +0,0 @@
-export { default } from './ThemeProvider';

package/src/components/ThemeProvider/types.ts

@@ -1,14 +0,0 @@
-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;
-}

package/src/components/Toast/Toast.stories.tsx

@@ -1,144 +0,0 @@
-import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import Toaster from './Toast';
-import Button from '../Button';
-
-const meta: Meta<typeof Toaster> = {
-  title: 'Components/Toast',
-  component: Toaster,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Toaster>;
-
-const defaultArgs = {
-  isOpen: false,
-  toastTitle: 'Success',
-  toastMessage: 'Operation completed successfully!',
-  closeButtonLabel: 'x',
-  displayDuration: 3000, // Set toast display duration in milliseconds
-};
-
-export const Controlled: Story = {
-  args: {
-    ...defaultArgs,
-  },
-  render: () => {
-    const [toasts, setToasts] = useState({
-      success: false,
-      info: false,
-      confirm: false,
-      warning: false,
-      alert: false,
-      error: false,
-    });
-
-    const handleToastToggle = (key: keyof typeof toasts) => {
-      setToasts((prev) => ({ ...prev, [key]: !prev[key] }));
-    };
-
-    return (
-      <div className="fireflink-stories-toaster-container">
-        <div className="fireflink-stories-toaster-container-row">
-          <div>
-            <Button
-              variant="primary"
-              label="SUCCESS"
-              onClick={() => handleToastToggle('success')}
-            />
-            <Toaster
-              {...defaultArgs}
-              isOpen={toasts.success}
-              variant="success"
-              toastTitle="Success!"
-              toastMessage="Variable name requested for review successfully."
-              onCancelClick={() => handleToastToggle('success')}
-            />
-          </div>
-          <div>
-            <Button
-              variant="secondary"
-              label="Information"
-              onClick={() => handleToastToggle('info')}
-            />
-            <Toaster
-              {...defaultArgs}
-              isOpen={toasts.info}
-              variant="info"
-              toastTitle="Info!"
-              toastMessage="Data updated successfully."
-              onCancelClick={() => handleToastToggle('info')}
-            />
-          </div>
-          <div>
-            <Button
-              variant="delete"
-              label="Confirmation"
-              onClick={() => handleToastToggle('confirm')}
-            />
-            <Toaster
-              {...defaultArgs}
-              isOpen={toasts.confirm}
-              variant="confirm"
-              toastTitle="Delete Confirmation"
-              toastMessage="Are you sure you want to delete this data?"
-              onCancelClick={() => handleToastToggle('confirm')}
-            />
-          </div>
-        </div>
-        <div className="fireflink-stories-toaster-container-row">
-          <div>
-            <Button
-              variant="primary"
-              label="WARNING"
-              onClick={() => handleToastToggle('warning')}
-            />
-            <Toaster
-              {...defaultArgs}
-              isOpen={toasts.warning}
-              variant="warning"
-              toastTitle="Warning!"
-              toastMessage="Action might have consequences."
-              onCancelClick={() => handleToastToggle('warning')}
-            />
-          </div>
-          <div>
-            <Button
-              variant="primary"
-              label="Alert"
-              onClick={() => handleToastToggle('alert')}
-            />
-            <Toaster
-              {...defaultArgs}
-              isOpen={toasts.alert}
-              variant="alert"
-              toastTitle="Alert!"
-              toastMessage="Immediate action required!"
-              onCancelClick={() => handleToastToggle('alert')}
-            />
-          </div>
-          <div>
-            <Button
-              variant="delete"
-              label="ERROR"
-              onClick={() => handleToastToggle('error')}
-            />
-            <Toaster
-              {...defaultArgs}
-              isOpen={toasts.error}
-              variant="danger"
-              toastTitle="Error!"
-              toastMessage="An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request."
-              onCancelClick={() => handleToastToggle('error')}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export default meta;