@wealthx/shadcn 1.5.12 → 1.5.13

package/dist/components/ui/resource-center.mjs

@@ -1,24 +0,0 @@
-import {
-  ResourceCarousel,
-  ResourceCenterHeader,
-  ResourceDocumentCard,
-  ResourceEmailTemplateCard,
-  ResourceModal,
-  ResourceVideoCard
-} from "../../chunk-XYWEGBAA.mjs";
-import "../../chunk-LI2CTS5O.mjs";
-import "../../chunk-X6RC5UWB.mjs";
-import "../../chunk-XYSRRDBH.mjs";
-import "../../chunk-FRCTOAKZ.mjs";
-import "../../chunk-NOOEKOWY.mjs";
-import "../../chunk-R4HCRDU5.mjs";
-import "../../chunk-AFML43VJ.mjs";
-import "../../chunk-WNQUEZJF.mjs";
-export {
-  ResourceCarousel,
-  ResourceCenterHeader,
-  ResourceDocumentCard,
-  ResourceEmailTemplateCard,
-  ResourceModal,
-  ResourceVideoCard
-};

package/src/components/ui/resource-center.tsx

@@ -1,539 +0,0 @@
-import React, { useRef, useState } from "react";
-import { ChevronLeft, ChevronRight, Download, Play } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-
-/**
- * Resource Center — WealthX Backoffice
- *
- * Full-page resource hub with video cards, email template cards, document cards,
- * a hero header, and a generic carousel container.
- *
- * Component hierarchy:
- *   Atom     → (no separate atoms — primitives inlined per co-located pattern)
- *   Molecule → ResourceVideoCard, ResourceEmailTemplateCard, ResourceDocumentCard
- *   Organism → ResourceModal, ResourceCarousel, ResourceCenterHeader
- *   Template → (composed by consumers)
- */
-
-// ---------------------------------------------------------------------------
-// ResourceModal
-// ---------------------------------------------------------------------------
-
-export interface ResourceModalAttachment {
-  name: string;
-  url: string;
-  type?: string;
-}
-
-export interface ResourceModalProps {
-  open: boolean;
-  onClose: () => void;
-  title: string;
-  videoUrl?: string;
-  tags?: string[];
-  attachments?: ResourceModalAttachment[];
-}
-
-export function ResourceModal({
-  open,
-  onClose,
-  title,
-  videoUrl,
-  tags,
-  attachments,
-}: ResourceModalProps) {
-  return (
-    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
-      <DialogContent
-        size="2xl"
-        className="flex flex-col gap-4 p-0 overflow-hidden"
-      >
-        <DialogHeader className="px-6 pt-6 pb-0">
-          <DialogTitle className="text-lg font-semibold">{title}</DialogTitle>
-          {tags && tags.length > 0 && (
-            <div className="flex flex-wrap gap-1.5 pt-1">
-              {tags.map((tag) => (
-                <Badge key={tag} variant="secondary" className="text-xs">
-                  {tag}
-                </Badge>
-              ))}
-            </div>
-          )}
-        </DialogHeader>
-
-        {videoUrl && (
-          <div className="aspect-video w-full bg-foreground">
-            <iframe
-              src={videoUrl}
-              title={title}
-              className="h-full w-full"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
-            />
-          </div>
-        )}
-
-        {attachments && attachments.length > 0 && (
-          <div className="flex flex-col gap-2 px-6 pb-6">
-            <p className="text-sm font-medium text-foreground">Attachments</p>
-            <div className="flex flex-col gap-1">
-              {attachments.map((attachment, i) => (
-                <a
-                  key={i}
-                  href={attachment.url}
-                  download
-                  className="flex items-center gap-2 text-sm text-primary hover:underline"
-                >
-                  <Download className="size-3.5 shrink-0" />
-                  {attachment.name}
-                </a>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {(!attachments || attachments.length === 0) && <div className="pb-2" />}
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// ResourceVideoCard
-// ---------------------------------------------------------------------------
-
-export interface ResourceVideoItem {
-  id: string;
-  title: string;
-  thumbnailUrl?: string;
-  videoUrl?: string;
-  duration?: string;
-  tags?: string[];
-  attachments?: ResourceModalAttachment[];
-}
-
-export interface ResourceVideoCardProps {
-  video: ResourceVideoItem;
-}
-
-export function ResourceVideoCard({ video }: ResourceVideoCardProps) {
-  const [modalOpen, setModalOpen] = useState(false);
-
-  return (
-    <>
-      <button
-        type="button"
-        onClick={() => setModalOpen(true)}
-        className="group relative flex w-full flex-col gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        {/* Thumbnail */}
-        <div className="relative w-full overflow-hidden bg-muted aspect-video">
-          {video.thumbnailUrl ? (
-            <img
-              src={video.thumbnailUrl}
-              alt={video.title}
-              className="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
-            />
-          ) : (
-            <div className="flex h-full w-full items-center justify-center">
-              <Play className="size-10 text-muted-foreground opacity-40" />
-            </div>
-          )}
-
-          {/* Play overlay on hover */}
-          <div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-            <div className="flex size-12 items-center justify-center bg-background/90">
-              <Play className="size-5 text-foreground" />
-            </div>
-          </div>
-
-          {/* Duration badge */}
-          {video.duration && (
-            <span className="absolute bottom-2 right-2 bg-black/70 px-1.5 py-0.5 text-xs font-medium text-white">
-              {video.duration}
-            </span>
-          )}
-        </div>
-
-        {/* Title */}
-        <p className="text-sm font-medium text-foreground leading-snug line-clamp-2 group-hover:text-primary">
-          {video.title}
-        </p>
-      </button>
-
-      <ResourceModal
-        open={modalOpen}
-        onClose={() => setModalOpen(false)}
-        title={video.title}
-        videoUrl={video.videoUrl}
-        tags={video.tags}
-        attachments={video.attachments}
-      />
-    </>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// ResourceEmailTemplateCard
-// ---------------------------------------------------------------------------
-
-export interface ResourceEmailTemplateItem {
-  id: string;
-  title: string;
-  htmlContent?: string;
-  type?: "system" | "company";
-  isAddTemplate?: boolean;
-}
-
-export interface ResourceEmailTemplateCardProps {
-  template: ResourceEmailTemplateItem;
-  onClick?: () => void;
-}
-
-export function ResourceEmailTemplateCard({
-  template,
-  onClick,
-}: ResourceEmailTemplateCardProps) {
-  if (template.isAddTemplate) {
-    return (
-      <button
-        type="button"
-        onClick={onClick}
-        className={cn(
-          "flex w-full flex-col items-center justify-center gap-3",
-          "border-2 border-dashed border-border bg-muted/40",
-          "aspect-[3/4] hover:border-primary hover:bg-muted/70 transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        )}
-      >
-        <div className="flex size-10 items-center justify-center border-2 border-dashed border-muted-foreground/40">
-          <span className="text-2xl text-muted-foreground/60">+</span>
-        </div>
-        <p className="text-sm font-medium text-muted-foreground">
-          Add Template
-        </p>
-      </button>
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="group relative flex w-full flex-col gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-    >
-      {/* Preview area */}
-      <div className="relative w-full overflow-hidden border border-border bg-background aspect-[3/4]">
-        {template.htmlContent ? (
-          <iframe
-            srcDoc={template.htmlContent}
-            title={template.title}
-            className="h-full w-full pointer-events-none"
-            style={{
-              transform: "scale(0.5)",
-              transformOrigin: "top left",
-              width: "200%",
-              height: "200%",
-            }}
-            sandbox="allow-same-origin"
-          />
-        ) : (
-          <div className="flex h-full w-full items-center justify-center bg-muted">
-            <p className="text-xs text-muted-foreground">
-              No preview available
-            </p>
-          </div>
-        )}
-
-        {/* Hover overlay */}
-        <div className="absolute inset-0 flex items-center justify-center bg-foreground/60 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-          <span className="text-sm font-medium text-white">Use Template</span>
-        </div>
-      </div>
-
-      {/* Meta */}
-      <div className="flex items-center justify-between gap-2">
-        <p className="text-sm font-medium text-foreground leading-snug line-clamp-1">
-          {template.title}
-        </p>
-        {template.type && (
-          <Badge variant="secondary" className="shrink-0 text-xs">
-            {template.type === "system" ? "System" : "Company"}
-          </Badge>
-        )}
-      </div>
-    </button>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// ResourceDocumentCard
-// ---------------------------------------------------------------------------
-
-export interface ResourceDocumentItem {
-  id: string;
-  title: string;
-  thumbnailUrl?: string;
-  tags?: string[];
-  downloadUrl?: string;
-  pdfUrl?: string;
-}
-
-export interface ResourceDocumentCardProps {
-  document: ResourceDocumentItem;
-  onClick?: () => void;
-}
-
-export function ResourceDocumentCard({
-  document,
-  onClick,
-}: ResourceDocumentCardProps) {
-  return (
-    <div className="flex w-full flex-col gap-2">
-      {/* PDF preview */}
-      <button
-        type="button"
-        onClick={onClick}
-        className="group relative w-full overflow-hidden border border-border bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aspect-[3/4]"
-      >
-        {document.pdfUrl ? (
-          <iframe
-            src={document.pdfUrl}
-            title={document.title}
-            className="h-full w-full pointer-events-none"
-          />
-        ) : document.thumbnailUrl ? (
-          <img
-            src={document.thumbnailUrl}
-            alt={document.title}
-            className="h-full w-full object-cover"
-          />
-        ) : (
-          <div className="flex h-full w-full flex-col items-center justify-center gap-2">
-            <div className="flex items-center justify-center bg-muted-foreground/10 p-4">
-              <Download className="size-8 text-muted-foreground opacity-50" />
-            </div>
-            <span className="text-xs text-muted-foreground">
-              {document.title}
-            </span>
-          </div>
-        )}
-
-        <div className="absolute inset-0 bg-foreground/40 opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
-      </button>
-
-      {/* Footer: tags + download */}
-      <div className="flex items-center justify-between gap-2">
-        <div className="flex flex-col gap-1 min-w-0">
-          <p className="text-sm font-medium text-foreground leading-snug line-clamp-1">
-            {document.title}
-          </p>
-          {document.tags && document.tags.length > 0 && (
-            <div className="flex flex-wrap gap-1">
-              {document.tags.map((tag) => (
-                <Badge key={tag} variant="secondary" className="text-xs">
-                  {tag}
-                </Badge>
-              ))}
-            </div>
-          )}
-        </div>
-        {document.downloadUrl && (
-          <a
-            href={document.downloadUrl}
-            download
-            onClick={(e) => e.stopPropagation()}
-            className="shrink-0"
-            aria-label={`Download ${document.title}`}
-          >
-            <Button variant="outline" size="icon" className="size-8">
-              <Download className="size-4" />
-            </Button>
-          </a>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// ResourceCarousel
-// ---------------------------------------------------------------------------
-
-export interface ResourceCarouselProps {
-  title?: React.ReactNode;
-  items: React.ReactNode[];
-  headerAction?: React.ReactNode;
-  className?: string;
-}
-
-export function ResourceCarousel({
-  title,
-  items,
-  headerAction,
-  className,
-}: ResourceCarouselProps) {
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  function scrollLeft() {
-    scrollRef.current?.scrollBy({ left: -300, behavior: "smooth" });
-  }
-
-  function scrollRight() {
-    scrollRef.current?.scrollBy({ left: 300, behavior: "smooth" });
-  }
-
-  return (
-    <div className={cn("flex flex-col gap-4", className)}>
-      {/* Header row */}
-      {(title || headerAction) && (
-        <div className="flex items-center justify-between gap-4">
-          {title && (
-            <h2 className="text-lg font-semibold text-foreground">{title}</h2>
-          )}
-          {headerAction && <div className="shrink-0">{headerAction}</div>}
-        </div>
-      )}
-
-      {/* Carousel track with hover-reveal arrows */}
-      {items.length === 0 ? (
-        <p className="py-8 text-center text-sm text-muted-foreground">
-          No items available
-        </p>
-      ) : (
-        <div className="group relative">
-          {/* Prev arrow */}
-          <button
-            type="button"
-            onClick={scrollLeft}
-            aria-label="Scroll left"
-            className={cn(
-              "absolute left-0 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
-              "flex size-9 items-center justify-center",
-              "border border-border bg-background shadow-sm",
-              "opacity-0 transition-opacity duration-200 group-hover:opacity-100",
-              "hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            )}
-          >
-            <ChevronLeft className="size-4 text-foreground" />
-          </button>
-
-          {/* Scroll container */}
-          <div
-            ref={scrollRef}
-            className="flex gap-4 overflow-x-auto scroll-smooth pb-2"
-            style={{ scrollbarWidth: "none" }}
-          >
-            {items.map((item, i) => (
-              <div key={i} className="w-[220px] shrink-0">
-                {item}
-              </div>
-            ))}
-          </div>
-
-          {/* Next arrow */}
-          <button
-            type="button"
-            onClick={scrollRight}
-            aria-label="Scroll right"
-            className={cn(
-              "absolute right-0 top-1/2 z-10 translate-x-1/2 -translate-y-1/2",
-              "flex size-9 items-center justify-center",
-              "border border-border bg-background shadow-sm",
-              "opacity-0 transition-opacity duration-200 group-hover:opacity-100",
-              "hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            )}
-          >
-            <ChevronRight className="size-4 text-foreground" />
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// ResourceCenterHeader
-// ---------------------------------------------------------------------------
-
-export interface ResourceCenterHeaderProps {
-  title: string;
-  description: string;
-  backgroundVideoUrl?: string;
-  watchVideoUrl?: string;
-}
-
-export function ResourceCenterHeader({
-  title,
-  description,
-  backgroundVideoUrl,
-  watchVideoUrl,
-}: ResourceCenterHeaderProps) {
-  const [watchModalOpen, setWatchModalOpen] = useState(false);
-
-  return (
-    <>
-      <div
-        className={cn(
-          "relative flex min-h-[400px] w-full items-center overflow-hidden bg-foreground",
-        )}
-      >
-        {/* Background video */}
-        {backgroundVideoUrl ? (
-          <video
-            className="absolute inset-0 h-full w-full object-cover opacity-60 z-[1]"
-            src={backgroundVideoUrl}
-            autoPlay
-            muted
-            loop
-            playsInline
-          />
-        ) : (
-          <div className="absolute inset-0 bg-foreground z-[1]" />
-        )}
-
-        {/* Overlay tint for legibility */}
-        <div className="absolute inset-0 bg-black/40 z-[1]" />
-
-        {/* Content */}
-        <div className="relative z-[2] flex flex-col gap-4 px-8 py-12 md:px-16 max-w-3xl">
-          <h1 className="text-3xl font-bold text-background md:text-4xl">
-            {title}
-          </h1>
-          <p className="text-base text-background/80 leading-relaxed">
-            {description}
-          </p>
-          {watchVideoUrl && (
-            <div className="pt-2">
-              <Button
-                variant="outline"
-                className="border-background text-background bg-transparent hover:bg-background/10 hover:text-background"
-                onClick={() => setWatchModalOpen(true)}
-              >
-                <Play className="mr-2 size-4" />
-                Watch Now
-              </Button>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {watchVideoUrl && (
-        <ResourceModal
-          open={watchModalOpen}
-          onClose={() => setWatchModalOpen(false)}
-          title={title}
-          videoUrl={watchVideoUrl}
-        />
-      )}
-    </>
-  );
-}