@qoretechnologies/reqraft 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqraft",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/fields/Field.tsx

@@ -1,37 +0,0 @@
-import { TFormFieldType, TFormFieldValueType } from '../../../types/Form';
-import { FormStringField } from './string/String';
-
-export interface IFormFieldProps<T extends TFormFieldType = TFormFieldType> {
-  type?: T;
-  value: TFormFieldValueType<T>;
-  onChange: (value: TFormFieldValueType<T>, event?: unknown) => void;
-
-  validateSelf?: boolean;
-  onValidateChange?: (isValid: boolean) => void;
-}
-
-export const FormField = <T extends TFormFieldType>({
-  type,
-  onChange,
-  ...rest
-}: IFormFieldProps<T>) => {
-  const handleChange = (value: TFormFieldValueType<T>, event?: unknown) => {
-    onChange(value, event);
-  };
-
-  const renderField = (type: T) => {
-    switch (type) {
-      case 'string':
-        return (
-          <FormStringField
-            {...rest}
-            onChange={(value: string) => handleChange(value as TFormFieldValueType<T>)}
-          />
-        );
-      default:
-        return null;
-    }
-  };
-
-  return renderField(type);
-};

package/src/components/form/fields/string/String.stories.tsx

@@ -1,23 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { StoryMeta } from '../../../../types';
-import { FormStringField } from './String';
-
-const meta = {
-  component: FormStringField,
-  title: 'Components/Form/String',
-} as StoryMeta<typeof FormStringField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-export const Value: Story = {
-  args: {
-    value: 'Hello, World!',
-  },
-};
-export const WithLabel: Story = {
-  args: {
-    label: 'Label',
-  },
-};

package/src/components/form/fields/string/String.tsx

@@ -1,68 +0,0 @@
-import { ReqoreControlGroup, ReqoreInput, ReqoreTag } from '@qoretechnologies/reqore';
-import { IReqoreControlGroupProps } from '@qoretechnologies/reqore/dist/components/ControlGroup';
-import { IReqoreInputProps } from '@qoretechnologies/reqore/dist/components/Input';
-import { IReqoreTagProps } from '@qoretechnologies/reqore/dist/components/Tag';
-import { ChangeEvent, useCallback } from 'react';
-import { TFormFieldValueType } from '../../../../types/Form';
-
-export interface IStringFormFieldProps extends Omit<IReqoreInputProps, 'onChange' | 'value'> {
-  sensitive?: boolean;
-  value?: TFormFieldValueType<'string'>;
-  label?: IReqoreTagProps['label'];
-  labelPosition?: 'top' | 'left' | 'right' | 'bottom';
-  labelProps?: IReqoreTagProps;
-  wrapperProps?: IReqoreControlGroupProps;
-  onChange?: (value?: TFormFieldValueType<'string'>, event?: ChangeEvent<HTMLInputElement>) => void;
-}
-
-export const FormStringField = ({
-  onChange,
-  wrapperProps,
-  labelProps,
-  label,
-  labelPosition = 'top',
-  sensitive,
-  ...rest
-}: IStringFormFieldProps) => {
-  // When input value changes
-  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>): void => {
-    event.persist();
-
-    onChange(event.target.value?.toString(), event);
-  }, []);
-
-  // Clear the input on reset click
-  const handleClearClick = useCallback((): void => {
-    onChange('');
-  }, []);
-
-  return (
-    <ReqoreControlGroup
-      stack
-      {...wrapperProps}
-      vertical={labelPosition === 'bottom' || labelPosition === 'top'}
-    >
-      {(label || label === 0) && (labelPosition === 'top' || labelPosition === 'left') ? (
-        <ReqoreTag label={label} fluid {...labelProps} />
-      ) : null}
-      <ReqoreInput
-        fluid
-        onFocus={(event) => {
-          event.stopPropagation();
-          rest?.onFocus?.(event);
-        }}
-        onClick={(event) => {
-          event.stopPropagation();
-          rest?.onClick?.(event);
-        }}
-        onChange={handleChange}
-        type={sensitive ? 'password' : 'text'}
-        onClearClick={handleClearClick}
-        {...rest}
-      />
-      {(label || label === 0) && (labelPosition === 'bottom' || labelPosition === 'right') ? (
-        <ReqoreTag label={label} fluid {...labelProps} />
-      ) : null}
-    </ReqoreControlGroup>
-  );
-};

