@proyecto-viviana/ui 0.3.2 → 0.3.4

package/src/custom/project-card/index.tsx

@@ -0,0 +1,59 @@
+import type { JSX } from 'solid-js'
+
+export type ProjectCardSize = 'sm' | 'md' | 'lg'
+
+export interface ProjectCardProps {
+  /** Project name shown in tooltip on hover */
+  name: string
+  /** Image source for the project logo */
+  imageSrc: string
+  /** Alt text for the image */
+  imageAlt?: string
+  /** Optional link to the project */
+  href?: string
+  /** Size of the card */
+  size?: ProjectCardSize
+  /** Whether the project is inactive/greyed out */
+  inactive?: boolean
+  /** Additional CSS class */
+  class?: string
+}
+
+/**
+ * Project card with logo and hover tooltip.
+ * Used for showcasing ecosystem projects.
+ */
+export function ProjectCard(props: ProjectCardProps): JSX.Element {
+  const size = () => props.size ?? 'sm'
+  const inactive = () => props.inactive ?? false
+
+  const cardContent = () => (
+    <>
+      <div class="vui-project-card__tooltip">
+        <span>{props.name}</span>
+      </div>
+      <img
+        class="vui-project-card__image"
+        src={props.imageSrc}
+        alt={props.imageAlt ?? props.name}
+      />
+    </>
+  )
+
+  const cardClasses = () =>
+    `vui-project-card vui-project-card--${size()} ${inactive() ? 'vui-project-card--inactive' : ''} ${props.class ?? ''}`
+
+  if (props.href) {
+    return (
+      <a href={props.href} target="_blank" rel="noopener noreferrer" class={cardClasses()}>
+        {cardContent()}
+      </a>
+    )
+  }
+
+  return (
+    <div class={cardClasses()}>
+      {cardContent()}
+    </div>
+  )
+}

package/src/custom/timeline-item/index.tsx

@@ -0,0 +1,105 @@
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+import { Avatar } from '../../avatar'
+
+export type TimelineEventType = 'follow' | 'like' | 'comment' | 'event' | 'custom'
+
+export interface TimelineItemProps {
+  type?: TimelineEventType
+  /**
+   * Icon to display between the two avatars.
+   * Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
+   * Or pass a simple string for text-based icons: `icon="👋"`
+   */
+  icon?: string | (() => JSX.Element)
+  leftUser?: {
+    name: string
+    avatar?: string
+  }
+  rightUser?: {
+    name: string
+    avatar?: string
+  }
+  /**
+   * Custom message content.
+   * Use a function returning JSX for SSR compatibility: `message={() => <span>...</span>}`
+   * Or pass a simple string.
+   */
+  message?: string | (() => JSX.Element)
+  class?: string
+}
+
+const eventMessages: Record<TimelineEventType, (left: string, right: string) => JSX.Element> = {
+  follow: (left, right) => (
+    <>
+      <span class="font-semibold text-accent-200">{left}</span>
+      {' ha empezado a seguir a '}
+      <span class="font-semibold text-accent-200">{right}</span>
+    </>
+  ),
+  like: (left, right) => (
+    <>
+      <span class="font-semibold text-accent-200">{left}</span>
+      {' le ha dado like a '}
+      <span class="font-semibold text-accent-200">{right}</span>
+    </>
+  ),
+  comment: (left, right) => (
+    <>
+      <span class="font-semibold text-accent-200">{left}</span>
+      {' ha comentado en '}
+      <span class="font-semibold text-accent-200">{right}</span>
+    </>
+  ),
+  event: (left, right) => (
+    <>
+      <span class="font-semibold text-accent-200">{left}</span>
+      {' asistirá al evento de '}
+      <span class="font-semibold text-accent-200">{right}</span>
+    </>
+  ),
+  custom: () => null,
+}
+
+export function TimelineItem(props: TimelineItemProps) {
+  const type = () => props.type ?? 'follow'
+  const leftName = () => props.leftUser?.name ?? ''
+  const rightName = () => props.rightUser?.name ?? ''
+
+  const renderIcon = () => {
+    const icon = props.icon
+    if (!icon) return null
+    if (typeof icon === 'string') return icon
+    return icon()
+  }
+
+  const renderMessage = () => {
+    const message = props.message
+    if (!message) return null
+    if (typeof message === 'string') return message
+    return message()
+  }
+
+  return (
+    <div class={`inline-flex w-auto flex-col gap-5 rounded-2xl border border-primary-700 bg-bg-200 p-5 hover:bg-bg-300 transition-colors ${props.class ?? ''}`}>
+      <div class="flex items-center justify-around gap-3">
+        <Show when={props.leftUser}>
+          <Avatar src={props.leftUser!.avatar} alt={props.leftUser!.name} />
+        </Show>
+        <Show when={props.icon}>
+          {renderIcon()}
+        </Show>
+        <Show when={props.rightUser}>
+          <Avatar src={props.rightUser!.avatar} alt={props.rightUser!.name} />
+        </Show>
+      </div>
+      <div class="flex items-center justify-center gap-3 text-center">
+        <span class="font-light text-primary-300">
+          <Show when={props.message} fallback={eventMessages[type()](leftName(), rightName())}>
+            {renderMessage()}
+          </Show>
+        </span>
+      </div>
+    </div>
+  )
+}

