@cloud-ru/ds-loader 1.0.0

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,41 @@
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+
+import { LOADER_SIZE } from '../constants';
+import { LoaderSize } from '../types';
+import { SPINNER_GEOMETRY, SPINNER_TRACK_OPACITY } from './constants';
+import styles from './styles.module.scss';
+import { buildQuarterArcPath } from './utils';
+
+export type SpinnerProps = WithSupportProps<{
+  /** Размер */
+  size?: LoaderSize;
+  /** CSS-класс */
+  className?: string;
+}>;
+
+/** Компонент спиннер */
+export function Spinner({ size = LOADER_SIZE.S, className, ...rest }: SpinnerProps) {
+  const { frame, ring, strokeWidth } = SPINNER_GEOMETRY[size];
+  const center = frame / 2;
+  const radius = ring / 2;
+
+  return (
+    <svg
+      viewBox={`0 0 ${frame} ${frame}`}
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={cn(styles.spinner, className)}
+      {...extractSupportProps(rest)}
+      data-size={size}
+    >
+      <circle opacity={SPINNER_TRACK_OPACITY} cx={center} cy={center} r={radius} strokeWidth={strokeWidth} />
+      <path
+        d={buildQuarterArcPath(center, radius)}
+        strokeWidth={strokeWidth}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+}

package/src/components/Spinner/constants.ts

@@ -0,0 +1,26 @@
+import { LOADER_SIZE } from '../constants';
+import { LoaderSize } from '../types';
+
+type SpinnerGeometry = {
+  /** Сторона квадратного кадра — `viewBox` иконки */
+  frame: number;
+  /** Диаметр кольца по центру обводки */
+  ring: number;
+  /** Толщина обводки кольца и дуги */
+  strokeWidth: number;
+};
+
+/**
+ * Геометрия кольца по размерам — снята с мастера Figma `loader/loaderSpinner`
+ * (страница `loader`, узел `2918:21302`).
+ */
+export const SPINNER_GEOMETRY: Record<LoaderSize, SpinnerGeometry> = {
+  [LOADER_SIZE['2XS']]: { frame: 8, ring: 6, strokeWidth: 0.5 },
+  [LOADER_SIZE.XS]: { frame: 16, ring: 9, strokeWidth: 1.25 },
+  [LOADER_SIZE.S]: { frame: 24, ring: 13, strokeWidth: 1.5 },
+  [LOADER_SIZE.M]: { frame: 32, ring: 20, strokeWidth: 2 },
+  [LOADER_SIZE.L]: { frame: 40, ring: 30, strokeWidth: 2.5 },
+};
+
+/** Прозрачность трека — кольца под вращающейся дугой */
+export const SPINNER_TRACK_OPACITY = 0.24;

package/src/components/Spinner/index.ts

@@ -0,0 +1 @@
+export * from './Spinner';

package/src/components/Spinner/styles.module.scss

@@ -0,0 +1,30 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+$sizes: '2xs', 'xs', 's', 'm', 'l';
+
+.spinner {
+  pointer-events: none;
+  stroke: currentcolor;
+  animation: spin 1s ease-in-out infinite;
+
+  & > g > path {
+    fill: currentcolor;
+  }
+
+  & > mask {
+    mask-type: alpha;
+  }
+
+  @each $size in $sizes {
+    &[data-size="#{$size}"] {
+      width: base.simple-var(base.$sn-density, 'size', 'icon', $size);
+      height: base.simple-var(base.$sn-density, 'size', 'icon', $size);
+    }
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/src/components/Spinner/utils.ts

@@ -0,0 +1,21 @@
+/** Отношение длины контрольного плеча к радиусу для четверти окружности, заданной кубической кривой Безье */
+const QUARTER_ARC_HANDLE_RATIO = 0.5522847498;
+
+function format(value: number): string {
+  return String(Number(value.toFixed(5)));
+}
+
+/**
+ * Путь четверти окружности — от левой точки кольца к верхней, против часовой стрелки.
+ * Так дуга спиннера повторяет `ToneAlpha1` из мастера Figma.
+ */
+export function buildQuarterArcPath(center: number, radius: number): string {
+  const handle = radius * QUARTER_ARC_HANDLE_RATIO;
+
+  const start = `${format(center - radius)} ${format(center)}`;
+  const firstControl = `${format(center - radius)} ${format(center - handle)}`;
+  const secondControl = `${format(center - handle)} ${format(center - radius)}`;
+  const end = `${format(center)} ${format(center - radius)}`;
+
+  return `M${start}C${firstControl} ${secondControl} ${end}`;
+}

package/src/components/Sun/Sun.tsx

@@ -0,0 +1,60 @@
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+
+import { LOADER_SIZE } from '../constants';
+import { SunSize } from '../types';
+import { SUN_STROKE_WIDTH } from './constants';
+import styles from './styles.module.scss';
+
+export type SunProps = WithSupportProps<{
+  /** Размер */
+  size?: SunSize;
+  /** CSS-класс */
+  className?: string;
+}>;
+
+/** Компонент спиннер */
+export function Sun({ size = LOADER_SIZE.S, className, ...rest }: SunProps) {
+  const strokeWidth = SUN_STROKE_WIDTH[size];
+
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      id='SunSVG'
+      className={cn(styles.sun, className)}
+      {...extractSupportProps(rest)}
+      data-size={size}
+    >
+      <path d='M12 4V7' strokeWidth={strokeWidth} strokeLinecap='round' strokeLinejoin='round' />
+      <path
+        d='M6.34302 6.34314L8.46434 8.46446'
+        strokeWidth={strokeWidth}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path d='M4 12L7 12' strokeWidth={strokeWidth} strokeLinecap='round' strokeLinejoin='round' />
+      <path
+        d='M6.34302 17.6569L8.46434 15.5355'
+        strokeWidth={strokeWidth}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path d='M12 17V20' strokeWidth={strokeWidth} strokeLinecap='round' strokeLinejoin='round' />
+      <path
+        d='M15.5354 15.5355L17.6567 17.6568'
+        strokeWidth={strokeWidth}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path d='M17 12L20 12' strokeWidth={strokeWidth} strokeLinecap='round' strokeLinejoin='round' />
+      <path
+        d='M15.5354 8.46448L17.6567 6.34316'
+        strokeWidth={strokeWidth}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+}

package/src/components/Sun/constants.ts

@@ -0,0 +1,25 @@
+import { SUN_SIZE } from '../constants';
+import { SunSize } from '../types';
+
+/**
+ * Толщина луча по размерам, в единицах `viewBox` (кадр 24 у всех размеров).
+ *
+ * Пути солнца нарисованы в кадре 24, а сам `<svg>` масштабируется CSS'ом до размера
+ * иконки — значит видимая толщина равна `strokeWidth × размер / 24`. Поэтому число
+ * здесь пересчитано от эталона Figma, а не взято из макета напрямую:
+ *
+ * | размер | иконка | эталон Figma | `strokeWidth` |
+ * |--------|--------|--------------|---------------|
+ * | `xs`   | 16     | 1.25         | 1.875         |
+ * | `s`    | 24     | 1.5          | 1.5           |
+ * | `m`    | 32     | 2            | 1.5           |
+ * | `l`    | 40     | 2.5          | 1.5           |
+ *
+ * Без этой карты толщина выводилась из масштаба и при `xs` давала 1.0 вместо 1.25.
+ */
+export const SUN_STROKE_WIDTH: Record<SunSize, number> = {
+  [SUN_SIZE.XS]: 1.875,
+  [SUN_SIZE.S]: 1.5,
+  [SUN_SIZE.M]: 1.5,
+  [SUN_SIZE.L]: 1.5,
+};

package/src/components/Sun/index.ts

@@ -0,0 +1 @@
+export * from './Sun';

package/src/components/Sun/styles.module.scss

@@ -0,0 +1,72 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+$sizes:  'xs', 's', 'm', 'l';
+
+.sun {
+  pointer-events: none;
+  fill: currentcolor;
+
+  @each $size in $sizes {
+    &[data-size="#{$size}"] {
+      width: base.simple-var(base.$sn-density, 'size', 'icon', $size);
+      height: base.simple-var(base.$sn-density, 'size', 'icon', $size);
+    }
+  }
+
+  & > path {
+    stroke: currentcolor;
+    animation-name: loading-wheel;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+
+    @for $i from 1 through 8 {
+      // Первый луч — верхний: у него нулевая задержка, поэтому в покое яркая
+      // голова стоит на нём, как в Figma. Порядок задержек не меняем, иначе
+      // перевернётся направление вращения.
+      &:nth-child(#{$i}) {
+        animation-duration: 1000ms;
+        animation-delay: #{-($i - 1) * 125}ms;
+      }
+    }
+  }
+}
+
+// Прозрачности восьми лучей из Figma: яркая голова и резкий обрыв, а не пологий
+// спад. Каждый шаг — 12.5% цикла, то есть один луч.
+@keyframes loading-wheel {
+  0% {
+    opacity: 1;
+  }
+
+  12.5% {
+    opacity: 0.48;
+  }
+
+  25% {
+    opacity: 0.4;
+  }
+
+  37.5% {
+    opacity: 0.32;
+  }
+
+  50% {
+    opacity: 0.24;
+  }
+
+  62.5% {
+    opacity: 0.16;
+  }
+
+  75% {
+    opacity: 0.08;
+  }
+
+  87.5% {
+    opacity: 0.04;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

package/src/components/constants.ts

@@ -0,0 +1,14 @@
+export const LOADER_SIZE = {
+  '2XS': '2xs',
+  XS: 'xs',
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
+
+export const SUN_SIZE = {
+  XS: 'xs',
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './constants';
+export * from './Spinner';
+export * from './Sun';
+export * from './types';

package/src/components/types.ts

@@ -0,0 +1,6 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+
+import { LOADER_SIZE, SUN_SIZE } from './constants';
+
+export type LoaderSize = ValueOf<typeof LOADER_SIZE>;
+export type SunSize = ValueOf<typeof SUN_SIZE>;

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';