@sproutsocial/racine 20.16.0 → 20.17.0

package/__flow__/systemProps/tests/types.flow.js

@@ -5,25 +5,25 @@ import type { TypeResponsiveSystemProp, TypeBaseSystemProp, TypeResponsiveBaseSy
 /**
  * All system props should be responsive but accepting a tuple of length 1-5.
  */
-type TypeTestResponsiveSystemProp = TypeResponsiveSystemProp<'a'>;
-('a': TypeTestResponsiveSystemProp);
-(['a']: TypeTestResponsiveSystemProp);
-(['a', 'a']: TypeTestResponsiveSystemProp);
-(['a', 'a', 'a']: TypeTestResponsiveSystemProp);
-(['a', 'a', 'a', 'a']: TypeTestResponsiveSystemProp);
-(['a', 'a', 'a', 'a', 'a']: TypeTestResponsiveSystemProp);
+type TypeTestResponsiveSystemProp = TypeResponsiveSystemProp<"a">;
+("a": TypeTestResponsiveSystemProp);
+(["a"]: TypeTestResponsiveSystemProp);
+(["a", "a"]: TypeTestResponsiveSystemProp);
+(["a", "a", "a"]: TypeTestResponsiveSystemProp);
+(["a", "a", "a", "a"]: TypeTestResponsiveSystemProp);
+(["a", "a", "a", "a", "a"]: TypeTestResponsiveSystemProp);
 // $FlowExpectedError
-(['a', 'a', 'a', 'a', 'a', 'a']: TypeTestResponsiveSystemProp);
+(["a", "a", "a", "a", "a", "a"]: TypeTestResponsiveSystemProp);
 // $FlowExpectedError
-(['b']: TypeTestResponsiveSystemProp);
+(["b"]: TypeTestResponsiveSystemProp);
 // $FlowExpectedError
 ([null]: TypeTestResponsiveSystemProp);
 
 /**
  * All system props should accept "base" values: boolean, null, and undefined.
  */
-type TypeTestBaseSystemProp = TypeBaseSystemProp<'a'>;
-('a': TypeTestBaseSystemProp);
+type TypeTestBaseSystemProp = TypeBaseSystemProp<"a">;
+("a": TypeTestBaseSystemProp);
 (true: TypeTestBaseSystemProp);
 (false: TypeTestBaseSystemProp);
 (null: TypeTestBaseSystemProp);
@@ -32,17 +32,17 @@ type TypeTestBaseSystemProp = TypeBaseSystemProp<'a'>;
 /**
  * All system props should be responsive and allow "base" values.
  */
-type TypeTestResponsiveBaseSystemProp = TypeResponsiveBaseSystemProp<'a' | 'b'>;
-('a': TypeTestResponsiveBaseSystemProp);
-('b': TypeTestResponsiveBaseSystemProp);
+type TypeTestResponsiveBaseSystemProp = TypeResponsiveBaseSystemProp<"a" | "b">;
+("a": TypeTestResponsiveBaseSystemProp);
+("b": TypeTestResponsiveBaseSystemProp);
 (true: TypeTestResponsiveBaseSystemProp);
 (false: TypeTestResponsiveBaseSystemProp);
 (null: TypeTestResponsiveBaseSystemProp);
 (undefined: TypeTestResponsiveBaseSystemProp);
-(['a', null, undefined, false, 'b']: TypeTestResponsiveBaseSystemProp);
-(['a']: TypeTestResponsiveBaseSystemProp);
+(["a", null, undefined, false, "b"]: TypeTestResponsiveBaseSystemProp);
+(["a"]: TypeTestResponsiveBaseSystemProp);
 // $FlowExpectedError
-('c': TypeTestResponsiveBaseSystemProp);
+("c": TypeTestResponsiveBaseSystemProp);
 // $FlowExpectedError
 (1: TypeTestResponsiveBaseSystemProp);
 // $FlowExpectedError

package/__flow__/systemProps/typography.flow.js

@@ -1,7 +1,7 @@
 // @flow strict-local
 
-import { typography } from 'styled-system';
-import type { Property$FontFamily, Property$FontSize, Property$FontStyle, Property$FontWeight, Property$LetterSpacing, Property$LineHeight, Property$TextAlign } from 'csstype';
+import { typography } from "styled-system";
+import type { Property$FontFamily, Property$FontSize, Property$FontStyle, Property$FontWeight, Property$LetterSpacing, Property$LineHeight, Property$TextAlign } from "csstype";
 import typeof { fontWeights as TypeofFontWeights } from "../themes/light/theme.flow";
 import type { StyledSystemStyleFn, TypeResponsiveBaseSystemProp } from "./types.flow";
 

package/__flow__/systemProps/variant.flow.js

@@ -1,5 +1,5 @@
 // @flow strict-local
-import { compose, variant } from 'styled-system';
+import { compose, variant } from "styled-system";
 import type { TypeTypography } from "../types/theme.flow";
 import type { TypeResponsiveBaseSystemProp } from "./types.flow";
 
@@ -9,6 +9,6 @@ export type TypeVariantSystemProps = $ReadOnly<{|
   typeScale?: TypeResponsiveBaseSystemProp<$Keys<TypeTypography>>
 |}>;
 export const variantSystemProps = compose(variant({
-  key: 'typography',
-  prop: 'typeScale'
+  key: "typography",
+  prop: "typeScale"
 }));

package/__flow__/themes/light/dataviz-palette.flow.js

@@ -1,26 +1,26 @@
 // @flow strict-local
 export type TypeDatavizPaletteList = string[];
 export type TypeDatavizPaletteMap = {|
-  '1': string,
-  '2': string,
-  '3': string,
-  '4': string,
-  '5': string,
-  '6': string,
-  '7': string,
-  '8': string,
-  '9': string,
-  '10': string,
-  '11': string,
-  '12': string,
-  '13': string,
-  '14': string,
-  '15': string,
-  '16': string,
-  '17': string,
-  '18': string,
-  '19': string,
-  '20': string,
+  "1": string,
+  "2": string,
+  "3": string,
+  "4": string,
+  "5": string,
+  "6": string,
+  "7": string,
+  "8": string,
+  "9": string,
+  "10": string,
+  "11": string,
+  "12": string,
+  "13": string,
+  "14": string,
+  "15": string,
+  "16": string,
+  "17": string,
+  "18": string,
+  "19": string,
+  "20": string,
 |};
 export type TypeDatavizPalette = {|
   DATAVIZ_COLORS_LIST: TypeDatavizPaletteList,

package/__flow__/themes/light/literal-colors.flow.js

@@ -1,18 +1,18 @@
 // @flow strict-local
 
 type TypeLiteralColor = {|
-  '0': string,
-  '100': string,
-  '200': string,
-  '300': string,
-  '400': string,
-  '500': string,
-  '600': string,
-  '700': string,
-  '800': string,
-  '900': string,
-  '1000': string,
-  '1100': string,
+  "0": string,
+  "100": string,
+  "200": string,
+  "300": string,
+  "400": string,
+  "500": string,
+  "600": string,
+  "700": string,
+  "800": string,
+  "900": string,
+  "1000": string,
+  "1100": string,
 |};
 export type TypeLiteralColors = {|
   neutral: TypeLiteralColor,

package/__flow__/types/shared.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 export type TypeWithDisplayName<T> = T & {|
   displayName: string
 |};

package/__flow__/types/styled-components.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 export type TypeStyledComponentsCommonProps = $ReadOnly<{|
   as?: React.ElementType,
   forwardedAs?: React.ElementType,

package/__flow__/types/system-props.flow.js

@@ -1,7 +1,7 @@
-'no babel-plugin-flow-react-proptypes';
+"no babel-plugin-flow-react-proptypes";
 
 // @flow strict-local
-import type { Property$FlexDirection, Property$FlexWrap, Property$Position, Property$TextAlign, Property$ZIndex } from 'csstype';
+import type { Property$FlexDirection, Property$FlexWrap, Property$Position, Property$TextAlign, Property$ZIndex } from "csstype";
 import type { TypeTypography } from "./theme.flow";
 
 /* eslint-disable prettier/prettier */

package/__flow__/types/theme.flow.js

@@ -270,25 +270,25 @@ export type TypeCardControlTheme = {|
     ...
   },
 |};
-export type TypeThemeMode = 'light' | 'dark';
+export type TypeThemeMode = "light" | "dark";
 export type TypeBreakpoint = string[];
 type TypeTypographyValue = {|
   fontSize: string | number,
   lineHeight: string | number,
 |};
 export type TypeTypography = {|
-  '100': TypeTypographyValue,
-  '200': TypeTypographyValue,
-  '300': TypeTypographyValue,
-  '400': TypeTypographyValue,
-  '500': TypeTypographyValue,
-  '600': TypeTypographyValue,
-  '700': TypeTypographyValue,
-  '800': TypeTypographyValue,
-  '900': TypeTypographyValue,
-  '1000': TypeTypographyValue,
-  '1100': TypeTypographyValue,
-  '1200': TypeTypographyValue,
+  "100": TypeTypographyValue,
+  "200": TypeTypographyValue,
+  "300": TypeTypographyValue,
+  "400": TypeTypographyValue,
+  "500": TypeTypographyValue,
+  "600": TypeTypographyValue,
+  "700": TypeTypographyValue,
+  "800": TypeTypographyValue,
+  "900": TypeTypographyValue,
+  "1000": TypeTypographyValue,
+  "1100": TypeTypographyValue,
+  "1200": TypeTypographyValue,
 |};
 export type TypeFontWeight = {|
   normal: string,
@@ -298,31 +298,31 @@ export type TypeFontWeight = {|
 |};
 export type TypeFontFamily = TypeFontFamilyString;
 export type TypeSpace = {|
-  '0': string,
-  '100': string,
-  '200': string,
-  '300': string,
-  '350': string,
-  '400': string,
-  '450': string,
-  '500': string,
-  '600': string,
+  "0": string,
+  "100": string,
+  "200": string,
+  "300": string,
+  "350": string,
+  "400": string,
+  "450": string,
+  "500": string,
+  "600": string,
 |};
 export type TypeColor = TypeColors;
 export type TypeRadii = {|
-  '400': string,
-  '500': string,
-  '600': string,
-  '1000': string,
+  "400": string,
+  "500": string,
+  "600": string,
+  "1000": string,
   inner: string,
   outer: string,
   pill: string,
 |};
 export type TypeBorder = {|
-  '500': string
+  "500": string
 |};
 export type TypeBorderWidth = {|
-  '500': string
+  "500": string
 |};
 export type TypeShadow = {|
   high: string,

package/__flow__/utils/hooks.flow.js

@@ -1,12 +1,12 @@
 // @flow
-import { useState, useCallback } from 'react';
+import { useState, useCallback } from "react";
 
 // https://stackoverflow.com/questions/44700904/how-to-get-a-functions-return-type-in-flow
 // eslint-disable-next-line flowtype/type-id-match
 type ReturnType<F> = $PropertyType<$ObjMap<{
   x: F,
   ...
-}, <R>(f: (...any) => R) => R>, 'x'>;
+}, <R>(f: (...any) => R) => R>, "x">;
 const useTextContentClone = (initial: string) => {
   const [textContent, setTextContent] = useState(initial);
   const ref = useCallback((node: Node) => {
@@ -41,7 +41,7 @@ declare var defaultCallback: TypeMutationObserverCallback;
 declare export function useMutationObserver(targetNode: ?Node, config: TypeMutationObserverInit, callback?: TypeMutationObserverCallback): void | any;
 declare export function useMutationObserverOnce(targetNode: ?Node, config: TypeMutationObserverInit, callback: TypeMutationObserverCallback): void | any;
 type TypeSingleSelectProps<T: string> = {|
-  initialValue?: T | '',
+  initialValue?: T | "",
   onChange?: (value: string | T) => any,
 |};
 type TypeMultiSelectProps<T: string> = {|

package/__flow__/utils/index.flow.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { type ElementRef } from 'react';
+import { type ElementRef } from "react";
 declare export var canUseDOM: () => boolean;
 type TypeRef = {|
   current: null | HTMLInputElement

package/__flow__/utils/innerText.flow.js

@@ -1,4 +1,4 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 declare var innerText: (node: React.Node) => string;
 declare export default typeof innerText;

package/__flow__/utils/mixins.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import type { CSSRules } from 'styled-components';
+import type { CSSRules } from "styled-components";
 declare export var svgToDataURL: (svgStr: string) => string;
 declare export var visuallyHidden: CSSRules;
 declare export var focusRing: CSSRules;

package/__flow__/utils/react-testing-library.flow.js

@@ -1,7 +1,7 @@
 // @flow
-import * as React from 'react';
-import { act as defaultAct, cleanup as defaultCleanup, createEvent as defaultCreateEvent, fireEvent as defaultFireEvent, waitFor as defaultWaitFor, waitForElementToBeRemoved as defaultWaitForElementToBeRemoved } from '@testing-library/react';
-import defaultUserEvent from '@testing-library/user-event';
+import * as React from "react";
+import { act as defaultAct, cleanup as defaultCleanup, createEvent as defaultCreateEvent, fireEvent as defaultFireEvent, waitFor as defaultWaitFor, waitForElementToBeRemoved as defaultWaitForElementToBeRemoved } from "@testing-library/react";
+import defaultUserEvent from "@testing-library/user-event";
 declare export var act: typeof defaultAct;
 declare export var cleanup: typeof defaultCleanup;
 declare export var createEvent: typeof defaultCreateEvent;

package/__flow__/utils/responsiveProps/index.test.flow.js

@@ -1,22 +1,22 @@
 // @flow strict-local
 import { normalizeResponsiveProp } from "./index.flow";
-describe('normalizeResponsiveProp', () => {
-  it('should handle single, literal values', () => {
+describe("normalizeResponsiveProp", () => {
+  it("should handle single, literal values", () => {
     expect(normalizeResponsiveProp(0)).toMatchObject([0, 0, 0, 0, 0]);
   });
-  it('should handle arrays with 1 value', () => {
+  it("should handle arrays with 1 value", () => {
     expect(normalizeResponsiveProp([0])).toMatchObject([0, 0, 0, 0, 0]);
   });
-  it('should handle arrays with 2 values', () => {
+  it("should handle arrays with 2 values", () => {
     expect(normalizeResponsiveProp([0, 1])).toMatchObject([0, 1, 1, 1, 1]);
   });
-  it('should handle arrays with 3 values', () => {
+  it("should handle arrays with 3 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2])).toMatchObject([0, 1, 2, 2, 2]);
   });
-  it('should handle arrays with 4 values', () => {
+  it("should handle arrays with 4 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3])).toMatchObject([0, 1, 2, 3, 3]);
   });
-  it('should handle arrays with 5 values', () => {
+  it("should handle arrays with 5 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3, 4])).toMatchObject([0, 1, 2, 3, 4]);
   });
 });

package/bin/racine-codemod.js

@@ -3,19 +3,19 @@
 // to run codemod: node bin/racine-codemod name-of-transform path/to/src
 // Respectfully adapted from https://github.com/reactjs/react-codemod/blob/master/bin/react-codemod.js
 
-const childProcess = require('child_process');
-const fs = require('fs');
-const path = require('path');
-const docs = require('../codemods/codemod-docs');
+const childProcess = require("child_process");
+const fs = require("fs");
+const path = require("path");
+const docs = require("../codemods/codemod-docs");
 
 const currentDir = process.cwd();
 process.chdir(__dirname);
 
 const codemods = fs
-  .readdirSync('../codemods')
-  .filter((x) => x.slice(-3) === '.js')
+  .readdirSync("../codemods")
+  .filter((x) => x.slice(-3) === ".js")
   .map((x) => x.slice(0, -3))
-  .filter((x) => x !== 'codemod-docs');
+  .filter((x) => x !== "codemod-docs");
 
 const transform = process.argv[2];
 const dest = process.argv[3];
@@ -23,8 +23,8 @@ const usage = `racine-codemod <transformName> <path> <...otherArgs>\n`;
 if (!transform || codemods.indexOf(transform) === -1) {
   console.log(usage);
   console.error(
-    'Missing/invalid transform name. Pick one of:\n' +
-      codemods.map((x) => '- ' + x).join('\n')
+    "Missing/invalid transform name. Pick one of:\n" +
+      codemods.map((x) => "- " + x).join("\n")
   );
   process.exit(1);
 }
@@ -44,7 +44,7 @@ ${Object.entries(docs.arguments)
         : `Example: ${argumentDocs.example}`
     }`;
   })
-  .join('\n')}`;
+  .join("\n")}`;
 };
 
 // If a path argument is not passed, log the available arguments and example usage for the codemod.
@@ -52,28 +52,28 @@ if (!dest) {
   console.log(
     docs[transform]
       ? formatCodemodDocs(docs[transform])
-      : 'Missing path argument'
+      : "Missing path argument"
   );
   process.exit(1);
 }
 
-const filePath = path.join('../codemods', transform + '.js');
+const filePath = path.join("../codemods", transform + ".js");
 const relativePath = path.join(currentDir, dest);
 const userArgs = [...process.argv]
   .slice(4)
-  .map((arg) => arg.replace(/\s/g, ''));
+  .map((arg) => arg.replace(/\s/g, ""));
 
 const args = [
-  'jscodeshift',
-  '--',
-  '-t',
+  "jscodeshift",
+  "--",
+  "-t",
   filePath,
   relativePath,
-  '--ignore-pattern=**/node_modules/**',
+  "--ignore-pattern=**/node_modules/**",
   ...userArgs,
 ];
 
-childProcess.execFileSync('npx', args, {stdio: 'inherit'});
+childProcess.execFileSync("npx", args, { stdio: "inherit" });
 
 console.log(
   `Codemod complete! Please run prettier on "${dest}" to fix any formatting issues caused by the codemod.`

package/codemods/__tests__/icon-library.test.js

@@ -1,12 +1,12 @@
 jest.autoMockOff();
-const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
-const transform = require('../icon-library');
+const defineInlineTest = require("jscodeshift/dist/testUtils").defineInlineTest;
+const transform = require("../icon-library");
 
-describe('icon-library codemod', () => {
+describe("icon-library codemod", () => {
   function createTest(testName, input, output, options = {}) {
     return defineInlineTest(
       transform,
-      {parser: 'flow', ...options},
+      { parser: "flow", ...options },
       input,
       output,
       testName
@@ -14,31 +14,31 @@ describe('icon-library codemod', () => {
   }
 
   createTest(
-    'No changes for already-migrated icons',
+    "No changes for already-migrated icons",
     `<Icon name='dollar-outline' />`,
     `<Icon name='dollar-outline' />`
   );
 
   createTest(
-    'Simple replacement',
+    "Simple replacement",
     `<Icon name='ads' />`,
     `<Icon name='dollar-outline' />`
   );
 
   createTest(
-    'deprecatedIcons',
+    "deprecatedIcons",
     `<Icon name='backtotop' />`,
     `<Icon name='arrow-up-outline' />`
   );
 
   createTest(
-    'Handle subcomponents',
+    "Handle subcomponents",
     `<Icon.Toggle activeName='like' inactiveName='like-outline'/>;`,
     `<Icon.Toggle activeName='thumbs-up-solid' inactiveName='thumbs-up-outline'/>;`
   );
 
   createTest(
-    'ssiconsvg icon regex replacements',
+    "ssiconsvg icon regex replacements",
     `<use
     xlink:href="#ssiconsvg-rejected"
     xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -50,7 +50,7 @@ describe('icon-library codemod', () => {
   );
 
   createTest(
-    'ssiconsvg logo regex replacements',
+    "ssiconsvg logo regex replacements",
     `<use
     xlink:href="#ssiconsvg-facebook"
     xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -62,7 +62,7 @@ describe('icon-library codemod', () => {
   );
 
   createTest(
-    'icon/iconName regex replacements',
+    "icon/iconName regex replacements",
     `expect(queryByDataQaLabel({icon: 'dashboard'})).toBeFalsy();
     const iconMap = {iconName: "like"};
     const iconName = 'reply';`,
@@ -72,7 +72,7 @@ describe('icon-library codemod', () => {
   );
 
   createTest(
-    'Add comments',
+    "Add comments",
     `import { Badge, Icon } from '@sproutsocial/racine';
 
 <>
@@ -97,7 +97,7 @@ import { Badge, Icon } from '@sproutsocial/racine';
   // A partner name is left as-is and does not contribute to the count of issues.
   // The variable name Icon is converted to IconShim and does not contribute to the count of issues.
   createTest(
-    'Add shim component and add comments',
+    "Add shim component and add comments",
     `import { Icon } from '@sproutsocial/racine';
 
 <>
@@ -119,13 +119,13 @@ import { IconShim } from 'script/core/react/IconShim';
   <IconShim name={iconName} />
 </>`,
     {
-      shimName: 'IconShim',
-      shimImportPath: 'script/core/react/IconShim',
+      shimName: "IconShim",
+      shimImportPath: "script/core/react/IconShim",
     }
   );
 
   createTest(
-    'Add shim, remove Icon import',
+    "Add shim, remove Icon import",
     `import { Icon } from '@sproutsocial/racine';
 
 <Icon name={iconName} />`,
@@ -134,13 +134,13 @@ import { IconShim } from 'script/core/react/IconShim';
 <IconShim name={iconName} />
 `,
     {
-      shimName: 'IconShim',
-      shimImportPath: 'script/core/react/IconShim',
+      shimName: "IconShim",
+      shimImportPath: "script/core/react/IconShim",
     }
   );
 
   createTest(
-    'Add shim, keep Icon import due to styled usage',
+    "Add shim, keep Icon import due to styled usage",
     `import { Icon } from '@sproutsocial/racine';
 const StyledIcon = styled(Icon);
 <Icon name={iconName} />`,
@@ -150,13 +150,13 @@ const StyledIcon = styled(Icon);
 <IconShim name={iconName} />
 `,
     {
-      shimName: 'IconShim',
-      shimImportPath: 'script/core/react/IconShim',
+      shimName: "IconShim",
+      shimImportPath: "script/core/react/IconShim",
     }
   );
 
   createTest(
-    'Add shim, keep Icon import due to typeof Icon usage',
+    "Add shim, keep Icon import due to typeof Icon usage",
     `import { Icon } from '@sproutsocial/racine';
 const iconType = typeof Icon;
 <Icon name={iconName} />;`,
@@ -166,13 +166,13 @@ const iconType = typeof Icon;
 <IconShim name={iconName} />;
 `,
     {
-      shimName: 'IconShim',
-      shimImportPath: 'script/core/react/IconShim',
+      shimName: "IconShim",
+      shimImportPath: "script/core/react/IconShim",
     }
   );
 
   createTest(
-    'Retain first comments when Icon import is removed',
+    "Retain first comments when Icon import is removed",
     `// @flow
 import { Icon } from '@sproutsocial/racine';
 
@@ -183,13 +183,13 @@ import { IconShim } from 'script/core/react/IconShim';
 <IconShim name={iconName} />
 `,
     {
-      shimName: 'IconShim',
-      shimImportPath: 'script/core/react/IconShim',
+      shimName: "IconShim",
+      shimImportPath: "script/core/react/IconShim",
     }
   );
 
   createTest(
-    'Retain first comments and add new comments',
+    "Retain first comments and add new comments",
     `// @flow
 import { Badge, Icon } from '@sproutsocial/racine';
 
@@ -230,9 +230,9 @@ import { Badge, Icon } from '@sproutsocial/racine';
       // Unfortunately, because it's getting passed directly to the transform in this case,
       // We need to simulate the way that it gets mangled when passed through the console.
       components: [
-        'Message.Header:[iconName]',
-        'SearchInput:[iconLeft',
-        'iconRight]',
+        "Message.Header:[iconName]",
+        "SearchInput:[iconLeft",
+        "iconRight]",
       ],
     }
   );