Add gcds-map component

Add dependency on @maps4html/mapml

Update stencil config to copy mapml to dist output directory.

Update index.html with example <mapml-viewer>

Add gcds-map.stories.tsx

Add dist/gcds/gcds-map as static resource directory for storybook.

Make controlslist a multi-select in storybook

Make gcds-map a component only in name, created for the purpose of
importing the map client CSS rules in gcds-map.css.

Add global script to dynamically and conditionally import mapml.js;
global script can refer to other global script imports as required.

Include gcds-map.css in build, integrate via run time load

Add mapml.js and gcds-map.css imports to storybook preview-head.html,
so that it appears in the iframe regardless of whether the <mapml-viewer>
has been rendered yet.

Add some basemap mapml (services) directory contents to component definition
for use in index.html and story

Add a test

Add jest, jest-environment-node to root node_modules
- this is necessary to successfully run tests in packages/web

Add gcds-map.d.ts, re-export from index.ts.
Leverage gcds-map.d.ts in gcds-map.e2e.ts a little bit

Fix issue with ts not liking
[Symbol.iterator]: function (): IterableIterator<File>
by adding dom.iterable to the lib section, fix discovered here:
sitelint.com/blog/solution-to-type-filelist-must-have-a-symbol-iterator-method-that-returns-an-iterator

Add dom.iterable to tsconfig.json everywhere

Add functional second story to map: hidden (basemap) layers.
Add current_conditions in en only (so far).

Add a Playground story

Add geojson default style example
Update current weather to comment out feature query
Add copying of geojson canada.json file into static assets

Update GeoJSON2MapMLExample story with styles.

Update GeoJSON2MapMLExample story parameters docs.source.code etc

Add DarkMode example with assets

Update dark mode example to be remote mapml, so that we can have an
explicit inline/remote example later.

Update overview, add inline vs remote MapML example

Add custom projection example

Add delimiter comments to code disclosure widget so that the Copy
button works, except for that there's no React code in this component

Co-authored-by: Pierre Dubois <[email protected]>

Update global-mapml.ts to use import.meta to obtain the module path at
runtime, so that mapml.js can be correctly imported at the same root
path as gcds-components/dist

Add devDependency on babel-plugin-transform-import-meta

Add babel-plugin-transform-import-meta to storybook main.js to ignore
the import.meta since it is a runtime consideration

Update relative paths of resources to get the build-storybook script working

Add sass-embedded devDependency so that the npm run build script will work

Revert test line from package.json

Rebase on upstream main

Author: prushforth

package-lock.json

@@ -36,6 +36,8 @@
     "@stencil/angular-output-target": "^0.10.0",
     "@types/node": "^20.11.10",
     "cssnano": "^6.0.0",
+    "jest": "^28.1.3",
+    "jest-environment-node": "^28.1.3",
     "ncp": "^2.0.0",
     "ng-packagr": "^19.0.1",
     "nx": "^16.0.0",

package.json

@@ -10,6 +10,7 @@
     "declarationDir": "./dist/types/lib",
     "lib": [
       "dom",
+      "dom.iterable",
       "es2015"
     ],
     "module": "esnext",

packages/react-ssr/gcds.css

@@ -19,10 +19,42 @@ const config = {
     name: getAbsolutePath("@storybook/html-webpack5"),
     options: {},
   },
+  staticDirs: [{ from: '../dist/gcds/gcds-map', to: '/dist/gcds/gcds-map' }],
   docs: {
     autodocs: false,
     defaultName: 'Stories'
   },
+  webpackFinal: async (config) => {
+    // Use ts-loader for .ts and .tsx files
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+          options: {
+            transpileOnly: true,
+          },
+        },
+      ],
+    });
+    /* this is for mapml.js which is imported at run time */
+    config.module.rules.push({
+      test: /\.(js|ts)$/,
+      use: [
+        {
+          loader: require.resolve('babel-loader'),
+          options: {
+            plugins: [require.resolve('babel-plugin-transform-import-meta')],
+          },
+        },
+      ],
+    });
+    
+    config.resolve.extensions.push('.ts', '.tsx');
+
+
+    return config;
+  }
 };
 export default config;
 

packages/react-ssr/tsconfig.json

@@ -765,3 +765,5 @@
 
   // ----- End custom copy code buttons -----
 </script>
+<script src="./dist/gcds/gcds-map/mapml.js" type="module" id="mapml-loader"></script>
+<link rel="stylesheet" href="./dist/gcds/gcds-map/gcds-map.css" id="mapml-client-styles">