diff --git a/packages/react-navigation/.eslintrc.js b/packages/react-navigation-visualizer/.eslintrc.js similarity index 100% rename from packages/react-navigation/.eslintrc.js rename to packages/react-navigation-visualizer/.eslintrc.js diff --git a/packages/react-navigation/README.md b/packages/react-navigation-visualizer/README.md similarity index 72% rename from packages/react-navigation/README.md rename to packages/react-navigation-visualizer/README.md index 09b4e5a..dcc3601 100644 --- a/packages/react-navigation/README.md +++ b/packages/react-navigation-visualizer/README.md @@ -1,13 +1,13 @@ -# @dev-plugins/react-navigation +# @bam.tech/react-navigation-visualizer-dev-plugin -A React Navigation DevTool that can run in an Expo App +A Visualization Tool based on Expo DevTools Plugin for React Navigation. ## Installation ### Add the package to your project ```bash -npx expo install @dev-plugins/react-navigation +npx expo install@bam.tech/react-navigation-visualizer-dev-plugin ``` ## Usage @@ -18,7 +18,7 @@ npx expo install @dev-plugins/react-navigation ```jsx import { useNavigationContainerRef } from '@react-navigation/native'; -import { useReactNavigationDevTools } from '@dev-plugins/react-navigation'; +import { useReactNavigationDevTools } from '@bam.tech/react-navigation-visualizer-dev-plugin'; export default function App() { const navigationRef = useNavigationContainerRef(); @@ -34,13 +34,13 @@ When using `expo-router`, integrate the DevTool in your main `_layout.tsx` file. ```tsx import { useNavigationContainerRef } from 'expo-router'; -import { useReactNavigationDevTools } from '@dev-plugins/react-navigation'; +import { useReactNavigationDevTools } from '@bam.tech/react-navigation-visualizer-dev-plugin'; export default function RootLayout() { const navigationRef = useNavigationContainerRef(); useReactNavigationDevTools(navigationRef); - return + return ; } ``` diff --git a/packages/react-navigation/babel.config.js b/packages/react-navigation-visualizer/babel.config.js similarity index 100% rename from packages/react-navigation/babel.config.js rename to packages/react-navigation-visualizer/babel.config.js diff --git a/packages/react-navigation/build/ReduxExtensionAdapter.d.ts b/packages/react-navigation-visualizer/build/ReduxExtensionAdapter.d.ts similarity index 100% rename from packages/react-navigation/build/ReduxExtensionAdapter.d.ts rename to packages/react-navigation-visualizer/build/ReduxExtensionAdapter.d.ts diff --git a/packages/react-navigation/build/ReduxExtensionAdapter.d.ts.map b/packages/react-navigation-visualizer/build/ReduxExtensionAdapter.d.ts.map similarity index 100% rename from packages/react-navigation/build/ReduxExtensionAdapter.d.ts.map rename to packages/react-navigation-visualizer/build/ReduxExtensionAdapter.d.ts.map diff --git a/packages/react-navigation/build/ReduxExtensionAdapter.js b/packages/react-navigation-visualizer/build/ReduxExtensionAdapter.js similarity index 100% rename from packages/react-navigation/build/ReduxExtensionAdapter.js rename to packages/react-navigation-visualizer/build/ReduxExtensionAdapter.js diff --git a/packages/react-navigation/build/ReduxExtensionAdapter.js.map b/packages/react-navigation-visualizer/build/ReduxExtensionAdapter.js.map similarity index 100% rename from packages/react-navigation/build/ReduxExtensionAdapter.js.map rename to packages/react-navigation-visualizer/build/ReduxExtensionAdapter.js.map diff --git a/packages/react-navigation/build/index.d.ts b/packages/react-navigation-visualizer/build/index.d.ts similarity index 100% rename from packages/react-navigation/build/index.d.ts rename to packages/react-navigation-visualizer/build/index.d.ts diff --git a/packages/react-navigation/build/index.d.ts.map b/packages/react-navigation-visualizer/build/index.d.ts.map similarity index 100% rename from packages/react-navigation/build/index.d.ts.map rename to packages/react-navigation-visualizer/build/index.d.ts.map diff --git a/packages/react-navigation/build/index.js b/packages/react-navigation-visualizer/build/index.js similarity index 100% rename from packages/react-navigation/build/index.js rename to packages/react-navigation-visualizer/build/index.js diff --git a/packages/react-navigation/build/index.js.map b/packages/react-navigation-visualizer/build/index.js.map similarity index 100% rename from packages/react-navigation/build/index.js.map rename to packages/react-navigation-visualizer/build/index.js.map diff --git a/packages/react-navigation/build/useReactNavigationDevTools.d.ts b/packages/react-navigation-visualizer/build/useReactNavigationDevTools.d.ts similarity index 100% rename from packages/react-navigation/build/useReactNavigationDevTools.d.ts rename to packages/react-navigation-visualizer/build/useReactNavigationDevTools.d.ts diff --git a/packages/react-navigation/build/useReactNavigationDevTools.d.ts.map b/packages/react-navigation-visualizer/build/useReactNavigationDevTools.d.ts.map similarity index 100% rename from packages/react-navigation/build/useReactNavigationDevTools.d.ts.map rename to packages/react-navigation-visualizer/build/useReactNavigationDevTools.d.ts.map diff --git a/packages/react-navigation/build/useReactNavigationDevTools.js b/packages/react-navigation-visualizer/build/useReactNavigationDevTools.js similarity index 100% rename from packages/react-navigation/build/useReactNavigationDevTools.js rename to packages/react-navigation-visualizer/build/useReactNavigationDevTools.js diff --git a/packages/react-navigation/build/useReactNavigationDevTools.js.map b/packages/react-navigation-visualizer/build/useReactNavigationDevTools.js.map similarity index 100% rename from packages/react-navigation/build/useReactNavigationDevTools.js.map rename to packages/react-navigation-visualizer/build/useReactNavigationDevTools.js.map diff --git a/packages/react-navigation/expo-module.config.json b/packages/react-navigation-visualizer/expo-module.config.json similarity index 100% rename from packages/react-navigation/expo-module.config.json rename to packages/react-navigation-visualizer/expo-module.config.json diff --git a/packages/react-navigation/package.json b/packages/react-navigation-visualizer/package.json similarity index 73% rename from packages/react-navigation/package.json rename to packages/react-navigation-visualizer/package.json index aef9cfc..1c472e3 100644 --- a/packages/react-navigation/package.json +++ b/packages/react-navigation-visualizer/package.json @@ -1,7 +1,7 @@ { - "name": "@dev-plugins/react-navigation", - "version": "0.1.0", - "description": "Expo DevTools Plugin for React Navigation", + "name": "@bam.tech/react-navigation-visualizer-dev-plugin", + "version": "0.1.4", + "description": "Visualization Tool based on Expo DevTools Plugin for React Navigation", "main": "build/index.js", "types": "build/index.d.ts", "sideEffects": false, @@ -10,20 +10,20 @@ "clean": "expo-module clean", "lint": "expo-module lint", "test": "expo-module test", - "prepare": "expo-module prepare && node ../../scripts/build-webui.js react-navigation", + "prepare": "expo-module prepare && node ../../scripts/build-webui.js react-navigation-visualizer", "prepublishOnly": "expo-module prepublishOnly", "expo-module": "expo-module" }, "homepage": "https://docs.expo.dev/versions/latest/sdk/image/", "repository": { "type": "git", - "url": "git+https://github.com/expo/dev-plugins.git", - "directory": "packages/react-navigation" + "url": "git+https://github.com/thomasrebam/dev-plugins.git", + "directory": "packages/react-navigation-visualizer" }, "keywords": [ "expo", "devtools", - "react-navigation" + "react-navigation-visualizer" ], "files": [ "build", diff --git a/packages/react-navigation/src/ReduxExtensionAdapter.ts b/packages/react-navigation-visualizer/src/ReduxExtensionAdapter.ts similarity index 100% rename from packages/react-navigation/src/ReduxExtensionAdapter.ts rename to packages/react-navigation-visualizer/src/ReduxExtensionAdapter.ts diff --git a/packages/react-navigation/src/index.ts b/packages/react-navigation-visualizer/src/index.ts similarity index 100% rename from packages/react-navigation/src/index.ts rename to packages/react-navigation-visualizer/src/index.ts diff --git a/packages/react-navigation/src/useReactNavigationDevTools.ts b/packages/react-navigation-visualizer/src/useReactNavigationDevTools.ts similarity index 100% rename from packages/react-navigation/src/useReactNavigationDevTools.ts rename to packages/react-navigation-visualizer/src/useReactNavigationDevTools.ts diff --git a/packages/react-navigation/tsconfig.json b/packages/react-navigation-visualizer/tsconfig.json similarity index 100% rename from packages/react-navigation/tsconfig.json rename to packages/react-navigation-visualizer/tsconfig.json diff --git a/packages/react-navigation/webui/app.json b/packages/react-navigation-visualizer/webui/app.json similarity index 52% rename from packages/react-navigation/webui/app.json rename to packages/react-navigation-visualizer/webui/app.json index 813ee76..0eac605 100644 --- a/packages/react-navigation/webui/app.json +++ b/packages/react-navigation-visualizer/webui/app.json @@ -4,7 +4,7 @@ "bundler": "metro" }, "experiments": { - "baseUrl": "/_expo/plugins/@dev-plugins/react-navigation" + "baseUrl": "/_expo/plugins/@bam.tech/react-navigation-visualizer-dev-plugin" } } } diff --git a/packages/react-navigation/webui/babel.config.js b/packages/react-navigation-visualizer/webui/babel.config.js similarity index 100% rename from packages/react-navigation/webui/babel.config.js rename to packages/react-navigation-visualizer/webui/babel.config.js diff --git a/packages/react-navigation/webui/index.js b/packages/react-navigation-visualizer/webui/index.js similarity index 100% rename from packages/react-navigation/webui/index.js rename to packages/react-navigation-visualizer/webui/index.js diff --git a/packages/react-navigation/webui/metro.config.js b/packages/react-navigation-visualizer/webui/metro.config.js similarity index 100% rename from packages/react-navigation/webui/metro.config.js rename to packages/react-navigation-visualizer/webui/metro.config.js diff --git a/packages/react-navigation/webui/package.json b/packages/react-navigation-visualizer/webui/package.json similarity index 84% rename from packages/react-navigation/webui/package.json rename to packages/react-navigation-visualizer/webui/package.json index ea1fb4b..2beb3bc 100644 --- a/packages/react-navigation/webui/package.json +++ b/packages/react-navigation-visualizer/webui/package.json @@ -1,6 +1,6 @@ { - "name": "@dev-plugins/react-navigation-webui", - "description": "The frontend webui for @dev-plugins/react-navigation", + "name": "@bam.tech/react-navigation-visualizer-dev-plugin-webui", + "description": "The frontend webui for @bam.tech/react-navigation-visualizer-dev-plugin", "private": true, "version": "0.1.0", "main": "index.js", diff --git a/packages/react-navigation/webui/src/App.tsx b/packages/react-navigation-visualizer/webui/src/App.tsx similarity index 83% rename from packages/react-navigation/webui/src/App.tsx rename to packages/react-navigation-visualizer/webui/src/App.tsx index 8a31478..c667a8d 100644 --- a/packages/react-navigation/webui/src/App.tsx +++ b/packages/react-navigation-visualizer/webui/src/App.tsx @@ -1,12 +1,12 @@ -import { Layout, Tabs, theme as antTheme, ThemeConfig } from 'antd'; import { ThemeProvider } from '@emotion/react'; import styled from '@emotion/styled'; +import { theme as antTheme, Layout, Tabs, ThemeConfig } from 'antd'; import * as React from 'react'; -import { theme } from './theme'; - import { LinkingTester } from './LinkingTester'; import { Logs } from './Logs'; +import { NavigationTree } from './NavigationTree'; +import { theme } from './theme'; import { usePluginStore } from './usePluginStore'; declare module '@emotion/react' { @@ -31,6 +31,9 @@ export default function App() { Linking} key="linking"> + Stack Visualization} key="navigationTree"> + + diff --git a/packages/react-navigation/webui/src/LinkingTester.tsx b/packages/react-navigation-visualizer/webui/src/LinkingTester.tsx similarity index 100% rename from packages/react-navigation/webui/src/LinkingTester.tsx rename to packages/react-navigation-visualizer/webui/src/LinkingTester.tsx diff --git a/packages/react-navigation/webui/src/Logs.tsx b/packages/react-navigation-visualizer/webui/src/Logs.tsx similarity index 100% rename from packages/react-navigation/webui/src/Logs.tsx rename to packages/react-navigation-visualizer/webui/src/Logs.tsx diff --git a/packages/react-navigation-visualizer/webui/src/NavigationTree.tsx b/packages/react-navigation-visualizer/webui/src/NavigationTree.tsx new file mode 100644 index 0000000..a588c4e --- /dev/null +++ b/packages/react-navigation-visualizer/webui/src/NavigationTree.tsx @@ -0,0 +1,145 @@ +import styled from '@emotion/styled'; +import { Layout, Typography } from 'antd'; +import * as React from 'react'; + +import { Sidebar } from './Sidebar'; +import type { NavigationState, StoreType } from './types'; + +type Props = StoreType; + +export function NavigationTree({ logs }: Props) { + const currentNavigationItem = logs[logs.length - 1]; + const previousNavigationItem = logs[logs.length - 2]; + + const currentNavigationItemState = currentNavigationItem?.state; + const previousNavigationItemState = previousNavigationItem?.state; + + const hasCurrentItem = !!currentNavigationItem && currentNavigationItemState; + const hasPreviousItem = !!previousNavigationItem && previousNavigationItemState; + + return ( + + + + + Previous state + + {hasPreviousItem && } + + + + Current state + + {hasCurrentItem && } + + + + + {hasCurrentItem ? ( + + ) : null} + + ); +} + +const Container = styled.div({ + display: 'flex', + overflow: 'auto', + flexDirection: 'row', + flex: 1, +}); + +const HalfContainer = styled.div({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + overflow: 'auto', + justifyContent: 'space-between', + height: '100%', + flex: 1, +}); + +const HalfContent = styled.div({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + overflow: 'auto', + justifyContent: 'flex-end', + height: '100%', + flex: 1, +}); + +const Spacer = styled.div({ + height: 4, +}); + +const LeafContainer = styled.div(({ theme: antdTheme }) => ({ + display: 'flex', + backgroundColor: antdTheme.token?.colorPrimary, + borderRadius: 4, + alignItems: 'center', + justifyContent: 'center', + padding: 8, +})); + +const LeafTitle = styled(Typography.Text)({ + color: 'white', +}); + +const Leaf = ({ title, isSelectedTab }: { title: string; isSelectedTab?: boolean }) => { + return ( + + + {title} + + + ); +}; + +const NodeContainer = styled.div(({ theme: antdTheme }) => ({ + display: 'flex', + flexDirection: 'column', + borderRadius: 4, + borderWidth: 1, + border: 'solid', + borderColor: antdTheme.token?.colorPrimary, + padding: 8, +})); + +const NodeTitle = styled(Typography)(({ theme }) => ({ + color: theme.token?.colorPrimary, + alignSelf: 'flex-start', +})); + +const Node = ({ name, state }: { name: string; state: NavigationState }) => { + const routes = state.routes; + if (!routes || !routes.length) { + return ; + } + + return ( + + {routes.toReversed().map((route, index) => ( + + {route.state?.routes && route.state.routes.length ? ( + + ) : ( + + )} + + + ))} + + {name} + + ); +}; diff --git a/packages/react-navigation/webui/src/RouteMap.tsx b/packages/react-navigation-visualizer/webui/src/RouteMap.tsx similarity index 100% rename from packages/react-navigation/webui/src/RouteMap.tsx rename to packages/react-navigation-visualizer/webui/src/RouteMap.tsx diff --git a/packages/react-navigation/webui/src/Sidebar.tsx b/packages/react-navigation-visualizer/webui/src/Sidebar.tsx similarity index 100% rename from packages/react-navigation/webui/src/Sidebar.tsx rename to packages/react-navigation-visualizer/webui/src/Sidebar.tsx diff --git a/packages/react-navigation/webui/src/Typography.tsx b/packages/react-navigation-visualizer/webui/src/Typography.tsx similarity index 100% rename from packages/react-navigation/webui/src/Typography.tsx rename to packages/react-navigation-visualizer/webui/src/Typography.tsx diff --git a/packages/react-navigation/webui/src/theme.tsx b/packages/react-navigation-visualizer/webui/src/theme.tsx similarity index 100% rename from packages/react-navigation/webui/src/theme.tsx rename to packages/react-navigation-visualizer/webui/src/theme.tsx diff --git a/packages/react-navigation/webui/src/types.ts b/packages/react-navigation-visualizer/webui/src/types.ts similarity index 98% rename from packages/react-navigation/webui/src/types.ts rename to packages/react-navigation-visualizer/webui/src/types.ts index 02dc5b1..9ad7a42 100644 --- a/packages/react-navigation/webui/src/types.ts +++ b/packages/react-navigation-visualizer/webui/src/types.ts @@ -9,6 +9,7 @@ export type NavigationState = { key: string; index: number; routes: NavigationRoute[]; + type: string; }; export type NavigationAction = { diff --git a/packages/react-navigation/webui/src/usePluginStore.ts b/packages/react-navigation-visualizer/webui/src/usePluginStore.ts similarity index 100% rename from packages/react-navigation/webui/src/usePluginStore.ts rename to packages/react-navigation-visualizer/webui/src/usePluginStore.ts diff --git a/packages/react-navigation/webui/tsconfig.json b/packages/react-navigation-visualizer/webui/tsconfig.json similarity index 100% rename from packages/react-navigation/webui/tsconfig.json rename to packages/react-navigation-visualizer/webui/tsconfig.json