@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha.4

package/src/modules/resourceJump/ui/ResouceJumpLayout.tsx

@@ -1,73 +0,0 @@
-import { EhJumpResourceSelector } from './EhJumpResourceSelector'
-import type { ResourceJumpLoaderReturn } from '../types'
-import { Separator } from '~/components/ui/separator'
-import { EnvironmentProvider } from '~/modules/environment/EnvironmentContext'
-import { EhEnvSelector } from '~/modules/environment/ui/EhEnvSelector'
-import { ResourceJumpProvider } from '~/modules/resourceJump/ResourceJumpContext'
-import { JumpMainButton } from '~/modules/resourceJump/ui/JumpMainButton'
-import { EnvQuickJumpBar } from '~/ui/components/quickBar/EnvQuickJumpBar'
-import { MainLayout } from '~/ui/layout/MainLayout'
-import { TopLevelProviders } from '~/ui/layout/TopLevelProviders'
-
-export interface ResourceJumpLayoutProps {
-  loaderData: ResourceJumpLoaderReturn
-}
-
-export function ResourceJumpLayout({
-  loaderData: loaderData,
-}: ResourceJumpLayoutProps) {
-  return (
-    <TopLevelProviders>
-      <EnvironmentProvider initialEnvSlug={loaderData.envSlug}>
-        <ResourceJumpProvider resourceJumpLoader={loaderData}>
-          <MainLayout>
-            <div className="flex gap-4 flex-row">
-              <EhEnvSelector className="flex flex-col items-start gap-2 w-4/12" />
-              <div>
-                <Separator
-                  orientation="vertical"
-                  className="bg-secondary-foreground/10"
-                />
-              </div>
-              <EhJumpResourceSelector className="flex flex-col items-start gap-2 w-8/12" />
-            </div>
-
-            <div>
-              <div className="flex flex-col items-start gap-2 w-4/12">
-                <EnvQuickJumpBar className="w-full" />
-              </div>
-              <div>
-                <Separator
-                  orientation="vertical"
-                  className="bg-secondary-foreground/10"
-                />
-              </div>
-            </div>
-            <div>
-              <JumpMainButton className="px-8 py-4 w-full max-w-[1000px] justify-self-center mt-4" />
-            </div>
-            {/* <QuickJumpBar /> */}
-
-            {/* <AppSelectorDemo /> */}
-
-            {/* AppDropdownContent for testing - make it larger
-            <div className="border border-border rounded-lg p-6 bg-card">
-              <h2 className="text-lg font-semibold mb-4">AppDropdownContent Preview</h2>
-              <div className="w-full max-w-2xl">
-                <AppDropdownContent
-                  searchValue=""
-                  onSelect={(value) => console.log("Selected:", value)}
-                  getItemProps={(options) => options}
-                  highlightedIndex={-1}
-                  isUntouched={true}
-                />
-              </div>
-            </div> */}
-
-            {/* <WidgetGrid widgets={widgets} onAddWidget={handleAddWidget} /> */}
-          </MainLayout>
-        </ResourceJumpProvider>
-      </EnvironmentProvider>
-    </TopLevelProviders>
-  )
-}

package/src/plugins/builtin/pageUrl/PageUrlPluginContext.tsx

