fix(docs:styleguidist): Некостыльный @deprecated и другие фиксы для стайлгайда

styleguide/Components/ReactComponent/ReactComponent.js

@@ -4,7 +4,7 @@ import Markdown from '@rsg-components/Markdown';
 import Slot from '@rsg-components/Slot';
 import { Caption, classNames, Link } from '@vkui';
 import { VKUI_PACKAGE } from '../../../shared';
-import { deprecated } from '../../deprecated';
+import { getDeprecatedFromComponentTags } from '../../utils';
 import Heading from '../Heading/index';
 import { SectionSubheading } from '../SectionSubheading/SectionSubheading';
 import './ReactComponent.css';
@@ -15,10 +15,7 @@ const toKebabCase = (str) =>
 const ReactComponent = ({ component, exampleMode }) => {
   const { name, visibleName, pathLine } = component;
   const { description = '', examples = [] } = component.props || {};
-  const isDeprecated = deprecated.includes(name);
-
-  const showPropsPlaceholder =
-    process.env.NODE_ENV === 'development' && process.env.VKUI_STYLEGUIDE_PROPSPARSER !== 1;
+  const deprecated = getDeprecatedFromComponentTags(component);
 
   const githubTag = `cmp:${toKebabCase(visibleName)}`;
   const issuesQuery = `is:open is:issue label:${githubTag}`;
@@ -46,23 +43,26 @@ const ReactComponent = ({ component, exampleMode }) => {
       <Heading
         level={1}
         className={classNames('ReactComponent__name', {
-          'ReactComponent__name--deprecated': isDeprecated,
+          'ReactComponent__name--deprecated': deprecated.isDeprecated,
         })}
       >
         {visibleName}
       </Heading>
+      {deprecated.description && (
+        <Text Component="blockquote" className="Blockquote">
+          <Markdown text={`**@deprecated**: ${deprecated.description}`} />
+        </Text>
+      )}
       {description && <Markdown text={description} />}
       {examples.length > 0 && (
         <Examples examples={examples} name={name} exampleMode={exampleMode} />
       )}
       <SectionSubheading href={`#/${name}?id=props`}>Свойства и методы</SectionSubheading>
-      {showPropsPlaceholder ? (
-        <blockquote className="Blockquote">
-          <Text>
-            В режиме разработки свойства и методы не генерируются по умолчанию. Если они вам
-            необходимы, воспользуйтесь командой <span className="Code">yarn styleguide:props</span>.
-          </Text>
-        </blockquote>
+      {process.env.NODE_ENV === 'development' && process.env.VKUI_STYLEGUIDE_PROPSPARSER !== 1 ? (
+        <Text Component="blockquote" className="Blockquote">
+          В режиме разработки свойства и методы не генерируются по умолчанию. Если они вам нужны,
+          воспользуйтесь командой <code className="Code">yarn docs:styleguide:props</code>.
+        </Text>
       ) : (
         <Slot name="docsTabs" props={component} />
       )}

styleguide/Components/Table/TableRenderer.js

@@ -1,5 +1,5 @@
 import React, { createContext, Fragment, useContext, useEffect, useRef, useState } from 'react';
-import { Icon16MoreHorizontal, Icon16Up } from '@vkontakte/icons';
+import { Icon20HideOutline, Icon20ViewOutline } from '@vkontakte/icons';
 import { noop, throttle } from '@vkontakte/vkjs';
 import { classNames, Text, useAppearance } from '@vkui';
 import NameRenderer from '../Name/NameRenderer';
@@ -95,7 +95,7 @@ export const TableRenderer = ({ columns, rows, getRowKey }) => {
                 <tr className="Table__tr">
                   <td className="Table__td" colSpan={columns.length}>
                     <TogglePropsButton
-                      before={expanded ? <Icon16Up /> : <Icon16MoreHorizontal />}
+                      before={expanded ? <Icon20HideOutline /> : <Icon20ViewOutline />}
                       onClick={() => toggleExpanded(!expanded)}
                     >
                       {expanded ? (

styleguide/Components/TableOfContents/TableOfContents.js

@@ -16,8 +16,8 @@ import {
   SimpleCell,
   useAdaptivityWithJSMediaQueries,
 } from '@vkui';
-import { deprecated } from '../../deprecated';
 import { unstable } from '../../unstable';
+import { getDeprecatedFromComponentTags } from '../../utils';
 import './TableOfContents.css';
 
 function capitalize(string = '') {
@@ -53,33 +53,37 @@ const normalizer = (sections) => {
   return sections.map(
     ({
       name,
-      title,
       content,
       sections: childrenSections = [],
+      href,
       components = [],
       expand = false,
-      search,
+      deprecated = false,
+      ...restProps
     }) => {
       const children = normalizer([
         ...childrenSections,
         ...components.map((component) => {
+          const { isDeprecated } = getDeprecatedFromComponentTags(component);
+
           return {
             name: component.name,
             title: component.title,
             href: component.href,
             content: component.filepath,
+            deprecated: isDeprecated,
           };
         }),
       ]);
 
       return {
-        title,
         name,
         content,
+        sections: children,
         href: content && `#/${name}`,
         expand,
-        search,
-        sections: children,
+        deprecated,
+        ...restProps,
       };
     },
   );
@@ -245,7 +249,7 @@ class TableOfContents extends React.PureComponent {
                     )}
                   </IconButton>
                 )) ||
-                (unstable.includes(section.name) && !deprecated.includes(section.name) && (
+                (unstable.includes(section.name) && (
                   <Icon28WarningTriangleOutline
                     fill="var(--vkui--color_accent_orange)"
                     title="Компонент является нестабильным"
@@ -258,9 +262,7 @@ class TableOfContents extends React.PureComponent {
                 'TableOfContents__section--selected':
                   section.name === this.state.currentSectionName,
               })}
-              indicator={
-                deprecated.includes(section.name) && <Caption level="2">deprecated</Caption>
-              }
+              indicator={section.deprecated && <Caption level="2">deprecated</Caption>}
             >
               {section.title || section.name}
             </SimpleCell>

styleguide/config.js

@@ -99,7 +99,6 @@ const baseConfig = {
       },
     },
   },
-  propsParser: () => ({}),
   exampleMode: 'expand',
   sections: [
     {

styleguide/utils/index.js

@@ -14,4 +14,18 @@ export const perfLogger = {
   },
 };
 
+export const getDeprecatedFromComponentTags = (component) => {
+  const { deprecated } = component?.props?.tags || {};
+
+  const description =
+    process.env.NODE_ENV === 'development' && process.env.VKUI_STYLEGUIDE_PROPSPARSER !== 1
+      ? deprecated?.[0]?.description // baseConfig
+      : deprecated; // prodConfig
+
+  return {
+    isDeprecated: !!deprecated,
+    description,
+  };
+};
+
 export * from './useViewPortSize';