@pingux/astro 1.27.0-alpha.16 → 1.27.0-alpha.18

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

@@ -1,310 +0,0 @@
-"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

@@ -1,156 +0,0 @@
-"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;