Kanaries · BHznJNs · Jun 26, 2024 · Jun 27, 2024 · Jun 27, 2024 · Jun 27, 2024
diff --git a/packages/playground/gallery.html b/packages/playground/gallery.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full bg-white">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/kanaries.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Graphic Walker Gallery</title>
+    <meta name="description" content="An easy to use Exploratory Data Analysis tool">
+  </head>
+  <body class="h-full">
+    <div id="root"></div>
+    <script type="module" src="/src/gallery/index.tsx"></script>
+  </body>
+</html>
diff --git a/packages/playground/src/gallery/components/Example.tsx b/packages/playground/src/gallery/components/Example.tsx
@@ -0,0 +1,112 @@
+import React, { useContext, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowUturnLeftIcon } from '@heroicons/react/24/outline';
+import { IChart, PureRenderer, GraphicWalker } from '@kanaries/graphic-walker';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { themeContext } from '../context';
+import { IGalleryItem } from './GalleryGroup';
+import { specDict } from '../resources';
+import { IDataSource, useFetch } from '../util';
+
+function getResourceURL(type: "datasets" | "specs", name: string): string {
+    if (type === "specs") {
+        return specDict.get(name)!;
+    } else if (type === "datasets") {
+        return `https://pub-2422ed4100b443659f588f2382cfc7b1.r2.dev/datasets/${name}.json`;
+    } else {
+        throw new Error(`Unknown fetch type: "${type}".`);
+    }
+}
+
+interface ExampleProps {
+    title: string,
+    specName: string,
+    datasetName: string,
+}
+
+function Example(props: ExampleProps) {
+    const {
+        title,
+        specName,
+        datasetName,
+    } = props;
+    const { theme } = useContext(themeContext);
+    const [ showMode, setShowMode ] = useState<'preview' | 'editor'>('preview');
+    const datasetURL = getResourceURL("datasets", datasetName);
+    const specsURL = getResourceURL("specs", specName);
+    const { dataSource, fields } = useFetch<IDataSource>(datasetURL);
+    const spec = useFetch<IChart[]>(specsURL);
+    const chart = spec[0] as IChart;
+
+    const BackButton = () =>
+        <button type="button" className="flex items-center justify-center rounded-md px-1 py-1 transition hover:bg-zinc-900/5 dark:text-white dark:hover:bg-white/5">
+            <ArrowUturnLeftIcon className="h-4 w-4"/>
+        </button>;
+
+    return (
+        <div>
+            <div className="flex gap-2 items-center">
+                <Link to={".."}><BackButton /></Link>
+                <span className="text-xl font-bold text-black dark:text-white">{title}</span>
+            </div>
+
+            {showMode === 'preview' && <>
+                <PureRenderer
+                    className="mt-6 border rounded-md overflow-hidden"
+                    rawData={dataSource} 
+                    visualConfig={chart.config}
+                    visualState={chart.encodings} 
+                    visualLayout={chart.layout} 
+                    appearance={theme}
+                />
+                <button
+                    type="button"
+                    className="rounded-md bg-gray-950 px-3 py-2 mt-4 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950"
+                    onClick={() => setShowMode('editor')}
+                >
+                    Click Here to Edit
+                </button>
+
+                <div className="w-full mt-6 border-t border-gray-300" />
+
+                <div className="text-lg my-6 font-bold text-black dark:text-white">Graphic Walker JSON Specification</div>
+                <SyntaxHighlighter language="tsx" style={a11yDark}>
+                    {JSON.stringify(spec, null, 2)}
+                </SyntaxHighlighter>
+            </>}
+            {showMode === 'editor' && <>
+                <div className="mt-6 border rounded-md overflow-hidden">
+                    <GraphicWalker
+                        fields={fields}
+                        data={dataSource}
+                        chart={spec}
+                        appearance={theme}
+                    />
+                </div>
+                <button
+                    type="button"
+                    className="rounded-md bg-gray-950 px-3 py-2 mt-4 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950"
+                    onClick={() => setShowMode('preview')}
+                >
+                    Back to PureRenderer
+                </button>
+            </>}
+        </div>
+    )
+}
+
+export default function ExampleWrapper(props: {
+    options: IGalleryItem,
+}) {
+    const { options } = props; 
+    return (
+        <React.Suspense fallback={<p>Loading component...</p>}>
+            <Example
+                title={options.title}
+                specName={options.name}
+                datasetName={options.datasetName}
+            />
+        </React.Suspense>
+    );
+}
diff --git a/packages/playground/src/gallery/components/GalleryGroup.tsx b/packages/playground/src/gallery/components/GalleryGroup.tsx
@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import { Link, Outlet, useLocation } from 'react-router-dom';
+import { imageDict } from '../resources';
+
+function GalleryItem(props: {
+    name: string,
+    title: string,
+}) {
+    const {name, title} = props;
+    const imageURL = imageDict.get(name);
+
+    return (
+        <Link to={name} className="col-span-1 flex flex-col rounded-lg text-center shadow overflow-hidden bg-white dark:bg-neutral-900 group">
+            <div
+                className="w-full h-32 bg-cover bg-no-repeat border-b-2 overflow-hidden hover:bg-right-bottom"
+                style={{
+                    backgroundImage: `url(${imageURL})`,
+                    transition: "background-position 2s",
+                }}
+            ></div>
+            <p className="mx-1 my-2 text-sm text-gray-600 dark:text-white group-hover:underline">{title}</p>
+        </Link>
+    );
+}
+
+export interface IGalleryItem {
+    name: string,
+    title: string,
+    datasetName: string,
+}
+export default function GalleryGroup(props: {
+    title: string,
+    path: string,
+    items: IGalleryItem[],
+}) {
+    const { title, path, items } = props;
+    const location = useLocation();
+    const isActive = useMemo(() => {
+        return location.pathname.endsWith(path) || location.pathname.endsWith(path + '/');
+    }, [location.pathname, path]);
+
+    return (
+        <>
+            {isActive &&
+            <>
+                <div className="text-xl font-bold text-black dark:text-white">{title}</div>
+                <div
+                    className="grid justify-between gap-y-5 gap-x-4 my-7"
+                    style={{gridTemplateColumns: "repeat(auto-fill, minmax(12rem, 1fr))"}}
+                >
+                    {
+                        items.map(({name, title}, index) =>
+                            <GalleryItem key={index} name={name} title={title}/>)
+                    }
+                </div>
+            </>
+            }
+            <Outlet />
+        </>
+    )
+}
diff --git a/packages/playground/src/gallery/components/ThemeToggle.tsx b/packages/playground/src/gallery/components/ThemeToggle.tsx
@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { useTheme } from '../context';
+
+function SunIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+    return (
+        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+            <path d="M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" />
+            <path
+                strokeLinecap="round"
+                d="M10 5.5v-1M13.182 6.818l.707-.707M14.5 10h1M13.182 13.182l.707.707M10 15.5v-1M6.11 13.889l.708-.707M4.5 10h1M6.11 6.111l.708.707"
+            />
+        </svg>
+    );
+}
+
+function MoonIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+    return (
+        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+            <path d="M15.224 11.724a5.5 5.5 0 0 1-6.949-6.949 5.5 5.5 0 1 0 6.949 6.949Z" />
+        </svg>
+    );
+}
+
+export function ThemeToggle() {
+    const { theme, setTheme } = useTheme();
+    const otherTheme = theme === 'dark' ? 'light' : 'dark';
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    return (
+        <button
+            type="button"
+            className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5"
+            aria-label={mounted ? `Switch to ${otherTheme} theme` : 'Toggle theme'}
+            onClick={() => setTheme(otherTheme)}
+        >
+            <SunIcon className="h-5 w-5 stroke-zinc-900 dark:hidden" />
+            <MoonIcon className="hidden h-5 w-5 stroke-white dark:block" />
+        </button>
+    );
+}
diff --git a/packages/playground/src/gallery/components/errorPage.tsx b/packages/playground/src/gallery/components/errorPage.tsx
@@ -0,0 +1 @@
+export { default } from '../../examples/components/errorPage';
diff --git a/packages/playground/src/gallery/context.ts b/packages/playground/src/gallery/context.ts
@@ -0,0 +1 @@
+export { themeContext, useTheme } from "../examples/context"
diff --git a/packages/playground/src/gallery/index.css b/packages/playground/src/gallery/index.css
@@ -0,0 +1,71 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.dark {
+    color-scheme: dark;
+}
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 222.2 84% 4.9%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 240 6% 10%;
+        --foreground: 210 40% 98%;
+
+        --card: 240 6% 10%;
+        --card-foreground: 210 40% 98%;
+
+        --popover: 221 39% 11%;
+        --popover-foreground: 210 40% 98%;
+
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+
+        --secondary: 217 19% 27%;
+        --secondary-foreground: 210 40% 98%;
+
+        --muted: 217 19% 27%;
+        --muted-foreground: 215 20.2% 65.1%;
+
+        --accent: 217 19% 27%;
+        --accent-foreground: 210 40% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 215 14% 34%;
+        --input: 215 14% 34%;
+        --ring: 215 14% 34%;
+    }
+}
diff --git a/packages/playground/src/gallery/index.tsx b/packages/playground/src/gallery/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { pages } from './nav';
+import Layout from './layout';
+import ErrorPage from './components/errorPage';
+import './index.css';
+const root = createRoot(document.getElementById('root') as HTMLElement);
+
+const router = createBrowserRouter([
+    {
+        path: '/gallery',
+        element: <Layout />,
+        errorElement: <ErrorPage />,
+        children: pages,
+    },
+]);
+
+root.render(
+    <React.StrictMode>
+        <RouterProvider router={router} />
+    </React.StrictMode>,
+);