@react-native-styled-system/cli 0.0.5

package/bin/index.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+import { run } from '../dist/index.js';
+
+run().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

package/dist/chunk-2TSYFGEF.js

@@ -0,0 +1,65 @@
+import {
+  extractPropertyKeys
+} from "./chunk-4EHPPKPJ.js";
+import {
+  extractPropertyPaths,
+  printUnionMap
+} from "./chunk-4SAUFT3V.js";
+import {
+  extractSemanticTokenKeys
+} from "./chunk-MSTYDDL5.js";
+import {
+  isObject
+} from "./chunk-U3IUZ4GA.js";
+
+// src/create-theme-typings-interface.ts
+function applyThemeTypingTemplate(typingContent, template) {
+  switch (template) {
+    case "augmentation":
+      return `// regenerate by running
+// npx @chakra-ui/cli tokens path/to/your/theme.(js|ts) --template augmentation --out path/to/this/file 
+import { BaseThemeTypings } from "@chakra-ui/styled-system";
+declare module "@chakra-ui/styled-system" {
+  export interface CustomThemeTypings extends BaseThemeTypings {
+    ${typingContent}
+  }
+}
+`;
+    case "default":
+    default:
+      return `// regenerate by running
+// npx @chakra-ui/cli tokens path/to/your/theme.(js|ts)
+import { BaseThemeTypings } from "./shared.types.js"
+export interface ThemeTypings extends BaseThemeTypings {
+  ${typingContent}
+}
+`;
+  }
+}
+async function createThemeTypingsInterface(theme, { config }) {
+  const unions = config.reduce(
+    (allUnions, { key, maxScanDepth, filter = () => true, flatMap = (value) => value }) => {
+      const target = theme[key];
+      allUnions[key] = [];
+      if (isObject(target) || Array.isArray(target)) {
+        allUnions[key] = extractPropertyPaths(target, maxScanDepth).filter(filter).flatMap(flatMap);
+      }
+      if (isObject(theme.semanticTokens)) {
+        const semanticTokenKeys = extractSemanticTokenKeys(theme, key).filter(filter).flatMap(flatMap);
+        allUnions[key].push(...semanticTokenKeys);
+      }
+      return allUnions;
+    },
+    {}
+  );
+  const typography = extractPropertyKeys(theme, "typography");
+  const typingContent = `${printUnionMap(
+    { ...unions, typography },
+    (targetKey) => targetKey === "conditions"
+  )}`;
+  return applyThemeTypingTemplate(typingContent, "default");
+}
+
+export {
+  createThemeTypingsInterface
+};

package/dist/chunk-43T6TWGS.js

@@ -0,0 +1,46 @@
+import {
+  resolveOutputPath
+} from "./chunk-G4LOGXG4.js";
+import {
+  themeKeyConfiguration
+} from "./chunk-4SXWRGUG.js";
+import {
+  createThemeTypingsInterface
+} from "./chunk-2TSYFGEF.js";
+
+// src/generate-theme-typings.ts
+import { writeFileSync } from "node:fs";
+async function generateThemeTypings({
+  theme,
+  out,
+  onError
+}) {
+  const { default: ora } = await import("ora");
+  const spinner = ora("Generating Theme Typings").start();
+  try {
+    const start = process.hrtime.bigint();
+    const typings = await createThemeTypingsInterface(theme, {
+      config: themeKeyConfiguration
+    });
+    const outPath = await resolveOutputPath(out);
+    spinner.info();
+    spinner.text = `Write file "${outPath}"...`;
+    writeFileSync(outPath, typings, "utf8");
+    const end = process.hrtime.bigint();
+    const duration = (Number(end - start) / 1e9).toFixed(2);
+    spinner.succeed(`Done in ${duration}s`);
+  } catch (e) {
+    spinner.fail("An error occurred");
+    if (e instanceof Error) {
+      console.error(e.message);
+    }
+    spinner.stop();
+    onError?.();
+  } finally {
+    spinner.stop();
+  }
+}
+
+export {
+  generateThemeTypings
+};

package/dist/chunk-4EHPPKPJ.js

