@fluid-app/fluid-cli-widget 0.1.0

package/templates/default/src/index.ts

@@ -0,0 +1,109 @@
+import { widgetPackage } from "../manifest";
+
+interface SourceWidgetLike {
+  readonly name: string;
+  readonly displayName?: string;
+  readonly description?: string;
+  readonly icon?: string;
+  readonly category?: string;
+  readonly propertySchema?: Readonly<Record<string, unknown>>;
+  readonly defaultProps?: Readonly<Record<string, unknown>>;
+  readonly container?: string;
+  readonly minSdkVersion?: string;
+  readonly resizable?: unknown;
+  readonly component: unknown;
+}
+
+interface RuntimeWidgetRegistration {
+  readonly type: string;
+  readonly name: string;
+  readonly displayName: string;
+  readonly description: string;
+  readonly icon: string;
+  readonly category: string;
+  readonly propertySchema: Readonly<Record<string, unknown>>;
+  readonly defaultProps: Readonly<Record<string, unknown>>;
+  readonly container: string;
+  readonly minSdkVersion: string;
+  readonly resizable: boolean | "horizontal" | "vertical" | "both";
+  readonly component: unknown;
+}
+
+interface LocalFluidWidgetsGlobal {
+  registerPackage(registration: {
+    readonly packageId: string;
+    readonly version: string;
+    readonly widgets: readonly RuntimeWidgetRegistration[];
+  }): void;
+}
+
+const widgets = widgetPackage.widgets.map((widget: SourceWidgetLike) => {
+  const type = `${widgetPackage.packageId}.${widget.name}`;
+  return {
+    type,
+    name: widget.name,
+    displayName: widget.displayName ?? widget.name,
+    description: widget.description ?? `Custom widget ${widget.name}`,
+    icon: widget.icon ?? "box",
+    category: widget.category ?? "components",
+    propertySchema: {
+      ...widget.propertySchema,
+      widgetType: type,
+    },
+    defaultProps: widget.defaultProps ?? {},
+    container: widget.container ?? "block",
+    minSdkVersion: widget.minSdkVersion ?? "0.0.0",
+    resizable: normalizeResizable(widget.resizable),
+    component: widget.component,
+  } satisfies RuntimeWidgetRegistration;
+});
+
+const fluidWidgets =
+  typeof window === "undefined"
+    ? undefined
+    : (window as Window & { readonly FluidWidgets?: LocalFluidWidgetsGlobal })
+        .FluidWidgets;
+
+if (fluidWidgets && typeof fluidWidgets.registerPackage === "function") {
+  fluidWidgets.registerPackage({
+    packageId: widgetPackage.packageId,
+    version: widgetPackage.version,
+    widgets,
+  });
+} else {
+  console.warn("FluidWidgets registry is not installed.");
+}
+
+function normalizeResizable(
+  resizable: unknown,
+): RuntimeWidgetRegistration["resizable"] {
+  if (
+    resizable === true ||
+    resizable === "horizontal" ||
+    resizable === "vertical" ||
+    resizable === "both"
+  ) {
+    return resizable;
+  }
+
+  if (isRecord(resizable)) {
+    const horizontal = resizable.horizontal === true;
+    const vertical = resizable.vertical === true;
+    if (horizontal && vertical) return "both";
+    if (horizontal) return "horizontal";
+    if (vertical) return "vertical";
+  }
+
+  return false;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export { widgetPackage } from "../manifest";
+export { ReviewCarousel } from "./widgets/review-carousel/ReviewCarousel";
+export type {
+  ReviewCarouselProps,
+  ReviewCarouselReview,
+} from "./widgets/review-carousel/ReviewCarousel";

package/templates/default/src/preview-entry.tsx

@@ -0,0 +1,60 @@
+import { createPreview } from "@fluid-app/portal-sdk/preview";
+import "../styles.css";
+import { widgetPackages } from "../manifest";
+
+createPreview({
+  widgetPackages: widgetPackages.map((widgetPackage) => ({
+    manifestVersion: 1,
+    packageId: widgetPackage.packageId,
+    packageType: widgetPackage.packageType,
+    version: widgetPackage.version,
+    remoteEntryUrl: "/__runtime-entry__",
+    cssUrls: widgetPackage.cssUrls,
+    widgets: widgetPackage.widgets.map((widget) => {
+      const type = `${widgetPackage.packageId}.${widget.name}`;
+      return {
+        type,
+        name: widget.name,
+        displayName: widget.displayName ?? widget.name,
+        description: widget.description ?? `Custom widget ${widget.name}`,
+        icon: widget.icon ?? "box",
+        category: widget.category ?? "components",
+        propertySchema: {
+          ...widget.propertySchema,
+          widgetType: type,
+        },
+        defaultProps: widget.defaultProps,
+        container: widget.container ?? "block",
+        minSdkVersion: widget.minSdkVersion ?? "0.0.0",
+        resizable: normalizeResizable(widget.resizable),
+      };
+    }),
+  })),
+});
+
+function normalizeResizable(
+  resizable: unknown,
+): boolean | "horizontal" | "vertical" | "both" {
+  if (
+    resizable === true ||
+    resizable === "horizontal" ||
+    resizable === "vertical" ||
+    resizable === "both"
+  ) {
+    return resizable;
+  }
+
+  if (isRecord(resizable)) {
+    const horizontal = resizable["horizontal"] === true;
+    const vertical = resizable["vertical"] === true;
+    if (horizontal && vertical) return "both";
+    if (horizontal) return "horizontal";
+    if (vertical) return "vertical";
+  }
+
+  return false;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}

package/templates/default/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/default/src/widget-preview.tsx

@@ -0,0 +1,17 @@
+import { createRoot } from "react-dom/client";
+import "../styles.css";
+import { ReviewCarousel } from "./widgets/review-carousel/ReviewCarousel";
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+  throw new Error("Missing #root element");
+}
+
+createRoot(rootElement).render(
+  <main className="fluid-widget-preview-shell">
+    <div className="fluid-widget-preview-frame">
+      <ReviewCarousel />
+    </div>
+  </main>,
+);

package/templates/default/src/widgets/review-carousel/ReviewCarousel.tsx

@@ -0,0 +1,95 @@
+import { useMemo, useState } from "react";
+
+export interface ReviewCarouselReview {
+  readonly quote: string;
+  readonly author: string;
+  readonly role: string;
+}
+
+export interface ReviewCarouselProps {
+  readonly eyebrow?: string;
+  readonly title?: string;
+  readonly reviews?: readonly ReviewCarouselReview[];
+}
+
+const defaultReviews: readonly ReviewCarouselReview[] = [
+  {
+    quote:
+      "Fluid widgets let us ship focused portal experiences without coupling releases to the host application.",
+    author: "Maya Chen",
+    role: "VP of Customer Experience",
+  },
+  {
+    quote:
+      "The package boundary keeps authoring fast while still giving our team a clean publish path.",
+    author: "Jordan Ellis",
+    role: "Solutions Architect",
+  },
+  {
+    quote:
+      "We can preview, validate, and publish a reusable widget package from a small standalone project.",
+    author: "Avery Brooks",
+    role: "Portal Engineer",
+  },
+];
+
+export function ReviewCarousel({
+  eyebrow = "Customer stories",
+  title = "Reviews that travel with your portal",
+  reviews = defaultReviews,
+}: ReviewCarouselProps): React.JSX.Element {
+  const safeReviews = reviews.length > 0 ? reviews : defaultReviews;
+  const [activeIndex, setActiveIndex] = useState(0);
+  const activeReview = safeReviews[activeIndex] ?? safeReviews[0];
+
+  const countLabel = useMemo(
+    () => `${activeIndex + 1} / ${safeReviews.length}`,
+    [activeIndex, safeReviews.length],
+  );
+
+  function goToPrevious(): void {
+    setActiveIndex((current) =>
+      current === 0 ? safeReviews.length - 1 : current - 1,
+    );
+  }
+
+  function goToNext(): void {
+    setActiveIndex((current) =>
+      current === safeReviews.length - 1 ? 0 : current + 1,
+    );
+  }
+
+  return (
+    <section className="review-carousel" aria-label={title}>
+      <p className="review-carousel__eyebrow">{eyebrow}</p>
+      <h2 className="review-carousel__title">{title}</h2>
+      <blockquote className="review-carousel__quote">
+        “{activeReview.quote}”
+      </blockquote>
+      <div className="review-carousel__footer">
+        <div>
+          <p className="review-carousel__author">{activeReview.author}</p>
+          <p className="review-carousel__role">{activeReview.role}</p>
+        </div>
+        <div className="review-carousel__controls" aria-label={countLabel}>
+          <button
+            className="review-carousel__button"
+            type="button"
+            aria-label="Show previous review"
+            onClick={goToPrevious}
+          >
+            ←
+          </button>
+          <button
+            className="review-carousel__button"
+            type="button"
+            aria-label="Show next review"
+            onClick={goToNext}
+          >
+            →
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/default/styles.css

@@ -0,0 +1,173 @@
+:root {
+  color: #111827;
+  background: #f8fafc;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+
+body {
+  margin: 0;
+}
+
+button {
+  font: inherit;
+}
+
+.fluid-widget-preview-shell {
+  min-height: 100vh;
+  padding: 48px 24px;
+  box-sizing: border-box;
+}
+
+.fluid-widget-preview-frame {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.review-carousel {
+  border: 1px solid #e5e7eb;
+  border-radius: 24px;
+  padding: 32px;
+  background: #ffffff;
+  box-shadow: 0 24px 80px rgb(15 23 42 / 10%);
+}
+
+.review-carousel__eyebrow {
+  margin: 0 0 8px;
+  color: #4f46e5;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.review-carousel__title {
+  margin: 0;
+  color: #111827;
+  font-size: clamp(2rem, 4vw, 3.5rem);
+  line-height: 0.95;
+  letter-spacing: -0.05em;
+}
+
+.review-carousel__quote {
+  margin: 32px 0 0;
+  color: #1f2937;
+  font-size: clamp(1.25rem, 2vw, 1.75rem);
+  line-height: 1.35;
+}
+
+.review-carousel__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  margin-top: 32px;
+}
+
+.review-carousel__author {
+  margin: 0;
+  color: #111827;
+  font-weight: 700;
+}
+
+.review-carousel__role {
+  margin: 4px 0 0;
+  color: #6b7280;
+}
+
+.review-carousel__controls {
+  display: flex;
+  gap: 8px;
+}
+
+.review-carousel__button {
+  width: 40px;
+  height: 40px;
+  border: 1px solid #d1d5db;
+  border-radius: 999px;
+  color: #111827;
+  background: #ffffff;
+  cursor: pointer;
+}
+
+.review-carousel__button:hover {
+  border-color: #4f46e5;
+  color: #4f46e5;
+}
+
+.fluid-widget-builder-preview {
+  display: grid;
+  gap: 32px;
+}
+
+.fluid-widget-builder-preview__header {
+  max-width: 720px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.fluid-widget-builder-preview__eyebrow {
+  margin: 0 0 8px;
+  color: #4f46e5;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.fluid-widget-builder-preview__title {
+  margin: 0;
+  color: #111827;
+  font-size: clamp(2.5rem, 5vw, 4.5rem);
+  line-height: 0.95;
+  letter-spacing: -0.06em;
+}
+
+.fluid-widget-builder-preview__description {
+  margin: 16px 0 0;
+  color: #64748b;
+  font-size: 1rem;
+}
+
+.fluid-widget-builder-preview__grid {
+  display: grid;
+  gap: 24px;
+}
+
+.fluid-widget-builder-preview__card {
+  display: grid;
+  gap: 16px;
+}
+
+.fluid-widget-builder-preview__meta {
+  display: grid;
+  gap: 6px;
+  max-width: 960px;
+  margin: 0 auto;
+  color: #64748b;
+}
+
+.fluid-widget-builder-preview__meta p {
+  margin: 0;
+}
+
+.fluid-widget-builder-preview__meta code {
+  color: #4338ca;
+}
+
+.fluid-widget-builder-preview__widget-name {
+  color: #111827;
+  font-weight: 700;
+}
+
+.fluid-widget-builder-preview__surface {
+  max-width: 960px;
+  width: 100%;
+  margin: 0 auto;
+}

package/templates/default/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "fluid.widget.config.ts", "vite.config.ts"],
+  "references": []
+}