{ "id": "mod_design_patterns_guide", "type": "module", "version": "1.0", "context": { "title": "Патерни дизайну", "icon": "🧩", "layout": "phone" }, "state": { "search": "", "searchLower": "", "focused": "", "favoriteIds": [], "showToast": false, "toastText": "", "patterns": [ { "id": "singleton", "name": "Singleton", "category": "Створювальні", "summary": "Гарантує один спільний екземпляр класу та єдину точку доступу до нього.", "intent": "Коли в застосунку має існувати лише один об'єкт: конфігурація, кеш, логер, менеджер сесії.", "when": "Підходить для глобальних сервісів, але тільки коли справді потрібен спільний стан.", "caution": "Часто ускладнює тести й приховує залежності. Якщо можна передати залежність явно — це зазвичай кращий варіант.", "exampleTitle": "Приклад", "example": "class Logger {\n private static instance: Logger\n\n private constructor() {}\n\n static getInstance(): Logger {\n if (!Logger.instance) {\n Logger.instance = new Logger()\n }\n return Logger.instance\n }\n\n log(message: string) {\n print(message)\n }\n}\n\nconst logger = Logger.getInstance()\nlogger.log('App started')", "searchIndex": "singleton single one instance logger cache config глобальний екземпляр логер кеш конфігурація" }, { "id": "factory_method", "name": "Factory Method", "category": "Створювальні", "summary": "Переносить створення об'єктів у спеціальний метод, щоб відокремити логіку створення від використання.", "intent": "Дає змогу повертати різні реалізації одного інтерфейсу без зміни коду клієнта.", "when": "Корисний, коли тип об'єкта залежить від параметрів, платформи або конфігурації.", "caution": "Не варто вводити фабрику, якщо один конструктор і так очевидний. Інакше отримаєте зайву абстракцію.", "exampleTitle": "Приклад", "example": "interface Notification {\n send(message: string): void\n}\n\nclass EmailNotification implements Notification {\n send(message: string) { print('Email: ' + message) }\n}\n\nclass SmsNotification implements Notification {\n send(message: string) { print('SMS: ' + message) }\n}\n\nfunction createNotification(kind: string): Notification {\n return kind == 'sms'\n ? new SmsNotification()\n : new EmailNotification()\n}\n\nconst service = createNotification('sms')\nservice.send('Code 1234')", "searchIndex": "factory method creator create notification email sms фабричний метод створення" }, { "id": "builder", "name": "Builder", "category": "Створювальні", "summary": "Покроково збирає складний об'єкт і дозволяє створювати різні конфігурації одним процесом.", "intent": "Зручний для об'єктів із багатьма необов'язковими полями або складною послідовністю налаштування.", "when": "Корисний для HTTP-запитів, UI-конфігурацій, складних DTO та тестових фікстур.", "caution": "Для маленьких простих об'єктів Builder лише збільшує кількість коду.", "exampleTitle": "Приклад", "example": "class RequestBuilder {\n private url = ''\n private method = 'GET'\n private headers = {}\n\n setUrl(value: string) {\n this.url = value\n return this\n }\n\n setMethod(value: string) {\n this.method = value\n return this\n }\n\n addHeader(key: string, value: string) {\n this.headers[key] = value\n return this\n }\n\n build() {\n return { url: this.url, method: this.method, headers: this.headers }\n }\n}\n\nconst request = new RequestBuilder()\n .setUrl('/users')\n .setMethod('POST')\n .addHeader('Authorization', 'Bearer token')\n .build()", "searchIndex": "builder request config step by step optional fields білдер побудова обєкта конфігурація" }, { "id": "adapter", "name": "Adapter", "category": "Структурні", "summary": "Обгортає несумісний API та приводить його до інтерфейсу, який очікує ваш код.", "intent": "Дає можливість використати наявний клас без переписування клієнтського коду.", "when": "Типовий випадок: стороння бібліотека, старий код, інша схема відповіді API.", "caution": "Не підміняє собою нормальний дизайн доменної моделі. Adapter має адаптувати, а не містити бізнес-логіку.", "exampleTitle": "Приклад", "example": "class LegacyAnalytics {\n trackEvent(name: string) {\n print('Tracked: ' + name)\n }\n}\n\ninterface Analytics {\n log(name: string): void\n}\n\nclass AnalyticsAdapter implements Analytics {\n constructor(private legacy: LegacyAnalytics) {}\n\n log(name: string) {\n this.legacy.trackEvent(name)\n }\n}\n\nconst analytics: Analytics = new AnalyticsAdapter(new LegacyAnalytics())\nanalytics.log('screen_open')", "searchIndex": "adapter legacy api wrapper compatibility адаптер сумісність обгортка старий код" }, { "id": "decorator", "name": "Decorator", "category": "Структурні", "summary": "Додає поведінку об'єкту динамічно, не змінюючи його клас.", "intent": "Дозволяє комбінувати можливості як обгортки: кешування, логування, авторизація, ретраї.", "when": "Працює краще за наслідування, коли поведінку треба міксувати в різних поєднаннях.", "caution": "Багато шарів декораторів ускладнюють відлагодження, якщо не дати їм чітких імен та відповідальностей.", "exampleTitle": "Приклад", "example": "interface DataSource {\n read(): string\n}\n\nclass FileDataSource implements DataSource {\n read() { return 'data from file' }\n}\n\nclass LoggingDecorator implements DataSource {\n constructor(private wrapped: DataSource) {}\n\n read() {\n print('Reading data...')\n return this.wrapped.read()\n }\n}\n\nconst source = new LoggingDecorator(new FileDataSource())\nprint(source.read())", "searchIndex": "decorator wrapper logging cache retry декоратор обгортка логування кешування" }, { "id": "strategy", "name": "Strategy", "category": "Поведінкові", "summary": "Інкапсулює набір взаємозамінних алгоритмів та дозволяє перемикати їх під час виконання.", "intent": "Прибирає великі if/else або switch із бізнес-логіки вибору поведінки.", "when": "Підходить для оплати, сортування, знижок, валідації, форматування або маршрутизації.", "caution": "Не треба робити окрему стратегію для двох рядків коду, які ніколи не зміняться.", "exampleTitle": "Приклад", "example": "interface DiscountStrategy {\n apply(total: number): number\n}\n\nclass NoDiscount implements DiscountStrategy {\n apply(total: number) { return total }\n}\n\nclass VipDiscount implements DiscountStrategy {\n apply(total: number) { return total * 0.9 }\n}\n\nclass CartService {\n constructor(private strategy: DiscountStrategy) {}\n\n checkout(total: number) {\n return this.strategy.apply(total)\n }\n}\n\nconst cart = new CartService(new VipDiscount())\nprint(cart.checkout(100))", "searchIndex": "strategy algorithm discount payment validation стратегія алгоритм знижка оплата" }, { "id": "observer", "name": "Observer", "category": "Поведінкові", "summary": "Створює механізм підписки: коли стан змінюється, усі підписники отримують повідомлення.", "intent": "Дозволяє роз'єднати джерело подій і реакцію на ці події.", "when": "Корисний для UI-оновлень, подій домену, пабліш/сабскрайб систем і реактивних потоків.", "caution": "Легко отримати важко відслідковувані побічні ефекти, якщо підписників занадто багато.", "exampleTitle": "Приклад", "example": "interface Subscriber {\n update(value: string): void\n}\n\nclass EmailSubscriber implements Subscriber {\n update(value: string) { print('Email: ' + value) }\n}\n\nclass Subject {\n private subscribers = []\n\n subscribe(subscriber: Subscriber) {\n this.subscribers.push(subscriber)\n }\n\n notify(value: string) {\n this.subscribers.forEach(s => s.update(value))\n }\n}\n\nconst subject = new Subject()\nsubject.subscribe(new EmailSubscriber())\nsubject.notify('Build finished')", "searchIndex": "observer publish subscribe event listener observable спостерігач подія підписка" }, { "id": "command", "name": "Command", "category": "Поведінкові", "summary": "Перетворює запит на окремий об'єкт, щоб його можна було відкласти, логувати, скасовувати або ставити в чергу.", "intent": "Відокремлює ініціатора дії від її фактичного виконання.", "when": "Підходить для undo/redo, черг задач, кнопок меню, макрокоманд та фонових операцій.", "caution": "Для простих прямих викликів інколи це зайвий рівень абстракції.", "exampleTitle": "Приклад", "example": "interface Command {\n execute(): void\n}\n\nclass SaveFileCommand implements Command {\n execute() {\n print('File saved')\n }\n}\n\nclass Button {\n constructor(private command: Command) {}\n\n tap() {\n this.command.execute()\n }\n}\n\nconst button = new Button(new SaveFileCommand())\nbutton.tap()", "searchIndex": "command undo redo queue action кнопка команда скасування черга дія" } ] }, "dependencies": [ { "repository": { "local": { "id": "patterns_guide_store_v1", "config": {} } } }, { "service": { "audio": { "id": "patterns_audio" } } } ], "children": [ { "id": "guide_nav", "type": "navigation", "children": [ { "id": "guide_root", "type": "vstack", "context": { "_spacing": 0 }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "common": { "background": { "gradient": { "linear": { "colors": [ { "light": "#F4F7FB", "dark": "#0B1220" }, { "light": "#EAF0F8", "dark": "#111A2E" } ], "startPoint": "top", "endPoint": "bottom" } } } }, "navigation": { "navigationTitle": "Довідник", "navigationBarTitleDisplayMode": "large" } }, "children": [ { "id": "guide_top_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "padding": { "top": 16, "bottom": 14, "leading": 16, "trailing": 16 } }, "common": { "background": { "material": "regular" }, "cornerRadius": 22 }, "shadow": { "color": { "color": "black", "opacity": 0.12 }, "radius": 10, "y": 6 } }, "children": [ { "id": "guide_intro_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "guide_intro_icon", "type": "image", "context": { "_source": "sf://books.vertical.fill" }, "style": { "layout": { "width": 24, "height": 24 }, "common": { "foreground": { "color": "#7C3AED" } } } }, { "id": "guide_intro_texts", "type": "vstack", "context": { "_spacing": 2, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "guide_intro_head", "type": "text", "context": { "_text": "Коротко, практично, з прикладами" }, "style": { "common": { "font": "headline", "foreground": { "light": "#0F172A", "dark": "#F8FAFC" } } } }, { "id": "guide_intro_sub", "type": "text", "context": { "_text": "Шукай патерн за назвою або задачею: кеш, адаптація API, стратегія знижок, події." }, "style": { "common": { "font": "caption", "foreground": { "light": "#475569", "dark": "#CBD5E1" } } } } ] } ] }, { "id": "guide_search_field", "type": "textfield", "context": { "_label": "Пошук патерну або задачі", "_text": "${search}", "_focused": "${focused}", "_keyboard": "default", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder", "submitLabel": "search" }, "common": { "foreground": { "light": "#0F172A", "dark": "#F8FAFC" } }, "layout": { "maxWidth": "infinity" } }, "events": { "onChange": { "observed": "search", "actions": [ { "state": { "id": "act_search_lower", "input": { "searchLower": "{{ lower(${search}) }}" } } } ] } } }, { "id": "guide_stats_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "guide_count_chip", "type": "label", "context": { "_title": "{{ empty(${searchLower}) ? cast(count(${patterns}), 'str') + ' патернів' : cast(count(${patterns[searchIndex ~ ${searchLower}]}), 'str') + ' результатів' }}", "_image": "sf://square.grid.2x2.fill" }, "style": { "common": { "font": "caption", "foreground": { "light": "#1E293B", "dark": "#E2E8F0" }, "background": { "light": "#E9EEF8", "dark": "#1E293B" }, "cornerRadius": 999 }, "layout": { "padding": { "top": 7, "bottom": 7, "leading": 10, "trailing": 10 } } } }, { "id": "guide_fav_chip", "type": "label", "context": { "_title": "{{ cast(count(${favoriteIds}), 'str') + ' в обраному' }}", "_image": "sf://star.fill" }, "style": { "common": { "font": "caption", "foreground": { "light": "#7C2D12", "dark": "#FDE68A" }, "background": { "light": "#FEF3C7", "dark": "#3F2A0A" }, "cornerRadius": 999 }, "layout": { "padding": { "top": 7, "bottom": 7, "leading": 10, "trailing": 10 } } } } ] } ] }, { "id": "guide_scroll", "type": "scroll", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "scroll": { "dismissesKeyboard": "interactively" } }, "children": [ { "id": "guide_content", "type": "vstack", "context": { "_spacing": 18, "_alignment": "leading" }, "style": { "layout": { "padding": { "top": 14, "bottom": 28, "leading": 16, "trailing": 16 }, "maxWidth": "infinity" } }, "children": [ { "id": "favorites_section_cond", "type": "conditional", "context": { "_condition": "{{ notEmpty(${favoriteIds}) && empty(${searchLower}) }}", "_trueComponent": { "id": "favorites_section", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "favorites_section_head", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "favorites_head_icon", "type": "image", "context": { "_source": "sf://star.circle.fill" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": { "color": "#F59E0B" } } } }, { "id": "favorites_head_text", "type": "text", "context": { "_text": "Обране" }, "style": { "common": { "font": "headline", "foreground": { "light": "#0F172A", "dark": "#F8FAFC" } } } } ] }, { "id": "favorites_list", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "favorites_dynamic", "type": "dynamic", "context": { "_data": "${patterns[${favoriteIds} ~ id]}" }, "prototype": { "id": "favorite_row", "type": "link", "destination": { "id": "favorite_detail_module", "type": "module", "state": { "favoriteIds": [], "showToast": false, "toastText": "" }, "children": [ { "id": "favorite_detail_scroll", "type": "scroll", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" } }, "children": [ { "id": "favorite_detail_body", "type": "vstack", "context": { "_spacing": 16, "_alignment": "leading", "patternName": "@{item.name}", "patternCategory": "@{item.category}", "patternSummary": "@{item.summary}", "patternIntent": "@{item.intent}", "patternWhen": "@{item.when}", "patternCaution": "@{item.caution}", "patternExample": "@{item.example}", "patternExampleTitle": "@{item.exampleTitle}" }, "style": { "layout": { "padding": { "top": 18, "bottom": 28, "leading": 16, "trailing": 16 }, "maxWidth": "infinity" } }, "children": [ { "id": "favorite_detail_hero", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#4F46E5", "#7C3AED" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 22 }, "shadow": { "color": { "color": "#312E81", "opacity": 0.28 }, "radius": 12, "y": 8 } }, "children": [ { "id": "favorite_detail_category", "type": "label", "context": { "_title": "@{patternCategory}", "_image": "sf://tag.fill" }, "style": { "common": { "font": "caption", "foreground": { "color": "white" }, "background": { "color": { "color": "white", "opacity": 0.16 } }, "cornerRadius": 999 }, "layout": { "padding": { "top": 6, "bottom": 6, "leading": 10, "trailing": 10 } } } }, { "id": "favorite_detail_name", "type": "text", "context": { "_text": "@{patternName}" }, "style": { "common": { "font": { "kind": "title2", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "favorite_detail_summary", "type": "text", "context": { "_text": "@{patternSummary}" }, "style": { "common": { "font": "body", "foreground": { "color": { "color": "white", "opacity": 0.9 } } }, "text": { "lineSpacing": 2 } } } ] }, { "id": "favorite_detail_intent_card", "type": "vstack", "context": { "_spacing": 8, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "#FFFFFF", "dark": "#172033" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.1 }, "radius": 8, "y": 4 } }, "children": [ { "id": "favorite_detail_intent_head", "type": "label", "context": { "_title": "Коли використовувати", "_image": "sf://lightbulb.fill" }, "style": { "common": { "font": "headline", "foreground": { "light": "#0F172A", "dark": "#F8FAFC" } } } }, { "id": "favorite_detail_intent_text", "type": "text", "context": { "_text": "@{patternIntent}" }, "style": { "common": { "font": "body", "foreground": { "light": "#334155", "dark": "#CBD5E1" } }, "text": { "lineSpacing": 2 } } } ] }, { "id": "favorite_detail_when_card", "type": "vstack", "context": { "_spacing": 8, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "#FFFFFF", "dark": "#172033" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.1 }, "radius": 8, "y": 4 } }, "children": [ { "id": "favorite_detail_when_head", "type": "label", "context": { "_title": "Де найчастіше стане у пригоді", "_image": "sf://hammer.fill" }, "style": { "common": { "font": "headline", "foreground": { "light": "#0F172A", "dark": "#F8FAFC" } } } }, { "id": "favorite_detail_when_text", "type": "text", "context": { "_text": "@{patternWhen}" }, "style": { "common": { "font": "body", "foreground": { "light": "#334155", "dark": "#CBD5E1" } }, "text": { "lineSpacing": 2 } } } ] }, { "id": "favorite_detail_caution_card", "type": "vstack", "context": { "_spacing": 8, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "#FFF7ED", "dark": "#2A1E12" }, "cornerRadius": 20 } }, "children": [ { "id": "favorite_detail_caution_head", "type": "label", "context": { "_title": "На що звернути увагу", "_image": "sf://exclamationmark.triangle.fill" }, "style": { "common": { "font": "headline", "foreground": { "light": "#9A3412", "dark": "#FDBA74" } } } }, { "id": "favorite_detail_caution_text", "type": "text", "context": { "_text": "@{patternCaution}" }, "style": { "common": { "font": "body", "foreground": { "light": "#7C2D12", "dark": "#FED7AA" } }, "text": { "lineSpacing": 2 } } } ] }, { "id": "favorite_detail_example_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "#0F172A", "dark": "#020617" }, "cornerRadius": 20, "foreground": { "color": "white" } }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 10, "y": 6 } }, "children": [ { "id": "favorite_detail_example_head", "type": "label", "context": { "_title": "@{patternExampleTitle}", "_image": "sf://chevron.left.forwardslash.chevron.right" }, "style": { "common": { "font": "headline", "foreground": { "color": "white" } } } }, { "id": "favorite_detail_example_text", "type": "text", "context": { "_text": "@{patternExample}" }, "style": { "common": { "font": { "kind": "system", "size": 14 }, "foreground": { "color": "white" } }, "text": { "lineSpacing": 2 } } } ] } ] } ] } ] }, "children": [ { "id": "favorite_row_card", "type": "vstack", "context": { "_spacing": 8, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 16 }, "common": { "background": { "light": "#FFFDF7", "dark": "#1E1A12" }, "cornerRadius": 18 }, "shadow": { "color": { "color": "black", "opacity": 0.08 }, "radius": 8, "y": 4 } }, "children": [ { "id": "favorite_row_top", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "favorite_row_name", "type": "text", "context": { "_text": "@{item.name}" }, "style": { "common": { "font": { "kind": "headline", "weight": "bold" }, "foreground": { "light": "#0F172A", "dark": "#F8FAFC" } } } }, { "id": "favorite_row_sp", "type": "spacer" }, { "id": "favorite_row_star", "type": "image", "context": { "_source": "sf://star.fill" }, "style": { "layout": { "width": 16, "height": 16 }, "common": { "foreground": { "color": "#F59E0B" } } } } ] }, { "id": "favorite_row_summary", "type": "text", "context": { "_text": "@{item.summary}" }, "style": { "common": { "font": "caption", "foreground": { "light": "#475569", "dark": "#CBD5E1" } }, "text": { "lineLimit": 2 } } } ] } ] } } ] } ] }, "_falseComponent": { "id": "favorites_empty", "type": "empty" } } }, { "id": "all_section", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "all_section_head", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "all_head_icon", "type": "image", "context": { "_source": "sf://list.bullet.rectangle.portrait.fill" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": { "color": "#2563EB" } } } }, { "id": "all_head_text", "type": "text", "context": { "_text": "{{ empty(${searchLower}) ? 'Усі патерни' : 'Результати пошуку' }}" }, "style": { "common": { "font": "headline", "foreground": { "light": "#0F172A", "dark": "#F8FAFC" } } } } ] }, { "id": "all_empty_cond", "type": "conditional", "context": { "_condition": "{{ empty(${patterns[searchIndex ~ ${searchLower}]}) && notEmpty(${searchLower}) }}", "_trueComponent": { "id": "search_empty_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 20 }, "common": { "background": { "light": "#FFFFFF", "dark": "#172033" }, "cornerRadius": 20 } }, "children": [ { "id": "search_empty_icon", "type": "image", "context": { "_source": "sf://magnifyingglass" }, "style": { "layout": { "width": 28, "height": 28 }, "common": { "foreground": { "light": "#94A3B8", "dark": "#94A3B8" } } } }, { "id": "search_empty_text", "type": "text", "context": { "_text": "Нічого не знайдено. Спробуй англійську назву патерна або ключове слово: cache, event, api, discount." }, "style": { "common": { "font": "body", "foreground": { "light": "#475569", "dark": "#CBD5E1" } }, "text": { "multilineTextAlignment": "center" } } } ] }, "_falseComponent": { "id": "all_rows", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "patterns_dynamic", "type": "dynamic", "context": { "_data": "{{ empty(${searchLower}) ? ${patterns} : ${patterns[searchIndex ~ ${searchLower}]} }}" }, "prototype": { "id": "pattern_row_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "#FFFFFF", "dark": "#172033" }, "cornerRadius": 22 }, "shadow": { "color": { "color": "black", "opacity": 0.1 }, "radius": 10, "y": 5 }, "animation": { "kind": "spring", "value": "{{ ${favoriteIds} ~ @{item.id} }}", "duration": 0.3, "bounce": 0.28 } }, "children": [ { "id": "pattern_row_head", "type": "hstack", "context": { "_spacing": 10, "_alignment": "top" }, "children": [ { "id": "pattern_row_texts", "type": "vstack", "context": { "_spacing": 6, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "pattern_row_name", "type": "text", "context": { "_text": "@{item.name}" }, "style": { "common": { "font": { "kind": "title3", "weight": "bold" }, "foreground": { "light": "#0F172A", "dark": "#F8FAFC" } } } }, { "id": "pattern_row_summary", "type": "text", "context": { "_text": "@{item.summary}" }, "style": { "common": { "font": "body", "foreground": { "light": "#475569", "dark": "#CBD5E1" } }, "text": { "lineSpacing": 2 } } } ] }, { "id": "pattern_fav_button", "type": "button", "style": { "button": { "custom": { "layout": { "width": 44, "height": 44 }, "common": { "background": "{{ ${favoriteIds} ~ @{item.id} ? { 'light': '#FEF3C7', 'dark': '#3F2A0A' } : { 'light': '#EFF4FB', 'dark': '#22304A' } }}", "cornerRadius": 22 } } } }, "children": [ { "id": "pattern_fav_icon", "type": "image", "context": { "_source": "{{ ${favoriteIds} ~ @{item.id} ? 'sf://star.fill' : 'sf://star' }}" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": "{{ ${favoriteIds} ~ @{item.id} ? { 'color': '#F59E0B' } : { 'light': '#64748B', 'dark': '#CBD5E1' } }}" } } } ], "events": { "onTap": [ { "state": { "id": "act_toggle_favorite", "input": { "favoriteIds": "{{ ${favoriteIds} ~ @{item.id} ? ${favoriteIds} - @{item.id} : ${favoriteIds} + @{item.id} }}", "toastText": "{{ ${favoriteIds} ~ @{item.id} ? 'Прибрано з обраного' : 'Додано в обране' }}", "showToast": true }, "output": { "success": [ { "repo": { "id": "act_save_favorites", "input": { "repositoryId": "patterns_guide_store_v1", "operation": "create", "params": { "collection": "prefs", "documentId": "favorites", "rewrite": true, "body": { "favoriteIds": "${favoriteIds}" } } }, "output": { "failure": [ { "state": { "id": "act_save_favorites_failed", "input": { "toastText": "{{ 'Не вдалося зберегти обране' + (notEmpty(@{act_save_favorites.message}) ? ': ' + @{act_save_favorites.message} : '. Спробуй ще раз.') }}", "showToast": true } } } ] } } }, { "service": { "id": "act_favorite_haptic", "input": { "serviceId": "patterns_audio", "params": { "sound": "keyPress", "haptic": "light" } } } }, { "interval": { "id": "toast_hide_timer", "input": { "delay": 2.0 }, "output": { "success": [ { "interval": { "id": "toast_hide_timer", "input": { "cancel": true } } }, { "state": { "id": "act_hide_toast", "input": { "showToast": false } } } ] } } } ] } } } ] } } ] }, { "id": "pattern_row_meta", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "pattern_row_category", "type": "label", "context": { "_title": "@{item.category}", "_image": "sf://tag.fill" }, "style": { "common": { "font": "caption", "foreground": { "light": "#1D4ED8", "dark": "#BFDBFE" }, "background": { "light": "#DBEAFE", "dark": "#1E3A8A" }, "cornerRadius": 999 }, "layout": { "padding": { "top": 6, "bottom": 6, "leading": 10, "trailing": 10 } } } }, { "id": "pattern_row_use", "type": "text", "context": { "_text": "@{item.intent}" }, "style": { "common": { "font": "caption", "foreground": { "light": "#64748B", "dark": "#94A3B8" } }, "text": { "lineLimit": 2 } } } ] }, { "id": "pattern_row_footer", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "pattern_row_example_hint", "type": "label", "context": { "_title": "Є код-приклад", "_image": "sf://chevron.left.forwardslash.chevron.right" }, "style": { "common": { "font": "caption", "foreground": { "light": "#475569", "dark": "#CBD5E1" } } } }, { "id": "pattern_row_spacer", "type": "spacer" }, { "id": "pattern_detail_link", "type": "link", "destination": { "id": "pattern_detail_module", "type": "module", "state": { "favoriteIds": [], "showToast": false, "toastText": "" }, "children": [ { "id": "pattern_detail_scroll", "type": "scroll", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" } }, "children": [ { "id": "pattern_detail_body", "type": "vstack", "context": { "_spacing": 16, "_alignment": "leading", "patternName": "@{item.name}", "patternCategory": "@{item.category}", "patternSummary": "@{item.summary}", "patternIntent": "@{item.intent}", "patternWhen": "@{item.when}", "patternCaution": "@{item.caution}", "patternExample": "@{item.example}", "patternExampleTitle": "@{item.exampleTitle}" }, "style": { "layout": { "padding": { "top": 18, "bottom": 28, "leading": 16, "trailing": 16 }, "maxWidth": "infinity" } }, "children": [ { "id": "pattern_detail_hero", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#0F766E", "#0EA5E9" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 22 }, "shadow": { "color": { "color": "#164E63", "opacity": 0.24 }, "radius": 12, "y": 8 } }, "children": [ { "id": "pattern_detail_category", "type": "label", "context": { "_title": "@{patternCategory}", "_image": "sf://tag.fill" }, "style": { "common": { "font": "caption", "foreground": { "color": "white" }, "background": { "color": { "color": "white", "opacity": 0.16 } }, "cornerRadius": 999 }, "layout": { "padding": { "top": 6, "bottom": 6, "leading": 10, "trailing": 10 } } } }, { "id": "pattern_detail_name", "type": "text", "context": { "_text": "@{patternName}" }, "style": { "common": { "font": { "kind": "title2", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "pattern_detail_summary", "type": "text", "context": { "_text": "@{patternSummary}" }, "style": { "common": { "font": "body", "foreground": { "color": { "color": "white", "opacity": 0.92 } } }, "text": { "lineSpacing": 2 } } } ] }, { "id": "pattern_detail_intent_card", "type": "vstack", "context": { "_spacing": 8, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "#FFFFFF", "dark": "#172033" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.1 }, "radius": 8, "y": 4 } }, "children": [ { "id": "pattern_detail_intent_head", "type": "label", "context": { "_title": "Ідея патерна", "_image": "sf://sparkles" }, "style": { "common": { "font": "headline", "foreground": { "light": "#0F172A", "dark": "#F8FAFC" } } } }, { "id": "pattern_detail_intent_text", "type": "text", "context": { "_text": "@{patternIntent}" }, "style": { "common": { "font": "body", "foreground": { "light": "#334155", "dark": "#CBD5E1" } }, "text": { "lineSpacing": 2 } } } ] }, { "id": "pattern_detail_when_card", "type": "vstack", "context": { "_spacing": 8, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "#FFFFFF", "dark": "#172033" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.1 }, "radius": 8, "y": 4 } }, "children": [ { "id": "pattern_detail_when_head", "type": "label", "context": { "_title": "Типові сценарії", "_image": "sf://briefcase.fill" }, "style": { "common": { "font": "headline", "foreground": { "light": "#0F172A", "dark": "#F8FAFC" } } } }, { "id": "pattern_detail_when_text", "type": "text", "context": { "_text": "@{patternWhen}" }, "style": { "common": { "font": "body", "foreground": { "light": "#334155", "dark": "#CBD5E1" } }, "text": { "lineSpacing": 2 } } } ] }, { "id": "pattern_detail_caution_card", "type": "vstack", "context": { "_spacing": 8, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "#FFF7ED", "dark": "#2A1E12" }, "cornerRadius": 20 } }, "children": [ { "id": "pattern_detail_caution_head", "type": "label", "context": { "_title": "Ризики та анти-патерни", "_image": "sf://exclamationmark.triangle.fill" }, "style": { "common": { "font": "headline", "foreground": { "light": "#9A3412", "dark": "#FDBA74" } } } }, { "id": "pattern_detail_caution_text", "type": "text", "context": { "_text": "@{patternCaution}" }, "style": { "common": { "font": "body", "foreground": { "light": "#7C2D12", "dark": "#FED7AA" } }, "text": { "lineSpacing": 2 } } } ] }, { "id": "pattern_detail_example_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "#0F172A", "dark": "#020617" }, "cornerRadius": 20, "foreground": { "color": "white" } }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 10, "y": 6 } }, "children": [ { "id": "pattern_detail_example_head", "type": "label", "context": { "_title": "@{patternExampleTitle}", "_image": "sf://chevron.left.forwardslash.chevron.right" }, "style": { "common": { "font": "headline", "foreground": { "color": "white" } } } }, { "id": "pattern_detail_example_text", "type": "text", "context": { "_text": "@{patternExample}" }, "style": { "common": { "font": { "kind": "system", "size": 14 }, "foreground": { "color": "white" } }, "text": { "lineSpacing": 2 } } } ] } ] } ] } ] }, "children": [ { "id": "pattern_detail_button", "type": "label", "context": { "_title": "Деталі", "_image": "sf://arrow.right.circle.fill" }, "style": { "common": { "font": { "kind": "subheadline", "weight": "semibold" }, "foreground": { "color": "white" }, "background": { "gradient": { "linear": { "colors": [ "#2563EB", "#7C3AED" ], "startPoint": "leading", "endPoint": "trailing" } } }, "cornerRadius": 999 }, "layout": { "padding": { "top": 10, "bottom": 10, "leading": 14, "trailing": 14 } } } } ] } ] } ] } } ] } } } ] } ] } ] }, { "id": "guide_toast_wrap", "type": "vstack", "style": { "layout": { "padding": { "top": 8, "bottom": 12, "leading": 24, "trailing": 24 } }, "common": { "opacity": "{{ ${showToast} ? 1.0 : 0.0 }}", "scale": "{{ ${showToast} ? 1.0 : 0.92 }}" }, "animation": { "kind": "spring", "value": "${showToast}", "duration": 0.35, "bounce": 0.25 } }, "children": [ { "id": "guide_toast_chip", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "style": { "layout": { "padding": { "top": 10, "bottom": 10, "leading": 16, "trailing": 16 } }, "common": { "background": { "material": "regular" }, "cornerRadius": 18 }, "shadow": { "color": { "color": "black", "opacity": 0.16 }, "radius": 8, "y": 4 } }, "children": [ { "id": "guide_toast_icon", "type": "image", "context": { "_source": "sf://star.fill" }, "style": { "layout": { "width": 16, "height": 16 }, "common": { "foreground": { "color": "#F59E0B" } } } }, { "id": "guide_toast_text", "type": "text", "context": { "_text": "${toastText}" }, "style": { "common": { "font": "subheadline", "foreground": { "light": "#0F172A", "dark": "#F8FAFC" } } } } ] } ] } ] } ] } ], "events": { "onAppear": [ { "repo": { "id": "act_load_favorites", "input": { "repositoryId": "patterns_guide_store_v1", "operation": "read", "params": { "collection": "prefs", "documentId": "favorites" } }, "output": { "success": [ { "state": { "id": "act_apply_favorites", "input": { "favoriteIds": "@{act_load_favorites.favoriteIds}", "showToast": false, "focused": "" } } } ], "failure": [ { "state": { "id": "act_first_launch_defaults", "input": { "favoriteIds": [], "showToast": false, "focused": "" } } } ] } } } ] } }