@pyreon/rocketstyle 0.11.0 → 0.11.2

package/src/__tests__/e2e-styler.test.ts

@@ -0,0 +1,291 @@
+/**
+ * End-to-end test: rocketstyle theme computation pipeline.
+ *
+ * Tests that rocketstyle components correctly compute theme values
+ * through the full chain: base theme → dimension themes → transform modifiers.
+ *
+ * Unlike the React version which tested CSS injection in the DOM,
+ * this Pyreon version tests the computed $rocketstyle output directly.
+ */
+import { popContext, pushContext } from "@pyreon/core"
+import { config } from "@pyreon/ui-core"
+import { context } from "../context/context"
+import rocketstyle from "../init"
+
+// Mock styled that passes through the component unchanged
+const mockStyled = (component: any) => {
+  const taggedTemplate = (_strings: any, ..._args: any[]) => component
+  return taggedTemplate
+}
+
+const mockCss = (_strings: any, ..._args: any[]) => ""
+
+const originalStyled = config.styled
+const originalCss = config.css
+
+beforeAll(() => {
+  config.init({
+    css: mockCss as any,
+    styled: mockStyled as any,
+    component: "div",
+    textComponent: "span",
+  })
+})
+
+afterAll(() => {
+  config.styled = originalStyled
+  config.css = originalCss
+})
+
+/** Component that captures $rocketstyle for inspection */
+const ThemeCapture: any = ({ $rocketstyle, $rocketstate, ...rest }: any) => ({
+  type: "div",
+  props: rest,
+  children: [],
+  key: null,
+  $rocketstyle,
+  $rocketstate,
+})
+ThemeCapture.displayName = "ThemeCapture"
+
+/** Helper to render within theme context and return $rocketstyle */
+const getComputedTheme = (Component: any, props: Record<string, any> = {}) => {
+  pushContext(
+    new Map([
+      [
+        context.id,
+        {
+          theme: { rootSize: 16 },
+          mode: "light",
+          isDark: false,
+          isLight: true,
+        },
+      ],
+    ]),
+  )
+  try {
+    const vnode = Component(props) as any
+    return vnode.$rocketstyle
+  } finally {
+    popContext()
+  }
+}
+
+describe("e2e: rocketstyle theme computation", () => {
+  it("base theme values are passed through", () => {
+    const Comp: any = rocketstyle()({
+      name: "BaseComp",
+      component: ThemeCapture,
+    }).theme({
+      backgroundColor: "#0070f3",
+      color: "#fff",
+    })
+
+    const theme = getComputedTheme(Comp)
+    expect(theme.backgroundColor).toBe("#0070f3")
+    expect(theme.color).toBe("#fff")
+  })
+
+  it("state dimension overrides base theme values", () => {
+    const Comp: any = rocketstyle()({
+      name: "StateComp",
+      component: ThemeCapture,
+    })
+      .theme({
+        backgroundColor: "#0070f3",
+        color: "#fff",
+      })
+      .states({
+        danger: {
+          backgroundColor: "#dc3545",
+          color: "#fff",
+        },
+      })
+
+    const theme = getComputedTheme(Comp, { state: "danger" })
+    expect(theme.backgroundColor).toBe("#dc3545")
+    expect(theme.color).toBe("#fff")
+  })
+
+  it("modifier transform derives styles from accumulated state theme", () => {
+    const Comp: any = rocketstyle()({
+      name: "ModifierComp",
+      component: ThemeCapture,
+    })
+      .theme({
+        backgroundColor: "#0070f3",
+        color: "#fff",
+      })
+      .states({
+        danger: {
+          backgroundColor: "#dc3545",
+          color: "#fff",
+        },
+      })
+      .modifiers({
+        outlined: (accTheme: any) => ({
+          color: accTheme.backgroundColor,
+          backgroundColor: "transparent",
+        }),
+      })
+
+    // danger state + outlined modifier
+    const theme = getComputedTheme(Comp, {
+      state: "danger",
+      modifier: "outlined",
+    })
+    // outlined should flip: color becomes the danger backgroundColor
+    expect(theme.color).toBe("#dc3545")
+    expect(theme.backgroundColor).toBe("transparent")
+  })
+
+  it("modifier without active state uses base theme only", () => {
+    const Comp: any = rocketstyle()({
+      name: "ModifierBaseComp",
+      component: ThemeCapture,
+    })
+      .theme({
+        backgroundColor: "#0070f3",
+        color: "#fff",
+      })
+      .modifiers({
+        outlined: (accTheme: any) => ({
+          color: accTheme.backgroundColor,
+          backgroundColor: "transparent",
+        }),
+      })
+
+    // just outlined modifier, no state — derive from base theme
+    const theme = getComputedTheme(Comp, { modifier: "outlined" })
+    expect(theme.color).toBe("#0070f3")
+    expect(theme.backgroundColor).toBe("transparent")
+  })
+
+  it("variant dimension values are applied correctly", () => {
+    const Comp: any = rocketstyle()({
+      name: "VariantComp",
+      component: ThemeCapture,
+    })
+      .theme({
+        backgroundColor: "#FFFFFF",
+        borderRadius: 8,
+      })
+      .variants({
+        box: {
+          height: 64,
+          padding: 8,
+          backgroundColor: "transparent",
+        },
+        circle: {
+          width: 72,
+          height: 72,
+          padding: 4,
+          backgroundColor: "#F0F0F0",
+          borderRadius: 180,
+        },
+      })
+
+    const theme = getComputedTheme(Comp, { variant: "circle" })
+    expect(theme.width).toBe(72)
+    expect(theme.height).toBe(72)
+    expect(theme.backgroundColor).toBe("#F0F0F0")
+    expect(theme.borderRadius).toBe(180)
+  })
+
+  it("variant box values override base theme", () => {
+    const Comp: any = rocketstyle()({
+      name: "VariantBoxComp",
+      component: ThemeCapture,
+    })
+      .theme({
+        backgroundColor: "#FFFFFF",
+        borderRadius: 8,
+      })
+      .variants({
+        box: {
+          height: 64,
+          padding: 8,
+          backgroundColor: "transparent",
+        },
+      })
+
+    const theme = getComputedTheme(Comp, { variant: "box" })
+    expect(theme.backgroundColor).toBe("transparent")
+    expect(theme.borderRadius).toBe(8) // inherited from base
+    expect(theme.height).toBe(64)
+    expect(theme.padding).toBe(8)
+  })
+
+  it("size dimension values are applied", () => {
+    const Comp: any = rocketstyle()({
+      name: "SizeComp",
+      component: ThemeCapture,
+    })
+      .theme({ fontSize: 14 })
+      .sizes({
+        small: { fontSize: 12, padding: 4 },
+        large: { fontSize: 18, padding: 8 },
+      })
+
+    const theme = getComputedTheme(Comp, { size: "large" })
+    expect(theme.fontSize).toBe(18)
+    expect(theme.padding).toBe(8)
+  })
+
+  it("multiple dimensions combine", () => {
+    const Comp: any = rocketstyle()({
+      name: "MultiDimComp",
+      component: ThemeCapture,
+    })
+      .theme({ color: "black" })
+      .states({ primary: { color: "blue" } })
+      .sizes({ large: { fontSize: 18 } })
+
+    const theme = getComputedTheme(Comp, {
+      state: "primary",
+      size: "large",
+    })
+    expect(theme.color).toBe("blue")
+    expect(theme.fontSize).toBe(18)
+  })
+
+  it("multiple modifier transforms compose sequentially", () => {
+    const Comp: any = rocketstyle()({
+      name: "MultiModComp",
+      component: ThemeCapture,
+    })
+      .theme({ backgroundColor: "blue", color: "white" })
+      .modifiers({
+        outlined: (accTheme: any) => ({
+          color: accTheme.backgroundColor,
+          backgroundColor: "transparent",
+        }),
+        rounded: () => ({ borderRadius: "999px" }),
+      })
+
+    const theme = getComputedTheme(Comp, {
+      modifier: ["outlined", "rounded"],
+    })
+    expect(theme.color).toBe("blue")
+    expect(theme.backgroundColor).toBe("transparent")
+    expect(theme.borderRadius).toBe("999px")
+  })
+
+  it("later transform sees earlier transform results", () => {
+    const Comp: any = rocketstyle()({
+      name: "ChainedModComp",
+      component: ThemeCapture,
+    })
+      .theme({})
+      .modifiers({
+        first: () => ({ step: "one" }),
+        second: (accTheme: any) => ({ sawStep: accTheme.step }),
+      })
+
+    const theme = getComputedTheme(Comp, {
+      modifier: ["first", "second"],
+    })
+    expect(theme.step).toBe("one")
+    expect(theme.sawStep).toBe("one")
+  })
+})

