@phsa.tec/design-system-react 0.1.6 → 0.1.9

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

@@ -1,116 +0,0 @@
-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

@@ -1,50 +0,0 @@
-"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

@@ -1,203 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-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

@@ -1,90 +0,0 @@
-"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

@@ -1,55 +0,0 @@
-"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>
-        );
-      })}
-    </>
-  );
-}

package/src/components/layout/Sidebar/components/nav-projects.tsx

@@ -1,88 +0,0 @@
-"use client";
-
-import {
-  Folder,
-  Forward,
-  MoreHorizontal,
-  Trash2,
-  type LucideIcon,
-} from "lucide-react";
-import {
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "../../../ui/sidebar";
-import {
-  DropdownMenu,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "../../../ui/dropdown-menu";
-
-export function NavProjects({
-  projects,
-}: {
-  projects: {
-    name: string;
-    url: string;
-    icon: LucideIcon;
-  }[];
-}) {
-  const { isMobile } = useSidebar();
-
-  return (
-    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-      <SidebarGroupLabel>Projects</SidebarGroupLabel>
-      <SidebarMenu>
-        {projects.map((item) => (
-          <SidebarMenuItem key={item.name}>
-            <SidebarMenuButton asChild>
-              <a href={item.url}>
-                <item.icon />
-                <span>{item.name}</span>
-              </a>
-            </SidebarMenuButton>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <SidebarMenuAction showOnHover>
-                  <MoreHorizontal />
-                  <span className="sr-only">More</span>
-                </SidebarMenuAction>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                className="w-48 rounded-lg"
-                side={isMobile ? "bottom" : "right"}
-                align={isMobile ? "end" : "start"}
-              >
-                <DropdownMenuItem>
-                  <Folder className="text-muted-foreground" />
-                  <span>View Project</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Forward className="text-muted-foreground" />
-                  <span>Share Project</span>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>
-                  <Trash2 className="text-muted-foreground" />
-                  <span>Delete Project</span>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </SidebarMenuItem>
-        ))}
-        <SidebarMenuItem>
-          <SidebarMenuButton className="text-sidebar-foreground/70">
-            <MoreHorizontal className="text-sidebar-foreground/70" />
-            <span>More</span>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarMenu>
-    </SidebarGroup>
-  );
-}