@@ -0,0 +1,16 @@
+import {
+  isObject
+} from "./chunk-U3IUZ4GA.js";
+
+// src/extract-property-keys.ts
+function extractPropertyKeys(theme, themePropertyName) {
+  const themeProperty = theme[themePropertyName];
+  if (!isObject(themeProperty)) {
+    return [];
+  }
+  return Object.keys(themeProperty);
+}
+
+export {
+  extractPropertyKeys
+};

package/dist/chunk-4SAUFT3V.js

@@ -0,0 +1,37 @@
+import {
+  printUnionType
+} from "./chunk-CHKLAMB6.js";
+import {
+  isObject
+} from "./chunk-U3IUZ4GA.js";
+
+// src/extract-property-paths.ts
+function printUnionMap(unions, strict = false) {
+  return Object.entries(unions).sort(([a], [b]) => a.localeCompare(b)).map(([targetKey, union]) => {
+    const isStrict = typeof strict === "function" ? strict(targetKey) : strict;
+    return `${targetKey}: ${printUnionType(union, isStrict)};`;
+  }).join("\n");
+}
+function extractPropertyPaths(target, maxDepth = 3) {
+  if (!isObject(target) && !Array.isArray(target) || !maxDepth) {
+    return [];
+  }
+  return Object.entries(target).reduce((allPropertyPaths, [key, value]) => {
+    if (isObject(value)) {
+      extractPropertyPaths(value, maxDepth - 1).forEach(
+        (childKey) => (
+          // e.g. gray.500
+          allPropertyPaths.push(`${key}.${childKey}`)
+        )
+      );
+    } else {
+      allPropertyPaths.push(key);
+    }
+    return allPropertyPaths;
+  }, []);
+}
+
+export {
+  printUnionMap,
+  extractPropertyPaths
+};

package/dist/chunk-4SXWRGUG.js

@@ -0,0 +1,11 @@
+// src/config.ts
+var themeKeyConfiguration = [
+  { key: "colors", maxScanDepth: 3 },
+  { key: "radii" },
+  { key: "sizes", maxScanDepth: 2 },
+  { key: "space", flatMap: (value) => [value, `-${value}`] }
+];
+
+export {
+  themeKeyConfiguration
+};

package/dist/chunk-5IH5T2QU.js

@@ -0,0 +1,17 @@
+import {
+  isObject
+} from "./chunk-U3IUZ4GA.js";
+
+// src/utils/is-color-hue.ts
+var colorHueKeys = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"];
+function isColorHue(value) {
+  if (!isObject(value)) {
+    return false;
+  }
+  const keys = Object.keys(value);
+  return colorHueKeys.every((key) => keys.includes(key));
+}
+
+export {
+  isColorHue
+};

package/dist/chunk-CHKLAMB6.js

@@ -0,0 +1,13 @@
+// src/utils/print-union-type.ts
+var AutoCompleteStringType = "(string & {})";
+var wrapWithQuotes = (value) => `"${value}"`;
+function printUnionType(values, strict = false) {
+  if (!values.length) {
+    return strict ? "never" : AutoCompleteStringType;
+  }
+  return values.map(wrapWithQuotes).concat(strict ? [] : [AutoCompleteStringType]).join(" | ");
+}
+
+export {
+  printUnionType
+};

package/dist/chunk-EP566NIH.js

@@ -0,0 +1,54 @@
+// src/utils/init-cli.ts
+import welcome from "cli-welcome";
+var pkgJSON = {
+  name: "react-native-themed-styled-system-cli",
+  version: "0.0.4",
+  description: "Generate theme typings for autocomplete",
+  type: "module",
+  main: "dist/cjs/index.cjs",
+  module: "dist/esm/index.mjs",
+  types: "dist/types/index.d.ts",
+  scripts: {
+    "build": "rm -rf dist && tsup src --format esm --shims && yarn pack",
+    "check:type": "tsc --noEmit"
+  },
+  dependencies: {
+    "bundle-n-require": "^1.0.1",
+    "chokidar": "^3.5.3",
+    "cli-welcome": "^2.2.2",
+    "commander": "^11.0.0",
+    "ora": "^7.0.1",
+    "prettier": "^3.0.2",
+    "update-notifier": "^6.0.2"
+  },
+  files: ["dist", "bin"],
+  bin: "bin/index.js",
+  devDependencies: {
+    "@types/ora": "^3.2.0",
+    "@types/update-notifier": "6.0.4",
+    "tsup": "^8.0.2",
+    "typescript": "5.2.2"
+  },
+  packageManager: "yarn@4.1.1"
+};
+async function initCLI() {
+  const { default: updateNotifier } = await import("update-notifier");
+  welcome({
+    title: "React Native Styled System CLI",
+    tagLine: "by MJStudio",
+    bgColor: "#319795",
+    color: "#FFFFFF",
+    bold: true,
+    clear: false
+  });
+  updateNotifier({
+    pkg: pkgJSON,
+    shouldNotifyInNpmScript: true,
+    updateCheckInterval: 1e3 * 60 * 60 * 24 * 3
+    // 3 days
+  }).notify({ isGlobal: true, message: "New version of CLI available" });
+}
+
+export {
+  initCLI
+};

