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

feat: add Tamagui integration 

Author: @RadoslavDimchev
This commit is contained in:
Rickard Andersson 2023-08-04 09:43:07 +03:00
parent 130a253024
commit fc5f5f5fe4
9 changed files with 2112 additions and 1360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -31,3 +31,4 @@ dist-ssr
!.yarn/releases !.yarn/releases
!.yarn/sdks !.yarn/sdks
!.yarn/versions !.yarn/versions
/.tamagui/

3
.prettierrc
View File

@ -2,5 +2,6 @@
"semi": false, "semi": false,
"singleQuote": true, "singleQuote": true,
"arrowParens": "avoid", "arrowParens": "avoid",
"printWidth": 100 "printWidth": 100,
"tabWidth": 2
} }

1
index.html
View File

@ -7,6 +7,7 @@
<title>Vite + React + TS</title> <title>Vite + React + TS</title>
</head> </head>
<body> <body>
<script>window.global = window;</script>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>

22
package.json
View File

@ -11,17 +11,24 @@
"build-storybook": "storybook build", "build-storybook": "storybook build",
"test-storybook": "test-storybook" "test-storybook": "test-storybook"
}, },
"resolutions": {
"@tamagui/web": "1.36.4",
"react": "18",
"react-dom": "18"
},
"dependencies": { "dependencies": {
"@status-im/react": "^0.1.1", "@status-im/react": "^0.1.1",
"@tamagui/config": "^1.49.1", "@tamagui/config": "1.36.4",
"@tamagui/vite-plugin": "^1.49.1", "@tamagui/react-17-patch": "1.36.4",
"@types/react": "17", "@tamagui/vite-plugin": "1.36.4",
"@types/react-dom": "17", "@types/react": "18",
"react": "17", "@types/react-dom": "18",
"react-dom": "17", "react": "18",
"tamagui": "^1.49.1" "react-dom": "18",
"tamagui": "1.36.4"
}, },
"devDependencies": { "devDependencies": {
"@fsouza/prettierd": "^0.24.2",
"@storybook/addon-essentials": "^7.2.0", "@storybook/addon-essentials": "^7.2.0",
"@storybook/addon-interactions": "^7.2.0", "@storybook/addon-interactions": "^7.2.0",
"@storybook/addon-links": "^7.2.0", "@storybook/addon-links": "^7.2.0",
@ -39,6 +46,7 @@
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3", "eslint-plugin-react-refresh": "^0.4.3",
"eslint-plugin-storybook": "^0.6.13", "eslint-plugin-storybook": "^0.6.13",
"prettier": "^3.0.1",
"storybook": "^7.2.0", "storybook": "^7.2.0",
"typescript": "^5.0.2", "typescript": "^5.0.2",
"vite": "^4.4.5" "vite": "^4.4.5"

17
src/App.tsx
View File

@ -1,13 +1,18 @@
import { useState } from 'react' import { useState } from 'react'
import reactLogo from './assets/react.svg' import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg' import viteLogo from '/vite.svg'
import { Button, TamaguiProvider } from 'tamagui'
import './App.css' import './App.css'
import '@tamagui/react-17-patch'
import config from '../tamagui.config'
function App() { function App() {
const [count, setCount] = useState(0) const [count, setCount] = useState(0)
return ( return (
<> <TamaguiProvider config={config}>
<Button size="$6">LEL</Button>
<div> <div>
<a href="https://vitejs.dev" target="_blank"> <a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" /> <img src={viteLogo} className="logo" alt="Vite logo" />
@ -18,17 +23,13 @@ function App() {
</div> </div>
<h1>Vite + React</h1> <h1>Vite + React</h1>
<div className="card"> <div className="card">
<button onClick={() => setCount((count) => count + 1)}> <button onClick={() => setCount(count => count + 1)}>count is {count}</button>
count is {count}
</button>
<p> <p>
Edit <code>src/App.tsx</code> and save to test HMR Edit <code>src/App.tsx</code> and save to test HMR
</p> </p>
</div> </div>
<p className="read-the-docs"> <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
Click on the Vite and React logos to learn more </TamaguiProvider>
</p>
</>
) )
} }

5
src/main.tsx
View File

@ -1,11 +1,10 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom/client'
import App from './App.tsx' import App from './App.tsx'
import './index.css' import './index.css'
ReactDOM.render( ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>,
document.getElementById('root')
) )

16
tamagui.config.ts
View File

@ -1,10 +1,10 @@
import { config } from '@tamagui/config'; import { config } from '@tamagui/config'
import { createTamagui } from 'tamagui';
export default createTamagui(config); import { createTamagui } from 'tamagui' // or '@tamagui/core'
// export type AppConfig = typeof appConfig const appConfig = createTamagui(config)
// declare module 'tamagui' { export type AppConfig = typeof appConfig
// interface TamaguiCustomConfig extends AppConfig { } declare module 'tamagui' {
// } interface TamaguiCustomConfig extends AppConfig {}
// export default appConfig }
export default appConfig

13
vite.config.ts
View File

@ -1,15 +1,8 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react' import react from '@vitejs/plugin-react'
import { tamaguiPlugin } from '@tamagui/vite-plugin';
export default defineConfig({ export default defineConfig({
plugins: [react(), tamaguiPlugin({ plugins: [react()],
config: './tamagui.config.ts',
components: ['tamagui'],
}),
// optional, adds the optimizing compiler:
// tamaguiExtractPlugin(tamaguiConfig),
],
define: { define: {
DEV: `${process.env.NODE_ENV === 'development' ? true : false}`, DEV: `${process.env.NODE_ENV === 'development' ? true : false}`,
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
@ -18,7 +11,7 @@ export default defineConfig({
resolve: { resolve: {
alias: { alias: {
'react-native': 'react-native-web', 'react-native': 'react-native-web',
} },
}, },
optimizeDeps: { optimizeDeps: {
esbuildOptions: { esbuildOptions: {
@ -38,4 +31,4 @@ export default defineConfig({
}, },
}, },
}, },
}); })

3394
yarn.lock
View File

File diff suppressed because it is too large Load Diff