package/src/__tests__/hooks.test.ts

@@ -0,0 +1,207 @@
+import { popContext, pushContext } from "@pyreon/core"
+import { context } from "../context/context"
+import { localContext, useLocalContext } from "../context/localContext"
+import usePseudoState from "../hooks/usePseudoState"
+import useThemeAttrs from "../hooks/useTheme"
+
+describe("usePseudoState", () => {
+  it("returns initial state with all false", () => {
+    const { state } = usePseudoState({})
+    expect(state.hover).toBe(false)
+    expect(state.focus).toBe(false)
+    expect(state.pressed).toBe(false)
+  })
+
+  it("returns event handlers", () => {
+    const { events } = usePseudoState({})
+    expect(typeof events.onMouseEnter).toBe("function")
+    expect(typeof events.onMouseLeave).toBe("function")
+    expect(typeof events.onMouseDown).toBe("function")
+    expect(typeof events.onMouseUp).toBe("function")
+    expect(typeof events.onFocus).toBe("function")
+    expect(typeof events.onBlur).toBe("function")
+  })
+
+  it("sets hover on mouseEnter", () => {
+    const { state, events } = usePseudoState({})
+    events.onMouseEnter({} as any)
+    expect(state.hover).toBe(true)
+  })
+
+  it("clears hover and pressed on mouseLeave", () => {
+    const { state, events } = usePseudoState({})
+    events.onMouseEnter({} as any)
+    events.onMouseDown({} as any)
+    expect(state.hover).toBe(true)
+    expect(state.pressed).toBe(true)
+
+    events.onMouseLeave({} as any)
+    expect(state.hover).toBe(false)
+    expect(state.pressed).toBe(false)
+  })
+
+  it("sets pressed on mouseDown, clears on mouseUp", () => {
+    const { state, events } = usePseudoState({})
+    events.onMouseDown({} as any)
+    expect(state.pressed).toBe(true)
+
+    events.onMouseUp({} as any)
+    expect(state.pressed).toBe(false)
+  })
+
+  it("sets focus on focus, clears on blur", () => {
+    const { state, events } = usePseudoState({})
+    events.onFocus({} as any)
+    expect(state.focus).toBe(true)
+
+    events.onBlur({} as any)
+    expect(state.focus).toBe(false)
+  })
+
+  it("calls user-provided event handlers", () => {
+    const onMouseEnter = vi.fn()
+    const onMouseLeave = vi.fn()
+    const onMouseDown = vi.fn()
+    const onMouseUp = vi.fn()
+    const onFocus = vi.fn()
+    const onBlur = vi.fn()
+
+    const { events } = usePseudoState({
+      onMouseEnter,
+      onMouseLeave,
+      onMouseDown,
+      onMouseUp,
+      onFocus,
+      onBlur,
+    })
+
+    const mockEvent = {} as any
+    events.onMouseEnter(mockEvent)
+    events.onMouseLeave(mockEvent)
+    events.onMouseDown(mockEvent)
+    events.onMouseUp(mockEvent)
+    events.onFocus(mockEvent)
+    events.onBlur(mockEvent)
+
+    expect(onMouseEnter).toHaveBeenCalledWith(mockEvent)
+    expect(onMouseLeave).toHaveBeenCalledWith(mockEvent)
+    expect(onMouseDown).toHaveBeenCalledWith(mockEvent)
+    expect(onMouseUp).toHaveBeenCalledWith(mockEvent)
+    expect(onFocus).toHaveBeenCalledWith(mockEvent)
+    expect(onBlur).toHaveBeenCalledWith(mockEvent)
+  })
+})
+
+describe("useThemeAttrs", () => {
+  let pushed = false
+
+  afterEach(() => {
+    if (pushed) {
+      popContext()
+      pushed = false
+    }
+  })
+
+  it("returns default values when no context", () => {
+    const result = useThemeAttrs({ inversed: false })
+    expect(result.theme).toEqual({})
+    expect(result.mode).toBe("light")
+    expect(result.isLight).toBe(true)
+  })
+
+  it("reads theme from context", () => {
+    pushContext(
+      new Map([
+        [
+          context.id,
+          {
+            theme: { rootSize: 16 },
+            mode: "light",
+            isDark: false,
+            isLight: true,
+          },
+        ],
+      ]),
+    )
+    pushed = true
+
+    const result = useThemeAttrs({ inversed: false })
+    expect(result.theme).toEqual({ rootSize: 16 })
+    expect(result.mode).toBe("light")
+  })
+
+  it("inverts mode when inversed is true", () => {
+    pushContext(
+      new Map([
+        [
+          context.id,
+          {
+            theme: { rootSize: 16 },
+            mode: "light",
+            isDark: false,
+            isLight: true,
+          },
+        ],
+      ]),
+    )
+    pushed = true
+
+    const result = useThemeAttrs({ inversed: true })
+    expect(result.mode).toBe("dark")
+    expect(result.isDark).toBe(true)
+    expect(result.isLight).toBe(false)
+  })
+
+  it("inverts dark to light", () => {
+    pushContext(
+      new Map([
+        [
+          context.id,
+          {
+            theme: {},
+            mode: "dark",
+            isDark: true,
+            isLight: false,
+          },
+        ],
+      ]),
+    )
+    pushed = true
+
+    const result = useThemeAttrs({ inversed: true })
+    expect(result.mode).toBe("light")
+    expect(result.isDark).toBe(false)
+    expect(result.isLight).toBe(true)
+  })
+})
+
+describe("useLocalContext", () => {
+  let pushed = false
+
+  afterEach(() => {
+    if (pushed) {
+      popContext()
+      pushed = false
+    }
+  })
+
+  it("returns default pseudo when no consumer", () => {
+    const result = useLocalContext(null)
+    expect(result).toEqual({ pseudo: {} })
+  })
+
+  it("returns default pseudo when consumer is undefined", () => {
+    const result = useLocalContext(undefined)
+    expect(result).toEqual({ pseudo: {} })
+  })
+
+  it("calls consumer with getter function", () => {
+    pushContext(new Map([[localContext.id, { pseudo: { hover: true } }]]))
+    pushed = true
+
+    const consumer = (getter: any) => getter((ctx: any) => ({ myPseudo: ctx.pseudo }))
+
+    const result = useLocalContext(consumer)
+    expect(result.myPseudo).toEqual({ hover: true })
+  })
+})

