@weasyprint-tsx/ui 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasyprint-tsx/ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "exports": {
     ".": "./src/index.ts"
   },

package/src/BlockBox.tsx

@@ -2,7 +2,7 @@ import { ComponentProps, toChildArray, VNode } from "preact";
 import styles from "./BlockBox.module.css";
 import { joinClasses, mergeStyle } from "./utils";
 
-interface BlockBoxProps extends ComponentProps<"div"> {
+export interface BlockBoxProps extends ComponentProps<"div"> {
   children: VNode<BlockProps>[] | VNode<BlockProps>;
   gap?: string;
   basis?: number;
@@ -10,7 +10,7 @@ interface BlockBoxProps extends ComponentProps<"div"> {
   align?: "middle" | "top" | "bottom";
 }
 
-interface BlockProps extends ComponentProps<"div"> {
+export interface BlockProps extends ComponentProps<"div"> {
   ratio?: number;
   centered?: boolean;
   align?: "middle" | "top" | "bottom";

package/src/CodeBlock.tsx

@@ -4,7 +4,7 @@ import { ComponentProps } from "preact";
 import styles from "./CodeBlock.module.css";
 import { joinClasses, mergeStyle } from "./utils";
 
-interface CodeBlockProps extends Omit<ComponentProps<"code">, "children"> {
+export interface CodeBlockProps extends Omit<ComponentProps<"code">, "children"> {
   language: string;
   code: string;
   bgColor?: string;

package/src/DotLine.tsx

@@ -2,7 +2,7 @@ import { ComponentProps } from "preact";
 import styles from "./DotLine.module.css";
 import { joinClasses, mergeStyle } from "./utils";
 
-interface DotLineProps extends ComponentProps<"span"> {
+export interface DotLineProps extends ComponentProps<"span"> {
   num?: number;
   width?: number | string;
   inline?: boolean;

package/src/Equation.tsx

@@ -5,11 +5,12 @@ import { ComponentProps } from "preact";
 import styles from "./Equation.module.css";
 import { joinClasses } from "./utils";
 
-interface EquationProps extends Omit<ComponentProps<"span">, "children"> {
+export interface EquationProps extends Omit<ComponentProps<"span">, "children"> {
   tex: string;
   displayMode?: boolean;
   aligned?: boolean;
   chemical?: boolean;
+  numberFormat?: boolean;
 }
 export function Equation({
   tex,
@@ -17,15 +18,16 @@ export function Equation({
   className = "",
   aligned = false,
   chemical = false,
+  numberFormat = true,
   ...props
 }: EquationProps) {
+  const numberFormated = numberFormat ? formatNumber(tex) : tex;
   const alignedCode = aligned
     ? `\\begin{aligned}
-${tex}
+${numberFormated}
 \\end{aligned}`
-    : tex;
+    : numberFormated;
   const chemCode = chemical ? `\\ce{${alignedCode}}` : alignedCode;
-
   return (
     <span
       dangerouslySetInnerHTML={{
@@ -36,3 +38,50 @@ ${tex}
     />
   );
 }
+
+export interface SymbolProps {
+  children?: string;
+}
+
+export function symbolFactory(
+  fn: (txt?: string, children?: string) => string | undefined,
+  txt?: string,
+  init?: string,
+) {
+  return function ({ children = init }: SymbolProps) {
+    return <Equation tex={fn(txt, children) ?? ""} />;
+  };
+}
+
+export function underscriptFactory(txt: string, init?: string) {
+  return symbolFactory(
+    (txt, children) => (children ? `${txt}_{${children}}` : `${txt}`),
+    txt,
+    init,
+  );
+}
+
+export function functionFactory(txt: string, init: string = "x") {
+  return symbolFactory(
+    (txt, children) => (children ? `${txt}(${children})` : `${txt}`),
+    txt,
+    init,
+  );
+}
+
+function formatNumber(tex: string | undefined) {
+  if (!tex) return "";
+  return tex.replace(/\d+(?:\.\d+)?/g, (match) => {
+    const [intPart, decPart] = match.split(".");
+    const formattedInt = intPart.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1\\,");
+    if (decPart === undefined) return formattedInt;
+    const formattedDec = decPart.replace(/(\d{3})(?=\d)/g, "$1\\,");
+    return `${formattedInt},${formattedDec}\\:`;
+  });
+}
+
+export function Eq(props: SymbolProps) {
+  return symbolFactory((_, children) => {
+    return formatNumber(children);
+  })(props);
+}

package/src/List.tsx

@@ -9,24 +9,24 @@ export type CounterType =
   | "lower-roman"
   | "upper-roman";
 
-interface ListItemProps extends ComponentProps<"div"> {
+export interface ListItemProps extends ComponentProps<"div"> {
   count?: number;
   marker?: string;
 }
 
-interface ListProps extends ComponentProps<"div"> {
+export interface ListProps extends ComponentProps<"div"> {
   pre?: ComponentChildren;
   gap?: string | number;
 }
 
-interface OLProps extends ListProps {
+export interface OLProps extends ListProps {
   start?: number;
   counterType?: CounterType;
   markerPre?: string;
   markerPost?: string;
 }
 
-interface ULProps extends ListProps {
+export interface ULProps extends ListProps {
   marker?: string;
 }
 

package/src/Page.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps } from "preact";
 import styles from "./Page.module.css";
 import { joinClasses, mergeStyle } from "./utils";
-interface PageProps {
+export interface PageProps {
   page?: string;
 }
 

package/src/Stack.tsx

@@ -2,7 +2,7 @@ import { ComponentProps } from "preact";
 import styles from "./Stack.module.css";
 import { joinClasses, mergeStyle } from "./utils";
 
-interface StackProps extends ComponentProps<"div"> {
+export interface StackProps extends ComponentProps<"div"> {
   gap?: number | string;
   align?: "left" | "right";
 }

package/src/Table.tsx

@@ -22,7 +22,7 @@ export function Entry(_props: TableEntryProps): null {
   return null;
 }
 
-interface TableProps extends ComponentProps<"table"> {
+export interface TableProps extends ComponentProps<"table"> {
   orientation?: "col" | "row";
   contentClass?: string;
   headerClass?: string;

package/src/Titles.tsx

@@ -2,9 +2,9 @@ import { ComponentProps, ComponentType } from "preact";
 import styles from "./Title.module.css";
 import { joinClasses, mergeStyle } from "./utils";
 
-type Htype = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type Htype = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
-type Hprops<h extends Htype> = ComponentProps<h> & {
+export type Hprops<h extends Htype> = ComponentProps<h> & {
   marker?: string;
   color?: string;
   fontSize?: string;
@@ -73,7 +73,7 @@ export function H6({ className = "", marker, color, fontSize, style, ...props }:
 
 const TAG_MAP = { h1: H1, h2: H2, h3: H3, h4: H4, h5: H5, h6: H6 };
 
-type TitleProps<h extends Htype> = Hprops<h> & { type: h };
+export type TitleProps<h extends Htype> = Hprops<h> & { type: h };
 export function Title<h extends Htype>({ type, ...props }: TitleProps<h>) {
   const Tag = TAG_MAP[type] as ComponentType<Hprops<h>>;
   return <Tag {...(props as Hprops<h>)} />;

package/src/index.ts

@@ -1,10 +1,24 @@
 export { Block, BlockBox } from "./BlockBox";
+export type { BlockBoxProps, BlockProps } from "./BlockBox";
 export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./CodeBlock";
 export { DotLine } from "./DotLine";
-export { Equation } from "./Equation";
+export type { DotLineProps } from "./DotLine";
+export {
+    Eq, Equation,
+    functionFactory, symbolFactory,
+    underscriptFactory
+} from "./Equation";
+export type { EquationProps, SymbolProps } from "./Equation";
 export { LI, OL, UL } from "./List";
+export type { CounterType, ListItemProps, ListProps, OLProps, ULProps } from "./List";
 export { Page, PageBreak } from "./Page";
+export type { PageProps } from "./Page";
 export { Stack } from "./Stack";
+export type { StackProps } from "./Stack";
 export { Entry, Table } from "./Table";
+export type { TableEntryProps, TableProps } from "./Table";
 export { H1, H2, H3, H4, H5, H6, ResetCounter, Title } from "./Titles";
+export type { Hprops, Htype, TitleProps } from "./Titles";
+export * from "./utils";