Merge pull request #17245 from storybookjs/fix-prettier-2-3-formattin…

…g-main Fix prettier 2.3 formatting on main
storybookjs · Jan 15, 2022 · ee5c044 · ee5c044
2 parents 3a0fd74 + c3311c0
commit ee5c044
Show file tree

Hide file tree

Showing 107 changed files with 946 additions and 1,046 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -222,7 +222,7 @@ jobs:
           # Do not test CRA here because it's done in PnP part
           # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
           # TODO: Add `angular` as soon as Storybook is compatible with Angular 13
-          command: yarn test:e2e-framework vue3 angular12 angular11 web_components_typescript web_components_lit2
+          command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2
           no_output_timeout: 5m
       - store_artifacts:
           path: /tmp/cypress-record

diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx
@@ -94,9 +94,10 @@ export const A11YPanel: React.FC = () => {
     emit(EVENTS.MANUAL, storyId);
   }, [storyId]);
 
-  const manualActionItems = useMemo(() => [{ title: 'Run test', onClick: handleManual }], [
-    handleManual,
-  ]);
+  const manualActionItems = useMemo(
+    () => [{ title: 'Run test', onClick: handleManual }],
+    [handleManual]
+  );
   const readyActionItems = useMemo(
     () => [
       {

diff --git a/addons/actions/src/preset/addArgsHelpers.test.ts b/addons/actions/src/preset/addArgsHelpers.test.ts
@@ -7,53 +7,53 @@ describe('actions parameter enhancers', () => {
     const argTypes = { onClick: {}, onFocus: {}, somethingElse: {} };
 
     it('should add actions that match a pattern', () => {
-      const args = inferActionsFromArgTypesRegex(({
+      const args = inferActionsFromArgTypesRegex({
         initialArgs: {},
         argTypes,
         parameters,
-      } as unknown) as StoryContext);
+      } as unknown as StoryContext);
       expect(args).toEqual({
         onClick: expect.any(Function),
         onFocus: expect.any(Function),
       });
     });
 
     it('should NOT override pre-existing args', () => {
-      const args = inferActionsFromArgTypesRegex(({
+      const args = inferActionsFromArgTypesRegex({
         initialArgs: { onClick: 'pre-existing value' },
         argTypes,
         parameters,
-      } as unknown) as StoryContext);
+      } as unknown as StoryContext);
       expect(args).toEqual({ onFocus: expect.any(Function) });
     });
 
     it('should NOT override pre-existing args, if null', () => {
-      const args = inferActionsFromArgTypesRegex(({
+      const args = inferActionsFromArgTypesRegex({
         initialArgs: { onClick: null },
         argTypes,
         parameters,
-      } as unknown) as StoryContext);
+      } as unknown as StoryContext);
       expect(args).toEqual({ onFocus: expect.any(Function) });
     });
 
     it('should override pre-existing args, if undefined', () => {
-      const args = inferActionsFromArgTypesRegex(({
+      const args = inferActionsFromArgTypesRegex({
         initialArgs: { onClick: undefined },
         argTypes,
         parameters,
-      } as unknown) as StoryContext);
+      } as unknown as StoryContext);
       expect(args).toEqual({ onClick: expect.any(Function), onFocus: expect.any(Function) });
     });
 
     it('should do nothing if actions are disabled', () => {
-      const args = inferActionsFromArgTypesRegex(({
+      const args = inferActionsFromArgTypesRegex({
         initialArgs: {},
         argTypes,
         parameters: {
           ...parameters,
           actions: { ...parameters.actions, disable: true },
         },
-      } as unknown) as StoryContext);
+      } as unknown as StoryContext);
       expect(args).toEqual({});
     });
   });
@@ -65,11 +65,11 @@ describe('actions parameter enhancers', () => {
     };
     it('should add actions based on action.args', () => {
       expect(
-        addActionsFromArgTypes(({
+        addActionsFromArgTypes({
           initialArgs: {},
           argTypes,
           parameters: {},
-        } as unknown) as StoryContext)
+        } as unknown as StoryContext)
       ).toEqual({
         onClick: expect.any(Function),
         onBlur: expect.any(Function),
@@ -78,41 +78,41 @@ describe('actions parameter enhancers', () => {
 
     it('should NOT override pre-existing args', () => {
       expect(
-        addActionsFromArgTypes(({
+        addActionsFromArgTypes({
           argTypes: { onClick: { action: 'clicked!' } },
           initialArgs: { onClick: 'pre-existing value' },
           parameters: {},
-        } as unknown) as StoryContext)
+        } as unknown as StoryContext)
       ).toEqual({});
     });
 
     it('should NOT override pre-existing args, if null', () => {
       expect(
-        addActionsFromArgTypes(({
+        addActionsFromArgTypes({
           argTypes: { onClick: { action: 'clicked!' } },
           initialArgs: { onClick: null },
           parameters: {},
-        } as unknown) as StoryContext)
+        } as unknown as StoryContext)
       ).toEqual({});
     });
 
     it('should override pre-existing args, if undefined', () => {
       expect(
-        addActionsFromArgTypes(({
+        addActionsFromArgTypes({
           argTypes: { onClick: { action: 'clicked!' } },
           initialArgs: { onClick: undefined },
           parameters: {},
-        } as unknown) as StoryContext)
+        } as unknown as StoryContext)
       ).toEqual({ onClick: expect.any(Function) });
     });
 
     it('should do nothing if actions are disabled', () => {
       expect(
-        addActionsFromArgTypes(({
+        addActionsFromArgTypes({
           initialArgs: {},
           argTypes,
           parameters: { actions: { disable: true } },
-        } as unknown) as StoryContext)
+        } as unknown as StoryContext)
       ).toEqual({});
     });
   });

diff --git a/addons/docs/package.json b/addons/docs/package.json
@@ -92,7 +92,7 @@
     "lodash": "^4.17.21",
     "nanoid": "^3.1.23",
     "p-limit": "^3.1.0",
-    "prettier": "^2.2.1",
+    "prettier": "<=2.3.0",
     "prop-types": "^15.7.2",
     "react-element-to-jsx-string": "^14.3.4",
     "regenerator-runtime": "^0.13.7",

diff --git a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts b/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts
@@ -207,7 +207,7 @@ function parseExpression(expression: any): ParsingResult<InspectionInferedType>
 }
 
 export function parse(value: string): ParsingResult<InspectionInferedType> {
-  const ast = (acornParser.parse(`(${value})`) as unknown) as estree.Program;
+  const ast = acornParser.parse(`(${value})`) as unknown as estree.Program;
 
   let parsingResult: ParsingResult<InspectionUnknown> = {
     inferredType: { type: InspectionType.UNKNOWN },

diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
@@ -107,8 +107,7 @@ describe('enhancePropTypesProp', () => {
           const component = createTestComponent({
             type: {
               name: 'custom',
-              raw:
-                '{\n  text: PropTypes.string.isRequired,\n  value1: PropTypes.string.isRequired,\n  value2: PropTypes.string.isRequired,\n  value3: PropTypes.string.isRequired,\n  value4: PropTypes.string.isRequired,\n}',
+              raw: '{\n  text: PropTypes.string.isRequired,\n  value1: PropTypes.string.isRequired,\n  value2: PropTypes.string.isRequired,\n  value3: PropTypes.string.isRequired,\n  value4: PropTypes.string.isRequired,\n}',
             },
           });
 
@@ -144,8 +143,7 @@ describe('enhancePropTypesProp', () => {
           const component = createTestComponent({
             type: {
               name: 'custom',
-              raw:
-                'function InlinedFunctionalComponent() {\n  return <div>Inlined FunctionalComponent!</div>;\n}',
+              raw: 'function InlinedFunctionalComponent() {\n  return <div>Inlined FunctionalComponent!</div>;\n}',
             },
           });
 
@@ -164,8 +162,7 @@ describe('enhancePropTypesProp', () => {
           const component = createTestComponent({
             type: {
               name: 'custom',
-              raw:
-                '<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>',
+              raw: '<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>',
             },
           });
 
@@ -203,8 +200,7 @@ describe('enhancePropTypesProp', () => {
             const component = createTestComponent({
               type: {
                 name: 'custom',
-                raw:
-                  'Symbol("A very very very very very very lonnnngggggggggggggggggggggggggggggggggggg symbol")',
+                raw: 'Symbol("A very very very very very very lonnnngggggggggggggggggggggggggggggggggggg symbol")',
               },
             });
 
@@ -608,8 +604,7 @@ describe('enhancePropTypesProp', () => {
             name: 'objectOf',
             value: {
               name: 'custom',
-              raw:
-                '{\n  foo: PropTypes.string,\n  bar: PropTypes.string,\n  another: PropTypes.string,\n  anotherAnother: PropTypes.string,\n}',
+              raw: '{\n  foo: PropTypes.string,\n  bar: PropTypes.string,\n  another: PropTypes.string,\n  anotherAnother: PropTypes.string,\n}',
             },
           },
         });
@@ -815,8 +810,7 @@ describe('enhancePropTypesProp', () => {
             name: 'arrayOf',
             value: {
               name: 'custom',
-              raw:
-                '{\n  text: PropTypes.string.isRequired,\n  value: PropTypes.string.isRequired,\n  another: PropTypes.string.isRequired,\n  another2: PropTypes.string.isRequired,\n  another3: PropTypes.string.isRequired,\n  another4: PropTypes.string.isRequired,\n}',
+              raw: '{\n  text: PropTypes.string.isRequired,\n  value: PropTypes.string.isRequired,\n  another: PropTypes.string.isRequired,\n  another2: PropTypes.string.isRequired,\n  another3: PropTypes.string.isRequired,\n  another4: PropTypes.string.isRequired,\n}',
             },
           },
         });

diff --git a/addons/docs/src/frameworks/react/react-argtypes.stories.tsx b/addons/docs/src/frameworks/react/react-argtypes.stories.tsx
@@ -11,7 +11,7 @@ import { Component } from '../../blocks';
 const argsTableProps = (component: Component) => {
   const argTypes = extractArgTypes(component);
   const parameters = { __isArgsStory: true };
-  const rows = inferControls(({ argTypes, parameters } as unknown) as StoryContext<any>);
+  const rows = inferControls({ argTypes, parameters } as unknown as StoryContext<any>);
   return { rows };
 };
 

diff --git a/addons/docs/src/frameworks/react/react-properties.test.ts b/addons/docs/src/frameworks/react/react-properties.test.ts
@@ -71,10 +71,10 @@ describe('react component properties', () => {
           // snapshot the output of `extractArgTypes`
           const argTypes = extractArgTypes(component);
           const parameters = { __isArgsStory: true };
-          const rows = inferControls(({
+          const rows = inferControls({
             argTypes,
             parameters,
-          } as unknown) as StoryContext<AnyFramework>);
+          } as unknown as StoryContext<AnyFramework>);
           expect(rows).toMatchSpecificSnapshot(path.join(testDir, 'argTypes.snapshot'));
         });
       }

diff --git a/addons/docs/src/frameworks/web-components/prepareForInline.ts b/addons/docs/src/frameworks/web-components/prepareForInline.ts
@@ -17,5 +17,5 @@ export const prepareForInline = (storyFn: PartialStoryFn<WebComponentsFramework>
     }
   }
 
-  return (React.createElement(Story) as unknown) as React.CElement<{}, React.Component>;
+  return React.createElement(Story) as unknown as React.CElement<{}, React.Component>;
 };
diff --git a/addons/docs/src/lib/docgen/flow/createPropDef.test.ts b/addons/docs/src/lib/docgen/flow/createPropDef.test.ts
@@ -97,8 +97,7 @@ describe('type', () => {
       flowType: {
         name: 'signature',
         type: 'object',
-        raw:
-          '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string, prop6: string, prop7: string, prop8: string }',
+        raw: '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string, prop6: string, prop7: string, prop8: string }',
         signature: {
           properties: [
             {

diff --git a/addons/links/src/preview.test.ts b/addons/links/src/preview.test.ts
@@ -11,7 +11,7 @@ jest.mock('global', () => ({
   window: global,
 }));
 
-const mockAddons = (addons as unknown) as jest.Mocked<typeof addons>;
+const mockAddons = addons as unknown as jest.Mocked<typeof addons>;
 
 describe('preview', () => {
   const channel = { emit: jest.fn() };

diff --git a/addons/links/src/preview.ts b/addons/links/src/preview.ts
@@ -37,19 +37,19 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise<string>
 const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) => string)) =>
   typeof value === 'function' ? value(...args) : value;
 
-export const linkTo = (idOrTitle: string, nameInput?: string | ((...args: any[]) => string)) => (
-  ...args: any[]
-) => {
-  const resolver = valueOrCall(args);
-  const title = resolver(idOrTitle);
-  const name = resolver(nameInput);
+export const linkTo =
+  (idOrTitle: string, nameInput?: string | ((...args: any[]) => string)) =>
+  (...args: any[]) => {
+    const resolver = valueOrCall(args);
+    const title = resolver(idOrTitle);
+    const name = resolver(nameInput);
 
-  if (title?.match(/--/) && !name) {
-    navigate({ storyId: title });
-  } else {
-    navigate({ kind: title, story: name });
-  }
-};
+    if (title?.match(/--/) && !name) {
+      navigate({ storyId: title });
+    } else {
+      navigate({ kind: title, story: name });
+    }
+  };
 
 const linksListener = (e: Event) => {
   const { target } = e;

diff --git a/addons/links/src/react/components/link.test.tsx b/addons/links/src/react/components/link.test.tsx
@@ -29,7 +29,7 @@ const mockChannel = () => {
     once: jest.fn(),
   };
 };
-const mockAddons = (addons as unknown) as jest.Mocked<typeof addons>;
+const mockAddons = addons as unknown as jest.Mocked<typeof addons>;
 
 describe('LinkTo', () => {
   describe('render', () => {

diff --git a/addons/storyshots/storyshots-core/src/frameworks/Loader.ts b/addons/storyshots/storyshots-core/src/frameworks/Loader.ts
@@ -19,9 +19,7 @@ export interface ClientApi<TFramework extends AnyFramework>
 }
 
 export interface Loader {
-  load: (
-    options: StoryshotsOptions
-  ) => {
+  load: (options: StoryshotsOptions) => {
     framework: SupportedFramework;
     renderTree: RenderTree;
     renderShallowTree: any;

diff --git a/addons/storyshots/storyshots-core/src/frameworks/configure.ts b/addons/storyshots/storyshots-core/src/frameworks/configure.ts
@@ -96,9 +96,12 @@ function configure<TFramework extends AnyFramework>(
     return;
   }
 
-  const { preview, features = {}, stories = [], requireContexts = [] } = getConfigPathParts(
-    configPath
-  );
+  const {
+    preview,
+    features = {},
+    stories = [],
+    requireContexts = [],
+  } = getConfigPathParts(configPath);
 
   global.FEATURES = features;
   global.STORIES = stories.map((specifier) => ({
@@ -108,14 +111,8 @@ function configure<TFramework extends AnyFramework>(
 
   if (preview) {
     // This is essentially the same code as lib/core/src/server/preview/virtualModuleEntry.template
-    const {
-      parameters,
-      decorators,
-      globals,
-      globalTypes,
-      argsEnhancers,
-      argTypesEnhancers,
-    } = jest.requireActual(preview);
+    const { parameters, decorators, globals, globalTypes, argsEnhancers, argTypesEnhancers } =
+      jest.requireActual(preview);
 
     if (decorators) {
       decorators.forEach((decorator: DecoratorFunction<TFramework>) =>

diff --git a/addons/storyshots/storyshots-puppeteer/src/axeTest.ts b/addons/storyshots/storyshots-puppeteer/src/axeTest.ts
@@ -9,8 +9,13 @@ export const axeTest = (customConfig: Partial<AxeConfig> = {}) => {
   return puppeteerTest({
     ...extendedConfig,
     async testBody(page, testOptions) {
-      const { element = '#root', exclude, disabledRules, options, config } =
-        testOptions.context.parameters.a11y || {};
+      const {
+        element = '#root',
+        exclude,
+        disabledRules,
+        options,
+        config,
+      } = testOptions.context.parameters.a11y || {};
       await beforeAxeTest(page, options);
       const axe = new AxePuppeteer(page);
       axe.include(element);

diff --git a/addons/storysource/package.json b/addons/storysource/package.json
@@ -51,7 +51,7 @@
     "core-js": "^3.8.2",
     "estraverse": "^5.2.0",
     "loader-utils": "^2.0.0",
-    "prettier": "^2.2.1",
+    "prettier": "<=2.3.0",
     "prop-types": "^15.7.2",
     "react-syntax-highlighter": "^13.5.3",
     "regenerator-runtime": "^0.13.7"

diff --git a/app/angular/src/client/preview/angular/components/app.component.ts b/app/angular/src/client/preview/angular/components/app.component.ts
@@ -48,9 +48,8 @@ export class AppComponent implements OnInit, OnDestroy {
       const componentRef = this.target.createComponent(compFactory);
       const { instance } = componentRef;
       // For some reason, manual change detection ref is only working when getting the ref from the injector (rather than componentRef.changeDetectorRef)
-      const childChangeDetectorRef: ChangeDetectorRef = componentRef.injector.get(
-        ChangeDetectorRef
-      );
+      const childChangeDetectorRef: ChangeDetectorRef =
+        componentRef.injector.get(ChangeDetectorRef);
 
       this.subscription = this.data.subscribe((newData) => {
         this.setProps(instance, newData);