create-smbls 2.11.378

package/bin/clean.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+
+import { sync } from '@symbo.ls/socket'
+import { program } from './program.js'
+
+program
+  .command('clean')
+  .description('Clean Symbols temp files')
+  .action(async () => {
+    sync()
+  })

package/bin/convert.js

@@ -0,0 +1,39 @@
+'use strict'
+
+// import chalk from 'chalk'
+import { program } from './program.js'
+// import convert, { convertDomqlModule } from '@symbo.ls/convert'
+
+const TMP_DIR_NAME = '.smbls_convert_tmp'
+
+export function convertFromCli (data, opts) {
+  // const { framework, verbose, verboseCode } = opts
+  // // const convertedStrings = convertDomqlModule(data, null, framework)
+  // if (verboseCode) console.log(convertedStrings)
+  // return verbose
+}
+
+program
+  .command('convert')
+  .description('Convert and copy all DOMQL components under a directory')
+  .argument('[src]', 'Source directory/file. By default, it is "src/"')
+  .argument('[dest]',
+    'Destination directory/file. Will be overwritten. By ' +
+            'default, it becomes the name of the desired format')
+  .option('--react', 'Convert all DomQL components to React')
+  .option('--angular', 'Convert all DomQL components to Angular')
+  .option('--vue2', 'Convert all DomQL components to Vue2')
+  .option('--vue3', 'Convert all DomQL components to Vue3')
+  .option('-t, --tmp-dir <path>',
+    'Use this directory for storing intermediate & build files instead of ' +
+          `the default (dest/${TMP_DIR_NAME})`)
+  .option('-o, --only <components>',
+    'Only convert these components; comma separated ' +
+          '(for example: --only=Flex,Img)')
+  .option('-m, --merge <dir>',
+    'After converting an entire directory, perform a recursive merge that takes files from this directory and puts them in the dest directory. It also concatenates index.js files')
+  .option('-v, --verbose', 'Run the converter in verbose-mode')
+  .option('--internal-uikit',
+    '(For internal use only). ' +
+          'Excludes particular components from the conversion')
+  .action(convertFromCli)

package/bin/create.js

@@ -0,0 +1,98 @@
+'use strict'
+
+import chalk from 'chalk'
+import fs from 'fs'
+import path from 'path'
+import { exec, execSync } from 'child_process'
+import { program } from './program.js'
+import { addToJson } from './init-helpers/addToJson.js'
+
+function folderExists (path) {
+  try {
+    fs.accessSync(path, fs.constants.F_OK)
+    return true // The folder exists
+  } catch (err) {
+    return false // The folder does not exist
+  }
+}
+
+const REPO_URLS = {
+  domql: 'https://github.com/symbo-ls/starter-kit',
+  react: 'https://github.com/symbo-ls/create-react-app.git',
+  angular: 'https://github.com/symbo-ls/create-angular-app.git',
+  vue2: 'https://github.com/symbo-ls/create-vue2-app.git',
+  vue3: 'https://github.com/symbo-ls/create-vue3-app.git'
+}
+
+program
+  .command('create')
+  .description('Create and initialize a new project')
+  .argument('dest', 'Project directory')
+  .option('--verbose', 'Verbose output')
+  .option('--remote', 'Fetch from platform', true)
+  .option('--domql', 'Use DOMQL in the project', true)
+  .option('--react', 'Use React in the project (default)')
+  .option('--angular', 'Use Angular in the project')
+  .option('--vue2', 'Use Vue2 in the project')
+  .option('--vue3', 'Use Vue3 in the project')
+  .option('--package-manager <manager>', 'Choose the package manager (e.g., npm, yarn)', 'npm')
+  .option('--clean-from-git', 'remove starter-kit git repository', true)
+  .action(async (dest = 'symbols-starter-kit', options) => {
+    // Determine framework
+    let framework = 'domql'
+    if (options.react) {
+      framework = 'react'
+    } else if (options.angular) {
+      framework = 'angular'
+    } else if (options.vue2) {
+      framework = 'vue2'
+    } else if (options.vue3) {
+      framework = 'vue3'
+    }
+    const cloneUrl = REPO_URLS[framework]
+    const packageManager = options.packageManager || 'yarn'
+
+    if (folderExists(dest)) {
+      console.error(`Folder ${dest} already exists!`)
+      return
+    }
+
+    console.log(`Cloning ${cloneUrl} into '${dest}'...`)
+    execSync(`git clone ${options.remote ? ' -b feature/remote' : ''} ${cloneUrl} ${dest}`)
+
+    process.chdir(dest)
+
+    const SYMBOLS_FILE_PATH = path.join(process.cwd(), 'symbols.json')
+    addToJson(SYMBOLS_FILE_PATH, 'key', `${dest}.symbo.ls`)
+    addToJson(SYMBOLS_FILE_PATH, 'packageManager', `${packageManager}`)
+
+    console.log(`Installing dependencies using ${packageManager}...`)
+
+    const exc = exec(packageManager === 'yarn' ? 'yarn' : 'npm i')
+
+    if (options.verbose) {
+      exc.stdout.on('data', (data) => {
+        console.log(data)
+      })
+      exc.stderr.on('data', (data) => {
+        console.error(data)
+      })
+    } else {
+      console.log(chalk.dim('Use --verbose to print the output'))
+    }
+
+    console.log()
+
+    exc.on('close', (code) => {
+      console.log()
+      console.log(chalk.green.bold(dest), 'successfuly created!')
+      console.log(`Done! run \`${chalk.bold('cd ' + dest + '; ' + packageManager + ' start')}\` to start the development server.`)
+    })
+
+    if (options.cleanFromGit) {
+      fs.rmSync('.git', {
+        recursive: true,
+        force: true
+      })
+    }
+  })

