From ff05520161561818a8c5b6b1f05790cc56bff814 Mon Sep 17 00:00:00 2001
From: David Vo <davidv@canva.com>
Date: Fri, 16 Aug 2024 19:19:47 +1000
Subject: [PATCH] provider/storybook: Allow *.stories.ts (#194)

The Storybook docs use `*.stories.[jt]s?(x)` as the filename format for
stories modules. https://storybook.js.org/docs/writing-stories
---
 provider/storybook/index.test.ts | 105 ++++++++++++++++---------------
 provider/storybook/index.ts      |   8 ++-
 2 files changed, 60 insertions(+), 53 deletions(-)

diff --git a/provider/storybook/index.test.ts b/provider/storybook/index.test.ts
index 8e18fbd1..2923c97a 100644
--- a/provider/storybook/index.test.ts
+++ b/provider/storybook/index.test.ts
@@ -18,28 +18,30 @@ describe('storybook', () => {
     afterAll(() => fetchMocker.disableMocks())
 
     describe('annotations', () => {
-        test('story file', async () => {
-            __test__.suppressConsoleLog = true
-            __test__.skipRewriteForOEmbed = true
-            afterEach(() => {
-                __test__.suppressConsoleLog = false
-                __test__.skipRewriteForOEmbed = false
-            })
+        test.each(['story.ts', 'story.tsx', 'stories.ts', 'stories.tsx'])(
+            'story file ext %s',
+            async fileExt => {
+                __test__.suppressConsoleLog = true
+                __test__.skipRewriteForOEmbed = true
+                afterEach(() => {
+                    __test__.suppressConsoleLog = false
+                    __test__.skipRewriteForOEmbed = false
+                })
 
-            fetchMocker.mockResponses(
-                JSON.stringify({
-                    title: 'chromatic-oembed-image',
-                    thumbnail_url: 'https://example.com/thumbnail.png',
-                    thumbnail_width: 400,
-                    thumbnail_height: 300,
-                }),
-                ['404 Not Found', { status: 404 }],
-            )
-            expect(
-                await storybook.annotations?.(
-                    {
-                        uri: 'file:///a/b.story.tsx',
-                        content: `
+                fetchMocker.mockResponses(
+                    JSON.stringify({
+                        title: 'chromatic-oembed-image',
+                        thumbnail_url: 'https://example.com/thumbnail.png',
+                        thumbnail_width: 400,
+                        thumbnail_height: 300,
+                    }),
+                    ['404 Not Found', { status: 404 }],
+                )
+                expect(
+                    await storybook.annotations?.(
+                        {
+                            uri: `file:///a/b.${fileExt}`,
+                            content: `
 const config: Meta = {
     title: 'a/b',
 }
@@ -48,39 +50,40 @@ export const Foo: Story = {}
 
 export const Bar: Story = {}
 `,
-                    },
-                    SETTINGS,
-                ),
-            ).toEqual<AnnotationsResult>([
-                {
-                    uri: 'file:///a/b.story.tsx',
-                    range: {
-                        start: { line: 5, character: 13 },
-                        end: { line: 5, character: 16 },
-                    },
-                    item: {
-                        title: '🖼️ Storybook: a/b/Foo',
-                        url: 'https://main--abc123.chromatic.com/?path=%2Fstory%2Fa-b--foo',
-                        ui: {
-                            hover: {
-                                markdown:
-                                    '<img src="https://example.com/thumbnail.png" alt="chromatic-oembed-image" width="400" height="300" />',
+                        },
+                        SETTINGS,
+                    ),
+                ).toEqual<AnnotationsResult>([
+                    {
+                        uri: `file:///a/b.${fileExt}`,
+                        range: {
+                            start: { line: 5, character: 13 },
+                            end: { line: 5, character: 16 },
+                        },
+                        item: {
+                            title: '🖼️ Storybook: a/b/Foo',
+                            url: 'https://main--abc123.chromatic.com/?path=%2Fstory%2Fa-b--foo',
+                            ui: {
+                                hover: {
+                                    markdown:
+                                        '<img src="https://example.com/thumbnail.png" alt="chromatic-oembed-image" width="400" height="300" />',
+                                },
                             },
                         },
                     },
-                },
-                {
-                    uri: 'file:///a/b.story.tsx',
-                    range: {
-                        start: { line: 7, character: 13 },
-                        end: { line: 7, character: 16 },
-                    },
-                    item: {
-                        title: '🖼️ Storybook: a/b/Bar',
-                        url: 'https://main--abc123.chromatic.com/?path=%2Fstory%2Fa-b--bar',
+                    {
+                        uri: `file:///a/b.${fileExt}`,
+                        range: {
+                            start: { line: 7, character: 13 },
+                            end: { line: 7, character: 16 },
+                        },
+                        item: {
+                            title: '🖼️ Storybook: a/b/Bar',
+                            url: 'https://main--abc123.chromatic.com/?path=%2Fstory%2Fa-b--bar',
+                        },
                     },
-                },
-            ])
-        })
+                ])
+            },
+        )
     })
 })
diff --git a/provider/storybook/index.ts b/provider/storybook/index.ts
index 5fa5e0d5..7c0b3e02 100644
--- a/provider/storybook/index.ts
+++ b/provider/storybook/index.ts
@@ -37,7 +37,7 @@ const storybook: Provider<Settings> = {
         return {
             annotations: {
                 selectors: [
-                    { path: '**/*.story.(t|j)s?(x)' },
+                    { path: '**/*.(story|stories).(t|j)s?(x)' },
                     { path: '**/*.(t|j)s(x)', contentContains: 'react' },
                 ],
             },
@@ -53,7 +53,11 @@ const storybook: Provider<Settings> = {
         }
 
         const contentLines = params.content.split(/\r?\n/)
-        const fileKind = basename(params.uri).includes('.story.') ? 'story-file' : 'component-file'
+        const fileName = basename(params.uri)
+        const fileKind =
+            fileName.includes('.story.') || fileName.includes('.stories.')
+                ? 'story-file'
+                : 'component-file'
 
         if (fileKind === 'story-file') {
             // Story file.