@dsfrkit/react 0.1.0

package/src/components/navigation/footer.tsx

@@ -0,0 +1,173 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {}
+
+/**
+ * Conteneur principal du Footer DSFR
+ *
+ * @example
+ * ```tsx
+ * <Footer>
+ *   <FooterBody>
+ *     <FooterBrand
+ *       logo={<img src="/logo.svg" alt="Logo" />}
+ *       description="Description du service"
+ *     />
+ *     <FooterContent>
+ *       <FooterLinks title="Liens utiles">
+ *         <NavLink href="/mentions-legales" variant="footer">Mentions légales</NavLink>
+ *         <NavLink href="/accessibilite" variant="footer">Accessibilité</NavLink>
+ *       </FooterLinks>
+ *     </FooterContent>
+ *   </FooterBody>
+ *   <FooterBottom>
+ *     <p>© 2024 - Tous droits réservés</p>
+ *   </FooterBottom>
+ * </Footer>
+ * ```
+ */
+const Footer = React.forwardRef<HTMLElement, FooterProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <footer
+        ref={ref}
+        id="footer"
+        className={cn('w-full bg-background-alt border-t border-border', className)}
+        {...props}
+      >
+        {children}
+      </footer>
+    )
+  }
+)
+
+Footer.displayName = 'Footer'
+
+/**
+ * Corps principal du Footer
+ */
+const FooterBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('fr-container py-8 md:py-12 flex flex-col md:flex-row gap-8', className)}
+      {...props}
+    />
+  )
+)
+
+FooterBody.displayName = 'FooterBody'
+
+export interface FooterBrandProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Logo ou image de marque
+   */
+  logo?: React.ReactNode
+  /**
+   * Description du service
+   */
+  description?: string
+  /**
+   * URL de destination du logo
+   */
+  href?: string
+}
+
+/**
+ * Zone de marque du Footer
+ */
+const FooterBrand = React.forwardRef<HTMLDivElement, FooterBrandProps>(
+  ({ className, logo, description, href = '/', ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col gap-4 md:max-w-xs', className)} {...props}>
+      {logo && (
+        <a href={href} className="flex-shrink-0 w-fit">
+          {logo}
+        </a>
+      )}
+      {description && <p className="text-sm text-foreground-muted">{description}</p>}
+    </div>
+  )
+)
+
+FooterBrand.displayName = 'FooterBrand'
+
+/**
+ * Zone de contenu du Footer (colonnes de liens)
+ */
+const FooterContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex-1 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8', className)}
+      {...props}
+    />
+  )
+)
+
+FooterContent.displayName = 'FooterContent'
+
+export interface FooterLinksProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Titre de la section de liens
+   */
+  title?: string
+}
+
+/**
+ * Groupe de liens dans le Footer
+ */
+const FooterLinks = React.forwardRef<HTMLDivElement, FooterLinksProps>(
+  ({ className, title, children, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col gap-2', className)} {...props}>
+      {title && <h3 className="font-semibold text-foreground-title mb-2">{title}</h3>}
+      <nav aria-label={title || 'Navigation'} className="flex flex-col gap-1 text-sm">
+        {children}
+      </nav>
+    </div>
+  )
+)
+
+FooterLinks.displayName = 'FooterLinks'
+
+/**
+ * Zone inférieure du Footer (copyright, mentions)
+ */
+const FooterBottom = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('border-t border-border bg-background', className)} {...props}>
+      <div className="fr-container py-4 flex flex-col md:flex-row items-center justify-between gap-4 text-sm text-foreground-muted">
+        {props.children}
+      </div>
+    </div>
+  )
+)
+
+FooterBottom.displayName = 'FooterBottom'
+
+/**
+ * Liens légaux dans le Footer (mentions légales, accessibilité, etc.)
+ */
+const FooterLegalLinks = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(
+  ({ className, children, ...props }, ref) => (
+    <ul ref={ref} className={cn('flex flex-wrap items-center gap-4 text-sm', className)} {...props}>
+      {React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child)) return child
+        if (child.type === 'li') return child
+        return <li key={index}>{child}</li>
+      })}
+    </ul>
+  )
+)
+
+FooterLegalLinks.displayName = 'FooterLegalLinks'
+
+export {
+  Footer,
+  FooterBody,
+  FooterBottom,
+  FooterBrand,
+  FooterContent,
+  FooterLegalLinks,
+  FooterLinks,
+}

package/src/components/navigation/header.tsx

