pixel-react 1.0.0

package/src/components/MenuOption/MenuOption.tsx

@@ -0,0 +1,126 @@
+import { useState, useRef } from 'react';
+import './MenuOption.scss';
+import Icon from '../Icon';
+import classNames from 'classnames';
+import Tooltip from '../Tooltip';
+import {
+  OptionCardProps,
+  OptionProps,
+  MenuOptionProps,
+  OptionClick,
+} from './types';
+import useClickOutside from '../../hooks/useClickOutside';
+import Typography from '../Typography';
+
+const Option = ({ option, onClick }: OptionProps) => (
+  <div
+    className={classNames('ff-options', {
+      'ff-disable-option': option.disable,
+    })}
+    onClick={() => !option.disable && onClick(option)}
+  >
+    <Icon name={option.icon} height={16} width={16} />
+    <Typography
+      as="label"
+      color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
+    >
+      {option.label}
+    </Typography>
+  </div>
+);
+
+const OptionCard = ({ options, onClick, styles }: OptionCardProps) => {
+  return (
+    <div className="ff-option-card" style={styles}>
+      {options.map((opt) => (
+        <Option key={opt.label} option={opt} onClick={onClick} />
+      ))}
+    </div>
+  );
+};
+
+const MenuOption = ({
+  labelName,
+  iconName,
+  tooltipTitle,
+  tooltipPlacement = 'bottom',
+  options = [],
+  dropdownPlacement = 'down',
+  onClick = () => {},
+  onOptionClick = () => {},
+  iconButtonSize = 20,
+  iconButtonBorderRadius = 7,
+  iconSize = 16,
+}: MenuOptionProps) => {
+  const [isClicked, setIsClicked] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const closeDropDown = () => setIsClicked(false);
+
+  const onIconClickHandler = () => {
+    onClick();
+    setIsClicked((prev) => !prev);
+  };
+
+  const handleOptionClick = (option: OptionClick) => {
+    onOptionClick(option);
+    closeDropDown();
+  };
+
+  const dropdownPositionStyles = () => {
+    switch (dropdownPlacement) {
+      case 'top':
+        return { bottom: '100%', left: -2 };
+      case 'left':
+        return { top: -2, right: '100%' };
+      case 'right':
+        return { top: -2, left: '100%' };
+      case 'down':
+      default:
+        return { top: '100%', left: -2 };
+    }
+  };
+
+  useClickOutside(menuRef, closeDropDown);
+
+  return (
+    <div className="ff-menu-option-container" ref={menuRef}>
+      <Tooltip title={tooltipTitle} placement={tooltipPlacement}>
+        <div className="ff-icon-label">
+          <div
+            className={classNames('ff-menuicon-container', {
+              'ff-menuicon-container-clicked': isClicked,
+            })}
+            onClick={onIconClickHandler}
+            style={{
+              width: `${iconButtonSize}px`,
+              height: `${iconButtonSize}px`,
+              borderRadius: `${iconButtonBorderRadius}px`,
+            }}
+          >
+            <Icon
+              height={iconSize}
+              width={iconSize}
+              name={iconName}
+              color={
+                isClicked
+                  ? 'var(--menu-option-icon-color)'
+                  : 'var(--menu-option-icon-clicked)'
+              }
+            />
+          </div>
+          {labelName && <Typography as="label">{labelName} </Typography>}
+        </div>
+      </Tooltip>
+      {isClicked && (
+        <OptionCard
+          options={options}
+          onClick={handleOptionClick}
+          styles={dropdownPositionStyles()}
+        />
+      )}
+    </div>
+  );
+};
+
+export default MenuOption;

package/src/components/MenuOption/index.ts

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

package/src/components/MenuOption/types.ts

@@ -0,0 +1,161 @@
+interface OptionClick {
+  /**
+   * The label displayed for the option.
+   * @type {string}
+   * @required
+   */
+  label: string;
+
+  /**
+   * The value(s) associated with the option, which can be a single string or an array of strings.
+   * @type {Array<string> | string}
+   * @required
+   */
+  value: Array<string> | string;
+}
+
+interface OptionType extends OptionClick {
+  /**
+   * The name of the icon associated with the option.
+   * @type {string}
+   * @required
+   */
+  icon: string;
+
+  /**
+   * Indicates whether the option is disabled.
+   * @type {boolean}
+   * @optional
+   */
+  disable?: boolean;
+}
+
+interface OptionCardProps {
+  /**
+   * The list of options displayed in the card.
+   * @type {Array<OptionType>}
+   * @required
+   */
+  options: Array<OptionType>;
+
+  /**
+   * Callback function triggered when an option is clicked.
+   * @param {any} data - The data associated with the clicked option.
+   * @type {function}
+   * @required
+   */
+  onClick: (data?: any) => void;
+
+  /**
+   * Optional styles applied to the card.
+   * @type {React.CSSProperties}
+   * @optional
+   */
+  styles?: React.CSSProperties;
+}
+
+interface MenuOptionProps {
+  /**
+   * The name of the label displayed next to the icon.
+   * @type {string}
+   * @optional
+   */
+  labelName?: string;
+
+  /**
+   * The name of the icon to be displayed.
+   * @type {string}
+   * @required
+   */
+  iconName: string;
+
+  /**
+   * The list of options available in the dropdown.
+   * @type {Array<OptionType>}
+   * @required
+   */
+  options: Array<OptionType>;
+
+  /**
+   * The title displayed in the tooltip when hovering over the icon.
+   * @type {string}
+   * @optional
+   */
+  tooltipTitle?: string;
+
+  /**
+   * The placement of the tooltip relative to the icon.
+   * @type {'bottom' | 'left' | 'right' | 'top' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'}
+   * @optional
+   */
+  tooltipPlacement?:
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end';
+
+  /**
+   * The placement of the dropdown menu relative to the icon.
+   * @type {'top' | 'left' | 'right' | 'bottom'}
+   * @optional
+   */
+  dropdownPlacement?: 'top' | 'left' | 'right' | 'down';
+
+  /**
+   * Callback function triggered when the icon is clicked.
+   * @type {function}
+   * @optional
+   */
+  onClick?: () => void;
+
+  /**
+   * Callback function triggered when an option is clicked.
+   * @param {OptionClick} option - The option that was clicked.
+   * @type {function}
+   * @optional
+   */
+  onOptionClick?: (option: OptionClick) => void;
+  /**
+   * The size of the icon button.
+   * @type {number}
+   * @default 20
+   */
+  iconButtonSize?: number;
+
+  /**
+   * The size of the icon.
+   * @type {number}
+   * @default 16
+   */
+  iconSize?: number;
+
+  /**
+   * The border radius of the icon.
+   * @type {number}
+   * @default 7
+   */
+  iconButtonBorderRadius?: number;
+}
+
+interface OptionProps {
+  /**
+   * The option to be displayed.
+   * @type {OptionType}
+   * @required
+   */
+  option: OptionType;
+
+  /**
+   * Callback function triggered when the option is clicked.
+   * @param {OptionClick} option - The clicked option.
+   * @type {function}
+   * @required
+   */
+  onClick: (option: OptionClick) => void;
+}
+
+export { OptionProps, MenuOptionProps, OptionCardProps, OptionClick };

