@tscircuit/fake-snippets 0.0.1

package/src/components/RunButton.tsx

@@ -0,0 +1,27 @@
+import { Loader2Icon, PlayIcon } from "lucide-react"
+import { Button } from "./ui/button"
+
+export const RunButton = ({
+  onClick,
+  disabled,
+  isRunningCode,
+}: {
+  onClick: () => void
+  disabled: boolean
+  isRunningCode?: boolean
+}) => {
+  return (
+    <Button
+      className="bg-blue-600 hover:bg-blue-500 run-button"
+      onClick={onClick}
+      disabled={disabled || isRunningCode}
+    >
+      Run
+      {isRunningCode ? (
+        <Loader2Icon className="w-3 h-3 ml-2 animate-spin" />
+      ) : (
+        <PlayIcon className="w-3 h-3 ml-2" />
+      )}
+    </Button>
+  )
+}

package/src/components/SearchComponent.tsx

@@ -0,0 +1,163 @@
+import { Input } from "@/components/ui/input"
+import { useAxios } from "@/hooks/use-axios"
+import { useLocation } from "wouter"
+import React, { useEffect, useRef, useState } from "react"
+import { useQuery } from "react-query"
+import { Alert } from "./ui/alert"
+import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { PrefetchPageLink } from "./PrefetchPageLink"
+
+interface SearchComponentProps {
+  onResultsFetched?: (results: any[]) => void // optional
+}
+
+const LinkWithNewTabHandling = ({
+  shouldOpenInNewTab,
+  href,
+  className,
+  children,
+}: {
+  shouldOpenInNewTab: boolean
+  href: string
+  className?: string
+  children: React.ReactNode
+}) => {
+  if (shouldOpenInNewTab) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={className}
+      >
+        {children}
+      </a>
+    )
+  }
+  return (
+    <PrefetchPageLink className={className} href={href}>
+      {children}
+    </PrefetchPageLink>
+  )
+}
+
+const SearchComponent: React.FC<SearchComponentProps> = ({
+  onResultsFetched,
+}) => {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [showResults, setShowResults] = useState(false)
+  const axios = useAxios()
+  const resultsRef = useRef<HTMLDivElement>(null)
+  const [location] = useLocation()
+  const { snippetsBaseApiUrl } = useSnippetsBaseApiUrl()
+
+  const { data: searchResults, isLoading } = useQuery(
+    ["snippetSearch", searchQuery],
+    async () => {
+      if (!searchQuery) return []
+      const { data } = await axios.get("/snippets/search", {
+        params: { q: searchQuery },
+      })
+      if (onResultsFetched) {
+        onResultsFetched(data.snippets)
+      }
+      return data.snippets
+    },
+    { enabled: Boolean(searchQuery) },
+  )
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault()
+    setShowResults(!!searchQuery)
+  }
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        resultsRef.current &&
+        !resultsRef.current.contains(event.target as Node)
+      ) {
+        setShowResults(false)
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [])
+
+  const shouldOpenInNewTab = location === "/editor" || location === "/ai"
+  const shouldOpenInEditor = location === "/editor" || location === "/ai"
+
+  return (
+    <form onSubmit={handleSearch} className="relative">
+      <Input
+        type="search"
+        placeholder="Search"
+        className="pl-4 focus:border-blue-500 placeholder-gray-400 text-sm"
+        value={searchQuery}
+        onChange={(e) => {
+          setSearchQuery(e.target.value)
+          setShowResults(!!e.target.value)
+        }}
+        aria-label="Search snippets"
+        role="searchbox"
+      />
+      {isLoading && (
+        <div className="absolute top-full left-0 right-0 mt-2 bg-white shadow-lg rounded-md z-10 p-2 flex items-center justify-center space-x-2">
+          <span className="text-gray-500 text-sm">Loading...</span>
+        </div>
+      )}
+
+      {showResults && searchResults && (
+        <div
+          ref={resultsRef}
+          className="absolute top-full md:left-0 right-0 mt-2 bg-white shadow-lg rounded-md z-10 w-80 max-h-screen overflow-y-auto overflow-x-visible"
+        >
+          {searchResults.length > 0 ? (
+            <ul className="divide-y divide-gray-200">
+              {searchResults.map((snippet: any) => (
+                <li key={snippet.snippet_id} className="p-2 hover:bg-gray-50">
+                  <LinkWithNewTabHandling
+                    href={
+                      shouldOpenInEditor
+                        ? `/editor?snippet_id=${snippet.snippet_id}`
+                        : `/${snippet.owner_name}/${snippet.unscoped_name}`
+                    }
+                    shouldOpenInNewTab={shouldOpenInNewTab}
+                    className="flex"
+                  >
+                    <div className="w-12 h-12 overflow-hidden mr-2 flex-shrink-0 rounded-sm">
+                      <img
+                        src={`${useSnippetsBaseApiUrl()}/snippets/images/${snippet.owner_name}/${snippet.unscoped_name}/pcb.svg`}
+                        alt={`PCB preview for ${snippet.name}`}
+                        className="w-12 h-12 object-contain p-1 scale-[4] rotate-45"
+                      />
+                    </div>
+                    <div className="flex-grow">
+                      <div className="font-medium text-blue-600 break-words text-xs">
+                        {snippet.name}
+                      </div>
+                      {snippet.description && (
+                        <div className="text-xs text-gray-500 break-words h-8 overflow-hidden">
+                          {snippet.description}
+                        </div>
+                      )}
+                    </div>
+                  </LinkWithNewTabHandling>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <Alert variant="default" className="p-4">
+              No results found for "{searchQuery}"
+            </Alert>
+          )}
+        </div>
+      )}
+    </form>
+  )
+}
+
+export default SearchComponent

package/src/components/ShippingInformationForm.tsx

@@ -0,0 +1,423 @@
+import React, { useReducer, useEffect, useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { useToast } from "@/hooks/use-toast"
+import { useAxios } from "@/hooks/use-axios"
+import { useQuery, useMutation, useQueryClient } from "react-query"
+import { Loader2 } from "lucide-react"
+import { getNames } from "country-list"
+import states from "states-us"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { SearchableSelect } from "@/components/ui/searchable-select"
+
+const USA = "United States of America"
+
+type ShippingInfo = {
+  firstName: string
+  lastName: string
+  companyName: string
+  address: string
+  apartment: string
+  city: string
+  state: string
+  zipCode: string
+  country: string
+  phone: string
+}
+
+type Action =
+  | { type: "SET_FIELD"; field: keyof ShippingInfo; value: string }
+  | { type: "SET_ALL"; payload: ShippingInfo }
+
+const initialState: ShippingInfo = {
+  firstName: "",
+  lastName: "",
+  companyName: "",
+  address: "",
+  apartment: "",
+  zipCode: "",
+  country: USA,
+  city: "",
+  state: "",
+  phone: "",
+}
+
+const shippingPlaceholders: ShippingInfo = {
+  firstName: "Enter your first name",
+  lastName: "Enter your last name",
+  companyName: "Enter company name (optional)",
+  address: "Enter your street address",
+  apartment: "Apartment, suite, unit etc. (optional)",
+  zipCode: "Enter your zip code",
+  country: "Select your country",
+  city: "Enter your city",
+  state: "Enter your state",
+  phone: "Enter your phone number",
+}
+
+const ShippingInformationForm: React.FC = () => {
+  const [form, setField] = useReducer(
+    (state: ShippingInfo, action: Action): ShippingInfo => {
+      switch (action.type) {
+        case "SET_FIELD":
+          return { ...state, [action.field]: action.value }
+        case "SET_ALL":
+          return action.payload
+        default:
+          return state
+      }
+    },
+    initialState,
+  )
+  const { toast } = useToast()
+  const axios = useAxios()
+  const queryClient = useQueryClient()
+  const [countries] = useState(getNames())
+  const [isPhoneValid, setIsPhoneValid] = useState(true)
+
+  const { data: account, isLoading: isLoadingAccount } = useQuery(
+    "account",
+    async () => {
+      const response = await axios.get("/accounts/get")
+      return response.data.account
+    },
+  )
+
+  const updateShippingMutation = useMutation(
+    (shippingInfo: ShippingInfo) =>
+      axios.post("/accounts/update", { shippingInfo }),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries("account")
+        toast({
+          title: "Success",
+          description: "Shipping information updated successfully",
+        })
+      },
+      onError: () => {
+        toast({
+          title: "Error",
+          description: "Failed to update shipping information",
+          variant: "destructive",
+        })
+      },
+    },
+  )
+
+  useEffect(() => {
+    if (account?.shippingInfo) {
+      setField({
+        type: "SET_ALL",
+        payload: {
+          ...account.shippingInfo,
+          country: account.shippingInfo.country || USA,
+        },
+      })
+    }
+  }, [account])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    updateShippingMutation.mutate(form)
+  }
+
+  if (isLoadingAccount) {
+    return (
+      <div className="flex justify-center items-center h-64">
+        <Loader2 className="w-8 h-8 animate-spin" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label
+          htmlFor="country"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Country <span className="text-red-500">*</span>
+        </label>
+        <SearchableSelect
+          options={countries.map((country) => ({
+            value: country,
+            label: country,
+          }))}
+          value={form.country}
+          onChange={(value) =>
+            setField({ type: "SET_FIELD", field: "country", value })
+          }
+          resourceType="country"
+        />
+        {form.country !== USA && (
+          <Alert variant="destructive" className="mt-2">
+            <AlertDescription>
+              Currently, only shipping to the US is supported.{" "}
+              <a
+                href={`https://github.com/tscircuit/snippets/issues/new?title=${encodeURIComponent("Shipping to " + form.country)}&body=${encodeURIComponent("Please add support for shipping to " + form.country + ".")}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium underline"
+              >
+                Create an Issue
+              </a>
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
+      <div>
+        <label
+          htmlFor="companyName"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Company Name
+        </label>
+        <Input
+          id="companyName"
+          value={form.companyName}
+          onChange={(e) =>
+            setField({
+              type: "SET_FIELD",
+              field: "companyName",
+              value: e.target.value,
+            })
+          }
+          placeholder={shippingPlaceholders.companyName}
+          disabled={updateShippingMutation.isLoading}
+        />
+      </div>
+      <div className="flex gap-4">
+        <div className="flex-1">
+          <label
+            htmlFor="firstName"
+            className="block text-sm font-medium text-gray-700"
+          >
+            First Name <span className="text-red-500">*</span>
+          </label>
+          <Input
+            id="firstName"
+            value={form.firstName}
+            onChange={(e) =>
+              setField({
+                type: "SET_FIELD",
+                field: "firstName",
+                value: e.target.value,
+              })
+            }
+            placeholder={shippingPlaceholders.firstName}
+            disabled={updateShippingMutation.isLoading}
+            required
+          />
+        </div>
+        <div className="flex-1">
+          <label
+            htmlFor="lastName"
+            className="block text-sm font-medium text-gray-700"
+          >
+            Last Name <span className="text-red-500">*</span>
+          </label>
+          <Input
+            id="lastName"
+            value={form.lastName}
+            onChange={(e) =>
+              setField({
+                type: "SET_FIELD",
+                field: "lastName",
+                value: e.target.value,
+              })
+            }
+            placeholder={shippingPlaceholders.lastName}
+            disabled={updateShippingMutation.isLoading}
+            required
+          />
+        </div>
+      </div>
+      <div>
+        <label
+          htmlFor="address"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Address <span className="text-red-500">*</span>
+        </label>
+        <Input
+          id="address"
+          value={form.address}
+          onChange={(e) =>
+            setField({
+              type: "SET_FIELD",
+              field: "address",
+              value: e.target.value,
+            })
+          }
+          placeholder={shippingPlaceholders.address}
+          disabled={updateShippingMutation.isLoading}
+          required
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="apartment"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Apartment, suite, unit etc.
+        </label>
+        <Input
+          id="apartment"
+          value={form.apartment}
+          onChange={(e) =>
+            setField({
+              type: "SET_FIELD",
+              field: "apartment",
+              value: e.target.value,
+            })
+          }
+          placeholder={shippingPlaceholders.apartment}
+          disabled={updateShippingMutation.isLoading}
+        />
+      </div>
+      <div className="flex gap-4">
+        <div className="flex-1">
+          <label
+            htmlFor="city"
+            className="block text-sm font-medium text-gray-700"
+          >
+            Town / City <span className="text-red-500">*</span>
+          </label>
+          <Input
+            id="city"
+            value={form.city}
+            onChange={(e) =>
+              setField({
+                type: "SET_FIELD",
+                field: "city",
+                value: e.target.value,
+              })
+            }
+            placeholder={shippingPlaceholders.city}
+            disabled={updateShippingMutation.isLoading}
+            required
+          />
+        </div>
+        <div className="flex-1">
+          <label
+            htmlFor="state"
+            className="block text-sm font-medium text-gray-700"
+          >
+            State{" "}
+            {form.country === USA && <span className="text-red-500">*</span>}
+          </label>
+          {form.country === USA ? (
+            <SearchableSelect
+              options={states.map((state) => ({
+                value: state.name,
+                label: state.name,
+              }))}
+              value={form.state}
+              onChange={(value) =>
+                setField({ type: "SET_FIELD", field: "state", value })
+              }
+              resourceType="state"
+            />
+          ) : (
+            <Input
+              id="state"
+              value={form.state}
+              onChange={(e) =>
+                setField({
+                  type: "SET_FIELD",
+                  field: "state",
+                  value: e.target.value,
+                })
+              }
+              placeholder={shippingPlaceholders.state}
+              disabled={updateShippingMutation.isLoading}
+            />
+          )}
+        </div>
+      </div>
+      <div>
+        <label
+          htmlFor="zipCode"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Postcode / Zip <span className="text-red-500">*</span>
+        </label>
+        <Input
+          id="zipCode"
+          value={form.zipCode}
+          onChange={(e) =>
+            setField({
+              type: "SET_FIELD",
+              field: "zipCode",
+              value: e.target.value,
+            })
+          }
+          placeholder={shippingPlaceholders.zipCode}
+          disabled={updateShippingMutation.isLoading}
+          required
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="phone"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Phone <span className="text-red-500">*</span>
+        </label>
+        <div>
+          <Input
+            id="phone"
+            type="tel"
+            value={form.phone}
+            onChange={(e) => {
+              setIsPhoneValid(true)
+              setField({
+                type: "SET_FIELD",
+                field: "phone",
+                value: e.target.value,
+              })
+            }}
+            onBlur={() => {
+              const phoneRegex =
+                /^(\+\d{1,2}\s?)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/
+              setIsPhoneValid(phoneRegex.test(form.phone))
+            }}
+            placeholder={shippingPlaceholders.phone}
+            disabled={updateShippingMutation.isLoading}
+            required
+          />
+          <p className="text-xs text-gray-500 mt-1">
+            Format: (123) 456-7890 or +1 123-456-7890
+          </p>
+          {!isPhoneValid && form.phone && (
+            <Alert variant="destructive" className="mt-2">
+              <AlertDescription>
+                Please enter a valid phone number.
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
+      </div>
+      <Button
+        type="submit"
+        disabled={
+          updateShippingMutation.isLoading ||
+          form.country !== USA ||
+          !isPhoneValid
+        }
+        onClick={handleSubmit}
+      >
+        {updateShippingMutation.isLoading ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            Updating...
+          </>
+        ) : (
+          "Update"
+        )}
+      </Button>
+    </div>
+  )
+}
+
+export default ShippingInformationForm

package/src/components/SnippetLink.tsx

@@ -0,0 +1,37 @@
+import { Link } from "wouter"
+import { Star } from "lucide-react"
+
+export const SnippetLink = ({
+  snippet,
+}: {
+  snippet: {
+    owner_name: string
+    name: string
+    unscoped_name: string
+    star_count?: number
+  }
+}) => {
+  return (
+    <>
+      <Link
+        className="text-blue-500 font-semibold hover:underline"
+        href={`/${snippet.owner_name}`}
+      >
+        {snippet.owner_name}
+      </Link>
+      <span className="px-0.5 text-gray-500">/</span>
+      <Link
+        className="text-blue-500  font-semibold hover:underline"
+        href={`/${snippet.name}`}
+      >
+        {snippet.unscoped_name}
+      </Link>
+      {snippet.star_count !== undefined && (
+        <span className="ml-2 text-gray-500 text-xs flex items-center">
+          <Star className="w-3 h-3 mr-1" />
+          {snippet.star_count}
+        </span>
+      )}
+    </>
+  )
+}