tslab-widgets 0.1.0 → 1.1.0

package/package.json

@@ -1,17 +1,29 @@
 {
   "name": "tslab-widgets",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "description": "A set of widgets for ts-lab environment including financial charts",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
-    "build": "npx tsc",
-    "lint": "npx eslint",
-    "reset": "rm -rf node_modules && rm -rf dist && npm install"
+    "build": "rm -rf dist && npx tsc",
+    "prebuild": "npm run validate",
+    "validate": "tsx scripts/validate-versions.ts",
+    "reset": "rm -rf node_modules && rm -rf dist && npm install",
+    "format": "npx @biomejs/biome format --write",
+    "lint": "npx @biomejs/biome lint --write",
+    "check": "npx @biomejs/biome check --write"
   },
   "files": [
     "dist"
   ],
-  "types": "dist/index.d.ts",
   "keywords": [
     "tslab",
     "jupyter",
@@ -34,7 +46,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/rodrigopivi/tslab-widgets"
+    "url": "git+https://github.com/rodrigopivi/tslab-widgets.git"
   },
   "bugs": {
     "url": "https://github.com/rodrigopivi/tslab-widgets/issues"
@@ -42,31 +54,38 @@
   "homepage": "https://github.com/rodrigopivi/tslab-widgets#readme",
   "private": false,
   "dependencies": {
-    "tslab": "1.0.22"
+    "tslab": "^1.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.25.2",
-    "@babel/preset-react": "7.24.7",
-    "@types/node": "22.4.1",
-    "@types/react": "18.3.4",
-    "@typescript-eslint/eslint-plugin": "7.16.0",
-    "@typescript-eslint/parser": "7.16.0",
-    "cspell": "8.14.2",
-    "eslint": "8.57.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-deprecation": "3.0.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-perfectionist": "2.11.0",
-    "eslint-plugin-react": "7.35.0",
-    "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-simple-import-sort": "12.1.1",
-    "eslint-plugin-unicorn": "54.0.0",
-    "eslint-plugin-unused-imports": "3.2.0",
-    "lightweight-charts": "4.2.0",
-    "prettier": "3.3.3",
-    "react": "18.3.1",
-    "tslib": "2.6.3",
-    "typescript": "5.5.4",
-    "webpack-cli": "5.1.4"
+    "@babel/core": "7.28.5",
+    "@babel/preset-react": "7.28.5",
+    "@biomejs/biome": "2.3.10",
+    "@types/node": "25.0.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "ag-charts-react": "13.0.0",
+    "ag-grid-react": "35.0.0",
+    "ag-grid-community": "35.0.0",
+    "cspell": "9.4.0",
+    "lightweight-charts": "5.1.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "recharts": "3.6.0",
+    "tslib": "2.8.1",
+    "tsx": "^4.21.0",
+    "typescript": "5.9.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "tslab": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   }
 }

package/readme.md

@@ -3,24 +3,60 @@
 </center>
 
 <blockquote>
-  A set of widgets for tslab (the interactive programming environment on top of jupyter lab that supports typescript and javascript).
+  A library that brings rich, interactive data visualizations directly to Jupyter Notebooks through a TypeScript kernel bridging the gap between the expressive power of modern TypeScript charting libraries and the iterative, exploratory workflow of Jupyter.
 </blockquote>
 <hr />
 <br>
 
+## Overview
+
+🔧 **First-Class TypeScript Experience**: Designed specifically for TS kernels. Get full type checking, autocompletion (IntelliSense) for your chart configurations, and safe refactoring as you explore your data.
+
+📚 **Notebook-Native**: Visualizations render inline as notebook cell outputs. They are fully embedded in the document, making them ideal for creating reproducible analysis reports, interactive dashboards, and storytelling with data.
+
+🎯 **Leverage the TS Ecosystem**: Integrates with popular JavaScript visualization libraries.
+
+⚡ **Lightweight** - CDN-based dependencies for fast loading and no build step.
+
+📊 **Financial Charts** - Candlestick, line, area with crosshair and time-scale synchronization across multiple charts.
+
+✨ **Data Visualization** - Tables, charts, JSON tree viewer, gauge and more to come...
+
 ### Setup:
 
 - Install [tslab](https://github.com/yunabe/tslab)
-- `npm i tslab-widgets`
+- `npm i -S tslab tslab-widgets tslib lightweight-charts`
 
 ### Widget list:
 
-- Chart (thanks to `lightweight-charts`)
-- CSV
-- Gauge
-- JSON
+- **Chart** - Financial charts powered by `lightweight-charts` with plugins:
+  - Candlestick, Line, Area, Bar, Baseline, Histogram
+  - Tooltips, trend lines, volume profiles, vertical markers
+  - Multi-chart synchronization (crosshair + time scale)
+- **CSV** - Responsive table viewer with auto-pairing layout
+- **Gauge** - Circular progress/KPI indicators
+- **JSON** - Expandable tree view for objects
+
+Review the [example jupyter notebook](https://github.com/rodrigopivi/tslab-widgets/blob/main/example.ipynb).
+
+## CDN Strategy
+
+tslab-widgets uses a **CDN-based approach** for runtime dependencies (React, lightweight-charts, etc.). This means:
+
+- ✅ **No bundling overhead** - Dependencies loaded directly from esm.sh
+- ✅ **Faster notebook loading** - Browser caches shared dependencies
+- ✅ **Smaller package size** - No need to bundle React into the library
+- ✅ **Centralized version management** - All CDN versions managed in `src/config/versions.ts`
+
+### Screenshots
+
+<img width="1242" alt="Screenshot 2024-09-05 at 12 36 37 PM" src="https://github.com/user-attachments/assets/ab9a258c-059e-4bae-ac5b-6c753e885e70">
+
+<img width="1025" alt="Screenshot 2024-09-05 at 12 37 29 PM" src="https://github.com/user-attachments/assets/1a8cd079-ae49-4cd4-b629-069cc7a0bb61">
+
+### Configure VSCode to use Typescript Kernel
 
-Review the [example jupyter notebook](https://github.com/rodrigopivi/tslab-widgets/blob/main/exampmle.ipynb).
+Go to `Select Kernel` -> `Jupyter Kernel...` -> `Typescript`
 
 ### Author
 

package/dist/csv/csv.d.ts

@@ -1,5 +0,0 @@
-declare function csv(data: string[], options?: {
-    customCss?: string;
-    maxHeight?: number;
-}): void;
-export { csv };

package/dist/csv/csv.js

@@ -1,83 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.csv = void 0;
-const tslib_1 = require("tslib");
-const tslab = tslib_1.__importStar(require("tslab"));
-// https://github.com/marudhupandiyang/react-csv-to-table
-function csv(data, options) {
-    const reactComponentId = `_csv_widget${Math.random().toString(36).substring(2, 9)}`;
-    const html = `
-    <style type="text/css">
-      table.widget-csv-table {
-        margin: auto !important;
-        margin-bottom: 10px !important;
-        > thead {
-          background-color: #000;
-          border: 1px solid #888 !important;
-        }
-        > tbody {
-          border: 1px solid #888 !important;
-          border-top: 0 !important;
-          > tr:hover {
-            background-color: #172F3F !important;
-          }
-        }
-      }
-      ${(options === null || options === void 0 ? void 0 : options.customCss) || ''}
-    </style>
-    <div id="${reactComponentId}" style="margin:auto;" />
-    <script type="module">
-      import React from "https://esm.sh/react@18.3.1";
-      import ReactDOM from "https://esm.sh/react-dom@18.3.1";
-      import { CsvToHtmlTable } from "https://esm.sh/react-csv-to-table@0.0.4";
-      const h = React.createElement;
-
-      const reactJupyterLabComponentId = "${reactComponentId}";
-      const jupyterLabReactComponentContainer = document.getElementById("${reactComponentId}");
-
-      const data = [${data.map((d) => JSON.stringify(d)).join(',')}];
-      const csvWidgets = groupArrayIntoPairs(data);
-      const rows = csvWidgets.map((rowDataPair, idx) => {
-        const cid1 = reactJupyterLabComponentId + '-0';
-        const cid2 = reactJupyterLabComponentId + '-1';
-        const csvTableRowStyle = {
-          display: 'flex',
-          flexDirection: 'column',
-          alignSelf: 'baseline',
-          ${(options === null || options === void 0 ? void 0 : options.maxHeight) ? `maxHeight:${options.maxHeight},overflowY: "scroll"` : ''}
-        };
-        const key = 'row-' + idx;
-        return (
-
-          h('div', { key, className: 'csv-' + key, style: { display: 'flex', flexDirection: 'row', margin: 'auto' }}, [
-            h('div', { className: 'csv-col-0', style: csvTableRowStyle },
-              h(CsvToHtmlTable, { data: rowDataPair[0], csvDelimiter: ',', tableClassName: 'widget-csv-table' })
-            ),
-            h('div', { className: 'csv-col-1', style: csvTableRowStyle },
-              rowDataPair[1]
-                ? h(CsvToHtmlTable, { data: rowDataPair[1], csvDelimiter: ',', tableClassName: 'widget-csv-table' })
-                : null,
-            ),
-          ])
-        );
-      });
-      
-      ReactDOM.render(
-        h('div', { style: { display: 'flex', flexDirection: 'column' }}, rows),
-        jupyterLabReactComponentContainer
-      );
-
-      function groupArrayIntoPairs(arr) {
-        const pairs = [];
-        for (let i = 0; i < arr.length; i += 2) {
-            const pair = [arr[i], arr[i + 1]];
-            pairs.push(pair);
-        }
-        return pairs;
-      }
-    
-    </script>
-  `;
-    tslab.display.html(html);
-}
-exports.csv = csv;