explore injecting classNames in a typesafe way

Author: mark-tate

packages/core/src/button/Button.tsx

@@ -1,4 +1,7 @@
-import { useComponentCssInjection } from "@salt-ds/styles";
+import {
+  useComponentCssInjection,
+  useInjectedClassName,
+} from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
 import {
@@ -110,11 +113,20 @@ function variantToAppearanceAndColor(
   }
 }
 
+declare module "@salt-ds/core" {
+  interface ComponentPropMap {
+    Button: ButtonProps;
+  }
+}
+
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  function Button(
-    {
+  function Button(props, ref?): ReactElement<ButtonProps> {
+    const { className, props: cleanProps } = useInjectedClassName(
+      "Button",
+      props,
+    );
+    const {
       children,
-      className,
       disabled,
       focusableWhenDisabled,
       onKeyUp,
@@ -128,9 +140,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       type: typeProp = "button",
       variant = "primary",
       ...restProps
-    },
-    ref?,
-  ): ReactElement<ButtonProps> {
+    } = cleanProps;
+
     const { active, buttonProps } = useButton({
       loading,
       disabled,

packages/core/src/form-field-context/FormFieldContext.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from "react";
+import type { ValidationStatus, ValidationStatuses } from "../status-indicator";
 import { createContext } from "../utils";
-import { type ValidationStatus, type ValidationStatuses } from "../status-indicator";
 export interface A11yValueProps {
   /**
    * id for FormFieldHelperText
@@ -19,7 +19,8 @@ export interface a11yValueAriaProps {
   "aria-describedby": A11yValueProps["helperTextId"] | undefined;
 }
 
-export interface FormFieldValidationStatuses extends Omit<ValidationStatuses, "info"> {};
+export interface FormFieldValidationStatuses
+  extends Omit<ValidationStatuses, "info"> {}
 export type FormFieldValidationStatus = Exclude<ValidationStatus, "info">;
 export const FormFieldValidationStatusValues: FormFieldValidationStatus[] = [
   "error",

packages/styles/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./style-injection-provider";
 export * from "./use-style-injection";
+export * from "./useClassNameInjection";

packages/styles/src/useClassNameInjection.tsx

@@ -0,0 +1,69 @@
+import { clsx } from "clsx";
+import { createContext, useContext, useMemo } from "react";
+
+export type ClassNameInjector<Props, Keys extends keyof Props> = (
+  props: Pick<Props, Keys>,
+) => string | undefined;
+
+interface ClassNameInjectorEntry<Props> {
+  fn: (props: Props) => string | undefined;
+  keys: (keyof Props)[];
+}
+
+export type ClassNameInjectionRegistry = Record<
+  string,
+  // biome-ignore lint/suspicious/noExplicitAny: refer to ClassNameInjector which derives it's entry type based on the Props
+  ClassNameInjectorEntry<any>[]
+>;
+
+const InjectionContext = createContext<ClassNameInjectionRegistry | null>(null);
+
+export type ClassNameInjectionProviderProps = {
+  children: React.ReactNode;
+  value?: ClassNameInjectionRegistry;
+};
+
+export function ClassNameInjectionProvider({
+  children,
+  value,
+}: ClassNameInjectionProviderProps) {
+  const registry = useMemo(() => value ?? {}, [value]);
+  return (
+    <InjectionContext.Provider value={registry}>
+      {children}
+    </InjectionContext.Provider>
+  );
+}
+
+export function useInjectedClassName<
+  // biome-ignore lint/suspicious/noExplicitAny: props are passed through to the callback as-is
+  Props extends Record<string, any>,
+>(component: string, props: Props): { className: string; props: Props } {
+  const registry = useContext(InjectionContext);
+  if (!registry) {
+    return { className: props?.className || "", props };
+  }
+  const entries = registry[component] ?? [];
+  const injected = entries.map((e) => e.fn(props)).filter(Boolean);
+  const className = clsx(props?.className, injected);
+
+  const cleanProps: Props = { ...props };
+
+  for (const entry of entries) {
+    for (const key of entry.keys) {
+      delete cleanProps[key as string];
+    }
+  }
+  return { className, props: cleanProps };
+}
+
+export function registerClassInjector<Props, Keys extends keyof Props>(
+  registry: ClassNameInjectionRegistry,
+  component: string,
+  keys: Keys[],
+  injector: ClassNameInjector<Props, Keys>,
+) {
+  registry[component] ??= [];
+  const wrapped = (props: Props) => injector(props as Props);
+  registry[component] = [...registry[component], { fn: wrapped, keys }];
+}