@mindlogic-ai/logician-ui 2.0.0-alpha.0

package/src/components/Table/Td.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useRef } from 'react';
+import { Td as ChakraTd, useToken } from '@chakra-ui/react';
+
+import { getStickyStyles } from './Table.styles';
+import { TableCellProps } from './Table.types';
+import { useTableContext } from './TableContext';
+
+export const Td = ({
+  wrap,
+  isSticky = false,
+  stickyDirection = 'left',
+  stickyIndex = 0,
+  _first,
+  style,
+  className,
+  children,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}: TableCellProps & { wrap?: boolean }) => {
+  const cellRef = useRef<HTMLTableCellElement>(null);
+  const tableContext = useTableContext();
+
+  // Define all style variables ahead of time so they can be used constantly
+  const grayColor = useToken('colors', 'gray.300');
+  const paddingToken = useToken('space', '3'); // py={3} equivalent
+  const fontSizeToken = useToken('fontSizes', 'p');
+  const spacingToken = useToken('space', '4'); // spacing 4 for paddingInlineStart
+
+  // If not inside TableContext, render regular HTML td with same styles
+  if (!tableContext) {
+    // Extract only standard HTML props for the regular td element
+    const htmlProps = {
+      className,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      // Add other standard HTML props as needed
+    };
+
+    return (
+      <td
+        ref={cellRef}
+        style={{
+          border: 0,
+          borderTop: '1px solid',
+          borderTopColor: grayColor,
+          color: 'inherit',
+          fontSize: fontSizeToken,
+          paddingTop: paddingToken,
+          paddingBottom: paddingToken,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          paddingInlineStart: _first ? spacingToken : undefined,
+          ...(wrap
+            ? {
+                whiteSpace: 'normal',
+                wordWrap: 'break-word',
+                overflowWrap: 'break-word',
+              }
+            : {}),
+          ...style,
+        }}
+        {...htmlProps}
+      >
+        {children}
+      </td>
+    );
+  }
+
+  const {
+    registerStickyColumn,
+    getStickyOffset,
+    isLastStickyColumn,
+    ...scrollState
+  } = tableContext;
+
+  // Update width when element is mounted and dimensions change
+  useEffect(() => {
+    if (isSticky && cellRef.current) {
+      const width = cellRef.current.getBoundingClientRect().width;
+      registerStickyColumn(stickyDirection, stickyIndex, width);
+    }
+  }, [isSticky, registerStickyColumn, stickyDirection, stickyIndex]);
+
+  // Get the sticky offset based on the column's position
+  const stickyOffset = isSticky
+    ? getStickyOffset(stickyDirection, stickyIndex)
+    : 0;
+
+  // Check if this is the last sticky column on this side
+  const isLastSticky =
+    isSticky && isLastStickyColumn(stickyDirection, stickyIndex);
+
+  // Apply sticky styles with appropriate offset
+  const stickyStyles = getStickyStyles(
+    isSticky,
+    stickyDirection,
+    scrollState,
+    stickyOffset,
+    isLastSticky
+  );
+
+  return (
+    <ChakraTd
+      border={0}
+      borderTop="1px solid"
+      borderTopColor="gray.300"
+      color="inherit"
+      fontSize="p"
+      py={3}
+      overflow="hidden"
+      textOverflow="ellipsis"
+      ref={cellRef}
+      style={style}
+      _first={{
+        '&:not(:last-child)': {
+          paddingInlineStart: 4,
+        },
+        ..._first,
+      }}
+      {...(wrap
+        ? {
+            whiteSpace: 'normal',
+            wordWrap: 'break-word',
+            overflowWrap: 'break-word',
+          }
+        : {})}
+      {...stickyStyles}
+      {...rest}
+    >
+      {children}
+    </ChakraTd>
+  );
+};
+
+Td.displayName = 'Td';

package/src/components/Table/Th.tsx

@@ -0,0 +1,154 @@
+import { forwardRef, useCallback, useEffect, useRef } from 'react';
+import {
+  TableColumnHeaderProps,
+  Th as ChakraTh,
+  useToken,
+} from '@chakra-ui/react';
+
+import { getStickyStyles } from './Table.styles';
+import { TableCellProps } from './Table.types';
+import { useTableContext } from './TableContext';
+
+export const Th = forwardRef<
+  HTMLTableCellElement,
+  TableColumnHeaderProps & TableCellProps
+>(
+  (
+    {
+      isSticky = false,
+      stickyDirection = 'left',
+      stickyIndex = 0,
+      style,
+      className,
+      children,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      ...rest
+    },
+    forwardedRef
+  ) => {
+    const tableContext = useTableContext();
+    const measureNodeRef = useRef<HTMLTableCellElement | null>(null);
+    const fontSizeToken = useToken('fontSizes', 'subtitle');
+    const spacingToken = useToken('space', '4'); // spacing 4 for paddingInlineStart
+
+    // If not inside TableContext, render regular HTML th with same styles
+    if (!tableContext) {
+      // Extract only standard HTML props for the regular th element
+      const htmlProps = {
+        className,
+        onClick,
+        onMouseEnter,
+        onMouseLeave,
+        // Add other standard HTML props as needed
+      };
+
+      // Combine refs for the regular th element
+      const setRefsForRegularTh = useCallback(
+        (node: HTMLTableCellElement | null) => {
+          // Set internal ref
+          measureNodeRef.current = node;
+
+          // Set forwarded ref
+          if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+          } else if (forwardedRef) {
+            forwardedRef.current = node;
+          }
+        },
+        [forwardedRef]
+      );
+
+      return (
+        <th
+          ref={setRefsForRegularTh}
+          style={{
+            color: 'inherit',
+            fontWeight: 'inherit',
+            fontSize: fontSizeToken,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            paddingInlineStart: spacingToken,
+            ...style,
+          }}
+          {...htmlProps}
+        >
+          {children}
+        </th>
+      );
+    }
+
+    const {
+      registerStickyColumn,
+      getStickyOffset,
+      isLastStickyColumn,
+      ...scrollState
+    } = tableContext;
+
+    // Update width when element is mounted and dimensions change
+    useEffect(() => {
+      if (isSticky && measureNodeRef.current) {
+        const width = measureNodeRef.current.getBoundingClientRect().width;
+        registerStickyColumn(stickyDirection, stickyIndex, width);
+      }
+    }, [isSticky, registerStickyColumn, stickyDirection, stickyIndex]);
+
+    // Combine refs (forwarded ref and internal ref)
+    const setRefs = useCallback(
+      (node: HTMLTableCellElement | null) => {
+        // Set internal ref
+        measureNodeRef.current = node;
+
+        // Set forwarded ref
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef]
+    );
+
+    // Get the sticky offset based on the column's position
+    const stickyOffset = isSticky
+      ? getStickyOffset(stickyDirection, stickyIndex)
+      : 0;
+
+    // Check if this is the last sticky column on this side
+    const isLastSticky =
+      isSticky && isLastStickyColumn(stickyDirection, stickyIndex);
+
+    // Apply sticky styles with appropriate offset
+    const stickyStyles = getStickyStyles(
+      isSticky,
+      stickyDirection,
+      scrollState,
+      stickyOffset,
+      isLastSticky
+    );
+
+    return (
+      <ChakraTh
+        color="inherit"
+        fontWeight="inherit"
+        fontSize="subtitle"
+        overflow="hidden"
+        textOverflow="ellipsis"
+        ref={setRefs}
+        style={style}
+        _first={{
+          '&:not(:last-child)': {
+            paddingInlineStart: 4,
+          },
+        }}
+        {...stickyStyles}
+        {...rest}
+      >
+        {children}
+      </ChakraTh>
+    );
+  }
+);
+
+Th.displayName = 'Th';

package/src/components/Table/Thead.tsx

@@ -0,0 +1,5 @@
+import { TableHeadProps, Thead as ChakraThead } from '@chakra-ui/react';
+
+export const Thead = ({ ...rest }: TableHeadProps) => {
+  return <ChakraThead color="gray.800" fontWeight="medium" {...rest} />;
+};

package/src/components/Table/Tr.tsx

@@ -0,0 +1,5 @@
+import { TableRowProps, Tr as ChakraTr } from '@chakra-ui/react';
+
+export const Tr = ({ ...rest }: TableRowProps) => {
+  return <ChakraTr h={12} {...rest} />;
+};

package/src/components/Table/index.tsx