package/src/components/menu/Menu.stories.tsx

@@ -1,73 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { expect, fireEvent, fn, waitFor } from '@storybook/test';
-import { storiesStorageMock, storiesStorageMockEmpty } from '../../../__tests__/ mock';
-import { testsWaitForText } from '../../../__tests__/utils';
-import menu from '../../../mock/menu';
-import { StoryMeta } from '../../types';
-import { ReqraftMenu, TReqraftMenu } from './Menu';
-
-const typedMenu = menu as TReqraftMenu;
-
-const meta = {
-  component: ReqraftMenu,
-  title: 'Components/Menu',
-  render: (props) => <ReqraftMenu {...props} />,
-  parameters: {
-    mockData: [...storiesStorageMockEmpty],
-  },
-} as StoryMeta<typeof ReqraftMenu>;
-
-export default meta;
-export type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {
-    menu: typedMenu,
-  },
-  play: async () => {
-    await testsWaitForText('Developer Portal');
-  },
-};
-export const ActivePath: Story = {
-  args: {
-    path: '/Interfaces/mapper',
-    menu: typedMenu,
-  },
-  play: async () => {
-    await testsWaitForText('Developer Portal');
-  },
-};
-
-export const WithDefaultQuery: Story = {
-  args: {
-    menu: typedMenu,
-    defaultQuery: 'mapper',
-  },
-  play: async () => {
-    await testsWaitForText('Developer Portal');
-    await expect(document.querySelector('.reqore-input')).toHaveValue('mapper');
-    await expect(document.querySelectorAll('.reqore-menu-item')).toHaveLength(2);
-  },
-};
-
-export const Filtered: Story = {
-  args: {
-    menu: typedMenu,
-    onQueryChange: fn(),
-  },
-  play: async () => {
-    await testsWaitForText('Developer Portal');
-    await fireEvent.change(document.querySelector('.reqore-input'), { target: { value: 'step' } });
-
-    await waitFor(() => expect(document.querySelectorAll('.reqore-menu-item')).toHaveLength(2), {
-      timeout: 1000,
-    });
-  },
-};
-
-export const WidthFromStorage: Story = {
-  ...ActivePath,
-  parameters: {
-    mockData: [...storiesStorageMock],
-  },
-};

package/src/components/menu/Menu.tsx

@@ -1,244 +0,0 @@
-import {
-  ReqoreButton,
-  ReqoreControlGroup,
-  ReqoreInput,
-  ReqoreMenuDivider,
-  ReqoreMenuItem,
-  ReqoreMenuSection,
-} from '@qoretechnologies/reqore';
-import ReqoreMenu, { IReqoreMenuProps } from '@qoretechnologies/reqore/dist/components/Menu';
-import { IReqoreMenuDividerProps } from '@qoretechnologies/reqore/dist/components/Menu/divider';
-import { IReqoreMenuItemProps } from '@qoretechnologies/reqore/dist/components/Menu/item';
-import { map, reduce, size } from 'lodash';
-import { useEffect, useMemo, useState } from 'react';
-import { useReqraftStorage } from '../../hooks/useStorage/useStorage';
-
-export interface IReqraftMenuItem extends IReqoreMenuItemProps {
-  submenu?: TReqraftMenuItem[];
-  activePaths?: string[];
-  to?: string;
-  href?: string;
-}
-
-export type TReqraftMenuItem = IReqraftMenuItem | ({ divider: true } & IReqoreMenuDividerProps);
-export type TReqraftMenu = TReqraftMenuItem[];
-
-export interface IReqraftMenuProps extends Partial<Omit<IReqoreMenuProps, 'resizable'>> {
-  hidden?: boolean;
-  onHideClick?: () => void;
-
-  defaultQuery?: string;
-  onQueryChange?: (query: string) => void;
-
-  menu: TReqraftMenu;
-  inputFocusShortcut?: string;
-  path?: string;
-
-  resizable?: boolean;
-  onResizeChange?: (width: number) => void;
-  defaultWidth?: number;
-}
-
-export const ReqraftMenuItem = ({
-  path,
-  isCollapsed,
-  ...props
-}: TReqraftMenuItem & { path?: string; isCollapsed?: boolean }) => {
-  if ('divider' in props) {
-    return <ReqoreMenuDivider />;
-  }
-
-  const isActive = useMemo(
-    () =>
-      props.activePaths?.some(
-        (activePath) => activePath === path || path?.startsWith(`${activePath}/`)
-      ),
-    [path]
-  );
-
-  if (props.submenu) {
-    const { submenu, ...menuData } = props;
-
-    return (
-      <ReqoreMenuSection
-        label={menuData.label}
-        icon={menuData.icon}
-        isCollapsed={isCollapsed && !isActive}
-        verticalPadding='tiny'
-        {...menuData}
-      >
-        {map(submenu, (submenuData, submenuId) => (
-          <ReqraftMenuItem key={submenuId} {...submenuData} path={path} />
-        ))}
-      </ReqoreMenuSection>
-    );
-  }
-
-  return (
-    <ReqoreMenuItem
-      customTheme={{ main: '#050505' }}
-      effect={
-        isActive
-          ? {
-              gradient: {
-                colors: {
-                  0: 'info:darken:5:0.4',
-                  40: '#181818',
-                  100: '#181818',
-                },
-              },
-            }
-          : undefined
-      }
-      leftIconColor={isActive ? 'info:lighten:10' : undefined}
-      verticalPadding='tiny'
-      {...props}
-    />
-  );
-};
-
-export const ReqraftMenu = ({
-  defaultQuery,
-  defaultWidth = 250,
-  inputFocusShortcut = '/',
-  hidden,
-  menu,
-  onQueryChange,
-  onResizeChange,
-  onHideClick,
-  resizable,
-  path,
-  ...rest
-}: IReqraftMenuProps) => {
-  const [query, setQuery] = useState<string>(defaultQuery);
-
-  const [isSidebarOpen, update] = useReqraftStorage<boolean>('sidebar-open', true, false);
-  const [sidebarSize, updateSidebarSize] = useReqraftStorage<number>(
-    'sidebar-size',
-    defaultWidth,
-    false
-  );
-
-  useEffect(() => {
-    if (defaultQuery) {
-      setQuery(defaultQuery);
-    }
-  }, [defaultQuery]);
-
-  const handleQueryChange = (newQuery: string) => {
-    setQuery(newQuery);
-    onQueryChange?.(newQuery);
-  };
-
-  const handleWidthChange = (newWidth: number) => {
-    updateSidebarSize(newWidth);
-    onResizeChange?.(newWidth);
-  };
-
-  const filteredMenu: TReqraftMenu = useMemo<TReqraftMenu>(() => {
-    if (!query) {
-      return menu;
-    }
-
-    const filterItems = (items: TReqraftMenu): TReqraftMenu => {
-      return reduce(
-        items,
-        (acc, item) => {
-          if ('divider' in item) {
-            acc.push(item);
-            return acc;
-          }
-
-          if (item.submenu) {
-            const submenu = filterItems(item.submenu);
-            const hasChildMatch = size(submenu);
-
-            if (hasChildMatch) {
-              acc.push({
-                ...item,
-                submenu,
-              });
-
-              return acc;
-            }
-          }
-
-          if (item.label.toString().toLowerCase().includes(query.toLowerCase())) {
-            acc.push(item);
-          }
-
-          return acc;
-        },
-        []
-      );
-    };
-
-    return filterItems(menu);
-  }, [menu, query]);
-
-  if (hidden) {
-    return null;
-  }
-
-  return (
-    <ReqoreMenu
-      width='250px'
-      minimal
-      position='left'
-      resizable={{
-        enable: { right: resizable, left: false },
-        minWidth: '250px',
-        maxWidth: '350px',
-        onResizeStop: (_e, _direction, _ref, d) => {
-          handleWidthChange(sidebarSize + d.width);
-        },
-        size: {
-          width: `${sidebarSize}px`,
-          height: '100%',
-        },
-      }}
-      rounded={false}
-      customTheme={{ main: '#181818' }}
-      {...rest}
-    >
-      <ReqoreControlGroup>
-        <ReqoreInput
-          icon='Search2Line'
-          minimal={false}
-          flat={false}
-          placeholder={`Filter menu "${inputFocusShortcut}"`}
-          intent={query ? 'info' : 'muted'}
-          leftIconProps={{ size: 'small' }}
-          iconColor={query ? 'info' : 'muted'}
-          pill
-          value={query}
-          onClearClick={() => handleQueryChange('')}
-          onChange={(e: any) => handleQueryChange(e.target.value)}
-          focusRules={{
-            shortcut: inputFocusShortcut,
-            type: 'keypress',
-            clearOnFocus: true,
-            doNotInsertShortcut: true,
-          }}
-        />
-        <ReqoreButton
-          icon='SideBarLine'
-          fixed
-          minimal={false}
-          onClick={() => {
-            update(!isSidebarOpen);
-            onHideClick?.();
-          }}
-        />
-      </ReqoreControlGroup>
-      {map(filteredMenu, (menuData, menuId) => (
-        <ReqraftMenuItem
-          key={menuId}
-          {...menuData}
-          path={path}
-          isCollapsed={!query && !!(menuData as IReqraftMenuItem).submenu}
-        />
-      ))}
-    </ReqoreMenu>
-  );
-};

package/src/contexts/FetchContext.tsx

@@ -1,25 +0,0 @@
-import { createContext } from 'use-context-selector';
-import { IReqraftFetchResponse, IReqraftQueryConfig } from '../utils/fetch';
-
-export type TReqraftContextQueryConfig = Omit<IReqraftQueryConfig, 'method'>;
-export interface IReqraftFetchContext {
-  get: <T>(config?: TReqraftContextQueryConfig) => Promise<IReqraftFetchResponse<T>>;
-  post: <T>(config?: TReqraftContextQueryConfig) => Promise<IReqraftFetchResponse<T>>;
-  put: <T>(config?: TReqraftContextQueryConfig) => Promise<IReqraftFetchResponse<T>>;
-  del: <T>(config?: TReqraftContextQueryConfig) => Promise<IReqraftFetchResponse<T>>;
-}
-
-export const FetchContext = createContext<IReqraftFetchContext>({
-  get: async () => {
-    throw new Error('FetchContext not implemented');
-  },
-  post: async () => {
-    throw new Error('FetchContext not implemented');
-  },
-  put: async () => {
-    throw new Error('FetchContext not implemented');
-  },
-  del: async () => {
-    throw new Error('FetchContext not implemented');
-  },
-});

package/src/contexts/ReqraftContext.tsx

@@ -1,16 +0,0 @@
-import { createContext } from 'use-context-selector';
-import { IReqraftFetchConfig } from '../utils/fetch';
-
-export interface IReqraftContext {
-  appName: string;
-  instance?: string;
-  instanceToken: string;
-  instanceUnauthorizedRedirect?: IReqraftFetchConfig['unauthorizedRedirect'];
-}
-
-export const ReqraftContext = createContext<IReqraftContext>({
-  appName: '',
-  instance: '',
-  instanceToken: '',
-  instanceUnauthorizedRedirect: undefined,
-});

package/src/contexts/StorageContext.tsx

@@ -1,33 +0,0 @@
-import { Get } from 'type-fest';
-import { createContext } from 'use-context-selector';
-import { TReqraftStorageValue } from '../hooks/useStorage/useStorage';
-
-export type TReqraftStorage = Record<string, any>;
-
-export interface IReqraftStorageContext {
-  storage?: Record<string, any>;
-  getStorage?: <T extends TReqraftStorageValue>(
-    path: string,
-    defaultValue?: T,
-    includeAppPrefix?: boolean
-  ) => Get<TReqraftStorage, string>;
-  updateStorage?: <T extends TReqraftStorageValue>(
-    path: string,
-    value: T,
-    includeAppPrefix?: boolean
-  ) => void;
-  removeStorageValue: (path: string, includeAppPrefix?: boolean) => void;
-}
-
-export const ReqraftStorageContext = createContext<IReqraftStorageContext>({
-  storage: {},
-  getStorage: () => {
-    throw new Error('Storage not implemented');
-  },
-  updateStorage: () => {
-    throw new Error('Storage not implemented');
-  },
-  removeStorageValue: () => {
-    throw new Error('Storage not implemented');
-  },
-});

