add nativewind config

app.json

@@ -10,6 +10,7 @@
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "backgroundColor": "#F0F4F8",
+    "userInterfaceStyle": "automatic",
     "scheme": "wcpos",
     "splash": {
       "image": "./assets/splash.png",

babel.config.js

@@ -1,7 +1,11 @@
 module.exports = function (api) {
 	api.cache(true);
 	return {
-		presets: [['babel-preset-expo', { jsxRuntime: 'automatic' }], '@babel/preset-typescript'],
+		presets: [
+			['babel-preset-expo', { jsxRuntime: 'automatic', jsxImportSource: 'nativewind' }],
+			'@babel/preset-typescript',
+			'nativewind/babel',
+		],
 		plugins: ['react-native-reanimated/plugin', '@babel/plugin-proposal-export-namespace-from'],
 	};
 };

global.css

@@ -0,0 +1,71 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 210.66 39.5% 23.3%;
+    --card: 0 0% 100%;
+    --card-foreground: 210.66 39.5% 23.3%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 210.66 39.5% 23.3%;
+    --primary: 202.36 82.8% 41%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 210.66 39.5% 23.3%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 210.66 39.5% 23.3%;
+    --foreground: 210 40% 98%;
+    --card: 210.66 39.5% 23.3%;
+    --card-foreground: 210 40% 98%;
+    --popover: 210.66 39.5% 23.3%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+  }
+}

index.js

@@ -3,6 +3,8 @@ import { registerRootComponent } from 'expo';
 import * as Sentry from 'sentry-expo';
 // import * as React from 'react';
 
+import './global.css';
+
 import App from '@wcpos/core';
 
 // const StrictApp = () => {

metro.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 
 const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
 
 // Find the project and workspace directories
 const projectRoot = __dirname;
@@ -44,4 +45,4 @@ if (process.env.ELECTRON === 'true') {
 	];
 }
 
-module.exports = config;
+module.exports = withNativeWind(config, { input: './global.css' });

nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package.json

@@ -35,7 +35,7 @@
     "@react-navigation/stack": "6.3.29",
     "@sentry/react-native": "5.22.2",
     "@wcpos/core": "*",
-    "expo": "51.0.14",
+    "expo": "51.0.20",
     "expo-application": "~5.9.1",
     "expo-barcode-scanner": "~13.0.1",
     "expo-constants": "~16.0.2",
@@ -45,13 +45,14 @@
     "expo-image": "1.12.12",
     "expo-linking": "6.3.1",
     "expo-localization": "^15.0.3",
-    "expo-sqlite": "~14.0.3",
+    "expo-sqlite": "~14.0.4",
     "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "3.0.6",
-    "expo-updates": "~0.25.17",
+    "expo-system-ui": "3.0.7",
+    "expo-updates": "~0.25.19",
+    "nativewind": "^4.0.33",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.74.2",
+    "react-native": "0.74.3",
     "react-native-device-info": "10.14.0",
     "react-native-gesture-handler": "~2.16.2",
     "react-native-get-random-values": "~1.11.0",
@@ -73,7 +74,7 @@
     "@wcpos/babel-preset-expo": "*",
     "@wcpos/eslint-config": "*",
     "@wcpos/tsconfig": "*",
-    "expo-atlas": "^0.3.8",
+    "expo-atlas": "^0.3.9",
     "file-loader": "^6.2.0",
     "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0",

tailwind.config.js

@@ -0,0 +1,93 @@
+const { hairlineWidth } = require('nativewind/theme');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	darkMode: ['class'],
+	content: ['../../packages/tailwind/src/**/*.{ts,tsx}', '../../packages/core/src/**/*.{ts,tsx}'],
+	presets: [require('nativewind/preset')],
+	prefix: '',
+	theme: {
+		container: {
+			center: true,
+			padding: '2rem',
+			screens: {
+				'2xl': '1400px',
+			},
+		},
+		extend: {
+			fontSize: {
+				xs: ['0.75rem', { lineHeight: '0.875rem' }], // 12px / 14px
+				sm: ['0.8125rem', { lineHeight: '0.9375rem' }], // 13px / 15px
+				base: ['0.875rem', { lineHeight: '1rem' }], // 14px / 16px
+				lg: ['1rem', { lineHeight: '1.25rem' }], // 16px / 20px
+				xl: ['1.125rem', { lineHeight: '1.5rem' }], // 18px / 24px
+				'2xl': ['1.25rem', { lineHeight: '1.75rem' }], // 20px / 28px
+				'3xl': ['1.5rem', { lineHeight: '2rem' }], // 24px / 32px
+				'4xl': ['1.875rem', { lineHeight: '2.25rem' }], // 30px / 36px
+				'5xl': ['2.25rem', { lineHeight: '2.5rem' }], // 36px / 40px
+				'6xl': ['3rem', { lineHeight: '1' }], // 48px
+				'7xl': ['3.75rem', { lineHeight: '1' }], // 60px
+				'8xl': ['4.5rem', { lineHeight: '1' }], // 72px
+				'9xl': ['6rem', { lineHeight: '1' }], // 96px
+			},
+			colors: {
+				border: 'hsl(var(--border))',
+				input: 'hsl(var(--input))',
+				ring: 'hsl(var(--ring))',
+				background: 'hsl(var(--background))',
+				foreground: 'hsl(var(--foreground))',
+				primary: {
+					DEFAULT: 'hsl(var(--primary))',
+					foreground: 'hsl(var(--primary-foreground))',
+				},
+				secondary: {
+					DEFAULT: 'hsl(var(--secondary))',
+					foreground: 'hsl(var(--secondary-foreground))',
+				},
+				destructive: {
+					DEFAULT: 'hsl(var(--destructive))',
+					foreground: 'hsl(var(--destructive-foreground))',
+				},
+				muted: {
+					DEFAULT: 'hsl(var(--muted))',
+					foreground: 'hsl(var(--muted-foreground))',
+				},
+				accent: {
+					DEFAULT: 'hsl(var(--accent))',
+					foreground: 'hsl(var(--accent-foreground))',
+				},
+				popover: {
+					DEFAULT: 'hsl(var(--popover))',
+					foreground: 'hsl(var(--popover-foreground))',
+				},
+				card: {
+					DEFAULT: 'hsl(var(--card))',
+					foreground: 'hsl(var(--card-foreground))',
+				},
+			},
+			borderRadius: {
+				lg: 'var(--radius)',
+				md: 'calc(var(--radius) - 2px)',
+				sm: 'calc(var(--radius) - 4px)',
+			},
+			borderWidth: {
+				hairline: hairlineWidth(),
+			},
+			keyframes: {
+				'accordion-down': {
+					from: { height: '0' },
+					to: { height: 'var(--radix-accordion-content-height)' },
+				},
+				'accordion-up': {
+					from: { height: 'var(--radix-accordion-content-height)' },
+					to: { height: '0' },
+				},
+			},
+			animation: {
+				'accordion-down': 'accordion-down 0.2s ease-out',
+				'accordion-up': 'accordion-up 0.2s ease-out',
+			},
+		},
+	},
+	plugins: [require('tailwindcss-animate')],
+};