@sincpro/mobile-ui 0.1.4 → 0.2.0

package/README.md

@@ -1,4 +1,4 @@
-# @sincpro/mobile_ui
+# @sincpro/mobile-ui
 
 Sincpro Mobile design system: generic, presentational React Native components.
 
@@ -9,24 +9,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, and the expo modules listed in `package.json`.
+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" } } },
+};
+```
+
+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/dist/views/types/UIItem.js

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

package/package.json

@@ -1,19 +1,35 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "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"
   }
 }