@sincpro/mobile-ui 0.1.4 → 0.2.1

package/README.md

@@ -1,4 +1,6 @@
-# @sincpro/mobile_ui
+# @sincpro/mobile-ui
+
+> 🤖 **Agentes de IA:** leé [`AGENTS.md`](AGENTS.md) (orientación del ecosistema, patrones) y [`docs/GOTCHAS.md`](docs/GOTCHAS.md) (trampas conocidas).
 
 Sincpro Mobile design system: generic, presentational React Native components.
 
@@ -9,24 +11,49 @@ Sincpro Mobile design system: generic, presentational React Native components.
 ## Install
 
 ```bash
-yarn add @sincpro/mobile_ui
+npx expo install @sincpro/mobile-ui
+```
+
+Peer dependencies (provided by the host app): `react`, `react-native`, `nativewind`, `react-native-reanimated`, `react-native-svg`, `react-native-safe-area-context`, `react-native-keyboard-controller`, `react-native-worklets`, `react-hook-form`, `react-native-currency-input`, `@expo/vector-icons`, `@expo-google-fonts/montserrat`, and the expo modules listed in `package.json`.
+
+## Tailwind preset (required)
+
+The components use design tokens exposed as Tailwind classes (`bg-primary`, `text-text-secondary`, …) backed by CSS variables. The consumer app wires them via the shipped preset and content globs:
+
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [require("@sincpro/mobile-ui/tailwind.preset")],
+  content: ["./App.tsx", "./src/**/*.{ts,tsx}", "./node_modules/@sincpro/mobile-ui/**/*.js"],
+  theme: { extend: { colors: { brand: "#FF6600" } } },
+};
 ```
 
-Peer dependencies (provided by the host app): react, react-native, nativewind, react-native-reanimated, react-native-svg, react-native-safe-area-context, and the expo modules listed in `package.json`.
+The token values are CSS variables; override them (a custom theme) in your global CSS `:root`, or inject at runtime with `vars()`. The framework's `createAppShell({ theme })` does this automatically.
 
 ## Usage
 
 ```tsx
