@vertesia/ui 0.24.0-dev.202601221707

package/src/widgets/xml-viewer/components/Tag/index.tsx

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { Attributes } from '../../components/Attributes';
+import { CollapseIcon } from '../../components/CollapseIcon';
+import { useXMLViewerContext } from '../../context/xml-viewer-context';
+import { hasAttributes } from '../../helpers';
+import { useCollapsible } from '../../hooks/useCollapsible';
+import { AttributesObject } from '../../types';
+
+export interface TagProps {
+  indentation: string;
+  tagKey: string;
+  attributes: AttributesObject;
+  children: ReactNode;
+  isInline: boolean;
+  hasChildren: boolean;
+  level: number;
+}
+
+export function Tag(props: TagProps) {
+  const { indentation, tagKey, attributes, children, isInline, hasChildren, level } = props;
+  const { collapsed, buttonProps } = useCollapsible(level);
+  const { theme } = useXMLViewerContext();
+
+  return (
+    <div>
+      <span {...buttonProps}>
+        <span>{indentation}</span>
+        <CollapseIcon collapsed={collapsed} />
+        <span style={{ color: theme.separatorColor }}>{'<'}</span>
+        <span style={{ color: theme.tagColor }}>{`${tagKey}`}</span>
+        {!collapsed && <Attributes attributes={attributes} />}
+        {collapsed && hasAttributes(attributes) && ' ...'}
+        <span style={{ color: theme.separatorColor }}>{!hasChildren ? ' />' : '>'}</span>
+      </span>
+      {hasChildren && (
+        <>
+          {!collapsed && children}
+          {collapsed && '...'}
+          <span style={{ color: theme.separatorColor }}>{`${isInline || collapsed ? '' : indentation
+            }</`}</span>
+          <span style={{ color: theme.tagColor }}>{`${tagKey}`}</span>
+          <span style={{ color: theme.separatorColor }}>{'>'}</span>
+        </>
+      )}
+    </div>
+  );
+}

package/src/widgets/xml-viewer/components/TextElement/index.tsx

@@ -0,0 +1,28 @@
+import { useXMLViewerContext } from '../../context/xml-viewer-context';
+import { hasBreakLines } from '../../helpers';
+
+export interface TextElementProps {
+  text: string;
+  hasSiblings: boolean;
+  indentation: string;
+  isText: boolean;
+}
+
+export function TextElement(props: TextElementProps) {
+  const { hasSiblings, text, indentation, isText } = props;
+  const { theme } = useXMLViewerContext();
+  const style = isText ? { color: theme.textColor } : undefined;
+
+  return hasBreakLines(text) || hasSiblings ? (
+    <div style={style}>
+      {text
+        .split('\n')
+        .filter((element) => !!element.trim())
+        .map((line, index) => (
+          <div key={`${index}`}>{`${indentation}${line.trim()}`}</div>
+        ))}
+    </div>
+  ) : (
+    <span style={style}>{text}</span>
+  );
+}

package/src/widgets/xml-viewer/components/XMLViewer.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useMemo, useState } from 'react';
+import { darkTheme, defaultTheme } from '../constants';
+import { XMLViewerContext } from '../context/xml-viewer-context';
+import useXMLViewer from '../hooks/useXMLViewer';
+import { Elements } from './Elements';
+import { InvalidXml } from './InvalidXml';
+import { Theme, XMLViewerProps } from './types';
+
+export function XMLViewer(props: XMLViewerProps): React.ReactNode {
+  const {
+    theme: customTheme,
+    xml,
+    collapsible = false,
+    indentSize = 2,
+    invalidXml,
+    initalCollapsedDepth,
+    initialCollapsedDepth,
+  } = props;
+
+  // Detect dark mode from document root class (set by ThemeProvider)
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    return document.documentElement.classList.contains('dark');
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(root.classList.contains('dark'));
+    });
+    observer.observe(root, { attributes: true, attributeFilter: ['class'] });
+    return () => observer.disconnect();
+  }, []);
+
+  // Compute theme based on dark mode, then apply custom overrides
+  const theme = useMemo<Theme>(() => {
+    const baseTheme = isDarkMode ? darkTheme : defaultTheme;
+    return { ...baseTheme, ...customTheme };
+  }, [isDarkMode, customTheme]);
+
+  const { json, valid } = useXMLViewer(xml);
+  const context = useMemo(
+    () => ({
+      theme,
+      collapsible,
+      indentSize,
+      initialCollapsedDepth: initialCollapsedDepth ?? initalCollapsedDepth,
+    }),
+    [theme, collapsible, indentSize, initalCollapsedDepth, initialCollapsedDepth],
+  );
+
+  if (!valid) {
+    return invalidXml ? invalidXml : <InvalidXml />;
+  }
+
+  return (
+    <XMLViewerContext.Provider value={context}>
+      <div
+        className="rxv-container"
+        style={{ whiteSpace: 'pre-wrap', fontFamily: theme.fontFamily, overflowWrap: 'break-word' }}
+      >
+        <Elements elements={json} />
+      </div>
+    </XMLViewerContext.Provider>
+  );
+}

