@sincpro/mobile-ui 0.1.2 → 0.1.4

package/sincpro_mobile_ui/views/Wizard/Wizard.context.tsx

@@ -1,164 +0,0 @@
-import type { ReactNode } from "react";
-import { createContext, useCallback, useContext, useMemo, useState } from "react";
-import { ActivityIndicator, Text, View } from "react-native";
-
-import { ErrorBoundary } from "../../Feedback";
-
-export type WizardStepId = string;
-
-export interface WizardContextValue {
-  currentStep: WizardStepId;
-  stepHistory: WizardStepId[];
-  goToStep: (step: WizardStepId) => void;
-  back: () => void;
-  next: () => void;
-  reset: (initialStep?: WizardStepId) => void;
-  canGoBack: boolean;
-  canGoNext: boolean;
-  totalSteps: number;
-  currentStepIndex: number;
-  progress: number;
-}
-
-export interface WizardProviderProps {
-  children: ReactNode;
-  initialStep: WizardStepId;
-  steps?: WizardStepId[];
-  onComplete?: () => void;
-  onCancel?: () => void;
-  isLoading?: boolean;
-  loadingMessage?: string;
-}
-
-const WizardContext = createContext<WizardContextValue | null>(null);
-
-export function WizardProvider({
-  children,
-  initialStep,
-  steps = [],
-  onComplete,
-  onCancel,
-  isLoading = false,
-  loadingMessage,
-}: WizardProviderProps) {
-  const [currentStep, setCurrentStep] = useState<WizardStepId>(initialStep);
-  const [stepHistory, setStepHistory] = useState<WizardStepId[]>([initialStep]);
-
-  const goToStep = useCallback((step: WizardStepId) => {
-    setStepHistory((prev) => [...prev, step]);
-    setCurrentStep(step);
-  }, []);
-
-  const back = useCallback(() => {
-    setStepHistory((prev) => {
-      if (prev.length <= 1) return prev;
-      const newHistory = prev.slice(0, -1);
-      const previousStep = newHistory[newHistory.length - 1];
-      setCurrentStep(previousStep);
-      return newHistory;
-    });
-  }, []);
-
-  const next = useCallback(() => {
-    if (steps.length === 0) return;
-
-    const currentIndex = steps.indexOf(currentStep);
-    if (currentIndex === -1 || currentIndex === steps.length - 1) {
-      onComplete?.();
-      return;
-    }
-
-    const nextStep = steps[currentIndex + 1];
-    goToStep(nextStep);
-  }, [currentStep, steps, goToStep, onComplete]);
-
-  const reset = useCallback(
-    (step?: WizardStepId) => {
-      const targetStep = step ?? initialStep;
-      setCurrentStep(targetStep);
-      setStepHistory([targetStep]);
-    },
-    [initialStep],
-  );
-
-  const canGoBack = useMemo(() => stepHistory.length > 1, [stepHistory.length]);
-
-  const canGoNext = useMemo(() => {
-    if (steps.length === 0) return false;
-    const currentIndex = steps.indexOf(currentStep);
-    return currentIndex !== -1 && currentIndex < steps.length - 1;
-  }, [currentStep, steps]);
-
-  const currentStepIndex = useMemo(() => {
-    if (steps.length === 0) return 0;
-    return steps.indexOf(currentStep);
-  }, [currentStep, steps]);
-
-  const progress = useMemo(() => {
-    if (steps.length === 0) return 0;
-    return ((currentStepIndex + 1) / steps.length) * 100;
-  }, [currentStepIndex, steps.length]);
-
-  const value: WizardContextValue = useMemo(
-    () => ({
-      currentStep,
-      stepHistory,
-      goToStep,
-      back,
-      next,
-      reset,
-      canGoBack,
-      canGoNext,
-      totalSteps: steps.length,
-      currentStepIndex,
-      progress,
-    }),
-    [
-      currentStep,
-      stepHistory,
-      goToStep,
-      back,
-      next,
-      reset,
-      canGoBack,
-      canGoNext,
-      steps.length,
-      currentStepIndex,
-      progress,
-    ],
-  );
-
-  if (isLoading) {
-    return (
-      <ErrorBoundary>
-        <View className="flex-1">
-          <WizardContext.Provider value={value}>{children}</WizardContext.Provider>
-          <View className="absolute inset-0 bg-black/50 justify-center items-center">
-            <View className="bg-bg-card rounded-xl p-6 min-w-[200px] items-center shadow-lg">
-              <ActivityIndicator className="text-warning" size="large" />
-              {loadingMessage && (
-                <Text className="mt-4 text-base text-text-primary text-center">
-                  {loadingMessage}
-                </Text>
-              )}
-            </View>
-          </View>
-        </View>
-      </ErrorBoundary>
-    );
-  }
-
-  return (
-    <ErrorBoundary>
-      <WizardContext.Provider value={value}>{children}</WizardContext.Provider>
-    </ErrorBoundary>
-  );
-}
-
-export function useWizard(): WizardContextValue {
-  const context = useContext(WizardContext);
-  if (!context) {
-    throw new Error("useWizard must be used within WizardProvider");
-  }
-  return context;
-}

package/sincpro_mobile_ui/views/Wizard/Wizard.tsx

@@ -1,147 +0,0 @@
-import type { FC, ReactNode } from "react";
-import { useEffect } from "react";
-import { TouchableOpacity } from "react-native";
-
-import type { WizardContextValue, WizardProviderProps, WizardStepId } from "./Wizard.context";
-import { useWizard, WizardProvider } from "./Wizard.context";
-
-export interface WizardStepGuard {
-  canEnter?: () => boolean | Promise<boolean>;
-  onEnterFailed?: () => void;
-}
-
-export interface WizardStepLifecycle {
-  onEnter?: () => void | Promise<void>;
-  onExit?: () => void | Promise<void>;
-}
-
-export interface WizardStepProps extends WizardStepGuard, WizardStepLifecycle {
-  name: WizardStepId;
-  children: ReactNode | ((context: WizardContextValue) => ReactNode);
-}
-
-export interface WizardGuardProps extends WizardStepGuard {
-  children: ReactNode;
-}
-
-export interface WizardGoProps {
-  step: WizardStepId;
-  children: ReactNode;
-  onPress?: () => void;
-}
-
-export interface WizardBackProps {
-  children?: ReactNode;
-  onPress?: () => void;
-}
-
-const WizardRoot: FC<WizardProviderProps> = (props) => {
-  return <WizardProvider {...props} />;
-};
-
-const WizardStep: FC<WizardStepProps> = ({
-  name,
-  children,
-  canEnter,
-  onEnterFailed,
-  onEnter,
-  onExit,
-}) => {
-  const wizard = useWizard();
-
-  useEffect(() => {
-    if (wizard.currentStep === name) {
-      const checkAndEnter = async () => {
-        if (canEnter) {
-          const allowed = await canEnter();
-          if (!allowed) {
-            onEnterFailed?.();
-            wizard.back();
-            return;
-          }
-        }
-        await onEnter?.();
-      };
-
-      void checkAndEnter();
-    }
-
-    return () => {
-      if (wizard.currentStep === name) {
-        void onExit?.();
-      }
-    };
-  }, [wizard.currentStep, name, canEnter, onEnterFailed, onEnter, onExit, wizard]);
-
-  if (wizard.currentStep !== name) {
-    return null;
-  }
-
-  if (typeof children === "function") {
-    return <>{children(wizard)}</>;
-  }
-
-  return <>{children}</>;
-};
-
-const WizardGuard: FC<WizardGuardProps> = ({ children, canEnter, onEnterFailed }) => {
-  const wizard = useWizard();
-
-  useEffect(() => {
-    const checkGuard = async () => {
-      if (canEnter) {
-        const allowed = await canEnter();
-        if (!allowed) {
-          onEnterFailed?.();
-          wizard.back();
-        }
-      }
-    };
-
-    void checkGuard();
-  }, [canEnter, onEnterFailed, wizard]);
-
-  return <>{children}</>;
-};
-
-const WizardGo: FC<WizardGoProps> = ({ step, children, onPress }) => {
-  const wizard = useWizard();
-
-  const handlePress = () => {
-    onPress?.();
-    wizard.goToStep(step);
-  };
-
-  if (typeof children === "function") {
-    return <>{(children as any)(handlePress)}</>;
-  }
-
-  return <TouchableOpacity onPress={handlePress}>{children}</TouchableOpacity>;
-};
-
-const WizardBack: FC<WizardBackProps> = ({ children, onPress }) => {
-  const wizard = useWizard();
-
-  const handlePress = () => {
-    onPress?.();
-    wizard.back();
-  };
-
-  if (!children) {
-    return null;
-  }
-
-  if (typeof children === "function") {
-    return <>{(children as any)(handlePress)}</>;
-  }
-
-  return <TouchableOpacity onPress={handlePress}>{children}</TouchableOpacity>;
-};
-
-export const Wizard = {
-  Root: WizardRoot,
-  Step: WizardStep,
-  Guard: WizardGuard,
-  Go: WizardGo,
-  Back: WizardBack,
-};

