@idealyst/components 1.0.82 → 1.0.84

package/src/Select/types.ts

@@ -0,0 +1,124 @@
+import { Intent, Size } from '@idealyst/theme';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+// Component-specific type aliases for future extensibility
+export type SelectIntentVariant = Intent;
+export type SelectSizeVariant = Size;
+export type SelectType = 'outlined' | 'filled';
+
+export interface SelectOption {
+  /**
+   * The unique value for this option
+   */
+  value: string;
+
+  /**
+   * The display label for this option
+   */
+  label: string;
+
+  /**
+   * Whether this option is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Optional icon or custom content to display before the label
+   */
+  icon?: ReactNode;
+}
+
+export interface SelectProps {
+  /**
+   * Array of options to display in the select
+   */
+  options: SelectOption[];
+
+  /**
+   * The currently selected value
+   */
+  value?: string;
+
+  /**
+   * Called when the selected value changes
+   */
+  onValueChange?: (value: string) => void;
+
+  /**
+   * Placeholder text when no value is selected
+   */
+  placeholder?: string;
+
+  /**
+   * Whether the select is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether the select shows an error state
+   */
+  error?: boolean;
+
+  /**
+   * Helper text to display below the select
+   */
+  helperText?: string;
+
+  /**
+   * Label text to display above the select
+   */
+  label?: string;
+
+  /**
+   * The visual type of the select
+   */
+  type?: SelectType,
+
+  /**
+   * The intent/color scheme of the select
+   */
+  intent?: SelectIntentVariant;
+
+  /**
+   * The size of the select
+   */
+  size?: SelectSizeVariant;
+
+  /**
+   * Whether to show a search/filter input (web only)
+   */
+  searchable?: boolean;
+
+  /**
+   * Custom search filter function (used with searchable)
+   */
+  filterOption?: (option: SelectOption, searchTerm: string) => boolean;
+
+  /**
+   * Native iOS presentation mode (native only)
+   * 'dropdown' uses a standard dropdown overlay
+   * 'actionSheet' uses iOS ActionSheet for selection
+   */
+  presentationMode?: 'dropdown' | 'actionSheet';
+
+  /**
+   * Maximum height for the dropdown content
+   */
+  maxHeight?: number;
+
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+
+  /**
+   * Accessibility label
+   */
+  accessibilityLabel?: string;
+}

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;
+}