@autobe/ui 0.19.1 → 0.20.0

package/src/events/AutoBeValidateEventMovie.tsx

@@ -0,0 +1,326 @@
+import {
+  AutoBeInterfaceComplementEvent,
+  AutoBeInterfaceOperationsReviewEvent,
+  AutoBePrismaInsufficientEvent,
+  AutoBePrismaValidateEvent,
+  AutoBeRealizeAuthorizationValidateEvent,
+  AutoBeRealizeValidateEvent,
+  AutoBeTestValidateEvent,
+} from "@autobe/interface";
+import { JSX } from "react";
+
+import { EventCard, EventContent, EventHeader } from "./common";
+
+export interface IAutoBeValidateEventMovieProps {
+  event:
+    | AutoBePrismaInsufficientEvent
+    | AutoBePrismaValidateEvent
+    | AutoBeInterfaceOperationsReviewEvent
+    | AutoBeInterfaceComplementEvent
+    | AutoBeTestValidateEvent
+    | AutoBeRealizeValidateEvent
+    | AutoBeRealizeAuthorizationValidateEvent;
+}
+
+export const AutoBeValidateEventMovie = (
+  props: IAutoBeValidateEventMovieProps,
+) => {
+  const { event } = props;
+  const { title, description, isError, step, isSuccess } = getState(event);
+
+  const getCardVariant = () => {
+    if (isSuccess) return "success";
+    if (isError) return "error";
+    return "warning";
+  };
+
+  const getIconType = () => {
+    if (isSuccess) return "success";
+    if (isError) return "error";
+    return "warning";
+  };
+
+  return (
+    <EventCard variant={getCardVariant()}>
+      <EventHeader
+        title={title}
+        timestamp={event.created_at}
+        iconType={getIconType()}
+        step={step}
+      />
+      <EventContent>{description}</EventContent>
+    </EventCard>
+  );
+};
+
+export default AutoBeValidateEventMovie;
+
+interface IState {
+  title: string;
+  description: string | JSX.Element;
+  isError: boolean;
+  isSuccess: boolean;
+  step?: number;
+}
+
+function getState(event: IAutoBeValidateEventMovieProps["event"]): IState {
+  switch (event.type) {
+    case "prismaValidate":
+      return {
+        title: "Prisma Validation Failed",
+        description: (
+          <>
+            Database schema validation encountered errors that require
+            correction.
+            <br />
+            <br />
+            <strong>Error Details:</strong>
+            <br />
+            {event.result.errors.length > 0 && (
+              <>
+                {event.result.errors
+                  .slice(0, 3)
+                  .map((error: any, idx: number) => (
+                    <div key={idx} style={{ marginTop: "0.25rem" }}>
+                      • {error.message}
+                    </div>
+                  ))}
+              </>
+            )}
+            <br />
+            <strong>Failed Schemas:</strong> {Object.keys(event.schemas).length}{" "}
+            file(s)
+          </>
+        ),
+        isError: true,
+        isSuccess: false,
+        step: event.step,
+      };
+    case "testValidate":
+      const isTestSuccess = event.result.type === "success";
+      return {
+        title: isTestSuccess
+          ? "Test Validation Successful"
+          : "Test Validation Failed",
+        description: (
+          <>
+            Test file validation completed.
+            <br />
+            <br />
+            <strong>File:</strong> {event.file.location}
+            <br />
+            <strong>Status:</strong> {isTestSuccess ? "Success" : "Failed"}
+            {!isTestSuccess && (
+              <>
+                <br />
+                <br />
+                <strong>Compilation Issues:</strong>
+                <br />
+                {event.result.type === "failure" &&
+                  event.result.diagnostics
+                    .slice(0, 3)
+                    .map((diagnostic: any, idx: number) => (
+                      <div key={idx} style={{ marginTop: "0.25rem" }}>
+                        • {diagnostic.messageText}
+                      </div>
+                    ))}
+                {event.result.type === "exception" && (
+                  <div style={{ marginTop: "0.25rem" }}>
+                    • Exception occurred during compilation
+                  </div>
+                )}
+              </>
+            )}
+          </>
+        ),
+        isError: !isTestSuccess,
+        isSuccess: isTestSuccess,
+        step: event.step,
+      };
+    case "realizeValidate":
+      return {
+        title: "Implementation Validation Failed",
+        description: (
+          <>
+            Implementation code compilation encountered errors that need
+            correction.
+            <br />
+            <br />
+            <strong>Failed Files:</strong> {Object.keys(event.files).length}{" "}
+            file(s)
+            <br />
+            <br />
+            <strong>Error Type:</strong>{" "}
+            {event.result.type === "failure"
+              ? "Compilation Error"
+              : "Runtime Exception"}
+            <br />
+            {event.result.type === "failure" &&
+              event.result.diagnostics.length > 0 && (
+                <>
+                  <br />
+                  <strong>First Error:</strong>
+                  <br />
+                  {event.result.diagnostics[0].messageText}
+                </>
+              )}
+          </>
+        ),
+        isError: true,
+        isSuccess: false,
+        step: event.step,
+      };
+    case "realizeAuthorizationValidate":
+      const isAuthSuccess = event.result.type === "success";
+      return {
+        title: isAuthSuccess
+          ? "Authorization Validation Successful"
+          : "Authorization Validation Failed",
+        description: (
+          <>
+            Authorization implementation validation completed.
+            <br />
+            <br />
+            <strong>Role:</strong> {event.authorization.role.name}(
+            {event.authorization.role.description})
+            <br />
+            <strong>Status:</strong> {isAuthSuccess ? "Success" : "Failed"}
+            {!isAuthSuccess && (
+              <>
+                <br />
+                <br />
+                <strong>Validation Issues:</strong>
+                <br />
+                {event.result.type === "failure" &&
+                  event.result.diagnostics
+                    .slice(0, 2)
+                    .map((diagnostic: any, idx: number) => (
+                      <div key={idx} style={{ marginTop: "0.25rem" }}>
+                        • {diagnostic.messageText}
+                      </div>
+                    ))}
+                {event.result.type === "exception" && (
+                  <div style={{ marginTop: "0.25rem" }}>
+                    • Exception occurred during validation
+                  </div>
+                )}
+              </>
+            )}
+          </>
+        ),
+        isError: !isAuthSuccess,
+        isSuccess: isAuthSuccess,
+        step: event.step,
+      };
+    case "prismaInsufficient":
+      return {
+        title: "Prisma Model Generation Insufficient",
+        description: (
+          <>
+            Prisma model generation was incomplete for the assigned component.
+            <br />
+            <br />
+            <strong>Component:</strong> {event.component.namespace}
+            <br />
+            <strong>Generated Models:</strong> {event.actual.length}
+            <br />
+            <strong>Missing Models:</strong> {event.missed.length}
+            <br />
+            <br />
+            {event.missed.length > 0 && (
+              <>
+                <strong>Missed Tables:</strong>
+                <br />
+                {event.missed.slice(0, 5).map((table: string, idx: number) => (
+                  <div key={idx} style={{ marginTop: "0.25rem" }}>
+                    • {table}
+                  </div>
+                ))}
+                {event.missed.length > 5 && (
+                  <div style={{ marginTop: "0.25rem" }}>
+                    ... and {event.missed.length - 5} more
+                  </div>
+                )}
+              </>
+            )}
+          </>
+        ),
+        isError: true,
+        isSuccess: false,
+        step: undefined, // prismaInsufficient doesn't have step
+      };
+    case "interfaceOperationsReview":
+      return {
+        title: "Interface Operations Review",
+        description: (
+          <>
+            API operations are being reviewed for quality and consistency.
+            <br />
+            <br />
+            <strong>Operations Count:</strong> {event.operations.length}
+            <br />
+            <strong>Status:</strong> Review in progress
+            <br />
+            <br />
+            <strong>Review Summary:</strong>
+            <br />
+            <div
+              style={{
+                maxHeight: "100px",
+                overflow: "hidden",
+                fontSize: "0.75rem",
+                color: "#64748b",
+                marginTop: "0.5rem",
+              }}
+            >
+              {event.review.length > 200
+                ? `${event.review.substring(0, 200)}...`
+                : event.review}
+            </div>
+          </>
+        ),
+        isError: false,
+        isSuccess: true,
+        step: event.step,
+      };
+    case "interfaceComplement":
+      return {
+        title: "Interface Schema Complement",
+        description: (
+          <>
+            Missing schema definitions are being added to complete the API
+            specification.
+            <br />
+            <br />
+            <strong>Missing Schemas:</strong> {event.missed.length}
+            <br />
+            <strong>Added Schemas:</strong> {Object.keys(event.schemas).length}
+            <br />
+            <br />
+            {event.missed.length > 0 && (
+              <>
+                <strong>Complemented Types:</strong>
+                <br />
+                {event.missed.slice(0, 5).map((schema: string, idx: number) => (
+                  <div key={idx} style={{ marginTop: "0.25rem" }}>
+                    • {schema}
+                  </div>
+                ))}
+                {event.missed.length > 5 && (
+                  <div style={{ marginTop: "0.25rem" }}>
+                    ... and {event.missed.length - 5} more
+                  </div>
+                )}
+              </>
+            )}
+          </>
+        ),
+        isError: false,
+        isSuccess: true,
+        step: event.step,
+      };
+    default:
+      event satisfies never;
+      throw new Error("Unknown validation event type");
+  }
+}