package/src/hooks/useFetch/useFetch.stories.tsx

@@ -1,123 +0,0 @@
-import { ReqoreSpinner, ReqoreTree } from '@qoretechnologies/reqore';
-import { StoryObj } from '@storybook/react';
-import { useEffectOnce } from 'react-use';
-import { testsWaitForText } from '../../../__tests__/utils';
-import { StoryMeta } from '../../types';
-import { useFetch } from './useFetch';
-
-const meta = {
-  title: 'Hooks/useFetch',
-  render: (args) => {
-    const { data = {}, load, loading } = useFetch<any>({ url: 'public/info', method: args.method });
-
-    useEffectOnce(() => {
-      load();
-    });
-
-    return loading ? (
-      <ReqoreSpinner />
-    ) : (
-      <ReqoreTree data={data} bottomActions={[{ label: 'Refetch', onClick: load }]} />
-    );
-  },
-} as StoryMeta<any>;
-
-export default meta;
-export type Story = StoryObj<typeof meta>;
-
-export const get: Story = {
-  args: {
-    method: 'GET',
-  },
-  parameters: {
-    mockData: [
-      {
-        // An array of mock objects which will add in every story
-        url: 'https://hq.qoretechnologies.com:8092/api/latest/public/info',
-        method: 'GET',
-        status: 200,
-        delay: 200,
-        response: {
-          'instance-key': 'rippy-dev1',
-          'omq-version': '6.1.0_prod',
-          'omq-build': 'd115c45fbed95c03327aea880be455137e9778ba',
-          'qore-version': '2.0.0',
-          'omq-schema': 'omq@omq',
-          edition: 'Enterprise',
-          tz_region: 'Europe/Prague',
-          tz_utc_offset: 3600,
-          noauth: false,
-        },
-      },
-    ],
-  },
-  play: async () => {
-    await testsWaitForText('"rippy-dev1"');
-  },
-};
-
-export const put: Story = {
-  args: {
-    method: 'PUT',
-  },
-  parameters: {
-    mockData: [
-      {
-        // An array of mock objects which will add in every story
-        url: 'https://hq.qoretechnologies.com:8092/api/latest/public/info',
-        method: 'PUT',
-        status: 200,
-        response: {
-          status: 'Successfuly updated',
-        },
-      },
-    ],
-  },
-  play: async () => {
-    await testsWaitForText('"Successfuly updated"');
-  },
-};
-
-export const post: Story = {
-  args: {
-    method: 'POST',
-  },
-  parameters: {
-    mockData: [
-      {
-        // An array of mock objects which will add in every story
-        url: 'https://hq.qoretechnologies.com:8092/api/latest/public/info',
-        method: 'POST',
-        status: 200,
-        response: {
-          status: 'Successfuly created',
-        },
-      },
-    ],
-  },
-  play: async () => {
-    await testsWaitForText('"Successfuly created"');
-  },
-};
-
-export const del: Story = {
-  args: {
-    method: 'DELETE',
-  },
-  parameters: {
-    mockData: [
-      {
-        // An array of mock objects which will add in every story
-        url: 'https://hq.qoretechnologies.com:8092/api/latest/public/info',
-        method: 'DELETE',
-        status: 200,
-        response: {
-          status: 'Successfuly deleted',
-        },
-      },
-    ],
-  },
-  play: async () => {
-    await testsWaitForText('"Successfuly deleted"');
-  },
-};

package/src/hooks/useFetch/useFetch.tsx

@@ -1,71 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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>
-    );
-  },
-} 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

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

package/src/hooks/useValidation.ts

@@ -1,9 +0,0 @@
-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

