react-ink-scripter 0.0.24 → 0.0.26

package/dist/InkScripter.css

@@ -4,24 +4,34 @@
   flex-direction: column;
   overflow: hidden;
   padding: 4px;
-  font-size: 14px;
+  font-size: 14pt;
 }
 
 .inks-root > #title {
   text-align: center;
   flex: 1 0;
   padding: 16px;
-  font-size: 28px;
+  font-size: 28pt;
 }
 
 .inks-root > #footer {
   margin: 0;
 }
 
+.inks-root > #footer > .inks-grid-item {
+  padding: 0;
+}
+
+.inks-line {
+  display: flex;
+  flex-direction: row;
+  column-gap: 3em;
+}
+
 .inks-grid {
-  --Grid-Columns: 12;
+  --Grid-Columns: 24;
   --Grid-RowSpacing: 8px;
-  --Grid-ColumnSpacing: 32px;
+  --Grid-ColumnSpacing: 8px;
 
   display: -webkit-box;
   display: -webkit-flex;
@@ -40,6 +50,7 @@
   flex-basis: auto;
   flex-grow: 0;
   padding: calc(var(--Grid-RowSpacing) / 2) calc(var(--Grid-ColumnSpacing) / 2);
+  box-sizing: border-box;
 }
 
 .inks-pair {
@@ -51,9 +62,12 @@
 }
 
 .inks-pair-value{
-  margin-left: 16px;
+  margin-left: 0.5em;
 }
 
+.inks-span-0 {
+  width: 0;
+}
 .inks-span-1 {
   width: calc(100% * 1 / var(--Grid-Columns));
 }
@@ -90,6 +104,45 @@
 .inks-span-12 {
   width: calc(100% * 12 / var(--Grid-Columns));
 }
+.inks-span-13 {
+  width: calc(100% * 13 / var(--Grid-Columns));
+}
+.inks-span-14 {
+  width: calc(100% * 14 / var(--Grid-Columns));
+}
+.inks-span-15 {
+  width: calc(100% * 15 / var(--Grid-Columns));
+}
+.inks-span-16 {
+  width: calc(100% * 16 / var(--Grid-Columns));
+}
+.inks-span-17 {
+  width: calc(100% * 17 / var(--Grid-Columns));
+}
+.inks-span-18 {
+  width: calc(100% * 18 / var(--Grid-Columns));
+}
+.inks-span-18 {
+  width: calc(100% * 18 / var(--Grid-Columns));
+}
+.inks-span-19 {
+  width: calc(100% * 19 / var(--Grid-Columns));
+}
+.inks-span-20 {
+  width: calc(100% * 20 / var(--Grid-Columns));
+}
+.inks-span-21 {
+  width: calc(100% * 21 / var(--Grid-Columns));
+}
+.inks-span-22 {
+  width: calc(100% * 22 / var(--Grid-Columns));
+}
+.inks-span-23 {
+  width: calc(100% * 23 / var(--Grid-Columns));
+}
+.inks-span-24 {
+  width: calc(100% * 24 / var(--Grid-Columns));
+}
 
 .inks-table {
   --Border-Props: 0.8px solid #bbb;

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
+var _typeof = require('@babel/runtime/helpers/typeof');
 var _extends = require('@babel/runtime/helpers/extends');
 
 var IFrame = react.forwardRef(function (props, ref) {
@@ -24,7 +24,7 @@ var IFrame = react.forwardRef(function (props, ref) {
   var attachBody = iframeRef === null || iframeRef === void 0 ? void 0 : (_iframeRef$current = iframeRef.current) === null || _iframeRef$current === void 0 ? void 0 : (_iframeRef$current$co = _iframeRef$current.contentWindow) === null || _iframeRef$current$co === void 0 ? void 0 : (_iframeRef$current$co2 = _iframeRef$current$co.document) === null || _iframeRef$current$co2 === void 0 ? void 0 : _iframeRef$current$co2.body;
   var attachHead = iframeRef === null || iframeRef === void 0 ? void 0 : (_iframeRef$current2 = iframeRef.current) === null || _iframeRef$current2 === void 0 ? void 0 : (_iframeRef$current2$c = _iframeRef$current2.contentWindow) === null || _iframeRef$current2$c === void 0 ? void 0 : (_iframeRef$current2$c2 = _iframeRef$current2$c.document) === null || _iframeRef$current2$c2 === void 0 ? void 0 : _iframeRef$current2$c2.head;
   react.useImperativeHandle(ref, function () {
-    return iframeRef === null || iframeRef === void 0 ? void 0 : iframeRef.current;
+    return (iframeRef === null || iframeRef === void 0 ? void 0 : iframeRef.current) || undefined;
   }, []);
   return jsxRuntime.jsxs("iframe", {
     ref: iframeRef,
@@ -37,6 +37,18 @@ var IFrame = react.forwardRef(function (props, ref) {
   });
 });
 
+function r(e) {
+  var t,
+    f,
+    n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;else if ("object" == _typeof(e)) if (Array.isArray(e)) for (t = 0; t < e.length; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);else for (t in e) e[t] && (n && (n += " "), n += t);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = ""; f < arguments.length;) (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
 var PrinterFrame = react.forwardRef(function (props, ref) {
   var _iframeRef$current2, _iframeRef$current2$c, _iframeRef$current2$c2, _iframeRef$current3, _iframeRef$current3$c, _iframeRef$current3$c2, _iframeRef$current4, _iframeRef$current4$c, _iframeRef$current4$c2;
   var styleCss = props.styleCss,
@@ -160,29 +172,48 @@ var Container = function Container(_ref) {
   var id = _ref.id,
     _ref$content = _ref.content,
     content = _ref$content === void 0 ? [] : _ref$content,
-    className = _ref.className;
+    className = _ref.className,
+    itemClass = _ref.itemClass;
   return jsxRuntime.jsx("div", {
     id: id,
-    className: clsx('inks-grid', className),
+    className: className,
     children: content.map(function (item, idx) {
       switch (item.type) {
         case 'pair':
           return jsxRuntime.jsx(Pair, _extends({}, item, {
-            className: clsx('inks-grid-item', item.className)
+            className: clsx(itemClass, item.className)
           }), idx);
         case 'text':
           return jsxRuntime.jsx(Text, _extends({}, item, {
-            className: clsx('inks-grid-item', item.className)
+            className: clsx(itemClass, item.className)
+          }), idx);
+        case 'line':
+          return jsxRuntime.jsx(Line, _extends({}, item, {
+            className: clsx(itemClass, item.className)
           }), idx);
       }
     })
   });
 };
 var Grid = function Grid(props) {
-  return jsxRuntime.jsx(Container, _extends({}, props));
+  return jsxRuntime.jsx(Container, _extends({
+    className: "inks-grid",
+    itemClass: "inks-grid-item"
+  }, props));
 };
-var TableCell = function TableCell(_ref2) {
-  var item = _ref2.item;
+var Line = function Line(_ref2) {
+  var id = _ref2.id,
+    content = _ref2.content,
+    span = _ref2.span,
+    className = _ref2.className;
+  return jsxRuntime.jsx(Container, {
+    id: id,
+    className: clsx('inks-line', span && "inks-span-".concat(span), className),
+    content: content
+  });
+};
+var TableCell = function TableCell(_ref3) {
+  var item = _ref3.item;
   if (typeof item === 'string') {
     return jsxRuntime.jsx("td", {
       className: "inks-cell",
@@ -212,8 +243,8 @@ var TableCell = function TableCell(_ref2) {
     children: value
   });
 };
-var TableRow = function TableRow(_ref3) {
-  var cells = _ref3.cells;
+var TableRow = function TableRow(_ref4) {
+  var cells = _ref4.cells;
   if (!cells.length) {
     return null;
   }
@@ -288,23 +319,23 @@ var Table = function Table(props) {
     })]
   });
 };
-var Text = function Text(_ref4) {
-  var id = _ref4.id,
-    value = _ref4.value,
-    span = _ref4.span,
-    className = _ref4.className;
+var Text = function Text(_ref5) {
+  var id = _ref5.id,
+    value = _ref5.value,
+    span = _ref5.span,
+    className = _ref5.className;
   return jsxRuntime.jsx("div", {
     id: id,
     className: clsx('inks-text', span && "inks-span-".concat(span), className),
     children: value
   });
 };
-var Pair = function Pair(_ref5) {
-  var id = _ref5.id,
-    value = _ref5.value,
-    label = _ref5.label,
-    span = _ref5.span,
-    className = _ref5.className;
+var Pair = function Pair(_ref6) {
+  var id = _ref6.id,
+    value = _ref6.value,
+    label = _ref6.label,
+    span = _ref6.span,
+    className = _ref6.className;
   return jsxRuntime.jsxs("div", {
     id: id,
     className: clsx('inks-pair', span && "inks-span-".concat(span), className),
@@ -334,6 +365,8 @@ var InkScripter = react.forwardRef(function (props, ref) {
           return jsxRuntime.jsx(Text, _extends({}, item), index);
         case 'pair':
           return jsxRuntime.jsx(Pair, _extends({}, item), index);
+        case 'line':
+          return jsxRuntime.jsx(Line, _extends({}, item), index);
       }
     })
   });

package/dist/esm/IFrame.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
+import type { ReactNode } from 'react';
 export interface IFrameProps {
     className?: string;
     styleCss?: string;
@@ -6,4 +6,4 @@ export interface IFrameProps {
     width?: string | number;
     height?: string | number;
 }
-export declare const IFrame: ForwardRefExoticComponent<IFrameProps & RefAttributes<any>>;
+export declare const IFrame: import("react").ForwardRefExoticComponent<IFrameProps & import("react").RefAttributes<HTMLIFrameElement | undefined>>;

package/dist/esm/InkScripter.d.ts

@@ -14,10 +14,17 @@ export type ContentPairItem = {
     value: string;
     span?: number;
 };
+export type ContentLineItem = {
+    id?: string;
+    type: 'line';
+    span?: number;
+    className?: string;
+    content: (ContentPairItem | ContentTextItem)[];
+};
 export type ContentGridItem = {
     id?: string;
     type: 'grid';
-    content: (ContentPairItem | ContentTextItem)[];
+    content: (ContentPairItem | ContentTextItem | ContentLineItem)[];
 };
 export type ContentTableCellItem = {
     id?: string;
@@ -34,7 +41,7 @@ export type ContentTableItem = {
     body?: ContentTableCellItem[][];
     foot?: ContentTableCellItem[][];
 };
-export type ContentItemType = ContentGridItem | ContentTableItem | ContentTextItem | ContentPairItem;
+export type ContentItemType = ContentGridItem | ContentTableItem | ContentTextItem | ContentPairItem | ContentLineItem;
 export type ContentType = ContentItemType[];
 export type InkScripterProps = {
     value?: ContentType;

package/dist/esm/index.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useMemo, useImperativeHandle, useState, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
-import clsx from 'clsx';
 
 const IFrame = forwardRef((props, ref) => {
     const { styleCss, className, children, width, height } = props;
@@ -12,11 +11,13 @@ const IFrame = forwardRef((props, ref) => {
     const attachBody = iframeRef?.current?.contentWindow?.document?.body;
     const attachHead = iframeRef?.current?.contentWindow?.document?.head;
     useImperativeHandle(ref, () => {
-        return iframeRef?.current;
+        return iframeRef?.current || undefined;
     }, []);
     return (jsxs("iframe", { ref: iframeRef, className: className, width: frameWidth, height: frameHeight, children: [attachBody && createPortal(children, attachBody), attachHead && createPortal(jsx("style", { children: styleCss }), attachHead)] }));
 });
 
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
 const PrinterFrame = forwardRef((props, ref) => {
     const { styleCss, open, className, children, actionRef, src, containerId, width, height, } = props;
     const iframeRef = useRef(null);
@@ -117,18 +118,23 @@ padding-top: ${marginTop}mm;
     return pageStyle;
 };
 
-const Container = ({ id, content = [], className, }) => {
-    return (jsx("div", { id: id, className: clsx('inks-grid', className), children: content.map((item, idx) => {
+const Container = ({ id, content = [], className, itemClass, }) => {
+    return (jsx("div", { id: id, className: className, children: content.map((item, idx) => {
             switch (item.type) {
                 case 'pair':
-                    return (jsx(Pair, { ...item, className: clsx('inks-grid-item', item.className) }, idx));
+                    return (jsx(Pair, { ...item, className: clsx(itemClass, item.className) }, idx));
                 case 'text':
-                    return (jsx(Text, { ...item, className: clsx('inks-grid-item', item.className) }, idx));
+                    return (jsx(Text, { ...item, className: clsx(itemClass, item.className) }, idx));
+                case 'line':
+                    return (jsx(Line, { ...item, className: clsx(itemClass, item.className) }, idx));
             }
         }) }));
 };
 const Grid = (props) => {
-    return jsx(Container, { ...props });
+    return jsx(Container, { className: "inks-grid", itemClass: "inks-grid-item", ...props });
+};
+const Line = ({ id, content, span, className }) => {
+    return (jsx(Container, { id: id, className: clsx('inks-line', span && `inks-span-${span}`, className), content: content }));
 };
 const TableCell = ({ item }) => {
     if (typeof item === 'string') {
@@ -192,6 +198,8 @@ const InkScripter = forwardRef((props, ref) => {
                     return jsx(Text, { ...item }, index);
                 case 'pair':
                     return jsx(Pair, { ...item }, index);
+                case 'line':
+                    return jsx(Line, { ...item }, index);
             }
         }) }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ink-scripter",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "description": "a react component for generate page to print",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -23,16 +23,13 @@
   },
   "homepage": "https://github.com/lawrsp/react-ink-scripter#readme",
   "scripts": {
-    "dev": "start-storybook -p 6016",
+    "dev": "storybook dev -p 6016",
     "prepack": "json -f package.json -I -e \"delete this.devDependencies;delete this.scripts;\"",
     "build": "rimraf dist && rollup -c && yarn copy-styles",
     "copy-styles": "node ./copy-styles.mjs",
     "preview": "vite preview",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
-  },
-  "dependencies": {
-    "clsx": "^1.2.1"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
@@ -47,32 +44,30 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-strip": "^3.0.2",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-vite": "^0.4.2",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@storybook/addon-docs": "^10.1.2",
+    "@storybook/react-vite": "^10.1.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
     "babel-loader": "^8.3.0",
+    "clsx": "^1.2.1",
     "json": "^11.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "rimraf": "^4.1.3",
     "rollup": "^3.18.0",
     "rollup-plugin-sizes": "^1.0.5",
+    "storybook": "^10.1.2",
     "tslib": "^2.8.1",
     "typescript": "^4.9.3",
-    "vite": "^4.1.0"
+    "vite": "^7.2.4"
   },
   "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"
+    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "clsx": "^1.2.0 || ^2.1.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {