@likec4/diagram 1.40.0 → 1.42.0

package/src/components/Link.tsx

@@ -1,109 +0,0 @@
-import type { Link as LinkData } from '@likec4/core'
-import { css, cx } from '@likec4/styles/css'
-import { type BadgeProps, ActionIcon, Badge, CopyButton } from '@mantine/core'
-import { IconCheck, IconCopy } from '@tabler/icons-react'
-import { forwardRef } from 'react'
-import { GithubIcon } from './GithubIcon'
-
-const GITHUB_PREFIX = 'https://github.com/'
-
-export const Link = forwardRef<HTMLDivElement, Omit<BadgeProps, 'children' | 'classNames'> & { value: LinkData }>(
-  ({ value, className, ...props }, ref) => {
-    // If the url is already a full url, use it as is.
-    // Otherwise, it's a relative url and we need to make it absolute.
-    const url = value.url.includes('://') ? value.url : new window.URL(value.url, window.location.href).toString()
-    let isGithub = url.startsWith(GITHUB_PREFIX)
-
-    return (
-      <Badge
-        ref={ref}
-        variant="default"
-        radius="sm"
-        size="sm"
-        tt="none"
-        leftSection={value.title ? <>{value.title}</> : null}
-        rightSection={
-          <CopyButton value={url} timeout={1500}>
-            {({ copy, copied }) => (
-              <ActionIcon
-                className={css({
-                  opacity: copied ? 1 : 0.45,
-                  transition: 'fast',
-                  _hover: {
-                    opacity: 1,
-                  },
-                })}
-                tabIndex={-1}
-                size={'20'}
-                variant={copied ? 'light' : 'transparent'}
-                color={copied ? 'teal' : 'gray'}
-                data-active={copied}
-                onClick={e => {
-                  e.stopPropagation()
-                  e.preventDefault()
-                  copy()
-                }}
-              >
-                {copied ? <IconCheck /> : <IconCopy stroke={2.5} />}
-              </ActionIcon>
-            )}
-          </CopyButton>
-        }
-        {...props}
-        className={cx(className, 'group')}
-        classNames={{
-          root: css({
-            flexWrap: 'nowrap',
-            minHeight: 24,
-            maxWidth: 500,
-            userSelect: 'all',
-            pr: '0',
-            backgroundColor: {
-              base: 'transparent',
-              _hover: {
-                base: 'mantine.colors.gray[1]',
-                _dark: 'mantine.colors.dark[5]',
-              },
-            },
-          }),
-          section: css({
-            '&:is([data-position="left"])': {
-              color: 'mantine.colors.dimmed',
-              userSelect: 'none',
-              pointerEvents: 'none',
-              _groupHover: {
-                color: '[inherit]',
-                opacity: .7,
-              },
-            },
-          }),
-          label: css({
-            '& > a': {
-              color: '[inherit]',
-              cursor: 'pointer',
-              transition: 'fast',
-              opacity: {
-                base: 0.7,
-                _hover: 1,
-              },
-              textDecoration: {
-                base: 'none',
-                _hover: 'underline',
-              },
-            },
-          }),
-        }}
-      >
-        <a href={url} target="_blank">
-          {isGithub && (
-            <GithubIcon
-              height="12"
-              width="12"
-              style={{ verticalAlign: 'middle', marginRight: '4px' }} />
-          )}
-          {isGithub ? url.replace(GITHUB_PREFIX, '') : url}
-        </a>
-      </Badge>
-    )
-  },
-)

package/src/components/NavigationLink.tsx

@@ -1,32 +0,0 @@
-import { cx } from '@likec4/styles/css'
-import { navigationLink } from '@likec4/styles/recipes'
-import { type NavLinkProps, NavLink } from '@mantine/core'
-import { forwardRef } from 'react'
-import { type ComponentPropsWithoutRef } from 'react'
-
-export interface NavigationLinkProps
-  extends Omit<NavLinkProps, 'classNames'>, Omit<ComponentPropsWithoutRef<'button'>, keyof NavLinkProps>
-{
-  truncateLabel?: boolean
-}
-
-export const NavigationLink = forwardRef<HTMLButtonElement, NavigationLinkProps>((
-  { className, truncateLabel = true, ...others },
-  ref,
-) => (
-  <NavLink
-    {...others}
-    component="button"
-    classNames={navigationLink({
-      truncateLabel,
-    })}
-    className={cx(
-      'group',
-      'mantine-active',
-      className,
-    )}
-    ref={ref}
-  />
-))
-
-NavigationLink.displayName = 'NavigationLink'

package/src/components/SearchControl.css.ts

@@ -1,79 +0,0 @@
-import { css } from '@likec4/styles/css'
-
-export const root = css({
-  height: '30px',
-  paddingLeft: 'sm',
-  paddingRight: '1',
-  borderRadius: 'sm',
-  // TODO
-  // color: fallbackVar('var(--search-color)', 'mantine.colors.placeholder)',
-  border: '1px solid',
-  borderColor: {
-    base: 'mantine.colors.defaultBorder',
-    _light: 'mantine.colors.gray[4]',
-    _dark: 'mantine.colors.dark[4]',
-    _hover: 'mantine.colors.defaultBorder',
-  },
-  cursor: 'pointer',
-  background: {
-    base: 'mantine.colors.default',
-    _light: 'mantine.colors.white',
-    _dark: 'mantine.colors.dark[6]',
-    _hover: 'mantine.colors.defaultHover',
-  },
-
-  width: '100%',
-  '& .tabler-icon': {
-    color: 'mantine.colors.text',
-  },
-
-  transition: {
-    base: 'fast',
-    _whenPanning: 'none !important',
-  },
-  boxShadow: {
-    base: 'xs',
-    _hover: 'sm',
-    _whenPanning: 'none !important',
-  },
-})
-
-export const placeholder = css({
-  fontSize: 'sm', // mantine.fontSizes.sm,
-  fontWeight: 500,
-  paddingRight: '2.5', // 10px
-  color: 'mantine.colors.placeholder',
-  flex: '1',
-  sm: {
-    paddingRight: '[30px]',
-  },
-  md: {
-    paddingRight: '[50px]',
-  },
-})
-
-export const shortcut = css({
-  fontSize: '11px',
-  fontWeight: 600,
-  lineHeight: 1,
-  padding: '[4px 7px]',
-  borderRadius: 'sm',
-  border: '1px solid',
-  transition: 'fast',
-  _light: {
-    color: 'mantine.colors.gray[7]',
-    borderColor: 'mantine.colors.gray[2]',
-  },
-  _dark: {
-    color: 'mantine.colors.dark[0]',
-    borderColor: 'mantine.colors.dark[7]',
-  },
-  backgroundColor: {
-    _light: 'mantine.colors.gray[2]/70',
-    _dark: 'mantine.colors.dark[8]/70',
-    _groupHover: {
-      _light: 'mantine.colors.gray[2]',
-      _dark: 'mantine.colors.dark[8]',
-    },
-  },
-})

package/src/components/SearchControl.tsx

@@ -1,30 +0,0 @@
-import { cx } from '@likec4/styles/css'
-import {
-  type ElementProps,
-  type UnstyledButtonProps,
-  Group,
-  Text,
-  UnstyledButton,
-} from '@mantine/core'
-import { IconSearch } from '@tabler/icons-react'
-import { isMacOs } from '@xyflow/system'
-import * as classes from './SearchControl.css'
-
-interface SearchControlProps extends UnstyledButtonProps, ElementProps<'button'> {}
-
-export function SearchControl({ className, ...others }: SearchControlProps) {
-  const isMac = isMacOs()
-  return (
-    <UnstyledButton {...others} className={cx('group', classes.root, className)}>
-      <Group gap="xs">
-        <IconSearch style={{ width: '15px', height: '15px' }} stroke={2} />
-        <Text component="div" className={classes.placeholder}>
-          Search
-        </Text>
-        <Text component="div" className={classes.shortcut}>
-          {isMac ? '⌘ + K' : 'Ctrl + K'}
-        </Text>
-      </Group>
-    </UnstyledButton>
-  )
-}

package/src/context/ControlsCustomLayout.ts

@@ -1,15 +0,0 @@
-import { createOptionalContext } from '@mantine/core'
-import { type ReactNode } from 'react'
-
-export type ControlsCustomLayoutProps = {
-  burgerMenu: ReactNode
-  navigationButtons: ReactNode
-  search: ReactNode
-  actionsGroup: ReactNode
-}
-export type ControlsCustomLayout = (props: ControlsCustomLayoutProps) => ReactNode
-
-export const [
-  ControlsCustomLayoutProvider,
-  useControlsCustomLayout,
-] = createOptionalContext<ControlsCustomLayout | null>(null)

package/src/context/DiagramEventHandlers.tsx

@@ -1,68 +0,0 @@
-import type { aux } from '@likec4/core/types'
-import { useSyncedRef } from '@react-hookz/web'
-import { type PropsWithChildren, type RefObject, createContext, useContext, useMemo } from 'react'
-import { isFunction, mapToObj } from 'remeda'
-import type { LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props'
-
-type RequiredOrNull<T> = {
-  [P in keyof T]-?: NonNullable<T[P]> | null
-}
-
-const HandlerNames = [
-  'onBurgerMenuClick',
-  'onNavigateTo',
-  'onOpenSource',
-  'onCanvasClick',
-  'onCanvasContextMenu',
-  'onEdgeClick',
-  'onEdgeContextMenu',
-  'onNodeClick',
-  'onNodeContextMenu',
-  'onChange',
-  'onCanvasDblClick',
-] as const
-
-export type DiagramEventHandlersContext = RequiredOrNull<LikeC4DiagramEventHandlers<aux.Any>> & {
-  handlersRef: RefObject<LikeC4DiagramEventHandlers<aux.Any>>
-}
-
-const DiagramEventHandlersReactContext = createContext<DiagramEventHandlersContext>({
-  ...mapToObj(HandlerNames, (name) => [name, null]),
-  handlersRef: {
-    current: {},
-  },
-})
-
-export function DiagramEventHandlers<A extends aux.Any>({
-  handlers,
-  children,
-}: PropsWithChildren<{ handlers: LikeC4DiagramEventHandlers<A> }>) {
-  const handlersRef = useSyncedRef(handlers)
-
-  const deps = HandlerNames.map((name) => isFunction(handlers[name]))
-
-  const value = useMemo((): DiagramEventHandlersContext => ({
-    ...mapToObj(HandlerNames, (name) => {
-      if (handlersRef.current[name]) {
-        // @ts-expect-error TODO: fix this
-        return [name, (...args: any[]) => handlersRef.current[name]?.(...args)]
-      }
-      return [name, null]
-    }),
-    handlersRef,
-  }), [handlersRef, ...deps])
-
-  return (
-    <DiagramEventHandlersReactContext.Provider value={value}>
-      {children}
-    </DiagramEventHandlersReactContext.Provider>
-  )
-}
-
-export function useDiagramEventHandlers(): DiagramEventHandlersContext {
-  return useContext(DiagramEventHandlersReactContext)
-}
-
-export function useDiagramEventHandlersRef<A extends aux.Any = aux.Any>(): RefObject<LikeC4DiagramEventHandlers<A>> {
-  return useContext(DiagramEventHandlersReactContext).handlersRef
-}

package/src/context/DiagramFeatures.tsx

@@ -1,141 +0,0 @@
-import type { ExclusiveUnion } from '@likec4/core/types'
-import { shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, createContext, useContext, useEffect, useState } from 'react'
-import { mapToObj } from 'remeda'
-
-const FeatureNames = [
-  'Controls',
-  'ReadOnly',
-  'FocusMode',
-  'NavigateTo',
-  'ElementDetails',
-  'RelationshipDetails',
-  'RelationshipBrowser',
-  'Search',
-  'NavigationButtons',
-  'Notations',
-  'DynamicViewWalkthrough',
-  'EdgeEditing',
-  'ViewTitle',
-  'FitView',
-  /**
-   * Running in VSCode
-   */
-  'Vscode',
-  'ElementTags',
-] as const
-export type FeatureName = typeof FeatureNames[number]
-
-type CustomFeatures = {
-  enableControls: 'next' | boolean
-}
-
-export type EnabledFeatures = {
-  [P in `enable${FeatureName}`]: P extends keyof CustomFeatures ? CustomFeatures[P] : boolean
-}
-
-export const AllDisabled: EnabledFeatures = mapToObj(
-  FeatureNames,
-  (name) => [`enable${name}`, false] as const,
-)
-const DiagramFeaturesContext = createContext<EnabledFeatures>(AllDisabled)
-
-const validate = (features: EnabledFeatures) => {
-  let {
-    enableReadOnly,
-    enableEdgeEditing,
-    ...rest
-  } = features
-
-  if (enableReadOnly) {
-    enableEdgeEditing = false
-  }
-
-  return {
-    enableReadOnly,
-    enableEdgeEditing,
-    ...rest,
-  }
-}
-
-export function DiagramFeatures({
-  children,
-  features,
-  overrides,
-}: PropsWithChildren<
-  ExclusiveUnion<{
-    features: {
-      features: EnabledFeatures
-    }
-    overrides: {
-      overrides: Partial<EnabledFeatures>
-    }
-  }>
->) {
-  const outerScope = useContext(DiagramFeaturesContext)
-  const [scope, setScope] = useState(outerScope)
-
-  useEffect(
-    () => {
-      setScope(current => {
-        const next = validate({
-          ...outerScope,
-          ...features,
-          ...overrides,
-        })
-        return shallowEqual(current, next) ? current : next
-      })
-    },
-    [outerScope, features, overrides],
-  )
-
-  return (
-    <DiagramFeaturesContext.Provider value={scope}>
-      {children}
-    </DiagramFeaturesContext.Provider>
-  )
-}
-
-DiagramFeatures.Overlays = ({ children }: PropsWithChildren) => {
-  return (
-    <DiagramFeatures
-      overrides={{
-        enableControls: false,
-        enableReadOnly: true,
-        enableEdgeEditing: false,
-      }}>
-      {children}
-    </DiagramFeatures>
-  )
-}
-
-export function useEnabledFeatures(): EnabledFeatures {
-  return useContext(DiagramFeaturesContext)
-}
-
-export function IfEnabled({
-  feature,
-  children,
-  and = true,
-}: PropsWithChildren<{ feature: FeatureName; and?: boolean }>) {
-  const enabled = useEnabledFeatures()[`enable${feature}`] === true
-  return enabled && and ? <>{children}</> : null
-}
-
-export function IfNotEnabled({ feature, children }: PropsWithChildren<{ feature: FeatureName }>) {
-  const notEnabled = useEnabledFeatures()[`enable${feature}`] !== true
-  return notEnabled ? <>{children}</> : null
-}
-
-export function IfReadOnly({ children }: PropsWithChildren) {
-  const isReadOnly = useEnabledFeatures()[`enableReadOnly`] === true
-  return isReadOnly ? <>{children}</> : null
-}
-
-export function IfNotReadOnly({ children }: PropsWithChildren) {
-  const isReadOnly = useEnabledFeatures()[`enableReadOnly`] === true
-  if (isReadOnly) {
-    return null
-  }
-  return <>{children}</>
-}

package/src/context/EnsureMantine.tsx

@@ -1,25 +0,0 @@
-import { MantineContext, MantineProvider } from '@mantine/core'
-import { type PropsWithChildren, useContext, useEffect } from 'react'
-
-type EnsureMantineProps = PropsWithChildren<{}>
-
-export function EnsureMantine({ children }: EnsureMantineProps) {
-  const mantineCtx = useContext(MantineContext)
-
-  useEffect(() => {
-    if (!mantineCtx) {
-      console.warn('LikeC4Diagram must be a child of MantineProvider')
-    }
-  }, [])
-
-  if (!mantineCtx) {
-    return (
-      <MantineProvider defaultColorScheme="auto">
-        {children}
-      </MantineProvider>
-    )
-  }
-
-  return <>{children}</>
-}
-EnsureMantine.displayName = 'EnsureMantine'

package/src/context/FramerMotionConfig.tsx

@@ -1,25 +0,0 @@
-import { useMantineStyleNonce } from '@mantine/core'
-import { domMax, LazyMotion, MotionConfig } from 'motion/react'
-import { type PropsWithChildren } from 'react'
-
-export const FramerMotionConfig = ({
-  reducedMotion = 'user',
-  children,
-}: PropsWithChildren<{
-  /**
-   * If true, will respect the device prefersReducedMotion setting by switching
-   * transform animations off.
-   *
-   * @public
-   */
-  reducedMotion?: 'always' | 'never' | 'user'
-}>) => {
-  const nonce = useMantineStyleNonce()?.()
-  return (
-    <LazyMotion features={domMax} strict>
-      <MotionConfig reducedMotion={reducedMotion} {...nonce && { nonce }}>
-        {children}
-      </MotionConfig>
-    </LazyMotion>
-  )
-}

package/src/context/IconRenderer.tsx

@@ -1,117 +0,0 @@
-import type { ElementShape } from '@likec4/core'
-import { cx as clsx } from '@likec4/styles/css'
-import {
-  type Icon,
-  type IconProps,
-  IconBrowser,
-  IconCylinder,
-  IconDeviceMobile,
-  IconRectangularPrism,
-  IconReorder,
-  IconUser,
-} from '@tabler/icons-react'
-import {
-  type ForwardRefExoticComponent,
-  type PropsWithChildren,
-  type ReactNode,
-  type RefAttributes,
-  createContext,
-  useContext,
-} from 'react'
-import type { ElementIconRenderer } from '../LikeC4Diagram.props'
-
-const IconRendererContext = createContext<ElementIconRenderer | null>(null)
-
-export function IconRendererProvider({
-  value,
-  children,
-}: PropsWithChildren<{ value: ElementIconRenderer | null }>) {
-  const outerScope = useContext(IconRendererContext)
-  if (outerScope) {
-    return <>{children}</>
-  }
-  return (
-    <IconRendererContext.Provider value={value}>
-      {children}
-    </IconRendererContext.Provider>
-  )
-}
-
-export function IconRenderer({
-  element,
-  className,
-}: {
-  element?: {
-    id: string
-    title: string
-    icon?: string | null | undefined
-  }
-  className: string
-}) {
-  const RenderIcon = useContext(IconRendererContext)
-  if (!element || !element.icon || element.icon === 'none') {
-    return null
-  }
-  let icon: ReactNode
-  if (
-    element.icon.startsWith('http://') || element.icon.startsWith('https://')
-  ) {
-    icon = <img src={element.icon} alt={element.title} />
-  } else if (RenderIcon) {
-    icon = <RenderIcon node={element} />
-  }
-
-  if (!icon) {
-    return null
-  }
-  return (
-    <div
-      className={clsx(
-        className,
-        'likec4-element-icon',
-      )}
-      data-likec4-icon={element.icon}
-    >
-      {icon}
-    </div>
-  )
-}
-
-const ShapeIcons = {
-  browser: IconBrowser,
-  cylinder: IconCylinder,
-  mobile: IconDeviceMobile,
-  person: IconUser,
-  queue: IconReorder,
-  rectangle: IconRectangularPrism,
-  storage: IconCylinder,
-} satisfies Record<ElementShape, ForwardRefExoticComponent<IconProps & RefAttributes<Icon>>>
-
-export function IconOrShapeRenderer({
-  element,
-  className,
-}: {
-  element: {
-    id: string
-    title: string
-    shape: ElementShape
-    icon?: string | null | undefined
-  }
-  className: string
-}) {
-  const icon = <IconRenderer element={element} className={className} />
-  if (icon) {
-    return icon
-  }
-  const ShapeIcon = ShapeIcons[element.shape]
-  return (
-    <div
-      className={clsx(
-        className,
-        'likec4-shape-icon',
-      )}
-    >
-      <ShapeIcon />
-    </div>
-  )
-}

package/src/context/ReduceGraphics.tsx

@@ -1,42 +0,0 @@
-import { createSafeContext } from '@mantine/core'
-import { useStore } from '@nanostores/react'
-import { type WritableAtom, atom } from 'nanostores'
-import { type PropsWithChildren, createContext, useContext, useRef } from 'react'
-
-const ReduceGraphicsModeCtx = createContext<boolean | null>(null)
-/**
- * Hook to determine if reduced graphics mode is enabled.
- */
-export function useIsReducedGraphics() {
-  const isReduced = useContext(ReduceGraphicsModeCtx)
-  if (isReduced === null) {
-    console.warn('ReduceGraphicsMode is not provided')
-  }
-  return isReduced ?? false
-}
-
-const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext<WritableAtom<boolean>>(
-  'PanningAtomSafeCtx is not provided',
-)
-
-export {
-  usePanningAtom,
-}
-
-export function ReduceGraphicsContext({ reduceGraphics, children }: PropsWithChildren<{ reduceGraphics: boolean }>) {
-  const $isPanningRef = useRef<WritableAtom<boolean>>(null)
-  if (!$isPanningRef.current) {
-    $isPanningRef.current = atom(reduceGraphics)
-  }
-  return (
-    <PanningAtomSafeCtx value={$isPanningRef.current}>
-      <ReduceGraphicsModeCtx.Provider value={reduceGraphics}>
-        {children}
-      </ReduceGraphicsModeCtx.Provider>
-    </PanningAtomSafeCtx>
-  )
-}
-
-export function useIsPanning() {
-  return useStore(usePanningAtom())
-}