Merge pull request #42 from Yandex-Practicum/fix_documentation

fix(documentation): add props component, fix documentations and versions

package.json

@@ -45,7 +45,6 @@
     "@babel/preset-react": "^7.13.13",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
-    "@reach/router": "1.3.4",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -60,11 +59,9 @@
     "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-plugin-typescript-to-proptypes": "^1.0.0",
     "cross-env": "^7.0.3",
-    "docz": "^2.4.0",
+    "docz": "^2.3.1",
     "dot-json": "^1.2.0",
     "eslint": "^7.11.0",
-    "gatsby-link": "4.1.0",
-    "gatsby-react-router-scroll": "5.12.1",
     "husky": "^4.2.5",
     "npx": "^10.2.2",
     "prettier": "^2.2.1",

src/__docz__/button.mdx

@@ -3,13 +3,21 @@ name: Button
 route: /button
 ---
 
-import { Playground, Props } from 'docz'
+import { Playground } from 'docz'
 import { Button }  from '../';
+import { Props } from './components/props';
 
 # Button
 
-## Properties
-<Props of={Button} />
+## Custom properties
+
+<Props whiteList={[
+    'type',
+    'size',
+    'onClick',
+    'extraClass',
+    'htmlType',
+]} of={Button} />
 
 ## Primary small
 
@@ -46,3 +54,8 @@ import { Button }  from '../';
 <Playground>
     <Button type="secondary" size="large">Нажми на меня</Button>
 </Playground>
+
+
+## All properties
+
+<Props of={Button} />

src/__docz__/components/props.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useComponentProps } from 'docz';
+import components from 'gatsby-theme-docz/src/components';
+import { ComponentWithDocGenInfo } from 'docz/dist/components/Props';
+import { get } from 'lodash/fp';
+import { getPropType, filterProps } from './props.utils';
+
+const PropsBase = components.props;
+
+export const Props = ({
+    of: component,
+    whiteList,
+}: {
+    of: ComponentWithDocGenInfo;
+    whiteList: string[];
+}) => {
+    const fileName = get('__filemeta.filename', component);
+    const filemetaName = get('__filemeta.name', component);
+    const componentName = filemetaName || get('displayName', component) || get('name', component);
+
+    const props = useComponentProps({ componentName, fileName });
+    const filteredProps = filterProps(props, { whiteList });
+    return <PropsBase props={filteredProps} getPropType={getPropType} />;
+};

src/__docz__/components/props.utils.tsx

