🔧 file modified

🔧 file modified
📄 gitignore file modified
🔧 file modified
📄 html file modified
🔧 file modified
🔧 file modified
🔧 file modified
🐍 python file modified
🔧 file modified
📄 markdown file modified
📄 typescript react file modified
🔧 file modified
🔧 file modified
🔧 file modified
🔧 file mod

packages/common-react/.eslintrc.js

@@ -0,0 +1,21 @@
+/*eslint-env node*/
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  overrides: [],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["react", "@typescript-eslint"],
+  rules: {},
+};

packages/common-react/.gitignore

@@ -0,0 +1,120 @@
+### https://raw.github.com/github/gitignore/218a941be92679ce67d0484547e3e142b2f5f6f0/Node.gitignore
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+

packages/common-react/.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "*.{js,jsx,ts,tsx}": "eslint --cache --fix",
+  "*.{js,jsx,ts,tsx,css,md,json}": "prettier --write"
+}

packages/common-react/.prettierignore

@@ -0,0 +1,12 @@
+# Ignore artifacts:
+build
+coverage
+
+# Ignore all HTML files:
+*.html
+
+# Ignore minified files:
+*.min.*
+
+dist
+tsconfig.json

packages/common-react/.prettierrc.json

@@ -0,0 +1 @@
+{}

packages/common-react/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@stlite/common-react",
+  "version": "0.31.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "private": true,
+  "scripts": {
+    "start": "tsc -w",
+    "build": "tsc",
+    "fix:eslint": "eslint --fix 'src/**/*.{ts,tsx}'",
+    "fix:prettier": "prettier --write .",
+    "check:eslint": "eslint 'src/**/*.{ts,tsx}'",
+    "check:prettier": "prettier --check ."
+  },
+  "dependencies": {
+    "streamlit-browser": "^1.18.1"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
+    "eslint": "^8.33.0",
+    "eslint-plugin-react": "^7.32.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-toastify": "^9.1.1",
+    "typescript": "^4.9.4"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-toastify": "^9.1.1"
+  }
+}

packages/common-react/src/index.ts

@@ -0,0 +1 @@
+export * from "./toastify-components";

packages/common-react/src/toastify-components/ErrorToastContent.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { ToastContentProps } from "react-toastify";
+
+interface ErrorToastContentProps {
+  message: string;
+  error?: Error;
+}
+
+function ErrorToastContent(props: ErrorToastContentProps) {
+  const injectedProps = props as ErrorToastContentProps & ToastContentProps; // ToastContentProps is injected by react-toastify
+
+  return (
+    <>
+      <p>{injectedProps.message}</p>
+      {injectedProps.error && (
+        <pre
+          style={{
+            overflow: "scroll",
+            maxHeight: 300,
+          }}
+        >
+          <code>{injectedProps.error.message}</code>
+        </pre>
+      )}
+    </>
+  );
+}
+
+export default ErrorToastContent;

packages/common-react/src/toastify-components/ToastContainer.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { ToastContainer as DefaultToastContainer } from "react-toastify";
+import { isDarkTheme } from "./theme";
+
+function ToastContainer() {
+  return (
+    <DefaultToastContainer
+      style={{ zIndex: 999999 }}
+      theme={isDarkTheme() ? "dark" : "light"}
+    />
+  );
+}
+
+export default ToastContainer;

packages/common-react/src/toastify-components/callbacks.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { StliteKernelOptions } from "@stlite/kernel";
+import { toast, Slide, Id as ToastId } from "react-toastify";
+import ErrorToastContent from "./ErrorToastContent";
+
+interface ToastKernelCallbacks {
+  onProgress: StliteKernelOptions["onProgress"];
+  onLoad: StliteKernelOptions["onLoad"];
+  onError: StliteKernelOptions["onError"];
+}
+export function makeToastKernelCallbacks(): ToastKernelCallbacks {
+  let prevToastId: ToastId | null = null;
+  const toastIds: ToastId[] = [];
+  const onProgress: StliteKernelOptions["onProgress"] = (message) => {
+    const id = toast(message, {
+      position: toast.POSITION.BOTTOM_RIGHT,
+      transition: Slide,
+      isLoading: true,
+      hideProgressBar: true,
+      closeButton: false,
+    });
+    toastIds.push(id);
+
+    if (prevToastId) {
+      toast.update(prevToastId, {
+        isLoading: false,
+        autoClose: 3000,
+      });
+    }
+    prevToastId = id;
+  };
+  const onLoad: StliteKernelOptions["onLoad"] = () => {
+    toastIds.forEach((id) => toast.dismiss(id));
+  };
+  const onError: StliteKernelOptions["onError"] = (error) => {
+    toast(
+      <ErrorToastContent message="Error during booting up" error={error} />,
+      {
+        position: toast.POSITION.BOTTOM_RIGHT,
+        type: "error",
+        autoClose: false,
+        closeOnClick: false,
+      }
+    );
+  };
+
+  return {
+    onProgress,
+    onLoad,
+    onError,
+  };
+}

packages/common-react/src/toastify-components/index.ts

@@ -0,0 +1,4 @@
+export * from "./callbacks";
+export * from "./stlite-kernel-with-toast";
+export { default as ToastContainer } from "./ToastContainer";
+export { default as ErrorToastContent } from "./ErrorToastContent";

packages/common-react/src/toastify-components/stlite-kernel-with-toast.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { StliteKernel } from "@stlite/kernel";
+import { toast } from "react-toastify";
+import ErrorToastContent from "./ErrorToastContent";
+
+export class StliteKernelWithToast {
+  constructor(private kernel: StliteKernel) {}
+
+  public writeFile(...args: Parameters<StliteKernel["writeFile"]>) {
+    return toast.promise<void, Error>(
+      this.kernel.writeFile(...args),
+      {
+        error: "Failed to write the file",
+      },
+      {
+        hideProgressBar: true,
+        position: toast.POSITION.BOTTOM_RIGHT,
+      }
+    );
+  }
+
+  public renameFile(...args: Parameters<StliteKernel["renameFile"]>) {
+    return toast.promise<void, Error>(
+      this.kernel.renameFile(...args),
+      {
+        error: "Failed to rename the file",
+      },
+      {
+        hideProgressBar: true,
+        position: toast.POSITION.BOTTOM_RIGHT,
+      }
+    );
+  }
+
+  public unlink(...args: Parameters<StliteKernel["unlink"]>) {
+    return toast.promise<void, Error>(
+      this.kernel.unlink(...args),
+      {
+        error: "Failed to remove the file",
+      },
+      {
+        hideProgressBar: true,
+        position: toast.POSITION.BOTTOM_RIGHT,
+      }
+    );
+  }
+
+  public install(...args: Parameters<StliteKernel["install"]>) {
+    return toast.promise<void, Error>(
+      this.kernel.install(...args),
+      {
+        pending: "Installing",
+        success: "Successfully installed",
+        error: {
+          render({ data }) {
+            return (
+              <ErrorToastContent message="Failed to install" error={data} />
+            );
+          },
+          autoClose: false,
+          closeOnClick: false,
+        },
+      },
+      {
+        hideProgressBar: true,
+        position: toast.POSITION.BOTTOM_RIGHT,
+      }
+    );
+  }
+}