@lumx/core 3.19.0 → 3.19.1-alpha.1

package/js/{utils.js → utils/index.js}

@@ -2,75 +2,65 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var classNames = require('classnames');
-var isBoolean = require('lodash/isBoolean');
-var isEmpty = require('lodash/isEmpty');
-var kebabCase = require('lodash/kebabCase');
 var noop = require('lodash/noop');
+var js_utils_className_handleBasicClasses = require('./className/handleBasicClasses.js');
+var js_utils_className_getBasicClass = require('./className/getBasicClass.js');
+var js_utils_className_getRootClassName = require('./className/getRootClassName.js');
+var js_utils_className_getTypographyClassName = require('./className/getTypographyClassName.js');
+var js_utils_className_fontColorClass = require('./className/fontColorClass.js');
+var js_utils_className_resolveColorWithVariants = require('./className/resolveColorWithVariants.js');
+require('classnames');
+require('lodash/isBoolean');
+require('lodash/isEmpty');
+require('lodash/kebabCase');
+require('../constants/index.js');
+require('../constants/keycodes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
-var isBoolean__default = /*#__PURE__*/_interopDefaultLegacy(isBoolean);
-var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
-var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);
 var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
 
 /**
- * Enhance isEmpty method to also works with numbers.
+ * Make sure the pressed key is the enter key before calling the callback.
  *
- * @param  value The value to check.
- * @return Whether the input value is empty or != 0.
+ * @param  handler The handler to call on enter/return press.
+ * @return The decorated function.
  */
-const _isEmpty = (value) => {
-    if (typeof value === 'number') {
-        return value === 0;
-    }
-    return isEmpty__default["default"](value);
-};
+function onEnterPressed(handler) {
+    return (evt) => {
+        if (evt.key !== 'Enter') {
+            return;
+        }
+        handler(evt);
+    };
+}
 /**
- * Get the basic CSS class for the given type.
+ * Make sure the pressed key is the escape key before calling the callback.
  *
- * @param  prefix The class name prefix for the generated CSS class.
- * @param  type   The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
- * @param  value  The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
- * @return The basic CSS class.
+ * @param  handler The handler to call on enter/return press.
+ * @return The decorated function.
  */
