@lotics/ui 1.10.0 → 1.11.0

package/src/kanban/default_renderers.tsx

@@ -0,0 +1,160 @@
+import { Pressable, StyleSheet, Text, View } from "react-native";
+
+import { Icon } from "../icon";
+import { colors } from "../colors";
+
+import {
+  KanbanRenderAddCardPlaceholderProps,
+  KanbanRenderCollapsedColumnProps,
+  KanbanRenderColumnHeaderProps,
+} from "./types";
+
+export function defaultRenderColumnHeader({
+  title,
+  itemCount,
+  isMinimized,
+  onMinimizeToggle,
+}: KanbanRenderColumnHeaderProps): React.ReactNode {
+  if (isMinimized) {
+    return null;
+  }
+
+  return (
+    <View style={styles.header}>
+      <View style={styles.headerContent}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Text style={styles.headerTitleText}>{title}</Text>
+          <View style={styles.headerCount}>
+            <Text style={styles.headerCountText}>{itemCount}</Text>
+          </View>
+        </View>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Pressable onPressIn={(e) => e.stopPropagation()} onPress={onMinimizeToggle} hitSlop={8}>
+            <Icon name="minimize-2" size={16} color={colors.zinc[400]} />
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export function defaultRenderAddCardPlaceholder({
+  onPress,
+}: KanbanRenderAddCardPlaceholderProps): React.ReactNode {
+  return (
+    <Pressable style={styles.addCard} onPress={onPress}>
+      <Icon name="plus" size={16} color={colors.zinc[400]} />
+      <Text style={styles.addCardText}>Add card</Text>
+    </Pressable>
+  );
+}
+
+export function defaultRenderCollapsedColumn({
+  title,
+  itemCount,
+  showDropIndicator,
+  onExpand,
+}: KanbanRenderCollapsedColumnProps): React.ReactNode {
+  return (
+    <Pressable style={styles.collapsedColumn} onPress={onExpand}>
+      <View style={styles.collapsedContent}>
+        <View style={styles.collapsedCount}>
+          <Text style={styles.collapsedCountText}>{itemCount}</Text>
+        </View>
+        <Text style={styles.collapsedTitle} numberOfLines={1}>
+          {title}
+        </Text>
+      </View>
+      {showDropIndicator && <View style={styles.collapsedDropIndicator} />}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    padding: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.zinc[200],
+  },
+  headerContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  headerTitleText: {
+    fontWeight: "600",
+    color: colors.zinc[700],
+  },
+  headerCount: {
+    backgroundColor: colors.zinc[200],
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 10,
+  },
+  headerCountText: {
+    fontSize: 12,
+    color: colors.zinc[500],
+  },
+  addCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 8,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: colors.zinc[200],
+    borderStyle: "dashed",
+    backgroundColor: colors.white,
+  },
+  addCardText: {
+    fontSize: 13,
+    color: colors.zinc[400],
+  },
+  collapsedColumn: {
+    backgroundColor: colors.zinc[50],
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: colors.zinc[200],
+    alignItems: "center",
+    flex: 1,
+    paddingVertical: 12,
+    paddingHorizontal: 4,
+    alignSelf: "stretch",
+  },
+  collapsedContent: {
+    flex: 1,
+    alignItems: "center",
+    gap: 8,
+  },
+  collapsedCount: {
+    backgroundColor: colors.zinc[200],
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 10,
+  },
+  collapsedCountText: {
+    fontSize: 12,
+    fontWeight: "500",
+    color: colors.zinc[600],
+  },
+  collapsedTitle: {
+    writingDirection: "ltr",
+    transform: [{ rotate: "180deg" }],
+    // @ts-expect-error web-only property for vertical text
+    writingMode: "vertical-rl",
+    fontSize: 14,
+    fontWeight: "600",
+    color: colors.zinc[700],
+    textAlign: "center",
+  },
+  collapsedDropIndicator: {
+    position: "absolute",
+    top: 8,
+    left: 4,
+    right: 4,
+    height: 3,
+    backgroundColor: colors.blue[500],
+    borderRadius: 2,
+  },
+});

package/src/kanban/drag_preview.tsx