package/src/widgets/xml-viewer/components/types.ts

@@ -0,0 +1,104 @@
+export interface Theme {
+  /**
+   * The tag name color (`<tag-name />`)
+   *
+   * @default #d43900
+   */
+  tagColor?: string;
+  /**
+   * The text color (`<tag>Text</tag>`)
+   *
+   * @default #333
+   */
+  textColor?: string;
+  /**
+   * The attribute key color (`<tag attribute-key="hello" />`)
+   *
+   * @default #2a7ab0
+   */
+  attributeKeyColor?: string;
+  /**
+   * The attribute value color (` <tag attr="Attribute value">`)
+   *
+   * @default #008000
+   */
+  attributeValueColor?: string;
+  /**
+   * The separators colors (`<, >, </, />, =, <?, ?>`)
+   *
+   * @default #333
+   */
+  separatorColor?: string;
+  /**
+   * The comment color (`<!-- this is a comment -->`)
+   *
+   * @default #aaa
+   */
+  commentColor?: string;
+  /**
+   * the cdata element color (`<![CDATA[some stuff]]>`)
+   *
+   * @default #1D781D
+   */
+  cdataColor?: string;
+  /**
+   * The font family
+   *
+   * @default monospace
+   */
+  fontFamily?: string;
+}
+
+export interface XMLViewerProps {
+  /**
+   * A xml string to prettify.
+   */
+  xml: string;
+  /**
+   * An object to customize the default theme.
+   *
+   * @default
+   * ```js
+   * {
+   *   tagColor: '#d43900',
+   *   textColor: '#333',
+   *   attributeKeyColor: '#2a7ab0',
+   *   attributeValueColor: '#008000',
+   *   separatorColor: '#333',
+   *   commentColor: '#aaa',
+   *   cdataColor: '#1d781d',
+   *   fontFamily: 'monospace',
+   * }
+   * ```
+   */
+  theme?: Theme;
+  /**
+   * The size of the indentation.
+   *
+   * @default 2
+   */
+  indentSize?: number;
+  /**
+   * When the xml is invalid, invalidXml component will be returned.
+   *
+   * @default <div>Invalid XML!</div>
+   */
+  invalidXml?: React.ReactElement;
+  /**
+   * Allow collapse/expand tags by click on them. When tag is collapsed its content and attributes are hidden.
+   *
+   * @default false
+   */
+  collapsible?: boolean;
+  /**
+   * @deprecated use the initialCollapsedDepth instead
+   */
+  initalCollapsedDepth?: number;
+  /**
+   * When the **collapsible** is true, this set the level that will be started as collapsed.
+   * For example, if you want to everything starts as collapsed, set 0.
+   *
+   * @default undefined
+   */
+  initialCollapsedDepth?: number;
+}

package/src/widgets/xml-viewer/constants/index.ts

@@ -0,0 +1,28 @@
+export const ATTRIBUTE_GROUP_KEY = ':@';
+export const ATTRIBUTE_TEXT = '#text';
+export const ATTRIBUTE_COMMENT = '#comment';
+export const ATTRIBUTE_CDATA = '#cdata';
+export const DECLARATION_TAG = 'DECLARATION_TAG';
+export const TAG = 'TAG';
+
+export const defaultTheme = {
+  tagColor: '#d43900',
+  textColor: '#333',
+  attributeKeyColor: '#2a7ab0',
+  attributeValueColor: '#008000',
+  separatorColor: '#333',
+  commentColor: '#aaa',
+  cdataColor: '#1d781d',
+  fontFamily: 'monospace',
+};
+
+export const darkTheme = {
+  attributeKeyColor: '#FFD700',
+  attributeValueColor: '#FF4500',
+  tagColor: '#87CEFA',
+  textColor: '#00FF00',
+  separatorColor: '#FFD700',
+  commentColor: '#BEBEBE',
+  cdataColor: '#33CC66',
+  fontFamily: 'monospace',
+};

package/src/widgets/xml-viewer/context/xml-viewer-context.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+import { defaultTheme } from '../constants';
+import { IXmlViewerContext } from '../types';
+
+const defaultState: IXmlViewerContext = {
+  theme: defaultTheme,
+  collapsible: false,
+  indentSize: 2,
+};
+
+export const XMLViewerContext = createContext<IXmlViewerContext>(defaultState);
+export const useXMLViewerContext = () => useContext(XMLViewerContext);

package/src/widgets/xml-viewer/helpers/index.ts

