npm - @pure-ds/core - Versions diffs - 0.5.11 → 0.5.12 - Mend

@pure-ds/core 0.5.11 → 0.5.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/types/public/assets/js/pds-manager.d.ts +6 -6
package/package.json +1 -1
package/packages/pds-cli/bin/pds-bootstrap.js +245 -51

package/dist/types/public/assets/js/pds-manager.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-export { nt as startLive };
-declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setupSystemListenerIfNeeded: r }: {
+export { it as startLive };
+declare function it(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setupSystemListenerIfNeeded: r }: {
     emitReady: any;
     applyResolvedTheme: any;
     setupSystemListenerIfNeeded: any;
@@ -604,8 +604,8 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
         };
         "__#private@#l"(t: any): number;
         "__#private@#c"(t: any, e: any): number;
-        "__#private@#m"(t: any, e?: number): string;
         "__#private@#h"(t: any, e?: number): string;
+        "__#private@#m"(t: any, e?: number): string;
         "__#private@#z"(t: any, e: any, a?: number): string;
         "__#private@#M"(t: any, e: any, a: any): string;
         "__#private@#F"(t: any): {
@@ -718,10 +718,10 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
             externalPath: any;
         };
         "__#private@#D"(t: any): string;
-        "__#private@#N"(t: any): string;
         "__#private@#P"(t: any): string;
-        "__#private@#I"(t: any): string;
+        "__#private@#N"(t: any): string;
         "__#private@#U"(t: any): string;
+        "__#private@#I"(t: any): string;
         "__#private@#O"(t: any): string;
         "__#private@#H"(t: any): string;
         "__#private@#q"(t: any): string;
@@ -748,8 +748,8 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
         "__#private@#pe"(): string;
         "__#private@#ue"(): string;
         "__#private@#ge"(): string;
-        "__#private@#me"(): string;
         "__#private@#he"(): string;
+        "__#private@#me"(): string;
         "__#private@#o"(t: any): {
             h: number;
             s: number;

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@pure-ds/core",
   "shortname": "pds",
-  "version": "0.5.11",
+  "version": "0.5.12",
   "description": "Pure Design System - Why develop a Design System when you can generate one?",
   "repository": {
     "type": "git",

package/packages/pds-cli/bin/pds-bootstrap.js CHANGED Viewed

@@ -71,7 +71,7 @@ function buildIndexHtml({ version, generatedAt }) {
   <body class="container">
     <header class="stack-sm">
-      <p class="text-muted">Auto-generated by PDS ${version} at ${generatedAt}</p>
+      <p class="auto-gen">Auto-generated by PDS ${version} at ${generatedAt}</p>
     </header>
     <main></main>
@@ -90,20 +90,18 @@ function buildDevReloadJs() {
 if (shouldConnect) {
   const reloadPort = 4174;
-  const endpoint =
-          <h1>Welcome to your new App</h1>
-    source.onmessage = (event) => {
-      if (event.data === 'reload') {
-              This <code>&lt;wc-home&gt;</code> Web Component is lazy-loaded and styled with Pure Design System.
-    };
+  const endpoint = 'http://localhost:' + reloadPort + '/events';
+  const source = new EventSource(endpoint);
-    source.onerror = () => {
-            <a target="_blank" href="https://github.com/Pure-Web-Foundation/pure-ds/blob/main/packages/pds-storybook/stories/GettingStarted.md" class="btn btn-primary btn-lg">
-              <pds-icon icon="rocket"></pds-icon> Get Started
-            </a>
-            <a target="_blank" href="https://puredesignsystem.z6.web.core.windows.net/storybook/" class="btn btn-secondary btn-lg">
-              <pds-icon icon="book-open"></pds-icon> Storybook
-            </a>
+  source.onmessage = (event) => {
+    if (event.data === 'reload') {
+      location.reload();
+    }
+  };
+  source.onerror = () => {
+    source.close();
+  };
 }
 `;
 }
@@ -113,52 +111,182 @@ function buildAppCss() {
   opacity: 0;
 }
-async function getPdsCoreVersion() {
-  try {
-    const pkgPath = path.join(projectRoot, 'node_modules', '@pure-ds', 'core', 'package.json');
-    const raw = await readFile(pkgPath, 'utf8');
-    const pkg = JSON.parse(raw);
-    return pkg?.version || 'unknown';
-  } catch {
-    return 'unknown';
-  }
+main {
+  margin: auto;
 }
-main {
-  margin-top: var(--spacing-8);
+h1 {
+  background: linear-gradient(var(--gradient-angle, 135deg),
+    var(--color-primary-400),
+    var(--color-accent-400)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+.container {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  height: 100dvh;
+  padding: 0;
+}
+header, footer {
+  padding: var(--spacing-4);
+}
+footer {
+  text-align: center;
+}
+.auto-gen {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+}
+#settings-btn {
+  position: fixed;
+  top: var(--spacing-4);
+  right: var(--spacing-4);
+}
+.hero {
+  padding: var(--spacing-8);
+  zoom: 1.15;
+  text-align: center;
+  border: var(--border-width-medium) solid transparent;
+  background: linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
+    linear-gradient(var(--gradient-angle, 135deg), var(--color-primary-400), var(--color-accent-400)) border-box;
+  max-width: var(--max-w-lg);
+  border-radius: var(--radius-lg);
+  border-width: 3px;
+}
+.hero > div {
+  margin: var(--spacing-10) 0;
 }
 `;
 }
-function buildWcHome() {
-  return `customElements.define(
-  "wc-home",
+function buildMyHome() {
+  return `/**
+ * @file my-home.js
+ * @description A simple home component for the app.
+ */
+customElements.define(
+  "my-home",
   class extends HTMLElement {
     connectedCallback() {
       this.innerHTML = /*html*/ \`
-        <article class="card text-center border-gradient surface-translucent-50">
-          <header>
-            <h1>Welcome to Pure Design System</h1>
-            <h2 class="text-muted">Build on What Lasts</h2>
-          </header>
-          <div class="stack-lg">
+        <article class="hero">
+          <h1>Welcome to your new App</h1>
+          <div>
             <p>
-              This is a demo of a web component using Pure Design System.
-              It showcases the design tokens, components, and utilities provided by PDS.
+              This <code>&lt;my-home&gt;</code> Web Component is lazy-loaded and styled with Pure Design System.
+            </p>
+            <p>
+              You can start building your app by editing the files in <code>public/assets/my/</code> and <code>src/js/</code>.
             </p>
           </div>
-          <nav class="flex justify-center gap-sm">
-            <button class="btn-primary btn-lg" data-enhanced-btn-working="true">
-              Get Started
-            </button>
-            <a href="https://pureweb.dev" class="btn btn-secondary btn-lg" data-enhanced-btn-working="true">
-              Learn More
+          <nav>
+            <a target="_blank" href="https://github.com/Pure-Web-Foundation/pure-ds/blob/main/packages/pds-storybook/stories/GettingStarted.md" class="btn btn-primary btn-lg">
+              <pds-icon icon="rocket"></pds-icon> Get Started
+            </a>
+            <a target="_blank" href="https://puredesignsystem.z6.web.core.windows.net/storybook/" class="btn btn-secondary btn-lg">
+              <pds-icon icon="book-open"></pds-icon> Storybook
             </a>
           </nav>
         </article>
       \`;
     }
-  }
+  },
+);
+`;
+}
+function buildMyTheme() {
+  return `/**
+ * my-theme Web Component - allows users to select the app theme (light, dark, system)
+ *
+ * Uses Pure Design System (PDS) for styling and theming.
+ */
+customElements.define(
+  "my-theme",
+  class extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" });
+    }
+    async connectedCallback() {
+      const componentStyles = PDS.createStylesheet(\`
+        :host {
+          display: block;
+        }
+      \`);
+      await PDS.adoptLayers(
+        this.shadowRoot,
+        ["tokens", "primitives", "components", "utilities"],
+        [componentStyles],
+      );
+      this.shadowRoot.innerHTML += /*html*/ \`
+        <form>
+          <fieldset role="radiogroup" aria-label="Theme" class="buttons">
+            <legend>Theme</legend>
+            <label>
+              <input type="radio" name="theme" value="system">
+              <span>
+                <pds-icon icon="moon-stars"></pds-icon>
+                System
+              </span>
+            </label>
+            <label>
+              <input type="radio" name="theme" value="light">
+              <span>
+                <pds-icon icon="sun"></pds-icon>
+                Light
+              </span>
+            </label>
+            <label>
+              <input type="radio" name="theme" value="dark">
+              <span>
+                <pds-icon icon="moon"></pds-icon>
+                Dark
+              </span>
+            </label>
+          </fieldset>
+        </form>\`;
+      this.#updateCheckedState();
+      this.shadowRoot.addEventListener("change", (e) => {
+        if (e.target.type === "radio" && e.target.name === "theme") {
+          PDS.setTheme(e.target.value, { persist: true });
+          PDS.toast(\`Theme changed to \${e.target.value}\`, { duration: 2000 });
+        }
+      });
+      const observer = new MutationObserver(() => {
+        this.#updateCheckedState();
+      });
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["data-theme"],
+      });
+    }
+    #updateCheckedState() {
+      const currentTheme = PDS.theme || "system";
+      const radios = this.shadowRoot.querySelectorAll('input[type="radio"]');
+      radios.forEach((radio) => {
+        radio.checked = radio.value === currentTheme;
+      });
+    }
+  },
 );
 `;
 }
@@ -170,12 +298,73 @@ import { config } from '../../pds.config.js';
 await PDS.start(config);
 PDS.theme = 'light';
-await import('/assets/wc/wc-home.js');
 const main = document.querySelector('main');
-if (main && !main.querySelector('wc-home')) {
-  main.innerHTML = '<wc-home></wc-home>';
+if (main && !main.querySelector('my-home')) {
+  main.innerHTML = '<my-home></my-home>';
+}
+const settingsBtn = document.createElement('button');
+settingsBtn.id = 'settings-btn';
+settingsBtn.className = 'icon-only btn-xs btn-outline';
+settingsBtn.setAttribute('aria-label', 'Settings');
+settingsBtn.innerHTML = '<pds-icon icon="gear"></pds-icon>';
+document.body.appendChild(settingsBtn);
+const drawer = document.createElement('pds-drawer');
+drawer.setAttribute('position', 'right');
+drawer.innerHTML = `
+  <div slot="drawer-header">Settings</div>
+  <div slot="drawer-content">
+    <my-theme></my-theme>
+  </div>
+`;
+document.body.appendChild(drawer);
+settingsBtn.addEventListener('click', () => {
+  drawer.open = true;
+});
+`;
 }
+function buildPdsConfig() {
+  return `let defaultEnhancers = [];
+if (typeof window !== "undefined") defaultEnhancers = PDS.defaultEnhancers;
+export const config = {
+  mode: "static",
+  preset: "social-feed",
+  autoDefine: {
+    predefine: ["pds-icon", "pds-drawer", "pds-toaster"],
+    // Custom component paths
+    mapper: (tag) => {
+      if (tag.startsWith("my-")) return "/assets/my/\${tag}.js";
+      // Return nothing to use PDS default mapping
+    },
+    enhancers: [
+      ...defaultEnhancers,
+      {
+        selector: ".hero",
+        description: "Adds tooltip on hover",
+        run: (element) => {
+          let angle = 135;
+          const speed = 0.5;
+          function animate() {
+            angle = (angle + speed) % 360;
+            element.style.setProperty("--gradient-angle", \`\${angle}deg\`);
+            requestAnimationFrame(animate);
+          }
+          animate();
+        },
+      },
+    ],
+  },
+};
 `;
 }
@@ -242,7 +431,7 @@ async function start() {
     format: 'esm',
     sourcemap: true,
     publicPath: '/assets/js',
-    external: ['/assets/wc/*'],
+    external: ['/assets/my/*'],
     logLevel: 'info',
     plugins: [liveReloadPlugin()]
   });
@@ -322,7 +511,7 @@ const ctx = await esbuild.context({
   format: 'esm',
   sourcemap: true,
   publicPath: '/assets/js',
-  external: ['/assets/wc/*'],
+  external: ['/assets/my/*'],
   logLevel: 'info',
   plugins: [liveReloadPlugin()]
 });
@@ -445,13 +634,18 @@ async function main() {
   );
   await writeFileIfMissing(path.join(projectRoot, 'public', 'assets', 'css', 'app.css'), buildAppCss());
   await writeFileIfMissing(path.join(projectRoot, 'src', 'js', 'app.js'), buildAppJs());
+  await writeFileIfMissing(path.join(projectRoot, 'pds.config.js'), buildPdsConfig());
   await writeFileIfMissing(
     path.join(projectRoot, 'public', 'assets', 'js', 'dev-reload.js'),
     buildDevReloadJs()
   );
   await writeFileIfMissing(
-    path.join(projectRoot, 'public', 'assets', 'wc', 'wc-home.js'),
-    buildWcHome()
+    path.join(projectRoot, 'public', 'assets', 'my', 'my-home.js'),
+    buildMyHome()
+  );
+  await writeFileIfMissing(
+    path.join(projectRoot, 'public', 'assets', 'my', 'my-theme.js'),
+    buildMyTheme()
   );
   const esbuildDevPath = path.join(projectRoot, 'esbuild-dev.js');