@shohojdhara/atomix 0.2.4 → 0.2.5

package/src/components/Toggle/Toggle.stories.tsx

@@ -58,7 +58,7 @@ export const Glass = {
     disabled: false,
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -81,10 +81,11 @@ export const GlassOn = {
     disabled: false,
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
-        background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+        background:
+          'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         padding: '3rem',
@@ -112,7 +113,7 @@ export const GlassCustom = {
       cornerRadius: 12,
     },
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',

package/src/components/Toggle/Toggle.tsx

@@ -29,6 +29,11 @@ export interface ToggleProps {
    */
   className?: string;
 
+  /**
+   * Inline style for the component
+   */
+  style?: React.CSSProperties;
+
   /**
    * Glass morphism effect for the toggle
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
@@ -45,6 +50,7 @@ export const Toggle: React.FC<ToggleProps> = ({
   onToggleOff,
   disabled = false,
   className = '',
+  style,
   glass,
 }) => {
   const [isOn, setIsOn] = useState(initialOn);
@@ -76,6 +82,7 @@ export const Toggle: React.FC<ToggleProps> = ({
   const toggleContent = (
     <div
       className={`c-toggle ${isOn ? TOGGLE.CLASSES.IS_ON : ''} ${disabled ? 'is-disabled' : ''} ${className}`}
+      style={style}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
       role="switch"
@@ -100,11 +107,7 @@ export const Toggle: React.FC<ToggleProps> = ({
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return (
-      <AtomixGlass {...glassProps}>
-        {toggleContent}
-      </AtomixGlass>
-    );
+    return <AtomixGlass {...glassProps}>{toggleContent}</AtomixGlass>;
   }
 
   return toggleContent;

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -129,12 +129,14 @@ GlassTooltip.args = {
   glass: true,
 };
 GlassTooltip.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),
@@ -158,12 +160,14 @@ GlassTooltipCustom.args = {
   },
 };
 GlassTooltipCustom.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),
@@ -180,12 +184,14 @@ GlassTooltipClick.args = {
   glass: true,
 };
 GlassTooltipClick.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),
@@ -202,12 +208,14 @@ GlassTooltipPositions.args = {
   glass: true,
 };
 GlassTooltipPositions.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),
@@ -234,12 +242,14 @@ GlassTooltipRich.args = {
   glass: true,
 };
 GlassTooltipRich.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),

package/src/components/Tooltip/Tooltip.tsx

@@ -37,6 +37,11 @@ export interface TooltipProps {
    */
   className?: string;
 
+  /**
+   * Inline style for the component
+   */
+  style?: React.CSSProperties;
+
   /**
    * Delay before showing the tooltip (in milliseconds)
    */
@@ -60,6 +65,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   position = TOOLTIP.DEFAULTS.POSITION,
   trigger = TOOLTIP.DEFAULTS.TRIGGER,
   className = '',
+  style,
   delay = TOOLTIP.DEFAULTS.DELAY,
   offset = TOOLTIP.DEFAULTS.OFFSET,
   glass,
@@ -129,7 +135,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   }
 
   return (
-    <div className="u-position-relative u-d-inline-block">
+    <div className="u-position-relative u-d-inline-block" style={style}>
       <div
         className={`${TOOLTIP.SELECTORS.TRIGGER.substring(1)}${className ? ` ${className}` : ''}`}
         {...triggerProps}
@@ -154,7 +160,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
                 mode: 'shader' as const,
               };
 
-              const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+              const glassProps =
+                glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
               return (
                 <AtomixGlass {...glassProps}>

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

@@ -5,26 +5,55 @@ import { Upload } from './Upload';
 export default {
   title: 'Components/Upload',
   component: Upload,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A modern file upload component with drag & drop functionality, progress tracking, and multiple size variants.',
+      },
+    },
+  },
   argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+      defaultValue: 'md',
+      description: 'Size variant of the upload component',
+    },
     disabled: {
       control: { type: 'boolean' },
       defaultValue: false,
+      description: 'Whether the upload component is disabled',
     },
     maxSizeInMB: {
       control: { type: 'number' },
       defaultValue: 5,
+      description: 'Maximum file size in MB',
     },
     multiple: {
       control: { type: 'boolean' },
       defaultValue: false,
+      description: 'Whether multiple files can be selected',
     },
     title: {
       control: { type: 'text' },
       defaultValue: 'Drag and Drop files here',
+      description: 'Text for the drag and drop section',
+    },
+    supportedFilesText: {
+      control: { type: 'text' },
+      defaultValue: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
+      description: 'Text describing supported file types',
     },
     buttonText: {
       control: { type: 'text' },
       defaultValue: 'Choose File',
+      description: 'Text for the upload button',
+    },
+    helperText: {
+      control: { type: 'text' },
+      defaultValue: 'Maximum size: 5MB',
+      description: 'Helper text displayed below the button',
     },
   },
 } as Meta<typeof Upload>;
