feat(react): Added a reusable HypercertImage React component

* Adds Plasmic codegen to the project, with instructions in README
* Checking in the current Plasmic-generated Hypercert Image
* Wrapper component will translate HypercertMetadata to the Plasmic
  component API

README.md

@@ -29,6 +29,25 @@ yarn build
 [API documentation](/docs/API.md)
 [Graph playground](https://thegraph.com/hosted-service/subgraph/bitbeckers/hypercerts-dev)
 
+## Updating Plasmic designs
+
+The visual designs are edited in [Plasmic](https://plasmic.app?ref=ryscheng). You can sign up for an account [here](https://plasmic.app?ref=ryscheng).
+
+These are then manually synced into React components. You can find a list of all Plasmic-generated React components in `plasmic.json`.
+
+To update the design:
+
+1. Navigate to the [Plasmic project](https://studio.plasmic.app/projects/tKtnZiEMup1PmF99tS3Jhx/). Make sure you have edit permissions.
+
+2. Sync the designs into the repository via `yarn plasmic:sync`.
+
+3. If you are updating the design-code API, make sure to edit the respective wrapper file in `./src/components` (e.g. `HypercertImage.tsx`).
+
+For docs on how to use Plasmic, see the [docs](https://docs.plasmic.app/learn/plasmic-studio-guide/).
+Note: this is a different usage pattern than what we do in Next.js codebases.
+https://github.com/vercel/next.js/issues/19936
+
+
 ## Packages
 
 ### Contracts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@network-goods/hypercerts-sdk",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "SDK for hypercerts protocol",
   "repository": "[email protected]:Network-Goods/hypercerts-sdk.git",
   "author": "Network Goods",
@@ -36,7 +36,11 @@
     "@graphql-mesh/utils": "latest",
     "@graphql-tools/merge": "latest",
     "@network-goods/hypercerts-protocol": "0.0.6",
+    "@plasmicapp/cli": "^0.1.196",
+    "@plasmicapp/host": "^1.0.94",
+    "@plasmicapp/react-web": "^0.2.141",
     "@types/jest": "^29.2.5",
+    "@types/react": "^18.0.27",
     "ajv": "^8.11.2",
     "axios": "^1.2.2",
     "ethers": "^5.7.2",
@@ -46,6 +50,7 @@
     "loglevel": "^1.8.1",
     "mime": "^3.0.0",
     "nft.storage": "^7.0.0",
+    "react": "^18.2.0",
     "ts-jest": "^29.0.3",
     "ts-mocha": "^10.0.0"
   },
@@ -54,6 +59,7 @@
     "@types/chai": "^4.3.4",
     "@types/node": "^18.11.17",
     "chai": "^4.3.7",
+    "copyfiles": "^2.4.1",
     "it-all": "^2.0.0",
     "json-schema-to-typescript": "^11.0.2",
     "mockipfs": "^0.3.0",
@@ -75,7 +81,9 @@
     "graph:build:esm": "rm -rf ./src/.graphclient && NODE_OPTIONS='--loader ts-node/esm' graphclient build --filetype js --throwOnInvalidConfig && mv .graphclient ./src/.graphclient",
     "clean": "rm -rf ./lib && rm -rf ./src/types",
     "build": "yarn clean && yarn types:json && yarn graph:build:esm && yarn build:esm",
-    "build:esm": "tsc",
+    "build:esm": "tsc && yarn copy:css",
+    "copy:css": "copyfiles --error -u 1 \"./src/**/*.css\" \"./lib/\"",
+    "plasmic:sync": "plasmic sync",
     "prebuild": "yarn clean",
     "prepack": "yarn build",
     "test": "NODE_OPTIONS=\"--experimental-vm-modules\" jest",

plasmic.json

@@ -0,0 +1,110 @@
+{
+  "platform": "react",
+  "code": {
+    "lang": "ts",
+    "scheme": "blackbox",
+    "reactRuntime": "classic"
+  },
+  "style": {
+    "scheme": "css-modules",
+    "defaultStyleCssFilePath": "plasmic/plasmic__default_style.module.css"
+  },
+  "images": {
+    "scheme": "inlined",
+    "publicDir": "../public",
+    "publicUrlPrefix": "/static/"
+  },
+  "tokens": {
+    "scheme": "theo",
+    "tokensFilePath": "plasmic-tokens.theo.json"
+  },
+  "srcDir": "src/components",
+  "defaultPlasmicDir": "./plasmic",
+  "projects": [
+    {
+      "projectId": "tKtnZiEMup1PmF99tS3Jhx",
+      "projectApiToken": "AsobqMlbpUFpzh4uM8U3j9T66AY1nPrX6jtk0JNeiVriaf0X50gR1cwuY8b1y1JLUSBF74oHrmo2KRMA07w",
+      "projectName": "Hypercerts Core",
+      "version": "latest",
+      "cssFilePath": "plasmic/hypercerts_core/plasmic_hypercerts_core.module.css",
+      "components": [
+        {
+          "id": "nRgxc3-mhP",
+          "name": "HypercertImage",
+          "type": "managed",
+          "projectId": "tKtnZiEMup1PmF99tS3Jhx",
+          "renderModuleFilePath": "plasmic/hypercerts_core/PlasmicHypercertImage.tsx",
+          "importSpec": {
+            "modulePath": "HypercertImage.tsx"
+          },
+          "cssFilePath": "plasmic/hypercerts_core/PlasmicHypercertImage.module.css",
+          "scheme": "blackbox",
+          "componentType": "component"
+        },
+        {
+          "id": "Nv7cSj-s9F",
+          "name": "WorkScopeChip",
+          "type": "managed",
+          "projectId": "tKtnZiEMup1PmF99tS3Jhx",
+          "renderModuleFilePath": "plasmic/hypercerts_core/PlasmicWorkScopeChip.tsx",
+          "importSpec": {
+            "modulePath": "WorkScopeChip.tsx"
+          },
+          "cssFilePath": "plasmic/hypercerts_core/PlasmicWorkScopeChip.module.css",
+          "scheme": "blackbox",
+          "componentType": "component"
+        }
+      ],
+      "icons": [],
+      "images": [
+        {
+          "id": "vr4pSW2pH",
+          "name": "orb",
+          "filePath": "plasmic/hypercerts_core/images/orb.png"
+        },
+        {
+          "id": "bQIat_8lS",
+          "name": "collection-logo",
+          "filePath": "plasmic/hypercerts_core/images/collectionLogo.png"
+        },
+        {
+          "id": "2etckvHUL",
+          "name": "squiggly",
+          "filePath": "plasmic/hypercerts_core/images/squiggly.png"
+        },
+        {
+          "id": "_TBH9MuFK",
+          "name": "tile-background",
+          "filePath": "plasmic/hypercerts_core/images/tileBackground.png"
+        }
+      ],
+      "indirect": false,
+      "globalContextsFilePath": "",
+      "codeComponents": [
+        {
+          "id": "2LeErUoxBv",
+          "name": "PlasmicHead",
+          "componentImportPath": "@plasmicapp/react-web"
+        },
+        {
+          "id": "XPYFyglhLZ",
+          "name": "Fetcher",
+          "componentImportPath": "@plasmicapp/react-web/lib/data-sources"
+        }
+      ]
+    }
+  ],
+  "globalVariants": {
+    "variantGroups": [
+      {
+        "id": "OGoErvQynxLNx",
+        "name": "Screen",
+        "projectId": "tKtnZiEMup1PmF99tS3Jhx",
+        "contextFilePath": "plasmic/hypercerts_core/PlasmicGlobalVariant__Screen.tsx"
+      }
+    ]
+  },
+  "wrapPagesWithGlobalContexts": true,
+  "cliVersion": "0.1.196",
+  "$schema": "https://unpkg.com/@plasmicapp/[email protected]/dist/plasmic.schema.json"
+}

plasmic.lock

@@ -0,0 +1,64 @@
+{
+  "projects": [
+    {
+      "projectId": "tKtnZiEMup1PmF99tS3Jhx",
+      "version": "latest",
+      "dependencies": {},
+      "lang": "ts",
+      "fileLocks": [
+        {
+          "type": "globalVariant",
+          "assetId": "OGoErvQynxLNx",
+          "checksum": "02cb7c0c3ff7f83bb388c5e90f0aa379"
+        },
+        {
+          "type": "renderModule",
+          "assetId": "nRgxc3-mhP",
+          "checksum": "e9469d670f3ff0836181c0f6a51b0a2b"
+        },
+        {
+          "type": "cssRules",
+          "assetId": "nRgxc3-mhP",
+          "checksum": "e9469d670f3ff0836181c0f6a51b0a2b"
+        },
+        {
+          "type": "renderModule",
+          "assetId": "Nv7cSj-s9F",
+          "checksum": "696c22592d0a748f052194b3c0e39025"
+        },
+        {
+          "type": "cssRules",
+          "assetId": "Nv7cSj-s9F",
+          "checksum": "696c22592d0a748f052194b3c0e39025"
+        },
+        {
+          "type": "image",
+          "assetId": "vr4pSW2pH",
+          "checksum": "584f7c16d3d91b7ad19452166ccfcf33"
+        },
+        {
+          "type": "image",
+          "assetId": "bQIat_8lS",
+          "checksum": "5f2b382edb73f907a81757aa07f153bd"
+        },
+        {
+          "type": "image",
+          "assetId": "2etckvHUL",
+          "checksum": "2425352e5c64b289d65c6f7b2f2b1f0a"
+        },
+        {
+          "type": "image",
+          "assetId": "_TBH9MuFK",
+          "checksum": "b590f3f90a32ddb3b31333c17189d9b7"
+        },
+        {
+          "assetId": "tKtnZiEMup1PmF99tS3Jhx",
+          "type": "projectCss",
+          "checksum": "19940b6b9dfd706f089e6e1d13abb0c9"
+        }
+      ],
+      "codegenVersion": "0.0.1"
+    }
+  ],
+  "cliVersion": "0.1.196"
+}

src/components/HypercertImage.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { PlasmicHypercertImage, DefaultHypercertImageProps } from "./plasmic/hypercerts_core/PlasmicHypercertImage";
+import { HTMLElementRefOf } from "@plasmicapp/react-web";
+import { HypercertMetadata } from "../types/metadata";
+
+export interface HypercertImageProps extends DefaultHypercertImageProps {
+  metadata: HypercertMetadata
+  rootRef?: React.Ref<HTMLDivElement>;
+  projectLogo?: React.ReactNode;
+  collectionLogo?: React.ReactNode;
+  percentOwnership?: number;
+}
+
+function HypercertImage_(props: HypercertImageProps, ref: HTMLElementRefOf<"div">) {
+  const { metadata, rootRef, projectLogo, collectionLogo, percentOwnership, ...rest } = props;
+
+  // This assumes we are using the schema in https://github.com/Network-Goods/hypercerts/issues/98
+  const hideFraction = !percentOwnership;
+  const impactScopeLabel = metadata.properties.impact_scope?.display_value;
+  const workPeriodLabel = metadata.properties.work_timeframe?.display_value;
+  const workScopes = metadata.properties.work_scope?.value;
+
+  // Validate and retrieve the proper workscope
+  const getWorkScope = (i: number) => 
+    Array.isArray(workScopes) && workScopes.length > i ?
+    workScopes[i] :
+    null;
+  // get the props to pass into the WorkScopeChip component
+  const getWorkScopeProps = (i: number) => {
+    const label = getWorkScope(i);
+    return {
+      // Hide the chip if `null`
+      style: label ? {} : { display: "none" },
+      children: label,
+    };
+  };
+
+  return (
+    <PlasmicHypercertImage
+      root={{ ref }}
+      {...rest}
+      root2={{ ref:rootRef }}
+      title={metadata.name}
+      impactScope={impactScopeLabel}
+      workPeriod={workPeriodLabel}
+      projectLogo={projectLogo}
+      hideCollectionLogo={true}
+      collectionLogo={collectionLogo}
+      workScope0={getWorkScopeProps(0)}
+      workScope1={getWorkScopeProps(1)}
+      workScope2={getWorkScopeProps(2)}
+      hideFraction={hideFraction}
+      percentOwnership={percentOwnership}
+    />
+  );
+}
+
+export const HypercertImage = React.forwardRef(HypercertImage_);

src/components/WorkScopeChip.tsx

@@ -0,0 +1,42 @@
+// This is a skeleton starter React component generated by Plasmic.
+// This file is owned by you, feel free to edit as you see fit.
+import * as React from "react";
+import { PlasmicWorkScopeChip, DefaultWorkScopeChipProps } from "./plasmic/hypercerts_core/PlasmicWorkScopeChip";
+import { HTMLElementRefOf } from "@plasmicapp/react-web";
+
+// Your component props start with props for variants and slots you defined
+// in Plasmic, but you can add more here, like event handlers that you can
+// attach to named nodes in your component.
+//
+// If you don't want to expose certain variants or slots as a prop, you can use
+// Omit to hide them:
+//
+// interface WorkScopeChipProps extends Omit<DefaultWorkScopeChipProps, "hideProps1"|"hideProp2"> {
+//   // etc.
+// }
+//
+// You can also stop extending from DefaultWorkScopeChipProps altogether and have
+// total control over the props for your component.
+export interface WorkScopeChipProps extends DefaultWorkScopeChipProps {}
+
+function WorkScopeChip_(props: WorkScopeChipProps, ref: HTMLElementRefOf<"div">) {
+  // Use PlasmicWorkScopeChip to render this component as it was
+  // designed in Plasmic, by activating the appropriate variants,
+  // attaching the appropriate event handlers, etc.  You
+  // can also install whatever React hooks you need here to manage state or
+  // fetch data.
+  //
+  // Props you can pass into PlasmicWorkScopeChip are:
+  // 1. Variants you want to activate,
+  // 2. Contents for slots you want to fill,
+  // 3. Overrides for any named node in the component to attach behavior and data,
+  // 4. Props to set on the root node.
+  //
+  // By default, we are just piping all WorkScopeChipProps here, but feel free
+  // to do whatever works for you.
+
+  return <PlasmicWorkScopeChip root={{ ref }} {...props} />;
+}
+
+const WorkScopeChip = React.forwardRef(WorkScopeChip_);
+export default WorkScopeChip;