jmapcloud-ng 1.1.15 → 1.1.16

package/.env.example

@@ -1,2 +1,14 @@
-# your MUI-X Pro license
-MUI_X_PRO_LICENSE="MUI-X-PRO-LICENSE"
+# Used to build restBaseUrl in dev:
+# https://api.${REST_BASE_API_DEV_SERVER_PREFIX}.jmapcloud.io
+# ex: "dev-jdoe", "qa", etc
+REST_BASE_API_DEV_SERVER_PREFIX="dev-<username>"
+
+# optional: ng core usually runs on https://localhost:8085/src/core.ts
+# if your setup is different, configure it here
+CORE_INDEX_FILE_URL=""
+
+# Optional Vite dev server port - defaults to 8086
+DEV_PORT=""
+
+# Optional: your MUI-X Pro license
+MUI_X_PRO_LICENSE="MUI-X-PRO-LICENSE"

package/.storybook/main.ts

@@ -0,0 +1,39 @@
+import type { StorybookConfig } from "@storybook/react-vite"
+import { join, resolve } from "path"
+
+const ngSrcPath = join(__dirname, "../src")
+const ngStoriesPath = join(__dirname, "../stories")
+
+const config: StorybookConfig = {
+  stories: ["../stories/**/*.stories.@(ts|tsx|mdx)"],
+  addons: ["@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-themes"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {}
+  },
+  typescript: {
+    check: false,
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      shouldRemoveUndefinedFromOptional: true,
+      propFilter: prop => (prop.parent ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName) : true)
+    }
+  },
+  viteFinal: async config => {
+    config.resolve = config.resolve || {}
+    const existingAlias = config.resolve.alias || []
+    const aliasArray = Array.isArray(existingAlias) ? existingAlias : Object.entries(existingAlias).map(([find, replacement]) => ({ find, replacement }))
+    const filteredAlias = aliasArray.filter(entry => entry.find !== "@" && entry.find !== "@stories")
+    filteredAlias.push({ find: "@", replacement: ngSrcPath })
+    filteredAlias.push({ find: "@stories", replacement: ngStoriesPath })
+    filteredAlias.push({ find: "jmapcloud-common", replacement: resolve(__dirname, "../../../../packages/jmapcloud-common/src/index.ts") })
+    filteredAlias.push({ find: "jmapcloud-ng-core-types", replacement: resolve(__dirname, "../../ng-core-types/index.ts") })
+    filteredAlias.push({ find: "jmapcloud-ng-types", replacement: resolve(__dirname, "../../ng-types/index.ts") })
+    filteredAlias.push({ find: "jmapcloud-ng-types/all-enums", replacement: resolve(__dirname, "../../ng-types/all-enums.ts") })
+    config.resolve.alias = filteredAlias
+    return config
+  }
+}
+
+export default config

package/.storybook/preview.tsx

@@ -0,0 +1,53 @@
+import { Box, CssBaseline, ThemeProvider, useTheme } from "@mui/material"
+import { withThemeFromJSXProvider } from "@storybook/addon-themes"
+import type { Decorator, Preview } from "@storybook/react"
+import { lightTheme, darkTheme } from "@/ui/tools/theme"
+import "../src/resources/fonts/barlow/stylesheet.css"
+
+function PanelBackground({ children }: { children: React.ReactNode }) {
+  const theme = useTheme()
+  const bg = (theme.palette as any).mainNavigation?.panelBackground ?? theme.palette.background.default
+  return (
+    <Box sx={{ bgcolor: bg, minHeight: "100vh", p: 2 }}>
+      {children}
+    </Box>
+  )
+}
+
+const withPanelBackground: Decorator = (Story, context) => {
+  const selectedTheme = context.globals?.theme === "dark" ? darkTheme : lightTheme
+  return (
+    <ThemeProvider theme={selectedTheme}>
+      <PanelBackground>
+        <Story />
+      </PanelBackground>
+    </ThemeProvider>
+  )
+}
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      expanded: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    },
+    layout: "fullscreen"
+  },
+  decorators: [
+    withThemeFromJSXProvider({
+      GlobalStyles: CssBaseline,
+      Provider: ThemeProvider,
+      themes: {
+        light: lightTheme,
+        dark: darkTheme
+      },
+      defaultTheme: "light"
+    }),
+    withPanelBackground
+  ]
+}
+
+export default preview

