@panneau/core 1.0.1-alpha.0 → 1.0.3-alpha.0

package/src/components/Button.jsx

@@ -1,186 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid, react/button-has-type, react/jsx-props-no-spreading */
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import isString from 'lodash/isString';
-import { Link } from 'react-router-dom';
-import { injectIntl } from 'react-intl';
-
-import Label from './Label';
-import * as PanneauPropTypes from '../lib/PropTypes';
-import { isMessage } from '../lib/utils';
-
-const propTypes = {
-    intl: PanneauPropTypes.intl.isRequired,
-    type: PropTypes.string,
-    size: PanneauPropTypes.buttonSize,
-    style: PanneauPropTypes.buttonStyle,
-    href: PropTypes.string,
-    target: PropTypes.string,
-    external: PropTypes.bool,
-    dropdown: PanneauPropTypes.dropdownItems,
-    icon: PropTypes.string,
-    disabled: PropTypes.bool,
-    className: PropTypes.string,
-    title: PanneauPropTypes.message,
-    label: PanneauPropTypes.label,
-    children: PanneauPropTypes.label,
-    onClick: PropTypes.func,
-    onItemClick: PropTypes.func,
-};
-
-const defaultProps = {
-    type: 'button',
-    size: null,
-    style: 'primary',
-    href: null,
-    target: null,
-    external: false,
-    dropdown: null,
-    icon: null,
-    disabled: false,
-    className: null,
-    title: null,
-    label: null,
-    children: null,
-    onClick: null,
-    onItemClick: null,
-};
-
-const Button = ({
-    intl,
-    type,
-    size,
-    style,
-    href,
-    external,
-    target,
-    icon,
-    dropdown,
-    label,
-    title,
-    disabled,
-    children,
-    className,
-    onClick,
-    onItemClick,
-    ...props
-}) => {
-    const hasDropdown = dropdown !== null && dropdown.length > 0;
-    const buttonProps = {
-        className: classNames(['btn'], {
-            [`btn-${style}`]: style !== null,
-            [`btn-${size}`]: !hasDropdown && size !== null,
-            'dropdown-toggle': hasDropdown,
-            disabled,
-            [className]: className !== null,
-        }),
-        title: isMessage(title) ? intl.formatMessage(title) : title,
-        ...props,
-    };
-    if (hasDropdown) {
-        buttonProps['data-toggle'] = 'dropdown';
-        buttonProps['aria-haspopup'] = 'true';
-        buttonProps['aria-expanded'] = 'false';
-    } else {
-        buttonProps.onClick = onClick;
-    }
-
-    const finalLabel = children || label;
-
-    const inner = (
-        <>
-            {isString(icon) ? (
-                <span
-                    className={classNames([
-                        icon,
-                        {
-                            'mr-2': finalLabel !== null,
-                        },
-                    ])}
-                />
-            ) : (
-                icon
-            )}
-            {<Label>{finalLabel}</Label>}
-            {hasDropdown ? <span className="caret" /> : null}
-        </>
-    );
-
-    let button;
-    if (!hasDropdown && href !== null) {
-        button = external ? (
-            <a
-                href={href}
-                {...buttonProps}
-                target={target}
-                aria-disabled={disabled ? 'true' : 'false'}
-            >
-                {inner}
-            </a>
-        ) : (
-            <Link to={href} {...buttonProps} aria-disabled={disabled ? 'true' : 'false'}>
-                {inner}
-            </Link>
-        );
-    } else {
-        button = (
-            <button type={type} {...buttonProps} disabled={disabled}>
-                {inner}
-            </button>
-        );
-    }
-
-    return hasDropdown ? (
-        <div
-            className={classNames([
-                'btn-group',
-                {
-                    [`btn-group-${size}`]: hasDropdown && size !== null,
-                },
-            ])}
-        >
-            {button}
-            <ul className="dropdown-menu">
-                {dropdown.map((it, index) => {
-                    const {
-                        href: itemHref,
-                        label: itemLabel,
-                        external: itemExternal = false,
-                        target: itemTarget = null,
-                        onClick: itemOnClick = null,
-                    } = it;
-                    const itemProps = {
-                        className: 'dropdown-item',
-                        key: `dropdown-${index}`,
-                        onClick: e => {
-                            if (itemOnClick !== null) {
-                                itemOnClick(e, it, index);
-                            }
-                            if (onItemClick !== null) {
-                                onItemClick(e, it, index);
-                            }
-                        },
-                    };
-
-                    return itemExternal ? (
-                        <a {...itemProps} href={itemHref} target={itemTarget}>
-                            <Label>{itemLabel}</Label>
-                        </a>
-                    ) : (
-                        <Link {...itemProps} to={itemHref}>
-                            <Label>{itemLabel}</Label>
-                        </Link>
-                    );
-                })}
-            </ul>
-        </div>
-    ) : (
-        button
-    );
-};
-
-Button.propTypes = propTypes;
-Button.defaultProps = defaultProps;
-
-export default injectIntl(Button);

