@lumx/core 3.20.1-alpha.2 → 3.20.1-alpha.20

package/js/utils/index.js

@@ -1,24 +1,16 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-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 noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
+import noop from 'lodash/noop';
+export { handleBasicClasses } from './className/handleBasicClasses.js';
+export { getBasicClass } from './className/getBasicClass.js';
+export { getRootClassName } from './className/getRootClassName.js';
+export { getTypographyClassName } from './className/getTypographyClassName.js';
+export { fontColorClass } from './className/fontColorClass.js';
+export { resolveColorWithVariants } from './className/resolveColorWithVariants.js';
+import 'classnames';
+import 'lodash/isBoolean';
+import 'lodash/isEmpty';
+import 'lodash/kebabCase';
+import '../constants/index.js';
+import '../constants/keycodes.js';
 
 /**
  * Make sure the pressed key is the enter key before calling the callback.
@@ -27,13 +19,14 @@ var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
  * @return The decorated function.
  */
 function onEnterPressed(handler) {
-    return (evt) => {
-        if (evt.key !== 'Enter') {
-            return;
-        }
-        handler(evt);
-    };
+  return evt => {
+    if (evt.key !== 'Enter') {
+      return;
+    }
+    handler(evt);
+  };
 }
+
 /**
  * Make sure the pressed key is the escape key before calling the callback.
  *
@@ -41,13 +34,14 @@ function onEnterPressed(handler) {
  * @return The decorated function.
  */
 function onEscapePressed(handler) {
-    return (evt) => {
-        if (evt.key !== 'Escape') {
-            return;
-        }
-        handler(evt);
-    };
+  return evt => {
+    if (evt.key !== 'Escape') {
+      return;
+    }
+    handler(evt);
+  };
 }
+
 /**
  * Handle button key pressed (Enter + Space).
  *
@@ -55,12 +49,12 @@ function onEscapePressed(handler) {
  * @return The decorated function.
  */
 function onButtonPressed(handler) {
-    return (evt) => {
-        if (evt.key !== 'Enter' && evt.key !== ' ') {
-            return;
-        }
-        handler(evt);
-    };
+  return evt => {
+    if (evt.key !== 'Enter' && evt.key !== ' ') {
+      return;
+    }
+    handler(evt);
+  };
 }
 /**
  * Detects swipe direction.
@@ -71,153 +65,146 @@ function onButtonPressed(handler) {
  * @param  handleSwipe Callback function.
  * @return Function to remove listeners.
  */
