[DLS v8]: Addition of New Data-Viz Components (promoted from the Encoura Ecosystem Lib)

.env.example

@@ -0,0 +1 @@
+STORYBOOK_MAPBOX_ACCESS_TOKEN="<INSERT_MAPBOX_TOKEN_HERE>"

.eslintrc.js

@@ -23,6 +23,7 @@ module.exports = {
     },
   ],
   rules: {
+    '@typescript-eslint/no-explicit-any': 'warn',
     'import/order': [
       'error',
       {

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - name: Install dependencies
         run: npm ci --ignore-scripts
       - name: Test
@@ -33,7 +33,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - name: Install dependencies
         run: npm ci --ignore-scripts
       - name: Build

.github/workflows/pr.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - name: Install dependencies
         run: npm ci --ignore-scripts
       - name: Test

.gitignore

@@ -1,5 +1,6 @@
-storybook-static
-dist
-node_modules
 .DS_Store
+.env
 coverage
+dist
+node_modules
+storybook-static

.nvmrc

@@ -1 +1 @@
-18
+v20

.storybook/main.ts

@@ -30,28 +30,17 @@ const config: StorybookConfig = {
   },
   core: {},
   features: {
-    previewMdx2: true,
     storyStoreV7: true,
-    babelModeV7: true,
-    emotionAlias: false,
-    previewCsfV3: true,
-    modernInlineRender: true,
   },
-  // babel: async options => {
-  //   options.plugins.push([
-  //     'babel-plugin-root-import',
-  //     {
-  //       rootPathPrefix: '@actinc/dls',
-  //       rootPathSuffix: './src',
-  //     },
-  //   ]);
-  //   return options;
-  // },
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)', '../src/**/*.mdx'],
   staticDirs: ['../public'],
   typescript: {
     check: true,
-    checkOptions: {},
+    checkOptions: {
+      typescript: {
+        memoryLimit: 8192,
+      },
+    },
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,

.storybook/preview-body.html

@@ -0,0 +1,7 @@
+<style>
+  #root {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+</style>

.storybook/preview-head.html

@@ -1,26 +1,5 @@
 <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap" rel="stylesheet">
 
-<style type="text/css">
-  @font-face {
-    font-family: 'Museo';
-    src: url('fonts/Museo/Museo300.otf');
-    font-style: normal;
-    font-weight: 300;
-  }
-  @font-face {
-    font-family: 'Museo';
-    src: url('fonts/Museo/Museo500.otf');
-    font-style: normal;
-    font-weight: 500;
-  }
-  @font-face {
-    font-family: 'Museo';
-    src: url('fonts/Museo/Museo700.otf');
-    font-style: normal;
-    font-weight: 700;
-  }
-</style>
-
 <link
   href="https://fonts.googleapis.com/css2?display=swap&family=Work+Sans:[email protected]"
   rel="stylesheet"
@@ -33,3 +12,9 @@
   href="https://fonts.googleapis.com/css2?display=swap&family=Roboto+Mono:[email protected]"
   rel="stylesheet"
 />
+
+<style>
+  @import url("https://use.typekit.net/zno7zee.css");
+</style>
+
+<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css' rel='stylesheet' />

.storybook/preview.js → .storybook/preview.tsx

@@ -21,12 +21,6 @@ configureActions({
 });
 
 export const parameters = {
-  controls: { expanded: false },
-  docs: {
-    container: DocsContainer,
-    page: DocsPage,
-    inlineStories: true,
-  },
   backgrounds: {
     default: 'White',
     values: [
@@ -44,7 +38,15 @@ export const parameters = {
       },
     ],
   },
-  layout: 'centered',
+  controls: { expanded: false },
+  docs: {
+    container: DocsContainer,
+    page: DocsPage,
+    story: {
+      inline: true,
+    },
+  },
+  layout: 'padded',
   options: {
     storySort: {
       order: [
@@ -81,7 +83,7 @@ export const globalTypes = {
     name: 'Theme',
     toolbar: {
       icon: 'paintbrush',
-      items: ['ACT', 'ACT_ET', 'ENCOURA_CLASSIC', 'ENCOURAGE'],
+      items: ['ACT', 'ACT_ET', 'ENCOURA', 'ENCOURA_CLASSIC', 'ENCOURAGE'],
     },
   },
   language: {

.vscode/settings.json

@@ -12,25 +12,25 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "[javascript]": {
     "editor.codeActionsOnSave": {
-      "source.fixAll": false,
-      "source.fixAll.eslint": true,
-      "source.organizeImports": false
+      "source.fixAll": "never",
+      "source.fixAll.eslint": "explicit",
+      "source.organizeImports": "never"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
     "editor.codeActionsOnSave": {
-      "source.fixAll": false,
-      "source.fixAll.eslint": true,
-      "source.organizeImports": false
+      "source.fixAll": "never",
+      "source.fixAll.eslint": "explicit",
+      "source.organizeImports": "never"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescriptreact]": {
     "editor.codeActionsOnSave": {
-      "source.fixAll": false,
-      "source.fixAll.eslint": true,
-      "source.organizeImports": false
+      "source.fixAll": "never",
+      "source.fixAll.eslint": "explicit",
+      "source.organizeImports": "never"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

README.md

@@ -37,9 +37,9 @@ Material UI, and ships with several themes out of the box:
 
 1. `"ACT"`: for ACT's "traditional" look and feel
 2. `"ACT_ET"`: for ACT's "Emerging Technology" look and feel
-3. `"ENCOURA_CLASSIC"`: for Encoura's "Classic" look and feel
-4. `"ENCOURAGE"`: for the Encoura's "Encourage" look and feel
-5. `"MY_ENCOURA"`: for the Encoura's "MyEncoura" look and feel
+3. `"ENCOURA"`: for the Encoura's "MyEncoura" look and feel
+4. `"ENCOURA_CLASSIC"`: for Encoura's "Classic" look and feel
+5. `"ENCOURAGE"`: for the Encoura's "Encourage" look and feel
 
 To apply one of these themes to your components, simply wrap your application
 in the `ThemeProvider` component and specify a theme!
@@ -140,7 +140,7 @@ reference in the `head` of your React app:
 
 #### Museo Sans
 
-The `ENCOURA_CLASSIC` and `MY_ENCOURA` theme assumes that the
+The `ENCOURA` and `ENCOURA_CLASSIC` themes assume that the
 [Museo Sans](https://fonts.adobe.com/fonts/museo-sans) font
 is available in the browser.  Include this embed code in the `head`
 of your React app after obtaining the licensed font URL from Marketing:
@@ -149,7 +149,6 @@ of your React app after obtaining the licensed font URL from Marketing:
 <style>
   @import url("licensed-font-url");
 </style>
-
 ```
 
 #### Work Sans, Roboto, Roboto Mono

jest.config.ts

@@ -29,9 +29,20 @@ collectCoverage: true,
     'internal.tsx',
   ],
   coverageReporters: ['text', 'html'],
-  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths , { prefix: '<rootDir>/' }),
+  moduleNameMapper: {
+    ...(pathsToModuleNameMapper(compilerOptions.paths , { prefix: '<rootDir>/' })),
+    'd3-array': '<rootDir>/node_modules/d3-array/dist/d3-array.min.js',
+    'd3-color': '<rootDir>/node_modules/d3-color/dist/d3-color.min.js',
+    'd3-format': '<rootDir>/node_modules/d3-format/dist/d3-format.min.js',
+    'd3-interpolate': '<rootDir>/node_modules/d3-interpolate/dist/d3-interpolate.min.js',
+    'd3-path': '<rootDir>/node_modules/d3-path/dist/d3-path.min.js',
+    'd3-scale': '<rootDir>/node_modules/d3-scale/dist/d3-scale.min.js',
+    'd3-shape': '<rootDir>/node_modules/d3-shape/dist/d3-shape.min.js',
+    'd3-time': '<rootDir>/node_modules/d3-time/dist/d3-time.min.js',
+  },
   preset: 'ts-jest',
   roots: ['<rootDir>/src'],
+  setupFilesAfterEnv: ['./jest.setup.ts'],
   testEnvironment: 'jsdom',
   transform: {
     '^.+\\.tsx?$': [

jest.setup.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) ACT, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @prettier
+ */
+
+/* eslint-disable import/no-extraneous-dependencies */
+
+import { configure } from '@testing-library/dom';
+import '@testing-library/jest-dom';
+import fetch from 'isomorphic-fetch';
+import { TextDecoder } from 'text-encoding';
+
+global.fetch = fetch;
+global.TextDecoder = TextDecoder;
+
+configure({
+  computedStyleSupportsPseudoElements: true,
+});