@uniweb/kit 0.1.1

package/src/components/Asset/Asset.jsx

@@ -0,0 +1,161 @@
+/**
+ * Asset Component
+ *
+ * File asset preview with download functionality.
+ *
+ * @module @uniweb/kit/Asset
+ */
+
+import React, { useState, useCallback, forwardRef, useImperativeHandle } from 'react'
+import { cn } from '../../utils/index.js'
+import { FileLogo } from '../FileLogo/index.js'
+import { Image } from '../Image/index.js'
+import { useWebsite } from '../../hooks/useWebsite.js'
+
+/**
+ * Check if file is an image
+ * @param {string} filename
+ * @returns {boolean}
+ */
+function isImageFile(filename) {
+  if (!filename) return false
+  const ext = filename.toLowerCase().split('.').pop()
+  return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)
+}
+
+/**
+ * Asset - File preview with download
+ *
+ * @param {Object} props
+ * @param {string|Object} props.value - Asset identifier or object
+ * @param {Object} [props.profile] - Profile object for asset resolution
+ * @param {boolean} [props.withDownload=true] - Show download button
+ * @param {string} [props.className] - Additional CSS classes
+ *
+ * @example
+ * <Asset value="document.pdf" profile={profile} />
+ *
+ * @example
+ * <Asset value={{ src: "/files/report.pdf", filename: "report.pdf" }} />
+ */
+export const Asset = forwardRef(function Asset(
+  { value, profile, withDownload = true, className, ...props },
+  ref
+) {
+  const { localize } = useWebsite()
+  const [imageError, setImageError] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+
+  // Resolve asset info
+  let src = ''
+  let filename = ''
+  let alt = ''
+
+  if (typeof value === 'string') {
+    src = value
+    filename = value.split('/').pop() || value
+  } else if (value && typeof value === 'object') {
+    src = value.src || value.url || ''
+    filename = value.filename || value.name || src.split('/').pop() || ''
+    alt = value.alt || filename
+  }
+
+  // Use profile to resolve asset if available
+  if (profile && typeof profile.getAssetInfo === 'function') {
+    const assetInfo = profile.getAssetInfo(value, true, filename)
+    src = assetInfo?.src || src
+    filename = assetInfo?.filename || filename
+    alt = assetInfo?.alt || alt
+  }
+
+  const isImage = isImageFile(filename)
+
+  // Handle download
+  const handleDownload = useCallback(async () => {
+    if (!src) return
+
+    try {
+      // Try to trigger download
+      const downloadUrl = src.includes('?') ? `${src}&download=true` : `${src}?download=true`
+      const response = await fetch(downloadUrl)
+      const blob = await response.blob()
+
+      const link = document.createElement('a')
+      link.href = URL.createObjectURL(blob)
+      link.download = filename
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      URL.revokeObjectURL(link.href)
+    } catch (error) {
+      // Fallback: open in new tab
+      window.open(src, '_blank')
+    }
+  }, [src, filename])
+
+  // Expose download method via ref
+  useImperativeHandle(ref, () => ({
+    triggerDownload: handleDownload
+  }), [handleDownload])
+
+  // Handle image error
+  const handleImageError = useCallback(() => {
+    setImageError(true)
+  }, [])
+
+  if (!src) return null
+
+  return (
+    <div
+      className={cn(
+        'relative inline-block rounded-lg overflow-hidden border border-gray-200',
+        'transition-shadow hover:shadow-md',
+        className
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      {...props}
+    >
+      {/* Preview */}
+      <div className="w-32 h-32 flex items-center justify-center bg-gray-50">
+        {isImage && !imageError ? (
+          <Image
+            src={src}
+            alt={alt}
+            className="w-full h-full object-cover"
+            onError={handleImageError}
+          />
+        ) : (
+          <FileLogo filename={filename} size="48" className="text-gray-400" />
+        )}
+      </div>
+
+      {/* Filename */}
+      <div className="px-2 py-1 text-xs text-gray-600 truncate max-w-[128px]" title={filename}>
+        {filename}
+      </div>
+
+      {/* Download overlay */}
+      {withDownload && (
+        <button
+          onClick={handleDownload}
+          className={cn(
+            'absolute inset-0 flex items-center justify-center',
+            'bg-black/50 text-white transition-opacity',
+            isHovered ? 'opacity-100' : 'opacity-0'
+          )}
+          aria-label={localize({
+            en: 'Download file',
+            fr: 'Télécharger le fichier'
+          })}
+        >
+          <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+          </svg>
+        </button>
+      )}
+    </div>
+  )
+})
+
+export default Asset

package/src/components/Asset/index.js

@@ -0,0 +1 @@
+export { Asset, default } from './Asset.jsx'

package/src/components/Disclaimer/Disclaimer.jsx

@@ -0,0 +1,198 @@
+/**
+ * Disclaimer Component
+ *
+ * Modal disclaimer dialog for terms, privacy notices, etc.
+ *
+ * @module @uniweb/kit/Disclaimer
+ */
+
+import React, { useState, useCallback, useEffect } from 'react'
+import { cn } from '../../utils/index.js'
+import { useWebsite } from '../../hooks/useWebsite.js'
+import { SafeHtml } from '../SafeHtml/index.js'
+
+/**
+ * Disclaimer Modal
+ */
+function DisclaimerModal({ isOpen, onClose, title, content, className }) {
+  // Handle escape key
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === 'Escape') onClose()
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape)
+      document.body.style.overflow = 'hidden'
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape)
+      document.body.style.overflow = ''
+    }
+  }, [isOpen, onClose])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50 overflow-y-auto">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/50 transition-opacity"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Dialog */}
+      <div className="flex min-h-full items-center justify-center p-4">
+        <div
+          className={cn(
+            'relative w-full max-w-lg transform overflow-hidden rounded-lg',
+            'bg-white shadow-xl transition-all',
+            className
+          )}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="disclaimer-title"
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
+            <h3 id="disclaimer-title" className="text-lg font-medium text-gray-900">
+              {title}
+            </h3>
+            <button
+              onClick={onClose}
+              className="rounded-md p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              aria-label="Close"
+            >
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="px-4 py-4 max-h-96 overflow-y-auto">
+            {typeof content === 'string' ? (
+              <SafeHtml value={content} className="prose prose-sm" />
+            ) : (
+              content
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="border-t border-gray-200 px-4 py-3 flex justify-end">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Disclaimer - Disclaimer trigger and modal
+ *
+ * @param {Object} props
+ * @param {string} [props.type='link'] - Trigger type: 'link', 'button', 'popup'
+ * @param {string} props.title - Disclaimer title
+ * @param {string|React.ReactNode} props.content - Disclaimer content
+ * @param {string} [props.triggerText] - Text for the trigger element
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.ReactNode} [props.children] - Custom trigger element
+ *
+ * @example
+ * <Disclaimer
+ *   title="Terms of Service"
+ *   content="<p>Please read our terms...</p>"
+ *   triggerText="View Terms"
+ * />
+ *
+ * @example
+ * <Disclaimer title="Privacy Policy" content={<PrivacyContent />}>
+ *   <button className="underline">Privacy Policy</button>
+ * </Disclaimer>
+ */
+export function Disclaimer({
+  type = 'link',
+  title,
+  content,
+  triggerText,
+  className,
+  children,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+  const { localize } = useWebsite()
+
+  const handleOpen = useCallback(() => setIsOpen(true), [])
+  const handleClose = useCallback(() => setIsOpen(false), [])
+
+  // Auto-open for popup type
+  useEffect(() => {
+    if (type === 'popup') {
+      setIsOpen(true)
+    }
+  }, [type])
+
+  // Localized title and content
+  const localizedTitle = typeof title === 'object' ? localize(title) : title
+  const localizedContent = typeof content === 'object' && !React.isValidElement(content)
+    ? localize(content)
+    : content
+  const localizedTriggerText = typeof triggerText === 'object'
+    ? localize(triggerText)
+    : (triggerText || localizedTitle)
+
+  // Render trigger
+  const trigger = children ? (
+    React.cloneElement(React.Children.only(children), {
+      onClick: handleOpen,
+      role: 'button',
+      'aria-haspopup': 'dialog'
+    })
+  ) : type === 'button' ? (
+    <button
+      onClick={handleOpen}
+      className={cn(
+        'inline-flex items-center px-3 py-1.5 text-sm font-medium',
+        'text-blue-600 hover:text-blue-700',
+        'border border-blue-600 rounded-md hover:bg-blue-50',
+        className
+      )}
+      {...props}
+    >
+      {localizedTriggerText}
+    </button>
+  ) : (
+    <button
+      onClick={handleOpen}
+      className={cn(
+        'text-blue-600 hover:text-blue-700 underline text-sm',
+        className
+      )}
+      {...props}
+    >
+      {localizedTriggerText}
+    </button>
+  )
+
+  return (
+    <>
+      {type !== 'popup' && trigger}
+      <DisclaimerModal
+        isOpen={isOpen}
+        onClose={handleClose}
+        title={localizedTitle}
+        content={localizedContent}
+      />
+    </>
+  )
+}
+
+export default Disclaimer

package/src/components/Disclaimer/index.js

@@ -0,0 +1 @@
+export { Disclaimer, default } from './Disclaimer.jsx'

package/src/components/FileLogo/FileLogo.jsx

@@ -0,0 +1,148 @@
+/**
+ * FileLogo Component
+ *
+ * Displays file type icons based on filename extension.
+ *
+ * @module @uniweb/kit/FileLogo
+ */
+
+import React from 'react'
+import { cn } from '../../utils/index.js'
+
+/**
+ * File type to icon mapping
+ * Using simple SVG icons for common file types
+ */
+const FILE_ICONS = {
+  // Images
+  jpg: 'image',
+  jpeg: 'image',
+  png: 'image',
+  gif: 'image',
+  webp: 'image',
+  svg: 'image',
+
+  // Documents
+  pdf: 'pdf',
+  doc: 'word',
+  docx: 'word',
+  txt: 'text',
+  rtf: 'text',
+
+  // Spreadsheets
+  xls: 'excel',
+  xlsx: 'excel',
+  xlsm: 'excel',
+  xlsb: 'excel',
+  csv: 'excel',
+
+  // Presentations
+  ppt: 'powerpoint',
+  pptx: 'powerpoint',
+
+  // Code
+  html: 'code',
+  css: 'code',
+  js: 'code',
+  json: 'code',
+  xml: 'code',
+
+  // Archives
+  zip: 'archive',
+  rar: 'archive',
+  '7z': 'archive',
+  tar: 'archive',
+  gz: 'archive',
+
+  // Media
+  mp3: 'audio',
+  wav: 'audio',
+  mp4: 'video',
+  mov: 'video',
+  avi: 'video'
+}
+
+/**
+ * SVG icons for each file type
+ */
+const ICONS = {
+  image: (
+    <path d="M4 5a2 2 0 012-2h12a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm14 0H6v14h12V5zm-3 4a1 1 0 11-2 0 1 1 0 012 0zm-9 10l3-3 2 2 4-4 3 3v2H6v-0z" />
+  ),
+  pdf: (
+    <path d="M7 2a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V8l-6-6H7zm7 1.5L18.5 8H14V3.5zM9 13h1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5H10v2H9v-5zm1 2h.5a.5.5 0 000-1H10v1zm3-2h1.75c.69 0 1.25.56 1.25 1.25v2.5c0 .69-.56 1.25-1.25 1.25H13v-5zm1 4h.75a.25.25 0 00.25-.25v-2.5a.25.25 0 00-.25-.25H14v3z" />
+  ),
+  word: (
+    <path d="M7 2a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V8l-6-6H7zm7 1.5L18.5 8H14V3.5zM8 13h1l1.5 4 1.5-4h1l-2 6h-1l-2-6zm7 0h1v6h-1v-6z" />
+  ),
+  excel: (
+    <path d="M7 2a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V8l-6-6H7zm7 1.5L18.5 8H14V3.5zM9 12h2l1 2.5 1-2.5h2l-2 3 2 3h-2l-1-2.5-1 2.5H9l2-3-2-3z" />
+  ),
+  powerpoint: (
+    <path d="M7 2a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V8l-6-6H7zm7 1.5L18.5 8H14V3.5zM9 12h3c1.1 0 2 .9 2 2s-.9 2-2 2h-2v2H9v-6zm1 3h2a1 1 0 000-2h-2v2z" />
+  ),
+  text: (
+    <path d="M7 2a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V8l-6-6H7zm7 1.5L18.5 8H14V3.5zM8 12h8v1H8v-1zm0 3h8v1H8v-1zm0 3h5v1H8v-1z" />
+  ),
+  code: (
+    <path d="M7 2a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V8l-6-6H7zm7 1.5L18.5 8H14V3.5zM9.5 12l-2 3 2 3 .7-.7L8.5 15l1.7-2.3-.7-.7zm5 0l-.7.7 1.7 2.3-1.7 2.3.7.7 2-3-2-3z" />
+  ),
+  archive: (
+    <path d="M7 2a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V8l-6-6H7zm7 1.5L18.5 8H14V3.5zM11 10h2v1h-2v-1zm0 2h2v1h-2v-1zm0 2h2v3h-2v-3z" />
+  ),
+  audio: (
+    <path d="M7 2a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V8l-6-6H7zm7 1.5L18.5 8H14V3.5zM12 11a3 3 0 100 6 3 3 0 000-6zm0 1a2 2 0 110 4 2 2 0 010-4zm0 1a1 1 0 100 2 1 1 0 000-2z" />
+  ),
+  video: (
+    <path d="M7 2a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V8l-6-6H7zm7 1.5L18.5 8H14V3.5zM9 12l6 3-6 3v-6z" />
+  ),
+  default: (
+    <path d="M7 2a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V8l-6-6H7zm7 1.5L18.5 8H14V3.5z" />
+  )
+}
+
+/**
+ * Get file extension from filename
+ * @param {string} filename
+ * @returns {string}
+ */
+function getExtension(filename) {
+  if (!filename) return ''
+  const parts = filename.toLowerCase().split('.')
+  return parts.length > 1 ? parts.pop() : ''
+}
+
+/**
+ * FileLogo - File type icon component
+ *
+ * @param {Object} props
+ * @param {string} props.filename - Filename to determine icon
+ * @param {string} [props.size='24'] - Icon size in pixels
+ * @param {string} [props.className] - Additional CSS classes
+ *
+ * @example
+ * <FileLogo filename="report.pdf" size="32" />
+ *
+ * @example
+ * <FileLogo filename="data.xlsx" className="text-green-600" />
+ */
+export function FileLogo({ filename, size = '24', className, ...props }) {
+  const ext = getExtension(filename)
+  const iconType = FILE_ICONS[ext] || 'default'
+  const icon = ICONS[iconType]
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={cn('inline-block', className)}
+      style={{ width: size, height: size }}
+      aria-hidden="true"
+      {...props}
+    >
+      {icon}
+    </svg>
+  )
+}
+
+export default FileLogo

package/src/components/FileLogo/index.js

@@ -0,0 +1 @@
+export { FileLogo, default } from './FileLogo.jsx'