@qoretechnologies/reqraft 0.3.1 → 0.3.3

package/src/components/form/fields/color/Color.stories.tsx

@@ -0,0 +1,60 @@
+import { StoryObj } from '@storybook/react';
+import { expect, fn, userEvent } from '@storybook/test';
+import { useState } from 'react';
+
+import { StoryMeta } from '../../../../types';
+import { ColorFormField } from './Color';
+
+const meta = {
+  component: ColorFormField,
+  title: 'Components/Form/Color',
+  args: {
+    onChange: fn(),
+  },
+} as StoryMeta<typeof ColorFormField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: { r: 0, g: 0, b: 0, a: 1 },
+  },
+  render(args) {
+    const [value, setValue] = useState(args.value);
+
+    return (
+      <ColorFormField
+        {...args}
+        value={value}
+        onChange={(value) => {
+          args.onChange?.(value);
+          setValue(value);
+        }}
+      />
+    );
+  },
+  async play({ canvasElement, args }) {
+    const picker = canvasElement.querySelector('.sketch-picker');
+    const colorPanel = canvasElement.querySelector('.saturation-white');
+    const valueInput = canvasElement.querySelector('input');
+
+    await expect(picker).toBeInTheDocument();
+    await expect(colorPanel).toBeInTheDocument();
+    await expect(valueInput).toBeInTheDocument();
+    await expect(valueInput).toHaveValue('000000');
+
+    await userEvent.pointer({
+      keys: '[MouseLeft]',
+      target: colorPanel,
+      coords: { x: 0, y: 0 },
+    });
+    await expect(valueInput).toHaveValue('FFFFFF');
+    await expect(args.onChange).toHaveBeenLastCalledWith({
+      r: 255,
+      g: 255,
+      b: 255,
+      a: 1,
+    });
+  },
+};

package/src/components/form/fields/color/Color.tsx

@@ -0,0 +1,43 @@
+import { SketchPicker, SketchPickerProps } from 'react-color';
+import styled from 'styled-components';
+
+export interface IColorFormFieldProps extends Omit<SketchPickerProps, 'onChange'> {
+  value: SketchPickerProps['color'];
+  onChange(value: IColorFormFieldProps['value']);
+}
+
+export const StyledSketchPicker = styled(SketchPicker)`
+  background-color: transparent !important;
+  width: 100% !important;
+  max-width: 400px !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+
+  > div:first-child {
+    padding-bottom: unset !important;
+    height: 100px !important;
+  }
+
+  label {
+    color: #fff !important;
+  }
+  input {
+    width: 100% !important;
+  }
+  .flexbox-fix {
+    border: none !important;
+  }
+`;
+
+export const ColorFormField = ({ value, onChange, ...rest }: IColorFormFieldProps) => {
+  return (
+    <StyledSketchPicker
+      onChange={(color) => onChange(color.rgb)}
+      color={value}
+      disableAlpha
+      {...rest}
+    />
+  );
+};
+
+export default ColorFormField;

package/src/components/form/fields/cron/Cron.stories.tsx

@@ -0,0 +1,60 @@
+import { StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+import { useState } from 'react';
+import { StoryMeta } from '../../../../types';
+import { CronFormField } from './Cron';
+
+const meta = {
+  component: CronFormField,
+  title: 'Components/Form/Cron',
+  args: {
+    wrapperProps: {
+      'aria-label': 'Cron',
+    },
+    onChange: fn(),
+  },
+  render(args) {
+    const [value, setValue] = useState(args.value);
+
+    return (
+      <CronFormField
+        {...args}
+        value={value}
+        onChange={(value) => {
+          args.onChange?.(value);
+          setValue(value);
+        }}
+      />
+    );
+  },
+} as StoryMeta<typeof CronFormField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: '1 1 1 1 1',
+    inputProps: ['Minute', 'Hour', 'Day', 'Month', 'Weekday'].map((label) => ({
+      'aria-label': label,
+    })),
+  },
+
+  async play({ args, canvasElement }) {
+    const canvas = within(canvasElement);
+    const wrapper = canvas.getByLabelText('Cron');
+    await expect(wrapper).toBeInTheDocument();
+
+    await Promise.all(
+      args.inputProps
+        .map((p) => p['aria-label'])
+        .map((label) => expect(canvas.getByLabelText(label)).toBeInTheDocument())
+    );
+    await userEvent.clear(canvas.getByLabelText('Minute'));
+    await userEvent.type(canvas.getByLabelText('Minute'), '30');
+    await expect(args.onChange).toHaveBeenLastCalledWith('30 1 1 1 1');
+
+    await userEvent.click(canvas.getByRole('button'));
+    await expect(args.onChange).toHaveBeenLastCalledWith('');
+  },
+};

package/src/components/form/fields/cron/Cron.tsx

@@ -0,0 +1,77 @@
+import {
+  ReqoreButton,
+  ReqoreControlGroup,
+  ReqoreInput,
+  ReqoreMessage,
+} from '@qoretechnologies/reqore';
+import { IReqoreControlGroupProps } from '@qoretechnologies/reqore/dist/components/ControlGroup';
+import { IReqoreInputProps } from '@qoretechnologies/reqore/dist/components/Input';
+import cronstrue from 'cronstrue';
+import { useMemo } from 'react';
+
+export interface ICronFormFieldProps {
+  value?: string;
+  onChange?(value: string): void;
+  wrapperProps?: Partial<IReqoreControlGroupProps>;
+  inputProps?: IReqoreInputProps[];
+}
+
+export const CronFormField = ({
+  onChange,
+  value,
+  wrapperProps,
+  inputProps,
+}: ICronFormFieldProps) => {
+  const { message, isError } = useMemo(() => {
+    try {
+      return { message: cronstrue.toString(value, {}) };
+    } catch (message: any) {
+      return {
+        message,
+        isError: true,
+      };
+    }
+  }, [value]);
+
+  return (
+    <ReqoreControlGroup fluid stack={false} vertical gapSize='big' {...wrapperProps}>
+      <ReqoreControlGroup fluid stack>
+        {['Minute', 'Hour', 'Day', 'Month', 'Weekday'].map((label, index) => {
+          return (
+            <ReqoreInput
+              {...inputProps[index]}
+              key={index}
+              aria-label={label}
+              placeholder={label}
+              onChange={(event) => {
+                const cronData: Record<string, string> = {};
+                [
+                  cronData.minute = '',
+                  cronData.hour = '',
+                  cronData.day = '',
+                  cronData.month = '',
+                  cronData.weekday = '',
+                ] = value.split(' ');
+                cronData[label.toLowerCase() as any] = event.currentTarget.value;
+
+                onChange?.(
+                  `${cronData.minute} ${cronData.hour} ${cronData.day} ${cronData.month} ${cronData.weekday}`
+                );
+              }}
+              value={value.split(' ')?.[index] ?? ''}
+            />
+          );
+        })}
+
+        <ReqoreButton fixed onClick={() => onChange('')} icon={'CloseLine'} />
+      </ReqoreControlGroup>
+      {value && (
+        <ReqoreMessage intent={isError ? 'danger' : 'info'} opaque={false}>
+          {message}
+        </ReqoreMessage>
+      )}
+    </ReqoreControlGroup>
+  );
+};
+
+export default CronFormField;

package/src/components/form/fields/long-string/LongString.stories.tsx

@@ -0,0 +1,62 @@
+import { StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+import { useState } from 'react';
+
+import { longStringText } from '../../../../../mock/fields';
+import { StoryMeta } from '../../../../types';
+import { LongStringFormField } from './LongString';
+
+const meta = {
+  component: LongStringFormField,
+  title: 'Components/Form/LongString',
+  args: {
+    onChange: fn(),
+    onClearClick: fn(),
+    'aria-label': `LongString`,
+    value: longStringText,
+  },
+  render(args) {
+    const [value, setValue] = useState(args.value);
+    return (
+      <LongStringFormField
+        {...args}
+        value={value}
+        onChange={(value) => {
+          args.onChange?.(value);
+          setValue(value);
+        }}
+      />
+    );
+  },
+} as StoryMeta<typeof LongStringFormField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async ({ canvasElement, args, step }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByLabelText('LongString');
+
+    await step('Initial asserts', async () => {
+      await expect(textarea).toBeInTheDocument();
+      await expect(textarea).toHaveValue(args.value);
+    });
+
+    await step('Clear Longstring field', async () => {
+      await userEvent.click(textarea.nextElementSibling);
+      await expect(textarea).toHaveValue('');
+      await expect(args.onChange).toHaveBeenLastCalledWith('');
+      await expect(args.onClearClick).toHaveBeenCalledOnce();
+    });
+
+    await step('Type in the input', async () => {
+      await userEvent.type(textarea, 'Qore');
+      await expect(textarea).toHaveValue('Qore');
+      await expect(args.onChange).toHaveBeenLastCalledWith('Qore');
+
+      await userEvent.clear(textarea);
+      await userEvent.type(textarea, args.value, { delay: null });
+    });
+  },
+};

package/src/components/form/fields/long-string/LongString.tsx

@@ -0,0 +1,35 @@
+import { ReqoreTextarea } from '@qoretechnologies/reqore';
+import { IReqoreTextareaProps } from '@qoretechnologies/reqore/dist/components/Textarea';
+import { TFormFieldValueType } from '../../../../types/Form';
+
+export interface ILongStringFormFieldProps extends Omit<IReqoreTextareaProps, 'onChange'> {
+  onChange?: (
+    value?: TFormFieldValueType<'string'>,
+    event?: React.FormEvent<HTMLTextAreaElement>
+  ) => void;
+}
+
+export const LongStringFormField = ({
+  onChange,
+  onClearClick,
+  ...rest
+}: ILongStringFormFieldProps) => {
+  return (
+    <ReqoreTextarea
+      scaleWithContent
+      fluid
+      wrapperStyle={{
+        width: '100%',
+      }}
+      onClearClick={() => {
+        onClearClick?.();
+        onChange?.('');
+      }}
+      onChange={(event) => onChange(event.currentTarget.value, event)}
+      rows={4}
+      {...rest}
+    />
+  );
+};
+
+export default LongStringFormField;

package/src/components/form/fields/markdown/Markdown.stories.tsx

@@ -0,0 +1,47 @@
+import { StoryObj } from '@storybook/react';
+import { expect, fn, within } from '@storybook/test';
+import { useState } from 'react';
+
+import { markdown } from '../../../../../mock/fields';
+import { StoryMeta } from '../../../../types';
+import { MarkdownFormField } from './Markdown';
+
+const meta = {
+  component: MarkdownFormField,
+  title: 'Components/Form/Markdown',
+  args: {
+    onChange: fn(),
+    value: markdown,
+  },
+  render(args) {
+    const [value, setValue] = useState(args.value);
+    return (
+      <MarkdownFormField
+        {...args}
+        value={value}
+        onChange={(value) => {
+          args.onChange?.(value);
+          setValue(value);
+        }}
+      />
+    );
+  },
+} as StoryMeta<typeof MarkdownFormField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    'aria-label': 'MarkdownEditor',
+  },
+  async play({ canvasElement, args }) {
+    const canvas = within(canvasElement);
+    const editor = canvas.getByLabelText('MarkdownEditor');
+    const preview = canvas.getByLabelText('Preview');
+
+    await expect(editor).toBeInTheDocument();
+    await expect(preview).toBeInTheDocument();
+    await expect(editor).toHaveValue(args.value);
+  },
+};

package/src/components/form/fields/markdown/Markdown.tsx

@@ -0,0 +1,106 @@
+import { ReqoreColumn, ReqoreColumns, ReqoreMessage } from '@qoretechnologies/reqore';
+import { IReqoreMessageProps } from '@qoretechnologies/reqore/dist/components/Message';
+import { ComponentProps } from 'react';
+import ReactMarkdown from 'react-markdown';
+import styled from 'styled-components';
+import LongStringFormField, { ILongStringFormFieldProps } from '../long-string/LongString';
+
+export interface IMarkdownFormFieldProps extends ILongStringFormFieldProps {
+  markdownPreviewProps?: Partial<ComponentProps<typeof ReactMarkdown>>;
+}
+
+const StyledWrapper = styled(ReqoreColumns)<ComponentProps<typeof ReqoreColumns>>`
+  width: 100%;
+`;
+
+const StyledLongStringWrapper = styled(ReqoreColumn)`
+  .reqore-control-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+
+const StyledMarkdown = styled(ReactMarkdown)<ComponentProps<typeof ReactMarkdown>>`
+  p {
+    font-size: 14px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  h1,
+  h2,
+  p,
+  i,
+  a {
+    color: rgba(255, 255, 255, 0.84);
+  }
+
+  h1 {
+    text-align: left;
+  }
+
+  h2 {
+    font-weight: 700;
+    padding: 0;
+    text-align: left;
+    line-height: 34.5px;
+    letter-spacing: -0.45px;
+  }
+
+  p,
+  i,
+  a {
+    letter-spacing: -0.03px;
+    line-height: 1.58;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  blockquote {
+    font-style: italic;
+    letter-spacing: -0.36px;
+    line-height: 44.4px;
+    overflow-wrap: break-word;
+    color: rgba(255, 255, 255, 0.68);
+    padding: 0 0 0 50px;
+  }
+
+  code {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 2px;
+    padding: 34px 6px;
+  }
+`;
+
+const StyledPreviewColumn = styled(ReqoreColumn)`
+  width: 100%;
+`;
+
+const StyledPreviewWrapper = styled(ReqoreMessage)<IReqoreMessageProps>`
+  & div div {
+    justify-content: start;
+  }
+`;
+
+export const MarkdownFormField = ({ markdownPreviewProps, ...rest }: IMarkdownFormFieldProps) => {
+  return (
+    <StyledWrapper columnsGap='10px'>
+      <StyledLongStringWrapper flexFlow='column'>
+        <LongStringFormField {...rest} />
+      </StyledLongStringWrapper>
+      <StyledPreviewColumn>
+        <StyledPreviewWrapper size='small' aria-label='Preview' flat fluid>
+          <StyledMarkdown {...markdownPreviewProps}>{rest.value ?? ''}</StyledMarkdown>
+        </StyledPreviewWrapper>
+      </StyledPreviewColumn>
+    </StyledWrapper>
+  );
+};
+
+export default MarkdownFormField;

package/src/components/form/fields/number/Number.stories.tsx

@@ -0,0 +1,74 @@
+import { StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+import { useState } from 'react';
+import { StoryMeta } from '../../../../types';
+import { NumberFormField } from './Number';
+
+const meta = {
+  component: NumberFormField,
+  title: 'Components/Form/Number',
+  args: {
+    'aria-label': 'Number',
+    onChange: fn(),
+  },
+  render(args) {
+    const [value, setValue] = useState(args.value);
+
+    return (
+      <NumberFormField
+        {...args}
+        value={value}
+        onChange={(value) => {
+          args.onChange?.(value);
+          setValue(value);
+        }}
+      />
+    );
+  },
+} as StoryMeta<typeof NumberFormField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: 0,
+  },
+
+  async play({ args, canvasElement }) {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText('Number');
+
+    await expect(input).toBeInTheDocument();
+    await expect(input).toHaveValue(0);
+    await expect(input).toHaveAttribute('type', 'number');
+
+    await userEvent.type(input, '10');
+    await expect(input).toHaveValue(10);
+    await expect(args.onChange).toHaveBeenLastCalledWith(10);
+
+    await userEvent.click(input.nextElementSibling);
+    await expect(args.onChange).toHaveBeenLastCalledWith(undefined);
+
+    await userEvent.type(input, '10.5');
+    await expect(input).toHaveValue(10);
+    await expect(args.onChange).toHaveBeenLastCalledWith(10);
+  },
+};
+
+export const Float: Story = {
+  args: {
+    value: 0,
+    type: 'float',
+  },
+
+  async play({ args, canvasElement }) {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText('Number');
+
+    await userEvent.clear(input);
+    await userEvent.type(input, '10.9');
+    await expect(input).toHaveValue(10.9);
+    await expect(args.onChange).toHaveBeenLastCalledWith(10.9);
+  },
+};

package/src/components/form/fields/number/Number.tsx

@@ -0,0 +1,53 @@
+import { ReqoreInput } from '@qoretechnologies/reqore';
+import { IReqoreInputProps } from '@qoretechnologies/reqore/dist/components/Input';
+import { ChangeEvent, ChangeEventHandler } from 'react';
+
+export interface INumberFormFieldProps
+  extends Omit<IReqoreInputProps, 'value' | 'onChange' | 'type'> {
+  value?: number;
+  onChange?(value: number): void;
+  type?: 'int' | 'float';
+}
+
+export const NumberFormField = ({
+  onChange,
+  autoFocus,
+  type = 'int',
+  value,
+  ...rest
+}: INumberFormFieldProps) => {
+  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (
+    event: ChangeEvent<HTMLInputElement>
+  ): void => {
+    const value = type === 'int' ? parseInt(event.target.value) : parseFloat(event.target.value);
+    onChange?.(value ?? undefined);
+  };
+
+  const handleResetClick = (): void => {
+    onChange(undefined);
+  };
+
+  return (
+    <ReqoreInput
+      wrapperStyle={{
+        width: '100%',
+      }}
+      value={value ?? ''}
+      onChange={handleInputChange}
+      type='number'
+      onClearClick={handleResetClick}
+      focusRules={
+        autoFocus ?
+          {
+            type: 'auto',
+            viewportOnly: true,
+          }
+        : undefined
+      }
+      step={type === 'int' ? 1 : 0.1}
+      {...rest}
+    />
+  );
+};
+
+export default NumberFormField;

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

@@ -0,0 +1,79 @@
+import { StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+import { useState } from 'react';
+
+import { StoryMeta } from '../../../../types';
+import { RadioGroupFormField } from './RadioGroup';
+
+import java from './images/java-96x128.png';
+import python from './images/python-129x128.png';
+import qore from './images/qore-106x128.png';
+
+const meta = {
+  component: RadioGroupFormField,
+  title: 'Components/Form/Radio',
+  args: {
+    onChange: fn(),
+  },
+  render(args) {
+    const [value, setValue] = useState(args.value);
+    return (
+      <RadioGroupFormField
+        {...args}
+        value={value}
+        onChange={(value) => {
+          args.onChange(value);
+          setValue(value);
+        }}
+      />
+    );
+  },
+} as StoryMeta<typeof RadioGroupFormField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: 'Qore',
+    items: [
+      { label: 'Qore', value: 'Qore', 'aria-label': 'Qore' },
+      { label: 'Java', value: 'Java', 'aria-label': 'Java' },
+      { label: 'Python', value: 'Python', 'aria-label': 'Python' },
+    ],
+  },
+  async play({ canvasElement, args }) {
+    const canvas = within(canvasElement);
+    const java = canvas.getByLabelText('Java');
+    await userEvent.click(java);
+    await expect(args.onChange).toHaveBeenLastCalledWith('Java');
+  },
+};
+
+export const WithImages: Story = {
+  args: {
+    value: 'Qore',
+    items: [
+      { label: 'Qore', value: 'Qore', image: qore },
+      { label: 'Java', value: 'Java', image: java },
+      { label: 'Python', value: 'Python', image: python },
+    ],
+  },
+  async play({ canvasElement }) {
+    await expect(canvasElement.querySelector(`img[src="${qore}"]`)).toBeInTheDocument();
+    await expect(canvasElement.querySelector(`img[src="${java}"]`)).toBeInTheDocument();
+    await expect(canvasElement.querySelector(`img[src="${python}"]`)).toBeInTheDocument();
+  },
+};
+
+export const Disabled: Story = {
+  args: { ...Default.args, disabled: true },
+  async play({ canvasElement, args }) {
+    const canvas = within(canvasElement);
+    const java = canvas.getByLabelText('Java');
+
+    // expect rejection caused by clicking an element with pointer-events:none
+    await expect(() => userEvent.click(java)).rejects.toBeTruthy();
+    await expect(args.onChange).not.toHaveBeenCalled();
+  },
+};