@lumx/core 3.1.0 → 3.1.2

package/src/js/constants/index.ts

@@ -1,35 +0,0 @@
-/**
- * The prefix to use for the CSS classes.
- */
-export const CSS_PREFIX = 'lumx';
-
-/**
- * Key codes.
- */
-export * from './keycodes';
-
-/**
- * Animation duration constants. Take into consideration that if you change one of these variables,
- * you need to update their scss counterpart as well
- */
-export const DIALOG_TRANSITION_DURATION = 400;
-export const NOTIFICATION_TRANSITION_DURATION = 200;
-export const SLIDESHOW_TRANSITION_DURATION = 5000;
-
-/**
- * Delay on hover after which we open or close the tooltip.
- * Only applies to devices supporting pointer hover.
- */
-export const TOOLTIP_HOVER_DELAY = {
-    open: 500,
-    close: 0,
-};
-
-/**
- * Delay on long press after which we open or close the tooltip.
- * Only applies to devices not supporting pointer hover.
- */
-export const TOOLTIP_LONG_PRESS_DELAY = {
-    open: 250,
-    close: 3000,
-};

package/src/js/constants/keycodes.ts

@@ -1,44 +0,0 @@
-/**
- * The down key code.
- */
-export const DOWN_KEY_CODE = 40;
-
-/**
- * The enter/return key code.
- */
-export const ENTER_KEY_CODE = 13;
-
-/**
- * The space key code.
- */
-export const SPACE_KEY_CODE = 32;
-
-/**
- * The escape key code.
- */
-export const ESCAPE_KEY_CODE = 27;
-
-/**
- * The left key code.
- */
-export const LEFT_KEY_CODE = 37;
-
-/**
- * The right key code.
- */
-export const RIGHT_KEY_CODE = 39;
-
-/**
- * The tab key code.
- */
-export const TAB_KEY_CODE = 9;
-
-/**
- * The up key code.
- */
-export const UP_KEY_CODE = 38;
-
-/**
- * The up key code.
- */
-export const BACKSPACE_KEY_CODE = 8;

package/src/js/custom-colors.ts

@@ -1,56 +0,0 @@
-interface Variants {
-    D2?: string;
-    D1?: string;
-    N?: string;
-    L1?: string;
-    L2?: string;
-    L3?: string;
-    L4?: string;
-    L5?: string;
-    L6?: string;
-}
-
-type ColorPalette = Partial<Record<'primary' | 'secondary', Variants>>;
-
-/**
- * Generate CSS variables for the given color palette.
- */
-export function generateCSSColorVariables(palette: ColorPalette): string {
-    let output = '';
-    for (const [color, variants] of Object.entries(palette)) {
-        if (!variants) continue;
-
-        for (const [variantName, colorValue] of Object.entries(variants)) {
-            output += `--lumx-color-${color}-${variantName}: ${colorValue};\n`;
-        }
-    }
-    return output;
-}
-
-/**
- * Add a css rule in a given sheet.
- *
- * @param sheet    The sheet to insert the new rules in.
- * @param selector The css rules selector.
- * @param rules    The css rules.
- * @param index    The css rule index.
- */
-function _addCSSRule(sheet: CSSStyleSheet, selector: string, rules: string, index: number) {
-    if ('insertRule' in sheet) {
-        sheet.insertRule(`${selector}{${rules}}`, index);
-    } else if ('addRule' in sheet) {
-        (sheet as any).addRule(selector, rules, index);
-    }
-}
-
-/**
- * Set primary and secondary custom colors.
- *
- * @param sheet        The sheet to insert the custom rules in.
- * @param colorPalette The custom color palette.
- * @param selector     The selector used to scope the custom colors (defaults to ':root').
- */
-export function setCustomColors(sheet: CSSStyleSheet, colorPalette: ColorPalette, selector = ':root') {
-    const rules = generateCSSColorVariables(colorPalette);
-    _addCSSRule(sheet, selector, rules, 0);
-}

package/src/js/date-picker.ts

@@ -1,71 +0,0 @@
-import range from 'lodash/range';
-import mMoment, { Moment } from 'moment';
-import { extendMoment } from 'moment-range';
-
-const moment = extendMoment(mMoment as any);
-
-const DAYS_PER_WEEK = 7;
-
-interface AnnotatedDate {
-    date: Moment;
-    isDisplayed: boolean;
-    isClickable: boolean;
-    isToday: boolean;
-}
-
-/**
- * Get the list of days in a week based on locale.
- *
- * @param  locale The locale using to generate the order of days in a week.
- * @return The list of days in a week based on locale.
- */
-export function getWeekDays(locale: string): Moment[] {
-    return range(DAYS_PER_WEEK).map((_, i) => moment().locale(locale).weekday(i));
-}
-
-/**
- * Get month calendar based on locale and start date.
- *
- * @param  locale        The locale using to generate the order of days in a week.
- * @param  selectedMonth The selected month.
- * @return The list of days in a week based on locale.
- */
-export function getMonthCalendar(locale: string, selectedMonth?: Moment): Moment[] {
-    const firstDayOfMonth = moment(selectedMonth).startOf('month');
-    const endDayOfMonth = moment(selectedMonth).endOf('month');
-    // The first day of the week depends on the locale used. In FR the first day is a monday but in EN the first day is sunday
-    const firstDay = firstDayOfMonth.locale(locale).startOf('week');
-    const monthRange = moment.range(firstDay.toDate(), endDayOfMonth.toDate());
-
-    return Array.from(monthRange.by('day'));
-}
-
-/**
- * Get month calendar based on locale and start date.
- * Each day is annotated to know if they are displayed and/or clickable.
- *
- * @param  locale        The locale using to generate the order of days in a week.
- * @param  minDate       The first selectable date.
- * @param  maxDate       The last selectable date.
- * @param  selectedMonth The selected month.
- * @return The list of days in a week based on locale.
- */
-export function getAnnotatedMonthCalendar(
-    locale: string,
-    minDate?: Date,
-    maxDate?: Date,
-    selectedMonth?: Moment,
-): AnnotatedDate[] {
-    const month = moment(selectedMonth).locale(locale).month();
-
-    const clickableRange = moment.range(minDate as Date, maxDate as Date);
-
-    return getMonthCalendar(locale, selectedMonth).map((date) => {
-        return {
-            date,
-            isClickable: clickableRange.contains(date),
-            isDisplayed: date.month() === month,
-            isToday: date.isSame(moment(), 'day'),
-        };
-    });
-}

