Merge branch 'main' into yogesh-split-publish-ci

# Conflicts:
#	.github/workflows/publish-backend.yml

Author: b-yogesh

.github/workflows/backend-ci.yml

@@ -21,4 +21,13 @@ jobs:
           shell: bash -l {0}
           run: |
             cd chartlets.py 
-            pytest
+            pytest --cov=chartlets --cov-report=xml
+
+        - name: Upload coverage reports to Codecov
+          uses: codecov/codecov-action@v4
+          with:
+            fail_ci_if_error: true
+            directory: chartlets.py/
+            flags: backend
+            verbose: true
+            token: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/frontend-ci.yml

@@ -17,22 +17,46 @@ jobs:
         with:
           node-version: '18.x'
 
-      - name: Install dependencies
+      - name: Install common dependencies
         run: |
           cd chartlets.js 
           npm install 
 
-      - name: Linter
+      - name: Lib lint
         run: |
-          cd chartlets.js  
+          cd chartlets.js/packages/lib  
           npm run lint
 
-      - name: Run frontend tests
+      - name: Lib tests
         run: |
-          cd chartlets.js  
+          cd chartlets.js/packages/lib  
           npm run test
 
-      - name: Build frontend application
+      - name: Lib coverage
         run: |
-          cd chartlets.js  
+          cd chartlets.js/packages/lib  
+          npm run coverage
+
+      - name: Upload coverage reports for lib to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          fail_ci_if_error: true
+          directory: chartlets.js/packages/lib/coverage/
+          flags: frontend
+          verbose: true
+          token: ${{ secrets.CODECOV_TOKEN }}
+
+      - name: Lib build
+        run: |
+          cd chartlets.js/packages/lib  
+          npm run build
+
+      - name: Demo lint
+        run: |
+          cd chartlets.js/packages/demo  
+          npm run lint
+
+      - name: Demo build
+        run: |
+          cd chartlets.js/packages/demo  
           npm run build

.github/workflows/publish-backend.yml

@@ -41,7 +41,7 @@ jobs:
         pytest --cov=chartlets
         
     - name: Upload coverage reports to Codecov
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4
       env:
         CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
@@ -77,3 +77,53 @@ jobs:
         password: ${{ secrets.PYPI_API_TOKEN }}
         packages_dir: chartlets.py/dist
         verbose: true
+
+  npm-tests:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x, 20.x]
+        # See supported Node.js release schedule at
+        # https://nodejs.org/en/about/releases/
+    defaults:
+      run:
+        working-directory: chartlets.js
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+          cache-dependency-path: chartlets.js/package-lock.json
+          
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run build
+      - run: npm run test
+  
+  npm-Deploy:
+    name: Publish TS-React Package to npmjs
+    runs-on: ubuntu-latest
+    needs: npm-tests
+    defaults:
+      run:
+        working-directory: chartlets.js
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'npm'
+          cache-dependency-path: chartlets.js/package-lock.json
+          
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -12,6 +12,8 @@ node_modules
 __pycache__
 # mkdocs
 site
