Run format

packages/eslint-plugin-gamut/src/gamut-import-paths.ts

@@ -5,49 +5,54 @@ import { createRule } from './createRule';
 export default createRule({
   create(context) {
     return {
-      'ImportDeclaration[source.value=/(^@)codecademy(\\u002F)gamut/]': function (
-        node: TSESTree.ImportDeclaration
-      ) {
-        const filename = context.getFilename();
-        const importPath = node.source.value;
+      'ImportDeclaration[source.value=/(^@)codecademy(\\u002F)gamut/]':
+        function (node: TSESTree.ImportDeclaration) {
+          const filename = context.getFilename();
+          const importPath = node.source.value;
 
-        const fileDirectory = filename.split('/packages/')[1].split('/')[0];
-        const importPackage = importPath.split('@codecademy/')[1].split('/')[0];
+          const fileDirectory = filename.split('/packages/')[1].split('/')[0];
+          const importPackage = importPath
+            .split('@codecademy/')[1]
+            .split('/')[0];
 
-        if (fileDirectory === importPackage) {
-          context.report({
-            messageId: 'useRelativeImport',
-            node,
-          });
-          return;
-        }
+          if (fileDirectory === importPackage) {
+            context.report({
+              messageId: 'useRelativeImport',
+              node,
+            });
+            return;
+          }
 
-        if (importPath.includes('/src')) {
-          const indexOfSrc = node.source.range[0] + importPath.search('/src');
-          context.report({
-            ...(importPath.endsWith('/src') && {
-              fix: (fixer) => {
-                return fixer.removeRange([indexOfSrc + 1, node.range[1] - 2]);
-              },
-            }),
-            messageId: 'removeSrc',
-            node,
-          });
-          return;
-        }
-        if (importPath.includes('/dist')) {
-          const indexOfDist = node.source.range[0] + importPath.search('/dist');
-          context.report({
-            ...(importPath.endsWith('/dist') && {
-              fix: (fixer) => {
-                return fixer.removeRange([indexOfDist + 1, node.range[1] - 2]);
-              },
-            }),
-            messageId: 'removeDist',
-            node,
-          });
-        }
-      },
+          if (importPath.includes('/src')) {
+            const indexOfSrc = node.source.range[0] + importPath.search('/src');
+            context.report({
+              ...(importPath.endsWith('/src') && {
+                fix: (fixer) => {
+                  return fixer.removeRange([indexOfSrc + 1, node.range[1] - 2]);
+                },
+              }),
+              messageId: 'removeSrc',
+              node,
+            });
+            return;
+          }
+          if (importPath.includes('/dist')) {
+            const indexOfDist =
+              node.source.range[0] + importPath.search('/dist');
+            context.report({
+              ...(importPath.endsWith('/dist') && {
+                fix: (fixer) => {
+                  return fixer.removeRange([
+                    indexOfDist + 1,
+                    node.range[1] - 2,
+                  ]);
+                },
+              }),
+              messageId: 'removeDist',
+              node,
+            });
+          }
+        },
     };
   },
   defaultOptions: [],

packages/gamut-styles/src/ColorMode.tsx

@@ -71,11 +71,10 @@ interface BackgroundCurrentContextInterface {
   'background-current'?: keyof typeof GamutTheme.colors;
 }
 
-const BackgroundCurrentContext = createContext<BackgroundCurrentContextInterface>(
-  {
+const BackgroundCurrentContext =
+  createContext<BackgroundCurrentContextInterface>({
     'background-current': undefined,
-  }
-);
+  });
 
 export function useColorModes(): [
   ColorModes,

packages/gamut-styles/src/themes/core.ts

@@ -77,7 +77,7 @@ export const coreTheme = createTheme({
         secondary: 'navy-600',
         tertiary: 'navy-300',
         disabled: 'navy-500',
-      }
+      },
     },
     dark: {
       text: {
@@ -126,7 +126,7 @@ export const coreTheme = createTheme({
         secondary: 'white-600',
         tertiary: 'white-300',
         disabled: 'white-500',
-      }
+      },
     },
   })
   .addScale('borders', ({ colors }) => ({

packages/gamut-styles/src/variance/utils.ts

@@ -15,7 +15,7 @@ const allPropnames = ['mode', 'variant', ...Object.keys(allProps)] as [
  */
 const validPropnames = allPropnames.filter(isPropValid);
 
-export type SystemPropNames = typeof allPropnames[number];
+export type SystemPropNames = (typeof allPropnames)[number];
 
 export type ElementOrProps = keyof JSX.IntrinsicElements | ThemeProps;
 export type ForwardableProps<El extends ElementOrProps, Additional> = Exclude<

packages/gamut-styles/utils/functions/index.scss

@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";
 
 @function strip-units($number) {
   @return math.div($number, ($number * 0 + 1));

packages/gamut/src/AccordionAreaDeprecated/index.tsx

@@ -34,12 +34,9 @@ const variants = {
  * Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
  */
 
-export const AccordionAreaDeprecated: React.FC<AccordionAreaDeprecatedProps> = ({
-  children,
-  className,
-  expanded,
-  top,
-}) => {
+export const AccordionAreaDeprecated: React.FC<
+  AccordionAreaDeprecatedProps
+> = ({ children, className, expanded, top }) => {
   const [delayExpanded, setDelayExpanded] = useState(expanded);
 
   useIsomorphicLayoutEffect(() => {

packages/gamut/src/AccordionButtonDeprecated/index.tsx

@@ -59,7 +59,9 @@ const buttonThemes = {
  * Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
  */
 
-export const AccordionButtonDeprecated: React.FC<AccordionButtonDeprecatedProps> = ({
+export const AccordionButtonDeprecated: React.FC<
+  AccordionButtonDeprecatedProps
+> = ({
   children,
   className,
   expanded,

packages/gamut/src/Alert/elements.tsx

@@ -7,9 +7,8 @@ import { Box } from '../Box';
 import { AlertProps } from './Alert';
 import { placementVariants } from './variants';
 
-const StyledAlertBanner = styled(Background)<
-  Pick<AlertProps, 'type' | 'placement'>
->(placementVariants);
+const StyledAlertBanner =
+  styled(Background)<Pick<AlertProps, 'type' | 'placement'>>(placementVariants);
 
 export const AlertBanner = forwardRef<
   HTMLDivElement,
@@ -34,9 +33,8 @@ export const AlertBanner = forwardRef<
   )
 );
 
-const StyledAlertBox = styled(Box)<Pick<AlertProps, 'type' | 'placement'>>(
-  placementVariants
-);
+const StyledAlertBox =
+  styled(Box)<Pick<AlertProps, 'type' | 'placement'>>(placementVariants);
 
 export const AlertBox = forwardRef<
   HTMLDivElement,

packages/gamut/src/Button/shared/types.ts

@@ -13,7 +13,7 @@ import { buttonProps, buttonVariants } from './styles';
 
 export interface ButtonBaseProps extends StyleProps<typeof buttonProps> {
   onClick?: HTMLProps<HTMLButtonElement>['onClick'];
-  variant?: typeof buttonVariants[number];
+  variant?: (typeof buttonVariants)[number];
   size?: 'normal' | 'small' | 'large';
   as?: never;
   mode?: ColorModes;

packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedRadioGroupInput.tsx

@@ -3,12 +3,9 @@ import * as React from 'react';
 import { ConnectedRadio, ConnectedRadioGroup } from '.';
 import { ConnectedRadioGroupInputProps } from './types';
 
-export const ConnectedRadioGroupInput: React.FC<ConnectedRadioGroupInputProps> = ({
-  name,
-  options,
-  disabled,
-  ...rest
-}) => {
+export const ConnectedRadioGroupInput: React.FC<
+  ConnectedRadioGroupInputProps
+> = ({ name, options, disabled, ...rest }) => {
   return (
     <ConnectedRadioGroup name={name} {...rest}>
       {options.map((elem) => {

packages/gamut/src/DataList/Rows/HeaderRow.tsx

@@ -27,14 +27,8 @@ export const Header: HeaderComponent = ({
   empty = false,
   hideSelectAll,
 }) => {
-  const {
-    expandable,
-    selectable,
-    onSelect,
-    onFilter,
-    onSort,
-    prefixId,
-  } = useControlContext();
+  const { expandable, selectable, onSelect, onFilter, onSort, prefixId } =
+    useControlContext();
 
   return (
     <ListHeader>

packages/gamut/src/Disclosure/helpers.tsx

@@ -46,13 +46,8 @@ export const renderButton = (buttonProps: {
   ctaText: string;
   href?: string | undefined;
 }) => {
-  const {
-    buttonPlacement,
-    buttonType,
-    ctaCallback,
-    ctaText,
-    href,
-  } = buttonProps;
+  const { buttonPlacement, buttonType, ctaCallback, ctaText, href } =
+    buttonProps;
   const sharedProps = {
     mt: 8 as const,
     lineHeight: 'normal',

packages/gamut/src/Form/__tests__/FormGroup.test.tsx

@@ -18,7 +18,6 @@ describe('FormGroup', () => {
 
       view.getByLabelText(optionalLabelText);
     });
-
   });
   describe('when htmlFor is not provided', () => {
     it('renders Label as a div', () => {

packages/gamut/src/Form/elements/FormGroupLabel.tsx

@@ -73,13 +73,14 @@ export const FormGroupLabel: React.FC<FormGroupLabelProps> = ({
         as={htmlFor ? 'label' : 'div'}
       >
         {children}
-        {!isSoloField && (
-          required ? (
-            <Text as="span" aria-hidden>*</Text>
+        {!isSoloField &&
+          (required ? (
+            <Text as="span" aria-hidden>
+              *
+            </Text>
           ) : (
             '\u00A0(optional)'
-          )
-        )}
+          ))}
       </Label>
       {infotip && <InfoTip {...infotip} />}
     </FlexBox>

packages/gamut/src/Form/inputs/Input.tsx

@@ -58,9 +58,8 @@ export interface InputWrapperProps extends InputProps {
 /**  We greatly prefer NOT to do this but ReactRecurly has some specific needs around focus-styles + padding that force us to export them seperately. If we ever stop using React-Recurly, this code will be 🔪.
  *tldr: Do not do this unless you have already talked to Web-Plat and have failed to find any alternate (and better) solutions. */
 
-export const reactRecurlyFormFieldFocusStyles = system.css(
-  formFieldFocusStyles
-);
+export const reactRecurlyFormFieldFocusStyles =
+  system.css(formFieldFocusStyles);
 
 export const reactRecurlyFormFieldPaddingStyles = system.css(
   formFieldPaddingStyles
@@ -116,9 +115,8 @@ export const Input = forwardRef<HTMLInputElement, InputWrapperProps>(
   ) => {
     const [activatedStyle, setActivatedStyle] = useState(false);
 
-    const { color, icon } = inputStates[
-      getInputState(Boolean(error), Boolean(valid))
-    ];
+    const { color, icon } =
+      inputStates[getInputState(Boolean(error), Boolean(valid))];
 
     /*
      * @remarks We would love to properly type this with generics, but, alas, we cannot yet. See comments on lines 45-47 for more detail.

packages/gamut/src/GridForm/GridFormInputGroup/GridFormRadioGroupInput/index.tsx

@@ -11,15 +11,9 @@ export interface GridFormRadioGroupInputProps extends BaseFormInputProps {
   setValue: (name: string, value: string) => void;
 }
 
-export const GridFormRadioGroupInput: React.FC<GridFormRadioGroupInputProps> = ({
-  className,
-  disabled,
-  field,
-  register,
-  setValue,
-  required,
-  error,
-}) => {
+export const GridFormRadioGroupInput: React.FC<
+  GridFormRadioGroupInputProps
+> = ({ className, disabled, field, register, setValue, required, error }) => {
   const ariaLabel: string | undefined =
     field.ariaLabel ?? (isString(field.label) ? field.label : undefined);
 

packages/gamut/src/GridForm/GridFormInputGroup/GridFormSweetContainerInput/index.tsx

@@ -11,11 +11,9 @@ export type GridFormSweetContainerInputProps = {
   label: string;
 };
 
-export const GridFormSweetContainerInput: React.FC<GridFormSweetContainerInputProps> = ({
-  register,
-  field: { name },
-  label,
-}) => {
+export const GridFormSweetContainerInput: React.FC<
+  GridFormSweetContainerInputProps
+> = ({ register, field: { name }, label }) => {
   return (
     <Box
       height="1px"

packages/gamut/src/GridForm/GridFormInputGroup/__fixtures__/renderers.tsx

@@ -85,11 +85,9 @@ type GridFormInputGroupTestComponentProps = GridFormInputGroupProps & {
   mode?: 'onSubmit' | 'onChange';
 };
 
-export const GridFormInputGroupTestComponent: React.FC<GridFormInputGroupTestComponentProps> = ({
-  field,
-  mode = 'onSubmit',
-  ...rest
-}) => {
+export const GridFormInputGroupTestComponent: React.FC<
+  GridFormInputGroupTestComponentProps
+> = ({ field, mode = 'onSubmit', ...rest }) => {
   return (
     <FormContext mode={mode}>
       <GridFormInputGroup field={field} {...rest} />

packages/gamut/src/GridForm/GridFormSections/__fixtures__/renderers.tsx

@@ -12,21 +12,19 @@ type GridFormSectionTestComponentProps = GridFormSectionProps & {
   mode?: 'onSubmit' | 'onChange';
 };
 
-export const GridFormContentTestComponent: React.FC<GridFormContentTestComponentProps> = ({
-  field,
-  mode = 'onSubmit',
-}) => {
+export const GridFormContentTestComponent: React.FC<
+  GridFormContentTestComponentProps
+> = ({ field, mode = 'onSubmit' }) => {
   return (
     <FormContext mode={mode}>
       <GridFormContent field={field} key={field.name} />
     </FormContext>
   );
 };
 
-export const GridFormSectionTestComponent: React.FC<GridFormSectionTestComponentProps> = ({
-  fields,
-  mode = 'onSubmit',
-}) => {
+export const GridFormSectionTestComponent: React.FC<
+  GridFormSectionTestComponentProps
+> = ({ fields, mode = 'onSubmit' }) => {
   return (
     <FormContext mode={mode}>
       <GridFormSection fields={fields} />

packages/gamut/src/GridForm/GridFormSections/__tests__/GridFormSection.test.tsx

@@ -80,7 +80,7 @@ describe('GridFormSections', () => {
           value: 'Do you know what that is?',
         },
       });
-    })
+    });
 
     await view.findByText('what is it?');
     await view.findByText('not enough updog');

packages/gamut/src/List/elements.tsx

@@ -351,7 +351,7 @@ export interface ColProps
     StyleProps<typeof columnType>,
     StyleProps<typeof columnStates>,
     StyleProps<typeof columnJustify>,
-    StyleProps<typeof system['layout']> {}
+    StyleProps<(typeof system)['layout']> {}
 
 export const ColEl = styled(
   'div',