Merge pull request #330 from prichodko/next

Add more Tamagui components

.eslintrc

@@ -32,6 +32,7 @@
     "plugin:jsx-a11y/recommended",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
+    "plugin:react/jsx-runtime",
     "prettier"
   ],
   "overrides": [

apps/mobile/App.tsx

@@ -2,9 +2,17 @@
 /* eslint-disable import/namespace */
 import 'expo-dev-client'
 
-import React, { useState } from 'react'
+import { useState } from 'react'
 
-import { Code, Heading, Label, Paragraph, Shape } from '@status-im/components'
+import {
+  Code,
+  Heading,
+  Image,
+  Label,
+  Paragraph,
+  Shape,
+  Sidebar,
+} from '@status-im/components'
 import { Stack, TamaguiProvider } from '@tamagui/core'
 import { useFonts } from 'expo-font'
 import { SafeAreaView, TouchableOpacity } from 'react-native'
@@ -29,6 +37,18 @@ export default function App() {
   return (
     <TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
       <SafeAreaView>
+        <Image
+          source={{
+            uri: 'https://images.unsplash.com/photo-1673537074513-e66435b69012?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
+            height: 200,
+            width: '100%',
+          }}
+        />
+        <Sidebar
+          name="Rarible"
+          description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
+          membersCount={123}
+        />
         <Stack
           flexDirection="column"
           justifyContent="center"

apps/mobile/package.json

@@ -4,17 +4,13 @@
   "main": "index.js",
   "private": true,
   "scripts": {
-    "start": "expo start -c",
+    "dev": "expo start -c",
-    "android": "TAMAGUI_TARGET=native yarn expo run:android",
     "ios": "TAMAGUI_TARGET=native yarn expo run:ios",
-    "web": "TAMAGUI_TARGET=web yarn expo start --web",
+    "android": "TAMAGUI_TARGET=native yarn expo run:android"
-    "eject": "expo eject"
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
     "@status-im/components": "*",
-    "@types/react-native": "~0.70.6",
-    "babel-plugin-module-resolver": "^4.1.0",
     "expo": "^47.0.12",
     "expo-constants": "^14.0.2",
     "expo-dev-client": "^2.0.1",
@@ -28,9 +24,11 @@
     "react-native-web": "~0.18.7"
   },
   "devDependencies": {
+    "@types/react-native": "~0.70.6",
     "@babel/core": "^7.17.9",
     "@expo/metro-config": "^0.3.21",
-    "@tamagui/babel-plugin": "1.0.4",
+    "@tamagui/babel-plugin": "1.0.8",
+    "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "typescript": "^4.7.4"
   }

apps/next/next.config.js

@@ -20,10 +20,10 @@ const plugins = [
   // withImages,
   withTamagui({
     config: './tamagui.config.ts',
-    components: [],
+    components: ['@status-im/components'],
     importsWhitelist: ['constants.js', 'colors.js'],
     logTimings: true,
-    disableExtraction,
+    disableExtraction: true,
 
     // experiment - reduced bundle size react-native-web
     useReactNativeWebLite: false,
@@ -33,11 +33,11 @@ const plugins = [
       }
     },
     excludeReactNativeWebExports: [
-      'Switch',
+      // 'Switch',
-      'ProgressBar',
+      // 'ProgressBar',
-      'Picker',
+      // 'Picker',
-      'CheckBox',
+      // 'CheckBox',
-      'Touchable',
+      // 'Touchable'
     ],
   }),
 ]
@@ -53,7 +53,7 @@ module.exports = function () {
     },
     transpilePackages: [
       //   'solito',
-      //   'react-native-web',
+      'react-native-web',
       //   'expo-linking',
       //   'expo-constants',
       //   'expo-modules-core'

apps/next/package.json

@@ -10,21 +10,19 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@tamagui/config-base": "^1.0.3",
+    "@status-im/components": "*",
-    "@tamagui/core": "^1.0.3",
+    "@tamagui/core": "^1.0.8",
-    "@tamagui/next-theme": "1.0.3",
+    "@tamagui/next-theme": "1.0.8",
     "next": "^13.0.6",
-    "raf": "^3.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "0.0.0",
+    "react-native-web": "^0.18.6"
-    "react-native-web": "^0.18.6",
-    "@status-im/components": "*",
-    "react-native-web-lite": "^1.0.1-beta.144"
   },
   "devDependencies": {
-    "@tamagui/next-plugin": "1.0.3",
+    "@tamagui/next-plugin": "^1.0.8",
     "@types/node": "^18.6.4",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "critters": "^0.0.16",
     "eslint-config-next": "^13.0.4",
     "next-images": "^1.8.4"

apps/next/pages/_app.tsx

@@ -2,26 +2,30 @@ import '@tamagui/core/reset.css'
 import '@tamagui/font-inter/css/400.css'
 import '@tamagui/font-inter/css/700.css'
 
-import { NextThemeProvider, useRootTheme } from '@tamagui/next-theme'
+import '../styles/reset.css'
-// import { Provider } from 'app/provider'
+import '../styles/app.css'
+
 import Head from 'next/head'
-import React, { useMemo } from 'react'
+import React from 'react'
-// import type { SolitoAppProps } from 'solito'
 
 import tamaguiConfig from '../tamagui.config'
 
-import 'raf/polyfill'
 import { AppProps } from 'next/app'
 import { TamaguiProvider } from '@tamagui/core'
 
-function MyApp({ Component, pageProps }: AppProps) {
+// import { NextThemeProvider, useRootTheme } from '@tamagui/next-theme'
+// import { Provider } from 'app/provider'
+// import type { SolitoAppProps } from 'solito'
+
+function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head>
-        <title>Tamagui Example App</title>
+        <title>Status</title>
         <meta name="description" content="Tamagui, Solito, Expo & Next.js" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
+
       <TamaguiProvider config={tamaguiConfig}>
         <Component {...pageProps} />
       </TamaguiProvider>
@@ -41,4 +45,4 @@ function MyApp({ Component, pageProps }: AppProps) {
 //   )
 // }
 
-export default MyApp
+export default App

apps/next/pages/_document.tsx

@@ -1,27 +1,47 @@
 import NextDocument, { Head, Html, Main, NextScript } from 'next/document'
 import { Children } from 'react'
-// import { AppRegistry } from 'react-native'
+import { AppRegistry } from 'react-native'
 
 import Tamagui from '../tamagui.config'
 
+// TODO: the recommended approach breaks HMR when Tmaagui.getCSS() is called in the getInitialProps method.
 export default class Document extends NextDocument {
-  static async getInitialProps({ renderPage }: any) {
+  // static async getInitialProps({ renderPage }: any) {
-    // AppRegistry.registerComponent('Main', () => Main)
+  //   AppRegistry.registerComponent('Main', () => Main)
+  //   const page = await renderPage()
+
+  //   // @ts-ignore
+  //   const { getStyleElement } = AppRegistry.getApplication('Main')
+
+  //   /**
+  //    * Note: be sure to keep tamagui styles after react-native-web styles like it is here!
+  //    * So Tamagui styles can override the react-native-web styles.
+  //    */
+  //   const styles = [
+  //     getStyleElement(),
+  //     <style
+  //       key="tamagui-css"
+  //       dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
+  //     />,
+  //   ]
+
+  //   return { ...page, styles: Children.toArray(styles) }
+  // }
+
+  static async getInitialProps({ renderPage }) {
+    AppRegistry.registerComponent('app', () => Main)
+    // @ts-ignore
+    const { getStyleElement } = AppRegistry.getApplication('app')
+
     const page = await renderPage()
 
-    // @ts-ignore
-    // const { getStyleElement } = AppRegistry.getApplication('Main')
-
-    /**
-     * Note: be sure to keep tamagui styles after react-native-web styles like it is here!
-     * So Tamagui styles can override the react-native-web styles.
-     */
     const styles = [
-      // getStyleElement(),
+      // <style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />,
-      <style
+      getStyleElement(),
-        key="tamagui-css"
+      // <style
-        dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
+      //   key="tamagui-css"
-      />
+      //   dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
+      // />,
     ]
 
     return { ...page, styles: Children.toArray(styles) }
@@ -29,9 +49,13 @@ export default class Document extends NextDocument {
 
   render() {
     return (
-      <Html>
+      <Html lang="en">
         <Head>
           <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <style
+            id="stitches"
+            dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
+          />
         </Head>
         <body>
           <Main />

apps/next/pages/index.tsx

@@ -1,17 +1,22 @@
-import { Circle } from '../components/circle'
+// import { Circle } from '../components/circle'
-import { Shape } from '@status-im/components'
+import { Shape, Button, Sidebar, Image, Input } from '@status-im/components'
 
 export default function Home() {
   return (
-    <div>
+    <div id="app">
-      <div>
+      <div id="sidebar">
-        <h1>Next.js</h1>
+        <Sidebar
-        <Circle />
+          name="Rarible"
-      </div>
+          description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
-      <div>
+          membersCount={123}
-        <h1>UI</h1>
+        />
-        <Shape />
       </div>
+
+      <main id="main">
+        <div>topbar</div>
+        <div>content</div>
+        <div>composer</div>
+      </main>
     </div>
   )
 }

apps/next/styles/app.css

@@ -0,0 +1,20 @@
+html,
+body,
+#__next {
+  height: 100%;
+}
+
+div {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+#app {
+  height: 100%;
+  display: grid;
+  grid-template-columns: 352px 1fr;
+}
+
+#main {
+  display: grid;
+  grid-template-rows: 56px 1fr 100px;
+}

apps/next/styles/reset.css

@@ -0,0 +1,88 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #fff;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+/*
+  2. Remove default margin
+*/
+* {
+  margin: 0;
+}
+/*
+  3. Allow percentage-based heights in the application
+*/
+html,
+body {
+  height: 100%;
+  overscroll-behavior: none;
+}
+/*
+  Typographic tweaks!
+  4. Add accessible line-height
+  5. Improve text rendering
+*/
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+  6. Improve media defaults
+*/
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+  7. Remove built-in form typography styles
+*/
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+/*
+  8. Avoid text overflows
+*/
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+/*
+  9. Create a root stacking context
+*/
+#root,
+#__next {
+  isolation: isolate;
+}

apps/vite/package.json

@@ -2,20 +2,20 @@
   "name": "vite-app",
   "private": true,
   "version": "0.0.0",
-  "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "TAMAGUI_TARGET='web' vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tamagui/config-base": "^1.0.3",
+    "@status-im/components": "*",
-    "@tamagui/core": "^1.0.3",
+    "@tamagui/core": "^1.0.8",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-native-web": "^0.18.6"
   },
   "devDependencies": {
-    "@tamagui/vite-plugin": "^1.0.3",
+    "@tamagui/vite-plugin": "^1.0.8",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react-swc": "^3.0.0",

apps/vite/src/app.css

@@ -1,41 +0,0 @@
-#root {
-  margin: 0 auto;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

apps/vite/src/app.tsx

@@ -1,8 +1,14 @@
-import './app.css'
+import { useState } from 'react'
 
-import React, { useState } from 'react'
+import {
-
+  Button,
-import { Code, Heading, Label, Paragraph, Shape } from '@status-im/components'
+  Code,
+  Heading,
+  Label,
+  Paragraph,
+  Shape,
+  Sidebar,
+} from '@status-im/components'
 import { Stack, TamaguiProvider } from '@tamagui/core'
 
 import tamaguiConfig from '../tamagui.config'
@@ -13,32 +19,52 @@ function App() {
   const [theme, setTheme] = useState<ThemeVars>('light')
 
   return (
-    <TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
+    <TamaguiProvider config={tamaguiConfig}>
-      <Stack width="100%" height="100%" backgroundColor="$background">
+      <div id="app">
-        <Stack
+        <div id="sidebar">
-          flexDirection="column"
+          <Sidebar
-          justifyContent="center"
+            name="Rarible"
-          alignItems="center"
+            description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
-          height="100%"
+            membersCount={123}
-          width="100%"
+          />
-        >
+        </div>
-          <Heading marginBottom={12}>This is an Heading 1</Heading>
+
-          <Heading marginBottom={12} heading="h2">
+        <main id="main">
-            This is an Heading 2
+          <div>topbar</div>
-          </Heading>
+          <div>
-          <Paragraph weight="semibold" uppercase marginBottom={12}>
+            <Stack width="100%" height="100%" backgroundColor="$background">
-            This is a paragraph
+              <Stack
-          </Paragraph>
+                flexDirection="column"
-          <Label marginBottom={12}>This is a label</Label>
+                justifyContent="center"
-          <Code marginBottom={12}>This is a code</Code>
+                alignItems="center"
-          <Paragraph>0x213abc190 ... 121ah4a9e</Paragraph>
+                height="100%"
-          <Paragraph marginVertical={20}>Theme selected - {theme} </Paragraph>
+                width="100%"
-          <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+              >
-            Toogle theme
+                <Heading marginBottom={12}>This is an Heading 1</Heading>
-          </button>
+                <Heading marginBottom={12} heading="h2">
-          <Shape marginTop={20} />
+                  This is an Heading 2
-        </Stack>
+                </Heading>
-      </Stack>
+                <Paragraph weight="semibold" uppercase marginBottom={12}>
+                  This is a paragraph
+                </Paragraph>
+                <Label marginBottom={12}>This is a label</Label>
+                <Code marginBottom={12}>This is a code</Code>
+                <Paragraph>0x213abc190 ... 121ah4a9e</Paragraph>
+                <Paragraph marginVertical={20}>
+                  Theme selected - {theme}{' '}
+                </Paragraph>
+                <button
+                  onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+                >
+                  Toogle theme
+                </button>
+                <Shape marginTop={20} />
+              </Stack>
+            </Stack>
+          </div>
+          <div>composer</div>
+        </main>
+      </div>
     </TamaguiProvider>
   )
 }

apps/vite/src/index.css

@@ -1,70 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  width: 100%;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  width: 100%;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

apps/vite/src/main.tsx

@@ -1,12 +1,15 @@
-import './index.css'
+import '../styles/reset.css'
+import '../styles/app.css'
 
 import React from 'react'
 
-import ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 
 import App from './app'
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+const root = document.getElementById('root') as HTMLElement
+
+createRoot(root).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>

apps/vite/styles/app.css

@@ -0,0 +1,23 @@
+html,
+body,
+#root {
+  height: 100%;
+  overscroll-behavior: none;
+}
+
+#app {
+  height: 100%;
+  display: grid;
+  grid-template-columns: 352px 1fr;
+}
+
+#main {
+  display: grid;
+  grid-template-rows: 56px 1fr 100px;
+}
+
+#sidebar,
+#main,
+#main > div {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}

apps/vite/styles/reset.css

@@ -0,0 +1,88 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #fff;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+/*
+  2. Remove default margin
+*/
+* {
+  margin: 0;
+}
+/*
+  3. Allow percentage-based heights in the application
+*/
+html,
+body {
+  height: 100%;
+  overscroll-behavior: none;
+}
+/*
+  Typographic tweaks!
+  4. Add accessible line-height
+  5. Improve text rendering
+*/
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+  6. Improve media defaults
+*/
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+  7. Remove built-in form typography styles
+*/
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+/*
+  8. Avoid text overflows
+*/
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+/*
+  9. Create a root stacking context
+*/
+#root,
+#__next {
+  isolation: isolate;
+}

apps/vite/vite.config.ts

@@ -1,12 +1,9 @@
-// eslint-disable-next-line import/default
+import { tamaguiPlugin } from '@tamagui/vite-plugin'
-import tamagui from '@tamagui/vite-plugin'
 import react from '@vitejs/plugin-react-swc'
 import { defineConfig } from 'vite'
 
 import type { PluginOption } from 'vite'
 
-const { tamaguiPlugin } = tamagui
-
 process.env.TAMAGUI_TARGET = 'web'
 process.env.TAMAGUI_DISABLE_WARN_DYNAMIC_LOAD = '1'
 

packages/components/.storybook/main.ts

@@ -1,15 +1,20 @@
-module.exports = {
+import { StorybookConfig } from '@storybook/types'
+
+const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
+    '@storybook/addon-interactions',
+    'storybook-addon-designs',
   ],
   framework: {
     name: '@storybook/react-vite',
-    options: {}
+    options: {},
   },
   docs: {
-    autodocs: 'tag'
+    autodocs: 'tag',
-  }
+  },
 }
+
+export default config

packages/components/.storybook/preview.tsx

@@ -1,18 +1,19 @@
 import React from 'react'
 import { TamaguiProvider } from '@tamagui/core'
 import { config } from '../src'
+import { Parameters, Decorator } from '@storybook/react'
 
-export const parameters = {
+export const parameters: Parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
-      date: /Date$/
+      date: /Date$/,
-    }
+    },
-  }
+  },
 }
 
-const withThemeProvider = (Story, context) => {
+const withThemeProvider: Decorator = (Story, _context) => {
   return (
     <TamaguiProvider config={config}>
       <Story />

packages/components/package.json

@@ -12,20 +12,23 @@
     "dist"
   ],
   "scripts": {
+    "dev": "tamagui-build --watch",
     "build": "tamagui-build",
     "typegen": "tsc --noEmit false --emitDeclarationOnly || true",
-    "watch": "tamagui-build --watch",
+    "storybook": "TAMAGUI_TARGET='web' storybook dev -p 3001",
-    "storybook": "storybook dev -p 6006",
+    "storybook:build": "TAMAGUI_TARGET='web' storybook build"
-    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react-native-web": "^0.18.0"
   },
   "dependencies": {
-    "@tamagui/animations-react-native": "^1.0.3",
+    "@tamagui/animations-react-native": "^1.0.8",
-    "@tamagui/core": "^1.0.3",
+    "@tamagui/core": "^1.0.8",
-    "@tamagui/font-inter": "^1.0.3",
+    "@tamagui/font-inter": "^1.0.8",
-    "@tamagui/react-native-media-driver": "^1.0.3",
+    "@tamagui/react-native-media-driver": "^1.0.8",
-    "@tamagui/shorthands": "^1.0.3",
+    "@tamagui/shorthands": "^1.0.8",
-    "@tamagui/theme-base": "^1.0.3",
+    "@tamagui/theme-base": "^1.0.8",
-    "tamagui": "^1.0.3"
+    "tamagui": "^1.0.8"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.0.0-beta.21",
@@ -35,12 +38,13 @@
     "@storybook/react": "^7.0.0-beta.21",
     "@storybook/react-vite": "^7.0.0-beta.21",
     "@storybook/testing-library": "^0.0.13",
-    "@tamagui/build": "^1.0.3",
+    "@tamagui/build": "^1.0.8",
-    "@tamagui/vite-plugin": "^1.0.3",
+    "@tamagui/vite-plugin": "^1.0.8",
-    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-native-web": "^0.18.0",
     "storybook": "^7.0.0-beta.21",
+    "storybook-addon-designs": "^7.0.0-beta.2",
     "vite": "^4.0.4"
   }
 }

packages/components/src/avatar/avatar.stories.tsx

@@ -0,0 +1,46 @@
+import { Stack } from '@tamagui/core'
+
+import { Avatar } from './avatar'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Avatar> = {
+  component: Avatar,
+  argTypes: {},
+}
+
+type Story = StoryObj<typeof Avatar>
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80',
+  },
+  render: args => (
+    <Stack space>
+      <Avatar {...args} size={56} />
+      <Avatar {...args} size={52} />
+      <Avatar {...args} size={48} />
+      <Avatar {...args} size={32} />
+      <Avatar {...args} size={20} />
+    </Stack>
+  ),
+}
+
+export const Rounded: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80',
+  },
+  render: args => (
+    <Stack space>
+      <Avatar {...args} size={56} shape="rounded" />
+      <Avatar {...args} size={52} shape="rounded" />
+      <Avatar {...args} size={48} shape="rounded" />
+      <Avatar {...args} size={32} shape="rounded" />
+      <Avatar {...args} size={20} shape="rounded" />
+    </Stack>
+  ),
+}
+
+export default meta

packages/components/src/avatar/avatar.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react'
+
+import { Stack, styled, Text } from '@tamagui/core'
+
+import { Image } from '../image'
+
+import type { GetProps } from '@tamagui/core'
+
+// import { Button as RNButton } from 'react-native'
+
+// setupReactNative({ Button: RNButton })
+
+// import type { GetProps} from '@tamagui/core';
+
+const Base = styled(Stack, {
+  name: 'Avatar',
+
+  display: 'inline-flex',
+  position: 'relative',
+  overflow: 'hidden',
+  backgroundColor: 'rgb(255,255,255)',
+
+  variants: {
+    size: {
+      56: {
+        width: 56,
+        height: 56,
+        borderRadius: 56 / 2,
+      },
+      52: {
+        width: 52,
+        height: 52,
+        borderRadius: 52 / 2,
+      },
+      48: {
+        width: 48,
+        height: 48,
+        borderRadius: 48 / 2,
+      },
+      32: {
+        width: 32,
+        height: 32,
+        borderRadius: 32 / 2,
+      },
+      20: {
+        width: 20,
+        height: 20,
+        borderRadius: 20 / 2,
+      },
+    },
+
+    shape: {
+      circle: {},
+      rounded: {
+        borderRadius: 16,
+      },
+    },
+  } as const,
+})
+
+const Fallback = styled(Text, {
+  name: 'AvatarFallback',
+})
+
+type BaseProps = GetProps<typeof Base>
+
+interface Props {
+  src: string
+  size: NonNullable<BaseProps['size']>
+  indicator?: 'online' | 'offline'
+  shape?: 'circle' | 'rounded'
+}
+
+type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'
+
+const Avatar = (props: Props) => {
+  const { src, size, shape = 'circle' } = props
+
+  const [status, setStatus] = useState<ImageLoadingStatus>('idle')
+
+  useEffect(() => {
+    setStatus('idle')
+  }, [JSON.stringify(src)])
+
+  return (
+    <Base size={size} shape={shape}>
+      <Image
+        src={src}
+        width={size}
+        height={size}
+        onLoad={() => setStatus('loaded')}
+        onError={() => setStatus('error')}
+      />
+      <Fallback
+        width={size}
+        height={size}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        PP
+      </Fallback>
+    </Base>
+  )
+}
+
+export { Avatar }
+export type { Props as AvatarProps }

packages/components/src/avatar/index.tsx

@@ -0,0 +1 @@
+export { Avatar } from './avatar'

packages/components/src/button/button.stories.tsx

@@ -0,0 +1,33 @@
+import { Button } from './button'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {},
+}
+
+type Story = StoryObj<typeof Button>
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    children: 'Click me',
+  },
+}
+
+export const PrimaryLong: Story = {
+  args: {
+    children: 'Lorem ipsum dim sum',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    type: 'positive',
+    children: 'Click me',
+  },
+}
+
+export default meta

packages/components/src/button/button.tsx

@@ -0,0 +1,60 @@
+import { Stack, styled, Text } from '@tamagui/core'
+
+import type { GetProps } from '@tamagui/core'
+// import { Button} from 'react-native'
+
+// import { Button as RNButton } from 'react-native'
+
+// setupReactNative({ Button: RNButton })
+
+// import type { GetProps} from '@tamagui/core';
+
+const Base = styled(Stack, {
+  // tag: 'button',
+
+  cursor: 'pointer',
+  borderRadius: 12,
+  display: 'inline-flex',
+  paddingHorizontal: 16,
+  paddingVertical: 10,
+
+  variants: {
+    type: {
+      primary: {
+        backgroundColor: 'hsla(229, 71%, 57%, 1)',
+        hoverStyle: { backgroundColor: 'hsla(229, 54%, 45%, 1)' },
+        pressStyle: { backgroundColor: 'hsla(229, 54%, 45%, 1)' },
+      },
+      positive: {
+        backgroundColor: 'hsla(174, 63%, 40%, 1)',
+        hoverStyle: { backgroundColor: 'hsla(174, 63%, 34%, 1)' },
+        pressStyle: { backgroundColor: 'hsla(174, 63%, 34%, 1)' },
+      },
+    },
+  } as const,
+})
+
+const ButtonText = styled(Text, {
+  color: 'rgb(255, 255, 255)',
+  textAlign: 'center',
+})
+
+type BaseProps = GetProps<typeof Base>
+
+interface Props {
+  type?: BaseProps['type']
+  children: string
+}
+
+const Button = (props: Props) => {
+  const { type = 'primary', children } = props
+
+  return (
+    <Base type={type}>
+      <ButtonText>{children}</ButtonText>
+    </Base>
+  )
+}
+
+export { Button }
+// const Button =

