feat: Polymorphism, data attributes, remove custom props

asuc-octo · Sep 25, 2024 · dec66d9 · dec66d9
1 parent 97614b1
commit dec66d9
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 89 deletions.
diff --git a/apps/frontend/src/components/Button/Button.module.scss b/apps/frontend/src/components/Button/Button.module.scss
@@ -2,31 +2,39 @@
   height: 32px;
   border-radius: 4px;
   padding: 0 12px;
-  display: flex;
+  display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   font-size: 14px;
   font-weight: 500;
   line-height: 1;
   cursor: pointer;
-  transition: all 100ms ease-in-out;
   gap: 8px;
   user-select: none;
+  transition:
+    border-color 100ms ease-in-out,
+    background-color 100ms ease-in-out,
+    color 100ms ease-in-out;
 
-  &.solid {
+  &[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &[data-variant="solid"] {
     background-color: var(--blue-500);
     color: white;
 
     &:hover {
       background-color: var(--blue-600);
     }
-  
+
     &:active {
       background-color: var(--blue-700);
     }
   }
 
-  &.outline {
+  &[data-variant="outline"] {
     border: 1px solid var(--border-color);
     color: var(--paragraph-color);
 
@@ -39,4 +47,4 @@
       background-color: var(--button-active-color);
     }
   }
-}
+}
diff --git a/apps/frontend/src/components/Button/index.tsx b/apps/frontend/src/components/Button/index.tsx
@@ -11,6 +11,7 @@ import styles from "./Button.module.scss";
 
 interface Props {
   variant?: "solid" | "outline";
+  disabled?: boolean;
 }
 
 type ButtonProps<C extends ElementType> = PolymorphicComponentPropsWithRef<
@@ -24,6 +25,7 @@ const Button = forwardRef(
       active,
       children,
       className,
+      disabled,
       variant = "solid",
       ...props
     }: ButtonProps<C>,
