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 | import React from "react"; import { storiesOf } from "@storybook/react"; import { Box, Flash } from "rimble-ui"; import { EXAMPLE_SCHEMAS } from "vc-schema-tools"; import { SchemaCard } from "./SchemaCard"; import { jsonSchemaToSchemaInput } from "./utils"; import { SchemaDataInput } from "./types"; import { IdentityThemeProvider } from "../../../themes/IdentityTheme"; const DEFAULT_SCHEMA = "ContentPublishCredential"; const SchemaCardStory = () => { const [schemaKey, setSchemaKey] = React.useState<string>(DEFAULT_SCHEMA); let schemaData: SchemaDataInput | undefined; let error: string | undefined; try { schemaData = jsonSchemaToSchemaInput(EXAMPLE_SCHEMAS[schemaKey]); } catch (err) { console.error("Failed to generate schema input from schema:", err); error = err.message || JSON.stringify(err); } return ( <IdentityThemeProvider> <Box mb={3}> <select value={schemaKey} onChange={(event: any) => setSchemaKey(event.target.value)}> {Object.keys(EXAMPLE_SCHEMAS).map((key) => ( <option key={key} value={key}> {key} </option> ))} </select> </Box> <Box width={480} key={schemaKey}> {schemaData && <SchemaCard schema={schemaData} />} {error && <Flash variant="danger">Error: {error}</Flash>} </Box> </IdentityThemeProvider> ); }; storiesOf("Schemas", module).add("SchemaCard", SchemaCardStory); |