@sis-cc/dotstatsuite-visions 12.55.0 → 13.0.0

package/es/TableLayout/TableLayout.js

@@ -1,427 +0,0 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-import React, { Fragment, useState, useMemo, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import * as R from 'ramda';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import ViewColumn from '@mui/icons-material/ViewColumnOutlined';
-import ViewList from '@mui/icons-material/ViewListOutlined';
-import Reorder from '@mui/icons-material/Reorder';
-import ViewQuilt from '@mui/icons-material/ViewQuiltOutlined';
-import Undo from '@mui/icons-material/Undo';
-import Done from '@mui/icons-material/Done';
-import { visuallyHidden } from '@mui/utils';
-import { makeStyles } from '@mui/styles';
-import CheckBoxIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
-import { DragDropContext } from '@hello-pangea/dnd';
-import { withBlank } from '../utils';
-import TablePreview from '../TablePreview';
-import Box from './Box';
-import { changeLayout, getIsOptionalActivated } from './lib';
-import { BOX, wcagId } from './constants';
-import { Button } from '../';
-
-export var useStyles = makeStyles(function (theme) {
-  return {
-    dnd: {
-      userSelect: 'none'
-    },
-    buttonContainer: {
-      margin: theme.spacing(2, 0)
-    },
-    iconTitle: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      flexFlow: 'nowrap'
-    },
-    activationButton: {
-      backgroundColor: theme.palette.action.hover,
-      '&:hover': {
-        backgroundColor: theme.palette.action.selected
-      }
-    }
-  };
-});
-
-var transform = {
-  index: R.add(1)
-};
-
-var TableLayout = function TableLayout(_ref) {
-  var _boxLabel;
-
-  var _ref$layout = _ref.layout,
-      layout = _ref$layout === undefined ? {} : _ref$layout,
-      _ref$items = _ref.items,
-      items = _ref$items === undefined ? [] : _ref$items,
-      _ref$optionalItem = _ref.optionalItem,
-      optionalItem = _ref$optionalItem === undefined ? {} : _ref$optionalItem,
-      _ref$itemRenderer = _ref.itemRenderer,
-      itemRenderer = _ref$itemRenderer === undefined ? R.prop('name') : _ref$itemRenderer,
-      itemButtonProps = _ref.itemButtonProps,
-      labels = _ref.labels,
-      commit = _ref.commit,
-      noPreview = _ref.noPreview,
-      accessibility = _ref.accessibility;
-
-  var classes = useStyles();
-
-  var _useState = useState(layout),
-      currentLayout = _useState[0],
-      setCurrentLayout = _useState[1];
-
-  var boxLabel = (_boxLabel = {}, _boxLabel[BOX.header] = labels.column || BOX.header, _boxLabel[BOX.sections] = labels.section || BOX.sections, _boxLabel[BOX.rows] = labels.row || BOX.rows, _boxLabel);
-  useEffect(function () {
-    setCurrentLayout(layout);
-  }, [layout]);
-  var indexedItems = useMemo(function () {
-    var indexed = R.indexBy(R.prop('id'), items);
-    if (!R.isEmpty(optionalItem) && !R.isNil(optionalItem)) {
-      return R.assoc(optionalItem.id, optionalItem, indexed);
-    }
-    return indexed;
-  }, [items, optionalItem]);
-
-  var onChangeLayout = function onChangeLayout(props) {
-    return setCurrentLayout(changeLayout(_extends({}, props)));
-  };
-
-  var activateOptionalItem = function activateOptionalItem() {
-    var nextLayout = R.over(R.lensProp('header'), R.append(optionalItem.id), currentLayout);
-    setCurrentLayout(nextLayout);
-  };
-
-  var deactivateOptionalItem = function deactivateOptionalItem() {
-    setCurrentLayout(R.map(R.reject(R.equals(optionalItem.id)), currentLayout));
-  };
-
-  var onCommit = function onCommit() {
-    if (R.is(Function)(commit)) {
-      commit(currentLayout);
-    }
-  };
-
-  var onCancel = function onCancel() {
-    if (R.is(Function)(setCurrentLayout)) {
-      setCurrentLayout(layout);
-    }
-  };
-
-  var onDragStart = function onDragStart(_ref2, provided) {
-    var draggableId = _ref2.draggableId,
-        source = _ref2.source;
-
-    if (R.is(Function)(labels.wcagDragStart)) {
-      // start.source = droppableId & index
-      var dragZoneId = source.droppableId;
-      var dragLabel = R.pipe(R.prop(dragZoneId), R.find(R.propEq('id', draggableId)), itemRenderer)(currentLayout);
-      R.pipe(R.evolve(transform), R.prop('wcagDragStart', labels), provided.announce)(_extends({
-        dragZone: R.prop(dragZoneId)(boxLabel)
-      }, source, {
-        dragLabel: dragLabel
-      }));
-    }
-  };
-
-  var onDragUpdate = function onDragUpdate(_ref3, provided) {
-    var destination = _ref3.destination,
-        source = _ref3.source;
-
-    if (R.isNil(destination)) {
-      return;
-    }
-
-    if (R.is(Function)(labels.wcagDragUpdate)) {
-      var droppableId = destination.droppableId,
-          index = destination.index;
-
-      var length = R.ifElse(R.always(R.equals(droppableId, source.droppableId)), R.pipe(R.prop(droppableId), R.length), R.pipe(R.prop(droppableId), R.length, R.add(1)))(currentLayout);
-
-      R.pipe(R.evolve(transform), R.prop('wcagDragUpdate', labels), provided.announce)({
-        dropZone: R.prop(droppableId)(boxLabel),
-        dragZone: R.prop(source.droppableId)(boxLabel),
-        index: index,
-        length: length
-      });
-    }
-  };
-
-  var onDragEnd = function onDragEnd(layout) {
-    return function (_ref4, provided) {
-      var reason = _ref4.reason,
-          destination = _ref4.destination,
-          source = _ref4.source;
-
-      if (R.is(String)(labels.wcagDragCancel)) {
-        if (R.equals(reason, 'CANCEL')) {
-          provided.announce(labels.wcagDragCancel);
-        }
-      }
-
-      if (R.isNil(destination)) {
-        return;
-      }
-      if (R.is(Function)(labels.wcagDragEnd)) {
-        if (R.equals(reason, 'DROP')) {
-          var droppableId = destination.droppableId,
-              index = destination.index;
-
-          R.pipe(R.evolve(transform), R.prop('wcagDragEnd', labels), provided.announce)({
-            dropZone: R.prop(droppableId)(boxLabel),
-            dragZone: R.prop(source.droppableId)(boxLabel),
-            index: index
-          });
-        }
-      }
-
-      onChangeLayout({
-        dragIndex: source.index,
-        hoverIndex: destination.index,
-        dragZone: source.droppableId,
-        dropZone: destination.droppableId,
-        currentLayout: layout
-      });
-    };
-  };
-
-  var getItems = function getItems(level) {
-    return R.pipe(R.prop(level), function (ids) {
-      return R.props(ids, indexedItems);
-    }, R.filter(R.identity))(currentLayout);
-  };
-
-  var header = React.createElement(Box, {
-    title: labels.column,
-    Icon: ViewColumn,
-    items: getItems('header'),
-    labels: labels,
-    dropZoneLabel: BOX.header,
-    itemRenderer: itemRenderer,
-    itemButtonProps: itemButtonProps,
-    accessibility: accessibility,
-    md: accessibility ? 4 : 6
-  });
-
-  var sectionsAndRows = React.createElement(
-    Fragment,
-    null,
-    React.createElement(Box, {
-      title: labels.section,
-      Icon: Reorder,
-      items: getItems('sections'),
-      labels: labels,
-      dropZoneLabel: BOX.sections,
-      itemRenderer: itemRenderer,
-      itemButtonProps: itemButtonProps,
-      accessibility: accessibility,
-      md: accessibility ? 4 : 12
-    }),
-    React.createElement(Box, {
-      title: labels.row,
-      Icon: ViewList,
-      items: getItems('rows'),
-      labels: labels,
-      dropZoneLabel: BOX.rows,
-      itemRenderer: itemRenderer,
-      itemButtonProps: itemButtonProps,
-      accessibility: accessibility,
-      md: accessibility ? 4 : 12
-    })
-  );
-
-  var isOptionalActivated = getIsOptionalActivated(currentLayout, R.prop('id', optionalItem));
-
-  return React.createElement(
-    Grid,
-    { 'data-testid': 'table-layout-test-id', container: true },
-    React.createElement(
-      'div',
-      { id: wcagId, 'aria-live': 'assertive', style: { display: 'none' } },
-      labels.wcagDragExplanation
-    ),
-    React.createElement(
-      DragDropContext,
-      {
-        onDragEnd: onDragEnd(currentLayout),
-        onDragStart: onDragStart,
-        onDragUpdate: onDragUpdate
-      },
-      React.createElement(
-        Grid,
-        { container: true, direction: 'row', spacing: 1, className: classes.dnd },
-        React.createElement(
-          Grid,
-          { item: true, xs: 12 },
-          React.createElement(
-            Grid,
-            { container: true, spacing: 1 },
-            React.createElement(
-              Grid,
-              { tabIndex: 0, item: true, xs: 12, md: accessibility ? 12 : 6 },
-              React.createElement(
-                'span',
-                null,
-                labels.help
-              ),
-              React.createElement(
-                Typography,
-                { style: visuallyHidden },
-                labels.wcagDragExplanation
-              )
-            ),
-            R.not(accessibility) && header
-          )
-        ),
-        React.createElement(
-          Grid,
-          { container: true, spacing: 1 },
-          accessibility && header,
-          accessibility && sectionsAndRows,
-          R.not(accessibility) && React.createElement(
-            Grid,
-            { item: true, xs: 12, md: 6 },
-            sectionsAndRows
-          ),
-          !noPreview && React.createElement(
-            Grid,
-            { item: true, xs: 12, md: accessibility ? 12 : 6, className: cx(classes.wrapper) },
-            React.createElement(
-              'div',
-              { className: classes.iconTitle },
-              React.createElement(ViewQuilt, null),
-              React.createElement(
-                Typography,
-                { tabIndex: 0, variant: 'subtitle1' },
-                labels.table
-              )
-            ),
-            React.createElement(TablePreview, {
-              header: R.props(R.prop('header', currentLayout), indexedItems),
-              sections: R.props(R.prop('sections', currentLayout), indexedItems),
-              rows: R.props(R.prop('rows', currentLayout), indexedItems),
-              itemRenderer: itemRenderer
-            })
-          )
-        )
-      )
-    ),
-    React.createElement(
-      Grid,
-      {
-        container: true,
-        justifyContent: 'space-between',
-        className: classes.buttonContainer,
-        spacing: 1
-      },
-      React.createElement(
-        Grid,
-        {
-          item: true,
-          'data-testid': isOptionalActivated ? 'table-layout-deactivate-optional' : 'table-layout-activate-optional'
-        },
-        !R.isNil(optionalItem) && !R.isEmpty(optionalItem) && React.createElement(
-          Button,
-          {
-            className: classes.activationButton,
-            'aria-label': R.prop('activationLabel', optionalItem),
-            color: 'primary',
-            onClick: isOptionalActivated ? deactivateOptionalItem : activateOptionalItem,
-            startIcon: isOptionalActivated ? React.createElement(Done, null) : React.createElement(CheckBoxIcon, null)
-          },
-          React.createElement(
-            Typography,
-            { variant: 'body2' },
-            R.prop('activationLabel', optionalItem)
-          )
-        )
-      ),
-      React.createElement(
-        Grid,
-        { item: true },
-        React.createElement(
-          Grid,
-          { container: true, justifyContent: 'flex-end', display: 'flex', spacing: 1 },
-          R.map(function (button) {
-            return React.createElement(
-              Grid,
-              { item: true, key: button.id, 'data-testid': button['data-testid'] },
-              React.createElement(
-                Button,
-                _extends({ 'aria-label': button.label, color: 'primary' }, button),
-                React.createElement(
-                  Typography,
-                  { variant: 'body2' },
-                  button.label
-                )
-              )
-            );
-          })([{
-            id: 2,
-            label: labels.cancel,
-            onClick: onCancel,
-            startIcon: React.createElement(Undo, null),
-            'datatest-id': 'table-layout-cancel'
-          }, {
-            id: 1,
-            label: labels.commit,
-            onClick: onCommit,
-            startIcon: React.createElement(Done, null),
-            variant: 'contained',
-            alternative: 'siscc',
-            className: classes.applyButton,
-            'data-testid': 'table-layout-apply'
-          }])
-        )
-      )
-    )
-  );
-};
-
-var patern = PropTypes.shape({
-  id: PropTypes.string,
-  count: PropTypes.number
-});
-
-TableLayout.propTypes = process.env.NODE_ENV !== "production" ? {
-  layout: PropTypes.shape({
-    header: PropTypes.arrayOf(PropTypes.string),
-    sections: PropTypes.arrayOf(PropTypes.string),
-    rows: PropTypes.arrayOf(PropTypes.string)
-  }),
-  items: PropTypes.arrayOf(patern),
-  optionalItem: patern,
-  itemRenderer: PropTypes.func,
-  commit: PropTypes.func,
-  noPreview: PropTypes.bool,
-  itemButtonProps: PropTypes.object,
-  labels: PropTypes.shape({
-    commit: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    cancel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    row: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    column: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    section: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    table: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    asc: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    desc: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    help: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    one: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    wcagDragStart: PropTypes.func,
-    wcagDragUpdate: PropTypes.func,
-    wcagDragEnd: PropTypes.func,
-    wcagDragCancel: PropTypes.string,
-    wcagDragExplanation: PropTypes.string
-  }),
-  accessibility: PropTypes.bool
-} : {};
-
-export default withBlank(function (_ref5) {
-  var _ref5$layout = _ref5.layout,
-      layout = _ref5$layout === undefined ? [] : _ref5$layout,
-      isBlank = _ref5.isBlank;
-  return {
-    isBlank: R.or(isBlank, R.pipe(R.values, R.all(R.isEmpty))(layout))
-  };
-})(TableLayout);