@@ -1,12 +0,0 @@
-export {
-  IReqraftMenuItem,
-  IReqraftMenuProps,
-  ReqraftMenu,
-  TReqraftMenu,
-  TReqraftMenuItem,
-} from './components/menu/Menu';
-
-export { FormStringField, IStringFormFieldProps } from './components/form/fields/string/String';
-export { IReqraftUseFetch, useFetch } from './hooks/useFetch/useFetch';
-export { ReqraftProvider, ReqraftQueryClient } from './providers/ReqraftProvider';
-export { query } from './utils/fetch';

package/src/providers/FetchProvider.tsx

@@ -1,62 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
-import { useEffectOnce } from 'react-use';
-import { FetchContext, TReqraftContextQueryConfig } from '../contexts/FetchContext';
-import { useReqraftProperty } from '../hooks/useReqraftProperty';
-import { query, setupFetch } from '../utils/fetch';
-
-export interface IReqraftFetchProviderProps {
-  children: React.ReactNode;
-}
-
-export const ReqraftFetchProvider = ({ children }: IReqraftFetchProviderProps) => {
-  const queryClient = useQueryClient();
-  const instance = useReqraftProperty('instance');
-  const instanceToken = useReqraftProperty('instanceToken');
-  const instanceUnauthorizedRedirect = useReqraftProperty('instanceUnauthorizedRedirect');
-
-  const [ready, setReady] = useState(false);
-
-  useEffectOnce(() => {
-    setupFetch({
-      instance,
-      instanceToken,
-      unauthorizedRedirect: instanceUnauthorizedRedirect,
-    });
-
-    setReady(true);
-  });
-
-  if (!ready) {
-    return null;
-  }
-
-  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

@@ -1,33 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactNode } from 'react';
-import { IReqraftContext, ReqraftContext } from '../contexts/ReqraftContext';
-import { ReqraftFetchProvider } from './FetchProvider';
-import { ReqraftStorageProvider } from './StorageProvider';
-
-export const ReqraftQueryClient = new QueryClient();
-
-export interface IReqraftProviderProps extends IReqraftContext {
-  children: ReactNode;
-  reactQueryClient?: QueryClient;
-}
-
-export const ReqraftProvider = ({
-  appName,
-  children,
-  instance,
-  instanceToken,
-  instanceUnauthorizedRedirect,
-  reactQueryClient,
-}: IReqraftProviderProps) => {
-  return (
-    <ReqraftContext.Provider
-      value={{ appName, instanceToken, instance, instanceUnauthorizedRedirect }}
-    >
-      <QueryClientProvider client={reactQueryClient || ReqraftQueryClient}>
-        <ReqraftFetchProvider>
-          <ReqraftStorageProvider>{children}</ReqraftStorageProvider>
-        </ReqraftFetchProvider>
-      </QueryClientProvider>
-    </ReqraftContext.Provider>
-  );
-};

package/src/providers/StorageProvider.tsx

@@ -1,80 +0,0 @@
-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';
-
-export interface IReqraftStorageProviderProps {
-  children: ReactNode;
-}
-
-export const ReqraftStorageProvider = ({ children }: 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);
-    }
-  }, [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) {
-    return null;
-  }
-
-  return (
-    <ReqraftStorageContext.Provider
-      value={{ storage, getStorage, updateStorage, removeStorageValue }}
-    >
-      {children}
-    </ReqraftStorageContext.Provider>
-  );
-};

package/src/types/Form.ts

@@ -1,57 +0,0 @@
-export type TFormFieldType =
-  | 'string'
-  | 'number'
-  | 'boolean'
-  | 'date'
-  | 'time'
-  | 'datetime'
-  | 'select'
-  | 'multiSelect'
-  | 'radio'
-  | 'checkbox'
-  | 'file'
-  | 'image'
-  | 'color'
-  | 'password'
-  | 'email'
-  | 'phone'
-  | 'url'
-  | 'markdown';
-
-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'
-  ? string
-  : T extends 'password'
-  ? string
-  : T extends 'email'
-  ? string
-  : T extends 'phone'
-  ? string
-  : T extends 'url'
-  ? string
-  : T extends 'markdown'
-  ? string
-  : any;

package/src/types.ts

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

package/src/utils/fetch.ts

@@ -1,121 +0,0 @@
-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;
-}
-
-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,
-  };
-}