feat: add compose

Author: layershifter

build/gulp/tasks/docs.ts

@@ -60,6 +60,17 @@ const componentsSrc = [
   `${paths.posix.packageSrc('react')}/components/*/[A-Z]*.tsx`,
   `${paths.posix.packageSrc('react-bindings')}/FocusZone/[A-Z]!(*.types).tsx`,
   `${paths.posix.packageSrc('react-component-ref')}/[A-Z]*.tsx`,
+  '!**/ButtonIcon.tsx',
+  '!**/StatusIcon.tsx',
+  '!**/ButtonContent.tsx',
+  '!**/ButtonContent.tsx',
+  '!**/AvatarLabel.tsx',
+  '!**/AvatarImage.tsx',
+  '!**/AvatarStatus.tsx',
+  '!**/SliderInput.tsx',
+  '!**/CheckboxLabel.tsx',
+  '!**/CheckboxIcon.tsx',
+  '!**/CheckboxToggleIcon.tsx',
 ]
 const behaviorSrc = [`${paths.posix.packageSrc('accessibility')}/behaviors/*/[a-z]*Behavior.ts`]
 const examplesIndexSrc = `${paths.posix.docsSrc()}/examples/*/*/*/index.tsx`

docs/src/components/ComponentPlayground/componentGenerators.ts

@@ -2,11 +2,14 @@ import { useSelectKnob, useStringKnob } from '@fluentui/docs-components'
 import {
   AvatarProps,
   BoxProps,
+  ButtonProps,
   DialogProps,
   DividerProps,
   EmbedProps,
   IconProps,
   ImageProps,
+  SliderProps,
+  StatusProps,
   VideoProps,
 } from '@fluentui/react'
 import * as _ from 'lodash'
@@ -21,13 +24,22 @@ export const Avatar: KnobComponentGenerators<AvatarProps> = {
     name: propName,
     initialValue: _.capitalize(`${faker.name.firstName()} ${faker.name.lastName()}`),
   }),
+  // TODO: fix support for composed components
+  image: () => null,
+  label: () => null,
+  status: () => null,
 }
 
 export const Box: KnobComponentGenerators<BoxProps> = {
   // TODO: fix support for boxes
   children: () => null,
 }
 
+export const Button: KnobComponentGenerators<ButtonProps> = {
+  // TODO: fix support for composed components
+  icon: () => null,
+}
+
 export const Dialog: KnobComponentGenerators<DialogProps> = {
   footer: () => null,
 }
@@ -79,6 +91,16 @@ export const Image: KnobComponentGenerators<ImageProps> = {
   }),
 }
 
