@tscircuit/fake-snippets 0.0.27 → 0.0.28

package/src/components/ViewPackagePage/components/theme-toggle.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Moon, Sun } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useEffect, useState } from "react"
+
+export default function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  // Ensure component is mounted before accessing theme
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return (
+      <Button
+        variant="outline"
+        size="icon"
+        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]"
+      >
+        <Sun className="h-4 w-4" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    )
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      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]"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+    >
+      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}

package/src/components/ViewPackagePage/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/components/ViewPackagePage/hooks/use-toast.ts

@@ -0,0 +1,191 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }

package/src/components/ViewPackagePage/simulate-page.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import RepoPageContent from "./components/repo-page-content"
+
+// Sample data for simulation
+const samplePackageFiles = [
+  {
+    package_file_id: "1",
+    package_release_id: "1",
+    file_path: "README.md",
+    content_text:
+      "# @tscircuit/keyboard-default60\n\nA Default 60 keyboard created with tscircuit\n\n## Features\n\n- Full mechanical keyboard PCB design\n- Compatible with standard 60% cases\n- USB-C connector\n- Supports QMK firmware",
+    created_at: "2023-04-15T12:00:00Z",
+  },
+  {
+    package_file_id: "2",
+    package_release_id: "1",
+    file_path: "LICENSE",
+    content_text:
+      'MIT License\n\nCopyright (c) 2023 tscircuit\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions...',
+    created_at: "2023-04-15T12:00:00Z",
+  },
+  {
+    package_file_id: "3",
+    package_release_id: "1",
+    file_path: "lib/index.tsx",
+    content_text:
+      "import React from 'react'\nimport { PCB, Resistor, Capacitor, LED } from '@tscircuit/react'\n\nexport const KeyboardDefault60 = () => {\n  return (\n    <PCB name=\"keyboard-default60\">\n      {/* Main controller */}\n      <Microcontroller x={50} y={50} name=\"MCU1\" />\n      \n      {/* Key matrix */}\n      <KeyMatrix x={100} y={100} rows={5} cols={14} />\n      \n      {/* Power circuit */}\n      <PowerCircuit x={20} y={20} />\n    </PCB>\n  )\n}",
+    created_at: "2023-04-15T12:00:00Z",
+  },
+  {
+    package_file_id: "4",
+    package_release_id: "1",
+    file_path: "lib/components/KeyMatrix.tsx",
+    content_text:
+      "import React from 'react'\nimport { Switch, Diode } from '@tscircuit/react'\n\ninterface KeyMatrixProps {\n  x: number\n  y: number\n  rows: number\n  cols: number\n}\n\nexport const KeyMatrix = ({ x, y, rows, cols }: KeyMatrixProps) => {\n  const keys = []\n  \n  for (let row = 0; row < rows; row++) {\n    for (let col = 0; col < cols; col++) {\n      keys.push(\n        <Switch\n          key={`key-${row}-${col}`}\n          x={x + col * 19.05}\n          y={y + row * 19.05}\n          name={`SW${row * cols + col + 1}`}\n        />\n      )\n      \n      keys.push(\n        <Diode\n          key={`diode-${row}-${col}`}\n          x={x + col * 19.05 + 5}\n          y={y + row * 19.05 + 5}\n          name={`D${row * cols + col + 1}`}\n        />\n      )\n    }\n  }\n  \n  return <>{keys}</>\n}",
+    created_at: "2023-04-15T12:00:00Z",
+  },
+  {
+    package_file_id: "5",
+    package_release_id: "1",
+    file_path: "lib/components/PowerCircuit.tsx",
+    content_text:
+      'import React from \'react\'\nimport { Capacitor, Resistor, Regulator } from \'@tscircuit/react\'\n\ninterface PowerCircuitProps {\n  x: number\n  y: number\n}\n\nexport const PowerCircuit = ({ x, y }: PowerCircuitProps) => {\n  return (\n    <>\n      <Regulator\n        x={x}\n        y={y}\n        name="U1"\n        value="AP2112K-3.3"\n      />\n      <Capacitor\n        x={x - 10}\n        y={y}\n        name="C1"\n        value="10uF"\n      />\n      <Capacitor\n        x={x + 10}\n        y={y}\n        name="C2"\n        value="10uF"\n      />\n      <Resistor\n        x={x}\n        y={y + 10}\n        name="R1"\n        value="10k"\n      />\n    </>\n  )\n}',
+    created_at: "2023-04-15T12:00:00Z",
+  },
+  {
+    package_file_id: "6",
+    package_release_id: "1",
+    file_path: "package.json",
+    content_text:
+      '{\n  "name": "@tscircuit/keyboard-default60",\n  "version": "0.0.361",\n  "description": "A Default 60 keyboard created with tscircuit",\n  "main": "dist/index.js",\n  "types": "dist/index.d.ts",\n  "scripts": {\n    "build": "tsc",\n    "test": "jest"\n  },\n  "dependencies": {\n    "@tscircuit/react": "^0.1.0",\n    "react": "^18.2.0"\n  },\n  "devDependencies": {\n    "typescript": "^5.0.0",\n    "jest": "^29.0.0"\n  },\n  "license": "MIT"\n}',
+    created_at: "2023-04-15T12:00:00Z",
+  },
+  {
+    package_file_id: "7",
+    package_release_id: "1",
+    file_path: "tsconfig.json",
+    content_text:
+      '{\n  "compilerOptions": {\n    "target": "es2020",\n    "module": "esnext",\n    "moduleResolution": "node",\n    "declaration": true,\n    "outDir": "./dist",\n    "strict": true,\n    "esModuleInterop": true,\n    "skipLibCheck": true,\n    "forceConsistentCasingInFileNames": true,\n    "jsx": "react"\n  },\n  "include": ["lib/**/*"],\n  "exclude": ["node_modules", "**/*.test.ts"]\n}',
+    created_at: "2023-04-15T12:00:00Z",
+  },
+]
+
+const samplePackageInfo = {
+  name: "@tscircuit/keyboard-default60",
+  unscoped_name: "keyboard-default60",
+  owner_github_username: "tscircuit",
+  star_count: "16",
+  description: "A Default 60 keyboard created with tscircuit",
+  ai_description:
+    "This package contains the PCB design for a standard 60% mechanical keyboard layout, created using the tscircuit library. It includes the schematic, PCB layout, and 3D model.",
+}
+
+export default function SimulatePage() {
+  const [packageFiles, setPackageFiles] = useState<any>(null)
+  const [packageInfo, setPackageInfo] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // Simulate loading data after 1 second
+    const timer = setTimeout(() => {
+      setPackageFiles(samplePackageFiles)
+      setPackageInfo(samplePackageInfo)
+      setLoading(false)
+    }, 1000)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  // Event handlers with window.alert for testing
+  const handleFileClicked = (file: any) => {
+    window.alert(`File clicked: ${file.name}`)
+  }
+
+  const handleDirectoryClicked = (directory: any) => {
+    window.alert(`Directory clicked: ${directory.name}`)
+  }
+
+  const handleExportClicked = (exportType: string) => {
+    window.alert(`Export clicked: ${exportType}`)
+  }
+
+  const handleEditClicked = () => {
+    window.alert("Edit button clicked")
+  }
+
+  return (
+    <RepoPageContent
+      packageFiles={packageFiles}
+      packageInfo={packageInfo}
+      importantFilePaths={["README.md", "LICENSE", "package.json"]}
+      onFileClicked={handleFileClicked}
+      onDirectoryClicked={handleDirectoryClicked}
+      onExportClicked={handleExportClicked}
+      onEditClicked={handleEditClicked}
+    />
+  )
+}

