@tscircuit/fake-snippets 0.0.121 → 0.0.123

package/src/components/organization/OrganizationCard.tsx

@@ -1,202 +0,0 @@
-import React from "react"
-import { Link } from "wouter"
-import {
-  Users,
-  Package,
-  Globe,
-  Lock,
-  MoreVertical,
-  Share2,
-  Settings,
-} from "lucide-react"
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { timeAgo } from "@/lib/utils/timeAgo"
-import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
-import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { GithubAvatarWithFallback } from "../GithubAvatarWithFallback"
-
-export interface OrganizationCardProps {
-  /** The organization data to display */
-  organization: PublicOrgSchema
-  /** Whether to show member count */
-  showMembers?: boolean
-  /** Whether to show statistics (packages, members) */
-  showStats?: boolean
-  /** Callback when the card is clicked */
-  onClick?: (org: PublicOrgSchema) => void
-  /** Custom class name for the card container */
-  className?: string
-  /** Whether to render the card with a link to the organization page */
-  withLink?: boolean
-  /** Custom render function for actions */
-  renderActions?: (org: PublicOrgSchema) => React.ReactNode
-}
-
-export const OrganizationCard: React.FC<OrganizationCardProps> = ({
-  organization,
-  showMembers = true,
-  showStats = true,
-  onClick,
-  className = "",
-  withLink = true,
-  renderActions,
-}) => {
-  const { copyToClipboard } = useCopyToClipboard()
-  const { session } = useGlobalStore()
-
-  const canManageOrg =
-    organization.owner_account_id === session?.account_id ||
-    organization.user_permissions?.can_manage_org
-
-  const handleCardClick = (e: React.MouseEvent) => {
-    if (onClick && !withLink) {
-      e.preventDefault()
-      onClick(organization)
-    }
-  }
-
-  const handleShareClick = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    const shareUrl = `${window.location.origin}/${organization.name}`
-    copyToClipboard(shareUrl)
-  }
-
-  const handleSettingsClick = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    window.location.href = organization.is_personal_org
-      ? `/settings`
-      : `/${organization.name}/settings`
-  }
-
-  const cardContent = (
-    <div
-      className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 h-full ${className}`}
-      onClick={handleCardClick}
-    >
-      <div className="flex items-start gap-4">
-        {/* Organization Avatar */}
-        <div className="flex-shrink-0">
-          <GithubAvatarWithFallback
-            username={
-              organization.is_personal_org
-                ? organization.github_handle || organization.name
-                : organization.github_handle
-            }
-            fallback={organization.name}
-            fallbackClassName=" font-semibold text-lg"
-            size={40}
-          />
-        </div>
-
-        {/* Organization Info */}
-        <div className="flex-1 min-w-0">
-          <div className="flex justify-between items-start mb-1">
-            <div className="min-w-0 flex-1">
-              <h2 className="text-md font-semibold text-gray-900 truncate pr-8">
-                {organization.name}
-              </h2>
-            </div>
-
-            {/* Actions Dropdown */}
-            <div className="flex items-center gap-2">
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-6 w-6"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <MoreVertical className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  <DropdownMenuItem
-                    className="text-xs cursor-pointer"
-                    onClick={handleShareClick}
-                  >
-                    <Share2 className="mr-2 h-3 w-3" />
-                    Share Organization
-                  </DropdownMenuItem>
-                  {canManageOrg && (
-                    <DropdownMenuItem
-                      className="text-xs cursor-pointer"
-                      onClick={handleSettingsClick}
-                    >
-                      <Settings className="mr-2 h-3 w-3" />
-                      Organization Settings
-                    </DropdownMenuItem>
-                  )}
-                </DropdownMenuContent>
-              </DropdownMenu>
-              {renderActions && renderActions(organization)}
-            </div>
-          </div>
-
-          {/* Statistics and Metadata */}
-          <div className="flex items-center gap-4 text-xs text-gray-500 mb-1">
-            {/* Visibility */}
-            <div className="flex items-center gap-1">
-              {!organization.is_personal_org ? (
-                <>
-                  <Globe className="h-3 w-3" />
-                  <span>Public</span>
-                </>
-              ) : (
-                <>
-                  <Lock className="h-3 w-3" />
-                  <span>Personal</span>
-                </>
-              )}
-            </div>
-
-            {/* Statistics */}
-            {showStats && (
-              <>
-                {showMembers && !organization.is_personal_org && (
-                  <div className="flex items-center gap-1">
-                    <Users className="h-3 w-3" />
-                    <span>{organization.member_count} members</span>
-                  </div>
-                )}
-                <div className="flex items-center gap-1">
-                  <Package className="h-3 w-3" />
-                  <span>{organization.package_count} packages</span>
-                </div>
-              </>
-            )}
-          </div>
-
-          {/* Created time */}
-          <div className="text-xs text-gray-400">
-            <span>Created {timeAgo(new Date(organization.created_at))}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-
-  if (withLink) {
-    return (
-      <Link
-        key={organization.org_id}
-        href={`/${organization.name}`}
-        className="block h-full"
-      >
-        {cardContent}
-      </Link>
-    )
-  }
-
-  return cardContent
-}

package/src/components/organization/OrganizationCardSkeleton.tsx

@@ -1,55 +0,0 @@
-import React from "react"
-
-export const OrganizationCardSkeleton: React.FC = () => {
-  return (
-    <div className="border p-4 rounded-md animate-pulse">
-      <div className="flex flex-col gap-4">
-        <div className="flex items-start gap-4">
-          {/* Organization Avatar skeleton */}
-          <div className="flex-shrink-0">
-            <div className="h-16 w-16 rounded-full bg-slate-200 border-2 border-gray-100"></div>
-          </div>
-
-          {/* Organization Info skeleton */}
-          <div className="flex-1 min-w-0">
-            <div className="flex justify-between items-start mb-1">
-              <div className="min-w-0 flex-1">
-                {/* Organization name */}
-                <div className="h-5 bg-slate-200 rounded w-3/4 sm:w-1/2 mb-1"></div>
-              </div>
-
-              {/* Actions dropdown skeleton */}
-              <div className="flex items-center gap-2">
-                <div className="h-6 w-6 bg-slate-200 rounded"></div>
-              </div>
-            </div>
-
-            {/* Statistics and Metadata skeleton */}
-            <div className="flex flex-wrap items-center gap-2 sm:gap-4 text-xs mb-1">
-              {/* Visibility */}
-              <div className="flex items-center gap-1">
-                <div className="h-3 w-3 bg-slate-200 rounded"></div>
-                <div className="h-3 bg-slate-200 rounded w-8 sm:w-12"></div>
-              </div>
-
-              {/* Members */}
-              <div className="flex items-center gap-1">
-                <div className="h-3 w-3 bg-slate-200 rounded"></div>
-                <div className="h-3 bg-slate-200 rounded w-12 sm:w-16"></div>
-              </div>
-
-              {/* Packages */}
-              <div className="flex items-center gap-1">
-                <div className="h-3 w-3 bg-slate-200 rounded"></div>
-                <div className="h-3 bg-slate-200 rounded w-14 sm:w-16"></div>
-              </div>
-            </div>
-
-            {/* Created time skeleton */}
-            <div className="h-3 bg-slate-200 rounded w-20 sm:w-24"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/organization/OrganizationHeader.tsx

@@ -1,140 +0,0 @@
-import React from "react"
-import { Button } from "@/components/ui/button"
-import { Building2, Users, Package, Lock, Globe2, Settings } from "lucide-react"
-import { cn } from "@/lib/utils"
-import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { Link, useLocation } from "wouter"
-import { useOrganization } from "@/hooks/use-organization"
-import { GithubAvatarWithFallback } from "../GithubAvatarWithFallback"
-
-interface OrganizationHeaderProps {
-  organization: PublicOrgSchema
-  isCurrentUserOrganization?: boolean
-  className?: string
-  showActions?: boolean
-}
-
-export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
-  organization,
-  className,
-  showActions = true,
-}) => {
-  const session = useGlobalStore((s) => s.session)
-  const [, navigate] = useLocation()
-  const canManageOrg =
-    organization.user_permissions?.can_manage_org ||
-    organization.owner_account_id === session?.account_id
-
-  const { membersCount, packagesCount, isLoading } = useOrganization({
-    orgId: organization.org_id,
-    orgName: organization.name!,
-  })
-
-  const handleSettingsClick = () => {
-    navigate(`/${organization.name}/settings`)
-  }
-  return (
-    <div className={cn("bg-white border-b border-gray-200", className)}>
-      <div className="container mx-auto px-6 py-6">
-        {/* Mobile Layout */}
-        <div className="block sm:hidden">
-          <div className="flex flex-col items-center text-center space-y-4">
-            <GithubAvatarWithFallback
-              username={organization.github_handle}
-              fallback={organization.name}
-              className="shadow-sm size-16 md:size-20 lg:size-24"
-              fallbackClassName="font-bold text-xl md:text-2xl lg:text-3xl"
-              size={300}
-            />
-
-            <div>
-              <div className="flex flex-col items-center gap-3 mb-3">
-                <h1 className="font-bold text-gray-900 text-xl">
-                  {organization.name}
-                </h1>
-                {canManageOrg && showActions && (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleSettingsClick}
-                  >
-                    <Settings className="mr-2 h-4 w-4" />
-                    Settings
-                  </Button>
-                )}
-              </div>
-
-              <div className="grid grid-cols-2 md:flex flex-wrap justify-center gap-4 text-sm">
-                <div className="flex items-center gap-1.5 text-gray-600">
-                  <Users className="h-3.5 w-3.5" />
-                  <span className="font-medium">
-                    {isLoading ? "..." : membersCount}
-                  </span>
-                  <span>members</span>
-                </div>
-                <div className="flex items-center gap-1.5 text-gray-600">
-                  <Package className="h-3.5 w-3.5" />
-                  <span className="font-medium">
-                    {isLoading ? "..." : packagesCount}
-                  </span>
-                  <span>packages</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Desktop Layout */}
-        <div className="hidden sm:block">
-          <div className="flex items-center gap-6">
-            <GithubAvatarWithFallback
-              username={organization.github_handle}
-              fallback={organization.name}
-              className="flex-shrink-0 shadow-sm size-16 md:size-20 lg:size-24"
-              fallbackClassName="font-bold text-xl md:text-2xl lg:text-3xl"
-            />
-
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center justify-between mb-3">
-                <Link
-                  href={`/${organization.name}`}
-                  className="font-bold text-gray-900 text-2xl md:text-3xl truncate"
-                >
-                  {organization.name}
-                </Link>
-                {canManageOrg && showActions && (
-                  <Button variant="outline" onClick={handleSettingsClick}>
-                    <Settings className="mr-2 h-4 w-4" />
-                    Settings
-                  </Button>
-                )}
-              </div>
-
-              <div className="flex flex-wrap items-center gap-6 text-sm text-gray-600">
-                <div className="flex items-center gap-2">
-                  <Users className="h-4 w-4" />
-                  <span className="font-medium text-gray-900">
-                    {isLoading ? "..." : membersCount}
-                  </span>
-                  <span>members</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Package className="h-4 w-4" />
-                  <span className="font-medium text-gray-900">
-                    {isLoading ? "..." : packagesCount}
-                  </span>
-                  <span>packages</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Building2 className="h-4 w-4" />
-                  <span>Organization</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/organization/OrganizationMembers.tsx

@@ -1,117 +0,0 @@
-import React from "react"
-import { Link } from "wouter"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Users, Loader2 } from "lucide-react"
-import { timeAgo } from "@/lib/utils/timeAgo"
-import { cn } from "@/lib/utils"
-import { useListOrgMembers } from "@/hooks/use-list-org-members"
-import { getMemberRole } from "@/lib/utils/member-role"
-import { RoleBadge } from "@/components/ui/role-badge"
-import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
-
-interface OrganizationMembersProps {
-  organization: PublicOrgSchema
-  className?: string
-}
-
-export const OrganizationMembers: React.FC<OrganizationMembersProps> = ({
-  organization,
-  className,
-}) => {
-  const { data: members = [], isLoading } = useListOrgMembers({
-    orgId: organization.org_id,
-  })
-
-  if (isLoading) {
-    return (
-      <div
-        className={cn(
-          "bg-white rounded-lg border border-gray-200 p-4 sm:p-6",
-          className,
-        )}
-      >
-        <div className="mb-4">
-          <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
-            Members
-          </h2>
-        </div>
-        <div className="text-center py-20 text-gray-500 grid place-items-center">
-          <Loader2 className="w-8 h-8 text-blue-600 dark:text-blue-400 animate-spin" />
-          <p className="mt-2 text-sm select-none">Loading members...</p>
-        </div>
-      </div>
-    )
-  }
-  return (
-    <div
-      className={cn(
-        "bg-white rounded-lg border border-gray-200 p-4 sm:p-6",
-        className,
-      )}
-    >
-      <div className="mb-4">
-        <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
-          Members ({members.length})
-        </h2>
-      </div>
-
-      <div className="space-y-2 sm:space-y-3">
-        {members.map((member) => {
-          const role = getMemberRole(organization, member.account_id)
-          return (
-            <Link
-              key={member.account_id || member.github_username}
-              href={`/${member.github_username}`}
-              className="block"
-            >
-              <div className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
-                <div className="flex items-center gap-3 min-w-0 flex-1">
-                  <Avatar className="h-10 w-10 sm:h-12 sm:w-12 flex-shrink-0">
-                    <AvatarImage
-                      src={`https://github.com/${member.github_username}.png`}
-                      alt={`${member.github_username} avatar`}
-                    />
-                    <AvatarFallback className="text-sm font-medium">
-                      {member.github_username
-                        .split(" ")
-                        .map((word) => word[0])
-                        .join("")
-                        .toUpperCase()
-                        .slice(0, 2)}
-                    </AvatarFallback>
-                  </Avatar>
-
-                  <div className="min-w-0 flex-1">
-                    <div className="flex items-center gap-2 mb-1">
-                      <h3 className="font-medium text-gray-900 truncate">
-                        {member.github_username}
-                      </h3>
-                      <RoleBadge role={role} />
-                    </div>
-                    <p className="text-sm text-gray-500 truncate">
-                      @{member.github_username}
-                    </p>
-                  </div>
-                </div>
-                {member.joined_at && (
-                  <div className="text-right flex-shrink-0 hidden sm:block">
-                    <p className="text-xs text-gray-500">
-                      Joined {timeAgo(new Date(member.joined_at))}
-                    </p>
-                  </div>
-                )}
-              </div>
-            </Link>
-          )
-        })}
-      </div>
-
-      {members.length === 0 && (
-        <div className="text-center py-6 sm:py-8 text-gray-500">
-          <Users className="h-10 w-10 sm:h-12 sm:w-12 mx-auto mb-3 text-gray-300" />
-          <p className="text-sm sm:text-base">No members found</p>
-        </div>
-      )}
-    </div>
-  )
-}