@pyreon/elements 0.24.5 → 0.25.0

package/src/__tests__/utils.test.ts

@@ -1,69 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { getShouldBeEmpty, isInlineElement } from '../Element/utils'
-import { isWebFixNeeded } from '../helpers/Wrapper/utils'
-
-describe('isInlineElement', () => {
-  it('returns true for inline elements', () => {
-    expect(isInlineElement('span')).toBe(true)
-    expect(isInlineElement('a')).toBe(true)
-    expect(isInlineElement('button')).toBe(true)
-    expect(isInlineElement('input')).toBe(true)
-    expect(isInlineElement('label')).toBe(true)
-    expect(isInlineElement('strong')).toBe(true)
-    expect(isInlineElement('em')).toBe(true)
-    expect(isInlineElement('img')).toBe(true)
-  })
-
-  it('returns false for block elements', () => {
-    expect(isInlineElement('div')).toBe(false)
-    expect(isInlineElement('p')).toBe(false)
-    expect(isInlineElement('section')).toBe(false)
-    expect(isInlineElement('header')).toBe(false)
-  })
-
-  it('returns false for undefined', () => {
-    expect(isInlineElement(undefined)).toBe(false)
-  })
-
-  it('returns false for empty string', () => {
-    expect(isInlineElement('')).toBe(false)
-  })
-})
-
-describe('getShouldBeEmpty', () => {
-  it('returns true for void elements', () => {
-    expect(getShouldBeEmpty('br')).toBe(true)
-    expect(getShouldBeEmpty('img')).toBe(true)
-    expect(getShouldBeEmpty('input')).toBe(true)
-    expect(getShouldBeEmpty('hr')).toBe(true)
-    expect(getShouldBeEmpty('embed')).toBe(true)
-  })
-
-  it('returns false for non-void elements', () => {
-    expect(getShouldBeEmpty('div')).toBe(false)
-    expect(getShouldBeEmpty('span')).toBe(false)
-    expect(getShouldBeEmpty('p')).toBe(false)
-  })
-
-  it('returns false for undefined', () => {
-    expect(getShouldBeEmpty(undefined)).toBe(false)
-  })
-})
-
-describe('isWebFixNeeded', () => {
-  it('returns true for button, fieldset, legend', () => {
-    expect(isWebFixNeeded('button')).toBe(true)
-    expect(isWebFixNeeded('fieldset')).toBe(true)
-    expect(isWebFixNeeded('legend')).toBe(true)
-  })
-
-  it('returns false for other elements', () => {
-    expect(isWebFixNeeded('div')).toBe(false)
-    expect(isWebFixNeeded('span')).toBe(false)
-    expect(isWebFixNeeded('input')).toBe(false)
-  })
-
-  it('returns false for undefined', () => {
-    expect(isWebFixNeeded(undefined)).toBe(false)
-  })
-})

package/src/__tests__/wrapper-block-cascade.test.ts

@@ -1,121 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { styles } from '../helpers/Wrapper/styled'
-
-/**
- * Regression test for the responsive `block` cascade bug (mirrors vitus-labs's
- * "couple of fixes" PR #121).
- *
- * Scenario: a responsive theme like `block: [true, false, true]` runs the
- * styles callback once per breakpoint with a single-value `t.block`. The bug
- * was that `align-self`, `flex`/`width` etc. were emitted ONLY when
- * `t.block` was truthy — so the breakpoint where `t.block` is false emitted
- * nothing, leaving the previous breakpoint's `align-self: stretch` cascading
- * through the mobile-first @media query.
- *
- * Fix: always emit a value for these properties (truthy → stretch/100%,
- * falsy → auto/auto). The mobile-first @media cascade then resets cleanly
- * when `block` flips false at a later breakpoint.
- *
- * The styles callback is called per-breakpoint with the per-breakpoint theme
- * already resolved to a single value — so testing it directly with two
- * scalar themes is enough to lock in the always-emit contract.
- */
-
-const identityCss = (strings: TemplateStringsArray, ...vals: unknown[]) => {
-  let r = ''
-  for (let i = 0; i < strings.length; i++) {
-    r += strings[i]
-    if (i < vals.length) {
-      const v = vals[i]
-      // Mirror styled-components / styler interpolation: drop falsy
-      // interpolations, stringify the rest. CSSResult instances (from the
-      // alignContent / extendCss helpers) coerce via their toString.
-      if (v === false || v == null) continue
-      r += String(v)
-    }
-  }
-  return r
-}
-
-const renderAt = (theme: Record<string, unknown>): string =>
-  String(styles({ theme, css: identityCss }))
-
-describe('Wrapper styles — responsive block cascade reset', () => {
-  it('emits stretch/100%/flex when block is true', () => {
-    const out = renderAt({
-      block: true,
-      direction: 'inline',
-      alignX: 'left',
-      alignY: 'center',
-    })
-    expect(out).toContain('align-self: stretch')
-    expect(out).toContain('width: 100%')
-    expect(out).toContain('display: flex')
-  })
-
-  it('emits auto/auto/inline-flex reset when block is false (key fix)', () => {
-    const out = renderAt({
-      block: false,
-      direction: 'inline',
-      alignX: 'left',
-      alignY: 'center',
-    })
-    // The fix: these properties MUST be emitted with reset values so the
-    // mobile-first @media cascade doesn't leak `align-self: stretch` from a
-    // smaller breakpoint where block was true.
-    expect(out).toContain('align-self: auto')
-    expect(out).toContain('width: auto')
-    expect(out).toContain('display: inline-flex')
-  })
-
-  it('emits height: 100% when alignY is "block", auto otherwise', () => {
-    const blockY = renderAt({
-      block: false,
-      direction: 'inline',
-      alignX: 'left',
-      alignY: 'block',
-    })
-    expect(blockY).toContain('height: 100%')
-
-    const nonBlockY = renderAt({
-      block: false,
-      direction: 'inline',
-      alignX: 'left',
-      alignY: 'center',
-    })
-    expect(nonBlockY).toContain('height: auto')
-  })
-
-  it('does not emit display when childFix is set (parent split)', () => {
-    const out = renderAt({
-      block: true,
-      childFix: true,
-      direction: 'inline',
-      alignX: 'left',
-      alignY: 'center',
-    })
-    // childFix branch handles its own display rules outside the responsive
-    // styles callback.
-    expect(out).not.toContain('display: flex;')
-    expect(out).not.toContain('display: inline-flex;')
-  })
-
-  it('emits parentFix flex-direction: column only when parentFix is set', () => {
-    const withParentFix = renderAt({
-      block: true,
-      parentFix: true,
-      direction: 'inline',
-      alignX: 'left',
-      alignY: 'center',
-    })
-    expect(withParentFix).toContain('flex-direction: column')
-
-    const withoutParentFix = renderAt({
-      block: true,
-      direction: 'inline',
-      alignX: 'left',
-      alignY: 'center',
-    })
-    expect(withoutParentFix).not.toContain('flex-direction: column')
-  })
-})

package/src/constants.ts

@@ -1 +0,0 @@
-export const PKG_NAME = '@pyreon/elements' as const

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/helpers/Content/component.tsx

@@ -1,75 +0,0 @@
-/**
- * Content area used inside Element to render one of the three
- * layout slots (before, content, after). Passes alignment, direction,
- * gap, and equalCols styling props to the underlying styled component.
- * Adds a `data-pyr-element` attribute in development for debugging.
- *
- * Children are rendered via core `render()`, with function-valued
- * children unwrapped inside a reactive accessor so the compound-layout
- * paths in `Element` keep `content={() => <X />}` reactivity intact
- * (mirrors the `resolveSlot` helper in `Element/component.tsx`).
- */
-import { h, splitProps } from '@pyreon/core'
-import type { ComponentFn, VNodeChildAtom } from '@pyreon/core'
-import { render } from '@pyreon/ui-core'
-import { IS_DEVELOPMENT } from '../../utils'
-import { isPyreonComponent } from '../isPyreonComponent'
-import Styled from './styled'
-import type { Props } from './types'
-
-// Return type is the RESOLVED atom — see the matching helper in
-// Element/component.tsx for the rationale (keeps `() => resolveSlot(...)`
-// a valid VNodeChildAccessor at the JSX child position).
-//
-// Component vs accessor discriminator — see `isPyreonComponent` JSDoc.
-// Without this, `beforeContent={Component}` shorthand crashes downstream
-// in rocketstyle's `removeUndefinedProps(undefined)`.
-const resolveSlot = (value: unknown): VNodeChildAtom | VNodeChildAtom[] => {
-  if (typeof value === 'function') {
-    if (isPyreonComponent(value)) {
-      return h(value as ComponentFn, null) as VNodeChildAtom
-    }
-    return (value as () => VNodeChildAtom | VNodeChildAtom[])()
-  }
-  return render(value as Parameters<typeof render>[0]) as VNodeChildAtom | VNodeChildAtom[]
-}
-
-const Component = (props: Partial<Props>) => {
-  const [own, rest] = splitProps(props, [
-    'contentType',
-    'tag',
-    'parentDirection',
-    'direction',
-    'alignX',
-    'alignY',
-    'equalCols',
-    'gap',
-    'extendCss',
-    'children',
-  ])
-
-  const debugProps = IS_DEVELOPMENT
-    ? {
-        'data-pyr-element': own.contentType,
-      }
-    : {}
-
-  const stylingProps = {
-    contentType: own.contentType,
-    parentDirection: own.parentDirection,
-    direction: own.direction,
-    alignX: own.alignX,
-    alignY: own.alignY,
-    equalCols: own.equalCols,
-    gap: own.gap,
-    extraStyles: own.extendCss,
-  }
-
-  return (
-    <Styled as={own.tag} $contentType={own.contentType} $element={stylingProps} {...debugProps} {...rest}>
-      {() => resolveSlot(own.children)}
-    </Styled>
-  )
-}
-
-export default Component

