rxn-ui 0.6.1 → 0.6.3

package/cli/add.js

@@ -7,6 +7,15 @@ 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: 'assets', regex: /@\/assets\//g },
+  { type: 'composables', regex: /\.\.\/\.\.\/composables\//g },
+  { type: 'utils', regex: /\.\.\/\.\.\/utils\//g },
+  { type: 'components', regex: /\.\.\/([\w-]+)\//g },
+]
+
 export async function add(componentName, cmdOptions = {}) {
   const config = loadConfig()
   if (!config) {
@@ -39,13 +48,110 @@ export async function add(componentName, cmdOptions = {}) {
 
   log.bold(`\nAdding ${componentName}...`)
 
+  // Скачиваем зависимости (assets, composables, utils)
+  const depDirs = await downloadDependencies(entry, config)
+
+  // Скачиваем компонентные зависимости
+  if (entry.components) {
+    for (const compName of entry.components) {
+      const compEntry = registry[compName]
+      if (!compEntry) {
+        log.error(`Dependency "${compName}" not found`)
+        continue
+      }
+      await addDependency(compName, compEntry, config)
+    }
+  }
+
   // Скачиваем файлы компонента
   await downloadItems({
     type: entry.type,
-    componentName: isMultipleFiles ? componentName : null,
+    componentName,
     files: entry.files,
     destDir,
   })
+
+  // Переписываем импорты в файлах компонента
+  rewriteImports(entry.files, destDir, depDirs, isMultipleFiles)
+}
+
+async function addDependency(compName, compEntry, config) {
+  const isMultipleFiles = compEntry.files.length > 1
+  const destDir = isMultipleFiles
+    ? path.join(cwd, config[compEntry.type], compName)
+    : path.join(cwd, config[compEntry.type])
+
+  log.bold(`\nAdding dependency ${compName}...`)
+
+  // Скачиваем зависимости компонента
+  const depDirs = await downloadDependencies(compEntry, config)
+
+  // Скачиваем файлы
+  await downloadItems({
+    type: compEntry.type,
+    componentName: compName,
+    files: compEntry.files,
+    destDir,
+  })
+
+  // Переписываем импорты
+  rewriteImports(compEntry.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
+
+      // Reset regex lastIndex
+      regex.lastIndex = 0
+
+      if (!regex.test(content)) continue
+      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}`
+
+      if (type === 'components') {
+        // For component imports like ../button-base/ -> ./button-base/
+        content = content.replace(regex, (match, compName) => {
+          return `${importPath}/${compName}/`
+        })
+      } else {
+        content = content.replace(regex, `${importPath}/`)
+      }
+    }
+
+    fs.writeFileSync(filePath, content)
+  }
 }
 
 export async function downloadItems({ type, componentName, files, destDir }) {

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() {
-  return `${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,11 +1,35 @@
 import fs from 'node:fs'
 import path from 'node:path'
 
-import { STYLES_FILES, 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')
 
@@ -14,7 +38,8 @@ export async function init(cmdOptions = {}) {
     log.info(`
 Already initialized at ${configPath}
 Components: ${existing.components}
-Styles: ${existing.styles}`)
+Styles: ${existing.styles}
+Assets: ${existing.assets}`)
     return
   }
 
@@ -47,16 +72,13 @@ Styles: ${existing.styles}`)
 Configuration saved to ${configPath}
   Components: ${config.components}
   Styles: ${config.styles}
-  Composables: ${config.composables}`)
+  Composables: ${config.composables}
+  Assets: ${config.assets}
+  Utils: ${config.utils}`)
 
   // Download styles
   const stylesDir = path.join(cwd, config.styles)
-  await downloadItems({
-    type: 'styles',
-    componentName: null,
-    files: STYLES_FILES,
-    destDir: stylesDir,
-  })
+  await downloadStyles(stylesDir)
 
   log(`\nNow you can add components:
   npx rxn-ui add button-base`)

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,26 @@
   },
   "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"]
+    }
+  },
+  "sidebar-base": {
+    "type": "components",
+    "files": [
+      "SidebarBase.vue",
+      "SidebarButton.vue",
+      "sidebar-context.ts",
+      "use-resize.ts",
+      "types.ts"
+    ],
+    "dependencies": {
+      "assets": ["ChevronDoubleIcon.vue"],
+      "composables": ["useRefWithLocalStorage.ts"]
+    },
+    "components": ["button-base"]
   },
   "switch-base": {
     "type": "components",
@@ -44,7 +66,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/utils/config.js

@@ -21,5 +21,7 @@ export function detectProject() {
   return {
     components: hasSrc ? 'src/shared/components' : 'components',
     composables: hasSrc ? 'src/shared/composables' : 'composables',
+    assets: hasSrc ? 'src/assets' : 'assets',
+    utils: hasSrc ? 'src/shared/utils' : 'utils',
   }
 }

package/cli/utils/getSourceUrl.js

@@ -8,7 +8,8 @@ export function getSourceUrl(type, componentName, file) {
     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]}`
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rxn-ui",
   "description": "Vue 3 UI component library",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "license": "MIT",
   "private": false,
   "type": "module",
@@ -23,10 +23,12 @@
     "dev": "vite",
     "format": "prettier --write .",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "build": "vite build"
   },
   "peerDependencies": {
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "vue-router": "^4.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",
@@ -49,6 +51,7 @@
     "vite": "^7.3.1",
     "vitest": "^4.0.18",
     "vue": "^3.5.25",
+    "vue-router": "^4.6.4",
     "vue-tsc": "^3.1.5"
   },
   "eslintConfig": {