@likec4/diagram 1.41.0 → 1.42.0

package/src/search/components/ElementsColumn.tsx

@@ -1,318 +0,0 @@
-import type { LikeC4Model } from '@likec4/core/model'
-import type { Fqn } from '@likec4/core/types'
-import {
-  ifilter,
-  isAncestor,
-  nameFromFqn,
-  sortParentsFirst,
-} from '@likec4/core/utils'
-import { cx, cx as clsx } from '@likec4/styles/css'
-import {
-  type RenderTreeNodePayload,
-  ActionIcon,
-  Box,
-  Group,
-  Highlight,
-  Text,
-  Tooltip,
-  Tree,
-  UnstyledButton,
-  useTree,
-} from '@mantine/core'
-import { useCallbackRef } from '@mantine/hooks'
-import { IconChevronRight } from '@tabler/icons-react'
-import * as m from 'motion/react-m'
-import { type KeyboardEventHandler, memo, useEffect, useMemo } from 'react'
-import { first, isEmpty, only, pipe, reduce } from 'remeda'
-import { IconOrShapeRenderer } from '../../context/IconRenderer'
-import { useDiagram } from '../../hooks/useDiagram'
-import { sortByLabel } from '../../likec4model/useLikeC4ElementsTree'
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
-import { useNormalizedSearch, useSearchActor } from '../hooks'
-import { buttonsva } from './_shared.css'
-import * as styles from './ElementsColumn.css'
-import { centerY, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent } from './utils'
-import { NothingFound } from './ViewsColum'
-
-interface LikeC4ModelTreeNodeData {
-  label: string
-  value: Fqn
-  element: LikeC4Model.Element
-  searchTerms: string[]
-  children: LikeC4ModelTreeNodeData[]
-}
-
-function buildNode(
-  element: LikeC4Model.Element,
-  searchTerms: string[] = [],
-): LikeC4ModelTreeNodeData {
-  return {
-    label: element.title,
-    value: element.id,
-    element,
-    searchTerms,
-    children: [...element.children()].map(e => buildNode(e, searchTerms)).sort(sortByLabel),
-  }
-}
-
-const btn = buttonsva()
-
-export const ElementsColumn = memo(() => {
-  const model = useLikeC4Model()
-  const search = useNormalizedSearch()
-  const data = useMemo(() => {
-    const searchTerms = search.split('.')
-    let elements
-    if (isEmpty(searchTerms) || searchTerms[0] === 'kind:') {
-      elements = model.elements()
-    } else {
-      elements = ifilter(model.elements(), element => {
-        if (search.startsWith('kind:')) {
-          return element.kind.toLocaleLowerCase().startsWith(search.slice(5))
-        }
-        if (search.startsWith('#')) {
-          return element.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)))
-        }
-        return (element.title + ' ' + element.id + ' ' + (element.description ?? ''))
-          .toLocaleLowerCase().includes(search)
-      })
-    }
-    const byid = {} as Record<Fqn, LikeC4ModelTreeNodeData>
-    const { all, roots } = pipe(
-      [...elements],
-      sortParentsFirst,
-      reduce((acc, element) => {
-        const treeItem: LikeC4ModelTreeNodeData = {
-          label: element.title,
-          value: element.id,
-          element,
-          searchTerms,
-          children: [],
-        }
-        byid[treeItem.value] = treeItem
-        const parent = acc.all.findLast((root) => isAncestor(root.value, treeItem.value))
-        if (parent) {
-          parent.children.push(treeItem)
-          if (parent.children.length > 1) {
-            parent.children.sort(sortByLabel)
-          }
-        } else {
-          acc.roots.push(treeItem)
-        }
-        acc.all.push(treeItem)
-        return acc
-      }, {
-        all: [] as LikeC4ModelTreeNodeData[],
-        roots: [] as LikeC4ModelTreeNodeData[],
-      }),
-    )
-    return {
-      all,
-      byid,
-      roots: roots.sort(sortByLabel),
-    }
-  }, [model, search])
-
-  const handleClick = useHandleElementSelection()
-
-  if (data.all.length === 0) {
-    return <NothingFound />
-  }
-
-  return <ElementsTree data={data} handleClick={handleClick} />
-})
-
-const setHoveredNode = () => {}
-
-function ElementsTree({
-  data: {
-    all,
-    byid,
-    roots,
-  },
-  handleClick,
-}: {
-  data: {
-    all: LikeC4ModelTreeNodeData[]
-    byid: Record<Fqn, LikeC4ModelTreeNodeData>
-    roots: LikeC4ModelTreeNodeData[]
-  }
-  handleClick: (element: LikeC4Model.Element) => void
-}) {
-  const tree = useTree({
-    multiple: false,
-  })
-  tree.setHoveredNode = setHoveredNode
-
-  useEffect(() => {
-    tree.collapseAllNodes()
-    for (const nd of all) {
-      if (nd.children.length > 0) {
-        tree.expand(nd.value)
-      }
-    }
-  }, [all])
-
-  const onKeyDownCapture: KeyboardEventHandler = useCallbackRef((e) => {
-    const target = e.target as HTMLElement
-    const id = target.getAttribute('data-value')
-    const node = !!id && byid[id as Fqn]
-    if (!node) return
-    if (e.key === 'ArrowUp') {
-      if (id === roots[0]?.value) {
-        stopAndPrevent(e)
-        moveFocusToSearchInput(target)
-      }
-      return
-    }
-    if (e.key === 'ArrowRight') {
-      const hasChildren = node.children.length > 0
-      if (hasChildren && tree.expandedState[id] === false) {
-        return
-      }
-      const label = (e.target as HTMLLIElement).querySelector<HTMLLIElement>('.mantine-Tree-label') ?? target
-      const maxY = label.getBoundingClientRect().y
-      const viewButtons = queryAllFocusable(target, 'views')
-      let view = viewButtons.length > 1
-        ? viewButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1)
-        : null
-      view ??= first(viewButtons)
-      if (view) {
-        stopAndPrevent(e)
-        view.focus()
-      }
-      return
-    }
-    if (e.key === ' ' || e.key === 'Enter') {
-      stopAndPrevent(e)
-      handleClick(node.element)
-      return
-    }
-  })
-
-  return (
-    <Tree
-      data-likec4-search-elements
-      allowRangeSelection={false}
-      clearSelectionOnOutsideClick
-      selectOnClick={false}
-      tree={tree}
-      data={roots}
-      levelOffset={'lg'}
-      classNames={{
-        root: styles.treeRoot,
-        node: cx(styles.focusable, styles.treeNode),
-        label: styles.treeLabel,
-        subtree: styles.treeSubtree,
-      }}
-      onKeyDownCapture={onKeyDownCapture}
-      renderNode={ElementTreeNode}
-    />
-  )
-}
-
-function ElementTreeNode(
-  { node, elementProps, hasChildren, expanded }: RenderTreeNodePayload,
-) {
-  const { element, searchTerms } = node as LikeC4ModelTreeNodeData
-  const elementIcon = IconOrShapeRenderer({
-    element: {
-      id: element.id,
-      title: element.title,
-      shape: element.shape,
-      icon: element.icon,
-    },
-    className: cx(btn.icon, styles.elementIcon),
-  })
-  const views = [...element.views()]
-
-  const handleClick = useHandleElementSelection()
-
-  const key = `@tree.${node.value}`
-
-  return (
-    <m.div layoutId={key} {...elementProps as any}>
-      <ActionIcon
-        variant="transparent"
-        size={16}
-        tabIndex={-1}
-        className={clsx(styles.elementExpandIcon)}
-        style={{
-          visibility: hasChildren ? 'visible' : 'hidden',
-        }}>
-        <IconChevronRight
-          stroke={3.5}
-          style={{
-            transition: 'transform 150ms ease',
-            transform: `rotate(${expanded ? '90deg' : '0'})`,
-            width: '100%',
-          }} />
-      </ActionIcon>
-      <UnstyledButton
-        component={m.button}
-        layout
-        tabIndex={-1}
-        data-value={element.id}
-        className={clsx(btn.root, 'group', 'likec4-element-button')}
-        {...views.length > 0 && {
-          onClick: (e) => {
-            if (!hasChildren || expanded) {
-              e.stopPropagation()
-              handleClick(element)
-            }
-          },
-        }}
-      >
-        {elementIcon}
-        <Box style={{ flexGrow: 1 }}>
-          <Group gap={'xs'} wrap="nowrap" align="center" className={styles.elementTitleAndId}>
-            <Highlight component="div" highlight={searchTerms} className={btn.title!}>
-              {node.label as any}
-            </Highlight>
-            <Tooltip label={element.id} withinPortal={false} fz={'xs'} disabled={!element.id.includes('.')}>
-              <Highlight
-                component="div"
-                highlight={searchTerms}
-                className={cx(styles.elementId, btn.descriptionColor)}>
-                {nameFromFqn(element.id)}
-              </Highlight>
-            </Tooltip>
-          </Group>
-          <Highlight component="div" highlight={searchTerms} className={btn.description!} lineClamp={1}>
-            {element.summary.text || 'No description'}
-          </Highlight>
-        </Box>
-
-        <Text component="div" className={cx(styles.elementViewsCount, btn.descriptionColor)} fz={'xs'}>
-          {views.length === 0 ? 'No views' : (
-            <>
-              {views.length} view{views.length > 1 ? 's' : ''}
-            </>
-          )}
-        </Text>
-      </UnstyledButton>
-    </m.div>
-  )
-}
-
-function useHandleElementSelection() {
-  const diagram = useDiagram()
-  const searchActorRef = useSearchActor()
-  return useCallbackRef((element: LikeC4Model.Element) => {
-    const views = [...element.views()]
-    if (views.length === 0) {
-      return
-    }
-    const singleView = only(views)
-    if (singleView) {
-      searchActorRef.send({ type: 'close' })
-      if (singleView.id !== diagram.currentView.id) {
-        setTimeout(() => {
-          diagram.navigateTo(singleView.id)
-        }, 100)
-      }
-      return
-    }
-    searchActorRef.send({ type: 'pickview.open', elementFqn: element.id })
-  })
-}

