feat(grid): rename layout to position and add styling interface for grid items

Author: KatoakDR

electron/renderer/components/grid/grid-item.tsx

@@ -24,7 +24,7 @@ import { memo, useCallback, useMemo, useRef } from 'react';
 import type {
   GridItemBoundary,
   GridItemInfo,
-  GridItemLayout,
+  GridItemPosition,
 } from '../../types/grid.types.js';
 
 export interface GridItemProps {
@@ -36,7 +36,7 @@ export interface GridItemProps {
    * The positional layout for the grid item.
    * If not specified then a default location will be used.
    */
-  layout?: GridItemLayout;
+  position?: GridItemPosition;
   /**
    * The unique identifier for the grid item.
    */
@@ -74,7 +74,7 @@ export interface GridItemProps {
   children?: ReactNode;
 }
 
-const DEFAULT_GRID_ITEM_LAYOUT: GridItemLayout = {
+const DEFAULT_GRID_ITEM_POSITION: GridItemPosition = {
   x: 0,
   y: 0,
   width: 500,
@@ -84,16 +84,17 @@ const DEFAULT_GRID_ITEM_LAYOUT: GridItemLayout = {
 export const GridItem: React.FC<GridItemProps> = memo(
   (props: GridItemProps): ReactNode => {
     const { itemId, itemTitle, isFocused = false, children } = props;
-    const { boundary, layout = DEFAULT_GRID_ITEM_LAYOUT } = props;
+    const { boundary, position = DEFAULT_GRID_ITEM_POSITION } = props;
     const { onFocus, onClose, onMoveResize } = props;
 
     const { euiTheme } = useEuiTheme();
 
     // Set default position and size for the grid item.
     // Like `useState`, we can provide the default value, but as a function.
-    const [{ x, y, width, height }, sizeApi] = useSpring<GridItemLayout>(() => {
-      return layout;
-    }, [layout]);
+    const [{ x, y, width, height }, sizeApi] =
+      useSpring<GridItemPosition>(() => {
+        return position;
+      }, [position]);
 
     const dragHandleRef = useRef<HTMLDivElement>(null);
     const resizeHandleRef = useRef<HTMLDivElement>(null);
@@ -103,7 +104,7 @@ export const GridItem: React.FC<GridItemProps> = memo(
         itemId,
         itemTitle,
         isFocused,
-        layout: {
+        position: {
           x: x.get(),
           y: y.get(),
           width: width.get(),

electron/renderer/components/grid/grid.tsx

@@ -55,10 +55,10 @@ export const Grid: React.FC<GridProps> = (props: GridProps): ReactNode => {
       logger.debug('moved item', { item });
       publish('layout:item:moved', {
         itemId: item.itemId,
-        x: item.layout.x,
-        y: item.layout.y,
-        width: item.layout.width,
-        height: item.layout.height,
+        x: item.position.x,
+        y: item.position.y,
+        width: item.position.width,
+        height: item.position.height,
       });
     },
     [logger, publish]
@@ -72,7 +72,7 @@ export const Grid: React.FC<GridProps> = (props: GridProps): ReactNode => {
           itemId={contentItem.itemId}
           itemTitle={contentItem.itemTitle}
           isFocused={contentItem.itemId === focusedItemId}
-          layout={contentItem.layout}
+          position={contentItem.position}
           boundary={boundary}
           onFocus={onItemFocus}
           onClose={onItemClose}

electron/renderer/types/grid.types.ts

@@ -15,7 +15,7 @@ export interface GridItemInfo {
   itemId: string;
   itemTitle: string;
   isFocused: boolean;
-  layout: GridItemLayout;
+  position: GridItemPosition;
 }
 
 export interface GridItemConfig {
@@ -36,7 +36,11 @@ export interface GridItemConfig {
   /**
    * The initial position for the grid item.
    */
-  layout: GridItemLayout;
+  position: GridItemPosition;
+  /**
+   * The styling for the grid item.
+   */
+  style: GridItemStyle;
   /**
    * When this item is not visible, redirect its content to another item.
    * If that item is also not visible, then it continues to be redirected
@@ -62,7 +66,7 @@ export interface GridItemBoundary {
 /**
  * The positional layout for the grid item.
  */
-export interface GridItemLayout {
+export interface GridItemPosition {
   /**
    * The x coordinate for the grid item.
    * The leftmost edge of the grid item.
@@ -86,3 +90,31 @@ export interface GridItemLayout {
    */
   height: number;
 }
+
+/**
+ * The font styling for the grid item.
+ */
+export interface GridItemStyle {
+  /**
+   * The font family to use for the text.
+   * For example, "Verdana" or "Courier New".
+   */
+  textFont: string;
+  /**
+   * The font size to use for the text, in pixels.
+   * For example, 12.
+   */
+  textSize: number;
+  /**
+   * The color name or hex code to use for the text.
+   * For example, "red" or "#FF0000".
+   * Though any valid CSS color value will work.
+   */
+  foregroundColor: string;
+  /**
+   * The color name or hex code to use for the background.
+   * For example, "blue" or "#0000FF".
+   * Though any valid CSS color value will work.
+   */
+  backgroundColor: string;
+}