mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekay
ba9f436467
Internal renames so source matches the published @hanzogui/[email protected] dist (Gui.ts, createGui.ts, views/GuiProvider.mjs, views/GuiRoot.mjs). Renames applied: - Files: Hanzogui.ts -> Gui.ts, createHanzogui.ts -> createGui.ts, HanzoguiProvider.tsx -> GuiProvider.tsx, HanzoguiRoot[.native].tsx -> GuiRoot[.native].tsx, HanzoguiPlugin.ts -> GuiPlugin.ts, withHanzogui.ts -> withGui.ts, loadHanzogui.ts -> loadGui.ts, v4-hanzogui.ts -> v4-gui.ts, *.d.ts mirrors, hanzogui.config.ts -> gui.config.ts, hanzogui.build.ts -> gui.build.ts, hanzogui.css -> gui.css, hanzogui-build.js -> gui-build.js, etc. - Directories: pkgs/core/create-hanzogui -> pkgs/core/create-gui, apps/sandbox/config/hanzogui -> apps/sandbox/config/gui. - Identifiers: Hanzogui* -> Gui*, createHanzogui -> createGui, withHanzogui -> withGui, loadHanzogui -> loadGui, HANZOGUI_* env -> GUI_*, __hanzogui* globals -> __gui*, hanzoguiOptions/hanzoguiConfig/ hanzoguiPlugin etc. -> guiOptions/guiConfig/guiPlugin, CSS vars --hanzogui-* -> --gui-*, data-hanzogui-* -> data-gui-*, [hanzogui] log prefix -> [gui]. - Removed duplicate pkgs/packages/hanzogui-dev-config; the canonical pkgs/packages/gui-dev-config (@hanzogui/dev-config) already existed with the correct shape. apps/demos now consumes @hanzogui/dev-config. Preserved (public npm names): - "hanzogui" umbrella package (pkgs/ui/hanzogui/package.json) - "@hanzogui/*" namespace - "hanzogui-loader" package name (pkgs/compiler/loader) - "hanzogui-build-test-*" test fixture names - "hanzogui-publish-smoke" workflow id - pkgs/core/helpers-hanzogui dir (not on rename list) - apps/gui.hanzo.ai/ marketing site directory - AGENTS.md symlink restored after perl -i clobbered it Smoke build (turbo run build): 169/169 workspaces successful. Sample tests: pkgs/core/core-test getSplitStyles.android* + createGui.web all green.
126 lines
4.0 KiB
TypeScript
126 lines
4.0 KiB
TypeScript
import {
|
|
createGui,
|
|
normalizeStyle,
|
|
getCSSStylesAtomic,
|
|
StyleObjectRules,
|
|
StyleObjectProperty,
|
|
StyleObjectValue,
|
|
} from '@hanzogui/core'
|
|
import { beforeAll, describe, expect, test } from 'vitest'
|
|
|
|
import config from '../../../core/config-default'
|
|
|
|
beforeAll(() => {
|
|
createGui(config.getDefaultGuiConfig())
|
|
})
|
|
|
|
describe('extract-tests', () => {
|
|
test('converts a style object to class names', () => {
|
|
const style = {
|
|
backgroundColor: 'red',
|
|
transform: [{ rotateY: '10deg' }],
|
|
shadowRadius: 10,
|
|
shadowColor: 'red',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: 'blue',
|
|
}
|
|
const styles = getCSSStylesAtomic(style)
|
|
const style1 = styles.find((x) => x[StyleObjectProperty] === 'backgroundColor')
|
|
const style2 = styles.find((x) => x[StyleObjectProperty] === 'transform')
|
|
const style3 = styles.find((x) => x[StyleObjectProperty] === 'boxShadow')
|
|
expect(!!style1).toBeTruthy()
|
|
expect(!!style2).toBeTruthy()
|
|
expect(!!style3).toBeTruthy()
|
|
expect(style1![StyleObjectRules][0]).toMatchSnapshot()
|
|
expect(style2![StyleObjectRules][0]).toMatchSnapshot()
|
|
expect(style3![StyleObjectRules][0]).toMatchSnapshot()
|
|
})
|
|
|
|
test('supports RTL properties', () => {
|
|
const style = {
|
|
paddingStart: 100,
|
|
paddingEnd: 10,
|
|
marginStart: 50,
|
|
marginEnd: 2,
|
|
}
|
|
const styles = getCSSStylesAtomic(style)
|
|
expect(styles).toMatchSnapshot()
|
|
})
|
|
|
|
test('expands and resolves shorthand props', () => {
|
|
const style = normalizeStyle({
|
|
padding: 10,
|
|
paddingVertical: 0,
|
|
})
|
|
const [pT, pR, pB, pL] = getCSSStylesAtomic(style)
|
|
expect(pT[StyleObjectValue]).toBe('0px')
|
|
expect(pB[StyleObjectValue]).toBe('0px')
|
|
expect(pL[StyleObjectValue]).toBe('10px')
|
|
expect(pR[StyleObjectValue]).toBe('10px')
|
|
const style2 = normalizeStyle({
|
|
borderColor: 'yellow',
|
|
borderWidth: 10,
|
|
})
|
|
const styles2 = getCSSStylesAtomic(style2)
|
|
expect(
|
|
styles2.some((x) => x[StyleObjectProperty] === 'borderRightStyle')
|
|
).toBeTruthy()
|
|
})
|
|
|
|
test('handles flexWrap property', () => {
|
|
const style = {
|
|
flexWrap: 'wrap',
|
|
}
|
|
const styles = getCSSStylesAtomic(style)
|
|
const flexWrapStyle = styles.find((x) => x[StyleObjectProperty] === 'flexWrap')
|
|
expect(!!flexWrapStyle).toBeTruthy()
|
|
expect(flexWrapStyle![StyleObjectValue]).toBe('wrap')
|
|
expect(flexWrapStyle![StyleObjectRules][0]).toContain('flex-wrap')
|
|
})
|
|
|
|
test('handles various flex properties', () => {
|
|
const style = {
|
|
flexWrap: 'wrap',
|
|
flexDirection: 'row',
|
|
flexGrow: 1,
|
|
flexShrink: 0,
|
|
flexBasis: 'auto',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
}
|
|
const styles = getCSSStylesAtomic(style)
|
|
|
|
expect(
|
|
styles.find((x) => x[StyleObjectProperty] === 'flexWrap')?.[StyleObjectValue]
|
|
).toBe('wrap')
|
|
expect(
|
|
styles.find((x) => x[StyleObjectProperty] === 'flexDirection')?.[StyleObjectValue]
|
|
).toBe('row')
|
|
expect(
|
|
styles.find((x) => x[StyleObjectProperty] === 'flexGrow')?.[StyleObjectValue]
|
|
).toBe(1)
|
|
expect(
|
|
styles.find((x) => x[StyleObjectProperty] === 'flexShrink')?.[StyleObjectValue]
|
|
).toBe(0)
|
|
expect(
|
|
styles.find((x) => x[StyleObjectProperty] === 'flexBasis')?.[StyleObjectValue]
|
|
).toBe('auto')
|
|
expect(
|
|
styles.find((x) => x[StyleObjectProperty] === 'alignItems')?.[StyleObjectValue]
|
|
).toBe('center')
|
|
expect(
|
|
styles.find((x) => x[StyleObjectProperty] === 'justifyContent')?.[StyleObjectValue]
|
|
).toBe('space-between')
|
|
})
|
|
|
|
test('handles flexWrap variations', () => {
|
|
const wrapStyle = getCSSStylesAtomic({ flexWrap: 'wrap' })
|
|
const nowrapStyle = getCSSStylesAtomic({ flexWrap: 'nowrap' })
|
|
const wrapReverseStyle = getCSSStylesAtomic({ flexWrap: 'wrap-reverse' })
|
|
|
|
expect(wrapStyle[0][StyleObjectValue]).toBe('wrap')
|
|
expect(nowrapStyle[0][StyleObjectValue]).toBe('nowrap')
|
|
expect(wrapReverseStyle[0][StyleObjectValue]).toBe('wrap-reverse')
|
|
})
|
|
})
|