@env-hopper/frontend-core 2.0.1-alpha

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

@@ -0,0 +1,259 @@
+import { Popover, PopoverContent } from '@radix-ui/react-popover'
+import { useCombobox } from 'downshift'
+import { CornerDownRight, Edit3Icon, ExpandIcon, XIcon } from 'lucide-react'
+import { unique } from 'radashi'
+import React, { useEffect, useMemo } from 'react'
+import { EhBaseSelectorRoot } from '../../../ui/components/commandInput/EhBaseSelector'
+import { mapDisplayedItems } from '../helpers'
+import { useResourceJumpContext } from '../ResourceJumpContext'
+import type {
+  BaseAutoCompletableItem,
+  BaseAutoCompleteItemRender,
+} from '~/modules/pluginCore/types'
+import type {
+  AppAutoCompleteAmend,
+  AutoCompleteContext,
+} from '../../../ui/components/commandInput/types'
+import { Button } from '~/components/ui/button'
+import { PopoverTrigger } from '~/components/ui/popover'
+import { cn } from '~/lib/utils'
+import {
+  autocompleteFilter,
+  autocompleteToString,
+  isAutocompleteItem,
+} from '~/plugins/builtin/pageUrl/pageUrlAutoCompletePlugin'
+import { highlightMatches } from '~/util/highlightMatches'
+
+interface EhJumpResourceSelectorProps {
+  className?: string
+}
+
+export function EhJumpResourceSelector({
+  className = '',
+}: EhJumpResourceSelectorProps) {
+  const { jumpResources, currentResourceJump, setCurrentResourceJumpSlug } =
+    useResourceJumpContext()
+
+  const appFilter = (
+    needle: string,
+    allItems: Array<BaseAutoCompletableItem>,
+  ) => {
+    return autocompleteFilter(
+      allItems.filter((i) => isAutocompleteItem(i)),
+      needle,
+    )
+  }
+
+  const [displayedItems, setDisplayedItems] =
+    React.useState<Array<BaseAutoCompletableItem>>(jumpResources)
+
+  const {
+    isOpen: comboIsOpen,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getToggleButtonProps,
+    highlightedIndex,
+    getItemProps,
+    selectItem,
+    selectedItem: comboSelectedItem,
+    inputValue: comboInputValue,
+    setInputValue,
+  } = useCombobox<BaseAutoCompletableItem>({
+    onInputValueChange({
+      inputValue: changedInputValue,
+      isOpen: changedIsOpen,
+    }) {
+      if (changedIsOpen) {
+        const matchedIds = unique(appFilter(changedInputValue, jumpResources))
+        setDisplayedItems(matchedIds)
+      }
+    },
+    onSelectedItemChange({ selectedItem: changedSelectedItem }) {
+      setCurrentResourceJumpSlug(changedSelectedItem?.slug)
+    },
+    // selectedItem,
+    items: displayedItems,
+    itemToString(item) {
+      if (isAutocompleteItem(item)) {
+        return autocompleteToString(item)
+      }
+      return 'n/a'
+    },
+  })
+
+  useEffect(() => {
+    if (currentResourceJump) {
+      const f = jumpResources.find((e) => e.slug === currentResourceJump.slug)
+      if (f) {
+        selectItem(f)
+      }
+    }
+  }, [currentResourceJump, jumpResources, selectItem])
+
+  const ctx = useMemo<AutoCompleteContext>(() => {
+    return {
+      searchString: comboInputValue,
+    }
+  }, [comboInputValue])
+
+  return (
+    <EhBaseSelectorRoot className={className}>
+      <Popover open={comboIsOpen}>
+        <PopoverTrigger asChild>
+          <div className="relative group hover:cursor-pointer w-full">
+            <input
+              className={cn(
+                'text-xl h-14 w-full rounded-md border border-input bg-background px-4 py-4 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ',
+                'group-hover:border-secondary-foreground/60 group-hover:bg-secondary/30 focus:bg-secondary/30 focus:border-secondary-foreground/60',
+                'pr-12 hover:cursor-pointer',
+              )}
+              {...getInputProps({
+                onMouseUp: (e) => {
+                  const userHasSelectedSomeText =
+                    e.currentTarget.selectionStart !==
+                    e.currentTarget.selectionEnd
+                  if (!userHasSelectedSomeText) {
+                    // setInputValue('asdads')
+                    e.currentTarget.select()
+                  }
+                },
+                onKeyUp: (e) => {
+                  if (e.key !== 'Enter') {
+                    // console.log(e.target.value)
+                    // setLastUsersInputText(e.target.value)
+                  }
+                },
+              })}
+            />
+            {comboInputValue.length ? (
+              <XIcon
+                className="absolute right-5 top-1/2 -translate-y-1/2  stroke-secondary-foreground/50 group-hover:stroke-secondary-foreground/60 group-hover:rotate-3 group-hover:scale-95 hover:stroke-secondary-foreground hover:bg-secondary rounded-full"
+                onClick={() => setInputValue('')}
+              />
+            ) : (
+              <Edit3Icon
+                {...getToggleButtonProps()}
+                className="absolute right-5 top-1/2 -translate-y-1/2  stroke-secondary-foreground/50 group-hover:stroke-secondary-foreground/60 group-hover:rotate-3 group-hover:scale-95"
+              />
+            )}
+
+            <label
+              className={cn(
+                'absolute text-sm text-secondary-foreground/50',
+                'left-2 -top-0.5 -translate-y-1/2 text-muted-foreground bg-background rounded-2xl px-1',
+              )}
+              {...getLabelProps()}
+            >
+              Application
+            </label>
+          </div>
+        </PopoverTrigger>
+
+        <PopoverContent
+          className={cn(
+            'w-[var(--radix-popover-trigger-width)] max-h-[var(--radix-popover-content-available-height)] bg-popover text-popover-foreground z-50 origin-(--radix-popover-content-transform-origin) rounded-b-md border shadow-md outline-hidden',
+            { hidden: !comboIsOpen },
+          )}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          forceMount
+        >
+          <div {...getMenuProps()} className="">
+            {[...mapDisplayedItems(displayedItems)].map(
+              ({ item, itemRenderData, isChild }, index) => {
+                return (
+                  <DisplayItem
+                    key={item.slug}
+                    ctx={ctx}
+                    item={item}
+                    itemRenderData={itemRenderData}
+                    isChild={isChild}
+                    selected={comboSelectedItem?.slug === item.slug}
+                    highlighted={highlightedIndex === index}
+                    getItemProps={getItemProps}
+                  />
+                )
+              },
+            )}
+            {displayedItems.length === 0 && (
+              <div className="text-secondary-foreground/50">
+                '{comboInputValue}' not found. Try a different search.
+              </div>
+            )}
+          </div>
+          <div className="flex justify-end items-center p-1 bg-secondary/30 border-t">
+            <Button className="h-1" variant="outline" size={'sm'}>
+              All Apps (34) <ExpandIcon />
+            </Button>
+          </div>
+        </PopoverContent>
+        {/* </PopoverAnchor> */}
+      </Popover>
+    </EhBaseSelectorRoot>
+  )
+}
+
+export interface DisplayItemProps
+  extends React.ComponentPropsWithoutRef<'div'>,
+    AppAutoCompleteAmend {
+  item: BaseAutoCompletableItem
+  itemRenderData: BaseAutoCompleteItemRender
+  isChild?: boolean
+  selected: boolean
+  highlighted: boolean
+  getItemProps: (props: { item: BaseAutoCompletableItem }) => any
+  ctx: AutoCompleteContext
+}
+
+export function DisplayItem({
+  item,
+  itemRenderData,
+  selected,
+  isChild,
+  highlighted,
+  ctx,
+  getItemProps,
+  ...props
+}: DisplayItemProps) {
+  const { displayName, parentDisplayName, isDefaultGroupItem } = itemRenderData
+
+  const content = () => {
+    let finalStr = [parentDisplayName, isChild ? '-' : false, displayName]
+      .filter(Boolean)
+      .join(' / ')
+    if (isDefaultGroupItem && parentDisplayName) {
+      finalStr = parentDisplayName
+    }
+    if (isChild) {
+      return (
+        <div className="flex flex-row gap-1 items-center">
+          <div className="text-secondary-foreground/50 pl-2">
+            <CornerDownRight size={14} />
+          </div>
+          <div className="">
+            {highlightMatches(displayName, ctx.searchString)}
+          </div>
+        </div>
+      )
+    }
+
+    return highlightMatches(finalStr, ctx.searchString)
+  }
+
+  return (
+    <div
+      className={cn(
+        'cursor-pointer text-secondary-foreground px-4 py-2 rounded-md',
+        {
+          'bg-accent': highlighted,
+        },
+      )}
+      {...getItemProps({
+        item,
+      })}
+      {...props}
+    >
+      {content()}
+    </div>
+  )
+}

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

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react'
+import type { ResourceJumpItem } from '../types'
+import type { EhPluginResouceJumpCtx } from '~/modules/pluginCore/types'
+import { getJumpUrl } from '~/plugins/builtin/pageUrl/pageUrlAutoCompletePlugin'
+
+export interface JumpUrlParams extends React.ComponentPropsWithoutRef<'a'> {
+  children: ReactNode
+  ctx: EhPluginResouceJumpCtx
+  jumpResource: ResourceJumpItem
+  id?: string
+  // substitution?: EhSubstitutionValue;
+  className?: string
+  isMain?: boolean
+  prefetch?: boolean
+  testId?: string
+}
+
+export function JumpALink({
+  children,
+  ctx,
+  id,
+  jumpResource,
+  // substitution,
+  className,
+  isMain,
+  testId,
+}: JumpUrlParams) {
+  const onClick = () => {
+    // if (jumpResource == null) {
+    //   return
+    // }
+    // ...existing code...
+  }
+
+  const jumpUrl = getJumpUrl(jumpResource, ctx)
+  if (!jumpUrl) {
+    return undefined
+  }
+  return (
+    <a
+      id={id}
+      data-testid={testId}
+      href={jumpUrl}
+      onClick={onClick}
+      onAuxClick={onClick}
+      className={className}
+      target="_blank"
+      rel="noreferrer"
+      title={isMain ? 'Jump to selected app' : undefined}
+    >
+      {children}
+    </a>
+  )
+}

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