package/dist/chunk-G4LOGXG4.js

@@ -0,0 +1,50 @@
+// src/resolve-output-path.ts
+import fs from "node:fs";
+import path from "node:path";
+import { promisify } from "node:util";
+var exists = promisify(fs.exists);
+var themeInterfaceDestination = [
+  "node_modules",
+  "@chakra-ui",
+  "styled-system",
+  "dist",
+  "types",
+  "theming.types.d.ts"
+];
+async function resolveThemingDefinitionPath() {
+  const baseDir = path.join("..", "..", "..");
+  const cwd = process.cwd();
+  const pathsToTry = [
+    path.resolve(baseDir, "..", ...themeInterfaceDestination),
+    path.resolve(baseDir, "..", "..", ...themeInterfaceDestination),
+    path.resolve(cwd, ...themeInterfaceDestination),
+    path.resolve(cwd, "..", ...themeInterfaceDestination),
+    path.resolve(cwd, "..", "..", ...themeInterfaceDestination)
+  ];
+  const triedPaths = await Promise.all(
+    pathsToTry.map(async (possiblePath) => {
+      if (await exists(possiblePath)) {
+        return possiblePath;
+      }
+      return "";
+    })
+  );
+  return triedPaths.find(Boolean);
+}
+async function resolveOutputPath(overridePath) {
+  if (overridePath) {
+    return path.resolve(process.cwd(), overridePath);
+  }
+  const themingDefinitionFilePath = await resolveThemingDefinitionPath();
+  if (!themingDefinitionFilePath) {
+    throw new Error(
+      "Could not find @chakra-ui/styled-system in node_modules. Please provide `--out` parameter."
+    );
+  }
+  return themingDefinitionFilePath;
+}
+
+export {
+  themeInterfaceDestination,
+  resolveOutputPath
+};

package/dist/chunk-MSTYDDL5.js

@@ -0,0 +1,35 @@
+import {
+  isObject
+} from "./chunk-U3IUZ4GA.js";
+
+// src/extract-semantic-token-keys.ts
+var hasSemanticTokens = (theme) => isObject(theme.semanticTokens);
+function extractSemanticTokenKeys(theme, themePropertyName) {
+  if (!hasSemanticTokens(theme)) {
+    return [];
+  }
+  const themeProperty = theme["semanticTokens"][themePropertyName];
+  if (!isObject(themeProperty)) {
+    return [];
+  }
+  return Object.keys(flattenSemanticTokens(themeProperty));
+}
+function flattenSemanticTokens(target) {
+  if (!isObject(target) && !Array.isArray(target)) {
+    return target;
+  }
+  return Object.entries(target).reduce((result, [key, value]) => {
+    if (isObject(value) && !("default" in value) || Array.isArray(value)) {
+      Object.entries(flattenSemanticTokens(value)).forEach(([childKey, childValue]) => {
+        result[`${key}.${childKey}`] = childValue;
+      });
+    } else {
+      result[key] = value;
+    }
+    return result;
+  }, {});
+}
+
+export {
+  extractSemanticTokenKeys
+};

package/dist/chunk-U3IUZ4GA.js

@@ -0,0 +1,9 @@
+// src/utils/is-object.ts
+function isObject(value) {
+  const type = typeof value;
+  return value != null && (type === "object" || type === "function") && !Array.isArray(value);
+}
+
+export {
+  isObject
+};

