@symbo.ls/cli 2.11.59 → 2.11.61

package/bin/create.js

@@ -1,8 +1,20 @@
 'use strict'
 
+import chalk from 'chalk'
+import fs from 'fs'
+import path from 'path'
 import { execSync } from 'child_process'
 import { program } from './program.js'
-import { initRepo } from './init-helpers/init-repo.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',
@@ -16,12 +28,12 @@ program
   .command('create')
   .description('Create and initialize a new project')
   .argument('dest', 'Project directory')
-  .option('--domql', 'Use DOMQL in the project')
-  .option('--react', 'Use React in the project (default)', 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')
-  .action(async (dest, options) => {
+  .action(async (dest = 'symbols-starter-kit', options) => {
     // Determine framework
     let framework = 'domql'
     if (options.react) {
@@ -35,10 +47,23 @@ program
     }
     const cloneUrl = REPO_URLS[framework]
 
-    // Clone
+    if (folderExists(dest)) {
+      console.error(`Folder ${dest} already exists!`)
+      return
+    }
+
     console.log(`Cloning ${cloneUrl} into '${dest}'...`)
     execSync(`git clone ${cloneUrl} ${dest}`)
 
-    // Leave the rest to init
-    return await initRepo(dest, framework)
+    process.chdir(dest)
+
+    const SYMBOLS_FILE_PATH = path.join(process.cwd(), 'symbols.json')
+    addToJson(SYMBOLS_FILE_PATH, 'key', `${dest}.symbo.ls`)
+
+    console.log('Installing Dependencies...')
+    console.log()
+    execSync('npm i')
+    console.log()
+    console.log(chalk.green.bold(dest), 'successfuly created!')
+    console.log(`Done! run \`${chalk.bold('npm start')}\` to start the development server.`)
   })

package/bin/init-helpers/DesignSystem.js

@@ -1,14 +1,15 @@
 export const CustomDesignSystem = {
-  color: {
-    snowWhite: '#F3F6FB'
-  },
-  theme: {},
-  typography: {},
-  space: {},
-  media: {},
-  icons: {},
-  font: {},
-  font_family: {},
-  timing: {},
-  reset: {}
+  ANIMATION: {},
+  COLOR: {},
+  GRADIENT: {},
+  THEME: {},
+  TYPOGRAPHY: {},
+  SPACING: {},
+  SVG: {},
+  ICONS: {},
+  FONT: {},
+  FONT_FAMILY: {},
+  TIMING: {},
+  MEDIA: {},
+  RESET: {}
 }

package/bin/init-helpers/addToJson.js

@@ -0,0 +1,28 @@
+'use strict'
+
+import fs from 'fs'
+
+// Step 1: Read the JSON file
+export const addToJson = (filePath, key, value) => {
+  fs.readFile(filePath, 'utf8', (err, data) => {
+    if (err) {
+      console.error('Error reading file:', err)
+      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

@@ -1,11 +1,16 @@
 'use strict'
 
-import { execSync } from 'child_process'
+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')
 
@@ -20,18 +25,38 @@ export async function initRepo (dest, framework) {
     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 NPM dependencies...')
+  console.log(`Installing \`${pkg}\` from NPM...`)
   process.chdir(dest)
-  execSync('npm install', { stdio: ['inherit', 'inherit', 'ignore'] })
+  // execSync(`npm i ${pkg} --save`)
   process.chdir(cwd)
 
   // Copy design system file
-  const filePath = path.join(dest, 'DesignSystem.js')
-  console.log(`Writing DesignSystem.js to ${filePath}`)
-  await fs.promises.copyFile(DESIGN_SYSTEM_FILE_PATH, filePath)
+  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('Done!')
+  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

@@ -7,8 +7,8 @@ program
   .command('init')
   .description('Initialize a project')
   .argument('[dest]', 'Project directory. By default, it is "."')
-  .option('--domql', 'Use Domql in the project')
-  .option('--react', 'Use React in the project (default)', 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')
@@ -16,9 +16,9 @@ program
     if (!dest) dest = '.'
 
     // Determine framework
-    let framework = 'react'
-    if (options.domql) {
-      framework = 'domql'
+    let framework = 'domql'
+    if (options.react) {
+      framework = 'react'
     } else if (options.angular) {
       framework = 'angular'
     } else if (options.vue2) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/cli",
-  "version": "2.11.59",
+  "version": "2.11.61",
   "description": "Fetch your Symbols configuration",
   "main": "bin/fetch.js",
   "author": "Symbols",
@@ -27,5 +27,5 @@
   "peerDependencies": {
     "domql-to-mitosis": "latest"
   },
-  "gitHead": "285850864e56374f450c1f18e497b3886aa70e03"
+  "gitHead": "8e1db51c5601f1d344cfbaea5adbfd6a91e7407f"
 }