@pyreon/coolgrid 0.11.0 → 0.11.2

package/src/__tests__/Container.styled.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest"
+import { getContainerWidth } from "../Container/utils"
+
+describe("Container/utils – getContainerWidth", () => {
+  it("returns width from props when present", () => {
+    const result = getContainerWidth({ width: 960 }, {})
+    expect(result).toBe(960)
+  })
+
+  it("prefers props.width over theme.grid.container", () => {
+    const result = getContainerWidth(
+      { width: 800 },
+      { grid: { container: { xs: "100%", md: 720 } } },
+    )
+    expect(result).toBe(800)
+  })
+
+  it("falls back to theme.grid.container", () => {
+    const result = getContainerWidth({}, { grid: { container: { xs: "100%", md: 720 } } })
+    expect(result).toEqual({ xs: "100%", md: 720 })
+  })
+
+  it("falls back to theme.coolgrid.container when grid is missing", () => {
+    const result = getContainerWidth({}, { coolgrid: { container: { xs: "100%", lg: 960 } } })
+    expect(result).toEqual({ xs: "100%", lg: 960 })
+  })
+
+  it("returns undefined/falsy when nothing matches", () => {
+    expect(getContainerWidth({}, {})).toBeFalsy()
+  })
+
+  it("returns undefined/falsy when both are undefined", () => {
+    expect(getContainerWidth(undefined, undefined)).toBeFalsy()
+  })
+
+  it("returns undefined/falsy when both are empty objects", () => {
+    expect(getContainerWidth({}, {})).toBeFalsy()
+  })
+
+  it("returns string width from props", () => {
+    const result = getContainerWidth({ width: "100%" }, {})
+    expect(result).toBe("100%")
+  })
+
+  it("returns responsive object from props", () => {
+    const result = getContainerWidth({ width: { xs: "100%", md: 720, lg: 960 } }, {})
+    expect(result).toEqual({ xs: "100%", md: 720, lg: 960 })
+  })
+})

package/src/__tests__/Container.test.ts

@@ -0,0 +1,147 @@
+import type { VNode } from "@pyreon/core"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+const mockProvide = vi.fn()
+const mockUseContext = vi.fn()
+
+vi.mock("@pyreon/core", async (importOriginal) => {
+  const original = await importOriginal<typeof import("@pyreon/core")>()
+  return {
+    ...original,
+    provide: (...args: any[]) => {
+      mockProvide(...args)
+    },
+    useContext: (ctx: any) => {
+      if (mockUseContext.mock.calls.length > 0) {
+        return mockUseContext(ctx)
+      }
+      return original.useContext(ctx)
+    },
+  }
+})
+
+const asVNode = (v: unknown) => v as VNode
+
+describe("Container", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // unistyle context returns empty theme
+    mockUseContext.mockReturnValue({ theme: {} })
+  })
+
+  it("returns a VNode", async () => {
+    const Container = (await import("../Container")).default
+    const result = asVNode(Container({ children: "test" }))
+    expect(result).toBeDefined()
+    expect(result.type).toBeDefined()
+  })
+
+  it("has correct displayName", async () => {
+    const Container = (await import("../Container")).default
+    expect(Container.displayName).toBe("@pyreon/coolgrid/Container")
+  })
+
+  it("has correct pkgName", async () => {
+    const Container = (await import("../Container")).default
+    expect(Container.pkgName).toBe("@pyreon/coolgrid")
+  })
+
+  it("has PYREON__COMPONENT static", async () => {
+    const Container = (await import("../Container")).default
+    expect(Container.PYREON__COMPONENT).toBe("@pyreon/coolgrid/Container")
+  })
+
+  it("passes $coolgrid prop with width and extraStyles", async () => {
+    const Container = (await import("../Container")).default
+    const result = asVNode(Container({ children: "test" }))
+    expect(result.props).toHaveProperty("$coolgrid")
+    expect(result.props.$coolgrid).toHaveProperty("width")
+  })
+
+  it("provides ContainerContext", async () => {
+    const Container = (await import("../Container")).default
+    Container({ columns: 12, gap: 16, children: "test" })
+    expect(mockProvide).toHaveBeenCalledTimes(1)
+  })
+
+  it("provides context with grid values", async () => {
+    const Container = (await import("../Container")).default
+    Container({ columns: 24, gap: 16, gutter: 8, children: "test" })
+    const config = mockProvide.mock.calls[0]?.[1] as Record<string, unknown>
+    expect(config.columns).toBe(24)
+    expect(config.gap).toBe(16)
+    expect(config.gutter).toBe(8)
+  })
+
+  it("uses width prop to override containerWidth", async () => {
+    const Container = (await import("../Container")).default
+    const result = asVNode(Container({ width: 960, children: "test" }))
+    expect((result.props.$coolgrid as Record<string, unknown>).width).toBe(960)
+  })
+
+  it("accepts width as function", async () => {
+    const Container = (await import("../Container")).default
+    const widthFn = (_containerWidth: any) => 800
+    const result = asVNode(Container({ width: widthFn as any, children: "test" }))
+    expect((result.props.$coolgrid as Record<string, unknown>).width).toBe(800)
+  })
+
+  it("strips context keys from DOM props", async () => {
+    const Container = (await import("../Container")).default
+    const result = asVNode(
+      Container({
+        columns: 12,
+        gap: 16,
+        "data-testid": "container",
+        children: "test",
+      }),
+    )
+    expect(result.props["data-testid"]).toBe("container")
+  })
+
+  it("passes css as extraStyles in $coolgrid", async () => {
+    const Container = (await import("../Container")).default
+    const customCss = "background: red;"
+    const result = asVNode(Container({ css: customCss, children: "test" }))
+    expect((result.props.$coolgrid as Record<string, unknown>).extraStyles).toBe(customCss)
+  })
+
+  it("provides context with all grid keys", async () => {
+    const Container = (await import("../Container")).default
+    Container({
+      columns: 12,
+      gap: 16,
+      gutter: 8,
+      padding: 4,
+      size: 6,
+      contentAlignX: "center",
+      children: "test",
+    })
+    const config = mockProvide.mock.calls[0]?.[1] as Record<string, unknown>
+    expect(config).toHaveProperty("columns")
+    expect(config).toHaveProperty("gap")
+    expect(config).toHaveProperty("gutter")
+    expect(config).toHaveProperty("padding")
+    expect(config).toHaveProperty("size")
+    expect(config).toHaveProperty("contentAlignX")
+  })
+
+  it("renders with data-coolgrid attribute in dev mode", async () => {
+    const Container = (await import("../Container")).default
+    const result = asVNode(Container({ children: "test" }))
+    expect(result.props["data-coolgrid"]).toBe("container")
+  })
+
+  it("passes component prop as 'as'", async () => {
+    const Container = (await import("../Container")).default
+    const customComponent = (() => null) as any
+    const result = asVNode(Container({ component: customComponent, children: "test" }))
+    expect(result.props.as).toBe(customComponent)
+  })
+
+  it("renders children in VNode", async () => {
+    const Container = (await import("../Container")).default
+    const result = asVNode(Container({ children: "hello world" }))
+    expect(result.children).toBeDefined()
+  })
+})

package/src/__tests__/Row.test.ts

