@lunar-kit/core 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunar-kit/core",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Shared registry and components for Lunar Kit",
   "type": "module",
   "main": "./dist/index.js",
@@ -10,7 +10,13 @@
   "files": [
     "dist",
     "src/registry",
-    "src/components"
+    "src/components",
+    "src/providers",
+    "src/hooks",
+    "src/stores",
+    "src/lib",
+    "src/navigation",
+    "src/tailwind.config.js"
   ],
   "keywords": [
     "react-native",

package/src/hooks/useTheme.ts

@@ -0,0 +1,23 @@
+// hooks/use-theme.ts
+import { useThemeStore } from '@/stores';
+import { useColorScheme as useDeviceColorScheme } from 'react-native';
+
+export function useTheme() {
+  const deviceTheme = useDeviceColorScheme();
+  const { theme, setTheme } = useThemeStore();
+
+  const activeColorScheme =
+    theme === 'system'
+      ? deviceTheme === 'dark'
+        ? 'dark'
+        : 'light'
+      : theme === 'dark'
+        ? 'dark'
+        : 'light';
+
+  return {
+    theme,
+    colorScheme: activeColorScheme,
+    setTheme,
+  };
+}

package/src/hooks/useThemeColors.ts

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { useColorScheme } from 'nativewind';
+import { lightThemeColors, darkThemeColors } from '@/lib/theme';
+
+export function useThemeColors() {
+  const { colorScheme } = useColorScheme();
+
+  const colors = useMemo(() => {
+    const result = colorScheme === 'dark' ? darkThemeColors : lightThemeColors;
+    return result;
+  }, [colorScheme]);
+
+  return { colors, colorScheme: colorScheme ?? 'light' };
+}

package/src/hooks/useToolbar.react-navigation.tsx

@@ -0,0 +1,61 @@
+import { useLayoutEffect } from 'react';
+import { useNavigation } from 'expo-router';
+import { Pressable, Text } from 'react-native';
+import { useThemeColors } from './useThemeColors';
+
+interface HeaderOptions {
+  headerShown?: boolean;
+  title?: string;
+  headerLeft?: () => React.ReactNode;
+  headerRight?: () => React.ReactNode;
+  headerStyle?: {
+    backgroundColor?: string;
+  };
+  headerTintColor?: string;
+  headerTitleStyle?: {
+    fontWeight?: string;
+    fontSize?: number;
+  };
+  headerShadowVisible?: boolean;
+}
+
+interface UseToolbarOptions {
+  title?: string;
+  backHandle?: () => void;
+  right?: React.ReactNode;
+  left?: React.ReactNode;
+}
+
+export function useToolbar(options: UseToolbarOptions) {
+  const navigation = useNavigation();
+  const { colors } = useThemeColors();
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: true,
+      title: options.title || '',
+      headerStyle: {
+        backgroundColor: colors.background,
+      },
+      headerTintColor: colors.foreground,
+      headerTitleStyle: {
+        fontWeight: '600',
+        fontSize: 18,
+      },
+      headerShadowVisible: false,
+      ...(options.backHandle !== undefined && {
+        headerLeft: () => (
+          <Pressable onPress={options.backHandle} className="ml-4">
+            <Text style={{ fontSize: 18, color: colors.foreground }}>←</Text>
+          </Pressable>
+        ),
+      }),
+      ...(options.right && {
+        headerRight: () => <>{options.right}</>,
+      }),
+      ...(options.left && {
+        headerLeft: () => <>{options.left}</>,
+      }),
+    });
+  }, [navigation, colors.background, colors.foreground, options.title, options.backHandle, options.right, options.left]);
+}

package/src/hooks/useToolbar.tsx

@@ -0,0 +1,61 @@
+import { useLayoutEffect } from 'react';
+import { useNavigation } from 'expo-router';
+import { Pressable, Text } from 'react-native';
+import { useThemeColors } from './useThemeColors';
+
+interface HeaderOptions {
+  headerShown?: boolean;
+  title?: string;
+  headerLeft?: () => React.ReactNode;
+  headerRight?: () => React.ReactNode;
+  headerStyle?: {
+    backgroundColor?: string;
+  };
+  headerTintColor?: string;
+  headerTitleStyle?: {
+    fontWeight?: string;
+    fontSize?: number;
+  };
+  headerShadowVisible?: boolean;
+}
+
+interface UseToolbarOptions {
+  title?: string;
+  backHandle?: () => void;
+  right?: React.ReactNode;
+  left?: React.ReactNode;
+}
+
+export function useToolbar(options: UseToolbarOptions) {
+  const navigation = useNavigation();
+  const { colors } = useThemeColors();
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: true,
+      title: options.title || '',
+      headerStyle: {
+        backgroundColor: colors.background,
+      },
+      headerTintColor: colors.foreground,
+      headerTitleStyle: {
+        fontWeight: '600',
+        fontSize: 18,
+      },
+      headerShadowVisible: false,
+      ...(options.backHandle !== undefined && {
+        headerLeft: () => (
+          <Pressable onPress={options.backHandle} className="ml-4">
+            <Text style={{ fontSize: 18, color: colors.foreground }}>←</Text>
+          </Pressable>
+        ),
+      }),
+      ...(options.right && {
+        headerRight: () => <>{options.right}</>,
+      }),
+      ...(options.left && {
+        headerLeft: () => <>{options.left}</>,
+      }),
+    });
+  }, [navigation, colors.background, colors.foreground, options.title, options.backHandle, options.right, options.left]);
+}

package/src/lib/theme.ts

@@ -0,0 +1,88 @@
+// lib/theme.ts
+import { vars } from 'nativewind';
+
+// Define HSL values sebagai constants
+const lightThemeVars = {
+  '--background': '0 0% 100%',
+  '--foreground': '222.2 84% 4.9%',
+  '--card': '0 0% 100%',
+  '--card-foreground': '222.2 84% 4.9%',
+  '--primary': '221.2 83.2% 53.3%',
+  '--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': '221.2 83.2% 53.3%',
+};
+
+const darkThemeVars = {
+  '--background': '222.2 84% 4.9%',
+  '--foreground': '210 40% 98%',
+  '--card': '222.2 84% 4.9%',
+  '--card-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 84% 60%',
+  '--destructive-foreground': '210 40% 98%',
+  '--border': '217.2 32.6% 17.5%',
+  '--input': '217.2 32.6% 17.5%',
+  '--ring': '224.3 76.3% 48%',
+};
+
+// Export vars untuk NativeWind
+export const lightTheme = vars(lightThemeVars);
+export const darkTheme = vars(darkThemeVars);
+
+// Helper function untuk convert HSL string ke hex
+function hslToHex(hsl: string): string {
+  const [h, s, l] = hsl.split(' ').map(parseFloat);
+  const a = (s * Math.min(l, 100 - l)) / 10000;
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round((255 * color) / 100)
+      .toString(16)
+      .padStart(2, '0');
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+
+// Helper untuk convert theme vars object ke hex colors
+function convertThemeToHex(themeVars: Record<string, string>) {
+  return {
+    background: hslToHex(themeVars['--background']),
+    foreground: hslToHex(themeVars['--foreground']),
+    card: hslToHex(themeVars['--card']),
+    cardForeground: hslToHex(themeVars['--card-foreground']),
+    primary: hslToHex(themeVars['--primary']),
+    primaryForeground: hslToHex(themeVars['--primary-foreground']),
+    secondary: hslToHex(themeVars['--secondary']),
+    secondaryForeground: hslToHex(themeVars['--secondary-foreground']),
+    muted: hslToHex(themeVars['--muted']),
+    mutedForeground: hslToHex(themeVars['--muted-foreground']),
+    accent: hslToHex(themeVars['--accent']),
+    accentForeground: hslToHex(themeVars['--accent-foreground']),
+    destructive: hslToHex(themeVars['--destructive']),
+    destructiveForeground: hslToHex(themeVars['--destructive-foreground']),
+    border: hslToHex(themeVars['--border']),
+    input: hslToHex(themeVars['--input']),
+    ring: hslToHex(themeVars['--ring']),
+  };
+}
+
+// Export hex colors - auto-generated dari vars
+export const lightThemeColors = convertThemeToHex(lightThemeVars);
+export const darkThemeColors = convertThemeToHex(darkThemeVars);

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/navigation/react-navigation/base-router.tsx

@@ -0,0 +1,15 @@
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import HomeScreen from './screens/HomeScreen';
+
+const Stack = createNativeStackNavigator();
+
+export default function Navigation() {
+    return (
+        <NavigationContainer>
+            <Stack.Navigator screenOptions={{ headerShown: false }}>
+                <Stack.Screen name="Home" component={HomeScreen} />
+            </Stack.Navigator>
+        </NavigationContainer>
+    );
+}

package/src/providers/theme-provider.tsx

@@ -0,0 +1,36 @@
+// providers/theme-provider.tsx
+import React, { useEffect } from 'react';
+import { StatusBar, View } from 'react-native';
+import { useColorScheme as useDeviceColorScheme } from 'react-native';
+import { useColorScheme } from 'nativewind';
+import { lightTheme, darkTheme } from '@/lib/theme';
+import { useThemeStore } from '@/stores';
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+    const deviceTheme = useDeviceColorScheme();
+    const { setColorScheme } = useColorScheme();
+    const theme = useThemeStore((state) => state.theme);
+
+    const activeColorScheme =
+        theme === 'system'
+            ? deviceTheme ?? 'light'
+            : theme;
+
+    useEffect(() => {
+        setColorScheme(activeColorScheme);
+    }, [activeColorScheme, setColorScheme]);
+
+    const themeVars = activeColorScheme === 'dark' ? darkTheme : lightTheme;
+
+    return (
+        <>
+            <StatusBar 
+                barStyle={activeColorScheme === 'dark' ? 'light-content' : 'dark-content'} 
+                animated
+            />
+            <View style={themeVars} className="flex-1 bg-background text-foreground">
+                {children}
+            </View>
+        </>
+    );
+}

package/src/stores/theme.ts

@@ -0,0 +1,24 @@
+// stores/theme-store.ts
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface ThemeState {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set) => ({
+      theme: 'system',
+      setTheme: (theme) => set({ theme }),
+    }),
+    {
+      name: 'theme-storage',
+      storage: createJSONStorage(() => AsyncStorage),
+    }
+  )
+);

package/src/tailwind.config.js

@@ -0,0 +1,55 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./App.{js,jsx,ts,tsx}",
+    "./app/**/*.{js,jsx,ts,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}"
+  ],
+  presets: [require("nativewind/preset")],
+  darkMode: "class",
+  theme: {
+    extend: {
+      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))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+    },
+  },
+  plugins: [
+    function ({ addBase }) {
+      addBase({
+        // Default untuk semua element
+        '*': {
+          color: 'hsl(var(--foreground))',
+        },
+      });
+    },
+  ],
+}