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

Merge branch 'main' into hn.standard-gauge-component

This commit is contained in:
Hristo Nedelkov 2023-08-07 09:11:24 +03:00
parent a079089c1b d59a382e4c
commit b9e9a1a7b6
11 changed files with 3897 additions and 604 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>

26
package.json
View File

@ -2,9 +2,8 @@
"name": "nimbus-gui", "name": "nimbus-gui",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.0",
"type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "NODE_ENV=development vite",
"build": "tsc && vite build", "build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview", "preview": "vite preview",
@ -12,16 +11,26 @@
"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/components": "^0.2.6",
"@status-im/react": "^0.1.1", "@status-im/react": "^0.1.1",
"@types/react": "17", "@tamagui/config": "1.36.4",
"@types/react-dom": "17", "@tamagui/react-17-patch": "1.36.4",
"apexcharts": "^3.41.1", "@tamagui/vite-plugin": "1.36.4",
"react": "17", "@types/react": "18",
"react-apexcharts": "^1.4.1", "@types/react-dom": "18",
"react-dom": "17" "react": "18",
"react-dom": "18",
"react-native-svg": "^13.10.0",
"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 +48,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"

42
src/App.tsx
View File

@ -1,11 +1,11 @@
import { Component } 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 ReactApexChart from 'react-apexcharts' import { Button as StatusButton, Provider as StatusProvider } from '@status-im/components'
interface ApexChartProps {
series: number[] import config from '../tamagui.config'
}
interface State { interface State {
series: number[] series: number[]
@ -101,12 +101,28 @@ function App() {
const num = 30 const num = 30
const mySeries = [num, 100 - num] const mySeries = [num, 100 - num]
return ( return (
<> <TamaguiProvider config={config}>
<div> <StatusProvider>
<ApexChart series={mySeries} /> <Button size="$6">Tamagui LEL</Button>
</div> <StatusButton>Status LEL</StatusButton>
<p className="read-the-docs">Click on the Vite and React logos to learn more</p> <div>
</> <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>
) )
} }

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

19
src/stories/Button.tsx
View File

@ -1,27 +1,26 @@
import React from 'react'; import './button.css'
import './button.css';
interface ButtonProps { interface ButtonProps {
/** /**
* Is this the principal call to action on the page? * Is this the principal call to action on the page?
*/ */
primary?: boolean; primary?: boolean
/** /**
* What background color to use * What background color to use
*/ */
backgroundColor?: string; backgroundColor?: string
/** /**
* How large should the button be? * How large should the button be?
*/ */
size?: 'small' | 'medium' | 'large'; size?: 'small' | 'medium' | 'large'
/** /**
* Button contents * Button contents
*/ */
label: string; label: string
/** /**
* Optional click handler * Optional click handler
*/ */
onClick?: () => void; onClick?: () => void
} }
/** /**
@ -34,7 +33,7 @@ export const Button = ({
label, label,
...props ...props
}: ButtonProps) => { }: ButtonProps) => {
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'
return ( return (
<button <button
type="button" type="button"
@ -44,5 +43,5 @@ export const Button = ({
> >
{label} {label}
</button> </button>
); )
}; }

20
src/stories/Header.tsx
View File

@ -1,17 +1,15 @@
import React from 'react'; import { Button } from './Button'
import './header.css'
import { Button } from './Button';
import './header.css';
type User = { type User = {
name: string; name: string
}; }
interface HeaderProps { interface HeaderProps {
user?: User; user?: User
onLogin: () => void; onLogin: () => void
onLogout: () => void; onLogout: () => void
onCreateAccount: () => void; onCreateAccount: () => void
} }
export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => ( export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
@ -53,4 +51,4 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
</div> </div>
</div> </div>
</header> </header>
); )

10
tamagui.config.ts Normal file
View File

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

29
vite.config.ts
View File

@ -1,7 +1,34 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react' import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()], 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',
},
},
},
}) })

4345
yarn.lock
View File

File diff suppressed because it is too large Load Diff