@likec4/diagram 1.26.2 → 1.27.1

package/src/bundle/LikeC4View.tsx

@@ -0,0 +1,196 @@
+import { memo, useState } from 'react'
+import { ShadowRoot } from './ShadowRoot'
+
+import type { DiagramView, ViewId } from '@likec4/core'
+import { cx } from '@likec4/styles/css'
+import { ActionIcon, Box } from '@mantine/core'
+import { shallowEqual } from '@mantine/hooks'
+import { IconX } from '@tabler/icons-react'
+import { isBoolean } from 'remeda'
+import { FramerMotionConfig } from '../context/FramerMotionConfig'
+import { LikeC4Diagram } from '../LikeC4Diagram'
+import { useLikeC4Model } from '../likec4model/useLikeC4Model'
+import { Overlay } from '../overlays/overlay/Overlay'
+import type { LikeC4ViewProps } from './LikeC4View.props'
+import { cssInteractive, useColorScheme, useShadowRootStyle } from './styles.css'
+import { ErrorMessage, ViewNotFound } from './ViewNotFound'
+
+export function LikeC4View<
+  ViewId extends string = string,
+  Tag = string,
+  Kind = string,
+>({
+  viewId,
+  ...props
+}: LikeC4ViewProps<ViewId, Tag, Kind>) {
+  const likec4model = useLikeC4Model()
+  const view = likec4model?.findView(viewId)
+
+  if (!likec4model) {
+    return (
+      <ErrorMessage>
+        LikeC4Model not found. Make sure you have LikeC4ModelProvider.
+      </ErrorMessage>
+    )
+  }
+  if (likec4model.type !== 'layouted') {
+    return (
+      <ErrorMessage>
+        LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model.
+      </ErrorMessage>
+    )
+  }
+
+  if (!view || !view.isDiagram()) {
+    return <ViewNotFound viewId={viewId} />
+  }
+
+  return <LikeC4ViewInner view={view.$view} {...props} />
+}
+
+type LikeC4ViewInnerProps = Omit<LikeC4ViewProps<any, any, any>, 'viewId'> & {
+  view: DiagramView
+}
+const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
+  view,
+  className,
+  pannable = false,
+  zoomable = false,
+  keepAspectRatio = true,
+  colorScheme: explicitColorScheme,
+  injectFontCss = true,
+  controls = false,
+  fitView = true,
+  fitViewPadding = 0.1,
+  background = 'transparent',
+  browser = true,
+  showDiagramTitle = false,
+  showNavigationButtons = false,
+  showNotations = false,
+  enableFocusMode = false,
+  enableDynamicViewWalkthrough = enableFocusMode,
+  enableElementDetails = false,
+  enableRelationshipBrowser = enableElementDetails,
+  enableRelationshipDetails = enableRelationshipBrowser,
+  reduceGraphics = 'auto',
+  mantineTheme,
+  styleNonce,
+  style,
+  reactFlowProps = {},
+  ...props
+}) => {
+  const likec4model = useLikeC4Model(true, 'layouted')
+  const colorScheme = useColorScheme(explicitColorScheme)
+
+  const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view)
+
+  const [browserViewId, onNavigateTo] = useState(null as ViewId | null)
+
+  const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null
+
+  const notations = view.notation?.elements ?? []
+  const hasNotations = notations.length > 0
+
+  let nonce
+  if (typeof styleNonce === 'string') {
+    nonce = styleNonce
+  } else if (typeof styleNonce === 'function') {
+    nonce = styleNonce()
+  }
+
+  const isBrowserEnabled = browser !== false
+
+  const browserProps = isBoolean(browser) ? {} : browser
+
+  return (
+    <>
+      <style
+        type="text/css"
+        nonce={nonce}
+        dangerouslySetInnerHTML={{
+          __html: cssstyle,
+        }} />
+      <ShadowRoot
+        {...shadowRootProps}
+        injectFontCss={injectFontCss}
+        theme={mantineTheme}
+        colorScheme={colorScheme}
+        styleNonce={styleNonce}
+        className={cx(
+          'likec4-view',
+          className,
+        )}
+        style={style}>
+        <FramerMotionConfig>
+          <LikeC4Diagram
+            view={view as any}
+            readonly
+            pannable={pannable}
+            zoomable={zoomable}
+            background={background}
+            fitView={fitView}
+            fitViewPadding={fitViewPadding}
+            showDiagramTitle={showDiagramTitle}
+            showNotations={showNotations && hasNotations}
+            enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
+            showNavigationButtons={showNavigationButtons}
+            experimentalEdgeEditing={false}
+            enableFocusMode={enableFocusMode}
+            enableRelationshipDetails={enableRelationshipDetails}
+            enableElementDetails={enableElementDetails}
+            enableRelationshipBrowser={enableRelationshipBrowser}
+            controls={controls}
+            nodesDraggable={false}
+            reduceGraphics={reduceGraphics}
+            className={cx(isBrowserEnabled && cssInteractive)}
+            // We may have multiple embedded views on the same page
+            // so we don't want enable search and hotkeys
+            enableSearch={false}
+            {...isBrowserEnabled && {
+              onNavigateTo: onNavigateTo,
+              onCanvasClick: () => onNavigateTo(view.id),
+              onNodeClick: () => onNavigateTo(view.id),
+            }}
+            reactFlowProps={reactFlowProps}
+            {...props}
+          />
+          {browserView && (
+            <Overlay onClose={() => onNavigateTo(null)}>
+              <LikeC4Diagram
+                view={browserView}
+                background="dots"
+                onNavigateTo={to => onNavigateTo(to as ViewId)}
+                enableDynamicViewWalkthrough
+                enableFocusMode
+                enableRelationshipBrowser
+                enableElementDetails
+                enableRelationshipDetails
+                enableSearch
+                controls
+                readonly
+                fitView
+                fitViewPadding={fitViewPadding}
+                {...props}
+                {...browserProps}
+                showNotations={(browserProps.showNotations ?? true) &&
+                  (browserView.notation?.elements.length ?? 0) > 0}
+              />
+              <Box pos="absolute" top={'1rem'} right={'1rem'}>
+                <ActionIcon
+                  variant="default"
+                  color="gray"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onNavigateTo(null)
+                  }}>
+                  <IconX />
+                </ActionIcon>
+              </Box>
+            </Overlay>
+          )}
+        </FramerMotionConfig>
+      </ShadowRoot>
+    </>
+  )
+}, shallowEqual)
+LikeC4ViewInner.displayName = 'LikeC4ViewInner'

