Kitchen Sink merge

.gitignore

@@ -1,4 +1,6 @@
 node_modules
+storybook-static/
 node
 .idea
 *.iml
+dist

.plop/sample.data.json

@@ -0,0 +1,9 @@
+{
+    "site": {
+      "metadata": {
+        "{{lowerCase name}}": {
+
+        }
+      }
+    }
+  }

.plop/sample.functions.js

@@ -0,0 +1,9 @@
+import './{{lowerCase name}}.scss';
+
+export default function {{properCase name}}() {
+  return (
+    <div className="qld_{{lowerCase name}}">
+      {{properCase name}} component
+    </div>
+  );
+}

.plop/sample.hbs

@@ -0,0 +1,4 @@
+<!-- src/components/{{lowerCase name}}/{{lowerCase name}}.hbs -->
+<div class="qld_{{lowerCase name}}">
+
+</div>

.plop/sample.scss

@@ -0,0 +1,4 @@
+// src/components/{{lowerCase name}}/{{lowerCase name}}.scss
+.qld_{{lowerCase name}} {
+    // component styles
+  }

.plop/sample.stories.js

@@ -0,0 +1,20 @@
+// .plop/sample.stories.js
+
+import data from './{{lowerCase name}}.data.json';
+import template from './{{lowerCase name}}.hbs';
+import './{{lowerCase name}}.scss';
+
+export default {
+  title: '{{titlePrefix}}/Extended/{{lowerCase name}}',
+  parameters: {
+    a11y: {
+      // Optional configuration
+      config: {},
+      options: {},
+    },
+  },
+};
+
+export const Default = (args) => template(args);
+
+Default.args = data;

.storybook/TaskTable.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export const TaskTable = ({ tasks }) => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Task</th>
+          <th>Description</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        {tasks.map((task, index) => (
+          <tr key={index}>
+            <td>{task.name}</td>
+            <td>{task.description}</td>
+            <td>
+              {task.completed}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

.storybook/main.js

@@ -1,4 +1,10 @@
 /** @type { import('@storybook/html-vite').StorybookConfig } */
+
+/** @type { import('@storybook/html-webpack5').StorybookConfig } */
+
+// path
+const path = require('path');
+
 const config = {
     stories: [
         "../src/stories/Introduction.mdx",
@@ -8,44 +14,81 @@ const config = {
         "../src/**/!(*_)*.stories.js",
     ],
     staticDirs: [
-        { from: '../dist', to: '/' },
-    ], //Bring dist in statically instead of having it minified
+        '../src/assets/',
+        '../dist/'
+    ],
     addons: [//Storybook addons
     //https://storybook.js.org/addons/
-    "@storybook/addon-a11y", "@storybook/addon-themes", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-links", "@chromatic-com/storybook"],
+    "@storybook/addon-a11y",
+        "@storybook/preset-scss",
+        "@storybook/addon-links",
+        "@storybook/addon-themes",
+        "@storybook/addon-essentials",
+        "@storybook/addon-interactions",
+        "@storybook/addon-links",
+        "@chromatic-com/storybook"],
 
     framework: {
         //Build the storybook with html-vite rendered - faster than webpack
         //https://www.npmjs.com/package/@storybook/html-vite
-        name: "@storybook/html-vite",
-        options: {},
+        name: "@storybook/html-webpack5",
+        options: {
+            builder: {
+                useSWC: true,
+            },
+        }
     },
 
+
     //Autodocs for each component
     //https://storybook.js.org/docs/writing-docs/autodocs
     docs: {
-        defaultName: 'Overview'
+        autodocs: "tag",
+        // defaultName: 'Overview'
     },
 
 
     //Each component's JS module, for example Alert.js, imports a HTML string to use for it's template.
     //We add a plugin to handle these .hbs extensions. (Or .mustache, .html etc)
     //https://storybook.js.org/docs/api/main-config-vite-final
 
-    viteFinal: async (config, {configType}) => {
-        config.root = './dist'
-        // config.plugins.push({
-        //     name: "html-transform",
-        //     transform(src, id) {
-        //         if (id.endsWith(".mustache") || id.endsWith(".html") || id.endsWith(".hbs")) {
-        //             // Transform your HTML files here (src is the file content as a string)
-        //             return src;
-        //         }
-        //     },
-        // });
-
-        return config;
-    },
-};
+  //   viteFinal: async (config, {configType}) => {
+  //       config.root = './dist'
+  //       // config.plugins.push({
+  //       //     name: "html-transform",
+  //       //     transform(src, id) {
+  //       //         if (id.endsWith(".mustache") || id.endsWith(".html") || id.endsWith(".hbs")) {
+  //       //             // Transform your HTML files here (src is the file content as a string)
+  //       //             return src;
+  //       //         }
+  //       //     },
+  //       // });
+  // },
+  webpackFinal: async (config, { configType }) => {
+    // Add custom webpack configuration here
+    config.module.rules.push({
+      test: /\.custom\.js$/, // Example custom rule
+      use: ['babel-loader'], // Example custom loader
+    });
+    // Add Handlebars loader rule
+    config.module.rules.push({
+      test: /\.hbs$/,
+      loader: 'handlebars-loader',
+      options: {
+        helperDirs: path.resolve(__dirname, '../src/helpers/Handlebars'),
+        knownHelpers: ['ifCond', 'ifAny', 'renderSpecialChar', 'itemAt'],
+        knownHelpersOnly: false,
+      },
+    });
+    // SCSS rule
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'postcss-loader', 'css-loader', 'sass-loader', 'import-glob-loader'],
+      include: path.resolve(__dirname, '../.migrate/styles'),
+    });
 
+    // Return the customized webpack config
+    return config;
+  },
+};
 export default config;

