@stackonward/cli 0.0.1 → 1.0.0

package/dist/resources/components/react/ui/Button.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
+  size?: "sm" | "md" | "lg";
+  loading?: boolean;
+  children: React.ReactNode;
+}
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  disabled,
+  children,
+  className = "",
+  ...props
+}: ButtonProps) {
+  const baseStyles =
+    "inline-flex items-center justify-center gap-2 font-medium rounded-lg transition-all duration-200 cursor-pointer border border-transparent focus:outline-none focus:ring-2 focus:ring-offset-2";
+
+  const sizeStyles = {
+    sm: "px-3 py-1.5 text-sm",
+    md: "px-4 py-2 text-base",
+    lg: "px-6 py-3 text-lg",
+  };
+
+  const variantStyles = {
+    primary: "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500 disabled:bg-blue-300",
+    secondary: "bg-gray-500 text-white hover:bg-gray-600 focus:ring-gray-500 disabled:bg-gray-300",
+    outline: "bg-transparent border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500",
+    ghost: "bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500",
+    danger: "bg-red-500 text-white hover:bg-red-600 focus:ring-red-500 disabled:bg-red-300",
+  };
+
+  const isDisabled = disabled || loading;
+
+  return (
+    <button
+      className={`${baseStyles} ${sizeStyles[size]} ${variantStyles[variant]} ${
+        isDisabled ? "opacity-50 cursor-not-allowed" : ""
+      } ${className}`}
+      disabled={isDisabled}
+      {...props}
+    >
+      {loading && (
+        <svg
+          className="animate-spin h-4 w-4"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+      )}
+      {children}
+    </button>
+  );
+}
+
+export default Button;

package/dist/resources/components/react/ui/Input.tsx

@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, hint, size = "md", className = "", disabled, ...props }, ref) => {
+    const sizeStyles = {
+      sm: "px-2.5 py-1.5 text-sm",
+      md: "px-3 py-2 text-base",
+      lg: "px-4 py-3 text-lg",
+    };
+
+    const inputStyles = `
+      w-full rounded-lg border transition-all duration-200
+      ${sizeStyles[size]}
+      ${
+        error
+          ? "border-red-500 focus:border-red-500 focus:ring-red-500/10"
+          : "border-gray-300 focus:border-blue-500 focus:ring-blue-500/10"
+      }
+      ${disabled ? "bg-gray-100 opacity-70 cursor-not-allowed" : "bg-white"}
+      focus:outline-none focus:ring-2
+      placeholder:text-gray-400
+    `;
+
+    return (
+      <div className="flex flex-col gap-1">
+        {label && <label className="text-sm font-medium text-gray-700">{label}</label>}
+        <input ref={ref} className={`${inputStyles} ${className}`} disabled={disabled} {...props} />
+        {error && <p className="text-xs text-red-500">{error}</p>}
+        {!error && hint && <p className="text-xs text-gray-500">{hint}</p>}
+      </div>
+    );
+  },
+);
+
+Input.displayName = "Input";
+
+export default Input;

package/dist/resources/components/registry.json

