@idealyst/components 1.0.0

package/plugin/web.js

@@ -0,0 +1,186 @@
+module.exports = function ({ types: t }) {
+  console.log('[mdi-auto-import] Plugin loaded');
+  
+  const importedIcons = new Set();
+  const iconImportIdentifiers = new Map();
+  let hasIconImport = false;
+  
+  function formatIconName(name) {
+    // Handle empty or invalid names
+    if (!name || typeof name !== 'string') {
+      throw new Error(`Invalid icon name: ${name}`);
+    }
+    
+    const formatted = name
+      // Convert kebab-case and snake_case to PascalCase
+      .replace(/[-_]/g, ' ')
+      .replace(/([a-z])([A-Z])/g, '$1 $2')
+      .split(' ')
+      .filter(part => part.length > 0)
+      .map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+      .join('');
+    
+    console.log(`[mdi-auto-import] formatIconName: ${name} -> ${formatted}`);
+    return formatted;
+  }
+  
+  function getMdiIconName(name) {
+    const mdiName = `mdi${formatIconName(name)}`;
+    console.log(`[mdi-auto-import] getMdiIconName: ${name} -> ${mdiName}`);
+    return mdiName;
+  }
+  
+  function getIconIdentifier(iconName) {
+    if (!iconImportIdentifiers.has(iconName)) {
+      iconImportIdentifiers.set(iconName, `_${iconName}`);
+    }
+    const identifier = iconImportIdentifiers.get(iconName);
+    console.log(`[mdi-auto-import] getIconIdentifier: ${iconName} -> ${identifier}`);
+    return identifier;
+  }
+  
+  return {
+    name: 'mdi-auto-import',
+    visitor: {
+      Program: {
+        enter(path) {
+          // Reset state for each file
+          importedIcons.clear();
+          iconImportIdentifiers.clear();
+          hasIconImport = false;
+          
+          // Check if Icon is already imported from @mdi/react
+          path.node.body.forEach(node => {
+            if (t.isImportDeclaration(node) && node.source.value === '@mdi/react') {
+              console.log('[mdi-auto-import] Found @mdi/react import');
+              const hasIconSpecifier = node.specifiers.some(spec => 
+                t.isImportDefaultSpecifier(spec) && spec.local.name === 'MdiIcon'
+              );
+              if (hasIconSpecifier) {
+                console.log('[mdi-auto-import] MdiIcon already imported');
+                hasIconImport = true;
+              }
+            }
+          });
+        },
+        exit(path) {
+          if (importedIcons.size === 0) {
+            return;
+          }
+          console.log(`[mdi-auto-import] importedIcons.size: ${importedIcons.size}`);
+          
+          // Add imports at the top of the file if any icons were used
+          if (importedIcons.size > 0) {
+            console.log('[mdi-auto-import] Adding imports for icons:', Array.from(importedIcons));
+            
+            // Import individual icons from @mdi/js
+            const iconImportSpecifiers = Array.from(importedIcons).map(iconName => {
+              const identifier = getIconIdentifier(iconName);
+              return t.importSpecifier(
+                t.identifier(identifier),
+                t.identifier(iconName)
+              );
+            });
+            
+            const iconImportDeclaration = t.importDeclaration(
+              iconImportSpecifiers,
+              t.stringLiteral('@mdi/js')
+            );
+            
+            // Import Icon component from @mdi/react if not already imported
+            if (!hasIconImport) {
+              console.log('[mdi-auto-import] Adding MdiIcon import from @mdi/react');
+              const iconComponentImport = t.importDeclaration(
+                [t.importDefaultSpecifier(t.identifier('MdiIcon'))],
+                t.stringLiteral('@mdi/react')
+              );
+              path.unshiftContainer('body', iconComponentImport);
+            } else {
+              console.log('[mdi-auto-import] MdiIcon already imported, skipping');
+            }
+            
+            // Add icon imports
+            path.unshiftContainer('body', iconImportDeclaration);
+            console.log('[mdi-auto-import] Imports added successfully');
+          } else {
+            console.log('[mdi-auto-import] No icons to import');
+          }
+        }
+      },
+      
+      JSXElement(path) {
+        const { node } = path;
+        
+        // Check if this is an Icon component from @idealyst/components
+        if (
+          t.isJSXIdentifier(node.openingElement.name) &&
+          node.openingElement.name.name === 'Icon'
+        ) {
+          
+          // Find the name attribute
+          const nameAttr = node.openingElement.attributes.find(attr => 
+            t.isJSXAttribute(attr) && 
+            t.isJSXIdentifier(attr.name) && 
+            attr.name.name === 'name'
+          );
+          
+          if (!nameAttr) {
+            console.log('[mdi-auto-import] No name attribute found');
+            return;
+          }
+          
+          let iconName;
+          
+          // Handle both string literals and JSX expressions
+          if (nameAttr && t.isStringLiteral(nameAttr.value)) {
+            iconName = nameAttr.value.value;
+          } else if (nameAttr && t.isJSXExpressionContainer(nameAttr.value)) {
+            // Handle JSX expressions like name={'icon-name'} or name={iconVariable}
+            const expression = nameAttr.value.expression;
+            if (t.isStringLiteral(expression)) {
+              iconName = expression.value;
+            } else {
+              // For dynamic expressions, we can't determine the icon at build time
+              // Skip transformation but warn the user
+              console.warn(`[mdi-auto-import] Cannot determine icon name for dynamic expression at ${path.node.loc ? `${path.node.loc.start.line}:${path.node.loc.start.column}` : 'unknown location'}`);
+              return;
+            }
+          }
+          
+          if (iconName) {
+            console.log(`[mdi-auto-import] Processing icon: ${iconName}`);
+            try {
+              const mdiIconName = getMdiIconName(iconName);
+              const iconIdentifier = getIconIdentifier(mdiIconName);
+              
+              // Track that we need to import this icon
+              importedIcons.add(mdiIconName);
+              console.log(`[mdi-auto-import] Added icon to import list: ${mdiIconName}`);
+              
+              // Replace name="iconName" with path={iconIdentifier}
+              const pathAttr = t.jsxAttribute(
+                t.jsxIdentifier('path'),
+                t.jsxExpressionContainer(t.identifier(iconIdentifier))
+              );
+              
+              // Remove the name attribute and add the path attribute
+              node.openingElement.attributes = node.openingElement.attributes
+                .filter(attr => !(
+                  t.isJSXAttribute(attr) && 
+                  t.isJSXIdentifier(attr.name) && 
+                  attr.name.name === 'name'
+                ))
+                .concat(pathAttr);
+              
+              console.log(`[mdi-auto-import] Transformed Icon component: name="${iconName}" -> path={${iconIdentifier}}`);
+            } catch (error) {
+              console.error(`[mdi-auto-import] Error processing icon "${iconName}": ${error.message}`);
+            }
+          } else {
+            console.log('[mdi-auto-import] No icon name found');
+          }
+        }
+      }
+    }
+  };
+}; 

package/src/Avatar/Avatar.native.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { View, Text, Image } from 'react-native';
+import { AvatarProps } from './types';
+import { avatarStyles } from './Avatar.styles';
+
+const Avatar: React.FC<AvatarProps> = ({
+  src,
+  alt,
+  fallback,
+  size = 'medium',
+  shape = 'circle',
+  style,
+  testID,
+}) => {
+  const [hasError, setHasError] = useState(false);
+
+  avatarStyles.useVariants({
+    size,
+    shape,
+  });
+
+  const handleImageError = () => {
+    setHasError(true);
+  };
+
+  return (
+    <View style={[avatarStyles.avatar, style]} testID={testID}>
+      {src && !hasError ? (
+        <Image
+          source={typeof src === 'string' ? { uri: src } : src}
+          style={avatarStyles.image}
+          onError={handleImageError}
+          accessibilityLabel={alt}
+        />
+      ) : (
+        <Text style={avatarStyles.fallback}>
+          {fallback}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export default Avatar; 

package/src/Avatar/Avatar.styles.tsx

@@ -0,0 +1,67 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const avatarStyles = StyleSheet.create((theme) => ({
+  avatar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors?.surface?.secondary || '#f3f4f6',
+    overflow: 'hidden',
+    
+    variants: {
+      size: {
+        small: {
+          width: 32,
+          height: 32,
+        },
+        medium: {
+          width: 40,
+          height: 40,
+        },
+        large: {
+          width: 48,
+          height: 48,
+        },
+        xlarge: {
+          width: 64,
+          height: 64,
+        },
+      },
+      shape: {
+        circle: {
+          borderRadius: 9999,
+        },
+        square: {
+          borderRadius: theme.borderRadius?.md || 8,
+        },
+      },
+    },
+  },
+  
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  
+  fallback: {
+    color: theme.colors?.text?.primary || '#374151',
+    fontWeight: '600',
+    
+    variants: {
+      size: {
+        small: {
+          fontSize: 14,
+        },
+        medium: {
+          fontSize: 16,
+        },
+        large: {
+          fontSize: 18,
+        },
+        xlarge: {
+          fontSize: 24,
+        },
+      },
+    },
+  },
+})); 

package/src/Avatar/Avatar.web.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { AvatarProps } from './types';
+import { avatarStyles } from './Avatar.styles';
+
+const Avatar: React.FC<AvatarProps> = ({
+  src,
+  alt,
+  fallback,
+  size = 'medium',
+  shape = 'circle',
+  style,
+  testID,
+}) => {
+  const [hasError, setHasError] = useState(false);
+
+  avatarStyles.useVariants({
+    size,
+    shape,
+  });
+
+  const avatarStyleArray = [avatarStyles.avatar, style];
+  const avatarProps = getWebProps(avatarStyleArray);
+  
+  // Generate fallback text styles with proper theming and size
+  const fallbackStyleArray = [avatarStyles.fallback];
+  const fallbackProps = getWebProps(fallbackStyleArray);
+
+  const handleImageError = () => {
+    setHasError(true);
+  };
+
+  return (
+    <div {...avatarProps} data-testid={testID}>
+      {src && !hasError ? (
+        <img
+          src={src}
+          alt={alt}
+          onError={handleImageError}
+          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+        />
+      ) : (
+        <span {...fallbackProps}>
+          {fallback}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Avatar; 

package/src/Avatar/index.native.ts

@@ -0,0 +1,2 @@
+export { default } from './Avatar.native';
+export * from './types'; 

package/src/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Avatar.web';
+export * from './types'; 

package/src/Avatar/index.web.ts

@@ -0,0 +1,2 @@
+export { default } from './Avatar.web';
+export * from './types'; 

package/src/Avatar/types.ts

@@ -0,0 +1,43 @@
+import type { ColorVariant } from '../theme/variants';
+
+export interface AvatarProps {
+  /**
+   * Image source (URL or require())
+   */
+  src?: string | any;
+  
+  /**
+   * Alt text for the image
+   */
+  alt?: string;
+  
+  /**
+   * Fallback text (usually initials)
+   */
+  fallback?: string;
+  
+  /**
+   * Size of the avatar
+   */
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  
+  /**
+   * Shape of the avatar
+   */
+  shape?: 'circle' | 'square';
+  
+  /**
+   * The color scheme of the avatar (for background when no image)
+   */
+  color?: ColorVariant;
+  
+  /**
+   * Additional styles
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+} 

package/src/Badge/Badge.native.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { BadgeProps } from './types';
+import { badgeStyles } from './Badge.styles';
+
+const Badge: React.FC<BadgeProps> = ({
+  children,
+  size = 'medium',
+  variant = 'filled',
+  color = 'blue',
+  style,
+  testID,
+}) => {
+  badgeStyles.useVariants({
+    size,
+    variant: variant as any,
+    color,
+  });
+
+  if (variant === 'dot') {
+    return (
+      <View
+        style={[badgeStyles.badge, style]}
+        testID={testID}
+        accessibilityLabel="status indicator"
+      />
+    );
+  }
+
+  return (
+    <View
+      style={[badgeStyles.badge, style]}
+      testID={testID}
+      accessibilityLabel="badge"
+    >
+      <Text style={badgeStyles.text}>
+        {children}
+      </Text>
+    </View>
+  );
+};
+
+export default Badge; 

package/src/Badge/Badge.styles.tsx

@@ -0,0 +1,154 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { generateBadgeCompoundVariants } from '../theme/variantHelpers';
+
+export const badgeStyles = StyleSheet.create((theme) => ({
+  badge: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 9999,
+    
+    // Web-specific styles for better text centering
+    _web: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      boxSizing: 'border-box',
+      // Text styles for web (since text is rendered directly in the container)
+      fontSize: 12, // Default medium size
+      fontWeight: '600',
+      color: '#ffffff',
+      lineHeight: 1, // Use ratio instead of fixed value for better centering
+    },
+    
+    variants: {
+      size: {
+        small: {
+          minWidth: 16,
+          height: 16,
+          paddingHorizontal: 4,
+        },
+        medium: {
+          minWidth: 20,
+          height: 20,
+          paddingHorizontal: 6,
+        },
+        large: {
+          minWidth: 24,
+          height: 24,
+          paddingHorizontal: 8,
+        },
+      },
+      variant: {
+        filled: {
+          // Colors handled by compound variants
+        },
+        outlined: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+        },
+        dot: {
+          minWidth: 8,
+          width: 8,
+          height: 8,
+          paddingHorizontal: 0, // Override size variant padding
+          paddingVertical: 0,
+        },
+      },
+      // Dynamically generated color variants (placeholder - actual styling in compound variants)
+      color: Object.fromEntries([
+        // All palette colors including shade-specific variants
+        ...(theme.palettes ? Object.entries(theme.palettes).flatMap(([colorKey, palette]) => [
+          // Base color
+          [colorKey, {}],
+          // All shade variants
+          ...Object.keys(palette).map((shade) => [`${colorKey}.${shade}`, {}])
+        ]) : [
+          // Fallback base colors
+          ['blue', {}], ['green', {}], ['red', {}], ['amber', {}], 
+          ['gray', {}], ['purple', {}], ['pink', {}], ['cyan', {}]
+        ]),
+        // Semantic colors
+        ['primary', {}],
+        ['secondary', {}],
+        ['disabled', {}],
+        ['inverse', {}],
+        ['muted', {}],
+      ]),
+    },
+    
+    // Dynamically generated compound variants plus static size variants
+    compoundVariants: [
+      ...generateBadgeCompoundVariants(theme),
+      // Web-specific text size variants
+      {
+        size: 'small',
+        styles: {
+          _web: {
+            fontSize: 10,
+          },
+        },
+      },
+      {
+        size: 'medium',
+        styles: {
+          _web: {
+            fontSize: 12,
+          },
+        },
+      },
+      {
+        size: 'large',
+        styles: {
+          _web: {
+            fontSize: 14,
+          },
+        },
+      },
+    ],
+  },
+  
+  text: {
+    color: '#ffffff',
+    fontWeight: '600',
+    textAlign: 'center',
+    
+    variants: {
+      size: {
+        small: {
+          fontSize: 10,
+          lineHeight: 12, // Tight line height for better vertical centering
+        },
+        medium: {
+          fontSize: 12,
+          lineHeight: 14,
+        },
+        large: {
+          fontSize: 14,
+          lineHeight: 16,
+        },
+      },
+      variant: {
+        filled: {
+          color: '#ffffff',
+        },
+        outlined: {
+          // Colors handled by compound variants
+        },
+        dot: {
+          // No text for dot variant
+        },
+      },
+    },
+    
+    compoundVariants: [
+      // Outlined variant text colors - dynamically generated
+      ...Object.entries(theme.palettes || {}).map(([colorKey, palette]: [string, any]) => ({
+        variant: 'outlined',
+        color: colorKey,
+        styles: {
+          color: palette?.[500] || '#6b7280',
+        },
+      })),
+    ],
+  },
+})); 

package/src/Badge/Badge.web.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { BadgeProps } from './types';
+import { badgeStyles } from './Badge.styles';
+
+const Badge: React.FC<BadgeProps> = ({
+  children,
+  size = 'medium',
+  variant = 'filled',
+  color = 'blue',
+  style,
+  testID,
+}) => {
+  badgeStyles.useVariants({
+    size,
+    variant: variant as any,
+    color,
+  });
+
+  const badgeStyleArray = [badgeStyles.badge, style];
+  const badgeProps = getWebProps(badgeStyleArray);
+
+  if (variant === 'dot') {
+    return (
+      <span
+        {...badgeProps}
+        data-testid={testID}
+        role="status"
+        aria-label="status indicator"
+      />
+    );
+  }
+
+  return (
+    <span
+      {...badgeProps}
+      data-testid={testID}
+      role="status"
+    >
+      {children}
+    </span>
+  );
+};
+
+export default Badge; 

package/src/Badge/index.native.ts

@@ -0,0 +1,2 @@
+export { default } from './Badge.native';
+export * from './types'; 

package/src/Badge/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Badge.web';
+export * from './types'; 

package/src/Badge/index.web.ts

@@ -0,0 +1,2 @@
+export { default } from './Badge.web';
+export * from './types'; 

package/src/Badge/types.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import type { DisplayColorVariant } from '../theme/variants';
+
+export interface BadgeProps {
+  /**
+   * The content to display inside the badge
+   */
+  children?: ReactNode;
+  
+  /**
+   * The size of the badge
+   */
+  size?: 'small' | 'medium' | 'large';
+  
+  /**
+   * The visual style variant of the badge
+   */
+  variant?: 'filled' | 'outlined' | 'dot';
+  
+  /**
+   * The color scheme of the badge
+   */
+  color?: DisplayColorVariant;
+  
+  /**
+   * Additional styles
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}