@likec4/diagram 1.41.0 → 1.42.0

package/src/search/components/SearchInput.tsx

@@ -1,265 +0,0 @@
-import {
-  Combobox,
-  ComboboxDropdown,
-  ComboboxEmpty,
-  ComboboxOption,
-  ComboboxOptions,
-  ComboboxTarget,
-  Input,
-  rem,
-  ScrollAreaAutosize,
-  Text,
-  useCombobox,
-} from '@mantine/core'
-import { useFocusWithin, useMergedRef, useWindowEvent } from '@mantine/hooks'
-import { IconSearch } from '@tabler/icons-react'
-import { type ReactNode, memo, useRef } from 'react'
-import { keys } from 'remeda'
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
-import { useSearch, useSearchActor } from '../hooks'
-import * as css from './styles.css'
-import { focusToFirstFoundElement, moveFocusToSearchInput, stopAndPrevent } from './utils'
-
-function startingWithKind(search: string) {
-  return search.match(/^(k|ki|kin|kind|kind:)$/) != null
-}
-
-const SEARCH_PREFIXES = ['#', 'kind:']
-
-export const LikeC4SearchInput = memo(() => {
-  const searchActorRef = useSearchActor()
-  const likec4model = useLikeC4Model()
-  const inputRef = useRef<HTMLInputElement>(null)
-  const { ref, focused } = useFocusWithin<HTMLInputElement>()
-  const [search, setSearch] = useSearch()
-  // const previous = usePreviousDistinct(search)
-
-  // const [isEmptyForSomeTime, cancel] = useDebouncedValue(
-  //   focused ? search : 'rstrs',
-  //   2000,
-  // )
-  // // useF
-  // // const isEmptyForSomeTime = debouncedSearch === ''
-  // useEffect(() => {
-  //   // cancel()
-  // }, [])
-
-  const combobox = useCombobox({
-    scrollBehavior: 'smooth',
-    loop: false,
-  })
-
-  useWindowEvent(
-    'keydown',
-    (event) => {
-      try {
-        if (
-          !focused && (
-            event.key === 'Backspace' ||
-            event.key.startsWith('Arrow') ||
-            event.key.match(/^\p{L}$/u)
-          )
-        ) {
-          moveFocusToSearchInput(inputRef.current)
-        }
-      } catch (e) {
-        console.warn(e)
-      }
-    },
-  )
-
-  let options = [] as ReactNode[]
-  let isExactMatch = false
-
-  switch (true) {
-    // case search === '' && isEmptyForSomeTime === '': {
-    //   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.tags.filter((tag) => tag.toLocaleLowerCase().includes(searchTag))
-      if (alloptions.length === 0) {
-        isExactMatch = false
-        options = [
-          <ComboboxEmpty key="empty-tags">
-            No tags found
-          </ComboboxEmpty>,
-        ]
-      } else {
-        isExactMatch = likec4model.tags.some((tag) => tag.toLocaleLowerCase() === searchTag)
-        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.specification.elements)
-      if (term) {
-        alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term))
-      }
-      if (alloptions.length === 0) {
-        isExactMatch = false
-        options = [
-          <ComboboxEmpty key="empty-kinds">
-            No kinds found
-          </ComboboxEmpty>,
-        ]
-      } else {
-        isExactMatch = alloptions.some((kind) => kind.toLocaleLowerCase() === term)
-        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(() => {
-            focusToFirstFoundElement(inputRef.current)
-          }, 350)
-        }
-      }}
-      width={'max-content'}
-      position="bottom-start"
-      shadow="md"
-      offset={{
-        mainAxis: 4,
-        crossAxis: 50,
-      }}
-      store={combobox}
-      withinPortal={false}
-    >
-      <ComboboxTarget>
-        <Input
-          ref={useMergedRef(inputRef, ref)}
-          placeholder="Search by title, description or start with # or kind:"
-          autoFocus
-          data-autofocus
-          data-likec4-search-input
-          tabIndex={0}
-          classNames={{
-            input: css.input,
-          }}
-          size="lg"
-          value={search}
-          leftSection={<IconSearch style={{ width: rem(20) }} stroke={2} />}
-          rightSection={
-            <Input.ClearButton
-              onClick={(e) => {
-                e.stopPropagation()
-                const openedWithSearch = searchActorRef.getSnapshot().context.openedWithSearch
-                if (search === '' || search === openedWithSearch) {
-                  searchActorRef.send({ type: 'close' })
-                } else {
-                  setSearch('')
-                }
-              }} />
-          }
-          rightSectionPointerEvents="auto"
-          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 === 'ArrowUp' && combobox.dropdownOpened && search === '' && combobox.getSelectedOptionIndex() === 0
-            ) {
-              combobox.closeDropdown()
-              stopAndPrevent(e)
-              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)
-              focusToFirstFoundElement(inputRef.current)
-              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/search/components/ViewsColum.tsx