package/src/search/components/PickView.tsx

@@ -1,134 +0,0 @@
-import type { LikeC4ViewModel } from '@likec4/core/model'
-import type { Fqn } from '@likec4/core/types'
-import { ActionIcon, FocusTrap, Group, ScrollAreaAutosize, Stack, Title } from '@mantine/core'
-import { useWindowEvent } from '@mantine/hooks'
-import { IconX } from '@tabler/icons-react'
-import * as m from 'motion/react-m'
-import { useLikeC4Model } from '../../likec4model'
-import { useSearchActor } from '../hooks'
-import * as styles from './styles.css'
-import { ViewButton } from './ViewsColum'
-
-export function PickView({ elementFqn }: { elementFqn: Fqn }) {
-  const searchActorRef = useSearchActor()
-  const element = useLikeC4Model().element(elementFqn)
-  const scoped = [] as LikeC4ViewModel[]
-  const others = [] as LikeC4ViewModel[]
-
-  for (const view of element.views()) {
-    if (view.viewOf === element) {
-      scoped.push(view)
-    } else {
-      others.push(view)
-    }
-  }
-
-  const closePickView = () => {
-    searchActorRef.send({ type: 'pickview.close' })
-  }
-
-  useWindowEvent(
-    'keydown',
-    (event) => {
-      try {
-        if (event.key === 'Escape') {
-          event.stopPropagation()
-          event.preventDefault()
-          closePickView()
-        }
-      } catch (e) {
-        console.warn(e)
-      }
-    },
-    {
-      capture: true,
-    },
-  )
-
-  return (
-    <>
-      <m.div
-        key="pickview-backdrop"
-        className={styles.pickviewBackdrop}
-        onClick={e => {
-          e.stopPropagation()
-          closePickView()
-        }}>
-      </m.div>
-      <FocusTrap>
-        <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={styles.pickview}
-          data-likec4-search-views>
-          <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()
-                closePickView()
-              }}>
-              <IconX />
-            </ActionIcon>
-          </Group>
-          <ScrollAreaAutosize mah={'calc(100vh - 110px)'} type="never">
-            {scoped.length > 0 && (
-              <Stack gap={'sm'} px={'sm'} className={styles.pickviewGroup}>
-                <Title order={6} c={'dimmed'}>scoped views of the element</Title>
-                {scoped.map((view, i) => (
-                  <ViewButton
-                    key={view.id}
-                    view={view}
-                    search={''}
-                    loop
-                    mod={{
-                      autofocus: i === 0,
-                    }}
-                  />
-                ))}
-              </Stack>
-            )}
-
-            {others.length > 0 && (
-              <Stack gap={'sm'} px={'sm'} className={styles.pickviewGroup}>
-                <Title order={6} c={'dimmed'}>views including this element</Title>
-                {others.map((view, i) => (
-                  <ViewButton
-                    key={view.id}
-                    view={view}
-                    search={''}
-                    loop
-                    mod={{
-                      autofocus: i === 0 && scoped.length === 0,
-                    }}
-                  />
-                ))}
-              </Stack>
-            )}
-          </ScrollAreaAutosize>
-        </m.div>
-      </FocusTrap>
-    </>
-  )
-}

package/src/search/components/SearchByTags.tsx

@@ -1,112 +0,0 @@
-import { css } from '@likec4/styles/css'
-import { HStack } from '@likec4/styles/jsx'
-import { Button } from '@mantine/core'
-import { IconX } from '@tabler/icons-react'
-import { useRef } from 'react'
-import { ElementTag } from '../../base/primitives'
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
-import { useNormalizedSearch, useUpdateSearch } from '../hooks'
-import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils'
-
-export function SearchByTags() {
-  const ref = useRef<HTMLDivElement>(null)
-  let tags = useLikeC4Model().tagsSortedByUsage
-  let setSearch = useUpdateSearch()
-  let search = useNormalizedSearch()
-  let countBefore = tags.length
-  if (search.startsWith('#')) {
-    const searchTag = search.slice(1)
-    tags = tags.filter(({ tag }) => tag.toLocaleLowerCase().includes(searchTag))
-  }
-  if (tags.length === 0) {
-    return null
-  }
-
-  const isFiltered = tags.length !== countBefore
-
-  return (
-    <HStack
-      ref={ref}
-      css={{
-        gap: 'md',
-        paddingLeft: '[48px]',
-        flexWrap: 'nowrap',
-      }}
-    >
-      <HStack
-        css={{
-          gap: '1.5', // 6px
-          flexWrap: 'wrap',
-          opacity: isFiltered ? 1 : .3,
-          grayscale: isFiltered ? 0 : .9,
-          filter: 'auto',
-          transition: 'fast',
-          _groupHover: {
-            opacity: 1,
-            grayscale: 0,
-          },
-          _groupFocusWithin: {
-            opacity: 1,
-            grayscale: 0,
-          },
-        }}
-      >
-        {tags.map(({ tag }) => (
-          // <Pill
-          //   key={tag}
-          //   data-likec4-tag={tag}
-          //   className={cx(
-          //     likec4tag(),
-          //     css({
-          //       minWidth: 'unset',
-          //       cursor: 'pointer',
-          //     }),
-          //   )}
-          //   onClick={(e) => {
-          //     e.stopPropagation()
-          //     setSearch(`#${tag}`)
-          //   }}
-          //   onRemove={() => {
-          //     setSearch('#')
-          //     moveFocusToSearchInput()
-          //   }}
-          //   withRemoveButton={tag === `${search.slice(1)}`}
-          // >
-          //   <span style={{ opacity: 0.7, fontSize: '1.05em' }}>#</span>
-          //   {tag}
-          // </Pill>
-          <ElementTag
-            key={tag}
-            tag={tag}
-            className={css({
-              userSelect: 'none',
-              cursor: 'pointer',
-            })}
-            onClick={(e) => {
-              e.stopPropagation()
-              setSearch(`#${tag}`)
-              // Let react to display filtered elements
-              setTimeout(() => {
-                focusToFirstFoundElement(ref.current)
-              }, 350)
-            }}
-          />
-        ))}
-      </HStack>
-      {isFiltered && (
-        <Button
-          size="compact-xs"
-          variant="light"
-          onClick={(e) => {
-            e.stopPropagation()
-            setSearch('')
-            moveFocusToSearchInput(ref.current)
-          }}
-          rightSection={<IconX size={14} />}
-        >
-          Clear
-        </Button>
-      )}
-    </HStack>
-  )
-}