etudes 2.0.0 → 2.1.0

package/lib/providers/ScrollPositionProvider.js

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollPosition = exports.ScrollPositionContext = void 0;
+var react_1 = __importStar(require("react"));
+var spase_1 = require("spase");
+exports.ScrollPositionContext = (0, react_1.createContext)(undefined);
+function ScrollPositionProvider(_a) {
+    var children = _a.children;
+    var _b = __read((0, react_1.useState)({
+        minPos: new spase_1.Point(),
+        maxPos: new spase_1.Point(),
+        pos: new spase_1.Point(),
+        step: new spase_1.Point(),
+    }), 2), value = _b[0], setValue = _b[1];
+    (0, react_1.useEffect)(function () {
+        var updateScrollPosition = function () {
+            var refRect = spase_1.Rect.fromViewport();
+            var refRectMin = refRect.clone({ x: 0, y: 0 });
+            var refRectFull = spase_1.Rect.from(window, { overflow: true });
+            if (!refRectFull)
+                return;
+            var refRectMax = refRectMin.clone({ x: refRectFull.width - refRect.width, y: refRectFull.height - refRect.height });
+            var step = new spase_1.Point([refRect.left / refRectMax.left, refRect.top / refRectMax.top]);
+            setValue({
+                minPos: new spase_1.Point([refRectMin.left, refRectMin.top]),
+                maxPos: new spase_1.Point([refRectMax.left, refRectMax.top]),
+                pos: new spase_1.Point([refRect.left, refRect.top]),
+                step: step,
+            });
+        };
+        window.addEventListener('scroll', updateScrollPosition);
+        window.addEventListener('resize', updateScrollPosition);
+        window.addEventListener('orientationchange', updateScrollPosition);
+        updateScrollPosition();
+        return function () {
+            window.removeEventListener('scroll', updateScrollPosition);
+            window.removeEventListener('resize', updateScrollPosition);
+            window.removeEventListener('orientationchange', updateScrollPosition);
+        };
+    }, []);
+    return (react_1.default.createElement(exports.ScrollPositionContext.Provider, { value: value }, children));
+}
+exports.default = ScrollPositionProvider;
+function useScrollPosition(targetRef) {
+    var context = (0, react_1.useContext)(exports.ScrollPositionContext);
+    if (!context)
+        throw Error('Cannot fetch the current scroll position context, is the corresponding provider instated?');
+    if (!targetRef) {
+        return {
+            pos: context.pos,
+            step: context.step,
+        };
+    }
+    var element = targetRef.current;
+    var refRect = spase_1.Rect.fromViewport();
+    var rect = spase_1.Rect.from(element);
+    if (!refRect || !rect) {
+        return {
+            pos: new spase_1.Point(),
+            step: new spase_1.Point(),
+        };
+    }
+    var posX = refRect.right - rect.left;
+    var posY = refRect.bottom - rect.top;
+    var stepX = posX / rect.width;
+    var stepY = posY / rect.height;
+    return {
+        pos: new spase_1.Point([posX, posY]),
+        step: new spase_1.Point([stepX, stepY]),
+    };
+}
+exports.useScrollPosition = useScrollPosition;
+//# sourceMappingURL=ScrollPositionProvider.js.map