package/src/js/utils.ts

@@ -1,296 +0,0 @@
-import classNames from 'classnames';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import React 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;
-    }
-
-    return isEmpty(value);
-};
-
-/**
- * Get the basic CSS class for the given type.
- *
- * @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.
- */
-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 '';
-        }
-        const booleanPrefixes = ['has', 'is'];
-
-        if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {
-            return `${prefix}--${kebabCase(type)}`;
-        }
-
-        return `${prefix}--is-${kebabCase(type)}`;
-    }
-
-    return `${prefix}--${kebabCase(type)}-${value}`;
-}
-
-/**
- * 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.
- *
- * @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.
- */
-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);
-}
-
-declare type SwipeDirection = 'none' | 'up' | 'down' | 'left' | 'right';
-
-/**
- * Detects swipe direction.
- * Credits: http://javascriptkit.com/javatutors/touchevents2.shtml.
- *
- * @deprecated use `detectHorizontalSwipe` instead if possible (better performance and does not block scroll)
- * @param  touchSurface          Element that will hold touch events.
- * @param  handleSwipe Callback function.
- * @return Function to remove listeners.
- */
-export function detectSwipe(touchSurface: Element, handleSwipe: (direction: SwipeDirection) => void = noop) {
-    let distX: number;
-    let distY: number;
-    let startX: number;
-    let startY: number;
-    let direction: SwipeDirection;
-    // 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: number;
-    let startTime: number;
-
-    const onTouchStart = (evt: Event) => {
-        const [touch] = Array.from((evt as TouchEvent).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: Event) => {
-        // Prevent scrolling when inside DIV.
-        evt.preventDefault();
-    };
-
-    const onTouchEnd = (evt: Event) => {
-        const [touch] = Array.from((evt as TouchEvent).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, 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
- */
-export function detectHorizontalSwipe(touchSurface: Element, handleSwipe: (direction: 'right' | 'left') => void) {
-    let startX: number;
-    let startY: number;
-    // 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: number;
-    let startTime: number;
-    let finished: boolean;
-
-    const onTouchStart = (evt: Event) => {
-        const [touch] = Array.from((evt as TouchEvent).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: Event) => {
-        if (finished) {
-            return;
-        }
-
-        elapsedTime = new Date().getTime() - startTime;
-        if (elapsedTime > allowedTime) {
-            // Touch swipe too long to be considered.
-            return;
-        }
-
-        const [touch] = Array.from((evt as TouchEvent).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: any = 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);
-    };
-}
-
-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/src/scss/_components.scss

@@ -1,35 +0,0 @@
-@import "./components/button/variables";
-@import "./components/button/mixins";
-@import "./components/checkbox/mixins";
-@import "./components/chip/variables";
-@import "./components/chip/mixins";
-@import "./components/dialog/variables";
-@import "./components/divider/variables";
-@import "./components/divider/mixins";
-@import "./components/expansion-panel/variables";
-@import "./components/input-helper/variables";
-@import "./components/input-helper/mixins";
-@import "./components/input-label/mixins";
-@import "./components/icon/variables";
-@import "./components/icon/mixins";
-@import "./components/lightbox/variables";
-@import "./components/link/mixins";
-@import "./components/list/variables";
-@import "./components/list/mixins";
-@import "./components/notification/variables";
-@import "./components/progress/variables";
-@import "./components/progress-tracker/variables";
-@import "./components/popover/variables";
-@import "./components/radio-button/mixins";
-@import "./components/select/mixins";
-@import "./components/side-navigation/mixins";
-@import "./components/skeleton/mixins";
-@import "./components/slideshow/variables";
-@import "./components/switch/mixins";
-@import "./components/table/mixins";
-@import "./components/tabs/mixins";
-@import "./components/text-field/variables";
-@import "./components/text-field/mixins";
-@import "./components/thumbnail/variables";
-@import "./components/toolbar/variables";
-@import "./components/tooltip/variables";

package/src/scss/_core.scss

@@ -1,12 +0,0 @@
-@import "./core/base/variables";
-@import "./core/base/functions";
-@import "./core/elevation/variables";
-@import "./core/elevation/mixins";
-@import "./core/size/variables";
-@import "./core/spacing/variables";
-@import "./core/state/variables";
-@import "./core/state/mixins";
-@import "./core/color/variables";
-@import "./core/color/functions";
-@import "./core/typography/variables";
-@import "./core/typography/mixins";