@@ -0,0 +1,236 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Logo ou nom du service
+   */
+  logo?: React.ReactNode
+  /**
+   * Titre du service
+   */
+  serviceTitle?: string
+  /**
+   * Sous-titre ou tagline
+   */
+  serviceTagline?: string
+}
+
+/**
+ * Conteneur principal du Header DSFR
+ *
+ * @example
+ * ```tsx
+ * <Header>
+ *   <HeaderBody>
+ *     <HeaderBrand
+ *       logo={<img src="/logo.svg" alt="Logo" />}
+ *       serviceTitle="Mon Service"
+ *       serviceTagline="Description du service"
+ *     />
+ *     <HeaderNav>
+ *       <NavLink href="/" variant="header" isActive>Accueil</NavLink>
+ *       <NavLink href="/services" variant="header">Services</NavLink>
+ *     </HeaderNav>
+ *     <HeaderActions>
+ *       <Button variant="ghost" size="sm">Connexion</Button>
+ *     </HeaderActions>
+ *   </HeaderBody>
+ * </Header>
+ * ```
+ */
+const Header = React.forwardRef<HTMLElement, HeaderProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <header
+        ref={ref}
+        className={cn('w-full bg-background-elevated border-b border-border', className)}
+        {...props}
+      >
+        {children}
+      </header>
+    )
+  }
+)
+
+Header.displayName = 'Header'
+
+/**
+ * Corps du Header contenant les éléments principaux
+ */
+const HeaderBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('fr-container flex items-center justify-between gap-4 py-4', className)}
+      {...props}
+    />
+  )
+)
+
+HeaderBody.displayName = 'HeaderBody'
+
+export interface HeaderBrandProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Logo ou image de marque
+   */
+  logo?: React.ReactNode
+  /**
+   * Titre du service
+   */
+  serviceTitle?: string
+  /**
+   * Tagline ou description
+   */
+  serviceTagline?: string
+  /**
+   * URL de destination du logo
+   */
+  href?: string
+}
+
+/**
+ * Zone de marque du Header (logo + titre)
+ */
+const HeaderBrand = React.forwardRef<HTMLDivElement, HeaderBrandProps>(
+  ({ className, logo, serviceTitle, serviceTagline, href = '/', ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center gap-4', className)} {...props}>
+      {logo && (
+        <a href={href} className="flex-shrink-0">
+          {logo}
+        </a>
+      )}
+      {(serviceTitle || serviceTagline) && (
+        <div className="flex flex-col">
+          {serviceTitle && (
+            <a href={href} className="text-lg font-bold text-foreground hover:text-primary">
+              {serviceTitle}
+            </a>
+          )}
+          {serviceTagline && (
+            <span className="text-sm text-foreground-muted">{serviceTagline}</span>
+          )}
+        </div>
+      )}
+    </div>
+  )
+)
+
+HeaderBrand.displayName = 'HeaderBrand'
+
+/**
+ * Zone de navigation principale du Header
+ */
+const HeaderNav = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, children, ...props }, ref) => (
+    <nav
+      ref={ref}
+      id="main-navigation"
+      aria-label="Navigation principale"
+      className={cn('hidden md:flex items-center gap-2 fr-nav', className)}
+      {...props}
+    >
+      <ul className={cn('fr-nav__list flex items-center gap-2')}>
+        {React.Children.map(children, (child) => {
+          if (!React.isValidElement(child)) return child
+
+          const childType = child.type as React.ComponentType & { displayName?: string }
+          const isNavLink = childType?.displayName === 'NavLink' || childType?.name === 'NavLink'
+
+          const childProps = child.props as Record<string, unknown>
+          const patched =
+            isNavLink && childProps.variant === undefined
+              ? React.cloneElement(child, { variant: 'header' })
+              : child
+
+          return <li className="fr-nav__item">{patched}</li>
+        })}
+      </ul>
+    </nav>
+  )
+)
+
+HeaderNav.displayName = 'HeaderNav'
+
+/**
+ * Zone d'actions du Header (boutons, recherche, etc.)
+ */
+const HeaderActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center gap-2', className)} {...props} />
+  )
+)
+
+HeaderActions.displayName = 'HeaderActions'
+
+/**
+ * Bouton menu mobile du Header
+ */
+export interface HeaderMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * État ouvert/fermé du menu
+   */
+  isOpen?: boolean
+  /**
+   * Callback lors du clic
+   */
+  onToggle?: () => void
+}
+
+const HeaderMenuButton = React.forwardRef<HTMLButtonElement, HeaderMenuButtonProps>(
+  ({ className, isOpen, onToggle, ...props }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      onClick={onToggle}
+      aria-expanded={isOpen}
+      aria-controls="mobile-menu"
+      aria-label={isOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
+      className={cn(
+        'md:hidden p-2 rounded-md text-foreground',
+        'hover:bg-background-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+        className
+      )}
+      {...props}
+    >
+      {isOpen ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <line x1="4" y1="6" x2="20" y2="6" />
+          <line x1="4" y1="12" x2="20" y2="12" />
+          <line x1="4" y1="18" x2="20" y2="18" />
+        </svg>
+      )}
+    </button>
+  )
+)
+
+HeaderMenuButton.displayName = 'HeaderMenuButton'
+
+export { Header, HeaderActions, HeaderBody, HeaderBrand, HeaderMenuButton, HeaderNav }

