@idealyst/components 1.0.83 → 1.0.84

package/src/Icon/types.ts

@@ -1,34 +1,40 @@
-import { IconName } from "./icon-types";
-import type { DisplayColorVariant } from '../theme/variants';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from "./icon-types";
+import type { Size } from '@idealyst/theme';
+import { Color, Intent } from '@idealyst/theme';
 
-export type IconSizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type IconSizeVariant = Size | number;
 
 export interface IconProps {
   /**
    * The name of the icon to display
    */
-  name: IconName;
-  
+  name: IconName | `mdi:${IconName}`;
+
   /**
    * The size variant of the icon
    */
-  size?: IconSizeVariant | number;
+  size?: IconSizeVariant;
 
   /**
    * Predefined color variant based on theme
    */
-  color?: DisplayColorVariant;
-  
+  color?: Color;
+  /**
+   * Intent variant for the icon
+   */
+  intent?: Intent;
+
   /**
    * Additional styles (platform-specific)
    */
-  style?: any;
-  
+  style?: React.CSSProperties | StyleProp<ViewStyle>;
+
   /**
    * Test ID for testing
    */
   testID?: string;
-  
+
   /**
    * Accessibility label for screen readers
    */

package/src/Image/Image.native.tsx

@@ -0,0 +1,86 @@
+import React, { useState, forwardRef } from 'react';
+import { Image as RNImage, View } from 'react-native';
+import { imageStyles } from './Image.styles';
+import type { ImageProps } from './types';
+import ActivityIndicator from '../ActivityIndicator';
+
+const Image = forwardRef<View, ImageProps>(({
+  source,
+  alt,
+  width,
+  height,
+  aspectRatio,
+  objectFit = 'cover',
+  placeholder,
+  fallback,
+  onLoad,
+  onError,
+  borderRadius,
+  style,
+  testID,
+  accessibilityLabel,
+}, ref) => {
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  const handleLoad = () => {
+    setIsLoading(false);
+    onLoad?.();
+  };
+
+  const handleError = (e: any) => {
+    setIsLoading(false);
+    setHasError(true);
+    onError?.(e);
+  };
+
+  // Map objectFit to React Native resizeMode
+  const resizeMode = objectFit === 'contain' ? 'contain'
+    : objectFit === 'cover' ? 'cover'
+    : objectFit === 'fill' ? 'stretch'
+    : objectFit === 'scale-down' ? 'contain'
+    : 'cover';
+
+  const imageSource = typeof source === 'string' ? { uri: source } : source;
+
+  const containerStyle = [
+    imageStyles.container,
+    {
+      width: width || '100%',
+      height: height || undefined,
+      aspectRatio: aspectRatio || undefined,
+      borderRadius: borderRadius || undefined,
+    },
+    style,
+  ];
+
+  return (
+    <View ref={ref} style={containerStyle as any} testID={testID}>
+      <RNImage
+        source={imageSource as any}
+        style={[imageStyles.image, { borderRadius }]}
+        resizeMode={resizeMode}
+        onLoad={handleLoad}
+        onError={handleError}
+        accessibilityLabel={accessibilityLabel || alt}
+      />
+
+      {isLoading && !hasError && (
+        <View style={imageStyles.placeholder}>
+          {placeholder || <ActivityIndicator size="md" />}
+        </View>
+      )}
+
+      {hasError && (
+        <View style={imageStyles.fallback}>
+          {fallback}
+        </View>
+      )}
+    </View>
+  );
+});
+
+Image.displayName = 'Image';
+
+export default Image;

package/src/Image/Image.styles.tsx

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles} from '@idealyst/theme';
+
+type ImageVariants = {}
+
+export type ExpandedImageStyles = StylesheetStyles<keyof ImageVariants>;
+
+export type ImageStylesheet = {
+    container: ExpandedImageStyles;
+    image: ExpandedImageStyles;
+    placeholder: ExpandedImageStyles;
+    fallback: ExpandedImageStyles;
+    loadingIndicator: ExpandedImageStyles;
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const imageStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    container: {
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundColor: theme.colors['gray.200'],
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    placeholder: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: theme.colors['gray.200'],
+    },
+    fallback: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: theme.colors['gray.300'],
+        color: theme.colors['gray.600'],
+    },
+    loadingIndicator: {
+        color: theme.colors['gray.600'],
+    },
+  };
+});

