feat(bindings): useStyles hook

Author: layershifter

docs/src/components/Playground/renderConfig.ts

@@ -2,8 +2,10 @@ import * as Accessibility from '@fluentui/accessibility'
 import * as CodeSandbox from '@fluentui/code-sandbox'
 import * as DocsComponent from '@fluentui/docs-components'
 import * as FluentUI from '@fluentui/react'
+import * as FluentBindings from '@fluentui/react-bindings'
 import * as ReactFela from 'react-fela'
 import * as _ from 'lodash'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import * as Classnames from 'classnames'
@@ -39,6 +41,10 @@ export const imports: Record<string, { version: string; module: any }> = {
     version: projectPackageJson.version,
     module: FluentUI,
   },
+  '@fluentui/react-bindings': {
+    version: null,
+    module: FluentBindings,
+  },
   classnames: {
     version: projectPackageJson.dependencies['classnames'],
     module: Classnames,
@@ -47,6 +53,10 @@ export const imports: Record<string, { version: string; module: any }> = {
     version: projectPackageJson.dependencies['lodash'],
     module: _,
   },
+  'prop-types': {
+    version: projectPackageJson.dependencies['prop-types'],
+    module: PropTypes,
+  },
   react: {
     version: projectPackageJson.peerDependencies['react'],
     module: React,

docs/src/examples/components/Status/Types/StatusExample.shorthand.tsx

@@ -1,6 +1,54 @@
-import * as React from 'react'
 import { Status } from '@fluentui/react'
+import { compose } from '@fluentui/react-bindings'
+import * as React from 'react'
+import * as PropTypes from 'prop-types'
+
+// const MyStatus = compose<{ title: never; disabled?: boolean; name: string }>(Status, {
+//   displayName: 'MyStatus',
+//   mapPropsToBehavior: props => ({
+//     name: props.name,
+//   }),
+//   mapPropsToStyles: props => ({
+//     disabled: props.disabled,
+//   }),
+//   // Existing
+//   // handledProps: ['disabled']
+//   // Emotion approach
+//   shouldForwardProp: propName => propName === 'disabled',
+//   overrideStyles: true,
+// })
+
+const StatusWithProp = compose<{ square?: boolean }>(Status, {
+  displayName: 'SquareStatus',
+  mapPropsToStyles: props => ({
+    square: props.square,
+  }),
+})
+
+StatusWithProp.propTypes = {
+  square: PropTypes.bool,
+}
 
-const StatusExampleShorthand = () => <Status title="default state" />
+const StatusExampleShorthand = () => (
+  <>
+    <h2>
+      Default <code>Status</code>
+    </h2>
+    <Status title="default state" />
+    <h2>
+      <code>Status</code> with additional prop
+    </h2>
+    <StatusWithProp />
+    <StatusWithProp square />
+    <h2>
+      Composed <code>MyStatus</code>
+    </h2>
+    {/* <MyStatus
+      accessibility={props => ({ attributes: { root: { 'data-shift': props.name } } })}
+      name="Hoba!"
+    />
+    <MyStatus disabled /> */}
+  </>
+)
 
 export default StatusExampleShorthand

packages/react-bindings/src/compose.ts

@@ -0,0 +1,30 @@
+import * as React from 'react'
+
+type ComposeOptions = {
+  className?: string
+  displayName: string
+  mapPropsToBehavior?: Function
+  mapPropsToStyles?: Function
+  shouldForwardProp?: Function
+  overrideStyles?: boolean
+}
+
+const compose = <UserProps, CProps = {}>(
+  Component: React.ComponentType<CProps>,
+  options: ComposeOptions,
+): React.ComponentType<CProps & UserProps> => {
+  const ComponentComponent = { ...Component }
+
+  ComponentComponent.displayName = options.displayName
+  ComponentComponent.defaultProps = {
+    ...Component.defaultProps,
+    __unstable_config: {
+      overrideStyles: false,
+      ...options,
+    },
+  }
+
+  return ComponentComponent as any
+}
+
+export default compose

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

@@ -0,0 +1,100 @@
+import cx from 'classnames'
+import * as React from 'react'
+// @ts-ignore We have this export in package, but it is not present in typings
+import { ThemeContext } from 'react-fela'
+
+import {
+  ComponentSlotStylesPrepared,
+  ComponentStyleFunctionParam,
+  emptyTheme,
+  mergeComponentStyles,
+  mergeComponentVariables,
+} from '@fluentui/styles'
+import { ProviderContextPrepared } from '@fluentui/react'
+import resolveStylesAndClasses from '../styles/resolveStylesAndClasses'
+
+type UseStylesOptions<StyleProps> = {
+  className?: string
+  mapPropsToStyles?: () => StyleProps
+  mapPropsToInlineStyles?: () => InlineStyleProps // Consider better name
+  rtl?: boolean
+}
+
+type InlineStyleProps = {
+  className?: string
+  design?: any // TODO type
+  styles?: any // TODO type
+  variables?: any // TODO type
+}
+
+const useStyles = <StyleProps>(
+  displayName: string | string[],
+  options: UseStylesOptions<StyleProps>,
+) => {
+  const {
+    className = 'no-classname-🙉',
+    mapPropsToStyles = () => ({} as StyleProps),
+    mapPropsToInlineStyles = () => ({} as InlineStyleProps),
+    rtl = false,
+  } = options
+
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+  const { disableAnimations = false, renderer = null, theme = emptyTheme } = context || {}
+
+  // TODO: throw if there is no context
+
+  const props = mapPropsToStyles()
+  const { className: userClassName, styles, design, variables } = mapPropsToInlineStyles()
+
+  const componentVariables = Array.isArray(displayName)
+    ? displayName.map(displayName => theme.componentVariables[displayName])
+    : [theme.componentVariables[displayName]]
+  const componentStyles = Array.isArray(displayName)
+    ? displayName.map(displayName => theme.componentStyles[displayName])
+    : [theme.componentStyles[displayName]]
+
+  // Merge inline variables on top of cached variables
+  const resolvedVariables = mergeComponentVariables(
+    ...componentVariables,
+    variables,
+  )(theme.siteVariables)
+
+  // Resolve styles using resolved variables, merge results, allow props.styles to override
+  const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles(
+    ...componentStyles,
+    { root: design },
+    { root: styles },
+  )
+
+  const styleParam: ComponentStyleFunctionParam = {
+    displayName: Array.isArray(displayName) ? displayName[0] : displayName,
+    props,
+    variables: resolvedVariables,
+    theme,
+    rtl,
+    disableAnimations,
+  }
+
+  // Fela plugins rely on `direction` param in `theme` prop instead of RTL
+  // Our API should be aligned with it
+  // Heads Up! Keep in sync with Design.tsx render logic
+  const direction = rtl ? 'rtl' : 'ltr'
+  const felaParam = {
+    theme: { direction },
+    disableAnimations,
+    displayName, // does not affect styles, only used by useEnhancedRenderer in docs
+  }
+
+  const { resolvedStyles, classes } = resolveStylesAndClasses(
+    mergedStyles,
+    styleParam,
+    // @ts-ignore
+    renderer ? style => renderer.renderRule(() => style, felaParam) : undefined,
+  )
+
+  classes.root = cx(className, classes.root, userClassName)
+
+  return [classes, resolvedStyles]
+}
+
+export default useStyles

packages/react-bindings/src/index.ts

@@ -10,8 +10,11 @@ export * from './FocusZone/FocusZone.types'
 export * from './FocusZone/focusUtilities'
 
 export { default as useAccessibility } from './hooks/useAccessibility'
+export { default as useStyles } from './hooks/useStyles'
 export { default as unstable_useDispatchEffect } from './hooks/useDispatchEffect'
 export { default as useStateManager } from './hooks/useStateManager'
 
 export { default as getElementType } from './utils/getElementType'
 export { default as getUnhandledProps } from './utils/getUnhandledProps'
+
+export { default as compose } from './compose'

packages/react/src/utils/createAnimationStyles.tsx renamed to packages/react-bindings/src/styles/createAnimationStyles.tsx

@@ -0,0 +1,143 @@
+import cx from 'classnames'
+import * as _ from 'lodash' // REMOVE ME PLEASE!
+
+import callable from '../utils/callable'
+import {
+  ComponentSlotStylesPrepared,
+  ComponentStyleFunctionParam,
+  ComponentVariablesObject,
+  DebugData,
+  emptyTheme,
+  isDebugEnabled,
+  mergeComponentStyles,
+  mergeComponentVariables,
+  PropsWithVarsAndStyles,
+  withDebugId,
+} from '@fluentui/styles'
+
+import createAnimationStyles from './createAnimationStyles'
+import resolveStylesAndClasses from './resolveStylesAndClasses'
+import { ComponentSlotClasses, ProviderContextPrepared } from '@fluentui/react' // TODO fix me
+
+export interface RenderResultConfig {
+  classes: ComponentSlotClasses
+  variables: ComponentVariablesObject
+  styles: ComponentSlotStylesPrepared
+}
+
+export interface RenderConfig {
+  className?: string
+  displayName: string
+  props: PropsWithVarsAndStyles
+  saveDebug: (debug: DebugData | null) => void
+}
+
+const getStyles = (options: any, context?: ProviderContextPrepared): RenderConfig => {
+  const { displayName, className, props, saveDebug } = options
+
+  // const displayName = ''
+  // const className = ''
+  // const props = {} // include state
+  // const saveDebug = () => {}
+
+  const {
+    disableAnimations = false,
+    renderer = null,
+    rtl = false,
+    theme = emptyTheme,
+    _internal_resolvedComponentVariables: resolvedComponentVariables = {},
+  } = context || {}
+
+  // Resolve variables for this component, cache the result in provider
+  if (!resolvedComponentVariables[displayName]) {
+    resolvedComponentVariables[displayName] =
+      callable(theme.componentVariables[displayName])(theme.siteVariables) || {} // component variables must not be undefined/null (see mergeComponentVariables contract)
+  }
+
+  // Merge inline variables on top of cached variables
+  const resolvedVariables = props.variables
+    ? mergeComponentVariables(
+        resolvedComponentVariables[displayName],
+        withDebugId(props.variables, 'props.variables'),
+      )(theme.siteVariables)
+    : resolvedComponentVariables[displayName]
+
+  const animationCSSProp = props.animation
+    ? // @ts-ignore
+      createAnimationStyles(props.animation, context.theme)
+    : {}
+
+  // Resolve styles using resolved variables, merge results, allow props.styles to override
+  const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles(
+    theme.componentStyles[displayName],
+    withDebugId({ root: props.design }, 'props.design'),
+    withDebugId({ root: props.styles }, 'props.styles'),
+    withDebugId({ root: animationCSSProp }, 'props.animation'),
+  )
+
+  const styleParam: ComponentStyleFunctionParam = {
+    displayName,
+    props,
+    variables: resolvedVariables,
+    theme,
+    rtl,
+    disableAnimations,
+  }
+
+  // Fela plugins rely on `direction` param in `theme` prop instead of RTL
+  // Our API should be aligned with it
+  // Heads Up! Keep in sync with Design.tsx render logic
+  const direction = rtl ? 'rtl' : 'ltr'
+  const felaParam = {
+    theme: { direction },
+    disableAnimations,
+    displayName, // does not affect styles, only used by useEnhancedRenderer in docs
+  }
+
+  const { resolvedStyles, resolvedStylesDebug, classes } = resolveStylesAndClasses(
+    mergedStyles,
+    styleParam,
+    // @ts-ignore
+    renderer ? style => renderer.renderRule(() => style, felaParam) : undefined,
+  )
+
+  classes.root = cx(className, classes.root, props.className)
+
+  // conditionally add sources for evaluating debug information to component
+  if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
+    saveDebug({
+      componentName: displayName,
+      componentVariables: _.filter(
+        resolvedVariables._debug,
+        variables => !_.isEmpty(variables.resolved),
+      ),
+      componentStyles: resolvedStylesDebug,
+      siteVariables: _.filter(theme.siteVariables._debug, siteVars => {
+        if (_.isEmpty(siteVars) || _.isEmpty(siteVars.resolved)) {
+          return false
+        }
+
+        const keys = Object.keys(siteVars.resolved)
+        if (
+          keys.length === 1 &&
+          keys.pop() === 'fontSizes' &&
+          _.isEmpty(siteVars.resolved['fontSizes'])
+        ) {
+          return false
+        }
+
+        return true
+      }),
+    })
+  }
+
+  return {
+    // @ts-ignore
+    classes,
+    variables: resolvedVariables,
+    styles: resolvedStyles,
+    theme,
+  }
+}
+
+export default getStyles

packages/react-bindings/src/styles/getStyles.ts

@@ -9,10 +9,19 @@
 function getUnhandledProps<P extends Record<string, any>>(
   handledProps: (keyof P)[],
   props: P,
+  shouldForwardProp: Function = () => false,
 ): Partial<P> {
   return Object.keys(props).reduce<Partial<P>>((acc, prop) => {
-    if (handledProps.indexOf(prop) === -1) (acc as any)[prop] = props[prop]
+    if (shouldForwardProp(prop)) {
+      ;(acc as any)[prop] = props[prop]
+      return acc
+    }
 
+    if (handledProps.indexOf(prop) !== -1) {
+      return acc
+    }
+
+    ;(acc as any)[prop] = props[prop]
     return acc
   }, {})
 }