-function detectSwipe(touchSurface, handleSwipe = noop__default["default"]) {
-    let distX;
-    let distY;
-    let startX;
-    let startY;
-    let direction;
-    // Required min distance traveled to be considered swipe.
-    const threshold = 150;
-    // Maximum distance allowed at the same time in perpendicular direction.
-    const restraint = 100;
-    // Maximum time allowed to travel that distance.
-    const allowedTime = 300;
-    let elapsedTime;
-    let startTime;
-    const onTouchStart = (evt) => {
-        const [touch] = Array.from(evt.changedTouches);
-        direction = 'none';
-        // Const dist = 0;
-        startX = touch.pageX;
-        startY = touch.pageY;
-        // Record time when finger first makes contact with surface.
-        startTime = new Date().getTime();
-        evt.preventDefault();
-    };
-    const onTouchMove = (evt) => {
-        // Prevent scrolling when inside DIV.
-        evt.preventDefault();
-    };
-    const onTouchEnd = (evt) => {
-        const [touch] = Array.from(evt.changedTouches);
-        // Get horizontal dist traveled by finger while in contact with surface.
-        distX = touch.pageX - startX;
-        // Get vertical dist traveled by finger while in contact with surface.
-        distY = touch.pageY - startY;
-        // Get time elapsed.
-        elapsedTime = new Date().getTime() - startTime;
-        if (elapsedTime <= allowedTime) {
-            // First condition for awipe met.
-            if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
-                // 2nd condition for horizontal swipe met.
-                // If dist traveled is negative, it indicates left swipe.
-                direction = distX < 0 ? 'left' : 'right';
-            }
-            else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
-                // 2nd condition for vertical swipe met.
-                // If dist traveled is negative, it indicates up swipe.
-                direction = distY < 0 ? 'up' : 'down';
-            }
-        }
-        handleSwipe(direction);
-        evt.preventDefault();
-    };
-    touchSurface.addEventListener('touchstart', onTouchStart, false);
-    touchSurface.addEventListener('touchmove', onTouchMove, false);
-    touchSurface.addEventListener('touchend', onTouchEnd, false);
-    return () => {
-        touchSurface.removeEventListener('touchstart', onTouchStart, false);
-        touchSurface.removeEventListener('touchmove', onTouchMove, false);
-        touchSurface.removeEventListener('touchend', onTouchEnd, false);
-    };
+function detectSwipe(touchSurface, handleSwipe = noop) {
+  let distX;
+  let distY;
+  let startX;
+  let startY;
+  let direction;
+  // Required min distance traveled to be considered swipe.
+  const threshold = 150;
+  // Maximum distance allowed at the same time in perpendicular direction.
+  const restraint = 100;
+  // Maximum time allowed to travel that distance.
+  const allowedTime = 300;
+  let elapsedTime;
+  let startTime;
+  const onTouchStart = evt => {
+    const [touch] = Array.from(evt.changedTouches);
+    direction = 'none';
+    // Const dist = 0;
+    startX = touch.pageX;
+    startY = touch.pageY;
+    // Record time when finger first makes contact with surface.
+    startTime = new Date().getTime();
+    evt.preventDefault();
+  };
+  const onTouchMove = evt => {
+    // Prevent scrolling when inside DIV.
+    evt.preventDefault();
+  };
+  const onTouchEnd = evt => {
+    const [touch] = Array.from(evt.changedTouches);
+    // Get horizontal dist traveled by finger while in contact with surface.
+    distX = touch.pageX - startX;
+    // Get vertical dist traveled by finger while in contact with surface.
+    distY = touch.pageY - startY;
+    // Get time elapsed.
+    elapsedTime = new Date().getTime() - startTime;
+    if (elapsedTime <= allowedTime) {
+      // First condition for awipe met.
+      if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
+        // 2nd condition for horizontal swipe met.
+        // If dist traveled is negative, it indicates left swipe.
+        direction = distX < 0 ? 'left' : 'right';
+      } else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
+        // 2nd condition for vertical swipe met.
+        // If dist traveled is negative, it indicates up swipe.
+        direction = distY < 0 ? 'up' : 'down';
+      }
+    }
+    handleSwipe(direction);
+    evt.preventDefault();
+  };
+  touchSurface.addEventListener('touchstart', onTouchStart, false);
+  touchSurface.addEventListener('touchmove', onTouchMove, false);
+  touchSurface.addEventListener('touchend', onTouchEnd, false);
+  return () => {
+    touchSurface.removeEventListener('touchstart', onTouchStart, false);
+    touchSurface.removeEventListener('touchmove', onTouchMove, false);
+    touchSurface.removeEventListener('touchend', onTouchEnd, false);
+  };
 }
+
 /**
  * Checks whether or not the browser support passive events.
  * @see https://github.com/Modernizr/Modernizr/blob/6d56d814b9682843313b16060adb25a58d83a317/feature-detects/dom/passiveeventlisteners.js
  */
 function isPassiveEventAvailable() {
-    let supportsPassiveOption = false;
-    try {
-        const opts = Object.defineProperty({}, 'passive', {
-            get() {
-                supportsPassiveOption = true;
-            },
-        });
-        window.addEventListener('testPassiveEventSupport', noop__default["default"], opts);
-        window.removeEventListener('testPassiveEventSupport', noop__default["default"], opts);
-    }
-    catch (e) {
-        // ignored
-    }
-    return supportsPassiveOption;
+  let supportsPassiveOption = false;
+  try {
+    const opts = Object.defineProperty({}, 'passive', {
+      get() {
+        supportsPassiveOption = true;
+      }
+    });
+    window.addEventListener('testPassiveEventSupport', noop, opts);
+    window.removeEventListener('testPassiveEventSupport', noop, opts);
+  } catch (e) {
+    // ignored
+  }
+  return supportsPassiveOption;
 }
