@pure-ds/storybook 0.1.0

package/src/js/common/ask.js

@@ -0,0 +1,208 @@
+import { render, html } from "lit";
+import { config } from "../../../pds.config.js"
+
+/**
+ * Get the current page title for dialogs
+ */
+function getPageTitle() {
+  return document.title || 
+         document.querySelector('h1')?.textContent || 
+         'Application';
+}
+
+/**
+ * Create a PDS-compliant dialog with proper semantic structure
+ * @param {string|TemplateResult} message - Message content (string or Lit template)
+ * @param {Object} options - Dialog options
+ * @returns {Promise} Resolves with result when dialog closes
+ */
+export async function ask(message, options = {}) {
+  
+  const defaults = {
+    title: "Confirm",
+    type: "confirm", // 'alert', 'confirm', 'custom'
+    buttons: {
+      ok: { name: "OK", primary: true },
+      cancel: { name: "Cancel", cancel: true },
+    },
+  };
+  
+  options = { ...defaults, ...options };
+  
+  return new Promise((resolve) => {
+    // Create native dialog element
+    const dialog = document.createElement("dialog");
+    
+    if(config.options?.liquidGlassEffects)
+      dialog.classList.add("liquid-glass");
+    
+    // Add optional CSS classes
+    if (options.size) {
+      dialog.classList.add(`dialog-${options.size}`); // dialog-sm, dialog-lg, dialog-xl
+    }
+    if (options.type) {
+      dialog.classList.add(`dialog-${options.type}`);
+    }
+    if (options.class) {
+      if (Array.isArray(options.class)) {
+        dialog.classList.add(...options.class);
+      } else {
+        dialog.classList.add(options.class);
+      }
+    }
+
+    // Build button elements
+    const buttons = Object.entries(options.buttons).map(([code, obj]) => {
+      const btnClass = obj.primary ? "btn-primary btn-sm" : "btn-outline btn-sm";
+      const btnType = obj.cancel ? "button" : "submit";
+      return `<button type="${btnType}" class="${btnClass}" value="${code}">${obj.name}</button>`;
+    });
+
+    // Create PDS-compliant dialog structure
+    // When useForm is true, don't wrap in a form - let the content provide the form
+    if (options.useForm) {
+      dialog.innerHTML = /*html*/ `
+        <header>
+          <h2>${options.title}</h2>
+        </header>
+        
+        <article id="msg-container"></article>
+      `;
+      
+      // Render message content first
+      const article = dialog.querySelector("#msg-container");
+      if (typeof message === "object" && message._$litType$) {
+        render(message, article);
+      } else if (typeof message === "string") {
+        article.textContent = message;
+      } else {
+        render(message, article);
+      }
+      
+      // Wait for content to render, then find the form and add buttons to it
+      requestAnimationFrame(() => {
+        const form = dialog.querySelector("form");
+        if (form) {
+          const footer = document.createElement("footer");
+          footer.innerHTML = buttons.join("");
+          form.appendChild(footer);
+        }
+      });
+    } else {
+      dialog.innerHTML = /*html*/ `
+        <form method="dialog">
+          <header>
+            <h2>${options.title}</h2>
+          </header>
+          
+          <article id="msg-container"></article>
+          
+          <footer>
+            ${buttons.join("")}
+          </footer>
+        </form>
+      `;
+
+      // Render message content
+      const article = dialog.querySelector("#msg-container");
+      if (typeof message === "object" && message._$litType$) {
+        render(message, article);
+      } else if (typeof message === "string") {
+        article.textContent = message;
+      } else {
+        render(message, article);
+      }
+    }
+
+    // Handle cancel button clicks
+    dialog.addEventListener("click", (e) => {
+      const btn = e.target.closest('button[value="cancel"]');
+      if (btn) {
+        dialog.close();
+        resolve(false);
+      }
+    });
+
+    // Wait for form to exist before adding submit listener
+    const setupFormListener = () => {
+      const form = dialog.querySelector("form");
+      if (form) {
+        form.addEventListener("submit", (event) => {
+          event.preventDefault();
+          
+          let result;
+          if (options.useForm && event.submitter.value === "ok") {
+            console.log("Found form:", form);
+            console.log("Form elements:", form ? Array.from(form.elements) : "no form");
+            result = new FormData(form);
+            console.log("FormData entries:", Array.from(result.entries()));
+          } else {
+            result = (event.submitter.value === "ok");
+          }
+
+          dialog.close();
+          resolve(result);
+        });
+      } else {
+        // Form doesn't exist yet, wait and try again
+        requestAnimationFrame(setupFormListener);
+      }
+    };
+    
+    setupFormListener();
+
+    // Handle dialog close event
+    dialog.addEventListener("close", () => {
+      // Small delay to allow exit animation
+      setTimeout(() => dialog.remove(), 200);
+    });
+
+    // Append to body and show
+    document.body.appendChild(dialog);
+
+    // Call optional rendered callback
+    if (typeof options.rendered === "function") {
+      options.rendered(dialog);
+    }
+
+    // Show the dialog as modal
+    dialog.showModal();
+  });
+}
+
+/**
+ * Show an alert dialog
+ * @param {string|TemplateResult} message - Alert message
+ * @param {Object} options - Optional dialog options
+ * @returns {Promise}
+ */
+export async function alert(message, options = {}) {
+  const defaults = {
+    title: getPageTitle(),
+    type: "alert",
+    buttons: {
+      ok: { name: "OK", primary: true },
+    },
+  };
+
+  return ask(message, { ...defaults, ...options });
+}
+
+/**
+ * Show a confirmation dialog
+ * @param {string|TemplateResult} message - Confirmation message
+ * @param {Object} options - Optional dialog options
+ * @returns {Promise<boolean>}
+ */
+export async function confirm(message, options = {}) {
+  const defaults = {
+    title: "Confirm Action",
+    type: "confirm",
+    buttons: {
+      ok: { name: "Confirm", primary: true },
+      cancel: { name: "Cancel", cancel: true },
+    },
+  };
+
+  return ask(message, { ...defaults, ...options });
+}

package/src/js/common/common.js

@@ -0,0 +1,20 @@
+export function isObject(item) {
+  return item && typeof item === 'object' && !Array.isArray(item);
+}
+
+export function deepMerge(target, source) {
+    const output = { ...target };
+    if (isObject(target) && isObject(source)) {
+      Object.keys(source).forEach(key => {
+        if (isObject(source[key])) {
+          if (!(key in target))
+            Object.assign(output, { [key]: source[key] });
+          else
+            output[key] = deepMerge(target[key], source[key]);
+        } else {
+          Object.assign(output, { [key]: source[key] });
+        }
+      });
+    }
+    return output;
+  }

package/src/js/common/font-loader.js

@@ -0,0 +1,200 @@
+/**
+ * Font Loading Utility
+ * Automatically loads fonts from Google Fonts when they're not available in the browser
+ */
+
+/**
+ * Checks if a font is available in the browser
+ * @param {string} fontName - The name of the font to check
+ * @returns {boolean} True if the font is available
+ */
+function isFontAvailable(fontName) {
+  // Clean up font name (remove quotes and extra spacing)
+  const cleanName = fontName.replace(/['"]/g, '').trim();
+  
+  // System fonts that are always available
+  const systemFonts = [
+    'system-ui',
+    '-apple-system',
+    'sans-serif',
+    'serif',
+    'monospace',
+    'cursive',
+    'fantasy',
+    'ui-sans-serif',
+    'ui-serif',
+    'ui-monospace',
+    'ui-rounded'
+  ];
+  
+  if (systemFonts.includes(cleanName.toLowerCase())) {
+    return true;
+  }
+  
+  // Use canvas-based detection
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  
+  if (!context) return false;
+  
+  const testString = 'mmmmmmmmmmlli'; // Characters with varying widths
+  const testSize = '72px';
+  const baselineFont = 'monospace';
+  
+  // Measure with baseline font
+  context.font = `${testSize} ${baselineFont}`;
+  const baselineWidth = context.measureText(testString).width;
+  
+  // Measure with test font
+  context.font = `${testSize} "${cleanName}", ${baselineFont}`;
+  const testWidth = context.measureText(testString).width;
+  
+  return baselineWidth !== testWidth;
+}
+
+/**
+ * Extracts the primary font name from a font-family string
+ * @param {string} fontFamily - Font family string (e.g., "Roboto, sans-serif")
+ * @returns {string} The primary font name
+ */
+function extractPrimaryFont(fontFamily) {
+  if (!fontFamily) return null;
+  
+  // Split by comma and get first font
+  const fonts = fontFamily.split(',').map(f => f.trim());
+  const primaryFont = fonts[0];
+  
+  // Remove quotes
+  return primaryFont.replace(/['"]/g, '').trim();
+}
+
+/**
+ * Loads a Google Font dynamically
+ * @param {string} fontFamily - The font family to load (can be comma-separated list)
+ * @param {Object} options - Loading options
+ * @param {number[]} options.weights - Font weights to load (default: [400, 500, 600, 700])
+ * @param {boolean} options.italic - Whether to include italic variants (default: false)
+ * @returns {Promise<void>}
+ */
+export async function loadGoogleFont(fontFamily, options = {}) {
+  if (!fontFamily) {
+    return Promise.resolve();
+  }
+  
+  const {
+    weights = [400, 500, 600, 700],
+    italic = false
+  } = options;
+  
+  const primaryFont = extractPrimaryFont(fontFamily);
+  
+  if (!primaryFont) {
+    return Promise.resolve();
+  }
+  
+  // Check if font is already available
+  if (isFontAvailable(primaryFont)) {
+    return Promise.resolve();
+  }
+  
+  // Check if font link already exists
+  const encodedFont = encodeURIComponent(primaryFont);
+  const existingLink = document.querySelector(
+    `link[href*="fonts.googleapis.com"][href*="${encodedFont}"]`
+  );
+  
+  if (existingLink) {
+    console.log(`Font "${primaryFont}" is already loading or loaded`);
+    return Promise.resolve();
+  }
+  
+  console.log(`Loading font "${primaryFont}" from Google Fonts...`);
+  
+  return new Promise((resolve, reject) => {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    
+    // Build Google Fonts URL with specified weights
+    const weightsParam = italic 
+      ? `ital,wght@0,${weights.join(';0,')};1,${weights.join(';1,')}`
+      : `wght@${weights.join(';')}`;
+    
+    link.href = `https://fonts.googleapis.com/css2?family=${encodedFont}:${weightsParam}&display=swap`;
+    
+    // Add a data attribute for easy identification
+    link.setAttribute('data-font-loader', primaryFont);
+    
+    link.onload = () => {
+      console.log(`Successfully loaded font "${primaryFont}"`);
+      resolve();
+    };
+    
+    link.onerror = () => {
+      console.warn(`Failed to load font "${primaryFont}" from Google Fonts`);
+      reject(new Error(`Failed to load font: ${primaryFont}`));
+    };
+    
+    document.head.appendChild(link);
+    
+    // Set a timeout to prevent hanging indefinitely
+    setTimeout(() => {
+      if (!isFontAvailable(primaryFont)) {
+        console.warn(`Font "${primaryFont}" did not load within timeout`);
+      }
+      resolve(); // Resolve anyway to not block the application
+    }, 5000);
+  });
+}
+
+/**
+ * Loads fonts for all font families in a typography config
+ * @param {Object} typographyConfig - Typography configuration object
+ * @returns {Promise<void>}
+ */
+export async function loadTypographyFonts(typographyConfig) {
+  if (!typographyConfig) {
+    return Promise.resolve();
+  }
+  
+  const fontFamilies = new Set();
+  
+  // Collect all font families from the config
+  if (typographyConfig.fontFamilyHeadings) {
+    fontFamilies.add(typographyConfig.fontFamilyHeadings);
+  }
+  if (typographyConfig.fontFamilyBody) {
+    fontFamilies.add(typographyConfig.fontFamilyBody);
+  }
+  if (typographyConfig.fontFamilyMono) {
+    fontFamilies.add(typographyConfig.fontFamilyMono);
+  }
+  
+  // Load all fonts in parallel
+  const loadPromises = Array.from(fontFamilies).map(fontFamily => 
+    loadGoogleFont(fontFamily).catch(err => {
+      console.warn(`Could not load font: ${fontFamily}`, err);
+      // Don't fail the whole operation if one font fails
+    })
+  );
+  
+  await Promise.all(loadPromises);
+}
+
+/**
+ * Removes previously loaded Google Fonts
+ * @param {string} fontName - Optional font name to remove. If not specified, removes all.
+ */
+export function unloadGoogleFont(fontName = null) {
+  const selector = fontName 
+    ? `link[data-font-loader="${fontName}"]`
+    : 'link[data-font-loader]';
+  
+  const links = document.querySelectorAll(selector);
+  links.forEach(link => link.remove());
+  
+  if (fontName) {
+    console.log(`Unloaded font "${fontName}"`);
+  } else {
+    console.log(`Unloaded ${links.length} font(s)`);
+  }
+}

package/src/js/common/msg.js

@@ -0,0 +1,90 @@
+const isLocal = ["127.0.0.1", "localhost"].includes(window.location.hostname);
+
+/**
+ * Checks whether a given value is not a string and contains the property 'strTag'.
+ *
+ * This function evaluates the input `val` to determine if it is of a type
+ * other than string and also verifies the existence of a property named 'strTag'
+ * within the value.
+ *
+ * @param {*} val - The value to be checked.
+ * @returns {boolean} True if the value is not a string and has the 'strTag' property, false otherwise.
+ */
+const isStrTagged = (val) => typeof val !== "string" && "strTag" in val;
+
+/**
+ * Concatenates an array of strings into a single string, inserting placeholders
+ * between elements of the array based on their index position.
+ *
+ * @param {string[]} strings - An array of strings to be collated.
+ * @return {string} A single string consisting of the input strings concatenated with index-based placeholders.
+ */
+function collateStrings(strings) {
+  let s = "";
+  for (let i = 0; i <= strings.length - 1; i++) {
+    s += strings[i];
+    if (i < strings.length - 1) s += `{${i}}`;
+  }
+  return s;
+}
+
+/**
+ * Replaces placeholders in the input string with values provided by the callback function.
+ * Placeholders are in the format `{n}` where `n` is a numeric index.
+ *
+ * @param {string} str - The input string containing placeholders to replace.
+ * @param {function} callback - A function that takes an index as a parameter
+ * and returns the replacement value for the placeholder.
+ * @return {string} The string with placeholders replaced by the corresponding values.
+ */
+function replacePlaceholders(str, callback) {
+  return str.replace(/\{(\d+)\}/g, (match, index) => callback(index));
+}
+
+/**
+ * Render the result of a `str` tagged template to a string. Note we don't need
+ * to do this for Lit templates, since Lit itself handles rendering.
+ */
+export const joinStringsAndValues = (strings, values, options) => {
+  const matchString = collateStrings(strings);
+  const tra = getTrans(matchString, options);
+  return replacePlaceholders(tra, (index) => {
+    return values[index];
+  });
+};
+
+/**
+ * Retrieves a translated string or provides fallback behavior.
+ *
+ * @param {string} t - The key of the string to be translated.
+ * @param {Object} [options] - Additional options for translation.
+ * @param {string} [options.desc] - A description of the string being translated, used for debugging purposes.
+ * @return {string} The translated string if found, or the key itself as a fallback. If debugging is enabled, returns a debug string.
+ */
+function getTrans(t, options = {}) {
+  window.__strings = window.__strings ?? {};
+  const tra = window.__strings[t]?.content;
+
+  if (!tra && isLocal) {
+    // eslint-disable-next-line no-console
+    console.log("🌐", t, options.desc ? `(${options.desc})` : ``);
+  }
+  if (window.env?.DEBUG_TRANSLATIONS) return `__${tra ?? t}`;
+  return tra ?? t;
+}
+
+/**
+ * Processes and transforms a given template into a string based on provided options.
+ * Accepts a tagged template or a string identifier and performs appropriate operations
+ * to return the resultant string.
+ *
+ * @param {Template | string | StrResult} template - The input template, which can be a tagged template or a string
+ * @param {Object} options
+ **/
+export const msg = (template, options = {}) => {
+  if (!template) return "";
+
+  return isStrTagged(template)
+    ? joinStringsAndValues(template.strings, template.values, options)
+    : getTrans(template, options);
+};

package/src/js/lit.js

@@ -0,0 +1,40 @@
+// Explicitly import from Lit
+import { nothing, LitElement, html as litHtml, css as litCss, svg, render } from "lit";
+
+
+// Re-export while preserving type hints
+/** @type {typeof import("./lit").html} */
+export const html = litHtml;
+
+/** @type {typeof import("./lit").css} */
+export const css = litCss;
+
+export { LitElement, nothing, svg, render };
+
+export * from "lit/directives/repeat.js";
+export * from "lit/directives/keyed.js";
+export * from 'lit/directives/class-map.js';
+
+export { ref, createRef } from "lit/directives/ref.js";
+export { ifDefined } from "lit/directives/if-defined.js";
+//export { str } from "@lit/localize";
+export { until } from "lit/directives/until.js";
+export { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+export { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+
+export { msg } from "./common/msg.js";
+
+/**
+ * Loads the strings from a given (5-letter-code) locale
+ * @param {String} locale
+ */
+export async function loadLocale(locale) {
+  try {
+    window.__strings = await fetch(`/assets/locales/${locale}.json`).then((r) => r.json());
+  } catch {
+    window.__strings = {};
+  }
+}
+
+export { html as staticHtml, unsafeStatic } from 'lit/static-html.js';