@ledgerhq/react-ui 0.7.2 → 0.7.5-monorepo.0

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

@@ -0,0 +1,491 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  CustomRows: () => CustomRows,
+  Default: () => Default,
+  Nested: () => Nested,
+  Styled: () => Styled,
+  default: () => Table_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Button = __toModule(require("../cta/Button"));
+var import_Flex = __toModule(require("../layout/Flex"));
+var import_Text = __toModule(require("../asorted/Text"));
+var import_index = __toModule(require("./index"));
+var import_stories = __toModule(require("./stories.helper"));
+const description = `
+### A flexible table component.
+
+Define columns and pass some data to the component that will render it appropriately.
+
+## Usage
+
+\`\`\`js
+
+import { Table } from "@ledgerhq/react-ui"
+
+\`\`\`
+
+### Define columns
+
+To use the Table component the first thing to do is to define an array of columns.
+
+A column is an object that specifies:
+
+- how cells are rendered
+- how the header is rendered
+- the cells layout
+
+<details>
+<summary>Column object shape</summary>
+\`\`\`ts
+// Note for typescript users, these types are importable from "@ledgerhq/react-ui/components/Table/Columns"
+// <T> is the type the data that will be rendered by the table.
+
+interface Column<T> {
+  /**
+   * A function called to render each cell of the column.
+   */
+  render: (props: CellProps<T>) => React.ReactNode;
+  /**
+   * A valid grid template [value](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#values).
+   * This layout is applied to every cell of the column.
+   * Default to "min-content" - the largest minimal content contribution of the grid item.
+   */
+  layout?: string;
+  /**
+   * A function called to render the header cell.
+   * If omitted the rendered header element will be an empty div.
+   */
+  header?: () => React.ReactNode;
+}
+
+interface CellProps<T> {
+  /**
+   * The cell element.
+   */
+  elt: T;
+  /**
+   * The row index.
+   */
+  rowIndex: number;
+  /**
+   * The column index.
+   */
+  columnIndex: number;
+}
+\`\`\`
+</details>
+
+You can either define custom columns or reuse predefined ones that take care of the style
+and the layout and match the global look and feel.
+
+<details>
+<summary>Predefined columns</summary>
+\`\`\`tsx
+Table.Columns.text(args: {
+  /**
+   * An optional title.
+   */
+  title?: (elt: T) => React.ReactNode;
+  /**
+   * An optional subtitle.
+   */
+  subtitle?: (elt: T) => React.ReactNode;
+  /**
+   * An optional render function to display the column header.
+   */
+  header?: () => React.ReactNode;
+  /**
+   * The grid column layout, by default "auto".
+   */
+  layout?: string;
+  /**
+   * Optional extra props passed to the title <Text /> wrapper.
+   */
+  titleProps?: (elt: T) => Partial<React.ComponentProps<typeof Text>>;
+  /**
+   * Optional extra props passed to the subtitle <Text /> wrapper.
+   */
+  subtitleProps?: (elt: T) => Partial<React.ComponentProps<typeof Text>>;
+})
+
+Table.Columns.icon(args: {
+  /**
+   * An object containing the unerlying <Text /> wrapper props as well as
+   * the "name" and "weight" props of the unerlying <Icon />.
+   */
+  props: (elt: T) => Pick<IconProps, "name" | "weight"> & TextProps;
+  /**
+   * An optional render function to display the column header.
+   */
+  header?: () => React.ReactNode;
+  /**
+   * The grid column layout, by default "min-content".
+   */
+  layout?: string;
+})
+\`\`\`
+</details>
+
+\`\`\`tsx
+const columns = [
+  // Custom column. (layout is optional)
+  {
+    layout: "64px",
+    render: ({ elt }) => <div>elt.value</div>
+  },
+  // Predefined columns.
+  Table.Columns.text({
+    layout: "2fr",
+    title: (elt) => elt.name,
+    subtitle: (elt) => elt.currency.name,
+  }),
+  Table.Columns.icon({
+    props: (elt) => ({
+      name: elt.synchronized ? "CircledCheck" : "Clock",
+      color: elt.synchronized ? "success.c100" : "neutral.c80",
+    }),
+  }),
+]
+\`\`\`
+
+### Minimal Working Example
+
+\`\`\`tsx
+// An array of 12 items - each mapped to a row in the table.
+const data = new Array(12).fill(0).map((_, idx) => ({
+  value: idx,
+}));
+
+// We have 4 columns here.
+const NB_OF_COLUMNS = 4;
+const columns: Column<typeof data[0]>[] = Array(NB_OF_COLUMNS)
+  .fill(0)
+  .map((_, idx) => ({
+    // The header will be a letter based on the column (A / B / C / D).
+    // 65 is the char code for the letter 'A'.
+    header: () => <Text variant="h5">{String.fromCharCode(65 + idx)}</Text>,
+    // Each cell will contain an incremental number as well as the cell position.
+    render: ({ elt, rowIndex, columnIndex }) => (
+      <Flex alignItems="baseline">
+        <Text mr={4}>{elt.value * NB_OF_COLUMNS + columnIndex}</Text>
+        <Text variant="extraSmall">
+          ({rowIndex} / {columnIndex})
+        </Text>
+      </Flex>
+    ),
+  }));
+
+function MinimalExample(args) {
+  return <Table {...args} data={data} columns={columns} />;
+};
+\`\`\`
+`;
+const data = new Array(12).fill(0).map((_, idx) => ({
+  value: idx
+}));
+const NB_OF_COLUMNS = 4;
+const columns = Array(NB_OF_COLUMNS).fill(0).map((_, idx) => ({
+  header: () => /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    variant: "h5"
+  }, String.fromCharCode(65 + idx)),
+  render: ({ elt, rowIndex, columnIndex }) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    alignItems: "baseline"
+  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    mr: 4
+  }, elt.value * NB_OF_COLUMNS + columnIndex), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    variant: "extraSmall"
+  }, "(", rowIndex, " / ", columnIndex, ")"))
+}));
+const Default = (args) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    data,
+    columns
+  });
+};
+const styledExampleDescription = `
+A more advanced example that applies some styles to the table and uses predefined columns.
+
+Additional props passed to the Table are applied to the outer container which is
+an instance of the \`Grid\` component.
+
+In this example we are taking advantage of that by using the \`p\`, \`gridRowGap\`, \`gridColumnGap\`,
+\`borderRadius\` and \`backgroundColor\` props to style the table container.
+`;
+const Styled = (args) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    data: import_stories.balance.data,
+    columns: import_stories.balance.columns,
+    p: 8,
+    gridRowGap: 8,
+    gridColumnGap: 6,
+    borderRadius: 8,
+    backgroundColor: "neutral.c20"
+  }));
+};
+Styled.parameters = {
+  docs: {
+    description: {
+      story: styledExampleDescription
+    }
+  }
+};
+const nestedExampleDescription = `
+A complex example that takes in entry nested data and conditonally adds a custom additional row to the table.
+
+The data has the following shape:
+
+\`\`\`ts
+type Account = {
+  name: string;
+  currency: { name: string; abbrev: string };
+  synchronized: boolean;
+  amount: number;
+  evolution: number;
+  starred: boolean;
+  // The interesting thing is that an account can contain sub-accounts
+  subAccounts?: Account[];
+};
+\`\`\`
+
+The table used in this example adds an extra row containing a nested table when an account contains sub-accounts.
+
+In order to achieve that the \`extraRender\` prop is used and set to a function that will render the extra row.
+
+You can use the \`ExtraRowContainer\` wrapper as the row container if you want the extra content to span the entire row.
+Otherwise be careful not to disturb the grid layout order.
+
+\`\`\`tsx
+<Table
+  /* ... */
+  extraRender={(account) =>
+    // If there are sub accounts\u2026
+    account.subAccounts &&
+    account.subAccounts.length > 0 && (
+      // \u2026render the extra row.
+      // ExtraRowContainer is a component that will span to the whole row.
+      <Table.ExtraRowContainer>{/* stuff */}</Table.ExtraRowContainer>
+    )
+  }
+/>
+\`\`\`
+
+`;
+function SubAccounts({
+  account,
+  columns: columns2
+}) {
+  const theme = (0, import_styled_components.useTheme)();
+  const [expanded, setExpanded] = (0, import_react.useState)(false);
+  const { subAccounts } = account;
+  if (!subAccounts)
+    return null;
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, expanded && /* @__PURE__ */ import_react.default.createElement(import_index.Rows, {
+    data: subAccounts,
+    columns: columns2,
+    render: ({ columnIndex, children }) => columnIndex === 0 ? /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+      alignItems: "center",
+      justifyContent: "flex-end"
+    }, /* @__PURE__ */ import_react.default.createElement("div", {
+      style: {
+        width: "1px",
+        height: "2em",
+        marginRight: `${theme.space[6]}px`,
+        borderLeft: `1px solid ${theme.colors.neutral.c40}`
+      }
+    }), children) : children
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default.ExtraRowContainer, null, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    justifyContent: "center",
+    mt: -8
+  }, /* @__PURE__ */ import_react.default.createElement(import_Button.default.Expand, {
+    onToggle: setExpanded
+  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    variant: "paragraph"
+  }, expanded ? "Hide" : "Show", " tokens (", subAccounts.length, ")")))));
+}
+function Nested(args) {
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    data: import_stories.accounts.data,
+    columns: import_stories.accounts.columns,
+    gridRowGap: 8,
+    gridColumnGap: 6,
+    p: 8,
+    borderRadius: 8,
+    backgroundColor: "neutral.c20",
+    extraRender: (account) => account.subAccounts && account.subAccounts.length > 0 && /* @__PURE__ */ import_react.default.createElement(SubAccounts, {
+      account,
+      columns: import_stories.accounts.columns
+    })
+  });
+}
+Nested.parameters = {
+  docs: {
+    description: {
+      story: nestedExampleDescription
+    }
+  }
+};
+const customRowExampleDescription = `
+This example showcases how to styles rows, wrap them inside custom containers and add event handlers.
+
+#### Row containers and event handlers
+
+The \`renderRow\` prop is a render function that allows to customize the jsx output for each row of the table.
+
+Note that the container should have the [\`display: contents\`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout#grid_and_display_contents) css rule
+in order to preserve the table grid layout order.
+
+\`\`\`tsx
+const renderRow = React.useCallback(
+  (rowIndex, children) => (
+    // RowContainer is a convenience component having "display: contents" hardcoded.
+    // You can pass any event handler here.
+    <Table.RowContainer onClick={() => alert(rowIndex)}>
+      {children}
+    </Table.RowContainer>
+  ),
+  [],
+);
+
+<Table
+  /* ... */
+  renderRow={renderRow}
+/>
+\`\`\`
+
+#### Styling
+
+Styling the container itself will not work.
+Since it has the \`display: contents\` rule the element will not produce a content box.
+
+One working solution is to style the children instead.
+
+\`\`\`ts
+const CustomRowContainer = styled(Table.RowContainer).attrs(
+  ({ onClick }) => ({
+    onClick,
+  }),
+)\`
+  & > * {
+    padding-left: \${(p) => p.theme.space[5]}px;
+    padding-right: \${(p) => p.theme.space[5]}px;
+    padding-top: \${(p) => p.theme.space[5]}px;
+    padding-bottom: \${(p) => p.theme.space[5]}px;
+
+    &:first-child {
+      padding-left: \${(p) => p.theme.space[8]}px;
+    }
+    &:last-child {
+      padding-right: \${(p) => p.theme.space[8]}px;
+    }
+  }
+
+  &:hover > * {
+    transition: background-color 0.2s;
+    cursor: pointer;
+    background-color: \${(p) =>
+      p.rowIndex % 2 === 0
+        ? p.theme.colors.neutral.c30
+        : p.theme.colors.primary.c20};
+  }
+\`;
+\`\`\`
+`;
+const CustomRowContainer = (0, import_styled_components.default)(import_index.default.RowContainer).attrs(({ onClick }) => ({
+  onClick
+}))`
+  & > * {
+    padding-left: ${(p) => p.theme.space[5]}px;
+    padding-right: ${(p) => p.theme.space[5]}px;
+    padding-top: ${(p) => p.theme.space[5]}px;
+    padding-bottom: ${(p) => p.theme.space[5]}px;
+
+    &:first-child {
+      padding-left: ${(p) => p.theme.space[8]}px;
+    }
+    &:last-child {
+      padding-right: ${(p) => p.theme.space[8]}px;
+    }
+  }
+
+  &:hover > * {
+    transition: background-color 0.2s;
+    cursor: pointer;
+    background-color: ${(p) => p.rowIndex % 2 === 0 ? p.theme.colors.neutral.c30 : p.theme.colors.primary.c20};
+  }
+`;
+const CustomRows = (args) => {
+  const [selectedRowIndex, setSelectedRowIndex] = (0, import_react.useState)(null);
+  const renderRow = (0, import_react.useCallback)((rowIndex, children) => /* @__PURE__ */ import_react.default.createElement(CustomRowContainer, {
+    rowIndex,
+    onClick: () => setSelectedRowIndex(rowIndex)
+  }, children), []);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    mb: 8
+  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    variant: "h5"
+  }, "Selected index: ", selectedRowIndex ?? "none")), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    data: import_stories.balance.data,
+    columns: import_stories.balance.columns,
+    renderRow,
+    borderRadius: 8,
+    justifyItems: "stretch",
+    alignItems: "stretch",
+    border: "1px solid",
+    borderColor: "neutral.c50",
+    overflow: "hidden",
+    withHeaders: false
+  }));
+};
+CustomRows.parameters = {
+  docs: {
+    description: {
+      story: customRowExampleDescription
+    }
+  }
+};
+var Table_stories_default = {
+  title: "Tables/Table",
+  component: import_index.default,
+  argTypes: {
+    withHeaders: { type: "boolean", defaultValue: false },
+    data: { control: false },
+    columns: { control: false },
+    rows: { table: { disable: true } }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  }
+};
+//# sourceMappingURL=Table.stories.js.map

