Feat/fct 16897/new tab layout

.storybook/main.ts

@@ -9,8 +9,8 @@ const config: StorybookConfig = {
  titlePrefix: "Components",
  },
  {
- directory: "../src/examples",
- titlePrefix: "Examples",
+ directory: "../src/playground",
+ titlePrefix: "Playground",
  },
  {
  directory: "../src/experiments",

lib/components/Information/Avatar/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Avatar, AvatarFallback, AvatarImage, sizes } from "@/ui/avatar"
+import { Avatar } from "."
 
 const meta = {
  component: Avatar,
@@ -10,13 +10,14 @@ const meta = {
  tags: ["autodocs"],
  args: {
  size: "medium",
+ src: "https://github.com/dani-moreno.png",
+ alt: "DM",
  },
  argTypes: {
  size: {
  control: {
  type: "select",
  },
- options: [...sizes],
  },
  },
 } satisfies Meta<typeof Avatar>
@@ -25,33 +26,13 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
- render({ size }) {
- return (
- <Avatar size={size}>
- <AvatarImage
- src="https://github.com/dani-moreno.png"
- alt="@dani-moreno"
- />
- <AvatarFallback>DM</AvatarFallback>
- </Avatar>
- )
+ render({ size, src, alt }) {
+ return <Avatar size={size} src={src} alt={alt} />
  },
 }
 
-Basic.args = {
- size: "medium",
-}
-
 export const Fallback: Story = {
- render({ size }) {
- return (
- <Avatar size={size}>
- <AvatarFallback>DM</AvatarFallback>
- </Avatar>
- )
+ render({ size, alt }) {
+ return <Avatar size={size} alt={alt} />
  },
 }
-
-Fallback.args = {
- size: "medium",
-}

lib/components/Information/Avatar/index.tsx

@@ -1 +1,23 @@
-export * from "@/ui/avatar"
+import {
+ Avatar as AvatarComponent,
+ AvatarFallback,
+ AvatarImage,
+} from "@/ui/avatar"
+import { ComponentProps, forwardRef } from "react"
+
+interface AvatarType {
+ alt: string
+ src?: string
+ size?: ComponentProps<typeof AvatarComponent>["size"]
+}
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarType>(
+ ({ src, alt, size }, ref) => {
+ return (
+ <AvatarComponent size={size} ref={ref}>
+ <AvatarImage src={src} alt={alt} />
+ <AvatarFallback>{alt}</AvatarFallback>
+ </AvatarComponent>
+ )
+ }
+)

lib/components/Navigation/Breadcrumb/index.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { User } from "@/icons"
+import { Breadcrumb } from "."
+
+const meta = {
+ component: Breadcrumb,
+ tags: ["autodocs"],
+} satisfies Meta<typeof Breadcrumb>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+ args: {
+ routes: [
+ { title: "Employees", url: "/employees" },
+ { title: "Engineers", url: "/engineers" },
+ ],
+ title: "Alba Horneros",
+ icon: User,
+ },
+}

lib/components/Navigation/Breadcrumb/index.tsx

@@ -0,0 +1,49 @@
+import { Icon, IconType } from "@/components/Utilities/Icon"
+import { forwardRef } from "react"
+import {
+ Breadcrumb as BreadcrumbComponent,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbList,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+} from "../../../ui/breadcrumb"
+
+interface BreadcrumbsType {
+ icon: IconType
+ routes: RouteType[]
+ title: string
+}
+
+interface RouteType {
+ title: string
+ url: string
+}
+
+export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbsType>(
+ ({ icon, routes, title }, ref) => {
+ return (
+ <BreadcrumbComponent
+ className="flex min-h-6 flex-row border-x-0 border-t-0 border-dashed border-b-muted px-5 py-3"
+ ref={ref}
+ >
+ <span className="flex items-center pr-1 text-primary-foreground">
+ <Icon size="md" icon={icon} />
+ </span>
+ <BreadcrumbList>
+ {routes.map((route, index) => (
+ <>
+ <BreadcrumbItem key={route.title + index}>
+ <BreadcrumbLink href={route.url}>{route.title}</BreadcrumbLink>
+ </BreadcrumbItem>
+ <BreadcrumbSeparator />
+ </>
+ ))}
+ <BreadcrumbItem>
+ <BreadcrumbPage>{title}</BreadcrumbPage>
+ </BreadcrumbItem>
+ </BreadcrumbList>
+ </BreadcrumbComponent>
+ )
+ }
+)

lib/ui/breadcrumb.tsx

@@ -0,0 +1,121 @@
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef<
+ HTMLElement,
+ React.ComponentPropsWithoutRef<"nav"> & {
+ separator?: React.ReactNode
+ }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+ HTMLOListElement,
+ React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+ <ol
+ ref={ref}
+ className={cn(
+ "flex list-none flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground",
+ className
+ )}
+ {...props}
+ />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+ HTMLLIElement,
+ React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+ <li
+ ref={ref}
+ className={cn("inline-flex items-center gap-1.5", className)}
+ {...props}
+ />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+ HTMLAnchorElement,
+ React.ComponentPropsWithoutRef<"a"> & {
+ asChild?: boolean
+ }
+>(({ asChild, className, ...props }, ref) => {
+ const Comp = asChild ? Slot : "a"
+
+ return (
+ <Comp
+ ref={ref}
+ className={cn(
+ "text-foreground no-underline transition-colors hover:text-primary-foreground",
+ className
+ )}
+ {...props}
+ />
+ )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+ HTMLSpanElement,
+ React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+ <span
+ ref={ref}
+ role="link"
+ aria-disabled="true"
+ aria-current="page"
+ className={cn("text-secondary-foreground", className)}
+ {...props}
+ />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+ children,
+ className,
+ ...props
+}: React.ComponentProps<"li">) => (
+ <li
+ role="presentation"
+ aria-hidden="true"
+ className={cn(
+ "flex align-bottom text-secondary-foreground [&>svg]:size-3.5",
+ className
+ )}
+ {...props}
+ >
+ {children ?? <ChevronRight />}
+ </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+ className,
+ ...props
+}: React.ComponentProps<"span">) => (
+ <span
+ role="presentation"
+ aria-hidden="true"
+ className={cn("flex h-9 w-9 items-center justify-center", className)}
+ {...props}
+ >
+ <MoreHorizontal className="h-4 w-4" />
+ <span className="sr-only">More</span>
+ </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+ Breadcrumb,
+ BreadcrumbEllipsis,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbList,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+}

