@cosmicjs/blocks - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

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"
@@ -25,4 +27,55 @@
       "@radix-ui/react-icons",
+      "clsx",
+      "tailwind-merge",
     ],
   },
+  pages: {
+    name: "Pages",
+    installationSteps: [
+      "@cosmicjs/sdk",
+      "@radix-ui/react-slot",
+      "class-variance-authority",
+    ],
+    elements: ["Button"],
+  },
+  comments: {
+    name: "Comments",
+    installationSteps: [
+      "@cosmicjs/sdk",
+      "lucide-react",
+      "@radix-ui/react-slot",
+      "class-variance-authority",
+      "@radix-ui/react-label",
+    ],
+    elements: ["Button", "Input", "Label", "TextArea"],
+  },
+  "image-gallery": {
+    name: "Image Gallery",
+    installationSteps: ["@cosmicjs/sdk", "tailwind-merge"],
+  },
+  testimonials: {
+    name: "Testimonials",
+    installationSteps: ["@cosmicjs/sdk"],
+  },
+  team: {
+    name: "Team",
+    installationSteps: ["@cosmicjs/sdk"],
+  },
+  "navigation-menu": {
+    name: "Navigation Menu",
+    installationSteps: ["@cosmicjs/sdk", "lucide-react"],
+  },
+  products: {
+    name: "Products",
+    installationSteps: [
+      "@cosmicjs/sdk",
+      "@radix-ui/react-slot",
+      "class-variance-authority",
+    ],
+    elements: ["Button"],
+  },
+  events: {
+    name: "events",
+    installationSteps: ["@cosmicjs/sdk"],
+  },
 }
@@ -35,8 +88,11 @@
     chalk.yellow(
-      `-> Initiating installation of ${capitalize(blockData.name)} Block...`
+      `➤ Initiating installation of ${chalk.bold(
+        capitalize(blockData.name)
+      )} Block...`
     )
   )
+  console.log(" ")
 
   // source code for the block
-  const sourceFolderPath = path.join(__dirname, "components", component)
+  const sourceFolderPath = path.join(__dirname, "src", component)
 
@@ -50,5 +106,5 @@ await blockGenerator(blockData, sourceFolderPath)
   .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)) {
@@ -58,4 +114,21 @@ console.error(
         )
-      } else addComponent(component)
-    })
+      } else {
+        await addComponent(component)
+      }
+    }
+    const endTime = performance.now()
+
+    console.log(
+      chalk.greenBright(
+        `ϟ Executed superfast in ${((endTime - startTime) / 1000).toFixed(
+          2
+        )} seconds.`
+      )
+    )
+
+    console.log(
+      chalk.yellow(
+        `➤ View more Blocks at ${chalk.bold("cosmicjs.com/blocks.")}`
+      )
+    )
   })
@@ -62,0 +135,0 @@

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "0.0.7",
+  "version": "0.0.8",
   "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",

tailwind.config.js

@@ -6,3 +6,3 @@ const { fontFamily } = require("tailwindcss/defaultTheme")
   darkMode: ["class"],
