Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | import React from "react"; import { storiesOf } from "@storybook/react"; import { Box, Flex, Flash } from "rimble-ui"; import { EXAMPLE_SCHEMAS } from "vc-schema-tools"; import { SchemaDataInput, SchemaDataResponse } from "../../Schemas"; import { jsonSchemaToSchemaInput } from "../../Schemas/utils"; import { IssueVcForm } from "./IssueVcForm"; import { HighlightedJson } from "../../../elements/HighlightedJson/HighlightedJson"; import { IdentityThemeProvider } from "../../../../themes/IdentityTheme"; import { Identifier } from "../../../../types"; import { SertoUiProvider } from "../../../../context/SertoUiProvider"; import { createMockApiRequest } from "../../../../utils/helpers"; const DEFAULT_SCHEMA = "TestCredential"; const IDENTIFIERS: Identifier[] = [ { did: "did:ethr:rinkeby:0xcfa8829812f1b4fe09b27cacf7d36e4d1b5dce76", provider: "did:ethr:rinkeby", alias: "Admin" }, { did: "did:ethr:rinkeby:0x88298d36e4d1b5dce76cf9b27cacf7a12f1b4fe0", provider: "did:ethr:rinkeby", alias: "Another User", }, { did: "did:ethr:rinkeby:0x1b5dce8826e4d76cf9b27cac12f1b4fe098d3f7a", provider: "did:ethr:rinkeby", alias: "Really really really really really really long alias", }, { did: "did:ethr:rinkeby:0x9812f1d36e4d1b5dce7acf76cfa882b4fe09b27c", provider: "did:ethr:rinkeby" }, ]; storiesOf("Credential", module).add("IssueVcForm", () => { const [vcData, setVcData] = React.useState({}); const [error, setError] = React.useState(""); const [schemaKey, setSchemaKey] = React.useState<string>(DEFAULT_SCHEMA); const schemaData: SchemaDataInput | undefined = React.useMemo(() => { setError(""); if (schemaKey) { try { return jsonSchemaToSchemaInput(EXAMPLE_SCHEMAS[schemaKey]); } catch (err) { console.error("Failed to generate schema input from schema:", err); setError(err.toString()); } } }, [schemaKey]); return ( <IdentityThemeProvider> <SertoUiProvider context={{ issueVc: createMockApiRequest(), }} > <Flex> <div> <Box mb={3}> Schema:{" "} <select value={schemaKey} onChange={(event: any) => { setSchemaKey(event.target.value); setVcData({}); setError(""); }} > <option value="">[Raw JSON input]</option> {Object.keys(EXAMPLE_SCHEMAS).map((key) => ( <option key={key} value={key}> {key} </option> ))} </select> </Box> <Box width={10}> {error && <Flash variant="danger">{error}</Flash>} <IssueVcForm key={schemaKey} schema={schemaData as SchemaDataResponse} identifiers={IDENTIFIERS} onComplete={() => {}} onVcDataChange={setVcData} /> </Box> </div> <Box flexGrow={1}> <Box mb={1}>debug:</Box> <HighlightedJson json={vcData} /> </Box> </Flex> </SertoUiProvider> </IdentityThemeProvider> ); }); |