@@ -0,0 +1,8 @@
+export { ExpandingTr } from './ExpandingTr/ExpandingTr';
+export { Table } from './Table';
+export { TableContainer } from './TableContainer';
+export { Tbody } from './Tbody';
+export { Td } from './Td';
+export { Th } from './Th';
+export { Thead } from './Thead';
+export { Tr } from './Tr';

package/src/components/Tabs/Tab/Tab.styles.ts

@@ -0,0 +1,35 @@
+import * as CSS from 'csstype';
+
+import theme from '@/theme/index';
+
+// TODO: investigate why these TS issues are coming up
+export const verticalStyles = {
+  borderInlineStart: 'none',
+  position: 'relative' as CSS.Property.Position,
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  textAlign: 'left' as CSS.Property.TextAlign,
+  p: 4,
+  width: '100%',
+};
+
+export const horizontalSelectedStyles = {
+  color: theme.semanticTokens.colors.primary.main,
+  fontWeight: 'semibold',
+  position: 'relative',
+  _after: {
+    content: '""',
+    position: 'absolute',
+    top: 'calc(100% - 1px)',
+    left: 0,
+    width: '100%',
+    height: '2px',
+    background: theme.semanticTokens.colors.primary.main,
+  },
+};
+
+export const verticalSelectedStyles = {
+  backgroundColor: 'primary.light',
+  color: 'primary.dark',
+  fontWeight: 'bold',
+};

package/src/components/Tabs/Tab/Tab.tsx

@@ -0,0 +1,67 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+import { Tab as ChakraTab } from '@chakra-ui/react';
+
+import { useTabsContext } from '@/components/Tabs/TabsContext';
+
+import { TabProps } from '../Tabs.types';
+import {
+  horizontalSelectedStyles,
+  verticalSelectedStyles,
+  verticalStyles,
+} from './Tab.styles';
+
+// A global counter to assign unique IDs to tabs for identification
+let nextTabId = 0;
+
+export const Tab = ({ name, ...props }: TabProps) => {
+  const { orientation, registerTabName } = useTabsContext();
+  const tabRef = useRef<HTMLButtonElement>(null);
+  const [tabId] = useState(() => `tab-${nextTabId++}`);
+
+  // Record when this tab was mounted in the DOM
+  useLayoutEffect(() => {
+    // After mounting, find this tab's position
+    if (!name || !tabRef.current) {
+      console.warn('[Tab] Missing name or tabRef.current');
+      return;
+    }
+
+    // Use a timeout to ensure tabs are properly rendered
+    const timeoutId = setTimeout(() => {
+      try {
+        // Find all tab elements within the same tablist
+        const tabList = tabRef.current?.closest('[role="tablist"]');
+        if (!tabList) return;
+
+        const tabs = Array.from(tabList.querySelectorAll('[role="tab"]'));
+        const index = tabs.indexOf(tabRef.current!);
+
+        // Register this tab's name with the context
+        if (index !== -1) {
+          registerTabName(index, name);
+        }
+      } catch (error) {
+        console.error('[Tab] Error finding tab index:', error);
+      }
+    }, 50); // Short delay to ensure DOM is ready
+
+    return () => clearTimeout(timeoutId);
+  }, [name, registerTabName]);
+
+  return (
+    <ChakraTab
+      ref={tabRef}
+      id={tabId}
+      data-tab-name={name}
+      {...(orientation === 'vertical' && verticalStyles)}
+      color="gray.800"
+      py={3}
+      _selected={{
+        ...(orientation === 'vertical'
+          ? verticalSelectedStyles
+          : horizontalSelectedStyles),
+      }}
+      {...props}
+    />
+  );
+};

package/src/components/Tabs/Tab/index.ts

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

package/src/components/Tabs/TabList/TabList.styles.ts

@@ -0,0 +1,11 @@
+// Light mode styles only
+export const tabListStyles = {
+  // This is the divider line. Tab colors are set in the Tab component.
+  // TODO: move to palette
+  // color: '#ababab',
+};
+
+export const verticalStyles = {
+  borderInlineEnd: '1px solid',
+  borderInlineStart: 'none',
+};

package/src/components/Tabs/TabList/TabList.tsx

