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

package/src/lib/Definition.js

@@ -1,87 +0,0 @@
-import Resource from './Resource';
-import { getLocalizedName } from './utils';
-
-class Definition {
-    constructor({ resources = [], ...definition } = {}) {
-        this.definition = {
-            ...definition,
-            resources: resources.map(it => new Resource(it)),
-        };
-    }
-
-    allRoutes() {
-        const { routes = {} } = this.definition;
-        const resourcesRoutes = this.resources()
-            .filter(it => it.hasRoutes())
-            .reduce((routesMap, resource) => {
-                const resourceRoutes = resource.routes();
-                return {
-                    ...routesMap,
-                    ...Object.keys(resourceRoutes).reduce(
-                        (mapRoutes, name) => ({
-                            ...mapRoutes,
-                            [`resource.${resource.id()}.${name}`]: resourceRoutes[name],
-                        }),
-                        {},
-                    ),
-                };
-            }, {});
-        return {
-            ...routes,
-            ...resourcesRoutes,
-        };
-    }
-
-    localizedName(variant = 'default') {
-        return getLocalizedName(this.definition, variant);
-    }
-
-    apiEndpoint() {
-        const { api: { endpoint = null } = {} } = this.definition;
-        return endpoint;
-    }
-
-    apiUploadEndpoint() {
-        const { api: { uploadEndpoint = null } = {} } = this.definition;
-        return uploadEndpoint;
-    }
-
-    layout() {
-        const { layout = {} } = this.definition;
-        return layout;
-    }
-
-    locales() {
-        const { localization: { locales = ['en'] } = {} } = this.definition;
-        return locales;
-    }
-
-    resources() {
-        const { resources = [] } = this.definition;
-        return resources;
-    }
-
-    resource(id) {
-        return this.resources().find(it => it.id() === id) || null;
-    }
-
-    fields() {
-        const { fields = [] } = this.definition;
-        return fields;
-    }
-
-    field(id) {
-        return this.fields().find(it => it.id === id) || null;
-    }
-
-    blocks() {
-        const { blocks = [] } = this.definition;
-        return blocks;
-    }
-
-    block(id) {
-        return this.blocks().find(it => it.id === id) || null;
-    }
-}
-
-export default Definition;

package/src/lib/PropTypes.js

@@ -1,117 +0,0 @@
-import PropTypes from 'prop-types';
-import * as definitions from '@panneau/schemas/prop-types';
-
-import UrlGenerator from './UrlGenerator';
-import ResourceApi from './ResourceApi';
-import Definition from './Definition';
-import Resource from './Resource';
-import ComponentsCollection from './ComponentsCollection';
-
-/**
- * Core
- */
-export const urlGenerator = PropTypes.instanceOf(UrlGenerator);
-
-export const history = PropTypes.shape({
-    push: PropTypes.func.isRequired,
-});
-
-export const intl = PropTypes.shape({
-    locale: PropTypes.string.isRequired,
-    formatMessage: PropTypes.func.isRequired,
-});
-
-export const intlMessage = PropTypes.shape({
-    id: PropTypes.string,
-    description: PropTypes.string,
-    defaultMessage: PropTypes.string,
-});
-
-export const componentsCollection = PropTypes.instanceOf(ComponentsCollection);
-
-export const components = PropTypes.oneOfType([
-    PropTypes.objectOf(PropTypes.elementType),
-    PropTypes.instanceOf(ComponentsCollection),
-]);
-
-export const resourceApi = PropTypes.instanceOf(ResourceApi);
-
-export const ref = PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.elementType }),
-]);
-
-/**
- * UI
- */
-export const message = PropTypes.oneOfType([PropTypes.string, intlMessage]);
-
-export const label = PropTypes.oneOfType([PropTypes.node, intlMessage]);
-
-export const button = PropTypes.shape({
-    id: PropTypes.string,
-    type: PropTypes.string,
-    href: PropTypes.string,
-    external: PropTypes.bool,
-    label: message,
-    children: message,
-    className: PropTypes.string,
-    onClick: PropTypes.func,
-});
-
-export const buttons = PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, button]));
-
-export const dropdownItem = PropTypes.shape({
-    id: PropTypes.string,
-    href: PropTypes.string,
-    external: PropTypes.bool,
-    label: message,
-    className: PropTypes.string,
-    onClick: PropTypes.func,
-});
-
-export const dropdownItems = PropTypes.arrayOf(dropdownItem);
-
-export const errors = PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]);
-
-export const buttonSize = PropTypes.oneOf(['sm', 'md', 'lg']);
-
-export const buttonStyle = PropTypes.oneOf([
-    null,
-    'primary',
-    'secondary',
-    'success',
-    'danger',
-    'warning',
-    'info',
-    'light',
-    'dark',
-    'link',
-    'outline-primary',
-    'outline-secondary',
-    'outline-success',
-    'outline-danger',
-    'outline-warning',
-    'outline-info',
-    'outline-light',
-    'outline-dark',
-    'outline-link',
-]);
-
-/**
- * Models
- */
-export const user = PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    name: PropTypes.string,
-    email: PropTypes.string,
-});
-
-/**
- * Definitions
- */
-export const definition = PropTypes.instanceOf(Definition);
-export const resource = PropTypes.instanceOf(Resource);
-export {
-    definitions
-};

