Merge pull request #264 from qld-gov-au/develop

QGDS-93 Theme Light & Dark
qld-gov-au · Jan 31, 2025 · ecd1bf1 · ecd1bf1
2 parents 28bff06 + 5f39309
commit ecd1bf1
Show file tree

Hide file tree

Showing 197 changed files with 40,973 additions and 35,342 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -1,19 +1,42 @@
 # http://editorconfig.org
-
 root = true
 
 [*]
 indent_style = space
-indent_size = 4
+indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 end_of_line = lf
 charset = utf-8
 
-# Docstrings and comments use max_line_length = 79
-[*.py]
-max_line_length = 119
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = tab
+
+# Disable line length check for Markdown
+# Allow trailing whitespace in Markdown
+[*.md]
+max_line_length = off      
+trim_trailing_whitespace = false 
+
+# Use 2 spaces for JSON for readability
+[*.json]
+indent_size = 2
+insert_final_newline = true            
 
+# Use 2 spaces for YAML files
+[*.yml, *.yaml]
+indent_size = 2            
 
-# The JSON files contain newlines inconsistently
-insert_final_newline = ignore
+# Use 2 spaces for web files
+[*.css, *.scss, *.html]
+indent_size = 2
+
+[*.js, *.ts]
+indent_size = 2
+
+# Use 4 spaces for Python (PEP 8 standard)
+# Docstrings and comments use max_line_length = 79
+[*.py]
+indent_size = 4
+max_line_length = 79
diff --git a/.esbuild/helpers/config.js b/.esbuild/helpers/config.js
@@ -1,5 +1,5 @@
-import fs from 'fs';
-import  path from 'path';
+import fs from "fs";
+import path from "path";
 
 /**
  * @file config.js
@@ -33,137 +33,126 @@ import  path from 'path';
  * - Node.js built-in modules: `fs`, `path`
  */
 
-const THEMES_FOLDER = 'node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles';
+const THEMES_FOLDER = "node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles";
 const themesMap = {};
 
 fs.readdirSync(THEMES_FOLDER).forEach((file) => {
-    const match = file.match(/^qgds-(.+)-palette\.scss$/);
-    if (match) {
-        const theme = match[1];
-        themesMap[theme] = {
-            'paletteFile': file,
-            'scss' : theme !== 'qld-default' ? `main-${theme}` : 'main',
-            'variables': 'variables.scss'
-        };
-        themesMap[`${theme}-invert`] = {
-            'paletteFile': file,
-            'scss' : theme !== 'qld-default' ? `main-${theme}-invert` : 'main-invert',
-            'variables': 'variables-invert.scss'
-        };
-    }
+  const match = file.match(/^(.+)-palette\.scss$/);
+  if (match) {
+    const theme = match[1];
+    themesMap[theme] = {
+      paletteFile: file,
+      scss: theme !== "qld-default" ? `main-${theme}` : "main",
+      variables: "variables-root.scss",
+    };
+  }
 });
-
 console.log('Themes Map:', themesMap);
-
-const CSS_FOLDER = 'src/css';
+const CSS_FOLDER = "src/css";
 
 Object.entries(themesMap).forEach(([theme, { paletteFile, scss, variables }]) => {
-    const scssFile = `${scss}.scss`;
-    const filePath = path.join(CSS_FOLDER, scssFile);
-
-    if (!fs.existsSync(filePath)) {
-        console.error(`Missing file: ${scssFile}`);
-        // Create the file using the base 'main.scss' template
-        let defaultMainPath = path.join(CSS_FOLDER, 'main.scss');
-
-
-        let content = fs.readFileSync(defaultMainPath, 'utf8')
-
-        // Split the content into lines
-        const lines = content.split('\n');
-        // Insert the comment on the second line (index 1)
-        lines.splice(1, 0, "//GENERATED FILE from main.scss - DO NOT EDIT, delete and run npm run config to regenerate\n");
-        // Join the lines back into a single string
-        content = lines.join('\n');
-
-        content.replace(
-            /@import "@qld-gov-au\/qgds-tokens\/.*?palette\.scss";/,
-            `@import "@qld-gov-au/qgds-tokens/dist/scss/styles/${paletteFile}";`
-        );
-
-        content.replace(
-            /@import "imports\/.*\.scss";/,
-            `@import "imports\/${variables}";`
-        );
-        fs.writeFileSync(filePath, content);
-        console.log(`Created file: ${filePath}`);
+  const scssFile = `${scss}.scss`;
+  const filePath = path.join(CSS_FOLDER, scssFile);
+
+  if (!fs.existsSync(filePath)) {
+    console.error(`Missing file: ${scssFile}`);
+    // Create the file using the base 'main.scss' template
+    let defaultMainPath = path.join(CSS_FOLDER, "main.scss");
+
+    let content = fs.readFileSync(defaultMainPath, "utf8");
+
+    // Split the content into lines
+    const lines = content.split("\n");
+    // Insert the comment on the second line (index 1)
+    lines.splice(1, 0, "//GENERATED FILE from main.scss | DO NOT EDIT, delete and run npm run config to regenerate\n");
+    // Join the lines back into a single string
+    content = lines.join("\n");
+
+    const updatedContent = content
+      .replace(
+        /@import "..\/..\/node_modules\/@qld-gov-au\/qgds-tokens\/.*?palette\.scss";/,
+        `@import "..\/..\/node_modules\/@qld-gov-au/qgds-tokens/dist/scss/styles/${paletteFile}";`,
+      )
+      .replace(/@import "imports\/variables.*\.scss";/, `@import "imports\/${variables}";`);
+    fs.writeFileSync(filePath, updatedContent);
+    console.log(`Created file: ${filePath}`);
+  } else {
+    // Verify the @import statement
+    const content = fs.readFileSync(filePath, "utf8");
+    if (
+      !content.includes(`@qld-gov-au/qgds-tokens/dist/scss/styles/${paletteFile}`) ||
+      !content.includes(`@import "imports\/${variables}";`)
+    ) {
+      console.error(`Invalid @import in file: ${scssFile}`);
+      // Optionally fix the file
+      const updatedContent = content
+        .replace(
+          /@import "..\/..\/node_modules\/@qld-gov-au\/qgds-tokens\/.*?palette\.scss";/,
+          `@import "..\/..\/node_modules\/@qld-gov-au/qgds-tokens/dist/scss/styles/${paletteFile}";`,
+        )
+        .replace(/@import "imports\/variables.*\.scss";/, `@import "imports\/${variables}";`);
+      fs.writeFileSync(filePath, updatedContent);
+      console.log(`Fixed @import in file: ${filePath}`);
     } else {
-        // Verify the @import statement
-        const content = fs.readFileSync(filePath, 'utf8');
-        if (!content.includes(`@qld-gov-au/qgds-tokens/dist/scss/styles/${paletteFile}`)
-            || !content.includes(`@import "imports\/${variables}";`)) {
-            console.error(`Invalid @import in file: ${scssFile}`);
-            // Optionally fix the file
-            const updatedContent = content.replace(
-                /@import "..\/..\/node_modules\/@qld-gov-au\/qgds-tokens\/.*?palette\.scss";/,
-                `@import "..\/..\/node_modules\/@qld-gov-au/qgds-tokens/dist/scss/styles/${paletteFile}";`
-            ).replace(
-                /@import "imports\/variables.*\.scss";/,
-                `@import "imports\/${variables}";`
-            );
-            fs.writeFileSync(filePath, updatedContent);
-            console.log(`Fixed @import in file: ${filePath}`);
-        } else {
-            console.log(`No changes to @import in file: ${filePath}`)
-        }
+      console.log(`No changes to @import in file: ${filePath}`);
     }
+  }
 });
 
-
-
-const ESBUILD_FILE = 'esbuild.js';
+const ESBUILD_FILE = "esbuild.js";
 
 // Read and parse the `esbuild.js` file
-let esbuildContent = fs.readFileSync(ESBUILD_FILE, 'utf8');
+let esbuildContent = fs.readFileSync(ESBUILD_FILE, "utf8");
 
 // Extract and preserve JavaScript entry points
 const entryRegex = /entryPoints:\s*\[(.*?)\]/s;
 const entryMatch = esbuildContent.match(entryRegex);
 if (entryMatch) {
-    let existingEntries = entryMatch[1]
-        .split('},')
-        .map(e => e.trim().replace(/[\s{},]+$/, ''))
-        .filter(e => e.includes('in:') && e.includes('.js'))
-        .map(e => e + ',\n        }'); // Retain existing JS entries
-
-    // Generate SCSS entries based on `themeMap`
-    const newEntries = Object.values(themesMap).map(({ scss }) => {
-        const scssPath = `./src/css/${scss}.scss`;
-        const outputPath = `./assets/css/${scss}.min`;
-        return `{
-            in: "${scssPath}",
-            out: "${outputPath}",
-        }`;
-    });
-
-    // Combine JS and SCSS entries
-    const updatedEntries = [...existingEntries, ...newEntries];
-
-    // Replace `entryPoints` in `esbuild.js`
-    esbuildContent = esbuildContent.replace(
-        entryRegex,
-        `entryPoints: [\n        ${updatedEntries.join(',\n        ')}\n    ]`
-    );
-
-    fs.writeFileSync(ESBUILD_FILE, esbuildContent);
-    console.log('Updated esbuild.js with dynamic SCSS entries.');
+  let existingEntries = entryMatch[1]
+    .split("},")
+    .map((e) => e.trim().replace(/[\s{},]+$/, ""))
+    .filter((e) => e.includes("in:") && e.includes(".js"))
+    .map((e) => e + ",\n    }"); // Retain existing JS entries
+
+  // Generate SCSS entries based on `themeMap`
+  const newEntries = Object.values(themesMap).map(({ scss }) => {
+    const scssPath = `./src/css/${scss}.scss`;
+    const outputPath = `./assets/css/${scss}.min`;
+    return `{
+      in: "${scssPath}",
+      out: "${outputPath}",
+    }`;
+  });
+
+  // Combine JS and SCSS entries
+  const updatedEntries = [...existingEntries, ...newEntries];
+
+  // Replace `entryPoints` in `esbuild.js`
+  esbuildContent = esbuildContent.replace(
+    entryRegex,
+    `entryPoints: [\n    ${updatedEntries.join(",\n    ")},\n  ]`,
+  );
+
+  fs.writeFileSync(ESBUILD_FILE, esbuildContent);
+  console.log("Updated esbuild.js with dynamic SCSS entries.");
 }
 
-const STORYBOOK_PREVIEW = '.storybook/preview.js';
+const STORYBOOK_PREVIEW = ".storybook/preview.js";
 
-const content = fs.readFileSync(STORYBOOK_PREVIEW, 'utf8');
+const content = fs.readFileSync(STORYBOOK_PREVIEW, "utf8");
 
 //convert themesMap to value: sacs, title: space separated
-const themeValues=Object.keys(themesMap).map((themeKey) => {
-    return { value: themesMap[themeKey].scss, title: themeKey
-            .replace(/-/g, ' ')// Replace hyphens with spaces for readability
-            .replace(/\b\w/g, (char) => char.toUpperCase()) // Capitalize the first letter of each word
-        };
+const themeValues = Object.keys(themesMap).map((themeKey) => {
+  return {
+    value: themesMap[themeKey].scss,
+    title: themeKey
+      .replace(/-/g, " ") // Replace hyphens with spaces for readability
+      .replace(/\b\w/g, (char) => char.toUpperCase()), // Capitalize the first letter of each word
+  };
 });
 
-
 const updatedContent = content.replace(
-    /const brandToolbarItems.*/,
-    `const brandToolbarItems=${JSON.stringify(themeValues)};`
+  /const brandToolbarItems.*/,
+  `const brandToolbarItems=${JSON.stringify(themeValues)};`,
 );
 fs.writeFileSync(STORYBOOK_PREVIEW, updatedContent);
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.github/workflows/compile.js.yml b/.github/workflows/compile.js.yml
@@ -61,7 +61,14 @@ jobs:
 
       - name: Lint
         run: |
-          echo "lint disabled at this time" #npm run lint
+          echo "run lint report, but don't fail the build, at this time"
+          npm run lint || exit 0
+
+      - name: Upload Stylelint Report
+        uses: actions/upload-artifact@v4
+        with:
+          name: stylelint-report
+          path: stylelint-report.json
 
       - name: Test
         run: |

diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,5 @@
 /storybook-static
 /dist
 /docs/storybook
+chromatic.config.js
+/.reports