@autobe/ui 0.30.3 → 0.30.4-dev.20260324

package/src/components/events/common/EventHeader.tsx

@@ -1,85 +1,85 @@
-import { ReactNode } from "react";
-
-import { formatTime } from "../../../utils/time";
-import { EventIcon, EventIconType } from "./EventIcon";
-
-export interface IEventHeaderProps {
-  title: string;
-  subtitle?: ReactNode;
-  timestamp: string;
-  iconType: EventIconType;
-  step?: number;
-}
-
-/**
- * Common event header component Provides consistent header layout with icon,
- * title, and timestamp
- */
-export const EventHeader = (props: IEventHeaderProps) => {
-  return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        marginBottom: "1rem",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "0.75rem",
-        }}
-      >
-        <EventIcon type={props.iconType} />
-
-        <div>
-          <h3
-            style={{
-              fontSize: "1.125rem",
-              fontWeight: "600",
-              color: "#1e293b",
-              margin: 0,
-              marginBottom: "0.25rem",
-            }}
-          >
-            {props.title}
-          </h3>
-          {props.subtitle && (
-            <div
-              style={{
-                fontSize: "0.75rem",
-                color: "#64748b",
-              }}
-            >
-              {props.subtitle}
-            </div>
-          )}
-          {props.step !== undefined && (
-            <div
-              style={{
-                fontSize: "0.75rem",
-                color: "#64748b",
-              }}
-            >
-              Step #{props.step}
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div
-        style={{
-          fontSize: "0.75rem",
-          color: "#64748b",
-          textAlign: "right",
-        }}
-      >
-        {formatTime(props.timestamp)}
-      </div>
-    </div>
-  );
-};
-
-export default EventHeader;
+import { ReactNode } from "react";
+
+import { formatTime } from "../../../utils/time";
+import { EventIcon, EventIconType } from "./EventIcon";
+
+export interface IEventHeaderProps {
+  title: string;
+  subtitle?: ReactNode;
+  timestamp: string;
+  iconType: EventIconType;
+  step?: number;
+}
+
+/**
+ * Common event header component Provides consistent header layout with icon,
+ * title, and timestamp
+ */
+export const EventHeader = (props: IEventHeaderProps) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginBottom: "1rem",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "0.75rem",
+        }}
+      >
+        <EventIcon type={props.iconType} />
+
+        <div>
+          <h3
+            style={{
+              fontSize: "1.125rem",
+              fontWeight: "600",
+              color: "#1e293b",
+              margin: 0,
+              marginBottom: "0.25rem",
+            }}
+          >
+            {props.title}
+          </h3>
+          {props.subtitle && (
+            <div
+              style={{
+                fontSize: "0.75rem",
+                color: "#64748b",
+              }}
+            >
+              {props.subtitle}
+            </div>
+          )}
+          {props.step !== undefined && (
+            <div
+              style={{
+                fontSize: "0.75rem",
+                color: "#64748b",
+              }}
+            >
+              Step #{props.step}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div
+        style={{
+          fontSize: "0.75rem",
+          color: "#64748b",
+          textAlign: "right",
+        }}
+      >
+        {formatTime(props.timestamp)}
+      </div>
+    </div>
+  );
+};
+
+export default EventHeader;

package/src/components/events/common/EventIcon.tsx

