artharexian-ui 0.2.11 → 0.3.2

package/cli/index.mjs

@@ -3,6 +3,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import process from 'node:process'
 import { fileURLToPath } from 'node:url'
+import https from 'node:https'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -11,21 +12,76 @@ const args = process.argv.slice(2)
 const command = args[0]
 const component = args[1]
 
-// INIT_CWD is set by npm to the directory where npm install was run
 const cwd = process.env.INIT_CWD || process.cwd()
 
-// Try installed package first, then fallback to local components (for development)
-let registryRoot = path.resolve(cwd, 'node_modules/artharexian-ui/src/components')
-if (!fs.existsSync(registryRoot)) {
-  const localRegistry = path.resolve(__dirname, '../src/components')
-  if (fs.existsSync(localRegistry)) {
-    registryRoot = localRegistry
-  }
+// GitHub config
+const GITHUB_REPO = 'r2-h/artharexian-ui'
+const GITHUB_BRANCH = 'main'
+const COMPONENTS_PATH = 'src/components'
+
+const EXCLUDE_FILES = ['meta.json', 'index.stories.ts']
+
+// Fetch JSON from GitHub
+function fetchJSON(url) {
+  return new Promise((resolve, reject) => {
+    const options = {
+      headers: {
+        'User-Agent': 'artharexian-ui-cli',
+        'Accept': 'application/vnd.github.v3+json',
+      },
+    }
+    https
+      .get(url, options, (res) => {
+        if (res.statusCode !== 200) {
+          reject(new Error(`HTTP ${res.statusCode}: ${res.statusMessage}`))
+          return
+        }
+        let data = ''
+        res.on('data', (chunk) => (data += chunk))
+        res.on('end', () => {
+          try {
+            resolve(JSON.parse(data))
+          } catch (e) {
+            reject(new Error(`Failed to parse JSON: ${e.message}`))
+          }
+        })
+      })
+      .on('error', reject)
+  })
+}
+
+// Fetch file content from GitHub
+function fetchFile(url) {
+  return new Promise((resolve, reject) => {
+    https
+      .get(url, (res) => {
+        let data = ''
+        res.on('data', (chunk) => (data += chunk))
+        res.on('end', () => resolve(data))
+      })
+      .on('error', reject)
+  })
+}
+
+// Get component files list from GitHub API
+async function getComponentFiles(componentName) {
+  const url = `https://api.github.com/repos/${GITHUB_REPO}/contents/${COMPONENTS_PATH}/${componentName}?ref=${GITHUB_BRANCH}`
+  const data = await fetchJSON(url)
+  return data.filter((file) => file.type === 'file' && !EXCLUDE_FILES.includes(file.name))
+}
+
+// Download and save file
+async function downloadFile(file, destPath) {
+  const content = await fetchFile(file.download_url)
+  fs.writeFileSync(destPath, content)
 }
 
+// Copy directory locally (for development)
 function copyDir(src, dest) {
   fs.mkdirSync(dest, { recursive: true })
   for (const file of fs.readdirSync(src)) {
+    if (EXCLUDE_FILES.includes(file)) continue
+
     const s = path.join(src, file)
     const d = path.join(dest, file)
     if (fs.statSync(s).isDirectory()) {
@@ -36,99 +92,139 @@ function copyDir(src, dest) {
   }
 }
 
-function ensureCssImport() {
-  const mainTs = path.resolve(cwd, 'src/main.ts')
-  const mainJs = path.resolve(cwd, 'src/main.js')
-  const mainFile = fs.existsSync(mainTs) ? mainTs : fs.existsSync(mainJs) ? mainJs : null
+// Add component from GitHub
+async function addComponent(componentName) {
+  const destDir = path.resolve(cwd, 'src/components/ui', componentName)
+  const stylesPath = path.resolve(cwd, 'src/styles')
 
-  if (!mainFile) return
+  // Auto-install styles if not present
+  if (!fs.existsSync(stylesPath)) {
+    console.log('Styles not found. Installing...\n')
+    await copyStyles()
+    console.log('')
+  }
 
-  let code = fs.readFileSync(mainFile, 'utf8')
+  console.log(`Fetching ${componentName} from GitHub...`)
 
-  // Check if local styles import exists
-  if (code.includes('./styles/style.css') || code.includes('@/styles/style.css')) return
+  try {
+    const files = await getComponentFiles(componentName)
+
+    if (files.length === 0) {
+      console.error(`Error: Component not found: ${componentName}`)
+      listComponents()
+      process.exit(1)
+    }
+
+    fs.mkdirSync(destDir, { recursive: true })
+
+    for (const file of files) {
+      const destPath = path.join(destDir, file.name)
+      await downloadFile(file, destPath)
+      console.log(`  ✔ ${file.name}`)
+    }
+
+    console.log(`\n✔ ${componentName} added to src/components/ui/${componentName}`)
+    console.log('\nNext steps:')
+    console.log(`  1. Import: import { ${toPascalCase(componentName)} } from '@/components/ui/${componentName}'`)
+    console.log('  2. Configure CSS variables (see docs)')
+  } catch (error) {
+    console.error(`Error: ${error.message}`)
+    console.error('\nMake sure you have internet connection and the component exists.')
+    process.exit(1)
+  }
+}
 
-  code = `import './styles/style.css'\n` + code
-  fs.writeFileSync(mainFile, code)
-  console.log('✔ Style import added to src/main')
+// List available components
+async function listComponents() {
+  console.log('Available components:')
+  try {
+    const url = `https://api.github.com/repos/${GITHUB_REPO}/contents/${COMPONENTS_PATH}?ref=${GITHUB_BRANCH}`
+    const data = await fetchJSON(url)
+    const components = data.filter((item) => item.type === 'dir').map((item) => item.name)
+    components.forEach((c) => console.log(`  - ${c}`))
+  } catch (error) {
+    console.error(`  (unable to fetch: ${error.message})`)
+  }
 }
 
-function copyStyles() {
-  const stylesSrc = path.resolve(cwd, 'node_modules/artharexian-ui/src/styles')
+// Copy styles from GitHub
+async function copyStyles() {
   const stylesDst = path.resolve(cwd, 'src/styles')
 
-  if (!fs.existsSync(stylesSrc)) {
-    console.log('⚠ Styles not found in package')
-    return
-  }
+  console.log('Fetching styles from GitHub...')
+
+  try {
+    const url = `https://api.github.com/repos/${GITHUB_REPO}/contents/src/styles?ref=${GITHUB_BRANCH}`
+    const data = await fetchJSON(url)
+    const cssFiles = data.filter((file) => file.type === 'file' && file.name.endsWith('.css'))
 
-  fs.mkdirSync(stylesDst, { recursive: true })
-  
-  // Copy all CSS files from package to project
-  for (const file of fs.readdirSync(stylesSrc)) {
-    if (file.endsWith('.css')) {
-      const srcFile = path.join(stylesSrc, file)
-      const dstFile = path.join(stylesDst, file)
-      fs.copyFileSync(srcFile, dstFile)
-      console.log(`✔ ${file} installed to src/styles/${file}`)
+    fs.mkdirSync(stylesDst, { recursive: true })
+
+    for (const file of cssFiles) {
+      const destPath = path.join(stylesDst, file.name)
+      await downloadFile(file, destPath)
+      console.log(`  ✔ ${file.name}`)
     }
+
+    console.log('✔ Styles installed')
+  } catch (error) {
+    console.error(`Error: ${error.message}`)
+    process.exit(1)
   }
 }
 
+// Helper functions
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+function toPascalCase(str) {
+  return str
+    .split('-')
+    .map((part) => capitalize(part))
+    .join('')
+}
+
+// CLI commands
 if (!command) {
-  console.log('Usage: artharexian-ui <add|eject|init> [component]')
+  console.log('Usage: artharexian-ui <add|eject|init|list> [component]')
   console.log('')
   console.log('Commands:')
-  console.log('  add <component>      Add a component to your project')
+  console.log('  add <component>      Add a component to your project (from GitHub)')
   console.log('  eject <component>    Alias for add (eject component source)')
-  console.log('  init                 Initialize library (copy styles, configure)')
+  console.log('  init                 Initialize library (copy styles)')
+  console.log('  list                 List available components')
   console.log('')
   console.log('Examples:')
   console.log('  npx artharexian-ui add button-base')
+  console.log('  npx artharexian-ui list')
   console.log('  npx artharexian-ui init')
   process.exit(0)
 }
 
-// Handle init command (auto-run on npm install)
 if (command === 'init') {
   console.log('Initializing artharexian-ui...')
-  copyStyles()
-  ensureCssImport()
+  await copyStyles()
   console.log('')
   console.log('✔ artharexian-ui initialized successfully!')
   process.exit(0)
 }
 
-if (!component) {
-  console.error('Error: Component name required')
-  console.error('Usage: artharexian-ui add <component>')
-  process.exit(1)
+if (command === 'list') {
+  await listComponents()
+  process.exit(0)
 }
 
-const src = path.join(registryRoot, component)
-
-if (!fs.existsSync(src)) {
-  console.error(`Error: Component not found: ${component}`)
-  console.error('')
-  console.error('Available components:')
-  try {
-    const components = fs.readdirSync(registryRoot)
-    components.forEach((c) => console.error(`  - ${c}`))
-  } catch {
-    console.error('  (unable to list registry)')
+if (command === 'add' || command === 'eject') {
+  if (!component) {
+    console.error('Error: Component name required')
+    console.error('Usage: artharexian-ui add <component>')
+    process.exit(1)
   }
-  process.exit(1)
+  await addComponent(component)
+  process.exit(0)
 }
 
-const dst = path.resolve(cwd, 'src/components/ui', component)
-
-copyDir(src, dst)
-
-console.log(`✔ ${component} added to src/components/ui/${component}`)
-
-ensureCssImport()
-
-console.log('')
-console.log('Next steps:')
-console.log(`  1. Import the component: import { ButtonBase } from '@/components/ui/${component}'`)
-console.log('  2. Make sure your CSS variables are configured (see docs)')
+console.error(`Unknown command: ${command}`)
+console.error('Run without arguments for usage info')
+process.exit(1)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artharexian-ui",
   "description": "Vue 3 UI component library",
-  "version": "0.2.11",
+  "version": "0.3.2",
   "license": "MIT",
   "private": false,
   "type": "module",
@@ -10,31 +10,21 @@
     "type": "git",
     "url": "git+https://github.com/r2-h/artharexian-ui.git"
   },
-  "main": "./dist/artharexian-ui.umd.js",
-  "module": "./dist/artharexian-ui.es.js",
-  "types": "./dist/artharexian-ui.d.ts",
   "bin": {
     "artharexian-ui": "./cli/index.mjs"
   },
   "files": [
-    "dist",
     "src/styles",
-    "src/components",
-    "cli"
+    "cli",
+    "!**/*.stories.ts",
+    "!**/meta.json"
   ],
   "exports": {
-    ".": {
-      "types": "./dist/artharexian-ui.d.ts",
-      "import": "./dist/artharexian-ui.es.js",
-      "require": "./dist/artharexian-ui.umd.js"
-    },
-    "./css": "./dist/artharexian-ui.css"
+    "./styles": "./src/styles/style.css"
   },
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc -b && vite build",
     "format": "prettier --write .",
-    "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "postinstall": "node ./cli/index.mjs init"
@@ -61,8 +51,6 @@
     "storybook": "^10.2.10",
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
-    "vite-plugin-css-injected-by-js": "^3.1.1",
-    "vite-plugin-dts": "^3.6.4",
     "vitest": "^4.0.18",
     "vue": "^3.5.25",
     "vue-tsc": "^3.1.5"

package/src/styles/style.css

@@ -1,136 +1,136 @@
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@14..36,300;14..36,400;14..36,500;14..36,600;14..36,700&display=swap');
-@import 'variables.css';
-@layer theme, base, components, utilities;
-
-@layer base {
-  :root {
-    &[data-theme='light'] {
-      color-scheme: light;
-    }
-    &[data-theme='dark'] {
-      color-scheme: dark;
-    }
-
-    color-scheme: light dark;
-    scroll-behavior: smooth;
-    font-size: 10px;
-    font-family: 'DM Sans', sans-serif;
-  }
-
-  body {
-    background: var(--background);
-    color: var(--foreground);
-    -webkit-font-smoothing: antialiased;
-    font-size: 1.6rem;
-  }
-
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    border: 0 solid;
-  }
-
-  :disabled,
-  [aria-busy='true'],
-  .is-disabled {
-    pointer-events: none;
-    color: var(--color-neutral-500);
-    opacity: 0.45;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    text-wrap: balance;
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  textarea {
-    resize: vertical;
-  }
-
-  img,
-  picture,
-  svg,
-  video {
-    display: block;
-    max-width: 100%;
-    height: auto;
-  }
-
-  input,
-  button,
-  textarea,
-  select {
-    font: inherit;
-  }
-
-  a {
-    text-decoration: none;
-    color: inherit;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  ol,
-  ul,
-  menu {
-    list-style: none;
-  }
-}
-
-@layer components {
-  h1 {
-    font-size: var(--text-2xl);
-  }
-  h2 {
-    font-size: var(--text-xl);
-  }
-  h3 {
-    font-size: var(--text-lg);
-  }
-  ::placeholder {
-    color: var(--muted-foreground);
-  }
-
-  .font-xs {
-    font-size: var(--text-xs);
-    /* line-height: var(--leading-relaxed); */
-  }
-  .font-sm {
-    font-size: var(--text-sm);
-    /* line-height: var(--leading-normal); */
-  }
-  .font-base {
-    font-size: var(--text-base);
-    /* line-height: var(--leading-normal); */
-  }
-  .font-lg {
-    font-size: var(--text-lg);
-    /* line-height: var(--leading-normal); */
-  }
-  .font-xl {
-    font-size: var(--text-xl);
-    /* line-height: var(--leading-snug); */
-  }
-  .font-2xl {
-    font-size: var(--text-2xl);
-    /* line-height: var(--leading-tight); */
-  }
-  .font-3xl {
-    font-size: var(--text-3xl);
-    /* line-height: 1; */
-  }
-  .font-4xl {
-    font-size: var(--text-4xl);
-    /* line-height: 1; */
-  }
-}
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@14..36,300;14..36,400;14..36,500;14..36,600;14..36,700&display=swap');
+@import 'variables.css';
+@layer theme, base, components, utilities;
+
+@layer base {
+  :root {
+    &[data-theme='light'] {
+      color-scheme: light;
+    }
+    &[data-theme='dark'] {
+      color-scheme: dark;
+    }
+
+    color-scheme: light dark;
+    scroll-behavior: smooth;
+    font-size: 10px;
+    font-family: 'DM Sans', sans-serif;
+  }
+
+  body {
+    background: var(--background);
+    color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+    font-size: 1.6rem;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  :disabled,
+  [aria-busy='true'],
+  .is-disabled {
+    pointer-events: none;
+    color: var(--color-neutral-500);
+    opacity: 0.45;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-wrap: balance;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  img,
+  picture,
+  svg,
+  video {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+}
+
+@layer components {
+  h1 {
+    font-size: var(--text-2xl);
+  }
+  h2 {
+    font-size: var(--text-xl);
+  }
+  h3 {
+    font-size: var(--text-lg);
+  }
+  ::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  .font-xs {
+    font-size: var(--text-xs);
+    /* line-height: var(--leading-relaxed); */
+  }
+  .font-sm {
+    font-size: var(--text-sm);
+    /* line-height: var(--leading-normal); */
+  }
+  .font-base {
+    font-size: var(--text-base);
+    /* line-height: var(--leading-normal); */
+  }
+  .font-lg {
+    font-size: var(--text-lg);
+    /* line-height: var(--leading-normal); */
+  }
+  .font-xl {
+    font-size: var(--text-xl);
+    /* line-height: var(--leading-snug); */
+  }
+  .font-2xl {
+    font-size: var(--text-2xl);
+    /* line-height: var(--leading-tight); */
+  }
+  .font-3xl {
+    font-size: var(--text-3xl);
+    /* line-height: 1; */
+  }
+  .font-4xl {
+    font-size: var(--text-4xl);
+    /* line-height: 1; */
+  }
+}