package/sincpro_mobile_ui/views/Wizard/index.ts

@@ -1,11 +0,0 @@
-export type {
-  WizardBackProps,
-  WizardGoProps,
-  WizardGuardProps,
-  WizardStepGuard,
-  WizardStepLifecycle,
-  WizardStepProps,
-} from "./Wizard";
-export { Wizard } from "./Wizard";
-export type { WizardContextValue, WizardProviderProps, WizardStepId } from "./Wizard.context";
-export { useWizard } from "./Wizard.context";

package/sincpro_mobile_ui/views/types/IFormView.ts

@@ -1,24 +0,0 @@
-import { ReactNode } from "react";
-
-import { UIItem } from "./UIItem";
-
-export interface IFormView<T> extends UIItem {
-  name: string;
-  description?: string;
-  item?: T;
-  isLoading?: boolean;
-  isEmpty?: boolean;
-  Toolbar?: ReactNode;
-  HeaderActionButton?: ReactNode;
-  Footer?: ReactNode;
-  FormComponent?: React.ComponentType<{
-    item: T;
-    readonly?: boolean;
-    isLoading?: boolean;
-    onSubmit?: () => void;
-  }>;
-  Groups?: ReactNode[];
-  onBack?: () => void | Promise<void>;
-  onSubmit?: () => void | Promise<void>;
-  onRefresh?: () => void | Promise<void>;
-}

package/sincpro_mobile_ui/views/types/IListView.ts

@@ -1,78 +0,0 @@
-import { ReactNode } from "react";
-
-import { UICollectionItem, UIItem } from "./UIItem";
-
-export type IRowItem<T> = T &
-  UIItem & {
-    id: string | number;
-    index: number;
-    rowTitle: string;
-    rowSubtitle?: string;
-  };
-
-export interface IRowItemProps<T> extends UIItem {
-  item: IRowItem<T> | T;
-}
-
-export interface IListView<T> extends UICollectionItem<T> {
-  name: string;
-  description?: string;
-  items: T[];
-  isLoading?: boolean;
-  onRefresh?: () => void | Promise<void>;
-  onBack?: () => void | Promise<void>;
-  ItemComponent?: React.ComponentType<IRowItemProps<T>>;
-  ToolbarComponent?: ReactNode;
-  SearchComponent?: ReactNode;
-  ActionComponent?: ReactNode;
-  FooterComponent?: ReactNode;
-  FloatingButtonComponent?: ReactNode;
-  EmptyComponent?: ReactNode;
-}
-
-export type RowKeys<T> = Partial<{
-  id?: keyof T;
-  rowTitle?: keyof T;
-  rowSubtitle?: keyof T;
-  readOnly?: keyof T;
-}>;
-
-const defaultRowKeys: RowKeys<any> = {
-  id: "id",
-  rowTitle: "name",
-  rowSubtitle: "description",
-  readOnly: "readonly",
-};
-
-export function toRowItem<T>(item: T, index: number, mapKeys?: RowKeys<T>): IRowItem<T> {
-  let mapper: RowKeys<T> = {};
-  if (!mapKeys) {
-    mapper = defaultRowKeys as RowKeys<T>;
-  } else {
-    mapper = { ...defaultRowKeys, ...mapKeys } as RowKeys<T>;
-  }
-
-  if (typeof item === "string" || typeof item === "number") {
-    return {
-      id: item,
-      rowTitle: String(item),
-      rowSubtitle: undefined,
-      readonly: false,
-    } as IRowItem<T>;
-  }
-
-  const rowItem = Object.create(Object.getPrototypeOf(item));
-  Object.assign(rowItem, item, {
-    id: item[mapper.id!] || "N/A",
-    index: index,
-    rowTitle: item[mapper.rowTitle!] || "N/A",
-    rowSubtitle: item[mapper.rowSubtitle!] || undefined,
-    readonly: item[mapper.readOnly!] || false,
-  });
-
-  return rowItem as IRowItem<T>;
-}
-
-export function toRowItems<T>(items: T[], mapKeys?: RowKeys<T>): IRowItem<T>[] {
-  return items.map((item, index) => toRowItem(item, index, mapKeys));
-}

package/sincpro_mobile_ui/views/types/UIItem.ts

@@ -1,23 +0,0 @@
-interface UIItemActions {
-  onPress?: () => void;
-  onDelete?: () => void;
-  onUpdate?: () => void;
-  onDuplicate?: () => void;
-}
-
-export interface UIItem extends UIItemActions {
-  readonly?: boolean;
-}
-
-interface UICollectionActions<T> {
-  onSearch?: (query: string) => void | Promise<void>;
-  onPressItem?: (item: T) => void | Promise<void>;
-  onDeleteItem?: (item: T) => void | Promise<void>;
-  onUpdateItem?: (item: T) => void | Promise<void>;
-  onDuplicateItem?: (item: T) => void | Promise<void>;
-  onSelectItem?: (item: T) => void | Promise<void>;
-}
-
-export interface UICollectionItem<T> extends UICollectionActions<T> {
-  readonly?: boolean;
-}

package/sincpro_mobile_ui/widgets/CircleButton.tsx

@@ -1,63 +0,0 @@
-import React, { ComponentType } from "react";
-import { View } from "react-native";
-import { tv } from "tailwind-variants";
-
-import { Display } from "../Display";
-import { IconType } from "../lib/icon";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-
-interface CircleButtonProps {
-  iconType?: IconType;
-  size?: "sm" | "md" | "lg";
-  color?: string;
-  variant?: "primary" | "secondary" | "accent" | "success" | "danger" | "warning";
-  className?: string;
-  customIcon?: ComponentType<{ size?: number; color?: string }>;
-}
-
-const circleButtonVariants = tv({
-  base: "rounded-full items-center justify-center shadow-sm",
-  variants: {
-    size: {
-      sm: "w-12 h-12", // 48px
-      md: "w-15 h-15", // 60px
-      lg: "w-20 h-20", // 80px
-    },
-    variant: {
-      primary: "bg-primary",
-      secondary: "bg-secondary",
-      accent: "bg-accent",
-      success: "bg-success",
-      danger: "bg-danger",
-      warning: "bg-warning",
-    },
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "accent",
-  },
-});
-
-const SIZE_MAP = {
-  sm: { container: 48, icon: 24 },
-  md: { container: 60, icon: 30 },
-  lg: { container: 80, icon: 40 },
-};
-
-export function CircleButton({
-  iconType = "ionicons",
-  size = "md",
-  color = theme.text.inverse,
-  variant = "accent",
-  className,
-  customIcon,
-}: CircleButtonProps) {
-  const iconSize = SIZE_MAP[size].icon;
-
-  return (
-    <View className={cn(circleButtonVariants({ size, variant }), className)}>
-      <Display.Icon color={color} customIcon={customIcon} size={iconSize} type={iconType} />
-    </View>
-  );
-}

