├── .appiumhelperrc ├── .babelrc ├── .buckconfig ├── .ci ├── local-ci.sh ├── travis-before-cache.sh ├── travis-before-ci.sh ├── travis-before-install.sh ├── travis-ci.sh └── travis-install.sh ├── .editorconfig ├── .eslintrc ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .npmignore ├── .travis.yml ├── .watchmanconfig ├── LICENSE ├── README.md ├── __tests__ ├── e2e │ ├── 01_StarRating.test.js │ ├── 02_Tags.test.js │ ├── 03_Breadcrumbs.test.js │ ├── 04_Dash.test.js │ ├── 05_Carousel.test.js │ ├── 06_LabelRating.test.js │ ├── 07_Label.test.js │ ├── 08_RangeSlider.test.js │ ├── 09_Expand.test.js │ ├── 11_Counter.test.js │ └── setup │ │ ├── index.js │ │ └── openExamplesFor.js └── unit │ ├── Storyshots.test.js │ └── __snapshots__ │ └── Storyshots.test.js.snap ├── android ├── app │ ├── BUCK │ ├── build.gradle │ ├── proguard-rules.pro │ └── src │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── assets │ │ └── fonts │ │ │ ├── Entypo.ttf │ │ │ ├── EvilIcons.ttf │ │ │ ├── FontAwesome.ttf │ │ │ ├── Foundation.ttf │ │ │ ├── Ionicons.ttf │ │ │ ├── MaterialIcons.ttf │ │ │ ├── Octicons.ttf │ │ │ ├── SimpleLineIcons.ttf │ │ │ └── Zocial.ttf │ │ ├── java │ │ └── com │ │ │ └── tipsiuikit │ │ │ ├── MainActivity.java │ │ │ └── MainApplication.java │ │ └── res │ │ ├── mipmap-hdpi │ │ └── ic_launcher.png │ │ ├── mipmap-mdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xhdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xxhdpi │ │ └── ic_launcher.png │ │ └── values │ │ ├── strings.xml │ │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── keystores │ ├── BUCK │ └── debug.keystore.properties └── settings.gradle ├── index.android.js ├── index.ios.js ├── ios ├── TipsiUIKit.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ └── TipsiUIKit.xcscheme ├── TipsiUIKit │ ├── AppDelegate.h │ ├── AppDelegate.m │ ├── Base.lproj │ │ └── LaunchScreen.xib │ ├── Images.xcassets │ │ └── AppIcon.appiconset │ │ │ └── Contents.json │ ├── Info.plist │ └── main.m └── TipsiUIKitTests │ ├── Info.plist │ └── TipsiUIKitTests.m ├── package.json ├── scripts ├── build-android.sh └── build-ios.sh ├── src ├── Breadcrumbs │ ├── Breadcrumbs.js │ └── index.js ├── Carousel │ ├── Carousel.js │ ├── Item.js │ └── index.js ├── Counter │ ├── Counter.js │ └── index.js ├── Dash │ ├── Dash.js │ └── index.js ├── Expand │ ├── Expand.js │ └── index.js ├── Label │ ├── Label.js │ └── index.js ├── LabelRating │ ├── LabelRating.js │ └── index.js ├── RangeSlider │ ├── Marker.js │ ├── RangeSlider.js │ ├── converters.js │ └── index.js ├── StarRating │ ├── StarButton.js │ ├── StarRating.js │ └── index.js ├── Tags │ ├── Item.js │ ├── Tags.js │ └── index.js ├── index.js └── utils │ ├── CustomPropTypes.js │ ├── ThemeConstants.js │ ├── ThemeRegister.js │ ├── getComponentName.js │ ├── mapValues.js │ ├── measure.js │ ├── memoize.js │ └── themeable.js └── uiexplorer ├── core ├── Block.js ├── Example.js ├── List.js ├── Navigator.js ├── Page.js ├── Root.js └── utils │ ├── navigation.js │ ├── register.js │ ├── shots.js │ └── testID.js ├── examples ├── Breadcrumbs.js ├── Carousel.js ├── Counter.js ├── Dash.js ├── Expand.js ├── Label.js ├── LabelRating.js ├── RangeSlider.js ├── StarRating.js ├── Tags.js ├── ThemeConstants.js └── index.js ├── img └── Napa-Wine-Map-wine-folly.jpg └── index.js /.appiumhelperrc: -------------------------------------------------------------------------------- 1 | { 2 | "testsGlob": "./__tests__/e2e/*.test.js", 3 | "register": "./__tests__/e2e/setup", 4 | "ios": { 5 | "appPath": "./ios/build/Build/Products/Release-iphonesimulator/TipsiUIKit.app", 6 | "noReset": true 7 | }, 8 | "android": { 9 | "appPath": "./android/app/build/outputs/apk/app-release.apk" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.ci/local-ci.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | set -e 4 | 5 | isMacOS() { 6 | [ "$(uname)" == "Darwin" ] 7 | } 8 | 9 | ################### 10 | # BEFORE INSTALL # 11 | ################### 12 | 13 | # Skip iOS step if current os is not macOS 14 | ! isMacOS && echo "Current os is not macOS, setup for iOS will be skipped" 15 | 16 | ################### 17 | # INSTALL # 18 | ################### 19 | 20 | # Install dependencies 21 | npm install 22 | 23 | ################### 24 | # BEFORE BUILD # 25 | ################### 26 | 27 | # Run appium 28 | (pkill -9 -f appium || true) 29 | npm run appium > /dev/null 2>&1 & 30 | 31 | ################### 32 | # BUILD # 33 | ################### 34 | 35 | # Build Android app 36 | npm run build:android 37 | # Build iOS app 38 | isMacOS && npm run build:ios 39 | 40 | ################### 41 | # TESTS # 42 | ################### 43 | 44 | # Run unit tests 45 | npm run test:unit 46 | # Run Android e2e tests 47 | npm run test:e2e:android 48 | # Run iOS e2e tests 49 | if isMacOS; then 50 | npm run test:e2e:ios 51 | fi 52 | -------------------------------------------------------------------------------- /.ci/travis-before-cache.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | case "${TRAVIS_OS_NAME}" in 4 | linux) 5 | rm -f $HOME/.gradle/caches/modules-2/modules-2.lock 6 | ;; 7 | esac 8 | -------------------------------------------------------------------------------- /.ci/travis-before-ci.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | case "${TRAVIS_OS_NAME}" in 4 | osx) 5 | node_modules/.bin/appium --session-override > appium.out & 6 | ;; 7 | linux) 8 | echo no | android create avd --force -n test -t android-21 --abi armeabi-v7a --skin WVGA800 9 | emulator -avd test -scale 120dpi -dpi-device 160 -no-audio -no-window & 10 | android-wait-for-emulator 11 | sleep 60 12 | adb shell input keyevent 82 & 13 | node_modules/.bin/appium --session-override > appium.out & 14 | ;; 15 | esac 16 | -------------------------------------------------------------------------------- /.ci/travis-before-install.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | $HOME/.nvm/nvm.sh 4 | nvm install 6.8.1 5 | -------------------------------------------------------------------------------- /.ci/travis-ci.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | set -e 4 | 5 | case "${TRAVIS_OS_NAME}" in 6 | osx) 7 | set -o pipefail && npm run build:ios | xcpretty -c -f `xcpretty-travis-formatter` 8 | npm run test:unit 9 | npm run test:e2e:ios 10 | ;; 11 | linux) 12 | npm run build:android 13 | npm run test:unit 14 | npm run test:e2e:android 15 | ;; 16 | esac 17 | -------------------------------------------------------------------------------- /.ci/travis-install.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | npm install 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tipsi" 3 | } 4 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | .*/Libraries/react-native/React.js 15 | .*/Libraries/react-native/ReactNative.js 16 | 17 | [include] 18 | 19 | [libs] 20 | node_modules/react-native/Libraries/react-native/react-native-interface.js 21 | node_modules/react-native/flow 22 | flow/ 23 | 24 | [options] 25 | module.system=haste 26 | 27 | experimental.strict_type_args=true 28 | 29 | munge_underscores=true 30 | 31 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 32 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 33 | 34 | suppress_type=$FlowIssue 35 | suppress_type=$FlowFixMe 36 | suppress_type=$FixMe 37 | 38 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-5]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 39 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-5]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 40 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 41 | 42 | unsafe.enable_getters_and_setters=true 43 | 44 | [version] 45 | ^0.35.0 46 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | 38 | # BUCK 39 | buck-out/ 40 | \.buckd/ 41 | android/app/libs 42 | *.keystore 43 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | __tests__ 2 | scripts 3 | ios 4 | android 5 | storybook 6 | uiexplorer 7 | /index.*.js 8 | .ci 9 | .babelrc 10 | .eslintrc 11 | .buckconfig 12 | .flowconfig 13 | .watchmanconfig 14 | .travis.yml 15 | .appiumhelperrc 16 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | matrix: 2 | include: 3 | - os: osx 4 | language: objective-c 5 | osx_image: xcode8 6 | - os: linux 7 | language: android 8 | jdk: oraclejdk8 9 | sudo: required 10 | android: 11 | components: 12 | - platform-tools 13 | - tools 14 | - build-tools-23.0.1 15 | - android-23 16 | - sys-img-armeabi-v7a-android-23 17 | - extra-android-m2repository 18 | 19 | cache: 20 | directories: 21 | - $HOME/.nvm 22 | - $HOME/.npm 23 | - $HOME/.gradle/caches/ 24 | - $HOME/.gradle/wrapper/ 25 | - node_modules 26 | 27 | before_cache: .ci/travis-before-cache.sh 28 | before_install: . .ci/travis-before-install.sh 29 | install: .ci/travis-install.sh 30 | before_script: .ci/travis-before-ci.sh 31 | script: .ci/travis-ci.sh 32 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tipsi-ui-kit 2 | React Native Tipsi custom UI elements 3 | 4 | ## Components 5 | 6 | ### `` 7 | 8 | Component to change the number by press "+" or "-". 9 | 10 | #### Counter Props 11 | 12 | | Name | Desc | Type | Default 13 | | --- | --- | --- | --- | 14 | | `step` | Step of counting. | Number | `1` 15 | | `defaultValue` | Uncontrolled value of counter. | Number | `0` 16 | | `minValue` | Max value of counter. | Number | `-Infinity` 17 | | `maxValue` | Min value of counter. | Number | `Infinity` 18 | | `value` | Controlled value of counter | Number | `undefined` 19 | | `onValueChange` | Handle value changes. | Function | `() => {}` 20 | 21 | #### Example 22 | 23 | ```js 24 | import React, { PureComponent } from 'react' 25 | import { Counter } from 'tipsi-ui-kit' 26 | 27 | class Example extends PureComponent { 28 | handleValueChange = value => console.log(`Current value is ${value}`) 29 | 30 | render() { 31 | 36 | } 37 | } 38 | ``` 39 | 40 | #### Counter Themes 41 | 42 | Theme structure: 43 | 44 | ```js 45 | { 46 | container: , 47 | button: , 48 | leftButton: , 49 | rightButton: , 50 | buttonText: , 51 | valueWrapper: , 52 | value: , 53 | } 54 | ``` 55 | 56 | #### Preview 57 | 58 | ![counter_ios](https://cloud.githubusercontent.com/assets/4946753/22082704/7eacf3ee-ddd1-11e6-8040-394699796a44.png) 59 | ![counter_android](https://cloud.githubusercontent.com/assets/4946753/22082669/52ff3b8a-ddd1-11e6-8680-3ec0d94eba1a.png) 60 | 61 | ### `` 62 | 63 | Component to draw customisable dashed lines 64 | 65 | #### Dash Props 66 | 67 | | Name | Desc | Type | Default | 68 | | --- | --- | --- | --- | 69 | | `style` | Dash container style as for `View` component | Object | `{flexDirection = 'row'}` | 70 | | `dashGap` | Gap between two dashes | Number | `3.5` | 71 | | `dashLength` | Length of each dash | Number | `3` | 72 | | `dashThickness` | Thickness of each dash | Number | `1` | 73 | | `dashColor` | Color of each dash | String | `#c7d1dc` | 74 | 75 | #### Example 76 | 77 | ```js 78 | import React from 'react' 79 | import { Dash } from 'tipsi-ui-kit' 80 | 81 | const Example = () => ( 82 | 88 | ) 89 | ``` 90 | 91 | #### Preview 92 | 93 | ![dash_ios](https://cloud.githubusercontent.com/assets/1177226/21903147/5d0b07d4-d931-11e6-9ff4-3238f0646d0b.png) 94 | ![dash_android](https://cloud.githubusercontent.com/assets/1177226/21903095/2181a7cc-d931-11e6-9338-17e32c8817ea.png) 95 | 96 | ### `` 97 | 98 | Carousel component 99 | 100 | #### Carousel Props 101 | 102 | | Name | Desc | Type | Default | 103 | | --- | --- | --- | --- | 104 | | `spacer` | Space between last item and right side | Number | `0` | 105 | | `...rest` | All other props for `ScrollView` component except `horizontal` | - | `-` | 106 | 107 | #### Carousel.Item Props 108 | 109 | | Name | Desc | Type | Default | 110 | | --- | --- | --- | --- | 111 | | `active` | Show item as active | Boolean | `false` | 112 | | `onPress` | Handle press action | Function | `undefined` | 113 | | `onRemove` | Handle remove action | Function | `undefined` | 114 | 115 | #### Example 116 | 117 | ```js 118 | import React from 'react' 119 | import { Text } from 'react-native' 120 | import { Carousel } from 'tipsi-ui-kit' 121 | 122 | const Example = () => ( 123 | 124 | 125 | Facebook 126 | 127 | 128 | Twitter 129 | 130 | 131 | Instagram 132 | 133 | 134 | YouTube 135 | 136 | 137 | Tumblr 138 | 139 | 140 | ) 141 | ``` 142 | 143 | #### Carousel Themes 144 | 145 | theme structure: 146 | 147 | ```js 148 | { 149 | container: , 150 | } 151 | ``` 152 | 153 | theme structure: 154 | 155 | ```js 156 | { 157 | container: onPress ? : , 158 | active: , 159 | remove: , 160 | removeIcon: , 161 | removeCircle: , 162 | gap: , 163 | } 164 | ``` 165 | 166 | #### Preview 167 | 168 | ![carousel_ios](https://cloud.githubusercontent.com/assets/1177226/21901928/7a710d78-d92c-11e6-965c-762c2e598811.gif) 169 | ![carousel_android](https://cloud.githubusercontent.com/assets/1177226/21901929/7c64d948-d92c-11e6-8ce5-793f24ec2300.gif) 170 | 171 | ### `` 172 | 173 | #### LabelRating Props 174 | 175 | | Name | Desc | Type | Default | 176 | | --- | --- | --- | --- | 177 | | `title` | [isRequired] Title of rating, which is shown on the left side | String | `-` | 178 | | `rating` | Rating, which is shown on the right side | Number | `0` | 179 | 180 | #### Example 181 | 182 | ```js 183 | import React from 'react' 184 | import { LabelRating } from 'tipsi-ui-kit' 185 | 186 | const Example = () => ( 187 | 191 | ) 192 | ``` 193 | 194 | #### LabelRating Themes 195 | 196 | Theme structure: 197 | 198 | ```js 199 | { 200 | container: , 201 | titleWrapper: , 202 | titleText: , 203 | ratingWrapper: , 204 | ratingText: , 205 | } 206 | ``` 207 | 208 | Default themes: **primary**, **success**, **warning**, **alert** 209 | 210 | #### Preview 211 | 212 | ![labelrating_ios](https://cloud.githubusercontent.com/assets/1177226/22017970/192f9fdc-dcdf-11e6-9ffa-d390480e286f.png) 213 | ![labelrating_android](https://cloud.githubusercontent.com/assets/1177226/22017972/1a7ddbce-dcdf-11e6-921b-8fce9b33d7a7.png) 214 | 215 | ### `