@pyreon/rocketstyle 0.11.0 → 0.11.2

package/src/context/createLocalProvider.ts

@@ -0,0 +1,84 @@
+import { provide } from "@pyreon/core"
+import { signal } from "@pyreon/reactivity"
+import type { PseudoProps } from "../types/pseudo"
+import type { ComponentFn } from "../types/utils"
+import { localContext } from "./localContext"
+
+type Props = PseudoProps & Record<string, any>
+
+/**
+ * Higher-order component that wraps a component with a LocalProvider,
+ * detecting pseudo-states (hover, focus, pressed) via mouse/focus events
+ * and broadcasting them through local context to child rocketstyle components.
+ *
+ * In Pyreon, context is provided via provide(), and state is managed
+ * with signals instead of useState.
+ */
+const createLocalProvider = (WrappedComponent: ComponentFn<any>) => {
+  const HOCComponent: ComponentFn<Props> = ({
+    onMouseEnter,
+    onMouseLeave,
+    onMouseUp,
+    onMouseDown,
+    onFocus,
+    onBlur,
+    $rocketstate,
+    ...props
+  }) => {
+    const hover = signal(false)
+    const focus = signal(false)
+    const pressed = signal(false)
+
+    const pseudoState = () => ({
+      hover: hover(),
+      focus: focus(),
+      pressed: pressed(),
+    })
+
+    const events = {
+      onMouseEnter: (e: MouseEvent) => {
+        hover.set(true)
+        if (onMouseEnter) onMouseEnter(e)
+      },
+      onMouseLeave: (e: MouseEvent) => {
+        hover.set(false)
+        pressed.set(false)
+        if (onMouseLeave) onMouseLeave(e)
+      },
+      onMouseDown: (e: MouseEvent) => {
+        pressed.set(true)
+        if (onMouseDown) onMouseDown(e)
+      },
+      onMouseUp: (e: MouseEvent) => {
+        pressed.set(false)
+        if (onMouseUp) onMouseUp(e)
+      },
+      onFocus: (e: FocusEvent) => {
+        focus.set(true)
+        if (onFocus) onFocus(e)
+      },
+      onBlur: (e: FocusEvent) => {
+        focus.set(false)
+        if (onBlur) onBlur(e)
+      },
+    }
+
+    const updatedState = {
+      ...$rocketstate,
+      pseudo: { ...$rocketstate?.pseudo, ...pseudoState() },
+    }
+
+    // Provide local context for child rocketstyle components
+    provide(localContext, updatedState)
+
+    return WrappedComponent({
+      ...props,
+      ...events,
+      $rocketstate: updatedState,
+    })
+  }
+
+  return HOCComponent
+}
+
+export default createLocalProvider

package/src/context/localContext.ts

@@ -0,0 +1,37 @@
+import { createContext, useContext } from "@pyreon/core"
+import type { PseudoState } from "../types/pseudo"
+
+type LocalContext = Partial<
+  {
+    pseudo: PseudoState
+  } & Record<string, string>
+>
+
+/**
+ * Local context for propagating pseudo-state (hover, focus, pressed)
+ * and additional styling attributes from a parent provider component
+ * to its rocketstyle children.
+ */
+const localContext = createContext<LocalContext>({})
+
+const EMPTY_CTX = { pseudo: {} } as LocalContext
+
+/**
+ * Retrieves the local pseudo-state context. When a consumer callback
+ * is provided, it transforms the raw context; otherwise returns defaults.
+ *
+ * In Pyreon, components are plain functions that run once — no useMemo needed.
+ */
+type UseLocalContext = (consumer: any) => LocalContext
+export const useLocalContext: UseLocalContext = (consumer) => {
+  const ctx = useContext(localContext)
+
+  if (!consumer) return EMPTY_CTX
+
+  const result = consumer((callback: any) => callback(ctx))
+  return { pseudo: {}, ...result }
+}
+
+export { localContext }
+
+export default localContext

package/src/hoc/index.ts

@@ -0,0 +1,3 @@
+import rocketstyleAttrsHoc from "./rocketstyleAttrsHoc"
+
+export { rocketstyleAttrsHoc }