@@ -1,82 +1,82 @@
-export type EventIconType =
-  | "success"
-  | "progress"
-  | "warning"
-  | "error"
-  | "info"
-  | "start";
-
-export interface IEventIconProps {
-  type: EventIconType;
-  size?: number;
-}
-
-const ICON_CONFIGS = {
-  success: {
-    backgroundColor: "#4caf50",
-    icon: (
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-    ),
-  },
-  progress: {
-    backgroundColor: "#4caf50",
-    icon: (
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-    ),
-  },
-  warning: {
-    backgroundColor: "#f59e0b",
-    icon: <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />,
-  },
-  error: {
-    backgroundColor: "#ef4444",
-    icon: (
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm3.5 6L12 10.5 8.5 8 7 9.5 10.5 12 7 15.5 8.5 17 12 13.5 15.5 17 17 15.5 13.5 12 17 8.5 15.5 7z" />
-    ),
-  },
-  info: {
-    backgroundColor: "#3b82f6",
-    icon: (
-      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-    ),
-  },
-  start: {
-    backgroundColor: "#10b981",
-    icon: <path d="M8 5v14l11-7z" />,
-  },
-} as const;
-
-/**
- * Common event icon component Provides consistent icon styling across all event
- * components
- */
-export const EventIcon = (props: IEventIconProps) => {
-  const { type, size = 16 } = props;
-  const config = ICON_CONFIGS[type];
-
-  return (
-    <div
-      style={{
-        width: "2rem",
-        height: "2rem",
-        backgroundColor: config.backgroundColor,
-        borderRadius: "50%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <svg
-        width={size}
-        height={size}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        style={{ color: "#ffffff" }}
-      >
-        {config.icon}
-      </svg>
-    </div>
-  );
-};
-
-export default EventIcon;
+export type EventIconType =
+  | "success"
+  | "progress"
+  | "warning"
+  | "error"
+  | "info"
+  | "start";
+
+export interface IEventIconProps {
+  type: EventIconType;
+  size?: number;
+}
+
+const ICON_CONFIGS = {
+  success: {
+    backgroundColor: "#4caf50",
+    icon: (
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+    ),
+  },
+  progress: {
+    backgroundColor: "#4caf50",
+    icon: (
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+    ),
+  },
+  warning: {
+    backgroundColor: "#f59e0b",
+    icon: <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />,
+  },
+  error: {
+    backgroundColor: "#ef4444",
+    icon: (
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm3.5 6L12 10.5 8.5 8 7 9.5 10.5 12 7 15.5 8.5 17 12 13.5 15.5 17 17 15.5 13.5 12 17 8.5 15.5 7z" />
+    ),
+  },
+  info: {
+    backgroundColor: "#3b82f6",
+    icon: (
+      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+    ),
+  },
+  start: {
+    backgroundColor: "#10b981",
+    icon: <path d="M8 5v14l11-7z" />,
+  },
+} as const;
+
+/**
+ * Common event icon component Provides consistent icon styling across all event
+ * components
+ */
+export const EventIcon = (props: IEventIconProps) => {
+  const { type, size = 16 } = props;
+  const config = ICON_CONFIGS[type];
+
+  return (
+    <div
+      style={{
+        width: "2rem",
+        height: "2rem",
+        backgroundColor: config.backgroundColor,
+        borderRadius: "50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        style={{ color: "#ffffff" }}
+      >
+        {config.icon}
+      </svg>
+    </div>
+  );
+};
+
+export default EventIcon;

package/src/components/events/common/ProgressBar.tsx

@@ -1,64 +1,64 @@
-export interface IProgressBarProps {
-  current: number;
-  total: number;
-  color?: string;
-  backgroundColor?: string;
-  height?: string;
-  showLabel?: boolean;
-}
-
-/**
- * Common progress bar component Provides consistent progress visualization
- * across event components
- */
-export const ProgressBar = (props: IProgressBarProps) => {
-  const {
-    current,
-    total,
-    color = "#4caf50",
-    backgroundColor = "#e2e8f0",
-    height = "10px",
-    showLabel = true,
-  } = props;
-
-  const calibratedCurrent = current > total ? total : current;
-  const percentage = Math.round((calibratedCurrent / total) * 100);
-
-  return (
-    <>
-      <div
-        style={{
-          width: "100%",
-          height,
-          backgroundColor,
-          borderRadius: "10px",
-          overflow: "hidden",
-          marginBottom: showLabel ? "0.5rem" : "0",
-        }}
-      >
-        <div
-          style={{
-            width: `${percentage}%`,
-            height: "100%",
-            backgroundColor: color,
-            borderRadius: "10px",
-            transition: "width 0.3s ease",
-          }}
-        />
-      </div>
-      {showLabel && (
-        <div
-          style={{
-            fontSize: "0.75rem",
-            color: "#64748b",
-            textAlign: "center",
-          }}
-        >
-          {calibratedCurrent} / {total} completed
-        </div>
-      )}
-    </>
-  );
-};
-
-export default ProgressBar;
+export interface IProgressBarProps {
+  current: number;
+  total: number;
+  color?: string;
+  backgroundColor?: string;
+  height?: string;
+  showLabel?: boolean;
+}
+
+/**
+ * Common progress bar component Provides consistent progress visualization
+ * across event components
+ */
+export const ProgressBar = (props: IProgressBarProps) => {
+  const {
+    current,
+    total,
+    color = "#4caf50",
+    backgroundColor = "#e2e8f0",
+    height = "10px",
+    showLabel = true,
+  } = props;
+
+  const calibratedCurrent = current > total ? total : current;
+  const percentage = Math.round((calibratedCurrent / total) * 100);
+
+  return (
+    <>
+      <div
+        style={{
+          width: "100%",
+          height,
+          backgroundColor,
+          borderRadius: "10px",
+          overflow: "hidden",
+          marginBottom: showLabel ? "0.5rem" : "0",
+        }}
+      >
+        <div
+          style={{
+            width: `${percentage}%`,
+            height: "100%",
+            backgroundColor: color,
+            borderRadius: "10px",
+            transition: "width 0.3s ease",
+          }}
+        />
+      </div>
+      {showLabel && (
+        <div
+          style={{
+            fontSize: "0.75rem",
+            color: "#64748b",
+            textAlign: "center",
+          }}
+        >
+          {calibratedCurrent} / {total} completed
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ProgressBar;