@@ -1,55 +0,0 @@
-import { createContext, use, useEffect, useMemo } from 'react'
-import type { ReactNode } from 'react'
-import type { ResouceJumpItemParent } from '~/modules/resourceJump/types'
-import { useBootstrapConfig } from '~/modules/config/BootstrapConfigContext'
-import { usePluginManagerForPlugin } from '~/modules/pluginCore/PluginManagerContext'
-
-export interface PageUrlPluginContextIface {}
-
-const PageUrlPluginContext = createContext<
-  PageUrlPluginContextIface | undefined
->(undefined)
-
-interface PageUrlPluginProviderProps {
-  children: ReactNode
-}
-
-export function PageUrlPluginContextProvider({
-  children,
-}: PageUrlPluginProviderProps) {
-  const { setResouceJumps } = usePluginManagerForPlugin('pageUrl')
-  const { apps } = useBootstrapConfig()
-
-  useEffect(() => {
-    const jumpLinks = Object.values(apps).flatMap((app) => {
-      const parent: ResouceJumpItemParent = {
-        type: 'pageUrlParent',
-        displayName: app.displayName,
-        hasSingleChild: app.ui?.pages.length === 1,
-      }
-      return (
-        app.ui?.pages.map((page) => {
-          return {
-            type: 'pageUrl',
-            displayName: page.displayName || page.slug,
-            parent: parent,
-            slug: `${app.slug}-${page.slug}`,
-          }
-        }) || []
-      )
-    })
-    setResouceJumps(jumpLinks)
-  }, [apps, setResouceJumps])
-
-  const value: PageUrlPluginContextIface = useMemo(() => ({}), [])
-
-  return <PageUrlPluginContext value={value}>{children}</PageUrlPluginContext>
-}
-
-export function usePageUrlPlugin(): PageUrlPluginContextIface {
-  const context = use(PageUrlPluginContext)
-  if (context === undefined) {
-    throw new Error('useEhUserContext must be used within an EhUserProvider')
-  }
-  return context
-}

package/src/plugins/builtin/pageUrl/pageUrlJumpPlugin.ts

@@ -1,36 +0,0 @@
-import type {
-  PluginPageUrlAutoCompletableParent,
-  PluginPageUrlAutocompleteItem,
-} from './pageUrlTypes'
-import type {
-  EhPluginResouceJumpFactoryCtx,
-  EhPluginResourceJumpable,
-} from '~/modules/pluginCore/types'
-
-export class PageUrlJumpPlugin implements EhPluginResourceJumpable {
-  public readonly name = 'pageUrl'
-
-  factoryPageJumpAutocompleteItems({
-    bootstrapConfig,
-  }: EhPluginResouceJumpFactoryCtx): Array<PluginPageUrlAutocompleteItem> {
-    return Object.values(bootstrapConfig.apps).flatMap((app) => {
-      const parent: PluginPageUrlAutoCompletableParent = {
-        type: 'pageUrlParent',
-        displayName: app.displayName,
-        hasSingleChild: app.ui?.pages.length === 1,
-      }
-      return (
-        app.ui?.pages.map((page) => {
-          return {
-            type: 'pageUrl',
-            displayName: page.displayName || page.slug,
-            parent: parent,
-            slug: `${app.slug}-${page.slug}`,
-          }
-        }) || []
-      )
-    })
-  }
-}
-
-export function formatPageTitleForMainJumpButton() {}

package/src/routes/_layout/app/$appSlug/sub/$subValue.tsx

@@ -1,15 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { routeLoader } from '~/modules/resourceJump/routeLoader'
-import { ResourceJumpLayout } from '~/modules/resourceJump/ui/ResouceJumpLayout'
-
-export const Route = createFileRoute('/_layout/app/$appSlug/sub/$subValue')({
-  component: RouteComponent,
-  loader(ctx) {
-    return routeLoader(ctx)
-  },
-})
-
-function RouteComponent() {
-  const urlParams = Route.useLoaderData()
-  return <ResourceJumpLayout loaderData={urlParams} />
-}

package/src/routes/_layout/app/$appSlug.tsx

@@ -1,15 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { routeLoader } from '~/modules/resourceJump/routeLoader'
-import { ResourceJumpLayout } from '~/modules/resourceJump/ui/ResouceJumpLayout'
-
-export const Route = createFileRoute('/_layout/app/$appSlug')({
-  component: RouteComponent,
-  loader(ctx) {
-    return routeLoader(ctx)
-  },
-})
-
-function RouteComponent() {
-  const urlParams = Route.useLoaderData()
-  return <ResourceJumpLayout loaderData={urlParams} />
-}

package/src/routes/_layout/env/$envSlug/app/$appSlug/sub/$subValue.tsx

@@ -1,17 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { routeLoader } from '~/modules/resourceJump/routeLoader'
-import { ResourceJumpLayout } from '~/modules/resourceJump/ui/ResouceJumpLayout'
-
-export const Route = createFileRoute(
-  '/_layout/env/$envSlug/app/$appSlug/sub/$subValue',
-)({
-  component: RouteComponent,
-  loader(ctx) {
-    return routeLoader(ctx)
-  },
-})
-
-function RouteComponent() {
-  const urlParams = Route.useLoaderData()
-  return <ResourceJumpLayout loaderData={urlParams} />
-}

package/src/routes/_layout/env/$envSlug/app/$appSlug.tsx

@@ -1,15 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { routeLoader } from '~/modules/resourceJump/routeLoader'
-import { ResourceJumpLayout } from '~/modules/resourceJump/ui/ResouceJumpLayout'
-
-export const Route = createFileRoute('/_layout/env/$envSlug/app/$appSlug')({
-  component: RouteComponent,
-  loader(ctx) {
-    return routeLoader(ctx)
-  },
-})
-
-function RouteComponent() {
-  const urlParams = Route.useLoaderData()
-  return <ResourceJumpLayout loaderData={urlParams} />
-}

package/src/routes/_layout/env/$envSlug/sub/$subValue.tsx

@@ -1,15 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { routeLoader } from '~/modules/resourceJump/routeLoader'
-import { ResourceJumpLayout } from '~/modules/resourceJump/ui/ResouceJumpLayout'
-
-export const Route = createFileRoute('/_layout/env/$envSlug/sub/$subValue')({
-  component: RouteComponent,
-  loader(ctx) {
-    return routeLoader(ctx)
-  },
-})
-
-function RouteComponent() {
-  const urlParams = Route.useLoaderData()
-  return <ResourceJumpLayout loaderData={urlParams} />
-}

package/src/routes/_layout/env/$envSlug.tsx

@@ -1,15 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { routeLoader } from '~/modules/resourceJump/routeLoader'
-import { ResourceJumpLayout } from '~/modules/resourceJump/ui/ResouceJumpLayout'
-
-export const Route = createFileRoute('/_layout/env/$envSlug')({
-  component: RouteComponent,
-  loader(ctx) {
-    return routeLoader(ctx)
-  },
-})
-
-function RouteComponent() {
-  const urlParams = Route.useLoaderData()
-  return <ResourceJumpLayout loaderData={urlParams} />
-}

package/src/ui/components/controlPanel/BaseDropdownSelector.tsx

@@ -1,163 +0,0 @@
-import React, { useState } from 'react'
-import { useCombobox } from 'downshift'
-import type { ReactNode } from 'react'
-import type { BaseDropdownContentProps } from '~/types/ehTypes'
-import { Button } from '~/components/ui/button'
-import { Input } from '~/components/ui/input'
-
-interface BaseDropdownSelectorProps {
-  value?: string
-  placeholder: string
-  onSelect: (value: string) => void
-  children: (props: BaseDropdownContentProps) => ReactNode
-  className?: string
-}
-
-interface DropdownInputProps {
-  value?: string
-  placeholder: string
-  onSelect: (value: string) => void
-  onClose: () => void
-  children: (props: BaseDropdownContentProps) => ReactNode
-  className?: string
-}
-
-function DropdownInput({
-  value,
-  placeholder,
-  onSelect,
-  onClose,
-  children,
-  className = '',
-}: DropdownInputProps) {
-  const [isUntouched, setIsUntouched] = useState(true)
-  const [inputValue, setInputValue] = useState(value || '')
-
-  const {
-    isOpen,
-    getMenuProps,
-    getInputProps,
-    getItemProps,
-    highlightedIndex,
-    // closeMenu,
-  } = useCombobox({
-    inputValue,
-    isOpen: true, // Always open when this component is rendered
-    onInputValueChange: ({ inputValue: newInputValue }) => {
-      console.log('✏️ Input value changed:', newInputValue)
-      setInputValue(newInputValue || '')
-      setIsUntouched(false)
-    },
-    // onSelectedItemChange: ({ selectedItem: changedSelectedItem }) => {
-    //   if (changedSelectedItem !== null) {
-    //     console.log('✅ Item selected:', changedSelectedItem)
-    //     onSelect(changedSelectedItem)
-    //     closeMenu()
-    //     onClose()
-    //   }
-    // },
-    onIsOpenChange: ({ isOpen: newIsOpen }) => {
-      console.log('📋 Combobox open change:', newIsOpen)
-      if (newIsOpen === false) {
-        console.log('📋 Combobox closed, closing dropdown')
-        onClose()
-      }
-    },
-    items: [], // We'll handle items in the children component
-  })
-
-  // Handle input blur
-  const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    console.log('🔄 Input blur', {
-      relatedTarget: e.relatedTarget,
-      currentTarget: e.currentTarget,
-      target: e.target,
-    })
-    // Let Downshift handle the blur behavior
-  }
-
-  // Handle input focus
-  const handleInputFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-    console.log('🎯 Input focused', e.target)
-  }
-
-  return (
-    <div className="relative">
-      <Input
-        {...getInputProps({
-          onBlur: handleInputBlur,
-          onFocus: handleInputFocus,
-          placeholder,
-          className: `min-w-[200px] ${className}`,
-          autoFocus: true,
-        })}
-      />
-      {isOpen && (
-        <div
-          {...getMenuProps()}
-          className="absolute top-full left-0 mt-1 min-w-[300px] bg-popover border border-border rounded-md shadow-md z-50"
-        >
-          {children({
-            searchValue: inputValue,
-            onSelect: (selectedValue: string) => {
-              console.log('✅ Child component selected:', selectedValue)
-              onSelect(selectedValue)
-              onClose()
-            },
-            getMenuProps,
-            getItemProps,
-            highlightedIndex,
-            isOpen,
-            isUntouched,
-          })}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export function BaseDropdownSelector({
-  value,
-  placeholder,
-  onSelect,
-  children,
-  className = '',
-}: BaseDropdownSelectorProps) {
-  const [isInputMode, setIsInputMode] = useState(false)
-
-  // Handle button click - switch to input mode
-  const handleButtonClick = () => {
-    console.log('🔘 Button clicked')
-    setIsInputMode(true)
-  }
-
-  const handleClose = () => {
-    setIsInputMode(false)
-  }
-
-  if (isInputMode) {
-    return (
-      <DropdownInput
-        value={value}
-        placeholder={placeholder}
-        onSelect={onSelect}
-        onClose={handleClose}
-        className={className}
-      >
-        {children}
-      </DropdownInput>
-    )
-  }
-
-  return (
-    <Button
-      variant="ghost"
-      size="default"
-      className={`px-4 font-normal ${className} min-w-[15ch]`}
-      onClick={handleButtonClick}
-      type="button"
-    >
-      {value || placeholder}
-    </Button>
-  )
-}

package/src/ui/components/controlPanel/env/EnvDropdownContent.tsx

@@ -1,114 +0,0 @@
-import { Server } from 'lucide-react'
-import type { BaseDropdownContentProps, EhEnvIndexed } from '~/types/ehTypes'
-import { Badge } from '~/components/ui/badge'
-import { useBootstrapConfig } from '~/modules/config/BootstrapConfigContext'
-
-interface EnvDropdownContentProps extends BaseDropdownContentProps {}
-
-export function EnvDropdownContent({
-  searchValue = '',
-  onSelect,
-  getItemProps,
-  highlightedIndex = -1,
-  isUntouched,
-}: EnvDropdownContentProps) {
-  const indexData = useBootstrapConfig()
-  const listEnvs = Object.values(indexData.envs)
-
-  // Filter environments based on search value
-  const filteredEnvs = listEnvs.filter((env) => {
-    if (isUntouched) {
-      return true
-    }
-    return (
-      env.displayName.toLowerCase().includes(searchValue.toLowerCase()) ||
-      env.slug.toLowerCase().includes(searchValue.toLowerCase())
-    )
-  })
-
-  // Get environment type for styling
-  const getEnvType = (slug: string) => {
-    if (slug.includes('prod')) return 'production'
-    if (slug.includes('preprod') || slug.includes('staging')) return 'staging'
-    if (slug.includes('dev') || slug.includes('int')) return 'development'
-    return 'other'
-  }
-
-  // Get badge variant based on environment type
-  const getBadgeVariant = (type: string) => {
-    switch (type) {
-      case 'production':
-        return 'destructive'
-      case 'staging':
-        return 'secondary'
-      case 'development':
-        return 'default'
-      default:
-        return 'outline'
-    }
-  }
-
-  // Get environment color
-  const getEnvColor = (slug: string) => {
-    if (slug.startsWith('cross')) return 'text-blue-600'
-    if (slug.startsWith('preprod')) return 'text-orange-600'
-    if (slug.startsWith('g64')) return 'text-violet-600'
-    return 'text-gray-600'
-  }
-
-  const handleEnvSelect = (env: EhEnvIndexed) => {
-    if (onSelect) {
-      onSelect(env.slug)
-    }
-  }
-
-  if (filteredEnvs.length === 0) {
-    return (
-      <div className="p-4 text-center text-muted-foreground">
-        No environments found for "{searchValue}"
-      </div>
-    )
-  }
-
-  return (
-    <div className="max-h-[300px] overflow-y-auto">
-      {filteredEnvs.map((env, index) => {
-        const envType = getEnvType(env.slug)
-        const isHighlighted = highlightedIndex === index
-
-        return (
-          <div
-            key={env.slug}
-            {...(getItemProps
-              ? getItemProps({
-                  item: env.slug,
-                  index,
-                  onClick: () => handleEnvSelect(env),
-                })
-              : {})}
-            className={`flex items-center justify-between p-3 cursor-pointer transition-colors ${
-              isHighlighted
-                ? 'bg-accent text-accent-foreground'
-                : 'hover:bg-accent hover:text-accent-foreground'
-            }`}
-          >
-            <div className="flex items-center gap-3">
-              <Server className="h-4 w-4 text-muted-foreground" />
-              <div className="flex flex-col">
-                <span className={`font-medium ${getEnvColor(env.slug)}`}>
-                  {env.displayName}
-                </span>
-                <span className="text-xs text-muted-foreground">
-                  {env.slug}
-                </span>
-              </div>
-            </div>
-            <Badge variant={getBadgeVariant(envType)} className="text-xs">
-              {envType}
-            </Badge>
-          </div>
-        )
-      })}
-    </div>
-  )
-}

package/src/ui/components/controlPanel/env/EnvDropdownSelector.tsx

@@ -1,21 +0,0 @@
-import { BaseDropdownSelector } from '../BaseDropdownSelector'
-import { EnvDropdownContent } from './EnvDropdownContent'
-import { useEnvironmentContext } from '~/modules/environment/EnvironmentContext'
-
-export function EnvDropdownSelector() {
-  const { currentEnv, setCurrentEnv } = useEnvironmentContext()
-
-  const handleSelect = (envSlug: string) => {
-    setCurrentEnv(envSlug)
-  }
-
-  return (
-    <BaseDropdownSelector
-      value={currentEnv?.displayName}
-      placeholder="Select Env"
-      onSelect={handleSelect}
-    >
-      {(props) => <EnvDropdownContent {...props} />}
-    </BaseDropdownSelector>
-  )
-}

package/src/ui/components/header/PlaygroundHeader.tsx

@@ -1,26 +0,0 @@
-import { Button } from '~/components/ui/button'
-import { ThemeSwitcher } from '~/components/ThemeSwitcher'
-import EnvHopperLogo from '~/assets/env-hopper-logo.svg?react'
-
-export function PlaygroundHeader() {
-  return (
-    <div className="flex items-center justify-between mb-4">
-      {/* Left side: Logo + Mode */}
-      <div className="flex items-center gap-4">
-        <div className="flex items-center gap-2">
-          <EnvHopperLogo className="h-16 w-16" />
-          <h1 className="text-lg font-bold">Env‑Hopper</h1>
-        </div>
-        <span className="text-xs text-muted-foreground">Jump</span>
-      </div>
-
-      {/* Right side: Theme switcher + Login */}
-      <div className="flex items-center gap-3">
-        <ThemeSwitcher />
-        <Button size="sm" variant={'outline'}>
-          Login
-        </Button>
-      </div>
-    </div>
-  )
-}