chore(twmerge): 🚚 rename cx to tcm being more appropriate

adaptui · Sep 20, 2021 · 1b151ee · 1b151ee
1 parent cadcfa9
commit 1b151ee
Show file tree

Hide file tree

Showing 69 changed files with 649 additions and 682 deletions.
diff --git a/.storybook/utils.tsx b/.storybook/utils.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { Meta, Story } from "@storybook/react";
+import type { Story } from "@storybook/react";
 
 import theme from "../src/theme/defaultTheme";
 
@@ -65,10 +65,3 @@ export const createControls = (
     console.log(e);
   }
 };
-
-export type CSFType<M extends Meta> = M extends {
-  component: React.ComponentType<infer P>;
-  args: infer D;
-}
-  ? { args: Omit<P, keyof D> } & Story<P>
-  : never;
diff --git a/package.json b/package.json
@@ -104,11 +104,11 @@
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
     "@release-it/conventional-changelog": "^3.3.0",
-    "@storybook/addon-a11y": "6.3.8",
-    "@storybook/addon-actions": "6.3.8",
-    "@storybook/addon-essentials": "6.3.8",
+    "@storybook/addon-a11y": "^6.4.0-alpha.39",
+    "@storybook/addon-actions": "^6.4.0-alpha.39",
+    "@storybook/addon-essentials": "^6.4.0-alpha.39",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/react": "^6.3.8",
+    "@storybook/react": "^6.4.0-alpha.39",
     "@testing-library/dom": "^8.5.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",

diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import { twMerge as cx } from "tailwind-merge";
 
 import {
   AlertIcon,
@@ -12,7 +11,7 @@ import { Box, BoxProps } from "../box";
 import { AlertBody } from "./AlertBody";
 import { useMediaQuery } from "../hooks";
 import { AlertActions } from "./AlertActions";
-import { createContext, runIfFn } from "../utils";
+import { createContext, runIfFn, tcm } from "../utils";
 import { AlertCloseButton } from "./AlertCloseButton";
 import { forwardRefWithAs, RenderProp } from "../utils/types";
 
@@ -92,7 +91,7 @@ export const Alert = forwardRefWithAs<AlertProps, HTMLDivElement, "div">(
     const context = { status, isTablet };
 
     const theme = useTheme();
-    const alertStyles = cx(
+    const alertStyles = tcm(
       theme.alert.base,
       theme.alert.status[status].base,
       className,

diff --git a/src/alert/AlertActionButton.tsx b/src/alert/AlertActionButton.tsx
@@ -1,6 +1,5 @@
-import { twMerge as cx } from "tailwind-merge";
-
-import { useTheme } from "../index";
+import { tcm } from "../utils";
+import { useTheme } from "../theme";
 import { useAlertContext } from "./Alert";
 import { Button, ButtonProps } from "../button";
 import { forwardRefWithAs } from "../utils/types";
@@ -16,7 +15,7 @@ export const AlertActionButton = forwardRefWithAs<
   const { className, ...rest } = props;
 
   const theme = useTheme();
-  const alertActionButtonStyles = cx(
+  const alertActionButtonStyles = tcm(
     theme.alert.actionButton.base,
     isTablet
       ? theme.alert.actionButton.mobile

diff --git a/src/alert/AlertActions.tsx b/src/alert/AlertActions.tsx
@@ -1,6 +1,5 @@
-import { twMerge as cx } from "tailwind-merge";
-
-import { useTheme } from "../index";
+import { tcm } from "../utils";
+import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";
 import { useAlertContext } from "./Alert";
 import { forwardRefWithAs } from "../utils/types";
@@ -16,7 +15,7 @@ export const AlertActions = forwardRefWithAs<
   const { isTablet } = useAlertContext();
 
   const theme = useTheme();
-  const alertActionsStyles = cx(
+  const alertActionsStyles = tcm(
     theme.alert.actionsWrapper.base,
     isTablet
       ? theme.alert.actionsWrapper.mobile

diff --git a/src/alert/AlertBody.tsx b/src/alert/AlertBody.tsx
@@ -1,6 +1,5 @@
-import { twMerge as cx } from "tailwind-merge";
-
-import { useTheme } from "../index";
+import { tcm } from "../utils";
+import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";
 import { useAlertContext } from "./Alert";
 import { forwardRefWithAs } from "../utils/types";
@@ -16,7 +15,7 @@ export const AlertBody = forwardRefWithAs<
   const { isTablet } = useAlertContext();
 
   const theme = useTheme();
-  const alertBodyStyles = cx(
+  const alertBodyStyles = tcm(
     theme.alert.body.base,
     isTablet ? theme.alert.body.mobile : theme.alert.body.desktop,
     className,

diff --git a/src/alert/AlertCloseButton.tsx b/src/alert/AlertCloseButton.tsx
@@ -1,6 +1,5 @@
-import { twMerge as cx } from "tailwind-merge";
-
-import { useTheme } from "../index";
+import { tcm } from "../utils";
+import { useTheme } from "../theme";
 import { useAlertContext } from "./Alert";
 import { forwardRefWithAs } from "../utils/types";
 import { CloseButton, CloseButtonProps } from "../button";
@@ -16,7 +15,7 @@ export const AlertCloseButton = forwardRefWithAs<
   const { className, ...rest } = props;
 
   const theme = useTheme();
-  const alertCloseButtonStyles = cx(
+  const alertCloseButtonStyles = tcm(
     theme.alert.closeButton,
     theme.alert.status[status].actionButton,
     className,

diff --git a/src/alert/AlertDescription.tsx b/src/alert/AlertDescription.tsx
@@ -1,6 +1,5 @@
-import { twMerge as cx } from "tailwind-merge";
-
-import { useTheme } from "../index";
+import { tcm } from "../utils";
+import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";
 import { useAlertContext } from "./Alert";
 import { forwardRefWithAs } from "../utils/types";
@@ -16,7 +15,7 @@ export const AlertDescription = forwardRefWithAs<
   const { isTablet } = useAlertContext();
 
   const theme = useTheme();
-  const alertDescriptionStyles = cx(
+  const alertDescriptionStyles = tcm(
     theme.alert.description.base,
     isTablet ? theme.alert.description.mobile : theme.alert.description.desktop,
     className,

diff --git a/src/alert/AlertIcon.tsx b/src/alert/AlertIcon.tsx
@@ -1,11 +1,10 @@
-import { twMerge as cx } from "tailwind-merge";
-
 import {
   InfoCircleIcon,
   CheckCircleIcon,
   ExclamationTriangleIcon,
 } from "../icons";
-import { useTheme } from "../index";
+import { tcm } from "../utils";
+import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";
 import { useAlertContext } from "./Alert";
 import { forwardRefWithAs } from "../utils/types";
@@ -30,7 +29,7 @@ export const AlertIcon = forwardRefWithAs<
   const Icon = STATUS_ICONS[status];
 
   const theme = useTheme();
-  const alertIconBaseStyles = cx(
+  const alertIconBaseStyles = tcm(
     theme.alert.icon,
     theme.alert.status[status].icon,
     className,

diff --git a/src/alert/AlertTitle.tsx b/src/alert/AlertTitle.tsx
@@ -1,6 +1,5 @@
-import { twMerge as cx } from "tailwind-merge";
-
-import { useTheme } from "../index";
+import { tcm } from "../utils";
+import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";
 import { forwardRefWithAs } from "../utils/types";
 
@@ -14,7 +13,7 @@ export const AlertTitle = forwardRefWithAs<
   const { className, ...rest } = props;
 
   const theme = useTheme();
-  const alertTitleStyles = cx(theme.alert.title, className);
+  const alertTitleStyles = tcm(theme.alert.title, className);
 
   return <Box className={alertTitleStyles} ref={ref} {...rest} />;
 });

diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import { twMerge as cx } from "tailwind-merge";
 
 import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";
@@ -10,7 +9,7 @@ import { AvatarImage } from "./AvatarImage";
 import { AvatarBadge } from "./AvatarBadge";
 import { useImage } from "../hooks/useImage";
 import { useAvatarGroup } from "./AvatarGroup";
-import { createContext, runIfFn } from "../utils";
+import { createContext, runIfFn, tcm } from "../utils";
 import { forwardRefWithAs, RenderProp } from "../utils/types";
 
 export type AvatarInitialProps = {
@@ -104,7 +103,7 @@ export const Avatar = forwardRefWithAs<AvatarProps, HTMLDivElement, "div">(
     const _showBorder = showBorder || group?.showBorder || false;
     const _borderColor = borderColor || group?.borderColor || false;
     const theme = useTheme();
-    const avatarStyles = cx(
+    const avatarStyles = tcm(
       theme.avatar.base,
       theme.avatar.size[_size],
       _showBorder ? theme.avatar.border.width[_size] : "",

diff --git a/src/avatar/AvatarBadge.tsx b/src/avatar/AvatarBadge.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
-import { twMerge as cx } from "tailwind-merge";
 
+import { tcm } from "../utils";
 import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";
 import { MoonIcon, DotIcon } from "../icons";
@@ -24,7 +24,7 @@ export const AvatarBadge = forwardRefWithAs<
 
   const _status = status || contextStatus || "online";
 
-  const badgeStyles = cx(
+  const badgeStyles = tcm(
     theme.avatar.badge.base,
     theme.avatar.badge.size[size],
     theme.avatar.badge.position[position],
@@ -35,7 +35,7 @@ export const AvatarBadge = forwardRefWithAs<
     if (_status === "online")
       return (
         <DotIcon
-          className={cx(
+          className={tcm(
             theme.avatar.status.online.base,
             theme.avatar.status.online.size[size],
           )}
@@ -44,7 +44,7 @@ export const AvatarBadge = forwardRefWithAs<
     if (_status === "offline")
       return (
         <MoonIcon
-          className={cx(
+          className={tcm(
             theme.avatar.status.offline.base,
             theme.avatar.status.offline.size[size],
           )}
@@ -53,7 +53,7 @@ export const AvatarBadge = forwardRefWithAs<
     if (_status === "typing")
       return (
         <TypingAnimation
-          className={cx(
+          className={tcm(
             theme.avatar.status.typing.base,
             theme.avatar.status.typing.size[size],
           )}
@@ -96,12 +96,12 @@ export const TypingAnimation = forwardRefWithAs<
   const theme = useTheme();
   const { size = "md" } = useAvatarContext();
 
-  const baseStyles = cx(
+  const baseStyles = tcm(
     theme.avatar.status.typing.base,
     theme.avatar.status.typing.size[size],
     className,
   );
-  const typingStyles = cx(theme.avatar.status.typing.circle, circleStyle);
+  const typingStyles = tcm(theme.avatar.status.typing.circle, circleStyle);
 
   return (
     <Box ref={ref} className={baseStyles} {...rest}>

diff --git a/src/avatar/AvatarGroup.tsx b/src/avatar/AvatarGroup.tsx
@@ -1,11 +1,10 @@
 import { useMemo } from "react";
-import { twMerge as cx } from "tailwind-merge";
 
 import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";
 import { forwardRefWithAs } from "../utils/types";
-import { createContext, getValidChildren } from "../utils";
 import { Avatar, AvatarContents, AvatarProps } from "./Avatar";
+import { createContext, getValidChildren, tcm } from "../utils";
 
 export type AvatarGroupContext = Pick<
   AvatarProps,
@@ -64,7 +63,7 @@ export const AvatarGroup = forwardRefWithAs<
         ref={ref}
         role="group"
         aria-label="Avatar group"
-        className={cx(theme.avatar.group.base, className)}
+        className={tcm(theme.avatar.group.base, className)}
         {...rest}
       >
         {childrenWithinMax}
@@ -91,7 +90,7 @@ const AvatarExcess = ({
 }) => {
   const theme = useTheme();
 
-  const excessStyles = cx(
+  const excessStyles = tcm(
     theme.avatar.group.excess.text.base,
     theme.avatar.group.excess.text.size[size],
   );

diff --git a/src/avatar/AvatarIcon.tsx b/src/avatar/AvatarIcon.tsx
@@ -1,10 +1,10 @@
-import { isValidElement, cloneElement } from "react";
 import { Box, BoxProps } from "reakit";
-import { twMerge as cx } from "tailwind-merge";
+import { isValidElement, cloneElement } from "react";
 
+import { tcm } from "../utils";
 import { useTheme } from "../theme";
-import { forwardRefWithAs } from "../utils/types";
 import { useAvatarContext } from "./Avatar";
+import { forwardRefWithAs } from "../utils/types";
 
 export type AvatarIconProps = BoxProps & {};
 
@@ -24,7 +24,7 @@ export const AvatarIcon = forwardRefWithAs<
       })
     : children;
 
-  const iconStyles = cx(
+  const iconStyles = tcm(
     theme.avatar.icon.base,
     theme.avatar.icon.size[size],
     className,

diff --git a/src/avatar/AvatarImage.tsx b/src/avatar/AvatarImage.tsx
@@ -1,5 +1,4 @@
-import { twMerge as cx } from "tailwind-merge";
-
+import { tcm } from "../utils";
 import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";
 import { useAvatarContext } from "./Avatar";
@@ -24,7 +23,7 @@ export const AvatarImage = forwardRefWithAs<
       src={src}
       alt={name}
       loading={loading}
-      className={cx(theme.avatar.image, className)}
+      className={tcm(theme.avatar.image, className)}
       {...rest}
     />
   );

diff --git a/src/avatar/AvatarName.tsx b/src/avatar/AvatarName.tsx
@@ -1,5 +1,4 @@
-import { twMerge as cx } from "tailwind-merge";
-
+import { tcm } from "../utils";
 import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";
 import { forwardRefWithAs } from "../utils/types";
@@ -16,7 +15,7 @@ export const AvatarName = forwardRefWithAs<AvatarNameProps>((props, ref) => {
 
   if (!initial) return null;
 
-  const nameStyles = cx(
+  const nameStyles = tcm(
     theme.avatar.initials.base,
     theme.avatar.initials.size[size],
     className,

diff --git a/src/badge/Badge.tsx b/src/badge/Badge.tsx
@@ -1,4 +1,4 @@
-import { twMerge as cx } from "tailwind-merge";
+import { tcm } from "../utils";
 
 import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";
@@ -38,7 +38,7 @@ export const Badge = forwardRefWithAs<BadgeProps, HTMLSpanElement, "span">(
     } = props;
 
     const badge = useTheme("badge");
-    const badgeStyles = cx(
+    const badgeStyles = tcm(
       badge.base,
       badge.size[size],
       badge.variant[variant][themeColor],