@cosmicjs/blocks - npm Package Compare versions

Comparing version 0.0.719 to 0.0.821

index.js

@@ -8,2 +8,4 @@ #!/usr/bin/env node
 import { blockGenerator } from "./utils/block-generator.js"
+import { performance } from "perf_hooks"
+
 import chalk from "chalk"
@@ -35,3 +37,5 @@
       "class-variance-authority",
+      "tailwind-merge",
     ],
+    elements: ["Button"],
   },
@@ -47,2 +51,3 @@ comments: {
     ],
+    elements: ["Button", "Input", "Label", "TextArea"],
   },
@@ -66,3 +71,3 @@ "image-gallery": {
   products: {
-    name: "products",
+    name: "Products",
     installationSteps: [
@@ -73,2 +78,3 @@ "@cosmicjs/sdk",
     ],
+    elements: ["Button"],
   },
@@ -86,5 +92,8 @@ events: {
     chalk.yellow(
-      `-> Initiating installation of ${capitalize(blockData.name)} Block...`
+      `➤ Initiating installation of ${chalk.bold(
+        capitalize(blockData.name)
+      )} Block...`
     )
   )
+  console.log(" ")
 
@@ -101,11 +110,28 @@ // source code for the block
   .argument("<components...>", "the blocks to add")
-  .action((components) => {
-    components.forEach((component) => {
-      // Iterate through the blocks
+  .action(async (components) => {
+    const startTime = performance.now()
+    for (const component of components) {
       if (!Object.keys(blocks).includes(component)) {
-        console.error(
-          `"${component}" is an invalid Block name. Please find a valid list of Blocks on cosmicjs.com/blocks`
+        return console.error(
+          chalk.red(
+            `"${component}" is an invalid Block name. Please find a valid list of Blocks on cosmicjs.com/blocks`
+          )
         )
-      } else addComponent(component)
-    })
+      } else {
+        await addComponent(component)
+      }
+    }
+    const endTime = performance.now()
+    const speed = ((endTime - startTime) / 1000).toFixed(2)
+
+    if (speed < 10)
+      console.log(
+        chalk.greenBright(`ϟ Executed superfast in ${speed} seconds!`)
+      )
+
+    console.log(
+      chalk.yellow(
+        `➤ View more Blocks at ${chalk.bold("cosmicjs.com/blocks.")}`
+      )
+    )
   })
@@ -112,0 +138,0 @@

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "0.0.719",
+  "version": "0.0.821",
   "description": "Cosmic blocks setup",
@@ -39,7 +39,10 @@ "main": "index.js",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
     "chalk": "^5.3.0",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "commander": "^11.1.0",
     "execa": "^8.0.1",
-    "lucide-react": "^0.300.0",
+    "lucide-react": "^0.302.0",
     "prompts": "^2.4.2",
@@ -46,0 +49,0 @@ "react-markdown": "^9.0.1",

utils/block-generator.js

@@ -16,10 +16,46 @@ import fs from "fs"
 async function blockGenerator(blockObject, sourceFolderPath) {
-  const { installationSteps, executionSteps, name } = blockObject
+  const { installationSteps, executionSteps, name, elements } = blockObject
   const packageManager = await getPackageManager()
 
+  const cosmicFolderPath = createCosmicFolder()
+  const blocksPath = createBlocksFolder(cosmicFolderPath)
+
+  // Create a folder with the block's name key
+  let destinationFolderPath = path.join(
+    blocksPath,
+    name.toLowerCase().replace(" ", "-")
+  )
+
+  if (fs.existsSync(destinationFolderPath)) {
+    const response = await prompts({
+      type: "select",
+      name: "overwrite",
+      message: `Looks like the ${chalk.yellow(
+        name
+      )} Block already exists. Do you want to ${chalk.red("overwrite")} it?`,
+      choices: [
+        { title: "Yes, overwrite", value: true },
+        { title: "No, cancel installation", value: false },
+      ],
+      initial: 0, // Initial selection is "Yes",
+      sessionId: name, // Unique session ID
+    })
+
+    if (response.overwrite) {
+      // Remove existing folder
+      console.log(`Overwriting existing ${chalk.bold(name)} folder...`)
+      fs.rmSync(destinationFolderPath, { recursive: true })
+    } else {
+      console.log(
+        chalk.red(`✗ Installation for ${chalk.bold(name)} Block cancelled.`)
+      )
+      console.log(" ")
+      return
+    }
+  }
+
   // Step 1. Installing and executing packages & scripts
   try {
-    console.log(
-      `Installing required packages for ${chalk.yellow(name)} Block...`
-    )
+    console.log(`Installing required packages for ${chalk.bold(name)} Block...`)
+
     const executeCommand = getCommand(packageManager, "execute")
@@ -45,3 +81,5 @@
       console.log(
-        chalk.green(`Packages for ${name} Block installed successfully!`)
+        chalk.green(
+          `✔ Packages for ${chalk.bold(name)} Block installed successfully!`
+        )
       )
@@ -51,3 +89,5 @@ }
     console.error(
-      chalk.red(`Error installing required packages for ${name} Block:`),
+      chalk.red(
+        `✗ Error installing required packages for ${chalk.bold(name)} Block:`
+      ),
       error
@@ -59,5 +99,2 @@ )
   try {
-    const cosmicFolderPath = createCosmicFolder()
-    const blocksPath = createBlocksFolder(cosmicFolderPath)
-
     // After the Blocks folder is created
@@ -69,32 +106,2 @@ if (blocksPath) {
 
-      // Create a folder with the block's name key
-      let destinationFolderPath = path.join(
-        blocksPath,
-        name.toLowerCase().replace(" ", "-")
-      )
-      console.log(destinationFolderPath)
-      if (fs.existsSync(destinationFolderPath)) {
-        const response = await prompts({
-          type: "select",
-          name: "overwrite",
-          message: `Looks like the Block ${chalk.yellow(
-            name
-          )} already exists. Do you want to ${chalk.red("overwrite")} it?`,
-          choices: [
-            { title: "Yes, overwrite", value: true },
-            { title: "No, cancel installation", value: false },
-          ],
-          initial: 0, // Initial selection is "Yes"
-        })
-
-        if (response.overwrite) {
-          // Remove existing folder
-          console.log(`Overwriting existing ${name} folder`)
-          fs.rmSync(destinationFolderPath, { recursive: true })
-        } else {
-          console.log(chalk.red("Installation cancelled."))
-          return
-        }
-      }
-
       // Create the new folder
@@ -105,3 +112,3 @@ fs.mkdirSync(destinationFolderPath)
       fs.readdirSync(sourceFolderPath).forEach((file) => {
-        console.log("-> Copying", file, "...")
+        console.log("➤ Copying", file, "...")
         const sourceFile = path.join(sourceFolderPath, file)
@@ -113,7 +120,44 @@ const destinationFile = path.join(destinationFolderPath, file)
 
+    // Copy Elements from the source folder to the destination folder
+    if (!!elements?.length) {
+      for (const element of elements) {
+        const elementFilePath = path.join(
+          __dirname,
+          "../src/elements",
+          `${element}.tsx`
+        )
+
+        const elementsFolderPath = path.join(cosmicFolderPath, "elements")
+
+        if (!fs.existsSync(elementsFolderPath)) {
+          fs.mkdirSync(elementsFolderPath, { recursive: true })
+        }
+
+        const cosmicElementsFilePath = path.join(
+          elementsFolderPath,
+          `${element}.tsx`
+        )
+
+        if (fs.existsSync(elementFilePath)) {
+          if (!fs.existsSync(cosmicElementsFilePath)) {
+            console.log(`➤ Copying ${element} element...`)
+            fs.copyFileSync(elementFilePath, cosmicElementsFilePath)
+          }
+        }
+      }
+    }
+
     // Update tailwind config to include Cosmic folder
     updateTailwindFile()
 
-    console.log(chalk.green(`Block ${name} added successfully!`))
-    console.log(chalk.yellow(`View more blocks at cosmicjs.com/blocks.`))
+    console.log(
+      chalk.green(
+        `✔ ${chalk.bold(
+          name
+        )} Block added successfully! Find it at /cosmic/blocks/${name
+          .toLowerCase()
+          .replace(" ", "-")}`
+      )
+    )
+    console.log(" ")
   } catch (error) {
@@ -123,7 +167,12 @@ if (error.code === "EEXIST")
         chalk.red(
-          `ERROR: Installation failed. Looks like Block "${name}" or a folder with the same name already exists.`
+          `✗ ERROR: Installation failed. Looks like "${chalk.bold(
+            name
+          )}" Block or a folder with the same name already exists.`
         )
       )
     else
-      console.error(chalk.red(`Error copying code for ${name} Block:`), error)
+      console.error(
+        chalk.red(`✗ Error copying code for ${chalk.bold(name)} Block:`),
+        error
+      )
     return ""
@@ -137,29 +186,38 @@ }
   const tailwindConfigPath = path.join(process.cwd(), "tailwind.config.js")
+  const tailwindConfigTSPath = path.join(process.cwd(), "tailwind.config.ts")
+
   if (fs.existsSync(tailwindConfigPath)) {
-    const content = fs.readFileSync(tailwindConfigPath, "utf8")
+    updateTailwindConfig(tailwindConfigPath, cosmicTailwindPath)
+  } else if (fs.existsSync(tailwindConfigTSPath)) {
+    updateTailwindConfig(tailwindConfigTSPath, cosmicTailwindPath)
+  }
+}
 
-    const regex = /content:\s*\[["'].*["']\]/g
-    const match = content.match(regex)
+function updateTailwindConfig(configPath, cosmicPath) {
+  const content = fs.readFileSync(configPath, "utf8")
 
-    if (match.length > 0) {
-      let arrayString = match[0].replace("content: ", "")
-      arrayString = arrayString.replace(/'/g, '"')
-      let parsedArray = JSON.parse(arrayString)
-      const hasCosmicPath = parsedArray.includes(cosmicTailwindPath)
-      if (!hasCosmicPath) {
-        console.log("-> Adding cosmic folder to tailwind config file...")
+  const regex = /content:\s*\[\s*[\s\S]*?\s*\]/g
+  const match = content.match(regex)
 
-        parsedArray.push(cosmicTailwindPath)
-        let newContent = `content: ${JSON.stringify(parsedArray)}`
-        const oldContent = match[0]
-        const updatedTailwindConfig = content.replace(oldContent, newContent)
+  if (match?.length > 0) {
+    let arrayString = match[0].replace("content: ", "")
+    arrayString = arrayString.replace(/'/g, '"')
+    arrayString = arrayString.replace(/'/g, '"').replace(/,(?=[^,]*$)/, "")
+    let parsedArray = JSON.parse(arrayString)
+    const hasCosmicPath = parsedArray.includes(cosmicPath)
+    if (!hasCosmicPath) {
+      console.log("➤ Adding cosmic folder to tailwind config file...")
 
-        fs.writeFileSync(tailwindConfigPath, updatedTailwindConfig, "utf8")
+      parsedArray.push(cosmicPath)
+      let newContent = `content: ${JSON.stringify(parsedArray)}`
+      const oldContent = match[0]
+      const updatedTailwindConfig = content.replace(oldContent, newContent)
 
-        console.log(
-          chalk.yellowBright(
-            "Tailwind config updated. Please restart your server."
-          )
+      fs.writeFileSync(configPath, updatedTailwindConfig, "utf8")
+
+      console.log(
+        chalk.yellowBright(
+          "➤ Tailwind config updated. Please restart your server."
         )
-      }
+      )
     }
@@ -169,3 +227,3 @@ } else {
       chalk.red(
-        "Error locating tailwind.config.js file. Please add cosmic folder to your content path manually."
+        "✗ Error locating tailwind config file. Please add cosmic folder to your content path manually."
       )
@@ -181,3 +239,3 @@ )
     fs.mkdirSync(cosmicFolderPath)
-    console.log("-> Cosmic folder created successfully.")
+    console.log("➤ Cosmic folder created successfully.")
   }
@@ -192,3 +250,3 @@
     fs.mkdirSync(blocksFolderPath)
-    console.log("-> Blocks folder created successfully.")
+    console.log("➤ Blocks folder created successfully.")
   }
@@ -204,3 +262,3 @@
   if (fs.existsSync(cosmicFolderPath) && !fs.existsSync(configFilePath)) {
-    console.log("-> Copying client file...")
+    console.log("➤ Copying client file...")
     fs.copyFileSync(
@@ -218,3 +276,3 @@ sourceConfigFilePath,
   if (fs.existsSync(cosmicFolderPath) && !fs.existsSync(utilsFilePath)) {
-    console.log("-> Copying utils file...")
+    console.log("➤ Copying utils file...")
     fs.copyFileSync(sourceUtilsPath, path.join(cosmicFolderPath, "utils.ts"))
@@ -221,0 +279,0 @@ }

New alerts

Debug access

Supply chain risk

Uses debug, reflection and dynamic code execution features.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

124785

decreased by-0.83%

Dependency count

15

increased by25%

Number of package files

36

decreased by-2.7%

Lines of code

1969

decreased by-3.2%

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• + Added@radix-ui/react-label@^2.0.2

• + Added@radix-ui/react-slot@^1.0.2

• + Addedclass-variance-authority@^0.7.0

• + Added@radix-ui/react-label@2.1.2(transitive)

• + Addedclass-variance-authority@0.7.1(transitive)

• + Addedlucide-react@0.302.0(transitive)

• - Removedlucide-react@0.300.0(transitive)

• Updatedlucide-react@^0.302.0