package/src/lib/Resource.js

@@ -1,65 +0,0 @@
-import get from 'lodash/get';
-import { getLocalizedName } from './utils';
-
-class Resource {
-    constructor(resource) {
-        this.resource = resource || {};
-    }
-
-    id() {
-        return this.resource.id;
-    }
-
-    type() {
-        return this.resource.type || 'default';
-    }
-
-    types() {
-        return this.resource.types || [];
-    }
-
-    localizedName(variant = 'default') {
-        return getLocalizedName(this.resource, variant);
-    }
-
-    messages() {
-        const { messages = {} } = this.resource;
-        return messages;
-    }
-
-    message(key, defaultValue) {
-        return get(this.messages(), key, defaultValue);
-    }
-
-    routes() {
-        const { routes = {} } = this.resource;
-        return routes;
-    }
-
-    hasRoutes() {
-        const { routes = null } = this.resource;
-        return routes !== null;
-    }
-
-    forms() {
-        const { forms = {} } = this.resource;
-        return forms;
-    }
-
-    form(action) {
-        const forms = this.forms();
-        return forms[action] || forms;
-    }
-
-    lists() {
-        const { lists = {} } = this.resource;
-        return lists;
-    }
-
-    list(action) {
-        const lists = this.lists();
-        return lists[action] || lists;
-    }
-}
-
-export default Resource;

package/src/lib/ResourceApi.js

