@instructure/emotion 10.26.1-snapshot-2 → 10.26.1

package/src/styleUtils/ThemeablePropTypes.ts

@@ -0,0 +1,121 @@
+/*
+ * 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 PropTypes from 'prop-types'
+
+import { ThemeablePropValues } from './ThemeablePropValues'
+import type {
+  BorderRadiiValues,
+  BorderRadii,
+  BorderWidthValues,
+  BorderWidth,
+  SpacingValues
+} from './ThemeablePropValues'
+
+const {
+  SHADOW_TYPES,
+  STACKING_TYPES,
+  BORDER_WIDTHS,
+  BORDER_RADII,
+  BACKGROUNDS,
+  SIZES
+} = ThemeablePropValues
+
+/**
+ * ---
+ * category: utilities/themes
+ * ---
+ * Custom prop types for themeable React components.
+ * @module ThemeablePropTypes
+ */
+const ThemeablePropTypes = {
+  shadow: PropTypes.oneOf(Object.values(SHADOW_TYPES)),
+  stacking: PropTypes.oneOf(Object.values(STACKING_TYPES)),
+  borderWidth: shorthandPropType(Object.values(BORDER_WIDTHS)),
+  borderRadius: shorthandPropType(Object.values(BORDER_RADII)),
+  background: PropTypes.oneOf(Object.values(BACKGROUNDS)),
+  size: PropTypes.oneOf(Object.values(SIZES))
+}
+
+type ValueKeys =
+  | BorderWidthValues[]
+  | BorderRadiiValues[]
+  | SpacingValues[]
+  | string[]
+
+function shorthandPropType<V extends ValueKeys>(
+  validValues: V
+): PropTypes.Validator<
+  V extends BorderWidthValues[]
+    ? BorderWidth
+    : V extends BorderRadiiValues[]
+    ? BorderRadii
+    : string[]
+> {
+  return function (
+    props: Record<string, unknown>,
+    propName: string,
+    componentName: string,
+    location: string
+  ) {
+    const propValue = props[propName]
+
+    if (typeof propValue === 'undefined') {
+      return null
+    }
+
+    if (typeof propValue !== 'string') {
+      return new Error(
+        `Invalid ${location} \`${propName}\` of type \`${typeof propValue}\` supplied to \`${componentName}\`, expected ` +
+          `a string.`
+      )
+    }
+
+    const propValues = propValue.split(' ')
+    const valuesLength = propValues.length
+    if (valuesLength > 0 && valuesLength < 5) {
+      for (let i = 0; i < valuesLength; i++) {
+        const valueIndex = (validValues as string[]).indexOf(propValues[i])
+        if (valueIndex === -1) {
+          return new Error(
+            `Invalid ${location} \`${propName}\` \`${propValues[i]}\` supplied to \`${componentName}\`, expected ` +
+              `a one of \`${validValues.join(', ')}\`.`
+          )
+        }
+      }
+    } else {
+      return new Error(
+        `Invalid ${location} \`${propName}\` \`${propValue}\` supplied to \`${componentName}\`, expected ` +
+          `between one and four of the following valid values: \`${validValues.join(
+            ', '
+          )}\`.`
+      )
+    }
+
+    return null
+  }
+}
+
+export default ThemeablePropTypes
+export { ThemeablePropTypes, shorthandPropType }

package/src/styleUtils/index.ts

@@ -23,6 +23,7 @@
  */
 
 export { ThemeablePropValues } from './ThemeablePropValues'
+export { ThemeablePropTypes } from './ThemeablePropTypes'
 export { makeThemeVars } from './makeThemeVars'
 export { getShorthandPropValue } from './getShorthandPropValue'
 export { mirrorShorthandCorners } from './mirrorShorthandCorners'

package/src/useTheme.ts

@@ -25,6 +25,7 @@
 import { useTheme as useEmotionTheme } from '@emotion/react'
 import canvas from '@instructure/ui-themes'
 import { isEmpty } from '@instructure/ui-utils'
+import { ThemeRegistry } from '@instructure/theme-registry'
 
 import type { BaseThemeOrOverride } from './EmotionTypes'
 
@@ -33,13 +34,20 @@ import type { BaseThemeOrOverride } from './EmotionTypes'
  * private: true
  * ---
  * A hook that will return the currently applied theme object from the nearest Context.
- * If there is no theme provided to the Context, it will return the default `canvas` theme.
+ * If there is no Context, then it tries to get the current theme from the global ThemeRegistry.
+ * If there is no theme provided to the Context and ThemeRegistry it will return the default `canvas` theme.
  * @returns The theme object
  */
 const useTheme = () => {
   // This reads the theme from Emotion's ThemeContext
   let theme = useEmotionTheme() as BaseThemeOrOverride
+
   if (isEmpty(theme)) {
+    const globalTheme = ThemeRegistry.getCurrentTheme()
+
+    if (globalTheme) {
+      return globalTheme
+    }
     if (process.env.NODE_ENV !== 'production') {
       console.warn(
         `No theme provided for [InstUISettingsProvider], using default <canvas> theme.`

package/src/withStyle.tsx

@@ -116,7 +116,7 @@ const defaultValues = {
  * [InstUISettingsProvider](#InstUISettingsProvider) component, and/or set
  * explicitly via its `themeOverride` prop.
  *
- * InstUISettingsProvider provides a theme object (e.g. the [canvas theme](/#canvas)).
+ * InstUISettingsProvider provides a theme object with global theme variables (e.g. the [canvas theme](/#canvas)).
  * These variables are mapped to the component's own variables in `theme.js` (see [theming](#theming-basics) for more info).
  *
  * With the `themeOverride` prop you can directly set/override the component theme variables declared in theme.js. It accepts an object or a function. The function has the component's theme and the currently active main theme as its parameter.
@@ -177,7 +177,6 @@ const withStyle = decorator(
       generateComponentTheme?: GenerateComponentTheme
       allowedProps?: string[]
       originalType?: WithStyleComponent
-      defaultProps?: Partial<any>
     } = forwardRef((props, ref) => {
       const theme = useTheme()
 
@@ -252,7 +251,12 @@ const withStyle = decorator(
     // more info: https://github.com/facebook/react/issues/13455
     WithStyle.originalType = ComposedComponent.originalType || ComposedComponent
 
+    // we have to pass these on, because sometimes users
+    // access propTypes of the component in other components
+    // eslint-disable-next-line react/forbid-foreign-prop-types
+    WithStyle.propTypes = ComposedComponent.propTypes
     WithStyle.defaultProps = ComposedComponent.defaultProps
+
     // These static fields exist on InstUI components
     WithStyle.allowedProps = ComposedComponent.allowedProps
 

package/tsconfig.build.json

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