@shohojdhara/atomix 0.3.4 → 0.3.6

package/src/components/Progress/Progress.stories.tsx

@@ -1,75 +1,105 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Progress } from './Progress';
-import { ProgressProps } from '../../lib/types/components';
+import { THEME_COLORS, SIZES } from '../../lib/constants/components';
 
-export default {
+const meta = {
   title: 'Components/Progress',
   component: Progress,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Progress component displays the completion status of a task or process. It provides visual feedback on progress through a horizontal bar that fills based on a percentage value. Progress bars support multiple variants, sizes, and can be used to show loading states, form completion, or any incremental process.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <div style={{ width: '50%' }}>
+        <Story />
+      </div>
+    ),
+  ],
   argTypes: {
-    value: { control: { type: 'range', min: 0, max: 100 } },
+    value: {
+      control: { type: 'range', min: 0, max: 100 },
+      description: 'The progress value as a percentage (0-100)',
+      defaultValue: 50,
+    },
     variant: {
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary', 'success', 'warning', 'error', 'info', 'light', 'dark'],
-      },
+      control: { type: 'select' },
+      options: THEME_COLORS,
+      description: 'The color variant of the progress bar',
+      defaultValue: 'primary',
     },
     size: {
-      control: {
-        type: 'select',
-        options: ['sm', 'md', 'lg'],
-      },
+      control: { type: 'select' },
+      options: SIZES,
+      description: 'The size of the progress bar',
+      defaultValue: 'md',
     },
   },
-} as Meta<typeof Progress>;
+} satisfies Meta<typeof Progress>;
 
-const Template: StoryFn<ProgressProps> = (args: ProgressProps) => <Progress {...args} />;
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Default = Template.bind({});
-Default.args = {
-  value: 50,
-  variant: 'primary',
-  size: 'md',
+// Default Progress
+export const Default: Story = {
+  args: {
+    value: 50,
+    variant: 'primary',
+    size: 'md',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  value: 75,
-  variant: 'secondary',
-  size: 'md',
+export const Secondary: Story = {
+  args: {
+    value: 75,
+    variant: 'secondary',
+    size: 'md',
+  },
 };
 
-export const Success = Template.bind({});
-Success.args = {
-  value: 100,
-  variant: 'success',
-  size: 'md',
+export const Success: Story = {
+  args: {
+    value: 100,
+    variant: 'success',
+    size: 'md',
+  },
 };
 
-export const Warning = Template.bind({});
-Warning.args = {
-  value: 25,
-  variant: 'warning',
-  size: 'md',
+export const Warning: Story = {
+  args: {
+    value: 25,
+    variant: 'warning',
+    size: 'md',
+  },
 };
 
-export const Error = Template.bind({});
-Error.args = {
-  value: 10,
-  variant: 'error',
-  size: 'md',
+export const Error: Story = {
+  args: {
+    value: 10,
+    variant: 'error',
+    size: 'md',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  value: 60,
-  variant: 'primary',
-  size: 'sm',
+export const Small: Story = {
+  args: {
+    value: 60,
+    variant: 'primary',
+    size: 'sm',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  value: 80,
-  variant: 'primary',
-  size: 'lg',
+export const Large: Story = {
+  args: {
+    value: 80,
+    variant: 'primary',
+    size: 'lg',
+  },
 };

package/src/components/Progress/Progress.tsx

@@ -1,10 +1,11 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { ProgressProps } from '../../lib/types/components';
 import { useProgress } from '../../lib/composables/useProgress';
 import { PROGRESS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
+export const Progress = memo(
+  forwardRef<HTMLDivElement, ProgressProps>(
   (
     {
       value,
@@ -54,8 +55,11 @@ export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
 
     return progressContent;
   }
+  )
 );
 
+Progress.displayName = 'Progress';
+
 export type { ProgressProps };
 
 export default Progress;

package/src/components/Rating/Rating.stories.tsx

@@ -1,118 +1,143 @@
 import React, { useState } from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Rating } from './Rating';
-import type { RatingProps } from '../../lib/types/components';
+import { THEME_COLORS, SIZES } from '../../lib/constants/components';
 
-export default {
+const meta = {
   title: 'Components/Rating',
   component: Rating,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Rating component allows users to display and interact with star-based ratings. It supports whole and half-star ratings, customizable maximum values, and can be used in both interactive and read-only modes. Ratings are ideal for product reviews, user feedback, or any scenario requiring visual rating input.',
+      },
+    },
+  },
+  tags: ['autodocs'],
   argTypes: {
-    value: { control: { type: 'number', min: 0, max: 5, step: 0.5 } },
-    maxValue: { control: { type: 'number', min: 1, max: 10 } },
-    allowHalf: { control: 'boolean' },
-    readOnly: { control: 'boolean' },
+    value: {
+      control: { type: 'number', min: 0, max: 5, step: 0.5 },
+      description: 'The current rating value',
+    },
+    maxValue: {
+      control: { type: 'number', min: 1, max: 10 },
+      description: 'The maximum rating value',
+    },
+    allowHalf: {
+      control: 'boolean',
+      description: 'Whether to allow half-star ratings',
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Whether the rating is read-only',
+    },
     size: {
-      control: { type: 'select', options: ['sm', 'md', 'lg'] },
+      control: { type: 'select' },
+      options: SIZES,
+      description: 'The size of the rating stars',
     },
     color: {
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'],
-      },
+      control: { type: 'select' },
+      options: THEME_COLORS,
+      description: 'The color variant of the rating',
     },
     glass: {
       control: 'boolean',
       description: 'Enable glass morphism effect',
     },
   },
-  parameters: {
-    docs: {
-      description: {
-        component: 'Rating component for displaying and collecting star ratings',
-      },
-    },
-  },
-} as Meta;
+} satisfies Meta<typeof Rating>;
 
-const Template: StoryFn<RatingProps> = (args: RatingProps) => <Rating {...args} />;
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Default = Template.bind({});
-Default.args = {
-  value: 3,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: false,
-  size: 'md',
+// Default Rating
+export const Default: Story = {
+  args: {
+    value: 3,
+    maxValue: 5,
+    allowHalf: false,
+    readOnly: false,
+    size: 'md',
+  },
 };
 
-export const ReadOnly = Template.bind({});
-ReadOnly.args = {
-  value: 4,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: true,
-  size: 'md',
+export const ReadOnly: Story = {
+  args: {
+    value: 4,
+    maxValue: 5,
+    allowHalf: false,
+    readOnly: true,
+    size: 'md',
+  },
 };
 
-export const HalfStars = Template.bind({});
-HalfStars.args = {
-  value: 3.5,
-  maxValue: 5,
-  allowHalf: true,
-  readOnly: true,
-  size: 'md',
+export const HalfStars: Story = {
+  args: {
+    value: 3.5,
+    maxValue: 5,
+    allowHalf: true,
+    readOnly: true,
+    size: 'md',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  value: 4,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: true,
-  size: 'sm',
+export const Small: Story = {
+  args: {
+    value: 4,
+    maxValue: 5,
+    allowHalf: false,
+    readOnly: true,
+    size: 'sm',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  value: 4,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: true,
-  size: 'lg',
+export const Large: Story = {
+  args: {
+    value: 4,
+    maxValue: 5,
+    allowHalf: false,
+    readOnly: true,
+    size: 'lg',
+  },
 };
 
-export const CustomColor = Template.bind({});
-CustomColor.args = {
-  value: 4,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: true,
-  size: 'md',
-  color: 'warning',
+export const CustomColor: Story = {
+  args: {
+    value: 4,
+    maxValue: 5,
+    allowHalf: false,
+    readOnly: true,
+    size: 'md',
+    color: 'warning',
+  },
 };
 
-export const Interactive: StoryFn<RatingProps> = () => {
-  const [rating, setRating] = useState(3);
-
-  return (
-    <div>
-      <p>Selected rating: {rating}</p>
-      <Rating value={rating} onChange={setRating} allowHalf={true} />
-    </div>
-  );
+export const Interactive: Story = {
+  render: () => {
+    const [rating, setRating] = useState(3);
+    return (
+      <div>
+        <p>Selected rating: {rating}</p>
+        <Rating value={rating} onChange={setRating} allowHalf={true} />
+      </div>
+    );
+  },
 };
 
-export const CustomMaxValue = Template.bind({});
-CustomMaxValue.args = {
-  value: 7,
-  maxValue: 10,
-  allowHalf: false,
-  readOnly: true,
-  size: 'md',
+export const CustomMaxValue: Story = {
+  args: {
+    value: 7,
+    maxValue: 10,
+    allowHalf: false,
+    readOnly: true,
+    size: 'md',
+  },
 };
 
-export const Glass = {
+export const Glass: Story = {
   args: {
     value: 4,
     maxValue: 5,
@@ -138,7 +163,7 @@ export const Glass = {
   ),
 };
 
-export const GlassInteractive = {
+export const GlassInteractive: Story = {
   args: {
     value: 3,
     maxValue: 5,
@@ -174,7 +199,7 @@ export const GlassInteractive = {
   ),
 };
 
-export const GlassCustom = {
+export const GlassCustom: Story = {
   args: {
     value: 4.5,
     maxValue: 5,

package/src/components/Rating/Rating.tsx

@@ -54,6 +54,9 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
         onChange,
       });
 
+    // Create forked ref - must be called unconditionally
+    const forkedRef = useForkRef(internalRef, ref);
+
     // Handle mouse enter on star with half-star support
     const handleMouseEnter = useCallback(
       (e: React.MouseEvent, starValue: number) => {
@@ -171,7 +174,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
     // If using vanilla JS, just render the container
     if (useVanillaJS) {
       return (
-        <div className={ratingClasses} ref={useForkRef(internalRef, ref)} id={id} {...restProps}>
+        <div className={ratingClasses} ref={forkedRef} id={id} {...restProps}>
           {/* Stars will be generated by the vanilla JS implementation */}
         </div>
       );
@@ -268,7 +271,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
     const ratingContent = (
       <div
         className={ratingClasses}
-        ref={useForkRef(internalRef, ref)}
+        ref={forkedRef}
         id={id}
         style={style}
         data-readonly={readOnly ? 'true' : 'false'}