@badcss/core - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9-1

lib/components/Button.js

@@ -13,2 +13,3 @@ import { generateUUID } from "../utils/generateUUID.js";
   const withRing = tag.getAttribute("withRing");
+  const overwriteColor = tag.getAttribute("color");
 
@@ -86,3 +87,5 @@ // Allowed variants
               };
-              background-color: ${colors[buttonType]};
+              background-color: ${
+                overwriteColor ? `var(--${overwriteColor})` : colors[buttonType]
+              };
               font-size: ${
@@ -119,3 +122,7 @@ buttonSize === "sm"
                 withRing === "true" &&
-                ` box-shadow: 0 0 0 3px ${colors[buttonType + "Light"]};`
+                ` box-shadow: 0 0 0 3px ${
+                  overwriteColor
+                    ? `var(--${overwriteColor}Light)`
+                    : colors[buttonType + "Light"]
+                };`
               }
@@ -140,3 +147,8 @@
     const { name, value } = attributes[i];
-    if (name !== "component" && name !== "variant" && name !== "size") {
+    if (
+      name !== "component" &&
+      name !== "variant" &&
+      name !== "size" &&
+      name !== "withring"
+    ) {
       button.setAttribute(name, value);
@@ -143,0 +155,0 @@ }

lib/components/Spinner.js

@@ -1,2 +0,2 @@
-import { generateUUID } from "../utils/generateUUID";
+import { generateUUID } from "../utils/generateUUID.js";
 
@@ -11,3 +11,8 @@ export function SpinnerComponent(tag) {
   const spinnerType = tag.getAttribute("variant");
+  const speed = tag.getAttribute("speed");
 
+  if (!speed) {
+    return;
+  }
+
   if (!spinnerType) {
@@ -28,25 +33,17 @@ throw new Error("No variant found");
   ];
+
   if (!allowedVariants.includes(spinnerType)) {
-    throw new Error(`Invalid variant ${spinnerType}`);
+    throw new Error(`Invalid variant Spinner`);
   }
 
-  // Colors for the button
+  // Colors for the Spinner
   const colors = {
     primary: "var(--primary)",
-    primaryLight: "var(--primary-light)",
     secondary: "var(--secondary)",
-    secondaryLight: "var(--secondary-light)",
     danger: "var(--danger)",
-    dangerLight: "var(--danger-light)",
     success: "var(--success)",
-    successLight: "var(--success-light)",
     warning: "var(--warning)",
-    warningLight: "var(--warning-light)",
     info: "var(--info)",
-    infoLight: "var(--info-light)",
     dark: "var(--dark)",
-    darkLight: "var(--dark-light)",
     light: "var(--light)",
-    lightLight: "var(--light-light)",
-    // Add more colors for other variants if needed
   };
@@ -57,3 +54,3 @@
   styles.setAttribute("data-id", generateUUID());
-  styles.setAttribute("data-component-type", "alert");
+  styles.setAttribute("data-component-type", "spinner");
   styles.innerHTML = `
@@ -68,6 +65,20 @@ /*
           .spinner-${spinnerType} {
-            
+            border: 0.2rem solid ${colors[spinnerType]};
+            border-top: 0.2rem solid transparent;
+            border-radius: 50%;
+            width: 1.5rem;
+            height: 1.5rem;
+            animation: spin ${speed ? speed : "1s"} linear infinite;
+            margin: 0 auto;
           }
-
-         
+          
+          @keyframes spin {
+            0% {
+              transform: rotate(0deg);
+            }
+          
+            100% {
+              transform: rotate(360deg);
+            }
+          }
       `;
@@ -79,3 +90,3 @@
   // Add the class to the button
-  div.classList.add(`alert-${spinnerType}`);
+  div.classList.add(`spinner-${spinnerType}`);
 
@@ -82,0 +93,0 @@ // Copy standard HTML attributes from <themostbad> to the generated <button>

lib/index.js

 import { ButtonComponent } from "./components/Button.js";
 import { AlertComponent } from "./components/Alert.js";
-// import { SpinnerComponent } from "./components/Spinner.js";
+import { generateColor } from "./utils/generateColor.js";
+import { SpinnerComponent } from "./components/Spinner.js";
+import { Log } from "./utils/Logger.js";
 
-const validComponents = ["button", "alert"];
+const validComponents = ["button", "alert", "spinner"];
 
@@ -12,40 +14,41 @@ // Set font on page load
 
-// Get the "themostbad" from the body tag. To get config
-const body = document.getElementsByTagName("body")[0];
-const config = body.getAttribute("badcss-config");
-// Check if the config is valid
-if (!config) {
-  console.warn("No config found");
-}
-const configObj = eval("(" + config + ")");
+// Get the "badcss" from the body tag. To get config
+try {
+  const body = document.getElementsByTagName("body")[0];
+  const config = body.getAttribute("badcss-config");
+  // Check if the config is valid
+  if (!config) {
+  }
+  const configObj = eval("(" + config + ")");
 
-// Check if the config is valid
-if (!configObj) {
-  console.warn("No config found JSON");
-}
+  // Check if the config is valid
+  if (!configObj || typeof configObj !== "object") {
+    Log({
+      type: "warn",
+      message: "Invalid config or no config found",
+    });
+  }
 
-console.log(configObj);
+  // Allowed plugins
+  const dataPlugins = {
+    fontawesome: `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${
+      configObj?.plugins?.fontawesome?.version || "6.4.0"
+    }/css/all.min.css" />`,
+  };
 
-// Allowed plugins
-const dataPlugins = {
-  fontawesome: `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${
-    configObj?.plugins?.fontawesome?.version || "6.4.0"
-  }/css/all.min.css" />`,
-};
+  // Check if the plugin is valid
+  // Load the plugins
+  if (configObj?.plugins?.fontawesome) {
+    document.head.innerHTML += configObj.plugins.fontawesome.kitId
+      ? `<script src="https://kit.fontawesome.com/${configObj?.plugins?.fontawesome?.kitId}.js" crossorigin="anonymous"></script>`
+      : dataPlugins.fontawesome;
+  }
+  // Remove the "themostbad" from the body tag
+  body.removeAttribute("badcss-config");
 
-// Check if the plugin is valid
-// Load the plugins
-if (configObj?.plugins?.fontawesome) {
-  document.head.innerHTML += configObj.plugins.fontawesome.kitId
-    ? `<script src="https://kit.fontawesome.com/${configObj?.plugins?.fontawesome?.kitId}.js" crossorigin="anonymous"></script>`
-    : dataPlugins.fontawesome;
-}
-// Remove the "themostbad" from the body tag
-body.removeAttribute("badcss-config");
+  // Create a style with global colors
+  const styles = document.createElement("style");
+  styles.setAttribute("badcss", ":root");
 
-// Create a style with global colors
-const styles = document.createElement("style");
-styles.setAttribute("badcss", ":root");
-
-styles.innerHTML = `
+  styles.innerHTML = `
   :root {
@@ -68,6 +71,12 @@ --primary: #2563eb;
     --light-light: #f7f7f7;
+    
+    /* root: theme custom colors */
     ${
-      configObj?.theme?.colors?.map(
-        (color) => `--${color.name}: ${color.value};`
-      ) || ""
+      configObj?.theme?.colors
+        ?.map(
+          (color) =>
+            `--${color.name}: ${color.value};` +
+            `\n--${color.name}Light: ${generateColor(color.value)};`
+        )
+        .join("\n    ") || ""
     }
@@ -77,7 +86,18 @@ }
 
-// Append the styles to the head
-document.head.appendChild(styles);
+  // Append the styles to the head
+  document.head.appendChild(styles);
+} catch (error) {
+  Log({
+    type: "error",
+    message: error.message,
+  });
+}
 
 // Wait for the DOMContentLoaded event before running the mapping loop
 document.addEventListener("DOMContentLoaded", async () => {
+  Log({
+    type: "info",
+    message: "DOM fully loaded and parsed",
+  });
+
   try {
@@ -99,6 +119,10 @@ // map for the findTags
           case "alert": {
-            console.log("alert");
             AlertComponent(tag);
             break;
           }
+
+          case "spinner": {
+            SpinnerComponent(tag);
+            break;
+          }
         }
@@ -110,8 +134,94 @@ } else {
         // throw an error
-        throw new Error(`Invalid component ${component}`);
+        throw new Error(
+          `Invalid component ${component} found. Valid components are ${validComponents.join(
+            ", "
+          )}`
+        );
       }
     }
   } catch (error) {
-    console.error("Error loading scripts:", error);
+    // create new element
+    const element = document.createElement("div");
+
+    // style
+    element.setAttribute("badcss", "error");
+    element.setAttribute("component", "error");
+    element.style.backgroundColor = "#eee";
+    // make it to a modal
+    element.style.position = "fixed";
+    element.style.top = "0";
+    element.style.left = "0";
+    element.style.width = "100vw";
+    element.style.height = "100vh";
+    // make it to a flexbox
+    element.style.display = "flex";
+    element.style.flexDirection = "column";
+    element.style.justifyContent = "center";
+    element.style.alignItems = "center";
+
+    // z-index
+    element.style.zIndex
+      ? (element.style.zIndex
+          ? parseInt(element.style.zIndex) + 1
+          : parseInt(element.style.zIndex)) + ""
+      : "999999999";
+
+    // blur bg
+    element.style.backdropFilter = "blur(5px)";
+
+    const helpDocumention = [
+      {
+        keyWords: ["component"],
+        url: "https://badcss.dev/components",
+      },
+
+      {
+        keyWords: ["config", "unspected token"],
+        url: "https://badcss.dev/config",
+      },
+
+      {
+        keyWords: ["Invalid variant", "Spinner"],
+        url: "https://badcss.dev/docs",
+      },
+    ];
+    // add the error message
+    element.innerHTML = `
+    <h1>
+        Runtime Error <span style="color: var(--danger)">&times;</span>
+    </h1>
+    <p style="text-align: center">
+      Badcss encountered an error while loading the page.<br />
+      
+      ${
+        helpDocumention.find((doc) =>
+          doc.keyWords.some((keyWord) => error.message.includes(keyWord))
+        )
+          ? `
+          Read the documentation for help, this might help you to fix the error.<br />
+          <a href="${
+            helpDocumention.find((doc) =>
+              doc.keyWords.some((keyWord) => error.message.includes(keyWord))
+            ).url
+          }" target="_blank" style="color: var(--primary)">${
+              helpDocumention.find((doc) =>
+                doc.keyWords.some((keyWord) => error.message.includes(keyWord))
+              ).url
+            }</a>`
+          : ""
+      }
+      
+    </p>
+    <p>
+    <pre>${error.message}</pre>
+    </p>
+  `;
+
+    document.body.appendChild(element);
+
+    Log({
+      type: "error",
+      message: error.message,
+    });
   }
 });

package.json

 {
   "name": "@badcss/core",
-  "version": "0.1.8",
+  "version": "0.1.9-1",
   "description": "A lightweight and customizable framework designed to simplify web development and enhance the styling capabilities of your projects.",
@@ -8,2 +8,3 @@ "main": "index.js",
     "publish": "pnpm build && npm publish --access public",
+    "new:component": "node scripts/createComponent.js",
     "build": "node scripts/build.js",
@@ -28,2 +29,3 @@ "docs:dev": "vitepress dev docs",
   "devDependencies": {
+    "prompt-sync": "^4.2.0",
     "vite": "^4.4.7",
@@ -30,0 +32,0 @@ "vitepress": "1.0.0-beta.7",

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed 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

Improved metrics

Total package byte prevSize

99783

increased by147.18%

Number of package files

37

increased by105.56%

Lines of code

1864

increased by124.31%

Worsened metrics

Dev dependency count

4

increased by33.33%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

4

increased by33.33%

No dependency changes