@coze-arch/cli 0.0.10 → 0.0.11

package/lib/__templates__/expo/client/heroui/components/list-group/list-group.types.ts

@@ -0,0 +1,132 @@
+import type { PressableProps, TextProps, ViewProps } from 'react-native';
+import type { SurfaceVariant } from '../surface/surface.types';
+
+/**
+ * Props for the ListGroup.Root component.
+ * Renders a Surface-based container for grouped list items.
+ */
+export interface ListGroupRootProps extends ViewProps {
+  /**
+   * Children elements to be rendered inside the list group
+   */
+  children?: React.ReactNode;
+  /**
+   * Visual variant of the underlying Surface
+   * @default "default"
+   */
+  variant?: SurfaceVariant;
+  /**
+   * Additional CSS classes for the root container
+   */
+  className?: string;
+}
+
+/**
+ * Props for the ListGroup.Item component.
+ * Renders a single pressable row inside the list group.
+ */
+export interface ListGroupItemProps extends PressableProps {
+  /**
+   * Children elements to be rendered inside the item
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes for the item
+   */
+  className?: string;
+}
+
+/**
+ * Props for icon elements used by ListGroup sub-components
+ */
+export interface ListGroupIconProps {
+  /**
+   * Size of the icon in pixels
+   * @default 16
+   */
+  size?: number;
+  /**
+   * Color of the icon
+   */
+  color?: string;
+}
+
+/**
+ * Props for the ListGroup.ItemPrefix component.
+ * Renders content before the item content area (e.g. an icon or avatar).
+ */
+export interface ListGroupItemPrefixProps extends ViewProps {
+  /**
+   * Children elements to be rendered inside the prefix slot
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes for the prefix
+   */
+  className?: string;
+}
+
+/**
+ * Props for the ListGroup.ItemContent component.
+ * Renders the main content area of an item, typically containing title and description.
+ */
+export interface ListGroupItemContentProps extends ViewProps {
+  /**
+   * Children elements to be rendered inside the content area
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes for the content area
+   */
+  className?: string;
+}
+
+/**
+ * Props for the ListGroup.ItemTitle component.
+ * Renders the primary text label for an item.
+ */
+export interface ListGroupItemTitleProps extends TextProps {
+  /**
+   * Title text or custom content
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes for the title
+   */
+  className?: string;
+}
+
+/**
+ * Props for the ListGroup.ItemDescription component.
+ * Renders secondary descriptive text below the title.
+ */
+export interface ListGroupItemDescriptionProps extends TextProps {
+  /**
+   * Description text or custom content
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes for the description
+   */
+  className?: string;
+}
+
+/**
+ * Props for the ListGroup.ItemSuffix component.
+ * Renders trailing content for an item, with a default chevron-right icon.
+ */
+export interface ListGroupItemSuffixProps extends ViewProps {
+  /**
+   * Children elements to override the default chevron-right icon
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes for the suffix
+   */
+  className?: string;
+  /**
+   * Props to customise the default chevron-right icon.
+   * Only takes effect when no children are provided.
+   */
+  iconProps?: ListGroupIconProps;
+}

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

@@ -0,0 +1,38 @@
+export {
+  default as Menu,
+  useMenu,
+  useMenuAnimation,
+  useMenuItem,
+} from './menu';
+export { menuClassNames } from './menu.styles';
+export type {
+  MenuAlign,
+  MenuAnimationContextValue,
+  MenuCloseProps,
+  MenuContentBottomSheetProps,
+  MenuContentContextValue,
+  MenuContentPopoverProps,
+  MenuContentProps,
+  MenuGroupProps,
+  MenuGroupSelectionMode,
+  MenuItemAnimation,
+  MenuItemDescriptionProps,
+  MenuItemIndicatorIconProps,
+  MenuItemIndicatorProps,
+  MenuItemIndicatorVariant,
+  MenuItemProps,
+  MenuItemRenderProps,
+  MenuItemTitleProps,
+  MenuItemVariant,
+  MenuKey,
+  MenuLabelProps,
+  MenuOverlayProps,
+  MenuPlacement,
+  MenuPortalProps,
+  MenuPresentation,
+  MenuRootProps,
+  MenuTriggerProps,
+  MenuTriggerRef,
+  UseMenuAnimationReturn,
+  UseMenuReturn,
+} from './menu.types';

package/lib/__templates__/expo/client/heroui/components/menu/menu.animation.ts

@@ -0,0 +1,121 @@
+import { useCallback } from 'react';
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useThemeColor } from '../../helpers/external/hooks';
+import { colorKit } from '../../helpers/external/utils';
+import { useAnimationSettings } from '../../helpers/internal/contexts';
+import {
+  createContext,
+  getAnimationState,
+  getAnimationValueMergedConfig,
+  getAnimationValueProperty,
+  getIsAnimationDisabledValue,
+} from '../../helpers/internal/utils';
+import type {
+  MenuAnimationContextValue,
+  MenuItemAnimation,
+  MenuItemVariant,
+} from './menu.types';
+
+const [MenuAnimationProvider, useMenuAnimation] =
+  createContext<MenuAnimationContextValue>({
+    name: 'MenuAnimationContext',
+  });
+
+// --------------------------------------------------
+
+function useMenuItemAnimation(options: {
+  animation: MenuItemAnimation | undefined;
+  variant: MenuItemVariant;
+}) {
+  const { animation, variant } = options;
+
+  const themeColorDefault = useThemeColor('default');
+  const themeColorDanger = useThemeColor('danger-soft');
+
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  const isPressed = useSharedValue(false);
+
+  const animationOnPressIn = useCallback(() => {
+    isPressed.set(true);
+  }, [isPressed]);
+
+  const animationOnPressOut = useCallback(() => {
+    isPressed.set(false);
+  }, [isPressed]);
+
+  // -- Scale --
+  const scaleValue = getAnimationValueProperty({
+    animationValue: animationConfig?.scale,
+    property: 'value',
+    defaultValue: 0.98,
+  });
+
+  const scaleTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.scale,
+    property: 'timingConfig',
+    defaultValue: { duration: 150 },
+  });
+
+  // -- Background color --
+  const bgColorValue = getAnimationValueProperty({
+    animationValue: animationConfig?.backgroundColor,
+    property: 'value',
+    defaultValue:
+      variant === 'danger'
+        ? colorKit.setAlpha(themeColorDanger, 0.1).hex()
+        : themeColorDefault,
+  });
+
+  const bgTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.backgroundColor,
+    property: 'timingConfig',
+    defaultValue: { duration: 150 },
+  });
+
+  const bgColorTransparent = colorKit.setAlpha(themeColorDefault, 0).hex();
+
+  const rItemStyle = useAnimatedStyle(() => {
+    if (isAnimationDisabledValue) {
+      return {
+        transform: [{ scale: 1 }],
+      };
+    }
+
+    const pressed = isPressed.get();
+
+    return {
+      backgroundColor: withTiming(
+        pressed ? bgColorValue : bgColorTransparent,
+        bgTimingConfig
+      ),
+      transform: [
+        {
+          scale: withTiming(pressed ? scaleValue : 1, scaleTimingConfig),
+        },
+      ],
+    };
+  });
+
+  return {
+    rItemStyle,
+    isPressed,
+    animationOnPressIn,
+    animationOnPressOut,
+  };
+}
+
+// --------------------------------------------------
+
+export { MenuAnimationProvider, useMenuAnimation, useMenuItemAnimation };

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

@@ -0,0 +1,37 @@
+/**
+ * Display names for the Menu components
+ */
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.Menu.Root',
+  TRIGGER: 'HeroUINative.Menu.Trigger',
+  PORTAL: 'HeroUINative.Menu.Portal',
+  OVERLAY: 'HeroUINative.Menu.Overlay',
+  CONTENT: 'HeroUINative.Menu.Content',
+  CLOSE: 'HeroUINative.Menu.Close',
+  LABEL: 'HeroUINative.Menu.Label',
+  GROUP: 'HeroUINative.Menu.Group',
+  ITEM: 'HeroUINative.Menu.Item',
+  ITEM_TITLE: 'HeroUINative.Menu.ItemTitle',
+  ITEM_DESCRIPTION: 'HeroUINative.Menu.ItemDescription',
+  ITEM_INDICATOR: 'HeroUINative.Menu.ItemIndicator',
+};
+
+/**
+ * Default offset from trigger element
+ */
+export const DEFAULT_OFFSET = 9;
+
+/**
+ * Default alignment offset
+ */
+export const DEFAULT_ALIGN_OFFSET = 0;
+
+/**
+ * Default screen edge insets
+ */
+export const DEFAULT_INSETS = {
+  top: 12,
+  bottom: 12,
+  left: 12,
+  right: 12,
+};