@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/Tooltip/Tooltip.tsx

@@ -2,7 +2,11 @@ import React, { ReactNode, memo } from 'react';
 import { TOOLTIP } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
-import { useTooltip, type TooltipPosition, type TooltipTrigger } from '../../lib/composables/useTooltip';
+import {
+  useTooltip,
+  type TooltipPosition,
+  type TooltipTrigger,
+} from '../../lib/composables/useTooltip';
 
 export interface TooltipProps {
   /**
@@ -19,14 +23,14 @@ export interface TooltipProps {
    * The position of the tooltip relative to the trigger
    */
   position?:
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right';
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right';
 
   /**
    * How the tooltip is triggered
@@ -60,109 +64,103 @@ export interface TooltipProps {
   glass?: AtomixGlassProps | boolean;
 }
 
-export const Tooltip: React.FC<TooltipProps> = memo(({
-  content,
-  children,
-  position = TOOLTIP.DEFAULTS.POSITION,
-  trigger = TOOLTIP.DEFAULTS.TRIGGER,
-  className = '',
-  style,
-  delay = TOOLTIP.DEFAULTS.DELAY,
-  offset = TOOLTIP.DEFAULTS.OFFSET,
-  glass,
-}) => {
-  const {
-    isVisible,
-    isPositioned,
-    tooltipId,
-    triggerRef,
-    tooltipRef,
-    tooltipStyle,
-    arrowStyle,
-    triggerProps,
-    wrapperProps,
-  } = useTooltip({
-    position: position as   TooltipPosition,
-    trigger: trigger as TooltipTrigger,
-    offset,
-    delay,
-  });
-
-  const getTooltipPositionClasses = () => {
-    const positionMap: Record<string, string> = {
-      top: 'c-tooltip--top',
-      bottom: 'c-tooltip--bottom',
-      left: 'c-tooltip--left',
-      right: 'c-tooltip--right',
-      'top-left': 'c-tooltip--top-left',
-      'top-right': 'c-tooltip--top-right',
-      'bottom-left': 'c-tooltip--bottom-left',
-      'bottom-right': 'c-tooltip--bottom-right',
+export const Tooltip: React.FC<TooltipProps> = memo(
+  ({
+    content,
+    children,
+    position = TOOLTIP.DEFAULTS.POSITION,
+    trigger = TOOLTIP.DEFAULTS.TRIGGER,
+    className = '',
+    style,
+    delay = TOOLTIP.DEFAULTS.DELAY,
+    offset = TOOLTIP.DEFAULTS.OFFSET,
+    glass,
+  }) => {
+    const {
+      isVisible,
+      isPositioned,
+      tooltipId,
+      triggerRef,
+      tooltipRef,
+      tooltipStyle,
+      arrowStyle,
+      triggerProps,
+      wrapperProps,
+    } = useTooltip({
+      position: position as TooltipPosition,
+      trigger: trigger as TooltipTrigger,
+      offset,
+      delay,
+    });
+
+    const getTooltipPositionClasses = () => {
+      const positionMap: Record<string, string> = {
+        top: 'c-tooltip--top',
+        bottom: 'c-tooltip--bottom',
+        left: 'c-tooltip--left',
+        right: 'c-tooltip--right',
+        'top-left': 'c-tooltip--top-left',
+        'top-right': 'c-tooltip--top-right',
+        'bottom-left': 'c-tooltip--bottom-left',
+        'bottom-right': 'c-tooltip--bottom-right',
+      };
+      return positionMap[position] || 'c-tooltip--top';
     };
-    return positionMap[position] || 'c-tooltip--top';
-  };
-
-  const renderContent = () => {
-    const contentElement = (
-      <div
-        className={`c-tooltip__content ${TOOLTIP.SELECTORS.CONTENT.substring(1)} ${isVisible && isPositioned && 'is-active'}`}
-      >
-        <span 
-          className={TOOLTIP.SELECTORS.ARROW.substring(1)}
-          style={arrowStyle}
-        ></span>
-        {content}
-      </div>
-    );
 
-    if (glass) {
-      const defaultGlassProps = {
-        displacementScale: 100,
-        blurAmount: 3,
-      };
+    const renderContent = () => {
+      const contentElement = (
+        <div
+          className={`c-tooltip__content ${TOOLTIP.SELECTORS.CONTENT.substring(1)} ${isVisible && isPositioned && 'is-active'}`}
+        >
+          <span className={TOOLTIP.SELECTORS.ARROW.substring(1)} style={arrowStyle}></span>
+          {content}
+        </div>
+      );
 
-      const glassProps =
-        glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-
-      return <AtomixGlass {...glassProps}>{contentElement}</AtomixGlass>;
-    }
-
-    return contentElement;
-  };
-
-  return (
-    <div
-      className="u-position-relative u-inline-block"
-      style={style}
-      {...wrapperProps}
-    >
-      <div
-        ref={triggerRef}
-        className={`${TOOLTIP.SELECTORS.TRIGGER.substring(1)}${className ? ` ${className}` : ''}`}
-        {...triggerProps}
-      >
-        {children}
-      </div>
-      {isVisible && (
+      if (glass) {
+        const defaultGlassProps = {
+          displacementScale: 100,
+          blurAmount: 3,
+        };
+
+        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+        return <AtomixGlass {...glassProps}>{contentElement}</AtomixGlass>;
+      }
+
+      return contentElement;
+    };
+
+    return (
+      <div className="u-position-relative u-inline-block" style={style} {...wrapperProps}>
         <div
-          ref={tooltipRef}
-          id={tooltipId}
-          role="tooltip"
-          className={`c-tooltip ${TOOLTIP.SELECTORS.TOOLTIP.substring(1)} ${getTooltipPositionClasses()} ${glass ? 'c-tooltip--glass' : ''}`}
-          data-tooltip-position={position}
-          data-tooltip-trigger={trigger}
-          style={{
-            ...tooltipStyle,
-            // Position off-screen initially to prevent jump, then move to calculated position
-            ...(isPositioned ? {} : { left: '-9999px', top: '-9999px' }),
-          }}
+          ref={triggerRef}
+          className={`${TOOLTIP.SELECTORS.TRIGGER.substring(1)}${className ? ` ${className}` : ''}`}
+          {...triggerProps}
         >
-          {renderContent()}
+          {children}
         </div>
-      )}
-    </div>
-  );
-});
+        {isVisible && (
+          <div
+            ref={tooltipRef}
+            id={tooltipId}
+            role="tooltip"
+            className={`c-tooltip ${TOOLTIP.SELECTORS.TOOLTIP.substring(1)} ${getTooltipPositionClasses()} ${glass ? 'c-tooltip--glass' : ''}`}
+            data-tooltip-position={position}
+            data-tooltip-trigger={trigger}
+            style={{
+              ...tooltipStyle,
+              // Position off-screen initially to prevent jump, then move to calculated position
+              ...(isPositioned ? {} : { left: '-9999px', top: '-9999px' }),
+            }}
+          >
+            {renderContent()}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
 
 Tooltip.displayName = 'Tooltip';
 

package/src/components/Upload/Upload.stories.tsx

@@ -179,48 +179,48 @@ export const BasicUsage: Story = {
 // Size Variants
 export const SizeVariants: Story = {
   render: () => (
-  <div style={{ padding: '30px' }}>
-    <div style={{ marginBottom: '40px' }}>
-      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Small Size</h3>
-      <div style={{ maxWidth: '400px' }}>
-        <Upload
-          size="sm"
-          title="Small Upload Area"
-          supportedFilesText="PDF, JPEG, PNG"
-          buttonText="Choose File"
-          helperText="Max: 2MB"
-        />
+    <div style={{ padding: '30px' }}>
+      <div style={{ marginBottom: '40px' }}>
+        <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Small Size</h3>
+        <div style={{ maxWidth: '400px' }}>
+          <Upload
+            size="sm"
+            title="Small Upload Area"
+            supportedFilesText="PDF, JPEG, PNG"
+            buttonText="Choose File"
+            helperText="Max: 2MB"
+          />
+        </div>
       </div>
-    </div>
 
-    <div style={{ marginBottom: '40px' }}>
-      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>
-        Medium Size (Default)
-      </h3>
-      <div style={{ maxWidth: '500px' }}>
-        <Upload
-          size="md"
-          title="Drag and Drop files here"
-          supportedFilesText="Files supported: PDF, XSLS, JPEG, PNG, Scanner"
-          buttonText="Choose File"
-          helperText="Maximum size: 5MB"
-        />
+      <div style={{ marginBottom: '40px' }}>
+        <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>
+          Medium Size (Default)
+        </h3>
+        <div style={{ maxWidth: '500px' }}>
+          <Upload
+            size="md"
+            title="Drag and Drop files here"
+            supportedFilesText="Files supported: PDF, XSLS, JPEG, PNG, Scanner"
+            buttonText="Choose File"
+            helperText="Maximum size: 5MB"
+          />
+        </div>
       </div>
-    </div>
 
-    <div>
-      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Large Size</h3>
-      <div style={{ maxWidth: '700px' }}>
-        <Upload
-          size="lg"
-          title="Drop your files here for upload"
-          supportedFilesText="Supported formats: PDF, Excel, Word, Images, and more"
-          buttonText="Browse Files"
-          helperText="Maximum file size: 10MB per file"
-        />
+      <div>
+        <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Large Size</h3>
+        <div style={{ maxWidth: '700px' }}>
+          <Upload
+            size="lg"
+            title="Drop your files here for upload"
+            supportedFilesText="Supported formats: PDF, Excel, Word, Images, and more"
+            buttonText="Browse Files"
+            helperText="Maximum file size: 10MB per file"
+          />
+        </div>
       </div>
     </div>
-  </div>
   ),
   parameters: {
     docs: {
@@ -472,73 +472,73 @@ export const DragDropDemo: Story = {
     const [dragState, setDragState] = useState<'idle' | 'dragging'>('idle');
     const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
 
-  const handleFileSelect = (files: File[]) => {
-    const fileNames = files.map(file => file.name);
-    setUploadedFiles(prev => [...prev, ...fileNames]);
-  };
-
-  return (
-    <div style={{ padding: '30px' }}>
-      <div style={{ marginBottom: '20px' }}>
-        <h3 style={{ fontSize: '18px', fontWeight: '600', marginBottom: '10px' }}>
-          Interactive Drag & Drop Demo
-        </h3>
-        <p style={{ color: '#666', fontSize: '14px', marginBottom: '20px' }}>
-          Try dragging files over the upload area to see the hover effects, or click to select
-          files.
-        </p>
-      </div>
+    const handleFileSelect = (files: File[]) => {
+      const fileNames = files.map(file => file.name);
+      setUploadedFiles(prev => [...prev, ...fileNames]);
+    };
+
+    return (
+      <div style={{ padding: '30px' }}>
+        <div style={{ marginBottom: '20px' }}>
+          <h3 style={{ fontSize: '18px', fontWeight: '600', marginBottom: '10px' }}>
+            Interactive Drag & Drop Demo
+          </h3>
+          <p style={{ color: '#666', fontSize: '14px', marginBottom: '20px' }}>
+            Try dragging files over the upload area to see the hover effects, or click to select
+            files.
+          </p>
+        </div>
 
-      <div style={{ maxWidth: '600px', marginBottom: '20px' }}>
-        <Upload
-          title="Drag files here to see the magic ✨"
-          supportedFilesText="PDF, Images, Documents - All welcome!"
-          buttonText="Or click to browse"
-          helperText="Watch the upload area respond to your interactions"
-          onFileSelect={handleFileSelect}
-          multiple={true}
-        />
-      </div>
+        <div style={{ maxWidth: '600px', marginBottom: '20px' }}>
+          <Upload
+            title="Drag files here to see the magic ✨"
+            supportedFilesText="PDF, Images, Documents - All welcome!"
+            buttonText="Or click to browse"
+            helperText="Watch the upload area respond to your interactions"
+            onFileSelect={handleFileSelect}
+            multiple={true}
+          />
+        </div>
 
-      {uploadedFiles.length > 0 && (
-        <div
-          style={{
-            padding: '16px',
-            backgroundColor: '#f8f9fa',
-            borderRadius: '8px',
-            border: '1px solid #e9ecef',
-          }}
-        >
-          <h4
-            style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px', color: '#495057' }}
-          >
-            Selected Files:
-          </h4>
-          <ul style={{ margin: 0, paddingLeft: '20px' }}>
-            {uploadedFiles.map((fileName, index) => (
-              <li key={index} style={{ fontSize: '14px', color: '#6c757d', marginBottom: '4px' }}>
-                {fileName}
-              </li>
-            ))}
-          </ul>
-          <button
-            onClick={() => setUploadedFiles([])}
+        {uploadedFiles.length > 0 && (
+          <div
             style={{
-              marginTop: '12px',
-              padding: '6px 12px',
-              fontSize: '12px',
-              backgroundColor: '#6c757d',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
+              padding: '16px',
+              backgroundColor: '#f8f9fa',
+              borderRadius: '8px',
+              border: '1px solid #e9ecef',
             }}
           >
-            Clear List
-          </button>
-        </div>
-      )}
-    </div>
+            <h4
+              style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px', color: '#495057' }}
+            >
+              Selected Files:
+            </h4>
+            <ul style={{ margin: 0, paddingLeft: '20px' }}>
+              {uploadedFiles.map((fileName, index) => (
+                <li key={index} style={{ fontSize: '14px', color: '#6c757d', marginBottom: '4px' }}>
+                  {fileName}
+                </li>
+              ))}
+            </ul>
+            <button
+              onClick={() => setUploadedFiles([])}
+              style={{
+                marginTop: '12px',
+                padding: '6px 12px',
+                fontSize: '12px',
+                backgroundColor: '#6c757d',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+              }}
+            >
+              Clear List
+            </button>
+          </div>
+        )}
+      </div>
     );
   },
   parameters: {
@@ -555,39 +555,41 @@ export const DragDropDemo: Story = {
 export const FileTypeRestrictions: Story = {
   render: () => (
     <div style={{ padding: '30px' }}>
-    <div style={{ marginBottom: '40px' }}>
-      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Images Only</h3>
-      <div style={{ maxWidth: '500px' }}>
-        <Upload
-          title="Upload Images"
-          supportedFilesText="JPEG, PNG, GIF, WebP"
-          buttonText="Choose Images"
-          helperText="Maximum size: 10MB"
-          acceptedFileTypes={['image/jpeg', 'image/png', 'image/gif', 'image/webp']}
-          multiple={true}
-        />
+      <div style={{ marginBottom: '40px' }}>
+        <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Images Only</h3>
+        <div style={{ maxWidth: '500px' }}>
+          <Upload
+            title="Upload Images"
+            supportedFilesText="JPEG, PNG, GIF, WebP"
+            buttonText="Choose Images"
+            helperText="Maximum size: 10MB"
+            acceptedFileTypes={['image/jpeg', 'image/png', 'image/gif', 'image/webp']}
+            multiple={true}
+          />
+        </div>
       </div>
-    </div>
 
-    <div style={{ marginBottom: '40px' }}>
-      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Documents Only</h3>
-      <div style={{ maxWidth: '500px' }}>
-        <Upload
-          title="Upload Documents"
-          supportedFilesText="PDF, Word, Excel, PowerPoint"
-          buttonText="Choose Documents"
-          helperText="Maximum size: 25MB"
-          acceptedFileTypes={[
-            'application/pdf',
-            'application/msword',
-            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-            'application/vnd.ms-excel',
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-          ]}
-        />
+      <div style={{ marginBottom: '40px' }}>
+        <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>
+          Documents Only
+        </h3>
+        <div style={{ maxWidth: '500px' }}>
+          <Upload
+            title="Upload Documents"
+            supportedFilesText="PDF, Word, Excel, PowerPoint"
+            buttonText="Choose Documents"
+            helperText="Maximum size: 25MB"
+            acceptedFileTypes={[
+              'application/pdf',
+              'application/msword',
+              'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+              'application/vnd.ms-excel',
+              'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            ]}
+          />
+        </div>
       </div>
     </div>
-  </div>
   ),
   parameters: {
     docs: {