@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

package/lib/cjs/components/DataTable/DataTable.stories.js

@@ -0,0 +1,310 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = exports.CustomContent = void 0;
+
+var _parseInt2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-int"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _sort = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/sort"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/keys"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _data = require("@react-stately/data");
+
+var _ApplicationIcon = _interopRequireDefault(require("mdi-react/ApplicationIcon"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _faker = require("@faker-js/faker");
+
+var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'DataTable',
+  component: _index.DataTable,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    density: {
+      control: {
+        type: 'radio',
+        options: ['compact', 'regular', 'spacious']
+      },
+      defaultValue: 'spacious'
+    },
+    overflowMode: {
+      control: {
+        type: 'radio',
+        options: ['truncate', 'wrap']
+      },
+      defaultValue: 'truncate'
+    },
+    width: {
+      defaultValue: '100%',
+      control: {
+        type: 'text'
+      }
+    },
+    height: {
+      defaultValue: 565,
+      control: {
+        type: 'number'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  var columns = [{
+    name: 'Country',
+    key: 'country'
+  }, {
+    name: 'Population',
+    key: 'population'
+  }, {
+    name: 'Continent',
+    key: 'continent'
+  }];
+  var rows = [{
+    id: 1,
+    country: 'USA',
+    population: '320,000,000',
+    continent: 'North America'
+  }, {
+    id: 2,
+    country: 'Canada',
+    population: '37,000,000',
+    continent: 'North America'
+  }, {
+    id: 3,
+    country: 'China',
+    population: '1,398,000,000',
+    continent: 'Asia'
+  }, {
+    id: 4,
+    country: 'France',
+    population: '67,000,000',
+    continent: 'Europe'
+  }];
+  return (0, _react2.jsx)(_index.DataTable, (0, _extends2["default"])({}, args, {
+    "aria-label": "Static table"
+  }), (0, _react2.jsx)(_index.DataTableHeader, {
+    columns: columns
+  }, function (column) {
+    return (0, _react2.jsx)(_index.DataTableColumn, {
+      align: "center"
+    }, column.name);
+  }), (0, _react2.jsx)(_index.DataTableBody, {
+    items: rows
+  }, function (item) {
+    return (0, _react2.jsx)(_index.DataTableRow, null, function (columnKey) {
+      return (0, _react2.jsx)(_index.DataTableCell, null, item[columnKey]);
+    });
+  }));
+};
+
+exports.Default = Default;
+
+var CustomContent = function CustomContent(args) {
+  /**
+   * isChromatic checks if the code is running in Chromatic environment
+   * @returns {Boolean}
+   * Source: https://www.chromatic.com/docs/ischromatic
+   * */
+  var chromatic = (0, _isChromatic["default"])();
+  var columns = [{
+    name: 'Name/ID',
+    key: 'name_id',
+    isSortable: true
+  }, {
+    name: 'Status',
+    key: 'status',
+    isSortable: false
+  }, {
+    name: 'Category',
+    key: 'category',
+    isSortable: false
+  }, {
+    name: 'Date Submitted',
+    key: 'date',
+    isSortable: true
+  }, {
+    name: 'Submitted By',
+    key: 'submitted_by',
+    isSortable: true
+  }, {
+    name: 'Menu',
+    key: 'menu',
+    isSortable: false
+  }];
+  var list = (0, _data.useAsyncList)({
+    load: function load(_ref) {
+      return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var _context, _context2, _context3;
+
+        var signal, cursor, res, json, random, fakeData, tableData;
+        return _regenerator["default"].wrap(function _callee$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                signal = _ref.signal, cursor = _ref.cursor;
+
+                if (cursor) {
+                  // eslint-disable-next-line no-param-reassign
+                  cursor = cursor.replace(/^http:\/\//i, 'https://');
+                }
+
+                _context5.next = 4;
+                return fetch(cursor || 'https://pokeapi.co/api/v2/pokemon', {
+                  signal: signal
+                });
+
+              case 4:
+                res = _context5.sent;
+                _context5.next = 7;
+                return res.json();
+
+              case 7:
+                json = _context5.sent;
+
+                random = function random(items) {
+                  return items[Math.floor(Math.random() * items.length)];
+                };
+
+                fakeData = (0, _map["default"])(_context = (0, _concat["default"])(_context2 = []).call(_context2, (0, _keys["default"])(_context3 = Array(json.results.length)).call(_context3))).call(_context, function (key) {
+                  var _context4;
+
+                  return {
+                    id: key,
+                    date: chromatic ? '2022-12-25' : "".concat(_faker.faker.date.past().toLocaleDateString('fr-CA')),
+                    category: chromatic ? 'Other' : "".concat(random(['App Catalog', 'Delete Environment', 'Other'])),
+                    status: (0, _react2.jsx)(_index.DataTableChip, {
+                      cell: chromatic ? 'Pending' : "".concat(random(['Pending', 'Rejected', 'Approved', 'Failed']))
+                    }),
+                    submitted_by: chromatic ? 'John Doe' : (0, _concat["default"])(_context4 = "".concat(_faker.faker.name.firstName(), " ")).call(_context4, _faker.faker.name.lastName()),
+                    name_id: (0, _react2.jsx)(_index.DataTableMultiLine, {
+                      cell: [{
+                        name: chromatic ? 'ACME' : "".concat(_faker.faker.company.name()),
+                        icon: _ApplicationIcon["default"],
+                        accountId: chromatic ? '123456789' : "".concat(_faker.faker.finance.routingNumber())
+                      }]
+                    }),
+                    menu: (0, _react2.jsx)(_index.DataTableMenu, null)
+                  };
+                });
+                tableData = (0, _map["default"])(fakeData).call(fakeData, function (item, i) {
+                  return (0, _assign["default"])({}, item, json.results[i]);
+                });
+                return _context5.abrupt("return", {
+                  items: tableData,
+                  cursor: json.next
+                });
+
+              case 12:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee);
+      }))();
+    },
+    sort: function sort(_ref2) {
+      return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+        var items, sortDescriptor, cmp;
+        return _regenerator["default"].wrap(function _callee2$(_context7) {
+          while (1) {
+            switch (_context7.prev = _context7.next) {
+              case 0:
+                items = _ref2.items, sortDescriptor = _ref2.sortDescriptor;
+                return _context7.abrupt("return", {
+                  items: (0, _sort["default"])(items).call(items, function (a, b) {
+                    var _context6;
+
+                    var first = sortDescriptor.column !== 'name_id' ? a[sortDescriptor.column] : a[sortDescriptor.column].props.cell[0].name;
+                    var second = sortDescriptor.column !== 'name_id' ? b[sortDescriptor.column] : b[sortDescriptor.column].props.cell[0].name;
+
+                    if ((0, _includes["default"])(_context6 = sortDescriptor.column).call(_context6, 'date')) {
+                      cmp = new Date(first) < new Date(second) ? -1 : 1;
+                    } else {
+                      cmp = ((0, _parseInt2["default"])(first, 10) || first) < ((0, _parseInt2["default"])(second, 10) || second) ? -1 : 1;
+                    }
+
+                    if (sortDescriptor.direction === 'descending') {
+                      cmp *= -1;
+                    }
+
+                    return cmp;
+                  })
+                });
+
+              case 2:
+              case "end":
+                return _context7.stop();
+            }
+          }
+        }, _callee2);
+      }))();
+    }
+  });
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.DataTable, (0, _extends2["default"])({}, args, {
+    sortDescriptor: list.sortDescriptor,
+    onSortChange: (0, _sort["default"])(list),
+    "aria-label": "Custom content table",
+    onAction: (0, _addonActions.action)('onAction')
+  }), (0, _react2.jsx)(_index.DataTableHeader, {
+    columns: columns
+  }, function (column) {
+    return (0, _react2.jsx)(_index.DataTableColumn, {
+      width: // eslint-disable-next-line no-nested-ternary
+      column.key === 'name_id' ? '26.5%' : column.key === 'menu' ? '5%' : '16%',
+      align: column.key !== 'menu' ? 'start' : 'center',
+      allowsSorting: column.isSortable,
+      hideHeader: column.key === 'menu'
+    }, column.name);
+  }), (0, _react2.jsx)(_index.DataTableBody, {
+    items: list.items,
+    loadingState: list.loadingState,
+    onLoadMore: list.loadMore
+  }, function (item) {
+    return (0, _react2.jsx)(_index.DataTableRow, {
+      key: item.name
+    }, function (columnKey) {
+      return (0, _react2.jsx)(_index.DataTableCell, null, item[columnKey]);
+    });
+  })));
+};
+
+exports.CustomContent = CustomContent;

package/lib/cjs/components/DataTable/DataTable.styles.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _text = require("./../../styles/variants/text");
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var tableCell = _objectSpread(_objectSpread({}, _text.text.tableData), {}, {
+  color: 'text.primary',
+  position: 'relative',
+  display: 'flex',
+  fontSize: '13px',
+  height: '100%',
+  '&.is-key-focused': {
+    outline: '1px',
+    outlineStyle: 'solid',
+    outlineColor: 'accent.50',
+    outlineOffset: '-1px',
+    backgroundColor: 'white'
+  },
+  '&.is-align-start': {
+    alignItems: 'flex-start'
+  },
+  '&.is-align-center': {
+    alignItems: 'center'
+  },
+  '&.is-align-end': {
+    alignItems: 'flex-end'
+  }
+});
+
+var tableCellContents = {
+  flex: '1 1 0%',
+  minWidth: '0px',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  fontWeight: '400',
+  justifyContent: 'center'
+};
+var tableRow = {
+  position: 'relative',
+  cursor: 'default',
+  borderBottom: '1px',
+  outline: '0',
+  borderBottomStyle: 'solid !important',
+  backgroundColor: 'accent.99',
+  borderBottomColor: 'neutral.80',
+  '&:hover': {
+    backgroundColor: 'white'
+  },
+  '&.is-row-focus-visible': {
+    border: '1px solid',
+    borderColor: 'accent.50',
+    borderBottom: '1px',
+    borderBottomColor: 'accent.50',
+    backgroundColor: 'white'
+  }
+};
+var tableHeadWrapper = {
+  borderLeftWidth: '0px',
+  borderLeftStyle: 'solid',
+  borderRightWidth: '0px',
+  borderRightStyle: 'solid',
+  flex: '0 0 auto',
+  borderBottom: '1px',
+  borderBottomStyle: 'solid',
+  borderBottomColor: 'neutral.80'
+};
+var tableCenteredWrapper = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%'
+};
+
+var tableHeadCell = _objectSpread(_objectSpread({}, _text.text.label), {}, {
+  cursor: 'default',
+  backgroundColor: 'accent.99',
+  flexDirection: 'row !important',
+  alignItems: 'flex-end',
+  fontWeight: 500,
+  height: '100%',
+  py: '10px',
+  '&.is-click-focused': {
+    outline: '0'
+  },
+  '&.is-key-focused': {
+    outline: '1px',
+    outlineStyle: 'solid',
+    outlineColor: 'accent.50 !important',
+    outlineOffset: '-1px',
+    backgroundColor: 'accent.99 !important'
+  },
+  '&.is-column-sortable': {
+    color: 'text.active',
+    cursor: 'pointer'
+  },
+  '&.is-align-start': {
+    justifyContent: 'flex-start'
+  },
+  '&.is-align-center': {
+    justifyContent: 'center'
+  },
+  '&.is-align-end': {
+    justifyContent: 'flex-end'
+  }
+});
+
+var tableBody = {
+  position: 'relative',
+  overflow: 'auto'
+};
+var tableMenu = {
+  p: '5px',
+  borderRadius: '50px'
+};
+var _default = {
+  tableBody: tableBody,
+  tableHeadWrapper: tableHeadWrapper,
+  tableCenteredWrapper: tableCenteredWrapper,
+  tableCellContents: tableCellContents,
+  tableCell: tableCell,
+  tableRow: tableRow,
+  tableHeadCell: tableHeadCell,
+  tableMenu: tableMenu
+};
+exports["default"] = _default;