@idealyst/components 1.0.83 → 1.0.84

package/src/Text/Text.styles.tsx

@@ -1,67 +1,79 @@
 import { StyleSheet } from "react-native-unistyles";
-import { generateColorVariants } from "../theme/variantHelpers";
+import { Theme, StylesheetStyles, Styles, DynamicStyles } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { TextAlignVariant, TextColorVariant, TextSizeVariant, TextWeightVariant } from "./types";
 
-const textStyles = StyleSheet.create((theme) => ({
-  text: {
-    variants: {
-      size: {
-        small: {
-          fontSize: theme.typography.fontSize.xs,
-          lineHeight: theme.typography.fontSize.xs * 1.33,
-        },
-        medium: {
-          fontSize: theme.typography.fontSize.md,
-          lineHeight: theme.typography.fontSize.md * 1.5,
-        },
-        large: {
-          fontSize: theme.typography.fontSize.lg,
-          lineHeight: theme.typography.fontSize.lg * 1.4,
-        },
-        xlarge: {
-          fontSize: theme.typography.fontSize.xl,
-          lineHeight: theme.typography.fontSize.xl * 1.33,
-        },
-      },
-      weight: {
-        light: {
-          fontWeight: theme.typography.fontWeight.light,
-        },
-        normal: {
-          fontWeight: theme.typography.fontWeight.regular,
-        },
-        medium: {
-          fontWeight: theme.typography.fontWeight.medium,
-        },
-        semibold: {
-          fontWeight: theme.typography.fontWeight.semibold,
-        },
-        bold: {
-          fontWeight: theme.typography.fontWeight.bold,
-        },
-      },
-      align: {
-        left: {
-          textAlign: 'left',
-        },
-        center: {
-          textAlign: 'center',
-        },
-        right: {
-          textAlign: 'right',
-        },
-      },
-      // Dynamically generated color variants
-      color: generateColorVariants(theme),
-    },
-    color: theme.colors.text.primary, // Default text color
-    margin: 0,
-    padding: 0,
-    // Web-specific styles
-    _web: {
-      fontFamily: 'inherit',
-      lineHeight: 'inherit',
-    },
-  },
-}));
+type TextVariants = {
+    size: TextSizeVariant;
+    weight: TextWeightVariant;
+    align: TextAlignVariant;
+    color: TextColorVariant;
+}
 
