npm - juo - Versions diffs - 0.3.0-alpha.1 → 0.3.0-alpha.2 - Mend

juo 0.3.0-alpha.1 → 0.3.0-alpha.2

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 (24) hide show

package/README.md +1 -1
package/bin/dev.js +1 -0
package/dist/commands/create.js +85 -39
package/dist/commands/generate.d.ts +5 -5
package/dist/commands/publish/index.d.ts +2 -2
package/dist/lib/index.d.ts +1 -0
package/dist/lib/index.js +1 -1
package/dist/{packageGenerator-D81lWXTA.js → packageGenerator-BToocy-h.js} +3 -2
package/oclif.manifest.json +1 -1
package/package.json +1 -1
package/templates/.storybook/preview-head.html.liquid +3 -5
package/templates/block/preact/index.ts.liquid +65 -10
package/templates/block/preact/{{block.clsName}}.tsx.liquid +100 -130
package/templates/block/react/index.ts.liquid +64 -8
package/templates/block/react/{{block.clsName}}.tsx.liquid +104 -53
package/templates/configFiles/vite-env.d.ts.liquid +11 -1
package/templates/css/styles.css +31 -35
package/templates/dev/index.html.liquid +10 -1
package/templates/dev/vite/juo-editor-plugin.ts.liquid +22 -1
package/templates/dev/vite/mock-login.ts.liquid +83 -0
package/templates/dev/vite/mock-services.ts.liquid +140 -0
package/templates/dev/vite/theme-shell.ts.liquid +123 -2
package/templates/dev/vite/workflowOverlay.ts.liquid +280 -0
package/templates/stories/{{block.clsName}}.stories.tsx.liquid +6 -3

package/templates/css/styles.css CHANGED Viewed

@@ -1,59 +1,55 @@
 @import "@juo/customer-ui/design-tokens.css";
 @import "@juo/customer-ui/theme-modes.css";
