From 499ea43aea73aec91bcdf55b01ea827dc9e788c7 Mon Sep 17 00:00:00 2001 From: Nikita Guryev Date: Tue, 27 Oct 2026 17:54:17 +0300 Subject: [PATCH 1/4] fix(docs): serve empty state illustrations from @koobiq/visuals (#DS-5783) Co-Authored-By: Claude Sonnet 5.5 --- angular.json | 12 ++++++------ package.json | 1 + .../empty-state-content-example.ts | 6 +++--- .../notification-center-empty-example.html | 2 +- .../notification-center-empty-example.ts | 2 +- .../notification-center-error-example.html | 2 +- .../notification-center-error-example.ts | 2 +- .../notification-center-infinite-scroll-example.html | 2 +- .../notification-center-infinite-scroll-example.ts | 2 +- .../notification-center-overview-example.html | 2 +- .../notification-center-overview-example.ts | 2 +- yarn.lock | 8 ++++++++ 12 files changed, 26 insertions(+), 17 deletions(-) diff --git a/angular.json b/angular.json index 49ad6cff68..55293256b1 100644 --- a/angular.json +++ b/angular.json @@ -50,8 +50,8 @@ "output": "/assets/SVGIcons" }, { - "glob": "**/*", - "input": "node_modules/@koobiq/icons/images", + "glob": "**/*.webp", + "input": "node_modules/@koobiq/visuals", "output": "/assets/images" }, { @@ -390,8 +390,8 @@ "output": "/assets/svg-icons" }, { - "glob": "**/*", - "input": "node_modules/@koobiq/icons/images", + "glob": "**/*.webp", + "input": "node_modules/@koobiq/visuals", "output": "/assets/images" }, { @@ -1056,8 +1056,8 @@ }, "assets": [ { - "glob": "**/*", - "input": "node_modules/@koobiq/icons/images", + "glob": "**/*.webp", + "input": "node_modules/@koobiq/visuals", "output": "/assets/images" } ], diff --git a/package.json b/package.json index 0199b0da9a..d225c2fed7 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "@koobiq/date-adapter": "^3.5.1", "@koobiq/date-formatter": "^3.5.1", "@koobiq/icons": "^12.4.0", + "@koobiq/visuals": "^12.4.0", "@maskito/angular": "^5.1.0", "@maskito/core": "^5.1.0", "@maskito/kit": "^5.6.0", diff --git a/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts b/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts index ae6b38ab8a..8a26c5c997 100644 --- a/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts +++ b/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts @@ -19,7 +19,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
Empty state
Empty state { const currentTheme = this.currentTheme(); - return `https://koobiq.io/assets/images/${currentTheme}/empty_192.png 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.png 2x`; + return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); buttonText = 'Создать группу'; diff --git a/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html b/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html index 4906f13f38..243ddcc3ff 100644 --- a/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html @@ -142,7 +142,7 @@
{ const currentTheme = this.currentTheme(); - return `https://koobiq.io/assets/images/${currentTheme}/empty_192.png 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.png 2x`; + return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); readonly isDesktop = toSignal( diff --git a/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html b/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html index 7ac8f360f1..a825cd4f5d 100644 --- a/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html @@ -147,7 +147,7 @@
{ const currentTheme = this.currentTheme(); - return `https://koobiq.io/assets/images/${currentTheme}/empty_192.png 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.png 2x`; + return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); readonly isDesktop = toSignal( diff --git a/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html b/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html index 5c59b43f5f..361a919c9f 100644 --- a/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html @@ -143,7 +143,7 @@
{ const currentTheme = this.currentTheme(); - return `https://koobiq.io/assets/images/${currentTheme}/empty_192.png 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.png 2x`; + return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); private readonly themeService = inject(KbqThemeService, { optional: true }); diff --git a/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html b/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html index f5af2f430b..e26a9d60e7 100644 --- a/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html @@ -154,7 +154,7 @@
{ const currentTheme = this.currentTheme(); - return `https://koobiq.io/assets/images/${currentTheme}/empty_192.png 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.png 2x`; + return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); readonly isDesktop = toSignal( diff --git a/yarn.lock b/yarn.lock index ab1e261f83..38cd1d2978 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3700,6 +3700,13 @@ __metadata: languageName: node linkType: hard +"@koobiq/visuals@npm:^12.4.0": + version: 12.4.0 + resolution: "@koobiq/visuals@npm:12.4.0" + checksum: 10c0/88b5c39f7baf50b1fc2549e68b08c2ed50dc95344c0e8765f3ed2c801dde34f2ea170cbea17806c51797a2263038fddae8941a1322fb09d02d76e9fa6e627dc8 + languageName: node + linkType: hard + "@listr2/prompt-adapter-inquirer@npm:3.0.5": version: 3.0.5 resolution: "@listr2/prompt-adapter-inquirer@npm:3.0.5" @@ -10760,6 +10767,7 @@ __metadata: "@koobiq/icons": "npm:^12.4.0" "@koobiq/luxon-date-adapter": "npm:^3.5.1" "@koobiq/moment-date-adapter": "npm:^3.5.1" + "@koobiq/visuals": "npm:^12.4.0" "@maskito/angular": "npm:^5.1.0" "@maskito/core": "npm:^5.1.0" "@maskito/kit": "npm:^5.6.0" From 91c3c59f1dff5ee44c9734da87bd610db2a8e927 Mon Sep 17 00:00:00 2001 From: Nikita Guryev Date: Tue, 27 Oct 2026 18:08:10 +0300 Subject: [PATCH 2/4] fix(docs): keep absolute illustration URLs in examples for StackBlitz (#DS-5783) Co-Authored-By: Claude Sonnet 5.5 --- .../empty-state-content/empty-state-content-example.ts | 6 +++--- .../notification-center-empty-example.html | 2 +- .../notification-center-empty-example.ts | 2 +- .../notification-center-error-example.html | 2 +- .../notification-center-error-example.ts | 2 +- .../notification-center-infinite-scroll-example.html | 2 +- .../notification-center-infinite-scroll-example.ts | 2 +- .../notification-center-overview-example.html | 2 +- .../notification-center-overview-example.ts | 2 +- 9 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts b/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts index 8a26c5c997..ab830348d3 100644 --- a/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts +++ b/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts @@ -19,7 +19,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
Empty state
Empty state { const currentTheme = this.currentTheme(); - return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); buttonText = 'Создать группу'; diff --git a/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html b/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html index 243ddcc3ff..f8f73a9e15 100644 --- a/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html @@ -142,7 +142,7 @@
{ const currentTheme = this.currentTheme(); - return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); readonly isDesktop = toSignal( diff --git a/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html b/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html index a825cd4f5d..4f09a4b388 100644 --- a/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html @@ -147,7 +147,7 @@
{ const currentTheme = this.currentTheme(); - return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); readonly isDesktop = toSignal( diff --git a/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html b/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html index 361a919c9f..1c3e7f7e6c 100644 --- a/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html @@ -143,7 +143,7 @@
{ const currentTheme = this.currentTheme(); - return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); private readonly themeService = inject(KbqThemeService, { optional: true }); diff --git a/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html b/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html index e26a9d60e7..e91264fd04 100644 --- a/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html @@ -154,7 +154,7 @@
{ const currentTheme = this.currentTheme(); - return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); readonly isDesktop = toSignal( From 358af2d764ff373aa5ee93c61c52951f4293c166 Mon Sep 17 00:00:00 2001 From: Nikita Guryev Date: Wed, 28 Oct 2026 10:16:03 +0300 Subject: [PATCH 3/4] test(docs): use relative illustration URLs in examples (#DS-5783) Co-Authored-By: Claude Sonnet 5.5 --- .../empty-state-content/empty-state-content-example.ts | 6 +++--- .../notification-center-empty-example.html | 2 +- .../notification-center-empty-example.ts | 2 +- .../notification-center-error-example.html | 2 +- .../notification-center-error-example.ts | 2 +- .../notification-center-infinite-scroll-example.html | 2 +- .../notification-center-infinite-scroll-example.ts | 2 +- .../notification-center-overview-example.html | 2 +- .../notification-center-overview-example.ts | 2 +- 9 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts b/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts index ab830348d3..8a26c5c997 100644 --- a/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts +++ b/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts @@ -19,7 +19,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
Empty state
Empty state { const currentTheme = this.currentTheme(); - return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); buttonText = 'Создать группу'; diff --git a/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html b/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html index f8f73a9e15..243ddcc3ff 100644 --- a/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html @@ -142,7 +142,7 @@
{ const currentTheme = this.currentTheme(); - return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); readonly isDesktop = toSignal( diff --git a/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html b/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html index 4f09a4b388..a825cd4f5d 100644 --- a/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html @@ -147,7 +147,7 @@
{ const currentTheme = this.currentTheme(); - return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); readonly isDesktop = toSignal( diff --git a/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html b/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html index 1c3e7f7e6c..361a919c9f 100644 --- a/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html @@ -143,7 +143,7 @@
{ const currentTheme = this.currentTheme(); - return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); private readonly themeService = inject(KbqThemeService, { optional: true }); diff --git a/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html b/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html index e91264fd04..e26a9d60e7 100644 --- a/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html @@ -154,7 +154,7 @@
{ const currentTheme = this.currentTheme(); - return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); readonly isDesktop = toSignal( From 2a3a03e1ac1f2c8284da3849e5a828373280088c Mon Sep 17 00:00:00 2001 From: Nikita Guryev Date: Wed, 28 Oct 2026 10:25:34 +0300 Subject: [PATCH 4/4] revert: use absolute illustration URLs in examples again (#DS-5783) Co-Authored-By: Claude Sonnet 5.5 --- .../empty-state-content/empty-state-content-example.ts | 6 +++--- .../notification-center-empty-example.html | 2 +- .../notification-center-empty-example.ts | 2 +- .../notification-center-error-example.html | 2 +- .../notification-center-error-example.ts | 2 +- .../notification-center-infinite-scroll-example.html | 2 +- .../notification-center-infinite-scroll-example.ts | 2 +- .../notification-center-overview-example.html | 2 +- .../notification-center-overview-example.ts | 2 +- 9 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts b/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts index 8a26c5c997..ab830348d3 100644 --- a/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts +++ b/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts @@ -19,7 +19,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
Empty state
Empty state { const currentTheme = this.currentTheme(); - return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); buttonText = 'Создать группу'; diff --git a/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html b/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html index 243ddcc3ff..f8f73a9e15 100644 --- a/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html @@ -142,7 +142,7 @@
{ const currentTheme = this.currentTheme(); - return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); readonly isDesktop = toSignal( diff --git a/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html b/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html index a825cd4f5d..4f09a4b388 100644 --- a/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html @@ -147,7 +147,7 @@
{ const currentTheme = this.currentTheme(); - return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); readonly isDesktop = toSignal( diff --git a/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html b/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html index 361a919c9f..1c3e7f7e6c 100644 --- a/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html @@ -143,7 +143,7 @@
{ const currentTheme = this.currentTheme(); - return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); private readonly themeService = inject(KbqThemeService, { optional: true }); diff --git a/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html b/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html index e26a9d60e7..e91264fd04 100644 --- a/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html +++ b/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html @@ -154,7 +154,7 @@
{ const currentTheme = this.currentTheme(); - return `assets/images/${currentTheme}/empty_192.webp 1x, assets/images/${currentTheme}/empty_192@2x.webp 2x`; + return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`; }); readonly isDesktop = toSignal(