Added documentation

- Update utility generate method
- Added Documentation

component.js

@@ -27,13 +27,15 @@ import { ThemeContext } from './provider'
 export default function buildComponent(WrappedComponent) {
   return function ( {className, style, ...rest} ) {
     const props  = { ...rest, style: [] }
-    const config = useContext(ThemeContext)
+    const context = useContext(ThemeContext)
 
     // If the component is Text, then apply config's font family & size
     if( WrappedComponent.displayName == "Text" ) {
+      // const family = context.config.fontFamily
+      // console.log( context.config.fontFamily.primary.regular )
       props.style.push({
-        fontFamily : config.fontFamily.primary.regular,
-        fontSize   : config.baseFontSize
+        fontFamily : context.config.fontFamily.primary.regular,
+        fontSize   : context.config.baseFontSize
       })
     }
 
@@ -42,7 +44,7 @@ export default function buildComponent(WrappedComponent) {
       let styles          = {}
       let transform       = []
 
-      const parsedUtility = className.split(" ").map( c => parseStyle(c, config) );
+      const parsedUtility = className.split(" ").map( c => parseStyle(c, context.utilities) );
 
       // Lets combine transform property values
       parsedUtility.map( rule => {

deploy.sh

@@ -0,0 +1,25 @@
+#!/usr/bin/env sh
+
+# abort on errors
+set -e
+
+# build
+npm run docs:build
+
+# navigate into the build output directory
+cd docs/.vuepress/dist
+
+# if you are deploying to a custom domain
+# echo 'www.example.com' > CNAME
+
+git init
+git add -A
+git commit -m 'deploy'
+
+# if you are deploying to https://<USERNAME>.github.io
+# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
+
+# if you are deploying to https://<USERNAME>.github.io/<REPO>
+git push -f git@github.com:ariona/rn-utility-style.git master:gh-pages
+
+cd -

docs/.vuepress/config.js

@@ -0,0 +1,39 @@
+module.exports = {
+  title: 'RN Utility Style',
+  description: 'Utility style framework for React Native',
+  themeConfig: {
+    nav: [
+      { text: 'Github', link: 'https://github.com/ariona/rn-utility-style' }
+    ],
+    sidebar: [
+      {
+        title: 'Getting started',
+        collapsable: false,
+        sidebarDepth: 1,
+        children: [
+          '/guide/usage',
+          '/guide/config',
+          '/guide/stylesheet',
+          '/guide/reference',
+        ]
+      },
+      {
+        title: 'Utilities',
+        collapsable: false,
+        sidebarDepth: 1,
+        children: [
+          '/guide/layout',
+          '/guide/sizing',
+          '/guide/margin',
+          '/guide/padding',
+          '/guide/border',
+          '/guide/background',
+          '/guide/typography',
+          '/guide/transform',
+          '/guide/decoration',
+          '/guide/interactivity'
+        ]
+      }
+    ]
+  }
+}

docs/.vuepress/styles/index.styl

@@ -0,0 +1,97 @@
+.table-wrapper{
+  max-height: 400px;
+  overflow: auto;
+  border: 1px solid #dfe2e5;
+  border-top: none;
+}
+.table-wrapper table{
+  margin: 0;
+}
+.table-wrapper table th,
+.table-wrapper table td{
+  border: none;
+}
+.table-wrapper table th,
+.table-wrapper table td{
+  border-bottom: 1px solid #dfe2e5;
+}
+.table-wrapper table th{
+  position: sticky;
+  top: -1px;
+  box-shadow: 0 1px 1px rgba(0,0,0,.1);
+}
+.table-wrapper tbody tr:last-child td{
+  border-bottom: none;
+}
+.color-value{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.color-value .color{
+  width: 50px;
+  height: 30px;
+  border: 1px solid #e3e3e3;
+}
+table {
+  width: 100%;
+  table-layout: fixed;
+  display: table;
+}
+table th {
+  text-align: left;
+  font-size: 14px;
+  text-transform: capitalize;
+  background-color: #f6f8fa;
+}
+table tbody td {
+  font-family: monospace;
+  font-size: 14px;
+}
+
+.color-pallete-grid {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 30px -5px;
+}
+.color-pallete{
+  width: 20%;
+  text-align: center;
+  text-transform: capitalize;
+  padding: 0 5px;
+  box-sizing: border-box;
+  margin-bottom: 30px;
+}
+.color-pallete dl{
+  display: flex;
+  flex-wrap: wrap;
+}
+.color-pallete dt,
+.color-pallete dd{
+  width: 50%;
+  margin: 0;
+  text-align: center;
+  margin-bottom: 5px;
+}
+.color-pallete dt{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+}
+.color-pallete dd{
+  padding-top: 30px;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 700;
+  border: 1px solid #e3e3e3;
+  box-sizing: border-box;
+}
+.color-pallete dd span{
+  padding: 5px;
+  background-color: white;
+  display: block;
+  border-top: 1px solid #e3e3e3
+}

docs/.vuepress/styles/palette.styl

@@ -0,0 +1,20 @@
+// colors
+$accentColor = #4C51BF
+$textColor = #2c3e50
+$borderColor = #eaecef
+$codeBgColor = #282c34
+$arrowBgColor = #ccc
+$badgeTipColor = #42b983
+$badgeWarningColor = darken(#ffe564, 35%)
+$badgeErrorColor = #DA5961
+
+// layout
+$navbarHeight = 3.6rem
+$sidebarWidth = 20rem
+$contentWidth = 740px
+$homePageWidth = 960px
+
+// responsive breakpoints
+$MQNarrow = 959px
+$MQMobile = 719px
+$MQMobileNarrow = 419px

docs/README.md

@@ -0,0 +1,9 @@
+# RN Utility Style
+
+![hero](./guide/images/sample.jpg)
+
+**RN Utility Style** is utility-first style framework for rapidly building React Native User interface.
+
+This library adopt [Tailwind CSS framework](https://tailwindcss.com/) which is an utility-first CSS framework for rapidly building website.
+
+In fact, we cherry picked some configuration and naming convention from tailwind so if you love using tailwind you'll love using RN Utility style.

docs/guide/background.md

@@ -0,0 +1,107 @@
+## Background
+
+
+## Background Color
+
+The class for background-color follow this format: `bg-[color]-[shade]`, you can checkout [Color reference](/guide/reference) for available color value and it's shades
+
+
+<div class="table-wrapper">
+
+Class | Style
+--- | ---
+bg-transparent |<span class="color-value"> <span>backgroundColor: transparent</span><span class="color" style="background-color: transparent"></span></span>
+bg-black | <span class="color-value"><span>backgroundColor: #000</span><span class="color" style="background-color:#000"></span></span>
+bg-white | <span class="color-value"><span>backgroundColor: #fff</span><span class="color" style="background-color:#fff"></span></span>
+bg-gray-100 | <span class="color-value"><span>backgroundColor: #f7fafc</span><span class="color" style="background-color:#f7fafc"></span></span>
+bg-gray-200 | <span class="color-value"><span>backgroundColor: #edf2f7</span><span class="color" style="background-color:#edf2f7"></span></span>
+bg-gray-300 | <span class="color-value"><span>backgroundColor: #e2e8f0</span><span class="color" style="background-color:#e2e8f0"></span></span>
+bg-gray-400 | <span class="color-value"><span>backgroundColor: #cbd5e0</span><span class="color" style="background-color:#cbd5e0"></span></span>
+bg-gray-500 | <span class="color-value"><span>backgroundColor: #a0aec0</span><span class="color" style="background-color:#a0aec0"></span></span>
+bg-gray-600 | <span class="color-value"><span>backgroundColor: #718096</span><span class="color" style="background-color:#718096"></span></span>
+bg-gray-700 | <span class="color-value"><span>backgroundColor: #4a5568</span><span class="color" style="background-color:#4a5568"></span></span>
+bg-gray-800 | <span class="color-value"><span>backgroundColor: #2d3748</span><span class="color" style="background-color:#2d3748"></span></span>
+bg-gray-900 | <span class="color-value"><span>backgroundColor: #1a202c</span><span class="color" style="background-color:#1a202c"></span></span>
+bg-red-100 | <span class="color-value"><span>backgroundColor: #fff5f5</span><span class="color" style="background-color:#fff5f5"></span></span>
+bg-red-200 | <span class="color-value"><span>backgroundColor: #fed7d7</span><span class="color" style="background-color:#fed7d7"></span></span>
+bg-red-300 | <span class="color-value"><span>backgroundColor: #feb2b2</span><span class="color" style="background-color:#feb2b2"></span></span>
+bg-red-400 | <span class="color-value"><span>backgroundColor: #fc8181</span><span class="color" style="background-color:#fc8181"></span></span>
+bg-red-500 | <span class="color-value"><span>backgroundColor: #f56565</span><span class="color" style="background-color:#f56565"></span></span>
+bg-red-600 | <span class="color-value"><span>backgroundColor: #e53e3e</span><span class="color" style="background-color:#e53e3e"></span></span>
+bg-red-700 | <span class="color-value"><span>backgroundColor: #c53030</span><span class="color" style="background-color:#c53030"></span></span>
+bg-red-800 | <span class="color-value"><span>backgroundColor: #9b2c2c</span><span class="color" style="background-color:#9b2c2c"></span></span>
+bg-red-900 | <span class="color-value"><span>backgroundColor: #742a2a</span><span class="color" style="background-color:#742a2a"></span></span>
+bg-orange-100 | <span class="color-value"><span>backgroundColor: #fffaf0</span><span class="color" style="background-color:#fffaf0"></span></span>
+bg-orange-200 | <span class="color-value"><span>backgroundColor: #feebc8</span><span class="color" style="background-color:#feebc8"></span></span>
+bg-orange-300 | <span class="color-value"><span>backgroundColor: #fbd38d</span><span class="color" style="background-color:#fbd38d"></span></span>
+bg-orange-400 | <span class="color-value"><span>backgroundColor: #f6ad55</span><span class="color" style="background-color:#f6ad55"></span></span>
+bg-orange-500 | <span class="color-value"><span>backgroundColor: #ed8936</span><span class="color" style="background-color:#ed8936"></span></span>
+bg-orange-600 | <span class="color-value"><span>backgroundColor: #dd6b20</span><span class="color" style="background-color:#dd6b20"></span></span>
+bg-orange-700 | <span class="color-value"><span>backgroundColor: #c05621</span><span class="color" style="background-color:#c05621"></span></span>
+bg-orange-800 | <span class="color-value"><span>backgroundColor: #9c4221</span><span class="color" style="background-color:#9c4221"></span></span>
+bg-orange-900 | <span class="color-value"><span>backgroundColor: #7b341e</span><span class="color" style="background-color:#7b341e"></span></span>
+bg-yellow-100 | <span class="color-value"><span>backgroundColor: #fffff0</span><span class="color" style="background-color:#fffff0"></span></span>
+bg-yellow-200 | <span class="color-value"><span>backgroundColor: #fefcbf</span><span class="color" style="background-color:#fefcbf"></span></span>
+bg-yellow-300 | <span class="color-value"><span>backgroundColor: #faf089</span><span class="color" style="background-color:#faf089"></span></span>
+bg-yellow-400 | <span class="color-value"><span>backgroundColor: #f6e05e</span><span class="color" style="background-color:#f6e05e"></span></span>
+bg-yellow-500 | <span class="color-value"><span>backgroundColor: #ecc94b</span><span class="color" style="background-color:#ecc94b"></span></span>
+bg-yellow-600 | <span class="color-value"><span>backgroundColor: #d69e2e</span><span class="color" style="background-color:#d69e2e"></span></span>
+bg-yellow-700 | <span class="color-value"><span>backgroundColor: #b7791f</span><span class="color" style="background-color:#b7791f"></span></span>
+bg-yellow-800 | <span class="color-value"><span>backgroundColor: #975a16</span><span class="color" style="background-color:#975a16"></span></span>
+bg-yellow-900 | <span class="color-value"><span>backgroundColor: #744210</span><span class="color" style="background-color:#744210"></span></span>
+bg-green-100 | <span class="color-value"><span>backgroundColor: #f0fff4</span><span class="color" style="background-color:#f0fff4"></span></span>
+bg-green-200 | <span class="color-value"><span>backgroundColor: #c6f6d5</span><span class="color" style="background-color:#c6f6d5"></span></span>
+bg-green-300 | <span class="color-value"><span>backgroundColor: #9ae6b4</span><span class="color" style="background-color:#9ae6b4"></span></span>
+bg-green-400 | <span class="color-value"><span>backgroundColor: #68d391</span><span class="color" style="background-color:#68d391"></span></span>
+bg-green-500 | <span class="color-value"><span>backgroundColor: #48bb78</span><span class="color" style="background-color:#48bb78"></span></span>
+bg-green-600 | <span class="color-value"><span>backgroundColor: #38a169</span><span class="color" style="background-color:#38a169"></span></span>
+bg-green-700 | <span class="color-value"><span>backgroundColor: #2f855a</span><span class="color" style="background-color:#2f855a"></span></span>
+bg-green-800 | <span class="color-value"><span>backgroundColor: #276749</span><span class="color" style="background-color:#276749"></span></span>
+bg-green-900 | <span class="color-value"><span>backgroundColor: #22543d</span><span class="color" style="background-color:#22543d"></span></span>
+bg-teal-100 | <span class="color-value"><span>backgroundColor: #e6fffa</span><span class="color" style="background-color:#e6fffa"></span></span>
+bg-teal-200 | <span class="color-value"><span>backgroundColor: #b2f5ea</span><span class="color" style="background-color:#b2f5ea"></span></span>
+bg-teal-300 | <span class="color-value"><span>backgroundColor: #81e6d9</span><span class="color" style="background-color:#81e6d9"></span></span>
+bg-teal-400 | <span class="color-value"><span>backgroundColor: #4fd1c5</span><span class="color" style="background-color:#4fd1c5"></span></span>
+bg-teal-500 | <span class="color-value"><span>backgroundColor: #38b2ac</span><span class="color" style="background-color:#38b2ac"></span></span>
+bg-teal-600 | <span class="color-value"><span>backgroundColor: #319795</span><span class="color" style="background-color:#319795"></span></span>
+bg-teal-700 | <span class="color-value"><span>backgroundColor: #2c7a7b</span><span class="color" style="background-color:#2c7a7b"></span></span>
+bg-teal-800 | <span class="color-value"><span>backgroundColor: #285e61</span><span class="color" style="background-color:#285e61"></span></span>
+bg-teal-900 | <span class="color-value"><span>backgroundColor: #234e52</span><span class="color" style="background-color:#234e52"></span></span>
+bg-blue-100 | <span class="color-value"><span>backgroundColor: #ebf8ff</span><span class="color" style="background-color:#ebf8ff"></span></span>
+bg-blue-200 | <span class="color-value"><span>backgroundColor: #bee3f8</span><span class="color" style="background-color:#bee3f8"></span></span>
+bg-blue-300 | <span class="color-value"><span>backgroundColor: #90cdf4</span><span class="color" style="background-color:#90cdf4"></span></span>
+bg-blue-400 | <span class="color-value"><span>backgroundColor: #63b3ed</span><span class="color" style="background-color:#63b3ed"></span></span>
+bg-blue-500 | <span class="color-value"><span>backgroundColor: #4299e1</span><span class="color" style="background-color:#4299e1"></span></span>
+bg-blue-600 | <span class="color-value"><span>backgroundColor: #3182ce</span><span class="color" style="background-color:#3182ce"></span></span>
+bg-blue-700 | <span class="color-value"><span>backgroundColor: #2b6cb0</span><span class="color" style="background-color:#2b6cb0"></span></span>
+bg-blue-800 | <span class="color-value"><span>backgroundColor: #2c5282</span><span class="color" style="background-color:#2c5282"></span></span>
+bg-blue-900 | <span class="color-value"><span>backgroundColor: #2a4365</span><span class="color" style="background-color:#2a4365"></span></span>
+bg-indigo-100 | <span class="color-value"><span>backgroundColor: #ebf4ff</span><span class="color" style="background-color:#ebf4ff"></span></span>
+bg-indigo-200 | <span class="color-value"><span>backgroundColor: #c3dafe</span><span class="color" style="background-color:#c3dafe"></span></span>
+bg-indigo-300 | <span class="color-value"><span>backgroundColor: #a3bffa</span><span class="color" style="background-color:#a3bffa"></span></span>
+bg-indigo-400 | <span class="color-value"><span>backgroundColor: #7f9cf5</span><span class="color" style="background-color:#7f9cf5"></span></span>
+bg-indigo-500 | <span class="color-value"><span>backgroundColor: #667eea</span><span class="color" style="background-color:#667eea"></span></span>
+bg-indigo-600 | <span class="color-value"><span>backgroundColor: #5a67d8</span><span class="color" style="background-color:#5a67d8"></span></span>
+bg-indigo-700 | <span class="color-value"><span>backgroundColor: #4c51bf</span><span class="color" style="background-color:#4c51bf"></span></span>
+bg-indigo-800 | <span class="color-value"><span>backgroundColor: #434190</span><span class="color" style="background-color:#434190"></span></span>
+bg-indigo-900 | <span class="color-value"><span>backgroundColor: #3c366b</span><span class="color" style="background-color:#3c366b"></span></span>
+bg-purple-100 | <span class="color-value"><span>backgroundColor: #faf5ff</span><span class="color" style="background-color:#faf5ff"></span></span>
+bg-purple-200 | <span class="color-value"><span>backgroundColor: #e9d8fd</span><span class="color" style="background-color:#e9d8fd"></span></span>
+bg-purple-300 | <span class="color-value"><span>backgroundColor: #d6bcfa</span><span class="color" style="background-color:#d6bcfa"></span></span>
+bg-purple-400 | <span class="color-value"><span>backgroundColor: #b794f4</span><span class="color" style="background-color:#b794f4"></span></span>
+bg-purple-500 | <span class="color-value"><span>backgroundColor: #9f7aea</span><span class="color" style="background-color:#9f7aea"></span></span>
+bg-purple-600 | <span class="color-value"><span>backgroundColor: #805ad5</span><span class="color" style="background-color:#805ad5"></span></span>
+bg-purple-700 | <span class="color-value"><span>backgroundColor: #6b46c1</span><span class="color" style="background-color:#6b46c1"></span></span>
+bg-purple-800 | <span class="color-value"><span>backgroundColor: #553c9a</span><span class="color" style="background-color:#553c9a"></span></span>
+bg-purple-900 | <span class="color-value"><span>backgroundColor: #44337a</span><span class="color" style="background-color:#44337a"></span></span>
+bg-pink-100 | <span class="color-value"><span>backgroundColor: #fff5f7</span><span class="color" style="background-color:#fff5f7"></span></span>
+bg-pink-200 | <span class="color-value"><span>backgroundColor: #fed7e2</span><span class="color" style="background-color:#fed7e2"></span></span>
+bg-pink-300 | <span class="color-value"><span>backgroundColor: #fbb6ce</span><span class="color" style="background-color:#fbb6ce"></span></span>
+bg-pink-400 | <span class="color-value"><span>backgroundColor: #f687b3</span><span class="color" style="background-color:#f687b3"></span></span>
+bg-pink-500 | <span class="color-value"><span>backgroundColor: #ed64a6</span><span class="color" style="background-color:#ed64a6"></span></span>
+bg-pink-600 | <span class="color-value"><span>backgroundColor: #d53f8c</span><span class="color" style="background-color:#d53f8c"></span></span>
+bg-pink-700 | <span class="color-value"><span>backgroundColor: #b83280</span><span class="color" style="background-color:#b83280"></span></span>
+bg-pink-800 | <span class="color-value"><span>backgroundColor: #97266d</span><span class="color" style="background-color:#97266d"></span></span>
+bg-pink-900 | <span class="color-value"><span>backgroundColor: #702459</span><span class="color" style="background-color:#702459"></span></span>
+
+</div>