mirror of
https://github.com/hanzoai/agents.git
synced 2026-10-30 18:48:36 +00:00
zeekay
dc00ea93d0
This example shipped a live tailwind pipeline (tailwind.config.ts, a postcss
config running the tailwind plugin, @tailwind directives in globals.css), ten
@radix-ui packages, and fourteen vendored shadcn components. Tailwind classes
and radix primitives are DOM-only, so the example taught readers a pattern that
cannot run on iOS or Android — and examples propagate.
Everything now renders through @hanzo/ui on the @hanzo/gui backend, which
compiles to React Native. Utility strings became style props on View/XStack/
YStack/Text; the vendored ui/ directory is gone because @hanzo/ui already
exports every primitive it re-implemented, with matching variant names.
Tailwind and @hanzo/ui cannot coexist: @hanzo/ui ships plain CSS cascade layers
and tailwind's postcss plugin rejects `@layer base` without `@tailwind base`.
The pipeline had to come out for the library to load at all, which is why this
is a whole-app change rather than a partial one.
Also removed EvaluationForm.tsx — 273 lines of tailwind nothing imported.
Platform moves the conversion required: React 18 -> 19 and Next 14 -> 15 for
@hanzo/ui's peer range, react-native aliased to react-native-web for the web
bundle, and <Hanzo> mounted in the root layout to install the theme.
Three defects found by rendering it rather than trusting the build:
- Tabs defaults to flexDirection row, so tab panels laid out beside the tab
list and spilled outside the metric cards
- TabsContent computes flex 1 1 0, which collapses to height 0 inside a
content-sized column; it needs flexBasis auto there
- CollapsibleTrigger has no asChild — it wraps children itself, so the claim
rows rendered as empty boxes
Measured: 1465 tailwind utility tokens across 22 files -> 0; 10 radix packages
-> 0; 14 vendored shadcn files -> 0. next build green, tsc --noEmit clean,
every tab and the claim expand/collapse verified in a real browser with no
console errors.
16 lines
453 B
JavaScript
16 lines
453 B
JavaScript
/** @type {import('next').NextConfig} */
|
|
const nextConfig = {
|
|
output: 'standalone',
|
|
transpilePackages: ['@hanzo/ui', '@hanzo/gui', 'react-native-web'],
|
|
webpack: (config) => {
|
|
config.resolve.alias = {
|
|
...config.resolve.alias,
|
|
'react-native$': 'react-native-web',
|
|
}
|
|
config.resolve.extensions = ['.web.tsx', '.web.ts', '.web.jsx', '.web.js', ...config.resolve.extensions]
|
|
return config
|
|
},
|
|
}
|
|
|
|
module.exports = nextConfig
|