@qoretechnologies/reqraft 0.2.2 → 0.2.4

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';