From 5d2fbb8051e55f70fa085728d7f104d0d39042db Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 26 Aug 2024 12:07:46 +0200 Subject: [PATCH 01/13] Remove subfolder index.ts files, since they interfere with Storybook docgen --- packages/components/src/navigator/index.ts | 12 ++++++------ .../src/navigator/navigator-back-button/hook.ts | 2 +- .../src/navigator/navigator-back-button/index.ts | 1 - .../src/navigator/navigator-button/hook.ts | 2 +- .../src/navigator/navigator-button/index.ts | 1 - .../src/navigator/navigator-provider/index.ts | 1 - .../src/navigator/navigator-screen/index.ts | 1 - .../navigator-to-parent-button/component.tsx | 2 +- .../navigator/navigator-to-parent-button/index.ts | 1 - packages/components/src/navigator/use-navigator.ts | 4 +--- 10 files changed, 10 insertions(+), 17 deletions(-) delete mode 100644 packages/components/src/navigator/navigator-back-button/index.ts delete mode 100644 packages/components/src/navigator/navigator-button/index.ts delete mode 100644 packages/components/src/navigator/navigator-provider/index.ts delete mode 100644 packages/components/src/navigator/navigator-screen/index.ts delete mode 100644 packages/components/src/navigator/navigator-to-parent-button/index.ts diff --git a/packages/components/src/navigator/index.ts b/packages/components/src/navigator/index.ts index 74c69a0daa9c31..130edc2ae52eb8 100644 --- a/packages/components/src/navigator/index.ts +++ b/packages/components/src/navigator/index.ts @@ -1,6 +1,6 @@ -export { NavigatorProvider } from './navigator-provider'; -export { NavigatorScreen } from './navigator-screen'; -export { NavigatorButton } from './navigator-button'; -export { NavigatorBackButton } from './navigator-back-button'; -export { NavigatorToParentButton } from './navigator-to-parent-button'; -export { default as useNavigator } from './use-navigator'; +export { NavigatorProvider } from './navigator-provider/component'; +export { NavigatorScreen } from './navigator-screen/component'; +export { NavigatorButton } from './navigator-button/component'; +export { NavigatorBackButton } from './navigator-back-button/component'; +export { NavigatorToParentButton } from './navigator-to-parent-button/component'; +export { useNavigator } from './use-navigator'; diff --git a/packages/components/src/navigator/navigator-back-button/hook.ts b/packages/components/src/navigator/navigator-back-button/hook.ts index d4447b5f40ad46..9ddc095292190a 100644 --- a/packages/components/src/navigator/navigator-back-button/hook.ts +++ b/packages/components/src/navigator/navigator-back-button/hook.ts @@ -9,7 +9,7 @@ import { useCallback } from '@wordpress/element'; import type { WordPressComponentProps } from '../../context'; import { useContextSystem } from '../../context'; import Button from '../../button'; -import useNavigator from '../use-navigator'; +import { useNavigator } from '../use-navigator'; import type { NavigatorBackButtonProps } from '../types'; export function useNavigatorBackButton( diff --git a/packages/components/src/navigator/navigator-back-button/index.ts b/packages/components/src/navigator/navigator-back-button/index.ts deleted file mode 100644 index 9046e90350e278..00000000000000 --- a/packages/components/src/navigator/navigator-back-button/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as NavigatorBackButton } from './component'; diff --git a/packages/components/src/navigator/navigator-button/hook.ts b/packages/components/src/navigator/navigator-button/hook.ts index 3952dc3fd56ba5..3e39b05661e1b2 100644 --- a/packages/components/src/navigator/navigator-button/hook.ts +++ b/packages/components/src/navigator/navigator-button/hook.ts @@ -10,7 +10,7 @@ import { escapeAttribute } from '@wordpress/escape-html'; import type { WordPressComponentProps } from '../../context'; import { useContextSystem } from '../../context'; import Button from '../../button'; -import useNavigator from '../use-navigator'; +import { useNavigator } from '../use-navigator'; import type { NavigatorButtonProps } from '../types'; const cssSelectorForAttribute = ( attrName: string, attrValue: string ) => diff --git a/packages/components/src/navigator/navigator-button/index.ts b/packages/components/src/navigator/navigator-button/index.ts deleted file mode 100644 index 74975a5e1b0c14..00000000000000 --- a/packages/components/src/navigator/navigator-button/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as NavigatorButton } from './component'; diff --git a/packages/components/src/navigator/navigator-provider/index.ts b/packages/components/src/navigator/navigator-provider/index.ts deleted file mode 100644 index b9a330613ac847..00000000000000 --- a/packages/components/src/navigator/navigator-provider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as NavigatorProvider } from './component'; diff --git a/packages/components/src/navigator/navigator-screen/index.ts b/packages/components/src/navigator/navigator-screen/index.ts deleted file mode 100644 index 9c9a40d435fff3..00000000000000 --- a/packages/components/src/navigator/navigator-screen/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as NavigatorScreen } from './component'; diff --git a/packages/components/src/navigator/navigator-to-parent-button/component.tsx b/packages/components/src/navigator/navigator-to-parent-button/component.tsx index 400498b1fc96ca..fcbadea03cf7bb 100644 --- a/packages/components/src/navigator/navigator-to-parent-button/component.tsx +++ b/packages/components/src/navigator/navigator-to-parent-button/component.tsx @@ -6,7 +6,7 @@ import deprecated from '@wordpress/deprecated'; /** * Internal dependencies */ -import { NavigatorBackButton } from '../navigator-back-button'; +import { NavigatorBackButton } from '../navigator-back-button/component'; import type { WordPressComponentProps } from '../../context'; import { contextConnect } from '../../context'; import type { NavigatorBackButtonProps } from '../types'; diff --git a/packages/components/src/navigator/navigator-to-parent-button/index.ts b/packages/components/src/navigator/navigator-to-parent-button/index.ts deleted file mode 100644 index f5218e456065e6..00000000000000 --- a/packages/components/src/navigator/navigator-to-parent-button/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as NavigatorToParentButton } from './component'; diff --git a/packages/components/src/navigator/use-navigator.ts b/packages/components/src/navigator/use-navigator.ts index 4d917649374d53..7ac35d73150d32 100644 --- a/packages/components/src/navigator/use-navigator.ts +++ b/packages/components/src/navigator/use-navigator.ts @@ -12,7 +12,7 @@ import type { Navigator } from './types'; /** * Retrieves a `navigator` instance. */ -function useNavigator(): Navigator { +export function useNavigator(): Navigator { const { location, params, goTo, goBack, goToParent } = useContext( NavigatorContext ); @@ -24,5 +24,3 @@ function useNavigator(): Navigator { params, }; } - -export default useNavigator; From 4bec9f4cc877aecdc0adb77c9a9d940bf6d81803 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 26 Aug 2024 12:20:24 +0200 Subject: [PATCH 02/13] Use MenuItem for Dropdown, remove unnecessary types --- .../src/navigator/stories/index.story.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index 633d5897678cbf..ba35d1f8155520 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -10,6 +10,7 @@ import Button from '../../button'; import { Card, CardBody, CardFooter, CardHeader } from '../../card'; import { VStack } from '../../v-stack'; import Dropdown from '../../dropdown'; +import MenuItem from '../../menu-item'; import { NavigatorProvider, NavigatorScreen, @@ -79,10 +80,6 @@ export const Default: StoryObj< typeof NavigatorProvider > = { renderToggle={ ( { isOpen, onToggle, - }: { - // TODO: remove once `Dropdown` is refactored to TypeScript - isOpen: boolean; - onToggle: () => void; } ) => ( ) } renderContent={ () => ( - - Go - Stuff - ) } /> + <> + Item 2 + Item 1 + From 2049babc9ce3729ed21eeb5ca818e4de5cd7a7a4 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 26 Aug 2024 12:21:55 +0200 Subject: [PATCH 03/13] Remove Card usage from the Storybook example --- .../src/navigator/stories/index.story.tsx | 275 ++++++++---------- 1 file changed, 115 insertions(+), 160 deletions(-) diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index ba35d1f8155520..5c7c08c7d82d3b 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -7,7 +7,6 @@ import type { Meta, StoryObj } from '@storybook/react'; * Internal dependencies */ import Button from '../../button'; -import { Card, CardBody, CardFooter, CardHeader } from '../../card'; import { VStack } from '../../v-stack'; import Dropdown from '../../dropdown'; import MenuItem from '../../menu-item'; @@ -43,138 +42,112 @@ export const Default: StoryObj< typeof NavigatorProvider > = { children: ( <> - - -

This is the home screen.

+

This is the home screen.

- - - Navigate to child screen. - + + + Navigate to child screen. + - - Navigate to screen with horizontal overflow. - + + Navigate to screen with horizontal overflow. + - - Navigate to screen with sticky content. - + + Navigate to screen with sticky content. + - - Navigate to product screen with id 1. - + + Navigate to product screen with id 1. + - ( - - ) } - renderContent={ () => ( - ) } - /> - - - + ( + + ) } + renderContent={ () => ( <> Item 2 Item 1 + ) } + /> + - - -

This is the child screen.

- - Go back - - - +

This is the child screen.

+ + Go back + - - - - Go back - -
- - ¯\_(ツ)_/¯ - -
- - + + Go back + +
+ + ¯\_(ツ)_/¯ + +
- - - - Go back - - - -
-

A wild sticky element appears

-
- - - -
-

Another wild sticky element appears

-
- - - + + Go back + + +
+
- - - +

A wild sticky element appears

+
+
+
+ +
+

Another wild sticky element appears

+
+ +
+
+ +
@@ -223,14 +196,12 @@ function ProductDetails() { const { params } = useNavigator(); return ( - - - - Go back - -

This is the screen for the product with id: { params.id }

- - +
+ + Go back + +

This is the screen for the product with id: { params.id }

+
); } @@ -242,52 +213,36 @@ export const NestedNavigator: StoryObj< typeof NavigatorProvider > = { children: ( <> - - - - Go to first child. - - - Go to second child. - - - + + Go to first child. + + + Go to second child. + - - - This is the first child - - Go back to parent - - - + This is the first child + + Go back to parent + - - - This is the second child - - Go back to parent - - - Go to grand child. - - - + This is the second child + + Go back to parent + + + Go to grand child. + - - - This is the grand child - - Go back to parent - - - + This is the grand child + + Go back to parent + ), From 5f90e36840e9e99c92b44cbc5cc9682b4d220a2b Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 26 Aug 2024 12:24:08 +0200 Subject: [PATCH 04/13] Fix sticky screen styles after removal of Card --- .../src/navigator/stories/index.story.tsx | 26 +++++++++++++------ 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index 5c7c08c7d82d3b..dcc194e0f794db 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -114,26 +114,33 @@ export const Default: StoryObj< typeof NavigatorProvider > = { -
+
Go back
-
+

A wild sticky element appears

-
+
@@ -142,9 +149,12 @@ export const Default: StoryObj< typeof NavigatorProvider > = {
From 7a60616b0109091485d03bbff4ac8a2e8fd4d2dd Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 26 Aug 2024 12:36:26 +0200 Subject: [PATCH 05/13] Set inline padding and height on every screen --- .../src/navigator/stories/index.story.tsx | 53 +++++++++++-------- 1 file changed, 31 insertions(+), 22 deletions(-) diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index dcc194e0f794db..250a044aa60308 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -35,13 +35,22 @@ const meta: Meta< typeof NavigatorProvider > = { }; export default meta; +const StyledNavigatorScreen = ( + props: React.ComponentProps< typeof NavigatorScreen > +) => ( + +); + export const Default: StoryObj< typeof NavigatorProvider > = { args: { initialPath: '/', style: { height: '100vh', maxHeight: '450px' }, children: ( <> - +

This is the home screen.

@@ -82,16 +91,16 @@ export const Default: StoryObj< typeof NavigatorProvider > = { ) } /> - + - +

This is the child screen.

Go back - + - + Go back @@ -111,9 +120,9 @@ export const Default: StoryObj< typeof NavigatorProvider > = { ¯\_(ツ)_/¯
- + - +
= { >
- + - + - + ), }, @@ -222,21 +231,21 @@ export const NestedNavigator: StoryObj< typeof NavigatorProvider > = { initialPath: '/child2/grandchild', children: ( <> - + Go to first child. Go to second child. - - + + This is the first child Go back to parent - - + + This is the second child Go back to parent @@ -247,13 +256,13 @@ export const NestedNavigator: StoryObj< typeof NavigatorProvider > = { > Go to grand child. - - + + This is the grand child Go back to parent - + ), }, @@ -288,7 +297,7 @@ export const SkipFocus: StoryObj< typeof NavigatorProvider > = { border: '1px solid black', } } > - = { Go to child screen. - - + = { Go to parent screen. - +
Date: Mon, 26 Aug 2024 12:42:24 +0200 Subject: [PATCH 06/13] Better title semantics and typography --- .../src/navigator/stories/index.story.tsx | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index 250a044aa60308..618c57d74f7db0 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -51,7 +51,7 @@ export const Default: StoryObj< typeof NavigatorProvider > = { children: ( <> -

This is the home screen.

+

This is the home screen.

@@ -62,7 +62,7 @@ export const Default: StoryObj< typeof NavigatorProvider > = { variant="secondary" path="/overflow-child" > - Navigate to screen with horizontal overflow. + Navigate to screen with overflowing content @@ -94,13 +94,15 @@ export const Default: StoryObj< typeof NavigatorProvider > = { -

This is the child screen.

+

This is the child screen.

Go back +

This is a screen with overflowing content

+ Go back @@ -216,10 +218,11 @@ function ProductDetails() { return (
+

This is the product details screen

+

The current product id is: { params.id }

Go back -

This is the screen for the product with id: { params.id }

); } @@ -232,6 +235,8 @@ export const NestedNavigator: StoryObj< typeof NavigatorProvider > = { children: ( <> +

Home screen

+ Go to first child. @@ -240,13 +245,15 @@ export const NestedNavigator: StoryObj< typeof NavigatorProvider > = { - This is the first child +

First child screen

+ Go back to parent - This is the second child +

Second child screen

+ Go back to parent @@ -258,7 +265,8 @@ export const NestedNavigator: StoryObj< typeof NavigatorProvider > = { - This is the grand child +

Grand-child screen

+ Go back to parent @@ -303,7 +311,7 @@ export const SkipFocus: StoryObj< typeof NavigatorProvider > = { height: '100%', } } > -

Home screen

+

Home screen

Go to child screen. From 505f4f9e36b15db80464fcabaf42251fd586a9fa Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 26 Aug 2024 12:42:44 +0200 Subject: [PATCH 07/13] Add one more link to product details screen to show how it works --- packages/components/src/navigator/stories/index.story.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index 618c57d74f7db0..1a61405b565a35 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -73,6 +73,10 @@ export const Default: StoryObj< typeof NavigatorProvider > = { Navigate to product screen with id 1. + + Navigate to product screen with id 14. + + (
+
-
Date: Tue, 27 Aug 2024 18:16:07 +0200 Subject: [PATCH 11/13] Move navigator styles to decorator --- .../src/navigator/stories/index.story.tsx | 74 +++++++++++-------- 1 file changed, 42 insertions(+), 32 deletions(-) diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index 55388eed80c075..38db024969c222 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -32,25 +32,35 @@ const meta: Meta< typeof NavigatorProvider > = { controls: { expanded: true }, docs: { canvas: { sourceState: 'shown' } }, }, + decorators: [ + ( Story ) => { + return ( + <> + + + + ); + }, + ], }; export default meta; -const StyledNavigatorScreen = ( - props: React.ComponentProps< typeof NavigatorScreen > -) => ( - -); - export const Default: StoryObj< typeof NavigatorProvider > = { args: { initialPath: '/', - style: { height: 'calc(100vh - 2rem)' }, // take storybook's padding into account children: ( <> - +

This is the home screen.

@@ -95,16 +105,16 @@ export const Default: StoryObj< typeof NavigatorProvider > = { ) } /> - + - +

This is the child screen.

Go back - + - +

This is a screen with overflowing content

@@ -126,9 +136,9 @@ export const Default: StoryObj< typeof NavigatorProvider > = { ¯\_(ツ)_/¯
- + - +
= { >
- + - + - + ), }, @@ -238,7 +248,7 @@ export const NestedNavigator: StoryObj< typeof NavigatorProvider > = { initialPath: '/child2/grandchild', children: ( <> - +

Home screen

@@ -247,15 +257,15 @@ export const NestedNavigator: StoryObj< typeof NavigatorProvider > = { Go to second child. - - + +

First child screen

Go back to parent - - + +

Second child screen

@@ -267,14 +277,14 @@ export const NestedNavigator: StoryObj< typeof NavigatorProvider > = { > Go to grand child. - - + +

Grand-child screen

Go back to parent - + ), }, @@ -311,7 +321,7 @@ export const SkipFocus: StoryObj< typeof NavigatorProvider > = { marginBlockEnd: '1rem', } } > - = { Go to child screen. - - + = { Go to parent screen. - +
From 5ce1d94e965ed18722587715423df1deec35a7a8 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 27 Aug 2024 18:31:35 +0200 Subject: [PATCH 12/13] Tweak screen and provider styles --- .../src/navigator/stories/index.story.tsx | 30 ++++++++----------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index 38db024969c222..14e56877791b2b 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -41,10 +41,11 @@ const meta: Meta< typeof NavigatorProvider > = { Navigator component. Do not use outside of its source code. */ [data-wp-component="NavigatorProvider"] { height: calc(100vh - 2rem); + max-height: 250px; + } - [data-wp-component="NavigatorScreen"] { - padding-inline: 8px; - height: 100%; + [data-wp-component="NavigatorScreen"]:not([data-sticky]) { + padding: 8px; } ` } @@ -138,7 +139,7 @@ export const Default: StoryObj< typeof NavigatorProvider > = { - +
) => { goTo( path, { skipFocus: true } ); onClick?.( e ); @@ -315,29 +320,20 @@ export const SkipFocus: StoryObj< typeof NavigatorProvider > = { <>
- +

Home screen

Go to child screen. - + +

Child screen

Go to parent screen. From 1c27fbed9b62af3a7c30a17353e64dabb24a6b6d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 27 Aug 2024 18:50:13 +0200 Subject: [PATCH 13/13] Simplify Storybook examples, removing edge cases and focusing on standard usage --- .../src/navigator/stories/index.story.tsx | 227 +++--------------- 1 file changed, 35 insertions(+), 192 deletions(-) diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index 14e56877791b2b..30b9c71a368c1a 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -8,8 +8,6 @@ import type { Meta, StoryObj } from '@storybook/react'; */ import Button from '../../button'; import { VStack } from '../../v-stack'; -import Dropdown from '../../dropdown'; -import MenuItem from '../../menu-item'; import { NavigatorProvider, NavigatorScreen, @@ -17,6 +15,7 @@ import { NavigatorBackButton, useNavigator, } from '..'; +import { HStack } from '../../h-stack'; const meta: Meta< typeof NavigatorProvider > = { component: NavigatorProvider, @@ -65,229 +64,73 @@ export const Default: StoryObj< typeof NavigatorProvider > = {

This is the home screen.

- - Navigate to child screen. - - - - Navigate to screen with overflowing content - - - - Navigate to screen with sticky content. + + Go to child screen. - - Navigate to product screen with id 1. + + Go to dynamic path screen with id 1. - - Navigate to product screen with id 14. + + Go to dynamic path screen with id 2. - - ( - - ) } - renderContent={ () => ( - <> - Item 2 - Item 1 - - ) } - />

This is the child screen.

- - Go back - - + + + Go back + - -

This is a screen with overflowing content

+ + Go to grand child screen. + + + + +

This is the grand child screen.

Go back -
- - ¯\_(ツ)_/¯ - -
- - - -
- - Go back - -
-
-
-

A wild sticky element appears

-
- -
-
-
-

Another wild sticky element appears

-
- -
-
- -
- + ), }, }; -function getStickyStyles( { - bottom = 0, - bgColor = 'whitesmoke', - top = 0, - zIndex = 1, -} ): React.CSSProperties { - return { - display: 'flex', - position: 'sticky', - top, - bottom, - zIndex, - backgroundColor: bgColor, - }; -} - -function MetaphorIpsum( { quantity }: { quantity: number } ) { - const list = [ - 'A loopy clarinet’s year comes with it the thought that the fenny step-son is an ophthalmologist. The literature would have us believe that a glabrate country is not but a rhythm. A beech is a rub from the right perspective. In ancient times few can name an unglossed walrus that isn’t an unspilt trial.', - 'Authors often misinterpret the afterthought as a roseless mother-in-law, when in actuality it feels more like an uncapped thunderstorm. In recent years, some posit the tarry bottle to be less than acerb. They were lost without the unkissed timbale that composed their customer. A donna is a springtime breath.', - 'It’s an undeniable fact, really; their museum was, in this moment, a snotty beef. The swordfishes could be said to resemble prowessed lasagnas. However, the rainier authority comes from a cureless soup. Unfortunately, that is wrong; on the contrary, the cover is a powder.', - ]; - quantity = Math.min( list.length, quantity ); - return ( - <> - { list.slice( 0, quantity ).map( ( text, key ) => ( -

- { text } -

- ) ) } - - ); -} - -function ProductDetails() { +function DynamicScreen() { const { params } = useNavigator(); return ( -
-

This is the product details screen

-

The current product id is: { params.id }

+ <> +

This is the dynamic screen

+

+ This screen can parse params dynamically. The current id is:{ ' ' } + { params.id } +

Go back -
+ ); } -export const NestedNavigator: StoryObj< typeof NavigatorProvider > = { +export const WithNestedInitialPath: StoryObj< typeof NavigatorProvider > = { ...Default, args: { ...Default.args, - initialPath: '/child2/grandchild', - children: ( - <> - -

Home screen

- - - Go to first child. - - - Go to second child. - - - -

First child screen

- - - Go back to parent - - - -

Second child screen

- - - Go back to parent - - - Go to grand child. - - - -

Grand-child screen

- - - Go back to parent - - - - ), + initialPath: '/child/grandchild', }, }; @@ -328,7 +171,7 @@ export const SkipFocus: StoryObj< typeof NavigatorProvider > = { >

Home screen

- + Go to child screen. @@ -336,12 +179,12 @@ export const SkipFocus: StoryObj< typeof NavigatorProvider > = {

Child screen

- Go to parent screen. + Go back to home screen
- + Go to child screen, but keep focus on this button