package/bin/fetch.js

@@ -0,0 +1,152 @@
+#!/usr/bin/env node
+
+import fs from 'fs'
+import chalk from 'chalk'
+import { loadModule } from './require.js'
+import { program } from './program.js'
+import * as fetch from '@symbo.ls/fetch'
+import * as utils from '@domql/utils'
+import { convertFromCli } from './convert.js'
+import { createFs } from './fs.js'
+
+const { isObjectLike } = utils.default
+const { fetchRemote } = fetch.default
+
+const RC_PATH = process.cwd() + '/symbols.json'
+const LOCAL_CONFIG_PATH =
+  process.cwd() + '/node_modules/@symbo.ls/init/dynamic.json'
+const DEFAULT_REMOTE_REPOSITORY = 'https://github.com/symbo-ls/default-config/'
+const DEFAULT_REMOTE_CONFIG_PATH = "https://api.symbols.app/"; // eslint-disable-line
+
+const API_URL_LOCAL = 'http://localhost:13335/get'
+const API_URL = 'https://api.symbols.app/get'
+
+const rcFile = loadModule(RC_PATH); // eslint-disable-line
+const localConfig = loadModule(LOCAL_CONFIG_PATH); // eslint-disable-line
+
+const debugMsg = chalk.dim(
+  'Use --verbose to debug the error or open the issue at https://github.com/symbo-ls/smbls'
+)
+
+let rc = {}
+try {
+  rc = loadModule(RC_PATH); // eslint-disable-line
+} catch (e) {
+  console.error('Please include symbols.json to your root of respository')
+}
+
+export const fetchFromCli = async (opts) => {
+  const { dev, verbose, prettify, convert: convertOpt, metadata: metadataOpt, update, force } = opts
+  await rc.then(async (data) => {
+    const { key, framework, distDir, metadata } = data
+
+    const endpoint = dev ? API_URL_LOCAL : API_URL
+
+    console.log('\nFetching from:', chalk.bold(endpoint), '\n')
+
+    const body = await fetchRemote(key, {
+      endpoint,
+      metadata: metadata || metadataOpt,
+      onError: (e) => {
+        console.log(chalk.red('Failed to fetch:'), key)
+        if (verbose) console.error(e)
+        else console.log(debugMsg)
+      }
+    })
+
+    // console.log('ON FETCH:')
+    // console.log(body.components.Configuration)
+
+    if (!body) return
+
+    const { version, ...config } = body
+
+    if (body.designsystem) {
+      body.designSystem = body.designsystem
+      delete body.designsystem
+    }
+
+    if (verbose) {
+      if (key) {
+        console.log(
+          chalk.bold('Symbols'),
+          'data fetched for',
+          chalk.green(body.name)
+        )
+      } else {
+        console.log(
+          chalk.bold('Symbols'),
+          'config fetched from',
+          chalk.bold('default-config from:'),
+          chalk.dim.underline(DEFAULT_REMOTE_REPOSITORY)
+        )
+      }
+      console.log()
+    }
+
+    for (const t in config) {
+      const type = config[t]
+      const arr = []
+      if (isObjectLike(type)) {
+        for (const v in type) arr.push(v)
+        if (arr.length) {
+          console.log(chalk.dim(t + ':'))
+          console.log(chalk.bold(arr.join(', ')))
+        } else {
+          console.log(chalk.dim(t + ':'), chalk.dim('- empty -'))
+        }
+      } else console.log(chalk.dim(t + ':'), chalk.bold(type))
+    }
+
+    if (!distDir) {
+      const bodyString = JSON.stringify(body, null, prettify ?? 2)
+
+      try {
+        await fs.writeFileSync(LOCAL_CONFIG_PATH, bodyString)
+
+        if (verbose) {
+          console.log(chalk.dim('\ndynamic.json has been updated:'))
+          console.log(chalk.dim.underline(LOCAL_CONFIG_PATH))
+        }
+
+        console.log(chalk.bold.green('\nSuccessfully wrote file'))
+      } catch (e) {
+        console.log(chalk.bold.red('\nError writing file'))
+        if (verbose) console.error(e)
+        else console.log(debugMsg)
+      }
+
+      console.log()
+      console.warn('No --dist-dir option or "distDir" in symbols.json provided. Saving in ./node_modules/@symbo.ls/init/dynamic.json.')
+      return {}
+    }
+
+    if (body.components && convertOpt && framework) {
+      convertFromCli(body.components, { ...opts, framework })
+    }
+
+    if (update || force) {
+      createFs(body, distDir, { update: true, metadata })
+    } else {
+      createFs(body, distDir, { metadata })
+    }
+  })
+}
+
+program
+  .command('fetch')
+  .description('Fetch Symbols')
+  .option('-d, --dev', 'Running from local server')
+  .option('-v, --verbose', 'Verbose errors and warnings')
+  .option('--convert', 'Verbose errors and warnings', true)
+  .option('--metadata', 'Include metadata', false)
+  .option('--force', 'Force overriding changes from platform')
+  .option('--update', 'Overriding changes from platform')
+  .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(fetchFromCli({ cache: true }));

