Rebuild admin UI with React + Tailwind CSS v4 + shadcn/ui#187
Open
bordoni wants to merge 16 commits into
Open
Conversation
Replace the jQuery/Select2/PHP template admin interface with a modern React component architecture. Each admin page renders as a separate React root mounted on #fakerpress-react-root, using lazy-loaded page components, React Hook Form for state, and the existing REST API for data generation. PHP refactoring: - Unify container usage in Factory classes with helper functions - Convert Ajax.php static methods to instance methods - Add DI-friendly instance methods to Plugin.php - Mark Field.php as @deprecated - Add wp_localize_script page config bridge to all View classes Build pipeline: - Switch from npm to Bun, add React 18, Tailwind v4, shadcn/ui - Configure webpack with @tailwindcss/postcss for packages/ - Register React bundle in Assets.php with conditional loading - Set up Jest with jsdom, @testing-library/react, WordPress mocks React components (22 shadcn/ui + 9 custom): - Form: RangeInput, ComboboxMulti, DateRangeField, MetaFieldRules, TaxonomyFieldRules, GenerateButton, FormField - Layout: PageLayout, AdminNotice - Hooks: usePageConfig, useGenerateModule (with batching), useAsyncSearch (debounced AJAX) Pages migrated: Settings, Terms, Users, Comments, Attachments, Posts Tests: 42 Jest tests (components, hooks, pages) + 11 WPUnit tests
- Delete .nvmrc (no longer needed with Bun) - Update AGENTS.md: prerequisites table, JS/CSS section heading, and all npm run commands → bun run - Update CI js-build job: setup-node+npm ci → oven-sh/setup-bun+bun install/run
- Replace @import "tailwindcss" with partial imports (theme + utilities) to skip preflight and prevent global reset leaking into WP admin - Add minimal scoped reset in @layer base targeting #fakerpress-react-root - Add StripTailwindLayerHacksPlugin webpack plugin to remove Tailwind v4's :not(#\#) cascade-compatibility shims from compiled CSS assets - Add postcss.config.js to route package CSS through @tailwindcss/postcss - Document Tailwind/WP admin pitfalls in CLAUDE.md (formerly AGENTS.md)
…ter-code-structure
- Fix all Tailwind classes from `fp-*` dash notation to `fp:*` colon notation - Fix variant ordering: `fp:hover:`, `fp:last:`, `fp:sm:` (prefix always first) - Document the correct `fp:` colon prefix rule in AGENTS.md - Add scoped CSS variables and base styles to globals.css - Add StripTailwindLayerHacksPlugin and minor webpack config tweaks Tailwind v4 `prefix(fp)` generates `.fp\:flex` selectors — the dash form `fp-flex` matches nothing and styles silently fail.
- Add @config directive to globals.css - Switch box-sizing reset to :where(#fakerpress-react-root) for lower specificity - Add :where([data-fp-root]) resets for all WP admin form element overrides - Update color tokens to WP admin blue palette - Remove legacy .__fakerpress block from admin.pcss (~433 lines) - Add data-fp-root attribute to all PHP template root divs
- Set data-fp-root on document.body so CSS resets apply to all WP form elements - Simplify DateRangeField to value/onChange API; export getPresetRange helper - Initialise date default values with computed preset dates (not empty strings) - Add tooltip props to all FormField instances on Attachments page - Reduce button/input sizes one step for WP admin density (h-9→h-8, etc.) - Add build:dev script to package.json
… reset - Add @csstools/postcss-is-pseudo-class with onComplexSelector: 'ignore' to postcss.config.js - Patch postcss-preset-env in .pcss webpack pipeline to also suppress warning - Move CSS vars into @layer fp-base for internal cascade organization - Promote WP admin resets out of @layer base (unlayered beats WP unlayered via source order) - Add missing resets for headings, links, lists, and paragraphs to block WP admin bleed
…onents - ReactAssetTest: register React bundle on an active admin page before asserting - jest: ignore the dev/ Bun sub-project so its bun:test files don't run under Jest - date-range-field/combobox-multi/meta-field-rules: update stale tests to the current component APIs (value/onChange, aria-labelled remove controls, inputs)
Make the X icon smaller (size-2.5) and turn the remove wrapper into a centered inline-flex square so the rounded hover background aligns to the badge instead of hugging the icon's text box.
…ound Add a transparent base border to dropdown options and apply a visible border plus accent background on hover and keyboard highlight so the active option stands out clearly.
- cn(): configure tailwind-merge with the fp: prefix so className overrides (radius, border, etc.) actually win over component base classes instead of being silently dropped - multi-select badges: give selected items a visible border and softer rectangular corners (rounded-md) instead of full pills - switch: replace the transparent border with a visible foreground/20 border
- Migrate taxonomy term search from AJAX to REST (/terms/search) - Add per-post-type default meta (_thumbnail_id) via the fakerpress.posts.default_meta filter - Pre-fill and non-destructively merge default meta on post type change - Guard Meta::generate() so under-configured meta types skip instead of fataling - Restyle Taxonomy/Meta Field Rules from box to header + divider - Move "Add Rule" buttons to the right - Document that JS/CSS changes require recompiling
- Add attachment meta config panel (Stored Data id/url + Providers) - Add a per-rule Weight field to every meta type - Pre-configure default _thumbnail_id (store=id, providers, weight 75) so it renders complete and generates a featured image - Fix meta type to backend mapping: number -> numbers, drop unsupported date, reshape ranged configs to positional [min,max] arrays, add config panels for wp_query / person / geo / company - Enforce canonical config key order in transform so positional array_values() maps correctly regardless of UI interaction order - Fix taxonomy mapping: emit the 'taxonomy' key (not 'taxonomy_rules') and a 'qty' range (not 'quantity') so terms are actually applied; 'rate' already covers the old taxonomy 'weight' concept
- Add RuleCard/RuleField (components/form/rule-card.tsx): a white card per rule with a numbered badge, header − / + controls, and label-on-left field rows; removes the fragmented side-rail layout - Rebuild Meta and Taxonomy rule rows and every per-type config panel on the new layout, matching the stable UI's native-WP form feel - Add attachment Width/Height range fields; transform special-cases attachment so weight stays in slot 3 (store, providers, weight, width, height) - Pre-fill a filterable default taxonomy rule (Categories + Tags, Rate 85, Qty 1-4) via the fakerpress.posts.default_taxonomy filter - White card backgrounds on all rule rows
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.
Summary
@tailwindcss/postcss, andfp:class prefix for CSS isolation from WordPress adminLatest changes
#fakerpress-react-rootspecificity with zero-specificity:where([data-fp-root])attribute scoping so WordPress admin form styles are cleanly overridden without!important.__fakerpressstyles fromadmin.pcssDateRangeFieldto a singlevalue/onChangeprop pair; fixed default dates being initialised as empty stringsdata-fp-rootondocument.bodyin JS and on template root divs in PHP so resets apply globallyTest plan
bun install && bun run build— verifybuild/admin.js,build/admin.css, andbuild/admin.asset.phpare producedbun run test— verify all 42 Jest tests passcomposer test:wpunit— verify all WPUnit tests pass (existing + 11 new)