package/src/bundle/ReactLikeC4.tsx

@@ -0,0 +1,148 @@
+import type { DiagramView, WhereOperator } from '@likec4/core'
+import { type CSSProperties } from 'react'
+import { ShadowRoot } from './ShadowRoot'
+
+import { cx } from '@likec4/styles/css'
+import { isFunction, isString } from 'remeda'
+import { type LikeC4DiagramProps, LikeC4Diagram } from '../LikeC4Diagram'
+import type { OnNavigateTo } from '../LikeC4Diagram.props'
+import { useLikeC4Model } from '../likec4model/useLikeC4Model'
+import { useColorScheme, useShadowRootStyle } from './styles.css'
+import { ErrorMessage, ViewNotFound } from './ViewNotFound'
+
+export type ReactLikeC4Props<
+  ViewId = string,
+  Tag = string,
+  Kind = string,
+> = Omit<LikeC4DiagramProps, 'view' | 'where' | 'onNavigateTo'> & {
+  viewId: ViewId
+
+  /**
+   * Keep aspect ratio of the diagram
+   * Disable if you need to manage the viewport (use className)
+   *
+   * @default true
+   */
+  keepAspectRatio?: boolean | undefined
+
+  /**
+   * By 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
+
+  style?: CSSProperties | undefined
+
+  where?: WhereOperator<Tag, Kind> | undefined
+
+  onNavigateTo?: OnNavigateTo<ViewId> | undefined
+
+  mantineTheme?: any
+
+  /** Function to generate nonce attribute added to all generated `<style />` tags */
+  styleNonce?: string | (() => string) | undefined
+}
+
+export function ReactLikeC4<
+  ViewId extends string = string,
+  Tag = string,
+  Kind = string,
+>({
+  viewId,
+  ...props
+}: ReactLikeC4Props<ViewId, Tag, Kind>) {
+  const likec4model = useLikeC4Model()
+  const view = likec4model?.findView(viewId)
+
+  if (!likec4model) {
+    return (
+      <ErrorMessage>
+        LikeC4Model not found. Make sure you have LikeC4ModelProvider.
+      </ErrorMessage>
+    )
+  }
+
+  if (!view) {
+    return <ViewNotFound viewId={viewId} />
+  }
+
+  if (!view.isDiagram()) {
+    return (
+      <ErrorMessage>
+        LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model.
+      </ErrorMessage>
+    )
+  }
+
+  return <ReactLikeC4Inner view={view.$view} {...props} />
+}
+
+type ReactLikeC4InnerProps = Omit<ReactLikeC4Props<any, any, any>, 'viewId'> & {
+  view: DiagramView
+}
+function ReactLikeC4Inner({
+  className,
+  view,
+  colorScheme: explicitColorScheme,
+  injectFontCss = true,
+  keepAspectRatio = true,
+  showNotations = true,
+  onNavigateTo,
+  background = 'transparent',
+  style,
+  mantineTheme,
+  styleNonce,
+  ...props
+}: ReactLikeC4InnerProps) {
+  const colorScheme = useColorScheme(explicitColorScheme)
+
+  const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view)
+
+  const notations = view.notation?.elements ?? []
+  const hasNotations = notations.length > 0
+
+  let nonce
+  if (isString(styleNonce)) {
+    nonce = styleNonce
+  } else if (isFunction(styleNonce)) {
+    nonce = styleNonce()
+  }
+
+  return (
+    <>
+      <style
+        type="text/css"
+        nonce={nonce}
+        dangerouslySetInnerHTML={{ __html: cssstyle }}
+      />
+      <ShadowRoot
+        {...shadowRootProps}
+        injectFontCss={injectFontCss}
+        theme={mantineTheme}
+        colorScheme={colorScheme}
+        styleNonce={styleNonce}
+        className={cx(
+          'likec4-view',
+          className,
+        )}
+        style={style}>
+        <LikeC4Diagram
+          view={view as any}
+          showNotations={showNotations && hasNotations}
+          onNavigateTo={onNavigateTo as any}
+          background={background}
+          {...props}
+        />
+      </ShadowRoot>
+    </>
+  )
+}
+ReactLikeC4.displayName = 'GenericReactLikeC4'

