@papillonarts/components 0.6.0 → 0.8.0

package/build/primer/Grid/FlexGrid/FlexGrid.js

@@ -0,0 +1,244 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlexGrid = FlexGrid;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _uuid = require("uuid");
+var _string = require("@papillonarts/library/string");
+var _sort = require("@papillonarts/library/sort");
+var _visibilityDisplay = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/visibility-display.scss"));
+var _flexbox = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/flexbox.scss"));
+var _borders = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/borders.scss"));
+var _padding = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/padding.scss"));
+var _margin = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/margin.scss"));
+var _typography = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/typography.scss"));
+var _layout = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/layout.scss"));
+var _colors = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/colors.scss"));
+var _index = _interopRequireDefault(require("@papillonarts/css/build/primer/truncate/index.scss"));
+var _grid = _interopRequireDefault(require("../../Layout/grid.scss"));
+var _FlexGrid = require("./FlexGrid.prop");
+var _FlexGrid2 = _interopRequireDefault(require("./FlexGrid.scss"));
+var _Radio = require("../../Form/Radio");
+var _Checkbox = require("../../Form/Checkbox");
+var _Icon = require("../../Icon");
+var _jsxRuntime = require("react/jsx-runtime");
+function FlexGrid(_ref) {
+  var _items$;
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _FlexGrid.defaultProps.className : _ref$className,
+    items = _ref.items,
+    _ref$idIndex = _ref.idIndex,
+    idIndex = _ref$idIndex === void 0 ? _FlexGrid.defaultProps.idIndex : _ref$idIndex,
+    _ref$isSelectedIndex = _ref.isSelectedIndex,
+    isSelectedIndex = _ref$isSelectedIndex === void 0 ? _FlexGrid.defaultProps.isSelectedIndex : _ref$isSelectedIndex,
+    _ref$selection = _ref.selection,
+    selection = _ref$selection === void 0 ? _FlexGrid.defaultProps.selection : _ref$selection,
+    sort = _ref.sort,
+    _ref$onChange = _ref.onChange,
+    _onChange = _ref$onChange === void 0 ? _FlexGrid.defaultProps.onChange : _ref$onChange,
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? _FlexGrid.defaultProps.onClick : _ref$onClick,
+    _ref$onDoubleClick = _ref.onDoubleClick,
+    _onDoubleClick = _ref$onDoubleClick === void 0 ? _FlexGrid.defaultProps.onDoubleClick : _ref$onDoubleClick,
+    _ref$iconColor = _ref.iconColor,
+    iconColor = _ref$iconColor === void 0 ? _FlexGrid.defaultProps.iconColor : _ref$iconColor,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? _FlexGrid.defaultProps.state : _ref$state;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])(className, (0, _defineProperty2["default"])({}, _FlexGrid2["default"]['flexGrid-inactive'], state === _FlexGrid.flexGridState.inactive)),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _flexbox["default"]['flex-items-start'], _colors["default"]['bg-blue-light'], (0, _defineProperty2["default"])({}, _borders["default"].border, items === null || items === void 0 ? void 0 : items[0])),
+      children: items === null || items === void 0 || (_items$ = items[0]) === null || _items$ === void 0 || (_items$ = _items$.names) === null || _items$ === void 0 ? void 0 : _items$.map(function (name, nameIndex) {
+        var _items$2;
+        var isIdColumn = nameIndex === idIndex;
+        var isSelectedColumn = nameIndex === isSelectedIndex;
+        var isSelectedComponent = selection === _FlexGrid.flexGridSelection.radio ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
+          ariaAttr: {
+            describedBy: name
+          },
+          isChecked: items.map(function (item) {
+            return item.values[1];
+          }).every(function (isSelected) {
+            return isSelected === true;
+          }),
+          onChange: function onChange(event) {
+            var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref2) {
+              var values = _ref2.values;
+              return values === null || values === void 0 ? void 0 : values.map(function (value, valueIndex) {
+                return valueIndex === isSelectedIndex ? event.target.checked : value;
+              });
+            }).map(function (newItem) {
+              return {
+                id: newItem[idIndex],
+                isSelected: newItem[isSelectedIndex]
+              };
+            });
+            _onChange(newItems);
+          }
+        });
+        var sortComponent;
+        if (sort.index === nameIndex && sort.value === name) {
+          if (sort.order === _sort.sortOrder.ascending) {
+            sortComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+              icon: _Icon.iconName.TriangleUp16,
+              size: _Icon.iconSize.small,
+              fill: iconColor.sort
+            });
+          } else {
+            sortComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+              icon: _Icon.iconName.TriangleDown16,
+              size: _Icon.iconSize.small,
+              fill: iconColor.sort
+            });
+          }
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+          children: !isIdColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _classnames["default"])(_typography["default"].h6, _visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _padding["default"]['p-2'], _index["default"]['css-truncate'], _index["default"]['css-truncate-overflow'], _FlexGrid2["default"].item, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _grid["default"]['col-2'], isSelectedColumn), _grid["default"]['col-12'], !isSelectedColumn), _flexbox["default"]['flex-justify-center'], isSelectedColumn), _flexbox["default"]['flex-justify-between'], !isSelectedColumn)),
+            onClick: function onClick() {
+              if (!isSelectedColumn) {
+                _onClick({
+                  index: nameIndex,
+                  value: name,
+                  order: sort.order
+                });
+              }
+            },
+            onKeyPress: function onKeyPress() {},
+            role: "button",
+            tabIndex: 0,
+            children: isSelectedColumn ? isSelectedComponent : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-justify-between'], _layout["default"]['width-full']),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: (0, _classnames["default"])(_index["default"]['css-truncate'], _index["default"]['css-truncate-overflow']),
+                children: (0, _string.getCapizalizedString)({
+                  string: name
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-items-start'], _margin["default"]['ml-1']),
+                children: [sortComponent, nameIndex < (items === null || items === void 0 || (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.names.length) - 1 ?
+                /*#__PURE__*/
+                // eslint-disable-line no-unsafe-optional-chaining
+                (0, _jsxRuntime.jsx)("span", {
+                  className: (0, _classnames["default"])(_margin["default"]['ml-1'], _colors["default"]['text-gray-light']),
+                  children: " |"
+                }) : null]
+              })]
+            })
+          })
+        }, (0, _uuid.v1)());
+      })
+    }), items === null || items === void 0 ? void 0 : items.map(function (item, itemIndex) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _flexbox["default"]['flex-items-start'], _borders["default"].border, _FlexGrid2["default"].item, _FlexGrid2["default"].row),
+        onClick: function onClick() {
+          var bubleUpNewItems = true;
+          var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref3, newItemIndex) {
+            var values = _ref3.values;
+            return values === null || values === void 0 ? void 0 : values.map(function (newValue, newValueIndex) {
+              if ((0, _typeof2["default"])(newValue) === 'object' && ['FileDirectory16', 'File16'].includes(newValue === null || newValue === void 0 ? void 0 : newValue.icon)) {
+                bubleUpNewItems = false;
+              }
+              return newItemIndex === itemIndex && newValueIndex === isSelectedIndex ? !newValue : newValue;
+            });
+          }).map(function (newItem) {
+            return {
+              id: newItem[idIndex],
+              isSelected: newItem[isSelectedIndex]
+            };
+          });
+          if (bubleUpNewItems) {
+            _onChange(newItems);
+          }
+        },
+        onKeyPress: function onKeyPress() {},
+        role: "button",
+        tabIndex: 0,
+        onDoubleClick: function onDoubleClick() {
+          _onDoubleClick(itemIndex);
+        },
+        children: item.values.map(function (value, valueIndex) {
+          var isIdColumn = valueIndex === idIndex;
+          var isSelectedColumn = valueIndex === isSelectedIndex;
+          var isSelectedComponent = selection === _FlexGrid.flexGridSelection.radio ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.Radio, {
+            name: "isSelected",
+            isChecked: item.values[isSelectedIndex] === true,
+            onChange: function onChange(event) {
+              var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref4, newItemIndex) {
+                var names = _ref4.names,
+                  values = _ref4.values;
+                return {
+                  names: names,
+                  values: values.map(function (newValue, newValueIndex) {
+                    if (newItemIndex === itemIndex && newValueIndex === isSelectedIndex) {
+                      return event.target.checked;
+                    }
+                    if (newItemIndex === itemIndex && newValueIndex !== isSelectedIndex) {
+                      return newValue;
+                    }
+                    if (newItemIndex !== itemIndex && newValueIndex === isSelectedIndex) {
+                      return false;
+                    }
+                    if (newItemIndex !== itemIndex && newValueIndex !== isSelectedIndex) {
+                      return newValue;
+                    }
+                    return newValue;
+                  })
+                };
+              });
+              _onChange(newItems);
+            }
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
+            ariaAttr: {
+              describedBy: 'isSelected'
+            },
+            isChecked: item.values[isSelectedIndex] === true,
+            onChange: function onChange(event) {
+              var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref5, newItemIndex) {
+                var values = _ref5.values;
+                return values === null || values === void 0 ? void 0 : values.map(function (newValue, newValueIndex) {
+                  return newItemIndex === itemIndex && newValueIndex === isSelectedIndex ? event.target.checked : newValue;
+                });
+              }).map(function (newItem) {
+                return {
+                  id: newItem[idIndex],
+                  isSelected: newItem[isSelectedIndex]
+                };
+              });
+              _onChange(newItems);
+            }
+          });
+          var iconComponent = value !== null && value !== void 0 && value.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            icon: _Icon.iconName[value.icon],
+            size: _Icon.iconSize.small,
+            fill: iconColor.object
+          }) : null;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+            children: !isIdColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _padding["default"]['p-2'], _index["default"]['css-truncate'], _index["default"]['css-truncate-overflow'], _typography["default"]['no-wrap'], (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _grid["default"]['col-2'], isSelectedColumn), _grid["default"]['col-12'], !isSelectedColumn), _flexbox["default"]['flex-justify-center'], isSelectedColumn), _flexbox["default"]['flex-justify-start'], !isSelectedColumn)),
+              children: isSelectedColumn ? isSelectedComponent : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: (0, _classnames["default"])(_index["default"]['css-truncate'], _index["default"]['css-truncate-overflow']),
+                children: [(value === null || value === void 0 ? void 0 : value.icon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+                  children: [iconComponent, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: _margin["default"]['ml-2'],
+                    children: value.value
+                  })]
+                }), value instanceof Date && "".concat(value.toLocaleDateString(), " ").concat(value.toLocaleTimeString()), Array.isArray(value) && value.find(function (_ref6) {
+                  var isSelected = _ref6.isSelected;
+                  return isSelected === true;
+                }).text, !(value !== null && value !== void 0 && value.icon) && !(value instanceof Date) && !Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.toString())]
+              })
+            }, (0, _uuid.v1)())
+          }, (0, _uuid.v1)());
+        })
+      }, (0, _uuid.v1)());
+    })]
+  });
+}
+FlexGrid.propTypes = _FlexGrid.propTypes;

