UI: move from cx to cn classname utility

CivicDataLab · Feb 6, 2024 · 2ec263f · 2ec263f
1 parent 94912a3
commit 2ec263f
Show file tree

Hide file tree

Showing 52 changed files with 773 additions and 746 deletions.
diff --git a/packages/opub-ui/src/components/ActionList/components/Item/Item.tsx b/packages/opub-ui/src/components/ActionList/components/Item/Item.tsx
@@ -1,13 +1,14 @@
+import React from 'react';
+
 import type { ActionListItemDescriptor } from '../../../../types/actionlist';
 import { Color } from '../../../../types/icon';
+import { cn } from '../../../../utils';
 import { handleMouseUpByBlurring } from '../../../../utils/focus';
 import { Box } from '../../../Box';
 import { UnstyledLink } from '../../../Button/BaseLink';
 import { Icon } from '../../../Icon';
 import { Text } from '../../../Text';
 import styles from '../../ActionList.module.scss';
-import cx from 'classnames';
-import React from 'react';
 
 export type ItemProps = ActionListItemDescriptor;
 
@@ -28,7 +29,7 @@ export function Item({
   active,
   role,
 }: ItemProps) {
-  const className = cx(
+  const className = cn(
     styles.Item,
     disabled && styles.disabled,
     destructive && styles.destructive,
@@ -65,7 +66,7 @@ export function Item({
   );
 
   const suffixMarkup = suffix && (
-    <span className={cx(styles.Suffix, styles.Prefix)}>
+    <span className={cn(styles.Suffix, styles.Prefix)}>
       {<Icon source={suffix} color={color} />}
     </span>
   );

diff --git a/packages/opub-ui/src/components/AlertDialog/AlertDialog.tsx b/packages/opub-ui/src/components/AlertDialog/AlertDialog.tsx
@@ -1,9 +1,10 @@
-import styles from '../Dialog/Dialog.module.scss';
+import React, { forwardRef, Ref } from 'react';
+import * as AlertDialogRadix from '@radix-ui/react-alert-dialog';
+
+import { cn } from '../../utils';
 import { Footer, FooterProps } from '../Dialog/components';
+import styles from '../Dialog/Dialog.module.scss';
 import { Header } from './components';
-import * as AlertDialogRadix from '@radix-ui/react-alert-dialog';
-import cx from 'classnames';
-import React, { forwardRef, Ref } from 'react';
 
 interface DialogProps extends AlertDialogRadix.DialogProps {
   Trigger?: AlertDialogRadix.DialogTriggerProps;
@@ -74,7 +75,7 @@ const Content = forwardRef((props: ContentProps, ref: any) => {
   const rId = React.useId();
   const finalId = id || rId;
 
-  const classname = cx(
+  const classname = cn(
     styles.Dialog,
     small && styles.sizeSmall,
     large && styles.sizeLarge,

diff --git a/packages/opub-ui/src/components/Avatar/Avatar.tsx b/packages/opub-ui/src/components/Avatar/Avatar.tsx
@@ -1,8 +1,8 @@
-import { Box } from '../Box';
+import * as AvatarRadix from '@radix-ui/react-avatar';
+
+import { cn } from '../../utils';
 import { Text } from '../Text';
 import styles from './Avatar.module.scss';
-import * as AvatarRadix from '@radix-ui/react-avatar';
-import cx from 'classnames';
 
 type Props = {
   showLabel?: boolean;
@@ -38,7 +38,7 @@ const Avatar = ({
       .map((item: any) => item[0])
       .join('')
       .toUpperCase();
-  const className = cx(
+  const className = cn(
     styles.Avatar,
     variantStyles[size],
     size === 'medium' && showInitials && styles.AvatarProfileMedium,

diff --git a/packages/opub-ui/src/components/Badge/Badge.tsx b/packages/opub-ui/src/components/Badge/Badge.tsx
@@ -1,8 +1,8 @@
 import { BadgeProps } from '../../types/badge';
+import { cn } from '../../utils';
 import { Text } from '../Text';
 import styles from './Badge.module.scss';
 import { Pip } from './components/Pip';
-import cx from 'classnames';
 
 export const Badge = ({
   progress = 'default',
@@ -33,7 +33,7 @@ export const Badge = ({
     return `${name}${value.charAt(0).toUpperCase()}${value.slice(1)}`;
   }
 
-  const className = cx(
+  const className = cn(
     styles.Badge,
     status && styles[variationName('status', status)]
   );

diff --git a/packages/opub-ui/src/components/Badge/components/Pip/Pip.tsx b/packages/opub-ui/src/components/Badge/components/Pip/Pip.tsx
@@ -1,5 +1,5 @@
-import cx from 'classnames';
 import { Progress, Status } from '../../../../types/badge';
+import { cn } from '../../../../utils';
 import { Text } from '../../../Text';
 import styles from './Pip.module.scss';
 
@@ -18,7 +18,7 @@ export const Pip = ({
   progress = 'complete',
   accessibilityLabelOverride,
 }: PipProps) => {
-  const className = cx(
+  const className = cn(
     styles.Pip,
     status && styles[variationName('status', status)],
     progress && styles[variationName('progress', progress)]

diff --git a/packages/opub-ui/src/components/Box/Box.tsx b/packages/opub-ui/src/components/Box/Box.tsx
@@ -1,7 +1,11 @@
-import cx from 'classnames';
 import React, { createElement, forwardRef } from 'react';
+
 import { BoxProps, FlexStyleProps } from '../../types/box';
-import { getResponsiveProps, sanitizeCustomProperties } from '../../utils/css';
+import {
+  cn,
+  getResponsiveProps,
+  sanitizeCustomProperties,
+} from '../../utils/css';
 import boxStyles from './Box.module.scss';
 
 export const Box = forwardRef<HTMLElement, BoxProps & FlexStyleProps>(
@@ -175,7 +179,7 @@ export const Box = forwardRef<HTMLElement, BoxProps & FlexStyleProps>(
       alignContent,
     } as React.CSSProperties;
 
-    const className = cx(
+    const className = cn(
       boxStyles.Box,
       visuallyHidden && boxStyles.visuallyHidden,
       printHidden && boxStyles.printHidden,

diff --git a/packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,7 +1,8 @@
+import React from 'react';
+
+import { cn } from '../../utils';
 import { Text } from '../Text';
 import styles from './Breadcrumbs.module.scss';
-import cx from 'classnames';
-import React from 'react';
 
 type Props = {
   crumbs: {
@@ -12,7 +13,7 @@ type Props = {
   itemsAfterCollapse?: number;
 };
 
-const className = cx(styles.Breadcrumbs);
+const className = cn(styles.Breadcrumbs);
 
 const Breadcrumbs = ({
   crumbs,

diff --git a/packages/opub-ui/src/components/Button/Button.tsx b/packages/opub-ui/src/components/Button/Button.tsx
@@ -4,10 +4,9 @@ import {
   IconChevronUp,
   IconSelector,
 } from '@tabler/icons-react';
-import cx from 'classnames';
 
 import { ConnectedDisclosure } from '../../types/button';
-import { variationName } from '../../utils/css';
+import { cn, variationName } from '../../utils/css';
 import { handleMouseUpByBlurring, MouseUpBlurHandler } from '../../utils/focus';
 import { Icon } from '../Icon';
 import { Menu } from '../Menu';
@@ -127,7 +126,7 @@ const Button = React.forwardRef(
     } = props;
     const isDisabled = disabled || loading;
 
-    const className = cx(
+    const className = cn(
       styles.Button,
       styles[variationName('kind', kind)],
       styles[variationName('variant', variant)],
@@ -146,7 +145,7 @@ const Button = React.forwardRef(
 
     const childMarkup = children ? (
       <span
-        className={cx(styles.Text, removeUnderline && styles.removeUnderline)}
+        className={cn(styles.Text, removeUnderline && styles.removeUnderline)}
         // Fixes Safari bug that doesn't re-render button text to correct color
         key={disabled ? 'text-disabled' : 'text'}
       >
@@ -165,12 +164,12 @@ const Button = React.forwardRef(
     ) : null;
 
     const iconMarkup = icon ? (
-      <span className={cx(styles.Icon, loading && styles.hidden)}>{icon}</span>
+      <span className={cn(styles.Icon, loading && styles.hidden)}>{icon}</span>
     ) : null;
 
     const disclosureMarkup = disclosure ? (
       <span className={styles.Icon}>
-        <div className={cx(styles.DisclosureIcon, loading && styles.hidden)}>
+        <div className={cn(styles.DisclosureIcon, loading && styles.hidden)}>
           {loading ? (
             <div className={styles.Placeholder} />
           ) : (
@@ -187,7 +186,7 @@ const Button = React.forwardRef(
 
     let connectedDisclosureMarkup;
     if (connectedDisclosure && connectedDisclosure.actions.length > 0) {
-      const connectedDisclosureClassName = cx(
+      const connectedDisclosureClassName = cn(
         styles.Button,
         styles[variationName('kind', kind)],
         styles[variationName('variant', variant)],

diff --git a/packages/opub-ui/src/components/ButtonGroup/ButtonGroup.tsx b/packages/opub-ui/src/components/ButtonGroup/ButtonGroup.tsx
@@ -1,6 +1,6 @@
-import cx from 'classnames';
 import React from 'react';
-import { elementChildren } from '../../utils';
+
+import { cn, elementChildren } from '../../utils';
 import styles from './ButtonGroup.module.scss';
 import { Item } from './components';
 
@@ -29,7 +29,7 @@ export function ButtonGroup({
   connectedTop,
   noWrap,
 }: ButtonGroupProps) {
-  const className = cx(
+  const className = cn(
     styles.ButtonGroup,
     spacing && styles[spacing],
     segmented && styles.segmented,

diff --git a/packages/opub-ui/src/components/ButtonGroup/components/Item/Item.tsx b/packages/opub-ui/src/components/ButtonGroup/components/Item/Item.tsx
@@ -1,6 +1,6 @@
-import cx from 'classnames';
 import React from 'react';
-import { useToggle } from '../../../../utils';
+
+import { cn, useToggle } from '../../../../utils';
 import styles from '../../ButtonGroup.module.scss';
 
 export interface ItemProps {
@@ -14,7 +14,7 @@ export function Item({ button }: ItemProps) {
     setFalse: forceFalseFocused,
   } = useToggle(false);
 
-  const className = cx(
+  const className = cn(
     styles.Item,
     focused && styles['Item-focused'],
     button.props.plain && styles['Item-plain']

diff --git a/packages/opub-ui/src/components/Calendar/Calendar.tsx b/packages/opub-ui/src/components/Calendar/Calendar.tsx
@@ -1,17 +1,18 @@
 'use client';
 
-import { Icon } from '../Icon';
-import { Text } from '../Text';
-import styles from './Calendar.module.scss';
-import { CalendarGrid } from './components/CalendarGrid';
+import { forwardRef, LegacyRef } from 'react';
 import { GregorianCalendar } from '@internationalized/date';
 import { AriaCalendarProps, DateValue } from '@react-types/calendar';
 import { IconArrowLeft, IconArrowRight } from '@tabler/icons-react';
-import cx from 'classnames';
-import { forwardRef, LegacyRef } from 'react';
 import { useCalendar, useLocale } from 'react-aria';
 import { CalendarStateOptions, useCalendarState } from 'react-stately';
 
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import styles from './Calendar.module.scss';
+import { CalendarGrid } from './components/CalendarGrid';
+
 function createCalendar(identifier: any) {
   switch (identifier) {
     case 'gregory':
@@ -48,7 +49,7 @@ const Calendar = forwardRef(
       ...othersNext
     } = nextButtonProps;
 
-    const themeClass = cx(styles.Calendar, {});
+    const themeClass = cn(styles.Calendar);
     return (
       <div
         {...calendarProps}

diff --git a/packages/opub-ui/src/components/Calendar/RangeCalendar.tsx b/packages/opub-ui/src/components/Calendar/RangeCalendar.tsx
@@ -1,20 +1,21 @@
 'use client';
 
-import { Icon } from '../Icon';
-import { Text } from '../Text';
-import styles from './Calendar.module.scss';
-import { CalendarGrid } from './components/CalendarGrid';
+import React from 'react';
 import { GregorianCalendar } from '@internationalized/date';
 import { AriaRangeCalendarProps, DateValue } from '@react-types/calendar';
 import { IconArrowLeft, IconArrowRight } from '@tabler/icons-react';
-import cx from 'classnames';
-import React from 'react';
 import { useLocale, useRangeCalendar } from 'react-aria';
 import {
   RangeCalendarStateOptions,
   useRangeCalendarState,
 } from 'react-stately';
 
+import { cn } from '../../utils';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import styles from './Calendar.module.scss';
+import { CalendarGrid } from './components/CalendarGrid';
+
 function createCalendar(identifier: any) {
   switch (identifier) {
     case 'gregory':
@@ -35,7 +36,7 @@ function RangeCalendar(props: Props) {
   });
 
   let ref = React.useRef(null);
-  const themeClass = cx(styles.Calendar, {});
+  const themeClass = cn(styles.Calendar);
 
   let { calendarProps, prevButtonProps, nextButtonProps, title } =
     useRangeCalendar(props, state, ref);

diff --git a/packages/opub-ui/src/components/Calendar/components/CalendarGrid/CalendarCell.tsx b/packages/opub-ui/src/components/Calendar/components/CalendarGrid/CalendarCell.tsx
@@ -1,9 +1,10 @@
-import { CalendarDate, isSameDay, isToday } from '@internationalized/date';
-import { Text } from '../../../Text';
-import cx from 'classnames';
 import React from 'react';
+import { CalendarDate, isSameDay, isToday } from '@internationalized/date';
 import { AriaCalendarCellProps, useCalendarCell } from 'react-aria';
 import { CalendarState, RangeCalendarState } from 'react-stately';
+
+import { cn } from '../../../../utils';
+import { Text } from '../../../Text';
 import styles from '../../Calendar.module.scss';
 
 interface CalendarCellProps extends AriaCalendarCellProps {
@@ -30,7 +31,7 @@ export function CalendarCell({ state, date }: CalendarCellProps) {
   let isSelectionEnd =
     isSelected && highlightedRange && isSameDay(date, highlightedRange.end);
 
-  const classname = cx(
+  const classname = cn(
     styles.Cell,
     isToday(date, state.timeZone) && styles.Today,
     isSelected && styles.Selected,

diff --git a/packages/opub-ui/src/components/Checkbox/Checkbox.tsx b/packages/opub-ui/src/components/Checkbox/Checkbox.tsx
@@ -1,11 +1,12 @@
+import React, { forwardRef } from 'react';
+import * as CheckboxRadix from '@radix-ui/react-checkbox';
+import { IconCheck, IconMinus } from '@tabler/icons-react';
+
 import { CheckboxProps } from '../../types/checkbox';
+import { cn } from '../../utils';
 import { Choice } from '../Choice';
 import { Icon } from '../Icon';
 import styles from './Checkbox.module.scss';
-import * as CheckboxRadix from '@radix-ui/react-checkbox';
-import { IconCheck, IconMinus } from '@tabler/icons-react';
-import cx from 'classnames';
-import React, { forwardRef } from 'react';
 
 const Checkbox = forwardRef(
   (
@@ -17,7 +18,7 @@ const Checkbox = forwardRef(
     const id = React.useId();
     const isIndeterminate = props.checked === 'indeterminate';
 
-    const inputClassName = cx(
+    const inputClassName = cn(
       styles.Input,
       error && styles.Error,
       props.disabled && styles.Disabled

diff --git a/packages/opub-ui/src/components/CheckboxGroup/CheckboxGroup.tsx b/packages/opub-ui/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -1,10 +1,11 @@
+import React, { useId } from 'react';
+
 import { CheckboxGroupProps } from '../../types/choicelist';
+import { cn } from '../../utils';
 import { Checkbox } from '../Checkbox';
 import { InlineMessage } from '../InlineMessage';
 import { Text } from '../Text';
 import styles from './CheckboxGroup.module.scss';
-import cx from 'classnames';
-import React, { useId } from 'react';
 
 export const CheckboxGroup = React.forwardRef(
   (
@@ -51,7 +52,7 @@ export const CheckboxGroup = React.forwardRef(
       onChange && onChange(nextArr, nameProp);
     }
 
-    const wrapperClassName = cx(styles.CheckboxGroup);
+    const wrapperClassName = cn(styles.CheckboxGroup);
     const titleMarkup = title ? (
       <Text variant="bodyMd" as="legend" visuallyHidden={titleHidden}>
         {title}