spiffdev · heatblayze · Apr 11, 2023 · Apr 11, 2023 · Apr 11, 2023 · Apr 11, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -1 +1,16 @@
-# browser-quickstart
+# README #
+
+This repository contains a pristine boilerplate with recommended settings for a new browser application. It is intended to 
+be forked and used as a starting point for new applications. Any tweaks to configuration can then be pulled from upstream if required.
+
+This template uses Vite to manage building and configuring the application. You can read more about Vite here: https://vitejs.dev/guide/
+
+### How do I get set up? ###
+
+* Fork the repository
+* Run 'yarn dev' to run the project in your new repo.
+* From that point on you may build out the application you need.
+
+### Contribution guidelines ###
+
+* Ensure any changes are very targeted and do not affect the boilerplate too much. (Consider the impact on other projects that may be using this boilerplate.)
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spiff Commerce Quickstart</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <!-- The plugins.ts file corrects some missing imports. -->
+  <script type="module" src="/src/plugins.ts"></script>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "browser-quickstart",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@spiffcommerce/core": "^0.10.253",
+    "@spiffcommerce/preview": "^2.1.26",
+    "assert": "^2.0.0",
+    "buffer": "^6.0.3",
+    "https-browserify": "^1.0.0",
+    "path-browserify": "^1.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "stream-http": "^3.2.0",
+    "url": "^0.11.0",
+    "util": "^0.12.5"
+  },
+  "devDependencies": {
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^3.1.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0"
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,87 @@
+/**
+ * This file will automatically be loaded by webpack and run in the "renderer" context.
+ * To learn more about the differences between the "main" and the "renderer" context in
+ * Electron, visit:
+ *
+ * https://electronjs.org/docs/latest/tutorial/process-model
+ *
+ */
+import "./index.css";
+import * as React from "react";
+import { useState } from "react";
+import { SpiffCommerceClient, WorkflowExperience } from "@spiffcommerce/core";
+import { SpiffCommerce3DPreviewService } from "@spiffcommerce/preview";
+
+console.log(
+  '👋 This message is being logged by "App.tsx"'
+);
+
+/**
+ * This is the main wrapper component for the App editor.
+ * See app in src/index.tsx for usage.
+ */
+const App: React.FunctionComponent<{
+  /**
+   * The workflow to be used.
+   */
+  workflowId: string;
+  /**
+   * The integration product associated to the workflow being run.
+   */
+  integrationProductId: string;
+}> = ({ workflowId, integrationProductId }) => {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+  const [workflowExperience, setWorkflowExperience] = useState<
+    WorkflowExperience | undefined
+  >(undefined);
+
+  // This effect handles initialize of the workflow experience when the user first arrives at the page. Loading
+  // saved designs will be handled within App seperately.
+  React.useEffect(() => {
+    if (!canvasRef.current) return;
+    const init = async () => {
+      const client = new SpiffCommerceClient({});
+      await client.initFromIntegrationProduct(integrationProductId);
+      const experience = await client.getWorkflowExperience(
+        workflowId,
+        undefined,
+        (workflow) => {
+          const canvas = document.createElement("canvas");
+          return new SpiffCommerce3DPreviewService(
+            canvas,
+            workflow.globalPreviewConfig
+          );
+        }
+      );
+      experience
+        .getWorkflowManager()
+        .getPreviewService()
+        .registerView(canvasRef.current);
+      setWorkflowExperience(experience);
+    };
+    init().then(() => console.log("Workflow Experience Initialized"));
+    // We only want this to run when the parameters passed in change. The workflow experience
+    // changing internally due to saved designs etc.. Should not trigger this.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canvasRef, integrationProductId, workflowId]);
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+      }}
+    >
+      <canvas
+        id="3D-preview-canvas"
+        ref={canvasRef}
+        style={{ width: "100%", height: "100%", outline: "none" }}
+        width="100%"
+        height="100%"
+      />
+    </div>
+  );
+};
+
+export default App;
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,5 @@
+html, head, body, #root {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+const integrationProduct = "5141150b-8419-4e24-ae3f-9cab47a7920f"; // Sample Serving Board
+const workflowID = "3b09df2b-8808-4b1c-955a-d4172e706d11"; // Sample Serving Board Workflow
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App integrationProductId={integrationProduct} workflowId={workflowID} />
+  </React.StrictMode>
+);
diff --git a/src/plugins.ts b/src/plugins.ts
@@ -0,0 +1,8 @@
+import { Buffer } from 'buffer';
+const process: any = {
+    env: import.meta.env,
+};
+(window as any).global = window;
+(window as any).process = process;
+(window as any).Buffer = (window as any).Buffer || Buffer;
+export default process;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      'https': path.resolve(__dirname, './node_modules/https-browserify/index.js'),
+      'util': path.resolve(__dirname, './node_modules/util/util.js'),
+      'assert': path.resolve(__dirname, './node_modules/assert/build/assert.js'),
+      'path': path.resolve(__dirname, './node_modules/path-browserify/index.js'),
+      'url': path.resolve(__dirname, './node_modules/url/url.js'),
+      'http': path.resolve(__dirname, './node_modules/stream-http/index.js'),
+    }
+  }
+})