@qoretechnologies/reqraft 0.3.2 → 0.3.3

package/src/hooks/useFetch/useFetch.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { useEffectOnce } from 'react-use';
+import { useContextSelector } from 'use-context-selector';
+import { FetchContext } from '../../contexts/FetchContext';
+import { IReqraftQueryConfig } from '../../utils/fetch';
+
+export interface IReqraftUseFetch<T> {
+  data: T | undefined;
+  loading: boolean;
+  load: () => Promise<T>;
+  error: Error | undefined;
+}
+
+export interface IReqraftUseFetchOptions<T> extends IReqraftQueryConfig {
+  defaultData?: T;
+  loadOnMount?: boolean;
+}
+
+export function useFetch<T>({
+  url,
+  method = 'GET',
+  body,
+  cache,
+  defaultData,
+  loadOnMount,
+}: IReqraftUseFetchOptions<T>) {
+  const query = useContextSelector(FetchContext, (context) => {
+    switch (method) {
+      case 'GET':
+        return context.get;
+      case 'POST':
+        return context.post;
+      case 'PUT':
+        return context.put;
+      case 'DELETE':
+        return context.del;
+      default:
+        throw new Error('Invalid method');
+    }
+  });
+
+  const [loading, setLoading] = useState(loadOnMount);
+  const [data, setData] = useState<T | undefined>(defaultData);
+  const [error, setError] = useState<Error | undefined>();
+
+  async function load({
+    body: customBody,
+    mergeBodies,
+  }: { body?: Record<string | number, any>; mergeBodies?: boolean } = {}) {
+    setLoading(true);
+
+    const _body = mergeBodies ? { ...body, ...customBody } : customBody || body;
+    const response = await query<T>({ url, body: _body, cache });
+
+    setLoading(false);
+
+    if (response.ok) {
+      setData(response.data);
+    } else {
+      setError(response.error);
+    }
+  }
+
+  useEffectOnce(() => {
+    if (loadOnMount) {
+      load();
+    }
+  });
+
+  return { data, loading, load, error };
+}

package/src/hooks/useReqraftProperty.ts

@@ -0,0 +1,16 @@
+import { useContextSelector } from 'use-context-selector';
+import { IReqraftContext, ReqraftContext } from '../contexts/ReqraftContext';
+
+export const useReqraftProperty = <T extends keyof IReqraftContext>(
+  property: T
+): IReqraftContext[T] => {
+  const contextProperty = useContextSelector(ReqraftContext, (value) => {
+    if (!(property in value)) {
+      throw new Error(`Reqraft context property ${property} not found`);
+    }
+
+    return value[property];
+  });
+
+  return contextProperty;
+};

package/src/hooks/useStorage/useStorage.stories.tsx

