@redocly/theme 0.1.1 → 0.1.4

package/src/JsonViewer/JsonViewer.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { JsonViewer } from './JsonViewer';
+
+export default {
+  title: 'JsonViewer',
+  component: JsonViewer,
+} as ComponentMeta<typeof JsonViewer>;
+
+const data = {
+  id: '600dc3b5d617e547a0e74cb9',
+  name: 'Mitchell Fitzgerald',
+  about: 'lorem ipsum',
+  address: '48 Avenue, City, North',
+  company: 'Test',
+  bio: null,
+  nicknames: [
+    'Mitch',
+    'Fitz',
+    { title: 'MitFitz', createdAt: new Date('2022-04-19T11:46:00.019Z') },
+  ],
+  age: 27,
+  isBanned: true,
+  link: 'https://google.com',
+  emptyArray: [],
+  empty: {},
+  contacts: {
+    email: 'test@mail.com',
+    phone: {
+      code: '+1',
+      rest: '999',
+    },
+  },
+};
+
+const Template: ComponentStory<typeof JsonViewer> = (args) => <JsonViewer {...args} />;
+
+export const ExpandLevel1 = Template.bind({});
+ExpandLevel1.args = {
+  jsonSampleExpandLevel: 1,
+  data,
+};
+
+export const ExpandLevel3 = Template.bind({});
+ExpandLevel3.args = {
+  jsonSampleExpandLevel: 3,
+  data,
+};
+
+export const WithoutFoldingButtons = Template.bind({});
+WithoutFoldingButtons.args = {
+  jsonSampleExpandLevel: 3,
+  data: {
+    message: 'success',
+  },
+};

package/src/JsonViewer/JsonViewer.tsx

