@syscore/ui-library 1.25.0 → 2.0.0

package/client/components/ui/file-upload.tsx

@@ -0,0 +1,214 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface FileUploadProps {
+  accept?: string;
+  multiple?: boolean;
+  maxSize?: number; // bytes
+  maxFiles?: number;
+  disabled?: boolean;
+  variant?: "default" | "compact";
+  onFilesChange?: (files: File[]) => void;
+  className?: string;
+}
+
+interface FileItem {
+  file: File;
+  id: string;
+  error?: string;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function getFileIcon(type: string): string {
+  if (type.startsWith("image/")) return "🖼";
+  if (type === "application/pdf") return "📄";
+  if (type.includes("spreadsheet") || type.includes("excel") || type.includes("csv")) return "📊";
+  if (type.includes("word") || type.includes("document")) return "📝";
+  if (type.includes("zip") || type.includes("compressed")) return "🗜";
+  return "📎";
+}
+
+const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
+  (
+    {
+      accept,
+      multiple = false,
+      maxSize,
+      maxFiles,
+      disabled = false,
+      variant = "default",
+      onFilesChange,
+      className,
+    },
+    ref,
+  ) => {
+    const [files, setFiles] = React.useState<FileItem[]>([]);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    const validateFile = (file: File): string | undefined => {
+      if (maxSize && file.size > maxSize) {
+        return `File exceeds ${formatBytes(maxSize)} limit`;
+      }
+      return undefined;
+    };
+
+    const addFiles = (incoming: FileList | File[]) => {
+      const incomingArray = Array.from(incoming);
+      const next = multiple ? [...files] : [];
+
+      for (const file of incomingArray) {
+        if (maxFiles && next.filter((f) => !f.error).length >= maxFiles) break;
+        const error = validateFile(file);
+        next.push({ file, id: `${file.name}-${Date.now()}-${Math.random()}`, error });
+      }
+
+      setFiles(next);
+      onFilesChange?.(next.filter((f) => !f.error).map((f) => f.file));
+    };
+
+    const removeFile = (id: string) => {
+      const next = files.filter((f) => f.id !== id);
+      setFiles(next);
+      onFilesChange?.(next.filter((f) => !f.error).map((f) => f.file));
+    };
+
+    const onDragOver = (e: React.DragEvent) => {
+      e.preventDefault();
+      if (!disabled) setIsDragging(true);
+    };
+
+    const onDragLeave = (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragging(false);
+    };
+
+    const onDrop = (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragging(false);
+      if (disabled) return;
+      if (e.dataTransfer.files.length > 0) addFiles(e.dataTransfer.files);
+    };
+
+    const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files && e.target.files.length > 0) {
+        addFiles(e.target.files);
+        e.target.value = "";
+      }
+    };
+
+    const openPicker = () => {
+      if (!disabled) inputRef.current?.click();
+    };
+
+    return (
+      <div ref={ref} className={cn("file-upload", className)}>
+        {/* Drop zone */}
+        <div
+          role="button"
+          tabIndex={disabled ? -1 : 0}
+          aria-label="Upload files"
+          onClick={openPicker}
+          onKeyDown={(e) => e.key === "Enter" && openPicker()}
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={onDrop}
+          className={cn(
+            "file-upload-zone",
+            variant === "compact" && "file-upload-zone--compact",
+            isDragging && "file-upload-zone--dragging",
+            disabled && "file-upload-zone--disabled",
+          )}
+        >
+          <input
+            ref={inputRef}
+            type="file"
+            accept={accept}
+            multiple={multiple}
+            disabled={disabled}
+            onChange={onInputChange}
+            className="file-upload-input"
+            tabIndex={-1}
+          />
+
+          {variant === "compact" ? (
+            <div className="file-upload-compact-inner">
+              <span className="file-upload-icon">↑</span>
+              <span className="file-upload-zone-text">
+                <span className="file-upload-zone-link">Click to upload</span>
+                {" "}or drag and drop
+              </span>
+              {accept && (
+                <span className="file-upload-hint">{accept.split(",").join(", ")}</span>
+              )}
+              {maxSize && (
+                <span className="file-upload-hint">Max {formatBytes(maxSize)}</span>
+              )}
+            </div>
+          ) : (
+            <div className="file-upload-default-inner">
+              <div className="file-upload-icon-circle">
+                <span className="file-upload-icon">↑</span>
+              </div>
+              <div className="file-upload-zone-body">
+                <span className="file-upload-zone-text">
+                  <span className="file-upload-zone-link">Click to upload</span>
+                  {" "}or drag and drop
+                </span>
+                {(accept || maxSize) && (
+                  <span className="file-upload-hint">
+                    {[
+                      accept && accept.split(",").join(", "),
+                      maxSize && `Max ${formatBytes(maxSize)}`,
+                    ]
+                      .filter(Boolean)
+                      .join(" · ")}
+                  </span>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* File list */}
+        {files.length > 0 && (
+          <ul className="file-upload-list">
+            {files.map(({ file, id, error }) => (
+              <li
+                key={id}
+                className={cn("file-upload-item", error && "file-upload-item--error")}
+              >
+                <span className="file-upload-item-icon">{getFileIcon(file.type)}</span>
+                <div className="file-upload-item-info">
+                  <span className="file-upload-item-name">{file.name}</span>
+                  {error ? (
+                    <span className="file-upload-item-error">{error}</span>
+                  ) : (
+                    <span className="file-upload-item-size">{formatBytes(file.size)}</span>
+                  )}
+                </div>
+                <button
+                  type="button"
+                  aria-label={`Remove ${file.name}`}
+                  onClick={(e) => { e.stopPropagation(); removeFile(id); }}
+                  className="file-upload-item-remove"
+                >
+                  ✕
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    );
+  },
+);
+
+FileUpload.displayName = "FileUpload";
+
+export { FileUpload };

package/client/components/ui/footer.tsx

@@ -0,0 +1,179 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+// ─── Footer Root ─────────────────────────────────────────────────────────────
+
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+  /** Adds a top border */
+  bordered?: boolean;
+  /** Rounds the footer corners */
+  rounded?: boolean;
+  /** Elevates with a shadow */
+  elevated?: boolean;
+  /** Background color — any CSS color or var() token */
+  color?: string;
+}
+
+const Footer = React.forwardRef<HTMLElement, FooterProps>(
+  (
+    {
+      className,
+      children,
+      bordered = false,
+      rounded = false,
+      elevated = false,
+      color,
+      style,
+      ...props
+    },
+    ref
+  ) => (
+    <footer
+      ref={ref}
+      style={{ backgroundColor: color, ...style }}
+      className={cn(
+        "footer",
+        bordered && "footer--bordered",
+        rounded && "footer--rounded",
+        elevated && "footer--elevated",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </footer>
+  )
+);
+Footer.displayName = "Footer";
+
+// ─── FooterRow ────────────────────────────────────────────────────────────────
+// A generic horizontal flex row inside the footer.
+
+export interface FooterRowProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const FooterRow = React.forwardRef<HTMLDivElement, FooterRowProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("footer-row", className)} {...props} />
+  )
+);
+FooterRow.displayName = "FooterRow";
+
+// ─── FooterLinks ──────────────────────────────────────────────────────────────
+// Wraps a set of navigation links in a centered, wrapping row.
+
+export interface FooterLinksProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const FooterLinks = React.forwardRef<HTMLDivElement, FooterLinksProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("footer-links", className)} {...props} />
+  )
+);
+FooterLinks.displayName = "FooterLinks";
+
+// ─── FooterLink ───────────────────────────────────────────────────────────────
+
+export interface FooterLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {}
+
+const FooterLink = React.forwardRef<HTMLAnchorElement, FooterLinkProps>(
+  ({ className, ...props }, ref) => (
+    <a ref={ref} className={cn("footer-link", className)} {...props} />
+  )
+);
+FooterLink.displayName = "FooterLink";
+
+// ─── FooterIconButton ─────────────────────────────────────────────────────────
+// Small circular icon button for social links.
+
+export interface FooterIconButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Accessible label — required when button contains only an icon */
+  "aria-label": string;
+}
+
+const FooterIconButton = React.forwardRef<
+  HTMLButtonElement,
+  FooterIconButtonProps
+>(({ className, children, ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    className={cn("footer-icon-btn", className)}
+    {...props}
+  >
+    {children}
+  </button>
+));
+FooterIconButton.displayName = "FooterIconButton";
+
+// ─── FooterDivider ────────────────────────────────────────────────────────────
+
+export interface FooterDividerProps extends React.HTMLAttributes<HTMLHRElement> {
+  /** Width as a CSS value, e.g. "50px" or "50%" */
+  width?: string;
+}
+
+const FooterDivider = React.forwardRef<HTMLHRElement, FooterDividerProps>(
+  ({ className, width, style, ...props }, ref) => (
+    <hr
+      ref={ref}
+      style={{ width, ...style }}
+      className={cn("footer-divider", className)}
+      {...props}
+    />
+  )
+);
+FooterDivider.displayName = "FooterDivider";
+
+// ─── FooterCopyright ──────────────────────────────────────────────────────────
+
+export interface FooterCopyrightProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Company / org name */
+  company?: string;
+  /** Override the year (defaults to current year) */
+  year?: number;
+}
+
+const FooterCopyright = React.forwardRef<HTMLDivElement, FooterCopyrightProps>(
+  (
+    {
+      className,
+      company = "International WELL Building Institute",
+      year,
+      ...props
+    },
+    ref
+  ) => (
+    <div ref={ref} className={cn("footer-copyright", className)} {...props}>
+      {year ?? new Date().getFullYear()} —{" "}
+      <strong>© {company}</strong>
+    </div>
+  )
+);
+FooterCopyright.displayName = "FooterCopyright";
+
+// ─── FooterBand ───────────────────────────────────────────────────────────────
+// A full-width bottom band (used in the teal footer variant).
+
+export interface FooterBandProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const FooterBand = React.forwardRef<HTMLDivElement, FooterBandProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("footer-band", className)} {...props} />
+  )
+);
+FooterBand.displayName = "FooterBand";
+
+// ─── Exports ─────────────────────────────────────────────────────────────────
+
+export {
+  Footer,
+  FooterRow,
+  FooterLinks,
+  FooterLink,
+  FooterIconButton,
+  FooterDivider,
+  FooterCopyright,
+  FooterBand,
+};