Merge pull request 'use css modules for Tag and MachineStatus' (#5255) from hgl-ui-machine into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5255

pkgs/clan-app/ui/src/components/Logo/Logo.tsx

@@ -1,7 +1,8 @@
 import Clan from "@/logos/clan.svg";
 import { Dynamic } from "solid-js/web";
-import { Color, fgClass } from "@/src/components/colors";
-import { JSX, splitProps } from "solid-js";
+import { Color } from "@/src/components/colors";
+import colorsStyles from "../colors.module.css";
+import { JSX, mergeProps } from "solid-js";
 import cx from "classnames";
 
 const logos = {
@@ -11,26 +12,19 @@ const logos = {
 export type LogoVariant = keyof typeof logos;
 
 export interface LogoProps extends JSX.SvgSVGAttributes<SVGElement> {
-  class?: string;
   variant: LogoVariant;
   color?: Color;
   inverted?: boolean;
 }
 
 export const Logo = (props: LogoProps) => {
-  const [local, iconProps] = splitProps(props, [
-    "variant",
-    "color",
-    "class",
-    "inverted",
-  ]);
-
+  const local = mergeProps({ color: "primary" } as const, props);
   const Logo = logos[local.variant];
   return (
     <Dynamic
       component={Logo}
-      class={cx("icon", local.class, fgClass(local.color, local.inverted), {
-        inverted: local.inverted,
+      class={cx(local.color && colorsStyles[local.color], {
+        [colorsStyles.inverted]: local.inverted,
       })}
       data-logo-name={local.variant}
     />

pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.module.css

@@ -1,4 +1,4 @@
-span.machine-status {
+.machineStatus {
   @apply flex items-center gap-1.5;
 
   .indicator {
@@ -13,7 +13,7 @@ span.machine-status {
     background-color: theme(colors.fg.semantic.error.1);
   }
 
-  &.out-of-sync > .indicator {
+  &.outOfSync > .indicator {
     background-color: theme(colors.fg.inv.3);
   }
 }

pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.tsx

@@ -1,5 +1,4 @@
-import "./MachineStatus.css";
-
+import styles from "./MachineStatus.module.css";
 import { Badge } from "@kobalte/core/badge";
 import cx from "classnames";
 import { Match, Show, Switch } from "solid-js";
@@ -14,8 +13,7 @@ export interface MachineStatusProps {
 }
 
 export const MachineStatus = (props: MachineStatusProps) => {
-  const status = () => props.status;
-
+  // FIXME: this will break i18n in the future
   // remove the '_' from the enum
   // we will use css transform in the typography component to capitalize
   const statusText = () => props.status?.replaceAll("_", " ");
@@ -25,15 +23,17 @@ export const MachineStatus = (props: MachineStatusProps) => {
 
   return (
     <Switch>
-      <Match when={!status()}>
+      <Match when={!props.status}>
         <Loader />
       </Match>
-      <Match when={status()}>
+      <Match when={props.status}>
         <Badge
-          class={cx("machine-status", {
-            "not-installed": status() == "not_installed",
+          class={cx(styles.machineStatus, {
+            [styles.online]: props.status == "online",
+            [styles.offline]: props.status == "offline",
+            [styles.outOfSync]: props.status == "out_of_sync",
           })}
-          textValue={status()}
+          textValue={props.status}
         >
           {props.label && (
             <Typography
@@ -47,10 +47,10 @@ export const MachineStatus = (props: MachineStatusProps) => {
             </Typography>
           )}
           <Show
-            when={status() != "not_installed"}
+            when={props.status != "not_installed"}
             fallback={<Icon icon="Offline" inverted={true} />}
           >
-            <div class="indicator" />
+            <div class={styles.indicator} />
           </Show>
         </Badge>
       </Match>

pkgs/clan-app/ui/src/components/Tag/Tag.module.css

@@ -1,4 +1,4 @@
-span.tag {
+.tag {
   @apply flex items-center gap-1 w-fit px-2 py-[0.1875rem] rounded-full;
   @apply bg-def-4;
 
@@ -17,11 +17,11 @@ span.tag {
     @apply bg-inv-1;
   }
 
-  &.has-action {
+  &.hasAction {
     @apply pr-1.5;
   }
 
-  &.is-interactive {
+  &.interactive {
     &:hover {
       @apply bg-def-acc-3;
     }
@@ -30,10 +30,7 @@ span.tag {
       @apply bg-inv-acc-3;
     }
   }
-
-  & > .icon {
-    &:hover {
+  .action {
     @apply cursor-pointer;
   }
-  }
 }

pkgs/clan-app/ui/src/components/Tag/Tag.tsx

@@ -1,8 +1,8 @@
-import "./Tag.css";
+import styles from "./Tag.module.css";
 
 import cx from "classnames";
 import { Typography } from "@/src/components/Typography/Typography";
-import { createSignal, JSX } from "solid-js";
+import { createSignal, JSX, mergeProps, Show } from "solid-js";
 
 interface IconActionProps {
   inverted: boolean;
@@ -14,11 +14,10 @@ export interface TagProps extends JSX.HTMLAttributes<HTMLSpanElement> {
   icon?: (state: IconActionProps) => JSX.Element;
   inverted?: boolean;
   interactive?: boolean;
-  class?: string;
 }
 
 export const Tag = (props: TagProps) => {
-  const inverted = () => props.inverted || false;
+  const local = mergeProps({ inverted: false }, props);
 
   const [isActive, setIsActive] = createSignal(false);
 
@@ -27,23 +26,27 @@ export const Tag = (props: TagProps) => {
     setTimeout(() => setIsActive(false), 150);
   };
 
+  const icon = () =>
+    props.icon?.({
+      inverted: local.inverted,
+      handleActionClick,
+    });
+
   return (
     <span
-      class={cx("tag", {
-        inverted: inverted(),
-        active: isActive(),
-        "has-icon": props.icon,
-        "is-interactive": props.interactive,
-        class: props.class,
+      class={cx(styles.tag, {
+        [styles.inverted]: local.inverted,
+        [styles.active]: isActive(),
+        [styles.hasAction]: icon(),
+        [styles.interactive]: props.interactive,
       })}
     >
-      <Typography hierarchy="label" size="xs" inverted={inverted()}>
+      <Typography hierarchy="label" size="xs" inverted={local.inverted}>
         {props.children}
       </Typography>
-      {props.icon?.({
-        inverted: inverted(),
-        handleActionClick,
-      })}
+      <Show when={icon()}>
+        <span class={styles.action}>{icon()}</span>
+      </Show>
     </span>
   );
 };

pkgs/clan-app/ui/src/components/TagGroup/TagGroup.module.css

@@ -1,3 +1,3 @@
-div.tag-group {
+.tagGroup {
   @apply flex flex-wrap gap-x-1.5 gap-y-2;
 }

pkgs/clan-app/ui/src/components/TagGroup/TagGroup.tsx

@@ -1,21 +1,20 @@
-import "./TagGroup.css";
+import styles from "./TagGroup.module.css";
 import cx from "classnames";
-import { For } from "solid-js";
+import { For, mergeProps } from "solid-js";
 import { Tag } from "@/src/components/Tag/Tag";
 
 export interface TagGroupProps {
-  class?: string;
   labels: string[];
   inverted?: boolean;
 }
 
 export const TagGroup = (props: TagGroupProps) => {
-  const inverted = () => props.inverted || false;
+  const local = mergeProps({ inverted: false } as const, props);
 
   return (
-    <div class={cx("tag-group", props.class, { inverted: inverted() })}>
+    <div class={cx(styles.tagGroup, { inverted: local.inverted })}>
       <For each={props.labels}>
-        {(label) => <Tag inverted={inverted()}>{label}</Tag>}
+        {(label) => <Tag inverted={local.inverted}>{label}</Tag>}
       </For>
     </div>
   );

pkgs/clan-app/ui/src/components/colors.ts

@@ -14,32 +14,3 @@ export const AllColors: Color[] = [
   "error",
   "inherit",
 ];
-
-const colorMap: Record<Color, string> = {
-  primary: "fg-def-1",
-  secondary: "fg-def-2",
-  tertiary: "fg-def-3",
-  quaternary: "fg-def-4",
-  error: "fg-semantic-error-4",
-  inherit: "text-inherit",
-};
-
-const invertedColorMap: Record<Color, string> = {
-  primary: "fg-inv-1",
-  secondary: "fg-inv-2",
-  tertiary: "fg-inv-3",
-  quaternary: "fg-inv-4",
-  error: "fg-semantic-error-1",
-  inherit: "text-inherit",
-};
-
-export const fgClass = (
-  color: Color | "inherit" = "primary",
-  inverted = false,
-) => {
-  if (color === "inherit") {
-    return "text-inherit";
-  }
-
-  return inverted ? invertedColorMap[color] : colorMap[color];
-};