@@ -0,0 +1,56 @@
+import { omit } from 'lodash-es';
+import {
+  ATTRIBUTE_CDATA,
+  ATTRIBUTE_COMMENT,
+  ATTRIBUTE_GROUP_KEY,
+  ATTRIBUTE_TEXT,
+  DECLARATION_TAG,
+  TAG,
+} from '../constants';
+import { AttributesObject, Element, ElementObject } from '../types';
+
+export function getIndentationString(size: number, level: number) {
+  return new Array(level * size + 1).join(' ');
+}
+
+export function hasBreakLines(elements: Element[] | string) {
+  return typeof elements === 'string' && elements.includes('\n');
+}
+
+export function isInlineTextElement(elements: Element[] | string) {
+  if (typeof elements === 'string') {
+    return false;
+  }
+  return (
+    elements.length === 1 &&
+    ATTRIBUTE_TEXT in elements[0] &&
+    !hasBreakLines(elements[0][ATTRIBUTE_TEXT] as string)
+  );
+}
+
+export function getTagType(tagKey: string) {
+  switch (tagKey) {
+    case ATTRIBUTE_TEXT:
+    case ATTRIBUTE_CDATA:
+    case ATTRIBUTE_COMMENT:
+      return tagKey;
+    default:
+      return tagKey.startsWith('?') ? DECLARATION_TAG : TAG;
+  }
+}
+
+export function getTagProps(element: Element) {
+  const attributes = (element as ElementObject)[ATTRIBUTE_GROUP_KEY] as AttributesObject;
+  const elementWithoutAttributes = omit(element, ATTRIBUTE_GROUP_KEY) as Element;
+  const [[tagKey, subElements]] = Object.entries(elementWithoutAttributes);
+  const type = getTagType(tagKey);
+  return { attributes, tagKey, subElements, type };
+}
+
+export function hasAttributes(attributes: AttributesObject) {
+  if (!attributes) {
+    return false;
+  }
+
+  return Object.keys(attributes).length > 0;
+}

package/src/widgets/xml-viewer/hooks/useCollapsible.ts

@@ -0,0 +1,28 @@
+import { isNil } from 'lodash-es';
+import { useEffect, useState } from 'react';
+import { useXMLViewerContext } from '../context/xml-viewer-context';
+
+export function useCollapsible(level: number) {
+  const { collapsible, initialCollapsedDepth } = useXMLViewerContext();
+  const [collapsed, setCollapsed] = useState(() =>
+    isNil(initialCollapsedDepth) || !collapsible ? false : level >= initialCollapsedDepth,
+  );
+  const toggleCollapsed = () => setCollapsed((currentCollapsed) => !currentCollapsed);
+
+  useEffect(() => {
+    setCollapsed(
+      isNil(initialCollapsedDepth) || !collapsible ? false : level >= initialCollapsedDepth,
+    );
+  }, [initialCollapsedDepth, level, collapsible]);
+
+  return {
+    collapsed,
+    buttonProps: !collapsible
+      ? {}
+      : {
+        onClick: toggleCollapsed,
+        role: 'button',
+        style: { cursor: 'pointer' },
+      },
+  };
+}

package/src/widgets/xml-viewer/hooks/useXMLViewer.ts

@@ -0,0 +1,34 @@
+import { XMLParser, XMLValidator } from 'fast-xml-parser';
+import { useMemo } from 'react';
+import { ATTRIBUTE_CDATA, ATTRIBUTE_COMMENT } from '../constants';
+
+const parser = new XMLParser({
+  preserveOrder: true,
+  ignoreAttributes: false,
+  attributeNamePrefix: '',
+  allowBooleanAttributes: true,
+  commentPropName: ATTRIBUTE_COMMENT,
+  cdataPropName: ATTRIBUTE_CDATA,
+  parseTagValue: false,
+});
+
+export default function useXMLViewer(xml: string) {
+  return useMemo(() => {
+    try {
+      if (!XMLValidator.validate(xml)) {
+        throw new Error('Invalid XML!');
+      }
+
+      const json = parser.parse(xml);
+
+      if (typeof xml === 'string' && xml.trim().length > 0 && json.length === 0) {
+        throw new Error('Invalid XML!');
+      }
+
+      return { json, valid: true };
+    } catch (e) {
+      const error = e as Error;
+      return { json: null, valid: false, errorMessage: `Fail to parse: ${error.message}` };
+    }
+  }, [xml]);
+}

package/src/widgets/xml-viewer/index.ts

@@ -0,0 +1,2 @@
+export * from './components/XMLViewer';
+export * from './components/types.js';

package/src/widgets/xml-viewer/types/index.ts

@@ -0,0 +1,21 @@
+import { Theme } from '../components/types';
+import { ATTRIBUTE_TEXT } from '../constants';
+
+export interface ElementText {
+  [ATTRIBUTE_TEXT]: string;
+}
+
+export type AttributeValue = string | number | boolean;
+
+export type AttributesObject = Record<string, AttributeValue>;
+
+export type ElementObject = Record<string, AttributesObject | Element[]>;
+
+export type Element = ElementObject | ElementText;
+
+export interface IXmlViewerContext {
+  collapsible: boolean;
+  indentSize: number;
+  theme: Theme;
+  initialCollapsedDepth?: number;
+}

package/tsconfig.dist.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "declaration": true,
+        "declarationMap": true,
+        "jsx": "react-jsx",
+        "target": "ES2022",
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "rootDir": "./src",
+        "outDir": "./lib"
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "**/*.test.*",
+        "**/*.spec.*"
+    ]
+}