tslab-widgets 0.1.0 → 1.0.0

package/dist/gauge/gauge.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.gauge = void 0;
 const tslib_1 = require("tslib");
 const tslab = tslib_1.__importStar(require("tslab"));
+const versions_1 = require("../config/versions");
 // https://www.npmjs.com/package/react-gauge-chart
 function gauge(width = 200, props) {
     var _a;
@@ -15,9 +16,9 @@ function gauge(width = 200, props) {
       }
     </style>
     <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 GaugeChart from "https://esm.sh/react-gauge-chart@0.5.1";
+      import React from "${versions_1.CDN_URLS.react}";
+      import ReactDOM from "${versions_1.CDN_URLS.reactDom}";
+      import GaugeChart from "${versions_1.CDN_URLS.reactGaugeChart}";
       const h = React.createElement;
 
       const reactJupyterLabComponentId = "${reactComponentId}";
@@ -39,12 +40,12 @@ function gauge(width = 200, props) {
       };
       ReactDOM.render(
         h('div', { style: styles.wrapper }, [
-          h('div', { style: styles.title }, '${(_a = props.title) !== null && _a !== void 0 ? _a : ''}'),
+          h('div', { style: styles.title }, '${(_a = props.title) !== null && _a !== void 0 ? _a : ""}'),
           h(GaugeChart, {
             id: 'rg-${reactComponentId}',
             colors: ['#D10363', '#4CCD99'],
             needleColor: '#888',
-            ${props.score ? `formatTextValue: value => '${props.score}',` : ''}
+            ${props.score ? `formatTextValue: value => '${props.score}',` : ""}
             ...props,
           }),
           h('div', { style: styles.legend }, '${props.legend}'),
@@ -57,3 +58,4 @@ function gauge(width = 200, props) {
     tslab.display.html(html);
 }
 exports.gauge = gauge;
+//# sourceMappingURL=gauge.js.map

package/dist/gauge/gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.js","sourceRoot":"","sources":["../../src/gauge/gauge.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,iDAA8C;AAE9C,kDAAkD;AAClD,SAAS,KAAK,CACb,KAAK,GAAG,GAAG,EACX,KAOC;;IAED,MAAM,gBAAgB,GAAG,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACtF,MAAM,IAAI,GAAG;eACC,gBAAgB;;;;;;;2BAOJ,mBAAQ,CAAC,KAAK;8BACX,mBAAQ,CAAC,QAAQ;gCACf,mBAAQ,CAAC,eAAe;;;4CAGZ,gBAAgB;2EACe,gBAAgB;kCACzD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;;;oBAGnC,KAAK;;;;;;;;;;;;;;+CAcsB,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE;;sBAE1C,gBAAgB;;;cAGxB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,8BAA8B,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE;;;gDAG9B,KAAK,CAAC,MAAM;;;;;;GAMzD,CAAC;IACH,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAEQ,sBAAK"}

package/dist/index.d.ts

@@ -1,7 +1,8 @@
-export { chart } from './chart/chart';
-export { csv } from './csv/csv';
-export { gauge } from './gauge/gauge';
-export { json } from './json/json';
-export type { IPoint } from './chart/plugins/trendLine';
-export type { IVertLineOptions } from './chart/plugins/verticalLine';
-export type { IVolumeProfileData } from './chart/plugins/volumeProfile';
+export { chart } from "./chart/chart";
+export type { IPoint } from "./chart/plugins/trendLine";
+export type { IVertLineOptions } from "./chart/plugins/verticalLine";
+export type { IVolumeProfileData } from "./chart/plugins/volumeProfile";
+export { csv } from "./csv/csv";
+export { gauge } from "./gauge/gauge";
+export { json } from "./json/json";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACxD,YAAY,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -9,3 +9,4 @@ var gauge_1 = require("./gauge/gauge");
 Object.defineProperty(exports, "gauge", { enumerable: true, get: function () { return gauge_1.gauge; } });
 var json_1 = require("./json/json");
 Object.defineProperty(exports, "json", { enumerable: true, get: function () { return json_1.json; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,uCAAsC;AAA7B,8FAAA,KAAK,OAAA;AAId,iCAAgC;AAAvB,0FAAA,GAAG,OAAA;AACZ,uCAAsC;AAA7B,8FAAA,KAAK,OAAA;AACd,oCAAmC;AAA1B,4FAAA,IAAI,OAAA"}

package/dist/json/json.d.ts

@@ -4,3 +4,4 @@ declare function json<T extends object>(opts: {
     width?: number;
 }): void;
 export { json };
+//# sourceMappingURL=json.d.ts.map

package/dist/json/json.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json.d.ts","sourceRoot":"","sources":["../../src/json/json.ts"],"names":[],"mappings":"AAIA,iBAAS,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,IAAI,EAAE;IACrC,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,QAyBA;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/json/json.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.json = void 0;
 const tslib_1 = require("tslib");
 const tslab = tslib_1.__importStar(require("tslab"));
+const versions_1 = require("../config/versions");
 function json(opts) {
     const width = opts.width || 400;
     const height = opts.height || 200;
@@ -13,9 +14,9 @@ function json(opts) {
       style="width:${width + 50}px;height:${height + 50}px;margin:auto;max-height:${height + 50}px;overflow:scroll;">
     </div>
     <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 ReactJsonTree from "https://esm.sh/react-json-tree@0.15.0";
+      import React from "${versions_1.CDN_URLS.react}";
+      import ReactDOM from "${versions_1.CDN_URLS.reactDom}";
+      import ReactJsonTree from "${versions_1.CDN_URLS.reactJsonTree}";
 
       const reactJupyterLabComponentId = "${reactComponentId}";
       const jupyterLabReactComponentContainer = document.getElementById("${reactComponentId}");
@@ -30,3 +31,4 @@ function json(opts) {
     tslab.display.html(html);
 }
 exports.json = json;
+//# sourceMappingURL=json.js.map

package/dist/json/json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json.js","sourceRoot":"","sources":["../../src/json/json.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,iDAA8C;AAE9C,SAAS,IAAI,CAAmB,IAI/B;IACA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC;IAChC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC;IAClC,MAAM,gBAAgB,GAAG,eAAe,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACrF,MAAM,IAAI,GAAG;;YAEF,gBAAgB;qBACP,KAAK,GAAG,EAAE,aAAa,MAAM,GAAG,EAAE,6BAA6B,MAAM,GAAG,EAAE;;;2BAGpE,mBAAQ,CAAC,KAAK;8BACX,mBAAQ,CAAC,QAAQ;mCACZ,mBAAQ,CAAC,aAAa;;4CAEb,gBAAgB;2EACe,gBAAgB;iCAC1D,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;;;GAOvD,CAAC;IACH,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAEQ,oBAAI"}

package/package.json

@@ -1,17 +1,29 @@
 {
   "name": "tslab-widgets",
-  "version": "0.1.0",
+  "version": "1.0.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,34 @@
   "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": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "cspell": "9.4.0",
+    "lightweight-charts": "5.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "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

@@ -8,19 +8,67 @@
 <hr />
 <br>
 
+## Features
+
+✨ **Financial Charts** - Candlestick, line, area, bar charts with real-time sync
+📊 **Data Visualization** - CSV tables, JSON tree viewer, gauge charts
+🎯 **Chart Sync** - Automatic crosshair and time-scale synchronization across multiple charts
+🔧 **Type-Safe** - Full TypeScript support with comprehensive type definitions
+⚡ **Lightweight** - CDN-based dependencies for fast loading
+
 ### Setup:
 
 - Install [tslab](https://github.com/yunabe/tslab)
-- `npm i tslab-widgets`
+- `npm i -S tslab tslab-widgets`
+- Optional dev dependencies: `npm i -D lightweight-charts tslib react react-dom`
+- `npm install -g tslab`
+- `npm i -S tslab tslab-widgets`
 
 ### 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`
+
+### For Contributors: Updating CDN Versions
+
+```typescript
+// Edit src/config/versions.ts
+export const CDN_VERSIONS = {
+  react: "19.0.0", // Update version here
+  reactDom: "19.0.0",
+  lightweightCharts: "5.1.0",
+  // ...
+};
+```
+
+Then update corresponding versions in package.json devDependencies and run:
+
+```bash
+npm run validate  # Ensures versions match
+npm run build
+```
+
+### 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">
 
-Review the [example jupyter notebook](https://github.com/rodrigopivi/tslab-widgets/blob/main/exampmle.ipynb).
+<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">
 
 ### Author