feat(native/theme): Add stories for native theme

treebohotels · Feb 12, 2019 · 13f0d40 · 13f0d40
1 parent a181610
commit 13f0d40
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 59 deletions.
diff --git a/src/theme/makeStories.js b/src/theme/makeStories.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import theme from '../theme/web';
+
+export default (storiesOf, { Flex, View, Space, Size, Card, Text }) =>
+  storiesOf('Theme', module)
+    .add('colors', () => (
+      <Flex flexDirection="row" flexWrap="wrap">
+        <View>
+          {
+            Object.keys(theme.color).map((color) => (
+              <Flex
+                key={color}
+                flexBasis="25%"
+                alignItems="center"
+                justifyContent="center"
+              >
+                <Space margin={[0, 0, 2, 0]}>
+                  <Size height={10}>
+                    <Card backgroundColor={color} shape="sharpEdged">
+                      <Card shape="sharpEdged" backgroundColor="greyLighter">
+                        <Text size="xxs">
+                          {`${color}\n${theme.color[color]}`}
+                        </Text>
+                      </Card>
+                    </Card>
+                  </Size>
+                </Space>
+              </Flex>
+            ))
+          }
+        </View>
+      </Flex>
+    ))
+    .add('spacing', () => (
+      <View>
+        {
+          [1, 2, 3, 4, 5, 6, 7, 8].map((space) => (
+            <View>
+              <Text size="xs">{space * 8}</Text>
+              <Space key={space} margin={[0, 0, 2, 0]}>
+                <Size height={space} width={space}>
+                  <Card borderColor="red" borderStyle="dashed" />
+                </Size>
+              </Space>
+            </View>
+          ))
+        }
+      </View>
+    ));
diff --git a/src/theme/native/theme.story.js b/src/theme/native/theme.story.js
@@ -0,0 +1,17 @@
+import { storiesOf } from '@storybook/react-native';
+import Flex from '../../Flex/native';
+import Space from '../../Space/native';
+import Size from '../../Size/native';
+import View from '../../View/native';
+import Text from '../../Text/native';
+import Card from '../../Card/native';
+import makeStories from '../makeStories';
+
+makeStories(storiesOf, {
+  Flex,
+  Space,
+  Size,
+  View,
+  Text,
+  Card,
+});
diff --git a/src/theme/web/theme.story.js b/src/theme/web/theme.story.js
@@ -1,66 +1,17 @@
-import React from 'react';
 import { storiesOf } from '@storybook/react';
-import theme from './theme';
 import Flex from '../../Flex/web';
 import Space from '../../Space/web';
 import Size from '../../Size/web';
 import View from '../../View/web';
+import Text from '../../Text/web';
 import Card from '../../Card/web';
+import makeStories from '../makeStories';
 
-storiesOf('Theme', module)
-  .add('colors', () => (
-    <Flex
-      flexDirection="row"
-      flexWrap="wrap"
-    >
-      <View>
-        {
-          Object.keys(theme.color).map((color) => (
-            <Flex
-              key={color}
-              flexBasis="25%"
-              alignItems="center"
-              justifyContent="center"
-            >
-              <Space margin={[0, 0, 2, 0]}>
-                <Size height={10}>
-                  <Card
-                    backgroundColor={color}
-                    elevated
-                  >
-                    {color}
-                    <br />
-                    {theme.color[color]}
-                  </Card>
-                </Size>
-              </Space>
-            </Flex>
-          ))
-        }
-      </View>
-    </Flex>
-  ))
-  .add('spacing', () => (
-    <View>
-      {
-        [1, 2, 3, 4, 5, 6, 7, 8].map((space) => (
-          <Space
-            key={space}
-            margin={[0, 0, 2, 0]}
-          >
-            <Size
-              height={space}
-              width={space}
-            >
-              <Card
-                borderColor="red"
-                borderStyle="dashed"
-              >
-                {space * 8}
-              </Card>
-            </Size>
-          </Space>
-        ))
-      }
-    </View>
-  ));
+makeStories(storiesOf, {
+  Flex,
+  Space,
+  Size,
+  View,
+  Text,
+  Card,
+});
diff --git a/storybook/native/config.js b/storybook/native/config.js
@@ -13,6 +13,7 @@ const loadStories = () => {
   require('../../src/Button/native/Button.story');
   require('../../src/Text/native/Text.story');
   require('../../src/Tag/native/Tag.story');
+  require('../../src/theme/native/theme.story');
 };
 
 const StorybookUI = getStorybookUI();