packages/components/src/button/index.tsx

@@ -0,0 +1 @@
+export { Button } from './button'

packages/components/src/image/image.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { Stack } from '@tamagui/core'
+
+import { Image } from './image'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Image> = {
+  component: Image,
+  argTypes: {},
+}
+
+type Story = StoryObj<typeof Image>
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1673253082952-4ba1b404e5ee?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80',
+    width: 500,
+    height: 500,
+  },
+  render: args => (
+    <Stack space spaceDirection="vertical">
+      <Image {...args} width={500} height={500} />
+      <Image {...args} width={500} height={350} />
+      <Image {...args} width={500} height={200} />
+    </Stack>
+  ),
+}
+
+export default meta

packages/components/src/image/image.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef } from 'react'
+
+import { isWeb, setupReactNative, styled } from '@tamagui/core'
+import { Image as RNImage } from 'react-native'
+
+import type { GetProps } from '@tamagui/core'
+import type { Ref } from 'react'
+
+// TODO: this was used in @tamagui/image package. Why?
+// import { focusableInputHOC } from '@tamagui/focusable'
+
+setupReactNative({
+  Image: RNImage,
+})
+
+const Base = styled(RNImage, {
+  name: 'Image',
+  position: 'relative',
+  source: { uri: '' },
+  zIndex: 1,
+})
+
+type InputProps = GetProps<typeof Image>
+
+interface Props {
+  src: string
+  width: number
+  height: number
+  // onLoad?: InputProps['onLoad']
+  // onError?: InputProps['onError']
+}
+
+const Image = (props: Props, ref: Ref<HTMLImageElement>) => {
+  const { src } = props
+
+  const source =
+    typeof src === 'string'
+      ? {
+          uri: src,
+          ...(isWeb && { width: props.width, height: props.height }),
+        }
+      : src
+
+  return <Base source={source} ref={ref} />
+}
+
+// focusableInputHOC(Image)
+const _Image = Base.extractable(forwardRef(Image))
+
+export { _Image as Image }

