@qoretechnologies/reqore 0.44.0 → 0.45.0

package/src/stories/TextArea/TextArea.stories.tsx

@@ -1,287 +0,0 @@
-import { expect } from '@storybook/jest';
-import { StoryFn, StoryObj } from '@storybook/react';
-import { fireEvent } from '@storybook/testing-library';
-import { useState } from 'react';
-import { IReqoreTextareaProps } from '../../components/Textarea';
-import { sleep } from '../../helpers/utils';
-import { ReqoreControlGroup, ReqoreTextarea } from '../../index';
-import { StoryMeta } from '../utils';
-import { DisabledArg, MinimalArg, SizeArg, argManager } from '../utils/args';
-
-const { createArg } = argManager<IReqoreTextareaProps>();
-
-const meta = {
-  title: 'Form/TextArea/Stories',
-  component: ReqoreTextarea,
-  args: {
-    scaleWithContent: true,
-    fluid: undefined,
-    placeholder: 'Placeholder',
-  },
-  argTypes: {
-    ...MinimalArg(),
-    ...DisabledArg,
-    ...SizeArg,
-    ...createArg('scaleWithContent', {
-      name: 'Scale with content',
-      description: 'Scale with content',
-      control: 'boolean',
-      defaultValue: true,
-    }),
-    ...createArg('fluid', {
-      name: 'Fluid',
-      description: 'Fluid',
-      control: 'boolean',
-      defaultValue: undefined,
-    }),
-    ...createArg('placeholder', {
-      name: 'Placeholder',
-      description: 'Placeholder',
-      control: 'text',
-      defaultValue: 'Placeholder',
-    }),
-  },
-} as StoryMeta<typeof ReqoreTextarea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const str =
-  '✔ Checking your system\n' +
-  '✔ Locating Application\n' +
-  '✔ Preparing native dependencies\n' +
-  '✔ Compiling Main Process Code\n' +
-  '✔ Launch Dev Servers\n' +
-  '✔ Compiling Preload Scripts\n' +
-  '✔ Launching Application\n';
-
-const Template: StoryFn<IReqoreTextareaProps> = (args) => {
-  const [value, setValue] = useState(str);
-
-  const handleValueChange = (e) => {
-    setValue(e.target.value);
-  };
-
-  const handleValueClear = () => {
-    setValue('');
-  };
-
-  return (
-    <>
-      <ReqoreControlGroup wrap>
-        <ReqoreTextarea {...args} onChange={handleValueChange} onClearClick={handleValueClear} />
-        <ReqoreTextarea
-          {...args}
-          onChange={handleValueChange}
-          onClearClick={handleValueClear}
-          tooltip={{
-            placement: 'right-start',
-            content: 'I am a tooltip',
-          }}
-          minimal
-        />
-        <ReqoreTextarea
-          {...args}
-          onChange={handleValueChange}
-          onClearClick={handleValueClear}
-          tooltip="I'm a tooltip"
-          flat
-        />
-        <ReqoreTextarea
-          {...args}
-          onChange={handleValueChange}
-          onClearClick={handleValueClear}
-          disabled
-        />
-        <ReqoreTextarea
-          {...args}
-          onChange={handleValueChange}
-          onClearClick={handleValueClear}
-          readOnly
-        />
-      </ReqoreControlGroup>
-      <br />
-      <ReqoreControlGroup wrap>
-        <ReqoreTextarea
-          {...args}
-          onChange={handleValueChange}
-          onClearClick={handleValueClear}
-          value={value}
-        />
-        <ReqoreTextarea
-          {...args}
-          onChange={handleValueChange}
-          onClearClick={handleValueClear}
-          value={value}
-          tooltip={{
-            placement: 'right-start',
-            content: 'I am a tooltip',
-          }}
-          minimal
-        />
-        <ReqoreTextarea
-          {...args}
-          onChange={handleValueChange}
-          onClearClick={handleValueClear}
-          value={value}
-          tooltip="I'm a tooltip"
-          flat
-        />
-        <ReqoreTextarea
-          {...args}
-          onChange={handleValueChange}
-          onClearClick={handleValueClear}
-          value={value}
-          disabled
-        />
-        <ReqoreTextarea
-          {...args}
-          onChange={handleValueChange}
-          onClearClick={handleValueClear}
-          value={value}
-          readOnly
-        />
-      </ReqoreControlGroup>
-      <br />
-      <ReqoreControlGroup fluid>
-        <ReqoreTextarea
-          {...args}
-          onChange={handleValueChange}
-          onClearClick={handleValueClear}
-          value={value}
-          fluid
-          focusRules={{ type: 'auto' }}
-        />
-      </ReqoreControlGroup>
-    </>
-  );
-};
-
-export const Basic: Story = {
-  render: Template,
-};
-
-export const Info: Story = {
-  render: Template,
-
-  args: {
-    intent: 'info',
-  },
-};
-
-export const Success: Story = {
-  render: Template,
-
-  args: {
-    intent: 'success',
-  },
-};
-
-export const Warning: Story = {
-  render: Template,
-
-  args: {
-    intent: 'warning',
-  },
-};
-
-export const Danger: Story = {
-  render: Template,
-
-  args: {
-    intent: 'danger',
-  },
-};
-
-export const Pending: Story = {
-  render: Template,
-
-  args: {
-    intent: 'pending',
-  },
-};
-
-export const Muted: Story = {
-  render: Template,
-
-  args: {
-    intent: 'muted',
-  },
-};
-
-export const Custom: Story = {
-  render: Template,
-
-  args: {
-    customTheme: {
-      main: '#38fdb2',
-    },
-  },
-};
-
-export const Effect: Story = {
-  render: Template,
-
-  args: {
-    effect: {
-      gradient: {
-        type: 'radial',
-        colors: {
-          0: '#361554',
-          50: '#160013',
-        },
-      },
-      spaced: 2,
-      color: '#ffffff',
-      uppercase: true,
-      textSize: 'small',
-      weight: 'bold',
-    },
-  },
-};
-
-export const WithTemplates: Story = {
-  render: (args) => <ReqoreTextarea {...args} />,
-
-  args: {
-    templates: {
-      handler: 'focus',
-      useTargetWidth: true,
-      noWrapper: true,
-      items: [
-        {
-          label: 'New message in discord',
-          icon: 'DiscordLine',
-          description: 'When a new message in discord is received',
-          items: [
-            {
-              divider: true,
-              label: 'Discord',
-            },
-            {
-              label: 'Author',
-              description: 'Author of the message',
-              value: '$state:{1.field.author}',
-            },
-            {
-              label: 'Content',
-              description: 'Content of the message',
-              value: '$state:{1.field.content}',
-            },
-          ],
-        },
-        {
-          label: 'New event in Google Calendar',
-          icon: 'Calendar2Fill',
-          description: 'When a new event is created in Google Calendar',
-        },
-      ],
-    },
-  },
-
-  play: async () => {
-    await sleep(200);
-    await fireEvent.focusIn(document.querySelector('textarea'));
-    await expect(document.querySelector('.reqore-popover-content')).toBeTruthy();
-  },
-};