package/src/__tests__/isRocketComponent.test.ts

@@ -0,0 +1,48 @@
+import isRocketComponent from "../isRocketComponent"
+
+describe("isRocketComponent", () => {
+  it("returns true for object with IS_ROCKETSTYLE property", () => {
+    const component = { IS_ROCKETSTYLE: true }
+    expect(isRocketComponent(component)).toBe(true)
+  })
+
+  it("returns false for plain object without IS_ROCKETSTYLE", () => {
+    expect(isRocketComponent({})).toBe(false)
+  })
+
+  it("returns false for null", () => {
+    expect(isRocketComponent(null)).toBe(false)
+  })
+
+  it("returns false for undefined", () => {
+    expect(isRocketComponent(undefined)).toBe(false)
+  })
+
+  it("returns false for primitives", () => {
+    expect(isRocketComponent("string")).toBe(false)
+    expect(isRocketComponent(42)).toBe(false)
+    expect(isRocketComponent(true)).toBe(false)
+  })
+
+  it("returns false for plain functions without IS_ROCKETSTYLE", () => {
+    expect(
+      isRocketComponent(() => {
+        /* no-op */
+      }),
+    ).toBe(false)
+  })
+
+  it("returns true for functions with IS_ROCKETSTYLE", () => {
+    const fn = () => {
+      /* no-op */
+    }
+    ;(fn as any).IS_ROCKETSTYLE = true
+    expect(isRocketComponent(fn)).toBe(true)
+  })
+
+  it("returns true even if IS_ROCKETSTYLE is falsy", () => {
+    // hasOwnProperty check only, doesn't check truthiness
+    const component = { IS_ROCKETSTYLE: false }
+    expect(isRocketComponent(component)).toBe(true)
+  })
+})