Initial Commit

Author: pedrozadotdev

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "env": {
+    "es2021": true
+  },
+  "extends": ["plugin:react/recommended", "standard"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "no-use-before-define": "off",
+    "no-undef": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "react/prop-types": "off",
+    "react/display-name": "off"
+  }
+}

.gitignore

@@ -0,0 +1,10 @@
+node_modules
+npm-debug.*
+index.js
+index.d.ts
+.vscode
+web-build/
+web-report/
+coverage
+.DS_Store
+yarn-error.log

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Andre Pedroza
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,184 @@
+![](https://github.com/andreppedroza/react-native-themed-stylesheet/workflows/Node%20CI/badge.svg)
+
+# react-native-themed-stylesheet
+
+A package that allows you to create React Native StyleSheets with support for Dark/Light/Auto Themes.
+
+- Depends on react-native-appearance to choose the theme based on OS preference (Android 10/iOS 13)
+- Simple API
+- Fully typed
+- Builds on top of StyleSheets and Hooks
+
+## Installation
+
+**Using Expo**
+
+```
+expo install react-native-appearance react-native-themed-stylesheet
+```
+
+**Using Yarn**
+
+```
+yarn add react-native-appearance react-native-themed-stylesheet
+```
+
+**Using NPM**
+
+```
+npm install --save react-native-appearance react-native-themed-stylesheet
+```
+
+## Usage
+
+Defining Themes:
+
+```ts
+// themes.ts
+
+import { createTheme } from 'react-native-themed-stylesheet'
+
+const themes = {
+  light: {
+    textColor: '#ff0000'
+  },
+  dark: {
+    textColor: '#fff'
+  },
+  common: {
+    //Optional
+    fontSize: 12
+  }
+}
+
+const { ThemeProvider, useStyle, useTheme } = createTheme(themes, 'auto') //Initial Mode is optional(Default: 'auto')
+
+export { ThemeProvider, useStyle, useTheme }
+```
+
+Using themes:
+
+```tsx
+// Components.tsx
+import React from 'react'
+import { View, Text, Button } from 'react-native'
+import { ThemeProvider, useStyle, useTheme } from './themes'
+import { styleSheetFactory } from './themes'
+
+const ComponentWithUseStyle = () => {
+  const styles = useStyle(theme => {
+    text: {
+      color: theme.textColor,
+      fontSize: theme.fontSize
+    }
+  })
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={styles.text}>Hello World</Text>
+    </View>
+  )
+}
+
+const ComponentWithUseTheme = () => {
+  const { theme, mode, setThemes, setMode } = useTheme()
+  console.log('Current Mode:', mode)
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ color: theme.textColor, fontSize: theme.fontSize }}>Hello World</Text>
+      <Button title='Dark Mode' onPress={() => setMode('dark')}/>
+      <Button title='Light Mode' onPress={() => setMode('light')}/>
+      <Button title='Auto Mode' onPress={() => setMode('auto')}/>
+      <Button title='Change Themes' onPress={
+          () => setThemes({
+            light: {
+              textColor: '#ffff00'
+            },
+            dark: {
+              textColor: '#C9C9C9'
+            },
+            common: {
+              fontSize: 14
+            }
+          })
+        }
+      />
+    </View>
+  )
+}
+```
+
+## API
+
+### Function: `createTheme(themes, initialMode)`
+
+Use this function to create the theme.
+
+**Parameters**
+
+- `themes`: An object containing light, dark and an optional common theme(Will be merge with boths themes).
+- `initialMode`: A string('light', 'dark' or 'auto') specifying the initial mode(Default: 'auto').
+
+**Returns**
+
+```
+
+ThemeObject
+
+```
+
+---
+
+### Object: `ThemeObject`
+
+An object containing the following properties:
+
+- ThemeProvider: Theme Provider
+- useStyle: Hook to create Named StyleSheets
+- useTheme: Hook to get access to ThemeContext
+
+---
+
+### React Component: `ThemeProvider`
+
+A react component to provide ThemeContext.
+
+---
+
+### Function: `useStyle(createStyle)`
+
+Use this function to create themed stylesheets.
+
+**Parameters**
+
+- `createStyle`: A function that receive the current theme and return an object of type `T`.
+
+**Returns**
+
+```
+
+StyleSheet.NamedStyles<T>
+
+```
+
+---
+
+### Function: `useTheme()`
+
+Use this function to get theme context.
+
+**Returns**
+
+```
+
+{ theme, mode, setThemes, setMode }
+
+```
+
+An object containing the following properties:
+
+- `theme`: The current theme
+- `mode`: The current mode.
+- `setThemes`: Function to set the themes(The same type of createTheme themes param).
+- `setMode`: Function to set the mode('light', 'dark' or 'auto').

__mocks__/react-native-appearance.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { View } from 'react-native'
+import {
+  AppearancePreferences,
+  ColorSchemeName,
+  AppearanceListener
+} from 'react-native-appearance/src/Appearance.types'
+
+type EventSubscription = {
+  remove: () => void
+}
+
+export class Appearance {
+  private static _preference: ColorSchemeName = 'no-preference'
+  private static _listeners: AppearanceListener[] = []
+  static getColorScheme (): ColorSchemeName {
+    return this._preference
+  }
+
+  static get preference (): ColorSchemeName {
+    return this._preference
+  }
+
+  static set preference (newPreference: ColorSchemeName) {
+    this._preference = newPreference
+    this._listeners.forEach(l => l({ colorScheme: this._preference }))
+  }
+
+  static set (_preferences: AppearancePreferences): void {}
+
+  static addChangeListener (_listener: AppearanceListener): EventSubscription {
+    this._listeners.push(_listener)
+    return {
+      remove: () => {
+        this._listeners = this._listeners.filter(l => l !== _listener)
+      }
+    }
+  }
+
+  /**
+   * Unused: some people might expect to remove the listener like this, but they shouldn't.
+   */
+  static removeChangeListener (_listener: AppearanceListener): void {}
+}
+
+export const AppearanceProvider = (props: any) => (
+  <View style={{ flex: 1 }} {...props} />
+)
+
+export function useColorScheme (): ColorSchemeName {
+  return 'no-preference'
+}