@tsiky/components-r19 1.0.0

package/src/components/CircularProgress/CircularProgress.stories.tsx

@@ -0,0 +1,251 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CircularProgress } from './CircularProgress';
+
+const meta = {
+  title: 'Components/CircularProgress',
+  component: CircularProgress,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A circular progress indicator with customizable text and styling.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    progress: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'Progress value (0-100)',
+      table: {
+        category: 'Data',
+      },
+    },
+    size: {
+      control: { type: 'number', min: 50, max: 300, step: 10 },
+      description: 'Size of the circular progress in pixels',
+      table: {
+        category: 'Appearance',
+      },
+    },
+    strokeWidth: {
+      control: { type: 'number', min: 1, max: 20, step: 1 },
+      description: 'Width of the progress stroke',
+      table: {
+        category: 'Appearance',
+      },
+    },
+    color: {
+      control: 'color',
+      description: 'Color of the progress bar',
+      table: {
+        category: 'Appearance',
+        defaultValue: { summary: '#FFD700' },
+      },
+    },
+    textTop: {
+      control: 'text',
+      description: 'Text displayed at the top inside the circle',
+      table: {
+        category: 'Content',
+        defaultValue: { summary: '100%' },
+      },
+    },
+    textBottom: {
+      control: 'text',
+      description: 'Text displayed at the bottom inside the circle',
+      table: {
+        category: 'Content',
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Label displayed below the circle',
+      table: {
+        category: 'Content',
+      },
+    },
+    textTopStyle: {
+      control: 'object',
+      description: 'Custom styles for the top text',
+      table: {
+        category: 'Styling',
+      },
+    },
+    textBottomStyle: {
+      control: 'object',
+      description: 'Custom styles for the bottom text',
+      table: {
+        category: 'Styling',
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS class for the container',
+      table: {
+        category: 'Styling',
+      },
+    },
+  },
+  args: {
+    progress: 75,
+    size: 100,
+    strokeWidth: 8,
+    color: '#FFD700',
+  },
+} satisfies Meta<typeof CircularProgress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default circular progress indicator with 75% completion',
+      },
+    },
+  },
+};
+
+export const WithText: Story = {
+  args: {
+    textTop: '75%',
+    textBottom: 'Complete',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Circular progress with text inside the circle',
+      },
+    },
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Project Completion',
+    textTop: '75%',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Circular progress with a label below the circle',
+      },
+    },
+  },
+};
+
+export const CustomSize: Story = {
+  args: {
+    size: 150,
+    strokeWidth: 12,
+    textTop: '75%',
+    textBottom: 'Complete',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Larger circular progress with custom stroke width',
+      },
+    },
+  },
+};
+
+export const CustomColor: Story = {
+  args: {
+    color: '#4CAF50',
+    textTop: '75%',
+    textBottom: 'Success',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Circular progress with custom color',
+      },
+    },
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    progress: 50,
+    textTop: '50%',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Minimal circular progress with only percentage text',
+      },
+    },
+  },
+};
+
+export const Complete: Story = {
+  args: {
+    progress: 100,
+    color: '#4CAF50',
+    textTop: '100%',
+    textBottom: 'Complete!',
+    label: 'Task Finished',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Complete circular progress (100%) with success styling',
+      },
+    },
+  },
+};
+
+export const WithCustomTextStyles: Story = {
+  args: {
+    progress: 65,
+    textTop: '65%',
+    textBottom: 'Progress',
+    textTopStyle: { fontSize: '24px', fontWeight: 'bold', color: '#2d3748' },
+    textBottomStyle: { fontSize: '14px', fontStyle: 'italic', color: '#718096' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Circular progress with custom text styles',
+      },
+    },
+  },
+};
+
+export const SmallProgress: Story = {
+  args: {
+    size: 80,
+    strokeWidth: 6,
+    progress: 30,
+    textTop: '30%',
+    label: 'Loading',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Small circular progress indicator',
+      },
+    },
+  },
+};
+
+export const LargeProgress: Story = {
+  args: {
+    size: 200,
+    strokeWidth: 15,
+    progress: 85,
+    textTop: '85%',
+    textBottom: 'Almost Done',
+    label: 'Data Processing',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Large circular progress indicator',
+      },
+    },
+  },
+};

package/src/components/CircularProgress/CircularProgress.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import type { CSSProperties } from 'react';
+import './CircularProgress.css';
+
+export type CircularProgressProps = {
+  progress: number;
+  size?: number;
+  strokeWidth?: number;
+  color?: string;
+  textTop?: string;
+  textBottom?: string;
+  label?: string;
+  textTopStyle?: CSSProperties;
+  textBottomStyle?: CSSProperties;
+  className?: string;
+};
+
+export const CircularProgress: React.FC<CircularProgressProps> = ({
+  progress,
+  size = 100,
+  strokeWidth,
+  color = '#FFD700',
+  textTop,
+  textBottom,
+  label,
+  textTopStyle,
+  textBottomStyle,
+  className = '',
+}) => {
+  if (!strokeWidth) {
+    strokeWidth = size * 0.09;
+  }
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (progress / 100) * circumference;
+
+  return (
+    <div className={`circular-progress-container ${className}`}>
+      <div className='circular-progress' style={{ width: size, height: size }}>
+        <svg width={size} height={size}>
+          <circle
+            className='circular-progress-bg'
+            stroke='#eef2f6'
+            strokeWidth={strokeWidth}
+            fill='transparent'
+            r={radius}
+            cx={size / 2}
+            cy={size / 2}
+          />
+          <circle
+            className='circular-progress-bar'
+            stroke={color}
+            strokeWidth={strokeWidth}
+            strokeLinecap='round'
+            fill='transparent'
+            r={radius}
+            cx={size / 2}
+            cy={size / 2}
+            strokeDasharray={circumference}
+            strokeDashoffset={offset}
+            style={{ transition: 'stroke-dashoffset 0.6s ease' }}
+          />
+        </svg>
+
+        {(textTop || textBottom) && (
+          <div className='circular-progress-content'>
+            {textTop && (
+              <div
+                className='circular-progress-text-top'
+                style={{
+                  fontSize: 'var(--text-paragraph)',
+                  fontWeight: 'var(--font-bold)',
+                  ...textTopStyle,
+                }}
+              >
+                {textTop}
+              </div>
+            )}
+            {textBottom && (
+              <div
+                className='circular-progress-text-bottom'
+                style={{
+                  fontSize: 'var(--text-small)',
+                  ...textBottomStyle,
+                }}
+              >
+                {textBottom}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {label && (
+        <div className='circular-progress-label' style={{ fontSize: 'var(--text-small)' }}>
+          {label}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/CircularProgress/index.ts

@@ -0,0 +1,2 @@
+export { CircularProgress } from './CircularProgress';
+export type { CircularProgressProps } from './CircularProgress';