aport-tools 1.0.0

package/app.json

@@ -0,0 +1,5 @@
+{
+    "name": "aport-tools",
+    "displayName": "Aport Tools"
+  }
+  

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "aport-tools",
+  "version": "1.0.0",
+  "description": "",
+
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "EvansGxz",
+  "license": "ISC",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.0",
+    "@types/react": "^18.3.10",
+    "@types/react-native": "^0.73.0",
+    "@types/styled-components-react-native": "^5.2.5",
+    "rollup": "^4.22.5",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "typescript": "^5.6.2"
+  },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "^2.0.0",
+    "expo": "^51.0.34",
+    "react": "^18.3.1",
+    "react-native": "^0.75.3",
+    "styled-components": "^6.1.13"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,31 @@
+// rollup.config.js
+
+import typescript from '@rollup/plugin-typescript';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+
+export default {
+  input: 'src/index.ts', // Entry point of your library
+  output: [
+    {
+      file: 'dist/index.js', // CommonJS format
+      format: 'cjs',
+      sourcemap: true,
+    },
+    {
+      file: 'dist/index.es.js', // ES Module format
+      format: 'esm',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    peerDepsExternal(), // Automatically externalize peer dependencies
+    resolve({
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    }), // So Rollup can find node_modules
+    commonjs(), // So Rollup can convert commonjs to ES modules
+    typescript({ tsconfig: './tsconfig.json' }), // So Rollup can handle TypeScript
+  ],
+  external: ['react', 'react-native'], // Explicitly externalize dependencies
+};

package/src/Button.tsx

@@ -0,0 +1,104 @@
+// src/components/Button.tsx
+
+import React, { useMemo, useContext } from 'react';
+import { Text, ViewStyle, StyleSheet, TouchableOpacity } from 'react-native';
+import { ThemeContext } from './context/ThemeContext'; // Adjust path to your ThemeContext
+import { ThemeColors } from './styles/colors';
+
+// Define the interface for the props that the Button component will accept
+interface ButtonProps {
+  disabled?: boolean; // Optional: Disables the button if true
+  isFullWidth?: boolean; // Optional: Expands the button to full width if true
+  children?: string; // Optional: Text content of the button
+  onPress?: () => void; // Optional: Function to call when the button is pressed
+  rounded?: boolean; // Optional: Adds border radius if true
+  borderRadius?: number; // Optional: Custom border radius value
+  type?: 'submit' | 'button' | 'cancel'; // Optional: Specifies the button type for styling
+}
+
+// Function to determine the styles based on the button type and whether it is disabled
+function typeStyles(type?: string, disabled?: boolean, themeColors?: ThemeColors): ViewStyle {
+  switch (type) {
+    case 'submit':
+      return {
+        backgroundColor: `rgba(${themeColors?.primary.rgb.r}, ${themeColors?.primary.rgb.g}, ${themeColors?.primary.rgb.b}, ${
+          disabled ? 0.5 : 1
+        })`,
+        borderWidth: 2,
+        borderColor: themeColors?.primary.hex,
+      };
+    case 'button':
+      return {
+        backgroundColor: themeColors?.primary.hex,
+        borderColor: themeColors?.secondary.hex,
+        opacity: disabled ? 0.5 : 1,
+        borderWidth: 2,
+      };
+    case 'cancel':
+      return {
+        backgroundColor: themeColors?.background.hex,
+        borderWidth: 0,
+      };
+    default:
+      return {};
+  }
+}
+
+// Button component definition
+const Button: React.FC<ButtonProps> = ({
+  children,
+  disabled = false,
+  type = 'button',
+  rounded = true,
+  borderRadius = 30,
+  isFullWidth = false,
+  onPress,
+}) => {
+  // Access the current theme from ThemeContext
+  const { theme } = useContext(ThemeContext);
+  const { colors } = theme; // Extract colors from the theme
+
+  // Use useMemo to memoize the computed styles
+  const computedStyles = useMemo(() => {
+    return StyleSheet.flatten([
+      styles.button,
+      typeStyles(type, disabled, colors), // Use colors directly
+      rounded && { borderRadius },
+      isFullWidth && { width: '100%' },
+      disabled && styles.disabled,
+    ]);
+  }, [type, disabled, rounded, borderRadius, isFullWidth, colors]);
+
+  // Determine text color based on button type and theme
+  const textColor = useMemo(() => {
+    return { color: colors.text.hex }; // Access text color from the theme
+  }, [type, colors]);
+
+  return (
+    <TouchableOpacity
+      style={computedStyles as ViewStyle}
+      disabled={disabled}
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      <Text style={textColor}>
+        {Array.isArray(children) ? children.join('').toUpperCase() : children?.toUpperCase()}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+// Define basic styles for the button
+const styles = StyleSheet.create({
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+});
+
+export default Button;

package/src/components/ThemeToggle.tsx

@@ -0,0 +1,39 @@
+// src/components/ThemeToggle.tsx
+
+import React, { useContext } from 'react';
+import { Switch, View, Text, StyleSheet } from 'react-native';
+import { ThemeContext } from '../context/ThemeContext';
+import { darkTheme, lightTheme } from '../styles/colors';
+
+const ThemeToggle: React.FC = () => {
+  const { theme, toggleTheme } = useContext(ThemeContext);
+
+  // Determine if the current theme is dark by checking the colors property
+  const isDarkMode = theme.colors === darkTheme;
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.text, { color: theme.colors.text.hex }]}>Dark Mode</Text>
+      <Switch
+        value={isDarkMode}
+        onValueChange={toggleTheme}
+        trackColor={{ false: lightTheme.secondary.hex, true: darkTheme.primary.hex }}
+        thumbColor={isDarkMode ? darkTheme.secondary.hex : lightTheme.primary.hex}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  text: {
+    marginRight: 10,
+    fontSize: 16,
+  },
+});
+
+export default ThemeToggle;