-import { Form } from "@sincpro/mobile_ui/Form";
-import { Display } from "@sincpro/mobile_ui/Display";
-import { theme } from "@sincpro/mobile_ui/theme";
-import { formatDate } from "@sincpro/mobile_ui/lib/date";
+import { Form } from "@sincpro/mobile-ui/Form";
+import { Display } from "@sincpro/mobile-ui/Display";
+import { theme } from "@sincpro/mobile-ui/theme";
 ```
 
+## Storybook (on-device, Expo)
+
+Visualiza los componentes en simulador/dispositivo con Storybook React Native (dev-only, no se publica):
+
+```bash
+make storybook          # expo start (Expo Go / dev build)
+make storybook-android  # expo run:android
+```
+
+Las stories viven en `.rnstorybook/stories/**/*.stories.tsx` e importan desde `@sincpro/mobile-ui/*`. El harness (`App.tsx`, `metro.config.js`, `.rnstorybook/`) está excluido del paquete publicado (`files: ["dist", ...]`).
+
 ## Structure
 
 - `Form`, `Display`, `Dialog`, `Feedback`, `Typography`, `Navigation`, `primitives` — component categories
 - `views` — compound views (ListViewV2, FormViewV2, Wizard)
 - `widgets` — generic composed widgets (HomeHeader, MenuGrid, GeoPermissionCard, TimeZoneSelector)
-- `theme` — design tokens + tailwind-variants helpers
-- `lib` — generic utilities (date, monetary, quantity, serializer, icon, timezone)
+- `theme` — design tokens + tailwind-variants helpers (`defineTheme`, `extendTheme`, `themeToVars`)
+- `utils` — generic utilities (date, monetary, quantity, serializer, icon, timezone)

package/{lib → dist}/providers/index.js

@@ -1,2 +1,2 @@
-"use strict";
+export {};
 // Empty - all providers removed

package/{lib → dist}/views/FormViewV2.js

@@ -3,7 +3,7 @@ import { ErrorBoundary, Feedback } from "../Feedback";
 import Container from "../layouts/Container";
 import { theme } from "../theme";
 import { FormViewProvider, useFormView } from "../views/FormViewV2.context";
-import ScreenHeader from "../widgets/ScreenHeader";
+import ScreenHeader, { EVariantScreenHeader } from "../widgets/ScreenHeader";
 import React from "react";
 import { RefreshControl, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
@@ -12,7 +12,7 @@ function FormViewRoot({ name, description, item, isLoading = false, isEmpty = fa
     const wrapperProps = withContainer ? {} : { style: { flex: 1 } };
     return (_jsx(FormViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isEmpty: isEmpty, isLoading: isLoading, item: item, name: name, onBack: onBack, onRefresh: onRefresh, onRetry: onRetry, readonly: readonly, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
 }
-function Header({ variant = "FLAT_HEADER" /* EVariantScreenHeader.FLAT_HEADER */, logoSource, children, }) {
+function Header({ variant = EVariantScreenHeader.FLAT_HEADER, logoSource, children, }) {
     const { name, description, onBack } = useFormView();
     return (_jsx(_Fragment, { children: _jsx(ScreenHeader, { logoSource: logoSource, onBack: onBack, subtitle: description ? description : `Seleccionar ${name}`, title: name, variant: variant, children: children }) }));
 }

package/{lib → dist}/views/ListViewV2.js

@@ -9,7 +9,7 @@ import { cn, tv } from "../theme/tw";
 import { Typography } from "../Typography";
 import { ListViewProvider, useListView } from "../views/ListViewV2.context";
 import { toRowItems } from "../views/types/IListView";
-import ScreenHeader from "../widgets/ScreenHeader";
+import ScreenHeader, { EVariantScreenHeader } from "../widgets/ScreenHeader";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { FlatList, RefreshControl, ScrollView, TouchableOpacity, View, } from "react-native";
 function ListViewRoot({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, backgroundColor, withContainer = true, children, }) {
@@ -20,7 +20,7 @@ function ListViewRoot({ name, description, items, isLoading = false, hasError =
     // Propagate contentWithMargin to ContentList via context
     return (_jsx(ListViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isLoading: isLoading, items: items, name: name, onBack: onBack, onDeleteItem: onDeleteItem, onPressItem: onPressItem, onRefresh: onRefresh, onRetry: onRetry, onSearch: onSearch, readonly: readonly, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
 }
-function Header({ variant = "ROUNDED_HEADER" /* EVariantScreenHeader.ROUNDED_HEADER */, children, }) {
+function Header({ variant = EVariantScreenHeader.ROUNDED_HEADER, children, }) {
     const { name, description, onBack } = useListView();
     return (_jsx(ScreenHeader, { onBack: onBack, subtitle: description ? description : `Seleccionar ${name}`, title: name, variant: variant, children: children }));
 }

package/dist/views/types/UIItem.js

@@ -0,0 +1 @@
+export {};

package/{lib → dist}/widgets/ScreenHeader.d.ts

@@ -1,5 +1,5 @@
 import { type ImageSourcePropType } from "react-native";
-export declare const enum EVariantScreenHeader {
+export declare enum EVariantScreenHeader {
     FLAT_HEADER = "FLAT_HEADER",
     ROUNDED_HEADER = "ROUNDED_HEADER",
     LOGO_WITH_BACK_BUTTON = "LOGO_WITH_BACK_BUTTON",

package/{lib → dist}/widgets/ScreenHeader.js

@@ -4,15 +4,22 @@ import { Navigation } from "../Navigation";
 import { View } from "react-native";
 const Header = Navigation.Header;
 const HeaderToolbar = Navigation.HeaderToolbar;
+export var EVariantScreenHeader;
+(function (EVariantScreenHeader) {
+    EVariantScreenHeader["FLAT_HEADER"] = "FLAT_HEADER";
+    EVariantScreenHeader["ROUNDED_HEADER"] = "ROUNDED_HEADER";
+    EVariantScreenHeader["LOGO_WITH_BACK_BUTTON"] = "LOGO_WITH_BACK_BUTTON";
+    EVariantScreenHeader["ONLY_LOGO"] = "ONLY_LOGO";
+})(EVariantScreenHeader || (EVariantScreenHeader = {}));
 function ScreenHeader({ variant, title = "Distribución", subtitle, logoSource, onBack, children, }) {
     switch (variant) {
-        case "FLAT_HEADER" /* EVariantScreenHeader.FLAT_HEADER */:
+        case EVariantScreenHeader.FLAT_HEADER:
             return (_jsxs(_Fragment, { children: [_jsx(HeaderToolbar, { flat: true, onBack: onBack, subtitle: subtitle, title: title, withBackground: true }), _jsx(View, { children: children })] }));
-        case "ROUNDED_HEADER" /* EVariantScreenHeader.ROUNDED_HEADER */:
+        case EVariantScreenHeader.ROUNDED_HEADER:
             return (_jsx(GradientContainer, { className: "pt-0.5 shadow-lg shadow-black/70 rounded-b-[18px] pb-6", children: _jsx(HeaderToolbar, { flat: true, onBack: onBack, subtitle: subtitle, title: title, withBackground: false, children: children }) }));
-        case "LOGO_WITH_BACK_BUTTON" /* EVariantScreenHeader.LOGO_WITH_BACK_BUTTON */:
+        case EVariantScreenHeader.LOGO_WITH_BACK_BUTTON:
             return (_jsx(Header, { backButton: true, handleBackButton: onBack, logoSource: logoSource, title: "" }));
-        case "ONLY_LOGO" /* EVariantScreenHeader.ONLY_LOGO */:
+        case EVariantScreenHeader.ONLY_LOGO:
             return _jsx(Header, { logoSource: logoSource, title: title });
         default:
             return null;

package/package.json

@@ -1,19 +1,35 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
-  "main": "./lib/index.js",
-  "module": "./lib/index.js",
-  "types": "./lib/index.d.ts",
-  "react-native": "./lib/index.js",
-  "source": "./sincpro_mobile_ui/index.ts",
+  "main": "expo/AppEntry.js",
+  "types": "./dist/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
   "files": [
-    "lib",
+    "dist",
+    "tailwind.preset.js",
     "README.md"
   ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./theme": "./dist/theme/index.js",
+    "./Dialog": "./dist/Dialog/index.js",
+    "./Dialog/BottomSheet": "./dist/Dialog/BottomSheet/index.js",
+    "./Display": "./dist/Display/index.js",
+    "./Feedback": "./dist/Feedback/index.js",
+    "./Form": "./dist/Form/index.js",
+    "./Navigation": "./dist/Navigation/index.js",
+    "./Typography": "./dist/Typography/index.js",
+    "./primitives": "./dist/primitives/index.js",
+    "./widgets": "./dist/widgets/index.js",
+    "./views/Wizard": "./dist/views/Wizard/index.js",
+    "./tailwind.preset": "./tailwind.preset.js",
+    "./theme/globals.css": "./dist/theme/globals.css",
+    "./*": "./dist/*.js",
+    "./package.json": "./package.json"
+  },
   "prettier": {
     "printWidth": 94
   },
@@ -56,30 +72,47 @@
   "devDependencies": {
     "@expo-google-fonts/montserrat": "^0.4.2",
     "@expo/vector-icons": "^15.0.3",
+    "@gorhom/bottom-sheet": "^5",
+    "@react-native-async-storage/async-storage": "^2",
+    "@react-native-community/datetimepicker": "8.4.4",
+    "@storybook/addon-ondevice-actions": "^10.4.5",
+    "@storybook/addon-ondevice-controls": "^10.4.5",
+    "@storybook/react-native": "^10.4.5",
     "@types/big.js": "^6.2.2",
     "@types/react": "~19.1.10",
+    "babel-plugin-module-resolver": "^5.0.3",
     "eslint": "^9.35.0",
     "eslint-config-expo": "~10.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
+    "expo": "~54.0.35",
     "expo-checkbox": "~5.0.8",
     "expo-clipboard": "~8.0.8",
     "expo-linear-gradient": "~15.0.8",
     "expo-localization": "~17.0.9",
+    "expo-status-bar": "~3.0.9",
     "nativewind": "^4.0.1",
     "prettier": "^3.6.2",
     "react": "19.1.0",
     "react-hook-form": "^7.62.0",
     "react-native": "0.81.5",
     "react-native-currency-input": "^1.1.1",
+    "react-native-gesture-handler": "~2.28.0",
     "react-native-keyboard-controller": "1.18.5",
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-svg": "15.12.1",
     "react-native-worklets": "0.5.1",
+    "storybook": "^10.4.5",
+    "tailwindcss": "^3.4.17",
     "tsc-alias": "^1.8.17",
     "typescript": "~5.9.2"
+  },
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios"
   }
 }