@likec4/diagram 1.21.0 → 1.22.0

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

@@ -0,0 +1,291 @@
+import {
+  type Fqn,
+  ifilter,
+  isAncestor,
+  LikeC4Model,
+  nameFromFqn,
+  sortParentsFirst,
+  toArray,
+} from '@likec4/core'
+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 clsx from 'clsx'
+import { m } from 'framer-motion'
+import { useEffect, useMemo } from 'react'
+import { first, indexBy, isEmpty, only, partition, pipe, prop, reduce } from 'remeda'
+import { IconOrShapeRenderer } from '../../../context/IconRenderer'
+import { sortByLabel } from '../../../likec4model/useLikeC4ElementsTree'
+import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
+import * as css from './ElementsColumn.css'
+import { setPickView, useCloseSearchAndNavigateTo, useNormalizedSearch } from './state'
+import { centerY, moveFocusToSearchInput, 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),
+  }
+}
+
+export function ElementsColumn() {
+  const search = useNormalizedSearch()
+  const model = useLikeC4Model(true)
+  const {
+    all,
+    byid,
+    roots: data,
+  } = useMemo(() => {
+    const searchTerms = search.split('.')
+    let elements
+    if (isEmpty(search) || search === '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 { all, roots } = pipe(
+      elements,
+      toArray(),
+      sortParentsFirst,
+      reduce((acc, element) => {
+        const treeItem: LikeC4ModelTreeNodeData = {
+          label: element.title,
+          value: element.id,
+          element,
+          searchTerms,
+          children: [],
+        }
+        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: indexBy(all, prop('value')),
+      roots: roots.sort(sortByLabel),
+    }
+  }, [model, search])
+
+  const tree = useTree({
+    multiple: false,
+  })
+  useEffect(() => {
+    tree.collapseAllNodes()
+    for (const nd of all) {
+      if (nd.children.length > 0) {
+        tree.expand(nd.value)
+      }
+    }
+  }, [all])
+
+  const handleClick = useHandleElementSelection()
+
+  return (
+    <>
+      {data.length === 0 && <NothingFound />}
+      <Tree
+        data-likec4-search-elements
+        allowRangeSelection={false}
+        clearSelectionOnOutsideClick
+        selectOnClick={false}
+        tree={tree}
+        data={data}
+        levelOffset={'lg'}
+        classNames={{
+          root: css.treeRoot,
+          node: clsx(css.focusable, css.treeNode),
+          label: css.treeLabel,
+          subtree: css.treeSubtree,
+        }}
+        onKeyDownCapture={(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 === data[0]?.value) {
+              stopAndPrevent(e)
+              moveFocusToSearchInput()
+            }
+            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 = [...document.querySelectorAll<HTMLButtonElement>(
+              `[data-likec4-search-views] .${css.focusable}`,
+            )]
+            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
+          }
+        }}
+        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: css.elementIcon,
+  })
+  const views = [...element.views()]
+
+  const handleClick = useHandleElementSelection()
+
+  const key = `@tree.${node.value}`
+
+  return (
+    <m.div layoutId={key} key={key} {...elementProps as any}>
+      <ActionIcon
+        variant="transparent"
+        size={16}
+        tabIndex={-1}
+        className={clsx(css.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}
+        className={clsx(css.elementButton, '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={css.elementTitleAndId}>
+            <Highlight component="div" highlight={searchTerms} className={css.elementTitle}>
+              {node.label as any}
+            </Highlight>
+            <Tooltip label={element.id} withinPortal={false} fz={'xs'} disabled={!element.id.includes('.')}>
+              <Highlight component="div" highlight={searchTerms} className={css.elementId}>
+                {nameFromFqn(element.id)}
+              </Highlight>
+            </Tooltip>
+          </Group>
+          <Highlight component="div" highlight={searchTerms} className={css.elementDescription} lineClamp={1}>
+            {element.description || 'No description'}
+          </Highlight>
+        </Box>
+
+        <Text component="div" className={css.elementViewsCount}>
+          {views.length === 0 ? 'No views' : (
+            <>
+              {views.length} view{views.length > 1 ? 's' : ''}
+            </>
+          )}
+        </Text>
+      </UnstyledButton>
+    </m.div>
+  )
+}
+
+function useHandleElementSelection() {
+  const navigateTo = useCloseSearchAndNavigateTo()
+
+  return useCallbackRef((element: LikeC4Model.Element) => {
+    const views = [...element.views()]
+    if (views.length === 0) {
+      return
+    }
+    const singleView = only(views)
+    if (singleView) {
+      navigateTo(singleView.id, element.id)
+      return
+    }
+    const [scoped, others] = partition(views, v => v.viewOf?.id === element.id)
+    setPickView({
+      elementFqn: element.id,
+      scoped,
+      others,
+    })
+  })
+}

package/src/likec4diagram/ui/search/LikeC4Search.css.ts

@@ -0,0 +1,117 @@
+import { rem } from '@mantine/core'
+import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../../../theme-vars'
+import { vars, whereDark, whereLight } from '../../../theme-vars.css'
+import { button, buttonFocused } from './_shared.css'
+export { focusable } from './_shared.css'
+
+export const backdrop = style({
+  position: 'fixed',
+  zIndex: 900,
+  inset: 0,
+  backgroundColor: 'rgb(34 34 34 / 0.95)',
+  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
+  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
+
+  selectors: {
+    [`${whereLight} &`]: {
+      backgroundColor: 'rgb(255 255 255 / 0.92  )',
+    },
+  },
+})
+export const root = style({
+  containerName: 'likec4-search',
+  containerType: 'size',
+  position: 'fixed',
+  zIndex: 901,
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  maxHeight: '100vh',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'stretch',
+  gap: mantine.spacing.md,
+  paddingTop: rem(32),
+  paddingLeft: rem(16),
+  paddingRight: rem(16),
+  paddingBottom: 0,
+})
+export const input = style({
+  borderColor: 'transparent',
+  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
+  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
+  backgroundColor: 'transparent',
+  ':focus-within': {
+    backgroundColor: `color-mix(in srgb, ${mantine.colors.gray[3]}, transparent 45%)`,
+  },
+  selectors: {
+    [`${whereDark} &`]: {},
+    [`${whereDark} &:focus-within`]: {
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[4]}, transparent 45%)`,
+    },
+  },
+})
+
+export const pickviewBackdrop = style({
+  position: 'absolute',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'rgb(34 34 34 / 0.5)',
+  zIndex: 902,
+  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
+  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
+  selectors: {
+    [`${whereLight} &`]: {
+      backgroundColor: 'rgb(255 255 255 / 0.6  )',
+    },
+  },
+})
+export const pickview = style({
+  position: 'absolute',
+  top: '2rem',
+  left: '50%',
+  width: '100%',
+  maxWidth: 600,
+  minWidth: 200,
+  transform: 'translateX(-50%)',
+  zIndex: 903,
+})
+
+export const pickviewGroup = style({
+  marginTop: rem(8),
+  selectors: {
+    '& + &': {
+      marginTop: rem(32),
+    },
+  },
+})
+
+globalStyle(`${whereDark} ${pickview} ${button}`, {
+  borderColor: mantine.colors.dark[5],
+  backgroundColor: mantine.colors.dark[6],
+})
+globalStyle(`${whereDark} ${pickview} ${button}:hover`, {
+  ...buttonFocused,
+  backgroundColor: `color-mix(in srgb, ${buttonFocused.backgroundColor}, transparent 40%)`,
+})
+globalStyle(`${whereDark} ${pickview} ${button}:focus`, buttonFocused)
+
+export const scrollArea = style({
+  height: [
+    '100%',
+    '100cqh',
+  ],
+})
+
+globalStyle(`.${scrollArea} .mantine-ScrollArea-viewport`, {
+  minHeight: '100%',
+})
+
+globalStyle(`.${scrollArea} .mantine-ScrollArea-viewport > div`, {
+  minHeight: '100%',
+  height: '100%',
+})

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>
+  )
+}