package/src/events/README.md

@@ -0,0 +1,169 @@
+# AutoBe Event Components
+
+Event UI components for the AutoBe platform with grouping and collapsible functionality.
+
+## Individual Event Components
+
+### AutoBeProgressEventMovie
+Shows progress tracking events with progress bars.
+
+```tsx
+import { AutoBeProgressEventMovie } from "@autobe/ui/events";
+
+<AutoBeProgressEventMovie event={progressEvent} />
+```
+
+### AutoBeValidateEventMovie
+Shows validation events with error/success states.
+
+```tsx
+import { AutoBeValidateEventMovie } from "@autobe/ui/events";
+
+<AutoBeValidateEventMovie event={validateEvent} />
+```
+
+### AutoBeScenarioEventMovie
+Shows scenario analysis and component generation events.
+
+```tsx
+import { AutoBeScenarioEventMovie } from "@autobe/ui/events";
+
+<AutoBeScenarioEventMovie event={scenarioEvent} />
+```
+
+### AutoBeStartEventMovie
+Shows pipeline start events with simple status display.
+
+```tsx
+import { AutoBeStartEventMovie } from "@autobe/ui/events";
+
+<AutoBeStartEventMovie event={startEvent} />
+```
+
+## Grouped Event Components
+
+### ValidateEventGroup
+Groups validation events with success rate statistics.
+
+```tsx
+import { ValidateEventGroup } from "@autobe/ui/events";
+
+<ValidateEventGroup 
+  events={validateEvents} 
+  defaultCollapsed={true} 
+/>
+```
+
+## Automatic Event Grouping
+
+Use the `groupEvents` utility to automatically group events by type:
+
+```tsx
+import { groupEvents } from "@autobe/ui/events/utils/eventGrouper";
+
+const EventList = ({ events }: { events: AutoBeEvent[] }) => {
+  const groupedComponents = groupEvents(events, {
+    minGroupSize: 3,       // Minimum events to form a group
+    defaultCollapsed: true, // Start collapsed
+    enableGrouping: true,   // Enable grouping
+  });
+
+  return (
+    <div>
+      {groupedComponents}
+    </div>
+  );
+};
+```
+
+## Custom Collapsible Groups
+
+Create custom event groups using the `CollapsibleEventGroup` component:
+
+```tsx
+import { CollapsibleEventGroup } from "@autobe/ui/events";
+
+<CollapsibleEventGroup
+  events={customEvents}
+  title="Custom Event Group"
+  iconType="info"
+  getTimestamp={(event) => event.created_at}
+  renderEvent={(event, index) => <CustomEventComponent event={event} />}
+  renderSummary={(events) => <CustomSummary events={events} />}
+  defaultCollapsed={true}
+  description="Custom grouped events"
+/>
+```
+
+## Common Components
+
+### EventCard
+Basic card container for consistent styling.
+
+```tsx
+import { EventCard } from "@autobe/ui/events";
+
+<EventCard>
+  <div>Your content here</div>
+</EventCard>
+```
+
+### EventHeader
+Standardized header with icon, title, and timestamp.
+
+```tsx
+import { EventHeader } from "@autobe/ui/events";
+
+<EventHeader
+  title="Event Title"
+  timestamp="2024-01-01T12:00:00Z"
+  iconType="success"
+  step={1}
+/>
+```
+
+### EventContent
+Consistent content area styling.
+
+```tsx
+import { EventContent } from "@autobe/ui/events";
+
+<EventContent>
+  <div>Your content here</div>
+</EventContent>
+```
+
+### EventIcon
+Consistent icons for different event states.
+
+```tsx
+import { EventIcon } from "@autobe/ui/events";
+
+<EventIcon type="success" size={16} />
+```
+
+Available icon types: `success`, `progress`, `warning`, `error`, `info`, `start`
+
+### ProgressBar
+Reusable progress bar component.
+
+```tsx
+import { ProgressBar } from "@autobe/ui/events";
+
+<ProgressBar 
+  current={7} 
+  total={10} 
+  color="#4caf50"
+  showLabel={true}
+/>
+```
+
+## Features
+
+- 🎯 **Consistent Design**: All components follow the same design system
+- 📱 **Responsive**: Works on all screen sizes
+- 🔄 **Collapsible**: Group events to reduce visual clutter
+- 📊 **Statistics**: Automatic progress and error rate calculations
+- 🎨 **Customizable**: Easy to extend and customize
+- 💎 **TypeScript**: Full type safety and IntelliSense support
+- ⚡ **Performance**: Efficient rendering with minimal re-renders