@@ -0,0 +1,85 @@
+import { ReqoreButton, ReqoreControlGroup, ReqoreP } from '@qoretechnologies/reqore';
+import { StoryObj } from '@storybook/react';
+import { fireEvent, within } from '@storybook/test';
+import { storiesStorageMock } from '../../../__tests__/ mock';
+import { testsWaitForText } from '../../../__tests__/utils';
+import { StoryMeta } from '../../types';
+import { useReqraftStorage } from './useStorage';
+
+const meta = {
+  title: 'Hooks/useStorage',
+  render: () => {
+    const [storage, setStorage, removeValue] = useReqraftStorage<string>(
+      'some-path',
+      'This is a default value'
+    );
+
+    return (
+      <ReqoreControlGroup>
+        <ReqoreP>{storage}</ReqoreP>
+        <ReqoreButton onClick={() => setStorage('This is a NEW value')}>
+          Update storage
+        </ReqoreButton>
+        <ReqoreButton onClick={() => removeValue()}>Remove value</ReqoreButton>
+      </ReqoreControlGroup>
+    );
+  },
+  args: { reqraftOptions: { waitForStorage: true } },
+} as StoryMeta<any>;
+
+export default meta;
+export type Story = StoryObj<typeof meta>;
+
+export const DefaultValue: Story = {
+  args: {
+    method: 'GET',
+  },
+  parameters: {
+    mockData: [
+      {
+        url: 'https://hq.qoretechnologies.com:8092/api/latest/users/_current_/storage',
+        method: 'GET',
+        status: 200,
+        response: {},
+      },
+    ],
+  },
+  play: async () => {
+    await testsWaitForText('This is a default value');
+  },
+};
+
+export const StorageValue: Story = {
+  parameters: {
+    mockData: [...storiesStorageMock],
+  },
+  play: async () => {
+    await testsWaitForText('This is a storage value');
+  },
+};
+
+export const ValueCanBeUpdated: Story = {
+  ...StorageValue,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    //await sleep(1000);
+
+    await testsWaitForText('This is a storage value');
+    await testsWaitForText('Update storage');
+    await fireEvent.click(canvas.getByText('Update storage'));
+    await testsWaitForText('This is a NEW value');
+  },
+};
+
+export const ValueCanBeRemoved: Story = {
+  ...StorageValue,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await testsWaitForText('This is a storage value');
+    await testsWaitForText('Remove value');
+    await fireEvent.click(canvas.getByText('Remove value'));
+    await testsWaitForText('This is a default value');
+  },
+};

package/src/hooks/useStorage/useStorage.ts

@@ -0,0 +1,43 @@
+import { useCallback, useMemo } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import { ReqraftStorageContext } from '../../contexts/StorageContext';
+
+export type TReqraftStorageValue = string | number | boolean | Record<string | number, any> | any[];
+export type TReqraftUseStorage<T extends TReqraftStorageValue> = [
+  T,
+  (newStorage: T) => void,
+  () => void,
+];
+
+export function useReqraftStorage<T extends TReqraftStorageValue>(
+  path: string,
+  defaultValue?: T,
+  includeAppPrefix?: boolean
+): TReqraftUseStorage<T> {
+  const { getStorage, updateStorage, removeStorageValue } = useContextSelector(
+    ReqraftStorageContext,
+    ({ getStorage, updateStorage, removeStorageValue }) => ({
+      getStorage,
+      updateStorage,
+      removeStorageValue,
+    })
+  );
+
+  const value = useMemo(
+    () => getStorage(path, defaultValue, includeAppPrefix),
+    [path, defaultValue, includeAppPrefix, getStorage]
+  );
+
+  const updater = useCallback(
+    (newStorage: T) => {
+      updateStorage(path, newStorage, includeAppPrefix);
+    },
+    [path, includeAppPrefix, updateStorage]
+  );
+
+  const remover = useCallback(() => {
+    removeStorageValue(path, includeAppPrefix);
+  }, [path, includeAppPrefix, removeStorageValue]);
+
+  return [value, updater, remover];
+}

package/src/hooks/useValidation.ts

@@ -0,0 +1,9 @@
+import { TFormFieldType } from '../types/Form';
+
+// @ts-expect-error "need to implement this"
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const useValidation = (value: any, type?: TFormFieldType) => {
+  // Build validation...
+
+  return true;
+};

package/src/index.tsx

@@ -0,0 +1,17 @@
+export * from './components/form';
+export {
+  IReqraftMenuItem,
+  IReqraftMenuProps,
+  ReqraftMenu,
+  TReqraftMenu,
+  TReqraftMenuItem,
+} from './components/menu/Menu';
+
+export { IReqraftUseFetch, useFetch } from './hooks/useFetch/useFetch';
+export { TReqraftUseStorage, useReqraftStorage } from './hooks/useStorage/useStorage';
+export {
+  ReqraftProvider,
+  ReqraftQueryClient,
+  initializeReqraft,
+} from './providers/ReqraftProvider';
+export { query } from './utils/fetch';

