@hipay/hipay-material-ui 3.5.0 → 3.6.0-rc1

package/src/theme/typography.js

@@ -1,158 +0,0 @@
-const { palette } = require('./palette');
-
-const fontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
-// The default font size of the Material Specification.
-const fontSize = 14; // px
-const fontWeightLight = 300;
-const fontWeightRegular = 400;
-const fontWeightMedium = 500;
-// Tell Material-UI what's the font-size on the html element.
-// 16px is the default font-size used by browsers.
-const htmlFontSize = 16;
-
-const round = (value) => {
-    return Math.round(value * 1e5) / 1e5;
-};
-const coef = fontSize / 14;
-const pxToRem = (value) => {
-    return `${value / htmlFontSize * coef}rem`;
-};
-
-export const typography = {
-    pxToRem,
-    round,
-    fontFamily,
-    fontSize,
-    fontWeightLight,
-    fontWeightRegular,
-    fontWeightMedium,
-    display4: {
-        fontSize: pxToRem(112),
-        fontWeight: fontWeightLight,
-        fontFamily,
-        letterSpacing: '-.04em',
-        lineHeight: `${round(128 / 112)}em`,
-        marginLeft: '-.04em',
-        color: palette.text.secondary,
-    },
-    display3: {
-        fontSize: pxToRem(56),
-        fontWeight: fontWeightRegular,
-        fontFamily,
-        letterSpacing: '-.02em',
-        lineHeight: `${round(73 / 56)}em`,
-        marginLeft: '-.02em',
-        color: palette.text.secondary,
-    },
-    display2: {
-        fontSize: pxToRem(45),
-        fontWeight: fontWeightRegular,
-        fontFamily,
-        lineHeight: `${round(51 / 45)}em`,
-        marginLeft: '-.02em',
-        color: palette.text.secondary,
-    },
-    display1: {
-        fontSize: pxToRem(34),
-        fontWeight: fontWeightRegular,
-        fontFamily,
-        lineHeight: `${round(41 / 34)}em`,
-        color: palette.text.secondary,
-    },
-    headline: {
-        fontSize: pxToRem(24),
-        fontWeight: fontWeightRegular,
-        fontFamily,
-        lineHeight: `${round(32.5 / 24)}em`,
-        color: palette.text.primary,
-    },
-    title: {
-        fontSize: pxToRem(21),
-        fontWeight: fontWeightMedium,
-        fontFamily,
-        lineHeight: `${round(24.5 / 21)}em`,
-        color: palette.text.primary,
-    },
-    subheading: {
-        fontSize: pxToRem(16),
-        fontWeight: fontWeightRegular,
-        fontFamily,
-        lineHeight: `${round(24 / 16)}em`,
-        color: palette.text.primary,
-    },
-    body3: {
-        fontSize: pxToRem(14),
-        fontWeight: fontWeightRegular,
-        fontFamily,
-        lineHeight: `${round(26 / 14)}em`,
-        color: palette.text.primary,
-    },
-    body2: {
-        fontSize: pxToRem(14),
-        fontWeight: fontWeightMedium,
-        fontFamily,
-        lineHeight: `${round(24 / 14)}em`,
-        color: palette.text.primary,
-    },
-    body1: {
-        fontSize: pxToRem(14),
-        fontWeight: fontWeightRegular,
-        fontFamily,
-        lineHeight: `${round(20.5 / 14)}em`,
-        color: palette.text.primary,
-    },
-    h1: {
-        fontSize: 24,
-        fontFamily,
-    },
-    h2: {
-        fontSize: 20,
-        fontFamily,
-    },
-    h3: {
-        fontSize: 18,
-        fontFamily,
-    },
-    h4: {
-        fontSize: 16,
-        fontFamily,
-    },
-    h5: {
-        fontSize: 14,
-        fontFamily,
-    },
-    b1: {
-        fontSize: 15,
-        fontFamily,
-    },
-    b2: {
-        fontSize: 14,
-        fontFamily,
-    },
-    b3: {
-        fontSize: 13,
-        fontFamily,
-    },
-    b4: {
-        fontSize: 12,
-        fontFamily,
-    },
-    b5: {
-        fontSize: 11,
-        fontFamily,
-    },
-    caption: {
-        fontSize: pxToRem(12),
-        fontWeight: fontWeightRegular,
-        fontFamily,
-        lineHeight: `${round(16.5 / 12)}em`,
-        color: palette.text.secondary,
-    },
-    button: {
-        fontSize: pxToRem(14),
-        textTransform: 'uppercase',
-        fontWeight: fontWeightMedium,
-        fontFamily,
-        color: palette.text.primary,
-    },
-};

