@d1vij/jassm 0.1.14 → 0.1.15

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import { MDXComponents } from "mdx/types";
 type MDXComponent = MDXComponents[number];
 declare const BaseElementTags: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "a", "em", "del", "strong", "code", "blockquote", "pre", "p", "hr", "ol", "ul", "li", "img", "table", "thead", "tbody", "th", "tr", "td"];
 declare const BaseElements: Record<(typeof BaseElementTags)[number], MDXComponent>;
+import { ComponentPropsWithoutRef, ElementType } from "react";
+type ElementProps<T extends ElementType> = ComponentPropsWithoutRef<T>;
 type JSX = React.JSX.Element | null;
 type HeaderLevels = 1 | 2 | 3 | 4 | 5 | 6;
 import { MDXComponents as MDXComponents2, MDXProps } from "mdx/types";
@@ -145,13 +147,13 @@ declare class CoalescedRegistry<R extends readonly AbstractRegistry<Record<strin
 /**
 * List of default style classes
 */
-declare const StyleClassesList: readonly ["header", "header_button", "header_1", "header_2", "header_3", "header_4", "header_5", "header_6", "header_icon", "anchor", "button", "bold", "italic", "span", "striked", "paragraph", "code", "preformatted", "blockquote", "horizontal_line", "image", "list", "unordered_list", "ordered_list", "list_item", "table", "table_head", "table_head_cell", "table_body", "table_row", "table_data"];
+declare const StyleClassesList: readonly ["header", "header_button", "header_1", "header_2", "header_3", "header_4", "header_5", "header_6", "header_icon", "anchor", "button", "bold", "italic", "span", "striked", "paragraph", "code", "preformatted", "blockquote", "horizontal_line", "image", "list", "unordered_list", "ordered_list", "list_item", "table", "table_head", "table_head_cell", "table_body", "table_row", "table_data", "table_container", "table_action_buttons_details", "table_action_buttons_summary", "table_action_button", "table_action_button_html", "table_action_button_csv", "table_action_button_json", "table_action_button_markdown"];
 type StyleClasses = (typeof StyleClassesList)[number];
-type StyleClassesMap = Partial<{ [K in StyleClasses] : string }>;
+type StyleClassesMap = { [K in StyleClasses] : string };
 /**
 * Context which defines styles for the loaded component(s)
 */
-declare const StyleContext: React.Context<StyleClassesMap>;
+declare const StyleContext: React.Context<StyleClassesMap | null>;
 /**
 *  Hook to get defined style classes map
 * @returns {@link StyleClassesMap}
@@ -167,4 +169,4 @@ type MDXFromComponentProps = {
 * Simple way to directly load a component from the Registry
 */
 declare function MDXFromComponent({ source: SourceComponent, styles, fallback, elements }: MDXFromComponentProps): JSX;
-export { useStyles, generateRegistries, generateElementsFrom, StyleContext, StyleClassesMap, StyleClassesList, StyleClasses, RegistryOptions, RegistryOf, RegistryKey, Registry, MDXFromComponentProps, MDXFromComponent, MDXFile, MDXComponent, HeaderLevels, ExportsRegistry, ExportSingleType, ExportAllType, Element2 as Element, ComponentRegistry, CoalescedRegistry, BaseElements, BaseElementTags };
+export { useStyles, generateRegistries, generateElementsFrom, StyleContext, StyleClassesMap, StyleClassesList, StyleClasses, RegistryOptions, RegistryOf, RegistryKey, Registry, MDXFromComponentProps, MDXFromComponent, MDXFile, MDXComponent, HeaderLevels, ExportsRegistry, ExportSingleType, ExportAllType, ElementProps, Element2 as Element, ComponentRegistry, CoalescedRegistry, BaseElements, BaseElementTags };

package/dist/index.js

@@ -35,11 +35,22 @@ var StyleClassesList = [
   "table_head_cell",
   "table_body",
   "table_row",
-  "table_data"
+  "table_data",
+  "table_container",
+  "table_action_buttons_details",
+  "table_action_buttons_summary",
+  "table_action_button",
+  "table_action_button_html",
+  "table_action_button_csv",
+  "table_action_button_json",
+  "table_action_button_markdown"
 ];
-var StyleContext = createContext({});
+var StyleContext = createContext(null);
 function useStyles() {
-  return useContext(StyleContext);
+  const ctx = useContext(StyleContext);
+  if (ctx === null)
+    throw new Error("No stylesmap found at any parent level. Either you forgot to pass the stylesmap to component loader or didnt wrap your component in StyleContext");
+  return ctx;
 }
 
 // src/components/Elements/Anchor.tsx
@@ -218,13 +229,141 @@ function Striked(props) {
 }
 
 // src/components/Elements/Table.tsx
