@seasketch/geoprocessing/dist/src/components/ResultsCard.stories.js

Geoprocessing and reporting framework for SeaSketch 2.0

import React, { useState } from "react";
import ResultsCard from "./ResultsCard.js";
import { createReportDecorator } from "./storybook/ReportDecorator.js";
import { ReportContext, sampleSketchReportContextValue, } from "../context/index.js";
import Skeleton from "./Skeleton.js";
import { LayerToggle } from "./LayerToggle.js";
import { Collapse } from "./Collapse.js";
import fixtures from "../testing/fixtures/index.js";
import DataDownload from "./DataDownload.js";
import ToolbarCard from "./ToolbarCard.js";
const contextValue = sampleSketchReportContextValue({
    visibleLayers: [],
    exampleOutputs: [
        {
            functionName: "area",
            sketchName: "My Sketch",
            results: {
                area: 704,
            },
        },
    ],
});
export const basic = () => (React.createElement(ResultsCard, { title: "Card Title", functionName: "area" }, (data) => (React.createElement("p", null,
    "This zone is ",
    data.area,
    " sq km. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nisi beatae, officiis perferendis quis inventore quisquam? Provident doloremque inventore, natus beatae quam nisi eius quidem deserunt, aperiam aliquid corrupti eveniet."))));
const geographyIds = ["nearshore", "offshore"];
export const extraParams = () => {
    const [geography, setGeography] = useState("nearshore");
    const geographySwitcher = (e) => {
        console.log("changing geography to", e.target.value);
        setGeography(e.target.value);
    };
    return (React.createElement(React.Fragment, null,
        React.createElement("select", { onChange: geographySwitcher }, geographyIds.map((geographyId) => {
            return (React.createElement("option", { key: geographyId, value: geographyId }, geographyId));
        })),
        " ",
        React.createElement(ResultsCard, { title: "Card Title", functionName: "area", extraParams: { geography } }, () => (React.createElement(React.Fragment, null,
            React.createElement("p", null,
                "Cur geography: ",
                geography),
            React.createElement("p", null, "Note that smoke tests are not setup to generate output for more than one extraParams value. In fact, by default the extraParams value is not set for a story. Storybook is also not setup to load more than one output. So This story demonstrates how to use a UI switcher to control passing different values to extraParams, but it won't change the output. The approach to seeing what the output would be for different values of extraParams is to run the smoke tests is to create multiple independent smoke tests, each with different values."))))));
};
export const loadingState = () => (React.createElement(ReportContext.Provider, { value: {
        ...contextValue,
        simulateLoading: true,
    } },
    React.createElement(ResultsCard, { title: "Card Title", functionName: "area" }, (data) => (React.createElement("p", null,
        "This zone is ",
        data.area,
        " sq km. Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque illo ipsum odit rerum delectus consequuntur corrupti, magnam quas? Ipsam quis soluta labore. Laudantium tenetur illo voluptatem temporibus totam et incidunt.")))));
export const customSkeleton = () => (React.createElement(ReportContext.Provider, { value: {
        ...contextValue,
        simulateLoading: true,
    } },
    React.createElement(ResultsCard, { title: "Card Title", functionName: "area", skeleton: React.createElement(DefaultSkeleton, null) }, (data) => (React.createElement("p", null,
        "This zone is ",
        data.area,
        " sq km. Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque illo ipsum odit rerum delectus consequuntur corrupti, magnam quas? Ipsam quis soluta labore. Laudantium tenetur illo voluptatem temporibus totam et incidunt.")))));
const DefaultSkeleton = () => (React.createElement("div", null,
    React.createElement(Skeleton, { style: { width: "100%", height: "130px" } }),
    React.createElement(Skeleton, null),
    React.createElement(Skeleton, null),
    React.createElement(Skeleton, { style: { width: "50%" } })));
export const errorState = () => (React.createElement(ReportContext.Provider, { value: {
        ...contextValue,
        simulateError: "Internal server error",
    } },
    React.createElement(ResultsCard, { title: "Card Title", functionName: "area" }, (data) => React.createElement("p", null,
        "This zone is ",
        data.area,
        " sq km."))));
export const noDataState = () => (React.createElement(ReportContext.Provider, { value: {
        ...contextValue,
        exampleOutputs: [
            {
                functionName: "area",
                sketchName: "My Sketch",
                results: null,
            },
        ],
    } },
    React.createElement(ResultsCard, { title: "Card Title", functionName: "area" }, (data) => React.createElement("p", null,
        "This zone is ",
        data.area,
        " sq km."))));
const ThrowComponent = () => {
    throw new Error("error!");
    return React.createElement(React.Fragment, null);
};
export const errorBoundary = () => (React.createElement(ReportContext.Provider, { value: {
        ...contextValue,
    } },
    React.createElement(ResultsCard, { title: "Card Title", functionName: "area" }, () => {
        return React.createElement(ThrowComponent, null);
    })));
const loadedRightItems = (React.createElement(React.Fragment, null,
    React.createElement(LayerToggle, { label: "Show EEZ Boundary", layerId: "5e80c8a8cd44abca6e5268af", simple: true }),
    React.createElement(DataDownload, { filename: "sample", data: fixtures.ranked, formats: ["csv", "json"], placement: "left-end" })));
export const customCard = () => (React.createElement(ReportContext.Provider, { value: {
        ...contextValue,
    } },
    React.createElement(ResultsCard, { title: "Card Title", functionName: "area", useChildCard: true }, (data) => (React.createElement(ToolbarCard, { title: "Card Title", items: loadedRightItems },
        React.createElement("p", null,
            "This zone is ",
            data.area,
            " sq km. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nisi beatae, officiis perferendis quis inventore quisquam? Provident doloremque inventore, natus beatae quam nisi eius quidem deserunt, aperiam aliquid corrupti eveniet."),
        React.createElement(Collapse, { title: "Learn More" },
            React.createElement("p", null, "Additional elements in here")),
        React.createElement(Collapse, { title: "Show by MPA" },
            React.createElement("p", null, "Additional elements in here")))))));
export const customCardToggled = () => (React.createElement(ReportContext.Provider, { value: {
        ...contextValue,
        visibleLayers: ["5e80c8a8cd44abca6e5268af"],
    } },
    React.createElement(ResultsCard, { title: "Card Title", functionName: "area", useChildCard: true }, (data) => (React.createElement(ToolbarCard, { title: "Card Title", items: loadedRightItems },
        React.createElement("p", null,
            "This zone is ",
            data.area,
            " sq km. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nisi beatae, officiis perferendis quis inventore quisquam? Provident doloremque inventore, natus beatae quam nisi eius quidem deserunt, aperiam aliquid corrupti eveniet."),
        React.createElement(Collapse, { title: "Learn More" },
            React.createElement("p", null, "Additional elements in here")),
        React.createElement(Collapse, { title: "Show by MPA" },
            React.createElement("p", null, "Additional elements in here")))))));
export default {
    component: ResultsCard,
    title: "Components/Card/ResultsCard",
    decorators: [createReportDecorator(contextValue)],
};
//# sourceMappingURL=ResultsCard.stories.js.map