@likec4/diagram 1.26.1 → 1.27.0

package/src/base/primitives/element/ElementTitle.css.ts

@@ -1,155 +1,199 @@
-import { rem } from '@mantine/core'
-import { createVar, globalStyle, style } from '@vanilla-extract/css'
-import { calc } from '@vanilla-extract/css-utils'
-import { vars } from '../../../theme-vars'
-import { iconSize, paddingSize, textSize } from './vars.css'
+import { css, sva } from '@likec4/styles/css'
 
-export const hasIcon = style({})
+export const iconSize = '--icon-size'
 
-const textAlign = createVar('text-align')
-
-export { iconSize, paddingSize, textSize }
-
-export const title = style({
+const title = css.raw({
+  textStyle: 'likec4.node.primary',
   flex: '0 0 auto',
-  fontFamily: vars.element.font,
-  fontOpticalSizing: 'auto',
-  fontStyle: 'normal',
-  textAlign: textAlign,
-  fontWeight: 500,
-  fontSize: textSize,
-  lineHeight: 1.15,
-  textWrap: 'balance',
-  color: vars.element.hiContrast,
-  whiteSpaceCollapse: 'preserve-breaks',
+  textAlign: 'center',
+  color: 'likec4.palette.hiContrast',
 })
 
-export const description = style({
+const description = css.raw({
   flex: '0 1 auto',
-  fontFamily: vars.element.font,
-  fontOpticalSizing: 'auto',
-  fontStyle: 'normal',
-  fontWeight: 400,
-  fontSize: calc(textSize).multiply(0.74).toString(),
-  lineHeight: 1.2,
-  textAlign: textAlign,
-  textWrap: 'pretty',
-  color: vars.element.loContrast,
-  whiteSpaceCollapse: 'preserve-breaks',
+  textStyle: 'likec4.node.secondary',
+  color: 'likec4.palette.loContrast',
+  textAlign: 'center',
   textOverflow: 'ellipsis',
   overflow: 'hidden',
-  selectors: {
-    [`:where([data-likec4-shape-size="xs"]) &`]: {
-      display: 'none',
-    },
+  _shapeSizeXs: {
+    display: 'none',
+  },
+  _smallZoom: {
+    visibility: 'hidden',
   },
 })
 
-export const technology = style({
+const technology = css.raw({
   flex: '0 0 auto',
-  fontFamily: vars.element.font,
-  fontOpticalSizing: 'auto',
-  fontStyle: 'normal',
-  fontWeight: 400,
-  fontSize: calc(textSize).multiply(0.635).toString(),
+  textStyle: 'likec4.node.secondary',
+  color: 'likec4.palette.loContrast',
+  fontSize: `calc(var(--likec4-text-size) * 0.635)`,
   lineHeight: 1.125,
-  textAlign: textAlign,
+  textAlign: 'center',
   textWrap: 'balance',
   opacity: 0.92,
-  color: vars.element.loContrast,
-  selectors: {
-    [`:where([data-hovered='true']) &`]: {
-      opacity: 1,
-    },
-    [`:where([data-likec4-shape-size="xs"], [data-likec4-shape-size="sm"]) &`]: {
-      display: 'none',
-    },
+  _whenHovered: {
+    opacity: 1,
+  },
+  _shapeSizeXs: {
+    display: 'none',
+  },
+  _shapeSizeSm: {
+    display: 'none',
+  },
+  _smallZoom: {
+    visibility: 'hidden',
   },
 })
 
-export const elementDataContainer = style({
-  position: 'relative',
-  flex: '1',
-  height: 'fit-content',
-  width: 'fit-content',
-  margin: '0 auto',
+const varIconSize = `var(${iconSize})`
+export const elementIcon = css({
+  flex: `0 0 ${varIconSize}`,
+  height: varIconSize,
+  width: varIconSize,
   display: 'flex',
+  alignSelf: 'flex-start',
   alignItems: 'center',
   justifyContent: 'center',
-  flexDirection: 'row',
-  paddingTop: paddingSize,
-  paddingBottom: paddingSize,
-  paddingLeft: calc(paddingSize).add('8px').toString(),
-  paddingRight: calc(paddingSize).add('8px').toString(),
-  overflow: 'hidden',
-  gap: rem(12),
-  selectors: {
-    ':where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) &': {
-      paddingLeft: 46,
-      paddingRight: 16,
-    },
-    ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
-      paddingTop: 30,
-    },
-    ':where([data-likec4-shape="browser"]) &': {
-      paddingTop: 32,
-      paddingBottom: 28,
+  mixBlendMode: {
+    base: 'hard-light',
+    _reduceGraphicsOnPan: 'normal',
+  },
+  [`& svg, & img`]: {
+    width: '100%',
+    height: 'auto',
+    maxHeight: '100%',
+    pointerEvents: 'none',
+    filter: {
+      base: [
+        'drop-shadow(0 0 3px rgb(0 0 0 / 12%))',
+        'drop-shadow(0 1px 8px rgb(0 0 0 / 8%))',
+        'drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))',
+      ],
+      _reduceGraphicsOnPan: 'none',
     },
   },
-})
-globalStyle(`:where([data-likec4-shape-size="lg"], [data-likec4-shape-size="xl"]) ${elementDataContainer}`, {
-  gap: rem(16),
+  [`& img`]: {
+    objectFit: 'contain',
+  },
 })
 
-export const elementTextData = style({
-  height: 'fit-content',
-  width: 'fit-content',
-  flex: '0 1 auto',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'stretch',
-  justifyContent: 'center',
-  flexWrap: 'nowrap',
-  overflow: 'hidden',
-  gap: rem(8),
-  'vars': {
-    [textAlign]: 'center',
+export const elementTitle = sva({
+  slots: ['root', 'textContainer', 'title', 'description', 'technology'],
+  base: {
+    root: {
+      position: 'relative',
+      flex: '1',
+      height: 'fit-content',
+      width: 'fit-content',
+      margin: '0 auto',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+      paddingTop: 'var(--likec4-spacing)',
+      paddingBottom: 'var(--likec4-spacing)',
+      paddingLeft: 'calc(var(--likec4-spacing) + 8px)',
+      paddingRight: 'calc(var(--likec4-spacing) + 8px)',
+      overflow: 'hidden',
+      gap: '12px',
+      _shapeQueue: {
+        paddingLeft: '46px',
+        paddingRight: '16px',
+      },
+      _shapeMobile: {
+        paddingLeft: '46px',
+        paddingRight: '16px',
+      },
+      _shapeCylinder: {
+        paddingTop: '30px',
+      },
+      _shapeStorage: {
+        paddingTop: '30px',
+      },
+      _shapeBrowser: {
+        paddingTop: '32px',
+        paddingBottom: '28px',
+      },
+
+      _shapeSizeXs: {
+        [iconSize]: '24px',
+      },
+      _shapeSizeSm: {
+        [iconSize]: '36px',
+      },
+      _shapeSizeMd: {
+        [iconSize]: '60px',
+      },
+      _shapeSizeLg: {
+        [iconSize]: '82px',
+        gap: '16px',
+      },
+      _shapeSizeXl: {
+        [iconSize]: '90px',
+        gap: '16px',
+      },
+    },
+    textContainer: {
+      height: 'fit-content',
+      width: 'fit-content',
+      flex: '0 1 auto',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      justifyContent: 'center',
+      flexWrap: 'nowrap',
+      overflow: 'hidden',
+      gap: '8px',
+    },
+    title,
+    description,
+    technology,
   },
-  selectors: {
-    [`&:has(${description}):has(${technology})`]: {
-      gap: rem(6),
+  variants: {
+    hasIcon: {
+      false: {},
+      true: {
+        root: {
+          gap: '16px',
+        },
+        textContainer: {
+          minWidth: `calc(50% + ${varIconSize})`,
+          alignItems: 'flex-start',
+        },
+        title: {
+          textAlign: 'left',
+        },
+        description: {
+          textAlign: 'left',
+        },
+        technology: {
+          textAlign: 'left',
+        },
+      },
     },
-    [`:where(${hasIcon}) &`]: {
-      minWidth: `calc(50% + ${iconSize})`,
-      alignItems: 'flex-start',
-      'vars': {
-        [textAlign]: 'left',
+    hasDescription: {
+      false: {},
+      true: {},
+    },
+    hasTechnology: {
+      false: {},
+      true: {},
+    },
+  },
+  compoundVariants: [
+    {
+      hasDescription: true,
+      hasTechnology: true,
+      css: {
+        textContainer: {
+          gap: '6px',
+        },
       },
     },
+  ],
+  defaultVariants: {
+    hasIcon: false,
   },
 })
-
-export const elementIcon = style({
-  flex: `0 0 ${iconSize}`,
-  height: iconSize,
-  width: iconSize,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  mixBlendMode: 'hard-light',
-  alignSelf: 'flex-start',
-})
-globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
-  width: '100%',
-  height: 'auto',
-  maxHeight: '100%',
-  pointerEvents: 'none',
-  filter: `
-    drop-shadow(0 0 3px rgb(0 0 0 / 12%))
-    drop-shadow(0 1px 8px rgb(0 0 0 / 8%))
-    drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))
-  `,
-})
-globalStyle(`${elementIcon} img`, {
-  objectFit: 'contain',
-})

package/src/base/primitives/element/ElementTitle.tsx

@@ -1,13 +1,11 @@
 import { type DiagramNode } from '@likec4/core'
+import { cx } from '@likec4/styles/css'
 import { Box, Text } from '@mantine/core'
-import clsx from 'clsx'
-import { isNumber, isTruthy } from 'remeda'
+import { isEmpty, isNumber, isTruthy } from 'remeda'
 import { IconRenderer } from '../../../context/IconRenderer'
-import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
-import { getVarName } from '../../../utils/css'
 import type { NodeProps } from '../../types'
 import { nodeSizes } from './ElementNodeContainer'
-import * as css from './ElementTitle.css'
+import * as styles from './ElementTitle.css'
 
 type Data =
   & Pick<
@@ -26,8 +24,6 @@ type ElementTitleProps = NodeProps<Data> & {
   iconSize?: number
 }
 
-const varIconSize = getVarName(css.iconSize)
-
 export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
   const elementIcon = IconRenderer({
     element: {
@@ -35,29 +31,33 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
       title: data.title,
       icon: data.icon,
     },
-    className: css.elementIcon,
+    className: styles.elementIcon,
+  })
+  const classes = styles.elementTitle({
+    hasIcon: isTruthy(elementIcon),
+    hasDescription: !isEmpty(data.description ?? ''),
+    hasTechnology: !isEmpty(data.technology ?? ''),
   })
   const size = nodeSizes(data.style).size
   const isSm = size === 'sm'
   const isSmOrXs = isSm || size === 'xs'
   return (
     <Box
-      className={clsx(
-        css.elementDataContainer,
-        isTruthy(elementIcon) && css.hasIcon,
+      className={cx(
+        classes.root,
         'likec4-element',
       )}
       style={{
         ...isNumber(iconSize) && {
-          [varIconSize]: `${iconSize}px`,
+          [styles.iconSize]: `${iconSize}px`,
         },
       }}
     >
       {elementIcon}
-      <Box className={clsx(css.elementTextData, 'likec4-element-main-props')}>
+      <Box className={cx(classes.textContainer, 'likec4-element-main-props')}>
         <Text
           component="h3"
-          className={clsx(css.title, 'likec4-element-title')}
+          className={cx(classes.title, 'likec4-element-title')}
           lineClamp={isSmOrXs ? 2 : 3}>
           {data.title}
         </Text>
@@ -65,7 +65,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
         {data.technology && (
           <Text
             component="div"
-            className={clsx(css.technology, hiddenIfZoomTooSmall, 'likec4-element-technology')}>
+            className={cx(classes.technology, 'likec4-element-technology')}>
             {data.technology}
           </Text>
         )}
@@ -73,7 +73,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
         {data.description && (
           <Text
             component="div"
-            className={clsx(css.description, 'likec4-element-description')}
+            className={cx(classes.description, 'likec4-element-description')}
             lineClamp={isSmOrXs ? 3 : 5}>
             {data.description}
           </Text>

package/src/base/primitives/index.ts

@@ -7,6 +7,7 @@ export { customNode } from './customNode'
 export { EdgeActionButton } from './edge/EdgeActionButton'
 export { EdgeContainer } from './edge/EdgeContainer'
 export { EdgeLabel } from './edge/EdgeLabel'
+export { EdgeLabelContainer } from './edge/EdgeLabelContainer'
 export { arrowTypeToMarker, EdgeMarkers, type EdgeMarkerType } from './edge/EdgeMarkers'
 export { EdgePath } from './edge/EdgePath'
 export { ElementActionButtons } from './element/ElementActionButtons'

package/src/base/types.ts

@@ -167,3 +167,8 @@ export namespace Base {
     return (edge: E) => _setData(edge, arg1 as Partial<EdgeData>)
   }
 }
+
+// import type { ThemeColor } from '@likec4/core'
+// import type { ColorPalette as AllColorPalette } from '@likec4/styles/tokens'
+
+// export type ColorPalette = Extract<AllColorPalette, `likec4.${ThemeColor}` | `likec4.compound${number}.${ThemeColor}`>

package/src/bundle/LikeC4ModelProvider.tsx

@@ -0,0 +1,12 @@
+import type { JSX, PropsWithChildren } from 'react'
+import { LikeC4ModelProvider as LikeC4ModelProviderLib } from '../LikeC4ModelProvider'
+
+export type LikeC4ModelProviderProps = PropsWithChildren<{
+  /**
+   * The LikeC4 model to be provided to the context.
+   * TODO: refer to 'likec4/model'
+   */
+  likec4model: any
+}>
+
+export const LikeC4ModelProvider: (props: LikeC4ModelProviderProps) => JSX.Element = LikeC4ModelProviderLib

package/src/bundle/LikeC4View.props.ts

@@ -0,0 +1,249 @@
+import type { WhereOperator } from '@likec4/core'
+import type { CSSProperties } from 'react'
+import type { ElementIconRenderer, OverrideReactFlowProps } from '../LikeC4Diagram.props'
+
+export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
+  /**
+   * View to display.
+   */
+  viewId: ViewId
+
+  /**
+   * Enable/disable panning
+   * @default false
+   */
+  pannable?: boolean | undefined
+
+  /**
+   * Enable/disable zooming
+   * @default false
+   */
+  zoomable?: boolean | undefined
+
+  /**
+   * @default true
+   */
+  keepAspectRatio?: boolean | undefined
+
+  /**
+   * Background pattern
+   * @default 'transparent'
+   */
+  background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined
+
+  /**
+   * Click on the view opens a modal with browser.
+   * You can customize or disable the browser.
+   *
+   * @default true
+   */
+  browser?: boolean | LikeC4BrowserProps | undefined
+
+  /**
+   * @default - determined by the user's system preferences.
+   */
+  colorScheme?: 'light' | 'dark' | undefined
+
+  /**
+   * LikeC4 views are using 'IBM Plex Sans' font.
+   * By default, component injects the CSS to document head.
+   * Set to false if you want to handle the font yourself.
+   *
+   * @default true
+   */
+  injectFontCss?: boolean | undefined
+
+  /**
+   * Show/hide panel with top left controls,
+   * @default false
+   */
+  controls?: boolean | undefined
+
+  /**
+   * If set, initial viewport will show all nodes & edges
+   * @default true
+   */
+  fitView?: boolean | undefined
+
+  /**
+   * Seems like this is percentage of the view size
+   * @default 0.1
+   */
+  fitViewPadding?: number | undefined
+
+  /**
+   * Display diagram title / description
+   *
+   * @default false
+   */
+  showDiagramTitle?: boolean | undefined
+
+  /**
+   * Show back/forward navigation buttons
+   * @default false
+   */
+  showNavigationButtons?: undefined | boolean
+
+  /**
+   * Display notations of the view
+   * @default false
+   */
+  showNotations?: boolean | undefined
+
+  /**
+   * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+   * Conflicts with `browser` prop
+   *
+   * @default false
+   */
+  enableFocusMode?: boolean | undefined
+
+  /**
+   * If Walkthrough for dynamic views should be enabled
+   * @default enableFocusMode
+   */
+  enableDynamicViewWalkthrough?: boolean | undefined
+
+  /**
+   * Enable popup with element details
+   * @default false
+   */
+  enableElementDetails?: boolean | undefined
+
+  /**
+   * Experimental feature to browse relationships
+   *
+   * @default enableElementDetails
+   */
+  enableRelationshipBrowser?: boolean | undefined
+
+  /**
+   * Display dropdown with details on relationship's label click
+   * @default enableRelationshipBrowser
+   */
+  enableRelationshipDetails?: boolean | undefined
+
+  /**
+   * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+   *
+   * @default 'auto' - will be set to true if view is pannable and has more than 3000 * 2000 pixels
+   */
+  reduceGraphics?: 'auto' | boolean | undefined
+
+  where?: WhereOperator<Tag, Kind> | undefined
+
+  /**
+   * Override some react flow props
+   */
+  reactFlowProps?: OverrideReactFlowProps | undefined
+
+  className?: string | undefined
+  style?: CSSProperties | undefined
+
+  /**
+   * Override Mantine theme
+   */
+  mantineTheme?: any
+
+  /** Function to generate nonce attribute added to all generated `<style />` tags */
+  styleNonce?: string | (() => string) | undefined
+
+  /**
+   * Render custom icon for a node
+   * By default, if icon is http:// or https://, it will be rendered as an image
+   */
+  renderIcon?: ElementIconRenderer | undefined
+}
+
+export interface LikeC4BrowserProps {
+  /**
+   * Background pattern for the browser view.
+   * @default 'dots'
+   */
+  background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined
+
+  /**
+   * Seems like this is percentage of the view size
+   * @default 0.1
+   */
+  fitViewPadding?: number | undefined
+
+  /**
+   * Show/hide panel with top left controls,
+   * @default true
+   */
+  controls?: boolean | undefined
+
+  /**
+   * Display diagram title / description
+   *
+   * @default true
+   */
+  showDiagramTitle?: boolean | undefined
+
+  /**
+   * Show back/forward navigation buttons
+   * @default true
+   */
+  showNavigationButtons?: undefined | boolean
+
+  /**
+   * Enable search popup for elements and views
+   * @default true
+   */
+  enableSearch?: boolean | undefined
+
+  /**
+   * If double click on a node should enable focus mode
+   *
+   * @default true
+   */
+  enableFocusMode?: boolean | undefined
+
+  /**
+   * If Walkthrough for dynamic views should be enabled
+   * @default true
+   */
+  enableDynamicViewWalkthrough?: boolean | undefined
+
+  /**
+   * Enable popup with element details
+   * @default true
+   */
+  enableElementDetails?: boolean | undefined
+
+  /**
+   * Experimental feature to browse relationships
+   *
+   * @default enableElementDetails
+   */
+  enableRelationshipBrowser?: boolean | undefined
+
+  /**
+   * Display dropdown with details on relationship's label click
+   * @default enableRelationshipBrowser
+   */
+  enableRelationshipDetails?: boolean | undefined
+
+  /**
+   * Display notations of the view
+   * @default true
+   */
+  showNotations?: boolean | undefined
+
+  /**
+   * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+   *
+   * @default 'auto' - will be set to true if view is pannable and has more than 3000 * 2000 pixels
+   */
+  reduceGraphics?: 'auto' | boolean | undefined
+
+  className?: string | undefined
+
+  style?: CSSProperties | undefined
+
+  /**
+   * Override some react flow props
+   */
+  reactFlowProps?: OverrideReactFlowProps | undefined
+}