@qoretechnologies/reqraft 0.0.1 → 0.2.0

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

@@ -0,0 +1,37 @@
+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/{string → fields/string}/String.stories.tsx

@@ -1,5 +1,5 @@
 import { StoryObj } from '@storybook/react';
-import { StoryMeta } from '../../../types';
+import { StoryMeta } from '../../../../types';
 import { FormStringField } from './String';
 
 const meta = {

package/src/components/form/{string → fields/string}/String.tsx

@@ -3,15 +3,16 @@ import { IReqoreControlGroupProps } from '@qoretechnologies/reqore/dist/componen
 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?: string;
+  value?: TFormFieldValueType<'string'>;
   label?: IReqoreTagProps['label'];
   labelPosition?: 'top' | 'left' | 'right' | 'bottom';
   labelProps?: IReqoreTagProps;
   wrapperProps?: IReqoreControlGroupProps;
-  onChange?: (value?: string, event?: ChangeEvent<HTMLInputElement>) => void;
+  onChange?: (value?: TFormFieldValueType<'string'>, event?: ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const FormStringField = ({

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

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

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

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

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

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

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

@@ -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;
+};