pixel-react 1.2.1 → 1.2.3

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Avatar from './Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  component: Avatar,
+  title: 'Components/Avatar',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+  variant: {
+    control: { type: 'radio' },
+    options: ['small', 'medium', 'large'],
+  },
+}
+}
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Small: Story = {
+  args: {
+    variant: 'small',
+    iconName: 'accordion_header_icon',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    variant: 'medium',
+    iconName: 'accordion_header_icon',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    variant: 'large',
+    iconName: 'accordion_header_icon',
+  },
+};
+
+export const CustomAvatarSize: Story = {
+    args: {
+      customAvatarSize: 30,
+      iconName: 'accordion_header_icon',
+    },
+  };
+  
+  export const CustomIconSize: Story = {
+    args: {
+      customIconSize: 30,
+      customAvatarSize: 40,
+      iconName: 'accordion_header_icon',
+    },
+  };

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Icon from '../Icon';
+import './Avatar.scss';
+import { AvatarProps } from './types';
+
+const Avatar: React.FC<AvatarProps> = ({
+  variant="small",
+  iconName,
+  iconColor= 'var(--avatar-icon-color)',
+  customAvatarSize,
+  customIconSize,
+  backgroundColor
+}) => {
+    
+  return (
+    <div
+      className={`ff-avatar ff-avatar--${variant}`}
+      style={{ height: `${customAvatarSize}px`, width: `${customAvatarSize}px`, backgroundColor }}
+    >
+      <Icon name={iconName} height={customIconSize} width={customIconSize} color={iconColor}/>
+    </div>
+  );
+};
+
+export default Avatar;

package/src/components/Avatar/index.ts

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

package/src/components/Avatar/types.ts

@@ -0,0 +1,27 @@
+export interface AvatarProps {
+    /**
+   * This property determines the size of the avatar. It can be set to 'small', 'medium', or 'large'.
+   */
+  variant?: 'small' | 'medium' | 'large';
+  /**
+   * This property allows you to customize the background color of the avatar.
+   */
+  backgroundColor?: string;
+  /**
+   * This property specifies the name of the icon to be displayed within the avatar.
+   */
+  iconName: string;
+  /**
+   * This property allows you to customize the color of the icon within the avatar.
+   */
+  iconColor?: string;
+  /**
+   * This property allows you to set a custom size for the avatar, overriding the default size specified by the variant property.
+   */
+  
+  customAvatarSize?: number;
+  /**
+   * This property allows you to set a custom size for the icon within the avatar.
+   */
+  customIconSize?: number;
+}

package/src/components/Button/types.ts

