feat: initial implementation of solid-plotly

Author: thedanchez

README.md

@@ -1,10 +1,10 @@
 {
-  "name": "template-solidjs-library",
+  "name": "@dschz/solid-plotly",
   "version": "0.0.0",
   "license": "MIT",
   "exports": "./src/index.tsx",
   "publish": {
-    "include": ["LICENSE", "README.md", "CHANGELOG.md", "src/**/*.tsx"],
-    "exclude": ["**/*.test.tsx"]
+    "include": ["LICENSE", "README.md", "CHANGELOG.md", "src/**/*.tsx", "src/**/*.ts"],
+    "exclude": ["**/*.test.tsx", "**/*.test.ts"]
   }
 }

bun.lock

@@ -1,17 +1,17 @@
 {
-  "name": "template-solidjs-library",
+  "name": "@dschz/solid-plotly",
   "version": "0.0.0",
-  "description": "Template for SolidJS library using tsup for bundling. Configured with Bun, NVM, TypeScript, ESLint, Prettier, Vitest, and GHA",
+  "description": "SolidJS wrapper for Plotly.js – reactive and performant charts powered by Plotly, built for Solid.",
   "type": "module",
-  "author": "Daniel Sanchez <dsanc89@icloud.com>",
+  "author": "Daniel Sanchez <dsanc89@pm.me>",
   "license": "MIT",
-  "homepage": "https://github.com/thedanchez/template-solidjs-library#readme",
+  "homepage": "https://github.com/dsnchz/solid-plotly#readme",
   "repository": {
     "type": "git",
-    "url": "https://github.com/thedanchez/template-solidjs-library.git"
+    "url": "https://github.com/dsnchz/solid-plotly.git"
   },
   "bugs": {
-    "url": "https://github.com/thedanchez/template-solidjs-library/issues"
+    "url": "https://github.com/dsnchz/solid-plotly/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -25,6 +25,7 @@
   "browser": {},
   "exports": {
     "solid": "./dist/index.jsx",
+    "factory": "./dist/factory.js",
     "import": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
@@ -56,6 +57,7 @@
     "@tailwindcss/vite": "^4.1.5",
     "@testing-library/jest-dom": "^6.6.3",
     "@types/bun": "^1.2.12",
+    "@types/plotly.js": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^8.32.0",
     "@typescript-eslint/parser": "^8.32.0",
     "@vitest/coverage-istanbul": "^3.1.3",
@@ -65,18 +67,25 @@
     "globals": "^16.1.0",
     "jiti": "^2.4.2",
     "jsdom": "^26.1.0",
+    "plotly.js": "^3.0.1",
+    "plotly.js-dist-min": "^3.0.1",
     "prettier": "^3.5.3",
+    "process": "^0.11.10",
     "solid-js": "^1.9.6",
     "tailwindcss": "^4.1.5",
     "tsup": "^8.4.0",
     "tsup-preset-solid": "^2.2.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.32.0",
+    "util": "^0.12.5",
     "vite": "^6.3.5",
     "vite-plugin-solid": "^2.11.6",
     "vitest": "^3.1.3"
   },
   "peerDependencies": {
     "solid-js": ">=1.6.0"
+  },
+  "dependencies": {
+    "@dschz/try-catch": "^1.1.2"
   }
 }

jsr.json

@@ -1,33 +1,99 @@
-import { Route, Router } from "@solidjs/router";
-import { ErrorBoundary, type ParentProps } from "solid-js";
+import { A, Route, Router } from "@solidjs/router";
+import { For, type ParentProps } from "solid-js";
 
-import { Navbar } from "./Navbar";
-import { ErrorPage } from "./pages/Error";
-import { Home } from "./pages/Home";
-import { NotFound } from "./pages/NotFound";
+import AnimationExample from "./pages/AnimationExample";
+import BasicExample from "./pages/BasicExample";
+import EventsExample from "./pages/EventsExample";
+import FactoryExample from "./pages/FactoryExample";
+import InteractiveExample from "./pages/InteractiveExample";
+import ResponsiveExample from "./pages/ResponsiveExample";
 
-const MainContent = (props: ParentProps) => {
+const examples = [
+  { path: "/basic", name: "Basic Example", component: BasicExample },
+  { path: "/factory", name: "Factory Pattern", component: FactoryExample },
+  { path: "/interactive", name: "Interactive", component: InteractiveExample },
+  { path: "/responsive", name: "Responsive", component: ResponsiveExample },
+  { path: "/events", name: "Events", component: EventsExample },
+  { path: "/animation", name: "Animation", component: AnimationExample },
+];
+
+function Navigation() {
   return (
-    <main class="flex flex-col h-full w-full grow overflow-auto bg-app-background">
-      {props.children}
-    </main>
+    <nav class="bg-gray-800 text-white p-4">
+      <div class="container mx-auto">
+        <h1 class="text-2xl font-bold mb-4">Solid Plotly Playground</h1>
+        <div class="flex flex-wrap gap-4">
+          <For each={examples}>
+            {(example) => (
+              <A
+                href={example.path}
+                class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded transition-colors"
+                activeClass="bg-blue-800"
+              >
+                {example.name}
+              </A>
+            )}
+          </For>
+        </div>
+      </div>
+    </nav>
   );
-};
+}
+
+function RootLayout(props: ParentProps) {
+  return (
+    <div class="min-h-screen">
+      <Navigation />
+      <main class="min-h-screen bg-gray-50">{props.children}</main>
+    </div>
+  );
+}
+
+function Home() {
+  return (
+    <div class="p-8">
+      <h1 class="text-4xl font-bold mb-6">Welcome to Solid Plotly Playground</h1>
+      <p class="text-lg text-gray-600 mb-8">
+        This playground demonstrates various features and usage patterns of the Solid Plotly
+        component. Navigate through the examples using the menu above.
+      </p>
 
-const RootLayout = (props: ParentProps) => (
-  <div id="root-screen" class="h-screen w-screen">
-    <Navbar />
-    <MainContent>{props.children}</MainContent>
-  </div>
-);
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <For each={examples}>
+          {(example) => (
+            <div class="border rounded-lg p-6 hover:shadow-lg transition-shadow">
+              <h3 class="text-xl font-semibold mb-2">{example.name}</h3>
+              <p class="text-gray-600 mb-4">
+                {example.path === "/basic" &&
+                  "Simple scatter and bar charts with basic configuration"}
+                {example.path === "/factory" &&
+                  "Using the factory pattern with custom Plotly bundles"}
+                {example.path === "/interactive" && "Real-time data updates and user interactions"}
+                {example.path === "/responsive" && "Responsive charts that adapt to container size"}
+                {example.path === "/events" && "Comprehensive event handling examples"}
+                {example.path === "/animation" && "Animated transitions and frame-based animations"}
+              </p>
+              <A
+                href={example.path}
+                class="inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+              >
+                View Example
+              </A>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  );
+}
 
 export const App = () => {
   return (
-    <ErrorBoundary fallback={(e, r) => <ErrorPage error={e} reset={r} />}>
-      <Router root={RootLayout}>
-        <Route path="/" component={Home} />
-        <Route path="*" component={NotFound} />
-      </Router>
-    </ErrorBoundary>
+    <Router root={RootLayout}>
+      <Route path="/" component={Home} />
+      <For each={examples}>
+        {(example) => <Route path={example.path} component={example.component} />}
+      </For>
+    </Router>
   );
 };

package.json

@@ -0,0 +1,6 @@
+import Plotly from "plotly.js-dist-min";
+
+import { createPlotComponent } from "../../src";
+
+// Create the Plot component using the factory with plotly.js-dist-min
+export const Plot = createPlotComponent(Plotly);

playground/App.tsx

@@ -0,0 +1,162 @@
+import { createEffect, createSignal, onCleanup } from "solid-js";
+
+import { type PlotlyLayout } from "../../src";
+import { Plot } from "../components/Plot";
+
+export default function AnimationExample() {
+  const [isAnimating, setIsAnimating] = createSignal(false);
+  const [currentFrame, setCurrentFrame] = createSignal(0);
+  const [animationSpeed, setAnimationSpeed] = createSignal(500);
+
+  // Generate data for different frames
+  const generateFrameData = (frameIndex: number) => {
+    const t = frameIndex * 0.1;
+    const x = Array.from({ length: 50 }, (_, i) => i * 0.1);
+    const y = x.map((val) => Math.sin(val + t) * Math.exp(-val * 0.1));
+    return { x, y };
+  };
+
+  const [layout] = createSignal<PlotlyLayout>({
+    width: 800,
+    height: 500,
+    title: { text: "Animation Example - Sine Wave" },
+    xaxis: {
+      title: { text: "X" },
+      range: [0, 5],
+    },
+    yaxis: {
+      title: { text: "Y" },
+      range: [-1, 1],
+    },
+    transition: {
+      duration: 300,
+      easing: "cubic-in-out",
+    },
+  });
+
+  // Animation frames
+  const frames = Array.from({ length: 60 }, (_, i) => ({
+    name: i.toString(),
+    data: [
+      {
+        ...generateFrameData(i),
+        type: "scatter" as const,
+        mode: "lines" as const,
+        line: { color: "blue", width: 3 },
+        name: "Animated Wave",
+      },
+    ],
+    group: "main",
+    traces: [0],
+    baseframe: undefined,
+    layout: {},
+  }));
+
+  // Animation effect
+  createEffect(() => {
+    if (!isAnimating()) return;
+
+    const interval = setInterval(() => {
+      setCurrentFrame((prev) => (prev + 1) % frames.length);
+    }, animationSpeed());
+
+    onCleanup(() => clearInterval(interval));
+  });
+
+  const startAnimation = () => {
+    setIsAnimating(true);
+  };
+
+  const stopAnimation = () => {
+    setIsAnimating(false);
+  };
+
+  const resetAnimation = () => {
+    setIsAnimating(false);
+    setCurrentFrame(0);
+  };
+
+  return (
+    <div class="p-4">
+      <h1 class="text-2xl font-bold mb-4">Animation Example</h1>
+
+      <div class="mb-6 space-y-4">
+        <p class="text-gray-600">
+          This example demonstrates animated charts using frame-based animations. The sine wave
+          moves continuously when animation is enabled.
+        </p>
+
+        <div class="flex flex-wrap gap-4 items-center">
+          <button
+            onClick={startAnimation}
+            disabled={isAnimating()}
+            class="px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white rounded"
+          >
+            Start Animation
+          </button>
+
+          <button
+            onClick={stopAnimation}
+            disabled={!isAnimating()}
+            class="px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-400 text-white rounded"
+          >
+            Stop Animation
+          </button>
+
+          <button
+            onClick={resetAnimation}
+            class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded"
+          >
+            Reset
+          </button>
+
+          <label class="flex items-center gap-2">
+            Speed (ms):
+            <input
+              type="range"
+              min="100"
+              max="1000"
+              step="50"
+              value={animationSpeed()}
+              onInput={(e) => setAnimationSpeed(parseInt(e.currentTarget.value))}
+              class="w-32"
+            />
+            <span class="w-12 text-center">{animationSpeed()}</span>
+          </label>
+
+          <div class="text-sm text-gray-600">
+            Frame: {currentFrame() + 1} / {frames.length}
+          </div>
+        </div>
+      </div>
+
+      <Plot
+        data={[
+          {
+            ...generateFrameData(currentFrame()),
+            type: "scatter",
+            mode: "lines",
+            line: { color: "blue", width: 3 },
+            name: "Animated Wave",
+          },
+        ]}
+        layout={layout()}
+        config={{
+          displayModeBar: true,
+          showTips: false,
+        }}
+      />
+
+      <div class="mt-4 p-4 bg-yellow-50 rounded">
+        <h3 class="font-semibold mb-2">Animation Features:</h3>
+        <ul class="list-disc list-inside space-y-1 text-sm">
+          <li>Frame-based animation using Plotly frames</li>
+          <li>Smooth transitions between data states</li>
+          <li>Configurable animation speed</li>
+          <li>Start/stop/reset controls</li>
+          <li>Real-time frame counter</li>
+        </ul>
+      </div>
+    </div>
+  );
+}