rxn-ui 0.5.3 → 0.5.5

package/cli/add.js

@@ -0,0 +1,73 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+import { cwd, STYLES_FILES, getRegistryUrl } from './constants.js'
+import { loadConfig } from './utils/config.js'
+import { fetchFile, fetchJSON } from './utils/fetch.js'
+import { getSourceUrl } from './utils/getSourceUrl.js'
+import { log } from './utils/logger.js'
+
+export async function add(name, cmdOptions = {}) {
+  const config = loadConfig()
+  if (!config) {
+    log.error('Not initialized. Run: npx rxn-ui init')
+    process.exit(1)
+  }
+
+  const tag = cmdOptions.tag || null
+  const registryUrl = getRegistryUrl(tag)
+
+  let registry
+  try {
+    registry = await fetchJSON(registryUrl)
+  } catch (err) {
+    log.error(`Failed to fetch registry: ${err.message}`)
+    process.exit(1)
+  }
+
+  const entry = registry[name]
+  if (!entry) {
+    log.error(`Component "${name}" not found`)
+    log.info(`Available components: ${Object.keys(registry).join(', ')}`)
+    process.exit(1)
+  }
+
+  const type = name.startsWith('use-') ? 'composables' : 'components'
+  const itemsToDownload = [
+    { type, name, files: entry.files, dir: config[type] },
+    { type: 'styles', name: null, files: STYLES_FILES, dir: config.styles },
+  ]
+
+  log.bold(`\nAdding ${name}...`)
+
+  for (const item of itemsToDownload) {
+    const destDir = path.join(cwd, item.dir)
+    fs.mkdirSync(destDir, { recursive: true })
+    await downloadItems({ type: item.type, name: item.name, files: item.files, tag, destDir })
+  }
+
+  if (entry.imports) {
+    log.bold(`\nUsage:`)
+    for (const imp of entry.imports) {
+      log(`  ${imp}`)
+    }
+  }
+}
+
+async function downloadItems({ type, name, files, tag, destDir }) {
+  log.bold(`\nAdding ${type}...`)
+  for (const file of files) {
+    const url = getSourceUrl(type, name, file, tag)
+    const destDirNested = name ? path.join(destDir, name) : destDir
+    const destPath = path.join(destDirNested, file)
+
+    try {
+      const content = await fetchFile(url)
+      fs.mkdirSync(destDirNested, { recursive: true })
+      fs.writeFileSync(destPath, content)
+      log.success(`Added ${path.relative(cwd, destPath)}`)
+    } catch (err) {
+      log.error(`Failed to download ${file}: ${err.message}`)
+    }
+  }
+}

package/cli/constants.js

@@ -0,0 +1,11 @@
+import process from 'node:process'
+
+export const GITHUB_REPO = 'r2-h/artharexian-ui'
+export const GITHUB_RAW = `https://raw.githubusercontent.com/${GITHUB_REPO}/main`
+
+export const cwd = process.env.INIT_CWD || process.cwd()
+export const STYLES_FILES = ['style.css', 'variables.css']
+
+export function getRegistryUrl(tag) {
+  return tag ? `${GITHUB_RAW}/cli/registry.json?ref=${tag}` : `${GITHUB_RAW}/cli/registry.json`
+}

package/cli/index.mjs

@@ -1,257 +1,13 @@
 #!/usr/bin/env node
 
-import fs from 'node:fs'
-import path from 'node:path'
 import process from 'node:process'
 
