@idealyst/components 1.0.82 → 1.0.84

package/src/TextArea/TextArea.web.tsx

@@ -0,0 +1,156 @@
+import React, { useState, useRef, useEffect, forwardRef } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { textAreaStyles } from './TextArea.styles';
+import type { TextAreaProps } from './types';
+import useMergeRefs from '../hooks/useMergeRefs';
+
+const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
+  value: controlledValue,
+  defaultValue = '',
+  onChange,
+  placeholder,
+  disabled = false,
+  rows = 4,
+  minHeight,
+  maxHeight,
+  autoGrow = false,
+  maxLength,
+  label,
+  error,
+  helperText,
+  resize = 'none',
+  showCharacterCount = false,
+  intent = 'primary',
+  size = 'md',
+  style,
+  textareaStyle,
+  testID,
+}, ref) => {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const hasError = Boolean(error);
+
+  // Apply variants
+  textAreaStyles.useVariants({
+    size,
+    intent,
+    disabled,
+    hasError,
+    resize,
+    isNearLimit: maxLength ? value.length >= maxLength * 0.9 : false,
+    isAtLimit: maxLength ? value.length >= maxLength : false,
+  });
+
+  const containerProps = getWebProps([textAreaStyles.container, style as any]);
+  const labelProps = getWebProps([textAreaStyles.label]);
+  const textareaContainerProps = getWebProps([textAreaStyles.textareaContainer]);
+  const footerProps = getWebProps([textAreaStyles.footer]);
+  const helperTextProps = getWebProps([textAreaStyles.helperText]);
+  const characterCountProps = getWebProps([textAreaStyles.characterCount]);
+
+  const adjustHeight = () => {
+    if (!autoGrow || !textareaRef.current) return;
+
+    const textarea = textareaRef.current;
+
+    // Reset height to allow shrinking
+    textarea.style.height = '1px';
+
+    let newHeight = textarea.scrollHeight;
+
+    if (minHeight && newHeight < minHeight) {
+      newHeight = minHeight;
+    }
+
+    if (maxHeight && newHeight > maxHeight) {
+      newHeight = maxHeight;
+    }
+
+    textarea.style.height = `${newHeight}px`;
+  };
+
+  useEffect(() => {
+    adjustHeight();
+  }, [value, autoGrow, minHeight, maxHeight]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+
+    if (maxLength && newValue.length > maxLength) {
+      return;
+    }
+
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+    }
+
+    onChange?.(newValue);
+  };
+
+  const showFooter = (error || helperText) || (showCharacterCount && maxLength);
+  const isNearLimit = maxLength ? value.length >= maxLength * 0.9 : false;
+  const isAtLimit = maxLength ? value.length >= maxLength : false;
+
+  const computedTextareaProps = getWebProps([
+    textAreaStyles.textarea({ intent, disabled, hasError }),
+    textareaStyle,
+    minHeight && { minHeight: `${minHeight}px` },
+    maxHeight && { maxHeight: `${maxHeight}px` },
+    autoGrow && maxHeight && textareaRef.current && textareaRef.current.scrollHeight > maxHeight && { overflowY: 'auto' as const },
+  ]);
+
+  const mergedRef = useMergeRefs(ref, containerProps.ref);
+  const mergedTextareaRef = useMergeRefs(textareaRef, computedTextareaProps.ref);
+
+  return (
+    <div {...containerProps} ref={mergedRef} data-testid={testID}>
+      {label && (
+        <label {...labelProps}>{label}</label>
+      )}
+
+      <div {...textareaContainerProps}>
+        <textarea
+          {...computedTextareaProps}
+          ref={mergedTextareaRef}
+          value={value}
+          onChange={handleChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          rows={autoGrow ? undefined : rows}
+          maxLength={maxLength}
+          aria-invalid={hasError}
+          aria-describedby={error ? `${testID}-error` : helperText ? `${testID}-helper` : undefined}
+        />
+      </div>
+
+      {showFooter && (
+        <div {...footerProps}>
+          <div style={{ flex: 1 }}>
+            {error && (
+              <span {...helperTextProps} id={`${testID}-error`}>
+                {error}
+              </span>
+            )}
+            {!error && helperText && (
+              <span {...helperTextProps} id={`${testID}-helper`}>
+                {helperText}
+              </span>
+            )}
+          </div>
+
+          {showCharacterCount && maxLength && (
+            <span {...characterCountProps}>
+              {value.length}/{maxLength}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+TextArea.displayName = 'TextArea';
+
+export default TextArea;

package/src/TextArea/index.native.ts

@@ -0,0 +1,3 @@
+export { default } from './TextArea.native';
+export { default as TextArea } from './TextArea.native';
+export * from './types';

package/src/TextArea/index.ts

@@ -0,0 +1,3 @@
+export { default } from './TextArea.web';
+export { default as TextArea } from './TextArea.web';
+export * from './types';

package/src/TextArea/index.web.ts

@@ -0,0 +1,3 @@
+export { default } from './TextArea.web';
+export { default as TextArea } from './TextArea.web';
+export * from './types';

package/src/TextArea/types.ts

@@ -0,0 +1,30 @@
+import { Intent, Size } from '@idealyst/theme';
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+// Component-specific type aliases for future extensibility
+export type TextAreaIntentVariant = Intent;
+export type TextAreaSizeVariant = Size;
+export type TextAreaResizeVariant = 'none' | 'vertical' | 'horizontal' | 'both';
+
+export interface TextAreaProps {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  rows?: number;
+  minHeight?: number;
+  maxHeight?: number;
+  autoGrow?: boolean;
+  maxLength?: number;
+  label?: string;
+  error?: string;
+  helperText?: string;
+  resize?: TextAreaResizeVariant;
+  showCharacterCount?: boolean;
+  intent?: TextAreaIntentVariant;
+  size?: TextAreaSizeVariant;
+  style?: StyleProp<ViewStyle>;
+  textareaStyle?: StyleProp<TextStyle>;
+  testID?: string;
+}

package/src/Tooltip/Tooltip.native.tsx

@@ -0,0 +1,165 @@
+import React, { useState, useRef, useEffect, isValidElement, cloneElement, forwardRef } from 'react';
+import { View, Modal, Text, Pressable } from 'react-native';
+import { tooltipStyles } from './Tooltip.styles';
+import type { TooltipProps } from './types';
+
+const Tooltip = forwardRef<View, TooltipProps>(({
+  content,
+  children,
+  placement = 'top',
+  delay = 200,
+  intent = 'neutral',
+  size = 'md',
+  style,
+  testID,
+}, ref) => {
+  const [visible, setVisible] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0, width: 0 });
+  const triggerRef = useRef<any>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Apply variants
+  tooltipStyles.useVariants({
+    size,
+    intent,
+  });
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const calculateTooltipPosition = (x: number, y: number, width: number, height: number) => {
+    const offset = 8;
+    let top = 0;
+    let left = 0;
+
+    switch (placement) {
+      case 'top':
+        top = y - offset;
+        left = x + width / 2;
+        break;
+      case 'bottom':
+        top = y + height + offset;
+        left = x + width / 2;
+        break;
+      case 'left':
+        top = y + height / 2;
+        left = x - offset;
+        break;
+      case 'right':
+        top = y + height / 2;
+        left = x + width + offset;
+        break;
+    }
+
+    setTooltipPosition({ top, left, width });
+  };
+
+  const handleLongPress = () => {
+    if (!triggerRef.current) return;
+
+    triggerRef.current.measureInWindow((x: number, y: number, width: number, height: number) => {
+      calculateTooltipPosition(x, y, width, height);
+      setVisible(true);
+    });
+  };
+
+  const handlePress = () => {
+    if (visible) {
+      setVisible(false);
+    }
+  };
+
+  // Clone child and inject long press handler
+  const trigger = isValidElement(children)
+    ? cloneElement(children as React.ReactElement<any>, {
+        onLongPress: () => {
+          const originalOnLongPress = (children as any).props?.onLongPress;
+          originalOnLongPress?.();
+          handleLongPress();
+        },
+        onPress: (e: any) => {
+          const originalOnPress = (children as any).props?.onPress;
+          originalOnPress?.(e);
+          handlePress();
+        },
+      })
+    : children;
+
+  const getPositionStyle = () => {
+    switch (placement) {
+      case 'top':
+        return {
+          bottom: tooltipPosition.top,
+          left: tooltipPosition.left,
+          transform: [{ translateX: -50 }],
+        };
+      case 'bottom':
+        return {
+          top: tooltipPosition.top,
+          left: tooltipPosition.left,
+          transform: [{ translateX: -50 }],
+        };
+      case 'left':
+        return {
+          top: tooltipPosition.top,
+          right: tooltipPosition.left,
+          transform: [{ translateY: -50 }],
+        };
+      case 'right':
+        return {
+          top: tooltipPosition.top,
+          left: tooltipPosition.left,
+          transform: [{ translateY: -50 }],
+        };
+      default:
+        return {
+          top: tooltipPosition.top,
+          left: tooltipPosition.left,
+        };
+    }
+  };
+
+  return (
+    <>
+      <View ref={ref} collapsable={false} style={style}>
+        {trigger}
+      </View>
+
+      {visible && (
+        <Modal
+          visible={visible}
+          transparent
+          animationType="fade"
+          onRequestClose={() => setVisible(false)}
+          testID={testID}
+        >
+          <Pressable style={{ flex: 1 }} onPress={() => setVisible(false)}>
+            <View
+              style={[
+                tooltipStyles.tooltip,
+                { position: 'absolute' },
+                getPositionStyle(),
+              ]}
+              pointerEvents="none"
+            >
+              {typeof content === 'string' ? (
+                <Text style={tooltipStyles.tooltip}>{content}</Text>
+              ) : (
+                content
+              )}
+            </View>
+          </Pressable>
+        </Modal>
+      )}
+    </>
+  );
+});
+
+Tooltip.displayName = 'Tooltip';
+
+export default Tooltip;

package/src/Tooltip/Tooltip.styles.tsx

@@ -0,0 +1,73 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+
+type TooltipSize = Size;
+type TooltipIntent = Intent;
+
+type TooltipTooltipVariants = {
+    size: TooltipSize;
+    intent: TooltipIntent;
+}
+
+export type ExpandedTooltipTooltipStyles = StylesheetStyles<keyof TooltipTooltipVariants>;
+export type ExpandedTooltipStyles = StylesheetStyles<never>;
+
+export type TooltipStylesheet = {
+    container: ExpandedTooltipStyles;
+    tooltip: ExpandedTooltipTooltipStyles;
+}
+
+function createTooltipSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'tooltip', (size) => ({
+        fontSize: size.fontSize,
+        padding: size.padding,
+    }));
+}
+
+function createTooltipIntentVariants(theme: Theme) {
+    const intents: Record<string, any> = {};
+
+    for (const [intentName, intentValue] of Object.entries(theme.intents)) {
+        intents[intentName] = {
+            backgroundColor: intentValue.primary,
+            color: intentValue.contrast,
+        };
+    }
+
+    return intents;
+}
+
+// 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 tooltipStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    container: {
+        position: 'relative',
+        _web: {
+            display: 'inline-flex',
+            width: 'fit-content',
+        },
+    } as const,
+    tooltip: {
+        borderRadius: 8,
+        maxWidth: 300,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.15,
+        shadowRadius: 8,
+        elevation: 4,
+        variants: {
+            size: createTooltipSizeVariants(theme),
+            intent: createTooltipIntentVariants(theme),
+        },
+        _web: {
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+            pointerEvents: 'none',
+            width: 'max-content',
+            wordWrap: 'break-word',
+        },
+    } as const,
+  } as const;
+});

