@dsfrkit/react 0.1.0

package/src/components/ui/notice.tsx

@@ -0,0 +1,157 @@
+import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from '@dsfrkit/icons'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+/**
+ * Variants du bandeau d'information DSFR
+ * Conforme au design system : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information
+ */
+const noticeVariants = cva('relative w-full py-4 px-6 flex items-start gap-4', {
+  variants: {
+    variant: {
+      // DSFR: bordure gauche 4px + fond sémantique (même logique qu'Alert)
+      info: 'border-l-4 border-l-info bg-info-background text-foreground',
+      success: 'border-l-4 border-l-success bg-success-background text-foreground',
+      warning: 'border-l-4 border-l-warning bg-warning-background text-foreground',
+      error: 'border-l-4 border-l-destructive bg-destructive-background text-foreground',
+      neutral: 'border-l-4 border-l-border-contrast bg-accent text-accent-foreground',
+      // Variante "weather" DSFR — fond neutre
+      weather: 'bg-muted text-foreground border-b border-border',
+    },
+    closable: {
+      true: 'pr-12',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'info',
+    closable: false,
+  },
+})
+
+const noticeIconVariants = cva('flex-shrink-0 mt-0.5', {
+  variants: {
+    variant: {
+      info: 'text-info',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-destructive',
+      neutral: 'text-muted-foreground',
+      weather: 'text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'info',
+  },
+})
+
+export interface NoticeProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
+    VariantProps<typeof noticeVariants> {
+  /**
+   * Titre du bandeau (optionnel, accepte du texte ou un noeud React)
+   */
+  title?: React.ReactNode
+  /**
+   * Callback appelé lors de la fermeture
+   */
+  onClose?: () => void
+  /**
+   * Icône personnalisée
+   */
+  icon?: React.ReactNode
+  /**
+   * Masquer l'icône par défaut
+   */
+  hideIcon?: boolean
+}
+
+/**
+ * Icônes par défaut selon le variant
+ */
+const defaultIcons: Record<string, React.ReactNode> = {
+  info: <InfoIcon className="h-6 w-6" aria-hidden="true" />,
+  success: <SuccessIcon className="h-6 w-6" aria-hidden="true" />,
+  warning: <WarningIcon className="h-6 w-6" aria-hidden="true" />,
+  error: <ErrorIcon className="h-6 w-6" aria-hidden="true" />,
+  neutral: <InfoIcon className="h-6 w-6" aria-hidden="true" />,
+}
+
+/**
+ * Composant Notice (Bandeau d'information) DSFR
+ *
+ * Affiche un message important en haut de page ou dans une section.
+ *
+ * @example
+ * ```tsx
+ * // Bandeau d'information simple
+ * <Notice variant="info">
+ *   Cette fonctionnalité est en cours de déploiement.
+ * </Notice>
+ *
+ * // Avec titre et fermeture
+ * <Notice
+ *   variant="warning"
+ *   title="Maintenance prévue"
+ *   closable
+ *   onClose={() => console.log('fermé')}
+ * >
+ *   Le service sera indisponible dimanche de 2h à 6h.
+ * </Notice>
+ * ```
+ */
+const Notice = React.forwardRef<HTMLDivElement, NoticeProps>(
+  (
+    {
+      className,
+      variant = 'info',
+      closable,
+      title,
+      onClose,
+      icon,
+      hideIcon = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const displayIcon = icon ?? (variant ? defaultIcons[variant] : null)
+
+    return (
+      <div
+        ref={ref}
+        // biome-ignore lint/a11y/useSemanticElements: role="status" intentionnel pour la région live du bandeau DSFR
+        role="status"
+        className={cn(noticeVariants({ variant, closable, className }))}
+        {...props}
+      >
+        {!hideIcon && displayIcon && (
+          <span className={cn(noticeIconVariants({ variant }))}>{displayIcon}</span>
+        )}
+        <div className="flex-1 min-w-0">
+          {title && <div className="font-semibold text-base mb-1">{title}</div>}
+          <div className="text-sm">{children}</div>
+        </div>
+        {closable && onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            className={cn(
+              'absolute right-4 top-4 p-1 rounded-md',
+              'hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-current',
+              'transition-colors'
+            )}
+            aria-label="Fermer"
+          >
+            <CloseIcon className="h-5 w-5" aria-hidden="true" />
+          </button>
+        )}
+      </div>
+    )
+  }
+)
+
+Notice.displayName = 'Notice'
+
+export { Notice, noticeVariants }

package/src/components/ui/pagination.tsx

@@ -0,0 +1,348 @@
+'use client'
+
+import { Slot } from '@radix-ui/react-slot'
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { useRouter } from '../../providers/router-provider'
+
+export interface PaginationProps extends React.ComponentPropsWithoutRef<'nav'> {
+  /**
+   * Libellé d'accessibilité pour la navigation
+   */
+  'aria-label'?: string
+}
+
+/**
+ * Conteneur de la pagination DSFR
+ */
+const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
+  ({ className, 'aria-label': ariaLabel = 'Pagination', ...props }, ref) => (
+    <nav
+      ref={ref}
+      aria-label={ariaLabel}
+      className={cn('mx-auto flex w-full justify-center', className)}
+      {...props}
+    />
+  )
+)
+Pagination.displayName = 'Pagination'
+
+/**
+ * Liste des éléments de pagination
+ */
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentPropsWithoutRef<'ul'>>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn('flex flex-row items-center gap-1', className)} {...props} />
+  )
+)
+PaginationContent.displayName = 'PaginationContent'
+
+/**
+ * Élément de pagination individuel
+ */
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
+  ({ className, ...props }, ref) => <li ref={ref} className={cn('', className)} {...props} />
+)
+PaginationItem.displayName = 'PaginationItem'
+
+export interface PaginationLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Si true, rend le composant enfant au lieu d'un <a>
+   */
+  asChild?: boolean
+  /**
+   * Si true, indique que c'est la page actuelle
+   */
+  isActive?: boolean
+  /**
+   * Si true, désactive le lien
+   */
+  disabled?: boolean
+}
+
+/**
+ * Lien de pagination
+ */
+const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
+  ({ className, asChild = false, isActive, disabled, children, ...props }, ref) => {
+    const router = useRouter()
+    const classes = cn(
+      'inline-flex h-10 min-w-10 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      isActive ? 'bg-primary text-primary-foreground' : 'text-primary hover:bg-muted',
+      disabled && 'pointer-events-none opacity-50',
+      className
+    )
+    const sharedProps = {
+      'aria-current': isActive ? ('page' as const) : undefined,
+      'aria-disabled': disabled,
+    }
+
+    if (asChild) {
+      return (
+        <Slot ref={ref} className={classes} {...sharedProps} {...props}>
+          {children}
+        </Slot>
+      )
+    }
+
+    if (router) {
+      const { href: hrefProp, ...restProps } = props
+      const adaptedProps = router.linkPropsAdapter({ href: hrefProp, ...restProps })
+      return (
+        <router.Link ref={ref} className={classes} {...sharedProps} {...adaptedProps}>
+          {children}
+        </router.Link>
+      )
+    }
+
+    return (
+      <a ref={ref} className={classes} {...sharedProps} {...props}>
+        {children}
+      </a>
+    )
+  }
+)
+PaginationLink.displayName = 'PaginationLink'
+
+/**
+ * Bouton première page
+ */
+const PaginationFirst = React.forwardRef<
+  HTMLAnchorElement,
+  PaginationLinkProps & {
+    /**
+     * Libellé du bouton (défaut: "Première page")
+     */
+    label?: string
+    /**
+     * Si true, affiche uniquement l'icône
+     */
+    iconOnly?: boolean
+  }
+>(({ className, label = 'Première page', iconOnly = false, asChild, ...props }, ref) => (
+  <PaginationLink
+    ref={ref}
+    asChild={asChild}
+    aria-label={label}
+    className={cn('gap-1', className)}
+    {...props}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m11 17-5-5 5-5" />
+      <path d="m18 17-5-5 5-5" />
+    </svg>
+    {!iconOnly && <span className="hidden sm:inline">{label}</span>}
+  </PaginationLink>
+))
+PaginationFirst.displayName = 'PaginationFirst'
+
+/**
+ * Bouton page précédente
+ */
+const PaginationPrevious = React.forwardRef<
+  HTMLAnchorElement,
+  PaginationLinkProps & {
+    /**
+     * Libellé du bouton (défaut: "Page précédente")
+     */
+    label?: string
+    /**
+     * Si true, affiche uniquement l'icône
+     */
+    iconOnly?: boolean
+  }
+>(({ className, label = 'Page précédente', iconOnly = false, asChild, ...props }, ref) => (
+  <PaginationLink
+    ref={ref}
+    asChild={asChild}
+    aria-label={label}
+    className={cn('gap-1', className)}
+    {...props}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+    {!iconOnly && <span className="hidden sm:inline">{label}</span>}
+  </PaginationLink>
+))
+PaginationPrevious.displayName = 'PaginationPrevious'
+
+/**
+ * Bouton page suivante
+ */
+const PaginationNext = React.forwardRef<
+  HTMLAnchorElement,
+  PaginationLinkProps & {
+    /**
+     * Libellé du bouton (défaut: "Page suivante")
+     */
+    label?: string
+    /**
+     * Si true, affiche uniquement l'icône
+     */
+    iconOnly?: boolean
+  }
+>(({ className, label = 'Page suivante', iconOnly = false, asChild, ...props }, ref) => (
+  <PaginationLink
+    ref={ref}
+    asChild={asChild}
+    aria-label={label}
+    className={cn('gap-1', className)}
+    {...props}
+  >
+    {!iconOnly && <span className="hidden sm:inline">{label}</span>}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  </PaginationLink>
+))
+PaginationNext.displayName = 'PaginationNext'
+
+/**
+ * Bouton dernière page
+ */
+const PaginationLast = React.forwardRef<
+  HTMLAnchorElement,
+  PaginationLinkProps & {
+    /**
+     * Libellé du bouton (défaut: "Dernière page")
+     */
+    label?: string
+    /**
+     * Si true, affiche uniquement l'icône
+     */
+    iconOnly?: boolean
+  }
+>(({ className, label = 'Dernière page', iconOnly = false, asChild, ...props }, ref) => (
+  <PaginationLink
+    ref={ref}
+    asChild={asChild}
+    aria-label={label}
+    className={cn('gap-1', className)}
+    {...props}
+  >
+    {!iconOnly && <span className="hidden sm:inline">{label}</span>}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m13 17 5-5-5-5" />
+      <path d="m6 17 5-5-5-5" />
+    </svg>
+  </PaginationLink>
+))
+PaginationLast.displayName = 'PaginationLast'
+
+/**
+ * Ellipsis pour indiquer des pages masquées
+ */
+const PaginationEllipsis = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span
+    aria-hidden
+    className={cn('flex h-10 w-10 items-center justify-center', className)}
+    {...props}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" />
+    </svg>
+    <span className="sr-only">Plus de pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = 'PaginationEllipsis'
+
+/**
+ * Composant Pagination DSFR
+ *
+ * Navigation entre les pages d'un contenu paginé.
+ *
+ * @example
+ * ```tsx
+ * <Pagination>
+ *   <PaginationContent>
+ *     <PaginationItem>
+ *       <PaginationPrevious href="#" />
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationLink href="#">1</PaginationLink>
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationLink href="#" isActive>2</PaginationLink>
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationLink href="#">3</PaginationLink>
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationEllipsis />
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationNext href="#" />
+ *     </PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ * ```
+ */
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationItem,
+  PaginationLast,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}