@dxtmisha/wiki 0.57.3 → 0.57.6

package/src/media/functional/ui-figma/storage/storage.en.mdx

@@ -0,0 +1,53 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI Figma/# Data Storage'/>
+
+# Working with Storage
+
+Figma provides two main mechanisms for saving data: local user storage and shared document storage. The library offers typed wrappers for both methods, providing convenient access and synchronization.
+
+## Backend (Backend / plugin/code.ts)
+
+On the plugin code side, it is necessary to initialize message listeners to synchronize data with the interface.
+
+### Initialization
+```typescript
+import { setupStorage, setupClientStorage } from '@dxtmisha/figma-code'
+
+// Activate listeners for both storage types
+setupStorage()
+setupClientStorage()
+```
+
+### Direct Usage
+You can work with storage data directly in the backend code:
+
+```typescript
+import { FigmaStorage, FigmaClientStorage } from '@dxtmisha/figma-code'
+
+// Shared document storage
+const storage = FigmaStorage.getInstance<string>('project-theme')
+storage.set('dark')
+
+// Personal user storage
+const client = FigmaClientStorage.getInstance<boolean>('show-onboarding')
+await client.set(true)
+```
+
+## Interface (UI / Iframe)
+
+In the plugin interface, data is accessible through reactive hooks that automatically synchronize with the backend.
+
+### Reactive Usage (Vue)
+```typescript
+import { useFigmaStorage, useFigmaClientStorage } from '@dxtmisha/figma-ref'
+
+// Synchronization with the document
+const { item: theme } = useFigmaStorage('project-theme', 'light')
+
+// Synchronization with personal user settings
+const { item: isSeen } = useFigmaClientStorage('show-onboarding', false)
+
+// When .value changes, data is automatically sent to Figma
+theme.value = 'dark'
+```

package/src/media/functional/ui-figma/storage/storage.ru.mdx

@@ -0,0 +1,53 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI Figma/# Работа с хранилищем'/>
+
+# Работа с хранилищем
+
+Figma предоставляет два основных механизма сохранения данных: локальное хранилище пользователя и общее хранилище документа. Библиотека предлагает типизированные обертки для обоих методов, обеспечивая удобный доступ и синхронизацию.
+
+## Бэкенд (Backend / plugin/code.ts)
+
+На стороне кода плагина необходимо инициализировать слушатели сообщений для синхронизации данных с интерфейсом.
+
+### Инициализация
+```typescript
+import { setupStorage, setupClientStorage } from '@dxtmisha/figma-code'
+
+// Активация слушателей для обоих типов хранилищ
+setupStorage()
+setupClientStorage()
+```
+
+### Использование напрямую
+Вы можете работать с данными хранилища прямо в коде бэкенда:
+
+```typescript
+import { FigmaStorage, FigmaClientStorage } from '@dxtmisha/figma-code'
+
+// Общее хранилище документа
+const storage = FigmaStorage.getInstance<string>('project-theme')
+storage.set('dark')
+
+// Личное хранилище пользователя
+const client = FigmaClientStorage.getInstance<boolean>('show-onboarding')
+await client.set(true)
+```
+
+## Интерфейс (UI / Iframe)
+
+В интерфейсе плагина данные доступны через реактивные хуки, которые автоматически синхронизируются с бэкендом.
+
+### Реактивное использование (Vue)
+```typescript
+import { useFigmaStorage, useFigmaClientStorage } from '@dxtmisha/figma-ref'
+
+// Синхронизация с документом
+const { item: theme } = useFigmaStorage('project-theme', 'light')
+
+// Синхронизация с личными настройками пользователя
+const { item: isSeen } = useFigmaClientStorage('show-onboarding', false)
+
+// При изменении .value данные автоматически улетают в Figma
+theme.value = 'dark'
+```

package/src/media/functional/ui-figma/storage/storage.vi.mdx

@@ -0,0 +1,53 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI Figma/# Lưu trữ dữ liệu'/>
+
+# Làm việc với bộ nhớ (Storage)
+
+Figma cung cấp hai cơ chế chính để lưu dữ liệu: bộ nhớ người dùng cục bộ và bộ nhớ tài liệu dùng chung. Thư viện cung cấp các trình bao bọc (wrapper) được định kiểu cho cả hai phương pháp, giúp truy cập và đồng bộ hóa thuận tiện.
+
+## Backend (Backend / plugin/code.ts)
+
+Về phía mã của plugin, cần phải khởi tạo các trình lắng nghe tin nhắn để đồng bộ hóa dữ liệu với giao diện.
+
+### Khởi tạo
+```typescript
+import { setupStorage, setupClientStorage } from '@dxtmisha/figma-code'
+
+// Kích hoạt trình lắng nghe cho cả hai loại bộ nhớ
+setupStorage()
+setupClientStorage()
+```
+
+### Sử dụng trực tiếp
+Bạn có thể làm việc với dữ liệu bộ nhớ trực tiếp trong mã backend:
+
+```typescript
+import { FigmaStorage, FigmaClientStorage } from '@dxtmisha/figma-code'
+
+// Bộ nhớ tài liệu dùng chung
+const storage = FigmaStorage.getInstance<string>('project-theme')
+storage.set('dark')
+
+// Bộ nhớ người dùng cá nhân
+const client = FigmaClientStorage.getInstance<boolean>('show-onboarding')
+await client.set(true)
+```
+
+## Giao diện (UI / Iframe)
+
+Trong giao diện plugin, dữ liệu có thể truy cập được thông qua các hook phản hồi tự động đồng bộ hóa với backend.
+
+### Sử dụng phản hồi (Vue)
+```typescript
+import { useFigmaStorage, useFigmaClientStorage } from '@dxtmisha/figma-ref'
+
+// Đồng bộ hóa với tài liệu
+const { item: theme } = useFigmaStorage('project-theme', 'light')
+
+// Đồng bộ hóa với cài đặt cá nhân của người dùng
+const { item: isSeen } = useFigmaClientStorage('show-onboarding', false)
+
+// Khi .value thay đổi, dữ liệu sẽ tự động được gửi đến Figma
+theme.value = 'dark'
+```

package/src/media/functional/ui-figma/styles/styles.en.mdx

@@ -0,0 +1,57 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI Figma/# Working with Styles'/>
+
+# Working with Styles
+
+The system for retrieving extended style data enables the transfer of detailed information (CSS, JSON structures, text content) from the Figma canvas to the plugin's interface upon request.
+
+## Backend (Backend / plugin/code.ts)
+
+On the plugin code side, you need to initialize a handler that will respond to data requests from the UI.
+
+#### Initialization
+Call the `setupFrameStyles()` function once when the plugin starts:
+
+```typescript
+import { setupFrameStyles } from '@dxtmisha/figma-code'
+
+// Initialize the style request handler
+setupFrameStyles()
+```
+
+## Interface (UI / Iframe)
+
+Tools for sending style requests and reactively observing the results.
+
+#### Reactive Usage (Vue)
+The recommended way is through the `useFigmaFrameStyles` composable.
+
+```typescript
+import { useFigmaFrameStyles } from '@dxtmisha/figma-ref'
+
+const { 
+  styles, // Computed list of retrieved styles (ComputedRef)
+  send    // Method to send a request: send({ ids, children })
+} = useFigmaFrameStyles()
+
+// Example of requesting styles for specific nodes
+const fetchDetails = () => {
+  send({ ids: ['1:10', '1:25'], children: true })
+}
+```
+
+#### Direct Management (JavaScript)
+If you are not using Vue, you can use the base functions to send a request and subscribe to the response:
+
+```typescript
+import { sendFrameStyles, fetchFrameStyles } from '@dxtmisha/figma'
+
+// Request styles
+sendFrameStyles({ ids: '1:10', children: true })
+
+// Subscribe to receiving data
+fetchFrameStyles((data) => {
+  console.log('Received style data:', data)
+})
+```

package/src/media/functional/ui-figma/styles/styles.ru.mdx