@@ -0,0 +1,130 @@
+import React, { memo, useRef, ReactElement } from 'react';
+import styled from 'styled-components';
+
+import { CopyButtonWrapper } from '../CopyButton';
+import { SampleControls, SamplesControlButton } from '../SamplesPanelControls';
+import { jsonToHTML } from '../utils';
+import { useMount, useUnmount } from '../hooks';
+import { CodeBlock } from '../CodeBlock';
+
+import { jsonStyles } from './styled';
+
+export interface JsonProps {
+  data: any;
+  className?: string;
+  jsonSampleExpandLevel: number;
+}
+
+function JsonComponent({ data, jsonSampleExpandLevel, className }: JsonProps): JSX.Element {
+  const node = useRef<HTMLDivElement | null>(null);
+
+  useMount(() => {
+    node?.current?.addEventListener('click', clickListener);
+  });
+
+  useUnmount(() => {
+    node?.current?.removeEventListener('click', clickListener);
+  });
+
+  const expandAll = () => {
+    const elements = node?.current?.getElementsByClassName('collapsible');
+    for (const collapsed of Array.prototype.slice.call(elements)) {
+      const parentNode = collapsed.parentNode as Element;
+      if (!parentNode) continue;
+      parentNode.classList.remove('collapsed');
+      parentNode.querySelector('.collapser')?.setAttribute('aria-label', 'collapse');
+    }
+  };
+
+  const collapseAll = () => {
+    const elements = node?.current?.getElementsByClassName('collapsible');
+    // skip first item to avoid collapsing whole object/array
+    const elementsArr = Array.prototype.slice.call(elements, 1);
+
+    for (const expanded of elementsArr) {
+      const parentNode = expanded.parentNode as Element;
+      if (!parentNode) continue;
+      parentNode.classList.add('collapsed');
+      parentNode.querySelector('.collapser')?.setAttribute('aria-label', 'expand');
+    }
+  };
+
+  const collapseElement = (target: HTMLElement) => {
+    if (target.parentElement && target.className === 'collapser') {
+      const collapsed = target.parentElement.getElementsByClassName('collapsible')[0];
+      if (collapsed?.parentElement?.classList.contains('collapsed')) {
+        collapsed.parentElement.classList.remove('collapsed');
+        target.setAttribute('aria-label', 'collapse');
+      } else {
+        collapsed?.parentElement?.classList.add('collapsed');
+        target.setAttribute('aria-label', 'expand');
+      }
+    }
+  };
+
+  const clickListener = (event: MouseEvent) => {
+    collapseElement(event.target as HTMLElement);
+  };
+
+  const renderInner = ({ renderCopyButton }: { renderCopyButton: () => ReactElement }) => {
+    const showFoldingButtons =
+      data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
+
+    return (
+      <JsonViewerWrap data-cy="json-viewer">
+        <SampleControls data-cy="buttons">
+          {renderCopyButton()}
+          {showFoldingButtons && (
+            <>
+              <SamplesControlButton onClick={expandAll} data-cy="expand-all">
+                Expand all
+              </SamplesControlButton>
+              <SamplesControlButton onClick={collapseAll} data-cy="collapse-all">
+                Collapse all
+              </SamplesControlButton>
+            </>
+          )}
+        </SampleControls>
+        <StyledCodeBlock
+          className={className}
+          ref={node}
+          dangerouslySetInnerHTML={{
+            __html: jsonToHTML(data, jsonSampleExpandLevel),
+          }}
+        />
+      </JsonViewerWrap>
+    );
+  };
+
+  return (
+    <CopyButtonWrapper data-cy="copy-button" data={data}>
+      {renderInner}
+    </CopyButtonWrapper>
+  );
+}
+
+export const Json = memo<JsonProps>(JsonComponent);
+
+export const JsonViewer = styled(Json)<JsonProps>`
+  ${jsonStyles};
+`;
+
+export const JsonViewerWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  &:hover > ${SampleControls} {
+    opacity: 1;
+  }
+`;
+
+export const StyledCodeBlock = styled(CodeBlock)`
+  flex: 1;
+
+  code {
+    font-family: var(--code-font-family);
+    font-size: 14px;
+    line-height: 18px;
+  }
+`;

package/src/JsonViewer/__tests__/JsonViewer.test.tsx

@@ -0,0 +1,82 @@
+import { fireEvent, screen } from '@testing-library/react';
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+import { JsonViewer } from '../JsonViewer';
+
+const data = {
+  id: '600dc3b5d617e547a0e74cb9',
+  name: 'Mitchell Fitzgerald',
+  about: 'lorem ipsum',
+  address: '48 Avenue, City, North',
+  company: 'Test',
+  bio: null,
+  nicknames: [
+    'Mitch',
+    'Fitz',
+    { title: 'MitFitz', createdAt: new Date('2022-04-19T11:46:00.019Z') },
+  ],
+  age: 27,
+  isBanned: true,
+  link: 'https://google.com',
+  emptyArray: [],
+  empty: {},
+  contacts: {
+    email: 'test@mail.com',
+    phone: {
+      code: '+1',
+      rest: '999',
+    },
+  },
+};
+
+describe('JsonViewer', () => {
+  it('renders', () => {
+    const { container } = renderWithTheme(<JsonViewer data={data} jsonSampleExpandLevel={2} />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders without folding buttons', () => {
+    renderWithTheme(<JsonViewer data={{ a: 1, b: 2 }} jsonSampleExpandLevel={2} />);
+
+    expect(screen.queryByText('Collapse all')).toBeNull();
+    expect(screen.queryByText('Expand all')).toBeNull();
+  });
+
+  it('"collapse all" works', () => {
+    const { container } = renderWithTheme(<JsonViewer data={data} jsonSampleExpandLevel={2} />);
+
+    fireEvent.click(screen.getByText(/Collapse all/i));
+
+    expect(container.firstChild).toMatchSnapshot();
+    expect(screen.getByText(/test@mail\.com/i)).not.toBeVisible();
+  });
+
+  it('"expand all" works', () => {
+    const { container } = renderWithTheme(<JsonViewer data={data} jsonSampleExpandLevel={1} />);
+
+    fireEvent.click(screen.getByText(/Expand all/i));
+
+    expect(container.firstChild).toMatchSnapshot();
+    expect(screen.getByText(/test@mail\.com/i)).toBeVisible();
+  });
+
+  it('expands node on click', () => {
+    const { container } = renderWithTheme(<JsonViewer data={data} jsonSampleExpandLevel={1} />);
+    const element = container.getElementsByClassName('collapser')[1];
+
+    fireEvent.click(element);
+
+    expect(screen.getByText(/"Mitch"/i)).toBeVisible();
+  });
+
+  it('collapses node on click', () => {
+    const { container } = renderWithTheme(<JsonViewer data={data} jsonSampleExpandLevel={2} />);
+    const element = container.getElementsByClassName('collapser')[1];
+
+    fireEvent.click(element);
+
+    expect(screen.getByText(/"Mitch"/i)).not.toBeVisible();
+  });
+});