chore: update biomejs

.changeset/lucky-birds-begin.md

@@ -0,0 +1,18 @@
+---
+"@twilio-paste/badge": patch
+"@twilio-paste/combobox": patch
+"@twilio-paste/core": patch
+"@twilio-paste/inline-control-group": patch
+"@twilio-paste/page-header": patch
+"@twilio-paste/status": patch
+"@twilio-paste/box": patch
+"@twilio-paste/menu-primitive": patch
+"@twilio-paste/text": patch
+"@twilio-paste/customization": patch
+"@twilio-paste/data-visualization-library": patch
+"@twilio-paste/react-textarea-autosize-library": patch
+"@twilio-paste/styling-library": patch
+"@twilio-paste/theme": patch
+---
+
+chore: code formatting updates; no material changes applied

biome.json

@@ -54,20 +54,20 @@
   "formatter": {
     "enabled": true,
     "indentStyle": "space",
-    "indentSize": 2,
+    "indentWidth": 2,
     "lineWidth": 120
   },
   "javascript": {
     "formatter": {
       "indentStyle": "space",
-      "indentSize": 2,
+      "indentWidth": 2,
       "lineWidth": 120
     }
   },
   "json": {
     "formatter": {
       "indentStyle": "space",
-      "indentSize": 2,
+      "indentWidth": 2,
       "lineWidth": 120
     }
   }

cypress/support/commands/parent-commands.ts

@@ -53,10 +53,7 @@ Cypress.Commands.add("checkInPageNavigationLinks", () => {
   cy.get("@pageAsideAnchors").then((anchors) => {
     cy.get("@anchoredHeadings").each((anchor, idx) => {
       cy.wrap(anchor).should("have.attr", "href").and("include", "#");
-      cy.wrap(anchors[idx])
-        .should("have.attr", "href")
-        .and("include", "#")
-        .and("eql", anchor.attr("href"));
+      cy.wrap(anchors[idx]).should("have.attr", "href").and("include", "#").and("eql", anchor.attr("href"));
     });
   });
 });

package.json

@@ -80,7 +80,7 @@
     "lint:repo": "eslint -c .eslintrc.repo.js --ext .tsx,.ts .",
     "format": "biome format ./ && prettier --list-different ./packages/",
     "format:write": "biome format ./ --write && prettier ./ --write",
-    "format:ci": "biome ci ./ --linter-enabled=false && prettier --list-different ./packages/",
+  "format:ci": "biome ci ./ --linter-enabled=false && prettier --list-different ./packages/",
     "type-check": "yarn prebuild && yarn nx run-many --target=tsc",
     "tsc": "echo 'Did you mean to run yarn type-check?'",
     "chromatic": "chromatic",
@@ -103,7 +103,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
     "@babel/types": "^7.21.4",
-    "@biomejs/biome": "1.2.2",
+    "@biomejs/biome": "^1.6.3",
     "@changesets/changelog-github": "^0.2.8",
     "@changesets/cli": "^2.13.1",
     "@commitlint/cli": "16.2.1",

packages/paste-core/components/badge/src/styles.ts