package/dist/config.js

@@ -0,0 +1,6 @@
+import {
+  themeKeyConfiguration
+} from "./chunk-4SXWRGUG.js";
+export {
+  themeKeyConfiguration
+};

package/dist/create-theme-typings-interface.js

@@ -0,0 +1,11 @@
+import {
+  createThemeTypingsInterface
+} from "./chunk-2TSYFGEF.js";
+import "./chunk-4EHPPKPJ.js";
+import "./chunk-4SAUFT3V.js";
+import "./chunk-CHKLAMB6.js";
+import "./chunk-MSTYDDL5.js";
+import "./chunk-U3IUZ4GA.js";
+export {
+  createThemeTypingsInterface
+};

package/dist/extract-color-schemes.js

@@ -0,0 +1,23 @@
+import {
+  isColorHue
+} from "./chunk-5IH5T2QU.js";
+import {
+  isObject
+} from "./chunk-U3IUZ4GA.js";
+
+// src/extract-color-schemes.ts
+function extractColorSchemeTypes(theme) {
+  const { colors } = theme;
+  if (!isObject(colors)) {
+    return [];
+  }
+  return Object.entries(colors).reduce((acc, [colorName, colorValues]) => {
+    if (isColorHue(colorValues)) {
+      acc.push(colorName);
+    }
+    return acc;
+  }, []);
+}
+export {
+  extractColorSchemeTypes
+};

package/dist/extract-component-types.js

@@ -0,0 +1,45 @@
+import {
+  printUnionMap
+} from "./chunk-4SAUFT3V.js";
+import "./chunk-CHKLAMB6.js";
+import {
+  isObject
+} from "./chunk-U3IUZ4GA.js";
+
+// src/extract-component-types.ts
+function extractComponentTypes(theme) {
+  const components = theme.components;
+  if (!isObject(components)) {
+    return {};
+  }
+  return Object.entries(components).reduce(
+    (allDefs, [componentName, definition]) => {
+      if (definition) {
+        allDefs[componentName] = {
+          sizes: Object.keys(definition.sizes ?? {}),
+          variants: Object.keys(definition.variants ?? {})
+        };
+      }
+      return allDefs;
+    },
+    {}
+  );
+}
+function esc(name) {
+  return name.match(/^[a-zA-Z0-9\-_]+$/) ? name : `"${name}"`;
+}
+function printComponentTypes(componentTypes, strict = false) {
+  const types = Object.entries(componentTypes).map(
+    ([componentName, unions]) => `${esc(componentName)}: {
+  ${printUnionMap(unions, strict)}
+}`
+  ).join("\n");
+  return `components: {
+  ${types}  
+}
+`;
+}
+export {
+  extractComponentTypes,
+  printComponentTypes
+};

package/dist/extract-property-keys.js

@@ -0,0 +1,7 @@
+import {
+  extractPropertyKeys
+} from "./chunk-4EHPPKPJ.js";
+import "./chunk-U3IUZ4GA.js";
+export {
+  extractPropertyKeys
+};

package/dist/extract-property-paths.js

@@ -0,0 +1,10 @@
+import {
+  extractPropertyPaths,
+  printUnionMap
+} from "./chunk-4SAUFT3V.js";
+import "./chunk-CHKLAMB6.js";
+import "./chunk-U3IUZ4GA.js";
+export {
+  extractPropertyPaths,
+  printUnionMap
+};

package/dist/extract-semantic-token-keys.js

@@ -0,0 +1,7 @@
+import {
+  extractSemanticTokenKeys
+} from "./chunk-MSTYDDL5.js";
+import "./chunk-U3IUZ4GA.js";
+export {
+  extractSemanticTokenKeys
+};

package/dist/generate-theme-typings.js

@@ -0,0 +1,17 @@
+import {
+  generateThemeTypings
+} from "./chunk-43T6TWGS.js";
+import {
+  themeInterfaceDestination
+} from "./chunk-G4LOGXG4.js";
+import "./chunk-4SXWRGUG.js";
+import "./chunk-2TSYFGEF.js";
+import "./chunk-4EHPPKPJ.js";
+import "./chunk-4SAUFT3V.js";
+import "./chunk-CHKLAMB6.js";
+import "./chunk-MSTYDDL5.js";
+import "./chunk-U3IUZ4GA.js";
+export {
+  generateThemeTypings,
+  themeInterfaceDestination
+};

