feat: CSS showcase updates, Cupertino layout fixes, and Apache-2.0 licensing #754

andycall · 2025-11-26T10:12:07Z

Summary: Migrate WebF packages and Cupertino source headers to Apache-2.0 licensing, enhance CSS use case pages and navigation, refine Cupertino layouts (removing remaining grid usage), and rebuild the animation and accessibility demos.

Licensing changes: Update license fields in cli and package.json files to Apache-2.0, switch WebF Cupertino UI Dart and TypeScript headers to Apache-2.0, and replace webf_modules deeplink and share LICENSE files with the Apache 2.0 text.

Use cases and navigation: Expand and reorganize CSS showcases in DisplayFlowPage, KeyframesPage, TransitionsPage, and InlineFormattingPage, improve the GesturePage examples, and tweak FeatureCatalogPage groupings including RTL related entries.

Cupertino and animation: Remove grid based layouts from the Cupertino icons search and tab photo gallery, ensure tab bodies use scrollable containers, and replace the CSS module based AnimationPage with a self contained React implementation using utility classes.

- Update FeatureCatalogPage to navigate Cupertino UI entry to CupertinoShowcasePage for better organization - Add comprehensive RTL (Right-to-Left) text direction showcases to InlineFormattingPage - Include examples of LTR/RTL comparison, bidirectional text, inline elements in RTL, text alignment, and inline-block behavior 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

- Add comprehensive RTL showcases to InlineFormattingPage with bidirectional text examples - Enhance DisplayFlowPage with display values, normal flow, and width/height behavior - Migrate GesturePage to TailwindCSS with optimized gesture info layout - Add FlutterGestureDetector standalone category in FeatureCatalogPage - Create Forms & Input category and reorganize catalog structure - Enhance KeyframesPage with timing functions, animation properties, multi-step keyframes, and combined animations - Update TransitionsPage styling and examples 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

vercel · 2025-11-26T10:12:12Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
use-case	Ready	Preview	Comment	Nov 26, 2025 10:12am

coderabbitai · 2025-11-26T10:12:27Z

Walkthrough

This PR updates project licenses from GPL v3/AGPL/MIT/ISC to Apache 2.0 across package manifests, source file headers, and LICENSE files. Additionally, it reorganizes use_cases application pages with UI restructuring, accessibility enhancements, and content additions to multiple demo pages.

Changes

Cohort / File(s)	Change Summary
License field updates in package manifests `cli/package.json`, `packages/react-core-ui/package.json`, `packages/vue-core-ui/package.json`, `packages/vue-cupertino-ui/package.json`, `packages/webf-deeplink/package.json`, `packages/webf-share/package.json`	Updated `license` field from MIT/ISC to `Apache-2.0` across six package files.
License header updates in Cupertino UI library `webf_cupertino_ui/lib/src/.dart`, `webf_cupertino_ui/lib/src/.d.ts`	Updated license headers from "GNU AGPL with Enterprise exception" to "Apache License, Version 2.0" across 40+ Dart and TypeScript type definition files (action_sheet, alert, button, checkbox, context_menu, date_picker, form_section, icon, input, list_section, list_tile, modal_popup, radio, search_text_field, slider, sliding_segmented_control, switch, tab_bar, tab_view, text_form_field_row, and related .d.ts files).
LICENSE file replacements `webf_modules/deeplink/LICENSE`, `webf_modules/share/LICENSE`	Replaced entire GPL v3 license text with Apache License 2.0 terms and conditions.
Accessibility page addition `use_cases/src/App.tsx`, `use_cases/src/pages/AccessibilityPage.tsx`	Added new Accessibility route and corresponding AccessibilityPage component with ARIA labels and live region annotations for accessibility announcements.
Animation page restructuring `use_cases/src/pages/AnimationPage.module.css`, `use_cases/src/pages/AnimationPage.tsx`	Removed all CSS module styles and rewrote component UI structure with simplified markup, inline styling, and consistent card-based layout for animation blocks.
Feature catalog reorganization `use_cases/src/pages/FeatureCatalogPage.tsx`	Reorganized feature entries: consolidated Cupertino UI items into single showcase entry, added new Gestures section, commented out Accessibility section, restructured Forms and Others sections.
Gesture page refactoring `use_cases/src/pages/GesturePage.tsx`	Removed CSS module dependency, replaced with inline Tailwind-like classes; reorganized layout into two-column responsive structure with updated gesture state bindings and reset button.
CSS demonstration pages `use_cases/src/pages/css/DisplayFlowPage.tsx`, `use_cases/src/pages/css/InlineFormattingPage.tsx`, `use_cases/src/pages/css/KeyframesPage.tsx`, `use_cases/src/pages/css/TransitionsPage.tsx`	Added new content blocks: DisplayFlowPage added table display and width/height behavior sections; InlineFormattingPage added RTL text direction demonstrations; KeyframesPage replaced modular CSS rendering with self-contained Tailwind-styled blocks and inline keyframes; TransitionsPage re-enabled and expanded previously commented sections.
Cupertino UI demo pages `use_cases/src/pages/cupertino/CupertinoIconsPage.tsx`, `use_cases/src/pages/cupertino/CupertinoTabsPage.tsx`	Updated layout from CSS grid to flex-wrap for responsive item sizing; added overflow-auto for scrollable content areas in tab pages.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Areas requiring extra attention:

