pixel-priya 0.0.1

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,237 @@
+import { createPortal } from 'react-dom';
+import { DrawerProps } from './Types.js';
+import Button from '../Button/Button.js';
+import classNames from 'classnames';
+import './Drawer.scss';
+import { FC, useContext, useEffect, useState } from 'react';
+import Icon from '../Icon';
+import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
+import { ThemeContext } from '../ThemeProvider/ThemeProvider.js';
+import cx from 'classnames';
+const Drawer: FC<DrawerProps> = ({
+  isOpen = true,
+  children = 'Drawer content area',
+  onClose = () => {},
+  title = 'drawer',
+  primaryButtonProps = {},
+  secondaryButtonProps = {},
+  leftPrimaryButtonProps = {},
+  leftSecondaryButtonProps = {},
+  showEditButton = false,
+  onEdit = () => {},
+  onCollapse = () => {},
+  overlay = false,
+  isFooterRequired = true,
+  footerContent = null,
+  size = 'medium',
+  _isExpanded = false,
+  isBackButtonVisible = false,
+  _isCloseModalButtonVisible = true,
+  showHeader = true,
+  backButtonIcon,
+  onCloseIconClick,
+  customHeader,
+  customFooter,
+  leftTertiaryButtonProps = {},
+  rightTertiaryButtonProps = {},
+  zIndex = 999,
+  secondLayerZIndex = false,
+  top,
+  height,
+  width,
+  right = 0,
+  overflow,
+}: DrawerProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleEsc = useEscapeKey('Escape');
+
+  handleEsc(onClose);
+
+  const toggleExpand = () => {
+    setIsExpanded((prev) => {
+      onCollapse(!prev);
+      return !prev;
+    });
+  };
+
+  const onCancel = () => {
+    if (secondaryButtonProps.onClick) {
+      secondaryButtonProps.onClick();
+    } else {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    closeModal();
+  }, [isOpen]);
+
+  const closeModal = () => {
+    if (!isOpen) {
+      setTimeout(() => {
+        return null;
+      }, 1000);
+    }
+  };
+
+  const drawerSize = isExpanded ? 'x-large' : size;
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
+  return createPortal(
+    <div className={classNames('ff-drawer-container', currentTheme)}>
+      {overlay && (
+        <div
+          className={cx(
+            secondLayerZIndex && 'child-drawer-overlay',
+            'ff-overlay'
+          )}
+        />
+      )}
+
+      <div
+        className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
+          'ff-drawer--open': isOpen,
+        })}
+        style={{ zIndex, top, height, width, right, overflow }}
+      >
+        {showHeader && (
+          <div
+            className={classNames('ff-drawer-header', {
+              'ff-custom-header': customHeader,
+            })}
+          >
+            {customHeader ? (
+              <div className="ff-custom-header">{customHeader}</div>
+            ) : (
+              <div className="ff-drawer-action-section">
+                <div className="ff-action-button">
+                  {showEditButton && (
+                    <button
+                      className="ff-expand-collapse-button"
+                      onClick={onEdit}
+                    >
+                      <Icon name="logo" height={16} width={16} />
+                      Edit
+                    </button>
+                  )}
+                  {_isExpanded && (
+                    <button
+                      className="ff-expand-collapse-button"
+                      onClick={toggleExpand}
+                    >
+                      <Icon
+                        name={isExpanded ? 'maximize_icon' : 'minimize_script'}
+                        height={16}
+                        width={16}
+                      />
+                    </button>
+                  )}
+                  {isBackButtonVisible &&
+                    (backButtonIcon || (
+                      <Icon
+                        name="back_icon"
+                        height={16}
+                        width={16}
+                        hoverEffect
+                        onClick={onClose}
+                      />
+                    ))}
+                  {title && <div className="ff-drawer-title">{title}</div>}
+                </div>
+                {_isCloseModalButtonVisible && (
+                  <div className="ff-close-icon">
+                    <Icon
+                      name="close"
+                      hoverEffect={true}
+                      onClick={onCloseIconClick || onClose}
+                      height={6}
+                      width={6}
+                      color="var(--tabs-label-active-color)"
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        <div
+          className={classNames('ff-drawer-body', {
+            'no-footer': !isFooterRequired,
+          })}
+        >
+          {children}
+        </div>
+
+        {isFooterRequired && (
+          <div
+            className={classNames('ff-drawer-footer', {
+              'ff-custom-footer': customFooter,
+            })}
+          >
+            {customFooter || footerContent || (
+              <>
+                <div className="button-container">
+                  {leftSecondaryButtonProps.label && (
+                    <Button
+                      {...leftSecondaryButtonProps}
+                      onClick={leftPrimaryButtonProps.onClick}
+                      variant="secondary"
+                      transparentBackground={true}
+                    />
+                  )}
+                  {leftPrimaryButtonProps.label && (
+                    <Button
+                      {...leftPrimaryButtonProps}
+                      onClick={leftPrimaryButtonProps.onClick}
+                      variant="primary"
+                      transparentBackground={true}
+                    />
+                  )}
+                  {leftTertiaryButtonProps?.label && (
+                    <Button
+                      {...leftTertiaryButtonProps}
+                      onClick={leftTertiaryButtonProps.onClick}
+                      variant="tertiary"
+                      transparentBackground={true}
+                    />
+                  )}
+                </div>
+                <div className="button-container">
+                  {rightTertiaryButtonProps?.label && (
+                    <Button
+                      {...rightTertiaryButtonProps}
+                      onClick={rightTertiaryButtonProps.onClick}
+                      variant="tertiary"
+                      transparentBackground={true}
+                    />
+                  )}
+                  {secondaryButtonProps.label && (
+                    <Button
+                      {...secondaryButtonProps}
+                      onClick={onCancel}
+                      variant="secondary"
+                      transparentBackground={true}
+                    />
+                  )}
+                  {primaryButtonProps.label && (
+                    <Button
+                      {...primaryButtonProps}
+                      onClick={primaryButtonProps.onClick}
+                      variant="primary"
+                      transparentBackground={true}
+                    />
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default Drawer;

package/src/components/Drawer/Types.ts

@@ -0,0 +1,165 @@
+import { ReactNode } from 'react';
+
+export interface BtnPropsCommon {
+  /**
+   * Label for the button
+   */
+  label?: string;
+  /**
+   * Boolean value to disable the button
+   */
+  disabled?: boolean;
+  /**
+   * Onclick function for button
+   */
+  onClick?: () => void;
+  /**
+   * Button type
+   * @default 'button'
+   * @example 'submit'
+   * @example 'button'
+   */
+  type?: 'button' | 'submit';
+  /**
+   *  form to accept id of form in string format
+   */
+  form?: string;
+}
+export interface DrawerProps {
+  /**
+   * To Open the Drawer
+   */
+  isOpen: boolean;
+  /**
+   * To Expand the Drawer
+   */
+  _isExpanded?: boolean;
+  /**
+   * To show and  hide the back button of the Drawer
+   */
+  isBackButtonVisible?: boolean;
+  /**
+   * To show and  hide the close button of the Drawer
+   */
+  _isCloseModalButtonVisible?: boolean;
+  /**
+   * Function to close the drawer
+   */
+
+  onClose?: () => void;
+  /**
+   * Size of the drawer medium = 550px large = 850px
+   */
+  size?: 'small' | 'medium' | 'large' | 'x-large';
+
+  /**
+   * Body Content of the drawer
+   */
+  children: ReactNode;
+  /**
+   * Header title for the drawer
+   */
+  title?: string | ReactNode;
+  /**
+   * To show the edit button on the header
+   */
+  showEditButton?: boolean;
+  /**
+   * Primary | Success button props
+   */
+  primaryButtonProps?: BtnPropsCommon;
+  /**
+   * Secondary | Cancel button props
+   */
+  secondaryButtonProps?: BtnPropsCommon;
+  /**
+   * Left side Primary Button | Cancel button props
+   */
+  leftPrimaryButtonProps?: BtnPropsCommon;
+  /**
+   * Left side Secondary | Cancel button props
+   */
+  leftSecondaryButtonProps?: BtnPropsCommon;
+  /**
+   * Left side Tertiary Button | Help button props
+   */
+  leftTertiaryButtonProps?: BtnPropsCommon;
+
+  /**
+   * Right side Tertiary Button | More Info button props
+   */
+  rightTertiaryButtonProps?: BtnPropsCommon;
+  /**
+   * Onclick function for edit button
+   */
+  onEdit?: () => void;
+  /**
+   * Background overlay for the drawer
+   */
+  overlay?: boolean;
+  /**
+   * displays footer if its true, default true
+   */
+  isFooterRequired?: boolean;
+  /**
+   * footer Content
+   */
+  footerContent?: ReactNode;
+  /**
+   * To show or hide the header
+   */
+  showHeader?: boolean;
+  /**
+   *  Custom back button icon
+   * The icon to display for the back button.
+   * If not provided, a default icon will be used.
+   */
+  backButtonIcon?: ReactNode;
+  /**
+   * Callback function when the close icon is clicked
+   */
+  onCloseIconClick?: () => void;
+  /**
+   * Custom header for the drawer, replacing the default header.
+   * If provided, this will render in place of the default header.
+   */
+  customHeader?: ReactNode;
+  /**
+   * Custom footer for the drawer, replacing the default footer.
+   * If provided, this will render in place of the default footer.
+   */
+  customFooter?: ReactNode;
+  /**
+   * Custom z-index for the drawer
+   */
+  zIndex?: number;
+  /**
+   * Custom z-index for the secondary drawer
+   */
+  secondLayerZIndex?: boolean;
+  /**
+   * Custom top for the drawer
+   */
+  top?: string;
+  /**
+   * Height of the drawer
+   */
+  height?: string;
+  /**
+   *
+   * width of the drawer
+   */
+  width?: string;
+  /**
+   * Position from right
+   */
+  right?: string | number;
+  /**
+   * Custom overflow for the drawer
+   */
+  overflow?: string;
+  /**
+   * Callback function returns a boolean value when the drawer is collapsed.
+   */
+  onCollapse?: (value: boolean) => void;
+}

package/src/components/Drawer/index.ts

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

package/src/components/EditTextField/EditTextField.scss

@@ -0,0 +1,97 @@
+@use '../../assets/styles/fonts' as *;
+
+.ff-label-edit-text-field {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+
+  .display-text-container {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    .edit-button {
+      padding: 4px 8px;
+      background-color: var(--button-background-color);
+      color: var(--button-text-color);
+      border: 1px solid var(--button-border-color);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+
+      &:hover {
+        background-color: var(--button-hover-background-color);
+      }
+    }
+  }
+
+  .ff-label-text-field {
+    display: flex;
+  }
+  .ff-label-text-field-with-dropdown,
+  .ff-label-text-field-without-dropdown {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .ff-label {
+    position: absolute;
+    top: 0;
+    left: 10px;
+    transform: translateY(-50%);
+    transition: all 0.2s ease;
+    color: var(--label-edit-text-label-color);
+    background: var(--label-edit-text-background-color);
+    padding: 0 4px;
+    @extend .font-size-8;
+  }
+  .ff-textfield-label {
+    @extend .ff-label;
+    top: 5px;
+  }
+
+  .display-text {
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  .ff-text-field {
+    outline: none;
+    width: fit-content;
+    @extend .fontSm;
+  }
+  .ff-text-field-error-border {
+    border: 1px solid var(--label-edit-error-text);
+  }
+  .ff-text-field-border {
+    border: 1px solid var(--label-edit-text-label-color);
+  }
+  .ff-text-field-error-text {
+    color: var(--label-edit-error-text);
+  }
+  .ff-text-field-text {
+    color: var(--label-edit-text-label-color);
+  }
+  .ff-text-field {
+    padding: 0 4px;
+    border-radius: 4px;
+  }
+
+  .ff-icon-container {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    .confirm-icon,
+    .cancel-icon {
+      cursor: pointer;
+    }
+  }
+
+  .error-text {
+    color: var(--label-edit-error-text);
+    margin: 0;
+  }
+}

package/src/components/EditTextField/EditTextField.stories.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import EditTextField from './EditTextField';
+import '../../assets/styles/_colors.scss';
+import './EditTextField.scss';
+import React, { useState } from 'react';
+
+const meta: Meta<typeof EditTextField> = {
+  title: 'Components/EditTextField',
+  component: EditTextField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof EditTextField>;
+
+export const textFieldWithLabel: Story = {
+  render: () => {
+    const [customError, setCustomError] = useState<string>('');
+
+    const handleConfirmAction = (inputValue: string) => {
+      setCustomError(inputValue);
+    };
+    return (
+      <EditTextField
+        text="Verify The Function Of Categories For"
+        label="Add Module"
+        customError={customError} // Updated to use state
+        confirmIcon={{
+          name: 'update_icon',
+          onClick: () => {},
+          color: 'var(--label-edit-confirm-icon)',
+          height: 20,
+          width: 20,
+        }}
+        cancelIcon={{
+          name: 'close',
+          onClick: () => {},
+          color: 'var(--label-edit-cancel-icon)',
+          height: 16,
+          width: 16,
+        }}
+        width="300px"
+        height="22px"
+        confirmAction={handleConfirmAction}
+        customErrorCondition={false}
+      />
+    );
+  },
+};
+
+export const textFieldWithOutLabel: Story = {
+  render: () => {
+    const handleConfirmAction = (inputValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+      console.info('Confirmed input value:', inputValue);
+    };
+    return (
+      <EditTextField
+        text="Verify The Function Of Categories For" //it might be state
+        confirmIcon={{
+          name: 'update_icon',
+          onClick: () => {},
+          color: 'var(--label-edit-confirm-icon)',
+          height: 20,
+          width: 20,
+        }}
+        cancelIcon={{
+          name: 'close',
+          onClick: () => {},
+          color: 'var(--label-edit-cancel-icon)',
+          height: 16,
+          width: 16,
+        }}
+        width="300px"
+        height="22px"
+        confirmAction={handleConfirmAction}
+        customErrorCondition={false}
+      />
+    );
+  },
+};
+export const openTextField: Story = {
+  render: () => {
+    const handleConfirmAction = (inputValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+      console.info('Confirmed input value:', inputValue);
+    };
+    let demoText = 'Verify The Function Of Categories For';
+    return (
+      <EditTextField
+        text={demoText} //it might be state
+        confirmIcon={{
+          name: 'update_icon',
+          onClick: () => {},
+          color: 'yellow',
+          height: 20,
+          width: 20,
+        }}
+        cancelIcon={{
+          name: 'close',
+          onClick: () => {},
+          color: 'yellow',
+          height: 16,
+          width: 16,
+        }}
+        editIcon={{
+          name: 'close',
+          onClick: () => {},
+          color: 'yellow',
+          height: 16,
+          width: 16,
+        }}
+        width="200px"
+        height="50px"
+        isOpen={true}
+        confirmAction={handleConfirmAction}
+        customError="max char 10"
+        customErrorCondition={demoText.length > 10}
+        onClick={() => {}}
+      />
+    );
+  },
+};
+
+export default meta;