package/build/primer/Grid/FlexGrid/FlexGrid.md

@@ -0,0 +1,106 @@
+# FlexGrid
+
+> You can use flex utilities on the container and columns to create a flexbox grid.
+> This can be useful for keeping columns the same height, justifying content and vertically aligning items. The flexbox grid is also great for working with responsive layouts.
+
+# Variants
+
+> - RadioWithSelection, RadioWithSelectionInactive
+> - RadioWithoutSelection, RadioWithoutSelectionInactive
+> - CheckboxWithSelection, CheckboxWithSelectionInactive
+> - CheckboxWithoutSelection, CheckboxWithoutSelectionInactive
+
+## RadioWithSelection
+
+```jsx
+<FlexGrid
+  items={radioItemsWithSelection}
+  idIndex={0}
+  isSelectedIndex={1}
+  selection={flexGridSelection.radio}
+  sort={sortDefault}
+  onChange={action('onChange')}
+  onDoubleClick={action('onDoubleClick')}
+/>
+```
+
+## RadioWithSelectionInactive
+
+```jsx
+<FlexGrid
+  items={radioItemsWithSelection}
+  idIndex={0}
+  isSelectedIndex={1}
+  selection={flexGridSelection.radio}
+  sort={sortDefault}
+  onChange={action('onChange')}
+  onDoubleClick={action('onDoubleClick')}
+  state={flexGridState.inactive}
+/>
+```
+
+## RadioWithoutSelection
+
+```jsx
+<FlexGrid idIndex={0} items={radioItemsWithoutSelection} sort={sortDefault} onChange={action('onChange')} />
+```
+
+## RadioWithoutSelectionInactive
+
+```jsx
+<FlexGrid idIndex={0} items={radioItemsWithoutSelection} sort={sortDefault} onChange={action('onChange')} state={flexGridState.inactive} />
+```
+
+## CheckboxWithSelection
+
+```jsx
+<FlexGrid
+  items={checkboxItemsWithSelection}
+  idIndex={0}
+  isSelectedIndex={1}
+  selection={flexGridSelection.checkbox}
+  sort={sortDefault}
+  onChange={action('onChange')}
+  onDoubleClick={action('onDoubleClick')}
+/>
+```
+
+## CheckboxWithSelectionInactive
+
+```jsx
+<FlexGrid
+  items={checkboxItemsWithSelection}
+  idIndex={0}
+  isSelectedIndex={1}
+  selection={flexGridSelection.checkbox}
+  sort={sortDefault}
+  onChange={action('onChange')}
+  onDoubleClick={action('onDoubleClick')}
+  state={flexGridState.inactive}
+/>
+```
+
+## CheckboxWithoutSelection
+
+```jsx
+<FlexGrid
+  idIndex={0}
+  items={checkboxItemsWithoutSelection}
+  sort={sortDefault}
+  onChange={action('onChange')}
+  onDoubleClick={action('onDoubleClick')}
+/>
+```
+
+## CheckboxWithoutSelectionInactive
+
+```jsx
+<FlexGrid
+  idIndex={0}
+  items={checkboxItemsWithoutSelection}
+  sort={sortDefault}
+  onChange={action('onChange')}
+  onDoubleClick={action('onDoubleClick')}
+  state={flexGridState.inactive}
+/>
+```

