Contact person: Cross-Platform React Component Library -- 2

Phone:Show

Email:Show

Location: Craigieburn, Australia

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"What I Already Have
• A React.js package (TypeScript + Storybook) with many components using PrimeReact and my own inline styling system (Chakra-like props).
• A small, incomplete React Native package using Gluestack.
• A Node package in the mix.
• I tried merging them myself, but it’s error-prone and time-consuming. I need someone to deliver a clean, working structure.

Goal

Merge everything into one Node package that serves both React (web) and React Native (mobile) with maximum code reuse.
• Single source of truth for shared logic, types, and tests.
• Use .[login to view URL] / .[login to view URL] only where implementations differ (DOM/PrimeReact vs RN/Gluestack).
• Same public API on both platforms.
• Everything must work in development mode — for example, if I edit shared logic, I want to see the change directly in Storybook without running a build step each time.

Initial Surface

The interface is not just a few primitives. I already have around 20 components (Button, InputField, Dropdown, etc.) plus layout primitives (Center, Stack, Grid, GridItem, Box, Flex). All of these need to be merged and unified under the new cross-platform package.

Architecture
• Sharing strategy:
• Shared logic, props, and tests live in ui/src.
• Presentation splits into .[login to view URL] and .native.tsx.
• Event prop normalized to onPress across platforms (web adapter binds it to onClick).
• Web stack: React (latest), PrimeReact, Vite demo app, Storybook for web.
• Native stack: React Native (latest bare RN, not Expo), Gluestack, Metro demo app, Storybook for RN.
• react-native-web usage: Hybrid — RNW for layout primitives (Center/Stack/Flex/Grid/Box) to maximize reuse; PrimeReact for inputs on web.
• Theming & external control:
• Design tokens in /ui/src/theme/tokens.ts.
• Web: tokens → CSS variables, via ThemeProvider that accepts PrimeReact-like config.
• Native: tokens → JS theme object with ThemeProvider.
• Live theme switching supported in both Storybooks.
• Module outputs: ESM + CJS + Native + Types (tree-shakeable).
• SSR compatibility: enabled in shared logic.
• Targets: iOS 13+, Android 8+, modern web browsers.

Monorepo Layout (Workspaces): similar to this
/
├─ [login to view URL] # workspaces
├─ [login to view URL]
├─ ui/
│ ├─ src/
│ │ ├─ components/
│ │ │ ├─ Button/
│ │ │ │ ├─ [login to view URL]
│ │ │ │ ├─ [login to view URL]
│ │ │ │ └─ [login to view URL]
│ │ │ ├─ InputField/...
│ │ │ ├─ Dropdown/...
│ │ │ └─ (other components up to ~20)
│ │ ├─ layout/
│ │ │ ├─ [login to view URL]
│ │ │ ├─ [login to view URL]
│ │ │ └─ [login to view URL]
│ │ ├─ hooks/
│ │ ├─ utils/
│ │ ├─ theme/
│ │ │ ├─ [login to view URL]
│ │ │ ├─ [login to view URL]
│ │ │ ├─ [login to view URL]
│ │ │ └─ [login to view URL]
│ │ ├─ types/
│ │ └─ [login to view URL]
│ ├─ .storybook/ # Storybook (web)
│ ├─ .rnstorybook/ # Storybook (RN)
│ ├─ [login to view URL]
│ └─ [login to view URL]
├─ apps/
│ ├─ web/ # Vite demo app
│ └─ mobile/ # RN demo app


Import rule:
import { Button } from '@package';


❌ Never import from /dist/...

Package Exports (Proposed) (Open for suggestions)

{
"name": "@package",
"main": "dist/cjs/[login to view URL]",
"module": "dist/esm/[login to view URL]",
"react-native": "dist/native/[login to view URL]",
"types": "dist/types/[login to view URL]",
"exports": {
".": {
"types": "./dist/types/[login to view URL]",
"import": "./dist/esm/[login to view URL]",
"require": "./dist/cjs/[login to view URL]",
"react-native": "./dist/native/[login to view URL]"
}
},
"sideEffects": false
}
Tooling
• React 18+, React Native latest bare, react-native-web latest, TypeScript 5+, Rollup 4+, Vite 5+, Storybook 9 (web & RN), Jest + RTL.
• Linting: ESLint + Prettier; no unused exports/imports.
• Testing: ~75% coverage (unit tests for shared logic, snapshot/render tests for platform views).
• CI: GitHub Actions (install → lint → test → build → pack).

Deliverables
1. Refactored monorepo/workspaces.
2. Build scripts for esm/cjs/native/types, storybook, test, lint.
3. Reusable tests (shared + platform).
4. Storybook (Web + RN) with same imports and live theme switch.
5. Example apps (web + mobile) consuming the package from registry/tarball.
6. Publish-ready package with proper exports map.
7. Docs (usage, theming, tokens, contributing).
8. Everything works in development mode without needing builds after each change.

Acceptance Criteria
• Single API across platforms; same imports.
• Shared logic/types/tests in one place; no duplication.
• .[login to view URL] only where needed.
• Theming externalized (CSS vars on web, theme object on native) with live switch.
• PrimeReact on web, Gluestack on native, RNW for layouts.
• Outputs: dist/esm, dist/cjs, dist/native, dist/types.
• Example apps render all components and theme switching.
• CI passes.
• Clean tree: no unused files, no unused code, all exports resolve.
• All changes visible immediately in development mode (no manual build required for Storybook or demo apps).

⸻

I want to have all the details of how you are going to work, so consider me as the manager — I am a full stack developer but I have no time to develop it myself. Whoever is interested, read carefully before bidding and provide your price." (client-provided description)