Merge branch 'master' into fix/picker_multiValue

Author: lidord-wix

.buildkite/pipeline.yml

@@ -0,0 +1,15 @@
+steps:
+  - block: ":rocket: Release!"
+    prompt: "Fill out the details for release"
+    if: 'build.message =~ /^release\$/i'
+    fields:
+      - text: "VERSION"
+        key: "version"
+  
+  - label: ":hammer_and_pick: Build"
+    command:
+    - "nvm install"
+    - "npm install"
+    - "npm run test"
+    - "npm run build"
+    - "[[ $BUILDKITE_PULL_REQUEST == 'false' ]] && npm run bkRelease && npm run demo || true"

demo/package.json

@@ -13,7 +13,7 @@
   },
   "scripts": {
     "release": "node ./scripts/release.js",
-    "jenkinsRelease": "node ./scripts/jenkinsRelease.js"
+    "demoRelease": "node ./scripts/demoRelease.js"
   },
   "devDependencies": {
     "react-native-ui-lib": "*",

demo/scripts/jenkinsRelease.js renamed to demo/scripts/demoRelease.js

@@ -2,51 +2,34 @@ const exec = require('shell-utils').exec;
 const semver = require('semver');
 const _ = require('lodash');
 const p = require('path');
+const cp = require('child_process');
 
 // Workaround JS
-const isRelease = process.env.RELEASE_BUILD === 'true';
-const branch = process.env.BRANCH;
 
-const ONLY_ON_BRANCH = `origin/${branch || 'master'}`;
+const isRelease = process.env.BUILDKITE_MESSAGE.match(/^release$/i);
+let VERSION;
+if (isRelease) {
+  VERSION = cp.execSync(`buildkite-agent meta-data get version`).toString();
+}
+
 const VERSION_TAG = isRelease ? 'latest' : 'snapshot';
 const VERSION_INC = 'patch';
 
 function run() {
   if (!validateEnv()) {
     return;
   }
-  setupGit();
   createNpmRc();
   versionTagAndPublish();
 }
 
 function validateEnv() {
-  if (!process.env.JENKINS_CI) {
+  if (!process.env.CI) {
     throw new Error('releasing is only available from CI');
   }
-
-  if (!process.env.JENKINS_MASTER) {
-    console.log('not publishing on a different build');
-    return false;
-  }
-
-  if (process.env.GIT_BRANCH !== ONLY_ON_BRANCH) {
-    console.log(`not publishing on branch ${process.env.GIT_BRANCH}`);
-    return false;
-  }
-
   return true;
 }
 
-function setupGit() {
-  exec.execSyncSilent('git config --global push.default simple');
-  exec.execSyncSilent(`git config --global user.email "${process.env.GIT_EMAIL}"`);
-  exec.execSyncSilent(`git config --global user.name "${process.env.GIT_USER}"`);
-  const remoteUrl = new RegExp('https?://(\\S+)').exec(exec.execSyncRead('git remote -v'))[1];
-  exec.execSyncSilent(`git remote add deploy "https://${process.env.GIT_USER}:${process.env.GIT_TOKEN}@${remoteUrl}"`);
-  // exec.execSync(`git checkout ${ONLY_ON_BRANCH}`);
-}
-
 function createNpmRc() {
   exec.execSync('rm -f package-lock.json');
   const npmrcPath = p.resolve(`${__dirname}/.npmrc`);
@@ -57,7 +40,7 @@ function versionTagAndPublish() {
   const currentPublished = findCurrentPublishedVersion();
   console.log(`current published version: ${currentPublished}`);
 
-  const version = isRelease ? process.env.VERSION : `${currentPublished}-snapshot.${process.env.BUILD_ID}`;
+  const version = isRelease ? VERSION : `${currentPublished}-snapshot.${process.env.BUILDKITE_BUILD_NUMBER}`;
   console.log(`Publishing version: ${version}`);
 
   tryPublishAndTag(version);

docuilib/docusaurus.config.js

@@ -15,7 +15,8 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
     organizationName: 'wix', // Usually your GitHub org/user name.
     projectName: 'react-native-ui-lib', // Usually your repo name.
     customFields: {
-      expoSnackLink: 'https://snack.expo.io/@ethanshar/rnuilib_snack?platform=ios&supportedPlatforms=ios,android'
+      expoSnackLink: 'https://snack.expo.io/@ethanshar/rnuilib_snack?platform=ios&supportedPlatforms=ios,android',
+      stars: '3.8',
     },
     plugins: ['docusaurus-plugin-sass'],
     presets: [

docuilib/sidebars.js

@@ -9,6 +9,15 @@
  Create as many sidebars as you want.
  */
 
+const componentsCategories = {
+  Basic: 'basic',
+  Form: 'form',
+  Overlays: 'overlays',
+  Layout: 'layoutsAndTemplates',
+  Lists: 'lists',
+  Incubator: 'incubator'
+};
+
 module.exports = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   // tutorialSidebar: [{type: 'autogenerated', dirName: '.'}]
@@ -34,14 +43,14 @@ module.exports = {
     {
       type: 'category',
       label: 'Components',
-      items: ['Basic', 'Form', 'Overlays', 'Layout', 'Native', 'Incubator'].map(category => {
+      items: ['Basic', 'Form', 'Overlays', 'Layout', 'Lists', 'Native', 'Incubator'].map(category => {
         return {
           type: 'category',
           label: category,
           items: [
             {
               type: 'autogenerated',
-              dirName: `components/${category.toLowerCase()}`
+              dirName: `components/${componentsCategories[category]}`
             }
           ]
         };

docuilib/src/components/MainSection.tsx

@@ -8,6 +8,7 @@ import GoldStarSvg from '@site/static/img/goldStar.svg';
 
 export default () => {
   const {siteConfig} = useDocusaurusContext();
+  console.warn('ethan - siteConfig', siteConfig.customFields.stars)
 
   return (
     <div className={styles.main}>
@@ -18,7 +19,7 @@ export default () => {
         </p>
         <div className={styles.gitStars}>
           <GoldStarSvg width={16} height={16} style={{margin: 4}}/>
-          <span>3.7k</span>
+          <span>{siteConfig.customFields.stars}k</span>
         </div>
 
         <div className={styles.buttons}>

package.json

@@ -41,7 +41,7 @@
     "bump:patch": "npm version patch",
     "demo": "./scripts/demo.sh",
     "release": "node ./scripts/release.js",
-    "jenkinsRelease": "node ./scripts/jenkinsRelease.js"
+    "bkRelease": "node ./scripts/bkRelease.js"
   },
   "dependencies": {
     "babel-plugin-transform-inline-environment-variables": "^0.0.2",

scripts/jenkinsRelease.js renamed to scripts/bkRelease.js

@@ -1,16 +1,21 @@
 const exec = require('shell-utils').exec;
+const cp = require('child_process');
 const semver = require('semver');
 const _ = require('lodash');
 const p = require('path');
 
 // Workaround JS
-const isRelease = process.env.RELEASE_BUILD === 'true';
-const branch = process.env.BRANCH;
 
-const ONLY_ON_BRANCH = `origin/${branch || 'master'}`;
+// Export buildkite variables for Release build
+// We cast toString() because function returns 'object'
+const isRelease = process.env.BUILDKITE_MESSAGE.match(/^release$/i);
+let VERSION;
+if (isRelease) {
+  VERSION = cp.execSync(`buildkite-agent meta-data get version`).toString();
+}
+
 const VERSION_TAG = isRelease ? 'latest' : 'snapshot';
 const VERSION_INC = 'patch';
-
 function run() {
   if (!validateEnv()) {
     return;
@@ -21,20 +26,9 @@ function run() {
 }
 
 function validateEnv() {
-  if (!process.env.JENKINS_CI) {
+  if (!process.env.CI) {
     throw new Error('releasing is only available from CI');
   }
-
-  if (!process.env.JENKINS_MASTER) {
-    console.log('not publishing on a different build');
-    return false;
-  }
-
-  if (process.env.GIT_BRANCH !== ONLY_ON_BRANCH) {
-    console.log(`not publishing on branch ${process.env.GIT_BRANCH}`);
-    return false;
-  }
-
   return true;
 }
 
@@ -57,7 +51,7 @@ function versionTagAndPublish() {
   const currentPublished = findCurrentPublishedVersion();
   console.log(`current published version: ${currentPublished}`);
 
-  const version = isRelease ? process.env.VERSION : `${currentPublished}-snapshot.${process.env.BUILD_ID}`;
+  const version = isRelease ? VERSION : `${currentPublished}-snapshot.${process.env.BUILDKITE_BUILD_NUMBER}`;
   console.log(`Publishing version: ${version}`);
 
   tryPublishAndTag(version);
@@ -85,6 +79,7 @@ function tryPublishAndTag(version) {
   }
 }
 
+
 function tagAndPublish(newVersion) {
   console.log(`trying to publish ${newVersion}...`);
   exec.execSync(`npm --no-git-tag-version version ${newVersion}`);

scripts/build-docs.js

@@ -1,5 +1,6 @@
 const childProcess = require('child_process');
 const fs = require('fs');
+const _ = require('lodash');
 
 const COMPONENTS_DOCS_DIR = './docs/components';
 
@@ -43,10 +44,11 @@ components.forEach(component => {
 
   /* Props */
   content += `## API\n`;
-  component.props.forEach(prop => {
+  component.props?.forEach(prop => {
     content += `### ${prop.name}\n`;
     content += `${prop.description}  \n`;
-    content += `<span style={{color: 'grey'}}>${prop.type}</span>\n\n`;
+    // content += `<span style={{color: 'grey'}}>${_.escape(prop.type)}</span>\n\n`;
+    content += `<code>${_.escape(prop.type)}</code>\n\n`;
   });
 
   if (!fs.existsSync(`${COMPONENTS_DOCS_DIR}/${component.category}`)) {

scripts/demo.sh

@@ -2,5 +2,5 @@
 
 pushd demo
 npm install
-npm run jenkinsRelease
+npm run demoRelease
 popd

src/components/actionBar/actionBar.api.json

@@ -0,0 +1,28 @@
+{
+  "name": "ActionBar",
+  "category": "basic",
+  "description": "Quick actions bar, each action support Button component props",
+  "extends": ["View"],
+  "extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/view/index.tsx"],
+  "modifiers": ["margin", "padding"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ActionBarScreen.tsx",
+  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ActionBar/ActionBar.gif?raw=true"],
+  "props": [
+    {"name": "actions", "type": "ButtonProps[]", "description": "The actions for the action bar", "required": true},
+    {"name": "height", "type": "number", "description": "Height", "default": "48"},
+    {"name": "backgroundColor", "type": "string", "description": "Background color", "default": "Colors.white"},
+    {"name": "centered", "type": "boolean", "description": "Should action be equally centered"},
+    {
+      "name": "keepRelative",
+      "type": "boolean",
+      "description": "Keep the action bar position relative instead of it absolute position"
+    },
+    {
+      "name": "useSafeArea",
+      "type": "boolean",
+      "description": "In iOS, use safe area, in case component attached to the bottom",
+      "default": "true"
+    },
+    {"name": "style", "type": "ViewStyle", "description": "Component's style"}
+  ]
+}

src/components/actionSheet/actionSheet.api.json

@@ -0,0 +1,75 @@
+{
+  "name": "ActionSheet",
+  "category": "overlays",
+  "description": "Cross platform Action Sheet, with a support for native iOS solutions",
+  "extends": ["Dialog"],
+  "extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/dialog/index.tsx"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ActionSheetScreen.tsx",
+  "images": ["https://media.giphy.com/media/l0HUpXOR6RqB2ct5S/giphy.gif"],
+  "props": [
+    {"name": "visible", "type": "boolean", "description": "Whether to show the action sheet or not"},
+    {
+      "name": "title",
+      "type": "string",
+      "description": "Title of the action sheet",
+      "note": "If both 'title' and 'message' are not passed will not render the title view at all"
+    },
+    {"name": "message", "type": "string", "description": "Message of the action sheet"},
+    {
+      "name": "cancelButtonIndex",
+      "type": "number",
+      "description": "Index of the option represents the cancel action (to be displayed as the separated bottom bold button)"
+    },
+    {
+      "name": "destructiveButtonIndex",
+      "type": "number",
+      "description": "Index of the option represents the destructive action (will display red text. Usually used for delete or abort actions)"
+    },
+    {
+      "name": "options",
+      "type": "Array<ButtonProps>",
+      "description": "List of options for the action sheet, follows the Button prop types (supply 'label' string and 'onPress' function)"
+    },
+    {
+      "name": "onDismiss",
+      "type": "DialogProps['onDismiss']",
+      "description": "Called when dismissing the action sheet (usually used for setting 'visible' prop to false)"
+    },
+    {
+      "name": "onModalDismissed",
+      "type": "DialogProps['onDialogDismissed']",
+      "description": "Called once the modal has been dismissed",
+      "note": "iOS only, modal only"
+    },
+    {"name": "useNativeIOS", "type": "boolean", "description": "Should use the native action sheet for iOS"},
+    {
+      "name": "showCancelButton",
+      "type": "boolean",
+      "description": "When passed (only with useNativeIOS), will display a cancel button at the bottom (overrides cancelButtonIndex)"
+    },
+    {
+      "name": "containerStyle",
+      "type": "ViewStyle",
+      "description": "Add or override style of the action sheet (wraps the title and actions)"
+    },
+    {
+      "name": "dialogStyle",
+      "type": "ViewStyle",
+      "description": "Add or override style of the dialog wrapping the action sheet"
+    },
+    {"name": "optionsStyle", "type": "ViewStyle", "description": "Add or override style of the options list"},
+    {"name": "renderTitle", "type": "() => JSX.Element", "description": "Render custom title"},
+    {
+      "name": "renderAction",
+      "type": "\n(\noption: ButtonProps, \nindex: number, \nonOptionPress: ActionSheetOnOptionPress\n) => JSX.Element",
+      "description": "Render custom action",
+      "note": "You will need to call 'onOptionPress' so the option's 'onPress' will be called"
+    },
+    {
+      "name": "useSafeArea",
+      "type": "boolean",
+      "description": "In iOS, use safe area, in case component attached to the bottom"
+    },
+    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ]
+}

src/components/animatedImage/animatedImage.api.json

@@ -0,0 +1,19 @@
+{
+  "name": "AnimatedImage",
+  "category": "basic",
+  "description": "Image component that fades-in the image with animation once it's loaded",
+  "extends": ["Image"],
+  "extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/image/index.tsx"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AnimatedImageScreen.js",
+  "images": ["https://media.giphy.com/media/l0HU7jj0ivEFyZIA0/giphy.gif"],
+  "props": [
+    {
+      "name": "animationDuration",
+      "type": "number",
+      "description": "Duration for the fade animation when the image is loaded",
+      "default": "300"
+    },
+    {"name": "loader", "type": "JSX.element", "description": "A component to render while the image is loading"},
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Additional spacing styles for the container"}
+  ]
+}