package/src/components/ButtonGroup.jsx

@@ -1,98 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import * as PanneauPropTypes from '../lib/PropTypes';
-import Button from './Button';
-
-import styles from '../styles/components/button-group.scss';
-
-const propTypes = {
-    buttons: PanneauPropTypes.buttons,
-    size: PanneauPropTypes.buttonSize,
-    style: PanneauPropTypes.buttonStyle,
-    href: PropTypes.string,
-    onClick: PropTypes.func,
-    noWrap: PropTypes.bool,
-    toggle: PropTypes.bool,
-    className: PropTypes.string,
-    buttonClassName: PropTypes.string,
-};
-
-const defaultProps = {
-    buttons: [],
-    size: null,
-    style: 'outline-secondary',
-    href: null,
-    noWrap: false,
-    toggle: false,
-    onClick: null,
-    className: null,
-    buttonClassName: null,
-};
-
-const ButtonGroup = ({
-    buttons,
-    style,
-    size,
-    noWrap,
-    toggle,
-    className,
-    buttonClassName,
-    onClick,
-    ...props
-}) => (
-    <div
-        className={classNames([
-            'btn-group',
-            styles.container,
-            {
-                [`btn-group-${size}`] : size !== null,
-                [styles.noWrap]: noWrap,
-                [className]: className !== null,
-            },
-        ])}
-        {...(toggle
-            ? {
-                  'data-toggle': 'buttons',
-              }
-            : null)}
-        {...props}
-    >
-        {buttons.map((button, index) => {
-            const key = `button-${button.name || button.id || index}`;
-            if (React.isValidElement(button)) {
-                return React.cloneElement(button, {
-                    key,
-                });
-            }
-            const {
-                className: customClassName = null,
-                style: buttonStyle = style,
-                active = false,
-                ...buttonProps
-            } = button;
-            return (
-                <Button
-                    {...buttonProps}
-                    style={buttonStyle}
-                    key={key}
-                    className={classNames([
-                        styles.button,
-                        {
-                            'active': active,
-                            [buttonClassName]: buttonClassName !== null,
-                            [customClassName]: customClassName !== null,
-                        },
-                    ])}
-                />
-            );
-        })}
-    </div>
-);
-
-ButtonGroup.propTypes = propTypes;
-ButtonGroup.defaultProps = defaultProps;
-
-export default ButtonGroup;

package/src/components/Errors.jsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import isArray from 'lodash/isArray';
-
-import { errors as errorsPropTypes } from '../lib/PropTypes';
-import styles from '../styles/components/errors.scss';
-
-const propTypes = {
-    errors: errorsPropTypes,
-    className: PropTypes.string,
-};
-
-const defaultProps = {
-    errors: [],
-    className: null,
-};
-
-const Errors = ({ errors, className }) =>
-    errors !== null && errors.length > 0 ? (
-        <div
-            className={classNames([
-                'alert',
-                'alert-danger',
-                styles.container,
-                {
-                    [className]: className !== null,
-                },
-            ])}
-        >
-            {isArray(errors) ? (
-                <ul>
-                    {errors.map(error => (
-                        <li key={`error-${error}`}>{error}</li>
-                    ))}
-                </ul>
-            ) : (
-                errors
-            )}
-        </div>
-    ) : null;
-
-Errors.propTypes = propTypes;
-Errors.defaultProps = defaultProps;
-
-export default Errors;

package/src/components/Label.jsx

@@ -1,32 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
-
-import { label as labelPropTypes } from '../lib/PropTypes';
-import { isMessage } from '../lib/utils';
-
-const propTypes = {
-    children: labelPropTypes.isRequired,
-    isHtml: PropTypes.bool,
-    values: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-};
-
-const defaultProps = {
-    isHtml: false,
-    values: {},
-};
-
-const Label = ({ children, isHtml, values }) => {
-    const Message = isHtml ? FormattedHTMLMessage : FormattedMessage;
-    return isMessage(children) ? (
-        <Message values={values} {...children} />
-    ) : (
-        children
-    )
-};
-
-Label.propTypes = propTypes;
-Label.defaultProps = defaultProps;
-
-export default Label;

package/src/components/Loading.jsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import styles from '../styles/components/loading.scss';
-
-const propTypes = {
-    loading: PropTypes.bool,
-    color: PropTypes.string,
-    size: PropTypes.number,
-    margin: PropTypes.string,
-    sizeUnit: PropTypes.string,
-    className: PropTypes.string,
-};
-
-const defaultProps = {
-    loading: true,
-    color: '#000000',
-    size: 15,
-    margin: '2px',
-    sizeUnit: 'px',
-    className: null,
-};
-
-const Loader = ({ loading, color, size, sizeUnit, margin, className }) => {
-    const dotStyle = {
-        backgroundColor: color,
-        width: `${size}${sizeUnit}`,
-        height: `${size}${sizeUnit}`,
-        margin,
-    };
-    return loading ? (
-        <div
-            className={classNames([
-                styles.component,
-                {
-                    [className]: className !== null,
-                },
-            ])}
-        >
-            <div className={styles.dot} style={dotStyle} />
-            <div className={styles.dot} style={dotStyle} />
-            <div className={styles.dot} style={dotStyle} />
-        </div>
-    ) : null;
-};
-
-Loader.propTypes = propTypes;
-Loader.defaultProps = defaultProps;
-
-export default Loader;

package/src/components/index.js

@@ -1,7 +0,0 @@
-import Button from './Button';
-import ButtonGroup from './ButtonGroup';
-import Errors from './Errors';
-import Label from './Label';
-import Loading from './Loading';
-
-export { Button, ButtonGroup, Errors, Label, Loading };

package/src/contexts/Components.jsx

@@ -1,49 +0,0 @@
-import React, { useContext, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import ComponentsCollection from '../lib/ComponentsCollection';
-
-export const ComponentsContext = React.createContext(new ComponentsCollection());
-
-export const useComponents = (namespace = null, customComponents = null) => {
-    const contextCollection = useContext(ComponentsContext);
-    const collection = useMemo(() => {
-        if (customComponents !== null) {
-            return ComponentsCollection.make(customComponents);
-        }
-        return namespace !== null ? contextCollection.getCollection(namespace) : contextCollection;
-    }, [namespace, customComponents, contextCollection]);
-    return collection;
-};
-
-export const useComponent = (name = null, namespace = null, customComponents = null) => {
-    const collection = useComponents(namespace, customComponents);
-    const component = useMemo(() => collection.getComponent(
-        name,
-    ), [collection, name]);
-    return component;
-};
-
-const propTypes = {
-    children: PropTypes.node.isRequired,
-    components: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])),
-    collection: PropTypes.instanceOf(ComponentsCollection),
-};
-
-const defaultProps = {
-    components: null,
-    collection: null,
-};
-
-export const ComponentsProvider = ({ children, components, collection }) => {
-    // const value = useMemo(
-    //     () => (collection !== null ? collection : new ComponentsCollection(components)),
-    //     [components, collection],
-    // );
-    const value = collection !== null ? collection : new ComponentsCollection(components);
-    return <ComponentsContext.Provider value={value}>{children}</ComponentsContext.Provider>;
-};
-
-ComponentsProvider.propTypes = propTypes;
-ComponentsProvider.defaultProps = defaultProps;
-
-export default ComponentsContext;

package/src/contexts/Definition.jsx

@@ -1,21 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import * as PanneauPropTypes from '../lib/PropTypes';
-import Definition from '../lib/Definition';
-
-export const DefinitionContext = React.createContext(new Definition());
-
-export const useDefinition = () => useContext(DefinitionContext);
-
-const propTypes = {
-    children: PropTypes.node.isRequired,
-    definition: PanneauPropTypes.definition.isRequired,
-};
-
-export const DefinitionProvider = ({ children, definition }) => (
-    <DefinitionContext.Provider value={definition}>{children}</DefinitionContext.Provider>
-);
-
-DefinitionProvider.propTypes = propTypes;
-
-export default DefinitionContext;

package/src/contexts/UrlGenerator.jsx

