Merge branch 'main' into hn.standard-gauge-component
This commit is contained in:
Hristo Nedelkov
commit
b9e9a1a7b6
|
|
@ -31,3 +31,4 @@ dist-ssr
|
|||
!.yarn/releases
|
||||
!.yarn/sdks
|
||||
!.yarn/versions
|
||||
/.tamagui/
|
||||
|
|
|
|||
|
|
@ -2,5 +2,6 @@
|
|||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"arrowParens": "avoid",
|
||||
"printWidth": 100
|
||||
"printWidth": 100,
|
||||
"tabWidth": 2
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
26
package.json
26
package.json
|
|
@ -2,9 +2,8 @@
|
|||
"name": "nimbus-gui",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "NODE_ENV=development vite",
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview",
|
||||
|
|
@ -12,16 +11,26 @@
|
|||
"build-storybook": "storybook build",
|
||||
"test-storybook": "test-storybook"
|
||||
},
|
||||
"resolutions": {
|
||||
"@tamagui/web": "1.36.4",
|
||||
"react": "18",
|
||||
"react-dom": "18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@status-im/components": "^0.2.6",
|
||||
"@status-im/react": "^0.1.1",
|
||||
"@types/react": "17",
|
||||
"@types/react-dom": "17",
|
||||
"apexcharts": "^3.41.1",
|
||||
"react": "17",
|
||||
"react-apexcharts": "^1.4.1",
|
||||
"react-dom": "17"
|
||||
"@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",
|
||||
"react-native-svg": "^13.10.0",
|
||||
"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 +48,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"
|
||||
|
|
|
|||
36
src/App.tsx
36
src/App.tsx
|
|
@ -1,11 +1,11 @@
|
|||
import { Component } from 'react'
|
||||
// import reactLogo from './assets/react.svg'
|
||||
// import viteLogo from '/vite.svg'
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
import { Button, TamaguiProvider } from 'tamagui'
|
||||
import './App.css'
|
||||
import ReactApexChart from 'react-apexcharts'
|
||||
interface ApexChartProps {
|
||||
series: number[]
|
||||
}
|
||||
import { Button as StatusButton, Provider as StatusProvider } from '@status-im/components'
|
||||
|
||||
import config from '../tamagui.config'
|
||||
|
||||
interface State {
|
||||
series: number[]
|
||||
|
|
@ -101,12 +101,28 @@ function App() {
|
|||
const num = 30
|
||||
const mySeries = [num, 100 - num]
|
||||
return (
|
||||
<>
|
||||
<TamaguiProvider config={config}>
|
||||
<StatusProvider>
|
||||
<Button size="$6">Tamagui LEL</Button>
|
||||
<StatusButton>Status LEL</StatusButton>
|
||||
<div>
|
||||
<ApexChart series={mySeries} />
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<img src={viteLogo} className="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://react.dev" target="_blank">
|
||||
<img src={reactLogo} className="logo react" alt="React logo" />
|
||||
</a>
|
||||
</div>
|
||||
<h1>Vite + React</h1>
|
||||
<div className="card">
|
||||
<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>
|
||||
</>
|
||||
</StatusProvider>
|
||||
</TamaguiProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,27 +1,26 @@
|
|||
import React from 'react';
|
||||
import './button.css';
|
||||
import './button.css'
|
||||
|
||||
interface ButtonProps {
|
||||
/**
|
||||
* Is this the principal call to action on the page?
|
||||
*/
|
||||
primary?: boolean;
|
||||
primary?: boolean
|
||||
/**
|
||||
* What background color to use
|
||||
*/
|
||||
backgroundColor?: string;
|
||||
backgroundColor?: string
|
||||
/**
|
||||
* How large should the button be?
|
||||
*/
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
/**
|
||||
* Button contents
|
||||
*/
|
||||
label: string;
|
||||
label: string
|
||||
/**
|
||||
* Optional click handler
|
||||
*/
|
||||
onClick?: () => void;
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -34,7 +33,7 @@ export const Button = ({
|
|||
label,
|
||||
...props
|
||||
}: ButtonProps) => {
|
||||
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
|
||||
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -44,5 +43,5 @@ export const Button = ({
|
|||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
import React from 'react';
|
||||
|
||||
import { Button } from './Button';
|
||||
import './header.css';
|
||||
import { Button } from './Button'
|
||||
import './header.css'
|
||||
|
||||
type User = {
|
||||
name: string;
|
||||
};
|
||||
name: string
|
||||
}
|
||||
|
||||
interface HeaderProps {
|
||||
user?: User;
|
||||
onLogin: () => void;
|
||||
onLogout: () => void;
|
||||
onCreateAccount: () => void;
|
||||
user?: User
|
||||
onLogin: () => void
|
||||
onLogout: () => void
|
||||
onCreateAccount: () => void
|
||||
}
|
||||
|
||||
export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
|
||||
|
|
@ -53,4 +51,4 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
|
|||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import { config } from '@tamagui/config'
|
||||
|
||||
import { createTamagui } from 'tamagui' // or '@tamagui/core'
|
||||
|
||||
const appConfig = createTamagui(config)
|
||||
export type AppConfig = typeof appConfig
|
||||
declare module 'tamagui' {
|
||||
interface TamaguiCustomConfig extends AppConfig {}
|
||||
}
|
||||
export default appConfig
|
||||
|
|
@ -1,7 +1,34 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
define: {
|
||||
DEV: `${process.env.NODE_ENV === 'development' ? true : false}`,
|
||||
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
|
||||
'process.env.TAMAGUI_TARGET': JSON.stringify('web'),
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'react-native': 'react-native-web',
|
||||
},
|
||||
},
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
resolveExtensions: [
|
||||
'.web.js',
|
||||
'.web.ts',
|
||||
'.web.tsx',
|
||||
'.js',
|
||||
'.jsx',
|
||||
'.json',
|
||||
'.ts',
|
||||
'.tsx',
|
||||
'.mjs',
|
||||
],
|
||||
loader: {
|
||||
'.js': 'jsx',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue