First working PoC

WordPress · Apr 23, 2024 · f760382 · f760382
1 parent db7c0d9
commit f760382
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 76 deletions.
diff --git a/packages/components/src/navigator/navigator-back-button/component.tsx b/packages/components/src/navigator/navigator-back-button/component.tsx
@@ -57,7 +57,7 @@ function UnconnectedNavigatorBackButton(
  */
 export const NavigatorBackButton = contextConnect(
 	UnconnectedNavigatorBackButton,
-	'NavigatorBackButton'
+	'Navigator.BackButton'
 );
 
 export default NavigatorBackButton;
diff --git a/packages/components/src/navigator/navigator-button/component.tsx b/packages/components/src/navigator/navigator-button/component.tsx
@@ -56,7 +56,7 @@ function UnconnectedNavigatorButton(
  */
 export const NavigatorButton = contextConnect(
 	UnconnectedNavigatorButton,
-	'NavigatorButton'
+	'Navigator.Button'
 );
 
 export default NavigatorButton;
diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -174,7 +174,7 @@ function UnconnectedNavigatorScreen(
  */
 export const NavigatorScreen = contextConnect(
 	UnconnectedNavigatorScreen,
-	'NavigatorScreen'
+	'Navigator.Screen'
 );
 
 export default NavigatorScreen;
diff --git a/packages/components/src/navigator/navigator-to-parent-button/component.tsx b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
@@ -60,7 +60,7 @@ function UnconnectedNavigatorToParentButton(
  */
 export const NavigatorToParentButton = contextConnect(
 	UnconnectedNavigatorToParentButton,
-	'NavigatorToParentButton'
+	'Navigator.ToParentButton'
 );
 
 export default NavigatorToParentButton;
diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx
@@ -12,10 +12,16 @@ import { VStack } from '../../v-stack';
 import Dropdown from '../../dropdown';
 import { Navigator, useNavigator } from '..';
 
-const meta: Meta< typeof NavigatorProvider > = {
-	component: NavigatorProvider,
-	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-	subcomponents: { NavigatorScreen, NavigatorButton, NavigatorBackButton },
+const meta: Meta< typeof Navigator > = {
+	component: Navigator,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Navigator.Screen': Navigator.Screen,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Navigator.Button': Navigator.Button,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Navigator.BackButton': Navigator.BackButton,
+	},
 	title: 'Components/Navigator',
 	argTypes: {
 		as: { control: { type: null } },
@@ -29,10 +35,7 @@ const meta: Meta< typeof NavigatorProvider > = {
 };
 export default meta;
 
-const Template: StoryFn< typeof NavigatorProvider > = ( {
-	style,
-	...props
-} ) => (
+const Template: StoryFn< typeof Navigator > = ( { style, ...props } ) => (
 	<Navigator
 		style={ { ...style, height: '100vh', maxHeight: '450px' } }
 		{ ...props }
@@ -43,24 +46,24 @@ const Template: StoryFn< typeof NavigatorProvider > = ( {
 					<p>This is the home screen.</p>
 
 					<VStack alignment="left">
-						<NavigatorButton variant="secondary" path="/child">
+						<Navigator.Button variant="secondary" path="/child">
 							Navigate to child screen.
-						</NavigatorButton>
+						</Navigator.Button>
 
-						<NavigatorButton
+						<Navigator.Button
 							variant="secondary"
 							path="/overflow-child"
 						>
 							Navigate to screen with horizontal overflow.
-						</NavigatorButton>
+						</Navigator.Button>
 
-						<NavigatorButton variant="secondary" path="/stickies">
+						<Navigator.Button variant="secondary" path="/stickies">
 							Navigate to screen with sticky content.
-						</NavigatorButton>
+						</Navigator.Button>
 
-						<NavigatorButton variant="secondary" path="/product/1">
+						<Navigator.Button variant="secondary" path="/product/1">
 							Navigate to product screen with id 1.
-						</NavigatorButton>
+						</Navigator.Button>
 
 						<Dropdown
 							renderToggle={ ( {
@@ -95,19 +98,19 @@ const Template: StoryFn< typeof NavigatorProvider > = ( {
 			<Card>
 				<CardBody>
 					<p>This is the child screen.</p>
-					<NavigatorBackButton variant="secondary">
+					<Navigator.BackButton variant="secondary">
 						Go back
-					</NavigatorBackButton>
+					</Navigator.BackButton>
 				</CardBody>
 			</Card>
 		</Navigator.Screen>
 
-		<NavigatorScreen path="/overflow-child">
+		<Navigator.Screen path="/overflow-child">
 			<Card>
 				<CardBody>
-					<NavigatorBackButton variant="secondary">
+					<Navigator.BackButton variant="secondary">
 						Go back
-					</NavigatorBackButton>
+					</Navigator.BackButton>
 					<div
 						style={ {
 							display: 'inline-block',
@@ -126,14 +129,14 @@ const Template: StoryFn< typeof NavigatorProvider > = ( {
 					</div>
 				</CardBody>
 			</Card>
-		</NavigatorScreen>
+		</Navigator.Screen>
 
-		<NavigatorScreen path="/stickies">
+		<Navigator.Screen path="/stickies">
 			<Card>
 				<CardHeader style={ getStickyStyles( { zIndex: 2 } ) }>
-					<NavigatorBackButton variant="secondary">
+					<Navigator.BackButton variant="secondary">
 						Go back
-					</NavigatorBackButton>
+					</Navigator.BackButton>
 				</CardHeader>
 				<CardBody>
 					<div
@@ -165,15 +168,15 @@ const Template: StoryFn< typeof NavigatorProvider > = ( {
 					<Button variant="primary">Primary noop</Button>
 				</CardFooter>
 			</Card>
-		</NavigatorScreen>
+		</Navigator.Screen>
 
 		<Navigator.Screen path="/product/:id">
 			<ProductDetails />
 		</Navigator.Screen>
 	</Navigator>
 );
 
-export const Default: StoryFn< typeof NavigatorProvider > = Template.bind( {} );
+export const Default: StoryFn< typeof Navigator > = Template.bind( {} );
 Default.args = {
 	initialPath: '/',
 };
@@ -227,7 +230,7 @@ function ProductDetails() {
 	);
 }
 
-const NestedNavigatorTemplate: StoryFn< typeof NavigatorProvider > = ( {
+const NestedNavigatorTemplate: StoryFn< typeof Navigator > = ( {
 	style,
 	...props
 } ) => (
@@ -238,22 +241,22 @@ const NestedNavigatorTemplate: StoryFn< typeof NavigatorProvider > = ( {
 		<Navigator.Screen path="/">
 			<Card>
 				<CardBody>
-					<NavigatorButton variant="secondary" path="/child1">
+					<Navigator.Button variant="secondary" path="/child1">
 						Go to first child.
-					</NavigatorButton>
-					<NavigatorButton variant="secondary" path="/child2">
+					</Navigator.Button>
+					<Navigator.Button variant="secondary" path="/child2">
 						Go to second child.
-					</NavigatorButton>
+					</Navigator.Button>
 				</CardBody>
 			</Card>
 		</Navigator.Screen>
 		<Navigator.Screen path="/child1">
 			<Card>
 				<CardBody>
 					This is the first child
-					<NavigatorToParentButton variant="secondary">
+					<Navigator.ToParentButton variant="secondary">
 						Go back to parent
-					</NavigatorToParentButton>
+					</Navigator.ToParentButton>
 				</CardBody>
 			</Card>
 		</Navigator.Screen>
@@ -310,7 +313,7 @@ const NavigatorButtonWithSkipFocus = ( {
 	);
 };
 
-export const SkipFocus: StoryFn< typeof NavigatorProvider > = ( args ) => {
+export const SkipFocus: StoryFn< typeof Navigator > = ( args ) => {
 	return <Navigator { ...args } />;
 };
 SkipFocus.args = {