package/src/dialog/Dialog.tsx

@@ -0,0 +1,260 @@
+/**
+ * Dialog component for proyecto-viviana-ui
+ *
+ * Styled dialog component with overlay and backdrop.
+ * Follows Spectrum 2 design patterns.
+ */
+
+import { type JSX, splitProps, Show, createSignal, createContext, useContext, createUniqueId, onMount, onCleanup, createEffect } from 'solid-js'
+import { Portal } from 'solid-js/web'
+import { createInteractOutside } from '@proyecto-viviana/solidaria'
+
+// ============================================
+// TYPES
+// ============================================
+
+export type DialogSize = 'sm' | 'md' | 'lg' | 'fullscreen'
+
+export interface DialogProps {
+  /** The size of the dialog. */
+  size?: DialogSize
+  /** Whether the dialog can be dismissed by clicking the X button. */
+  isDismissable?: boolean
+  /** Additional CSS class name. */
+  class?: string
+  /** The title of the dialog. */
+  title?: string
+  /** The children content. */
+  children: JSX.Element
+  /** Callback when dialog should close */
+  onClose?: () => void
+  /** ARIA role - defaults to 'dialog' */
+  role?: 'dialog' | 'alertdialog'
+  /** ARIA label */
+  'aria-label'?: string
+  /** ARIA labelledby */
+  'aria-labelledby'?: string
+}
+
+export interface DialogTriggerProps {
+  /** Button to trigger the dialog. */
+  trigger: JSX.Element
+  /** The dialog content - receives close function. */
+  content: (close: () => void) => JSX.Element
+  /** Whether the dialog is controlled. */
+  isOpen?: boolean
+  /** Callback when open state changes. */
+  onOpenChange?: (isOpen: boolean) => void
+  /** Whether clicking outside the dialog closes it. Defaults to true. */
+  isDismissable?: boolean
+  /** Whether pressing Escape closes the dialog. Defaults to true. */
+  isKeyboardDismissDisabled?: boolean
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+interface DialogContextValue {
+  close: () => void
+}
+
+const DialogContext = createContext<DialogContextValue | null>(null)
+
+export function useDialogContext(): DialogContextValue | null {
+  return useContext(DialogContext)
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const sizeStyles: Record<DialogSize, string> = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-2xl',
+  fullscreen: 'max-w-full w-full h-full',
+}
+
+// ============================================
+// DIALOG COMPONENT
+// ============================================
+
+/**
+ * A dialog is an overlay shown above other content in an application.
+ */
+export function Dialog(props: DialogProps): JSX.Element {
+  const [local, rest] = splitProps(props, [
+    'size',
+    'isDismissable',
+    'class',
+    'title',
+    'onClose',
+    'role',
+    'aria-label',
+    'aria-labelledby',
+  ])
+
+  const size = local.size ?? 'md'
+  const customClass = local.class ?? ''
+  const role = local.role ?? 'dialog'
+
+  // Generate a unique ID for the title if one is present
+  const titleId = createUniqueId()
+  const ariaLabelledBy = local['aria-labelledby'] ?? (local.title ? titleId : undefined)
+
+  const close = () => local.onClose?.()
+
+  const baseClass = 'bg-bg-300 rounded-lg shadow-xl border border-primary-700'
+  const sizeClass = sizeStyles[size]
+  const padding = 'p-6'
+  const className = [baseClass, sizeClass, padding, customClass].filter(Boolean).join(' ')
+
+  return (
+    <DialogContext.Provider value={{ close }}>
+      <div
+        role={role}
+        tabIndex={-1}
+        aria-label={local['aria-label']}
+        aria-labelledby={ariaLabelledBy}
+        class={className}
+        {...rest}
+      >
+        <Show when={local.title}>
+          <div class="flex items-center justify-between mb-4">
+            <h2 id={titleId} class="text-xl font-semibold text-primary-100">
+              {local.title}
+            </h2>
+            <Show when={local.isDismissable}>
+              <button
+                onClick={close}
+                class="text-primary-400 hover:text-primary-200 transition-colors"
+                aria-label="Close dialog"
+              >
+                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </Show>
+          </div>
+        </Show>
+        <div class="text-primary-200">
+          {props.children}
+        </div>
+      </div>
+    </DialogContext.Provider>
+  )
+}
+
+// ============================================
+// DIALOG TRIGGER COMPONENT
+// ============================================
+
+/**
+ * DialogTrigger wraps a trigger button and dialog content.
+ * Handles opening/closing the dialog with overlay and backdrop.
+ */
+export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
+  const [isOpen, setIsOpen] = createSignal(props.isOpen ?? false)
+  let dialogRef: HTMLDivElement | undefined
+
+  const open = () => {
+    setIsOpen(true)
+    props.onOpenChange?.(true)
+  }
+
+  const close = () => {
+    setIsOpen(false)
+    props.onOpenChange?.(false)
+  }
+
+  // Handle controlled state
+  const isOpenControlled = () => props.isOpen !== undefined ? props.isOpen : isOpen()
+
+  // Whether dismissable (defaults to true)
+  const isDismissable = () => props.isDismissable !== false
+
+  // Click outside to close
+  createInteractOutside({
+    ref: () => dialogRef ?? null,
+    onInteractOutside: () => {
+      if (isOpenControlled() && isDismissable()) {
+        close()
+      }
+    },
+    isDisabled: !isOpenControlled() || !isDismissable(),
+  })
+
+  // Escape key to close
+  onMount(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpenControlled() && !props.isKeyboardDismissDisabled) {
+        e.preventDefault()
+        e.stopPropagation()
+        close()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    onCleanup(() => document.removeEventListener('keydown', handleKeyDown))
+  })
+
+  // Prevent background scroll when dialog is open
+  createEffect(() => {
+    if (!isOpenControlled()) return
+
+    const prevOverflow = document.documentElement.style.overflow
+    document.documentElement.style.overflow = 'hidden'
+
+    onCleanup(() => {
+      document.documentElement.style.overflow = prevOverflow
+    })
+  })
+
+  return (
+    <>
+      <div onClick={open}>
+        {props.trigger}
+      </div>
+
+      <Show when={isOpenControlled()}>
+        <Portal>
+          {/* Backdrop */}
+          <div
+            class="fixed inset-0 bg-black/50 backdrop-blur-sm z-40"
+            aria-hidden="true"
+          />
+
+          {/* Dialog container - pointer-events-none so clicks pass through to backdrop detection */}
+          <div class="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
+            {/* Dialog wrapper - pointer-events-auto to capture clicks on the dialog itself */}
+            <div ref={dialogRef} class="pointer-events-auto">
+              {props.content(close)}
+            </div>
+          </div>
+        </Portal>
+      </Show>
+    </>
+  )
+}
+
+// ============================================
+// DIALOG FOOTER COMPONENT
+// ============================================
+
+export interface DialogFooterProps {
+  /** Footer content, typically buttons. */
+  children: JSX.Element
+  /** Additional CSS class. */
+  class?: string
+}
+
+/**
+ * Footer section for dialog actions.
+ */
+export function DialogFooter(props: DialogFooterProps): JSX.Element {
+  return (
+    <div class={`flex gap-3 justify-end mt-6 pt-4 border-t border-primary-700 ${props.class ?? ''}`}>
+      {props.children}
+    </div>
+  )
+}

package/src/dialog/index.tsx

@@ -0,0 +1,3 @@
+// Export the new standard Dialog component
+export { Dialog, DialogTrigger, DialogFooter } from './Dialog'
+export type { DialogProps, DialogTriggerProps, DialogFooterProps, DialogSize } from './Dialog'