package/src/providers/FetchProvider.tsx

@@ -0,0 +1,40 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { FetchContext, TReqraftContextQueryConfig } from '../contexts/FetchContext';
+import { query } from '../utils/fetch';
+
+export interface IReqraftFetchProviderProps {
+  children: React.ReactNode;
+}
+
+export const ReqraftFetchProvider = ({ children }: IReqraftFetchProviderProps) => {
+  const queryClient = useQueryClient();
+
+  async function get<T>(config: TReqraftContextQueryConfig) {
+    return query<T>({ queryClient, ...config, method: 'GET' });
+  }
+
+  async function post<T>(config: TReqraftContextQueryConfig) {
+    return query<T>({ queryClient, ...config, method: 'POST' });
+  }
+
+  async function put<T>(config: TReqraftContextQueryConfig) {
+    return query<T>({ queryClient, ...config, method: 'PUT' });
+  }
+
+  async function del<T>(config: TReqraftContextQueryConfig) {
+    return query<T>({ queryClient, ...config, method: 'DELETE' });
+  }
+
+  return (
+    <FetchContext.Provider
+      value={{
+        get,
+        post,
+        put,
+        del,
+      }}
+    >
+      {children}
+    </FetchContext.Provider>
+  );
+};

package/src/providers/ReqraftProvider.tsx

@@ -0,0 +1,52 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+import { IReqraftContext, ReqraftContext } from '../contexts/ReqraftContext';
+import { IReqraftFetchConfig, setupFetch } from '../utils/fetch';
+import { ReqraftFetchProvider } from './FetchProvider';
+import { ReqraftStorageProvider } from './StorageProvider';
+
+export const ReqraftQueryClient = new QueryClient();
+
+export interface IReqraftProviderProps extends IReqraftContext {
+  children: ReactNode;
+  reactQueryClient?: QueryClient;
+  /*
+  * If true, the component will wait for the storage to be loaded before rendering the children.
+  */
+  waitForStorage?: boolean;
+}
+
+export interface IReqraftOptions {
+  instance?: string;
+  instanceToken: string;
+  instanceUnauthorizedRedirect?: IReqraftFetchConfig['unauthorizedRedirect'];
+}
+
+export const initializeReqraft = (options: IReqraftOptions ) => {
+  setupFetch({
+    instance: options.instance,
+    instanceToken: options.instanceToken,
+    unauthorizedRedirect: options.instanceUnauthorizedRedirect,
+  });
+
+  return ReqraftProvider;
+};
+
+export const ReqraftProvider = ({
+  appName,
+  children,
+  reactQueryClient,
+  waitForStorage = true,
+}: IReqraftProviderProps) => {
+  return (
+    <ReqraftContext.Provider
+      value={{ appName  }}
+    >
+      <QueryClientProvider client={reactQueryClient || ReqraftQueryClient}>
+        <ReqraftFetchProvider>
+          <ReqraftStorageProvider waitForStorage={waitForStorage}>{children}</ReqraftStorageProvider>
+        </ReqraftFetchProvider>
+      </QueryClientProvider>
+    </ReqraftContext.Provider>
+  );
+};

package/src/providers/StorageProvider.tsx