@@ -38,11 +67,72 @@ const Template: StoryFn<typeof Upload> = args => (
 // Default upload component
 export const Default = Template.bind({});
 Default.args = {
+  size: 'md',
   title: 'Drag and Drop files here',
   supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
   buttonText: 'Choose File',
   helperText: 'Maximum size: 5MB',
 };
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'The default upload component with medium size and standard styling.',
+    },
+  },
+};
+
+// Size Variants
+export const SizeVariants: StoryFn<typeof Upload> = () => (
+  <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 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>
+      <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>
+);
+SizeVariants.parameters = {
+  docs: {
+    description: {
+      story: 'Upload component in different sizes: small (sm), medium (md), and large (lg).',
+    },
+  },
+};
 
 // Disabled state
 export const Disabled = Template.bind({});
@@ -50,6 +140,13 @@ Disabled.args = {
   ...Default.args,
   disabled: true,
 };
+Disabled.parameters = {
+  docs: {
+    description: {
+      story: 'Upload component in disabled state with reduced opacity and no interactions.',
+    },
+  },
+};
 
 // Manual state controls
 const WithStateControls: React.FC = () => {
@@ -203,12 +300,29 @@ const WithStateControls: React.FC = () => {
 };
 
 export const WithControls: StoryFn<typeof Upload> = () => <WithStateControls />;
+WithControls.parameters = {
+  docs: {
+    description: {
+      story:
+        'Interactive example showing different upload states: default, uploading with progress, success, and error states.',
+    },
+  },
+};
 
 // Custom Icon
 export const CustomIcon = Template.bind({});
 CustomIcon.args = {
   ...Default.args,
   icon: <i className="icon-lux-upload-cloud"></i>,
+  title: 'Upload your documents',
+  supportedFilesText: 'Drag files here or click to browse',
+};
+CustomIcon.parameters = {
+  docs: {
+    description: {
+      story: 'Upload component with a custom icon and personalized text content.',
+    },
+  },
 };
 
 // Multiple file upload
@@ -217,4 +331,142 @@ MultipleFiles.args = {
   ...Default.args,
   multiple: true,
   buttonText: 'Choose Files',
+  title: 'Upload multiple files',
+  supportedFilesText: 'Select multiple files at once',
+  helperText: 'Maximum size: 5MB per file',
+};
+MultipleFiles.parameters = {
+  docs: {
+    description: {
+      story: 'Upload component configured to accept multiple files at once.',
+    },
+  },
+};
+
+// Drag and Drop Demo
+export const DragDropDemo: StoryFn<typeof Upload> = () => {
+  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>
+
+      <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([])}
+            style={{
+              marginTop: '12px',
+              padding: '6px 12px',
+              fontSize: '12px',
+              backgroundColor: '#6c757d',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+            }}
+          >
+            Clear List
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+DragDropDemo.parameters = {
+  docs: {
+    description: {
+      story:
+        'Interactive demonstration of drag & drop functionality with visual feedback and file tracking.',
+    },
+  },
+};
+
+// Different File Types
+export const FileTypeRestrictions: StoryFn<typeof Upload> = () => (
+  <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>
+    </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>
+    </div>
+  </div>
+);
+FileTypeRestrictions.parameters = {
+  docs: {
+    description: {
+      story: 'Upload components configured for specific file types with appropriate messaging.',
+    },
+  },
 };