chip: стилизация, сторисы, обёртки

src/lib/components/chip/chip.component.ts

@@ -0,0 +1,24 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Chip } from 'primeng/chip';
+
+@Component({
+  selector: 'chip',
+  standalone: true,
+  imports: [Chip],
+  template: `
+    <p-chip
+      [label]="label"
+      [icon]="icon"
+      [removable]="removable"
+      [disabled]="disabled"
+      (onRemove)="onRemove.emit($event)"
+    ></p-chip>
+  `,
+})
+export class ChipComponent {
+  @Input() label = '';
+  @Input() icon = '';
+  @Input() removable = false;
+  @Input() disabled = false;
+  @Output() onRemove = new EventEmitter<MouseEvent>();
+}

src/prime-preset/tokens/components/chip.ts

@@ -0,0 +1,45 @@
+/**
+ * Кастомная CSS-стилизация для компонента p-chip.
+ * Публикует extend-токены как CSS-переменные и применяет глобальные стили.
+ * Подключается в map-tokens.ts: `import { chipCss } from './components/chip'`
+ */
+export const chipCss = ({ dt }: { dt: (token: string) => string }): string => `
+  /* ─── Chip extend: публикуем кастомные переменные в :root ─── */
+  :root {
+    --p-chip-extend-border-color: ${dt('chip.extend.borderColor')};
+    --p-chip-extend-border-width: ${dt('chip.extend.borderWidth')};
+  }
+
+  /* ─── Граница чипа ─── */
+  .p-chip {
+    border: var(--p-chip-extend-border-width) solid var(--p-chip-extend-border-color);
+  }
+
+  /* ─── Типографика лейбла ─── */
+  .p-chip-label {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.300')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+    line-height: ${dt('fonts.lineHeight.400')};
+  }
+
+  /* ─── Сброс уменьшенного padding PrimeNG при наличии кнопки удаления ─── */
+  .p-chip:has(.p-chip-remove-icon) {
+    padding-inline-end: ${dt('chip.root.paddingX')};
+  }
+
+  /* ─── Focus ring иконки удаления ─── */
+  .p-chip-remove-icon:focus-visible {
+    outline: ${dt('chip.removeIcon.focusRing.width')} solid ${dt('focusRing.extend.success')};
+  }
+
+  /* ─── Disabled состояние ─── */
+  .p-chip.p-disabled {
+    opacity: ${dt('opacity.500')};
+    pointer-events: none;
+  }
+
+  .p-chip.p-disabled .p-chip-remove-icon {
+    pointer-events: none;
+  }
+`;

src/stories/components/chip/chip.stories.ts

@@ -0,0 +1,144 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { ChipComponent } from '../../../lib/components/chip/chip.component';
+import { ChipWithIconComponent, WithIcon as WithIconStory } from './examples/chip-with-icon.component';
+import { ChipRemovableComponent, Removable as RemovableStory } from './examples/chip-removable.component';
+import { ChipRemovableWithIconComponent, RemovableWithIcon as RemovableWithIconStory } from './examples/chip-removable-with-icon.component';
+import { ChipDisabledComponent, Disabled as DisabledStory } from './examples/chip-disabled.component';
+
+type ChipArgs = ChipComponent & { onRemove?: (event: MouseEvent) => void };
+
+const meta: Meta<ChipArgs> = {
+  title: 'Components/Misc/Chip',
+  component: ChipComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        ChipComponent,
+        ChipWithIconComponent,
+        ChipRemovableComponent,
+        ChipRemovableWithIconComponent,
+        ChipDisabledComponent,
+      ],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: `Чип — небольшой интерактивный элемент с текстом, иконкой и опциональной кнопкой удаления.
+
+\`\`\`typescript
+import { ChipComponent } from '@cdek-it/angular-ui-kit';
+\`\`\``,
+      },
+    },
+    designTokens: { prefix: '--p-chip' },
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Текст внутри чипа',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: '' },
+        type: { summary: 'string' },
+      },
+    },
+    icon: {
+      control: 'text',
+      description: 'Иконка чипа (класс Tabler Icons, например "ti ti-map-pin")',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: '' },
+        type: { summary: 'string' },
+      },
+    },
+    removable: {
+      control: 'boolean',
+      description: 'Отображает кнопку удаления',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Отключает чип',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+      },
+    },
+    onRemove: {
+      control: false,
+      description: 'Событие удаления чипа',
+      table: {
+        category: 'Events',
+        type: { summary: 'EventEmitter<MouseEvent>' },
+      },
+    },
+  },
+};
+
+const commonTemplate = `
+<chip
+  [label]="label"
+  [icon]="icon"
+  [removable]="removable"
+  [disabled]="disabled"
+></chip>
+`;
+
+export default meta;
+type Story = StoryObj<ChipArgs>;
+
+// ── Default ───────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  name: 'Default',
+  render: (args) => {
+    const parts: string[] = [];
+
+    if (args.label)     parts.push(`label="${args.label}"`);
+    if (args.icon)      parts.push(`icon="${args.icon}"`);
+    if (args.removable) parts.push(`[removable]="true"`);
+    if (args.disabled)  parts.push(`[disabled]="true"`);
+
+    const template = parts.length
+      ? `<chip\n  ${parts.join('\n  ')}\n></chip>`
+      : `<chip></chip>`;
+
+    return { props: args, template };
+  },
+  args: {
+    label: 'В пути',
+    icon: '',
+    removable: false,
+    disabled: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.',
+      },
+    },
+  },
+};
+
+// ── WithIcon ──────────────────────────────────────────────────────────────────
+
+export const WithIcon: Story = WithIconStory;
+
+// ── Removable ─────────────────────────────────────────────────────────────────
+
+export const Removable: Story = RemovableStory;
+
+// ── RemovableWithIcon ─────────────────────────────────────────────────────────
+
+export const RemovableWithIcon: Story = RemovableWithIconStory;
+
+// ── Disabled ──────────────────────────────────────────────────────────────────
+
+export const Disabled: Story = DisabledStory;

