@studiometa/ui 0.1.1 → 0.2.2

package/README.md

@@ -5,7 +5,7 @@
 [![Dependency Status](https://img.shields.io/librariesio/release/npm/@studiometa/ui?style=flat-square)](https://david-dm.org/studiometa/js-toolkit)
 ![Codecov](https://img.shields.io/codecov/c/github/studiometa/js-toolkit?style=flat-square)
 
-> 🗃 A set of opiniated, unstyled and accessible components based on [@studiometa/js-toolkit](https://github.com/studiometa/js-toolkit)
+> 📦 A set of opiniated, unstyled and accessible components based on [@studiometa/js-toolkit](https://github.com/studiometa/js-toolkit)
 
 ## Installation
 
@@ -15,6 +15,12 @@ Install the latest version via NPM:
 npm install @studiometa/ui
 ```
 
+If you need the Twig template as well, install the Twig extension via Composer and load it in your application:
+
+```bash
+composer require studiometa/ui
+```
+
 ## Usage
 
 Import the components from the package as needed:
@@ -34,3 +40,33 @@ class App extends Base {
 
 export default createApp(App, document.body);
 ```
+
+Heads up to [ui.studiometa.dev](https://ui.studiometa.dev) for more informations.
+
+## Contributing
+
+Clone the project and install the required dependencies. The back-end can be run with [ddev](https://github.com/drud/ddev) which is preconfigured.
+
+```bash
+git clone https://github.com:studiometa/ui.git
+cd ui/
+
+# Install root dependencies
+npm install
+composer install
+ddev start
+
+# Install back-end dependencies
+cd packages/docs/.symfony
+composer install
+
+# Launch the dev environment
+cd ..
+npm run dev
+```
+
+You can also [open the repository in GitPod](https://gitpod.io/#https://github.com/studiometa/ui) and start the dev server with the following command in the root of the project:
+
+```
+npm run docs:dev
+```

package/atoms/AnchorScrollTo/AnchorScrollTo.cjs

@@ -0,0 +1,52 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/AnchorScrollTo/AnchorScrollTo.js
+var AnchorScrollTo_exports = {};
+__export(AnchorScrollTo_exports, {
+  default: () => AnchorScrollTo
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var AnchorScrollTo = class extends import_js_toolkit.Base {
+  get targetSelector() {
+    return this.$el.hash;
+  }
+  onClick(event) {
+    try {
+      (0, import_utils.scrollTo)(this.targetSelector);
+      event.preventDefault();
+    } catch (err) {
+    }
+  }
+};
+__publicField(AnchorScrollTo, "config", {
+  name: "AnchorScrollTo"
+});
+module.exports = __toCommonJS(AnchorScrollTo_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/AnchorScrollTo/AnchorScrollTo.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @typedef {AnchorScrollTo & {
+ *   $el: HTMLAnchorElement
+ * }} AnchorScrollToInterface
+ */
+/**
+ * AncorScrollTo class.
+ */
+export default class AnchorScrollTo extends Base {
+    static config: {
+        name: string;
+    };
+    /**
+     * Get the target selector.
+     *
+     * @this    {AnchorScrollToInterface}
+     * @returns {string}
+     */
+    get targetSelector(): string;
+    /**
+     * Scroll to the target selector on click.
+     *
+     * @param   {MouseEvent} event
+     * @returns {void}
+     */
+    onClick(event: MouseEvent): void;
+}
+export type AnchorScrollToInterface = AnchorScrollTo & {
+    $el: HTMLAnchorElement;
+};
+import { Base } from "@studiometa/js-toolkit";

package/atoms/AnchorScrollTo/AnchorScrollTo.js

@@ -0,0 +1,26 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base } from "@studiometa/js-toolkit";
+import { scrollTo } from "@studiometa/js-toolkit/utils";
+class AnchorScrollTo extends Base {
+  get targetSelector() {
+    return this.$el.hash;
+  }
+  onClick(event) {
+    try {
+      scrollTo(this.targetSelector);
+      event.preventDefault();
+    } catch (err) {
+    }
+  }
+}
+__publicField(AnchorScrollTo, "config", {
+  name: "AnchorScrollTo"
+});
+export {
+  AnchorScrollTo as default
+};

package/atoms/Cursor/Cursor.cjs

@@ -0,0 +1,129 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/Cursor/Cursor.js
+var Cursor_exports = {};
+__export(Cursor_exports, {
+  default: () => Cursor
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var Cursor = class extends import_js_toolkit.Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "x", 0);
+    __publicField(this, "y", 0);
+    __publicField(this, "scale", 0);
+    __publicField(this, "pointerX", 0);
+    __publicField(this, "pointerY", 0);
+    __publicField(this, "pointerScale", 0);
+  }
+  mounted() {
+    this.x = 0;
+    this.y = 0;
+    this.scale = 0;
+    this.pointerX = 0;
+    this.pointerY = 0;
+    this.pointerScale = 0;
+    this.render({ x: this.x, y: this.y, scale: this.scale });
+  }
+  moved({ event, x, y, isDown }) {
+    if (!this.$services.has("ticked")) {
+      this.$services.enable("ticked");
+    }
+    this.pointerX = x;
+    this.pointerY = y;
+    let scale = 1;
+    if (!event) {
+      this.pointerScale = scale;
+      return;
+    }
+    const shouldGrow = event.target instanceof Element && event.target.matches(this.$options.growSelectors) || false;
+    const shouldReduce = isDown || event.target instanceof Element && event.target.matches(this.$options.shrinkSelectors) || false;
+    if (shouldGrow) {
+      scale = this.$options.growTo;
+    }
+    if (shouldReduce) {
+      scale = this.$options.shrinkTo;
+    }
+    this.pointerScale = scale;
+  }
+  ticked() {
+    this.x = (0, import_utils.damp)(this.pointerX, this.x, this.$options.translateDampFactor);
+    this.y = (0, import_utils.damp)(this.pointerY, this.y, this.$options.translateDampFactor);
+    this.scale = (0, import_utils.damp)(this.pointerScale, this.scale, this.pointerScale < this.scale ? this.$options.shrinkDampFactor : this.$options.growDampFactor);
+    this.render({ x: this.x, y: this.y, scale: this.scale });
+    if (this.x === this.pointerX && this.y === this.pointerY && this.scale === this.pointerScale) {
+      this.$services.disable("ticked");
+    }
+  }
+  render({ x, y, scale }) {
+    const transform = (0, import_utils.matrix)({
+      translateX: x,
+      translateY: y,
+      scaleX: scale,
+      scaleY: scale
+    });
+    this.$el.style.transform = `translateZ(0) ${transform}`;
+  }
+};
+__publicField(Cursor, "config", {
+  name: "Cursor",
+  options: {
+    growSelectors: {
+      type: String,
+      default: "a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *"
+    },
+    shrinkSelectors: {
+      type: String,
+      default: "[data-cursor-shrink], [data-cursor-shrink] *"
+    },
+    growTo: {
+      type: Number,
+      default: 2
+    },
+    shrinkTo: {
+      type: Number,
+      default: 0.5
+    },
+    translateDampFactor: {
+      type: Number,
+      default: 0.25
+    },
+    growDampFactor: {
+      type: Number,
+      default: 0.25
+    },
+    shrinkDampFactor: {
+      type: Number,
+      default: 0.25
+    }
+  }
+});
+module.exports = __toCommonJS(Cursor_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/Cursor/Cursor.js

@@ -0,0 +1,103 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base } from "@studiometa/js-toolkit";
+import { damp, matrix } from "@studiometa/js-toolkit/utils";
+class Cursor extends Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "x", 0);
+    __publicField(this, "y", 0);
+    __publicField(this, "scale", 0);
+    __publicField(this, "pointerX", 0);
+    __publicField(this, "pointerY", 0);
+    __publicField(this, "pointerScale", 0);
+  }
+  mounted() {
+    this.x = 0;
+    this.y = 0;
+    this.scale = 0;
+    this.pointerX = 0;
+    this.pointerY = 0;
+    this.pointerScale = 0;
+    this.render({ x: this.x, y: this.y, scale: this.scale });
+  }
+  moved({ event, x, y, isDown }) {
+    if (!this.$services.has("ticked")) {
+      this.$services.enable("ticked");
+    }
+    this.pointerX = x;
+    this.pointerY = y;
+    let scale = 1;
+    if (!event) {
+      this.pointerScale = scale;
+      return;
+    }
+    const shouldGrow = event.target instanceof Element && event.target.matches(this.$options.growSelectors) || false;
+    const shouldReduce = isDown || event.target instanceof Element && event.target.matches(this.$options.shrinkSelectors) || false;
+    if (shouldGrow) {
+      scale = this.$options.growTo;
+    }
+    if (shouldReduce) {
+      scale = this.$options.shrinkTo;
+    }
+    this.pointerScale = scale;
+  }
+  ticked() {
+    this.x = damp(this.pointerX, this.x, this.$options.translateDampFactor);
+    this.y = damp(this.pointerY, this.y, this.$options.translateDampFactor);
+    this.scale = damp(this.pointerScale, this.scale, this.pointerScale < this.scale ? this.$options.shrinkDampFactor : this.$options.growDampFactor);
+    this.render({ x: this.x, y: this.y, scale: this.scale });
+    if (this.x === this.pointerX && this.y === this.pointerY && this.scale === this.pointerScale) {
+      this.$services.disable("ticked");
+    }
+  }
+  render({ x, y, scale }) {
+    const transform = matrix({
+      translateX: x,
+      translateY: y,
+      scaleX: scale,
+      scaleY: scale
+    });
+    this.$el.style.transform = `translateZ(0) ${transform}`;
+  }
+}
+__publicField(Cursor, "config", {
+  name: "Cursor",
+  options: {
+    growSelectors: {
+      type: String,
+      default: "a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *"
+    },
+    shrinkSelectors: {
+      type: String,
+      default: "[data-cursor-shrink], [data-cursor-shrink] *"
+    },
+    growTo: {
+      type: Number,
+      default: 2
+    },
+    shrinkTo: {
+      type: Number,
+      default: 0.5
+    },
+    translateDampFactor: {
+      type: Number,
+      default: 0.25
+    },
+    growDampFactor: {
+      type: Number,
+      default: 0.25
+    },
+    shrinkDampFactor: {
+      type: Number,
+      default: 0.25
+    }
+  }
+});
+export {
+  Cursor as default
+};

package/atoms/Figure/Figure.cjs

@@ -0,0 +1,53 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/Figure/Figure.js
+var Figure_exports = {};
+__export(Figure_exports, {
+  default: () => Figure
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { threshold: [0, 1] }) {
+  mounted() {
+    if (!this.$refs.img) {
+      throw new Error("[Figure] The `img` ref is required.");
+    }
+    if (!(this.$refs.img instanceof HTMLImageElement)) {
+      throw new Error("[Figure] The `img` ref must be an `<img>` element.");
+    }
+    if (this.$refs.img.hasAttribute("data-src")) {
+      this.$refs.img.src = this.$refs.img.getAttribute("data-src");
+    }
+  }
+};
+__publicField(Figure, "config", {
+  name: "Figure",
+  refs: ["img"]
+});
+module.exports = __toCommonJS(Figure_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/Figure/Figure.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @typedef {Object} FigureRefs
+ * @property {HTMLImageElement} img
+ */
+/**
+ * @typedef {Object} FigureInterface
+ * @property {FigureRefs} $refs
+ */
+/**
+ * Figure class.
+ *
+ * Manager lazyloading image sources.
+ */
+export default class Figure extends Base {
+    static config: {
+        name: string;
+        refs: string[];
+    };
+    /**
+     * Load on mount.
+     * @this {Figure & FigureInterface}
+     */
+    mounted(): void;
+}
+export type FigureRefs = {
+    img: HTMLImageElement;
+};
+export type FigureInterface = {
+    $refs: FigureRefs;
+};
+import { Base } from "@studiometa/js-toolkit";

package/atoms/Figure/Figure.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base, withMountWhenInView } from "@studiometa/js-toolkit";
+class Figure extends withMountWhenInView(Base, { threshold: [0, 1] }) {
+  mounted() {
+    if (!this.$refs.img) {
+      throw new Error("[Figure] The `img` ref is required.");
+    }
+    if (!(this.$refs.img instanceof HTMLImageElement)) {
+      throw new Error("[Figure] The `img` ref must be an `<img>` element.");
+    }
+    if (this.$refs.img.hasAttribute("data-src")) {
+      this.$refs.img.src = this.$refs.img.getAttribute("data-src");
+    }
+  }
+}
+__publicField(Figure, "config", {
+  name: "Figure",
+  refs: ["img"]
+});
+export {
+  Figure as default
+};

package/atoms/LargeText/LargeText.cjs

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/LargeText/LargeText.js
+var LargeText_exports = {};
+__export(LargeText_exports, {
+  default: () => LargeText
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { rootMargin: "50%" }) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "translateX", 0);
+    __publicField(this, "deltaY", 0);
+    __publicField(this, "transform", {
+      skewX: 0,
+      translateX: 0
+    });
+    __publicField(this, "width", 0);
+  }
+  mounted() {
+    this.width = this.$refs.target.clientWidth;
+  }
+  resized() {
+    this.width = this.$refs.target.clientWidth;
+  }
+  scrolled(props) {
+    this.deltaY = props.delta.y;
+  }
+  ticked() {
+    this.translateX -= Math.abs(this.deltaY) + 1;
+    this.transform.translateX = (0, import_utils.damp)(this.translateX, this.transform.translateX, 0.25);
+    this.transform.skewX = (0, import_utils.damp)((0, import_utils.clamp)(this.deltaY / 20 * -1, -0.5, 0.5), this.transform.skewX, 0.25);
+    if (Math.abs(this.transform.translateX) >= this.width) {
+      this.translateX = 0;
+      this.transform.translateX = 0;
+    }
+    (0, import_utils.nextFrame)(() => {
+      this.$refs.target.style.transform = (0, import_utils.matrix)(this.transform) + " translateZ(0px)";
+    });
+  }
+};
+__publicField(LargeText, "config", {
+  name: "LargeText",
+  refs: ["target"]
+});
+module.exports = __toCommonJS(LargeText_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/LargeText/LargeText.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @typedef {LargeText & { $refs: { target: HTMLElement } }} LargeTextInterface
+ */
+/**
+ * Large text class.
+ */
+export default class LargeText extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        refs: string[];
+    };
+    /**
+     * Translate X.
+     * @type {number}
+     */
+    translateX: number;
+    /**
+     * Scroll delta Y.
+     * @type {number}
+     */
+    deltaY: number;
+    /**
+     * Transform values.
+     */
+    transform: {
+        skewX: number;
+        translateX: number;
+    };
+    /**
+     * Target width.
+     * @type {number}
+     */
+    width: number;
+    /**
+     * Set width on mount.
+     *
+     * @this    {LargeTextInterface}
+     * @returns {void}
+     */
+    mounted(): void;
+    /**
+     * Set width on resize.
+     *
+     * @this    {LargeTextInterface}
+     * @returns {void}
+     */
+    resized(): void;
+    /**
+     * Update delta scroll on scroll.
+     *
+     * @param   {import('@studiometa/js-toolkit/services/scroll').ScrollServiceProps} props
+     * @returns {void}
+     */
+    scrolled(props: import('@studiometa/js-toolkit/services/scroll').ScrollServiceProps): void;
+    /**
+     * Update values on raf.
+     *
+     * @this    {LargeTextInterface}
+     * @returns {void}
+     */
+    ticked(): void;
+}
+export type LargeTextInterface = LargeText & {
+    $refs: {
+        target: HTMLElement;
+    };
+};
+import { Base } from "@studiometa/js-toolkit";