+# pytest --cov
+.coverage
 
 # Editor directories and files
 .vscode/*

README.md

@@ -1,5 +1,11 @@
 # Chartlets
 
+[![CI](https://github.com/bcdev/chartlets/actions/workflows/frontend-ci.yml/badge.svg)](https://github.com/bcdev/chartlets/actions/workflows/frontend-ci.yml)
+[![npm](https://badge.fury.io/js/chartlets.svg)](https://npmjs.org/package/chartlets)
+
+[![CI](https://github.com/bcdev/chartlets/actions/workflows/backend-ci.yml/badge.svg)](https://github.com/bcdev/chartlets/actions/workflows/backend-ci.yml)
+[![PyPI](https://img.shields.io/pypi/v/chartlets)](https://pypi.org/project/chartlets/)
+
 Chartlets is a software framework that allows websites developed with
 React to be extended by server-side UI contributions programmed in Python 
 or other programming languages. 
@@ -11,10 +17,11 @@ Please see the [Documentation](https://bcdev.github.io/chartlets/) for more info
 
 ## Features
 
-- Enhance your React web application by UI-contributions programmed in Python
-- Enhance your (Python) web API to serve server-side UI-contributions.
-- Uses [Material UI](https://mui.com/material-ui/) components and 
-  [Vega-Lite](https://vega.github.io/vega-lite/) charts.
+- Enhance your React web application by UI-contributions programmed in Python.
+- Enhance your Python REST server to publish server-side UI-contributions.
+- Support your favorite charting library or UI component library by plugins.
+- Use provided plugins for [Vega-Lite](https://vega.github.io/vega-lite/) charts and [Material UI](https://mui.com/material-ui/)
+  components.
 
 ## License
 

chartlets.js/.gitignore

@@ -7,7 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-node_modules
+packages/lib/node_modules
 dist
 dist-ssr
 *.local

chartlets.js/CHANGES.md

@@ -1,3 +1,54 @@
+## Version 0.1.0 (in development)
+
+* Reorganised Chartlets project to better separate demo from library code.
+  Using monorepo layout for `chartlets.js` with workspaces `lib` and `demo`
+  that host the packages for `chartlets` and `chartlets-demo`.
+
+* Other code reorganisations:
+  - moved `component/Registry` into `store` 
+  - renamed module `component` into `components` 
+  - no longer exposing `Registry` type
+
+* Chartlets now allows for plugins that can provide individual component 
+  implementations.
+  The Vega-based chart and MUI components are now optional and have been 
+  moved into respective plugin modules `chartlets/plugins/vega` and
+  `chartlets/plugins/mui`.
+  To activate them, use the new `plugins: PluginLike[]` option 
+  of `FrameworkOptions`:
+  ```TypeScript
+  import { configureFramework } from "chartlets";
+  import mui from "chartlets/plugins/mui";
+  import vega from "chartlets/plugins/vega";
+  
+  configureFramework({ plugins: [mui(), vega()], ... });   
+  ```
+
+* Renamed `Plot` component into `VegaChart`.
+
+* The new `VegaChart` component respects a `theme` property. If not given,
+  it will respect the current theme mode `"dark"` otherwise fallback to the
+  Vega default theme. 
+
+* The demo application now allows for switching the theme mode between
+  dark, light, and system mode.
+
+* Changed the yet unused descriptor type `CbFunction` for callback functions.
+  - using `schema` instead of `type` property for callback arguments
+  - using `return` object with `schema` property for callback return values
+
+* New (MUI) components
+  - `LinearProgress`
+  - `RadioGroup` and `Radio`
+  - `Switch`
+  - `Tabs`
+
+* Supporting `tooltip` property for interactive MUI components.
+
+## Version 0.0.29 (from 2024/11/26)
+
+* Resolved warnings that appeared when using Vega charts.
+
 ## Version 0.0.28 (from 2024/11/26)
 
 * Updated docs.

chartlets.js/README.md

@@ -1,23 +1,14 @@
-# chartlets 
+# Chartlets 
 
-[![Frontend CI workflow](https://github.com/bcdev/chartlets/actions/workflows/frontend-ci.yml/badge.svg)](https://github.com/bcdev/chartlets/actions/workflows/frontend-ci.yml)
-[![NPM Version](https://badge.fury.io/js/chartlets.svg)](https://npmjs.org/package/chartlets)
+[![CI](https://github.com/bcdev/chartlets/actions/workflows/frontend-ci.yml/badge.svg)](https://github.com/bcdev/chartlets/actions/workflows/frontend-ci.yml)
+[![npm](https://badge.fury.io/js/chartlets.svg)](https://npmjs.org/package/chartlets)
 ![](https://img.shields.io/badge/Linting-TypeScript%20%26%20Prettier-blue?logo=typescript&logoColor=white)
 
-
-[![NPM Download Stats](https://nodei.co/npm/chartlets.png?downloads=true)](https://www.npmjs.com/package/chartlets)
-
 Chartlets is a software framework that allows websites developed with
 React to be extended by server-side widgets programmed in Python or other
 programming languages. 
 
-This is the JavaScript/React library of the framework.
+This is the **JavaScript/React library** of the framework.
 
 For details refer to the [documentation](https://bcdev.github.io/chartlets/).
 
-## Run the demo UI
-
-``` bash
-npm install
-npm run dev
-```