@@ -0,0 +1,135 @@
+import type { VNode } from "@pyreon/core"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+const mockProvide = vi.fn()
+const mockUseContext = vi.fn()
+
+vi.mock("@pyreon/core", async (importOriginal) => {
+  const original = await importOriginal<typeof import("@pyreon/core")>()
+  return {
+    ...original,
+    provide: (...args: any[]) => {
+      mockProvide(...args)
+    },
+    useContext: (ctx: any) => {
+      if (mockUseContext.mock.calls.length > 0) {
+        return mockUseContext(ctx)
+      }
+      return original.useContext(ctx)
+    },
+  }
+})
+
+const asVNode = (v: unknown) => v as VNode
+
+describe("Row", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // unistyle context returns empty theme, container context returns empty
+    mockUseContext.mockReturnValue({})
+  })
+
+  it("returns a VNode", async () => {
+    const Row = (await import("../Row")).default
+    const result = asVNode(Row({ children: "test" }))
+    expect(result).toBeDefined()
+    expect(result.type).toBeDefined()
+  })
+
+  it("has correct displayName", async () => {
+    const Row = (await import("../Row")).default
+    expect(Row.displayName).toBe("@pyreon/coolgrid/Row")
+  })
+
+  it("has correct pkgName", async () => {
+    const Row = (await import("../Row")).default
+    expect(Row.pkgName).toBe("@pyreon/coolgrid")
+  })
+
+  it("has PYREON__COMPONENT static", async () => {
+    const Row = (await import("../Row")).default
+    expect(Row.PYREON__COMPONENT).toBe("@pyreon/coolgrid/Row")
+  })
+
+  it("passes $coolgrid prop with row values", async () => {
+    const Row = (await import("../Row")).default
+    const result = asVNode(Row({ gap: 16, children: "test" }))
+    expect(result.props).toHaveProperty("$coolgrid")
+    expect(result.props.$coolgrid).toHaveProperty("gap")
+  })
+
+  it("provides RowContext", async () => {
+    const Row = (await import("../Row")).default
+    Row({ gap: 16, columns: 12, children: "test" })
+    expect(mockProvide).toHaveBeenCalledTimes(1)
+  })
+
+  it("provides context with grid values", async () => {
+    const Row = (await import("../Row")).default
+    Row({ columns: 24, gap: 16, gutter: 8, children: "test" })
+    const config = mockProvide.mock.calls[0]?.[1] as Record<string, unknown>
+    expect(config.columns).toBe(24)
+    expect(config.gap).toBe(16)
+    expect(config.gutter).toBe(8)
+  })
+
+  it("passes contentAlignX to $coolgrid", async () => {
+    const Row = (await import("../Row")).default
+    const result = asVNode(Row({ contentAlignX: "center", children: "test" }))
+    expect((result.props.$coolgrid as Record<string, unknown>).contentAlignX).toBe("center")
+  })
+
+  it("strips context keys from DOM props", async () => {
+    const Row = (await import("../Row")).default
+    const result = asVNode(
+      Row({
+        columns: 12,
+        gap: 16,
+        "data-testid": "row",
+        children: "test",
+      }),
+    )
+    expect(result.props["data-testid"]).toBe("row")
+  })
+
+  it("passes css as extraStyles in $coolgrid when provided", async () => {
+    const Row = (await import("../Row")).default
+    const customCss = "background: blue;"
+    const result = asVNode(Row({ css: customCss, children: "test" }))
+    expect((result.props.$coolgrid as Record<string, unknown>).extraStyles).toBe(customCss)
+  })
+
+  it("passes gutter in $coolgrid", async () => {
+    const Row = (await import("../Row")).default
+    const result = asVNode(Row({ gutter: 24, children: "test" }))
+    expect((result.props.$coolgrid as Record<string, unknown>).gutter).toBe(24)
+  })
+
+  it("provides context including colCss and colComponent", async () => {
+    const Row = (await import("../Row")).default
+    const colComp = (() => null) as any
+    Row({ colCss: "color: red;", colComponent: colComp, children: "test" })
+    const config = mockProvide.mock.calls[0]?.[1] as Record<string, unknown>
+    expect(config.colCss).toBe("color: red;")
+    expect(config.colComponent).toBe(colComp)
+  })
+
+  it("renders with data-coolgrid attribute in dev mode", async () => {
+    const Row = (await import("../Row")).default
+    const result = asVNode(Row({ children: "test" }))
+    expect(result.props["data-coolgrid"]).toBe("row")
+  })
+
+  it("passes component prop as 'as'", async () => {
+    const Row = (await import("../Row")).default
+    const customComponent = (() => null) as any
+    const result = asVNode(Row({ component: customComponent, children: "test" }))
+    expect(result.props.as).toBe(customComponent)
+  })
+
+  it("renders children in VNode", async () => {
+    const Row = (await import("../Row")).default
+    const result = asVNode(Row({ children: "hello" }))
+    expect(result.children).toBeDefined()
+  })
+})

