@coze-arch/cli 0.0.10-alpha.11b7ea → 0.0.10-alpha.954690

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

@@ -1,52 +0,0 @@
-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

@@ -1,262 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,17 +0,0 @@
-// 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

@@ -1,18 +0,0 @@
-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

@@ -1,10 +0,0 @@
-/**
- * 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;