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

src/lib/components/progressbar/progressbar.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { ProgressBar } from 'primeng/progressbar';
+
+export type ProgressBarMode = 'determinate' | 'indeterminate';
+
+@Component({
+  selector: 'progressbar',
+  standalone: true,
+  imports: [ProgressBar],
+  template: `
+    <p-progressbar
+      [value]="value"
+      [mode]="mode"
+      [showValue]="showValue"
+    ></p-progressbar>
+  `,
+})
+export class ProgressBarComponent {
+  @Input() value = 0;
+  @Input() mode: ProgressBarMode = 'determinate';
+  @Input() showValue = true;
+}

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

@@ -0,0 +1,5 @@
+export const progressbarCss = ({ dt }: { dt: (path: string) => string }) => `
+  .p-progressbar-label {
+    font-family: ${dt('fonts.fontFamily.base')};
+  }
+`;

src/stories/components/progressbar/examples/progressbar-indeterminate.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { ProgressBarComponent } from '../../../../lib/components/progressbar/progressbar.component';
+
+@Component({
+  selector: 'app-progressbar-indeterminate',
+  standalone: true,
+  imports: [ProgressBarComponent],
+  template: `
+    <div class="bg-surface-ground">
+      <progressbar mode="indeterminate"></progressbar>
+    </div>
+  `,
+})
+export class ProgressBarIndeterminateComponent {}

src/stories/components/progressbar/examples/progressbar-no-label.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { ProgressBarComponent } from '../../../../lib/components/progressbar/progressbar.component';
+
+@Component({
+  selector: 'app-progressbar-no-label',
+  standalone: true,
+  imports: [ProgressBarComponent],
+  template: `
+    <div class="bg-surface-ground">
+      <progressbar [value]="60" [showValue]="false"></progressbar>
+    </div>
+  `,
+})
+export class ProgressBarNoLabelComponent {}

src/stories/components/progressbar/progressbar.stories.ts

@@ -0,0 +1,170 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { ProgressBarComponent } from '../../../lib/components/progressbar/progressbar.component';
+import { ProgressBarIndeterminateComponent } from './examples/progressbar-indeterminate.component';
+import { ProgressBarNoLabelComponent } from './examples/progressbar-no-label.component';
+
+type ProgressBarArgs = ProgressBarComponent;
+
+const meta: Meta<ProgressBarArgs> = {
+  title: 'Components/Misc/ProgressBar',
+  component: ProgressBarComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        ProgressBarComponent,
+        ProgressBarIndeterminateComponent,
+        ProgressBarNoLabelComponent,
+      ],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: `Информирует пользователя о статусе длительного процесса.
+
+\`\`\`typescript
+import { ProgressBarComponent } from '@cdek-it/angular-ui-kit';
+\`\`\``,
+      },
+    },
+    designTokens: {
+      prefix: '--p-progressbar',
+    },
+  },
+  argTypes: {
+    value: {
+      control: { type: 'number', min: 0, max: 100 },
+      description: 'Значение прогресса (0–100)',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: '0' },
+        type: { summary: 'number' },
+      },
+    },
+    mode: {
+      control: 'select',
+      options: ['determinate', 'indeterminate'],
+      description: 'Режим отображения',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'determinate' },
+        type: { summary: "'determinate' | 'indeterminate'" },
+      },
+    },
+    showValue: {
+      control: 'boolean',
+      description: 'Отображать числовое значение',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'true' },
+        type: { summary: 'boolean' },
+      },
+    },
+  },
+};
+
+const commonTemplate = `<progressbar
+  [value]="value"
+  [mode]="mode"
+  [showValue]="showValue"
+></progressbar>`;
+
+export default meta;
+type Story = StoryObj<ProgressBarArgs>;
+
+// ── Default ──────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  name: 'Default',
+  render: (args) => {
+    const parts: string[] = [];
+
+    if (args.value != null && args.value !== 0) parts.push(`[value]="${args.value}"`);
+    if (args.mode && args.mode !== 'determinate') parts.push(`mode="${args.mode}"`);
+    if (!args.showValue) parts.push(`[showValue]="false"`);
+
+    const template = parts.length
+      ? `<progressbar\n  ${parts.join('\n  ')}\n></progressbar>`
+      : `<progressbar></progressbar>`;
+
+    return { props: args, template };
+  },
+  args: {
+    value: 50,
+    mode: 'determinate',
+    showValue: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.',
+      },
+    },
+  },
+};
+
+// ── Stories ──────────────────────────────────────────────────────────────────
+
+export const Indeterminate: Story = {
+  render: (args) => ({ props: args, template: commonTemplate }),
+  args: {
+    mode: 'indeterminate',
+    showValue: true,
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Анимированный режим без конкретного значения.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { ProgressBarComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-progressbar-indeterminate',
+  standalone: true,
+  imports: [ProgressBarComponent],
+  template: \`
+    <div class="bg-surface-ground">
+      <progressbar mode="indeterminate"></progressbar>
+    </div>
+  \`,
+})
+export class ProgressBarIndeterminateComponent {}`,
+      },
+    },
+  },
+};
+
+export const NoLabel: Story = {
+  render: (args) => ({ props: args, template: commonTemplate }),
+  args: {
+    value: 60,
+    mode: 'determinate',
+    showValue: false,
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Полоса прогресса без числовой метки.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { ProgressBarComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-progressbar-no-label',
+  standalone: true,
+  imports: [ProgressBarComponent],
+  template: \`
+    <div class="bg-surface-ground">
+      <progressbar [value]="60" [showValue]="false"></progressbar>
+    </div>
+  \`,
+})
+export class ProgressBarNoLabelComponent {}`,
+      },
+    },
+  },
+};