@@ -0,0 +1,19 @@
+import { TabList as ChakraTabList, TabListProps } from '@chakra-ui/react';
+
+import { useTabsContext } from '@/components/Tabs/TabsContext';
+
+import { tabListStyles, verticalStyles } from './TabList.styles';
+
+export const TabList = (props: TabListProps) => {
+  const { orientation } = useTabsContext();
+  return (
+    <ChakraTabList
+      width="100%"
+      borderBottom="1px solid"
+      borderColor="gray.100"
+      {...tabListStyles}
+      {...(orientation === 'vertical' && verticalStyles)}
+      {...props}
+    />
+  );
+};

package/src/components/Tabs/TabList/index.ts

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

package/src/components/Tabs/TabPanel.tsx

@@ -0,0 +1,5 @@
+import { TabPanel as ChakraTabPanel, TabPanelProps } from '@chakra-ui/react';
+
+export const TabPanel = (props: TabPanelProps) => {
+  return <ChakraTabPanel p={0} {...props} />;
+};

package/src/components/Tabs/TabPanels.tsx

@@ -0,0 +1,5 @@
+import { TabPanels as ChakraTabPanels, TabPanelsProps } from '@chakra-ui/react';
+
+export const TabPanels = (props: TabPanelsProps) => {
+  return <ChakraTabPanels p={0} {...props} />;
+};

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Tab } from '@/components/Tabs/Tab/Tab';
+import { TabList } from '@/components/Tabs/TabList';
+import { TabPanel } from '@/components/Tabs/TabPanel';
+import { TabPanels } from '@/components/Tabs/TabPanels';
+
+import { Tabs } from './Tabs';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Tabs',
+  component: Tabs,
+};
+
+export default meta;
+type Story = StoryFn<typeof Tabs>;
+
+const RenderTemplate = (props) => {
+  return (
+    <Tabs {...props}>
+      <TabList>
+        <Tab>Tab 1</Tab>
+        <Tab>Tab 2</Tab>
+        <Tab>Tab 3</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>Tab 1 content</TabPanel>
+        <TabPanel>Tab 2 content</TabPanel>
+        <TabPanel>Tab 3 content</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export const Basic: Story = {
+  render: RenderTemplate,
+};
+
+export const Vertical: Story = {
+  render: RenderTemplate,
+  args: {
+    orientation: 'vertical',
+  },
+};

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,65 @@
+import { Tabs as ChakraTabs } from '@chakra-ui/react';
+
+import { TabsProps } from './Tabs.types';
+import { TabsProvider, useTabsContext } from './TabsContext';
+
+export const Tabs = ({
+  orientation,
+  children,
+  urlParam,
+  index,
+  onChange,
+  ...rest
+}: TabsProps) => {
+  return (
+    <TabsProvider orientation={orientation} urlParam={urlParam}>
+      <TabsWithUrlSync
+        orientation={orientation}
+        index={index}
+        onChange={onChange}
+        {...rest}
+      >
+        {children}
+      </TabsWithUrlSync>
+    </TabsProvider>
+  );
+};
+
+/**
+ * Internal component to handle URL synchronization between tabs and the browser URL
+ */
+const TabsWithUrlSync = ({
+  children,
+  onChange,
+  index: externalIndex,
+  ...rest
+}: Omit<TabsProps, 'urlParam'>) => {
+  const { selectedIndex, setSelectedIndex } = useTabsContext();
+
+  // Use the context's index if no external index is provided
+  const actualIndex =
+    externalIndex !== undefined ? externalIndex : selectedIndex;
+
+  // Handle tab changes
+  const handleTabChange = (newIndex: number) => {
+    // Update the context state
+    setSelectedIndex(newIndex);
+
+    // If an external onChange handler is provided, call it
+    if (onChange) {
+      onChange(newIndex);
+    }
+  };
+
+  return (
+    <ChakraTabs
+      position="relative"
+      variant="unstyled"
+      index={actualIndex}
+      onChange={handleTabChange}
+      {...rest}
+    >
+      {children}
+    </ChakraTabs>
+  );
+};

package/src/components/Tabs/Tabs.types.ts

@@ -0,0 +1,19 @@
+import {
+  TabProps as ChakraTabProps,
+  TabsProps as ChakraTabsProps,
+} from '@chakra-ui/react';
+
+export type TabsProps = ChakraTabsProps & {
+  /**
+   * If provided, the selected tab will be synced with the provided url param
+   */
+  urlParam?: string;
+};
+
+export type TabProps = ChakraTabProps & {
+  /**
+   * The name of the tab
+   * @default `tab-${index}`
+   */
+  name?: string;
+};