@symbo.ls/cli 2.11.515 → 2.11.516

package/bin/fetch.js

@@ -8,7 +8,6 @@ import * as fetch from '@symbo.ls/fetch'
 import * as utils from '@domql/utils'
 import { convertFromCli } from './convert.js'
 import { createFs } from './fs.js'
-import { fs2js } from './fs2.js'
 const { isObjectLike } = (utils.default || utils)
 const { fetchRemote } = (fetch.default || fetch)
 
@@ -145,5 +144,3 @@ program
   .option('--verbose-code', 'Verbose errors and warnings')
   .option('--dist-dir', 'Directory to import files to.')
   .action(fetchFromCli)
-
-program.command('push').description('Push changes to platform').action(fs2js)

package/bin/index.js

@@ -10,6 +10,8 @@ import './sync.js'
 import './clean.js'
 import './convert.js'
 import './create.js'
+import './login.js'
+import './push.js'
 import './link-packages.js'
 
 const args = process.argv

package/bin/linking/packages.js

@@ -1,27 +1,27 @@
 export default [
-  'attrs-in-props',
   'create-smbls',
+  '@symbo.ls/fetch',
+  'attrs-in-props',
+  '@symbo.ls/feather-icons',
+  '@symbo.ls/fluent-icons',
   '@symbo.ls/emotion',
   '@symbo.ls/default-icons',
-  '@symbo.ls/feather-icons',
-  '@symbo.ls/fetch',
-  '@symbo.ls/material-icons',
   '@symbo.ls/preview',
+  '@symbo.ls/material-icons',
   '@symbo.ls/utils',
-  '@symbo.ls/fluent-icons',
   '@symbo.ls/default-config',
   '@symbo.ls/scratch',
   '@symbo.ls/init',
   '@symbo.ls/atoms',
   '@symbo.ls/socket',
-  '@symbo.ls/icon',
   'css-in-props',
-  '@symbo.ls/box',
-  '@symbo.ls/notification',
+  '@symbo.ls/icon',
   '@symbo.ls/input',
-  '@symbo.ls/tooltip',
+  '@symbo.ls/box',
   '@symbo.ls/link',
   '@symbo.ls/select',
+  '@symbo.ls/notification',
+  '@symbo.ls/tooltip',
   '@symbo.ls/cli',
   '@symbo.ls/button',
   '@symbo.ls/avatar',

package/bin/login.js

@@ -1,18 +1,114 @@
 'use strict'
 
-const { program } = require('./program')
-const API_URL = 'https://api.symbols.dev/' // eslint-disable-line
+import inquirer from 'inquirer'
+import fs from 'fs'
+import path from 'path'
+import os from 'os'
+import chalk from 'chalk'
+import { program } from './program.js'
+import { getApiUrl } from '../helpers/config.js'
+
+const RC_FILE = '.smblsrc'
+
+// Helper to manage credentials
+export class CredentialManager {
+  constructor () {
+    this.rcPath = path.join(os.homedir(), RC_FILE)
+  }
+
+  // Load credentials from rc file
+  loadCredentials () {
+    try {
+      const data = fs.readFileSync(this.rcPath, 'utf8')
+      return JSON.parse(data)
+    } catch (err) {
+      return {}
+    }
+  }
+
+  // Save credentials to rc file
+  saveCredentials (credentials) {
+    try {
+      fs.writeFileSync(this.rcPath, JSON.stringify(credentials, null, 2))
+      return true
+    } catch (err) {
+      console.error('Failed to save credentials:', err)
+      return false
+    }
+  }
+
+  // Get stored auth token
+  getAuthToken () {
+    const creds = this.loadCredentials()
+    return creds.authToken
+  }
+
+  // Clear stored credentials
+  clearCredentials () {
+    try {
+      fs.unlinkSync(this.rcPath)
+      return true
+    } catch (err) {
+      return false
+    }
+  }
+}
 
 program
-  .command('login [destination]')
+  .command('login')
   .description('Sign in to Symbols')
-  .argument('<username>', 'user to login')
-  .argument('[password]', 'password for user, if required', 'no password given')
-  .action(async (username, password) => {
-    console.log('username:', username)
-    console.log('password:', password)
-
-    const response = await fetch(API_URL)
-    const body = await response.json()
-    console.log(body)
+  .action(async () => {
+    console.log('yo login')
+
+    console.log(getApiUrl())
+
+    // Prompt for credentials
+    const answers = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'email',
+        message: 'Enter your email:',
+        validate: input => input.includes('@') || 'Please enter a valid email'
+      },
+      {
+        type: 'password',
+        name: 'password',
+        message: 'Enter your password:',
+        validate: input => input.length >= 6 || 'Password must be at least 6 characters'
+      }
+    ])
+
+    try {
+      // Make login request
+      const response = await fetch(`${getApiUrl()}/auth/login`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          email: answers.email,
+          password: answers.password
+        })
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Authentication failed')
+      }
+
+      // Save credentials
+      const credManager = new CredentialManager()
+      credManager.saveCredentials({
+        authToken: data.token,
+        userId: data.userId,
+        email: answers.email
+      })
+
+      console.log(chalk.green('\nSuccessfully logged in!'))
+      console.log(chalk.dim(`Credentials saved to ${credManager.rcPath}`))
+    } catch (error) {
+      console.error(chalk.red('\nLogin failed:'), error.message)
+      process.exit(1)
+    }
   })

