@stackonward/cli 0.0.1 → 1.0.1

package/dist/resources/components/nuxt/site-source/app/components/ui/BaseModal.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean;
+    open?: boolean;
+    title?: string;
+    description?: string;
+    closeLabel?: string;
+    ui?: Record<string, unknown>;
+  }>(),
+  {
+    modelValue: undefined,
+    open: undefined,
+    closeLabel: "Close modal",
+    ui: () => ({}),
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  "update:open": [value: boolean];
+  close: [];
+}>();
+
+const internalOpen = ref(false);
+
+const isOpen = computed({
+  get: () => props.open ?? props.modelValue ?? internalOpen.value,
+  set: (value: boolean) => {
+    internalOpen.value = value;
+    emit("update:open", value);
+    emit("update:modelValue", value);
+    if (!value) {
+      emit("close");
+    }
+  },
+});
+
+function close() {
+  isOpen.value = false;
+}
+</script>
+
+<template>
+  <UModal v-bind="$attrs" v-model:open="isOpen" :ui="ui">
+    <slot name="trigger" />
+
+    <template #content>
+      <section class="base-modal-panel" role="dialog" aria-modal="true">
+        <header v-if="title || description || $slots.header" class="base-modal-panel__header">
+          <slot name="header" :close="close">
+            <div class="base-modal-panel__copy">
+              <h2 v-if="title">{{ title }}</h2>
+              <p v-if="description">{{ description }}</p>
+            </div>
+          </slot>
+          <UButton
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            square
+            icon="i-lucide-x"
+            :aria-label="closeLabel"
+            @click="close"
+          />
+        </header>
+        <div class="base-modal-panel__body">
+          <slot name="content" :close="close">
+            <slot :close="close" />
+          </slot>
+        </div>
+        <footer v-if="$slots.footer" class="base-modal-panel__footer">
+          <slot name="footer" :close="close" />
+        </footer>
+      </section>
+    </template>
+  </UModal>
+</template>
+
+<style scoped>
+.base-modal-panel {
+  display: grid;
+  max-height: min(720px, calc(100dvh - 48px));
+  overflow: hidden;
+  color: var(--site-color-text);
+}
+
+.base-modal-panel__header,
+.base-modal-panel__footer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px;
+}
+
+.base-modal-panel__header {
+  border-bottom: 1px solid var(--site-color-border);
+}
+
+.base-modal-panel__footer {
+  border-top: 1px solid var(--site-color-border);
+}
+
+.base-modal-panel__copy {
+  display: grid;
+  min-width: 0;
+  gap: 4px;
+}
+
+.base-modal-panel__copy h2,
+.base-modal-panel__copy p {
+  margin: 0;
+}
+
+.base-modal-panel__copy h2 {
+  font-size: 18px;
+  line-height: 1.35;
+}
+
+.base-modal-panel__copy p {
+  color: var(--site-color-muted);
+  line-height: 1.6;
+}
+
+.base-modal-panel__body {
+  min-width: 0;
+  overflow: auto;
+  padding: 20px;
+}
+</style>

package/dist/resources/components/nuxt/site-source/app/components/ui/BasePopover.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+interface PopoverAction {
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+  value?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean;
+    open?: boolean;
+    title?: string;
+    description?: string;
+    actions?: PopoverAction[];
+    ui?: Record<string, unknown>;
+  }>(),
+  {
+    modelValue: undefined,
+    open: undefined,
+    actions: () => [],
+    ui: () => ({}),
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  "update:open": [value: boolean];
+  select: [action: PopoverAction, index: number];
+}>();
+
+const internalOpen = ref(false);
+
+const isOpen = computed({
+  get: () => props.open ?? props.modelValue ?? internalOpen.value,
+  set: (value: boolean) => {
+    internalOpen.value = value;
+    emit("update:open", value);
+    emit("update:modelValue", value);
+  },
+});
+
+function selectAction(action: PopoverAction, index: number) {
+  if (action.disabled) {
+    return;
+  }
+  emit("select", action, index);
+  isOpen.value = false;
+}
+</script>
+
+<template>
+  <UPopover v-bind="$attrs" v-model:open="isOpen" :ui="ui">
+    <slot name="reference">
+      <slot name="trigger" />
+    </slot>
+
+    <template #content>
+      <div class="base-popover-panel">
+        <header v-if="title || description" class="base-popover-panel__header">
+          <strong v-if="title">{{ title }}</strong>
+          <p v-if="description">{{ description }}</p>
+        </header>
+        <div v-if="$slots.default" class="base-popover-panel__body">
+          <slot />
+        </div>
+        <div v-if="actions.length" class="base-popover-panel__actions">
+          <button
+            v-for="(action, index) in actions"
+            :key="action.value || action.label"
+            type="button"
+            class="base-popover-panel__action"
+            :disabled="action.disabled"
+            @click="selectAction(action, index)"
+          >
+            <UIcon v-if="action.icon" :name="action.icon" class="base-popover-panel__icon" />
+            <span>{{ action.label }}</span>
+          </button>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<style scoped>
+.base-popover-panel {
+  display: grid;
+  min-width: 220px;
+  max-width: min(320px, calc(100vw - 32px));
+  overflow: hidden;
+  border: 1px solid var(--site-color-border);
+  border-radius: var(--site-radius-lg);
+  background: var(--site-color-surface);
+  box-shadow: var(--site-shadow-soft);
+}
+
+.base-popover-panel__header,
+.base-popover-panel__body {
+  padding: 12px;
+}
+
+.base-popover-panel__header {
+  display: grid;
+  gap: 4px;
+  border-bottom: 1px solid var(--site-color-border);
+}
+
+.base-popover-panel__header p {
+  margin: 0;
+  color: var(--site-color-muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.base-popover-panel__actions {
+  display: grid;
+  gap: 2px;
+  padding: 6px;
+}
+
+.base-popover-panel__action {
+  display: flex;
+  min-height: 38px;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  border-radius: var(--site-radius-md);
+  background: transparent;
+  color: var(--site-color-text);
+  cursor: pointer;
+  padding: 0 10px;
+  text-align: left;
+}
+
+.base-popover-panel__action:hover {
+  background: var(--site-color-surface-muted);
+}
+
+.base-popover-panel__action:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.base-popover-panel__icon {
+  width: 16px;
+  height: 16px;
+  color: var(--site-color-muted);
+}
+</style>

package/dist/resources/components/nuxt/site-source/app/components/ui/BaseText.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+type TextTone = "default" | "muted" | "dimmed" | "primary" | "success" | "warning" | "danger";
+type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
+type TextWeight = "regular" | "medium" | "semibold" | "bold";
+
+const props = withDefaults(
+  defineProps<{
+    as?: string;
+    tone?: TextTone;
+    size?: TextSize;
+    weight?: TextWeight;
+    truncate?: boolean;
+    lineClamp?: number;
+  }>(),
+  {
+    as: "span",
+    tone: "default",
+    size: "md",
+    weight: "regular",
+    truncate: false,
+    lineClamp: undefined,
+  },
+);
+
+const classes = computed(() => [
+  "base-text",
+  `base-text--tone-${props.tone}`,
+  `base-text--size-${props.size}`,
+  `base-text--weight-${props.weight}`,
+  {
+    "base-text--truncate": props.truncate,
+    "base-text--clamp": props.lineClamp,
+  },
+]);
+
+const style = computed(() =>
+  props.lineClamp
+    ? {
+        "--base-text-line-clamp": String(props.lineClamp),
+      }
+    : undefined,
+);
+</script>
+
+<template>
+  <component :is="as" :class="classes" :style="style">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.base-text {
+  min-width: 0;
+}
+
+.base-text--tone-default {
+  color: var(--site-color-text);
+}
+
+.base-text--tone-muted {
+  color: var(--site-color-muted);
+}
+
+.base-text--tone-dimmed {
+  color: #94a3b8;
+}
+
+.base-text--tone-primary {
+  color: var(--site-color-primary);
+}
+
+.base-text--tone-success {
+  color: #16a34a;
+}
+
+.base-text--tone-warning {
+  color: var(--site-color-warning);
+}
+
+.base-text--tone-danger {
+  color: var(--site-color-danger);
+}
+
+.base-text--size-xs {
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.base-text--size-sm {
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.base-text--size-md {
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.base-text--size-lg {
+  font-size: 18px;
+  line-height: 1.55;
+}
+
+.base-text--size-xl {
+  font-size: 22px;
+  line-height: 1.35;
+}
+
+.base-text--weight-regular {
+  font-weight: 400;
+}
+
+.base-text--weight-medium {
+  font-weight: 500;
+}
+
+.base-text--weight-semibold {
+  font-weight: 650;
+}
+
+.base-text--weight-bold {
+  font-weight: 750;
+}
+
+.base-text--truncate {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.base-text--clamp {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--base-text-line-clamp);
+}
+</style>

package/dist/resources/components/nuxt/site-source/app/components/ui/CheckoutStatus.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { CheckoutStatusValue } from "../../composables/useCheckout";
+
+const props = withDefaults(
+  defineProps<{
+    status?: CheckoutStatusValue;
+    autoRead?: boolean;
+    showIdle?: boolean;
+  }>(),
+  {
+    status: undefined,
+    autoRead: false,
+    showIdle: false,
+  },
+);
+
+const checkout = useCheckout();
+
+const resolvedStatus = computed<CheckoutStatusValue>(() => {
+  if (props.status) {
+    return props.status;
+  }
+  return props.autoRead ? checkout.parseCheckoutStatus() : "idle";
+});
+
+const visible = computed(() => props.showIdle || resolvedStatus.value !== "idle");
+const statusMeta = computed(() => {
+  const map: Record<
+    CheckoutStatusValue,
+    { icon: string; tone: "neutral" | "info" | "success" | "warning" | "danger"; title: string; description: string }
+  > = {
+    idle: {
+      icon: "i-lucide-circle",
+      tone: "neutral",
+      title: "Checkout ready",
+      description: "Checkout has not started.",
+    },
+    pending: {
+      icon: "i-lucide-loader-circle",
+      tone: "info",
+      title: "Checkout pending",
+      description: "The payment provider is still processing this checkout attempt.",
+    },
+    succeeded: {
+      icon: "i-lucide-circle-check",
+      tone: "success",
+      title: "Checkout complete",
+      description: "The checkout attempt completed successfully.",
+    },
+    cancelled: {
+      icon: "i-lucide-circle-x",
+      tone: "warning",
+      title: "Checkout cancelled",
+      description: "The checkout attempt was cancelled before completion.",
+    },
+    failed: {
+      icon: "i-lucide-triangle-alert",
+      tone: "danger",
+      title: "Checkout failed",
+      description: "The checkout attempt could not be completed.",
+    },
+  };
+
+  return map[resolvedStatus.value];
+});
+</script>
+
+<template>
+  <section v-if="visible" class="checkout-status" :data-tone="statusMeta.tone" role="status">
+    <UIcon :name="statusMeta.icon" class="checkout-status__icon" />
+    <div>
+      <BaseText as="h3" size="lg" weight="bold">{{ statusMeta.title }}</BaseText>
+      <BaseText as="p" tone="muted">{{ statusMeta.description }}</BaseText>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.checkout-status {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+  border: 1px solid var(--site-color-border);
+  border-radius: 12px;
+  background: var(--site-color-surface);
+  padding: 16px;
+}
+
+.checkout-status__icon {
+  width: 28px;
+  height: 28px;
+  margin-top: 2px;
+  color: var(--site-color-muted);
+}
+
+.checkout-status[data-tone="info"] .checkout-status__icon {
+  color: var(--ui-info);
+}
+
+.checkout-status[data-tone="success"] .checkout-status__icon {
+  color: var(--ui-success);
+}
+
+.checkout-status[data-tone="warning"] .checkout-status__icon {
+  color: var(--ui-warning);
+}
+
+.checkout-status[data-tone="danger"] .checkout-status__icon {
+  color: var(--ui-error);
+}
+</style>

package/dist/resources/components/nuxt/site-source/app/components/ui/CheckoutSummary.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import type { CheckoutLineItem, CheckoutUrlInput } from "../../composables/useCheckout";
+
+const props = withDefaults(
+  defineProps<{
+    lineItems: CheckoutLineItem[];
+    attemptId?: string;
+    checkoutUrl?: string;
+    locale?: string;
+    successUrl?: string;
+    cancelUrl?: string;
+    customer?: CheckoutUrlInput["customer"];
+    metadata?: CheckoutUrlInput["metadata"];
+    actionLabel?: string;
+    disabled?: boolean;
+    loading?: boolean;
+  }>(),
+  {
+    attemptId: "",
+    checkoutUrl: "",
+    locale: "en",
+    successUrl: "",
+    cancelUrl: "",
+    customer: undefined,
+    metadata: undefined,
+    actionLabel: "Continue to checkout",
+    disabled: false,
+    loading: false,
+  },
+);
+
+const emit = defineEmits<{
+  checkout: [url: string];
+  error: [error: Error];
+}>();
+
+const checkout = useCheckout();
+const analytics = useAnalytics();
+
+const currency = computed(() => props.lineItems[0]?.currency || "USD");
+const totalAmountMinor = computed(() => checkout.getTotalAmountMinor(props.lineItems));
+const formattedTotal = computed(() =>
+  checkout.formatMoney(totalAmountMinor.value, currency.value, props.locale),
+);
+
+function formatLineItem(item: CheckoutLineItem): string {
+  return checkout.formatMoney(item.amountMinor * item.quantity, item.currency, props.locale);
+}
+
+function openCheckout(): void {
+  if (!props.attemptId) {
+    const error = new Error("Checkout attemptId is required");
+    emit("error", error);
+    return;
+  }
+
+  try {
+    const url = checkout.buildCheckoutUrl({
+      checkoutUrl: props.checkoutUrl || undefined,
+      attemptId: props.attemptId,
+      lineItems: props.lineItems,
+      locale: props.locale,
+      successUrl: props.successUrl || undefined,
+      cancelUrl: props.cancelUrl || undefined,
+      customer: props.customer,
+      metadata: props.metadata,
+    });
+    analytics.track("checkout_started", {
+      attempt_id: props.attemptId,
+      currency: currency.value,
+      value_minor: totalAmountMinor.value,
+      item_count: props.lineItems.length,
+    });
+    emit("checkout", url);
+    if (import.meta.client) {
+      window.open(url, "_blank", "noopener,noreferrer");
+    }
+  } catch (error) {
+    emit("error", error instanceof Error ? error : new Error("Checkout URL generation failed"));
+  }
+}
+</script>
+
+<template>
+  <section class="checkout-summary" aria-label="Checkout summary">
+    <div class="checkout-summary__header">
+      <BaseText as="h3" size="lg" weight="bold">Checkout summary</BaseText>
+      <BaseText tone="muted" size="sm"
+        >{{ lineItems.length }} item{{ lineItems.length === 1 ? "" : "s" }}</BaseText
+      >
+    </div>
+
+    <ul class="checkout-summary__items">
+      <li v-for="item in lineItems" :key="item.id" class="checkout-summary__item">
+        <span>
+          <BaseText weight="semibold">{{ item.label }}</BaseText>
+          <BaseText v-if="item.description" as="span" tone="muted" size="sm">
+            {{ item.description }}
+          </BaseText>
+        </span>
+        <span class="checkout-summary__item-meta">
+          <BaseText as="span" tone="muted" size="sm">x{{ item.quantity }}</BaseText>
+          <BaseText as="strong" weight="bold">{{ formatLineItem(item) }}</BaseText>
+        </span>
+      </li>
+    </ul>
+
+    <div class="checkout-summary__total">
+      <BaseText as="span" tone="muted">Total</BaseText>
+      <BaseText as="strong" size="xl" weight="bold">{{ formattedTotal }}</BaseText>
+    </div>
+
+    <BaseButton
+      :label="actionLabel"
+      trailing-icon="i-lucide-arrow-right"
+      :loading="loading"
+      :disabled="disabled || !attemptId"
+      @click="openCheckout"
+    />
+  </section>
+</template>
+
+<style scoped>
+.checkout-summary {
+  display: grid;
+  gap: 18px;
+  border: 1px solid var(--site-color-border);
+  border-radius: 12px;
+  background: var(--site-color-surface);
+  padding: 20px;
+}
+
+.checkout-summary__header,
+.checkout-summary__item,
+.checkout-summary__total {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.checkout-summary__items {
+  display: grid;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.checkout-summary__item {
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--site-color-border);
+}
+
+.checkout-summary__item-meta {
+  display: grid;
+  min-width: max-content;
+  justify-items: end;
+}
+
+.checkout-summary__total {
+  padding-top: 2px;
+}
+
+@media (width <= 520px) {
+  .checkout-summary__header,
+  .checkout-summary__item,
+  .checkout-summary__total {
+    align-items: start;
+  }
+}
+</style>