@instructure/emotion 11.6.0 → 11.6.1-snapshot-129

package/src/withStyle.tsx

@@ -46,11 +46,12 @@ import type {
 import type {
   ComponentStyle,
   ComponentOverride,
-  GenerateComponentTheme,
-  GenerateStyle,
+  GenerateStyleRework,
   Props
 } from './EmotionTypes'
 
+import type { NewComponentTypes, Theme } from '@instructure/ui-themes'
+
 // Extract is needed because it would allow number otherwise
 // https://stackoverflow.com/a/51808262/319473
 
@@ -102,9 +103,8 @@ const defaultValues = {
  * ```js-code
  * import { withStyle } from '@instructure/emotion'
  * import generateStyle from './styles'
- * import generateComponentTheme from './theme'
  *
- * export default withStyle(generateStyle, generateComponentTheme)(ExampleComponent)
+ * export default withStyle(generateStyle)(ExampleComponent)
  * ```
  *
  * Themeable components inject their themed styles into the document
@@ -123,24 +123,6 @@ const defaultValues = {
  *
  * See more about the overrides on the [Using theme overrides](/#using-theme-overrides) docs page.
  *
- * ```js-code
- * // ExampleComponent/theme.js
- * const generateComponentTheme = (theme) => {
- *   const { colors } = theme
- *
- *   const componentVariables = {
- *     background: colors?.backgroundMedium,
- *     color: colors?.textDarkest,
- *
- *     hoverColor: colors?.textLightest,
- *     hoverBackground: colors?.backgroundDarkest
- *   }
- *
- *   return componentVariables
- * }
- * export default generateComponentTheme
- * ```
- *
  * ```jsx-code
  * {// global theme override}
  * <InstUISettingsProvider theme={{
@@ -160,26 +142,26 @@ const defaultValues = {
  * @module withStyle
  *
  * @param {function} generateStyle - The function that returns the component's style object
- * @param {function} generateComponentTheme - The function that returns the component's theme variables object
  * @returns {ReactElement} The decorated WithStyle Component
  */
 const withStyle = decorator(
   (
     ComposedComponent: WithStyleComponent,
-    generateStyle: GenerateStyle,
-    generateComponentTheme: GenerateComponentTheme
+    generateStyle: GenerateStyleRework,
+    useTokensFrom?: keyof NewComponentTypes
   ) => {
     const displayName = ComposedComponent.displayName || ComposedComponent.name
 
+    const componentId = ComposedComponent.componentId?.replace('.', '')
+
     const WithStyle: ForwardRefExoticComponent<
       PropsWithoutRef<Props> & RefAttributes<any>
     > & {
-      generateComponentTheme?: GenerateComponentTheme
       allowedProps?: string[]
       originalType?: WithStyleComponent
       defaultProps?: Partial<any>
     } = forwardRef((props, ref) => {
-      const theme = useTheme()
+      const theme = useTheme() as Theme
 
       if (props.styles) {
         warn(
@@ -202,29 +184,40 @@ const withStyle = decorator(
         ...defaultValues
       }
 
-      let componentTheme: ComponentTheme =
-        typeof generateComponentTheme === 'function'
-          ? generateComponentTheme(theme as BaseTheme)
-          : {}
+      const componentWithTokensId = useTokensFrom ?? componentId
+
+      const baseComponentTheme =
+        theme.newTheme.components[
+          componentWithTokensId as keyof NewComponentTypes
+        ]
 
       const themeOverride = getComponentThemeOverride(
         theme,
         displayName,
         ComposedComponent.componentId,
-        componentProps,
-        componentTheme
+        (componentProps as ThemeOverrideProp).themeOverride,
+        baseComponentTheme
       )
 
-      componentTheme = { ...componentTheme, ...themeOverride }
+      const componentTheme = { ...baseComponentTheme, ...themeOverride }
 
+      // TODO do not call here generateStyle, it does not receive the extraArgs
       const [styles, setStyles] = useState(
-        generateStyle ? generateStyle(componentTheme, componentProps, {}) : {}
+        generateStyle
+          ? generateStyle(
+              componentTheme,
+              componentProps,
+              (theme as Theme).newTheme.sharedTokens,
+              {}
+            )
+          : {}
       )
 
       const makeStyleHandler: WithStyleProps['makeStyles'] = (extraArgs) => {
         const calculatedStyles = generateStyle(
           componentTheme,
           componentProps,
+          (theme as Theme).newTheme.sharedTokens,
           extraArgs
         )
         if (!isEqual(calculatedStyles, styles)) {
@@ -256,9 +249,6 @@ const withStyle = decorator(
     // These static fields exist on InstUI components
     WithStyle.allowedProps = ComposedComponent.allowedProps
 
-    // we are exposing the theme generator for the docs generation
-    WithStyle.generateComponentTheme = generateComponentTheme
-
     // we have to add defaults to makeStyles and styles added by this decorator
     // eslint-disable-next-line no-param-reassign
     ComposedComponent.defaultProps = {
@@ -277,4 +267,4 @@ const withStyle = decorator(
 
 export default withStyle
 export { withStyle }
-export type { WithStyleProps }
+export type { WithStyleProps, ThemeOverrideProp }

package/src/withStyleLegacy.tsx

@@ -0,0 +1,212 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { forwardRef, useState } from 'react'
+import type {
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  RefAttributes
+} from 'react'
+
+import hoistNonReactStatics from 'hoist-non-react-statics'
+
+import { deepEqual as isEqual } from '@instructure/ui-utils'
+import { warn } from '@instructure/console'
+import { decorator } from '@instructure/ui-decorator'
+
+import { getComponentThemeOverride } from './getComponentThemeOverride'
+import { useTheme } from './useTheme'
+
+import type {
+  BaseTheme,
+  ComponentTheme,
+  InstUIComponent
+} from '@instructure/shared-types'
+import type {
+  ComponentStyle,
+  ComponentOverride,
+  GenerateComponentTheme,
+  GenerateStyle,
+  Props
+} from './EmotionTypes'
+
+// Extract is needed because it would allow number otherwise
+// https://stackoverflow.com/a/51808262/319473
+
+// Unique name of an InstUI component
+type ComponentName = Extract<keyof ComponentOverride, string>
+
+interface WithStyleComponent extends InstUIComponent {
+  componentId?: ComponentName
+}
+
+type WithStylePrivateProps<
+  Style extends ComponentStyle | null = ComponentStyle
+> = Style extends null
+  ? object
+  : {
+      styles?: Style
+      makeStyles?: (extraArgs?: Record<string, unknown>) => void
+    }
+
+type ThemeOverrideProp<Theme extends ComponentTheme | null = ComponentTheme> = {
+  themeOverride?:
+    | Partial<Theme>
+    | ((componentTheme: Theme, currentTheme: BaseTheme) => Partial<Theme>)
+}
+
+type WithStyleProps<
+  Theme extends ComponentTheme | null = ComponentTheme,
+  Style extends ComponentStyle | null = ComponentStyle
+> = Theme extends null
+  ? WithStylePrivateProps<Style>
+  : WithStylePrivateProps<Style> & ThemeOverrideProp<Theme>
+
+const defaultValues = {
+  styles: {},
+  makeStyles: () => {}
+}
+
+/**
+ * ---
+ * category: utilities/themes
+ * ---
+ * used for old (v11 and eariler) theming system
+ * TODO delete when the theme migration is complete
+ */
+const withStyleLegacy = decorator(
+  (
+    ComposedComponent: WithStyleComponent,
+    generateStyle: GenerateStyle,
+    generateComponentTheme: GenerateComponentTheme
+  ) => {
+    const displayName = ComposedComponent.displayName || ComposedComponent.name
+
+    const WithStyle: ForwardRefExoticComponent<
+      PropsWithoutRef<Props> & RefAttributes<any>
+    > & {
+      generateComponentTheme?: GenerateComponentTheme
+      allowedProps?: string[]
+      originalType?: WithStyleComponent
+      defaultProps?: Partial<any>
+    } = forwardRef((props, ref) => {
+      const theme = useTheme()
+
+      if (props.styles) {
+        warn(
+          false,
+          `Manually passing the "styles" property is not allowed on the ${displayName} component. Using the default styles calculated by the @withStyle decorator instead.\n`,
+          props.styles
+        )
+      }
+
+      if (props.makeStyles) {
+        warn(
+          false,
+          `Manually passing the "makeStyles" property is not allowed on the ${displayName} component. Styles are calculated by the @withStyle decorator.`
+        )
+      }
+
+      const componentProps: Props = {
+        ...ComposedComponent.defaultProps,
+        ...props,
+        ...defaultValues
+      }
+
+      let componentTheme: ComponentTheme =
+        typeof generateComponentTheme === 'function'
+          ? generateComponentTheme(theme as BaseTheme)
+          : {}
+
+      const themeOverride = getComponentThemeOverride(
+        theme,
+        displayName,
+        ComposedComponent.componentId,
+        (componentProps as ThemeOverrideProp).themeOverride,
+        componentTheme
+      )
+
+      componentTheme = { ...componentTheme, ...themeOverride }
+
+      const [styles, setStyles] = useState(
+        generateStyle ? generateStyle(componentTheme, componentProps, {}) : {}
+      )
+
+      const makeStyleHandler: WithStyleProps['makeStyles'] = (extraArgs) => {
+        const calculatedStyles = generateStyle(
+          componentTheme,
+          componentProps,
+          extraArgs
+        )
+        if (!isEqual(calculatedStyles, styles)) {
+          setStyles(calculatedStyles)
+        }
+      }
+
+      return (
+        <ComposedComponent
+          ref={ref}
+          {...props}
+          makeStyles={makeStyleHandler}
+          styles={styles}
+          // passing themeOverrides is needed for components like Button
+          // that have no makeStyles of their own and only pass themeOverrides
+          // to the underlying component (e.g.: BaseButton)
+          themeOverride={themeOverride}
+        />
+      )
+    })
+
+    hoistNonReactStatics(WithStyle, ComposedComponent)
+
+    // added so it can be tested with ReactTestUtils
+    // more info: https://github.com/facebook/react/issues/13455
+    WithStyle.originalType = ComposedComponent.originalType || ComposedComponent
+
+    WithStyle.defaultProps = ComposedComponent.defaultProps
+    // These static fields exist on InstUI components
+    WithStyle.allowedProps = ComposedComponent.allowedProps
+
+    // we are exposing the theme generator for the docs generation
+    WithStyle.generateComponentTheme = generateComponentTheme
+
+    // we have to add defaults to makeStyles and styles added by this decorator
+    // eslint-disable-next-line no-param-reassign
+    ComposedComponent.defaultProps = {
+      ...ComposedComponent.defaultProps,
+      makeStyles: defaultValues.makeStyles,
+      styles: defaultValues.styles
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      WithStyle.displayName = `WithStyle(${displayName})`
+    }
+
+    return WithStyle
+  }
+)
+
+export default withStyleLegacy
+export { withStyleLegacy }
+export type { WithStyleProps }

package/tsconfig.build.json

@@ -30,6 +30,9 @@
     },
     {
       "path": "../ui-react-utils/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-color-utils/tsconfig.build.json"
     }
   ]
 }