npm - @tscircuit/fake-snippets - Versions diffs - 0.0.102 → 0.0.104 - Mend

@tscircuit/fake-snippets 0.0.102 → 0.0.104

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/bundle.js +20 -10
package/dist/index.d.ts +15 -0
package/dist/index.js +6 -2
package/dist/schema.d.ts +24 -0
package/dist/schema.js +6 -2
package/fake-snippets-api/lib/db/schema.ts +5 -0
package/fake-snippets-api/lib/public-mapping/public-map-package-release.ts +2 -0
package/fake-snippets-api/lib/public-mapping/public-map-package.ts +2 -0
package/fake-snippets-api/routes/api/packages/update.ts +7 -2
package/package.json +1 -1
package/src/components/ViewPackagePage/components/mobile-sidebar.tsx +1 -0
package/src/components/ViewPackagePage/components/sidebar-about-section.tsx +13 -1
package/src/components/ViewPackagePage/components/sidebar-releases-section.tsx +17 -0
package/src/components/dialogs/GitHubRepositorySelector.tsx +103 -66
package/src/components/dialogs/edit-package-details-dialog.tsx +18 -3
package/src/components/preview/BuildsList.tsx +19 -16
package/src/components/preview/{ConnectedReposCards.tsx → ConnectedPackagesList.tsx} +64 -68
package/src/components/preview/ConnectedRepoDashboard.tsx +37 -52
package/src/components/preview/ConnectedRepoOverview.tsx +2 -2
package/src/components/preview/index.tsx +42 -1
package/src/hooks/use-package-details-form.ts +13 -1
package/src/pages/user-profile.tsx +14 -6
package/src/pages/view-connected-repo.tsx +1 -7
package/src/components/preview/ConnectedRepoSettings.tsx +0 -343

