@coze-arch/cli 0.0.10 → 0.0.11

package/lib/__templates__/expo/client/heroui/components/scroll-shadow/scroll-shadow.styles.ts

@@ -0,0 +1,52 @@
+import { StyleSheet } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { combineStyles } from '../../helpers/internal/utils';
+
+/**
+ * ScrollShadow component styles using tailwind-variants
+ */
+const root = tv({
+  base: '',
+});
+
+export const scrollShadowClassNames = combineStyles({
+  root,
+});
+
+/**
+ * Native styles for properties not supported by NativeWind
+ */
+export const scrollShadowStyleSheet = StyleSheet.create({
+  topShadow: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+    pointerEvents: 'none',
+  },
+  bottomShadow: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+    pointerEvents: 'none',
+  },
+  leftShadow: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 10,
+    pointerEvents: 'none',
+  },
+  rightShadow: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: 0,
+    zIndex: 10,
+    pointerEvents: 'none',
+  },
+});

package/lib/__templates__/expo/client/heroui/components/scroll-shadow/scroll-shadow.tsx

@@ -0,0 +1,262 @@
+import {
+  cloneElement,
+  createElement,
+  forwardRef,
+  isValidElement,
+  type ComponentType,
+} from 'react';
+import { StyleSheet, View, type LayoutChangeEvent } from 'react-native';
+import Animated, { useComposedEventHandler } from 'react-native-reanimated';
+import { useThemeColor } from '../../helpers/external/hooks';
+import { colorKit } from '../../helpers/external/utils';
+import { easeGradient } from '../../helpers/internal/utils';
+import { useScrollShadowRootAnimation } from './scroll-shadow.animation';
+import {
+  DEFAULT_SCROLL_EVENT_THROTTLE,
+  DEFAULT_SHADOW_SIZE,
+  SCROLL_SHADOW_DISPLAY_NAME,
+} from './scroll-shadow.constants';
+import {
+  scrollShadowClassNames,
+  scrollShadowStyleSheet,
+} from './scroll-shadow.styles';
+import type { ScrollShadowProps } from './scroll-shadow.types';
+
+/**
+ * Cache for animated components to prevent remounting on every render.
+ * Using WeakMap ensures components are garbage collected when no longer referenced.
+ */
+const animatedComponentCache = new WeakMap<
+  ComponentType<any>,
+  ComponentType<any>
+>();
+
+/**
+ * Gets or creates a cached animated component for the given component type.
+ * This prevents creating new component types on every render, which would cause
+ * React to treat them as different components and trigger unmount/remount cycles.
+ *
+ * @param ComponentType - The original component type to create an animated version of
+ * @returns The cached animated component type
+ */
+function getAnimatedComponent(
+  ComponentType: ComponentType<any>
+): ComponentType<any> {
+  let cached = animatedComponentCache.get(ComponentType);
+  if (!cached) {
+    try {
+      cached = Animated.createAnimatedComponent(ComponentType);
+      animatedComponentCache.set(ComponentType, cached);
+    } catch (error) {
+      throw new Error(
+        `ScrollShadow: Failed to create animated component: ${error instanceof Error ? error.message : String(error)}`
+      );
+    }
+  }
+  return cached;
+}
+
+const ScrollShadowRoot = forwardRef<View, ScrollShadowProps>((props, ref) => {
+  const {
+    children,
+    size = DEFAULT_SHADOW_SIZE,
+    orientation: orientationProp,
+    visibility = 'auto',
+    color,
+    isEnabled = true,
+    className,
+    style,
+    LinearGradientComponent,
+    animation,
+    ...restProps
+  } = props;
+
+  const themeColorBackground = useThemeColor('background');
+  const shadowColor = color || themeColorBackground;
+
+  const rootClassName = scrollShadowClassNames.root({ className });
+
+  const childHorizontal =
+    children?.props &&
+    typeof children?.props === 'object' &&
+    'horizontal' in children.props
+      ? children.props.horizontal
+      : false;
+  const orientation =
+    orientationProp || (childHorizontal ? 'horizontal' : 'vertical');
+
+  // Get all animation logic from root hook
+  const {
+    contentSize,
+    containerSize,
+    localScrollHandler,
+    topShadowStyle,
+    bottomShadowStyle,
+  } = useScrollShadowRootAnimation({
+    animation,
+    orientation,
+    size,
+    visibility,
+    isEnabled,
+  });
+
+  const onContentSizeChange = (w: number, h: number) => {
+    const contentDimension = orientation === 'vertical' ? h : w;
+    contentSize.set(contentDimension);
+    (children as any).props?.onContentSizeChange?.(w, h);
+  };
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    const containerDimension = orientation === 'vertical' ? height : width;
+    containerSize.set(containerDimension);
+    (children as any).props?.onLayout?.(event);
+  };
+
+  const outerScrollHandler = (children as any).props?.onScroll;
+  const handlers = outerScrollHandler
+    ? [localScrollHandler, outerScrollHandler]
+    : [localScrollHandler];
+
+  const onScroll = useComposedEventHandler(handlers);
+
+  const scrollEventThrottle =
+    (children as any).props?.scrollEventThrottle ||
+    DEFAULT_SCROLL_EVENT_THROTTLE;
+
+  if (!isValidElement(children)) {
+    return null;
+  }
+
+  const isAnimatedComponent =
+    (children.type as any)?.displayName?.includes('AnimatedComponent') ||
+    (children.type as any)?.__isAnimatedComponent;
+
+  const enhancedChild = isAnimatedComponent
+    ? cloneElement(children as any, {
+        onContentSizeChange,
+        onLayout,
+        scrollEventThrottle,
+        onScroll,
+      })
+    : createElement(getAnimatedComponent(children.type as any), {
+        ...(children as any).props,
+        onContentSizeChange,
+        onLayout,
+        scrollEventThrottle,
+        onScroll,
+      });
+
+  const { colors: topLeftColors, locations: topLeftLocations } = easeGradient({
+    colorStops: {
+      0: {
+        color: colorKit.setAlpha(shadowColor, 1).hex(),
+      },
+      1: {
+        color: colorKit.setAlpha(shadowColor, 0).hex(),
+      },
+    },
+  });
+
+  const { colors: bottomRightColors, locations: bottomRightLocations } =
+    easeGradient({
+      colorStops: {
+        0: {
+          color: colorKit.setAlpha(shadowColor, 0).hex(),
+        },
+        1: {
+          color: colorKit.setAlpha(shadowColor, 1).hex(),
+        },
+      },
+    });
+
+  return (
+    <View ref={ref} className={rootClassName} style={style} {...restProps}>
+      {enhancedChild}
+
+      {/* Top/Left Shadow */}
+      {orientation === 'vertical' ? (
+        <Animated.View
+          style={[
+            scrollShadowStyleSheet.topShadow,
+            { height: size },
+            topShadowStyle,
+          ]}
+        >
+          <LinearGradientComponent
+            colors={topLeftColors}
+            locations={topLeftLocations}
+            style={StyleSheet.absoluteFill}
+          />
+        </Animated.View>
+      ) : (
+        <Animated.View
+          style={[
+            scrollShadowStyleSheet.leftShadow,
+            { width: size },
+            topShadowStyle,
+          ]}
+        >
+          <LinearGradientComponent
+            colors={topLeftColors}
+            locations={topLeftLocations}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            style={StyleSheet.absoluteFill}
+          />
+        </Animated.View>
+      )}
+
+      {/* Bottom/Right Shadow */}
+      {orientation === 'vertical' ? (
+        <Animated.View
+          style={[
+            scrollShadowStyleSheet.bottomShadow,
+            { height: size },
+            bottomShadowStyle,
+          ]}
+        >
+          <LinearGradientComponent
+            colors={bottomRightColors}
+            locations={bottomRightLocations}
+            style={StyleSheet.absoluteFill}
+          />
+        </Animated.View>
+      ) : (
+        <Animated.View
+          style={[
+            scrollShadowStyleSheet.rightShadow,
+            { width: size },
+            bottomShadowStyle,
+          ]}
+        >
+          <LinearGradientComponent
+            colors={bottomRightColors}
+            locations={bottomRightLocations}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            style={StyleSheet.absoluteFill}
+          />
+        </Animated.View>
+      )}
+    </View>
+  );
+});
+
+ScrollShadowRoot.displayName = SCROLL_SHADOW_DISPLAY_NAME.ROOT;
+
+/**
+ * Compound ScrollShadow component
+ *
+ * @component ScrollShadow - Main container that wraps any scrollable component and adds
+ * dynamic gradient shadows at the edges. Automatically detects scroll position and content
+ * overflow to show/hide shadows intelligently.
+ *
+ * The component intercepts scroll events from the child scrollable component and manages
+ * shadow visibility based on scroll position and content size. Supports both vertical
+ * and horizontal orientations.
+ *
+ * @see Full documentation: https://v3.heroui.com/docs/native/components/scroll-shadow
+ */
+
+export default ScrollShadowRoot;

