fix: layout package types

.changeset/warm-pigs-sell.md

@@ -0,0 +1,5 @@
+---
+"@react-pdf/layout": patch
+---
+
+fix: layout package types

packages/layout/src/svg/replaceDefs.ts

@@ -30,10 +30,13 @@ const parseNodeDefs =
   (node: SafeNode): SafeNode => {
     const props = node.props;
 
-    const fill = `fill` in props ? replaceDef(defs, props?.fill) : undefined;
+    const fill =
+      `fill` in props ? replaceDef(defs, props?.fill as any) : undefined;
 
     const clipPath =
-      `clipPath` in props ? replaceDef(defs, props?.clipPath) : undefined;
+      `clipPath` in props
+        ? replaceDef(defs, props?.clipPath as any)
+        : undefined;
 
     const newProps = Object.assign({}, node.props, { fill, clipPath });
 

packages/layout/src/types/base.ts

@@ -1,5 +1,8 @@
 import { YogaNode } from 'yoga-layout/load';
 import * as React from 'react';
+import { SafeClipPathNode } from './clip-path';
+import { SafeLinearGradientNode } from './linear-gradient';
+import { SafeRadialGradientNode } from './radial-gradient';
 
 export type YogaInstance = {
   node: { create: () => YogaNode };
@@ -34,17 +37,17 @@ export type Origin = {
   top: number;
 };
 
-export interface ExpandedBookmark {
+export interface Bookmark {
   title: string;
   top?: number;
   left?: number;
   zoom?: number;
   fit?: true | false;
   expanded?: true | false;
+  parent?: number;
+  ref?: number;
 }
 
-export type Bookmark = string | ExpandedBookmark;
-
 export type DynamicPageProps = {
   pageNumber: number;
   totalPages?: number;
@@ -82,7 +85,26 @@ export type NodeProps = {
   bookmark?: Bookmark;
 };
 
-export interface SVGPresentationAttributes {
+export type FillRule = 'nonzero' | 'evenodd';
+
+export type TextAnchor = 'start' | 'middle' | 'end';
+
+export type StrokeLinecap = 'butt' | 'round' | 'square';
+
+export type StrokeLinejoin = 'butt' | 'round' | 'square';
+
+export type Visibility = 'visible' | 'hidden' | 'collapse';
+
+export type DominantBaseline =
+  | 'auto'
+  | 'middle'
+  | 'central'
+  | 'hanging'
+  | 'mathematical'
+  | 'text-after-edge'
+  | 'text-before-edge';
+
+export type SVGPresentationAttributes = {
   fill?: string;
   color?: string;
   stroke?: string;
@@ -91,22 +113,34 @@ export interface SVGPresentationAttributes {
   opacity?: string | number;
   strokeWidth?: string | number;
   fillOpacity?: string | number;
-  fillRule?: 'nonzero' | 'evenodd';
+  fillRule?: FillRule;
   strokeOpacity?: string | number;
-  textAnchor?: 'start' | 'middle' | 'end';
-  strokeLinecap?: 'butt' | 'round' | 'square';
-  strokeLinejoin?: 'butt' | 'round' | 'square';
-  visibility?: 'visible' | 'hidden' | 'collapse';
+  textAnchor?: TextAnchor;
+  strokeLinecap?: StrokeLinecap;
+  strokeLinejoin?: StrokeLinejoin;
+  visibility?: Visibility;
   clipPath?: string;
-  dominantBaseline?:
-    | 'auto'
-    | 'middle'
-    | 'central'
-    | 'hanging'
-    | 'mathematical'
-    | 'text-after-edge'
-    | 'text-before-edge';
-}
+  dominantBaseline?: DominantBaseline;
+};
+
+export type SafeSVGPresentationAttributes = {
+  fill?: string | SafeLinearGradientNode | SafeRadialGradientNode;
+  color?: string;
+  stroke?: string;
+  transform?: string;
+  strokeDasharray?: string;
+  opacity?: number;
+  strokeWidth?: number;
+  fillOpacity?: number;
+  fillRule?: FillRule;
+  strokeOpacity?: number;
+  textAnchor?: TextAnchor;
+  strokeLinecap?: StrokeLinecap;
+  strokeLinejoin?: StrokeLinejoin;
+  visibility?: Visibility;
+  clipPath?: SafeClipPathNode;
+  dominantBaseline?: DominantBaseline;
+};
 
 export interface FormCommonProps extends NodeProps {
   name?: string;

packages/layout/src/types/canvas.ts

@@ -1,7 +1,8 @@
 import * as P from '@react-pdf/primitives';
 import { SafeStyle, Style } from '@react-pdf/stylesheet';
+import { YogaNode } from 'yoga-layout/load';
 
-import { NodeProps, Origin } from './base';
+import { Box, NodeProps, Origin } from './base';
 
 interface CanvasProps extends NodeProps {
   paint: (
@@ -15,9 +16,9 @@ export type CanvasNode = {
   type: typeof P.Canvas;
   props: CanvasProps;
   style?: Style | Style[];
-  box?: never;
+  box?: Box;
   origin?: Origin;
-  yogaNode?: never;
+  yogaNode?: YogaNode;
   children?: never[];
 };
 

packages/layout/src/types/circle.ts

@@ -1,7 +1,11 @@
 import * as P from '@react-pdf/primitives';
 import { SafeStyle, Style } from '@react-pdf/stylesheet';
 
-import { Origin, SVGPresentationAttributes } from './base';
+import {
+  Origin,
+  SVGPresentationAttributes,
+  SafeSVGPresentationAttributes,
+} from './base';
 
 interface CircleProps extends SVGPresentationAttributes {
   style?: SVGPresentationAttributes;
@@ -10,6 +14,13 @@ interface CircleProps extends SVGPresentationAttributes {
   r: string | number;
 }
 
+interface SafeCircleProps extends SafeSVGPresentationAttributes {
+  style?: SafeSVGPresentationAttributes;
+  cx?: number;
+  cy?: number;
+  r: number;
+}
+
 export type CircleNode = {
   type: typeof P.Circle;
   props: CircleProps;
@@ -20,6 +31,7 @@ export type CircleNode = {
   children?: never[];
 };
 
-export type SafeCircleNode = Omit<CircleNode, 'style'> & {
+export type SafeCircleNode = Omit<CircleNode, 'style' | 'props'> & {
   style: SafeStyle;
+  props: SafeCircleProps;
 };

packages/layout/src/types/ellipse.ts

@@ -1,7 +1,10 @@
 import * as P from '@react-pdf/primitives';
 import { SafeStyle, Style } from '@react-pdf/stylesheet';
 
-import { SVGPresentationAttributes } from './base';
+import {
+  SafeSVGPresentationAttributes,
+  SVGPresentationAttributes,
+} from './base';
 
 interface EllipseProps extends SVGPresentationAttributes {
   style?: SVGPresentationAttributes;
@@ -11,6 +14,14 @@ interface EllipseProps extends SVGPresentationAttributes {
   ry: string | number;
 }
 
+interface SafeEllipseProps extends SafeSVGPresentationAttributes {
+  style?: SafeSVGPresentationAttributes;
+  cx?: number;
+  cy?: number;
+  rx: number;
+  ry: number;
+}
+
 export type EllipseNode = {
   type: typeof P.Ellipse;
   props: EllipseProps;
@@ -21,6 +32,7 @@ export type EllipseNode = {
   children?: never[];
 };
 
-export type SafeEllipseNode = Omit<EllipseNode, 'style'> & {
+export type SafeEllipseNode = Omit<EllipseNode, 'style' | 'props'> & {
   style: SafeStyle;
+  props: SafeEllipseProps;
 };

packages/layout/src/types/g.ts

@@ -1,7 +1,6 @@
 import { SafeStyle, Style } from '@react-pdf/stylesheet';
 import * as P from '@react-pdf/primitives';
 
-import { SVGPresentationAttributes } from './base';
 import { LineNode, SafeLineNode } from './line';
 import { PolylineNode, SafePolylineNode } from './polyline';
 import { PolygonNode, SafePolygonNode } from './polygon';
@@ -10,11 +9,21 @@ import { RectNode, SafeRectNode } from './rect';
 import { CircleNode, SafeCircleNode } from './circle';
 import { EllipseNode, SafeEllipseNode } from './ellipse';
 import { SafeTspanNode, TspanNode } from './tspan';
+import { ImageNode, SafeImageNode } from './image';
+import { SafeTextNode, TextNode } from './text';
+import {
+  SVGPresentationAttributes,
+  SafeSVGPresentationAttributes,
+} from './base';
 
 interface GProps extends SVGPresentationAttributes {
   style?: Style | Style[];
 }
 
+interface SafeGProps extends SafeSVGPresentationAttributes {
+  style?: Style;
+}
+
 export type GNode = {
   type: typeof P.G;
   props: GProps;
@@ -30,13 +39,16 @@ export type GNode = {
     | RectNode
     | CircleNode
     | EllipseNode
+    | ImageNode
+    | TextNode
     | TspanNode
     | GNode
   )[];
 };
 
-export type SafeGNode = Omit<GNode, 'style' | 'children'> & {
+export type SafeGNode = Omit<GNode, 'style' | 'props' | 'children'> & {
   style: SafeStyle;
+  props: SafeGProps;
   children?: (
     | SafeLineNode
     | SafePolylineNode
@@ -45,6 +57,8 @@ export type SafeGNode = Omit<GNode, 'style' | 'children'> & {
     | SafeRectNode
     | SafeCircleNode
     | SafeEllipseNode
+    | SafeImageNode
+    | SafeTextNode
     | SafeTspanNode
     | SafeGNode
   )[];

packages/layout/src/types/image.ts

@@ -45,14 +45,18 @@ export type SourceObject =
 
 interface BaseImageProps extends NodeProps {
   cache?: boolean;
+  x?: number;
+  y?: number;
 }
 
 interface ImageWithSrcProp extends BaseImageProps {
   src: SourceObject;
+  source: never;
 }
 
 interface ImageWithSourceProp extends BaseImageProps {
   source: SourceObject;
+  src: never;
 }
 
 export type ImageProps = ImageWithSrcProp | ImageWithSourceProp;

packages/layout/src/types/index.ts

@@ -1,5 +1,7 @@
 export * from './base';
+export * from './canvas';
 export * from './circle';
+export * from './checkbox';
 export * from './clip-path';
 export * from './defs';
 export * from './document';

packages/layout/src/types/line.ts

@@ -1,7 +1,10 @@
 import * as P from '@react-pdf/primitives';
 import { SafeStyle, Style } from '@react-pdf/stylesheet';
 
-import { SVGPresentationAttributes } from './base';
+import {
+  SVGPresentationAttributes,
+  SafeSVGPresentationAttributes,
+} from './base';
 
 interface LineProps extends SVGPresentationAttributes {
   style?: SVGPresentationAttributes;
@@ -11,6 +14,14 @@ interface LineProps extends SVGPresentationAttributes {
   y2: string | number;
 }
 
+interface SafeLineProps extends SafeSVGPresentationAttributes {
+  style?: SafeSVGPresentationAttributes;
+  x1: number;
+  x2: number;
+  y1: number;
+  y2: number;
+}
+
 export type LineNode = {
   type: typeof P.Line;
   props: LineProps;
@@ -21,6 +32,7 @@ export type LineNode = {
   children?: never[];
 };
 
-export type SafeLineNode = Omit<LineNode, 'style'> & {
+export type SafeLineNode = Omit<LineNode, 'style' | 'props'> & {
   style: SafeStyle;
+  props: SafeLineProps;
 };

packages/layout/src/types/linear-gradient.ts

@@ -10,6 +10,14 @@ interface LinearGradientProps {
   y2?: string | number;
 }
 
+interface SafeLinearGradientProps {
+  id: string;
+  x1?: number;
+  x2?: number;
+  y1?: number;
+  y2?: number;
+}
+
 export type LinearGradientNode = {
   type: typeof P.LinearGradient;
   props: LinearGradientProps;
@@ -20,6 +28,10 @@ export type LinearGradientNode = {
   children?: StopNode[];
 };
 
-export type SafeLinearGradientNode = Omit<LinearGradientNode, 'children'> & {
+export type SafeLinearGradientNode = Omit<
+  LinearGradientNode,
+  'props' | 'children'
+> & {
+  props: SafeLinearGradientProps;
   children?: SafeStopNode[];
 };