package/src/hoc/rocketstyleAttrsHoc.ts

@@ -0,0 +1,63 @@
+import { render } from "@pyreon/ui-core"
+import { useTheme } from "../hooks"
+import type { Configuration } from "../types/configuration"
+import type { ComponentFn } from "../types/utils"
+import { calculateChainOptions, removeUndefinedProps } from "../utils/attrs"
+
+export type RocketStyleHOC = ({
+  inversed,
+  attrs,
+  priorityAttrs,
+}: Pick<Configuration, "inversed" | "attrs" | "priorityAttrs">) => (
+  WrappedComponent: ComponentFn<any>,
+) => ComponentFn<any>
+
+/**
+ * HOC that resolves the `.attrs()` chain before the inner component renders.
+ * Evaluates both regular and priority attrs callbacks with the current theme
+ * and mode, then merges the results with explicit props (priority attrs
+ * are applied first, regular attrs can be overridden by direct props).
+ *
+ * In Pyreon, there is no forwardRef — ref flows as a normal prop.
+ * Components are plain functions.
+ */
+const rocketStyleHOC: RocketStyleHOC = ({ inversed, attrs, priorityAttrs }) => {
+  const calculateAttrs = calculateChainOptions(attrs)
+  const calculatePriorityAttrs = calculateChainOptions(priorityAttrs)
+
+  const Enhanced = (WrappedComponent: ComponentFn<any>) => {
+    const HOCComponent: ComponentFn<any> = (props) => {
+      const { theme, mode, isDark, isLight } = useTheme({
+        inversed,
+      })
+
+      const callbackParams = [theme, { render, mode, isDark, isLight }]
+
+      // Remove undefined props not to override potential default props
+      const filteredProps = removeUndefinedProps(props)
+
+      const prioritizedAttrs = calculatePriorityAttrs([filteredProps, ...callbackParams])
+
+      const finalAttrs = calculateAttrs([
+        {
+          ...prioritizedAttrs,
+          ...filteredProps,
+        },
+        ...callbackParams,
+      ])
+
+      const finalProps = {
+        ...prioritizedAttrs,
+        ...finalAttrs,
+        ...filteredProps,
+      }
+
+      return WrappedComponent(finalProps)
+    }
+    return HOCComponent
+  }
+
+  return Enhanced
+}
+
+export default rocketStyleHOC

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+import usePseudoState from "./usePseudoState"
+import useTheme from "./useTheme"
+
+export { usePseudoState, useTheme }

package/src/hooks/usePseudoState.ts

@@ -0,0 +1,79 @@
+import { signal } from "@pyreon/reactivity"
+import type { PseudoActions, PseudoState } from "../types/pseudo"
+
+type UsePseudoState = ({
+  onMouseEnter,
+  onMouseLeave,
+  onMouseDown,
+  onMouseUp,
+  onFocus,
+  onBlur,
+}: Partial<PseudoActions>) => {
+  state: Pick<PseudoState, "hover" | "focus" | "pressed">
+  events: PseudoActions
+}
+
+/**
+ * Tracks hover, focus, and pressed pseudo-states via mouse and focus
+ * event handlers. Returns the current state flags and wrapped event
+ * callbacks that preserve any user-provided handlers.
+ *
+ * In Pyreon, uses signals instead of useState. Components are plain
+ * functions that run once — no useCallback/useMemo needed.
+ */
+const usePseudoState: UsePseudoState = ({
+  onBlur,
+  onFocus,
+  onMouseDown,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseUp,
+}) => {
+  const hover = signal(false)
+  const focus = signal(false)
+  const pressed = signal(false)
+
+  const state = {
+    get hover() {
+      return hover()
+    },
+    get focus() {
+      return focus()
+    },
+    get pressed() {
+      return pressed()
+    },
+  }
+
+  const events: PseudoActions = {
+    onMouseEnter: (e) => {
+      hover.set(true)
+      if (onMouseEnter) onMouseEnter(e)
+    },
+    onMouseLeave: (e) => {
+      hover.set(false)
+      pressed.set(false)
+      if (onMouseLeave) onMouseLeave(e)
+    },
+    onMouseDown: (e) => {
+      pressed.set(true)
+      if (onMouseDown) onMouseDown(e)
+    },
+    onMouseUp: (e) => {
+      pressed.set(false)
+      if (onMouseUp) onMouseUp(e)
+    },
+    onFocus: (e) => {
+      focus.set(true)
+      if (onFocus) onFocus(e)
+    },
+    onBlur: (e) => {
+      focus.set(false)
+      if (onBlur) onBlur(e)
+    },
+  }
+
+  return { state, events }
+}
+
+export default usePseudoState

