mirror of
https://github.com/penpot/penpot-export.git
synced 2025-03-11 23:11:17 -05:00
refactor(core): remove PenpotExportFile cumbersome abstraction
This commit is contained in:
parent
924d5bec7b
commit
bef9cd65ef
6 changed files with 22 additions and 35 deletions
|
@ -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)]
|
||||
|
|
|
@ -5,8 +5,8 @@ import {
|
|||
} from '../../api/helpers'
|
||||
import { textToCssClassSelector } from '../../css/helpers'
|
||||
|
||||
import { PenpotApiObject } from '../../api'
|
||||
import { CSSClassDefinition, PenpotExportFile } from '../../types'
|
||||
import { PenpotApiFile, PenpotApiObject } from '../../api'
|
||||
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 page = penpotFile.pages[options.pageId]
|
||||
|
||||
const components = Object.values(page.objects)
|
||||
const pages = penpotFile.data.pagesIndex ?? {}
|
||||
const page = pages[options.pageId]
|
||||
const pageObjects = Object.values(page.objects)
|
||||
const components = pageObjects
|
||||
.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]
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { textToCssClassSelector } from '../../css/helpers'
|
||||
|
||||
import { PenpotApiTypography, CssTextProperty } from '../../api'
|
||||
import { CSSClassDefinition, PenpotExportFile } from '../../types'
|
||||
import { PenpotApiTypography, CssTextProperty, PenpotApiFile } from '../../api'
|
||||
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}`)
|
||||
|
||||
|
|
|
@ -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(
|
||||
options: PenpotClientGetFileOptions,
|
||||
): Promise<PenpotExportFile> {
|
||||
async getFile(options: PenpotClientGetFileOptions): Promise<PenpotApiFile> {
|
||||
const file = await this.fetcher<PenpotApiFile>({
|
||||
command: 'get-file',
|
||||
body: {
|
||||
|
@ -75,11 +72,6 @@ export class Penpot {
|
|||
},
|
||||
})
|
||||
|
||||
return {
|
||||
fileName: file.name,
|
||||
colors: file.data.colors ?? {},
|
||||
typographies: file.data.typographies ?? {},
|
||||
pages: file.data.pagesIndex ?? {},
|
||||
}
|
||||
return file
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue