feat(v5): update code

- В Switch изменены аргументы свойства onChange, измените реализацию подключения в проекте или используйте SwitchDeprecated - В SwitchGroup изменены аргументы свойства onChange, измените реализацию подключения в проекте - Компонент SwitchGroupDeprecated удален, используйте SwitchGroup - TabsDeprecated удален, используйте Tabs - В Tabs изменены аргументы свойства onChange, измените реализацию подключения в проекте - В Text сброшены свойства по умолчанию. Включите необходимые свойства в проекте или используйте компонент TextDeprecated - TextField изменено взаимодействие с маской. Примеры использования можно найти в документации - В TextField изменены аргументы свойства onChange, измените реализацию подключения в проекте - В ThemeToggler изменены аргументы свойства onChange, измените реализацию подключения в проекте - Компонент Tooltip был помечен на удаление и перенесен в TooltipDeprecated - Компонент TooltipCanary помечен как стабильный и перемещен в Tooltip - Компонент UserSelect был помечен на удаление и перенесен в UserSelectDeprecated - Компонент UserSelectCanary помечен как стабильный и перемещен в UserSelect - useBreakpoints помечен на удаление и перенесен в useBreakpointsDeprecated - useComponentBreakpoints помечен на удаление и перенесен в useComponentBreakpointsDepricated - Добавлен новый компонент useBreakpoints, который объединяет возможности старых useBreakpoints и useComponentBreakpoints - В useChoiceGroup изменились аргументы свойства callBack, измените реализацию подключения в проекте - В useChoiceGroupIndexed изменились аргументы свойства callBack, измените реализацию подключения в проекте - useHideElementsInLine помечен на удаление и перенесен в useHideElementsInLineDepricated - useHideElementsInLineCanary помечен как стабильный и перенесен в useHideElementsInLine - Компонент useResizableContentCanary помечен как стабильный и перенесен в useResizableContent - Компонент useThemeVars удален, используйте useStyleProps - Компонент useVirtualScrollCanary помечен как стабильный и перенесен в useVirtualScroll
consta-design-system · Dec 19, 2023 · e196dd7 · e196dd7
1 parent 0de44c0
commit e196dd7
Show file tree

Hide file tree

Showing 2,951 changed files with 22,319 additions and 47,687 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -25,7 +25,7 @@ jobs:
       # Устанавливаем Node.JS для сборки приложения
       - uses: actions/setup-node@v1
         with:
-          node-version: '16'
+          node-version: 18
 
       - name: Install yarn
         id: yarn-setup

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -19,7 +19,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Установка yarn
         id: yarn-setup

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit",
-  "version": "4.33.1",
+  "version": "5.0.0",
   "keywords": [
     "ui-kit",
     "design-system",
@@ -13,22 +13,19 @@
       "url": "https://consta.design/static/licence_mit.pdf"
     }
   ],