package/bin/fs.js

@@ -0,0 +1,325 @@
+import fs from 'fs'
+import chalk from 'chalk'
+import path from 'path'
+import utils from '@domql/utils'
+import * as smblsUtils from '@symbo.ls/utils'
+import inquirer from 'inquirer'
+import { createPatch } from 'diff'
+
+const { removeChars, toCamelCase } = smblsUtils.default
+const { deepDestringify, objectToString, joinArrays, isString, isObject, removeValueFromArray } = utils
+
+let singleFileKeys = ['designSystem', 'state', 'files']
+const directoryKeys = ['components', 'snippets', 'pages']
+
+const defaultExports = ['pages', 'designSystem', 'state', 'files', 'schema']
+
+export async function createFs (
+  body,
+  distDir = path.join(process.cwd(), 'smbls'),
+  opts = {}
+) {
+  if (!body) {
+    console.error('No JSON object provided. Exiting.')
+    return
+  }
+
+  const { update, metadata } = opts
+
+  singleFileKeys = removeValueFromArray(singleFileKeys, 'schema')
+  if (metadata) singleFileKeys.push('schema')
+
+  const targetDir = distDir
+
+  const filesExist = fs.existsSync(targetDir)
+
+  if (!filesExist || update) {
+    await fs.promises.mkdir(targetDir, { recursive: true })
+
+    const promises = [
+      ...directoryKeys.map((key) =>
+        createKeyDirectoryAndFiles(key, body, targetDir, update)
+      ),
+      ...singleFileKeys.map((key) => {
+        if (body[key] && typeof body[key] === 'object') {
+          return createSingleFileFolderAndFile(
+            key,
+            body[key],
+            targetDir,
+            update
+          )
+        }
+      })
+    ]
+
+    await Promise.all(promises)
+    await generateIndexjsFile(joinArrays(directoryKeys, singleFileKeys), targetDir, 'root')
+  } else if (filesExist) {
+    const cacheDir = path.join(distDir, '.cache')
+    await fs.promises.mkdir(cacheDir, { recursive: true })
+
+    const cachePromises = [
+      ...directoryKeys.map((key) =>
+        createKeyDirectoryAndFiles(key, body, cacheDir, true)
+      ),
+      ...singleFileKeys.map((key) => {
+        if (body[key] && typeof body[key] === 'object') {
+          return createSingleFileFolderAndFile(key, body[key], cacheDir, true)
+        }
+      })
+    ]
+
+    await Promise.all(cachePromises)
+    await generateIndexjsFile(joinArrays(directoryKeys, singleFileKeys), cacheDir, 'root')
+
+    const diffs = await findDiff(cacheDir, targetDir)
+    if (diffs.length > 0) {
+      console.log('Differences found:')
+      diffs.forEach((diff) => {
+        console.log(chalk.green(`File: ${diff.file}`))
+        console.log(chalk.yellow('Diff:'))
+        console.log(chalk.yellow(diff.diff))
+        console.log('---')
+      })
+      if (!update) {
+        const { consent } = await askForConsent()
+        if (consent) {
+          await overrideFiles(cacheDir, targetDir)
+          console.log('Files overridden successfully.')
+        } else {
+          console.log('Files not overridden.')
+        }
+      } else {
+        await overrideFiles(cacheDir, targetDir)
+        console.log('Files overridden successfully.')
+        console.log()
+        console.log(chalk.dim('\n----------------\n'))
+      }
+    } else {
+      console.log('No differences found.')
+      console.log()
+      console.log(chalk.dim('\n----------------\n'))
+    }
+  }
+
+  async function createKeyDirectoryAndFiles (key, body, distDir, update) {
+    const dirPath = path.join(distDir, key)
+    await fs.promises.mkdir(dirPath, { recursive: true })
+
+    const dirs = []
+
+    if (body[key] && isObject(body[key])) {
+      const promises = Object.entries(body[key]).map(
+        async ([entryKey, value]) => {
+          // if pages
+          if (entryKey.startsWith('/')) entryKey = entryKey.slice(1)
+          if (entryKey === '') entryKey = 'main'
+          if (entryKey.includes('*')) entryKey = 'fallback'
+
+          await createOrUpdateFile(dirPath, entryKey, value, update)
+          dirs.push(entryKey)
+        }
+      )
+
+      await Promise.all(promises)
+    }
+
+    await generateIndexjsFile(dirs, dirPath, key)
+  }
+
+  async function createOrUpdateFile (dirPath, childKey, value, update) {
+    const itemKey = childKey.includes('-') || childKey.includes('/') ? removeChars(toCamelCase(childKey)) : childKey
+    const filePath = path.join(dirPath, `${childKey.replace('/', '-')}.js`)
+
+    if (!update && fs.existsSync(filePath)) {
+      return
+    }
+
+    let stringifiedContent
+    if (isString(value)) {
+      stringifiedContent = `export const ${itemKey} = ${value}`
+    } else {
+      const content = deepDestringify(value)
+      // console.log('ON DEEPDESTR:')
+      // console.log(content.components.Configuration)
+      stringifiedContent = `export const ${itemKey} = ${objectToString(content)};`
+    }
+
+    await fs.promises.writeFile(filePath, stringifiedContent, 'utf8')
+  }
+
+  async function createSingleFileFolderAndFile (key, data, distDir, update) {
+    const filePath = path.join(distDir, `${key}.js`)
+
+    if (!update && fs.existsSync(filePath)) {
+      return
+    }
+
+    if (isString(data)) data = { default: data }
+    const content = deepDestringify(data)
+    const stringifiedContent = `export default ${objectToString(content)};`
+
+    await fs.promises.writeFile(filePath, stringifiedContent, 'utf8')
+  }
+
+  // Generate final package.json string
+  // function createPackageJson (key, data, distDir, update) {
+  // const genStr = JSON.stringify({
+  //   name: `@symbo.ls/${desiredFormat}-${packageName}`,
+  //   version: packageStruct.version ?? '1.0.0',
+  //   license: packageStruct.license ?? 'UNLICENSED',
+  //   dependencies: deps,
+  //   peerDependencies: {
+  //     smbls: '^18.2.0',
+  //     'react-dom': '^18.2.0'
+  //   },
+  //   main: 'index.js',
+  //   source: 'index.js'
+  // }, undefined, 2)
+
+  // fs.writeFileSync(destPath, genStr)
+  // }
+}
+
+async function findDiff (targetDir, distDir) {
+  const diffs = []
+
+  for (const key of directoryKeys) {
+    const targetDirPath = path.join(targetDir, key)
+    const distDirPath = path.join(distDir, key)
+
+    if (!fs.existsSync(targetDirPath)) {
+      continue
+    }
+
+    const targetFiles = await fs.promises.readdir(targetDirPath)
+    for (const file of targetFiles) {
+      if (file === 'index.js') {
+        continue // Skip comparing index.js files
+      }
+
+      const targetFilePath = path.join(targetDirPath, file)
+      const distFilePath = path.join(distDirPath, file)
+
+      if (!fs.existsSync(distFilePath)) {
+        diffs.push({
+          file: path.join(key, file),
+          diff: `File ${path.join(
+            key,
+            file
+          )} does not exist in the dist directory.`
+        })
+        continue
+      }
+
+      const targetContent = await fs.promises.readFile(
+        targetFilePath,
+        'utf8'
+      )
+      const distContent = await fs.promises.readFile(distFilePath, 'utf8')
+
+      if (targetContent !== distContent) {
+        const diff = createPatch(file, distContent, targetContent)
+        diffs.push({
+          file: path.join(key, file),
+          diff
+        })
+      }
+    }
+  }
+
+  for (const key of singleFileKeys) {
+    const targetFilePath = path.join(targetDir, `${key}.js`)
+    const distFilePath = path.join(distDir, `${key}.js`)
+
+    if (!fs.existsSync(targetFilePath)) {
+      continue
+    }
+
+    if (!fs.existsSync(distFilePath)) {
+      diffs.push({
+        file: `${key}.js`,
+        diff: `File ${key}.js does not exist in the dist directory.`
+      })
+      continue
+    }
+
+    const targetContent = await fs.promises.readFile(targetFilePath, 'utf8')
+    const distContent = await fs.promises.readFile(distFilePath, 'utf8')
+
+    if (targetContent !== distContent) {
+      const diff = createPatch(key, distContent, targetContent)
+      diffs.push({
+        file: `${key}.js`,
+        diff
+      })
+    }
+  }
+
+  return diffs
+}
+
+async function generateIndexjsFile (dirs, dirPath, key) {
+  let indexContent
+  if (key === 'pages') {
+    indexContent =
+    dirs.map((d) => `import { ${d.includes('-') || d.includes('/') ? removeChars(toCamelCase(d)) : d} } from './${d.replace('/', '-')}';`).join('\n') + '\n' +
+    `export default {
+      ${dirs.map((d) => `'/${d === 'main' ? '' : d}': ${d.includes('-') || d.includes('/') ? removeChars(toCamelCase(d)) : d},`).join('\n') + '\n'}
+    }`
+  } else if (key === 'root') {
+    indexContent =
+    dirs.map((d) => {
+      if (defaultExports.includes(d)) return `export { default as ${d} } from './${d}';`
+      else return `export * as ${d} from './${d}';`
+    }).join('\n') + '\n'
+  } else {
+    indexContent =
+    dirs.map((d) => `export * from './${d}';`).join('\n') + '\n'
+  }
+  const indexFilePath = path.join(dirPath, 'index.js')
+  await fs.promises.writeFile(indexFilePath, indexContent, 'utf8')
+}
+
+async function overrideFiles (targetDir, distDir) {
+  for (const key of directoryKeys) {
+    const targetDirPath = path.join(targetDir, key)
+    const distDirPath = path.join(distDir, key)
+
+    if (!fs.existsSync(targetDirPath)) {
+      continue
+    }
+
+    const targetFiles = await fs.promises.readdir(targetDirPath)
+    for (const file of targetFiles) {
+      const targetFilePath = path.join(targetDirPath, file)
+      const distFilePath = path.join(distDirPath, file)
+
+      await fs.promises.copyFile(targetFilePath, distFilePath)
+    }
+  }
+
+  for (const key of singleFileKeys) {
+    const targetFilePath = path.join(targetDir, `${key}.js`)
+    const distFilePath = path.join(distDir, `${key}.js`)
+
+    if (!fs.existsSync(targetFilePath)) {
+      continue
+    }
+
+    await fs.promises.copyFile(targetFilePath, distFilePath)
+  }
+}
+
+async function askForConsent () {
+  const questions = [
+    {
+      type: 'confirm',
+      name: 'consent',
+      message: 'Do you want to override the files?',
+      default: false
+    }
+  ]
+
+  return inquirer.prompt(questions)
+}

package/bin/index.js

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+
+import 'v8-compile-cache'
+
+import { program } from './program.js'
+import './install.js'
+import './init.js'
+import './fetch.js'
+import './sync.js'
+import './clean.js'
+import './convert.js'
+import './create.js'
+import './link-packages.js'
+
+const args = process.argv
+program.parse(args)

package/bin/init-helpers/DesignSystem.js

@@ -0,0 +1,15 @@
+export const CustomDesignSystem = {
+  ANIMATION: {},
+  COLOR: {},
+  GRADIENT: {},
+  THEME: {},
+  TYPOGRAPHY: {},
+  SPACING: {},
+  SVG: {},
+  ICONS: {},
+  FONT: {},
+  FONT_FAMILY: {},
+  TIMING: {},
+  MEDIA: {},
+  RESET: {}
+}

package/bin/init-helpers/addToJson.js

@@ -0,0 +1,27 @@
+'use strict'
+
+import fs from 'fs'
+
+// Step 1: Read the JSON file
+export const addToJson = (filePath, key, value) => {
+  const data = fs.readFileSync(filePath, { encoding: 'utf8' })
+  if (!data) {
+    console.error('Error reading file:', data)
+    return
+  }
+
+  try {
+    const jsonData = JSON.parse(data)
+
+    jsonData[key] = value
+
+    fs.writeFileSync(filePath, JSON.stringify(jsonData, null, 2), 'utf8', err => {
+      if (err) {
+        console.error('Error writing file:', err)
+      }
+      console.log(filePath, JSON.stringify(jsonData, null, 2))
+    })
+  } catch (parseError) {
+    console.error('Error parsing JSON:', parseError)
+  }
+}

