@startinblox/boilerplate 5.0.0 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startinblox/boilerplate",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "Startin'blox Boilerplate",
   "main": "dist/index.js",
   "type": "module",
@@ -52,11 +52,12 @@
     "access": "public"
   },
   "scripts": {
+    "init": "node scripts/init.js",
     "watch": "lit-localize build && vite",
     "build": "lit-localize build && vite build",
     "serve": "vite preview",
-    "cy:open": "cypress open --component",
-    "cy:run": "lit-localize build && cypress run --component",
+    "cy:open": "cypress open",
+    "cy:run": "lit-localize build && cypress run --e2e && cypress run --component",
     "storybook": "lit-localize build && storybook dev -p 6006",
     "build-storybook": "lit-localize build && storybook build",
     "locale:extract": "lit-localize extract",
@@ -66,13 +67,14 @@
     "last 2 Chrome versions"
   ],
   "dependencies": {
+    "@inquirer/prompts": "^8.2.0",
     "@lit/localize": "^0.12.2",
     "@lit/task": "^1.0.3",
-    "autoprefixer": "^10.4.23",
+    "autoprefixer": "^10.4.24",
     "cssnano": "^7.1.2",
     "lit": "^3.3.2",
     "postcss": "^8.5.6",
-    "postcss-preset-env": "^11.1.2",
+    "postcss-preset-env": "^11.1.3",
     "postcss-scss": "^4.0.9",
     "sass": "^1.97.3",
     "unplugin-icons": "^23.0.1",
@@ -80,11 +82,11 @@
   },
   "devDependencies": {
     "@lit/localize-tools": "^0.8.1",
-    "@storybook/addon-docs": "^10.2.3",
-    "@storybook/web-components-vite": "^10.2.3",
-    "cypress": "^15.9.0",
+    "@storybook/addon-docs": "^10.2.8",
+    "@storybook/web-components-vite": "^10.2.8",
+    "cypress": "^15.10.0",
     "cypress-ct-lit": "^1.0.0",
     "lorem-ipsum": "^2.0.8",
-    "storybook": "^10.2.3"
+    "storybook": "^10.2.8"
   }
 }

package/scripts/init.js

@@ -0,0 +1,355 @@
+import { execSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { confirm, input } from "@inquirer/prompts";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const rootDir = path.resolve(__dirname, "..");
+
+const EXPECTED_NODE_MAJOR = 24;
+
+async function checkNodeVersion() {
+  const currentVersion = process.version;
+  const majorVersion = Number.parseInt(
+    currentVersion.slice(1).split(".")[0],
+    10,
+  );
+
+  if (majorVersion !== EXPECTED_NODE_MAJOR) {
+    console.error("\x1b[31m%s\x1b[0m", "\n✗ Node version mismatch!");
+    console.error("\x1b[31m%s\x1b[0m", `  Expected: ${EXPECTED_NODE_MAJOR}`);
+    console.error("\x1b[31m%s\x1b[0m", `  Current:  ${majorVersion}`);
+    console.error(
+      "\x1b[31m%s\x1b[0m",
+      `\n  Please use Node ${EXPECTED_NODE_MAJOR}.`,
+    );
+
+    const shouldContinue = await confirm({
+      message: "Do you want to continue anyway?",
+      default: false,
+    });
+
+    if (!shouldContinue) {
+      console.log("\n\x1b[33m%s\x1b[0m", "Initialization cancelled.");
+      process.exit(1);
+    }
+
+    console.log(
+      "\n\x1b[33m%s\x1b[0m",
+      "⚠ Continuing with unsupported Node version...",
+    );
+  }
+}
+
+async function main() {
+  console.log(
+    "\n\x1b[36m%s\x1b[0m",
+    "╔══════════════════════════════════════════╗",
+  );
+  console.log(
+    "\x1b[36m%s\x1b[0m",
+    "║   Startin'blox Component Boilerplate   ║",
+  );
+  console.log(
+    "\x1b[36m%s\x1b[0m",
+    "║           Initialization Wizard          ║",
+  );
+  console.log(
+    "\x1b[36m%s\x1b[0m",
+    "╚══════════════════════════════════════════╝\n",
+  );
+
+  // Check Node.js version before proceeding
+  await checkNodeVersion();
+
+  const packageName = await input({
+    message: "Enter package name (must start with @startinblox/):",
+    default: "@startinblox/my-component",
+    validate: (value) => {
+      const regex = /^@startinblox\/[a-z0-9-]+$/;
+      if (!regex.test(value)) {
+        return "Must be in format @startinblox/name (lowercase, alphanumeric, hyphens only)";
+      }
+      return true;
+    },
+  });
+
+  const description = await input({
+    message: "Enter project description (optional, press Enter to skip):",
+  });
+
+  const author = await input({
+    message: "Enter author name (optional, press Enter to skip):",
+  });
+
+  const repository = await input({
+    message: "Enter repository URL (optional, press Enter to skip):",
+    validate: (value) => {
+      if (!value) return true;
+      try {
+        new URL(value);
+        return true;
+      } catch {
+        return "Must be a valid URL";
+      }
+    },
+  });
+
+  const useDefaultLicense = await confirm({
+    message: "Use MIT license?",
+    default: true,
+  });
+
+  const license = useDefaultLicense
+    ? "MIT"
+    : await input({
+        message: "Enter license:",
+        default: "MIT",
+      });
+
+  const nameWithoutScope = packageName.replace("@startinblox/", "");
+  const componentName = `solid-${nameWithoutScope}`;
+  const className = `Solid${toPascalCase(nameWithoutScope).replace(/^Solid/, "")}`;
+  const camelCaseName = toCamelCase(nameWithoutScope);
+
+  updatePackageJson({ packageName, description, author, repository, license });
+  generateComponentFile({
+    nameWithoutScope,
+    componentName,
+    className,
+    camelCaseName,
+  });
+  removeSampleFiles();
+
+  const removeE2ETests = await confirm({
+    message: "Do you want to remove the boilerplate cypress e2e tests? (keep them for easier future updates)",
+    default: true,
+  });
+
+  if (removeE2ETests) {
+    removeE2ETestsFiles();
+  }
+
+  replaceReadme({ packageName, description });
+  handleGitRemotes();
+
+  setTimeout(() => {
+    try {
+      fs.rmSync(path.join(__dirname), { recursive: true, force: true });
+      console.log("\n\x1b[32m%s\x1b[0m", "✓ Init script self-cleanup complete");
+    } catch (error) {
+      console.warn(
+        "\n\x1b[33m%s\x1b[0m",
+        "⚠ Warning: Could not delete scripts folder",
+      );
+      if (process.env.NODE_ENV === "development") {
+        console.warn(error);
+      }
+    }
+
+    console.log("\n\x1b[32m%s\x1b[0m", "✓ Initialization complete!\n");
+    console.log("\x1b[36m%s\x1b[0m", "Next steps:");
+    console.log("  1. Review the changes above");
+    console.log("  2. ⚠ Configure Git remotes if instructed ⚠");
+    console.log("  3. Run `npm install`");
+    console.log("  4. Make your initial commit:");
+    console.log(
+      "\x1b[33m%s\x1b[0m",
+      "     git add . && git commit -m 'major: Initial commit'\n",
+    );
+  }, 100);
+}
+
+function toPascalCase(str) {
+  return str
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join("");
+}
+
+function toCamelCase(str) {
+  const pascal = str
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join("");
+  return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+}
+
+function updatePackageJson({
+  packageName,
+  description,
+  author,
+  repository,
+  license,
+}) {
+  try {
+    const packageJsonPath = path.join(rootDir, "package.json");
+    const packageJson = JSON.parse(
+      fs.readFileSync(packageJsonPath, { encoding: "utf-8" }),
+    );
+
+    packageJson.name = packageName;
+    if (description) packageJson.description = description;
+    if (author) packageJson.author = author;
+    if (repository) packageJson.repository.url = repository;
+    packageJson.license = license;
+
+    delete packageJson.scripts.init;
+    if (packageJson.dependencies?.["@inquirer/prompts"]) {
+      delete packageJson.dependencies["@inquirer/prompts"];
+    }
+
+    fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2), {
+      encoding: "utf-8",
+    });
+    console.log("\n\x1b[32m%s\x1b[0m", "✓ package.json updated");
+  } catch (error) {
+    console.error("\x1b[31m%s\x1b[0m", "✗ Failed to update package.json");
+    console.error(error.message);
+    process.exit(1);
+  }
+}
+
+function generateComponentFile({
+  nameWithoutScope,
+  componentName,
+  className,
+  camelCaseName,
+}) {
+  try {
+    const templatePath = path.join(
+      rootDir,
+      "src/components/solid-boilerplate.ts",
+    );
+    const template = fs.readFileSync(templatePath, { encoding: "utf-8" });
+
+    const content = template
+      .replace(/solid-boilerplate/g, componentName)
+      .replace(/SolidBoilerplate/g, className)
+      .replace(/solidBoilerplate/g, camelCaseName)
+      .replace(/boilerplate/g, nameWithoutScope);
+
+    const outputPath = path.join(rootDir, `src/components/${componentName}.ts`);
+    fs.writeFileSync(outputPath, content, { encoding: "utf-8" });
+    console.log(
+      "\x1b[32m%s\x1b[0m",
+      `✓ Created src/components/${componentName}.ts`,
+    );
+  } catch (error) {
+    console.error("\x1b[31m%s\x1b[0m", "✗ Failed to generate component file");
+    console.error(error.message);
+    process.exit(1);
+  }
+}
+
+function removeSampleFiles() {
+  const filesToRemove = [
+    "src/components/solid-boilerplate.ts",
+    "src/components/ui/sample-object.ts",
+    "src/components/ui/sample-objects.ts",
+    "cypress/component/sample-object.cy.ts",
+    "cypress/component/solid-boilerplate.cy.ts",
+    "stories/sample-objects.stories.ts",
+    "src/styles/component-sample.scss",
+  ];
+
+  filesToRemove.forEach((filePath) => {
+    try {
+      const fullPath = path.join(rootDir, filePath);
+      if (fs.existsSync(fullPath)) {
+        fs.rmSync(fullPath, { recursive: true, force: true });
+        console.log("\x1b[32m%s\x1b[0m", `✓ Removed ${filePath}`);
+      }
+    } catch (_error) {
+      console.warn("\x1b[33m%s\x1b[0m", `⚠ Could not remove ${filePath}`);
+    }
+  });
+}
+
+function removeE2ETestsFiles() {
+  const filesToRemove = ["cypress/e2e/helpers"];
+
+  filesToRemove.forEach((filePath) => {
+    try {
+      const fullPath = path.join(rootDir, filePath);
+      if (fs.existsSync(fullPath)) {
+        fs.rmSync(fullPath, { recursive: true, force: true });
+        console.log("\x1b[32m%s\x1b[0m", `✓ Removed ${filePath}`);
+      }
+    } catch (_error) {
+      console.warn("\x1b[33m%s\x1b[0m", `⚠ Could not remove ${filePath}`);
+    }
+  });
+}
+
+function replaceReadme({ packageName, description }) {
+  try {
+    const readmeContent = `# ${packageName}
+
+${description || "A Startin'blox component."}
+
+## Usage
+
+\`\`\`html
+<${packageName.replace("@startinblox/", "solid-")}></${packageName.replace("@startinblox/", "solid-")}>
+\`\`\`
+
+## Development
+
+\`\`\`bash
+npm run watch
+\`\`\`
+
+## Build
+
+\`\`\`bash
+npm run build
+\`\`\`
+`;
+
+    const readmePath = path.join(rootDir, "README.md");
+    fs.writeFileSync(readmePath, readmeContent, { encoding: "utf-8" });
+    console.log("\x1b[32m%s\x1b[0m", "✓ Created new README.md");
+  } catch (error) {
+    console.error("\x1b[31m%s\x1b[0m", "✗ Failed to create README.md");
+    console.error(error.message);
+    process.exit(1);
+  }
+}
+
+function handleGitRemotes() {
+  try {
+    const gitOutput = execSync("git remote -v", { encoding: "utf-8" });
+    const hasBoilerplateOrigin = gitOutput.includes(
+      "components/solid-boilerplate.git",
+    );
+
+    if (hasBoilerplateOrigin) {
+      console.log("\n\x1b[36m%s\x1b[0m", "Git Configuration:");
+      console.log("  Your origin remote points to the boilerplate repository.");
+      console.log("  Run these commands to set up your own repository:\n");
+      console.log("\x1b[33m%s\x1b[0m", "  git remote rename origin upstream");
+      console.log("  git remote add origin <your-repo-url>\n");
+    } else {
+      console.log("\n\x1b[36m%s\x1b[0m", "Git Configuration:");
+      console.log("  To track boilerplate updates, run:\n");
+      console.log(
+        "\x1b[33m%s\x1b[0m",
+        "  git remote add upstream https://git.startinblox.com/components/solid-boilerplate.git\n",
+      );
+    }
+  } catch (_error) {
+    console.warn(
+      "\n\x1b[33m%s\x1b[0m",
+      "⚠ Could not detect Git remotes (may not be a git repository)",
+    );
+  }
+}
+
+main().catch((error) => {
+  console.error("\x1b[31m%s\x1b[0m", "\n✗ Initialization failed");
+  console.error(error.message);
+  process.exit(1);
+});

package/src/components/solid-boilerplate.ts

@@ -1,8 +1,7 @@
-import { css, html, nothing } from "lit";
-import { customElement } from "lit/decorators.js";
 import { Task } from "@lit/task";
-
 import type { PropertiesPicker } from "@src/component";
+import { css, html, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
 
 import "@src/initializer";
 import * as utils from "@helpers";
@@ -28,9 +27,7 @@ export class SolidBoilerplate extends utils.OrbitComponent {
     }
   `;
 
-  cherryPickedProperties: PropertiesPicker[] = [
-    { key: "name", value: "name" },
-  ];
+  cherryPickedProperties: PropertiesPicker[] = [{ key: "name", value: "name" }];
 
   _getResource = new Task(this, {
     task: async ([dataSrc]) => {

package/src/helpers/components/componentObjectHandler.ts

@@ -1,16 +1,14 @@
-import type {
-  LimitedResource,
-  Resource,
-} from "@src/component";
+import type { LimitedResource, Resource } from "@src/component";
 import { LitElement } from "lit";
 
 export class ComponentObjectHandler extends LitElement {
   object?: LimitedResource = {
-    "@id": ""
+    "@id": "",
   };
 
-  isType = (type: string, obj: Resource = (this.object as Resource)) => {
-    const typeValue = obj["@type"];
+  isType = (type: string, obj?: Resource) => {
+    const resource = obj ?? (this.object as Resource);
+    const typeValue = resource["@type"];
     if (Array.isArray(typeValue)) {
       return typeValue.includes(type);
     }

package/src/helpers/components/componentObjectsHandler.ts

@@ -7,8 +7,13 @@ export class ComponentObjectsHandler extends LitElement {
   @property({ attribute: false })
   objects?: Resource[] = [];
 
-  hasType = (type: string, objs: Resource[] = this.objects as Resource[]) => {
-    const typeValue = new Set(objs.flatMap((o) => o["@type"]));
-    return typeValue.has(type);
+  hasType = (type: string, objs?: Resource[]) => {
+    const resources = objs ?? this.objects ?? [];
+    return resources.some((o) => {
+      const typeValue = o["@type"];
+      if (Array.isArray(typeValue)) return typeValue.includes(type);
+      if (typeof typeValue === "string") return typeValue === type;
+      return false;
+    });
   };
 }