package/src/stories/TextArea/TextAreaTests.stories.tsx

@@ -1,108 +0,0 @@
-import { expect, jest } from '@storybook/jest';
-import { StoryObj } from '@storybook/react';
-import { fireEvent, waitFor, within } from '@storybook/testing-library';
-import { IReqoreTextareaProps } from '../../components/Textarea';
-import { sleep } from '../../helpers/utils';
-import { ReqoreTextarea } from '../../index';
-import { StoryMeta } from '../utils';
-import { DisabledArg, MinimalArg, SizeArg, argManager } from '../utils/args';
-
-const { createArg } = argManager<IReqoreTextareaProps>();
-
-const meta = {
-  title: 'Form/TextArea/Tests',
-  component: ReqoreTextarea,
-  args: {
-    scaleWithContent: true,
-    fluid: undefined,
-    placeholder: 'Placeholder',
-    onChange: jest.fn(),
-  },
-  argTypes: {
-    ...MinimalArg(),
-    ...DisabledArg,
-    ...SizeArg,
-    ...createArg('scaleWithContent', {
-      name: 'Scale with content',
-      description: 'Scale with content',
-      control: 'boolean',
-      defaultValue: true,
-    }),
-    ...createArg('fluid', {
-      name: 'Fluid',
-      description: 'Fluid',
-      control: 'boolean',
-      defaultValue: undefined,
-    }),
-    ...createArg('placeholder', {
-      name: 'Placeholder',
-      description: 'Placeholder',
-      control: 'text',
-      defaultValue: 'Placeholder',
-    }),
-  },
-} as StoryMeta<typeof ReqoreTextarea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const ItemCanBeSelected: Story = {
-  args: {
-    templates: {
-      handler: 'focus',
-      useTargetWidth: true,
-      noWrapper: true,
-      items: [
-        {
-          label: 'New message in discord',
-          icon: 'DiscordLine',
-          description: 'When a new message in discord is received',
-          items: [
-            {
-              divider: true,
-              label: 'Discord',
-            },
-            {
-              label: 'Author',
-              description: 'Author of the message',
-              value: '$state:{1.field.author}',
-            },
-            {
-              label: 'Content',
-              description: 'Content of the message',
-              value: '$state:{1.field.content}',
-            },
-          ],
-        },
-        {
-          label: 'New event in Google Calendar',
-          icon: 'Calendar2Fill',
-          description: 'When a new event is created in Google Calendar',
-          items: [],
-        },
-      ],
-    },
-  },
-
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    await sleep(200);
-    await fireEvent.focusIn(document.querySelector('textarea'));
-    await sleep(200);
-    await expect(document.querySelector('.reqore-popover-content')).toBeTruthy();
-    await sleep(200);
-    await fireEvent.click(canvas.getAllByText('New message in discord')[0]);
-
-    await waitFor(() => expect(canvas.getAllByText('Author')[0]).toBeTruthy(), {
-      timeout: 5000,
-    });
-
-    await fireEvent.click(canvas.getAllByText('Author')[0]);
-
-    await expect(canvas.getAllByText('$state:{1.field.author}')[0]).toBeTruthy();
-    await expect(args.onChange).toHaveBeenCalledWith({
-      target: { value: '$state:{1.field.author}' },
-    });
-  },
-};

package/src/stories/Tree/Tree.stories.tsx

@@ -1,124 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { noop } from 'lodash';
-import { IReqoreTreeProps, ReqoreTree } from '../../components/Tree';
-import MockObject from '../../mock/object.json';
-import { StoryMeta } from '../utils';
-import { SizeArg, argManager } from '../utils/args';
-
-const { createArg } = argManager<IReqoreTreeProps>();
-
-const meta: StoryMeta<typeof ReqoreTree> = {
-  title: 'Collections/Tree/Stories',
-  component: ReqoreTree,
-  args: {
-    withLabelCopy: true,
-    showTypes: true,
-    expanded: false,
-    onItemClick: noop,
-    data: MockObject,
-  },
-  argTypes: {
-    ...createArg('withLabelCopy', {
-      name: 'With label copy',
-      description: 'With label copy',
-      control: 'boolean',
-      defaultValue: true,
-    }),
-    ...createArg('showTypes', {
-      name: 'Show types',
-      description: 'Show types',
-      control: 'boolean',
-      defaultValue: true,
-    }),
-    ...createArg('expanded', {
-      name: 'Expanded',
-      description: 'Expanded',
-      control: 'boolean',
-      defaultValue: false,
-    }),
-    ...SizeArg,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {};
-
-export const TextView: Story = {
-  args: {
-    mode: 'copy',
-  },
-};
-
-export const NoControls: Story = {
-  args: {
-    showControls: false,
-  },
-};
-
-export const Zoomable: Story = {
-  args: {
-    zoomable: true,
-  },
-};
-
-export const Exportable: Story = {
-  args: {
-    zoomable: true,
-    exportable: true,
-  },
-};
-
-export const Object: Story = {
-  args: {
-    exportable: true,
-    data: {
-      _id: '606d4c955f96372fd1b8bcd1',
-      index: 0,
-      guid: 'd08cde5f-e18e-4d7f-80a9-6541848ab830',
-      isActive: false,
-      balance: '$3,219.32',
-      picture: 'http://placehold.it/32x32',
-      age: 25,
-      eyeColor: 'brown',
-      name: 'Zelma Short',
-      gender: 'female',
-      company: 'LINGOAGE',
-      email: 'zelmashort@lingoage.com',
-      phone: '+1 (840) 429-2274',
-      address: '757 Woodside Avenue, Winchester, Marshall Islands, 2032',
-      about:
-        'Ipsum est ex nisi veniam proident adipisicing. Occaecat Lorem minim amet aliqua laboris excepteur sint eu mollit laborum sunt. Duis aliquip nulla cillum labore culpa ullamco labore non in nostrud. Cupidatat nisi enim ullamco quis voluptate Lorem voluptate minim dolore esse irure eiusmod aliquip amet. Dolore laboris Lorem laboris irure magna sint dolor. In irure adipisicing minim ullamco commodo ad dolore elit occaecat dolor. Cillum commodo est commodo dolor enim velit.\r\n',
-      registered: '2015-03-19T05:00:22 -01:00',
-      latitude: -8.97737,
-      longitude: 110.576471,
-      tags: ['aute', 'qui', 'ut', 'mollit', 'culpa', 'qui', 'irure'],
-      friends: [
-        {
-          id: 0,
-          name: 'Angel Gallagher',
-        },
-        {
-          id: 1,
-          name: 'Rose Farmer',
-        },
-        {
-          id: 2,
-          name: 'Jaclyn Keith',
-        },
-      ],
-      greeting: 'Hello, Zelma Short! You have 5 unread messages.',
-      favoriteFruit: 'banana',
-    },
-  },
-};
-
-export const WithDefaultZoom: Story = {
-  args: {
-    label: 'Collection of items',
-    zoomable: true,
-    size: 'tiny',
-    defaultZoom: 2,
-  },
-};

package/src/stories/Wrapper.tsx

@@ -1,13 +0,0 @@
-import { ReqoreLayoutContent } from '..';
-import ReqoreContent from '../components/Content';
-import ReqoreUIProvider, { IReqoreUIProviderProps } from '../containers/UIProvider';
-
-export const StoryWrapper = ({ children, ...args }: IReqoreUIProviderProps) => {
-  return (
-    <ReqoreUIProvider {...args}>
-      <ReqoreLayoutContent>
-        <ReqoreContent style={{ padding: '20px' }}>{children}</ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-};

package/src/stories/utils/args.ts

@@ -1,151 +0,0 @@
-import { TSizes } from '../../constants/sizes';
-import { DEFAULT_INTENTS } from '../../constants/theme';
-import Icons from '../../icons.json';
-import { IReqoreIconName } from '../../types/icons';
-
-export interface IArgData {
-  description?: string;
-  name?: string;
-  control?: any;
-  options?: string[];
-  type?: string;
-  table?: any;
-}
-
-export type TArg<T> = { [key: string]: (IArgData & { defaultValue?: T }) | undefined };
-export type TDisabledArg = { [key: string]: { table: { disable: boolean } } };
-
-export const argManager = <Target>() => {
-  return {
-    createArg<K extends keyof Target>(
-      name: K,
-      data: IArgData & { defaultValue?: Target[K] }
-    ): TArg<Target[K]> {
-      return {
-        [name as string]: data,
-      };
-    },
-    disableArg<K extends keyof Target>(name: K): TDisabledArg {
-      return {
-        [name]: {
-          table: {
-            disable: true,
-          },
-        },
-      };
-    },
-    disableArgs<K extends keyof Target>(names: K[]): TDisabledArg {
-      return names.reduce((newArgs: TDisabledArg, name) => {
-        return {
-          ...newArgs,
-          ...{
-            [name]: {
-              table: {
-                disable: true,
-              },
-            },
-          },
-        };
-      }, {});
-    },
-  };
-};
-
-export const IconArg = (
-  iconKeyName: string = 'icon',
-  name?: string,
-  defaultValue?: IReqoreIconName
-) =>
-  argManager<any>().createArg(iconKeyName, {
-    defaultValue: defaultValue || (defaultValue === null ? null : '24HoursFill'),
-    name: name || 'Icon',
-    description: 'The icon name used',
-    control: {
-      type: 'select',
-    },
-    options: Icons,
-  });
-
-export const MinimalArg = (): TArg<any> => {
-  return argManager<any>().createArg('minimal', {
-    description: 'Whether the component should be minimal',
-    name: 'Minimal',
-    defaultValue: false,
-    control: {
-      type: 'boolean',
-    },
-  });
-};
-
-export const FlatArg = {
-  ...argManager<any>().createArg('flat', {
-    description: 'Whether the component should be flat',
-    name: 'Flat',
-    defaultValue: undefined,
-    control: {
-      type: 'boolean',
-    },
-  }),
-};
-
-export const NoContentArg = {
-  ...argManager<any>().createArg('withoutContent', {
-    defaultValue: true,
-    table: {
-      disable: true,
-    },
-  }),
-};
-
-export const SizeArg = {
-  ...argManager<any>().createArg('size', {
-    control: 'select',
-    description: 'The size of the element',
-    options: ['tiny', 'small', 'normal', 'big', 'huge'] as TSizes[],
-    name: 'Size',
-    defaultValue: 'normal' as TSizes,
-    table: {
-      defaultValue: { summary: 'normal' },
-    },
-  }),
-};
-
-export const GapSizeArg = {
-  ...argManager<any>().createArg('gapSize', {
-    control: 'select',
-    description: 'The gap size of the elements',
-    options: ['tiny', 'small', 'normal', 'big', 'huge'] as TSizes[],
-    name: 'Gap Size',
-    defaultValue: 'normal' as TSizes,
-    table: {
-      defaultValue: { summary: 'normal' },
-    },
-  }),
-};
-
-export const IntentArg = {
-  ...argManager<any>().createArg('intent', {
-    control: 'select',
-    description: 'The intent of the element',
-    options: Object.keys(DEFAULT_INTENTS),
-    name: 'Intent',
-  }),
-};
-
-export const CustomIntentArg = (key: string) => ({
-  ...argManager<any>().createArg(key, {
-    control: 'select',
-    description: 'The custom intent',
-    options: Object.keys(DEFAULT_INTENTS),
-    name: 'Custom Intent',
-  }),
-});
-
-export const DisabledArg = {
-  ...argManager<any>().createArg('disabled', {
-    control: 'boolean',
-    description: 'Whether the element should be disabled',
-    name: 'Disabled',
-    defaultValue: false,
-  }),
-};