+
 /**
  * Detects horizontal swipe direction without blocking the browser scroll using passive event.
  * @see http://javascriptkit.com/javatutors/touchevents2.shtml
  * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
  */
 function detectHorizontalSwipe(touchSurface, handleSwipe) {
-    let startX;
-    let startY;
-    // Required min distance traveled to be considered swipe.
-    const threshold = 150;
-    // Maximum distance allowed at the same time in perpendicular direction.
-    const restraint = 150;
-    // Maximum time allowed to travel that distance.
-    const allowedTime = 300;
-    let elapsedTime;
-    let startTime;
-    let finished;
-    const onTouchStart = (evt) => {
-        const [touch] = Array.from(evt.changedTouches);
-        startX = touch.pageX;
-        startY = touch.pageY;
-        // Record time when finger first makes contact with surface.
-        startTime = new Date().getTime();
-        finished = false;
-    };
-    const onTouchMove = (evt) => {
-        if (finished) {
-            return;
-        }
-        elapsedTime = new Date().getTime() - startTime;
-        if (elapsedTime > allowedTime) {
-            // Touch swipe too long to be considered.
-            return;
-        }
-        const [touch] = Array.from(evt.changedTouches);
-        // Get horizontal dist traveled by finger while in contact with surface.
-        const distX = touch.pageX - startX;
-        // Get vertical dist traveled by finger while in contact with surface.
-        const distY = touch.pageY - startY;
-        if (!(Math.abs(distX) >= threshold && Math.abs(distY) <= restraint)) {
-            // Swipe is not horizontal.
-            return;
-        }
-        // Swipe direction.
-        const direction = distX < 0 ? 'left' : 'right';
-        handleSwipe(direction);
-        finished = true;
-    };
-    // Activate passive event if possible for better scrolling performance.
-    const eventOptions = isPassiveEventAvailable() ? { passive: true } : false;
-    touchSurface.addEventListener('touchstart', onTouchStart, eventOptions);
-    touchSurface.addEventListener('touchmove', onTouchMove, eventOptions);
-    return () => {
-        touchSurface.removeEventListener('touchstart', onTouchStart, eventOptions);
-        touchSurface.removeEventListener('touchmove', onTouchMove, eventOptions);
-    };
+  let startX;
+  let startY;
+  // Required min distance traveled to be considered swipe.
+  const threshold = 150;
+  // Maximum distance allowed at the same time in perpendicular direction.
+  const restraint = 150;
+  // Maximum time allowed to travel that distance.
+  const allowedTime = 300;
+  let elapsedTime;
+  let startTime;
+  let finished;
+  const onTouchStart = evt => {
+    const [touch] = Array.from(evt.changedTouches);
+    startX = touch.pageX;
+    startY = touch.pageY;
+    // Record time when finger first makes contact with surface.
+    startTime = new Date().getTime();
+    finished = false;
+  };
+  const onTouchMove = evt => {
+    if (finished) {
+      return;
+    }
+    elapsedTime = new Date().getTime() - startTime;
+    if (elapsedTime > allowedTime) {
+      // Touch swipe too long to be considered.
+      return;
+    }
+    const [touch] = Array.from(evt.changedTouches);
+    // Get horizontal dist traveled by finger while in contact with surface.
+    const distX = touch.pageX - startX;
+    // Get vertical dist traveled by finger while in contact with surface.
+    const distY = touch.pageY - startY;
+    if (!(Math.abs(distX) >= threshold && Math.abs(distY) <= restraint)) {
+      // Swipe is not horizontal.
+      return;
+    }
+    // Swipe direction.
+    const direction = distX < 0 ? 'left' : 'right';
+    handleSwipe(direction);
+    finished = true;
+  };
+
+  // Activate passive event if possible for better scrolling performance.
+  const eventOptions = isPassiveEventAvailable() ? {
+    passive: true
+  } : false;
+  touchSurface.addEventListener('touchstart', onTouchStart, eventOptions);
+  touchSurface.addEventListener('touchmove', onTouchMove, eventOptions);
+  return () => {
+    touchSurface.removeEventListener('touchstart', onTouchStart, eventOptions);
+    touchSurface.removeEventListener('touchmove', onTouchMove, eventOptions);
+  };
 }
 
