From 5dc28f437566f6b4dda991849fd775f0a9c1161f Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Sat, 29 May 2021 16:28:34 +0200
Subject: [PATCH] storybook,core-components: fix storybook config and Link and
 Button storybooks

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .../src/components/Button/Button.stories.tsx  | 31 ++++++++++++-------
 .../src/components/Link/Link.stories.tsx      | 30 +++++++++++-------
 packages/storybook/.storybook/main.js         |  6 +---
 3 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/packages/core-components/src/components/Button/Button.stories.tsx b/packages/core-components/src/components/Button/Button.stories.tsx
index e51a7dc0da..0fee0300ab 100644
--- a/packages/core-components/src/components/Button/Button.stories.tsx
+++ b/packages/core-components/src/components/Button/Button.stories.tsx
@@ -13,13 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { FunctionComponentFactory } from 'react';
+import React, { ComponentType } from 'react';
 import { Button } from './Button';
 import { MemoryRouter, useLocation } from 'react-router-dom';
-import {
-  createExternalRouteRef,
-  useRouteRef,
-} from '@backstage/core-plugin-api';
+import { createRouteRef, useRouteRef } from '@backstage/core-plugin-api';
 import {
   Divider,
   Link,
@@ -29,8 +26,13 @@ import {
   Typography,
   Button as MaterialButton,
 } from '@material-ui/core';
+// We don't want to export RoutingProvider from core-app-api, but it's way easier to
+// use here. This hack only works in storybook stories.
+// TODO: Export a nicer to user routing provider, perhaps from test-utils
+// eslint-disable-next-line monorepo/no-internal-import
+import { RoutingProvider } from '@backstage/core-app-api/src/routing/RoutingProvider';
 
-const routeRef = createExternalRouteRef({
+const routeRef = createRouteRef({
   id: 'storybook.test-route',
 });
 
@@ -43,7 +45,7 @@ export default {
   title: 'Inputs/Button',
   component: Button,
   decorators: [
-    (storyFn: FunctionComponentFactory<{}>) => (
+    (Story: ComponentType<{}>) => (
       <>
         <Typography>
           A collection of buttons that should be used in the Backstage
@@ -57,12 +59,19 @@ export default {
         <Divider />
 
         <MemoryRouter>
-          <div>
+          <RoutingProvider
+            routeBindings={new Map()}
+            routeObjects={[]}
+            routeParents={new Map()}
+            routePaths={new Map([[routeRef, '/hello']])}
+          >
             <div>
-              <Location />
+              <div>
+                <Location />
+              </div>
+              <Story />
             </div>
-            {storyFn()}
-          </div>
+          </RoutingProvider>
         </MemoryRouter>
       </>
     ),
diff --git a/packages/core-components/src/components/Link/Link.stories.tsx b/packages/core-components/src/components/Link/Link.stories.tsx
index f0883e0221..ec5278133e 100644
--- a/packages/core-components/src/components/Link/Link.stories.tsx
+++ b/packages/core-components/src/components/Link/Link.stories.tsx
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { FunctionComponentFactory } from 'react';
+import React, { ComponentType } from 'react';
 import { Link } from './Link';
 import {
   MemoryRouter,
@@ -21,12 +21,13 @@ import {
   useLocation,
   NavLink as RouterNavLink,
 } from 'react-router-dom';
-import {
-  createExternalRouteRef,
-  useRouteRef,
-} from '@backstage/core-plugin-api';
+import { createRouteRef, useRouteRef } from '@backstage/core-plugin-api';
+// We don't want to export RoutingProvider from core-app-api, but it's way easier to
+// use here. This hack only works in storybook stories.
+// eslint-disable-next-line monorepo/no-internal-import
+import { RoutingProvider } from '@backstage/core-app-api/src/routing/RoutingProvider';
 
-const routeRef = createExternalRouteRef({
+const routeRef = createRouteRef({
   id: 'storybook.test-route',
 });
 
@@ -39,14 +40,21 @@ export default {
   title: 'Navigation/Link',
   component: Link,
   decorators: [
-    (storyFn: FunctionComponentFactory<{}>) => (
+    (Story: ComponentType<{}>) => (
       <MemoryRouter>
-        <div>
+        <RoutingProvider
+          routeBindings={new Map()}
+          routeObjects={[]}
+          routeParents={new Map()}
+          routePaths={new Map([[routeRef, '/hello']])}
+        >
           <div>
-            <Location />
+            <div>
+              <Location />
+            </div>
+            <Story />
           </div>
-          {storyFn()}
-        </div>
+        </RoutingProvider>
       </MemoryRouter>
     ),
   ],
diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
index cd2d3f24b0..3fdf741cb4 100644
--- a/packages/storybook/.storybook/main.js
+++ b/packages/storybook/.storybook/main.js
@@ -3,8 +3,7 @@ const WebpackPluginFailBuildOnWarning = require('./webpack-plugin-fail-build-on-
 
 module.exports = {
   stories: [
-    '../../components/src/layout/**/*.stories.tsx',
-    '../../components/src/components/**/*.stories.tsx',
+    '../../core-components/src/**/*.stories.tsx',
     '../../../plugins/**/src/**/*.stories.tsx',
   ],
   addons: [
@@ -14,9 +13,6 @@ module.exports = {
     'storybook-dark-mode/register',
   ],
   webpackFinal: async config => {
-    /* eslint-disable-next-line no-restricted-syntax */
-    const componentsSrc = path.resolve(__dirname, '../../components/src');
-
     // Mirror config in packages/cli/src/lib/bundler
     config.resolve.mainFields = ['browser', 'module', 'main'];