@canonical/react-components 1.6.0 → 1.7.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(e) { return e && e.__esModule ? e : { default: e }; }
+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 && {}.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
+    const [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/MainTable/MainTable.test.d.ts

@@ -0,0 +1 @@
+export {};

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(e) { return e && e.__esModule ? e : { default: e }; }
+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 && {}.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/Modal/Modal.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ModularTable from "./ModularTable";
+declare const meta: Meta<typeof ModularTable>;
+export default meta;
+type Story = StoryObj<typeof ModularTable>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const Sortable: Story;
+/**
+ * Subrows can be used to group table rows under a heading that needs to appear
+at the start of the group. In the following example sorting the columns will
+sort the group rows, then sort the sub-rows, but the group header always comes first.
+ */
+export declare const Subrows: Story;
+/**
+Example below shows a basic `ModularTable` with `SummaryButton` component in the footer.
+```
+export const getSampleData = (i = 0) => [
+  { data: ++i * 100 + i },
+  { data: ++i * 100 + i },
+  { data: ++i * 100 + i },
+  { data: ++i * 100 + i },
+  { data: ++i * 100 + i },
+];
+```
+ */
+export declare const LoadMore: Story;