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

package/src/components/RadialProgress/RadialProgress.stories.tsx

@@ -0,0 +1,272 @@
+import { Box } from '@chakra-ui/react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import RadialProgress from './RadialProgress';
+
+const meta = {
+  title: 'Components/RadialProgress',
+  component: RadialProgress,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A customizable radial progress component that displays multiple segments with colors, values, and optional units.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'range', min: 100, max: 400, step: 10 },
+      description: 'Size of the radial progress component in pixels',
+    },
+    total: {
+      control: { type: 'number' },
+      description: 'Total value displayed in the center',
+    },
+    unit: {
+      control: { type: 'text' },
+      description: 'Unit label displayed next to the total value',
+    },
+    segments: {
+      control: { type: 'object' },
+      description: 'Array of segments with color and value properties',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Box p={8} bg="white" borderRadius="md">
+        <Story />
+      </Box>
+    ),
+  ],
+} satisfies Meta<typeof RadialProgress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with the user's example
+export const Default: Story = {
+  args: {
+    segments: [
+      { color: '#4ECDC4', value: 15 },
+      { color: '#FF6B6B', value: 20 },
+      { color: '#FF8E53', value: 30 },
+      { color: '#FFD93D', value: 75 },
+    ],
+    total: 150,
+    unit: 'GB',
+    size: 200,
+  },
+};
+
+// Storage usage example
+export const StorageUsage: Story = {
+  args: {
+    segments: [
+      { color: '#4ECDC4', value: 15 },
+      { color: '#FF6B6B', value: 20 },
+      { color: '#FF8E53', value: 30 },
+      { color: '#FFD93D', value: 75 },
+    ],
+    total: 150,
+    unit: 'GB',
+    size: 200,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example showing storage usage with different file types.',
+      },
+    },
+  },
+};
+
+// Memory usage example
+export const MemoryUsage: Story = {
+  args: {
+    segments: [
+      { color: '#667EEA', value: 2.5 },
+      { color: '#F093FB', value: 1.8 },
+      { color: '#4ECDC4', value: 3.2 },
+      { color: '#FFE66D', value: 0.5 },
+    ],
+    total: 8,
+    unit: 'GB',
+    size: 200,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Memory usage breakdown showing RAM allocation.',
+      },
+    },
+  },
+};
+
+// Budget tracking example
+export const BudgetTracking: Story = {
+  args: {
+    segments: [
+      { color: '#48BB78', value: 1200 },
+      { color: '#ED8936', value: 800 },
+      { color: '#E53E3E', value: 600 },
+      { color: '#805AD5', value: 400 },
+    ],
+    total: 5000,
+    unit: '$',
+    size: 200,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Budget allocation showing different expense categories.',
+      },
+    },
+  },
+};
+
+// Small size variant
+export const SmallSize: Story = {
+  args: {
+    segments: [
+      { color: '#4ECDC4', value: 25 },
+      { color: '#FF6B6B', value: 35 },
+      { color: '#FF8E53', value: 40 },
+    ],
+    total: 100,
+    unit: '%',
+    size: 120,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Smaller version of the component for compact layouts.',
+      },
+    },
+  },
+};
+
+// Large size variant
+export const LargeSize: Story = {
+  args: {
+    segments: [
+      { color: '#4ECDC4', value: 150 },
+      { color: '#FF6B6B', value: 200 },
+      { color: '#FF8E53', value: 300 },
+      { color: '#FFD93D', value: 350 },
+    ],
+    total: 1000,
+    unit: 'MB',
+    size: 300,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Larger version of the component for prominent display.',
+      },
+    },
+  },
+};
+
+// Single segment
+export const SingleSegment: Story = {
+  args: {
+    segments: [{ color: '#4ECDC4', value: 75 }],
+    total: 100,
+    unit: '%',
+    size: 200,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Simple progress indicator with a single segment.',
+      },
+    },
+  },
+};
+
+// Many segments
+export const ManySegments: Story = {
+  args: {
+    segments: [
+      { color: '#FF6B6B', value: 10 },
+      { color: '#4ECDC4', value: 15 },
+      { color: '#45B7D1', value: 20 },
+      { color: '#96CEB4', value: 12 },
+      { color: '#FFEAA7', value: 8 },
+      { color: '#DDA0DD', value: 18 },
+      { color: '#98D8C8', value: 7 },
+      { color: '#F7DC6F', value: 10 },
+    ],
+    total: 100,
+    unit: 'pts',
+    size: 200,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example with many small segments showing detailed breakdown.',
+      },
+    },
+  },
+};
+
+// Partial usage (segments don't fill total)
+export const PartialUsage: Story = {
+  args: {
+    segments: [
+      { color: '#4ECDC4', value: 30 },
+      { color: '#FF6B6B', value: 20 },
+    ],
+    total: 100,
+    unit: 'GB',
+    size: 200,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Shows remaining capacity when segments don't fill the total value.",
+      },
+    },
+  },
+};
+
+// No unit label
+export const NoUnit: Story = {
+  args: {
+    segments: [
+      { color: '#4ECDC4', value: 45 },
+      { color: '#FF6B6B', value: 30 },
+      { color: '#FF8E53', value: 25 },
+    ],
+    total: 100,
+    size: 200,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress indicator without a unit label.',
+      },
+    },
+  },
+};
+
+// Empty segments (edge case)
+export const EmptySegments: Story = {
+  args: {
+    segments: [],
+    total: 100,
+    unit: 'GB',
+    size: 200,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Edge case showing the component with no segments.',
+      },
+    },
+  },
+};

package/src/components/RadialProgress/RadialProgress.tsx

@@ -0,0 +1,232 @@
+import React from 'react';
+import { Box, useTheme, useToken } from '@chakra-ui/react';
+
+import { Text } from '../Typography';
+import {
+  ProcessedSegment,
+  RadialProgressProps,
+  Segment,
+  SegmentAngle,
+} from './RadialProgress.types';
+
+const RadialProgress: React.FC<RadialProgressProps> = ({
+  size = 200,
+  total = 100,
+  unit,
+  formatTotal,
+  segments = [],
+  className,
+  ...rest
+}) => {
+  const theme = useTheme();
+
+  // Helper function to resolve color tokens
+  const resolveColor = (color: string): string => {
+    try {
+      // Try to resolve as a token first
+      const resolvedColor = useToken('colors', color);
+      return resolvedColor || color;
+    } catch {
+      // If token resolution fails, return the original color
+      return color;
+    }
+  };
+
+  // Early return if total is 0 or negative to prevent division by zero
+  if (total <= 0) {
+    return null;
+  }
+
+  // Scale all values based on the size prop (200 is the base size)
+  const scale = size / 200;
+
+  const centerX = 100;
+  const centerY = 100;
+  const radius = 90;
+  const strokeWidth = 16 * scale;
+  const fontSize = 48 * scale;
+  const unitFontSize = 24 * scale;
+  const shadowHeight = 20 * scale;
+  const shadowWidth = 160 * scale;
+  const shadowOffset = 10 * scale;
+  const shadowBlur = 15 * scale;
+
+  // Convert values to angles with gaps
+  const gapDegrees = 7 * scale; // Scale gap with size
+  const minSegmentDegrees = 0.01 * scale; // Scale minimum segment size too
+
+  // Calculate the sum of all segment values
+  const usedTotal = segments.reduce((sum, segment) => sum + segment.value, 0);
+  const remainingValue = Math.max(0, total - usedTotal);
+
+  // Add gray segment for remaining space if needed
+  const allSegments: Segment[] =
+    segments.length === 0
+      ? [{ color: theme.colors.gray[200], value: total }] // Full gray circle if no segments
+      : remainingValue > 0
+        ? [
+            ...segments,
+            { color: 'gray.200', value: remainingValue }, // Use token instead of theme.colors.gray[200]
+          ]
+        : segments;
+
+  // Calculate total available degrees after accounting for gaps
+  const totalGaps = gapDegrees * 2 * allSegments.length; // Each segment has gaps on both sides
+  const availableDegrees = 360 - totalGaps;
+
+  // First pass: calculate raw degrees and identify segments needing minimum
+  const rawSegments: ProcessedSegment[] = allSegments.map((segment) => {
+    // Prevent division by zero when calculating raw degrees
+    const rawDegrees =
+      total > 0 ? (segment.value / total) * availableDegrees : 0;
+    const needsMinimum = segment.value === 0 || rawDegrees < minSegmentDegrees;
+    return {
+      ...segment,
+      rawDegrees,
+      needsMinimum,
+      actualDegrees: needsMinimum ? minSegmentDegrees : rawDegrees,
+    };
+  });
+
+  // Calculate total degrees needed vs available
+  const totalDegreesNeeded = rawSegments.reduce(
+    (sum, seg) => sum + seg.actualDegrees,
+    0
+  );
+  // Prevent division by zero when calculating scale factor
+  const scaleFactor =
+    totalDegreesNeeded > availableDegrees && totalDegreesNeeded > 0
+      ? availableDegrees / totalDegreesNeeded
+      : 1;
+
+  // Calculate segment angles with proper scaling
+  let currentAngle = -90; // Start from top
+  const segmentAngles: SegmentAngle[] = rawSegments.map((segment) => {
+    const segmentDegrees = segment.actualDegrees * scaleFactor;
+
+    // For a single full circle segment, don't add gaps
+    if (segments.length === 0 && allSegments.length === 1) {
+      return {
+        color: resolveColor(segment.color),
+        start: -90,
+        end: 270, // Full circle
+      };
+    }
+
+    const startAngle = currentAngle + gapDegrees; // Start with gap
+    const endAngle = startAngle + segmentDegrees;
+    currentAngle = endAngle + gapDegrees; // Add gap before next segment
+
+    // Segments already have correct positioning with gaps
+    return {
+      color: resolveColor(segment.color),
+      start: startAngle,
+      end: endAngle,
+    };
+  });
+
+  // Helper function to convert angle to radians
+  const toRadians = (angle: number): number => (angle * Math.PI) / 180;
+
+  // Helper function to get point on circle
+  const getPoint = (angle: number): { x: number; y: number } => {
+    const rad = toRadians(angle);
+    return {
+      x: centerX + radius * Math.cos(rad),
+      y: centerY + radius * Math.sin(rad),
+    };
+  };
+
+  // Helper function to create arc path
+  const createArc = (startAngle: number, endAngle: number): string => {
+    const start = getPoint(startAngle);
+    const end = getPoint(endAngle);
+    const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
+
+    return `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;
+  };
+
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      height={`${size}px`}
+      width="100%"
+      backgroundColor="white"
+      className={['ml-radial-progress', className].join(' ')}
+      {...rest}
+    >
+      <Box position="relative" width={`${size}px`} height={`${size}px`}>
+        {/* SVG */}
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 200 200"
+          style={{ width: '100%', height: '100%' }}
+        >
+          {/* Special case for full circle when no segments */}
+          {segments.length === 0 ? (
+            <circle
+              cx={centerX}
+              cy={centerY}
+              r={radius}
+              fill="none"
+              stroke={resolveColor('gray.200')}
+              strokeWidth={strokeWidth}
+            />
+          ) : (
+            segmentAngles.map((segment, index) => (
+              <path
+                key={index}
+                d={createArc(segment.start, segment.end)}
+                fill="none"
+                stroke={segment.color}
+                strokeWidth={strokeWidth}
+                strokeLinecap="round"
+              />
+            ))
+          )}
+        </svg>
+
+        {/* Center text */}
+        <Box
+          position="absolute"
+          top="50%"
+          left="50%"
+          transform="translate(-50%, -50%)"
+          textAlign="center"
+        >
+          <Text
+            fontSize={`${fontSize}px`}
+            fontWeight="500"
+            color="gray.600"
+            fontFamily="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+            lineHeight="1"
+          >
+            {formatTotal ? formatTotal(total) : total}
+            <Box as="span" fontSize={`${unitFontSize}px`}>
+              {unit}
+            </Box>
+          </Text>
+        </Box>
+
+        {/* Shadow effect */}
+        <Box
+          position="absolute"
+          bottom={`-${shadowOffset}px`}
+          left="50%"
+          transform="translateX(-50%)"
+          width={`${shadowWidth}px`}
+          height={`${shadowHeight}px`}
+          background="gray.200"
+          borderRadius="50%"
+          filter={`blur(${shadowBlur}px)`}
+          opacity="0.3"
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default RadialProgress;

package/src/components/RadialProgress/RadialProgress.types.ts

@@ -0,0 +1,27 @@
+import { BoxProps } from '@chakra-ui/react';
+
+export interface Segment {
+  /** Color value - supports hex colors, CSS color names, and Chakra UI color tokens (e.g., 'primary.500', 'red.400') */
+  color: string;
+  value: number;
+}
+
+export interface RadialProgressProps extends BoxProps {
+  size?: number;
+  total?: number;
+  unit?: string;
+  segments?: Segment[];
+  formatTotal?: (value: number) => string | number;
+}
+
+export interface ProcessedSegment extends Segment {
+  rawDegrees: number;
+  needsMinimum: boolean;
+  actualDegrees: number;
+}
+
+export interface SegmentAngle {
+  color: string;
+  start: number;
+  end: number;
+}

package/src/components/RadialProgress/index.ts

@@ -0,0 +1,2 @@
+export { default as RadialProgress } from './RadialProgress';
+export type { RadialProgressProps } from './RadialProgress.types';