package/build/primer/Grid/FlexGrid/FlexGrid.prop.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.flexGridState = exports.flexGridSelection = exports.defaultProps = void 0;
+var _propTypes = require("prop-types");
+var flexGridState = exports.flexGridState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+var flexGridSelection = exports.flexGridSelection = {
+  checkbox: 'checkbox',
+  radio: 'radio'
+};
+var propTypes = exports.propTypes = {
+  className: _propTypes.string,
+  items: _propTypes.array.isRequired,
+  idIndex: _propTypes.number,
+  isSelectedIndex: _propTypes.number,
+  selection: (0, _propTypes.oneOf)(Object.keys(flexGridSelection)),
+  sort: (0, _propTypes.shape)({
+    index: _propTypes.number,
+    value: _propTypes.string,
+    order: _propTypes.string
+  }).isRequired,
+  onChange: _propTypes.func,
+  onClick: _propTypes.func,
+  onDoubleClick: _propTypes.func,
+  iconColor: (0, _propTypes.shape)({
+    sort: _propTypes.string,
+    object: _propTypes.string
+  }),
+  state: (0, _propTypes.oneOf)(Object.keys(flexGridState))
+};
+var defaultProps = exports.defaultProps = {
+  className: null,
+  idIndex: -1,
+  isSelectedIndex: -1,
+  selection: flexGridSelection.checkbox,
+  onChange: function onChange() {},
+  onClick: function onClick() {},
+  onDoubleClick: function onDoubleClick() {},
+  iconColor: {
+    sort: '#990000',
+    object: '#79b8ff'
+  },
+  state: flexGridState.active
+};

package/build/primer/Grid/FlexGrid/FlexGrid.scss

@@ -0,0 +1,26 @@
+// stylelint-disable custom-property-pattern
+
+.item {
+  &:hover {
+    cursor: pointer;
+    user-select: none;
+  }
+}
+
+.row {
+  &:nth-of-type(odd) {
+    background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)); // custom-style
+  }
+}
+
+input[type='checkbox'] {
+  &:hover {
+    cursor: pointer;
+    user-select: none;
+  }
+}
+
+// custom-style
+// .flexGrid-inactive {
+//   @include inactive;
+// }