feat: implement docsite for contrib packages

.storybook/preview.tsx

@@ -3,10 +3,10 @@ import type { Preview } from '@storybook/react';
 import { FluentProvider, webLightTheme } from '@fluentui/react-components';
 
 // TODO: import components and styles from the Fluent Storybook Addon when it is published
-import { FluentDocsContainer } from './components/FluentDocsContainer';
-import { FluentDocsPage } from './components/FluentDocsPage';
-import './docs-root.css';
-import './docs-root-v9.css';
+import { FluentDocsContainer } from './copied-from-fluentui-core/components/FluentDocsContainer';
+import { FluentDocsPage } from './copied-from-fluentui-core/components/FluentDocsPage';
+import './copied-from-fluentui-core/docs-root.css';
+import './copied-from-fluentui-core/docs-root-v9.css';
 
 const preview: Preview = {
   decorators: [

apps/docsite/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "jsx": "react-jsx",
     "allowJs": false,
@@ -12,6 +13,5 @@
     {
       "path": "./.storybook/tsconfig.base.json"
     }
-  ],
-  "extends": "../../tsconfig.base.json"
+  ]
 }

nx.json

@@ -22,6 +22,7 @@
       "inputs": [
         "default",
         "^production",
+        "{workspaceRoot}/.storybook/**",
         "{projectRoot}/.storybook/**/*",
         "{projectRoot}/tsconfig.storybook.json"
       ],

packages/nx-plugin/src/generators/configure-storybook/files/.storybook/main.ts.template

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import rootConfig from '../../../.storybook/main';
+import rootConfig from '<%= rootOffset %>/.storybook/main';
 
 const config: StorybookConfig = {
   ...rootConfig,

packages/nx-plugin/src/generators/configure-storybook/files/.storybook/preview.tsx.template

@@ -1,7 +1,7 @@
 import type { Preview } from '@storybook/react';
 
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import rootPreview from '../../../.storybook/preview';
+import rootPreview from '<%= rootOffset %>/.storybook/preview';
 
 const preview: Preview = {
   ...rootPreview,

packages/nx-plugin/src/generators/configure-storybook/files/.storybook/tsconfig.json.template

@@ -5,9 +5,9 @@
     , "outDir": ""
   },
   "files": [
-    "../../../node_modules/@nx/react/typings/styled-jsx.d.ts",
-    "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
-    "../../../node_modules/@nx/react/typings/image.d.ts"
+    "<%= rootOffset %>/node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "<%= rootOffset %>/node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= rootOffset %>/node_modules/@nx/react/typings/image.d.ts"
   ],
   "exclude": ["../**/*.spec.ts" , "../**/*.spec.js", "../**/*.spec.tsx", "../**/*.spec.jsx"],
   "include": [

packages/nx-plugin/src/generators/configure-storybook/generator.ts

@@ -6,6 +6,7 @@ import {
   readProjectConfiguration,
   updateJson,
   ProjectConfiguration,
+  offsetFromRoot,
 } from '@nx/devkit';
 import { configurationGenerator } from '@nx/storybook';
 import * as path from 'path';
@@ -41,7 +42,10 @@ export default async function (
   });
 
   // add our boilerplate
-  generateFiles(tree, path.join(__dirname, 'files'), projectRoot, options);
+  generateFiles(tree, path.join(__dirname, 'files'), projectRoot, {
+    ...offsetFromRoot,
+    rootOffset: [offsetFromRoot(projectRoot), '..'].join(''),
+  });
   updateSolutionTsConfig(tree, { project });
 
   await formatFiles(tree);

packages/react-tree-grid/.storybook/tsconfig.json

@@ -22,6 +22,7 @@
     "../stories/**/*.stories.tsx",
     "../stories/**/*.stories.mdx",
     "*.ts",
-    "*.js"
+    "*.js",
+    "../stories/VariantB.stories.tsx"
   ]
 }