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

1
.gitignore vendored
View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

3394
yarn.lock

File diff suppressed because it is too large Load Diff