@likec4/diagram 1.21.1 → 1.22.1

package/src/likec4diagram/ui/search/LikeC4Search.tsx

@@ -0,0 +1,312 @@
+import {
+  ActionIcon,
+  Box,
+  Grid,
+  GridCol,
+  Group,
+  Portal,
+  RemoveScroll,
+  ScrollArea,
+  ScrollAreaAutosize,
+  Stack,
+  Title,
+} from '@mantine/core'
+import {
+  useCallbackRef,
+  useDisclosure,
+  useFocusReturn,
+  useFocusTrap,
+  useFocusWithin,
+  useHotkeys,
+  useMergedRef,
+  useWindowEvent,
+} from '@mantine/hooks'
+import { IconX } from '@tabler/icons-react'
+import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
+import { useRef } from 'react'
+import { SearchControl } from '../../../components/SearchControl'
+import { useMantinePortalProps } from '../../../hooks'
+import { ElementsColumn } from './ElementsColumn'
+import * as css from './LikeC4Search.css'
+import { LikeC4SearchInput } from './SearchInput'
+import {
+  LikeC4SearchContext,
+  setPickView,
+  useCloseSearch,
+  usePickView,
+  wasResetPickView,
+} from './state'
+import { stopAndPrevent } from './utils'
+import { ViewButton, ViewsColumn } from './ViewsColum'
+
+export function LikeC4Search() {
+  const [searchOpened, searchOps] = useDisclosure(false)
+  useHotkeys([
+    ['mod+k', () => searchOps.toggle(), {
+      preventDefault: true,
+    }],
+    ['mod+f', () => searchOps.toggle(), {
+      preventDefault: true,
+    }],
+  ])
+
+  const afterCloseCbRef = useRef<(() => void)>(null)
+  const close = useCallbackRef((cb?: () => void) => {
+    afterCloseCbRef.current = cb ?? null
+    searchOps.close()
+  })
+  const onExitComplete = useCallbackRef(() => {
+    if (afterCloseCbRef.current) {
+      afterCloseCbRef.current()
+      afterCloseCbRef.current = null
+    }
+  })
+
+  const { portalProps } = useMantinePortalProps()
+
+  return (
+    <LikeC4SearchContext value={close}>
+      <SearchControl
+        onClick={e => {
+          e.stopPropagation()
+          searchOps.toggle()
+        }} />
+      <Portal {...portalProps}>
+        <RemoveScroll enabled={searchOpened}>
+          <AnimatePresence onExitComplete={onExitComplete}>
+            {searchOpened && (
+              <>
+                <m.div
+                  key={'backdrop'}
+                  className={css.backdrop}
+                  initial={{ opacity: 0.7 }}
+                  animate={{
+                    opacity: 1,
+                    transition: {
+                      duration: 0.1,
+                    },
+                  }}
+                  exit={{
+                    opacity: 0,
+                    transition: {
+                      duration: 0.075,
+                    },
+                  }}>
+                </m.div>
+                <LikeC4SearchOverlay key="overlay" />
+              </>
+            )}
+          </AnimatePresence>
+        </RemoveScroll>
+      </Portal>
+    </LikeC4SearchContext>
+  )
+}
+
+function LikeC4SearchOverlay() {
+  const close = useCloseSearch()
+  const focusTrapRef = useFocusTrap()
+  const { ref: forcusRef, focused } = useFocusWithin()
+
+  const ref = useMergedRef(forcusRef, focusTrapRef)
+
+  useWindowEvent(
+    'keydown',
+    (event) => {
+      if (event.key === 'Escape') {
+        stopAndPrevent(event)
+        if (!wasResetPickView()) {
+          close()
+        }
+        return
+      }
+    },
+  )
+
+  return (
+    <m.div
+      ref={ref}
+      className={css.root}
+      // initial={{
+      //   opacity: 0,
+      //   // scale: 0.9,
+      //   translateY: -20,
+      // }}
+      animate={{
+        opacity: 1,
+        scale: 1,
+        translateY: 0,
+      }}
+      exit={{
+        opacity: 0,
+        scale: 0.9,
+        transition: {
+          duration: 0.1,
+        },
+      }}
+    >
+      <Group wrap="nowrap">
+        <Box flex={1} px={'sm'}>
+          <LikeC4SearchInput />
+        </Box>
+        <Box flex={'0 0 auto'}>
+          <ActionIcon
+            size={'lg'}
+            variant="default"
+            onClick={(e) => {
+              e.stopPropagation()
+              close()
+            }}>
+            <IconX />
+          </ActionIcon>
+        </Box>
+      </Group>
+      <Grid>
+        <GridCol span={6}>
+          <Title component={'div'} order={6} c="dimmed" pl="sm">Elements</Title>
+        </GridCol>
+        <GridCol span={6}>
+          <Title component={'div'} order={6} c="dimmed" pl="sm">Views</Title>
+        </GridCol>
+      </Grid>
+      <Grid
+        style={{
+          containerName: 'likec4-search-elements',
+          containerType: 'size',
+          overflow: 'hidden',
+          flexGrow: 1,
+        }}>
+        <GridCol span={6}>
+          <ScrollArea
+            type="hover"
+            className={css.scrollArea}
+            pr="xs"
+            scrollbars="y">
+            <AnimatePresence>
+              <LayoutGroup id="likec4-search-elements">
+                <ElementsColumn />
+              </LayoutGroup>
+            </AnimatePresence>
+          </ScrollArea>
+        </GridCol>
+        <GridCol span={6}>
+          <ScrollArea
+            type="hover"
+            className={css.scrollArea}
+            pr="xs"
+            scrollbars="y">
+            <AnimatePresence>
+              <LayoutGroup id="likec4-search-views">
+                <ViewsColumn />
+              </LayoutGroup>
+            </AnimatePresence>
+          </ScrollArea>
+        </GridCol>
+      </Grid>
+      <Box></Box>
+      <PickView />
+    </m.div>
+  )
+}
+
+function PickView() {
+  const pickview = usePickView()
+  // const navigateTo = useCloseSearchAndNavigateTo()
+  const focusTrapRef = useFocusTrap(!!pickview)
+  useFocusReturn({
+    opened: !!pickview,
+  })
+
+  return (
+    <AnimatePresence>
+      <LayoutGroup id="likec4-search-pickview">
+        {pickview && (
+          <>
+            <m.div
+              key="backdrop"
+              className={css.pickviewBackdrop}
+              onClick={e => {
+                e.stopPropagation()
+                setPickView(null)
+              }}>
+            </m.div>
+            <m.div
+              key="pickview"
+              initial={{
+                opacity: 0,
+                scale: 0.95,
+                originY: 0,
+                translateX: '-50%',
+                translateY: -20,
+              }}
+              animate={{
+                opacity: 1,
+                scale: 1,
+                translateY: 0,
+              }}
+              exit={{
+                opacity: 0,
+                scale: 0.98,
+                translateY: -20,
+                transition: {
+                  duration: 0.1,
+                },
+              }}
+              className={css.pickview}
+              data-likec4-search-views
+              ref={focusTrapRef}>
+              <Group px="sm" py="md" justify="space-between">
+                <Title order={2} lh={1}>Select view</Title>
+                <ActionIcon
+                  size={'md'}
+                  variant="default"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setPickView(null)
+                  }}>
+                  <IconX />
+                </ActionIcon>
+              </Group>
+
+              <ScrollAreaAutosize mah={'calc(100vh - 8rem - 50px)'} type="never">
+                {pickview.scoped.length > 0 && (
+                  <Stack gap={'sm'} px={'sm'} className={css.pickviewGroup}>
+                    <Title order={6} c={'dimmed'}>scoped views of the element</Title>
+                    {pickview.scoped.map((view, i) => (
+                      <ViewButton
+                        key={view.id}
+                        view={view}
+                        search={''}
+                        loop
+                        mod={{
+                          autofocus: i === 0,
+                        }}
+                      />
+                    ))}
+                  </Stack>
+                )}
+
+                {pickview.others.length > 0 && (
+                  <Stack gap={'sm'} px={'sm'} className={css.pickviewGroup}>
+                    <Title order={6} c={'dimmed'}>views including this element</Title>
+                    {pickview.others.map((view, i) => (
+                      <ViewButton
+                        key={view.id}
+                        view={view}
+                        search={''}
+                        loop
+                        mod={{
+                          autofocus: i === 0 && pickview.scoped.length === 0,
+                        }}
+                      />
+                    ))}
+                  </Stack>
+                )}
+              </ScrollAreaAutosize>
+            </m.div>
+          </>
+        )}
+      </LayoutGroup>
+    </AnimatePresence>
+  )
+}

package/src/likec4diagram/ui/search/SearchInput.tsx

@@ -0,0 +1,235 @@
+import { compareNatural } from '@likec4/core'
+import {
+  Combobox,
+  ComboboxDropdown,
+  ComboboxEmpty,
+  ComboboxOption,
+  ComboboxOptions,
+  ComboboxTarget,
+  Input,
+  rem,
+  ScrollAreaAutosize,
+  Text,
+  useCombobox,
+} from '@mantine/core'
+import { useDebouncedValue, useFocusWithin, useIsFirstRender, useWindowEvent } from '@mantine/hooks'
+import { usePreviousDistinct } from '@react-hookz/web'
+import { IconSearch } from '@tabler/icons-react'
+import { type ReactNode } from 'react'
+import { isString, keys, only } from 'remeda'
+import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
+import * as css from './LikeC4Search.css'
+import { setSearch, useIsPickViewActive, useSearch } from './state'
+import { moveFocusToSearchInput, stopAndPrevent } from './utils'
+
+function startingWithKind(search: string) {
+  return search.match(/^(k|ki|kin|kind|kind:)$/) != null
+}
+
+const SEARCH_PREFIXES = ['#', 'kind:']
+
+export function LikeC4SearchInput() {
+  const isPickViewActive = useIsPickViewActive()
+  const likec4model = useLikeC4Model(true)
+  const combobox = useCombobox({
+    scrollBehavior: 'smooth',
+  })
+  const { ref, focused } = useFocusWithin<HTMLInputElement>()
+  const search = useSearch()
+  const previous = usePreviousDistinct(search)
+  const isFirstRender = useIsFirstRender()
+
+  const [isEmptyForSomeTime] = useDebouncedValue(search === '' && !isFirstRender, isString(previous) ? 400 : 1000)
+
+  useWindowEvent(
+    'keydown',
+    (event) => {
+      try {
+        if (
+          !focused && !isPickViewActive && (
+            event.key === 'Backspace' ||
+            event.key.startsWith('Arrow') ||
+            event.key.match(/^\p{L}$/u)
+          )
+        ) {
+          moveFocusToSearchInput()
+        }
+      } catch (e) {
+        console.warn(e)
+      }
+    },
+  )
+
+  let options = [] as ReactNode[]
+  let isExactMatch = false
+
+  switch (true) {
+    case search === '' && (isEmptyForSomeTime || SEARCH_PREFIXES.includes(previous ?? '')): {
+      options = SEARCH_PREFIXES.map((prefix) => (
+        <ComboboxOption value={prefix} key={prefix}>
+          <Text component="span" opacity={.5} mr={4} fz={'sm'}>Search by</Text>
+          {prefix}
+        </ComboboxOption>
+      ))
+      break
+    }
+    case search.startsWith('#'): {
+      const searchTag = search.toLocaleLowerCase().slice(1)
+      const alloptions = likec4model.allTags().filter((tag) => tag.toLocaleLowerCase().includes(searchTag)).sort(
+        compareNatural,
+      )
+      isExactMatch = only(alloptions)?.toLocaleLowerCase() === searchTag
+      if (alloptions.length === 0) {
+        options = [
+          <ComboboxEmpty key="empty-tags">
+            No tags found
+          </ComboboxEmpty>,
+        ]
+      } else {
+        options = alloptions.map((tag) => (
+          <ComboboxOption value={`#${tag}`} key={tag}>
+            <Text component="span" opacity={.5} mr={1} fz={'sm'}>#</Text>
+            {tag}
+          </ComboboxOption>
+        ))
+      }
+      break
+    }
+    case search.startsWith('kind:'):
+    case startingWithKind(search): {
+      const term = search.length > 5 ? search.slice(5).toLocaleLowerCase() : ''
+      let alloptions = keys(likec4model.$model.specification.elements)
+      if (term) {
+        alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term))
+        isExactMatch = only(alloptions)?.toLocaleLowerCase() === term
+      }
+      if (alloptions.length === 0) {
+        options = [
+          <ComboboxEmpty key="empty-kinds">
+            No kinds found
+          </ComboboxEmpty>,
+        ]
+      } else {
+        options = alloptions.map((kind) => (
+          <ComboboxOption value={`kind:${kind}`} key={kind}>
+            <Text component="span" opacity={.5} mr={1} fz={'sm'}>kind:</Text>
+            {kind}
+          </ComboboxOption>
+        ))
+      }
+      break
+    }
+  }
+
+  return (
+    <Combobox
+      onOptionSubmit={(optionValue) => {
+        setSearch(optionValue)
+        combobox.resetSelectedOption()
+        if (!SEARCH_PREFIXES.includes(optionValue)) {
+          combobox.closeDropdown()
+          // Let react to display filtered elements
+          setTimeout(() => {
+            document.querySelector<HTMLButtonElement>(`.${css.root} .${css.focusable}`)?.focus()
+          }, 50)
+        }
+      }}
+      width={'max-content'}
+      position="bottom-start"
+      shadow="md"
+      offset={{
+        mainAxis: 4,
+        crossAxis: 50,
+      }}
+      store={combobox}
+      withinPortal={false}
+    >
+      <ComboboxTarget>
+        <Input
+          ref={ref}
+          id="likec4searchinput"
+          placeholder="Search by title, description or start with # or kind:"
+          tabIndex={0}
+          classNames={{
+            input: css.input,
+          }}
+          size="xl"
+          value={search}
+          leftSection={<IconSearch style={{ width: rem(20) }} stroke={2} />}
+          onChange={(event) => {
+            setSearch(event.currentTarget.value)
+            combobox.openDropdown()
+            combobox.updateSelectedOptionIndex()
+          }}
+          onClick={() => combobox.openDropdown()}
+          onFocus={() => combobox.openDropdown()}
+          onBlur={() => combobox.closeDropdown()}
+          onKeyDownCapture={(e) => {
+            if (e.key === 'Tab') {
+              switch (true) {
+                case combobox.getSelectedOptionIndex() >= 0: {
+                  combobox.clickSelectedOption()
+                  return stopAndPrevent(e)
+                }
+                case options.length === 1: {
+                  const firstOption = combobox.selectFirstOption()
+                  if (firstOption) {
+                    combobox.clickSelectedOption()
+                  }
+                  return stopAndPrevent(e)
+                }
+                case startingWithKind(search): {
+                  setSearch('kind:')
+                  return stopAndPrevent(e)
+                }
+              }
+              return
+            }
+            if (e.key === 'Backspace' && combobox.dropdownOpened) {
+              if (search === 'kind:') {
+                setSearch('')
+                combobox.resetSelectedOption()
+                return stopAndPrevent(e)
+              }
+              if (search.startsWith('kind:') && isExactMatch) {
+                setSearch('kind:')
+                combobox.resetSelectedOption()
+                return stopAndPrevent(e)
+              }
+              if (search.startsWith('#') && isExactMatch) {
+                setSearch('#')
+                combobox.resetSelectedOption()
+                return stopAndPrevent(e)
+              }
+            }
+            if (e.key === 'Escape' && combobox.dropdownOpened && options.length > 0) {
+              stopAndPrevent(e)
+              combobox.closeDropdown()
+              return
+            }
+            if (
+              e.key === 'ArrowDown' && (
+                !combobox.dropdownOpened ||
+                options.length === 0 || isExactMatch ||
+                // reached the last option and the search is empty
+                (search === '' && combobox.getSelectedOptionIndex() === options.length - 1)
+              )
+            ) {
+              combobox.closeDropdown()
+              stopAndPrevent(e)
+              document.querySelector<HTMLButtonElement>(`.${css.root} .${css.focusable}`)?.focus()
+              return
+            }
+          }} />
+      </ComboboxTarget>
+
+      <ComboboxDropdown hidden={options.length === 0} style={{ minWidth: 300 }}>
+        <ComboboxOptions>
+          <ScrollAreaAutosize mah={'min(322px, calc(100cqh - 50px))'} type="scroll">
+            {options}
+          </ScrollAreaAutosize>
+        </ComboboxOptions>
+      </ComboboxDropdown>
+    </Combobox>
+  )
+}

package/src/likec4diagram/ui/search/ViewsColum.tsx

@@ -0,0 +1,158 @@
+import {
+  type LikeC4Model,
+  type Tag,
+  isDeploymentView,
+} from '@likec4/core'
+import {
+  type ElementProps,
+  type UnstyledButtonProps,
+  Badge,
+  Box,
+  createScopedKeydownHandler,
+  Group,
+  Highlight,
+  Stack,
+  ThemeIcon,
+  UnstyledButton,
+  VisuallyHidden,
+} from '@mantine/core'
+import { IconStack2, IconZoomScan } from '@tabler/icons-react'
+import clsx from 'clsx'
+import { m } from 'framer-motion'
+import { first } from 'remeda'
+import { useCurrentViewId } from '../../../hooks'
+import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
+import { emptyBoX } from './_shared.css'
+import { useCloseSearchAndNavigateTo, useNormalizedSearch } from './state'
+import { centerY, moveFocusToSearchInput } from './utils'
+import * as css from './ViewsColumn.css'
+
+export const NothingFound = () => (
+  <Box className={emptyBoX}>
+    Nothing found
+  </Box>
+)
+
+export function ViewsColumn() {
+  const search = useNormalizedSearch()
+  let views = [...useLikeC4Model(true).views()]
+  if (search) {
+    if (search.startsWith('kind:')) {
+      views = []
+    } else {
+      views = views.filter(view => {
+        if (search.startsWith('#')) {
+          return view.tags.some((tag: Tag) => tag.toLocaleLowerCase().includes(search.slice(1)))
+        }
+        return (view.title ?? '' + view.$view.description ?? '').toLocaleLowerCase().includes(search)
+      })
+    }
+  }
+
+  return (
+    <Stack
+      renderRoot={props => <m.div layout {...props} />}
+      gap={8}
+      data-likec4-search-views
+      onKeyDown={(e) => {
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+          const maxY = (e.target as HTMLElement).getBoundingClientRect().y
+          const elementButtons = [...document.querySelectorAll<HTMLButtonElement>(
+            `[data-likec4-search-elements] .likec4-element-button`,
+          )]
+          let elementButton = elementButtons.length > 1
+            ? elementButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1)
+            : null
+          elementButton ??= first(elementButtons)
+
+          if (elementButton) {
+            e.stopPropagation()
+            elementButton.focus()
+          }
+          return
+        }
+      }}>
+      {views.length === 0 && <NothingFound />}
+      {views.length > 0 && (
+        <VisuallyHidden>
+          <UnstyledButton
+            data-likec4-view
+            tabIndex={-1}
+            onFocus={e => {
+              e.stopPropagation()
+              moveFocusToSearchInput()
+            }} />
+        </VisuallyHidden>
+      )}
+      {views.map((view, i) => (
+        <m.div layoutId={`@view${view.id}`} key={view.id}>
+          <ViewButton
+            view={view}
+            search={search}
+            tabIndex={i === 0 ? 0 : -1}
+          />
+        </m.div>
+      ))}
+    </Stack>
+  )
+}
+
+export function ViewButton(
+  { className, view, loop = false, search, ...props }:
+    & {
+      view: LikeC4Model.View
+      search: string
+      loop?: boolean
+    }
+    & UnstyledButtonProps
+    & ElementProps<'button'>,
+) {
+  const navigateTo = useCloseSearchAndNavigateTo()
+  const currentViewId = useCurrentViewId()
+  const isCurrentView = view.id === currentViewId
+  return (
+    <UnstyledButton
+      {...props}
+      className={clsx(css.focusable, css.viewButton, className)}
+      data-likec4-view={view.id}
+      {...isCurrentView && { 'data-disabled': true }}
+      onClick={(e) => {
+        e.stopPropagation()
+        navigateTo(view.id)
+      }}
+      onKeyDown={createScopedKeydownHandler({
+        siblingSelector: '[data-likec4-view]',
+        parentSelector: '[data-likec4-search-views]',
+        activateOnFocus: false,
+        loop,
+        orientation: 'vertical',
+        onKeyDown: (e) => {
+          if (e.nativeEvent.code === 'Space') {
+            e.stopPropagation()
+            navigateTo(view.id)
+          }
+        },
+      })}>
+      <ThemeIcon variant="transparent">
+        {isDeploymentView(view)
+          ? <IconStack2 stroke={1.8} />
+          : <IconZoomScan stroke={1.8} />}
+      </ThemeIcon>
+      <Box style={{ flexGrow: 1 }}>
+        <Group gap={'xs'} wrap="nowrap" align="center">
+          <Highlight component="div" highlight={search} className={css.viewTitle}>
+            {view.title || 'untitled'}
+          </Highlight>
+          {isCurrentView && <Badge size="xs" fz={9} radius={'sm'}>current</Badge>}
+        </Group>
+        <Highlight
+          highlight={view.$view.description ? search : ''}
+          component="div"
+          className={css.viewDescription}
+          lineClamp={1}>
+          {view.$view.description || 'No description'}
+        </Highlight>
+      </Box>
+    </UnstyledButton>
+  )
+}