package/lib/providers/ScrollPositionProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollPositionProvider.js","sourceRoot":"/","sources":["providers/ScrollPositionProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA2G;AAC3G,+BAAmC;AActB,QAAA,qBAAqB,GAAG,IAAA,qBAAa,EAAyC,SAAS,CAAC,CAAA;AAErG,SAAwB,sBAAsB,CAAC,EAEjB;QAD5B,QAAQ,cAAA;IAEF,IAAA,KAAA,OAAoB,IAAA,gBAAQ,EAA6B;QAC7D,MAAM,EAAE,IAAI,aAAK,EAAE;QACnB,MAAM,EAAE,IAAI,aAAK,EAAE;QACnB,GAAG,EAAE,IAAI,aAAK,EAAE;QAChB,IAAI,EAAE,IAAI,aAAK,EAAE;KAClB,CAAC,IAAA,EALK,KAAK,QAAA,EAAE,QAAQ,QAKpB,CAAA;IAEF,IAAA,iBAAS,EAAC;QACR,IAAM,oBAAoB,GAAG;YAC3B,IAAM,OAAO,GAAG,YAAI,CAAC,YAAY,EAAE,CAAA;YACnC,IAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;YAChD,IAAM,WAAW,GAAG,YAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAA;YAEzD,IAAI,CAAC,WAAW;gBAAE,OAAM;YAExB,IAAM,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAA;YACrH,IAAM,IAAI,GAAG,IAAI,aAAK,CAAC,CAAC,OAAO,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,CAAA;YAEtF,QAAQ,CAAC;gBACP,MAAM,EAAE,IAAI,aAAK,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;gBACpD,MAAM,EAAE,IAAI,aAAK,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;gBACpD,GAAG,EAAE,IAAI,aAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;gBAC3C,IAAI,MAAA;aACL,CAAC,CAAA;QACJ,CAAC,CAAA;QAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAA;QACvD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAA;QACvD,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAA;QAElE,oBAAoB,EAAE,CAAA;QAEtB,OAAO;YACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAA;YAC1D,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAA;YAC1D,MAAM,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAA;QACvE,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,8BAAC,6BAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACzC,QAAQ,CACsB,CAClC,CAAA;AACH,CAAC;AA/CD,yCA+CC;AAED,SAAgB,iBAAiB,CAAC,SAA8B;IAC9D,IAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,6BAAqB,CAAC,CAAA;IACjD,IAAI,CAAC,OAAO;QAAE,MAAM,KAAK,CAAC,2FAA2F,CAAC,CAAA;IAEtH,IAAI,CAAC,SAAS,EAAE;QACd,OAAO;YACL,GAAG,EAAE,OAAO,CAAC,GAAG;YAChB,IAAI,EAAE,OAAO,CAAC,IAAI;SACnB,CAAA;KACF;IAED,IAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAA;IAEjC,IAAM,OAAO,GAAG,YAAI,CAAC,YAAY,EAAE,CAAA;IACnC,IAAM,IAAI,GAAG,YAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAE/B,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE;QACrB,OAAO;YACL,GAAG,EAAE,IAAI,aAAK,EAAE;YAChB,IAAI,EAAE,IAAI,aAAK,EAAE;SAClB,CAAA;KACF;IAED,IAAM,IAAI,GAAG,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAA;IACtC,IAAM,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAA;IACtC,IAAM,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAA;IAC/B,IAAM,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,MAAM,CAAA;IAEhC,OAAO;QACL,GAAG,EAAE,IAAI,aAAK,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAC5B,IAAI,EAAE,IAAI,aAAK,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;KAChC,CAAA;AACH,CAAC;AAhCD,8CAgCC","sourcesContent":["import React, { createContext, PropsWithChildren, RefObject, useContext, useEffect, useState } from 'react'\nimport { Point, Rect } from 'spase'\n\ntype ScrollPosition = {\n  pos: Point\n  step: Point\n}\n\ntype ScrollPositionContextValue = ScrollPosition & {\n  minPos: Point\n  maxPos: Point\n}\n\ntype ScrollPositionProviderProps = PropsWithChildren\n\nexport const ScrollPositionContext = createContext<ScrollPositionContextValue | undefined>(undefined)\n\nexport default function ScrollPositionProvider({\n  children,\n}: ScrollPositionProviderProps) {\n  const [value, setValue] = useState<ScrollPositionContextValue>({\n    minPos: new Point(),\n    maxPos: new Point(),\n    pos: new Point(),\n    step: new Point(),\n  })\n\n  useEffect(() => {\n    const updateScrollPosition = () => {\n      const refRect = Rect.fromViewport()\n      const refRectMin = refRect.clone({ x: 0, y: 0 })\n      const refRectFull = Rect.from(window, { overflow: true })\n\n      if (!refRectFull) return\n\n      const refRectMax = refRectMin.clone({ x: refRectFull.width - refRect.width, y: refRectFull.height - refRect.height })\n      const step = new Point([refRect.left / refRectMax.left, refRect.top / refRectMax.top])\n\n      setValue({\n        minPos: new Point([refRectMin.left, refRectMin.top]),\n        maxPos: new Point([refRectMax.left, refRectMax.top]),\n        pos: new Point([refRect.left, refRect.top]),\n        step,\n      })\n    }\n\n    window.addEventListener('scroll', updateScrollPosition)\n    window.addEventListener('resize', updateScrollPosition)\n    window.addEventListener('orientationchange', updateScrollPosition)\n\n    updateScrollPosition()\n\n    return () => {\n      window.removeEventListener('scroll', updateScrollPosition)\n      window.removeEventListener('resize', updateScrollPosition)\n      window.removeEventListener('orientationchange', updateScrollPosition)\n    }\n  }, [])\n\n  return (\n    <ScrollPositionContext.Provider value={value}>\n      {children}\n    </ScrollPositionContext.Provider>\n  )\n}\n\nexport function useScrollPosition(targetRef?: RefObject<Element>): ScrollPosition {\n  const context = useContext(ScrollPositionContext)\n  if (!context) throw Error('Cannot fetch the current scroll position context, is the corresponding provider instated?')\n\n  if (!targetRef) {\n    return {\n      pos: context.pos,\n      step: context.step,\n    }\n  }\n\n  const element = targetRef.current\n\n  const refRect = Rect.fromViewport()\n  const rect = Rect.from(element)\n\n  if (!refRect || !rect) {\n    return {\n      pos: new Point(),\n      step: new Point(),\n    }\n  }\n\n  const posX = refRect.right - rect.left\n  const posY = refRect.bottom - rect.top\n  const stepX = posX / rect.width\n  const stepY = posY / rect.height\n\n  return {\n    pos: new Point([posX, posY]),\n    step: new Point([stepX, stepY]),\n  }\n}\n"]}