.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/manager-api';
+//import { themes } from '@storybook/theming';
+import qgdsTheme from '../.storybook/qgdsTheme';
+
+addons.setConfig({
+  theme: qgdsTheme,
+});

.storybook/preview-body.html

@@ -0,0 +1 @@
+<body class="qld__grid"></body>

.storybook/preview-foot.html

@@ -0,0 +1,14 @@
+<!-- Font awesome JS  -->
+<script src="https://kit.fontawesome.com/fb2f2d4cd6.js" crossorigin="anonymous"></script>
+
+<!-- Bundled JS  -->
+<script src="./js/bundle.js"></script>
+
+<!-- Standard GTM -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={GA_TRACKING_ID}"></script>
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+    gtag('config', '{GA_TRACKING_ID}');
+</script>

.storybook/preview-head.html

@@ -1,24 +0,0 @@
-<!-- Refer: https://storybook.js.org/docs/configure/story-rendering#adding-to-head -->
-
-<style>
-    #storybook-docs .docblock-argstable-head th:nth-of-type(1) {
-        min-width: 20% !important;
-    }
-
-    #storybook-docs .docblock-argstable-head th:nth-of-type(2) {
-        min-width: 25% !important;
-    }
-
-    #storybook-docs .docblock-argstable-head th:nth-of-type(3) {
-        min-width: 20% !important;
-    }
-
-    #storybook-docs .docblock-argstable-head th:nth-of-type(4) {
-        min-width: 35% !important;
-    }
-
-
-    #storybook-docs .docblock-argstable-body textarea {
-        /* min-height: 100px; */
-    }
-</style>

.storybook/previewStyles.css

@@ -0,0 +1,4 @@
+/* Displaying standard template without page padding */
+.sb-show-main.sb-main-padded {
+    padding: 0; /* Set the padding to 0 or your desired value */
+}

.storybook/qgdsTheme.js

@@ -0,0 +1,10 @@
+import { create } from '@storybook/theming/create';
+import coa from '../src/assets/img/header-logo-qgov--light.svg';
+
+export default create({
+  base: 'dark',
+  brandTitle: 'QGDS',
+  brandUrl: 'https://qld.gov.au',
+  brandImage: coa,
+  brandTarget: '_self',
+});