-  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
+  content: ["app/**/*.{ts,tsx}","components/**/*.{ts,tsx}","cosmic/**/*.{ts,tsx,js,jsx}"],
   theme: {
@@ -9,0 +9,0 @@ extend: {

utils/block-generator.js

 import fs from "fs"
+
 import { execa } from "execa"
@@ -15,10 +16,46 @@ import { getPackageManager } from "./get-package-manager.js"
 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")
@@ -44,3 +81,5 @@
       console.log(
-        chalk.green(`Packages for ${name} Block installed successfully!`)
+        chalk.green(
+          `✔ Packages for ${chalk.bold(name)} Block installed successfully!`
+        )
       )
@@ -50,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
@@ -58,5 +99,2 @@ )
   try {
-    const cosmicFolderPath = createCosmicFolder()
-    const blocksPath = createBlocksFolder(cosmicFolderPath)
-
     // After the Blocks folder is created
@@ -68,28 +106,2 @@ if (blocksPath) {
 
-      // Create a folder with the block's name key
-      let destinationFolderPath = path.join(blocksPath, name.toLowerCase())
-      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
@@ -100,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)
@@ -108,4 +120,36 @@ const destinationFile = path.join(destinationFolderPath, file)
 
-    console.log(chalk.green(`Block ${name} added successfully!`))
-    console.log(chalk.yellow(`View more blocks at cosmicjs.com/blocks.`))
+    // 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(`✔ ${chalk.bold(name)} Block added successfully!`))
+    console.log(" ")
   } catch (error) {
@@ -115,7 +159,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 ""
@@ -125,11 +174,41 @@ }
 
-function updateTailwindFile(cosmicFolderPath) {
-  // content.push(path.join(cosmicFolderPath, "**/*.ts"))
-  // content.push(path.join(cosmicFolderPath, "**/*.tsx"))
-  // content.push(path.join(cosmicFolderPath, "**/*.js"))
-  // console.log("content", content)
-  // fs.writeFileSync(
-  //   tailwindConfigPath,
-  //   `module.exports = ${JSON.stringify(tailwindConfig, null, 2)};`
-  // )
+function updateTailwindFile() {
+  const cosmicTailwindPath = "cosmic/**/*.{ts,tsx,js,jsx}"
+
+  const tailwindConfigPath = path.join(process.cwd(), "tailwind.config.js")
+  if (fs.existsSync(tailwindConfigPath)) {
+    const content = fs.readFileSync(tailwindConfigPath, "utf8")
+
+    const regex = /content:\s*\[["'].*["']\]/g
+    const match = content.match(regex)
+
+    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...")
+
+        parsedArray.push(cosmicTailwindPath)
+        let newContent = `content: ${JSON.stringify(parsedArray)}`
+        const oldContent = match[0]
+        const updatedTailwindConfig = content.replace(oldContent, newContent)
+
+        fs.writeFileSync(tailwindConfigPath, updatedTailwindConfig, "utf8")
+
+        console.log(
+          chalk.yellowBright(
+            "➤ Tailwind config updated. Please restart your server."
+          )
+        )
+      }
+    }
+  } else {
+    console.log(
+      chalk.red(
+        "✗ Error locating tailwind.config.js file. Please add cosmic folder to your content path manually."
+      )
+    )
+  }
 }
@@ -140,10 +219,7 @@
   let cosmicFolderPath = path.join(currentDir, "cosmic")
-
   if (!fs.existsSync(cosmicFolderPath)) {
     fs.mkdirSync(cosmicFolderPath)
-    console.log("-> Cosmic folder created successfully.")
+    console.log("➤ Cosmic folder created successfully.")
   }
 
-  updateTailwindFile(cosmicFolderPath)
-
   return cosmicFolderPath
@@ -154,6 +230,5 @@ }
   const blocksFolderPath = path.join(cosmicFolderPath, "blocks")
-
   if (!fs.existsSync(blocksFolderPath)) {
     fs.mkdirSync(blocksFolderPath)
-    console.log("-> Blocks folder created successfully.")
+    console.log("➤ Blocks folder created successfully.")
   }
@@ -165,7 +240,7 @@
 function createConfigFile(cosmicFolderPath) {
-  const sourceConfigFilePath = path.join(__dirname, "../cosmic/client.ts")
+  const sourceConfigFilePath = path.join(__dirname, "../src/client.ts")
   const configFilePath = path.join(cosmicFolderPath, "client.ts")
 
   if (fs.existsSync(cosmicFolderPath) && !fs.existsSync(configFilePath)) {
-    console.log("-> Copying client file...")
+    console.log("➤ Copying client file...")
     fs.copyFileSync(
@@ -179,7 +254,7 @@ sourceConfigFilePath,
 function createUtilsFile(cosmicFolderPath) {
-  const sourceUtilsPath = path.join(__dirname, "../cosmic/utils.ts")
+  const sourceUtilsPath = path.join(__dirname, "../src/utils.ts")
   const utilsFilePath = path.join(cosmicFolderPath, "utils.ts")
 
   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"))
@@ -186,0 +261,0 @@ }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Debug access

Supply chain risk

Uses debug, reflection and dynamic code execution features.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

123875

increased by28.41%

Number of package files

35

increased by75%

Lines of code

1940

increased by77.98%

Worsened metrics

Dependency count

15

increased by25%

Number of low supply chain risk alerts

2

increased by100%

Number of medium 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