This repository was archived by the owner on Feb 11, 2023. It is now read-only.
feat(react): Added a reusable HypercertImage React component #21
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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", | ||
|
Collaborator
There was a problem hiding this comment. Assuming you don't want API keys and tokens? |
||
| "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/cli@0.1.196/dist/plasmic.schema.json" | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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">) { | ||
|
Collaborator
There was a problem hiding this comment. Instead of Plasmic it might be cleaner to parameterize this component with default values so that you basically get the Hypercert SVG that we've designed, with the option for SDK users to tweak it as they desire by -for instance- injecting a custom color scheme |
||
| 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_); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure if this is the best approach when developing an SDK. It's locking down users into one specific environment