From a3de58ec1e4d41894c8069bdf8f49f29d383a197 Mon Sep 17 00:00:00 2001 From: Valeri8888 <87258678+Valeri8888@users.noreply.github.com> Date: Mon, 2 Oct 2023 08:55:32 +0300 Subject: [PATCH] chore: update docs Collapse,Dropzone,FileUploadItem (#867) --- packages/collapse/src/docs/Component.docs.mdx | 22 ++++ .../collapse/src/docs/Component.stories.mdx | 39 ------ .../collapse/src/docs/Component.stories.tsx | 27 ++++ packages/collapse/src/docs/description.mdx | 120 +++++++++-------- packages/collapse/src/docs/development.mdx | 12 ++ packages/dropzone/src/docs/Component.docs.mdx | 23 ++++ ...nent.stories.mdx => Component.stories.tsx} | 50 +++----- packages/dropzone/src/docs/description.mdx | 121 ++++++++---------- packages/dropzone/src/docs/development.mdx | 18 +++ .../src/docs/Component.docs.mdx | 23 ++++ ...nent.stories.mdx => Component.stories.tsx} | 48 +++---- .../file-upload-item/src/docs/description.mdx | 34 ++--- .../file-upload-item/src/docs/development.mdx | 12 ++ 13 files changed, 292 insertions(+), 257 deletions(-) create mode 100644 packages/collapse/src/docs/Component.docs.mdx delete mode 100644 packages/collapse/src/docs/Component.stories.mdx create mode 100644 packages/collapse/src/docs/Component.stories.tsx create mode 100644 packages/collapse/src/docs/development.mdx create mode 100644 packages/dropzone/src/docs/Component.docs.mdx rename packages/dropzone/src/docs/{Component.stories.mdx => Component.stories.tsx} (67%) create mode 100644 packages/dropzone/src/docs/development.mdx create mode 100644 packages/file-upload-item/src/docs/Component.docs.mdx rename packages/file-upload-item/src/docs/{Component.stories.mdx => Component.stories.tsx} (69%) create mode 100644 packages/file-upload-item/src/docs/development.mdx diff --git a/packages/collapse/src/docs/Component.docs.mdx b/packages/collapse/src/docs/Component.docs.mdx new file mode 100644 index 0000000000..b951a96026 --- /dev/null +++ b/packages/collapse/src/docs/Component.docs.mdx @@ -0,0 +1,22 @@ +import { Meta, Markdown } from '@storybook/addon-docs'; +import { ComponentHeader, Tabs } from 'storybook/blocks'; +import * as Stories from './Component.stories'; + +import Description from './description.mdx'; +import Development from './development.mdx'; +import Changelog from '../../CHANGELOG.md?raw'; +import packageJson from '../../package.json'; + + + + + +} + changelog={{Changelog}} + development={} +/> diff --git a/packages/collapse/src/docs/Component.stories.mdx b/packages/collapse/src/docs/Component.stories.mdx deleted file mode 100644 index e335659579..0000000000 --- a/packages/collapse/src/docs/Component.stories.mdx +++ /dev/null @@ -1,39 +0,0 @@ -import { Meta, Story, ArgsTable, Markdown } from '@storybook/addon-docs'; -import { ComponentHeader, Tabs } from 'storybook/blocks'; -import { Collapse } from '@alfalab/core-components-collapse'; - -import { Collapse as CollapseTS } from '../Component'; -import packageJson from '../../package.json'; -import Description from './description.mdx'; -import Changelog from '../../CHANGELOG.md?raw'; - - - -{/* Canvas */} - - - - {'Банк, основанный в 1990 году, является универсальным банком, осуществляющим все основные ' + - 'виды банковских операций, представленных на рынке финансовых услуг, включая обслуживание ' + - 'частных и корпоративных клиентов, инвестиционный банковский бизнес, торговое финансирование ' + - 'и т.д.'} - - - -{/* Docs */} - - - -```jsx -import { Collapse } from '@alfalab/core-components/collapse'; -``` - -} - changelog={{Changelog}} - props={} -/> diff --git a/packages/collapse/src/docs/Component.stories.tsx b/packages/collapse/src/docs/Component.stories.tsx new file mode 100644 index 0000000000..505dd05afa --- /dev/null +++ b/packages/collapse/src/docs/Component.stories.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Collapse } from '@alfalab/core-components-collapse'; + +const meta: Meta = { + title: 'Components/Collapse', + component: Collapse, + id: 'Collapse', +}; + +type Story = StoryObj; + +export const collapse: Story = { + name: 'Collapse', + render: () => { + return ( + + {'Банк, основанный в 1990 году, является универсальным банком, осуществляющим все основные ' + + 'виды банковских операций, представленных на рынке финансовых услуг, включая обслуживание ' + + 'частных и корпоративных клиентов, инвестиционный банковский бизнес, торговое финансирование ' + + 'и т.д.'} + + ); + }, +}; + +export default meta; diff --git a/packages/collapse/src/docs/description.mdx b/packages/collapse/src/docs/description.mdx index 67dd3eccc0..46bbebaaa9 100644 --- a/packages/collapse/src/docs/description.mdx +++ b/packages/collapse/src/docs/description.mdx @@ -1,81 +1,79 @@ -Компонент «подката» позволяет спрятать кусок текста за ссылку «Еще...». +## Примеры -### Стандартный Collapse +Стандартный вид компонента. -```jsx live - - Банк, основанный в 1990 году, является универсальным банком, осуществляющим все основные - виды банковских операций, представленных на рынке финансовых услуг, включая обслуживание частных - и корпоративных клиентов, инвестиционный банковский бизнес, торговое финансирование и т.д. - +```jsx live mobileHeight={670} +
+ + Почему банк проверяет мои операции? + + + + В 2001 году в России начал действовать Федеральный закон №115 «О противодействии легализации доходов, + полученных преступным путём, и финансированию терроризма». + В рамках закона банки могут блокировать карты, отказывать в проведении сомнительных операций, + ограничить доступ в интернет-банк или запрашивать документы, если по операции клиента возникли подозрения. + + + + Требования 115-ФЗ и связанных с ним документов Банка России часто меняются, + предприниматели не всегда успевают за ними следить. + Последствия нарушений «антиотмывочного» законодательства всегда неприятны: + приходится остановить бизнес-процессы и доказать банку законность операций. + Специалисты «Альфа-банка» собрали понятные рекомендации, как сэкономить время на объяснения и предотвратить блокировки. + +
``` -### Collapse с кастомным контролом - -Управлять состоянием компонента можно снаружи используя любой контрол (например кнопку) и передавать -текущее значение состояния через проп expanded - -```jsx live -render(() => { - const [expanded, setExpanded] = React.useState(false); - - return ( - <> - - - - Банк, основанный в 1990 году, является универсальным банком, осуществляющим - все основные виды банковских операций, представленных на рынке финансовых услуг, - включая обслуживание частных и корпоративных клиентов, инвестиционный банковский - бизнес, торговое финансирование и т.д. - - - ); -}); -``` - -### Collapse динамическим контентом - -```jsx live -const Content = () => ( -
- Банк, основанный в 1990 году, является универсальным банком, осуществляющим все - основные виды банковских операций, представленных на рынке финансовых услуг, включая - обслуживание частных и корпоративных клиентов, инвестиционный банковский бизнес, торговое - финансирование и т.д. -
-); +Контент может быть динамическим. +Управлять состоянием компонента можно снаружи, используя любой контрол и передавая текущее значение состояния через проп expanded. +```jsx live mobileHeight={730} render(() => { const [expanded, setExpanded] = React.useState(false); const [loaded, setLoaded] = React.useState(false); const handleToggle = () => { if (!expanded) { - setTimeout(() => setLoaded(true), 2000); + setLoaded(true); + setTimeout(() => setLoaded(false), 2000); } - setExpanded(!expanded); }; - const handleTransitionEnd = () => { - if (!expanded) { - setLoaded(false); - } - }; - return ( - <> - - - -
- {loaded ? : } -
+
+ + Почему банк проверяет мои операции? + + + + В 2001 году в России начал действовать Федеральный закон №115 «О противодействии легализации доходов, + полученных преступным путём, и финансированию терроризма». + В рамках закона банки могут блокировать карты, отказывать в проведении сомнительных операций, + ограничить доступ в интернет-банк или запрашивать документы, если по операции клиента возникли подозрения. + + + + + Требования 115-ФЗ и связанных с ним документов Банка России часто меняются, + предприниматели не всегда успевают за ними следить. + Последствия нарушений «антиотмывочного» законодательства всегда неприятны: + приходится остановить бизнес-процессы и доказать банку законность операций. + Специалисты «Альфа-банка» собрали понятные рекомендации, как сэкономить время на объяснения и предотвратить блокировки. + + - + + + {expanded ? 'Скрыть' : 'Подробнее'} + + +
); }); ``` diff --git a/packages/collapse/src/docs/development.mdx b/packages/collapse/src/docs/development.mdx new file mode 100644 index 0000000000..78aecc76f7 --- /dev/null +++ b/packages/collapse/src/docs/development.mdx @@ -0,0 +1,12 @@ +import { ArgsTable } from '@storybook/addon-docs'; +import { Collapse } from '../index'; + +## Подключение + +```jsx +import { Collapse } from '@alfalab/core-components/collapse'; +``` + +## Свойства + + diff --git a/packages/dropzone/src/docs/Component.docs.mdx b/packages/dropzone/src/docs/Component.docs.mdx new file mode 100644 index 0000000000..b41c6f7b52 --- /dev/null +++ b/packages/dropzone/src/docs/Component.docs.mdx @@ -0,0 +1,23 @@ +import { Meta, Markdown } from '@storybook/addon-docs'; +import { ComponentHeader, Tabs } from 'storybook/blocks'; +import * as Stories from './Component.stories'; + +import Description from './description.mdx'; +import Development from './development.mdx'; +import Changelog from '../../CHANGELOG.md?raw'; +import packageJson from '../../package.json'; + + + + + +} + changelog={{Changelog}} + development={} +/> diff --git a/packages/dropzone/src/docs/Component.stories.mdx b/packages/dropzone/src/docs/Component.stories.tsx similarity index 67% rename from packages/dropzone/src/docs/Component.stories.mdx rename to packages/dropzone/src/docs/Component.stories.tsx index 2a02717e8c..5d4c9bd484 100644 --- a/packages/dropzone/src/docs/Component.stories.mdx +++ b/packages/dropzone/src/docs/Component.stories.tsx @@ -1,30 +1,31 @@ -import { Meta, Story, ArgsTable, Markdown } from '@storybook/addon-docs'; +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; import { boolean } from '@storybook/addon-knobs'; -import { ComponentHeader, Tabs } from 'storybook/blocks'; import { Dropzone } from '@alfalab/core-components-dropzone'; -import { Dropzone as DropzoneTS } from '../Component'; -import packageJson from '../../package.json'; -import Changelog from '../../CHANGELOG.md?raw'; -import Description from './description.mdx'; import { getQueryParam, stylesStringToObj, } from '../../../screenshot-utils/screenshots-story/utils'; - - -export const WRAPPER_STYLES = { +const WRAPPER_STYLES = { display: 'inline-block', background: 'var(--color-light-bg-primary)', }; -{/* Canvas */} +const meta: Meta = { + title: 'Components/Dropzone', + component: Dropzone, + id: 'Dropzone', +}; + +type Story = StoryObj; - - {React.createElement(() => { +export const dropzone: Story = { + name: 'Dropzone', + render: () => { const [filesList, setFilesList] = React.useState([]); - const handleDrop = (files) => { + const handleDrop = (files: FileList) => { setFilesList( Array.from(files) .map((file) => file.name) @@ -70,24 +71,7 @@ export const WRAPPER_STYLES = { ); - })} - - -{/* Docs */} - - - -```jsx -import { Dropzone } from '@alfalab/core-components/dropzone'; -``` + }, +}; -} - props={} - changelog={{Changelog}} -/> +export default meta; diff --git a/packages/dropzone/src/docs/description.mdx b/packages/dropzone/src/docs/description.mdx index 255f4db384..c513c88409 100644 --- a/packages/dropzone/src/docs/description.mdx +++ b/packages/dropzone/src/docs/description.mdx @@ -1,8 +1,9 @@ -Компонент drag-and-drop контейнер для прикрепления файлов. +## Примеры -```jsx live +```jsx live desktopOnly render(() => { const [filesList, setFilesList] = React.useState([]); + const [ downloadStatus, setDownloadStatus] = React.useState('success'); const handleDrop = files => { setFilesList( @@ -11,81 +12,59 @@ render(() => { .filter(Boolean), ); }; + const onDownloadStatusChange = (_, payload) => { + setDownloadStatus(payload.value); + setFilesList([]) + }; + + const stylesStatus = { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + width: 724, + height: 200, + } - return ( - -
- {filesList.length > 0 ? ( -
    - {filesList.map(file => ( -
  • {file}
    • - ))} -
- ) : ( - children - )} -
- - ); -}); -``` - - -### Управление оверлеем - -По умолчанию оверлей показывается при перетаскивании файлов в дропзону. - -В помощью свойства `Overlay` можно отрисовать кастомный оверлей, либо вообще отключить его через `Overlay={null}` + const stylesText = { + lineHeight: '24px', + marginTop: 8, + } -```jsx live -render(() => { - const [filesList, setFilesList] = React.useState([]); + const isError = filesList.length && downloadStatus === 'error'; - const handleDrop = files => { - setFilesList( - Array.from(files) - .map(file => file.name) - .filter(Boolean), - ); - }; + const statusDropzone = (text, Icon)=> ( +
+ + {text} +
+ ) return ( - -
+ + {filesList.length > 0 ? ( + downloadStatus === 'success' ? + statusDropzone('Успех',CheckmarkMIcon ) : + statusDropzone('Ошибка',CrossMIcon ) + ) : ( + statusDropzone('Перетащите файлы',ContainerMIcon ) + )} + + - {filesList.length > 0 ? ( -
    - {filesList.map(file => ( -
  • {file}
    • - ))} -
- ) : ( - Перетащите файлы - )} -
- + + + + ); }); ``` diff --git a/packages/dropzone/src/docs/development.mdx b/packages/dropzone/src/docs/development.mdx new file mode 100644 index 0000000000..78b1c50440 --- /dev/null +++ b/packages/dropzone/src/docs/development.mdx @@ -0,0 +1,18 @@ +import { ArgsTable } from '@storybook/addon-docs'; +import { CssVars } from 'storybook/blocks'; +import { Dropzone } from '../index'; +import styles from '!!raw-loader!../index.module.css'; + +## Подключение + +```jsx +import { Dropzone } from '@alfalab/core-components/dropzone'; +``` + +## Свойства + + + +## Переменные + + diff --git a/packages/file-upload-item/src/docs/Component.docs.mdx b/packages/file-upload-item/src/docs/Component.docs.mdx new file mode 100644 index 0000000000..ed80c804a6 --- /dev/null +++ b/packages/file-upload-item/src/docs/Component.docs.mdx @@ -0,0 +1,23 @@ +import { Meta, Markdown } from '@storybook/addon-docs'; +import { ComponentHeader, Tabs } from 'storybook/blocks'; +import * as Stories from './Component.stories'; + +import Description from './description.mdx'; +import Development from './development.mdx'; +import Changelog from '../../CHANGELOG.md?raw'; +import packageJson from '../../package.json'; + + + + + +} + changelog={{Changelog}} + development={} +/> diff --git a/packages/file-upload-item/src/docs/Component.stories.mdx b/packages/file-upload-item/src/docs/Component.stories.tsx similarity index 69% rename from packages/file-upload-item/src/docs/Component.stories.mdx rename to packages/file-upload-item/src/docs/Component.stories.tsx index fe0f4b6f0b..c35d85c4e7 100644 --- a/packages/file-upload-item/src/docs/Component.stories.mdx +++ b/packages/file-upload-item/src/docs/Component.stories.tsx @@ -1,27 +1,28 @@ -import { Meta, Story, ArgsTable, Markdown } from '@storybook/addon-docs'; +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; import { text, number, select, boolean } from '@storybook/addon-knobs'; -import { ComponentHeader, Tabs } from 'storybook/blocks'; import { FileUploadItem } from '@alfalab/core-components-file-upload-item'; -import { FileUploadItem as FileUploadItemTS } from '../Component'; -import packageJson from '../../package.json'; -import Description from './description.mdx'; -import Changelog from '../../CHANGELOG.md?raw'; import { getQueryParam, stylesStringToObj, } from '../../../screenshot-utils/screenshots-story/utils'; - - -export const WRAPPER_STYLES = { +const WRAPPER_STYLES = { background: 'var(--color-light-bg-primary)', }; -{/* Canvas */} +const meta: Meta = { + title: 'Components/FileUploadItem', + component: FileUploadItem, + id: 'FileUploadItem', +}; + +type Story = StoryObj; - - {React.createElement(() => { +export const file_upload_item: Story = { + name: 'FileUploadItem', + render: () => { const previewStyles = stylesStringToObj(getQueryParam('wrapperStyles')); const isPreview = Object.keys(previewStyles).length > 0; return isPreview ? ( @@ -69,24 +70,7 @@ export const WRAPPER_STYLES = { /> ); - })} - - -{/* Docs */} - - - -```jsx -import { FileUploadItem } from '@alfalab/core-components/file-upload-item'; -``` + }, +}; -} - changelog={{Changelog}} - props={} -/> +export default meta; diff --git a/packages/file-upload-item/src/docs/description.mdx b/packages/file-upload-item/src/docs/description.mdx index 653c069751..1e05832802 100644 --- a/packages/file-upload-item/src/docs/description.mdx +++ b/packages/file-upload-item/src/docs/description.mdx @@ -1,6 +1,6 @@ -Компонент загружаемого файла +## Примеры -```jsx live +```jsx live mobileHeight={500} <> + - - } - showDelete={false} + showDelete={true} /> ``` diff --git a/packages/file-upload-item/src/docs/development.mdx b/packages/file-upload-item/src/docs/development.mdx new file mode 100644 index 0000000000..fb39c91ec9 --- /dev/null +++ b/packages/file-upload-item/src/docs/development.mdx @@ -0,0 +1,12 @@ +import { ArgsTable } from '@storybook/addon-docs'; +import { FileUploadItem } from '../index'; + +## Подключение + +```jsx +import { FileUploadItem } from '@alfalab/core-components/file-upload-item'; +``` + +## Свойства + +