@weasyprint-tsx/ui 0.1.0 → 0.1.2

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@weasyprint-tsx/ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "exports": {
     ".": "./src/index.ts"
   },
-  "types": "./src/index.ts"
+  "types": "./src/index.ts",
+  "dependencies": {
+    "highlight.js": "11.11.1",
+    "katex": "^0.16.47"
+  }
 }

package/src/BlockBox.tsx

@@ -16,8 +16,8 @@ interface BlockProps extends ComponentProps<"div"> {
   align?: "middle" | "top" | "bottom";
 }
 
-export function Block(_props: BlockProps): null {
-  return null;
+export function Block({ children }: BlockProps) {
+  return children;
 }
 
 export function BlockBox({
@@ -40,7 +40,10 @@ export function BlockBox({
   const child = blockList.map(
     ({ props: { style, ratio = 1, className, centered, align, ...props } }) => (
       <div
-        style={mergeStyle(style, { "--ratio": ratio, "--block-box-align": align })}
+        style={mergeStyle(style, {
+          "--ratio": ratio,
+          "--block-box-align": align,
+        })}
         className={joinClasses(
           className,
           styles.block,

package/src/CodeBlock.module.css

@@ -0,0 +1,4 @@
+.pre {
+  background-color: var(--codeblock-bg, #0f172a);
+  color: var(--codeblock-color, #cbd5e1);
+}

package/src/CodeBlock.tsx

@@ -1,16 +1,34 @@
 import hljs from "highlight.js";
 import "highlight.js/styles/atom-one-dark.css";
 import { ComponentProps } from "preact";
+import styles from "./CodeBlock.module.css";
+import { joinClasses, mergeStyle } from "./utils";
 
 interface CodeBlockProps extends Omit<ComponentProps<"code">, "children"> {
   language: string;
   code: string;
+  bgColor?: string;
+  color?: string;
+
 }
 
-export function CodeBlock({ code, language, ...props }: CodeBlockProps) {
+export function CodeBlock({
+  code,
+  language,
+  bgColor,
+  color,
+  style,
+  className,
+  ...props
+}: CodeBlockProps) {
   const codeBlock = hljs.highlight(code, { language: language });
+  const css = mergeStyle(style, {
+    "--codeblock-bg": bgColor,
+    "--color-color" : color,
+    breakInside: "avoid",
+  });
   return (
-    <pre style={{breakInside : "avoid"}}>
+    <pre style={css} className={joinClasses(className, styles.pre)}>
       <code {...props} dangerouslySetInnerHTML={{ __html: codeBlock.value }} />
     </pre>
   );

package/src/Stack.module.css

@@ -0,0 +1,9 @@
+.stack {
+  & > * {
+    margin-left: var(--stack-ml, 0);
+    margin-right: var(--stack-mr, 0);
+    &:not(:last-child) {
+      margin-bottom: var(--stack-gap, 0);
+    }
+  }
+}

package/src/Stack.tsx

@@ -0,0 +1,24 @@
+import { ComponentProps } from "preact";
+import styles from "./Stack.module.css";
+import { joinClasses, mergeStyle } from "./utils";
+
+interface StackProps extends ComponentProps<"div"> {
+  gap?: number | string;
+  align?: "left" | "right";
+}
+
+export function Stack({ gap, align, className, style, ...props }: StackProps) {
+  const css = mergeStyle(style, {
+    "--stack-gap": gap,
+    "--stack-ml": align === "left" ? undefined : "auto",
+    "--stack-mr": align === "right" ? undefined : "auto",
+  });
+
+  return (
+    <div
+      style={css}
+      className={joinClasses(className, styles.stack)}
+      {...props}
+    />
+  );
+}

package/src/Title.module.css

@@ -1,28 +1,31 @@
-
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 {
-  &::before {
-    float: left;
-    clear: left;
-  }
-  &[data-marker]::before {
-    content: attr(data-marker);
-  }
+.h1::before,
+.h2::before,
+.h3::before,
+.h4::before,
+.h5::before,
+.h6::before {
+  float: left;
+  clear: left;
 }
 
+.h1[data-marker]::before,
+.h2[data-marker]::before,
+.h3[data-marker]::before,
+.h4[data-marker]::before,
+.h5[data-marker]::before,
+.h6[data-marker]::before {
+  content: attr(data-marker);
+}
 
 .h1 {
   color: var(--h1-color, inherit);
   font-size: var(--h1-fontsize, inherit);
   counter-reset: count-h2 count-h3 count-h4 count-h5 count-h6;
   counter-increment: count-h1;
-  &::before {
-    content: counter(count-h1, upper-roman) ". ";
-  }
+}
+
+:where(.h1)::before {
+  content: counter(count-h1, upper-roman) ". ";
 }
 
 .h2 {
@@ -30,9 +33,10 @@
   font-size: var(--h2-fontsize, inherit);
   counter-reset: count-h3 count-h4 count-h5 count-h6;
   counter-increment: count-h2;
-  &::before {
-    content: counter(count-h2, decimal) ". ";
-  }
+}
+
+:where(.h2)::before {
+  content: counter(count-h2, decimal) ". ";
 }
 
 .h3 {
@@ -40,9 +44,10 @@
   font-size: var(--h3-fontsize, inherit);
   counter-reset: count-h4 count-h5 count-h6;
   counter-increment: count-h3;
-  &::before {
-    content: counter(count-h3, lower-alpha) ". ";
-  }
+}
+
+:where(.h3)::before {
+  content: counter(count-h3, upper-alpha) ". ";
 }
 
 .h4 {
@@ -50,9 +55,10 @@
   font-size: var(--h4-fontsize, inherit);
   counter-reset: count-h5 count-h6;
   counter-increment: count-h4;
-  &::before {
-    content: counter(count-h4, lower-alpha) ". ";
-  }
+}
+
+:where(.h4)::before {
+  content: counter(count-h4, decimal) ". ";
 }
 
 .h5 {
@@ -60,16 +66,18 @@
   font-size: var(--h5-fontsize, inherit);
   counter-reset: count-h6;
   counter-increment: count-h5;
-  &::before {
-    content: counter(count-h5, lower-alpha) ". ";
-  }
+}
+
+:where(.h5)::before {
+  content: counter(count-h5, lower-alpha) ". ";
 }
 
 .h6 {
   color: var(--h6-color, inherit);
   font-size: var(--h6-fontsize, inherit);
   counter-increment: count-h6;
-  &::before {
-    content: counter(count-h6, lower-alpha) ". ";
-  }
+}
+
+:where(.h6)::before {
+  content: counter(count-h6, lower-roman) ". ";
 }

package/src/index.ts

@@ -4,6 +4,7 @@ export { DotLine } from "./DotLine";
 export { Equation } from "./Equation";
 export { LI, OL, UL } from "./List";
 export { Page, PageBreak } from "./Page";
+export { Stack } from "./Stack";
 export { Entry, Table } from "./Table";
 export { H1, H2, H3, H4, H5, H6, ResetCounter, Title } from "./Titles";