Navigator: refactor Storybook code to TypeScript and controls (#44979)

* Rename file

* Fix TypeScript errors

* Rename individual components s exports

* Refactor stories to use controls and show TS-generated docs

* Simplify Sticky to styles helper, remove emotion utilities

* CHANGELOG

* Add CHANGELOG entry from related Navigator PR

packages/components/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Bug Fix
 
 -   `FontSizePicker`: Ensure that fluid font size presets appear correctly in the UI controls ([#44791](https://github.com/WordPress/gutenberg/pull/44791)).
+-   `Navigator`: prevent partially hiding focus ring styles, by removing unnecessary overflow rules on `NavigatorScreen` ([#44973](https://github.com/WordPress/gutenberg/pull/44973)).
 -   `Navigator`: restore focus only once per location  ([#44972](https://github.com/WordPress/gutenberg/pull/44972)).
 
 ### Documentation
@@ -16,6 +17,7 @@
 -   `Modal`: Convert to TypeScript ([#42949](https://github.com/WordPress/gutenberg/pull/42949)).
 -   `Sandbox`: Use `toString` to create observe and resize script string ([#42872](https://github.com/WordPress/gutenberg/pull/42872)).
 -   `Navigator`: refactor unit tests to TypeScript and to `user-event` ([#44970](https://github.com/WordPress/gutenberg/pull/44970)).
+-   `Navigator`: Refactor Storybook code to TypeScript and controls ([#44979](https://github.com/WordPress/gutenberg/pull/44979)).
 
 ## 21.2.0 (2022-10-05)
 

packages/components/src/navigator/index.ts

@@ -1,5 +1,5 @@
-export { default as NavigatorProvider } from './navigator-provider';
-export { default as NavigatorScreen } from './navigator-screen';
-export { default as NavigatorButton } from './navigator-button';
-export { default as NavigatorBackButton } from './navigator-back-button';
+export { NavigatorProvider } from './navigator-provider';
+export { NavigatorScreen } from './navigator-screen';
+export { NavigatorButton } from './navigator-button';
+export { NavigatorBackButton } from './navigator-back-button';
 export { default as useNavigator } from './use-navigator';

packages/components/src/navigator/navigator-back-button/component.tsx

@@ -11,7 +11,7 @@ import { View } from '../../view';
 import { useNavigatorBackButton } from './hook';
 import type { NavigatorBackButtonProps } from '../types';
 
-function NavigatorBackButton(
+function UnconnectedNavigatorBackButton(
 	props: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -54,9 +54,9 @@ function NavigatorBackButton(
  * );
  * ```
  */
-const ConnectedNavigatorBackButton = contextConnect(
-	NavigatorBackButton,
+export const NavigatorBackButton = contextConnect(
+	UnconnectedNavigatorBackButton,
 	'NavigatorBackButton'
 );
 
-export default ConnectedNavigatorBackButton;
+export default NavigatorBackButton;

packages/components/src/navigator/navigator-back-button/index.ts

@@ -1 +1 @@
-export { default } from './component';
+export { default as NavigatorBackButton } from './component';

packages/components/src/navigator/navigator-button/component.tsx

@@ -11,7 +11,7 @@ import { View } from '../../view';
 import { useNavigatorButton } from './hook';
 import type { NavigatorButtonProps } from '../types';
 
-function NavigatorButton(
+function UnconnectedNavigatorButton(
 	props: WordPressComponentProps< NavigatorButtonProps, 'button' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -53,9 +53,9 @@ function NavigatorButton(
  * );
  * ```
  */
-const ConnectedNavigatorButton = contextConnect(
-	NavigatorButton,
+export const NavigatorButton = contextConnect(
+	UnconnectedNavigatorButton,
 	'NavigatorButton'
 );
 
-export default ConnectedNavigatorButton;
+export default NavigatorButton;

packages/components/src/navigator/navigator-button/index.ts

@@ -1 +1 @@
-export { default } from './component';
+export { default as NavigatorButton } from './component';

packages/components/src/navigator/navigator-provider/component.tsx

@@ -26,7 +26,7 @@ import type {
 	NavigatorContext as NavigatorContextType,
 } from '../types';
 
-function NavigatorProvider(
+function UnconnectedNavigatorProvider(
 	props: WordPressComponentProps< NavigatorProviderProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -131,9 +131,9 @@ function NavigatorProvider(
  * );
  * ```
  */
-const ConnectedNavigatorProvider = contextConnect(
-	NavigatorProvider,
+export const NavigatorProvider = contextConnect(
+	UnconnectedNavigatorProvider,
 	'NavigatorProvider'
 );
 
-export default ConnectedNavigatorProvider;
+export default NavigatorProvider;

packages/components/src/navigator/navigator-provider/index.ts

@@ -1 +1 @@
-export { default } from './component';
+export { default as NavigatorProvider } from './component';

packages/components/src/navigator/navigator-screen/component.tsx

@@ -42,7 +42,10 @@ type Props = Omit<
 	keyof MotionProps
 >;
 
-function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
+function UnconnectedNavigatorScreen(
+	props: Props,
+	forwardedRef: ForwardedRef< any >
+) {
 	const { children, className, path, ...otherProps } = useContextSystem(
 		props,
 		'NavigatorScreen'
@@ -208,9 +211,9 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
  * );
  * ```
  */
-const ConnectedNavigatorScreen = contextConnect(
-	NavigatorScreen,
+export const NavigatorScreen = contextConnect(
+	UnconnectedNavigatorScreen,
 	'NavigatorScreen'
 );
 
-export default ConnectedNavigatorScreen;
+export default NavigatorScreen;

packages/components/src/navigator/navigator-screen/index.ts

@@ -1 +1 @@
-export { default } from './component';
+export { default as NavigatorScreen } from './component';