fix: decision table size (#16)

* fix: decision table size

* fix styles and table row memoization bug

* bump package

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gorules/jdm-editor",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "",
   "author": "GoRules <hi@gorules.io> (https://gorules.io)",
   "homepage": "https://github.com/gorules/jdm-editor",
@@ -53,6 +53,7 @@
     "react-json-tree": "^0.18.0",
     "reactflow": "11.8.3",
     "slugify": "1.6.6",
+    "ts-pattern": "^5.0.6",
     "use-debounce": "^9.0.4",
     "uuid": "9.0.0",
     "zustand": "^4.4.1"

src/components/decision-table/dt.scss

@@ -13,6 +13,8 @@
     height: 1px;
 
     .cell-wrapper {
+      display: flex;
+      align-items: flex-start;
       width: 100%;
       height: 100%;
     }
@@ -33,6 +35,10 @@
         position: relative;
         font-weight: normal;
 
+        &[data-self="output"], &[data-parent="output"], &[data-self="description"] {
+          background: var(--grl-decision-table-output);
+        }
+
         .text-wrapper {
           overflow: hidden;
           .span-overflow {
@@ -60,6 +66,10 @@
           background-color: var(--grl-color-primary-bg);
         }
 
+        &.selected {
+          background-color: var(--grl-decision-table-selected-row);
+        }
+
         &.disabled {
           background-color: var(--grl-color-bg-container-disabled);
           textarea {
@@ -158,7 +168,7 @@
     border: 0;
     width: 100%;
     background-color: transparent;
-    padding: 0.5rem 0.75rem;
+    padding: 9px 0.75rem;
     font-size: 14px;
 
     &:focus {

src/components/decision-table/table/table-head-row.tsx

@@ -2,20 +2,37 @@ import type { HeaderGroup } from '@tanstack/react-table';
 import { flexRender } from '@tanstack/react-table';
 import clsx from 'clsx';
 import React from 'react';
+import { match } from 'ts-pattern';
 
 export const TableHeadRow: React.FC<{ headerGroup: HeaderGroup<any> }> = ({ headerGroup }) => (
   <tr key={headerGroup.id}>
     <th colSpan={1} style={{ width: 72 }} />
     {headerGroup.headers.map((header) => {
+      const context = header.getContext();
+      const parent = context.header.column.parent?.id;
+
+      const parentKind = match(parent)
+        .with('inputs', () => 'input')
+        .with('outputs', () => 'output')
+        .otherwise(() => undefined);
+
+      const selfKind = match(context.column.id)
+        .with('inputs', () => 'input')
+        .with('outputs', () => 'output')
+        .with('_description', () => 'description')
+        .otherwise(() => undefined);
+
       return (
         <th
           key={header.id}
           colSpan={header.colSpan}
+          data-self={selfKind}
+          data-parent={parentKind}
           style={{
             width: header.getSize(),
           }}
         >
-          {!header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext())}
+          {!header.isPlaceholder && flexRender(header.column.columnDef.header, context)}
           {header.column.getCanResize() && (
             <div
               className={clsx('resizer', header.column.getIsResizing() && 'isResizing')}

src/components/decision-table/table/table-row.tsx

@@ -8,7 +8,7 @@ import { shallow } from 'zustand/shallow';
 
 import { useDecisionTableStore } from '../context/dt-store.context';
 
-const InnerTableRow: React.FC<{
+export const TableRow: React.FC<{
   index: number;
   row: Row<Record<string, string>>;
   reorderRow: (draggedRowIndex: number, targetRowIndex: number) => void;
@@ -82,5 +82,3 @@ const InnerTableRow: React.FC<{
     </tr>
   );
 };
-
-export const TableRow = React.memo(InnerTableRow);

src/theme.tsx

@@ -19,7 +19,7 @@ export type JdmConfigProviderProps = {
 };
 
 export const JdmConfigProvider: React.FC<JdmConfigProviderProps> = ({
-  theme: { mode, ...theme } = {},
+  theme: { mode = 'light', ...theme } = {},
   prefixCls,
   children,
 }) => {
@@ -35,26 +35,26 @@ export const JdmConfigProvider: React.FC<JdmConfigProviderProps> = ({
 
   return (
     <ConfigProvider prefixCls={prefixCls} theme={{ ...theme, algorithm, token: { mode } }}>
-      <GlobalCssVariables />
+      <GlobalCssVariables mode={mode} />
       {children}
     </ConfigProvider>
   );
 };
 
-const GlobalCssVariables = () => {
+const GlobalCssVariables: React.FC<{ mode: 'light' | 'dark' }> = ({ mode }) => {
   const { token } = theme.useToken();
 
-  console.log(token);
-
   const exposedTokens = useMemo(
     () => ({
       '--grl-color-border': token.colorBorder,
       '--grl-color-primary': token.colorPrimary,
       '--grl-color-primary-bg': token.colorPrimaryBg,
+      '--grl-color-primary-bg-hover': token.colorPrimaryBgHover,
       '--grl-color-primary-border': token.colorPrimaryBorder,
       '--grl-color-primary-border-hover': token.colorPrimaryBorderHover,
       '--grl-color-primary-text-hover': token.colorPrimaryTextHover,
       '--grl-color-bg-layout': token.colorBgLayout,
+      '--grl-color-bg-mask': token.colorBgMask,
       '--grl-color-bg-elevated': token.colorBgElevated,
       '--grl-color-bg-container': token.colorBgContainer,
       '--grl-color-bg-container-disabled': token.colorBgContainerDisabled,
@@ -73,8 +73,11 @@ const GlobalCssVariables = () => {
       '--grl-font-family': token.fontFamily,
       '--grl-line-height': token.lineHeight,
       '--grl-border-radius': `${token.borderRadius}px`,
+
+      '--grl-decision-table-output': mode === 'light' ? '#eaeaea' : '#091422',
+      '--grl-decision-table-selected-row': mode === 'light' ? '#f4faff' : '#121720',
     }),
-    [token],
+    [token, mode],
   );
 
   const cssBlock = Object.entries(exposedTokens)