All files / src/components/views/Credentials/IssueVc IssueVcForm.stories.tsx

0% Statements 0/18
0% Branches 0/4
0% Functions 0/5
0% Lines 0/18

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>
  );
});