AnimationPage.tsx refactoring — Verify that all animation blocks (Fade, Slide, Scale, Rotate, Bounce, Pulse, Combined) maintain functional parity and that animation state logic (isPlaying object) correctly maps to updated classNames.
GesturePage.tsx gesture event wiring — Confirm gesture event handlers (onTap, onDoubletap, onLongpress, onPanstart, onPanupdate, onPanend, onScalestart, onScaleupdate, onScaleend) correctly extract event details and that the two-column layout responsive behavior works as intended.
KeyframesPage.tsx inline styles — Review the newly added <style> block containing inline keyframe definitions (@keyframes slide, slideLinear, fadeIn, colorCycle, shake, wobble, flip) to ensure proper CSS syntax and animation timing.
InlineFormattingPage.tsx RTL duplication — Note that the RTL Text Direction demonstration appears to be inserted twice in the diff; verify this is intentional or a merge artifact.
AccessibilityPage.tsx ARIA implementation — Confirm that aria-labelledby, aria-label, and role="status" attributes are correctly wired for screen reader accessibility.

Possibly related PRs

feat: add accessibility showcase page #751 — Adds and registers AccessibilityPage component with similar ARIA enhancements to use_cases pages.
feat(cupertino): add WebF Cupertino UI package and gallery #753 — Updates license headers across webf_cupertino_ui package files from AGPL to Apache 2.0.

Poem

🐰 Apache wings now carry the code,
From GPL's old, restrictive road!
Pages bloom with gestures and grace,
Accessibility finds its place—
Open and free, a brighter new space! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Title check	✅ Passed	The PR title mentions CSS updates, Cupertino layout fixes, and Apache-2.0 licensing, all of which are present in the changeset. The title accurately reflects the main changes across styling, component layout, accessibility, and license updates.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/cupertino_ui

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 5

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (4)

use_cases/src/pages/css/TransitionsPage.tsx (2)
10-10: Remove unused state variables.

The state variables slow (line 10), g1 (line 39), and f1 (line 42) are declared but never used in the active code. The first two are only referenced in commented-out sections.

Apply this diff to remove unused state:
-  const [slow, setSlow] = useState(false);
-  // Group/child translation
-  const [g1, setG1] = useState(false);
-
-  // Filters and shadow
-  const [f1, setF1] = useState(false);
+  // Filters and shadow
Also applies to: 39-39, 42-42

56-64: Add keyboard accessibility to interactive demo tiles.

These interactive demo tiles use <div onClick={...}> without keyboard support or semantic button elements, preventing keyboard-only users from interacting with the examples.

Consider wrapping the interactive divs in button elements or adding proper keyboard handlers:
 <div className="bg-surface-secondary border border-line rounded-xl p-4 w-full md:w-[280px]">
-  <div onClick={() => setB1(v => !v)} className={[ 'w-20 h-20 bg-blue-300 rounded transition-[transform,background-color] duration-300 ease-in-out cursor-pointer', b1 ? '-translate-y-2 scale-105 bg-blue-400' : '' ].join(' ')} />
+  <button onClick={() => setB1(v => !v)} className="bg-transparent border-0 p-0">
+    <div className={[ 'w-20 h-20 bg-blue-300 rounded transition-[transform,background-color] duration-300 ease-in-out cursor-pointer', b1 ? '-translate-y-2 scale-105 bg-blue-400' : '' ].join(' ')} />
+  </button>
   <div className="text-sm text-fg-secondary mt-2">Click square to toggle transform and bg-color.</div>
 </div>
