refactor(SSR): get rid of deepHas

... because deepHas has issues with SSR
mittwald · Jan 23, 2025 · 0a8e879 · 0a8e879
1 parent d9770bf
commit 0a8e879
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 72 deletions.
diff --git a/packages/components/src/components/Avatar/Avatar.module.scss b/packages/components/src/components/Avatar/Avatar.module.scss
@@ -47,12 +47,11 @@
 
   /* Variants */
   @mixin color($color) {
+    &.dynamic-#{$color}:has(.initials),
     &.#{$color} {
       --background-color: var(--decorative--#{$color}-background-color);
       --content-color: var(--decorative--#{$color}-content-color);
-      --content-accent-color: var(
-                      --decorative--#{$color}-content-accent-color
-      );
+      --content-accent-color: var(--decorative--#{$color}-content-accent-color);
     }
   }
 

diff --git a/packages/components/src/components/Avatar/Avatar.tsx b/packages/components/src/components/Avatar/Avatar.tsx
@@ -8,8 +8,6 @@ import { getColorFromChildren } from "@/components/Avatar/lib/getColorFromChildr
 import type { PropsWithClassName } from "@/lib/types/props";
 import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent";
 import { flowComponent } from "@/lib/componentFactory/flowComponent";
-import { deepHas } from "@/lib/react/deepHas";
-import { Initials } from "@/components/Initials";
 
 export const avatarColors = [
   "blue",
@@ -33,13 +31,12 @@ export interface AvatarProps
 export const Avatar = flowComponent("Avatar", (props) => {
   const { children, className, color, size = "m", refProp: ref } = props;
 
-  const hasInitials = deepHas(children, Initials);
-
   const rootClassName = clsx(
     styles.avatar,
     styles[`size-${size}`],
     className,
-    styles[color ?? (hasInitials ? getColorFromChildren(children) : "blue")],
+    styles[color ?? "blue"],
+    !color && styles[`dynamic-${getColorFromChildren(children)}`],
   );
 
   const propsContext: PropsContext = {

diff --git a/packages/components/src/components/CheckboxGroup/CheckboxGroup.module.scss b/packages/components/src/components/CheckboxGroup/CheckboxGroup.module.scss
@@ -7,4 +7,8 @@
   :global(.flow--checkbox-button) {
     width: auto;
   }
+
+  &:empty {
+    display: none;
+  }
 }
diff --git a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -6,14 +6,12 @@ import clsx from "clsx";
 import type { PropsContext } from "@/lib/propsContext";
 import { PropsContextProvider } from "@/lib/propsContext";
 import { FieldError } from "@/components/FieldError";
-import { CheckboxButton } from "@/components/CheckboxButton";
 import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel";
 import formFieldStyles from "../FormField/FormField.module.scss";
 import type { ColumnLayoutProps } from "@/components/ColumnLayout";
 import { ColumnLayout } from "@/components/ColumnLayout";
 import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent";
 import { flowComponent } from "@/lib/componentFactory/flowComponent";
-import { deepHas } from "@/lib/react/deepHas";
 
 export interface CheckboxGroupProps
   extends PropsWithChildren<Omit<Aria.CheckboxGroupProps, "children">>,
@@ -41,29 +39,23 @@ export const CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
       tunnelId: "checkboxes",
     },
     CheckboxButton: {
-      tunnelId: "checkboxes",
+      tunnelId: "checkboxButtons",
     },
   };
 
-  const hasCheckboxButtons = deepHas(children, CheckboxButton);
-
   return (
     <Aria.CheckboxGroup {...rest} className={rootClassName} ref={ref}>
       <PropsContextProvider props={propsContext}>
         <TunnelProvider>
           {children}
 
-          {hasCheckboxButtons && (
-            <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>
-              <TunnelExit id="checkboxes" />
-            </ColumnLayout>
-          )}
+          <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>
+            <TunnelExit id="checkboxButtons" />
+          </ColumnLayout>
 
-          {!hasCheckboxButtons && (
-            <div className={styles.checkboxGroup}>
-              <TunnelExit id="checkboxes" />
-            </div>
-          )}
+          <div className={styles.checkboxGroup}>
+            <TunnelExit id="checkboxes" />
+          </div>
 
           <TunnelExit id="fieldDescription" />
           <TunnelExit id="fieldError" />

diff --git a/packages/components/src/components/ColumnLayout/ColumnLayout.module.scss b/packages/components/src/components/ColumnLayout/ColumnLayout.module.scss
@@ -1,5 +1,9 @@
 .columnLayoutContainer {
   container-type: inline-size;
+
+  &:has(.columnLayout:empty) {
+    display: none;
+  }
 }
 
 .columnLayout {

diff --git a/packages/components/src/components/MenuItem/MenuItemContent.tsx b/packages/components/src/components/MenuItem/MenuItemContent.tsx
@@ -10,11 +10,7 @@ import {
   IconRadioOff,
   IconRadioOn,
 } from "@/components/Icon/components/icons";
-import { Text } from "@/components/Text";
-import { deepHas } from "@/lib/react/deepHas";
-import { Wrap } from "@/components/Wrap";
 import clsx from "clsx";
-import { Avatar } from "@/components/Avatar";
 import { Switch } from "@/components/Switch";
 
 interface Props extends Aria.MenuItemRenderProps, PropsWithChildren {
@@ -67,18 +63,13 @@ export const MenuItemContent: FC<Props> = (props) => {
       <IconCheckboxEmpty />
     );
 
-  const hasText = deepHas(children, Text);
-  const hasAvatar = deepHas(children, Avatar);
-
   return (
     <>
       <PropsContextProvider props={controlIconPropsContext}>
         {selectionIcon}
       </PropsContextProvider>
       <PropsContextProvider props={propsContext}>
-        <Wrap if={!hasText && !hasAvatar}>
-          <Text>{children}</Text>
-        </Wrap>
+        {children}
       </PropsContextProvider>
     </>
   );

diff --git a/packages/components/src/components/Navigation/Navigation.tsx b/packages/components/src/components/Navigation/Navigation.tsx
@@ -2,12 +2,10 @@ import type { ComponentProps, FC, PropsWithChildren } from "react";
 import React from "react";
 import styles from "./Navigation.module.scss";
 import clsx from "clsx";
-import { NavigationGroup } from "@/components/Navigation";
-import { Wrap } from "@/components/Wrap";
 import type { PropsContext } from "@/lib/propsContext";
 import { PropsContextProvider } from "@/lib/propsContext";
 import type { PropsWithClassName } from "@/lib/types/props";
-import { deepHas } from "@/lib/react/deepHas";
+import { TunnelExit } from "@mittwald/react-tunnel";
 
 export interface NavigationProps
   extends PropsWithChildren<ComponentProps<"nav">>,
@@ -18,8 +16,6 @@ export const Navigation: FC<NavigationProps> = (props) => {
 
   const rootClassName = clsx(styles.navigation, className);
 
-  const hasGroups = deepHas(children, NavigationGroup);
-
   const propsContext: PropsContext = {
     Link: {
       wrapWith: <li />,
@@ -31,15 +27,17 @@ export const Navigation: FC<NavigationProps> = (props) => {
       Icon: {
         className: styles.icon,
       },
+      tunnelId: "links",
     },
   };
 
   return (
     <nav className={rootClassName} role="navigation" {...rest}>
       <PropsContextProvider props={propsContext} mergeInParentContext>
-        <Wrap if={!hasGroups}>
-          <ul>{children}</ul>
-        </Wrap>
+        <ul>
+          <TunnelExit id="links" />
+        </ul>
+        {children}
       </PropsContextProvider>
     </nav>
   );

diff --git a/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx b/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx
@@ -31,7 +31,7 @@ export const NavigationGroup: FC<NavigationGroupProps> = (props) => {
       "aria-hidden": true,
     },
     Link: {
-      tunnelId: "links",
+      tunnelId: "groupLinks",
     },
   };
 
@@ -43,7 +43,7 @@ export const NavigationGroup: FC<NavigationGroupProps> = (props) => {
             {children}
             <Content clearPropsContext={false}>
               <ul>
-                <TunnelExit id="links" />
+                <TunnelExit id="groupLinks" />
               </ul>
             </Content>
           </Accordion>
@@ -64,7 +64,7 @@ export const NavigationGroup: FC<NavigationGroupProps> = (props) => {
             {children}
             <TunnelExit id="Label" />
             <ul>
-              <TunnelExit id="links" />
+              <TunnelExit id="groupLinks" />
             </ul>
           </PropsContextProvider>
         </section>

diff --git a/packages/components/src/components/RadioGroup/RadioGroup.module.scss b/packages/components/src/components/RadioGroup/RadioGroup.module.scss
@@ -3,4 +3,8 @@
   display: flex;
   flex-direction: column;
   row-gap: var(--form-control--spacing-y);
+
+  &:empty {
+    display: none;
+  }
 }
diff --git a/packages/components/src/components/RadioGroup/RadioGroup.tsx b/packages/components/src/components/RadioGroup/RadioGroup.tsx
@@ -10,10 +10,8 @@ import type { ColumnLayoutProps } from "@/components/ColumnLayout";
 import { ColumnLayout } from "@/components/ColumnLayout";
 import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel";
 import formFieldStyles from "../FormField/FormField.module.scss";
-import RadioButton from "./components/RadioButton";
 import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent";
 import { flowComponent } from "@/lib/componentFactory/flowComponent";
-import { deepHas } from "@/lib/react/deepHas";
 
 export interface RadioGroupProps
   extends PropsWithChildren<Omit<Aria.RadioGroupProps, "children">>,
@@ -42,15 +40,13 @@ export const RadioGroup = flowComponent("RadioGroup", (props) => {
       tunnelId: "fieldError",
     },
     RadioButton: {
-      tunnelId: "radios",
+      tunnelId: "radioButtons",
     },
     Radio: {
       tunnelId: "radios",
     },
   };
 
-  const hasRadioButtons = deepHas(children, RadioButton);
-
   return (
     <Aria.RadioGroup {...rest} className={rootClassName} ref={ref}>
       <TunnelProvider>
@@ -61,17 +57,13 @@ export const RadioGroup = flowComponent("RadioGroup", (props) => {
         >
           {children}
 
-          {hasRadioButtons && (
-            <ColumnLayout s={s} m={m} l={l} className={styles.radioGroup}>
-              <TunnelExit id="radios" />
-            </ColumnLayout>
-          )}
+          <ColumnLayout s={s} m={m} l={l} className={styles.radioGroup}>
+            <TunnelExit id="radioButtons" />
+          </ColumnLayout>
 
-          {!hasRadioButtons && (
-            <div className={styles.radioGroup}>
-              <TunnelExit id="radios" />
-            </div>
-          )}
+          <div className={styles.radioGroup}>
+            <TunnelExit id="radios" />
+          </div>
 
           <TunnelExit id="fieldDescription" />
           <TunnelExit id="fieldError" />

diff --git a/packages/components/src/styles/mixins/menuItem.scss b/packages/components/src/styles/mixins/menuItem.scss
@@ -26,20 +26,8 @@
 
   /* Elements */
   .icon {
-    order: 0;
     color: var(--menu-item--icon-color--default);
-  }
-
-  .text {
-    order: 1;
-  }
-
-  .icon + .text {
-    margin-inline-start: var(--menu-item--spacing);
-  }
-
-  .switch {
-    order: 2;
+    margin-inline-end: var(--menu-item--spacing);
   }
 
   &:hover {