package/index.html.example

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>JMap Cloud NG</title>
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+    <meta charset="UTF-8" />
+    <style>
+      html,
+      body {
+        padding: 0px;
+        margin: 0px;
+        height: 100%;
+        width: 100%;
+        background-color: #262626;
+        overflow: hidden;
+      }
+      .jmapcloud-backround-image {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        -webkit-background-position: center;
+        background-position: center;
+        -webkit-background-size: cover;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-image: url(https://assets.jmapcloud.io/images/transitionPageBackground.jpeg);
+      }
+      .radial-gradient-overlay {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        background-image:
+          radial-gradient(circle farthest-corner at 50% 50%, rgba(39, 39, 38, 0.1) 65%, #272726),
+          linear-gradient(180deg, #272726 10%, rgba(39, 39, 38, 0.7) 50%, #272726);
+      }
+    </style>
+    <script type="text/javascript">
+      window.JMAP_OPTIONS = {
+        // Replace with your target API base URL.
+        restBaseUrl: "https://api.<YOUR_ENV>.jmapcloud.io",
+        map: {},
+        application: {},
+        hideMainLayout: true
+      }
+    </script>
+  </head>
+  <body>
+    <div class="jmapcloud-backround-image"></div>
+    <div class="radial-gradient-overlay"></div>
+    <script type="module" src="/src/app.ts"></script>
+  </body>
+</html>

package/package.json

@@ -1,20 +1,23 @@
 {
   "name": "jmapcloud-ng",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "description": "K2 Geospatial Web Client",
   "private": false,
   "main": "public/index.js",
   "scripts": {
-    "test": "jest",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "lint": "export NODE_ENV='production'; node build/buildfile.js lint;",
     "prepare-types": "npm --prefix ../ng-core-types run update-types-bridge && npm --prefix ../ng-types run update-types-bridge",
     "build": "npm run prepare-types && node build/buildfile.js build ",
-    "build-vps": "export NODE_ENV='development' SERVER_JS_PATH='/var/www/html/ng/ng'; npm run prepare-types && node build/buildfile.js build-vps;",
+    "build-vps": "export NODE_ENV='production' SERVER_JS_PATH='/var/www/html/ng/ng'; npm run prepare-types && node build/buildfile.js build-vps;",
     "build-cloud": "npm run prepare-types && node build/buildfile.js build-cloud;",
     "build-npm": "export NODE_ENV='production' BUILD_TARGET='npm'; npm run prepare-types && node build/buildfile.js build-npm;",
     "count-all": "find ./src -name '*.ts*' | xargs wc -l",
     "count-test": "find ./src -name '*.spec.ts' | xargs wc -l",
-    "start": "export NODE_ENV='development'; npm run prepare-types && node build/buildfile.js start;"
+    "start": "export NODE_ENV='development'; npm run prepare-types && node build/buildfile.js start;",
+    "storybook": "storybook dev -p 6009",
+    "build-storybook": "storybook build"
   },
   "author": "K2 Geospatial",
   "license": "ISC",
@@ -77,7 +80,6 @@
     "@types/color": "^3.0.6",
     "@types/geometric": "^2.5.3",
     "@types/hast": "^3.0.4",
-    "@types/jest": "^29.5.14",
     "@types/json-pointer": "^1.0.34",
     "@types/mocha": "^10.0.6",
     "@types/react-dom": "^18.3.0",
@@ -85,20 +87,10 @@
     "@types/react-window": "^1.8.8",
     "@types/svg-parser": "^2.0.6",
     "@types/uuid": "^9.0.8",
-    "@types/webpack-env": "^1.18.5",
-    "babel-loader": "^9.1.3",
     "chai": "^5.1.1",
     "chai-http": "^4.4.0",
-    "css-loader": "^7.1.1",
-    "del": "^6.0.0",
-    "jest": "^29.7.0",
     "jmapcloud-ng-core-types": "../ng-core-types",
     "jmapcloud-ng-types": "../ng-types",
-    "postcss-loader": "^8.1.1",
-    "postcss-parent-selector": "^1.0.0",
-    "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.3.10",
-    "ts-jest": "^29.3.4",
-    "ts-loader": "^9.5.1"
+    "vitest": "^3.1.4"
   }
 }