fix(storybook): починить истории примитивов

- avatar-control: добавить provideHttpClient и API_URL провайдеры
- file-item: добавить link в stories и шаблон
- file-upload-item: привязать обработчики delete/retry
- loader: исправить цвет circle — убрать var() для hex значений
- search: привязать type инпута + добавить type в argTypes
- textarea: ограничить ширину small блока, counter/error внутри контейнера

Author: Awakich

projects/social_platform/.storybook/preview.ts

@@ -1,12 +1,13 @@
 import type { Preview } from "@storybook/angular";
 import { applicationConfig } from "@storybook/angular";
 import { provideZonelessChangeDetection } from "@angular/core";
+import { provideHttpClient } from "@angular/common/http";
 
 const preview: Preview = {
   // Приложение zoneless — без этого signals в историях не обновляются.
   decorators: [
     applicationConfig({
-      providers: [provideZonelessChangeDetection()],
+      providers: [provideZonelessChangeDetection(), provideHttpClient()],
     }),
   ],
   parameters: {

projects/social_platform/src/app/ui/primitives/avatar-control/avatar-control.component.stories.ts

@@ -1,14 +1,22 @@
 /** @format */
 
-import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { Meta, StoryObj, moduleMetadata, applicationConfig } from "@storybook/angular";
 import { ReactiveFormsModule, FormControl } from "@angular/forms";
+import { provideHttpClient } from "@angular/common/http";
+import { API_URL } from "@corelib";
 import { AvatarControlComponent } from "./avatar-control.component";
 
 const meta: Meta<AvatarControlComponent> = {
   title: "UI/PRIMITIVES/AvatarControl",
   component: AvatarControlComponent,
   tags: ["autodocs"],
   decorators: [
+    applicationConfig({
+      providers: [
+        provideHttpClient(),
+        { provide: API_URL, useValue: "" },
+      ],
+    }),
     moduleMetadata({
       imports: [ReactiveFormsModule],
     }),

projects/social_platform/src/app/ui/primitives/file-item/file-item.component.stories.ts

@@ -23,6 +23,7 @@ const meta: Meta<FileItemComponent> = {
     type: { control: "text" },
     name: { control: "text" },
     size: { control: "number" },
+    link: { control: "text" },
     mode: { control: "inline-radio", options: ["default", "preview"] },
     canDelete: { control: "boolean" },
   },
@@ -34,6 +35,7 @@ const meta: Meta<FileItemComponent> = {
           [type]="type"
           [name]="name"
           [size]="size"
+          [link]="link"
           [mode]="mode"
           [canDelete]="canDelete"
         ></app-file-item>
@@ -52,6 +54,7 @@ export const Default: Story = {
     size: 2457600,
     mode: "default",
     canDelete: false,
+    link: "https://example.com/Документ.pdf",
   },
 };
 
@@ -62,6 +65,7 @@ export const WithDelete: Story = {
     size: 1048576,
     mode: "default",
     canDelete: true,
+    link: "https://example.com/Удаляемый.pdf",
   },
 };
 
@@ -72,6 +76,7 @@ export const Preview: Story = {
     size: 3145728,
     mode: "preview",
     canDelete: true,
+    link: "https://example.com/Фото.jpg",
   },
 };
 
@@ -82,5 +87,6 @@ export const SmallFile: Story = {
     size: 2048,
     mode: "default",
     canDelete: false,
+    link: "https://example.com/readme.txt",
   },
 };

projects/social_platform/src/app/ui/primitives/file-upload-item/file-upload-item.component.stories.ts

@@ -16,7 +16,11 @@ const meta: Meta<FileUploadItemComponent> = {
     error: { control: "text" },
   },
   render: (args) => ({
-    props: args,
+    props: {
+      ...args,
+      onDelete: () => console.log("[FileUploadItem] delete"),
+      onRetry: () => console.log("[FileUploadItem] retry"),
+    },
     template: `
       <div style="max-width: 400px;">
         <app-file-upload-item
@@ -26,6 +30,8 @@ const meta: Meta<FileUploadItemComponent> = {
           [link]="link"
           [loading]="loading"
           [error]="error"
+          (delete)="onDelete()"
+          (retry)="onRetry()"
         ></app-file-upload-item>
       </div>
     `,

projects/social_platform/src/app/ui/primitives/loader/loader.component.html

@@ -24,7 +24,7 @@
   } @else if (type() === "circle") {
     <div
       class="lds-ring"
-      [style]="'--size:' + size() + ';' + '--color:' + 'var(--' + color() + ');'"
+      [style]="'--size:' + size() + ';' + '--color:' + color() + ';'"
     >
       <div></div>
       <div></div>

projects/social_platform/src/app/ui/primitives/search/search.component.html

@@ -16,7 +16,8 @@
         <input
           #inputEl
           class="text-body-12"
-          type="text"
+          [type]="type()"
+          [value]="value"
           [placeholder]="placeholder()"
           (input)="onInput($event)"
         />

projects/social_platform/src/app/ui/primitives/search/search.component.stories.ts

@@ -15,6 +15,7 @@ const meta: Meta<SearchComponent> = {
   ],
   argTypes: {
     placeholder: { control: "text" },
+    type: { control: "select", options: ["text", "password", "email"] },
     openable: { control: "boolean" },
     error: { control: "boolean" },
   },
@@ -26,6 +27,7 @@ const meta: Meta<SearchComponent> = {
     template: `<app-search
       [formControl]="control"
       [placeholder]="placeholder"
+      [type]="type"
       [openable]="openable"
       [error]="error"
     ></app-search>`,

projects/social_platform/src/app/ui/primitives/textarea/textarea.component.html

@@ -1,6 +1,6 @@
 <!-- @format -->
 
-<div class="field" [class.field--error]="error()">
+<div class="field" [class.field--error]="error()" [class.field--small]="size() === 'small'" [class.field--big]="size() === 'big'">
   <div class="field__left-icon">
     <ng-content select="left-icon"></ng-content>
   </div>

projects/social_platform/src/app/ui/primitives/textarea/textarea.component.scss

@@ -6,7 +6,17 @@
 .field {
   position: relative;
 
+  &--small {
+    min-width: 245px;
+  }
+
+  &--big {
+    width: 100%;
+  }
+
   &__input {
+    display: block;
+    width: 100%;
     min-height: 162px;
     padding: 12px 18px;
     color: var(--black);