-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.onButtonPressed = onButtonPressed;
-exports.onEnterPressed = onEnterPressed;
-exports.onEscapePressed = onEscapePressed;
+export { detectHorizontalSwipe, detectSwipe, onButtonPressed, onEnterPressed, onEscapePressed };

package/package.json

@@ -6,7 +6,6 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "^3.20.1-alpha.2",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.21",
@@ -20,6 +19,7 @@
         "LumX"
     ],
     "license": "MIT",
+    "type": "module",
     "name": "@lumx/core",
     "publishConfig": {
         "directory": "dist"
@@ -34,18 +34,16 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.2",
+    "version": "3.20.1-alpha.20",
     "devDependencies": {
+        "@babel/preset-typescript": "^7.26.0",
+        "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-commonjs": "^19.0.2",
-        "@rollup/plugin-terser": "^0.4.4",
-        "@rollup/plugin-typescript": "^12.1.4",
-        "@testing-library/dom": "^9.3.4",
-        "@testing-library/jest-dom": "^5.16.4",
+        "@rollup/plugin-node-resolve": "16.0.0",
         "@types/react": "^17.0.2",
         "autoprefixer": "^9.7.4",
         "glob": "^7.1.6",
         "postcss": "^8.5.6",
-        "react": "^17.0.2",
         "rollup": "^2.79.1",
         "rollup-plugin-cleaner": "^1.0.0",
         "rollup-plugin-copy": "^3.5.0",
@@ -53,9 +51,5 @@
         "style-dictionary": "^3.9.0",
         "tinycolor2": "^1.4.1",
         "version-changelog": "^3.1.1"
-    },
-    "peerDependencies": {
-        "moment": ">= 2",
-        "moment-range": "^4.0.2"
     }
 }

package/js/components/Icon/Stories.js

@@ -1,40 +0,0 @@
-import { mdiEmail } from '@lumx/icons';
-
-import { Size } from '@lumx/core/js/constants';
-import { iconArgType } from '@lumx/core/stories/controls/icons';
-import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-import { Icon } from '.';
-
-const iconSizes = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
-
-export default {
-    argTypes: {
-        icon: iconArgType,
-        hasShape: { control: 'boolean' },
-        color: colorArgType,
-        colorVariant: colorVariantArgType,
-    },
-    args: Icon.defaultProps,
-};
-
-export const SizeAndShape = {
-    args: {
-        icon: mdiEmail,
-    },
-    argTypes: {
-        hasShape: { control: false },
-        size: { control: false },
-    },
-    getDecorators: ({ withCombinations }) => [
-        withCombinations({
-            combinations: {
-                cols: { key: 'size', options: withUndefined(iconSizes) },
-                rows: {
-                    Default: {},
-                    'Has shape': { hasShape: true },
-                },
-            },
-        }),
-    ],
-};

package/js/components/Icon/Tests.tsx

