fix: typo initalCollapsedDepth > initialCollapsedDepth (#85)

Author: alissonmbr

CHANGELOG.md

@@ -1,4 +1,12 @@
+## 2.0.4
+
+_Oct 22, 2024_
+
+- fix: typo initalCollapsedDepth > initialCollapsedDepth
+- chore: improved jsdoc for the props
+
 ## 2.0.3
+
 _Oct 20, 2024_
 
 - fix: xml validation

README.md

@@ -60,7 +60,7 @@ When the xml is invalid, invalidXml component will be returned.\
 Allow collapse/expand tags by click on them. When tag is collapsed its content and attributes are hidden.\
 **Default**: false
 
-### initalCollapsedDepth (number)
+### initialCollapsedDepth (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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-xml-viewer",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Simple xml viewer component for React",
   "author": "alissonmbr",
   "license": "MIT",

src/components/XMLViewer.tsx

@@ -15,12 +15,18 @@ export default function XMLViewer(props: XMLViewerProps): JSX.Element {
     indentSize = 2,
     invalidXml,
     initalCollapsedDepth,
+    initialCollapsedDepth,
   } = props;
   const [theme, setTheme] = useState<Theme>(() => ({ ...defaultTheme, ...customTheme }));
   const { json, valid } = useXMLViewer(xml);
   const context = useMemo(
-    () => ({ theme, collapsible, indentSize, initalCollapsedDepth }),
-    [theme, collapsible, indentSize, initalCollapsedDepth],
+    () => ({
+      theme,
+      collapsible,
+      indentSize,
+      initialCollapsedDepth: initialCollapsedDepth ?? initalCollapsedDepth,
+    }),
+    [theme, collapsible, indentSize, initalCollapsedDepth, initialCollapsedDepth],
   );
 
   useEffect(() => {

src/components/__tests__/XMLViewer.test.tsx

@@ -145,7 +145,7 @@ describe('XMLViewer', () => {
         </level1>
       </root>
     `
-    render(<XMLViewer xml={xml} collapsible initalCollapsedDepth={1} />);
+    render(<XMLViewer xml={xml} collapsible initialCollapsedDepth={1} />);
     expect(screen.getAllByText('root')).toHaveLength(2);
     expect(screen.getAllByText('level1')).toHaveLength(2);
     expect(screen.queryByText('this should be collapsed')).toBeNull();

src/components/types.ts

@@ -1,62 +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 in string format
+   * 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?: JSX.Element;
   /**
+   * 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;
 }

src/hooks/useCollapsible.ts

@@ -3,17 +3,17 @@ import _isNil from 'lodash/isNil';
 import { useEffect, useState } from 'react';
 
 export function useCollapsible(level: number) {
-  const { collapsible, initalCollapsedDepth } = useXMLViewerContext();
+  const { collapsible, initialCollapsedDepth } = useXMLViewerContext();
   const [collapsed, setCollapsed] = useState(() =>
-    _isNil(initalCollapsedDepth) || !collapsible ? false : level >= initalCollapsedDepth,
+    _isNil(initialCollapsedDepth) || !collapsible ? false : level >= initialCollapsedDepth,
   );
   const toggleCollapsed = () => setCollapsed((currentCollapsed) => !currentCollapsed);
 
   useEffect(() => {
     setCollapsed(
-      _isNil(initalCollapsedDepth) || !collapsible ? false : level >= initalCollapsedDepth,
+      _isNil(initialCollapsedDepth) || !collapsible ? false : level >= initialCollapsedDepth,
     );
-  }, [initalCollapsedDepth, level, collapsible]);
+  }, [initialCollapsedDepth, level, collapsible]);
 
   return {
     collapsed,

src/stories/XMLViewer.stories.tsx

@@ -69,7 +69,6 @@ const meta = {
   argTypes: {
     invalidXml: {
       table: {
-         
         disable: true,
       },
     },
@@ -85,6 +84,6 @@ export const Primary: Story = {
     indentSize: 2,
     collapsible: true,
     theme: defaultTheme,
-    initalCollapsedDepth: undefined
+    initialCollapsedDepth: undefined,
   },
 };

src/types/index.ts

@@ -17,5 +17,5 @@ export interface IXmlViewerContext {
   collapsible: boolean;
   indentSize: number;
   theme: Theme;
-  initalCollapsedDepth?: number;
+  initialCollapsedDepth?: number;
 }