Refactor translate to react#30
Open
AnaCarolinaMello wants to merge 405 commits into
Open
Conversation
- Ports Drawer.vue to React TSX with full DrawerProps interface - Follows Dialog pattern: Overlay + useControllable + useTransition - Slides from 4 positions (right/left/top/bottom) with 0.5s ease transition - Renders via portal to document.body using Overlay (zIndex 1001) - Mobile detection forces position=bottom and width=100% on narrow screens - Creates Drawer.css with position-based transform transitions and .active class - Updates Drawer.test.tsx with 7 tests covering render, portal, onChange, positions
- Tab: useControllable<number> with defaultValue 0, index-based active state, notCard variant - Tab.module.css: tabButton.active with shadow-neutral-selected - Pagination: useControllable<number>, -1 sentinel ellipsis, chevron_left/chevron_right nav - Pagination.module.css: pageButton.active with bg-primary-interaction-default - 15 tests passing for both components
- Port Dropdown.vue to Dropdown.tsx using ExpandableContainer - Add DropdownOption and DropdownOptions as module-scope functions - Attach Dropdown.Options and Dropdown.Option as static properties - Implement getObject mode, searchable filtering, recursive nested groups - Add Dropdown.module.css with groupHeader, optionItem, searchInput classes - Add 9 passing tests covering all acceptance criteria
- Ports Accordion.vue to React TSX with full AccordionProps interface - Uses useControllable<boolean> for controlled/uncontrolled expanded state - Implements ResizeObserver on cardRef + contentRef for dynamic height measurement - Implements MutationObserver on contentRef (childList, subtree, data-max-height attr) - Post-render resize() via unconditional useEffect (Vue onUpdated equivalent) - Duration clamped to 150-1000ms range via Math.min/Math.max - Chevron uses Material Symbols expand_more with rotate(180deg) CSS transition - Creates Accordion.module.css with .accordion, .header, .chevron, .content classes - Updates Accordion.test.tsx with 6 tests covering render, toggle, disabled, chevron state
…, clear, and getObject - Port Select.vue to React TSX using SelectContainer + SelectContent + Option - Support single and multiple mode (Checkbox per option in multi) - Controlled (value+onChange) and uncontrolled (defaultValue) via useControllable - Searchable, clearable, getObject, disabled, isError, secondary props - All 10 tests passing
- Stepper: useControllable<number>, circle icons, connecting lines, no version prop - Tracks passedIn set and biggerStepSelected state for step history - CSS variable --stepper-bg injected via style prop for background blending - noClick prop disables step navigation - Stepper.module.css: circle.active, circle.past, circle.skipped, connector states - 7 tests passing
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…mponents - Implement Calendar.tsx with date/period/compare selection modes - Add CalendarDay compound sub-component for individual day cells - Add CalendarDateDialog compound sub-component for month/year picker - Attach Calendar.Day and Calendar.DateDialog as static properties - Use useRef(false) for isBack slide direction (not useState per plan spec) - Use useTransition hook for slide-fade month transitions - Generate month grid via getArrayMonthDay from utils (no date library) - Add Calendar.module.css with slide-fade-forward/back animations - Add Calendar.test.tsx with 11 passing tests
- Port AutoComplete.vue to React TSX using SelectContainer + SelectContent + Option - Internal searchText state not exposed via onChange - Controlled and uncontrolled modes via useControllable - getObject mode emits full option object, 6 tests passing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Port RoundMenu.vue to React TSX with Math.cos/Math.sin item positioning - useState for expand/collapse, translate3d transforms - 8 tests passing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…egration - Port ColorPicker.vue (594 lines) to React TSX with canvas-based color area - Hue/opacity sliders, 5 color type toggles, drag interactions - Window mousemove/touchmove listeners with cleanup - Wire Input type="color" to render ColorPicker popover - 10 tests passing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- TagSelect, Filter, Navbar, DatePicker stubs (render-without-crash) - All 4 tests passing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…d ROADMAP updated Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ble mode - Port TagSelect.vue to React TSX with useControllable<any[]> - StatusBadge tags with delete, searchable + creatable support - Option toggle, isObject utility, 11 tests passing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…x sub-options - Port Filter.vue to React TSX with useControllable<Record<string, any[]>> - Category expand/collapse via max-height CSS transition (not useTransition) - Checkbox sub-options, Clear/Apply buttons, 11 tests passing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Port DatePicker.vue to React TSX with Calendar + ExpandableContainer - useControllable for value, working value for in-progress selection - Clear/apply/compare action buttons, 8 tests passing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ve layout - Port Navbar.vue to React TSX with Dropdown for sub-navigation items - Logo/profile slots, plain nav items for leaf options - Navigation role, icon support, 5 tests passing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…OADMAP updated Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- 10/10 plans executed across 2 waves - 17 composite components migrated with 151 tests passing - Verification passed: 5/5 success criteria verified Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Create DatePicker.stories.tsx with @storybook/react imports - Add Primary, Lang, Period, Compare, MinDate, MaxDate, Disabled, Required, IsError stories - Delete old DatePicker.stories.ts (Vue/storybook-vue3) - Delete DatePicker.mdx
- Create Pagination.stories.tsx with Primary story (useState for page) - Create Stepper.stories.tsx with Primary, Sizes, Disabled, AllowedSkip stories - Delete Pagination.stories.ts (Vue), Stepper.stories.ts (Vue) - Delete Pagination.mdx, Stepper.mdx - Stepper uses index-based value (no version prop per STATE.md decision)
- Delete legacy Vue-era Input.mdx that caused dynamic import failures - Input.stories.tsx already exists and works correctly
- Create Navbar.stories.tsx with Primary and CustomSlots stories using @storybook/react - Create ColorPicker.stories.tsx with Primary, NoAlpha, and Disabled stories - Delete old Navbar.stories.ts and Navbar.mdx (Vue/storybook-vue3) - Delete old ColorPicker.stories.ts and ColorPicker.mdx (Vue/storybook-vue3)
- Create Carousel.stories.tsx with Primary, Interval, Circular, Disabled, Vertical stories - Create RoundMenu.stories.tsx with Primary story (9-item radial menu) - Delete Carousel.stories.ts (Vue), RoundMenu.stories.ts (Vue) - Delete Carousel.mdx, RoundMenu.mdx - Carousel uses autoplay/autoplayInterval instead of Vue interval/circular props - RoundMenu options use onClick instead of action callback
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.