@pyreon/coolgrid 0.24.5 → 0.25.0

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

@@ -1,49 +0,0 @@
-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

@@ -1,152 +0,0 @@
-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', { timeout: 60_000 }, async () => {
-    // Long timeout: this test dynamic-imports Container on first run,
-    // which cold-loads the full styler → unistyle chain. On slow CI
-    // runners it consistently hits ~13-14s, flaking against the
-    // default 15s timeout. 30s gives comfortable headroom without
-    // masking real hangs.
-    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

@@ -1,142 +0,0 @@
-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({})
-  })
-
-  // First test in this file pays the cold-import cost for the entire coolgrid
-  // module graph (@pyreon/core + ui-core + unistyle + styler + rocketstyle).
-  // Warm it takes ~200ms, but on cold CI shared runners the Vite transform of
-  // that graph can spike past the 15s default and time out (PR #225 flakes).
-  // Per-test timeout bump — subsequent tests in the file reuse the cached
-  // module and run in 0ms, so the global 15s budget stays strict everywhere
-  // else.
-  it('returns a VNode', { timeout: 60000 }, 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

@@ -1,120 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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 a ReactiveContext accessor
-    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)
-  })
-})