feat: show container size (#21)

* feat: show container size

* fix: units

* fix: add test

* feat: add initially collapsed and tests

* fix: review

Author: Raubzeug

src/ReactUnipika/ReactUnipika.tsx

@@ -22,6 +22,8 @@ export interface ReactUnipikaProps {
     toolbarStickyTop?: number;
     renderToolbar?: (props: ToolbarProps) => React.ReactNode;
     collapseIconType?: CollapseIconType;
+    showContainerSize?: boolean;
+    initiallyCollapsed?: boolean;
 }
 
 const defaultUnipikaSettings = {
@@ -45,6 +47,8 @@ export function ReactUnipika({
     toolbarStickyTop = 0,
     renderToolbar,
     collapseIconType,
+    showContainerSize,
+    initiallyCollapsed,
 }: ReactUnipikaProps) {
     const convertedValue = React.useMemo(() => {
         // TODO: fix me later
@@ -98,6 +102,8 @@ export function ReactUnipika({
                     toolbarStickyTop={toolbarStickyTop}
                     renderToolbar={renderToolbar}
                     collapseIconType={collapseIconType}
+                    showContainerSize={showContainerSize}
+                    initiallyCollapsed={initiallyCollapsed}
                 />
             ) : (
                 <pre

src/ReactUnipika/__snapshots__/ReactUnipika.visual.test.tsx-snapshots/ReactUnipika-json-with-container-size-collapsed-initially-dark-chromium-1-chromium-linux.png

@@ -37,3 +37,26 @@ export const WithContentAbove: StoryObj<ReactUnipikaProps> = {
         );
     },
 };
+
+export const WithContainerSize: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: data,
+        showContainerSize: true,
+    },
+};
+
+export const WithContainerSizeCollapsed: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: data,
+        showContainerSize: true,
+        initiallyCollapsed: true,
+    },
+};
+
+export const WithContainerSizeYson: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: data,
+        settings: {format: 'yson'},
+        showContainerSize: true,
+    },
+};