@devtools-ui/table 0.0.2--canary.11.588

package/dist/cjs/index.cjs

@@ -0,0 +1,106 @@
+"use strict";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Table: () => Table2,
+  TableComponent: () => TableComponent,
+  tableTransform: () => tableTransform
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/component/index.tsx
+var import_react = require("@chakra-ui/react");
+var import_react2 = __toESM(require("react"));
+var useTablePros = (props) => {
+  const { rows } = props;
+  const parsedRows = rows.map(
+    (row) => Object.entries(row).reduce((acc, [key, value]) => {
+      if (key === "time") {
+        return {
+          ...acc,
+          [key]: new Date(value).toLocaleString()
+        };
+      }
+      if (value === null || value === void 0) {
+        return {
+          ...acc,
+          [key]: ""
+        };
+      }
+      if (typeof value === "object") {
+        return {
+          ...acc,
+          [key]: JSON.stringify(value)
+        };
+      }
+      return { ...acc, [key]: value };
+    }, {})
+  );
+  const headers = Array.from(new Set(rows.flatMap((row) => Object.keys(row))));
+  return {
+    ...props,
+    headers,
+    rows: parsedRows
+  };
+};
+var TableComponent = (props) => {
+  const { headers, rows } = useTablePros(props);
+  if (!rows.length) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react2.default.createElement(import_react.TableContainer, null, /* @__PURE__ */ import_react2.default.createElement(import_react.Table, { variant: "simple" }, /* @__PURE__ */ import_react2.default.createElement(import_react.Thead, null, /* @__PURE__ */ import_react2.default.createElement(import_react.Tr, null, headers.map((key) => /* @__PURE__ */ import_react2.default.createElement(import_react.Th, { key }, key)))), /* @__PURE__ */ import_react2.default.createElement(import_react.Tbody, null, rows.map((row, index) => /* @__PURE__ */ import_react2.default.createElement(import_react.Tr, { key: index }, headers.map((key) => /* @__PURE__ */ import_react2.default.createElement(import_react.Td, { key }, row[key] ?? "")))))));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/dsl/index.tsx
+var import_react3 = __toESM(require("react"));
+var import_dsl = require("@player-tools/dsl");
+var Table2 = (props) => {
+  const { binding, children, ...rest } = props;
+  return /* @__PURE__ */ import_react3.default.createElement(import_dsl.Asset, { type: "table", ...rest }, binding && /* @__PURE__ */ import_react3.default.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/transform/index.ts
+var tableTransform = (asset, options) => {
+  return {
+    ...asset,
+    rows: asset.binding === void 0 ? [] : options.data.model.get(asset.binding, {
+      includeInvalid: true,
+      formatted: false
+    })
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Table,
+  TableComponent,
+  tableTransform
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/component/index.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/dsl/index.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/transform/index.ts"],"sourcesContent":["export * from \"./types\";\nexport * from \"./component\";\nexport * from \"./dsl\";\nexport * from \"./transform\";\n","import {\n  Table,\n  TableContainer,\n  Tbody,\n  Td,\n  Th,\n  Thead,\n  Tr,\n} from \"@chakra-ui/react\";\nimport React from \"react\";\nimport type { TransformedTable } from \"../types\";\n\n/**\n * Hook to convert the data we get from the Player Content into the properties our component expects:\n */\nconst useTablePros = (props: TransformedTable) => {\n  // Translate the properties we get from the Player Content (DSL > JSON > transformer)\n  // into what the elements that compose your component expect (platform-specific, for\n  // platform-agnostic transformations, see the transformer):\n\n  const { rows } = props;\n\n  const parsedRows = rows.map((row) =>\n    Object.entries(row).reduce((acc, [key, value]) => {\n      if (key === \"time\") {\n        return {\n          ...acc,\n          [key]: new Date(value).toLocaleString(),\n        };\n      }\n\n      if (value === null || value === undefined) {\n        return {\n          ...acc,\n          [key]: \"\",\n        };\n      }\n\n      if (typeof value === \"object\") {\n        return {\n          ...acc,\n          [key]: JSON.stringify(value),\n        };\n      }\n\n      return { ...acc, [key]: value };\n    }, {} as Record<string, string>)\n  );\n\n  // Get the keys to use as column headers (checking all the rows for cases where we have different keys):\n  const headers = Array.from(new Set(rows.flatMap((row) => Object.keys(row))));\n\n  return {\n    ...props,\n    headers,\n    rows: parsedRows,\n  } as const;\n};\n\nexport const TableComponent = (props: TransformedTable) => {\n  const { headers, rows } = useTablePros(props);\n\n  if (!rows.length) {\n    return null;\n  }\n\n  return (\n    <TableContainer>\n      <Table variant=\"simple\">\n        <Thead>\n          <Tr>\n            {headers.map((key) => (\n              <Th key={key}>{key}</Th>\n            ))}\n          </Tr>\n        </Thead>\n        <Tbody>\n          {rows.map((row, index) => (\n            <Tr key={index}>\n              {headers.map((key) => (\n                <Td key={key}>{row[key] ?? \"\"}</Td>\n              ))}\n            </Tr>\n          ))}\n        </Tbody>\n      </Table>\n    </TableContainer>\n  );\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport type { TableAsset } from \"../types\";\n\n/**\n * Defines the component DSL representation, so users of this plugin can author Player-UI\n * content leveraging .jsx/.tsx syntax.\n */\nexport const Table = (\n  props: Omit<AssetPropsWithChildren<TableAsset>, \"binding\"> & {\n    /** The binding */\n    binding?: BindingTemplateInstance;\n  }\n) => {\n  const { binding, children, ...rest } = props;\n\n  return (\n    <Asset type=\"table\" {...rest}>\n      {binding && <property name=\"binding\">{binding.toValue()}</property>}\n      {children}\n    </Asset>\n  );\n};\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { TableAsset, TransformedTable } from \"../types\";\n\n/**\n * Platform-agnostic transform function that takes the properties we get from the Player Content (DSL > JSON)\n * and embeds Player state and methods:\n */\nexport const tableTransform: TransformFunction<TableAsset, TransformedTable> = (\n  asset,\n  options\n) => {\n  return {\n    ...asset,\n    rows:\n      asset.binding === undefined\n        ? []\n        : options.data.model.get(asset.binding, {\n            includeInvalid: true,\n            formatted: false,\n          }),\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,eAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;;;ACAA,mBAQO;AACP,IAAAC,gBAAkB;AAMlB,IAAM,eAAe,CAAC,UAA4B;AAKhD,QAAM,EAAE,KAAK,IAAI;AAEjB,QAAM,aAAa,KAAK;AAAA,IAAI,CAAC,QAC3B,OAAO,QAAQ,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AAChD,UAAI,QAAQ,QAAQ;AAClB,eAAO;AAAA,UACL,GAAG;AAAA,UACH,CAAC,GAAG,GAAG,IAAI,KAAK,KAAK,EAAE,eAAe;AAAA,QACxC;AAAA,MACF;AAEA,UAAI,UAAU,QAAQ,UAAU,QAAW;AACzC,eAAO;AAAA,UACL,GAAG;AAAA,UACH,CAAC,GAAG,GAAG;AAAA,QACT;AAAA,MACF;AAEA,UAAI,OAAO,UAAU,UAAU;AAC7B,eAAO;AAAA,UACL,GAAG;AAAA,UACH,CAAC,GAAG,GAAG,KAAK,UAAU,KAAK;AAAA,QAC7B;AAAA,MACF;AAEA,aAAO,EAAE,GAAG,KAAK,CAAC,GAAG,GAAG,MAAM;AAAA,IAChC,GAAG,CAAC,CAA2B;AAAA,EACjC;AAGA,QAAM,UAAU,MAAM,KAAK,IAAI,IAAI,KAAK,QAAQ,CAAC,QAAQ,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC;AAE3E,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA,MAAM;AAAA,EACR;AACF;AAEO,IAAM,iBAAiB,CAAC,UAA4B;AACzD,QAAM,EAAE,SAAS,KAAK,IAAI,aAAa,KAAK;AAE5C,MAAI,CAAC,KAAK,QAAQ;AAChB,WAAO;AAAA,EACT;AAEA,SACE,8BAAAC,QAAA,cAAC,mCACC,8BAAAA,QAAA,cAAC,sBAAM,SAAQ,YACb,8BAAAA,QAAA,cAAC,0BACC,8BAAAA,QAAA,cAAC,uBACE,QAAQ,IAAI,CAAC,QACZ,8BAAAA,QAAA,cAAC,mBAAG,OAAW,GAAI,CACpB,CACH,CACF,GACA,8BAAAA,QAAA,cAAC,0BACE,KAAK,IAAI,CAAC,KAAK,UACd,8BAAAA,QAAA,cAAC,mBAAG,KAAK,SACN,QAAQ,IAAI,CAAC,QACZ,8BAAAA,QAAA,cAAC,mBAAG,OAAW,IAAI,GAAG,KAAK,EAAG,CAC/B,CACH,CACD,CACH,CACF,CACF;AAEJ;;;ACxFA,IAAAC,gBAAkB;AAClB,iBAIO;AAOA,IAAMC,SAAQ,CACnB,UAIG;AACH,QAAM,EAAE,SAAS,UAAU,GAAG,KAAK,IAAI;AAEvC,SACE,8BAAAC,QAAA,cAAC,oBAAM,MAAK,SAAS,GAAG,QACrB,WAAW,8BAAAA,QAAA,cAAC,cAAS,MAAK,aAAW,QAAQ,QAAQ,CAAE,GACvD,QACH;AAEJ;;;ACnBO,IAAM,iBAAkE,CAC7E,OACA,YACG;AACH,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MACE,MAAM,YAAY,SACd,CAAC,IACD,QAAQ,KAAK,MAAM,IAAI,MAAM,SAAS;AAAA,MACpC,gBAAgB;AAAA,MAChB,WAAW;AAAA,IACb,CAAC;AAAA,EACT;AACF;","names":["Table","import_react","React","import_react","Table","React"]}

package/dist/index.legacy-esm.js

@@ -0,0 +1,77 @@
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/component/index.tsx
+import {
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr
+} from "@chakra-ui/react";
+import React from "react";
+var useTablePros = (props) => {
+  const { rows } = props;
+  const parsedRows = rows.map(
+    (row) => Object.entries(row).reduce((acc, [key, value]) => {
+      if (key === "time") {
+        return {
+          ...acc,
+          [key]: new Date(value).toLocaleString()
+        };
+      }
+      if (value === null || value === void 0) {
+        return {
+          ...acc,
+          [key]: ""
+        };
+      }
+      if (typeof value === "object") {
+        return {
+          ...acc,
+          [key]: JSON.stringify(value)
+        };
+      }
+      return { ...acc, [key]: value };
+    }, {})
+  );
+  const headers = Array.from(new Set(rows.flatMap((row) => Object.keys(row))));
+  return {
+    ...props,
+    headers,
+    rows: parsedRows
+  };
+};
+var TableComponent = (props) => {
+  const { headers, rows } = useTablePros(props);
+  if (!rows.length) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(TableContainer, null, /* @__PURE__ */ React.createElement(Table, { variant: "simple" }, /* @__PURE__ */ React.createElement(Thead, null, /* @__PURE__ */ React.createElement(Tr, null, headers.map((key) => /* @__PURE__ */ React.createElement(Th, { key }, key)))), /* @__PURE__ */ React.createElement(Tbody, null, rows.map((row, index) => /* @__PURE__ */ React.createElement(Tr, { key: index }, headers.map((key) => /* @__PURE__ */ React.createElement(Td, { key }, row[key] ?? "")))))));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/dsl/index.tsx
+import React2 from "react";
+import {
+  Asset
+} from "@player-tools/dsl";
+var Table2 = (props) => {
+  const { binding, children, ...rest } = props;
+  return /* @__PURE__ */ React2.createElement(Asset, { type: "table", ...rest }, binding && /* @__PURE__ */ React2.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/transform/index.ts
+var tableTransform = (asset, options) => {
+  return {
+    ...asset,
+    rows: asset.binding === void 0 ? [] : options.data.model.get(asset.binding, {
+      includeInvalid: true,
+      formatted: false
+    })
+  };
+};
+export {
+  Table2 as Table,
+  TableComponent,
+  tableTransform
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs

@@ -0,0 +1,77 @@
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/component/index.tsx
+import {
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr
+} from "@chakra-ui/react";
+import React from "react";
+var useTablePros = (props) => {
+  const { rows } = props;
+  const parsedRows = rows.map(
+    (row) => Object.entries(row).reduce((acc, [key, value]) => {
+      if (key === "time") {
+        return {
+          ...acc,
+          [key]: new Date(value).toLocaleString()
+        };
+      }
+      if (value === null || value === void 0) {
+        return {
+          ...acc,
+          [key]: ""
+        };
+      }
+      if (typeof value === "object") {
+        return {
+          ...acc,
+          [key]: JSON.stringify(value)
+        };
+      }
+      return { ...acc, [key]: value };
+    }, {})
+  );
+  const headers = Array.from(new Set(rows.flatMap((row) => Object.keys(row))));
+  return {
+    ...props,
+    headers,
+    rows: parsedRows
+  };
+};
+var TableComponent = (props) => {
+  const { headers, rows } = useTablePros(props);
+  if (!rows.length) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(TableContainer, null, /* @__PURE__ */ React.createElement(Table, { variant: "simple" }, /* @__PURE__ */ React.createElement(Thead, null, /* @__PURE__ */ React.createElement(Tr, null, headers.map((key) => /* @__PURE__ */ React.createElement(Th, { key }, key)))), /* @__PURE__ */ React.createElement(Tbody, null, rows.map((row, index) => /* @__PURE__ */ React.createElement(Tr, { key: index }, headers.map((key) => /* @__PURE__ */ React.createElement(Td, { key }, row[key] ?? "")))))));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/dsl/index.tsx
+import React2 from "react";
+import {
+  Asset
+} from "@player-tools/dsl";
+var Table2 = (props) => {
+  const { binding, children, ...rest } = props;
+  return /* @__PURE__ */ React2.createElement(Asset, { type: "table", ...rest }, binding && /* @__PURE__ */ React2.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/transform/index.ts
+var tableTransform = (asset, options) => {
+  return {
+    ...asset,
+    rows: asset.binding === void 0 ? [] : options.data.model.get(asset.binding, {
+      includeInvalid: true,
+      formatted: false
+    })
+  };
+};
+export {
+  Table2 as Table,
+  TableComponent,
+  tableTransform
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/component/index.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/dsl/index.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/table/src/transform/index.ts"],"sourcesContent":["import {\n  Table,\n  TableContainer,\n  Tbody,\n  Td,\n  Th,\n  Thead,\n  Tr,\n} from \"@chakra-ui/react\";\nimport React from \"react\";\nimport type { TransformedTable } from \"../types\";\n\n/**\n * Hook to convert the data we get from the Player Content into the properties our component expects:\n */\nconst useTablePros = (props: TransformedTable) => {\n  // Translate the properties we get from the Player Content (DSL > JSON > transformer)\n  // into what the elements that compose your component expect (platform-specific, for\n  // platform-agnostic transformations, see the transformer):\n\n  const { rows } = props;\n\n  const parsedRows = rows.map((row) =>\n    Object.entries(row).reduce((acc, [key, value]) => {\n      if (key === \"time\") {\n        return {\n          ...acc,\n          [key]: new Date(value).toLocaleString(),\n        };\n      }\n\n      if (value === null || value === undefined) {\n        return {\n          ...acc,\n          [key]: \"\",\n        };\n      }\n\n      if (typeof value === \"object\") {\n        return {\n          ...acc,\n          [key]: JSON.stringify(value),\n        };\n      }\n\n      return { ...acc, [key]: value };\n    }, {} as Record<string, string>)\n  );\n\n  // Get the keys to use as column headers (checking all the rows for cases where we have different keys):\n  const headers = Array.from(new Set(rows.flatMap((row) => Object.keys(row))));\n\n  return {\n    ...props,\n    headers,\n    rows: parsedRows,\n  } as const;\n};\n\nexport const TableComponent = (props: TransformedTable) => {\n  const { headers, rows } = useTablePros(props);\n\n  if (!rows.length) {\n    return null;\n  }\n\n  return (\n    <TableContainer>\n      <Table variant=\"simple\">\n        <Thead>\n          <Tr>\n            {headers.map((key) => (\n              <Th key={key}>{key}</Th>\n            ))}\n          </Tr>\n        </Thead>\n        <Tbody>\n          {rows.map((row, index) => (\n            <Tr key={index}>\n              {headers.map((key) => (\n                <Td key={key}>{row[key] ?? \"\"}</Td>\n              ))}\n            </Tr>\n          ))}\n        </Tbody>\n      </Table>\n    </TableContainer>\n  );\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport type { TableAsset } from \"../types\";\n\n/**\n * Defines the component DSL representation, so users of this plugin can author Player-UI\n * content leveraging .jsx/.tsx syntax.\n */\nexport const Table = (\n  props: Omit<AssetPropsWithChildren<TableAsset>, \"binding\"> & {\n    /** The binding */\n    binding?: BindingTemplateInstance;\n  }\n) => {\n  const { binding, children, ...rest } = props;\n\n  return (\n    <Asset type=\"table\" {...rest}>\n      {binding && <property name=\"binding\">{binding.toValue()}</property>}\n      {children}\n    </Asset>\n  );\n};\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { TableAsset, TransformedTable } from \"../types\";\n\n/**\n * Platform-agnostic transform function that takes the properties we get from the Player Content (DSL > JSON)\n * and embeds Player state and methods:\n */\nexport const tableTransform: TransformFunction<TableAsset, TransformedTable> = (\n  asset,\n  options\n) => {\n  return {\n    ...asset,\n    rows:\n      asset.binding === undefined\n        ? []\n        : options.data.model.get(asset.binding, {\n            includeInvalid: true,\n            formatted: false,\n          }),\n  };\n};\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,WAAW;AAMlB,IAAM,eAAe,CAAC,UAA4B;AAKhD,QAAM,EAAE,KAAK,IAAI;AAEjB,QAAM,aAAa,KAAK;AAAA,IAAI,CAAC,QAC3B,OAAO,QAAQ,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AAChD,UAAI,QAAQ,QAAQ;AAClB,eAAO;AAAA,UACL,GAAG;AAAA,UACH,CAAC,GAAG,GAAG,IAAI,KAAK,KAAK,EAAE,eAAe;AAAA,QACxC;AAAA,MACF;AAEA,UAAI,UAAU,QAAQ,UAAU,QAAW;AACzC,eAAO;AAAA,UACL,GAAG;AAAA,UACH,CAAC,GAAG,GAAG;AAAA,QACT;AAAA,MACF;AAEA,UAAI,OAAO,UAAU,UAAU;AAC7B,eAAO;AAAA,UACL,GAAG;AAAA,UACH,CAAC,GAAG,GAAG,KAAK,UAAU,KAAK;AAAA,QAC7B;AAAA,MACF;AAEA,aAAO,EAAE,GAAG,KAAK,CAAC,GAAG,GAAG,MAAM;AAAA,IAChC,GAAG,CAAC,CAA2B;AAAA,EACjC;AAGA,QAAM,UAAU,MAAM,KAAK,IAAI,IAAI,KAAK,QAAQ,CAAC,QAAQ,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC;AAE3E,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA,MAAM;AAAA,EACR;AACF;AAEO,IAAM,iBAAiB,CAAC,UAA4B;AACzD,QAAM,EAAE,SAAS,KAAK,IAAI,aAAa,KAAK;AAE5C,MAAI,CAAC,KAAK,QAAQ;AAChB,WAAO;AAAA,EACT;AAEA,SACE,oCAAC,sBACC,oCAAC,SAAM,SAAQ,YACb,oCAAC,aACC,oCAAC,UACE,QAAQ,IAAI,CAAC,QACZ,oCAAC,MAAG,OAAW,GAAI,CACpB,CACH,CACF,GACA,oCAAC,aACE,KAAK,IAAI,CAAC,KAAK,UACd,oCAAC,MAAG,KAAK,SACN,QAAQ,IAAI,CAAC,QACZ,oCAAC,MAAG,OAAW,IAAI,GAAG,KAAK,EAAG,CAC/B,CACH,CACD,CACH,CACF,CACF;AAEJ;;;ACxFA,OAAOA,YAAW;AAClB;AAAA,EAEE;AAAA,OAEK;AAOA,IAAMC,SAAQ,CACnB,UAIG;AACH,QAAM,EAAE,SAAS,UAAU,GAAG,KAAK,IAAI;AAEvC,SACE,gBAAAD,OAAA,cAAC,SAAM,MAAK,SAAS,GAAG,QACrB,WAAW,gBAAAA,OAAA,cAAC,cAAS,MAAK,aAAW,QAAQ,QAAQ,CAAE,GACvD,QACH;AAEJ;;;ACnBO,IAAM,iBAAkE,CAC7E,OACA,YACG;AACH,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MACE,MAAM,YAAY,SACd,CAAC,IACD,QAAQ,KAAK,MAAM,IAAI,MAAM,SAAS;AAAA,MACpC,gBAAgB;AAAA,MAChB,WAAW;AAAA,IACb,CAAC;AAAA,EACT;AACF;","names":["React","Table"]}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@devtools-ui/table",
+  "version": "0.0.2--canary.11.588",
+  "main": "dist/cjs/index.cjs",
+  "dependencies": {
+    "@devtools-ui/text": "0.0.2--canary.11.588",
+    "@devtools-ui/collection": "0.0.2--canary.11.588",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@player-tools/dsl": "0.5.2--canary.87.2261",
+    "@player-ui/asset-transform-plugin": "^0.7.1",
+    "@player-ui/player": "0.7.1",
+    "@player-ui/react": "^0.7.1",
+    "@player-ui/types": "0.7.1",
+    "@types/react": "^18.2.51",
+    "dlv": "^1.1.3",
+    "eslint-plugin-storybook": "^0.8.0",
+    "framer-motion": "^11.0.8",
+    "react": "^18.2.0",
+    "tslib": "^2.6.2"
+  },
+  "module": "dist/index.legacy-esm.js",
+  "types": "types/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/cjs/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "peerDependencies": {}
+}

package/src/component/index.tsx

@@ -0,0 +1,89 @@
+import {
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from "@chakra-ui/react";
+import React from "react";
+import type { TransformedTable } from "../types";
+
+/**
+ * Hook to convert the data we get from the Player Content into the properties our component expects:
+ */
+const useTablePros = (props: TransformedTable) => {
+  // Translate the properties we get from the Player Content (DSL > JSON > transformer)
+  // into what the elements that compose your component expect (platform-specific, for
+  // platform-agnostic transformations, see the transformer):
+
+  const { rows } = props;
+
+  const parsedRows = rows.map((row) =>
+    Object.entries(row).reduce((acc, [key, value]) => {
+      if (key === "time") {
+        return {
+          ...acc,
+          [key]: new Date(value).toLocaleString(),
+        };
+      }
+
+      if (value === null || value === undefined) {
+        return {
+          ...acc,
+          [key]: "",
+        };
+      }
+
+      if (typeof value === "object") {
+        return {
+          ...acc,
+          [key]: JSON.stringify(value),
+        };
+      }
+
+      return { ...acc, [key]: value };
+    }, {} as Record<string, string>)
+  );
+
+  // Get the keys to use as column headers (checking all the rows for cases where we have different keys):
+  const headers = Array.from(new Set(rows.flatMap((row) => Object.keys(row))));
+
+  return {
+    ...props,
+    headers,
+    rows: parsedRows,
+  } as const;
+};
+
+export const TableComponent = (props: TransformedTable) => {
+  const { headers, rows } = useTablePros(props);
+
+  if (!rows.length) {
+    return null;
+  }
+
+  return (
+    <TableContainer>
+      <Table variant="simple">
+        <Thead>
+          <Tr>
+            {headers.map((key) => (
+              <Th key={key}>{key}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {rows.map((row, index) => (
+            <Tr key={index}>
+              {headers.map((key) => (
+                <Td key={key}>{row[key] ?? ""}</Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+};

package/src/dsl/__tests__/index.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { describe, expect, test } from "vitest";
+import { render, binding as b } from "@player-tools/dsl";
+import { Table } from "../";
+
+describe("DSL: Table", () => {
+  test("Renders table", async () => {
+    const rendered = await render(<Table binding={b`my_binding`} />);
+
+    expect(rendered.jsonValue).toStrictEqual({
+      id: "root",
+      type: "table",
+      binding: "my_binding",
+    });
+  });
+});

package/src/dsl/index.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import {
+  AssetPropsWithChildren,
+  Asset,
+  BindingTemplateInstance,
+} from "@player-tools/dsl";
+import type { TableAsset } from "../types";
+
+/**
+ * Defines the component DSL representation, so users of this plugin can author Player-UI
+ * content leveraging .jsx/.tsx syntax.
+ */
+export const Table = (
+  props: Omit<AssetPropsWithChildren<TableAsset>, "binding"> & {
+    /** The binding */
+    binding?: BindingTemplateInstance;
+  }
+) => {
+  const { binding, children, ...rest } = props;
+
+  return (
+    <Asset type="table" {...rest}>
+      {binding && <property name="binding">{binding.toValue()}</property>}
+      {children}
+    </Asset>
+  );
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./types";
+export * from "./component";
+export * from "./dsl";
+export * from "./transform";

package/src/transform/index.ts

@@ -0,0 +1,22 @@
+import type { TransformFunction } from "@player-ui/player";
+import { TableAsset, TransformedTable } from "../types";
+
+/**
+ * Platform-agnostic transform function that takes the properties we get from the Player Content (DSL > JSON)
+ * and embeds Player state and methods:
+ */
+export const tableTransform: TransformFunction<TableAsset, TransformedTable> = (
+  asset,
+  options
+) => {
+  return {
+    ...asset,
+    rows:
+      asset.binding === undefined
+        ? []
+        : options.data.model.get(asset.binding, {
+            includeInvalid: true,
+            formatted: false,
+          }),
+  };
+};

package/src/types/index.ts

@@ -0,0 +1,12 @@
+import type { Asset } from "@player-ui/types";
+
+export interface TableAsset extends Asset<"table"> {
+  /** Binding */
+  binding?: string;
+}
+
+/** A stateful instance of the asset */
+export interface TransformedTable extends TableAsset {
+  /** The result of the transformation (transform/index.ts) */
+  rows: Array<Record<string, string>>;
+}

package/types/component/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { TransformedTable } from "../types";
+export declare const TableComponent: (props: TransformedTable) => React.JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/types/dsl/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { AssetPropsWithChildren, BindingTemplateInstance } from "@player-tools/dsl";
+import type { TableAsset } from "../types";
+/**
+ * Defines the component DSL representation, so users of this plugin can author Player-UI
+ * content leveraging .jsx/.tsx syntax.
+ */
+export declare const Table: (props: Omit<AssetPropsWithChildren<TableAsset>, "binding"> & {
+    /** The binding */
+    binding?: BindingTemplateInstance;
+}) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./component";
+export * from "./dsl";
+export * from "./transform";
+//# sourceMappingURL=index.d.ts.map

package/types/transform/index.d.ts

@@ -0,0 +1,8 @@
+import type { TransformFunction } from "@player-ui/player";
+import { TableAsset, TransformedTable } from "../types";
+/**
+ * Platform-agnostic transform function that takes the properties we get from the Player Content (DSL > JSON)
+ * and embeds Player state and methods:
+ */
+export declare const tableTransform: TransformFunction<TableAsset, TransformedTable>;
+//# sourceMappingURL=index.d.ts.map

package/types/types/index.d.ts

@@ -0,0 +1,11 @@
+import type { Asset } from "@player-ui/types";
+export interface TableAsset extends Asset<"table"> {
+    /** Binding */
+    binding?: string;
+}
+/** A stateful instance of the asset */
+export interface TransformedTable extends TableAsset {
+    /** The result of the transformation (transform/index.ts) */
+    rows: Array<Record<string, string>>;
+}
+//# sourceMappingURL=index.d.ts.map