-export default textStyles; 
+export type TextStylesheet = {
+    text: DynamicStyles<keyof TextVariants>;
+}
+
+/**
+ * Create size variants for text
+ */
+function createSizeVariants(theme: Theme): any {
+    return buildSizeVariants(theme, 'text', (size) => ({
+        fontSize: size.fontSize,
+        lineHeight: size.lineHeight,
+    }));
+}
+
+function createTextStyles(theme: Theme) {
+    return ({ color }: Partial<TextVariants>) => {
+        const colorValue = theme.colors.text[color] || theme.colors.text.primary;
+        return {
+            margin: 0,
+            padding: 0,
+            color: colorValue,
+            variants: {
+                size: createSizeVariants(theme) as any,
+                weight: {
+                    light: {
+                        fontWeight: '300',
+                    },
+                    normal: {
+                        fontWeight: '400',
+                    },
+                    medium: {
+                        fontWeight: '500',
+                    },
+                    semibold: {
+                        fontWeight: '600',
+                    },
+                    bold: {
+                        fontWeight: '700',
+                    },
+                } as const,
+                align: {
+                    left: {
+                        textAlign: 'left',
+                    },
+                    center: {
+                        textAlign: 'center',
+                    },
+                    right: {
+                        textAlign: 'right',
+                    },
+                } as const,
+            } as const,
+            _web: {
+                fontFamily: 'inherit',
+                lineHeight: 'inherit',
+            },
+        } as const;
+    }
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+export const textStyles = StyleSheet.create((theme: Theme) => {
+  return {
+        text: createTextStyles(theme),
+    } as TextStylesheet;
+});

package/src/Text/Text.web.tsx

@@ -1,41 +1,46 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { TextProps } from './types';
-import textStyles from './Text.styles';
+import { textStyles } from './Text.styles';
+import useMergeRefs from '../hooks/useMergeRefs';
 
-const Text: React.FC<TextProps> = ({
+const Text = forwardRef<HTMLSpanElement, TextProps>(({
   children,
-  size = 'medium',
+  size = 'md',
   weight = 'normal',
-  color,
+  color = 'primary',
   align = 'left',
   style,
   testID,
-}) => {
+}, ref) => {
   textStyles.useVariants({
     size,
     weight,
     align,
-    color: color
   });
 
   // Create the style array following the official documentation pattern
   const textStyleArray = [
-    textStyles.text,
+    textStyles.text({ color }),
     style,
   ];
 
   // Use getWebProps to generate className and ref for web
   const webProps = getWebProps(textStyleArray);
 
+  const mergedRef = useMergeRefs(ref, webProps.ref);
+
   return (
     <span
       {...webProps}
+      ref={mergedRef}
       data-testid={testID}
     >
       {children}
     </span>
   );
-};
+});
+
+Text.displayName = 'Text';
 
 export default Text; 

package/src/Text/index.ts

@@ -1,5 +1,5 @@
-// Platform-agnostic Text export
-// Bundlers will resolve to index.web.ts (web) or index.native.ts (React Native)
-// This file serves as fallback for web environments
-export { default } from './Text.web';
-export * from './types'; 
+import TextComponent from './Text.web';
+
+export default TextComponent;
+export { TextComponent as Text };
+export * from './types';

package/src/Text/index.web.ts

@@ -1,3 +1,5 @@
-// Web-specific Text export
-export { default } from './Text.web';
-export * from './types'; 
+import TextComponent from './Text.web';
+
+export default TextComponent;
+export { TextComponent as Text };
+export * from './types';

package/src/Text/types.ts

@@ -1,37 +1,44 @@
-import { ReactNode } from 'react';
-import type { DisplayColorVariant } from '../theme/variants';
+import { Text } from '@idealyst/theme';
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+
+// Component-specific type aliases for future extensibility
+export type TextColorVariant = Text;
+export type TextSizeVariant = 'sm' | 'md' | 'lg' | 'xl';  // Using sm/md/lg/xl for consistency
+export type TextWeightVariant = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+export type TextAlignVariant = 'left' | 'center' | 'right';
 
 export interface TextProps {
   /**
    * The text content to display
    */
   children: ReactNode;
-  
+
   /**
    * The size variant of the text
    */
-  size?: 'small' | 'medium' | 'large' | 'xlarge';
-  
+  size?: TextSizeVariant;
+
   /**
    * The weight of the text
    */
-  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
-  
+  weight?: TextWeightVariant;
+
   /**
    * The color of the text
    */
-  color?: DisplayColorVariant;
-  
+  color?: TextColorVariant;
+
   /**
    * Text alignment
    */
-  align?: 'left' | 'center' | 'right';
-  
+  align?: TextAlignVariant;
+
   /**
    * Additional styles (platform-specific)
    */
-  style?: any;
-  
+  style?: StyleProp<TextStyle>;
+
   /**
    * Test ID for testing
    */

package/src/TextArea/TextArea.native.tsx

@@ -0,0 +1,134 @@
+import React, { useState, forwardRef } from 'react';
+import { View, TextInput, NativeSyntheticEvent, TextInputContentSizeChangeEventData } from 'react-native';
+import { textAreaStyles } from './TextArea.styles';
+import Text from '../Text';
+import type { TextAreaProps } from './types';
+
+const TextArea = forwardRef<TextInput, TextAreaProps>(({
+  value: controlledValue,
+  defaultValue = '',
+  onChange,
+  placeholder,
+  disabled = false,
+  minHeight,
+  maxHeight,
+  autoGrow = false,
+  maxLength,
+  rows = 4,
+  label,
+  error,
+  helperText,
+  showCharacterCount = false,
+  intent = 'primary',
+  size = 'md',
+  style,
+  textareaStyle,
+  testID,
+}, ref) => {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const hasError = Boolean(error);
+
+  // Apply variants
+  textAreaStyles.useVariants({
+    size,
+    intent,
+    disabled,
+    hasError,
+    resize: 'none',
+    isNearLimit: maxLength ? value.length >= maxLength * 0.9 : false,
+    isAtLimit: maxLength ? value.length >= maxLength : false,
+  });
+
+  const handleChange = (newValue: string) => {
+    if (maxLength && newValue.length > maxLength) {
+      return;
+    }
+
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+    }
+
+    onChange?.(newValue);
+  };
+
+  const handleContentSizeChange = (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+    if (!autoGrow) return;
+
+    let newHeight = e.nativeEvent.contentSize.height;
+
+    // Apply min/max height constraints
+    if (minHeight && newHeight < minHeight) {
+      newHeight = minHeight;
+    }
+
+    if (maxHeight && newHeight > maxHeight) {
+      newHeight = maxHeight;
+    }
+
+    setContentHeight(newHeight);
+  };
+
+  const showFooter = (error || helperText) || (showCharacterCount && maxLength);
+
+  return (
+    <View style={[textAreaStyles.container, style]} testID={testID}>
+      {label && (
+        <Text style={textAreaStyles.label}>{label}</Text>
+      )}
+
+      <View style={textAreaStyles.textareaContainer}>
+        <TextInput
+          ref={ref}
+          style={[
+            textAreaStyles.textarea({ intent, disabled, hasError }),
+            {
+              textAlignVertical: 'top',
+            },
+            maxHeight && { maxHeight },
+            { height: autoGrow ? contentHeight : rows * 24 },
+            textareaStyle,
+          ]}
+          value={value}
+          onChangeText={handleChange}
+          onContentSizeChange={handleContentSizeChange}
+          placeholder={placeholder}
+          editable={!disabled}
+          multiline
+          numberOfLines={0}
+          maxLength={maxLength}
+          placeholderTextColor="#999"
+        />
+      </View>
+
+      {showFooter && (
+        <View style={textAreaStyles.footer}>
+          <View style={{ flex: 1 }}>
+            {error && (
+              <Text style={textAreaStyles.helperText}>
+                {error}
+              </Text>
+            )}
+            {!error && helperText && (
+              <Text style={textAreaStyles.helperText}>
+                {helperText}
+              </Text>
+            )}
+          </View>
+
+          {showCharacterCount && maxLength && (
+            <Text style={textAreaStyles.characterCount}>
+              {value.length}/{maxLength}
+            </Text>
+          )}
+        </View>
+      )}
+    </View>
+  );
+});
+
+TextArea.displayName = 'TextArea';
+
+export default TextArea;

package/src/TextArea/TextArea.styles.tsx

@@ -0,0 +1,175 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { TextAreaIntentVariant } from './types';
+
+
+/**
+ * Create size variants for textarea
+ */
+function createTextareaSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'textarea', (size) => ({
+        fontSize: size.fontSize,
+        padding: size.padding,
+        lineHeight: size.lineHeight,
+        minHeight: size.minHeight,
+    }));
+}
+
+/**
+ * Get textarea styles based on intent, disabled, and hasError state
+ */
+function getTextareaIntentStyles(theme: Theme, intent: TextAreaIntentVariant, disabled: boolean, hasError: boolean) {
+    if (disabled || hasError) {
+        return {} as const;
+    }
+
+    const intentValue = theme.intents[intent];
+    const baseStyles: any = {};
+
+    // For success and warning, set border color
+    if (intent === 'success' || intent === 'warning') {
+        baseStyles.borderColor = intentValue.primary;
+    }
+
+    // Focus styles for all intents when not disabled and not in error
+    baseStyles._web = {
+        _focus: {
+            borderColor: intentValue.primary,
+            boxShadow: `0 0 0 2px ${intentValue.primary}33`,
+        },
+    };
+
+    return baseStyles;
+}
+
+const createTextareaStyles = (theme: Theme) => {
+    return ({ intent, disabled, hasError }: { intent: TextAreaIntentVariant, disabled: boolean, hasError: boolean }) => {
+        const intentStyles = getTextareaIntentStyles(theme, intent, disabled, hasError);
+
+        return {
+            width: '100%',
+            color: theme.colors.text.primary,
+            backgroundColor: theme.colors.surface.primary,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.colors.border.primary,
+            borderRadius: 8,
+            lineHeight: 'normal',
+            ...intentStyles,
+            variants: {
+                size: createTextareaSizeVariants(theme),
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        backgroundColor: theme.colors.surface.secondary,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {},
+                },
+                hasError: {
+                    true: {
+                        borderColor: theme.intents.error.primary,
+                    },
+                    false: {},
+                },
+                resize: {
+                    none: {
+                        _web: {
+                            resize: 'none',
+                        },
+                    },
+                    vertical: {
+                        _web: {
+                            resize: 'vertical',
+                        },
+                    },
+                    horizontal: {
+                        _web: {
+                            resize: 'horizontal',
+                        },
+                    },
+                    both: {
+                        _web: {
+                            resize: 'both',
+                        },
+                    },
+                },
+            },
+            _web: {
+                fontFamily: 'inherit',
+                outline: 'none',
+                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+                boxSizing: 'border-box',
+                overflowY: 'hidden',
+            },
+        } as const;
+    }
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
+export const textAreaStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        container: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4,
+        },
+        label: {
+            fontSize: 14,
+            fontWeight: '500',
+            color: theme.colors.text.primary,
+            variants: {
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                    },
+                    false: {},
+                },
+            },
+        },
+        textareaContainer: {
+            position: 'relative',
+        },
+        textarea: createTextareaStyles(theme),
+        helperText: {
+            fontSize: 12,
+            color: theme.colors.text.secondary,
+            variants: {
+                hasError: {
+                    true: {
+                        color: theme.intents.error.primary,
+                    },
+                    false: {},
+                },
+            },
+        },
+        footer: {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            gap: 4,
+        },
+        characterCount: {
+            fontSize: 12,
+            color: theme.colors.text.secondary,
+            variants: {
+                isNearLimit: {
+                    true: {
+                        color: theme.intents.warning.primary,
+                    },
+                    false: {},
+                },
+                isAtLimit: {
+                    true: {
+                        color: theme.intents.error.primary,
+                    },
+                    false: {},
+                },
+            },
+        },
+    };
+});