added project files

.env.example

@@ -0,0 +1,5 @@
+BASE_DOMAIN="https://system-base-domain"
+API_PATH="/cmp-data-api"
+API_IDENTIFIER="matrixIdentifier"
+AUTH_TOKEN="Bearer xxxxxx"
+env="dev"

.eslintrc

@@ -0,0 +1,37 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "commonjs": true
+  },
+  // "extends": "eslint:recommended",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
+    },
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "useJSXTextNode": true,
+    "warnOnUnsupportedTypeScriptVersion": false
+  },
+  "rules": {
+    "indent": [
+        "error",
+        "tab"
+    ],
+    "linebreak-style": [
+        "error",
+        "unix"
+    ],
+    "quotes": [
+        "error",
+        "single"
+    ],
+    "semi": [
+        "error",
+        "always"
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+.env
+.dxp
+node_modules
+dist-ssr
+dist
+dist/*
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.gitlab-ci.yml

@@ -0,0 +1,4 @@
+include:
+  - project: au-client-implementation/security-templates
+    ref: develop
+    file: standard.yml

.nvmrc

@@ -0,0 +1 @@
+20

.prettierignore

@@ -0,0 +1,6 @@
+*.md
+scripts/
+node_modules/
+package.json
+*.lock
+*-lock.json

.prettierrc

@@ -0,0 +1,34 @@
+{
+    "arrowParens": "always",
+    "bracketSpacing": false,
+    "embeddedLanguageFormatting": "auto",
+    "htmlWhitespaceSensitivity": "css",
+    "insertPragma": false,
+    "jsxSingleQuote": false,
+    "printWidth": 180,
+    "proseWrap": "always",
+    "quoteProps": "as-needed",
+    "requirePragma": false,
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "all",
+    "useTabs": false,
+    "vueIndentScriptAndStyle": false,
+    "overrides": [
+        {
+            "files": "**/*.json",
+            "options": {
+                "tabWidth": 2
+            }
+        },
+        {
+            "files": "**/*.scss",
+            "options": {
+                "tabWidth": 2,
+                "singleQuote": false
+            }
+        }
+    ],    
+    "plugins": ["prettier-plugin-tailwindcss"]
+}

README.md

@@ -0,0 +1,134 @@
+# QGDS Bootstrap 5 - Squiz DXP Component System
+
+This library is for dxp.squiz.cloud to generate the required html structure to use the QGDS Bootstrap5 css/javascript.
+
+There are two namespaces:
+
+- qgds-bs5 (-dev): Used for WYSIWYG editor drag and drop components
+- qgds-bs5-layout (-dev): Used for page template embeds
+
+---
+
+## Getting Started
+
+Follow these steps to get started with coreDXP on your local machine:
+
+1. **Clone the repository:**
+    ```bash
+    git clone git@gitlab.squiz.net:au-client-implementation/qld-online-components.git
+    ```
+
+2. **Navigate into the project directory:**
+    ```bash
+    cd qld-online-components
+    nvm use
+    ```
+
+3. **Install dependencies:**
+    ```bash
+    npm install
+    ```
+
+
+4. **Create a local .env file**
+
+    ```bash
+    touch .env
+    ```
+
+5.  **Add the contents below to the .env and save**
+    ```
+    BASE_DOMAIN="https://ssqld-web-uat.matrix.squiz.cloud"
+    API_PATH="/cmp-data-api"
+    API_IDENTIFIER="matrixIdentifier"
+    AUTH_TOKEN="Bearer xxxxxx"
+    env="dev"
+    ```
+
+6. **Start the development server:**
+    ```bash
+    npm run dev
+    ```
+
+**When you run ```npm run dev``` two servers get spun up**
+
+- DXP Preview: http://localhost:3000/
+- Frontend Design Preview: http://localhost:5000/
+
+View the index page for more information on how to use http://localhost:5000/
+
+
+# Repository Folder Structure
+The Kernel repository has the following key folders and files:
+
+- /dxp - Houses DXP-related code, such as:
+    - /component-service - Code for the Component Service.
+    - ...and any other DXP services.
+- /src - Contains all working files, including:
+    - entry-server.js - Defines the viewable page templates, such as the index, homepage, and content pages.
+    - /global-components - Contains global template elements like the header and footer that are not part of the component service.
+    - /html - Contains JavaScript files representing HTML templates.
+    - /image - Stores any required images.
+    - /scripts - Contains the main JavaScript files for the application build.
+        - main.js - The entry point for bundling into the final export, client.js. It imports the working files needed for production.
+        - /components - Contains all JavaScript related to site components and templates, which are bundled and sent to the front end.
+    - /styles - Contains all CSS, with main.scss as the entry point.
+
+## Using it
+Create a new component or copy an existing component to get started. Place it under /dxp/component-service/
+
+**:warning: Warning:** When you create a new component, you may need to run: ```npm run dev``` again.
+
+- Configure the manifest.json
+- Add frontend CSS to /src/styles/
+- Add frontend JS to /src/scripts/
+- Set up the component main.js to export HTML
+
+## How to preview the component
+Open a template from /src/html/ (Example: /src/html/homepage.js)
+
+- Add the component import reference. Example: ```<!--@@ cmp kernel/hello-world @@-->```
+- Start up the local dev server: ```npm run dev```
+- Preview the front end! Visit http://localhost:5000/
+
+## Bundling for deployment
+To package the project for production: 
+
+```bash
+npm run build
+```
+
+- Generates a /dist folder containing client.js and client.css
+- Push changes to GIT
+- Deploy components!
+
+## DXP Command cheat sheet
+
+```bash
+# Login to the DXP
+dxp-next auth login --tenant=ssqld-1854
+```
+
+```bash
+# Deploy Edge Component to the DXP
+FEATURE_EDGE_COMPONENTS=true dxp-next cmp deploy dxp/component-service/{cmp_directory}
+```
+
+
+## Useful References
+
+### Component Service Documentation
+- https://docs.squiz.net/component-service/latest/index.html
+- https://docs.squiz.net/component-service/latest/tutorials/components-at-edge/index.html
+
+### Example CSCs
+- https://ssqld-web-uat.matrix.squiz.cloud/qgds-bs5/demo/mvaldman/accordion-example/
+- https://ssqld-web-uat.matrix.squiz.cloud/qgds-bs5/demo/mvaldman/accordion-dynamic-example/
+- https://ssqld-web-uat.matrix.squiz.cloud/qgds-bs5/demo/component-service-components/test-dynamic-card/
+
+### Example APIs
+- https://ssqld-web-uat.matrix.squiz.cloud/cmp-data-api/accordions-dynamic?root=11692
+- https://ssqld-web-uat.matrix.squiz.cloud/cmp-data-api/card-dynamic?root=11653
+
+### DXP Component Service 
+- https://dxp.squiz.cloud/organization/ssqld-1854/component-service/component-sets/qol-component-set-dev

dxp/01_compilers/dxp-compiler.js

@@ -0,0 +1,39 @@
+import { globSync } from "glob";
+import path from "path";
+import * as esbuild from "esbuild";
+
+// bundle components into a format for deployment
+(async () => {
+  // get all component service directories
+  const csComponents = globSync(path.join(".", "dxp", "component-service", "*/"));
+  // Define our array of build promises
+  const allBuildPromises = [];
+
+  // For each component use esbuild to format to cjs
+  for (let i = 0; i < csComponents.length; i++) {
+    // Get the current component path
+    const componentPath = csComponents[i];
+    // process component
+    let buildPromise = await esbuild.build({
+      entryPoints: [path.join(componentPath, "main.js")],
+      bundle: true,
+      treeShaking: true,
+      outdir: path.join(componentPath),
+      format: "cjs",
+      platform: "node",
+      target: "node20",
+      sourcemap: false,
+      external: ['react', 'react-dom', 'react-dom-server'],
+      outExtension: {
+        ".js": ".cjs",
+      },
+    });
+    // Push our promises to the component array
+    allBuildPromises.push(buildPromise);
+  }
+
+  // When all promises have resolved then log that we have succeeded with the build
+  Promise.all(allBuildPromises).then(async () => {
+    console.log("✅ build has completed successfully");
+  });
+})();

dxp/01_compilers/manifest-compiler.js

@@ -0,0 +1,40 @@
+import  path from 'path';
+import { globSync } from 'glob';
+import fs from 'fs';
+
+// Function to compile manifest data
+export default async function generateManifestRecord(file) {
+  if (!file || !file.endsWith('manifest.json')) return;
+  // output array of strings: ["namespace/name/version", "..."]
+  const content = [];
+  // get all manifest.json files
+  const manifests = globSync(path.join(".", "dxp", "component-service", "*", "manifest.json"));
+
+  // Loop through each manifest.json file
+  for (const manifestPath of manifests) {
+    try {
+      // Read and parse the manifest.json file
+      const manifestData = JSON.parse(await fs.promises.readFile(manifestPath, 'utf-8'));
+
+      // Extract name, namespace, and version from the manifest file
+      const { name, namespace, version } = manifestData;
+
+      // Format it as "namespace/name/version"
+      if (name && namespace && version) {
+        content.push(`${namespace}/${name}/${version}`);
+      } else {
+        console.warn(`Missing data in manifest: ${manifestPath}`);
+      }
+    } catch (error) {
+      console.error(`Error reading manifest file: ${manifestPath}`, error);
+    }
+  }
+
+  // Write the formatted content array to a new file
+  try {
+    await fs.promises.writeFile('./dxp/01_compilers/manifests.json', JSON.stringify(content, null, 2), 'utf-8');
+  } catch (error) {
+    console.error('Error writing manifests.json:', error);
+  }
+
+}

dxp/01_compilers/manifests.json

@@ -0,0 +1,14 @@
+[
+  "qgds-bs5-local/video/1.0.1",
+  "qgds-bs5-local/tag-dynamic/0.0.1",
+  "qgds-bs5-local/table/1.0.1",
+  "qgds-bs5-local/pagination/0.0.1",
+  "qgds-bs5-local/inpagealert/1.0.0",
+  "qgds-bs5-local/card-dynamic/0.0.2",
+  "qgds-bs5-local/card/0.0.1",
+  "qgds-bs5-local/callout/1.0.1",
+  "qgds-bs5-local/blockquote/1.0.1",
+  "qgds-bs5-local/accordion-dynamic/0.0.2",
+  "qgds-bs5-local/accordion/1.0.1",
+  "kernel/hello-world/0.1.1"
+]