diff --git a/README.md b/README.md index 08bc19ca..e17c5a8e 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ - chore: animate select menu ([5e7b022](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/5e7b022)) - chore: auto-detect Web3 call type ([15ae304](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/15ae304)) - chore: begin work on profile details page ([e4283ef](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/e4283ef)) +- chore: card documentation ([4a4bf13](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/4a4bf13)) - chore: document accordion ([2c0cd55](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/2c0cd55)) - chore: document account settings popup ([955683b](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/955683b)) - chore: expand subgraph ([31e87b2](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/31e87b2)) diff --git a/components/card.stories.js b/components/card.stories.js index e91041c9..9500f83e 100644 --- a/components/card.stories.js +++ b/components/card.stories.js @@ -93,7 +93,7 @@ const metadata = { }, onClick: { type: "function", - description: "The button's onClick handler.", + description: "The card's onClick handler.", table: { type: { summary: "function", diff --git a/components/checkbox.js b/components/checkbox.js index 69450e71..7de160d2 100644 --- a/components/checkbox.js +++ b/components/checkbox.js @@ -40,7 +40,11 @@ export default function Checkbox({ value, onChange, disabled, name, ...rest }) { config: { mass: 3, tension: 300 }, }); return ( - + onChange({ target: { name, value: !checked } })} + {...rest} + > { + _onChange(event); + setValue(event.target.value); + }} + {...args} + /> + ); +} + +export const Checked = Template.bind(); +Checked.args = { value: true }; + +export const Unchecked = Template.bind(); +Unchecked.args = { value: false }; + +export const Mixed = Template.bind(); +Mixed.args = { value: "mixed" }; diff --git a/components/divider.stories.js b/components/divider.stories.js new file mode 100644 index 00000000..956175d1 --- /dev/null +++ b/components/divider.stories.js @@ -0,0 +1,35 @@ +import Divider from "./divider"; + +const metadata = { + title: "Components/Divider", + component: Divider, + argTypes: { + sx: { + type: "object", + description: "Theme UI sx prop.", + table: { + type: { + summary: "object", + }, + }, + }, + "...rest": { + type: "object", + description: "The divider's additional props.", + table: { + type: { + summary: "object", + }, + }, + control: null, + }, + }, +}; +export default metadata; + +function Template(args) { + return ; +} + +export const Default = Template.bind(); +Default.args = { sx: { width: 300 } }; diff --git a/components/evidence.js b/components/evidence.js index 09cc8773..fd41a890 100644 --- a/components/evidence.js +++ b/components/evidence.js @@ -99,7 +99,7 @@ export default function Evidence({ marginBottom: 2, marginTop: -3, marginX: -4, - maxHeight: 618, + maxHeight: 650, overflowY: "scroll", paddingTop: 3, paddingX: 4, diff --git a/components/evidence.stories.js b/components/evidence.stories.js new file mode 100644 index 00000000..80d24b5c --- /dev/null +++ b/components/evidence.stories.js @@ -0,0 +1,161 @@ +import ArchonProvider, { createUseDataloaders } from "./archon-provider"; +import Evidence from "./evidence"; +import Web3Provider from "./web3-provider"; + +import ProofOfHumanity from "subgraph/abis/proof-of-humanity"; +import { address } from "subgraph/config/kovan"; + +const metadata = { + title: "Arbitration/Evidence", + component: Evidence, + argTypes: { + contract: { + type: { name: "string", required: true }, + description: "The arbitrable contract name in the Web3 Provider.", + table: { + type: { + summary: "string", + }, + }, + }, + args: { + type: { name: "array", required: true }, + description: "Arguments to pass to the submitEvidence function.", + table: { + type: { + summary: "array", + }, + }, + }, + evidence: { + type: { name: "array", required: true }, + description: "The list of evidence objects.", + table: { + type: { + summary: "array", + }, + }, + }, + useEvidenceFile: { + type: { name: "function", required: true }, + description: "Archon provider based evidence `dataloader` hook.", + table: { + type: { + summary: "function", + }, + }, + }, + }, +}; +export default metadata; + +const contracts = [ + { + name: "proofOfHumanity", + abi: ProofOfHumanity, + address: { kovan: address }, + }, +]; +function Template(args) { + return ( + + + + + + ); +} + +const { getEvidenceFile: useEvidenceFile } = createUseDataloaders({ + async getEvidenceFile( + { + archon: { + utils, + arbitrable: { ipfsGateway }, + }, + }, + URI + ) { + const fetchFile = (_URI) => + utils + .validateFileFromURI(ipfsGateway + _URI, { + preValidated: true, + }) + .then((res) => res.file); + const file = await fetchFile(URI); + if (file.fileURI) { + const nestedFile = await fetchFile(file.fileURI); + file.fileURI = ipfsGateway + file.fileURI; + file.file = Object.keys(nestedFile).reduce((acc, key) => { + if (acc[key].startsWith("/ipfs/")) acc[key] = ipfsGateway + acc[key]; + return acc; + }, nestedFile); + } + return file; + }, +}); + +export const NoScroll = Template.bind(); +NoScroll.args = { + contract: "proofOfHumanity", + args: ["0xDb3ea8CbFd37D558eAcF8d0352bE3701352C1D9B"], + evidence: [ + { + creationTime: 1600618084, + id: "0x1fccae975b215ef48287818baf62e875dab84510bb17b90390274426e6f3beb4", + URI: "/ipfs/QmNc8osXHsxkU3AJceKfDvKG6vgKBAuwKrjAXeF1LjLVpg/evidence.json", + sender: "0x6695dc16e6c3e1f0d62f30355d7848a3cb37517a", + }, + { + creationTime: 1600617960, + id: "0x464c831f8e842f33f6e020dcbe32bfe482270ba519a3af47eeaed44f2134ca94", + URI: "/ipfs/QmX7CwChSx5hoczvoLyY3EHvsvDpVWqrCkGc8iq9HRwJyC/evidence.json", + sender: "0x6695dc16e6c3e1f0d62f30355d7848a3cb37517a", + }, + { + creationTime: 1599596964, + id: "0x07bf8db105cb13b5437fdc28e614cc805a9d69d172edd99f42464960764eae0b", + URI: + "/ipfs/QmR5nGY21KnsPGx87FhG4czb3ueajWeSFEzpbQkZ9svtYD/registration.json", + sender: "0x4b93a94ca58594faf5f64948a26f3e195eb63b6e", + }, + ], + useEvidenceFile, +}; + +export const Scroll = Template.bind(); +Scroll.args = { + contract: "proofOfHumanity", + args: ["0xDb3ea8CbFd37D558eAcF8d0352bE3701352C1D9B"], + evidence: [ + { + creationTime: 1600618084, + id: "0x1fccae975b215ef48287818baf62e875dab84510bb17b90390274426e6f3beb5", + URI: "/ipfs/QmNc8osXHsxkU3AJceKfDvKG6vgKBAuwKrjAXeF1LjLVpg/evidence.json", + sender: "0x6695dc16e6c3e1f0d62f30355d7848a3cb37517a", + }, + { + creationTime: 1600618084, + id: "0x1fccae975b215ef48287818baf62e875dab84510bb17b90390274426e6f3beb4", + URI: "/ipfs/QmNc8osXHsxkU3AJceKfDvKG6vgKBAuwKrjAXeF1LjLVpg/evidence.json", + sender: "0x6695dc16e6c3e1f0d62f30355d7848a3cb37517a", + }, + { + creationTime: 1600617960, + id: "0x464c831f8e842f33f6e020dcbe32bfe482270ba519a3af47eeaed44f2134ca94", + URI: "/ipfs/QmX7CwChSx5hoczvoLyY3EHvsvDpVWqrCkGc8iq9HRwJyC/evidence.json", + sender: "0x6695dc16e6c3e1f0d62f30355d7848a3cb37517a", + }, + { + creationTime: 1599596964, + id: "0x07bf8db105cb13b5437fdc28e614cc805a9d69d172edd99f42464960764eae0b", + URI: + "/ipfs/QmR5nGY21KnsPGx87FhG4czb3ueajWeSFEzpbQkZ9svtYD/registration.json", + sender: "0x4b93a94ca58594faf5f64948a26f3e195eb63b6e", + }, + ], + useEvidenceFile, +};