@vertesia/ui 0.56.0 → 0.58.0

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

@@ -0,0 +1,32 @@
+import { SVGAttributes } from 'react';
+import { useXMLViewerContext } from '../../context/xml-viewer-context';
+
+export interface CollapseIconProps {
+  collapsed: boolean;
+}
+
+export function CollapseIcon(props: CollapseIconProps): React.ReactElement | null {
+  const { collapsible, theme } = useXMLViewerContext();
+  const { collapsed } = props;
+
+  return collapsible ? (
+    <span style={{ position: 'relative' }}>
+      <span style={{ position: 'absolute', right: '0', border: 0, padding: 0, background: 'none' }}>
+        <Caret
+          fill={theme.separatorColor}
+          style={{ transform: `rotate(${collapsed ? 0 : 90}deg)`, transition: 'transform 0.2s' }}
+        />
+      </span>
+    </span>
+  ) : null;
+}
+
+function Caret({ ...attrs }: SVGAttributes<SVGElement>): React.ReactElement {
+  return (
+    <svg width="16px" height="16px" viewBox="0 0 24 24" {...attrs}>
+      <path
+        d="M9 17.898C9 18.972 10.2649 19.546 11.0731 18.8388L17.3838 13.3169C18.1806 12.6197 18.1806 11.3801 17.3838 10.6829L11.0731 5.16108C10.2649 4.45388 9 5.02785 9 6.1018V17.898Z"
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { CollapseIcon } from '../../components/CollapseIcon';
+import { useXMLViewerContext } from '../../context/xml-viewer-context';
+import { useCollapsible } from '../../hooks/useCollapsible';
+
+export interface CommentTagProps {
+  indentation: string;
+  children: ReactNode;
+  isInline: boolean;
+  level: number;
+}
+
+export function CommentTag(props: CommentTagProps) {
+  const { indentation, children, isInline, level } = props;
+  const { theme } = useXMLViewerContext();
+  const { collapsed, buttonProps } = useCollapsible(level);
+
+  return (
+    <div style={{ color: theme.commentColor }}>
+      <span {...buttonProps}>
+        <span>{indentation}</span>
+        <CollapseIcon collapsed={collapsed} />
+        <span>{'<!-- '}</span>
+      </span>
+      {!collapsed && children}
+      {collapsed && '...'}
+      <span>{`${isInline || collapsed ? ' ' : indentation}-->`}</span>
+    </div>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { Attributes } from '../../components/Attributes';
+import { useXMLViewerContext } from '../../context/xml-viewer-context';
+import { AttributesObject } from '../../types';
+
+export interface DeclarationTagProps {
+  indentation: string;
+  tagKey: string;
+  attributes: AttributesObject;
+}
+
+export function DeclarationTag(props: DeclarationTagProps) {
+  const { indentation, tagKey, attributes } = props;
+  const { theme } = useXMLViewerContext();
+
+  return (
+    <div>
+      <span style={{ color: theme.separatorColor }}>{`${indentation}<?`}</span>
+      <span style={{ color: theme.tagColor }}>{`${tagKey.slice(1)}`}</span>
+      <Attributes attributes={attributes} />
+      <span style={{ color: theme.separatorColor }}>{'?>'}</span>
+    </div>
+  );
+}

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

@@ -0,0 +1,83 @@
+import { CDataTag } from '../../components/CDataTag';
+import { CommentTag } from '../../components/CommentTag';
+import { DeclarationTag } from '../../components/DeclarationTag';
+import { Tag } from '../../components/Tag';
+import { TextElement } from '../../components/TextElement';
+import { ATTRIBUTE_CDATA, ATTRIBUTE_COMMENT, ATTRIBUTE_TEXT, DECLARATION_TAG } from '../../constants';
+import { useXMLViewerContext } from '../../context/xml-viewer-context';
+import { getIndentationString, getTagProps, isInlineTextElement } from '../../helpers';
+import { Element } from '../../types';
+
+export interface ElementsProps {
+  elements: Element[];
+  level?: number;
+  isText?: boolean;
+}
+export function Elements(props: ElementsProps) {
+  const { elements, level = 0, isText = true } = props;
+  const { indentSize } = useXMLViewerContext();
+
+  if (!Array.isArray(elements) || elements.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {elements.map((element, index) => {
+        const { tagKey, attributes, subElements, type } = getTagProps(element);
+        const hasSiblings = elements.length > 1;
+        const indentation = getIndentationString(indentSize, level);
+        const key = `${level}-${index}`;
+        const isInline = isInlineTextElement(subElements);
+
+        switch (type) {
+          case ATTRIBUTE_TEXT:
+            return (
+              <TextElement
+                key={key}
+                text={subElements as string}
+                indentation={indentation}
+                hasSiblings={hasSiblings}
+                isText={isText}
+              />
+            );
+          case ATTRIBUTE_COMMENT:
+            return (
+              <CommentTag key={key} isInline={isInline} indentation={indentation} level={level}>
+                <Elements elements={subElements as Element[]} level={level + 1} isText={false} />
+              </CommentTag>
+            );
+          case ATTRIBUTE_CDATA:
+            return (
+              <CDataTag key={key} indentation={indentation} isInline={isInline}>
+                <Elements elements={subElements as Element[]} level={level + 1} isText={false} />
+              </CDataTag>
+            );
+          case DECLARATION_TAG:
+            return (
+              <DeclarationTag
+                key={key}
+                indentation={indentation}
+                tagKey={tagKey}
+                attributes={attributes}
+              />
+            );
+          default:
+            return (
+              <Tag
+                key={key}
+                indentation={indentation}
+                tagKey={tagKey}
+                attributes={attributes}
+                isInline={isInline}
+                hasChildren={subElements.length > 0}
+                level={level}
+              >
+                <Elements elements={subElements as Element[]} level={level + 1} />
+              </Tag>
+            );
+        }
+      })}
+    </>
+  );
+}

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

@@ -0,0 +1,3 @@
+export function InvalidXml() {
+  return <div>Invalid XML!</div>;
+}

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,53 @@
+import { isEqual } from 'lodash-es';
+import { useEffect, useMemo, useState } from 'react';
+import { 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;
+  const [theme, setTheme] = useState<Theme>(() => ({ ...defaultTheme, ...customTheme }));
+  const { json, valid } = useXMLViewer(xml);
+  const context = useMemo(
+    () => ({
+      theme,
+      collapsible,
+      indentSize,
+      initialCollapsedDepth: initialCollapsedDepth ?? initalCollapsedDepth,
+    }),
+    [theme, collapsible, indentSize, initalCollapsedDepth, initialCollapsedDepth],
+  );
+
+  useEffect(() => {
+    setTheme((currentTheme) => {
+      const nextTheme = { ...defaultTheme, ...customTheme };
+      return isEqual(nextTheme, currentTheme) ? currentTheme : nextTheme;
+    });
+  }, [customTheme]);
+
+  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,17 @@
+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',
+};

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/lib/esm/components/index.js

@@ -1,3 +0,0 @@
-"use strict";
-// components impl
-//# sourceMappingURL=index.js.map

package/lib/esm/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";AAAA,kBAAkB"}

package/lib/vertesia-ui-components.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=vertesia-ui-components.js.map

package/lib/vertesia-ui-components.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vertesia-ui-components.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/src/components/index.ts

@@ -1 +0,0 @@
-// components impl