@idealyst/components 1.0.83 → 1.0.84

package/src/Skeleton/Skeleton.native.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, forwardRef } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withSequence,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import { skeletonStyles } from './Skeleton.styles';
+import type { SkeletonProps, SkeletonGroupProps } from './types';
+
+const Skeleton = forwardRef<View, SkeletonProps>(({
+  width = '100%',
+  height = 20,
+  shape = 'rectangle',
+  borderRadius,
+  animation = 'pulse',
+  style,
+  testID,
+}, ref) => {
+  skeletonStyles.useVariants({
+    shape,
+    animation,
+  });
+
+  const animatedValue = useSharedValue(0);
+
+  useEffect(() => {
+    if (animation === 'pulse') {
+      // Pulse animation: opacity from 1 -> 0.5 -> 1
+      animatedValue.value = withRepeat(
+        withSequence(
+          withTiming(1, { duration: 750, easing: Easing.inOut(Easing.ease) }),
+          withTiming(0, { duration: 750, easing: Easing.inOut(Easing.ease) })
+        ),
+        -1, // infinite
+        false
+      );
+    } else if (animation === 'wave') {
+      // Wave animation: translateX from -100% -> 100%
+      animatedValue.value = withRepeat(
+        withTiming(1, { duration: 1500, easing: Easing.inOut(Easing.ease) }),
+        -1, // infinite
+        false
+      );
+    }
+  }, [animation]);
+
+  const pulseAnimatedStyle = useAnimatedStyle(() => {
+    if (animation === 'pulse') {
+      return {
+        opacity: animatedValue.value === 0 ? 1 : 1 - animatedValue.value * 0.5,
+      };
+    }
+    return {};
+  });
+
+  const waveAnimatedStyle = useAnimatedStyle(() => {
+    if (animation === 'wave') {
+      return {
+        transform: [
+          {
+            translateX: (animatedValue.value - 0.5) * 400, // -200 to 200
+          },
+        ],
+      };
+    }
+    return {};
+  });
+
+  const customStyles = {
+    ...(shape === 'rounded' && borderRadius ? { borderRadius } : {}),
+    ...(shape === 'circle' ? { aspectRatio: 1 } : {}),
+  };
+
+  return (
+    <Animated.View
+      ref={ref as any}
+      style={[
+        skeletonStyles.skeleton,
+        customStyles,
+        style,
+        pulseAnimatedStyle,
+      ]}
+      testID={testID}
+    >
+      {animation === 'wave' && (
+        <Animated.View
+          style={[
+            {
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: 'rgba(255, 255, 255, 0.3)',
+            },
+            waveAnimatedStyle,
+          ]}
+        />
+      )}
+    </Animated.View>
+  );
+});
+
+Skeleton.displayName = 'Skeleton';
+
+export const SkeletonGroup: React.FC<SkeletonGroupProps> = ({
+  count = 3,
+  spacing = 12,
+  skeletonProps,
+  style,
+  testID,
+}) => {
+  skeletonStyles.useVariants({});
+
+  return (
+    <View
+      style={[
+        skeletonStyles.group,
+        { gap: spacing },
+        style,
+      ]}
+      testID={testID}
+    >
+      {Array.from({ length: count }).map((_, index) => (
+        <Skeleton
+          key={index}
+          {...skeletonProps}
+          testID={testID ? `${testID}-item-${index}` : undefined}
+        />
+      ))}
+    </View>
+  );
+};
+
+export default Skeleton;

package/src/Skeleton/Skeleton.styles.tsx

@@ -0,0 +1,59 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles} from '@idealyst/theme';
+
+type SkeletonShape = 'rectangle' | 'rounded' | 'circle';
+type SkeletonAnimation = 'pulse' | 'wave' | 'none';
+
+type SkeletonVariants = {
+    shape: SkeletonShape;
+    animation: SkeletonAnimation;
+}
+
+export type ExpandedSkeletonStyles = StylesheetStyles<keyof SkeletonVariants>;
+export type ExpandedSkeletonGroupStyles = StylesheetStyles<never>;
+
+export type SkeletonStylesheet = {
+    skeleton: ExpandedSkeletonStyles;
+    group: ExpandedSkeletonGroupStyles;
+}
+
+/**
+ * Create shape variants for skeleton
+ */
+function createShapeVariants(theme: Theme) {
+    return {
+        rectangle: {
+            borderRadius: 0,
+        },
+        rounded: {
+            borderRadius: 8,
+        },
+        circle: {
+            borderRadius: 9999,
+        },
+    } 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.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const skeletonStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    skeleton: {
+        backgroundColor: theme.colors.surface.tertiary,
+        overflow: 'hidden',
+        variants: {
+            shape: createShapeVariants(theme),
+            animation: {
+                pulse: {},
+                wave: {},
+                none: {},
+            },
+        },
+    },
+    group: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+  };
+});

package/src/Skeleton/Skeleton.web.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { skeletonStyles } from './Skeleton.styles';
+import type { SkeletonProps, SkeletonGroupProps } from './types';
+
+const Skeleton: React.FC<SkeletonProps> = ({
+  width = '100%',
+  height = 20,
+  shape = 'rectangle',
+  borderRadius,
+  animation = 'pulse',
+  style,
+  testID,
+}) => {
+  skeletonStyles.useVariants({
+    shape,
+    animation,
+  });
+
+  const skeletonProps = getWebProps([skeletonStyles.skeleton, style as any]);
+
+  // Apply custom border radius if provided and shape is 'rounded'
+  const customStyles: React.CSSProperties = {
+    width: typeof width === 'number' ? `${width}px` : width,
+    height: typeof height === 'number' ? `${height}px` : height,
+    ...(shape === 'rounded' && borderRadius ? { borderRadius: `${borderRadius}px` } : {}),
+    ...(shape === 'circle' ? { aspectRatio: '1' } : {}),
+  };
+
+  // Animation styles
+  const animationStyles: React.CSSProperties = {};
+  if (animation === 'pulse') {
+    animationStyles.animation = 'skeleton-pulse 1.5s ease-in-out infinite';
+  } else if (animation === 'wave') {
+    animationStyles.position = 'relative';
+    animationStyles.overflow = 'hidden';
+  }
+
+  return (
+    <>
+      {animation === 'pulse' && (
+        <style>{`
+          @keyframes skeleton-pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+          }
+        `}</style>
+      )}
+      {animation === 'wave' && (
+        <style>{`
+          @keyframes skeleton-wave {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+          }
+        `}</style>
+      )}
+      <div
+        {...skeletonProps}
+        style={{
+          ...customStyles,
+          ...animationStyles,
+        }}
+        data-testid={testID}
+      >
+        {animation === 'wave' && (
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)',
+              animation: 'skeleton-wave 1.5s ease-in-out infinite',
+            }}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+export const SkeletonGroup: React.FC<SkeletonGroupProps> = ({
+  count = 3,
+  spacing = 12,
+  skeletonProps,
+  style,
+  testID,
+}) => {
+  skeletonStyles.useVariants({});
+  const groupProps = getWebProps([skeletonStyles.group, style as any]);
+
+  return (
+    <div
+      {...groupProps}
+      style={{
+        gap: `${spacing}px`,
+      }}
+      data-testid={testID}
+    >
+      {Array.from({ length: count }).map((_, index) => (
+        <Skeleton
+          key={index}
+          {...skeletonProps}
+          testID={testID ? `${testID}-item-${index}` : undefined}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Skeleton;

package/src/Skeleton/index.native.ts

@@ -0,0 +1,4 @@
+import Skeleton from './Skeleton.native';
+export { SkeletonGroup } from './Skeleton.native';
+export default Skeleton;
+export type { SkeletonProps, SkeletonGroupProps, SkeletonShape, SkeletonAnimation } from './types';

package/src/Skeleton/index.ts

@@ -0,0 +1,5 @@
+import SkeletonComponent from './Skeleton.web';
+export { SkeletonGroup } from './Skeleton.web';
+export default SkeletonComponent;
+export { SkeletonComponent as Skeleton };
+export type { SkeletonProps, SkeletonGroupProps, SkeletonShape, SkeletonAnimation } from './types';

package/src/Skeleton/index.web.ts

@@ -0,0 +1,5 @@
+import SkeletonComponent from './Skeleton.web';
+export { SkeletonGroup } from './Skeleton.web';
+export default SkeletonComponent;
+export { SkeletonComponent as Skeleton };
+export type { SkeletonProps, SkeletonGroupProps, SkeletonShape, SkeletonAnimation } from './types';

package/src/Skeleton/types.ts

@@ -0,0 +1,75 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type SkeletonShape = 'rectangle' | 'circle' | 'rounded';
+export type SkeletonAnimation = 'pulse' | 'wave' | 'none';
+
+export interface SkeletonProps {
+  /**
+   * Width of the skeleton (number in pixels or string with units)
+   * @default '100%'
+   */
+  width?: number | string;
+
+  /**
+   * Height of the skeleton (number in pixels or string with units)
+   * @default 20
+   */
+  height?: number | string;
+
+  /**
+   * Shape of the skeleton
+   * @default 'rectangle'
+   */
+  shape?: SkeletonShape;
+
+  /**
+   * Border radius for 'rounded' shape (in pixels)
+   * @default 8
+   */
+  borderRadius?: number;
+
+  /**
+   * Animation type
+   * @default 'pulse'
+   */
+  animation?: SkeletonAnimation;
+
+  /**
+   * Additional custom styles
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}
+
+export interface SkeletonGroupProps {
+  /**
+   * Number of skeleton items to render
+   * @default 3
+   */
+  count?: number;
+
+  /**
+   * Spacing between skeleton items (in pixels)
+   * @default 12
+   */
+  spacing?: number;
+
+  /**
+   * Props to pass to each skeleton item
+   */
+  skeletonProps?: Omit<SkeletonProps, 'testID'>;
+
+  /**
+   * Additional custom styles for the container
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}

package/src/Slider/Slider.native.tsx

@@ -0,0 +1,248 @@
+import React, { useState, useCallback, forwardRef } from 'react';
+import { View } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import Animated, { useSharedValue, useAnimatedStyle, runOnJS, withSpring } from 'react-native-reanimated';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { sliderStyles } from './Slider.styles';
+import Text from '../Text';
+import type { SliderProps } from './types';
+import { isIconName } from '../Icon/icon-resolver';
+
+const Slider = forwardRef<View, SliderProps>(({
+  value: controlledValue,
+  defaultValue = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  showValue = false,
+  showMinMax = false,
+  marks = [],
+  intent = 'primary',
+  size = 'md',
+  icon,
+  onValueChange,
+  onValueCommit,
+  style,
+  testID,
+}, ref) => {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [trackWidthState, setTrackWidthState] = useState(0);
+  const trackWidth = useSharedValue(0);
+  const translateX = useSharedValue(0);
+  const isDragging = useSharedValue(false);
+  const scale = useSharedValue(1);
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  
+  sliderStyles.useVariants({
+    size,
+    disabled,
+  });
+
+  const clampValue = (val: number) => {
+    'worklet';
+    const clampedValue = Math.min(Math.max(val, min), max);
+    const steppedValue = Math.round(clampedValue / step) * step;
+    return Math.min(Math.max(steppedValue, min), max);
+  };
+
+  const calculateValueFromPosition = (position: number) => {
+    'worklet';
+    if (trackWidth.value === 0) return value;
+    const percentage = Math.max(0, Math.min(1, position / trackWidth.value));
+    const rawValue = min + percentage * (max - min);
+    return clampValue(rawValue);
+  };
+
+  const updateValue = useCallback((newValue: number) => {
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+    }
+
+    onValueChange?.(newValue);
+  }, [controlledValue, onValueChange]);
+
+  const commitValue = useCallback((finalValue: number) => {
+    onValueCommit?.(finalValue);
+  }, [onValueCommit]);
+
+  // Update translateX when value changes externally
+  React.useEffect(() => {
+    if (!isDragging.value && trackWidth.value > 0) {
+      const percentage = (value - min) / (max - min);
+      translateX.value = percentage * trackWidth.value;
+    }
+  }, [value, min, max, trackWidth, translateX, isDragging]);
+
+  const panGesture = Gesture.Pan()
+    .enabled(!disabled)
+    .activeOffsetX([-5, 5])
+    .failOffsetY([-5, 5])
+    .onStart(() => {
+      isDragging.value = true;
+      scale.value = withSpring(1.15, { damping: 15, stiffness: 200 });
+    })
+    .onUpdate((event) => {
+      const newPosition = Math.max(0, Math.min(trackWidth.value, event.x));
+      translateX.value = newPosition;
+      const newValue = calculateValueFromPosition(newPosition);
+      runOnJS(updateValue)(newValue);
+    })
+    .onEnd(() => {
+      isDragging.value = false;
+      scale.value = withSpring(1, { damping: 15, stiffness: 200 });
+      const newPosition = Math.max(0, Math.min(trackWidth.value, translateX.value));
+      const finalValue = calculateValueFromPosition(newPosition);
+      runOnJS(commitValue)(finalValue);
+    });
+
+  const tapGesture = Gesture.Tap()
+    .enabled(!disabled)
+    .onBegin(() => {
+      scale.value = withSpring(1.15, { damping: 15, stiffness: 200 });
+    })
+    .onEnd((event) => {
+      const newPosition = Math.max(0, Math.min(trackWidth.value, event.x));
+      translateX.value = newPosition;
+      const newValue = calculateValueFromPosition(newPosition);
+      runOnJS(updateValue)(newValue);
+      runOnJS(commitValue)(newValue);
+      scale.value = withSpring(1, { damping: 15, stiffness: 200 });
+    })
+    .onFinalize(() => {
+      scale.value = withSpring(1, { damping: 15, stiffness: 200 });
+    });
+
+  const composedGesture = Gesture.Race(panGesture, tapGesture);
+
+  const getThumbSize = () => {
+    if (size === 'sm') return 16;
+    if (size === 'lg') return 24;
+    return 20;
+  };
+
+  const thumbSize = getThumbSize();
+
+  const thumbAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { translateX: translateX.value - thumbSize / 2 },
+        { scale: scale.value },
+      ],
+    } as any;
+  });
+
+  const filledTrackAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      width: translateX.value,
+    };
+  });
+
+  const percentage = ((value - min) / (max - min)) * 100;
+
+  const renderIcon = () => {
+    if (!icon) return null;
+
+    if (typeof icon === 'string' && isIconName(icon)) {
+      const iconStyle = sliderStyles.thumbIcon({ intent });
+      return (
+        <MaterialCommunityIcons
+          name={icon}
+          size={iconStyle.width || 16}
+          color={iconStyle.color}
+        />
+      );
+    }
+
+    return icon;
+  };
+
+  return (
+    <View ref={ref} style={[sliderStyles.container, style]} testID={testID}>
+      {showValue && (
+        <View style={sliderStyles.valueLabel as any}>
+          <Text>{value}</Text>
+        </View>
+      )}
+
+      <View style={sliderStyles.sliderWrapper}>
+        <GestureDetector gesture={composedGesture}>
+          <View
+            style={sliderStyles.track}
+            onLayout={(e) => {
+              const width = e.nativeEvent.layout.width;
+              trackWidth.value = width;
+              setTrackWidthState(width);
+            }}
+          >
+            {/* Filled track */}
+            <Animated.View
+              style={[sliderStyles.filledTrack({ intent }), filledTrackAnimatedStyle]}
+            />
+
+            {/* Marks */}
+            {marks.length > 0 && trackWidthState > 0 && (
+              <View style={sliderStyles.marks}>
+                {marks.map((mark) => {
+                  const markPercentage = ((mark.value - min) / (max - min)) * 100;
+                  const markPosition = (markPercentage / 100) * trackWidthState;
+                  return (
+                    <View key={mark.value}>
+                      <View
+                        style={[
+                          sliderStyles.mark,
+                          { left: markPosition },
+                        ]}
+                      />
+                      {mark.label && (
+                        <View
+                          style={[
+                            sliderStyles.markLabel,
+                            { left: markPosition },
+                          ]}
+                        >
+                          <Text size="sm">{mark.label}</Text>
+                        </View>
+                      )}
+                    </View>
+                  );
+                })}
+              </View>
+            )}
+
+            {/* Thumb */}
+            <Animated.View
+              style={[
+                sliderStyles.thumb({ intent, disabled }),
+                {
+                  // Manual positioning/sizing for native layout
+                  position: 'absolute',
+                  top: '50%',
+                  marginTop: -thumbSize / 2,
+                  width: thumbSize,
+                  height: thumbSize,
+                  borderRadius: thumbSize / 2,
+                },
+                thumbAnimatedStyle,
+              ]}
+            >
+              {renderIcon()}
+            </Animated.View>
+          </View>
+        </GestureDetector>
+      </View>
+
+      {showMinMax && (
+        <View style={sliderStyles.minMaxLabels}>
+          <Text style={sliderStyles.minMaxLabel} size="sm">{min}</Text>
+          <Text style={sliderStyles.minMaxLabel} size="sm">{max}</Text>
+        </View>
+      )}
+    </View>
+  );
+});
+
+Slider.displayName = 'Slider';
+
+export default Slider;