-.container {
-  font-weight: 540;
+/*
+ * Styling for the starter block (non-Tailwind projects).
+ *
+ * Everything below comes from the Customer UI design tokens imported above:
+ * the `--space-*` spacing scale, the `--font-size-*` type scale, the
+ * `--radius-*` radius scale, and the `--tint-*` (neutral) / `--accent-*`
+ * (brand) color palettes. Prefer these tokens over hardcoded values so the
+ * block follows the merchant's theme automatically.
+ */
+.starter-block {
   display: flex;
-  gap: 2rem;
-  justify-content: space-between;
   align-items: center;
-  padding: 2.5rem;
-  border-radius: 0.5rem;
-  border: 1px solid #9ca3af;
-  background-color: #fafafa;
+  justify-content: space-between;
+  gap: var(--space-32);
+  padding: var(--space-36);
 }
-.content {
+.starter-block__info {
   display: flex;
   align-items: center;
-  gap: 0.875rem;
+  gap: var(--space-12);
 }
-.icon-container {
+.starter-block__icons {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--space-8);
+  /* Defaults to a neutral color; overridden inline by the color control. */
+  color: var(--tint-900);
 }
-.framework-icon {
-  width: 2.25rem;
-  height: 2.25rem;
-  fill: currentColor;
-  color: black;
+.starter-block__icon {
+  width: var(--space-36);
+  height: var(--space-36);
 }
-.typescript-icon {
-  width: 2.5rem;
-  height: 2.5rem;
-  fill: currentColor;
-  color: black;
-}
-.text-container {
+.starter-block__text {
   display: flex;
   flex-direction: column;
-  align-self: center;
 }
-.subtitle {
-  font-size: 12px;
-  line-height: 1rem;
-  color: #696969;
+.starter-block__subtitle {
+  font-size: var(--font-size-12);
+  color: var(--tint-500);
 }
-.title {
-  font-size: 15px;
-  line-height: 1;
-  color: #111;
+.starter-block__title {
+  font-size: var(--font-size-16);
+  font-weight: 500;
+  color: var(--tint-900);
 }

package/templates/dev/index.html.liquid CHANGED Viewed

@@ -4,6 +4,15 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Juo Blocks Dev</title>
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+    <style>
+      body {
+        font-family: InterVariable, Inter, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+    </style>
     <script type="importmap">
       {
         "imports": {
@@ -14,7 +23,7 @@
   </head>
   <body>
     <juo-context-root>
-      <div id="app"></div>
+      <div id="app" style="padding: 20px; max-width: 1080px; margin: 0 auto;"></div>
     </juo-context-root>
     <script type="module" src="/vite/theme-shell.ts"></script>
   </body>

package/templates/dev/vite/juo-editor-plugin.ts.liquid CHANGED Viewed

@@ -3,9 +3,28 @@ import type { Plugin } from "vite";
 const EDITOR_EMBED_URL =
   "https://cdn.juo.io/web/blocks/juo/editor/{{ editorVersion }}/juo-editor.embed.js";
+const DEVTOOLS_EMBED_URL =
+  "https://cdn.juo.io/web/blocks/juo/devtools/{{ devtoolsVersion }}/blocks-devtools.embed.js";
 export default function juo(): Plugin {
   return {
     name: "juo-editor",
+    transformIndexHtml(_html, ctx) {
+      // Skip the editor page itself — devtools aren't needed there.
+      if (ctx.path === "/editor" || ctx.path.startsWith("/editor?")) return;
+      return {
+        html: _html,
+        tags: [
+          {
+            tag: "script",
+            attrs: { type: "module", src: DEVTOOLS_EMBED_URL },
+            injectTo: "head-prepend",
+          },
+        ],
+      };
+    },
     configureServer(server) {
       server.middlewares.use("/editor", (_req, res) => {
         res.writeHead(200, { "Content-Type": "text/html" });
@@ -15,8 +34,10 @@ export default function juo(): Plugin {
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Juo Blocks Editor</title>
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     <style>
-      html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
+      html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: InterVariable, Inter, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
       juo-editor { display: block; height: 100vh; }
     </style>
   </head>

package/templates/dev/vite/mock-login.ts.liquid ADDED Viewed

@@ -0,0 +1,83 @@
+// Dev-only mock login service. Ported from the reference theme's
+// `lib/loginService.ts`. Core's `createLoginService` requires real deps
+// (API adapter, router, shop, error formatter), so the dev preview hand-writes
+// a mock that implements the `LoginServiceContext` shape directly.
+import { ContextType, LoginServiceContext, signal } from "@juo/blocks";
+export function createMockLoginService(): ContextType<typeof LoginServiceContext> {
+  const loggedIn = signal<boolean>(false);
+  const expectedCode = signal<string | null>(null);
+  const service: ContextType<typeof LoginServiceContext> = {
+    passwordless: {
+      email: {
+        async start(_) {
+          expectedCode.value = String(
+            Math.floor(100000 + Math.random() * 900000)
+          );
+          window.alert(`Use code ${expectedCode.value} to log in`);
+          return { _tag: "Success", data: undefined };
+        },
+        async verify(_, code) {
+          if (expectedCode.value != null && code === expectedCode.value) {
+            loggedIn.value = true;
+            return { _tag: "Success", data: undefined };
+          }
+          return {
+            _tag: "Failure",
+            error: {
+              title: "Invalid code",
+              message: "The provided code is invalid",
+            },
+          };
+        },
+      },
+    },
+    social: {
+      async start() {
+        return {
+          _tag: "Failure",
+          error: {
+            title: "Not implemented",
+            message: "This functionality is not available in test mode",
+          },
+        };
+      },
+      async verify() {
+        return {
+          _tag: "Failure",
+          error: {
+            title: "Not implemented",
+            message: "This functionality is not available in test mode",
+          },
+        };
+      },
+    },
+    async handleQueryParams() {
+      return { _tag: "Success", data: undefined };
+    },
+    async logout() {
+      loggedIn.value = false;
+      return { _tag: "Success", data: undefined };
+    },
+    isAuthenticated: loggedIn,
+    async getToken() {
+      return null;
+    },
+    async getAuthHeaders(): Promise<Record<string, string>> {
+      return {};
+    },
+  };
+  return service;
+}

package/templates/dev/vite/mock-services.ts.liquid ADDED Viewed

@@ -0,0 +1,140 @@
+// Dev-only mock services. Provides every blocks service backed by its mock
+// adapter so any block you author (or scaffold) has its service dependencies
+// available in the dev preview. Lives in `vite/` and never enters the built
+// blocks bundle (whose entry is `src/blocks/register.ts`), so there is no
+// production cost — the Juo runtime provides the real services in production.
+import {
+  provideContext,
+  effect,
+  untracked,
+  type ThemeState,
+  // product
+  ProductServiceContext,
+  createProductService,
+  createMockProductAdapter,
+  // customer
+  CustomerServiceContext,
+  createCustomerService,
+  createMockCustomerAdapter,
+  // orders
+  OrdersServiceContext,
+  createOrdersService,
+  createMockOrdersAdapter,
+  // subscription
+  SubscriptionServiceContext,
+  createSubscriptionService,
+  createMockSubscriptionAdapter,
+  // schedules
+  SchedulesServiceContext,
+  createSchedulesService,
+  createMockSchedulesAdapter,
+  // router
+  RouterServiceContext,
+  createMockRouterService,
+  // settings
+  SettingsServiceContext,
+  createSettingsService,
+  // shop
+  ShopServiceContext,
+  createShopService,
+  // login
+  LoginServiceContext,
+  // workflow
+  WorkflowServiceContext,
+  createWorkflowService,
+  createMockWorkflowApiAdapter,
+} from "@juo/blocks";
+import { createMockLoginService } from "./mock-login";
+import { createWorkflowOverlay } from "./workflowOverlay";
+/**
+ * Provide every available blocks service (backed by mock adapters) onto the
+ * dev preview's context root, and mount the workflow overlay.
+ */
+export function provideMockServices(root: HTMLElement, themeState: ThemeState) {
+  provideContext(
+    root,
+    ProductServiceContext,
+    createProductService(createMockProductAdapter())
+  );
+  const customerService = createCustomerService({
+    adapter: createMockCustomerAdapter(),
+    getAccountOrdersUrl: () => "https://example.com/account",
+  });
+  // Eagerly populate `current` so name-aware blocks (e.g. Header) render in the
+  // dev preview. `createCustomerService` leaves `current` as `null` until
+  // `getCurrent()` is called — in the portal that population is done by
+  // `useCustomerService`'s watchEffect; here nothing else triggers it.
+  void customerService.getCurrent();
+  provideContext(root, CustomerServiceContext, customerService);
+  provideContext(
+    root,
+    OrdersServiceContext,
+    createOrdersService(createMockOrdersAdapter())
+  );
+  const subscriptionService = createSubscriptionService(
+    createMockSubscriptionAdapter()
+  );
+  provideContext(root, SubscriptionServiceContext, subscriptionService);
+  const schedulesService = createSchedulesService(createMockSchedulesAdapter(), {
+    // Share the billing-attempt signal so schedule-aware blocks stay in sync.
+    hasPendingBilling: subscriptionService.hasPendingBilling,
+  });
+  provideContext(root, SchedulesServiceContext, schedulesService);
+  provideContext(root, RouterServiceContext, createMockRouterService());
+  provideContext(root, SettingsServiceContext, createSettingsService());
+  provideContext(
+    root,
+    ShopServiceContext,
+    createShopService({ getContactEmail: () => "support@example.com" })
+  );
+  provideContext(root, LoginServiceContext, createMockLoginService());
+  // Note: OverlayServiceContext is provided by the theme shell's setup
+  // functions — editor mode must pass the same overlay service instance into
+  // `setupEditorMode`, so its lifecycle is owned there, not here.
+  const workflowService = createWorkflowService({
+    api: createMockWorkflowApiAdapter(),
+    themeState,
+  });
+  provideContext(root, WorkflowServiceContext, workflowService);
+  // Mount the workflow overlay UI so flows render in the dev preview.
+  createWorkflowOverlay(root, workflowService, themeState);
+  // Seed a focused subscription so subscription-scoped blocks render. There is
+  // no subscription id in the dev-preview URL, so use the mock adapter's default
+  // (mirrors the editor seed in customer-portal's useSubscriptionService).
+  void (async () => {
+    const idResult = await subscriptionService.getDefaultSubscriptionId();
+    const id = idResult._tag === "Success" ? idResult.data : null;
+    if (!id) return;
+    const subResult = await subscriptionService.getById(id);
+    if (subResult._tag === "Success") {
+      subscriptionService.current.value = subResult.data;
+    }
+  })();
+  // Cascade: load the upcoming order whenever the focused subscription changes
+  // (mirrors customer-portal's useSchedulesService watcher).
+  effect(() => {
+    const id = subscriptionService.current.value?.id ?? null;
+    untracked(() => {
+      if (!id) {
+        schedulesService.current.value = null;
+        schedulesService.currentLoading.value = false;
+        return;
+      }
+      void schedulesService.reloadCurrent(id);
+    });
+  });
+}

package/templates/dev/vite/theme-shell.ts.liquid CHANGED Viewed

@@ -19,15 +19,38 @@ import {
   ThemeStateContext,
   TranslationContext,
   createTranslationService,
+  createOverlayService,
+  OverlayServiceContext,
   untracked,
 } from "@juo/blocks";
 import { registerBlocks as registerProjectBlocks } from "../src/main";
+import { provideMockServices } from "./mock-services";
 // Native blocks shipped by @juo/blocks-extensions, loaded from CDN. Its bare
 // "@juo/blocks" import is bridged to the local instance via the index.html
 // import map (see vite/blocks-shim.ts).
 // @ts-expect-error Remote, untyped module
 import { blocks as nativeBlocks } from "https://cdn.juo.io/web/blocks/juo/{{ extensionsVersion }}/extensions.js";
+function hexToOklch(hex: string): { l: number; h: number; c: number } {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const linearize = (v: number) =>
+    v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  const lr = linearize(r);
+  const lg = linearize(g);
+  const lb = linearize(b);
+  const lm = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const mm = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const sm = Math.cbrt(0.0883024619 * lr + 0.2220049178 * lg + 0.6896926208 * lb);
+  const L = 0.2104542553 * lm + 0.793617785 * mm - 0.0040720468 * sm;
+  const a = 1.9779984951 * lm - 2.428592205 * mm + 0.4505937099 * sm;
+  const bOk = 0.0259040371 * lm + 0.7827717662 * mm - 0.808675766 * sm;
+  const c = Math.sqrt(a * a + bOk * bOk);
+  const h = Math.atan2(bOk, a) * (180 / Math.PI);
+  return { l: L * 100, h: h < 0 ? h + 360 : h, c };
+}
 const homePageBlock = defineBlock("HomePage", {
   displayName: "Home page",
   group: "page",
@@ -51,7 +74,15 @@ const homePageBlock = defineBlock("HomePage", {
   initialValue: () => ({
     props: {},
     slots: {
-      main: [createBlockInstance("Starter Block")],
+      main: [
+        createBlockInstance("Banner"),
+        createBlockInstance("Header"),
+        createBlockInstance("RenewalSummary"),
+        createBlockInstance("UpcomingOrderItems"),
+        createBlockInstance("Starter Block"),
+        createBlockInstance("CustomerSubscriptions"),
+        createBlockInstance("OrderList"),
+      ],
     },
   }),
   renderer() {
@@ -89,7 +120,9 @@ async function setupEditorMode(root: HTMLElement) {
     routerService,
   });
   provideContext(root, ThemeStateContext, themeState);
-  await editorModule.setupEditorMode({ routerService, themeState });
+  const overlayService = createOverlayService(themeState);
+  provideContext(root, OverlayServiceContext, overlayService);
+  await editorModule.setupEditorMode({ routerService, themeState, overlayService });
 }
 function setupViewMode(root: HTMLElement) {
@@ -99,6 +132,7 @@ function setupViewMode(root: HTMLElement) {
     }),
   });
   provideContext(root, ThemeStateContext, themeState);
+  provideContext(root, OverlayServiceContext, createOverlayService(themeState));
 }
 async function initializeTheme() {
@@ -114,6 +148,89 @@ async function initializeTheme() {
   const themeState = injectContext(root, ThemeStateContext);
+  effect(() => {
+    const styles = themeState.globalStyles.value;
+    const el = root;
+    el.setAttribute("data-volume", styles.volume);
+    el.setAttribute("data-style", styles.style);
+    el.setAttribute("data-corners", styles.corners);
+    el.setAttribute("data-button-corners", styles.buttonCorners);
+    el.setAttribute("data-thumbnail-corners", styles.thumbnailCorners);
+    const bg = styles.colors.background;
+    if (bg) {
+      el.style.setProperty("background-color", bg);
+    } else {
+      el.style.removeProperty("background-color");
+    }
+    const colorizableKeys = ["tint", "accent", "secondary", "callout"] as const;
+    if (styles.theme === "custom") {
+      for (const key of colorizableKeys) {
+        el.setAttribute(`data-${key}`, "custom");
+        const hex = styles.colors[key];
+        if (hex) {
+          const { l, h, c } = hexToOklch(hex);
+          el.style.setProperty(`--${key}-l`, `${l}%`);
+          el.style.setProperty(`--${key}-hue`, String(h));
+          el.style.setProperty(`--${key}-chroma`, String(c / 0.045));
+        }
+      }
+    } else {
+      el.setAttribute("data-tint", styles.themeType ?? "neutral");
+      el.removeAttribute("data-callout");
+      const customColorKeys = ["accent", "secondary"] as const;
+      for (const key of customColorKeys) {
+        const hex = styles.colors[key];
+        if (hex) {
+          el.setAttribute(`data-${key}`, "custom");
+          const { l, h, c } = hexToOklch(hex);
+          el.style.setProperty(`--${key}-l`, `${l}%`);
+          el.style.setProperty(`--${key}-hue`, String(h));
+          el.style.setProperty(`--${key}-chroma`, String(c / 0.045));
+        } else {
+          el.removeAttribute(`data-${key}`);
+          el.style.removeProperty(`--${key}-l`);
+          el.style.removeProperty(`--${key}-hue`);
+          el.style.removeProperty(`--${key}-chroma`);
+        }
+      }
+      el.style.removeProperty("--tint-l");
+      el.style.removeProperty("--tint-hue");
+      el.style.removeProperty("--tint-chroma");
+      el.style.removeProperty("--callout-l");
+      el.style.removeProperty("--callout-hue");
+      el.style.removeProperty("--callout-chroma");
+    }
+    const semanticColorMap = [
+      { themeKey: "success", cssPrefix: "success" },
+      { themeKey: "error", cssPrefix: "error" },
+      { themeKey: "information", cssPrefix: "info" },
+      { themeKey: "warning", cssPrefix: "warning" },
+    ] as const;
+    for (const { themeKey, cssPrefix } of semanticColorMap) {
+      const hex = styles.colors[themeKey];
+      if (hex) {
+        el.setAttribute(`data-${cssPrefix}`, "custom");
+        const { l, h, c } = hexToOklch(hex);
+        el.style.setProperty(`--${cssPrefix}-l`, `${l}%`);
+        el.style.setProperty(`--${cssPrefix}-hue`, String(h));
+        el.style.setProperty(`--${cssPrefix}-chroma`, String(c / 0.045));
+      } else {
+        el.removeAttribute(`data-${cssPrefix}`);
+        el.style.removeProperty(`--${cssPrefix}-l`);
+        el.style.removeProperty(`--${cssPrefix}-hue`);
+        el.style.removeProperty(`--${cssPrefix}-chroma`);
+      }
+    }
+  });
   await themeState.locales.setLocale("en");
   provideContext(
     root,
@@ -125,6 +242,10 @@ async function initializeTheme() {
     }),
   );
+  // Provide every blocks service (backed by mock adapters) so authored blocks
+  // have their service dependencies available in the dev preview.
+  provideMockServices(root, themeState);
   void themeState.resolve("page", "/");
   effect(() => {