Reorganise components for exporting (#72)

packages/webui/src/App.tsx

@@ -1,5 +1,5 @@
-import Header from '@/components/Header';
-import MainDisplay from '@/components/MainDisplay';
+import Header from '@/components/ui/Header';
+import MainDisplay from '@/components/ui/MainDisplay';
 import ApplicationContextProvider from '@/context/ApplicationContext';
 
 export default function App() {

packages/webui/src/components/Authorization.test.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import Authorization from './Authorization';
 
-jest.mock('@/components/ui', () => ({
+jest.mock('@/components', () => ({
   Code: function ({ children, ...props }: any) {
     return <div {...props}>{children}</div>;
   },

packages/webui/src/components/Authorization.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { HiChevronDown, HiChevronUp, HiCode, HiDotsHorizontal } from 'react-icons/hi';
 
-import { Code, IconButton, JsonDisplay } from '@/components/ui';
+import { Code, IconButton, JsonDisplay } from '@/components';
 import { safeParseJson, tw } from '@/utils';
 
 enum TokenType {

packages/webui/src/components/KeyValueList.test.tsx

@@ -2,7 +2,7 @@ import { cleanup, render, within } from '@testing-library/react';
 
 import KeyValueList, { KeyValuePair } from './KeyValueList';
 
-jest.mock('@/components/ui/Fields', () => ({
+jest.mock('@/components/Fields', () => ({
   Field: function MockField({ label, children }: React.PropsWithChildren<{ label: string }>) {
     return (
       <div data-test-id="mock-field">

packages/webui/src/components/KeyValueList.tsx

@@ -1,4 +1,4 @@
-import { Field } from '@/components/ui';
+import { Field } from './Fields';
 
 export type KeyValuePair = [string, any];
 

packages/webui/src/components/ui/index.ts → packages/webui/src/components/index.ts

@@ -1,12 +1,15 @@
 /* istanbul ignore file */
 
+export { default as Authorization } from './Authorization';
+export { default as Button } from './Button';
 export { default as Code } from './Code';
 export { default as DateTime } from './DateTime';
 export { default as DropDown } from './DropDown';
 export { default as Fields, Field } from './Fields';
 export { default as IconButton } from './IconButton';
 export { default as Input } from './Input';
 export { default as JsonDisplay } from './JsonDisplay';
+export { default as KeyValueList } from './KeyValueList';
 export { default as Label } from './Label';
 export { default as Loading } from './Loading';
 export { default as SearchInput } from './SearchInput';

packages/webui/src/components/ConnectionStatus.test.tsx → packages/webui/src/components/ui/ConnectionStatus.test.tsx

@@ -12,7 +12,7 @@ jest.mock('react-icons/hi', () => ({
     return <>Mock HiStatusOnline component</>;
   },
 }));
-jest.mock('@/components/ui', () => ({
+jest.mock('@/components', () => ({
   Loading: function MockLoading() {
     return <>Mock Loading component</>;
   },

packages/webui/src/components/ConnectionStatus.tsx → packages/webui/src/components/ui/ConnectionStatus.tsx

@@ -1,6 +1,6 @@
 import { HiStatusOffline, HiStatusOnline } from 'react-icons/hi';
 
-import { Loading } from '@/components/ui';
+import { Loading } from '@/components';
 import useApplication from '@/hooks/useApplication';
 
 export default function ConnectionStatus() {

packages/webui/src/components/DebugToolbar.tsx → packages/webui/src/components/ui/DebugToolbar.tsx

@@ -1,10 +1,9 @@
 import { useCallback } from 'react';
 
+import Button from '@/components/Button';
 import useApplication from '@/hooks/useApplication';
 import mockData from '@/testing/mockTraces';
 
-import Button from './ui/Button';
-
 export default function DebugToolbar() {
   const { collector } = useApplication();
 

packages/webui/src/components/FiltersAndActions.test.tsx → packages/webui/src/components/ui/FiltersAndActions.test.tsx

@@ -1,13 +1,13 @@
 import { act, cleanup, fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { DropDownItem } from '@/components/DropDown';
 import { setupMockSystems } from '@/testing/mockSystems';
 import { setUseApplicationData } from '@/testing/mockUseApplication';
 
 import FiltersAndActions from './FiltersAndActions';
-import { DropDownItem } from './ui/DropDown';
 
-jest.mock('@/components/ui', () => ({
+jest.mock('@/components', () => ({
   DropDown: function ({ items, onChange }: any) {
     return (
       <select

packages/webui/src/components/FiltersAndActions.tsx → packages/webui/src/components/ui/FiltersAndActions.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { HiTrash } from 'react-icons/hi';
 
-import { DropDown, IconButton, SearchInput } from '@/components/ui';
+import { DropDown, IconButton, SearchInput } from '@/components';
 import useApplication from '@/hooks/useApplication';
 import { getDefaultSystem, getRegisteredSystems } from '@/systems/registration';
 

packages/webui/src/components/Header.test.tsx → packages/webui/src/components/ui/Header.test.tsx

@@ -3,21 +3,21 @@ import { cleanup, render } from '@testing-library/react';
 import Header from './Header';
 
 jest.mock(
-  '@/components/ConnectionStatus',
+  '@/components/ui/ConnectionStatus',
   () =>
     function MockConnectionStatus() {
       return <div data-test-id="mock-connection-status">Mock ConnectionStatus component</div>;
     },
 );
 jest.mock(
-  '@/components/DebugToolbar',
+  '@/components/ui/DebugToolbar',
   () =>
     function MockDebugToolbar() {
       return <div data-test-id="mock-debug-toolbar">Mock DebugToolbar component</div>;
     },
 );
 jest.mock(
-  '@/components/FiltersAndActions',
+  '@/components/ui/FiltersAndActions',
   () =>
     function MockFiltersAndActions() {
       return <div data-test-id="mock-filters-and-actions">Mock FiltersAndActions component</div>;

packages/webui/src/components/MainDisplay.test.tsx → packages/webui/src/components/ui/MainDisplay.test.tsx

@@ -5,14 +5,14 @@ import { setUseApplicationData } from '@/testing/mockUseApplication';
 import MainDisplay from './MainDisplay';
 
 jest.mock(
-  '@/components/TraceDetail',
+  '@/components/ui/TraceDetail',
   () =>
     function MockTraceDetail() {
       return <div data-test-id="mock-trace-detail">Mock TraceDetail component</div>;
     },
 );
 jest.mock(
-  '@/components/TraceList',
+  '@/components/ui/TraceList',
   () =>
     function MockTraceList() {
       return <div data-test-id="mock-trace-list">Mock TraceList component</div>;

packages/webui/src/components/MainDisplay.tsx → packages/webui/src/components/ui/MainDisplay.tsx

@@ -1,5 +1,5 @@
-import TraceDetail from '@/components/TraceDetail';
-import TraceList from '@/components/TraceList';
+import TraceDetail from '@/components/ui/TraceDetail';
+import TraceList from '@/components/ui/TraceList';
 import useApplication from '@/hooks/useApplication';
 
 export default function MainDisplay() {

packages/webui/src/components/QueryParams.tsx → packages/webui/src/components/ui/QueryParams.tsx

@@ -1,8 +1,7 @@
+import KeyValueList from '@/components/KeyValueList';
 import { Trace } from '@/types';
 import { pathAndQuery } from '@/utils';
 
-import KeyValueList from './KeyValueList';
-
 export default function QueryParams({ trace }: { trace: Trace }) {
   const [, qs] = pathAndQuery(trace);
   const urlSearchParams = new URLSearchParams(qs);

packages/webui/src/components/RequestHeaders.test.tsx → packages/webui/src/components/ui/RequestHeaders.test.tsx

@@ -1,8 +1,8 @@
 import { cleanup, render } from '@testing-library/react';
 
+import Authorization from '@/components/Authorization';
 import { Trace } from '@/types';
 
-import Authorization from './Authorization';
 import RequestHeaders from './RequestHeaders';
 
 const mockKeyValueListComponent = jest.fn();

packages/webui/src/components/RequestHeaders.tsx → packages/webui/src/components/ui/RequestHeaders.tsx

@@ -1,9 +1,8 @@
+import Authorization from '@/components/Authorization';
+import KeyValueList from '@/components/KeyValueList';
 import { Trace } from '@/types';
 import { cloneHeaders } from '@/utils';
 
-import Authorization from './Authorization';
-import KeyValueList from './KeyValueList';
-
 export default function RequestHeaders({ trace }: { trace: Trace }) {
   const requestHeaders = trace.http?.requestHeaders;
   if (!requestHeaders || Object.keys(requestHeaders).length === 0) return null;

packages/webui/src/components/ResponseHeaders.test.tsx → packages/webui/src/components/ui/ResponseHeaders.test.tsx

@@ -1,8 +1,8 @@
 import { cleanup, render } from '@testing-library/react';
 
+import Authorization from '@/components/Authorization';
 import { Trace } from '@/types';
 
-import Authorization from './Authorization';
 import ResponseHeaders from './ResponseHeaders';
 
 const mockKeyValueListComponent = jest.fn();

packages/webui/src/components/ResponseHeaders.tsx → packages/webui/src/components/ui/ResponseHeaders.tsx

@@ -1,9 +1,8 @@
+import Authorization from '@/components/Authorization';
+import KeyValueList from '@/components/KeyValueList';
 import { Trace } from '@/types';
 import { cloneHeaders } from '@/utils';
 
-import Authorization from './Authorization';
-import KeyValueList from './KeyValueList';
-
 export default function ResponseHeaders({ trace }: { trace: Trace }) {
   const responseHeaders = trace.http?.responseHeaders;
   if (!responseHeaders || Object.keys(responseHeaders).length === 0) return null;

packages/webui/src/components/TraceDetail.test.tsx → packages/webui/src/components/ui/TraceDetail.test.tsx

@@ -14,7 +14,7 @@ import { Trace } from '@/types';
 
 import TraceDetail from './TraceDetail';
 
-jest.mock('@/components/ui', () => ({
+jest.mock('@/components', () => ({
   Code: function ({ children }: any) {
     return <>Mock Code component: {children}</>;
   },
@@ -42,23 +42,23 @@ jest.mock('@/components/ui', () => ({
 }));
 
 jest.mock(
-  '@/components/QueryParams',
+  '@/components/ui/QueryParams',
   () =>
     function MockQueryParams({ trace, ...props }: any) {
       return <div {...props}>Mock QueryParams component: {trace.id}</div>;
     },
 );
 
 jest.mock(
-  '@/components/RequestHeaders',
+  '@/components/ui/RequestHeaders',
   () =>
     function MockRequestHeaders({ trace, ...props }: any) {
       return <div {...props}>Mock RequestHeaders component: {trace.id}</div>;
     },
 );
 
 jest.mock(
-  '@/components/ResponseHeaders',
+  '@/components/ui/ResponseHeaders',
   () =>
     function MockResponseHeaders({ trace, ...props }: any) {
       return <div {...props}>Mock ResponseHeaders component: {trace.id}</div>;

packages/webui/src/components/TraceDetail.tsx → packages/webui/src/components/ui/TraceDetail.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 
-import { Code, DateTime, Field, Fields, JsonDisplay, Loading, Section, XmlDisplay } from '@/components/ui';
+import { Code, DateTime, Field, Fields, JsonDisplay, Loading, Section, XmlDisplay } from '@/components';
 import useApplication from '@/hooks/useApplication';
 import {
   SystemRequestDetailsComponent,

packages/webui/src/components/TraceList.test.tsx → packages/webui/src/components/ui/TraceList.test.tsx

@@ -16,7 +16,7 @@ jest.mock('@/systems', () => ({
   },
 }));
 
-jest.mock('@/components/ui', () => ({
+jest.mock('@/components', () => ({
   Loading: function MockLoading() {
     return <>Mock Loading component</>;
   },

packages/webui/src/components/TraceList.tsx → packages/webui/src/components/ui/TraceList.tsx

@@ -1,6 +1,6 @@
 import { HiOutlineEmojiSad, HiOutlineLightningBolt, HiStatusOnline } from 'react-icons/hi';
 
-import { Loading } from '@/components/ui';
+import { Loading } from '@/components';
 import useApplication from '@/hooks/useApplication';
 import { ListDataComponent } from '@/systems';
 import { Trace } from '@/types';

packages/webui/src/systems/GraphQL.test.tsx

@@ -6,7 +6,7 @@ import { Trace } from '@/types';
 import GraphQLSystem from './GraphQL';
 
 jest.mock(
-  '@/components/ui/Code',
+  '@/components/Code',
   () =>
     function MockCode({ children, ...props }: any) {
       return <div {...props}>{children}</div>;

packages/webui/src/systems/GraphQL.tsx

@@ -2,7 +2,7 @@
 // can be implemented and registered from the application using envt to send
 // network traces
 
-import { Code, Field, Fields } from '@/components/ui';
+import { Code, Field, Fields } from '@/components';
 import { System, Trace } from '@/types';
 import { safeParseJson } from '@/utils';
 

packages/webui/src/systems/Sanity.test.tsx

@@ -6,7 +6,7 @@ import { Trace } from '@/types';
 import SanitySystem from './Sanity';
 
 jest.mock(
-  '@/components/ui/Code',
+  '@/components/Code',
   () =>
     function MockCode({ children, ...props }: any) {
       return <div {...props}>{children}</div>;

packages/webui/src/systems/Sanity.tsx

@@ -2,7 +2,7 @@
 // can be implemented and registered from the application using envt to send
 // network traces
 
-import { Code, Field, Fields } from '@/components/ui';
+import { Code, Field, Fields } from '@/components';
 import { System, Trace } from '@/types';
 import { safeParseJson } from '@/utils';
 

packages/webui/src/systems/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 
-import TraceRequestData from '@/components/TraceRequestData';
+import TraceRequestData from '@/components/ui/TraceRequestData';
 import { System, Trace, TraceRowData } from '@/types';
 import { pathAndQuery } from '@/utils';
 

packages/webui/src/systems/systems.test.tsx

@@ -1,7 +1,7 @@
 import { cleanup, render } from '@testing-library/react';
 import { ReactElement } from 'react';
 
-import { TraceRequestDataProps } from '@/components/TraceRequestData';
+import { TraceRequestDataProps } from '@/components/ui/TraceRequestData';
 import { setupMockSystems } from '@/testing/mockSystems';
 import mockTraces from '@/testing/mockTraces';
 import { Trace } from '@/types';
@@ -18,7 +18,7 @@ import {
 jest.mock('@/systems/registration');
 
 jest.mock(
-  '@/components/TraceRequestData',
+  '@/components/ui/TraceRequestData',
   () =>
     function MockTraceRequestData({ iconPath, hostName, path, data }: TraceRequestDataProps) {
       return (