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

package/lib/__templates__/expo/client/heroui/primitives/popover/popover.tsx

@@ -1,382 +0,0 @@
-import React, {
-  forwardRef,
-  useContext,
-  useEffect,
-  useId,
-  useState,
-} from 'react';
-import {
-  BackHandler,
-  Pressable,
-  View,
-  type GestureResponderEvent,
-  type LayoutChangeEvent,
-  type LayoutRectangle,
-} from 'react-native';
-import {
-  useAugmentedRef,
-  useControllableState,
-  useRelativePosition,
-  type LayoutPosition,
-} from '../../helpers/internal/hooks';
-import { Portal as PrimitivePortal } from '../portal';
-import * as Slot from '../slot';
-import type {
-  CloseProps,
-  CloseRef,
-  ContentProps,
-  ContentRef,
-  IRootContext,
-  OverlayProps,
-  OverlayRef,
-  PortalProps,
-  RootProps,
-  RootRef,
-  TriggerProps,
-  TriggerRef,
-} from './popover.types';
-
-const RootContext = React.createContext<IRootContext | null>(null);
-
-const useRootContext = () => {
-  const context = useContext(RootContext);
-  if (!context) {
-    throw new Error(
-      'Popover compound components cannot be rendered outside the Popover component'
-    );
-  }
-  return context;
-};
-
-const Root = forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
-      isOpen: isOpenProp,
-      isDefaultOpen,
-      onOpenChange: onOpenChangeProp,
-      isDisabled,
-      presentation = 'popover',
-      ...viewProps
-    },
-    ref
-  ) => {
-    const [isOpen = false, onOpenChange] = useControllableState({
-      prop: isOpenProp,
-      defaultProp: isDefaultOpen,
-      onChange: onOpenChangeProp,
-    });
-    const [triggerPosition, setTriggerPosition] =
-      useState<LayoutPosition | null>(null);
-    const [contentLayout, setContentLayout] = useState<LayoutRectangle | null>(
-      null
-    );
-
-    const nativeID = useId();
-
-    const Component = asChild ? Slot.View : View;
-    return (
-      <RootContext.Provider
-        value={{
-          isOpen,
-          onOpenChange,
-          isDisabled,
-          contentLayout,
-          nativeID,
-          setContentLayout,
-          setTriggerPosition,
-          triggerPosition,
-          isDefaultOpen,
-          presentation,
-        }}
-      >
-        <Component ref={ref} {...viewProps} />
-      </RootContext.Provider>
-    );
-  }
-);
-
-// --------------------------------------------------
-
-const Trigger = forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, isDisabled = false, ...props }, ref) => {
-    const {
-      onOpenChange,
-      isOpen,
-      isDisabled: isDisabledRoot,
-      setTriggerPosition,
-      setContentLayout,
-      isDefaultOpen,
-      triggerPosition,
-    } = useRootContext();
-
-    const isDisabledValue = isDisabled ?? isDisabledRoot ?? undefined;
-
-    const augmentedRef = useAugmentedRef({
-      ref,
-      methods: {
-        open: () => {
-          augmentedRef.current?.measure(
-            (_x, _y, width, height, pageX, pageY) => {
-              setTriggerPosition({ width, pageX, pageY: pageY, height });
-            }
-          );
-          onOpenChange(true);
-        },
-        close: () => {
-          onOpenChange(false);
-          setTriggerPosition(null);
-          setContentLayout(null);
-        },
-      },
-      deps: [isOpen],
-    });
-
-    // Open popover on mount if isDefaultOpen is true
-    useEffect(() => {
-      if ((isDefaultOpen || isOpen) && !triggerPosition) {
-        // Use setTimeout to ensure the component is mounted and can be measured
-        const timeoutId = setTimeout(() => {
-          augmentedRef.current?.measure(
-            (_x, _y, width, height, pageX, pageY) => {
-              setTriggerPosition({ width, pageX, pageY: pageY, height });
-              if (isDefaultOpen) {
-                onOpenChange(true);
-              }
-            }
-          );
-        }, 0);
-        return () => clearTimeout(timeoutId);
-      }
-      return undefined;
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    function onPress(ev: GestureResponderEvent) {
-      augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
-        setTriggerPosition({ width, pageX, pageY, height });
-      });
-      onOpenChange(!isOpen);
-      onPressProp?.(ev);
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-
-    return (
-      <Component
-        ref={augmentedRef}
-        aria-disabled={isDisabledValue}
-        role="button"
-        onPress={onPress}
-        disabled={isDisabledValue}
-        {...props}
-      />
-    );
-  }
-);
-
-// --------------------------------------------------
-
-/**
- * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's offset to account for nav elements like headers.
- */
-function Portal({ forceMount, hostName, children }: PortalProps) {
-  const value = useRootContext();
-
-  const isBottomSheet = value.presentation === 'bottom-sheet';
-
-  if (!value.triggerPosition && !isBottomSheet) {
-    return null;
-  }
-
-  if (!forceMount && !isBottomSheet) {
-    if (!value.isOpen) {
-      return null;
-    }
-  }
-
-  return (
-    <PrimitivePortal hostName={hostName} name={`${value.nativeID}_portal`}>
-      <RootContext.Provider value={value}>{children}</RootContext.Provider>
-    </PrimitivePortal>
-  );
-}
-
-// --------------------------------------------------
-
-const Overlay = forwardRef<OverlayRef, OverlayProps>(
-  (
-    {
-      asChild,
-      forceMount,
-      onPress: OnPressProp,
-      closeOnPress = true,
-      ...props
-    },
-    ref
-  ) => {
-    const { isOpen, onOpenChange, setTriggerPosition, setContentLayout } =
-      useRootContext();
-
-    function onPress(ev: GestureResponderEvent) {
-      if (closeOnPress) {
-        onOpenChange(false);
-        setTriggerPosition(null);
-        setContentLayout(null);
-      }
-      OnPressProp?.(ev);
-    }
-
-    if (!forceMount) {
-      if (!isOpen) {
-        return null;
-      }
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-
-    return <Component ref={ref} onPress={onPress} {...props} />;
-  }
-);
-
-// --------------------------------------------------
-
-/**
- * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
- */
-const Content = forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
-      forceMount,
-      align = 'start',
-      placement = 'bottom',
-      offset = 0,
-      alignOffset = 0,
-      avoidCollisions = true,
-      onLayout: onLayoutProp,
-      insets,
-      style,
-      disablePositioningStyle,
-      width = 'content-fit',
-      ...props
-    },
-    ref
-  ) => {
-    const {
-      isOpen,
-      onOpenChange,
-      contentLayout,
-      nativeID,
-      setContentLayout,
-      setTriggerPosition,
-      triggerPosition,
-    } = useRootContext();
-
-    useEffect(() => {
-      const backHandler = BackHandler.addEventListener(
-        'hardwareBackPress',
-        () => {
-          onOpenChange(false);
-          setTriggerPosition(null);
-          setContentLayout(null);
-          return true;
-        }
-      );
-
-      return () => {
-        setContentLayout(null);
-        backHandler.remove();
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const positionStyle = useRelativePosition({
-      align,
-      avoidCollisions,
-      triggerPosition,
-      contentLayout,
-      alignOffset,
-      insets,
-      offset,
-      placement,
-      disablePositioningStyle,
-    });
-
-    // Calculate content width based on width prop
-    const widthStyle: { width?: number | `${number}%` } = {};
-    if (width === 'trigger' && triggerPosition) {
-      widthStyle.width = triggerPosition.width;
-    } else if (width === 'full') {
-      widthStyle.width = '100%';
-    } else if (typeof width === 'number') {
-      widthStyle.width = width;
-    }
-    // 'content-fit' is default - no explicit width set
-
-    function onLayout(event: LayoutChangeEvent) {
-      setContentLayout(event.nativeEvent.layout);
-      onLayoutProp?.(event);
-    }
-
-    if (!forceMount) {
-      if (!isOpen) {
-        return null;
-      }
-    }
-
-    const Component = asChild ? Slot.View : View;
-
-    return (
-      <Component
-        ref={ref}
-        role="dialog"
-        nativeID={nativeID}
-        aria-modal={true}
-        style={[positionStyle, widthStyle, style]}
-        onLayout={onLayout}
-        {...props}
-      />
-    );
-  }
-);
-
-// --------------------------------------------------
-
-const Close = forwardRef<CloseRef, CloseProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
-    const { onOpenChange, setContentLayout, setTriggerPosition } =
-      useRootContext();
-
-    function onPress(ev: GestureResponderEvent) {
-      if (disabled) return;
-      onOpenChange(false);
-      setTriggerPosition(null);
-      setContentLayout(null);
-      onPressProp?.(ev);
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-
-    return (
-      <Component
-        ref={ref}
-        aria-disabled={disabled ?? undefined}
-        role="button"
-        onPress={onPress}
-        disabled={disabled ?? undefined}
-        {...props}
-      />
-    );
-  }
-);
-
-// --------------------------------------------------
-
-Root.displayName = 'HeroUINative.Popover.Root';
-Trigger.displayName = 'HeroUINative.Popover.Trigger';
-Overlay.displayName = 'HeroUINative.Popover.Overlay';
-Content.displayName = 'HeroUINative.Popover.Content';
-Close.displayName = 'HeroUINative.Popover.Close';
-
-export { Close, Content, Overlay, Portal, Root, Trigger, useRootContext };

package/lib/__templates__/expo/client/heroui/primitives/popover/popover.types.ts

@@ -1,201 +0,0 @@
-import type { LayoutRectangle } from 'react-native';
-import type { LayoutPosition } from '../../helpers/internal/hooks';
-import type {
-  ForceMountable,
-  PositionedContentProps,
-  PressableRef,
-  SlottablePressableProps,
-  SlottableViewProps,
-  ViewRef,
-} from '../../helpers/internal/types';
-
-/**
- * Content sizing strategy
- * - 'content-fit': Auto-size to content width (default)
- * - 'trigger': Match trigger width exactly
- * - 'full': 100% width
- * - number: Fixed width in pixels
- */
-type ContentSizing = 'trigger' | 'content-fit' | 'full' | number;
-
-/**
- * Internal context interface for managing popover state and positioning
- */
-interface IRootContext {
-  /**
-   * Whether the popover is currently open
-   */
-  isOpen: boolean;
-  /**
-   * Callback to change the open state of the popover
-   */
-  onOpenChange: (open: boolean) => void;
-  /**
-   * Whether the popover should be open by default (uncontrolled mode)
-   */
-  isDefaultOpen?: boolean;
-  /**
-   * Whether the popover is disabled
-   */
-  isDisabled?: boolean;
-  /**
-   * The position of the trigger element relative to the viewport
-   */
-  triggerPosition: LayoutPosition | null;
-  /**
-   * Updates the trigger element's position
-   */
-  setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
-  /**
-   * The layout measurements of the popover content
-   */
-  contentLayout: LayoutRectangle | null;
-  /**
-   * Updates the content layout measurements
-   */
-  setContentLayout: (contentLayout: LayoutRectangle | null) => void;
-  /**
-   * Unique identifier for the popover instance
-   */
-  nativeID: string;
-  /**
-   * Presentation mode for the popover content
-   * - 'popover': Default floating popover with positioning
-   * - 'bottom-sheet': Bottom sheet modal presentation
-   * @default 'popover'
-   */
-  presentation: 'popover' | 'bottom-sheet';
-}
-
-/**
- * Props for the Popover Root component
- */
-type RootProps = SlottableViewProps & {
-  /**
-   * Presentation mode for the popover content
-   * - 'popover': Default floating popover with positioning
-   * - 'bottom-sheet': Bottom sheet modal presentation
-   * @default 'popover'
-   */
-  presentation?: 'popover' | 'bottom-sheet';
-  /**
-   * The controlled open state of the popover
-   */
-  isOpen?: boolean;
-  /**
-   * The open state of the popover when initially rendered (uncontrolled)
-   */
-  isDefaultOpen?: boolean;
-  /**
-   * Whether the popover is disabled
-   */
-  isDisabled?: boolean;
-  /**
-   * Callback fired when the popover open state changes
-   * @param open - Whether the popover is open or closed
-   */
-  onOpenChange?: (open: boolean) => void;
-};
-/**
- * Props for the Popover Portal component
- */
-interface PortalProps extends ForceMountable {
-  /**
-   * The content to render within the portal
-   */
-  children: React.ReactNode;
-  /**
-   * Optional name of the host element for the portal
-   */
-  hostName?: string;
-}
-
-/**
- * Props for the Popover Overlay component
- */
-type OverlayProps = ForceMountable &
-  SlottablePressableProps & {
-    /**
-     * Whether to close the popover when the overlay is pressed
-     * @default true
-     */
-    closeOnPress?: boolean;
-  };
-
-/**
- * Props for the Popover Trigger component
- */
-type TriggerProps = Omit<SlottablePressableProps, 'disabled'> & {
-  isDisabled?: boolean;
-};
-
-/**
- * Props for the Popover Content component
- */
-type ContentProps = SlottableViewProps &
-  PositionedContentProps & {
-    /**
-     * Content width sizing strategy
-     * - 'content-fit': Auto-size to content width (default)
-     * - 'trigger': Match trigger width exactly
-     * - 'full': 100% width
-     * - number: Fixed width in pixels
-     * @default 'content-fit'
-     */
-    width?: ContentSizing;
-  };
-
-/**
- * Props for the Popover Close component
- */
-type CloseProps = SlottablePressableProps;
-
-/**
- * Ref type for the Popover Close component
- */
-type CloseRef = PressableRef;
-
-/**
- * Ref type for the Popover Content component
- */
-type ContentRef = ViewRef;
-
-/**
- * Ref type for the Popover Overlay component
- */
-type OverlayRef = PressableRef;
-
-/**
- * Ref type for the Popover Root component
- */
-type RootRef = ViewRef;
-
-/**
- * Ref type for the Popover Trigger component
- */
-type TriggerRef = PressableRef & {
-  /**
-   * Programmatically open the popover
-   */
-  open: () => void;
-  /**
-   * Programmatically close the popover
-   */
-  close: () => void;
-};
-
-export type {
-  CloseProps,
-  CloseRef,
-  ContentProps,
-  ContentRef,
-  ContentSizing,
-  IRootContext,
-  OverlayProps,
-  OverlayRef,
-  PortalProps,
-  RootProps,
-  RootRef,
-  TriggerProps,
-  TriggerRef,
-};

package/lib/__templates__/expo/client/heroui/primitives/portal/index.ts

@@ -1 +0,0 @@
-export * from './portal';

package/lib/__templates__/expo/client/heroui/primitives/portal/portal.tsx

@@ -1,126 +0,0 @@
-import * as React from 'react';
-import { useEffect, useSyncExternalStore } from 'react';
-import { Platform, type View, type ViewStyle } from 'react-native';
-
-const DEFAULT_PORTAL_HOST = 'HEROUI_NATIVE_DEFAULT_HOST_NAME';
-
-type PortalMap = Map<string, React.ReactNode>;
-type PortalHostMap = Map<string, PortalMap>;
-
-type PortalStore = {
-  map: PortalHostMap;
-  listeners: Set<() => void>;
-};
-
-const store: PortalStore = {
-  map: new Map<string, PortalMap>().set(
-    DEFAULT_PORTAL_HOST,
-    new Map<string, React.ReactNode>()
-  ),
-  listeners: new Set(),
-};
-
-// --------------------------------------------------
-
-function emit() {
-  for (const cb of store.listeners) cb();
-}
-
-function getSnapshot() {
-  return store.map;
-}
-
-function subscribe(cb: () => void) {
-  store.listeners.add(cb);
-  return () => {
-    store.listeners.delete(cb);
-  };
-}
-
-function updatePortal(
-  hostName: string,
-  name: string,
-  children: React.ReactNode
-) {
-  const next = new Map(store.map);
-  const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
-  portal.set(name, children);
-  next.set(hostName, portal);
-  store.map = next;
-  emit();
-}
-
-function removePortal(hostName: string, name: string) {
-  const next = new Map(store.map);
-  const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
-  portal.delete(name);
-  next.set(hostName, portal);
-  store.map = next;
-  emit();
-}
-
-// --------------------------------------------------
-
-export function PortalHost({ name = DEFAULT_PORTAL_HOST }: { name?: string }) {
-  const map = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  const portalMap = map.get(name) ?? new Map<string, React.ReactNode>();
-  if (portalMap.size === 0) return null;
-  return <>{Array.from(portalMap.values())}</>;
-}
-
-// --------------------------------------------------
-
-export function Portal({
-  name,
-  hostName = DEFAULT_PORTAL_HOST,
-  children,
-}: {
-  name: string;
-  hostName?: string;
-  children: React.ReactNode;
-}) {
-  useEffect(() => {
-    updatePortal(hostName, name, children);
-  }, [hostName, name, children]);
-
-  useEffect(() => {
-    return () => {
-      removePortal(hostName, name);
-    };
-  }, [hostName, name]);
-
-  return null;
-}
-
-// --------------------------------------------------
-
-const ROOT: ViewStyle = {
-  flex: 1,
-};
-
-/**
- * @deprecated use `FullWindowOverlay` from `react-native-screens` instead
- * @example
-import { FullWindowOverlay } from "react-native-screens"
-const WindowOverlay = Platform.OS === "ios" ? FullWindowOverlay : Fragment
-// Wrap the `<PortalHost/>` with `<WindowOverlay/>`
-<WindowOverlay><PortalHost/></WindowOverlay>
- */
-export function useModalPortalRoot() {
-  const ref = React.useRef<View>(null);
-  const [offset, setSideOffSet] = React.useState(0);
-
-  const onLayout = React.useCallback(() => {
-    if (Platform.OS === 'web') return;
-    ref.current?.measure((_x, _y, _width, _height, _pageX, pageY) => {
-      setSideOffSet(-pageY);
-    });
-  }, []);
-
-  return {
-    ref,
-    offset,
-    onLayout,
-    style: ROOT,
-  };
-}

package/lib/__templates__/expo/client/heroui/primitives/radio/index.ts

@@ -1,2 +0,0 @@
-export * from './radio';
-export * from './radio.types';