Move to TanStack Start from Next.js (#184)

web/shared/la-editor/components/ui/icon.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { icons } from "lucide-react"
+
+export type IconProps = {
+  name: keyof typeof icons
+  className?: string
+  strokeWidth?: number
+  [key: string]: any
+}
+
+export const Icon = React.memo(
+  ({ name, className, size, strokeWidth, ...props }: IconProps) => {
+    const IconComponent = icons[name]
+
+    if (!IconComponent) {
+      return null
+    }
+
+    return (
+      <IconComponent
+        className={cn(!size ? "size-4" : size, className)}
+        strokeWidth={strokeWidth || 2}
+        {...props}
+      />
+    )
+  },
+)
+
+Icon.displayName = "Icon"

web/shared/la-editor/components/ui/keybind.tsx

@@ -0,0 +1,52 @@
+import { ReactNode, useState } from "react"
+import { motion } from "framer-motion"
+
+export function Keybind({
+  keys,
+  children,
+}: {
+  keys: string[]
+  children: ReactNode
+}) {
+  const [hovered, setHovered] = useState(false)
+  const variants = {
+    hidden: { opacity: 0, y: 6, x: "-50%" },
+    visible: { opacity: 1, y: 0, x: "-50%" },
+  }
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      className="group relative h-full"
+    >
+      <motion.div
+        initial="hidden"
+        animate={hovered ? "visible" : "hidden"}
+        variants={variants}
+        transition={{ duration: 0.2, delay: 0.4 }}
+        className="absolute left-[50%] top-[-30px] flex h-fit w-fit items-center rounded-[7px] border border-slate-400/30 bg-gray-100 p-[3px] px-2 text-[10px] drop-shadow-sm dark:border-slate-400/10 dark:bg-[#191919]"
+        style={{
+          boxShadow: "inset 0px 0px 6px 2px var(--boxShadow)",
+        }}
+      >
+        {keys.map((key, index) => (
+          <span key={key}>
+            {index > 0 && <span className="mx-1">+</span>}
+            {(() => {
+              switch (key.toLowerCase()) {
+                case "cmd":
+                  return "⌘"
+                case "shift":
+                  return "⇪"
+
+                default:
+                  return key
+              }
+            })()}
+          </span>
+        ))}
+      </motion.div>
+      {children}
+    </div>
+  )
+}

web/shared/la-editor/components/ui/popover-wrapper.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export type PopoverWrapperProps = React.HTMLProps<HTMLDivElement>
+
+export const PopoverWrapper = React.forwardRef<
+  HTMLDivElement,
+  PopoverWrapperProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      className={cn(
+        "bg-popover text-popover-foreground rounded-lg border shadow-sm",
+        className,
+      )}
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </div>
+  )
+})
+
+PopoverWrapper.displayName = "PopoverWrapper"

web/shared/la-editor/components/ui/shortcut.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { getShortcutKey } from "@/lib/utils"
+
+export interface ShortcutKeyWrapperProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  ariaLabel: string
+}
+
+const ShortcutKeyWrapper = React.forwardRef<
+  HTMLSpanElement,
+  ShortcutKeyWrapperProps
+>(({ className, ariaLabel, children, ...props }, ref) => {
+  return (
+    <span
+      aria-label={ariaLabel}
+      className={cn("inline-flex items-center gap-0.5", className)}
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </span>
+  )
+})
+
+ShortcutKeyWrapper.displayName = "ShortcutKeyWrapper"
+
+export interface ShortcutKeyProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  shortcut: string
+}
+
+const ShortcutKey = React.forwardRef<HTMLSpanElement, ShortcutKeyProps>(
+  ({ className, shortcut, ...props }, ref) => {
+    return (
+      <kbd
+        className={cn(
+          "inline-block min-w-2.5 text-center align-baseline font-sans text-xs font-medium capitalize text-[rgb(156,157,160)]",
+          className,
+        )}
+        {...props}
+        ref={ref}
+      >
+        {getShortcutKey(shortcut).symbol}
+      </kbd>
+    )
+  },
+)
+
+ShortcutKey.displayName = "ShortcutKey"
+
+export const Shortcut = {
+  Wrapper: ShortcutKeyWrapper,
+  Key: ShortcutKey,
+}

web/shared/la-editor/components/ui/toolbar-button.tsx

@@ -0,0 +1,57 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Toggle } from "@/components/ui/toggle"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import type { TooltipContentProps } from "@radix-ui/react-tooltip"
+
+interface ToolbarButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Toggle> {
+  isActive?: boolean
+  tooltip?: string
+  tooltipOptions?: TooltipContentProps
+}
+
+const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(
+  function ToolbarButton(
+    { isActive, children, tooltip, className, tooltipOptions, ...props },
+    ref,
+  ) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Toggle
+            size="sm"
+            ref={ref}
+            className={cn(
+              "size-7 rounded-md p-0",
+              {
+                "bg-primary/10 text-primary hover:bg-primary/10 hover:text-primary":
+                  isActive,
+              },
+              className,
+            )}
+            {...props}
+          >
+            {children}
+          </Toggle>
+        </TooltipTrigger>
+        {tooltip && (
+          <TooltipContent {...tooltipOptions}>
+            <div className="flex flex-col items-center text-center">
+              {tooltip}
+            </div>
+          </TooltipContent>
+        )}
+      </Tooltip>
+    )
+  },
+)
+
+ToolbarButton.displayName = "ToolbarButton"
+
+export { ToolbarButton }