Merge branch 'master' into release

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"

README.md

@@ -118,3 +118,4 @@ class MyScreen extends Component {
   }
 }
 ```
+ 

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);

demo/src/assets/images/placeholderMissingImage.png

@@ -154,6 +154,7 @@ export const navigationData = {
     title: 'Incubator (Experimental)',
     screens: [
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
+      {title: '(New) Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
       {title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
       {title: 'ExpandableOverlay', tags: 'text field expandable input picker', screen: 'unicorn.components.IncubatorExpandableOverlayScreen'},
       {title: 'WheelPicker (Incubator)', tags: 'wheel picker spinner experimental', screen: 'unicorn.incubator.WheelPickerScreen'},

demo/src/assets/images/[email protected]

@@ -383,6 +383,12 @@ export default class ButtonsScreen extends Component {
               style={{marginBottom: ButtonSpace}}
             />
 
+            <Button
+              label="hyperlink button"
+              hyperlink
+              style={{marginBottom: ButtonSpace}}
+            />
+
             <Button label="Icon on right" iconSource={plusIcon} iconOnRight />
           </View>
 

demo/src/assets/images/[email protected]

@@ -171,7 +171,7 @@ export default class PickerScreen extends Component {
             onChange={filter => this.setState({filter})}
             renderPicker={({label}) => {
               return (
-                <View row center>
+                <View row>
                   <Image style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon}/>
                   <Text grey10 text80>
                     {label} Posts
@@ -194,7 +194,7 @@ export default class PickerScreen extends Component {
             getItemValue={contact => contact.name}
             renderPicker={contact => {
               return (
-                <View row center>
+                <View row>
                   <Avatar size={30} source={{uri: contact.thumbnail}}/>
                   <Text text70 marginL-10>
                     {contact.name}

demo/src/assets/images/[email protected]

@@ -3,9 +3,8 @@ import {Animated, ScrollView} from 'react-native';
 import {View, Text, Colors} from 'react-native-ui-lib';
 
 class TextScreen extends Component {
-  state = {};
-  toggle = false;
-  animatedValue = new Animated.Value(0);
+  private toggle = false;
+  private animatedValue = new Animated.Value(0);
 
   animate = () => {
     this.toggle = !this.toggle;
@@ -64,6 +63,9 @@ class TextScreen extends Component {
             <Text uppercase text70>
               uppercase
             </Text>
+            <Text underline text70>
+              underline
+            </Text>
           </View>
           {this.renderDivider()}
 
@@ -89,6 +91,7 @@ class TextScreen extends Component {
             <Text
               text70
               animated
+              // @ts-expect-error
               style={{transform: [{scale: this.animatedValue.interpolate({inputRange: [0, 1], outputRange: [1, 2]})}]}}
               onPress={this.animate}
             >

demo/src/assets/images/[email protected]

@@ -0,0 +1,102 @@
+import React, {Component} from 'react';
+import {StyleSheet} from 'react-native';
+import {FlatList} from 'react-native-gesture-handler';
+import {View, Text, Card, Button, Incubator, Colors, BorderRadiuses} from 'react-native-ui-lib'; //eslint-disable-line
+
+interface Item {
+  value: string;
+  label: string;
+}
+
+const colors: Item[] = [
+  {value: Colors.red10, label: 'Red10'},
+  {value: Colors.red30, label: 'Red30'},
+  {value: Colors.red50, label: 'Red50'},
+  {value: Colors.red70, label: 'Red70'},
+  {value: Colors.blue10, label: 'Blue10'},
+  {value: Colors.blue30, label: 'Blue30'},
+  {value: Colors.blue50, label: 'Blue50'},
+  {value: Colors.blue70, label: 'Blue70'},
+  {value: Colors.purple10, label: 'Purple10'},
+  {value: Colors.purple30, label: 'Purple30'},
+  {value: Colors.purple50, label: 'Purple50'},
+  {value: Colors.purple70, label: 'Purple70'},
+  {value: Colors.green10, label: 'Green10'},
+  {value: Colors.green30, label: 'Green30'},
+  {value: Colors.green50, label: 'Green50'},
+  {value: Colors.green70, label: 'Green70'},
+  {value: Colors.yellow10, label: 'Yellow10'},
+  {value: Colors.yellow30, label: 'Yellow30'},
+  {value: Colors.yellow50, label: 'Yellow50'},
+  {value: Colors.yellow70, label: 'Yellow70'}
+];
+
+export default class IncubatorDialogScreen extends Component {
+  state = {visible: false};
+
+  renderVerticalItem = ({item}: {item: Item}) => {
+    return (
+      <Text text50 margin-20 color={item.value}>
+        {item.label}
+      </Text>
+    );
+  };
+
+  keyExtractor = (item: Item) => {
+    return item.value;
+  };
+
+  openDialog = () => {
+    this.setState({visible: true});
+  };
+
+  closeDialog = () => {
+    this.setState({visible: false});
+  };
+
+  render() {
+    const {visible} = this.state;
+
+    return (
+      <View bg-dark80 flex padding-20>
+        <Card height={100} center padding-20>
+          <Text text50>IncubatorDialogScreen</Text>
+        </Card>
+        <View flex center>
+          <Button marginV-20 label="Open Dialog" onPress={this.openDialog}/>
+        </View>
+        <Incubator.Dialog visible={visible} onDismiss={this.closeDialog} bottom containerStyle={styles.dialogContainer}>
+          <View style={styles.dialog}>
+            <Text text60 margin-s2>
+              Title (swipe here)
+            </Text>
+            <View height={1} bg-grey40/>
+            <FlatList
+              showsVerticalScrollIndicator={false}
+              style={styles.verticalScroll}
+              data={colors}
+              renderItem={this.renderVerticalItem}
+              keyExtractor={this.keyExtractor}
+            />
+          </View>
+        </Incubator.Dialog>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  dialogContainer: {
+    bottom: 20,
+    alignSelf: 'center'
+  },
+  dialog: {
+    backgroundColor: Colors.white,
+    width: 200,
+    height: 300,
+    borderRadius: BorderRadiuses.br20
+  },
+  verticalScroll: {
+    marginTop: 20
+  }
+});

demo/src/screens/MenuStructure.js

@@ -89,11 +89,10 @@ export default class TextFieldScreen extends Component {
         </Text>
         <Incubator.ExpandableOverlay
           ref={this.expandableInputRef}
-          modalProps={{animationType: 'slide'}}
+          modalProps={{animationType: 'slide', onDismiss: () => console.warn('Modal is dismissed')}}
           expandableContent={this.renderInputModal()}
           showTopBar
           topBarProps={{title: 'Edit Input', doneLabel: 'Done', onCancel: this.onCancel, onDone: this.onDone}}
-          dialogProps={{bottom: true}}
         >
           <Incubator.TextField placeholder="Expandable input" value={textFieldValue}/>
         </Incubator.ExpandableOverlay>
@@ -112,7 +111,7 @@ export default class TextFieldScreen extends Component {
           ref={this.expandablePickerRef}
           useDialog
           expandableContent={this.renderPickerContent()}
-          dialogProps={{bottom: true}}
+          dialogProps={{bottom: true, onDismiss: () => console.warn('Dialog is dismissed')}}
         >
           {this.renderColorRow(selectedColor)}
         </Incubator.ExpandableOverlay>

demo/src/screens/componentScreens/ButtonsScreen.tsx

@@ -5,16 +5,16 @@ const {TransitionView} = Incubator;
 import {renderRadioGroup} from '../ExampleScreenPresenter';
 
 interface State {
-  enterDirection: Incubator.Direction;
-  exitDirection: Incubator.Direction;
+  enterDirection: Incubator.TransitionViewDirection;
+  exitDirection: Incubator.TransitionViewDirection;
   key: number;
 }
 
 export default class TransitionViewScreen extends Component<{}, State> {
   private ref = React.createRef<typeof TransitionView>();
   state = {
-    enterDirection: 'left' as Incubator.Direction,
-    exitDirection: 'bottom' as Incubator.Direction,
+    enterDirection: Incubator.TransitionViewDirectionEnum.LEFT,
+    exitDirection: Incubator.TransitionViewDirectionEnum.DOWN,
     key: 1
   };
 
@@ -30,21 +30,16 @@ export default class TransitionViewScreen extends Component<{}, State> {
     const {key, enterDirection, exitDirection} = this.state;
     return (
       <View padding-20 bg-grey80 flex>
-        {renderRadioGroup.call(this,
-          'Enter direction',
-          'enterDirection',
-          {top: 'top', bottom: 'bottom', left: 'left', right: 'right'},
-          {isRow: true})}
-        {renderRadioGroup.call(this,
-          'Exit direction',
-          'exitDirection',
-          {top: 'top', bottom: 'bottom', left: 'left', right: 'right'},
-          {isRow: true})}
+        {renderRadioGroup.call(this, 'Enter direction', 'enterDirection', Incubator.TransitionViewDirectionEnum, {
+          isRow: true
+        })}
+        {renderRadioGroup.call(this, 'Exit direction', 'exitDirection', Incubator.TransitionViewDirectionEnum, {
+          isRow: true
+        })}
         <Button label="Refresh" onPress={() => this.setState({key: key + 1})}/>
         <View flex center>
           <TransitionView
             key={`${key}`}
-            // @ts-expect-error
             ref={this.ref}
             enterFrom={enterDirection}
             exitTo={exitDirection}

demo/src/screens/componentScreens/PickerScreen.js

@@ -3,6 +3,7 @@ import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 export function registerScreens(registrar) {
   registrar('unicorn.incubator.TouchableOpacityScreen', () =>
     gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
+  registrar('unicorn.incubator.IncubatorDialogScreen', () => require('./IncubatorDialogScreen').default);
   registrar('unicorn.components.IncubatorExpandableOverlayScreen', () => require('./IncubatorExpandableOverlayScreen').default);
   registrar('unicorn.components.IncubatorTextFieldScreen', () => require('./IncubatorTextFieldScreen').default);
   registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);

demo/src/screens/componentScreens/TextScreen.js renamed to demo/src/screens/componentScreens/TextScreen.tsx

@@ -1,8 +1,9 @@
 ---
-index: 6
-path: "/foundation/assets"
+sidebar_position: 3
+sidebar_label: 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.