wip !

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,56 @@
-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 => {
+    return {
+      name: props.name,
+    }
+  },
+  mapPropsToStyles: props => ({
+    disabled: props.disabled,
+  }),
+  // Existing
+  // handledProps: ['disabled']
+  // Emotion approach
+  shouldForwardProp: prop => prop === '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

@@ -15,7 +15,7 @@ import {
 } from '@fluentui/react'
 import resolveStylesAndClasses from '@fluentui/react/src/utils/resolveStylesAndClasses'
 
-const useStyles = (displayName: string, options: any) => {
+const useStyles = (displayName: string | string[], options: any) => {
   const className = options.className || 'no-classname-🙉'
   const rtl = options.rtl || false
   const props = options.mapPropsToStyles()
@@ -25,21 +25,28 @@ const useStyles = (displayName: string, options: any) => {
 
   const { disableAnimations = false, renderer = null, theme = emptyTheme } = context || {}
 
+  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(
-    theme.componentVariables[displayName],
+    ...componentVariables,
     variables,
   )(theme.siteVariables)
-
+  console.log(componentStyles, props)
   // Resolve styles using resolved variables, merge results, allow props.styles to override
   const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles(
-    theme.componentStyles[displayName],
+    ...componentStyles,
     { root: design },
     { root: styles },
   )
 
   const styleParam: ComponentStyleFunctionParam = {
-    displayName,
+    displayName: Array.isArray(displayName) ? displayName[0] : displayName,
     props,
     variables: resolvedVariables,
     theme,

packages/react-bindings/src/index.ts

@@ -17,3 +17,5 @@ export { default as useStateManager } from './hooks/useStateManager'
 export { default as callable } from './utils/callable'
 export { default as getElementType } from './utils/getElementType'
 export { default as getUnhandledProps } from './utils/getUnhandledProps'
+
+export { default as compose } from './compose'

packages/react-bindings/src/utils/getUnhandledProps.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
   }, {})
 }

packages/react/src/components/Status/Status.tsx

@@ -34,14 +34,20 @@ export interface StatusProps extends UIComponentProps {
 
 const Status = React.forwardRef<HTMLDivElement, WithAsProp<StatusProps>>((props, ref) => {
   const { className, color, icon, size, state, design, styles, variables } = props
+  const { displayName, mapPropsToBehavior, mapPropsToStyles, overrideStyles, shouldForwardProp } =
+    props.__unstable_config || {}
 
   const { rtl }: ProviderContextPrepared = React.useContext(ThemeContext)
-  const [classes, resolvedStyles] = useStyles(Status.displayName, {
+  const magicName = overrideStyles
+    ? displayName || Status.displayName
+    : [Status.displayName, displayName].filter(Boolean)
+  const [classes, resolvedStyles] = useStyles(magicName, {
     className: (Status as any).className,
     mapPropsToStyles: () => ({
       color,
       size,
       state,
+      ...(mapPropsToStyles && mapPropsToStyles(props)),
     }),
     mapInlineToStyles: () => ({
       className,
@@ -52,12 +58,17 @@ const Status = React.forwardRef<HTMLDivElement, WithAsProp<StatusProps>>((props,
     rtl,
   })
   const getA11Props = useAccessibility(props.accessibility, {
-    debugName: Status.displayName,
+    debugName: displayName || Status.displayName,
+    mapPropsToBehavior: mapPropsToBehavior ? () => mapPropsToBehavior(props) : undefined,
     rtl,
   })
   const ElementType = getElementType(props)
-  const unhandledProps = getUnhandledProps((Status as any).handledProps /* TODO */, props)
-
+  const unhandledProps = getUnhandledProps(
+    (Status as any).handledProps /* TODO */,
+    props,
+    shouldForwardProp,
+  )
+  console.log(getA11Props('root', {}))
   return (
     <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>
       {Icon.create(icon, {
@@ -83,7 +94,7 @@ const Status = React.forwardRef<HTMLDivElement, WithAsProp<StatusProps>>((props,
   size: customPropTypes.size,
   state: PropTypes.oneOf(['success', 'info', 'warning', 'error', 'unknown']),
 }
-;(Status as any).handledProps = Object.keys((Status as any).propTypes)
+;(Status as any).handledProps = [...Object.keys((Status as any).propTypes), '__unstable_config']
 Status.defaultProps = {
   accessibility: statusBehavior,
   as: 'span',

packages/react/src/themes/teams/index.tsx

@@ -53,7 +53,30 @@ const teamsTheme: ThemePrepared = createTheme(
   {
     siteVariables,
     componentVariables,
-    componentStyles,
+    componentStyles: {
+      ...componentStyles,
+      MyStatus: {
+        root: ({ props: p }) => ({
+          display: 'inline-flex',
+          background: 'pink',
+          border: '1px',
+          borderRadius: '9999px',
+          height: '10px',
+          width: '10px',
+
+          ...(p.disabled && {
+            background: 'gray',
+          }),
+        }),
+      },
+      SquareStatus: {
+        root: ({ props: p }) => ({
+          ...(p.square && {
+            borderRadius: 0,
+          }),
+        }),
+      },
+    },
     fontFaces,
     staticStyles,
     icons,