Feature/styles debug

.github/workflows/deploy-pages.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - feature/styles-debug
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 

.github/workflows/npm-publish.yml

@@ -6,22 +6,76 @@ on:
 
 permissions:
   id-token: write
-  contents: read
+  contents: write
 
 jobs:
   publish-npm:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
           node-version: 20
           registry-url: https://registry.npmjs.org/
       - name: Update npm
         run: npm install -g npm@latest
-      - run: npm ci --production
+      - run: npm ci
       - uses: reedyuk/npm-version@1.1.1
         with:
           version: ${{github.ref_name}}
-      - run: npm run copy:dist
-      - run: npm publish
+      - name: Sync src/lib/package.json version with root package.json
+        run: |
+          node -e "const fs=require('fs'); const path='src/lib/package.json'; const root=JSON.parse(fs.readFileSync('package.json')); const lib=JSON.parse(fs.readFileSync(path)); if(lib.version!==root.version){ lib.version=root.version; fs.writeFileSync(path, JSON.stringify(lib,null,2)+'\n'); }"
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add src/lib/package.json
+          # commit only if there are staged changes
+          git diff --cached --quiet || (git commit -m "chore(release): sync src/lib package version to ${{github.ref_name}}" && git push origin HEAD:refs/heads/${{ github.event.release.target_commitish }})
+      - run: npm run build:lib
+      - name: Prepare dist/package.json
+        run: |
+          set -euo pipefail
+          # Ensure dist exists and has its own package.json generated by the build
+          if [ ! -d dist ]; then echo "dist directory not found"; exit 1; fi
+          if [ ! -f dist/package.json ]; then echo "dist/package.json not found — expected build to generate it"; exit 1; fi
+          # Sync version in dist/package.json with root package.json (silent)
+          node -e "const fs=require('fs'); const root=JSON.parse(fs.readFileSync('package.json')); const p='dist/package.json'; const d=JSON.parse(fs.readFileSync(p)); if(d.version!==root.version){ d.version=root.version; fs.writeFileSync(p, JSON.stringify(d,null,2)+'\n'); }"
+      - name: Fix package.json issues inside dist (optional)
+        run: |
+          npm --prefix ./dist pkg fix || true
+      - name: Normalize dist/package.json (ensure correct name, version and repository)
+        run: |
+          node -e "const fs=require('fs'); const root=require('./package.json'); const srcExists=fs.existsSync('src/lib/package.json'); const src=srcExists? require('./src/lib/package.json'): null; const p='dist/package.json'; const d=JSON.parse(fs.readFileSync(p)); const wantedName= src? src.name : root.name; const wantedVersion=root.version; let changed=false; if(d.name!==wantedName){ d.name=wantedName; changed=true;} if(d.version!==wantedVersion){ d.version=wantedVersion; changed=true;} const normalizeRepo=(r)=>{ if(!r) return null; if(typeof r==='string') return r.replace(/^git\+/, '').replace(/\.git$/,''); if(r.url) return r.url.replace(/^git\+/, '').replace(/\.git$/,''); return null; }; const wantedRepo = normalizeRepo(root.repository) || (process.env.GITHUB_REPOSITORY? 'https://github.com/'+process.env.GITHUB_REPOSITORY : null); if(wantedRepo){ if(!d.repository){ d.repository = { type: 'git', url: wantedRepo }; changed=true; } else { const currentRepo=normalizeRepo(d.repository); if(currentRepo!==wantedRepo){ d.repository = { type: 'git', url: wantedRepo }; changed=true; } } } if(changed){ fs.writeFileSync(p, JSON.stringify(d,null,2)+'\n'); }"
+      - name: Pack dist and verify package.json inside tarball
+        run: |
+          set -euo pipefail
+          PACKAGE_DIR=dist
+          VERSION=$(node -e "console.log(require('./${PACKAGE_DIR}/package.json').version)")
+          # create tarball in workspace (pack local folder)
+          TARFILE=$(npm pack "./$PACKAGE_DIR")
+          mkdir -p verify_unpack
+          tar -xzf "$TARFILE" -C verify_unpack
+          # read version from inside tarball
+          INNER_VERSION=$(node -e "console.log(JSON.parse(require('fs').readFileSync('verify_unpack/package/package.json')).version)")
+          if [ "$INNER_VERSION" != "$VERSION" ]; then
+            echo "Error: version inside tarball ($INNER_VERSION) does not match dist/package.json ($VERSION)" >&2
+            exit 1
+          fi
+          # make TARFILE available to next step
+          echo "TARFILE=$TARFILE" >> $GITHUB_ENV
+      - name: Publish verified tarball to npm (use tag for prerelease versions)
+        run: |
+          set -euo pipefail
+          PACKAGE_DIR=dist
+          VERSION=$(node -e "console.log(require('./${PACKAGE_DIR}/package.json').version)")
+          TARFILE=${{ env.TARFILE }}
+          NAME=$(node -e "console.log(require('./${PACKAGE_DIR}/package.json').name)")
+          if [[ "$VERSION" == *-* ]]; then
+            TAG=$(echo "$VERSION" | sed -E 's/^[0-9]+\.[0-9]+\.[0-9]+-([^\.]+).*/\1/')
+            npm publish "$TARFILE" --tag "$TAG"
+          else
+            npm publish "$TARFILE"
+          fi
+          echo "Published ${NAME}@${VERSION}"

.gitignore

@@ -52,6 +52,10 @@ api-generator/typedoc.json
 # файлы в этим папках компилятся и должны создаваться при сборке
 src/assets/components/themes
 
-./storybook-static
-./debug-storybook.log
-./documentation.json
+/storybook-static
+/debug-storybook.log
+/documentation.json
+
+.claude/*
+
+.playwright-mcp/*

.storybook/main.ts

@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/angular';
 
 const config: StorybookConfig = {
   stories: ['../src/stories/**/*.mdx', '../src/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-docs', '@storybook/addon-themes'],
   framework: '@storybook/angular'
 };
 export default config;

.storybook/manager.ts

@@ -0,0 +1,12 @@
+import { addons } from 'storybook/manager-api';
+
+addons.setConfig({
+  layoutCustomisations: {
+    showToolbar(state, defaultValue) {
+      if (state.viewMode === 'docs') {
+        return false;
+      }
+      return defaultValue;
+    },
+  },
+});

.storybook/preview.ts

@@ -1,15 +1,37 @@
 import { applicationConfig, Preview } from '@storybook/angular';
 import { setCompodocJson } from '@storybook/addon-docs/angular';
+import { withThemeByClassName } from '@storybook/addon-themes';
 import docJson from '../documentation.json';
 import { providePrimeNG } from 'primeng/config';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { GalleriaItemSlot } from 'primeng/galleria';
 
-import Preset from '../src/prime-preset/theme.preset';
+// Fix PrimeNG bug: GalleriaItemSlot's main item slot has no `type` attribute,
+// so the `item` setter's forEach loop never matches and context stays stale on updates.
+(function patchGalleriaItemSlot() {
+    const desc = Object.getOwnPropertyDescriptor(GalleriaItemSlot.prototype, 'item');
+    if (desc?.set) {
+        const orig = desc.set;
+        Object.defineProperty(GalleriaItemSlot.prototype, 'item', {
+            ...desc,
+            set(value: unknown) {
+                orig.call(this, value);
+                if ((this as any).context?.$implicit !== value) {
+                    (this as any).context = { $implicit: value };
+                }
+            }
+        });
+    }
+}());
+
+import Preset from '../src/lib/providers/prime-preset/theme.preset';
 
 import '!style-loader!css-loader!postcss-loader!sass-loader!../src/styles.scss';
 
 setCompodocJson(docJson);
 
+const DARK_MODE_SELECTOR = '.dark-mode';
+
 const preview: Preview = {
   decorators: [
     applicationConfig({
@@ -19,15 +41,26 @@ const preview: Preview = {
           theme: {
             preset: Preset,
             options: {
-              darkModeSelector: false,
+              darkModeSelector: '.dark',
               cssLayer: false
             }
           }
         })
       ]
+    }),
+    withThemeByClassName({
+      themes: {
+        light: '',
+        dark: 'dark'
+      },
+      defaultTheme: 'light'
     })
   ],
   parameters: {
+    backgrounds: { disable: true },
+    docs: {
+      globals: { theme: 'light' },
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

.storybook/tsconfig.json

@@ -5,6 +5,8 @@
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true
   },
-  "include": ["../src/stories/**/*.stories.*", "./preview.ts", "../src/prime-preset/**/*"],
+  "include": ["../src/stories/**/*.stories.*", "./preview.ts",
+    "../src/lib/providers/prime-preset/**/*"
+  ],
   "files": ["./typings.d.ts"]
 }

CLAUDE.md

@@ -0,0 +1,3 @@
+# Project Rules
+
+Основные правила и запреты — в `.claude/skills/generate-component/references/red-lines.md`.

README.md

@@ -1,38 +1,75 @@
 # angular-ui-kit
 
-angular-ui-kit - это пресет темы для primeng, а также storybook с демонстрацией и документацией используемых компонентов.
-Он позволяет быстро и легко строить новые интерфейсы в фирменном стиле CDEK.
+`angular-ui-kit` — это полноценная библиотека UI-компонентов и сервисов для Angular с готовыми стилями, storybook для демонстрации и документацией.
+Библиотека позволяет быстро и удобно добавлять готовые фирменные компоненты CDEK в приложения.
 
 ## Использование
 
-1. Установите пакет @cdek-it/angular-ui-kit
+1. Установите пакет `@cdek-it/angular-ui-kit`
 
 ```shell
 npm install @cdek-it/angular-ui-kit
 ```
 
-2. Импортируйте пресет темы в ваш angular-проект
+2. Подключите провайдеры в ваш angular-проект. Важно: для корректной работы стилей необходимо использовать `provideExtraThemes()` в списке провайдеров, например:
 
 ```ts
-import Preset from '@cdek-it/angular-ui-kit/dist/theme.preset.ts';
+import { provideExtraThemes } from '@cdek-it/angular-ui-kit';
+import { provideBrowserGlobalErrorListeners } from '@angular/platform-browser';
+import { importProvidersFrom } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    ...,
-    provideAnimations(),
-    providePrimeNG({
-      theme: {
-        preset: Preset,
-        options: {
-          darkModeSelector: false,
-          cssLayer: false
-        }
-      }
-    })
+    provideBrowserGlobalErrorListeners(),
+    importProvidersFrom(BrowserModule),
+    provideExtraThemes(),
   ]
 };
 ```
 
+`provideExtraThemes()` необходим для правильной интеграции стилей библиотеки в приложение.
+
+## Пример использования компонентов
+
+Ниже простой пример использования входящих в библиотеку компонентов (вариант — `extra-button` и `extra-tag`). Вставьте в шаблон компонента или story:
+
+```html
+<div style="display: flex; flex-direction: column; gap: 16px; padding: 16px">
+  <extra-button label="hello"></extra-button>
+  <extra-button label="hello" [rounded]="true"></extra-button>
+  <extra-button label="hello" [text]="true"></extra-button>
+  <extra-tag [value]="'tag content'"></extra-tag>
+</div>
+```
+
+Примечание: Нужно добавить импорт соответствующего модуля/компонентов библиотеки в ваш модуль или компонент. Пример для standalone-компонента (используется `imports` в декораторе):
+
+```ts
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ExtraButtonComponent, ExtraTagComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [
+    ExtraButtonComponent,
+    CommonModule,
+    ExtraTagComponent,
+  ],
+  template: `
+    <div style="display: flex; flex-direction: column; gap: 16px; padding: 16px">
+      <extra-button label="hello"></extra-button>
+      <extra-button label="hello" [rounded]="true"></extra-button>
+      <extra-button label="hello" [text]="true"></extra-button>
+      <extra-tag [value]="'tag content'"></extra-tag>
+    </div>
+  `
+})
+export class AppExample {}
+```
+
 ## Используемые технологии и связанные зависимости
 
 ---
@@ -48,11 +85,14 @@ export const appConfig: ApplicationConfig = {
 
 - Storybook 10
 
+Важно: на данный момент компоненты библиотеки не работают без Zone.js. Убедитесь, что ваше приложение использует zone (Zone.js должен быть подключён). В большинстве стандартных Angular-приложений Zone.js подключён по умолчанию.
+
 ## Структура проекта
 
 - `src/app` - базовое angular-приложение. Может использоваться как плейграунд для разработки и отладки.
 - `src/stories` - набор story с компонентами для storybook.
-- `src/prime-preset` - пресет темы для primeng, а также токены.
+- `src/prime-preset` - пресет темы и токены (используется библиотекой для совместимости с PrimeNG).
+- `src/lib` - исходники компонентов и сервисов библиотеки (компоненты, сервисы, модули и публичный API).
 
 ## Запуск storybook
 
@@ -77,33 +117,3 @@ npm run storybook
 3. Убедитесь, что все состояния компонента выглядят верно. Если нет - смотрите раздел "[Правила доработки компонентов](#Правила доработки компонентов)" ниже.
 4. Создать pull request в `main`, прикрепить его в задачу. Задачу отдать на ревью разработчикам и дизайнерам.
    В случае замечаний ориентируемся на пункт `3` выше.
-
-## Правила доработки компонентов
-
-### Компоненты primeng
-
-Если компонент несоответствует дизайну в figma, то:
-
-1. Проверяем верность токенов. Если есть ошибки - сообщаем мейнтейнеру.
-2. Если токены верны, и проблему можно решить кастомизацией css - согласуем доработки с мейнтейнером.
-3. Если кастомизации css недостаточно, но можно решить проблему через шаблоны - согласуем доработки с мейнтейнером. Пример ниже.
-Например, для `inputtext` нужен крестик с очисткой. Непосредственно такой опции в primeng нет, но можно использовать `p-inputIcon` с иконкой крестика, и следующим `source`-кодом в story:
-
-```
-// template
-<p-inputIcon>
-    <input pInputText [(ngModel)]="value" placeholder="Input with clear icon" />
-    <i class="ti ti-cross" (click)="onClearClick()"></i>
-</p-inputIcon>
-
-// ts
-onClearClick() {
-  this.value = '';
-}
-```
-Важно, что бы в story был верный `source`-код, что бы разработчики могли просто его копировать и с минимальными доработками использовать у себя.
-4. Если вариантов решения проблемы через способы выше нет - сообщаем мейнтейнеру. Далее будет подниматься вопрос о необходимости написания своего компонента.
-
-### Кастомные компоненты
-
-*todo будут разработаны при необходимости*