@pyreon/coolgrid 0.24.5 → 0.25.0

package/src/__tests__/coolgrid.browser.test.tsx

@@ -1,181 +0,0 @@
-/** @jsxImportSource @pyreon/core */
-import { h } from '@pyreon/core'
-import { sheet } from '@pyreon/styler'
-import { mountInBrowser } from '@pyreon/test-utils/browser'
-import { PyreonUI } from '@pyreon/ui-core'
-import { afterEach, describe, expect, it } from 'vitest'
-import { Col, Container, Row } from '../index'
-import gridTheme from '../theme'
-
-// Real-Chromium smoke for @pyreon/coolgrid.
-//
-// Vitest browser mode runs at a small viewport (≈414px), so we assert
-// RATIOS against the actual rendered Row width rather than pegging
-// absolute pixels to a Container max-width that gets capped by the
-// viewport.
-//
-// Wraps in `PyreonUI` (the unified provider that replaces the
-// deprecated `<Provider>` from @pyreon/unistyle), matching production
-// usage.
-
-describe('@pyreon/coolgrid in real browser', () => {
-  afterEach(() => {
-    sheet.clearCache()
-  })
-
-  it('Container mounts and Chromium computes flex layout', () => {
-    const { container, unmount } = mountInBrowser(
-      h(PyreonUI, { theme: gridTheme }, h(Container, { id: 'c' }, 'hello')),
-    )
-    const el = container.querySelector<HTMLElement>('#c')!
-    const cs = getComputedStyle(el)
-    expect(cs.display).toBe('flex')
-    expect(cs.flexDirection).toBe('column')
-    expect(el.textContent).toContain('hello')
-    unmount()
-  })
-
-  it('Col size=6 in a 12-col grid yields 50% width of its Row', () => {
-    const { container, unmount } = mountInBrowser(
-      h(
-        PyreonUI,
-        { theme: gridTheme },
-        h(Container, null, h(Row, { id: 'row' }, h(Col, { id: 'half', size: 6 }, 'half'))),
-      ),
-    )
-    const row = container.querySelector<HTMLElement>('#row')!
-    const half = container.querySelector<HTMLElement>('#half')!
-    const ratio = half.getBoundingClientRect().width / row.getBoundingClientRect().width
-    expect(ratio).toBeGreaterThan(0.495)
-    expect(ratio).toBeLessThan(0.505)
-    unmount()
-  })
-
-  it('Col size=2 in a 6-col grid yields ~33% — grid columns aren\'t hardcoded to 12', () => {
-    // Explicitly overrides `grid.columns` to 6 to prove the math is
-    // `size / columns`, not `size / 12`.
-    const theme = { ...gridTheme, grid: { ...gridTheme.grid, columns: 6 } }
-    const { container, unmount } = mountInBrowser(
-      h(
-        PyreonUI,
-        { theme },
-        h(Container, null, h(Row, { id: 'row' }, h(Col, { id: 'third', size: 2 }, 't'))),
-      ),
-    )
-    const row = container.querySelector<HTMLElement>('#row')!
-    const third = container.querySelector<HTMLElement>('#third')!
-    const ratio = third.getBoundingClientRect().width / row.getBoundingClientRect().width
-    expect(ratio).toBeGreaterThan(0.33)
-    expect(ratio).toBeLessThan(0.34)
-    // flex-basis emitted from size/columns
-    expect(getComputedStyle(third).flexBasis).toBe('33.3333%')
-    unmount()
-  })
-
-  it('two Cols of size 6 each lay out side-by-side (sum ≈ 100% of Row)', () => {
-    const { container, unmount } = mountInBrowser(
-      h(
-        PyreonUI,
-        { theme: gridTheme },
-        h(
-          Container,
-          null,
-          h(
-            Row,
-            { id: 'row' },
-            h(Col, { id: 'a', size: 6 }, 'A'),
-            h(Col, { id: 'b', size: 6 }, 'B'),
-          ),
-        ),
-      ),
-    )
-    const row = container.querySelector<HTMLElement>('#row')!
-    const a = container.querySelector<HTMLElement>('#a')!
-    const b = container.querySelector<HTMLElement>('#b')!
-    const ar = a.getBoundingClientRect()
-    const br = b.getBoundingClientRect()
-    expect(br.left).toBeGreaterThanOrEqual(ar.right - 1)
-    const sum = ar.width + br.width
-    const rowW = row.getBoundingClientRect().width
-    expect(sum / rowW).toBeGreaterThan(0.99)
-    expect(sum / rowW).toBeLessThan(1.01)
-    unmount()
-  })
-
-  it('flex-basis on Col is the literal percentage authored from size/columns', () => {
-    const { container, unmount } = mountInBrowser(
-      h(
-        PyreonUI,
-        { theme: gridTheme },
-        h(Container, null, h(Row, null, h(Col, { id: 'c', size: 3 }, 'q'))),
-      ),
-    )
-    const el = container.querySelector<HTMLElement>('#c')!
-    expect(getComputedStyle(el).flexBasis).toBe('25%')
-    unmount()
-  })
-
-  it('`gap` subtracts from Col flex-basis via calc() — different emit path', () => {
-    // With gap set on Row, Col's widthStyles takes the
-    // `calc(${width}% - ${g}px)` branch (see Col/styled.ts:37).
-    // Chromium resolves the calc() and produces a width strictly less
-    // than the gap-less 50% value, which is the load-bearing behavior.
-    const { container, unmount } = mountInBrowser(
-      h(
-        PyreonUI,
-        { theme: gridTheme },
-        h(
-          Container,
-          null,
-          h(
-            Row,
-            { id: 'row', gap: 24 },
-            h(Col, { id: 'g', size: 6 }, 'G'),
-          ),
-        ),
-      ),
-    )
-    const row = container.querySelector<HTMLElement>('#row')!
-    const col = container.querySelector<HTMLElement>('#g')!
-    const cs = getComputedStyle(col)
-    // Chromium preserves the `calc(... - 24px)` literal in computed style.
-    expect(cs.flexBasis).toMatch(/calc\([^)]+- 24px\)/)
-    const colW = col.getBoundingClientRect().width
-    const rowW = row.getBoundingClientRect().width
-    // Gap subtraction: col width should be less than exactly 50%
-    expect(colW).toBeLessThan(rowW * 0.5)
-    // …but not dramatically so — confirms it's a subtraction, not a failure
-    expect(colW).toBeGreaterThan(rowW * 0.4)
-    unmount()
-  })
-
-  it('responsive `size` array applies a per-breakpoint width at the current viewport', () => {
-    // The responsive-per-breakpoint feature: `size={[12, 6, 4]}`
-    // means "size 12 on xs, 6 on sm, 4 on md+". At the vitest browser
-    // viewport (~414px), xs is the only applicable breakpoint, so
-    // size=12 should apply (100% width of Row).
-    const { container, unmount } = mountInBrowser(
-      h(
-        PyreonUI,
-        { theme: gridTheme },
-        h(
-          Container,
-          null,
-          h(
-            Row,
-            { id: 'row' },
-            h(Col, { id: 'r', size: [12, 6, 4] } as any, 'x'),
-          ),
-        ),
-      ),
-    )
-    const row = container.querySelector<HTMLElement>('#row')!
-    const col = container.querySelector<HTMLElement>('#r')!
-    expect(window.innerWidth).toBeLessThan(576) // below the `sm` breakpoint
-    const ratio = col.getBoundingClientRect().width / row.getBoundingClientRect().width
-    // xs size=12 on 12-column grid → 100% of Row
-    expect(ratio).toBeGreaterThan(0.99)
-    expect(ratio).toBeLessThan(1.01)
-    unmount()
-  })
-})

package/src/__tests__/index.test.ts

@@ -1,35 +0,0 @@
-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__/native-markers.test.ts

@@ -1,13 +0,0 @@
-import { isNativeCompat } from '@pyreon/core'
-import { describe, expect, it } from 'vitest'
-import Container from '../Container/component'
-import Row from '../Row/component'
-
-describe('native-compat markers — @pyreon/coolgrid', () => {
-  it('Container is marked native', () => {
-    expect(isNativeCompat(Container)).toBe(true)
-  })
-  it('Row is marked native', () => {
-    expect(isNativeCompat(Row)).toBe(true)
-  })
-})

package/src/__tests__/useContext.test.ts

@@ -1,92 +0,0 @@
-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: coreContext is ReactiveContext — mock returns () => value
-    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%' })
-  })
-})

package/src/__tests__/utils.test.ts

@@ -1,144 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { getContainerWidth } from '../Container/utils'
-import { hasValue, hasWidth, isNumber, isVisible, omitCtxKeys } from '../utils'
-
-describe('isNumber', () => {
-  it('returns true for finite numbers', () => {
-    expect(isNumber(0)).toBe(true)
-    expect(isNumber(1)).toBe(true)
-    expect(isNumber(-1)).toBe(true)
-    expect(isNumber(3.14)).toBe(true)
-  })
-
-  it('returns false for non-finite values', () => {
-    expect(isNumber(Infinity)).toBe(false)
-    expect(isNumber(-Infinity)).toBe(false)
-    expect(isNumber(NaN)).toBe(false)
-  })
-
-  it('returns false for non-number types', () => {
-    expect(isNumber(null)).toBe(false)
-    expect(isNumber(undefined)).toBe(false)
-    expect(isNumber('5')).toBe(false)
-    expect(isNumber(true)).toBe(false)
-  })
-})
-
-describe('hasValue', () => {
-  it('returns true for positive finite numbers', () => {
-    expect(hasValue(1)).toBe(true)
-    expect(hasValue(12)).toBe(true)
-    expect(hasValue(0.5)).toBe(true)
-  })
-
-  it('returns false for zero', () => {
-    expect(hasValue(0)).toBe(false)
-  })
-
-  it('returns false for negative numbers', () => {
-    expect(hasValue(-1)).toBe(false)
-  })
-
-  it('returns false for non-numbers', () => {
-    expect(hasValue(null)).toBe(false)
-    expect(hasValue(undefined)).toBe(false)
-    expect(hasValue('5')).toBe(false)
-  })
-})
-
-describe('isVisible', () => {
-  it('returns true for positive numbers', () => {
-    expect(isVisible(1)).toBe(true)
-    expect(isVisible(12)).toBe(true)
-  })
-
-  it('returns true for negative numbers', () => {
-    expect(isVisible(-1)).toBe(true)
-  })
-
-  it('returns false for zero', () => {
-    expect(isVisible(0)).toBe(false)
-  })
-
-  it('returns true for undefined (default visibility)', () => {
-    expect(isVisible(undefined)).toBe(true)
-  })
-
-  it('returns false for non-number truthy values', () => {
-    expect(isVisible('5')).toBe(false)
-    expect(isVisible(null)).toBe(false)
-  })
-})
-
-describe('hasWidth', () => {
-  it('returns true when both size and columns are positive numbers', () => {
-    expect(hasWidth(6, 12)).toBe(true)
-    expect(hasWidth(1, 1)).toBe(true)
-  })
-
-  it('returns false when size is 0', () => {
-    expect(hasWidth(0, 12)).toBe(false)
-  })
-
-  it('returns false when columns is 0', () => {
-    expect(hasWidth(6, 0)).toBe(false)
-  })
-
-  it('returns false when either is not a number', () => {
-    expect(hasWidth(null, 12)).toBe(false)
-    expect(hasWidth(6, null)).toBe(false)
-    expect(hasWidth(undefined, undefined)).toBe(false)
-  })
-})
-
-describe('omitCtxKeys', () => {
-  it('strips context keys from props', () => {
-    const props = {
-      columns: 12,
-      size: 6,
-      gap: 16,
-      padding: 4,
-      gutter: 8,
-      colCss: 'color: red;',
-      colComponent: () => null,
-      rowCss: 'color: blue;',
-      rowComponent: () => null,
-      contentAlignX: 'center',
-      className: 'my-class',
-      id: 'my-id',
-    }
-    const result = omitCtxKeys(props)
-    expect(result).toEqual({
-      className: 'my-class',
-      id: 'my-id',
-    })
-  })
-
-  it('returns all props when no context keys present', () => {
-    const props = { className: 'test', style: 'color: red;' }
-    const result = omitCtxKeys(props)
-    expect(result).toEqual(props)
-  })
-})
-
-describe('getContainerWidth', () => {
-  it('returns width from props', () => {
-    const result = getContainerWidth({ width: { xs: 600 } }, {})
-    expect(result).toEqual({ xs: 600 })
-  })
-
-  it('falls back to theme.grid.container', () => {
-    const result = getContainerWidth({}, { grid: { container: { xs: '100%' } } })
-    expect(result).toEqual({ xs: '100%' })
-  })
-
-  it('falls back to theme.coolgrid.container', () => {
-    const result = getContainerWidth({}, { coolgrid: { container: { md: 720 } } })
-    expect(result).toEqual({ md: 720 })
-  })
-
-  it('returns undefined when nothing matches', () => {
-    const result = getContainerWidth({}, {})
-    expect(result).toBeFalsy()
-  })
-})

