Repository navigation
feat(react-native): @hopline/ux4g-react-native — all 41 UX4G components - #11
Merged
Merged
Conversation
…onents Port the full UX4G component set to React Native (RN primitives + react-native-svg) against the shared design tokens, with a ThemeProvider context and a tsup ESM+CJS+dts build. - 41 components across actions/forms/display/feedback/overlay/data/navigation/media/accessibility - Strict TypeScript, no any/unknown; 494 tests across 43 suites (RNTL mounts every component) + a public-API integration suite - Expo SDK 56 gallery example (examples/rn-playground) device-QA'd: Android 41/41 render with 0 ErrorBoundary trips; iOS bundle gate + live render confirmed - Button: fixed-height label no longer clips descenders (dropped redundant paddingVertical)
Deploying ux4g with
|
| Latest commit: |
ce8a1f7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a3dcc77a.ux4g.pages.dev |
| Branch Preview URL: | https://worktree-react-native-mvp.ux4g.pages.dev |
…ease @hopline/ux4g-react-native 0.1.0 - Single source of truth for design tokens: tokens/ux4g.primitives.tokens.json (DTCG) -> scripts/gen-tokens.mjs -> src/tokens.generated.ts, consumed by theme.ts. A snapshot test guards exact token values (no behaviour change across all 41 components). - Perf: Select now virtualizes its option list with FlatList (long lists mount only the visible window); items/selected memoised. - Add package README (install, theming, 41-component list, token pipeline, performance + native-bridge notes). - 496 tests / 44 suites green; tsc clean; no any/unknown; ESM+CJS+dts build.
…-mvp # Conflicts: # pnpm-lock.yaml
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.
What
Adds
@hopline/ux4g-react-native(v0.1.0) — a full React Native port of the UX4G design system, sibling to the web@hopline/ux4g-reactpackage in the same pnpm monorepo. All 41 components are reimplemented against the shared design tokens, using RN primitives (View/Text/Pressable/TextInput/Modal/ScrollView) +react-native-svg(icons, Chart, IndiaMap). Theming flows through aThemeProvider/useUX4GThemecontext with an optionaltheme/primary/secondaryoverride.Components: actions (Button, IconButton), forms (Input, Textarea, Select, Checkbox, Radio, Switch, Search, DatePicker, RangeSlider, ColorPicker, FileUpload), display (Card, Badge, Chip, Avatar, Comment), feedback (Alert, Progress, Spinner, EmptyState, FeedbackWidget), overlay (Modal, Tooltip, Menu, Toast, Popover), data (Table, Accordion, Pagination, List, Chart, IndiaMap), navigation (Tabs, Breadcrumb, Stepper, Navbar, Footer), media (Carousel), accessibility (AccessibilityWidget).
How it's built
lib: ["ES2020"](no DOM lib)..d.ts, withreact/react-native/react-native-svgexternalized (peer deps).examples/rn-playgroundexercising all 41 components, each isolated in its own ErrorBoundary cell.Verification
any/unknownacross library and example; the 41-component gallery type-checks against the published.d.ts(a type-level integration test of every public API).@testing-library/react-nativemounts every component) + a public-API integration suite.expo exportbundle gate passed for both iOS and Android (Hermes.hbcfor each target).uiautomatorconfirms 41/41 component cells render with 0 ErrorBoundary trips across the full scroll; screenshots of every section incl. the SVG Chart and IndiaMap choropleth.Notes
Buttonfix: a fixed height combined with vertical padding + border was clipping label descenders; dropped the redundantpaddingVertical. Covered by a new regression test.dist/,node_modules/, and local tooling files are gitignored / excluded from this PR.