@@ -4,7 +4,7 @@ export interface ButtonProps {
   /**
    * Variant of the button
    */
-  variant: 'primary' | 'secondary' | 'tertiary' | 'delete'| 'warning';
+  variant: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning';
   /**
    * What background color to use
    */

package/src/components/ExcelFile/ColorBarselector/ColorBarSelector.scss

@@ -1,5 +1,3 @@
-@use '../../../assets/styles/colors';
-
 .color-bar {
   background-color: var(--error_light);
   width: 100%;

package/src/components/ExcelFile/ContextMenu/ContextMenu.scss

@@ -1,12 +1,10 @@
-@import '../../../assets/styles/colors';
-@import '../../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .context-menu {
   position: absolute;
   z-index: 1;
   outline: none;
   background-color: var(--brand-color);
-  // box-shadow: 0px 0px 6px $shadow;
   border-radius: 5px;
   opacity: 1;
   padding: 16px 0;
@@ -29,7 +27,6 @@
         justify-content: center;
       }
       &:hover {
-        // background-color: $primary;
         .options-label {
           background: var(--option-card-bg-color);
         }

package/src/components/ExcelFile/ContextMenu/ContextMenu.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import './ContextMenu.scss';
 import Icon from '../../Icon';
-// import { colors } from '../../../colors/colorConstants';
 
 const ContextMenu: React.FC<ContextMenuProps> = ({
   customContext,

package/src/components/ExcelFile/ExcelFile/Excel/ActiveCell.tsx

@@ -1,12 +1,12 @@
-import * as React from "react";
-import classnames from "classnames";
-import * as Actions from "./actions";
-import * as Types from "./types";
-import * as Point from "./point";
-import useSelector from "./use-selector";
-import useDispatch from "./use-dispatch";
-import { getCellDimensions } from "./util";
-import * as Matrix from "./matrix";
+import * as React from 'react';
+import classnames from 'classnames';
+import * as Actions from './actions';
+import * as Types from './types';
+import * as Point from './point';
+import useSelector from './use-selector';
+import useDispatch from './use-dispatch';
+import { getCellDimensions } from './util';
+import * as Matrix from './matrix';
 
 type Props = {
   DataEditor: Types.DataEditorComponent;
@@ -77,7 +77,7 @@ const ActiveCell: React.FC<Props> = (props) => {
 
     const coordsChanged =
       active?.row !== prevActive.row || active?.column !== prevActive.column;
-    const exitedEditMode = mode !== "edit";
+    const exitedEditMode = mode !== 'edit';
 
     if (coordsChanged || exitedEditMode) {
       const initialCell = initialCellRef.current;
@@ -107,14 +107,14 @@ const ActiveCell: React.FC<Props> = (props) => {
     <div
       ref={rootRef}
       className={classnames(
-        "Spreadsheet__active-cell",
+        'Spreadsheet__active-cell',
         `Spreadsheet__active-cell--${mode}`
       )}
       style={dimensions}
-      onClick={mode === "view" && !readOnly ? edit : undefined}
+      onClick={mode === 'view' && !readOnly ? edit : undefined}
       tabIndex={0}
     >
-      {mode === "edit" && active && (
+      {mode === 'edit' && active && (
         <DataEditor
           row={active.row}
           column={active.column}

package/src/components/ExcelFile/ExcelFile/Excel/Cell.tsx

@@ -51,7 +51,7 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
 
   const handleMouseOver = React.useCallback(
     (event: React.MouseEvent<HTMLTableCellElement>) => {
-      if (dragging && first && !isDotDragging) { 
+      if (dragging && first && !isDotDragging) {
         setCellDimensions(point, getOffsetRect(event.currentTarget));
         select(point);
       }
@@ -102,10 +102,11 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
   return (
     <td
       ref={rootRef}
+      // style={data?.style}
       className={classnames('Spreadsheet__cell', data?.className, {
         'Spreadsheet__active-cell': active || dragging,
       })}
-      onMouseEnter={handleMouseOver} // Handle drag when mouse enters
+      onMouseEnter={handleMouseOver}
       onMouseDown={handleMouseDown}
       tabIndex={0}
     >
@@ -130,15 +131,15 @@ export const enhance = (
 ): React.FC<
   Omit<
     Types.CellComponentProps,
-    | "selected"
-    | "active"
-    | "copied"
-    | "dragging"
-    | "mode"
-    | "data"
-    | "select"
-    | "activate"
-    | "setCellDimensions"
+    | 'selected'
+    | 'active'
+    | 'copied'
+    | 'dragging'
+    | 'mode'
+    | 'data'
+    | 'select'
+    | 'activate'
+    | 'setCellDimensions'
   >
 > => {
   return function CellWrapper(props) {
@@ -169,7 +170,7 @@ export const enhance = (
       [dispatch]
     );
     const active = useSelector((state) => isActive(state.active, point));
-    const mode = useSelector((state) => (active ? state.mode : "view"));
+    const mode = useSelector((state) => (active ? state.mode : 'view'));
     const data = useSelector((state) => Matrix.get(point, state.model.data));
     const evaluatedData = useSelector((state) =>
       Matrix.get(point, state.model.evaluatedData)

package/src/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.tsx

@@ -1,10 +1,10 @@
-import * as React from "react";
-import classNames from "classnames";
-import * as Types from "./types";
-import * as Point from "./point";
-import * as Actions from "./actions";
-import useDispatch from "./use-dispatch";
-import useSelector from "./use-selector";
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Types from './types';
+import * as Point from './point';
+import * as Actions from './actions';
+import useDispatch from './use-dispatch';
+import useSelector from './use-selector';
 
 const ColumnIndicator: Types.ColumnIndicatorComponent = ({
   column,
@@ -14,7 +14,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
 }) => {
   const dispatch = useDispatch();
   const [width, setWidth] = React.useState(100);
-  
+
   // Function to handle the start of the resize (mouse down)
   const onMouseDown = (e: React.MouseEvent) => {
     const startX = e.clientX;
@@ -23,26 +23,33 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
     const onMouseMove = (moveEvent: MouseEvent) => {
       const newWidth = width + (moveEvent.clientX - startX);
       setWidth(newWidth);
-      
-      // const selectedAllRow = document.querySelector(".Spreadsheet__floating-rect--selected");
-      // const selectedSingleRow = document.querySelector(".Spreadsheet__active-cell");
 
-      // // If the element exists, update its height
-      // if (selectedAllRow instanceof HTMLElement&&selectedSingleRow instanceof HTMLElement) {
-      //   selectedAllRow.style.width = `${newWidth}px`; // Set the width
-      //   selectedSingleRow.style.width = `${newWidth}px`; // Set the width
-      // }
+      const selectedAllRow = document.querySelector(
+        '.Spreadsheet__floating-rect--selected'
+      );
+      const selectedSingleRow = document.querySelector(
+        '.Spreadsheet__active-cell'
+      );
+
+      // If the element exists, update its height
+      if (
+        selectedAllRow instanceof HTMLElement &&
+        selectedSingleRow instanceof HTMLElement
+      ) {
+        selectedAllRow.style.width = `${newWidth}px`;
+        selectedSingleRow.style.width = `${newWidth}px`;
+      }
     };
 
     // Function to stop the resizing (mouse up)
     const onMouseUp = () => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
     };
 
     // Add event listeners for mouse move and mouse up
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
   };
 
   const activate = React.useCallback(
@@ -58,12 +65,11 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
     [onSelect, column]
   );
 
-
   return (
     <th
-      style={{ minWidth: `${width}px`, position: "relative" }} // Use dynamic width
-      className={classNames("Spreadsheet__header", {
-        "Spreadsheet__header--selected": selected,
+      style={{ minWidth: `${width}px`, position: 'relative' }} // Use dynamic width
+      className={classNames('Spreadsheet__header', {
+        'Spreadsheet__header--selected': selected,
       })}
       onClick={handleClick}
       tabIndex={0}
@@ -71,15 +77,17 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
       {label !== undefined ? label : columnIndexToLabel(column)}
       <div
         onMouseDown={onMouseDown}
-        onClick={()=>{activate}}
+        onClick={() => {
+          activate;
+        }}
         style={{
-          zIndex: "inherit",
-          width: "2px",
-          position: "absolute",
+          zIndex: 'inherit',
+          width: '2px',
+          position: 'absolute',
           right: 0,
           top: 0,
-          height: "100%",
-          cursor: "ew-resize",
+          height: '100%',
+          cursor: 'ew-resize',
         }}
       />
     </th>
@@ -90,7 +98,7 @@ export default ColumnIndicator;
 
 export const enhance = (
   ColumnIndicatorComponent: Types.ColumnIndicatorComponent
-): React.FC<Omit<Types.ColumnIndicatorProps, "selected" | "onSelect">> => {
+): React.FC<Omit<Types.ColumnIndicatorProps, 'selected' | 'onSelect'>> => {
   return function ColumnIndicatorWrapper(props) {
     const dispatch = useDispatch();
     const selectEntireColumn = React.useCallback(
@@ -113,7 +121,7 @@ export const enhance = (
 
 // Utility function to convert column index to label (e.g., 0 -> A, 1 -> B, etc.)
 function columnIndexToLabel(column: number): string {
-  let label = "";
+  let label = '';
   let index = column;
   while (index >= 0) {
     label = String.fromCharCode(65 + (index % 26)) + label;

package/src/components/ExcelFile/ExcelFile/Excel/Copied.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
-import FloatingRect from "./FloatingRect";
-import { getRangeDimensions } from "./util";
-import useSelector from "./use-selector";
+import * as React from 'react';
+import FloatingRect from './FloatingRect';
+import { getRangeDimensions } from './util';
+import useSelector from './use-selector';
 
 const Copied: React.FC = () => {
   const range = useSelector((state) => state.copied);

package/src/components/ExcelFile/ExcelFile/Excel/CornerIndicator.tsx

@@ -1,10 +1,10 @@
-import * as React from "react";
-import classNames from "classnames";
-import * as Actions from "./actions";
-import { EntireWorksheetSelection } from "./selection";
-import * as Types from "./types";
-import useDispatch from "./use-dispatch";
-import useSelector from "./use-selector";
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Actions from './actions';
+import { EntireWorksheetSelection } from './selection';
+import * as Types from './types';
+import useDispatch from './use-dispatch';
+import useSelector from './use-selector';
 
 const CornerIndicator: Types.CornerIndicatorComponent = ({
   selected,
@@ -15,8 +15,8 @@ const CornerIndicator: Types.CornerIndicatorComponent = ({
   }, [onSelect]);
   return (
     <th
-      className={classNames("Spreadsheet__header", {
-        "Spreadsheet__header--selected": selected,
+      className={classNames('Spreadsheet__header', {
+        'Spreadsheet__header--selected': selected,
       })}
       onClick={handleClick}
       tabIndex={0}
@@ -28,7 +28,7 @@ export default CornerIndicator;
 
 export const enhance = (
   CornerIndicatorComponent: Types.CornerIndicatorComponent
-): React.FC<Omit<Types.CornerIndicatorProps, "selected" | "onSelect">> => {
+): React.FC<Omit<Types.CornerIndicatorProps, 'selected' | 'onSelect'>> => {
   return function CornerIndicatorWrapper(props) {
     const dispatch = useDispatch();
     const selectEntireWorksheet = React.useCallback(

package/src/components/ExcelFile/ExcelFile/Excel/DataEditor.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
-import * as Types from "./types";
-import { moveCursorToEnd } from "./util";
+import * as React from 'react';
+import * as Types from './types';
+import { moveCursorToEnd } from './util';
 
 /** The default Spreadsheet DataEditor component */
 const DataEditor: React.FC<Types.DataEditorProps> = ({ onChange, cell }) => {
@@ -8,7 +8,7 @@ const DataEditor: React.FC<Types.DataEditorProps> = ({ onChange, cell }) => {
 
   const handleChange = React.useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
-      onChange({ ...cell, value: event.target.value,style:cell?.style});
+      onChange({ ...cell, value: event.target.value, style: cell?.style });
     },
     [onChange, cell]
   );
@@ -19,7 +19,7 @@ const DataEditor: React.FC<Types.DataEditorProps> = ({ onChange, cell }) => {
     }
   }, [inputRef]);
 
-  const value = cell?.value ?? "";
+  const value = cell?.value ?? '';
 
   return (
     <div className="Spreadsheet__data-editor">

package/src/components/ExcelFile/ExcelFile/Excel/DataViewer.tsx

@@ -1,10 +1,10 @@
-import * as React from "react";
-import classNames from "classnames";
-import * as Types from "./types";
-import { hasLineBreaker } from "./util";
+import * as React from 'react';
+import classNames from 'classnames';
+import * as Types from './types';
+import { hasLineBreaker } from './util';
 
-export const TRUE_TEXT = "TRUE";
-export const FALSE_TEXT = "FALSE";
+export const TRUE_TEXT = 'TRUE';
+export const FALSE_TEXT = 'FALSE';
 
 /** The default Spreadsheet DataViewer component */
 const DataViewer = <Cell extends Types.CellBase<Value>, Value>({
@@ -13,14 +13,14 @@ const DataViewer = <Cell extends Types.CellBase<Value>, Value>({
 }: Types.DataViewerProps<Cell>): React.ReactElement => {
   const value = getValue(cell, evaluatedCell);
 
-  return typeof value === "boolean" ? (
+  return typeof value === 'boolean' ? (
     <span className="Spreadsheet__data-viewer Spreadsheet__data-viewer--boolean">
       {convertBooleanToText(value)}
     </span>
   ) : (
     <span
-      className={classNames("Spreadsheet__data-viewer", {
-        "Spreadsheet__data-viewer--preserve-breaks": hasLineBreaker(value),
+      className={classNames('Spreadsheet__data-viewer', {
+        'Spreadsheet__data-viewer--preserve-breaks': hasLineBreaker(value),
       })}
     >
       {value}
@@ -35,7 +35,7 @@ function getValue(
   evaluatedCell: Types.CellBase | undefined
 ) {
   const baseValue = evaluatedCell?.value ?? cell?.value;
-  if (baseValue && typeof baseValue === "object") {
+  if (baseValue && typeof baseValue === 'object') {
     return baseValue.toString();
   }
   return baseValue;

package/src/components/ExcelFile/ExcelFile/Excel/FloatingRect.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
-import classnames from "classnames";
-import * as Types from "./types";
+import * as React from 'react';
+import classnames from 'classnames';
+import * as Types from './types';
 
 export type Props = {
   variant?: string;
@@ -18,10 +18,10 @@ const FloatingRect: React.FC<Props> = ({
   const { width, height, top, left } = dimensions || {};
   return (
     <div
-      className={classnames("Spreadsheet__floating-rect", {
+      className={classnames('Spreadsheet__floating-rect', {
         [`Spreadsheet__floating-rect--${variant}`]: variant,
-        "Spreadsheet__floating-rect--dragging": dragging,
-        "Spreadsheet__floating-rect--hidden": hidden,
+        'Spreadsheet__floating-rect--dragging': dragging,
+        'Spreadsheet__floating-rect--hidden': hidden,
       })}
       style={{ width, height, top, left }}
     />

package/src/components/ExcelFile/ExcelFile/Excel/HeaderRow.tsx

@@ -1,4 +1,4 @@
-import * as Types from "./types";
+import * as Types from './types';
 
 const HeaderRow: Types.HeaderRowComponent = (props) => <tr {...props} />;
 

package/src/components/ExcelFile/ExcelFile/Excel/Row.tsx

@@ -1,4 +1,4 @@
-import * as Types from "./types";
+import * as Types from './types';
 
 const Row: Types.RowComponent = (props) => <tr {...props} />;