docs(vx-pattern, vx-responsive): convert to docgen

packages/vx-demo/src/components/PackageList.tsx

@@ -136,8 +136,8 @@ export default function PackageList({
               {!compact && <p>Utilities for making making color gradient definitions</p>}
             </li>
             <li className={cx(emphasizePackage === 'pattern' && 'emphasize')}>
-              <a href="/static/docs/vx-pattern.html">@vx/pattern</a>
-              {!compact && <p>Utilities for making pattern definitions</p>}
+              <a href="/docs/pattern">@vx/pattern</a>
+              {!compact && <p>Utilities for creating pattern definitions</p>}
             </li>
             <li className={cx(emphasizePackage === 'text' && 'emphasize')}>
               <a href="/static/docs/vx-text.html">@vx/text</a>
@@ -157,8 +157,8 @@ export default function PackageList({
               {!compact && <p>Lots of mock data sets to play with</p>}
             </li>
             <li className={cx(emphasizePackage === 'responsive' && 'emphasize')}>
-              <a href="/static/docs/vx-responsive.html">@vx/responsive</a>
-              {!compact && <p>Utilities to make responsive visualizations easily</p>}
+              <a href="/docs/responsive">@vx/responsive</a>
+              {!compact && <p>Utilities to make responsive visualizations easy</p>}
             </li>
             <li className={cx(emphasizePackage === 'point' && 'emphasize')}>
               <a href="/static/docs/vx-point.html">@vx/point</a>

packages/vx-demo/src/pages/docs/Pattern.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PatternReadme from '!!raw-loader!../../../../vx-pattern/Readme.md';
+import Circles from '../../../../vx-pattern/src/patterns/Circles';
+import Hexagons from '../../../../vx-pattern/src/patterns/Hexagons';
+import Lines from '../../../../vx-pattern/src/patterns/Lines';
+import Path from '../../../../vx-pattern/src/patterns/Path';
+import Pattern from '../../../../vx-pattern/src/patterns/Pattern';
+import Waves from '../../../../vx-pattern/src/patterns/Waves';
+import DocPage from '../../components/DocPage';
+import { DocGenInfo } from '../../types';
+
+const components = [Pattern, Circles, Hexagons, Lines, Path, Waves].map(
+  component =>
+    // @ts-ignore
+    component.__docgenInfo,
+) as DocGenInfo[];
+
+export default () => <DocPage components={components} readme={PatternReadme} vxPackage="pattern" />;

packages/vx-demo/src/pages/docs/Responsive.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ResponsiveReadme from '!!raw-loader!../../../../vx-responsive/Readme.md';
+import ParentSize from '../../../../vx-responsive/src/components/ParentSize';
+import ScaleSVG from '../../../../vx-responsive/src/components/ScaleSVG';
+import DocPage from '../../components/DocPage';
+import { DocGenInfo } from '../../types';
+
+const components = [ParentSize, ScaleSVG].map(
+  component =>
+    // @ts-ignore
+    component.__docgenInfo,
+) as DocGenInfo[];
+
+export default () => (
+  <DocPage components={components} readme={ResponsiveReadme} vxPackage="responsive" />
+);