@cloud-ru/ds-ai-queue 1.0.0

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@cloud-ru/ds-ai-queue",
+  "version": "1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloud-ru-tech/snack-v2.git",
+    "directory": "packages/ai-queue"
+  },
+  "homepage": "https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/ai-queue",
+  "license": "Apache-2.0",
+  "author": "Артем Сауляк <avsaulyak@cloud.ru>",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "@cloud-ru/ds-ai-button-chevron": "^1.0.0",
+    "@cloud-ru/ds-icons": "^1.0.0",
+    "@cloud-ru/ds-utils": "^1.0.0",
+    "@cloud-ru/ds-loader": "^1.0.0",
+    "@cloud-ru/ds-scroll": "^1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/AiQueue.tsx

@@ -0,0 +1,84 @@
+import { AiButtonChevron } from '@cloud-ru/ds-ai-button-chevron';
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { ReactElement, useMemo } from 'react';
+
+import { AiQueueStepStatus } from './AiQueueStepStatus';
+import { DEFAULT_LABELS, TEST_IDS } from './constants';
+import styles from './styles.module.scss';
+import { AiQueueProps } from './types';
+import { calculateSummary, resolveStepState } from './utils';
+
+export function AiQueue({
+  className,
+  steps = [],
+  summary,
+  labels,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  'data-test-id': dataTestId = TEST_IDS.root,
+  ...rest
+}: AiQueueProps): ReactElement {
+  const [open, setOpen] = useUncontrolledProp(openProp, defaultOpen, onOpenChange);
+
+  const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+  const derivedSummary = useMemo(() => calculateSummary(steps), [steps]);
+  const total = summary?.total ?? derivedSummary.total;
+  const planned = summary?.planned ?? derivedSummary.planned;
+  const progress = summary?.progress ?? derivedSummary.progress;
+  const done = summary?.done ?? derivedSummary.done;
+
+  return (
+    <div {...rest} className={cn(styles.root, className)} data-open={open || undefined} data-test-id={dataTestId}>
+      <button
+        type='button'
+        className={styles.trigger}
+        aria-expanded={open}
+        data-test-id={TEST_IDS.trigger}
+        onClick={() => setOpen(!open)}
+      >
+        <span className={styles.summary} data-test-id={TEST_IDS.summary}>
+          <span>{total}</span>
+          <span>{mergedLabels.tasks}</span>
+          <span>(</span>
+          <span>{planned}</span>
+          <span>{mergedLabels.planned}</span>
+          <span>/</span>
+          <span>{progress}</span>
+          <span>{mergedLabels.inProgress}</span>
+          <span>/</span>
+          <span>{done}</span>
+          <span>{mergedLabels.done}</span>
+          <span>)</span>
+        </span>
+        <AiButtonChevron opened={open} interactive={false} className={styles.chevron} />
+      </button>
+
+      {open && steps.length > 0 && (
+        <Scroll size='s' barHideStrategy='leave' className={styles.content} data-test-id={TEST_IDS.content}>
+          <div className={styles.steps}>
+            {steps.map((step, index) => {
+              const state = resolveStepState(step.state);
+
+              return (
+                <div
+                  key={step.id ?? `${index}-${step.label}`}
+                  className={styles.step}
+                  data-state={state}
+                  data-test-id={`${TEST_IDS.step}-${index}`}
+                >
+                  <span className={styles.stepStatus} aria-hidden>
+                    <AiQueueStepStatus state={state} />
+                  </span>
+                  <span className={styles.stepLabel}>{step.label}</span>
+                </div>
+              );
+            })}
+          </div>
+        </Scroll>
+      )}
+    </div>
+  );
+}

package/src/AiQueueStepStatus.tsx

@@ -0,0 +1,27 @@
+import { CheckSVG, CrossSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Sun, SUN_SIZE } from '@cloud-ru/ds-loader';
+import cn from 'classnames';
+import { ReactElement } from 'react';
+
+import { AI_QUEUE_STEP_STATE } from './constants';
+import styles from './styles.module.scss';
+import { AiQueueStepState } from './types';
+
+const STEP_STATUS_ICON_SIZE = 16;
+
+type AiQueueStepStatusProps = {
+  state: AiQueueStepState;
+};
+
+export function AiQueueStepStatus({ state }: AiQueueStepStatusProps): ReactElement {
+  switch (state) {
+    case AI_QUEUE_STEP_STATE.Done:
+      return <CheckSVG size={STEP_STATUS_ICON_SIZE} className={cn(styles.stepStatusIcon, styles.stepStatusSuccess)} />;
+    case AI_QUEUE_STEP_STATE.Error:
+      return <CrossSVG size={STEP_STATUS_ICON_SIZE} className={cn(styles.stepStatusIcon, styles.stepStatusError)} />;
+    case AI_QUEUE_STEP_STATE.Progress:
+      return <Sun size={SUN_SIZE.XS} className={cn(styles.stepStatusIcon, styles.stepStatusProgress)} />;
+    default:
+      return <span className={styles.stepStatusPending} />;
+  }
+}

package/src/constants.ts

@@ -0,0 +1,23 @@
+import type { AiQueueLabels } from './types';
+
+export const AI_QUEUE_STEP_STATE = {
+  Planned: 'planned',
+  Progress: 'progress',
+  Done: 'done',
+  Error: 'error',
+} as const;
+
+export const DEFAULT_LABELS: AiQueueLabels = {
+  tasks: 'задач',
+  planned: 'запланировано',
+  inProgress: 'в процессе',
+  done: 'готово',
+};
+
+export const TEST_IDS = {
+  root: 'ai-queue',
+  trigger: 'ai-queue__trigger',
+  summary: 'ai-queue__summary',
+  content: 'ai-queue__content',
+  step: 'ai-queue__step',
+} as const;

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './AiQueue';
+export * from './constants';
+export * from './types';

package/src/styles.module.scss

@@ -0,0 +1,145 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.root {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  row-gap: 0;
+  align-items: stretch;
+
+  width: 100%;
+  padding-top: base.$sn-primitive-dimension-4;
+  border-radius: base.$sn-density-radius-2xs;
+}
+
+.root[data-open] {
+  row-gap: base.$sn-primitive-dimension-8;
+}
+
+.trigger {
+  @include base.composite-var(base.$base-styles, 'sn', 'thin', 'label', 's');
+
+  cursor: pointer;
+
+  display: flex;
+  column-gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: base.$sn-density-radius-2xs;
+
+  color: base.$sn-theme-color-available-version-textSecondary;
+  text-align: left;
+
+  appearance: none;
+  background: transparent;
+  outline: none;
+
+  &:focus-visible {
+    outline: base.$sn-primitive-strokeWeight-strokeSemiBold solid base.$sn-theme-color-primary-accent;
+    outline-offset: 0;
+  }
+}
+
+.summary {
+  overflow: hidden;
+  display: inline-flex;
+  column-gap: base.$sn-primitive-dimension-2;
+  align-items: center;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  flex-shrink: 0;
+  color: base.$sn-theme-color-available-version-textTertiary;
+}
+
+.content {
+  max-height: 140px;
+}
+
+.steps {
+  display: flex;
+  flex-direction: column;
+  row-gap: base.$sn-primitive-dimension-8;
+  align-items: stretch;
+
+  padding-right: base.$sn-primitive-dimension-8;
+}
+
+.step {
+  display: flex;
+  column-gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+
+  width: 100%;
+  min-width: 0;
+}
+
+.stepStatus {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: base.$sn-primitive-dimension-16;
+  height: base.$sn-primitive-dimension-16;
+}
+
+.stepStatusIcon {
+  width: 100%;
+  height: 100%;
+}
+
+.stepStatusSuccess {
+  color: base.$sn-theme-color-primary-accent;
+}
+
+.stepStatusError {
+  color: base.$sn-theme-color-red-accent;
+}
+
+.stepStatusProgress {
+  color: base.$sn-theme-color-blue-accent;
+}
+
+.stepStatusPending {
+  box-sizing: border-box;
+  width: base.$sn-primitive-dimension-8;
+  height: base.$sn-primitive-dimension-8;
+  border: base.$sn-primitive-strokeWeight-strokeRegular solid base.$sn-theme-color-neutral-decor;
+  border-radius: base.$sn-density-radius-2xs;
+}
+
+.stepLabel {
+  @include base.composite-var(base.$base-styles, 'sn', 'thin', 'label', 's');
+
+  overflow: hidden;
+  flex: 1 1 auto;
+
+  min-width: 0;
+
+  color: base.$sn-theme-color-available-version-textMain;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.step[data-state='progress'] .stepLabel {
+  @include base.composite-var(base.$base-styles, 'sn', 'regular', 'label', 's');
+}
+
+.step[data-state='error'] .stepLabel,
+.step[data-state='done'] .stepLabel {
+  color: base.$sn-theme-color-available-version-textTertiary;
+}
+
+.step[data-state='done'] .stepLabel {
+  text-decoration: line-through;
+}

package/src/types.ts

@@ -0,0 +1,47 @@
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import type { ComponentPropsWithoutRef } from 'react';
+
+import { AI_QUEUE_STEP_STATE } from './constants';
+
+export type AiQueueStepState = ValueOf<typeof AI_QUEUE_STEP_STATE>;
+
+export type AiQueueStep = {
+  id?: string | number;
+  label: string;
+  state?: AiQueueStepState;
+};
+
+export type AiQueueSummary = {
+  total?: number;
+  planned?: number;
+  progress?: number;
+  done?: number;
+};
+
+export type AiQueueLabels = {
+  tasks: string;
+  planned: string;
+  inProgress: string;
+  done: string;
+};
+
+export type AiQueueOwnProps = {
+  /** Шаги очереди. */
+  steps?: AiQueueStep[];
+  /** Принудительные счётчики в заголовке; если не заданы, считаются по `steps`. */
+  summary?: AiQueueSummary;
+  /** Контролируемое состояние раскрытия. */
+  open?: boolean;
+  /** Начальное состояние раскрытия в uncontrolled-режиме. */
+  defaultOpen?: boolean;
+  /** Коллбек изменения раскрытия. */
+  onOpenChange?: (open: boolean) => void;
+  /** Тексты счётчика в заголовке. */
+  labels?: Partial<AiQueueLabels>;
+  /** Дополнительный CSS-класс корня. */
+  className?: string;
+};
+
+export type AiQueueProps = WithSupportProps<
+  AiQueueOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AiQueueOwnProps | 'children'>
+>;

package/src/utils.ts

@@ -0,0 +1,33 @@
+import { AI_QUEUE_STEP_STATE } from './constants';
+import { AiQueueStep, AiQueueSummary } from './types';
+
+export function resolveStepState(state?: AiQueueStep['state']) {
+  return state ?? AI_QUEUE_STEP_STATE.Planned;
+}
+
+export function calculateSummary(steps: AiQueueStep[]): Required<AiQueueSummary> {
+  return steps.reduce<Required<AiQueueSummary>>(
+    (acc, step) => {
+      const state = resolveStepState(step.state);
+
+      acc.total += 1;
+      if (state === AI_QUEUE_STEP_STATE.Planned) {
+        acc.planned += 1;
+      }
+      if (state === AI_QUEUE_STEP_STATE.Progress) {
+        acc.progress += 1;
+      }
+      if (state === AI_QUEUE_STEP_STATE.Done) {
+        acc.done += 1;
+      }
+
+      return acc;
+    },
+    {
+      total: 0,
+      planned: 0,
+      progress: 0,
+      done: 0,
+    },
+  );
+}