@sincpro/mobile-ui 0.1.2

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

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

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

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

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

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

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

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

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

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