@phsa.tec/design-system-react 0.1.0

package/src/components/layout/PageLayout/index.tsx

@@ -0,0 +1,28 @@
+import { Text } from "../../../components/dataDisplay";
+import { PropsWithChildren } from "react";
+
+export type PageLayoutProps = PropsWithChildren & {
+  title: string;
+  subtitle?: string;
+  header?: React.ReactNode;
+};
+
+export const PageLayout = ({
+  subtitle,
+  title,
+  children,
+  header,
+}: PageLayoutProps) => {
+  return (
+    <div className="m-5 p-4 bg-white">
+      <div className="flex justify-between">
+        <div>
+          {title && <Text variant="title">{title}</Text>}
+          {subtitle && <Text variant="muted">{subtitle}</Text>}
+        </div>
+        {header}
+      </div>
+      <div className="mt-5">{children}</div>
+    </div>
+  );
+};

package/src/components/layout/Separator/index.ts

@@ -0,0 +1 @@
+export * from "../../ui/separator";

package/src/components/layout/Sheet/Sheet.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+
+import { Sheet } from "./index";
+
+const meta = {
+  title: "Layout/Sheet",
+  component: Sheet,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    open: false,
+    children: "Sheet content",
+  },
+  argTypes: {
+    open: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Sheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/layout/Sheet/Sheet.tsx

@@ -0,0 +1,22 @@
+import {
+  Sheet as SheetComponent,
+  SheetContent,
+} from "../../../components/ui/sheet";
+import { PropsWithChildren } from "react";
+
+export type SheetProps = typeof SheetComponent &
+  PropsWithChildren & {
+    side?: "left" | "right" | "top" | "bottom";
+    className?: string;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+  };
+export function Sheet({ side, className, children, ...props }: SheetProps) {
+  return (
+    <SheetComponent {...props}>
+      <SheetContent side={side} className={className}>
+        {children}
+      </SheetContent>
+    </SheetComponent>
+  );
+}

package/src/components/layout/Sheet/index.ts

@@ -0,0 +1 @@
+export * from "./Sheet";

package/src/components/layout/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { Sidebar } from "./Sidebar";
+import {
+  Users,
+  FileText,
+  LayoutDashboard,
+  UserRound,
+  Archive,
+  Share,
+  BarChart,
+  Shield,
+} from "lucide-react";
+
+const meta = {
+  title: "Layout/Sidebar",
+  component: Sidebar,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Sidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultNavbar = [
+  {
+    title: "Dashboard",
+    items: [
+      { title: "Overview", url: "/dashboard", icon: () => <LayoutDashboard /> },
+      {
+        title: "Analytics",
+        url: "/dashboard/analytics",
+        icon: () => <BarChart />,
+      },
+      {
+        title: "Reports",
+        url: "/dashboard/reports",
+        isActive: true,
+        icon: () => <Archive />,
+      },
+    ],
+  },
+  {
+    title: "Users",
+    url: "/users",
+
+    items: [
+      { title: "All Users", url: "/users", icon: () => <Users /> },
+      {
+        title: "Permissions",
+        url: "/users/permissions",
+        icon: () => <Shield />,
+      },
+      { title: "Roles", url: "/users/roles", icon: () => <UserRound /> },
+    ],
+  },
+  {
+    title: "Documents",
+    url: "/documents",
+    items: [
+      { title: "All Documents", url: "/documents", icon: () => <FileText /> },
+      { title: "Shared", url: "/documents/shared", icon: () => <Share /> },
+      { title: "Archive", url: "/documents/archive", icon: () => <Archive /> },
+    ],
+  },
+];
+
+export const Default: Story = {
+  args: {
+    navbar: defaultNavbar,
+    footer: () => <div>Footer</div>,
+    children: (
+      <div className="space-y-4">
+        <h1 className="text-2xl font-bold">Dashboard Overview</h1>
+        <p className="text-muted-foreground">Welcome to your dashboard.</p>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="rounded-lg bg-white p-6 shadow-sm">
+              <h3 className="font-semibold">Card {i + 1}</h3>
+              <p className="text-sm text-muted-foreground">
+                Card description here
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const WithoutFooter: Story = {
+  args: {
+    navbar: defaultNavbar,
+    showFooter: false,
+    children: (
+      <div className="space-y-4">
+        <h1 className="text-2xl font-bold">Settings</h1>
+        <p className="text-muted-foreground">Manage your account settings.</p>
+        <div className="rounded-lg bg-white p-6 shadow-sm">
+          <h3 className="font-semibold">Settings Content</h3>
+          <p className="text-sm text-muted-foreground">
+            Settings form would go here
+          </p>
+        </div>
+      </div>
+    ),
+  },
+};

package/src/components/layout/Sidebar/Sidebar.tsx

@@ -0,0 +1,50 @@
+"use client";
+import {
+  SidebarInset,
+  SidebarProvider as UISidebarProvider,
+} from "../../ui/sidebar";
+import { AppSidebar, AppSidebarProps } from "./components/app-sidebar";
+import { HeaderSidebar } from "./components/header-sidebar";
+import { FooterSidebar } from "./components/footer-sidebar";
+import { cn } from "../../../lib/utils";
+import { SidebarProvider } from "./provider";
+
+interface SidebarProps extends AppSidebarProps {
+  children: React.ReactNode;
+  contentClassName?: string;
+  showFooter?: boolean;
+  defaultPath?: string;
+  defaultCollapsed?: boolean;
+}
+
+export const Sidebar = ({
+  children,
+  contentClassName,
+  showFooter = true,
+  defaultPath,
+  defaultCollapsed,
+  ...rest
+}: SidebarProps) => {
+  return (
+    <SidebarProvider
+      defaultPath={defaultPath}
+      defaultCollapsed={defaultCollapsed}
+    >
+      <UISidebarProvider>
+        <AppSidebar {...rest} />
+        <SidebarInset className="overflow-auto bg-slate-50">
+          <HeaderSidebar />
+          <main
+            className={cn(
+              "flex flex-1 flex-col gap-4 p-4 pt-0",
+              contentClassName
+            )}
+          >
+            {children}
+          </main>
+          {showFooter && <FooterSidebar />}
+        </SidebarInset>
+      </UISidebarProvider>
+    </SidebarProvider>
+  );
+};

package/src/components/layout/Sidebar/components/app-sidebar.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import * as React from "react";
+import {
+  AudioWaveform,
+  BookOpen,
+  Bot,
+  Command,
+  Frame,
+  GalleryVerticalEnd,
+  Map,
+  PieChart,
+  Settings2,
+  SquareTerminal,
+} from "lucide-react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from "../../../ui/sidebar";
+import { TeamSwitcher } from "./team-switcher";
+import { Menus } from "./menus";
+import { NavProjects } from "./nav-projects";
+import { NavUser } from "./nav-user";
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: GalleryVerticalEnd,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Models",
+      url: "#",
+      icon: Bot,
+      items: [
+        {
+          title: "Genesis",
+          url: "#",
+        },
+        {
+          title: "Explorer",
+          url: "#",
+        },
+        {
+          title: "Quantum",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      items: [
+        {
+          title: "Introduction",
+          url: "#",
+        },
+        {
+          title: "Get Started",
+          url: "#",
+        },
+        {
+          title: "Tutorials",
+          url: "#",
+        },
+        {
+          title: "Changelog",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      items: [
+        {
+          title: "General",
+          url: "#",
+        },
+        {
+          title: "Team",
+          url: "#",
+        },
+        {
+          title: "Billing",
+          url: "#",
+        },
+        {
+          title: "Limits",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  projects: [
+    {
+      name: "Design Engineering",
+      url: "#",
+      icon: Frame,
+    },
+    {
+      name: "Sales & Marketing",
+      url: "#",
+      icon: PieChart,
+    },
+    {
+      name: "Travel",
+      url: "#",
+      icon: Map,
+    },
+  ],
+};
+
+export type AppSidebarProps = {
+  footer?: () => React.ReactNode;
+  user?: {
+    email?: string;
+    name?: string;
+  };
+  enterprise?: {
+    name: string;
+    logo: () => React.ReactNode;
+    plan: string;
+  };
+  navbar: {
+    title: string;
+    items: {
+      title: string;
+      url: string;
+      isActive?: boolean | undefined;
+      icon?: () => React.ReactNode;
+    }[];
+  }[];
+};
+
+export function AppSidebar({
+  navbar = [],
+  user = {},
+  enterprise = {
+    name: "Acme Inc",
+    logo: GalleryVerticalEnd,
+    plan: "Enterprise",
+  },
+  footer,
+  ...props
+}: AppSidebarProps) {
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={enterprise} />
+      </SidebarHeader>
+      <SidebarContent>
+        <Menus items={navbar} />
+      </SidebarContent>
+      {footer && <SidebarFooter>{footer()}</SidebarFooter>}
+      <SidebarRail />
+    </Sidebar>
+  );
+}

package/src/components/layout/Sidebar/components/footer-sidebar.tsx

@@ -0,0 +1,17 @@
+import { Separator } from "../../Separator";
+
+export const FooterSidebar = () => {
+  return (
+    <footer className="h-[65px]">
+      <Separator />
+      <div className="flex items-center justify-between h-16 bg-background px-5">
+        <span className="text-sm text-muted-foreground">
+          © {new Date().getFullYear()} Your Company
+        </span>
+        <span className="text-sm text-muted-foreground">
+          Feito na terra do sol 🌞
+        </span>
+      </div>
+    </footer>
+  );
+};

package/src/components/layout/Sidebar/components/header-sidebar.tsx

@@ -0,0 +1,90 @@
+"use client";
+import { SidebarTrigger } from "../../../ui/sidebar";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbPage,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+} from "../../../ui/breadcrumb";
+import { Separator } from "../../Separator";
+import { useSidebar } from "../provider";
+
+interface BreadcrumbItemProps {
+  isLast?: boolean;
+  path: string;
+  label: string;
+}
+
+const routeMap: Record<string, string> = {
+  dashboard: "Dashboard",
+  users: "Usuários",
+  documents: "Documentos",
+  settings: "Configurações",
+  create: "Criar",
+  edit: "Editar",
+  profile: "Perfil",
+  analytics: "Análises",
+  reports: "Relatórios",
+};
+
+const BreadcrumbElement = ({ isLast, path, label }: BreadcrumbItemProps) => {
+  if (isLast) {
+    return (
+      <BreadcrumbItem>
+        <BreadcrumbPage className="capitalize">{label}</BreadcrumbPage>
+      </BreadcrumbItem>
+    );
+  }
+
+  return (
+    <BreadcrumbItem>
+      <BreadcrumbLink href={path} className="capitalize">
+        {label}
+      </BreadcrumbLink>
+      <BreadcrumbSeparator />
+    </BreadcrumbItem>
+  );
+};
+
+export const HeaderSidebar = () => {
+  const { currentPath } = useSidebar();
+
+  const breadcrumbItems = currentPath
+    .split("/")
+    .filter(Boolean)
+    .map((segment, index, array) => {
+      const path = `/${array.slice(0, index + 1).join("/")}`;
+      const isLast = index === array.length - 1;
+      const label = routeMap[segment] || segment;
+
+      return {
+        path,
+        label,
+        isLast,
+      };
+    });
+
+  return (
+    <header className="flex h-16 shrink-0 items-center border-b border-border bg-background px-4 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+      <div className="flex items-center gap-4">
+        <SidebarTrigger className="-ml-2 h-9 w-9" />
+        <Separator orientation="vertical" className="h-6" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/" className="capitalize">
+                Home
+              </BreadcrumbLink>
+              <BreadcrumbSeparator />
+            </BreadcrumbItem>
+            {breadcrumbItems.map((item) => (
+              <BreadcrumbElement key={item.path} {...item} />
+            ))}
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+    </header>
+  );
+};

package/src/components/layout/Sidebar/components/menus.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { cn } from "../../../../lib/utils";
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "../../../ui/sidebar";
+import React from "react";
+
+export function Menus({
+  items,
+}: {
+  items: {
+    title: string;
+    url: string;
+    items?: {
+      title: string;
+      url: string;
+      icon?: () => React.ReactNode;
+      isActive?: boolean | undefined;
+    }[];
+  }[];
+}) {
+  return (
+    <>
+      {items.map((item, index) => {
+        return (
+          <SidebarGroup key={index}>
+            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
+            <SidebarMenu>
+              {item.items?.map((subItem) => (
+                <SidebarMenuItem key={subItem.title}>
+                  <SidebarMenuButton
+                    asChild
+                    className={cn(
+                      subItem?.isActive && "bg-sidebar-accent font-semibold"
+                    )}
+                  >
+                    <a href={subItem.url}>
+                      {subItem?.icon && subItem.icon()}
+                      <span>{subItem.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        );
+      })}
+    </>
+  );
+}