@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/Popover/Popover.stories.tsx

@@ -5,7 +5,7 @@ import { Popover, PopoverTrigger } from './Popover';
 import { Toggle } from '../Toggle/Toggle';
 import { Button } from '../Button/Button';
 
-const meta = {
+const meta: Meta<typeof Popover> = {
   title: 'Components/Popover',
   component: Popover,
   parameters: {
@@ -113,7 +113,7 @@ Popover displays floating content relative to a trigger element. It provides a f
       description: 'Delay in milliseconds before showing the popover',
       table: {
         type: { summary: 'number' },
-        defaultValue: { summary: 0 },
+        defaultValue: { summary: '0' },
       },
     },
     offset: {
@@ -121,7 +121,7 @@ Popover displays floating content relative to a trigger element. It provides a f
       description: 'Offset distance from the trigger element',
       table: {
         type: { summary: 'number' },
-        defaultValue: { summary: 12 },
+        defaultValue: { summary: '12' },
       },
     },
     defaultOpen: {
@@ -129,7 +129,7 @@ Popover displays floating content relative to a trigger element. It provides a f
       description: 'Whether the popover is initially open',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     closeOnClickOutside: {
@@ -137,7 +137,7 @@ Popover displays floating content relative to a trigger element. It provides a f
       description: 'Whether to close the popover when clicking outside',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: true },
+        defaultValue: { summary: 'true' },
       },
     },
     closeOnEscape: {
@@ -145,7 +145,7 @@ Popover displays floating content relative to a trigger element. It provides a f
       description: 'Whether to close the popover when pressing Escape key',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: true },
+        defaultValue: { summary: 'true' },
       },
     },
     className: {
@@ -161,11 +161,11 @@ Popover displays floating content relative to a trigger element. It provides a f
       description: 'Enable glass morphism effect',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
   },
