Skip to content

docs(mix-winds): document functional API #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
leoafarias merged 1 commit into from
Aug 10, 2026
Merged

docs(mix-winds): document functional API #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions components/landing/mix-winds/MixWindsLanding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,11 +111,11 @@ export function MixWindsLanding() {
</motion.p>

<motion.div className="mtw-cta-row" variants={fadeUp} custom={0.15}>
<LandingButton href={PUB_DEV_URL} arrow="right">
<LandingButton href={GITHUB_URL} arrow="right">
Get started
</LandingButton>
<LandingButton href={GITHUB_URL} variant="secondary">
View on GitHub
<LandingButton href={PUB_DEV_URL} variant="secondary">
View on pub.dev
</LandingButton>
</motion.div>

Expand Down Expand Up @@ -245,11 +245,11 @@ export function MixWindsLanding() {
think about layout.
</p>
<div className="mtw-cta-row">
<LandingButton href={PUB_DEV_URL} arrow="right">
Install from pub.dev
<LandingButton href={GITHUB_URL} arrow="right">
Install from GitHub
</LandingButton>
<LandingButton href={GITHUB_URL} variant="secondary">
Read the source
<LandingButton href={PUB_DEV_URL} variant="secondary">
View on pub.dev
</LandingButton>
</div>
</motion.div>
Expand Down
2 changes: 1 addition & 1 deletion components/landing/mix-winds/content.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const DART_SNIPPET = `div('flex flex-col gap-4 rounded-3xl bg-slate-950 p
),
])`;

export const INSTALL_SNIPPET = `flutter pub add mix_winds`;
export const INSTALL_SNIPPET = `flutter pub add "mix_winds:{git:{url: https://github.com/btwld/mix.git, path: packages/mix_winds}}"`;

export const FEATURES = [
{
Expand Down
112 changes: 42 additions & 70 deletions packages/mix_docs_preview/lib/ecosystem/mix_winds.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,78 +8,50 @@ class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return TwScope(
child: Div(
classNames:
'bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-6',
child: Div(
classNames:
'bg-white/10 border border-white/20 rounded-3xl p-6 shadow-2xl',
child: Div(
classNames: 'flex items-start gap-4',
children: [
Div(
classNames:
'w-14 h-14 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center border-2 border-purple-400',
child: const Span(
text: 'SM',
classNames: 'text-white font-semibold text-lg',
child: div('bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-6', [
div('bg-white/10 border border-white/20 rounded-3xl p-6 shadow-2xl', [
div('flex items-start gap-4', [
div(
'w-14 h-14 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center border-2 border-purple-400',
[span('text-white font-semibold text-lg', 'SM')],
),
div('flex-1 min-w-0', [
div('flex items-center gap-2 mb-1', [
h3(
'text-white font-semibold text-lg truncate',
'Sarah Mitchell',
),
span(
'px-2 py-0.5 bg-purple-500/30 text-purple-200 text-xs rounded-full font-medium',
'Admin',
),
]),
p(
'text-slate-300 text-sm mb-4',
'Your profile changes are ready to publish. Review and confirm to update your public information.',
),
Div(
classNames: 'flex-1 min-w-0',
children: [
Div(
classNames: 'flex items-center gap-2 mb-1',
children: const [
H3(
text: 'Sarah Mitchell',
classNames: 'text-white font-semibold text-lg truncate',
),
Span(
text: 'Admin',
classNames:
'px-2 py-0.5 bg-purple-500/30 text-purple-200 text-xs rounded-full font-medium',
),
],
),
const P(
text:
'Your profile changes are ready to publish. Review and confirm to update your public information.',
classNames: 'text-slate-300 text-sm mb-4',
),
Div(
classNames:
'bg-white/5 rounded-xl p-3 mb-4 border border-white/10',
child: Div(
classNames:
'flex items-center gap-2 text-amber-300 text-sm',
children: const [
Span(text: '\u26A0'),
Span(text: 'This action cannot be undone'),
],
),
),
Div(
classNames: 'flex gap-3',
children: [
Div(
classNames:
'flex-1 px-4 py-2.5 bg-white/10 hover:bg-white/20 text-white rounded-xl font-medium border border-white/10 hover:border-white/20 flex items-center justify-center',
child: const Span(text: 'Cancel'),
),
Div(
classNames:
'flex-1 px-4 py-2.5 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-400 hover:to-pink-400 text-white rounded-xl font-medium shadow-lg flex items-center justify-center',
child: const Span(text: 'Save Changes'),
),
],
),
],
),
],
),
),
),
div('bg-white/5 rounded-xl p-3 mb-4 border border-white/10', [
div('flex items-center gap-2 text-amber-300 text-sm', [
span('', '\u26A0'),
span('', 'This action cannot be undone'),
]),
]),
div('flex gap-3', [
button(
'flex flex-1 items-center justify-center rounded-xl border border-white/10 bg-white/10 px-4 py-2.5 font-medium text-white hover:border-white/20 hover:bg-white/20',
[span('', 'Cancel')],
onPressed: () {},
),
button(
'flex flex-1 items-center justify-center rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 px-4 py-2.5 font-medium text-white shadow-lg hover:from-purple-400 hover:to-pink-400',
[span('', 'Save Changes')],
onPressed: () {},
),
]),
]),
]),
]),
]),
);
}
}
Expand Down
8 changes: 4 additions & 4 deletions packages/mix_docs_preview/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ dependencies:
flutter:
sdk: flutter
mix: ^2.1.0
# mix_winds was renamed from mix_tailwinds and is not on pub.dev under the new
# name yet, so it is pinned to the rename commit on btwld/mix main. Revert to
# a hosted `mix_winds: ^0.1.0-alpha.0` once it is published. This package is
# publish_to: none, so the git pin only affects the docs preview build.
# The mix_winds name on pub.dev still resolves to a placeholder package, so
# the preview is pinned to the rename commit. Switch to a compatible hosted
# release once one is published. This package is publish_to: none, so the git
# pin only affects the docs preview build.
mix_winds:
git:
url: https://github.com/btwld/mix.git
Expand Down
38 changes: 37 additions & 1 deletion site-tests/mix-winds-integration.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,12 @@ test('sells the package instead of reporting a pixel diff', () => {
const seam = read('components/landing/mix-winds/ComparisonSeam.tsx')

assert.match(landing, /Get started/)
assert.match(landing, /Install from GitHub/)
assert.doesNotMatch(landing, /Install from pub\.dev/)
assert.match(landing, /flutter pub add|INSTALL_SNIPPET/)
assert.match(content, /flutter pub add mix_winds/)
assert.match(content, /flutter pub add .*mix_winds:\{git:/)
assert.doesNotMatch(content, /mix_winds@\{git:/)
assert.match(content, /path: packages\/mix_winds/)

// No parity percentages, budgets, or pass/fail language on the page.
const pageSource = [landing, content, seam].join('\n')
Expand Down Expand Up @@ -101,6 +105,38 @@ test('shows the functional API with real HTML and Dart highlighting', () => {
assert.match(highlighter, /"dart"/)
})

test('uses the functional API in the ecosystem guide and live preview', () => {
const guide = read('src/content/documentation/mix/ecosystem/mix-winds.mdx')
const preview = read('packages/mix_docs_preview/lib/ecosystem/mix_winds.dart')

for (const source of [guide, preview]) {
assert.match(source, /child: div\(/)
assert.match(source, /\bh3\(/)
assert.match(source, /\bp\(/)
assert.match(source, /\bbutton\(/)
assert.match(source, /onPressed: \(\) \{\}/)
assert.doesNotMatch(source, /child: Div\(/)
assert.doesNotMatch(source, /child: const Span\(/)
}

assert.match(guide, /## Functional API/)
assert.match(guide, /Use the uppercase constructors when you need/)
assert.match(guide, /onDiagnostic:/)
assert.doesNotMatch(guide, /onUnsupported:/)

// Basic usage needs no provider; the parity preview keeps TwScope for
// explicit Tailwind preflight typography.
assert.match(guide, /`TwScope` is optional/)
assert.match(guide, /otherwise uses `TwConfig\.standard\(\)`/)
assert.match(guide, /void main\(\) \{\s+runApp\(\s+MaterialApp\(/s)
assert.match(preview, /return TwScope\(/)

assert.match(guide, /mix_winds:\{git:/)
assert.doesNotMatch(guide, /mix_winds@\{git:/)
assert.match(guide, /placeholder package/)
assert.doesNotMatch(guide, /mix_winds:\s+\^?\d/)
})

test('serves a legible capture on narrow screens', () => {
const content = read('components/landing/mix-winds/content.ts')
const seam = read('components/landing/mix-winds/ComparisonSeam.tsx')
Expand Down
Loading
Loading