@telus-uds/components-base 1.69.0 → 1.71.0

package/src/utils/ssr-media-query/hash.js

@@ -0,0 +1,16 @@
+/* eslint-disable no-bitwise */
+export default function hash(text) {
+  if (!text) {
+    return ''
+  }
+
+  let hashValue = 5381
+  let index = text.length - 1
+
+  while (index) {
+    hashValue = (hashValue * 33) ^ text.charCodeAt(index)
+    index -= 1
+  }
+
+  return (hashValue >>> 0).toString(16)
+}

package/src/utils/ssr-media-query/index.js

@@ -0,0 +1,8 @@
+import createStyleSheet from './create-stylesheet'
+import createMediaQueryStyles from './utils/create-media-query-styles'
+
+const StyleSheet = {
+  create: createStyleSheet
+}
+
+export { StyleSheet, createMediaQueryStyles }

package/src/utils/ssr-media-query/utils/common.js

@@ -0,0 +1,20 @@
+const isMedia = (query) => query.indexOf('@media') === 0
+const isPseudo = (query) => query.indexOf(':') === 0
+const isMediaOrPseudo = (query) => isMedia(query) || isPseudo(query)
+
+const deepClone = (obj) => JSON.parse(JSON.stringify(obj))
+
+const createCssRule = (query, stringHash, css) => {
+  let rule
+  const dataMediaSelector = `[data-media~="${stringHash}"]`
+
+  if (isMedia(query)) {
+    rule = `${query} {${dataMediaSelector} ${css}}`
+  } else {
+    rule = `${dataMediaSelector}${query} ${css}`
+  }
+
+  return rule
+}
+
+export { isMedia, isPseudo, isMediaOrPseudo, deepClone, createCssRule }

package/src/utils/ssr-media-query/utils/create-declaration-block.js

@@ -0,0 +1,21 @@
+import createReactDOMStyle from 'react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle'
+import prefixStyles from 'react-native-web/dist/cjs/modules/prefixStyles'
+import hyphenateStyleName from './hyphenate-style-name'
+
+const createDeclarationBlock = (style) => {
+  const domStyle = prefixStyles(createReactDOMStyle(style))
+  const declarationsString = Object.keys(domStyle)
+    .map((property) => {
+      const value = domStyle[property]
+      const prop = hyphenateStyleName(property)
+      if (Array.isArray(value)) {
+        return value.map((v) => `${prop}:${v}`).join(';')
+      }
+      return `${prop}:${value} !important`
+    })
+    .sort()
+    .join(';')
+  return `{${declarationsString};}`
+}
+
+export default createDeclarationBlock

package/src/utils/ssr-media-query/utils/create-media-query-styles.js

@@ -0,0 +1,31 @@
+import { viewports } from '@telus-uds/system-constants'
+
+/**
+ * @typedef { Object } CssStyles
+ * @typedef { Record<"xs" | "sm" | "md" | "lg" | "xl", CssStyles> } ViewportStyles
+ * @typedef { Record<String, CssStyles> } MediaQueryStyles
+ */
+
+/**
+ * Generates media query styles based on specified viewport styles.
+ * @param {ViewportStyles} viewportStyles
+ * @returns { MediaQueryStyles }
+ */
+
+function createMediaQueryStyles(viewportStyles) {
+  const viewportsArray = Object.keys(viewportStyles)
+  const mediaQueries = Object.entries(viewportStyles).reduce((acc, [viewport, styles]) => {
+    const minWidth = viewports.map.get(viewport)
+    const nextViewport = viewportsArray[viewportsArray.indexOf(viewport) + 1]
+    const maxWidth = viewports.map.get(nextViewport)
+
+    const mediaQuery = `@media (min-width: ${minWidth}px)${
+      maxWidth ? ` and (max-width: ${maxWidth}px)` : ''
+    }`
+    return { ...acc, [mediaQuery]: styles }
+  }, {})
+
+  return mediaQueries
+}
+
+export default createMediaQueryStyles

package/src/utils/ssr-media-query/utils/hyphenate-style-name.js

@@ -0,0 +1,15 @@
+const uppercasePattern = /[A-Z]/g
+const msPattern = /^ms-/
+const cache = {}
+
+const toHyphenLower = (match) => `-${match.toLowerCase()}`
+
+const hyphenateStyleName = (name) => {
+  if (Object.prototype.hasOwnProperty.call(cache, name)) {
+    return cache[name]
+  }
+  const hName = name.replace(uppercasePattern, toHyphenLower)
+  return cache[name] === msPattern.test(hName) ? `-${hName}` : hName
+}
+
+export default hyphenateStyleName

package/src/utils/ssr-media-query/utils/inject.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Platform } from 'react-native'
+
+const rules = {}
+let styleSheet
+
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  styleSheet = (() => {
+    const style = document.createElement('style')
+    style.id = 'RNMQCSS'
+    style.appendChild(document.createTextNode(''))
+    document.head.appendChild(style)
+    return style.sheet
+  })()
+}
+export const hasCss = (id, text) => {
+  return !!rules[id] && !!rules[id].text?.includes?.(text)
+}
+
+export const addCss = (id, text) => {
+  if (!hasCss(id, text)) {
+    rules[id] = rules?.[id] || {}
+    rules[id].text = (rules[id]?.text || '') + text
+    if (styleSheet) {
+      styleSheet.insertRule(text, Object.keys(rules).length - 1)
+    }
+  }
+}
+
+export const flush = () => {
+  if (Platform.OS === 'web') {
+    return React.createElement('style', {
+      id: 'rnmq',
+      key: 'rnmq',
+      dangerouslySetInnerHTML: {
+        __html: Object.keys(rules)
+          .map((key) => rules[key].text)
+          .join('\n')
+      }
+    })
+  }
+  return {}
+}

package/src/utils/ssr.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { AppRegistry } from 'react-native'
+import { flush } from './ssr-media-query/utils/inject'
 /** @typedef {import('react').ComponentType} ReactComponent */
 /** @typedef {import('react').ReactElement} ReactElement */
 
@@ -80,7 +81,8 @@ export const ssrStyles = (appName = 'UDS app', { styleGetters = [], collectStyle
      */
     getStyles: (...existingStyles) => {
       if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles')
-      return [...existingStyles, ...styleGetters.flatMap((getter) => getter())]
+
+      return [...existingStyles, ...styleGetters.flatMap((getter) => getter()), flush()]
     }
   }
 }