Plasma UI typecov

packages/plasma-ui/package.json

@@ -60,7 +60,8 @@
  "sb": "6.3.8",
  "styled-components": "5.3.1",
  "ts-jest": "27.0.5",
- "typescript": "3.9.10"
+ "typescript": "3.9.10",
+ "typescript-coverage-report": "0.6.4"
  },
  "publishConfig": {
  "access": "public"
@@ -82,24 +83,19 @@
  "storybook:build:docs": "DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs",
  "storybook:extract": "sb extract build-sb ./build-sb/stories.json",
  "test": "BABEL_ENV=cjs jest",
- "test:watch": "BABEL_ENV=cjs jest --watch"
+ "test:watch": "BABEL_ENV=cjs jest --watch",
+ "typescript-coverage": "npx typescript-coverage-report"
+ },
+ "typeCoverage": {
+ "ignoreFiles": ["src/**/*component-test.tsx", "src/**/*stories.tsx"],
+ "atLeast": 100
  },
  "jest": {
  "moduleNameMapper": {
  "^styled-components": "<rootDir>/node_modules/styled-components"
  }
  },
- "files": [
- "components",
- "hocs",
- "hooks",
- "mixins",
- "types",
- "utils",
- "index.d.ts",
- "index.js",
- "es"
- ],
+ "files": ["components", "hocs", "hooks", "mixins", "types", "utils", "index.d.ts", "index.js", "es"],
  "contributors": [
  "Vasiliy Loginevskiy",
  "Антонов Игорь Александрович",

packages/plasma-ui/src/components/Device/DeviceDetection.tsx

@@ -37,6 +37,8 @@ export interface DeviceThemeProps {
  detectDeviceCallback?: () => DeviceKind;
 }
 
+export type ThemeProviderValue = DeviceThemeProps & { deviceScale: number };
+
 /**
  * Провайдер обязателен для использования, необходимо обернуть в него все приложение.
  *

packages/plasma-ui/src/components/Grid/Col.tsx

@@ -9,6 +9,8 @@ import {
  gridColumns,
 } from '@sberdevices/plasma-core';
 
+import { ThemeProviderValue } from '../Device/DeviceDetection';
+
 export interface ColProps extends BaseProps {
  /**
  * Тип ячейки
@@ -27,7 +29,7 @@ export interface ColProps extends BaseProps {
  * С примером использования можно ознакомиться в документации по [каруселям](/?path=/docs/controls-carousel--basic).
  */
 export const Col = styled(BaseCol)<ColProps>`
- ${({ type = 'rel', theme, size, offset, ...props }) =>
+ ${({ type = 'rel', theme, size, offset, ...props }: { theme: ThemeProviderValue } & ColProps) =>
  gridSizes.map((breakpoint) => {
  const bpSize = sizes[breakpoint];
  const bpOffset = offsets[breakpoint];

packages/plasma-ui/src/components/Grid/Container.tsx

@@ -11,6 +11,8 @@ import {
  useIsomorphicLayoutEffect,
 } from '@sberdevices/plasma-core';
 
+import { ThemeProviderValue } from '../Device/DeviceDetection';
+
 interface StyledContainerProps {
  $width: number;
 }
@@ -19,7 +21,7 @@ const sidesCount = 2;
 const htmlFontSizePx = 16;
 
 const StyledContainer = styled(BaseContainer)<StyledContainerProps>`
- ${({ $width, theme }) =>
+ ${({ $width, theme }: { $width: number; theme: ThemeProviderValue }) =>
  gridSizes.map((breakpoint) => {
  const containerWidth = $width;
  const margins =

packages/plasma-ui/src/components/Header/HeaderArrow.tsx

@@ -5,6 +5,7 @@ import type { PickOptional } from '@sberdevices/plasma-core';
 import { mediaQuery } from '@sberdevices/plasma-core';
 
 import { Button, ButtonProps } from '../Button';
+import { ThemeProviderValue } from '../Device/DeviceDetection';
 
 export interface HeaderArrowProps
  extends PickOptional<ButtonProps, 'as' | 'size' | 'scaleOnInteraction' | 'disabled'>,
@@ -25,7 +26,7 @@ const StyledButton = styled(Button)`
  right: 100%;
  margin-right: 0.5rem;
 
- ${({ theme }) =>
+ ${({ theme }: { theme: ThemeProviderValue }) =>
  mediaQuery(
  'S',
  theme.deviceScale,

packages/plasma-ui/src/components/Header/HeaderRoot.tsx

@@ -3,6 +3,8 @@ import styled, { css } from 'styled-components';
 import { mediaQuery } from '@sberdevices/plasma-core';
 import Color from 'color';
 
+import { ThemeProviderValue } from '../Device/DeviceDetection';
+
 const sizes = {
  sberBox: css`
  --plasma-header-height: 2.25rem; /* 36px */
@@ -34,7 +36,7 @@ const StyledHeaderRoot = styled.header<StyledHeaderRootProps>`
  padding-top: var(--plasma-header-pt);
  padding-bottom: var(--plasma-header-pb);
 
- ${({ $size, theme }) =>
+ ${({ $size, theme }: { theme: ThemeProviderValue; $size?: keyof typeof sizes }) =>
  $size
  ? sizes[$size] // Выберет указанный размер или разложит размеры по брейкпоинтам
  : css`

packages/plasma-ui/src/components/Header/HeaderSubtitle.tsx

@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components';
 import { mediaQuery } from '@sberdevices/plasma-core';
 
 import { TextBoxSubTitle } from '../TextBox';
+import { ThemeProviderValue } from '../Device/DeviceDetection';
 
 /**
  * Компонент для размещения подзаголовка.
@@ -13,7 +14,7 @@ export const HeaderSubtitle = styled(TextBoxSubTitle)`
  overflow: hidden;
  text-overflow: ellipsis;
 
- ${({ theme }) => css`
+ ${({ theme }: { theme: ThemeProviderValue }) => css`
  ${mediaQuery(
  'S',
  theme.deviceScale,

packages/plasma-ui/src/components/Header/HeaderTitle.tsx

@@ -3,6 +3,7 @@ import { body2 } from '@sberdevices/plasma-tokens';
 import { mediaQuery } from '@sberdevices/plasma-core';
 
 import { Headline4 } from '../Typography';
+import { ThemeProviderValue } from '../Device/DeviceDetection';
 
 /**
  * Компонент для размещения заголовка.
@@ -14,10 +15,10 @@ export const HeaderTitle = styled(Headline4)`
  overflow: hidden;
  text-overflow: ellipsis;
 
- ${(props) =>
+ ${({ theme }: { theme: ThemeProviderValue }) =>
  mediaQuery(
  'S',
- props.theme.deviceScale,
+ theme.deviceScale,
  )(css`
  ${body2};
  `)}

packages/plasma-ui/src/components/Pickers/DatePicker.tsx

@@ -4,7 +4,7 @@ import { useIsomorphicLayoutEffect } from '@sberdevices/plasma-core';
 
 import { SimpleDatePicker, SimpleDatePickerProps } from './SimpleDatePicker';
 import { getDateValues, getNormalizeValues, getTimeValues, isChanged } from './utils';
-import { DateType } from './types';
+import { DateType, PickerItem, PickerItemValue } from './types';
 
 const defaultOptions = {
  years: true,
@@ -160,7 +160,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
  );
 
  const onYearChange = React.useCallback(
- ({ value: y }) => {
+ ({ value: y }: PickerItemValue) => {
  setState(([, m, d]) => {
  const nextMonth = getNextMonth(m, y);
  const nextDay = getNextDay(d, nextMonth, y);
@@ -171,7 +171,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
  [getNextDay, getNextMonth],
  );
  const onMonthChange = React.useCallback(
- ({ value: m }) => {
+ ({ value: m }: PickerItemValue) => {
  setState(([y, , d]) => {
  const nextDay = getNextDay(d, m, y);
 
@@ -180,7 +180,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
  },
  [getNextDay],
  );
- const onDayChange = React.useCallback(({ value: d }) => setState(([y, m]) => [y, m, d]), []);
+ const onDayChange = React.useCallback(({ value: d }: PickerItemValue) => setState(([y, m]) => [y, m, d]), []);
 
  /**
  * При очередном прогоне, если значения year, month, day изменились,

packages/plasma-ui/src/components/Pickers/TimePicker.tsx

@@ -5,7 +5,7 @@ import { useIsomorphicLayoutEffect } from '@sberdevices/plasma-core';
 import { PickerDots } from './PickerDots';
 import { SimpleTimePicker, SimpleTimePickerProps } from './SimpleTimePicker';
 import { getNormalizeValues, getTimeValues, isChanged } from './utils';
-import type { TimeType } from './types';
+import type { PickerItem, TimeType, PickerItemValue } from './types';
 
 const StyledWrapper = styled.div`
  display: flex;
@@ -195,9 +195,9 @@ export const TimePicker: React.FC<TimePickerProps> = ({
  ];
  }, [minHours, maxHours, minMinutes, maxMinutes, minSeconds, maxSeconds, hours, minutes, step]);
 
- const onHoursChange = React.useCallback(({ value: h }) => setState(([, m, s]) => [h, m, s]), []);
- const onMinutesChange = React.useCallback(({ value: m }) => setState(([h, , s]) => [h, m, s]), []);
- const onSecondsChange = React.useCallback(({ value: s }) => setState(([h, m]) => [h, m, s]), []);
+ const onHoursChange = React.useCallback(({ value: h }: PickerItemValue) => setState(([, m, s]) => [h, m, s]), []);
+ const onMinutesChange = React.useCallback(({ value: m }: PickerItemValue) => setState(([h, , s]) => [h, m, s]), []);
+ const onSecondsChange = React.useCallback(({ value: s }: PickerItemValue) => setState(([h, m]) => [h, m, s]), []);
 
  // При очередном прогоне, если значения hours, minutes, seconds изменились,
  // необходимо вызвать событие изменения, создав новый экземпляр Date

packages/plasma-ui/src/components/Pickers/types.ts

@@ -12,6 +12,10 @@ export type PickerItem = {
  isVirtual?: boolean;
 };
 
+export type PickerItemValue = {
+ value: number;
+};
+
 export const DEFAULT_PICKER_SIZE: PickerSize = 's';
 export const DEFAULT_VISIBLE_ITEMS: PickerVisibleItems = 5;
 

packages/plasma-ui/src/components/Slider/Double.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DraggableData } from 'react-draggable';
 
 import { SliderBase } from './SliderBase';
 import { Handle } from './Handle';
@@ -65,15 +66,15 @@ export const Slider: React.FC<SliderProps> = ({ min, max, value, disabled, onCha
  }));
  }, [value, state.stepSize, min]);
 
- const setStepSize = React.useCallback((newStepSize) => {
+ const setStepSize = React.useCallback((newStepSize: number) => {
  setState((prevState) => ({
  ...prevState,
  stepSize: newStepSize,
  }));
  }, []);
 
  const onFirstHandleChange = React.useCallback(
- (handleValue, data) => {
+ (handleValue: number, data: DraggableData) => {
  if (secondHandleRef?.current) {
  const newHandleXPosition = data.x;
  const secondHandleXPosition = getXCenterHandle(secondHandleRef.current);
@@ -95,7 +96,7 @@ export const Slider: React.FC<SliderProps> = ({ min, max, value, disabled, onCha
  );
 
  const onFirstHandleChangeCommited = React.useCallback(
- (handleValue, data) => {
+ (handleValue: number, data: DraggableData) => {
  onChangeCommitted([handleValue, value[1]]);
 
  setState((prevState) => ({
@@ -108,7 +109,7 @@ export const Slider: React.FC<SliderProps> = ({ min, max, value, disabled, onCha
  );
 
  const onSecondHandleChange = React.useCallback(
- (handleValue, data) => {
+ (handleValue: number, data: DraggableData) => {
  if (firstHandleRef?.current) {
  const firstXHandleXPosition = getXCenterHandle(firstHandleRef.current);
 
@@ -131,7 +132,7 @@ export const Slider: React.FC<SliderProps> = ({ min, max, value, disabled, onCha
  );
 
  const onSecondHandleChangeCommited = React.useCallback(
- (handleValue, data) => {
+ (handleValue: number, data: DraggableData) => {
  onChangeCommitted([value[0], handleValue]);
  setState((prevState) => ({
  ...prevState,

packages/plasma-ui/src/components/Slider/Handle.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import Draggable, { DraggableData } from 'react-draggable';
+import Draggable, { DraggableData, DraggableEventHandler } from 'react-draggable';
 import { surfaceLiquid03, white } from '@sberdevices/plasma-tokens';
 
 import { handleDiameter, handleBorderWidth } from './SliderBase';
@@ -63,7 +63,7 @@ export const Handle = React.forwardRef<HTMLDivElement, HandleProps>(
  ({ stepSize, onChangeCommitted, onChange, xPosition, min, max, bounds = [], zIndex, disabled, side }, ref) => {
  const lastOnChangeValue = React.useRef<number | null>(null);
 
- const onDrag = React.useCallback(
+ const onDrag = React.useCallback<DraggableEventHandler>(
  (_, data) => {
  const newHandleXPosition = data.lastX;
 
@@ -78,7 +78,7 @@ export const Handle = React.forwardRef<HTMLDivElement, HandleProps>(
  [onChange, stepSize, min, max],
  );
 
- const onStop = React.useCallback(
+ const onStop = React.useCallback<DraggableEventHandler>(
  (_, data) => {
  const newHandleXPosition = data.lastX;
  const newValue = getValue(newHandleXPosition, stepSize, min, max);

packages/plasma-ui/src/components/Slider/Single.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DraggableData } from 'react-draggable';
 
 import { SliderBase } from './SliderBase';
 import { Handle } from './Handle';
@@ -48,15 +49,15 @@ export const Slider: React.FC<SliderProps> = ({ min, max, value, disabled, onCha
  }));
  }, [value, state.stepSize, min]);
 
- const setStepSize = React.useCallback((newStepSize) => {
+ const setStepSize = React.useCallback((newStepSize: number) => {
  setState((prevState) => ({
  ...prevState,
  stepSize: newStepSize,
  }));
  }, []);
 
  const onHandleChange = React.useCallback(
- (handleValue, data) => {
+ (handleValue: number, data: DraggableData) => {
  const newHandleXPosition = data.x;
 
  setState((prevState) => ({
@@ -72,7 +73,7 @@ export const Slider: React.FC<SliderProps> = ({ min, max, value, disabled, onCha
  );
 
  const onHandleChangeCommited = React.useCallback(
- (handleValue, data) => {
+ (handleValue: number, data: { lastX: number }) => {
  onChangeCommitted(handleValue);
  setState((prevState) => ({
  ...prevState,

packages/plasma-ui/src/components/Slider/SliderBase.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import styled, { css, ThemeContext } from 'styled-components';
 import { surfaceLiquid03, buttonAccent, scalingPixelBasis, sberPortalScale } from '@sberdevices/plasma-tokens';
 
+import { ThemeProviderValue } from '../Device/DeviceDetection';
+
 export const handleDiameter = 1.5;
 export const handleBorderWidth = 0.0625;
 export const railHeight = 0.25;
@@ -59,7 +61,7 @@ export const SliderBase: React.FC<SliderProps> = ({
  disabled,
 }) => {
  const ref = React.useRef<HTMLDivElement | null>(null);
- const theme = React.useContext(ThemeContext);
+ const theme = React.useContext<ThemeProviderValue>(ThemeContext);
 
  React.useLayoutEffect(() => {
  const resizeHandler = () => {

packages/plasma-ui/src/components/Stepper/Stepper.tsx

@@ -87,7 +87,9 @@ export const Stepper: React.FC<StepperProps> = ({
  const { showRemove: remover, onRemove, ...rest } = props as RemoverProps;
  const onLessClick = React.useCallback(() => onChange(value - step), [value, step, onChange]);
  const onMoreClick = React.useCallback(() => onChange(value + step), [value, step, onChange]);
- const onRemoveClick = React.useCallback((e) => onRemove?.(e), [onRemove]);
+ const onRemoveClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>((e) => onRemove?.(e), [
+ onRemove,
+ ]);
  const isMin = value <= min;
  const isMax = value >= max;
  const lessDisabled = isMin || value - step < min;

packages/plasma-ui/src/components/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useMemo } from 'react';
-import type { TabsProps as BaseProps } from '@sberdevices/plasma-core';
+import type { TabItemProps, TabsProps as BaseProps } from '@sberdevices/plasma-core';
 
 import { TabsView, TabsViewProps } from './TabsView';
 import { TabItem } from './TabItem';
@@ -40,7 +40,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs({ childr
  const { index, ...rest } = props;
  const childrenArray = React.Children.toArray(children);
  const animatedChildren = childrenArray.map((child, i) => {
- if (React.isValidElement(child)) {
+ if (React.isValidElement<TabItemProps>(child)) {
  return <TabItem animated key={i} {...child.props} />;
  }
  return child;