From 623638ba3a59aee99544b71a994ba45cee13a999 Mon Sep 17 00:00:00 2001
From: David Floegel <mail@davidfloegel.com>
Date: Thu, 8 Apr 2021 08:51:36 +0100
Subject: [PATCH 1/3] feat: create demo for new usePropsExplorer hook

---
 packages/pretty-proptypes/src/index.js        |  1 +
 .../src/usePropsExplorer/index.js             | 33 +++++++++
 stories/usePropsExplorer.stories.js           | 72 +++++++++++++++++++
 3 files changed, 106 insertions(+)
 create mode 100644 packages/pretty-proptypes/src/usePropsExplorer/index.js
 create mode 100644 stories/usePropsExplorer.stories.js

diff --git a/packages/pretty-proptypes/src/index.js b/packages/pretty-proptypes/src/index.js
index de0504d9..1a157662 100644
--- a/packages/pretty-proptypes/src/index.js
+++ b/packages/pretty-proptypes/src/index.js
@@ -3,3 +3,4 @@ export { default } from './Props';
 export { default as PropsTable } from './PropsTable';
 export { default as components } from './components';
 export { default as HybridLayout } from './HybridLayout';
+export { default as usePropsExplorer } from './usePropsExplorer';
diff --git a/packages/pretty-proptypes/src/usePropsExplorer/index.js b/packages/pretty-proptypes/src/usePropsExplorer/index.js
new file mode 100644
index 00000000..baa84655
--- /dev/null
+++ b/packages/pretty-proptypes/src/usePropsExplorer/index.js
@@ -0,0 +1,33 @@
+import getPropTypes from '../getPropTypes';
+
+const getProps = props => {
+  if (props && props.component) {
+    return getPropTypes(props.component);
+  }
+  return null;
+};
+
+export default function usePropsExplorer(props) {
+  const { component } = props;
+  if (component) {
+    /* $FlowFixMe the component prop is typed as a component because
+         that's what people pass to Props and the ___types property shouldn't
+         exist in the components types so we're just going to ignore this error */
+    if (component.___types) {
+      props = { type: 'program', component: component.___types };
+    } else {
+      /* eslint-disable-next-line no-console */
+      console.error(
+        'A component was passed to <Props> but it does not have types attached.\n' +
+          'babel-plugin-extract-react-types may not be correctly installed.\n' +
+          '<Props> will fallback to the props prop to display types.'
+      );
+    }
+  }
+
+  let propTypes = getProps(props) || null;
+
+  return {
+    propTypes
+  };
+}
diff --git a/stories/usePropsExplorer.stories.js b/stories/usePropsExplorer.stories.js
new file mode 100644
index 00000000..a11f3ad5
--- /dev/null
+++ b/stories/usePropsExplorer.stories.js
@@ -0,0 +1,72 @@
+// @flow
+import React from 'react';
+
+import { usePropsExplorer } from 'pretty-proptypes';
+import FlowComponent from './FlowComponent';
+import TypeScriptComponent from './TypeScriptComponent';
+
+export default {
+  title: 'Example/usePropsExplorer'
+};
+
+const Template = args => {
+  const { propTypes } = usePropsExplorer({ component: TypeScriptComponent });
+
+  return (
+    <div>
+      <h1>usePropsExplorer</h1>
+
+      <p>
+        The usePropsExplorer hook takes a component and will return all prop types for said
+        component. This gives the consumer 100% freedom on how to handle the prop types.
+      </p>
+
+      <table style={{ width: '100%' }}>
+        <thead>
+          <tr>
+            <th align="left" width="200">
+              Prop name
+            </th>
+            <th align="left" width="150">
+              Required?
+            </th>
+            <th align="left" width="150">
+              Type
+            </th>
+            <th align="left" width="200">
+              Default
+            </th>
+            <th align="left">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {propTypes.map(prop => (
+            <tr key={prop.key.name}>
+              <td>{prop.key.name}</td>
+              <td>{prop.optional ? 'no' : 'yes'}</td>
+              <td>{prop.value.kind}</td>
+              <td>{prop.default ? prop.default.value : ''}</td>
+              <td>
+                {prop.leadingComments
+                  ? prop.leadingComments.reduce((acc, { value }) => acc.concat(`\n${value}`), '')
+                  : ''}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export const Flow = Template.bind({});
+
+Flow.args = {
+  component: FlowComponent
+};
+
+export const TypeScript = Template.bind({});
+
+TypeScript.args = {
+  component: TypeScriptComponent
+};

From 5e791d932892b49c0812fe3501519913fa2c573a Mon Sep 17 00:00:00 2001
From: David Floegel <mail@davidfloegel.com>
Date: Thu, 8 Apr 2021 09:04:03 +0100
Subject: [PATCH 2/3] refactor: Do not return an object from the hook

---
 packages/pretty-proptypes/src/usePropsExplorer/index.js | 4 +---
 stories/usePropsExplorer.stories.js                     | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/pretty-proptypes/src/usePropsExplorer/index.js b/packages/pretty-proptypes/src/usePropsExplorer/index.js
index baa84655..c9162415 100644
--- a/packages/pretty-proptypes/src/usePropsExplorer/index.js
+++ b/packages/pretty-proptypes/src/usePropsExplorer/index.js
@@ -27,7 +27,5 @@ export default function usePropsExplorer(props) {
 
   let propTypes = getProps(props) || null;
 
-  return {
-    propTypes
-  };
+  return propTypes;
 }
diff --git a/stories/usePropsExplorer.stories.js b/stories/usePropsExplorer.stories.js
index a11f3ad5..2673b9c8 100644
--- a/stories/usePropsExplorer.stories.js
+++ b/stories/usePropsExplorer.stories.js
@@ -10,7 +10,7 @@ export default {
 };
 
 const Template = args => {
-  const { propTypes } = usePropsExplorer({ component: TypeScriptComponent });
+  const propTypes = usePropsExplorer({ component: TypeScriptComponent });
 
   return (
     <div>

From 2904bbc8f8192fda95de01cbc86d2bbb7ee19f50 Mon Sep 17 00:00:00 2001
From: David Floegel <mail@davidfloegel.com>
Date: Thu, 8 Apr 2021 09:10:44 +0100
Subject: [PATCH 3/3] fix: use correct components in storybook story

---
 stories/usePropsExplorer.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/usePropsExplorer.stories.js b/stories/usePropsExplorer.stories.js
index 2673b9c8..b52b71fa 100644
--- a/stories/usePropsExplorer.stories.js
+++ b/stories/usePropsExplorer.stories.js
@@ -10,7 +10,7 @@ export default {
 };
 
 const Template = args => {
-  const propTypes = usePropsExplorer({ component: TypeScriptComponent });
+  const propTypes = usePropsExplorer({ component: args.component });
 
   return (
     <div>