@@ -0,0 +1,97 @@
+import cn from 'classnames'
+import { useResourceJumpContext } from '../ResourceJumpContext'
+import { JumpALink } from './JumpALink'
+import { useEnvironmentContext } from '~/modules/environment/EnvironmentContext'
+import {
+  formatJumpButtonTitle,
+  isAutocompleteItem,
+} from '~/plugins/builtin/pageUrl/pageUrlAutoCompletePlugin'
+
+export const JUMP_MAIN_BTN_ID = 'jump-main-button'
+
+export interface JumpMainButtonProps {
+  className?: string
+}
+
+export function JumpMainButton({ className }: JumpMainButtonProps) {
+  const { currentResourceJump, getJumpUrl } = useResourceJumpContext()
+
+  const { currentEnv } = useEnvironmentContext()
+
+  const url =
+    currentResourceJump && currentEnv
+      ? getJumpUrl(currentResourceJump.slug, currentEnv.slug)
+      : undefined
+
+  let buttonTitle = 'n/a'
+  if (isAutocompleteItem(currentResourceJump)) {
+    // If the current resource jump is an autocomplete item, format the button title
+    buttonTitle = formatJumpButtonTitle(currentResourceJump)
+  }
+
+  // .btn:active:hover,
+  //   .btn:active:focus {
+  //   animation: button-pop 0s ease-out;
+  //   transform: scale(var(--btn-focus-scale, 0.97));
+  // }
+
+  // @media (prefers-reduced-motion: no-preference) {
+
+  //   .btn {
+  //     animation: button-pop var(--animation-btn, 0.25s) ease-out;
+  //   }
+  // }
+
+  return (
+    <div className={cn('relative flex justify-center', className)}>
+      {currentResourceJump !== undefined && url !== undefined ? (
+        <JumpALink
+          id={JUMP_MAIN_BTN_ID}
+          testId={'jump-main-button'}
+          ctx={{
+            env: currentEnv,
+          }}
+          jumpResource={currentResourceJump}
+          isMain={true}
+          className={cn(
+            'border border-secondary-foreground/50 primary text-center rounded-md px-8 py-4 h-auto shadow-xl group indicator relative hover:bg-base-content/10 hover:text-base-content w-full hover:bg-accent hover:text-accent-foreground ease-out  ',
+            'active:hover:scale-(--btn-focus-scale) active:focus:scale-(--btn-focus-scale) motion-safe:duration-200',
+          )}
+        >
+          <div className="absolute top-0 bottom-0 right-0 flex items-center text-xl text-hopper invisible lg:visible font-semibold select-none">
+            <div
+              className={cn(
+                'mr-12 group-hover:motion-safe:-translate-x-0.5 group-hover:motion-safe:translate-y-0.5 group-hover:motion-safe:scale-y-90 group-hover:motion-safe:rotate-2 origin-bottom transition-transform motion-safe:duration-100',
+              )}
+            >
+              JUMP
+            </div>
+          </div>
+          <div
+            className={'flex flex-col gap-6'}
+            data-testid={'jump-main-button-text'}
+          >
+            <div>
+              <code>{buttonTitle}</code>
+            </div>
+            <div>
+              <code>{currentEnv?.slug}</code>
+            </div>
+            <div
+              className={
+                'group-hover:underline text-xs text-wrap font-semibold'
+              }
+            >
+              {url}
+            </div>
+          </div>
+        </JumpALink>
+      ) : (
+        <div className="border border-dashed border-black dark:border-white rounded flex justify-center p-4 flex-col cursor-not-allowed w-full">
+          not ready
+          {/* <MainJumpButtonNotReady isHovered={isHovered} /> */}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,55 @@
+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/pageUrlAutoCompletePlugin.ts

@@ -0,0 +1,66 @@
+import type {
+  BaseAutoCompleteItemRender,
+  EhPluginResouceJumpCtx,
+} from '~/modules/pluginCore/types'
+import type { ResourceJumpItem } from '~/modules/resourceJump/types'
+import type { PluginPageUrlAutocompleteItem } from './pageUrlTypes'
+
+export function isAutocompleteItem(
+  item: { type?: string } | null | undefined,
+): item is PluginPageUrlAutocompleteItem {
+  return item?.type === 'pageUrl'
+}
+
+export function getRenderData(
+  item: PluginPageUrlAutocompleteItem,
+): BaseAutoCompleteItemRender {
+  return {
+    displayName: item.displayName,
+    parentDisplayName: item.parent?.displayName,
+    isDefaultGroupItem: item.slug.endsWith('-home'),
+  }
+}
+
+export function autocompleteFilter(
+  items: Array<PluginPageUrlAutocompleteItem>,
+  needle: string,
+): Array<PluginPageUrlAutocompleteItem> {
+  return items.filter((item) => {
+    return (
+      item.displayName.toLowerCase().includes(needle.toLowerCase()) ||
+      (item.parent &&
+        item.parent.displayName.toLowerCase().includes(needle.toLowerCase()))
+    )
+  })
+}
+
+export function autocompleteToString(
+  item: PluginPageUrlAutocompleteItem,
+): string {
+  return formatJumpButtonTitle(item)
+  // return item.displayName;
+}
+
+export function formatJumpButtonTitle(
+  item: PluginPageUrlAutocompleteItem,
+): string {
+  if (item.parent && item.parent.displayName) {
+    if (item.parent.hasSingleChild) {
+      return item.parent.displayName
+    }
+    return `${item.parent.displayName} :: ${item.displayName}`
+  }
+  return item.displayName
+}
+
+export function getJumpUrl(
+  jumpResource: ResourceJumpItem | undefined,
+  ctx: EhPluginResouceJumpCtx,
+): string {
+  console.log('jump Url', jumpResource, ctx)
+
+  if (!jumpResource) {
+    return ''
+  }
+  return `https://${jumpResource.slug}.ru`
+}

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

@@ -0,0 +1,36 @@
+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/plugins/builtin/pageUrl/pageUrlTypes.ts

@@ -0,0 +1,17 @@
+import type {
+  BaseAppAutoCompletableParent,
+  BaseAutoCompletableItem,
+} from '~/modules/pluginCore/types'
+
+export interface PluginPageUrlAutoCompletableParent
+  extends BaseAppAutoCompletableParent {
+  type: 'pageUrlParent'
+  displayName: string
+  aliases?: Array<string>
+}
+
+export interface PluginPageUrlAutocompleteItem extends BaseAutoCompletableItem {
+  type: 'pageUrl'
+  displayName: string
+  parent?: PluginPageUrlAutoCompletableParent
+}