@cloud-ru/ds-toggles 1.0.0

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

@@ -0,0 +1,250 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/toggles.module' as toggles;
+@use '@cloud-ru/ds-materials' as m;
+
+$sizes: 'xs', 's';
+$switchAnimationDuration: 0.1s;
+$iconRevealEasing: cubic-bezier(0.33, 1, 0.68, 1);
+
+.spinner {
+  // По макету спиннер шире ползунка (24 на surface 16) и выходит за его границы,
+  // поэтому flex-контейнер не должен его ужимать.
+  flex-shrink: 0;
+}
+
+.icon {
+  pointer-events: none;
+
+  position: absolute;
+  transform: scale(0.72);
+
+  opacity: 0;
+
+  transition:
+    opacity $switchAnimationDuration $iconRevealEasing,
+    transform $switchAnimationDuration $iconRevealEasing,
+    color $switchAnimationDuration linear;
+}
+
+.surface[data-checked="true"]:not([data-loading="true"]) .icon {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.inputPrivate {
+  cursor: pointer;
+
+  position: absolute;
+  inset: 0;
+
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  opacity: 0;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.backgroundStateLayer {
+  visibility: initial;
+}
+
+.flag {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transition: left $switchAnimationDuration linear;
+}
+
+.framing {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+
+  box-sizing: border-box;
+
+  outline-style: solid;
+
+  transition:
+    background-color $switchAnimationDuration linear,
+    outline-color $switchAnimationDuration linear;
+
+  &[data-checked="false"] {
+    background-color: base.$sn-theme-color-neutral-accent;
+    outline-color: base.$sn-theme-color-neutral-accent;
+  }
+
+  &[data-checked="true"] {
+    &[data-disabled="false"] {
+      background-color: base.$sn-theme-color-primary-accent;
+      outline-color: base.$sn-theme-color-primary-accent;
+    }
+
+    &[data-disabled="true"] {
+      background-color: base.$sn-theme-color-neutral-accent;
+      outline-color: base.$sn-theme-color-neutral-accent;
+    }
+  }
+
+  &[data-disabled="true"] {
+    opacity: base.$sn-theme-effect-opacity-disabled;
+  }
+}
+
+.container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.surface {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+
+  transition:
+    width $switchAnimationDuration linear,
+    height $switchAnimationDuration linear,
+    background-color $switchAnimationDuration linear,
+    color $switchAnimationDuration linear;
+
+  &[data-checked="false"] {
+    &[data-loading="false"] {
+      // Ползунок лежит на дорожке `neutral/accent`, поэтому берёт парный `neutral/onAccent`.
+      background-color: base.$sn-theme-color-neutral-onAccent;
+    }
+
+    &[data-disabled="false"][data-loading="true"] {
+      // Спиннер лежит прямо на дорожке `neutral/accent` — берёт парный `neutral/onAccent`.
+      color: base.$sn-theme-color-neutral-onAccent;
+    }
+  }
+
+  &[data-checked="true"] {
+    &[data-loading="false"] {
+      // Кружок лежит на дорожке `primary/accent`, поэтому и цвет берётся из той же
+      // пары — `primary/onAccent` (#fbfffc), а не нейтральный белый.
+      background-color: base.$sn-theme-color-primary-onAccent;
+
+      &[data-disabled="false"] {
+        color: base.$sn-theme-color-primary-accent;
+      }
+
+      &[data-disabled="true"] {
+        color: base.$sn-theme-color-neutral-accent;
+      }
+    }
+
+    &[data-loading="true"] {
+      color: base.$sn-theme-color-primary-onAccent;
+    }
+  }
+}
+
+.root {
+  position: relative;
+
+  display: inline-flex;
+  flex-direction: row;
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+
+  vertical-align: middle;
+
+  // Sizes
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .container {
+        @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'switch', 'container');
+      }
+
+      .framing {
+        // Pseudo-border
+        $offsetWidth: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'switch', 'framing', 'border-width');
+
+        width: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'switch', 'framing', 'min-width');
+        height: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'switch', 'framing', 'min-height');
+        border-radius: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'switch', 'framing', 'border-radius');
+
+        outline-width: $offsetWidth;
+        outline-offset: calc(0px - $offsetWidth);
+      }
+
+      .flag {
+        @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'switch', 'framing', 'flag');
+      }
+
+      .framing[data-checked="true"] .flag {
+        $flagTrackWidth: base.simple-var(
+          toggles.$toggles,
+          'anatomy',
+          'size',
+          $size,
+          'switch',
+          'framing',
+          'flag',
+          'min-width'
+        );
+
+        left: calc(100% - #{$flagTrackWidth});
+      }
+
+      &[data-focusvisible="true"] {
+        .container {
+          // Real offset
+          $offsetWidth: base.$sn-primitive-strokeWeight-strokeSemiBold;
+
+          @if ($size == 'xs') {
+            outline-offset: $offsetWidth;
+          }
+
+          border-radius: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'switch', 'framing', 'border-radius');
+          outline: $offsetWidth solid base.$sn-theme-color-available-complementary;
+        }
+      }
+
+      &[data-checked="false"] {
+        .surface {
+          @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'switch', 'framing', 'flag', 'surface', 'checkedFalse');
+        }
+      }
+
+      &[data-checked="true"] {
+        .surface {
+          @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'switch', 'framing', 'flag', 'surface', 'checkedTrue');
+        }
+      }
+    }
+  }
+
+  // States management
+  &[data-loading="false"][data-disabled="false"] {
+    .container {
+      @include m.has-state-layer-as-child(#{backgroundStateLayer});
+    }
+  }
+
+  &[data-loading="true"],
+  &[data-disabled="true"] {
+    .backgroundStateLayer {
+      visibility: hidden;
+    }
+  }
+}

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,71 @@
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import { PropsWithChildren, useCallback } from 'react';
+
+import { SELECTION_MODE } from '../../constants';
+import { ToggleGroupContext } from '../../context';
+
+export type ToggleGroupProps = PropsWithChildren<
+  | {
+      /** Начальное состояние */
+      defaultValue?: string;
+      /** Controlled состояние */
+      value?: string;
+      /** Controlled обработчик измения состояния */
+      onChange?(value: (string | undefined) | string): void;
+      /** Режим выбора */
+      selectionMode?: typeof SELECTION_MODE.Single;
+    }
+  | {
+      /** Начальное состояние */
+      defaultValue?: string[];
+      /** Controlled состояние */
+      value?: string[];
+      /** Controlled обработчик измения состояния */
+      onChange?(value: (string[] | undefined) | string[]): void;
+      /** Режим выбора */
+      selectionMode?: typeof SELECTION_MODE.Multiple;
+    }
+>;
+
+export function ToggleGroup({
+  children,
+  value: valueProp,
+  onChange: onChangeProp,
+  selectionMode = SELECTION_MODE.Single,
+  defaultValue,
+}: ToggleGroupProps) {
+  const [value, setValue] = useUncontrolledProp<string | string[] | undefined>(valueProp, defaultValue, cb => {
+    onChangeProp?.(cb(value));
+  });
+
+  const onChange = useCallback(
+    (newValue: string) => {
+      if (selectionMode === SELECTION_MODE.Single) {
+        return setValue((oldValue: string | undefined) => {
+          if (newValue !== oldValue) {
+            return newValue;
+          }
+
+          return undefined;
+        });
+      }
+
+      return setValue((oldValues: string[] | undefined = []) => {
+        if (Array.isArray(oldValues)) {
+          if (oldValues.includes(newValue)) {
+            return oldValues.filter(oldValue => oldValue !== newValue);
+          }
+
+          return oldValues.concat(newValue);
+        }
+
+        return undefined;
+      });
+    },
+    [selectionMode, setValue],
+  );
+
+  return (
+    <ToggleGroupContext.Provider value={{ value, onChange, selectionMode }}>{children}</ToggleGroupContext.Provider>
+  );
+}

package/src/components/ToggleGroup/hooks.ts

@@ -0,0 +1,34 @@
+import { useCallback, useMemo } from 'react';
+
+import { SELECTION_MODE } from '../../constants';
+import { useToggleGroupContext } from '../../context';
+
+type UseToggleGroupProps = {
+  value: string;
+};
+
+export function useToggleGroup({ value: itemValue }: UseToggleGroupProps) {
+  const { value, onChange, selectionMode } = useToggleGroupContext();
+
+  const isChecked = useMemo(() => {
+    if (typeof value === 'string') {
+      return value === itemValue;
+    }
+
+    if (Array.isArray(value)) {
+      return value.includes(itemValue);
+    }
+
+    return false;
+  }, [value, itemValue]);
+
+  const handleClick = useCallback(() => {
+    onChange?.(itemValue);
+  }, [itemValue, onChange]);
+
+  return {
+    isChecked,
+    handleClick,
+    multipleSelection: selectionMode === SELECTION_MODE.Multiple,
+  };
+}

package/src/components/ToggleGroup/index.ts

@@ -0,0 +1,2 @@
+export * from './ToggleGroup';
+export * from './hooks';

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from './Radio';
+export * from './Checkbox';
+export * from './Switch';
+export * from './Favourite';
+export * from './ToggleGroup';

package/src/constants.ts

@@ -0,0 +1,27 @@
+export const MODE = {
+  Checkbox: 'checkbox',
+  Radio: 'radio',
+} as const;
+
+export const SIZE = {
+  XS: 'xs',
+  S: 's',
+} as const;
+
+export const FAVOURITE_ICON = {
+  Star: 'star',
+  Heart: 'heart',
+} as const;
+
+export const SELECTION_MODE = {
+  Single: 'single',
+  Multiple: 'multiple',
+} as const;
+
+/**
+ * Суффикс `data-test-id` нативного `<input>` внутри Checkbox/Radio/Switch/Favourite.
+ * Если потребитель передаёт `data-test-id='foo'` на корень, нативный input получает
+ * `data-test-id='foo-native-input'`. Константа публичная — потребитель и e2e helpers
+ * берут один и тот же суффикс из API пакета.
+ */
+export const NATIVE_INPUT_SUFFIX = '-native-input';

package/src/context.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+import { SELECTION_MODE } from './constants';
+import { SelectionMode } from './types';
+
+type ToggleGroupContextType = {
+  value: string | undefined | string[];
+  onChange: ((id: string) => void) | undefined;
+  selectionMode: SelectionMode;
+};
+
+export const ToggleGroupContext = createContext<ToggleGroupContextType>({
+  value: undefined,
+  onChange: undefined,
+  selectionMode: SELECTION_MODE.Single,
+});
+
+export const useToggleGroupContext = () => useContext(ToggleGroupContext);

package/src/index.ts

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

package/src/types.ts

@@ -0,0 +1,80 @@
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
+
+import { FAVOURITE_ICON, MODE, SELECTION_MODE, SIZE } from './constants';
+
+export type DataAttributes = Record<`data-${string}`, string | boolean>;
+
+export type Size = ValueOf<typeof SIZE>;
+export type Mode = ValueOf<typeof MODE>;
+export type SelectionMode = ValueOf<typeof SELECTION_MODE>;
+export type FavouriteIcon = ValueOf<typeof FAVOURITE_ICON>;
+
+export type InputVisualState = {
+  focusVisible: boolean;
+  disabled: boolean;
+  checked: boolean;
+  hover: boolean;
+  size: Size;
+};
+
+type TogglePropsBase = WithSupportProps<{
+  /** Размер */
+  size?: Size;
+  /** Колбек рендера компонента */
+  render: (visualState: InputVisualState) => ReactNode;
+  /** HTML-аттрибут id */
+  id?: string;
+  /** Режим работы */
+  mode?: Mode;
+  /** HTML-аттрибут value */
+  value?: string;
+  /** HTML-аттрибут name */
+  name?: string;
+  /** HTML-аттрибут tab-index */
+  tabIndex?: number;
+  /** HTML-аттрибут autofocus */
+  autofocus?: boolean;
+  /** HTML-аттрибут checked */
+  checked?: boolean;
+  /** HTML-аттрибут checked по-умолчанию */
+  defaultChecked?: boolean;
+  /** HTML-аттрибут disabled */
+  disabled?: boolean;
+  /** Колбек смены значения */
+  onChange?: (checked: boolean) => void;
+  /** Колбек клика */
+  onClick?: MouseEventHandler<HTMLInputElement>;
+  /** Колбек потери фокуса */
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  /** Колбек приобретения фокуса */
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  /** Колбек нажатия клавиши клавиатуры */
+  onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
+  /** CSS-класс */
+  className?: string;
+}>;
+
+export type ToggleProps = WithSupportProps<
+  Pick<
+    TogglePropsBase,
+    | 'id'
+    | 'name'
+    | 'value'
+    | 'tabIndex'
+    | 'autofocus'
+    | 'checked'
+    | 'defaultChecked'
+    | 'disabled'
+    | 'onChange'
+    | 'onClick'
+    | 'onBlur'
+    | 'onFocus'
+    | 'className'
+    | 'size'
+  > & {
+    inputRef?: RefObject<HTMLInputElement>;
+    /** Состояние загрузки */
+    loading?: boolean;
+  }
+>;

package/src/utils.ts

@@ -0,0 +1,21 @@
+import { SIZE } from './constants';
+import { DataAttributes, Size } from './types';
+
+export function getVisualStateAttributes(state: Record<string, string | boolean>) {
+  return Object.entries(state).reduce<DataAttributes>(function (result, [name, value]) {
+    result[`data-${name.toLowerCase()}`] = value;
+    return result;
+  }, {});
+}
+
+export function getIconSize(size?: Size) {
+  switch (size) {
+    case SIZE.XS: {
+      return 16;
+    }
+    case SIZE.S:
+    default: {
+      return 24;
+    }
+  }
+}