@rolder/kit 3.0.0-alpha.7 → 3.0.0-alpha.8

package/src/ui/editor/Toolbar.tsx

@@ -0,0 +1,92 @@
+import { Loader } from '@mantine/core';
+import { RichTextEditor } from '@mantine/tiptap';
+import type { ReactNode } from 'react';
+import { useEditor } from './Provider';
+
+export const Toolbar = ({
+  saving,
+  children,
+}: {
+  saving?: boolean;
+  children?: ReactNode;
+}) => {
+  const { editor, disabledToolbar } = useEditor();
+
+  return !disabledToolbar ? (
+    <RichTextEditor.Toolbar sticky>
+      <RichTextEditor.ControlsGroup>
+        <RichTextEditor.Bold disabled={!editor?.isEditable} />
+        <RichTextEditor.Italic disabled={!editor?.isEditable} />
+        <RichTextEditor.Underline disabled={!editor?.isEditable} />
+        <RichTextEditor.Strikethrough disabled={!editor?.isEditable} />
+        <RichTextEditor.ClearFormatting disabled={!editor?.isEditable} />
+        <RichTextEditor.Highlight disabled={!editor?.isEditable} />
+        <RichTextEditor.Code disabled={!editor?.isEditable} />
+      </RichTextEditor.ControlsGroup>
+
+      <RichTextEditor.ControlsGroup>
+        <RichTextEditor.H1 disabled={!editor?.isEditable} />
+        <RichTextEditor.H2 disabled={!editor?.isEditable} />
+        <RichTextEditor.H3 disabled={!editor?.isEditable} />
+        <RichTextEditor.H4 disabled={!editor?.isEditable} />
+      </RichTextEditor.ControlsGroup>
+
+      <RichTextEditor.ControlsGroup>
+        <RichTextEditor.Blockquote disabled={!editor?.isEditable} />
+        <RichTextEditor.Hr disabled={!editor?.isEditable} />
+        <RichTextEditor.BulletList disabled={!editor?.isEditable} />
+        <RichTextEditor.OrderedList disabled={!editor?.isEditable} />
+      </RichTextEditor.ControlsGroup>
+
+      <RichTextEditor.ControlsGroup>
+        <RichTextEditor.TaskList disabled={!editor?.isEditable} />
+        <RichTextEditor.TaskListLift disabled={!editor?.isEditable} />
+        <RichTextEditor.TaskListSink disabled={!editor?.isEditable} />
+      </RichTextEditor.ControlsGroup>
+
+      <RichTextEditor.ControlsGroup>
+        <RichTextEditor.Link disabled={!editor?.isEditable} />
+        <RichTextEditor.Unlink disabled={!editor?.isEditable} />
+      </RichTextEditor.ControlsGroup>
+
+      <RichTextEditor.ControlsGroup>
+        <RichTextEditor.AlignLeft disabled={!editor?.isEditable} />
+        <RichTextEditor.AlignCenter disabled={!editor?.isEditable} />
+        <RichTextEditor.AlignJustify disabled={!editor?.isEditable} />
+        <RichTextEditor.AlignRight disabled={!editor?.isEditable} />
+      </RichTextEditor.ControlsGroup>
+
+      <RichTextEditor.ControlsGroup>
+        <RichTextEditor.Undo disabled={!editor?.isEditable} />
+        <RichTextEditor.Redo disabled={!editor?.isEditable} />
+      </RichTextEditor.ControlsGroup>
+
+      <RichTextEditor.ControlsGroup ml="auto">
+        {children}
+
+        <RichTextEditor.Control ml="10px" style={{ cursor: 'default' }}>
+          {saving ? (
+            <Loader size={14} />
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              role="img"
+              aria-label="Saved"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M5 12l5 5l10 -10" />
+            </svg>
+          )}
+        </RichTextEditor.Control>
+      </RichTextEditor.ControlsGroup>
+    </RichTextEditor.Toolbar>
+  ) : null;
+};

package/src/ui/editor/index.ts

@@ -0,0 +1,13 @@
+import { Content } from './Content';
+import { Provider } from './Provider';
+import { Root } from './Root';
+import { Toolbar } from './Toolbar';
+
+export const Editor = {
+  Root,
+  Content,
+  Toolbar,
+  Provider,
+};
+
+export { useEditor } from './Provider';

package/src/ui/editor/types.ts

@@ -0,0 +1,7 @@
+export interface EditorProps {
+  children: React.ReactNode;
+  initialContent?: string;
+  initialEditable?: boolean;
+  initialDisabledToolbar?: boolean;
+  onChange?: (value: string) => void;
+}

package/src/ui/error/DefaultError.tsx

@@ -0,0 +1,60 @@
+import { Button, Group, Stack, Title } from '@mantine/core';
+import type { ErrorComponentProps } from '@tanstack/react-router';
+import { rootRouteId, useMatch, useRouter } from '@tanstack/react-router';
+import { RouterLink } from '../RouterLink';
+
+export const DefaultError = ({ error }: ErrorComponentProps) => {
+  const router = useRouter();
+  const isRoot = useMatch({
+    strict: false,
+    select: (state) => state.id === rootRouteId,
+  });
+
+  return (
+    <Stack align="center" justify="center" gap={0} ta="center" h="100vh">
+      <Title textWrap="balance" size={65}>
+        Произошла ошибка!
+      </Title>
+      {error.message && (
+        <Title
+          order={3}
+          ml={4}
+          textWrap="balance"
+          c="var(--mantine-color-error)"
+        >
+          {error.message}
+        </Title>
+      )}
+
+      <Group>
+        <Button
+          mt="xl"
+          size="lg"
+          variant="light"
+          onClick={() => {
+            router.invalidate();
+          }}
+        >
+          Попробовать еще раз
+        </Button>
+        {isRoot ? (
+          <RouterLink.Button to="/" mt="xl" size="lg" radius="md">
+            На главную
+          </RouterLink.Button>
+        ) : (
+          <Button
+            mt="xl"
+            radius="md"
+            size="lg"
+            onClick={(e) => {
+              e.preventDefault();
+              router.history.back();
+            }}
+          >
+            Назад
+          </Button>
+        )}
+      </Group>
+    </Stack>
+  );
+};

package/src/ui/error/DefaultNotFound.tsx

@@ -0,0 +1,19 @@
+import { Stack, Text, Title } from '@mantine/core';
+import { RouterLink } from '../RouterLink';
+
+export const DefaultNotFound = () => (
+  <Stack align="center" justify="center" gap={0} ta="center" h="100vh">
+    <Text c="dimmed" fw="bold">
+      404
+    </Text>
+    <Title textWrap="balance" size={65}>
+      Страница не найдена
+    </Title>
+    <Title order={3} ml={4} textWrap="balance" c="dimmed">
+      Извините, но здесь нет страницы. Возможно она перемещена.
+    </Title>
+    <RouterLink.Button to="/" mt="xl" size="lg" radius="md">
+      На главную
+    </RouterLink.Button>
+  </Stack>
+);

package/src/ui/error/Forbidden.tsx

@@ -0,0 +1,18 @@
+import { Stack, Title } from '@mantine/core';
+import { RouterLink } from '../RouterLink';
+
+export const Forbidden = () => (
+  <Stack align="center" justify="center" gap={0} ta="center" h="100vh">
+    <Title textWrap="balance" size={65}>
+      Доступ запрещен!
+    </Title>
+
+    <Title order={3} ml={4} textWrap="balance" c="var(--mantine-color-error)">
+      У вас нет доступа к этой странице
+    </Title>
+
+    <RouterLink.Button to="/" mt="xl" size="lg" radius="md">
+      На главную
+    </RouterLink.Button>
+  </Stack>
+);

package/src/ui/error/defaultErrorNotification.ts

@@ -0,0 +1,9 @@
+import { notifications } from '@mantine/notifications';
+
+export const defaultErrorNotification = (error: Error) =>
+  notifications.show({
+    title: 'Системная ошибка',
+    message: error.message,
+    color: 'red',
+    autoClose: false,
+  });

package/src/ui/form/blurOnError.ts

@@ -0,0 +1,21 @@
+import type { AnyFormApi } from '@tanstack/react-form';
+
+export const blurOnError = ({ formApi }: { formApi: AnyFormApi }) => {
+  const inputNames = Array.from(
+    new Set(
+      Object.keys(formApi.state.fieldMeta).filter(
+        (i) => formApi.state.fieldMeta[i]?.errors.length,
+      ),
+    ),
+  );
+
+  for (const inputName of inputNames) {
+    const input = document.querySelector(
+      `#form input[name="${inputName}"]`,
+    ) as HTMLInputElement | null;
+    if (input) {
+      input.focus();
+      break;
+    }
+  }
+};

package/src/ui/form/buttons/CancelButton.tsx

@@ -0,0 +1,42 @@
+import { Button, type ButtonProps } from '@mantine/core';
+import { useFormContext } from '../context';
+
+export const CancelButton = (
+  props: ButtonProps & { label?: string; onClick?: () => void },
+) => {
+  const form = useFormContext();
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => (
+        <Button
+          type="reset"
+          size="xs"
+          variant="light"
+          leftSection={
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              role="img"
+              aria-label="Cancel"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+              <path d="M18.364 5.636l-12.728 12.728" />
+            </svg>
+          }
+          disabled={isSubmitting}
+          {...props}
+        >
+          {props.label || 'Отмена'}
+        </Button>
+      )}
+    </form.Subscribe>
+  );
+};

package/src/ui/form/buttons/SubmitButton.tsx

@@ -0,0 +1,43 @@
+import { Button, type ButtonProps } from '@mantine/core';
+import { useFormContext } from '../context';
+
+export const SubmitButton = (
+  props: ButtonProps & { label?: string; onClick?: () => void },
+) => {
+  const form = useFormContext();
+  return (
+    <form.Subscribe selector={(state) => state}>
+      {(state) => (
+        <Button
+          type="submit"
+          size="xs"
+          leftSection={
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              role="img"
+              aria-label="Submit"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
+              <path d="M10 14a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+              <path d="M14 4l0 4l-6 0l0 -4" />
+            </svg>
+          }
+          loading={state.isSubmitting}
+          disabled={!state.isDirty}
+          {...props}
+        >
+          {props.label || 'Сохранить'}
+        </Button>
+      )}
+    </form.Subscribe>
+  );
+};

package/src/ui/form/buttons/SubscribeActionIcon.tsx

@@ -0,0 +1,18 @@
+import { ActionIcon, type ActionIconProps } from '@mantine/core';
+import { useFormContext } from '../context';
+
+export const SubscribeActionIcon = (
+  props: ActionIconProps & { onClick?: () => void },
+) => {
+  const form = useFormContext();
+
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => (
+        <ActionIcon disabled={isSubmitting} {...props}>
+          {props.children}
+        </ActionIcon>
+      )}
+    </form.Subscribe>
+  );
+};

package/src/ui/form/buttons/SubscribeButton.tsx

@@ -0,0 +1,17 @@
+import { Button, type ButtonProps } from '@mantine/core';
+import { useFormContext } from '../context';
+
+export const SubscribeButton = (
+  props: ButtonProps & { label: string; onClick?: () => void },
+) => {
+  const form = useFormContext();
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => (
+        <Button type="button" disabled={isSubmitting} {...props}>
+          {props.label}
+        </Button>
+      )}
+    </form.Subscribe>
+  );
+};

package/src/ui/form/context.ts

@@ -0,0 +1,45 @@
+import { createFormHook, createFormHookContexts } from '@tanstack/react-form';
+import {
+  CancelButton,
+  SubmitButton,
+  SubscribeActionIcon,
+  SubscribeButton,
+} from './buttons';
+import {
+  JsonField,
+  MultiSelectField,
+  NumberField,
+  PassowrdField,
+  SelectField,
+  SwitchField,
+  TextareaField,
+  TextField,
+  TextPassowrdField,
+} from './fields';
+
+const { fieldContext, useFieldContext, formContext, useFormContext } =
+  createFormHookContexts();
+
+const { useAppForm, withForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+    NumberField,
+    TextareaField,
+    TextPassowrdField,
+    PassowrdField,
+    SelectField,
+    MultiSelectField,
+    SwitchField,
+    JsonField,
+  },
+  formComponents: {
+    SubmitButton,
+    CancelButton,
+    SubscribeButton,
+    SubscribeActionIcon,
+  },
+  fieldContext,
+  formContext,
+});
+
+export { useAppForm, useFieldContext, useFormContext, withForm };

package/src/ui/form/fields/JsonField.tsx

@@ -0,0 +1,16 @@
+import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+import { JsonInput } from '../../JsonInput';
+import { useFieldContext } from '../context';
+
+export const JsonField = (props: ReactCodeMirrorProps) => {
+  const field = useFieldContext<string>();
+
+  return (
+    <JsonInput
+      value={field.state.value || ''}
+      onChange={field.handleChange}
+      onBlur={field.handleBlur}
+      {...props}
+    />
+  );
+};

package/src/ui/form/fields/MultiSelectField.tsx

@@ -0,0 +1,17 @@
+import { MultiSelect, type MultiSelectProps } from '@mantine/core';
+import { useFieldContext } from '../context';
+
+export const MultiSelectField = (props: MultiSelectProps) => {
+  const field = useFieldContext<string[]>();
+
+  return (
+    <MultiSelect
+      name={field.name}
+      value={field.state.value || []}
+      onChange={field.handleChange}
+      onBlur={field.handleBlur}
+      error={field.state.meta.errors.map((error) => error.message).join(', ')}
+      {...props}
+    />
+  );
+};

package/src/ui/form/fields/NumberField.tsx

@@ -0,0 +1,17 @@
+import { NumberInput, type NumberInputProps } from '@mantine/core';
+import { useFieldContext } from '../context';
+
+export const NumberField = (props: NumberInputProps) => {
+  const field = useFieldContext<string | number>();
+
+  return (
+    <NumberInput
+      name={field.name}
+      value={field.state.value || ''}
+      onChange={(v) => field.handleChange(v)}
+      onBlur={field.handleBlur}
+      error={field.state.meta.errors.map((error) => error.message).join(', ')}
+      {...props}
+    />
+  );
+};

package/src/ui/form/fields/PassowrdField.tsx

@@ -0,0 +1,20 @@
+import { PasswordInput, type PasswordInputProps } from '@mantine/core';
+import { useFieldContext } from '../context';
+
+export const PassowrdField = (props: PasswordInputProps) => {
+  const field = useFieldContext<string>();
+
+  return (
+    <PasswordInput
+      size="lg"
+      label="Пароль"
+      placeholder="Введите пароль"
+      name={field.name}
+      value={field.state.value || ''}
+      onChange={(e) => field.handleChange(e.target.value)}
+      onBlur={field.handleBlur}
+      error={field.state.meta.errors.map((error) => error.message).join(', ')}
+      {...props}
+    />
+  );
+};

package/src/ui/form/fields/SelectField.tsx

@@ -0,0 +1,17 @@
+import { Select, type SelectProps } from '@mantine/core';
+import { useFieldContext } from '../context';
+
+export const SelectField = (props: SelectProps) => {
+  const field = useFieldContext<string | null>();
+
+  return (
+    <Select
+      name={field.name}
+      value={field.state.value}
+      onChange={field.handleChange}
+      onBlur={field.handleBlur}
+      error={field.state.meta.errors.map((error) => error.message).join(', ')}
+      {...props}
+    />
+  );
+};

package/src/ui/form/fields/SwitchField.tsx

@@ -0,0 +1,17 @@
+import { Switch, type SwitchProps } from '@mantine/core';
+import { useFieldContext } from '../context';
+
+export const SwitchField = (props: SwitchProps) => {
+  const field = useFieldContext<boolean>();
+
+  return (
+    <Switch
+      name={field.name}
+      checked={field.state.value}
+      onChange={(e) => field.handleChange(e.currentTarget.checked)}
+      error={field.state.meta.errors.map((error) => error.message).join(', ')}
+      w="fit-content"
+      {...props}
+    />
+  );
+};

package/src/ui/form/fields/TextField.tsx

@@ -0,0 +1,17 @@
+import { TextInput, type TextInputProps } from '@mantine/core';
+import { useFieldContext } from '../context';
+
+export const TextField = (props: TextInputProps) => {
+  const field = useFieldContext<string>();
+
+  return (
+    <TextInput
+      name={field.name}
+      value={field.state.value || ''}
+      onChange={(e) => field.handleChange(e.target.value)}
+      onBlur={field.handleBlur}
+      error={field.state.meta.errors.map((error) => error.message).join(', ')}
+      {...props}
+    />
+  );
+};

package/src/ui/form/fields/TextPassowrdField.tsx

@@ -0,0 +1,51 @@
+import { ActionIcon, TextInput, type TextInputProps } from '@mantine/core';
+import generatePassword from 'omgopass';
+import { useFieldContext } from '../context';
+
+export const TextPassowrdField = (props: TextInputProps) => {
+  const field = useFieldContext<string>();
+
+  return (
+    <TextInput
+      label="Пароль"
+      placeholder="Введите пароль"
+      rightSection={
+        <ActionIcon
+          variant="light"
+          onClick={() =>
+            field.setValue(
+              generatePassword({
+                minSyllableLength: 2,
+                maxSyllableLength: 2,
+              }),
+            )
+          }
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            role="img"
+            aria-label="Refresh"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
+            <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
+          </svg>
+        </ActionIcon>
+      }
+      name={field.name}
+      value={field.state.value || ''}
+      onChange={(e) => field.handleChange(e.target.value)}
+      onBlur={field.handleBlur}
+      error={field.state.meta.errors.map((error) => error.message).join(', ')}
+      {...props}
+    />
+  );
+};

package/src/ui/form/fields/TextareaField.tsx

@@ -0,0 +1,17 @@
+import { Textarea, type TextareaProps } from '@mantine/core';
+import { useFieldContext } from '../context';
+
+export const TextareaField = (props: TextareaProps) => {
+  const field = useFieldContext<string>();
+
+  return (
+    <Textarea
+      name={field.name}
+      value={field.state.value || ''}
+      onChange={(e) => field.handleChange(e.target.value)}
+      onBlur={field.handleBlur}
+      error={field.state.meta.errors.map((error) => error.message).join(', ')}
+      {...props}
+    />
+  );
+};

package/src/ui/form/fieldsSchema.ts

@@ -0,0 +1,24 @@
+import z from 'zod/v4';
+
+export const fieldsSchema = {
+  id: z.string().min(1, 'ID не может быть пустым'),
+  str: z.string().min(1, 'Значение не может быть пустым'),
+  strArr: z.array(z.string().min(1, 'Значение не может быть пустым')),
+  strMin3: z.string().min(3, 'Должно содержать не менее 3 символов'),
+  select: z.string().min(1, 'Выберите значение'),
+  email: z.email('Неверный формат email'),
+  username: z
+    .string()
+    .min(3, 'Должен быть не менее 3 символов')
+    .max(24, 'Должен быть не более 24 символов'),
+  password: z
+    .string('Пароль не может быть пустым')
+    .min(8, 'Пароль должен содержать не менее 8 символов'),
+  kebab: z
+    .string()
+    .min(3, 'Минимум 3 символа')
+    .regex(
+      /^[a-z0-9]+(-[a-z0-9]+)*$/,
+      'Должен быть в формате kebab-case (только строчные буквы, цифры и дефисы)',
+    ),
+};

package/src/ui/hoverPaper/HoverPaper.tsx

@@ -0,0 +1,17 @@
+import { type ElementProps, Paper, type PaperProps } from '@mantine/core';
+import { forwardRef } from 'react';
+
+interface Props extends PaperProps, ElementProps<'div', keyof PaperProps> {
+  disabled?: boolean;
+}
+
+export const HoverPaper = forwardRef<HTMLDivElement, Props>(
+  ({ disabled, classNames, ...props }: Props, ref) => (
+    <Paper
+      ref={ref}
+      classNames={{ root: 'rolder-hover-paper-root', ...classNames }}
+      mod={{ disabled }}
+      {...props}
+    />
+  ),
+);

package/src/ui/hoverPaper/usePaperHover.ts

@@ -0,0 +1,9 @@
+import { useHover } from '@mantine/hooks';
+
+export const usePaperHover = (): {
+  paperHovered: boolean;
+  paperRef: (node: HTMLDivElement | null) => void;
+} => {
+  const { hovered: paperHovered, ref: paperRef } = useHover<HTMLDivElement>();
+  return { paperHovered, paperRef };
+};