web: require enabling Chromatic snapshot for every story manually (#3…

…0331)
sourcegraph · Feb 15, 2022 · 2afe131 · 2afe131
1 parent b5671ec
commit 2afe131
Show file tree

Hide file tree

Showing 41 changed files with 187 additions and 135 deletions.
diff --git a/client/browser/src/browser-extension/after-install-page/AfterInstallPageContent.story.tsx b/client/browser/src/browser-extension/after-install-page/AfterInstallPageContent.story.tsx
@@ -12,6 +12,7 @@ const config: Meta = {
     parameters: {
         chromatic: {
             enableDarkMode: true,
+            disableSnapshot: false,
         },
     },
 }

diff --git a/client/browser/src/browser-extension/options-menu/OptionsPage.story.tsx b/client/browser/src/browser-extension/options-menu/OptionsPage.story.tsx
@@ -21,7 +21,6 @@ const decorator: DecoratorFn = story => <BrandedStory styles={brandedStyles}>{()
 const config: Meta = {
     title: 'browser/Options/OptionsPage',
     decorators: [decorator],
-    parameters: { chromatic: { delay: 500, enableDarkMode: true } },
 }
 
 export default config
@@ -49,6 +48,14 @@ const OptionsPageWrapper: React.FunctionComponent<Partial<OptionsPageProps>> = p
 
 export const Default: Story = () => <OptionsPageWrapper />
 
+Default.parameters = {
+    chromatic: {
+        delay: 500,
+        enableDarkMode: true,
+        disableSnapshot: false,
+    },
+}
+
 export const Interactive: Story = () => {
     const [isActivated, setIsActivated] = useState(false)
     return <OptionsPageWrapper isActivated={isActivated} onToggleActivated={setIsActivated} />

diff --git a/client/browser/src/browser-extension/options-menu/OptionsPageAdvancedSettings.story.tsx b/client/browser/src/browser-extension/options-menu/OptionsPageAdvancedSettings.story.tsx
@@ -25,6 +25,7 @@ const config: Meta = {
     parameters: {
         chromatic: {
             enableDarkMode: true,
+            disableSnapshot: false,
         },
     },
 }

diff --git a/client/shared/src/actions/ActionItem.story.tsx b/client/shared/src/actions/ActionItem.story.tsx
@@ -70,6 +70,12 @@ export const CommandAction: Story = () => (
 )
 
 CommandAction.storyName = 'Command action'
+CommandAction.parameters = {
+    chromatic: {
+        enableDarkMode: true,
+        disableSnapshot: false,
+    },
+}
 
 export const LinkAction: Story = () => (
     <ActionItem

diff --git a/client/shared/src/components/CtaAlert.story.tsx b/client/shared/src/components/CtaAlert.story.tsx
@@ -15,6 +15,7 @@ const config: Meta = {
         component: CtaAlert,
         chromatic: {
             enableDarkMode: true,
+            disableSnapshot: false,
         },
     },
 }

diff --git a/client/shared/src/components/activation/ActivationDropdown.story.tsx b/client/shared/src/components/activation/ActivationDropdown.story.tsx
@@ -97,3 +97,9 @@ export const _14Completed: Story = () => (
 )
 
 _14Completed.storyName = '1/4 completed'
+_14Completed.parameters = {
+    chromatic: {
+        enableDarkMode: true,
+        disableSnapshot: false,
+    },
+}
diff --git a/client/shared/src/hover/HoverOverlay.story.tsx b/client/shared/src/hover/HoverOverlay.story.tsx
@@ -27,6 +27,7 @@ const config: Meta = {
     parameters: {
         chromatic: {
             enableDarkMode: true,
+            disableSnapshot: false,
         },
     },
 }

diff --git a/client/shared/src/notifications/NotificationItem.story.tsx b/client/shared/src/notifications/NotificationItem.story.tsx
@@ -77,3 +77,9 @@ export const WithProgress: Story = () => {
 }
 
 WithProgress.storyName = 'With progress'
+WithProgress.parameters = {
+    chromatic: {
+        enableDarkMode: true,
+        disableSnapshot: false,
+    },
+}
diff --git a/client/storybook/src/preview.ts b/client/storybook/src/preview.ts
@@ -28,6 +28,8 @@ export const parameters = {
         light: themeLight,
         dark: themeDark,
     },
+    // disables snapshotting for all stories by default
+    chromatic: { disableSnapshot: true },
 }
 
 configureActions({ depth: 100, limit: 20 })

diff --git a/client/web/src/components/WebHoverOverlay/WebHoverOverlay.story.tsx b/client/web/src/components/WebHoverOverlay/WebHoverOverlay.story.tsx
@@ -33,6 +33,10 @@ const { add } = storiesOf('web/WebHoverOverlay', module)
             url:
                 'https://www.figma.com/file/NIsN34NH7lPu04olBzddTw/Design-Refresh-Systemization-source-of-truth?node-id=2877%3A35469',
         },
