@brightweblabs/ui 0.3.0 → 0.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@brightweblabs/ui",
   "private": false,
-  "version": "0.3.0",
+  "version": "0.4.0",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -17,6 +17,8 @@
   },
   "exports": {
     ".": "./src/index.ts",
+    "./activity-format": "./src/lib/activity-format.ts",
+    "./activity-message": "./src/components/activity-message.tsx",
     "./alert-dialog": "./src/components/alert-dialog.tsx",
     "./badge": "./src/components/badge.tsx",
     "./button": "./src/components/button.tsx",
@@ -35,13 +37,13 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "lucide-react": "^0.562.0",
+    "lucide-react": "^0.577.0",
     "next": "16.1.6",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
-    "react": "19.2.3",
+    "react": "19.2.4",
     "react-day-picker": "^9.13.2",
-    "react-dom": "19.2.3",
+    "react-dom": "19.2.4",
     "recharts": "^2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0"

package/src/components/activity-message.tsx

@@ -0,0 +1,24 @@
+import type { MsgSeg } from "../lib/activity-format";
+
+/** Render a composed activity message — actor/entity names semibold, values medium. */
+export function ActivityMessage({ segs }: { segs: MsgSeg[] }) {
+  return (
+    <>
+      {segs.map((seg, index) => {
+        if (typeof seg === "string") return <span key={index}>{seg}</span>;
+        if ("b" in seg) {
+          return (
+            <span key={index} className="font-semibold text-[color:var(--foreground)]">
+              {seg.b}
+            </span>
+          );
+        }
+        return (
+          <span key={index} className="font-medium text-[color:var(--foreground)]">
+            {seg.v}
+          </span>
+        );
+      })}
+    </>
+  );
+}

package/src/components/password-input.tsx

@@ -9,22 +9,24 @@ interface PasswordInputProps extends Omit<React.ComponentProps<"input">, "type">
 }
 
 const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
-  ({ className, showToggle = true, ...props }, ref) => {
+  ({ className, disabled, showToggle = true, ...props }, ref) => {
     const [showPassword, setShowPassword] = React.useState(false);
 
     return (
-      <div className="relative">
+      <div className="relative w-full">
         <Input
           type={showPassword ? "text" : "password"}
-          className={cn("pr-10", className)}
+          className={cn(showToggle && "pr-12", className)}
+          disabled={disabled}
           ref={ref}
           {...props}
         />
         {showToggle && (
           <button
             type="button"
-            onClick={() => setShowPassword(!showPassword)}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground/40 hover:text-foreground/70 transition-colors"
+            onClick={() => setShowPassword((current) => !current)}
+            className="absolute right-2 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center text-foreground/40 transition-colors hover:text-foreground/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:pointer-events-none disabled:opacity-50"
+            disabled={disabled}
             aria-label={showPassword ? "Ocultar palavra-passe" : "Mostrar palavra-passe"}
             tabIndex={-1}
           >

package/src/index.ts

@@ -27,3 +27,12 @@ export * from "./components/sheet";
 export * from "./components/table";
 export { Toaster } from "./components/sonner";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip";
+export { ActivityMessage } from "./components/activity-message";
+export {
+  formatActivityValue,
+  toActivityChanges,
+  type ActivityChange,
+  type ActivityChangesOptions,
+  type ActivityValueOptions,
+  type MsgSeg,
+} from "./lib/activity-format";

package/src/lib/activity-format.ts

@@ -0,0 +1,96 @@
+/**
+ * Framework-free formatting primitives shared by every activity / timeline
+ * surface (notifications bell, project "recent activity" rail, CRM timeline).
+ *
+ * These are language-neutral: all human-readable strings (field labels, the
+ * system fallback, boolean words, the date locale) are injected by the caller
+ * so each app/module supplies its own dictionary. Imports nothing from React —
+ * safe to use in server and client code alike.
+ */
+
+/** A rendered message is plain text + emphasised names ({ b }) + emphasised values ({ v }). */
+export type MsgSeg = string | { b: string } | { v: string };
+
+/** One field-level change, ready to render as "Label: from → to". */
+export type ActivityChange = { key: string; label: string; from: string | null; to: string | null };
+
+export type ActivityValueOptions = {
+  /** Intl locale used to format ISO dates. Defaults to "en". */
+  locale?: string;
+  /** Label for a boolean `true` value. Defaults to "Yes". */
+  trueLabel?: string;
+  /** Label for a boolean `false` value. Defaults to "No". */
+  falseLabel?: string;
+};
+
+export type ActivityChangesOptions = ActivityValueOptions & {
+  /** Map of payload field name → human label. Unmapped fields fall back to the raw key. */
+  fieldLabels?: Record<string, string>;
+  /** Field names whose values are people — an empty one reads as the system, not a blank. */
+  personFields?: Iterable<string>;
+  /** Label used when a person field is explicitly empty. Defaults to "System". */
+  systemLabel?: string;
+};
+
+function looksLikeId(value: string) {
+  return /^[0-9a-f]{8}-[0-9a-f]{4}-/i.test(value);
+}
+
+function isEmpty(value: unknown) {
+  return value === null || value === undefined || value === "";
+}
+
+/** Render a stored change value into something readable, or null when it can't be shown plainly. */
+export function formatActivityValue(value: unknown, options: ActivityValueOptions = {}): string | null {
+  const { locale = "en", trueLabel = "Yes", falseLabel = "No" } = options;
+  if (isEmpty(value)) return null;
+  if (typeof value === "boolean") return value ? trueLabel : falseLabel;
+  if (typeof value === "number") return String(value);
+  if (typeof value !== "string") return null;
+
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  // Profile / entity references come through as raw UUIDs — not worth showing.
+  if (looksLikeId(trimmed)) return null;
+
+  // ISO date / datetime → short localised form.
+  if (/^\d{4}-\d{2}-\d{2}/.test(trimmed)) {
+    const date = new Date(trimmed);
+    if (!Number.isNaN(date.getTime())) {
+      return new Intl.DateTimeFormat(locale, { day: "2-digit", month: "2-digit", year: "numeric" }).format(date);
+    }
+  }
+
+  return trimmed.length > 32 ? `${trimmed.slice(0, 31)}…` : trimmed;
+}
+
+/** Pull the `payload.changes` map ({ field: { from, to } }) into a flat, display-ready list. */
+export function toActivityChanges(
+  payload: Record<string, unknown> | undefined,
+  options: ActivityChangesOptions = {},
+): ActivityChange[] {
+  const { fieldLabels = {}, systemLabel = "System" } = options;
+  const personFields = new Set(options.personFields ?? []);
+  const changesRaw = payload?.changes;
+  if (!changesRaw || typeof changesRaw !== "object" || Array.isArray(changesRaw)) return [];
+
+  return Object.entries(changesRaw as Record<string, unknown>).flatMap(([field, raw]) => {
+    if (!raw || typeof raw !== "object") return [];
+    const { from, to } = raw as { from?: unknown; to?: unknown };
+    const isPerson = personFields.has(field);
+    // People always read as someone: an explicitly empty assignee/owner is the
+    // system. An unresolved id (formats to null) is left blank rather than
+    // wrongly attributed to the system.
+    const resolve = (value: unknown) => {
+      const formatted = formatActivityValue(value, options);
+      if (formatted) return formatted;
+      return isPerson && isEmpty(value) ? systemLabel : null;
+    };
+    return [{
+      key: field,
+      label: fieldLabels[field] ?? field,
+      from: resolve(from),
+      to: resolve(to),
+    }];
+  });
+}