Add doc for more handlers (#780)

Author: danez

packages/website/src/pages/docs/reference/handlers/_meta.json

@@ -1,10 +1,12 @@
 {
+  "child-context-type-handler": "childContextTypeHandler",
   "code-type-handler": "codeTypeHandler",
   "component-docblock-handler": "componentDocblockHandler",
   "component-methods-handler": "componentMethodsHandler",
+  "context-type-handler": "contextTypeHandler",
   "default-props-handler": "defaultPropsHandler",
   "display-name-handler": "displayNameHandler",
   "prop-docblock-handler": "propDocblockHandler",
-  "proptype-composition-handler": "propTypeCompositionHandler",
-  "proptype-handler": "propTypeHandler"
+  "prop-type-composition-handler": "propTypeCompositionHandler",
+  "prop-type-handler": "propTypeHandler"
 }

packages/website/src/pages/docs/reference/handlers/child-context-type-handler.mdx

@@ -0,0 +1 @@
+# childContextTypeHandler

packages/website/src/pages/docs/reference/handlers/component-docblock-handler.mdx

@@ -3,9 +3,10 @@
 Reads the react components leading block comment and adds its content as
 description to the documentation. This works on all component types.
 
-## Example
+## Examples
 
-The following component will result in the following documentation
+When the `componentDocblockHandler` is active the following component will
+result in the output below
 
 ```ts {1-3} filename="component.tsx"
 /**
@@ -14,7 +15,9 @@ The following component will result in the following documentation
 () => <div />;
 ```
 
-```json {3} filename="Result"
+## Output
+
+```json {3} filename="JSON"
 [
   {
     "description": "This is my component and this is its description."

packages/website/src/pages/docs/reference/handlers/component-methods-handler.mdx

@@ -9,10 +9,10 @@ detected:
 - Assignment of methods to static properties on Class or Function components
 - Methods defined in the `useImperativeHandle()` hook in Function components
 
-## Example
+## Examples
 
 When the `componentMethodsHandler` is active any of these components will result
-in the following documentation
+in the output below
 
 ```ts {2-3} filename="component.tsx"
 class MyComponent extends React.Component {
@@ -62,7 +62,9 @@ forwardRef(function MyComponent(_, ref) {
 });
 ```
 
-```json {3-23} filename="Result"
+## Output
+
+```json {3-23} filename="JSON"
 [
   {
     "methods": [

packages/website/src/pages/docs/reference/handlers/context-type-handler.mdx

@@ -0,0 +1 @@
+# contextTypeHandler

packages/website/src/pages/docs/reference/handlers/default-props-handler.mdx

@@ -8,10 +8,10 @@ documentation. Supported variants are:
   components
 - Default values in destructuring the prop argument in Function components
 
-## Example
+## Examples
 
 When the `defaultPropsHandler` is active any of these components will result in
-the following documentation
+the output below
 
 ```ts {2-4} filename="component.tsx"
 class MyComponent extends React.Component {
@@ -48,7 +48,9 @@ MyComponent.defaultProps = {
 ({ a = '1' }) => <div />;
 ```
 
-```json {5-9} filename="Result"
+## Output
+
+```json {5-9} filename="JSON"
 [
   {
     "props": {

packages/website/src/pages/docs/reference/handlers/display-name-handler.mdx

@@ -9,13 +9,13 @@ names and will use the first one found in order:
 - The name of a Function or Class component
 - The variable name that an anonymous Function Component is assigned to
 
-## Example
+## Examples
 
 When the `displayNameHandler` is active any of these components will result in
-the following documentation
+the output below
 
 ```ts {2} filename="component.tsx"
-class extends React.Component {
+export default class extends React.Component {
   static displayName = 'DisplayName';
   render() {
     return <div />;
@@ -59,7 +59,9 @@ function DisplayName() {
 const DisplayName = () => <div />;
 ```
 
-```json {3} filename="Result"
+## Output
+
+```json {3} filename="JSON"
 [
   {
     "displayName": "DisplayName"

packages/website/src/pages/docs/reference/handlers/prop-docblock-handler.mdx

@@ -1 +1,70 @@
 # propDocblockHandler
+
+Tries to find the prop types on react components and extracts their Docblock
+description. It uses the same logic as the
+[`propTypeHandler`](./prop-type-handler.mdx) to find the prop types.
+
+## Examples
+
+When the `propDocblockHandler` is active any of these components will result in
+the output below
+
+```ts {1,4-8} filename="component.tsx"
+import PropTypes from 'prop-types';
+
+class MyComponent extends React.Component {
+  static propTypes = {
+    /** Foo */
+    foo: PropTypes.string,
+    bar: PropTypes.number,
+  };
+  render() {
+    return <div />;
+  }
+}
+```
+
+```ts {1,9-13} filename="component.tsx"
+import PropTypes from 'prop-types';
+
+class MyComponent extends React.Component {
+  render() {
+    return <div />;
+  }
+}
+
+MyComponent.propTypes = {
+  /** Foo */
+  foo: PropTypes.string,
+  bar: PropTypes.number,
+};
+```
+
+```ts {1,5-9} filename="component.tsx"
+import PropTypes from 'prop-types';
+
+const MyComponent = () => <div />;
+
+MyComponent.propTypes = {
+  /** Foo */
+  foo: PropTypes.string,
+  bar: PropTypes.number,
+};
+```
+
+## Output
+
+```json {5,8} filename="JSON"
+[
+  {
+    "props": {
+      "foo": {
+        "description": "Foo"
+      },
+      "bar": {
+        "description": ""
+      }
+    }
+  }
+]
+```

packages/website/src/pages/docs/reference/handlers/proptype-composition-handler.mdx renamed to packages/website/src/pages/docs/reference/handlers/prop-type-composition-handler.mdx

@@ -0,0 +1,77 @@
+# propTypeHandler
+
+Tries to find the prop types on react components. It looks for:
+
+- A static property called `propTypes` on Class components
+- Assignment to a property called `propTypes` on Function or Class components
+
+The prop types that are used need to be imported either from the `react` or the
+[`prop-types`](https://www.npmjs.com/package/prop-types) NPM package.
+
+## Examples
+
+When the `propTypeHandler` is active any of these components will result in the
+output below
+
+```ts {1,4-7} filename="component.tsx"
+import PropTypes from 'prop-types';
+
+class MyComponent extends React.Component {
+  static propTypes = {
+    foo: PropTypes.string,
+    bar: PropTypes.number.isRequired,
+  };
+  render() {
+    return <div />;
+  }
+}
+```
+
+```ts {1,9-12} filename="component.tsx"
+import PropTypes from 'prop-types';
+
+class MyComponent extends React.Component {
+  render() {
+    return <div />;
+  }
+}
+
+MyComponent.propTypes = {
+  foo: PropTypes.string,
+  bar: PropTypes.number.isRequired,
+};
+```
+
+```ts {1,5-8} filename="component.tsx"
+import PropTypes from 'prop-types';
+
+const MyComponent = () => <div />;
+
+MyComponent.propTypes = {
+  foo: PropTypes.string,
+  bar: PropTypes.number.isRequired,
+};
+```
+
+## Output
+
+```json {5-8,11-14} filename="JSON"
+[
+  {
+    "props": {
+      "foo": {
+        "type": {
+          "name": "string"
+        },
+        "required": false
+      },
+      "bar": {
+        "type": {
+          "name": "number"
+        },
+        "required": true
+      }
+    }
+  }
+]
+```