From a89dfaae389e0e5e3632d74f20e80dc5f98ede43 Mon Sep 17 00:00:00 2001 From: Luccas Mateus de Medeiros Gomes Date: Sat, 22 Apr 2023 14:28:13 -0300 Subject: [PATCH] [simple-example][m] - remove unused components --- examples/simple-example/README.md | 2 +- .../simple-example/components/MDLayout.tsx | 85 -------- .../simple-example/components/drd/DRD.tsx | 40 ---- .../components/drd/DebouncedInput.tsx | 33 --- .../components/drd/FrictionlessView.tsx | 55 ----- .../components/drd/LineChart.tsx | 49 ----- .../simple-example/components/drd/Table.tsx | 188 ------------------ .../simple-example/components/drd/Vega.tsx | 4 - .../components/drd/VegaLite.tsx | 4 - 9 files changed, 1 insertion(+), 459 deletions(-) delete mode 100644 examples/simple-example/components/MDLayout.tsx delete mode 100644 examples/simple-example/components/drd/DRD.tsx delete mode 100644 examples/simple-example/components/drd/DebouncedInput.tsx delete mode 100644 examples/simple-example/components/drd/FrictionlessView.tsx delete mode 100644 examples/simple-example/components/drd/LineChart.tsx delete mode 100644 examples/simple-example/components/drd/Table.tsx delete mode 100644 examples/simple-example/components/drd/Vega.tsx delete mode 100644 examples/simple-example/components/drd/VegaLite.tsx diff --git a/examples/simple-example/README.md b/examples/simple-example/README.md index f198eee4..79c9aa84 100644 --- a/examples/simple-example/README.md +++ b/examples/simple-example/README.md @@ -22,7 +22,7 @@ PROJECT_NAME= - This project uses the github api, which for anonymous users will cap at 50 requests per hour, so you might want to get a [Personal Access Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) and add it to your .env file like so ``` -PAT_TOKEN= +GITHUB_PAT= ``` - Edit the file `datasets.json` to your liking, some examples can be found inside this [repo](https://github.com/datasets) diff --git a/examples/simple-example/components/MDLayout.tsx b/examples/simple-example/components/MDLayout.tsx deleted file mode 100644 index b1041f68..00000000 --- a/examples/simple-example/components/MDLayout.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import FrictionlessViewFactory from "./drd/FrictionlessView"; -import Table from "./drd/Table"; - -/* eslint import/no-default-export: off */ -function DatapackageLayout({ children, project, excerpt }) { - const { metadata } = project; - - const title = metadata.title; - const resources = metadata.resources; - const views = metadata.views; - - const FrictionlessView = FrictionlessViewFactory({ views, resources }); - - return ( -
-
- {title &&

{title}

} - - @{project.owner} / {project.name} - - {excerpt &&

{excerpt}

} -
-
- {views.map((view, i) => { - return ( -
- -
- ); - })} -
-
-

Data files

- - - - - - - - - - {resources.map((r) => { - return ( - - - - - - ); - })} - -
FileTitleFormat
- - {r.path} - - {r.title}{r.format.toUpperCase()}
- {resources.slice(0, 5).map((resource) => { - return ( -
-

{resource.title || resource.name || resource.path}

- - - ); - })} - -
-
-

Read me

- {children} -
- - ); -} - -export default function MDLayout({ children, layout, ...props }) { - return {children}; -} diff --git a/examples/simple-example/components/drd/DRD.tsx b/examples/simple-example/components/drd/DRD.tsx deleted file mode 100644 index 50d0f39e..00000000 --- a/examples/simple-example/components/drd/DRD.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { MDXRemote } from "next-mdx-remote"; -import dynamic from "next/dynamic"; -import { Mermaid } from "@flowershow/core"; - -import FrictionlessViewFactory from "./FrictionlessView"; - -// Custom components/renderers to pass to MDX. -// Since the MDX files aren't loaded by webpack, they have no knowledge of how -// to handle import statements. Instead, you must include components in scope -// here. -const components = { - Table: dynamic(() => import("./Table")), - mermaid: Mermaid, - // Excel: dynamic(() => import('../components/Excel')), - // TODO: try and make these dynamic ... - Vega: dynamic(() => import("./Vega")), - VegaLite: dynamic(() => import("./VegaLite")), - LineChart: dynamic(() => import("./LineChart")), -} as any; - -export default function DRD({ - source, - frictionless = { - views: [], - resources: [], - }, -}: { - source: any; - frictionless?: any; -}) { - // dynamic() can't be used inside of React rendering - // as it needs to be marked in the top level of the - // module for preloading to work - components.FrictionlessView = FrictionlessViewFactory({ - views: frictionless.views, - resources: frictionless.resources, - }); - - return ; -} diff --git a/examples/simple-example/components/drd/DebouncedInput.tsx b/examples/simple-example/components/drd/DebouncedInput.tsx deleted file mode 100644 index c5fa34e0..00000000 --- a/examples/simple-example/components/drd/DebouncedInput.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { useEffect, useState } from "react"; - -const DebouncedInput = ({ - value: initialValue, - onChange, - debounce = 500, - ...props -}) => { - const [value, setValue] = useState(initialValue); - - useEffect(() => { - setValue(initialValue); - }, [initialValue]); - - useEffect(() => { - const timeout = setTimeout(() => { - onChange(value); - }, debounce); - - return () => clearTimeout(timeout); - }, [value]); - - return ( - setValue(e.target.value)} - /> - ); -}; - -export default DebouncedInput; - diff --git a/examples/simple-example/components/drd/FrictionlessView.tsx b/examples/simple-example/components/drd/FrictionlessView.tsx deleted file mode 100644 index f2256de6..00000000 --- a/examples/simple-example/components/drd/FrictionlessView.tsx +++ /dev/null @@ -1,55 +0,0 @@ -// FrictionlessView is a factory because we have to -// set the views and resources lists before using it - -import { convertSimpleToVegaLite } from "../../lib/viewSpecConversion"; -import VegaLite from "./VegaLite"; - -export default function FrictionlessViewFactory({ - views = [], - resources = [], -}): ({ - viewId, - fullWidth, -}: { - viewId: number; - fullWidth?: boolean; -}) => JSX.Element { - return ({ viewId, fullWidth = false }) => { - if (!(viewId in views)) { - console.error(`View ${viewId} not found`); - return <>; - } - const view = views[viewId]; - - let resource; - if (resources.length > 1) { - resource = resources.find((r) => r.name === view.resourceName); - } else { - resource = resources[0]; - } - - if (!resource) { - console.error(`Resource not found for view id ${viewId}`); - return <>; - } - - let vegaSpec; - switch (view.specType) { - case "simple": - vegaSpec = convertSimpleToVegaLite(view, resource); - break; - // ... other conversions - } - - vegaSpec.data = { url: resource.path }; - - return ( - - ); - }; -} diff --git a/examples/simple-example/components/drd/LineChart.tsx b/examples/simple-example/components/drd/LineChart.tsx deleted file mode 100644 index e5ee69fb..00000000 --- a/examples/simple-example/components/drd/LineChart.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { VegaLite } from "react-vega"; - -export default function LineChart({ - data = [], - fullWidth = false, - title = "", -}) { - var tmp = data; - if (Array.isArray(data)) { - tmp = data.map((r, i) => { - return { x: r[0], y: r[1] }; - }); - } - const vegaData = { table: tmp }; - const spec = { - $schema: "https://vega.github.io/schema/vega-lite/v5.json", - title, - width: "container" as "container", - height: 300, - mark: { - type: "line" as "line", - color: "black", - strokeWidth: 1, - tooltip: true, - }, - data: { - name: "table", - }, - selection: { - grid: { - type: "interval" as "interval", - bind: "scales", - }, - }, - encoding: { - x: { - field: "x", - timeUnit: "year", - type: "temporal" as "temporal", - }, - y: { - field: "y", - type: "quantitative" as "temporal", - }, - }, - }; - - return ; -} diff --git a/examples/simple-example/components/drd/Table.tsx b/examples/simple-example/components/drd/Table.tsx deleted file mode 100644 index 4866b645..00000000 --- a/examples/simple-example/components/drd/Table.tsx +++ /dev/null @@ -1,188 +0,0 @@ -import { - createColumnHelper, - FilterFn, - flexRender, - getCoreRowModel, - getFilteredRowModel, - getPaginationRowModel, - getSortedRowModel, - useReactTable, -} from "@tanstack/react-table"; - -import { - ArrowDownIcon, - ArrowUpIcon, - ChevronDoubleLeftIcon, - ChevronDoubleRightIcon, - ChevronLeftIcon, - ChevronRightIcon, -} from "@heroicons/react/24/solid"; - -import React, { useEffect, useMemo, useState } from "react"; - -import loadUrlProxied from "../../lib/loadUrlProxied"; -import parseCsv from "../../lib/parseCsv"; -import DebouncedInput from "./DebouncedInput"; - -const Table = ({ - data: ogData = [], - cols: ogCols = [], - csv = "", - url = "", -}) => { - if (csv) { - const out = parseCsv(csv); - ogData = out.rows; - ogCols = out.fields; - } - - const [data, setData] = React.useState(ogData); - const [cols, setCols] = React.useState(ogCols); - const [error, setError] = React.useState(""); // TODO: add error handling - - const tableCols = useMemo(() => { - const columnHelper = createColumnHelper(); - return cols.map((c) => - columnHelper.accessor(c.key, { - header: () => c.name, - cell: (info) => info.getValue(), - }) - ); - }, [data, cols]); - - const [globalFilter, setGlobalFilter] = useState(""); - - const table = useReactTable({ - data, - columns: tableCols, - getCoreRowModel: getCoreRowModel(), - state: { - globalFilter, - }, - globalFilterFn: globalFilterFn, - onGlobalFilterChange: setGlobalFilter, - getFilteredRowModel: getFilteredRowModel(), - getPaginationRowModel: getPaginationRowModel(), - getSortedRowModel: getSortedRowModel(), - }); - - useEffect(() => { - if (url) { - loadUrlProxied(url).then((data) => { - const { rows, fields } = parseCsv(data); - setData(rows); - setCols(fields); - }); - } - }, [url]); - - return ( -
- setGlobalFilter(String(value))} - className="p-2 text-sm shadow border border-block" - placeholder="Search all columns..." - /> -
- - {table.getHeaderGroups().map((hg) => ( - - {hg.headers.map((h) => ( - - ))} - - ))} - - - {table.getRowModel().rows.map((r) => ( - - {r.getVisibleCells().map((c) => ( - - ))} - - ))} - -
-
- {flexRender(h.column.columnDef.header, h.getContext())} - {{ - asc: ( - - ), - desc: ( - - ), - }[h.column.getIsSorted() as string] ?? ( -
- )} -
-
- {flexRender(c.column.columnDef.cell, c.getContext())} -
-
- - - -
Page
- - {table.getState().pagination.pageIndex + 1} of{" "} - {table.getPageCount()} - - - - -
-
- ); -}; - -const globalFilterFn: FilterFn = (row, columnId, filterValue: string) => { - const search = filterValue.toLowerCase(); - - let value = row.getValue(columnId) as string; - if (typeof value === "number") value = String(value); - - return value?.toLowerCase().includes(search); -}; - -export default Table; diff --git a/examples/simple-example/components/drd/Vega.tsx b/examples/simple-example/components/drd/Vega.tsx deleted file mode 100644 index ed24606c..00000000 --- a/examples/simple-example/components/drd/Vega.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { Vega as VegaOg } from "react-vega"; -export default function Vega(props) { - return ; -} diff --git a/examples/simple-example/components/drd/VegaLite.tsx b/examples/simple-example/components/drd/VegaLite.tsx deleted file mode 100644 index 439a632d..00000000 --- a/examples/simple-example/components/drd/VegaLite.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { VegaLite as VegaOg } from "react-vega"; -export default function Vega(props) { - return ; -}