package/src/__tests__/config.test.ts

@@ -0,0 +1,120 @@
+import { describe, expect, it } from "vitest"
+
+describe("config", () => {
+  describe("theme defaults", () => {
+    it("has correct default theme", async () => {
+      const theme = (await import("../theme")).default
+      expect(theme).toEqual({
+        rootSize: 16,
+        breakpoints: {
+          xs: 0,
+          sm: 576,
+          md: 768,
+          lg: 992,
+          xl: 1200,
+        },
+        grid: {
+          columns: 12,
+          container: {
+            xs: "100%",
+            sm: 540,
+            md: 720,
+            lg: 960,
+            xl: 1140,
+          },
+        },
+      })
+    })
+  })
+
+  describe("defaultBreakpoints", () => {
+    it("has all standard breakpoints", async () => {
+      const { defaultBreakpoints } = await import("../theme")
+      expect(defaultBreakpoints).toEqual({
+        xs: 0,
+        sm: 576,
+        md: 768,
+        lg: 992,
+        xl: 1200,
+      })
+    })
+
+    it("breakpoints are in ascending order", async () => {
+      const { defaultBreakpoints } = await import("../theme")
+      const values = Object.values(defaultBreakpoints)
+      for (let i = 1; i < values.length; i++) {
+        expect(values[i]).toBeGreaterThan(values[i - 1] as number)
+      }
+    })
+  })
+
+  describe("defaultContainerWidths", () => {
+    it("has widths for all breakpoints", async () => {
+      const { defaultContainerWidths } = await import("../theme")
+      expect(defaultContainerWidths).toEqual({
+        xs: "100%",
+        sm: 540,
+        md: 720,
+        lg: 960,
+        xl: 1140,
+      })
+    })
+
+    it("xs is percentage, others are numbers", async () => {
+      const { defaultContainerWidths } = await import("../theme")
+      expect(typeof defaultContainerWidths.xs).toBe("string")
+      expect(typeof defaultContainerWidths.sm).toBe("number")
+      expect(typeof defaultContainerWidths.md).toBe("number")
+      expect(typeof defaultContainerWidths.lg).toBe("number")
+      expect(typeof defaultContainerWidths.xl).toBe("number")
+    })
+
+    it("numeric widths are in ascending order", async () => {
+      const { defaultContainerWidths } = await import("../theme")
+      const numericWidths = [
+        defaultContainerWidths.sm,
+        defaultContainerWidths.md,
+        defaultContainerWidths.lg,
+        defaultContainerWidths.xl,
+      ] as number[]
+      for (let i = 1; i < numericWidths.length; i++) {
+        expect(numericWidths[i]).toBeGreaterThan(numericWidths[i - 1] as number)
+      }
+    })
+  })
+
+  describe("ContainerContext", () => {
+    it("is created via createContext with an id", async () => {
+      const { ContainerContext } = await import("../context")
+      expect(ContainerContext).toHaveProperty("id")
+    })
+  })
+
+  describe("RowContext", () => {
+    it("is created via createContext with an id", async () => {
+      const { RowContext } = await import("../context")
+      expect(RowContext).toHaveProperty("id")
+    })
+  })
+
+  describe("constants", () => {
+    it("has correct PKG_NAME", async () => {
+      const { PKG_NAME } = await import("../constants")
+      expect(PKG_NAME).toBe("@pyreon/coolgrid")
+    })
+
+    it("has CONTEXT_KEYS", async () => {
+      const { CONTEXT_KEYS } = await import("../constants")
+      expect(CONTEXT_KEYS).toContain("columns")
+      expect(CONTEXT_KEYS).toContain("size")
+      expect(CONTEXT_KEYS).toContain("gap")
+      expect(CONTEXT_KEYS).toContain("padding")
+      expect(CONTEXT_KEYS).toContain("gutter")
+      expect(CONTEXT_KEYS).toContain("colCss")
+      expect(CONTEXT_KEYS).toContain("colComponent")
+      expect(CONTEXT_KEYS).toContain("rowCss")
+      expect(CONTEXT_KEYS).toContain("rowComponent")
+      expect(CONTEXT_KEYS).toContain("contentAlignX")
+    })
+  })
+})

