@atls/react-kratos-browser-flows 0.0.2 → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+## Unreleased
+
+### Migration notes
+
+- `Flow#getState()` is now typed as `State | undefined`, reflecting its existing runtime value before a flow is loaded. Repository consumers use `hasState()`, optional handling, or the guarded submit paths; external consumers must handle the pre-load state explicitly.
+- `FlowName` now includes `logout`, matching the existing logout provider without a type assertion. External exhaustive `FlowName` handling must include the new member.
+
+## 0.0.3 (2025-01-22)
+
+### Bug Fixes
+
+- **react:** lint and typecheck errors ([a090051](https://github.com/atls/reactjs/commit/a090051d1007e171df8066e85f15fcf8fd44c4ed))
+- upgrade react, types fixes ([34feb02](https://github.com/atls/reactjs/commit/34feb027a2e2d7e5741509fd1ff846755d217b97))
+- upgrade yarn, typescript, set resolutions ([b235334](https://github.com/atls/reactjs/commit/b23533417af6fb323187ef281b83d8dc5e7bd9dd))
+
+### Features
+
+- add emotion as deps, bump @types/react ([1ce29b3](https://github.com/atls/reactjs/commit/1ce29b384640d9be0550d9c6f4dc07083821137a))
+- **common:** bump yarn ([#143](https://github.com/atls/reactjs/issues/143)) ([8239f82](https://github.com/atls/reactjs/commit/8239f82f1c85d872a99613d3693babc761703b05))
+- **kratos:** remove form, add browser flow ([65f61dd](https://github.com/atls/reactjs/commit/65f61dd5e8e80fd1b3eb0dc848ba4d7a7b8b0e9c))
+- react bump ([#144](https://github.com/atls/reactjs/issues/144)) ([9770fa1](https://github.com/atls/reactjs/commit/9770fa10451b647ed48e226270da68228714d174))
+- update kratos browser flows to client 0.8.2 ([52f9c0f](https://github.com/atls/reactjs/commit/52f9c0fa129cd7d4567ab826c754483a6ddd6817))
+- upgraded ([71a06f6](https://github.com/atls/reactjs/commit/71a06f6f498c928ed33b79f93af5d398a32af487))

package/dist/flows/abstract.flow.d.ts

@@ -0,0 +1,29 @@
+import type { UiNode } from '@ory/kratos-client';
+import type { UiText } from '@ory/kratos-client';
+import type { SubmitSelfServiceFlowBody } from './flow.interfaces';
+import type { SelfServiceFlow } from './flow.interfaces';
+import type { Flow } from './flow.interfaces';
+import type { KratosClient } from './kratos.client';
+import { EventEmitter } from 'events';
+export declare abstract class AbstractFlow<State extends SelfServiceFlow, Body extends SubmitSelfServiceFlowBody> extends EventEmitter implements Flow {
+    #private;
+    protected readonly client: KratosClient;
+    constructor(client: KratosClient);
+    setLoading(loading: boolean): void;
+    isLoading(): boolean;
+    setState(state: SelfServiceFlow): void;
+    hasState(): boolean;
+    getState(): State | undefined;
+    getMessages(): Array<UiText>;
+    getNode(name: string): UiNode | undefined;
+    getNodes(name: string): Array<UiNode>;
+    getNodesGroup(group: string): Array<UiNode>;
+    getValue(name: string): string;
+    getValues(): Body;
+    setValue(name: string, value: string): void;
+    protected setValues(state: State): void;
+    protected requireState(): State;
+    protected complete(href?: string): void;
+    abstract load(): Promise<void>;
+    abstract submit(method?: string): Promise<void>;
+}

package/dist/flows/abstract.flow.js

@@ -1,75 +1,70 @@
 "use strict";
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _AbstractFlow_values, _AbstractFlow_state, _AbstractFlow_loading;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbstractFlow = void 0;
 const events_1 = require("events");
 class AbstractFlow extends events_1.EventEmitter {
+    client;
+    #values = {};
+    #state;
+    #loading = false;
     constructor(client) {
         super();
         this.client = client;
-        _AbstractFlow_values.set(this, {});
-        _AbstractFlow_state.set(this, void 0);
-        _AbstractFlow_loading.set(this, false);
         this.setMaxListeners(50);
     }
     setLoading(loading) {
-        __classPrivateFieldSet(this, _AbstractFlow_loading, loading, "f");
+        this.#loading = loading;
     }
     isLoading() {
-        return __classPrivateFieldGet(this, _AbstractFlow_loading, "f");
+        return this.#loading;
     }
     setState(state) {
-        __classPrivateFieldSet(this, _AbstractFlow_state, state, "f");
+        this.#state = state;
     }
     hasState() {
-        return Boolean(__classPrivateFieldGet(this, _AbstractFlow_state, "f"));
+        return Boolean(this.#state);
     }
     getState() {
-        return __classPrivateFieldGet(this, _AbstractFlow_state, "f");
+        return this.#state;
     }
     getMessages() {
-        return __classPrivateFieldGet(this, _AbstractFlow_state, "f")?.ui?.messages || [];
+        return this.#state?.ui.messages || [];
     }
     getNode(name) {
-        return __classPrivateFieldGet(this, _AbstractFlow_state, "f")?.ui?.nodes?.find((node) => node.attributes.name === name);
+        return this.#state?.ui.nodes.find((node) => node.attributes.name === name);
     }
     getNodes(name) {
-        return (__classPrivateFieldGet(this, _AbstractFlow_state, "f")?.ui?.nodes?.filter((node) => node.attributes.name === name) || []);
+        return (this.#state?.ui.nodes.filter((node) => node.attributes.name === name) || []);
     }
     getNodesGroup(group) {
-        return __classPrivateFieldGet(this, _AbstractFlow_state, "f")?.ui?.nodes?.filter((node) => node.group === group) || [];
+        return this.#state?.ui.nodes.filter((node) => node.group === group) || [];
     }
     getValue(name) {
-        return __classPrivateFieldGet(this, _AbstractFlow_values, "f")[name];
+        return this.#values[name];
     }
     getValues() {
-        return __classPrivateFieldGet(this, _AbstractFlow_values, "f");
+        return this.#values;
     }
     setValue(name, value) {
-        __classPrivateFieldGet(this, _AbstractFlow_values, "f")[name] = value;
+        this.#values[name] = value;
     }
     setValues(state) {
-        state?.ui?.nodes?.forEach(({ attributes }) => {
-            if (!__classPrivateFieldGet(this, _AbstractFlow_values, "f")[attributes.name]) {
-                __classPrivateFieldGet(this, _AbstractFlow_values, "f")[attributes.name] =
+        state.ui.nodes.forEach(({ attributes }) => {
+            if (!this.#values[attributes.name]) {
+                this.#values[attributes.name] =
                     attributes.value || '';
             }
         });
     }
+    requireState() {
+        const state = this.getState();
+        if (!state) {
+            throw new Error('Flow state is not loaded');
+        }
+        return state;
+    }
     complete(href = '/') {
         window.location.href = href;
     }
 }
 exports.AbstractFlow = AbstractFlow;
-_AbstractFlow_values = new WeakMap(), _AbstractFlow_state = new WeakMap(), _AbstractFlow_loading = new WeakMap();

package/dist/flows/errors.flow.d.ts

@@ -0,0 +1,5 @@
+import { AbstractFlow } from './abstract.flow';
+export declare class ErrorsFlow extends AbstractFlow<any, any> {
+    load(): Promise<void>;
+    submit(): Promise<void>;
+}

package/dist/flows/errors.flow.js

@@ -24,7 +24,7 @@ class ErrorsFlow extends abstract_flow_1.AbstractFlow {
                 this.emit('load', data);
             }
         }
-        catch (error) {
+        catch {
             this.setLoading(false);
             this.complete();
         }

package/dist/flows/flow.interfaces.d.ts

@@ -0,0 +1,32 @@
+import type { SelfServiceRegistrationFlow } from '@ory/kratos-client';
+import type { SelfServiceVerificationFlow } from '@ory/kratos-client';
+import type { SelfServiceRecoveryFlow } from '@ory/kratos-client';
+import type { SelfServiceSettingsFlow } from '@ory/kratos-client';
+import type { SelfServiceLoginFlow } from '@ory/kratos-client';
+import type { SubmitSelfServiceRegistrationFlowBody } from '@ory/kratos-client';
+import type { SubmitSelfServiceVerificationFlowBody } from '@ory/kratos-client';
+import type { SubmitSelfServiceRecoveryFlowBody } from '@ory/kratos-client';
+import type { SubmitSelfServiceSettingsFlowBody } from '@ory/kratos-client';
+import type { SubmitSelfServiceLoginFlowBody } from '@ory/kratos-client';
+import type { UiText } from '@ory/kratos-client';
+import type { UiNode } from '@ory/kratos-client';
+import type { EventEmitter } from 'events';
+export type FlowName = 'errors' | 'login' | 'logout' | 'recovery' | 'registration' | 'settings' | 'verification';
+export type SelfServiceFlow = SelfServiceLoginFlow | SelfServiceRecoveryFlow | SelfServiceRegistrationFlow | SelfServiceSettingsFlow | SelfServiceVerificationFlow;
+export type SubmitSelfServiceFlowBody = SubmitSelfServiceLoginFlowBody | SubmitSelfServiceRecoveryFlowBody | SubmitSelfServiceRegistrationFlowBody | SubmitSelfServiceSettingsFlowBody | SubmitSelfServiceVerificationFlowBody;
+export interface Flow extends EventEmitter {
+    setLoading: (loading: boolean) => void;
+    isLoading: () => boolean;
+    setState: (state: SelfServiceFlow) => void;
+    hasState: () => boolean;
+    getState: () => SelfServiceFlow | undefined;
+    getMessages: () => Array<UiText>;
+    getNode: (name: string) => UiNode | undefined;
+    getNodes: (name: string) => Array<UiNode>;
+    getNodesGroup: (group: string) => Array<UiNode>;
+    getValue: (name: string) => any;
+    setValue: (name: string, value: string) => void;
+    getValues: () => SubmitSelfServiceFlowBody;
+    load: () => Promise<void>;
+    submit: (method?: string) => Promise<void>;
+}

package/dist/flows/index.d.ts

@@ -0,0 +1,8 @@
+export type * from './flow.interfaces';
+export * from './registration.flow';
+export * from './verification.flow';
+export * from './recovery.flow';
+export * from './settings.flow';
+export * from './errors.flow';
+export * from './login.flow';
+export * from './logout.flow';

package/dist/flows/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -10,7 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./flow.interfaces"), exports);
 __exportStar(require("./registration.flow"), exports);
 __exportStar(require("./verification.flow"), exports);
 __exportStar(require("./recovery.flow"), exports);

package/dist/flows/kratos.client.d.ts

@@ -0,0 +1,4 @@
+import { V0alpha2Api } from '@ory/kratos-client';
+export declare class KratosClient extends V0alpha2Api {
+    constructor(basePath?: string);
+}

package/dist/flows/login.flow.d.ts

@@ -0,0 +1,7 @@
+import type { SelfServiceLoginFlow } from '@ory/kratos-client';
+import type { SubmitSelfServiceLoginFlowBody } from '@ory/kratos-client';
+import { AbstractFlow } from './abstract.flow';
+export declare class LoginFlow extends AbstractFlow<SelfServiceLoginFlow, SubmitSelfServiceLoginFlowBody> {
+    load(): Promise<void>;
+    submit(method?: string): Promise<void>;
+}

package/dist/flows/login.flow.js

@@ -39,12 +39,13 @@ class LoginFlow extends abstract_flow_1.AbstractFlow {
         }
     }
     async submit(method) {
+        const state = this.requireState();
         const body = this.getValues();
         if (method) {
             body.method = method;
         }
         try {
-            await this.client.submitSelfServiceLoginFlow(this.getState().id, undefined, body, {
+            await this.client.submitSelfServiceLoginFlow(state.id, undefined, body, {
                 withCredentials: true,
             });
             this.complete();

package/dist/flows/logout.flow.d.ts

@@ -0,0 +1,5 @@
+import { AbstractFlow } from './abstract.flow';
+export declare class LogoutFlow extends AbstractFlow<any, any> {
+    load(): Promise<void>;
+    submit(): Promise<void>;
+}

package/dist/flows/recovery.flow.d.ts

@@ -0,0 +1,7 @@
+import type { SelfServiceRecoveryFlow } from '@ory/kratos-client';
+import type { SubmitSelfServiceRecoveryFlowBody } from '@ory/kratos-client';
+import { AbstractFlow } from './abstract.flow';
+export declare class RecoveryFlow extends AbstractFlow<SelfServiceRecoveryFlow, SubmitSelfServiceRecoveryFlowBody> {
+    load(): Promise<void>;
+    submit(method?: string): Promise<void>;
+}

package/dist/flows/recovery.flow.js

@@ -44,12 +44,13 @@ class RecoveryFlow extends abstract_flow_1.AbstractFlow {
         }
     }
     async submit(method) {
+        const state = this.requireState();
         const body = this.getValues();
         if (method) {
             body.method = method;
         }
         try {
-            const { data } = await this.client.submitSelfServiceRecoveryFlow(this.getState().id, undefined, body, {
+            const { data } = await this.client.submitSelfServiceRecoveryFlow(state.id, undefined, body, {
                 withCredentials: true,
             });
             this.setState(data);

package/dist/flows/registration.flow.d.ts

@@ -0,0 +1,7 @@
+import type { SelfServiceRegistrationFlow } from '@ory/kratos-client';
+import type { SubmitSelfServiceRegistrationFlowBody } from '@ory/kratos-client';
+import { AbstractFlow } from './abstract.flow';
+export declare class RegistrationFlow extends AbstractFlow<SelfServiceRegistrationFlow, SubmitSelfServiceRegistrationFlowBody> {
+    load(): Promise<void>;
+    submit(method?: string): Promise<void>;
+}

package/dist/flows/registration.flow.js

@@ -44,12 +44,13 @@ class RegistrationFlow extends abstract_flow_1.AbstractFlow {
         }
     }
     async submit(method) {
+        const state = this.requireState();
         const body = this.getValues();
         if (method) {
             body.method = method;
         }
         try {
-            await this.client.submitSelfServiceRegistrationFlow(this.getState().id, body, {
+            await this.client.submitSelfServiceRegistrationFlow(state.id, body, {
                 withCredentials: true,
             });
             this.complete();

package/dist/flows/settings.flow.d.ts

@@ -0,0 +1,7 @@
+import type { SelfServiceSettingsFlow } from '@ory/kratos-client';
+import type { SubmitSelfServiceSettingsFlowBody } from '@ory/kratos-client';
+import { AbstractFlow } from './abstract.flow';
+export declare class SettingsFlow extends AbstractFlow<SelfServiceSettingsFlow, SubmitSelfServiceSettingsFlowBody> {
+    load(): Promise<void>;
+    submit(method?: string): Promise<void>;
+}

package/dist/flows/settings.flow.js

@@ -42,12 +42,13 @@ class SettingsFlow extends abstract_flow_1.AbstractFlow {
         }
     }
     async submit(method) {
+        const state = this.requireState();
         const body = this.getValues();
         if (method) {
             body.method = method;
         }
         try {
-            const { data } = await this.client.submitSelfServiceSettingsFlow(this.getState().id, undefined, body, {
+            const { data } = await this.client.submitSelfServiceSettingsFlow(state.id, undefined, body, {
                 withCredentials: true,
             });
             this.setState(data);

package/dist/flows/verification.flow.d.ts

@@ -0,0 +1,7 @@
+import type { SelfServiceVerificationFlow } from '@ory/kratos-client';
+import type { SubmitSelfServiceVerificationFlowBody } from '@ory/kratos-client';
+import { AbstractFlow } from './abstract.flow';
+export declare class VerificationFlow extends AbstractFlow<SelfServiceVerificationFlow, SubmitSelfServiceVerificationFlowBody> {
+    load(): Promise<void>;
+    submit(method?: string): Promise<void>;
+}

package/dist/flows/verification.flow.js

@@ -42,12 +42,13 @@ class VerificationFlow extends abstract_flow_1.AbstractFlow {
         }
     }
     async submit(method) {
+        const state = this.requireState();
         const body = this.getValues();
         if (method) {
             body.method = method;
         }
         try {
-            const { data } = await this.client.submitSelfServiceVerificationFlow(this.getState().id, undefined, body, {
+            const { data } = await this.client.submitSelfServiceVerificationFlow(state.id, undefined, body, {
                 withCredentials: true,
             });
             this.setState(data);

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './providers';
+export * from './flows';
+export * from './ui';

package/dist/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/providers/flows.context.d.ts

@@ -0,0 +1,3 @@
+import type { Flow } from '../flows/flow.interfaces';
+export declare const Context: import("react").Context<Flow | null>;
+export declare const Provider: import("react").Provider<Flow | null>, Consumer: import("react").Consumer<Flow | null>;

package/dist/providers/index.d.ts

@@ -0,0 +1,9 @@
+export * from './kratos-registration-flow.provider';
+export * from './kratos-verification-flow.provider';
+export * from './kratos-recovery-flow.provider';
+export * from './kratos-settings-flow.provider';
+export * from './kratos-errors-flow.provider';
+export * from './kraots-logout-flow.provider';
+export * from './kratos-login-flow.provider';
+export * from './kratos-flow.provider';
+export * from './use-flow.hook';

package/dist/providers/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/providers/kraots-logout-flow.provider.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { KratosFlowProviderProps } from './kratos-flow.provider';
+export declare const KratosLogoutFlowProvider: FC<Omit<KratosFlowProviderProps, 'name'>>;

package/dist/providers/kraots-logout-flow.provider.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KratosLogoutFlowProvider = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const kratos_flow_provider_1 = require("./kratos-flow.provider");
-const KratosLogoutFlowProvider = (props) => react_1.default.createElement(kratos_flow_provider_1.KratosFlowProvider, { ...props, name: 'logout' });
+const KratosLogoutFlowProvider = (props) => ((0, jsx_runtime_1.jsx)(kratos_flow_provider_1.KratosFlowProvider, { ...props, name: 'logout' }));
 exports.KratosLogoutFlowProvider = KratosLogoutFlowProvider;

package/dist/providers/kratos-errors-flow.provider.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { KratosFlowProviderProps } from './kratos-flow.provider';
+export declare const KratosErrorsFlowProvider: FC<Omit<KratosFlowProviderProps, 'name'>>;

package/dist/providers/kratos-errors-flow.provider.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KratosErrorsFlowProvider = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const kratos_flow_provider_1 = require("./kratos-flow.provider");
-const KratosErrorsFlowProvider = (props) => react_1.default.createElement(kratos_flow_provider_1.KratosFlowProvider, { ...props, name: 'errors' });
+const KratosErrorsFlowProvider = (props) => ((0, jsx_runtime_1.jsx)(kratos_flow_provider_1.KratosFlowProvider, { ...props, name: 'errors' }));
 exports.KratosErrorsFlowProvider = KratosErrorsFlowProvider;

package/dist/providers/kratos-flow.provider.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { FC } from 'react';
+import type { FlowName } from '../flows/flow.interfaces';
+export interface KratosFlowProviderProps {
+    basePath?: string;
+    name: FlowName;
+    children: Array<ReactNode> | ReactNode;
+}
+export declare const KratosFlowProvider: FC<KratosFlowProviderProps>;

package/dist/providers/kratos-flow.provider.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KratosFlowProvider = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const errors_flow_1 = require("../flows/errors.flow");
 const kratos_client_1 = require("../flows/kratos.client");
 const login_flow_1 = require("../flows/login.flow");
@@ -15,32 +12,28 @@ const registration_flow_1 = require("../flows/registration.flow");
 const settings_flow_1 = require("../flows/settings.flow");
 const verification_flow_1 = require("../flows/verification.flow");
 const flows_context_1 = require("./flows.context");
-const KratosFlowProvider = ({ name, basePath, children }) => {
-    const client = (0, react_2.useMemo)(() => new kratos_client_1.KratosClient(basePath), [basePath]);
-    const flow = (0, react_2.useMemo)(() => {
-        if (name === 'login') {
-            return new login_flow_1.LoginFlow(client);
-        }
-        if (name === 'registration') {
-            return new registration_flow_1.RegistrationFlow(client);
-        }
-        if (name === 'verification') {
-            return new verification_flow_1.VerificationFlow(client);
-        }
-        if (name === 'recovery') {
-            return new recovery_flow_1.RecoveryFlow(client);
-        }
-        if (name === 'settings') {
-            return new settings_flow_1.SettingsFlow(client);
-        }
-        if (name === 'errors') {
-            return new errors_flow_1.ErrorsFlow(client);
-        }
-        if (name === 'logout') {
-            return new logout_flow_1.LogoutFlow(client);
+const KratosFlowProvider = ({ name, basePath, children, }) => {
+    const client = (0, react_1.useMemo)(() => new kratos_client_1.KratosClient(basePath), [basePath]);
+    const flow = (0, react_1.useMemo)(() => {
+        switch (name) {
+            case 'login':
+                return new login_flow_1.LoginFlow(client);
+            case 'registration':
+                return new registration_flow_1.RegistrationFlow(client);
+            case 'verification':
+                return new verification_flow_1.VerificationFlow(client);
+            case 'recovery':
+                return new recovery_flow_1.RecoveryFlow(client);
+            case 'settings':
+                return new settings_flow_1.SettingsFlow(client);
+            case 'errors':
+                return new errors_flow_1.ErrorsFlow(client);
+            case 'logout':
+                return new logout_flow_1.LogoutFlow(client);
+            default:
+                throw new Error(`Unkown flow: ${name}`);
         }
-        throw new Error(`Unkown flow: ${name}`);
     }, [name, client]);
-    return react_1.default.createElement(flows_context_1.Provider, { value: flow }, children);
+    return (0, jsx_runtime_1.jsx)(flows_context_1.Provider, { value: flow, children: children });
 };
 exports.KratosFlowProvider = KratosFlowProvider;

package/dist/providers/kratos-login-flow.provider.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { KratosFlowProviderProps } from './kratos-flow.provider';
+export declare const KratosLoginFlowProvider: FC<Omit<KratosFlowProviderProps, 'name'>>;

package/dist/providers/kratos-login-flow.provider.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KratosLoginFlowProvider = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const kratos_flow_provider_1 = require("./kratos-flow.provider");
-const KratosLoginFlowProvider = (props) => react_1.default.createElement(kratos_flow_provider_1.KratosFlowProvider, { ...props, name: 'login' });
+const KratosLoginFlowProvider = (props) => ((0, jsx_runtime_1.jsx)(kratos_flow_provider_1.KratosFlowProvider, { ...props, name: 'login' }));
 exports.KratosLoginFlowProvider = KratosLoginFlowProvider;

package/dist/providers/kratos-recovery-flow.provider.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { KratosFlowProviderProps } from './kratos-flow.provider';
+export declare const KratosRecoveryFlowProvider: FC<Omit<KratosFlowProviderProps, 'name'>>;

package/dist/providers/kratos-recovery-flow.provider.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KratosRecoveryFlowProvider = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const kratos_flow_provider_1 = require("./kratos-flow.provider");
-const KratosRecoveryFlowProvider = (props) => (react_1.default.createElement(kratos_flow_provider_1.KratosFlowProvider, { ...props, name: 'recovery' }));
+const KratosRecoveryFlowProvider = (props) => ((0, jsx_runtime_1.jsx)(kratos_flow_provider_1.KratosFlowProvider, { ...props, name: 'recovery' }));
 exports.KratosRecoveryFlowProvider = KratosRecoveryFlowProvider;

package/dist/providers/kratos-registration-flow.provider.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { KratosFlowProviderProps } from './kratos-flow.provider';
+export declare const KratosRegistrationFlowProvider: FC<Omit<KratosFlowProviderProps, 'name'>>;

package/dist/providers/kratos-registration-flow.provider.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KratosRegistrationFlowProvider = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const kratos_flow_provider_1 = require("./kratos-flow.provider");
-const KratosRegistrationFlowProvider = (props) => (react_1.default.createElement(kratos_flow_provider_1.KratosFlowProvider, { ...props, name: 'registration' }));
+const KratosRegistrationFlowProvider = (props) => (0, jsx_runtime_1.jsx)(kratos_flow_provider_1.KratosFlowProvider, { ...props, name: 'registration' });
 exports.KratosRegistrationFlowProvider = KratosRegistrationFlowProvider;

package/dist/providers/kratos-settings-flow.provider.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { KratosFlowProviderProps } from './kratos-flow.provider';
+export declare const KratosSettingsFlowProvider: FC<Omit<KratosFlowProviderProps, 'name'>>;

package/dist/providers/kratos-settings-flow.provider.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KratosSettingsFlowProvider = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const kratos_flow_provider_1 = require("./kratos-flow.provider");
-const KratosSettingsFlowProvider = (props) => (react_1.default.createElement(kratos_flow_provider_1.KratosFlowProvider, { ...props, name: 'settings' }));
+const KratosSettingsFlowProvider = (props) => ((0, jsx_runtime_1.jsx)(kratos_flow_provider_1.KratosFlowProvider, { ...props, name: 'settings' }));
 exports.KratosSettingsFlowProvider = KratosSettingsFlowProvider;

package/dist/providers/kratos-verification-flow.provider.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { KratosFlowProviderProps } from './kratos-flow.provider';
+export declare const KratosVerificationFlowProvider: FC<Omit<KratosFlowProviderProps, 'name'>>;

package/dist/providers/kratos-verification-flow.provider.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KratosVerificationFlowProvider = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const kratos_flow_provider_1 = require("./kratos-flow.provider");
-const KratosVerificationFlowProvider = (props) => (react_1.default.createElement(kratos_flow_provider_1.KratosFlowProvider, { ...props, name: 'verification' }));
+const KratosVerificationFlowProvider = (props) => (0, jsx_runtime_1.jsx)(kratos_flow_provider_1.KratosFlowProvider, { ...props, name: 'verification' });
 exports.KratosVerificationFlowProvider = KratosVerificationFlowProvider;

package/dist/providers/use-flow.hook.d.ts

@@ -0,0 +1,2 @@
+import type { Flow } from '../flows/flow.interfaces';
+export declare const useFlow: () => Flow;

package/dist/providers/use-flow.hook.js

@@ -10,7 +10,7 @@ const useFlow = () => {
     if (!flow) {
         throw new Error('Missing <KratosFlowProvider>');
     }
-    const [, setState] = (0, react_3.useState)(null);
+    const [state, setState] = (0, react_3.useState)(null);
     (0, react_2.useEffect)(() => {
         flow.load();
         const callback = (flowState) => {

package/dist/ui/flow-error.component.d.ts

@@ -0,0 +1,13 @@
+import type { ReactElement } from 'react';
+import type { FC } from 'react';
+interface SelfServiceErrorProps {
+    code?: number;
+    status?: string;
+    reason?: string;
+    message?: string;
+}
+export interface FlowErrorProps {
+    children: (error: SelfServiceErrorProps) => ReactElement;
+}
+export declare const FlowError: FC<FlowErrorProps>;
+export {};

package/dist/ui/flow-form.component.d.ts

@@ -0,0 +1,6 @@
+import type { PropsWithChildren } from 'react';
+import type { HTMLAttributes } from 'react';
+import type { FC } from 'react';
+export interface FlowFormProps extends HTMLAttributes<HTMLFormElement> {
+}
+export declare const FlowForm: FC<PropsWithChildren<FlowFormProps>>;

package/dist/ui/flow-form.component.js

@@ -1,18 +1,15 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlowForm = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const providers_1 = require("../providers");
 const FlowForm = ({ children, ...props }) => {
     const flow = (0, providers_1.useFlow)();
-    const ui = (0, react_2.useMemo)(() => flow.getState()?.ui, [flow.getState()]);
+    const ui = (0, react_1.useMemo)(() => flow.getState()?.ui, [flow.getState()]);
     if (!ui) {
         return null;
     }
-    return (react_1.default.createElement("form", { ...props, action: ui.action, method: ui.method }, children));
+    return ((0, jsx_runtime_1.jsx)("form", { ...props, action: ui.action, method: ui.method, children: children }));
 };
 exports.FlowForm = FlowForm;

package/dist/ui/flow-messages.component.d.ts

@@ -0,0 +1,7 @@
+import type { UiText } from '@ory/kratos-client';
+import type { ReactElement } from 'react';
+import type { FC } from 'react';
+export interface FlowMessagesProps {
+    children: (messages: Array<UiText>) => ReactElement;
+}
+export declare const FlowMessages: FC<FlowMessagesProps>;

package/dist/ui/flow-messages.component.js

@@ -5,7 +5,7 @@ const providers_1 = require("../providers");
 const FlowMessages = ({ children }) => {
     const flow = (0, providers_1.useFlow)();
     const messages = flow.getMessages();
-    if (typeof children === 'function' && messages) {
+    if (typeof children === 'function') {
         return children(messages);
     }
     return null;

package/dist/ui/flow-node-messages.component.d.ts

@@ -0,0 +1,8 @@
+import type { UiText } from '@ory/kratos-client';
+import type { ReactElement } from 'react';
+import type { FC } from 'react';
+export interface FlowNodeMessagesProps {
+    name: string;
+    children: (messages: Array<UiText>) => ReactElement;
+}
+export declare const FlowNodeMessages: FC<FlowNodeMessagesProps>;

package/dist/ui/flow-node.component.d.ts

@@ -0,0 +1,11 @@
+import type { UiNode } from '@ory/kratos-client';
+import type { ReactElement } from 'react';
+import type { FC } from 'react';
+import type { FormEvent } from 'react';
+type OnChangeCallback = (event: string | FormEvent<HTMLInputElement>) => void;
+export interface FlowNodeProps {
+    name: string;
+    children: (node: UiNode, value: any, callback: OnChangeCallback) => ReactElement;
+}
+export declare const FlowNode: FC<FlowNodeProps>;
+export {};

package/dist/ui/flow-node.component.js

@@ -10,7 +10,7 @@ const FlowNode = ({ name, children }) => {
     const node = (0, react_1.useMemo)(() => flow.getNode(name), [name, flow, flow.getState()]);
     const [value = '', setValue] = (0, react_2.useState)(flow.getValue(name));
     const onChange = (0, react_3.useCallback)((event) => {
-        if (event && event.target) {
+        if (typeof event === 'object' && 'value' in event.target && event.target.value) {
             setValue(event.target.value);
             flow.setValue(name, event.target.value);
         }

package/dist/ui/flow-nodes-group.component.d.ts

@@ -0,0 +1,8 @@
+import type { UiNode } from '@ory/kratos-client';
+import type { ReactElement } from 'react';
+import type { FC } from 'react';
+export interface FlowNodesGroupProps {
+    name: string;
+    children: (node: Array<UiNode>) => ReactElement;
+}
+export declare const FlowNodesGroup: FC<FlowNodesGroupProps>;

package/dist/ui/flow-submit.component.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement } from 'react';
+import type { FC } from 'react';
+import type { ReactNode } from 'react';
+export interface FlowSubmitProps {
+    method: string;
+    children: (submit: (method: string) => void) => ReactElement | ReactNode | null;
+}
+export declare const FlowSubmit: FC<FlowSubmitProps>;

package/dist/ui/flow-submit.component.js

@@ -7,7 +7,7 @@ const providers_1 = require("../providers");
 const FlowSubmit = ({ method, children }) => {
     const flow = (0, providers_1.useFlow)();
     if (typeof children === 'function') {
-        return children((mtd) => flow.submit(mtd));
+        return children(async (mtd) => flow.submit(mtd));
     }
     if ((0, react_1.isValidElement)(children)) {
         return (0, react_2.cloneElement)(children, {

package/dist/ui/index.d.ts

@@ -0,0 +1,7 @@
+export * from './flow-form.component';
+export * from './flow-node.component';
+export * from './flow-error.component';
+export * from './flow-submit.component';
+export * from './flow-messages.component';
+export * from './flow-nodes-group.component';
+export * from './flow-node-messages.component';

package/dist/ui/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atls/react-kratos-browser-flows",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "license": "BSD-3-Clause",
   "main": "dist/index.js",
   "files": [
@@ -11,16 +11,17 @@
     "prepack": "yarn run build",
     "postpack": "rm -rf dist"
   },
+  "dependencies": {
+    "@ory/kratos-client": "^0.8.2-alpha.1",
+    "events": "3.3.0"
+  },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
-    "@types/events": "^3.0.0",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
-    "@types/testing-library__jest-dom": "^5.14.1",
-    "axios": "^0.21.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@types/events": "3.0.3",
+    "@types/react": "18.3.6",
+    "@types/react-dom": "18.2.7",
+    "axios": "1.7.7",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "peerDependencies": {
     "react": "^17.0.1"
@@ -30,9 +31,5 @@
     "main": "dist/index.js",
     "typings": "dist/index.d.ts"
   },
-  "dependencies": {
-    "@ory/kratos-client": "^0.8.2-alpha.1",
-    "events": "^3.3.0"
-  },
   "typings": "dist/index.d.ts"
 }