first commit

.gitignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+cdk.out
+cdk-outputs.json
+.build
+.build-web
+.workspace.env
+data/src
+!data/src/README.md
+data/dist/**
+!data/dist/README.md
+.story-cache
+testo

.prettierignore

@@ -0,0 +1,5 @@
+**/.git
+**/.svn
+**/.hg
+node_modules
+examples/output

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "all"
+}

.storybook/genReportStories.ts

@@ -0,0 +1,200 @@
+import fs from "fs-extra";
+import path from "node:path";
+import { globby } from "globby";
+import {
+  isSketchCollection,
+  Sketch,
+  SketchCollection,
+  SketchProperties,
+} from "@seasketch/geoprocessing/client-core";
+import { GpStoryConfig } from "./types.js";
+import { v4 as uuid } from "uuid";
+
+// Not currently used, project space responsible for its own storybook+vite setup
+
+if (!process.env.PROJECT_PATH) {
+  throw new Error("PROJECT_PATH environment variable not set");
+}
+const PROJECT_PATH: string = process.env.PROJECT_PATH;
+
+const sketchDir = path.join(PROJECT_PATH, "examples", "sketches");
+if (!fs.existsSync(sketchDir)) {
+  throw new Error(`Example sketch path ${sketchDir} does not exist`);
+}
+
+const outputDir = path.join(PROJECT_PATH, "examples", "output");
+if (!fs.existsSync(outputDir)) {
+  console.error(
+    `Example output path ${outputDir} does not exist.  Have you added to examples/sketches and run the test suite?`,
+  );
+  process.exit();
+}
+
+const storyDir = path.join(PROJECT_PATH, "src");
+// console.log("storyDir", storyDir);
+
+// delete old story cache directories
+
+const cachePaths = await globby(path.join(storyDir, "**/.story-cache"), {
+  onlyDirectories: true,
+});
+// console.log("cachePaths", cachePaths);
+for (const cachePath of cachePaths) {
+  fs.rmSync(cachePath, { recursive: true });
+}
+
+// load report story configs
+const storyPaths = await globby(
+  path.join(storyDir, "**/*.example-stories.ts"),
+  {
+    onlyFiles: true,
+  },
+);
+// console.log("storyPaths", storyPaths);
+const storyConfigs: GpStoryConfig[] = [];
+for (const storyPath of storyPaths) {
+  try {
+    const { storyConfig } = await import(storyPath);
+    storyConfigs.push({
+      ...storyConfig,
+      path: storyPath,
+    });
+  } catch {
+    console.log(`Trouble parsing example ${storyPath}`);
+  }
+}
+// console.log("storyConfigs", storyConfigs);
+
+// load project sketches, that are not from templates (sketch filename is prefixed with gp)
+const sketchFilenames = fs
+  .readdirSync(sketchDir)
+  .filter((sketchFilename) => path.extname(sketchFilename) === ".json")
+  .filter(
+    (sketchFilename) =>
+      path.basename(sketchFilename).startsWith("gp", 0) === false,
+  );
+
+// console.log("sketchFilenames", sketchFilenames);
+const sketches: (Sketch | SketchCollection)[] = [];
+for (const sketchFilename of sketchFilenames) {
+  try {
+    const sketch: Sketch | SketchCollection = fs.readJSONSync(
+      path.join(sketchDir, sketchFilename),
+    ) as Sketch;
+    if (sketch && sketch.properties.name) {
+      sketches.push(sketch);
+    }
+  } catch {
+    console.log(`Trouble parsing example ${sketchFilename}`);
+  }
+}
+
+// Load related example outputs
+const outputs: { sketchName: string; results: any; functionName: string }[] =
+  [];
+for (const sketch of sketches) {
+  const outputPath = path.join(outputDir, sketch.properties.name);
+  if (fs.existsSync(outputPath)) {
+    const outputFilenames = fs.readdirSync(outputPath);
+    for (const outputFilename of outputFilenames) {
+      if (path.extname(outputFilename) === ".json") {
+        outputs.push({
+          sketchName: sketch.properties.name,
+          results: fs.readJSONSync(path.join(outputPath, outputFilename)),
+          functionName: path.basename(outputFilename, ".json"),
+        });
+      }
+    }
+  }
+}
+
+// Generate stories
+
+for (const storyConfig of storyConfigs) {
+  for (const sketch of sketches) {
+    console.log(
+      `Generating story for ${storyConfig.componentName} - ${sketch.properties.name}`,
+    );
+
+    // Pull out relative path from import string and replace with path that will work from story cache subdirectory
+
+    if (!fs.existsSync(storyConfig.path!)) {
+      console.log(
+        `Story config path ${storyConfig.path} does not exist, skipping`,
+      );
+      continue;
+    }
+    const importFromCacheStr = `../${storyConfig.componentPath}`
+      .replace(".ts", ".js")
+      .replace(".tsx", ".js");
+
+    const storyTitleSplit = storyConfig.title.split("/");
+    // extract story name from title
+    const storyName = storyTitleSplit.at(-1);
+    const storyOutDir = path.join(
+      path.dirname(storyConfig.path!),
+      ".story-cache",
+    );
+    const storyOutPath = path.join(
+      storyOutDir,
+      `${storyName}-${sketch.properties.name}.stories.tsx`,
+    );
+
+    const exampleOutputs = outputs.filter((output) => {
+      return output.sketchName === sketch.properties.name;
+    });
+    if (!exampleOutputs) {
+      console.log(
+        `No results found for sketch ${sketch.properties.name}, skipping`,
+      );
+      continue;
+    }
+
+    const childProperties: SketchProperties["childProperties"] = (() => {
+      if (isSketchCollection(sketch)) {
+        return sketch.features.map((feature) => feature.properties);
+      }
+      return;
+    })();
+
+    const newSketchProperties: SketchProperties = {
+      ...sketch.properties,
+      ...(childProperties ? { childProperties } : {}),
+    };
+
+    const story = `
+      import React from "react";
+      import { ${storyConfig.componentName} } from '${importFromCacheStr}';
+      import {
+        createReportDecorator,
+        sampleSketchReportContextValue,
+      } from "@seasketch/geoprocessing/client-ui";
+      import Translator from "${path.join(PROJECT_PATH, "src", "components", "TranslatorAsync.js")}";
+
+      const contextValue = sampleSketchReportContextValue({
+        exampleOutputs: ${JSON.stringify(exampleOutputs, null, 2)},
+        sketchProperties: ${JSON.stringify(newSketchProperties, null, 2)},
+        projectUrl: "https://example.com/project",
+        geometryUri: 'https://localhost/${uuid()}',
+        visibleLayers: [],
+        language: "en"
+      });
+
+      export const ${sketch.properties.name.replace(/-/g, "_")} = () => (
+        <Translator>
+          <${storyConfig.componentName} />
+        </Translator>
+      );
+
+      export default {
+        component: ${storyConfig.componentName},
+        title: '${storyConfig.title}',
+        name: '${sketch.properties.name}',
+        decorators: [createReportDecorator(contextValue)],
+      };
+    `;
+
+    fs.ensureDirSync(storyOutDir);
+    fs.writeFileSync(storyOutPath, story);
+  }
+}

