fix: add prefix to packages story titles (#252)

Author: dmytrokirpa

apps/docsite/project.json

@@ -13,7 +13,6 @@
       "options": {
         "port": 4400,
         "configDir": "apps/docsite/.storybook",
-        "docs": true,
         "docsMode": true
       },
       "configurations": {
@@ -28,7 +27,6 @@
       "options": {
         "outputDir": "dist/storybook/docsite",
         "configDir": "apps/docsite/.storybook",
-        "docs": true,
         "docsMode": true
       },
       "configurations": {

change/@fluentui-contrib-react-keytips-3771f4cd-49f4-48ff-a40a-30cb83e0610f.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: make stories title consistent with other packages",
+  "packageName": "@fluentui-contrib/react-keytips",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/nx-plugin/src/generators/component/files/stories/__componentName__/index.stories.tsx.template

@@ -1,9 +1,10 @@
-import { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { <%= componentName %> } from '<%= npmScope %>/<%= name %>';
 export { Default } from './Default.stories';
 
-const meta: Meta<typeof <%= componentName %>> = {
+const meta = {
+  title: 'Packages/<%= name %>/<%= componentName %>',
   component: <%= componentName %>,
-};
+} satisfies Meta<typeof <%= componentName %>>;
 
 export default meta;

packages/nx-plugin/src/generators/component/generator.spec.ts

@@ -14,7 +14,7 @@ describe('component generator', () => {
   let tree: Tree;
   const options: ComponentGeneratorSchema = {
     name: 'hello-world',
-    componentName: 'foo',
+    componentName: 'Foo',
   };
 
   beforeEach(async () => {
@@ -30,23 +30,42 @@ describe('component generator', () => {
 
     expect(
       tree.children(
-        joinPathFragments(config.sourceRoot as string, 'components/foo')
+        joinPathFragments(config.sourceRoot as string, 'components/Foo')
       )
     ).toMatchInlineSnapshot(`
       [
-        "foo.styles.ts",
-        "foo.test.tsx",
-        "foo.tsx",
+        "Foo.styles.ts",
+        "Foo.test.tsx",
+        "Foo.tsx",
         "index.ts",
       ]
     `);
 
-    expect(tree.children(joinPathFragments(config.root, 'stories/foo')))
+    expect(tree.children(joinPathFragments(config.root, 'stories/Foo')))
       .toMatchInlineSnapshot(`
       [
         "Default.stories.tsx",
         "index.stories.tsx",
       ]
     `);
+
+    const story = tree.read(
+      joinPathFragments(config.root, 'stories/Foo/index.stories.tsx'),
+      'utf8'
+    );
+
+    expect(story).toMatchInlineSnapshot(`
+      "import type { Meta } from '@storybook/react';
+      import { Foo } from '@fluentui-contrib/hello-world';
+      export { Default } from './Default.stories';
+
+      const meta = {
+        title: 'Packages/hello-world/Foo',
+        component: Foo,
+      } satisfies Meta<typeof Foo>;
+
+      export default meta;
+      "
+    `);
   });
 });

packages/react-keytips/stories/index.stories.ts

@@ -6,7 +6,7 @@ export { DynamicStory as Dynamic } from './Dynamic.stories';
 export { OverflowStory as Overflow } from './OverflowMenu.stories';
 
 const meta = {
-  title: 'Keytips',
+  title: 'Packages/react-keytips',
   component: Keytips,
 } satisfies Meta<typeof Keytips>;