package/lib/utils/asComponentDict.d.ts

@@ -1,5 +1,5 @@
 import { JSXElementConstructor, ReactNode } from 'react';
-declare type ComponentTypeDict = Record<string, JSXElementConstructor<any>>;
-declare type ComponentElementDict<T extends ComponentTypeDict> = Record<keyof T, JSX.Element>;
+type ComponentTypeDict = Record<string, JSXElementConstructor<any>>;
+type ComponentElementDict<T extends ComponentTypeDict> = Record<keyof T, JSX.Element>;
 export default function asComponentDict<T extends ComponentTypeDict>(children?: ReactNode, typeDict?: T): Partial<ComponentElementDict<T>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A study of headless React components",
   "main": "lib",
   "scripts": {
@@ -29,55 +29,56 @@
     "lib"
   ],
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.12",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@types/debug": "^4.1.7",
     "@types/html-webpack-plugin": "^3.2.6",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
+    "@types/node-polyglot": "^2.4.2",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
     "@types/react-transition-group": "^4.4.5",
     "@types/styled-components": "^5.1.26",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
-    "babel-loader": "^9.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
+    "babel-loader": "^9.1.2",
     "babel-plugin-styled-components": "^2.0.7",
-    "concurrently": "^7.5.0",
+    "concurrently": "^7.6.0",
     "cross-env": "^7.0.3",
     "debug": "^4.3.4",
-    "eslint": "^8.27.0",
+    "eslint": "^8.33.0",
     "html-webpack-plugin": "^5.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.4.3",
-    "react-router-dom": "^6.4.3",
-    "rimraf": "^3.0.2",
+    "react-router": "^6.8.0",
+    "react-router-dom": "^6.8.0",
+    "rimraf": "^4.1.2",
     "styled-components": "^5.3.6",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4",
-    "wait-on": "^6.0.1",
+    "typescript": "^4.9.5",
+    "wait-on": "^7.0.1",
     "webpack": "^5.75.0",
-    "webpack-cli": "^4.10.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
     "classnames": "^2.3.2",
-    "dirty-dom": "^7.2.0",
     "fast-deep-equal": "^3.1.3",
     "interactjs": "^1.10.17",
+    "node-polyglot": "^2.5.0",
     "react-transition-group": "^4.4.5",
     "resize-observer-polyfill": "^1.5.1",
-    "spase": "^6.4.0"
+    "spase": "^6.5.0"
   },
   "peerDependencies": {
     "react": "^18.2.0"
   },
   "optionalDependencies": {
-    "react-router": "^6.4.3",
-    "react-router-dom": "^6.4.3"
+    "react-router": "^6.8.0",
+    "react-router-dom": "^6.8.0"
   }
 }