src/playground/Pages/Header/index.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Header } from "."
+
+const meta = {
+ component: Header,
+ tags: ["autodocs"],
+ args: {
+ title: "Alba Horneros",
+ subtitle: "Product Designer",
+ src: "https://github.com/dani-moreno.png",
+ alt: "DM",
+ },
+} satisfies Meta<typeof Header>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+ args: {
+ title: "Alba Horneros",
+ subtitle: "Product Designer",
+ src: "https://github.com/dani-moreno.png",
+ alt: "DM",
+ },
+}

src/playground/Pages/Header/index.tsx

@@ -0,0 +1,23 @@
+import { Avatar } from "@/components/Information/Avatar"
+import { forwardRef } from "react"
+
+interface HeaderProps {
+ title: string
+ subtitle: string
+ src: string
+ alt: string
+}
+
+export const Header = forwardRef<HTMLDivElement, HeaderProps>(
+ ({ title, subtitle, src, alt }, ref) => {
+ return (
+ <div className="flex px-10 py-6" ref={ref}>
+ <Avatar size="xlarge" src={src} alt={alt} />
+ <div className="flex flex-col gap-2 pl-5">
+ <h1 className="pt-2 text-2xl font-medium text-foreground">{title}</h1>
+ <h2 className="text-lg font-normal text-intermediate">{subtitle}</h2>
+ </div>
+ </div>
+ )
+ }
+)