@lotics/ui 2.6.1 → 3.1.0

package/src/kanban/default_renderers.tsx

@@ -1,160 +0,0 @@
-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

@@ -1,157 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,135 +0,0 @@
-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,
-  },
-});