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

package/{dist → src}/styles.css

@@ -1,17 +1,23 @@
 .rolder-prompt-input-root {
-  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  background-color: light-dark(
+    var(--mantine-color-white),
+    var(--mantine-color-dark-6)
+  );
 
   &:focus-within {
+    outline: none;
     border-color: var(--mantine-primary-color-filled);
-    border-color: var(--mantine-primary-color-filled);
+  }
+  &:focus-within {
     outline: none;
+    border-color: var(--mantine-primary-color-filled);
   }
 }
 
 .rolder-prompt-input-textarea {
   border: 0;
-  border-radius: 8px;
   overflow: hidden;
+  border-radius: 8px;
 }
 
 .rolder-prompt-input-file-action-action {
@@ -23,7 +29,11 @@
 }
 
 .rolder-editor-root {
-  --editor-border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  --editor-border-color: light-dark(
+    var(--mantine-color-gray-3),
+    var(--mantine-color-dark-4)
+  );
+
   border: rem(1px) solid var(--editor-border-color);
   border-radius: var(--mantine-radius-md);
 }
@@ -39,14 +49,15 @@
 }
 
 .rolder-hover-paper-root {
-  transition: background-color .2s ease-in-out;
-
+  transition: background-color 0.2s ease-in-out;
   &:hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    background-color: light-dark(
+      var(--mantine-color-gray-0),
+      var(--mantine-color-dark-6)
+    );
+    transition: background-color 0.2s ease-in-out;
     cursor: pointer;
-    transition: background-color .2s ease-in-out;
   }
-
   &[data-disabled] {
     background-color: unset;
     cursor: default;
@@ -54,8 +65,8 @@
 }
 
 .rolder-router-link-root {
-  color: inherit;
   text-decoration: none;
+  color: inherit;
 }
 
 .rolder-scroll-area-viewport {
@@ -71,4 +82,3 @@
   border-top-right-radius: var(--radius);
   border-bottom-right-radius: var(--radius);
 }
-

package/src/surreal/connection.ts

@@ -0,0 +1,72 @@
+import { createServerOnlyFn } from '@tanstack/react-start';
+import { getCookie } from '@tanstack/react-start/server';
+import { type CodecOptions, DateTime, Surreal } from 'surrealdb';
+
+let db: Surreal | null = null;
+
+export const getDB = createServerOnlyFn(
+  async (
+    params:
+      | {
+          url?: string;
+          namespace?: string;
+          database?: string;
+          username?: string;
+          password?: string;
+          codecOptions?: CodecOptions;
+        }
+      | undefined = {},
+  ): Promise<Surreal> => {
+    if (db?.isConnected) return db;
+
+    // Нужно чтобы был в корне для получения контекста запроса серверной функции
+    const locale = getCookie('locale') || 'ru-RU';
+    const timeZone = getCookie('tz') || 'UTC';
+
+    const instance = new Surreal({
+      codecOptions: params.codecOptions || {
+        valueDecodeVisitor(value) {
+          if (value instanceof DateTime) {
+            return new Date(value.toDate()).toLocaleDateString(locale, {
+              hour: 'numeric',
+              minute: 'numeric',
+              timeZone,
+            });
+          }
+          return value;
+        },
+      },
+    });
+
+    try {
+      const url = params.url || process.env.SURREALDB_URL;
+      if (!url) throw new Error('Missing required SurrealDB URL');
+
+      const namespace = params.namespace || process.env.SURREALDB_NAMESPACE;
+      if (!namespace) throw new Error('Missing required SurrealDB namespace');
+
+      const database = params.database || process.env.SURREALDB_DATABASE;
+      if (!database) throw new Error('Missing required SurrealDB database');
+
+      const username = params.username || process.env.SURREALDB_USERNAME;
+      const password = params.password || process.env.SURREALDB_PASSWORD;
+
+      if (username && password)
+        await instance.connect(url, { authentication: { username, password } });
+      else await instance.connect(url);
+
+      await instance.use({
+        namespace,
+        database,
+      });
+
+      db = instance;
+
+      return instance;
+    } catch (error) {
+      console.error('Failed to connect to SurrealDB:', error);
+      db = null;
+      throw error;
+    }
+  },
+);

package/src/surreal/deafaultCrud.ts

@@ -0,0 +1,25 @@
+import { createServerFn } from '@tanstack/react-start';
+import type { Uuid } from 'surrealdb';
+import { getDB } from './connection';
+import { deserialize } from './deserialize';
+
+export const surrealDeleteFn = createServerFn({ method: 'POST' })
+  .inputValidator((data: string) => data)
+  .handler(async ({ data }) => {
+    const db = await getDB();
+
+    const id = deserialize(data);
+    await db.delete(id);
+  });
+
+export const surrealUnsubscribeFn = createServerFn({
+  method: 'POST',
+})
+  .inputValidator((data: string) => data)
+  .handler(async ({ data }) => {
+    const db = await getDB();
+
+    const live = await db.liveOf(data as unknown as Uuid);
+
+    await live.kill();
+  });

package/src/surreal/deserialize.ts

@@ -0,0 +1,144 @@
+import { RecordId } from 'surrealdb';
+
+/**
+ * Type that converts specified string paths to RecordId, others stay as their original types
+ */
+type DeserializeResult<T, IdPaths extends string = never> = T extends string
+  ? RecordId<string> // Plain strings always become RecordId when no paths or when it's root level
+  : T extends (infer U)[]
+    ? U extends object
+      ? {
+          [K in keyof U]: K extends IdPaths ? RecordId<string> : U[K];
+        }[]
+      : DeserializeResult<U, IdPaths>[]
+    : T extends object
+      ? T extends Date
+        ? T
+        : {
+            [K in keyof T]: K extends IdPaths ? RecordId<string> : T[K]; // Keep original types for non-ID fields
+          }
+      : T;
+
+/**
+ * Extract table name from "table:id" format string
+ */
+const extractTableName = (str: string): string | null => {
+  const match = str.match(/^([^:]+):/);
+  return match ? match[1] : null;
+};
+
+/**
+ * Check if string is in "table:id" format
+ */
+const isRecordIdFormat = (str: string): boolean => {
+  return /^[^:]+:.+$/.test(str);
+};
+
+/**
+ * Deserializes DTO back to SurrealDB Record recursively based on specified ID paths
+ */
+// Overload for arrays with ID paths
+export function deserialize<T, K extends keyof T & string>(
+  dto: T[],
+  idPaths: K[],
+): DeserializeResult<T, K>[];
+// Overload for single objects with ID paths
+export function deserialize<T, K extends keyof T & string>(
+  dto: T,
+  idPaths: K[],
+): DeserializeResult<T, K>;
+// Overload for arrays without ID paths (treats all strings as potential IDs)
+export function deserialize<T>(dto: T[]): DeserializeResult<T>[];
+// Overload for single objects without ID paths (treats all strings as potential IDs)
+export function deserialize<T>(dto: T): DeserializeResult<T>;
+
+// Implementation
+export function deserialize<T, K extends keyof T & string = never>(
+  dto: T | T[],
+  idPaths?: K[],
+): DeserializeResult<T, K> | DeserializeResult<T, K>[] {
+  if (Array.isArray(dto)) {
+    return dto.map((item) =>
+      convertStringsToRecordIds(item, idPaths || []),
+    ) as DeserializeResult<T, K>[];
+  }
+
+  return convertStringsToRecordIds(dto, idPaths || []) as DeserializeResult<
+    T,
+    K
+  >;
+}
+
+/**
+ * Recursively converts string IDs back to RecordId instances based on specified paths
+ */
+const convertStringsToRecordIds = (
+  obj: unknown,
+  idPaths: string[],
+  currentPath = '',
+): unknown => {
+  if (obj === null || obj === undefined) {
+    return obj;
+  }
+
+  // If it's an array, check if the current path matches any idPath
+  if (Array.isArray(obj)) {
+    // If this array's path is in idPaths, convert all string elements to RecordIds
+    if (idPaths.includes(currentPath)) {
+      return obj.map((item) => {
+        if (typeof item === 'string' && isRecordIdFormat(item)) {
+          const tableName = extractTableName(item);
+          if (tableName) {
+            return new RecordId(tableName, item.split(':')[1]);
+          }
+        }
+        return item;
+      });
+    }
+    // Otherwise, recursively process each element with indexed path
+    return obj.map((item, index) =>
+      convertStringsToRecordIds(item, idPaths, `${currentPath}[${index}]`),
+    );
+  }
+
+  // If it's an object, recursively process each property
+  if (typeof obj === 'object' && !(obj instanceof Date)) {
+    const result: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(obj)) {
+      const fieldPath = currentPath ? `${currentPath}.${key}` : key;
+
+      if (typeof value === 'string') {
+        // Only convert if this field path is explicitly in idPaths
+        const shouldConvert =
+          idPaths.includes(fieldPath) && isRecordIdFormat(value);
+
+        if (shouldConvert) {
+          const tableName = extractTableName(value);
+          if (tableName) {
+            result[key] = new RecordId(tableName, value.split(':')[1]);
+          } else {
+            result[key] = value;
+          }
+        } else {
+          result[key] = value;
+        }
+      } else {
+        result[key] = convertStringsToRecordIds(value, idPaths, fieldPath);
+      }
+    }
+    return result;
+  }
+
+  // For strings at root level (not in objects) - only convert if no idPaths specified
+  if (typeof obj === 'string') {
+    if (idPaths.length === 0 && isRecordIdFormat(obj)) {
+      const tableName = extractTableName(obj);
+      if (tableName) {
+        return new RecordId(tableName, obj.split(':')[1]);
+      }
+    }
+  }
+
+  // For primitive types, return as is
+  return obj;
+};

