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

package/src/components/SegmentedProgressBar/SegmentedProgressBar.stories.tsx

@@ -0,0 +1,228 @@
+import React from 'react';
+import { Box, Flex, Text, VStack } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { ProgressSegment, SegmentedProgressBar } from './';
+
+const meta: Meta<typeof SegmentedProgressBar> = {
+  title: 'Components/SegmentedProgressBar',
+  component: SegmentedProgressBar,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A segmented progress bar that displays multiple progress segments within a single container. Useful for showing different categories of progress like success/error counts.',
+      },
+    },
+  },
+  args: {
+    max: 100,
+    height: '12px',
+  },
+  argTypes: {
+    max: {
+      control: 'number',
+      description: 'Maximum value for the progress bar',
+    },
+    height: {
+      control: 'text',
+      description: 'Height of the progress bar',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryFn<typeof SegmentedProgressBar>;
+
+const Template: Story = (args) => (
+  <Box width="400px">
+    <SegmentedProgressBar {...args}>
+      <ProgressSegment value={30} filledTrackColor="primary.main" />
+      <ProgressSegment value={20} filledTrackColor="success.main" />
+    </SegmentedProgressBar>
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  max: 100,
+  height: '12px',
+};
+
+export const BasicUsage: Story = () => (
+  <VStack spacing={6} align="stretch" width="400px">
+    <Box>
+      <Text mb={2} fontWeight="semibold">
+        Basic Two-Segment Progress
+      </Text>
+      <SegmentedProgressBar max={100} height="12px">
+        <ProgressSegment value={60} filledTrackColor="primary.main" />
+        <ProgressSegment value={25} filledTrackColor="success.main" />
+      </SegmentedProgressBar>
+      <Flex justify="space-between" mt={1} fontSize="sm" color="gray.600">
+        <Text>Primary: 60</Text>
+        <Text>Success: 25</Text>
+        <Text>Remaining: 15</Text>
+      </Flex>
+    </Box>
+  </VStack>
+);
+
+export const MultipleSegments: Story = () => (
+  <VStack spacing={6} align="stretch" width="400px">
+    <Box>
+      <Text mb={2} fontWeight="semibold">
+        Multiple Segments with Different Colors
+      </Text>
+      <SegmentedProgressBar max={200} height="16px">
+        <ProgressSegment value={80} filledTrackColor="primary.main" />
+        <ProgressSegment value={45} filledTrackColor="success.main" />
+        <ProgressSegment value={30} filledTrackColor="warning.main" />
+        <ProgressSegment value={25} filledTrackColor="danger.main" />
+      </SegmentedProgressBar>
+      <Flex justify="space-between" mt={2} fontSize="sm" color="gray.600">
+        <Text>Primary: 80</Text>
+        <Text>Success: 45</Text>
+        <Text>Warning: 30</Text>
+        <Text>Error: 25</Text>
+      </Flex>
+    </Box>
+  </VStack>
+);
+
+export const WithStripes: Story = () => (
+  <VStack spacing={6} align="stretch" width="400px">
+    <Box>
+      <Text mb={2} fontWeight="semibold">
+        Progress Segments with Stripes
+      </Text>
+      <SegmentedProgressBar max={100} height="16px">
+        <ProgressSegment value={45} filledTrackColor="primary.main" hasStripe />
+        <ProgressSegment value={30} filledTrackColor="success.main" hasStripe />
+        <ProgressSegment value={15} filledTrackColor="danger.main" hasStripe />
+      </SegmentedProgressBar>
+      <Flex justify="space-between" mt={2} fontSize="sm" color="gray.600">
+        <Text>Completed: 45</Text>
+        <Text>In Progress: 30</Text>
+        <Text>Failed: 15</Text>
+      </Flex>
+    </Box>
+  </VStack>
+);
+
+export const DifferentSizes: Story = () => (
+  <VStack spacing={6} align="stretch" width="400px">
+    <Box>
+      <Text mb={2} fontWeight="semibold">
+        Small Progress Bar (8px)
+      </Text>
+      <SegmentedProgressBar max={100} height="8px">
+        <ProgressSegment value={70} filledTrackColor="primary.main" />
+        <ProgressSegment value={20} filledTrackColor="success.main" />
+      </SegmentedProgressBar>
+    </Box>
+
+    <Box>
+      <Text mb={2} fontWeight="semibold">
+        Medium Progress Bar (12px)
+      </Text>
+      <SegmentedProgressBar max={100} height="12px">
+        <ProgressSegment value={70} filledTrackColor="primary.main" />
+        <ProgressSegment value={20} filledTrackColor="success.main" />
+      </SegmentedProgressBar>
+    </Box>
+
+    <Box>
+      <Text mb={2} fontWeight="semibold">
+        Large Progress Bar (20px)
+      </Text>
+      <SegmentedProgressBar max={100} height="20px">
+        <ProgressSegment value={70} filledTrackColor="primary.main" />
+        <ProgressSegment value={20} filledTrackColor="success.main" />
+      </SegmentedProgressBar>
+    </Box>
+  </VStack>
+);
+
+export const RealWorldExample: Story = () => (
+  <VStack spacing={6} align="stretch" width="500px">
+    <Box>
+      <Text mb={2} fontWeight="semibold">
+        Member Invitation Progress
+      </Text>
+      <Text mb={4} fontSize="sm" color="gray.600">
+        Inviting 1,500 members in batches of 100
+      </Text>
+
+      <SegmentedProgressBar max={1500} height="14px">
+        <ProgressSegment
+          value={1200}
+          filledTrackColor="success.main"
+          hasStripe
+        />
+        <ProgressSegment value={150} filledTrackColor="danger.main" hasStripe />
+      </SegmentedProgressBar>
+
+      <Flex justify="space-between" mt={2} fontSize="sm" color="gray.600">
+        <Text color="success.600">✓ 1,200 successful</Text>
+        <Text color="danger.600">✗ 150 failed</Text>
+        <Text>90% complete</Text>
+      </Flex>
+    </Box>
+  </VStack>
+);
+
+export const EmptyState: Story = () => (
+  <VStack spacing={6} align="stretch" width="400px">
+    <Box>
+      <Text mb={2} fontWeight="semibold">
+        Empty Progress Bar
+      </Text>
+      <SegmentedProgressBar max={100} height="12px">
+        {/* No segments - shows empty state */}
+      </SegmentedProgressBar>
+      <Text mt={2} fontSize="sm" color="gray.600">
+        No progress yet
+      </Text>
+    </Box>
+  </VStack>
+);
+
+export const SingleSegment: Story = () => (
+  <VStack spacing={6} align="stretch" width="400px">
+    <Box>
+      <Text mb={2} fontWeight="semibold">
+        Single Segment Progress
+      </Text>
+      <SegmentedProgressBar max={100} height="12px">
+        <ProgressSegment value={75} filledTrackColor="primary.main" />
+      </SegmentedProgressBar>
+      <Text mt={2} fontSize="sm" color="gray.600">
+        75% complete
+      </Text>
+    </Box>
+  </VStack>
+);
+
+export const CustomColors: Story = () => (
+  <VStack spacing={6} align="stretch" width="400px">
+    <Box>
+      <Text mb={2} fontWeight="semibold">
+        Custom Color Segments
+      </Text>
+      <SegmentedProgressBar max={100} height="16px">
+        <ProgressSegment value={25} filledTrackColor="#FF6B6B" />
+        <ProgressSegment value={25} filledTrackColor="#4ECDC4" />
+        <ProgressSegment value={25} filledTrackColor="#45B7D1" />
+        <ProgressSegment value={20} filledTrackColor="#96CEB4" />
+      </SegmentedProgressBar>
+      <Flex justify="space-between" mt={2} fontSize="sm" color="gray.600">
+        <Text>Red: 25</Text>
+        <Text>Teal: 25</Text>
+        <Text>Blue: 25</Text>
+        <Text>Green: 20</Text>
+      </Flex>
+    </Box>
+  </VStack>
+);

package/src/components/SegmentedProgressBar/SegmentedProgressBar.tsx

@@ -0,0 +1,25 @@
+import { Box } from '@chakra-ui/react';
+
+import { SegmentedProgressBarProps } from './SegmentedProgressBar.types';
+import { SegmentedProgressBarProvider } from './SegmentedProgressBarContext';
+
+export const SegmentedProgressBar = ({
+  max,
+  ...rest
+}: SegmentedProgressBarProps) => {
+  return (
+    <SegmentedProgressBarProvider max={max}>
+      <Box
+        position="relative"
+        flex={1}
+        display="flex"
+        bgColor="gray.200"
+        borderRadius="full"
+        w="100%"
+        h="16px"
+        overflow="hidden"
+        {...rest}
+      />
+    </SegmentedProgressBarProvider>
+  );
+};

package/src/components/SegmentedProgressBar/SegmentedProgressBar.types.ts

@@ -0,0 +1,11 @@
+import { BoxProps } from '@chakra-ui/react';
+
+import { ProgressBarProps } from '../ProgressBar/ProgressBar.types';
+
+export type SegmentedProgressBarProps = BoxProps & {
+  max: number;
+};
+
+export type ProgressSegmentProps = ProgressBarProps & {
+  value: number;
+};

package/src/components/SegmentedProgressBar/SegmentedProgressBarContext.tsx

@@ -0,0 +1,24 @@
+import React, { createContext, ReactNode, useContext } from 'react';
+
+// TODO: typescript
+const SegmentedProgressBarContext = createContext<any>({});
+export const useSegmentedProgressBarContext = () =>
+  useContext(SegmentedProgressBarContext);
+
+interface SegmentedProgressBarProviderProps {
+  children: ReactNode;
+  max: number;
+}
+
+export function SegmentedProgressBarProvider({
+  children,
+  max,
+}: SegmentedProgressBarProviderProps) {
+  return (
+    <SegmentedProgressBarContext.Provider value={{ max }}>
+      {children}
+    </SegmentedProgressBarContext.Provider>
+  );
+}
+
+export default SegmentedProgressBarContext;

package/src/components/SegmentedProgressBar/index.ts

@@ -0,0 +1,3 @@
+export { ProgressSegment } from './ProgressSegment';
+export { SegmentedProgressBar } from './SegmentedProgressBar';
+export type { ProgressSegmentProps } from './SegmentedProgressBar.types';

package/src/components/Select/MenuList/MenuList.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useRef } from 'react';
+import { components, GroupBase } from 'react-select';
+
+import { MenuListProps } from './MenuList.types';
+
+const { MenuList: DefaultMenuList } = components;
+
+// Utility to merge refs
+const mergeRefs = <T extends HTMLElement>(
+  refs: Array<React.Ref<T> | null | undefined>
+) => {
+  return (value: T) => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref && typeof ref === 'object') {
+        (ref as React.MutableRefObject<T | null>).current = value;
+      }
+    });
+  };
+};
+
+// Regular MenuList with explicit scroll handling
+export const MenuList = <
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>({
+  onMenuScrollToBottom,
+  innerRef,
+  ...props
+}: MenuListProps<Option, IsMulti, Group>) => {
+  const menuListRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!menuListRef.current || !onMenuScrollToBottom) return;
+
+    let lastScrollTop = 0;
+
+    const handleScroll = (event: WheelEvent | TouchEvent) => {
+      const element = menuListRef.current;
+      if (!element) return;
+
+      // Check if scrolled downward
+      const scrollingDown = element.scrollTop > lastScrollTop;
+
+      // Check if scrolled to bottom (with small buffer for browser precision)
+      const scrolledToBottom =
+        Math.abs(
+          element.scrollHeight - element.scrollTop - element.clientHeight
+        ) < 2;
+
+      // Only trigger if scrolling down AND reached the bottom
+      if (scrollingDown && scrolledToBottom) {
+        onMenuScrollToBottom(event);
+      }
+
+      // Update last scroll position
+      lastScrollTop = element.scrollTop;
+    };
+
+    const menuListElement = menuListRef.current;
+    menuListElement.addEventListener('scroll', handleScroll as EventListener);
+    menuListElement.addEventListener(
+      'touchmove',
+      handleScroll as EventListener
+    );
+
+    return () => {
+      menuListElement.removeEventListener(
+        'scroll',
+        handleScroll as EventListener
+      );
+      menuListElement.removeEventListener(
+        'touchmove',
+        handleScroll as EventListener
+      );
+    };
+  }, [onMenuScrollToBottom]);
+
+  // Apply both refs instead of using OR logic
+  return (
+    <DefaultMenuList {...props} innerRef={mergeRefs([innerRef, menuListRef])} />
+  );
+};

