Integrate gatsby-remark-prismjs and update markdown docs

Author: ethanshar

markdowns/foundation/colors.md

@@ -4,9 +4,63 @@ path: "/foundation/colors"
 title: "Colors"
 ---
 
-#### rgba
+#### loadColors
+Load set of colors to use 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 set of scheme colors to support dark/light mode.  
+This features 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)'
@@ -15,7 +69,7 @@ Colors.rgba(44, 224, 112, 0.2); // 'rgb(44, 224, 112, 0.2)'
 
 #### getColorTint
 usage:
-```jsx
+```js
 import {Colors} from 'react-native-ui-lib';
 
 Colors.getColorTint(Colors.green30, 70); // will return the value of Colors.green70

markdowns/foundation/modifiers.md

@@ -27,7 +27,7 @@ Use our alignment props to quickly position your view's content without getting
 
 ! Notice that the layout modifiers affect the View's children
 
-```
+```jsx
 <View flex left>
   <Button label="Button" />
 </View>
@@ -60,7 +60,7 @@ It's always important to use your margins and paddings correctly, with modifiers
 - paddingB-[value] - Bottom padding
 - paddingH-[value] - Horizontal padding
 - paddingV-[value] - Vertical padding
-```
+```jsx
 <View paddingV-20 paddingH-30>...</View>
 ```
 
@@ -72,12 +72,12 @@ It's always important to use your margins and paddings correctly, with modifiers
 - 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
@@ -93,20 +93,20 @@ Last type of modifiers are for styling your components
 - [colorKey] - Controls text components' color
 - background-[colorKey] (or bg-[colorKey]) - Background color 
 
-```
+```jsx
 <Text blue30>...</Text>
 <View bg-dark70>...</View>
 <TouchableOpacity bg-red30/>
 ```
 
 - [typographyKey] - Controls text components' typography
-```
+```jsx
 <Text text70>...</Text>
 <TextInput text80/>
 ```
 
 - br[borderRadiusKey] - Set the view's border radius (e.g. `br10`, `br20`, .., `br60`)
-```
+```jsx
 <View br40>...</View>
 ```
 

markdowns/foundation/theme-manager.md

@@ -15,7 +15,7 @@ The default value will be overridden if a prop is being passed to the component
 
 Example
 
