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/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index 633d5897678cbf..30b9c71a368c1a 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -7,9 +7,7 @@ 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 { NavigatorProvider, NavigatorScreen, @@ -17,6 +15,7 @@ import { NavigatorBackButton, useNavigator, } from '..'; +import { HStack } from '../../h-stack'; const meta: Meta< typeof NavigatorProvider > = { component: NavigatorProvider, @@ -32,268 +31,106 @@ const meta: Meta< typeof NavigatorProvider > = { controls: { expanded: true }, docs: { canvas: { sourceState: 'shown' } }, }, + decorators: [ + ( Story ) => { + return ( + <> + + + + ); + }, + ], }; export default meta; export const Default: StoryObj< typeof NavigatorProvider > = { args: { initialPath: '/', - style: { height: '100vh', maxHeight: '450px' }, children: ( <> - - -

This is the home screen.

+

This is the home screen.

- - - Navigate to child screen. - - - - Navigate to screen with horizontal overflow. - - - - 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. + - void; - } ) => ( - - ) } - renderContent={ () => ( - - Go - Stuff - - ) } - /> - - - + + Go to dynamic path screen with id 2. + + - - -

This is the child screen.

- - Go back - - - - +

This is the child screen.

+ + + Go back + - - - - - Go back - -
- - ¯\_(ツ)_/¯ - -
- - + + Go to grand child screen. + + - - - - - Go back - - - -
-

A wild sticky element appears

-
- - - -
-

Another wild sticky element appears

-
- - - - - - + +

This is the grand child screen.

+ + Go back + - + ), }, }; -function getStickyStyles( { - bottom = 0, - bgColor = 'whitesmoke', - top = 0, - zIndex = 1, -} ): React.CSSProperties { - return { - display: 'flex', - position: 'sticky', - top, - bottom, - zIndex, - backgroundColor: bgColor, - }; -} +function DynamicScreen() { + const { params } = useNavigator(); -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 } -

- ) ) } +

This is the dynamic screen

+

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

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

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

- - - ); -} - -export const NestedNavigator: StoryObj< typeof NavigatorProvider > = { +export const WithNestedInitialPath: StoryObj< typeof NavigatorProvider > = { ...Default, args: { ...Default.args, - 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 - - - Go to grand child. - - - - - - - - This is the grand child - - Go back to parent - - - - - - ), + initialPath: '/child/grandchild', }, }; @@ -307,6 +144,10 @@ const NavigatorButtonWithSkipFocus = ( { return (