@@ -21,7 +21,7 @@ export const badgeBaseStyles: BoxStyleProps = {
 };
 
 export const badgeVariantStyles: {
-  [key in typeof BadgeVariants[number]]: {
+  [key in (typeof BadgeVariants)[number]]: {
     backgroundColor: BoxStyleProps["backgroundColor"];
     color: BoxStyleProps["color"];
     borderRadius?: BoxStyleProps["borderRadius"];
@@ -121,7 +121,7 @@ export const badgeVariantStyles: {
 };
 
 export const badgeButtonStyles: {
-  [key in typeof BadgeVariants[number]]: {
+  [key in (typeof BadgeVariants)[number]]: {
     boxShadow: BoxStyleProps["boxShadow"];
   };
 } = {
@@ -186,7 +186,7 @@ export const badgeAnchorStyles: BoxStyleProps = {
   _focus: { textDecoration: "none", boxShadow: "shadowFocus" },
 };
 
-export const getBadgeButtonStyles = (variant: typeof BadgeVariants[number]): BoxStyleProps => {
+export const getBadgeButtonStyles = (variant: (typeof BadgeVariants)[number]): BoxStyleProps => {
   const variantButtonStyle = badgeButtonStyles[variant];
   return {
     ...variantButtonStyle,

packages/paste-core/components/badge/src/types.ts

@@ -13,7 +13,7 @@ export type BadgeBaseProps = {
    * @type {BadgeVariants}
    * @memberof BadgeBaseProps
    */
-  variant: typeof BadgeVariants[number];
+  variant: (typeof BadgeVariants)[number];
   /**
    *
    * @default "default"

packages/paste-core/components/badge/stories/customization.stories.tsx

@@ -10,7 +10,7 @@ import * as React from "react";
 import { Badge } from "../src";
 import type { BadgeVariants } from "../src/constants";
 
-export const makeBadge = (variant: typeof BadgeVariants[number], element?: string): React.ReactElement => (
+export const makeBadge = (variant: (typeof BadgeVariants)[number], element?: string): React.ReactElement => (
   <Badge as="span" element={element} variant={variant} data-testid={`${variant}_badge`}>
     HelloWorld
   </Badge>
@@ -38,7 +38,7 @@ export const getStyles = (element = "BADGE"): { [key: string]: PasteCustomCSS }
 };
 
 const CustomizationWrapper: React.FC<
-  React.PropsWithChildren<{ variant: typeof BadgeVariants[number]; isTestEnvironment: boolean }>
+  React.PropsWithChildren<{ variant: (typeof BadgeVariants)[number]; isTestEnvironment: boolean }>
 > = ({ variant, isTestEnvironment }): React.ReactElement => {
   const theme = useTheme();
   const customElement = "FOO";

packages/paste-core/components/combobox/__tests__/virtualization.spec.tsx

@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import type { RenderOptions } from "@testing-library/react";
 import { CustomizationProvider } from "@twilio-paste/customization";
 import * as React from "react";
-import type { VirtualItem, useVirtual as UseVirtual } from "react-virtual/types";
+import type { useVirtual as UseVirtual, VirtualItem } from "react-virtual/types";
 
 import { Combobox } from "../src";
 

packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx

@@ -104,9 +104,9 @@ const ComboboxListboxOption = React.forwardRef<HTMLLIElement, ComboboxListboxOpt
           highlighted
             ? "colorTextPrimary"
             : // eslint-disable-next-line unicorn/no-nested-ternary
-            selected
-            ? "colorTextPrimary"
-            : "colorText"
+              selected
+              ? "colorTextPrimary"
+              : "colorText"
         }
         display="flex"
         justifyContent="space-between"

packages/paste-core/components/inline-control-group/__tests__/inlineControlGroup.test.tsx

@@ -1,4 +1,4 @@
-import { render as testRender, screen } from "@testing-library/react";
+import { screen, render as testRender } from "@testing-library/react";
 import { CustomizationProvider } from "@twilio-paste/customization";
 import * as React from "react";
 

packages/paste-core/components/page-header/src/PageHeaderHeading.tsx

@@ -1,7 +1,7 @@
 import type { BoxProps } from "@twilio-paste/box";
 import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
 import { Heading } from "@twilio-paste/heading";
-import type { HeadingVariants, asTags as AsTags } from "@twilio-paste/heading";
+import type { asTags as AsTags, HeadingVariants } from "@twilio-paste/heading";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as React from "react";
 

packages/paste-core/components/page-header/tsconfig.json

@@ -1,12 +1,8 @@
 {
   "extends": "../../../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "dist/",
+    "outDir": "dist/"
   },
-  "include": [
-    "src/**/*",
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
 }

packages/paste-core/components/status/src/types.ts

@@ -17,7 +17,7 @@ export type StatusBadgeVariants =
 
 export type StatusBadges = {
   [key in StatusBadgeVariants]: {
-    badgeVariant: typeof BadgeVariants[number];
+    badgeVariant: (typeof BadgeVariants)[number];
     icon: React.ReactNode;
     color: TextColorOptions;
   };

packages/paste-core/primitives/box/src/Box.tsx

@@ -4,11 +4,11 @@ import {
   boxShadow,
   compose,
   createShouldForwardProp,
+  props as defaultStylingProps,
   flexbox,
   grid,
   layout,
   position,
-  props as defaultStylingProps,
   space,
   styled,
   typography,

packages/paste-core/primitives/menu/__tests__/index.spec.tsx

@@ -10,29 +10,28 @@ import {
 } from "../src";
 import type { MenuPrimitiveButtonProps } from "../src";
 
-const PreferencesMenu = React.forwardRef<HTMLButtonElement, MenuPrimitiveButtonProps>(function PreferencesMenu(
-  props,
-  ref,
-) {
-  const menu = useMenuPrimitiveState({ baseId: "sub-menu" });
-  return (
-    <>
-      <MenuPrimitiveButton ref={ref} {...menu} {...props} data-testid="example-submenu-trigger">
-        Preferences
-      </MenuPrimitiveButton>
-      <MenuPrimitive {...menu} aria-label="Preferences" data-testid="example-submenu">
-        <MenuPrimitiveItem {...menu} data-testid="example-submenu-item">
-          Settings
-        </MenuPrimitiveItem>
-        <MenuPrimitiveItem {...menu} disabled data-testid="example-disabled-submenu-item">
-          Extensions
-        </MenuPrimitiveItem>
-        <MenuPrimitiveSeparator {...menu} />
-        <MenuPrimitiveItem {...menu}>Keyboard shortcuts</MenuPrimitiveItem>
-      </MenuPrimitive>
-    </>
-  );
-});
+const PreferencesMenu = React.forwardRef<HTMLButtonElement, MenuPrimitiveButtonProps>(
+  function PreferencesMenu(props, ref) {
+    const menu = useMenuPrimitiveState({ baseId: "sub-menu" });
+    return (
+      <>
+        <MenuPrimitiveButton ref={ref} {...menu} {...props} data-testid="example-submenu-trigger">
+          Preferences
+        </MenuPrimitiveButton>
+        <MenuPrimitive {...menu} aria-label="Preferences" data-testid="example-submenu">
+          <MenuPrimitiveItem {...menu} data-testid="example-submenu-item">
+            Settings
+          </MenuPrimitiveItem>
+          <MenuPrimitiveItem {...menu} disabled data-testid="example-disabled-submenu-item">
+            Extensions
+          </MenuPrimitiveItem>
+          <MenuPrimitiveSeparator {...menu} />
+          <MenuPrimitiveItem {...menu}>Keyboard shortcuts</MenuPrimitiveItem>
+        </MenuPrimitive>
+      </>
+    );
+  },
+);
 
 const MenuMock = (): JSX.Element => {
   const menu = useMenuPrimitiveState({ baseId: "menu-example" });

packages/paste-core/primitives/text/src/Text.tsx

@@ -5,9 +5,9 @@ import {
   display,
   overflow,
   position,
-  props as stylingProps,
   space,
   styled,
+  props as stylingProps,
   typography,
   verticalAlign,
 } from "@twilio-paste/styling-library";

packages/paste-customization/src/CustomizationProvider.tsx

@@ -1,5 +1,5 @@
 import { Globals as AnimatedGlobals, useReducedMotion } from "@twilio-paste/animation-library";
-import { StylingGlobals, ThemeProvider as StyledThemeProvider } from "@twilio-paste/styling-library";
+import { ThemeProvider as StyledThemeProvider, StylingGlobals } from "@twilio-paste/styling-library";
 import { DarkTheme, DefaultTheme, StyledBase, pasteGlobalStyles } from "@twilio-paste/theme";
 import * as React from "react";
 

packages/paste-libraries/data-visualization/stories/options/timeSeriesOptions.ts

@@ -37,12 +37,7 @@ export const timeSeriesOptions: Highcharts.Options = {
         },
         stops: [
           [0, Highcharts.getOptions().colors[0]],
-          [
-            1,
-            Highcharts.color(Highcharts.getOptions().colors[0])
-              .setOpacity(0)
-              .get("rgba"),
-          ],
+          [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get("rgba")],
         ],
       },
       marker: {

packages/paste-libraries/react-textarea-autosize/src/getSizingData.ts

@@ -26,7 +26,7 @@ const SIZING_STYLE = [
   "wordBreak",
 ] as const;
 
-type SizingProps = Extract<typeof SIZING_STYLE[number], keyof CSSStyleDeclaration>;
+type SizingProps = Extract<(typeof SIZING_STYLE)[number], keyof CSSStyleDeclaration>;
 
 type SizingStyle = Pick<CSSStyleDeclaration, SizingProps>;
 

packages/paste-libraries/styling/src/css-function/css.ts

@@ -196,51 +196,53 @@ export const responsive = (styles: { [key: string]: any }) => (theme: JSON) => {
   return next;
 };
 
-export const css = (args: any) => (props = {}): CSSObject => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const theme = { ...defaultTheme, ...(props.theme || props) };
-  let result: { [key: string]: any } = {};
-  const obj = typeof args === "function" ? args(theme) : args;
-  const styles = responsive(obj)(theme);
-
-  // eslint-disable-next-line guard-for-in,no-restricted-syntax
-  for (const key in styles) {
-    const x = styles[key];
-    const val = typeof x === "function" ? x(theme) : x;
-
-    if (key === "variant") {
-      const variant = css(get(theme, val))(theme);
-      result = { ...result, ...variant };
-      // eslint-disable-next-line no-continue
-      continue;
-    }
+export const css =
+  (args: any) =>
+  (props = {}): CSSObject => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const theme = { ...defaultTheme, ...(props.theme || props) };
+    let result: { [key: string]: any } = {};
+    const obj = typeof args === "function" ? args(theme) : args;
+    const styles = responsive(obj)(theme);
+
+    // eslint-disable-next-line guard-for-in,no-restricted-syntax
+    for (const key in styles) {
+      const x = styles[key];
+      const val = typeof x === "function" ? x(theme) : x;
+
+      if (key === "variant") {
+        const variant = css(get(theme, val))(theme);
+        result = { ...result, ...variant };
+        // eslint-disable-next-line no-continue
+        continue;
+      }
 
-    if (val && typeof val === "object") {
-      result[key] = css(val)(theme);
-      // eslint-disable-next-line no-continue
-      continue;
-    }
+      if (val && typeof val === "object") {
+        result[key] = css(val)(theme);
+        // eslint-disable-next-line no-continue
+        continue;
+      }
 
-    const prop = get(aliases, key, key);
-    const scaleName = get(scales, prop);
-    const scale = get(theme, scaleName, get(theme, prop, {}));
-    const transform = get(transforms, prop, get);
-    const value = transform(scale, val, val);
+      const prop = get(aliases, key, key);
+      const scaleName = get(scales, prop);
+      const scale = get(theme, scaleName, get(theme, prop, {}));
+      const transform = get(transforms, prop, get);
+      const value = transform(scale, val, val);
 
-    if (multiples[prop]) {
-      const dirs = multiples[prop];
+      if (multiples[prop]) {
+        const dirs = multiples[prop];
 
-      for (const dir of dirs) {
-        result[dir] = value;
+        for (const dir of dirs) {
+          result[dir] = value;
+        }
+      } else {
+        result[prop] = value;
       }
-    } else {
-      result[prop] = value;
     }
-  }
 
-  return result;
-};
+    return result;
+  };
 
 // eslint-disable-next-line import/no-default-export
 export default css;

packages/paste-theme/src/themeProvider.tsx

@@ -1,8 +1,8 @@
 import { Globals as AnimatedGlobals, useReducedMotion } from "@twilio-paste/animation-library";
 import {
   CacheProvider as EmotionCacheProvider,
-  StylingGlobals,
   ThemeProvider as EmotionThemeProvider,
+  StylingGlobals,
   createCache,
   styled,
 } from "@twilio-paste/styling-library";