From 8fffa2682074e94e959aba17d0755c8515d1239f Mon Sep 17 00:00:00 2001
From: Mickael Zhang <mickael.zhg@gmail.com>
Date: Fri, 31 Jan 2020 12:04:39 +0100
Subject: [PATCH] feat: add hook to find docgen props (#1371)

* feat: setup test case

* feat: add component props hook

* feat: remove test example
---
 core/docz/src/components/Props.tsx       | 48 +++-----------------
 core/docz/src/hooks/index.ts             |  1 +
 core/docz/src/hooks/useComponentProps.ts | 56 ++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 43 deletions(-)
 create mode 100644 core/docz/src/hooks/useComponentProps.ts

diff --git a/core/docz/src/components/Props.tsx b/core/docz/src/components/Props.tsx
index bddcfc429..151c5314b 100644
--- a/core/docz/src/components/Props.tsx
+++ b/core/docz/src/components/Props.tsx
@@ -1,12 +1,9 @@
 import * as React from 'react'
-import { createElement, SFC, ComponentType, useMemo } from 'react'
-import { assoc, first, get, mapValues, kebabCase } from 'lodash/fp'
+import { SFC, ComponentType } from 'react'
+import { get } from 'lodash/fp'
 import capitalize from 'capitalize'
-import marksy from 'marksy'
-import { pascalCase } from 'pascal-case'
 
-import { doczState } from '../state'
-import { useComponents } from '../hooks'
+import { useComponents, useComponentProps } from '../hooks'
 import { humanize } from '../utils/humanize-prop'
 
 export interface EnumValue {
@@ -111,48 +108,13 @@ export const Props: SFC<PropsProps> = ({
   ...rest
 }) => {
   const components = useComponents()
-  const { props: stateProps } = React.useContext(doczState.context)
   const PropsComponent = components.props
-  const filename = get('__filemeta.filename', component)
+  const fileName = get('__filemeta.filename', component)
   const filemetaName = get('__filemeta.name', component)
   const componentName =
     filemetaName || get('displayName', component) || get('name', component)
 
-  const componentMatcher = (componentName: string, item: any) => {
-    const matchingPatterns = [
-      filename,
-      `/${componentName}.`,
-      `/${kebabCase(componentName)}.`,
-      `/${pascalCase(componentName)}.`,
-    ]
-    return !!matchingPatterns.find(pattern => item.key.includes(pattern))
-  }
-
-  const found =
-    stateProps &&
-    stateProps.length > 0 &&
-    stateProps.find(item => componentMatcher(componentName, item))
-
-  const value = get('value', found) || []
-  const firstDefinition = first(value)
-  const definition = value.find((i: any) => i.displayName === componentName)
-
-  const compile = useMemo(
-    () => marksy({ createElement, elements: components }),
-    [components]
-  )
-
-  const props = useMemo(() => {
-    const props = get('props', definition || firstDefinition)
-    const parseDescs = mapValues((prop: any) => {
-      const desc = get('description', prop)
-      return !desc ? prop : assoc('description', compile(desc).tree, prop)
-    })
-
-    return parseDescs(props)
-  }, [compile, definition || firstDefinition])
-
-  if (!props) return null
+  const props = useComponentProps({ componentName, fileName })
   if (!PropsComponent) return null
   return (
     <PropsComponent
diff --git a/core/docz/src/hooks/index.ts b/core/docz/src/hooks/index.ts
index 2342f9ac6..2405e41d3 100644
--- a/core/docz/src/hooks/index.ts
+++ b/core/docz/src/hooks/index.ts
@@ -1,5 +1,6 @@
 export * from './useComponents'
 export { useConfig, UseConfigObj } from './useConfig'
+export { useComponentProps } from './useComponentProps'
 export { useCurrentDoc } from './useCurrentDoc'
 export { useDataServer } from './useDataServer'
 export { useDocs } from './useDocs'
diff --git a/core/docz/src/hooks/useComponentProps.ts b/core/docz/src/hooks/useComponentProps.ts
new file mode 100644
index 000000000..4bbf98765
--- /dev/null
+++ b/core/docz/src/hooks/useComponentProps.ts
@@ -0,0 +1,56 @@
+import { createElement, useContext, useMemo } from 'react'
+import { assoc, first, get, mapValues, kebabCase } from 'lodash/fp'
+import { pascalCase } from 'pascal-case'
+import marksy from 'marksy'
+
+import { useComponents } from '../hooks'
+import { doczState } from '../state'
+
+interface UseComponentPropsParams {
+  componentName: string
+  fileName: string
+}
+
+export const useComponentProps = ({
+  componentName,
+  fileName,
+}: UseComponentPropsParams) => {
+  const components = useComponents()
+  const { props: stateProps } = useContext(doczState.context)
+
+  const componentMatcher = (componentName: string, item: any) => {
+    const matchingPatterns = [
+      fileName,
+      `/${componentName}.`,
+      `/${kebabCase(componentName)}.`,
+      `/${pascalCase(componentName)}.`,
+    ]
+    return !!matchingPatterns.find(pattern => item.key.includes(pattern))
+  }
+
+  const found =
+    stateProps &&
+    stateProps.length > 0 &&
+    stateProps.find(item => componentMatcher(componentName, item))
+
+  const value = get('value', found) || []
+  const firstDefinition = first(value)
+  const definition = value.find((i: any) => i.displayName === componentName)
+
+  const compile = useMemo(
+    () => marksy({ createElement, elements: components }),
+    [components]
+  )
+
+  const props = useMemo(() => {
+    const props = get('props', definition || firstDefinition)
+    const parseDescs = mapValues((prop: any) => {
+      const desc = get('description', prop)
+      return !desc ? prop : assoc('description', compile(desc).tree, prop)
+    })
+
+    return parseDescs(props)
+  }, [compile, definition || firstDefinition])
+
+  return props
+}