-  "dependencies": {
-    "@bem-react/classname": "^1.5.12",
+  "peerDependencies": {
+    "@bem-react/classname": "^1.6.0",
     "@bem-react/classnames": "^1.3.10",
-    "@consta/icons": "^0.9.0",
+    "@consta/icons": "^1.0.0",
     "compute-scroll-into-view": "^1.0.17",
-    "date-fns": "^2.29.1",
-    "focus-trap-react": "8.7.0",
-    "imask": "^6.4.3",
+    "date-fns": "^2.30.0",
+    "react": ">= 16.8.0",
+    "react-dom": ">= 16.8.0",
     "react-dropzone": "11.3.4",
-    "react-textarea-autosize": "^8.3.4",
+    "react-imask": "^7.2.1",
+    "react-textarea-autosize": "^8.5.3",
     "react-transition-group": "^4.4.5"
   },
-  "peerDependencies": {
-    "react": ">= 16.8.0",
-    "react-dom": ">= 16.8.0"
-  },
   "files": [
     "*",
     "!**/__mocks__",
@@ -40,7 +37,7 @@
     "access": "public"
   },
   "scripts": {
-    "postinstall": "husky install",
+    "postinstall": "yarn install-peers && husky install",
     "tsc-dry-run": "tsc --noEmit",
     "lint:js": "eslint --ext .js,.jsx,.tsx,.ts --fix . --quiet",
     "lint:css": "stylelint ./src/**/*.css --fix",
@@ -107,7 +104,8 @@
     "@babel/preset-typescript": "^7.18.6",
     "@bem/sdk.naming.cell.match": "^0.1.3",
     "@bem/sdk.naming.presets": "^0.2.3",
-    "@consta/stand": "^0.0.118",
+    "@consta/stand": "^0.0.134",
+    "@consta/uikit": "^5.0.0-beta.2",
     "@mdx-js/loader": "^2.1.5",
     "@oclif/command": "^1.8.16",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -154,6 +152,7 @@
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
+    "install-peers-cli": "https://github.com/evless/install-peers-cli#fix-yarn-policies",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
     "lint-staged": "^13.0.3",
@@ -172,10 +171,10 @@
     "postcss-syntax": "^0.36.2",
     "prettier": "^2.6.2",
     "prompts": "^2.4.2",
-    "react": "^18.0.0",
+    "react": ">= 16.8.0",
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.0",
-    "react-dom": "^18.0.0",
+    "react-dom": ">= 16.8.0",
     "react-refresh": "^0.11.0",
     "react-router5": "^8.0.1",
     "react-test-renderer": "^18.0.0",
@@ -196,7 +195,7 @@
     "terser-webpack-plugin": "^5.2.5",
     "ts-jest": "^28.0.7",
     "ts-loader": "^9.2.8",
-    "ttypescript": "^1.5.13",
+    "ttypescript": "^1.5.15",
     "typescript": "^4.6.3",
     "typescript-eslint-parser": "^22.0.0",
     "typescript-transform-paths": "^3.3.1",

diff --git a/src/components/Attach/Attach.tsx b/src/components/Attach/Attach.tsx
diff --git a/src/components/Attach/index.ts b/src/components/Attach/index.ts
diff --git a/src/components/Attachment/Attachment.tsx b/src/components/Attachment/Attachment.tsx
@@ -2,13 +2,13 @@ import './Attachment.css';
 
 import React from 'react';
 
+import { Button } from '##/components/Button';
+import { File } from '##/components/File';
+import { Text, TextPropSize } from '##/components/Text';
 import { FileIconPropSize } from '##/fileIcons/FileIcon/FileIcon';
+import { cn } from '##/utils/bem';
+import { forwardRefWithAs } from '##/utils/types/PropsWithAsAttributes';
 
-import { cn } from '../../utils/bem';
-import { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';
-import { Button } from '../Button/Button';
-import { File } from '../File/File';
-import { Text, TextPropSize } from '../Text/Text';
 import {
   AttachmentProps,
   AttachmentPropSize,
@@ -34,11 +34,13 @@ const descriptionSizeMap: Record<AttachmentPropSize, TextPropSize> = {
   s: 'xs',
   m: 's',
 };
+
 const Attachment = forwardRefWithAs<AttachmentProps>((props, ref) => {
   const {
     className,
     as = 'div',
     fileExtension,
+    withPictogram,
     loading,
     fileName,
     buttonIcon,
@@ -66,14 +68,16 @@ const Attachment = forwardRefWithAs<AttachmentProps>((props, ref) => {
       ])}
       ref={ref}
     >
-      <File
-        className={cnAttachment('File', { error: Boolean(errorText) })}
-        extension={fileExtension}
-        loading={loading}
-        loadingWithProgressSpin
-        loadingProgress={loadingProgress}
-        size={fileSizeMap[size]}
-      />
+      {withPictogram && (
+        <File
+          className={cnAttachment('File', { error: Boolean(errorText) })}
+          extension={fileExtension}
+          loading={loading}
+          loadingWithProgressSpin
+          loadingProgress={loadingProgress}
+          size={fileSizeMap[size]}
+        />
+      )}
       <div className={cnAttachment('Content')}>
         {fileName && (
           <Text

diff --git a/src/components/Attachment/__stand__/Attachment.dev.stand.mdx b/src/components/Attachment/__stand__/Attachment.dev.stand.mdx
@@ -1,10 +1,4 @@
 import { MdxMenu } from '@consta/stand';
-import {
-  AttachmentExampleBasicsLoading,
-  AttachmentExampleBasicsError,
-  AttachmentExampleBasicsLoaded,
-  AttachmentExampleBasicsLink,
-} from './examples/AttachmentExampleBasics/AttachmentExampleBasics';
 import { AttachmentExampleLoading } from './examples/AttachmentExampleLoading/AttachmentExampleLoading';
 import { AttachmentExampleError } from './examples/AttachmentExampleError/AttachmentExampleError';
 import { AttachmentExampleEvents } from './examples/AttachmentExampleEvents/AttachmentExampleEvents';
@@ -13,6 +7,7 @@ import { AttachmentExampleIcon } from './examples/AttachmentExampleIcon/Attachme
 import { AttachmentExampleName } from './examples/AttachmentExampleName/AttachmentExampleName';
 import { AttachmentExampleAs } from './examples/AttachmentExampleAs/AttachmentExampleAs';
 import { AttachmentExampleSize } from './examples/AttachmentExampleSize/AttachmentExampleSize';
+import { AttachmentExampleWithPictogram } from './examples/AttachmentExampleWithPictogram/AttachmentExampleWithPictogram';
 
 ```tsx
 import { Attachment } from '@consta/uikit/Attachment';
@@ -22,6 +17,7 @@ import { Attachment } from '@consta/uikit/Attachment';
 
 - [Свойства файла](#свойства-файла)
   - [Иконка](#иконка)
+    - [Показать иконку](#показать-иконку)
   - [Название](#название)
   - [Описание](#описание)
 - [Загрузка файла](#загрузка-файла)
@@ -61,6 +57,27 @@ import { Attachment } from '@consta/uikit/Attachment';
 
 Рядом с иконкой можно разместить информацию о файле.
 
+#### Показать иконку
+
+Для того чтобы отобразить пиктограмму укажите значение свойства `withPictogram` в `true`.
+
+```tsx
+<Attachment
+  withPictogram
+  fileName="Файл"
+  fileExtension="jpg"
+  fileDescription="14 Мб 01.04.2020, 07:01"
+/>
+<Attachment
+  withPictogram={false}
+  fileName="Файл"
+  fileExtension="jpg"
+  fileDescription="14 Мб 01.04.2020, 07:01"
+/>
+```
+
+<AttachmentExampleWithPictogram />
+
 ### Название
 
 За название отвечает свойство `fileName`. Сюда можно подставить имя файла, но лучше придумать красивое название, которое будет понятно пользователям.
@@ -72,20 +89,23 @@ import { Attachment } from '@consta/uikit/Attachment';
   className={cnAttachmentExampleList()}
   fileName="Фотография"
   fileExtension="jpg"
+  withPictogram
   fileDescription="1,5 Mб 19.07.2020, 16:11"
 />
 
 <Attachment
   className={cnAttachmentExampleList()}
   fileName="Скан паспорта"
   fileExtension="pdf"
+  withPictogram
   fileDescription="1,5 Mб 19.07.2020, 16:12"
 />
 
 <Attachment
   className={cnAttachmentExampleList()}
   fileName="Сопроводительное письмо"
   fileExtension="docx"
+  withPictogram
   fileDescription="225 Mб 19.07.2020, 17:15"
 />
 ```
@@ -103,13 +123,15 @@ import { Attachment } from '@consta/uikit/Attachment';
   className={cnAttachmentExampleName()}
   fileName="Файл с нормальным описанием"
   fileExtension="jpg"
+  withPictogram
   fileDescription="14 Мб 01.04.2020, 07:01"
 />
 
 <Attachment
   className={cnAttachmentExampleName()}
   fileName="Файл с каким попало описанием"
   fileExtension="bzz"
+  withPictogram
   fileDescription="Крекс, пекс, фекс"
 />
 ```
@@ -132,6 +154,7 @@ import { Attachment } from '@consta/uikit/Attachment';
 <Attachment
   fileName="Инструкция по сборке марсохода"
   fileExtension="docx"
+  withPictogram
   fileDescription="25,5 Mб 19.07.2020, 21:12"
   loadingText="Я ещё не загрузился, уже загружено"
   loading
@@ -153,11 +176,13 @@ import { Attachment } from '@consta/uikit/Attachment';
 <Attachment
   fileName="Марсианский закат"
   fileExtension="jpg"
+  withPictogram
   errorText="Фотография не загрузилась"
 />
 <Attachment
   fileName="Марсианский закат"
   fileExtension="jpg"
+  withPictogram
   errorText="Файл слишком большой, максимум 100 ТБ"
 />
 ```
@@ -189,6 +214,7 @@ import { Attachment } from '@consta/uikit/Attachment';
 <Attachment
   fileName="my_tale_about_mars_variant_121_final"
   fileExtension="docx"
+  withPictogram
   fileDescription="1,5 Mб 21.02.2051, 14:12"
   loadingText="Загрузка"
   buttonIcon={IconTrash}
@@ -213,16 +239,19 @@ import { Attachment } from '@consta/uikit/Attachment';
   size="xs"
   fileName="Инструкция по сборке марсохода"
   fileExtension="pdf"
+  withPictogram
 />
 <Attachment
   size="s"
   fileName="Инструкция по сборке марсохода"
   fileExtension="pdf"
+  withPictogram
 />
 <Attachment
   size="m"
   fileName="Инструкция по сборке марсохода"
   fileExtension="pdf"
+  withPictogram
 />
 ```
 
@@ -240,6 +269,7 @@ import { Attachment } from '@consta/uikit/Attachment';
   href="https://www.youtube.com/watch?v=dAZKu_ojb14"
   fileName="Вести с марса"
   fileExtension="mov"
+  withPictogram
   fileDescription="Нажми меня"
 />
 ```
@@ -260,6 +290,7 @@ import { Attachment } from '@consta/uikit/Attachment';
 | [`fileName`](#название)                   | `string`                                | -            | Название файла                                                   |
 | [`fileDescription`](#описание)            | `string`                                | -            | Описание файла                                                   |
 | [`fileExtension`](#иконка)                | `string`                                | -            | Расширение иконки файла                                          |
+| [`withPictogram`](#показать-иконку)       | `boolean`                               | `true`       | Отображается ли пиктограмма файла                                |
 | [`loading`](#загрузка-файла)              | `boolean`                               | -            | Прелоадер загрузки                                               |
 | [`loadingProgress`](#индикаторы-загрузки) | `number`                                | -            | Степень загрузки файла в процентах                               |
 | [`loadingText`](#индикаторы-загрузки)     | `string`                                | `'Loading'`  | Текст, который видно во время загрузки                           |
@@ -275,11 +306,11 @@ import { Attachment } from '@consta/uikit/Attachment';
 
 ## Пример
 
-```ts
+```tsx
 import React from 'react';
 import { Attachment } from '@consta/uikit/Attachment';
 
 const App = () => {
-  return <Attachment fileName="Документация" extension="doc" />;
+  return <Attachment fileName="Документация" extension="doc" withPictogram />;
 };
 ```
diff --git a/src/components/Attachment/__stand__/Attachment.stand.tsx b/src/components/Attachment/__stand__/Attachment.stand.tsx
@@ -5,9 +5,9 @@ export default createStand({
   id: 'Attachment',
   group: 'components',
   description: 'Показывает загрузку файла или уже загруженный файл.',
-  version: '3.2.0',
-  alias: ['файл', 'файлы', 'вложение', 'вложения', 'загрузка'],
+  version: '5.0.0',
   status: 'stable',
+  alias: ['файл', 'файлы', 'вложение', 'вложения', 'загрузка'],
   sandbox: 'attachment-t66jd4',
   figma:
     'https://www.figma.com/embed?embed_host=uikit.consta.design&url=https://www.figma.com/file/v9Jkm2GrymD277dIGpRBSH/Consta-UI-Kit?node-id=43155%3A107678',