+        chromatic: {
+            enableDarkMode: true,
+            disableSnapshot: false,
+        },
     })
 
 add('Loading', () => (

diff --git a/client/web/src/marketing/SurveyPage.story.tsx b/client/web/src/marketing/SurveyPage.story.tsx
@@ -6,6 +6,7 @@ import { WebStory } from '@sourcegraph/web/src/components/WebStory'
 
 import { SurveyPage } from './SurveyPage'
 import { submitSurveyMock } from './SurveyPage.mocks'
+import { SurveyToast } from './SurveyToast'
 
 const decorator: DecoratorFn = story => <WebStory>{() => <div className="container mt-3">{story()}</div>}</WebStory>
 
@@ -21,3 +22,5 @@ export const Page: Story = () => (
         <SurveyPage authenticatedUser={null} forceScore="10" />
     </MockedStoryProvider>
 )
+
+export const Toast: Story = () => <SurveyToast forceVisible={true} />
diff --git a/client/web/src/marketing/SurveyToast.story.tsx b/client/web/src/marketing/SurveyToast.story.tsx
diff --git a/client/web/src/nav/Feedback/FeedbackPrompt.story.tsx b/client/web/src/nav/Feedback/FeedbackPrompt.story.tsx
@@ -1,5 +1,5 @@
 import { MockedResponse } from '@apollo/client/testing'
-import { Meta } from '@storybook/react'
+import { Meta, Story } from '@storybook/react'
 import React from 'react'
 
 import { BrandedStory } from '@sourcegraph/branded/src/components/BrandedStory'
@@ -32,6 +32,13 @@ const config: Meta = {
         ),
     ],
     parameters: {
+        /**
+         * Uncomment this once Storybook is upgraded to v6.4.* and the `play` function
+         * is used to show the feedback prompt component.
+         *
+         * https://www.chromatic.com/docs/hoverfocus#javascript-triggered-hover-states
+         */
+        // chromatic: { disableSnapshot: false },
         component: FeedbackPrompt,
         design: {
             type: 'figma',
@@ -43,7 +50,7 @@ const config: Meta = {
 
 export default config
 
-export const FeedbackPromptExample = () => (
+export const FeedbackPromptExample: Story = () => (
     <>
         <h1>This is a feedbackPrompt</h1>
         <FeedbackPrompt routes={[]} />

diff --git a/client/wildcard/src/components/Alert/Alert.story.tsx b/client/wildcard/src/components/Alert/Alert.story.tsx
@@ -30,6 +30,7 @@ const config: Meta = {
         component: Alert,
         chromatic: {
             enableDarkMode: true,
+            disableSnapshot: false,
         },
         design: [
             {

diff --git a/client/wildcard/src/components/Badge/Badge.story.tsx b/client/wildcard/src/components/Badge/Badge.story.tsx
@@ -21,6 +21,7 @@ const config: Meta = {
         component: Badge,
         chromatic: {
             enableDarkMode: true,
+            disableSnapshot: false,
         },
         design: {
             type: 'figma',

diff --git a/client/wildcard/src/components/Badge/ProductStatusBadge.story.tsx b/client/wildcard/src/components/Badge/ProductStatusBadge.story.tsx
@@ -20,6 +20,7 @@ const config: Meta = {
         component: ProductStatusBadge,
         chromatic: {
             enableDarkMode: true,
+            disableSnapshot: false,
         },
         design: {
             type: 'figma',

diff --git a/client/wildcard/src/components/Button/story/Button.story.tsx b/client/wildcard/src/components/Button/story/Button.story.tsx
@@ -14,6 +14,7 @@ import { ButtonVariants } from './ButtonVariants'
 
 const config: Meta = {
     title: 'wildcard/Button',
+    component: Button,
 
     decorators: [
         story => (
@@ -23,9 +24,6 @@ const config: Meta = {
 
     parameters: {
         component: Button,
-        chromatic: {
-            enableDarkMode: true,
-        },
         design: {
             type: 'figma',
             name: 'Figma',
@@ -106,3 +104,10 @@ export const AllButtons: Story = () => (
         </Button>
     </div>
 )
+
+AllButtons.parameters = {
+    chromatic: {
+        enableDarkMode: true,
+        disableSnapshot: false,
+    },
+}
diff --git a/client/wildcard/src/components/ButtonLink/ButtonLink.story.tsx b/client/wildcard/src/components/ButtonLink/ButtonLink.story.tsx
@@ -23,6 +23,7 @@ const Config: Meta = {
         component: ButtonLink,
         chromatic: {
             enableDarkMode: true,
+            disableSnapshot: false,
         },
     },
 }

diff --git a/.../src/components/Card/story/Card.story.tsx → ...ldcard/src/components/Card/Card.story.tsx b/.../src/components/Card/story/Card.story.tsx → ...ldcard/src/components/Card/Card.story.tsx
@@ -5,11 +5,14 @@ import { BrandedStory } from '@sourcegraph/branded/src/components/BrandedStory'
 import { Toggle } from '@sourcegraph/branded/src/components/Toggle'
 import webStyles from '@sourcegraph/web/src/SourcegraphWebApp.scss'
 
-import { Card, CardBody, CardFooter, CardHeader, CardSubtitle, CardText, CardTitle } from '..'
-import { Button, Grid } from '../..'
+import { Button } from '../Button'
+import { Grid } from '../Grid'
+
+import { Card, CardBody, CardFooter, CardHeader, CardSubtitle, CardText, CardTitle } from '.'
 
 const config: Meta = {
     title: 'wildcard/Card',
+    component: Card,
 
     decorators: [
         story => (
@@ -21,6 +24,7 @@ const config: Meta = {
         component: Card,
         chromatic: {
             enableDarkMode: true,
+            disableSnapshot: false,
         },
         design: {
             type: 'figma',

diff --git a/client/wildcard/src/components/Container/Container.story.tsx b/client/wildcard/src/components/Container/Container.story.tsx
@@ -15,6 +15,7 @@ const decorator: DecoratorFn = story => (
 
 const config: Meta = {
     title: 'wildcard/Container',
+    component: Container,
     decorators: [decorator],
 }
 
@@ -89,6 +90,7 @@ export const Overview: Story = () => (
 Overview.parameters = {
     chromatic: {
         enableDarkMode: true,
+        disableSnapshot: false,
     },
     design: {
         type: 'figma',

diff --git a/client/wildcard/src/components/Feedback/FeedbackBadge/FeedbackBadge.story.tsx b/client/wildcard/src/components/Feedback/FeedbackBadge/FeedbackBadge.story.tsx
@@ -19,6 +19,7 @@ const config: Meta = {
         component: FeedbackBadge,
         chromatic: {
             enableDarkMode: true,
+            disableSnapshot: false,
         },
     },
 }

diff --git a/client/wildcard/src/components/Feedback/FeedbackText/FeedbackText.story.tsx b/client/wildcard/src/components/Feedback/FeedbackText/FeedbackText.story.tsx
@@ -18,6 +18,7 @@ const config: Meta = {
         component: FeedbackText,
         chromatic: {
             enableDarkMode: true,
+            disableSnapshot: false,
         },
     },
 }

diff --git a/client/wildcard/src/components/Form/Checkbox/Checkbox.story.tsx b/client/wildcard/src/components/Form/Checkbox/Checkbox.story.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react'
+import { Meta, Story } from '@storybook/react'
 import React, { useCallback } from 'react'
 
 import { BrandedStory } from '@sourcegraph/branded/src/components/BrandedStory'
@@ -19,9 +19,6 @@ const config: Meta = {
 
     parameters: {
         component: Checkbox,
-        chromatic: {
-            enableDarkMode: true,
-        },
         design: {
             type: 'figma',
             name: 'Figma',
@@ -54,7 +51,7 @@ const BaseCheckbox = ({ name, ...props }: { name: string } & Pick<CheckboxProps,
     )
 }
 
-export const CheckboxExamples: React.FunctionComponent = () => (
+export const CheckboxExamples: Story = () => (
     <>
         <h1>Checkbox</h1>
         <Grid columnCount={4}>
@@ -77,3 +74,10 @@ export const CheckboxExamples: React.FunctionComponent = () => (
         </Grid>
     </>
 )
+
+CheckboxExamples.parameters = {
+    chromatic: {
+        enableDarkMode: true,
+        disableSnapshot: false,
+    },
+}
diff --git a/client/wildcard/src/components/Form/Input/Input.story.tsx b/client/wildcard/src/components/Form/Input/Input.story.tsx
@@ -19,6 +19,7 @@ const Story: Meta = {
         component: Input,
         chromatic: {
             enableDarkMode: true,
+            disableSnapshot: false,
         },
         design: {
             type: 'figma',

diff --git a/client/wildcard/src/components/Form/RadioButton/RadioButton.story.tsx b/client/wildcard/src/components/Form/RadioButton/RadioButton.story.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react'
+import { Meta, Story } from '@storybook/react'
 import React, { useCallback } from 'react'
 
 import { BrandedStory } from '@sourcegraph/branded/src/components/BrandedStory'
@@ -19,9 +19,6 @@ const config: Meta = {
 
     parameters: {
         component: RadioButton,
-        chromatic: {
-            enableDarkMode: true,
-        },
         design: {
             type: 'figma',
             name: 'Figma',
@@ -76,7 +73,7 @@ const BaseRadio = ({ name, ...props }: Pick<RadioButtonProps, 'name' | 'isValid'
     )
 }
 
-export const RadioExamples: React.FunctionComponent = () => (
+export const RadioExamples: Story = () => (
     <>
         <h1>Radio</h1>
         <Grid columnCount={4}>
@@ -99,3 +96,10 @@ export const RadioExamples: React.FunctionComponent = () => (
         </Grid>
     </>
 )
+
+RadioExamples.parameters = {
+    chromatic: {
+        enableDarkMode: true,
+        disableSnapshot: false,
+    },
+}