Add Storybook addon and options to useStyle

Author: pedrozadotdev

README.md

@@ -9,6 +9,7 @@ A package that allows you to create React Native StyleSheets with support for Da
 - Simple API
 - Fully typed
 - Builds on top of StyleSheets and Hooks
+- Storybook addon to change Theme Mode
 
 ## Installation
 
@@ -64,12 +65,12 @@ import { View, Text, Button } from 'react-native'
 import { ThemeProvider, useStyle, useTheme } from './theme'
 
 const ComponentWithUseStyle: React.FC = () => {
-  const styles = useStyle(theme => {
+  const styles = useStyle((theme, options) => {
     text: {
-      color: theme.textColor,
+      color: options.disabled ? '#C9C9C9' : theme.textColor,
       fontSize: theme.fontSize
     }
-  })
+  }, { disabled: true }) // Options is optional
 
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
@@ -106,10 +107,39 @@ const ComponentWithUseTheme: React.FC = () => {
   )
 }
 ```
+## Storybook Addon
+
+### Installation:
+
+```js
+// storybook.js
+import {
+  getStorybookUI,
+  configure,
+  addDecorator,
+  addParameters
+} from '@storybook/react-native'
+import { withThemeHook } from 'react-native-themed-stylesheet/storybook'
+import 'react-native-themed-stylesheet/storybook/register'
+import { useTheme } from './theme'
+
+addDecorator(withThemeHook)
+addParameters({
+  useTheme
+})
+
+configure(() => {
+  require('path/to/some/story')
+}, module)
+
+const StorybookUIRoot = getStorybookUI()
+
+export default StorybookUIRoot // Make sure to use this component within ThemeProvider.
+```
 
 ## API
 
-### Function: `createTheme(themes, initialMode)`
+### Function: `createTheme(themes, [initialMode])`
 
 Use this function to create the theme.
 
@@ -144,13 +174,14 @@ A react component to provide ThemeContext.
 
 ---
 
-### Function: `useStyle(createStyle)`
+### Function: `useStyle(createStyles, [options])`
 
 Hook to create themed stylesheets.
 
 **Parameters**
 
-- `createStyle`: A function that receives the current theme and returns an object of type `T`.
+- `createStyles`: A function that receives the current theme and options and returns an object of type `T`.
+- `options`: Custom options to be use inside createStyles.
 
 **Returns**
 

index.ts

@@ -25,8 +25,9 @@ type UseTheme<T, C> = () => ThemeContext<T, C>
 type ThemeObject = {
   [props: string]: ViewStyle | TextStyle | ImageStyle
 }
-type UseStyle<T, C> = <S extends ThemeObject>(
-  createStyleSheet: (theme: T & C) => S
+type UseStyle<T, C> = <S extends ThemeObject, O>(
+  createStyleSheet: (theme: T & C, options?: O) => S,
+  options?: O
 ) => StyleSheet.NamedStyles<S>
 type CreateTheme = <T, C>(
   themes: Themes<T, C | undefined>,
@@ -107,9 +108,9 @@ const createTheme: CreateTheme = (ts, initialMode = 'auto') => {
     )
 
   const useTheme: UseTheme<Theme, Common> = () => useContext(ThemeContext)
-  const useStyle: UseStyle<Theme, Common> = createStyledObject => {
+  const useStyle: UseStyle<Theme, Common> = (createStyledObject, options) => {
     const { theme } = useTheme()
-    return StyleSheet.create(createStyledObject(theme))
+    return StyleSheet.create(createStyledObject(theme, options))
   }
 
   return { ThemeProvider, useStyle, useTheme }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-themed-stylesheet",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "React Native StyleSheets with Theming Support",
   "author": "Andre Pedroza",
   "license": "MIT",
@@ -10,7 +10,7 @@
   },
   "main": "index.js",
   "types": "index.d.ts",
-  "files": ["index.js", "index.d.ts"],
+  "files": ["index.js", "index.d.ts", "storybook"],
   "scripts": {
     "build": "tsc",
     "test": "jest",
@@ -20,7 +20,8 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-appearance": "*"
+    "react-native-appearance": "*",
+    "@storybook/addons": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

storybook/register.js

@@ -0,0 +1,59 @@
+/* eslint-disable multiline-ternary */
+import React, { useEffect, useState } from 'react'
+import { Text, TouchableOpacity, View } from 'react-native'
+import addons from '@storybook/addons'
+
+const ADDON_ID = 'storybook-addon-ondevice-themed-stylesheet'
+const PANEL_ID = `${ADDON_ID}/panel`
+
+const Button = ({ mode, active, setMode }) => (
+  <TouchableOpacity
+    style={{
+      borderRadius: 5,
+      borderWidth: 1,
+      borderColor: 'rgba(0,0,0,0.5)',
+      padding: 10,
+      marginHorizontal: 10,
+      marginVertical: 5,
+      backgroundColor: active ? 'black' : 'white'
+    }}
+    onPress={() => setMode(mode)}
+  >
+    <Text style={{ textAlign: 'center', color: active ? 'white' : 'black' }}>
+      {mode.toUpperCase()}
+    </Text>
+  </TouchableOpacity>
+)
+
+const ThemePanel = ({ channel }) => {
+  const [currentMode, setCurrentMode] = useState(null)
+  useEffect(() => {
+    const onModeChange = newMode => setCurrentMode(newMode)
+    channel.on('mode', onModeChange)
+    return channel.removeListener(onModeChange)
+  }, [])
+  useEffect(() => {
+    currentMode && channel.emit('setMode', currentMode)
+  }, [currentMode])
+  return currentMode ? (
+    <View>
+      {['auto', 'light', 'dark'].map(m => (
+        <View key={m}>
+          <Button
+            mode={m}
+            active={currentMode === m}
+            setMode={setCurrentMode}
+          />
+        </View>
+      ))}
+    </View>
+  ) : null
+}
+
+addons.register(ADDON_ID, () => {
+  const channel = addons.getChannel()
+  addons.addPanel(PANEL_ID, {
+    title: 'Theme',
+    render: () => <ThemePanel channel={channel} />
+  })
+})

tests/fixture.ts

@@ -34,3 +34,13 @@ export const style2 = (theme: typeof themes2.light) => ({
     color: theme.textColor
   }
 })
+
+export const style3 = (
+  theme: typeof themes1.common & typeof themes1.light,
+  options?: { disabled: boolean }
+) => ({
+  text: {
+    color: options && options.disabled ? '#c0c0c0' : theme.textColor,
+    fontSize: theme.fontSize
+  }
+})

tests/tests.ts

@@ -1,7 +1,7 @@
 import { renderHook, act } from '@testing-library/react-hooks/native'
 import { Appearance } from '../__mocks__/react-native-appearance'
 import { createTheme } from '..'
-import { style1, style2, themes1, themes2 } from './fixture'
+import { style1, style2, style3, themes1, themes2 } from './fixture'
 import { TextStyle } from 'react-native'
 
 beforeEach(() => {
@@ -17,6 +17,13 @@ describe('With Common Prop and Auto Mode', () => {
     expect((result.current.text as TextStyle).color).toEqual('#ff0000')
     expect((result.current.text as TextStyle).fontSize).toEqual(12)
   })
+  test('Create style with useStyle() and options', () => {
+    const { result } = renderHook(() => useStyle(style3, { disabled: true }), {
+      wrapper: ThemeProvider
+    })
+    expect((result.current.text as TextStyle).color).toEqual('#c0c0c0')
+    expect((result.current.text as TextStyle).fontSize).toEqual(12)
+  })
   test('Create style with useTheme()', () => {
     const { result } = renderHook(() => useTheme(), { wrapper: ThemeProvider })
     expect(result.current.theme.textColor).toEqual('#ff0000')