@rokkit/cli 1.0.0-next.120

package/README.md

@@ -0,0 +1,102 @@
+# @rokkit/cli
+
+A command-line utility for bundling and converting SVG icons into JSON formats compatible with Iconify.
+
+## Installation
+
+```bash
+# Install globally
+npm install -g @rokkit/cli
+
+# Or use directly with npx
+npx @rokkit/cli [command]
+```
+
+## Usage
+
+```bash
+rokkit-cli [command] [options]
+```
+
+### Commands
+
+#### `bundle`
+
+Bundle icons in source folders into JSON files.
+
+```bash
+rokkit-cli bundle -i ./icons -o ./dist
+```
+
+This command:
+
+1. Scans the input directory for subdirectories
+2. Each subdirectory is treated as an icon set
+3. Creates a JSON bundle for each icon set in the output directory
+
+#### `build`
+
+Build complete Iconify JSON packages for icon sets.
+
+```bash
+rokkit-cli build -i ./icons -o ./dist
+```
+
+Similar to `bundle`, but creates a full Iconify package structure for each icon set.
+
+### Options
+
+| Option     | Alias | Description                        | Default             |
+| ---------- | ----- | ---------------------------------- | ------------------- |
+| `--input`  | `-i`  | Source folder containing icon sets | `./src`             |
+| `--output` | `-o`  | Target folder for output files     | `./build`           |
+| `--config` | `-c`  | Path to custom config file         | `./src/config.json` |
+
+## Configuration File
+
+The configuration file should be a JSON file with the following structure:
+
+```json
+{
+  "package": {
+    "namespace": "@your-namespace",
+    "version": "1.0.0",
+    "homepage": "https://github.com/your-username/your-repo"
+  },
+  "icon-set-1": {
+    "color": true
+  },
+  "icon-set-2": {
+    "color": false
+  }
+}
+```
+
+- `package`: Global package information
+  - `namespace`: Namespace for the icon package
+  - `version`: Version number
+  - `homepage`: Repository URL
+- Each icon set can have specific configuration:
+  - `color`: Whether to preserve colors (true) or convert to `currentColor` (false)
+
+## Examples
+
+### Basic usage
+
+```bash
+# Bundle icons
+rokkit-cli bundle -i ./src/icons -o ./dist
+
+# Build Iconify packages
+rokkit-cli build -i ./src/icons -o ./dist
+```
+
+### Using a custom config file
+
+```bash
+rokkit-cli build -c ./my-config.json -i ./src/icons -o ./dist
+```
+
+## License
+
+MIT

package/dist/src/convert.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Clean up and optimise SVG icon
+ *
+ * @param {string} svg SVG code
+ * @param {boolean} color True if color should be preserved
+ */
+export function cleanAndOptimizeIcon(svg: string, color: boolean): void;
+/**
+ * Process icons
+ *
+ * @param {IconifyTools} iconSet Icon set
+ * @param {boolean} color True if color should be preserved
+ */
+export function processIcons(iconSet: IconifyTools, color: boolean): void;
+/**
+ * Convert individual icons into a json bundle
+ *
+ * @param {string} folder Folder with icons
+ * @param {import('./types').IconBuilderOptions} options Options for conversion
+ * @returns {Promise<object>} The generated icon set
+ */
+export function bundle(folder: string, options: import("./types").IconBuilderOptions): Promise<object>;
+/**
+ * Convert icons to an iconify package
+ *
+ * @param {string} folder Folder with icons
+ * @param {import('./types').IconBuilderOptions} options Options for conversion
+ * @returns {Promise<object>} The generated icon set
+ */
+export function convert(folder: string, options: import("./types").IconBuilderOptions): Promise<object>;
+/**
+ * Read config file from path
+ *
+ * @param {string} configPath Path to config file
+ * @returns {object} Parsed config object
+ */
+export function readConfigFile(configPath: string): object;
+/**
+ * Get folders from directory
+ *
+ * @param {string} dir Directory to scan for folders
+ * @returns {string[]} List of folder names
+ */
+export function getFolderNames(dir: string): string[];
+/**
+ * Converts a folder of icons into an icon bundle
+ * @param {string[]} folders
+ * @param {import('./types').IconBuilderOptions} config
+ * @param {import('./types').FolderOptions}      opts
+ */
+export function bundleFolders(folders: string[], config: import("./types").IconBuilderOptions, opts: import("./types").FolderOptions): void;
+/**
+ * Converts a folder of icons into an icon bundle
+ * @param {string[]}                             folders
+ * @param {import('./types').IconBuilderOptions} config
+ * @param {import('./types').FolderOptions}      opts
+ */
+export function convertFolders(folders: string[], config: import("./types").IconBuilderOptions, opts: import("./types").FolderOptions): void;

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/src/types.d.ts

@@ -0,0 +1,24 @@
+export type IconPackageInfo = {
+    namespace?: string | undefined;
+    version?: string | undefined;
+    homepage?: string | undefined;
+};
+export type BundleConfig = {
+    color?: boolean | undefined;
+};
+export type BundleConfiguration = {
+    package?: IconPackageInfo | undefined;
+    bundles?: {
+        [x: string]: BundleConfig;
+    } | undefined;
+};
+export type IconBuilderOptions = {
+    target: string;
+    prefix: string;
+    color: boolean;
+    package?: IconPackageInfo | undefined;
+};
+export type FolderOptions = {
+    input: string;
+    output: string;
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@rokkit/cli",
+  "version": "1.0.0-next.120",
+  "description": "Command line utilities for icon bundling and conversion.",
+  "author": "Jerry Thomas <me@jerrythomas.name>",
+  "license": "MIT",
+  "bin": {
+    "rokkit-cli": "src/index.js"
+  },
+  "type": "module",
+  "scripts": {
+    "prepublishOnly": "bun clean && bun tsc --project tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "build": "bun prepublishOnly"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "iconify": "^1.4.0",
+    "vitest": "^1.2.0"
+  },
+  "dependencies": {
+    "@mdi/svg": "^7.4.47",
+    "sade": "^1.8.1",
+    "@iconify/tools": "4.0.6",
+    "@iconify/types": "^2.0.0",
+    "ramda": "^0.30.1"
+  },
+  "files": [
+    "lib/**/*",
+    "src/**/*.js",
+    "dist/**/*.d.ts",
+    "README.md",
+    "package.json"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./ui.json": "./lib/base.json",
+    "./light.json": "./lib/light.json",
+    "./solid.json": "./lib/solid.json",
+    "./twotone.json": "./lib/twotone.json",
+    "./components.json": "./lib/components.json",
+    "./auth.json": "./lib/auth.json",
+    "./app.json": "./lib/app.json",
+    ".": "./lib/base.json",
+    "./utils": "./src/convert.js",
+    "./cli": "./src/index.js"
+  }
+}

package/src/convert.js

@@ -0,0 +1,211 @@
+/* eslint-disable no-console */
+import {
+	importDirectory,
+	cleanupSVG,
+	runSVGO,
+	parseColors,
+	isEmptyColor,
+	exportJSONPackage
+} from '@iconify/tools'
+import fs from 'fs'
+import path from 'path'
+import { pick } from 'ramda'
+import './types'
+/**
+ * Clean up and optimise SVG icon
+ *
+ * @param {string} svg SVG code
+ * @param {boolean} color True if color should be preserved
+ */
+export function cleanAndOptimizeIcon(svg, color) {
+	// Clean up icon code
+	cleanupSVG(svg)
+
+	if (!color) {
+		parseColors(svg, {
+			defaultColor: 'currentColor',
+			callback: (_, colorStr, value) => {
+				return !value || isEmptyColor(value) ? colorStr : 'currentColor'
+			}
+		})
+	}
+
+	// Optimise
+	runSVGO(svg)
+}
+
+/**
+ * Process icons
+ *
+ * @param {IconifyTools} iconSet Icon set
+ * @param {boolean} color True if color should be preserved
+ */
+export function processIcons(iconSet, color) {
+	iconSet.forEach((name) => {
+		const svg = iconSet.toSVG(name)
+
+		try {
+			cleanAndOptimizeIcon(svg, color)
+		} catch (err) {
+			console.error(`Error parsing ${name}: ${err.reason}`)
+			iconSet.remove(name)
+			return
+		}
+
+		iconSet.fromSVG(name, svg)
+	})
+}
+
+/**
+ * Convert individual icons into a json bundle
+ *
+ * @param {string} folder Folder with icons
+ * @param {import('./types').IconBuilderOptions} options Options for conversion
+ * @returns {Promise<object>} The generated icon set
+ */
+export async function bundle(folder, options) {
+	const { prefix, color = false, target = '.' } = options
+
+	// Ensure the target directory exists
+	const targetDir = path.resolve(target)
+	if (!fs.existsSync(targetDir)) {
+		fs.mkdirSync(targetDir, { recursive: true })
+	}
+
+	const iconSet = await importDirectory(folder, { prefix })
+
+	// Validate, clean up, fix palette and optimise
+	processIcons(iconSet, color)
+
+	// Export
+	const collection = JSON.stringify(iconSet.export(), null, 2)
+	const outputPath = path.join(targetDir, `${prefix}.json`)
+	fs.writeFileSync(outputPath, collection, 'utf8')
+
+	console.info(`> Bundle created: ${outputPath}`)
+	return iconSet
+}
+
+/**
+ *
+ * @param {*} options
+ * @returns
+ */
+function extractPackageInfo(options) {
+	const namespace = options.package?.namespace
+	// Create package info with sensible defaults
+	return {
+		// Use prefix as package name if no namespace provided
+		name: [namespace, options.prefix].filter(Boolean).join('/'),
+		// Default version is 1.0.0
+		version: options.package?.version || '1.0.0',
+		// Homepage is optional
+		...pick(['homepage'], options.package ?? {})
+	}
+}
+/**
+ * Convert icons to an iconify package
+ *
+ * @param {string} folder Folder with icons
+ * @param {import('./types').IconBuilderOptions} options Options for conversion
+ * @returns {Promise<object>} The generated icon set
+ */
+export async function convert(folder, options) {
+	// First bundle the icons
+	const iconSet = await bundle(folder, options)
+
+	// Create the target directory if it doesn't exist
+	const targetDir = path.resolve(options.target)
+	if (!fs.existsSync(targetDir)) {
+		fs.mkdirSync(targetDir, { recursive: true })
+	}
+
+	// Export as iconify package
+	const packageTarget = path.join(targetDir, iconSet.prefix)
+	await exportJSONPackage(iconSet, {
+		target: packageTarget,
+		package: extractPackageInfo(options),
+		cleanup: true
+	})
+
+	console.info(`> Package created: ${packageTarget}`)
+	return iconSet
+}
+
+/**
+ * Read config file from path
+ *
+ * @param {string} configPath Path to config file
+ * @returns {object} Parsed config object
+ */
+export function readConfigFile(configPath) {
+	try {
+		const configFilePath = path.resolve(configPath)
+		if (fs.existsSync(configFilePath)) {
+			const config = JSON.parse(fs.readFileSync(configFilePath, 'utf8'))
+			return config
+		}
+		console.warn(`Config file not found: ${configFilePath}, using defaults`)
+		return {}
+	} catch (err) {
+		console.error(`Error reading config file: ${err.message}`)
+		return {}
+	}
+}
+
+/**
+ * Get folders from directory
+ *
+ * @param {string} dir Directory to scan for folders
+ * @returns {string[]} List of folder names
+ */
+export function getFolderNames(dir) {
+	try {
+		const dirPath = path.resolve(dir)
+		return fs
+			.readdirSync(dirPath, { withFileTypes: true })
+			.filter((dirent) => dirent.isDirectory())
+			.map((dirent) => dirent.name)
+	} catch (err) {
+		console.error(`Error reading directory: ${err.message}`)
+		return []
+	}
+}
+
+/**
+ * Converts a folder of icons into an icon bundle
+ * @param {string[]} folders
+ * @param {import('./types').IconBuilderOptions} config
+ * @param {import('./types').FolderOptions}      opts
+ */
+export function bundleFolders(folders, config, opts) {
+	for (const folder of folders) {
+		const folderPath = path.join(opts.input, folder)
+		const folderConfig = config.bundles?.[folder] || {}
+
+		bundle(folderPath, {
+			target: opts.output,
+			color: folderConfig.color || false,
+			prefix: folder
+		})
+	}
+}
+/**
+ * Converts a folder of icons into an icon bundle
+ * @param {string[]}                             folders
+ * @param {import('./types').IconBuilderOptions} config
+ * @param {import('./types').FolderOptions}      opts
+ */
+export function convertFolders(folders, config, opts) {
+	for (const folder of folders) {
+		const folderPath = path.join(opts.input, folder)
+		const folderConfig = config.bundles[folder] || {}
+
+		convert(folderPath, {
+			target: opts.output,
+			color: folderConfig.color || false,
+			prefix: folder,
+			package: config.package || {}
+		})
+	}
+}

