Added support for background in pages (#56)

* added support for background in pages

* minor fix

* removed eslint ignore

.changeset/soft-snails-sneeze.md

@@ -0,0 +1,5 @@
+---
+"penpot-exporter": minor
+---
+
+Added support for background colors in pages

plugin-src/transformers/transformPageNode.ts

@@ -1,10 +1,14 @@
 import { transformChildren } from '@plugin/transformers/partials';
+import { translatePageFill } from '@plugin/translators';
 
 import { PenpotPage } from '@ui/lib/types/penpotPage';
 
 export const transformPageNode = async (node: PageNode): Promise<PenpotPage> => {
   return {
     name: node.name,
+    options: {
+      background: node.backgrounds.length ? translatePageFill(node.backgrounds[0]) : undefined
+    },
     ...(await transformChildren(node))
   };
 };

plugin-src/translators/translateFills.ts

@@ -33,6 +33,15 @@ export const translateFills = (
   return penpotFills;
 };
 
+export const translatePageFill = (fill: Paint): string | undefined => {
+  switch (fill.type) {
+    case 'SOLID':
+      return rgbToHex(fill.color);
+  }
+
+  console.error(`Unsupported page fill type: ${fill.type}`);
+};
+
 const translateSolidFill = (fill: SolidPaint): Fill => {
   return {
     fillColor: rgbToHex(fill.color),

ui-src/converters/createPenpotPage.ts

@@ -4,7 +4,7 @@ import { PenpotPage } from '@ui/lib/types/penpotPage';
 import { createPenpotItem } from '.';
 
 export const createPenpotPage = (file: PenpotFile, node: PenpotPage) => {
-  file.addPage(node.name);
+  file.addPage(node.name, node.options);
 
   for (const child of node.children ?? []) {
     createPenpotItem(file, child);

ui-src/lib/penpot.d.ts

@@ -4,12 +4,12 @@ import { FrameShape } from '@ui/lib/types/frame/frameShape';
 import { GroupShape } from '@ui/lib/types/group/groupShape';
 import { ImageShape } from '@ui/lib/types/image/imageShape';
 import { PathShape } from '@ui/lib/types/path/pathShape';
+import { PenpotPageOptions } from '@ui/lib/types/penpotPage';
 import { RectShape } from '@ui/lib/types/rect/rectShape';
 import { TextShape } from '@ui/lib/types/text/textShape';
 
 export interface PenpotFile {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  addPage(name: string, options?: any): void;
+  addPage(name: string, options?: PenpotPageOptions): void;
   closePage(): void;
   addArtboard(artboard: FrameShape): void;
   closeArtboard(): void;

ui-src/lib/types/penpotPage.d.ts

@@ -1,6 +1,30 @@
+import { SavedGrids } from '@ui/lib/types/utils/grid';
+import { Uuid } from '@ui/lib/types/utils/uuid';
+
 import { PenpotNode } from './penpotNode';
 
 export type PenpotPage = {
   name: string;
   children?: PenpotNode[];
+  options?: PenpotPageOptions;
+};
+
+export type PenpotPageOptions = {
+  background?: string; // hex color
+  savedGrids?: SavedGrids;
+  flows?: Flow[];
+  guides?: { [uuid: Uuid]: Guide };
+};
+
+type Flow = {
+  id?: Uuid;
+  name: string;
+  startingFrame: Uuid;
+};
+
+type Guide = {
+  id?: Uuid;
+  axis: 'x' | 'y';
+  position: number;
+  frameId?: Uuid;
 };

ui-src/lib/types/utils/color.d.ts

@@ -1,14 +1,13 @@
 import { Gradient } from '@ui/lib/types/utils/gradient';
 import { ImageColor } from '@ui/lib/types/utils/imageColor';
-import { RgbColor } from '@ui/lib/types/utils/rgbColor';
 import { Uuid } from '@ui/lib/types/utils/uuid';
 
 export type Color = {
   id?: Uuid;
   name?: string;
   path?: string;
   value?: string;
-  color?: RgbColor;
+  color?: string; // hex color
   opacity?: number;
   modifiedAt?: string; //@TODO: check this attribute in penpot
   refId?: Uuid;

ui-src/lib/types/utils/grid.d.ts

@@ -1,7 +1,11 @@
-import { RgbColor } from '@ui/lib/types/utils/rgbColor';
-
 export type Grid = ColumnGrid | RowGrid | SquareGrid;
 
+export type SavedGrids = {
+  square?: SquareParams;
+  row?: ColumnParams;
+  column?: ColumnParams;
+};
+
 type ColumnGrid = {
   type: 'column';
   display: boolean;
@@ -35,6 +39,6 @@ type SquareParams = {
 };
 
 type GridColor = {
-  color: RgbColor;
+  color: string; // hex color
   opacity: number;
 };