package/src/Tooltip/Tooltip.web.tsx

@@ -0,0 +1,87 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { tooltipStyles } from './Tooltip.styles';
+import type { TooltipProps } from './types';
+import { PositionedPortal } from '../internal/PositionedPortal';
+
+const Tooltip: React.FC<TooltipProps> = ({
+  content,
+  children,
+  placement = 'top',
+  delay = 200,
+  intent = 'neutral',
+  size = 'md',
+  style,
+  testID,
+}) => {
+  const [visible, setVisible] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const anchorRef = useRef<HTMLDivElement>(null);
+
+  // Apply variants - PositionedPortal handles positioning and visibility
+  tooltipStyles.useVariants({
+    size,
+    intent,
+  });
+
+  const containerProps = getWebProps([tooltipStyles.container, style as any]);
+  const tooltipContentProps = getWebProps(tooltipStyles.tooltip);
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      setVisible(true);
+    }, delay);
+  };
+
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    setVisible(false);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      <div
+        ref={anchorRef}
+        {...containerProps}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        data-testid={testID}
+      >
+        {children}
+      </div>
+
+      <PositionedPortal
+        open={visible}
+        anchor={anchorRef}
+        placement={placement}
+        offset={8}
+        zIndex={1000}
+      >
+        <div
+          {...tooltipContentProps}
+          role="tooltip"
+          data-testid={`${testID}-tooltip`}
+        >
+          {content}
+        </div>
+      </PositionedPortal>
+    </>
+  );
+};
+
+export default Tooltip;

package/src/Tooltip/index.native.ts

@@ -0,0 +1,3 @@
+export { default } from './Tooltip.native';
+export { default as Tooltip } from './Tooltip.native';
+export * from './types';

package/src/Tooltip/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Tooltip.web';
+export { default as Tooltip } from './Tooltip.web';
+export * from './types';

package/src/Tooltip/types.ts

@@ -0,0 +1,18 @@
+import { Intent, Size } from '@idealyst/theme';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+// Component-specific type aliases for future extensibility
+export type TooltipIntentVariant = Intent;
+export type TooltipSizeVariant = Size;
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export interface TooltipProps {
+  content: string | React.ReactNode;
+  children: React.ReactNode;
+  placement?: TooltipPlacement;
+  delay?: number;
+  intent?: TooltipIntentVariant;
+  size?: TooltipSizeVariant;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/Video/Video.native.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { videoStyles } from './Video.styles';
+import type { VideoProps, VideoSource } from './types';
+
+// Import react-native-video - it's a peer dependency
+let RNVideo: any;
+try {
+  const videoModule = require('react-native-video');
+  // Try default export first (v5 and earlier), then named export (v6+)
+  RNVideo = videoModule.default || videoModule.Video || videoModule;
+} catch (e) {
+  console.warn('react-native-video not installed. Video component will not work on native.');
+}
+
+const Video = React.forwardRef<View, VideoProps>(({
+  source,
+  poster,
+  width,
+  height,
+  aspectRatio,
+  controls = true,
+  autoPlay = false,
+  loop = false,
+  muted = false,
+  onLoad,
+  onError,
+  onPlay,
+  onPause,
+  onEnd,
+  onProgress,
+  borderRadius,
+  style,
+  testID,
+}, ref) => {
+
+  if (!RNVideo) {
+    return (
+      <View ref={ref} style={[videoStyles.container, { aspectRatio, borderRadius }, style]} testID={testID}>
+        <View style={videoStyles.fallback}>
+          {/* Fallback when react-native-video is not installed */}
+        </View>
+      </View>
+    );
+  }
+
+  const videoSource = typeof source === 'string'
+    ? { uri: source }
+    : source;
+
+  const containerStyle = [
+    videoStyles.container,
+    {
+      aspectRatio: aspectRatio || undefined,
+      borderRadius: borderRadius || undefined,
+    },
+    style,
+  ];
+
+  const handleLoad = (data: any) => {
+    onLoad?.();
+  };
+
+  const handleError = (error: any) => {
+    onError?.(error);
+  };
+
+  const handleProgress = (data: any) => {
+    if (onProgress) {
+      onProgress({
+        currentTime: data.currentTime,
+        playableDuration: data.playableDuration,
+      });
+    }
+  };
+
+  const handleEnd = () => {
+    onEnd?.();
+  };
+
+  return (
+    <View ref={ref} style={containerStyle} testID={testID}>
+      <RNVideo
+        source={videoSource}
+        poster={poster}
+        style={[videoStyles.video, { borderRadius }]}
+        controls={controls}
+        paused={!autoPlay}
+        repeat={loop}
+        muted={muted}
+        resizeMode="contain"
+        // Support both v5 and v6+ event names
+        onLoad={handleLoad}
+        onReadyForDisplay={handleLoad}
+        onError={handleError}
+        onProgress={handleProgress}
+        onEnd={handleEnd}
+      />
+    </View>
+  );
+});
+
+Video.displayName = 'Video';
+
+export default Video;

package/src/Video/Video.styles.tsx

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles} from '@idealyst/theme';
+
+export type ExpandedVideoStyles = StylesheetStyles<never>;
+
+export type VideoStylesheet = {
+    container: ExpandedVideoStyles;
+    video: ExpandedVideoStyles;
+    fallback: ExpandedVideoStyles;
+}
+
+// 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 videoStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    container: {
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundColor: theme.colors['black'],
+    },
+    video: {
+        width: '100%',
+        height: '100%',
+    },
+    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'],
+    },
+  };
+});