@@ -1,35 +0,0 @@
-import React, { useContext, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import UrlGenerator from '../lib/UrlGenerator';
-
-export const UrlGeneratorContext = React.createContext(null);
-
-export const useUrlGenerator = () => useContext(UrlGeneratorContext);
-
-const propTypes = {
-    children: PropTypes.node.isRequired,
-    routes: PropTypes.objectOf(PropTypes.string),
-    urlGenerator: PropTypes.instanceOf(UrlGenerator),
-};
-
-const defaultProps = {
-    routes: null,
-    urlGenerator: null,
-};
-
-const UrlGeneratorProvider = ({ children, routes, urlGenerator }) => {
-    const value = useMemo(() => (urlGenerator !== null ? urlGenerator : new UrlGenerator(routes)), [
-        routes,
-        urlGenerator,
-    ]);
-    return (
-        <UrlGeneratorContext.Provider value={value}>{children}</UrlGeneratorContext.Provider>
-    );
-};
-
-UrlGeneratorProvider.propTypes = propTypes;
-UrlGeneratorProvider.defaultProps = defaultProps;
-
-export { UrlGeneratorProvider };
-
-export default UrlGeneratorContext;

package/src/contexts/index.js

@@ -1,12 +0,0 @@
-export {
-    default as ComponentsContext,
-    useComponents,
-    useComponent,
-    ComponentsProvider,
-} from './Components';
-export { default as DefinitionContext, useDefinition, DefinitionProvider } from './Definition';
-export {
-    default as UrlGeneratorContext,
-    useUrlGenerator,
-    UrlGeneratorProvider,
-} from './UrlGenerator';

package/src/index.js

@@ -1,8 +0,0 @@
-/** @module panneau/core */
-export * as PropTypes from './lib/PropTypes';
-export { default as ComponentsCollection } from './lib/ComponentsCollection';
-export { default as UrlGenerator } from './lib/UrlGenerator';
-export { default as Definition } from './lib/Definition';
-export { default as Resource } from './lib/Resource';
-export { default as ResourceApi } from './lib/ResourceApi';
-export { default as useResourceApi } from './lib/useResourceApi';

package/src/lib/ComponentsCollection.js

@@ -1,81 +0,0 @@
-class ComponentsCollection {
-    static make(components) {
-        return components instanceof ComponentsCollection ? components : new ComponentsCollection(components);
-    }
-
-    static normalizeKey(key) {
-        return key.replace(/[^A-Za-z0-9.]/gi, '').toLowerCase();
-    }
-
-    constructor(components) {
-        this.components = {};
-        this.addComponents(components || {});
-    }
-
-    addComponent(key, Component, namespace) {
-        const componentKey = ComponentsCollection.normalizeKey(
-            `${typeof namespace !== 'undefined' ? `${namespace}.` : ''}${key}`,
-        );
-        this.components[componentKey] = Component;
-    }
-
-    addComponents(components, namespace) {
-        const items =
-            components instanceof ComponentsCollection ? components.getComponents() : components;
-        Object.keys(items).forEach(key => {
-            this.addComponent(key, items[key], namespace);
-        });
-    }
-
-    getCollection(namespace) {
-        const components = this.getComponents(namespace);
-        const collection = new ComponentsCollection(components);
-        return collection;
-    }
-
-    getComponents(namespace) {
-        return Object.keys(this.components).reduce((components, key) => {
-            if (typeof namespace !== 'undefined') {
-                const namespaceKey = ComponentsCollection.normalizeKey(namespace);
-                // eslint-disable-next-line no-useless-escape
-                const matches = key.match(new RegExp(`^${namespaceKey}\.(.*)$`, 'i'));
-                return matches
-                    ? {
-                          ...components,
-                          [matches[1]]: this.components[key],
-                      }
-                    : components;
-            }
-            return {
-                ...components,
-                [key]: this.components[key],
-            };
-        }, {});
-    }
-
-    setComponents(components, namespace) {
-        const items =
-            components instanceof ComponentsCollection ? components.getComponents() : components;
-        if (typeof namespace !== 'undefined') {
-            Object.keys(items).forEach(key => {
-                this.components[`${namespace}.${key}`] = items[key];
-            });
-        } else {
-            this.components = items;
-        }
-        return this;
-    }
-
-    getComponent(key = null) {
-        if (key === null) {
-            return null;
-        }
-        const normalizedKey = ComponentsCollection.normalizeKey(key);
-        const foundKey = Object.keys(this.components).find(fieldKey => fieldKey === normalizedKey);
-        return typeof foundKey !== 'undefined' && foundKey !== null
-            ? this.components[foundKey]
-            : null;
-    }
-}
-
-export default ComponentsCollection;