package/src/components/Select/MenuList/MenuList.types.ts

@@ -0,0 +1,21 @@
+import {
+  GroupBase,
+  MenuListProps as ReactSelectMenuListProps,
+} from 'react-select';
+
+export interface MenuListProps<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+> extends ReactSelectMenuListProps<Option, IsMulti, Group> {
+  onMenuScrollToBottom?: (event: WheelEvent | TouchEvent) => void;
+}
+
+export interface VirtualizedMenuListProps<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+> extends Omit<MenuListProps<Option, IsMulti, Group>, 'maxHeight'> {
+  optionHeight?: number;
+  maxHeight?: number;
+}

package/src/components/Select/MenuList/VirtualizedMenuList.tsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useRef } from 'react';
+import { GroupBase } from 'react-select';
+import { useTheme } from '@chakra-ui/react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+
+import { optionStyles } from '../Select.styles';
+import { MenuList } from './MenuList';
+import { VirtualizedMenuListProps } from './MenuList.types';
+import { useVirtualizedMenuListState } from './VirtualizedMenuListContext';
+// Custom MenuList component that uses @tanstack/react-virtual when virtualization is enabled
+export const VirtualizedMenuList = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+>({
+  children,
+  maxHeight = 35 * 4,
+  optionHeight = 35,
+  ...props
+}: VirtualizedMenuListProps<Option, IsMulti, Group>) => {
+  // Get the number of children (options) to render
+  const childrenArray = React.Children.toArray(children ?? []);
+  const childrenCount = childrenArray.length;
+  const menuListRef = useRef(null);
+  const theme = useTheme();
+  const { isInitialRender, previousChildrenCount } =
+    useVirtualizedMenuListState();
+
+  // Set up virtualizer
+  const virtualizer = useVirtualizer({
+    count: childrenCount,
+    getScrollElement: () => menuListRef.current,
+    estimateSize: () => optionHeight,
+    overscan: 5,
+    getItemKey: (index) => {
+      const child = childrenArray[index];
+      // @ts-expect-error - Not all ReactNode types have key property
+      return child?.key || `item-${index}`;
+    }, // Use stable keys
+    measureElement: (_, entry, instance) => {
+      if (entry) {
+        instance.measure();
+      }
+      return 0;
+    },
+  });
+
+  // Make sure the menuList takes the full height available to it
+  // We need to ensure react-select's menuList is scrollable
+  useEffect(() => {
+    if (menuListRef.current) {
+      // Important: react-select MenuList needs overflow:auto to scroll
+      (menuListRef.current as HTMLElement).style.overflowY = 'auto';
+    }
+  }, [menuListRef.current]);
+
+  // When items change, tell the virtualizer to recalculate
+  useEffect(() => {
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+      previousChildrenCount.current = childrenCount;
+      return;
+    }
+    const itemsWereAdded = childrenCount > previousChildrenCount.current;
+    if (itemsWereAdded) {
+      // This triggers recalculation while preserving scroll position
+      virtualizer.measure();
+      virtualizer.scrollToIndex(previousChildrenCount.current - 1, {
+        align: 'end',
+        behavior: 'auto',
+      });
+      setTimeout(() => {
+        previousChildrenCount.current = childrenCount;
+      }, 100);
+    }
+  }, [childrenArray.length, virtualizer]);
+
+  // Default option styles with fallback values
+  const baseOptionStyle = optionStyles({
+    isDisabled: false,
+    isFocused: false,
+    isSelected: false,
+  });
+
+  return (
+    <MenuList
+      {...props}
+      innerRef={menuListRef}
+      maxHeight={maxHeight}
+      // Override the style here to ensure scrolling works
+      innerProps={{
+        ...props.innerProps,
+        style: {
+          ...props.innerProps?.style,
+          padding: 0,
+          height: Math.min(childrenCount * optionHeight, maxHeight),
+          maxHeight: Math.min(childrenCount * optionHeight, maxHeight),
+          overflow: 'auto',
+        },
+      }}
+    >
+      <div
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: '100%',
+          position: 'relative',
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualRow) => (
+          <div
+            key={virtualRow.index}
+            data-index={virtualRow.index}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: `${virtualRow.size}px`,
+              transform: `translateY(${virtualRow.start}px)`,
+              boxSizing: 'border-box',
+              // Apply the base styles from optionStyles
+              cursor: baseOptionStyle.cursor,
+              borderRadius: baseOptionStyle.borderRadius,
+              // Add some necessary styles for proper display
+              padding: `${theme.spacing[2]} ${theme.spacing[4]}`,
+              userSelect: 'none',
+              WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+              display: 'block',
+              lineHeight: 2,
+              // Don't apply background or text colors here as they're handled by react-select
+              // based on interaction state (focus, hover, selected)
+            }}
+          >
+            {childrenArray[virtualRow.index]}
+          </div>
+        ))}
+      </div>
+    </MenuList>
+  );
+};

