wakuconnect-chat-sdk/packages/icons/scripts/sync.ts

124 lines
3.1 KiB
TypeScript
Raw Normal View History

import { isCancel, outro, spinner, text } from '@clack/prompts'
import { transform } from '@svgr/core'
import * as Figma from 'figma-api'
import fs from 'fs-extra'
import fetch from 'node-fetch'
import path from 'path'
import prettier from 'prettier'
const SVG_DIR = path.resolve(__dirname, '../svg')
await fs.ensureDir(SVG_DIR)
function toKebabCase(str: string): string {
return str
.replace(/([a-z])([A-Z])/g, '$1-$2') // convert camel case to kebab case
.replace(/[\s_]+/g, '-') // replace spaces and underscores with hyphens
.toLowerCase()
}
const personalAccessToken = await text({
message: 'Your personal Figma access token:',
validate(value) {
if (value.length === 0) return `required`
},
})
if (isCancel(personalAccessToken)) {
outro('Bye!')
process.exit(0)
}
// https://www.figma.com/file/qLLuMLfpGxK9OfpIavwsmK/Iconset?node-id=3239-987
const FILE_KEY = 'qLLuMLfpGxK9OfpIavwsmK'
const NODE_IDS = {
'3239:987': 'icons',
// '3227:1083': 'social',
// '942:77': 'reactions',
'942:218': 'love',
'942:217': 'thumbs-up',
'942:216': 'thumbs-down',
'942:215': 'laugh',
'942:213': 'angry',
}
const figma = new Figma.Api({
personalAccessToken,
})
const s1 = spinner()
s1.start('Fetching nodes from Figma')
const { nodes } = await figma.getFileNodes(FILE_KEY, Object.keys(NODE_IDS))
s1.stop('Done!')
for (const [nodeId, name] of Object.entries(NODE_IDS)) {
const s2 = spinner()
s2.start('Fetching nodes from Figma')
const { components } = nodes[nodeId]!
const nodeIds = Object.keys(components)
const { err, images } = await figma.getImage(FILE_KEY, {
ids: nodeIds.join(','),
format: 'svg',
scale: 1,
})
if (err) {
s2.stop('Error!')
console.error(err)
process.exit(1)
}
s2.stop('Done!')
const s3 = spinner()
s3.start(`Generating SVGs for ${name}`)
for (const [nodeId, image] of Object.entries(images)) {
const icon = components[nodeId]!
const svgRaw = await fetch(image!).then(res => res.text())
const svg = await transform(svgRaw, {
plugins: ['@svgr/plugin-svgo'],
replaceAttrValues: {
// '#000': 'currentColor',
},
svgoConfig: {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
cleanupIds: {
minify: false,
},
// viewBox is required to resize SVGs with CSS.
// @see https://github.com/svg/svgo/issues/1128
removeViewBox: false,
},
},
},
],
},
})
const nameParts = icon.name.replace(' / ', '/').split('/')
const iconName = nameParts[nameParts.length - 1]
const fileName = `${toKebabCase(iconName)}-icon.svg`
const filePath = path.resolve(SVG_DIR, fileName)
const prettierOptions = prettier.resolveConfig.sync(process.cwd())
const formattedSvg = prettier.format(svg, {
...prettierOptions,
parser: 'html',
})
await fs.writeFile(filePath, formattedSvg, { encoding: 'utf8' })
}
s3.stop(`${Object.keys(images).length} SVGs generated`)
}