@igstack/app-catalog-frontend-core 0.0.1

package/src/ui/layout/SideColumn.tsx

@@ -0,0 +1,3 @@
+export function SideColumn() {
+  return <div className="h-full">SideColumn</div>
+}

package/src/ui/layout/TopLevelProviders.tsx

@@ -0,0 +1,63 @@
+import React, { Suspense, useMemo, useState } from 'react'
+
+import type { TRPCRouter } from '@igstack/app-catalog-backend-core'
+import type { QueryClient } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import type { TRPCClient } from '@trpc/client'
+import { ThemeProvider } from '~/components/theme-provider'
+import { AuthProvider } from '~/modules/auth'
+import { AuthModalProvider } from '~/modules/auth/AuthModalContext'
+import { LoginModal } from '~/modules/auth/ui/LoginModal'
+import { GlobalConfigProvider } from '~/modules/config/GlobalConfigContext'
+import { makePluginInterfaceForCore } from '~/modules/pluginCore/makePluginManagerContext'
+import { PluginManagerContextProvider } from '~/modules/pluginCore/PluginManagerContext'
+import { LoadingScreen } from './LoadingScreen'
+
+export interface MainLayoutProps {
+  children: React.ReactNode
+  queryClient: QueryClient
+  trpcClient: TRPCClient<TRPCRouter>
+}
+
+export function TopLevelProviders({ children }: MainLayoutProps) {
+  // const { data, failureCount, failureReason } = useQueryBootstrapConfig()
+  const [plugins] = useState(() => [
+    // Future plugins can be added here
+  ])
+
+  const pluginInterfaceForCore = useMemo(() => {
+    return makePluginInterfaceForCore(plugins)
+  }, [plugins])
+
+  // if (!data) {
+  //   return <LoadingScreen label='configuration' failureCount={failureCount} failureReason={failureReason?.message} />
+  // }
+
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <AuthModalProvider>
+        <AuthProvider>
+          <Suspense fallback={<LoadingScreen />}>
+            <GlobalConfigProvider>
+              <PluginManagerContextProvider
+                plugins={plugins}
+                pluginInterfaceForCore={pluginInterfaceForCore}
+              >
+                {children}
+                <LoginModal />
+                <TanStackRouterDevtools />
+                <ReactQueryDevtools initialIsOpen={false} />
+              </PluginManagerContextProvider>
+            </GlobalConfigProvider>
+          </Suspense>
+        </AuthProvider>
+      </AuthModalProvider>
+    </ThemeProvider>
+  )
+}

package/src/ui/layout/TopLevelProvidersForErrors.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { ThemeProvider } from '~/components/theme-provider'
+import { AuthProvider } from '~/modules/auth'
+import { AuthModalProvider } from '~/modules/auth/AuthModalContext'
+import { LoginModal } from '~/modules/auth/ui/LoginModal'
+
+export interface TopLevelProvidersForErrorsProps {
+  children: React.ReactNode
+}
+
+/**
+ * Minimal providers needed for error boundaries and fallback UI
+ * Includes authentication and theme providers to avoid "useAuth must be used within AuthProvider" errors
+ * when error components try to render Header or other auth-dependent components
+ */
+export function TopLevelProvidersForErrors({ children }: TopLevelProvidersForErrorsProps) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <AuthModalProvider>
+        <AuthProvider>
+          <>
+            {children}
+            <LoginModal />
+          </>
+        </AuthProvider>
+      </AuthModalProvider>
+    </ThemeProvider>
+  )
+}

package/src/ui/link.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+import { LinkComponent, createLink } from '@tanstack/react-router'
+import * as React from 'react'
+import { cn } from '~/lib/utils'
+
+interface BasicLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  className?: string
+}
+
+const BasicLinkComponent = ({
+  ref,
+  className,
+  ...props
+}: BasicLinkProps & { ref?: React.RefObject<HTMLAnchorElement | null> }) => {
+  return (
+    <a
+      ref={ref}
+      {...props}
+      className={cn(
+        'text-primary hover:text-primary/80 transition-colors font-medium',
+        className,
+      )}
+    />
+  )
+}
+
+const CreatedLinkComponent = createLink(BasicLinkComponent)
+
+export const Link: LinkComponent<typeof BasicLinkComponent> = (props) => {
+  return <CreatedLinkComponent preload={'intent'} {...props} />
+}
+
+export const ExternalLink = BasicLinkComponent