-import { cn as cn13 } from "@d1vij/shit-i-always-use";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { cn as cn13, useClipboardText as useClipboardText2 } from "@d1vij/shit-i-always-use";
+import { useRef as useRef2 } from "react";
+import { jsx as jsx13, jsxs } from "react/jsx-runtime";
+function TableActionButton({ label, onClick }) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsx13("button", {
+    onClick,
+    className: cn13(styles.table_action_button),
+    type: "button",
+    children: label
+  });
+}
+function getTableAsJson(elm) {
+  const headings = [];
+  const theadElms = elm.querySelectorAll("thead > tr > th");
+  theadElms.forEach((th) => {
+    headings.push(th.innerText.trim());
+  });
+  const rows = [];
+  const rowElms = elm.querySelectorAll("tbody > tr");
+  rowElms.forEach((tr) => {
+    const row = [];
+    tr.querySelectorAll("td").forEach((td, idx) => {
+      row.push({
+        column: headings[idx] ?? idx.toString(),
+        content: td.innerText.trim()
+      });
+    });
+    rows.push(row);
+  });
+  return {
+    meta: {
+      columns: headings.length,
+      rows: rowElms.length
+    },
+    headings,
+    rows
+  };
+}
+function getTableJsonAsCsv(json) {
+  const heading = json.headings.join(",");
+  const rows = json.rows.map((row) => row.map((cell) => cell.content).join(",")).join(`
+`);
+  return [heading, rows].join(`
+`);
+}
+function getTableJsonAsHtml(json) {
+  const heading = json.headings.map((h) => `<th>${h}</th>`).join("");
+  const rows = json.rows.map((row) => {
+    const cells = row.map((c) => `<td>${c.content}</td>`).join("");
+    return `<tr>${cells}</tr>`;
+  });
+  return [
+    "<table>",
+    "<thead>",
+    `<tr>${heading}</tr>`,
+    "</thead>",
+    "<tbody>",
+    ...rows,
+    "</tbody>",
+    "</table>"
+  ].join(`
+`);
+}
+function getTableJsonAsMarkdown(json) {
+  const heading = `|${json.headings.join("|")}|`;
+  const separator = `|${json.headings.map(() => "-----").join("|")}|`;
+  const rows = json.rows.map((row) => `|${row.map((cell) => cell.content).join("|")}|`);
+  return [heading, separator, ...rows].join(`
+`);
+}
 function Table(props) {
   const styles = useStyles();
-  return /* @__PURE__ */ jsx13("table", {
-    className: cn13(styles.table),
-    children: props.children
+  const ref = useRef2(null);
+  const { copy } = useClipboardText2();
+  function copyAs(_as) {
+    return async () => {
+      const elm = ref.current;
+      if (!elm)
+        return;
+      const json = getTableAsJson(elm);
+      let extractedText;
+      switch (_as) {
+        case "html":
+          extractedText = getTableJsonAsHtml(json);
+          break;
+        case "csv":
+          extractedText = getTableJsonAsCsv(json);
+          break;
+        case "markdown":
+          extractedText = getTableJsonAsMarkdown(json);
+          break;
+        case "json":
+          extractedText = JSON.stringify(json, null, 4);
+          break;
+        default:
+          return;
+      }
+      await copy(extractedText);
+    };
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn13(styles.table_container),
+    children: [
+      /* @__PURE__ */ jsx13("table", {
+        ref,
+        className: cn13(styles.table),
+        children: props.children
+      }),
+      /* @__PURE__ */ jsxs("details", {
+        className: cn13(styles.table_action_buttons_details),
+        children: [
+          /* @__PURE__ */ jsx13("summary", {
+            className: cn13(styles.table_action_buttons_summary),
+            children: "Copy"
+          }),
+          /* @__PURE__ */ jsx13(TableActionButton, {
+            label: "HTML",
+            onClick: copyAs("html")
+          }),
+          /* @__PURE__ */ jsx13(TableActionButton, {
+            label: "CSV",
+            onClick: copyAs("csv")
+          }),
+          /* @__PURE__ */ jsx13(TableActionButton, {
+            label: "Json",
+            onClick: copyAs("json")
+          }),
+          /* @__PURE__ */ jsx13(TableActionButton, {
+            label: "Markdown",
+            onClick: copyAs("markdown")
+          })
+        ]
+      })
+    ]
   });
 }
 function TableHead(props) {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@d1vij/jassm",
     "description": "Just another static site maker. Create simple content driven sites using MDX and React along with Typescript safety.",
-    "version": "0.1.14",
+    "version": "0.1.15",
     "type": "module",
     "files": [
         "dist"
@@ -38,7 +38,7 @@
         "type-check": "tsc --noEmit",
         "prepack": "bun run build",
         "release": "bumpp --commit --push --tag",
-        "lint": "biome check --fix && tsc -b",
+        "lint": "biome check --fix --unsafe && tsc -b",
         "format": "biome format --write"
     },
     "devDependencies": {