Adding theme to addons.

.babelrc.js

@@ -72,6 +72,11 @@ module.exports = {
         test: withTests,
       },
     },
+    {
+      test: './app/react-native',
+      presets: ['module:metro-react-native-babel-preset'],
+      plugins: ['babel-plugin-macros', ['emotion', { sourceMap: true, autoLabel: true }]],
+    },
     {
       test: [
         './lib/node-logger',

addons/ondevice-knobs/package.json

@@ -27,6 +27,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@emotion/native": "^10.0.14",
     "@storybook/addons": "5.3.0-alpha.40",
     "@storybook/core-events": "5.3.0-alpha.40",
     "core-js": "^3.0.1",

addons/ondevice-knobs/src/GroupTabs.js

@@ -1,6 +1,12 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { ScrollView, Text, TouchableOpacity } from 'react-native';
+import styled from '@emotion/native';
+
+const Label = styled.Text(({ theme, active }) => ({
+  color: active ? theme.buttonActiveTextColor : theme.buttonTextColor,
+  fontSize: 17,
+}));
 
 class GroupTabs extends Component {
   renderTab(name, group) {
@@ -21,14 +27,7 @@ class GroupTabs extends Component {
         key={name}
         onPress={() => onGroupSelect(name)}
       >
-        <Text
-          style={{
-            color: selectedGroup === name ? 'black' : '#ccc',
-            fontSize: 17,
-          }}
-        >
-          {title}
-        </Text>
+        <Label active={selectedGroup === name}>{title}</Label>
       </TouchableOpacity>
     );
   }

addons/ondevice-knobs/src/PropField.js

@@ -1,27 +1,24 @@
 import PropTypes from 'prop-types';
 import { View, Text } from 'react-native';
 import React from 'react';
+import styled from '@emotion/native';
 import TypeMap from './types';
 
 const InvalidType = () => <Text style={{ margin: 10 }}>Invalid Type</Text>;
 
+const Label = styled.Text(({ theme }) => ({
+  marginLeft: 10,
+  fontSize: 14,
+  color: theme.labelColor,
+  fontWeight: 'bold',
+}));
+
 const PropField = ({ onChange, onPress, knob }) => {
   const InputType = TypeMap[knob.type] || InvalidType;
 
   return (
     <View>
-      {!knob.hideLabel ? (
-        <Text
-          style={{
-            marginLeft: 10,
-            fontSize: 14,
-            color: 'rgb(68, 68, 68)',
-            fontWeight: 'bold',
-          }}
-        >
-          {`${knob.label || knob.name}`}
-        </Text>
-      ) : null}
+      {!knob.hideLabel ? <Label>{`${knob.label || knob.name}`}</Label> : null}
       <InputType knob={knob} onChange={onChange} onPress={onPress} />
     </View>
   );

addons/ondevice-knobs/src/panel.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text } from 'react-native';
 import PropTypes from 'prop-types';
 import { SELECT_STORY, FORCE_RE_RENDER } from '@storybook/core-events';
 import { SET, SET_OPTIONS, RESET, CHANGE, CLICK } from '@storybook/addon-knobs';
+import styled from '@emotion/native';
 import GroupTabs from './GroupTabs';
 import PropForm from './PropForm';
 
@@ -10,6 +11,25 @@ const getTimestamp = () => +new Date();
 
 const DEFAULT_GROUP_ID = 'Other';
 
+const Touchable = styled.TouchableOpacity(({ theme }) => ({
+  borderRadius: 2,
+  borderWidth: 1,
+  borderColor: theme.borderColor,
+  padding: 4,
+  margin: 10,
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
+const ResetButton = styled.Text(({ theme }) => ({
+  color: theme.buttonTextColor,
+}));
+
+const HideIcon = styled.Text(({ theme }) => ({
+  fontSize: 14,
+  color: theme.buttonTextColor,
+}));
+
 export default class Panel extends React.Component {
   constructor(props) {
     super(props);
@@ -152,7 +172,7 @@ export default class Panel extends React.Component {
     }
 
     return (
-      <View style={{ flex: 1 }}>
+      <View style={{ flex: 1, paddingTop: 10 }}>
         {groupIds.length > 0 && (
           <GroupTabs groups={groups} onGroupSelect={this.onGroupSelect} selectedGroup={groupId} />
         )}
@@ -163,20 +183,9 @@ export default class Panel extends React.Component {
             onFieldClick={this.handleClick}
           />
         </View>
-        <TouchableOpacity
-          style={{
-            borderRadius: 2,
-            borderWidth: 1,
-            borderColor: '#f7f4f4',
-            padding: 4,
-            margin: 10,
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-          onPress={this.reset}
-        >
-          <Text>RESET</Text>
-        </TouchableOpacity>
+        <Touchable onPress={this.reset}>
+          <ResetButton>RESET</ResetButton>
+        </Touchable>
       </View>
     );
   }

addons/ondevice-knobs/src/types/Array.js

@@ -1,7 +1,16 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import styled from '@emotion/native';
 
-import { TextInput } from 'react-native';
+const Input = styled.TextInput(({ theme }) => ({
+  borderWidth: 1,
+  borderColor: theme.borderColor,
+  borderRadius: 2,
+  fontSize: 13,
+  padding: 5,
+  margin: 10,
+  color: theme.labelColor,
+}));
 
 function formatArray(value, separator) {
   if (value === '') {
@@ -11,19 +20,10 @@ function formatArray(value, separator) {
 }
 
 const ArrayType = ({ knob, onChange }) => (
-  <TextInput
+  <Input
     id={knob.name}
     underlineColorAndroid="transparent"
     autoCapitalize="none"
-    style={{
-      borderWidth: 1,
-      borderColor: '#f7f4f4',
-      borderRadius: 2,
-      fontSize: 13,
-      padding: 5,
-      margin: 10,
-      color: '#555',
-    }}
     value={knob.value.join(knob.separator)}
     onChangeText={e => onChange(formatArray(e, knob.separator))}
   />

addons/ondevice-knobs/src/types/Button.js

@@ -1,10 +1,16 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { TouchableOpacity, Text } from 'react-native';
+import { TouchableOpacity } from 'react-native';
+import styled from '@emotion/native';
+
+const Label = styled.Text(({ theme }) => ({
+  fontSize: 17,
+  color: theme.labelColor,
+}));
 
 const ButtonType = ({ knob, onPress }) => (
   <TouchableOpacity style={{ margin: 10 }} onPress={() => onPress(knob)}>
-    <Text style={{ fontSize: 17, color: '#007aff' }}>{knob.name}</Text>
+    <Label>{knob.name}</Label>
   </TouchableOpacity>
 );
 

addons/ondevice-knobs/src/types/Color.js

@@ -2,6 +2,17 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Text, Modal, View, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
 import { ColorPicker, fromHsv } from 'react-native-color-picker';
+import styled from '@emotion/native';
+
+const Touchable = styled.TouchableOpacity(({ theme, color }) => ({
+  borderColor: theme.borderColor,
+  width: 30,
+  height: 20,
+  borderRadius: 2,
+  borderWidth: 1,
+  margin: 10,
+  backgroundColor: color,
+}));
 
 class ColorType extends React.Component {
   constructor(props) {
@@ -32,17 +43,10 @@ class ColorType extends React.Component {
   render() {
     const { knob } = this.props;
     const { displayColorPicker } = this.state;
-    const colorStyle = {
-      borderColor: 'rgb(247, 244, 244)',
-      width: 30,
-      height: 20,
-      borderRadius: 2,
-      margin: 10,
-      backgroundColor: knob.value,
-    };
+    const colorStyle = {};
     return (
       <View>
-        <TouchableOpacity style={colorStyle} onPress={this.openColorPicker} />
+        <Touchable color={knob.value} onPress={this.openColorPicker} />
         <Modal
           supportedOrientations={['portrait', 'landscape']}
           transparent

addons/ondevice-knobs/src/types/Date.js

@@ -1,7 +1,20 @@
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
-import { TouchableOpacity, Text, View } from 'react-native';
+import { View } from 'react-native';
 import DateTimePicker from 'react-native-modal-datetime-picker';
+import styled from '@emotion/native';
+
+const Touchable = styled.TouchableOpacity(({ theme }) => ({
+  borderColor: theme.borderColor,
+  borderWidth: 1,
+  borderRadius: 2,
+  padding: 5,
+}));
+
+const Label = styled.Text(({ theme }) => ({
+  fontSize: 13,
+  color: theme.labelColor,
+}));
 
 // TODO seconds support
 class DateType extends PureComponent {
@@ -49,29 +62,17 @@ class DateType extends PureComponent {
     return (
       <View style={{ margin: 10 }}>
         <View style={{ flexDirection: 'row' }}>
-          <TouchableOpacity
+          <Touchable onPress={this.showDatePicker}>
+            <Label>{dateString}</Label>
+          </Touchable>
+          <Touchable
             style={{
-              borderWidth: 1,
-              borderColor: '#f7f4f4',
-              borderRadius: 2,
-              padding: 5,
-            }}
-            onPress={this.showDatePicker}
-          >
-            <Text style={{ fontSize: 13, color: '#555' }}>{dateString}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={{
-              borderWidth: 1,
-              borderColor: '#f7f4f4',
-              borderRadius: 2,
-              padding: 5,
               marginLeft: 5,
             }}
             onPress={this.showTimePicker}
           >
-            <Text style={{ fontSize: 13, color: '#555' }}>{timeString}</Text>
-          </TouchableOpacity>
+            <Label>{timeString}</Label>
+          </Touchable>
         </View>
         <DateTimePicker
           date={d}

addons/ondevice-knobs/src/types/Number.js

@@ -1,6 +1,16 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { TextInput, View, Slider } from 'react-native';
+import { View, Slider } from 'react-native';
+import styled from '@emotion/native';
+
+const Input = styled.TextInput(({ theme }) => ({
+  borderWidth: 1,
+  borderColor: theme.borderColor,
+  borderRadius: 2,
+  fontSize: 13,
+  padding: 5,
+  color: theme.labelColor,
+}));
 
 class NumberType extends React.Component {
   constructor(props) {
@@ -29,15 +39,7 @@ class NumberType extends React.Component {
     const { knob } = this.props;
 
     return (
-      <TextInput
-        style={{
-          borderWidth: 1,
-          borderColor: '#f7f4f4',
-          borderRadius: 2,
-          fontSize: 13,
-          padding: 5,
-          color: '#555',
-        }}
+      <Input
         autoCapitalize="none"
         underlineColorAndroid="transparent"
         value={(knob.value || '').toString()}

addons/ondevice-knobs/src/types/Object.js

@@ -1,17 +1,17 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { TextInput } from 'react-native';
 import deepEqual from 'deep-equal';
+import styled from '@emotion/native';
 
-const styles = {
+const Input = styled.TextInput(({ theme }) => ({
   borderWidth: 1,
-  borderColor: '#f7f4f4',
   borderRadius: 2,
   fontSize: 13,
   padding: 5,
   margin: 10,
-  color: '#555',
-};
+  borderColor: theme.borderColor,
+  color: theme.labelColor,
+}));
 
 class ObjectType extends React.Component {
   constructor(...args) {
@@ -70,9 +70,9 @@ class ObjectType extends React.Component {
     }
 
     return (
-      <TextInput
+      <Input
         id={knob.name}
-        style={{ ...styles, ...extraStyle }}
+        style={{ ...extraStyle }}
         value={jsonString}
         onChangeText={this.handleChange}
         multiline

addons/ondevice-knobs/src/types/Select.js

@@ -1,9 +1,19 @@
 /* eslint no-underscore-dangle: 0 */
 
 import PropTypes from 'prop-types';
-import { View, TextInput } from 'react-native';
+import { View } from 'react-native';
 import React from 'react';
 import ModalPicker from 'react-native-modal-selector';
+import styled from '@emotion/native';
+
+const Input = styled.TextInput(({ theme }) => ({
+  borderWidth: 1,
+  borderRadius: 2,
+  padding: 5,
+  margin: 10,
+  borderColor: theme.borderColor,
+  color: theme.labelColor,
+}));
 
 class SelectType extends React.Component {
   getOptions = ({ options }) => {
@@ -30,15 +40,7 @@ class SelectType extends React.Component {
           onChange={option => onChange(option.key)}
           animationType="none"
         >
-          <TextInput
-            style={{
-              borderWidth: 1,
-              borderColor: '#f7f4f4',
-              borderRadius: 2,
-              padding: 5,
-              color: '#555',
-              margin: 10,
-            }}
+          <Input
             editable={false}
             value={selected}
             autoCapitalize="none"

addons/ondevice-knobs/src/types/Text.js

@@ -1,18 +1,19 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { TextInput } from 'react-native';
+import styled from '@emotion/native';
+
+const Input = styled.TextInput(({ theme }) => ({
+  borderWidth: 1,
+  borderColor: theme.borderColor,
+  borderRadius: 2,
+  fontSize: 13,
+  padding: 5,
+  margin: 10,
+  color: theme.labelColor,
+}));
 
 const TextType = ({ knob, onChange }) => (
-  <TextInput
-    style={{
-      borderWidth: 1,
-      borderColor: '#f7f4f4',
-      borderRadius: 2,
-      fontSize: 13,
-      padding: 5,
-      margin: 10,
-      color: '#555',
-    }}
+  <Input
     id={knob.name}
     value={knob.value}
     onChangeText={onChange}

addons/ondevice-notes/package.json

@@ -27,6 +27,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@emotion/core": "^10.0.20",
     "@storybook/addons": "5.3.0-alpha.40",
     "@storybook/api": "5.3.0-alpha.40",
     "@storybook/client-api": "5.3.0-alpha.40",

addons/ondevice-notes/src/components/Notes.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import Markdown from 'react-native-simple-markdown';
 import { AddonStore } from '@storybook/addons';
 import { API } from '@storybook/api';
+import { ThemeContext } from '@emotion/core';
 
 export const PARAM_KEY = `notes`;
 
@@ -30,7 +31,13 @@ export const Notes = ({ active, api }: NotesProps) => {
 
   return (
     <View style={{ padding: 10, flex: 1 }}>
-      <Markdown>{textAfterFormatted}</Markdown>
+      <ThemeContext.Consumer>
+        {theme => (
+          <Markdown styles={{ text: { color: (theme as any).labelColor } }}>
+            {textAfterFormatted}
+          </Markdown>
+        )}
+      </ThemeContext.Consumer>
     </View>
   );
 };