@@ -0,0 +1,85 @@
+import { cloneDeep, get, set } from 'lodash';
+import { ReactNode, useEffect, useState } from 'react';
+import type { Get } from 'type-fest';
+import { ReqraftStorageContext, TReqraftStorage } from '../contexts/StorageContext';
+import { useFetch } from '../hooks/useFetch/useFetch';
+import { useReqraftProperty } from '../hooks/useReqraftProperty';
+import { TReqraftStorageValue } from '../hooks/useStorage/useStorage';
+import { IReqraftProviderProps } from './ReqraftProvider';
+
+export interface IReqraftStorageProviderProps
+  extends Pick<IReqraftProviderProps, 'waitForStorage'> {
+  children: ReactNode;
+}
+
+export const ReqraftStorageProvider = ({
+  children,
+  waitForStorage,
+}: IReqraftStorageProviderProps) => {
+  const appName = useReqraftProperty('appName');
+
+  const { data, loading } = useFetch({
+    url: 'users/_current_/storage',
+    cache: false,
+    loadOnMount: true,
+  });
+
+  const { load } = useFetch({
+    url: 'users/_current_/',
+    method: 'PUT',
+    cache: false,
+  });
+
+  const [storage, setStorage] = useState<TReqraftStorage>(data);
+
+  useEffect(() => {
+    if (data) {
+      setStorage(data);
+    }
+  }, [JSON.stringify(data)]);
+
+  const getStorage = function <T extends TReqraftStorageValue>(
+    path: string,
+    defaultValue: T,
+    includeAppPrefix: boolean = true
+  ): Get<TReqraftStorage, string> {
+    const _path = includeAppPrefix ? `${appName}.${path}` : path;
+
+    return get(storage, _path) ?? defaultValue;
+  };
+
+  const updateStorage = function <T extends TReqraftStorageValue>(
+    path: string,
+    value: T,
+    includeAppPrefix: boolean = true
+  ) {
+    const _path = includeAppPrefix ? `${appName}.${path}` : path;
+    const updatedStorage = set(cloneDeep(storage), _path, value);
+
+    setStorage(updatedStorage);
+
+    load({ body: { storage: updatedStorage } });
+  };
+
+  const removeStorageValue = function (path: string, includeAppPrefix: boolean = true) {
+    const _path = includeAppPrefix ? `${appName}.${path}` : path;
+
+    const updatedStorage = set(cloneDeep(storage), _path, null);
+
+    setStorage(updatedStorage);
+
+    load({ body: { storage_path: _path } });
+  };
+
+  if ((loading || !storage) && waitForStorage) {
+    return null;
+  }
+
+  return (
+    <ReqraftStorageContext.Provider
+      value={{ storage, getStorage, updateStorage, removeStorageValue }}
+    >
+      {children}
+    </ReqraftStorageContext.Provider>
+  );
+};

package/src/types/Form.ts

@@ -0,0 +1,46 @@
+import { IColorFormFieldProps } from '../components/form/fields/color/Color';
+
+export type TFormFieldType =
+  | 'string'
+  | 'number'
+  | 'boolean'
+  | 'date'
+  | 'time'
+  | 'datetime'
+  | 'select'
+  | 'multiSelect'
+  | 'radio'
+  | 'checkbox'
+  | 'file'
+  | 'image'
+  | 'color'
+  | 'password'
+  | 'email'
+  | 'phone'
+  | 'url'
+  | 'markdown'
+  | 'long-string'
+  | 'cron';
+
+export type TFormFieldValueType<T> =
+  T extends 'string' ? string
+  : T extends 'number' ? number
+  : T extends 'boolean' ? boolean
+  : T extends 'date' ? Date | string
+  : T extends 'time' ? Date | string
+  : T extends 'datetime' ? Date | string
+  : T extends 'select' ? string
+  : T extends 'multiSelect' ? string[]
+  : T extends 'radio' ? string
+  : T extends 'checkbox' ? boolean
+  : T extends 'file' ? File
+  : T extends 'image' ? string
+  : T extends 'color' ? IColorFormFieldProps['value']
+  : T extends 'password' ? string
+  : T extends 'email' ? string
+  : T extends 'phone' ? string
+  : T extends 'url' ? string
+  : T extends 'markdown' ? string
+  : T extends 'long-string' ? string
+  : T extends 'cron' ? string
+  : any;

package/src/types.ts

