@syscore/ui-library 1.1.8 → 1.1.10

package/client/components/ui/SearchField.tsx

@@ -0,0 +1,157 @@
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+  CommandInput,
+  CommandEmpty,
+} from "@/components/ui/command";
+import { Command as CommandPrimitive } from "cmdk";
+import { useState, useRef, useCallback, type KeyboardEvent } from "react";
+
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type Option = Record<"value" | "label", string> & Record<string, string>;
+
+type SearchFieldProps = {
+  options: Option[];
+  emptyMessage: string;
+  value?: Option;
+  onValueChange?: (value: Option) => void;
+  isLoading?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+};
+
+export const SearchField = ({
+  options,
+  placeholder,
+  emptyMessage,
+  value,
+  onValueChange,
+  disabled,
+  isLoading = false,
+}: SearchFieldProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [isOpen, setOpen] = useState(false);
+  const [selected, setSelected] = useState<Option>(value as Option);
+  const [inputValue, setInputValue] = useState<string>(value?.label || "");
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+
+      // Keep the options displayed when the user is typing
+      if (!isOpen) {
+        setOpen(true);
+      }
+
+      // This is not a default behaviour of the <input /> field
+      if (event.key === "Enter" && input.value !== "") {
+        const optionToSelect = options.find(
+          (option) => option.label === input.value,
+        );
+        if (optionToSelect) {
+          setSelected(optionToSelect);
+          onValueChange?.(optionToSelect);
+        }
+      }
+
+      if (event.key === "Escape") {
+        input.blur();
+      }
+    },
+    [isOpen, options, onValueChange],
+  );
+
+  const handleBlur = useCallback(() => {
+    setOpen(false);
+    setInputValue(selected?.label);
+  }, [selected]);
+
+  const handleSelectOption = useCallback(
+    (selectedOption: Option) => {
+      setInputValue(selectedOption.label);
+
+      setSelected(selectedOption);
+      onValueChange?.(selectedOption);
+
+      // This is a hack to prevent the input from being focused after the user selects an option
+      // We can call this hack: "The next tick"
+      setTimeout(() => {
+        inputRef?.current?.blur();
+      }, 0);
+    },
+    [onValueChange],
+  );
+
+  return (
+    <CommandPrimitive onKeyDown={handleKeyDown}>
+      <div>
+        <CommandInput
+          ref={inputRef}
+          value={inputValue}
+          onValueChange={isLoading ? undefined : setInputValue}
+          onBlur={handleBlur}
+          onFocus={() => setOpen(true)}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={cn(
+            "focus-within:border-cyan-300 focus:border-cyan-300",
+            isOpen && "rounded-b-none",
+          )}
+        />
+      </div>
+      <div className="relative">
+        <div
+          className={cn(
+            "animate-in fade-in-0 absolute top-0 z-10 w-full rounded-xl bg-white outline-none",
+            isOpen ? "block" : "hidden",
+          )}
+        >
+          <CommandList className="border-b border-x border-cyan-300">
+            {/* {isLoading ? (
+              <Skeleton>
+                <div className="p-1">
+                </div>
+              </Skeleton>
+            ) : null} */}
+
+            {options?.length > 0 && !isLoading ? (
+              <CommandGroup>
+                {options.map((option) => {
+                  const isSelected = selected?.value === option.value;
+                  return (
+                    <CommandItem
+                      key={option.value}
+                      value={option.label}
+                      onMouseDown={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                      }}
+                      onSelect={() => handleSelectOption(option)}
+                    >
+                      {isSelected ? <Check className="w-4" /> : null}
+                      {option.label}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            ) : null}
+
+            {!isLoading ? (
+              <CommandEmpty className="select-none rounded-sm px-2 py-3 text-center text-sm text-gray-200">
+                {emptyMessage}
+              </CommandEmpty>
+            ) : null}
+          </CommandList>
+        </div>
+      </div>
+    </CommandPrimitive>
+  );
+};

package/client/components/ui/StrategyTable.tsx

@@ -0,0 +1,303 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { UtilityChevronDown } from "../icons/UtilityChevronDown";
+
+// Define the concept colors matching Figma design
+export const conceptColors = {
+  mind: {
+    solid: "#0a5161",
+    light: "rgba(10,81,97,0.08)",
+    border: "rgba(10,81,97,0.16)",
+    prefix: "M",
+  },
+  community: {
+    solid: "#0f748a",
+    light: "rgba(15,116,138,0.12)",
+    border: "rgba(15,116,138,0.24)",
+    prefix: "C",
+  },
+  movement: {
+    solid: "#149ebd",
+    light: "rgba(20,158,189,0.12)",
+    border: "rgba(20,158,189,0.24)",
+    prefix: "V",
+  },
+  water: {
+    solid: "#39c9ea",
+    light: "rgba(57,201,234,0.12)",
+    border: "rgba(57,201,234,0.24)",
+    prefix: "W",
+  },
+  air: {
+    solid: "#87dff2",
+    light: "rgba(135,223,242,0.12)",
+    border: "rgba(135,223,242,0.24)",
+    prefix: "A",
+  },
+  light: {
+    solid: "#8aefdb",
+    light: "rgba(138,239,219,0.12)",
+    border: "rgba(138,239,219,0.24)",
+    prefix: "L",
+  },
+  thermalComfort: {
+    solid: "#3eddbf",
+    light: "rgba(62,221,191,0.12)",
+    border: "rgba(62,221,191,0.24)",
+    prefix: "T",
+  },
+  nourishment: {
+    solid: "#17aa8d",
+    light: "rgba(23,170,141,0.12)",
+    border: "rgba(23,170,141,0.24)",
+    prefix: "N",
+  },
+  sound: {
+    solid: "#0c705c",
+    light: "rgba(12,112,92,0.12)",
+    border: "rgba(12,112,92,0.24)",
+    prefix: "S",
+  },
+  materials: {
+    solid: "#0a4f41",
+    light: "rgba(10,79,65,0.08)",
+    border: "rgba(10,79,65,0.16)",
+    prefix: "X",
+  },
+} as const;
+
+export type ConceptType = keyof typeof conceptColors;
+
+export interface StrategyItem {
+  id: string;
+  code: string;
+  name: string;
+  score?: string;
+  hasTarget?: boolean;
+}
+
+export interface ThemeItem {
+  id: string;
+  code: string;
+  name: string;
+}
+
+export interface ConceptItem {
+  id: string;
+  type: ConceptType;
+  name: string;
+  icon: React.ReactNode;
+}
+
+export interface StrategyTableData {
+  concept: ConceptItem;
+  theme: ThemeItem;
+  strategies: StrategyItem[];
+}
+
+interface StrategyTableRowProps {
+  data: StrategyTableData;
+  isFirst?: boolean;
+  isLast?: boolean;
+  showConceptHeader?: boolean;
+  isExpanded?: boolean;
+}
+
+const StrategyTableRow: React.FC<StrategyTableRowProps> = ({
+  data,
+  isFirst = false,
+  isLast = false,
+  showConceptHeader = true,
+  isExpanded = true,
+}) => {
+  const { concept, theme, strategies } = data;
+  const colors = conceptColors[concept.type];
+
+  return (
+    <>
+      {/* Concept Row - always visible when showConceptHeader is true */}
+      {showConceptHeader && (
+        <div
+          className={cn(
+            "flex items-center gap-4 p-4 border border-[#DEDFE3] bg-[#FAFEFF]",
+            "border-b-0",
+            isFirst && "rounded-tl-[12px] rounded-tr-[12px]"
+          )}
+        >
+          {/* Icon */}
+          <div className="size-[48px] flex items-center justify-center shrink-0">
+            {concept.icon}
+          </div>
+
+          {/* Name */}
+          <div className="flex-1">
+            <span className="text-sm font-semibold text-[#282A31] uppercase tracking-[0.5px] leading-[14px]">
+              {concept.name}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Theme Row - only show if expanded */}
+      {isExpanded && (
+        <div className="flex items-center gap-4 p-4 border border-[#DEDFE3] bg-[#FAFEFF] border-b-0">
+          {/* Code Badge */}
+          <div
+            className="flex items-center justify-center h-8 w-12 rounded-[6px] shrink-0"
+            style={{ backgroundColor: colors.solid }}
+          >
+            <span className="text-sm font-semibold text-white leading-[19.6px]">
+              {theme.code}
+            </span>
+          </div>
+
+          {/* Name */}
+          <div className="flex-1">
+            <span className="text-base font-medium text-[#282A31] leading-[21px]">
+              {theme.name}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Strategy Rows - only show if expanded */}
+      {isExpanded && strategies.map((strategy, index) => {
+          const isLastStrategy = index === strategies.length - 1 && isLast;
+          const scoreParts = strategy.score?.split("–") || [];
+          const isRange = scoreParts.length > 1;
+          
+          return (
+            <div
+              key={strategy.id}
+              className={cn(
+                "flex items-center gap-4 pl-8 pr-4 py-4 border border-[#DEDFE3] bg-white",
+                "border-b-0",
+                isLastStrategy && "rounded-bl-[12px] rounded-br-[12px] border-b-0"
+              )}
+            >
+              {/* Code Badge */}
+              <div
+                className="flex items-center justify-center h-8 w-12 rounded-[6px] border shrink-0"
+                style={{
+                  backgroundColor: colors.light,
+                  borderColor: colors.border,
+                }}
+              >
+                <span
+                  className="text-sm font-semibold leading-[19.6px]"
+                  style={{ color: colors.solid }}
+                >
+                  {strategy.code}
+                </span>
+              </div>
+
+              {/* Name */}
+              <div className="flex-1">
+                <span className="text-base font-medium text-[#282A31] leading-[21px]">
+                  {strategy.name}
+                </span>
+              </div>
+
+              {/* Actions */}
+              <div className="flex items-center gap-4 shrink-0">
+                {strategy.hasTarget && (
+                  <div className="size-8 flex items-center justify-center">
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 14 14"
+                      fill="none"
+                      className="text-gray-400"
+                    >
+                      <circle
+                        cx="7"
+                        cy="7"
+                        r="6.25"
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                      />
+                      <circle
+                        cx="7"
+                        cy="7"
+                        r="3.5"
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                      />
+                      <circle cx="7" cy="7" r="1" fill="currentColor" />
+                    </svg>
+                  </div>
+                )}
+
+                {strategy.score && (
+                  <div className="flex items-end gap-[4px]">
+                    <span className="text-lg font-semibold text-[#282A31] leading-[25.2px]">
+                      {strategy.score}
+                    </span>
+                    <span className="text-xs font-semibold text-[#282A31] uppercase tracking-[0.5px] leading-[12px]">
+                      {isRange ? "PTS" : "PT"}
+                      {!isRange && <span className="text-transparent">S</span>}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+    </>
+  );
+};
+
+interface StrategyTableProps {
+  data: StrategyTableData[];
+  className?: string;
+  isExpanded?: boolean;
+}
+
+export const StrategyTable: React.FC<StrategyTableProps> = ({
+  data,
+  className,
+  isExpanded = true,
+}) => {
+  // Group by concept to avoid duplicate concept headers
+  const groupedData = React.useMemo(() => {
+    const groups: Record<string, StrategyTableData[]> = {};
+    data.forEach((item) => {
+      const key = item.concept.id;
+      if (!groups[key]) {
+        groups[key] = [];
+      }
+      groups[key].push(item);
+    });
+    return Object.values(groups);
+  }, [data]);
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      {groupedData.map((group, groupIndex) => {
+        const isFirstGroup = groupIndex === 0;
+        const isLastGroup = groupIndex === groupedData.length - 1;
+        
+        return group.map((item, itemIndex) => {
+          const isFirst = isFirstGroup && itemIndex === 0;
+          const isLastItemInGroup = itemIndex === group.length - 1;
+          // Check if this is the very last strategy row across all groups
+          const isLastStrategyRow = isLastGroup && isLastItemInGroup && item.strategies.length > 0;
+          const showConceptHeader = itemIndex === 0; // Only show concept header for first theme
+          const uniqueId = `${item.concept.id}-${item.theme.id}`;
+          
+          return (
+            <StrategyTableRow
+              key={uniqueId}
+              data={item}
+              isFirst={isFirst}
+              isLast={isLastStrategyRow}
+              showConceptHeader={showConceptHeader}
+              isExpanded={isExpanded}
+            />
+          );
+        });
+      })}
+    </div>
+  );
+};
+

package/client/components/ui/Tag.tsx

@@ -0,0 +1,127 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type TagStatus = "todo" | "low" | "medium" | "high" | "done";
+
+export interface TagProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  active?: boolean;
+  status?: TagStatus;
+  variant?: "light" | "dark";
+  onClick?: () => void;
+}
+
+const getStatusColors = (
+  status: TagStatus,
+  variant: "light" | "dark" = "light",
+) => {
+  const colors = {
+    light: {
+      todo: {
+        bg: "bg-gray-100",
+        text: "text-gray-600",
+      },
+      low: {
+        bg: "bg-cyan-100",
+        text: "text-cyan-600",
+      },
+      medium: {
+        bg: "bg-plum-100",
+        text: "text-plum-600",
+      },
+      high: {
+        bg: "bg-coral-100",
+        text: "text-coral-600",
+      },
+      done: {
+        bg: "bg-emerald-100",
+        text: "text-emerald-600",
+      },
+    },
+    dark: {
+      todo: {
+        bg: "bg-gray-600",
+        text: "text-gray-100",
+      },
+      low: {
+        bg: "bg-cyan-700",
+        text: "text-cyan-100",
+      },
+      medium: {
+        bg: "bg-plum-700",
+        text: "text-plum-100",
+      },
+      high: {
+        bg: "bg-coral-700",
+        text: "text-coral-100",
+      },
+      done: {
+        bg: "bg-emerald-700",
+        text: "text-emerald-100",
+      },
+    },
+  };
+
+  return colors[variant][status];
+};
+
+export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
+  (
+    {
+      children,
+      active = false,
+      status,
+      variant = "light",
+      className,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    // Status tag styling
+    if (status) {
+      const statusColors = getStatusColors(status, variant);
+      return (
+        <button
+          ref={ref}
+          onClick={onClick}
+          className={cn(
+            "inline-flex items-center p-[8px] rounded-[6px] w-fit",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            statusColors.bg,
+            statusColors.text,
+            className,
+          )}
+          {...props}
+        >
+          <span className="overline-medium">{children}</span>
+        </button>
+      );
+    }
+
+    // Dual-state general purpose tag styling
+    return (
+      <button
+        ref={ref}
+        onClick={onClick}
+        className={cn(
+          "inline-flex items-center h-[32px] px-[12px] py-0 rounded-[6px] w-fit",
+
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          active
+            ? "bg-white border border-cyan-300 text-gray-800 hover:border-cyan-400"
+            : "bg-blue-100 text-blue-700 hover:bg-blue-200",
+          className,
+        )}
+        {...props}
+      >
+        <span className="body-small font-medium">{children}</span>
+      </button>
+    );
+  },
+);
+
+Tag.displayName = "Tag";

package/client/components/ui/alert-dialog.tsx

@@ -115,7 +115,7 @@ const AlertDialogCancel = React.forwardRef<
   <AlertDialogPrimitive.Cancel
     ref={ref}
     className={cn(
-      buttonVariants({ variant: "outline" }),
+      buttonVariants({ variant: "general-secondary" }),
       "mt-2 sm:mt-0",
       className,
     )}