@@ -0,0 +1,157 @@
+import React, { memo, useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors } from "../colors";
+import {
+  DragInfo,
+  DragPreviewInfo,
+  KanbanColumn,
+  KanbanRenderCardProps,
+  KanbanRenderColumnHeaderProps,
+} from "./types";
+
+interface DragPreviewProps<T> {
+  columns: KanbanColumn<T>[];
+  dragInfo: DragInfo | null;
+  dragPreview: DragPreviewInfo | null;
+  renderCard: (props: KanbanRenderCardProps<T>) => React.ReactNode;
+  renderColumnHeader: (props: KanbanRenderColumnHeaderProps) => React.ReactNode;
+  onPositionUpdate: (callback: (x: number, y: number) => void) => void;
+  initialPosition: { x: number; y: number } | null;
+}
+
+function DragPreviewInner<T>({
+  columns,
+  dragInfo,
+  dragPreview,
+  renderCard,
+  renderColumnHeader,
+  onPositionUpdate,
+  initialPosition,
+}: DragPreviewProps<T>) {
+  const [position, setPosition] = useState(initialPosition);
+
+  // Register position update callback
+  useEffect(() => {
+    onPositionUpdate((x, y) => setPosition({ x, y }));
+    return () => onPositionUpdate(() => {});
+  }, [onPositionUpdate]);
+
+  // Sync with initial position
+  useEffect(() => {
+    if (initialPosition) setPosition(initialPosition);
+  }, [initialPosition]);
+
+  // Clear position when drag ends
+  useEffect(() => {
+    if (!dragInfo) setPosition(null);
+  }, [dragInfo]);
+
+  if (!dragInfo || !position || !dragPreview) return null;
+
+  const left = position.x - dragPreview.offsetX;
+  const top = position.y - dragPreview.offsetY;
+
+  if (dragInfo.type === "card") {
+    const column = columns.find((col) => col.key === dragInfo.sourceColumnKey);
+    const item = column?.items.find((i) => i.id === dragInfo.id);
+    if (!item) return null;
+
+    return (
+      <div style={{ ...previewStyle, left, top, width: dragPreview.width }}>
+        {renderCard({
+          item: item.data,
+          columnKey: dragInfo.sourceColumnKey,
+          id: dragInfo.id,
+          hovered: false,
+          isDragging: true,
+        })}
+      </div>
+    );
+  }
+
+  if (dragInfo.type === "column") {
+    const column = columns.find((col) => col.key === dragInfo.id);
+    if (!column) return null;
+
+    return (
+      <div
+        style={{
+          ...previewStyle,
+          left,
+          top,
+          width: dragPreview.width,
+          height: dragPreview.height,
+        }}
+      >
+        <View style={styles.columnPreview}>
+          <View style={styles.columnPreviewHeader}>
+            {renderColumnHeader({
+              columnKey: column.key,
+              title: column.title,
+              itemCount: column.items.length,
+              isMinimized: false,
+              onMinimizeToggle: () => {},
+            })}
+          </View>
+          <View style={styles.columnPreviewContent}>
+            {column.items.slice(0, 3).map((item) => (
+              <View key={item.id} style={styles.columnPreviewCard}>
+                {renderCard({
+                  item: item.data,
+                  columnKey: column.key,
+                  id: item.id,
+                  hovered: false,
+                  isDragging: true,
+                })}
+              </View>
+            ))}
+            {column.items.length > 3 && (
+              <View style={styles.columnPreviewMore}>
+                <span style={{ color: colors.zinc[500], fontSize: 12 }}>
+                  +{column.items.length - 3} more
+                </span>
+              </View>
+            )}
+          </View>
+        </View>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export const DragPreview = memo(DragPreviewInner) as typeof DragPreviewInner;
+
+const previewStyle: React.CSSProperties = {
+  position: "fixed",
+  zIndex: 9999,
+  pointerEvents: "none",
+  opacity: 0.85,
+  transform: "rotate(2deg)",
+  boxShadow: "0 8px 24px rgba(0,0,0,0.15)",
+};
+
+const styles = StyleSheet.create({
+  columnPreview: {
+    backgroundColor: colors.zinc[50],
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: colors.zinc[200],
+    overflow: "hidden",
+  },
+  columnPreviewHeader: {
+    borderBottomWidth: 1,
+    borderBottomColor: colors.zinc[200],
+  },
+  columnPreviewContent: {
+    padding: 4,
+  },
+  columnPreviewCard: {
+    marginVertical: 2,
+  },
+  columnPreviewMore: {
+    padding: 8,
+    alignItems: "center",
+  },
+});

package/src/kanban/index.ts

@@ -0,0 +1,13 @@
+export { KanbanBoard } from "./kanban_board";
+export type { KanbanBoardProps } from "./kanban_board";
+export type {
+  KanbanColumn,
+  KanbanItem,
+  KanbanRenderCardProps,
+  KanbanRenderColumnHeaderProps,
+  KanbanRenderCollapsedColumnProps,
+  KanbanRenderAddCardPlaceholderProps,
+  KanbanRenderInsertCardButtonProps,
+  CardMoveResult,
+  ColumnMoveResult,
+} from "./types";

package/src/kanban/insert_card_zone.tsx

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { KanbanRenderInsertCardButtonProps } from "./types";
+import { Pressable, View, StyleSheet } from "react-native";
+import { colors } from "../colors";
+import { Icon } from "../icon";
+
+const HOVER_DELAY_MS = 200;
+
+// Interactive zone that shows an insert button on hover
+export function InsertCardZone({
+  height,
+  columnKey,
+  index,
+  onAddCardAtIndex,
+  renderInsertCardButton,
+  isDragInProgress,
+}: {
+  height: number;
+  columnKey: string;
+  index: number;
+  onAddCardAtIndex: (columnKey: string, index: number) => void;
+  renderInsertCardButton?: (props: KanbanRenderInsertCardButtonProps) => React.ReactNode;
+  /** When true, drag is in progress and insert UI should be hidden */
+  isDragInProgress?: boolean;
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Cleanup timeout on unmount to prevent memory leak
+  useEffect(() => {
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+    };
+  }, []);
+
+  const handlePointerEnter = useCallback(() => {
+    hoverTimeoutRef.current = setTimeout(() => {
+      setIsHovered(true);
+    }, HOVER_DELAY_MS);
+  }, []);
+
+  const handlePointerLeave = useCallback(() => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+    setIsHovered(false);
+  }, []);
+
+  const handlePress = useCallback(() => {
+    onAddCardAtIndex(columnKey, index);
+  }, [columnKey, index, onAddCardAtIndex]);
+
+  // Don't show insert UI during drag operations
+  const showInsertUI = isHovered && !isDragInProgress;
+
+  if (renderInsertCardButton) {
+    return (
+      <View
+        style={[insertZoneStyles.container, { height }]}
+        onPointerEnter={handlePointerEnter}
+        onPointerLeave={handlePointerLeave}
+      >
+        {showInsertUI &&
+          renderInsertCardButton({
+            columnKey,
+            index,
+            onPress: handlePress,
+          })}
+      </View>
+    );
+  }
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+      style={[insertZoneStyles.container, { height }]}
+    >
+      {showInsertUI && (
+        <View style={insertZoneStyles.buttonWrapper}>
+          <View style={insertZoneStyles.buttonContent}>
+            <View style={insertZoneStyles.line} />
+            <View style={insertZoneStyles.plusCircle}>
+              <Icon name="plus" size={16} color={colors.white} />
+            </View>
+            <View style={insertZoneStyles.line} />
+          </View>
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+const insertZoneStyles = StyleSheet.create({
+  container: {
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "visible",
+  },
+  buttonWrapper: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: -3,
+    height: 14,
+    zIndex: 10,
+  },
+  buttonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    height: "100%",
+    paddingHorizontal: 4,
+  },
+  line: {
+    flex: 1,
+    height: 2,
+    backgroundColor: colors.zinc[400],
+    borderRadius: 1,
+  },
+  plusCircle: {
+    width: 18,
+    height: 18,
+    borderRadius: 6,
+    backgroundColor: colors.zinc[900],
+    justifyContent: "center",
+    alignItems: "center",
+    marginHorizontal: 4,
+  },
+});