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

package/src/components/Masonry/Masonry.stories.tsx

@@ -0,0 +1,288 @@
+import React from 'react';
+import { Box, SimpleGrid, Text, useBreakpointValue } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Masonry } from './Masonry';
+
+const meta: Meta<typeof Masonry> = {
+  title: 'Components/Masonry',
+  component: Masonry,
+  args: {
+    numCols: 3,
+    gap: 4,
+    horizontalArrangement: false,
+  },
+  argTypes: {
+    numCols: {
+      control: 'number',
+      description: 'Number of columns in the masonry layout',
+      defaultValue: 3,
+    },
+    gap: {
+      control: 'number',
+      description: 'Gap between items',
+      defaultValue: 4,
+    },
+    horizontalArrangement: {
+      control: 'boolean',
+      description:
+        'Whether to arrange items horizontally (true) or balance column heights (false)',
+      defaultValue: false,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A responsive masonry layout component that arranges items in optimal position based on available vertical space.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof Masonry>;
+
+// Helper to generate items with varying heights
+const generateItems = (count: number) => {
+  return Array.from({ length: count }).map((_, index) => ({
+    id: index,
+    height: 100 + Math.floor(Math.random() * 200), // Random heights between 100-300px
+    color: index % 2 === 0 ? 'blue.50' : 'purple.50',
+    title: `Item ${index + 1}`,
+  }));
+};
+
+// Basic usage example
+export const Basic: Story = (args) => {
+  const items = generateItems(12);
+
+  return (
+    <Masonry {...args}>
+      {items.map((item) => (
+        <Box
+          key={item.id}
+          bg={item.color}
+          height={`${item.height}px`}
+          p={4}
+          borderRadius="md"
+          shadow="sm"
+        >
+          <Text fontWeight="bold">{item.title}</Text>
+          <Text fontSize="sm">Height: {item.height}px</Text>
+        </Box>
+      ))}
+    </Masonry>
+  );
+};
+
+// Example with realistic content
+export const WithRealContent: Story = (args) => {
+  const bgColor = 'gray.50'; // Light mode only
+  const categories = [
+    {
+      name: 'Social Media',
+      items: ['Facebook', 'Twitter', 'Instagram', 'LinkedIn', 'TikTok'],
+    },
+    { name: 'Messaging', items: ['WhatsApp', 'Telegram', 'Signal'] },
+    { name: 'Video', items: ['YouTube', 'Vimeo', 'TikTok', 'Twitch'] },
+    {
+      name: 'Productivity',
+      items: [
+        'Notion',
+        'Slack',
+        'Microsoft Teams',
+        'Asana',
+        'Trello',
+        'Monday',
+      ],
+    },
+    { name: 'Design', items: ['Figma', 'Adobe XD', 'Sketch', 'Canva'] },
+    {
+      name: 'Development',
+      items: ['GitHub', 'GitLab', 'Bitbucket', 'Stack Overflow'],
+    },
+  ];
+
+  return (
+    <Masonry {...args}>
+      {categories.map((category) => (
+        <Box
+          key={category.name}
+          bg={bgColor}
+          p={4}
+          borderRadius="md"
+          shadow="sm"
+          mb={4}
+        >
+          <Text fontWeight="bold" fontSize="lg" mb={2} color="blue.500">
+            {category.name}
+          </Text>
+          {category.items.map((item) => (
+            <Box
+              key={item}
+              p={2}
+              _hover={{ bg: 'gray.100' }}
+              borderRadius="md"
+              transition="background 0.2s"
+              cursor="pointer"
+              display="flex"
+              alignItems="center"
+            >
+              <Box w="24px" h="24px" bg="blue.100" borderRadius="full" mr={2} />
+              <Text>{item}</Text>
+            </Box>
+          ))}
+        </Box>
+      ))}
+    </Masonry>
+  );
+};
+
+// Responsive example
+export const Responsive: Story = (args) => {
+  // Use Chakra's breakpoint system for responsive columns
+  const responsiveColumns =
+    useBreakpointValue({
+      base: 1, // Mobile
+      sm: 2, // Tablet
+      md: 3, // Medium screens
+      lg: 4, // Large screens
+      xl: 5, // Extra large screens
+    }) || 3; // Default fallback
+
+  return (
+    <Box>
+      <Text mb={4}>Resize the viewport to see the columns adjust:</Text>
+      <Masonry {...args} numCols={responsiveColumns}>
+        {generateItems(20).map((item) => (
+          <Box
+            key={item.id}
+            bg={item.color}
+            height={`${item.height}px`}
+            p={4}
+            borderRadius="md"
+            shadow="sm"
+          >
+            <Text fontWeight="bold">{item.title}</Text>
+          </Box>
+        ))}
+      </Masonry>
+    </Box>
+  );
+};
+
+// Example with controls for column count
+export const CustomizableColumns: Story = (args) => {
+  const items = generateItems(16);
+
+  return (
+    <Masonry {...args}>
+      {items.map((item) => (
+        <Box
+          key={item.id}
+          bg={item.color}
+          height={`${item.height}px`}
+          p={4}
+          borderRadius="md"
+          shadow="sm"
+        >
+          <Text fontWeight="bold">{item.title}</Text>
+        </Box>
+      ))}
+    </Masonry>
+  );
+};
+CustomizableColumns.args = {
+  numCols: 3, // Set a single number to control in Storybook
+};
+
+// Horizontal arrangement example
+export const HorizontalArrangement: Story = (args) => {
+  const items = generateItems(12);
+
+  return (
+    <Box>
+      <Text fontSize="xl" fontWeight="bold" mb={4}>
+        Horizontal Arrangement (row by row)
+      </Text>
+      <Masonry numCols={3} horizontalArrangement={true} gap={4}>
+        {items.map((item) => (
+          <Box
+            key={item.id}
+            bg={item.color}
+            height={`${item.height}px`}
+            p={4}
+            borderRadius="md"
+            shadow="sm"
+          >
+            <Text>{item.title}</Text>
+          </Box>
+        ))}
+      </Masonry>
+
+      <Text fontSize="xl" fontWeight="bold" mt={8} mb={4}>
+        Height-Balanced Arrangement (default)
+      </Text>
+      <Masonry numCols={3} horizontalArrangement={false} gap={4}>
+        {items.map((item) => (
+          <Box
+            key={item.id}
+            bg={item.color}
+            height={`${item.height}px`}
+            p={4}
+            borderRadius="md"
+            shadow="sm"
+          >
+            <Text>{item.title}</Text>
+          </Box>
+        ))}
+      </Masonry>
+    </Box>
+  );
+};
+
+// Comparison with regular grid
+export const ComparisonWithGrid: Story = (args) => {
+  const items = generateItems(12);
+
+  return (
+    <Box>
+      <Text fontSize="xl" fontWeight="bold" mb={4}>
+        Masonry Layout
+      </Text>
+      <Masonry {...args}>
+        {items.map((item) => (
+          <Box
+            key={item.id}
+            bg={item.color}
+            height={`${item.height}px`}
+            p={4}
+            borderRadius="md"
+            shadow="sm"
+          >
+            <Text>{item.title}</Text>
+          </Box>
+        ))}
+      </Masonry>
+
+      <Text fontSize="xl" fontWeight="bold" mt={8} mb={4}>
+        Regular Grid Layout
+      </Text>
+      <SimpleGrid columns={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing={4}>
+        {items.map((item) => (
+          <Box
+            key={item.id}
+            bg={item.color}
+            height={`${item.height}px`}
+            p={4}
+            borderRadius="md"
+            shadow="sm"
+          >
+            <Text>{item.title}</Text>
+          </Box>
+        ))}
+      </SimpleGrid>
+    </Box>
+  );
+};

package/src/components/Masonry/Masonry.tsx

@@ -0,0 +1,187 @@
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  PropsWithChildren,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Box, Flex, Grid } from '@chakra-ui/react';
+
+import { MasonryProps } from './Masonry.types';
+
+export const Masonry = ({
+  children,
+  numCols = 3,
+  gap = 4,
+  horizontalArrangement = false,
+  ...rest
+}: PropsWithChildren<MasonryProps>) => {
+  const childrenArray = useMemo(
+    () => Children.toArray(children).filter(isValidElement),
+    [children]
+  );
+
+  const [itemHeights, setItemHeights] = useState<Record<string, number>>({});
+  const itemRefs = useRef<Record<string, HTMLDivElement | null>>({});
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  const isInitialRender = useRef(true);
+
+  // Clear refs for items that no longer exist
+  const cleanupItemRefs = useCallback(() => {
+    const currentKeys = childrenArray.map(
+      (_, index) => `masonry-item-${index}`
+    );
+    Object.keys(itemRefs.current).forEach((key) => {
+      if (!currentKeys.includes(key)) {
+        delete itemRefs.current[key];
+      }
+    });
+  }, [childrenArray]);
+
+  // Measure item heights with optimized comparison
+  const measureItemHeights = useCallback(() => {
+    let hasChanges = false;
+    const newHeights = { ...itemHeights };
+
+    Object.entries(itemRefs.current).forEach(([key, ref]) => {
+      if (ref) {
+        const height = Math.round(ref.offsetHeight);
+        if (newHeights[key] !== height) {
+          newHeights[key] = height;
+          hasChanges = true;
+        }
+      }
+    });
+
+    if (hasChanges) {
+      setItemHeights(newHeights);
+    }
+  }, [itemHeights]);
+
+  // Setup measurements on initial render and when children change
+  useLayoutEffect(() => {
+    // Use layout effect for synchronous measurement before paint
+    cleanupItemRefs();
+
+    // Measure after DOM update but before browser paint
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+    }
+
+    const timer = setTimeout(measureItemHeights, 0);
+    return () => clearTimeout(timer);
+  }, [childrenArray.length, cleanupItemRefs, measureItemHeights]);
+
+  // Set up resize observer
+  useEffect(() => {
+    // Clear previous observer
+    if (resizeObserverRef.current) {
+      resizeObserverRef.current.disconnect();
+    }
+
+    // Create new observer that uses throttled measurement
+    let rafId: number;
+    const handleResize = () => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(measureItemHeights);
+    };
+
+    resizeObserverRef.current = new ResizeObserver(handleResize);
+
+    // Observe all current refs
+    Object.values(itemRefs.current).forEach((ref) => {
+      if (ref) {
+        resizeObserverRef.current?.observe(ref);
+      }
+    });
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      resizeObserverRef.current?.disconnect();
+    };
+  }, [measureItemHeights, childrenArray.length]);
+
+  // Create column layout with optimized distribution
+  const columns = useMemo(() => {
+    const colElements: ReactNode[][] = Array.from(
+      { length: numCols },
+      () => []
+    );
+
+    if (horizontalArrangement) {
+      // Horizontal arrangement (row by row)
+      childrenArray.forEach((child, index) => {
+        const columnIndex = index % numCols;
+        const itemKey = `masonry-item-${index}`;
+
+        colElements[columnIndex].push(
+          <Box
+            key={itemKey}
+            ref={(el) => {
+              itemRefs.current[itemKey] = el;
+            }}
+            mb={gap}
+            w="100%"
+          >
+            {cloneElement(child, { key: itemKey })}
+          </Box>
+        );
+      });
+    } else {
+      // Height-balanced arrangement
+      const columnHeights = Array(numCols).fill(0);
+
+      childrenArray.forEach((child, index) => {
+        // Find column with the shortest height
+        const shortestColumnIndex = columnHeights.indexOf(
+          Math.min(...columnHeights)
+        );
+        const itemKey = `masonry-item-${index}`;
+
+        colElements[shortestColumnIndex].push(
+          <Box
+            key={itemKey}
+            ref={(el) => {
+              itemRefs.current[itemKey] = el;
+            }}
+            _notLast={{
+              mb: gap,
+            }}
+            w="100%"
+          >
+            {cloneElement(child, { key: itemKey })}
+          </Box>
+        );
+
+        // Update column height
+        const itemHeight = itemHeights[itemKey] || 0;
+        columnHeights[shortestColumnIndex] +=
+          itemHeight + (typeof gap === 'number' ? gap : 0);
+      });
+    }
+
+    return colElements;
+  }, [childrenArray, numCols, horizontalArrangement, gap, itemHeights]);
+
+  // Use Chakra UI's Grid for perfectly equal column widths
+  return (
+    <Grid
+      width="full"
+      templateColumns={`repeat(${numCols}, 1fr)`}
+      gap={gap}
+      {...rest}
+    >
+      {columns.map((colItems, i) => (
+        <Flex key={`masonry-column-${i}`} direction="column" width="100%">
+          {colItems}
+        </Flex>
+      ))}
+    </Grid>
+  );
+};