packages/components/src/image/index.tsx

@@ -0,0 +1 @@
+export * from './image'

packages/components/src/index.tsx

@@ -1,3 +1,7 @@
+export * from './button'
+export * from './image'
+export * from './input'
 export * from './shape'
+export * from './sidebar'
 export { config } from './tamagui.config'
 export * from './typography'

packages/components/src/input/index.tsx

@@ -0,0 +1 @@
+export { Input } from './input'

packages/components/src/input/input.stories.tsx

@@ -0,0 +1,21 @@
+import { Input } from './input'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Input> = {
+  component: Input,
+  argTypes: {},
+}
+
+type Story = StoryObj<typeof Input>
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    placeholder: 'Type something...',
+    // children: 'Click me',
+  },
+}
+
+export default meta

packages/components/src/input/input.tsx

@@ -0,0 +1,69 @@
+import { setupReactNative, Stack, styled } from '@tamagui/core'
+// import { focusableInputHOC } from '@tamagui/focusable'
+import { TextInput } from 'react-native'
+
+import type { GetProps } from '@tamagui/core'
+
+// import { inputSizeVariant } from '../helpers/inputHelpers'
+
+setupReactNative({
+  TextInput,
+})
+
+export const InputFrame = styled(
+  TextInput,
+  {
+    tag: 'input',
+    name: 'Input',
+    // fontFamily: '$body',
+    borderWidth: 1,
+    outlineWidth: 0,
+    borderColor: 'rgba(0, 200, 0, 1)',
+
+    paddingHorizontal: 30,
+    color: 'hsla(218, 51%, 7%, 1)',
+    placeholderTextColor: 'hsla(219, 17%, 69%, 1)',
+    // color: 'red',
+    // color: '$color',
+    // focusable: true,
+    // borderColor: '$borderColor',
+    // backgroundColor: '$background',
+    // placeholderTextColor: '$placeholderColor',
+
+    backgroundColor: 'rgb(255, 255, 255)',
+
+    height: 40,
+    borderRadius: 12,
+
+    // this fixes a flex bug where it overflows container
+    minWidth: 0,
+
+    // hoverStyle: {
+    // borderColor: '$borderColorHover',
+    // },/
+
+    // focusStyle: {
+    //   // borderColor: '$borderColorFocus',
+    //   borderWidth: 2,
+    //   marginHorizontal: -1,
+    // },
+
+    // variants: {
+    //   size: {
+    //     // '...size': inputSizeVariant,
+    //   },
+    // } as const,
+
+    // defaultVariants: {
+    //   size: '$true',
+    // },
+  }
+  // {
+  //   isInput: true,
+  // }
+)
+
+export type InputProps = GetProps<typeof InputFrame>
+
+// export const Input = focusableInputHOC(InputFrame)
+export const Input = InputFrame

