first commit

common/resources/client/ui/tables/style/use-table-cell-style.ts

@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+import {useContext} from 'react';
+import {TableContext} from '@common/ui/tables/table-context';
+
+interface Props {
+  index: number;
+  isHeader: boolean;
+}
+export function useTableCellStyle({index, isHeader}: Props) {
+  const {
+    columns,
+    cellHeight = 'h-46',
+    headerCellHeight = 'h-46',
+  } = useContext(TableContext);
+  const column = columns[index];
+
+  const userPadding = column?.padding;
+
+  let justify = 'justify-start';
+  if (column?.align === 'center') {
+    justify = 'justify-center';
+  } else if (column?.align === 'end') {
+    justify = 'justify-end';
+  }
+
+  return clsx(
+    'flex items-center overflow-hidden whitespace-nowrap overflow-ellipsis outline-none focus-visible:outline focus-visible:outline-offset-2',
+    isHeader ? headerCellHeight : cellHeight,
+    column?.width ?? 'flex-1',
+    column?.maxWidth,
+    column?.minWidth,
+    justify,
+    userPadding,
+    column?.className
+  );
+}

common/resources/client/ui/tables/style/use-table-row-style.ts

@@ -0,0 +1,37 @@
+import clsx from 'clsx';
+import {useContext} from 'react';
+import {TableContext} from '@common/ui/tables/table-context';
+import {useIsDarkMode} from '@common/ui/themes/use-is-dark-mode';
+import {useIsMobileMediaQuery} from '@common/utils/hooks/is-mobile-media-query';
+
+interface Props {
+  index: number;
+  isSelected: boolean;
+  isHeader?: boolean;
+}
+export function useTableRowStyle({index, isSelected, isHeader}: Props) {
+  const isDarkMode = useIsDarkMode();
+  const isMobile = useIsMobileMediaQuery();
+  const {hideBorder, enableSelection, collapseOnMobile, onAction} =
+    useContext(TableContext);
+  const isFirst = index === 0;
+  return clsx(
+    'flex gap-x-16 break-inside-avoid outline-none border border-transparent',
+    onAction && 'cursor-pointer',
+    isMobile && collapseOnMobile && hideBorder
+      ? 'mb-8 pl-8 pr-0 rounded'
+      : 'px-16',
+    !hideBorder && 'border-b-divider',
+    !hideBorder && isFirst && 'border-t-divider',
+    isSelected &&
+      !isDarkMode &&
+      'bg-primary/selected hover:bg-primary/focus focus-visible:bg-primary/focus',
+    isSelected &&
+      isDarkMode &&
+      'bg-selected hover:bg-focus focus-visible:bg-focus',
+    !isSelected &&
+      !isHeader &&
+      (enableSelection || onAction) &&
+      'focus-visible:bg-focus hover:bg-hover'
+  );
+}