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

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>
-  );
-}

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

@@ -1,114 +0,0 @@
-"use client";
-
-import {
-  BadgeCheck,
-  Bell,
-  ChevronsUpDown,
-  CreditCard,
-  LogOut,
-  Sparkles,
-} from "lucide-react";
-import {
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "../../../ui/sidebar";
-import { Avatar, AvatarFallback, AvatarImage } from "../../../ui/avatar";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../../../ui/dropdown-menu";
-import { useCallback } from "react";
-
-export function NavUser({
-  user,
-  logoutAction = () => {},
-}: {
-  user: {
-    name: string;
-    email: string;
-    avatar: string;
-  };
-
-  logoutAction?: () => void;
-}) {
-  const { isMobile } = useSidebar();
-
-  const renderUserInformation = useCallback(() => {
-    return (
-      <>
-        <Avatar className="h-8 w-8 rounded-lg">
-          <AvatarImage src={user?.avatar} alt={user?.name} />
-          <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-        </Avatar>
-        <div className="grid flex-1 text-left text-sm leading-tight">
-          <span className="truncate font-semibold">{user?.name}</span>
-          <span className="truncate text-xs">{user?.email}</span>
-        </div>
-      </>
-    );
-  }, [user]);
-
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton
-              size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-            >
-              {renderUserInformation()}
-              <ChevronsUpDown className="ml-auto size-4" />
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-            side={isMobile ? "bottom" : "right"}
-            align="end"
-            sideOffset={4}
-          >
-            <DropdownMenuLabel className="p-0 font-normal">
-              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                {renderUserInformation()}
-              </div>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <Sparkles />
-                Upgrade to Pro
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <BadgeCheck />
-                Account
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <CreditCard />
-                Billing
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <Bell />
-                Notifications
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={logoutAction}>
-              <LogOut />
-              Log out
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  );
-}

package/src/components/layout/Sidebar/components/team-switcher.tsx

@@ -1,85 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { ChevronsUpDown, Plus } from "lucide-react";
-import {
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "../../../ui/sidebar";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from "../../../ui/dropdown-menu";
-
-export function TeamSwitcher({
-  teams,
-}: {
-  teams: {
-    name: string;
-    logo: () => React.ReactNode;
-    plan: string;
-  };
-}) {
-  const { isMobile } = useSidebar();
-
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton
-              size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-            >
-              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                {/* {teams?.logo && teams?.logo?.()} */}
-              </div>
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-semibold">{teams?.name}</span>
-                <span className="truncate text-xs">{teams?.plan}</span>
-              </div>
-              <ChevronsUpDown className="ml-auto" />
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          {/* <DropdownMenuContent
-            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-            align="start"
-            side={isMobile ? "bottom" : "right"}
-            sideOffset={4}
-          >
-            <DropdownMenuLabel className="text-xs text-muted-foreground">
-              Teams
-            </DropdownMenuLabel>
-            {teams.map((team, index) => (
-              <DropdownMenuItem
-                key={team.name}
-                onClick={() => setActiveTeam(team)}
-                className="gap-2 p-2"
-              >
-                <div className="flex size-6 items-center justify-center rounded-sm border">
-                  <team.logo className="size-4 shrink-0" />
-                </div>
-                {team.name}
-                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
-              </DropdownMenuItem>
-            ))}
-            <DropdownMenuSeparator />
-            <DropdownMenuItem className="gap-2 p-2">
-              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
-                <Plus className="size-4" />
-              </div>
-              <div className="font-medium text-muted-foreground">Add team</div>
-            </DropdownMenuItem>
-          </DropdownMenuContent> */}
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  );
-}

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

@@ -1,2 +0,0 @@
-export * from "./Sidebar";
-export * from "./components/nav-user";

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

@@ -1,51 +0,0 @@
-"use client";
-import { createContext, useContext, useState } from "react";
-
-interface SidebarContextData {
-  currentPath: string;
-  isCollapsed: boolean;
-  toggleCollapse: () => void;
-  setCurrentPath: (path: string) => void;
-}
-
-interface SidebarProviderProps {
-  children: React.ReactNode;
-  defaultPath?: string;
-  defaultCollapsed?: boolean;
-}
-
-const SidebarContext = createContext({} as SidebarContextData);
-
-export function SidebarProvider({
-  children,
-  defaultPath = "/",
-  defaultCollapsed = false,
-}: SidebarProviderProps) {
-  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
-  const [currentPath, setCurrentPath] = useState(defaultPath);
-
-  const toggleCollapse = () => setIsCollapsed((prev) => !prev);
-
-  return (
-    <SidebarContext.Provider
-      value={{
-        currentPath,
-        isCollapsed,
-        toggleCollapse,
-        setCurrentPath,
-      }}
-    >
-      {children}
-    </SidebarContext.Provider>
-  );
-}
-
-export function useSidebar() {
-  const context = useContext(SidebarContext);
-
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider");
-  }
-
-  return context;
-}