packages/components/src/sidebar/index.tsx

@@ -0,0 +1 @@
+export { Sidebar } from './sidebar'

packages/components/src/sidebar/sidebar.stories.tsx

@@ -0,0 +1,30 @@
+import { Sidebar } from './sidebar'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Sidebar> = {
+  component: Sidebar,
+  argTypes: {},
+}
+
+type Story = StoryObj<typeof Sidebar>
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    name: 'Rarible',
+    description:
+      'Multichain community-centric NFT marketplace. Create, buy and sell your NFTs.',
+    membersCount: 476,
+  },
+}
+
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Web?node-id=14692%3A148489&t=NfQkS7CPSrZknAGF-4',
+  },
+}
+
+export default meta

packages/components/src/sidebar/sidebar.tsx

@@ -0,0 +1,51 @@
+import { Stack, styled, Text } from '@tamagui/core'
+
+import { Avatar } from '../avatar'
+import { Button } from '../button'
+import { Image } from '../image'
+
+const Name = styled(Text, {})
+
+const Desc = styled(Text, {})
+
+interface Props {
+  name: string
+  description: string
+  membersCount: number
+}
+
+const _Sidebar = (props: Props) => {
+  const { name, description, membersCount } = props
+
+  return (
+    <Stack backgroundColor="rgb(255,255,255)">
+      <Image
+        src="https://images.unsplash.com/photo-1584475784921-d9dbfd9d17ca?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
+        width={350}
+        height={136}
+      />
+      <Stack
+        paddingHorizontal={16}
+        paddingBottom={16}
+        marginTop={-16}
+        backgroundColor="rgb(255,255,255)"
+        borderTopLeftRadius={16}
+        borderTopRightRadius={16}
+        zIndex={10}
+      >
+        <Stack marginTop={-32} marginBottom={12}>
+          <Avatar
+            src="https://images.unsplash.com/photo-1553835973-dec43bfddbeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
+            size={56}
+          />
+        </Stack>
+        <Name marginBottom={16}>{name}</Name>
+        <Desc marginBottom={12}>{description}</Desc>
+        <Desc marginBottom={12}>{membersCount}</Desc>
+        <Button>Request to join community</Button>
+      </Stack>
+    </Stack>
+  )
+}
+
+export const Sidebar = _Sidebar