package/src/hooks/useTheme.ts

@@ -0,0 +1,36 @@
+import { useContext } from "@pyreon/core"
+import { THEME_MODES_INVERSED } from "../constants"
+import { context } from "../context/context"
+import type { ThemeModeKeys } from "../types/theme"
+
+type Context = {
+  theme: Record<string, unknown>
+  mode: ThemeModeKeys
+  isDark: boolean
+  isLight: boolean
+}
+
+type UseThemeAttrs = ({ inversed }: { inversed?: boolean | undefined }) => Context
+
+/**
+ * Retrieves the current theme object and resolved mode from context.
+ * Supports mode inversion so nested components can flip between
+ * light and dark without a new provider.
+ *
+ * In Pyreon, components run once — no useMemo needed.
+ */
+const useThemeAttrs: UseThemeAttrs = ({ inversed }) => {
+  const {
+    theme = {},
+    mode: ctxMode = "light",
+    isDark: ctxDark,
+  } = useContext<Context>(context) || {}
+
+  const mode = inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode
+  const isDark = inversed ? !ctxDark : ctxDark
+  const isLight = !isDark
+
+  return { theme, mode, isDark, isLight }
+}
+
+export default useThemeAttrs

package/src/index.ts

@@ -0,0 +1,77 @@
+import type { TProvider } from "./context/context"
+import Provider, { context } from "./context/context"
+import type { Rocketstyle } from "./init"
+import rocketstyle from "./init"
+import type { IsRocketComponent } from "./isRocketComponent"
+import isRocketComponent from "./isRocketComponent"
+import type { AttrsCb } from "./types/attrs"
+import type {
+  ConfigAttrs,
+  ConsumerCb,
+  ConsumerCtxCBValue,
+  ConsumerCtxCb,
+  RocketComponentType,
+  RocketProviderState,
+} from "./types/config"
+import type { DefaultProps } from "./types/configuration"
+import type {
+  DimensionCallbackParam,
+  DimensionProps,
+  Dimensions,
+  DimensionValue,
+  ExtractDimensionProps,
+  ExtractDimensions,
+  TDKP,
+} from "./types/dimensions"
+import type { ComposeParam, GenericHoc } from "./types/hoc"
+import type { IRocketStyleComponent, RocketStyleComponent } from "./types/rocketstyle"
+import type { RocketStyleInterpolationProps, StylesCb, StylesDefault } from "./types/styles"
+import type {
+  ThemeCb,
+  ThemeDefault,
+  ThemeMode,
+  ThemeModeCallback,
+  ThemeModeKeys,
+} from "./types/theme"
+import type { ComponentFn, ElementType, ExtractProps, MergeTypes, TObj } from "./types/utils"
+
+export type {
+  AttrsCb,
+  ComponentFn,
+  ComposeParam,
+  ConfigAttrs,
+  ConsumerCb,
+  ConsumerCtxCBValue,
+  ConsumerCtxCb,
+  DefaultProps,
+  DimensionCallbackParam,
+  DimensionProps,
+  Dimensions,
+  DimensionValue,
+  ElementType,
+  ExtractDimensionProps,
+  ExtractDimensions,
+  ExtractProps,
+  GenericHoc,
+  IRocketStyleComponent,
+  IsRocketComponent,
+  MergeTypes,
+  RocketComponentType,
+  RocketProviderState,
+  RocketStyleComponent,
+  RocketStyleInterpolationProps,
+  Rocketstyle,
+  StylesCb,
+  StylesDefault,
+  TDKP,
+  ThemeCb,
+  ThemeDefault,
+  ThemeMode,
+  ThemeModeCallback,
+  ThemeModeKeys,
+  TObj,
+  TProvider,
+}
+
+export { context, isRocketComponent, Provider, rocketstyle }
+export default rocketstyle

