feat: fragments generator

.gitignore

@@ -48,3 +48,7 @@ package.tgz
 
 # Generated files
 generated/
+
+# VS Code
+.yarn/sdks
+.vscode

fragments/fragments-cli/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@atls/figma-fragments-cli",
+  "version": "0.0.1",
+  "license": "BSD-3-Clause",
+  "type": "module",
+  "main": "src/index.ts",
+  "bin": {
+    "generate-fragments": "dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn library build",
+    "generate-fragments": "ts-node-esm src/index.ts",
+    "generate-fragments-new": "node --import @swc-node/register/esm-register src/index.ts",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "dependencies": {
+    "@atls/figma-file-loader": "workspace:*",
+    "@atls/figma-file-utils": "workspace:*",
+    "@atls/figma-fragments-generator": "workspace:*",
+    "commander": "12.1.0",
+    "figma-js": "1.16.1-0",
+    "npmlog": "7.0.1"
+  },
+  "devDependencies": {
+    "@swc-node/register": "1.9.0",
+    "@swc/core": "1.6.1",
+    "@types/node": "18.19.34",
+    "@types/npmlog": "7.0.0",
+    "@yarnpkg/builder": "4.1.1",
+    "ts-node": "10.9.2",
+    "typescript": "5.2.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "typings": "dist/index.d.ts"
+  }
+}

fragments/fragments-cli/src/index.ts

@@ -0,0 +1,44 @@
+import { createInterface } from 'node:readline'
+
+import logger              from 'npmlog'
+import { program }         from 'commander'
+
+import { run }             from './run.js'
+
+logger.heading = 'figma-fragments'
+
+program
+  .option('-o, --output [output]', 'Output dir')
+  .option('-t, --theme <theme>', 'Path to theme file')
+  .option('-v, --verbose', 'Verbose output')
+  .option('-n, --node-id <nodeId>', 'Node id for generating')
+  .arguments('<fileId>')
+  .parse(process.argv)
+
+const fileId = program.args.at(0)
+const options = program.opts()
+
+if (options.verbose) {
+  logger.level = 'verbose'
+}
+
+if (!fileId) {
+  logger.error('fileId', 'Figma file id required.')
+} else {
+  const readline = createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  })
+
+  readline.question(`Enter your Figma access token:\n`, (id) => {
+    if (!id || id === '') throw Error('ID must not be empty')
+    // eslint-disable-next-line dot-notation
+    process.env['FIGMA_TOKEN'] = id
+
+    readline.close()
+
+    run(fileId, options.nodeId, options.output, options.theme)
+      .then(() => logger.info('info', 'Fragments successful generated'))
+      .catch((error) => logger.error('error', error))
+  })
+}

fragments/fragments-cli/src/run.ts

@@ -0,0 +1,34 @@
+import assert                           from 'node:assert'
+
+import { join }                         from 'path'
+
+import { FigmaFileLoader }              from '@atls/figma-file-loader'
+import { FigmaThemeFragmentsGenerator } from '@atls/figma-fragments-generator'
+import { processFile }                  from '@atls/figma-file-utils'
+import { writeFile }                    from '@atls/figma-file-utils'
+
+export const run = async (
+  fileId: string,
+  nodeId: string,
+  output: string,
+  themeFilePath: string
+) => {
+  const absoluteThemeFilePath = join(process.cwd(), themeFilePath)
+  const exports = processFile(absoluteThemeFilePath)
+
+  const theme = Object.values(exports)?.[0] as Record<string, Record<string, string>>
+
+  assert.ok(
+    theme,
+    `Could not process the theme with path ${absoluteThemeFilePath}. Please try again`
+  )
+
+  const loader = new FigmaFileLoader()
+  const generator = new FigmaThemeFragmentsGenerator()
+
+  const response = await loader.loadNode(fileId, nodeId)
+
+  const component = generator.generate(response, theme)
+
+  await writeFile(output, 'fragments.tsx', component)
+}

fragments/fragments-generator/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@atls/figma-fragments-generator",
+  "version": "0.0.1",
+  "license": "BSD-3-Clause",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn library build",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "dependencies": {
+    "@atls/figma-utils": "workspace:*",
+    "pretty-format": "29.7.0",
+    "react": "18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "18.19.34",
+    "@types/react": "18.3.12",
+    "figma-js": "1.16.1-0"
+  },
+  "peerDependencies": {
+    "figma-js": "*"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "typings": "dist/index.d.ts"
+  }
+}

fragments/fragments-generator/src/figma-fragments.generator.ts

@@ -0,0 +1,24 @@
+import { FileNodesResponse }      from 'figma-js'
+
+import { CreateFragmentStrategy } from './strategy/index.js'
+
+export class FigmaThemeFragmentsGenerator {
+  readonly name = 'fragments'
+
+  createComponent(fragment: string, imports?: Array<string>): string {
+    return `
+      import React from 'react'
+      import { memo } from 'react'
+      ${imports?.join('\n')}
+
+      export const GeneratedFragment = memo(() => (${fragment}))`
+  }
+
+  generate(response: FileNodesResponse, theme: Record<string, Record<string, string>>): string {
+    const strategy = new CreateFragmentStrategy(theme)
+
+    const { fragment, imports } = strategy.execute(response.nodes)
+
+    return this.createComponent(fragment, imports)
+  }
+}

fragments/fragments-generator/src/index.ts

@@ -0,0 +1 @@
+export * from './figma-fragments.generator.js'

fragments/fragments-generator/src/strategy/create-box.strategy.ts

@@ -0,0 +1,43 @@
+import { Frame }                from 'figma-js'
+import { createElement }        from 'react'
+
+import { ThemeMappingStrategy } from './theme-mapping.strategy.js'
+
+export class CreateBoxStrategy extends ThemeMappingStrategy {
+  getImports() {
+    return [`import { Box } from '@ui/layout'`]
+  }
+
+  createElement(node: Frame) {
+    const {
+      layoutMode,
+      itemSpacing,
+      counterAxisAlignItems,
+      primaryAxisAlignItems,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      cornerRadius,
+      strokes,
+      strokeWeight,
+      background,
+      effects,
+      absoluteBoundingBox,
+    } = node
+
+    return createElement('Box', {
+      width: absoluteBoundingBox.width ? `${absoluteBoundingBox.width}px` : undefined,
+      height: absoluteBoundingBox.height ? `${absoluteBoundingBox.height}px` : undefined,
+      flexDirection: this.getFlexDirection(layoutMode),
+      justifyContent: this.getJustifyContent(primaryAxisAlignItems),
+      alignItems: this.getAlignItems(counterAxisAlignItems),
+      background: this.getColor(background),
+      gap: this.getGap(itemSpacing),
+      border: this.getBorder(strokes, strokeWeight),
+      borderRadius: this.getBorderRadius(cornerRadius),
+      boxShadow: this.getShadow(effects),
+      ...this.getPaddings({ paddingBottom, paddingLeft, paddingRight, paddingTop }),
+    })
+  }
+}

fragments/fragments-generator/src/strategy/create-button.strategy.ts

@@ -0,0 +1,21 @@
+import { Instance }            from 'figma-js'
+import { Fragment }            from 'react'
+import { createElement }       from 'react'
+
+import { ComponentProperties } from './strategy.interfaces.js'
+
+export class CreateButtonStrategy {
+  getImports() {
+    return [`import { Button } from '@ui/button'`]
+  }
+
+  createElement(node: Instance) {
+    if ('componentProperties' in node) {
+      const style = (node.componentProperties as ComponentProperties).Style
+
+      return createElement('Button', { variant: style?.value.toString().toLocaleLowerCase() })
+    }
+
+    return createElement(Fragment)
+  }
+}