pager-widget 0.0.1

package/getVersion.js

@@ -0,0 +1,9 @@
+import { loadPackageJson } from "json.macro";
+
+const x = loadPackageJson();
+
+export const data = x;
+
+export const getPackageNameAndVersion = () => {
+  return { name: x.name, version: x.version };
+};

package/md/assistant_md.js

@@ -0,0 +1,150 @@
+import React from "react";
+
+const URL_REGEX = /[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=-]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
+
+const normalStr = (str) => ({
+  type: "normal_str",
+  value: str,
+});
+
+const urlStr = (str) => ({
+  type: "url",
+  value: str,
+});
+
+const normalWrapper = (TagName) => ({ mdText }) => (
+  <TagName>
+    <AssistantMd mdText={mdText.value} />
+  </TagName>
+);
+
+const listWrapper = (TagName) => ({ mdText: { list } }) => (
+  <TagName>
+    {list.map((mdText) => (
+      <li>
+        <AssistantMd mdText={mdText} />
+      </li>
+    ))}
+  </TagName>
+);
+
+export function parseUrlAndString(str) {
+  const results = [];
+  let remaining = str;
+  while (remaining) {
+    let match = remaining.match(URL_REGEX);
+    if (!match) {
+      results.push(normalStr(remaining));
+      break;
+    }
+
+    if (match.index !== 0) {
+      results.push(normalStr(remaining.slice(0, match.index)));
+      results.push(
+        urlStr(remaining.slice(match.index, match.index + match[0].length))
+      );
+      remaining = remaining.slice(match.index + match[0].length);
+      continue;
+    }
+    results.push(urlStr(remaining.slice(0, match[0].length)));
+    remaining = remaining.slice(match[0].length);
+  }
+  return results;
+}
+
+const mdTypeRenderers = {
+  normal_text: NormalTextMd,
+  bold: normalWrapper("strong"),
+  italic: normalWrapper("em"),
+  underline: normalWrapper("u"),
+  hyperlink: HyperLinkMd,
+  ordered_list: listWrapper("ol"),
+  unordered_list: listWrapper("ul"),
+  newline: () => <br />,
+  join: JoinMd,
+};
+
+const DisplayWithSpace = ({ text }) => {
+  return <span style={{ whiteSpace: "pre-wrap" }}>{text}</span>;
+};
+
+const DisplayLineBreaks = ({ text }) => {
+  let texts = text.split("\n");
+  let lastOne = texts[texts.length - 1];
+  let exceptLastOne = texts.slice(0, texts.length - 1);
+  return (
+    <>
+      {exceptLastOne.reduce(
+        (arr, text) => [
+          ...arr,
+          <DisplayWithSpace text={text} key={"space" + arr.length} />,
+          <br key={arr.length} />,
+        ],
+        []
+      )}
+      {<DisplayWithSpace text={lastOne} />}
+    </>
+  );
+};
+
+const DisplayURL = ({ text }) => {
+  const parsed = parseUrlAndString(text);
+  return parsed.map(({ type, value }, i) =>
+    type === "url" ? (
+      <a href={value} target="_blank" key={i} rel="noreferrer">
+        {value}
+      </a>
+    ) : (
+      <DisplayLineBreaks text={value} key={i}></DisplayLineBreaks>
+    )
+  );
+};
+
+function NormalTextMd({ mdText }) {
+  return <DisplayURL text={mdText} />;
+}
+
+function HyperLinkMd({ mdText }) {
+  return (
+    <a href={mdText.link} target="_blank">
+      <AssistantMd mdText={mdText.value} />
+    </a>
+  );
+}
+
+export function evalNormalOrJoinText(mdText) {
+  return mdText.markdown_text === "normal_text"
+    ? mdText.normal_text
+    : mdText.markdown_text === "join"
+    ? joinAsNormalText(mdText.join.lhs, mdText.join.rhs)
+    : null;
+}
+
+function joinAsNormalText(lhs, rhs) {
+  let evaluatedLhs = evalNormalOrJoinText(lhs);
+  let evaluatedRhs = evalNormalOrJoinText(rhs);
+  return (
+    (evaluatedLhs !== null &&
+      evaluatedRhs !== null &&
+      `${evaluatedLhs}${evaluatedRhs}`) ||
+    null
+  );
+}
+
+function JoinMd({ mdText: { lhs, rhs } }) {
+  let normalText = joinAsNormalText(lhs, rhs);
+  console.log({ normalText });
+  return normalText ? (
+    <NormalTextMd mdText={normalText} />
+  ) : (
+    <>
+      <AssistantMd mdText={lhs} />
+      <AssistantMd mdText={rhs} />
+    </>
+  );
+}
+
+export default function AssistantMd({ mdText }) {
+  let RenderMd = mdTypeRenderers[mdText.markdown_text];
+  return <RenderMd mdText={mdText[mdText.markdown_text]} />;
+}

package/md/md_format_converter.js

@@ -0,0 +1,68 @@
+export const convertToMDText = (md) => {
+
+    if (md.markdown_text) {
+
+        return md
+
+    }
+
+    if (typeof md == 'string') {
+
+        return {
+
+            markdown_text: 'normal_text',
+
+            normal_text: md
+
+        }
+
+    } else if (md.md_type === 'md_bold' || md.md_type === 'md_italic' || md.md_type === 'md_underline') {
+
+        return {
+
+            markdown_text: md.md_type.replace(/^md_/, ''),
+
+            [`${md.md_type.replace(/^md_/, '')}`]: { value: convertToMDText(md.value) }
+
+        }
+
+    } else if (md.md_type === 'md_normal') {
+
+        return {
+
+            markdown_text: 'normal_text',
+
+            normal_text: md.value
+
+        }
+
+    } else if (md.md_type == 'md_hyperlink') {
+
+        return {
+
+            markdown_text: md.md_type.replace(/^md_/, ''),
+
+            hyperlink: {
+
+                link: md.link,
+
+                value: convertToMDText(md.value)
+
+            }
+
+        }
+
+    } else {
+        return updateLhsRhs(md)
+    }
+
+}
+
+const updateLhsRhs = (obj) => {
+    if (obj.md_type != 'md_join') {
+        obj = { ...convertToMDText(obj) }
+    } else {
+        obj = { join: { lhs: convertToMDText(obj.lhs), rhs: updateLhsRhs(obj.rhs) }, markdown_text: 'join' }
+    }
+    return obj
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "pager-widget",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "targets": {
+    "default": {
+      "sourceMap": {
+        "inline": true
+      }
+    }
+  },
+  "scripts": {
+    "build:css": "postcss styles/global.pcss -o static/global.css",
+    "watch": "watch 'npm run build:css' .",
+    "build": "cross-env NODE_ENV=production parcel build lib.jsx  --no-source-maps",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "cross-env NODE_ENV=development parcel index.html",
+    "format": "prettier --write --ignore-unknown",
+    "prebuild": "rimraf dist",
+    "prepublishOnly": "npm run build:css && npm run build",
+    "format_changed_files": "pretty-quick --staged",
+    "postinstall": "npm run build:css"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@fullhuman/postcss-purgecss": "^4.0.3",
+    "@skitter/assistant_md": "^1.0.1",
+    "autoprefixer": "^9.8.7",
+    "axios": "^0.21.1",
+    "broadcast-channel": "^4.9.0",
+    "deepmerge": "^4.3.1",
+    "jsonwebtoken": "^8.5.1",
+    "parcel": "^2.0.0-nightly.852",
+    "postcss": "^8.3.8",
+    "postcss-cli": "^9.0.1",
+    "postcss-loader": "^4.0.3",
+    "postcss-modules": "^4.2.2",
+    "postcss-scopify": "^0.1.9",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "socket.io": "^4.0.0",
+    "socket.io-client": "^2.4.0",
+    "styled-components": "^5.3.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
+    "url-parse": "^1.5.1",
+    "use-media": "^1.4.0",
+    "uuid": "^8.3.2",
+    "watch": "^1.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.8",
+    "babel-plugin-macros": "^3.1.0",
+    "cross-env": "^7.0.3",
+    "cssnano": "^4.1.11",
+    "fast-glob": "^3.2.7",
+    "json.macro": "^1.3.0",
+    "parcel-bundler": "^1.12.5",
+    "prettier": "2.2.1",
+    "pretty-quick": "^3.1.0",
+    "rimraf": "^3.0.2"
+  },
+  "@parcel/transformer-js": {
+    "inlineFS": false,
+    "inlineEnvironment": false
+  },
+  "volta": {
+    "node": "14.19.3"
+  }
+}

package/parse-url.js

@@ -0,0 +1,37 @@
+const URL_REGEX = /[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=-]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
+
+const normalStr = (str) => ({
+  type: "normal_str",
+  value: str,
+});
+
+const urlStr = (str) => ({
+  type: "url",
+  value: str,
+});
+
+export function parseUrlAndString(str) {
+  const results = [];
+  let remaining = str;
+  while (remaining) {
+    let match = remaining.match(URL_REGEX);
+    if (!match) {
+      results.push(normalStr(remaining));
+      break;
+    }
+
+    if (match.index !== 0) {
+      results.push(normalStr(remaining.slice(0, match.index)));
+      results.push(
+        urlStr(remaining.slice(match.index, match.index + match[0].length))
+      );
+      remaining = remaining.slice(match.index + match[0].length);
+      continue;
+    }
+    results.push(urlStr(remaining.slice(0, match[0].length)));
+    remaining = remaining.slice(match[0].length);
+  }
+  return results;
+}
+
+export default parseUrlAndString;

package/postcss.config.js

@@ -0,0 +1,18 @@
+const purgecss = require("@fullhuman/postcss-purgecss");
+const cssnano = require("cssnano");
+var scopify = require("postcss-scopify");
+
+module.exports = {
+  plugins: [
+    require("tailwindcss"),
+    require("autoprefixer"),
+    scopify(".workativ-widget"),
+    cssnano({
+      preset: "default",
+    }),
+    //   purgecss({
+    //     content: ['./lib.jsx'],
+    //     defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
+    //   })
+  ],
+};

package/static/additional.css

@@ -0,0 +1,29 @@
+.workativ-widget *,
+.workativ-widget ::after,
+.workativ-widget ::before {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.flex{
+  display: flex;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap');
+
+@font-face {
+  font-family: 'Gordita-Medium';
+  src: url('./fonts/Gordita-Medium.woff2') format('woff2'), url('./fonts/Gordita-Medium.woff2') format('woff');
+  font-weight: 500;
+  font-style: normal;
+} 
+
+@font-face {
+  font-family: 'Gordita-Regular';
+  src: url('./fonts/Gordita-Regular.woff2') format('woff2'), url('./fonts/Gordita-Regular.woff2') format('woff');
+  font-weight: 500;
+  font-style: normal;
+} 

package/static/global.css

@@ -0,0 +1 @@
+.workativ-widget *,.workativ-widget :after,.workativ-widget :before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.workativ-widget .fixed{position:fixed}.workativ-widget .absolute{position:absolute}.workativ-widget .relative{position:relative}.workativ-widget .top-0{top:0}.workativ-widget .top-4{top:1rem}.workativ-widget .right-0{right:0}.workativ-widget .right-6{right:1.5rem}.workativ-widget .right-8{right:2rem}.workativ-widget .bottom-8{bottom:2rem}.workativ-widget .bottom-10{bottom:2.5rem}.workativ-widget .bottom-24{bottom:6rem}.workativ-widget .left-0{left:0}.workativ-widget .float-left{float:left}.workativ-widget .mt-2{margin-top:.5rem}.workativ-widget .mt-2\.5{margin-top:.625rem}.workativ-widget .mr-1{margin-right:.25rem}.workativ-widget .mr-2{margin-right:.5rem}.workativ-widget .mr-2\.5{margin-right:.625rem}.workativ-widget .ml-1{margin-left:.25rem}.workativ-widget .ml-2{margin-left:.5rem}.workativ-widget .ml-2\.5{margin-left:.625rem}.workativ-widget .inline-block{display:inline-block}.workativ-widget .flex{display:flex}.workativ-widget .inline-flex{display:inline-flex}.workativ-widget .table{display:table}.workativ-widget .grid{display:grid}.workativ-widget .hidden{display:none}.workativ-widget .h-4{height:1rem}.workativ-widget .h-8{height:2rem}.workativ-widget .h-11{height:2.75rem}.workativ-widget .h-auto{height:auto}.workativ-widget .h-full{height:100%}.workativ-widget .w-4{width:1rem}.workativ-widget .w-8{width:2rem}.workativ-widget .w-11{width:2.75rem}.workativ-widget .w-auto{width:auto}.workativ-widget .w-5\/6{width:83.333333%}.workativ-widget .w-2\/12{width:16.666667%}.workativ-widget .w-full{width:100%}.workativ-widget .w-max{width:-moz-max-content;width:max-content}.workativ-widget .flex-shrink{flex-shrink:1}.workativ-widget .transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.workativ-widget .cursor-default{cursor:default}.workativ-widget .cursor-pointer{cursor:pointer}.workativ-widget .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.workativ-widget .flex-row{flex-direction:row}.workativ-widget .flex-col{flex-direction:column}.workativ-widget .flex-wrap{flex-wrap:wrap}.workativ-widget .items-start{align-items:flex-start}.workativ-widget .items-end{align-items:flex-end}.workativ-widget .items-center{align-items:center}.workativ-widget .justify-start{justify-content:flex-start}.workativ-widget .justify-end{justify-content:flex-end}.workativ-widget .justify-center{justify-content:center}.workativ-widget .justify-between{justify-content:space-between}.workativ-widget .gap-2{gap:.5rem}.workativ-widget .gap-2\.5{gap:.625rem}.workativ-widget .self-center{align-self:center}.workativ-widget .overflow-y-scroll{overflow-y:scroll}.workativ-widget .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workativ-widget .break-words{overflow-wrap:break-word}.workativ-widget .break-all{word-break:break-all}.workativ-widget .rounded{border-radius:.25rem}.workativ-widget .rounded-full{border-radius:9999px}.workativ-widget .rounded-b-md{border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.workativ-widget .rounded-tl-none{border-top-left-radius:0}.workativ-widget .rounded-tl-md{border-top-left-radius:.375rem}.workativ-widget .rounded-tr-none{border-top-right-radius:0}.workativ-widget .rounded-tr-md{border-top-right-radius:.375rem}.workativ-widget .rounded-br-md{border-bottom-right-radius:.375rem}.workativ-widget .rounded-bl-md{border-bottom-left-radius:.375rem}.workativ-widget .border{border-width:1px}.workativ-widget .bg-transparent{background-color:transparent}.workativ-widget .bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.workativ-widget .bg-gray-200{--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity))}.workativ-widget .bg-gray-900{--tw-bg-opacity:1;background-color:rgba(17,24,39,var(--tw-bg-opacity))}.workativ-widget .hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.workativ-widget .object-cover{-o-object-fit:cover;object-fit:cover}.workativ-widget .object-center{-o-object-position:center;object-position:center}.workativ-widget .p-2{padding:.5rem}.workativ-widget .p-3{padding:.75rem}.workativ-widget .p-2\.5{padding:.625rem}.workativ-widget .px-2{padding-left:.5rem;padding-right:.5rem}.workativ-widget .px-4{padding-left:1rem;padding-right:1rem}.workativ-widget .px-2\.5{padding-left:.625rem;padding-right:.625rem}.workativ-widget .py-1{padding-top:.25rem;padding-bottom:.25rem}.workativ-widget .py-3{padding-top:.75rem;padding-bottom:.75rem}.workativ-widget .py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.workativ-widget .pr-1{padding-right:.25rem}.workativ-widget .pr-2{padding-right:.5rem}.workativ-widget .pr-9{padding-right:2.25rem}.workativ-widget .pr-1\.5{padding-right:.375rem}.workativ-widget .pr-2\.5{padding-right:.625rem}.workativ-widget .pb-2{padding-bottom:.5rem}.workativ-widget .pb-2\.5{padding-bottom:.625rem}.workativ-widget .pl-2{padding-left:.5rem}.workativ-widget .pl-4{padding-left:1rem}.workativ-widget .pl-2\.5{padding-left:.625rem}.workativ-widget .text-left{text-align:left}.workativ-widget .font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.workativ-widget .text-xs{font-size:.75rem;line-height:1rem}.workativ-widget .text-sm{font-size:.875rem;line-height:1.25rem}.workativ-widget .text-base{font-size:1rem;line-height:1.5rem}.workativ-widget .font-normal{font-weight:400}.workativ-widget .font-semibold{font-weight:600}.workativ-widget .font-bold{font-weight:700}.workativ-widget .text-black{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.workativ-widget .text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.workativ-widget .text-gray-200{--tw-text-opacity:1;color:rgba(229,231,235,var(--tw-text-opacity))}.workativ-widget .hover\:text-black:hover{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.workativ-widget *,.workativ-widget :after,.workativ-widget :before{--tw-shadow:0 0 transparent}.workativ-widget .shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.workativ-widget .shadow-2xl,.workativ-widget .shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.workativ-widget .shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}.workativ-widget .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.workativ-widget *,.workativ-widget :after,.workativ-widget :before{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent}.workativ-widget .transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.workativ-widget .ease-linear{transition-timing-function:linear}.workativ-widget .ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:640px){.workativ-widget .sm\:right-0{right:0}.workativ-widget .sm\:bottom-0{bottom:0}}@media (min-width:1280px){.workativ-widget .xl\:right-6{right:1.5rem}.workativ-widget .xl\:bottom-32{bottom:8rem}}

package/styles/global.pcss

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+

package/tailwind.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  purge: {
+    enabled: true,
+    content: ["./lib.jsx"],
+  },
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: false,
+  },
+};

package/upload-file.hook.js

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import axios from "axios";
+
+export const useFileUpload = (endpoint, sendMessage) => {
+  const [fileUploadStatus, setFileUploadStatus] = useState("initial");
+  const onFileUpload = (event) => {
+    const file = event.target.files[0];
+    const formData = new FormData();
+    formData.append("file", file, file.name);
+    formData.append(
+      "category",
+      file.type.split("/")[0] === "image"
+        ? "image"
+        : file.type.split("/")[0] === "video"
+        ? "video"
+        : "file"
+    );
+    setFileUploadStatus("uploading");
+    axios.post(`${endpoint}/public/file_upload`, formData).then(({ data }) => {
+      sendMessage("", data);
+      setFileUploadStatus("initial");
+    });
+  };
+  return {
+    status: fileUploadStatus,
+    onFileUpload,
+  };
+};

package/useScale.js

@@ -0,0 +1,85 @@
+import React, {
+  createContext, useContext, useReducer
+} from "react";
+
+const MIN_ZOOM_LEVEL = 60;
+const MAX_ZOOM_LEVEL = 200;
+const DEFAULT_ZOOM_LEVEL = 100;
+
+const calculateScaleToTranslate = (zoomLevel) => {
+  const scaleInRatio = zoomLevel / 100;
+  return Math.abs(scaleInRatio);
+};
+
+export const ScaleContext = createContext({});
+
+export const useScaleContext = () => useContext(ScaleContext);
+
+const validateZoomLevel = (zoom) => {
+
+  if (zoom >= MIN_ZOOM_LEVEL && zoom <= MAX_ZOOM_LEVEL) {
+    // console.log(`zoom :: ${zoom}`)
+    return true;
+  } else {
+    // console.error(`invalid zoom :: ${zoom}`)
+    return false;
+  }
+};
+
+const setInitialZoom = (currentZoomValue) => {
+  if (validateZoomLevel(currentZoomValue)) {
+    return currentZoomValue
+  }
+  return DEFAULT_ZOOM_LEVEL
+};
+
+function zoomReducer(currentZoom, action) {
+  switch (action.type) {
+    case "increase": {
+      const toUpdate = currentZoom + action.by;
+      return validateZoomLevel(toUpdate) ? toUpdate : currentZoom;
+    }
+    case "decrease": {
+      const toUpdate = currentZoom - action.by;
+      return validateZoomLevel(toUpdate) ? toUpdate : currentZoom;
+    }
+    case "update": {
+      const toUpdate = action.to;
+      return validateZoomLevel(toUpdate) ? toUpdate : currentZoom;
+    }
+    default:
+      throw new Error();
+  }
+}
+
+export default function useSizeScale(defaultSize) {
+  // console.log("defaultSize", defaultSize)
+  const [zoomLevel, dispatchZoomAction] = useReducer(zoomReducer, defaultSize, setInitialZoom);
+  const scaleRatio = calculateScaleToTranslate(zoomLevel);
+
+  const updateZoomLevel = (zoom) => {
+    dispatchZoomAction({ type: 'update', to: zoom });
+  };
+
+  return [zoomLevel, scaleRatio, updateZoomLevel];
+}
+
+export const ScaleSizeProvider = ({ children, widgetSize }) => {
+  const [zoomLevel, scaleRatio, updateZoomLevel] = useSizeScale(
+    calculateDefaultScale(widgetSize)
+  );
+
+  return (
+    <ScaleContext.Provider
+      value={{ zoomLevel, scale: scaleRatio, updateZoomLevel }}
+    >
+      {children}
+    </ScaleContext.Provider>
+  );
+};
+
+const calculateDefaultScale = (size) => {
+  const parsed = parseInt(size, 10);
+  if (isNaN(parsed)) { return DEFAULT_ZOOM_LEVEL; }
+  return size;
+};