@pingux/astro 1.27.0-alpha.9 → 1.28.0

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

@@ -0,0 +1,273 @@
+import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _keysInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/keys";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { useAsyncList } from '@react-stately/data';
+import ApplicationIcon from 'mdi-react/ApplicationIcon';
+import { action } from '@storybook/addon-actions';
+import { faker } from '@faker-js/faker';
+import isChromatic from 'chromatic/isChromatic';
+import { DataTable, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableRow, DataTableChip, DataTableMenu, DataTableMultiLine } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'DataTable',
+  component: 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'
+      }
+    }
+  }
+};
+export 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 ___EmotionJSX(DataTable, _extends({}, args, {
+    "aria-label": "Static table"
+  }), ___EmotionJSX(DataTableHeader, {
+    columns: columns
+  }, function (column) {
+    return ___EmotionJSX(DataTableColumn, {
+      align: "center"
+    }, column.name);
+  }), ___EmotionJSX(DataTableBody, {
+    items: rows
+  }, function (item) {
+    return ___EmotionJSX(DataTableRow, null, function (columnKey) {
+      return ___EmotionJSX(DataTableCell, null, item[columnKey]);
+    });
+  }));
+};
+export 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 = isChromatic();
+  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 = useAsyncList({
+    load: function load(_ref) {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _context, _context2, _context3;
+
+        var signal, cursor, res, json, random, fakeData, tableData;
+        return _regeneratorRuntime.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 = _mapInstanceProperty(_context = _concatInstanceProperty(_context2 = []).call(_context2, _keysInstanceProperty(_context3 = Array(json.results.length)).call(_context3))).call(_context, function (key) {
+                  var _context4;
+
+                  return {
+                    id: key,
+                    date: chromatic ? '2022-12-25' : "".concat(faker.date.past().toLocaleDateString('fr-CA')),
+                    category: chromatic ? 'Other' : "".concat(random(['App Catalog', 'Delete Environment', 'Other'])),
+                    status: ___EmotionJSX(DataTableChip, {
+                      cell: chromatic ? 'Pending' : "".concat(random(['Pending', 'Rejected', 'Approved', 'Failed']))
+                    }),
+                    submitted_by: chromatic ? 'John Doe' : _concatInstanceProperty(_context4 = "".concat(faker.name.firstName(), " ")).call(_context4, faker.name.lastName()),
+                    name_id: ___EmotionJSX(DataTableMultiLine, {
+                      cell: [{
+                        name: chromatic ? 'ACME' : "".concat(faker.company.name()),
+                        icon: ApplicationIcon,
+                        accountId: chromatic ? '123456789' : "".concat(faker.finance.routingNumber())
+                      }]
+                    }),
+                    menu: ___EmotionJSX(DataTableMenu, null)
+                  };
+                });
+                tableData = _mapInstanceProperty(fakeData).call(fakeData, function (item, i) {
+                  return _Object$assign({}, 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 _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var items, sortDescriptor, cmp;
+        return _regeneratorRuntime.wrap(function _callee2$(_context7) {
+          while (1) {
+            switch (_context7.prev = _context7.next) {
+              case 0:
+                items = _ref2.items, sortDescriptor = _ref2.sortDescriptor;
+                return _context7.abrupt("return", {
+                  items: _sortInstanceProperty(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 (_includesInstanceProperty(_context6 = sortDescriptor.column).call(_context6, 'date')) {
+                      cmp = new Date(first) < new Date(second) ? -1 : 1;
+                    } else {
+                      cmp = (_parseInt(first, 10) || first) < (_parseInt(second, 10) || second) ? -1 : 1;
+                    }
+
+                    if (sortDescriptor.direction === 'descending') {
+                      cmp *= -1;
+                    }
+
+                    return cmp;
+                  })
+                });
+
+              case 2:
+              case "end":
+                return _context7.stop();
+            }
+          }
+        }, _callee2);
+      }))();
+    }
+  });
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DataTable, _extends({}, args, {
+    sortDescriptor: list.sortDescriptor,
+    onSortChange: _sortInstanceProperty(list),
+    "aria-label": "Custom content table",
+    onAction: action('onAction')
+  }), ___EmotionJSX(DataTableHeader, {
+    columns: columns
+  }, function (column) {
+    return ___EmotionJSX(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);
+  }), ___EmotionJSX(DataTableBody, {
+    items: list.items,
+    loadingState: list.loadingState,
+    onLoadMore: list.loadMore
+  }, function (item) {
+    return ___EmotionJSX(DataTableRow, {
+      key: item.name
+    }, function (columnKey) {
+      return ___EmotionJSX(DataTableCell, null, item[columnKey]);
+    });
+  })));
+};

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

@@ -0,0 +1,137 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+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) { _defineProperty(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; }
+
+import { text } from './../../styles/variants/text';
+
+var tableCell = _objectSpread(_objectSpread({}, 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.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'
+};
+export default {
+  tableBody: tableBody,
+  tableHeadWrapper: tableHeadWrapper,
+  tableCenteredWrapper: tableCenteredWrapper,
+  tableCellContents: tableCellContents,
+  tableCell: tableCell,
+  tableRow: tableRow,
+  tableHeadCell: tableHeadCell,
+  tableMenu: tableMenu
+};