-} satisfies Meta<typeof Popover>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -213,18 +213,17 @@ const InteractivePopover = (args: React.ComponentProps<typeof Popover>) => {
 
   return (
     <div style={{ display: 'flex', justifyContent: 'center', padding: '100px' }}>
-      <Popover {...args}>
+      <Popover {...args} content={content}>
         <PopoverTrigger>
           <Button variant="primary">Open Popover</Button>
         </PopoverTrigger>
-        {content}
       </Popover>
     </div>
   );
 };
 
 export const BasicUsage: Story = {
-  render: (args) => <InteractivePopover {...args} />,
+  render: args => <InteractivePopover {...args} content={undefined} />,
   args: {
     position: 'top',
     trigger: 'click',
@@ -243,88 +242,41 @@ export const BasicUsage: Story = {
 export const AllPositions: Story = {
   render: () => {
     const content = <div style={{ padding: '20px' }}>Popover Content</div>;
-    
+
     return (
-      <div style={{ 
-        display: 'grid', 
-        gridTemplateColumns: 'repeat(3, 1fr)', 
-        gap: '20px', 
-        padding: '50px',
-        alignItems: 'center',
-        justifyItems: 'center',
-        height: '500px'
-      }}>
-        <div>
-          <Popover position="top-start">
-            <PopoverTrigger>
-              <Button variant="primary">Top Start</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
-        <div>
-          <Popover position="top">
-            <PopoverTrigger>
-              <Button variant="primary">Top</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
-        <div>
-          <Popover position="top-end">
-            <PopoverTrigger>
-              <Button variant="primary">Top End</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
-        
-        <div>
-          <Popover position="left">
-            <PopoverTrigger>
-              <Button variant="primary">Left</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
-        
-        <div style={{ textAlign: 'center' }}>
-          <p>All popover positions</p>
-        </div>
-        
-        <div>
-          <Popover position="right">
-            <PopoverTrigger>
-              <Button variant="primary">Right</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
-        
-        <div>
-          <Popover position="bottom-start">
-            <PopoverTrigger>
-              <Button variant="primary">Bottom Start</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
-        <div>
-          <Popover position="bottom">
-            <PopoverTrigger>
-              <Button variant="primary">Bottom</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
-        <div>
-          <Popover position="bottom-end">
-            <PopoverTrigger>
-              <Button variant="primary">Bottom End</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          gap: '20px',
+          padding: '50px',
+          alignItems: 'center',
+          height: '300px',
+        }}
+      >
+        <Popover position="left" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Left</Button>
+          </PopoverTrigger>
+        </Popover>
+
+        <Popover position="top" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Top</Button>
+          </PopoverTrigger>
+        </Popover>
+
+        <Popover position="bottom" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Bottom</Button>
+          </PopoverTrigger>
+        </Popover>
+
+        <Popover position="right" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Right</Button>
+          </PopoverTrigger>
+        </Popover>
       </div>
     );
   },
@@ -338,19 +290,23 @@ export const AllPositions: Story = {
 };
 
 export const WithGlassEffect: Story = {
-  render: (args) => (
-    <div style={{ 
-      display: 'flex', 
-      justifyContent: 'center', 
-      padding: '100px',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      minHeight: '300px'
-    }}>
-      <Popover {...args}>
+  render: args => (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '100px',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        minHeight: '300px',
+      }}
+    >
+      <Popover
+        {...args}
+        content={<div style={{ padding: '20px' }}>Glass Effect Popover Content</div>}
+      >
         <PopoverTrigger>
           <Button variant="primary">Open Glass Popover</Button>
         </PopoverTrigger>
-        <div style={{ padding: '20px' }}>Glass Effect Popover Content</div>
       </Popover>
     </div>
   ),
@@ -374,7 +330,7 @@ export const WithGlassEffect: Story = {
  * Glass morphism popover example.
  */
 export const GlassPopover: Story = {
-  render: args => <InteractivePopover {...args} />,
+  render: args => <InteractivePopover {...args} content={undefined} />,
   args: {
     position: 'top',
     trigger: 'click',
@@ -404,7 +360,7 @@ export const GlassPopover: Story = {
  * Glass popover with custom settings.
  */
 export const GlassPopoverCustom: Story = {
-  render: (args) => {
+  render: args => {
     const selectOptions = [
       { value: '1', label: 'Option 1' },
       { value: '2', label: 'Option 2' },
@@ -446,11 +402,10 @@ export const GlassPopoverCustom: Story = {
 
     return (
       <div style={{ display: 'flex', justifyContent: 'center', padding: '100px' }}>
-        <Popover {...args}>
+        <Popover {...args} content={content}>
           <PopoverTrigger>
             <Button variant="primary">Open Popover</Button>
           </PopoverTrigger>
-          {content}
         </Popover>
       </div>
     );
@@ -491,7 +446,7 @@ export const GlassPopoverCustom: Story = {
  * Glass popover with hover trigger.
  */
 export const GlassPopoverHover: Story = {
-  render: (args) => {
+  render: args => {
     const selectOptions = [
       { value: '1', label: 'Option 1' },
       { value: '2', label: 'Option 2' },
@@ -533,11 +488,10 @@ export const GlassPopoverHover: Story = {
 
     return (
       <div style={{ display: 'flex', justifyContent: 'center', padding: '100px' }}>
-        <Popover {...args}>
+        <Popover {...args} content={content}>
           <PopoverTrigger>
             <Button variant="primary">Open Popover</Button>
           </PopoverTrigger>
-          {content}
         </Popover>
       </div>
     );
@@ -571,91 +525,44 @@ export const GlassPopoverHover: Story = {
  * Glass popover with different positions.
  */
 export const GlassPopoverPositions: Story = {
-  render: (args) => {
+  render: args => {
     const content = <div style={{ padding: '20px' }}>Popover Content</div>;
-    
+
     return (
-      <div style={{
-        display: 'grid', 
-        gridTemplateColumns: 'repeat(3, 1fr)', 
-        gap: '20px', 
-        padding: '50px',
-        alignItems: 'center',
-        justifyItems: 'center',
-        height: '500px',
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
-      }}>
-        <div>
-          <Popover {...args} position="top-start">
-            <PopoverTrigger>
-              <Button variant="primary">Top Start</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
-        <div>
-          <Popover {...args} position="top">
-            <PopoverTrigger>
-              <Button variant="primary">Top</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
-        <div>
-          <Popover {...args} position="top-end">
-            <PopoverTrigger>
-              <Button variant="primary">Top End</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
-        
-        <div>
-          <Popover {...args} position="left">
-            <PopoverTrigger>
-              <Button variant="primary">Left</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
-        
-        <div style={{ textAlign: 'center' }}>
-          <p>All popover positions</p>
-        </div>
-        
-        <div>
-          <Popover {...args} position="right">
-            <PopoverTrigger>
-              <Button variant="primary">Right</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
-        
-        <div>
-          <Popover {...args} position="bottom-start">
-            <PopoverTrigger>
-              <Button variant="primary">Bottom Start</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
-        <div>
-          <Popover {...args} position="bottom">
-            <PopoverTrigger>
-              <Button variant="primary">Bottom</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
-        <div>
-          <Popover {...args} position="bottom-end">
-            <PopoverTrigger>
-              <Button variant="primary">Bottom End</Button>
-            </PopoverTrigger>
-            {content}
-          </Popover>
-        </div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          gap: '20px',
+          padding: '50px',
+          alignItems: 'center',
+          height: '300px',
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        }}
+      >
+        <Popover {...args} position="left" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Left</Button>
+          </PopoverTrigger>
+        </Popover>
+
+        <Popover {...args} position="top" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Top</Button>
+          </PopoverTrigger>
+        </Popover>
+
+        <Popover {...args} position="bottom" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Bottom</Button>
+          </PopoverTrigger>
+        </Popover>
+
+        <Popover {...args} position="right" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Right</Button>
+          </PopoverTrigger>
+        </Popover>
       </div>
     );
   },

package/src/components/Popover/Popover.tsx

@@ -106,7 +106,10 @@ export const Popover: React.FC<PopoverProps> = ({
                 <div className="c-popover__content-inner">{content}</div>
               </div>
             )}
-            <div ref={arrowRef as React.RefObject<HTMLDivElement>} className="c-popover__arrow"></div>
+            <div
+              ref={arrowRef as React.RefObject<HTMLDivElement>}
+              className="c-popover__arrow"
+            ></div>
           </div>,
           document.body
         )}
@@ -119,43 +122,44 @@ export const Popover: React.FC<PopoverProps> = ({
  */
 export const PopoverTrigger = forwardRef<HTMLElement, PopoverTriggerProps>(
   ({ children, trigger: triggerProp }, ref) => {
-  const { isOpen, setIsOpen, triggerRef, popoverId, triggerType } =
-    React.useContext(PopoverContext);
-
-  // Determine which trigger type to use - prop from PopoverTrigger or from context
-  const effectiveTrigger = triggerProp || triggerType;
-
-  // Handle trigger events
-  const handleClick = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const handleMouseEnter = () => {
-    setIsOpen(true);
-  };
-
-  const handleMouseLeave = () => {
-    setIsOpen(false);
-  };
-
-  // Clone the children element with additional props
-  const child = React.Children.only(children) as React.ReactElement;
-
-  const triggerProps: any = {
-    ref: ref || triggerRef,
-    'aria-describedby': popoverId,
-    'aria-expanded': isOpen,
-  };
-
-  if (effectiveTrigger === 'click') {
-    triggerProps.onClick = handleClick;
-  } else if (effectiveTrigger === 'hover') {
-    triggerProps.onMouseEnter = handleMouseEnter;
-    triggerProps.onMouseLeave = handleMouseLeave;
+    const { isOpen, setIsOpen, triggerRef, popoverId, triggerType } =
+      React.useContext(PopoverContext);
+
+    // Determine which trigger type to use - prop from PopoverTrigger or from context
+    const effectiveTrigger = triggerProp || triggerType;
+
+    // Handle trigger events
+    const handleClick = () => {
+      setIsOpen(!isOpen);
+    };
+
+    const handleMouseEnter = () => {
+      setIsOpen(true);
+    };
+
+    const handleMouseLeave = () => {
+      setIsOpen(false);
+    };
+
+    // Clone the children element with additional props
+    const child = React.Children.only(children) as React.ReactElement;
+
+    const triggerProps: any = {
+      ref: ref || triggerRef,
+      'aria-describedby': popoverId,
+      'aria-expanded': isOpen,
+    };
+
+    if (effectiveTrigger === 'click') {
+      triggerProps.onClick = handleClick;
+    } else if (effectiveTrigger === 'hover') {
+      triggerProps.onMouseEnter = handleMouseEnter;
+      triggerProps.onMouseLeave = handleMouseLeave;
+    }
+
+    return React.cloneElement(child, triggerProps);
   }
-
-  return React.cloneElement(child, triggerProps);
-});
+);
 
 PopoverTrigger.displayName = 'PopoverTrigger';
 

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

@@ -4,7 +4,7 @@ import { fn } from '@storybook/test';
 import { Progress } from './Progress';
 import { THEME_COLORS, SIZES } from '../../lib/constants/components';
 
-const meta = {
+const meta: Meta<typeof Progress> = {
   title: 'Components/Progress',
   component: Progress,
   parameters: {
@@ -83,7 +83,7 @@ Progress displays the completion status of a task or process. It provides visual
       description: 'The progress value as a percentage (0-100)',
       table: {
         type: { summary: 'number' },
-        defaultValue: { summary: 0 },
+        defaultValue: { summary: '0' },
       },
     },
     variant: {
@@ -104,40 +104,8 @@ Progress displays the completion status of a task or process. It provides visual
         defaultValue: { summary: 'md' },
       },
     },
-    animated: {
-      control: 'boolean',
-      description: 'Whether to animate the progress bar',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    striped: {
-      control: 'boolean',
-      description: 'Whether to apply striped styling',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    label: {
-      control: 'text',
-      description: 'Optional label to display with the progress',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: '-' },
-      },
-    },
-    max: {
-      control: 'number',
-      description: 'The maximum value for the progress bar',
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: 100 },
-      },
-    },
   },
-} satisfies Meta<typeof Progress>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -158,13 +126,24 @@ export const BasicUsage: Story = {
 };
 
 export const AllVariants: Story = {
+  args: { value: 0 },
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
-      <div><strong>Primary:</strong> <Progress value={75} variant="primary" /></div>
-      <div><strong>Secondary:</strong> <Progress value={60} variant="secondary" /></div>
-      <div><strong>Success:</strong> <Progress value={100} variant="success" /></div>
-      <div><strong>Warning:</strong> <Progress value={45} variant="warning" /></div>
-      <div><strong>Error:</strong> <Progress value={30} variant="error" /></div>
+      <div>
+        <strong>Primary:</strong> <Progress value={75} variant="primary" />
+      </div>
+      <div>
+        <strong>Secondary:</strong> <Progress value={60} variant="secondary" />
+      </div>
+      <div>
+        <strong>Success:</strong> <Progress value={100} variant="success" />
+      </div>
+      <div>
+        <strong>Warning:</strong> <Progress value={45} variant="warning" />
+      </div>
+      <div>
+        <strong>Error:</strong> <Progress value={30} variant="error" />
+      </div>
     </div>
   ),
   parameters: {
@@ -177,11 +156,18 @@ export const AllVariants: Story = {
 };
 
 export const AllSizes: Story = {
+  args: { value: 0 },
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
-      <div><strong>Small:</strong> <Progress value={60} size="sm" /></div>
-      <div><strong>Medium:</strong> <Progress value={70} size="md" /></div>
-      <div><strong>Large:</strong> <Progress value={80} size="lg" /></div>
+      <div>
+        <strong>Small:</strong> <Progress value={60} size="sm" />
+      </div>
+      <div>
+        <strong>Medium:</strong> <Progress value={70} size="md" />
+      </div>
+      <div>
+        <strong>Large:</strong> <Progress value={80} size="lg" />
+      </div>
     </div>
   ),
   parameters: {
@@ -198,8 +184,13 @@ export const WithLabel: Story = {
     value: 75,
     variant: 'primary',
     size: 'md',
-    label: 'Processing files: 75%',
   },
+  render: args => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <label>Processing files: 75%</label>
+      <Progress {...args} />
+    </div>
+  ),
   parameters: {
     docs: {
       description: {

package/src/components/River/River.stories.tsx

@@ -172,7 +172,8 @@ export const ContentColumns: Story = {
           <div>
             <p className="c-river__text">
               Use content columns to create custom layouts with different types of content. This
-              approach gives you more control over the structure and presentation of your information.
+              approach gives you more control over the structure and presentation of your
+              information.
             </p>
             <p className="c-river__text">
               Perfect for featuring important statistics, quotes, or highlighting key information