@coze-arch/cli 0.0.1-alpha.ef8b63 → 0.0.1-alpha.f0fbc7

package/lib/__templates__/expo/README.md

@@ -1,6 +1,6 @@
 # Expo App + Express.js
 
-## 目录结构规范（严格遵循）
+## 目录结构规范
 
 当前仓库是一个 monorepo（基于 pnpm 的 workspace）
 
@@ -16,17 +16,15 @@
 ├── client/                     # React Native 前端代码
 │   ├── app/                    # Expo Router 路由目录（仅路由配置）
 │   │   ├── _layout.tsx         # 根布局文件（必需，务必阅读）
-│   │   ├── home.tsx            # 首页
-│   │   └── index.tsx           # re-export home.tsx
+│   │   └── index.tsx           # 首页
+│   ├── heroui/                 # hero native ui 组件库，提供了各类基础组件
 │   ├── screens/                # 页面实现目录（与 app/ 路由对应）
-│   │   └── demo/               # demo 示例页面
-│   │       ├── index.tsx       # 页面组件实现
-│   │       └── styles.ts       # 页面样式
+│   │   └── demo/
+│   │       └── index.tsx       # demo 示例页面（默认首页，不需要可以删除，记得同时更新路由文件）
 │   ├── components/             # 可复用组件
 │   │   └── Screen.tsx          # 页面容器组件（必用）
 │   ├── hooks/                  # 自定义 Hooks
 │   ├── contexts/               # React Context 代码
-│   ├── constants/              # 常量定义（如主题配置）
 │   ├── utils/                  # 工具函数
 │   ├── assets/                 # 静态资源
 |   └── package.json            # Expo 应用 package.json
@@ -34,6 +32,13 @@
 ├── .cozeproj                   # 预置脚手架脚本（禁止修改）
 └── .coze                       # 配置文件（禁止修改）
 
+## 技术选型（严格遵循）
+
+- 前端：Expo + React Native + TailwindCSS
+- 后端：Express.js
+
+本项目通过 uniwind 实现了 react-native 对 TailwindCSS v4 的支持，在编写样式时应使用 TailwindCSS 写法
+
 ## 安装依赖
 
 ### 命令
@@ -42,15 +47,6 @@
 pnpm i
 ```
 
-### 新增依赖约束
-
-如果需要新增依赖，需在 client 和 server 各自的目录添加（原因：隔离前后端的依赖），禁止在根目录直接安装依赖
-
-### 新增依赖标准流程
-
-- 编辑 `client/package.json` 或 `server/package.json`
-- 在根目录执行 `pnpm i`
-
 ## Expo 开发规范
 
 ### 路径别名

package/lib/__templates__/expo/client/app/+not-found.tsx

@@ -1,30 +1,15 @@
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text } from 'react-native';
 import { Link } from 'expo-router';
-import { useTheme } from '@/hooks/useTheme';
-import { Spacing } from '@/constants/theme';
 
 export default function NotFoundScreen() {
-  const { theme } = useTheme();
-
   return (
-    <View style={[styles.container, { backgroundColor: theme.backgroundRoot }]}>
-      <Text>
+    <View className="flex-1 justify-center items-center bg-background">
+      <Text className="text-foreground">
         页面不存在
       </Text>
-      <Link href="/" style={[styles.gohome]}>
+      <Link href="/" className="text-accent mt-6">
         返回首页
       </Link>
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  gohome: {
-    marginTop: Spacing['2xl'],
-  },
-});

package/lib/__templates__/expo/client/app/_layout.tsx

@@ -5,7 +5,9 @@ import { StatusBar } from 'expo-status-bar';
 import { LogBox } from 'react-native';
 import Toast from 'react-native-toast-message';
 import { AuthProvider } from "@/contexts/AuthContext";
-import { ColorSchemeProvider } from '@/hooks/useColorScheme';
+import { HeroUINativeProvider } from '@/heroui';
+
+import '../global.css';
 
 LogBox.ignoreLogs([
   "TurboModuleRegistry.getEnforcing(...): 'RNMapsAirModule' could not be found",
@@ -15,22 +17,22 @@ LogBox.ignoreLogs([
 export default function RootLayout() {
   return (
     <AuthProvider>
-      <ColorSchemeProvider>
-        <GestureHandlerRootView style={{ flex: 1 }}>
-          <StatusBar style="dark"></StatusBar>
-          <Stack screenOptions={{
-            // 设置所有页面的切换动画为从右侧滑入，适用于iOS 和 Android
-            animation: 'slide_from_right',
-            gestureEnabled: true,
-            gestureDirection: 'horizontal',
-            // 隐藏自带的头部
-            headerShown: false
-          }}>
-            <Stack.Screen name="index" options={{ title: "" }} />
-          </Stack>
-          <Toast />
-        </GestureHandlerRootView>
-      </ColorSchemeProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <HeroUINativeProvider>
+            <StatusBar style="dark"></StatusBar>
+            <Stack screenOptions={{
+              // 设置所有页面的切换动画为从右侧滑入，适用于iOS 和 Android
+              animation: 'slide_from_right',
+              gestureEnabled: true,
+              gestureDirection: 'horizontal',
+              // 隐藏自带的头部
+              headerShown: false
+            }}>
+              <Stack.Screen name="index" options={{ title: "" }} />
+            </Stack>
+            <Toast />
+        </HeroUINativeProvider>
+      </GestureHandlerRootView>
     </AuthProvider>
   );
 }

package/lib/__templates__/expo/client/components/Screen.tsx

@@ -19,6 +19,7 @@ import {
   KeyboardAwareFlatList,
   KeyboardAwareSectionList
 } from 'react-native-keyboard-aware-scroll-view';
+import { withUniwind } from 'uniwind';
 
 /**
  * # Screen 组件使用指南
@@ -140,7 +141,7 @@ const KeyboardAwareScrollable = ({
   });
 };
 
-export const Screen = ({
+const RawScreen = ({
   children,
   backgroundColor = '#fff',
   statusBarStyle = 'dark',
@@ -312,3 +313,5 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
 });
+
+export const Screen = withUniwind(RawScreen);

package/lib/__templates__/expo/client/global.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+@import 'uniwind';
+
+@import './heroui/styles';
+
+@import './theme';

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

@@ -0,0 +1,178 @@
+import { useEffect } from 'react';
+import {
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { useAnimationSettings } from '../../helpers/internal/contexts';
+import { useCombinedAnimationDisabledState } from '../../helpers/internal/hooks';
+import {
+  createContext,
+  getAnimationState,
+  getAnimationValueMergedConfig,
+  getAnimationValueProperty,
+  getIsAnimationDisabledValue,
+  getRootAnimationState,
+} from '../../helpers/internal/utils';
+import {
+  ACCORDION_LAYOUT_TRANSITION,
+  DEFAULT_CONTENT_ENTERING,
+  DEFAULT_CONTENT_EXITING,
+  INDICATOR_SPRING_CONFIG,
+} from './accordion.constants';
+import type {
+  AccordionAnimationContextValue,
+  AccordionContentAnimation,
+  AccordionIndicatorAnimation,
+  AccordionRootAnimation,
+} from './accordion.types';
+
+const [AccordionAnimationProvider, useAccordionAnimation] =
+  createContext<AccordionAnimationContextValue>({
+    name: 'AccordionAnimationContext',
+  });
+
+export { AccordionAnimationProvider, useAccordionAnimation };
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for Accordion root component
+ * Handles layout transition configuration and provides context for child components
+ */
+export function useAccordionRootAnimation(options: {
+  animation: AccordionRootAnimation | undefined;
+}) {
+  const { animation } = options;
+
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+
+  const { animationConfig, isAnimationDisabled } =
+    getRootAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Layout transition animation
+  const layoutTransitionValue = getAnimationValueProperty({
+    animationValue: animationConfig?.layout,
+    property: 'value',
+    defaultValue: ACCORDION_LAYOUT_TRANSITION,
+  });
+
+  return {
+    layoutTransition: isAnimationDisabledValue
+      ? undefined
+      : layoutTransitionValue,
+    isAllAnimationsDisabled,
+  };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for Accordion Indicator component
+ * Handles rotation animation for the chevron icon
+ */
+export function useAccordionIndicatorAnimation(options: {
+  animation: AccordionIndicatorAnimation | undefined;
+  isExpanded: boolean;
+}) {
+  const { animation, isExpanded } = options;
+
+  // Read from global animation context (always available in compound parts)
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Rotation animation values
+  const rotationValue = getAnimationValueProperty({
+    animationValue: animationConfig?.rotation,
+    property: 'value',
+    defaultValue: [0, -180] as [number, number],
+  });
+
+  const rotationSpringConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.rotation,
+    property: 'springConfig',
+    defaultValue: INDICATOR_SPRING_CONFIG,
+  });
+
+  const rotation = useSharedValue(0);
+
+  useEffect(() => {
+    if (isAnimationDisabledValue) {
+      rotation.set(isExpanded ? 1 : 0);
+    } else {
+      rotation.set(withSpring(isExpanded ? 1 : 0, rotationSpringConfig));
+    }
+  }, [isExpanded, isAnimationDisabledValue, rotation, rotationSpringConfig]);
+
+  const rContainerStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          rotate:
+            interpolate(
+              rotation.get(),
+              [0, 1],
+              [rotationValue[0], rotationValue[1]]
+            ) + 'deg',
+        },
+      ],
+    };
+  });
+
+  return {
+    rContainerStyle,
+  };
+}
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for Accordion Content component
+ * Handles entering and exiting animations
+ */
+export function useAccordionContentAnimation(options: {
+  animation: AccordionContentAnimation | undefined;
+}) {
+  const { animation } = options;
+
+  // Read from global animation context (always available in compound parts)
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  const isAnimationDisabledValue = getIsAnimationDisabledValue({
+    isAnimationDisabled,
+    isAllAnimationsDisabled,
+  });
+
+  // Entering animation
+  const enteringValue = getAnimationValueProperty({
+    animationValue: animationConfig?.entering,
+    property: 'value',
+    defaultValue: DEFAULT_CONTENT_ENTERING,
+  });
+
+  // Exiting animation
+  const exitingValue = getAnimationValueProperty({
+    animationValue: animationConfig?.exiting,
+    property: 'value',
+    defaultValue: DEFAULT_CONTENT_EXITING,
+  });
+
+  return {
+    entering: isAnimationDisabledValue ? undefined : enteringValue,
+    exiting: isAnimationDisabledValue ? undefined : exitingValue,
+  };
+}

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

@@ -0,0 +1,62 @@
+import {
+  Easing,
+  FadeIn,
+  FadeOut,
+  LinearTransition,
+} from 'react-native-reanimated';
+
+/**
+ * Display names for Accordion components
+ */
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.Accordion.Root',
+  ITEM: 'HeroUINative.Accordion.Item',
+  TRIGGER: 'HeroUINative.Accordion.Trigger',
+  INDICATOR: 'HeroUINative.Accordion.Indicator',
+  CONTENT: 'HeroUINative.Accordion.Content',
+  CHEVRON_DOWN_ICON: 'HeroUINative.Accordion.ChevronDownIcon',
+} as const;
+
+/**
+ * Default layout transition for accordion animations
+ */
+export const ACCORDION_LAYOUT_TRANSITION = LinearTransition.springify()
+  .damping(140)
+  .stiffness(1600)
+  .mass(4);
+
+/**
+ * Default icon size for the indicator
+ */
+export const DEFAULT_ICON_SIZE = 16;
+
+/**
+ * Rotation values for indicator animation
+ */
+export const INDICATOR_ROTATION = {
+  COLLAPSED: '0deg',
+  EXPANDED: '180deg',
+};
+
+/**
+ * Spring configuration for indicator animation
+ */
+export const INDICATOR_SPRING_CONFIG = {
+  damping: 140,
+  stiffness: 1000,
+  mass: 4,
+};
+
+/**
+ * Default entering animation for accordion content
+ */
+export const DEFAULT_CONTENT_ENTERING = FadeIn.duration(200).easing(
+  Easing.out(Easing.ease)
+);
+
+/**
+ * Default exiting animation for accordion content
+ */
+export const DEFAULT_CONTENT_EXITING = FadeOut.duration(200).easing(
+  Easing.in(Easing.ease)
+);