redux-connected-devtools 1.0.2 → 1.0.3

package/.env

@@ -1,2 +1,2 @@
 VITE_SERVER_DOMAIN=http://localhost
-VITE_BASE_PORT_PAYEM=3100
+VITE_BASE_PORT_GLI=3100

package/package.json

@@ -1,12 +1,11 @@
 {
     "name": "redux-connected-devtools",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "description": "redux-connected-devtools",
-    "main": "src/index.ts",
     "scripts": {
         "dev": "vite",
         "watch": "webpack --config webpack/webpack.dev.js --watch",
-        "build": "webpack --config webpack/webpack.prod.js",
+        "build": "vite build & tsc",
         "clean": "rimraf dist",
         "test": "npx jest",
         "style": "prettier --write \"src/**/*.{ts,tsx}\""
@@ -20,39 +19,54 @@
     "dependencies": {
         "@redux-devtools/extension": "^3.2.2",
         "bytes": "^3.1.2",
+        "classnames": "^2.3.2",
         "dotenv-flow": "^3.2.0",
-        "react": "^17.0.1",
-        "react-dom": "^17.0.2",
         "react-redux": "^7.2.6",
-        "react-window": "^1.8.6",
-        "redux-connected": "^0.0.90",
-        "redux-store-generator": "^0.9.74",
+        "react-window": "^1.8.8",
+        "redux-connected": "^0.0.103",
+        "redux-store-generator": "^0.9.89",
         "reselect": "^4.1.5",
+        "rollup-plugin-analyzer": "^4.0.0",
+        "shared-base": "^0.0.27",
         "styled-components": "^5.3.3",
         "tslib": "^2.3.1"
     },
+    "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
     "devDependencies": {
-        "@types/bytes": "^3.1.1",
         "@types/chrome": "0.0.158",
         "@types/jest": "^27.0.2",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
-        "@types/react-window": "^1.8.5",
         "@types/styled-components": "^5.1.24",
         "@vitejs/plugin-react": "^1.2.0",
         "copy-webpack-plugin": "^9.0.1",
         "glob": "^7.1.6",
         "jest": "^27.2.1",
         "prettier": "^2.2.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "rimraf": "^3.0.2 ",
         "ts-jest": "^27.0.5",
         "ts-loader": "^8.0.0",
-        "typescript": "^4.4.3 ",
+        "typescript": "^4.5.5",
         "vite": "^2.6.4",
-        "vite-plugin-react-svg": "^0.2.0",
+        "vite-plugin-dts": "^1.7.1",
+        "vite-plugin-react-svg": "^0.1.0",
         "vite-tsconfig-paths": "^3.3.13",
         "webpack": "^5.0.0",
         "webpack-cli": "^4.0.0",
         "webpack-merge": "^5.0.0"
+    },
+    "main": "./dist/redux-connected-devtools.umd.js",
+    "module": "./dist/redux-connected-devtools.es.js",
+    "types": "./dist/dts/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/redux-connected-devtools.es.js",
+            "require": "./dist/redux-connected-devtools.umd.js"
+        }
     }
 }

package/src/components/DevInspector/DevInspector.style.tsx

@@ -4,5 +4,4 @@ export const Container = styled.div`
     flex: 1;
     display: flex;
     flex-direction: column;
-    background-color: rgba(0, 0, 0, 0.1);
 `;

package/src/components/DevList/DevList.tsx

@@ -1,25 +1,28 @@
 import React from 'react';
 import { Container, Empty } from './DevList.style';
 import { FixedSizeList as List } from 'react-window';
-import { Json } from '../../types';
+import classnames from 'classnames';
 
 export type DevListProps = {
     items: Json[];
     row: React.FC<any>;
+    selectedRow: any;
     onClick: (item: any) => void;
 };
 
 export function DevList(props: DevListProps) {
-    const { row: Cmp, items } = props;
+    const { row: Cmp, items, selectedRow } = props;
 
     const Item = (rowInfo: any) => {
         const { index, style } = rowInfo;
 
         const item = items[index];
+        const className = classnames({ selected: item.id === selectedRow?.id });
 
         return (
             <Cmp
                 onClick={props.onClick}
+                className={className}
                 index={index}
                 style={style}
                 item={item}

package/src/components/DevMenu/DevMenu.style.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
     width: 190px;
-    border-right: 1px solid rgba(255, 255, 255, 0.2);
+    ${(props) => props.theme.borderRight('1px solid rgba(255, 255, 255, 0.2)')}
     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 `;
 
@@ -18,16 +18,19 @@ export const MenuGroupTitle = styled.div`
     background-color: rgba(0, 0, 0, 0.1);
 `;
 
-export const MenuItem = styled.div<{ selected: boolean }>`
+export const MenuItem = styled.div`
     display: flex;
     flex-direction: row;
     align-items: center;
     padding: 6px 10px;
     font-size: 14px;
-    color: ${(props) =>
-        props.selected ? 'gold' : 'rgba(255, 255, 255, 0.89)'};
-    background-color: ${(props) =>
-        props.selected ? 'rgba(255, 255, 255, 0.05)' : 'transparent'};
+    color: rgba(255, 255, 255, 0.89);
+    background-color: transparent;
+
+    &.selected {
+        color: gold;
+        background-color: rgba(255, 255, 255, 0.05);
+    }
 
     &:hover {
         background-color: rgba(255, 255, 255, 0.1);

package/src/components/DevMenu/DevMenu.tsx

@@ -9,6 +9,7 @@ import {
     Badge,
     BadgeTotal,
 } from './DevMenu.style';
+import classnames from 'classnames';
 
 export type DevMenuProps = {
     groups: string[];
@@ -31,8 +32,8 @@ export function DevMenu(props: DevMenuProps) {
 
         return (
             <MenuItem
-                selected={selected}
                 key={item.id}
+                className={classnames({ selected })}
                 onClick={() => props.onClick(item)}
             >
                 <Title>{title}</Title>

package/src/components/DevPanel/DevPanel.style.tsx

@@ -14,3 +14,12 @@ export const Content = styled.div`
     display: flex;
     flex-direction: column;
 `;
+
+export const Actions = styled.div`
+    position: absolute;
+    bottom: 5px;
+    ${(props) => props.theme.left('10px')}
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+`;

package/src/components/DevPanel/DevPanel.tsx

@@ -1,11 +1,12 @@
 import DevMenu from '../../containers/DevMenuContainer';
 import React, { useState } from 'react';
-import { Container, Content } from './DevPanel.style';
+import { Actions, Container, Content } from './DevPanel.style';
 import { devComponents } from '../../data/devComponents';
-import { devGroups, devRoutes, IDevRoute } from '../../data/devRoutes';
-import { Json } from '../../types';
+import { devRoutes, IDevRoute } from '../../data/devRoutes';
 
-export type DevPanelProps = {};
+export type DevPanelProps = {
+    children: JSX.Element | JSX.Element[];
+};
 
 export function DevPanel(props: DevPanelProps) {
     const [route, setRoute] = useState<IDevRoute>(devRoutes[0]);
@@ -24,11 +25,16 @@ export function DevPanel(props: DevPanelProps) {
                 selectedId={route.id}
                 onClick={(item: IDevRoute) => setRoute(item)}
             />
+            <Actions>{props.children}</Actions>
             <Content>{renderRoute()}</Content>
         </Container>
     );
 }
 
+/*
+    for the chrome extension devtools panel
+    TODO: find another way to encapsulate this
+
 let bgConnection;
 
 function init(id: string) {
@@ -44,8 +50,9 @@ function init(id: string) {
 }
 
 if (chrome) {
-    const tabId = String(chrome.devtools?.inspectedWindow.tabId || '');
+    const tabId = String(chrome.devtools?.inspectedWindow.tabId ?? '');
     init(tabId);
 }
+*/
 
 export default DevPanel;

package/src/components/DevtoolsApp/DevtoolsApp.scss

@@ -0,0 +1,2 @@
+.DevtoolsApp-container {
+}

package/src/components/DevtoolsApp/DevtoolsApp.style.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    flex: 1;
+    background-color: #223;
+    z-index: 3;
+    color: #eee;
+    display: flex;
+    flex-direction: column;
+    min-width: 880px;
+    min-height: 880px;
+`;

package/src/components/DevtoolsApp/DevtoolsApp.tsx

@@ -0,0 +1,45 @@
+import Icon from '../Icon/Icon';
+import React, { useRef } from 'react';
+import { Container } from './DevtoolsApp.style';
+import { DevPanelContainer } from '../../containers/DevPanelContainer';
+import { Provider } from 'react-redux';
+import Size from '../Size/Size';
+import classnames from 'classnames';
+
+export type DevtoolsAppProps = {
+    connectedStore: any;
+    clearRequests: () => void;
+    downloadState: () => void;
+    storeSizeInBytes?: number;
+    isDarkMode?: boolean;
+};
+
+export function DevtoolsApp(props: DevtoolsAppProps) {
+    const { connectedStore, storeSizeInBytes, isDarkMode } = props;
+    const ref = useRef(null);
+
+    const className = classnames('DevtoolsApp-container', {
+        darkMode: isDarkMode,
+    });
+
+    return (
+        <Container
+            ref={ref}
+            className={className}
+            data-testid='DevtoolsApp-container'
+        >
+            <Provider store={connectedStore}>
+                <DevPanelContainer>
+                    <Size size={storeSizeInBytes} />
+                    <Icon
+                        name='clearAll'
+                        onClick={() => props.clearRequests()}
+                    />
+                    <Icon name='download' onClick={props.downloadState} />
+                </DevPanelContainer>
+            </Provider>
+        </Container>
+    );
+}
+
+export default DevtoolsApp;

package/src/components/Icon/AllIcons.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+export type IconName = 'download' | 'close' | 'clearAll';
+
+type IconProps = {
+    size?: number;
+};
+
+const Download = (props: IconProps) => {
+    const { size = 24 } = props;
+
+    return (
+        <svg
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='0 0 24 24'
+            width={`${size}px`}
+            height={`${size}px`}
+            fill='currentColor'
+        >
+            <path d='M0 0h24v24H0z' fill='none' />
+            <path d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z' />
+        </svg>
+    );
+};
+
+const Close = (props: IconProps) => {
+    const { size = 24 } = props;
+
+    return (
+        <svg
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='0 0 24 24'
+            width={`${size}px`}
+            height={`${size}px`}
+            fill='currentColor'
+        >
+            <path d='M0 0h24v24H0z' fill='none' />
+            <path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' />
+        </svg>
+    );
+};
+
+const ClearAll = (props: IconProps) => {
+    const { size = 24 } = props;
+
+    return (
+        <svg
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='0 0 24 24'
+            width={`${size}px`}
+            height={`${size}px`}
+            fill='currentColor'
+        >
+            <path d='M0 0h24v24H0z' fill='none' />
+            <path d='M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z' />
+        </svg>
+    );
+};
+
+type Icons = Record<IconName, React.FC<IconProps>>;
+
+export const allIcons: Icons = {
+    close: Close,
+    clearAll: ClearAll,
+    download: Download,
+};

package/src/components/Icon/Icon.scss

@@ -0,0 +1,2 @@
+.Icon-container {
+}

package/src/components/Icon/Icon.style.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Container = styled.div<{ color?: string }>`
+    margin: 0 3px;
+    color: ${(props) => props.color ?? 'inherit'};
+    cursor: pointer;
+
+    &:hover {
+        color: gold;
+    }
+`;

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { allIcons, IconName } from './AllIcons';
+import { Container } from './Icon.style';
+
+export type IconProps = {
+    name: IconName;
+    color?: string;
+    size?: number;
+    onClick?: () => void;
+};
+
+export function Icon(props: IconProps) {
+    const { name, size = 20, color } = props;
+    const Cmp = allIcons[name];
+
+    return (
+        <Container
+            className='Icon-container'
+            data-testid='Icon-container'
+            color={color}
+            onClick={props.onClick}
+        >
+            <Cmp size={size} />
+        </Container>
+    );
+}
+
+export default Icon;

package/src/components/JourneyRow/JourneyRow.style.tsx

@@ -28,7 +28,7 @@ export const DataIcon = styled.div`
     font-weight: bold;
     color: purple;
     border-radius: 5px;
-    margin-left: 10px;
+    ${(props) => props.theme.marginLeft('10px')}
 `;
 
 export const Delta = styled.div`
@@ -36,7 +36,7 @@ export const Delta = styled.div`
     width: 60px;
     font-weight: bold;
     color: olive;
-    margin-right: 10px;
+    ${(props) => props.theme.marginRight('10px')}
     text-align: center;
     font-family: monospace;
 `;

package/src/components/JourneyRow/JourneyRow.tsx

@@ -9,11 +9,13 @@ export type JourneyRowProps = {
 
 const statusMap: Record<LifecycleStatus, string> = {
     [LifecycleStatus.RECEIVED]: 'Received',
+    [LifecycleStatus.POST_ACTION_OPTIMISTIC]: 'Post action (optimistic)',
     [LifecycleStatus.IN_QUEUE]: 'In queue',
     [LifecycleStatus.GENERAL_ERROR]: 'General error',
     [LifecycleStatus.PENDING_API_RESPONSE]: 'Pending API',
     [LifecycleStatus.API_ERROR]: 'API error',
     [LifecycleStatus.POST_ACTION]: 'Post action',
+    [LifecycleStatus.FAILED]: 'Failed',
 };
 
 export function JourneyRow(props: JourneyRowProps) {

package/src/components/JsonViewer/JsonViewer.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Json } from '../../types';
 import { Container } from './JsonViewer.style';
 
 export type JsonViewerProps = {

package/src/components/Lifecycle/Lifecycle.tsx

@@ -22,7 +22,12 @@ export function Lifecycle(props: LifecycleProps) {
             className='Lifecycle-container'
             data-testid='Lifecycle-container'
         >
-            <DevList items={requests} row={RequestRow} onClick={onClick} />
+            <DevList
+                items={requests}
+                row={RequestRow}
+                onClick={onClick}
+                selectedRow={item}
+            />
             <DevInspector item={item} />
         </Container>
     );

package/src/components/RequestDetails/RequestDetails.style.tsx

@@ -15,6 +15,6 @@ export const Td = styled.td`
     &:first-child {
         color: #778;
         text-align: right;
-        padding-right: 10px;
+        ${(props) => props.theme.paddingRight('10px')}
     }
 `;

package/src/components/RequestJourney/RequestJourney.style.tsx

@@ -3,4 +3,25 @@ import styled from 'styled-components';
 export const Container = styled.div`
     flex: 1;
     border-top: 1px solid #333;
+    max-height: 380px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+        background: #333;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+        background: #555;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+        background: #666;
+    }
 `;

package/src/components/RequestRow/RequestRow.style.tsx

@@ -6,6 +6,7 @@ export const Container = styled.div<{ index: number }>`
     flex-direction: row;
     align-items: center;
     padding: 10px;
+    max-width: 90%;
     background-color: ${(props) =>
         props.index % 2 === 1 ? 'rgba(0, 0, 0, 0.2)' : 'transparent'};
 

package/src/components/RequestRow/RequestRow.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
 import { Container, Col, Id, Type } from './RequestRow.style';
 import Time from '../Time/Time';
-import { Json } from '../../types';
 import { ApiRequest } from 'redux-connected';
 
 export type RequestRowProps = {
     style: Json;
     item: ApiRequest;
     index: number;
+    className?: string;
     onClick: (item: ApiRequest) => void;
 };
 
 export function RequestRow(props: RequestRowProps) {
-    const { index, style, item } = props;
+    const { index, style, item, className } = props;
     const { sequence, createdTS } = item;
 
     return (
         <Container
-            className='DevListRow-container'
+            className={`DevListRow-container ${className}`}
             data-testid='DevListRow-container'
             style={style}
             index={index}

package/src/components/Size/Size.scss

@@ -0,0 +1,2 @@
+.Size-container {
+}

package/src/components/Size/Size.style.tsx

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    color: olive;
+    margin: 0 5px;
+`;

package/src/components/Size/Size.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Container } from './Size.style';
+import bytes from 'bytes';
+import { useMemo } from 'react';
+
+export type SizeProps = {
+    size?: number;
+};
+
+export function Size(props: SizeProps) {
+    const { size = 0 } = props;
+    const sizeText = useMemo(() => bytes(size), [size]);
+
+    return (
+        <Container className='Size-container' data-testid='Size-container'>
+            {!size ? '-' : sizeText}
+        </Container>
+    );
+}
+
+export default Size;

package/src/components/StateViewer/StateViewer.scss

@@ -0,0 +1,2 @@
+.StateViewer-container {
+}

package/src/components/StateViewer/StateViewer.style.tsx

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    flex: 1;
+`;

package/src/components/StateViewer/StateViewer.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Container } from './StateViewer.style';
+
+export type StateViewerProps = {};
+
+export function StateViewer(_props: StateViewerProps) {
+    return (
+        <Container
+            className='StateViewer-container'
+            data-testid='StateViewer-container'
+        >
+            StateViewer
+        </Container>
+    );
+}
+
+export default StateViewer;

package/src/components/Time/Time.style.tsx

@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-    color: yellowgreen;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     font-family: monospace;
+    color: #99a;
 `;
 
 export const Full = styled.div`

package/src/containers/DevPanelContainer.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import DevPanel from '../components/DevPanel/DevPanel';
 
-type DevPanelProps = {};
+type DevPanelProps = {
+    children: JSX.Element | JSX.Element[];
+};
 
-export function DevPanelContainer(_props: DevPanelProps) {
-    return <DevPanel />;
+export function DevPanelContainer(props: DevPanelProps) {
+    return <DevPanel>{props.children}</DevPanel>;
 }
 
 export default DevPanelContainer;