package/lib/__templates__/expo/client/heroui/components/scroll-shadow/scroll-shadow.types.ts

@@ -0,0 +1,121 @@
+import type { ComponentType } from 'react';
+import type { ViewProps } from 'react-native';
+import type {
+  AnimationRoot,
+  AnimationValue,
+} from '../../helpers/internal/types';
+
+/**
+ * Orientation of the scroll shadow
+ * @default 'vertical'
+ */
+export type ScrollShadowOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Visibility mode for the scroll shadows
+ * - 'auto': Shows shadows based on scroll position and content overflow
+ * - 'top': Only shows top shadow (for vertical) or left shadow (for horizontal)
+ * - 'bottom': Only shows bottom shadow (for vertical) or right shadow (for horizontal)
+ * - 'left': Only shows left shadow (for horizontal orientation)
+ * - 'right': Only shows right shadow (for horizontal orientation)
+ * - 'both': Always shows both shadows
+ * - 'none': Hides all shadows
+ * @default 'auto'
+ */
+export type ScrollShadowVisibility =
+  | 'auto'
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'both'
+  | 'none';
+
+export interface LinearGradientProps {
+  colors: any;
+  locations?: any;
+  start?: any;
+  end?: any;
+  style?: any;
+}
+
+export type LinearGradientComponent = ComponentType<LinearGradientProps>;
+
+/**
+ * Animation configuration for ScrollShadow root component
+ */
+export type ScrollShadowRootAnimation = AnimationRoot<{
+  /**
+   * Opacity animation configuration
+   */
+  opacity?: AnimationValue<{
+    /**
+     * Opacity values [initial, active]
+     * - First value (0): Initial opacity when shadow is not visible
+     * - Second value (1): Active opacity when shadow is visible
+     * For bottom/right shadow, this array is reversed: [1, 0]
+     * @default [0, 1]
+     */
+    value?: [number, number];
+  }>;
+}>;
+
+/**
+ * Props for the ScrollShadow component
+ */
+export interface ScrollShadowProps extends ViewProps {
+  /**
+   * The scrollable component to enhance with shadows
+   * Must be a single React element (ScrollView, FlatList, etc.)
+   */
+  children: React.ReactElement;
+
+  /**
+   * Size (height/width) of the gradient shadow in pixels
+   * @default 50
+   */
+  size?: number;
+
+  /**
+   * Orientation of the scroll shadow
+   * If not provided, will auto-detect from child's `horizontal` prop
+   * @default 'vertical' or auto-detected from child
+   */
+  orientation?: ScrollShadowOrientation;
+
+  /**
+   * Visibility mode for the shadows
+   * @default 'auto'
+   */
+  visibility?: ScrollShadowVisibility;
+
+  /**
+   * Custom color for the gradient shadow
+   * If not provided, uses the theme's background color
+   */
+  color?: string;
+
+  /**
+   * Whether the shadow effect is enabled
+   * @default true
+   */
+  isEnabled?: boolean;
+
+  /**
+   * Additional CSS classes to apply to the container
+   */
+  className?: string;
+
+  /**
+   * LinearGradient component to use for rendering shadows
+   * Compatible with expo-linear-gradient, react-native-linear-gradient, etc.
+   * Required for the component to render shadows
+   */
+  LinearGradientComponent: LinearGradientComponent;
+
+  /**
+   * Animation configuration for scroll shadow
+   * @default undefined
+   */
+  animation?: ScrollShadowRootAnimation;
+}

package/lib/__templates__/expo/client/heroui/components/search-field/index.ts

@@ -0,0 +1,17 @@
+// Component exports
+export { default as SearchField, useSearchField } from './search-field';
+
+// ClassNames export for external reuse
+export { searchFieldClassNames } from './search-field.styles';
+
+// Type exports (named exports for better tree-shaking)
+export type {
+  SearchFieldClearButtonIconProps,
+  SearchFieldClearButtonProps,
+  SearchFieldContextType,
+  SearchFieldGroupProps,
+  SearchFieldInputProps,
+  SearchFieldProps,
+  SearchFieldSearchIconIconProps,
+  SearchFieldSearchIconProps,
+} from './search-field.types';

package/lib/__templates__/expo/client/heroui/components/search-field/search-field.animation.ts

@@ -0,0 +1,18 @@
+import { useCombinedAnimationDisabledState } from '../../helpers/internal/hooks';
+import type { AnimationRootDisableAll } from '../../helpers/internal/types';
+
+/**
+ * Animation hook for SearchField root component
+ * Handles root-level animation configuration and provides context for child components
+ */
+export function useSearchFieldRootAnimation(options: {
+  animation: AnimationRootDisableAll | undefined;
+}) {
+  const { animation } = options;
+
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+
+  return {
+    isAllAnimationsDisabled,
+  };
+}

package/lib/__templates__/expo/client/heroui/components/search-field/search-field.constants.ts

@@ -0,0 +1,10 @@
+/**
+ * Display names for SearchField components
+ */
+export const DISPLAY_NAME = {
+  SEARCH_FIELD: 'HeroUINative.SearchField',
+  SEARCH_FIELD_GROUP: 'HeroUINative.SearchField.Group',
+  SEARCH_FIELD_SEARCH_ICON: 'HeroUINative.SearchField.SearchIcon',
+  SEARCH_FIELD_INPUT: 'HeroUINative.SearchField.Input',
+  SEARCH_FIELD_CLEAR_BUTTON: 'HeroUINative.SearchField.ClearButton',
+} as const;