@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/EdgePanel/EdgePanel.stories.tsx

@@ -230,18 +230,13 @@ const DemoPanelContent = ({
 );
 
 export const BasicUsage: Story = {
-  render: (args) => {
+  render: args => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
       <>
         <Button onClick={() => setIsOpen(true)}>Open Edge Panel</Button>
-        <EdgePanel
-          {...args}
-          isOpen={isOpen}
-          onOpenChange={setIsOpen}
-          title="Basic Edge Panel"
-        >
+        <EdgePanel {...args} isOpen={isOpen} onOpenChange={setIsOpen} title="Basic Edge Panel">
           <DemoPanelContent {...args} />
         </EdgePanel>
       </>
@@ -271,7 +266,7 @@ export const AllPositions: Story = {
     return (
       <>
         <div className="u-flex u-gap-2 u-flex-wrap">
-          {(['start', 'end', 'top', 'bottom'] as const).map((pos) => (
+          {(['start', 'end', 'top', 'bottom'] as const).map(pos => (
             <Button
               key={pos}
               variant={position === pos ? 'primary' : 'secondary'}
@@ -306,18 +301,13 @@ export const AllPositions: Story = {
 };
 
 export const WithSlideMode: Story = {
-  render: (args) => {
+  render: args => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
       <>
         <Button onClick={() => setIsOpen(true)}>Open Slide Mode Panel</Button>
-        <EdgePanel
-          {...args}
-          isOpen={isOpen}
-          onOpenChange={setIsOpen}
-          title="Slide Mode Panel"
-        >
+        <EdgePanel {...args} isOpen={isOpen} onOpenChange={setIsOpen} title="Slide Mode Panel">
           <DemoPanelContent {...args} />
         </EdgePanel>
       </>
@@ -834,10 +824,7 @@ export const GlassShowcase: Story = {
               <p className="u-mb-4">
                 Enhanced polar distortion creates unique radial patterns from center.
               </p>
-              <Card
-                title="Radial Distortion"
-                text="Creates circular displacement patterns."
-              />
+              <Card title="Radial Distortion" text="Creates circular displacement patterns." />
             </div>
           </EdgePanel>
 

package/src/components/EdgePanel/EdgePanel.tsx

@@ -125,9 +125,7 @@ export const EdgePanel: React.FC<EdgePanelProps> = ({
       )}
       <div ref={containerRef} className="c-edge-panel__container">
         {glass ? (
-          <AtomixGlass
-            {...glassProps}
-          >
+          <AtomixGlass {...glassProps}>
             <div
               ref={glassContentRef}
               className="c-edge-panel__glass-content"

package/src/components/Footer/Footer.stories.tsx

@@ -97,7 +97,10 @@ Footer provides a comprehensive footer section for websites with multiple layout
       options: ['columns', 'centered', 'minimal', 'stacked', 'flexible', 'sidebar', 'wide'],
       description: 'Footer layout variant',
       table: {
-        type: { summary: '"columns" | "centered" | "minimal" | "stacked" | "flexible" | "sidebar" | "wide"' },
+        type: {
+          summary:
+            '"columns" | "centered" | "minimal" | "stacked" | "flexible" | "sidebar" | "wide"',
+        },
         defaultValue: { summary: 'columns' },
       },
     },
@@ -289,7 +292,7 @@ export const BasicUsage: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -316,7 +319,7 @@ export const WithNewsletter: Story = {
     onNewsletterSubmit: fn(),
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -340,7 +343,7 @@ export const WithBackToTop: Story = {
     onBackToTop: fn(),
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -362,7 +365,7 @@ export const CenteredLayout: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -384,7 +387,7 @@ export const MinimalLayout: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -406,7 +409,7 @@ export const StackedLayout: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -428,7 +431,7 @@ export const FlexibleLayout: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -450,7 +453,7 @@ export const SidebarLayout: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -472,7 +475,7 @@ export const WideLayout: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -494,7 +497,7 @@ export const DarkVariant: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -516,7 +519,7 @@ export const LargeSize: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -538,7 +541,7 @@ export const WithGlassEffect: Story = {
     socialLinks: sampleSocialLinks,
     glass: true,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -560,9 +563,11 @@ export const StickyFooter: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <div style={{ minHeight: '200vh' }}>
-      <div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <div
+        style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      >
         <p>Scroll down to see the sticky footer</p>
       </div>
       <Footer {...args}>
@@ -577,4 +582,4 @@ export const StickyFooter: Story = {
       },
     },
   },
-};
+};

package/src/components/Footer/Footer.tsx

@@ -149,143 +149,145 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
 
     const footerContent = (
       <div className={containerClass}>
-          {/* Main Footer Content */}
-          <Grid
-            className={sectionsClass}
-            alignItems="start"
-            justifyContent={layout === 'centered' ? 'center' : undefined}
-          >
-            {/* Brand Section */}
-            {(brand || brandLogo || brandDescription) && (
-              <GridCol {...(getResponsiveColumnProps('brand') as any)} className={brandClass}>
-                {brandLogo && (
-                  <div className="c-footer__brand-logo">
-                    {typeof brandLogo === 'string' ? (
-                      <img src={brandLogo} alt={'Brand Logo'} />
-                    ) : (
-                      brandLogo
-                    )}
-                  </div>
-                )}
-                {brand && (
-                  <div className="c-footer__brand-name">
-                    {typeof brand === 'string' ? <h3>{brand}</h3> : brand}
-                  </div>
-                )}
-                {brandDescription && (
-                  <div className="c-footer__brand-description">{brandDescription}</div>
-                )}
-                {socialLinks.length > 0 && (
-                  <div className="c-footer__social" data-testid="footer-social-links">
-                    {socialLinks.map((link, index) => (
-                      <FooterSocialLink
-                        key={`${link.platform}-${index}`}
-                        platform={link.platform}
-                        url={link.url}
-                        icon={link.icon}
-                        label={link.label}
-                        size={size}
-                      />
-                    ))}
-                  </div>
-                )}
-              </GridCol>
-            )}
-
-            {/* Footer Sections */}
-            {children && (
-              <GridCol
-                {...(getResponsiveColumnProps('content') as any)}
-                className="c-footer__content"
-              >
-                <Grid
-                  className="c-footer__sections"
-                  alignItems={layout === 'centered' || layout === 'stacked' ? 'center' : undefined}
-                >
-                  {React.Children.map(children, child => {
-                    // Check if the child is a valid React element
-                    if (React.isValidElement(child)) {
-                      // Clone the element and pass the showNewsletter prop
-                      return React.cloneElement(child, { showNewsletter } as any);
-                    }
-                    return child;
-                  })}
-                </Grid>
-              </GridCol>
-            )}
+        {/* Main Footer Content */}
+        <Grid
+          className={sectionsClass}
+          alignItems="start"
+          justifyContent={layout === 'centered' ? 'center' : undefined}
+        >
+          {/* Brand Section */}
+          {(brand || brandLogo || brandDescription) && (
+            <GridCol {...(getResponsiveColumnProps('brand') as any)} className={brandClass}>
+              {brandLogo && (
+                <div className="c-footer__brand-logo">
+                  {typeof brandLogo === 'string' ? (
+                    <img src={brandLogo} alt={'Brand Logo'} />
+                  ) : (
+                    brandLogo
+                  )}
+                </div>
+              )}
+              {brand && (
+                <div className="c-footer__brand-name">
+                  {typeof brand === 'string' ? <h3>{brand}</h3> : brand}
+                </div>
+              )}
+              {brandDescription && (
+                <div className="c-footer__brand-description">{brandDescription}</div>
+              )}
+              {socialLinks.length > 0 && (
+                <div className="c-footer__social" data-testid="footer-social-links">
+                  {socialLinks.map((link, index) => (
+                    <FooterSocialLink
+                      key={`${link.platform}-${index}`}
+                      platform={link.platform}
+                      url={link.url}
+                      icon={link.icon}
+                      label={link.label}
+                      size={size}
+                    />
+                  ))}
+                </div>
+              )}
+            </GridCol>
+          )}
 
-            {/* Newsletter Section */}
-            {showNewsletter && (
-              <GridCol
-                {...(getResponsiveColumnProps('newsletter') as any)}
-                className="c-footer__newsletter"
+          {/* Footer Sections */}
+          {children && (
+            <GridCol
+              {...(getResponsiveColumnProps('content') as any)}
+              className="c-footer__content"
+            >
+              <Grid
+                className="c-footer__sections"
+                alignItems={layout === 'centered' || layout === 'stacked' ? 'center' : undefined}
               >
-                <h4 className="c-footer__newsletter-title">{newsletterTitle}</h4>
-                {newsletterDescription && (
-                  <p className="c-footer__newsletter-description">{newsletterDescription}</p>
-                )}
-                <Form
-                  className="c-footer__newsletter-form"
-                  onSubmit={e => {
-                    e.preventDefault();
-                    const formData = new FormData(e.currentTarget);
-                    const email = formData.get('email') as string;
-                    if (email) handleNewsletterSubmit(email);
-                  }}
-                >
-                  <div className="c-footer__newsletter-input-group">
-                    <Input
-                      type="email"
-                      name="email"
-                      className="c-footer__newsletter-input"
-                      placeholder={newsletterPlaceholder}
-                      required
-                    />
-                    <Button type="submit" className="c-footer__newsletter-button">
-                      {newsletterButtonText}
-                    </Button>
-                  </div>
-                </Form>
-              </GridCol>
-            )}
-          </Grid>
+                {React.Children.map(children, child => {
+                  // Check if the child is a valid React element
+                  if (React.isValidElement(child)) {
+                    // Clone the element and pass the showNewsletter prop
+                    return React.cloneElement(child, { showNewsletter } as any);
+                  }
+                  return child;
+                })}
+              </Grid>
+            </GridCol>
+          )}
 
-          {(copyright || showBackToTop) && (
-            <div className={bottomClass}>
-              {copyright && <div className="c-footer__copyright">{copyright}</div>}
-              {showBackToTop && (
-                <Button
-                  variant="ghost"
-                  className="c-footer__back-to-top"
-                  onClick={handleBackToTop}
-                  disabled={disabled}
-                  aria-label={backToTopText}
-                >
-                  <span className="c-footer__back-to-top-icon">↑</span>
-                  <span className="c-footer__back-to-top-text">{backToTopText}</span>
-                </Button>
+          {/* Newsletter Section */}
+          {showNewsletter && (
+            <GridCol
+              {...(getResponsiveColumnProps('newsletter') as any)}
+              className="c-footer__newsletter"
+            >
+              <h4 className="c-footer__newsletter-title">{newsletterTitle}</h4>
+              {newsletterDescription && (
+                <p className="c-footer__newsletter-description">{newsletterDescription}</p>
               )}
-            </div>
+              <Form
+                className="c-footer__newsletter-form"
+                onSubmit={e => {
+                  e.preventDefault();
+                  const formData = new FormData(e.currentTarget);
+                  const email = formData.get('email') as string;
+                  if (email) handleNewsletterSubmit(email);
+                }}
+              >
+                <div className="c-footer__newsletter-input-group">
+                  <Input
+                    type="email"
+                    name="email"
+                    className="c-footer__newsletter-input"
+                    placeholder={newsletterPlaceholder}
+                    required
+                  />
+                  <Button type="submit" className="c-footer__newsletter-button">
+                    {newsletterButtonText}
+                  </Button>
+                </div>
+              </Form>
+            </GridCol>
           )}
-        </div>
+        </Grid>
+
+        {(copyright || showBackToTop) && (
+          <div className={bottomClass}>
+            {copyright && <div className="c-footer__copyright">{copyright}</div>}
+            {showBackToTop && (
+              <Button
+                variant="ghost"
+                className="c-footer__back-to-top"
+                onClick={handleBackToTop}
+                disabled={disabled}
+                aria-label={backToTopText}
+              >
+                <span className="c-footer__back-to-top-icon">↑</span>
+                <span className="c-footer__back-to-top-text">{backToTopText}</span>
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
     );
 
     return (
-      <footer ref={ref} className={footerClass + ` c-footer ${glass ? 'c-footer--glass' : ''}`} {...props}>
-    {glass ? (
-      <AtomixGlass {...(glass as unknown as AtomixGlassProps)} elasticity={0}>
-        <div className="c-footer__glass">
-          {footerContent}
-        </div>
-      </AtomixGlass>
-    ) : (
-      footerContent
-    )}
-  </footer>
-);
-}
+      <footer
+        ref={ref}
+        className={footerClass + ` c-footer ${glass ? 'c-footer--glass' : ''}`}
+        {...props}
+      >
+        {glass ? (
+          <AtomixGlass {...(glass as unknown as AtomixGlassProps)} elasticity={0}>
+            <div className="c-footer__glass">{footerContent}</div>
+          </AtomixGlass>
+        ) : (
+          footerContent
+        )}
+      </footer>
+    );
+  }
 );
 
 Footer.displayName = 'Footer';
 
-export default Footer;
+export default Footer;

package/src/components/Footer/FooterLink.tsx

@@ -55,7 +55,7 @@ export const FooterLink = forwardRef<HTMLAnchorElement, FooterLinkProps>(
         ...(href && !disabled ? { to: href } : {}),
         ...linkProps,
       };
-      
+
       return (
         <Component {...componentProps}>
           {icon && <span className="c-footer__link-icon">{icon}</span>}
@@ -77,4 +77,4 @@ export const FooterLink = forwardRef<HTMLAnchorElement, FooterLinkProps>(
 
 FooterLink.displayName = 'FooterLink';
 
-export default FooterLink;
+export default FooterLink;

package/src/components/Form/Checkbox.test.tsx

@@ -8,56 +8,56 @@ expect.extend(toHaveNoViolations);
 
 // Mock AtomixGlass
 vi.mock('../AtomixGlass/AtomixGlass', () => ({
-    AtomixGlass: ({ children }: any) => <div>{children}</div>,
+  AtomixGlass: ({ children }: any) => <div>{children}</div>,
 }));
 
 describe('Checkbox Component', () => {
-    it('renders correctly with label', () => {
-        render(<Checkbox label="Accept Terms" />);
-        // In current implementation, if no ID is provided, htmlFor is undefined, so label is not associated.
-        // screen.getByLabelText might fail or might not find the input.
-        // Let's see.
-        expect(screen.getByText('Accept Terms')).toBeInTheDocument();
-    });
-
-    it('associates label with input when ID is provided', () => {
-        render(<Checkbox label="Subscribe" id="subscribe-check" />);
-        expect(screen.getByLabelText('Subscribe')).toBeInTheDocument();
-    });
-
-    it('associates label with input WITHOUT ID', () => {
-        // This tests my proposed improvement: wrapping input in label or auto-ID
-        render(<Checkbox label="No ID Checkbox" />);
-        // If not associated, this throws
-        expect(screen.getByLabelText('No ID Checkbox')).toBeInTheDocument();
-    });
-
-    it('handles checked state', () => {
-        const handleChange = vi.fn();
-        render(<Checkbox checked onChange={handleChange} label="Checked" id="checked-id" />);
-        const input = screen.getByLabelText('Checked');
-        expect(input).toBeChecked();
-
-        fireEvent.click(input);
-        expect(handleChange).toHaveBeenCalledTimes(1);
-    });
-
-    it('forwards ref', () => {
-        const ref = React.createRef<HTMLInputElement>();
-        render(<Checkbox ref={ref} label="Ref Checkbox" />);
-        expect(ref.current).toBeInstanceOf(HTMLInputElement);
-    });
-
-    it('handles indeterminate state', () => {
-        // This might need manual DOM check as indeterminate is a property, not attribute
-        const { getByRole } = render(<Checkbox indeterminate label="Indeterminate" id="indet" />);
-        const input = getByRole('checkbox') as HTMLInputElement;
-        expect(input.indeterminate).toBe(true);
-    });
-
-    it('should have no accessibility violations', async () => {
-        const { container } = render(<Checkbox label="Accessible Checkbox" id="a11y-check" />);
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
+  it('renders correctly with label', () => {
+    render(<Checkbox label="Accept Terms" />);
+    // In current implementation, if no ID is provided, htmlFor is undefined, so label is not associated.
+    // screen.getByLabelText might fail or might not find the input.
+    // Let's see.
+    expect(screen.getByText('Accept Terms')).toBeInTheDocument();
+  });
+
+  it('associates label with input when ID is provided', () => {
+    render(<Checkbox label="Subscribe" id="subscribe-check" />);
+    expect(screen.getByLabelText('Subscribe')).toBeInTheDocument();
+  });
+
+  it('associates label with input WITHOUT ID', () => {
+    // This tests my proposed improvement: wrapping input in label or auto-ID
+    render(<Checkbox label="No ID Checkbox" />);
+    // If not associated, this throws
+    expect(screen.getByLabelText('No ID Checkbox')).toBeInTheDocument();
+  });
+
+  it('handles checked state', () => {
+    const handleChange = vi.fn();
+    render(<Checkbox checked onChange={handleChange} label="Checked" id="checked-id" />);
+    const input = screen.getByLabelText('Checked');
+    expect(input).toBeChecked();
+
+    fireEvent.click(input);
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('forwards ref', () => {
+    const ref = React.createRef<HTMLInputElement>();
+    render(<Checkbox ref={ref} label="Ref Checkbox" />);
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+  });
+
+  it('handles indeterminate state', () => {
+    // This might need manual DOM check as indeterminate is a property, not attribute
+    const { getByRole } = render(<Checkbox indeterminate label="Indeterminate" id="indet" />);
+    const input = getByRole('checkbox') as HTMLInputElement;
+    expect(input.indeterminate).toBe(true);
+  });
+
+  it('should have no accessibility violations', async () => {
+    const { container } = render(<Checkbox label="Accessible Checkbox" id="a11y-check" />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });