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

package/src/ui/editor/Toolbar.tsx

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

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

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

package/src/ui/error/DefaultError.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,9 +0,0 @@
-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 };
-};