src/stories/components/chip/examples/chip-disabled.component.ts

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { ChipComponent } from '../../../../lib/components/chip/chip.component';
+
+const template = `
+<div class="bg-surface-ground">
+  <chip label="Доставлен" icon="ti ti-check" [removable]="true" [disabled]="true"></chip>
+</div>
+`;
+const styles = '';
+
+@Component({
+  selector: 'app-chip-disabled',
+  standalone: true,
+  imports: [ChipComponent],
+  template,
+  styles,
+})
+export class ChipDisabledComponent {}
+
+export const Disabled = {
+  render: () => ({
+    template: `<app-chip-disabled></app-chip-disabled>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Отключённый чип.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { ChipComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-chip-disabled',
+  standalone: true,
+  imports: [ChipComponent],
+  template: \`
+    <chip label="Доставлен" icon="ti ti-check" [removable]="true" [disabled]="true"></chip>
+  \`,
+})
+export class ChipDisabledComponent {}
+        `,
+      },
+    },
+  },
+};

src/stories/components/chip/examples/chip-removable-with-icon.component.ts

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { ChipComponent } from '../../../../lib/components/chip/chip.component';
+
+const template = `
+<div class="bg-surface-ground">
+  <chip label="Задержан" icon="ti ti-alert-triangle" [removable]="true"></chip>
+</div>
+`;
+const styles = '';
+
+@Component({
+  selector: 'app-chip-removable-with-icon',
+  standalone: true,
+  imports: [ChipComponent],
+  template,
+  styles,
+})
+export class ChipRemovableWithIconComponent {}
+
+export const RemovableWithIcon = {
+  render: () => ({
+    template: `<app-chip-removable-with-icon></app-chip-removable-with-icon>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Чип с иконкой и кнопкой удаления.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { ChipComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-chip-removable-with-icon',
+  standalone: true,
+  imports: [ChipComponent],
+  template: \`
+    <chip label="Задержан" icon="ti ti-alert-triangle" [removable]="true"></chip>
+  \`,
+})
+export class ChipRemovableWithIconComponent {}
+        `,
+      },
+    },
+  },
+};

src/stories/components/chip/examples/chip-removable.component.ts

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { ChipComponent } from '../../../../lib/components/chip/chip.component';
+
+const template = `
+<div class="bg-surface-ground">
+  <chip label="Хрупкий груз" [removable]="true"></chip>
+</div>
+`;
+const styles = '';
+
+@Component({
+  selector: 'app-chip-removable',
+  standalone: true,
+  imports: [ChipComponent],
+  template,
+  styles,
+})
+export class ChipRemovableComponent {}
+
+export const Removable = {
+  render: () => ({
+    template: `<app-chip-removable></app-chip-removable>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Чип с кнопкой удаления.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { ChipComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-chip-removable',
+  standalone: true,
+  imports: [ChipComponent],
+  template: \`
+    <chip label="Хрупкий груз" [removable]="true"></chip>
+  \`,
+})
+export class ChipRemovableComponent {}
+        `,
+      },
+    },
+  },
+};