package/src/components/ViewPackagePage/utils/is-package-file-important.ts

@@ -0,0 +1,21 @@
+const importanceMap = {
+  "readme.md": 200,
+  license: 100,
+  "license.md": 100,
+  "index.ts": 90,
+  "index.tsx": 90,
+  "circuit.tsx": 90,
+}
+
+export const scorePackageFileImportance = (filePath: string) => {
+  for (const [key, value] of Object.entries(importanceMap)) {
+    if (filePath.endsWith(key)) {
+      return value
+    }
+  }
+  return 0
+}
+
+export const isPackageFileImportant = (filePath: string) => {
+  return scorePackageFileImportance(filePath) > 0
+}

package/src/hooks/use-package-files.ts

@@ -84,7 +84,7 @@ export const usePackageFileByRelease = (
 }
 
 // Hook to list all files for a package release
-export const usePackageFiles = (packageReleaseId: string | null) => {
+export const usePackageFiles = (packageReleaseId?: string | null) => {
   const axios = useAxios()
 
   return useQuery<PackageFile[], Error & { status: number }>(

package/src/index.css

@@ -19,3 +19,18 @@
 .animate-fadeIn {
   animation: fadeIn 0.3s ease-in-out;
 }
+
+.shiki code {
+  counter-reset: step;
+  counter-increment: step 0;
+}
+
+.shiki code .line::before {
+  content: counter(step);
+  counter-increment: step;
+  width: 1rem;
+  margin-right: 1.5rem;
+  display: inline-block;
+  text-align: right;
+  color: rgba(115, 138, 148, 0.4);
+}

package/src/pages/view-package.tsx

@@ -0,0 +1,38 @@
+import RepoPageContent from "@/components/ViewPackagePage/components/repo-page-content"
+import SimulatePage from "@/components/ViewPackagePage/simulate-page"
+import { usePackageByName } from "@/hooks/use-package-by-package-name"
+import { usePackageFiles } from "@/hooks/use-package-files"
+import { usePackageRelease } from "@/hooks/use-package-release"
+import { useLocation } from "wouter"
+
+export const ViewPackagePage = () => {
+  // Get the current path and extract author/packageName
+  const [location] = useLocation()
+  const pathParts = location.split("/")
+  const author = pathParts[2]
+  const urlPackageName = pathParts[3]
+  const fullPackageName = `${author}/${urlPackageName}`
+
+  const { data: packageInfo } = usePackageByName(fullPackageName)
+
+  const { data: packageRelease } = usePackageRelease({
+    is_latest: true,
+    package_name: fullPackageName,
+  })
+
+  const { data: packageFiles } = usePackageFiles(
+    packageRelease?.package_release_id,
+  )
+
+  return (
+    <RepoPageContent
+      packageFiles={packageFiles as any}
+      packageInfo={packageInfo as any}
+      importantFilePaths={["README.md", "LICENSE", "package.json"]}
+      onFileClicked={() => {}}
+      onDirectoryClicked={() => {}}
+      onExportClicked={() => {}}
+      onEditClicked={() => {}}
+    />
+  )
+}