@@ -0,0 +1,96 @@
+import capitalize from 'capitalize';
+import { get } from 'lodash/fp';
+import { PropType, FlowType } from 'gatsby-theme-docz/src/components/Props';
+
+/*
+  Не типизирую, так как это копипаста из библиотеки,
+  функция getPropType не экспортируется из нее, потому пришлось копировать :(
+ */
+const RE_OBJECTOF = /(?:React\.)?(?:PropTypes\.)?objectOf\((?:React\.)?(?:PropTypes\.)?(\w+)\)/;
+
+const getTypeStr = (type: any): any => {
+    switch (type.name.toLowerCase()) {
+        case 'instanceof':
+            return `Class(${type.value})`;
+        case 'enum':
+            if (type.computed) return type.value;
+            return type.value ? type.value.map((v: any) => `${v.value}`).join(' │ ') : type.raw;
+        case 'union':
+            return type.value
+                ? type.value.map((t: any) => `${getTypeStr(t)}`).join(' │ ')
+                : type.raw;
+        case 'array':
+            return type.raw;
+        case 'arrayof':
+            return `Array<${getTypeStr(type.value)}>`;
+        case 'custom':
+            if (type.raw.indexOf('function') !== -1 || type.raw.indexOf('=>') !== -1)
+                return 'Custom(Function)';
+            else if (type.raw.toLowerCase().indexOf('objectof') !== -1) {
+                const m = type.raw.match(RE_OBJECTOF);
+                if (m && m[1]) return `ObjectOf(${capitalize(m[1])})`;
+                return 'ObjectOf';
+            }
+            return 'Custom';
+        case 'bool':
+            return 'Boolean';
+        case 'func':
+            return 'Function';
+        case 'shape':
+            // eslint-disable-next-line no-case-declarations
+            const shape = type.value;
+            // eslint-disable-next-line no-case-declarations
+            const rst: any = {};
+            Object.keys(shape).forEach((key) => {
+                rst[key] = getTypeStr(shape[key]);
+            });
+
+            return JSON.stringify(rst, null, 2);
+        default:
+            return type.name;
+    }
+};
+
+export const humanize = (type: any) => getTypeStr(type);
+
+export const getPropType = (prop: any) => {
+    const propName = get('name', prop.flowType || prop.type);
+    if (!propName) return null;
+
+    const isEnum = propName.startsWith('"') || propName === 'enum';
+    const name = isEnum ? 'enum' : propName;
+    const value = get('type.value', prop);
+    if (!name) return null;
+
+    if (
+        (isEnum && typeof value === 'string') ||
+        (!prop.flowType && !isEnum && !value) ||
+        (prop.flowType && !prop.flowType.elements)
+    ) {
+        return name;
+    }
+
+    return prop.flowType ? humanize(prop.flowType) : humanize(prop.type);
+};
+
+/*
+  Далее идут реальные функции, которые написано под компонент
+ */
+
+export const filterProps = (
+    componentProps: Record<string, PropType | FlowType>,
+    { whiteList }: { whiteList: string[] }
+): Record<string, PropType | FlowType> => {
+    if (whiteList) {
+        return whiteList.reduce(
+            (acc: Record<typeof whiteList[number], PropType | FlowType>, key) => {
+                if (componentProps[key]) {
+                    acc[key] = componentProps[key];
+                }
+                return acc;
+            },
+            {}
+        );
+    }
+    return componentProps;
+};

src/__docz__/email-input.mdx

@@ -2,15 +2,23 @@
 name: EmailInput
 route: /email-input
 ---
-import { Playground, Props } from 'docz'
+import { Playground } from 'docz'
 import { EmailInput }  from '../';
+import { Props } from './components/props';
 
 
 # EmailInput
 
-## Properties
+## Custom properties
 
-<Props of={EmailInput} />
+<Props whiteList={[
+    'value',
+    'size',
+    'placeholder',
+    'isIcon',
+    'extraClass',
+    'onChange',
+]} of={EmailInput} />
 
 ## Basic usage
 
@@ -31,3 +39,6 @@ import { EmailInput }  from '../';
 
 
 
+## All properties
+
+<Props of={EmailInput} />

src/__docz__/input.mdx

@@ -2,15 +2,31 @@
 name: Input
 route: /input
 ---
-import { Playground, Props } from 'docz'
+import { Playground } from 'docz'
 import { Input }  from '../';
+import { Props } from './components/props';
 
 
 # Input
 
-## Properties
+## Custom properties
 
-<Props of={Input} />
+<Props whiteList={[
+    'value',
+    'type',
+    'placeholder',
+    'success',
+    'error',
+    'disabled',
+    'icon',
+    'errorText',
+    'size',
+    'extraClass',
+    'onChange',
+    'onIconClick',
+    'onBlur',
+    'onFocus',
+]} of={Input} />
 
 ## Basic usage
 
@@ -43,4 +59,7 @@ import { Input }  from '../';
 
 
 
+## All properties
+
+<Props of={Input} />
 

src/__docz__/password-input.mdx

@@ -2,15 +2,23 @@
 name: PasswordInput
 route: /password-input
 ---
-import { Playground, Props } from 'docz'
+import { Playground } from 'docz'
 import { PasswordInput }  from '../';
+import { Props } from './components/props';
 
 
 # PasswordInput
 
-## Properties
+## Custom properties
 
-<Props of={PasswordInput} />
+<Props whiteList={[
+    'value',
+    'placeholder',
+    'size',
+    'icon',
+    'extraClass',
+    'onChange',
+]} of={PasswordInput} />
 
 ## Basic usage
 
@@ -40,6 +48,9 @@ import { PasswordInput }  from '../';
 </Playground>
 
 
+## All properties
+
+<Props of={PasswordInput} />