vibefast-cli 1.3.0 → 1.3.1

package/recipes/screen-kits-habits/apps/native/src/features/screen-kits/productivity/components/add-habit-modal.tsx

@@ -0,0 +1,271 @@
+import { Ionicons } from '@expo/vector-icons';
+import { BlurView } from 'expo-blur';
+import React, { useState } from 'react';
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Animated, { FadeInUp } from 'react-native-reanimated';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+interface AddHabitModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onAdd: (habit: { title: string; icon: string; color: string }) => void;
+}
+
+const COLORS = [
+  '#EF4444',
+  '#F59E0B',
+  '#FCD34D',
+  '#10B981',
+  '#3B82F6',
+  '#6366F1',
+  '#8B5CF6',
+  '#EC4899',
+];
+
+const ICONS = [
+  'book',
+  'nutrition',
+  'barbell',
+  'code-slash',
+  'water',
+  'medkit',
+  'bed',
+  'bicycle',
+  'walk',
+  'sunny',
+];
+
+export function AddHabitModal({ visible, onClose, onAdd }: AddHabitModalProps) {
+  const theme = useThemeConfig();
+  const [title, setTitle] = useState('');
+  const [selectedColor, setSelectedColor] = useState(COLORS[4]);
+  const [selectedIcon, setSelectedIcon] = useState(ICONS[0]);
+
+  const handleSave = () => {
+    if (!title.trim()) return;
+    onAdd({ title, icon: selectedIcon, color: selectedColor });
+    setTitle('');
+    onClose();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      <BlurView intensity={20} style={StyleSheet.absoluteFill} tint="dark">
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={styles.container}
+        >
+          <Pressable style={styles.backdrop} onPress={onClose} />
+
+          <Animated.View
+            entering={FadeInUp.springify().damping(15)}
+            style={[
+              styles.modalContent,
+              {
+                backgroundColor: theme.colors.background,
+                borderColor: theme.colors.border,
+              },
+            ]}
+          >
+            <View style={styles.header}>
+              <Text style={[styles.title, { color: theme.colors.foreground }]}>
+                New Habit
+              </Text>
+              <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                <Ionicons
+                  name="close"
+                  size={24}
+                  color={theme.colors.mutedForeground}
+                />
+              </TouchableOpacity>
+            </View>
+
+            <ScrollView showsVerticalScrollIndicator={false}>
+              <View style={styles.section}>
+                <Text
+                  style={[
+                    styles.label,
+                    { color: theme.colors.mutedForeground },
+                  ]}
+                >
+                  NAME
+                </Text>
+                <TextInput
+                  style={[
+                    styles.input,
+                    {
+                      color: theme.colors.foreground,
+                      backgroundColor: theme.colors.input,
+                      borderColor: theme.colors.border,
+                    },
+                  ]}
+                  placeholder="e.g. Read 30 mins"
+                  placeholderTextColor={theme.colors.mutedForeground}
+                  value={title}
+                  onChangeText={setTitle}
+                  autoFocus
+                />
+              </View>
+
+              <View style={styles.section}>
+                <Text
+                  style={[
+                    styles.label,
+                    { color: theme.colors.mutedForeground },
+                  ]}
+                >
+                  COLOR
+                </Text>
+                <View style={styles.grid}>
+                  {COLORS.map((c) => (
+                    <TouchableOpacity
+                      key={c}
+                      onPress={() => setSelectedColor(c)}
+                      style={[
+                        styles.colorOption,
+                        { backgroundColor: c },
+                        selectedColor === c && {
+                          borderColor: theme.colors.foreground,
+                        },
+                      ]}
+                    >
+                      {selectedColor === c && (
+                        <Ionicons name="checkmark" size={16} color="white" />
+                      )}
+                    </TouchableOpacity>
+                  ))}
+                </View>
+              </View>
+
+              <View style={styles.section}>
+                <Text
+                  style={[
+                    styles.label,
+                    { color: theme.colors.mutedForeground },
+                  ]}
+                >
+                  ICON
+                </Text>
+                <View style={styles.grid}>
+                  {ICONS.map((icon) => (
+                    <TouchableOpacity
+                      key={icon}
+                      onPress={() => setSelectedIcon(icon)}
+                      style={[
+                        styles.iconOption,
+                        {
+                          backgroundColor:
+                            selectedIcon === icon
+                              ? selectedColor
+                              : theme.colors.muted,
+                        },
+                      ]}
+                    >
+                      <Ionicons
+                        name={icon as any}
+                        size={20}
+                        color={
+                          selectedIcon === icon
+                            ? '#FFF'
+                            : theme.colors.mutedForeground
+                        }
+                      />
+                    </TouchableOpacity>
+                  ))}
+                </View>
+              </View>
+
+              <TouchableOpacity
+                onPress={handleSave}
+                style={[
+                  styles.saveButton,
+                  {
+                    backgroundColor: title.trim()
+                      ? selectedColor
+                      : theme.colors.muted,
+                  },
+                ]}
+                disabled={!title.trim()}
+              >
+                <Text style={styles.saveButtonText}>Create Habit</Text>
+              </TouchableOpacity>
+            </ScrollView>
+          </Animated.View>
+        </KeyboardAvoidingView>
+      </BlurView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'flex-end' },
+  backdrop: { ...StyleSheet.absoluteFillObject },
+  modalContent: {
+    borderTopLeftRadius: 32,
+    borderTopRightRadius: 32,
+    padding: 24,
+    paddingBottom: 40,
+    borderWidth: 1,
+    borderBottomWidth: 0,
+    maxHeight: '85%',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  title: { fontSize: 24, fontWeight: '800' },
+  closeButton: { padding: 4 },
+  section: { marginBottom: 24 },
+  label: { fontSize: 12, fontWeight: '700', marginBottom: 12, opacity: 0.7 },
+  input: {
+    height: 56,
+    borderRadius: 16,
+    paddingHorizontal: 16,
+    fontSize: 16,
+    borderWidth: 1,
+  },
+  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 12 },
+  colorOption: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 2,
+    borderColor: 'transparent',
+  },
+  iconOption: {
+    width: 48,
+    height: 48,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  saveButton: {
+    height: 56,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 8,
+  },
+  saveButtonText: { color: '#FFF', fontSize: 16, fontWeight: '700' },
+});

package/recipes/screen-kits-habits/apps/native/src/features/screen-kits/productivity/constants.ts

@@ -0,0 +1,295 @@
+/**
+ * Priority levels for kanban tasks.
+ */
+export const PRIORITY_LEVELS = {
+  low: 'low',
+  medium: 'medium',
+  high: 'high',
+} as const;
+
+export type Priority = (typeof PRIORITY_LEVELS)[keyof typeof PRIORITY_LEVELS];
+
+/**
+ * Priority configuration with colors.
+ */
+export const PRIORITY_CONFIG: Record<Priority, { label: string; bgLight: string; bgDark: string; textLight: string; textDark: string }> = {
+  low: {
+    label: 'Low',
+    bgLight: '#dbeafe',
+    bgDark: '#1e3a5f',
+    textLight: '#1d4ed8',
+    textDark: '#93c5fd',
+  },
+  medium: {
+    label: 'Medium',
+    bgLight: '#fef3c7',
+    bgDark: '#78350f',
+    textLight: '#b45309',
+    textDark: '#fcd34d',
+  },
+  high: {
+    label: 'High',
+    bgLight: '#fee2e2',
+    bgDark: '#7f1d1d',
+    textLight: '#dc2626',
+    textDark: '#fca5a5',
+  },
+};
+
+/**
+ * Theme colors for productivity screen kits - semantic approach.
+ */
+export const PRODUCTIVITY_COLORS = {
+  // Light theme
+  light: {
+    background: '#ffffff',
+    card: '#ffffff',
+    cardBorder: '#e5e7eb',
+    text: '#18181b',
+    textMuted: '#71717a',
+    textSecondary: '#52525b',
+    columnBg: '#f4f4f5',
+    columnBorder: '#e4e4e7',
+    dropzone: '#f0f9ff',
+    dropzoneBorder: '#bae6fd',
+    accent: '#3b82f6',
+    shadow: 'rgba(0, 0, 0, 0.08)',
+  },
+  // Dark theme
+  dark: {
+    background: '#0a0a0a',
+    card: '#171717',
+    cardBorder: '#262626',
+    text: '#fafafa',
+    textMuted: '#a1a1aa',
+    textSecondary: '#d4d4d8',
+    columnBg: '#171717',
+    columnBorder: '#262626',
+    dropzone: '#172554',
+    dropzoneBorder: '#1e40af',
+    accent: '#60a5fa',
+    shadow: 'rgba(0, 0, 0, 0.4)',
+  },
+  // Status colors (same for both themes)
+  todo: '#fbbf24',
+  doing: '#22c55e',
+  done: '#3b82f6',
+};
+
+export const MOCK_PROJECTS = [
+  { id: 'p1', title: 'Website Redesign', progress: 0.75 },
+  { id: 'p2', title: 'Mobile App', progress: 0.4 },
+];
+
+/**
+ * Supported kanban statuses.
+ */
+export const KANBAN_STATUSES = {
+  todo: 'todo',
+  doing: 'doing',
+  done: 'done',
+} as const;
+
+/**
+ * Kanban task status union.
+ */
+export type KanbanStatus = (typeof KANBAN_STATUSES)[keyof typeof KANBAN_STATUSES];
+
+/**
+ * Kanban task model used in screen kits.
+ */
+export type KanbanTask = {
+  id: string;
+  title: string;
+  tag: string;
+  status: KanbanStatus;
+  priority: Priority;
+  members: string[];
+  comments: number;
+};
+
+/**
+ * Kanban column definition for rendering.
+ */
+export type KanbanColumnDefinition = {
+  title: string;
+  status: KanbanStatus;
+  icon: string;
+};
+
+/**
+ * Kanban columns mapped by status.
+ */
+export type KanbanColumns = Record<KanbanStatus, KanbanTask[]>;
+
+/**
+ * Column metadata for the kanban board.
+ */
+export const KANBAN_COLUMNS: KanbanColumnDefinition[] = [
+  { title: 'To Do', status: KANBAN_STATUSES.todo, icon: 'ellipse-outline' },
+  { title: 'In Progress', status: KANBAN_STATUSES.doing, icon: 'time-outline' },
+  { title: 'Done', status: KANBAN_STATUSES.done, icon: 'checkmark-circle-outline' },
+];
+
+export const MOCK_TASKS: KanbanTask[] = [
+  {
+    id: 't1',
+    title: 'Design System',
+    tag: 'Design',
+    status: KANBAN_STATUSES.doing,
+    priority: PRIORITY_LEVELS.high,
+    members: ['A', 'B'],
+    comments: 3,
+  },
+  {
+    id: 't2',
+    title: 'User Research',
+    tag: 'Research',
+    status: KANBAN_STATUSES.done,
+    priority: PRIORITY_LEVELS.medium,
+    members: ['C'],
+    comments: 5,
+  },
+  {
+    id: 't3',
+    title: 'Authentication',
+    tag: 'Backend',
+    status: KANBAN_STATUSES.todo,
+    priority: PRIORITY_LEVELS.high,
+    members: ['A'],
+    comments: 0,
+  },
+  {
+    id: 't4',
+    title: 'API Integration',
+    tag: 'Frontend',
+    status: KANBAN_STATUSES.todo,
+    priority: PRIORITY_LEVELS.medium,
+    members: ['B', 'D'],
+    comments: 8,
+  },
+  {
+    id: 't5',
+    title: 'Accessibility Audit',
+    tag: 'QA',
+    status: KANBAN_STATUSES.doing,
+    priority: PRIORITY_LEVELS.low,
+    members: ['C'],
+    comments: 2,
+  },
+  {
+    id: 't6',
+    title: 'Performance Review',
+    tag: 'DevOps',
+    status: KANBAN_STATUSES.todo,
+    priority: PRIORITY_LEVELS.low,
+    members: ['D'],
+    comments: 1,
+  },
+];
+
+// Heatmap gradient for habit completion (5 levels)
+export const HEATMAP_COLORS = {
+  light: {
+    empty: '#E5E7EB',
+    level1: '#BBF7D0',
+    level2: '#86EFAC',
+    level3: '#4ADE80',
+    level4: '#22C55E',
+  },
+  dark: {
+    empty: '#374151',
+    level1: '#14532D',
+    level2: '#166534',
+    level3: '#15803D',
+    level4: '#22C55E',
+  },
+};
+
+export const STREAK_COLORS = {
+  fire: ['#FF6B00', '#FF8C00', '#FFD700'],
+  cold: '#6B7280',
+};
+
+export type Habit = {
+  id: string;
+  title: string;
+  streak: number;
+  bestStreak: number;
+  icon: string;
+  color: string;
+  weeklyData: boolean[];
+  monthlyData: number[];
+};
+
+const generateMonthlyData = (): number[] => {
+  const data: number[] = [];
+  for (let i = 0; i < 35; i++) {
+    data.push(Math.floor(Math.random() * 5));
+  }
+  return data;
+};
+
+const generateWeeklyData = (completedToday: boolean): boolean[] => {
+  const data: boolean[] = [];
+  for (let i = 0; i < 6; i++) {
+    data.push(Math.random() > 0.3);
+  }
+  data.push(completedToday);
+  return data;
+};
+
+export const MOCK_HABITS: Habit[] = [
+  {
+    id: 'h1',
+    title: 'Read 30 mins',
+    streak: 12,
+    bestStreak: 21,
+    icon: 'book',
+    color: '#8B5CF6',
+    weeklyData: generateWeeklyData(true),
+    monthlyData: generateMonthlyData(),
+  },
+  {
+    id: 'h2',
+    title: 'No Sugar',
+    streak: 5,
+    bestStreak: 14,
+    icon: 'nutrition',
+    color: '#F59E0B',
+    weeklyData: generateWeeklyData(false),
+    monthlyData: generateMonthlyData(),
+  },
+  {
+    id: 'h3',
+    title: 'Workout',
+    streak: 24,
+    bestStreak: 24,
+    icon: 'barbell',
+    color: '#EF4444',
+    weeklyData: generateWeeklyData(true),
+    monthlyData: generateMonthlyData(),
+  },
+  {
+    id: 'h4',
+    title: 'Code',
+    streak: 105,
+    bestStreak: 105,
+    icon: 'code-slash',
+    color: '#10B981',
+    weeklyData: generateWeeklyData(true),
+    monthlyData: generateMonthlyData(),
+  },
+];
+
+/**
+ * Tag color configuration
+ */
+export const TAG_COLORS: Record<string, { bgLight: string; bgDark: string; textLight: string; textDark: string }> = {
+  Design: { bgLight: '#fae8ff', bgDark: '#581c87', textLight: '#a21caf', textDark: '#e879f9' },
+  Research: { bgLight: '#ccfbf1', bgDark: '#134e4a', textLight: '#0d9488', textDark: '#5eead4' },
+  Backend: { bgLight: '#fee2e2', bgDark: '#7f1d1d', textLight: '#dc2626', textDark: '#fca5a5' },
+  Frontend: { bgLight: '#dbeafe', bgDark: '#1e3a5f', textLight: '#2563eb', textDark: '#93c5fd' },
+  QA: { bgLight: '#fef3c7', bgDark: '#78350f', textLight: '#d97706', textDark: '#fcd34d' },
+  DevOps: { bgLight: '#d1fae5', bgDark: '#064e3b', textLight: '#059669', textDark: '#6ee7b7' },
+};

package/recipes/screen-kits-habits/apps/native/src/features/screen-kits/productivity/kanban-utils.ts

@@ -0,0 +1,62 @@
+import { KANBAN_STATUSES } from './constants';
+import type { KanbanColumns, KanbanStatus, KanbanTask } from './constants';
+
+const KANBAN_STATUS_LIST = Object.values(KANBAN_STATUSES) as KanbanStatus[];
+
+/**
+ * Build a column map from a flat list while preserving input order per column.
+ */
+export const buildKanbanColumns = (tasks: KanbanTask[]): KanbanColumns => {
+  return tasks.reduce<KanbanColumns>(
+    (acc, task) => {
+      acc[task.status].push(task);
+      return acc;
+    },
+    {
+      todo: [],
+      doing: [],
+      done: [],
+    },
+  );
+};
+
+const clampIndex = (value: number, max: number): number => {
+  return Math.max(0, Math.min(value, max));
+};
+
+/**
+ * Move a task into a target column at a specific index.
+ */
+export const moveKanbanTask = (
+  columns: KanbanColumns,
+  taskId: string,
+  toStatus: KanbanStatus,
+  toIndex: number,
+): KanbanColumns => {
+  const nextColumns: KanbanColumns = {
+    todo: [...columns.todo],
+    doing: [...columns.doing],
+    done: [...columns.done],
+  };
+
+  let movedTask: KanbanTask | null = null;
+
+  KANBAN_STATUS_LIST.forEach((status) => {
+    const index = nextColumns[status].findIndex((task) => task.id === taskId);
+    if (index === -1) return;
+    const [removed] = nextColumns[status].splice(index, 1);
+    movedTask = { ...removed, status: toStatus };
+  });
+
+  if (!movedTask) return columns;
+
+  const targetTasks = nextColumns[toStatus];
+  const safeIndex = clampIndex(toIndex, targetTasks.length);
+  nextColumns[toStatus] = [
+    ...targetTasks.slice(0, safeIndex),
+    movedTask,
+    ...targetTasks.slice(safeIndex),
+  ];
+
+  return nextColumns;
+};