package/src/components/MiniModal/MiniModal.scss

@@ -0,0 +1,139 @@
+.ff-mini-edit-modal-container {
+  width: fit-content;
+  padding: 0;
+  position: absolute;
+  visibility: hidden;
+  &.modalVisible {
+    visibility: visible;
+  }
+  &.animatedModal {
+    animation: slideDown 0.5s ease, opacity 0.5s ease;
+  }
+
+  .popover-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    z-index: 5;
+    &.popover-arrow-top {
+      bottom: 100%;
+      left: 30px;
+      border-width: 0 10px 10px 10px;
+      border-color: transparent transparent var(--ff-mini-modal-border)
+        transparent;
+      filter: drop-shadow(0 -2px 1px var(--ff-mini-modal-box-shadow));
+    }
+    &.popover-arrow-left {
+      left: -15px; //align the arrow with modal for the right side modal
+      border-width: 10px 10px 10px 0;
+      border-color: transparent var(--ff-mini-modal-border) transparent
+        transparent;
+      filter: drop-shadow(-2px 0 1px var(--ff-mini-modal-box-shadow));
+    }
+    &.popover-arrow-bottom {
+      top: 100%;
+      left: 30px;
+      border-width: 10px 10px 0 10px;
+      border-color: var(--ff-mini-modal-border) transparent transparent
+        transparent; // Bottom part of the arrow with the correct color
+      filter: drop-shadow(0 2px 1px var(--ff-mini-modal-box-shadow));
+    }
+    &.popover-arrow-right {
+      right: -10px;
+      top: 75px;
+      border-width: 10px 0 10px 10px;
+      border-color: transparent transparent transparent
+        var(--ff-mini-modal-border);
+      filter: drop-shadow(2px 0 1px var(--ff-mini-modal-box-shadow));
+    }
+
+    &.left-top-arrow {
+      top: 10%;
+    }
+    &.left-middle-arrow {
+      top: 50%;
+    }
+  }
+  .wrapped-div {
+    width: 35px;
+    height: 35px;
+    background-color: transparent;
+    outline: 8px solid var(--ff-mini-modal-border);
+    outline-offset: -8px;
+    position: absolute;
+    top: -34px;
+    z-index: 10;
+    border-radius: 7px 7px 0 0;
+    box-shadow: 0px -3px 4px 0px var(--ff-mini-modal-box-shadow);
+    &::before,
+    &::after {
+      position: absolute;
+      content: '';
+      width: 13px;
+      height: 13px;
+      background: transparent;
+      border-radius: 50%;
+      bottom: 0;
+      box-shadow: 8px 4px 0 var(--ff-mini-modal-border);
+    }
+    &::before {
+      left: -13px;
+      clip-path: polygon(100% 100%, 110% 45%, 0% 70%, 0% 100%);
+    }
+    &::after {
+      right: -13px;
+      clip-path: polygon(-5% 100%, 0% 40%, 100% 70%, 100% 100%);
+      box-shadow: -8px 4px 0 var(--ff-mini-modal-border);
+    }
+  }
+  .mini-edit-modal {
+    background: var(--ff-mini-modal-border);
+    position: relative;
+    max-height: fit-content;
+    z-index: 2;
+    padding: 4px;
+    width: 100%;
+    border-radius: 7px;
+    margin: 0 0 0 -5px;
+    height: 100%;
+    box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);
+
+    header {
+      border-radius: 4px 4px 0 0;
+    }
+    footer {
+      border-radius: 0 0 4px 4px;
+    }
+  }
+  .modal-content {
+    max-height: 250px;
+    overflow-y: auto;
+  }
+  .modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 5px;
+    background-color: var(--ff-mini-modal-footer-background);
+    height: 24px;
+    padding: 0 10px 0 0;
+    transition: transform 0.3s ease-in-out;
+  }
+  @keyframes slideDown {
+    0% {
+      transform: translateY(-50px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}
+.ff-mini-modal-buttons-flex {
+  display: flex;
+}
+.ff-mini-modal-gap-10 {
+  gap: 10px;
+}