@@ -1,167 +0,0 @@
-import type { LikeC4Model } from '@likec4/core/model'
-import { cx } from '@likec4/styles/css'
-import { Box } from '@likec4/styles/jsx'
-import {
-  type ElementProps,
-  type UnstyledButtonProps,
-  Badge,
-  createScopedKeydownHandler,
-  Group,
-  Highlight,
-  Stack,
-  ThemeIcon,
-  UnstyledButton,
-  VisuallyHidden,
-} from '@mantine/core'
-import { IconStack2, IconZoomScan } from '@tabler/icons-react'
-import * as m from 'motion/react-m'
-import { memo, useRef } from 'react'
-import { first } from 'remeda'
-import { useCurrentViewId } from '../../hooks/useCurrentViewId'
-import { useDiagram } from '../../hooks/useDiagram'
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
-import { useNormalizedSearch, useSearchActor } from '../hooks'
-import { buttonsva } from './_shared.css'
-import { centerY, moveFocusToSearchInput, queryAllFocusable } from './utils'
-import * as styles from './ViewsColumn.css'
-
-export const NothingFound = () => (
-  <Box className={styles.emptyBoX}>
-    Nothing found
-  </Box>
-)
-
-export const ViewsColumn = memo(() => {
-  const ref = useRef<HTMLDivElement>(null)
-  let views = [...useLikeC4Model().views()]
-  let search = useNormalizedSearch()
-  if (search) {
-    if (search.startsWith('kind:')) {
-      views = []
-    } else {
-      views = views.filter(view => {
-        if (search.startsWith('#')) {
-          return view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)))
-        }
-        return `${view.title} ${view.$view.description}`.toLocaleLowerCase().includes(search)
-      })
-    }
-  }
-
-  return (
-    <Stack
-      ref={ref}
-      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 = queryAllFocusable(ref.current, '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(ref.current)
-            }} />
-        </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>
-  )
-})
-
-const btn = buttonsva()
-
-export function ViewButton(
-  { className, view, loop = false, search, ...props }:
-    & {
-      view: LikeC4Model.View
-      search: string
-      loop?: boolean
-    }
-    & UnstyledButtonProps
-    & ElementProps<'button'>,
-) {
-  const searchActorRef = useSearchActor()
-  const diagram = useDiagram()
-  const currentViewId = useCurrentViewId()
-  const isCurrentView = view.id === currentViewId
-
-  const navigate = () => {
-    searchActorRef.send({ type: 'close' })
-    setTimeout(() => {
-      diagram.navigateTo(view.id)
-    }, 100)
-  }
-
-  return (
-    <UnstyledButton
-      {...props}
-      className={cx(btn.root, 'group', styles.focusable, styles.viewButton, className)}
-      data-likec4-view={view.id}
-      {...isCurrentView && { 'data-disabled': true }}
-      onClick={(e) => {
-        e.stopPropagation()
-        navigate()
-      }}
-      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()
-            navigate()
-          }
-        },
-      })}>
-      <ThemeIcon variant="transparent" className={btn.icon!}>
-        {view.isDeploymentView()
-          ? <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={btn.title!}>
-            {view.title || 'untitled'}
-          </Highlight>
-          {isCurrentView && <Badge size="xs" fz={9} radius={'sm'}>current</Badge>}
-        </Group>
-        <Highlight
-          highlight={view.description.nonEmpty ? search : ''}
-          component="div"
-          className={btn.description!}
-          lineClamp={1}>
-          {view.description.text || 'No description'}
-        </Highlight>
-      </Box>
-    </UnstyledButton>
-  )
-}

package/src/search/components/ViewsColumn.css.ts

@@ -1,34 +0,0 @@
-import { css, cx } from '@likec4/styles/css'
-
-export { emptyBoX, focusable } from './_shared.css'
-
-const _viewBtn = 'likec4-view-btn'
-
-export const viewButton = cx(
-  css({
-    flexWrap: 'nowrap',
-    display: 'flex',
-    // '& .mantine-ThemeIcon-root': {
-    //   color: `[var(${iconColor}, {colors.mantine.colors.dark[2]})]`,
-    //   '--ti-size': '24px',
-    // },
-    '&[data-disabled] .mantine-ThemeIcon-root': {
-      opacity: 0.45,
-    },
-  }),
-  _viewBtn,
-)
-
-// export const viewTitle = css(title)
-// export const viewDescription = css(description)
-
-export const viewButtonDescription = css({
-  marginTop: '1',
-  // transition: transitions.fast,
-  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
-  fontSize: '13px',
-  lineHeight: '1.4',
-  [`:where(.likec4-view-btn[data-disabled]) &`]: {
-    opacity: 0.85,
-  },
-})

package/src/search/components/_shared.css.ts

