@intrig/react 0.0.6 → 0.0.8

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/README.md

@@ -1,7 +1,42 @@
 # @intrig/react
 
-This library was generated with [Nx](https://nx.dev).
+This library serves as the placeholder for Intrig generated React content. It provides the necessary infrastructure and utilities for integrating with React applications.
 
-## Running unit tests
+## Overview
 
-Run `nx test @intrig/react` to execute the unit tests via [Jest](https://jestjs.io).
+@intrig/react is designed to work seamlessly with the Intrig Core ecosystem, providing specialized support for React applications. When you generate code using Intrig with the React generator, this library provides the foundation for that generated code.
+
+## Features
+
+- **React Integration**: Specialized utilities for React applications
+- **Custom Hooks**: React hooks for API integration
+- **State Management Helpers**: Utilities for managing API state in React
+- **Type Safety**: Full TypeScript support for all components
+
+## Installation
+
+```bash
+npm install @intrig/react
+```
+
+## Usage
+
+The library is primarily used as a dependency for Intrig generated code. When you generate code using Intrig with the React generator, it will automatically use this library.
+
+```typescript
+// Example of importing from the library
+import { createReactClient } from '@intrig/react';
+
+// Usage in your React application
+const client = createReactClient({
+  // Configuration options
+});
+```
+
+## Documentation
+
+For more detailed documentation, please refer to the [Intrig Core documentation](https://docs.intrig.io).
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.

package/eslint.config.mjs

@@ -0,0 +1,12 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.base.config.mjs';
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intrig/react",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "./index.esm.js",
   "module": "./index.esm.js",
@@ -39,9 +39,5 @@
       "import": "./index.esm.js",
       "default": "./index.esm.js"
     }
-  },
-  "files": [
-    ".",
-    "!**/*.tsbuildinfo"
-  ]
+  }
 }

package/project.json

@@ -0,0 +1,15 @@
+{
+  "name": "@intrig/react",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "lib/react-client/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project @intrig/react --web",
+  "targets": {},
+  "nx-release-publish": {
+    "executor": "@nx/js:release-publish",
+    "options": {
+      "packageRoot": "dist/lib/react-client"
+    }
+  }
+}

package/rollup.config.cjs

@@ -0,0 +1,31 @@
+const { withNx } = require('@nx/rollup/with-nx');
+const url = require('@rollup/plugin-url');
+const svg = require('@svgr/rollup');
+
+module.exports = withNx(
+  {
+    main: './src/index.ts',
+    outputPath: '../../dist/lib/react-client',
+    tsConfig: './tsconfig.lib.json',
+    compiler: 'babel',
+    external: ['react', 'react-dom', 'react/jsx-runtime'],
+    format: ['esm'],
+    assets: [
+      { input: 'lib/react-client', output: '.', glob: 'README.md' },
+      { input: 'lib/react-client', output: '.', glob: 'package.json' }
+    ],
+  },
+  {
+    // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
+    plugins: [
+      svg({
+        svgo: false,
+        titleProp: true,
+        ref: true,
+      }),
+      url({
+        limit: 10000, // 10kB
+      }),
+    ],
+  },
+);

package/src/extra.ts

