feat(heatmap): Base Heatmap Built (#737)

* feat(heatmap): camera effect + svg/png download + outline on highlight + update API

* refactor(heatmap): apply code review improvements

* feat(heatmap): add heatmap demo

* fix(heatmap): fix heatmap demo bugs

* fix(heatmapdemo): fix heatmap demo bugs

* feat(yarn): upgrade to latest version of yarn for better performance and new workspace features

* chore(storybook): upgrade storybook to latest version

* fix(yarn): fix style-dictionary and linter errors

* fix(yarn): fix monorepo dependencies

* fix(storybook): fix Storybook build error

* fix(storybook): fix webpack configs

* fix(storybook): fix build errors

* fix(storybook): fix storybook build errors but adding its packages to workspaces nohoist

* fix(lerna): fix hoisting

* fix(yarn): fix yarn packages

* fix(heatmap): update @czi-sds/components imports to relative path

* chore(storybook): revert @czi-sds/components imports and install @czi-sds/components in data-viz

* fix(storybook): add a fallback to @czi-sds/components in webpack config

* fix(storybook): fix fallback urls

* fix(storybook): fix fallback urls

* fix(storybook): add style-loader and css-loader to handle style-dictionary files

* fix(style-dictionary): remove comment

* fix(styles): update style-dictionary styles

* fix(storybook): fix loaders

* fix(storybook): fix sass loaders

* fix(storybook): fix css loaders

* fix(storybook): remove css loader to resolve rule conflicts

* fix(a11y): fix a11y errors and remove redundant code

* chore(snapshots): update test snapshots and skip heatmap snapshots

* chore(tsconfig): delete redundant configs

* style(heatmap): change default colors and fix storybook padding

* refactor(heatmap): change default story args

* fix(heatmap): fix code review feedbacks

* chore(heatmap): fix typo

* chore(heatmap): update issue pr link

* refactor: Heatmap chart instance management

* fix(eslint): fix eslint bug

* chore(storybook): upgrade to the latest version

* fix(lerna): fix lerna publish commit message

---------

Co-authored-by: Timmy Huang <thuang@chanzuckerberg.com>

.github/workflows/release.yml

@@ -101,7 +101,7 @@ jobs:
             const [owner, repo] = ownerAndRepo.split('/');
             const head = "prod";
             const base = "main";
-            const title = "feat: Merge prod into main";
+            const title = "chore(release): Merge prod into main";
             const pr = await github.rest.pulls.list({owner, repo, base, head: `${owner}:${head}`})
             if (pr.data.length>0) {
               return pr.data[0].number;

.gitignore

@@ -6,6 +6,15 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 
+# yarn v2 files
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 

.storybook/webpack.config.js

@@ -3,7 +3,27 @@ const path = require("path");
 module.exports = ({ config }) => {
   config.resolve.alias = {
     ...config.resolve.alias,
-    src: path.resolve(__dirname, "../packages/components/src"),
+    src: [
+      path.resolve(__dirname, "../packages/components/src"),
+      path.resolve(__dirname, "../packages/data-viz/src"),
+    ],
+  };
+
+  /**
+   * (masoudmanson): Due to a Storybook build issue in production mode, where importing
+   * cross-referenced workspace packages fails, this workaround involves falling back
+   * to the source code of the affected packages. This is a temporary solution until the
+   * underlying issue is resolved in Storybook.
+   * Resolving monorepo packages in this manner necessitates a custom SCSS loader for
+   * .sss files, as the src/index.ts file of each package includes an import link to the
+   * style-dictionary variable files.
+   */
+  config.resolve.fallback = {
+    "@czi-sds/components": path.resolve(
+      __dirname,
+      "../packages/components/src"
+    ),
+    "@czi-sds/data-viz": path.resolve(__dirname, "../packages/data-viz/src"),
   };
 
   // remove svg from existing rule
@@ -33,5 +53,14 @@ module.exports = ({ config }) => {
     },
   });
 
+  /**
+   * (masoudmanson): Add a custom SCSS loader for .sss files, as the src/index.ts file of
+   * each package includes an import link to the style-dictionary variable files.
+   */
+  config.module.rules.push({
+    test: /\.scss$/,
+    use: ["sass-loader"],
+  });
+
   return config;
 };