rxn-ui 0.6.0 → 0.6.2

package/cli/add.js

@@ -1,79 +1,132 @@
-import fs from 'node:fs'
-import path from 'node:path'
-
-import { STYLES_FILES, cwd, 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(componentName, 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[componentName]
-  if (!entry) {
-    log.error(`Component "${componentName}" not found`)
-    log.info(`Available components: ${Object.keys(registry).join(', ')}`)
-    process.exit(1)
-  }
-
-  // Если файлов больше одного — скачиваем в папку с именем компонента
-  const isMultipleFiles = entry.files.length > 1
-  const destDir = isMultipleFiles
-    ? path.join(cwd, config[entry.type], componentName)
-    : path.join(cwd, config[entry.type])
-
-  log.bold(`\nAdding ${componentName}...`)
-
-  // Скачиваем файлы компонента
-  await downloadItems({
-    type: entry.type,
-    componentName: isMultipleFiles ? componentName : null,
-    files: entry.files,
-    tag,
-    destDir,
-  })
-
-  // Скачиваем стили
-  const stylesDir = path.join(cwd, config.styles)
-  await downloadItems({
-    type: 'styles',
-    componentName: null,
-    files: STYLES_FILES,
-    tag,
-    destDir: stylesDir,
-  })
-}
-
-async function downloadItems({ type, componentName, files, tag, destDir }) {
-  log.bold(`\nAdding ${type}...`)
-  fs.mkdirSync(destDir, { recursive: true })
-
-  for (const file of files) {
-    const url = getSourceUrl(type, componentName, file, tag)
-    const destPath = path.join(destDir, file)
-
-    try {
-      const content = await fetchFile(url)
-      fs.writeFileSync(destPath, content)
-      log.success(`Added ${path.relative(cwd, destPath)}`)
-    } catch (err) {
-      log.error(`Failed to download ${file}: ${err.message}`)
-    }
-  }
-}
+import fs from 'node:fs'
+import path from 'node:path'
+
+import { cwd, 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'
+
+// Patterns to detect and rewrite import paths
+const IMPORT_PATTERNS = [
+  { type: 'assets', regex: /\.\.\/\.\.\/assets\//g },
+  { type: 'composables', regex: /\.\.\/\.\.\/composables\//g },
+  { type: 'utils', regex: /\.\.\/\.\.\/utils\//g },
+]
+
+export async function add(componentName, cmdOptions = {}) {
+  const config = loadConfig()
+  if (!config) {
+    log.error('Not initialized. Run: npx rxn-ui init')
+    process.exit(1)
+  }
+
+  const registryUrl = getRegistryUrl()
+
+  let registry
+  try {
+    registry = await fetchJSON(registryUrl)
+  } catch (err) {
+    log.error(`Failed to fetch registry: ${err.message}`)
+    process.exit(1)
+  }
+
+  const entry = registry[componentName]
+  if (!entry) {
+    log.error(`Component "${componentName}" not found`)
+    log.info(`Available components: ${Object.keys(registry).join(', ')}`)
+    process.exit(1)
+  }
+
+  // Если файлов больше одного — скачиваем в папку с именем компонента
+  const isMultipleFiles = entry.files.length > 1
+  const destDir = isMultipleFiles
+    ? path.join(cwd, config[entry.type], componentName)
+    : path.join(cwd, config[entry.type])
+
+  log.bold(`\nAdding ${componentName}...`)
+
+  // Скачиваем зависимости (assets, composables, utils)
+  const depDirs = await downloadDependencies(entry, config)
+
+  // Скачиваем файлы компонента
+  await downloadItems({
+    type: entry.type,
+    componentName,
+    files: entry.files,
+    destDir,
+  })
+
+  // Переписываем импорты в файлах компонента
+  rewriteImports(entry.files, destDir, depDirs, isMultipleFiles)
+}
+
+async function downloadDependencies(entry, config) {
+  const deps = entry.dependencies
+  if (!deps) return {}
+
+  const depDirs = {}
+
+  for (const [type, files] of Object.entries(deps)) {
+    const destDir = path.join(cwd, config[type])
+    depDirs[type] = destDir
+
+    await downloadItems({
+      type,
+      componentName: null,
+      files,
+      destDir,
+    })
+  }
+
+  return depDirs
+}
+
+function rewriteImports(files, destDir, depDirs, isMultipleFiles) {
+  for (const file of files) {
+    const filePath = path.join(destDir, file)
+    if (!fs.existsSync(filePath)) continue
+
+    let content = fs.readFileSync(filePath, 'utf8')
+
+    for (const { type, regex } of IMPORT_PATTERNS) {
+      if (!depDirs[type]) continue
+      if (!regex.test(content)) continue
+
+      // Reset regex lastIndex
+      regex.lastIndex = 0
+
+      // Calculate relative path from component file to dependency dir
+      const fileDir = isMultipleFiles ? destDir : path.dirname(filePath)
+      const relPath = path.relative(fileDir, depDirs[type]).replace(/\\/g, '/')
+      const importPath = relPath.startsWith('.') ? relPath : `./${relPath}`
+
+      content = content.replace(regex, `${importPath}/`)
+    }
+
+    fs.writeFileSync(filePath, content)
+  }
+}
+
+export async function downloadItems({ type, componentName, files, destDir }) {
+  log.bold(`\nAdding ${type}...`)
+  fs.mkdirSync(destDir, { recursive: true })
+
+  for (const file of files) {
+    const url = getSourceUrl(type, componentName, file)
+    const destPath = path.join(destDir, file)
+
+    if (fs.existsSync(destPath)) {
+      log.info(`Skipping ${path.relative(cwd, destPath)} (already exists)`)
+      continue
+    }
+
+    try {
+      const content = await fetchFile(url)
+      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

@@ -1,11 +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`
-}
+import process from 'node:process'
+
+export const GITHUB_REPO = 'r2-h/rxn-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() {
+  return `${GITHUB_RAW}/cli/registry.json`
+}

package/cli/init.js

@@ -1,20 +1,45 @@
 import fs from 'node:fs'
 import path from 'node:path'
 
-import { cwd } from './constants.js'
+import { STYLES_FILES, GITHUB_RAW, cwd } from './constants.js'
 import { detectProject, loadConfig, saveConfig } from './utils/config.js'
+import { downloadItems } from './add.js'
+import { fetchFile } from './utils/fetch.js'
 import { log } from './utils/logger.js'
 
+async function downloadStyles(stylesDir) {
+  log.bold('\nAdding styles...')
+  fs.mkdirSync(stylesDir, { recursive: true })
+
+  for (const file of STYLES_FILES) {
+    const url = `${GITHUB_RAW}/src/styles/${file}`
+    const destPath = path.join(stylesDir, file)
+
+    if (fs.existsSync(destPath)) {
+      log.info(`Skipping ${path.relative(cwd, destPath)} (already exists)`)
+      continue
+    }
+
+    try {
+      const content = await fetchFile(url)
+      fs.writeFileSync(destPath, content)
+      log.success(`Added ${path.relative(cwd, destPath)}`)
+    } catch (err) {
+      log.error(`Failed to download ${file}: ${err.message}`)
+    }
+  }
+}
+
 export async function init(cmdOptions = {}) {
   const configPath = path.join(cwd, 'rxn-ui.json')
 
-  if (fs.existsSync(configPath) && !cmdOptions.overwrite) {
+  if (fs.existsSync(configPath)) {
     const existing = loadConfig()
     log.info(`
 Already initialized at ${configPath}
 Components: ${existing.components}
-Styles: ${existing.styles}`)
-    log('\nTo reinitialize, run: npx rxn-ui init --overwrite')
+Styles: ${existing.styles}
+Assets: ${existing.assets}`)
     return
   }
 
@@ -25,18 +50,36 @@ Styles: ${existing.styles}`)
   }
   if (cmdOptions.styles) {
     config.styles = cmdOptions.styles
+  } else {
+    config.styles = 'styles'
   }
   if (cmdOptions.composables) {
     config.composables = cmdOptions.composables
   }
 
+  // Check if styles dir exists, use 'rxn-styles' prefix to avoid conflicts
+  const stylesPath = path.join(cwd, config.styles)
+  if (fs.existsSync(stylesPath)) {
+    const base = path.basename(config.styles)
+    const dir = path.dirname(config.styles)
+    config.styles = path.join(dir, `rxn-${base}`)
+    log.info(`Styles directory "${config.styles}" (prefixed to avoid conflict)`)
+  }
+
   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:
+  Composables: ${config.composables}
+  Assets: ${config.assets}
+  Utils: ${config.utils}`)
+
+  // Download styles
+  const stylesDir = path.join(cwd, config.styles)
+  await downloadStyles(stylesDir)
+
+  log(`\nNow you can add components:
   npx rxn-ui add button-base`)
 }

package/cli/list.js

@@ -3,12 +3,9 @@ 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)
+    registry = await fetchJSON(getRegistryUrl())
   } catch (err) {
     log.error(`Failed to fetch registry: ${err.message}`)
     process.exit(1)

package/cli/registry.json

@@ -16,7 +16,10 @@
   },
   "checkbox-base": {
     "type": "components",
-    "files": ["CheckboxBase.vue"]
+    "files": ["CheckboxBase.vue"],
+    "dependencies": {
+      "assets": ["CheckIcon.vue"]
+    }
   },
   "input-base": {
     "type": "components",
@@ -24,7 +27,11 @@
   },
   "range-base": {
     "type": "components",
-    "files": ["RangeBase.vue", "RangeOutput.vue", "types.ts"]
+    "files": ["RangeBase.vue", "RangeOutput.vue", "types.ts"],
+    "dependencies": {
+      "composables": ["useVars.ts"],
+      "utils": ["cssParser.ts", "mergeDefaultProps.ts"]
+    }
   },
   "switch-base": {
     "type": "components",
@@ -44,7 +51,7 @@
   },
   "popover-base": {
     "type": "components",
-    "files": ["context.ts", "PopoverBase.vue", "PopoverMenu.vue", "PopoverTrigger.vue", "types.ts"]
+    "files": ["context.ts", "PopoverMenu.vue", "PopoverTrigger.vue", "types.ts"]
   },
   "use-theme": {
     "type": "composables",

package/cli/showHelp.js

@@ -14,8 +14,6 @@ ${colors.bold}Commands:${colors.reset}
   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
@@ -23,7 +21,6 @@ ${colors.bold}Options:${colors.reset}
 ${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

@@ -1,7 +1,7 @@
 import fs from 'node:fs'
 import path from 'node:path'
 
-const cwd = process.env.INIT_CWD || process.cwd()
+import { cwd } from '../constants.js'
 
 export function loadConfig() {
   const configPath = path.join(cwd, 'rxn-ui.json')
@@ -20,7 +20,8 @@ export function detectProject() {
   const hasSrc = fs.existsSync(path.join(cwd, 'src'))
   return {
     components: hasSrc ? 'src/shared/components' : 'components',
-    styles: hasSrc ? 'src/app/styles' : 'styles',
     composables: hasSrc ? 'src/shared/composables' : 'composables',
+    assets: hasSrc ? 'src/assets' : 'assets',
+    utils: hasSrc ? 'src/shared/utils' : 'utils',
   }
 }

package/cli/utils/getSourceUrl.js

@@ -1,7 +1,6 @@
 import { GITHUB_RAW } from '../constants.js'
 
-export function getSourceUrl(type, componentName, file, tag) {
-  const ref = tag ? `?ref=${tag}` : ''
+export function getSourceUrl(type, componentName, file) {
   const paths = {
     components: componentName
       ? `/src/components/${componentName}/${file}`
@@ -9,7 +8,8 @@ export function getSourceUrl(type, componentName, file, tag) {
     composables: componentName
       ? `/src/composables/${componentName}/${file}`
       : `/src/composables/${file}`,
-    styles: `/src/styles/${file}`,
+    assets: `/src/assets/${file}`,
+    utils: `/src/utils/${file}`,
   }
-  return `${GITHUB_RAW}${paths[type]}${ref}`
+  return `${GITHUB_RAW}${paths[type]}`
 }

package/package.json

@@ -1,15 +1,12 @@
 {
   "name": "rxn-ui",
   "description": "Vue 3 UI component library",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "license": "MIT",
   "private": false,
   "type": "module",
   "author": "Artur Hareksian <artharexian@gmail.com> (https://github.com/r2-h)",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/r2-h/artharexian-ui.git"
-  },
+  "repository": "r2-h/rxn-ui",
   "bin": {
     "rxn-ui": "cli/index.mjs"
   },
@@ -29,7 +26,8 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "vue-router": "^4.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",
@@ -52,6 +50,7 @@
     "vite": "^7.3.1",
     "vitest": "^4.0.18",
     "vue": "^3.5.25",
+    "vue-router": "^4.6.4",
     "vue-tsc": "^3.1.5"
   },
   "eslintConfig": {