-```
+```js
 import {ThemeManager} from 'react-native-ui-lib';
 
 ThemeManager.setComponentTheme('Text', {
@@ -39,7 +39,7 @@ Same as `setComponentTheme` only it can't be overridden by props passed to the c
 
 Example
 
-```
+```js
 ThemeManager.setComponentForcedTheme('Card', (props, context) => {
   return {
     containerStyle: [styles.defaultContainerStyle, props.containerStyle]

markdowns/getting-started/setup.md

@@ -30,7 +30,7 @@ If you're planning on using specific components, see **UILib Packages**.
 *For some packages you might still need to install one of the peer dependencies*
 
 If you want it all, install **peer dependencies**
-```
+```js
 npm i react-native-gesture-handler react-native-reanimated @react-native-community/blur @react-native-community/datetimepicker @react-native-community/netinfo @react-native-picker/picker
 
 cd ios && pod install

uilib-docs/configurations/plugins.js

@@ -23,7 +23,17 @@ const markdownPagesPlugin = (path = `${__dirname}/../../markdowns/`) => [
       path
     }
   },
-  `gatsby-transformer-remark`
+  {
+    resolve: `gatsby-transformer-remark`,
+    plugins: [
+      {
+        resolve: `gatsby-remark-prismjs`,
+        options: {
+        }
+      }
+    ]
+  }
+  /* `gatsby-transformer-remark` */
 ];
 
 const componentsDocgenPlugin = [

uilib-docs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "uilib-docs",
   "description": "uilib docs template",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "author": "Ethan Sharabi <[email protected]>",
   "main": "index.js",
   "dependencies": {
@@ -15,12 +15,14 @@
     "gatsby-plugin-react-helmet": "^3.0.10",
     "gatsby-plugin-sass": "^2.0.11",
     "gatsby-plugin-sharp": "^2.0.29",
+    "gatsby-remark-prismjs": "^4.1.0",
     "gatsby-source-filesystem": "^2.0.27",
     "gatsby-transformer-react-docgen": "^5.0.0",
-    "gatsby-transformer-remark": "^2.8.3",
+    "gatsby-transformer-remark": "^3.0.0",
     "gatsby-transformer-sharp": "^2.1.17",
     "lodash": "^4.17.11",
     "node-sass": "^4.11.0",
+    "prismjs": "^1.22.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",

uilib-docs/src/components/layout.js

@@ -46,7 +46,7 @@ const Layout = ({children, location}) => {
         <meta property="twitter:title" content={metaTitle} />
         <meta property="twitter:description" content={metaDescription} />
         <link rel="canonical" href="https://wix.github.io/react-native-ui-lib/" />
-        <script
+        {/* <script
           src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js"
           integrity="sha512-9+422Bs3A87UkWfp+qV80Nfv9arhbCXKY1rxrF2seorI36mIIstMiuBfyKLF1yH1nnzQkEWq2xrzT4XU3Z+vrA=="
           crossorigin="anonymous"
@@ -56,7 +56,7 @@ const Layout = ({children, location}) => {
           href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism-tomorrow.min.css"
           integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg=="
           crossorigin="anonymous"
-        />
+        /> */}
       </Helmet>
       <Header githubDomain={siteMetadata.github} />
       {/* <div className={`main ${!showSidebar ? 'fill' : ''}`}> */}

uilib-docs/src/pages/index.scss

@@ -139,21 +139,21 @@
     background: $violet20;
     color: $white;
 
-    .code-examples {
-      display: flex;
-      align-items: flex-start;
-
-      code {
-        display: inline-block;
-        white-space: break-spaces;
-        text-align: left;
-        background: $dark10;
-        padding: 10px;
-        margin-right: 10px;
-        font-size: $text40;
-        line-height: 1.4;
-      }
-    }
+    // .code-examples {
+    //   display: flex;
+    //   align-items: flex-start;
+
+    //   code {
+    //     display: inline-block;
+    //     white-space: break-spaces;
+    //     text-align: left;
+    //     background: $dark10;
+    //     padding: 10px;
+    //     margin-right: 10px;
+    //     font-size: $text40;
+    //     line-height: 1.4;
+    //   }
+    // }
   }
 
   .components-section {

uilib-docs/src/pages/sections/CodeSection.jsx

@@ -57,7 +57,7 @@ const Tab = ({headline, codeSnippet}) => {
   return (
     <div className="tab-page">
       <p>{headline}</p>
-      <pre className="code">
+      <pre>
         <code className="language-javascript">{codeSnippet}</code>
       </pre>
     </div>

uilib-docs/src/pages/sections/CodeSection.scss

@@ -2,6 +2,9 @@
 
 .code-section {
   padding-bottom: 5%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   .headline {
     text-align: center;
@@ -13,7 +16,7 @@
     width: 80vw;
 
     @include desktop {
-      width: 35vw;
+      width: 55vw;
     }
 
     .view-docs-button {
@@ -52,8 +55,8 @@
   }
 
   .tab-page {
-    .code {
-      background-color: $black;
+    pre {
+      background-color: $dark10;
       padding: 20px;
       width: 100%;
     }

uilib-docs/src/styles/global.scss

@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import '~prismjs/themes/prism-tomorrow.css';
 @import 'src/styles/constants';
 @import 'src/styles/components';
 
@@ -12,7 +13,6 @@ body {
   font-family: Poppins, sans-serif;
   -webkit-font-smoothing: antialiased;
   font-size: 12px;
-  
   @include tablet {
     font-size: 14px;
   }

uilib-docs/src/templates/markdown.scss

@@ -22,14 +22,13 @@
   }
 
   pre {
-    background-color: $dark80;
+    background-color: $dark10;
     border-radius: 4px;
     padding: 16px;
-    box-shadow: 2px 2px 2px $dark60;
+    box-shadow: 2px 2px 2px rgba($dark10, 0.2);
 
     code {
       background: transparent;
-      color: $dark10;
       padding: 0;
       white-space: pre-wrap;
     }
@@ -39,7 +38,6 @@
     word-break: break-word;
     display: inline-block;
     background: $dark70;
-    color: $primary;
     padding: 1px 2px;
     margin-bottom: 2px;
   }