@mdguggenbichler/slugbase-core 0.0.4 → 0.0.6

package/frontend/src/components/ui/SharingField.tsx

@@ -0,0 +1,298 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAuth } from '../../contexts/AuthContext';
+import api from '../../api/client';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { Switch } from './switch';
+import { Label } from './label';
+import { Badge } from './badge';
+import { Input } from './input';
+import { ScrollArea } from './scroll-area';
+import Button from './Button';
+import { Users, User, Search, X, Check, UserPlus } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface Team {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+interface UserType {
+  id: string;
+  name: string;
+  email: string;
+}
+
+export interface SharingValue {
+  user_ids: string[];
+  team_ids: string[];
+  share_all_teams: boolean;
+}
+
+interface SharingFieldProps {
+  value: SharingValue;
+  onChange: (value: SharingValue) => void;
+  teams: Team[];
+  allowTeamSharing: boolean;
+  label?: string;
+  disabled?: boolean;
+}
+
+export function SharingField({
+  value,
+  onChange,
+  teams,
+  allowTeamSharing,
+  label,
+  disabled = false,
+}: SharingFieldProps) {
+  const { t } = useTranslation();
+  const { user } = useAuth();
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [allUsers, setAllUsers] = useState<UserType[]>([]);
+  const [userSearchQuery, setUserSearchQuery] = useState('');
+  const [teamSearchQuery, setTeamSearchQuery] = useState('');
+
+  useEffect(() => {
+    if (popoverOpen || value.user_ids.length > 0) {
+      loadUsers();
+    }
+  }, [popoverOpen, value.user_ids.length]);
+
+  async function loadUsers() {
+    try {
+      const response = await api.get('/admin/users');
+      const users = Array.isArray(response.data) ? response.data : [];
+      setAllUsers(users.filter((u: UserType) => u.id !== user?.id));
+    } catch (error) {
+      console.error('Failed to load users:', error);
+    }
+  }
+
+  const filteredUsers = allUsers.filter((u) => {
+    if (!userSearchQuery.trim()) return true;
+    const query = userSearchQuery.toLowerCase();
+    return u.name.toLowerCase().includes(query) || u.email.toLowerCase().includes(query);
+  });
+
+  const filteredTeams = teams.filter((t) => {
+    if (!teamSearchQuery.trim()) return true;
+    const query = teamSearchQuery.toLowerCase();
+    return t.name.toLowerCase().includes(query) || (t.description && t.description.toLowerCase().includes(query));
+  });
+
+  const selectedTeams = teams.filter((t) => value.team_ids.includes(t.id));
+  const selectedUsers = allUsers.filter((u) => value.user_ids.includes(u.id));
+  const hasSelected = value.share_all_teams || selectedTeams.length > 0 || selectedUsers.length > 0;
+
+  function handleShareAllTeamsChange(checked: boolean) {
+    onChange({
+      ...value,
+      share_all_teams: checked,
+      team_ids: checked ? [] : value.team_ids,
+    });
+  }
+
+  function toggleTeam(teamId: string) {
+    if (value.share_all_teams) return;
+    onChange({
+      ...value,
+      team_ids: value.team_ids.includes(teamId)
+        ? value.team_ids.filter((id) => id !== teamId)
+        : [...value.team_ids, teamId],
+    });
+  }
+
+  function toggleUser(userId: string) {
+    onChange({
+      ...value,
+      user_ids: value.user_ids.includes(userId)
+        ? value.user_ids.filter((id) => id !== userId)
+        : [...value.user_ids, userId],
+    });
+  }
+
+  function removeTeam(teamId: string) {
+    onChange({
+      ...value,
+      team_ids: value.team_ids.filter((id) => id !== teamId),
+    });
+  }
+
+  function removeUser(userId: string) {
+    onChange({
+      ...value,
+      user_ids: value.user_ids.filter((id) => id !== userId),
+    });
+  }
+
+  return (
+    <div className="space-y-3">
+      {label && (
+        <Label className="text-sm font-medium">{label}</Label>
+      )}
+
+      {allowTeamSharing && (
+        <div className="flex items-center justify-between rounded-lg border p-3">
+          <div>
+            <p className="text-sm font-medium">{t('bookmarks.shareAllTeams')}</p>
+            <p className="text-xs text-muted-foreground">
+              {t('bookmarks.shareAllTeamsDescription')}
+            </p>
+          </div>
+          <Switch
+            checked={value.share_all_teams}
+            onCheckedChange={handleShareAllTeamsChange}
+            disabled={disabled}
+          />
+        </div>
+      )}
+
+      <div className="flex flex-wrap gap-2">
+        {value.share_all_teams && (
+          <Badge variant="secondary">All teams</Badge>
+        )}
+        {selectedTeams.map((team) => (
+          <Badge
+            key={team.id}
+            variant="secondary"
+            className="pr-1 gap-1.5"
+          >
+            {team.name}
+            <button
+              type="button"
+              onClick={() => removeTeam(team.id)}
+              disabled={disabled}
+              className="rounded-full hover:bg-secondary/80 p-0.5 transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={t('common.remove')}
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </Badge>
+        ))}
+        {selectedUsers.map((u) => (
+          <Badge
+            key={u.id}
+            variant="secondary"
+            className="pr-1 gap-1.5"
+          >
+            {u.name}
+            <button
+              type="button"
+              onClick={() => removeUser(u.id)}
+              disabled={disabled}
+              className="rounded-full hover:bg-secondary/80 p-0.5 transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={t('common.remove')}
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </Badge>
+        ))}
+      </div>
+
+      <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={disabled}
+            className="h-8"
+          >
+            <UserPlus className="h-4 w-4" />
+            {hasSelected
+              ? value.share_all_teams
+                ? t('bookmarks.shareAllTeams')
+                : t('bookmarks.sharingSummary', {
+                    teamCount: selectedTeams.length,
+                    teams: selectedTeams.length === 1 ? t('common.team') : t('common.teams'),
+                    userCount: selectedUsers.length,
+                    users: selectedUsers.length === 1 ? t('common.user') : t('common.users'),
+                  })
+              : t('bookmarks.shareWithTeams')}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80 max-h-[400px] p-0" align="start">
+          <div className="p-2 space-y-3">
+            {allowTeamSharing && !value.share_all_teams && (
+              <>
+                <div>
+                  <p className="text-xs font-medium text-muted-foreground mb-2 flex items-center gap-1.5">
+                    <Users className="h-3.5 w-3.5" />
+                    {t('bookmarks.shareWithTeams')}
+                  </p>
+                  <div className="relative mb-2">
+                    <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+                    <Input
+                      placeholder={t('admin.searchTeams')}
+                      value={teamSearchQuery}
+                      onChange={(e) => setTeamSearchQuery(e.target.value)}
+                      className="pl-8 h-8"
+                    />
+                  </div>
+                  <ScrollArea className="max-h-32">
+                    <div className="flex flex-wrap gap-1.5">
+                      {filteredTeams.map((team) => (
+                        <button
+                          key={team.id}
+                          type="button"
+                          onClick={() => toggleTeam(team.id)}
+                          className={cn(
+                            "inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium transition-colors",
+                            value.team_ids.includes(team.id)
+                              ? "bg-primary text-primary-foreground"
+                              : "bg-secondary hover:bg-secondary/80"
+                          )}
+                        >
+                          {value.team_ids.includes(team.id) && <Check className="h-3 w-3" />}
+                          {team.name}
+                        </button>
+                      ))}
+                    </div>
+                  </ScrollArea>
+                </div>
+              </>
+            )}
+
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-2 flex items-center gap-1.5">
+                <User className="h-3.5 w-3.5" />
+                {t('bookmarks.shareWithUsers')}
+              </p>
+              <div className="relative mb-2">
+                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+                <Input
+                  placeholder={t('admin.searchUsers')}
+                  value={userSearchQuery}
+                  onChange={(e) => setUserSearchQuery(e.target.value)}
+                  className="pl-8 h-8"
+                />
+              </div>
+              <ScrollArea className="max-h-32">
+                <div className="space-y-1">
+                  {filteredUsers
+                    .filter((u) => !value.user_ids.includes(u.id))
+                    .map((u) => (
+                      <button
+                        key={u.id}
+                        type="button"
+                        onClick={() => toggleUser(u.id)}
+                        className="w-full flex items-center justify-between px-2 py-1.5 rounded text-sm hover:bg-accent text-left"
+                      >
+                        <div>
+                          <p className="font-medium">{u.name}</p>
+                          <p className="text-xs text-muted-foreground">{u.email}</p>
+                        </div>
+                        <UserPlus className="h-3.5 w-3.5" />
+                      </button>
+                    ))}
+                </div>
+              </ScrollArea>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/frontend/src/components/ui/Toast.tsx

@@ -0,0 +1,47 @@
+import { toast as sonnerToast } from 'sonner';
+import { Toaster } from './sonner';
+
+export type ToastVariant = 'success' | 'error' | 'info' | 'warning';
+
+export interface Toast {
+  id: string;
+  message: string;
+  variant: ToastVariant;
+  duration?: number;
+}
+
+export function useToast() {
+  const showToast = (
+    message: string,
+    variant: ToastVariant = 'info',
+    duration = 3000
+  ) => {
+    const options = duration > 0 ? { duration } : { duration: Infinity };
+    switch (variant) {
+      case 'success':
+        sonnerToast.success(message, options);
+        break;
+      case 'error':
+        sonnerToast.error(message, options);
+        break;
+      case 'warning':
+        sonnerToast.warning(message, options);
+        break;
+      case 'info':
+      default:
+        sonnerToast.info(message, options);
+        break;
+    }
+  };
+
+  return { showToast };
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      {children}
+      <Toaster />
+    </>
+  );
+}

package/frontend/src/components/ui/Tooltip.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {
+  Tooltip as ShadcnTooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from './tooltip-base';
+
+interface TooltipProps {
+  content: React.ReactNode;
+  children: React.ReactElement;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export default function Tooltip({ content, children, position = 'top' }: TooltipProps) {
+  return (
+    <ShadcnTooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent side={position}>{content}</TooltipContent>
+    </ShadcnTooltip>
+  );
+}

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

@@ -0,0 +1,139 @@
+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-base"
+
+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,
+}

package/frontend/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

package/frontend/src/components/ui/button-base.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/frontend/src/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }