@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

package/lib/components/Table/BasicTable.stories.js

@@ -1,552 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports._SimpleTable = exports._LongTable = exports._LoadingTable = exports._FancyHeaderTable = exports._EmptyTable = exports._CustomLoadingTable = exports._BasicTable = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _font = require("../../styles/variables/_font");
-var _size = require("../../styles/variables/_size");
-var _typography = require("../../types/typography");
-var _classify = require("../../utils/classify");
-var _tokens = require("../../utils/tokens");
-var _Button = require("../Button");
-var _ButtonDropdown = require("../ButtonDropdown");
-var _CircularLoader = require("../CircularLoader");
-var _Dropdown = require("../Dropdown");
-var _EmptyState = require("../EmptyState");
-var _SearchInput = require("../SearchInput");
-var _Text = require("../Text");
-var _dummyTableData = require("./dummyTableData");
-var _Table = require("./Table.docs");
-var _ = require("./");
-var _TableStoriesModule = _interopRequireDefault(require("./Table.stories.module.css"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-var _default = exports.default = {
-  tags: ['autodocs'],
-  title: 'Components/Table/Basic Table',
-  ..._Table.TABLE_DOCS
-};
-const Dropdown = () => /*#__PURE__*/React.createElement(_.BasicSingleCell, null, /*#__PURE__*/React.createElement(_ButtonDropdown.SimpleButtonDropdown, {
-  size: "small",
-  type: "ghost",
-  anchorPosition: "bottom-end",
-  options: [{
-    iconLeft: 'coffee',
-    key: '1',
-    label: 'Option one'
-  }, {
-    iconLeft: 'user',
-    key: '2',
-    label: 'Option two'
-  }, {
-    iconLeft: 'face-party',
-    key: '4',
-    label: 'Option three'
-  }],
-  iconLeftName: "ellipsis"
-}));
-const BasicTableName = _ref => {
-  let {
-    data
-  } = _ref;
-  return /*#__PURE__*/React.createElement(_.BasicSingleCell, null, /*#__PURE__*/React.createElement(_Text.BodySmall, {
-    color: _typography.TEXT_COLORS.secondary
-  }, data.name));
-};
-const BasicTableEmail = _ref2 => {
-  let {
-    data
-  } = _ref2;
-  return /*#__PURE__*/React.createElement(_.BasicSingleCell, null, /*#__PURE__*/React.createElement(_Text.BodyMediumBold, null, data.email));
-};
-const basicTableHeaders = [{
-  label: 'Name',
-  key: 'name',
-  sortable: false,
-  className: _TableStoriesModule.default.smallColumn,
-  render: BasicTableName
-}, {
-  label: 'Email',
-  key: 'email',
-  sortable: false,
-  render: BasicTableEmail
-}];
-const headers = [{
-  label: 'Name',
-  key: 'name',
-  sortable: true
-}, {
-  label: 'Tel',
-  key: 'phone',
-  sortable: true
-}, {
-  label: 'Notes',
-  key: 'notes',
-  sortable: false
-}, {
-  label: 'Sign',
-  key: 'sign',
-  sortable: false
-}, {
-  label: 'email',
-  key: 'email',
-  sortable: false
-}, {
-  label: '',
-  key: 'email',
-  render: Dropdown
-}];
-const SINGLE_PAGE_DATA = _dummyTableData.LARGE_TABLE_DATA.slice(0, 30);
-const BASIC_TABLE_DATA = _dummyTableData.LARGE_TABLE_DATA.slice(0, 10);
-const Zodiac = _ref3 => {
-  let {
-    data
-  } = _ref3;
-  const map = {
-    taurus: '♉︎',
-    aquarius: '♒︎',
-    gemini: '♊︎',
-    leo: '♌︎'
-  };
-  return /*#__PURE__*/React.createElement(_.BasicSingleCell, null, /*#__PURE__*/React.createElement("div", {
-    className: _TableStoriesModule.default.bgClickableBackground,
-    style: {
-      flex: 1,
-      width: _size.sizeFluid,
-      height: _size.sizeFluid,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      fontSize: _font.fontSize26
-    }
-  }, map[data.sign] ?? map['gemini']));
-};
-const fancyHeaders = [{
-  label: 'Name',
-  key: 'name',
-  sortable: true,
-  render: _ref4 => {
-    let {
-      data,
-      className
-    } = _ref4;
-    return /*#__PURE__*/React.createElement(_.MonogramCell, {
-      className: className,
-      initials: data.name[0]
-    });
-  }
-}, {
-  label: 'Tel',
-  key: 'phone'
-}, {
-  label: 'Date',
-  key: 'phone',
-  // @ts-ignore - TS2362 - The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
-  render: () => /*#__PURE__*/React.createElement(_.DateCell, {
-    date: new Date(new Date() - 80_000_000 * Math.random() * 30)
-  })
-}, {
-  label: 'Notes',
-  key: 'notes',
-  className: _TableStoriesModule.default.longCell
-}, {
-  label: 'Sign',
-  key: 'sign',
-  render: Zodiac
-}, {
-  label: 'email',
-  key: 'email'
-}, {
-  label: '',
-  key: 'email',
-  render: Dropdown
-}];
-const longHeaders = [{
-  label: 'Name',
-  key: 'name',
-  sticky: true,
-  sortable: true,
-  render: _ref5 => {
-    let {
-      data,
-      className
-    } = _ref5;
-    return /*#__PURE__*/React.createElement(_.MonogramCell, {
-      className: className,
-      initials: data.name[0]
-    });
-  },
-  className: _TableStoriesModule.default.mediumColumn
-}, {
-  label: 'Tel',
-  key: 'phone',
-  className: _TableStoriesModule.default.mediumColumn
-}, {
-  label: 'Address',
-  key: 'address',
-  className: _TableStoriesModule.default.extraLongColumn
-}, {
-  label: 'Date',
-  key: 'phone',
-  // @ts-ignore - TS2362 - The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
-  render: () => /*#__PURE__*/React.createElement(_.DateCell, {
-    date: new Date(new Date() - 80_000_000 * Math.random() * 30)
-  }),
-  className: _TableStoriesModule.default.longColumn
-}, {
-  label: 'Notes',
-  key: 'notes',
-  className: _TableStoriesModule.default.mediumColumn
-}, {
-  label: 'Address',
-  key: 'address',
-  className: _TableStoriesModule.default.extraLongColumn
-}, {
-  label: 'Sign',
-  key: 'sign',
-  render: Zodiac,
-  className: _TableStoriesModule.default.mediumColumn
-}, {
-  label: 'Address',
-  key: 'address',
-  className: _TableStoriesModule.default.extraLongColumn
-}, {
-  label: 'email',
-  key: 'email',
-  className: _TableStoriesModule.default.longColumn
-}, {
-  label: 'Address',
-  key: 'address',
-  className: _TableStoriesModule.default.extraLongColumn
-}, {
-  label: '',
-  key: 'email',
-  render: Dropdown
-}];
-const _SimpleTable = args => /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.container
-}, /*#__PURE__*/React.createElement(_.Table, _extends({}, args, {
-  headers: args.headers,
-  entries: args.entries,
-  classNames: {
-    wrapper: _TableStoriesModule.default.smallTableWrapper
-  }
-})));
-exports._SimpleTable = _SimpleTable;
-_SimpleTable.args = {
-  headers: basicTableHeaders,
-  entries: BASIC_TABLE_DATA,
-  borderRadius: '12px'
-};
-const _BasicTable = args => /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.container
-}, /*#__PURE__*/React.createElement(_.TableTopBar, null, /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.left
-}, /*#__PURE__*/React.createElement(_Text.SubTitleMedium, {
-  className: _TableStoriesModule.default.title
-}, "Basic Data Table"), /*#__PURE__*/React.createElement(_SearchInput.SearchInput, null)), /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.right
-}, /*#__PURE__*/React.createElement(_Button.Button, {
-  type: "ghost",
-  iconLeftName: "bars-filter",
-  classNames: {
-    wrapper: _TableStoriesModule.default.filterBtn
-  },
-  ariaLabel: "Filter"
-}), /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
-  placeholder: "Select Options",
-  options: [{
-    iconLeft: 'coffee',
-    key: '1',
-    label: 'Option one'
-  }, {
-    iconLeft: 'user',
-    key: '2',
-    label: 'Option two'
-  }, {
-    iconLeft: 'face-party',
-    key: '4',
-    label: 'Option three'
-  }]
-}), /*#__PURE__*/React.createElement(_Button.Button, {
-  classNames: {
-    wrapper: _TableStoriesModule.default.button
-  }
-}, "Button Text"))), /*#__PURE__*/React.createElement(_.Table, _extends({}, args, {
-  headers: args.headers,
-  entries: args.entries,
-  stickyHeader: true,
-  classNames: {
-    wrapper: _TableStoriesModule.default.staticTableWrapper
-  }
-})));
-exports._BasicTable = _BasicTable;
-_BasicTable.args = {
-  headers,
-  entries: SINGLE_PAGE_DATA,
-  borderRadius: '0px 0px 12px 12px'
-};
-const _FancyHeaderTable = args => /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.container
-}, /*#__PURE__*/React.createElement(_.TableTopBar, null, /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.left
-}, /*#__PURE__*/React.createElement(_Text.SubTitleMedium, {
-  className: _TableStoriesModule.default.title
-}, "Custom Cell Table"), /*#__PURE__*/React.createElement(_SearchInput.SearchInput, null)), /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.right
-}, /*#__PURE__*/React.createElement(_Button.Button, {
-  type: "ghost",
-  iconLeftName: "bars-filter",
-  classNames: {
-    wrapper: _TableStoriesModule.default.filterBtn
-  },
-  ariaLabel: "Filter"
-}), /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
-  placeholder: "Select Options",
-  options: [{
-    iconLeft: 'coffee',
-    key: '1',
-    label: 'Option one'
-  }, {
-    iconLeft: 'user',
-    key: '2',
-    label: 'Option two'
-  }, {
-    iconLeft: 'face-party',
-    key: '4',
-    label: 'Option three'
-  }]
-}), /*#__PURE__*/React.createElement(_Button.Button, {
-  classNames: {
-    wrapper: _TableStoriesModule.default.button
-  }
-}, "Button Text"))), /*#__PURE__*/React.createElement(_.Table, _extends({}, args, {
-  headers: args.headers,
-  entries: args.entries,
-  stickyHeader: true,
-  classNames: {
-    wrapper: _TableStoriesModule.default.staticTableWrapper
-  }
-})));
-exports._FancyHeaderTable = _FancyHeaderTable;
-_FancyHeaderTable.args = {
-  headers: fancyHeaders,
-  entries: SINGLE_PAGE_DATA,
-  stickyHeader: true,
-  borderRadius: '0px 0px 12px 12px'
-};
-const _LongTable = args => /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.container
-}, /*#__PURE__*/React.createElement(_.TableTopBar, null, /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.left
-}, /*#__PURE__*/React.createElement(_Text.SubTitleMedium, {
-  className: _TableStoriesModule.default.title
-}, "Long Data Table"), /*#__PURE__*/React.createElement(_SearchInput.SearchInput, null)), /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.right
-}, /*#__PURE__*/React.createElement(_Button.Button, {
-  type: "ghost",
-  iconLeftName: "bars-filter",
-  classNames: {
-    wrapper: _TableStoriesModule.default.filterBtn
-  },
-  ariaLabel: "Filter"
-}), /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
-  placeholder: "Select Options",
-  options: [{
-    iconLeft: 'coffee',
-    key: '1',
-    label: 'Option one'
-  }, {
-    iconLeft: 'user',
-    key: '2',
-    label: 'Option two'
-  }, {
-    iconLeft: 'face-party',
-    key: '4',
-    label: 'Option three'
-  }]
-}), /*#__PURE__*/React.createElement(_Button.Button, {
-  classNames: {
-    wrapper: _TableStoriesModule.default.button
-  }
-}, "Button Text"))), /*#__PURE__*/React.createElement(_.Table, _extends({}, args, {
-  headers: args.headers,
-  entries: args.entries,
-  stickyHeader: true,
-  classNames: {
-    wrapper: (0, _classify.classify)(_TableStoriesModule.default.staticTableWrapper)
-  }
-})));
-exports._LongTable = _LongTable;
-_LongTable.args = {
-  headers: longHeaders,
-  entries: SINGLE_PAGE_DATA,
-  stickyHeader: true,
-  borderRadius: '0px 0px 12px 12px'
-};
-const emptyEntries = [];
-const _LoadingTable = args => /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.container
-}, /*#__PURE__*/React.createElement(_.TableTopBar, null, /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.left
-}, /*#__PURE__*/React.createElement(_Text.SubTitleMedium, {
-  className: _TableStoriesModule.default.title
-}, "Loading Data Table"), /*#__PURE__*/React.createElement(_SearchInput.SearchInput, null)), /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.right
-}, /*#__PURE__*/React.createElement(_Button.Button, {
-  type: "ghost",
-  iconLeftName: "bars-filter",
-  classNames: {
-    wrapper: _TableStoriesModule.default.filterBtn
-  },
-  ariaLabel: "Filter"
-}), /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
-  placeholder: "Select Options",
-  options: [{
-    iconLeft: 'coffee',
-    key: '1',
-    label: 'Option one'
-  }, {
-    iconLeft: 'user',
-    key: '2',
-    label: 'Option two'
-  }, {
-    iconLeft: 'face-party',
-    key: '4',
-    label: 'Option three'
-  }]
-}), /*#__PURE__*/React.createElement(_Button.Button, {
-  classNames: {
-    wrapper: _TableStoriesModule.default.button
-  }
-}, "Button Text"))), /*#__PURE__*/React.createElement(_.Table, _extends({}, args, {
-  headers: args.headers,
-  entries: args.entries,
-  stickyHeader: true,
-  classNames: {
-    wrapper: (0, _classify.classify)(_TableStoriesModule.default.staticTableWrapper)
-  }
-})));
-exports._LoadingTable = _LoadingTable;
-_LoadingTable.args = {
-  headers: longHeaders,
-  entries: emptyEntries,
-  isLoading: true,
-  borderRadius: '0px 0px 12px 12px'
-};
-const _CustomLoadingTable = args => /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.container
-}, /*#__PURE__*/React.createElement(_.TableTopBar, null, /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.left
-}, /*#__PURE__*/React.createElement(_Text.SubTitleMedium, {
-  className: _TableStoriesModule.default.title
-}, "Custom Loader Table"), /*#__PURE__*/React.createElement(_SearchInput.SearchInput, null)), /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.right
-}, /*#__PURE__*/React.createElement(_Button.Button, {
-  type: "ghost",
-  iconLeftName: "bars-filter",
-  classNames: {
-    wrapper: _TableStoriesModule.default.filterBtn
-  },
-  ariaLabel: "Filter"
-}), /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
-  placeholder: "Select Options",
-  options: [{
-    iconLeft: 'coffee',
-    key: '1',
-    label: 'Option one'
-  }, {
-    iconLeft: 'user',
-    key: '2',
-    label: 'Option two'
-  }, {
-    iconLeft: 'face-party',
-    key: '4',
-    label: 'Option three'
-  }]
-}), /*#__PURE__*/React.createElement(_Button.Button, {
-  classNames: {
-    wrapper: _TableStoriesModule.default.button
-  }
-}, "Button Text"))), /*#__PURE__*/React.createElement(_.Table, _extends({}, args, {
-  headers: args.headers,
-  entries: args.entries,
-  stickyHeader: true,
-  customLoader: /*#__PURE__*/React.createElement("div", {
-    className: _TableStoriesModule.default.customLoader
-  }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
-    colorToken: "colorTextTertiary",
-    size: "large"
-  })),
-  classNames: {
-    wrapper: (0, _classify.classify)(_TableStoriesModule.default.staticTableWrapper)
-  }
-})));
-exports._CustomLoadingTable = _CustomLoadingTable;
-_CustomLoadingTable.args = {
-  headers: longHeaders,
-  entries: emptyEntries,
-  isLoading: true,
-  borderRadius: '0px 0px 12px 12px'
-};
-const emptyText = (0, _tokens.getRandomDataVariation)();
-const _EmptyTable = args => /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.container
-}, /*#__PURE__*/React.createElement(_.TableTopBar, null, /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.left
-}, /*#__PURE__*/React.createElement(_Text.SubTitleMedium, {
-  className: _TableStoriesModule.default.title
-}, "Empty Table"), /*#__PURE__*/React.createElement(_SearchInput.SearchInput, null)), /*#__PURE__*/React.createElement("div", {
-  className: _TableStoriesModule.default.right
-}, /*#__PURE__*/React.createElement(_Button.Button, {
-  type: "ghost",
-  iconLeftName: "bars-filter",
-  classNames: {
-    wrapper: _TableStoriesModule.default.filterBtn
-  },
-  ariaLabel: "Filter"
-}), /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
-  placeholder: "Select Options",
-  options: [{
-    iconLeft: 'coffee',
-    key: '1',
-    label: 'Option one'
-  }, {
-    iconLeft: 'user',
-    key: '2',
-    label: 'Option two'
-  }, {
-    iconLeft: 'face-party',
-    key: '4',
-    label: 'Option three'
-  }]
-}), /*#__PURE__*/React.createElement(_Button.Button, {
-  classNames: {
-    wrapper: _TableStoriesModule.default.button
-  }
-}, "Button Text"))), /*#__PURE__*/React.createElement(_.Table, _extends({}, args, {
-  headers: args.headers,
-  entries: args.entries,
-  stickyHeader: true,
-  classNames: {
-    wrapper: (0, _classify.classify)(_TableStoriesModule.default.staticTableWrapper)
-  },
-  emptyText: /*#__PURE__*/React.createElement(_EmptyState.EmptyState, {
-    classNames: {
-      wrapper: _TableStoriesModule.default.emptyStateWrapper
-    },
-    description: emptyText.description,
-    imageVariant: "file",
-    title: emptyText.title
-  }, /*#__PURE__*/React.createElement(_Button.Button, null, "Button Text"))
-})));
-exports._EmptyTable = _EmptyTable;
-_EmptyTable.args = {
-  headers: longHeaders,
-  entries: emptyEntries,
-  isLoading: false,
-  borderRadius: '0px 0px 12px 12px'
-};