package/sincpro_mobile_ui/widgets/GeoPermissionCard.tsx

@@ -1,62 +0,0 @@
-import { View } from "react-native";
-import { tv } from "tailwind-variants";
-
-import { Display, Form } from "../index";
-import { theme } from "../theme";
-import { Typography } from "../Typography";
-
-const statusTextVariants = tv({
-  variants: {
-    granted: {
-      true: "text-green-600",
-      false: "text-red-500",
-    },
-  },
-});
-
-interface GeoPermissionCardProps {
-  title: string;
-  hasPermission?: boolean;
-  loading?: boolean;
-  handleRequestPermission?: () => void;
-}
-
-function GeoPermissionCard({
-  title,
-  loading,
-  handleRequestPermission,
-  hasPermission,
-}: GeoPermissionCardProps) {
-  const granted = hasPermission !== undefined ? hasPermission : false;
-
-  return (
-    <View className="bg-slate-50 rounded-xl p-5 my-2.5 shadow-sm">
-      <View className="flex-row items-start">
-        <Display.Icon
-          color={granted ? theme.success : theme.danger}
-          name={granted ? "check-circle" : "location-off"}
-          size={35}
-          type="material"
-        />
-        <View className="ml-2.5 flex-1">
-          <Typography.Text className="text-base mb-1" semibold>
-            {title}
-          </Typography.Text>
-          <Typography.Text className={statusTextVariants({ granted })}>
-            {granted ? "Permiso activo." : "Permiso inactivo."}
-          </Typography.Text>
-          {!granted && (
-            <Form.Button
-              loading={loading}
-              onPress={handleRequestPermission}
-              size="small"
-              title={"Abrir Configuración"}
-            />
-          )}
-        </View>
-      </View>
-    </View>
-  );
-}
-
-export default GeoPermissionCard;

package/sincpro_mobile_ui/widgets/HomeHeader.tsx

@@ -1,50 +0,0 @@
-import React, { ReactNode } from "react";
-import { TouchableOpacity, View } from "react-native";
-
-import { Display, Typography } from "../index";
-import GradientContainer from "../layouts/GradientContainer";
-import { theme } from "../theme";
-
-interface HomeHeaderProps {
-  readonly title?: string;
-  readonly logo?: ReactNode;
-  readonly backButton?: boolean;
-  readonly onBack?: () => void;
-}
-
-export const HomeHeader: React.FC<HomeHeaderProps> = ({
-  title = "Distribución",
-  logo,
-  backButton = false,
-  onBack,
-}) => {
-  const handleBackPress = onBack ?? (() => {});
-
-  return (
-    <GradientContainer className="pt-10 pb-4 px-4">
-      <View className="relative items-center justify-center">
-        {backButton && (
-          <TouchableOpacity
-            className="absolute top-0 left-0 z-10 border border-text-inverse p-1.5 rounded"
-            onPress={handleBackPress}
-          >
-            <Display.Icon
-              color={theme.text.inverse}
-              name="chevron-back"
-              size={25}
-              type="ionicons"
-            />
-          </TouchableOpacity>
-        )}
-        <View className="items-center justify-center">
-          {logo || <Display.Logo size="medium" />}
-          {!!title && (
-            <Typography.Text className="text-text-inverse" variant="h4">
-              {title}
-            </Typography.Text>
-          )}
-        </View>
-      </View>
-    </GradientContainer>
-  );
-};