@@ -32,14 +34,9 @@ const Button = forwardRef(
     return (
       <button
         ref={ref}
-        className={classNames(
-          styles.root,
-          {
-            [styles.solid]: variant === "solid",
-            [styles.outline]: variant === "outline",
-          },
-          className
-        )}
+        data-variant={variant}
+        data-disabled={disabled}
+        className={classNames(styles.root, className)}
         {...props}
       >
         {children}

diff --git a/apps/frontend/src/components/Footer/Footer.module.scss b/apps/frontend/src/components/Footer/Footer.module.scss
@@ -12,11 +12,17 @@
   &.invert {
     border-color: var(--neutral-700);
 
-    .group .description, .column .label {
+    .icon-button {
       color: var(--neutral-400);
     }
 
-    .column .link, .group .description .link {
+    .group .description,
+    .column .label {
+      color: var(--neutral-400);
+    }
+
+    .column .link,
+    .group .description .link {
       color: white;
 
       &:hover {
@@ -75,15 +81,20 @@
     .brand {
       font-size: 24px;
       font-weight: 580;
-      font-feature-settings: 'cv05' on, 'cv13' on, 'ss07' on, 'cv12' on, 'cv06' on;
+      font-feature-settings:
+        "cv05" on,
+        "cv13" on,
+        "ss07" on,
+        "cv12" on,
+        "cv06" on;
       color: var(--blue-500);
       cursor: pointer;
       transition: all 100ms ease-in-out;
       margin-right: auto;
-  
+
       &:hover {
         color: var(--blue-600);
       }
     }
   }
-}
+}
diff --git a/apps/frontend/src/components/Footer/index.tsx b/apps/frontend/src/components/Footer/index.tsx
@@ -46,33 +46,45 @@ export default function Footer({ invert }: FooterProps) {
           </p>
           <div className={styles.row}>
             <IconButton
-              invert={invert}
+              className={styles.iconButton}
               onClick={() =>
                 setTheme((theme) => (theme === "dark" ? "light" : "dark"))
               }
             >
               {theme === "dark" ? <SunLight /> : <HalfMoon />}
             </IconButton>
-            <a href="https://www.instagram.com/" target="_blank">
-              <IconButton invert={invert}>
-                <Instagram />
-              </IconButton>
-            </a>
-            <a href="https://discord.gg/uP2bTPh99U" target="_blank">
-              <IconButton invert={invert}>
-                <Discord />
-              </IconButton>
-            </a>
-            <a href="https://facebook.com/berkeleytime" target="_blank">
-              <IconButton invert={invert}>
-                <Facebook />
-              </IconButton>
-            </a>
-            <a href="https://github.com/asuc-octo/berkeleytime" target="_blank">
-              <IconButton invert={invert}>
-                <Github />
-              </IconButton>
-            </a>
+            <IconButton
+              className={styles.iconButton}
+              as="a"
+              href="https://www.instagram.com/"
+              target="_blank"
+            >
+              <Instagram />
+            </IconButton>
+            <IconButton
+              className={styles.iconButton}
+              as="a"
+              href="https://discord.gg/uP2bTPh99U"
+              target="_blank"
+            >
+              <Discord />
+            </IconButton>
+            <IconButton
+              className={styles.iconButton}
+              href="https://facebook.com/berkeleytime"
+              target="_blank"
+              as="a"
+            >
+              <Facebook />
+            </IconButton>
+            <IconButton
+              className={styles.iconButton}
+              href="https://github.com/asuc-octo/berkeleytime"
+              target="_blank"
+              as="a"
+            >
+              <Github />
+            </IconButton>
           </div>
         </div>
         <div className={styles.column}>

diff --git a/apps/frontend/src/components/IconButton/IconButton.module.scss b/apps/frontend/src/components/IconButton/IconButton.module.scss
@@ -3,24 +3,31 @@
   width: 32px;
   flex-shrink: 0;
   border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: inline-grid;
+  place-items: center;
   cursor: pointer;
-  transition: all 100ms ease-in-out;
   user-select: none;
+  transition:
+    border-color 100ms ease-in-out,
+    background-color 100ms ease-in-out,
+    color 100ms ease-in-out;
 
-  &.outline {
+  &[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &[data-variant="outline"] {
     border: 1px solid var(--border-color);
     color: var(--paragraph-color);
-  
+
     &:hover {
       background-color: var(--button-hover-color);
       color: var(--heading-color);
     }
-  
+
     &:active {
       background-color: var(--button-active-color);
     }
   }
-}
+}
diff --git a/apps/frontend/src/components/IconButton/index.tsx b/apps/frontend/src/components/IconButton/index.tsx
@@ -1,4 +1,4 @@
-import { ElementType, ReactElement, forwardRef } from "react";
+import { ElementType, ReactNode, forwardRef } from "react";
 
 import classNames from "classnames";
 
@@ -11,7 +11,7 @@ import styles from "./IconButton.module.scss";
 
 interface Props {
   variant?: "outline";
-  invert?: boolean;
+  disabled?: boolean;
 }
 
 type IconButtonProps<C extends ElementType> = PolymorphicComponentPropsWithRef<
@@ -24,7 +24,7 @@ const IconButton = forwardRef(
     {
       children,
       className,
-      invert,
+      disabled,
       as,
       variant = "outline",
       ...props
@@ -35,14 +35,9 @@ const IconButton = forwardRef(
 
     return (
       <Component
-        className={classNames(
-          styles.root,
-          {
-            [styles.invert]: invert,
-            [styles.outline]: variant === "outline",
-          },
-          className
-        )}
+        data-disabled={disabled}
+        data-variant={variant}
+        className={classNames(styles.root, className)}
         ref={ref}
         {...props}
       >
@@ -56,4 +51,4 @@ IconButton.displayName = "IconButton";
 
 export default IconButton as <T extends ElementType = "button">(
   props: IconButtonProps<T>
-) => ReactElement | null;
+) => ReactNode | null;
diff --git a/apps/frontend/src/components/MenuItem/index.tsx b/apps/frontend/src/components/MenuItem/index.tsx
@@ -1,34 +1,52 @@
-import { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import { ElementType, ReactNode, forwardRef } from "react";
 
 import classNames from "classnames";
 
+import {
+  PolymorphicComponentPropsWithRef,
+  PolymorphicRef,
+} from "@/lib/polymorphism";
+
 import styles from "./MenuItem.module.scss";
 
-interface MenuItemProps<T = ElementType> {
+interface Props {
   active?: boolean;
-  children: ReactNode;
-  className?: string;
-  as?: T;
+  disabled?: boolean;
 }
 
-export default function MenuItem({
-  active,
-  children,
-  className,
-  ...props
-}: MenuItemProps & ComponentPropsWithoutRef<"button">) {
-  return (
-    <button
-      {...props}
-      className={classNames(
-        styles.root,
-        {
-          active,
-        },
-        className
-      )}
-    >
-      {children}
-    </button>
-  );
-}
+type MenuItemProps<C extends ElementType> = PolymorphicComponentPropsWithRef<
+  C,
+  Props
+>;
+
+const MenuItem = forwardRef(
+  <C extends ElementType = "button">(
+    { active, children, className, disabled, as, ...props }: MenuItemProps<C>,
+    ref: PolymorphicRef<C>
+  ) => {
+    const Component = as || "button";
+
+    return (
+      <Component
+        ref={ref}
+        data-disabled={disabled}
+        className={classNames(
+          styles.root,
+          {
+            active,
+          },
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+MenuItem.displayName = "MenuItem";
+
+export default MenuItem as <T extends ElementType = "button">(
+  props: MenuItemProps<T>
+) => ReactNode | null;
diff --git a/apps/frontend/src/components/NavigationBar/NavigationBar.module.scss b/apps/frontend/src/components/NavigationBar/NavigationBar.module.scss
@@ -7,7 +7,12 @@
   .brand {
     font-size: 24px;
     font-weight: 580;
-    font-feature-settings: 'cv05' on, 'cv13' on, 'ss07' on, 'cv12' on, 'cv06' on;
+    font-feature-settings:
+      "cv05" on,
+      "cv13" on,
+      "ss07" on,
+      "cv12" on,
+      "cv06" on;
     color: var(--blue-500);
     cursor: pointer;
     transition: all 100ms ease-in-out;
@@ -33,6 +38,10 @@
   &.invert {
     padding: 12px 12px 0;
 
+    .icon-button {
+      color: var(--paragraph-color);
+    }
+
     .brand {
       color: white;
 
@@ -71,4 +80,4 @@
       }
     }
   }
-}
+}