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.
182 lines
4.7 KiB
TypeScript
182 lines
4.7 KiB
TypeScript
import { View, createGui, getSplitStyles } from '@hanzogui/core'
|
|
import { beforeAll, describe, expect, test } from 'vitest'
|
|
|
|
import config from '../config-default'
|
|
|
|
beforeAll(() => {
|
|
createGui(config.getDefaultGuiConfig('native'))
|
|
})
|
|
|
|
function getSplitStylesFor(props: Record<string, any>, Component = View) {
|
|
return getSplitStyles(
|
|
props,
|
|
Component.staticConfig,
|
|
{} as any,
|
|
'',
|
|
{
|
|
hover: false,
|
|
press: false,
|
|
pressIn: false,
|
|
focus: false,
|
|
focusVisible: false,
|
|
disabled: false,
|
|
unmounted: true,
|
|
},
|
|
{
|
|
isAnimated: false,
|
|
mediaState: undefined,
|
|
noClassNames: false,
|
|
resolveValues: 'auto',
|
|
} as any,
|
|
{},
|
|
{
|
|
animationDriver: {},
|
|
groups: { state: {} },
|
|
} as any,
|
|
undefined,
|
|
undefined,
|
|
true
|
|
)
|
|
}
|
|
|
|
describe('RN 0.76+ Style Alignment - Native', () => {
|
|
// boxShadow is parsed to RN object format on native
|
|
describe('boxShadow', () => {
|
|
test('boxShadow parsed to object format', () => {
|
|
const { style } = getSplitStylesFor({
|
|
boxShadow: '5px 5px 10px red',
|
|
})
|
|
expect(style?.boxShadow).toEqual([
|
|
{ offsetX: 5, offsetY: 5, blurRadius: 10, color: 'red' },
|
|
])
|
|
})
|
|
|
|
test('boxShadow with tokens resolves them', () => {
|
|
const { style } = getSplitStylesFor({
|
|
boxShadow: '0 0 10px $white',
|
|
})
|
|
expect(style?.boxShadow).toBeDefined()
|
|
expect(style?.boxShadow).toEqual([
|
|
{ offsetX: 0, offsetY: 0, blurRadius: 10, color: '#fff' },
|
|
])
|
|
})
|
|
|
|
test('boxShadow with multiple shadows', () => {
|
|
const { style } = getSplitStylesFor({
|
|
boxShadow: '0 0 10px red, 0 0 20px blue',
|
|
})
|
|
expect(style?.boxShadow).toEqual([
|
|
{ offsetX: 0, offsetY: 0, blurRadius: 10, color: 'red' },
|
|
{ offsetX: 0, offsetY: 0, blurRadius: 20, color: 'blue' },
|
|
])
|
|
})
|
|
|
|
test('boxShadow inset syntax', () => {
|
|
const { style } = getSplitStylesFor({
|
|
boxShadow: 'inset 0 2px 4px black',
|
|
})
|
|
expect(style?.boxShadow).toEqual([
|
|
{ inset: true, offsetX: 0, offsetY: 2, blurRadius: 4, color: 'black' },
|
|
])
|
|
})
|
|
})
|
|
|
|
describe('filter', () => {
|
|
test('filter string passed through directly', () => {
|
|
const { style } = getSplitStylesFor({
|
|
filter: 'brightness(1.2)',
|
|
})
|
|
expect(style?.filter).toBe('brightness(1.2)')
|
|
})
|
|
|
|
test('filter with tokens resolves them', () => {
|
|
const { style } = getSplitStylesFor({
|
|
filter: 'blur($2)',
|
|
})
|
|
expect(style?.filter).toBeDefined()
|
|
expect(style?.filter).not.toContain('$2')
|
|
})
|
|
|
|
test('filter multiple functions', () => {
|
|
const { style } = getSplitStylesFor({
|
|
filter: 'blur(10px) brightness(1.2)',
|
|
})
|
|
expect(style?.filter).toBe('blur(10px) brightness(1.2)')
|
|
})
|
|
|
|
test('filter drop-shadow', () => {
|
|
const { style } = getSplitStylesFor({
|
|
filter: 'drop-shadow(5px 5px 10px red)',
|
|
})
|
|
expect(style?.filter).toBe('drop-shadow(5px 5px 10px red)')
|
|
})
|
|
})
|
|
|
|
describe('mixBlendMode', () => {
|
|
test('mixBlendMode passes through', () => {
|
|
const { style } = getSplitStylesFor({
|
|
mixBlendMode: 'multiply',
|
|
})
|
|
expect(style?.mixBlendMode).toBe('multiply')
|
|
})
|
|
})
|
|
|
|
describe('isolation', () => {
|
|
test('isolation passes through', () => {
|
|
const { style } = getSplitStylesFor({
|
|
isolation: 'isolate',
|
|
})
|
|
expect(style?.isolation).toBe('isolate')
|
|
})
|
|
})
|
|
|
|
describe('boxSizing', () => {
|
|
test('boxSizing passes through', () => {
|
|
const { style } = getSplitStylesFor({
|
|
boxSizing: 'content-box',
|
|
})
|
|
expect(style?.boxSizing).toBe('content-box')
|
|
})
|
|
})
|
|
|
|
describe('outline props', () => {
|
|
test('outlineColor with token resolves', () => {
|
|
const { style } = getSplitStylesFor({
|
|
outlineColor: '$white',
|
|
})
|
|
expect(style?.outlineColor).toBeDefined()
|
|
expect(style?.outlineColor).not.toContain('$')
|
|
})
|
|
|
|
test('outlineWidth passes through', () => {
|
|
const { style } = getSplitStylesFor({
|
|
outlineWidth: 2,
|
|
})
|
|
expect(style?.outlineWidth).toBe(2)
|
|
})
|
|
|
|
test('outlineStyle passes through', () => {
|
|
const { style } = getSplitStylesFor({
|
|
outlineStyle: 'dashed',
|
|
})
|
|
expect(style?.outlineStyle).toBe('dashed')
|
|
})
|
|
|
|
test('outlineOffset passes through', () => {
|
|
const { style } = getSplitStylesFor({
|
|
outlineOffset: 4,
|
|
})
|
|
expect(style?.outlineOffset).toBe(4)
|
|
})
|
|
})
|
|
|
|
describe('display contents', () => {
|
|
test('display contents passes through', () => {
|
|
const { style } = getSplitStylesFor({
|
|
display: 'contents',
|
|
})
|
|
expect(style?.display).toBe('contents')
|
|
})
|
|
})
|
|
})
|