@tsiky/components-r19 1.3.0 → 1.3.1

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

@@ -1,251 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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>
-  );
-};