package/src/init.ts

@@ -0,0 +1,93 @@
+import { isEmpty } from "@pyreon/ui-core"
+import { ALL_RESERVED_KEYS } from "./constants"
+import defaultDimensions from "./constants/defaultDimensions"
+import rocketComponent from "./rocketstyle"
+import type { DefaultDimensions, Dimensions } from "./types/dimensions"
+import type { RocketComponent } from "./types/rocketComponent"
+import type { ElementType } from "./types/utils"
+import {
+  getDimensionsValues,
+  getKeys,
+  getMultipleDimensions,
+  getTransformDimensions,
+} from "./utils/dimensions"
+
+export type Rocketstyle = <
+  const D extends Dimensions = DefaultDimensions,
+  UB extends boolean = true,
+>({
+  dimensions,
+  useBooleans,
+}?: {
+  dimensions?: D
+  useBooleans?: UB
+}) => <C extends ElementType>({
+  name,
+  component,
+}: {
+  name: string
+  component: C
+}) => ReturnType<RocketComponent<C, {}, {}, D, UB>>
+
+/**
+ * Factory initializer for rocketstyle components. Validates dimension
+ * configurations against reserved keys, then delegates to the core
+ * `rocketComponent` builder with pre-computed dimension metadata.
+ */
+type InitErrors = Partial<{
+  component: string
+  name: string
+  dimensions: string
+  invalidDimensions: string
+}>
+
+const validateInit = (name: string, component: unknown, dimensions: Dimensions) => {
+  const errors: InitErrors = {}
+
+  if (!component) {
+    errors.component = "Parameter `component` is missing in params!"
+  }
+
+  if (!name) {
+    errors.name = "Parameter `name` is missing in params!"
+  }
+
+  if (isEmpty(dimensions)) {
+    errors.dimensions = "Parameter `dimensions` is missing in params!"
+  } else {
+    const definedDimensions = getKeys(dimensions)
+    const invalidDimension = ALL_RESERVED_KEYS.some((item) =>
+      definedDimensions.some((d) => d === item),
+    )
+
+    if (invalidDimension) {
+      errors.invalidDimensions = `Some of your \`dimensions\` is invalid and uses reserved static keys which are
+          ${defaultDimensions.toString()}`
+    }
+  }
+
+  if (!isEmpty(errors)) {
+    throw Error(JSON.stringify(errors))
+  }
+}
+
+const rocketstyle = (({ dimensions = defaultDimensions, useBooleans = true } = {}) =>
+  ({ name, component }: { name: string; component: any }) => {
+    if (process.env.NODE_ENV !== "production") {
+      validateInit(name, component, dimensions)
+    }
+
+    return (rocketComponent as any)({
+      name,
+      component,
+      useBooleans,
+      dimensions,
+      dimensionKeys: getKeys(dimensions),
+      dimensionValues: getDimensionsValues(dimensions),
+      multiKeys: getMultipleDimensions(dimensions),
+      transformKeys: getTransformDimensions(dimensions),
+      styled: true,
+    })
+  }) as unknown as Rocketstyle
+
+export default rocketstyle

package/src/isRocketComponent.ts

@@ -0,0 +1,16 @@
+export type IsRocketComponent = <T>(component: T) => boolean
+
+/** Runtime type guard — checks if a component was created by `rocketstyle()`. */
+const isRocketComponent: IsRocketComponent = (component) => {
+  if (
+    component &&
+    (typeof component === "object" || typeof component === "function") &&
+    Object.hasOwn(component as object, "IS_ROCKETSTYLE")
+  ) {
+    return true
+  }
+
+  return false
+}
+
+export default isRocketComponent