@fluid-app/fluid-cli-portal 0.1.32 → 0.1.33

package/templates/base/src/navigation.config.ts

@@ -1,26 +0,0 @@
-/**
- * Code-defined navigation items.
- *
- * Synced to the Fluid OS API on `fluid deploy` with source: "code".
- * Position is derived from array order. Items without a slug are
- * treated as section headers.
- *
- * User-created navigation items (from the admin dashboard) are not
- * affected — only items with source: "code" are managed.
- *
- * IMPORTANT: Do not add import statements to this file. The Fluid CLI
- * reads this file without resolving dependencies, so it must be
- * self-contained static data only.
- */
-export const navigation = [
-  {
-    label: "Dashboard",
-    slug: "dashboard",
-    icon: "home",
-  },
-  {
-    label: "MySite",
-    slug: "my-site",
-    icon: "globe",
-  },
-];

package/templates/base/src/screens/Dashboard.tsx

@@ -1,133 +0,0 @@
-import {
-  TextWidget,
-  ChartWidget,
-  ToDoWidget,
-  RecentActivityWidget,
-  CalendarWidget,
-} from "@fluid-app/portal-sdk";
-
-/**
- * Sample chart data extracted as a module-level constant.
- *
- * The data is extracted as a constant to:
- * 1. Keep the component cleaner
- * 2. Allow reuse/testing if needed
- * 3. Make it clear the data is static
- */
-const MONTHLY_PERFORMANCE_DATA = [
-  { name: "Jan", value: 4000 },
-  { name: "Feb", value: 3000 },
-  { name: "Mar", value: 5000 },
-  { name: "Apr", value: 4500 },
-  { name: "May", value: 6000 },
-  { name: "Jun", value: 5500 },
-];
-
-/**
- * Dashboard Screen
- *
- * This is the default landing screen for the portal.
- * It demonstrates using various widgets from portal-sdk:
- *
- * - TextWidget: Display text content with optional title
- * - ToDoWidget: Task list (uses useTodos hook)
- * - RecentActivityWidget: Activity feed (uses useActivities hook)
- * - ChartWidget: Bar, line, area, pie charts
- * - CalendarWidget: Calendar view (uses useCalendarEvents hook)
- *
- * These widgets fetch data from hooks that connect to your Fluid API.
- * In development, they show demo data. Configure fluid.config.ts
- * to connect to your Fluid instance.
- */
-export function DashboardScreen() {
-  return (
-    <div className="space-y-6">
-      {/* Welcome section */}
-      <TextWidget
-        titleEnabled
-        title="Welcome to Your Portal"
-        description="This is your portal dashboard. Use widgets from @fluid-app/portal-sdk to build powerful interfaces for your team."
-        padding={4}
-        borderRadius="lg"
-      />
-
-      {/* Stats row - sample static data */}
-      <div className="grid gap-6 md:grid-cols-3">
-        <div className="bg-background rounded-lg p-4 shadow-sm">
-          <p className="text-foreground text-3xl font-bold">$12,450</p>
-          <p className="text-muted-foreground mt-1 text-sm">Total Sales</p>
-        </div>
-
-        <div className="bg-background rounded-lg p-4 shadow-sm">
-          <p className="text-foreground text-3xl font-bold">24</p>
-          <p className="text-muted-foreground mt-1 text-sm">Active Orders</p>
-        </div>
-
-        <div className="bg-background rounded-lg p-4 shadow-sm">
-          <p className="text-foreground text-3xl font-bold">156</p>
-          <p className="text-muted-foreground mt-1 text-sm">Customers</p>
-        </div>
-      </div>
-
-      {/* Main content grid - Tasks and Activity */}
-      <div className="grid gap-6 lg:grid-cols-2">
-        {/* To-Do Widget - fetches tasks via useTodos hook */}
-        <ToDoWidget
-          titleEnabled
-          titleText="Tasks"
-          maxItems={5}
-          padding={4}
-          borderRadius="lg"
-        />
-
-        {/* Recent Activity Widget - fetches via useActivities hook */}
-        <RecentActivityWidget
-          titleEnabled
-          titleText="Recent Activity"
-          maxItemsToShow={5}
-          padding={4}
-          borderRadius="lg"
-        />
-      </div>
-
-      {/* Performance chart - uses extracted constant data */}
-      <ChartWidget
-        titleEnabled
-        title="Monthly Performance"
-        chartType="bar"
-        data={MONTHLY_PERFORMANCE_DATA}
-        padding={4}
-        borderRadius="lg"
-      />
-
-      {/* Calendar preview - uses useCalendarEvents hook */}
-      <CalendarWidget
-        titleEnabled
-        titleText="Upcoming Events"
-        padding={4}
-        borderRadius="lg"
-      />
-
-      {/* Getting started tips */}
-      <div className="grid gap-6 md:grid-cols-2">
-        <TextWidget
-          titleEnabled
-          title="Customize Navigation"
-          description="Edit portal.config.ts to add, remove, or reorder navigation items. Core screens (Messaging, Contacts) are built-in."
-          padding={4}
-          borderRadius="lg"
-          background={{ type: "solid", color: "muted" }}
-        />
-
-        <TextWidget
-          titleEnabled
-          title="Connect Your Data"
-          description="Configure fluid.config.ts with your Fluid API credentials. Widgets will automatically fetch real data from your account."
-          padding={4}
-          borderRadius="lg"
-          background={{ type: "solid", color: "muted" }}
-        />
-      </div>
-    </div>
-  );
-}