package/src/components/dialogs/GitHubRepositorySelector.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useRef } from "react"
 import {
   Select,
   SelectContent,
@@ -11,27 +11,31 @@ import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { useQuery } from "react-query"
 import { Button } from "../ui/button"
 import { Label } from "../ui/label"
-import { Plus } from "lucide-react"
+import { Minus, Plus } from "lucide-react"
+import { Switch } from "../ui/switch"
 interface GitHubRepositorySelectorProps {
-  value?: string
-  onValueChange?: (value: string) => void
+  selectedRepository?: string
+  setSelectedRepository?: (value: string | null) => void
   disabled?: boolean
   open?: boolean
+  addFormContent?: (props: {
+    allowPrPreviews?: boolean
+  }) => void
+  formData?: any
 }
 export const GitHubRepositorySelector = ({
-  value,
-  onValueChange,
+  selectedRepository,
+  setSelectedRepository,
   disabled = false,
   open = false,
+  addFormContent,
+  formData,
 }: GitHubRepositorySelectorProps) => {
   const axios = useAxios()
   const apiBaseUrl = useApiBaseUrl()
-  const [selectedRepository, setSelectedRepository] = useState<string>(
-    value || "",
-  )
+  const initialValue = useRef(selectedRepository).current
   // Fetch available repositories
   const { data: repositoriesData, error: repositoriesError } = useQuery(
     ["github-repositories"],
@@ -52,72 +56,105 @@ export const GitHubRepositorySelector = ({
   const handleValueChange = (newValue: string) => {
     if (newValue === "connect-more") {
       handleConnectMoreRepos()
+    } else if (newValue === "unlink//repo") {
+      setSelectedRepository?.("unlink//repo")
     } else {
-      setSelectedRepository(newValue)
-      onValueChange?.(newValue)
+      setSelectedRepository?.(newValue)
     }
   }
   return (
-    <div className="space-y-1">
-      <Label htmlFor="repository">GitHub Repository</Label>
-      {(repositoriesError as any)?.response?.status === 400 &&
-      (repositoriesError as any)?.response?.data?.error_code ===
-        "github_not_connected" ? (
-        <div className="space-y-2">
-          <div className="text-sm text-muted-foreground">
-            Connect your GitHub account to link this package to a repository.
+    <>
+      <div className="space-y-1 mb-3">
+        <Label htmlFor="repository">GitHub Repository</Label>
+        {(repositoriesError as any)?.response?.status === 400 &&
+        (repositoriesError as any)?.response?.data?.error_code ===
+          "github_not_connected" ? (
+          <div className="space-y-2">
+            <div className="text-sm text-muted-foreground">
+              Connect your GitHub account to link this package to a repository.
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleConnectMoreRepos}
+              className="w-full"
+              disabled={disabled}
+            >
+              <svg
+                className="w-4 h-4 mr-2"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
+              </svg>
+              Connect GitHub Account
+            </Button>
           </div>
-          <Button
-            type="button"
-            variant="outline"
-            onClick={handleConnectMoreRepos}
-            className="w-full"
-            disabled={disabled}
-          >
-            <svg
-              className="w-4 h-4 mr-2"
-              viewBox="0 0 24 24"
-              fill="currentColor"
+        ) : (
+          <div className="space-y-2">
+            <Select
+              value={selectedRepository}
+              onValueChange={handleValueChange}
+              disabled={disabled}
             >
-              <path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
-            </svg>
-            Connect GitHub Account
-          </Button>
-        </div>
-      ) : (
-        <div className="space-y-2">
-          <Select
-            value={selectedRepository}
-            onValueChange={handleValueChange}
-            disabled={disabled}
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue placeholder="Select a repository" />
-            </SelectTrigger>
-            <SelectContent className="!z-[999]">
-              {repositoriesData?.repos?.map((repo: any) => (
-                <SelectItem key={repo.full_name} value={repo.full_name}>
-                  <div className="flex items-center space-x-2">
-                    <span>{repo.unscoped_name}</span>
-                    {repo.private && (
-                      <span className="text-xs text-muted-foreground">
-                        (private)
-                      </span>
-                    )}
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select a repository" />
+              </SelectTrigger>
+              <SelectContent className="!z-[999]">
+                {repositoriesData?.repos?.map((repo: any) => (
+                  <SelectItem key={repo.full_name} value={repo.full_name}>
+                    <div className="flex items-center space-x-2">
+                      <span>{repo.unscoped_name}</span>
+                      {repo.private && (
+                        <span className="text-xs text-muted-foreground">
+                          (private)
+                        </span>
+                      )}
+                    </div>
+                  </SelectItem>
+                ))}
+                <SelectItem value="connect-more">
+                  <div className="flex items-center space-x-2 text-blue-600">
+                    <Plus className="w-3 h-3" />
+                    <span>Connect More Repos</span>
                   </div>
                 </SelectItem>
-              ))}
-              <SelectItem value="connect-more">
-                <div className="flex items-center space-x-2 text-blue-600">
-                  <Plus className="w-3 h-3" />
-                  <span>Connect More Repos</span>
-                </div>
-              </SelectItem>
-            </SelectContent>
-          </Select>
+                {Boolean(initialValue) && (
+                  <SelectItem value="unlink//repo">
+                    <div className="flex items-center space-x-2 text-red-600">
+                      <Minus className="w-3 h-3" />
+                      <span>Unlink Repo</span>
+                    </div>
+                  </SelectItem>
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+      </div>
+      {initialValue && selectedRepository !== "unlink//repo" && (
+        <div className="space-y-4 mt-4 p-4 border rounded-lg bg-gray-50">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label className="text-sm font-medium">Enable PR Preview</Label>
+              <p className="text-xs text-gray-500">
+                Generate preview builds for pull requests
+              </p>
+            </div>
+            <Switch
+              checked={formData?.allowPrPreviews}
+              onCheckedChange={(checked) =>
+                addFormContent?.({
+                  allowPrPreviews: checked,
+                })
+              }
+              disabled={disabled}
+            />
+          </div>
         </div>
       )}
-    </div>
+    </>
   )
 }

package/src/components/dialogs/edit-package-details-dialog.tsx CHANGED Viewed

@@ -48,7 +48,9 @@ interface EditPackageDetailsDialogProps {
     newWebsite: string,
     newLicense: string | null,
     newDefaultView: string,
+    newAllowPrPreviews?: boolean,
   ) => void
+  currentAllowPrPreviews?: boolean
 }
 export const EditPackageDetailsDialog = ({
@@ -64,6 +66,7 @@ export const EditPackageDetailsDialog = ({
   unscopedPackageName,
   packageReleaseId,
   packageAuthor,
+  currentAllowPrPreviews,
   onUpdate,
 }: EditPackageDetailsDialogProps) => {
   const axios = useAxios()
@@ -85,6 +88,7 @@ export const EditPackageDetailsDialog = ({
     initialUnscopedPackageName: unscopedPackageName,
     isDialogOpen: open,
     initialVisibility: isPrivate ? "private" : "public",
+    initialAllowPrPreviews: currentAllowPrPreviews,
   })
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
@@ -117,7 +121,11 @@ export const EditPackageDetailsDialog = ({
         website: formData.website.trim(),
         is_private: formData.visibility == "private",
         default_view: formData.defaultView,
-        github_repo_full_name: formData.githubRepoFullName,
+        allow_pr_previews: formData.allowPrPreviews,
+        github_repo_full_name:
+          formData.githubRepoFullName === "unlink//repo"
+            ? null
+            : formData.githubRepoFullName,
         ...(formData.unscopedPackageName !== unscopedPackageName && {
           name: formData.unscopedPackageName.trim(),
         }),
@@ -377,8 +385,8 @@ export const EditPackageDetailsDialog = ({
                 </div>
                 <div className="space-y-1">
                   <GitHubRepositorySelector
-                    value={formData.githubRepoFullName || ""}
-                    onValueChange={(value) =>
+                    selectedRepository={formData.githubRepoFullName || ""}
+                    setSelectedRepository={(value) =>
                       setFormData((prev) => ({
                         ...prev,
                         githubRepoFullName: value,
@@ -386,6 +394,13 @@ export const EditPackageDetailsDialog = ({
                     }
                     disabled={updatePackageDetailsMutation.isLoading}
                     open={open}
+                    formData={formData}
+                    addFormContent={(content) => {
+                      setFormData((prev) => ({
+                        ...prev,
+                        ...content,
+                      }))
+                    }}
                   />
                 </div>
               </div>

package/src/components/preview/BuildsList.tsx CHANGED Viewed

@@ -25,15 +25,18 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { getBuildStatus, PackageBuild, StatusIcon } from "."
+import { getBuildStatus, MOCK_DEPLOYMENTS, PackageBuild, StatusIcon } from "."
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
+import { Package } from "fake-snippets-api/lib/db/schema"
-interface BuildsListProps {
-  builds: PackageBuild[]
+export const BuildsList = ({
+  pkg,
+  onSelectBuild,
+}: {
+  pkg: Package
   onSelectBuild?: (build: PackageBuild) => void
-}
-export const BuildsList = ({ builds, onSelectBuild }: BuildsListProps) => {
+}) => {
+  const builds = MOCK_DEPLOYMENTS
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
@@ -41,10 +44,6 @@ export const BuildsList = ({ builds, onSelectBuild }: BuildsListProps) => {
           <h2 className="text-2xl font-bold text-gray-900">Builds</h2>
           <p className="text-gray-600">Manage and monitor your builds</p>
         </div>
-        <Button className="flex items-center gap-2">
-          <Plus className="w-4 h-4" />
-          Create Build
-        </Button>
       </div>
       <Card>
@@ -139,11 +138,15 @@ export const BuildsList = ({ builds, onSelectBuild }: BuildsListProps) => {
                               </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
-                              <DropdownMenuItem>View Details</DropdownMenuItem>
-                              <DropdownMenuItem>View Logs</DropdownMenuItem>
-                              <DropdownMenuItem>Redeploy</DropdownMenuItem>
-                              <DropdownMenuItem className="text-red-600">
-                                Cancel
+                              <DropdownMenuItem
+                                onClick={() => onSelectBuild?.(build)}
+                              >
+                                View Details
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onClick={() => onSelectBuild?.(build)}
+                              >
+                                View Logs
                               </DropdownMenuItem>
                             </DropdownMenuContent>
                           </DropdownMenu>
@@ -201,7 +204,7 @@ export const BuildsList = ({ builds, onSelectBuild }: BuildsListProps) => {
           <CardContent className="p-6">
             <div className="flex items-center gap-3">
               <div className="p-2 bg-blue-100 rounded-lg">
-                <Loader2 className="w-5 h-5 text-blue-600" />
+                <Loader2 className="w-5 h-5 text-blue-600 animate-spin" />
               </div>
               <div>
                 <p className="text-sm text-gray-600">Building</p>

package/src/components/preview/{ConnectedReposCards.tsx → ConnectedPackagesList.tsx} RENAMED Viewed

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -6,19 +6,56 @@ import { GitBranch, Rocket, Github } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { PrefetchPageLink } from "../PrefetchPageLink"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
-import { getBuildStatus, MOCK_DEPLOYMENTS, PackageBuild, StatusIcon } from "."
+import {
+  getBuildStatus,
+  getLatestBuildForPackage,
+  MOCK_DEPLOYMENTS,
+  PackageBuild,
+  StatusIcon,
+} from "."
+import { Package } from "fake-snippets-api/lib/db/schema"
-interface ConnectedRepoCardProps {
-  ConnectedRepo: PackageBuild
-  className?: string
+export const ConnectedPackageCardSkeleton = () => {
+  return (
+    <Card className="animate-pulse">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-2 flex-1">
+            <div className="w-4 h-4 bg-gray-200 rounded" />
+            <div className="space-y-2 flex-1">
+              <div className="flex items-center gap-2">
+                <div className="w-12 h-4 bg-gray-200 rounded" />
+                <div className="w-16 h-3 bg-gray-200 rounded" />
+              </div>
+              <div className="w-20 h-3 bg-gray-200 rounded" />
+            </div>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-0 space-y-3">
+        <div className="w-full h-4 bg-gray-200 rounded" />
+        <div className="flex gap-2">
+          <div className="w-16 h-3 bg-gray-200 rounded" />
+          <div className="w-20 h-3 bg-gray-200 rounded" />
+        </div>
+        <div className="flex gap-2 pt-2">
+          <div className="flex-1 h-8 bg-gray-200 rounded" />
+          <div className="flex-1 h-8 bg-gray-200 rounded" />
+        </div>
+      </CardContent>
+    </Card>
+  )
 }
-export const ConnectedRepoCard = ({
-  ConnectedRepo,
+export const ConnectedPackageCard = ({
+  pkg,
   className,
-}: ConnectedRepoCardProps) => {
-  const { status, label } = getBuildStatus(ConnectedRepo)
+}: {
+  pkg: Package
+  className?: string
+}) => {
+  const latestBuildInfo: PackageBuild = getLatestBuildForPackage(pkg)
+  const { status, label } = getBuildStatus(latestBuildInfo)
   return (
     <Card
       className={cn(
@@ -64,27 +101,27 @@ export const ConnectedRepoCard = ({
       <div className="flex items-center gap-2 mb-4">
         <Github className="w-4 h-4 text-gray-600" />
         <a
-          href={`https://github.com/${ConnectedRepo.commit_author}/tsc-deploy`}
+          href={`https://github.com/${pkg.github_repo_full_name}`}
           className="text-sm font-medium text-gray-700 hover:text-blue-600 transition-colors"
         >
-          {ConnectedRepo.commit_author}/tsc-deploy
+          {pkg.github_repo_full_name}
         </a>
       </div>
-      {ConnectedRepo.commit_message && (
+      {latestBuildInfo.commit_message && (
         <div className="mb-6 flex-1">
           <h4
-            title={ConnectedRepo.commit_message}
+            title={latestBuildInfo.commit_message}
             className="text-sm font-medium truncate text-gray-900 mb-2"
           >
-            {ConnectedRepo.commit_message}
+            {latestBuildInfo.commit_message}
           </h4>
           <div className="flex items-center gap-2 text-xs text-gray-500">
-            <span>{formatTimeAgo(ConnectedRepo.created_at)} on</span>
+            <span>{formatTimeAgo(latestBuildInfo.created_at)} on</span>
             <div className="flex items-center gap-1">
               <GitBranch className="w-3 h-3" />
               <span className="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full font-medium">
-                {ConnectedRepo.branch_name || "main"}
+                {latestBuildInfo.branch_name || "main"}
               </span>
             </div>
           </div>
@@ -94,7 +131,7 @@ export const ConnectedRepoCard = ({
       <div className="flex gap-2 w-full mt-auto">
         <PrefetchPageLink
           className="w-full"
-          href={`/build/${ConnectedRepo.package_build_id}`}
+          href={`/build/${latestBuildInfo.package_build_id}`}
         >
           <Button
             size="sm"
@@ -103,10 +140,10 @@ export const ConnectedRepoCard = ({
             View
           </Button>
         </PrefetchPageLink>
-        {ConnectedRepo.preview_url && status === "success" && (
+        {latestBuildInfo.preview_url && status === "success" && (
           <PrefetchPageLink
             className="w-full"
-            href={`/build/${ConnectedRepo.package_build_id}/preview`}
+            href={`/build/${latestBuildInfo.package_build_id}/preview`}
           >
             <Button size="sm" variant="outline" className="px-4 py-2 w-full">
               Preview
@@ -118,53 +155,12 @@ export const ConnectedRepoCard = ({
   )
 }
-export const ConnectedRepoCardSkeleton: React.FC = () => {
-  return (
-    <Card className="animate-pulse">
-      <CardHeader className="pb-3">
-        <div className="flex items-start justify-between">
-          <div className="flex items-center gap-2 flex-1">
-            <div className="w-4 h-4 bg-gray-200 rounded" />
-            <div className="space-y-2 flex-1">
-              <div className="flex items-center gap-2">
-                <div className="w-12 h-4 bg-gray-200 rounded" />
-                <div className="w-16 h-3 bg-gray-200 rounded" />
-              </div>
-              <div className="w-20 h-3 bg-gray-200 rounded" />
-            </div>
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent className="pt-0 space-y-3">
-        <div className="w-full h-4 bg-gray-200 rounded" />
-        <div className="flex gap-2">
-          <div className="w-16 h-3 bg-gray-200 rounded" />
-          <div className="w-20 h-3 bg-gray-200 rounded" />
-        </div>
-        <div className="flex gap-2 pt-2">
-          <div className="flex-1 h-8 bg-gray-200 rounded" />
-          <div className="flex-1 h-8 bg-gray-200 rounded" />
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-export const ConnectedReposCards = ({ user }: { user: string }) => {
-  const [isLoading, setIsLoading] = useState(false)
-  const [ConnectedRepos, setConnectedRepos] = useState(MOCK_DEPLOYMENTS)
-  if (isLoading) {
-    return (
-      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-        {[...Array(6)].map((_, i) => (
-          <ConnectedRepoCardSkeleton key={i} />
-        ))}
-      </div>
-    )
-  }
+export const ConnectedPackagesList = ({
+  packages,
+}: { packages: Package[] }) => {
+  const [pkgs, setpkgs] = useState(MOCK_DEPLOYMENTS)
-  if (ConnectedRepos.length === 0) {
+  if (pkgs.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center py-20 text-black">
         <Rocket className="w-12 h-12 mb-4 text-black" />
@@ -182,8 +178,8 @@ export const ConnectedReposCards = ({ user }: { user: string }) => {
   return (
     <div className="space-y-4">
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-        {ConnectedRepos.map((repo) => (
-          <ConnectedRepoCard key={repo.package_build_id} ConnectedRepo={repo} />
+        {packages.map((pkg) => (
+          <ConnectedPackageCard key={pkg.package_id} pkg={pkg} />
         ))}
       </div>
     </div>