radix composing styles

packages/website/src/components/DropdownMenu/index.tsx

@@ -1,75 +1,5 @@
-import {
+import { DropdownMenu as _ } from "radix-ui";
-  Menubar,
+import { composeRadixComponents } from "../../ui/compose";
-  MenubarCheckboxItem,
+import styles from "./index.module.css";
-  MenubarContent,
-  MenubarLabel,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-  type MenubarCheckboxItemProps,
-  type MenubarContentProps,
-  type MenubarLabelProps,
-  type MenubarProps,
-  type MenubarRadioGroupProps,
-  type MenubarRadioItemProps,
-  type MenubarSubContentProps,
-  type MenubarSubProps,
-  type MenubarSubTriggerProps,
-  type MenubarTriggerProps,
-} from "radix-ui/menubar";
 
-function Root(props: MenubarProps) {
+export const DropdownMenu = composeRadixComponents(_, styles);
-  return <Menubar {...props} />;
-}
-
-function Trigger(props: MenubarTriggerProps) {
-  return <MenubarTrigger {...props} />;
-}
-
-function Content(props: MenubarContentProps) {
-  return <MenubarContent {...props} />;
-}
-
-function Sub(props: MenubarSubProps) {
-  return <MenubarSub {...props} />;
-}
-
-function SubTrigger(props: MenubarSubTriggerProps) {
-  return <MenubarSubTrigger {...props} />;
-}
-
-function SubContent(props: MenubarSubContentProps) {
-  return <MenubarSubContent {...props} />;
-}
-
-function Label(props: MenubarLabelProps) {
-  return <MenubarLabel {...props} />;
-}
-
-function CheckboxItem(props: MenubarCheckboxItemProps) {
-  return <MenubarCheckboxItem {...props} />;
-}
-
-function RadioGroup(props: MenubarRadioGroupProps) {
-  return <MenubarRadioGroup {...props} />;
-}
-
-function RadioItem(props: MenubarRadioItemProps) {
-  return <MenubarRadioItem {...props} />;
-}
-
-export const DropdownMenu = {
-  Root,
-  Trigger,
-  Content,
-  Sub,
-  SubTrigger,
-  SubContent,
-  Label,
-  CheckboxItem,
-  RadioGroup,
-  RadioItem,
-};

packages/website/src/ui/compose.tsx

@@ -0,0 +1,35 @@
+import type { FC } from "react";
+import { classNames } from "./classNames";
+
+function composeRadixComponent<Props>(
+  Component: FC<Props>,
+  style: CSSModuleClasses[string],
+) {
+  return function (props: Props & { className?: string }) {
+    return (
+      <Component {...props} className={classNames(style, props.className)} />
+    );
+  };
+}
+
+export function composeRadixComponents<
+  Components extends Record<string, unknown>,
+>(components: Components, styles: CSSModuleClasses) {
+  const mapped: Partial<Components> = {};
+
+  for (const key in components) {
+    const isMethod = key[0].toLowerCase() === key[0];
+
+    if (isMethod) {
+      mapped[key] = components[key];
+      continue;
+    }
+
+    mapped[key] = composeRadixComponent(
+      components[key] as FC,
+      styles[key],
+    ) as Components[Extract<keyof Components, string>];
+  }
+
+  return mapped as Components;
+}