package/src/bundle/ShadowRoot.tsx

@@ -0,0 +1,60 @@
+import { css, cx } from '@likec4/styles/css'
+import { type MantineThemeOverride, MantineProvider } from '@mantine/core'
+import { type HTMLAttributes, useCallback, useRef } from 'react'
+import root from 'react-shadow'
+import { isDefined } from 'remeda'
+import { DefaultTheme, useBundledStyleSheet } from './styles.css'
+
+const Root = root['div']!
+
+type ShadowRootProps = HTMLAttributes<HTMLDivElement> & {
+  injectFontCss?: boolean | undefined
+  styleNonce?: string | (() => string) | undefined
+  mode?: 'open' | 'closed'
+  delegatesFocus?: boolean
+  colorScheme?: 'light' | 'dark' | undefined
+  theme?: MantineThemeOverride | undefined
+}
+
+export function ShadowRoot({
+  children,
+  theme = DefaultTheme,
+  injectFontCss = true,
+  styleNonce,
+  colorScheme,
+  ...props
+}: ShadowRootProps) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce)
+  const getRootElement = useCallback(() => rootRef.current ?? undefined, [rootRef])
+
+  let getStyleNonce
+  if (isDefined(styleNonce)) {
+    getStyleNonce = typeof styleNonce === 'function' ? styleNonce : () => styleNonce
+  }
+
+  return (
+    <Root ssr={false} styleSheets={styleSheets} {...props}>
+      <div
+        ref={rootRef}
+        {...(colorScheme && { 'data-mantine-color-scheme': colorScheme })}
+        className={cx(
+          'likec4-shadow-root',
+          css({
+            display: 'contents',
+          }),
+        )}
+      >
+        <MantineProvider
+          {...(colorScheme && { forceColorScheme: colorScheme })}
+          defaultColorScheme={'auto'}
+          getRootElement={getRootElement}
+          {...getStyleNonce && { getStyleNonce }}
+          cssVariablesSelector={'.likec4-shadow-root'}
+          theme={theme}>
+          {children}
+        </MantineProvider>
+      </div>
+    </Root>
+  )
+}

package/src/bundle/ViewNotFound.tsx

@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react'
+
+export const ErrorMessage = ({ children }: PropsWithChildren) => (
+  <div
+    style={{
+      margin: '1rem 0',
+    }}>
+    <div
+      style={{
+        margin: '0 auto',
+        display: 'inline-block',
+        padding: '2rem',
+        background: 'rgba(250,82,82,.15)',
+        color: '#ffa8a8',
+      }}>
+      {children}
+    </div>
+  </div>
+)
+
+export const ViewNotFound = ({ viewId }: { viewId: string }) => (
+  <ErrorMessage>
+    View <code>{viewId}</code> not found
+  </ErrorMessage>
+)

