@wakastellar/ui 2.0.0 → 2.1.0

package/src/blocks/profile/index.tsx

@@ -0,0 +1,746 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/card"
+import { Button } from "../../components/button"
+import { Input } from "../../components/input"
+import { Label } from "../../components/label"
+import { Textarea } from "../../components/textarea"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar"
+import { Badge } from "../../components/badge"
+import { Separator } from "../../components/separator"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/tabs"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  User,
+  Mail,
+  Phone,
+  MapPin,
+  Globe,
+  Calendar,
+  Building,
+  Briefcase,
+  Camera,
+  Edit3,
+  Save,
+  X,
+  Loader2,
+  Link as LinkIcon,
+  Twitter,
+  Github,
+  Linkedin,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface ProfileSocialLink {
+  id: string
+  type: "website" | "twitter" | "github" | "linkedin" | "other"
+  url: string
+  label?: string
+}
+
+export interface ProfileField {
+  id: string
+  label: string
+  value: string
+  type?: "text" | "email" | "tel" | "url" | "textarea" | "date" | "select"
+  placeholder?: string
+  options?: { value: string; label: string }[]
+  required?: boolean
+  disabled?: boolean
+  icon?: React.ReactNode
+}
+
+export interface ProfileSection {
+  id: string
+  title: string
+  description?: string
+  icon?: React.ReactNode
+  fields: ProfileField[]
+}
+
+export interface ProfileData {
+  /** Nom d'affichage */
+  displayName: string
+  /** Prénom */
+  firstName?: string
+  /** Nom */
+  lastName?: string
+  /** Email */
+  email: string
+  /** Téléphone */
+  phone?: string
+  /** Bio */
+  bio?: string
+  /** Avatar URL */
+  avatarUrl?: string
+  /** Rôle/Titre */
+  role?: string
+  /** Département */
+  department?: string
+  /** Entreprise */
+  company?: string
+  /** Localisation */
+  location?: string
+  /** Site web */
+  website?: string
+  /** Date d'inscription */
+  joinedAt?: Date | string
+  /** Liens sociaux */
+  socialLinks?: ProfileSocialLink[]
+  /** Champs personnalisés */
+  customFields?: Record<string, string>
+}
+
+export interface WakaProfileProps {
+  /** Données du profil */
+  profile: ProfileData
+  /** Mode édition */
+  editable?: boolean
+  /** En mode édition actuellement */
+  isEditing?: boolean
+  /** Callback pour activer/désactiver l'édition */
+  onEditToggle?: (editing: boolean) => void
+  /** Callback lors d'un changement */
+  onChange?: (field: string, value: string) => void
+  /** Callback de sauvegarde */
+  onSave?: (profile: ProfileData) => void | Promise<void>
+  /** En cours de sauvegarde */
+  saving?: boolean
+  /** Callback changement d'avatar */
+  onAvatarChange?: (file: File) => void | Promise<void>
+  /** Sections personnalisées */
+  customSections?: ProfileSection[]
+  /** Afficher les liens sociaux */
+  showSocialLinks?: boolean
+  /** Afficher les statistiques */
+  showStats?: boolean
+  /** Statistiques */
+  stats?: { label: string; value: string | number }[]
+  /** Layout */
+  layout?: "card" | "page" | "compact"
+  /** Tabs pour page layout */
+  useTabs?: boolean
+  /** Classes CSS additionnelles */
+  className?: string
+}
+
+// ============================================
+// SUB-COMPONENTS
+// ============================================
+
+interface ProfileAvatarProps {
+  url?: string
+  name: string
+  size?: "sm" | "md" | "lg" | "xl"
+  editable?: boolean
+  onAvatarChange?: (file: File) => void
+}
+
+function ProfileAvatar({
+  url,
+  name,
+  size = "lg",
+  editable,
+  onAvatarChange,
+}: ProfileAvatarProps) {
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  const sizeClasses = {
+    sm: "h-12 w-12",
+    md: "h-16 w-16",
+    lg: "h-24 w-24",
+    xl: "h-32 w-32",
+  }
+
+  const initials = name
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2)
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file && onAvatarChange) {
+      onAvatarChange(file)
+    }
+  }
+
+  return (
+    <div className="relative inline-block">
+      <Avatar className={cn(sizeClasses[size], "border-4 border-background shadow-lg")}>
+        <AvatarImage src={url} alt={name} />
+        <AvatarFallback className="text-lg font-medium">{initials}</AvatarFallback>
+      </Avatar>
+      {editable && onAvatarChange && (
+        <>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            onChange={handleFileChange}
+            className="hidden"
+          />
+          <Button
+            size="icon"
+            variant="secondary"
+            className="absolute bottom-0 right-0 h-8 w-8 rounded-full shadow-md"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            <Camera className="h-4 w-4" />
+          </Button>
+        </>
+      )}
+    </div>
+  )
+}
+
+interface ProfileFieldInputProps {
+  field: ProfileField
+  value: string
+  onChange: (value: string) => void
+  isEditing: boolean
+}
+
+function ProfileFieldInput({
+  field,
+  value,
+  onChange,
+  isEditing,
+}: ProfileFieldInputProps) {
+  if (!isEditing) {
+    return (
+      <div className="flex items-center gap-2">
+        {field.icon && (
+          <span className="text-muted-foreground">{field.icon}</span>
+        )}
+        <span className={cn(!value && "text-muted-foreground italic")}>
+          {value || "Non renseigné"}
+        </span>
+      </div>
+    )
+  }
+
+  const baseProps = {
+    id: field.id,
+    value: value || "",
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+      onChange(e.target.value),
+    placeholder: field.placeholder,
+    disabled: field.disabled,
+  }
+
+  if (field.type === "textarea") {
+    return <Textarea {...baseProps} rows={3} />
+  }
+
+  if (field.type === "select" && field.options) {
+    return (
+      <Select value={value} onValueChange={onChange} disabled={field.disabled}>
+        <SelectTrigger>
+          <SelectValue placeholder={field.placeholder || "Sélectionner..."} />
+        </SelectTrigger>
+        <SelectContent>
+          {field.options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    )
+  }
+
+  return <Input type={field.type || "text"} {...baseProps} />
+}
+
+interface ProfileSectionCardProps {
+  section: ProfileSection
+  values: Record<string, string>
+  onChange: (fieldId: string, value: string) => void
+  isEditing: boolean
+}
+
+function ProfileSectionCard({
+  section,
+  values,
+  onChange,
+  isEditing,
+}: ProfileSectionCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          {section.icon && (
+            <span className="text-muted-foreground">{section.icon}</span>
+          )}
+          <div>
+            <CardTitle className="text-base">{section.title}</CardTitle>
+            {section.description && (
+              <CardDescription>{section.description}</CardDescription>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {section.fields.map((field, index) => (
+          <React.Fragment key={field.id}>
+            <div className="space-y-2">
+              <Label htmlFor={field.id} className="text-sm font-medium">
+                {field.label}
+                {field.required && <span className="text-destructive ml-1">*</span>}
+              </Label>
+              <ProfileFieldInput
+                field={field}
+                value={values[field.id] || ""}
+                onChange={(value) => onChange(field.id, value)}
+                isEditing={isEditing}
+              />
+            </div>
+            {index < section.fields.length - 1 && isEditing && (
+              <Separator className="my-4" />
+            )}
+          </React.Fragment>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+interface SocialLinksProps {
+  links: ProfileSocialLink[]
+  isEditing: boolean
+  onChange?: (links: ProfileSocialLink[]) => void
+}
+
+function SocialLinks({ links, isEditing }: SocialLinksProps) {
+  const getIcon = (type: ProfileSocialLink["type"]) => {
+    switch (type) {
+      case "twitter":
+        return <Twitter className="h-4 w-4" />
+      case "github":
+        return <Github className="h-4 w-4" />
+      case "linkedin":
+        return <Linkedin className="h-4 w-4" />
+      case "website":
+        return <Globe className="h-4 w-4" />
+      default:
+        return <LinkIcon className="h-4 w-4" />
+    }
+  }
+
+  if (!isEditing) {
+    return (
+      <div className="flex gap-2 flex-wrap">
+        {links.map((link) => (
+          <a
+            key={link.id}
+            href={link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted rounded-full text-sm hover:bg-muted/80 transition-colors"
+          >
+            {getIcon(link.type)}
+            <span>{link.label || link.type}</span>
+          </a>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      {links.map((link) => (
+        <div key={link.id} className="flex items-center gap-2">
+          {getIcon(link.type)}
+          <Input value={link.url} className="flex-1" readOnly />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaProfile({
+  profile,
+  editable = false,
+  isEditing: externalIsEditing,
+  onEditToggle,
+  onChange,
+  onSave,
+  saving = false,
+  onAvatarChange,
+  customSections,
+  showSocialLinks = true,
+  showStats = false,
+  stats,
+  layout = "card",
+  useTabs = false,
+  className,
+}: WakaProfileProps) {
+  const [internalIsEditing, setInternalIsEditing] = React.useState(false)
+  const [localProfile, setLocalProfile] = React.useState(profile)
+
+  const isEditing = externalIsEditing ?? internalIsEditing
+
+  React.useEffect(() => {
+    setLocalProfile(profile)
+  }, [profile])
+
+  const handleEditToggle = (editing: boolean) => {
+    if (onEditToggle) {
+      onEditToggle(editing)
+    } else {
+      setInternalIsEditing(editing)
+    }
+    if (!editing) {
+      setLocalProfile(profile) // Reset on cancel
+    }
+  }
+
+  const handleChange = (field: string, value: string) => {
+    setLocalProfile((prev) => ({ ...prev, [field]: value }))
+    onChange?.(field, value)
+  }
+
+  const handleSave = async () => {
+    await onSave?.(localProfile)
+    handleEditToggle(false)
+  }
+
+  // Default sections
+  const defaultSections: ProfileSection[] = [
+    {
+      id: "personal",
+      title: "Informations personnelles",
+      icon: <User className="h-5 w-5" />,
+      fields: [
+        {
+          id: "firstName",
+          label: "Prénom",
+          value: localProfile.firstName || "",
+          type: "text",
+          placeholder: "Jean",
+          icon: <User className="h-4 w-4" />,
+        },
+        {
+          id: "lastName",
+          label: "Nom",
+          value: localProfile.lastName || "",
+          type: "text",
+          placeholder: "Dupont",
+        },
+        {
+          id: "email",
+          label: "Email",
+          value: localProfile.email,
+          type: "email",
+          placeholder: "jean@exemple.com",
+          required: true,
+          icon: <Mail className="h-4 w-4" />,
+        },
+        {
+          id: "phone",
+          label: "Téléphone",
+          value: localProfile.phone || "",
+          type: "tel",
+          placeholder: "+33 6 12 34 56 78",
+          icon: <Phone className="h-4 w-4" />,
+        },
+        {
+          id: "bio",
+          label: "Bio",
+          value: localProfile.bio || "",
+          type: "textarea",
+          placeholder: "Parlez-nous de vous...",
+        },
+      ],
+    },
+    {
+      id: "professional",
+      title: "Informations professionnelles",
+      icon: <Briefcase className="h-5 w-5" />,
+      fields: [
+        {
+          id: "role",
+          label: "Poste",
+          value: localProfile.role || "",
+          type: "text",
+          placeholder: "Développeur Senior",
+          icon: <Briefcase className="h-4 w-4" />,
+        },
+        {
+          id: "department",
+          label: "Département",
+          value: localProfile.department || "",
+          type: "text",
+          placeholder: "Engineering",
+        },
+        {
+          id: "company",
+          label: "Entreprise",
+          value: localProfile.company || "",
+          type: "text",
+          placeholder: "Acme Inc.",
+          icon: <Building className="h-4 w-4" />,
+        },
+        {
+          id: "location",
+          label: "Localisation",
+          value: localProfile.location || "",
+          type: "text",
+          placeholder: "Paris, France",
+          icon: <MapPin className="h-4 w-4" />,
+        },
+        {
+          id: "website",
+          label: "Site web",
+          value: localProfile.website || "",
+          type: "url",
+          placeholder: "https://exemple.com",
+          icon: <Globe className="h-4 w-4" />,
+        },
+      ],
+    },
+  ]
+
+  const allSections = customSections || defaultSections
+
+  // Create values map from localProfile
+  const values: Record<string, string> = {
+    firstName: localProfile.firstName || "",
+    lastName: localProfile.lastName || "",
+    email: localProfile.email,
+    phone: localProfile.phone || "",
+    bio: localProfile.bio || "",
+    role: localProfile.role || "",
+    department: localProfile.department || "",
+    company: localProfile.company || "",
+    location: localProfile.location || "",
+    website: localProfile.website || "",
+    ...localProfile.customFields,
+  }
+
+  // Compact layout
+  if (layout === "compact") {
+    return (
+      <div className={cn("flex items-center gap-4", className)}>
+        <ProfileAvatar
+          url={localProfile.avatarUrl}
+          name={localProfile.displayName}
+          size="md"
+        />
+        <div>
+          <h3 className="font-semibold">{localProfile.displayName}</h3>
+          {localProfile.role && (
+            <p className="text-sm text-muted-foreground">{localProfile.role}</p>
+          )}
+          {localProfile.email && (
+            <p className="text-sm text-muted-foreground">{localProfile.email}</p>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  const renderHeader = () => (
+    <div className="flex flex-col items-center text-center gap-4 md:flex-row md:text-left">
+      <ProfileAvatar
+        url={localProfile.avatarUrl}
+        name={localProfile.displayName}
+        size="xl"
+        editable={editable && isEditing}
+        onAvatarChange={onAvatarChange}
+      />
+      <div className="flex-1">
+        <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
+          <div>
+            <h1 className="text-2xl font-bold">{localProfile.displayName}</h1>
+            {localProfile.role && (
+              <p className="text-muted-foreground">{localProfile.role}</p>
+            )}
+            {localProfile.company && (
+              <p className="text-sm text-muted-foreground flex items-center gap-1">
+                <Building className="h-3 w-3" />
+                {localProfile.company}
+              </p>
+            )}
+            {localProfile.location && (
+              <p className="text-sm text-muted-foreground flex items-center gap-1">
+                <MapPin className="h-3 w-3" />
+                {localProfile.location}
+              </p>
+            )}
+          </div>
+          {editable && (
+            <div className="flex gap-2">
+              {isEditing ? (
+                <>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleEditToggle(false)}
+                    disabled={saving}
+                  >
+                    <X className="mr-2 h-4 w-4" />
+                    Annuler
+                  </Button>
+                  <Button size="sm" onClick={handleSave} disabled={saving}>
+                    {saving ? (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    ) : (
+                      <Save className="mr-2 h-4 w-4" />
+                    )}
+                    Enregistrer
+                  </Button>
+                </>
+              ) : (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => handleEditToggle(true)}
+                >
+                  <Edit3 className="mr-2 h-4 w-4" />
+                  Modifier
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Stats */}
+        {showStats && stats && stats.length > 0 && (
+          <div className="flex gap-6 mt-4">
+            {stats.map((stat, index) => (
+              <div key={index} className="text-center">
+                <div className="text-2xl font-bold">{stat.value}</div>
+                <div className="text-xs text-muted-foreground">{stat.label}</div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Social Links */}
+        {showSocialLinks && localProfile.socialLinks && localProfile.socialLinks.length > 0 && (
+          <div className="mt-4">
+            <SocialLinks links={localProfile.socialLinks} isEditing={isEditing} />
+          </div>
+        )}
+
+        {/* Join date */}
+        {localProfile.joinedAt && (
+          <p className="text-xs text-muted-foreground mt-4 flex items-center gap-1">
+            <Calendar className="h-3 w-3" />
+            Membre depuis{" "}
+            {new Date(localProfile.joinedAt).toLocaleDateString("fr-FR", {
+              month: "long",
+              year: "numeric",
+            })}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+
+  const renderSections = () => (
+    <div className="space-y-6">
+      {allSections.map((section) => (
+        <ProfileSectionCard
+          key={section.id}
+          section={section}
+          values={values}
+          onChange={handleChange}
+          isEditing={isEditing}
+        />
+      ))}
+    </div>
+  )
+
+  // Card layout
+  if (layout === "card") {
+    return (
+      <Card className={className}>
+        <CardContent className="pt-6">
+          <div className="space-y-6">
+            {renderHeader()}
+            <Separator />
+            {renderSections()}
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  // Page layout
+  return (
+    <div className={cn("space-y-6", className)}>
+      {renderHeader()}
+
+      {useTabs ? (
+        <Tabs defaultValue={allSections[0]?.id} className="space-y-6">
+          <TabsList>
+            {allSections.map((section) => (
+              <TabsTrigger key={section.id} value={section.id} className="gap-2">
+                {section.icon}
+                {section.title}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {allSections.map((section) => (
+            <TabsContent key={section.id} value={section.id}>
+              <ProfileSectionCard
+                section={section}
+                values={values}
+                onChange={handleChange}
+                isEditing={isEditing}
+              />
+            </TabsContent>
+          ))}
+        </Tabs>
+      ) : (
+        renderSections()
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// PRESETS
+// ============================================
+
+export const defaultProfileData: ProfileData = {
+  displayName: "Jean Dupont",
+  firstName: "Jean",
+  lastName: "Dupont",
+  email: "jean.dupont@exemple.com",
+  phone: "+33 6 12 34 56 78",
+  bio: "Développeur passionné avec plus de 10 ans d'expérience dans le développement web et mobile.",
+  avatarUrl: "",
+  role: "Lead Developer",
+  department: "Engineering",
+  company: "Acme Inc.",
+  location: "Paris, France",
+  website: "https://jeandupont.dev",
+  joinedAt: new Date("2023-01-15"),
+  socialLinks: [
+    { id: "1", type: "twitter", url: "https://twitter.com/jeandupont", label: "@jeandupont" },
+    { id: "2", type: "github", url: "https://github.com/jeandupont", label: "jeandupont" },
+    { id: "3", type: "linkedin", url: "https://linkedin.com/in/jeandupont", label: "Jean Dupont" },
+  ],
+}
+
+export default WakaProfile