package/src/components/Select/MenuList/VirtualizedMenuListContext.tsx

@@ -0,0 +1,35 @@
+import { createContext, MutableRefObject, useContext, useRef } from 'react';
+
+// Create a context for each VirtualizedMenuList instance
+const VirtualizedMenuListStateContext = createContext<{
+  isInitialRender: MutableRefObject<boolean>;
+  previousChildrenCount: MutableRefObject<number>;
+} | null>(null);
+
+export const useVirtualizedMenuListState = () => {
+  const context = useContext(VirtualizedMenuListStateContext);
+  if (!context) {
+    throw new Error(
+      'useVirtualizedMenuListState must be used within a VirtualizedMenuListProvider'
+    );
+  }
+  return context;
+};
+
+// Provider component that creates isolated state for each instance
+export const VirtualizedMenuListProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const isInitialRender = useRef(true);
+  const previousChildrenCount = useRef(0);
+
+  return (
+    <VirtualizedMenuListStateContext.Provider
+      value={{ isInitialRender, previousChildrenCount }}
+    >
+      {children}
+    </VirtualizedMenuListStateContext.Provider>
+  );
+};

package/src/components/Select/MenuList/index.ts

@@ -0,0 +1,3 @@
+export { MenuList } from './MenuList';
+export type { VirtualizedMenuListProps } from './MenuList.types';
+export { VirtualizedMenuList } from './VirtualizedMenuList';

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Select } from '.';
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
+  component: Select,
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+      { label: 'Disabled', value: 'option4', isDisabled: true },
+    ],
+    defaultValue: { label: 'Option 1', value: 'option1' },
+  },
+  argTypes: {
+    isMulti: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof Select>;
+
+export const Basic: Story = (args) => <Select {...args} />;
+
+export const Multiselect: Story = (args) => <Select {...args} isMulti={true} />;
+export const Combobox: Story = (args) => (
+  <Select {...args} isMulti={true} isSearchable={true} />
+);
+export const OnScrollToBottom: Story = (args) => (
+  <Select
+    {...args}
+    options={Array.from({ length: 50 }, (_, i) => ({
+      label: `Option ${i + 1}`,
+      value: `option${i + 1}`,
+    }))}
+    onMenuScrollToBottom={() => {
+      console.log('scrolled to bottom');
+    }}
+  />
+);
+
+export const OnScrollToBottomNewItems: Story = (args) => {
+  const [options, setOptions] = React.useState(
+    Array.from({ length: 500 }, (_, i) => ({
+      label: `Option ${i + 1}`,
+      value: `option${i + 1}`,
+    }))
+  );
+  return (
+    <Select
+      {...args}
+      options={options}
+      isMulti={true}
+      isSearchable={true}
+      onMenuScrollToBottom={() => {
+        console.log('scrolled to bottom');
+        setOptions((prev) => [
+          ...prev,
+          ...Array.from({ length: 500 }, (_, i) => ({
+            label: `Option ${prev.length + i + 1}`,
+            value: `option${prev.length + i + 1}`,
+          })),
+        ]);
+      }}
+    />
+  );
+};