package/lib/cjs/components/Table/Table.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Table/Table.stories.tsx"],
+  "sourcesContent": ["import React, { useState, useCallback } from \"react\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Button from \"../cta/Button\";\nimport Flex from \"../layout/Flex\";\nimport Text from \"../asorted/Text\";\nimport Table, { RowContainerProps, Rows, Column, Props } from \"./index\";\nimport { balance, BalanceElement, accounts, Account } from \"./stories.helper\";\nimport { StoryTemplate } from \"../helpers\";\n\nconst description = `\n### A flexible table component.\n\nDefine columns and pass some data to the component that will render it appropriately.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Table } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\n### Define columns\n\nTo use the Table component the first thing to do is to define an array of columns.\n\nA column is an object that specifies:\n\n- how cells are rendered\n- how the header is rendered\n- the cells layout\n\n<details>\n<summary>Column object shape</summary>\n\\`\\`\\`ts\n// Note for typescript users, these types are importable from \"@ledgerhq/react-ui/components/Table/Columns\"\n// <T> is the type the data that will be rendered by the table.\n\ninterface Column<T> {\n  /**\n   * A function called to render each cell of the column.\n   */\n  render: (props: CellProps<T>) => React.ReactNode;\n  /**\n   * A valid grid template [value](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#values).\n   * This layout is applied to every cell of the column.\n   * Default to \"min-content\" - the largest minimal content contribution of the grid item.\n   */\n  layout?: string;\n  /**\n   * A function called to render the header cell.\n   * If omitted the rendered header element will be an empty div.\n   */\n  header?: () => React.ReactNode;\n}\n\ninterface CellProps<T> {\n  /**\n   * The cell element.\n   */\n  elt: T;\n  /**\n   * The row index.\n   */\n  rowIndex: number;\n  /**\n   * The column index.\n   */\n  columnIndex: number;\n}\n\\`\\`\\`\n</details>\n\nYou can either define custom columns or reuse predefined ones that take care of the style\nand the layout and match the global look and feel.\n\n<details>\n<summary>Predefined columns</summary>\n\\`\\`\\`tsx\nTable.Columns.text(args: {\n  /**\n   * An optional title.\n   */\n  title?: (elt: T) => React.ReactNode;\n  /**\n   * An optional subtitle.\n   */\n  subtitle?: (elt: T) => React.ReactNode;\n  /**\n   * An optional render function to display the column header.\n   */\n  header?: () => React.ReactNode;\n  /**\n   * The grid column layout, by default \"auto\".\n   */\n  layout?: string;\n  /**\n   * Optional extra props passed to the title <Text /> wrapper.\n   */\n  titleProps?: (elt: T) => Partial<React.ComponentProps<typeof Text>>;\n  /**\n   * Optional extra props passed to the subtitle <Text /> wrapper.\n   */\n  subtitleProps?: (elt: T) => Partial<React.ComponentProps<typeof Text>>;\n})\n\nTable.Columns.icon(args: {\n  /**\n   * An object containing the unerlying <Text /> wrapper props as well as\n   * the \"name\" and \"weight\" props of the unerlying <Icon />.\n   */\n  props: (elt: T) => Pick<IconProps, \"name\" | \"weight\"> & TextProps;\n  /**\n   * An optional render function to display the column header.\n   */\n  header?: () => React.ReactNode;\n  /**\n   * The grid column layout, by default \"min-content\".\n   */\n  layout?: string;\n})\n\\`\\`\\`\n</details>\n\n\\`\\`\\`tsx\nconst columns = [\n  // Custom column. (layout is optional)\n  {\n    layout: \"64px\",\n    render: ({ elt }) => <div>elt.value</div>\n  },\n  // Predefined columns.\n  Table.Columns.text({\n    layout: \"2fr\",\n    title: (elt) => elt.name,\n    subtitle: (elt) => elt.currency.name,\n  }),\n  Table.Columns.icon({\n    props: (elt) => ({\n      name: elt.synchronized ? \"CircledCheck\" : \"Clock\",\n      color: elt.synchronized ? \"success.c100\" : \"neutral.c80\",\n    }),\n  }),\n]\n\\`\\`\\`\n\n### Minimal Working Example\n\n\\`\\`\\`tsx\n// An array of 12 items - each mapped to a row in the table.\nconst data = new Array(12).fill(0).map((_, idx) => ({\n  value: idx,\n}));\n\n// We have 4 columns here.\nconst NB_OF_COLUMNS = 4;\nconst columns: Column<typeof data[0]>[] = Array(NB_OF_COLUMNS)\n  .fill(0)\n  .map((_, idx) => ({\n    // The header will be a letter based on the column (A / B / C / D).\n    // 65 is the char code for the letter 'A'.\n    header: () => <Text variant=\"h5\">{String.fromCharCode(65 + idx)}</Text>,\n    // Each cell will contain an incremental number as well as the cell position.\n    render: ({ elt, rowIndex, columnIndex }) => (\n      <Flex alignItems=\"baseline\">\n        <Text mr={4}>{elt.value * NB_OF_COLUMNS + columnIndex}</Text>\n        <Text variant=\"extraSmall\">\n          ({rowIndex} / {columnIndex})\n        </Text>\n      </Flex>\n    ),\n  }));\n\nfunction MinimalExample(args) {\n  return <Table {...args} data={data} columns={columns} />;\n};\n\\`\\`\\`\n`;\n\n/* Default minimal example */\n\n// An array of 12 items - each mapped to a row in the table.\nconst data = new Array(12).fill(0).map((_, idx) => ({\n  value: idx,\n}));\n\n// We have 4 columns here.\nconst NB_OF_COLUMNS = 4;\nconst columns: Column<typeof data[0]>[] = Array(NB_OF_COLUMNS)\n  .fill(0)\n  .map((_, idx) => ({\n    // The header will be a letter based on the column (A / B / C / D).\n    // 65 is the char code for the letter 'A'.\n    header: () => <Text variant=\"h5\">{String.fromCharCode(65 + idx)}</Text>,\n    // Each cell will contain an incremental number as well as the cell position.\n    render: ({ elt, rowIndex, columnIndex }) => (\n      <Flex alignItems=\"baseline\">\n        <Text mr={4}>{elt.value * NB_OF_COLUMNS + columnIndex}</Text>\n        <Text variant=\"extraSmall\">\n          ({rowIndex} / {columnIndex})\n        </Text>\n      </Flex>\n    ),\n  }));\n\nexport const Default: StoryTemplate<Props<typeof data[0]>> = (args) => {\n  return <Table {...args} data={data} columns={columns} />;\n};\n\n/* Styled example */\n\nconst styledExampleDescription = `\nA more advanced example that applies some styles to the table and uses predefined columns.\n\nAdditional props passed to the Table are applied to the outer container which is\nan instance of the \\`Grid\\` component.\n\nIn this example we are taking advantage of that by using the \\`p\\`, \\`gridRowGap\\`, \\`gridColumnGap\\`,\n\\`borderRadius\\` and \\`backgroundColor\\` props to style the table container.\n`;\n\nexport const Styled: StoryTemplate<Props<BalanceElement>> = (args) => {\n  return (\n    <>\n      <Table\n        {...args}\n        data={balance.data}\n        columns={balance.columns}\n        p={8}\n        gridRowGap={8}\n        gridColumnGap={6}\n        borderRadius={8}\n        backgroundColor=\"neutral.c20\"\n      />\n    </>\n  );\n};\n\nStyled.parameters = {\n  docs: {\n    description: {\n      story: styledExampleDescription,\n    },\n  },\n};\n\n/* Nested example */\n\nconst nestedExampleDescription = `\nA complex example that takes in entry nested data and conditonally adds a custom additional row to the table.\n\nThe data has the following shape:\n\n\\`\\`\\`ts\ntype Account = {\n  name: string;\n  currency: { name: string; abbrev: string };\n  synchronized: boolean;\n  amount: number;\n  evolution: number;\n  starred: boolean;\n  // The interesting thing is that an account can contain sub-accounts\n  subAccounts?: Account[];\n};\n\\`\\`\\`\n\nThe table used in this example adds an extra row containing a nested table when an account contains sub-accounts.\n\nIn order to achieve that the \\`extraRender\\` prop is used and set to a function that will render the extra row.\n\nYou can use the \\`ExtraRowContainer\\` wrapper as the row container if you want the extra content to span the entire row.\nOtherwise be careful not to disturb the grid layout order.\n\n\\`\\`\\`tsx\n<Table\n  /* ... */\n  extraRender={(account) =>\n    // If there are sub accounts\u2026\n    account.subAccounts &&\n    account.subAccounts.length > 0 && (\n      // \u2026render the extra row.\n      // ExtraRowContainer is a component that will span to the whole row.\n      <Table.ExtraRowContainer>{/* stuff */}</Table.ExtraRowContainer>\n    )\n  }\n/>\n\\`\\`\\`\n\n`;\n\nfunction SubAccounts({\n  account,\n  columns,\n}: {\n  account: Account;\n  columns: Column<Account>[];\n}): JSX.Element | null {\n  const theme = useTheme();\n  const [expanded, setExpanded] = useState(false);\n  const { subAccounts } = account;\n  if (!subAccounts) return null;\n\n  return (\n    <>\n      {expanded && (\n        <Rows\n          data={subAccounts}\n          columns={columns}\n          render={({ columnIndex, children }) =>\n            columnIndex === 0 ? (\n              <Flex alignItems=\"center\" justifyContent=\"flex-end\">\n                <div\n                  style={{\n                    width: \"1px\",\n                    height: \"2em\",\n                    marginRight: `${theme.space[6]}px`,\n                    borderLeft: `1px solid ${theme.colors.neutral.c40}`,\n                  }}\n                />\n                {children}\n              </Flex>\n            ) : (\n              children\n            )\n          }\n        />\n      )}\n      <Table.ExtraRowContainer>\n        <Flex justifyContent=\"center\" mt={-8}>\n          <Button.Expand onToggle={setExpanded}>\n            <Text variant={\"paragraph\"}>\n              {expanded ? \"Hide\" : \"Show\"} tokens ({subAccounts.length})\n            </Text>\n          </Button.Expand>\n        </Flex>\n      </Table.ExtraRowContainer>\n    </>\n  );\n}\n\nexport function Nested(args: Props<Account>): JSX.Element {\n  return (\n    <Table\n      {...args}\n      data={accounts.data}\n      columns={accounts.columns}\n      gridRowGap={8}\n      gridColumnGap={6}\n      p={8}\n      borderRadius={8}\n      backgroundColor=\"neutral.c20\"\n      extraRender={(account) =>\n        account.subAccounts &&\n        account.subAccounts.length > 0 && (\n          <SubAccounts account={account} columns={accounts.columns} />\n        )\n      }\n    />\n  );\n}\n\nNested.parameters = {\n  docs: {\n    description: {\n      story: nestedExampleDescription,\n    },\n  },\n};\n\n/* Custom row example */\n\nconst customRowExampleDescription = `\nThis example showcases how to styles rows, wrap them inside custom containers and add event handlers.\n\n#### Row containers and event handlers\n\nThe \\`renderRow\\` prop is a render function that allows to customize the jsx output for each row of the table.\n\nNote that the container should have the [\\`display: contents\\`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout#grid_and_display_contents) css rule\nin order to preserve the table grid layout order.\n\n\\`\\`\\`tsx\nconst renderRow = React.useCallback(\n  (rowIndex, children) => (\n    // RowContainer is a convenience component having \"display: contents\" hardcoded.\n    // You can pass any event handler here.\n    <Table.RowContainer onClick={() => alert(rowIndex)}>\n      {children}\n    </Table.RowContainer>\n  ),\n  [],\n);\n\n<Table\n  /* ... */\n  renderRow={renderRow}\n/>\n\\`\\`\\`\n\n#### Styling\n\nStyling the container itself will not work.\nSince it has the \\`display: contents\\` rule the element will not produce a content box.\n\nOne working solution is to style the children instead.\n\n\\`\\`\\`ts\nconst CustomRowContainer = styled(Table.RowContainer).attrs(\n  ({ onClick }) => ({\n    onClick,\n  }),\n)\\`\n  & > * {\n    padding-left: \\${(p) => p.theme.space[5]}px;\n    padding-right: \\${(p) => p.theme.space[5]}px;\n    padding-top: \\${(p) => p.theme.space[5]}px;\n    padding-bottom: \\${(p) => p.theme.space[5]}px;\n\n    &:first-child {\n      padding-left: \\${(p) => p.theme.space[8]}px;\n    }\n    &:last-child {\n      padding-right: \\${(p) => p.theme.space[8]}px;\n    }\n  }\n\n  &:hover > * {\n    transition: background-color 0.2s;\n    cursor: pointer;\n    background-color: \\${(p) =>\n      p.rowIndex % 2 === 0\n        ? p.theme.colors.neutral.c30\n        : p.theme.colors.primary.c20};\n  }\n\\`;\n\\`\\`\\`\n`;\n\nconst CustomRowContainer = styled(Table.RowContainer).attrs<{ onClick: () => void }>(\n  ({ onClick }) => ({\n    onClick,\n  }),\n)<RowContainerProps>`\n  & > * {\n    padding-left: ${(p) => p.theme.space[5]}px;\n    padding-right: ${(p) => p.theme.space[5]}px;\n    padding-top: ${(p) => p.theme.space[5]}px;\n    padding-bottom: ${(p) => p.theme.space[5]}px;\n\n    &:first-child {\n      padding-left: ${(p) => p.theme.space[8]}px;\n    }\n    &:last-child {\n      padding-right: ${(p) => p.theme.space[8]}px;\n    }\n  }\n\n  &:hover > * {\n    transition: background-color 0.2s;\n    cursor: pointer;\n    background-color: ${(p) =>\n      p.rowIndex % 2 === 0 ? p.theme.colors.neutral.c30 : p.theme.colors.primary.c20};\n  }\n`;\n\nexport const CustomRows: StoryTemplate<Props<BalanceElement>> = (args) => {\n  const [selectedRowIndex, setSelectedRowIndex] = useState(null);\n\n  const renderRow = useCallback(\n    (rowIndex, children) => (\n      <CustomRowContainer rowIndex={rowIndex} onClick={() => setSelectedRowIndex(rowIndex)}>\n        {children}\n      </CustomRowContainer>\n    ),\n    [],\n  );\n\n  return (\n    <>\n      <Flex mb={8}>\n        <Text variant=\"h5\">Selected index: {selectedRowIndex ?? \"none\"}</Text>\n      </Flex>\n      <Table\n        {...args}\n        data={balance.data}\n        columns={balance.columns}\n        renderRow={renderRow}\n        borderRadius={8}\n        justifyItems=\"stretch\"\n        alignItems=\"stretch\"\n        border=\"1px solid\"\n        borderColor=\"neutral.c50\"\n        overflow=\"hidden\"\n        withHeaders={false}\n      />\n    </>\n  );\n};\n\nCustomRows.parameters = {\n  docs: {\n    description: {\n      story: customRowExampleDescription,\n    },\n  },\n};\n\n/* Export */\n\nexport default {\n  title: \"Tables/Table\",\n  component: Table,\n  argTypes: {\n    withHeaders: { type: \"boolean\", defaultValue: false },\n    data: { control: false },\n    columns: { control: false },\n    rows: { table: { disable: true } },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/lib/cjs/components/Table/index.js

@@ -0,0 +1,110 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  ExtraRowContainer: () => ExtraRowContainer,
+  RowContainer: () => RowContainer,
+  Rows: () => Rows,
+  Table: () => Table,
+  default: () => Table_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_styled_system = __toModule(require("styled-system"));
+var import_Grid = __toModule(require("../layout/Grid"));
+var import_Flex = __toModule(require("../layout/Flex"));
+var Columns = __toModule(require("./Columns"));
+const Container = (0, import_styled_components.default)(import_Grid.default)`
+  ${import_styled_system.border}
+`;
+const ExtraRowContainer = import_styled_components.default.div.attrs({ gridColumn: "1 / -1" })`
+  ${import_styled_system.gridColumn}
+`;
+const RowContainer = (0, import_styled_components.default)(import_Flex.default)`
+  display: contents;
+`;
+function RowsComponent({
+  data,
+  columns,
+  render,
+  extraRender,
+  renderRow
+}) {
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, {
+    key: "row-component"
+  }, data.map((elt, rowIndex) => {
+    const row = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, columns.map((column, columnIndex) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, {
+      key: `row-component-column-${rowIndex}${columnIndex}`
+    }, render ? render({
+      column,
+      rowIndex,
+      columnIndex,
+      children: column.render({ elt, rowIndex, columnIndex })
+    }) : column.render({ elt, rowIndex, columnIndex }))), extraRender && extraRender(elt, rowIndex) || null);
+    if (renderRow) {
+      return renderRow(rowIndex, row);
+    } else {
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, {
+        key: `row-component-row-${rowIndex}`
+      }, row);
+    }
+  }));
+}
+const Rows = (0, import_react.memo)(RowsComponent);
+function Table({
+  data,
+  columns,
+  withHeaders,
+  extraRender,
+  renderRow,
+  ...containerProps
+}) {
+  const gridTemplateColumns = (0, import_react.useMemo)(() => columns.reduce((acc, col) => `${acc} ${col.layout || "auto"}`, ""), [columns]);
+  const headers = (0, import_react.useMemo)(() => withHeaders ? columns.reduce((acc, col, index) => [
+    ...acc,
+    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, {
+      key: `header-col-${index}`
+    }, col.header ? col.header() : /* @__PURE__ */ import_react.default.createElement("div", null))
+  ], []) : null, [withHeaders, columns]);
+  return /* @__PURE__ */ import_react.default.createElement(Container, {
+    gridTemplateColumns,
+    gridAutoRows: "auto",
+    columns: "none",
+    alignItems: "center",
+    ...containerProps
+  }, headers, /* @__PURE__ */ import_react.default.createElement(Rows, {
+    data,
+    columns,
+    extraRender,
+    renderRow
+  }));
+}
+Table.Columns = Columns;
+Table.ExtraRowContainer = ExtraRowContainer;
+Table.RowContainer = RowContainer;
+const memoTable = (0, import_react.memo)(Table);
+memoTable.Columns = Columns;
+memoTable.RowContainer = RowContainer;
+memoTable.ExtraRowContainer = ExtraRowContainer;
+var Table_default = memoTable;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/Table/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Table/index.tsx"],
+  "sourcesContent": ["import React, { memo, useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { border, BorderProps, gridColumn, GridColumnProps } from \"styled-system\";\nimport Grid, { Props as GridProps } from \"../layout/Grid\";\nimport Flex from \"../layout/Flex\";\nimport * as Columns from \"./Columns\";\nimport type { Column } from \"./Columns\";\nimport { BaseStyledProps } from \"../styled\";\nexport type { Column };\n\nexport interface ContainerExtraProps extends BorderProps, BaseStyledProps {}\nexport interface ContainerProps extends ContainerExtraProps, GridProps {}\nconst Container = styled(Grid)<ContainerExtraProps>`\n  ${border}\n`;\n\nexport const ExtraRowContainer = styled.div.attrs({ gridColumn: \"1 / -1\" })<GridColumnProps>`\n  ${gridColumn}\n`;\n\nexport type RowContainerProps = { rowIndex: number };\nexport const RowContainer = styled(Flex)<RowContainerProps>`\n  display: contents;\n`;\n\ninterface CommonProps<T> {\n  /** Table data */\n  data: T[];\n  /** Columns used to render table cells and headers. */\n  columns: Column<T>[];\n  /**\n   * An optional rendering function that will get called after each row render.\n   * Can be used to display additional rows and columns dynamically.\n   */\n  extraRender?: (elt: T, index: number) => React.ReactNode;\n  /**\n   * A render function that can be used to wrap each row of the table inside an custom element.\n   */\n  renderRow?: (rowIndex: number, children: React.ReactNode) => React.ReactNode;\n}\n\nexport interface Props<T> extends CommonProps<T>, Omit<ContainerProps, \"columns\" | \"color\"> {\n  /**\n   * Renders headers if set to true.\n   */\n  withHeaders?: boolean;\n}\n\nexport interface RowProps<T> extends CommonProps<T> {\n  render?: (args: {\n    column: Column<T>;\n    rowIndex: number;\n    columnIndex: number;\n    children: React.ReactNode;\n  }) => React.ReactNode;\n}\n\nfunction RowsComponent<T>({\n  data,\n  columns,\n  render,\n  extraRender,\n  renderRow,\n}: RowProps<T>): JSX.Element {\n  return (\n    <React.Fragment key=\"row-component\">\n      {data.map((elt, rowIndex) => {\n        const row = (\n          <>\n            {columns.map((column, columnIndex) => (\n              <React.Fragment key={`row-component-column-${rowIndex}${columnIndex}`}>\n                {render\n                  ? render({\n                      column,\n                      rowIndex,\n                      columnIndex,\n                      children: column.render({ elt, rowIndex, columnIndex }),\n                    })\n                  : column.render({ elt, rowIndex, columnIndex })}\n              </React.Fragment>\n            ))}\n            {(extraRender && extraRender(elt, rowIndex)) || null}\n          </>\n        );\n\n        if (renderRow) {\n          return renderRow(rowIndex, row);\n        } else {\n          return <React.Fragment key={`row-component-row-${rowIndex}`}>{row}</React.Fragment>;\n        }\n      })}\n    </React.Fragment>\n  );\n}\nexport const Rows = memo(RowsComponent) as typeof RowsComponent;\n\nexport function Table<T>({\n  data,\n  columns,\n  withHeaders,\n  extraRender,\n  renderRow,\n  ...containerProps\n}: Props<T>): JSX.Element {\n  const gridTemplateColumns = useMemo(\n    () => columns.reduce<string>((acc, col) => `${acc} ${col.layout || \"auto\"}`, \"\"),\n    [columns],\n  );\n\n  const headers = useMemo(\n    () =>\n      withHeaders\n        ? columns.reduce<React.ReactNode[]>(\n            (acc, col, index) => [\n              ...acc,\n              <React.Fragment key={`header-col-${index}`}>\n                {col.header ? col.header() : <div />}\n              </React.Fragment>,\n            ],\n            [],\n          )\n        : null,\n    [withHeaders, columns],\n  );\n\n  return (\n    <Container\n      gridTemplateColumns={gridTemplateColumns}\n      gridAutoRows=\"auto\"\n      columns=\"none\"\n      alignItems=\"center\"\n      {...containerProps}\n    >\n      {headers}\n      <Rows data={data} columns={columns} extraRender={extraRender} renderRow={renderRow} />\n    </Container>\n  );\n}\nTable.Columns = Columns;\nTable.ExtraRowContainer = ExtraRowContainer;\nTable.RowContainer = RowContainer;\n\nconst memoTable = memo(Table) as unknown as typeof Table;\nmemoTable.Columns = Columns;\nmemoTable.RowContainer = RowContainer;\nmemoTable.ExtraRowContainer = ExtraRowContainer;\n\nexport default memoTable;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,+BAAmB;AACnB,2BAAiE;AACjE,kBAAyC;AACzC,kBAAiB;AACjB,cAAyB;AAOzB,MAAM,YAAY,sCAAO;AAAA,IACrB;AAAA;AAGG,MAAM,oBAAoB,iCAAO,IAAI,MAAM,EAAE,YAAY;AAAA,IAC5D;AAAA;AAIG,MAAM,eAAe,sCAAO;AAAA;AAAA;AAoCnC,uBAA0B;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAC2B;AAC3B,SACE,mDAAC,qBAAM,UAAP;AAAA,IAAgB,KAAI;AAAA,KACjB,KAAK,IAAI,CAAC,KAAK,aAAa;AAC3B,UAAM,MACJ,wFACG,QAAQ,IAAI,CAAC,QAAQ,gBACpB,mDAAC,qBAAM,UAAP;AAAA,MAAgB,KAAK,wBAAwB,WAAW;AAAA,OACrD,SACG,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,OAAO,OAAO,EAAE,KAAK,UAAU;AAAA,SAE3C,OAAO,OAAO,EAAE,KAAK,UAAU,kBAGrC,eAAe,YAAY,KAAK,aAAc;AAIpD,QAAI,WAAW;AACb,aAAO,UAAU,UAAU;AAAA,WACtB;AACL,aAAO,mDAAC,qBAAM,UAAP;AAAA,QAAgB,KAAK,qBAAqB;AAAA,SAAa;AAAA;AAAA;AAAA;AAMjE,MAAM,OAAO,uBAAK;AAElB,eAAkB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GACqB;AACxB,QAAM,sBAAsB,0BAC1B,MAAM,QAAQ,OAAe,CAAC,KAAK,QAAQ,GAAG,OAAO,IAAI,UAAU,UAAU,KAC7E,CAAC;AAGH,QAAM,UAAU,0BACd,MACE,cACI,QAAQ,OACN,CAAC,KAAK,KAAK,UAAU;AAAA,IACnB,GAAG;AAAA,IACH,mDAAC,qBAAM,UAAP;AAAA,MAAgB,KAAK,cAAc;AAAA,OAChC,IAAI,SAAS,IAAI,WAAW,mDAAC,OAAD;AAAA,KAGjC,MAEF,MACN,CAAC,aAAa;AAGhB,SACE,mDAAC,WAAD;AAAA,IACE;AAAA,IACA,cAAa;AAAA,IACb,SAAQ;AAAA,IACR,YAAW;AAAA,OACP;AAAA,KAEH,SACD,mDAAC,MAAD;AAAA,IAAM;AAAA,IAAY;AAAA,IAAkB;AAAA,IAA0B;AAAA;AAAA;AAIpE,MAAM,UAAU;AAChB,MAAM,oBAAoB;AAC1B,MAAM,eAAe;AAErB,MAAM,YAAY,uBAAK;AACvB,UAAU,UAAU;AACpB,UAAU,eAAe;AACzB,UAAU,oBAAoB;AAE9B,IAAO,gBAAQ;",
+  "names": []
+}