@@ -1,114 +0,0 @@
-import trimEnd from 'lodash/trimEnd';
-import isEmpty from 'lodash/isEmpty';
-import isObject from 'lodash/isObject';
-import queryString from 'query-string';
-import 'whatwg-fetch';
-
-import {
-    getResponseAndDataObject,
-    throwResponseError,
-    throwValidationError,
-    getCSRFHeaders,
-} from './requests';
-
-class ResourceApi {
-    constructor(resource, urlGenerator, opts) {
-        this.resource = resource;
-        this.urlGenerator = urlGenerator;
-        this.options = {
-            idParamName: 'id',
-            host: '/',
-            ...opts,
-        };
-    }
-
-    definition() {
-        return this.callApi('definition', 'get');
-    }
-
-    index(params = null) {
-        const query =
-            params !== null && isObject(params) ? queryString.stringify(params) : params || '';
-        const path = `${this.getActionPath('index')}${
-            !isEmpty(query) ? `?${query.replace(/^\?/, '')}` : ''
-        }`;
-        return this.callApi(path, 'get');
-    }
-
-    create() {
-        const path = this.getActionPath('create');
-        return this.callApi(path, 'get');
-    }
-
-    store(data) {
-        const path = this.getActionPath('store');
-        return this.callApi(path, 'post', data);
-    }
-
-    show(id) {
-        const path = this.getActionPath('show', id);
-        return this.callApi(path, 'get');
-    }
-
-    edit(id) {
-        const path = this.getActionPath('edit', id);
-        return this.callApi(path, 'get');
-    }
-
-    update(id, data) {
-        const path = this.getActionPath('update', id);
-        return this.callApi(path, 'put', data);
-    }
-
-    destroy(id) {
-        const path = this.getActionPath('destroy', id);
-        return this.callApi(path, 'delete');
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-    callApi(path, method, data = undefined) {
-        const body = data || null;
-        const methodUpperCase = method.toUpperCase();
-        let finalMethod;
-        let finalBody;
-        switch (methodUpperCase) {
-            case 'PUT':
-            case 'PATCH':
-            case 'DELETE':
-                finalMethod = 'POST';
-                finalBody = {
-                    ...body,
-                    _method: methodUpperCase, // Laravel magic
-                };
-                break;
-            default:
-                finalMethod = methodUpperCase;
-                finalBody = body;
-                break;
-        }
-        return fetch(path, {
-            credentials: 'include',
-            method: finalMethod,
-            headers: {
-                ...getCSRFHeaders(),
-                'Content-Type': 'application/json',
-                Accept: 'application/json',
-            },
-            body: finalBody !== null ? JSON.stringify(finalBody) : null,
-        })
-            .then(getResponseAndDataObject)
-            .then(responseObject => throwResponseError(responseObject))
-            .catch(error => throwValidationError(error));
-    }
-
-    getActionPath(action, id = undefined) {
-        const { urlGenerator, resource } = this;
-        const { idParamName, host } = this.options;
-        const path = urlGenerator.resource(resource, action, id);
-        const idPattern = new RegExp(`:${idParamName}([/](.*)?)?$`, 'i');
-        const fullPath = trimEnd(host, '/') + path;
-        return fullPath.replace(idPattern, id);
-    }
-}
-
-export default ResourceApi;

package/src/lib/UrlGenerator.js

@@ -1,55 +0,0 @@
-import reduce from 'lodash/reduce';
-
-class UrlGenerator {
-    constructor(routes, opts) {
-        this.routes = routes;
-        this.options = {
-            paramFormat: ':{key}(\\([^\\)]*\\))?', // eslint-disable-line
-            ...opts,
-        };
-    }
-
-    route(key, opts) {
-        const options = {
-            withHost: false,
-            ...this.options,
-            ...opts,
-        };
-        const { withHost, paramFormat, ...params } = options;
-        const route = this.routes[key] || key;
-        const url = reduce(
-            params || {},
-            (str, v, k) =>
-                (v || null) !== null
-                    ? str.replace(new RegExp(paramFormat.replace(/\{\s*key\s*\}/gi, k), 'i'), v)
-                    : str,
-            route,
-        );
-
-        const host =
-            typeof window !== 'undefined'
-                ? `${window.location.protocol}//${window.location.host}`
-                : '';
-        const hostPattern = host !== null ? `^${host}` : '^$';
-        if (typeof withHost !== 'undefined' && withHost === true) {
-            return !url.match(hostPattern) ? `${host}${url}` : url;
-        }
-
-        const urlWithoutHost = url.replace(new RegExp(hostPattern, 'i'), '');
-        return urlWithoutHost === '' ? '/' : urlWithoutHost;
-    }
-
-    resource(resource, action, id = null) {
-        const resourceId = resource !== null ? resource.id() : null;
-        return resource !== null && resource.hasRoutes()
-            ? this.route(`resource.${resourceId}.${action}`, {
-                  id,
-              })
-            : this.route(`resource.${action}`, {
-                  resource: resourceId,
-                  id,
-              });
-    }
-}
-
-export default UrlGenerator;

package/src/lib/requests.js

@@ -1,120 +0,0 @@
-/* eslint-disable max-classes-per-file */
-import Cookies from 'js-cookie';
-
-export class ResponseError extends Error {
-    constructor(message, responseData, status) {
-        super(message);
-        this.name = 'ResponseError';
-        this.responseData = responseData;
-        this.status = status;
-    }
-
-    getResponseData() {
-        return this.responseData;
-    }
-}
-
-export class ValidationError extends ResponseError {
-    constructor(message, responseData, status) {
-        super(message, responseData, status);
-        this.name = 'ValidationError';
-    }
-
-    getErrors() {
-        return this.responseData;
-    }
-}
-
-export const getResponseAndDataObject = response =>
-    response.json().then(data => ({
-        data,
-        response,
-    }));
-
-export const getErrorsFromResponseError = error => {
-    const { name, responseData = {}, message = null } = error;
-    if (name === 'ValidationError') {
-        return responseData.errors || responseData;
-    }
-    if (name === 'ResponseError') {
-        return responseData.error || responseData;
-    }
-    return message;
-};
-
-export const throwResponseError = responseObject => {
-    const { response, data } = responseObject;
-    if (response.status >= 200 && response.status < 300) {
-        return data;
-    }
-    throw new ResponseError(response.statusText, data, response.status);
-};
-
-export const throwValidationError = error => {
-    if (error.name === 'ResponseError' && error.status === 422) {
-        throw new ValidationError(error.message, error.responseData, error.status);
-    }
-    throw error;
-};
-
-export const getJSON = (url, opts) => {
-    const { headers, ...options } = opts || {};
-    return fetch(url, {
-        method: 'GET',
-        headers: {
-            Accept: 'application/json',
-            ...(headers || null),
-        },
-        ...(options || null),
-    })
-        .then(getResponseAndDataObject)
-        .then(throwResponseError);
-};
-
-export const postJSON = (url, data, opts) => {
-    const { headers, ...options } = opts || {};
-    return fetch(url, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            Accept: 'application/json',
-            ...(headers || null),
-        },
-        body: JSON.stringify(data),
-        ...(options || null),
-    })
-        .then(getResponseAndDataObject)
-        .then(throwResponseError)
-        .catch(throwValidationError);
-};
-
-export const getXSRFToken = () => {
-    const cookies = Cookies.get();
-    return cookies['X-XSRF-TOKEN'] || null;
-};
-
-const getCsrfToken = name => {
-    const metaName = name || 'csrf-token';
-    const metas = [].slice.call(document.getElementsByTagName('meta'));
-    return metas.reduce(
-        (val, meta) =>
-            meta.getAttribute('name') === metaName ? meta.getAttribute('content') : val,
-        null,
-    );
-};
-
-export const getCSRFHeaders = name => {
-    const XSRF = getXSRFToken();
-    if (XSRF !== null) {
-        return {
-            'X-XSRF-TOKEN': XSRF,
-        };
-    }
-    const CSRF = getCsrfToken(name);
-    if (CSRF !== null) {
-        return {
-            'X-CSRF-TOKEN': CSRF,
-        };
-    }
-    return null;
-};

package/src/lib/useResourceApi.jsx

@@ -1,20 +0,0 @@
-import { useMemo } from 'react';
-import isObject from 'lodash/isObject';
-
-import ResourceApi from './ResourceApi';
-import { useDefinition } from '../contexts/Definition';
-import { useUrlGenerator } from '../contexts/UrlGenerator';
-
-const useResourceApi = resourceId => {
-    const definition = useDefinition();
-    const urlGenerator = useUrlGenerator();
-    const api = useMemo(() => {
-        const resource = isObject(resourceId) ? resourceId : definition.resource(resourceId);
-        return new ResourceApi(resource, urlGenerator, {
-            host: definition.apiEndpoint(),
-        });
-    }, [resourceId, definition, urlGenerator]);
-    return api;
-};
-
-export default useResourceApi;

package/src/lib/utils.js

@@ -1,13 +0,0 @@
-import isString from 'lodash/isString';
-import isObject from 'lodash/isObject';
-
-export const getLocalizedName = (definition, variant = 'default') => {
-    const { name, messages = {} } = definition;
-    const { name: nameMessages = {} } = messages;
-    if (isString(nameMessages)) {
-        return nameMessages;
-    }
-    return nameMessages[variant] || name;
-};
-
-export const isMessage = str => isObject(str) && typeof str.id !== 'undefined';

package/src/requests.js

@@ -1 +0,0 @@
-export * from './lib/requests';

package/src/styles/components/button-group.scss

@@ -1,10 +0,0 @@
-.container {
-    &.noWrap {
-        white-space: nowrap;
-
-        .button {
-            display: inline-block;
-            float: none;
-        }
-    }
-}

package/src/styles/components/errors.scss

@@ -1,5 +0,0 @@
-@import '../variables';
-
-.container {
-    position: relative;
-}

package/src/styles/components/loading.scss

@@ -1,36 +0,0 @@
-.component {
-    .dot {
-        display: inline-block;
-        border-radius: 100%;
-        animation-name: pulse;
-        animation-duration: .75s;
-        animation-iteration-count: infinite;
-        animation-timing-function: cubic-bezier(.2, .68, .18, 1.08);
-        animation-fill-mode: both;
-
-        &:nth-child(2) {
-            animation-delay: .12s;
-        }
-
-        &:nth-child(3) {
-            animation-delay: .24s;
-        }
-    }
-}
-
-@keyframes pulse {
-    0% {
-        transform: scale(1);
-        opacity: 1;
-    }
-
-    45% {
-        transform: scale(.1);
-        opacity: .7;
-    }
-
-    80% {
-        transform: scale(1);
-        opacity: 1;
-    }
-}

package/src/styles/variables.scss

@@ -1,5 +0,0 @@
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-
-$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
-@import '~@fortawesome/fontawesome-free/scss/variables';

package/src/utils.js

@@ -1 +0,0 @@
-export * from './lib/utils';