package/src/__tests__/contextCascading.test.ts

@@ -0,0 +1,114 @@
+import type { VNode } from "@pyreon/core"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+const mockProvide = vi.fn()
+const mockUseContext = vi.fn()
+
+vi.mock("@pyreon/core", async (importOriginal) => {
+  const original = await importOriginal<typeof import("@pyreon/core")>()
+  return {
+    ...original,
+    provide: (...args: any[]) => {
+      mockProvide(...args)
+    },
+    useContext: (...args: any[]) => {
+      return mockUseContext(...args)
+    },
+  }
+})
+
+const asVNode = (v: unknown) => v as VNode
+
+describe("Context cascading: Container -> Row -> Col", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Default: unistyle theme context returns empty theme
+    mockUseContext.mockReturnValue({ theme: {} })
+  })
+
+  it("Container provides context with grid config", async () => {
+    const Container = (await import("../Container")).default
+    // Container calls useContext once (for unistyle theme)
+    Container({ columns: 12, gap: 16, gutter: 8, padding: 4, children: "test" })
+
+    expect(mockProvide).toHaveBeenCalledTimes(1)
+    const config = mockProvide.mock.calls[0]?.[1] as Record<string, unknown>
+
+    expect(config.columns).toBe(12)
+    expect(config.gap).toBe(16)
+    expect(config.gutter).toBe(8)
+    expect(config.padding).toBe(4)
+  })
+
+  it("Row reads Container context and provides its own", async () => {
+    const Row = (await import("../Row")).default
+
+    // Row calls useContext twice:
+    // 1st: ContainerContext (grid config from parent)
+    // 2nd: unistyle context (theme) inside useGridContext
+    mockUseContext
+      .mockReturnValueOnce({
+        columns: 12,
+        gap: 16,
+        gutter: 8,
+        padding: 4,
+      })
+      .mockReturnValueOnce({ theme: {} })
+
+    Row({ children: "test" })
+
+    const rowConfig = mockProvide.mock.calls[0]?.[1] as Record<string, unknown>
+
+    expect(rowConfig.columns).toBe(12)
+    expect(rowConfig.gap).toBe(16)
+    expect(rowConfig.gutter).toBe(8)
+    expect(rowConfig.padding).toBe(4)
+  })
+
+  it("Row can override Container values", async () => {
+    const Row = (await import("../Row")).default
+
+    // 1st call: ContainerContext, 2nd call: unistyle theme
+    mockUseContext.mockReturnValueOnce({ columns: 12, gap: 8 }).mockReturnValueOnce({ theme: {} })
+
+    Row({ columns: 24, gap: 32, children: "test" })
+
+    const rowConfig = mockProvide.mock.calls[0]?.[1] as Record<string, unknown>
+
+    expect(rowConfig.columns).toBe(24)
+    expect(rowConfig.gap).toBe(32)
+  })
+
+  it("Col reads Row context and passes $coolgrid", async () => {
+    const Col = (await import("../Col")).default
+
+    // Col calls useContext twice:
+    // 1st: RowContext, 2nd: unistyle theme inside useGridContext
+    mockUseContext.mockReturnValueOnce({ columns: 12, gap: 20 }).mockReturnValueOnce({ theme: {} })
+
+    const result = asVNode(Col({ size: 4, children: "test" }))
+    expect(result.props.$coolgrid).toBeDefined()
+    expect((result.props.$coolgrid as Record<string, unknown>).size).toBe(4)
+  })
+
+  it("Col does not provide context", async () => {
+    const Col = (await import("../Col")).default
+
+    Col({ size: 6, children: "test" })
+    expect(mockProvide).not.toHaveBeenCalled()
+  })
+
+  it("Container calls provide", async () => {
+    const Container = (await import("../Container")).default
+    Container({ children: "test" })
+
+    expect(mockProvide).toHaveBeenCalledTimes(1)
+  })
+
+  it("Row calls provide", async () => {
+    const Row = (await import("../Row")).default
+    Row({ children: "test" })
+
+    expect(mockProvide).toHaveBeenCalledTimes(1)
+  })
+})