package/dist/index.js

@@ -0,0 +1,43 @@
+import {
+  initCLI
+} from "./chunk-EP566NIH.js";
+import {
+  generateThemeTypings
+} from "./chunk-43T6TWGS.js";
+import "./chunk-G4LOGXG4.js";
+import "./chunk-4SXWRGUG.js";
+import "./chunk-2TSYFGEF.js";
+import "./chunk-4EHPPKPJ.js";
+import "./chunk-4SAUFT3V.js";
+import "./chunk-CHKLAMB6.js";
+import "./chunk-MSTYDDL5.js";
+import "./chunk-U3IUZ4GA.js";
+
+// src/index.ts
+import { bundleNRequire } from "bundle-n-require";
+import { program } from "commander";
+import { resolve } from "node:path/posix";
+async function run() {
+  await initCLI();
+  program.command("generate <source>").option("--out <path>").option("--no-format", "Disable auto formatting").action(async (themeFile, options) => {
+    const { out } = options;
+    const read = async () => {
+      const filePath = resolve(themeFile);
+      const { mod, dependencies } = await bundleNRequire(filePath);
+      const theme = mod.default || mod.theme || mod;
+      return { theme, dependencies };
+    };
+    const ctx = await read();
+    const build = async () => {
+      await generateThemeTypings({
+        theme: ctx.theme,
+        out
+      });
+    };
+    await build();
+  });
+  program.parse();
+}
+export {
+  run
+};

package/dist/resolve-output-path.js

@@ -0,0 +1,8 @@
+import {
+  resolveOutputPath,
+  themeInterfaceDestination
+} from "./chunk-G4LOGXG4.js";
+export {
+  resolveOutputPath,
+  themeInterfaceDestination
+};

package/dist/utils/format-with-prettier.js

@@ -0,0 +1,16 @@
+// src/utils/format-with-prettier.ts
+import { format, resolveConfig } from "prettier";
+async function formatWithPrettier(content) {
+  const prettierConfig = await resolveConfig(process.cwd());
+  try {
+    return await format(String(content), {
+      ...prettierConfig,
+      parser: "typescript"
+    });
+  } catch {
+    return String(content);
+  }
+}
+export {
+  formatWithPrettier
+};

package/dist/utils/init-cli.js

@@ -0,0 +1,6 @@
+import {
+  initCLI
+} from "../chunk-EP566NIH.js";
+export {
+  initCLI
+};

package/dist/utils/is-color-hue.js

@@ -0,0 +1,7 @@
+import {
+  isColorHue
+} from "../chunk-5IH5T2QU.js";
+import "../chunk-U3IUZ4GA.js";
+export {
+  isColorHue
+};

package/dist/utils/is-object.js

@@ -0,0 +1,6 @@
+import {
+  isObject
+} from "../chunk-U3IUZ4GA.js";
+export {
+  isObject
+};

package/dist/utils/print-union-type.js

@@ -0,0 +1,6 @@
+import {
+  printUnionType
+} from "../chunk-CHKLAMB6.js";
+export {
+  printUnionType
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@react-native-styled-system/cli",
+  "version": "0.0.5",
+  "description": "Generate theme typings for autocomplete",
+  "type": "module",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "scripts": {
+    "build": "rm -rf dist && tsup src --format esm --shims"
+  },
+  "dependencies": {
+    "bundle-n-require": "^1.0.1",
+    "chokidar": "^3.5.3",
+    "cli-welcome": "^2.2.2",
+    "commander": "^11.0.0",
+    "ora": "^7.0.1",
+    "prettier": "^3.0.2",
+    "update-notifier": "^6.0.2"
+  },
+  "files": [
+    "dist",
+    "bin"
+  ],
+  "bin": "bin/index.js",
+  "devDependencies": {
+    "@types/ora": "^3.2.0",
+    "@types/update-notifier": "6.0.4",
+    "tsup": "^8.0.2",
+    "typescript": "*"
+  },
+  "gitHead": "7c09f0fe9584d8280bdfd1f39f89525133e9a65e"
+}