diff --git a/docs/shared/core-features/explore-graph.md b/docs/shared/core-features/explore-graph.md
index 57082bdf50623..3165ccc3628e0 100644
--- a/docs/shared/core-features/explore-graph.md
+++ b/docs/shared/core-features/explore-graph.md
@@ -126,7 +126,8 @@ Try playing around with a [fully interactive graph on a sample repo](https://nrw
"affectedProjectIds": [],
"focus": null,
"groupByFolder": false,
- "exclude": []
+ "exclude": [],
+ "enableTooltips": true
}
```
diff --git a/graph/.storybook/main.js b/graph/.storybook/main.js
new file mode 100644
index 0000000000000..1492ac61f6fd0
--- /dev/null
+++ b/graph/.storybook/main.js
@@ -0,0 +1,11 @@
+module.exports = {
+ stories: [],
+ addons: ['@storybook/addon-essentials'],
+ // uncomment the property below if you want to apply some webpack config globally
+ // webpackFinal: async (config, { configType }) => {
+ // // Make whatever fine-grained changes you need that should apply to all storybook configs
+
+ // // Return the altered config
+ // return config;
+ // },
+};
diff --git a/graph/.storybook/preview.js b/graph/.storybook/preview.js
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/.storybook/tsconfig.json b/graph/.storybook/tsconfig.json
similarity index 85%
rename from .storybook/tsconfig.json
rename to graph/.storybook/tsconfig.json
index 7dd91521d33ee..e81ef225b3c65 100644
--- a/.storybook/tsconfig.json
+++ b/graph/.storybook/tsconfig.json
@@ -1,5 +1,5 @@
{
- "extends": "../tsconfig.base.json",
+ "extends": "../../tsconfig.base.json",
"exclude": [
"../**/*.spec.js",
"../**/*.test.js",
diff --git a/graph/client/.storybook/main.js b/graph/client/.storybook/main.js
index d6adb0a4b87e5..52ee9e27b94a1 100644
--- a/graph/client/.storybook/main.js
+++ b/graph/client/.storybook/main.js
@@ -1,4 +1,4 @@
-const rootMain = require('../../../.storybook/main');
+const rootMain = require('../../.storybook/main');
module.exports = {
...rootMain,
diff --git a/graph/client/.storybook/preview.js b/graph/client/.storybook/preview.js
index 4a62262ba7560..7ecdbaf4b9b62 100644
--- a/graph/client/.storybook/preview.js
+++ b/graph/client/.storybook/preview.js
@@ -3,16 +3,10 @@ import '../src/styles.scss';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
-import { themes } from '@storybook/theming';
+import { rootParameters } from '../../.storybook/preview';
export const parameters = {
- darkMode: {
- // Override the default dark theme
- dark: { ...themes.dark, appContentBg: 'rgb(15, 23, 42, 1)' },
- // Override the default light theme
- light: themes.normal,
- stylePreview: true,
- },
+ ...rootParameters,
};
export const decorators = [
(Story, context) => {
diff --git a/graph/client/.storybook/tailwind-imports.css b/graph/client/.storybook/tailwind-imports.css
new file mode 100644
index 0000000000000..b5c61c956711f
--- /dev/null
+++ b/graph/client/.storybook/tailwind-imports.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/graph/client/src/app/app.tsx b/graph/client/src/app/app.tsx
index 57c1ba8d05a04..176498dc88515 100644
--- a/graph/client/src/app/app.tsx
+++ b/graph/client/src/app/app.tsx
@@ -1,10 +1,6 @@
import { themeInit } from './theme-resolver';
import { rankDirInit } from './rankdir-resolver';
-import {
- createBrowserRouter,
- createHashRouter,
- RouterProvider,
-} from 'react-router-dom';
+import { RouterProvider } from 'react-router-dom';
import { getRouter } from './get-router';
themeInit();
@@ -13,5 +9,3 @@ rankDirInit();
export function App() {
return
- tags
-
- {tags.join(', ')}
-
No environment could be found. Please run{' '}
npx nx run graph-client:generate-dev-environment-js. @@ -22,7 +22,7 @@ if (!window.appConfig) { document.getElementById('app') ); } else { - ReactDOM.render( + render(
{description}
: null} + {type !== 'implicit' && fileDependencies?.length > 0 ? (
+ tags
+
+ {tags.join(', ')}
+
{description}
: null} + {children} +{description}
: null} +