Skip to content

Commit 06d27cf

Browse files
IvanIhnatsiukexploIFmaksymilianrojekkacperzolkiewski
authored
fix: proper layout calculation 7m (#11)
* chore: release 0.2.1 (software-mansion#338) Release 0.2.1 * feat: initialize Vite + React web example (software-mansion#326) Initialize Vite + React web example Changes: - Created new web example in apps/example-web with React 19 and Vite - Configured Turbo with build:web task - Added workspace to monorepo configuration - Updated ESLint and .gitignore for web build output - Updated tsconfig files for monorepo setup - extracted common config options to `tsconfig.base.json` iOS/Android example app should work as before, no changes. Running web example: 1. Install dependencies: `yarn install` in root directory 2. Start the dev server: `turbo run dev` in root or `yarn dev` in /apps/example-web directory 3. The app should now be running at `http://localhost:5173`. <img width="300" alt="CleanShot 2025-12-15 at 13 34 50@2x" src="https://github.com/user-attachments/assets/fa12447b-aba1-48a2-b96f-30939ca804b1" /> --------- Co-authored-by: Igor Furgała <74370735+exploIF@users.noreply.github.com> * fix: cursor position when inserting image (software-mansion#337) Fixes: software-mansion#329 1. Go to Example app 2. Add `<html><p><img src="https://picsum.photos/id/1/200/200" width="200" height="200"/></p></html>` through `Set input's value` button 3. See that cursor is applied after image Before: https://github.com/user-attachments/assets/258132ae-1bf4-43e5-b08f-b8ade46ade67 After: https://github.com/user-attachments/assets/6dede546-471c-489c-81e5-7e36f80377d4 | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | Android | ❌ | * fix: remove unused code * fix: update contentSize size * fix: return anyTextHaveBeenModified * fix: use self.bounds.size * fix: use contentSize * feat: proper layout handling * fix: improve button layout * fix: better naming * fix: remove default value * fix: rebase with latest development --------- Co-authored-by: Igor Furgała <74370735+exploIF@users.noreply.github.com> Co-authored-by: Maksymilian Rojek <58428606+maksymilianrojek@users.noreply.github.com> Co-authored-by: Kacper Żółkiewski <74975508+kacperzolkiewski@users.noreply.github.com>
1 parent 162fa73 commit 06d27cf

50 files changed

Lines changed: 2913 additions & 882 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/ci.yml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,37 @@ jobs:
5353
- name: Build package
5454
run: yarn prepare
5555

56+
build-web:
57+
runs-on: ubuntu-latest
58+
env:
59+
TURBO_CACHE_DIR: .turbo/web
60+
steps:
61+
- name: Checkout
62+
uses: actions/checkout@v4
63+
64+
- name: Setup
65+
uses: ./.github/actions/setup
66+
67+
- name: Cache turborepo for Web
68+
uses: actions/cache@v4
69+
with:
70+
path: ${{ env.TURBO_CACHE_DIR }}
71+
key: ${{ runner.os }}-turborepo-web-${{ hashFiles('yarn.lock') }}
72+
restore-keys: |
73+
${{ runner.os }}-turborepo-web-
74+
75+
- name: Check turborepo cache for Web
76+
run: |
77+
TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:web --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:web').cache.status")
78+
79+
if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then
80+
echo "turbo_cache_hit=1" >> $GITHUB_ENV
81+
fi
82+
83+
- name: Build example for Web
84+
run: |
85+
yarn turbo run build:web --cache-dir="${{ env.TURBO_CACHE_DIR }}"
86+
5687
build-android:
5788
runs-on: ubuntu-latest
5889
env:

‎apps/example-web/README.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# React Native Enriched Web Example
2+
3+
This is a [**Vite**](https://vite.dev) + [**React**](https://react.dev) web example for the React Native Enriched text input component, bootstrapped with Vite's React template.
4+
5+
# Getting Started
6+
7+
## Step 1: Install dependencies
8+
9+
From the root of the monorepo, install all workspace dependencies:
10+
11+
```sh
12+
yarn install
13+
```
14+
15+
## Step 2: Start the development server
16+
17+
Run the following command from the root of the monorepo or from the `apps/example-web` directory:
18+
19+
```sh
20+
# From root - using Turbo
21+
yarn example-web dev
22+
23+
# OR directly in this workspace
24+
yarn dev
25+
```
26+
27+
The app should now be running at `http://localhost:5173`.
28+
29+
## Step 3: Modify your app
30+
31+
Now that you have the development server running, let's make changes!
32+
33+
Open `src/App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes.
34+
35+
## Build for production
36+
37+
To create an optimized production build:
38+
39+
```sh
40+
yarn build:web
41+
```
42+
43+
The built files will be in the `dist/` directory.
44+
45+
## Preview the production build
46+
47+
To preview the production build locally:
48+
49+
```sh
50+
yarn preview
51+
```
52+
53+
# Learn More
54+
55+
To learn more about the tools and technologies used:
56+
57+
- [Vite Documentation](https://vite.dev) - Learn more about Vite
58+
- [React Documentation](https://react.dev) - Learn more about React
59+
- [TypeScript Documentation](https://www.typescriptlang.org) - Learn more about TypeScript
60+
- [Turbo Documentation](https://turbo.build) - Learn more about Turbo monorepo management

‎apps/example-web/eslint.config.mjs‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import js from '@eslint/js';
2+
import globals from 'globals';
3+
import reactHooks from 'eslint-plugin-react-hooks';
4+
import reactRefresh from 'eslint-plugin-react-refresh';
5+
import reactX from 'eslint-plugin-react-x';
6+
import reactDom from 'eslint-plugin-react-dom';
7+
import tseslint from 'typescript-eslint';
8+
import { defineConfig, globalIgnores } from 'eslint/config';
9+
10+
export default defineConfig([
11+
globalIgnores(['dist']),
12+
{
13+
files: ['**/*.{ts,tsx}'],
14+
extends: [
15+
js.configs.recommended,
16+
tseslint.configs.strictTypeChecked,
17+
tseslint.configs.stylisticTypeChecked,
18+
reactHooks.configs.flat.recommended,
19+
reactRefresh.configs.vite,
20+
reactX.configs['recommended-typescript'],
21+
reactDom.configs.recommended,
22+
],
23+
languageOptions: {
24+
parserOptions: {
25+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
26+
tsconfigRootDir: import.meta.dirname,
27+
},
28+
ecmaVersion: 2020,
29+
globals: globals.browser,
30+
},
31+
},
32+
]);

‎apps/example-web/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>React Native Enriched Web Example</title>
8+
</head>
9+
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="/src/main.tsx"></script>
13+
</body>
14+
15+
</html>

‎apps/example-web/package.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "react-native-enriched-web-example",
3+
"version": "0.0.1",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build:web": "tsc -b && vite build",
9+
"preview": "vite preview",
10+
"lint": "eslint . --ext ts,tsx"
11+
},
12+
"dependencies": {
13+
"react": "^19.1.0",
14+
"react-dom": "^19.1.0"
15+
},
16+
"devDependencies": {
17+
"@eslint/js": "^9.39.1",
18+
"@types/node": "^24.10.1",
19+
"@types/react": "^19.1.0",
20+
"@types/react-dom": "^19.2.3",
21+
"@vitejs/plugin-react": "^5.1.1",
22+
"eslint": "^9.22.0",
23+
"eslint-plugin-react-dom": "^2.3.13",
24+
"eslint-plugin-react-hooks": "^7.0.1",
25+
"eslint-plugin-react-refresh": "^0.4.24",
26+
"eslint-plugin-react-x": "^2.3.13",
27+
"globals": "^16.5.0",
28+
"typescript": "^5.8.3",
29+
"typescript-eslint": "^8.46.4",
30+
"vite": "^7.2.4"
31+
},
32+
"engines": {
33+
"node": ">=20"
34+
}
35+
}

‎apps/example-web/src/App.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.container {
2+
max-width: 800px;
3+
margin: 0 auto;
4+
padding: 2rem;
5+
}

‎apps/example-web/src/App.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import './App.css';
2+
3+
function App() {
4+
return (
5+
<div className="container">
6+
<div>Text input</div>
7+
<input type="text" placeholder="Type something..." />
8+
</div>
9+
);
10+
}
11+
12+
export default App;

‎apps/example-web/src/index.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
:root {
2+
color: rgba(255, 255, 255, 0.87);
3+
background-color: #242424;
4+
}
5+
6+
@media (prefers-color-scheme: light) {
7+
:root {
8+
color: #213547;
9+
background-color: #ffffff;
10+
}
11+
}

‎apps/example-web/src/main.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { StrictMode } from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
import './index.css';
4+
import App from './App';
5+
6+
const rootElement = document.getElementById('root');
7+
if (!rootElement) throw new Error('Root element "#root" not found');
8+
9+
createRoot(rootElement).render(
10+
<StrictMode>
11+
<App />
12+
</StrictMode>
13+
);

‎apps/example-web/tsconfig.app.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "../../tsconfig.base.json",
3+
"compilerOptions": {
4+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
5+
"types": ["vite/client"],
6+
},
7+
"include": ["src"]
8+
}

0 commit comments

Comments
 (0)