@@ -1,120 +0,0 @@
-import { mdiAlertCircle } from '@lumx/icons';
-import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/core/js/constants';
-
-import { getByClassName, getByTagName } from '@lumx/react/testing/utils/queries';
-import { IconProps, Icon } from '.';
-
-const CLASSNAME = Icon.className as string;
-
-type SetupProps = Partial<IconProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, { wrapper, render }: any = {}) => {
-    const props: IconProps = {
-        icon: 'mdiPlus',
-        ...propsOverride,
-    };
-
-    render(props, { wrapper });
-
-    const i = getByClassName(document.body, CLASSNAME);
-    const svg = getByTagName(i, 'svg');
-    const path = getByTagName(svg, 'path');
-
-    return { i, svg, path, props };
-};
-
-export default (render: any) => {
-    describe(`<${Icon.displayName}>`, () => {
-        describe('Props', () => {
-            it('should render default', () => {
-                const { i, svg, path, props } = setup({}, { render });
-                expect(i).toBeInTheDocument();
-                expect(i).toHaveClass(CLASSNAME);
-                expect(i?.className).toMatchInlineSnapshot('"lumx-icon lumx-icon--no-shape lumx-icon--path"');
-
-                expect(svg).toBeInTheDocument();
-                expect(svg).toHaveAttribute('aria-hidden', 'true');
-                expect(svg).not.toHaveAttribute('role');
-
-                expect(path).toBeInTheDocument();
-                expect(path).toHaveAttribute('d', props.icon);
-            });
-
-            it('should adapt svg with alternate text', () => {
-                const { svg, props } = setup({ alt: 'Alternate text' }, { render });
-                expect(svg).toHaveAttribute('aria-label', props.alt);
-                expect(svg).not.toHaveAttribute('aria-hidden');
-                expect(svg).toHaveAttribute('role');
-            });
-
-            describe('size', () => {
-                it('should render size', () => {
-                    const { i } = setup({ size: Size.s }, { render });
-                    expect(i).toHaveClass('lumx-icon--size-s');
-                });
-
-                it('should adapt xxs size with hasShape', () => {
-                    const { i } = setup({ hasShape: true, size: Size.xxs }, { render });
-                    expect(i).toHaveClass('lumx-icon--size-s');
-                });
-
-                it('should adapt xs size with hasShape', () => {
-                    const { i } = setup({ hasShape: true, size: Size.xs }, { render });
-                    expect(i).toHaveClass('lumx-icon--size-s');
-                });
-
-                it('should adapt xxl size with hasShape', () => {
-                    const { i } = setup({ hasShape: true, size: Size.xxl }, { render });
-                    expect(i).toHaveClass('lumx-icon--size-xl');
-                });
-
-                it('should add default size with hasShape', () => {
-                    const { i } = setup({ hasShape: true }, { render });
-                    expect(i).toHaveClass('lumx-icon--size-m');
-                });
-            });
-
-            describe('color', () => {
-                it('should render color and color variant', () => {
-                    const { i } = setup(
-                        {
-                            color: ColorPalette.primary,
-                            colorVariant: ColorVariant.D1,
-                        },
-                        { render },
-                    );
-                    expect(i).toHaveClass('lumx-icon--color-primary lumx-icon--color-variant-D1');
-                });
-
-                it('should improve yellow icon color contrast with alert circle icon', () => {
-                    const { i } = setup(
-                        {
-                            color: ColorPalette.yellow,
-                            icon: mdiAlertCircle,
-                        },
-                        { render },
-                    );
-                    expect(i).toHaveClass('lumx-icon--color-yellow lumx-icon--has-dark-layer');
-                });
-
-                it('should set a default color on dark theme', () => {
-                    const { i } = setup({ theme: Theme.dark }, { render });
-                    expect(i).toHaveClass('lumx-icon--color-light lumx-icon--theme-dark');
-                });
-
-                it('should set a default color on has shape', () => {
-                    const { i } = setup({ hasShape: true }, { render });
-                    expect(i).toHaveClass('lumx-icon--color-dark lumx-icon--has-shape');
-                });
-
-                it('should set a default color variant on has shape & dark color', () => {
-                    const { i } = setup({ color: ColorPalette.dark, hasShape: true }, { render });
-                    expect(i).toHaveClass('lumx-icon--color-variant-L2 lumx-icon--color-dark lumx-icon--has-shape');
-                });
-            });
-        });
-    });
-};