add basic structure to web apps
This commit is contained in:
Pavel Prichodko
parent
d7b6f8b044
commit
4ca7638c18
|
|
@ -20,10 +20,10 @@ const plugins = [
|
|||
// withImages,
|
||||
withTamagui({
|
||||
config: './tamagui.config.ts',
|
||||
components: [],
|
||||
components: ['@status-im/components'],
|
||||
importsWhitelist: ['constants.js', 'colors.js'],
|
||||
logTimings: true,
|
||||
disableExtraction,
|
||||
disableExtraction: true,
|
||||
|
||||
// experiment - reduced bundle size react-native-web
|
||||
useReactNativeWebLite: false,
|
||||
|
|
@ -33,11 +33,11 @@ const plugins = [
|
|||
}
|
||||
},
|
||||
excludeReactNativeWebExports: [
|
||||
'Switch',
|
||||
'ProgressBar',
|
||||
'Picker',
|
||||
'CheckBox',
|
||||
'Touchable',
|
||||
// 'Switch',
|
||||
// 'ProgressBar',
|
||||
// 'Picker',
|
||||
// 'CheckBox',
|
||||
// 'Touchable'
|
||||
],
|
||||
}),
|
||||
]
|
||||
|
|
@ -53,7 +53,7 @@ module.exports = function () {
|
|||
},
|
||||
transpilePackages: [
|
||||
// 'solito',
|
||||
// 'react-native-web',
|
||||
'react-native-web',
|
||||
// 'expo-linking',
|
||||
// 'expo-constants',
|
||||
// 'expo-modules-core'
|
||||
|
|
|
|||
|
|
@ -14,13 +14,12 @@
|
|||
"@tamagui/core": "^1.0.8",
|
||||
"@tamagui/next-theme": "1.0.8",
|
||||
"next": "^13.0.6",
|
||||
"raf": "^3.4.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-native-web": "^0.18.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tamagui/next-plugin": "1.0.8",
|
||||
"@tamagui/next-plugin": "^1.0.8",
|
||||
"@types/node": "^18.6.4",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
|
|
|
|||
|
|
@ -2,26 +2,30 @@ import '@tamagui/core/reset.css'
|
|||
import '@tamagui/font-inter/css/400.css'
|
||||
import '@tamagui/font-inter/css/700.css'
|
||||
|
||||
import { NextThemeProvider, useRootTheme } from '@tamagui/next-theme'
|
||||
// import { Provider } from 'app/provider'
|
||||
import '../styles/reset.css'
|
||||
import '../styles/app.css'
|
||||
|
||||
import Head from 'next/head'
|
||||
import React, { useMemo } from 'react'
|
||||
// import type { SolitoAppProps } from 'solito'
|
||||
import React from 'react'
|
||||
|
||||
import tamaguiConfig from '../tamagui.config'
|
||||
|
||||
import 'raf/polyfill'
|
||||
import { AppProps } from 'next/app'
|
||||
import { TamaguiProvider } from '@tamagui/core'
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
// import { NextThemeProvider, useRootTheme } from '@tamagui/next-theme'
|
||||
// import { Provider } from 'app/provider'
|
||||
// import type { SolitoAppProps } from 'solito'
|
||||
|
||||
function App({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Tamagui Example App</title>
|
||||
<title>Status</title>
|
||||
<meta name="description" content="Tamagui, Solito, Expo & Next.js" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<TamaguiProvider config={tamaguiConfig}>
|
||||
<Component {...pageProps} />
|
||||
</TamaguiProvider>
|
||||
|
|
@ -41,4 +45,4 @@ function MyApp({ Component, pageProps }: AppProps) {
|
|||
// )
|
||||
// }
|
||||
|
||||
export default MyApp
|
||||
export default App
|
||||
|
|
|
|||
|
|
@ -1,27 +1,47 @@
|
|||
import NextDocument, { Head, Html, Main, NextScript } from 'next/document'
|
||||
import { Children } from 'react'
|
||||
// import { AppRegistry } from 'react-native'
|
||||
import { AppRegistry } from 'react-native'
|
||||
|
||||
import Tamagui from '../tamagui.config'
|
||||
|
||||
// TODO: the recommended approach breaks HMR when Tmaagui.getCSS() is called in the getInitialProps method.
|
||||
export default class Document extends NextDocument {
|
||||
static async getInitialProps({ renderPage }: any) {
|
||||
// AppRegistry.registerComponent('Main', () => Main)
|
||||
// static async getInitialProps({ renderPage }: any) {
|
||||
// AppRegistry.registerComponent('Main', () => Main)
|
||||
// const page = await renderPage()
|
||||
|
||||
// // @ts-ignore
|
||||
// const { getStyleElement } = AppRegistry.getApplication('Main')
|
||||
|
||||
// /**
|
||||
// * Note: be sure to keep tamagui styles after react-native-web styles like it is here!
|
||||
// * So Tamagui styles can override the react-native-web styles.
|
||||
// */
|
||||
// const styles = [
|
||||
// getStyleElement(),
|
||||
// <style
|
||||
// key="tamagui-css"
|
||||
// dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
|
||||
// />,
|
||||
// ]
|
||||
|
||||
// return { ...page, styles: Children.toArray(styles) }
|
||||
// }
|
||||
|
||||
static async getInitialProps({ renderPage }) {
|
||||
AppRegistry.registerComponent('app', () => Main)
|
||||
// @ts-ignore
|
||||
const { getStyleElement } = AppRegistry.getApplication('app')
|
||||
|
||||
const page = await renderPage()
|
||||
|
||||
// @ts-ignore
|
||||
// const { getStyleElement } = AppRegistry.getApplication('Main')
|
||||
|
||||
/**
|
||||
* Note: be sure to keep tamagui styles after react-native-web styles like it is here!
|
||||
* So Tamagui styles can override the react-native-web styles.
|
||||
*/
|
||||
const styles = [
|
||||
// getStyleElement(),
|
||||
<style
|
||||
key="tamagui-css"
|
||||
dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
|
||||
/>
|
||||
// <style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />,
|
||||
getStyleElement(),
|
||||
// <style
|
||||
// key="tamagui-css"
|
||||
// dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
|
||||
// />,
|
||||
]
|
||||
|
||||
return { ...page, styles: Children.toArray(styles) }
|
||||
|
|
@ -29,9 +49,13 @@ export default class Document extends NextDocument {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Html lang="en">
|
||||
<Head>
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
<style
|
||||
id="stitches"
|
||||
dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
|
||||
/>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
|
|
|
|||
|
|
@ -1,17 +1,22 @@
|
|||
import { Circle } from '../components/circle'
|
||||
import { Shape } from '@status-im/components'
|
||||
// import { Circle } from '../components/circle'
|
||||
import { Shape, Button, Sidebar, Image, Input } from '@status-im/components'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<h1>Next.js</h1>
|
||||
<Circle />
|
||||
</div>
|
||||
<div>
|
||||
<h1>UI</h1>
|
||||
<Shape />
|
||||
<div id="app">
|
||||
<div id="sidebar">
|
||||
<Sidebar
|
||||
name="Rarible"
|
||||
description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
|
||||
membersCount={123}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main id="main">
|
||||
<div>topbar</div>
|
||||
<div>content</div>
|
||||
<div>composer</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
html,
|
||||
body,
|
||||
#__next {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 352px 1fr;
|
||||
}
|
||||
|
||||
#main {
|
||||
display: grid;
|
||||
grid-template-rows: 56px 1fr 100px;
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
/*
|
||||
1. Use a more-intuitive box-sizing model.
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #fff;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
2. Remove default margin
|
||||
*/
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
/*
|
||||
3. Allow percentage-based heights in the application
|
||||
*/
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
/*
|
||||
Typographic tweaks!
|
||||
4. Add accessible line-height
|
||||
5. Improve text rendering
|
||||
*/
|
||||
body {
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
/*
|
||||
6. Improve media defaults
|
||||
*/
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
/*
|
||||
7. Remove built-in form typography styles
|
||||
*/
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
/*
|
||||
8. Avoid text overflows
|
||||
*/
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
/*
|
||||
9. Create a root stacking context
|
||||
*/
|
||||
#root,
|
||||
#__next {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
|
@ -2,9 +2,8 @@
|
|||
"name": "vite-app",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "TAMAGUI_TARGET='web' vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
#root {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
|
@ -1,8 +1,14 @@
|
|||
import './app.css'
|
||||
import { useState } from 'react'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
|
||||
import { Code, Heading, Label, Paragraph, Shape } from '@status-im/components'
|
||||
import {
|
||||
Button,
|
||||
Code,
|
||||
Heading,
|
||||
Label,
|
||||
Paragraph,
|
||||
Shape,
|
||||
Sidebar,
|
||||
} from '@status-im/components'
|
||||
import { Stack, TamaguiProvider } from '@tamagui/core'
|
||||
|
||||
import tamaguiConfig from '../tamagui.config'
|
||||
|
|
@ -13,32 +19,52 @@ function App() {
|
|||
const [theme, setTheme] = useState<ThemeVars>('light')
|
||||
|
||||
return (
|
||||
<TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
|
||||
<Stack width="100%" height="100%" backgroundColor="$background">
|
||||
<Stack
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
height="100%"
|
||||
width="100%"
|
||||
>
|
||||
<Heading marginBottom={12}>This is an Heading 1</Heading>
|
||||
<Heading marginBottom={12} heading="h2">
|
||||
This is an Heading 2
|
||||
</Heading>
|
||||
<Paragraph weight="semibold" uppercase marginBottom={12}>
|
||||
This is a paragraph
|
||||
</Paragraph>
|
||||
<Label marginBottom={12}>This is a label</Label>
|
||||
<Code marginBottom={12}>This is a code</Code>
|
||||
<Paragraph>0x213abc190 ... 121ah4a9e</Paragraph>
|
||||
<Paragraph marginVertical={20}>Theme selected - {theme} </Paragraph>
|
||||
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
|
||||
Toogle theme
|
||||
</button>
|
||||
<Shape marginTop={20} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
<TamaguiProvider config={tamaguiConfig}>
|
||||
<div id="app">
|
||||
<div id="sidebar">
|
||||
<Sidebar
|
||||
name="Rarible"
|
||||
description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
|
||||
membersCount={123}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main id="main">
|
||||
<div>topbar</div>
|
||||
<div>
|
||||
<Stack width="100%" height="100%" backgroundColor="$background">
|
||||
<Stack
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
height="100%"
|
||||
width="100%"
|
||||
>
|
||||
<Heading marginBottom={12}>This is an Heading 1</Heading>
|
||||
<Heading marginBottom={12} heading="h2">
|
||||
This is an Heading 2
|
||||
</Heading>
|
||||
<Paragraph weight="semibold" uppercase marginBottom={12}>
|
||||
This is a paragraph
|
||||
</Paragraph>
|
||||
<Label marginBottom={12}>This is a label</Label>
|
||||
<Code marginBottom={12}>This is a code</Code>
|
||||
<Paragraph>0x213abc190 ... 121ah4a9e</Paragraph>
|
||||
<Paragraph marginVertical={20}>
|
||||
Theme selected - {theme}{' '}
|
||||
</Paragraph>
|
||||
<button
|
||||
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||||
>
|
||||
Toogle theme
|
||||
</button>
|
||||
<Shape marginTop={20} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
</div>
|
||||
<div>composer</div>
|
||||
</main>
|
||||
</div>
|
||||
</TamaguiProvider>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,70 +0,0 @@
|
|||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
width: 100%;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
import './index.css'
|
||||
import '../styles/reset.css'
|
||||
import '../styles/app.css'
|
||||
|
||||
import React from 'react'
|
||||
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
|
||||
import App from './app'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
||||
const root = document.getElementById('root') as HTMLElement
|
||||
|
||||
createRoot(root).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 352px 1fr;
|
||||
}
|
||||
|
||||
#main {
|
||||
display: grid;
|
||||
grid-template-rows: 56px 1fr 100px;
|
||||
}
|
||||
|
||||
#sidebar,
|
||||
#main,
|
||||
#main > div {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
/*
|
||||
1. Use a more-intuitive box-sizing model.
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #fff;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
2. Remove default margin
|
||||
*/
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
/*
|
||||
3. Allow percentage-based heights in the application
|
||||
*/
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
/*
|
||||
Typographic tweaks!
|
||||
4. Add accessible line-height
|
||||
5. Improve text rendering
|
||||
*/
|
||||
body {
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
/*
|
||||
6. Improve media defaults
|
||||
*/
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
/*
|
||||
7. Remove built-in form typography styles
|
||||
*/
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
/*
|
||||
8. Avoid text overflows
|
||||
*/
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
/*
|
||||
9. Create a root stacking context
|
||||
*/
|
||||
#root,
|
||||
#__next {
|
||||
isolation: isolate;
|
||||
}
|
||||
Loading…
Reference in New Issue