feat(bindings): useStyles hook

[layershifter]

This PR adds useStyles() to reuse theming capabilities in custom and Fluent components and have the same API for public and private usage.

Usage

The example below assumes a component called <Text> will be used this way:

type TextComponentProps = {
  className?: string
  color?: string
}

const Text: React.FunctionComponent<TextComponentProps> = props => {
  const { className, children, color } = props

  const [classes] = useStyles('Text', {
    className: 'ui-text',
    mapPropsToStyles: () => ({ color }),
  })

  return <span className={classes.root}>{children}</span>
}

Reference

const [classes] = useStyles(
  displayName: string,
  options: UseStylesOptions<Props>,
)

• displayName - a component name to lookup in theme
• options.className - optional, a special class name that will be always added to the root slot
• options.mapPropsToStyles - optional, a set of props that will be passed style functions, only primitives are allowed
• options.rtl - optional, sets RTL mode

[jdhuntington]

Any ideas on how we could decouple this call from the concrete theme? It would be nice to be able to reuse the base components with a different design system (which would likely have a separate theme shape).

[layershifter]

This is next stage goal 🙇‍♂️

This is actually even not ThemeContext as it contains everything, like renderer and disableAnimations. Currently we can't we have multiple contexts as the most of our components are class components 🙃

I have a naive idea that we will be able to move out renderer to a separate context and use the same interface different engines, https://codesandbox.io/embed/t-rex-proto-1w8bp

[DustyTheBot]

	Warnings
⚠️	Package (or peer) dependencies changed. Make sure you have approval before merging!

Changed dependencies are detected.

Changed dependencies in packages/react-bindings/package.json

package	before	after
@fluentui/styles	-	^0.43.0
classnames	-	^2.2.6
fela	-	^10.6.1
lodash	-	^4.17.15

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🔧	Avatar.Fluent	0.58	0.38	1.53:1	2000	1162
🔧	Button.Fluent	1.33	0.18	7.39:1	1000	1331
🔧	Checkbox.Fluent	1.43	0.29	4.93:1	1000	1427
🔧	Dialog.Fluent	0.36	0.17	2.12:1	5000	1807
🔧	Dropdown.Fluent	4	0.44	9.09:1	1000	4001
🔧	Icon.Fluent	0.25	0.03	8.33:1	5000	1266
🔧	Image.Fluent	0.1	0.08	1.25:1	5000	506
🔧	Slider.Fluent	1.92	0.32	6:1	1000	1917
🦄	Text.Fluent	0.07	0.18	0.39:1	5000	348
🦄	Tooltip.Fluent	0.36	17.7	0.02:1	5000	1814

🔧 Needs work     🎯 On target     🦄 Amazing

Generated by 🚫 dangerJS