refactor(core): remove PenpotExportFile cumbersome abstraction

packages/core/src/lib/adapters/inbound/colorsToCssVariables.ts

@@ -1,6 +1,7 @@
 import { textToCssCustomProperyName } from '../../css/helpers'
 
-import { CSSClassDefinition, PenpotExportFile } from '../../types'
+import { PenpotApiFile } from '../../api'
+import { CSSClassDefinition } from '../../types'
 
 const toRgbaCssValue = (hex: string, alpha: number = 1) => {
   const channels = hex.match(/\w{2}/g)
@@ -14,11 +15,11 @@ const toRgbaCssValue = (hex: string, alpha: number = 1) => {
 }
 
 export const adaptColorsToCssVariables = (
-  penpotFile: PenpotExportFile,
+  penpotFile: PenpotApiFile,
 ): CSSClassDefinition => {
-  const { colors } = penpotFile
+  const colors = Object.values(penpotFile.data.colors ?? {})
 
-  const cssPropsEntries = Object.values(colors).map((color) => {
+  const cssPropsEntries = colors.map((color) => {
     const objectClassName = textToCssCustomProperyName(color.name)
 
     return [objectClassName, toRgbaCssValue(color.color, color.opacity)]

packages/core/src/lib/adapters/inbound/pageComponentsToCssClasses.ts

@@ -5,8 +5,8 @@ import {
 } from '../../api/helpers'
 import { textToCssClassSelector } from '../../css/helpers'
 
-import { PenpotApiObject } from '../../api'
+import { PenpotApiFile, PenpotApiObject } from '../../api'
-import { CSSClassDefinition, PenpotExportFile } from '../../types'
+import { CSSClassDefinition } from '../../types'
 
 const extractObjectCssProps = (object: PenpotApiObject) => {
   let { textDecoration, ...styles } = object.positionData[0]
@@ -35,17 +35,17 @@ const getTextObjectCssProps = (object: PenpotApiObject) => {
 }
 
 export const adaptPageComponentsToCssClassDefinitions = (
-  penpotFile: PenpotExportFile,
+  penpotFile: PenpotApiFile,
   options: { pageId: string },
 ): CSSClassDefinition[] => {
-  const cssClassDefinitions = []
+  const pages = penpotFile.data.pagesIndex ?? {}
-
+  const page = pages[options.pageId]
-  const page = penpotFile.pages[options.pageId]
+  const pageObjects = Object.values(page.objects)
-
+  const components = pageObjects
-  const components = Object.values(page.objects)
     .filter(isComponent)
     .map((object) => getObjectShapesFromPage(object, page))
 
+  const cssClassDefinitions = []
   for (const component of components) {
     for (const objectId in component.objects) {
       const object = component.objects[objectId]

packages/core/src/lib/adapters/inbound/typographyToCssClasses.ts

@@ -1,7 +1,7 @@
 import { textToCssClassSelector } from '../../css/helpers'
 
-import { PenpotApiTypography, CssTextProperty } from '../../api'
+import { PenpotApiTypography, CssTextProperty, PenpotApiFile } from '../../api'
-import { CSSClassDefinition, PenpotExportFile } from '../../types'
+import { CSSClassDefinition } from '../../types'
 
 const getTypographyAssetCssProps = (
   typography: PenpotApiTypography,
@@ -18,11 +18,12 @@ const getTypographyAssetCssProps = (
 }
 
 export const adaptTypographiesToCssClassDefinitions = (
-  penpotFile: PenpotExportFile,
+  penpotFile: PenpotApiFile,
 ): CSSClassDefinition[] => {
-  const { fileName, typographies } = penpotFile
+  const fileName = penpotFile.name
+  const typographies = Object.values(penpotFile.data.typographies ?? {})
 
-  const cssClassDefinitions = Object.values(typographies).map((typography) => {
+  const cssClassDefinitions = typographies.map((typography) => {
     const cssProps = getTypographyAssetCssProps(typography)
     const selector = textToCssClassSelector(`${fileName}--${typography.name}`)
 

packages/core/src/lib/api/penpot.ts

@@ -6,7 +6,6 @@ import type {
   PenpotClientGetFileOptions,
   PenpotClientSettings,
 } from './types'
-import { PenpotExportFile } from '../types'
 
 class PenpotApiError extends Error {
   constructor(parsedError: PenpotApiErrorResponse) {
@@ -65,9 +64,7 @@ export class Penpot {
     return json as ResultType
   }
 
-  async getFile(
+  async getFile(options: PenpotClientGetFileOptions): Promise<PenpotApiFile> {
-    options: PenpotClientGetFileOptions,
-  ): Promise<PenpotExportFile> {
     const file = await this.fetcher<PenpotApiFile>({
       command: 'get-file',
       body: {
@@ -75,11 +72,6 @@ export class Penpot {
       },
     })
 
-    return {
+    return file
-      fileName: file.name,
-      colors: file.data.colors ?? {},
-      typographies: file.data.typographies ?? {},
-      pages: file.data.pagesIndex ?? {},
-    }
   }
 }

packages/core/src/lib/index.ts

@@ -24,7 +24,7 @@ export default async function penpotExport(
       fileId: fileConfig.fileId,
     })
 
-    console.log('🎨 Processing Penpot file: %s', penpotFile.fileName)
+    console.log('🎨 Processing Penpot file: %s', penpotFile.name)
 
     for (const colorsConfig of fileConfig.colors) {
       const cssPath = path.resolve(rootProjectPath, colorsConfig.output)

packages/core/src/lib/types.ts

@@ -6,13 +6,6 @@ import type {
 
 export type { UserConfig } from './config/types'
 
-export interface PenpotExportFile {
-  fileName: string
-  colors: Record<string, PenpotApiColor>
-  typographies: Record<string, PenpotApiTypography>
-  pages: Record<string, PenpotApiPage>
-}
-
 export interface CSSClassDefinition {
   selector: string
   cssProps: Record<string, string>