Introduce new @truffle/codec-components react component library

package.json

@@ -13,7 +13,7 @@
     "dependency-graph": "lerna-dependency-graph -f pdf -o dependency-graph.pdf",
     "solc-bump": "node ./scripts/solc-bump.js",
     "update": "lernaupdate",
-    "depcheck": "lerna exec --stream --no-bail dependency-check --ignore @truffle/compile-solidity-tests --ignore @truffle/contract-tests --ignore @truffle/dashboard-message-bus-e2e-test -- --missing .",
+    "depcheck": "lerna exec --stream --no-bail dependency-check --ignore @truffle/compile-solidity-tests --ignore @truffle/contract-tests --ignore @truffle/dashboard-message-bus-e2e-test --ignore @truffle/codec-components -- --missing .",
     "check-truffle-namespace-dependency-versions": "node ./scripts/check-truffle-namespace-dependency-versions.js"
   },
   "devDependencies": {

packages/codec-components/.gitignore

@@ -0,0 +1,2 @@
+/dist
+/docs

packages/codec-components/README.md

@@ -0,0 +1,13 @@
+# @truffle/codec-components
+
+This package provides UI (react) components to display `@truffle/codec` values.
+
+## Install
+
+```sh
+$ npm install --save @truffle/codec-components react react-dom
+```
+
+## Usage and documentation
+
+This package is intended for Truffle Dashboard and MetaMask to use at the moment, APIs and documentation are under development to allow more general use cases in the future.

packages/codec-components/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@truffle/codec-components",
+  "description": "UI component library for @truffle/codec data",
+  "version": "0.1.0-canary-8",
+  "keywords": [
+    "solidity",
+    "ethereum",
+    "react",
+    "ui",
+    "components",
+    "truffle"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/trufflesuite/truffle/tree/develop/packages/codec-components",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/trufflesuite/truffle.git",
+    "directory": "packages/codec-components"
+  },
+  "bugs": {
+    "url": "https://github.com/trufflesuite/truffle/issues"
+  },
+  "author": "cliffoo <41348973+cliffoo@users.noreply.github.com>",
+  "type": "module",
+  "files": [
+    "dist/react/index.{js,js.map,d.ts,css}",
+    "react.d.ts"
+  ],
+  "exports": {
+    "./react": "./dist/react/index.js",
+    "./react-styles": "./dist/react/index.css"
+  },
+  "scripts": {
+    "build": "tsc && node ./scripts/build.js",
+    "dev": "vite",
+    "docs": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "prepare": "yarn build"
+  },
+  "dependencies": {
+    "@truffle/codec": "^0.15.2"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.35.1",
+    "@types/big.js": "^6.0.2",
+    "@types/bn.js": "^5.1.0",
+    "@types/react": ">=16.9.0",
+    "@types/react-dom": ">=16.9.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "big.js": "^6.0.3",
+    "bn.js": "^5.1.3",
+    "sass": "^1.62.1",
+    "typescript": "^4.9.5",
+    "vite": "^4.3.9"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "eslintConfig": {
+    "env": {
+      "browser": true,
+      "es2020": true
+    },
+    "extends": [
+      "../../.eslintrc.package.json",
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react-hooks/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module"
+    },
+    "rules": {
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          "argsIgnorePattern": "^_"
+        }
+      ]
+    }
+  }
+}

packages/codec-components/react.d.ts

@@ -0,0 +1,2 @@
+// Subpath import hack.
+export * from "./dist/react/index";

packages/codec-components/scripts/api-extractor.json

@@ -0,0 +1,16 @@
+{
+  "mainEntryPointFilePath": "../dist/react/index.d.ts",
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "../dist/react/index.d.ts"
+  },
+  "apiReport": { "enabled": false },
+  "docModel": { "enabled": false },
+  "tsdocMetadata": { "enabled": false },
+  "messages": {
+    "extractorMessageReporting": {
+      "ae-forgotten-export": { "logLevel": "none" },
+      "ae-missing-release-tag": { "logLevel": "none" }
+    }
+  }
+}

packages/codec-components/scripts/build.js

@@ -0,0 +1,27 @@
+import { build } from "vite";
+import { Extractor, ExtractorConfig } from "@microsoft/api-extractor";
+
+(async () => {
+  const config = ExtractorConfig.loadFileAndPrepare(
+    "scripts/api-extractor.json"
+  );
+  const result = Extractor.invoke(config, { localBuild: true });
+  if (!result.succeeded) throw new Error("Failed to rollup declaration files.");
+
+  await build({
+    configFile: false,
+    build: {
+      lib: {
+        entry: "src/react/index.ts",
+        fileName: "react/index",
+        formats: ["es"]
+      },
+      rollupOptions: {
+        external: ["react", "react-dom"],
+        output: { assetFileNames: "react/index[extname]" }
+      },
+      sourcemap: true,
+      emptyOutDir: false
+    }
+  });
+})();