package/src/surreal/encryption.ts

@@ -0,0 +1,51 @@
+import { createCipheriv, createDecipheriv, randomBytes } from 'node:crypto';
+import { createServerOnlyFn } from '@tanstack/react-start';
+
+type EncryptionInstance = {
+  encrypt(text: string): string;
+  decrypt(encryptedText: string): string;
+};
+
+export const encryptionFn = createServerOnlyFn(
+  (secretHash: string): EncryptionInstance => {
+    class Encryption {
+      private key: Buffer;
+
+      constructor(secretHash: string) {
+        // Создаем 32-байтный ключ из 64-символьного hex хеша
+        this.key = Buffer.from(secretHash, 'hex');
+      }
+
+      // Функция для шифрования
+      encrypt(text: string): string {
+        const algorithm = 'aes-256-cbc';
+        const iv = randomBytes(16);
+
+        const cipher = createCipheriv(algorithm, this.key, iv);
+        let encrypted = cipher.update(text, 'utf8', 'hex');
+        encrypted += cipher.final('hex');
+
+        // Возвращаем IV + зашифрованные данные
+        return `${iv.toString('hex')}:${encrypted}`;
+      }
+
+      // Функция для дешифрования
+      decrypt(encryptedText: string): string {
+        const algorithm = 'aes-256-cbc';
+
+        // Разделяем IV и зашифрованные данные
+        const parts = encryptedText.split(':');
+        const iv = Buffer.from(parts[0], 'hex');
+        const encrypted = parts[1];
+
+        const decipher = createDecipheriv(algorithm, this.key, iv);
+        let decrypted = decipher.update(encrypted, 'hex', 'utf8');
+        decrypted += decipher.final('utf8');
+
+        return decrypted;
+      }
+    }
+
+    return new Encryption(secretHash);
+  },
+);

package/src/ui/AnimatedChevron.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react';
+
+interface Props extends SVGProps<SVGSVGElement> {
+  expanded?: boolean;
+}
+
+export const AnimatedChevron = ({ expanded, style, ...props }: Props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role="img"
+      aria-label="Chevron"
+      style={{
+        transition: 'transform 0.2s ease-in-out',
+        transform: expanded ? 'rotate(-180deg)' : 'rotate(0deg)',
+        ...style,
+      }}
+      {...props}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M6 9l6 6l6 -6" />
+    </svg>
+  );
+};

package/src/ui/JsonInput.tsx

@@ -0,0 +1,52 @@
+import { indentSelection } from '@codemirror/commands';
+import { json, jsonParseLinter } from '@codemirror/lang-json';
+import { linter } from '@codemirror/lint';
+import { type EditorView, keymap } from '@codemirror/view';
+import { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode';
+import CodeMirror, { type ReactCodeMirrorProps } from '@uiw/react-codemirror';
+import { getCookie } from '../functions/getCookie';
+
+const formatJson = (view: EditorView) => {
+  try {
+    const text = view.state.doc.toString();
+    const parsed = JSON.parse(text);
+    const formatted = JSON.stringify(parsed, null, 2);
+
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: view.state.doc.length,
+        insert: formatted,
+      },
+    });
+
+    return true;
+  } catch (_) {
+    // Если JSON невалидный, пробуем просто отступы
+    return indentSelection(view);
+  }
+};
+
+const extensions = [
+  json(),
+  linter(jsonParseLinter()),
+  keymap.of([
+    {
+      key: 'Mod-Shift-f',
+      run: formatJson,
+    },
+  ]),
+];
+
+export const JsonInput = (props: ReactCodeMirrorProps) => {
+  const colorScheme = getCookie('colorScheme');
+
+  return (
+    <CodeMirror
+      height="280px"
+      theme={colorScheme === 'light' ? vscodeLight : vscodeDark}
+      extensions={extensions}
+      {...props}
+    />
+  );
+};

package/src/ui/RouterLink.tsx

@@ -0,0 +1,78 @@
+import {
+  ActionIcon,
+  type ActionIconProps,
+  Anchor,
+  type AnchorProps,
+  Button,
+  type ButtonProps,
+  UnstyledButton,
+  type UnstyledButtonProps,
+} from '@mantine/core';
+import { createLink, type LinkComponent } from '@tanstack/react-router';
+import { forwardRef } from 'react';
+
+interface MantineAnchorProps extends Omit<AnchorProps, 'href'> {}
+interface MantineButtonProps extends Omit<ButtonProps, 'href'> {}
+interface MantineActionIconProps extends Omit<ActionIconProps, 'href'> {}
+interface MantineUnstyledButtonProps
+  extends Omit<UnstyledButtonProps, 'href'> {}
+
+// Базовый компонент Anchor
+const MantineLinkComponent = forwardRef<HTMLAnchorElement, MantineAnchorProps>(
+  ({ classNames, ...props }, ref) => {
+    return (
+      <Anchor
+        ref={ref}
+        classNames={{ root: 'rolder-router-link-root', ...classNames }}
+        c="inherit"
+        underline="never"
+        {...props}
+      />
+    );
+  },
+);
+
+// Компонент Button - передаем все пропсы кроме href
+const MantineButtonComponent = forwardRef<
+  HTMLButtonElement,
+  MantineButtonProps
+>((props, ref) => {
+  return <Button ref={ref} {...props} />;
+});
+
+// Компонент ActionIcon - передаем все пропсы кроме href
+const MantineActionIconComponent = forwardRef<
+  HTMLButtonElement,
+  MantineActionIconProps
+>((props, ref) => {
+  return <ActionIcon ref={ref} {...props} />;
+});
+
+// Компонент UnstyledButton - передаем все пропсы кроме href
+const MantineUnstyledButtonComponent = forwardRef<
+  HTMLButtonElement,
+  MantineUnstyledButtonProps
+>((props, ref) => {
+  return <UnstyledButton ref={ref} {...props} />;
+});
+
+// Создаем RouterLink для каждого компонента
+const RouterLinkBase: LinkComponent<typeof MantineLinkComponent> =
+  createLink(MantineLinkComponent);
+
+const RouterLinkButton: LinkComponent<typeof MantineButtonComponent> =
+  createLink(MantineButtonComponent);
+
+const RouterLinkActionIcon: LinkComponent<typeof MantineActionIconComponent> =
+  createLink(MantineActionIconComponent);
+
+const RouterLinkUnstyledButton: LinkComponent<
+  typeof MantineUnstyledButtonComponent
+> = createLink(MantineUnstyledButtonComponent);
+
+// Экспортируем с namespace pattern
+export const RouterLink = Object.assign(RouterLinkBase, {
+  Button: RouterLinkButton,
+  ActionIcon: RouterLinkActionIcon,
+  UnstyledButton: RouterLinkUnstyledButton,
+});

package/src/ui/editor/Content.tsx

@@ -0,0 +1,11 @@
+import { RichTextEditor } from '@mantine/tiptap';
+import { ScrollArea } from '../scrollArea';
+
+export const Content = ({ height }: { height: string }) => {
+  return (
+    <ScrollArea h={height} autoScroll radius="md">
+      <RichTextEditor.Content />
+      <ScrollArea.ScrollButton />
+    </ScrollArea>
+  );
+};

package/src/ui/editor/Provider.tsx

@@ -0,0 +1,96 @@
+import { getTaskListExtension, Link } from '@mantine/tiptap';
+import Highlight from '@tiptap/extension-highlight';
+import Placeholder from '@tiptap/extension-placeholder';
+import { TableKit } from '@tiptap/extension-table';
+import TaskItem from '@tiptap/extension-task-item';
+import TipTapTaskList from '@tiptap/extension-task-list';
+import TextAlign from '@tiptap/extension-text-align';
+import type { Editor } from '@tiptap/react';
+import { useEditor as useTipTapEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { createContext, useContext, useEffect, useState } from 'react';
+import type { EditorProps } from './types';
+
+interface EditorContext {
+  editor: Editor | null;
+  editable?: boolean;
+  setEditable: (value: boolean) => void;
+  disabledToolbar: boolean;
+  setDisabledToolbar: (value: boolean) => void;
+  focused: boolean;
+  setFocused: (value: boolean) => void;
+  editedByUser: boolean;
+  setEditedByUser: (value: boolean) => void;
+}
+
+const EditorContext = createContext<EditorContext | null>(null);
+
+export const Provider = ({
+  children,
+  initialContent,
+  initialEditable = true,
+  initialDisabledToolbar,
+  onChange,
+}: EditorProps) => {
+  const editor = useTipTapEditor({
+    shouldRerenderOnTransaction: false,
+    immediatelyRender: false,
+    extensions: [
+      StarterKit.configure({ link: false }),
+      Placeholder.configure({ placeholder: 'Документ пуст' }),
+      Link,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+      getTaskListExtension(TipTapTaskList),
+      TaskItem.configure({ nested: true }),
+      TableKit,
+    ],
+    content: initialContent,
+    onUpdate: ({ editor }) => {
+      onChange?.(editor.getHTML());
+    },
+    editable: initialEditable,
+  });
+
+  const [editable, setEditable] = useState(initialEditable);
+  const [disabledToolbar, setDisabledToolbar] = useState(
+    !!initialDisabledToolbar,
+  );
+
+  const [editedByUser, setEditedByUser] = useState(true);
+  const [focused, setFocused] = useState(false);
+
+  useEffect(() => {
+    editor?.on('focus', () => setFocused(true));
+    editor?.on('blur', () => setFocused(false));
+    editor?.on('update', ({ transaction }) => {
+      if (transaction.docChanged && focused) setEditedByUser(true);
+      if (transaction.docChanged && !focused) setEditedByUser(false);
+    });
+  }, [editor, focused]);
+
+  const value: EditorContext = {
+    editor,
+    editable,
+    setEditable,
+    disabledToolbar,
+    setDisabledToolbar,
+    editedByUser,
+    setEditedByUser,
+    focused,
+    setFocused,
+  };
+
+  return (
+    <EditorContext.Provider value={value}>{children}</EditorContext.Provider>
+  );
+};
+
+export const useEditor = () => {
+  const context = useContext(EditorContext);
+  if (!context) {
+    throw new Error('useEditor must be used within EditorProvider');
+  }
+
+  return context;
+};

package/src/ui/editor/Root.tsx

@@ -0,0 +1,25 @@
+import { RichTextEditor, type RichTextEditorProps } from '@mantine/tiptap';
+import { useEditor } from './Provider';
+
+export const Root = ({
+  children,
+  classNames,
+  ...props
+}: Omit<RichTextEditorProps, 'editor'>) => {
+  const { editor } = useEditor();
+
+  return (
+    <RichTextEditor
+      editor={editor}
+      classNames={{
+        root: 'rolder-editor-root',
+        content: 'rolder-editor-content',
+        toolbar: 'rolder-editor-toolbar',
+        ...classNames,
+      }}
+      {...props}
+    >
+      {children}
+    </RichTextEditor>
+  );
+};