@@ -0,0 +1,14 @@
+import { IReqoreUIProviderProps } from '@qoretechnologies/reqore/dist/containers/UIProvider';
+import { Meta } from '@storybook/react';
+import { IReqraftProviderProps } from './providers/ReqraftProvider';
+
+export type StoryMeta<
+  Component extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
+  AdditionalArgs = Record<string, any>,
+> = Meta<
+  React.ComponentProps<Component> &
+    AdditionalArgs & {
+      reqoreOptions: IReqoreUIProviderProps['options'];
+      reqraftOptions: IReqraftProviderProps;
+    }
+>;

package/src/utils/fetch.ts

@@ -0,0 +1,121 @@
+import { QueryClient } from '@tanstack/react-query';
+import { ReqraftQueryClient } from '../providers/ReqraftProvider';
+
+export interface IReqraftFetchConfig {
+  instance: string;
+  instanceToken: string;
+  unauthorizedRedirect?: (pathname: string) => string;
+}
+
+export interface IReqraftFetchResponse<T> {
+  data: T;
+  ok: boolean;
+  code?: number;
+  error?: any;
+}
+
+export const fetchConfig: IReqraftFetchConfig = {
+  instance: window.location.origin + '/',
+  instanceToken: '',
+  unauthorizedRedirect: (pathname: string) => `/?next=${pathname}`,
+};
+
+const CACHE_EXPIRATION_TIME = 5 * 60 * 1000; // 5 minutes
+
+export const setupFetch = ({
+  instance,
+  instanceToken,
+  unauthorizedRedirect,
+}: IReqraftFetchConfig) => {
+  fetchConfig.instance = instance;
+  fetchConfig.instanceToken = instanceToken;
+
+  if (unauthorizedRedirect) {
+    fetchConfig.unauthorizedRedirect = unauthorizedRedirect;
+  }
+};
+
+async function doFetchData(
+  url: string,
+  method = 'GET',
+  body?: { [key: string]: any }
+): Promise<Response> {
+  if (!fetchConfig.instanceToken) {
+    return new Response(JSON.stringify({}), {
+      status: 401,
+      statusText: 'Unauthorized',
+    });
+  }
+
+  return fetch(`${fetchConfig.instance}api/latest/${url}`, {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${fetchConfig.instanceToken}`,
+    },
+    body: JSON.stringify(body),
+  }).catch((error) => {
+    return new Response(JSON.stringify({}), {
+      status: 500,
+      statusText: `Request failed ${error.message}`,
+    });
+  });
+}
+
+export interface IReqraftQueryConfig {
+  url: string;
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
+  body?: Record<string | number, any>;
+  cache?: boolean;
+  queryClient?: QueryClient;
+}
+
+export async function query<T>({
+  url,
+  method = 'GET',
+  body,
+  cache = true,
+  queryClient = ReqraftQueryClient,
+}: IReqraftQueryConfig): Promise<IReqraftFetchResponse<T>> {
+  const shouldCache = method === 'DELETE' || method === 'POST' ? false : cache;
+  const cacheKey = `${url}:${method}:${JSON.stringify(body || {})}`;
+
+  const requestData = await queryClient.fetchQuery({
+    queryKey: [cacheKey],
+    queryFn: async () => {
+      const response = await doFetchData(url, method, body);
+
+      const clone = response.clone();
+      const json = await clone.json();
+
+      if (response.status === 401) {
+        window.location.href = fetchConfig.unauthorizedRedirect(window.location.pathname);
+      }
+
+      return {
+        data: json,
+        ok: response.ok,
+        status: response.status,
+        statusText: response.statusText,
+      };
+    },
+    staleTime: shouldCache ? CACHE_EXPIRATION_TIME : 0,
+  });
+
+  if (!requestData.ok) {
+    queryClient.invalidateQueries({ queryKey: [cacheKey] });
+
+    return {
+      data: null,
+      ok: false,
+      code: requestData.status,
+      error: requestData.statusText,
+    };
+  }
+
+  return {
+    data: requestData.data,
+    ok: true,
+    code: requestData.status,
+  };
+}