Merge pull request #740 from hshoff/harry-local-dev

[demo] bump deps, updates + fixes

.gitignore

@@ -20,7 +20,6 @@ coverage/
 dist/
 esm/
 lib/
-public/
 node_modules/
 tmp/
 

package.json

@@ -46,6 +46,7 @@
     "@types/jest": "^24.0.18",
     "@types/jsdom": "^12.2.4",
     "@types/react-test-renderer": "^16.9.0",
+    "@types/webpack": "^4.41.17",
     "coveralls": "^3.0.6",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
@@ -146,10 +147,20 @@
         {
           "files": "./packages/vx-demo/**",
           "rules": {
-            "@typescript-eslint/no-explicit-any": ["warn", { "fixToUnknown": false }],
-            "import/no-unresolved": ["error", {
-              "ignore": ["^!!raw-loader!.*"]
-            }],
+            "@typescript-eslint/no-explicit-any": [
+              "warn",
+              {
+                "fixToUnknown": false
+              }
+            ],
+            "import/no-unresolved": [
+              "error",
+              {
+                "ignore": [
+                  "^!!raw-loader!.*"
+                ]
+              }
+            ],
             "import/no-webpack-loader-syntax": "off",
             "jsx-a11y/anchor-is-valid": "off",
             "jsx-a11y/label-has-associated-control": "off",

packages/vx-demo/package.json

@@ -65,7 +65,7 @@
     "d3-shape": "^1.0.6",
     "d3-time-format": "^2.0.5",
     "markdown-loader": "^5.1.0",
-    "next": "^9.0.5",
+    "next": "9.4.4",
     "nprogress": "^0.2.0",
     "prismjs": "^1.19.0",
     "raw-loader": "^4.0.0",

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

@@ -5,7 +5,6 @@ import Prism from 'prismjs';
 import 'prismjs/components/prism-jsx.min';
 import 'prismjs/components/prism-typescript.min';
 import 'prismjs/components/prism-tsx.min';
-import 'prismjs/themes/prism.css';
 
 const Lines = ({ lines }: { lines: number[] }) => (
   <span aria-hidden="true" className="line-numbers-rows">

packages/vx-demo/src/components/Gallery/index.tsx

@@ -1,5 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
+import cx from 'classnames';
 import Tilt from 'react-tilt';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
 
 import * as AreaTile from './AreaTile';
 import * as AxisTile from './AxisTile';
@@ -88,10 +91,12 @@ const tiles = [
 ];
 
 export default function Gallery() {
-  const [activePackageFilter, setActivePackageFilter] = useState<VxPackage | null>(null);
-  const filteredTiles = activePackageFilter
+  const router = useRouter();
+  const { pkg } = router.query;
+
+  const filteredTiles = pkg
     ? tiles.filter(Tile =>
-        exampleToVxDependencyLookup[Tile.packageJson.name]?.has(activePackageFilter),
+        exampleToVxDependencyLookup[Tile.packageJson.name]?.has(pkg as VxPackage),
       )
     : tiles;
 
@@ -101,20 +106,19 @@ export default function Gallery() {
         <div className="filters">
           <h6>Examples by package</h6>
           {vxPackages.map(vxPackage => (
-            <button
-              key={vxPackage}
-              className={activePackageFilter === vxPackage ? 'emphasize' : undefined}
-              onClick={() =>
-                setActivePackageFilter(activePackageFilter === vxPackage ? null : vxPackage)
-              }
-            >
-              @vx/{vxPackage}
-            </button>
+            <Link key={vxPackage} href={{ pathname: '/gallery', query: { pkg: vxPackage } }}>
+              <a
+                className={cx('filter-button', {
+                  emphasize: pkg === vxPackage,
+                })}
+              >{`@vx/${vxPackage}`}</a>
+            </Link>
           ))}
         </div>
         <div className="grid">
           {filteredTiles.map((Tile, i) => (
             <Tilt key={`tile-${i}`} className="tilt" options={tiltOptions}>
+              {/* eslint-disable react/jsx-pascal-case */}
               <Tile.default />
             </Tilt>
           ))}
@@ -140,7 +144,7 @@ export default function Gallery() {
         h6 {
           margin: 0 4px 0 0;
         }
-        button {
+        .filter-button {
           display: block;
           cursor: pointer;
           border: none;
@@ -149,6 +153,8 @@ export default function Gallery() {
           color: #fc2e1c;
           padding: 0;
           margin: 4px 4px 12px 0;
+          font-size: 14px;
+          line-height: 1rem;
         }
         .emphasize {
           font-weight: bold;

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

@@ -27,9 +27,7 @@ export default function PackageList({
             </li>
             <li className={cx(cx(emphasizePackage === 'axis' && 'emphasize'))}>
               <Link href="/docs/axis">
-                <a>
-                  <a>@vx/axis</a>
-                </a>
+                <a>@vx/axis</a>
               </Link>
               {!compact && <p>Annotate your coordinate system</p>}
             </li>

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

@@ -12,7 +12,11 @@ type Props = {
 
 const VxDocLink = ({ packageName }: Props) => {
   const url = getDocUrlFromVXPackageName(packageName);
-  return url ? <Link href={url}>{packageName}</Link> : null;
+  return url ? (
+    <Link href={url}>
+      <a>{packageName}</a>
+    </Link>
+  ) : null;
 };
 
 export default VxDocLink;

packages/vx-demo/src/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

packages/vx-demo/src/next.config.js

@@ -1,43 +1,38 @@
 /* eslint-disable no-undef */
-const withCss = require('@zeit/next-css');
 const path = require('path');
 
-module.exports = withCss({
+module.exports = {
   typescript: {
     // enable rendering when there are type errors
     ignoreDevErrors: true,
     ignoreBuildErrors: true,
   },
   webpack: config => {
-    // append docgen loader to the babel loader (executed bottom->top)
-    const babelConfig = config.module.rules[0];
-    const initialBabelUse = babelConfig.use;
-    babelConfig.use = [
-      initialBabelUse,
-      {
-        loader: 'react-docgen-typescript-loader',
-        options: {
-          // display types from outside a component's source even tho
-          // we hide these with the propFilter below, if we don't do
-          // this the component's own props become any
-          tsconfigPath: path.resolve(__dirname, './tsconfig.json'),
-          // filter props like React.HTMLProps/React.SVGProps
-          propFilter(prop) {
-            if (prop.parent) {
-              return !prop.parent.fileName.includes('node_modules');
-            }
-
-            return true;
+    config.module.rules.push({
+      test: /\.tsx?$/,
+      use: [
+        {
+          loader: 'react-docgen-typescript-loader',
+          options: {
+            // display types from outside a component's source even tho
+            // we hide these with the propFilter below, if we don't do
+            // this the component's own props become any
+            tsconfigPath: path.resolve(__dirname, './tsconfig.json'),
+            // filter props like React.HTMLProps/React.SVGProps
+            propFilter(prop) {
+              if (prop.parent) {
+                return !prop.parent.fileName.includes('node_modules');
+              }
+              return true;
+            },
           },
         },
-      },
-    ];
+      ],
+    });
 
-    // apply parsing to imports from other packages src/ folders
-    // docgen doesn't work on transpiled packages, and ts parsing isn't
-    // applied outside of vx-demo without this
+    const babelConfig = config.module.rules[0];
     babelConfig.include.push(/vx-.*\/src/);
 
     return config;
   },
-});
+};

packages/vx-demo/src/pages/_app.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AppProps } from 'next/app';
+import 'prismjs/themes/prism.css';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp;

packages/vx-demo/src/pages/Docs.tsx → packages/vx-demo/src/pages/docs.tsx

@@ -7,17 +7,12 @@ export default function Docs() {
   return (
     <Page title="documentation">
       <div className="container">
-        <h1>VX Packages</h1>
+        <h1>Documentation</h1>
         <p>
-          <pre>
-            <code>vx</code>
-          </pre>{' '}
-          is a suite of several low-level standalone packages for building visual interfaces with{' '}
-          <pre>
-            <code>react</code>
-          </pre>
-          . Packages can be mixed and used together depending on your use case, or you can simply
-          add the umbrella <a href="/docs/vx">@vx/vx</a> package to use them all.
+          <code>vx</code> is a suite of several low-level standalone packages for building visual
+          interfaces with <code>react</code>. Packages can be mixed and used together depending on
+          your use case, or you can simply add the umbrella <a href="/docs/vx">@vx/vx</a> package to
+          use them all.
           <br /> <br />
           Individual packages can be roughly categorized as follows:
         </p>

packages/vx-demo/src/pages/index.tsx

@@ -1,3 +1,3 @@
-import Home from './Home';
+import Home from './home';
 
 export default Home;

packages/vx-demo/src/sandboxes/vx-area/Example.tsx

@@ -50,6 +50,8 @@ export default withTooltip<AreaProps, TooltipData>(
     tooltipTop = 0,
     tooltipLeft = 0,
   }: AreaProps & WithTooltipProvidedProps<TooltipData>) => {
+    if (width < 10) return null;
+
     // bounds
     const xMax = width - margin.left - margin.right;
     const yMax = height - margin.top - margin.bottom;

packages/vx-demo/src/sandboxes/vx-axis/Example.tsx

@@ -34,6 +34,8 @@ export default function Example({ width: outerWidth = 800, height: outerHeight =
   const width = outerWidth - margin.left - margin.right;
   const height = outerHeight - margin.top - margin.bottom;
 
+  if (width < 10) return null;
+
   const scales: {
     scale: Scale;
     values: ScaleInput[];

packages/vx-demo/src/sandboxes/vx-brush/AreaChart.tsx

@@ -55,6 +55,7 @@ export default function AreaChart({
   left?: number;
   children?: React.ReactNode;
 }) {
+  if (width < 10) return null;
   return (
     <Group left={left || margin.left} top={top || margin.top}>
       <LinearGradient

packages/vx-demo/src/sandboxes/vx-dots/Example.tsx

@@ -36,6 +36,7 @@ export default withTooltip<DotsProps, PointsRange>(
     tooltipLeft,
     tooltipTop,
   }: DotsProps & WithTooltipProvidedProps<PointsRange>) => {
+    if (width < 10) return null;
     const [showVoronoi, setShowVoronoi] = useState(showControls);
     const svgRef = useRef<SVGSVGElement>(null);
     const xScale = useMemo(