Merge branch 'master' into release

Author: nitzanyiz

.github/workflows/deployDocs.yml

@@ -28,6 +28,7 @@ jobs:
         run: yarn docs:build
 
       - name: Deploy documentation
+        if: github.ref == 'refs/heads/release'
         env:
           GIT_USER: github-actions[bot]
           GIT_PASS: ${{ secrets.GITHUB_TOKEN }}
@@ -38,3 +39,8 @@ jobs:
           cd docuilib
           yarn install
           yarn deploy
+
+      - name: Deploy disclaimer
+        if: github.ref != 'refs/heads/release'
+        run: |
+          echo "Deploying will only happen on release branch"

docs/foundation/colors.md

@@ -8,8 +8,6 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import {ColorsTable, ColorsPalette} from '@site/src/components/ColorsSection'
 
-## Colors
-
 Our default library Colors object is using **System Colors** and **Design Tokens**.
 
 <Tabs>

docuilib/docusaurus.config.js

@@ -18,7 +18,7 @@ const darkCodeTheme = themes.dracula;
     trailingSlash: false,
     customFields: {
       docsMainEntry: 'getting-started/setup',
-      docsDevelopmentVersion: 'next',
+      // docsDevelopmentVersion: 'next',
       expoSnackLink: 'https://snack.expo.io/@ethanshar/rnuilib_snack',
       landingPage: {
         sections: ['components', 'features', 'code', 'libraries'],
@@ -110,15 +110,15 @@ const darkCodeTheme = themes.dracula;
             },
             {
               type: 'doc',
-              docId: 'components/basic/View',
+              docId: '/category/basic',
               position: 'left',
               label: 'COMPONENTS'
             },
             {
               href: 'https://github.com/wix/react-native-ui-lib',
               position: 'right',
               html: `
-                <div style="display: flex; align-items: center;">
+                <div style="display: flex; align-items: center; font-size: 16px;">
                   <span style="margin-right: 6px;">GitHub</span>
                   <image src="https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/site/externalSmall.png" alt="external link icon" width="17" height="16" />
                 </div>

docuilib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.29.0",
+  "version": "4.0.1",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",

docuilib/src/components/UILivePreview.module.scss

@@ -28,12 +28,12 @@ $editor-height: 700px;
   max-width: calc(100% - ($preview-width + $preview-margin));
   border-radius: 8px;
   overflow-y: scroll;
+  scrollbar-width: none;
 
   pre {
     min-height: 100%;
     padding: 20px !important;
     background-color: #1d1e21 !important;
-    border-right: 1px solid #d2d6d8;
   }
 }
 
@@ -59,6 +59,11 @@ $editor-height: 700px;
   }
 }
 
+.previewContainer {
+  border-left: 1px solid #d2d6d8;
+  display: flex;
+}
+
 .preview {
   position: relative;
   width: $preview-width;

docuilib/src/components/UILivePreview.tsx

@@ -1,10 +1,10 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {LiveProvider, LiveEditor, LiveError} from 'react-live';
 import {themes} from 'prism-react-renderer';
+// import {Button} from 'react-native-ui-lib/core';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import CodeBlock from '@theme/CodeBlock';
-import {Button} from 'react-native-ui-lib/core';
 import ReactLiveScope from '../theme/ReactLiveScope';
 import {isComponentSupported} from '../utils/componentUtils';
 import useFormattedCode from '../hooks/useFormattedCode';
@@ -16,8 +16,14 @@ export default function UILivePreview({code: initialCode, componentName = undefi
   const [iframeLoaded, setIframeLoaded] = useState(false);
   const {siteConfig} = useDocusaurusContext();
   const iframeRef = useRef(null);
-  const [code, setCode] = useState(initialCode);
-  const {code: formattedCode} = useFormattedCode(code, {printWidth: 100});
+  const {code: formattedCode} = useFormattedCode(initialCode, {printWidth: 100});
+  const [code, setCode] = useState(formattedCode);
+  // const [code, setCode] = useState(initialCode);
+  // const {code: formattedCode} = useFormattedCode(code, {printWidth: 100});
+
+  useEffect(() => {
+    setCode(formattedCode);
+  }, [formattedCode]);
 
   useEffect(() => {
     if (iframeLoaded) {
@@ -30,9 +36,9 @@ export default function UILivePreview({code: initialCode, componentName = undefi
     iframeRef.current?.contentWindow.postMessage(message, '*');
   };
 
-  const handleFormat = () => {
-    setCode(formattedCode);
-  };
+  // const handleFormat = () => {
+  //   setCode(formattedCode);
+  // };
 
   if (!liveScopeSupport && !isComponentSupported(componentName)) {
     return <CodeBlock language="jsx">{code}</CodeBlock>;
@@ -47,28 +53,30 @@ export default function UILivePreview({code: initialCode, componentName = undefi
           <LiveProvider code={code} scope={ReactLiveScope} theme={themes.oceanicNext}>
             <div className={styles.container}>
               <div className={styles.codeContainer}>
-                <div className={styles.codeHeader}>
+                {/* <div className={styles.codeHeader}>
                   <Button
                     label="Prettify"
                     size={Button.sizes.small}
                     onPress={handleFormat}
                     backgroundColor="#2d2d2d"
                     borderRadius={4}
                   />
-                </div>
+                </div> */}
                 <LiveEditor onChange={setCode} className={styles.liveEditor}/>
                 <div className={styles.errorContainer}>
                   <LiveError/>
                 </div>
               </div>
-              <div className={styles.preview}>
-                <iframe
-                  ref={iframeRef}
-                  className={styles.iframe}
-                  src={iframeSource}
-                  title="Simulator"
-                  onLoad={() => setIframeLoaded(true)}
-                />
+              <div className={styles.previewContainer}>
+                <div className={styles.preview}>
+                  <iframe
+                    ref={iframeRef}
+                    className={styles.iframe}
+                    src={iframeSource}
+                    title="Simulator"
+                    onLoad={() => setIframeLoaded(true)}
+                  />
+                </div>
               </div>
             </div>
           </LiveProvider>

docuilib/src/css/custom.css

@@ -149,13 +149,15 @@ main {
 
 .breadcrumbs__link {
   color: #4D5963;
+  font-size: 16px;
 }
 .breadcrumbs__item--active .breadcrumbs__link {
   color: #20303C;
   background-color: #FFF;
 }
 .breadcrumbHomeIcon_YNFT {
   color: #20303C;
+  transform: translateY(20%);
 }
 
 /** Custom Footer */
@@ -178,7 +180,7 @@ main {
   margin-bottom: 40px;
 }
 .footer__section {
-  width: 200px;
+  width: 250px;
   display: flex;
 }
 .footer__section__item a {
@@ -188,7 +190,7 @@ main {
 .footer__section__item span {
   margin-right: 4px;
   font-weight: 500;
-  font-size: 14px;
+  font-size: 16px;
   letter-spacing: 0.3px;
   line-height: 38px;
 }