@sproutsocial/racine 12.20.0 → 12.21.1

package/__flow__/utils/hooks.js

@@ -1,4 +1,4 @@
-"no babel-plugin-flow-react-proptypes";
+'no babel-plugin-flow-react-proptypes';
 // @flow
 import {
   useState,
@@ -7,8 +7,8 @@ import {
   useMemo,
   useReducer,
   useRef,
-} from "react";
-import { canUseDOM } from "../utils";
+} from 'react';
+import {canUseDOM} from '../utils';
 
 export function useTextContent(initial: string) {
   const [textContent, setTextContent] = useState(initial);
@@ -24,9 +24,9 @@ export function useTextContent(initial: string) {
 }
 
 type TypeMutationObserverInitRequired =
-  | {| childList: true |}
-  | {| attributes: true |}
-  | {| characterData: true |};
+  | {|childList: true|}
+  | {|attributes: true|}
+  | {|characterData: true|};
 
 type TypeMutationObserverInit = {
   ...TypeMutationObserverInitRequired,
@@ -91,7 +91,7 @@ export function useMutationObserverOnce(
 }
 
 type TypeSingleSelectProps<T: string> = {|
-  initialValue?: T | "",
+  initialValue?: T | '',
   onChange?: (value: string | T) => any,
 |};
 
@@ -102,10 +102,10 @@ type TypeMultiSelectProps<T: string> = {|
 
 export const useSelect = <T: string>(
   {
-    initialValue = "",
+    initialValue = '',
     onChange: userOnChange = () => {},
   }: TypeSingleSelectProps<T> = {
-    initialValue: "",
+    initialValue: '',
     onChange: () => {},
   }
 ) => {
@@ -121,16 +121,16 @@ export const useSelect = <T: string>(
     [userOnChange, value]
   );
 
-  return { value, onChange };
+  return {value, onChange};
 };
 
 const valueReducer = (state, action) => {
   const newState = new Set(state);
   switch (action.type) {
-    case "reset": {
+    case 'reset': {
       return new Set();
     }
-    case "toggle_item":
+    case 'toggle_item':
     default: {
       if (newState.has(action.value)) {
         newState.delete(action.value);
@@ -158,7 +158,7 @@ export const useMultiselect = <T: string>(
 
   const onChange = useCallback(
     (newValue: string) => {
-      dispatch({ type: "toggle_item", value: newValue });
+      dispatch({type: 'toggle_item', value: newValue});
     },
     [dispatch]
   );
@@ -174,10 +174,10 @@ export const useMultiselect = <T: string>(
   }, [userOnChange, value]);
 
   const onClear = useCallback(() => {
-    dispatch({ type: "reset" });
+    dispatch({type: 'reset'});
   }, [dispatch]);
 
-  return { value: getArrayValue(value), onChange, onClear };
+  return {value: getArrayValue(value), onChange, onClear};
 };
 
 export function useWhyDidYouUpdate(name: string, props: Object) {
@@ -188,7 +188,7 @@ export function useWhyDidYouUpdate(name: string, props: Object) {
   useEffect(() => {
     if (previousProps.current) {
       // Get all keys from previous and current props
-      const allKeys = Object.keys({ ...previousProps.current, ...props });
+      const allKeys = Object.keys({...previousProps.current, ...props});
       // Use this object to keep track of changed props
       const changesObj = {};
       // Iterate through keys
@@ -206,7 +206,7 @@ export function useWhyDidYouUpdate(name: string, props: Object) {
       // If changesObj not empty then output to console
       if (Object.keys(changesObj).length) {
         // eslint-disable-next-line no-console
-        console.log("[why-did-you-update]", name, changesObj);
+        console.log('[why-did-you-update]', name, changesObj);
       }
     }
 

package/__flow__/utils/index.js

@@ -1,17 +1,17 @@
 // @flow
 
-import { type ElementRef } from "react";
+import {type ElementRef} from 'react';
 
 export const canUseDOM = () => {
   return Boolean(
-    typeof window !== "undefined" &&
+    typeof window !== 'undefined' &&
       window.document &&
       window.document.createElement
   );
 };
 
 type TypeRef =
-  | {| current: null | HTMLInputElement |}
+  | {|current: null | HTMLInputElement|}
   | ((ElementRef<any> | HTMLElement) => void);
 
 // Allows a component to pass its own ref *and* a ref prop to the same element.
@@ -22,7 +22,7 @@ export const mergeRefs = (refs: (?TypeRef)[]) => {
   if (filteredRefs.length === 0) return filteredRefs[0];
   return (inst: any) => {
     for (const ref of filteredRefs) {
-      if (typeof ref === "function") {
+      if (typeof ref === 'function') {
         ref(inst);
       } else if (ref) {
         ref.current = inst;

package/__flow__/utils/innerText.js

@@ -7,11 +7,11 @@ const hasOwnProperty = (obj: Object, property: string): boolean => {
 };
 
 const hasChildren = (node: React$Node): boolean => {
-  return hasOwnProperty(node, "children");
+  return hasOwnProperty(node, 'children');
 };
 
 const hasProps = (node: React$Node): boolean => {
-  return hasOwnProperty(node, "props");
+  return hasOwnProperty(node, 'props');
 };
 
 const reduceNodeToString = (previous: string, current: React$Node): string => {
@@ -23,22 +23,22 @@ const reduceNodeToString = (previous: string, current: React$Node): string => {
 const innerText = (node: React$Node): string => {
   if (
     node === null ||
-    typeof node === "undefined" ||
-    typeof node === "boolean"
+    typeof node === 'undefined' ||
+    typeof node === 'boolean'
   ) {
-    return "";
-  } else if (typeof node === "string") {
+    return '';
+  } else if (typeof node === 'string') {
     return node;
-  } else if (typeof node === "number") {
+  } else if (typeof node === 'number') {
     return node.toString();
   } else if (Array.isArray(node)) {
-    return node.reduce<string>(reduceNodeToString, "");
+    return node.reduce<string>(reduceNodeToString, '');
     // $FlowIssue - Portal and Iterable
   } else if (hasProps(node) && hasChildren(node.props)) {
     return innerText(node.props.children);
   }
 
-  return "";
+  return '';
 };
 
 export default innerText;

package/__flow__/utils/mixins.js

@@ -1,14 +1,14 @@
 // @flow strict-local
-import { css } from "styled-components";
-import theme from "../themes/light/theme";
-import { transparentize } from "polished";
+import {css} from 'styled-components';
+import theme from '../themes/light/theme';
+import {transparentize} from 'polished';
 
 export const svgToDataURL = (svgStr: string) => {
   const encoded = encodeURIComponent(svgStr)
-    .replace(/'/g, "%27")
-    .replace(/"/g, "%22");
+    .replace(/'/g, '%27')
+    .replace(/"/g, '%22');
 
-  const header = "data:image/svg+xml,";
+  const header = 'data:image/svg+xml,';
   const dataUrl = header + encoded;
 
   return dataUrl;

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

@@ -1,5 +1,5 @@
 // @flow
-import * as React from "react";
+import * as React from 'react';
 import {
   act,
   cleanup,
@@ -13,11 +13,11 @@ import {
   waitForElement,
   waitForElementToBeRemoved,
   within,
-} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { a11yCheck } from "./a11yTest";
-import { dataQaLabelQueries } from "./dataQaLabelQueries";
-import ThemeProvider from "../ThemeProvider";
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {a11yCheck} from './a11yTest';
+import {dataQaLabelQueries} from './dataQaLabelQueries';
+import ThemeProvider from '../ThemeProvider';
 
 const sproutQueries = {
   ...queries,

package/__flow__/utils/responsiveProps/index.js

@@ -1,7 +1,7 @@
 // @flow
-import theme from "../../themes/light/theme";
+import theme from '../../themes/light/theme';
 
-import type { TypeResponsive } from "../../types/system-props.flow";
+import type {TypeResponsive} from '../../types/system-props.flow';
 
 const breakpoints = theme.breakpoints;
 const LENGTH = breakpoints.length + 1;
@@ -9,7 +9,7 @@ const LENGTH = breakpoints.length + 1;
 export const normalizeResponsiveProp = (
   value: TypeResponsive<any>
 ): TypeResponsive<any> => {
-  if (["string", "number"].includes(typeof value)) {
+  if (['string', 'number'].includes(typeof value)) {
     return Array(LENGTH).fill(value);
   }
 

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

@@ -1,29 +1,29 @@
-import { normalizeResponsiveProp } from "./index";
+import {normalizeResponsiveProp} from './index';
 
-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/__flow__/utils/system-props.js

@@ -1,9 +1,9 @@
 // @flow
-import * as styles from "styled-system";
+import * as styles from 'styled-system';
 
 const typeScale = styles.variant({
-  key: "typography",
-  prop: "typeScale",
+  key: 'typography',
+  prop: 'typeScale',
 });
 
 export const COMMON = styles.compose(

package/__flow__/utils/useInteractiveColor.js

@@ -1,6 +1,6 @@
 //@flow strict-local
-import { darken, lighten } from "polished";
-import { useTheme } from "styled-components";
+import {darken, lighten} from 'polished';
+import {useTheme} from 'styled-components';
 
 /**
  * The useInteractiveColor hook has context of theme mode (light or dark)
@@ -12,7 +12,7 @@ const useInteractiveColor = (themeColor: string): string => {
   // Throw error if used outside of a ThemeProvider (styled-components)
   if (!useTheme()) {
     throw new Error(
-      "useInteractiveColor() must be used within a Styled Components ThemeProvider"
+      'useInteractiveColor() must be used within a Styled Components ThemeProvider'
     );
   }
 
@@ -20,7 +20,7 @@ const useInteractiveColor = (themeColor: string): string => {
   const themeMode = useTheme().mode;
 
   // If the theme mode is dark, return a lightened version of the themeValue
-  if (themeMode === "dark") {
+  if (themeMode === 'dark') {
     return lighten(0.2, themeColor);
   } else {
     // If the theme mode is light, return a darkened version of the themeValue
@@ -28,4 +28,4 @@ const useInteractiveColor = (themeColor: string): string => {
   }
 };
 
-export { useInteractiveColor };
+export {useInteractiveColor};

package/__flow__/writing-good-stories.stories.mdx

@@ -0,0 +1,3 @@
+<Meta title="Welcome/Writing good stories" />
+
+# Coming soon...

package/bin/racine-codemod.js

@@ -3,16 +3,16 @@
 // 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 childProcess = require('child_process');
+const fs = require('fs');
+const path = require('path');
 
 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));
 
 const transform = process.argv[2];
@@ -21,24 +21,24 @@ const usage = `npx racine-codemod <transform> <path/to/code>\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);
 }
 if (!dest) {
   console.log(usage);
-  console.error("missing path to code.");
+  console.error('missing path to code.');
   process.exit(1);
 }
 
 const cmd = `npx jscodeshift -- --parser=flow -t ${path.join(
-  "../codemods",
-  transform + ".js"
+  '../codemods',
+  transform + '.js'
 )} ${path.join(currentDir, dest)} --ignore-pattern=**/node_modules/** ${[
   ...process.argv,
 ]
   .slice(4)
-  .join(" ")}`;
-console.log("running", cmd);
+  .join(' ')}`;
+console.log('running', cmd);
 childProcess.execSync(cmd);

package/codemods/__tests__/migrate-2.x-to-3.x.test.js

@@ -1,3 +1,3 @@
 jest.autoMockOff();
-const defineTest = require("jscodeshift/dist/testUtils").defineTest;
-defineTest(__dirname, "migrate-2.x-to-3.x");
+const defineTest = require('jscodeshift/dist/testUtils').defineTest;
+defineTest(__dirname, 'migrate-2.x-to-3.x');

package/codemods/migrate-2.x-to-3.x.js

@@ -2,7 +2,7 @@ module.exports = function transformer(file, api) {
   const j = api.jscodeshift;
   const t = j(file.source).find(j.JSXOpeningElement, {
     name: {
-      name: "Text",
+      name: 'Text',
     },
   });
 
@@ -10,12 +10,11 @@ module.exports = function transformer(file, api) {
     const attrs = j(textPath).find(j.JSXAttribute);
     const hasTagOrAsAttribute =
       !!attrs.length &&
-      !!attrs.filter(({ node }) => ["as", "tag"].includes(node.name.name))
-        .length;
+      !!attrs.filter(({node}) => ['as', 'tag'].includes(node.name.name)).length;
 
     // Insert as="div" if as/tag prop is missing
     if (!hasTagOrAsAttribute) {
-      const asProp = j.jsxAttribute(j.jsxIdentifier("as"), j.literal("div"));
+      const asProp = j.jsxAttribute(j.jsxIdentifier('as'), j.literal('div'));
 
       if (!attrs.length) {
         textPath.node.attributes = [asProp];
@@ -25,19 +24,19 @@ module.exports = function transformer(file, api) {
     }
 
     attrs.forEach((path) => {
-      const { node } = path;
+      const {node} = path;
 
       // Rename tag -> as
-      if (node.name.name === "tag") {
-        node.name.name = "as";
+      if (node.name.name === 'tag') {
+        node.name.name = 'as';
       }
 
       // Rename size -> fontSize
-      if (node.name.name === "size" || node.name.name === "fontSize") {
-        node.name.name = "fontSize";
+      if (node.name.name === 'size' || node.name.name === 'fontSize') {
+        node.name.name = 'fontSize';
         if (
           node.value.type === j.Literal.name &&
-          node.value.value !== "inherit"
+          node.value.value !== 'inherit'
         ) {
           node.value = j.jsxExpressionContainer(
             j.literal(Number(node.value.value))
@@ -46,38 +45,38 @@ module.exports = function transformer(file, api) {
       }
 
       // Rename weight -> fontWeight
-      if (node.name.name === "weight") {
-        node.name.name = "fontWeight";
+      if (node.name.name === 'weight') {
+        node.name.name = 'fontWeight';
         if (
-          node.value.value === "600" ||
-          node.value.value === "bold" ||
-          node.value.value === "semibold"
+          node.value.value === '600' ||
+          node.value.value === 'bold' ||
+          node.value.value === 'semibold'
         ) {
-          node.value = j.literal("semibold");
+          node.value = j.literal('semibold');
         } else {
-          node.value = j.literal("normal");
+          node.value = j.literal('normal');
         }
       }
 
       // Rename isTruncated -> truncated
-      if (node.name.name === "isTruncated") {
-        node.name.name = "truncated";
+      if (node.name.name === 'isTruncated') {
+        node.name.name = 'truncated';
       }
 
       // Rename overflow='breakWord' -> breakWord
-      if (node.name.name === "overflow") {
-        if (node.value.value === "breakWord") {
-          node.name.name = "breakWord";
-          node.value = "";
+      if (node.name.name === 'overflow') {
+        if (node.value.value === 'breakWord') {
+          node.name.name = 'breakWord';
+          node.value = '';
         } else {
           path.prune();
         }
       }
 
       // Rename isItalicized -> fontStyle='italics'
-      if (node.name.name === "isItalicized") {
-        const italicValue = "italic";
-        node.name.name = "fontStyle";
+      if (node.name.name === 'isItalicized') {
+        const italicValue = 'italic';
+        node.name.name = 'fontStyle';
 
         if (node.value) {
           if (node.value.type === j.Literal.name) {
@@ -94,7 +93,7 @@ module.exports = function transformer(file, api) {
                 j.conditionalExpression(
                   node.value.expression,
                   j.literal(italicValue),
-                  j.identifier("undefined")
+                  j.identifier('undefined')
                 )
               );
             } else {
@@ -111,11 +110,11 @@ module.exports = function transformer(file, api) {
     const updatedAttrs = j(textPath).find(j.JSXAttribute);
     const hasFontSizeAttribute =
       !!updatedAttrs.length &&
-      !!updatedAttrs.filter(({ node }) => node.name.name === "fontSize").length;
+      !!updatedAttrs.filter(({node}) => node.name.name === 'fontSize').length;
 
     if (!hasFontSizeAttribute) {
       const fontSizeProp = j.jsxAttribute(
-        j.jsxIdentifier("fontSize"),
+        j.jsxIdentifier('fontSize'),
         j.jsxExpressionContainer(j.literal(200))
       );
       if (!updatedAttrs.length) {
@@ -129,5 +128,5 @@ module.exports = function transformer(file, api) {
     }
   });
 
-  return t.toSource({ quote: "single" });
+  return t.toSource({quote: 'single'});
 };