package/src/components/layout/Tabs/Tabs.tsx

@@ -1,51 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  Tabs as TabsUI,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../../components/ui/tabs";
-import { cn } from "../../../lib/utils";
-
-interface TabsProps {
-  tabs: {
-    label: string;
-    content: React.ReactNode;
-  }[];
-  activeTabIndex?: number;
-  onTabChange?: (index: number) => void;
-  className?: string;
-}
-
-export const Tabs: React.FC<TabsProps> = ({
-  tabs,
-  activeTabIndex = 0,
-  onTabChange,
-  className,
-}) => {
-  return (
-    <TabsUI
-      value={tabs[activeTabIndex].label}
-      onValueChange={(value) => {
-        const index = tabs.findIndex((tab) => tab.label === value);
-        if (onTabChange) onTabChange(index);
-      }}
-      className={cn("w-full", className)}
-    >
-      <TabsList>
-        {tabs.map((tab, index) => (
-          <TabsTrigger key={index} value={tab.label}>
-            {tab.label}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-      {tabs.map((tab, index) => (
-        <TabsContent key={index} value={tab.label}>
-          {tab.content}
-        </TabsContent>
-      ))}
-    </TabsUI>
-  );
-};

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

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

package/src/components/layout/Tabs/tabs.stories.tsx

@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { Tabs } from ".";
-
-const meta: Meta<typeof Tabs> = {
-  title: "Layout/Tabs",
-  component: Tabs,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    activeTabIndex: 1,
-    tabs: [
-      {
-        label: "Tab 1",
-        content: <div>Conteúdo da Tab 1</div>,
-      },
-      {
-        label: "Tab 2",
-        content: <div>Conteúdo da Tab 2</div>,
-      },
-      {
-        label: "Tab 3",
-        content: <div>Conteúdo da Tab 3</div>,
-      },
-    ],
-  },
-};
-
-export const Controlled: Story = {
-  args: {
-    tabs: [
-      {
-        label: "Tab 1",
-        content: <div>Conteúdo da Tab 1</div>,
-      },
-      {
-        label: "Tab 2",
-        content: <div>Conteúdo da Tab 2</div>,
-      },
-      {
-        label: "Tab 3",
-        content: <div>Conteúdo da Tab 3</div>,
-      },
-    ],
-    activeTabIndex: 0,
-    onTabChange: (index) => {
-      console.log(`Aba selecionada: ${index}`);
-    },
-  },
-};

package/src/components/layout/index.ts

@@ -1,6 +0,0 @@
-export * from "./Drawer";
-export * from "./Sheet";
-export * from "./Sidebar";
-export * from "./Separator";
-export * from "./PageLayout";
-export * from "./Tabs";

package/src/components/navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -1,66 +0,0 @@
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "../../../components/ui/breadcrumb";
-import { Icon } from "../../dataDisplay";
-import { useMemo } from "react";
-import { usePathname } from "next/navigation";
-
-export type BreadcrumbsProps = {
-  data: {
-    href: string;
-    label: string;
-  }[];
-  isAutoGenerate?: boolean;
-};
-
-export function Breadcrumbs({
-  data,
-  isAutoGenerate = false,
-}: BreadcrumbsProps) {
-  const pathname = usePathname();
-  const breadCrumData = useMemo(() => {
-    if (isAutoGenerate) {
-      const path = pathname.split("/").map((item) => ({
-        href: item,
-        label: item,
-      }));
-      return path.map((item) => {
-        return {
-          href: item.href,
-          label: item.label,
-        };
-      });
-    }
-    return data;
-  }, [data, isAutoGenerate, pathname]);
-
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        {breadCrumData?.map((item, index) => {
-          const isLast = index === data.length - 1;
-          if (isLast) {
-            return (
-              <BreadcrumbItem key={index}>
-                <BreadcrumbPage>{item.label}</BreadcrumbPage>
-              </BreadcrumbItem>
-            );
-          }
-          return (
-            <BreadcrumbItem key={index}>
-              <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
-              <BreadcrumbSeparator>
-                <Icon name="BsSlashLg" />
-              </BreadcrumbSeparator>
-            </BreadcrumbItem>
-          );
-        })}
-      </BreadcrumbList>
-    </Breadcrumb>
-  );
-}

package/src/components/navigation/Breadcrumbs/index.ts

@@ -1,2 +0,0 @@
-// export * from "./Breadcrumbs";
-export * from "../../ui/breadcrumb";

package/src/components/navigation/index.ts

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

package/src/components/ui/alert-dialog.tsx

@@ -1,141 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-
-import { cn } from "../../lib/utils";
-import { buttonVariants } from "../../components/ui/button";
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-);
-AlertDialogHeader.displayName = "AlertDialogHeader";
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};