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

2023-08-07 09:11:24 +03:00 · 2023-08-07 09:11:24 +03:00 · b9e9a1a7b6
parent a079089c1b d59a382e4c
commit b9e9a1a7b6
11 changed files with 3897 additions and 604 deletions
--- a/.gitignore
+++ b/.gitignore
@ -31,3 +31,4 @@ dist-ssr
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+/.tamagui/
--- a/.prettierrc
+++ b/.prettierrc
@ -2,5 +2,6 @@
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid",
-  "printWidth": 100
+  "printWidth": 100,
+  "tabWidth": 2
 }
--- a/index.html
+++ b/index.html
@ -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>
--- a/package.json
+++ b/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"
--- a/src/App.tsx
+++ b/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 (
-    <>
-      <div>
-        <ApexChart series={mySeries} />
-      </div>
-      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
-    </>
+    <TamaguiProvider config={config}>
+      <StatusProvider>
+        <Button size="$6">Tamagui LEL</Button>
+        <StatusButton>Status LEL</StatusButton>
+        <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>
  )
 }

--- a/src/main.tsx
+++ b/src/main.tsx
@ -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')
 )
--- a/src/stories/Button.tsx
+++ b/src/stories/Button.tsx
@ -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>
-  );
-};
+  )
+}
--- a/src/stories/Header.tsx
+++ b/src/stories/Header.tsx
@ -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>
-);
+)
--- a/tamagui.config.ts
+++ b/tamagui.config.ts
@ -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
--- a/vite.config.ts
+++ b/vite.config.ts
@ -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',
+      },
+    },
+  },
 })
--- a/yarn.lock
+++ b/yarn.lock