add next and vite apps
This commit is contained in:
Pavel Prichodko
parent
ee1437e0b8
commit
f0778ecb92
|
|
@ -0,0 +1,4 @@
|
||||||
|
module.exports = {
|
||||||
|
extends: 'next',
|
||||||
|
root: true,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { Stack, styled } from '@tamagui/core'
|
||||||
|
|
||||||
|
export const Circle = styled(Stack, {
|
||||||
|
// access your tokens and theme values easily with $ props
|
||||||
|
|
||||||
|
backgroundColor: 'red',
|
||||||
|
borderRadius: '100%',
|
||||||
|
width: 100,
|
||||||
|
height: 100
|
||||||
|
// borderRadius: '$4',
|
||||||
|
// // media and pseudo styles - this would take 15+ lines of brittle JS in RN
|
||||||
|
|
||||||
|
// $gtSm: {
|
||||||
|
// pressStyle: {
|
||||||
|
// borderRadius: '$6'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// variants: {
|
||||||
|
// // define variants <Circle pin="top" />
|
||||||
|
|
||||||
|
// // these will flatten, even when nesting multiple styled() calls
|
||||||
|
|
||||||
|
// pin: {
|
||||||
|
// top: {
|
||||||
|
// position: 'absolute',
|
||||||
|
|
||||||
|
// top: 0
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// size: {
|
||||||
|
// // functional variants give incredible power and save bundle size
|
||||||
|
|
||||||
|
// '...size': (size, { tokens }) => {
|
||||||
|
// return {
|
||||||
|
// width: tokens.size[size] ?? size,
|
||||||
|
|
||||||
|
// height: tokens.size[size] ?? size
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// } as const
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
/// <reference types="next" />
|
||||||
|
|
||||||
|
// NOTE: This file should not be edited
|
||||||
|
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const { withTamagui } = require('@tamagui/next-plugin')
|
||||||
|
const withImages = require('next-images')
|
||||||
|
const { join } = require('path')
|
||||||
|
|
||||||
|
process.env.IGNORE_TS_CONFIG_PATHS = 'true'
|
||||||
|
process.env.TAMAGUI_TARGET = 'web'
|
||||||
|
process.env.TAMAGUI_DISABLE_WARN_DYNAMIC_LOAD = '1'
|
||||||
|
|
||||||
|
const boolVals = {
|
||||||
|
true: true,
|
||||||
|
false: false
|
||||||
|
}
|
||||||
|
|
||||||
|
const disableExtraction =
|
||||||
|
boolVals[process.env.DISABLE_EXTRACTION] ??
|
||||||
|
process.env.NODE_ENV === 'development'
|
||||||
|
|
||||||
|
const plugins = [
|
||||||
|
// withImages,
|
||||||
|
withTamagui({
|
||||||
|
config: './tamagui.config.ts',
|
||||||
|
components: [],
|
||||||
|
importsWhitelist: ['constants.js', 'colors.js'],
|
||||||
|
logTimings: true,
|
||||||
|
disableExtraction,
|
||||||
|
// experiment - reduced bundle size react-native-web
|
||||||
|
useReactNativeWebLite: false,
|
||||||
|
shouldExtract: path => {
|
||||||
|
if (path.includes(join('packages', 'app'))) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
excludeReactNativeWebExports: [
|
||||||
|
'Switch',
|
||||||
|
'ProgressBar',
|
||||||
|
'Picker',
|
||||||
|
'CheckBox',
|
||||||
|
'Touchable'
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
|
||||||
|
module.exports = function() {
|
||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
let config = {
|
||||||
|
typescript: {
|
||||||
|
ignoreBuildErrors: true
|
||||||
|
},
|
||||||
|
images: {
|
||||||
|
disableStaticImages: true
|
||||||
|
},
|
||||||
|
transpilePackages: [
|
||||||
|
// 'solito',
|
||||||
|
// 'react-native-web',
|
||||||
|
// 'expo-linking',
|
||||||
|
// 'expo-constants',
|
||||||
|
// 'expo-modules-core'
|
||||||
|
'@status-im/components'
|
||||||
|
],
|
||||||
|
experimental: {
|
||||||
|
// optimizeCss: true,
|
||||||
|
// scrollRestoration: true,
|
||||||
|
legacyBrowsers: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const plugin of plugins) {
|
||||||
|
config = {
|
||||||
|
...config,
|
||||||
|
...plugin(config)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return config
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
{
|
||||||
|
"name": "next-app",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "cd .. && yarn build && cd next && next build",
|
||||||
|
"start": "next start",
|
||||||
|
"serve": "NODE_ENV=production next start --port 8151",
|
||||||
|
"lint": "next lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tamagui/config-base": "^1.0.3",
|
||||||
|
"@tamagui/core": "^1.0.3",
|
||||||
|
"@tamagui/next-theme": "1.0.3",
|
||||||
|
"next": "^13.0.6",
|
||||||
|
"raf": "^3.4.1",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-native": "0.0.0",
|
||||||
|
"react-native-web": "^0.18.6",
|
||||||
|
"@status-im/components": "*",
|
||||||
|
"react-native-web-lite": "^1.0.1-beta.144"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tamagui/next-plugin": "1.0.3",
|
||||||
|
"@types/node": "^18.6.4",
|
||||||
|
"critters": "^0.0.16",
|
||||||
|
"eslint-config-next": "^13.0.4",
|
||||||
|
"next-images": "^1.8.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
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 Head from 'next/head'
|
||||||
|
import React, { useMemo } from 'react'
|
||||||
|
// import type { SolitoAppProps } from 'solito'
|
||||||
|
|
||||||
|
import tamaguiConfig from '../tamagui.config'
|
||||||
|
|
||||||
|
import 'raf/polyfill'
|
||||||
|
import { AppProps } from 'next/app'
|
||||||
|
import { TamaguiProvider } from '@tamagui/core'
|
||||||
|
|
||||||
|
function MyApp({ Component, pageProps }: AppProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>Tamagui Example App</title>
|
||||||
|
<meta name="description" content="Tamagui, Solito, Expo & Next.js" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
</Head>
|
||||||
|
<TamaguiProvider config={tamaguiConfig}>
|
||||||
|
<Component {...pageProps} />
|
||||||
|
</TamaguiProvider>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||||
|
// const [theme, setTheme] = useRootTheme()
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <NextThemeProvider onChangeTheme={setTheme}>
|
||||||
|
// <Provider disableRootThemeClass defaultTheme={theme}>
|
||||||
|
// {children}
|
||||||
|
// </Provider>
|
||||||
|
// </NextThemeProvider>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
export default MyApp
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
import NextDocument, { Head, Html, Main, NextScript } from 'next/document'
|
||||||
|
import { Children } from 'react'
|
||||||
|
// import { AppRegistry } from 'react-native'
|
||||||
|
|
||||||
|
import Tamagui from '../tamagui.config'
|
||||||
|
|
||||||
|
export default class Document extends NextDocument {
|
||||||
|
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) }
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Html>
|
||||||
|
<Head>
|
||||||
|
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
</Head>
|
||||||
|
<body>
|
||||||
|
<Main />
|
||||||
|
<NextScript />
|
||||||
|
</body>
|
||||||
|
</Html>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { Circle } from '../components/circle'
|
||||||
|
import { Shape } from '@status-im/components'
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h1>Next.js</h1>
|
||||||
|
<Circle />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1>UI</h1>
|
||||||
|
<Shape />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { config } from '@status-im/components'
|
||||||
|
|
||||||
|
export default config
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
// "baseUrl": ".",
|
||||||
|
// "paths": {
|
||||||
|
// "react-native": ["react-native-web"]
|
||||||
|
// },
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": false,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"incremental": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve"
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + React + TS</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"name": "vite-app",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tamagui/config-base": "^1.0.3",
|
||||||
|
"@tamagui/core": "^1.0.3",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tamagui/vite-plugin": "^1.0.3",
|
||||||
|
"@types/react": "^18.0.26",
|
||||||
|
"@types/react-dom": "^18.0.9",
|
||||||
|
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||||
|
"typescript": "^4.9.3",
|
||||||
|
"vite": "^4.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,41 @@
|
||||||
|
#root {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import './app.css'
|
||||||
|
|
||||||
|
import { Shape } from '@status-im/components'
|
||||||
|
import { TamaguiProvider } from '@tamagui/core'
|
||||||
|
|
||||||
|
import tamaguiConfig from '../tamagui.config'
|
||||||
|
import { Circle } from './components/circle'
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<TamaguiProvider config={tamaguiConfig}>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h1>Vite</h1>
|
||||||
|
<Circle />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1>UI</h1>
|
||||||
|
<Shape />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TamaguiProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { Stack, styled } from '@tamagui/core'
|
||||||
|
|
||||||
|
export const Circle = styled(Stack, {
|
||||||
|
// access your tokens and theme values easily with $ props
|
||||||
|
|
||||||
|
backgroundColor: 'red',
|
||||||
|
borderRadius: '100%',
|
||||||
|
width: 100,
|
||||||
|
height: 100
|
||||||
|
// borderRadius: '$4',
|
||||||
|
// // media and pseudo styles - this would take 15+ lines of brittle JS in RN
|
||||||
|
|
||||||
|
// $gtSm: {
|
||||||
|
// pressStyle: {
|
||||||
|
// borderRadius: '$6'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// variants: {
|
||||||
|
// // define variants <Circle pin="top" />
|
||||||
|
|
||||||
|
// // these will flatten, even when nesting multiple styled() calls
|
||||||
|
|
||||||
|
// pin: {
|
||||||
|
// top: {
|
||||||
|
// position: 'absolute',
|
||||||
|
|
||||||
|
// top: 0
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// size: {
|
||||||
|
// // functional variants give incredible power and save bundle size
|
||||||
|
|
||||||
|
// '...size': (size, { tokens }) => {
|
||||||
|
// return {
|
||||||
|
// width: tokens.size[size] ?? size,
|
||||||
|
|
||||||
|
// height: tokens.size[size] ?? size
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// } as const
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
: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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
|
||||||
|
import App from './app'
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { config } from '@status-im/components'
|
||||||
|
|
||||||
|
export default config
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": false,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"incremental": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "react-jsx"
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
import tamagui from '@tamagui/vite-plugin'
|
||||||
|
import react from '@vitejs/plugin-react-swc'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
|
||||||
|
const { tamaguiPlugin, tamaguiExtractPlugin } = tamagui
|
||||||
|
|
||||||
|
process.env.TAMAGUI_TARGET = 'web'
|
||||||
|
process.env.TAMAGUI_DISABLE_WARN_DYNAMIC_LOAD = 1
|
||||||
|
|
||||||
|
const tamaguiConfig = {
|
||||||
|
components: ['@status-im/components'],
|
||||||
|
config: './tamagui.config.ts'
|
||||||
|
// useReactNativeWebLite: true,
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://vitejs.dev/config
|
||||||
|
export default defineConfig({
|
||||||
|
define: {
|
||||||
|
TAMAGUI_TARGET: JSON.stringify('web')
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
react(),
|
||||||
|
tamaguiPlugin(tamaguiConfig)
|
||||||
|
// BUG
|
||||||
|
// tamaguiExtractPlugin(tamaguiConfig)
|
||||||
|
]
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue