@skbkontur/react-ui 0.0.0-a8f1c3e7a1 → 0.0.0-aa4659ca48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/react-ui",
-  "version": "0.0.0-a8f1c3e7a1",
+  "version": "0.0.0-aa4659ca48",
   "description": "UI Components",
   "main": "cjs/index.js",
   "module": "index.js",
@@ -22,16 +22,13 @@
     "clean": "git clean -fdxqe node_modules",
     "prerelease": "node scripts/publish/prepublish && yarn build",
     "release": "npm publish ./build --workspaces=false",
-    "build-old-docs": "rimraf .styleguide/deploy && yarn run styleguide:build",
-    "deploy-old-docs": "gh-pages -a -d .styleguide/deploy -r git@github.com:skbkontur/react-ui.git",
-    "storybook": "node ../../scripts/patch-node-options.js \"storybook dev -p 6060\"",
-    "storybook:build": "node ../../scripts/patch-node-options.js \"cross-env STORYBOOK_REACT_UI_TEST=true storybook build -o .storybook/build --quiet\"",
-    "storybook:docs-build": "node ../../scripts/patch-node-options.js \"cross-env STORYBOOK_REACT_UI_DOCS=true storybook build --docs -c .storybook-docs -o .storybook/build --quiet\"",
-    "storybook:test": "node ../../scripts/patch-node-options.js \"cross-env STORYBOOK_REACT_UI_TEST=true storybook dev --ci -p 6060\"",
-    "storybook:docs": "node ../../scripts/patch-node-options.js \"cross-env STORYBOOK_REACT_UI_DOCS=true storybook dev --docs -p 6061 -c .storybook-docs\"",
+    "release:unstable": "yarn release --tag=unstable",
+    "storybook": "storybook dev -p 6060",
+    "storybook:build": "cross-env STORYBOOK_REACT_UI_TEST=true storybook build -o .storybook/build --quiet",
+    "storybook:docs-build": "cross-env STORYBOOK_REACT_UI_DOCS=true storybook build --docs -c .storybook-docs -o .storybook/build --quiet",
+    "storybook:test": "cross-env STORYBOOK_REACT_UI_TEST=true storybook dev --ci -p 6060",
+    "storybook:docs": "cross-env STORYBOOK_REACT_UI_DOCS=true storybook dev --docs -p 6061 -c .storybook-docs",
     "storybook:serve": "yarn serve -l 6060 .storybook/build",
-    "styleguide": "node ../../scripts/patch-node-options.js \"styleguidist server --config .styleguide/config/dev.config.js\"",
-    "styleguide:build": "node ../../scripts/patch-node-options.js \"node .styleguide/build\"",
     "lint": "run-p -c lint:*",
     "lint:eslint": "cross-env TIMING=1 yarn eslint ./",
     "lint:tsc": "tsc --noEmit --diagnostics",
@@ -39,10 +36,10 @@
     "fix": "run-s -c fix:*",
     "fix:eslint": "yarn lint:eslint --fix",
     "fix:prettier": "yarn prettier --write .",
-    "test": "jest --detectOpenHandles",
-    "test:watch": "yarn test --watch",
-    "creevey": "node ../../scripts/creevey-prepare.js .creevey/config.mts && cross-env BABEL_ENV=cjs creevey -c .creevey/config.mts",
-    "creevey:ci": "start-server-and-test storybook:serve http://localhost:6060 creevey",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "creevey": "cross-env BABEL_ENV=cjs creevey test -c .creevey/config.mts --storybook-port=6060",
+    "creevey:ci": "npx playwright install --with-deps chromium firefox && start-server-and-test storybook:serve http://localhost:6060 creevey",
     "creevey:update": "cross-env BABEL_ENV=cjs creevey -c .creevey/config.mts --update",
     "creevey:ui": "yarn creevey --ui",
     "report:eslint": "yarn eslint -f eslint-html-reporter/reporter.js -o reports/eslint/index.html"
@@ -52,16 +49,15 @@
     "@babel/runtime": "^7.24.6",
     "@emotion/css": "^11.11.2",
     "@skbkontur/global-object": "^0.4.4",
-    "@skbkontur/react-imask": "^7.6.4",
+    "@skbkontur/react-imask": "^7.6.5",
     "eventemitter3": "^5.0.1",
     "invariant": "^2.2.4",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "normalize-wheel": "^1.0.1",
-    "prop-types": "^15.8.1",
-    "react-focus-lock": "2.11.2",
-    "react-input-mask": "2.0.4",
+    "react-docgen": "7.0.0",
+    "react-focus-lock": "2.11.3",
     "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
     "shallowequal": "^1.1.0",
@@ -78,72 +74,60 @@
     "@babel/preset-react": "^7.24.6",
     "@babel/preset-typescript": "^7.24.6",
     "@babel/register": "^7.24.6",
+    "@playwright/test": "^1.54.2",
     "@skbkontur/icons": "1.10.0",
-    "@skbkontur/react-props2attrs": "0.1.3",
-    "@skbkontur/react-sorge": "0.2.1",
     "@skbkontur/storybook-addon-live-examples": "0.0.17",
     "@storybook/addon-a11y": "7.6.18",
     "@storybook/addon-controls": "7.6.18",
     "@storybook/addon-docs": "7.6.18",
     "@storybook/addon-essentials": "7.6.18",
-    "@storybook/addon-ie11": "0.0.6",
     "@storybook/addon-interactions": "^7.6.18",
     "@storybook/addon-links": "7.6.18",
     "@storybook/blocks": "^7.6.18",
     "@storybook/react": "7.6.18",
     "@storybook/react-webpack5": "7.6.18",
-    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "15.0.7",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/invariant": "^2.2.35",
-    "@types/jest": "29.5.12",
-    "@types/jest-axe": "^3.5.3",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.isequal": "^4.5.5",
     "@types/lodash.throttle": "^4.1.6",
-    "@types/prop-types": "15.7.12",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@types/react-input-mask": "3.0.5",
     "@types/react-is": "^18.3.0",
     "@types/react-transition-group": "^4.4.4",
     "@types/shallowequal": "^1.1.1",
     "@types/warning": "^3.0.0",
     "axios": "^1.7.2",
-    "babel-jest": "29.7.0",
     "babel-loader": "^9.1.3",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "chalk": "4.1.0",
     "copyfiles": "^2.4.1",
     "core-js": "^3.37.1",
-    "creevey": "0.10.0-beta.47",
+    "creevey": "0.10.31",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "dotenv": "^16.4.5",
     "dts-css-modules-loader": "^2.0.1",
-    "eslint-plugin-jest": "28.5.0",
     "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-plugin-vitest": "^0.5.4",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "fs-extra": "^11.2.0",
     "fs-readdir-recursive": "^1.1.0",
     "gh-pages": "^6.1.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "29.7.0",
-    "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-junit": "^16.0.0",
-    "jest-teamcity-reporter": "^0.9.0",
+    "jsdom": "^26.1.0",
     "npm-run-all": "^4.1.5",
     "output-file-sync": "^2.0.1",
+    "playwright-core": "^1.54.2",
     "react": "18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.3.1",
-    "react-styleguidist": "^12.0.1",
     "rimraf": "^5.0.7",
     "selenium-webdriver": "^4.27.0",
     "semver": "^7.6.2",
@@ -154,15 +138,15 @@
     "style-loader": "^4.0.0",
     "stylelint": "^16.6.0",
     "stylelint-config-standard": "^36.0.0",
-    "typescript": "4.9.4",
+    "typescript": "5.9.3",
     "upath": "^2.0.1",
     "url-loader": "^4.1.1",
     "wait-on": "^7.2.0",
     "webpack": "^5.91.0"
   },
   "peerDependencies": {
-    "react": ">=16.9",
-    "react-dom": ">=16.9"
+    "react": ">=16.9 <19",
+    "react-dom": ">=16.9 <19"
   },
   "publishConfig": {
     "tag": "unstable"

package/test-setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/vitest.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/cjs/components/Autocomplete/Autocomplete.md

@@ -1,113 +0,0 @@
-### Базовый пример
-```jsx harmony
-import { Autocomplete } from '@skbkontur/react-ui';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [value, setValue] = React.useState('Kappa');
-
-<Autocomplete source={items} value={value} onValueChange={setValue} />;
-```
-
-### Очистка Autocomplete
-Очистить значение в `Autocomplete` можно только с помощью пустой строки.
-```jsx harmony
-import { Autocomplete, Button, Group } from '@skbkontur/react-ui';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [value, setValue] = React.useState('Kappa');
-
-<Group>
-  <Autocomplete source={items} value={value} onValueChange={setValue} />
-  <Button onClick={() => setValue('')}>Очистить</Button>
-</Group>
-```
-
-### Размер
-```jsx harmony
-import { Autocomplete, Gapped } from '@skbkontur/react-ui';
-
-const items = ['Маленький', 'Средний', 'Большой'];
-
-const [valueSmall, setValueSmall] = React.useState('Маленький');
-const [valueMedium, setValueMedium] = React.useState('Средний');
-const [valueLarge, setValueLarge] = React.useState('Большой');
-
-<Gapped vertical>
-  <Autocomplete source={items} value={valueSmall} onValueChange={setValueSmall} size={'small'} />
-  <Autocomplete source={items} value={valueMedium} onValueChange={setValueMedium} size={'medium'} />
-  <Autocomplete source={items} value={valueLarge} onValueChange={setValueLarge} size={'large'} />
-</Gapped>
-```
-
-### Выделение введеного значения при фокусе
-```jsx harmony
-import { Autocomplete } from '@skbkontur/react-ui';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [value, setValue] = React.useState('');
-
-<Autocomplete source={items} value={value} onValueChange={setValue} selectAllOnFocus />
-```
-
-### Иконка
-```jsx harmony
-import { Autocomplete, Gapped } from '@skbkontur/react-ui';
-import { SearchLoupeIcon16Regular } from '@skbkontur/icons/SearchLoupeIcon16Regular';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [valueLeft, setValueLeft] = React.useState('');
-const [valueRight, setValueRight] = React.useState('');
-
-<Gapped>
-  <Autocomplete source={items} value={valueLeft} onValueChange={setValueLeft} leftIcon={<SearchLoupeIcon16Regular />} />
-  <Autocomplete source={items} value={valueRight} onValueChange={setValueRight} rightIcon={<SearchLoupeIcon16Regular />} />
-</Gapped>
-```
-
-### Ширина меню
-```jsx harmony
-import { Autocomplete } from '@skbkontur/react-ui';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [value, setValue] = React.useState('');
-
-<Autocomplete source={items} value={value} onValueChange={setValue} menuWidth={'80%'} />
-```
-
-### Расположение выпадающего окна Autocomplete
-```jsx harmony
-import { Autocomplete } from '@skbkontur/react-ui';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [value, setValue] = React.useState('');
-
-<Autocomplete source={items} value={value} onValueChange={setValue} menuPos={'top'} />
-```
-
-### Тень у выпадающего меню
-```jsx harmony
-import { Autocomplete } from '@skbkontur/react-ui';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [value, setValue] = React.useState('');
-
-<Autocomplete source={items} value={value} onValueChange={setValue} hasShadow />
-```
-
-### Режима прозрачной рамки
-```jsx harmony
-import { Autocomplete } from '@skbkontur/react-ui';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [value, setValue] = React.useState('Kappa');
-
-<Autocomplete source={items} value={value} onValueChange={setValue} borderless />
-```

package/cjs/components/Button/Button.md

@@ -1,261 +0,0 @@
-### Базовый пример
-По умолчанию, кнопка принимает все пропы `HTMLButtonElement`.
-
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-
-<Button onClick={alert} name="report">Создать отчёт</Button>;
-```
-
-### Корневой компонент
-Кнопка может рендерить ссылку в качестве корневого элемента, c помощью пропа `component`. Кнопка принимает все пропы переданного в `component` компонента.
-
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-
-<Button component='a' href='https://kontur.ru' target="_blank">Ссылка, но выглядит как кнопка</Button>
-```
-
-### Различные стили
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-const bgStyle = {
-  backgroundImage: `linear-gradient(to right, rgba(130, 130, 130, 0.5) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(130, 130, 130, 0.5) 1px, transparent 1px)`,
-  backgroundSize: `16px 16px`,
-  backgroundPosition: `-8px -8px`,
-  padding: 16
-};
-
-<Gapped vertical>
-  <Gapped>
-    <Button use="default">Default</Button>
-    <Button use="primary">Primary</Button>
-    <Button use="success">Success</Button>
-    <Button use="danger">Danger</Button>
-    <Button use="pay">Pay</Button>
-    <Button use="text">Text</Button>
-    <Button use="backless">Backless</Button>
-    <Button use="link">Link</Button>
-  </Gapped>
-  <Gapped style={bgStyle}>
-    <Button use="default">Default</Button>
-    <Button use="primary">Primary</Button>
-    <Button use="success">Success</Button>
-    <Button use="danger">Danger</Button>
-    <Button use="pay">Pay</Button>
-    <Button use="text">Text</Button>
-    <Button use="backless">Backless</Button>
-    <Button use="link">Link</Button>
-  </Gapped>
-</Gapped>
-```
-
-### Иконка
-В кнопку можно передать иконку. Иконка может находиться как слева от текста кнопки, так и справа и даже в обоих позициях одновременно.
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-import { XIcon16Regular } from '@skbkontur/icons/XIcon16Regular';
-
-<Gapped gap={5}>
-  <Button icon={<XIcon16Regular />}>Закрыть</Button>
-  <Button icon={<XIcon16Regular />} rightIcon={<XIcon16Regular />}>Закрыть</Button>
-  <Button rightIcon={<XIcon16Regular />}>Закрыть</Button>
-</Gapped>
-```
-
-### Размер
-
-```jsx harmony
-<div
-  style={{
-    display: "flex",
-    alignItems: "end",
-    gap: '10px',
-  }}
->
-  <Button size="small">Маленькая</Button>
-  <Button size="medium">Средняя</Button>
-  <Button size="large">Большая</Button>
-</div>
-```
-
-### Ширина
-
-```jsx harmony
-<Button width={40}>Закрыть</Button>
-```
-
-### Состояние валидации
-
-```jsx harmony
-import { Gapped, Button } from '@skbkontur/react-ui';
-<Gapped gap={5}>
-  <Button warning>Закрыть</Button>
-  <Button error>Закрыть</Button>
-</Gapped>
-```
-
-### Стрелка
-
-```jsx harmony
-import { Gapped, Button } from '@skbkontur/react-ui';
-
-<Gapped gap={5}>
-  <Button arrow="left" size="medium">
-    Назад
-  </Button>
-  <Button arrow size="medium">
-    Далее
-  </Button>
-</Gapped>
-```
-
-### Состояние загрузки
-
-**Поведение:**
-Кнопка на время нахождения в состоянии загрузки отключается.
-Если в кнопке есть иконка, на время загрузки иконка заменяется на спиннер, если иконки нет — весь контент кнопки заменяется на спиннер. Когда иконки две — заменяется только левая.
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-import { MinusCircleIcon16Light } from '@skbkontur/icons/MinusCircleIcon16Light';
-
-const [loading, setLoading] = React.useState(false);
-
-const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
-
-const handleLoadingStart = () => {
-  delay(2000)()
-    .then(() => {
-      setLoading(false);
-    })
-};
-
-const handleClick = () => {
-  setLoading(true);
-  handleLoadingStart();
-};
-
-<Gapped>
-  <Button width={150} onClick={handleClick} loading={loading}>
-    Удалить
-  </Button>
-  <Button icon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
-    Удалить
-  </Button>
-  <Button rightIcon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
-    Удалить
-  </Button>
-  <Button icon={<MinusCircleIcon16Light />} rightIcon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
-    Удалить
-  </Button>
-</Gapped>
-
-```
-
-### Проп темы
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Button theme={{textColorDefault: '#C00000'}}>Ok</Button>
-  <Button use="link" theme={{linkColor: '#C00000'}}>Ok</Button>
-  <Button>Ok</Button>
-</Gapped>
-```
-
-### Кастомизация кнопки-ссылки
-
-```jsx harmony
-import { Toast } from "@skbkontur/react-ui";
-import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular"
-
-const textDecorationStyles = {
-  btnLinkTextUnderlineOffset: '1px',
-}
-
-const underlineOnHoverStyles = {
-  btnLinkTextDecorationColor: 'transparent',
-}
-
-const differentColorStyles = {
-  btnLinkColor: 'blue',
-  btnLinkHoverColor: 'blue',
-  btnLinkActiveColor: 'blue',
-}
-
-const stringify = (styles) => {
-  return `${Object.entries(styles).map(([key, value]) => `${key}: "${value}"`).join(", ")}`
-}
-
-const copyStyles = (styles) => {
-  navigator.clipboard.writeText(stringify(styles));
-  Toast.push('Copied');
-}
-
-const tableStyle = {
-  borderCollapse: 'collapse',
-  width: '100%',
-};
-
-const tdStyle = {
-  border: '1px solid',
-  padding: '8px',
-};
-
-const renderExampleRow = (title, styles) => {
-  return (
-    <tr>
-      <td style={tdStyle}>{title}</td>
-      <td style={tdStyle}><Button use={'link'} theme={styles}>Button-link</Button></td>
-      <td style={tdStyle}>
-        <div style={{display: 'flex'}}>
-          <div style={{width: '80%', whiteSpace: 'pre-line'}}>{stringify(styles).replace(/, /g, '\n')}</div>
-          <Button icon={<CopyIcon16Regular />} use={'text'} onClick={() => copyStyles(styles)}/>
-        </div>
-      </td>
-    </tr>
-  )
-}
-
-<table style={tableStyle}>
-  <tr style={{textAlign: 'left'}}>
-    <th style={tdStyle}></th>
-    <th style={tdStyle}>Пример</th>
-    <th style={tdStyle}>Переменные темы</th>
-  </tr>
-  {renderExampleRow('Ссылка с подчеркиванием без отступа', textDecorationStyles)}
-  {renderExampleRow('Ссылка с подчеркиванием при наведении', underlineOnHoverStyles)}
-  {renderExampleRow('Изменение цвета ссылки', differentColorStyles)}
-</table>
-```
-
-### Узкая Кнопка
-
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-
-<Button narrow>
-  Создать отчет
-</Button>
-```
-
-### Состояния валидации
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-
-<Gapped gap={5}>
-  <Button warning>
-    Warning
-  </Button>
-  <Button error>
-    Error
-  </Button>
-</Gapped>
-```