React Native Elements デザインシステム.

import React,{useState,useRef} from 'react';
import {createRoot} from 'react-dom/client';
import {View,Text,useWindowDimensions} from 'react-native';
import {ThemeProvider,createTheme,Button,ButtonGroup,Input,Switch,Card,Divider,useTheme} from '@rneui/themed';
import {SafeAreaProvider} from 'react-native-safe-area-context';
const theme=createTheme({mode:'light',components:{Button:{radius:6},Input:{containerStyle:{paddingHorizontal:0}}}});
function App(){const {theme,updateTheme}=useTheme();const {width}=useWindowDimensions();const [title,setTitle]=useState('Read a chapter'),[duration,setDuration]=useState(1),[breaks,setBreaks]=useState(true),[error,setError]=useState(false),[saved,setSaved]=useState('');const input=useRef(null);let c=theme.colors;function changed(){setSaved('')}function save(){if(!title.trim()){setError(true);input.current?.focus();return;}setError(false);setSaved(`${title.trim()} · ${[15,25,45][duration]} minutes · ${breaks?'with a short break':'no break reminder'}. Kept in this preview only.`)}return <View style={{backgroundColor:c.background,padding:width<500?16:32,maxWidth:1000,width:'100%',alignSelf:'center'}}><View style={{flexDirection:'row',justifyContent:'space-between',gap:24,flexWrap:'wrap',marginBottom:24}}><View style={{flexShrink:1}}><Text style={{color:c.primary,fontSize:13,fontWeight:'700'}}>REACT NATIVE ELEMENTS · WEB STUDY</Text><Text accessibilityRole="header" style={{fontSize:32,fontWeight:'700',color:c.black,marginTop:12}}>Make room for one thing</Text></View><Button title={theme.mode==='light'?'Use dark theme':'Use light theme'} type="outline" onPress={()=>updateTheme({mode:theme.mode==='light'?'dark':'light'})}/></View><Text style={{color:c.grey1,fontSize:15,lineHeight:23}}>An original focus-plan composer using RNEUI 5.0.0 through React Native Web. No timer or system notification is started.</Text><View style={{flexDirection:width>700?'row':'column',gap:24,marginTop:24}}><Card containerStyle={{flex:1,margin:0,padding:24,borderRadius:8}}><Card.Title>Shape your focus block</Card.Title><Card.Divider/><Input ref={input} label="Focus task" accessibilityLabel="Focus task" value={title} onChangeText={v=>{setTitle(v);setError(false);changed()}} errorMessage={error?'Enter a task before keeping this plan.':''} placeholder="What deserves your attention?"/><Text style={{fontSize:16,fontWeight:'700',color:c.grey1,marginBottom:8}}>Duration</Text><ButtonGroup buttons={['15 min','25 min','45 min']} selectedIndex={duration} onPress={i=>{setDuration(i);changed()}} containerStyle={{marginHorizontal:0,height:48,marginBottom:24}}/><View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center',gap:16,marginBottom:24}}><Text style={{fontSize:16,color:c.black,flexShrink:1}}>Include a short break</Text><Switch value={breaks} onValueChange={v=>{setBreaks(v);changed()}} accessibilityLabel="Include a short break"/></View><Button title="Keep this plan" onPress={save}/></Card><Card containerStyle={{flex:1,margin:0,padding:24,borderRadius:8}}><Card.Title>Your local plan</Card.Title><Card.Divider/><Text style={{fontSize:48,fontWeight:'700',color:c.primary}}>{[15,25,45][duration]}</Text><Text style={{fontSize:16,color:c.grey1,marginBottom:24}}>minutes for {title.trim()||'your next task'}</Text><Divider/><Text style={{color:c.black,fontSize:16,lineHeight:25,marginVertical:24}}>{breaks?'Finish with a pause before choosing what comes next.':'Keep the end of this block open; no break reminder is included.'}</Text><Text style={{fontSize:13,lineHeight:21,color:c.grey2}}>The duration, task and break choice are original application state. Theme colors, Input, ButtonGroup, Switch, Card and Button come from the installed library.</Text></Card></View><Text accessibilityLiveRegion="polite" style={{color:c.black,fontSize:15,lineHeight:23,marginTop:24}}>{saved}</Text><Button title="Reset the plan" type="clear" onPress={()=>{setTitle('Read a chapter');setDuration(1);setBreaks(true);setError(false);setSaved('');}} containerStyle={{alignSelf:'flex-start',marginTop:8}}/></View>}
createRoot(document.getElementById('root')).render(<SafeAreaProvider><ThemeProvider theme={theme}><App/></ThemeProvider></SafeAreaProvider>);

import {build} from 'esbuild';
await build({entryPoints:['rne.jsx'],bundle:true,minify:true,outfile:'rne.bundle.js',alias:{'react-native':'react-native-web'},resolveExtensions:['.web.js','.js','.jsx','.json'],loader:{'.js':'jsx','.ttf':'dataurl','.png':'dataurl'},define:{'process.env.NODE_ENV':'"production"'}});

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Focus plan composer</title><style>body{margin:0;background:#f4f7fa}*{box-sizing:border-box}input:focus-visible,[role=button]:focus-visible{outline:2px solid #2089dc;outline-offset:3px}</style></head><body><div id="root"></div><script src="./rne.bundle.js"></script></body></html>