@heliux-org/ui-style 1.0.22

package/src/functions/_camelize.scss

@@ -0,0 +1,25 @@
+// FUNCTIONS: Camelize string
+
+// Modules imports
+@use "sass:string";
+
+// @arguments [string] $string
+// @return camelcase string
+@function camelize($string) {
+  $progress: $string;
+  $result: "";
+  $exclude: " ", "-", "–", "—", "_", ",", ";", ":", ".";
+
+  @while str-length($progress) > 0 {
+    $char: string.slice($progress, 1, 1);
+
+    @if contain($exclude, $char) {
+      $progress: capitalize(string.slice($progress, 2, 2)) + string.slice($progress, 3);
+    } @else {
+      $result: $result + $char;
+      $progress: string.slice($progress, 2);
+    }
+  }
+
+  @return $result;
+}

package/src/functions/_capitalize.scss

@@ -0,0 +1,11 @@
+// MIXINS: Capitalize
+// - Helper function
+
+// Modules imports
+@use "sass:string";
+
+// @arguments: $string
+// @return capitalize string
+@function capitalize($string) {
+  @return to-upper-case(string.slice($string, 1, 1)) + string.slice($string, 2);
+}

package/src/functions/_contain.scss

@@ -0,0 +1,8 @@
+// FUNCTIONS: Contain
+// - Helper function
+// @arguments [list] $list
+// @arguments [$value] $value
+// Return whether `$value` is contained in `$list` , Boolean
+@function contain($list, $value) {
+  @return not not index($list, $value);
+}

package/src/functions/_extract-rgb.scss

@@ -0,0 +1,8 @@
+// MIXINS: Extract Rgb
+// @arguments $color (can be hardcoded or $color)
+// @return: comma separated RGB values
+// Use: We use "extract-rgb" when we want to return a comma separated list of rgb values from a color.
+// - We use it in some of our token assignments and their custom-properties output.
+@function extract-rgb($color) {
+  @return red($color), green($color), blue($color);
+}

package/src/functions/_map-collect.scss

@@ -0,0 +1,17 @@
+// MIXINS: Map Collect
+
+// Modules imports
+@use "sass:map";
+
+// @arguments: multiple coma separated $maps.
+// @return: a single map with merged values.
+// Use: we use "map-collect" to merge maps from different scopes.
+// - We assume there will be no key duplication since scopes are separated.
+@function map-collect($maps...) {
+  $collection: ();
+
+  @each $map in $maps {
+    $collection: map.merge($collection, $map);
+  }
+  @return $collection;
+}

package/src/index.scss

@@ -0,0 +1,18 @@
+// HELIUX DESIGN SYSTEM : DESIGN TOKENS
+// - This partial Imports all of VIBE's Token scope.
+// - It include:
+//   - global functions.
+//   - Core Tokens  and Core Maps.
+//   - Theme based Tokens and maps.
+// - Custom properties are generated per each scope from a unified scope related settings map.
+// - CSS Output is custom properties definitions for global :root and themes scopes.
+// - Currently we do not include themes within this refactor scope.
+
+// Dependencies
+@import "functions";
+@import "internal-mixins";
+@import "config";
+
+// Output
+@import "core";
+@import "themes";

package/src/internal-mixins/_generate-custom-properties.scss

@@ -0,0 +1,12 @@
+// MIXINS: Generate custom properties
+
+// Used to create custom properties from a $map
+// @arguments: $map
+// Loops over the map
+// - Generates custom properties from its keys
+// - Each Custom property value is the map key value.
+@mixin generate-custom-properties($map) {
+  @each $key, $value in $map {
+    --#{$key}: #{$value};
+  }
+}

package/src/internal-mixins/_utilities.scss

