Merge branch 'release/2.0.0-beta.9'

Author: titouanmathis

README.md

@@ -15,80 +15,23 @@ Install the latest version via NPM:
 npm install @studiometa/js-toolkit
 ```
 
-## Concept
+## Documentation
 
-[] todo
+This project contains a JavaScript micro-framework and its utility functions whose main objectives are:
 
-## Usage
+- Enforcing best-practice and consistency between projects
+- Using elements from the DOM easily
+- Enabling custom behaviours on component initialization or other user events
+- Disabling custom behaviours on component destruction or other user events
+- Initializing components in the right place at the right time
+- Defining dependencies between components
 
-Import the `Base` class and extend it to create your components:
+Visit [js-toolkit.studiometa.dev](https://js-toolkit.studiometa.dev) to learn more.
 
-```js
-import { Base, createApp } from '@studiometa/js-toolkit';
+## Contributing
 
-class Component extends Base {
-  static config = {
-    name: 'Component',
-  }
+This projects follows the [Git Flow](https://github.com/petervanderdoes/gitflow-avh) methodology to manage its branches and features. The packages and their dependencies are managed with NPM workspaces. The files are linted with ESLint, type checked with TypeScript and formatted with Prettier.
 
-  sayHello() {
-    console.log('Hello!');
-  }
-}
+## License
 
-class App extends Base {
-  static config = {
-    name: 'App',
-    components: {
-      Component,
-    },
-    refs: ['btn', 'items[]'],
-    options: {
-      foo: String,
-      bar: { type: String, default: 'bar' },
-    }
-  };
-
-  mounted() {
-    this.$log('mounted');
-
-    // Options
-    this.$options.name; // 'App'
-    this.$options.log; // true
-    this.$options.debug; // false
-    this.$options.foo // ''
-    this.$options.bar // 'bar'
-
-    // Children
-    this.$children.Component; // Array<Component>
-
-    // DOM references
-    this.$refs.btn; // <button data-ref="btn"></button>
-    this.$refs.items[0]; // <li data-ref="items[]"></li>
-  }
-
-  destroyed() {
-    this.$log('destroyed');
-  }
-
-  scrolled(props) {
-    this.$log('scrolled', props);
-  }
-
-  resized(props) {
-    this.$log('resized', props);
-  }
-}
-
-export default createApp(App, document.body);
-```
-
-Read the [documentation](https://js-toolkit.studiometa.dev/) to learn more.
-
-## Contribution
-
-This projects follows the [Git Flow](https://github.com/petervanderdoes/gitflow-avh) methodology to manage its branches and features.
-
-The packages from this project are managed with NPM workspaces.
-
-The files are linted with ESLint, type checked with TypeScript and formatted with Prettier.
+See [LICENSE](./LICENSE).

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-workspace",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.9",
   "private": true,
   "workspaces": [
     "packages/*"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-demo",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.9",
   "private": true,
   "type": "commonjs",
   "scripts": {

packages/demo/package.json

@@ -231,7 +231,10 @@ function getUtilsSidebar() {
       children: [
         { text: 'clamp', link: '/utils/math/clamp.html' },
         { text: 'clamp01', link: '/utils/math/clamp01.html' },
+        { text: 'createEaseInOut', link: '/utils/math/createEaseInOut.html' },
+        { text: 'createEaseOut', link: '/utils/math/createEaseOut.html' },
         { text: 'damp', link: '/utils/math/damp.html' },
+        { text: 'ease', link: '/utils/math/ease.html' },
         { text: 'inertiaFinalValue', link: '/utils/math/inertiaFinalValue.html' },
         { text: 'lerp', link: '/utils/math/lerp.html' },
         { text: 'map', link: '/utils/math/map.html' },

packages/docs/.vitepress/config.js

@@ -1,3 +1,5 @@
+@import 'tailwindcss/utilities';
+
 h3 + h4 {
   margin-top: 1.5rem;
 }

packages/docs/.vitepress/theme/custom.scss

@@ -4,7 +4,29 @@ Use this decorator to create a component that will have the capacity to switch c
 
 ## Usage
 
-<label><input type="checkbox">todo</label>
+```js{5-8}
+import { Base, withBreakpointManager } from '@studiometa/js-toolkit';
+import MenuMobile from './MenuMobile';
+import MenuDesktop from './MenuDesktop';
+
+export default class Menu extends withBreakpointManager(Base, [
+  ['xxs xs s', MenuMobile],
+  ['m l xl xxl', MenuDesktop],
+]) {
+  static config = {
+    name: 'Menu',
+  };
+}
+```
+
+### Parameters
+
+- `Base` (`BaseConstructor`): The `Base` class or a class extending it.
+- `options` (`Array<[string, BaseConstructor]>`): Definition for the components to be used for each breakpoints
+
+### Return value
+
+- `BaseConstructor`: A child class of the given class which will mount the given components based on the current active breakpoint
 
 ## Examples
 

packages/docs/api/decorators/withBreakpointManager.md

@@ -4,7 +4,29 @@ Use this decorator to create a class that will have the capacity to be mounted o
 
 ## Usage
 
-<label><input type="checkbox">todo</label>
+```js{1,3,7-10}
+import { Base, withBreakpointObserver } from '@studiometa/js-toolkit';
+
+export default class MobileComponent extends withBreakpointObserver(Base) {
+  static config = {
+    name: 'MobileComponent',
+    options: {
+      activeBreakpoints: {
+        type: String,
+        default: 'xxs xs s',
+      },
+    },
+  };
+}
+```
+
+### Parameters
+
+- `Base` (`BaseConstructor`): The `Base` class or a class extending it.
+
+### Return value
+
+- `BaseConstructor`: A child class of the given class which will be mounted when visible and destroyed when invisible.
 
 ## Examples
 

packages/docs/api/decorators/withBreakpointObserver.md

@@ -4,7 +4,28 @@ Use this decorator to create a class that will have the capacity to trigger an `
 
 ## Usage
 
-<label><input type="checkbox">todo</label>
+```js {1,3,8-10}
+import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';
+
+class Component extends withIntersectionObserver(Base, { rootMargin: '100%' }) {
+  static config = {
+    name: 'Component',
+  };
+
+  intersected(entries) {
+    // do something with `entries`
+  }
+}
+```
+
+### Parameters
+
+- `Base` (`BaseConstructor`): The `Base` class or a class extending it.
+- `options` (`IntersectionObserverInit`): Options for the `IntersectionObserver` instance.
+
+### Return value
+
+- `BaseConstructor`: A child class of the given class which will trigger an `intersected` hook when visible.
 
 ## API
 

packages/docs/api/decorators/withIntersectionObserver.md

@@ -13,12 +13,12 @@ export default withMountWhenInView(Component, { threshold: [0, 1] });
 
 ### Parameters
 
-- `BaseClass` (`Base`): The Base class to mount when in view.
-- `intersectionObserverOptions` (`IntersectionObserverInit`): Options for the `IntersectionObserver` instance.
+- `Base` (`BaseConstructor`): The `Base` class or a class extending it.
+- `options` (`IntersectionObserverInit`): Options for the `IntersectionObserver` instance.
 
 ### Return value
 
-- `Base`: A child class of the given class which will be mounted when visible and destroyed when invisible
+- `BaseConstructor`: A child class of the given class which will be mounted when visible and destroyed when invisible.
 
 ## API