@coze-arch/cli 0.0.1-alpha.3002ee → 0.0.1-alpha.3260db

package/lib/__templates__/expo/client/heroui/components/accordion/accordion.tsx

@@ -0,0 +1,340 @@
+import { Children, forwardRef, useMemo } from 'react';
+import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { useThemeColor } from '../../helpers/external/hooks';
+import { ChevronDownIcon } from '../../helpers/internal/components';
+import { AnimationSettingsProvider } from '../../helpers/internal/contexts';
+import type { ViewRef } from '../../helpers/internal/types';
+import { createContext } from '../../helpers/internal/utils';
+import * as AccordionPrimitive from '../../primitives/accordion';
+import {
+  AccordionAnimationProvider,
+  useAccordionAnimation,
+  useAccordionContentAnimation,
+  useAccordionIndicatorAnimation,
+  useAccordionRootAnimation,
+} from './accordion.animation';
+import { DEFAULT_ICON_SIZE, DISPLAY_NAME } from './accordion.constants';
+import { accordionClassNames, accordionStyleSheet } from './accordion.styles';
+import type {
+  AccordionContentProps,
+  AccordionContextValue,
+  AccordionIndicatorProps,
+  AccordionItemProps,
+  AccordionItemRenderProps,
+  AccordionRootProps,
+  AccordionTriggerProps,
+} from './accordion.types';
+
+const AnimatedRootView = Animated.createAnimatedComponent(
+  AccordionPrimitive.Root
+);
+
+const AnimatedItemView = Animated.createAnimatedComponent(
+  AccordionPrimitive.Item
+);
+
+const AnimatedIndicator = Animated.createAnimatedComponent(
+  AccordionPrimitive.Indicator
+);
+
+// ------------------------------------------------------------------------------
+
+const [AccordionInnerProvider, useAccordionInnerContext] =
+  createContext<AccordionContextValue>({
+    name: 'AccordionInnerContext',
+  });
+
+const useAccordion = AccordionPrimitive.useRootContext;
+const useAccordionItem = AccordionPrimitive.useItemContext;
+
+// ------------------------------------------------------------------------------
+
+const Root = forwardRef<View, AccordionRootProps>((props, ref) => {
+  const {
+    children,
+    variant = 'default',
+    hideSeparator = false,
+    className,
+    classNames,
+    styles,
+    style,
+    animation,
+    ...restProps
+  } = props;
+
+  const { container, separator } = accordionClassNames.root({ variant });
+
+  const containerClassName = container({
+    className: [className, classNames?.container],
+  });
+
+  const separatorClassName = separator({ className: classNames?.separator });
+
+  const { layoutTransition, isAllAnimationsDisabled } =
+    useAccordionRootAnimation({
+      animation,
+    });
+
+  const contextValue: AccordionContextValue = useMemo(
+    () => ({
+      variant,
+    }),
+    [variant]
+  );
+
+  const animationSettingsContextValue = useMemo(
+    () => ({
+      isAllAnimationsDisabled,
+    }),
+    [isAllAnimationsDisabled]
+  );
+
+  const animationContextValue = useMemo(
+    () => ({
+      layoutTransition,
+    }),
+    [layoutTransition]
+  );
+
+  return (
+    <AnimationSettingsProvider value={animationSettingsContextValue}>
+      <AccordionAnimationProvider value={animationContextValue}>
+        <AccordionInnerProvider value={contextValue}>
+          <AnimatedRootView
+            ref={ref}
+            className={containerClassName}
+            style={[accordionStyleSheet.root, style, styles?.container]}
+            layout={layoutTransition}
+            {...restProps}
+          >
+            {Children.map(children, (child, index) => (
+              <>
+                {child}
+                {!hideSeparator && index < Children.count(children) - 1 && (
+                  <Animated.View
+                    className={separatorClassName}
+                    style={styles?.separator}
+                    layout={layoutTransition}
+                  />
+                )}
+              </>
+            ))}
+          </AnimatedRootView>
+        </AccordionInnerProvider>
+      </AccordionAnimationProvider>
+    </AnimationSettingsProvider>
+  );
+});
+
+// ------------------------------------------------------------------------------
+
+const Item = forwardRef<View, AccordionItemProps>((props, ref) => {
+  const {
+    children,
+    value,
+    layout: layoutProp,
+    className,
+    isDisabled: isDisabledProp,
+    ...restProps
+  } = props;
+
+  const itemClassName = accordionClassNames.item({ className });
+
+  const { layoutTransition } = useAccordionAnimation();
+  const { value: rootValue } = useAccordion();
+
+  const itemValue = value as string;
+
+  const isExpanded = Array.isArray(rootValue)
+    ? rootValue.includes(itemValue)
+    : rootValue === itemValue;
+
+  const renderProps: AccordionItemRenderProps = useMemo(
+    () => ({
+      isExpanded,
+      value: itemValue,
+    }),
+    [isExpanded, itemValue]
+  );
+
+  const content =
+    typeof children === 'function' ? children(renderProps) : children;
+
+  return (
+    <AnimatedItemView
+      ref={ref}
+      layout={layoutProp || layoutTransition}
+      value={value}
+      className={itemClassName}
+      isDisabled={isDisabledProp}
+      {...restProps}
+    >
+      {content}
+    </AnimatedItemView>
+  );
+});
+
+// ------------------------------------------------------------------------------
+
+const Trigger = forwardRef<View, AccordionTriggerProps>((props, ref) => {
+  const { children, className, ...restProps } = props;
+
+  const { variant } = useAccordionInnerContext();
+
+  const triggerClassName = accordionClassNames.trigger({
+    variant,
+    className,
+  });
+
+  return (
+    <AccordionPrimitive.Header>
+      <AccordionPrimitive.Trigger
+        ref={ref}
+        className={triggerClassName}
+        {...restProps}
+      >
+        {children}
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+});
+
+// ------------------------------------------------------------------------------
+
+const Indicator = forwardRef<ViewRef, AccordionIndicatorProps>((props, ref) => {
+  const {
+    children,
+    className,
+    iconProps,
+    animation,
+    isAnimatedStyleActive = true,
+    style,
+    ...restProps
+  } = props;
+
+  const { isExpanded } = useAccordionItem();
+
+  const themeColorForeground = useThemeColor('foreground');
+
+  const indicatorClassName = accordionClassNames.indicator({ className });
+
+  const { rContainerStyle } = useAccordionIndicatorAnimation({
+    animation,
+    isExpanded,
+  });
+
+  const indicatorStyle = isAnimatedStyleActive
+    ? [rContainerStyle, style]
+    : style;
+
+  if (children) {
+    return (
+      <AnimatedIndicator
+        ref={ref}
+        className={indicatorClassName}
+        style={style}
+        {...restProps}
+      >
+        {children}
+      </AnimatedIndicator>
+    );
+  }
+
+  return (
+    <AnimatedIndicator
+      ref={ref}
+      className={indicatorClassName}
+      style={indicatorStyle}
+      {...restProps}
+    >
+      <ChevronDownIcon
+        size={iconProps?.size ?? DEFAULT_ICON_SIZE}
+        color={iconProps?.color ?? themeColorForeground}
+      />
+    </AnimatedIndicator>
+  );
+});
+
+// ------------------------------------------------------------------------------
+
+const Content = forwardRef<View, AccordionContentProps>((props, ref) => {
+  const { children, className, animation, ...restProps } = props;
+
+  const { variant } = useAccordionInnerContext();
+
+  const { isExpanded } = useAccordionItem();
+
+  const contentClassName = accordionClassNames.content({ variant, className });
+
+  const { entering: animatedEntering, exiting: animatedExiting } =
+    useAccordionContentAnimation({
+      animation,
+    });
+
+  if (!isExpanded) {
+    return null;
+  }
+
+  return (
+    <Animated.View entering={animatedEntering} exiting={animatedExiting}>
+      <AccordionPrimitive.Content
+        ref={ref}
+        className={contentClassName}
+        {...restProps}
+      >
+        {children}
+      </AccordionPrimitive.Content>
+    </Animated.View>
+  );
+});
+
+// ------------------------------------------------------------------------------
+
+Root.displayName = DISPLAY_NAME.ROOT;
+Item.displayName = DISPLAY_NAME.ITEM;
+Trigger.displayName = DISPLAY_NAME.TRIGGER;
+Indicator.displayName = DISPLAY_NAME.INDICATOR;
+Content.displayName = DISPLAY_NAME.CONTENT;
+
+/**
+ * Compound Accordion component with sub-components
+ *
+ * @component Accordion - Main container that manages the accordion state and behavior.
+ * Controls expansion/collapse of items, supports single or multiple selection modes,
+ * and provides variant styling (default or surface).
+ *
+ * @component Accordion.Item - Container for individual accordion items.
+ * Wraps the trigger and content, managing the expanded state for each item.
+ * Supports render function children that receive expansion state.
+ *
+ * @component Accordion.Trigger - Interactive element that toggles item expansion.
+ * Built on Header and Trigger primitives.
+ *
+ * @component Accordion.Indicator - Optional visual indicator showing expansion state.
+ * Defaults to an animated chevron icon that rotates based on item state.
+ * Supports custom animation configuration.
+ *
+ * @component Accordion.Content - Container for expandable content.
+ * Animated with layout transitions for smooth expand/collapse effects.
+ * Supports custom entering and exiting animations.
+ *
+ * Props flow from Accordion to sub-components via context (variant).
+ * Animation state flows via AccordionAnimationProvider.
+ * Item expansion state is managed by the primitive accordion context.
+ *
+ * @see Full documentation: https://v3.heroui.com/docs/native/components/accordion
+ */
+const CompoundAccordion = Object.assign(Root, {
+  /** @required Container for individual accordion items */
+  Item,
+  /** @required Interactive trigger element */
+  Trigger,
+  /** @optional Visual indicator showing expansion state (defaults to chevron) */
+  Indicator,
+  /** @required Container for expandable content with animations */
+  Content,
+});
+
+export default CompoundAccordion;
+export { useAccordion, useAccordionItem };

package/lib/__templates__/expo/client/heroui/components/accordion/accordion.types.ts

@@ -0,0 +1,267 @@
+import type { ViewStyle } from 'react-native';
+import type {
+  AnimatedProps,
+  EntryOrExitLayoutType,
+  WithSpringConfig,
+} from 'react-native-reanimated';
+import type {
+  Animation,
+  AnimationRoot,
+  AnimationValue,
+  ElementSlots,
+  LayoutTransition,
+} from '../../helpers/internal/types';
+import type {
+  ContentProps as PrimitiveContentProps,
+  IndicatorProps as PrimitiveIndicatorProps,
+  ItemProps as PrimitiveItemProps,
+  RootProps as PrimitiveRootProps,
+  TriggerProps as PrimitiveTriggerProps,
+} from '../../primitives/accordion';
+import type { RootSlots } from './accordion.styles';
+
+/**
+ * Variant types for the Accordion component
+ */
+export type AccordionVariant = 'default' | 'surface';
+
+/**
+ * Icon props for the Accordion.Indicator component
+ */
+export interface AccordionIndicatorIconProps {
+  /**
+   * Size of the icon
+   * @default 16
+   */
+  size?: number;
+  /**
+   * Color of the icon
+   * @default foreground
+   */
+  color?: string;
+}
+
+/**
+ * Animation configuration for accordion root component
+ */
+export type AccordionRootAnimation = AnimationRoot<{
+  layout?: AnimationValue<{
+    /**
+     * Custom layout animation for accordion transitions
+     * @default LinearTransition.springify().damping(140).stiffness(1600).mass(4)
+     */
+    value?: LayoutTransition;
+  }>;
+}>;
+
+/**
+ * Props for the Accordion root component
+ */
+export type AccordionRootProps = Omit<
+  AnimatedProps<PrimitiveRootProps>,
+  'layout'
+> & {
+  /**
+   * Children elements to be rendered inside the accordion
+   */
+  children?: React.ReactNode;
+  /**
+   * Visual variant of the accordion
+   * @default 'default'
+   */
+  variant?: AccordionVariant;
+  /**
+   * Whether to hide the separator between accordion items
+   * @default false
+   */
+  hideSeparator?: boolean;
+  /**
+   * Additional CSS classes for the container
+   */
+  className?: string;
+  /**
+   * Additional CSS classes for the slots
+   */
+  classNames?: ElementSlots<RootSlots>;
+  /**
+   * Styles for different parts of the accordion root
+   */
+  styles?: Partial<Record<RootSlots, ViewStyle>>;
+  /**
+   * Animation configuration for accordion
+   * - `false` or `"disabled"`: Disable only root animations
+   * - `"disable-all"`: Disable all animations including children
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: AccordionRootAnimation;
+};
+
+/**
+ * Render function props for accordion item children
+ */
+export type AccordionItemRenderProps = {
+  /**
+   * Whether the accordion item is currently expanded
+   */
+  isExpanded: boolean;
+  /**
+   * Unique value identifier for this accordion item
+   */
+  value: string;
+};
+
+/**
+ * Props for the Accordion.Item component
+ */
+export interface AccordionItemProps
+  extends Omit<AnimatedProps<PrimitiveItemProps>, 'children'> {
+  /**
+   * Children elements to be rendered inside the accordion item, or a render function
+   */
+  children?:
+    | React.ReactNode
+    | ((props: AccordionItemRenderProps) => React.ReactNode);
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Accordion.Trigger component
+ */
+export interface AccordionTriggerProps extends PrimitiveTriggerProps {
+  /**
+   * Children elements to be rendered inside the trigger
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * Animation configuration for accordion indicator component
+ */
+export type AccordionIndicatorAnimation = Animation<{
+  rotation?: AnimationValue<{
+    /**
+     * Rotation values [collapsed, expanded] in degrees
+     * @default [0, -180]
+     */
+    value?: [number, number];
+    /**
+     * Spring animation configuration for rotation
+     * @default { damping: 140, stiffness: 1000, mass: 4 }
+     */
+    springConfig?: WithSpringConfig;
+  }>;
+}>;
+
+/**
+ * Props for the Accordion.Indicator component
+ */
+export interface AccordionIndicatorProps
+  extends AnimatedProps<PrimitiveIndicatorProps> {
+  /**
+   * Custom indicator content, if not provided defaults to animated chevron
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `transform` (specifically `rotate`) - Animated for expand/collapse rotation transitions
+   *
+   * To customize this property, use the `animation` prop:
+   * ```tsx
+   * <Accordion.Indicator
+   *   animation={{
+   *     rotation: { value: [0, -180], springConfig: { damping: 140, stiffness: 1000, mass: 4 } }
+   *   }}
+   * />
+   * ```
+   *
+   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
+   */
+  className?: string;
+  /**
+   * Icon configuration
+   */
+  iconProps?: AccordionIndicatorIconProps;
+  /**
+   * Animation configuration for indicator
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: AccordionIndicatorAnimation;
+  /**
+   * Whether animated styles (react-native-reanimated) are active
+   * When `false`, the animated style is removed and you can implement custom logic
+   * This prop should only be used when you want to write custom styling logic instead of the default animated styles
+   * @default true
+   */
+  isAnimatedStyleActive?: boolean;
+}
+
+/**
+ * Animation configuration for accordion content component
+ */
+export type AccordionContentAnimation = Animation<{
+  entering?: AnimationValue<{
+    /**
+     * Custom entering animation for content
+     */
+    value?: EntryOrExitLayoutType;
+  }>;
+  exiting?: AnimationValue<{
+    /**
+     * Custom exiting animation for content
+     */
+    value?: EntryOrExitLayoutType;
+  }>;
+}>;
+
+/**
+ * Props for the Accordion.Content component
+ */
+export interface AccordionContentProps extends PrimitiveContentProps {
+  /**
+   * Children elements to be rendered inside the content
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+  /**
+   * Animation configuration for content
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: AccordionContentAnimation;
+}
+
+/**
+ * Context values shared between Accordion components (extends primitive context)
+ */
+export interface AccordionContextValue {
+  /**
+   * Visual variant of the accordion
+   */
+  variant: AccordionVariant;
+}
+
+/**
+ * Context value for accordion animation state
+ */
+export interface AccordionAnimationContextValue {
+  /**
+   * Custom layout animation for accordion transitions
+   */
+  layoutTransition?: LayoutTransition;
+}

package/lib/__templates__/expo/client/heroui/components/accordion/index.ts

@@ -0,0 +1,17 @@
+export {
+  default as Accordion,
+  useAccordion,
+  useAccordionItem,
+} from './accordion';
+export { ACCORDION_LAYOUT_TRANSITION as AccordionLayoutTransition } from './accordion.constants';
+export { accordionClassNames } from './accordion.styles';
+
+export type {
+  AccordionContentProps,
+  AccordionContextValue,
+  AccordionIndicatorProps,
+  AccordionItemProps,
+  AccordionRootProps,
+  AccordionTriggerProps,
+  AccordionVariant,
+} from './accordion.types';

package/lib/__templates__/expo/client/heroui/components/alert/alert.constants.ts

@@ -0,0 +1,13 @@
+/**
+ * Display names for Alert components
+ */
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.Alert',
+  INDICATOR: 'HeroUINative.Alert.Indicator',
+  CONTENT: 'HeroUINative.Alert.Content',
+  TITLE: 'HeroUINative.Alert.Title',
+  DESCRIPTION: 'HeroUINative.Alert.Description',
+};
+
+/** Default icon size in pixels */
+export const DEFAULT_ICON_SIZE = 18;

package/lib/__templates__/expo/client/heroui/components/alert/alert.hooks.ts

@@ -0,0 +1,28 @@
+import { useThemeColor } from '../../helpers/external/hooks';
+import type { AlertStatus } from '../../primitives/alert/alert.types';
+
+/**
+ * Resolves the default icon color based on the current alert status.
+ */
+export function useStatusColor(status: AlertStatus): string {
+  const [foreground, accent, success, warning, danger] = useThemeColor([
+    'foreground',
+    'accent',
+    'success',
+    'warning',
+    'danger',
+  ]);
+
+  switch (status) {
+    case 'accent':
+      return accent;
+    case 'success':
+      return success;
+    case 'warning':
+      return warning;
+    case 'danger':
+      return danger;
+    default:
+      return foreground;
+  }
+}