@oneuptime/common 9.3.22 → 9.4.0

package/UI/Components/Diagram/ConceptCards.tsx

@@ -0,0 +1,74 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import Color from "../../../Types/Color";
+
+export interface ConceptCard {
+  title: string;
+  description: string;
+  icon: IconProp;
+  iconColor: Color;
+}
+
+export interface ComponentProps {
+  cards: ConceptCard[];
+  /** Number of columns in the grid (1-4). Default is 2. */
+  columns?: 1 | 2 | 3 | 4 | undefined;
+}
+
+const ConceptCards: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const columns: number = props.columns || 2;
+
+  const getGridClasses: () => string = (): string => {
+    switch (columns) {
+      case 1:
+        return "grid-cols-1";
+      case 2:
+        return "grid-cols-1 md:grid-cols-2";
+      case 3:
+        return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
+      case 4:
+        return "grid-cols-1 md:grid-cols-2 lg:grid-cols-4";
+      default:
+        return "grid-cols-1 md:grid-cols-2";
+    }
+  };
+
+  return (
+    <div className={`grid ${getGridClasses()} gap-3`}>
+      {props.cards.map((card: ConceptCard, index: number) => {
+        return (
+          <div
+            key={index}
+            className="border border-gray-200 rounded-md p-3 bg-white hover:border-gray-300 transition-colors"
+          >
+            <div className="flex items-start space-x-3">
+              <div
+                className="flex-shrink-0 w-8 h-8 rounded flex items-center justify-center"
+                style={{ backgroundColor: `${card.iconColor.toString()}15` }}
+              >
+                <Icon
+                  icon={card.icon}
+                  className="h-4 w-4"
+                  style={{ color: card.iconColor.toString() }}
+                />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h4 className="text-sm font-medium text-gray-900">
+                  {card.title}
+                </h4>
+                <p className="text-sm text-gray-500 mt-1 leading-relaxed">
+                  {card.description}
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ConceptCards;

package/UI/Components/Diagram/HorizontalStepChain.tsx

@@ -0,0 +1,92 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import Color from "../../../Types/Color";
+
+export interface ChainStep {
+  stepNumber: number;
+  title: string;
+  description: string;
+  color: Color;
+  /** Optional label shown below the step number. Default is "Step" */
+  stepLabel?: string | undefined;
+}
+
+export interface ChainEndStep {
+  title: string;
+  description: string;
+  icon: IconProp;
+  color: Color;
+}
+
+export interface ComponentProps {
+  steps: ChainStep[];
+  endStep?: ChainEndStep | undefined;
+  /** Default label for steps. Default is "Step" */
+  defaultStepLabel?: string | undefined;
+}
+
+const HorizontalStepChain: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const defaultLabel: string = props.defaultStepLabel || "Step";
+
+  return (
+    <div className="flex items-center flex-wrap gap-3">
+      {props.steps.map((step: ChainStep, index: number) => {
+        return (
+          <React.Fragment key={index}>
+            {/* Step */}
+            <div className="flex items-center space-x-3">
+              <div
+                className="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-medium"
+                style={{ backgroundColor: step.color.toString() }}
+              >
+                {step.stepNumber}
+              </div>
+              <div>
+                <p className="text-sm font-medium text-gray-900">
+                  {step.title}
+                </p>
+                <p className="text-xs text-gray-500">
+                  {step.stepLabel || defaultLabel} {step.stepNumber} ·{" "}
+                  {step.description}
+                </p>
+              </div>
+            </div>
+
+            {/* Arrow */}
+            <Icon
+              icon={IconProp.ChevronRight}
+              className="h-4 w-4 text-gray-300 hidden sm:block"
+            />
+          </React.Fragment>
+        );
+      })}
+
+      {/* End Step */}
+      {props.endStep && (
+        <div className="flex items-center space-x-3">
+          <div
+            className="w-10 h-10 rounded-full flex items-center justify-center"
+            style={{ backgroundColor: `${props.endStep.color.toString()}15` }}
+          >
+            <Icon
+              icon={props.endStep.icon}
+              className="h-4 w-4"
+              style={{ color: props.endStep.color.toString() }}
+            />
+          </div>
+          <div>
+            <p className="text-sm font-medium text-gray-900">
+              {props.endStep.title}
+            </p>
+            <p className="text-xs text-gray-500">{props.endStep.description}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default HorizontalStepChain;

package/UI/Components/Diagram/Index.ts

@@ -0,0 +1,11 @@
+export { default as VerticalFlowSteps } from "./VerticalFlowSteps";
+export type { FlowStep } from "./VerticalFlowSteps";
+
+export { default as HorizontalStepChain } from "./HorizontalStepChain";
+export type { ChainStep, ChainEndStep } from "./HorizontalStepChain";
+
+export { default as NumberedSteps } from "./NumberedSteps";
+export type { NumberedStep } from "./NumberedSteps";
+
+export { default as ConceptCards } from "./ConceptCards";
+export type { ConceptCard } from "./ConceptCards";

package/UI/Components/Diagram/NumberedSteps.tsx

@@ -0,0 +1,77 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import Color from "../../../Types/Color";
+
+export interface NumberedStep {
+  title: string;
+  description: string;
+  /** If provided, shows an icon instead of number */
+  icon?: IconProp | undefined;
+  /** Color for the step indicator */
+  color?: Color | undefined;
+}
+
+export interface ComponentProps {
+  steps: NumberedStep[];
+  /** Default color for steps */
+  defaultColor?: Color | undefined;
+}
+
+const NumberedSteps: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const defaultColor: Color = props.defaultColor || new Color("#6b7280"); // gray-500
+
+  return (
+    <div className="relative">
+      {props.steps.map((step: NumberedStep, index: number) => {
+        const color: Color = step.color || defaultColor;
+        const isLast: boolean = index === props.steps.length - 1;
+
+        return (
+          <div key={index} className="relative flex items-start pb-5 last:pb-0">
+            {/* Vertical line connecting steps */}
+            {!isLast && (
+              <div
+                className="absolute left-4 top-10 w-px bg-gray-200"
+                style={{ height: "calc(100% - 1.5rem)" }}
+              />
+            )}
+
+            {/* Number/Icon indicator */}
+            <div
+              className="relative flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center border-2 bg-white"
+              style={{ borderColor: color.toString() }}
+            >
+              {step.icon ? (
+                <Icon
+                  icon={step.icon}
+                  className="h-4 w-4"
+                  style={{ color: color.toString() }}
+                />
+              ) : (
+                <span
+                  className="text-sm font-medium"
+                  style={{ color: color.toString() }}
+                >
+                  {index + 1}
+                </span>
+              )}
+            </div>
+
+            {/* Content */}
+            <div className="ml-4 flex-1 pt-0.5">
+              <h4 className="text-sm font-medium text-gray-900">
+                {step.title}
+              </h4>
+              <p className="text-sm text-gray-500 mt-0.5">{step.description}</p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default NumberedSteps;

package/UI/Components/Diagram/VerticalFlowSteps.tsx

@@ -0,0 +1,59 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import Color from "../../../Types/Color";
+
+export interface FlowStep {
+  title: string;
+  description: string;
+  icon: IconProp;
+  iconColor: Color;
+}
+
+export interface ComponentProps {
+  steps: FlowStep[];
+}
+
+const VerticalFlowSteps: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  return (
+    <div className="relative">
+      {props.steps.map((step: FlowStep, index: number) => {
+        const isLast: boolean = index === props.steps.length - 1;
+
+        return (
+          <div key={index} className="relative flex items-start pb-6 last:pb-0">
+            {/* Vertical line connecting steps */}
+            {!isLast && (
+              <div
+                className="absolute left-4 top-10 w-px bg-gray-200"
+                style={{ height: "calc(100% - 1rem)" }}
+              />
+            )}
+
+            {/* Icon */}
+            <div
+              className="relative flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center border border-gray-200 bg-white"
+              style={{ borderColor: `${step.iconColor.toString()}40` }}
+            >
+              <Icon
+                icon={step.icon}
+                className="h-4 w-4"
+                style={{ color: step.iconColor.toString() }}
+              />
+            </div>
+
+            {/* Content */}
+            <div className="ml-4 flex-1">
+              <p className="text-sm font-medium text-gray-900">{step.title}</p>
+              <p className="text-sm text-gray-500 mt-0.5">{step.description}</p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default VerticalFlowSteps;

package/UI/Components/Icon/Icon.tsx

@@ -978,6 +978,16 @@ const Icon: FunctionComponent<ComponentProps> = ({
         d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"
       />,
     );
+  } else if (icon === IconProp.IncomingCall) {
+    return getSvgWrapper(
+      <>
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M14.25 9.75v-4.5m0 4.5h4.5m-4.5 0l6-6m-3 18c-8.284 0-15-6.716-15-15V4.5A2.25 2.25 0 014.5 2.25h1.372c.516 0 .966.351 1.091.852l1.106 4.423c.11.44-.054.902-.417 1.173l-1.293.97a1.062 1.062 0 00-.38 1.21 12.035 12.035 0 007.143 7.143c.441.162.928-.004 1.21-.38l.97-1.293a1.125 1.125 0 011.173-.417l4.423 1.106c.5.125.852.575.852 1.091V19.5a2.25 2.25 0 01-2.25 2.25h-2.25z"
+        />
+      </>,
+    );
   } else if (icon === IconProp.More) {
     return getSvgWrapper(
       <path

package/UI/Components/SimpleLogViewer/SimpleLogViewer.tsx

@@ -2,14 +2,98 @@ import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
   children: ReactElement | string | Array<ReactElement>;
+  showLineNumbers?: boolean | undefined;
+  height?: string | undefined;
+  title?: string | undefined;
 }
 
 const SimpleLogViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const showLineNumbers: boolean = props.showLineNumbers !== false;
+  const height: string = props.height || "400px";
+  const title: string | undefined = props.title;
+
+  const renderContent: () => ReactElement = (): ReactElement => {
+    if (typeof props.children === "string") {
+      const lines: Array<string> = props.children.split("\n");
+      return (
+        <>
+          {lines.map((line: string, index: number) => {
+            return (
+              <div
+                key={index}
+                className="flex hover:bg-slate-800/50 transition-colors"
+              >
+                {showLineNumbers && (
+                  <span className="select-none text-slate-600 text-right pr-4 w-12 flex-shrink-0 border-r border-slate-800 mr-4">
+                    {index + 1}
+                  </span>
+                )}
+                <span className="text-slate-300 whitespace-pre-wrap break-all flex-1">
+                  {line || " "}
+                </span>
+              </div>
+            );
+          })}
+        </>
+      );
+    }
+
+    if (Array.isArray(props.children)) {
+      return (
+        <>
+          {props.children.map(
+            (child: ReactElement, index: number): ReactElement => {
+              return (
+                <div
+                  key={index}
+                  className="flex hover:bg-slate-800/50 transition-colors"
+                >
+                  {showLineNumbers && (
+                    <span className="select-none text-slate-600 text-right pr-4 w-12 flex-shrink-0 border-r border-slate-800 mr-4">
+                      {index + 1}
+                    </span>
+                  )}
+                  <span className="text-slate-300 whitespace-pre-wrap break-all flex-1">
+                    {child}
+                  </span>
+                </div>
+              );
+            },
+          )}
+        </>
+      );
+    }
+
+    return (
+      <div className="text-slate-300 whitespace-pre-wrap break-all">
+        {props.children}
+      </div>
+    );
+  };
+
+  const scrollbarStyles: React.CSSProperties = {
+    maxHeight: height,
+    scrollbarWidth: "thin",
+    scrollbarColor: "#475569 #1e293b",
+  };
+
   return (
-    <div className="text-gray-500 mt-5 text-sm h-96 overflow-y-auto overflow-x-hidden p-5 border-gray-50 border border-2 bg-gray-100 rounded">
-      {props.children}
+    <div className="rounded-lg overflow-hidden border border-slate-700 bg-slate-900 shadow-lg">
+      {/* Title Header */}
+      {title && (
+        <div className="px-4 py-3 border-b border-slate-700 bg-slate-800">
+          <h3 className="text-sm font-medium text-slate-200">{title}</h3>
+        </div>
+      )}
+      {/* Log Content */}
+      <div
+        className="overflow-auto font-mono text-sm leading-6 p-4 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-slate-800 [&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:hover:bg-slate-500"
+        style={scrollbarStyles}
+      >
+        {renderContent()}
+      </div>
     </div>
   );
 };