@@ -0,0 +1,267 @@
+import {
+  BinaryFunctionHook,
+  BinaryHookOptions,
+  BinaryProduceHook,
+  ConstantHook,
+  error,
+  init,
+  IntrigHook,
+  IntrigHookOptions,
+  isError,
+  isSuccess,
+  isValidationError,
+  NetworkState,
+  pending,
+  success,
+  UnaryFunctionHook,
+  UnaryHookOptions,
+  UnaryProduceHook,
+  UnitHook,
+  UnitHookOptions,
+} from '@intrig/react/network-state';
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useIntrigContext } from '@intrig/react/intrig-context';
+
+/**
+ * Converts a given hook into a promise-based function.
+ *
+ * @param {IntrigHook<P, B, T>} hook - The hook function to be converted.
+ * @param {string} [key='default'] - An optional key to uniquely identify the hook instance.
+ *
+ * @return {[(...params: Parameters<ReturnType<IntrigHook<P, B, T>>[1]>) => Promise<T>, () => void]}
+ * Returns a tuple containing a function that invokes the hook as a promise and a function to clear the state.
+ */
+export function useAsPromise<E>(
+  hook: UnitHook<E>,
+  options: UnitHookOptions,
+): [() => Promise<never>, () => void];
+export function useAsPromise<T, E>(
+  hook: ConstantHook<T, E>,
+  options: UnitHookOptions,
+): [() => Promise<T>, () => void];
+export function useAsPromise<P, E>(
+  hook: UnaryProduceHook<P, E>,
+  options?: UnaryHookOptions<P>,
+): [(params: P) => Promise<never>, () => void];
+export function useAsPromise<P, T, E>(
+  hook: UnaryFunctionHook<P, T, E>,
+  options?: UnaryHookOptions<P>,
+): [(params: P) => Promise<T>, () => void];
+export function useAsPromise<P, B, E>(
+  hook: BinaryProduceHook<P, B, E>,
+  options?: BinaryHookOptions<P, B>,
+): [(body: B, params: P) => Promise<never>, () => void];
+export function useAsPromise<P, B, T, E>(
+  hook: BinaryFunctionHook<P, B, T, E>,
+  options?: BinaryHookOptions<P, B>,
+): [(body: B, params: P) => Promise<T>, () => void];
+
+// **Implementation**
+export function useAsPromise<P, B, T, E>(
+  hook: IntrigHook<P, B, T, E>,
+  options?: IntrigHookOptions<P, B>,
+): [(...args: any[]) => Promise<T>, () => void] {
+  // <- Compatible return type
+  const resolveRef = useRef<(value: T) => void>(() => {
+    // intentionally kept empty
+  });
+  const rejectRef = useRef<(reason?: any) => void>(() => {
+    // intentionally kept empty
+  });
+
+  const [state, dispatch, clear] = hook(options as any);
+
+  useEffect(() => {
+    if (isSuccess(state)) {
+      resolveRef.current?.(state.data);
+      clear();
+    } else if (isError(state)) {
+      rejectRef.current?.(state.error);
+      clear();
+    }
+  }, [state]);
+
+  const promiseFn = useCallback(
+    (...args: Parameters<ReturnType<IntrigHook<P, B, T>>[1]>) => {
+      return new Promise<T>((resolve, reject) => {
+        resolveRef.current = resolve;
+        rejectRef.current = reject;
+
+        const dispatchState = (dispatch as any)(...args);
+        if (isValidationError(dispatchState)) {
+          reject(dispatchState.error);
+        }
+      });
+    },
+    [dispatch],
+  );
+
+  return [promiseFn, clear];
+}
+
+/**
+ * A custom hook that manages and returns the network state of a promise-based function,
+ * providing a way to execute the function and clear its state.
+ *
+ * @param fn The promise-based function whose network state is to be managed. It should be a function that returns a promise.
+ * @param key An optional identifier for the network state. Defaults to 'default'.
+ * @return A tuple containing the current network state, a function to execute the promise, and a function to clear the state.
+ */
+export function useAsNetworkState<T, F extends (...args: any) => Promise<T>>(
+  fn: F,
+  key = 'default',
+): [NetworkState<T>, (...params: Parameters<F>) => void, () => void] {
+  const id = useId();
+
+  const context = useIntrigContext();
+
+  const networkState = useMemo(() => {
+    return context.state?.[`promiseState:${id}:${key}}`] ?? init();
+  }, [context.state?.[`promiseState:${id}:${key}}`]]);
+
+  const dispatch = useCallback(
+    (state: NetworkState<T>) => {
+      context.dispatch({ key, operation: id, source: 'promiseState', state });
+    },
+    [key, context.dispatch],
+  );
+
+  const execute = useCallback((...args: Parameters<F>) => {
+    dispatch(pending());
+    return fn(...args).then(
+      (data) => {
+        dispatch(success(data));
+      },
+      (e) => {
+        dispatch(error(e));
+      },
+    );
+  }, []);
+
+  const clear = useCallback(() => {
+    dispatch(init());
+  }, []);
+
+  return [networkState, execute, clear];
+}
+
+/**
+ * A custom hook that resolves the value from the provided hook's state and updates it whenever the state changes.
+ *
+ * @param {IntrigHook<P, B, T>} hook - The hook that provides the state to observe and resolve data from.
+ * @param options
+ * @return {T | undefined} The resolved value from the hook's state or undefined if the state is not successful.
+ */
+export function useResolvedValue<E>(
+  hook: UnitHook<E>,
+  options: UnitHookOptions,
+): undefined;
+
+export function useResolvedValue<T, E>(
+  hook: ConstantHook<T, E>,
+  options: UnitHookOptions,
+): T | undefined;
+
+export function useResolvedValue<P, E>(
+  hook: UnaryProduceHook<P, E>,
+  options: UnaryHookOptions<P>,
+): undefined;
+
+export function useResolvedValue<P, T, E>(
+  hook: UnaryFunctionHook<P, T, E>,
+  options: UnaryHookOptions<P>,
+): T | undefined;
+
+export function useResolvedValue<P, B, E>(
+  hook: BinaryProduceHook<P, B, E>,
+  options: BinaryHookOptions<P, B>,
+): undefined;
+
+export function useResolvedValue<P, B, T, E>(
+  hook: BinaryFunctionHook<P, B, T, E>,
+  options: BinaryHookOptions<P, B>,
+): T | undefined;
+
+// **Implementation**
+export function useResolvedValue<P, B, T, E>(
+  hook: IntrigHook<P, B, T, E>,
+  options: IntrigHookOptions<P, B>,
+): T | undefined {
+  const [value, setValue] = useState<T | undefined>();
+
+  const [state] = hook(options as any); // Ensure compatibility with different hook types
+
+  useEffect(() => {
+    if (isSuccess(state)) {
+      setValue(state.data);
+    } else {
+      setValue(undefined);
+    }
+  }, [state]);
+
+  return value;
+}
+
+/**
+ * A custom hook that resolves and caches the value from a successful state provided by the given hook.
+ * The state is updated only when it is in a successful state.
+ *
+ * @param {IntrigHook<P, B, T>} hook - The hook that provides the state to observe and cache data from.
+ * @param options
+ * @return {T | undefined} The cached value from the hook's state or undefined if the state is not successful.
+ */
+export function useResolvedCachedValue<E>(
+  hook: UnitHook<E>,
+  options: UnitHookOptions,
+): undefined;
+
+export function useResolvedCachedValue<T, E>(
+  hook: ConstantHook<T, E>,
+  options: UnitHookOptions,
+): T | undefined;
+
+export function useResolvedCachedValue<P, E>(
+  hook: UnaryProduceHook<P, E>,
+  options: UnaryHookOptions<P>,
+): undefined;
+
+export function useResolvedCachedValue<P, T, E>(
+  hook: UnaryFunctionHook<P, T, E>,
+  options: UnaryHookOptions<P>,
+): T | undefined;
+
+export function useResolvedCachedValue<P, B, E>(
+  hook: BinaryProduceHook<P, B, E>,
+  options: BinaryHookOptions<P, B>,
+): undefined;
+
+export function useResolvedCachedValue<P, B, T, E>(
+  hook: BinaryFunctionHook<P, B, T, E>,
+  options: BinaryHookOptions<P, B>,
+): T | undefined;
+
+// **Implementation**
+export function useResolvedCachedValue<P, B, T, E>(
+  hook: IntrigHook<P, B, T, E>,
+  options: IntrigHookOptions<P, B>,
+): T | undefined {
+  const [cachedValue, setCachedValue] = useState<T | undefined>();
+
+  const [state] = hook(options as any); // Ensure compatibility with different hook types
+
+  useEffect(() => {
+    if (isSuccess(state)) {
+      setCachedValue(state.data);
+    }
+    // Do not clear cached value if state is unsuccessful
+  }, [state]);
+
+  return cachedValue;
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './intrig-provider';
+export * from './network-state';
+export * from './extra';
+export * from './media-type-utils';

package/src/intrig-context.ts

@@ -0,0 +1,61 @@
+import { NetworkAction, NetworkState } from '@intrig/react/network-state';
+import { AxiosRequestConfig } from 'axios';
+import { ZodSchema } from 'zod';
+import { createContext, useContext } from 'react';
+import { DefaultConfigs } from '@intrig/react/intrig-provider';
+
+type GlobalState = Record<string, NetworkState>;
+
+interface RequestType<T = any> extends AxiosRequestConfig {
+  originalData?: T; // Keeps track of the original data type.
+  key: string;
+  source: string;
+}
+
+/**
+ * Defines the ContextType interface for managing global state, dispatching actions,
+ * and holding a collection of Axios instances.
+ *
+ * @interface ContextType
+ * @property {GlobalState} state - The global state of the application.
+ * @property {React.Dispatch<NetworkAction<unknown>>} dispatch - The dispatch function to send network actions.
+ * @property {Record<string, AxiosInstance>} axios - A record of Axios instances for making HTTP requests.
+ */
+export interface ContextType {
+  state: GlobalState;
+  filteredState: GlobalState;
+  dispatch: React.Dispatch<NetworkAction<unknown, unknown>>;
+  configs: DefaultConfigs;
+  execute: <T>(
+    request: RequestType,
+    dispatch: (state: NetworkState<T>) => void,
+    schema: ZodSchema<T> | undefined,
+    errorSchema: ZodSchema<T> | undefined,
+  ) => Promise<void>;
+}
+
+/**
+ * Context object created using `createContext` function. Provides a way to share state, dispatch functions,
+ * and axios instance across components without having to pass props down manually at every level.
+ *
+ * @type {ContextType}
+ */
+const Context = createContext<ContextType>({
+  state: {},
+  filteredState: {},
+  dispatch() {
+    // intentionally kept empty
+  },
+  configs: {},
+  async execute() {
+    // intentionally kept empty
+  },
+});
+
+export function useIntrigContext() {
+  return useContext(Context);
+}
+
+export {Context};
+export type { GlobalState, RequestType };
+