package/src/helpers/Content/index.ts

@@ -1,3 +0,0 @@
-import component from './component'
-
-export default component

package/src/helpers/Content/styled.ts

@@ -1,105 +0,0 @@
-/**
- * Styled component for content areas (before/content/after). Applies
- * responsive flex alignment, gap spacing between slots based on parent
- * direction (margin-right for inline, margin-bottom for rows), and
- * equalCols flex distribution. The "content" slot gets `flex: 1` to
- * fill remaining space between before and after.
- */
-import { config } from '@pyreon/ui-core'
-import { alignContent, extendCss, makeItResponsive, value } from '@pyreon/unistyle'
-import type { ResponsiveStylesCallback } from '../../types'
-import type { StyledProps, ThemeProps } from './types'
-
-const { styled, css, component } = config
-
-const equalColsCSS = `
-  flex: 1;
-`
-
-const typeContentCSS = `
-  flex: 1;
-`
-
-// --------------------------------------------------------
-// calculate spacing between before / content / after
-// --------------------------------------------------------
-const gapDimensions = {
-  inline: {
-    before: 'margin-right',
-    after: 'margin-left',
-  },
-  reverseInline: {
-    before: 'margin-right',
-    after: 'margin-left',
-  },
-  rows: {
-    before: 'margin-bottom',
-    after: 'margin-top',
-  },
-  reverseRows: {
-    before: 'margin-bottom',
-    after: 'margin-top',
-  },
-} as const
-
-const calculateGap = ({
-  direction,
-  type,
-  value: gapValue,
-}: {
-  direction: keyof typeof gapDimensions
-  type: ThemeProps['contentType']
-  value: string | number | null | undefined
-}) => {
-  if (!direction || !type || type === 'content') return undefined
-
-  const finalStyles = `${gapDimensions[direction][type]}: ${gapValue};`
-
-  return finalStyles
-}
-
-// --------------------------------------------------------
-// calculations of styles to be rendered
-// --------------------------------------------------------
-const styles: ResponsiveStylesCallback = ({ css: cssFn, theme: t, rootSize }) => cssFn`
-  ${alignContent({
-    direction: t.direction,
-    alignX: t.alignX,
-    alignY: t.alignY,
-  })};
-
-  ${t.equalCols && equalColsCSS};
-
-  ${
-    t.gap &&
-    t.contentType &&
-    calculateGap({
-      direction: t.parentDirection,
-      type: t.contentType,
-      value: value(t.gap, rootSize),
-    })
-  };
-
-  ${t.extraStyles && extendCss(t.extraStyles as Parameters<typeof extendCss>[0])};
-`
-
-const platformCSS = `box-sizing: border-box;`
-
-const StyledComponent = styled(component, { layer: 'elements' })`
-  ${platformCSS};
-
-  display: flex;
-  align-self: stretch;
-  flex-wrap: wrap;
-
-  ${(({ $contentType }: StyledProps) => $contentType === 'content' && typeContentCSS) as any};
-
-  ${makeItResponsive({
-    key: '$element',
-    styles,
-    css,
-    normalize: true,
-  })};
-`
-
-export default StyledComponent

package/src/helpers/Content/types.ts

@@ -1,49 +0,0 @@
-import type { HTMLTags } from '@pyreon/ui-core'
-import type {
-  AlignX,
-  AlignY,
-  Content,
-  ContentAlignX,
-  ContentAlignY,
-  ContentBoolean,
-  ContentDirection,
-  ContentSimpleValue,
-  Css,
-  Direction,
-  ExtendCss,
-  Responsive,
-  ResponsiveBoolType,
-} from '../../types'
-
-export interface Props {
-  parentDirection: Direction | undefined
-  gap: Responsive | undefined
-  contentType: 'before' | 'content' | 'after' | undefined
-  children: Content
-  tag: HTMLTags | undefined
-  direction: Direction | undefined
-  alignX: AlignX | undefined
-  alignY: AlignY | undefined
-  equalCols: ResponsiveBoolType | undefined
-  extendCss: ExtendCss | undefined
-}
-
-export interface StyledProps {
-  $element: Pick<
-    Props,
-    'contentType' | 'parentDirection' | 'direction' | 'alignX' | 'alignY' | 'equalCols' | 'gap'
-  > & {
-    extraStyles: Props['extendCss']
-  }
-  $contentType: Props['contentType']
-}
-
-export type ThemeProps = Pick<Props, 'contentType'> & {
-  parentDirection: ContentDirection
-  direction: ContentDirection
-  alignX: ContentAlignX
-  alignY: ContentAlignY
-  equalCols?: ContentBoolean
-  gap?: ContentSimpleValue
-  extraStyles?: Css
-}