Release 7.35.0

.github/workflows/deployDocs.yml

@@ -0,0 +1,40 @@
+name: Deploy Documentation
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write    # Needed for pushing to gh-pages
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build documentation
+        run: yarn docs:build
+
+      - name: Deploy documentation
+        env:
+          GIT_USER: github-actions[bot]
+          GIT_PASS: ${{ secrets.GITHUB_TOKEN }}
+
+        run: |
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "github-actions[bot]"
+          cd docuilib
+          yarn install
+          yarn deploy

.gitignore

@@ -45,9 +45,9 @@ npm-debug.log
 
 # yarn
 yarn-error.log
-.yarn/cache
-.yarn/install-state.gz
-.yarn/yarn.build.json
+**/.yarn/cache
+**/.yarn/install-state.gz
+**/.yarn/yarn.build.json
 
 .vscode
 
@@ -71,6 +71,7 @@ dist
 dist-ts
 package-lock.json
 docs/components/**
+!scripts/build
 
 # Ruby / CocoaPods
 /ios/Pods/

Gemfile.lock

@@ -72,10 +72,8 @@ GEM
     nap (1.1.0)
     netrc (0.11.0)
     public_suffix (4.0.7)
-    rexml (3.3.6)
-      strscan
+    rexml (3.3.9)
     ruby-macho (2.5.1)
-    strscan (3.1.0)
     typhoeus (1.4.0)
       ethon (>= 0.9.0)
     tzinfo (2.0.6)

android/app/build.gradle

@@ -125,7 +125,6 @@ dependencies {
     implementation("com.facebook.react:flipper-integration:0.73.9")
 
     implementation project(':react-native-navigation')
-    implementation project(':react-native-ui-lib')
     implementation 'com.facebook.fresco:fresco:2.5.0'
     implementation 'com.facebook.fresco:animated-gif:2.5.0'
 

android/app/src/main/java/com/rnuilib/MainApplication.kt

@@ -22,7 +22,7 @@ class MainApplication : NavigationApplication() {
             PackageList(this).packages.apply {
               // Packages that cannot be autolinked yet can be added manually here, for example:
 //              add(UiLibPackageList(MainApplication.this).getPackageList())
-                addAll(UiLibPackageList(this@MainApplication).getPackageList())
+//              addAll(UiLibPackageList(this@MainApplication).getPackageList())
               // add(MyReactNativePackage())
             }
 

android/settings.gradle

@@ -1,11 +1,6 @@
-
 pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
 plugins { id("com.facebook.react.settings") }
 extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
 rootProject.name = 'rnuilib'
-// apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
-
-include ':react-native-ui-lib'
-project(':react-native-ui-lib').projectDir = new File(rootProject.projectDir, '../lib/android')

demo/src/screens/componentScreens/DateTimePickerScreen.tsx

@@ -66,6 +66,9 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             containerStyle={{marginVertical: 20}}
             label={'Date'}
             placeholder={'Select a date'}
+            // textColor={Colors.red30}
+            // backgroundColor={Colors.$backgroundDark}
+            // cancelButtonProps={{iconStyle: {tintColor: Colors.$iconDefaultLight}}}
             // value={new Date('October 13, 2014')}
           />
           <DateTimePicker

docuilib/.gitignore

@@ -7,6 +7,7 @@
 # Generated files
 .docusaurus
 .cache-loader
+.yarn
 
 # Misc
 .DS_Store

docuilib/docusaurus.config.js

@@ -17,10 +17,6 @@ const darkCodeTheme = themes.dracula;
     projectName: 'react-native-ui-lib', // Usually your repo name.
     trailingSlash: false,
     customFields: {
-      livePreviewSource:
-        process.env.NODE_ENV === 'development'
-          ? 'http://localhost:3000/react-native-ui-lib/livePreview'
-          : 'https://wix.github.io/react-native-ui-lib/livePreview',
       docsMainEntry: 'getting-started/setup',
       expoSnackLink: 'https://snack.expo.io/@ethanshar/rnuilib_snack',
       stars: '4.7'
@@ -96,8 +92,14 @@ const darkCodeTheme = themes.dracula;
             {
               type: 'doc',
               docId: 'getting-started/setup',
-              position: 'right',
-              label: 'Docs'
+              position: 'left',
+              label: 'Guides'
+            },
+            {
+              type: 'doc',
+              docId: 'components/basic/View',
+              position: 'left',
+              label: 'Components'
             },
             // {to: '/blog', label: 'Blog', position: 'left'},
             {

docuilib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.2.0",
+  "version": "3.3.5",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",
@@ -16,12 +16,16 @@
     "releaseDocs": "node ./scripts/releaseDocs.js"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.5.2",
-    "@docusaurus/preset-classic": "^3.5.2",
-    "@docusaurus/theme-live-codeblock": "^3.5.2",
+    "@docusaurus/core": "3.6.1",
+    "@docusaurus/module-type-aliases": "3.6.1",
+    "@docusaurus/preset-classic": "3.6.1",
+    "@docusaurus/theme-live-codeblock": "3.6.1",
+    "@docusaurus/types": "3.6.1",
     "@mdx-js/mdx": "^3.0.1",
     "@react-native-clipboard/clipboard": "^1.14.2",
     "@svgr/webpack": "^5.5.0",
+    "babel-loader": "9.2.1",
+    "babel-plugin-react-native-web": "^0.19.12",
     "classnames": "^2.3.1",
     "clsx": "^1.1.1",
     "docusaurus-plugin-sass": "^0.2.1",
@@ -34,19 +38,16 @@
     "url-loader": "^4.1.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.5.2",
-    "@docusaurus/types": "^3.5.2",
     "@tsconfig/docusaurus": "^1.0.4",
     "@types/react": "^17.0.14",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.8",
-    "babel-plugin-react-native-web": "^0.19.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-reanimated": "^3.15.1",
     "react-native-shimmer-placeholder": "^2.0.9",
-    "react-native-ui-lib": "7.32.0-snapshot.5506",
+    "react-native-ui-lib": "7.34.6-snapshot.5981",
     "shell-utils": "^1.0.10",
     "typescript": "~5.2.2"
   },

docuilib/sidebars.js

@@ -31,8 +31,7 @@ module.exports = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   // tutorialSidebar: [{type: 'autogenerated', dirName: '.'}]
 
-  // But you can create a sidebar manually
-  tutorialSidebar: [
+  guidesSidebar: [
     {
       type: 'category',
       label: 'Getting Started',
@@ -54,25 +53,29 @@ module.exports = {
           dirName: `foundation`
         }
       ]
-    },
+    }
+  ],
+  componentsSidebar: [
     {
       type: 'category',
       label: 'Components',
       collapsible: false,
       // items: ['Basic', 'Lists', 'Form', 'Overlays', 'Layout', 'Keyboard', 'Incubator'].map(category => {
-      items: Object.keys(componentsCategories).sort().map(category => {
-        return {
-          type: 'category',
-          label: componentsCategories[category],
-          collapsed: true,
-          items: [
-            {
-              type: 'autogenerated',
-              dirName: `components/${category}`
-            }
-          ]
-        };
-      })
+      items: Object.keys(componentsCategories)
+        .sort()
+        .map(category => {
+          return {
+            type: 'category',
+            label: componentsCategories[category],
+            collapsed: true,
+            items: [
+              {
+                type: 'autogenerated',
+                dirName: `components/${category}`
+              }
+            ]
+          };
+        })
     }
   ]
 };

docuilib/src/components/CodeSection.module.scss

@@ -1,4 +1,4 @@
-@import 'src/css/constants';
+@use 'src/css/constants' as *;
 
 .codeSection {
   padding-bottom: 5%;

docuilib/src/components/ComponentPage.module.scss

@@ -1,4 +1,4 @@
-@import 'src/css/constants';
+@use 'src/css/constants' as *;
 
 .column {
   display: 'flex';

docuilib/src/components/ComponentPage.tsx

@@ -6,6 +6,7 @@ import './ComponentPage.module.scss';
 import {ListSection} from './pageComponents/ListSection';
 import {Section} from './pageComponents/Section';
 import {Banner} from './pageComponents/Banner';
+import {devTab} from './pageComponents/DefaultTabs';
 
 export default function ComponentPage({component}) {
   const Divider = section => {
@@ -62,7 +63,7 @@ export default function ComponentPage({component}) {
 
     // TODO: align Tabs bottom border with TabItem's selected indication line
     if (tabs) {
-      return <Tabs className="main-tabs">{getTabItems(tabs)}</Tabs>;
+      return <Tabs className="main-tabs">{getTabItems([...tabs, devTab])}</Tabs>;
     }
   };
 
@@ -72,12 +73,10 @@ export default function ComponentPage({component}) {
     const hero = component.docs?.hero;
 
     if (hero) {
-      // TODO: align hero's image to page title
-      // const name = component.category === 'incubator' ? `Incubator.${component.name}` : component.name;
       const section = {
-        // title: name,
         layout: 'horizontal',
         ...hero,
+        title: component.name,
         type: 'hero'
       };
 

docuilib/src/components/ComponentsSection.module.scss

@@ -1,4 +1,4 @@
-@import 'src/css/constants';
+@use 'src/css/constants' as *;
 
 .components {
   position: relative;

docuilib/src/components/FeatureSection.module.scss

@@ -1,4 +1,4 @@
-@import 'src/css/constants';
+@use 'src/css/constants' as *;
 
 .featuresSection {
   display: flex;

docuilib/src/components/LibrariesSection.module.scss

@@ -1,4 +1,4 @@
-@import 'src/css/constants';
+@use 'src/css/constants' as *;
 
 .librariesSection {
   width: 100vw;

docuilib/src/components/MainSection.module.scss

@@ -1,4 +1,4 @@
-@import 'src/css/constants';
+@use 'src/css/constants' as *;
 
 .main {
   position: relative;

docuilib/src/components/UILivePreview.tsx

@@ -2,6 +2,7 @@ import React, {useEffect, useRef, useState, useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 import {LiveProvider, LiveEditor} from 'react-live';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import {View, Colors} from 'react-native-ui-lib/core';
 import ReactLiveScope from '../theme/ReactLiveScope';
 
@@ -12,7 +13,6 @@ export default function UILivePreview({code: codeProp}) {
   const [iframeLoaded, setIframeLoaded] = useState(false);
   const {siteConfig} = useDocusaurusContext();
   const iframeRef = useRef(null);
-  const iframeSource = siteConfig?.customFields?.livePreviewSource as string;
 
   useEffect(() => {
     if (iframeLoaded) {
@@ -30,27 +30,35 @@ export default function UILivePreview({code: codeProp}) {
   }, []);
 
   return (
-    <View row gap-s2 style={styles.liveCodeWrapper}>
-      <LiveProvider code={code} scope={ReactLiveScope}>
-        <View flex style={styles.editorWrapper}>
-          <LiveEditor
-            className="font-mono"
-            onChange={setCode}
-            //@ts-ignore
-            style={liveEditorStyle}
-          />
-        </View>
-        <View bg-$backgroundDefault margin-s2 style={styles.iframeWrapper}>
-          <iframe
-            ref={iframeRef}
-            style={styles.iframe}
-            src={iframeSource}
-            title="Simulator"
-            onLoad={() => setIframeLoaded(true)}
-          />
-        </View>
-      </LiveProvider>
-    </View>
+    <BrowserOnly>
+      {() => {
+        const iframeSource = `${window.location.origin}${siteConfig?.baseUrl}livePreview`;
+
+        return (
+          <View row gap-s2 style={styles.liveCodeWrapper}>
+            <LiveProvider code={code} scope={ReactLiveScope}>
+              <View flex style={styles.editorWrapper}>
+                <LiveEditor
+                  className="font-mono"
+                  onChange={setCode}
+                  //@ts-ignore
+                  style={liveEditorStyle}
+                />
+              </View>
+              <View bg-$backgroundDefault margin-s2 style={styles.iframeWrapper}>
+                <iframe
+                  ref={iframeRef}
+                  style={styles.iframe}
+                  src={iframeSource}
+                  title="Simulator"
+                  onLoad={() => setIframeLoaded(true)}
+                />
+              </View>
+            </LiveProvider>
+          </View>
+        );
+      }}
+    </BrowserOnly>
   );
 }