libmodulor 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGELOG
 
+## v0.4.0 (2025-01-31)
+
+**feat(target): introduce react-native-pure**
+
+To help with the creation of specific targets, we've added a new one : `react-native-pure`. It's as simple as `react-web-pure`, with no specific UI style. It's a good starting point to take inspiration to create your own GUI target, with your own style.
+
+**Misc**
+
+- Introduced Guides in docs for more advanced scenarios (e.g. Create a target) (https://github.com/c100k/libmodulor/pull/10)
+- Improved the docs for a better readability (https://github.com/c100k/libmodulor/pull/10)
+
 ## v0.3.0 (2025-01-23)
 
 **feat(uc): introduce alternate mounting point**

package/README.md

@@ -25,193 +25,18 @@ Applications created with `libmodulor` have **6 main properties** :
 
 ---
 
-## 📚 Philosophy
-
-One might argue that, with so many "JS frameworks" on the market, there are already too many ways to build new applications today. And they would be right.
-
-That's why the angle taken by `libmodulor` is different. Although opinionated about some things (see below), it is not, regarding the technical side. Instead, it focuses mainly on the "core" of your application.
-
-Thus, you are free to use :
-
-- the data store of your choice (PostgreSQL, MySQL, MariaDB, DynamoDB, SQLite, MongoDB...),
-- the frontend framework of your choice (React, Svelte, Angular, Vue, Solid...),
-- the server of your choice (Express, Fastify, Hono...),
-- the meta framework of your choice (Next, Remix, Astro, Nuxt...),
-- the runtime of your choice (Node, Deno, Bun...)
-- the libraries of your choice (Lodash, React Query...)
-- the tools of your choice (Biome, ESLint, Prettier...)
-- the styling library of your choice for web (tailwind, shadcn, bootstrap, vanilla CSS...)
-- the hosting of your choice (Cloud, IaaS, PaaS, On-Prem, RaspberryPi, your fridge...)
-
-The main goal is to offer higher level primitives that make building business applications faster, without having to use a boilerplate or worse, no/low code, and thus, avoid vendor lock-in.
-
-## 💡 How it works
-
-The library defines a **4-layer architecture** composed of : `UseCase`, `App`, `Product`, `Target`.
-
-```mermaid
-block-beta
-    Target1:2
-    Target2:2
-    Target3:2
-    columns 6
-    Product1:6
-    App1:3
-    App2:3
-    UseCase1
-    UseCase2
-    UseCase3
-    UseCase4
-    UseCase6
-```
-
-_If you're not seeing the mermaid chart (e.g. on npm), head to GitHub._
-
-### UseCase
-
-A use case is the smallest unit. It defines the contract, mainly as an `Input` that goes into lifecycle methods (`client` and/or `server`) to finally give an `Output`. In the end, it constitutes a piece of business functionality.
-
-Inspired by [UML's Use case diagram](https://en.wikipedia.org/wiki/Use_case_diagram) and [Event-driven architecture](https://en.wikipedia.org/wiki/Event-driven_architecture), schematically, it could be defined as follows :
-
-```math
-O = clientMain(serverMain(I))
-```
-
-_Examples : `SignIn`, `CreatePost`, `TransferAccount`, `InviteContacts`_...
-
-Note how it always starts with a verb.
-
-### App
-
-An app is a logical group of use cases.
-
-It's like a "module" (_whatever that means_), inspired by [Domain-driven design (DDD)](https://en.wikipedia.org/wiki/Domain-driven_design) bounded contexts.
-
-_Examples : `Auth`, `Accounting`, `CMS`..._
-
-### Product
-
-A product is a logical group of apps that are assembled together.
-
-Behind this barbaric definition, it's simply what end users know and use.
-
-_Examples : `GitHub`, `Facebook`, `LinkedIn`, `Airbnb`..._
-
-When defined correctly, apps are reusable across multiple products (e.g. `Auth`).
-
-### Target
-
-A target defines how a product is "exposed" to the end user. It's a combination of platform and runtime.
-
-_Examples : `web-react`, `web-angular`, `server-node`, `cli-node`, `cli-stricli`..._
-
-Note that it's the only place where the "infrastructure" choices are applied.
-
-## 👀 At a glance
-
-Here is what a typical use case looks like. For more details, please follow the Guide below.
-
-```typescript
-import { UCInput, /* omitted for brevity */ } from 'libmodulor';
-import { Manifest } from '../manifest.js';
-import { SignInServerMain } from './SignInServerMain.js';
-
-export interface SignInInput extends UCInput {
-    email: UCInputFieldValue<Email>;
-    password: UCInputFieldValue<Password>;
-}
-
-export interface SignInOPI0 extends UCOPIBase {
-    jwt: JWT;
-}
-
-export const SignInUCD: UCDef<SignInInput, SignInOPI0> = {
-    io: {
-        i: {
-            fields: {
-                email: {
-                    type: new TEmail(),
-                },
-                password: {
-                    type: new TPassword({ minLength: 10 }),
-                },
-            },
-        },
-        o: {
-            parts: {
-                _0: {
-                    fields: {
-                        jwt: {
-                            type: new TJWT(),
-                        },
-                    },
-                },
-            },
-        },
-    },
-    lifecycle: {
-        client: {
-            main: SendClientMain,
-            policy: AnonymousUCPolicy,
-        },
-        server: {
-            main: SignInServerMain,
-            policy: AnonymousUCPolicy,
-        },
-    },
-    metadata: Manifest.ucReg.SignIn,
-};
-```
-
 ## 🚀 Getting Started
 
-Enough theory, let's dive in and learn by doing.
-
-> [!NOTE]
-> This Guide is voluntarily very verbose and not scripted so you can get a full overview of how things work. `npx` magic is good. But understanding what happens behind the scenes is good as well.
-
-In this Guide, we'll init a repository (a repository can contain multiple apps and products) and create a real life application using the `libmodulor` primitives.
-
-We'll build a small trading application. It will contain one `App` named `Trading`, which will contain one `UseCase` named `BuyAsset`. The `App` will be mounted in a `Product` called `SuperTrader` which will be exposed via a `server` `Target`, a `web` `Target`, a `cli` `Target` and finally, a `mcp-server` `Target`.
-
-> [!NOTE]
-> MCP stands for [Model Context Protocol](https://modelcontextprotocol.io) introduced recently by [@anthropics](https://github.com/anthropics).
-
-If we adapt the abstract mermaid chart displayed above, concretely, it looks like this :
+To get started, we recommend reading the [📖 Introduction](https://github.com/c100k/libmodulor/blob/v0.4.0/docs/Introduction.md) first. It will give you an overview of what `libmodulor` is and how it works.
 
-```mermaid
-block-beta
-    server
-    web
-    cli
-    mcp_server
-    columns 4
-    SuperTrader:4
-    Trading:2
-    Auth:2
-    BuyAsset
-    ListOrders
-    SignUp
-    SignIn
-```
+Then, you can follow the [🚀 Tutorial](https://github.com/c100k/libmodulor/blob/v0.4.0/docs/Tutorial.md) that will show you all the main notions by building something real.
 
-_If you're not seeing the mermaid chart (e.g. on npm), head to GitHub._
+Finally, for more advanced usages, go to the [📜 Guides](https://github.com/c100k/libmodulor/blob/v0.4.0/docs/Guides.md).
 
-Please note that we'll only develop one use case to keep the Guide straightforward but you'll quickly get the idea to develop all the others by yourself.
+## 👨‍💻 Contribute
 
-Here are the steps we're going to follow. Don't worry. Even though it seems a lot, it will be super quick, efficient and straight to the point.
+If you think you can help in any way, feel free to contact me (cf. `author` in `package.json`). I'd love to chat.
 
-1. [Create the project](https://github.com/c100k/libmodulor/blob/v0.3.0/docs/getting-started/001_Create_the_project.md)
-1. [Create the App](https://github.com/c100k/libmodulor/blob/v0.3.0/docs/getting-started/002_Create_the_App.md)
-1. [Create the UseCase](https://github.com/c100k/libmodulor/blob/v0.3.0/docs/getting-started/003_Create_the_UseCase.md)
-1. [Test the App](https://github.com/c100k/libmodulor/blob/v0.3.0/docs/getting-started/004_Test_the_App.md)
-1. [Create the Product](https://github.com/c100k/libmodulor/blob/v0.3.0/docs/getting-started/005_Create_the_Product.md)
-1. [Create the server Target](https://github.com/c100k/libmodulor/blob/v0.3.0/docs/getting-started/006_Create_the_server_Target.md)
-1. [Create the web Target](https://github.com/c100k/libmodulor/blob/v0.3.0/docs/getting-started/007_Create_the_web_Target.md)
-1. [Switch to a persistent data storage](https://github.com/c100k/libmodulor/blob/v0.3.0/docs/getting-started/008_Switch_to_a_persistent_data_storage.md)
-1. [Define wording for humans](https://github.com/c100k/libmodulor/blob/v0.3.0/docs/getting-started/009_Define_wording_for_humans.md)
-1. [Create the cli Target](https://github.com/c100k/libmodulor/blob/v0.3.0/docs/getting-started/010_Create_the_cli_Target.md)
-1. [Create the mcp-server Target](https://github.com/c100k/libmodulor/blob/v0.3.0/docs/getting-started/011_Create_the_mcp_server_Target.md)
-1. [Summary](https://github.com/c100k/libmodulor/blob/v0.3.0/docs/getting-started/012_Summary.md)
+## ⚖️ License
 
-Let's go with the first step : [Create the project](https://github.com/c100k/libmodulor/blob/v0.3.0/docs/getting-started/001_Create_the_project.md).
+[LGPL-3.0](./LICENSE)

package/dist/esm/index.react-native-pure.d.ts

@@ -0,0 +1,10 @@
+export { UCAutoExecLoader } from './target/react-native-pure/UCAutoExecLoader.js';
+export { UCEntrypointTouchable } from './target/react-native-pure/UCEntrypointTouchable.js';
+export { UCExecTouchable } from './target/react-native-pure/UCExecTouchable.js';
+export { UCForm } from './target/react-native-pure/UCForm.js';
+export { UCFormField } from './target/react-native-pure/UCFormField.js';
+export { UCFormFieldControl } from './target/react-native-pure/UCFormFieldControl.js';
+export { UCFormFieldDesc } from './target/react-native-pure/UCFormFieldDesc.js';
+export { UCFormFieldErr } from './target/react-native-pure/UCFormFieldErr.js';
+export { UCFormFieldLabel } from './target/react-native-pure/UCFormFieldLabel.js';
+export { UCFormSubmitControl } from './target/react-native-pure/UCFormSubmitControl.js';

package/dist/esm/index.react-native-pure.js

@@ -0,0 +1,10 @@
+export { UCAutoExecLoader } from './target/react-native-pure/UCAutoExecLoader.js';
+export { UCEntrypointTouchable } from './target/react-native-pure/UCEntrypointTouchable.js';
+export { UCExecTouchable } from './target/react-native-pure/UCExecTouchable.js';
+export { UCForm } from './target/react-native-pure/UCForm.js';
+export { UCFormField } from './target/react-native-pure/UCFormField.js';
+export { UCFormFieldControl } from './target/react-native-pure/UCFormFieldControl.js';
+export { UCFormFieldDesc } from './target/react-native-pure/UCFormFieldDesc.js';
+export { UCFormFieldErr } from './target/react-native-pure/UCFormFieldErr.js';
+export { UCFormFieldLabel } from './target/react-native-pure/UCFormFieldLabel.js';
+export { UCFormSubmitControl } from './target/react-native-pure/UCFormSubmitControl.js';

package/dist/esm/target/lib/react/entrypoint.d.ts

@@ -1,6 +1,8 @@
 import type { URLPath } from '../../../dt/index.js';
 import type { UC, UCInput, UCOPIBase } from '../../../uc/index.js';
+export type UCEntrypointOnPress = () => Promise<void>;
 export interface UCEntrypointCtx<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> {
+    onPress?: UCEntrypointOnPress;
     path?: URLPath | undefined;
     uc: UC<I, OPI0, OPI1>;
 }

package/dist/esm/target/lib/rn/input.d.ts

@@ -0,0 +1,8 @@
+import type { TextInputProps } from 'react-native';
+import { type DataType, type ErrorMessage } from '../../../dt/index.js';
+import { type UCExecState, type UCInputField } from '../../../uc/index.js';
+export interface RNInputDef {
+    internal?: undefined;
+    spec?: TextInputProps;
+}
+export declare function rnInputDef<T extends DataType>(field: UCInputField<T>, execState: UCExecState, _errMsg: ErrorMessage | null): RNInputDef;

package/dist/esm/target/lib/rn/input.js

@@ -0,0 +1,26 @@
+import { TString, } from '../../../dt/index.js';
+import { ucIsDisabled, ucifHint, ucifId, } from '../../../uc/index.js';
+export function rnInputDef(field, execState, _errMsg) {
+    const def = {
+        internal: undefined,
+        spec: {},
+    };
+    if (!def.spec) {
+        return def;
+    }
+    const { key, def: fDef } = field;
+    const { type: fType } = fDef;
+    def.spec.editable = !ucIsDisabled(execState);
+    def.spec.id = ucifId(key);
+    if (fType instanceof TString) {
+        const constraints = fType.getConstraints();
+        if (constraints) {
+            def.spec.maxLength = constraints.maxLength;
+        }
+        def.spec.multiline = fType.isPotentiallyLong();
+    }
+    def.spec.placeholder = ucifHint(fDef);
+    def.spec.inputMode = fType.rnInputMode();
+    def.spec.secureTextEntry = fType.isSensitive();
+    return def;
+}

package/dist/esm/target/react-native-pure/UCAutoExecLoader.d.ts

@@ -0,0 +1,2 @@
+import { type ReactElement } from 'react';
+export declare function UCAutoExecLoader(): ReactElement;

package/dist/esm/target/react-native-pure/UCAutoExecLoader.js

@@ -0,0 +1,5 @@
+import React, {} from 'react';
+import { ActivityIndicator } from 'react-native';
+export function UCAutoExecLoader() {
+    return React.createElement(ActivityIndicator, null);
+}

package/dist/esm/target/react-native-pure/UCEntrypointTouchable.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { UCInput, UCOPIBase } from '../../uc/index.js';
+import type { UCEntrypointTouchableProps } from '../lib/react/touchable.js';
+export declare function UCEntrypointTouchable<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ onPress, wording, }: UCEntrypointTouchableProps<I, OPI0, OPI1>): ReactElement;

package/dist/esm/target/react-native-pure/UCEntrypointTouchable.js

@@ -0,0 +1,6 @@
+import React, {} from 'react';
+import { Pressable, Text } from 'react-native';
+export function UCEntrypointTouchable({ onPress, wording, }) {
+    return (React.createElement(Pressable, { onPress: onPress },
+        React.createElement(Text, null, wording.label)));
+}

package/dist/esm/target/react-native-pure/UCExecTouchable.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { UCInput, UCOPIBase } from '../../uc/index.js';
+import type { UCExecTouchableProps } from '../lib/react/touchable.js';
+export declare function UCExecTouchable<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ disabled, execState, onSubmit, uc, }: UCExecTouchableProps<I, OPI0, OPI1>): ReactElement;

package/dist/esm/target/react-native-pure/UCExecTouchable.js

@@ -0,0 +1,9 @@
+import React, {} from 'react';
+import { Pressable, Text } from 'react-native';
+import { useDIContext } from '../lib/react/DIContextProvider.js';
+export function UCExecTouchable({ disabled, execState, onSubmit, uc, }) {
+    const { wordingManager } = useDIContext();
+    const label = wordingManager.ucISubmit(uc.def, execState);
+    return (React.createElement(Pressable, { disabled: disabled, onPress: onSubmit },
+        React.createElement(Text, null, label)));
+}

package/dist/esm/target/react-native-pure/UCForm.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { UCInput, UCOPIBase } from '../../uc/index.js';
+import type { UCFormProps } from '../lib/react/form.js';
+export declare function UCForm<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ disabled, execState, onChange, onSubmit, uc, }: UCFormProps<I, OPI0, OPI1>): ReactElement;

package/dist/esm/target/react-native-pure/UCForm.js

@@ -0,0 +1,13 @@
+import React, {} from 'react';
+import { View } from 'react-native';
+import { UCFormField } from './UCFormField.js';
+import { UCFormSubmitControl, } from './UCFormSubmitControl.js';
+export function UCForm({ disabled, execState, onChange, onSubmit, uc, }) {
+    const onPress = async () => {
+        await onSubmit();
+    };
+    return (React.createElement(View, null,
+        uc.inputFieldsForForm().map((f) => (React.createElement(View, { key: f.key },
+            React.createElement(UCFormField, { disabled: disabled, execState: execState, field: f, onChange: onChange })))),
+        React.createElement(UCFormSubmitControl, { execState: execState, disabled: disabled, onPress: onPress, uc: uc })));
+}

package/dist/esm/target/react-native-pure/UCFormField.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement } from 'react';
+import type { DataType } from '../../dt/index.js';
+import { type Props as FormFieldControlProps } from './UCFormFieldControl.js';
+import { type Props as FormFieldLabelProps } from './UCFormFieldLabel.js';
+declare const ELEMENTS: readonly ["control", "desc", "err", "label"];
+type Element = (typeof ELEMENTS)[number];
+type Props<T extends DataType> = FormFieldControlProps<T> & FormFieldLabelProps<T> & {
+    only?: Element[];
+};
+export declare function UCFormField<T extends DataType>({ disabled, execState, field, onChange: onChangeBase, only, }: Props<T>): ReactElement;
+export {};

package/dist/esm/target/react-native-pure/UCFormField.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { useDIContext } from '../lib/react/DIContextProvider.js';
+import { UCFormFieldControl, } from './UCFormFieldControl.js';
+import { UCFormFieldDesc } from './UCFormFieldDesc.js';
+import { UCFormFieldErr } from './UCFormFieldErr.js';
+import { UCFormFieldLabel, } from './UCFormFieldLabel.js';
+const ELEMENTS = ['control', 'desc', 'err', 'label'];
+export function UCFormField({ disabled, execState, field, onChange: onChangeBase, only, }) {
+    const { i18nManager } = useDIContext();
+    const { type } = field.def;
+    const [errMsg, setErrMsg] = useState(null);
+    const elements = only ?? ELEMENTS;
+    const onChange = (f, op, v) => {
+        setErrMsg(null);
+        const vArr = Array.isArray(v) ? v : [v];
+        for (const vv of vArr) {
+            const validation = type.assign(vv).validate();
+            const violation = validation.get();
+            if (violation) {
+                const [key, expected] = violation;
+                setErrMsg(i18nManager.t(key, { vars: { expected } }));
+                break;
+            }
+        }
+        onChangeBase(f, op, v);
+    };
+    return (React.createElement(React.Fragment, null,
+        elements.includes('label') && React.createElement(UCFormFieldLabel, { field: field }),
+        elements.includes('control') && (React.createElement(UCFormFieldControl, { disabled: disabled, execState: execState, field: field, onChange: onChange })),
+        elements.includes('err') && errMsg && (React.createElement(UCFormFieldErr, { errMsg: errMsg })),
+        elements.includes('desc') && React.createElement(UCFormFieldDesc, { field: field })));
+}

package/dist/esm/target/react-native-pure/UCFormFieldControl.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement } from 'react';
+import type { DataType, ErrorMessage } from '../../dt/index.js';
+import { type UCInputField } from '../../uc/index.js';
+import type { UCFormFieldControlOnChange } from '../lib/react/form.js';
+import type { UCPanelState } from '../lib/react/panel.js';
+export type Props<T extends DataType> = UCPanelState & {
+    errMsg?: ErrorMessage | null;
+    field: UCInputField<T>;
+    onChange: UCFormFieldControlOnChange<T>;
+};
+export declare function UCFormFieldControl<T extends DataType>({ errMsg, execState, field, onChange: onChangeBase, }: Props<T>): ReactElement;

package/dist/esm/target/react-native-pure/UCFormFieldControl.js

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react';
+import { TextInput } from 'react-native';
+import { UCInputFieldChangeOperator, ucifRepeatability, } from '../../uc/index.js';
+import { isBlank } from '../../utils/index.js';
+import { rnInputDef } from '../lib/rn/input.js';
+const MULTIPLE_VALUES_SEPARATOR = ',';
+export function UCFormFieldControl({ errMsg = null, execState, field, onChange: onChangeBase, }) {
+    const [internalValue, setInternalValue] = useState(field.getValue());
+    useEffect(() => {
+        setInternalValue(field.getValue());
+    }, [field.getValue()]);
+    const attrs = rnInputDef(field, execState, errMsg);
+    const onChangeText = (value) => {
+        const [isRepeatable] = ucifRepeatability(field.def);
+        if (isRepeatable && typeof value === 'string') {
+            const valueArr = value
+                .split(MULTIPLE_VALUES_SEPARATOR)
+                .map((v) => v.trim());
+            onChangeBase(field, UCInputFieldChangeOperator.SET, valueArr);
+        }
+        else {
+            onChangeBase(field, UCInputFieldChangeOperator.SET, value);
+        }
+        setInternalValue(value);
+    };
+    let valueAsString = '';
+    if (!isBlank(internalValue)) {
+        if (Array.isArray(internalValue)) {
+            valueAsString = internalValue.join(MULTIPLE_VALUES_SEPARATOR);
+        }
+        else {
+            valueAsString = internalValue.toString();
+        }
+    }
+    return (React.createElement(TextInput, { ...attrs.spec, onChangeText: onChangeText, value: valueAsString }));
+}

package/dist/esm/target/react-native-pure/UCFormFieldDesc.d.ts

@@ -0,0 +1,7 @@
+import { type ReactElement } from 'react';
+import type { DataType } from '../../dt/index.js';
+import type { UCInputField } from '../../uc/index.js';
+export interface Props<T extends DataType> {
+    field: UCInputField<T>;
+}
+export declare function UCFormFieldDesc<T extends DataType>({ field, }: Props<T>): ReactElement | null;

package/dist/esm/target/react-native-pure/UCFormFieldDesc.js

@@ -0,0 +1,11 @@
+import React, {} from 'react';
+import { Text } from 'react-native';
+import { useDIContext } from '../lib/react/DIContextProvider.js';
+export function UCFormFieldDesc({ field, }) {
+    const { wordingManager } = useDIContext();
+    const { desc } = wordingManager.ucif(field);
+    if (!desc) {
+        return null;
+    }
+    return React.createElement(Text, null, desc);
+}

package/dist/esm/target/react-native-pure/UCFormFieldErr.d.ts

@@ -0,0 +1,7 @@
+import { type ReactElement } from 'react';
+import type { ErrorMessage } from '../../dt/index.js';
+interface Props {
+    errMsg: ErrorMessage;
+}
+export declare function UCFormFieldErr({ errMsg }: Props): ReactElement;
+export {};

package/dist/esm/target/react-native-pure/UCFormFieldErr.js

@@ -0,0 +1,5 @@
+import React, {} from 'react';
+import { Text } from 'react-native';
+export function UCFormFieldErr({ errMsg }) {
+    return React.createElement(Text, null, errMsg);
+}

package/dist/esm/target/react-native-pure/UCFormFieldLabel.d.ts

@@ -0,0 +1,7 @@
+import { type ReactElement } from 'react';
+import type { DataType } from '../../dt/index.js';
+import type { UCInputField } from '../../uc/index.js';
+export interface Props<T extends DataType> {
+    field: UCInputField<T>;
+}
+export declare function UCFormFieldLabel<T extends DataType>({ field, }: Props<T>): ReactElement;

package/dist/esm/target/react-native-pure/UCFormFieldLabel.js

@@ -0,0 +1,8 @@
+import React, {} from 'react';
+import { Text } from 'react-native';
+import { useDIContext } from '../lib/react/DIContextProvider.js';
+export function UCFormFieldLabel({ field, }) {
+    const { wordingManager } = useDIContext();
+    const { label } = wordingManager.ucif(field);
+    return React.createElement(Text, null, label);
+}

package/dist/esm/target/react-native-pure/UCFormSubmitControl.d.ts

@@ -0,0 +1,9 @@
+import { type ReactElement } from 'react';
+import type { UCInput, UCOPIBase } from '../../uc/index.js';
+import type { UCPanelCtx } from '../lib/react/panel.js';
+export type UCFormSubmitOnPress = () => Promise<void>;
+type Props<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined> = UCPanelCtx<I, OPI0, OPI1> & {
+    onPress?: UCFormSubmitOnPress;
+};
+export declare function UCFormSubmitControl<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ execState, disabled, onPress, uc }: Props<I, OPI0, OPI1>): ReactElement;
+export {};

package/dist/esm/target/react-native-pure/UCFormSubmitControl.js

@@ -0,0 +1,8 @@
+import React, {} from 'react';
+import { Pressable, Text } from 'react-native';
+import { useDIContext } from '../lib/react/DIContextProvider.js';
+export function UCFormSubmitControl({ execState, disabled, onPress, uc }) {
+    const { wordingManager } = useDIContext();
+    return (React.createElement(Pressable, { onPress: onPress, disabled: disabled },
+        React.createElement(Text, null, wordingManager.ucISubmit(uc.def, execState))));
+}

package/dist/esm/target/react-web-pure/UCEntrypointTouchable.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
-import type { UCEntrypointTouchableProps } from '../../index.react.js';
 import type { UCInput, UCOPIBase } from '../../uc/index.js';
+import type { UCEntrypointTouchableProps } from '../lib/react/touchable.js';
 export declare function UCEntrypointTouchable<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ path, wording }: UCEntrypointTouchableProps<I, OPI0, OPI1>): ReactElement;

package/dist/esm/target/react-web-pure/UCExecTouchable.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
-import { type UCExecTouchableProps } from '../../index.react.js';
 import type { UCInput, UCOPIBase } from '../../uc/index.js';
+import type { UCExecTouchableProps } from '../lib/react/touchable.js';
 export declare function UCExecTouchable<I extends UCInput | undefined = undefined, OPI0 extends UCOPIBase | undefined = undefined, OPI1 extends UCOPIBase | undefined = undefined>({ disabled, execState, onSubmit, uc, }: UCExecTouchableProps<I, OPI0, OPI1>): ReactElement;

package/dist/esm/target/react-web-pure/UCExecTouchable.js

@@ -1,5 +1,5 @@
 import React, {} from 'react';
-import { useDIContext } from '../../index.react.js';
+import { useDIContext } from '../lib/react/DIContextProvider.js';
 export function UCExecTouchable({ disabled, execState, onSubmit, uc, }) {
     const { wordingManager } = useDIContext();
     const label = wordingManager.ucISubmit(uc.def, execState);

package/dist/esm/target/react-web-pure/UCFormFieldControl.d.ts

@@ -8,4 +8,4 @@ export type Props<T extends DataType> = UCPanelState & {
     field: UCInputField<T>;
     onChange: UCFormFieldControlOnChange<T>;
 };
-export declare function UCFormFieldControl<T extends DataType>({ disabled, errMsg, execState, field, onChange: onChangeBase, }: Props<T>): ReactElement;
+export declare function UCFormFieldControl<T extends DataType>({ errMsg, execState, field, onChange: onChangeBase, }: Props<T>): ReactElement;

package/dist/esm/target/react-web-pure/UCFormFieldControl.js

@@ -4,7 +4,7 @@ import { htmlInputDef } from '../lib/web/input.js';
 const CHECKED_FIELD_TYPES = ['checkbox', 'radio'];
 const FILE_FIELD_TYPES = ['file'];
 const MULTIPLE_VALUES_SEPARATOR = ',';
-export function UCFormFieldControl({ disabled, errMsg = null, execState, field, onChange: onChangeBase, }) {
+export function UCFormFieldControl({ errMsg = null, execState, field, onChange: onChangeBase, }) {
     const attrs = htmlInputDef(field, execState, errMsg);
     const onChange = (e) => {
         const target = e.currentTarget;
@@ -28,7 +28,7 @@ export function UCFormFieldControl({ disabled, errMsg = null, execState, field,
         }
     };
     if (attrs.internal?.multiline) {
-        return (React.createElement("textarea", { ...attrs.spec, disabled: disabled, onChange: onChange }));
+        return React.createElement("textarea", { ...attrs.spec, onChange: onChange });
     }
-    return React.createElement("input", { ...attrs.spec, disabled: disabled, onChange: onChange });
+    return React.createElement("input", { ...attrs.spec, onChange: onChange });
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "libmodulor",
     "description": "An opinionated TypeScript library to create business oriented applications",
-    "version": "0.3.0",
+    "version": "0.4.0",
     "license": "LGPL-3.0",
     "author": "Chafik H'nini <chafik.hnini@gmail.com>",
     "homepage": "https://github.com/c100k/libmodulor#readme",
@@ -31,6 +31,9 @@
         "./node": {
             "import": "./dist/esm/index.node.js"
         },
+        "./react-native-pure": {
+            "import": "./dist/esm/index.react-native-pure.js"
+        },
         "./react-web-pure": {
             "import": "./dist/esm/index.react-web-pure.js"
         },
@@ -55,25 +58,26 @@
     },
     "peerDependencies": {
         "@hono/node-server": "^1.13.7",
-        "@modelcontextprotocol/sdk": "^1.1.1",
-        "@stricli/core": "^1.1.0",
+        "@modelcontextprotocol/sdk": "^1.4.1",
+        "@stricli/core": "^1.1.1",
         "buffer": "^6.0.3",
         "cookie-parser": "^1.4.7",
         "express": "^4.21.2",
         "express-fileupload": "^1.5.1",
         "fast-check": "^3.23.2",
         "helmet": "^8.0.0",
-        "hono": "^4.6.16",
+        "hono": "^4.6.19",
         "inversify": "^6.2.1",
         "jose": "^5.9.6",
         "knex": "^3.1.0",
         "pg": "^8.13.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-native": "^0.76.6",
         "reflect-metadata": "^0.2.2",
         "sqlite3": "^5.1.7",
         "typescript": "^5.7.3",
-        "vite": "^6.0.7"
+        "vite": "^6.0.11"
     },
     "peerDependenciesMeta": {
         "@hono/node-server": {
@@ -103,6 +107,9 @@
         "react-dom": {
             "optional": true
         },
+        "react-native": {
+            "optional": true
+        },
         "sqlite3": {
             "optional": true
         },