fix 4

Author: layershifter

docs/src/app.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { hot } from 'react-hot-loader/root'
 import { Provider, Debug, themes } from '@fluentui/react'
 
-import { mergeThemes } from '@fluentui/react/src/utils'
+import { mergeThemes } from '@fluentui/styles'
 import { ThemeContext, ThemeContextData, themeContextDefaults } from './context/ThemeContext'
 import Routes from './routes'
 import { PerfDataProvider } from './components/ComponentDoc/PerfChart'

docs/src/components/ComponentBestPractices.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as _ from 'lodash'
 import {
+  Extendable,
   Box,
   Flex,
   Header,
@@ -10,7 +11,6 @@ import {
   Segment,
   ShorthandCollection,
 } from '@fluentui/react'
-import { Extendable } from 'src/types'
 
 export type ComponentBestPracticesProps = Extendable<{
   doList?: ShorthandCollection<ListItemProps>

docs/src/components/ComponentDoc/BehaviorCard.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Divider, Segment, Text } from '@fluentui/react'
+import { Divider, ICSSInJSStyle, Segment, Text } from '@fluentui/react'
 import * as _ from 'lodash'
 import ComponentExampleTitle from './ComponentExample/ComponentExampleTitle'
 import BehaviorDescription from './BehaviorDescription'
@@ -10,7 +10,7 @@ export const behaviorVariantDisplayName = (fileName: string) => {
   return _.upperFirst(_.lowerCase(divided))
 }
 
-export const exampleStyle: React.CSSProperties = {
+export const exampleStyle: ICSSInJSStyle = {
   boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
 }
 

docs/src/components/ComponentDoc/BehaviorDescription.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Loader } from '@fluentui/react/src'
+import { Loader } from '@fluentui/react'
 
 const AccessibilityDescription = React.lazy(() => import('./InlineMarkdown'))
 

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -5,7 +5,15 @@ import {
   KnobProvider,
   LogInspector,
 } from '@fluentui/docs-components'
-import { Flex, ICSSInJSStyle, Menu, Provider, Segment } from '@fluentui/react'
+import {
+  ComponentVariablesInput,
+  Flex,
+  ICSSInJSStyle,
+  Menu,
+  Provider,
+  Segment,
+  ThemeInput,
+} from '@fluentui/react'
 import * as _ from 'lodash'
 import * as React from 'react'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
@@ -23,7 +31,6 @@ import ComponentExampleTitle from './ComponentExampleTitle'
 import ComponentSourceManager, {
   ComponentSourceManagerRenderProps,
 } from '../ComponentSourceManager'
-import { ThemeInput } from 'packages/react/src/themes/types'
 import VariableResolver from 'docs/src/components/VariableResolver/VariableResolver'
 import ComponentExampleVariables from 'docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables'
 
@@ -43,7 +50,7 @@ export interface ComponentExampleProps
 
 interface ComponentExampleState {
   anchorName: string
-  componentVariables: Object
+  componentVariables: ComponentVariablesInput
   isActive: boolean
   isActiveHash: boolean
   usedVariables: Record<string, string[]>
@@ -53,7 +60,7 @@ interface ComponentExampleState {
   showVariables: boolean
 }
 
-const childrenStyle: React.CSSProperties = {
+const childrenStyle: ICSSInJSStyle = {
   paddingTop: 0,
   paddingBottom: '10px',
 }

docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx

@@ -12,7 +12,7 @@ import * as React from 'react'
 import { ThemeContext } from 'react-fela'
 
 import ComponentExampleVariable, { ComponentExampleVariableProps } from './ComponentExampleVariable'
-import { mergeThemeVariables } from '@fluentui/react/src/utils/mergeThemes'
+import { mergeThemeVariables } from '@fluentui/styles'
 
 type ComponentExampleVariablesProps = {
   onChange: ComponentExampleVariableProps['onChange']

docs/src/components/ComponentDoc/ComponentProp/ComponentPropExtra.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Extendable } from 'src/types'
+import { Extendable } from '@fluentui/react'
 
 export interface ComponentPropExtraProps {
   children?: JSX.Element[]

docs/src/components/ComponentDoc/ComponentProps/ComponentPropCard.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import ComponentTableProps from '../ComponentPropsTable'
-import { Divider, Segment } from '@fluentui/react/src'
+import { Divider, ICSSInJSStyle, Segment } from '@fluentui/react'
 
-export const cardStyle: React.CSSProperties = {
+export const cardStyle: ICSSInJSStyle = {
   boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
 }
 

docs/src/components/ComponentDoc/ContributionPrompt.tsx

@@ -1,7 +1,7 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-
-import { Icon, Segment, Text, ICSSInJSStyle } from '@fluentui/react'
+import { ICSSInJSStyle } from '@fluentui/styles'
+import { Icon, Segment, Text } from '@fluentui/react'
 import { constants } from '@fluentui/react/src/utils'
 
 const wrapStyle: ICSSInJSStyle = { wordBreak: 'break-word' }

docs/src/components/ComponentDoc/ExampleSection.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react'
-import { Grid, Header } from '@fluentui/react'
+import { Grid, Extendable, Header, ICSSInJSStyle } from '@fluentui/react'
 
-import { Extendable } from 'src/types'
-
-const headerStyle: React.CSSProperties = {
+const headerStyle: ICSSInJSStyle = {
   marginTop: '1.5em',
   marginBottom: '0.5em',
   color: '#999',

docs/src/components/DocsBehaviorRoot.tsx

@@ -1,7 +1,7 @@
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { Header, Segment, Divider } from '@fluentui/react'
+import { Header, Segment, Divider, ICSSInJSStyle } from '@fluentui/react'
 import DocumentTitle from 'react-document-title'
 import ComponentExampleTitle from './ComponentDoc/ComponentExample/ComponentExampleTitle'
 import BehaviorDescription from './ComponentDoc/BehaviorDescription'
@@ -24,7 +24,7 @@ class DocsBehaviorRoot extends React.Component<any, any> {
   }
 
   render() {
-    const exampleStyle: React.CSSProperties = {
+    const exampleStyle: ICSSInJSStyle = {
       boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
     }
 

docs/src/components/DocsLayout.tsx

@@ -6,7 +6,7 @@ import { withRouter } from 'react-router-dom'
 
 import Sidebar from 'docs/src/components/Sidebar/Sidebar'
 import { scrollToAnchor } from 'docs/src/utils'
-import { mergeThemes } from '@fluentui/react/src/utils'
+import { mergeThemes } from '@fluentui/styles'
 
 const anchors = new AnchorJS({
   class: 'anchor-link',

docs/src/examples/components/Slider/commonScreenerSteps.ts

@@ -1,4 +1,4 @@
-import { Slider } from '@fluentui/react/src'
+import { Slider } from '@fluentui/react'
 
 const selectors = {
   input: `.${Slider.slotClassNames.input}`,

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

@@ -3,22 +3,20 @@ 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 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',
@@ -45,11 +43,11 @@ const StatusExampleShorthand = () => (
     <h2>
       Composed <code>MyStatus</code>
     </h2>
-    <MyStatus
+    {/* <MyStatus
       accessibility={props => ({ attributes: { root: { 'data-shift': props.name } } })}
       name="Hoba!"
     />
-    <MyStatus disabled />
+    <MyStatus disabled /> */}
   </>
 )
 

docs/src/prototypes/Prototypes.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { Box, Header, Segment } from '@fluentui/react'
+import { Box, Header, ICSSInJSStyle, Segment } from '@fluentui/react'
 
 interface PrototypeSectionProps {
   title?: React.ReactNode
-  styles?: React.CSSProperties
+  styles?: ICSSInJSStyle
 }
 
 interface ComponentPrototypeProps extends PrototypeSectionProps {

docs/src/prototypes/chatPane/composeMessage.tsx

@@ -8,6 +8,7 @@ import {
   MenuItemProps,
   ShorthandCollection,
   IconXSpacing,
+  ICSSInJSStyle,
 } from '@fluentui/react'
 
 import { Props } from 'src/types'
@@ -52,7 +53,7 @@ const ComposeMessage: React.FunctionComponent<ComposeMessageProps> = props => (
   />
 )
 
-const getInputWrapperStyles = ({ attached }: ComposeMessageProps): React.CSSProperties => {
+const getInputWrapperStyles = ({ attached }: ComposeMessageProps): ICSSInJSStyle => {
   const borderTopRadius = '3px'
   const borderBottomRadius = '2px'
   const borderWidth = '1px'

docs/src/prototypes/chatPane/services/messageFactoryMock.tsx

@@ -1,5 +1,6 @@
 import {
   Attachment,
+  Extendable,
   Popup,
   Menu,
   AvatarProps,
@@ -10,7 +11,7 @@ import {
 import * as React from 'react'
 import * as _ from 'lodash'
 import * as keyboardKey from 'keyboard-key'
-import { Extendable, ShorthandValue } from 'src/types'
+import { ShorthandValue } from 'src/types'
 import { ChatData, UserStatus, MessageData, UserData, areSameDay, getFriendlyDateString } from '.'
 
 export enum ChatItemTypes {

docs/src/prototypes/employeeCard/AvatarEmployeeCard.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import { Avatar, Popup } from '@fluentui/react'
+import { Avatar, Extendable, Popup } from '@fluentui/react'
 import EmployeeCard, { EmployeeCardProps } from './EmployeeCard'
-import { Extendable } from 'src/types'
 
 export interface AvatarEmployeeCardState {
   popupOpen: boolean

docs/src/prototypes/employeeCard/EmployeeCard.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { Extendable, ShorthandValue } from 'src/types'
-import { Avatar, AvatarProps, Divider, Grid } from '@fluentui/react'
+import { ShorthandValue } from 'src/types'
+import { Avatar, AvatarProps, Divider, Extendable, Grid } from '@fluentui/react'
 import CustomText from './CustomText'
 
 export interface EmployeeCardProps {

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

@@ -4,27 +4,48 @@ import * as React from 'react'
 import { ThemeContext } from 'react-fela'
 
 import {
+  ComponentSlotStylesPrepared,
+  ComponentStyleFunctionParam,
   emptyTheme,
   mergeComponentStyles,
   mergeComponentVariables,
-} from '@fluentui/react/src/utils/mergeThemes'
-import {
-  ComponentSlotStylesPrepared,
-  ComponentStyleFunctionParam,
-  ProviderContextPrepared,
-} from '@fluentui/react'
-import resolveStylesAndClasses from '@fluentui/react/src/utils/resolveStylesAndClasses'
+} from '@fluentui/styles'
+import { ProviderContextPrepared } from '@fluentui/react'
+import resolveStylesAndClasses from '../styles/resolveStylesAndClasses'
 
-const useStyles = (displayName: string | string[], options: any) => {
-  const className = options.className || 'no-classname-🙉'
-  const rtl = options.rtl || false
-  const props = options.mapPropsToStyles()
-  const { className: userClassName, styles, design, variables } = options.mapInlineToStyles()
+type UseStylesOptions<StyleProps> = {
+  className?: string
+  mapPropsToStyles?: () => StyleProps
+  mapPropsToInlineStyles?: () => InlineStyleProps // Consider better name
+  rtl?: boolean
+}
 
-  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+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]]
@@ -37,7 +58,7 @@ const useStyles = (displayName: string | string[], options: any) => {
     ...componentVariables,
     variables,
   )(theme.siteVariables)
-  console.log(componentStyles, props)
+
   // Resolve styles using resolved variables, merge results, allow props.styles to override
   const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles(
     ...componentStyles,

packages/react-bindings/src/index.ts

@@ -14,6 +14,8 @@ 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 getStyles } from './styles/getStyles'
+
 export { default as callable } from './utils/callable'
 export { default as getElementType } from './utils/getElementType'
 export { default as getUnhandledProps } from './utils/getUnhandledProps'

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

@@ -1,4 +1,5 @@
-import { AnimationProp, ThemePrepared } from '../themes/types'
+import { AnimationProp } from '@fluentui/react' // TODO FIX ME
+import { ThemePrepared } from '@fluentui/styles'
 
 const createAnimationStyles = (animation: AnimationProp, theme: ThemePrepared) => {
   let animationCSSProp = {}