feat(bindings): add useStyles() hook

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

@@ -0,0 +1,25 @@
+import { emptyTheme } from '@stardust-ui/react/src/lib/mergeThemes'
+import { ThemeContext } from 'react-fela'
+
+import resolveComponentStyling from '../styles/resolveComponentStyling'
+import { ProviderContextPrepared } from '@stardust-ui/react'
+import * as React from 'react'
+
+const useStyles = (props, options) => {
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+  const { className = 'undefined', displayName = 'StardustComponent' } = options
+  const { disableAnimations = false, renderer = null, rtl = false, theme = emptyTheme } =
+    context || {}
+
+  return resolveComponentStyling({
+    className,
+    disableAnimations,
+    displayName,
+    props,
+    rtl,
+    renderer,
+    theme,
+  })
+}
+
+export default useStyles

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

@@ -0,0 +1,73 @@
+import {
+  ComponentSlotClasses,
+  ComponentSlotStylesPrepared,
+  ComponentStyleFunctionParam,
+  ComponentVariablesObject,
+} from '@stardust-ui/react'
+import {
+  mergeComponentStyles,
+  mergeComponentVariables,
+} from '@stardust-ui/react/src/lib/mergeThemes'
+import createAnimationStyles from '@stardust-ui/react/src/lib/createAnimationStyles'
+import callable from '@stardust-ui/react/src/lib/callable'
+import cx from 'classnames'
+
+const resolveComponentStyling = ({
+  className,
+  disableAnimations,
+  displayName,
+  props,
+  renderer,
+  rtl,
+  theme,
+}) => {
+  // Resolve variables for this component, allow props.variables to override
+  const resolvedVariables: ComponentVariablesObject = mergeComponentVariables(
+    theme.componentVariables[displayName],
+    props.variables,
+  )(theme.siteVariables)
+
+  const animationCSSProp = props.animation ? createAnimationStyles(props.animation, theme) : {}
+
+  // Resolve styles using resolved variables, merge results, allow props.styles to override
+  const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles(
+    theme.componentStyles[displayName],
+    { root: props.design },
+    { root: props.styles },
+    { root: animationCSSProp },
+  )
+
+  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 },
+  }
+
+  const resolvedStyles: ComponentSlotStylesPrepared = {}
+  const classes: ComponentSlotClasses = {}
+
+  Object.keys(mergedStyles).forEach(slotName => {
+    resolvedStyles[slotName] = callable(mergedStyles[slotName])(styleParam)
+
+    if (renderer) {
+      classes[slotName] = renderer.renderRule(callable(resolvedStyles[slotName]), felaParam)
+    }
+  })
+
+  classes.root = cx(className, classes.root, props.className)
+
+  return [classes, resolvedStyles, resolvedVariables]
+}
+
+export default resolveComponentStyling

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

@@ -0,0 +1,20 @@
+// ========================================================
+// Provider's context
+// ========================================================
+
+export interface ProviderContextInput {
+  renderer?: Renderer
+  rtl?: boolean
+  disableAnimations?: boolean
+  target?: Document
+  theme?: ThemeInput
+}
+
+export interface ProviderContextPrepared {
+  renderer: Renderer
+  rtl: boolean
+  disableAnimations: boolean
+  target: Document
+  theme: ThemePrepared
+  originalThemes: (ThemeInput | undefined)[]
+}

packages/react/src/lib/renderComponent.tsx

@@ -12,7 +12,6 @@ import {
   getElementType,
   getUnhandledProps,
 } from '@stardust-ui/react-bindings'
-import cx from 'classnames'
 import * as React from 'react'
 import * as _ from 'lodash'
 
@@ -33,6 +32,7 @@ import getKeyDownHandlers from './getKeyDownHandlers'
 import { emptyTheme, mergeComponentStyles, mergeComponentVariables } from './mergeThemes'
 import createAnimationStyles from './createAnimationStyles'
 import Debug, { isEnabled as isDebugEnabled } from './debug'
+import resolveComponentStyling from '@stardust-ui/react-bindings/src/styles/resolveComponentStyling'
 
 export interface RenderResultConfig<P> {
   ElementType: React.ElementType<P>
@@ -181,69 +181,29 @@ const renderComponent = <P extends {}>(
   const ElementType = getElementType(props) as React.ReactType<P>
   const stateAndProps = { ...state, ...props }
 
-  // Resolve variables for this component, allow props.variables to override
-  const resolvedVariables: ComponentVariablesObject = mergeComponentVariables(
-    theme.componentVariables[displayName],
-    props.variables,
-  )(theme.siteVariables)
-
-  const animationCSSProp = props.animation
-    ? createAnimationStyles(props.animation, context.theme)
-    : {}
-
-  // Resolve styles using resolved variables, merge results, allow props.styles to override
-  const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles(
-    theme.componentStyles[displayName],
-    { root: props.design },
-    { root: props.styles },
-    { root: animationCSSProp },
-  )
-
   const accessibility: ReactAccessibilityBehavior = getAccessibility(
     displayName,
-    stateAndProps,
     actionHandlers,
+    stateAndProps,
     rtl,
   )
 
-  const unhandledProps = getUnhandledProps(handledProps, props)
-
-  const styleParam: ComponentStyleFunctionParam = {
+  const [classes, styles, variables] = resolveComponentStyling({
+    className,
     displayName,
+    disableAnimations,
     props: stateAndProps,
-    variables: resolvedVariables,
+    renderer,
     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 },
-  }
-
-  const resolvedStyles: ComponentSlotStylesPrepared = {}
-  const classes: ComponentSlotClasses = {}
-
-  Object.keys(mergedStyles).forEach(slotName => {
-    resolvedStyles[slotName] = callable(mergedStyles[slotName])(styleParam)
-
-    if (renderer) {
-      classes[slotName] = renderer.renderRule(callable(resolvedStyles[slotName]), felaParam)
-    }
   })
 
-  classes.root = cx(className, classes.root, props.className)
-
   const resolvedConfig: RenderResultConfig<P> = {
     ElementType,
     unhandledProps,
     classes,
-    variables: resolvedVariables,
-    styles: resolvedStyles,
+    variables,
+    styles,
     accessibility,
     rtl,
     theme,
@@ -261,7 +221,15 @@ const renderComponent = <P extends {}>(
         themes: context ? context.originalThemes : [],
         instanceStylesOverrides: props.styles,
         instanceVariablesOverrides: props.variables,
-        resolveStyles: styles => resolveStyles(styles, styleParam),
+        resolveStyles: styles =>
+          resolveStyles(styles, {
+            displayName,
+            props,
+            variables,
+            theme,
+            rtl,
+            disableAnimations,
+          }),
         resolveVariables: variables => callable(variables)(theme.siteVariables),
       }),
     )