Expose modifier props checking

Author: OEvgeny

packages/component/src/Attachment/Text/private/ActivityButton.tsx

@@ -16,15 +16,15 @@ import {
 } from 'valibot';
 
 import useStyleSet from '../../../hooks/useStyleSet';
-import { ComponentIcon, type IconType } from '../../../Icon';
+import { ComponentIcon, componentIconPropsSchema } from '../../../Icon';
 
 const activityButtonPropsSchema = pipe(
   object({
     children: optional(reactNode()),
     className: optional(string()),
     'data-testid': optional(string()),
     disabled: optional(boolean()),
-    icon: optional(custom<IconType>(value => typeof value === 'string')),
+    icon: componentIconPropsSchema.entries.icon,
     onClick: optional(custom<() => void>(value => safeParse(function_(), value).success)),
     text: optional(string())
   }),

packages/component/src/Icon/ComponentIcon.tsx

@@ -1,35 +1,29 @@
 import { validateProps } from 'botframework-webchat-react-valibot';
 import { useStyles } from 'botframework-webchat-styles/react';
 import cx from 'classnames';
-import React, { memo, type ComponentProps } from 'react';
+import React, { memo } from 'react';
 import { literal, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import createIconComponent from '../Utils/createIconComponent';
 import styles from './ComponentIcon.module.css';
 
-const componentIconPropsSchema = pipe(
+const baseComponentIconPropsSchema = pipe(
   object({
     'aria-hidden': optional(literal('true')),
     'aria-label': optional(string()),
-    appearance: optional(string()),
     className: optional(string()),
-    direction: optional(string()),
-    icon: optional(string()),
-    role: optional(string()),
-    size: optional(string())
+    role: optional(string())
   }),
   readonly()
 );
 
-type ComponentIconProps = InferInput<typeof componentIconPropsSchema>;
-
-function BaseComponentIcon(props: ComponentIconProps) {
+function BaseComponentIcon(props: InferInput<typeof baseComponentIconPropsSchema>) {
   const {
     className,
     'aria-hidden': ariaHidden,
     'aria-label': ariaLabel,
     role
-  } = validateProps(componentIconPropsSchema, props);
+  } = validateProps(baseComponentIconPropsSchema, props);
 
   const classNames = useStyles(styles);
 
@@ -43,11 +37,23 @@ function BaseComponentIcon(props: ComponentIconProps) {
   );
 }
 
-const ComponentIcon = createIconComponent(styles, BaseComponentIcon);
-
-type IconType = ComponentProps<typeof ComponentIcon>['icon'];
+const { component: ComponentIcon, modifierPropsSchema: componentIconModifiersPropsSchema } = createIconComponent(
+  styles,
+  ['appearance', 'direction', 'icon'],
+  BaseComponentIcon
+);
 
 ComponentIcon.displayName = 'ComponentIcon';
 
+const componentIconPropsSchema = pipe(
+  object({
+    ...baseComponentIconPropsSchema.entries,
+    ...componentIconModifiersPropsSchema.entries
+  }),
+  readonly()
+);
+
+type ComponentIconProps = InferInput<typeof componentIconPropsSchema>;
+
 export default memo(ComponentIcon);
-export { componentIconPropsSchema, type ComponentIconProps, type IconType };
+export { componentIconPropsSchema, type ComponentIconProps };

packages/component/src/Icon/index.ts

@@ -1 +1 @@
-export { default as ComponentIcon, type IconType } from './ComponentIcon';
+export { default as ComponentIcon, componentIconPropsSchema } from './ComponentIcon';

packages/component/src/Utils/createIconComponent.tsx

@@ -1,48 +1,70 @@
 import { useStyles } from 'botframework-webchat-styles/react';
 import { validateProps } from 'botframework-webchat-react-valibot';
 import cx from 'classnames';
-import { object, optional, pipe, readonly, picklist } from 'valibot';
+import { object, optional, picklist, pipe, readonly, type OptionalSchema, type PicklistSchema } from 'valibot';
 import React, { type ComponentType } from 'react';
 
 type Prefixes<T> = T extends `${infer P}--${string}` ? P : never;
 
 type SuffixesOf<Prefix extends string, T> = T extends `${Prefix}--${infer S}` ? S : never;
 
-type VariantMap<T> = {
+type ModifierMap<T> = {
   [P in Prefixes<keyof T>]?: SuffixesOf<P, keyof T>;
 };
 
-function createPropsSchema(styles: CSSModuleClasses) {
+function createPropsSchema<
+  const TCSSModfuleClasses extends CSSModuleClasses,
+  const TModifiers extends Array<keyof ModifierMap<TCSSModfuleClasses>>
+>(styles: TCSSModfuleClasses, modifiers: TModifiers) {
+  type CSSModuleModifiers = ModifierMap<TCSSModfuleClasses>;
+
   const props = Object.keys(styles).reduce((acc, key) => {
-    const [base, modifier] = key.split('--');
-    if (modifier) {
+    const [base, modifier] = key.split('--') as [keyof CSSModuleModifiers, string | undefined];
+    if (modifier && modifiers.includes(base)) {
       acc.has(base) || acc.set(base, new Set());
       acc.get(base).add(modifier);
     }
     return acc;
-  }, new Map<string, Set<string>>());
+  }, new Map<keyof CSSModuleModifiers, Set<string>>());
+
   return pipe(
     object(
       Object.fromEntries(
         Array.from(props.entries()).map(([base, modifiers]) => [base, optional(picklist(Array.from(modifiers)))])
-      )
+      ) as unknown as {
+        [key in TModifiers[number]]: OptionalSchema<
+          PicklistSchema<Array<CSSModuleModifiers[key]>, undefined>,
+          undefined
+        >;
+      }
     ),
     readonly()
   );
 }
 
-export default function createIconComponent<T extends { className?: string | undefined }, K extends CSSModuleClasses>(
-  styles: K,
-  BaseIcon: ComponentType<T>
-) {
-  const propsSchema = createPropsSchema(styles);
-  return (props => {
+export default function createIconComponent<
+  const TProps extends { className?: string | undefined },
+  const TModifiers extends Array<keyof ModifierMap<TCSSModfuleClasses>>,
+  const TCSSModfuleClasses extends CSSModuleClasses
+>(styles: TCSSModfuleClasses, modifiers: TModifiers, BaseIcon: ComponentType<TProps>) {
+  type CSSModuleModifiers = ModifierMap<TCSSModfuleClasses>;
+
+  // Do not bail if no CSS modules TypeScript plugin is provided.
+  type FinalCSSModuleModifiers = keyof CSSModuleModifiers extends never
+    ? Record<keyof TModifiers[number], string>
+    : Pick<CSSModuleModifiers, TModifiers[number]>;
+
+  const modifierPropsSchema = createPropsSchema(styles, modifiers);
+
+  const component = (props => {
     const { className, ...rest } = props;
-    const validatedProps = validateProps(propsSchema, props);
+    const validatedProps = validateProps(modifierPropsSchema, props);
     const classNames = useStyles(styles);
 
     const classes = Object.entries(validatedProps).map(([key, value]) => classNames[`${key}--${value}`]);
 
-    return <BaseIcon className={cx(className, classes)} {...(rest as T)} />;
-  }) as ComponentType<VariantMap<K> & T>;
+    return <BaseIcon className={cx(className, classes)} {...(rest as TProps)} />;
+  }) as ComponentType<FinalCSSModuleModifiers & TProps>;
+
+  return { component, modifierPropsSchema };
 }

packages/fluent-theme/src/components/icon/FluentIcon.tsx

@@ -7,7 +7,7 @@ import { object, optional, pipe, readonly, string, type InferInput } from 'valib
 
 import styles from './FluentIcon.module.css';
 
-const FluentIconPropsSchema = pipe(
+const baseFluentIconPropsSchema = pipe(
   object({
     appearance: optional(string()),
     className: optional(string()),
@@ -18,10 +18,8 @@ const FluentIconPropsSchema = pipe(
   readonly()
 );
 
-type FluentIconProps = InferInput<typeof FluentIconPropsSchema>;
-
-function BaseFluentIcon(props: FluentIconProps) {
-  const { className } = validateProps(FluentIconPropsSchema, props);
+function BaseFluentIcon(props: InferInput<typeof baseFluentIconPropsSchema>) {
+  const { className } = validateProps(baseFluentIconPropsSchema, props);
 
   const classNames = useStyles(styles);
 
@@ -34,9 +32,23 @@ function BaseFluentIcon(props: FluentIconProps) {
   return <div className={cx(classNames['fluent-icon'], className)} style={maskStyle} />;
 }
 
-const FluentIcon = createIconComponent(styles, BaseFluentIcon);
+const { component: FluentIcon, modifierPropsSchema } = createIconComponent(
+  styles,
+  ['appearance', 'icon'],
+  BaseFluentIcon
+);
 
 FluentIcon.displayName = 'FluentIcon';
 
+const fluentIconPropsSchema = pipe(
+  object({
+    ...baseFluentIconPropsSchema.entries,
+    ...modifierPropsSchema.entries
+  }),
+  readonly()
+);
+
+type FluentIconProps = InferInput<typeof fluentIconPropsSchema>;
+
 export default memo(FluentIcon);
-export { FluentIconPropsSchema, type FluentIconProps };
+export { fluentIconPropsSchema, type FluentIconProps };