Feature/SOF-7728 Feat: initial move from WA

.eslintrc.json

@@ -1,60 +1,26 @@
 {
-    "extends": ["airbnb", "prettier", "eslint:recommended"],
+    "extends": ["@exabyte-io/eslint-config"],
+    "ignorePatterns": ["dist/", "node_modules/", "*.min.js"],
     "settings": {
         "import/resolver": {
             "node": {
-                "paths": ["src"]
-            },
-            "exports": {}
+                "extensions": [".js", ".jsx", ".ts", ".tsx"]
+            }
         }
     },
-    "parser": "@babel/eslint-parser",
-    "env": {
-        "browser": true,
-        "node": true,
-        "mocha": true
-    },
-    "plugins": ["prettier", "simple-import-sort", "jsdoc"],
-    "rules": {
-        "prettier/prettier": "error",
-        "comma-dangle": ["error", "always-multiline"],
-        "array-element-newline": ["error", "consistent"],
-        "no-plusplus": ["error", { "allowForLoopAfterthoughts":  true }],
-        "one-var": ["error", { "uninitialized": "always", "initialized": "never" }],
-        "brace-style": ["error", "1tbs", { "allowSingleLine":  true }],
-        "prefer-template": "off",
-        "camelcase": "off",
-        "max-len": "off",
-        "no-console": "off",
-        "no-unused-expressions": "warn",
-        "no-confusing-arrow": "off",
-        "no-underscore-dangle": "off",
-        "no-return-assign": "off",
-        "consistent-return": "off",
-        "arrow-body-style": "off",
-        "import/prefer-default-export": "off",
-        "import/no-named-as-default-member": "warn",
-        "no-param-reassign": ["warn", { "props": false }],
-        "max-classes-per-file": "warn",
-        "simple-import-sort/imports": [
-            "warn",
-            {
-                "groups": [
-                    // Side effect imports.
-                    ["^\\u0000"],
-                    // Packages.
-                    // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
-                    ["^@?\\w"],
-                    // Absolute imports
-                    [
-                        "^(components|configs|constants|containers|domain|enhancers|hocs|libs|pages|reducers|services|store|modules|dictionaries)(/.*|$)"
-                    ],
-                    // Relative imports.
-                    // Anything that starts with a dot.
-                    ["^\\."]
+    "overrides": [
+        {
+            "files": ["*.ts", "*.tsx"],
+            "parser": "@typescript-eslint/parser",
+            "rules": {
+                "@typescript-eslint/no-unused-vars": [
+                    "error",
+                    {
+                        "argsIgnorePattern": "^_",
+                        "varsIgnorePattern": "^_"
+                    }
                 ]
             }
-        ]
-    }
+        }
+    ]
 }
-

.github/workflows/cicd.yml

@@ -1,27 +1,25 @@
-name: Continuous testing and publication to NPM from 'main'
+name: Continuous Testing and Publication
 
-on: 
-  workflow_dispatch:
-  push:
+on: [push]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
 jobs:
-
   run-js-tests:
     runs-on: ubuntu-latest
-    if: github.repository != 'Exabyte-io/template-definitions'
     strategy:
       matrix:
         node-version:
-          - 14.x
-          - 20.x
+          - 22.x
+          - 24.x
 
     steps:
       - name: Checkout this repository
         uses: actions/checkout@v4
+        with:
+          lfs: true
 
       - name: Checkout actions repository
         uses: actions/checkout@v4
@@ -30,15 +28,22 @@ jobs:
           token: ${{ secrets.BOT_GITHUB_TOKEN }}
           path: actions
 
+      - name: Run JS validate
+        uses: ./actions/js/validate
+        with:
+          node-version: '22.x'
+          skip-eslint: 'true'
+          npm-options: '--legacy-peer-deps'
+
       - name: Run JS tests
         uses: ./actions/js/test
         with:
           node-version: ${{ matrix.node-version }}
+          npm-options: '--legacy-peer-deps'
 
   publish-js-package:
     needs:
       - run-js-tests
-
     runs-on: ubuntu-latest
     if: (github.repository != 'Exabyte-io/template-definitions') && (github.ref_name == 'main')
 
@@ -56,7 +61,38 @@ jobs:
       - name: Publish JS release
         uses: ./actions/js/publish
         with:
-          node-version: 14.x
-          npm-token: ${{ secrets.NPM_TOKEN }}
+          node-version: 22.x
+          npm-token: ${{ secrets.GITHUB_TOKEN }}
+          registry-url: 'https://npm.pkg.github.com'
           github-token: ${{ secrets.BOT_GITHUB_TOKEN }}
+          verify-tests: 'false'
+          npm-options: '--legacy-peer-deps'
 
+  deploy-bundle:
+    needs: [publish-js-package]
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version:
+          - 20.x
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          lfs: true
+
+      - name: Setup NodeJS
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: https://registry.npmjs.org
+
+      - name: Build
+        shell: bash -l {0}
+        run: |
+          npm install --legacy-peer-deps && npm run build
+
+      - name: Deploy Build
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build

.gitignore

@@ -1,7 +1,7 @@
-dist/
 build/
 node_modules/
 .eslintcache
 .nyc_output/
 .idea/
 
+.python-version

README.md

@@ -1,12 +1,45 @@
-# template-definitions
+[![npm version](https://badge.fury.io/js/%40mat3ra%2Fprove.svg)](https://badge.fury.io/js/%40mat3ra%2Fprove)
+[![License: Apache](https://img.shields.io/badge/License-Apache-blue.svg)](https://www.apache.org/licenses/LICENSE-2.0)
 
-Template repository for entity definition libraries in Javascript
+# @mat3ra/prove
 
-See [here](https://docs.github.com/en/github-ae@latest/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template)
-for details on how to use this repository.
+Property visualization components for the Mat3ra workflow ecosystem.
 
-Included is a simple `template.py` analog to `cookiecutter` which will prompt
-the user for some information and then write out templated values in select files.
-After usage, the `template.py` file can be removed and the `README.md` and associated
-`files` can be committed.
 
+### Installation
+
+For usage within a javascript project:
+
+```bash
+npm install @mat3ra/prove
+```
+
+For development:
+
+```bash
+git clone https://github.com/Exabyte-io/prove.git
+```
+
+
+### Contribution
+
+This repository is an [open-source](LICENSE.md) work-in-progress and we welcome contributions.
+
+We regularly deploy the latest code containing all accepted contributions online as part of the
+[Mat3ra.com](https://mat3ra.com) platform, so contributors will see their code in action there.
+
+Useful commands for development:
+
+```bash
+# run linter without persistence
+npm run lint
+
+# run linter and save edits
+npm run lint:fix
+
+# compile the library
+npm run build
+
+# run tests
+npm run test
+```

dist/ResultsView.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface PropertyResult {
+    name: string;
+    value?: number;
+    units?: string;
+}
+interface ResultsViewProps {
+    results?: PropertyResult[];
+}
+export declare const ResultsView: React.FC<ResultsViewProps>;
+export {};

dist/ResultsView.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScalarsList } from "./components/ScalarsList";
+export const ResultsView = ({ results = [] }) => {
+    return _jsx(ScalarsList, { results: results });
+};

dist/components/ResultsView.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface PropertyResult {
+    name: string;
+    value?: number;
+    units?: string;
+}
+interface ResultsViewProps {
+    results?: PropertyResult[];
+}
+export declare const ResultsView: React.FC<ResultsViewProps>;
+export {};

dist/components/ResultsView.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScalarsList } from "./ScalarsList";
+export const ResultsView = ({ results = [] }) => {
+    return _jsx(ScalarsList, { results: results });
+};

dist/components/ScalarsList.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface PropertyResult {
+    name: string;
+    value?: number;
+    units?: string;
+}
+interface ScalarsListProps {
+    results?: PropertyResult[];
+}
+export declare class ScalarsList extends React.Component<ScalarsListProps> {
+    get scalarResults(): PropertyResult[];
+    render(): import("react/jsx-runtime").JSX.Element | null;
+}
+export {};

dist/components/ScalarsList.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PropertyFactory } from "@mat3ra/prode";
+import { Utils } from "@mat3ra/utils";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import React from "react";
+import s from "underscore.string";
+import { getScalarViewConfig } from "../getview";
+import { Scalar } from "./primitive/Scalar";
+const { numberFormat } = Utils.str;
+export class ScalarsList extends React.Component {
+    get scalarResults() {
+        var _a;
+        const scalarResultsNames = PropertyFactory.getScalarPropertyNames();
+        return (((_a = this.props.results) === null || _a === void 0 ? void 0 : _a.filter((x) => {
+            return scalarResultsNames.includes(x.name) && Object.keys(x).length > 1;
+        })) || []);
+    }
+    render() {
+        const widgets = [];
+        this.scalarResults.forEach((result) => {
+            const config = getScalarViewConfig(result.name) || {};
+            const propertyId = s.slugify(result.name);
+            if (result.value !== undefined && config) {
+                widgets.push(_jsx(Grid, { item: true, xs: 12, sm: 6, md: 3, "data-tid": propertyId, children: _jsx(Box, { mb: 2, children: _jsx(Scalar, { icon: config.icon || "", value: numberFormat(result.value, config.decimals), title: s.humanize(result.name), units: result.units }) }) }, propertyId));
+            }
+        });
+        // auto-hide the component if no scalar results
+        if (!widgets.length)
+            return null;
+        return (_jsx(Grid, { container: true, p: 4, children: widgets }));
+    }
+}

dist/components/primitive/Scalar.d.ts

@@ -0,0 +1,8 @@
+interface ScalarProps {
+    value: string | number;
+    icon: string;
+    title: string;
+    units?: string;
+}
+export declare function Scalar({ icon, title, units, value }: ScalarProps): import("react/jsx-runtime").JSX.Element;
+export {};

dist/components/primitive/Scalar.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import IconByName from "@exabyte-io/cove.js/dist/mui/components/icon";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+export function Scalar({ icon, title, units, value }) {
+    return (_jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center" }, children: [_jsx(Box, { className: "chart", px: 2, children: _jsx(IconByName, { name: icon, fontSize: "large" }) }), _jsxs(Box, { className: "count", children: [_jsxs(Typography, { variant: "body2", color: "text.primary", className: "scalar-title", children: [title, " (", units, ")"] }), _jsx(Typography, { variant: "h5", className: "scalar-value", children: value })] })] }));
+}

dist/exports.d.ts

@@ -0,0 +1,5 @@
+export { ScalarsList } from "./components/ScalarsList";
+export { ResultsView } from "./ResultsView";
+export { getScalarViewConfig } from "./getview";
+export type { PropertyWithConfig } from "./getview";
+export { renderResults } from "./index";

dist/exports.js

@@ -0,0 +1,4 @@
+export { ScalarsList } from "./components/ScalarsList";
+export { ResultsView } from "./ResultsView";
+export { getScalarViewConfig } from "./getview";
+export { renderResults } from "./index";

dist/getview.d.ts

@@ -0,0 +1,15 @@
+import { PropertyName } from "@mat3ra/prode";
+type ViewConfig = {
+    icon?: string;
+    title?: string;
+    color?: string;
+    decimals?: number;
+};
+export type PropertyWithConfig = PropertyName.pressure | PropertyName.total_force | PropertyName.total_energy | PropertyName.surface_energy | PropertyName.fermi_energy | PropertyName.reaction_energy_barrier | PropertyName.zero_point_energy | PropertyName.is_relaxed | PropertyName.valence_band_offset;
+/**
+ * The property view for scalars does not contain a component attribute.
+ * This function makes sure the right view config is returned for a scalar property.
+ * @summary Safely return view config for scalar properties.
+ */
+export declare function getScalarViewConfig(propertyName: PropertyWithConfig): ViewConfig;
+export {};