Skip to content

Commit

Permalink
Merge 56f7027 into 5c6cdf8
Browse files Browse the repository at this point in the history
  • Loading branch information
@hshoff
hshoff committed Jun 3, 2020
2 parents 5c6cdf8 + 56f7027 commit 228cf71
Show file tree
Hide file tree
Showing 164 changed files with 5,569 additions and 4,998 deletions.
1 change: 0 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ coverage/
dist/
esm/
lib/
public/
node_modules/
tmp/

Expand Down
19 changes: 15 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/vx-demo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
17 changes: 8 additions & 9 deletions packages/vx-demo/src/components/Codeblock.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import Prism from 'prismjs';
import React from "react";
import ReactDOMServer from "react-dom/server";
import Prism from "prismjs";
// these have sequential dependencies
import 'prismjs/components/prism-jsx.min';
import 'prismjs/components/prism-typescript.min';
import 'prismjs/components/prism-tsx.min';
import 'prismjs/themes/prism.css';
import "prismjs/components/prism-jsx.min";
import "prismjs/components/prism-typescript.min";
import "prismjs/components/prism-tsx.min";

const Lines = ({ lines }: { lines: number[] }) => (
<span aria-hidden="true" className="line-numbers-rows">
Expand All @@ -21,8 +20,8 @@ export default ({ children }: { children: string }) => {
const lines: number[] = new Array(linesNum + 1).fill(1);
const html = [
ReactDOMServer.renderToString(<Lines lines={lines} />),
Prism.highlight(children, Prism.languages.ts, 'tsx'),
].join('');
Prism.highlight(children, Prism.languages.ts, "tsx"),
].join("");

return (
<pre className="codeblock line-numbers">
Expand Down
122 changes: 66 additions & 56 deletions packages/vx-demo/src/components/Gallery/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,51 @@
import React, { useState } from 'react';
import Tilt from 'react-tilt';
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';
import * as BarGroupHorizontalTile from './BarGroupHorizontalTile';
import * as BarGroupTile from './BarGroupTile';
import * as BarStackHorizontalTile from './BarStackHorizontalTile';
import * as BarStackTile from './BarStackTile';
import * as BarsTile from './BarsTile';
import * as BrushTile from './BrushTile';
import * as ChordTile from './ChordTile';
import * as CurvesTile from './CurvesTile';
import * as DendrogramsTile from './DendrogramsTile';
import * as DotsTile from './DotsTile';
import * as DragIITile from './DragIITile';
import * as DragITile from './DragITile';
import * as GeoCustomTile from './GeoCustomTile';
import * as GeoMercatorTile from './GeoMercatorTile';
import * as GlyphsTile from './GlyphsTile';
import * as GradientsTile from './GradientsTile';
import * as HeatmapsTile from './HeatmapsTile';
import * as LegendsTile from './LegendsTile';
import * as LineRadialTile from './LineRadialTile';
import * as LinkTypesTile from './LinkTypesTile';
import * as NetworkTile from './NetworkTile';
import * as PackTile from './PackTile';
import * as PatternsTile from './PatternsTile';
import * as PiesTile from './PiesTile';
import * as PolygonsTile from './PolygonsTile';
import * as RadarTile from './RadarTile';
import * as ResponsiveTile from './ResponsiveTile';
import * as StackedAreasTile from './StackedAreasTile';
import * as StatsPlotTile from './StatsPlotTile';
import * as StreamGraphTile from './StreamGraphTile';
import * as TextTile from './TextTile';
import * as ThresholdTile from './ThresholdTile';
import * as TreemapTile from './TreemapTile';
import * as TreesTile from './TreesTile';
import * as VoronoiTile from './VoronoiTile';
import * as ZoomITile from './ZoomITile';
import { VxPackage } from '../../types';
import * as AreaTile from "./AreaTile";
import * as AxisTile from "./AxisTile";
import * as BarGroupHorizontalTile from "./BarGroupHorizontalTile";
import * as BarGroupTile from "./BarGroupTile";
import * as BarStackHorizontalTile from "./BarStackHorizontalTile";
import * as BarStackTile from "./BarStackTile";
import * as BarsTile from "./BarsTile";
import * as BrushTile from "./BrushTile";
import * as ChordTile from "./ChordTile";
import * as CurvesTile from "./CurvesTile";
import * as DendrogramsTile from "./DendrogramsTile";
import * as DotsTile from "./DotsTile";
import * as DragIITile from "./DragIITile";
import * as DragITile from "./DragITile";
import * as GeoCustomTile from "./GeoCustomTile";
import * as GeoMercatorTile from "./GeoMercatorTile";
import * as GlyphsTile from "./GlyphsTile";
import * as GradientsTile from "./GradientsTile";
import * as HeatmapsTile from "./HeatmapsTile";
import * as LegendsTile from "./LegendsTile";
import * as LineRadialTile from "./LineRadialTile";
import * as LinkTypesTile from "./LinkTypesTile";
import * as NetworkTile from "./NetworkTile";
import * as PackTile from "./PackTile";
import * as PatternsTile from "./PatternsTile";
import * as PiesTile from "./PiesTile";
import * as PolygonsTile from "./PolygonsTile";
import * as RadarTile from "./RadarTile";
import * as ResponsiveTile from "./ResponsiveTile";
import * as StackedAreasTile from "./StackedAreasTile";
import * as StatsPlotTile from "./StatsPlotTile";
import * as StreamGraphTile from "./StreamGraphTile";
import * as TextTile from "./TextTile";
import * as ThresholdTile from "./ThresholdTile";
import * as TreemapTile from "./TreemapTile";
import * as TreesTile from "./TreesTile";
import * as VoronoiTile from "./VoronoiTile";
import * as ZoomITile from "./ZoomITile";
import { VxPackage } from "../../types";
import exampleToVxDependencyLookup, {
vxPackages,
} from '../../sandboxes/exampleToVxDependencyLookup';
} from "../../sandboxes/exampleToVxDependencyLookup";

const tiltOptions = { max: 8, scale: 1 };

Expand Down Expand Up @@ -88,10 +91,14 @@ const tiles = [
];

export default function Gallery() {
const [activePackageFilter, setActivePackageFilter] = useState<VxPackage | null>(null);
const filteredTiles = activePackageFilter
? tiles.filter(Tile =>
exampleToVxDependencyLookup[Tile.packageJson.name]?.has(activePackageFilter),
const router = useRouter();
const { pkg } = router.query;

const filteredTiles = pkg
? tiles.filter((Tile) =>
exampleToVxDependencyLookup[Tile.packageJson.name]?.has(
pkg as VxPackage
)
)
: tiles;

Expand All @@ -100,16 +107,17 @@ export default function Gallery() {
<div className="gallery">
<div className="filters">
<h6>Examples by package</h6>
{vxPackages.map(vxPackage => (
<button
{vxPackages.map((vxPackage) => (
<Link
key={vxPackage}
className={activePackageFilter === vxPackage ? 'emphasize' : undefined}
onClick={() =>
setActivePackageFilter(activePackageFilter === vxPackage ? null : vxPackage)
}
href={{ pathname: "/gallery", query: { pkg: vxPackage } }}
>
@vx/{vxPackage}
</button>
<a
className={cx("filter-button", {
emphasize: pkg === vxPackage,
})}
>{`@vx/${vxPackage}`}</a>
</Link>
))}
</div>
<div className="grid">
Expand Down Expand Up @@ -140,7 +148,7 @@ export default function Gallery() {
h6 {
margin: 0 4px 0 0;
}
button {
.filter-button {
display: block;
cursor: pointer;
border: none;
Expand All @@ -149,13 +157,15 @@ export default function Gallery() {
color: #fc2e1c;
padding: 0;
margin: 4px 4px 12px 0;
font-size: 14px;
line-height: 1rem;
}
.emphasize {
font-weight: bold;
}
@media (min-width: 800px) {
.emphasize::before {
content: '';
content: "";
padding-left: 4px;
border-left: 2px solid #fc2e1c;
}
Expand Down

0 comments on commit 228cf71

Please sign in to comment.