package/src/components/Masonry/Masonry.types.ts

@@ -0,0 +1,18 @@
+import { FlexProps } from '@chakra-ui/react';
+
+export interface MasonryProps extends Omit<FlexProps, 'gap'> {
+  /**
+   * Number of columns in the masonry layout
+   */
+  numCols: number;
+  /**
+   * Gap between items (applied to both columns and rows)
+   * @default 4
+   */
+  gap?: number | string;
+  /**
+   * Whether to arrange items from left to right (true) or top to bottom (false)
+   * @default false (arrange vertically)
+   */
+  horizontalArrangement?: boolean;
+}

package/src/components/Masonry/index.ts

@@ -0,0 +1,2 @@
+export { Masonry } from './Masonry';
+export type { MasonryProps } from './Masonry.types';

package/src/components/MaxLengthIndicator/MaxLengthIndicator.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { MaxLengthIndicator } from '.';
+
+const meta: Meta<typeof MaxLengthIndicator> = {
+  title: 'Components/MaxLengthIndicator',
+  component: MaxLengthIndicator,
+  args: {
+    value: 1,
+    maxLength: 50,
+  },
+  argTypes: {
+    value: {
+      control: 'number',
+    },
+    maxLength: {
+      control: 'number',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof MaxLengthIndicator>;
+
+export const Basic: Story = (args) => <MaxLengthIndicator {...args} />;

package/src/components/MaxLengthIndicator/MaxLengthIndicator.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { TextProps } from '@chakra-ui/react';
+
+import { Subtitle } from '../Typography';
+
+export const MaxLengthIndicator = ({
+  value,
+  maxLength,
+  ...rest
+}: {
+  value: number;
+  maxLength: number;
+} & TextProps) => {
+  const [currentValue, setCurrentValue] = useState<number>(0);
+
+  useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+
+  return (
+    <Subtitle fontSize="sm" color="gray.600" {...rest}>
+      {currentValue}/{maxLength}
+    </Subtitle>
+  );
+};

package/src/components/MaxLengthIndicator/index.tsx

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