package/src/components/navigation/index.ts

@@ -0,0 +1,29 @@
+export type { FooterBrandProps, FooterLinksProps, FooterProps } from './footer'
+export {
+  Footer,
+  FooterBody,
+  FooterBottom,
+  FooterBrand,
+  FooterContent,
+  FooterLegalLinks,
+  FooterLinks,
+} from './footer'
+export type { HeaderBrandProps, HeaderMenuButtonProps, HeaderProps } from './header'
+export {
+  Header,
+  HeaderActions,
+  HeaderBody,
+  HeaderBrand,
+  HeaderMenuButton,
+  HeaderNav,
+} from './header'
+export type { NavLinkProps } from './nav-link'
+export { NavLink, navLinkVariants } from './nav-link'
+export type { NavigationItemProps, NavigationProps, NavigationSectionProps } from './navigation'
+export {
+  Navigation,
+  NavigationItem,
+  NavigationSection,
+} from './navigation'
+export type { SkipLink, SkipLinksProps } from './skip-links'
+export { SkipLinks } from './skip-links'

package/src/components/navigation/nav-link.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { useRouter } from '../../providers/router-provider'
+
+const navLinkVariants = cva(
+  'inline-flex items-center gap-2 relative font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary',
+  {
+    variants: {
+      variant: {
+        default: [
+          'text-foreground hover:text-primary hover:bg-background-contrast',
+          'data-[active=true]:text-primary data-[active=true]:border-b-[2px] data-[active=true]:border-primary',
+        ],
+        header: [
+          'text-foreground hover:text-primary',
+          'py-3 px-4 md:py-3 md:px-4 md:text-base',
+          'data-[active=true]:text-primary data-[active=true]:border-b-[2px] data-[active=true]:border-primary',
+        ],
+        side: [
+          'text-foreground hover:text-primary hover:bg-background-contrast',
+          'w-full px-4 py-2',
+          'data-[active=true]:text-primary data-[active=true]:bg-background-contrast data-[active=true]:border-l-2 data-[active=true]:border-border-active',
+        ],
+        footer: ['text-foreground hover:text-primary hover:underline', 'text-xs py-0.5 px-0'],
+      },
+      size: {
+        sm: 'text-sm py-1 px-2',
+        md: 'text-base py-2 px-3',
+        lg: 'text-lg py-3 px-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+)
+
+export interface NavLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    VariantProps<typeof navLinkVariants> {
+  /**
+   * Si true, rend le composant enfant au lieu d'un <a>
+   */
+  asChild?: boolean
+  /**
+   * Indique si le lien est actif (page courante)
+   */
+  isActive?: boolean
+  /**
+   * L'icône à afficher dans l'élément (ex: `<RemixIcon />`)
+   */
+  icon?: React.ReactNode
+  /**
+   * La position de l'icône ('start' ou 'end'). Par défaut: 'start'
+   */
+  iconPosition?: 'start' | 'end'
+}
+
+/**
+ * Composant NavLink DSFR polymorphique
+ *
+ * Lien de navigation adaptable à différents contextes (header, sidebar, footer).
+ */
+const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      isActive,
+      icon,
+      iconPosition = 'start',
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const router = useRouter()
+    const sharedProps = {
+      'data-active': isActive,
+      'aria-current': isActive ? ('page' as const) : undefined,
+      className: cn('fr-nav__link', navLinkVariants({ variant, size, className })),
+    }
+
+    const content = (
+      <>
+        {icon && iconPosition === 'start' && (
+          <span className="flex-shrink-0 flex items-center justify-center" aria-hidden="true">
+            {icon}
+          </span>
+        )}
+        {children}
+        {icon && iconPosition === 'end' && (
+          <span className="flex-shrink-0 flex items-center justify-center" aria-hidden="true">
+            {icon}
+          </span>
+        )}
+      </>
+    )
+
+    if (asChild) {
+      return (
+        <Slot ref={ref} {...sharedProps} {...props}>
+          {children}
+        </Slot>
+      )
+    }
+
+    if (router) {
+      const { href: hrefProp, ...restProps } = props
+      const adaptedProps = router.linkPropsAdapter({ href: hrefProp, ...restProps })
+      return (
+        <router.Link ref={ref} {...sharedProps} {...adaptedProps}>
+          {content}
+        </router.Link>
+      )
+    }
+
+    return (
+      <a ref={ref} {...sharedProps} {...props}>
+        {content}
+      </a>
+    )
+  }
+)
+
+NavLink.displayName = 'NavLink'
+
+export { NavLink, navLinkVariants }