package/bin/init-helpers/init-repo.js

@@ -0,0 +1,62 @@
+'use strict'
+
+import chalk from 'chalk'
+import fs from 'fs'
+import path from 'path'
+import { execSync } from 'child_process'
+import { fileURLToPath } from 'url'
+import { addToJson } from './addToJson.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const SYMBOLS_FILE_PATH = path.join(
+  __dirname, 'symbols.json')
+const DESIGN_SYSTEM_FILE_PATH = path.join(
+  __dirname, 'DesignSystem.js')
+
+export async function initRepo (dest, framework) {
+  const cwd = process.cwd()
+
+  // Init NPM if necessary
+  if (!fs.existsSync(path.join(dest, 'package.json'))) {
+    process.chdir(dest)
+    console.log('Running npm init')
+    execSync('npm init -y')
+    process.chdir(cwd)
+  }
+
+  // Determine framework
+  let pkg = 'smbls'
+  if (framework === 'react') {
+    pkg = '@symbo.ls/react'
+  } else if (framework === 'angular') {
+    pkg = '@symbo.ls/react'
+  } else if (framework === 'vue2') {
+    pkg = '@symbo.ls/vue2'
+  } else if (framework === 'vue3') {
+    pkg = '@symbo.ls/vue3'
+  }
+
+  // TODO: inject smbls dependencies into package.json
+
+  // Install
+  console.log(`Installing \`${pkg}\` from NPM...`)
+  process.chdir(dest)
+  // execSync(`npm i ${pkg} --save`)
+  process.chdir(cwd)
+
+  // Copy design system file
+  console.log()
+  const dsfilePath = path.join(dest, 'DesignSystem.js')
+  console.log('Creating', chalk.bold(dsfilePath))
+  await fs.promises.copyFile(DESIGN_SYSTEM_FILE_PATH, dsfilePath)
+
+  // Copy design system file
+  const rcfilePath = path.join(dest, 'symbols.json')
+  console.log('Creating', chalk.bold(rcfilePath))
+  await fs.promises.copyFile(SYMBOLS_FILE_PATH, rcfilePath)
+  if (framework !== 'domql') addToJson(SYMBOLS_FILE_PATH, 'framework', framework)
+  console.log()
+
+  console.log(chalk.green.bold('Initialized project successfully.'))
+}

package/bin/init-helpers/symbols.json

@@ -0,0 +1,3 @@
+{
+  "key": "projectKey.symbo.ls"
+}

package/bin/init.js

@@ -0,0 +1,32 @@
+'use strict'
+
+import { program } from './program.js'
+import { initRepo } from './init-helpers/init-repo.js'
+
+program
+  .command('init')
+  .description('Initialize within the project')
+  .argument('[dest]', 'Project directory. By default, it is "."')
+  .option('--domql', 'Use Domql in the project', true)
+  .option('--react', 'Use React in the project (default)')
+  .option('--angular', 'Use Angular in the project')
+  .option('--vue2', 'Use Vue2 in the project')
+  .option('--vue3', 'Use Vue3 in the project')
+  .action(async (dest, options) => {
+    if (!dest) dest = '.'
+
+    // Determine framework
+    let framework = 'domql'
+    if (options.react) {
+      framework = 'react'
+    } else if (options.angular) {
+      framework = 'angular'
+    } else if (options.vue2) {
+      framework = 'vue2'
+    } else if (options.vue3) {
+      framework = 'vue3'
+    }
+
+    // Leave the rest to init
+    return await initRepo(dest, framework)
+  })

package/bin/install.js

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+
+import chalk from 'chalk'
+import { loadModule } from './require.js'
+import { exec } from 'child_process'
+import { program } from './program.js'
+
+const PACKAGE_PATH = process.cwd() + '/package.json'
+const RC_PATH = process.cwd() + '/symbols.json'
+const LOCAL_CONFIG_PATH = process.cwd() + '/node_modules/@symbo.ls/init/dynamic.json'
+const DEFAULT_REMOTE_CONFIG_PATH = 'https://api.symbols.app/' // eslint-disable-line
+
+const pkg = loadModule(PACKAGE_PATH)
+const rcFile = loadModule(RC_PATH) // eslint-disable-line
+const localConfig = loadModule(LOCAL_CONFIG_PATH) // eslint-disable-line
+
+let rc = {}
+try {
+  rc = loadModule(RC_PATH) // eslint-disable-line
+} catch (e) { console.error('Please include symbols.json to your root of respository') }
+
+const makeCommand = (packageManager, packageName) => {
+  return packageManager === 'yarn'
+    ? `yarn add ${packageName}`
+    : packageManager === 'pnpm'
+      ? `pnpm add ${packageName}`
+      : `npm i ${packageName} --save`
+}
+
+export const installFromCli = async (options) => {
+  if (!rcFile || !localConfig) {
+    console.error('symbols.json not found in the root of the repository')
+    return
+  }
+
+  const framework = rcFile.framework || options.framework
+  const packageManager = rcFile.packageManager || options.packageManager
+
+  // const packageName = `@symbo.ls/${mode || 'uikit'}`
+  const packageName = framework === 'react' ? '@symbo.ls/react' : 'smbls'
+  console.log('Adding', chalk.green.bold(packageName))
+
+  const command = makeCommand(packageManager, packageName)
+  exec(command, (error, stdout, stderr) => {
+    if (error) {
+      console.log(`error: ${error.message}`)
+      return
+    }
+    if (stderr) {
+      console.log(`stderr: ${stderr}`)
+      // return;
+    }
+    console.log('')
+    console.log(`stdout: ${stdout}`)
+    console.log('\n')
+    console.log(chalk.green.bold(packageName), 'successfuly added!')
+    console.log('')
+    console.log(
+      chalk.dim('Now you can import components like:'),
+      `import { Button } from '${packageName}'`
+    )
+  })
+}
+
+program
+  .version(pkg.version ?? 'unknown')
+
+program
+  .command('install')
+  .description('Install Symbols')
+  .option('-d, --dev', 'Running from local server')
+  .option('-v, --verbose', 'Verbose errors and warnings')
+  .option('-f, --fetch', 'Verbose errors and warnings', true)
+  .option('--framework', 'Which Symbols to install (domql, react)')
+  .action(installFromCli)

package/bin/link-packages.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+import fs from 'fs'
+import { exec, execSync } from 'child_process'
+import { program } from './program.js'
+
+import packages from './linking/packages.js'
+
+const COMMAND = 'npx lerna exec -- cat package.json | jq \'.name\''
+const capture = (opts) => {
+  exec(COMMAND, (error, stdout, stderr) => {
+    if (error) {
+      console.error(`Error executing command: ${error}`)
+      return
+    }
+
+    const packageNames = stdout
+      .split('\n')
+      .map((line) => line.trim().replaceAll('"', '\''))
+      .filter(Boolean)
+
+    const output = `export default [
+  ${packageNames.map((name) => `${name}`).join(',\n  ')}
+]\n`
+
+    try {
+      fs.writeFileSync(process.cwd() + '/packages/cli/bin/linking/packages.js', output)
+      console.log(`Packages list with ${packageNames.length} items successfully created\n`)
+    } catch (e) {
+      console.error('Error writing to file:')
+      console.error(e)
+    }
+
+    execSync(`yarn link ${packages.join(' ')} --force`, { stdio: 'inherit' })
+  })
+}
+
+program
+  .command('link-packages')
+  .description('Links all smbls packages into the project')
+  .option('-c, --capture', 'Capture and write all package names.')
+  .option('-j, --join', 'Join all links into one command.', true)
+  .action((opts) => {
+    if (opts.capture) return capture(opts)
+    if (opts.join) {
+      try {
+        console.log('Linking all smbls packages...')
+        execSync(`yarn link ${packages.join(' ')} --force`, { stdio: 'inherit' })
+        console.log('All packages linked successfully.')
+      } catch (error) {
+        console.error('Error linking packages:', error.message)
+        process.exit(1)
+      }
+      return
+    }
+    try {
+      for (const packageName of packages) {
+        console.log(`Linking ${packageName}...`)
+        execSync(`yarn link ${packageName} --force`, { stdio: 'inherit' })
+      }
+      console.log('All packages linked successfully.')
+    } catch (error) {
+      console.error('Error linking packages:', error.message)
+      process.exit(1)
+    }
+  })

package/bin/linking/packages.js

@@ -0,0 +1,65 @@
+export default [
+  'attrs-in-props',
+  '@symbo.ls/cli',
+  '@symbo.ls/convert',
+  '@symbo.ls/create',
+  'css-in-props',
+  '@symbo.ls/default-config',
+  '@symbo.ls/emotion',
+  '@symbo.ls/init',
+  '@symbo.ls/fetch',
+  '@symbo.ls/preview',
+  '@symbo.ls/scratch',
+  'smbls',
+  '@symbo.ls/socket-ui',
+  '@symbo.ls/socket',
+  '@symbo.ls/uikit',
+  '@symbo.ls/utils',
+  '@symbo.ls/default-icons',
+  '@symbo.ls/feather-icons',
+  '@symbo.ls/fluent-icons',
+  '@symbo.ls/material-icons',
+  '@symbo.ls/google-maps',
+  '@symbo.ls/editorjs',
+  '@symbo.ls/helmet',
+  '@symbo.ls/markdown',
+  '@symbo.ls/atoms',
+  '@symbo.ls/avatar',
+  '@symbo.ls/banner',
+  '@symbo.ls/box',
+  '@symbo.ls/button',
+  '@symbo.ls/card',
+  '@symbo.ls/datepicker',
+  '@symbo.ls/dialog',
+  '@symbo.ls/doublehr',
+  '@symbo.ls/dropdown',
+  '@symbo.ls/field',
+  '@symbo.ls/form',
+  '@symbo.ls/hgroup',
+  '@symbo.ls/icon',
+  '@symbo.ls/indicator',
+  '@symbo.ls/input',
+  '@symbo.ls/label',
+  '@symbo.ls/link',
+  '@symbo.ls/list',
+  '@symbo.ls/modal',
+  '@symbo.ls/paragraphbutton',
+  '@symbo.ls/pills',
+  '@symbo.ls/notification',
+  '@symbo.ls/progress',
+  '@symbo.ls/range',
+  '@symbo.ls/select',
+  '@symbo.ls/sidebar',
+  '@symbo.ls/slider',
+  '@symbo.ls/sociallink',
+  '@symbo.ls/steps',
+  '@symbo.ls/table',
+  '@symbo.ls/tab',
+  '@symbo.ls/threejs',
+  '@symbo.ls/timepicker',
+  '@symbo.ls/tooltip',
+  '@symbo.ls/unitvalue',
+  '@symbo.ls/upload',
+  '@symbo.ls/user',
+  '@symbo.ls/video'
+]

package/bin/login.js

@@ -0,0 +1,18 @@
+'use strict'
+
+const { program } = require('./program')
+const API_URL = 'https://api.symbols.dev/' // eslint-disable-line
+
+program
+  .command('login [destination]')
+  .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)
+  })

package/bin/program.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander'
+export const program = new Command()

package/bin/require.js

@@ -0,0 +1,13 @@
+'use strict'
+
+import fs from 'fs'
+import { createRequire } from 'module'
+
+class ImportError extends Error {} /* Bring in the ability to create the 'require' method */ // eslint-disable-line
+const require = createRequire(import.meta.url) // construct the require method
+
+export const loadModule = async (modulePath) => {
+  if (fs.existsSync(modulePath)) {
+    return require(modulePath)
+  } else { return null }
+}

package/bin/socket-server.js

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+
+import { sync } from '@symbo.ls/socket'
+import { program } from './program.js'
+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') }
+
+program
+  .command('socket-server')
+  .description('Realtime sync with Symbols')
+  .option('-l, --live', 'Bypass the local build')
+  .action(async (options) => {
+    rc.then(data => {
+      const opts = { ...data, ...options }
+      sync(null, opts)
+    })
+  })

package/bin/symbols.json

@@ -0,0 +1 @@
+{}

package/bin/sync.js

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+
+import chalk from 'chalk'
+import { program } from './program.js'
+import { loadModule } from './require.js'
+import { updateDynamycFile } from '@symbo.ls/socket'
+import * as utils from '@domql/utils'
+
+import * as socketClient from '@symbo.ls/socket/client.js'
+import { fetchFromCli } from './fetch.js'
+import { convertFromCli } from './convert.js'
+
+const { debounce } = utils.default
+
+const SOCKET_API_URL_LOCAL = 'http://localhost:13336/'
+const SOCKET_API_URL = 'https://socket.symbols.app/'
+
+const debugMsg = chalk.dim('Use --verbose to debug the error or open the issue at https://github.com/symbo-ls/smbls')
+
+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') }
+
+program
+  .command('sync')
+  .description('Realtime sync with Symbols')
+  .option('-d, --dev', 'Running from local server')
+  .option('-v, --verbose', 'Verbose errors and warnings')
+  .option('-k, --key', 'Bypass the symbols.json key, overriding the key manually')
+  .option('-f, --fetch', 'Verbose errors and warnings', true)
+  .option('--convert', 'Verbose errors and warnings', true)
+  .option('--update', 'overriding changes from platform', true)
+  .option('--verbose-code', 'Verbose errors and warnings')
+  .action(async (opts) => {
+    const { dev, verbose, fetch: fetchOpt, convert: convertOpt } = opts
+
+    if (fetchOpt) {
+      await fetchFromCli(opts)
+      console.log(chalk.dim('\n----------------\n'))
+    }
+
+    if (!rc) {
+      console.error('symbols.json not found in the root of the repository')
+      return
+    }
+
+    // if (rc) return false /// /////////////////////
+
+    await rc.then(symbolsrc => {
+      const options = { ...symbolsrc, ...opts }
+      const { framework, distDir, prettify, verboseCode } = options
+      const key = options.key || opts.key
+      const socketUrl = dev ? SOCKET_API_URL_LOCAL : SOCKET_API_URL
+
+      console.log('Connecting to:', chalk.bold(socketUrl))
+      console.log()
+
+      socketClient.connect(key, {
+        source: 'cli',
+        socketUrl,
+        onConnect: (id, socket) => {
+          console.log('Connected to', chalk.green(key), 'from', chalk.bold('Symbols'), 'socket server')
+          console.log('Socket id:', id)
+          console.log(chalk.dim('\nListening to updates...\n'))
+        },
+        onChange: debounce(async (event, data) => {
+          if (event === 'clients') {
+            console.log(
+              'Active clients:',
+              chalk.green.bold(Object.keys(data).join(', '))
+            )
+            return
+          }
+
+          const parseData = JSON.parse(data)
+          const d = parseData && parseData.DATA
+
+          if (!d) return
+
+          if (Object.keys(d).length) {
+            console.log(chalk.dim('\n----------------\n'))
+            console.log(chalk.dim('Received update:'))
+            console.log(Object.keys(d).join(', '))
+            if (verboseCode) console.log(chalk.dim(JSON.stringify(d, null, prettify ?? 2)))
+
+            if (distDir) {
+              if (fetchOpt) {
+                await fetchFromCli(options)
+                console.log(chalk.dim('\n----------------\n'))
+                return
+              }
+            } else {
+              updateDynamycFile(d, { framework, ...options })
+            }
+          }
+
+          if (d.components && convertOpt && framework) {
+            convertFromCli(d.components, {
+              ...options, framework
+            })
+          }
+        }, 1500),
+        onError: (err, socket) => {
+          console.log(chalk.bold.green('Error during connection'))
+          if (verbose) console.error(err)
+          else console.log(debugMsg)
+        },
+        ...options
+      })
+    })
+  })

package/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "create-smbls",
+  "version": "2.11.378"
+}