package/bin/push.js

@@ -0,0 +1,185 @@
+'use strict'
+
+import path from 'path'
+import chalk from 'chalk'
+import inquirer from 'inquirer'
+import { loadModule } from './require.js'
+import { program } from './program.js'
+import { CredentialManager } from './login.js'
+import { buildDirectory } from '../helpers/fileUtils.js'
+import { showDiffPager } from '../helpers/diffUtils.js'
+import { normalizeKeys, generateChanges } from '../helpers/compareUtils.js'
+import {
+  getServerProjectData,
+  updateProjectOnServer
+} from '../helpers/apiUtils.js'
+
+const RC_PATH = process.cwd() + '/symbols.json'
+const CREATE_PROJECT_URL = 'https://symbols.app/create'
+
+function printProjectNotFoundGuidance (appKey) {
+  console.error(chalk.bold.red('\nProject not found or access denied.'))
+  console.error(chalk.bold.yellow('\nPossible reasons:'))
+  console.error(chalk.gray('1. The project does not exist'))
+  console.error(chalk.gray("2. You don't have access to this project"))
+  console.error(chalk.gray('3. The app key in symbols.json might be incorrect'))
+
+  console.error(chalk.bold.yellow('\nTo resolve this:'))
+  console.error(
+    chalk.white(
+      `1. Visit ${chalk.cyan.underline(
+        CREATE_PROJECT_URL
+      )} to create a new project`
+    )
+  )
+  console.error(
+    chalk.white(
+      '2. After creating the project, update your symbols.json with the correct information:'
+    )
+  )
+  console.error(chalk.gray(`   - Verify the app key: ${chalk.cyan(appKey)}`))
+  console.error(chalk.gray('   - Make sure you have the correct permissions'))
+
+  console.error(chalk.bold.yellow('\nThen try again:'))
+  console.error(chalk.cyan('$ smbls push'))
+}
+
+async function loadProjectConfiguration () {
+  try {
+    const config = await loadModule(RC_PATH)
+    if (!config.key) {
+      throw new Error('Missing app key in symbols.json')
+    }
+    return config
+  } catch (e) {
+    if (e.message.includes('Missing app key')) {
+      console.error(chalk.bold.red('\nInvalid symbols.json configuration:'))
+      console.error(chalk.white('The file must contain a valid app key.'))
+      console.error(chalk.bold.yellow('\nExample symbols.json:'))
+      console.error(
+        chalk.cyan(JSON.stringify({ key: 'your.app.key' }, null, 2))
+      )
+    } else {
+      console.error(
+        chalk.bold.red('Please include symbols.json in your repository root')
+      )
+    }
+    process.exit(1)
+  }
+}
+
+async function buildLocalProject () {
+  const distDir = path.join(process.cwd(), 'smbls')
+  const outputDirectory = path.join(distDir, 'dist')
+
+  await buildDirectory(distDir, outputDirectory)
+  const outputFile = path.join(outputDirectory, 'index.js')
+  return normalizeKeys(await loadModule(outputFile))
+}
+
+async function confirmChanges (changes) {
+  if (changes.length === 0) {
+    console.log(chalk.bold.yellow('No changes detected'))
+    return false
+  }
+
+  console.log(chalk.bold.white('\nDetected changes:'))
+  const changesByType = changes.reduce((acc, [type, path]) => {
+    acc[type] = (acc[type] || 0) + 1
+    return acc
+  }, {})
+
+  Object.entries(changesByType).forEach(([type, count]) => {
+    console.log(chalk.gray(`- ${type}: ${chalk.cyan(count)} changes`))
+  })
+
+  const { proceed } = await inquirer.prompt([
+    {
+      type: 'confirm',
+      name: 'proceed',
+      message: 'Proceed with these changes?',
+      default: false
+    }
+  ])
+
+  return proceed
+}
+
+export async function pushProjectChanges () {
+  const credManager = new CredentialManager()
+  const authToken = credManager.getAuthToken()
+
+  if (!authToken) {
+    console.error(chalk.red('Please login first using: smbls login'))
+    process.exit(1)
+  }
+
+  try {
+    const config = await loadProjectConfiguration()
+    const { key: appKey } = config
+
+    // Build and load local project
+    console.log(chalk.dim('Building local project...'))
+    const projectData = await buildLocalProject()
+    console.log(chalk.gray('Local project built and loaded successfully'))
+
+    // Get server data
+    try {
+      console.log(chalk.dim('Fetching server data...'))
+      const serverProjectData = await getServerProjectData(appKey, authToken)
+
+      if (!serverProjectData) {
+        throw new Error('Failed to fetch server data: Empty response')
+      }
+
+      const normalizedServerData = normalizeKeys(serverProjectData)
+      console.log(chalk.gray('Server data fetched successfully'))
+
+      // Compare and get changes
+      const { changes, diffs } = generateChanges(
+        normalizedServerData,
+        projectData
+      )
+
+      // Show changes and confirm
+      if (changes.length > 0) {
+        console.log('\nDetailed changes:')
+        await showDiffPager(diffs)
+      }
+
+      const shouldProceed = await confirmChanges(changes)
+      if (!shouldProceed) {
+        console.log(chalk.yellow('Operation cancelled'))
+        return
+      }
+
+      // Update server
+      console.log(chalk.dim('Updating server...'))
+      await updateProjectOnServer(appKey, authToken, changes, projectData)
+
+      console.log(chalk.bold.green('\nProject updated successfully!'))
+      console.log(
+        chalk.gray(`Total changes applied: ${chalk.cyan(changes.length)}`)
+      )
+    } catch (error) {
+      if (
+        error.message.includes('Failed to fetch server data') ||
+        (error.response && error.response.status === 404) ||
+        Object.keys(error.response?.data || {}).length === 0
+      ) {
+        printProjectNotFoundGuidance(appKey)
+      } else {
+        throw error // Re-throw other errors to be caught by outer catch block
+      }
+      process.exit(1)
+    }
+  } catch (error) {
+    console.error(chalk.bold.red('\nPush failed:'), chalk.white(error.message))
+    process.exit(1)
+  }
+}
+
+program
+  .command('push')
+  .description('Push changes to platform')
+  .action(pushProjectChanges)

package/helpers/apiUtils.js

@@ -0,0 +1,73 @@
+import { getApiUrl } from './config.js'
+import { ALLOWED_FIELDS } from './compareUtils.js'
+
+export async function getServerProjectData (appKey, authToken) {
+  try {
+    const response = await fetch(`${getApiUrl()}/get/`, {
+      method: 'GET',
+      headers: {
+        'X-AppKey': appKey,
+        Authorization: `Bearer ${authToken}`
+      }
+    })
+
+    const data = await response.json()
+
+    if (!response.ok) {
+      const error = new Error(`Failed to fetch server data: ${response.statusText}`)
+      error.response = {
+        status: response.status,
+        data
+      }
+      throw error
+    }
+
+    // Check if response is empty object
+    if (data && Object.keys(data).length === 0) {
+      const error = new Error('Project not found')
+      error.response = {
+        status: 404,
+        data
+      }
+      throw error
+    }
+
+    return data
+  } catch (error) {
+    if (!error.response) {
+      error.response = {
+        status: 500,
+        data: {}
+      }
+    }
+    throw error
+  }
+}
+
+export async function updateProjectOnServer (appKey, authToken, changes, projectData) {
+  // Validate changes before sending
+  const validChanges = changes.filter(([type, path]) => {
+    const normalizedPath = path[0].toLowerCase()
+    return ALLOWED_FIELDS.includes(normalizedPath)
+  })
+
+  const response = await fetch(`${getApiUrl()}/auth/project/update`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${authToken}`
+    },
+    body: JSON.stringify({
+      appKey,
+      changes: validChanges,
+      projectUpdates: projectData
+    })
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Failed to update project')
+  }
+
+  return response
+}

package/helpers/compareUtils.js

@@ -0,0 +1,135 @@
+import { generateDiffDisplay } from './diffUtils.js'
+
+export const ALLOWED_FIELDS = [
+  'designsystem',
+  'functions',
+  'files',
+  'components',
+  'dependencies',
+  'pages',
+  'snippets'
+]
+
+export function normalizeKeys (obj) {
+  if (!obj || typeof obj !== 'object') return obj
+
+  if (Array.isArray(obj)) {
+    return obj.map(item => normalizeKeys(item))
+  }
+
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    const normalizedKey = key.toLowerCase()
+    acc[normalizedKey] = value
+    return acc
+  }, {})
+}
+
+export function generateChanges (oldData, newData) {
+  const changes = []
+  const diffs = []
+
+  if (!oldData || !newData) {
+    throw new Error('Both oldData and newData must be provided')
+  }
+
+  // Filter out non-allowed top-level fields before comparison
+  const filteredOldData = Object.keys(oldData)
+    .filter(key => ALLOWED_FIELDS.includes(key.toLowerCase()))
+    .reduce((obj, key) => {
+      obj[key] = oldData[key]
+      return obj
+    }, {})
+
+  const filteredNewData = Object.keys(newData)
+    .filter(key => ALLOWED_FIELDS.includes(key.toLowerCase()))
+    .reduce((obj, key) => {
+      obj[key] = newData[key]
+      return obj
+    }, {})
+
+  compareObjects(filteredOldData, filteredNewData, [], changes, diffs)
+
+  return { changes, diffs }
+}
+
+function isEqual (val1, val2) {
+  if (val1 === val2) return true
+  if (!val1 && !val2) return true
+  if (!val1 || !val2) return false
+
+  if (typeof val1 === 'function' || typeof val2 === 'function') {
+    const str1 = typeof val1 === 'function' ? val1.toString() : val1
+    const str2 = typeof val2 === 'function' ? val2.toString() : val2
+    return str1 === str2
+  }
+
+  if (Array.isArray(val1) && Array.isArray(val2)) {
+    if (val1.length !== val2.length) return false
+    return val1.every((item, index) => isEqual(item, val2[index]))
+  }
+
+  if (typeof val1 !== 'object' || val1 === null || val2 === null) {
+    if (typeof val1 === 'number' && typeof val2 === 'number') {
+      return val1.toString() === val2.toString()
+    }
+    return Object.is(val1, val2)
+  }
+
+  const keys1 = Object.keys(val1).sort()
+  const keys2 = Object.keys(val2).sort()
+
+  if (keys1.length !== keys2.length) return false
+  if (!keys1.every((key, index) => key === keys2[index])) return false
+
+  return keys1.every(key => isEqual(val1[key], val2[key]))
+}
+
+function compareObjects (oldObj, newObj, currentPath, changes, diffs) {
+  oldObj = oldObj || {}
+  newObj = newObj || {}
+
+  if (isEqual(oldObj, newObj)) return
+
+  if (
+    typeof oldObj !== 'object' ||
+    typeof newObj !== 'object' ||
+    oldObj === null ||
+    newObj === null
+  ) {
+    changes.push(['update', currentPath, typeof newObj === 'function' ? newObj.toString() : newObj])
+    diffs.push(generateDiffDisplay('update', currentPath, oldObj, newObj))
+    return
+  }
+
+  handleDeletions(oldObj, newObj, currentPath, changes, diffs)
+  handleAdditionsAndUpdates(oldObj, newObj, currentPath, changes, diffs)
+}
+
+function handleDeletions (oldObj, newObj, currentPath, changes, diffs) {
+  const oldKeys = Object.keys(oldObj)
+  const newKeys = Object.keys(newObj)
+
+  for (const key of oldKeys) {
+    if (!newKeys.includes(key)) {
+      changes.push(['delete', [...currentPath, key]])
+      diffs.push(generateDiffDisplay('delete', [...currentPath, key], oldObj[key]))
+    }
+  }
+}
+
+function handleAdditionsAndUpdates (oldObj, newObj, currentPath, changes, diffs) {
+  const oldKeys = Object.keys(oldObj)
+  const newKeys = Object.keys(newObj)
+
+  for (const key of newKeys) {
+    const newValue = newObj[key]
+    const oldValue = oldObj[key]
+
+    if (!oldKeys.includes(key)) {
+      changes.push(['update', [...currentPath, key], typeof newValue === 'function' ? newValue.toString() : newValue])
+      diffs.push(generateDiffDisplay('add', [...currentPath, key], undefined, newValue))
+    } else if (!isEqual(oldValue, newValue)) {
+      compareObjects(oldValue, newValue, [...currentPath, key], changes, diffs)
+    }
+  }
+}

package/helpers/config.js

@@ -0,0 +1,27 @@
+import fs from 'fs'
+import path from 'path'
+
+export const getApiUrl = () => {
+  if (process.env.SMBLS_API_URL) {
+    return process.env.SMBLS_API_URL
+  }
+
+  const configPath = path.join(process.cwd(), '.smblsrc.json')
+  if (fs.existsSync(configPath)) {
+    try {
+      const config = JSON.parse(fs.readFileSync(configPath, 'utf8'))
+      if (config.apiUrl) return config.apiUrl
+    } catch (err) {
+      // Silently fail and use defaults if config file is invalid
+    }
+  }
+
+  switch (process.env.NODE_ENV) {
+    case 'production':
+      return 'https://api.symbols.app'
+    case 'staging':
+      return 'https://api-staging.symbols.app'
+    default:
+      return 'http://localhost:13335'
+  }
+}

package/helpers/diffUtils.js

@@ -0,0 +1,55 @@
+import chalk from 'chalk'
+import { spawn } from 'child_process'
+
+export function formatValue (value) {
+  if (typeof value === 'object' && value !== null) {
+    return JSON.stringify(value, null, 2)
+  }
+  return String(value)
+}
+
+export function generateDiffDisplay (type, path, oldValue, newValue) {
+  const pathStr = path.join('.')
+  let output = chalk.dim(`@ ${pathStr}\n`)
+
+  switch (type) {
+    case 'update':
+      if (oldValue !== undefined) {
+        output += chalk.red(`- ${formatValue(oldValue)}\n`)
+      }
+      output += chalk.green(`+ ${formatValue(newValue)}\n`)
+      break
+    case 'delete':
+      output += chalk.red(`- ${formatValue(oldValue)}\n`)
+      break
+    default:
+      output += chalk.green(`+ ${formatValue(newValue)}\n`)
+  }
+
+  return output
+}
+
+export async function showDiffPager (diffs) {
+  return new Promise((resolve, reject) => {
+    const formattedDiffs = diffs.join('\n' + chalk.dim('---') + '\n')
+
+    const less = spawn('less', ['-R'], {
+      stdio: ['pipe', process.stdout, process.stderr]
+    })
+
+    less.stdin.on('error', (error) => {
+      if (error.code === 'EPIPE') {
+        resolve()
+        return
+      }
+      reject(error)
+    })
+
+    less.on('close', () => {
+      resolve()
+    })
+
+    less.stdin.write(formattedDiffs)
+    less.stdin.end()
+  })
+}

package/{bin/fs2.js → helpers/fileUtils.js}

@@ -1,43 +1,23 @@
 import fs from 'fs'
 import path from 'path'
 import { build } from 'esbuild'
-import { loadModule } from './require.js'
 
-const RC_PATH = process.cwd() + '/symbols.json'
-
-let rc = {}
-try {
-  rc = loadModule(RC_PATH); // eslint-disable-line
-} catch (e) {
-  console.error('Please include symbols.json to your root of respository')
-}
-
-export async function fs2js (
-  distDir = path.join(process.cwd(), 'smbls')
-) {
-  const directoryPath = distDir
-  const outputDirectory = distDir + '/dist'
-  buildDirectory(directoryPath, outputDirectory)
-    .then(() => {
-      console.log('All files built successfully')
-    })
-    .catch((error) => {
-      console.error('Error:', error)
-    })
-  const data = await import(process.cwd() + '/toko/dist/index.js')
-  console.log(JSON.stringify(data))
-}
-
-async function buildDirectory (directoryPath, outputDirectory) {
+export async function buildDirectory (directoryPath, outputDirectory) {
   try {
     const files = await getFilesRecursively(directoryPath)
     const buildPromises = files.map(async (filePath) => {
       const relativePath = path.relative(directoryPath, filePath)
       const outputFile = path.join(outputDirectory, relativePath)
+
+      // Ensure output subdirectories exist
+      const outputDir = path.dirname(outputFile)
+      if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true })
+      }
+
       await buildFromFile(filePath, outputFile)
     })
     await Promise.all(buildPromises)
-    console.log('All files built successfully')
   } catch (error) {
     console.error('Error building directory:', error)
     throw error
@@ -46,7 +26,7 @@ async function buildDirectory (directoryPath, outputDirectory) {
 
 async function buildFromFile (inputFilePath, outputFilePath) {
   try {
-    const fileContents = await fs.readFileSync(inputFilePath, 'utf8')
+    const fileContents = fs.readFileSync(inputFilePath, 'utf8')
     await build({
       stdin: {
         contents: fileContents,
@@ -58,7 +38,10 @@ async function buildFromFile (inputFilePath, outputFilePath) {
       outfile: outputFilePath,
       target: 'node14',
       platform: 'node',
-      format: 'cjs'
+      format: 'cjs',
+      bundle: true,
+      mainFields: ['module', 'main'],
+      external: ['esbuild']
     })
   } catch (error) {
     console.error('Error building file:', error)
@@ -69,11 +52,10 @@ async function buildFromFile (inputFilePath, outputFilePath) {
 async function getFilesRecursively (directoryPath) {
   const files = []
   async function traverseDirectory (currentPath) {
-    const entries = await fs.readdirSync(currentPath, { withFileTypes: true })
+    const entries = fs.readdirSync(currentPath, { withFileTypes: true })
     for (const entry of entries) {
-      if (entry.name.startsWith('dist')) {
-        continue
-      }
+      if (entry.name === 'dist' || entry.name === 'node_modules') continue
+
       const fullPath = path.join(currentPath, entry.name)
       if (entry.isDirectory()) {
         await traverseDirectory(fullPath)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/cli",
-  "version": "2.11.515",
+  "version": "2.11.516",
   "description": "Fetch your Symbols configuration",
   "main": "bin/fetch.js",
   "author": "Symbols",
@@ -26,5 +26,5 @@
     "node-fetch": "^3.1.0",
     "v8-compile-cache": "^2.3.0"
   },
-  "gitHead": "020a244e20deb7740662e1e500f30bc118c07846"
+  "gitHead": "7f3d850309dfb9de15ef9ad33eca25e5a2c94073"
 }