@canonical/react-components 0.59.0 → 0.60.0

package/dist/components/MainTable/MainTable.stories.js

@@ -0,0 +1,553 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Sortable = exports.Responsive = exports.Paginated = exports.Overflow = exports.Expanding = exports.Empty = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _MainTable = _interopRequireDefault(require("./MainTable"));
+var _Row = _interopRequireDefault(require("../Row"));
+var _Col = _interopRequireDefault(require("../Col"));
+var _ContextualMenu = _interopRequireDefault(require("../ContextualMenu"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const meta = {
+  component: _MainTable.default,
+  tags: ["autodocs"],
+  argTypes: {
+    headers: {
+      control: {
+        disable: true
+      }
+    },
+    rows: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    headers: [{
+      content: null
+    }, {
+      content: "Foundation Cloud"
+    }, {
+      content: "Foundation Cloud Plus"
+    }],
+    rows: [{
+      columns: [{
+        content: "Expert delivery of an Ubuntu OpenStack cloud",
+        role: "rowheader"
+      }, {
+        content: "Reference architecture"
+      }, {
+        content: "Custom architecture"
+      }]
+    }, {
+      columns: [{
+        content: "Workshop and training",
+        role: "rowheader"
+      }, {
+        content: "2-days"
+      }, {
+        content: "4-days"
+      }]
+    }, {
+      columns: [{
+        content: "One-time price",
+        role: "rowheader"
+      }, {
+        content: "$75,000"
+      }, {
+        content: "$150,000"
+      }]
+    }]
+  }
+};
+const Sortable = exports.Sortable = {
+  render: () => /*#__PURE__*/_react.default.createElement(_MainTable.default, {
+    headers: [{
+      content: "Status",
+      sortKey: "status"
+    }, {
+      content: "Cores",
+      sortKey: "cores",
+      className: "u-align--right"
+    }, {
+      content: "RAM",
+      sortKey: "ram",
+      className: "u-align--right"
+    }, {
+      content: "Disks",
+      sortKey: "disks",
+      className: "u-align--right"
+    }, {
+      content: "Networks",
+      className: "u-align--right"
+    }],
+    rows: [{
+      columns: [{
+        content: "Ready",
+        role: "rowheader"
+      }, {
+        content: 1,
+        className: "u-align--right"
+      }, {
+        content: "1 GiB",
+        className: "u-align--right"
+      }, {
+        content: 2,
+        className: "u-align--right"
+      }, {
+        content: 42,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "ready",
+        cores: 2,
+        ram: 1,
+        disks: 2
+      }
+    }, {
+      columns: [{
+        content: "Idle",
+        role: "rowheader"
+      }, {
+        content: 1,
+        className: "u-align--right"
+      }, {
+        content: "1 GiB",
+        className: "u-align--right"
+      }, {
+        content: 2,
+        className: "u-align--right"
+      }, {
+        content: 23,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "idle",
+        cores: 1,
+        ram: 1,
+        disks: 2
+      }
+    }, {
+      columns: [{
+        content: "Waiting",
+        role: "rowheader"
+      }, {
+        content: 8,
+        className: "u-align--right"
+      }, {
+        content: "3.9 GiB",
+        className: "u-align--right"
+      }, {
+        content: 3,
+        className: "u-align--right"
+      }, {
+        content: 0,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "waiting",
+        cores: 8,
+        ram: 3.9,
+        disks: 3
+      }
+    }],
+    sortable: true
+  }),
+  name: "Sortable"
+};
+const Expanding = exports.Expanding = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    let [expandedRow, setExpandedRow] = (0, _react.useState)(1);
+    return /*#__PURE__*/_react.default.createElement(_MainTable.default, {
+      expanding: true,
+      headers: [{
+        content: "Name"
+      }, {
+        content: "Mac address"
+      }, {
+        content: "IP"
+      }, {
+        content: "Rack"
+      }, {
+        content: "Last seen"
+      }, {
+        content: "Actions",
+        className: "u-align--right"
+      }],
+      rows: [{
+        columns: [{
+          content: "Unknown",
+          role: "rowheader"
+        }, {
+          content: "2c:44:fd:80:3f:25"
+        }, {
+          content: "10.249.0.1"
+        }, {
+          content: "karura"
+        }, {
+          content: "Thu, 25 Oct. 2018 13:55:21"
+        }, {
+          content: /*#__PURE__*/_react.default.createElement("button", {
+            className: "u-toggle",
+            onClick: () => setExpandedRow(1)
+          }, "Show"),
+          className: "u-align--right"
+        }],
+        expanded: expandedRow === 1,
+        expandedContent: /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+          size: 8
+        }, /*#__PURE__*/_react.default.createElement("h4", null, "Expanding table cell"), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))
+      }, {
+        columns: [{
+          content: "Unknown",
+          role: "rowheader"
+        }, {
+          content: "52:54:00:3a:fe:e9"
+        }, {
+          content: "172.16.99.191"
+        }, {
+          content: "karura"
+        }, {
+          content: "Wed, 3 Oct. 2018 23:08:06"
+        }, {
+          content: /*#__PURE__*/_react.default.createElement("button", {
+            className: "u-toggle",
+            onClick: () => setExpandedRow(2)
+          }, "Show"),
+          className: "u-align--right"
+        }],
+        expanded: expandedRow === 2,
+        expandedContent: /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+          size: 8
+        }, /*#__PURE__*/_react.default.createElement("h4", null, "Expanding table cell"), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))
+      }, {
+        columns: [{
+          content: "Unknown",
+          role: "rowheader"
+        }, {
+          content: "52:54:00:74:c2:10"
+        }, {
+          content: "172.16.99.192"
+        }, {
+          content: "karura"
+        }, {
+          content: "Wed, 17 Oct. 2018 12:18:18"
+        }, {
+          content: /*#__PURE__*/_react.default.createElement("button", {
+            className: "u-toggle",
+            onClick: () => setExpandedRow(3)
+          }, "Show"),
+          className: "u-align--right"
+        }],
+        expanded: expandedRow === 3,
+        expandedContent: /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+          size: 8
+        }, /*#__PURE__*/_react.default.createElement("h4", null, "Expanding table cell"), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))
+      }]
+    });
+  },
+  name: "Expanding"
+};
+
+/**
+ * If the table cell may have overflowing content (such as contextual menu) use `hasOverflow` prop to avoid cropping it.
+ */
+const Overflow = exports.Overflow = {
+  render: () => {
+    return /*#__PURE__*/_react.default.createElement(_MainTable.default, {
+      headers: [{
+        content: "Name"
+      }, {
+        content: "Mac address"
+      }, {
+        content: "IP"
+      }, {
+        content: "Rack"
+      }, {
+        content: "Last seen"
+      }, {
+        content: "Actions",
+        className: "u-align--right"
+      }],
+      rows: [{
+        columns: [{
+          content: "Unknown",
+          role: "rowheader"
+        }, {
+          content: "2c:44:fd:80:3f:25"
+        }, {
+          content: "10.249.0.1"
+        }, {
+          content: "karura"
+        }, {
+          content: "Thu, 25 Oct. 2018 13:55:21"
+        }, {
+          content: /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, {
+            links: [{
+              children: "Link 1",
+              onClick: () => {}
+            }, {
+              children: "Link 2",
+              onClick: () => {}
+            }],
+            hasToggleIcon: true,
+            position: "right"
+          }),
+          className: "u-align--right",
+          hasOverflow: true
+        }]
+      }, {
+        columns: [{
+          content: "Unknown",
+          role: "rowheader"
+        }, {
+          content: "52:54:00:3a:fe:e9"
+        }, {
+          content: "172.16.99.191"
+        }, {
+          content: "karura"
+        }, {
+          content: "Wed, 3 Oct. 2018 23:08:06"
+        }, {
+          content: /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, {
+            links: [{
+              children: "Link 1",
+              onClick: () => {}
+            }, {
+              children: "Link 2",
+              onClick: () => {}
+            }],
+            hasToggleIcon: true,
+            position: "right"
+          }),
+          className: "u-align--right",
+          hasOverflow: true
+        }]
+      }, {
+        columns: [{
+          content: "Unknown",
+          role: "rowheader"
+        }, {
+          content: "52:54:00:74:c2:10"
+        }, {
+          content: "172.16.99.192"
+        }, {
+          content: "karura"
+        }, {
+          content: "Wed, 17 Oct. 2018 12:18:18"
+        }, {
+          content: /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, {
+            links: [{
+              children: "Link 1",
+              onClick: () => {}
+            }, {
+              children: "Link 2",
+              onClick: () => {}
+            }],
+            hasToggleIcon: true,
+            position: "right"
+          }),
+          className: "u-align--right",
+          hasOverflow: true
+        }]
+      }]
+    });
+  },
+  name: "Overflow"
+};
+const Responsive = exports.Responsive = {
+  render: () => /*#__PURE__*/_react.default.createElement(_MainTable.default, {
+    headers: [{
+      content: /*#__PURE__*/_react.default.createElement("span", null, "Name", /*#__PURE__*/_react.default.createElement("i", {
+        className: "p-icon--information"
+      })),
+      heading: "Name"
+    }, {
+      content: "Users",
+      className: "u-align--right"
+    }, {
+      content: "Units",
+      className: "u-align--right"
+    }],
+    rows: [{
+      columns: [{
+        content: "Ready",
+        role: "rowheader"
+      }, {
+        content: 1,
+        className: "u-align--right"
+      }, {
+        content: "1 GiB",
+        className: "u-align--right"
+      }]
+    }, {
+      columns: [{
+        content: "Ready",
+        role: "rowheader"
+      }, {
+        content: 1,
+        className: "u-align--right"
+      }, {
+        content: "1 GiB",
+        className: "u-align--right"
+      }]
+    }, {
+      columns: [{
+        content: "Ready",
+        role: "rowheader"
+      }, {
+        content: 1,
+        className: "u-align--right"
+      }, {
+        content: "1 GiB",
+        className: "u-align--right"
+      }]
+    }],
+    responsive: true
+  }),
+  name: "Responsive"
+};
+const Paginated = exports.Paginated = {
+  render: () => /*#__PURE__*/_react.default.createElement(_MainTable.default, {
+    headers: [{
+      content: "Status"
+    }, {
+      content: "Cores"
+    }],
+    paginate: 5,
+    rows: [{
+      columns: [{
+        content: "Ready"
+      }, {
+        content: 1
+      }]
+    }, {
+      columns: [{
+        content: "Idle"
+      }, {
+        content: 4
+      }]
+    }, {
+      columns: [{
+        content: "Waiting"
+      }, {
+        content: 2
+      }]
+    }, {
+      columns: [{
+        content: "Ready"
+      }, {
+        content: 1
+      }]
+    }, {
+      columns: [{
+        content: "Idle"
+      }, {
+        content: 4
+      }]
+    }, {
+      columns: [{
+        content: "Waiting"
+      }, {
+        content: 2
+      }]
+    }, {
+      columns: [{
+        content: "Ready"
+      }, {
+        content: 1
+      }]
+    }, {
+      columns: [{
+        content: "Idle"
+      }, {
+        content: 4
+      }]
+    }, {
+      columns: [{
+        content: "Waiting"
+      }, {
+        content: 2
+      }]
+    }, {
+      columns: [{
+        content: "Ready"
+      }, {
+        content: 1
+      }]
+    }, {
+      columns: [{
+        content: "Idle"
+      }, {
+        content: 4
+      }]
+    }, {
+      columns: [{
+        content: "Waiting"
+      }, {
+        content: 2
+      }]
+    }, {
+      columns: [{
+        content: "Ready"
+      }, {
+        content: 1
+      }]
+    }, {
+      columns: [{
+        content: "Idle"
+      }, {
+        content: 4
+      }]
+    }, {
+      columns: [{
+        content: "Waiting"
+      }, {
+        content: 2
+      }]
+    }, {
+      columns: [{
+        content: "Ready"
+      }, {
+        content: 1
+      }]
+    }, {
+      columns: [{
+        content: "Idle"
+      }, {
+        content: 4
+      }]
+    }, {
+      columns: [{
+        content: "Waiting"
+      }, {
+        content: 2
+      }]
+    }]
+  }),
+  name: "Paginated"
+};
+const Empty = exports.Empty = {
+  render: () => /*#__PURE__*/_react.default.createElement(_MainTable.default, {
+    headers: [{
+      content: "Plan"
+    }, {
+      content: "Foundation Cloud"
+    }, {
+      content: "Foundation Cloud Plus"
+    }],
+    rows: [],
+    emptyStateMsg: "No data to display"
+  }),
+  name: "Empty"
+};

package/dist/components/Modal/Modal.d.ts

@@ -27,5 +27,10 @@ export type Props = PropsWithSpread<{
      */
     shouldPropagateClickEvent?: boolean;
 }, HTMLProps<HTMLDivElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Modal](https://docs.vanillaframework.io/patterns/modal/).
+ *
+ * The modal component can be used to overlay an area of the screen which can contain a prompt, dialog or interaction.
+ */
 export declare const Modal: ({ buttonRow, children, className, close, title, shouldPropagateClickEvent, ...wrapperProps }: Props) => ReactElement;
 export default Modal;

package/dist/components/Modal/Modal.js

@@ -10,6 +10,11 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Modal](https://docs.vanillaframework.io/patterns/modal/).
+ *
+ * The modal component can be used to overlay an area of the screen which can contain a prompt, dialog or interaction.
+ */
 const Modal = _ref => {
   let {
     buttonRow,

package/dist/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Modal from "./Modal";
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Default: Story;

package/dist/components/Modal/Modal.stories.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Modal = _interopRequireDefault(require("./Modal"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Template = args => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: "100vh",
+      position: "relative"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Modal.default, args));
+};
+const meta = {
+  component: _Modal.default,
+  render: Template,
+  tags: ["autodocs"],
+  argTypes: {
+    buttonRow: {
+      control: {
+        disable: true
+      }
+    },
+    children: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [modalOpen, setModalOpen] = (0, _react.useState)(true);
+    const closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Open modal"), modalOpen ? /*#__PURE__*/_react.default.createElement(_Modal.default, {
+      close: closeHandler,
+      title: "Confirm delete",
+      buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+        className: "u-no-margin--bottom",
+        onClick: closeHandler
+      }, "Cancel"), /*#__PURE__*/_react.default.createElement("button", {
+        className: "p-button--negative u-no-margin--bottom"
+      }, "Delete"))
+    }, /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")) : null);
+  },
+  name: "Default"
+};