.storybook/main.ts

@@ -0,0 +1,33 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const storyPaths = [
+  `../src/**/*.stories.@(js|jsx|mjs|ts|tsx)`,
+  `../src/**/.story-cache/*.stories.@(js|jsx|mjs|ts|tsx)`,
+];
+
+const config: StorybookConfig = {
+  stories: storyPaths,
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  core: {
+    builder: {
+      name: "@storybook/builder-vite",
+      options: {
+        viteConfigPath: "./.storybook/vite.config.ts",
+      },
+    },
+    disableTelemetry: true,
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import theme from "./theme.js";
+
+addons.setConfig({
+  theme: theme,
+});

.storybook/preview.ts

@@ -0,0 +1,21 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /date$/i,
+      },
+    },
+    options: {
+      storySort: {
+        method: "",
+        order: ["Project", ["ReportClients", "Components"]],
+        locales: "",
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/theme.ts

@@ -0,0 +1,10 @@
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "light",
+  brandTitle: "SeaSketch Geoprocessing",
+  brandUrl: "https://github.com/seasketch/geoprocessing/wiki",
+  brandImage:
+    "https://www.seasketch.org/static/media/seasketch-logo.c4d8745d.png",
+  brandTarget: "_self",
+});

.storybook/types.ts

@@ -0,0 +1,8 @@
+export interface GpStoryConfig {
+  componentName: string;
+  componentPath: string;
+  /** Title of story.  Learn how to  */
+  title: string;
+  /** absolute path to story config, added at story generation time */
+  path?: string;
+}

.storybook/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), nodePolyfills()],
+  build: {
+    sourcemap: true,
+    minify: true,
+  },
+});

.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "amazonwebservices.aws-toolkit-vscode",
+    "DavidAnson.vscode-markdownlint"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,57 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Tests",
+      "type": "node",
+      "request": "launch",
+      "runtimeArgs": [
+        "--inspect-brk",
+        "${workspaceRoot}/node_modules/.bin/geoprocessing",
+        "test"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "port": 9229
+    },
+    {
+      "name": "Debug tests - with pattern",
+      "type": "node",
+      "request": "launch",
+      "runtimeArgs": [
+        "--inspect-brk",
+        "${workspaceRoot}/node_modules/.bin/geoprocessing",
+        "test",
+        "-t",
+        "${input:testNamePattern}"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "port": 9229
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "debug single script",
+      "runtimeArgs": ["--import", "tsx"],
+      "args": ["${workspaceRoot}/${input:scriptPath}"]
+    }
+  ],
+  "inputs": [
+    {
+      "type": "promptString",
+      "id": "scriptPath",
+      "description": "",
+      "default": "scripts/myscript.ts"
+    },
+    {
+      "type": "promptString",
+      "id": "testNamePattern",
+      "description": "vitest -t 'regex pattern to select tests'",
+      "default": "name of my test"
+    }
+  ]
+}