package/es/TableLayout/constants.js

@@ -1,11 +0,0 @@
-export var ITEMS_TYPES = {
-  DND: 'DND'
-};
-
-export var BOX = {
-  header: 'header',
-  sections: 'sections',
-  rows: 'rows'
-};
-
-export var wcagId = 'dnd-how-drag-item';

package/es/TableLayout/index.js

@@ -1,75 +0,0 @@
-/**
- * TableLayout it's drag and drop, you can customise and see with the preview the layout of your table
- *
- * @memberOf VISIONS
- * @name TableLayout
- * @tag component
- * @api public
- * @props
- * const itemButtonProps= { id¹: { options, value, onChange }}
- * ¹ - first id in patern
- *
- * values is usefull for tablePreview only
- *
- * const patern = {
- *   id: PropTypes.string,
- *   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *   values: PropTypes.arrayOf(
- *     PropTypes.shape({
- *       id: PropTypes.string,
- *       label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     }),
- *   ),
- * };
- *
- * TableLayout.propTypes = {
- *   layout: PropTypes.shape({
- *     header: PropTypes.arrayOf(PropTypes.shape(patern)),
- *     sections: PropTypes.arrayOf(PropTypes.shape(patern)),
- *     rows: PropTypes.arrayOf(PropTypes.shape(patern)),
- *   }),
- *   itemRenderer: PropTypes.func,
- *   commit: PropTypes.func,
- *   noPreview: PropTypes.bool,
- *   itemButtonProps: PropTypes.object,
- *   labels: PropTypes.shape({
- *     commit: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     cancel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     row: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     column: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     section: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     table: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     asc: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     desc: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     help: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     one: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *   }),
- *   accessibility: PropTypes.bool,
- * };
- * @theme
- * {
- *   palette: {
- *     primary: {
- *       main: // header colors. global override: outerPalette.primaryMain
- *     },
- *     tertiary: {
- *       dark: // sections colors
- *       light: // rows colors
- *     },
- *     secondary: {
- *       dark: // used if tertiary dark is null
- *       light: // used if tertiary light is null
- *     }
- *     common: {
- *       white: // background color select asc/desc
- *     }
- *   },
- *   typography: {
- *     subtitle1: {
- *       // description "information DnD"
- *     }
- *   }
- * }
- **/
-
-export { default } from './TableLayout';