+export const Slider: KnobComponentGenerators<SliderProps> = {
+  // TODO: fix support for composed components
+  input: () => null,
+}
+
+export const Status: KnobComponentGenerators<StatusProps> = {
+  // TODO: fix support for composed components
+  icon: () => null,
+}
+
 export const Video: KnobComponentGenerators<VideoProps> = {
   poster: ({ componentInfo, propName }) => ({
     hook: useStringKnob,

docs/src/components/ComponentPlayground/propGenerators.tsx

@@ -25,9 +25,10 @@ export const color: KnobGenerator<string> = ({ propName, propDef, componentInfo,
 
 export const size: KnobGenerator<string> = ({ propName, propDef, componentInfo }) => {
   if (propDef.types.length > 1 || propDef.types[0].name !== 'SizeValue') {
-    throw new Error(
-      `A "${componentInfo.displayName}" for "size" prop defines type different than "SizeValue" it is not supported`,
-    )
+    return null
+    // throw new Error(
+    //   `A "${componentInfo.displayName}" for "size" prop defines type different than "SizeValue" it is not supported`,
+    // )
   }
 
   return {

docs/src/examples/components/Slider/Types/SliderExample.shorthand.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react'
 import { Slider } from '@fluentui/react'
 
-const SliderExampleShorthand = () => <Slider />
+const SliderExampleShorthand = () => (
+  <>
+    <Slider />
+    <Slider />
+  </>
+)
 
 export default SliderExampleShorthand

packages/accessibility/src/behaviors/Checkbox/checkboxBehavior.ts

@@ -31,9 +31,9 @@ const checkboxBehavior: Accessibility<CheckboxBehaviorProps> = props => ({
 
 export default checkboxBehavior
 
-type CheckboxBehaviorProps = {
+export type CheckboxBehaviorProps = {
   /** Whether or not item is checked. */
-  checked: boolean
+  checked?: boolean
   /** If the checkbox is in disabled state. */
   disabled?: boolean
 }

packages/accessibility/src/behaviors/Icon/iconBehavior.ts

@@ -20,8 +20,7 @@ const iconBehavior: Accessibility<IconBehaviorProps> = props => ({
 
 export default iconBehavior
 
-type IconBehaviorProps = {
+export type IconBehaviorProps = {
   /** Alternative text. */
   alt?: string
-  'aria-label'?: string
 } & Pick<AccessibilityAttributes, 'aria-label'>

packages/accessibility/src/behaviors/Slider/sliderBehavior.ts

@@ -26,8 +26,9 @@ const sliderBehavior: Accessibility<SliderBehaviorProps> = props => ({
 
 export default sliderBehavior
 
-type SliderBehaviorProps = {
+export type SliderBehaviorProps = {
   disabled?: boolean
+  // TODO: fix these SupportedIntrinsicInputProps['min']
   min?: number
   max?: number
   value?: number

packages/accessibility/src/behaviors/index.ts

@@ -20,6 +20,7 @@ export { default as selectableListItemBehavior } from './List/selectableListItem
 export { default as loaderBehavior } from './Loader/loaderBehavior'
 export { default as inputBehavior } from './Input/inputBehavior'
 export { default as iconBehavior } from './Icon/iconBehavior'
+export * from './Icon/iconBehavior'
 export { default as tabBehavior } from './Tab/tabBehavior'
 export { default as tabListBehavior } from './Tab/tabListBehavior'
 export { default as menuAsToolbarBehavior } from './Toolbar/menuAsToolbarBehavior'
@@ -51,9 +52,11 @@ export { default as accordionBehavior } from './Accordion/accordionBehavior'
 export { default as accordionTitleBehavior } from './Accordion/accordionTitleBehavior'
 export { default as accordionContentBehavior } from './Accordion/accordionContentBehavior'
 export { default as checkboxBehavior } from './Checkbox/checkboxBehavior'
+export * from './Checkbox/checkboxBehavior'
 export { default as tooltipAsDescriptionBehavior } from './Tooltip/tooltipAsDescriptionBehavior'
 export { default as tooltipAsLabelBehavior } from './Tooltip/tooltipAsLabelBehavior'
 export { default as sliderBehavior } from './Slider/sliderBehavior'
+export * from './Slider/sliderBehavior'
 export { default as menuButtonBehavior } from './MenuButton/menuButtonBehavior'
 export { default as splitButtonBehavior } from './SplitButton/splitButtonBehavior'
 export { default as treeBehavior } from './Tree/treeBehavior'

packages/react-bindings/src/compose.ts

@@ -0,0 +1,53 @@
+import * as React from 'react'
+
+type ComposeOptions = {
+  // TODO: better typings PLZ
+  className?: string
+  displayName: string
+  mapPropsToBehavior?: Function
+  mapPropsToStyles?: Function
+  handledProps?: string[]
+  overrideStyles?: boolean
+}
+
+const COMPOSE_CONFIG_PROP_NAME = '__unstable_config'
+
+export type ComposableProps = { [COMPOSE_CONFIG_PROP_NAME]?: ComposeOptions }
+
+export const compose = <UserProps, CProps = {}>(
+  Component: React.ComponentType<CProps>,
+  options: ComposeOptions,
+): React.ComponentType<CProps & UserProps> => {
+  const ComposedComponent = Component.bind(null)
+
+  ComposedComponent.displayName = options.displayName
+
+  // We are passing config via props by setting default prop value
+  ComposedComponent.defaultProps = { ...(Component.defaultProps || {}) }
+  // @ts-ignore TODO PLS FIX ME
+  ComposedComponent.defaultProps[COMPOSE_CONFIG_PROP_NAME] = options
+
+  return ComposedComponent as any
+}
+
+export const useComposedConfig = <P extends ComposableProps>(props: P) => {
+  const { [COMPOSE_CONFIG_PROP_NAME]: options } = props
+
+  const {
+    className = '',
+    displayName,
+    handledProps = [],
+    mapPropsToBehavior = () => ({}),
+    mapPropsToStyles = () => ({}),
+    overrideStyles = false,
+  } = options || {}
+
+  return {
+    behaviorProps: mapPropsToBehavior(props),
+    styleProps: mapPropsToStyles(props),
+    className,
+    displayName,
+    handledProps: handledProps.concat(['__unstable_config']),
+    overrideStyles,
+  }
+}

packages/react-bindings/src/hooks/useStyles.ts

@@ -1,6 +1,6 @@
 import {
   ComponentSlotStyle,
-  ComponentSlotStylesPrepared,
+  ComponentSlotStylesResolved,
   ComponentVariablesInput,
   DebugData,
   emptyTheme,
@@ -10,6 +10,7 @@ import * as React from 'react'
 import { ThemeContext } from 'react-fela'
 
 import {
+  ComponentAnimationProp,
   ComponentDesignProp,
   ComponentSlotClasses,
   RendererRenderRule,
@@ -23,14 +24,19 @@ type UseStylesOptions<StyleProps extends PrimitiveProps> = {
   mapPropsToStyles?: () => StyleProps
   mapPropsToInlineStyles?: () => InlineStyleProps<StyleProps>
   rtl?: boolean
+
+  __experimental_composeName?: string
+  __experimental_overrideStyles?: boolean
 }
 
 type UseStylesResult = {
   classes: ComponentSlotClasses
-  styles: ComponentSlotStylesPrepared
+  styles: ComponentSlotStylesResolved
 }
 
 type InlineStyleProps<StyleProps> = {
+  unstable_animation?: ComponentAnimationProp
+
   /** Additional CSS class name(s) to apply.  */
   className?: string
 
@@ -62,17 +68,22 @@ const useStyles = <StyleProps extends PrimitiveProps>(
     mapPropsToStyles = () => ({} as StyleProps),
     mapPropsToInlineStyles = () => ({} as InlineStyleProps<StyleProps>),
     rtl = false,
+    __experimental_composeName,
+    __experimental_overrideStyles,
   } = options
 
   // Stores debug information for component.
   const debug = React.useRef<{ fluentUIDebug: DebugData | null }>({ fluentUIDebug: null })
+  const inlineProps = mapPropsToInlineStyles()
+
   const { classes, styles: resolvedStyles } = getStyles({
     // Input values
     className,
     displayName,
     props: {
       ...mapPropsToStyles(),
-      ...mapPropsToInlineStyles(),
+      ...inlineProps,
+      animation: inlineProps.unstable_animation,
     },
 
     // Context values
@@ -82,6 +93,10 @@ const useStyles = <StyleProps extends PrimitiveProps>(
     saveDebug: fluentUIDebug => (debug.current = { fluentUIDebug }),
     theme: context.theme,
     _internal_resolvedComponentVariables: context._internal_resolvedComponentVariables,
+
+    __experimental_cache: true,
+    __experimental_composeName,
+    __experimental_overrideStyles,
   })
 
   return { classes, styles: resolvedStyles }

packages/react-bindings/src/index.ts

@@ -23,3 +23,5 @@ export * from './telemetry/types'
 
 export { default as getElementType } from './utils/getElementType'
 export { default as getUnhandledProps } from './utils/getUnhandledProps'
+
+export * from './compose'