package/src/context/ThemeContext.tsx

@@ -0,0 +1,70 @@
+// src/context/ThemeContext.tsx
+
+import React, { createContext, useState, useEffect, ReactNode } from 'react';
+import { Appearance, ColorSchemeName } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { lightTheme, darkTheme, ThemeColors } from '../styles/colors';
+import { Theme } from '../styles/theme';
+
+interface ThemeContextProps {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext<ThemeContextProps>({
+  theme: { colors: lightTheme },
+  toggleTheme: () => {},
+});
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const [colorScheme, setColorScheme] = useState<ColorSchemeName | null>(null);
+
+  useEffect(() => {
+    const loadTheme = async () => {
+      try {
+        const storedTheme = await AsyncStorage.getItem('theme');
+        if (storedTheme === 'dark' || storedTheme === 'light') {
+          setColorScheme(storedTheme);
+        } else {
+          const systemTheme = Appearance.getColorScheme();
+          setColorScheme(systemTheme);
+        }
+      } catch (error) {
+        console.error('Failed to load theme.', error);
+        setColorScheme(Appearance.getColorScheme());
+      }
+    };
+
+    loadTheme();
+
+    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
+      setColorScheme(colorScheme);
+    });
+
+    return () => subscription.remove();
+  }, []);
+
+  const toggleTheme = async () => {
+    try {
+      const newTheme = colorScheme === 'dark' ? 'light' : 'dark';
+      setColorScheme(newTheme);
+      await AsyncStorage.setItem('theme', newTheme);
+    } catch (error) {
+      console.error('Failed to toggle theme.', error);
+    }
+  };
+
+  const theme: Theme = {
+    colors: colorScheme === 'dark' ? darkTheme : lightTheme,
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/src/index.ts

@@ -0,0 +1 @@
+export { default as ButtonComponent } from "./Button";

package/src/styles/colors.ts

@@ -0,0 +1,60 @@
+// src/styles/colors.ts
+
+export interface RGB {
+  r: number;
+  g: number;
+  b: number;
+}
+
+export interface Color {
+  hex: string;
+  rgb: RGB;
+}
+
+export interface ThemeColors {
+  primary: Color;
+  secondary: Color;
+  background: Color;
+  text: Color;
+  // Add more categories as needed
+}
+
+export const lightTheme: ThemeColors = {
+  primary: {
+    hex: '#1A73E8',
+    rgb: { r: 26, g: 115, b: 232 },
+  },
+  secondary: {
+    hex: '#F0F6FF',
+    rgb: { r: 240, g: 246, b: 255 },
+  },
+  background: {
+    hex: '#FFFFFF',
+    rgb: { r: 255, g: 255, b: 255 },
+  },
+  text: {
+    hex: '#000000',
+    rgb: { r: 0, g: 0, b: 0 },
+  },
+  // Add more categories as needed
+};
+
+export const darkTheme: ThemeColors = {
+  primary: {
+    hex: '#BB86FC',
+    rgb: { r: 187, g: 134, b: 252 },
+  },
+  secondary: {
+    hex: '#03DAC6',
+    rgb: { r: 3, g: 218, b: 198 },
+  },
+  background: {
+    hex: '#121212',
+    rgb: { r: 18, g: 18, b: 18 },
+  },
+  text: {
+    hex: '#FFFFFF',
+    rgb: { r: 255, g: 255, b: 255 },
+  },
+  // Add more categories as needed
+};

package/src/styles/theme.ts

@@ -0,0 +1,50 @@
+// src/styles/theme.ts
+
+import { ThemeColors } from "./colors";
+
+// Define the light theme with full ThemeColors structure
+export const lightTheme: ThemeColors = {
+  primary: {
+    hex: "#1A73E8",
+    rgb: { r: 26, g: 115, b: 232 },
+  },
+  secondary: {
+    hex: "#F0F6FF",
+    rgb: { r: 240, g: 246, b: 255 },
+  },
+  background: {
+    hex: "#FFFFFF",
+    rgb: { r: 255, g: 255, b: 255 },
+  },
+  text: {
+    hex: "#000000",
+    rgb: { r: 0, g: 0, b: 0 },
+  },
+};
+
+// Define the dark theme with full ThemeColors structure
+export const darkTheme: ThemeColors = {
+  primary: {
+    hex: "#BB86FC",
+    rgb: { r: 187, g: 134, b: 252 },
+  },
+  secondary: {
+    hex: "#03DAC6",
+    rgb: { r: 3, g: 218, b: 198 },
+  },
+  background: {
+    hex: "#121212",
+    rgb: { r: 18, g: 18, b: 18 },
+  },
+  text: {
+    hex: "#FFFFFF",
+    rgb: { r: 255, g: 255, b: 255 },
+  },
+};
+
+// src/styles/theme.ts
+
+export interface Theme {
+    colors: ThemeColors;
+  }
+  

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "ES6",
+    "target": "ES5",
+    "lib": [
+      "ES2015",
+      "DOM"
+    ],
+    "jsx": "react-native",
+    "declaration": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "types": [
+      "react",
+      "react-native"
+    ]
+  },
+  "include": [
+    "src"  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "App.tsx"
+  ],
+  "extends": "expo/tsconfig.base"
+}