Remove JSX and fix .gitignore

Author: pedrozadotdev

.gitignore

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-themed-stylesheet",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "React Native StyleSheets with Theming Support",
   "author": "Andre Pedroza",
   "license": "MIT",

storybook/index.js

@@ -0,0 +1,29 @@
+import { useEffect, Fragment, createElement } from 'react'
+import addons, { makeDecorator } from '@storybook/addons'
+
+const Wrapper = ({ children, useTheme, channel }) => {
+  const { mode, setMode } = useTheme()
+  useEffect(() => {
+    const onModeChange = newMode => {
+      setMode(newMode)
+    }
+    channel.on('setMode', onModeChange)
+    return channel.removeListener(onModeChange)
+  }, [mode])
+  useEffect(() => {
+    channel.emit('mode', mode)
+  }, [mode])
+  return createElement(Fragment, null, children)
+}
+
+export const withThemeHook = makeDecorator({
+  name: 'withThemeHook',
+  parameterName: 'useTheme',
+  skipIfNoParametersOrOptions: true,
+  allowDeprecatedUsage: true,
+  wrapper: (getStory, context, { parameters }) => {
+    const useTheme = parameters || (() => ({ mode: '', setMode: () => {} }))
+    const channel = addons.getChannel()
+    return createElement(Wrapper, { useTheme, channel }, getStory(context))
+  }
+})

storybook/register.js

@@ -1,29 +1,33 @@
+/* eslint-disable indent */
 /* eslint-disable multiline-ternary */
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState, createElement } 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 Button = ({ mode, active, setMode }) =>
+  createElement(
+    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)
+    },
+    createElement(
+      Text,
+      { style: { textAlign: 'center', color: active ? 'white' : 'black' } },
+      mode.toUpperCase()
+    )
+  )
 
 const ThemePanel = ({ channel }) => {
   const [currentMode, setCurrentMode] = useState(null)
@@ -35,25 +39,29 @@ const ThemePanel = ({ channel }) => {
   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
+  return currentMode
+    ? createElement(
+        View,
+        null,
+        ['auto', 'light', 'dark'].map(m =>
+          createElement(
+            View,
+            { key: m },
+            createElement(Button, {
+              mode: m,
+              active: currentMode === m,
+              setMode: setCurrentMode
+            })
+          )
+        )
+      )
+    : null
 }
 
 addons.register(ADDON_ID, () => {
   const channel = addons.getChannel()
   addons.addPanel(PANEL_ID, {
     title: 'Theme',
-    render: () => <ThemePanel channel={channel} />
+    render: () => createElement(ThemePanel, { channel }, null)
   })
 })