WIP DO NOT MERGE Core/tamagui

.gitignore

@@ -11,6 +11,9 @@ yarn-error.log*
 
 .turbo
 
+# tamagui
+**/.tamagui/*
+
 build/**
 **/dist/**
 .next/**

.vscode/settings.json

@@ -5,7 +5,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "graphql-config.load.filePath": "./frontend/graphql.config.js",
-  "cSpell.words": ["fastify"],
+  "cSpell.words": ["fastify", "tamagui"],
   "eslint.workingDirectories": ["./frontend", "./backend"],
   "files.watcherExclude": {
     "**/.git/objects/**": true,

apps/frontend/jest-preprocess.js

@@ -1,8 +1,6 @@
-// setup for twin.macro to work
-
 const babelOptions = {
   presets: ['@babel/preset-typescript'],
-  plugins: ['babel-plugin-macros'],
+  // plugins: ['babel-plugin-macros'],
 }
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires

apps/frontend/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

apps/frontend/next.config.js

@@ -1,10 +1,81 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+/* eslint-disable @typescript-eslint/no-var-requires */
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 })
+/** @type {import('next').NextConfig} */
+const { withTamagui } = require('@tamagui/next-plugin')
+const withImages = require('next-images')
+const { join } = require('path')
 
-const config = {
-  pageExtensions: ['page.tsx', 'api.ts'],
+process.env.IGNORE_TS_CONFIG_PATHS = 'true'
+process.env.TAMAGUI_TARGET = 'web'
+process.env.TAMAGUI_DISABLE_WARN_DYNAMIC_LOAD = '1'
+
+const boolVals = {
+  true: true,
+  false: false,
 }
 
-module.exports = withBundleAnalyzer(config)
+const disableExtraction =
+  boolVals[process.env.DISABLE_EXTRACTION] ??
+  process.env.NODE_ENV === 'development'
+
+const plugins = [
+  withBundleAnalyzer,
+  withImages,
+  withTamagui({
+    config: './tamagui.config.ts',
+    components: ['tamagui', 'ui'],
+    importsWhitelist: ['constants.js', 'colors.js'],
+    logTimings: true,
+    disableExtraction,
+    // experiment - reduced bundle size react-native-web
+    useReactNativeWebLite: false,
+    shouldExtract: (path) => {
+      if (path.includes(join('packages', 'app'))) {
+        return true
+      }
+    },
+    excludeReactNativeWebExports: [
+      'Switch',
+      'ProgressBar',
+      'Picker',
+      'CheckBox',
+      'Touchable',
+    ],
+  }),
+]
+
+module.exports = function () {
+  /** @type {import('next').NextConfig} */
+  let config = {
+    typescript: {
+      ignoreBuildErrors: true,
+    },
+    images: {
+      disableStaticImages: true,
+    },
+    pageExtensions: ['page.tsx', 'api.ts'],
+    transpilePackages: [
+      'solito',
+      'react-native-web',
+      'expo-linking',
+      'expo-constants',
+      'expo-modules-core',
+    ],
+    experimental: {
+      optimizeCss: true,
+      scrollRestoration: true,
+      legacyBrowsers: false,
+    },
+  }
+
+  for (const plugin of plugins) {
+    config = {
+      ...config,
+      ...plugin(config),
+    }
+  }
+
+  return config
+}

apps/frontend/package.json

@@ -2,6 +2,9 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
     "dev": "next dev & yarn run codegen:watch",
     "build": "next build",
@@ -17,23 +20,31 @@
   "dependencies": {
     "@auth0/auth0-react": "1.12.0",
     "@heroicons/react": "1.0.6",
+    "@next/font": "^13.1.5",
     "@radix-ui/colors": "0.1.8",
     "@radix-ui/react-avatar": "1.0.1",
     "@radix-ui/react-dialog": "1.0.2",
     "@radix-ui/react-icons": "1.1.1",
     "@radix-ui/react-portal": "1.0.1",
+    "@tamagui/next-theme": "^1.1.2",
+    "eslint-config-next": "^13.1.2",
+    "expo-linear-gradient": "^12.0.1",
     "graphql": "15.8.0",
     "graphql-anywhere": "4.2.8",
-    "next": "12.2.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "next": "^13.1.2",
+    "next-images": "^1.8.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "7.34.1",
+    "react-native": "0.0.0",
+    "react-native-web": "^0.18.10",
+    "react-native-web-lite": "^1.0.15",
     "spinners-react": "1.0.7",
     "styled-components": "5.3.6",
-    "tailwindcss": "2.2.19",
     "ts-pattern": "3.3.5",
-    "twin.macro": "2.8.2",
+    "tsconfig": "*",
     "typescript": "4.7.4",
+    "ui": "*",
     "urql": "2.2.3",
     "wonka": "4.0.15",
     "zod": "3.19.1"
@@ -52,27 +63,31 @@
     "@graphql-codegen/typescript-urql": "3.6.4",
     "@graphql-typed-document-node/core": "3.1.1",
     "@next/bundle-analyzer": "12.2.5",
+    "@tamagui/next-plugin": "^1.0.15",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "14.4.3",
     "@types/jest": "27.5.2",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
+    "@types/react-native": "^0.71.0",
     "@types/styled-components": "5.1.26",
     "babel-jest": "27.5.1",
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-styled-components": "2.0.7",
     "babel-plugin-twin": "1.0.2",
     "config": "*",
+    "critters": "^0.0.16",
     "graphql-playground-html": "1.6.30",
     "graphql-typescript-integration": "1.2.1",
     "isomorphic-unfetch": "3.1.0",
     "jest": "27.5.1",
     "msw": "0.44.2",
+    "next-compose-plugins": "^2.2.1",
+    "next-transpile-modules": "^10.0.0",
     "react-is": "18.2.0",
     "react-test-renderer": "18.2.0",
-    "ts-jest": "27.1.5",
-    "tsconfig": "*"
+    "ts-jest": "27.1.5"
   },
   "babelMacros": {
     "twin": {

apps/frontend/src/components/dataDisplay/Avatar.tsx

@@ -1,36 +1,53 @@
 import * as AvatarPrimitive from '@radix-ui/react-avatar'
-import tw from 'twin.macro'
+// export function OldAvatar({
+//   name,
+//   size = 'm',
+// }: {
+//   name: User['name']
+//   size?: 's' | 'm' | 'l'
+// }) {
+//   const firstTwoChar = (name ?? 'NN').substring(0, 2)
+//   return (
+//     <AvatarPrimitive.Root
+//       css={[
+//         tw`inline-flex items-center justify-center align-middle overflow-hidden select-none w-11 h-11 rounded-full bg-black-a9`,
+//         size === 's'
+//           ? tw`w-7 h-7`
+//           : size === 'l'
+//           ? tw`w-20 h-20`
+//           : tw`w-11 h-11`,
+//       ]}
+//     >
+//       <AvatarPrimitive.Image tw="w-full h-full object-cover" />
+//       <AvatarPrimitive.Fallback
+//         css={[
+//           tw`w-full h-full flex items-center justify-center bg-violet-300 border-violet-400 border-2 leading-4 font-semibold rounded-full`,
+//           size === 's' ? tw`text-xs` : size === 'l' ? tw`text-lg` : tw`text-sm`,
+//         ]}
+//       >
+//         {firstTwoChar}
+//       </AvatarPrimitive.Fallback>
+//     </AvatarPrimitive.Root>
+//   )
+// }
+import { Avatar as TAvatar, SizeTokens } from 'tamagui'
 
+// import tw from 'twin.macro'
 import { User } from '~/generated/graphql'
-
 export function Avatar({
   name,
-  size = 'm',
+  size,
 }: {
   name: User['name']
-  size?: 's' | 'm' | 'l'
+  size?: SizeTokens
 }) {
   const firstTwoChar = (name ?? 'NN').substring(0, 2)
+
   return (
-    <AvatarPrimitive.Root
-      css={[
-        tw`inline-flex items-center justify-center align-middle overflow-hidden select-none w-11 h-11 rounded-full bg-black-a9`,
-        size === 's'
-          ? tw`w-7 h-7`
-          : size === 'l'
-          ? tw`w-20 h-20`
-          : tw`w-11 h-11`,
-      ]}
-    >
-      <AvatarPrimitive.Image tw="w-full h-full object-cover" />
-      <AvatarPrimitive.Fallback
-        css={[
-          tw`w-full h-full flex items-center justify-center bg-violet-300 border-violet-400 border-2 leading-4 font-semibold rounded-full`,
-          size === 's' ? tw`text-xs` : size === 'l' ? tw`text-lg` : tw`text-sm`,
-        ]}
-      >
-        {firstTwoChar}
-      </AvatarPrimitive.Fallback>
-    </AvatarPrimitive.Root>
+    <TAvatar circular size={size}>
+      <TAvatar.Image src="http://placekitten.com/200/300" />
+
+      <TAvatar.Fallback bc="red" />
+    </TAvatar>
   )
 }

apps/frontend/src/components/feedback/Dialog.tsx → apps/frontend/src/components/feedback/_Dialog.tsx

@@ -1,7 +1,7 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { Cross1Icon } from '@radix-ui/react-icons'
 import React from 'react'
-import tw from 'twin.macro'
+// import tw from 'twin.macro'
 
 export function Dialog({ children, ...props }: { children: React.ReactNode }) {
   return (

apps/frontend/src/components/general/Button.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import tw from 'twin.macro'
+// import tw from 'twin.macro'
 
 interface Props {
   children: React.ReactNode
@@ -30,14 +30,14 @@ export const Button = React.forwardRef<HTMLButtonElement, Props>(
         className={className}
         disabled={disabled}
         onClick={onClick}
-        tw="px-4 py-2 rounded-lg disabled:bg-placeholder"
-        css={[
-          primary &&
-            tw`
-        text-white bg-blue-500
-        `,
-          secondary && tw`text-white bg-gray-500`,
-        ]}
+        // tw="px-4 py-2 rounded-lg disabled:bg-placeholder"
+        // css={[
+        //   primary &&
+        //     tw`
+        // text-white bg-blue-500
+        // `,
+        //   secondary && tw`text-white bg-gray-500`,
+        // ]}
         ref={forwardedRef}
       >
         {children}

apps/frontend/src/components/index.ts

@@ -1,12 +1,9 @@
 // General
 export * from './general/Button'
 
-// Layout
-export * from './layout/Flex'
-
 // Feedback
 export * from './feedback/Spinner'
-export * from './feedback/Dialog'
+// export * from './feedback/_Dialog'
 
 // Form
 export * from './form/TextField'