@@ -0,0 +1,57 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI Figma/# Работа со стилями'/>
+
+# Работа со стилями
+
+Система получения расширенных данных о стилях обеспечивает передачу детальной информации (CSS, JSON-структуры, текстовое содержимое) от холста Figma в интерфейс плагина по запросу.
+
+## Бэкенд (Backend / plugin/code.ts)
+
+На стороне кода плагина необходимо инициализировать обработчик, который будет отвечать на запросы данных из UI.
+
+#### Инициализация
+Вызовите функцию `setupFrameStyles()` один раз при старте плагина:
+
+```typescript
+import { setupFrameStyles } from '@dxtmisha/figma-code'
+
+// Инициализация обработчика запросов стилей
+setupFrameStyles()
+```
+
+## Интерфейс (UI / Iframe)
+
+Инструменты для отправки запросов на получение стилей и реактивного наблюдения за результатом.
+
+#### Реактивное использование (Vue)
+Рекомендуемый способ работы через композитор `useFigmaFrameStyles`.
+
+```typescript
+import { useFigmaFrameStyles } from '@dxtmisha/figma-ref'
+
+const { 
+  styles, // Вычисляемый список полученных стилей (ComputedRef)
+  send    // Метод для отправки запроса: send({ ids, children })
+} = useFigmaFrameStyles()
+
+// Пример запроса стилей для конкретных нод
+const fetchDetails = () => {
+  send({ ids: ['1:10', '1:25'], children: true })
+}
+```
+
+#### Прямое управление (JavaScript)
+Если вы не используете Vue, можно использовать базовые функции для отправки запроса и подписки на ответ:
+
+```typescript
+import { sendFrameStyles, fetchFrameStyles } from '@dxtmisha/figma'
+
+// Запросить стили
+sendFrameStyles({ ids: '1:10', children: true })
+
+// Подписаться на получение данных
+fetchFrameStyles((data) => {
+  console.log('Получены данные о стилях:', data)
+})
+```

package/src/media/functional/ui-figma/styles/styles.vi.mdx

@@ -0,0 +1,57 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI Figma/# Làm việc với Style'/>
+
+# Làm việc với Style
+
+Hệ thống truy xuất dữ liệu style mở rộng cho phép chuyển các thông tin chi tiết (CSS, cấu trúc JSON, nội dung văn bản) từ canvas Figma đến giao diện của plugin theo yêu cầu.
+
+## Backend (Backend / plugin/code.ts)
+
+Ở phía mã plugin, bạn cần khởi tạo một trình xử lý để phản hồi các yêu cầu dữ liệu từ UI.
+
+#### Khởi tạo
+Gọi hàm `setupFrameStyles()` một lần khi plugin bắt đầu:
+
+```typescript
+import { setupFrameStyles } from '@dxtmisha/figma-code'
+
+// Khởi tạo trình xử lý yêu cầu style
+setupFrameStyles()
+```
+
+## Giao diện (UI / Iframe)
+
+Các công cụ để gửi yêu cầu lấy style và quan sát kết quả một cách phản ứng (reactive).
+
+#### Sử dụng Phản ứng (Vue)
+Cách được khuyến nghị là thông qua composable `useFigmaFrameStyles`.
+
+```typescript
+import { useFigmaFrameStyles } from '@dxtmisha/figma-ref'
+
+const { 
+  styles, // Danh sách các style đã lấy (ComputedRef)
+  send    // Phương thức gửi yêu cầu: send({ ids, children })
+} = useFigmaFrameStyles()
+
+// Ví dụ yêu cầu style cho các node cụ thể
+const fetchDetails = () => {
+  send({ ids: ['1:10', '1:25'], children: true })
+}
+```
+
+#### Quản lý Trực tiếp (JavaScript)
+Nếu bạn không sử dụng Vue, bạn có thể sử dụng các hàm cơ bản để gửi yêu cầu và đăng ký nhận phản hồi:
+
+```typescript
+import { sendFrameStyles, fetchFrameStyles } from '@dxtmisha/figma'
+
+// Yêu cầu style
+sendFrameStyles({ ids: '1:10', children: true })
+
+// Đăng ký nhận dữ liệu
+fetchFrameStyles((data) => {
+  console.log('Đã nhận dữ liệu style:', data)
+})
+```

package/src/library.ts

@@ -1,8 +0,0 @@
-// Classes
-export * from './classes/WikiStorybook'
-export * from './classes/WikiStorybookItem'
-export * from './classes/WikiStorybookProp'
-
-// Types
-export * from './types/storybookTypes'
-export * from './types/wikiTypes'