-function getBasicClass({ prefix, type, value, }) {
-    if (isBoolean__default["default"](value)) {
-        if (!value) {
-            // False value should not return a class.
-            return '';
-        }
-        const booleanPrefixes = ['has', 'is'];
-        if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {
-            return `${prefix}--${kebabCase__default["default"](type)}`;
+function onEscapePressed(handler) {
+    return (evt) => {
+        if (evt.key !== 'Escape') {
+            return;
         }
-        return `${prefix}--is-${kebabCase__default["default"](type)}`;
-    }
-    return `${prefix}--${kebabCase__default["default"](type)}-${value}`;
+        handler(evt);
+    };
 }
 /**
- * Return all basic LumX CSS classes which are available for every components.
- *
- * @see {@link /src/components/index.d.ts} for the possible values of each parameter.
+ * Handle button key pressed (Enter + Space).
  *
- * @param  prefix The class name prefix for the generated CSS class.
- * @param  props  All the other props you want to generate a class.
- *                The rule of thumb: the key is the name of the prop in the class, the value a string that will
- *                be used in the classname to represent the value of the given prop.
- * @return All LumX basic CSS classes.
+ * @param  handler The handler to call.
+ * @return The decorated function.
  */
-function handleBasicClasses({ prefix, ...props }) {
-    const otherClasses = {};
-    if (!isEmpty__default["default"](props)) {
-        Object.keys(props).forEach((prop) => {
-            otherClasses[getBasicClass({ prefix, type: prop, value: props[prop] })] = isBoolean__default["default"](props[prop])
-                ? props[prop]
-                : !_isEmpty(props[prop]);
-        });
-    }
-    return classNames__default["default"](prefix, otherClasses);
+function onButtonPressed(handler) {
+    return (evt) => {
+        if (evt.key !== 'Enter' && evt.key !== ' ') {
+            return;
+        }
+        handler(evt);
+    };
 }
 /**
  * Detects swipe direction.
@@ -219,53 +209,15 @@ function detectHorizontalSwipe(touchSurface, handleSwipe) {
         touchSurface.removeEventListener('touchmove', onTouchMove, eventOptions);
     };
 }
-/**
- * Make sure the pressed key is the enter key before calling the callback.
- *
- * @param  handler The handler to call on enter/return press.
- * @return The decorated function.
- */
-function onEnterPressed(handler) {
-    return (evt) => {
-        if (evt.key !== 'Enter') {
-            return;
-        }
-        handler(evt);
-    };
-}
-/**
- * Make sure the pressed key is the escape key before calling the callback.
- *
- * @param  handler The handler to call on enter/return press.
- * @return The decorated function.
- */
-function onEscapePressed(handler) {
-    return (evt) => {
-        if (evt.key !== 'Escape') {
-            return;
-        }
-        handler(evt);
-    };
-}
-/**
- * Handle button key pressed (Enter + Space).
- *
- * @param  handler The handler to call.
- * @return The decorated function.
- */
-function onButtonPressed(handler) {
-    return (evt) => {
-        if (evt.key !== 'Enter' && evt.key !== ' ') {
-            return;
-        }
-        handler(evt);
-    };
-}
 
+exports.handleBasicClasses = js_utils_className_handleBasicClasses.handleBasicClasses;
+exports.getBasicClass = js_utils_className_getBasicClass.getBasicClass;
+exports.getRootClassName = js_utils_className_getRootClassName.getRootClassName;
+exports.getTypographyClassName = js_utils_className_getTypographyClassName.getTypographyClassName;
+exports.fontColorClass = js_utils_className_fontColorClass.fontColorClass;
+exports.resolveColorWithVariants = js_utils_className_resolveColorWithVariants.resolveColorWithVariants;
 exports.detectHorizontalSwipe = detectHorizontalSwipe;
 exports.detectSwipe = detectSwipe;
-exports.getBasicClass = getBasicClass;
-exports.handleBasicClasses = handleBasicClasses;
 exports.onButtonPressed = onButtonPressed;
 exports.onEnterPressed = onEnterPressed;
 exports.onEscapePressed = onEscapePressed;

package/js/utils/index.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lodash/noop"),t=require("./className/handleBasicClasses.min.js"),s=require("./className/getBasicClass.min.js"),r=require("./className/getRootClassName.min.js"),a=require("./className/getTypographyClassName.min.js"),n=require("./className/fontColorClass.min.js"),o=require("./className/resolveColorWithVariants.min.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("classnames"),require("lodash/isBoolean"),require("lodash/isEmpty"),require("lodash/kebabCase"),require("../constants/index.min.js"),require("../constants/keycodes.min.js");var u=i(e);exports.handleBasicClasses=t.handleBasicClasses,exports.getBasicClass=s.getBasicClass,exports.getRootClassName=r.getRootClassName,exports.getTypographyClassName=a.getTypographyClassName,exports.fontColorClass=n.fontColorClass,exports.resolveColorWithVariants=o.resolveColorWithVariants,exports.detectHorizontalSwipe=function(e,t){let s,r,a,n,o;const i=e=>{const[t]=Array.from(e.changedTouches);s=t.pageX,r=t.pageY,n=(new Date).getTime(),o=!1},c=e=>{if(o)return;if(a=(new Date).getTime()-n,a>300)return;const[i]=Array.from(e.changedTouches),u=i.pageX-s,c=i.pageY-r;if(!(Math.abs(u)>=150&&Math.abs(c)<=150))return;t(u<0?"left":"right"),o=!0},l=!!function(){let e=!1;try{const t=Object.defineProperty({},"passive",{get(){e=!0}});window.addEventListener("testPassiveEventSupport",u.default,t),window.removeEventListener("testPassiveEventSupport",u.default,t)}catch(e){}return e}()&&{passive:!0};return e.addEventListener("touchstart",i,l),e.addEventListener("touchmove",c,l),()=>{e.removeEventListener("touchstart",i,l),e.removeEventListener("touchmove",c,l)}},exports.detectSwipe=function(e,t=u.default){let s,r,a,n,o,i,c;const l=e=>{const[t]=Array.from(e.changedTouches);o="none",a=t.pageX,n=t.pageY,c=(new Date).getTime(),e.preventDefault()},p=e=>{e.preventDefault()},d=e=>{const[u]=Array.from(e.changedTouches);s=u.pageX-a,r=u.pageY-n,i=(new Date).getTime()-c,i<=300&&(Math.abs(s)>=150&&Math.abs(r)<=100?o=s<0?"left":"right":Math.abs(r)>=150&&Math.abs(s)<=100&&(o=r<0?"up":"down")),t(o),e.preventDefault()};return e.addEventListener("touchstart",l,!1),e.addEventListener("touchmove",p,!1),e.addEventListener("touchend",d,!1),()=>{e.removeEventListener("touchstart",l,!1),e.removeEventListener("touchmove",p,!1),e.removeEventListener("touchend",d,!1)}},exports.onButtonPressed=function(e){return t=>{"Enter"!==t.key&&" "!==t.key||e(t)}},exports.onEnterPressed=function(e){return t=>{"Enter"===t.key&&e(t)}},exports.onEscapePressed=function(e){return t=>{"Escape"===t.key&&e(t)}};

package/js/{utils.ts → utils/index.ts}

@@ -1,82 +1,60 @@
-import classNames from 'classnames';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import React from 'react';
+import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
 
-import isBoolean from 'lodash/isBoolean';
-import isEmpty from 'lodash/isEmpty';
-import kebabCase from 'lodash/kebabCase';
 import noop from 'lodash/noop';
 
-/**
- * Enhance isEmpty method to also works with numbers.
- *
- * @param  value The value to check.
- * @return Whether the input value is empty or != 0.
- */
-const _isEmpty = (value: any) => {
-    if (typeof value === 'number') {
-        return value === 0;
-    }
+export * from './className';
 
-    return isEmpty(value);
-};
+type KeyboardEventHandler<E extends KeyboardEvent | ReactKeyboardEvent> = (event: E) => void;
 
 /**
- * Get the basic CSS class for the given type.
+ * Make sure the pressed key is the enter key before calling the callback.
  *
- * @param  prefix The class name prefix for the generated CSS class.
- * @param  type   The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
- * @param  value  The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
- * @return The basic CSS class.
+ * @param  handler The handler to call on enter/return press.
+ * @return The decorated function.
  */
-export function getBasicClass({
-    prefix,
-    type,
-    value,
-}: {
-    prefix: string;
-    type: string;
-    value: string | number | boolean | undefined;
-}): string {
-    if (isBoolean(value)) {
-        if (!value) {
-            // False value should not return a class.
-            return '';
+export function onEnterPressed<E extends KeyboardEvent | ReactKeyboardEvent>(
+    handler: KeyboardEventHandler<E>,
+): KeyboardEventHandler<E> {
+    return (evt) => {
+        if (evt.key !== 'Enter') {
+            return;
         }
-        const booleanPrefixes = ['has', 'is'];
+        handler(evt);
+    };
+}
 
-        if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {
-            return `${prefix}--${kebabCase(type)}`;
+/**
+ * Make sure the pressed key is the escape key before calling the callback.
+ *
+ * @param  handler The handler to call on enter/return press.
+ * @return The decorated function.
+ */
+export function onEscapePressed<E extends KeyboardEvent | ReactKeyboardEvent>(
+    handler: KeyboardEventHandler<E>,
+): KeyboardEventHandler<E> {
+    return (evt) => {
+        if (evt.key !== 'Escape') {
+            return;
         }
-
-        return `${prefix}--is-${kebabCase(type)}`;
-    }
-
-    return `${prefix}--${kebabCase(type)}-${value}`;
+        handler(evt);
+    };
 }
 
 /**
- * Return all basic LumX CSS classes which are available for every components.
- *
- * @see {@link /src/components/index.d.ts} for the possible values of each parameter.
+ * Handle button key pressed (Enter + Space).
  *
- * @param  prefix The class name prefix for the generated CSS class.
- * @param  props  All the other props you want to generate a class.
- *                The rule of thumb: the key is the name of the prop in the class, the value a string that will
- *                be used in the classname to represent the value of the given prop.
- * @return All LumX basic CSS classes.
+ * @param  handler The handler to call.
+ * @return The decorated function.
  */
-export function handleBasicClasses({ prefix, ...props }: { prefix: string; [prop: string]: any }): string {
-    const otherClasses: any = {};
-    if (!isEmpty(props)) {
-        Object.keys(props).forEach((prop) => {
-            otherClasses[getBasicClass({ prefix, type: prop, value: props[prop] })] = isBoolean(props[prop])
-                ? props[prop]
-                : !_isEmpty(props[prop]);
-        });
-    }
-
-    return classNames(prefix, otherClasses);
+export function onButtonPressed<E extends KeyboardEvent | ReactKeyboardEvent>(
+    handler: KeyboardEventHandler<E>,
+): KeyboardEventHandler<E> {
+    return (evt) => {
+        if (evt.key !== 'Enter' && evt.key !== ' ') {
+            return;
+        }
+        handler(evt);
+    };
 }
 
 declare type SwipeDirection = 'none' | 'up' | 'down' | 'left' | 'right';
@@ -241,56 +219,3 @@ export function detectHorizontalSwipe(touchSurface: Element, handleSwipe: (direc
         touchSurface.removeEventListener('touchmove', onTouchMove, eventOptions);
     };
 }
-
-type KeyboardEventHandler<E extends KeyboardEvent | React.KeyboardEvent> = (event: E) => void;
-
-/**
- * Make sure the pressed key is the enter key before calling the callback.
- *
- * @param  handler The handler to call on enter/return press.
- * @return The decorated function.
- */
-export function onEnterPressed<E extends KeyboardEvent | React.KeyboardEvent>(
-    handler: KeyboardEventHandler<E>,
-): KeyboardEventHandler<E> {
-    return (evt) => {
-        if (evt.key !== 'Enter') {
-            return;
-        }
-        handler(evt);
-    };
-}
-
-/**
- * Make sure the pressed key is the escape key before calling the callback.
- *
- * @param  handler The handler to call on enter/return press.
- * @return The decorated function.
- */
-export function onEscapePressed<E extends KeyboardEvent | React.KeyboardEvent>(
-    handler: KeyboardEventHandler<E>,
-): KeyboardEventHandler<E> {
-    return (evt) => {
-        if (evt.key !== 'Escape') {
-            return;
-        }
-        handler(evt);
-    };
-}
-
-/**
- * Handle button key pressed (Enter + Space).
- *
- * @param  handler The handler to call.
- * @return The decorated function.
- */
-export function onButtonPressed<E extends KeyboardEvent | React.KeyboardEvent>(
-    handler: KeyboardEventHandler<E>,
-): KeyboardEventHandler<E> {
-    return (evt) => {
-        if (evt.key !== 'Enter' && evt.key !== ' ') {
-            return;
-        }
-        handler(evt);
-    };
-}

package/package.json

@@ -33,11 +33,12 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "3.19.0",
+    "version": "3.19.1-alpha.1",
     "devDependencies": {
         "@rollup/plugin-commonjs": "^19.0.2",
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^12.1.4",
+        "@types/react": "^17.0.2",
         "autoprefixer": "^9.7.4",
         "glob": "^7.1.6",
         "postcss": "^8.5.6",

package/js/utils.min.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("classnames"),t=require("lodash/isBoolean"),r=require("lodash/isEmpty"),n=require("lodash/kebabCase"),a=require("lodash/noop");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=s(e),u=s(t),i=s(r),c=s(n),d=s(a);function f({prefix:e,type:t,value:r}){if(u.default(r)){if(!r)return"";return["has","is"].some(e=>t.toString().startsWith(e))?`${e}--${c.default(t)}`:`${e}--is-${c.default(t)}`}return`${e}--${c.default(t)}-${r}`}exports.detectHorizontalSwipe=function(e,t){let r,n,a,s,o;const u=e=>{const[t]=Array.from(e.changedTouches);r=t.pageX,n=t.pageY,s=(new Date).getTime(),o=!1},i=e=>{if(o)return;if(a=(new Date).getTime()-s,a>300)return;const[u]=Array.from(e.changedTouches),i=u.pageX-r,c=u.pageY-n;if(!(Math.abs(i)>=150&&Math.abs(c)<=150))return;t(i<0?"left":"right"),o=!0},c=!!function(){let e=!1;try{const t=Object.defineProperty({},"passive",{get(){e=!0}});window.addEventListener("testPassiveEventSupport",d.default,t),window.removeEventListener("testPassiveEventSupport",d.default,t)}catch(e){}return e}()&&{passive:!0};return e.addEventListener("touchstart",u,c),e.addEventListener("touchmove",i,c),()=>{e.removeEventListener("touchstart",u,c),e.removeEventListener("touchmove",i,c)}},exports.detectSwipe=function(e,t=d.default){let r,n,a,s,o,u,i;const c=e=>{const[t]=Array.from(e.changedTouches);o="none",a=t.pageX,s=t.pageY,i=(new Date).getTime(),e.preventDefault()},f=e=>{e.preventDefault()},p=e=>{const[c]=Array.from(e.changedTouches);r=c.pageX-a,n=c.pageY-s,u=(new Date).getTime()-i,u<=300&&(Math.abs(r)>=150&&Math.abs(n)<=100?o=r<0?"left":"right":Math.abs(n)>=150&&Math.abs(r)<=100&&(o=n<0?"up":"down")),t(o),e.preventDefault()};return e.addEventListener("touchstart",c,!1),e.addEventListener("touchmove",f,!1),e.addEventListener("touchend",p,!1),()=>{e.removeEventListener("touchstart",c,!1),e.removeEventListener("touchmove",f,!1),e.removeEventListener("touchend",p,!1)}},exports.getBasicClass=f,exports.handleBasicClasses=function({prefix:e,...t}){const r={};return i.default(t)||Object.keys(t).forEach(n=>{var a;r[f({prefix:e,type:n,value:t[n]})]=u.default(t[n])?t[n]:!("number"==typeof(a=t[n])?0===a:i.default(a))}),o.default(e,r)},exports.onButtonPressed=function(e){return t=>{"Enter"!==t.key&&" "!==t.key||e(t)}},exports.onEnterPressed=function(e){return t=>{"Enter"===t.key&&e(t)}},exports.onEscapePressed=function(e){return t=>{"Escape"===t.key&&e(t)}};