@sincpro/mobile-ui 0.1.2

package/sincpro_mobile_ui/views/FormViewV2.tsx

@@ -0,0 +1,248 @@
+import React, { ReactNode } from "react";
+import { RefreshControl, View } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+
+import { ErrorBoundary, Feedback } from "../Feedback";
+import Container from "../layouts/Container";
+import { theme } from "../theme";
+import ScreenHeader, { EVariantScreenHeader } from "../widgets/ScreenHeader";
+import { FormViewProvider, useFormView } from "./FormViewV2.context";
+
+interface FormViewProps<T> {
+  name: string;
+  description?: string;
+  item: T | null;
+  isLoading?: boolean;
+  isEmpty?: boolean;
+  hasError?: boolean;
+  errorMessage?: string;
+  readonly?: boolean;
+  onRefresh?: () => Promise<void>;
+  onRetry?: () => void;
+  onBack?: () => void;
+  withContainer?: boolean;
+  children: ReactNode;
+}
+
+function FormViewRoot<T>({
+  name,
+  description,
+  item,
+  isLoading = false,
+  isEmpty = false,
+  hasError = false,
+  errorMessage,
+  readonly = false,
+  onRefresh,
+  onRetry,
+  onBack,
+  withContainer = true,
+  children,
+}: FormViewProps<T>) {
+  const Wrapper = withContainer ? Container : View;
+  const wrapperProps = withContainer ? {} : { style: { flex: 1 } };
+
+  return (
+    <FormViewProvider
+      description={description}
+      errorMessage={errorMessage}
+      hasError={hasError}
+      isEmpty={isEmpty}
+      isLoading={isLoading}
+      item={item}
+      name={name}
+      onBack={onBack}
+      onRefresh={onRefresh}
+      onRetry={onRetry}
+      readonly={readonly}
+    >
+      <ErrorBoundary>
+        <Wrapper {...wrapperProps}>{children}</Wrapper>
+      </ErrorBoundary>
+    </FormViewProvider>
+  );
+}
+
+function Header({
+  variant = EVariantScreenHeader.FLAT_HEADER,
+  children,
+}: {
+  variant?: EVariantScreenHeader;
+  children?: ReactNode;
+}) {
+  const { name, description, onBack } = useFormView();
+
+  return (
+    <>
+      <ScreenHeader
+        onBack={onBack}
+        subtitle={description ? description : `Seleccionar ${name}`}
+        title={name}
+        variant={variant}
+      >
+        {children}
+      </ScreenHeader>
+    </>
+  );
+}
+
+function HeaderActions({ children }: { children: ReactNode }) {
+  return (
+    <View className="flex-row px-4 my-4 items-center justify-between flex-1 gap-2">
+      {children}
+    </View>
+  );
+}
+
+function HeaderActionsBar({ children }: { children: ReactNode }) {
+  return (
+    <View className="bg-bg-card px-4 py-3 border-b border-border-default flex-row gap-2">
+      {children}
+    </View>
+  );
+}
+
+function Content({
+  withMargin = false,
+  children,
+}: {
+  withMargin?: boolean;
+  children: ReactNode;
+}) {
+  const {
+    name,
+    isLoading,
+    isEmpty,
+    hasError,
+    errorMessage,
+    item,
+    onRefresh,
+    onRetry,
+    onBack,
+    showRefreshing,
+    setShowRefreshing,
+  } = useFormView();
+
+  const handleRefresh = React.useCallback(async () => {
+    setShowRefreshing(true);
+    if (onRefresh) {
+      await onRefresh();
+    }
+    setShowRefreshing(false);
+  }, [onRefresh, setShowRefreshing]);
+
+  const isCenteredContent = isLoading || isEmpty || !item || hasError;
+
+  return (
+    <KeyboardAwareScrollView
+      bottomOffset={20}
+      contentContainerStyle={{
+        flexGrow: 1,
+        justifyContent: isCenteredContent ? "center" : "flex-start",
+        alignItems: isCenteredContent ? "center" : "stretch",
+      }}
+      keyboardShouldPersistTaps="handled"
+      refreshControl={
+        <RefreshControl
+          colors={[theme.primary]}
+          onRefresh={handleRefresh}
+          refreshing={showRefreshing}
+        />
+      }
+      style={{ flex: 1 }}
+    >
+      {isCenteredContent ? (
+        <>
+          {isLoading ? (
+            <Feedback.Loading message={`Cargando ${name}...`} />
+          ) : hasError ? (
+            <Feedback.Error message={errorMessage} onBack={onBack} onRetry={onRetry} />
+          ) : (
+            <Feedback.Empty />
+          )}
+        </>
+      ) : (
+        <View style={withMargin ? { paddingHorizontal: 16 } : undefined}>{children}</View>
+      )}
+    </KeyboardAwareScrollView>
+  );
+}
+
+function Form({ children }: { children: ReactNode }) {
+  const { isEmpty, item } = useFormView();
+
+  if (isEmpty || !item) {
+    return <Feedback.Empty />;
+  }
+
+  return <>{children}</>;
+}
+
+function Groups({ children }: { children: ReactNode }) {
+  const { isEmpty } = useFormView();
+
+  if (isEmpty) {
+    return null;
+  }
+
+  return <>{children}</>;
+}
+
+function Group({
+  children,
+  withMargin = true,
+  elevation = "md",
+}: {
+  children: ReactNode;
+  withMargin?: boolean;
+  elevation?: "sm" | "md" | "lg";
+}) {
+  const groupClass = withMargin
+    ? "bg-bg-card mx-4 my-1 p-1 rounded-lg border border-border-light"
+    : "bg-bg-card p-1 rounded-lg border border-border-light";
+
+  return (
+    <View className={groupClass} style={theme.shadow[elevation]}>
+      {children}
+    </View>
+  );
+}
+
+function Footer({ children }: { children: ReactNode }) {
+  const { isEmpty, isLoading } = useFormView();
+
+  if (isEmpty || isLoading) {
+    return null;
+  }
+
+  return (
+    <View
+      className="bg-bg-card px-4 py-3 border-t border-border-default"
+      style={theme.shadow.sm}
+    >
+      {children}
+    </View>
+  );
+}
+
+// Nested Header components
+const HeaderWithSubComponents = Object.assign(Header, {
+  Actions: HeaderActions,
+  ActionsBar: HeaderActionsBar,
+});
+
+// Nested Content components
+const ContentWithSubComponents = Object.assign(Content, {
+  Form,
+  Groups,
+  Group,
+});
+
+export const FormViewV2 = {
+  Root: FormViewRoot,
+  Header: HeaderWithSubComponents,
+  Content: ContentWithSubComponents,
+  Footer,
+};
+
+export default FormViewV2;

