feat(sliderwithhistogram): add slider with Histogram component (#218)

* feat(slider): started on slider

started

HEYUI-354

* feat(slider): slider plus unit tests

working slider with unit tests

HEYUI-354

* remove unneeded files

* added docs

* added react-slider to packagejson plus docs updates

* feat(sliderwithhistogram): added slider with histogram

added slider with histogram still need tests and docs

HEYUI-359

* feat(sliderwithhistogram): slider with histogram component

slider with histogram component. still needs docs

HEYUI-359

* feat(sliderwithhistogram): add slider with Histogram component

add slider with Histogram component

HEYUI-359

* ignore eslint error

* update readme and tsconfig

* update loader

package.json

@@ -140,6 +140,7 @@
     "http-server": "^14.1.0",
     "husky": "^7.0.4",
     "jest": "^27.5.1",
+    "jest-canvas-mock": "^2.5.1",
     "jest-image-snapshot": "^4.5.1",
     "json": "^11.0.0",
     "lerna": "^4.0.0",

packages/setupTests.ts

@@ -9,4 +9,6 @@ import '@testing-library/jest-dom/extend-expect';
 
 import { configure } from '@testing-library/react';
 
+import 'jest-canvas-mock';
+
 configure({ testIdAttribute: 'data-test-id' });

packages/slider-with-histogram/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/slider-with-histogram/README.md

@@ -0,0 +1,47 @@
+# HeyCar-UIKit - SliderWithHistogram
+
+[![Tests](https://github.com/hey-car/heycar-uikit/actions/workflows/build.yml/badge.svg)](https://github.com/hey-car/heycar-uikit/actions/workflows/build.yml)
+[![Coverage Status](https://coveralls.io/repos/github/hey-car/heycar-uikit/badge.svg)](https://coveralls.io/github/hey-car/heycar-uikit)
+[![Demo build](https://github.com/hey-car/heycar-uikit/actions/workflows/main.yml/badge.svg)](https://github.com/hey-car/heycar-uikit/actions/workflows/main.yml)
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+
+Slider provides users with a way to interactively adjust a value or range within a specific range or set of options.
+
+## Installation
+
+To install and save in your package.json dependencies, run the command below using npm:
+
+```bash
+npm install @heycar-uikit/core
+
+# Or
+npm install @heycar-uikit/sliderWithHistogram
+```
+
+## Usage
+
+```tsx
+// TSX/JSX file
+// Core import is recomended
+import SliderWithHistogram from '@heycar-uikit/core/slider-with-histogram';
+
+// or
+import SliderWithHistogram from '@heycar-uikit/slider-with-histogram';
+
+function App() {
+  return <SliderWithHistogram />;
+}
+```
+
+```css
+// CSS file
+// Core import is recomended
+@import '@heycar-uikit/core/slider-with-histogram/esm/SliderWithHistogram.constants.css';
+
+// or
+@import '@heycar-uikit/slider-with-histogram/dist/esm/SliderWithHistogram.constants.css';
+```
+
+## Documentation and sandbox
+
+[Storybook](https://hey-car.github.io/heycar-uikit/main/?path=/docs/components-molecules-slider-with-histogram--sliderWithHistogram) documentation and sandbox

packages/slider-with-histogram/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@heycar-uikit/slider-with-histogram",
+  "version": "1.0.0",
+  "description": "HeyCar-UIKit SliderWithHistogram",
+  "main": "dist/index.js",
+  "module": "./dist/esm/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "ui",
+    "uikit",
+    "react",
+    "components",
+    "heycar",
+    "typescript",
+    "ui-components",
+    "design-systems",
+    "slider",
+    "histogram",
+    "Slider With Histogram"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hey-car/heycar-uikit.git"
+  },
+  "homepage": "https://github.com/hey-car/heycar-uikit/tree/main/packages/slider-with-histogram#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1"
+  },
+  "dependencies": {
+    "@heycar-uikit/slider": "^1.0.0"
+  },
+  "author": "HeyCar Team",
+  "license": "UNLICENSED"
+}

packages/slider-with-histogram/src/SliderWithHistogram.constants.ts

@@ -0,0 +1,7 @@
+const HISTOGRAM_HEIGHT = 64;
+
+const SLIDER_HEIGHT = 28;
+
+const DEFAULT_LOADING_STR = 'Loading';
+
+export { DEFAULT_LOADING_STR, HISTOGRAM_HEIGHT, SLIDER_HEIGHT };

packages/slider-with-histogram/src/SliderWithHistogram.tsx

@@ -0,0 +1,119 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { FC, useEffect, useRef, useState } from 'react';
+
+import Slider from '@heycar-uikit/slider';
+
+import Histogram from './components/Histogram';
+import { debounce, sanitiseRangeIndexes } from './utils/histogramHelpers';
+import {
+  DEFAULT_LOADING_STR,
+  HISTOGRAM_HEIGHT,
+  SLIDER_HEIGHT,
+} from './SliderWithHistogram.constants';
+import { SliderWithHistogramProps } from './SliderWithHistogram.types';
+
+import styles from './styles/default.module.css';
+
+export const SliderWithHistogram: FC<SliderWithHistogramProps> = ({
+  dataTestId,
+  className,
+  onChange,
+  onAfterChange,
+  locale,
+  minDistance,
+  selectedRangeIndexes,
+  ariaValueText,
+  data,
+  hide,
+  isLoading,
+  ...rest
+}) => {
+  const internalRef = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState<number>(0);
+  const [height, setHeight] = useState<number>(0);
+
+  const [rangeIndexes, setRangeIndexes] = useState<[number, number]>(
+    sanitiseRangeIndexes(selectedRangeIndexes, data),
+  );
+
+  const handleOnChange = (values: number[], thumbIndex: number) => {
+    setRangeIndexes([values[0], values[1]]);
+    if (onChange) onChange([values[0], values[1]], thumbIndex);
+  };
+
+  const updateCanvasSize = debounce(() => {
+    if (internalRef.current) {
+      // @ts-ignore
+      const rect = internalRef.current.getBoundingClientRect();
+
+      const newWidth = rect.width - SLIDER_HEIGHT;
+
+      const newHeight = HISTOGRAM_HEIGHT;
+
+      setWidth(newWidth);
+      setHeight(newHeight);
+    }
+  });
+
+  useEffect(() => {
+    updateCanvasSize();
+
+    window.addEventListener('resize', updateCanvasSize);
+
+    return () => {
+      window.removeEventListener('resize', updateCanvasSize);
+    };
+  }, []);
+
+  useEffect(() => {
+    setRangeIndexes(sanitiseRangeIndexes(selectedRangeIndexes, data));
+  }, [selectedRangeIndexes, setRangeIndexes, data]);
+
+  return (
+    <div
+      className={`${styles.wrapper} ${className}`}
+      data-test-id={dataTestId}
+      ref={internalRef}
+      {...rest}
+    >
+      {!hide && (
+        <div aria-busy={isLoading} className={styles.histogramWrapper}>
+          {isLoading ? (
+            <div
+              aria-busy="true"
+              aria-label={locale?.loading || DEFAULT_LOADING_STR}
+              aria-live="polite"
+              className={styles.loader}
+            >
+              <div />
+              <div />
+              <div />
+            </div>
+          ) : (
+            <Histogram
+              height={height}
+              selectedRangeIndexes={rangeIndexes}
+              selectedRangeMinWidth={4}
+              values={data}
+              width={width}
+            />
+          )}
+        </div>
+      )}
+      <Slider
+        ariaValueText={ariaValueText}
+        className={styles.sliderWrapper}
+        isWithHistogram={true}
+        locale={locale}
+        minDistance={minDistance}
+        onAfterChange={onAfterChange}
+        onChange={handleOnChange}
+        selectedRangeIndexes={selectedRangeIndexes}
+        stepCount={data.length}
+      />
+    </div>
+  );
+};
+
+export default SliderWithHistogram;