package/src/__tests__/index.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest"
+
+describe("index exports", () => {
+  it("exports Container", async () => {
+    const mod = await import("../index")
+    expect(mod.Container).toBeDefined()
+    expect(typeof mod.Container).toBe("function")
+  })
+
+  it("exports Row", async () => {
+    const mod = await import("../index")
+    expect(mod.Row).toBeDefined()
+    expect(typeof mod.Row).toBe("function")
+  })
+
+  it("exports Col", async () => {
+    const mod = await import("../index")
+    expect(mod.Col).toBeDefined()
+    expect(typeof mod.Col).toBe("function")
+  })
+
+  it("exports Provider", async () => {
+    const mod = await import("../index")
+    expect(mod.Provider).toBeDefined()
+    expect(typeof mod.Provider).toBe("function")
+  })
+
+  it("exports theme", async () => {
+    const mod = await import("../index")
+    expect(mod.theme).toBeDefined()
+    expect(mod.theme).toHaveProperty("rootSize")
+    expect(mod.theme).toHaveProperty("breakpoints")
+    expect(mod.theme).toHaveProperty("grid")
+  })
+})

package/src/__tests__/useContext.test.ts

@@ -0,0 +1,92 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+const mockUseContext = vi.fn()
+
+vi.mock("@pyreon/core", async (importOriginal) => {
+  const original = await importOriginal<typeof import("@pyreon/core")>()
+  return {
+    ...original,
+    useContext: mockUseContext,
+  }
+})
+
+describe("useGridContext", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Default: empty theme context
+    mockUseContext.mockReturnValue({ theme: {} })
+  })
+
+  it("returns props merged with theme grid context", async () => {
+    mockUseContext.mockReturnValue({
+      theme: {
+        grid: {
+          columns: 12,
+          container: { xs: "100%", md: 720 },
+        },
+      },
+    })
+    const useGridContext = (await import("../useContext")).default
+    const result = useGridContext({ gap: 16 })
+    expect(result.gap).toBe(16)
+    expect(result.columns).toBe(12)
+  })
+
+  it("props override theme values", async () => {
+    mockUseContext.mockReturnValue({
+      theme: {
+        grid: { columns: 12 },
+      },
+    })
+    const useGridContext = (await import("../useContext")).default
+    const result = useGridContext({ columns: 24 })
+    expect(result.columns).toBe(24)
+  })
+
+  it("falls back to coolgrid namespace in theme", async () => {
+    mockUseContext.mockReturnValue({
+      theme: {
+        coolgrid: {
+          columns: 16,
+          container: { xs: "100%" },
+        },
+      },
+    })
+    const useGridContext = (await import("../useContext")).default
+    const result = useGridContext({})
+    expect(result.columns).toBe(16)
+  })
+
+  it("returns empty context when no theme or props", async () => {
+    mockUseContext.mockReturnValue({ theme: {} })
+    const useGridContext = (await import("../useContext")).default
+    const result = useGridContext({})
+    expect(result).toBeDefined()
+  })
+})
+
+describe("getGridContext", () => {
+  it("resolves columns from props first", async () => {
+    const { getGridContext } = await import("../useContext")
+    const result = getGridContext({ columns: 24 }, { grid: { columns: 12 } })
+    expect(result.columns).toBe(24)
+  })
+
+  it("resolves columns from theme.grid", async () => {
+    const { getGridContext } = await import("../useContext")
+    const result = getGridContext({}, { grid: { columns: 12 } })
+    expect(result.columns).toBe(12)
+  })
+
+  it("resolves columns from theme.coolgrid", async () => {
+    const { getGridContext } = await import("../useContext")
+    const result = getGridContext({}, { coolgrid: { columns: 16 } })
+    expect(result.columns).toBe(16)
+  })
+
+  it("resolves containerWidth from theme.grid.container", async () => {
+    const { getGridContext } = await import("../useContext")
+    const result = getGridContext({}, { grid: { container: { xs: "100%" } } })
+    expect(result.containerWidth).toEqual({ xs: "100%" })
+  })
+})