package/src/theme.js

@@ -1,9 +0,0 @@
-import { createMuiTheme } from '@material-ui/core/styles';
-import { palette } from './theme/palette';
-import { typography } from './theme/typography';
-
-export default createMuiTheme({
-    palette,
-    typography,
-    spacing: 4
-});

package/src/transitions/utils.js

@@ -1,13 +0,0 @@
-export const reflow = node => node.scrollTop;
-
-export function getTransitionProps(props, options) {
-    const { timeout, style = {} } = props;
-
-    return {
-        duration:
-            style.transitionDuration || typeof timeout === 'number'
-                ? timeout
-                : timeout[options.mode],
-        delay: style.transitionDelay,
-    };
-}

package/src/utils/exactProp.js

@@ -1,33 +0,0 @@
-// This module is based on https://github.com/airbnb/prop-types-exact repository.
-// However, in order to reduce the number of dependencies and to remove some extra safe checks
-// the module was forked.
-
-// Only exported for test purposes.
-export const specialProperty = 'exact-prop: \u200b';
-
-function exactProp(propTypes) {
-    /* istanbul ignore if */
-    if (process.env.NODE_ENV === 'production') {
-        return propTypes;
-    }
-
-    return {
-        ...propTypes,
-        // eslint-disable-next-line prefer-arrow-callback
-        [specialProperty]: props => {
-            const unsupportedProps = Object.keys(props).filter(
-                prop => !propTypes.hasOwnProperty(prop),
-            );
-            if (unsupportedProps.length > 0) {
-                return new Error(
-                    `The following properties are not supported: ${unsupportedProps
-                        .map(prop => `\`${prop}\``)
-                        .join(', ')}. Please remove them.`,
-                );
-            }
-            return null;
-        },
-    };
-}
-
-export default exactProp;

package/src/utils/helpers.js

@@ -1,302 +0,0 @@
-import warning from 'warning';
-
-export function camelize(string) {
-    string = string.replace(/(_\w)/g, m => m[1].toUpperCase());
-    return string.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, (match, index) => {
-        if (+match === 0) return ''; // or if (/\s+/.test(match)) for white spaces
-        return index === 0 ? match.toLowerCase() : match.toUpperCase();
-    });
-}
-
-export function capitalize(string) {
-    if (process.env.NODE_ENV !== 'production' && typeof string !== 'string') {
-        throw new Error('Material-UI: capitalize(string) expects a string argument.');
-    }
-
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-export function contains(obj, pred) {
-    return Object.keys(pred).every(key => {
-        return obj.hasOwnProperty(key) && obj[key] === pred[key];
-    });
-}
-
-/**
- * Echappe les caractères HTML d'une chaîne de catactères
- * Sauf la balise <strong>, <br>, and <a>
- *
- * @param unsafeStr
- * @returns {*}
- */
-export function escapeHTML(unsafeStr) {
-    return unsafeStr
-        .replace(/<br\/?>/g, '[br]')
-        .replace(/<strong>/g, '[[')
-        .replace(/<\/?strong>/g, ']]')
-        .replace(/<a(?: (.*?)=[\"\'](.*?)[\"\'])(?: (.*?)=[\"\'](.*?)[\"\'])?>(.*?)<\/a>/g, '[a:$1:$2:$3:$4]$5[a]')
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;')
-        .replace(/\[a:(.*?):(.*?):(.*?):(.*?)\](.*?)\[a\]/g, '<a $1=$2 $3=$4>$5</a>')
-        .replace(/\[\[/g, '<strong>')
-        .replace(/\]\]/g, '</strong>')
-        .replace(/\[br\]/g, '<br>');
-}
-
-export function findIndex(arr, pred) {
-    const predType = typeof pred;
-    for (let i = 0; i < arr.length; i += 1) {
-        if (predType === 'function' && !!pred(arr[i], i, arr) === true) {
-            return i;
-        }
-        if (predType === 'object' && contains(arr[i], pred)) {
-            return i;
-        }
-        if (['string', 'number', 'boolean'].indexOf(predType) !== -1) {
-            return arr.indexOf(pred);
-        }
-    }
-    return -1;
-}
-
-export function find(arr, pred) {
-    const index = findIndex(arr, pred);
-    return index > -1 ? arr[index] : undefined;
-}
-
-/**
- * Safe chained function
- *
- * Will only create a new function if needed,
- * otherwise will pass back existing functions or null.
- *
- * @param {function} functions to chain
- * @returns {function|null}
- */
-export function createChainedFunction(...funcs) {
-    return funcs.reduce(
-        (acc, func) => {
-            if (func == null) {
-                return acc;
-            }
-
-            warning(
-                typeof func === 'function',
-                'Material-UI: invalid Argument Type, must only provide functions, undefined, or null.',
-            );
-
-            return function chainedFunction(...args) {
-                acc.apply(this, args);
-                func.apply(this, args);
-            };
-        },
-        () => {},
-    );
-}
-
-/**
- * Remove duplicate items from array useful after concat arrays
- *
- * arrayUnique(array1.concat(array2))
- *
- * @param array
- */
-export function arrayUnique(array) {
-    const a = [...array];
-    for (let i = 0; i < a.length; i + 1) {
-        for (let j = i + 1; j < a.length; j + 1) {
-            if (a[i] === a[j]) a.splice(j - 1, 1);
-        }
-    }
-    return a;
-}
-
-/**
- * Format number relative to required size and locale
- *
- * @param number
- * @param size
- * @param locale
- * @param precision
- */
-export function formatNumber(number, size = 'l', locale = 'en-EN', precision) {
-    // Round number
-    switch (size) {
-        case 'm':
-            number = Math.round(number);
-            break;
-        case 's':
-            number = Math.round(number);
-            break;
-        case 'l':
-        default:
-            number = Math.round(number * 100) / 100;
-            break;
-    }
-
-    const effectivePrecision = Number.isInteger(precision) ? precision : (size === 'l' ? 2 : 0);
-
-    // To locale
-    const options = {
-        minimumFractionDigits: effectivePrecision,
-        maximumFractionDigits: effectivePrecision,
-        useGrouping: true,
-    };
-
-    return number.toLocaleString(locale.replace(/_/g, '-'), options);
-}
-
-/**
- * Format currency amount relative to required size, locale and currency
- *
- * large/fr-FR/EUR : 123456789,123 -> 123 465 789,123 €
- * large/en-EN/USD : 123456789,123 -> $ 123,465,789.123
- * large/en-EN/EUR : 123456789,123 -> € 123,465,789.123
- * small/en-EN/EUR : 123456789,123 -> € 123,456,789
- * tiny/en-EN/EUR  : 123456789,123 -> € 123M
- * tiny/en-EN/EUR  :  23456789,123 -> € 23,456k
- * tiny/en-EN/EUR  :     56789,123 -> € 56,789
- *
- * @param amount
- * @param size      - l | m | s
- * @param locale
- * @param currency  - ISO 4217
- */
-export function formatCurrencyAmount(amount, size = 'l', locale = 'en-EN', currency = 'EUR', precision = null) {
-    let value = amount;
-    let unit = '';
-    // Round number
-    switch (size) {
-        case 'm':
-            value = Math.round(amount);
-            break;
-        case 's':
-            if (amount > 99999999) {
-                amount /= 1000000;
-                unit = 'M';
-            } else if (amount > 99999) {
-                amount /= 1000;
-                unit = 'k';
-            }
-            value = Math.round(amount);
-            break;
-        case 'l':
-        default:
-            value = Math.round(amount * 100) / 100;
-            break;
-    }
-    const effectivePrecision = Number.isInteger(precision) ? precision : (size === 'l' ? 2 : 0);
-
-    // To locale
-    const options = {
-        minimumFractionDigits: effectivePrecision,
-        maximumFractionDigits: effectivePrecision,
-        useGrouping: true,
-        style: 'currency',
-        currency,
-        currencyDisplay: 'symbol',
-    };
-
-    let returnValue = value.toLocaleString(locale.replace(/_/g, '-'), options);
-
-    // Place unit (k, M) after number (don't move currency symbol !)
-    if (unit !== '') {
-        returnValue = returnValue.replace(/([\D]*)([\d,.\s]+)([\D]*)/, (match, p1, p2, p3) =>
-            [p1, p2, unit, p3].join(''),
-        );
-    }
-
-    return returnValue;
-}
-
-/**
- * Format rate relative to required size and locale
- * large/en-EN  : 12.34
- *
- * @param rate
- * @param size
- * @param locale
- */
-export function formatRate(rate, size = 'l', locale = 'en-EN') {
-    let effectiveSize = 0;
-    if (size === 'l') effectiveSize = 2;
-    if (size === 'm') effectiveSize = 1;
-
-    // To locale
-    const options = {
-        minimumFractionDigits: effectiveSize,
-        maximumFractionDigits: effectiveSize,
-        style: 'percent',
-    };
-
-    return rate.toLocaleString(locale.replace(/_/g, '-'), options);
-}
-
-/**
- * Retourne l'item selectionnable suivant.
- * @param node
- * @param direction
- * @returns {*}
- */
-export function getNextItemSelectable(node, direction) {
-    if (direction === 'down') {
-        if (node.nextSibling === null) {
-            return null;
-        }
-        if (node.nextSibling.tabIndex === -1) {
-            return getNextItemSelectable(node.nextSibling, direction);
-        }
-        return node.nextSibling;
-    }
-    if (node.previousSibling === null) {
-        return null;
-    }
-    if (node.previousSibling.tabIndex === -1) {
-        return getNextItemSelectable(node.previousSibling, direction);
-    }
-    return node.previousSibling;
-}
-
-/**
- * Retourne la chaîne de caractères passée en entrée sans les accents
- * @param toFold
- * @returns {*}
- */
-export function foldAccents(toFold) {
-    return toFold.replace(
-        /([àáâãäå])|([ç])|([èéêë])|([ìíîï])|([ñ])|([òóôõöø])|([ß])|([ùúûü])|([ÿ])|([æ])|([œ])|([+])|([\\])|([[])|([\]])|([(])|([)])|([?])|([*])/g,
-        (str, a, c, e, i, n, o, s, u, y, ae, oe, plus, backSlash, lc, rc, lp, rp, interogation, star) => {
-            if (a) return 'a';
-            if (c) return 'c';
-            if (e) return 'e';
-            if (i) return 'i';
-            if (n) return 'n';
-            if (o) return 'o';
-            if (s) return 's';
-            if (u) return 'u';
-            if (y) return 'y';
-            if (ae) return 'ae';
-            if (oe) return 'oe';
-            if (plus) return '\\+';
-            if (backSlash) return '\\\\';
-            if (lc) return '\\[';
-            if (rc) return '\\]';
-            if (lp) return '\\(';
-            if (rp) return '\\)';
-            if (interogation) return '\\?';
-            if (star) return '\\*';
-            return str;
-        },
-    );
-}
-
-/**
- * Generate a unique ID
- * @returns {string}
- */
-export function uniqueId() {
-    return '_' + Math.random().toString(36).substr(2, 9);
-}

package/src/withMobileDialog/index.js

@@ -1 +0,0 @@
-export { default } from './withMobileDialog';

package/src/withMobileDialog/withMobileDialog.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
-
-/**
- * Dialog will responsively be full screen *at or below* the given breakpoint
- * (defaults to 'sm' for mobile devices).
- * Notice that this Higher-order Component is incompatible with server side rendering.
- */
-const withMobileDialog = (options = {}) => Component => {
-    const { breakpoint = 'sm' } = options;
-
-    function WithMobileDialog(props) {
-        return <Component fullScreen={isWidthDown(breakpoint, props.width)} {...props} />;
-    }
-
-    WithMobileDialog.propTypes = {
-        width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired,
-    };
-
-    return withWidth()(WithMobileDialog);
-};
-
-export default withMobileDialog;

package/src/withMobileDialog/withMobileDialog.test.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { createShallow, getClasses } from '../test-utils';
-import Paper from '@material-ui/core/Paper';
-import Dialog from '@material-ui/core/Dialog';
-import withMobileDialog from './withMobileDialog';
-
-describe('withMobileDialog', () => {
-    let shallow;
-    let classes;
-    const defaultProps = {
-        open: false,
-    };
-
-    before(() => {
-        shallow = createShallow({ untilSelector: 'Dialog' });
-        classes = getClasses(<Dialog {...defaultProps}>foo</Dialog>);
-    });
-
-    function isFullScreen(breakpoints, width) {
-        breakpoints.forEach(breakpoint => {
-            it(`is for width: ${width} <= ${breakpoint}`, () => {
-                const ResponsiveDialog = withMobileDialog({ breakpoint })(Dialog);
-                const wrapper = shallow(
-                    <ResponsiveDialog {...defaultProps} width={width}>
-                        foo
-                    </ResponsiveDialog>,
-                );
-                assert.strictEqual(wrapper.find(Paper).hasClass(classes.paperFullScreen), true);
-            });
-        });
-    }
-
-    function isNotFullScreen(breakpoints, width) {
-        breakpoints.forEach(breakpoint => {
-            it(`is not for width: ${width} > ${breakpoint}`, () => {
-                const ResponsiveDialog = withMobileDialog({ breakpoint })(Dialog);
-                const wrapper = shallow(
-                    <ResponsiveDialog {...defaultProps} width={width}>
-                        foo
-                    </ResponsiveDialog>,
-                );
-                assert.strictEqual(wrapper.find(Paper).hasClass(classes.paperFullScreen), false);
-            });
-        });
-    }
-
-    describe('screen width: xs', () => {
-        isFullScreen(['xs', 'sm', 'md', 'lg', 'xl'], 'xs');
-    });
-
-    describe('screen width: sm (default)', () => {
-        isFullScreen(['sm', 'md', 'lg', 'xl'], 'sm');
-        isNotFullScreen(['xs'], 'sm');
-    });
-
-    describe('screen width: md', () => {
-        isFullScreen(['md', 'lg', 'xl'], 'md');
-        isNotFullScreen(['xs', 'sm'], 'md');
-    });
-
-    describe('screen width: lg', () => {
-        isFullScreen(['lg', 'xl'], 'lg');
-        isNotFullScreen(['xs', 'sm', 'md'], 'lg');
-    });
-
-    describe('screen width: xl', () => {
-        isFullScreen(['xl'], 'xl');
-        isNotFullScreen(['xs', 'sm', 'md', 'lg'], 'xl');
-    });
-});