@startupjs-ui/core 0.1.1 → 0.1.2

package/theming/palette.json

@@ -0,0 +1,10 @@
+{
+  "main": ["#f2f4f8", "#dde1e6", "#c1c7cd", "#a2a9b0", "#878d96", "#697077", "#4d5358", "#343a3f", "#21272a", "#121619" ],
+  "error": ["#fff1f1", "#ffd7d9", "#ffb3b8", "#ff8389", "#fa4d56", "#da1e28", "#a2191f", "#750e13", "#520408", "#2d0709"],
+  "primary": ["#edf5ff", "#d0e2ff", "#a6c8ff", "#78a9ff", "#4589ff", "#0f62fe", "#0043ce", "#002d9c", "#001d6c", "#001141"],
+  "info": ["#e5f6ff", "#bae6ff", "#82cfff", "#33b1ff", "#1192e8", "#0072c3", "#00539a", "#003a6d", "#012749", "#061727"],
+  "success": ["#defbe6", "#a7f0ba", "#6fdc8c", "#42be65", "#24a148", "#198038", "#0e6027", "#044317", "#022d0d", "#071908"],
+  "attention": ["#ffd4a0", "#ffa573", "#ff7832", "#ff5003", "#d74108", "#a53725", "#872a0f", "#6d120f", "#43100b", "#030100"],
+  "warning": ["#fde876", "#fdd600", "#efc100", "#be9b00", "#8c7300", "#735f00", "#574a00", "#3c3200", "#281e00", "#020100"],
+  "secondary": ["#f2f4f8", "#dde1e6", "#c1c7cd", "#a2a9b0", "#878d96", "#697077", "#4d5358", "#343a3f", "#21272a", "#121619" ]
+}

package/theming/themed.js

@@ -0,0 +1,66 @@
+import React, { useContext } from 'react'
+import { matcher } from 'startupjs'
+import memoize from 'lodash/memoize'
+import ThemeContext from './ThemeContext'
+import { useStyle } from './StyleContext'
+
+const memoizedMatcher = memoize(matcher, name => name)
+
+// TODO: Move themed inside react-sharedb's observer()
+export default function themed (name, Component) {
+  if (typeof name !== 'string') {
+    Component = name
+    name = Component.displayName || Component.name
+  }
+
+  function ThemeWrapper (props, ref) {
+    // Setup global component style overrides
+    const uiStyle = useStyle()
+
+    if (uiStyle) {
+      const styleProps = memoizedMatcher(name, uiStyle, '', '', {}) || {}
+      const keysLength = Object.keys(styleProps).length
+      if (
+        keysLength > 0 &&
+        // Handle special case when we have an empty style array
+        // TODO: Fix returning an empty style array
+        !(keysLength === 1 && Array.isArray(styleProps.style) && styleProps.style.length === 0)
+      ) {
+        const newStyleProps = {}
+        for (const key in styleProps) {
+          if (props[key]) {
+            newStyleProps[key] = [styleProps[key], props[key]]
+          } else {
+            newStyleProps[key] = styleProps[key]
+          }
+        }
+        props = { ...props, ...newStyleProps }
+      }
+    }
+
+    // Setup theme context
+    const contextTheme = useContext(ThemeContext)
+    const theme = props.theme || contextTheme
+    let res
+    if (theme && !props.theme) {
+      res = Component({ theme, ...props }, ref)
+    } else {
+      res = Component(props, ref)
+    }
+    return (props.theme && (!contextTheme || contextTheme !== props.theme))
+      ? (
+          React.createElement(
+            ThemeContext.Provider,
+            { value: props.theme },
+            res
+          )
+        )
+      : res
+  }
+
+  ThemeWrapper.displayName = Component.displayName || Component.name
+  ThemeWrapper.propTypes = Component.propTypes
+  ThemeWrapper.defaultProps = Component.defaultProps
+
+  return ThemeWrapper
+}

package/theming/transformColors.js

@@ -0,0 +1,15 @@
+import merge from 'lodash/merge'
+
+export default function transformColors ({ colors = {}, palette = {}, componentColors = {} }) {
+  const transformedColors = Object.keys(colors).reduce((vars, color) => {
+    const prefix = color.includes('--color') ? '' : '--color-'
+    vars[`${prefix}${color}`] = colors[color]
+    return vars
+  }, {})
+
+  return merge({}, componentColors, Object.keys(palette).reduce((vars, color) => {
+    const prefix = color.includes('--palette') ? '' : '--palette-'
+    vars[`${prefix}${color}`] = palette[color]
+    return vars
+  }, transformedColors))
+}

package/theming/useCssVariablesMeta.js

@@ -0,0 +1,44 @@
+import { useMemo } from 'react'
+import { setDefaultVariables } from 'startupjs'
+import defaultPalette from './defaultPalette'
+import defaultVariables from './defaultUiVariables'
+import { transformOverrides } from './helpers'
+
+// set default css variables as early as possible
+setDefaultVariables(defaultVariables)
+
+export default function useCssVariablesMeta ({ staticOverrides, palette, colors, componentColors }) {
+  const cssVariablesMeta = useMemo(() => {
+    // dynamic overrides take priority over static
+    if (palette || colors || componentColors) return { palette, colors, componentColors }
+
+    if (!staticOverrides) return
+
+    const meta = { palette: {}, colors: {}, componentColors: {} }
+
+    const transformedOverrides = transformOverrides(staticOverrides, defaultPalette.colors, defaultPalette.Color)
+
+    for (const key in transformedOverrides) {
+      const isColor = key.includes('--color')
+      const isPaletteColor = key.includes('--palette')
+
+      const value = transformedOverrides[key]
+
+      const path = isPaletteColor
+        ? 'palette'
+        : isColor
+          ? 'colors'
+          : 'componentColors'
+
+      meta[path][key] = value
+    }
+
+    return meta
+  }, [ // eslint-disable-line react-hooks/exhaustive-deps
+    JSON.stringify(staticOverrides), // eslint-disable-line react-hooks/exhaustive-deps
+    JSON.stringify(palette), // eslint-disable-line react-hooks/exhaustive-deps
+    JSON.stringify(colors), // eslint-disable-line react-hooks/exhaustive-deps
+    JSON.stringify(componentColors) // eslint-disable-line react-hooks/exhaustive-deps
+  ])
+  return cssVariablesMeta
+}

package/CHANGELOG.md

@@ -1,9 +0,0 @@
-# v0.1.1 (Sun Nov 16 2025)
-
-#### ⚠️ Pushed to `master`
-
-- initial ([@cray0000](https://github.com/cray0000))
-
-#### Authors: 1
-
-- Pavel Zhukov ([@cray0000](https://github.com/cray0000))