@luxfi/ui 5.5.3 → 6.0.0

package/README.md

@@ -0,0 +1,109 @@
+# `ui` Package
+
+This package holds a component library and themes that can be used across all apps.
+
+## UI Package Philosophy
+
+The `ui` package contains all low level components that are shared between apps. It should *not* contain components that are specific to any one app or Uniswap business logic. Each component should be guided by the following principles:
+
+- All components should be compatible with all platforms.
+- Wrap as many implementation details as possible, including any direct exports from Tamagui.
+- Export only what’s needed from `ui/src` or another allowlisted path.
+- Only include components that will be used beyond a single feature.
+
+Components that are shared between all applications but encode Uniswap business logic should most likely be placed in the `uniswap` package!
+
+## Icons and Logos
+
+Icons and logos are placed in `ui/src/components/{icons|logos}`. These files are generated from placing the file in `packages/ui/src/assets/icons` or `packages/ui/src/assets/logos/svg` and running the generate command(s):
+
+```bash
+# Generate all icons
+bun ui build:icons
+# Generate any icons that do not yet have an existing TS file
+bun ui build:icons:missing
+```
+
+When adding an SVG, please ensure you replace color references as needed with `currentColor` to ensure the asset respects the color property when used.
+
+Custom icons that take props can be added to the same icons import by adding the file in `packages/ui/src/components/icons/index.ts`.
+
+## Core Components
+
+Many base components are available in the UI library. While some are customized `tamagui` elements or even fully custom elements, many are simple or direct exposure of `tamagui` elements. If you would like to use any `tamagui` elements, please add them through this library to ensure a layer of abstraction between tamagui and our usage when possible.
+
+Below are summaries of the most commonly used elements.
+
+### Flex
+
+The `Flex` component is the core organizational element of the UI library, acting as a base of a flexbox styling approach. Shortcuts are available for `row`, `grow`, `shrink`, `fill`, and `centered`. All other styling props can be added directly as needed.
+
+### Text
+
+The `Text` element is the core element for displaying text through the app. The `variant` prop takes in the text variant from our design system (e.g `heading1`, `body2`, etc.) that is desired. All other text styling props can be added directly as needed.
+
+## Theme and Platform
+
+### Theming
+
+Theming is applied through two primary methods:
+
+1. Any components that take in design systems values (e.g `heading1`, `body2`, etc.) will automatically respect the theme.
+2. In all other cases, `useSporeColors` will return the current theme colors to be used in any component.
+
+To force a specific theme usage, the `Theme` wrapper will ensure other theme elements pick up the specific theme.
+
+```javascript
+<Theme name="dark">
+  ...
+</Theme>
+```
+
+### Screen Size Differences
+
+All breakpoints for both vertical and horizontal sizing have been defined in `packages/ui/src/theme/breakpoints.ts`.
+
+To account for screen size references, components take in props to adapt custom style per breakpoint, like so:
+
+```javascript
+<Flex
+  margin="20"
+  $short={{ margin: 10 }}
+>
+  ...
+</Flex>
+```
+
+When components cannot take in these props or a value needs to be resued multiple times, the `useMedia` hook allows these same breakpoint values to be defined programmatically.
+
+### Colors
+
+We've made a hook `useSporeColors()` which gives you access to the current theme, and you can access the values off it as follows:
+
+```tsx
+import { useSporeColors } from 'ui/src'
+
+function MyComponent() {
+  const colors = useSporeColors()
+
+  colors.accent1.val // returns something like #fff
+  colors.accent1.get() // returns a "dynamic" color value
+}
+```
+
+#### When to use `.get()` vs `.val`
+
+After some discussion we've come to prefer `.val` by default. This will always return the raw string color (in our case hex color) on all platforms, whereas `.get()` returns either an Object (iOS) or a string, which can cause issues when used with things like animations, or external components.
+
+Using .val has some performance downside vs .get in that all usages of .val will re-render when themes change, whereas .get will avoid re-renders on iOS and Web by optimizing to platform-specific constructs. On iOS, it optimizes to [DynamicColorIOS](https://reactnative.dev/docs/dynamiccolorios), on web a CSS variable like `var(--accent1)`.
+
+So if/when we notice slowness in our light/dark mode change, we'll want to check if our usages of .val are causing expensive re-renders and see if we can convert them to .get.
+
+In summary:
+
+- Prefer `.val` which always returns the original color string, like `#fff`.
+- Using `.get()` returns a dynamic value depending on the platform and avoids re-rendering when themes change between light and dark. This is nice for fast light/dark mode switching (and in the future if we use sub-themes, it would also avoid re-renders there).
+  - On Android it returns the same as .val, `#fff`
+  - On iOS, it returns an object like `{ dynamic: { light: '#fff', dark: '#000' } }`
+  - On the web, it returns a CSS variable string, `var(--colorName)`
+  - You can call `.get('web')` to only optimize for web, or `.get('ios')` to only optimize for ios.

package/package.json

@@ -1,81 +1,89 @@
 {
   "name": "@luxfi/ui",
-  "version": "5.5.3",
-  "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public",
-    "scope": "@luxfi"
+  "version": "6.0.0",
+  "dependencies": {
+    "@gorhom/bottom-sheet": "4.6.4",
+    "@react-native-masked-view/masked-view": "0.3.2",
+    "@shopify/flash-list": "1.7.6",
+    "@shopify/react-native-skia": "2.2.20",
+    "@storybook/react": "8.5.2",
+    "@hanzogui/adapt": "2.0.1",
+    "@hanzogui/animations-css": "2.0.1",
+    "@hanzogui/animations-react-native": "2.0.1",
+    "@hanzogui/font-geist-sans": "2.0.1",
+    "@hanzogui/helpers-icon": "2.0.1",
+    "@hanzogui/portal": "2.0.1",
+    "@hanzogui/react-native-media-driver": "2.0.1",
+    "@hanzogui/remove-scroll": "2.0.1",
+    "@hanzogui/theme-base": "2.0.1",
+    "@tanstack/react-query": "5.90.20",
+    "@testing-library/react": "16.3.0",
+    "ethers": "5.7.2",
+    "expo-blur": "14.1.5",
+    "expo-linear-gradient": "14.1.5",
+    "i18next": "23.10.0",
+    "qrcode": "1.5.1",
+    "react": "19.0.3",
+    "react-i18next": "14.1.0",
+    "react-native": "0.79.5",
+    "react-native-fast-image": "8.6.3",
+    "react-native-gesture-handler": "2.24.0",
+    "react-native-image-colors": "1.5.2",
+    "react-native-keyboard-controller": "1.17.5",
+    "react-native-reanimated": "3.19.3",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-svg": "15.13.0",
+    "react-native-webview": "13.13.5",
+    "@hanzo/gui": "2.0.1",
+    "@luxfi/utilities": "^1.0.0",
+    "uuid": "9.0.0",
+    "wcag-contrast": "3.0.0"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/luxfi/web.git",
-    "directory": "pkg/core"
+  "devDependencies": {
+    "@storybook/test": "8.5.2",
+    "@hanzogui/animations-moti": "2.0.1",
+    "@hanzogui/core": "2.0.1",
+    "@types/chrome": "0.0.304",
+    "@types/fs-extra": "11.0.2",
+    "@types/node": "22.13.1",
+    "@types/qrcode": "1.5.5",
+    "@typescript/native-preview": "7.0.0-dev.20260108.1",
+    "@luxfi/eslint-config": "^1.0.0",
+    "@vitejs/plugin-react": "4.7.0",
+    "camelcase": "6.3.0",
+    "cheerio": "1.0.0-rc.12",
+    "esbuild-register": "3.6.0",
+    "eslint": "8.57.1",
+    "fs-extra": "11.2.0",
+    "jsdom": "20.0.3",
+    "typescript": "5.8.3",
+    "uppercamelcase": "3.0.0",
+    "vitest": "3.2.1",
+    "vitest-presets": "*"
   },
-  "keywords": [
-    "components",
-    "radix-ui",
-    "hanzo",
-    "luxdefi"
-  ],
+  "files": ["types", "dist"],
+  "main": "./src/index.ts",
+  "module:jsx": "src",
+  "private": false,
   "scripts": {
-    "lat": "npm show @luxfi/ui version",
-    "pub": "npm publish",
-    "build": "tsc",
-    "tc": "tsc",
-    "clean": "rm -rf node_modules"
-  },
-  "exports": {
-    ".": "./components/index.ts",
-    "./commerce": "./commerce/ui/context.tsx",
-    "./root-layout": "./root-layout/index.tsx",
-    "./next": "./next/index.ts",
-    "./style/": "./style/",
-    "./site-def": "./site-def/index.ts",
-    "./tailwind": "./tailwind/index.ts"
+    "build:icons": "nx build:icons ui",
+    "build:icons:missing": "nx build:icons:missing ui",
+    "check:deps:usage": "nx check:deps:usage ui",
+    "lint": "nx lint ui",
+    "lint:fix": "nx lint:fix ui",
+    "lint:biome": "nx lint:biome ui",
+    "lint:biome:fix": "nx lint:biome:fix ui",
+    "lint:eslint": "nx lint:eslint ui",
+    "lint:eslint:fix": "nx lint:eslint:fix ui",
+    "test": "nx test ui",
+    "test:coverage": "nx test:coverage ui",
+    "typecheck": "nx typecheck ui",
+    "typecheck:tsgo": "nx typecheck:tsgo ui",
+    "watch": "nx watch ui"
   },
-  "dependencies": {
-    "@next/third-parties": "^14.1.0",
-    "cookies-next": "^4.1.1",
-    "date-fns": "^3.6.0",
-    "embla-carousel-autoplay": "^8.1.6",
-    "firebase": "10.12.0",
-    "framer-motion": "^11.2.12",
-    "react-device-detect": "^2.2.3",
-    "react-social-icons": "^6.4.0",
-    "react-tooltip": "^5.26.4",
-    "request": "^2.88.2",
-    "usehooks-ts": "^3.1.0"
-  },
-  "peerDependencies": {
-    "@hanzo/auth": "catalog:",
-    "@hanzo/commerce": "catalog:",
-    "@hanzo/ui": "catalog:",
-    "@luxfi/menu-icons": "1.0.2",
-    "@hookform/resolvers": "^3.3.2",
-    "lucide-react": "catalog:",
-    "mobx": "^6.12.3",
-    "mobx-react-lite": "^4.0.7",
-    "next": "catalog:",
-    "next-themes": "^0.2.1",
-    "react": "catalog:",
-    "react-dom": "catalog:",
-    "react-hook-form": "catalog:",
-    "validator": "^13.11.0",
-    "zod": "3.23.8"
+  "nx": {
+    "includedScripts": []
   },
-  "devDependencies": {
-    "@hookform/resolvers": "^3.3.2",
-    "@mdx-js/loader": "^3.0.0",
-    "@mdx-js/react": "^3.0.0",
-    "@types/facebook-pixel": "^0.0.30",
-    "@types/gtag.js": "^0.0.19",
-    "@types/mdx": "^2.0.9",
-    "@types/node": "catalog:",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
-    "@types/validator": "^13.12.1",
-    "tailwindcss": "catalog:",
-    "typescript": "catalog:"
-  }
+  "sideEffects": ["*.css"],
+  "types": "./types/index"
 }

package/commerce/ui/conf.ts

@@ -1,13 +0,0 @@
-import type { SnapPointsConfig } from './store'
-
-export default {
-  mb: {
-    micro: '72px',
-    full: '600px' 
-  },
-
-  dt: {
-    micro: '90px',
-    full: '620px' 
-  }
-} satisfies SnapPointsConfig

package/commerce/ui/context.tsx

@@ -1,123 +0,0 @@
-'use client'
-import React, { 
-  createContext, 
-  useContext, 
-  useRef, 
-  type PropsWithChildren, 
-  useEffect,
-  useLayoutEffect
-} from 'react'
-import { enableStaticRendering } from 'mobx-react-lite'
-import { usePathname } from 'next/navigation'
-import { useDebounceCallback } from 'usehooks-ts'
-
-
-import { preset as twConfig } from '@hanzo/ui/tailwind'
-import { useCommerce } from '@hanzo/commerce'
-
-import type { CommerceDrawer, SelectAndBuy } from './store'
-import { CommerceUIStore } from './store'
-import conf from './conf'
-
-const LOG = false ////////////////////
-const log = (s: string) => {
-  if (LOG) {
-    console.log('CMMC UI CONTEXT ' + s)
-  }
-}
-
-// https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
-enableStaticRendering(typeof window === "undefined")
-
-const CommerceUIContext = createContext<CommerceUIStore | undefined>(undefined)
-
-const useCommerceDrawer = (): CommerceDrawer => {
-  return useContext(CommerceUIContext) as CommerceDrawer
-}
-
-const useSelectAndBuy = (): SelectAndBuy => {
-  return useContext(CommerceUIContext) as SelectAndBuy
-}
-
-const CommerceUIProvider: React.FC<PropsWithChildren> = ({ 
-  children,
-}) => {
-
-  const cmmc = useCommerce()
-  const pathname = usePathname()
-  const storeRef = useRef<CommerceUIStore>(new CommerceUIStore(cmmc, conf))
-  const prevPathRef = useRef<string>('initial')
-
-  const onResize = () => { 
-    const width = window.innerWidth 
-    let desktopMin = 0
-    if (twConfig.theme?.screens) {
-        // expected form: { md: '768px' }
-      if ('md' in twConfig.theme?.screens && typeof twConfig.theme?.screens.md === 'string') {
-        desktopMin = parseInt(twConfig.theme?.screens.md)
-      }
-      if (width < desktopMin) {
-        if (!storeRef.current.isMobile) {
-          storeRef.current.setMobile(true)
-        }
-      }
-      else if (storeRef.current.isMobile) {
-        storeRef.current.setMobile(false)
-      }
-    }
-    storeRef.current.setViewportHeight(window.innerHeight)
-  }
-
-  const onResize_debounced = useDebounceCallback(onResize, 500)
-
-  useLayoutEffect(() => {
-    storeRef.current.initialize()
-    onResize()
-    window.addEventListener('resize', onResize_debounced);
-
-    return () => {
-      window.removeEventListener('resize', onResize_debounced)
-      storeRef.current.dispose() 
-    }
-  }, [])
-
-  useEffect(() => {
-    const checkingOut = (pathname === '/checkout')
-
-    /////////////////////////////////////
-    log("useEffect: pathname: " + pathname)
-    log("useEffect: prev pathname: " + prevPathRef.current)
-    
-    if (storeRef.current.checkingOut === undefined || storeRef.current._checkingOut!== checkingOut) {
-      log("useEffect: setting checkingOut to: " + checkingOut) /////////////////////////////////////
-      storeRef.current.setCheckingOut(checkingOut)
-    }
-    if ( prevPathRef.current === 'initial') {
-      prevPathRef.current = pathname
-      storeRef.current.newRoute()
-    }
-    else if (
-      !checkingOut
-      &&
-      prevPathRef.current !== pathname
-    ) {
-      storeRef.current.newRoute()
-      prevPathRef.current = pathname
-      log("ROUTE CHANGE: " + pathname + ": " + storeRef.current._routeChangedTime)
-    }  
-  }, [pathname])
-
-
-  return (
-    <CommerceUIContext.Provider value={storeRef.current}>
-      {children}
-    </CommerceUIContext.Provider>
-  )
-}
-
-export {
-  useCommerceDrawer, 
-  useSelectAndBuy,
-  CommerceUIProvider
-}
-