packages/components/vite.config.ts

@@ -1,139 +1,23 @@
-// import tamagui from '@tamagui/vite-plugin'
+import { tamaguiPlugin } from '@tamagui/vite-plugin'
 import react from '@vitejs/plugin-react-swc'
 import { defineConfig } from 'vite'
 
-// console.log('tamagui', tamagui)
+import type { PluginOption } from 'vite'
-// const { tamaguiPlugin, tamaguiExtractPlugin } = tamagui
-
-// Tamagui exports incorrectly this plugin
-function tamaguiPlugin(options): any {
-  const components = [
-    ...new Set([...options.components, 'tamagui', '@tamagui/core'])
-  ]
-  const noExternalSSR = new RegExp(
-    `${components.join('|')}|react-native|expo-linear-gradient`,
-    'ig'
-  )
-
-  const plugin: any = {
-    name: 'tamagui-base',
-    enforce: 'pre',
-
-    config(userConfig, env) {
-      return {
-        plugins: [
-          //
-          // envPlugin(['NODE_ENV', 'TAMAGUI_TARGET', 'ENABLE_RSC']),
-          // viteCommonjs(),
-        ],
-        define: {
-          // reanimated support
-          'global.__x': {},
-          _frameTimestamp: undefined,
-          _WORKLET: false,
-          ...(process.env.NODE_ENV !== 'test' && {
-            'process.env.TAMAGUI_TARGET': JSON.stringify(
-              process.env.TAMAGUI_TARGET || 'web'
-            ),
-            'process.env.NODE_ENV': JSON.stringify(
-              process.env.NODE_ENV || env.mode
-            ),
-            'process.env.ENABLE_RSC': JSON.stringify(
-              process.env.ENABLE_RSC || ''
-            ),
-            'process.env.ENABLE_STEPS': JSON.stringify(
-              process.env.ENABLE_STEPS || ''
-            ),
-            'process.env.IS_STATIC': JSON.stringify(false)
-          })
-        },
-        // build: {
-        //   commonjsOptions: {
-        //     transformMixedEsModules: true,
-        //   },
-        // },
-        ssr: {
-          noExternal: noExternalSSR
-        },
-        optimizeDeps: {
-          // disabled: false,
-          include: ['styleq', 'react-native-reanimated'],
-          esbuildOptions: {
-            jsx: 'transform',
-            // plugins: [
-            //   esbuildCommonjs([
-            //     'styleq',
-            //     'inline-style-prefixer',
-            //     'create-react-class',
-            //     'copy-to-clipboard',
-            //   ]),
-            // ],
-            resolveExtensions: [
-              '.web.js',
-              '.web.ts',
-              '.web.tsx',
-              '.js',
-              '.jsx',
-              '.json',
-              '.ts',
-              '.tsx',
-              '.mjs'
-            ],
-            loader: {
-              '.js': 'jsx'
-            }
-          }
-        },
-        resolve: {
-          // for once it extracts
-          // mainFields: ['module:jsx', 'module', 'jsnext:main', 'jsnext', 'main'],
-          extensions: [
-            '.web.js',
-            '.web.ts',
-            '.web.tsx',
-            '.js',
-            '.jsx',
-            '.json',
-            '.ts',
-            '.tsx',
-            '.mjs'
-          ],
-          alias: {
-            'react-native/Libraries/Renderer/shims/ReactFabric':
-              '@tamagui/proxy-worm',
-            'react-native/Libraries/Utilities/codegenNativeComponent':
-              '@tamagui/proxy-worm',
-            'react-native-svg': '@tamagui/react-native-svg',
-            'react-native': 'react-native-web',
-            ...(options.useReactNativeWebLite && {
-              'react-native': 'react-native-web-lite',
-              'react-native-web': 'react-native-web-lite'
-            })
-          }
-        }
-      }
-    }
-  }
-
-  return plugin
-}
-
-// process.env.TAMAGUI_TARGET = 'web'
 
 const tamaguiConfig = {
   components: [],
-  config: './src/tamagui.config.ts'
+  config: './src/tamagui.config.ts',
   // useReactNativeWebLite: true,
 }
 
 // https://vitejs.dev/config
 export default defineConfig({
   define: {
-    TAMAGUI_TARGET: JSON.stringify('web')
+    TAMAGUI_TARGET: JSON.stringify('web'),
   },
   plugins: [
     react(),
-    tamaguiPlugin(tamaguiConfig)
+    tamaguiPlugin(tamaguiConfig) as PluginOption,
     // tamaguiExtractPlugin(tamaguiConfig)
-  ]
+  ],
 })