package/src/ui/linkExternal.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { cn } from '~/lib/utils'
+
+interface BasicLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  className?: string
+}
+
+export const LinkExternal = ({
+  ref,
+  href,
+  className,
+  ...props
+}: BasicLinkProps & { ref?: React.RefObject<HTMLAnchorElement | null> }) => {
+  return (
+    <a
+      ref={ref}
+      href={href}
+      target="_blank"
+      {...props}
+      className={cn(
+        'text-primary hover:text-primary/80 transition-colors font-medium',
+        className,
+      )}
+    />
+  )
+}

package/src/ui/main/JumpTabContent.tsx

@@ -0,0 +1,12 @@
+import { Button } from '~/ui/button'
+
+export function JumpTabContent() {
+  return (
+    <Button
+      size="lg"
+      className="w-full bg-green-600 hover:bg-green-700 text-white"
+    >
+      JUMP
+    </Button>
+  )
+}

package/src/ui/main/Tabs.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+const tabList = [
+  { label: 'Jump', value: 'jump' },
+  { label: 'Logs', value: 'logs' },
+]
+
+export function Tabs({ children }: { children: Array<React.ReactNode> }) {
+  const [active, setActive] = React.useState('jump')
+  return (
+    <div className="mb-4">
+      <div role="tablist" className="tabs tabs-boxed">
+        {tabList.map((tab) => (
+          <a
+            key={tab.value}
+            role="tab"
+            className={`tab${active === tab.value ? ' tab-active' : ''}`}
+            onClick={() => setActive(tab.value)}
+          >
+            {tab.label}
+          </a>
+        ))}
+      </div>
+      <div className="mt-4">
+        {active === 'jump' ? children[0] : children[1]}
+      </div>
+    </div>
+  )
+}

package/src/ui/markdown-editor/MarkdownEditor.tsx

@@ -0,0 +1,132 @@
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import Link from '@tiptap/extension-link'
+import Placeholder from '@tiptap/extension-placeholder'
+import { Markdown } from 'tiptap-markdown'
+import { useCallback, useEffect, useState } from 'react'
+import { cn } from '~/lib/utils'
+import { Button } from '~/ui/button'
+import { Textarea } from '~/ui/textarea'
+import { MarkdownToolbar } from './MarkdownToolbar'
+
+export interface MarkdownEditorProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  className?: string
+  minHeight?: string
+  disabled?: boolean
+}
+
+export function MarkdownEditor({
+  value,
+  onChange,
+  placeholder = 'Enter text...',
+  className,
+  minHeight = '120px',
+  disabled = false,
+}: MarkdownEditorProps) {
+  const [mode, setMode] = useState<'visual' | 'raw'>('visual')
+  const [rawValue, setRawValue] = useState(value)
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: {
+          class: 'text-primary underline',
+        },
+      }),
+      Placeholder.configure({
+        placeholder,
+      }),
+      Markdown,
+    ],
+    content: value,
+    editable: !disabled,
+    onUpdate: ({ editor: editorInstance }) => {
+      const markdown = editorInstance.storage.markdown.getMarkdown()
+      onChange(markdown)
+      setRawValue(markdown)
+    },
+  })
+
+  // Sync external value changes
+  useEffect(() => {
+    if (editor && value !== editor.storage.markdown.getMarkdown()) {
+      editor.commands.setContent(value)
+      setRawValue(value)
+    }
+  }, [value, editor])
+
+  const handleModeToggle = useCallback(() => {
+    if (mode === 'visual') {
+      // Switching to raw - get current markdown
+      if (editor) {
+        setRawValue(editor.storage.markdown.getMarkdown())
+      }
+      setMode('raw')
+    } else {
+      // Switching to visual - update editor with raw content
+      if (editor) {
+        editor.commands.setContent(rawValue)
+      }
+      onChange(rawValue)
+      setMode('visual')
+    }
+  }, [mode, editor, rawValue, onChange])
+
+  const handleRawChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setRawValue(e.target.value)
+      onChange(e.target.value)
+    },
+    [onChange],
+  )
+
+  return (
+    <div className={cn('border rounded-md', className)}>
+      {/* Header with mode toggle */}
+      <div className="flex items-center justify-between border-b px-2 py-1 bg-muted/30">
+        {mode === 'visual' && editor && <MarkdownToolbar editor={editor} />}
+        {mode === 'raw' && (
+          <span className="text-xs text-muted-foreground">Markdown</span>
+        )}
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={handleModeToggle}
+          className="text-xs"
+          disabled={disabled}
+        >
+          {mode === 'visual' ? 'Raw' : 'Visual'}
+        </Button>
+      </div>
+
+      {/* Editor content */}
+      {mode === 'visual' ? (
+        <EditorContent
+          editor={editor}
+          className={cn(
+            'prose prose-sm max-w-none p-3',
+            'focus-within:outline-none',
+            '[&_.ProseMirror]:outline-none [&_.ProseMirror]:min-h-[var(--min-h)]',
+            disabled && 'opacity-50 cursor-not-allowed',
+          )}
+          style={{ '--min-h': minHeight } as React.CSSProperties}
+        />
+      ) : (
+        <Textarea
+          value={rawValue}
+          onChange={handleRawChange}
+          placeholder={placeholder}
+          className="border-0 rounded-none focus-visible:ring-0 font-mono text-sm resize-none"
+          style={{ minHeight }}
+          disabled={disabled}
+        />
+      )}
+    </div>
+  )
+}

