@qoretechnologies/reqraft 0.3.2 → 0.3.3

package/src/components/form/fields/radio-group/RadioGroup.tsx

@@ -0,0 +1,46 @@
+import { ReqoreRadioGroup } from '@qoretechnologies/reqore';
+import { IReqoreRadioGroupProps } from '@qoretechnologies/reqore/dist/components/RadioGroup';
+import { useMemo } from 'react';
+
+export interface IRadioGroupFormFieldProps
+  extends Omit<IReqoreRadioGroupProps, 'onChange' | 'onSelectClick' | 'selected'> {
+  value: string;
+  onChange(value: string): void;
+  disabled?: boolean;
+}
+
+export const RadioGroupFormField = ({
+  items: _items,
+  disabled,
+  onChange,
+  value,
+  ...rest
+}: IRadioGroupFormFieldProps) => {
+  const items: IReqoreRadioGroupProps['items'] = useMemo(
+    () =>
+      _items.map((item) => ({
+        margin: 'right',
+        labelEffect: {
+          spaced: 1,
+          weight: 'bold',
+          uppercase: true,
+          textSize: 'small',
+        },
+        ...item,
+        disabled: disabled || item.disabled,
+      })),
+    [_items]
+  );
+
+  return (
+    <ReqoreRadioGroup
+      items={items}
+      disabled={disabled}
+      onSelectClick={onChange}
+      selected={value}
+      {...rest}
+    />
+  );
+};
+
+export default RadioGroupFormField;

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

@@ -0,0 +1,70 @@
+import { StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+import { useState } from 'react';
+import { StoryMeta } from '../../../../types';
+import { StringFormField } from './String';
+
+const meta = {
+  component: StringFormField,
+  title: 'Components/Form/String',
+  args: {
+    onChange: fn(),
+    onClearClick: fn(),
+    'aria-label': 'Name',
+  },
+  render(args) {
+    const [value, setValue] = useState(args.value);
+    return (
+      <StringFormField
+        {...args}
+        value={value}
+        onChange={(value, event) => {
+          args.onChange?.(value, event);
+          setValue(value);
+        }}
+        onClearClick={() => {
+          args.onClearClick?.();
+          setValue('');
+        }}
+      />
+    );
+  },
+} as StoryMeta<typeof StringFormField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: 'Qore',
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText('Name');
+
+    await expect(input).toBeInTheDocument();
+    await expect(input).toHaveValue('Qore');
+
+    await userEvent.click(input.nextElementSibling);
+    await expect(args.onClearClick).toHaveBeenCalledOnce();
+    await expect(input).toHaveValue('');
+
+    await userEvent.type(input, 'Java');
+    await expect(input).toHaveValue('Java');
+    await expect(args.onChange).toHaveBeenLastCalledWith('Java', expect.objectContaining({}));
+  },
+};
+
+export const Sensitive: Story = {
+  args: {
+    sensitive: true,
+    value: 'password',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText('Name');
+    await expect(input).toBeInTheDocument();
+    await expect(input).toHaveAttribute('type', 'password');
+    await expect(input).toHaveValue('password');
+  },
+};

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

@@ -0,0 +1,43 @@
+import { ReqoreInput } from '@qoretechnologies/reqore';
+import { IReqoreInputProps } from '@qoretechnologies/reqore/dist/components/Input';
+import { ChangeEvent } from 'react';
+
+import { TFormFieldValueType } from '../../../../types/Form';
+
+export interface IStringFormFieldProps extends Omit<IReqoreInputProps, 'onChange' | 'value'> {
+  sensitive?: boolean;
+  value?: TFormFieldValueType<'string'>;
+  onChange?: (value?: TFormFieldValueType<'string'>, event?: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const StringFormField = ({ onChange, sensitive, ...rest }: IStringFormFieldProps) => {
+  // When input value changes
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    onChange(event.target.value?.toString(), event);
+  };
+
+  // Clear the input on reset click
+  const handleClearClick = (): void => {
+    onChange('');
+  };
+
+  return (
+    <ReqoreInput
+      wrapperStyle={{
+        width: '100%',
+      }}
+      onFocus={(event) => {
+        event.stopPropagation();
+        rest?.onFocus?.(event);
+      }}
+      onClick={(event) => {
+        event.stopPropagation();
+        rest?.onClick?.(event);
+      }}
+      onChange={handleChange}
+      type={sensitive ? 'password' : 'text'}
+      onClearClick={handleClearClick}
+      {...rest}
+    />
+  );
+};

package/src/components/form/index.tsx

@@ -0,0 +1,8 @@
+export * from './fields/Field';
+export * from './fields/boolean/Boolean';
+export * from './fields/color/Color';
+export * from './fields/long-string/LongString';
+export * from './fields/markdown/Markdown';
+export * from './fields/number/Number';
+export * from './fields/radio-group/RadioGroup';
+export * from './fields/string/String';

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,9 @@
+import { createContext } from 'use-context-selector';
+
+export interface IReqraftContext {
+  appName: string;
+}
+
+export const ReqraftContext = createContext<IReqraftContext>({
+  appName: '',
+});

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/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: string;
+  export = value;
+}

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"');
+  },
+};