Infra/docusaurus docs

.gitignore

@@ -62,6 +62,7 @@ dist
 dist-ts
 yarn.lock
 package-lock.json
+docs/**/*.md
 
 # CocoaPods
 /ios/Pods/

docs/foundation/assets.md

@@ -0,0 +1,38 @@
+---
+index: 6
+path: "/foundation/assets"
+title: "Assets"
+---
+Assets are a big part of the whole UI system, whether it's an icon, placeholder or an illustration, we use them everywhere.  
+Load groups of assets and easily render them with the _Image_ component.
+
+```javascript
+import {Assets, Image} from 'react-native-ui-lib';
+
+Assets.loadAssetsGroup('icons', {
+  icon1: require('icon1.png'),
+  icon2: require('icon2.png'),
+  icon3: require('icon3.png'),
+});
+
+// or as a nested group to create your own hierarchy
+Assets.loadAssetsGroup('illustrations.placeholders', {
+  emptyCart: require('emptyCart.png'),
+  emptyProduct: require('emptyProduct.png'),
+});
+Assets.loadAssetsGroup('illustrations.emptyStates.', {
+  noMessages: require('noMessages.png'),
+  noContacts: require('noContacts.png'),
+});
+
+```
+
+And use them like this
+```jsx
+// Use them with the Image component (our Image component)
+<Image assetName="icon1"/> // default assetGroup is "icons"
+<Image assetName="emptyCart" assetGroup="illustrations.placeholders"/>
+
+// The old fashion way will work as well
+<Image source={Assets.icons.icon1}/>
+```

docs/foundation/colors.md

@@ -0,0 +1,86 @@
+---
+sidebar_position: 7
+path: "/foundation/colors"
+title: "Colors"
+---
+
+#### loadColors
+Load a set of colors to be used in the app.  
+These colors will be accessible through the Colors class and as modifiers.
+usage:
+```javascript
+import {Colors} from 'react-native-ui-lib';
+
+Colors.loadColors({
+  error: '#ff2442',
+  success: '#00CD8B',
+  text: '#20303C'
+});
+```
+
+```jsx
+import {View, Text, Colors} from 'react-native-ui-lib';
+
+<View>
+  <Text style={{color: Colors.error}}>Error Message</Text>
+  <Text success>Success Message</Text>
+<View>
+```
+
+#### loadSchemes
+Load a set of scheme colors to support dark/light mode.  
+This feature works hand in hand with our modifiers 
+
+```js
+Colors.loadSchemes({
+  light: {
+    screenBG: 'transparent',
+    textColor: Colors.grey10,
+    moonOrSun: Colors.yellow30,
+    mountainForeground: Colors.green30,
+    mountainBackground: Colors.green50
+  },
+  dark: {
+    screenBG: Colors.grey10,
+    textColor: Colors.white,
+    moonOrSun: Colors.grey80,
+    mountainForeground: Colors.violet10,
+    mountainBackground: Colors.violet20
+  }
+});
+```
+
+```jsx
+<View flex padding-page bg-screenBG>
+  <Text h1 textColor>
+    Dark Mode
+  </Text>      
+</View>
+```
+
+#### rgba
+usage:
+```js
+import {Colors} from 'react-native-ui-lib';
+
+Colors.rgba('#ff2442', 0.05); // 'rgb(255, 36, 66, 0.05)'
+Colors.rgba(44, 224, 112, 0.2); // 'rgb(44, 224, 112, 0.2)'
+```
+
+#### getColorTint
+usage:
+```js
+import {Colors} from 'react-native-ui-lib';
+
+Colors.getColorTint(Colors.green30, 70); // will return the value of Colors.green70
+Colors.getColorTint('#ff2442', 50); // will return the 5th tint in an autogenerate 8-tints palette based on '#ff2442'
+```
+
+#### isDark
+returns `true` if a color is considered dark (bright colors will return `false`)
+```js
+import {Colors} from 'react-native-ui-lib';
+
+Colors.isDark(Colors.grey10); // true
+Colors.isDark(Colors.grey80); // false
+```

docs/foundation/modifiers.md

@@ -0,0 +1,119 @@
+---
+index: 5
+path: "/foundation/modifiers"
+title: "Modifiers"
+---
+As you have probably noticed already, we translate our style presets into modifiers.  
+**Modifiers** help you create a stunning UI easily and quickly.
+
+**[!IMPORTANT]**  
+Make sure to use modifiers only on UILib components, as some modifiers can cause issues on Android when used on React Native components directly.
+
+## Layout Modifiers
+Use our alignment properties to quickly position the content of your view without getting confused calculating all those flex rules.
+- flex - apply `flex:1` on a view 
+- flex-[value] - When you want to control the flex value
+- flexS - FlexShrink 
+- flexG - FlexGrow
+- left
+- top
+- right
+- bottom
+- row - change direction to row (default is column)
+- center
+- centerH - center content horizontally
+- centerV - center content vertically
+- spread - spread content (similar to `space-between`)
+
+! Notice that the layout modifiers affect the View's children
+
+```jsx
+<View flex left>
+  <Button label="Button" />
+</View>
+
+<View flex right>
+  <Button label="Button" />
+</View>
+
+<View flex top>
+  <Button label="Button" />
+</View>
+
+<View flex bottom>
+  <Button label="Button" />
+</View>
+
+<View flex center>
+  <Button label="Button" />
+</View>
+```
+<img src="https://cloud.githubusercontent.com/assets/1780255/24798566/4de91efc-1b9f-11e7-9974-e06e3daa7c63.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798569/50dc99a4-1b9f-11e7-8231-fbcbb139a010.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798571/52766d08-1b9f-11e7-95a3-b2b262e81170.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798572/545b7abe-1b9f-11e7-9098-409ceee6ff22.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798575/55e3c4f4-1b9f-11e7-998d-7986a038abb6.png" width="160"/>
+
+## Spacing Modifiers
+It's always important to use your margins and paddings correctly, and that's also easier to do with modifiers:
+
+- padding-[value] - will add padding to all corners (e.g. padding-30 will add 30 pt of padding)
+- paddingL-[value] - Left padding
+- paddingT-[value] - Top padding
+- paddingR-[value] - Right padding
+- paddingB-[value] - Bottom padding
+- paddingH-[value] - Horizontal padding
+- paddingV-[value] - Vertical padding
+```jsx
+<View paddingV-20 paddingH-30>...</View>
+```
+
+- margin-[value]
+- marginL-[value] - Left margin
+- marginT-[value] - Top margin
+- marginR-[value] - Right margin
+- marginB-[value] - Bottom margin
+- marginH-[value] - Horizontal margin
+- marginV-[value] - Vertical margin
+
+```jsx
+<View marginT-5 marginB-10>...</View>
+```
+
+! padding and margin modifiers can also take [Spacing](https://github.com/wix/react-native-ui-lib/blob/master/src/style/spacings.ts) constants. 
+```jsx
+<View margin-s5 padding-s2>...</View>
+```
+## Position Modifiers
+Use the position modifiers to quickly set an absolute position for your views.
+- `abs` will set the absolute position on your View
+- `absL`, `absT`, `absR`, `absB` - set the absolute position and align to Left, Top, Right, Bottom accordingly
+- `absH` and `absV` - position absolute and stretch horizontally or vertically
+- `absF` will set the absolute position and fill the parent view (similar to StyleSheet.absoluteFillObject)
+
+## Styling Modifiers
+The last type of modifiers is for styling your components
+
+- [colorKey] - Controls the color of text components
+- background-[colorKey] (or bg-[colorKey]) - Background color 
+
+```jsx
+<Text blue30>...</Text>
+<View bg-grey70>...</View>
+<TouchableOpacity bg-red30/>
+```
+
+- [typographyKey] - Controls the typography of text components 
+```jsx
+<Text text70>...</Text>
+<TextInput text80/>
+```
+
+- br[borderRadiusKey] - Set the border radius for the view (e.g. `br10`, `br20`, .., `br60`)
+```jsx
+<View br40>...</View>
+```
+
+
+! all styling modifiers are based on our [`Colors` & `Typography` presets](/react-native-ui-lib/foundation/style).  
+You can load your own presets and use them as modifiers. 
+
+
+
+Check out [this example](/react-native-ui-lib/getting-started/usage) where we use most of these props.

docs/foundation/style.md

@@ -0,0 +1,43 @@
+---
+sidebar_position: 4
+path: "/foundation/style"
+title: "Style"
+---
+The base foundation of each UI component is its style.
+We use basic style presets to define the rules and the style guide we follow.
+
+Our presets include: **Colors**, **Typography**, **Spacings**, **Shadows**, **Border Radius** and more..
+
+The UILib already comes with a set of predefined constants and [presets](https://github.com/wix/react-native-ui-lib/tree/master/src/style).
+
+You can easily use it anywhere in your code (as you would use any other constant value), or as a component modifier.
+
+It's also very easy to define your own presets..
+
+```jsx
+import {Typography, Colors, Spacings} from 'react-native-ui-lib';
+
+Colors.loadColors({
+  pink: '#FF69B4',
+  gold: '#FFD700',
+});
+
+Typography.loadTypographies({
+  h1: {fontSize: 58, fontWeight: '300', lineHeight: 80},
+  h2: {fontSize: 46, fontWeight: '300', lineHeight: 64},
+});
+
+Spacings.loadSpacings({
+  page: isSmallScreen ? 16 : 20
+});
+```
+
+For example, the following line
+
+```jsx
+<Text h1 pink>Hello World</Text>
+```
+Will generate this text
+<img src="https://cloud.githubusercontent.com/assets/1780255/24792314/296b7ebc-1b86-11e7-8580-9252d1ddf5d9.png" width="250"/>
+
+It will use the _h1_ preset for typography and the _pink_ color value we set to style the Text element.

docs/foundation/theme-manager.md

@@ -0,0 +1,48 @@
+---
+index: 7
+path: "/foundation/theme-manager"
+title: "Theme Manager"
+---
+Use `ThemeManager` to set default global behavior for your app.
+
+#### setComponentTheme
+
+Set default props for a component by passing an object or a callback (for dynamic, runtime default props)
+The default value will be overridden if a prop is being passed to the component instance (see `setComponentForcedTheme` for that).
+
+- `ThemeManager.setComponentTheme(componentName, defaultPropsObject);`
+- `ThemeManager.setComponentTheme(componentName, componentProps => newDefaultPropsObject);`
+
+Example
+
+```js
+import {ThemeManager} from 'react-native-ui-lib';
+
+ThemeManager.setComponentTheme('Text', {
+    text70: true, // will set the text70 typography modifier prop to be true by default
+    grey10: true, // will set the grey10 color modifier prop to be true by default 
+});
+
+
+ThemeManager.setComponentTheme('Button', (props, context) => {
+
+  return {
+    // this will apply a different backgroundColor
+    // depending on whether the Button has an outline or not
+    backgroundColor: props.outline ? 'black' : 'green',
+  };
+});
+```
+
+#### setComponentForcedTheme
+Same as `setComponentTheme`, but can't be overridden by props passed to the component. 
+
+Example
+
+```js
+ThemeManager.setComponentForcedTheme('Card', (props, context) => {
+  return {
+    containerStyle: [styles.defaultContainerStyle, props.containerStyle]
+  };
+});
+```