Contact person: Cross-Platform UI Library (React Web + React Native) — Refactor & Merge

Phone:Show

Email:Show

Location: Craigieburn, Australia

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"Context
• I have a React.js package (TypeScript + Storybook) with many components using PrimeReact and a custom inline styling system (Chakra-like props).
• I also have a small, incomplete React Native package using Gluestack.
• Goal: merge these into one Node package that serves both React (web) and React Native (mobile) with maximum code reuse.

Non-Negotiables
• Single source of truth for shared logic, types, and tests (no duplication).
• .[login to view URL] / .[login to view URL] only for presentation differences.
• Everything must work in development mode without building after every edit.
• Web Storybook and RN Storybook must consume source via workspace alias/metro resolver so edits in ui/src are immediately visible.
• Same public API on both platforms; event prop unified to onPress (web adapts to onClick).
• PrimeReact for web inputs; Gluestack/native primitives for RN equivalents.
• Hybrid RNW for layouts: use react-native-web for layout primitives (Center/Stack/Flex/Grid/Box) to maximize reuse; keep PrimeReact for rich inputs on web.

Components in Scope
• 19 main components to unify (web version exists in PrimeReact; RN version to be built via Gluestack/native).
Examples include: Button, InputField, Dropdown, Accordion, Confirm, Tooltip, Dialog/Modal, Toast, Tabs, Checkbox, Radio, Switch, Textarea, Badge, Avatar, Progress, Tag/Chip, Pagination, Breadcrumb.
(I already have ~20 components; we will finalize the exact 19 list at kickoff. The scope is 19 components.)
• 2 big components:
1. Form system (form state + field controls + validation + shared logic)
2. Table (data table with sorting/pagination basics; shared logic unified)
• Plus a small set of hooks/utilities to be ported and de-duplicated.

Example of Component Pattern (Web)

Box uses shared logic + a platform view swap. (Showcasing how shared logic feeds a platform element.)

import React, { PropsWithChildren } from "react";

import { IFlexComponent, ResponsiveElement } from "../../../../Factory";
import useSeparator from "../../../../Factory/useSeparator";

const Box =
({ children, ref, ...props }: PropsWithChildren<IFlexComponent>) => {
const { cssProps, nativeProps } = useSeparator(props);

return (
<ResponsiveElement
ref={ref}
additionalStyles={{
display: "block",
}}
cssProps={cssProps}
nativeProps={nativeProps}
children={children}
/>
);
}

export default Box;

What ResponsiveElement does (high-level, no code)
• It’s a view adapter. Given cssProps and nativeProps, it chooses the correct render target:
• Web: styled <div> or a PrimeReact component (e.g., Button, Image, anchor, RouterLink), each wrapped with styled-components.
• It uses a StyleSheetManager to filter invalid DOM props, applies generated classes (from classesFactory), merges additionalStyles + cssProps, and forwards refs correctly.
• In RN, the equivalent will map to Gluestack or RN primitives with a mirrored API so the shared logic stays identical.

Architecture & Repo Layout
• Mono-repo (workspaces) with ui/ as the shared library, apps/web (Vite) and apps/mobile (bare RN + Metro) as demo apps.
• Storybook 9 for web (@storybook/react-vite) and native (@storybook/react-native) using the same imports from the package root.
• Design tokens (/ui/src/theme/[login to view URL]) →
• Web: CSS variables via [login to view URL] (PrimeReact-like theme config accepted).
• Native: theme object via ThemeProvider.native.tsx.
• Live theme switching in both Storybooks.
• SSR-safe shared logic (no direct window in shared code).
• Outputs for publishing: ESM + CJS + Native + Types (tree-shakeable, "sideEffects": false).
/
├─ [login to view URL] # workspaces
├─ [login to view URL]
├─ ui/
│ ├─ src/
│ │ ├─ components/ (19 main + 2 big: Form, Table)
│ │ ├─ layout/ (Center/Stack/Grid/GridItem/Box/Flex ...)
│ │ ├─ hooks/ utils/
│ │ ├─ theme/ ([login to view URL], [login to view URL], [login to view URL])
│ │ ├─ types/ (shared public types)
│ │ └─ [login to view URL] (barrel exports)
│ ├─ .storybook/ # web
│ ├─ .rnstorybook/ # rn
│ ├─ [login to view URL]
│ └─ [login to view URL] # exports map
├─ apps/
│ ├─ web/ # Vite demo
│ └─ mobile/ # RN demo (bare, not Expo)
Import rule (both platforms):
import { Button, Box, Stack } from '@lmb/kitsconcerto';

No deep imports like /dist/....

Dev-Mode Requirements (no rebuild loop)
• Web Storybook: must read from ui/src via TS path alias + Vite alias; HMR reflects changes instantly.
• RN Storybook: Metro must watch ui/src in the monorepo and resolve it correctly (no duplicate React problem).
• No “build package then test” loop during development—edits must show up live in Storybook and demo apps.

Tooling (Latest Compatible)
• React 18+, React Native (latest bare, not Expo), react-native-web (latest), TypeScript 5+, Rollup 4+, Vite 5+, Storybook 9 (web & RN), Jest + @testing-library/*, ESLint + Prettier.

Tests & Quality
• ~75% coverage target.
• Snapshot tests (web/native) + functional RTL tests for key interactions (press/click, input change, dropdown select).
• Lint rules: no unused exports/imports; consistent import/order.
• CI (GitHub Actions): install → lint → test → build (esm/cjs/native/types) → pack (publish dry-run).

Deliverables
1. Refactored monorepo/workspaces per structure above.
2. 19 unified components (web + RN) + 2 big components (Form, Table).
3. Storybook Web + RN with same imports and live theme switch.
4. Demo apps (web + RN) showcasing all ~20 components with theme switching.
5. Automated versioning & changelog (changesets or semantic-release).
6. Publish-ready package with exports map (ESM/CJS/Native/Types, tree-shakeable).
7. Docs: README (usage, theming, tokens), contributor guide, how to run dev mode without builds.

Acceptance Criteria (Fixed)
• One API across platforms; .web/.native only for views; no duplication of types/logic.
• Dev mode works for both Storybooks and demo apps (no manual build step to see changes).
• All 19 components + Form + Table present on both platforms with parity (where applicable).
• PrimeReact used for web inputs; Gluestack/native for RN.
• RNW layouts for maximum reuse.
• Theme control externalized (CSS vars on web, theme object on native) + live switch.
• CI green; tests pass; outputs in dist/esm, dist/cjs, dist/native, dist/types.
• Clean tree: no unused files/code; all exports resolve.

Versioning / Publishing
• Semantic versioning with git tags & changelog; publish to private registry (I hold access).

⸻

Answers to common questions up-front
• React Native version: latest stable bare RN.
• Gluestack vs primitives: Gluestack is primary; can fallback to RN primitives when appropriate.
• PrimeReact scope: core inputs (Button, InputField, Dropdown, etc.) on web.
• SSR: no [login to view URL] now—just SSR-safe shared logic (no runtime errors in server mode).
• Storybook: maintain Storybook 9 for web and RN (no Expo).

⸻

Bidding Instructions (please read before bidding)

I want to have all the details of how you’re going to work. Consider me the manager (I’m a full-stack dev, but I don’t have time to implement).
• Fixed scope: base is 19 components + Form + Table + hooks/utilities, full dev-mode setup, Storybook on both platforms, demo apps showing all components, tests, CI, and publish-ready build.
• If you are new on Freelancer, bid a small amount and write your actual total in the description.
• Please do not bid low and ask for more later—this post is intentionally detailed so you can price accurately." (client-provided description)