@tscircuit/fake-snippets 0.0.108 → 0.0.109

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 (57) hide show
  1. package/bun.lock +62 -19
  2. package/dist/bundle.js +3 -2
  3. package/dist/index.d.ts +5 -0
  4. package/dist/index.js +2 -1
  5. package/dist/schema.d.ts +8 -0
  6. package/dist/schema.js +2 -1
  7. package/fake-snippets-api/lib/db/schema.ts +1 -0
  8. package/package.json +7 -8
  9. package/src/App.tsx +0 -2
  10. package/src/components/DownloadButtonAndMenu.tsx +133 -35
  11. package/src/components/FileSidebar.tsx +31 -34
  12. package/src/components/Footer.tsx +0 -1
  13. package/src/components/HeaderLogin.tsx +1 -1
  14. package/src/components/HiddenFilesDropdown.tsx +0 -2
  15. package/src/components/PackageBuildsPage/PackageBuildDetailsPage.tsx +0 -2
  16. package/src/components/PackageBuildsPage/build-preview-content.tsx +34 -5
  17. package/src/components/PackageCard.tsx +0 -1
  18. package/src/components/ViewPackagePage/components/ShikiCodeViewer.tsx +20 -11
  19. package/src/components/ViewPackagePage/components/important-files-view.tsx +75 -59
  20. package/src/components/ViewPackagePage/components/main-content-header.tsx +4 -4
  21. package/src/components/ViewPackagePage/components/main-content-view-selector.tsx +0 -1
  22. package/src/components/ViewPackagePage/components/mobile-sidebar.tsx +0 -1
  23. package/src/components/ViewPackagePage/components/package-header.tsx +14 -17
  24. package/src/components/ViewPackagePage/components/preview-image-squares.tsx +0 -1
  25. package/src/components/ViewPackagePage/components/repo-page-content.tsx +21 -20
  26. package/src/components/ViewPackagePage/components/sidebar.tsx +0 -2
  27. package/src/components/ViewPackagePage/components/tab-views/files-view.tsx +18 -17
  28. package/src/components/ViewPackagePage/components/theme-toggle.tsx +0 -2
  29. package/src/components/ViewPackagePage/hooks/use-toast.tsx +0 -1
  30. package/src/components/package-port/CodeAndPreview.tsx +23 -40
  31. package/src/components/package-port/CodeEditor.tsx +24 -1
  32. package/src/components/package-port/CodeEditorHeader.tsx +5 -2
  33. package/src/components/preview/PackageReleasesDashboard.tsx +30 -25
  34. package/src/hooks/use-current-package-id.ts +5 -30
  35. package/src/hooks/use-current-package-info.ts +29 -5
  36. package/src/hooks/use-global-store.ts +1 -1
  37. package/src/hooks/useFileManagement.ts +153 -34
  38. package/src/hooks/useOptimizedPackageFilesLoader.ts +149 -0
  39. package/src/hooks/useUpdatePackageFilesMutation.ts +2 -0
  40. package/src/lib/download-fns/download-circuit-png.ts +11 -3
  41. package/src/lib/download-fns/download-gltf-from-circuit-json.ts +44 -0
  42. package/src/lib/utils/isComponentExported.ts +9 -0
  43. package/src/pages/authorize.tsx +0 -2
  44. package/src/pages/landing.tsx +0 -1
  45. package/src/pages/preview-release.tsx +14 -4
  46. package/src/pages/view-package.tsx +14 -13
  47. package/src/components/Footer2.tsx +0 -100
  48. package/src/components/ShippingInformationForm.tsx +0 -423
  49. package/src/components/StaticViewSnippetHeader.tsx +0 -70
  50. package/src/components/ViewPackagePage/components/file-explorer.tsx +0 -67
  51. package/src/components/ViewPackagePage/components/readme-view.tsx +0 -58
  52. package/src/components/ViewPackagePage/components/repo-header-button.tsx +0 -36
  53. package/src/components/ViewPackagePage/components/repo-header.tsx +0 -4
  54. package/src/components/ViewPackagePage/components/sidebar-contributors-section.tsx +0 -31
  55. package/src/components/ViewSnippetHeader.tsx +0 -181
  56. package/src/components/ui/input-otp.tsx +0 -69
  57. package/src/pages/settings.tsx +0 -25
@@ -1,58 +0,0 @@
1
- import { Edit, FileText, List } from "lucide-react"
2
-
3
- export default function ReadmeView() {
4
- return (
5
- <div className="mt-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
6
- <div className="flex items-center px-4 py-2 bg-gray-100 dark:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]">
7
- <div className="flex items-center">
8
- <FileText className="h-4 w-4 mr-2" />
9
- <span className="font-semibold">README</span>
10
- </div>
11
- <div className="ml-4 px-2 py-0.5 bg-gray-200 dark:bg-[#30363d] rounded-md text-xs">
12
- MIT license
13
- </div>
14
- <div className="ml-auto flex items-center">
15
- <Edit className="h-4 w-4 mr-1" />
16
- <List className="h-4 w-4 ml-2" />
17
- </div>
18
- </div>
19
- <div className="p-4 bg-white dark:bg-[#0d1117]">
20
- <h2 className="text-2xl font-bold mb-4">@tscircuit/core</h2>
21
- <p className="mb-4">
22
- The core logic used to build Circuit JSON from tscircuit React
23
- elements.
24
- </p>
25
- <div className="mb-4">
26
- <a
27
- href="#"
28
- className="text-blue-600 dark:text-[#58a6ff] hover:underline"
29
- >
30
- tscircuit
31
- </a>
32
- <span className="mx-2">•</span>
33
- <a
34
- href="#"
35
- className="text-blue-600 dark:text-[#58a6ff] hover:underline"
36
- >
37
- Development Guide
38
- </a>
39
- <span className="mx-2">•</span>
40
- <a
41
- href="#"
42
- className="text-blue-600 dark:text-[#58a6ff] hover:underline"
43
- >
44
- Core Benchmarks
45
- </a>
46
- </div>
47
- <p>
48
- You can use{" "}
49
- <code className="bg-gray-100 dark:bg-[#161b22] px-1 py-0.5 rounded">
50
- core
51
- </code>{" "}
52
- to create Circuit JSON, which can then be converted into Gerbers,
53
- viewed online, and much
54
- </p>
55
- </div>
56
- </div>
57
- )
58
- }
@@ -1,36 +0,0 @@
1
- import { Badge } from "@/components/ui/badge"
2
- import { Button } from "@/components/ui/button"
3
- import { ChevronDown } from "lucide-react"
4
- import type { ReactNode } from "react"
5
-
6
- interface RepoHeaderButtonProps {
7
- icon: ReactNode
8
- label: string
9
- count?: number
10
- }
11
-
12
- export default function RepoHeaderButton({
13
- icon,
14
- label,
15
- count,
16
- }: RepoHeaderButtonProps) {
17
- return (
18
- <Button
19
- variant="outline"
20
- size="sm"
21
- className="border-gray-300 dark:border-[#30363d] bg-gray-100 hover:bg-gray-200 dark:bg-[#21262d] dark:hover:bg-[#30363d] text-gray-700 dark:text-[#c9d1d9]"
22
- >
23
- {icon}
24
- {label}
25
- {count !== undefined && (
26
- <Badge
27
- variant="outline"
28
- className="ml-2 text-xs rounded-full px-2 py-0.5 bg-transparent border-gray-300 dark:border-[#30363d]"
29
- >
30
- {count}
31
- </Badge>
32
- )}
33
- <ChevronDown className="h-4 w-4 ml-1" />
34
- </Button>
35
- )
36
- }
@@ -1,4 +0,0 @@
1
- export default function RepoHeader() {
2
- // This component is being handled by a different team
3
- return null
4
- }
@@ -1,31 +0,0 @@
1
- import { Badge } from "@/components/ui/badge"
2
-
3
- export default function SidebarContributorsSection() {
4
- return (
5
- <div>
6
- <div className="flex items-center justify-between mb-2">
7
- <h2 className="text-lg font-semibold">Contributors</h2>
8
- <Badge
9
- variant="outline"
10
- className="text-xs rounded-full px-2 py-0.5 bg-transparent border-gray-300 dark:border-[#30363d]"
11
- >
12
- 18
13
- </Badge>
14
- </div>
15
- <div className="flex flex-wrap gap-1 mb-2">
16
- {[...Array(10)].map((_, i) => (
17
- <div
18
- key={i}
19
- className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-500"
20
- ></div>
21
- ))}
22
- </div>
23
- <a
24
- href="#"
25
- className="text-blue-600 dark:text-[#58a6ff] hover:underline text-sm"
26
- >
27
- + 4 contributors
28
- </a>
29
- </div>
30
- )
31
- }
@@ -1,181 +0,0 @@
1
- import { TypeBadge } from "@/components/TypeBadge"
2
- import { Button } from "@/components/ui/button"
3
- import { useAxios } from "@/hooks/use-axios"
4
- import { useCurrentSnippet } from "@/hooks/use-current-snippet"
5
- import { useGlobalStore } from "@/hooks/use-global-store"
6
- import { toast, useToast } from "@/hooks/use-toast"
7
- import { LockClosedIcon } from "@radix-ui/react-icons"
8
- import { Snippet } from "fake-snippets-api/lib/db/schema"
9
- import { ChevronLeft, Eye, GitFork, Star } from "lucide-react"
10
- import { useEffect, useState } from "react"
11
- import { useMutation, useQueryClient } from "react-query"
12
- import { Link } from "wouter"
13
- import { navigate } from "wouter/use-browser-location"
14
-
15
- export default function ViewSnippetHeader() {
16
- const { snippet } = useCurrentSnippet()
17
- const axios = useAxios()
18
- const qc = useQueryClient()
19
- const session = useGlobalStore((s) => s.session)
20
- const [isStarred, setIsStarred] = useState(snippet?.is_starred || false)
21
-
22
- useEffect(() => {
23
- setIsStarred(snippet?.is_starred || false)
24
- }, [snippet?.is_starred])
25
-
26
- const useForkSnippetMutation = ({
27
- snippet,
28
- onSuccess,
29
- }: {
30
- snippet: Snippet
31
- onSuccess?: (forkedSnippet: Snippet) => void
32
- }) => {
33
- const axios = useAxios()
34
- const session = useGlobalStore((s) => s.session)
35
-
36
- return useMutation(
37
- ["createForkSnippet"],
38
- async () => {
39
- if (!session) throw new Error("No session")
40
- if (!snippet) throw new Error("No snippet to fork")
41
-
42
- const { data } = await axios.post("/snippets/create", {
43
- unscoped_name: snippet.unscoped_name,
44
- snippet_type: snippet.snippet_type,
45
- owner_name: session.github_username,
46
- code: snippet.code,
47
- })
48
-
49
- if (!data.ok) {
50
- throw new Error(
51
- data.error || "Unknown error occurred while forking snippet.",
52
- )
53
- }
54
-
55
- return data.snippet
56
- },
57
- {
58
- onSuccess: (forkedSnippet: Snippet) => {
59
- toast({
60
- title: `Forked snippet`,
61
- description: `You have successfully forked the snippet. Redirecting...`,
62
- })
63
- onSuccess?.(forkedSnippet)
64
- },
65
- onError: (error: any) => {
66
- const message =
67
- error?.data?.error?.message ||
68
- error.message ||
69
- "Failed to fork snippet. Please try again."
70
- if (message.includes("already forked")) {
71
- toast({
72
- title: "Snippet already exists",
73
- description: message,
74
- variant: "destructive",
75
- })
76
- } else {
77
- toast({
78
- title: "Error",
79
- description: message,
80
- variant: "destructive",
81
- })
82
- }
83
- console.error("Error forking snippet:", error)
84
- },
85
- },
86
- )
87
- }
88
-
89
- const { mutate: forkSnippet, isLoading: isForking } = useForkSnippetMutation({
90
- snippet: snippet!,
91
- onSuccess: (forkedSnippet) => {
92
- navigate("/editor?snippet_id=" + forkedSnippet.snippet_id)
93
- },
94
- })
95
- const handleStarClick = async () => {
96
- try {
97
- if (isStarred) {
98
- await axios.post("/snippets/remove_star", {
99
- snippet_id: snippet!.snippet_id,
100
- })
101
- setIsStarred(false)
102
- toast({
103
- title: "Unstarred!",
104
- description: "You've unstarred this snippet",
105
- })
106
- } else {
107
- await axios.post("/snippets/add_star", {
108
- snippet_id: snippet!.snippet_id,
109
- })
110
- setIsStarred(true)
111
- toast({
112
- title: "Starred!",
113
- description: "You've starred this snippet",
114
- })
115
- }
116
- qc.invalidateQueries(["snippets", snippet!.snippet_id])
117
- } catch (error: any) {
118
- toast({
119
- title: "Error",
120
- description: `Failed to ${isStarred ? "unstar" : "star"} snippet`,
121
- variant: "destructive",
122
- })
123
- }
124
- }
125
-
126
- return (
127
- <header className="bg-white border-b border-gray-200 py-4 px-6">
128
- <div className="flex items-center justify-between">
129
- <div className="flex items-center">
130
- <h1 className="text-xl font-bold mr-2">
131
- <Link href={`/${snippet?.owner_name}`} className="text-blue-600">
132
- {snippet?.owner_name}
133
- </Link>
134
- <span className="px-1 text-gray-500">/</span>
135
- <Link
136
- className="text-blue-600"
137
- href={`/${snippet?.owner_name}/${snippet?.unscoped_name}`}
138
- >
139
- {snippet?.unscoped_name}
140
- </Link>
141
- </h1>
142
- {snippet?.snippet_type && <TypeBadge type={snippet.snippet_type} />}
143
- {snippet?.is_private && (
144
- <div className="relative group pl-2">
145
- <LockClosedIcon className="h-4 w-4 text-gray-700" />
146
- <span className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-1 hidden group-hover:block bg-black text-white text-xs rounded py-1 px-2">
147
- private
148
- </span>
149
- </div>
150
- )}
151
- </div>
152
- <div className="flex items-center space-x-2">
153
- <Button variant="outline" size="sm" onClick={handleStarClick}>
154
- <Star
155
- className={`w-4 h-4 mr-2 ${isStarred ? "fill-yellow-500 text-yellow-500" : ""}`}
156
- />
157
- {isStarred ? "Starred" : "Star"}
158
- {snippet!.star_count > 0 && (
159
- <span className="ml-1.5 bg-gray-100 text-gray-700 rounded-full px-1.5 py-0.5 text-xs font-medium">
160
- {snippet!.star_count}
161
- </span>
162
- )}
163
- </Button>
164
- {/* <Button variant="outline" size="sm">
165
- <Eye className="w-4 h-4 mr-2" />
166
- Watch
167
- </Button> */}
168
-
169
- <Button variant="outline" size="sm" onClick={() => forkSnippet()}>
170
- <GitFork className="w-4 h-4 mr-2" />
171
- {snippet?.owner_name === session?.github_username ? "Save" : "Fork"}
172
- </Button>
173
- </div>
174
- </div>
175
- {/* <div className="mt-4 flex justify-end items-center text-sm text-gray-500">
176
- <span className="mr-4">Last updated: 2 days ago</span>
177
- <span>Version: 1.0.0</span>
178
- </div> */}
179
- </header>
180
- )
181
- }
@@ -1,69 +0,0 @@
1
- import * as React from "react"
2
- import { DashIcon } from "@radix-ui/react-icons"
3
- import { OTPInput, OTPInputContext } from "input-otp"
4
-
5
- import { cn } from "@/lib/utils"
6
-
7
- const InputOTP = React.forwardRef<
8
- React.ElementRef<typeof OTPInput>,
9
- React.ComponentPropsWithoutRef<typeof OTPInput>
10
- >(({ className, containerClassName, ...props }, ref) => (
11
- <OTPInput
12
- ref={ref}
13
- containerClassName={cn(
14
- "flex items-center gap-2 has-[:disabled]:opacity-50",
15
- containerClassName,
16
- )}
17
- className={cn("disabled:cursor-not-allowed", className)}
18
- {...props}
19
- />
20
- ))
21
- InputOTP.displayName = "InputOTP"
22
-
23
- const InputOTPGroup = React.forwardRef<
24
- React.ElementRef<"div">,
25
- React.ComponentPropsWithoutRef<"div">
26
- >(({ className, ...props }, ref) => (
27
- <div ref={ref} className={cn("flex items-center", className)} {...props} />
28
- ))
29
- InputOTPGroup.displayName = "InputOTPGroup"
30
-
31
- const InputOTPSlot = React.forwardRef<
32
- React.ElementRef<"div">,
33
- React.ComponentPropsWithoutRef<"div"> & { index: number }
34
- >(({ index, className, ...props }, ref) => {
35
- const inputOTPContext = React.useContext(OTPInputContext)
36
- const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
37
-
38
- return (
39
- <div
40
- ref={ref}
41
- className={cn(
42
- "relative flex h-9 w-9 items-center justify-center border-y border-r border-slate-200 text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md dark:border-slate-800",
43
- isActive && "z-10 ring-1 ring-slate-950 dark:ring-slate-300",
44
- className,
45
- )}
46
- {...props}
47
- >
48
- {char}
49
- {hasFakeCaret && (
50
- <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
51
- <div className="h-4 w-px animate-caret-blink bg-slate-950 duration-1000 dark:bg-slate-50" />
52
- </div>
53
- )}
54
- </div>
55
- )
56
- })
57
- InputOTPSlot.displayName = "InputOTPSlot"
58
-
59
- const InputOTPSeparator = React.forwardRef<
60
- React.ElementRef<"div">,
61
- React.ComponentPropsWithoutRef<"div">
62
- >(({ ...props }, ref) => (
63
- <div ref={ref} role="separator" {...props}>
64
- <DashIcon />
65
- </div>
66
- ))
67
- InputOTPSeparator.displayName = "InputOTPSeparator"
68
-
69
- export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
@@ -1,25 +0,0 @@
1
- import Header from "@/components/Header"
2
- import Footer from "@/components/Footer"
3
- import ShippingInformationForm from "@/components/ShippingInformationForm"
4
-
5
- export const SettingsPage = () => {
6
- return (
7
- <div>
8
- <Header />
9
- <div className="container mx-auto px-4 py-8">
10
- <h1 className="text-3xl font-bold mb-6">Settings</h1>
11
- <div className="flex">
12
- <div className="lg:w-1/2 sm:w-full pr-4">
13
- <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
14
- <h2 className="text-2xl font-semibold mb-4">
15
- Shipping Information
16
- </h2>
17
- <ShippingInformationForm />
18
- </div>
19
- </div>
20
- </div>
21
- </div>
22
- <Footer />
23
- </div>
24
- )
25
- }