@@ -0,0 +1,76 @@
+// MIXINS: Utility
+
+// Modules imports
+@use "sass:map";
+@use "sass:string";
+@use "sass:list";
+/*  stylelint-disable scss/at-if-no-null */
+
+// These internal-mixins Create Utility class definitions from a utilities map.
+
+// Generate utilities
+// @arguments: $utility , $infix, $export
+// - $utility is a scope key from the utilities map.
+// - $infix is defined by utility values
+// - $export enables Camelcase by capitalizing the $infix
+// -- This is achieved via flag using $export:"modules" (for css modules)
+// This mixin generates classes with definition per a utility scope
+// - Utility scopes are nested within a utility map
+// - Map keys are fixed and defined within the mixin:
+// --  property, class,values,
+@mixin generate-utility-class($utility, $infix, $export) {
+  $values: map.get($utility, values);
+  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
+    $values: list.zip($values, $values);
+  }
+
+  @each $key, $value in $values {
+    $properties: map.get($utility, property);
+
+    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
+    @if type-of($properties) == "string" {
+      $properties: list.append((), $properties);
+    }
+
+    // Use custom class if present
+    $property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
+    $property-class: if($property-class == null, "", $property-class);
+
+    $infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.slice($infix, 2), $infix);
+
+    // Don't prefix if value key is null (eg. with shadow class)
+    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "") + $key, "");
+
+    @if $value != null {
+      @if $export == "modules" {
+        $class-name: $property-class + capitalize(camelize($infix)) + capitalize(camelize($property-class-modifier));
+        .#{$class-name} {
+          @each $property in $properties {
+            #{$property}: $value !important;
+          }
+        }
+      } @else {
+        $class-name: $property-class + $infix + -#{$property-class-modifier};
+        .#{$class-name} {
+          @each $property in $properties {
+            #{$property}: $value !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Generate utilities
+// This mixin invoke the utility mixin by setting its map and export type, and initializing the $infix.
+@mixin utility-class-factory($map, $infix: "", $export: "") {
+  @each $key, $utility in $map {
+    // The utility can be disabled with `false`, thus check if the utility is a map first
+    // Only proceed if responsive media queries are enabled or if it's the base media query
+    @if type-of($utility) == "map" and ($infix == "") {
+      @include generate-utility-class($utility, $infix, $export);
+    }
+  }
+}
+
+/*  stylelint-enable scss/at-if-no-null */

package/src/mixins/_common.scss

@@ -0,0 +1,67 @@
+$expand-animation-timing: cubic-bezier(0, 0, 0.35, 1);
+
+// Grid auto fit sizes
+$grid-auto-fit-cell-width-small: 120px;
+$grid-auto-fit-cell-width-medium: 180px;
+$grid-auto-fit-cell-width-large: 240px;
+$grid-auto-fit-cell-width-xl: 300px;
+
+@mixin hidden-element() {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+// Grid auto fit
+// - This mixin defines a grid with auto fit repeat cells using min-max funtion.
+// -- This allows grid to accommodate container width without media queries.
+// -- it uses a repeat grid function with auto fix and minmax.
+// -- grid adaptation is due to the min value along with auto-fit and 1fr max value.
+
+// @params:
+// - $grid-gap: null , defines grid "gap" attribute.
+// - $grid-column-gap: null,  defines grid "column-gap" attribute.
+// - $grid-row-gap: null,  defines grid "row-gap" attribute.
+// - $grid-cell-min-width: {mandatory}, defined min value in for grid-template-columns
+// - $grid-cell-array-calc: {mandatory}, defined max num of items using calc
+
+@mixin grid-auto-fit(
+  $grid-gap: null,
+  $grid-column-gap: null,
+  $grid-row-gap: null,
+  $grid-cell-min-width,
+  $grid-cell-array-calc: null,
+  $important: false
+) {
+  display: grid;
+  @if $important {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(clamp(#{$grid-cell-array-calc}, #{$grid-cell-min-width}, 100%), 1fr)
+    ) !important;
+    gap: $grid-gap !important;
+    column-gap: $grid-column-gap !important;
+    row-gap: $grid-row-gap !important;
+  } @else {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(clamp(#{$grid-cell-array-calc}, #{$grid-cell-min-width}, 100%), 1fr)
+    );
+    gap: $grid-gap;
+    column-gap: $grid-column-gap;
+    row-gap: $grid-row-gap;
+  }
+}
+
+@mixin scroller($width: 4px, $height: 6px, $color: var(--divider-primary)) {
+  &::-webkit-scrollbar {
+    width: $width;
+    height: $height;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $color;
+    border-radius: 4px;
+  }
+}

package/src/mixins/_states.scss

@@ -0,0 +1,48 @@
+@mixin disabled {
+  border-color: var(--disabled-background-color);
+  color: var(--disabled-text-color);
+  cursor: not-allowed;
+
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+@mixin reset-button {
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+  background: transparent;
+
+  /* inherit font & color from ancestor */
+  color: inherit;
+  font: inherit;
+
+  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+  line-height: normal;
+
+  /* Corrects font smoothing for webkit */
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+
+  /* Corrects inability to style clickable `input` types in iOS */
+  appearance: none;
+
+  @include focus-style;
+}
+
+@mixin focus-style($focus-radius: 4px) {
+  &:focus-visible,
+  &.focus-visible {
+    outline: none;
+    z-index: 11;
+    border-radius: $focus-radius;
+    box-shadow: 0 0 0 3px hsl(209deg 100% 50% / 50%), 0 0 0 1px var(--primary-hover-color) inset;
+  }
+
+  &:focus:not(.focus-visible) {
+    outline: none;
+  }
+}

package/src/mixins/_typography.scss

@@ -0,0 +1,24 @@
+@mixin vibe-text($type-prefix, $weight-type) {
+  font: var(--font-#{$type-prefix}-#{$weight-type});
+}
+
+@mixin vibe-heading($type-prefix, $weight-type) {
+  font: var(--font-#{$type-prefix}-#{$weight-type});
+  letter-spacing: var(--letter-spacing-#{$type-prefix}-#{$weight-type});
+  -webkit-font-smoothing: var(--font-smoothing-webkit);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz);
+}
+
+@mixin line-clamp($lines: 1le) {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  white-space: initial; // doesn't work with white-space: no-wrap
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/utilities/_utilities-maps.scss

@@ -0,0 +1,33 @@
+// UTILITIES: Value Maps
+// - Maps for the utility mixin.
+// - imported using "common.scss" partial.
+
+$utility-spacing-vars: (
+  0: 0,
+  xs: var(--spacing-xs),
+  small: var(--spacing-small),
+  medium: var(--spacing-medium),
+  large: var(--spacing-large),
+  xl: var(--spacing-xl),
+  xxl: var(--spacing-xxl),
+  xxxl: var(--spacing-xxxl)
+);
+
+$utility-border-colors-vars: (
+  uiBorderColor: var(--divider-primary),
+  layoutBorderColor: var(--divider-secondary)
+);
+
+$utility-colors-vars: (
+  primaryTextColor: var(--text-primary),
+  textColorOnInverted: var(--text-color-on-inverted),
+  secondaryTextColor: var(--text-secondary)
+);
+
+$utility-background-colors-vars: (
+  primaryBackgroundColor: var(--surface-primary),
+  secondaryBackgroundColor: var(--surface-secondary),
+  greyBackgroundColor: var(--surface-tertiary),
+  allgreyBackgroundColor: var(--surface-quaternary),
+  invertedColorBackground: var(--surface-inverse)
+);

package/stylelint-config/index.js

@@ -0,0 +1,7 @@
+module.exports = {
+  customSyntax: require.resolve("postcss-scss"),
+  plugins: ["./rules/use-defined-css-var-when-available/index.js"],
+  rules: {
+    "@heliux-org/ui-style/use-defined-css-var-when-available": true
+  }
+};

package/stylelint-config/rules/use-defined-css-var-when-available/__tests__/fixtures/contains-values-with-multiple-replacements.scss

@@ -0,0 +1,4 @@
+.some-font-class {
+  width: 16px;
+  font-family: sans-serif;
+}

package/stylelint-config/rules/use-defined-css-var-when-available/__tests__/fixtures/contains-values-with-single-replacement.scss

@@ -0,0 +1,8 @@
+.some-class {
+  width: 16px;
+  margin-top: 16px;
+}
+
+#id {
+  border-radius: 16px 14px;
+}

package/stylelint-config/rules/use-defined-css-var-when-available/__tests__/index.test.js

@@ -0,0 +1,170 @@
+const { lint } = require("stylelint");
+const path = require("path");
+const fs = require("fs");
+
+const config = {
+  plugins: [path.resolve(__dirname, "../index.js")],
+  customSyntax: "postcss-scss",
+  rules: {
+    "@heliux-org/ui-style/use-defined-css-var-when-available": true
+  }
+};
+
+const configWithUseRecommendation = {
+  ...config,
+  rules: {
+    "@heliux-org/ui-style/use-defined-css-var-when-available": [
+      true,
+      {
+        useRecommendedFixes: true
+      }
+    ]
+  }
+};
+
+describe("@heliux-org/ui-style/use-defined-css-var-when-available", () => {
+  // since we run tests that actually perform code fixes, the fixtures are expected to change
+  const fixturesContentBeforeTests = new Map();
+
+  beforeAll(() => {
+    const allFiles = fs.readdirSync(path.resolve(__dirname, "fixtures"));
+
+    allFiles.forEach(fixture => {
+      const fixturePath = path.resolve(__dirname, "fixtures", fixture);
+      const fixtureContent = fs.readFileSync(fixturePath).toString();
+      fixturesContentBeforeTests.set(fixturePath, fixtureContent);
+    });
+  });
+
+  afterEach(() => {
+    for (const [filePath, content] of fixturesContentBeforeTests) {
+      try {
+        fs.writeFileSync(filePath, content, { encoding: "utf-8" });
+      } catch (e) {
+        console.error(
+          `Failed resetting file content for file: ${filePath}. This may result in changes that should have been reverted automatically. You will need to manually revert this, sorry.`
+        );
+        throw e;
+      }
+    }
+  });
+
+  it("warns for values that can be replaced with single CSS vars", async () => {
+    const {
+      results: [{ warnings }]
+    } = await lint({
+      files: path.resolve(__dirname, "./fixtures/contains-values-with-single-replacement.scss"),
+      config
+    });
+
+    expect(warnings).toHaveLength(2);
+    const [firstWarning, secondWarning] = warnings;
+
+    expect(firstWarning.text).toBe(
+      `Expected \"16px\" to be \"var(--spacing-medium)\" (@heliux-org/ui-style/use-defined-css-var-when-available)`
+    );
+    expect(firstWarning.line).toBe(3);
+    expect(firstWarning.column).toBe(15);
+
+    expect(secondWarning.text).toBe(
+      `Expected \"16px\" to be \"var(--border-radius-big)\" (@heliux-org/ui-style/use-defined-css-var-when-available)`
+    );
+    expect(secondWarning.line).toBe(7);
+    expect(secondWarning.column).toBe(18);
+  });
+
+  it("fixes values that can be replaced with single CSS vars", async () => {
+    const { results } = await lint({
+      files: path.resolve(__dirname, "./fixtures/contains-values-with-single-replacement.scss"),
+      config,
+      fix: true
+    });
+    const file = results[0]._postcssResult.opts.from;
+    const expectedOutputAfterFix = `
+.some-class {
+  width: 16px;
+  margin-top: var(--spacing-medium);
+}
+
+#id {
+  border-radius: var(--border-radius-big) 14px;
+}`.trim();
+
+    const contentAfterFix = fs.readFileSync(file).toString().trim();
+
+    expect(contentAfterFix).toEqual(expectedOutputAfterFix);
+  });
+
+  // We currently not supporting this use case after stop recommending use font size variables
+  it.skip("warns for values that can be replaced with multiple CSS vars", async () => {
+    const {
+      results: [{ warnings }]
+    } = await lint({
+      files: path.resolve(__dirname, "./fixtures/contains-values-with-multiple-replacements.scss"),
+      config
+    });
+
+    expect(warnings).toHaveLength(1);
+    const [firstWarning] = warnings;
+
+    expect(firstWarning.text).toBe(
+      `Expected "14px" to be one of vars: 
+--font-size-20
+--font-size-general-label
+--font-size-subtext
+ (@heliux-org/ui-style/use-defined-css-var-when-available)`
+    );
+    expect(firstWarning.line).toBe(3);
+    expect(firstWarning.column).toBe(14);
+  });
+
+  // We currently not supporting this use case after stop recommending use font size variables
+  it.skip("perform fixes when there are multiple var replacements, when specifying the useRecommendedFixes flag", async () => {
+    const { results } = await lint({
+      files: path.resolve(__dirname, "./fixtures/contains-values-with-multiple-replacements.scss"),
+      config: configWithUseRecommendation,
+      fix: true
+    });
+    const file = results[0]._postcssResult.opts.from;
+    const expectedOutputAfterFix = `
+.some-font-class {
+  width: 16px;
+  font-size: var(--font-size-general-label);
+}`.trim();
+
+    const contentAfterFix = fs.readFileSync(file).toString().trim();
+
+    expect(contentAfterFix).toEqual(expectedOutputAfterFix);
+  });
+
+  it("does not perform fixes when there are multiple var replacements, when not specifying the useRecommendedFixes flag", async () => {
+    const { results } = await lint({
+      files: path.resolve(__dirname, "./fixtures/contains-values-with-multiple-replacements.scss"),
+      config,
+      fix: true
+    });
+    const originalContent = results[0]._postcssResult.css;
+    const file = results[0]._postcssResult.opts.from;
+    const expectedOutputAfterFix = originalContent;
+
+    const contentAfterFix = fs.readFileSync(file).toString();
+
+    expect(contentAfterFix).toEqual(expectedOutputAfterFix);
+  });
+
+  ["disabled", "DiSaBlE", "off", 0, false, "false", "0"].forEach(ruleConfigValue => {
+    it(`does not lint if the rule is disabled by config value of "${ruleConfigValue}"`, async () => {
+      const { results } = await lint({
+        files: path.resolve(__dirname, "./fixtures/contains-values-with-multiple-replacements.scss"),
+        config: {
+          ...config,
+          rules: {
+            "@heliux-org/ui-style/use-defined-css-var-when-available": ruleConfigValue
+          }
+        }
+      });
+      expect(results).toHaveLength(1);
+      expect(results[0].warnings).toHaveLength(0); // the errors were ignored
+    });
+  });
+});

package/stylelint-config/rules/use-defined-css-var-when-available/__tests__/props-to-allowed-vars.test.js

@@ -0,0 +1,122 @@
+const { parseMondayUiCss, getPropsToAllowedCssVars } = require("../parse-monday-css");
+const { PROPS_TO_ALLOWED_VARS } = require("../props-to-allowed-vars");
+
+const ALLOWED_CSS_VARS_PREFIX_WITHOUT_MAPPING = [
+  "--font-h",
+  "--font-text",
+  "--font-general-label",
+  "--font-subtext",
+  "--font-paragraph",
+  "--font-weight",
+  "--font-size",
+  "--font-line-height",
+  "--letter-spacing"
+];
+
+describe("props-to-allowed-vars", () => {
+  const { allVarsToCanonicalValue } = parseMondayUiCss();
+  const propsToAllowedCssVars = getPropsToAllowedCssVars();
+
+  describe("PROPS_TO_ALLOWED_VARS", () => {
+    const allRootCssVarsFromGeneratedCss = Object.keys(allVarsToCanonicalValue);
+    const allMappedCssVars = [
+      ...new Set(
+        Object.values(PROPS_TO_ALLOWED_VARS).reduce((acc, { allowedVars, recommended }) => [...acc, ...allowedVars], [])
+      )
+    ];
+
+    allMappedCssVars.forEach(cssVarName => {
+      it(`should only include css vars that are under :root, without additional selectors - checking ${cssVarName} `, () => {
+        //if this fails, this means that we mapped a css prop to a css var that doesn't exist in our CSS output
+        const isExistingInCssOutput = allRootCssVarsFromGeneratedCss.includes(cssVarName);
+
+        expect(isExistingInCssOutput).toBeTruthy();
+      });
+    });
+
+    allRootCssVarsFromGeneratedCss.forEach(varFromGeneratedCss => {
+      it(`should map the css var ${varFromGeneratedCss} to valid css props that can use it`, () => {
+        const isCssVarMapped = allMappedCssVars.includes(varFromGeneratedCss);
+
+        if (!ALLOWED_CSS_VARS_PREFIX_WITHOUT_MAPPING.some(prefix => varFromGeneratedCss.startsWith(prefix))) {
+          // If this fails, a CSS var was added without mapping it to recommended CSS props.
+          // Without this mapping, we won't be able to recommend the proper usage of the CSS var.
+          // Please add your var to PROPS_TO_ALLOWED_VARS
+          expect(isCssVarMapped).toBeTruthy();
+        } else {
+          // If this fails, a CSS var was whitelisted as a variable without mapping, but it has mapping in PROPS_TO_ALLOWED_VARS.
+          // Either remove the CSS var from ALLOWED_CSS_VARS_WITHOUT_MAPPINGS, or remove the CSS var mapping from PROPS_TO_ALLOWED_VARS.
+          expect(isCssVarMapped).toBeFalsy();
+        }
+      });
+    });
+
+    Object.keys(PROPS_TO_ALLOWED_VARS).forEach(cssProp => {
+      const { allowedVars, recommended } = PROPS_TO_ALLOWED_VARS[cssProp];
+      const valuesToMatchingVars = {};
+      allowedVars.forEach(varName => {
+        const varValue = allVarsToCanonicalValue[varName];
+        valuesToMatchingVars[varValue] = valuesToMatchingVars[varValue] || [];
+        valuesToMatchingVars[varValue].push(varName);
+      });
+
+      Object.keys(valuesToMatchingVars).forEach(value => {
+        it(`should have a recommended var for each value that has multiple variables, for CSS prop ${cssProp} and value ${value}`, () => {
+          const matchingVars = valuesToMatchingVars[value];
+          if (matchingVars.length === 1) {
+            // only one option, no need for a recommendation
+            return;
+          }
+          const recommendationsToApply = intersect(matchingVars, recommended);
+          if (recommendationsToApply.length === 1) {
+            //only one recommendation, that's good
+            return;
+          }
+          if (recommendationsToApply.length === 0) {
+            fail(`Expected "${value}" to have a recommendation when being used in the CSS prop "${cssProp}", since it has multiple options: ${matchingVars.join(
+              ", "
+            )}
+            Please choose a single variable which should be used as a recommendation.`);
+          } else {
+            fail(`Expected "${value}" to have a single recommendation when being used in the CSS prop "${cssProp}", since it has multiple options: ${matchingVars.join(
+              ", "
+            )}
+            Instead, there were multiple recommendations with the same value: ${recommendationsToApply.join(", ")}. 
+            Please choose a single variable which should be used as a recommendation.`);
+          }
+        });
+      });
+
+      Object.keys(propsToAllowedCssVars[cssProp]).forEach(value => {
+        it(`should only have recommendations for values that have multiple possible variables, for CSS prop ${cssProp} and value ${value}`, () => {
+          const { recommended } = propsToAllowedCssVars[cssProp][value];
+          if (!recommended) {
+            return;
+          }
+
+          const matchingVarsCount = valuesToMatchingVars[value].length;
+          if (matchingVarsCount === 0) {
+            fail(`Found a recommendation for css prop "${cssProp}" and value "${value}", even though there are no matching variables.
+            Recommendations should only be added in cases that there are multiple variables that can be used, and have the same value.`);
+          }
+          if (matchingVarsCount === 1) {
+            fail(`Found a recommendation for css prop "${cssProp}" and value "${value}", even though only one variables matches this value: "${valuesToMatchingVars[value]}".
+            Recommendations should only be added in cases that there are multiple variables that can be used, and have the same value.`);
+          }
+        });
+      });
+    });
+  });
+});
+
+//shamelessly copied from https://stackoverflow.com/a/37041756/17779778
+function intersect(arr1, arr2) {
+  var set1 = new Set(arr1);
+  var set2 = new Set(arr2);
+  var intersection = new Set([...set1].filter(x => set2.has(x)));
+  return Array.from(intersection);
+}
+
+function fail(message) {
+  throw new Error(message);
+}