@charcoal-ui/icons-cli 1.0.0-alpha.1

package/src/getChangedFiles.ts

@@ -0,0 +1,65 @@
+import { promises as fs } from 'fs'
+import path from 'path'
+import { execp } from './utils'
+
+export const targetDir = path.resolve(process.cwd(), 'packages', 'icons', 'svg')
+
+/**
+ * dir 内で変更があったファイル情報を for await で回せるようにするやつ
+ */
+export async function* getChangedFiles(dir = targetDir) {
+  const directories = await fs.readdir(dir)
+  const gitStatus = await collectGitStatus()
+
+  for (const dir of directories) {
+    const directory = path.resolve(targetDir, dir)
+
+    // eslint-disable-next-line no-await-in-loop
+    const stat = await fs.stat(directory)
+    if (!stat.isDirectory()) {
+      continue
+    }
+
+    // eslint-disable-next-line no-await-in-loop
+    const files = await fs.readdir(directory)
+
+    for (const file of files) {
+      const fullpath = path.resolve(targetDir, dir, file)
+      const relativePath = path.relative(process.cwd(), fullpath)
+
+      const status = gitStatus[relativePath]
+      if (status == null) {
+        // Already up-to-date
+        continue
+      }
+
+      // eslint-disable-next-line no-await-in-loop
+      const content = await fs.readFile(fullpath, { encoding: 'utf-8' })
+
+      yield { relativePath, content, status }
+    }
+  }
+}
+
+async function collectGitStatus() {
+  return Object.fromEntries(
+    /**
+     * @see https://git-scm.com/docs/git-status#_porcelain_format_version_1
+     */
+    (await execp(`git status --porcelain`))
+      .split('\n')
+      .map(
+        (s) =>
+          [
+            s.slice(3),
+            s.startsWith(' M')
+              ? 'modified'
+              : s.startsWith('??')
+              ? 'untracked'
+              : s.startsWith(' D')
+              ? 'deleted'
+              : null,
+          ] as const
+      )
+  )
+}

package/src/index.ts

@@ -0,0 +1,115 @@
+import { readFile, writeFile } from 'fs-extra'
+import yargs from 'yargs'
+import { FigmaFileClient } from './FigmaFileClient'
+import { GithubClient } from './GitHubClient'
+import { GitlabClient } from './GitlabClient'
+import { DEFAULT_CURRENT_COLOR_TARGET, optimizeSvg } from './optimizeSvg'
+import { mustBeDefined } from './utils'
+
+/**
+ * Figma
+ */
+const FIGMA_TOKEN = process.env.FIGMA_TOKEN
+const FIGMA_FILE_URL = process.env.FIGMA_FILE_URL
+const OUTPUT_ROOT_DIR = process.env.OUTPUT_ROOT_DIR
+
+/**
+ * GitLab
+ */
+const GITLAB_ACCESS_TOKEN = process.env.GITLAB_ACCESS_TOKEN
+const GITLAB_DEFAULT_BRANCH = process.env.GITLAB_DEFAULT_BRANCH
+const GITLAB_HOST = process.env.GITLAB_HOST
+const GITLAB_PROJECT_ID = process.env.GITLAB_PROJECT_ID
+
+/**
+ * GitHub
+ */
+const GITHUB_ACCESS_TOKEN = process.env.GITHUB_ACCESS_TOKEN
+const GITHUB_REPO_OWNER = process.env.GITHUB_REPO_OWNER
+const GITHUB_REPO_NAME = process.env.GITHUB_REPO_NAME
+const GITHUB_DEFAULT_BRANCH = process.env.GITHUB_DEFAULT_BRANCH
+
+void yargs
+  .scriptName('icons-cli')
+  .command(
+    'figma:export',
+    'Load all icons from Figma and save to files',
+    () => yargs.option('format', { default: 'svg', choices: ['svg', 'pdf'] }),
+    ({ format }) => {
+      mustBeDefined(FIGMA_FILE_URL, 'FIGMA_FILE_URL')
+      mustBeDefined(FIGMA_TOKEN, 'FIGMA_TOKEN')
+      mustBeDefined(OUTPUT_ROOT_DIR, 'OUTPUT_ROOT_DIR')
+
+      void FigmaFileClient.runFromCli(
+        FIGMA_FILE_URL,
+        FIGMA_TOKEN,
+        OUTPUT_ROOT_DIR,
+        format as 'svg' | 'pdf'
+      ).catch((e) => {
+        console.error(e)
+        process.exit(1)
+      })
+    }
+  )
+  .command(
+    'svg:optimize',
+    'Optimize given .svg files and overwrite it',
+    () =>
+      yargs
+        .option('file', { demandOption: true, type: 'string' })
+        .option('color', {
+          default: DEFAULT_CURRENT_COLOR_TARGET,
+          type: 'string',
+          defaultDescription:
+            'Color code that should be converted into `currentColor`',
+        }),
+    ({ file, color }) => {
+      void readFile(file, { encoding: 'utf-8' })
+        .then((content) => optimizeSvg(content, color))
+        .then((optimized) => writeFile(file, optimized))
+        .catch((e) => {
+          console.error(e)
+          process.exit(1)
+        })
+    }
+  )
+  .command(
+    'gitlab:mr',
+    'Create a merge request in the name of icons-cli',
+    {},
+    () => {
+      mustBeDefined(GITLAB_PROJECT_ID, 'GITLAB_PROJECT_ID')
+      mustBeDefined(GITLAB_ACCESS_TOKEN, 'GITLAB_ACCESS_TOKEN')
+
+      void GitlabClient.runFromCli(
+        GITLAB_HOST ?? 'https://gitlab.com',
+        Number(GITLAB_PROJECT_ID),
+        GITLAB_ACCESS_TOKEN,
+        GITLAB_DEFAULT_BRANCH ?? 'main'
+      ).catch((e) => {
+        console.error(e)
+        process.exit(1)
+      })
+    }
+  )
+  .command(
+    'github:pr',
+    'Create a pull request in the name of icons-cli',
+    {},
+    () => {
+      mustBeDefined(GITHUB_ACCESS_TOKEN, 'GITHUB_ACCESS_TOKEN')
+
+      void GithubClient.runFromCli(
+        GITHUB_REPO_OWNER ?? 'pixiv',
+        GITHUB_REPO_NAME ?? 'charcoal',
+        GITHUB_ACCESS_TOKEN,
+        GITHUB_DEFAULT_BRANCH ?? 'main'
+      ).catch((e) => {
+        console.error(e)
+        process.exit(1)
+      })
+    }
+  )
+  .demandCommand()
+  .help()
+  .parse()

package/src/optimizeSvg.ts

@@ -0,0 +1,101 @@
+import { JSDOM } from 'jsdom'
+import { parseToRgb } from 'polished'
+import type { RgbColor, RgbaColor } from 'polished/lib/types/color'
+import Svgo from 'svgo'
+
+export const DEFAULT_CURRENT_COLOR_TARGET = '#858585'
+
+const svgo = new Svgo({
+  plugins: [
+    // NOTICE: SVGO は「svg 内のすべての fill を currentColor に変える」機能しかない
+    // icons-cli に必要なのは「特定の黒っぽい色だけ currentColor に変える」機能
+    // なので、convertColors plugin は使わない
+    // { convertColors: { currentColor: true } },
+    { removeViewBox: true },
+    { removeAttrs: { attrs: ['stroke-opacity', 'fill-opacity'] } },
+  ],
+})
+
+export async function optimizeSvg(input: string, convertedColor: string) {
+  const { data } = await svgo.optimize(input)
+
+  const { document } = new JSDOM(data).window
+  const svg = document.querySelector('svg')
+  if (!svg) {
+    throw new Error('optimizeSvg: input string seems not to have <svg>')
+  }
+
+  addViewboxToRootSvg(svg)
+  convertToCurrentColor(svg, convertedColor)
+
+  return svg.outerHTML
+}
+
+const TARGET_ATTRS = ['fill', 'stroke']
+
+function convertToCurrentColor(svg: SVGSVGElement, convertedColor: string) {
+  const targetColor = parseColor(convertedColor)
+  if (!targetColor) {
+    throw new Error(`${convertedColor} is not a valid color`)
+  }
+
+  for (const attr of TARGET_ATTRS) {
+    const targets = Array.from(svg.querySelectorAll<SVGElement>(`[${attr}]`))
+
+    for (const el of targets) {
+      const value = parseColor(el.getAttribute(attr))
+      if (!value) {
+        continue
+      }
+
+      if (!colorEquals(value, targetColor)) {
+        continue
+      }
+
+      el.setAttribute(attr, 'currentColor')
+    }
+  }
+}
+
+function parseColor(value: string | null) {
+  if (value == null) {
+    return null
+  }
+
+  try {
+    return parseToRgb(value)
+  } catch {
+    return null
+  }
+}
+
+function colorEquals(self: RgbColor | RgbaColor, other: RgbColor | RgbaColor) {
+  if (self.red !== other.red) {
+    return false
+  }
+
+  if (self.blue !== other.blue) {
+    return false
+  }
+
+  if (self.green !== other.green) {
+    return false
+  }
+
+  if ('alpha' in self) {
+    if ('alpha' in other) {
+      if (self.alpha !== other.alpha) {
+        return false
+      }
+    }
+  }
+
+  return true
+}
+
+function addViewboxToRootSvg(svg: SVGSVGElement) {
+  const width = svg.getAttribute('width')!
+  const height = svg.getAttribute('height')!
+
+  svg.setAttribute('viewBox', `0 0 ${width} ${height}`)
+}

package/src/utils.ts

@@ -0,0 +1,24 @@
+import { exec } from 'child_process'
+
+/**
+ * FIXME: util.promisify を使うと node-libs-browser に入っている方が使われてしまい、壊れる
+ */
+export const execp = (command: string) =>
+  new Promise<string>((resolve, reject) => {
+    exec(command, (err, stdout) => {
+      if (err) {
+        return reject(err)
+      }
+
+      return resolve(stdout)
+    })
+  })
+
+export function mustBeDefined<T>(
+  value: T,
+  name: string
+): asserts value is NonNullable<T> {
+  if (typeof value === 'undefined') {
+    throw new TypeError(`${name} must be defined.`)
+  }
+}