package/src/index.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+import sade from 'sade'
+import { bundleFolders, convertFolders, readConfigFile, getFolderNames } from './convert.js'
+// import path from 'path'
+import pkg from '../package.json' with { type: 'json' }
+
+const prog = sade(pkg.name)
+
+prog
+	.version(pkg.version)
+	.option('-c, --config', 'Provide path to custom config', 'config.json')
+	.option('-i, --input', 'Specify the source folder', './src')
+	.option('-o, --output', 'Specify the output folder', './lib')
+
+prog
+	.command('bundle')
+	.describe('Bundle icons in the source folder into json files.')
+	.example(`${pkg.name} bundle -i src -o build --config my-conf.json`)
+	.action((opts) => {
+		console.info(`> Bundling from ${opts.input} to ${opts.output}`)
+		// Read the configuration
+		const config = readConfigFile(`${opts.input}/${opts.config}`)
+		// Find folders under input as bundles
+		const folders = getFolderNames(opts.input)
+
+		if (folders.length === 0) {
+			console.warn(`No folders found in ${opts.input}`)
+			return
+		}
+
+		console.info(`> Found folders: ${folders.join(', ')}`)
+		bundleFolders(folders, config, opts)
+		// Process each folder as an icon bundle
+	})
+
+prog
+	.command('build')
+	.describe('Build a complete iconify json package for each icon folder')
+	.example(`${pkg.name} build -i src -o build --config my-conf.json`)
+	.action((opts) => {
+		console.info(`> Building iconify packages from ${opts.input} to ${opts.output}`)
+		const config = readConfigFile(`${opts.input}/${opts.config}`)
+		const folders = getFolderNames(opts.input)
+
+		if (folders.length === 0) {
+			console.warn(`No folders found in ${opts.input}`)
+			return
+		}
+
+		console.info(`> Found folders: ${folders.join(', ')}`)
+		// Process each folder as an icon set
+		convertFolders(folders, config, opts)
+	})
+
+prog.parse(process.argv)

package/src/types.js

@@ -0,0 +1,31 @@
+/**
+ * @typedef {Object} IconPackageInfo
+ * @property {string} [namespace]
+ * @property {string} [version]
+ * @property {string} [homepage]
+ */
+/**
+ * @typedef {Object} BundleConfig
+ * @property {boolean} [color]
+ */
+
+/**
+ * @typedef {Object} BundleConfiguration
+ * @property {IconPackageInfo} [package]
+ * @property {Object<string,BundleConfig} [bundles]
+ */
+
+/**
+ * @typedef {Object} IconBuilderOptions
+ * @property {string} target
+ * @property {string} prefix
+ * @property {boolean} color
+ * @property {IconPackageInfo} [package]
+ */
+
+/**
+ * @typedef {Object} FolderOptions
+ * @property {string} input
+ * @property {string} output
+ */
+export {}