@shohojdhara/atomix 0.3.2 → 0.3.3

package/scripts/sync-theme-config.js

@@ -0,0 +1,309 @@
+#!/usr/bin/env node
+
+/**
+ * Sync Theme Configuration
+ * 
+ * This script generates src/themes/themes.config.js from theme.config.ts
+ * to maintain a single source of truth for theme configuration.
+ */
+
+import { readFile, writeFile } from 'fs/promises';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// File paths
+const THEME_CONFIG_TS = join(__dirname, '../theme.config.ts');
+const THEMES_CONFIG_JS = join(__dirname, '../src/themes/themes.config.js');
+
+/**
+ * Parse theme.config.ts to extract configuration
+ * Note: This is a simplified parser that works with the current structure
+ */
+async function parseThemeConfigTS() {
+  try {
+    const content = await readFile(THEME_CONFIG_TS, 'utf8');
+    
+    // Extract themes object
+    const themesMatch = content.match(/themes:\s*{([^}]+(?:{[^}]*}[^}]*)*[^}]+)}/s);
+    if (!themesMatch) {
+      throw new Error('Could not find themes configuration');
+    }
+
+    // Extract individual theme configurations
+    const themes = {};
+    const themeRegex = /['"]([^'"]+)['"]\s*:\s*{([^}]+(?:{[^}]*}[^}]*)*[^}]+)}/gs;
+    let match;
+    
+    while ((match = themeRegex.exec(themesMatch[1])) !== null) {
+      const [, themeName, themeConfig] = match;
+      
+      // Parse theme properties
+      const theme = {
+        name: extractValue(themeConfig, 'name'),
+        description: extractValue(themeConfig, 'description'),
+        author: extractValue(themeConfig, 'author'),
+        version: extractValue(themeConfig, 'version'),
+        tags: extractArray(themeConfig, 'tags'),
+        supportsDarkMode: extractBoolean(themeConfig, 'supportsDarkMode'),
+        status: extractValue(themeConfig, 'status'),
+        color: extractValue(themeConfig, 'color'),
+      };
+      
+      // Parse features if present
+      const featuresMatch = themeConfig.match(/features:\s*\[([^\]]*)\]/s);
+      if (featuresMatch) {
+        theme.features = featuresMatch[1]
+          .split(',')
+          .map(f => f.trim().replace(/['"]/g, ''))
+          .filter(f => f.length > 0);
+      }
+      
+      // Parse a11y if present
+      const a11yMatch = themeConfig.match(/a11y:\s*{([^}]*)}/);
+      if (a11yMatch) {
+        theme.a11y = {
+          contrastTarget: extractNumber(a11yMatch[1], 'contrastTarget'),
+          modes: extractArray(a11yMatch[1], 'modes'),
+        };
+      }
+      
+      themes[themeName] = theme;
+    }
+    
+    // Extract build configuration
+    const buildMatch = content.match(/build:\s*(defaultBuildConfig|{[^}]+})/);
+    const build = buildMatch && buildMatch[1] === 'defaultBuildConfig' 
+      ? getDefaultBuildConfig() 
+      : parseBuildConfig(buildMatch?.[1]);
+    
+    // Extract runtime configuration  
+    const runtimeMatch = content.match(/runtime:\s*(defaultRuntimeConfig|{[^}]+})/);
+    const runtime = runtimeMatch && runtimeMatch[1] === 'defaultRuntimeConfig'
+      ? getDefaultRuntimeConfig()
+      : parseRuntimeConfig(runtimeMatch?.[1]);
+    
+    // Extract integration configuration
+    const integrationMatch = content.match(/integration:\s*(defaultIntegrationConfig|{[^}]+})/);
+    const integration = integrationMatch && integrationMatch[1] === 'defaultIntegrationConfig'
+      ? getDefaultIntegrationConfig()
+      : parseIntegrationConfig(integrationMatch?.[1]);
+    
+    return {
+      themes,
+      build,
+      runtime,
+      integration,
+      dependencies: {},
+    };
+  } catch (error) {
+    console.error('❌ Failed to parse theme.config.ts:', error.message);
+    throw error;
+  }
+}
+
+/**
+ * Helper function to extract string values
+ */
+function extractValue(text, key) {
+  const regex = new RegExp(`${key}:\\s*['"]([^'"]+)['"]`);
+  const match = text.match(regex);
+  return match ? match[1] : undefined;
+}
+
+/**
+ * Helper function to extract number values
+ */
+function extractNumber(text, key) {
+  const regex = new RegExp(`${key}:\\s*(\\d+(?:\\.\\d+)?)`);
+  const match = text.match(regex);
+  return match ? parseFloat(match[1]) : undefined;
+}
+
+/**
+ * Helper function to extract boolean values
+ */
+function extractBoolean(text, key) {
+  const regex = new RegExp(`${key}:\\s*(true|false)`);
+  const match = text.match(regex);
+  return match ? match[1] === 'true' : undefined;
+}
+
+/**
+ * Helper function to extract array values
+ */
+function extractArray(text, key) {
+  const regex = new RegExp(`${key}:\\s*\\[([^\\]]*)\\]`);
+  const match = text.match(regex);
+  if (!match) return undefined;
+  
+  return match[1]
+    .split(',')
+    .map(item => item.trim().replace(/['"]/g, ''))
+    .filter(item => item.length > 0);
+}
+
+/**
+ * Get default build configuration
+ */
+function getDefaultBuildConfig() {
+  return {
+    output: {
+      directory: 'themes',
+      formats: {
+        expanded: '.css',
+        compressed: '.min.css',
+      },
+    },
+    sass: {
+      style: 'expanded',
+      sourceMap: true,
+      loadPaths: ['src'],
+    },
+  };
+}
+
+/**
+ * Get default runtime configuration
+ */
+function getDefaultRuntimeConfig() {
+  return {
+    basePath: '/themes',
+    cdnPath: null,
+    preload: ['shaj-default'],
+    lazy: true,
+    defaultTheme: 'shaj-default',
+    storageKey: 'atomix-theme',
+    useMinified: "process.env.NODE_ENV === 'production'",
+  };
+}
+
+/**
+ * Get default integration configuration
+ */
+function getDefaultIntegrationConfig() {
+  return {
+    cssVariables: {
+      colorMode: '--storybook-color-mode',
+    },
+    classNames: {
+      theme: 'data-theme',
+      colorMode: 'data-atomix-color-mode',
+    },
+  };
+}
+
+/**
+ * Parse build configuration
+ */
+function parseBuildConfig(configText) {
+  if (!configText) return getDefaultBuildConfig();
+  // For now, return default config
+  // A more sophisticated parser would be needed for complex objects
+  return getDefaultBuildConfig();
+}
+
+/**
+ * Parse runtime configuration
+ */
+function parseRuntimeConfig(configText) {
+  if (!configText) return getDefaultRuntimeConfig();
+  // For now, return default config
+  // A more sophisticated parser would be needed for complex objects
+  return getDefaultRuntimeConfig();
+}
+
+/**
+ * Parse integration configuration
+ */
+function parseIntegrationConfig(configText) {
+  if (!configText) return getDefaultIntegrationConfig();
+  // For now, return default config
+  // A more sophisticated parser would be needed for complex objects
+  return getDefaultIntegrationConfig();
+}
+
+/**
+ * Generate themes.config.js content
+ */
+function generateThemesConfigJS(config) {
+  const { themes, build, runtime, integration, dependencies } = config;
+  
+  // Convert themes to metadata format
+  const metadata = {};
+  for (const [key, theme] of Object.entries(themes)) {
+    metadata[key] = { ...theme };
+    // Remove undefined values
+    Object.keys(metadata[key]).forEach(k => {
+      if (metadata[key][k] === undefined) {
+        delete metadata[key][k];
+      }
+    });
+  }
+  
+  return `/**
+ * Theme Configuration
+ *
+ * This file is auto-generated from theme.config.ts
+ * DO NOT EDIT MANUALLY - Edit theme.config.ts instead
+ * 
+ * Generated on: ${new Date().toISOString()}
+ */
+
+export const themesConfig = {
+  // Theme metadata
+  metadata: ${JSON.stringify(metadata, null, 4).replace(/"([^"]+)":/g, '$1:')},
+
+  // Build configuration
+  build: ${JSON.stringify(build, null, 4).replace(/"([^"]+)":/g, '$1:')},
+
+  // Export configuration for package.json
+  exports: {
+    './themes/*': './dist/themes/*.css',
+    './themes/*.min': './dist/themes/*.min.css',
+  },
+
+  // Theme integration settings
+  integration: ${JSON.stringify(integration, null, 4).replace(/"([^"]+)":/g, '$1:')},
+
+  // Runtime theme loading configuration
+  runtime: ${JSON.stringify(runtime, null, 4).replace(/"([^"]+)":/g, '$1:').replace(/"process\.env\.NODE_ENV === 'production'"/g, "process.env.NODE_ENV === 'production'")},
+
+  // Theme dependencies (if a theme requires another theme to be loaded)
+  dependencies: ${JSON.stringify(dependencies, null, 4).replace(/"([^"]+)":/g, '$1:')},
+};`;
+}
+
+/**
+ * Main function
+ */
+async function main() {
+  console.log('🔄 Syncing theme configuration...\n');
+  
+  try {
+    // Parse theme.config.ts
+    console.log('📖 Reading theme.config.ts...');
+    const config = await parseThemeConfigTS();
+    console.log(`  ✅ Found ${Object.keys(config.themes).length} themes`);
+    
+    // Generate themes.config.js
+    console.log('\n📝 Generating themes.config.js...');
+    const jsContent = generateThemesConfigJS(config);
+    
+    // Write to file
+    await writeFile(THEMES_CONFIG_JS, jsContent, 'utf8');
+    console.log('  ✅ Written to src/themes/themes.config.js');
+    
+    console.log('\n✨ Configuration sync complete!');
+    console.log('   themes.config.js has been updated from theme.config.ts');
+    
+  } catch (error) {
+    console.error('\n💥 Sync failed:', error.message);
+    process.exit(1);
+  }
+}
+
+// Run the sync
+main();

package/src/components/List/ListGroup.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import classNames from 'classnames';
 import { ListGroupProps } from '../../lib/types/components';
 import { LIST_GROUP } from '../../lib/constants/components';
 import { List } from './List';
@@ -11,7 +10,7 @@ export const ListGroup: React.FC<ListGroupProps> = ({
   variant = 'default',
 }) => {
   // Generate CSS classes
-  const listGroupClasses = classNames(LIST_GROUP.BASE_CLASS, className);
+  const listGroupClasses = [LIST_GROUP.BASE_CLASS, className].filter(Boolean).join(' ');
 
   // Get valid List children
   const validLists = React.Children.toArray(children).filter(

package/src/components/Popover/Popover.tsx

@@ -71,7 +71,7 @@ export const Popover: React.FC<PopoverProps> = ({
       {typeof document !== 'undefined' &&
         createPortal(
           <div
-            ref={popoverRef}
+            ref={popoverRef as React.RefObject<HTMLDivElement>}
             className={`c-popover c-popover--${currentPosition} ${isOpen ? POPOVER.CLASSES.IS_OPEN : ''} ${glass ? 'c-popover--glass' : ''} ${className}`}
             style={style}
             id={popoverId}
@@ -106,7 +106,7 @@ export const Popover: React.FC<PopoverProps> = ({
                 <div className="c-popover__content-inner">{content}</div>
               </div>
             )}
-            <div ref={arrowRef} className="c-popover__arrow"></div>
+            <div ref={arrowRef as React.RefObject<HTMLDivElement>} className="c-popover__arrow"></div>
           </div>,
           document.body
         )}

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

@@ -5,6 +5,9 @@ import { Tooltip } from './Tooltip';
 export default {
   title: 'Components/Tooltip',
   component: Tooltip,
+  parameters: {
+    layout: 'fullscreen',
+  },
   argTypes: {
     position: {
       control: { type: 'select' },
@@ -132,9 +135,13 @@ GlassTooltip.decorators = [
   Story => (
     <div
       style={{
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        minHeight: '100vh',
-        padding: '2rem',
+        backgroundImage:
+          'url(https://images.unsplash.com/photo-1764066183840-9afb28867988?q=80&w=3135&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        minHeight: '100dvh',
+        width: '100dvw',
+        margin: 0,
       }}
     >
       <Story />
@@ -163,9 +170,15 @@ GlassTooltipCustom.decorators = [
   Story => (
     <div
       style={{
-        background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
-        minHeight: '100vh',
-        padding: '2rem',
+        background:
+          'url(https://images.unsplash.com/photo-1758843412266-e8661a80ada2?q=80&w=2128&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        minHeight: '100dvh',
+        width: '100dvw',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
       }}
     >
       <Story />
@@ -187,9 +200,17 @@ GlassTooltipClick.decorators = [
   Story => (
     <div
       style={{
-        background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
-        minHeight: '100vh',
+        background:
+          'url(https://images.unsplash.com/photo-1658937364065-60f3f6818724?q=80&w=2093&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        minHeight: '100dvh',
+        width: '100dvw',
+        margin: 0,
         padding: '2rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
       }}
     >
       <Story />
@@ -211,9 +232,17 @@ GlassTooltipPositions.decorators = [
   Story => (
     <div
       style={{
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        minHeight: '100vh',
+        background:
+          'url(https://images.unsplash.com/photo-1657617053432-09e4adf998bb?q=80&w=2532&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        minHeight: '100dvh',
+        width: '100dvw',
+        margin: 0,
         padding: '2rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
       }}
     >
       <Story />
@@ -245,9 +274,17 @@ GlassTooltipRich.decorators = [
   Story => (
     <div
       style={{
-        background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
-        minHeight: '100vh',
+        background:
+          'url(https://images.unsplash.com/photo-1685334466570-6c6162e242b6?q=80&w=2534&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        minHeight: '100dvh',
+        width: '100dvw',
+        margin: 0,
         padding: '2rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
       }}
     >
       <Story />

package/src/components/Tooltip/Tooltip.tsx

@@ -1,7 +1,8 @@
-import React, { ReactNode, useRef, useState } from 'react';
+import React, { ReactNode } 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';
 
 export interface TooltipProps {
   /**
@@ -70,38 +71,22 @@ export const Tooltip: React.FC<TooltipProps> = ({
   offset = TOOLTIP.DEFAULTS.OFFSET,
   glass,
 }) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const tooltipId = React.useId();
-
-  const showTooltip = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-
-    if (delay > 0) {
-      timeoutRef.current = setTimeout(() => {
-        setIsVisible(true);
-      }, delay);
-    } else {
-      setIsVisible(true);
-    }
-  };
-
-  const hideTooltip = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    setIsVisible(false);
-  };
-
-  const toggleTooltip = () => {
-    if (isVisible) {
-      hideTooltip();
-    } else {
-      showTooltip();
-    }
-  };
+  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> = {
@@ -117,40 +102,23 @@ export const Tooltip: React.FC<TooltipProps> = ({
     return positionMap[position] || 'c-tooltip--top';
   };
 
-  const wrapperProps: React.HTMLAttributes<HTMLDivElement> = {};
-  const triggerProps: React.HTMLAttributes<HTMLDivElement> = {
-    'aria-describedby': isVisible ? tooltipId : undefined,
-  };
-
-  if (trigger === 'hover') {
-    wrapperProps.onMouseEnter = showTooltip;
-    wrapperProps.onMouseLeave = hideTooltip;
-    triggerProps.onFocus = showTooltip;
-    triggerProps.onBlur = hideTooltip;
-  } else if (trigger === 'click') {
-    triggerProps.onClick = toggleTooltip;
-    // For click trigger, we might want to handle keyboard activation too, but div isn't focusable by default.
-    // Ideally the child should be a button.
-  }
-
   const renderContent = () => {
     const contentElement = (
       <div
-        className={`c-tooltip__content ${TOOLTIP.SELECTORS.CONTENT.substring(1)} ${isVisible && 'is-active'}`}
+        className={`c-tooltip__content ${TOOLTIP.SELECTORS.CONTENT.substring(1)} ${isVisible && isPositioned && 'is-active'}`}
       >
-        <span className={TOOLTIP.SELECTORS.ARROW.substring(1)}></span>
+        <span 
+          className={TOOLTIP.SELECTORS.ARROW.substring(1)}
+          style={arrowStyle}
+        ></span>
         {content}
       </div>
     );
 
     if (glass) {
       const defaultGlassProps = {
-        displacementScale: 40,
-        blurAmount: 1,
-        saturation: 160,
-        aberrationIntensity: 0.3,
-        cornerRadius: 6,
-        mode: 'shader' as const,
+        displacementScale: 100,
+        blurAmount: 3,
       };
 
       const glassProps =
@@ -169,6 +137,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       {...wrapperProps}
     >
       <div
+        ref={triggerRef}
         className={`${TOOLTIP.SELECTORS.TRIGGER.substring(1)}${className ? ` ${className}` : ''}`}
         {...triggerProps}
       >
@@ -176,12 +145,17 @@ export const Tooltip: React.FC<TooltipProps> = ({
       </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={{ '--atomix-tooltip-offset': `${offset}px` } as React.CSSProperties}
+          style={{
+            ...tooltipStyle,
+            // Position off-screen initially to prevent jump, then move to calculated position
+            ...(isPositioned ? {} : { left: '-9999px', top: '-9999px' }),
+          }}
         >
           {renderContent()}
         </div>