package/src/ui/markdown-editor/MarkdownToolbar.tsx

@@ -0,0 +1,90 @@
+import type { Editor } from '@tiptap/react'
+import { Bold, Italic, Link, List, ListOrdered, Redo, Undo } from 'lucide-react'
+import { Button } from '~/ui/button'
+import { cn } from '~/lib/utils'
+
+interface MarkdownToolbarProps {
+  editor: Editor
+}
+
+interface ToolbarButtonProps {
+  onClick: () => void
+  isActive?: boolean
+  icon: React.ComponentType<{ className?: string }>
+  title: string
+}
+
+function ToolbarButton({
+  onClick,
+  isActive,
+  icon: Icon,
+  title,
+}: ToolbarButtonProps) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="sm"
+      onClick={onClick}
+      className={cn('h-7 w-7 p-0', isActive && 'bg-muted')}
+      title={title}
+    >
+      <Icon className="h-4 w-4" />
+    </Button>
+  )
+}
+
+export function MarkdownToolbar({ editor }: MarkdownToolbarProps) {
+  const addLink = () => {
+    const url = window.prompt('Enter URL:')
+    if (url) {
+      editor.chain().focus().setLink({ href: url }).run()
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-0.5">
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        isActive={editor.isActive('bold')}
+        icon={Bold}
+        title="Bold"
+      />
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+        isActive={editor.isActive('italic')}
+        icon={Italic}
+        title="Italic"
+      />
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleBulletList().run()}
+        isActive={editor.isActive('bulletList')}
+        icon={List}
+        title="Bullet List"
+      />
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+        isActive={editor.isActive('orderedList')}
+        icon={ListOrdered}
+        title="Numbered List"
+      />
+      <ToolbarButton
+        onClick={addLink}
+        isActive={editor.isActive('link')}
+        icon={Link}
+        title="Add Link"
+      />
+      <div className="w-px h-4 bg-border mx-1" />
+      <ToolbarButton
+        onClick={() => editor.chain().focus().undo().run()}
+        icon={Undo}
+        title="Undo"
+      />
+      <ToolbarButton
+        onClick={() => editor.chain().focus().redo().run()}
+        icon={Redo}
+        title="Redo"
+      />
+    </div>
+  )
+}

package/src/ui/markdown-editor/index.ts

@@ -0,0 +1,2 @@
+export { MarkdownEditor } from './MarkdownEditor'
+export type { MarkdownEditorProps } from './MarkdownEditor'

package/src/ui/popover.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '~/lib/utils'
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

package/src/ui/radio-group.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { CircleIcon } from 'lucide-react'
+
+import { cn } from '~/lib/utils'
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn('grid gap-3', className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

package/src/ui/resizable.tsx

@@ -0,0 +1,51 @@
+import { GripVerticalIcon } from 'lucide-react'
+import * as ResizablePrimitive from 'react-resizable-panels'
+
+import { cn } from '~/lib/utils'
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        'flex h-full w-full aria-[orientation=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90',
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.Separator>
+  )
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }

package/src/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '~/lib/utils'
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn('relative', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent',
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }