chore: Merge plugins for nativewind & portability patterns

codinsonn · codinsonn · commit 0b8518e16270 · 2024-04-25T22:27:52.000+02:00
diff --git a/apps/expo/app/ExpoRootLayout.tsx b/apps/expo/app/ExpoRootLayout.tsx
@@ -5,13 +5,20 @@ import { Image as ExpoContextImage } from '@app/core/components/Image.expo'
 import { Link as ExpoContextLink } from '@app/core/navigation/Link.expo'
 import { useRouter as useExpoContextRouter } from '@app/core/navigation/useRouter.expo'
 import { useRouteParams as useExpoRouteParams } from '@app/core/navigation/useRouteParams.expo'
+import { NativeWindStyleSheet } from 'nativewind'
 
 // -i- Expo Router's layout setup is much simpler than Next.js's layout setup
 // -i- Since Expo doesn't require a custom document setup or server component root layout
 // -i- Use this file to apply your Expo specific layout setup:
 // -i- like rendering our Universal Layout and App Providers
 
-/* --- <ExpoRootLayout/> ----------------------------------------------------------------------- */
+/* --- Settings -------------------------------------------------------------------------------- */
+
+NativeWindStyleSheet.setOutput({
+  default: 'native',
+})
+
+/* --- <ExpoRootLayout> ------------------------------------------------------------------------ */
 
 export default function ExpoRootLayout() {
   // Navigation
diff --git a/apps/expo/babel.config.js b/apps/expo/babel.config.js
@@ -1,7 +1,8 @@
 // babel.config.js
 module.exports = function (api) {
-  api.cache(true);
+  api.cache(true)
   return {
-    presets: ["babel-preset-expo"],
-  };
-};
+    presets: ['babel-preset-expo'],
+    plugins: ['nativewind/babel'],
+  }
+}
diff --git a/apps/expo/tailwind.config.js b/apps/expo/tailwind.config.js
@@ -0,0 +1,14 @@
+const { universalTheme } = require('@app/core/tailwind.theme')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    '../../apps/**/*.tsx',
+    '../../features/**/*.tsx',
+    '../../packages/**/*.tsx',
+  ],
+  plugins: [],
+  theme: {
+    ...universalTheme,
+  },
+}
diff --git a/apps/next/babel.config.js b/apps/next/babel.config.js
@@ -1,7 +1,8 @@
 // babel.config.js
 module.exports = function (api) {
-  api.cache(true);
+  api.cache(true)
   return {
-    presets: ["babel-preset-expo"],
-  };
-};
+    presets: ['babel-preset-expo'],
+    plugins: ['nativewind/babel', { mode: 'transformOnly' }],
+  }
+}
diff --git a/apps/next/global.css b/apps/next/global.css
@@ -1,3 +1,8 @@
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* -i- Upgrade from the CSS reset that came with Expo's default Next.js setup */
 /* Follows the setup for react-native-web: */
 /* https://necolas.github.io/react-native-web/docs/setup/#root-element */
diff --git a/apps/next/next.config.js b/apps/next/next.config.js
@@ -8,6 +8,7 @@ const nextConfig = withExpo({
     "react-native",
     "react-native-web",
     "expo",
+    "nativewind",
     // Add more React Native / Expo packages here...
   ],
   experimental: {
diff --git a/apps/next/package.json b/apps/next/package.json
@@ -5,7 +5,10 @@
   "dependencies": {
     "next": "~14.0.4"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "postcss": "8.4.23"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
diff --git a/apps/next/postcss.config.js b/apps/next/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}
diff --git a/apps/next/tailwind.config.js b/apps/next/tailwind.config.js
@@ -0,0 +1,15 @@
+const { universalTheme } = require('@app/core/tailwind.theme')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    '../../apps/**/*.tsx',
+    '../../features/**/*.tsx',
+    '../../packages/**/*.tsx',
+  ],
+  plugins: [require('nativewind/tailwind/css')],
+  important: 'html',
+  theme: {
+    ...universalTheme,
+  },
+}
diff --git a/features/app-core/components/Image.expo.tsx b/features/app-core/components/Image.expo.tsx
@@ -1,6 +1,7 @@
 import { Image as ExpoImage } from 'expo-image'
-import { UniversalImageProps, UniversalImageMethods } from './Image.types'
 import { Platform } from 'react-native'
+import { parseNativeWindStyles } from '../utils/parseNativeWindStyles'
+import type { UniversalImageProps, UniversalImageMethods } from './Image.types'
 
 /* --- <Image/> -------------------------------------------------------------------------------- */
 
@@ -39,10 +40,13 @@ const Image = (props: UniversalImageProps): JSX.Element => {
         responsivePolicy,
     } = props
 
+    // -- Nativewind --
+
+    const { nativeWindStyles, restStyle } = parseNativeWindStyles(style)
+    const finalStyle = { width, height, ...nativeWindStyles, ...restStyle }
+
     // -- Overrides --
 
-    // @ts-ignore
-    const finalStyle = { width, height, ...style }
     if (fill) finalStyle.height = '100%'
     if (fill) finalStyle.width = '100%'
 