@@ -0,0 +1,355 @@
+{
+  "button": {
+    "name": "Button",
+    "description": "Versatile button component with variants and sizes",
+    "files": ["ui/Button.vue"],
+    "dependencies": [],
+    "devDependencies": [],
+    "registryDependencies": [],
+    "framework": "vue",
+    "category": "ui"
+  },
+  "input": {
+    "name": "Input",
+    "description": "Text input component with validation support",
+    "files": ["ui/Input.vue"],
+    "dependencies": [],
+    "devDependencies": [],
+    "registryDependencies": [],
+    "framework": "vue",
+    "category": "ui"
+  },
+  "modal": {
+    "name": "Modal",
+    "description": "Modal dialog component with animations",
+    "files": ["ui/Modal.vue"],
+    "dependencies": [],
+    "devDependencies": [],
+    "registryDependencies": ["button"],
+    "framework": "vue",
+    "category": "ui"
+  },
+  "card": {
+    "name": "Card",
+    "description": "Card container component",
+    "files": ["ui/Card.vue"],
+    "dependencies": [],
+    "devDependencies": [],
+    "registryDependencies": [],
+    "framework": "vue",
+    "category": "ui"
+  },
+  "app-image": {
+    "name": "AppImage",
+    "description": "Responsive image component with loading, placeholder, source-set, and error states",
+    "files": ["ui/AppImage.vue"],
+    "dependencies": [],
+    "devDependencies": [],
+    "registryDependencies": [],
+    "framework": "vue",
+    "category": "ui"
+  },
+  "tooltip": {
+    "name": "Tooltip",
+    "description": "Accessible hover and focus tooltip primitive",
+    "files": ["ui/Tooltip.vue"],
+    "dependencies": [],
+    "devDependencies": [],
+    "registryDependencies": [],
+    "framework": "vue",
+    "category": "ui"
+  },
+  "bottom-sheet": {
+    "name": "BottomSheet",
+    "description": "Mobile-friendly bottom sheet dialog with scroll lock and safe-area support",
+    "files": ["ui/BottomSheet.vue"],
+    "dependencies": [],
+    "devDependencies": [],
+    "registryDependencies": [],
+    "framework": "vue",
+    "category": "ui"
+  },
+  "scroll-area": {
+    "name": "ScrollArea",
+    "description": "Controlled scroll container with exposed scroll helpers and reach-end events",
+    "files": ["ui/ScrollArea.vue"],
+    "dependencies": [],
+    "devDependencies": [],
+    "registryDependencies": [],
+    "framework": "vue",
+    "category": "ui"
+  },
+  "file-upload": {
+    "name": "FileUpload",
+    "description": "Drag-and-drop file upload primitive wired to @stackonward/file validation",
+    "files": ["media/FileUpload.vue"],
+    "dependencies": ["@stackonward/file"],
+    "devDependencies": [],
+    "registryDependencies": [],
+    "framework": "vue",
+    "category": "media"
+  },
+  "video-player": {
+    "name": "VideoPlayer",
+    "description": "Video player primitive wired to @stackonward/composables playback state",
+    "files": ["media/VideoPlayer.vue"],
+    "dependencies": ["@stackonward/composables"],
+    "devDependencies": [],
+    "registryDependencies": [],
+    "framework": "vue",
+    "category": "media"
+  },
+  "toast": {
+    "name": "Toast",
+    "description": "Toast notification component",
+    "files": ["feedback/Toast.vue", "feedback/useToast.ts"],
+    "dependencies": [],
+    "devDependencies": [],
+    "registryDependencies": [],
+    "framework": "vue",
+    "category": "feedback"
+  },
+  "react-button": {
+    "name": "Button",
+    "description": "Versatile button component with variants and sizes",
+    "files": ["ui/Button.tsx"],
+    "dependencies": [],
+    "devDependencies": [],
+    "registryDependencies": [],
+    "framework": "react",
+    "category": "ui"
+  },
+  "react-input": {
+    "name": "Input",
+    "description": "Text input component with validation support",
+    "files": ["ui/Input.tsx"],
+    "dependencies": [],
+    "devDependencies": [],
+    "registryDependencies": [],
+    "framework": "react",
+    "category": "ui"
+  },
+  "nuxt-site-source": {
+    "name": "Nuxt Site Source",
+    "description": "Editable Nuxt product-site source: app shell, marketing shell, content shell, UI primitives, composables, plugins, theme tokens, and CSS.",
+    "files": [
+      {
+        "path": "site-source/app/app.vue",
+        "target": "app/app.vue"
+      },
+      {
+        "path": "site-source/app/assets/css/site-shell.css",
+        "target": "app/assets/css/site-shell.css"
+      },
+      {
+        "path": "site-source/app/assets/icons/brand/.gitkeep",
+        "target": "app/assets/icons/brand/.gitkeep"
+      },
+      {
+        "path": "site-source/app/assets/icons/common/.gitkeep",
+        "target": "app/assets/icons/common/.gitkeep"
+      },
+      {
+        "path": "site-source/app/components/site/ApplicationHeader.vue",
+        "target": "app/components/site/ApplicationHeader.vue"
+      },
+      {
+        "path": "site-source/app/components/site/ApplicationShell.vue",
+        "target": "app/components/site/ApplicationShell.vue"
+      },
+      {
+        "path": "site-source/app/components/site/ApplicationSidebar.vue",
+        "target": "app/components/site/ApplicationSidebar.vue"
+      },
+      {
+        "path": "site-source/app/components/site/BackToTop.vue",
+        "target": "app/components/site/BackToTop.vue"
+      },
+      {
+        "path": "site-source/app/components/site/ContentArticlePage.vue",
+        "target": "app/components/site/ContentArticlePage.vue"
+      },
+      {
+        "path": "site-source/app/components/site/ContentListPage.vue",
+        "target": "app/components/site/ContentListPage.vue"
+      },
+      {
+        "path": "site-source/app/components/site/CookieConsent.vue",
+        "target": "app/components/site/CookieConsent.vue"
+      },
+      {
+        "path": "site-source/app/components/site/MarketingFooter.vue",
+        "target": "app/components/site/MarketingFooter.vue"
+      },
+      {
+        "path": "site-source/app/components/site/MarketingHeader.vue",
+        "target": "app/components/site/MarketingHeader.vue"
+      },
+      {
+        "path": "site-source/app/components/site/MarketingShell.vue",
+        "target": "app/components/site/MarketingShell.vue"
+      },
+      {
+        "path": "site-source/app/components/site/SiteBrand.vue",
+        "target": "app/components/site/SiteBrand.vue"
+      },
+      {
+        "path": "site-source/app/components/site/StaticPage.vue",
+        "target": "app/components/site/StaticPage.vue"
+      },
+      {
+        "path": "site-source/app/components/site/ToastViewport.vue",
+        "target": "app/components/site/ToastViewport.vue"
+      },
+      {
+        "path": "site-source/app/components/ui/BaseButton.vue",
+        "target": "app/components/ui/BaseButton.vue"
+      },
+      {
+        "path": "site-source/app/components/ui/BaseGradientBorder.vue",
+        "target": "app/components/ui/BaseGradientBorder.vue"
+      },
+      {
+        "path": "site-source/app/components/ui/BaseModal.vue",
+        "target": "app/components/ui/BaseModal.vue"
+      },
+      {
+        "path": "site-source/app/components/ui/BasePopover.vue",
+        "target": "app/components/ui/BasePopover.vue"
+      },
+      {
+        "path": "site-source/app/components/ui/BaseText.vue",
+        "target": "app/components/ui/BaseText.vue"
+      },
+      {
+        "path": "site-source/app/components/ui/CheckoutStatus.vue",
+        "target": "app/components/ui/CheckoutStatus.vue"
+      },
+      {
+        "path": "site-source/app/components/ui/CheckoutSummary.vue",
+        "target": "app/components/ui/CheckoutSummary.vue"
+      },
+      {
+        "path": "site-source/app/components/ui/GoogleSignInButton.vue",
+        "target": "app/components/ui/GoogleSignInButton.vue"
+      },
+      {
+        "path": "site-source/app/components/ui/InfiniteScroll.vue",
+        "target": "app/components/ui/InfiniteScroll.vue"
+      },
+      {
+        "path": "site-source/app/components/ui/YoutubeEmbed.vue",
+        "target": "app/components/ui/YoutubeEmbed.vue"
+      },
+      {
+        "path": "site-source/app/composables/useAnalytics.ts",
+        "target": "app/composables/useAnalytics.ts"
+      },
+      {
+        "path": "site-source/app/composables/useCheckout.ts",
+        "target": "app/composables/useCheckout.ts"
+      },
+      {
+        "path": "site-source/app/composables/useConsent.ts",
+        "target": "app/composables/useConsent.ts"
+      },
+      {
+        "path": "site-source/app/composables/useGoogleIdentity.ts",
+        "target": "app/composables/useGoogleIdentity.ts"
+      },
+      {
+        "path": "site-source/app/composables/useNavigation.ts",
+        "target": "app/composables/useNavigation.ts"
+      },
+      {
+        "path": "site-source/app/composables/useSeo.ts",
+        "target": "app/composables/useSeo.ts"
+      },
+      {
+        "path": "site-source/app/composables/useSiteShell.ts",
+        "target": "app/composables/useSiteShell.ts"
+      },
+      {
+        "path": "site-source/app/composables/useToasts.ts",
+        "target": "app/composables/useToasts.ts"
+      },
+      {
+        "path": "site-source/app/layouts/app.vue",
+        "target": "app/layouts/app.vue"
+      },
+      {
+        "path": "site-source/app/layouts/default.vue",
+        "target": "app/layouts/default.vue"
+      },
+      {
+        "path": "site-source/app/plugins/analytics.client.ts",
+        "target": "app/plugins/analytics.client.ts"
+      },
+      {
+        "path": "site-source/app/plugins/google-identity.client.ts",
+        "target": "app/plugins/google-identity.client.ts"
+      },
+      {
+        "path": "site-source/app/theme/accordion.ts",
+        "target": "app/theme/accordion.ts"
+      },
+      {
+        "path": "site-source/app/theme/breadcrumb.ts",
+        "target": "app/theme/breadcrumb.ts"
+      },
+      {
+        "path": "site-source/app/theme/button.ts",
+        "target": "app/theme/button.ts"
+      },
+      {
+        "path": "site-source/app/theme/carousel.ts",
+        "target": "app/theme/carousel.ts"
+      },
+      {
+        "path": "site-source/app/theme/checkbox.ts",
+        "target": "app/theme/checkbox.ts"
+      },
+      {
+        "path": "site-source/app/theme/index.ts",
+        "target": "app/theme/index.ts"
+      },
+      {
+        "path": "site-source/app/theme/input.ts",
+        "target": "app/theme/input.ts"
+      },
+      {
+        "path": "site-source/app/theme/modal.ts",
+        "target": "app/theme/modal.ts"
+      },
+      {
+        "path": "site-source/app/theme/pagination.ts",
+        "target": "app/theme/pagination.ts"
+      },
+      {
+        "path": "site-source/app/theme/select.ts",
+        "target": "app/theme/select.ts"
+      },
+      {
+        "path": "site-source/app/theme/stepper.ts",
+        "target": "app/theme/stepper.ts"
+      },
+      {
+        "path": "site-source/app/theme/toast.ts",
+        "target": "app/theme/toast.ts"
+      },
+      {
+        "path": "site-source/app/theme/tooltip.ts",
+        "target": "app/theme/tooltip.ts"
+      },
+      {
+        "path": "site-source/app/types/site-shell.ts",
+        "target": "app/types/site-shell.ts"
+      }
+    ],
+    "dependencies": [],
+    "devDependencies": [],
+    "registryDependencies": [],
+    "framework": "nuxt",
+    "category": "site"
+  }
+}

package/dist/resources/components/vue/feedback/Toast.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  type?: "success" | "error" | "warning" | "info";
+  message: string;
+  description?: string;
+  closable?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "info",
+  closable: true,
+});
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const icons = {
+  success: `<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>`,
+  error: `<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>`,
+  warning: `<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>`,
+  info: `<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>`,
+};
+
+const icon = computed(() => icons[props.type]);
+</script>
+
+<template>
+  <div :class="['toast', `toast-${type}`]">
+    <div class="toast-icon" v-html="icon" />
+    <div class="toast-content">
+      <p class="toast-message">{{ message }}</p>
+      <p v-if="description" class="toast-description">{{ description }}</p>
+    </div>
+    <button v-if="closable" class="toast-close" @click="emit('close')">
+      <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
+        <path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  background-color: white;
+  max-width: 24rem;
+}
+
+.toast-icon {
+  flex-shrink: 0;
+}
+
+.toast-success .toast-icon {
+  color: #10b981;
+}
+
+.toast-error .toast-icon {
+  color: #ef4444;
+}
+
+.toast-warning .toast-icon {
+  color: #f59e0b;
+}
+
+.toast-info .toast-icon {
+  color: #3b82f6;
+}
+
+.toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.toast-message {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #111827;
+  margin: 0;
+}
+
+.toast-description {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin: 0.25rem 0 0;
+}
+
+.toast-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: none;
+  background: none;
+  color: #9ca3af;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  transition: all 0.2s ease;
+}
+
+.toast-close:hover {
+  background-color: #f3f4f6;
+  color: #6b7280;
+}
+</style>

package/dist/resources/components/vue/feedback/useToast.ts

@@ -0,0 +1,70 @@
+import { ref, readonly } from "vue";
+
+export interface Toast {
+  id: string;
+  type: "success" | "error" | "warning" | "info";
+  message: string;
+  description?: string;
+  duration?: number;
+}
+
+const toasts = ref<Toast[]>([]);
+
+let toastId = 0;
+
+function generateId(): string {
+  return `toast-${++toastId}`;
+}
+
+function addToast(toast: Omit<Toast, "id">): string {
+  const id = generateId();
+  const newToast: Toast = { ...toast, id };
+
+  toasts.value.push(newToast);
+
+  // Auto remove after duration
+  const duration = toast.duration ?? 5000;
+  if (duration > 0) {
+    setTimeout(() => {
+      removeToast(id);
+    }, duration);
+  }
+
+  return id;
+}
+
+function removeToast(id: string): void {
+  const index = toasts.value.findIndex((t) => t.id === id);
+  if (index > -1) {
+    toasts.value.splice(index, 1);
+  }
+}
+
+function clearToasts(): void {
+  toasts.value = [];
+}
+
+export function useToast() {
+  return {
+    toasts: readonly(toasts),
+
+    success(message: string, options?: Partial<Omit<Toast, "id" | "type" | "message">>) {
+      return addToast({ type: "success", message, ...options });
+    },
+
+    error(message: string, options?: Partial<Omit<Toast, "id" | "type" | "message">>) {
+      return addToast({ type: "error", message, ...options });
+    },
+
+    warning(message: string, options?: Partial<Omit<Toast, "id" | "type" | "message">>) {
+      return addToast({ type: "warning", message, ...options });
+    },
+
+    info(message: string, options?: Partial<Omit<Toast, "id" | "type" | "message">>) {
+      return addToast({ type: "info", message, ...options });
+    },
+
+    remove: removeToast,
+    clear: clearToasts,
+  };
+}