- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|
Performing initial data load
; -} \ No newline at end of file diff --git a/src/constants.ts b/src/constants.ts index 69c4fbb..4ac1d65 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,4 +1,4 @@ -export const ADDON_ID = "storybook/react-router-v6"; +export const ADDON_ID = 'storybook/react-router-v6'; export const PANEL_ID = `${ADDON_ID}/panel`; export const PARAM_KEY = `reactRouter`; diff --git a/src/contexts/DeepRouteMatches.tsx b/src/features/decorator/components/DeepRouteMatches.tsx similarity index 51% rename from src/contexts/DeepRouteMatches.tsx rename to src/features/decorator/components/DeepRouteMatches.tsx index fa7cceb..3029bd2 100644 --- a/src/contexts/DeepRouteMatches.tsx +++ b/src/features/decorator/components/DeepRouteMatches.tsx @@ -1,4 +1,4 @@ -import React from "react"; -import {RouteMatch} from "react-router-dom"; +import React from 'react'; +import { RouteMatch } from 'react-router-dom'; export const DeepRouteMatchesContext = React.createContextPerforming initial data load
; +} diff --git a/src/features/decorator/hooks/useActionDecorator.ts b/src/features/decorator/hooks/useActionDecorator.ts new file mode 100644 index 0000000..781f246 --- /dev/null +++ b/src/features/decorator/hooks/useActionDecorator.ts @@ -0,0 +1,25 @@ +import { ActionFunctionArgs } from '@remix-run/router/utils'; +import { addons } from '@storybook/preview-api'; +import { useCallback } from 'react'; +import { ActionFunction } from 'react-router'; +import { EVENTS } from '../../../constants'; +import { useDataEventBuilder } from './useDataEventBuilder'; + +export function useActionDecorator() { + const channel = addons.getChannel(); + const createEventData = useDataEventBuilder(); + + return useCallback( + (action: ActionFunction) => + async function (actionArgs: ActionFunctionArgs) { + if (action === undefined) return; + + channel.emit(EVENTS.ACTION_INVOKED, await createEventData(EVENTS.ACTION_INVOKED, actionArgs)); + const actionResult = await action(actionArgs); + channel.emit(EVENTS.ACTION_SETTLED, await createEventData(EVENTS.ACTION_SETTLED, actionResult)); + + return actionResult; + }, + [channel, createEventData] + ); +} diff --git a/src/hooks/useCurrentUrl.ts b/src/features/decorator/hooks/useCurrentUrl.ts similarity index 73% rename from src/hooks/useCurrentUrl.ts rename to src/features/decorator/hooks/useCurrentUrl.ts index 6b80d3b..7d7a5c1 100644 --- a/src/hooks/useCurrentUrl.ts +++ b/src/features/decorator/hooks/useCurrentUrl.ts @@ -1,6 +1,6 @@ -import {useLocation} from "react-router-dom"; +import { useLocation } from 'react-router-dom'; export const useCurrentUrl = () => { const location = useLocation(); return `${location.pathname}${location.search}${location.hash}`; -} +}; diff --git a/src/features/decorator/hooks/useDataEventBuilder.ts b/src/features/decorator/hooks/useDataEventBuilder.ts new file mode 100644 index 0000000..b3d50dc --- /dev/null +++ b/src/features/decorator/hooks/useDataEventBuilder.ts @@ -0,0 +1,50 @@ +import type { DataEvent, DataEventArgs, DataEventName } from '../../panel/types'; +import { useCallback, useRef } from 'react'; +import { EVENTS } from '../../../constants'; +import { getHumanReadableBody } from '../../panel/utils'; + +export const useDataEventBuilder = () => { + const eventCount = useRef(0); + + return useCallback( + async (eventName: DataEventName, eventArgs?: DataEventArgs[keyof DataEventArgs]): Promise{JSON.stringify(matches.map(m => m.handle))}
; + return{JSON.stringify(matches.map((m) => m.handle))}
; } export const MatchesHandles = { render: () =>{JSON.stringify(matches.map(m => m.id))}
; + return{JSON.stringify(matches.map((m) => m.id))}
; } export const RouteId = { @@ -121,6 +118,6 @@ export const RouteId = { parameters: { reactRouter: { routeId: 'SomeRouteId', - } - } -} + }, + }, +}; diff --git a/src/stories/StoryRouteTree/DataRouter/Action.stories.tsx b/src/stories/v1/DataRouter/Action.stories.tsx similarity index 67% rename from src/stories/StoryRouteTree/DataRouter/Action.stories.tsx rename to src/stories/v1/DataRouter/Action.stories.tsx index 0e06f96..32f1878 100644 --- a/src/stories/StoryRouteTree/DataRouter/Action.stories.tsx +++ b/src/stories/v1/DataRouter/Action.stories.tsx @@ -1,9 +1,9 @@ -import React from "react"; -import {useFetcher} from "react-router-dom"; -import {withRouter} from "../../../withRouter"; +import React from 'react'; +import { useFetcher } from 'react-router-dom'; +import { withRouter } from '../../../features/decorator/withRouter'; export default { - title: "Action", + title: 'v1/Action', decorators: [withRouter], }; @@ -11,12 +11,12 @@ function TinyForm() { const fetcher = useFetcher(); return ( -{location.pathname}
; + }, + parameters: { + reactRouter: reactRouterParameters({ + location: { + path: '/books', + }, + routing: { path: '/books' }, + }), + }, +}; + +export const LocationPathFromFunctionStringResult = { + render: () => { + const location = useLocation(); + return{location.pathname}
; + }, + parameters: { + reactRouter: reactRouterParameters({ + location: { + path: (inferredPath, pathParams) => { + return generatePath(inferredPath, pathParams); + }, + pathParams: { bookId: 777 }, + }, + routing: { path: '/books/:bookId' }, + }), + }, +}; + +export const LocationPathFromFunctionUndefinedResult = { + render: () => { + const location = useLocation(); + return{location.pathname}
; + }, + parameters: { + reactRouter: reactRouterParameters({ + location: { + path: () => undefined, + }, + routing: { path: '/books' }, + }), + }, +}; + +export const LocationPathBestGuess = { + render: () => ( +{JSON.stringify(routeParams)}
; + }, + parameters: { + reactRouter: reactRouterParameters({ + location: { + path: '/book/:bookId', + pathParams: { + bookId: '42', + }, + }, + routing: { + path: '/book/:bookId', + }, + }), + }, +}; + +export const LocationSearchParams = { + render: () => { + const [searchParams] = useSearchParams(); + return{JSON.stringify(Object.fromEntries(searchParams.entries()))}
; + }, + parameters: { + reactRouter: reactRouterParameters({ + location: { + searchParams: { page: '42' }, + }, + }), + }, +}; + +export const RoutingString = { + render: () => { + const location = useLocation(); + return{location.pathname}
; + }, + parameters: { + reactRouter: reactRouterParameters({ + routing: '/books', + }), + }, +}; + +export const RoutingHandles = { + render: () => { + const matches = useMatches(); + return{JSON.stringify(matches.map((m) => m.handle))}
; + }, + parameters: { + reactRouter: reactRouterParameters({ + routing: reactRouterOutlet( + { handle: 'Handle part 1 out of 2' }, + { + handle: 'Handle part 2 out of 2', + element:I'm the outlet.
, + } + ), + }), + }, +}; + +export const RoutingOutletJSX = { + render: () =>Go to :
+Outlet Index
, + }, + { + path: 'one', + element:Outlet One
, + }, + { + path: 'two', + element:Outlet Two
, + }, + ]), + }), + }, +}; + +export const RoutingNestedOutlets = { + render: () => ( +Outlet level 1
+Outlet level 2
+Outlet level 3
+Ancestor level 1
+Ancestor level 2
+Ancestor level 3
+{JSON.stringify(matches.map((m) => m.id))}
; + }, + parameters: { + reactRouter: reactRouterParameters({ + routing: { + id: 'SomeRouteId', + }, + }), + }, +}; diff --git a/src/stories/v2/DataRouter/Action.stories.tsx b/src/stories/v2/DataRouter/Action.stories.tsx new file mode 100644 index 0000000..831a32c --- /dev/null +++ b/src/stories/v2/DataRouter/Action.stories.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { useFetcher } from 'react-router-dom'; +import { reactRouterParameters } from '../../../features/decorator/utils/routesHelpers/reactRouterParameters'; +import { withRouter } from '../../../features/decorator/withRouter'; + +export default { + title: 'v2/Action', + decorators: [withRouter], +}; + +function TextForm() { + const fetcher = useFetcher(); + + return ( +