package/templates/base/src/screens/ExampleForm.tsx

@@ -1,177 +0,0 @@
-/**
- * Example Form Screen
- *
- * Demonstrates how to build forms in a portal using
- * React Hook Form + Zod for validation.
- *
- * Uncomment the nav entry and import in portal.config.ts to enable.
- */
-
-import { z } from "zod";
-import { useZodForm } from "@fluid-app/ui-primitives";
-
-// =============================================================================
-// Zod Schema
-// Define your form validation schema here
-// =============================================================================
-
-const contactFormSchema = z.object({
-  name: z.string().min(1, "Name is required").max(100, "Name is too long"),
-  email: z.string().email("Invalid email address"),
-  subject: z
-    .string()
-    .min(1, "Subject is required")
-    .max(200, "Subject is too long"),
-  message: z
-    .string()
-    .min(10, "Message must be at least 10 characters")
-    .max(2000, "Message is too long"),
-});
-
-type ContactFormData = z.infer<typeof contactFormSchema>;
-
-// =============================================================================
-// Example Form Screen
-// =============================================================================
-
-export function ExampleFormScreen() {
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors, isSubmitting, isSubmitSuccessful },
-  } = useZodForm<ContactFormData>(contactFormSchema);
-
-  const onSubmit = async (_data: ContactFormData) => {
-    // Replace with your API call, e.g.:
-    // const result = await apiClient.post("/contacts", _data);
-
-    // Simulate API delay
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-
-    reset(undefined, { keepIsSubmitSuccessful: true });
-  };
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div>
-        <h1 className="text-foreground text-2xl font-bold">Example Form</h1>
-        <p className="text-muted-foreground mt-1 text-sm">
-          Demonstrates React Hook Form + Zod validation. Replace this with your
-          own form.
-        </p>
-      </div>
-
-      {/* Form Card */}
-      <div className="border-border bg-background rounded-lg border p-6 shadow-sm">
-        {isSubmitSuccessful ? (
-          <div className="border-accent bg-accent text-accent-foreground rounded-lg border p-4 text-sm">
-            Form submitted successfully!
-          </div>
-        ) : (
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-            {/* Name field */}
-            <div>
-              <label
-                htmlFor="name"
-                className="text-foreground block text-sm font-medium"
-              >
-                Name
-              </label>
-              <input
-                id="name"
-                type="text"
-                {...register("name")}
-                className="border-input bg-background text-foreground focus:border-ring focus:ring-ring mt-1 block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:ring-1 focus:outline-none"
-                placeholder="Jane Smith"
-              />
-              {errors.name && (
-                <p className="text-destructive mt-1 text-sm">
-                  {errors.name.message}
-                </p>
-              )}
-            </div>
-
-            {/* Email field */}
-            <div>
-              <label
-                htmlFor="email"
-                className="text-foreground block text-sm font-medium"
-              >
-                Email
-              </label>
-              <input
-                id="email"
-                type="email"
-                {...register("email")}
-                className="border-input bg-background text-foreground focus:border-ring focus:ring-ring mt-1 block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:ring-1 focus:outline-none"
-                placeholder="jane@example.com"
-              />
-              {errors.email && (
-                <p className="text-destructive mt-1 text-sm">
-                  {errors.email.message}
-                </p>
-              )}
-            </div>
-
-            {/* Subject field */}
-            <div>
-              <label
-                htmlFor="subject"
-                className="text-foreground block text-sm font-medium"
-              >
-                Subject
-              </label>
-              <input
-                id="subject"
-                type="text"
-                {...register("subject")}
-                className="border-input bg-background text-foreground focus:border-ring focus:ring-ring mt-1 block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:ring-1 focus:outline-none"
-                placeholder="Order inquiry"
-              />
-              {errors.subject && (
-                <p className="text-destructive mt-1 text-sm">
-                  {errors.subject.message}
-                </p>
-              )}
-            </div>
-
-            {/* Message field */}
-            <div>
-              <label
-                htmlFor="message"
-                className="text-foreground block text-sm font-medium"
-              >
-                Message
-              </label>
-              <textarea
-                id="message"
-                rows={4}
-                {...register("message")}
-                className="border-input bg-background text-foreground focus:border-ring focus:ring-ring mt-1 block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:ring-1 focus:outline-none"
-                placeholder="Tell us more..."
-              />
-              {errors.message && (
-                <p className="text-destructive mt-1 text-sm">
-                  {errors.message.message}
-                </p>
-              )}
-            </div>
-
-            {/* Submit button */}
-            <div className="flex justify-end">
-              <button
-                type="submit"
-                disabled={isSubmitting}
-                className="bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-ring focus:ring-offset-background rounded-md px-4 py-2 text-sm font-medium shadow-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-              >
-                {isSubmitting ? "Submitting..." : "Submit"}
-              </button>
-            </div>
-          </form>
-        )}
-      </div>
-    </div>
-  );
-}