@@ -1,176 +0,0 @@
-import { css, sva } from '@likec4/styles/css'
-
-// export const titleColor = '--title-color'
-// export const descriptionColor = '---description-color'
-// export const iconColor = '--icon-color'
-
-const buttonFocused = css.raw({
-  outline: 'none',
-  background: 'mantine.colors.primary[8]',
-  borderColor: 'mantine.colors.primary[9]',
-})
-
-const _treenodefocus = '.mantine-Tree-node:focus > .mantine-Tree-label &'
-
-const button = css.raw({
-  display: 'flex',
-  width: '100%',
-  background: 'mantine.colors.body',
-  rounded: 'sm',
-  padding: `[12px 8px 12px 14px]`,
-  minHeight: '60px',
-  gap: '2',
-  // alignItems: 'flex-start',
-  // transition: `all 50ms ${easings.inOut}`,
-  border: `1px solid`,
-  borderColor: 'mantine.colors.defaultBorder',
-  // [titleColor]: '{colors.mantine.colors.dark[1]}',
-  // [iconColor]: '{colors.mantine.colors.dimmed}',
-  // [descriptionColor]: '{colors.mantine.colors.dimmed}',
-  _hover: {
-    ...buttonFocused,
-    borderColor: 'mantine.colors.primary[9]',
-    background: `mantine.colors.primary[8]/60`,
-  },
-  _focus: buttonFocused,
-  [_treenodefocus]: buttonFocused,
-  _dark: {
-    borderColor: 'transparent',
-    background: `mantine.colors.dark[6]/80`,
-    // background: 'mantine.colors.dark[6]',
-  },
-  _light: {
-    background: `mantine.colors.white/80`,
-    // [iconColor]: '{colors.mantine.colors.gray[6]}',
-    // [titleColor]: '{colors.mantine.colors.gray[7]}',
-    _hover: {
-      borderColor: 'mantine.colors.primary[6]',
-      backgroundColor: 'mantine.colors.primary[5]',
-      // [iconColor]: '{colors.mantine.colors.primary[3])',
-      // [titleColor]: '{colors.mantine.colors.primary[0])',
-      // [descriptionColor]: '{colors.mantine.colors.primary[1]}',
-    },
-  },
-})
-
-export const focusable = 'likec4-focusable'
-
-const iconSize = {
-  ref: 'var(--likec4-icon-size, 24px)',
-}
-
-const icon = css.raw({
-  color: {
-    base: 'mantine.colors.dimmed',
-    _light: 'mantine.colors.gray[5]',
-    _groupHover: 'mantine.colors.primary[0]',
-    _groupFocus: 'mantine.colors.primary[0]',
-  },
-  [_treenodefocus]: {
-    color: 'mantine.colors.primary[0]',
-  },
-  flex: `0 0 ${iconSize.ref}`,
-  height: iconSize.ref,
-  width: iconSize.ref,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  alignSelf: 'flex-start',
-
-  ['--ti-size']: iconSize.ref,
-  [`& svg, & img`]: {
-    width: '100%',
-    height: 'auto',
-    maxHeight: '100%',
-    pointerEvents: 'none',
-  },
-  [`& img`]: {
-    objectFit: 'contain',
-  },
-  '&.likec4-shape-icon svg': {
-    // color: `[var(${iconColor})]`,
-    strokeWidth: 1.5,
-  },
-  // [iconSize]: '24px',
-  // [whenContainerIsNarrow]: {
-  //   [iconSize]: '18px',
-  // },
-})
-
-const title = css.raw({
-  fontSize: '16px',
-  fontWeight: 500,
-  lineHeight: '1.1',
-  [`:where([data-disabled]) &`]: {
-    opacity: 0.4,
-  },
-
-  color: {
-    base: 'mantine.colors.dark[1]',
-    _light: 'mantine.colors.gray[7]',
-    _groupHover: {
-      base: 'mantine.colors.primary[1]',
-      _light: 'mantine.colors.white',
-    },
-    _groupFocus: {
-      base: 'mantine.colors.primary[1]',
-      _light: 'mantine.colors.white',
-    },
-  },
-  [_treenodefocus]: {
-    color: {
-      base: 'mantine.colors.primary[1]',
-      _light: 'mantine.colors.white',
-    },
-  },
-})
-const descriptionColor = css.raw({
-  color: {
-    base: 'mantine.colors.dimmed',
-    _groupHover: {
-      base: 'mantine.colors.primary[1]',
-      _light: 'mantine.colors.primary[0]',
-    },
-    _groupFocus: 'mantine.colors.primary[0]',
-  },
-  [_treenodefocus]: {
-    color: 'mantine.colors.primary[0]',
-  },
-})
-
-const description = css.raw(descriptionColor, {
-  marginTop: '1',
-  fontSize: '12px',
-  lineHeight: '1.4',
-
-  [`:where([data-disabled]) &`]: {
-    opacity: 0.85,
-  },
-})
-
-export const emptyBoX = css({
-  width: '100%',
-  height: '100%',
-  border: `2px dashed`,
-  borderColor: 'mantine.colors.defaultBorder',
-  rounded: 'md',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  fontSize: 'md',
-  color: 'mantine.colors.dimmed',
-  padding: 'md',
-  paddingBlock: 'xl',
-})
-
-export const buttonsva = sva({
-  slots: ['root', 'icon', 'title', 'description', 'descriptionColor'],
-  className: 'search-button',
-  base: {
-    root: button,
-    icon,
-    title,
-    description,
-    descriptionColor,
-  },
-})