package/src/events/common/CollapsibleEventGroup.tsx

@@ -0,0 +1,220 @@
+import { ReactNode, useState } from "react";
+
+import { EventCard } from "./EventCard";
+import { EventContent } from "./EventContent";
+import { EventIcon, EventIconType } from "./EventIcon";
+
+export interface ICollapsibleEventGroupProps<T = any> {
+  /** Array of events of the same type */
+  events: T[];
+  /** Title for the group */
+  title: string;
+  /** Icon type for the group header */
+  iconType: EventIconType;
+  /** Function to render individual events */
+  renderEvent: (event: T, index: number) => ReactNode;
+  /** Function to get timestamp from event (for header) */
+  getTimestamp: (event: T) => string;
+  /** Optional custom summary content */
+  renderSummary?: (events: T[]) => ReactNode;
+  /** Initial collapsed state */
+  defaultCollapsed?: boolean;
+  /** Custom group description */
+  description?: string;
+  /** Card variant based on event status */
+  variant?: "default" | "success" | "error" | "warning";
+}
+
+/**
+ * Collapsible event group component Groups multiple events of the same type
+ * with expand/collapse functionality
+ */
+export const CollapsibleEventGroup = <T,>(
+  props: ICollapsibleEventGroupProps<T>,
+) => {
+  const {
+    events,
+    title,
+    iconType,
+    renderEvent,
+    getTimestamp,
+    renderSummary,
+    defaultCollapsed = true,
+    description,
+    variant = "default",
+  } = props;
+
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+  if (events.length === 0) {
+    return null;
+  }
+
+  // Use the latest event's timestamp for the group header
+  const latestTimestamp = getTimestamp(events[events.length - 1]);
+
+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  const defaultSummary = (
+    <>
+      {description && (
+        <>
+          {description}
+          <br />
+          <br />
+        </>
+      )}
+      <strong>Total Events:</strong> {events.length}
+      <br />
+      <strong>Status:</strong> {isCollapsed ? "Collapsed" : "Expanded"}
+    </>
+  );
+
+  return (
+    <EventCard variant={variant}>
+      {/* Header */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "1rem",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "0.75rem",
+          }}
+        >
+          <EventIcon type={iconType} />
+
+          <div>
+            <h3
+              style={{
+                fontSize: "1.125rem",
+                fontWeight: "600",
+                color: "#1e293b",
+                margin: 0,
+                marginBottom: "0.25rem",
+              }}
+            >
+              {title}
+            </h3>
+            <div
+              style={{
+                fontSize: "0.75rem",
+                color: "#64748b",
+              }}
+            >
+              {events.length} event{events.length !== 1 ? "s" : ""}
+            </div>
+          </div>
+        </div>
+
+        <div
+          style={{
+            fontSize: "0.75rem",
+            color: "#64748b",
+            textAlign: "right",
+          }}
+        >
+          {latestTimestamp}
+        </div>
+      </div>
+
+      {/* Summary content when collapsed */}
+      {isCollapsed && (
+        <EventContent>
+          {renderSummary ? renderSummary(events) : defaultSummary}
+        </EventContent>
+      )}
+
+      {/* Individual events when expanded */}
+      {!isCollapsed && (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.5rem",
+          }}
+        >
+          {events.map((event, index) => (
+            <div
+              key={index}
+              style={{
+                border: "1px solid #e2e8f0",
+                borderRadius: "0.5rem",
+                overflow: "hidden",
+              }}
+            >
+              {renderEvent(event, index)}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Expand/Collapse Button */}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          marginTop: "1rem",
+        }}
+      >
+        <button
+          onClick={toggleCollapse}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "0.5rem",
+            padding: "0.5rem 1rem",
+            backgroundColor: "#f8fafc",
+            border: "1px solid #e2e8f0",
+            borderRadius: "0.5rem",
+            cursor: "pointer",
+            fontSize: "0.875rem",
+            color: "#64748b",
+            transition: "all 0.2s ease",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = "#f1f5f9";
+            e.currentTarget.style.borderColor = "#cbd5e1";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = "#f8fafc";
+            e.currentTarget.style.borderColor = "#e2e8f0";
+          }}
+        >
+          <span>{isCollapsed ? "Expand" : "Collapse"}</span>
+          <div
+            style={{
+              width: "1rem",
+              height: "1rem",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "transform 0.2s ease",
+              transform: isCollapsed ? "rotate(0deg)" : "rotate(180deg)",
+            }}
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              style={{ color: "#64748b" }}
+            >
+              <path d="M7 10l5 5 5-5z" />
+            </svg>
+          </div>
+        </button>
+      </div>
+    </EventCard>
+  );
+};
+
+export default CollapsibleEventGroup;