vibefast-cli 1.3.0 → 1.3.1

package/recipes/screen-kits-habits/apps/native/src/features/screen-kits/productivity/components/DraggableTaskCard.tsx

@@ -0,0 +1,92 @@
+import React, { useCallback, useMemo } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import Animated, { runOnJS } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+import type { KanbanTask } from '../constants';
+import { TaskCard } from './TaskCard';
+
+/**
+ * Shared drag values used by the kanban drag layer.
+ */
+export type DragSharedValues = {
+  dragX: SharedValue<number>;
+  dragY: SharedValue<number>;
+  dragOffsetX: SharedValue<number>;
+  dragOffsetY: SharedValue<number>;
+};
+
+/**
+ * Props for a draggable kanban task card.
+ */
+type DraggableTaskCardProps = {
+  task: KanbanTask;
+  dragValues: DragSharedValues;
+  isHidden: boolean;
+  onDragStart: (task: KanbanTask, absoluteX: number, absoluteY: number) => void;
+  onDragEnd: (
+    task: KanbanTask,
+    absoluteX: number,
+    absoluteY: number,
+    success: boolean,
+  ) => void;
+  onLayoutChange: (
+    taskId: string,
+    layout: LayoutChangeEvent['nativeEvent']['layout'],
+  ) => void;
+};
+
+/**
+ * Task card wrapper that wires up pan gestures for kanban dragging.
+ */
+export const DraggableTaskCard = ({
+  task,
+  dragValues,
+  isHidden,
+  onDragStart,
+  onDragEnd,
+  onLayoutChange,
+}: DraggableTaskCardProps): React.ReactElement => {
+  const { dragX, dragY, dragOffsetX, dragOffsetY } = dragValues;
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      onLayoutChange(task.id, event.nativeEvent.layout);
+    },
+    [onLayoutChange, task.id],
+  );
+
+  const gesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .minDistance(2)
+        .shouldCancelWhenOutside(false)
+        .onStart((event) => {
+          runOnJS(onDragStart)(task, event.absoluteX, event.absoluteY);
+        })
+        .onUpdate((event) => {
+          dragX.value = event.absoluteX - dragOffsetX.value;
+          dragY.value = event.absoluteY - dragOffsetY.value;
+        })
+        .onFinalize((event, success) => {
+          runOnJS(onDragEnd)(task, event.absoluteX, event.absoluteY, success);
+        }),
+    [dragOffsetX, dragOffsetY, dragX, dragY, onDragEnd, onDragStart, task],
+  );
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View
+        collapsable={false}
+        onLayout={handleLayout}
+        style={{ opacity: isHidden ? 0 : 1 }}
+        accessibilityRole="button"
+        accessibilityLabel={`Task ${task.title}`}
+        accessibilityHint="Drag to move between columns"
+      >
+        <TaskCard task={task} isDragging={isHidden} />
+      </Animated.View>
+    </GestureDetector>
+  );
+};

package/recipes/screen-kits-habits/apps/native/src/features/screen-kits/productivity/components/KanbanColumn.tsx

@@ -0,0 +1,238 @@
+import { Ionicons } from '@expo/vector-icons';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type {
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+} from 'react-native';
+import { ScrollView, TextInput, View } from 'react-native';
+import { useColorScheme } from 'react-native-css-interop';
+
+import { Pressable, Text } from '@/components/ui';
+
+import type { KanbanStatus, KanbanTask } from '../constants';
+import { PRODUCTIVITY_COLORS } from '../constants';
+import type { DragSharedValues } from './DraggableTaskCard';
+import { DraggableTaskCard } from './DraggableTaskCard';
+
+type KanbanColumnProps = {
+  title: string;
+  tasks: KanbanTask[];
+  status: KanbanStatus;
+  icon: string;
+  activeTaskId: string | null;
+  dragValues: DragSharedValues;
+  isDragging: boolean;
+  onDragStart: (task: KanbanTask, absoluteX: number, absoluteY: number) => void;
+  onDragEnd: (
+    task: KanbanTask,
+    absoluteX: number,
+    absoluteY: number,
+    success: boolean,
+  ) => void;
+  onColumnLayout: (
+    status: KanbanStatus,
+    layout: LayoutChangeEvent['nativeEvent']['layout'],
+  ) => void;
+  onListLayout: (
+    status: KanbanStatus,
+    layout: LayoutChangeEvent['nativeEvent']['layout'],
+  ) => void;
+  onTaskLayout: (
+    taskId: string,
+    layout: LayoutChangeEvent['nativeEvent']['layout'],
+  ) => void;
+  onScrollOffset: (status: KanbanStatus, offsetY: number) => void;
+  onAddTask: () => void;
+  onTitleChange: (status: KanbanStatus, newTitle: string) => void;
+};
+
+export const KanbanColumn = ({
+  title,
+  tasks,
+  status,
+  icon,
+  activeTaskId,
+  dragValues,
+  isDragging,
+  onDragStart,
+  onDragEnd,
+  onColumnLayout,
+  onListLayout,
+  onTaskLayout,
+  onScrollOffset,
+  onAddTask,
+  onTitleChange,
+}: KanbanColumnProps): React.ReactElement => {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === 'dark';
+  const colors = isDark ? PRODUCTIVITY_COLORS.dark : PRODUCTIVITY_COLORS.light;
+
+  const columnRef = useRef<View>(null);
+  const listRef = useRef<View>(null);
+  const count = tasks.length;
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedTitle, setEditedTitle] = useState(title);
+
+  const handleColumnLayout = useCallback(() => {
+    columnRef.current?.measureInWindow((x, y, width, height) => {
+      if (width === 0 || height === 0) return;
+      onColumnLayout(status, { x, y, width, height });
+    });
+  }, [onColumnLayout, status]);
+
+  const handleListLayout = useCallback(() => {
+    listRef.current?.measureInWindow((x, y, width, height) => {
+      if (width === 0 || height === 0) return;
+      onListLayout(status, { x, y, width, height });
+    });
+  }, [onListLayout, status]);
+
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      onScrollOffset(status, event.nativeEvent.contentOffset.y);
+    },
+    [onScrollOffset, status],
+  );
+
+  const handleTitlePress = useCallback(() => {
+    setIsEditing(true);
+  }, []);
+
+  const handleTitleSubmit = useCallback(() => {
+    setIsEditing(false);
+    if (editedTitle.trim() && editedTitle !== title) {
+      onTitleChange(status, editedTitle.trim());
+    } else {
+      setEditedTitle(title);
+    }
+  }, [editedTitle, title, status, onTitleChange]);
+
+  useEffect(() => {
+    if (!isDragging) return;
+    handleColumnLayout();
+    handleListLayout();
+  }, [handleColumnLayout, handleListLayout, isDragging]);
+
+  // Status color indicator
+  const statusColor =
+    status === 'todo'
+      ? PRODUCTIVITY_COLORS.todo
+      : status === 'doing'
+        ? PRODUCTIVITY_COLORS.doing
+        : PRODUCTIVITY_COLORS.done;
+
+  return (
+    <View
+      ref={columnRef}
+      collapsable={false}
+      onLayout={handleColumnLayout}
+      className="w-72 h-full mr-4"
+      style={{
+        backgroundColor: colors.columnBg,
+        borderRadius: 20,
+        padding: 16,
+        borderWidth: 1,
+        borderColor: colors.columnBorder,
+      }}
+    >
+      {/* Column Header */}
+      <View className="flex-row items-center justify-between mb-4">
+        <View className="flex-row items-center gap-2 flex-1">
+          <View
+            className="w-3 h-3 rounded-full"
+            style={{ backgroundColor: statusColor }}
+          />
+          <Ionicons
+            name={icon as any}
+            size={18}
+            color={colors.textMuted}
+          />
+          {isEditing ? (
+            <TextInput
+              value={editedTitle}
+              onChangeText={setEditedTitle}
+              onBlur={handleTitleSubmit}
+              onSubmitEditing={handleTitleSubmit}
+              autoFocus
+              selectTextOnFocus
+              className="font-bold text-lg flex-1"
+              style={{
+                color: colors.text,
+                padding: 0,
+                margin: 0,
+              }}
+            />
+          ) : (
+            <Pressable onPress={handleTitlePress} className="flex-1">
+              <Text
+                className="font-bold text-lg"
+                style={{ color: colors.text }}
+              >
+                {title}
+              </Text>
+            </Pressable>
+          )}
+          <View
+            className="px-2 py-0.5 rounded-full"
+            style={{ backgroundColor: isDark ? '#374151' : '#e5e7eb' }}
+          >
+            <Text
+              className="text-xs font-bold"
+              style={{ color: colors.textMuted }}
+            >
+              {count}
+            </Text>
+          </View>
+        </View>
+        <Pressable
+          onPress={onAddTask}
+          className="w-8 h-8 rounded-lg items-center justify-center"
+          style={{ backgroundColor: isDark ? '#262626' : '#f4f4f5' }}
+        >
+          <Ionicons name="add" size={20} color={colors.accent} />
+        </Pressable>
+      </View>
+
+      {/* Task List */}
+      <View ref={listRef} collapsable={false} onLayout={handleListLayout} className="flex-1">
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{ paddingBottom: 20 }}
+          onScroll={handleScroll}
+          scrollEnabled={!isDragging}
+          scrollEventThrottle={16}
+        >
+          {tasks.map((task) => (
+            <DraggableTaskCard
+              key={task.id}
+              task={task}
+              dragValues={dragValues}
+              isHidden={activeTaskId === task.id}
+              onDragStart={onDragStart}
+              onDragEnd={onDragEnd}
+              onLayoutChange={onTaskLayout}
+            />
+          ))}
+
+          {/* Empty State / Dropzone visual */}
+          <View
+            className="h-20 rounded-2xl border-2 border-dashed items-center justify-center"
+            style={{
+              borderColor: isDragging ? colors.dropzoneBorder : colors.columnBorder,
+              backgroundColor: isDragging ? colors.dropzone : 'transparent',
+            }}
+          >
+            <Text
+              className="font-medium text-sm"
+              style={{ color: isDragging ? colors.accent : colors.textMuted }}
+            >
+              {isDragging ? 'Drop here' : tasks.length === 0 ? 'No tasks' : ''}
+            </Text>
+          </View>
+        </ScrollView>
+      </View>
+    </View>
+  );
+};