diff --git a/features/app-core/components/Image.next.tsx b/features/app-core/components/Image.next.tsx
@@ -1,5 +1,6 @@
 import NextImage from 'next/image'
 import { UniversalImageProps, UniversalImageMethods } from './Image.types'
+import { parseNativeWindStyles } from '../utils/parseNativeWindStyles'
 
 /* --- <Image/> -------------------------------------------------------------------------------- */
 
@@ -11,6 +12,7 @@ const Image = (props: UniversalImageProps): JSX.Element => {
         alt,
         width,
         height,
+        className,
         style = {},
         priority = 'normal',
         onError,
@@ -31,10 +33,13 @@ const Image = (props: UniversalImageProps): JSX.Element => {
         contentFit,
     } = props
 
+    // -- Nativewind --
+
+    const { nativeWindStyles, nativeWindClassName, restStyle } = parseNativeWindStyles(style)
+    const finalStyle = { width, height, ...nativeWindStyles, ...restStyle } as React.CSSProperties
+
     // -- Overrides --
 
-    // @ts-ignore
-    const finalStyle = { width, height, ...style }
     if (fill) finalStyle.height = '100%'
     if (fill) finalStyle.width = '100%'
     if (fill) finalStyle.objectFit = contentFit || 'cover'
@@ -47,7 +52,8 @@ const Image = (props: UniversalImageProps): JSX.Element => {
             src={src as any}
             alt={alt || accessibilityLabel}
             width={width}
-            height={height} // @ts-ignore
+            height={height}
+            className={[className, nativeWindClassName].filter(Boolean).join(' ')}
             style={finalStyle}
             priority={priority === 'high'}
             onError={onError as any}
diff --git a/features/app-core/components/Image.types.tsx b/features/app-core/components/Image.types.tsx
@@ -38,6 +38,10 @@ export type UniversalImageProps = {
      * - Remember that the required width and height props can interact with your styling. If you use styling to modify an image's width, you should also style its height to auto to preserve its intrinsic aspect ratio, or your image will be distorted. */
     style?: ExpoImageProps['style']
 
+    /** Universal, will affect both Expo & Next.js
+     * - Remember that the required width and height props can interact with your styling. If you use styling to modify an image's width, you should also style its height to auto to preserve its intrinsic aspect ratio, or your image will be distorted. */
+    className?: string
+
     /** Universal, will affect both Expo & Next.js - Called on an image fetching error. */
     onError?: ExpoImageProps['onError']
 
diff --git a/features/app-core/components/styled.tsx b/features/app-core/components/styled.tsx
@@ -0,0 +1,33 @@
+import { styled } from 'nativewind'
+import { Text as RNText, View as RNView } from 'react-native'
+import { Link as UniversalLink } from '../navigation/Link'
+import { Image as UniversalImage } from './Image'
+
+/* --- Primitives ------------------------------------------------------------------------------ */
+
+export const View = styled(RNView, '')
+export const Text = styled(RNText, '')
+export const Image = styled(UniversalImage, '')
+
+/* --- Typography ------------------------------------------------------------------------------ */
+
+export const H1 = styled(RNText, 'font-bold text-2xl text-primary-500')
+export const H2 = styled(RNText, 'font-bold text-xl text-primary-500')
+export const H3 = styled(RNText, 'font-bold text-lg text-primary-500')
+
+export const P = styled(RNText, 'text-base')
+
+/* --- Fix for Next Link ----------------------------------------------------------------------- */
+
+export const Link = styled(UniversalLink, 'text-blue-500 underline')
+export const LinkText = styled(RNText, 'text-blue-500 underline')
+export const TextLink = (props: Omit<React.ComponentProps<typeof UniversalLink>, 'className'> & { className?: string }) => {
+    const { className, style, children, ...universalLinkProps } = props
+    return (
+        <LinkText className={className} style={style}>
+            <UniversalLink {...universalLinkProps}>
+                {children}
+            </UniversalLink>
+        </LinkText>
+    )
+}
diff --git a/features/app-core/navigation/Link.expo.tsx b/features/app-core/navigation/Link.expo.tsx
@@ -1,4 +1,5 @@
 import { Link as ExpoLink } from 'expo-router'
+import { parseNativeWindStyles } from '../utils/parseNativeWindStyles'
 import type { UniversalLinkProps } from './Link.types'
 
 /* --- <Link/> --------------------------------------------------------------------------------- */
@@ -21,12 +22,17 @@ export const Link = (props: UniversalLinkProps) => {
         maxFontSizeMultiplier
     } = props
 
+    // -- Nativewind --
+
+    const { nativeWindStyles, restStyle } = parseNativeWindStyles(style)
+    const finalStyle = { ...nativeWindStyles, ...restStyle }
+
     // -- Render --
 
     return (
         <ExpoLink
             href={href}
-            style={style}
+            style={finalStyle}
             onPress={onPress}
             target={target}
             asChild={asChild}
diff --git a/features/app-core/navigation/Link.next.tsx b/features/app-core/navigation/Link.next.tsx
@@ -1,6 +1,7 @@
 import NextLink from 'next/link'
 import type { ComponentProps } from 'react'
 import type { UniversalLinkProps } from './Link.types'
+import { parseNativeWindStyles } from '../utils/parseNativeWindStyles'
 
 /* --- <Link/> --------------------------------------------------------------------------------- */
 
@@ -9,6 +10,7 @@ export const Link = (props: UniversalLinkProps) => {
     const {
         children,
         href,
+        className,
         style,
         replace,
         onPress,
@@ -21,12 +23,18 @@ export const Link = (props: UniversalLinkProps) => {
         as,
     } = props
 
+    // -- Nativewind --
+
+    const { nativeWindStyles, nativeWindClassName, restStyle } = parseNativeWindStyles(style)
+    const finalStyle = { ...nativeWindStyles, ...restStyle } as React.CSSProperties
+
     // -- Render --
 
     return (
         <NextLink
             href={href}
-            style={style as unknown as ComponentProps<typeof NextLink>['style']}
+            className={[className, nativeWindClassName].filter(Boolean).join(' ')}
+            style={finalStyle as unknown as ComponentProps<typeof NextLink>['style']}
             onClick={onPress}
             target={target}
             replace={replace}
diff --git a/features/app-core/navigation/Link.types.ts b/features/app-core/navigation/Link.types.ts
@@ -13,6 +13,9 @@ export type UniversalLinkProps = {
     /** Universal - Style prop: https://reactnative.dev/docs/text#style */
     style?: ExpoLinkProps['style'];
 
+    /** -!- Nativewind classNames should be applied to either the parent or children of Link. Ideally, create or use a TextLink component instead */
+    className?: string; // never;
+
     /** Universal - Should replace the current route without adding to the history - Default: false. */
     replace?: boolean;
 
diff --git a/features/app-core/package.json b/features/app-core/package.json
@@ -2,8 +2,11 @@
   "name": "@app/core",
   "version": "1.0.0",
   "private": true,
-  "dependencies": {},
+  "dependencies": {
+    "nativewind": "^2.0.11"
+  },
   "devDependencies": {
+    "tailwindcss": "3.3.2",
     "typescript": "5.3.3"
   },
   "scripts": {}
diff --git a/features/app-core/screens/HomeScreen.tsx b/features/app-core/screens/HomeScreen.tsx
@@ -1,50 +1,27 @@
 import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { Link } from '../navigation/Link'
-import { Image } from '../components/Image'
+import { View, Image, H3, P, Link } from '../components/styled'
 
 /* --- <HomeScreen/> --------------------------------------------------------------------------- */
 
 const HomeScreen = () => {
   return (
-    <View style={styles.container}>
-      <Image src={require('../assets/aetherspaceLogo.png')} width={60} height={60} style={{ marginBottom: 12 }} />
-      <Text style={styles.title}>Expo + Next.js app routing 🚀</Text>
-      <Text style={styles.subtitle}>Open HomeScreen.tsx in features/app-core/screens to start working on your app</Text>
-      <Link href="/subpages/aetherspace" style={styles.link}>Test navigation</Link>
-      <Link href="/images" style={styles.link}>Test images</Link>
-      <Link href="https://universal-base-starter-docs.vercel.app/" target="_blank" style={styles.link}>Docs</Link>
+    <View className="flex flex-1 justify-center items-center">
+      <Image src={require('../assets/aetherspaceLogo.png')} width={60} height={60} className="mb-3" />
+      <H3 className="text-center">Expo + Next.js app routing 🚀</H3>
+      <P className="mt-2 text-center text-sm">Open HomeScreen.tsx in features/app-core/screens to start working on your app</P>
+      <Link className="mt-4 text-center text-base" href="/subpages/aetherspace">
+        Test navigation
+      </Link>
+      <Link className="mt-4 text-center text-base" href="/images">
+        Test images
+      </Link>
+      <Link className="mt-4 text-center text-base" href="https://universal-base-starter-docs.vercel.app/" target="_blank">
+        Docs
+      </Link>
     </View>
   )
 }
 
-/* --- Styles ---------------------------------------------------------------------------------- */
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  title: {
-    fontWeight: 'bold',
-    fontSize: 16,
-    textAlign: 'center',
-  },
-  subtitle: {
-    marginTop: 8,
-    fontSize: 16,
-    textAlign: 'center',
-  },
-  link: {
-    marginTop: 16,
-    fontSize: 16,
-    color: 'blue',
-    textAlign: 'center',
-    textDecorationLine: 'underline',
-  },
-})
-
 /* --- Exports --------------------------------------------------------------------------------- */
 
 export default HomeScreen
diff --git a/features/app-core/screens/ImagesScreen.tsx b/features/app-core/screens/ImagesScreen.tsx
diff --git a/features/app-core/screens/SlugScreen.tsx b/features/app-core/screens/SlugScreen.tsx
diff --git a/features/app-core/tailwind.config.js b/features/app-core/tailwind.config.js
diff --git a/features/app-core/tailwind.theme.js b/features/app-core/tailwind.theme.js
diff --git a/features/app-core/utils/parseNativeWindStyles.ts b/features/app-core/utils/parseNativeWindStyles.ts
diff --git a/package-lock.json b/package-lock.json
