status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add basic structure to web apps

This commit is contained in:
Pavel Prichodko 2023-01-16 13:08:24 +01:00
parent d7b6f8b044
commit 4ca7638c18
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
14 changed files with 358 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/next/next.config.js
View File

@ -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'

3
apps/next/package.json
View File

@ -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",

20
apps/next/pages/_app.tsx
View File

@ -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

52
apps/next/pages/_document.tsx
View File

@ -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) {
// static async getInitialProps({ renderPage }: any) {
// AppRegistry.registerComponent('Main', () => Main)
const page = await renderPage()
// const page = await renderPage()
// @ts-ignore
// // @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 = [
// /**
// * 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
// 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()
const styles = [
// <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 />

25
apps/next/pages/index.tsx
View File

@ -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>
)
}

20
apps/next/styles/app.css Normal file
View File

@ -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;
}

88
apps/next/styles/reset.css Normal file
View File

@ -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;
}

3
apps/vite/package.json
View File

@ -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"
},

41
apps/vite/src/app.css
View File

@ -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;
}

40
apps/vite/src/app.tsx
View File

@ -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,7 +19,19 @@ function App() {
const [theme, setTheme] = useState<ThemeVars>('light')
return (
<TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
<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"
@ -32,13 +50,21 @@ function App() {
<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')}>
<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>
)
}

70
apps/vite/src/index.css
View File

@ -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;
}
}

9
apps/vite/src/main.tsx
View File

@ -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>

23
apps/vite/styles/app.css Normal file
View File

@ -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);
}

88
apps/vite/styles/reset.css Normal file
View File

@ -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;
}