package/src/bundle/font.css

@@ -0,0 +1,251 @@
+/* ibm-plex-sans-latin-400-normal */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff2) format("woff2"),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff) format("woff");
+  unicode-range:
+    U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02BB-02BC,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+2000-206F,
+    U+20AC,
+    U+2122,
+    U+2191,
+    U+2193,
+    U+2212,
+    U+2215,
+    U+FEFF,
+    U+FFFD;
+}
+
+/* ibm-plex-sans-latin-500-normal */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src:
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff2) format("woff2"),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff) format("woff");
+  unicode-range:
+    U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02BB-02BC,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+2000-206F,
+    U+20AC,
+    U+2122,
+    U+2191,
+    U+2193,
+    U+2212,
+    U+2215,
+    U+FEFF,
+    U+FFFD;
+}
+
+/* ibm-plex-sans-latin-600-normal */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src:
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-normal.woff2) format("woff2"),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-normal.woff) format("woff");
+  unicode-range:
+    U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02BB-02BC,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+2000-206F,
+    U+20AC,
+    U+2122,
+    U+2191,
+    U+2193,
+    U+2212,
+    U+2215,
+    U+FEFF,
+    U+FFFD;
+}
+
+/* ibm-plex-sans-cyrillic-400-normal */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-400-normal.woff2) format("woff2"),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-400-normal.woff) format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* ibm-plex-sans-cyrillic-500-normal */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src:
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-500-normal.woff2) format("woff2"),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-500-normal.woff) format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* ibm-plex-sans-cyrillic-600-normal */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src:
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-600-normal.woff2) format("woff2"),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-600-normal.woff) format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* ibm-plex-sans-cyrillic-ext-400-normal */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-400-normal.woff2) format("woff2"),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-400-normal.woff) format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* ibm-plex-sans-cyrillic-ext-500-normal */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src:
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-500-normal.woff2) format("woff2"),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-500-normal.woff) format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* ibm-plex-sans-cyrillic-ext-600-normal */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src:
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-600-normal.woff2) format("woff2"),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-600-normal.woff) format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* ibm-plex-sans-latin-ext-400-normal */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-400-normal.woff2) format("woff2"),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-400-normal.woff) format("woff");
+  unicode-range:
+    U+0100-02BA,
+    U+02BD-02C5,
+    U+02C7-02CC,
+    U+02CE-02D7,
+    U+02DD-02FF,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+1D00-1DBF,
+    U+1E00-1E9F,
+    U+1EF2-1EFF,
+    U+2020,
+    U+20A0-20AB,
+    U+20AD-20C0,
+    U+2113,
+    U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+/* ibm-plex-sans-latin-ext-500-normal */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src:
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-500-normal.woff2) format("woff2"),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-500-normal.woff) format("woff");
+  unicode-range:
+    U+0100-02BA,
+    U+02BD-02C5,
+    U+02C7-02CC,
+    U+02CE-02D7,
+    U+02DD-02FF,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+1D00-1DBF,
+    U+1E00-1E9F,
+    U+1EF2-1EFF,
+    U+2020,
+    U+20A0-20AB,
+    U+20AD-20C0,
+    U+2113,
+    U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+/* ibm-plex-sans-latin-ext-600-normal */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src:
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-600-normal.woff2) format("woff2"),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-600-normal.woff) format("woff");
+  unicode-range:
+    U+0100-02BA,
+    U+02BD-02C5,
+    U+02C7-02CC,
+    U+02CE-02D7,
+    U+02DD-02FF,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+1D00-1DBF,
+    U+1E00-1E9F,
+    U+1EF2-1EFF,
+    U+2020,
+    U+20A0-20AB,
+    U+20AD-20C0,
+    U+2113,
+    U+2C60-2C7F,
+    U+A720-A7FF;
+}

package/src/bundle/index.ts

@@ -0,0 +1,7 @@
+export { LikeC4View } from './LikeC4View'
+export type { LikeC4ViewProps } from './LikeC4View.props'
+export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4'
+
+export { LikeC4ModelProvider } from './LikeC4ModelProvider'
+
+export { ViewNotFound } from './ViewNotFound'

package/src/bundle/react-dom-server-mock.ts

@@ -0,0 +1,3 @@
+export const renderToString = (_view: any) => {
+  throw new Error('LikeC4View is not available SSR')
+}