react-ink-scripter 0.0.3

package/README.md

@@ -0,0 +1 @@
+# react-ink-scripter

package/dist/ReactInkScripter.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+export type ContentTitleItem = {
+    type: "title";
+    value: string;
+};
+export type ContentFieldItem = {
+    type: "field";
+    label: string;
+    value: string;
+    span?: number;
+};
+export type ContentTextItem = {
+    type: "text";
+    value: string;
+    span?: number;
+};
+export type ContentContainerItem = {
+    type: "grid" | "footer";
+    content: (ContentFieldItem | ContentTextItem)[];
+};
+export type ContentTableCellItem = {
+    header?: boolean;
+    span?: number;
+    offset?: number;
+    value: string;
+} | string;
+export type ContentTableItem = {
+    type: "table";
+    head?: ContentTableCellItem[];
+    body?: ContentTableCellItem[][];
+    foot?: ContentTableCellItem[];
+};
+export type ContentType = (ContentTitleItem | ContentContainerItem | ContentTableItem | ContentTextItem | ContentFieldItem)[];
+export type ReactInkScripterProps = {
+    value?: ContentType;
+};
+export declare const ReactInkScripter: ({ value }: ReactInkScripterProps) => JSX.Element;
+export default ReactInkScripter;

package/dist/cjs/index.js

@@ -0,0 +1,171 @@
+'use strict';
+
+var _extends = require('@babel/runtime/helpers/extends');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Title = function Title(_ref) {
+  var value = _ref.value;
+  return jsxRuntime.jsx("div", {
+    children: value
+  });
+};
+var Container = function Container(_ref2) {
+  var _ref2$content = _ref2.content,
+    content = _ref2$content === void 0 ? [] : _ref2$content,
+    className = _ref2.className;
+  return jsxRuntime.jsx("div", {
+    className: clsx("ink-scripter-container", className),
+    children: content.map(function (item, idx) {
+      switch (item.type) {
+        case "field":
+          return jsxRuntime.jsx(Field, _extends({}, item), idx);
+        case "text":
+          return jsxRuntime.jsx(Text, _extends({}, item), idx);
+      }
+    })
+  });
+};
+var Grid = function Grid(props) {
+  return jsxRuntime.jsx(Container, _extends({}, props));
+};
+var Footer = function Footer(props) {
+  return jsxRuntime.jsx(Container, _extends({}, props, {
+    className: "ink-scripter-footer"
+  }));
+};
+var TableCell = function TableCell(_ref3) {
+  var item = _ref3.item;
+  if (typeof item === "string") {
+    return jsxRuntime.jsx("td", {
+      children: item
+    });
+  }
+  var header = item.header;
+    item.span;
+    item.offset;
+    var value = item.value;
+  if (header) {
+    return jsxRuntime.jsx("th", {
+      children: value
+    });
+  }
+  return jsxRuntime.jsx("td", {
+    children: value
+  });
+};
+var TableRow = function TableRow(_ref4) {
+  var cells = _ref4.cells;
+  if (!cells.length) {
+    return null;
+  }
+  return jsxRuntime.jsx("tr", {
+    children: cells.map(function (v, idx) {
+      return jsxRuntime.jsx(TableCell, {
+        item: v
+      }, idx);
+    })
+  });
+};
+var TableHead = function TableHead(props) {
+  var cells = props.cells;
+  if (!cells || !cells.length) {
+    return null;
+  }
+  return jsxRuntime.jsx("thead", {
+    children: cells.map(function (v, idx) {
+      return jsxRuntime.jsx(TableCell, {
+        item: v
+      }, idx);
+    })
+  });
+};
+var TableFoot = function TableFoot(props) {
+  var cells = props.cells;
+  if (!cells || !cells.length) {
+    return null;
+  }
+  return jsxRuntime.jsx("tfoot", {
+    children: cells.map(function (v, idx) {
+      return jsxRuntime.jsx(TableCell, {
+        item: v
+      }, idx);
+    })
+  });
+};
+var TableBody = function TableBody(props) {
+  var rows = props.rows;
+  if (!rows || !rows.length) {
+    return null;
+  }
+  return jsxRuntime.jsx("tbody", {
+    children: rows.map(function (v, idx) {
+      return jsxRuntime.jsx(TableRow, {
+        cells: v
+      }, idx);
+    })
+  });
+};
+var Table = function Table(props) {
+  var head = props.head,
+    body = props.body,
+    foot = props.foot;
+  if (!(head !== null && head !== void 0 && head.length) && !(body !== null && body !== void 0 && body.length) && !(foot !== null && foot !== void 0 && foot.length)) {
+    return null;
+  }
+  return jsxRuntime.jsxs("table", {
+    className: "ink-scripter-table",
+    children: [jsxRuntime.jsx(TableHead, {
+      cells: head
+    }), jsxRuntime.jsx(TableBody, {
+      rows: body
+    }), jsxRuntime.jsx(TableFoot, {
+      cells: foot
+    })]
+  });
+};
+var Text = function Text(_ref5) {
+  var value = _ref5.value;
+    _ref5.span;
+  return jsxRuntime.jsx("div", {
+    className: "ink-scripter-text",
+    children: value
+  });
+};
+var Field = function Field(_ref6) {
+  var value = _ref6.value,
+    label = _ref6.label;
+  return jsxRuntime.jsxs("div", {
+    className: "ink-scripter-filed",
+    children: [jsxRuntime.jsxs("label", {
+      children: [label, ":"]
+    }), jsxRuntime.jsx("span", {
+      children: value
+    })]
+  });
+};
+var ReactInkScripter = function ReactInkScripter(_ref7) {
+  var _ref7$value = _ref7.value,
+    value = _ref7$value === void 0 ? [] : _ref7$value;
+  return jsxRuntime.jsx("div", {
+    className: "ink-scripter-root",
+    children: value.map(function (item, index) {
+      switch (item.type) {
+        case "title":
+          return jsxRuntime.jsx(Title, _extends({}, item), index);
+        case "footer":
+          return jsxRuntime.jsx(Footer, _extends({}, item), index);
+        case "grid":
+          return jsxRuntime.jsx(Grid, _extends({}, item), index);
+        case "table":
+          return jsxRuntime.jsx(Table, _extends({}, item), index);
+        case "text":
+          return jsxRuntime.jsx(Text, _extends({}, item), index);
+        case "field":
+          return jsxRuntime.jsx(Field, _extends({}, item), index);
+      }
+    })
+  });
+};
+
+exports.ReactInkScripter = ReactInkScripter;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./ReactInkScripter";

package/dist/index.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+const Title = ({ value }) => {
+    return jsx("div", { children: value });
+};
+const Container = ({ content = [], className, }) => {
+    return (jsx("div", { className: clsx("ink-scripter-container", className), children: content.map((item, idx) => {
+            switch (item.type) {
+                case "field":
+                    return jsx(Field, { ...item }, idx);
+                case "text":
+                    return jsx(Text, { ...item }, idx);
+            }
+        }) }));
+};
+const Grid = (props) => {
+    return jsx(Container, { ...props });
+};
+const Footer = (props) => {
+    return jsx(Container, { ...props, className: "ink-scripter-footer" });
+};
+const TableCell = ({ item }) => {
+    if (typeof item === "string") {
+        return jsx("td", { children: item });
+    }
+    const { header, span, offset, value } = item;
+    if (header) {
+        return jsx("th", { children: value });
+    }
+    return jsx("td", { children: value });
+};
+const TableRow = ({ cells }) => {
+    if (!cells.length) {
+        return null;
+    }
+    return (jsx("tr", { children: cells.map((v, idx) => (jsx(TableCell, { item: v }, idx))) }));
+};
+const TableHead = (props) => {
+    const { cells } = props;
+    if (!cells || !cells.length) {
+        return null;
+    }
+    return (jsx("thead", { children: cells.map((v, idx) => (jsx(TableCell, { item: v }, idx))) }));
+};
+const TableFoot = (props) => {
+    const { cells } = props;
+    if (!cells || !cells.length) {
+        return null;
+    }
+    return (jsx("tfoot", { children: cells.map((v, idx) => (jsx(TableCell, { item: v }, idx))) }));
+};
+const TableBody = (props) => {
+    const { rows } = props;
+    if (!rows || !rows.length) {
+        return null;
+    }
+    return (jsx("tbody", { children: rows.map((v, idx) => (jsx(TableRow, { cells: v }, idx))) }));
+};
+const Table = (props) => {
+    const { head, body, foot } = props;
+    if (!head?.length && !body?.length && !foot?.length) {
+        return null;
+    }
+    return (jsxs("table", { className: "ink-scripter-table", children: [jsx(TableHead, { cells: head }), jsx(TableBody, { rows: body }), jsx(TableFoot, { cells: foot })] }));
+};
+const Text = ({ value, span }) => {
+    return jsx("div", { className: "ink-scripter-text", children: value });
+};
+const Field = ({ value, label }) => {
+    return (jsxs("div", { className: "ink-scripter-filed", children: [jsxs("label", { children: [label, ":"] }), jsx("span", { children: value })] }));
+};
+const ReactInkScripter = ({ value = [] }) => {
+    return (jsx("div", { className: "ink-scripter-root", children: value.map((item, index) => {
+            switch (item.type) {
+                case "title":
+                    return jsx(Title, { ...item }, index);
+                case "footer":
+                    return jsx(Footer, { ...item }, index);
+                case "grid":
+                    return jsx(Grid, { ...item }, index);
+                case "table":
+                    return jsx(Table, { ...item }, index);
+                case "text":
+                    return jsx(Text, { ...item }, index);
+                case "field":
+                    return jsx(Field, { ...item }, index);
+            }
+        }) }));
+};
+
+export { ReactInkScripter };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "react-ink-scripter",
+  "version": "0.0.3",
+  "description": "a react component for generate page to print",
+  "main": "dist/cjs/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lawrsp/react-ink-scripter.git"
+  },
+  "keywords": [
+    "react",
+    "component",
+    "printer"
+  ],
+  "author": "lawrsp",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/lawrsp/react-ink-scripter/issues"
+  },
+  "homepage": "https://github.com/lawrsp/react-ink-scripter#readme",
+  "dependencies": {
+    "@babel/runtime": "^7.21.0",
+    "clsx": "^1.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "@types/react-dom": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ]
+}