-import { detectProject, loadConfig, saveConfig } from './utils/config.js'
-import { fetchFile, fetchJSON } from './utils/fetch.js'
-import { colors, error, info, log, success } from './utils/logger.js'
-
-// GitHub repository info
-const GITHUB_REPO = 'r2-h/artharexian-ui'
-const GITHUB_RAW = `https://raw.githubusercontent.com/${GITHUB_REPO}/main`
-
-const cwd = process.env.INIT_CWD || process.cwd()
-
-const STYLES_FILES = ['style.css', 'variables.css']
-
-function getRegistryUrl(tag) {
-  return tag ? `${GITHUB_RAW}/cli/registry.json?ref=${tag}` : `${GITHUB_RAW}/cli/registry.json`
-}
-
-function getComponentFileUrl(component, file, tag) {
-  if (tag) {
-    return `${GITHUB_RAW}/src/components/${component}/${file}?ref=${tag}`
-  }
-  return `${GITHUB_RAW}/src/components/${component}/${file}`
-}
-
-function getStyleFileUrl(file, tag) {
-  if (tag) {
-    return `${GITHUB_RAW}/src/styles/${file}?ref=${tag}`
-  }
-  return `${GITHUB_RAW}/src/styles/${file}`
-}
-
-async function init(cmdOptions = {}) {
-  const configPath = path.join(cwd, 'rxn-ui.json')
-
-  if (fs.existsSync(configPath) && !cmdOptions.overwrite) {
-    const existing = loadConfig()
-    info(`Already initialized at ${configPath}`)
-    info(`Components: ${existing.components}`)
-    info(`Styles: ${existing.styles}`)
-    log('\nTo reinitialize, run: npx rxn-ui init --overwrite')
-    return
-  }
-
-  const config = detectProject()
-
-  if (cmdOptions.components) {
-    config.components = cmdOptions.components
-  }
-  if (cmdOptions.styles) {
-    config.styles = cmdOptions.styles
-  }
-
-  saveConfig(config)
-  success('rxn-ui initialized')
-  log(`\nConfiguration saved to ${configPath}`)
-  log(`  Components: ${config.components}`)
-  log(`  Styles: ${config.styles}`)
-  log(`\nNow you can add components:`)
-  log(`  npx rxn-ui add button-base`)
-}
-
-async function add(name, cmdOptions = {}) {
-  const config = loadConfig()
-  if (!config) {
-    error('Not initialized. Run: npx rxn-ui init')
-    process.exit(1)
-  }
-
-  const tag = cmdOptions.tag || null
-  const registryUrl = getRegistryUrl(tag)
-
-  let registry
-  try {
-    registry = await fetchJSON(registryUrl)
-  } catch (err) {
-    error(`Failed to fetch registry: ${err.message}`)
-    process.exit(1)
-  }
-
-  const entry = registry[name]
-  if (!entry) {
-    error(`Component "${name}" not found`)
-    info(`Available components: ${Object.keys(registry).join(', ')}`)
-    process.exit(1)
-  }
-
-  const componentsDir = path.join(cwd, config.components)
-  const stylesDir = path.join(cwd, config.styles)
-
-  fs.mkdirSync(componentsDir, { recursive: true })
-  fs.mkdirSync(stylesDir, { recursive: true })
-
-  log(`\n${colors.bold}Adding ${name}...${colors.reset}`)
-
-  for (const file of entry.files) {
-    const url = getComponentFileUrl(name, file, tag)
-    const destDir = path.join(componentsDir, name)
-    const destPath = path.join(destDir, file)
-
-    try {
-      const content = await fetchFile(url)
-      fs.mkdirSync(destDir, { recursive: true })
-      fs.writeFileSync(destPath, content)
-      success(`Added ${path.relative(cwd, destPath)}`)
-    } catch (err) {
-      error(`Failed to download ${file}: ${err.message}`)
-    }
-  }
-
-  await downloadStyles(stylesDir, tag)
-  showDependencies(entry)
-
-  success(`${name} added successfully`)
-
-  if (entry.imports) {
-    log(`\n${colors.bold}Usage:${colors.reset}`)
-    for (const imp of entry.imports) {
-      log(`  ${imp}`)
-    }
-  }
-}
-
-async function downloadStyles(stylesDir, tag) {
-  const existingStyles = fs.existsSync(stylesDir)
-    ? fs.readdirSync(stylesDir).filter((f) => f.endsWith('.css'))
-    : []
-
-  const stylesToDownload = STYLES_FILES.filter((s) => !existingStyles.includes(s))
-
-  if (stylesToDownload.length === 0) {
-    info('Styles already exist, skipping...')
-    return
-  }
-
-  log(`\n${colors.bold}Adding styles...${colors.reset}`)
-  for (const styleFile of stylesToDownload) {
-    const url = getStyleFileUrl(styleFile, tag)
-    const destPath = path.join(stylesDir, styleFile)
-
-    try {
-      const content = await fetchFile(url)
-      fs.mkdirSync(stylesDir, { recursive: true })
-      fs.writeFileSync(destPath, content)
-      success(`Added ${path.relative(cwd, destPath)}`)
-    } catch (err) {
-      error(`Failed to download ${styleFile}: ${err.message}`)
-    }
-  }
-}
-
-function showDependencies(entry) {
-  if (!entry.dependencies || entry.dependencies.length === 0) {
-    return
-  }
-
-  log(`\n${colors.bold}Installing dependencies...${colors.reset}`)
-  info(`Packages: ${entry.dependencies.join(', ')}`)
-
-  const isPnpm = fs.existsSync(path.join(cwd, 'pnpm-lock.yaml'))
-  const isYarn = fs.existsSync(path.join(cwd, 'yarn.lock'))
-  const isBun =
-    fs.existsSync(path.join(cwd, 'bun.lock')) || fs.existsSync(path.join(cwd, 'bun.lockb'))
-
-  let installCmd = 'npm install'
-  if (isPnpm) installCmd = 'pnpm add'
-  else if (isYarn) installCmd = 'yarn add'
-  else if (isBun) installCmd = 'bun add'
-
-  log(`\nRun this command to install dependencies:`)
-  log(`  ${installCmd} ${entry.dependencies.join(' ')}`)
-}
-
-async function list(cmdOptions = {}) {
-  const tag = cmdOptions.tag || null
-  const registryUrl = getRegistryUrl(tag)
-
-  let registry
-  try {
-    registry = await fetchJSON(registryUrl)
-  } catch (err) {
-    error(`Failed to fetch registry: ${err.message}`)
-    process.exit(1)
-  }
-
-  log(`\n${colors.bold}Available components:${colors.reset}\n`)
-
-  const names = Object.keys(registry).sort()
-  const maxLen = Math.max(...names.map((n) => n.length))
-
-  for (const name of names) {
-    const entry = registry[name]
-    const desc = entry.description || ''
-    const padded = name.padEnd(maxLen)
-    log(`  ${colors.blue}${padded}${colors.reset}  ${desc}`)
-  }
-
-  log(`\nTo add a component: npx rxn-ui add <name>`)
-}
-
-function showHelp() {
-  log(`
-${colors.bold}rxn-ui${colors.reset} - Vue 3 UI components
-
-${colors.bold}Usage:${colors.reset}
-  npx rxn-ui <command> [options]
-
-${colors.bold}Commands:${colors.reset}
-  init              Initialize rxn-ui in your project
-  add <component>   Add a component to your project
-  list              List available components
-  help              Show this help message
-
-${colors.bold}Options:${colors.reset}
-  --tag <version>   Use a specific version from GitHub
-  --overwrite       Overwrite existing config (for init)
-  --components <path>  Custom components directory
-  --styles <path>   Custom styles directory
-
-${colors.bold}Examples:${colors.reset}
-  npx rxn-ui init
-  npx rxn-ui add button-base
-  npx rxn-ui add card-base --tag v0.4.6
-  npx rxn-ui list
-`)
-}
-
-function parseArgs(args) {
-  const cmd = args[0]
-  const options = {}
-  const positional = []
-
-  for (let i = 1; i < args.length; i++) {
-    const arg = args[i]
-    if (arg.startsWith('--')) {
-      const key = arg.slice(2)
-      const value = args[i + 1]
-      if (value && !value.startsWith('--')) {
-        options[key] = value
-        i++
-      } else {
-        options[key] = true
-      }
-    } else {
-      positional.push(arg)
-    }
-  }
-
-  return { cmd, options, positional }
-}
+import { add } from './add.js'
+import { init } from './init.js'
+import { list } from './list.js'
+import { showHelp } from './showHelp.js'
+import { log } from './utils/logger.js'
+import { parseArgs } from './utils/parseArgs.js'
 
 async function main() {
   const args = process.argv.slice(2)
@@ -263,7 +19,7 @@ async function main() {
       break
     case 'add':
       if (!positional[0]) {
-        error('Please specify a component name')
+        log.error('Please specify a component name')
         log('Usage: npx rxn-ui add <component>')
         process.exit(1)
       }
@@ -281,7 +37,7 @@ async function main() {
       if (!cmd) {
         showHelp()
       } else {
-        error(`Unknown command: ${cmd}`)
+        log.error(`Unknown command: ${cmd}`)
         log('Run "npx rxn-ui help" for usage')
         process.exit(1)
       }
@@ -289,6 +45,6 @@ async function main() {
 }
 
 main().catch((err) => {
-  error(err.message)
+  log.error(err.message)
   process.exit(1)
 })

package/cli/init.js

@@ -0,0 +1,42 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+import { cwd } from './constants.js'
+import { detectProject, loadConfig, saveConfig } from './utils/config.js'
+import { log } from './utils/logger.js'
+
+export async function init(cmdOptions = {}) {
+  const configPath = path.join(cwd, 'rxn-ui.json')
+
+  if (fs.existsSync(configPath) && !cmdOptions.overwrite) {
+    const existing = loadConfig()
+    log.info(`
+Already initialized at ${configPath}
+Components: ${existing.components}
+Styles: ${existing.styles}`)
+    log('\nTo reinitialize, run: npx rxn-ui init --overwrite')
+    return
+  }
+
+  const config = detectProject()
+
+  if (cmdOptions.components) {
+    config.components = cmdOptions.components
+  }
+  if (cmdOptions.styles) {
+    config.styles = cmdOptions.styles
+  }
+  if (cmdOptions.composables) {
+    config.composables = cmdOptions.composables
+  }
+
+  saveConfig(config)
+  log.success('rxn-ui initialized')
+  log(`\n
+Configuration saved to ${configPath}
+  Components: ${config.components}
+  Styles: ${config.styles}
+  Composables: ${config.composables}\n
+Now you can add components:
+  npx rxn-ui add button-base`)
+}

package/cli/list.js

@@ -0,0 +1,30 @@
+import { getRegistryUrl } from './constants.js'
+import { fetchJSON } from './utils/fetch.js'
+import { log } from './utils/logger.js'
+
+export async function list(cmdOptions = {}) {
+  const tag = cmdOptions.tag || null
+  const registryUrl = getRegistryUrl(tag)
+
+  let registry
+  try {
+    registry = await fetchJSON(registryUrl)
+  } catch (err) {
+    log.error(`Failed to fetch registry: ${err.message}`)
+    process.exit(1)
+  }
+
+  log(`\nAvailable components:\n`)
+
+  const names = Object.keys(registry).sort()
+  const maxLen = Math.max(...names.map((n) => n.length))
+
+  for (const name of names) {
+    const entry = registry[name]
+    const desc = entry.description || ''
+    const padded = name.padEnd(maxLen)
+    log(`  ${padded}  ${desc}`)
+  }
+
+  log(`\nTo add a component: npx rxn-ui add <name>`)
+}

package/cli/registry.json

@@ -1,14 +1,9 @@
 {
   "button-base": {
     "description": "Accessible button primitive",
-    "files": [
-      "ButtonBase.vue",
-      "types.ts"
-    ],
+    "files": ["ButtonBase.vue", "types.ts"],
     "dependencies": [],
-    "imports": [
-      "import { ButtonBase } from '@/components/button-base'"
-    ]
+    "imports": ["import { ButtonBase } from '@/components/button-base'"]
   },
   "card-base": {
     "description": "Card container components",
@@ -27,46 +22,27 @@
   },
   "checkbox-base": {
     "description": "Checkbox input primitive",
-    "files": [
-      "CheckboxBase.vue"
-    ],
+    "files": ["CheckboxBase.vue"],
     "dependencies": [],
-    "imports": [
-      "import { CheckboxBase } from '@/components/checkbox-base'"
-    ]
+    "imports": ["import { CheckboxBase } from '@/components/checkbox-base'"]
   },
   "input-base": {
     "description": "Text input primitive",
-    "files": [
-      "InputBase.vue",
-      "types.ts"
-    ],
+    "files": ["InputBase.vue", "types.ts"],
     "dependencies": [],
-    "imports": [
-      "import { InputBase } from '@/components/input-base'"
-    ]
+    "imports": ["import { InputBase } from '@/components/input-base'"]
   },
   "range-base": {
     "description": "Range slider primitive",
-    "files": [
-      "RangeBase.vue",
-      "RangeOutput.vue",
-      "types.ts"
-    ],
+    "files": ["RangeBase.vue", "RangeOutput.vue", "types.ts"],
     "dependencies": [],
-    "imports": [
-      "import { RangeBase, RangeOutput } from '@/components/range-base'"
-    ]
+    "imports": ["import { RangeBase, RangeOutput } from '@/components/range-base'"]
   },
   "switch-base": {
     "description": "Toggle switch primitive",
-    "files": [
-      "SwitchBase.vue"
-    ],
+    "files": ["SwitchBase.vue"],
     "dependencies": [],
-    "imports": [
-      "import { SwitchBase } from '@/components/switch-base'"
-    ]
+    "imports": ["import { SwitchBase } from '@/components/switch-base'"]
   },
   "tabs": {
     "description": "Tab navigation components",
@@ -84,14 +60,10 @@
       "import { TabsBase, TabsList, TabsTab, TabsIndicator, TabsPanel } from '@/components/tabs'"
     ]
   },
-  "theme-toggle": {
-    "description": "Dark/light theme toggle button",
-    "files": [
-      "ThemeToggle.vue"
-    ],
+  "use-theme": {
+    "description": "Composable theme switcher",
+    "files": ["useTheme.ts"],
     "dependencies": [],
-    "imports": [
-      "import { ThemeToggle } from '@/components/theme-toggle'"
-    ]
+    "imports": ["import { useTheme } from '@/composables/useTheme'"]
   }
 }

package/cli/showHelp.js

@@ -0,0 +1,29 @@
+import { colors, log } from './utils/logger.js'
+
+export function showHelp() {
+  log(`
+${colors.bold}rxn-ui${colors.reset} - Vue 3 UI components
+
+${colors.bold}Usage:${colors.reset}
+  npx rxn-ui <command> [options]
+
+${colors.bold}Commands:${colors.reset}
+  init              Initialize rxn-ui in your project
+  add <component>   Add a component to your project
+  list              List available components
+  help              Show this help message
+
+${colors.bold}Options:${colors.reset}
+  --tag <version>      Use a specific version from GitHub
+  --overwrite          Overwrite existing config (for init)
+  --components <path>  Custom components directory
+  --styles <path>      Custom styles directory
+  --composables <path> Custom composables directory
+
+${colors.bold}Examples:${colors.reset}
+  npx rxn-ui init
+  npx rxn-ui add button-base
+  npx rxn-ui add card-base --tag v0.4.6
+  npx rxn-ui list
+`)
+}

package/cli/utils/config.js

@@ -21,5 +21,6 @@ export function detectProject() {
   return {
     components: hasSrc ? 'src/shared/components' : 'components',
     styles: hasSrc ? 'src/app/styles' : 'styles',
+    composables: hasSrc ? 'src/shared/composables' : 'composables',
   }
 }

package/cli/utils/getSourceUrl.js

@@ -0,0 +1,11 @@
+import { GITHUB_RAW } from '../constants.js'
+
+export function getSourceUrl(type, name, file, tag) {
+  const ref = tag ? `?ref=${tag}` : ''
+  const paths = {
+    components: `/src/components/${name}/${file}`,
+    composables: `/src/composables/${name}/${file}`,
+    styles: `/src/styles/${file}`,
+  }
+  return `${GITHUB_RAW}${paths[type]}${ref}`
+}

package/cli/utils/logger.js

@@ -1,25 +1,17 @@
 // ANSI color codes
 export const colors = {
   reset: '\x1b[0m',
-  bold: '\x1b[1m',
   green: '\x1b[32m',
-  yellow: '\x1b[33m',
   blue: '\x1b[34m',
   red: '\x1b[31m',
+  bold: '\x1b[1m',
 }
 
 export function log(message, color = colors.reset) {
   console.log(`${color}${message}${colors.reset}`)
 }
 
-export function error(message) {
-  console.error(`${colors.red}✖ ${message}${colors.reset}`)
-}
-
-export function success(message) {
-  log(`✔ ${message}`, colors.green)
-}
-
-export function info(message) {
-  log(`ℹ ${message}`, colors.blue)
-}
+log.error = (message) => console.error(`${colors.red}✖ ${message}${colors.reset}`)
+log.info = (message) => console.info(`${colors.blue}ℹ ${message}${colors.reset}`)
+log.success = (message) => log(`✔ ${message}`, colors.green)
+log.bold = (message) => console.log(`${colors.bold}${message}${colors.reset}`)

package/cli/utils/parseArgs.js

@@ -0,0 +1,23 @@
+export function parseArgs(args) {
+  const cmd = args[0]
+  const options = {}
+  const positional = []
+
+  for (let i = 1; i < args.length; i++) {
+    const arg = args[i]
+    if (arg.startsWith('--')) {
+      const key = arg.slice(2)
+      const value = args[i + 1]
+      if (value && !value.startsWith('--')) {
+        options[key] = value
+        i++
+      } else {
+        options[key] = true
+      }
+    } else {
+      positional.push(arg)
+    }
+  }
+
+  return { cmd, options, positional }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rxn-ui",
   "description": "Vue 3 UI component library",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "license": "MIT",
   "private": false,
   "type": "module",