package/recipes/screen-kits-habits/apps/native/src/features/screen-kits/productivity/components/TaskCard.tsx

@@ -0,0 +1,144 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+import { useColorScheme } from 'react-native-css-interop';
+
+import { Text } from '@/components/ui';
+
+import type { KanbanTask } from '../constants';
+import { PRIORITY_CONFIG, PRODUCTIVITY_COLORS, TAG_COLORS } from '../constants';
+
+type TaskCardProps = {
+  task: KanbanTask;
+  style?: StyleProp<ViewStyle>;
+  isDragging?: boolean;
+};
+
+export const TaskCard = ({
+  task,
+  style,
+  isDragging = false,
+}: TaskCardProps): React.ReactElement => {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === 'dark';
+  const colors = isDark ? PRODUCTIVITY_COLORS.dark : PRODUCTIVITY_COLORS.light;
+
+  const tagConfig = TAG_COLORS[task.tag] || TAG_COLORS.Design;
+  const tagBg = isDark ? tagConfig.bgDark : tagConfig.bgLight;
+  const tagText = isDark ? tagConfig.textDark : tagConfig.textLight;
+
+  const priorityConfig = PRIORITY_CONFIG[task.priority];
+  const priorityBg = isDark ? priorityConfig.bgDark : priorityConfig.bgLight;
+  const priorityText = isDark ? priorityConfig.textDark : priorityConfig.textLight;
+
+  return (
+    <View
+      style={[
+        {
+          backgroundColor: colors.card,
+          padding: 16,
+          borderRadius: 16,
+          marginBottom: 12,
+          borderWidth: 1,
+          borderColor: colors.cardBorder,
+          // Shadows
+          shadowColor: isDark ? '#000' : '#000',
+          shadowOffset: { width: 0, height: isDragging ? 12 : 2 },
+          shadowOpacity: isDragging ? 0.25 : (isDark ? 0.3 : 0.08),
+          shadowRadius: isDragging ? 16 : 8,
+          elevation: isDragging ? 12 : 3,
+        },
+        style,
+      ]}
+    >
+      {/* Top row: Tag + Priority + Menu */}
+      <View className="flex-row justify-between items-center mb-3">
+        <View className="flex-row items-center gap-2">
+          {/* Tag */}
+          <View
+            className="px-2 py-1 rounded-md"
+            style={{ backgroundColor: tagBg }}
+          >
+            <Text
+              style={{ color: tagText }}
+              className="text-[10px] font-bold uppercase tracking-wide"
+            >
+              {task.tag}
+            </Text>
+          </View>
+          {/* Priority */}
+          <View
+            className="px-2 py-1 rounded-md flex-row items-center gap-1"
+            style={{ backgroundColor: priorityBg }}
+          >
+            {task.priority === 'high' && (
+              <Ionicons name="arrow-up" size={10} color={priorityText} />
+            )}
+            {task.priority === 'low' && (
+              <Ionicons name="arrow-down" size={10} color={priorityText} />
+            )}
+            <Text
+              style={{ color: priorityText }}
+              className="text-[10px] font-bold uppercase tracking-wide"
+            >
+              {priorityConfig.label}
+            </Text>
+          </View>
+        </View>
+        <Ionicons
+          name="ellipsis-horizontal"
+          size={16}
+          color={colors.textMuted}
+        />
+      </View>
+
+      {/* Title */}
+      <Text
+        className="text-base font-bold mb-4 leading-tight"
+        style={{ color: colors.text }}
+      >
+        {task.title}
+      </Text>
+
+      {/* Bottom row: Members + Comments */}
+      <View className="flex-row justify-between items-center">
+        <View className="flex-row -space-x-2">
+          {task.members.map((m, i) => (
+            <View
+              key={i}
+              className="w-6 h-6 rounded-full items-center justify-center"
+              style={{
+                zIndex: 10 - i,
+                backgroundColor: isDark ? '#374151' : '#e5e7eb',
+                borderWidth: 2,
+                borderColor: colors.card,
+              }}
+            >
+              <Text
+                className="text-[10px] font-bold"
+                style={{ color: colors.textMuted }}
+              >
+                {m}
+              </Text>
+            </View>
+          ))}
+        </View>
+
+        <View className="flex-row items-center gap-1">
+          <Ionicons
+            name="chatbubble-outline"
+            size={14}
+            color={colors.textMuted}
+          />
+          <Text
+            className="text-xs font-medium"
+            style={{ color: colors.textMuted }}
+          >
+            {task.comments}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+};