package/dist/components/ModularTable/ModularTable.d.ts

@@ -49,5 +49,57 @@ export type Props<D extends Record<string, unknown>> = PropsWithSpread<{
      */
     autoResetSortBy?: boolean;
 }, HTMLProps<HTMLTableElement>>;
+/**
+This is a [React](https://reactjs.org/) component to support many table use cases.
+ 
+ModularTable components accepts `columns` and `data` arguments in the same format as [`useTable`](https://react-table.tanstack.com/docs/api/useTable) hook of the ReactTable library.
+
+`columns` - The core columns configuration object for the entire table. https://react-table.tanstack.com/docs/api/useTable#column-options
+`data` - The data array that you want to display on the table.
+### Important note!
+Values passed to both of these params have to me memoized (for example via{" "}
+  <code>React.useMemo</code>). Memoization ensures that our data isn't recreated
+  on every render. If we didn't use <code>React.useMemo</code>, the table would
+  think it was receiving new data on every render and attempt to recalulate a
+  lot of logic every single time.
+
+#### Custom column options
+
+In addition to standard column propeties from [`useTable`](https://react-table.tanstack.com/docs/api/useTable) `ModularTable` accepts some custom properties.
+
+##### Class names
+
+Custom `className` can be used to provide a specific CSS class name that will be added to all cells in given column.
+You can also provide `getHeaderProps`, `getRowProps` and `getCellProps` to resolve additional custom props for a specific element. More on this in [`useTable - cell properties`](https://react-table.tanstack.com/docs/api/useTable#cell-properties).
+
+```js
+getCellProps={({ value, column }) => ({
+  className: `table__cell--${column.id} ${value ===  "1 minute" ? "p-heading--5" : ""}`,
+})}
+columns = {
+  Header: "Hidden on mobile",
+  accessor: "example",
+  className: "u-hide--small"
+}
+```
+
+##### Icons
+
+To show an icon in the cells of a column `getCellIcon` function should be defined. The function takes a cell data as an argument and should return one of built in icons (from the `ICONS` const), a string with a custom icon name, or `false` if no icon should be shown.
+
+The `ICONS` const contains all [the Vanilla built in icons](https://vanillaframework.io/docs/patterns/icons) such as "plus", "minus", "success", "error", etc.
+
+Product specific icons can be used as well, assuming that the product provides the necessary CSS styling and the icon follows the Vanilla naming convention `p-icon--{name}`.
+
+```js
+columns = {
+  Header: "With icons",
+  accessor: "status",
+  getCellIcon: ({ value }) => {
+    return value === "released" ? ICONS.success : false;
+  },
+};
+```
+ */
 declare function ModularTable<D extends Record<string, unknown>>({ data, columns, emptyMsg, footer, sortable, getHeaderProps, getRowProps, getCellProps, getRowId, initialSortColumn, initialSortDirection, autoResetSortBy, ...props }: Props<D>): JSX.Element;
 export default ModularTable;