Apply similar changes to the opacity tile on lines 61-64.
use_cases/src/pages/cupertino/CupertinoIconsPage.tsx (1)
290-304: Fix responsive flex item widths to account for gaps.

The search results use fixed percentage widths (w-1/3 md:w-1/4 lg:w-1/6) with gap-3, but these widths don't account for the gap spacing. At each breakpoint, the total width of items plus gaps exceeds 100%, causing unintended wrapping.

Use responsive flex-basis with gap-adjusted calculations:
                        <div
                          key={iconName}
-                          className="flex flex-col items-center gap-2 p-3 rounded-lg hover:bg-surface-tertiary transition-colors cursor-pointer w-1/3 md:w-1/4 lg:w-1/6"
+                          className="flex flex-col items-center gap-2 p-3 rounded-lg hover:bg-surface-tertiary transition-colors cursor-pointer flex-[0_0_calc(33.333%-0.5rem)] md:flex-[0_0_calc(25%-0.563rem)] lg:flex-[0_0_calc(16.666%-0.625rem)]"
                          title={iconName}
                        >
The calc values account for the gaps:

Mobile (3 cols, 2 gaps): 33.333% - (2/3 × 0.75rem) = 33.333% - 0.5rem

md (4 cols, 3 gaps): 25% - (3/4 × 0.75rem) = 25% - 0.563rem

lg (6 cols, 5 gaps): 16.666% - (5/6 × 0.75rem) = 16.666% - 0.625rem
webf_cupertino_ui/lib/src/modal_popup.dart (1)
204-219: Fix potential crash when there are no popup children

_buildPopupContent currently does:

Line 206: var node = widgetElement.childNodes.first;

Line 207: checks widgetElement.childNodes.isEmpty.

If childNodes is empty, Line 206 will throw a RangeError before the isEmpty guard can run, and node is not used at all. This contradicts the intent to safely handle the empty case with a SizedBox.shrink().

Recommend removing the premature .first access and relying solely on the emptiness check:
-  Widget _buildPopupContent(BuildContext dialogContext) {
-    Widget child;
-    var node = widgetElement.childNodes.first;
-    if (widgetElement.childNodes.isEmpty) {
-      child = const SizedBox.shrink();
-    } else {
+  Widget _buildPopupContent(BuildContext dialogContext) {
+    Widget child;
+    if (widgetElement.childNodes.isEmpty) {
+      child = const SizedBox.shrink();
+    } else {
       child = WebFWidgetElementChild(
         child: WebFHTMLElement(
           tagName: 'BUG',
           controller: widgetElement.ownerDocument.controller,
           parentElement: widgetElement,
           children: widgetElement.childNodes.toWidgetList(),
         ),
       );
     }
This both eliminates the unused node variable and ensures an empty popup element doesn’t crash the widget tree.

🧹 Nitpick comments (7)

use_cases/src/pages/css/InlineFormattingPage.tsx (1)
145-188: Consider adding lang attributes and tightening the Arabic/Hebrew labeling

To improve screen‑reader behavior and i18n clarity:

Mark pure Arabic content and Arabic inline spans with lang="ar" so assistive tech uses the correct voice.

The label “Arabic/Hebrew” (Line 145) currently shows only Arabic; either adjust the label or add a short Hebrew snippet to match.

For example:
-                <div className="text-xs text-fg-secondary mb-2">RTL (Right-to-Left) - Arabic/Hebrew</div>
+                <div className="text-xs text-fg-secondary mb-2">RTL (Right-to-Left) - Arabic</div>

-                <p className="text-[16px] bg-blue-50 p-2 rounded" dir="rtl">
+                <p className="text-[16px] bg-blue-50 p-2 rounded" dir="rtl" lang="ar">
                   هذا نص عربي يتدفق من اليمين إلى اليسار
                 </p>
...
-                <p className="text-[16px] bg-blue-50 p-2 rounded" dir="rtl">
-                  This is English mixed with عربي (Arabic) and numbers 123.
-                </p>
+                <p className="text-[16px] bg-blue-50 p-2 rounded" dir="rtl">
+                  This is English mixed with <span lang="ar">عربي</span> (Arabic) and numbers 123.
+                </p>
...
-                  <span className="bg-yellow-200 px-1">مرحبا</span> بك في
+                  <span className="bg-yellow-200 px-1" lang="ar">مرحبا</span> بك في
...
-                  <span className="bg-green-200 px-1">اختبار RTL</span>
+                  <span className="bg-green-200 px-1" lang="ar">اختبار RTL</span>
You could similarly add lang="ar" to the alignment and inline‑block RTL paragraphs if you want full coverage.
use_cases/src/pages/css/DisplayFlowPage.tsx (3)

31-58: Solid “More display values” examples; only tiny copy/layout nits

The table and display: contents demos are clear and consistent with the rest of the page; structure and classes look fine. One optional clarity tweak: the helper text for display: contents could explicitly mention that the wrapper’s children become direct flex items of the pink border container, to tie it back to what users see.

81-94: Normal-flow section is correct; consider aligning labels with actual display mode

The block vs “inline” contrast is implemented with block and inline-block classes (for better box visibility), which is technically accurate but the pill labels say “Inline 1/2/3”. To avoid confusing learners, you might either rename the labels to “Inline-block 1/2/3” or switch the spans to inline and adjust padding/visuals.

95-118: Width/height behavior block looks good; optional responsiveness tweak

The three sub-examples correctly illustrate block vs inline vs inline-block sizing. On very narrow screens, the fixed width: '200px' spans might cause horizontal overflow; if that’s undesirable, you could add max-w-full (or similar) to keep them within the container.
use_cases/src/pages/css/KeyframesPage.tsx (1)
254-290: Good inline keyframe definitions; consider placement for render optimization.

The inline <style> block correctly defines all custom keyframes used throughout the page. However, placing it at the end of the JSX means it's parsed after the animated elements are rendered, which could cause a brief flash of unstyled animations on initial load.

Consider moving the <style> block to the beginning of the JSX (right after the opening <div>), or extracting these keyframes to a CSS file that's imported at the top:
  return (
    <div id="main" className="min-h-screen w-full bg-surface">
+     <style>{`
+       @keyframes slide { ... }
+       /* ... other keyframes ... */
+     `}</style>
      <WebFListView className="w-full px-3 md:px-6 max-w-5xl mx-auto py-6">
        ...
      </WebFListView>
-     <style>{`...`}</style>
    </div>
  );
use_cases/src/pages/cupertino/CupertinoTabsPage.tsx (1)
152-169: Consider removing redundant nested overflow containers.

The Chat tab has overflow-auto on both the outer container (line 152) and the inner messages list (line 155). Nested scrollable regions can create UX confusion with nested scroll events and potential double scrollbars. Since the outer container already has h-full overflow-auto, the inner overflow-auto on line 155 is likely unnecessary.

Apply this diff to simplify the scroll hierarchy:
-                      <div className="space-y-2 overflow-auto">
+                      <div className="space-y-2">
webf_cupertino_ui/lib/src/list_section.dart (1)
97-110: Deduplicate margin computation logic

The margin computation for useInsetGrouped == true vs false is currently identical, so the outer if (useInsetGrouped) adds complexity without changing behavior. You can simplify this block while preserving semantics:
-    EdgeInsetsGeometry? margin;
-    if (useInsetGrouped) {
-      if (styleMargin != EdgeInsets.zero) {
-        margin = styleMargin;
-      } else {
-        margin = null;
-      }
-    } else {
-      if (styleMargin != EdgeInsets.zero) {
-        margin = styleMargin;
-      } else {
-        margin = null;
-      }
-    }
+    EdgeInsetsGeometry? margin;
+    if (styleMargin != EdgeInsets.zero) {
+      margin = styleMargin;
+    } else {
+      margin = null;
+    }
Down below, margin is already handled differently for inset vs non‑inset variants, so this refactor is behavior‑preserving and reduces duplication.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e6231f0 and 0541e97.

📒 Files selected for processing (52)

cli/package.json (1 hunks)
packages/react-core-ui/package.json (1 hunks)
packages/vue-core-ui/package.json (1 hunks)
packages/vue-cupertino-ui/package.json (1 hunks)
packages/webf-deeplink/package.json (1 hunks)
packages/webf-share/package.json (1 hunks)
use_cases/src/App.tsx (2 hunks)
use_cases/src/pages/AccessibilityPage.tsx (2 hunks)
use_cases/src/pages/AnimationPage.module.css (0 hunks)
use_cases/src/pages/AnimationPage.tsx (1 hunks)
use_cases/src/pages/FeatureCatalogPage.tsx (1 hunks)
use_cases/src/pages/GesturePage.tsx (6 hunks)
use_cases/src/pages/css/DisplayFlowPage.tsx (2 hunks)
use_cases/src/pages/css/InlineFormattingPage.tsx (1 hunks)
use_cases/src/pages/css/KeyframesPage.tsx (1 hunks)
use_cases/src/pages/css/TransitionsPage.tsx (2 hunks)
use_cases/src/pages/cupertino/CupertinoIconsPage.tsx (2 hunks)
use_cases/src/pages/cupertino/CupertinoTabsPage.tsx (2 hunks)
webf_cupertino_ui/lib/src/action_sheet.dart (1 hunks)
webf_cupertino_ui/lib/src/alert.dart (1 hunks)
webf_cupertino_ui/lib/src/button.dart (1 hunks)
webf_cupertino_ui/lib/src/checkbox.d.ts (1 hunks)
webf_cupertino_ui/lib/src/checkbox.dart (1 hunks)
webf_cupertino_ui/lib/src/context_menu.dart (1 hunks)
webf_cupertino_ui/lib/src/date_picker.dart (1 hunks)
webf_cupertino_ui/lib/src/form_section.dart (1 hunks)
webf_cupertino_ui/lib/src/icon.dart (1 hunks)
webf_cupertino_ui/lib/src/input.dart (1 hunks)
webf_cupertino_ui/lib/src/list_section.d.ts (1 hunks)
webf_cupertino_ui/lib/src/list_section.dart (1 hunks)
webf_cupertino_ui/lib/src/list_tile.d.ts (1 hunks)
webf_cupertino_ui/lib/src/list_tile.dart (1 hunks)
webf_cupertino_ui/lib/src/modal_popup.dart (1 hunks)
webf_cupertino_ui/lib/src/radio.d.ts (1 hunks)
webf_cupertino_ui/lib/src/radio.dart (1 hunks)
webf_cupertino_ui/lib/src/search_text_field.dart (1 hunks)
webf_cupertino_ui/lib/src/slider.d.ts (1 hunks)
webf_cupertino_ui/lib/src/slider.dart (1 hunks)
webf_cupertino_ui/lib/src/sliding-segmented-control.d.ts (1 hunks)
webf_cupertino_ui/lib/src/sliding_segmented_control.dart (1 hunks)
webf_cupertino_ui/lib/src/switch.d.ts (1 hunks)
webf_cupertino_ui/lib/src/switch.dart (1 hunks)
webf_cupertino_ui/lib/src/tab-scaffold.d.ts (1 hunks)
webf_cupertino_ui/lib/src/tab-view.d.ts (1 hunks)
webf_cupertino_ui/lib/src/tab.d.ts (1 hunks)
webf_cupertino_ui/lib/src/tab_bar.d.ts (1 hunks)
webf_cupertino_ui/lib/src/tab_bar.dart (1 hunks)
webf_cupertino_ui/lib/src/tab_scaffold.dart (1 hunks)
webf_cupertino_ui/lib/src/tab_view.dart (1 hunks)
webf_cupertino_ui/lib/src/text_form_field_row.dart (1 hunks)
webf_modules/deeplink/LICENSE (1 hunks)
webf_modules/share/LICENSE (1 hunks)

💤 Files with no reviewable changes (1)

use_cases/src/pages/AnimationPage.module.css

🧰 Additional context used

🧠 Learnings (8)

📓 Common learnings

Learnt from: CR
Repo: openwebf/webf PR: 0
File: webf_apps/vue-cupertino-gallery/CLAUDE.md:0-0
Timestamp: 2025-09-22T15:33:18.528Z
Learning: Applies to webf_apps/vue-cupertino-gallery/src/**/*.vue : Use flutter-cupertino- prefixed custom elements for WebF Cupertino components in Vue templates

Learnt from: CR
Repo: openwebf/webf PR: 0
File: webf_apps/vue-cupertino-gallery/CLAUDE.md:0-0
Timestamp: 2025-09-22T15:33:18.528Z
Learning: Applies to webf_apps/vue-cupertino-gallery/src/**/*.{css,scss,vue} : Prefer CSS transforms for animations to improve performance