package/es/TableLayout/lib.js

@@ -1,31 +0,0 @@
-import * as R from 'ramda';
-
-export var changeLayout = function changeLayout(_ref) {
-  var dragIndex = _ref.dragIndex,
-      hoverIndex = _ref.hoverIndex,
-      dragZone = _ref.dragZone,
-      dropZone = _ref.dropZone,
-      currentLayout = _ref.currentLayout;
-
-  if (R.equals(dragZone, dropZone)) {
-    return R.over(R.lensProp(dropZone), R.move(dragIndex, hoverIndex), currentLayout);
-  }
-  var item = R.pipe(R.prop(dragZone), R.nth(dragIndex))(currentLayout);
-  return R.pipe(R.over(R.lensProp(dragZone), R.without([item])), R.over(R.lensProp(dropZone), R.insert(hoverIndex, item)))(currentLayout);
-};
-
-export var rejectHiddenElement = R.map(R.reject(function (_ref2) {
-  var isHidden = _ref2.isHidden;
-  return isHidden;
-}));
-
-export var addHiddenElement = function addHiddenElement(layout) {
-  return R.mapObjIndexed(function (values, key) {
-    return R.pipe(R.prop(key), R.concat(values))(layout);
-  });
-};
-
-export var getIsOptionalActivated = function getIsOptionalActivated(layout, optionalId) {
-  var founded = R.pipe(R.values, R.unnest, R.find(R.equals(optionalId)))(layout);
-  return !R.isNil(founded);
-};