package/sincpro_mobile_ui/views/ListViewV2.context.tsx

@@ -0,0 +1,87 @@
+import { createContext, ReactNode, useContext, useState } from "react";
+
+interface ListViewContextValue<T> {
+  name: string;
+  description?: string;
+  items: T[];
+  isLoading: boolean;
+  hasError: boolean;
+  errorMessage?: string;
+  readonly: boolean;
+  showRefreshing: boolean;
+  setShowRefreshing: (value: boolean) => void;
+  onRefresh?: () => Promise<void>;
+  onRetry?: () => void;
+  onPressItem?: (item: T) => void;
+  onDeleteItem?: (item: T) => void;
+  onSearch?: (query: string) => void;
+  onBack?: () => void;
+}
+
+const Context = createContext<ListViewContextValue<any> | null>(null);
+
+export function ListViewProvider<T>({
+  name,
+  description,
+  items,
+  isLoading = false,
+  hasError = false,
+  errorMessage,
+  readonly = false,
+  onRefresh,
+  onRetry,
+  onPressItem,
+  onDeleteItem,
+  onSearch,
+  onBack,
+  children,
+}: {
+  name: string;
+  description?: string;
+  items: T[];
+  isLoading?: boolean;
+  hasError?: boolean;
+  errorMessage?: string;
+  readonly?: boolean;
+  onRefresh?: () => Promise<void>;
+  onRetry?: () => void;
+  onPressItem?: (item: T) => void;
+  onDeleteItem?: (item: T) => void;
+  onSearch?: (query: string) => void;
+  onBack?: () => void;
+  children: ReactNode;
+}) {
+  const [showRefreshing, setShowRefreshing] = useState(false);
+
+  return (
+    <Context.Provider
+      value={{
+        name,
+        description,
+        items,
+        isLoading,
+        hasError,
+        errorMessage,
+        readonly,
+        showRefreshing,
+        setShowRefreshing,
+        onRefresh,
+        onRetry,
+        onPressItem,
+        onDeleteItem,
+        onSearch,
+        onBack,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  );
+}
+
+export function useListView<T>() {
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error("useListView must be used within ListViewV2");
+  }
+  return context as ListViewContextValue<T>;
+}