package/src/constants.ts

@@ -1,26 +0,0 @@
-export const PKG_NAME = '@pyreon/coolgrid'
-
-// Dev-mode gate. `import.meta.env.DEV` is literal-replaced by Vite at build
-// time and tree-shakes to zero bytes in prod. The previous
-// `process.env.NODE_ENV !== 'production'` form was dead code in real Vite
-// browser bundles (Vite does not polyfill `process`).
-export const __DEV__ = process.env.NODE_ENV !== 'production'
-
-/**
- * Grid configuration keys that are passed through context
- * from Container to Row and from Row to Col components.
- */
-export const CONTEXT_KEYS = [
-  // 'breakpoints',
-  // 'rootSize',
-  'columns',
-  'size',
-  'gap',
-  'padding',
-  'gutter',
-  'colCss',
-  'colComponent',
-  'rowCss',
-  'rowComponent',
-  'contentAlignX',
-]

package/src/context/ContainerContext.ts

@@ -1,9 +0,0 @@
-import { createContext } from '@pyreon/core'
-import type { Context as ContextType } from '../types'
-
-/**
- * Context for container-level grid configuration.
- * Provided by the Container component and consumed by Row children
- * to inherit columns, gap, gutter, and other grid settings.
- */
-export default createContext<ContextType>({})

package/src/context/RowContext.ts

@@ -1,9 +0,0 @@
-import { createContext } from '@pyreon/core'
-import type { Context as ContextType } from '../types'
-
-/**
- * Context for row-level grid configuration.
- * Provided by the Row component and consumed by Col children
- * to inherit columns, gap, gutter, and sizing for width calculations.
- */
-export default createContext<ContextType>({})

package/src/context/index.ts

@@ -1,4 +0,0 @@
-import ContainerContext from './ContainerContext'
-import RowContext from './RowContext'
-
-export { ContainerContext, RowContext }

package/src/env.d.ts

@@ -1,6 +0,0 @@
-/**
- * Minimal process type — just enough for `process.env.NODE_ENV` checks.
- * Avoids requiring @types/node in consumers that import pyreon source
- * via the `"bun"` export condition.
- */
-declare var process: { env: { NODE_ENV?: string } }

package/src/index.ts

@@ -1,7 +0,0 @@
-import { Provider } from '@pyreon/unistyle'
-import Col from './Col'
-import Container from './Container'
-import Row from './Row'
-import theme from './theme'
-
-export { Col, Container, Provider, Row, theme }

package/src/theme.ts

@@ -1,40 +0,0 @@
-/**
- * Default Bootstrap-like grid configuration. Provides 5 breakpoints (xs-xl),
- * a 12-column grid, and responsive container max-widths matching Bootstrap 4.
- */
-export default {
-  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,
-    },
-  },
-} as const
-
-export const defaultBreakpoints: Record<string, number> = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 992,
-  xl: 1200,
-}
-
-export const defaultContainerWidths: Record<string, string | number> = {
-  xs: '100%',
-  sm: 540,
-  md: 720,
-  lg: 960,
-  xl: 1140,
-}

package/src/types.ts

@@ -1,72 +0,0 @@
-/**
- * Type definitions for the coolgrid layout system.
- * Supports responsive values as single values, arrays (mobile-first),
- * or breakpoint-keyed objects. Defines config props for Container/Row/Col
- * and the resolved styled-component prop types.
- */
-
-import type { ComponentFn, VNodeChild } from '@pyreon/core'
-import type { BreakpointKeys, config } from '@pyreon/ui-core'
-import type { AlignContentAlignXKeys, extendCss } from '@pyreon/unistyle'
-
-type CreateValueType<T> = T | T[] | Partial<Record<BreakpointKeys, T>>
-
-export type Obj = Record<string, unknown>
-export type Value = string | number
-export type Css = Parameters<typeof extendCss>[0]
-export type ExtraStyles = CreateValueType<Css>
-
-export type CssOutput = ReturnType<typeof config.css> | string
-
-export type ValueType = CreateValueType<number>
-export type ContainerWidth = CreateValueType<Value>
-
-export type ContentAlignX =
-  | 'center'
-  | 'left'
-  | 'right'
-  | 'spaceAround'
-  | 'spaceBetween'
-  | 'spaceEvenly'
-
-export type ConfigurationProps = Partial<{
-  size: ValueType
-  padding: ValueType
-  gap: ValueType
-  gutter: ValueType
-  columns: ValueType
-  colCss: ExtraStyles
-  rowCss: ExtraStyles
-  colComponent: ComponentFn<any>
-  rowComponent: ComponentFn<any>
-  contentAlignX: ContentAlignX
-  containerWidth: ContainerWidth
-  width: ContainerWidth | ((widths: Record<string, any>) => ContainerWidth)
-}>
-
-export type ComponentProps = ConfigurationProps &
-  Partial<{
-    component: ComponentFn<any>
-    css: ExtraStyles
-  }>
-
-export type StyledTypes = Partial<{
-  size: number | undefined
-  padding: number | undefined
-  gap: number | undefined
-  gutter: number | undefined
-  columns: number | undefined
-  extraStyles: Css
-  contentAlignX: AlignContentAlignXKeys
-  width: Value
-}>
-
-export type ElementType<O extends string[]> = ComponentFn<
-  Omit<ComponentProps, O[number]> & Record<string, unknown> & { children?: VNodeChild }
-> & {
-  displayName: string
-  pkgName: string
-  PYREON__COMPONENT: string
-}
-
-export type Context = { [K in keyof ConfigurationProps]?: ConfigurationProps[K] | undefined }