package/src/Image/Image.web.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { imageStyles } from './Image.styles';
+import type { ImageProps } from './types';
+import ActivityIndicator from '../ActivityIndicator';
+
+const Image: React.FC<ImageProps> = ({
+  source,
+  alt = '',
+  width,
+  height,
+  aspectRatio,
+  objectFit = 'cover',
+  loading = 'lazy',
+  placeholder,
+  fallback,
+  onLoad,
+  onError,
+  borderRadius,
+  style,
+  testID,
+  accessibilityLabel,
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  const handleLoad = () => {
+    setIsLoading(false);
+    onLoad?.();
+  };
+
+  const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    setIsLoading(false);
+    setHasError(true);
+    onError?.(e);
+  };
+
+  const imageSource = typeof source === 'string' ? source : (source as any)?.uri || '';
+
+  const containerProps = getWebProps([
+    imageStyles.container,
+    style,
+    {
+      width: width || '100%',
+      height: height || 'auto',
+      aspectRatio: aspectRatio ? String(aspectRatio) : undefined,
+      borderRadius: borderRadius ? `${borderRadius}px` : undefined,
+    } as any,
+  ]);
+
+  const imageProps = getWebProps([
+    imageStyles.image,
+    {
+      objectFit: objectFit,
+      borderRadius: borderRadius ? `${borderRadius}px` : undefined,
+    }
+  ]);
+
+  const placeholderProps = getWebProps([imageStyles.placeholder]);
+  const fallbackProps = getWebProps([imageStyles.fallback]);
+
+  return (
+    <div
+      {...containerProps}
+      data-testid={testID}
+    >
+      <img
+        {...imageProps}
+        src={imageSource}
+        alt={alt}
+        loading={loading}
+        onLoad={handleLoad}
+        onError={handleError}
+        aria-label={accessibilityLabel || alt}
+      />
+
+      {isLoading && !hasError && (
+        <div {...placeholderProps}>
+          {placeholder || <ActivityIndicator size="md" />}
+        </div>
+      )}
+
+      {hasError && (
+        <div {...fallbackProps}>
+          {fallback || <span>Failed to load image</span>}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Image;

package/src/Image/index.native.ts

@@ -0,0 +1,5 @@
+import ImageComponent from './Image.native';
+
+export default ImageComponent;
+export { ImageComponent as Image };
+export * from './types';

package/src/Image/index.ts

@@ -0,0 +1,5 @@
+import ImageComponent from './Image.web';
+
+export default ImageComponent;
+export { ImageComponent as Image };
+export * from './types';

package/src/Image/types.ts

@@ -0,0 +1,21 @@
+import type { StyleProp, ImageStyle, ImageSourcePropType } from 'react-native';
+
+export type ImageObjectFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+
+export interface ImageProps {
+  source: ImageSourcePropType | string;
+  alt?: string;
+  width?: number | string;
+  height?: number | string;
+  aspectRatio?: number;
+  objectFit?: ImageObjectFit;
+  loading?: 'lazy' | 'eager';
+  placeholder?: React.ReactNode;
+  fallback?: React.ReactNode;
+  onLoad?: () => void;
+  onError?: (error: any) => void;
+  borderRadius?: number;
+  style?: StyleProp<ImageStyle>;
+  testID?: string;
+  accessibilityLabel?: string;
+}

package/src/Input/Input.native.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
-import { TextInput } from 'react-native';
+import React, { useState, isValidElement } from 'react';
+import { View, TextInput, TouchableOpacity } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { InputProps } from './types';
 import { inputStyles } from './Input.styles';
 
@@ -12,14 +13,22 @@ const Input = React.forwardRef<TextInput, InputProps>(({
   disabled = false,
   inputType = 'text',
   secureTextEntry = false,
+  leftIcon,
+  rightIcon,
+  showPasswordToggle,
   autoCapitalize = 'sentences',
-  size = 'medium',
-  variant = 'default',
+  size = 'md',
+  type = 'outlined',
   hasError = false,
   style,
   testID,
 }, ref) => {
   const [isFocused, setIsFocused] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  // Determine if we should show password toggle
+  const isPasswordField = inputType === 'password' || secureTextEntry;
+  const shouldShowPasswordToggle = isPasswordField && (showPasswordToggle !== false);
 
   const getKeyboardType = () => {
     switch (inputType) {
@@ -48,36 +57,104 @@ const Input = React.forwardRef<TextInput, InputProps>(({
     }
   };
 
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+
   // Apply variants to the stylesheet
   inputStyles.useVariants({
     size,
-    variant,
+    type,
     focused: isFocused,
+    hasError,
+    disabled,
   });
 
-  const inputStyleArray = [
-    inputStyles.input,
-    disabled && inputStyles.disabled,
-    hasError && inputStyles.error,
-    style,
-  ];
+  // Helper to render left icon
+  const renderLeftIcon = () => {
+    if (!leftIcon) return null;
+
+    if (typeof leftIcon === 'string') {
+      const iconStyle = inputStyles.leftIcon;
+      return (
+        <MaterialCommunityIcons
+          name={leftIcon}
+          size={iconStyle.width}
+          color={iconStyle.color}
+        />
+      );
+    } else if (isValidElement(leftIcon)) {
+      return leftIcon;
+    }
+
+    return null;
+  };
+
+  // Helper to render right icon (not password toggle)
+  const renderRightIcon = () => {
+    if (!rightIcon) return null;
+
+    if (typeof rightIcon === 'string') {
+      const iconStyle = inputStyles.rightIcon;
+      return (
+        <MaterialCommunityIcons
+          name={rightIcon}
+          size={iconStyle.width}
+          color={iconStyle.color}
+        />
+      );
+    } else if (isValidElement(rightIcon)) {
+      return rightIcon;
+    }
+
+    return null;
+  };
 
   return (
-    <TextInput
-      ref={ref}
-      value={value}
-      onChangeText={onChangeText}
-      placeholder={placeholder}
-      editable={!disabled}
-      keyboardType={getKeyboardType()}
-      secureTextEntry={secureTextEntry || inputType === 'password'}
-      autoCapitalize={autoCapitalize}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      style={inputStyleArray}
-      testID={testID}
-      placeholderTextColor="#999999"
-    />
+    <View style={[inputStyles.container({ type, hasError }), style]} testID={testID}>
+      {/* Left Icon */}
+      {leftIcon && (
+        <View style={inputStyles.leftIconContainer}>
+          {renderLeftIcon()}
+        </View>
+      )}
+
+      {/* Input */}
+      <TextInput
+        ref={ref}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        editable={!disabled}
+        keyboardType={getKeyboardType()}
+        secureTextEntry={(secureTextEntry || inputType === 'password') && !isPasswordVisible}
+        autoCapitalize={autoCapitalize}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        style={inputStyles.input}
+        placeholderTextColor="#999999"
+      />
+
+      {/* Right Icon or Password Toggle */}
+      {shouldShowPasswordToggle ? (
+        <TouchableOpacity
+          style={inputStyles.passwordToggle}
+          onPress={togglePasswordVisibility}
+          disabled={disabled}
+          accessibilityLabel={isPasswordVisible ? 'Hide password' : 'Show password'}
+        >
+          <MaterialCommunityIcons
+            name={isPasswordVisible ? 'eye-off' : 'eye'}
+            size={inputStyles.passwordToggleIcon.width}
+            color={inputStyles.passwordToggleIcon.color}
+          />
+        </TouchableOpacity>
+      ) : rightIcon ? (
+        <View style={inputStyles.rightIconContainer}>
+          {renderRightIcon()}
+        </View>
+      ) : null}
+    </View>
   );
 });