├── .gitignore ├── Gruntfile.js ├── README.md ├── assetServer.js ├── blank.png ├── nwb.config.js ├── package.json ├── public ├── activity.png ├── airplay.png ├── alert-circle.png ├── alert-octagon.png ├── alert-triangle.png ├── align-center.png ├── align-justify.png ├── align-left.png ├── align-right.png ├── anchor.png ├── aperture.png ├── arrow-down-left.png ├── arrow-down-right.png ├── arrow-down.png ├── arrow-left.png ├── arrow-right.png ├── arrow-up-left.png ├── arrow-up-right.png ├── arrow-up.png ├── at-sign.png ├── award.png ├── bar-chart-2.png ├── bar-chart.png ├── battery-charging.png ├── battery.png ├── bell-off.png ├── bell.png ├── bluetooth.png ├── book.png ├── bookmark.png ├── box.png ├── briefcase.png ├── calendar.png ├── camera-off.png ├── camera.png ├── cast.png ├── check-circle.png ├── check-square.png ├── check.png ├── chevron-down.png ├── chevron-left.png ├── chevron-right.png ├── chevron-up.png ├── chevrons-down.png ├── chevrons-left.png ├── chevrons-right.png ├── chevrons-up.png ├── chrome.png ├── circle.png ├── clipboard.png ├── clock.png ├── cloud-drizzle.png ├── cloud-lightning.png ├── cloud-off.png ├── cloud-rain.png ├── cloud-snow.png ├── cloud.png ├── codepen.png ├── command.png ├── compass.png ├── copy.png ├── corner-down-left.png ├── corner-down-right.png ├── corner-left-down.png ├── corner-left-up.png ├── corner-right-down.png ├── corner-right-up.png ├── corner-up-left.png ├── corner-up-right.png ├── cpu.png ├── credit-card.png ├── crosshair.png ├── delete.png ├── disc.png ├── download-cloud.png ├── download.png ├── droplet.png ├── edit-2.png ├── edit-3.png ├── edit.png ├── external-link.png ├── eye-off.png ├── eye.png ├── facebook.png ├── fast-forward.png ├── feather.png ├── file-minus.png ├── file-plus.png ├── file-text.png ├── file.png ├── film.png ├── filter.png ├── flag.png ├── folder.png ├── github.png ├── globe.png ├── grid.png ├── hash.png ├── headphones.png ├── heart.png ├── home.png ├── image.png ├── inbox.png ├── info.png ├── instagram.png ├── layers.png ├── layout.png ├── life-buoy.png ├── link-2.png ├── link.png ├── list.png ├── loader.png ├── lock.png ├── log-in.png ├── log-out.png ├── mail.png ├── map-pin.png ├── map.png ├── maximize-2.png ├── maximize.png ├── menu.png ├── message-circle.png ├── message-square.png ├── mic-off.png ├── mic.png ├── minimize-2.png ├── minimize.png ├── minus-circle.png ├── minus-square.png ├── minus.png ├── monitor.png ├── moon.png ├── more-horizontal.png ├── more-vertical.png ├── move.png ├── music.png ├── navigation-2.png ├── navigation.png ├── octagon.png ├── package.png ├── pause-circle.png ├── pause.png ├── percent.png ├── phone-call.png ├── phone-forwarded.png ├── phone-incoming.png ├── phone-missed.png ├── phone-off.png ├── phone-outgoing.png ├── phone.png ├── pie-chart.png ├── play-circle.png ├── play.png ├── plus-circle.png ├── plus-square.png ├── plus.png ├── pocket.png ├── power.png ├── printer.png ├── radio.png ├── refresh-ccw.png ├── refresh-cw.png ├── repeat.png ├── rewind.png ├── rotate-ccw.png ├── rotate-cw.png ├── save.png ├── scissors.png ├── search.png ├── server.png ├── settings.png ├── share-2.png ├── share.png ├── shield.png ├── shuffle.png ├── sidebar.png ├── skip-back.png ├── skip-forward.png ├── slack.png ├── slash.png ├── smartphone.png ├── speaker.png ├── square.png ├── star.png ├── stop-circle.png ├── sun.png ├── sunrise.png ├── sunset.png ├── tablet.png ├── tag.png ├── target.png ├── thermometer.png ├── thumbs-down.png ├── thumbs-up.png ├── toggle-left.png ├── toggle-right.png ├── trash-2.png ├── trash.png ├── trending-down.png ├── trending-up.png ├── triangle.png ├── twitter.png ├── type.png ├── umbrella.png ├── unlock.png ├── upload-cloud.png ├── upload.png ├── user-check.png ├── user-minus.png ├── user-plus.png ├── user-x.png ├── user.png ├── users.png ├── video-off.png ├── video.png ├── voicemail.png ├── volume-1.png ├── volume-2.png ├── volume-x.png ├── volume.png ├── watch.png ├── wifi.png ├── wind.png ├── x-circle.png ├── x-square.png ├── x.png ├── zap.png ├── zoom-in.png └── zoom-out.png ├── src ├── Catalog.js ├── components │ ├── Avatar.js │ ├── Bounds.js │ ├── Card.js │ ├── Chip.js │ ├── Chunk.js │ ├── DumbButton.js │ ├── Flex.js │ ├── FlexItem.js │ ├── Icon.js │ ├── Inline.js │ ├── Link.js │ ├── Link.sketch.js │ ├── List.js │ ├── Menu.js │ ├── Modal.js │ ├── Picker.js │ ├── Picker.sketch.js │ ├── Section.js │ ├── Stripe.js │ ├── Tabs.js │ ├── TextInput.js │ ├── TextInput.sketch.js │ ├── Toast.js │ └── WithMatchMedia.js ├── designConstants.js ├── index.html ├── index.ios.js ├── index.sketch.js ├── index.web.js ├── manifest.json └── styles │ ├── flex.js │ ├── styles.js │ └── swatches.js └── universal-render.sketchplugin └── Contents └── Sketch ├── index.sketch.js └── manifest.json /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .idea/ 3 | # OSX 4 | # 5 | .DS_Store 6 | 7 | # Xcode 8 | # 9 | DerivedData 10 | *.hmap 11 | *.ipa 12 | *.xcuserstate 13 | project.xcworkspace 14 | 15 | # BUCK 16 | buck-out/ 17 | \.buckd/ 18 | android/app/libs 19 | *.keystore 20 | 21 | # fastlane 22 | # 23 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 24 | # screenshots whenever they are needed. 25 | # For more information about the recommended setup visit: 26 | # https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md 27 | 28 | fastlane/report.xml 29 | fastlane/Preview.html 30 | fastlane/screenshots 31 | 32 | 33 | ### Xcode ### 34 | # Xcode 35 | # 36 | # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore 37 | 38 | ## Build generated 39 | build/ 40 | DerivedData/ 41 | 42 | ## Various settings 43 | *.pbxuser 44 | !default.pbxuser 45 | *.mode1v3 46 | !default.mode1v3 47 | *.mode2v3 48 | !default.mode2v3 49 | *.perspectivev3 50 | !default.perspectivev3 51 | xcuserdata/ 52 | 53 | ## Other 54 | *.moved-aside 55 | *.xccheckout 56 | *.xcscmblueprint 57 | 58 | 59 | ### Android ### 60 | # Built application files 61 | *.apk 62 | *.ap_ 63 | 64 | # Files for the ART/Dalvik VM 65 | *.dex 66 | 67 | # Java class files 68 | *.class 69 | 70 | # Generated files 71 | bin/ 72 | gen/ 73 | out/ 74 | 75 | # Gradle files 76 | .gradle/ 77 | 78 | # Local configuration file (sdk path, etc) 79 | local.properties 80 | 81 | # Proguard folder generated by Eclipse 82 | proguard/ 83 | 84 | # Log Files 85 | *.log 86 | 87 | # Android Studio Navigation editor temp files 88 | .navigation/ 89 | 90 | # Android Studio captures folder 91 | captures/ 92 | 93 | # Intellij 94 | *.iml 95 | .idea/workspace.xml 96 | .idea/tasks.xml 97 | .idea/libraries 98 | 99 | # Keystore files 100 | *.jks 101 | 102 | # External native build folder generated in Android Studio 2.2 and later 103 | .externalNativeBuild 104 | 105 | ### Android Patch ### 106 | gen-external-apklibs 107 | 108 | 109 | ### Intellij ### 110 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 111 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 112 | 113 | # User-specific stuff: 114 | 115 | # Sensitive or high-churn files: 116 | .idea/dataSources/ 117 | .idea/dataSources.ids 118 | .idea/dataSources.xml 119 | .idea/dataSources.local.xml 120 | .idea/sqlDataSources.xml 121 | .idea/dynamic.xml 122 | .idea/uiDesigner.xml 123 | 124 | # Gradle: 125 | .idea/gradle.xml 126 | 127 | # Mongo Explorer plugin: 128 | .idea/mongoSettings.xml 129 | 130 | ## File-based project format: 131 | *.iws 132 | 133 | ## Plugin-specific files: 134 | 135 | # IntelliJ 136 | /out/ 137 | 138 | # mpeltonen/sbt-idea plugin 139 | .idea_modules/ 140 | 141 | # JIRA plugin 142 | atlassian-ide-plugin.xml 143 | 144 | # Crashlytics plugin (for Android Studio and IntelliJ) 145 | com_crashlytics_export_strings.xml 146 | crashlytics.properties 147 | crashlytics-build.properties 148 | fabric.properties 149 | 150 | ### Intellij Patch ### 151 | # Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721 152 | 153 | # *.iml 154 | # modules.xml 155 | # .idea/misc.xml 156 | # *.ipr 157 | 158 | 159 | ### WebStorm ### 160 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 161 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 162 | 163 | # User-specific stuff: 164 | 165 | # Sensitive or high-churn files: 166 | 167 | # Gradle: 168 | 169 | # Mongo Explorer plugin: 170 | 171 | ## File-based project format: 172 | 173 | ## Plugin-specific files: 174 | 175 | # IntelliJ 176 | 177 | # mpeltonen/sbt-idea plugin 178 | 179 | # JIRA plugin 180 | 181 | # Crashlytics plugin (for Android Studio and IntelliJ) 182 | 183 | ### WebStorm Patch ### 184 | # Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721 185 | 186 | # *.iml 187 | # modules.xml 188 | # .idea/misc.xml 189 | # *.ipr 190 | 191 | 192 | ### Node ### 193 | # Logs 194 | logs 195 | npm-debug.log* 196 | 197 | # Runtime data 198 | pids 199 | *.pid 200 | *.seed 201 | *.pid.lock 202 | 203 | # Directory for instrumented libs generated by jscoverage/JSCover 204 | lib-cov 205 | 206 | # Coverage directory used by tools like istanbul 207 | coverage 208 | 209 | # nyc test coverage 210 | .nyc_output 211 | 212 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 213 | .grunt 214 | 215 | # node-waf configuration 216 | .lock-wscript 217 | 218 | # Compiled binary addons (http://nodejs.org/api/addons.html) 219 | build/Release 220 | 221 | # Dependency directories 222 | node_modules 223 | jspm_packages 224 | 225 | # Optional npm cache directory 226 | .npm 227 | 228 | # Optional eslint cache 229 | .eslintcache 230 | 231 | # Optional REPL history 232 | .node_repl_history 233 | 234 | # Output of 'npm pack' 235 | *.tgz 236 | 237 | # Yarn Integrity file 238 | .yarn-integrity 239 | 240 | 241 | 242 | ### Bower ### 243 | bower_components 244 | .bower-cache 245 | .bower-registry 246 | .bower-tmp 247 | 248 | dist/ 249 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | grunt.loadNpmTasks('grunt-svgmin'); 4 | grunt.loadNpmTasks('grunt-svgstore'); 5 | grunt.loadNpmTasks('grunt-contrib-clean'); 6 | grunt.loadNpmTasks('grunt-convert-svg-to-png'); 7 | grunt.loadNpmTasks('grunt-filenames-to-json'); 8 | 9 | // how to make svgs nice: 10 | // optimize your svgs into a folder 11 | // create an svg sprite 12 | // if you really want to be fancy, xhr the sprite into the document to allow caching 13 | 14 | 15 | // reference the node_modules package 16 | // go through child folders 17 | var SRC = 'node_modules/feather-icons/icons/', 18 | SRC_REGEX = '**/*.svg'; 19 | 20 | var DIST = 'dist/', 21 | DIST_OPTIMIZED = `${DIST}optimized/`, 22 | DIST_PNG = `public/`, 23 | DIST_SPRITE = `${DIST}sprite/`; 24 | 25 | 26 | grunt.initConfig({ 27 | package: grunt.file.readJSON('package.json'), 28 | 29 | // 30 | // CLEAN 31 | // removes all distrubtions prior to rebuilding 32 | // 33 | 'clean': { 34 | all: [ 35 | DIST_OPTIMIZED, 36 | DIST_SPRITE, 37 | ], 38 | }, 39 | 40 | // 41 | // SVG optimization 42 | // Gets rid of extra svg nonsense 43 | // "flatten" puts everything from the folders into one folder 44 | // 45 | 'svgmin': { 46 | options: { 47 | plugins: [ 48 | { removeDesc: true }, 49 | { removeViewbox: false }, 50 | { mergePaths: false }, 51 | { convertShapeToPath: false }, 52 | { removeAttrs: {attrs: '(stroke)'} }, 53 | ] 54 | }, 55 | dist: { 56 | files: [{ 57 | expand: true, 58 | flatten: true, 59 | cwd: SRC, 60 | src: [SRC_REGEX], 61 | dest: DIST_OPTIMIZED 62 | }] 63 | } 64 | }, 65 | 66 | // 67 | // SVG sprite 68 | // For including in HTML 69 | // 70 | 'svgstore': { 71 | options: { 72 | prefix: 'icon-' 73 | }, 74 | default: { 75 | files: [{ 76 | src: [`${DIST_OPTIMIZED}*.svg`], 77 | dest: `${DIST_SPRITE}sprite.inc` 78 | }] 79 | } 80 | }, 81 | 82 | 'convert-svg-to-png': { 83 | fallback: { 84 | options: { 85 | size: {w: 100, h: 100}, 86 | }, 87 | files: [{ 88 | flatten: true, 89 | expand: true, 90 | cwd: SRC, 91 | src: [SRC_REGEX], 92 | dest: DIST_PNG 93 | }] 94 | } 95 | }, 96 | 97 | filenamesToJson : { 98 | options : { 99 | // true if full path should be included, default is false 100 | fullPath : false, 101 | // true if file extension should be included, default is false 102 | extensions : false 103 | }, 104 | // any valid glob 105 | files : '**/js', 106 | 107 | // path to write json to 108 | destination : `${DIST}/output.json` 109 | } 110 | 111 | }); 112 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | install dependencies 2 | ``` 3 | brew install imagemagick 4 | npm install 5 | ``` 6 | 7 | build test icon assets 8 | ``` 9 | grunt svgmin 10 | grunt svgstore 11 | grunt convert-svg-to-png 12 | ``` 13 | 14 | sketchapp render test 15 | ``` 16 | node assetServer.js 17 | npm run render 18 | ``` 19 | 20 | web render test 21 | ``` 22 | npm run web 23 | ``` 24 | 25 | ![wooo](http://i.imgur.com/wdaYJCk.png) 26 | -------------------------------------------------------------------------------- /assetServer.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var path = require('path'); 3 | var gm = require('gm').subClass({imageMagick: true}); 4 | 5 | var app = express(); 6 | 7 | // serve colorized png 8 | app.get('/:shape?', function(req, res){ 9 | var { shape = 'feather' } = req.params; 10 | var { color = 'purple' } = req.query 11 | var filename = path.join(__dirname, `public/${shape}.png`); 12 | gm(filename) 13 | .fill(color) 14 | .colorize(100) 15 | .stream() 16 | .pipe(res); 17 | }); 18 | 19 | // start server 20 | app.set('port', 4000); 21 | var server = app.listen(app.get('port'), function() { 22 | var port = server.address().port; 23 | console.log('Magic happens on port ' + port); 24 | }); 25 | -------------------------------------------------------------------------------- /blank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/blank.png -------------------------------------------------------------------------------- /nwb.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | type: 'react-app', 3 | webpack: { 4 | module: { 5 | rules: [{ 6 | test: /\.(inc)$/, 7 | loader: 'raw-loader' 8 | }] 9 | }, 10 | } 11 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "universal-render", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "universal-render.sketchplugin", 6 | "manifest": "src/manifest.json", 7 | "scripts": { 8 | "build": "skpm build", 9 | "watch": "skpm build --watch", 10 | "render": "skpm build --watch --run", 11 | "render:once": "skpm build --run", 12 | "web": "nwb react run src/index.web.js", 13 | "link-plugin": "skpm link", 14 | "native": "node node_modules/react-native/local-cli/cli.js start" 15 | }, 16 | "author": "Jon Gold ", 17 | "license": "MIT", 18 | "devDependencies": { 19 | "skpm": "^0.9.0" 20 | }, 21 | "dependencies": { 22 | "nwb": "^0.16.3", 23 | "prop-types": "^15.5.8", 24 | "react": "^15.6.1", 25 | "react-dom": "^15.6.1", 26 | "react-native": "^0.42.3", 27 | "react-primitives": "^0.4.3", 28 | "react-primitives-google-static-map": "^1.0.1", 29 | "react-sketchapp": "^0.12.1", 30 | "react-test-renderer": "^15.4.2", 31 | "grunt": "^0.4.0", 32 | "grunt-svgmin": "^4.0.0", 33 | "grunt-svgstore": "^1.0.0", 34 | "grunt-contrib-clean": "^1.1.0", 35 | "grunt-convert-svg-to-png": "^1.1.0", 36 | "grunt-filenames-to-json": "^0.1.3", 37 | "gm": "^1.23.0", 38 | "raw-loader": "^0.5.1", 39 | "feather-icons": "*" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /public/activity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/activity.png -------------------------------------------------------------------------------- /public/airplay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/airplay.png -------------------------------------------------------------------------------- /public/alert-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/alert-circle.png -------------------------------------------------------------------------------- /public/alert-octagon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/alert-octagon.png -------------------------------------------------------------------------------- /public/alert-triangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/alert-triangle.png -------------------------------------------------------------------------------- /public/align-center.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/align-center.png -------------------------------------------------------------------------------- /public/align-justify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/align-justify.png -------------------------------------------------------------------------------- /public/align-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/align-left.png -------------------------------------------------------------------------------- /public/align-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/align-right.png -------------------------------------------------------------------------------- /public/anchor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/anchor.png -------------------------------------------------------------------------------- /public/aperture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/aperture.png -------------------------------------------------------------------------------- /public/arrow-down-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/arrow-down-left.png -------------------------------------------------------------------------------- /public/arrow-down-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/arrow-down-right.png -------------------------------------------------------------------------------- /public/arrow-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/arrow-down.png -------------------------------------------------------------------------------- /public/arrow-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/arrow-left.png -------------------------------------------------------------------------------- /public/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/arrow-right.png -------------------------------------------------------------------------------- /public/arrow-up-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/arrow-up-left.png -------------------------------------------------------------------------------- /public/arrow-up-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/arrow-up-right.png -------------------------------------------------------------------------------- /public/arrow-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/arrow-up.png -------------------------------------------------------------------------------- /public/at-sign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/at-sign.png -------------------------------------------------------------------------------- /public/award.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/award.png -------------------------------------------------------------------------------- /public/bar-chart-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/bar-chart-2.png -------------------------------------------------------------------------------- /public/bar-chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/bar-chart.png -------------------------------------------------------------------------------- /public/battery-charging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/battery-charging.png -------------------------------------------------------------------------------- /public/battery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/battery.png -------------------------------------------------------------------------------- /public/bell-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/bell-off.png -------------------------------------------------------------------------------- /public/bell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/bell.png -------------------------------------------------------------------------------- /public/bluetooth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/bluetooth.png -------------------------------------------------------------------------------- /public/book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/book.png -------------------------------------------------------------------------------- /public/bookmark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/bookmark.png -------------------------------------------------------------------------------- /public/box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/box.png -------------------------------------------------------------------------------- /public/briefcase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/briefcase.png -------------------------------------------------------------------------------- /public/calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/calendar.png -------------------------------------------------------------------------------- /public/camera-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/camera-off.png -------------------------------------------------------------------------------- /public/camera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/camera.png -------------------------------------------------------------------------------- /public/cast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/cast.png -------------------------------------------------------------------------------- /public/check-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/check-circle.png -------------------------------------------------------------------------------- /public/check-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/check-square.png -------------------------------------------------------------------------------- /public/check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/check.png -------------------------------------------------------------------------------- /public/chevron-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/chevron-down.png -------------------------------------------------------------------------------- /public/chevron-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/chevron-left.png -------------------------------------------------------------------------------- /public/chevron-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/chevron-right.png -------------------------------------------------------------------------------- /public/chevron-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/chevron-up.png -------------------------------------------------------------------------------- /public/chevrons-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/chevrons-down.png -------------------------------------------------------------------------------- /public/chevrons-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/chevrons-left.png -------------------------------------------------------------------------------- /public/chevrons-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/chevrons-right.png -------------------------------------------------------------------------------- /public/chevrons-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/chevrons-up.png -------------------------------------------------------------------------------- /public/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/chrome.png -------------------------------------------------------------------------------- /public/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/circle.png -------------------------------------------------------------------------------- /public/clipboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/clipboard.png -------------------------------------------------------------------------------- /public/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/clock.png -------------------------------------------------------------------------------- /public/cloud-drizzle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/cloud-drizzle.png -------------------------------------------------------------------------------- /public/cloud-lightning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/cloud-lightning.png -------------------------------------------------------------------------------- /public/cloud-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/cloud-off.png -------------------------------------------------------------------------------- /public/cloud-rain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/cloud-rain.png -------------------------------------------------------------------------------- /public/cloud-snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/cloud-snow.png -------------------------------------------------------------------------------- /public/cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/cloud.png -------------------------------------------------------------------------------- /public/codepen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/codepen.png -------------------------------------------------------------------------------- /public/command.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/command.png -------------------------------------------------------------------------------- /public/compass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/compass.png -------------------------------------------------------------------------------- /public/copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/copy.png -------------------------------------------------------------------------------- /public/corner-down-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/corner-down-left.png -------------------------------------------------------------------------------- /public/corner-down-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/corner-down-right.png -------------------------------------------------------------------------------- /public/corner-left-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/corner-left-down.png -------------------------------------------------------------------------------- /public/corner-left-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/corner-left-up.png -------------------------------------------------------------------------------- /public/corner-right-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/corner-right-down.png -------------------------------------------------------------------------------- /public/corner-right-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/corner-right-up.png -------------------------------------------------------------------------------- /public/corner-up-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/corner-up-left.png -------------------------------------------------------------------------------- /public/corner-up-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/corner-up-right.png -------------------------------------------------------------------------------- /public/cpu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/cpu.png -------------------------------------------------------------------------------- /public/credit-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/credit-card.png -------------------------------------------------------------------------------- /public/crosshair.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/crosshair.png -------------------------------------------------------------------------------- /public/delete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/delete.png -------------------------------------------------------------------------------- /public/disc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/disc.png -------------------------------------------------------------------------------- /public/download-cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/download-cloud.png -------------------------------------------------------------------------------- /public/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/download.png -------------------------------------------------------------------------------- /public/droplet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/droplet.png -------------------------------------------------------------------------------- /public/edit-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/edit-2.png -------------------------------------------------------------------------------- /public/edit-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/edit-3.png -------------------------------------------------------------------------------- /public/edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/edit.png -------------------------------------------------------------------------------- /public/external-link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/external-link.png -------------------------------------------------------------------------------- /public/eye-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/eye-off.png -------------------------------------------------------------------------------- /public/eye.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/eye.png -------------------------------------------------------------------------------- /public/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/facebook.png -------------------------------------------------------------------------------- /public/fast-forward.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/fast-forward.png -------------------------------------------------------------------------------- /public/feather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/feather.png -------------------------------------------------------------------------------- /public/file-minus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/file-minus.png -------------------------------------------------------------------------------- /public/file-plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/file-plus.png -------------------------------------------------------------------------------- /public/file-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/file-text.png -------------------------------------------------------------------------------- /public/file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/file.png -------------------------------------------------------------------------------- /public/film.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/film.png -------------------------------------------------------------------------------- /public/filter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/filter.png -------------------------------------------------------------------------------- /public/flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/flag.png -------------------------------------------------------------------------------- /public/folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/folder.png -------------------------------------------------------------------------------- /public/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/github.png -------------------------------------------------------------------------------- /public/globe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/globe.png -------------------------------------------------------------------------------- /public/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/grid.png -------------------------------------------------------------------------------- /public/hash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/hash.png -------------------------------------------------------------------------------- /public/headphones.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/headphones.png -------------------------------------------------------------------------------- /public/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/heart.png -------------------------------------------------------------------------------- /public/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/home.png -------------------------------------------------------------------------------- /public/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/image.png -------------------------------------------------------------------------------- /public/inbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/inbox.png -------------------------------------------------------------------------------- /public/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/info.png -------------------------------------------------------------------------------- /public/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/instagram.png -------------------------------------------------------------------------------- /public/layers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/layers.png -------------------------------------------------------------------------------- /public/layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/layout.png -------------------------------------------------------------------------------- /public/life-buoy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/life-buoy.png -------------------------------------------------------------------------------- /public/link-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/link-2.png -------------------------------------------------------------------------------- /public/link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/link.png -------------------------------------------------------------------------------- /public/list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/list.png -------------------------------------------------------------------------------- /public/loader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/loader.png -------------------------------------------------------------------------------- /public/lock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/lock.png -------------------------------------------------------------------------------- /public/log-in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/log-in.png -------------------------------------------------------------------------------- /public/log-out.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/log-out.png -------------------------------------------------------------------------------- /public/mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/mail.png -------------------------------------------------------------------------------- /public/map-pin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/map-pin.png -------------------------------------------------------------------------------- /public/map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/map.png -------------------------------------------------------------------------------- /public/maximize-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/maximize-2.png -------------------------------------------------------------------------------- /public/maximize.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/maximize.png -------------------------------------------------------------------------------- /public/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/menu.png -------------------------------------------------------------------------------- /public/message-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/message-circle.png -------------------------------------------------------------------------------- /public/message-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/message-square.png -------------------------------------------------------------------------------- /public/mic-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/mic-off.png -------------------------------------------------------------------------------- /public/mic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/mic.png -------------------------------------------------------------------------------- /public/minimize-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/minimize-2.png -------------------------------------------------------------------------------- /public/minimize.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/minimize.png -------------------------------------------------------------------------------- /public/minus-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/minus-circle.png -------------------------------------------------------------------------------- /public/minus-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/minus-square.png -------------------------------------------------------------------------------- /public/minus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/minus.png -------------------------------------------------------------------------------- /public/monitor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/monitor.png -------------------------------------------------------------------------------- /public/moon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/moon.png -------------------------------------------------------------------------------- /public/more-horizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/more-horizontal.png -------------------------------------------------------------------------------- /public/more-vertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/more-vertical.png -------------------------------------------------------------------------------- /public/move.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/move.png -------------------------------------------------------------------------------- /public/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/music.png -------------------------------------------------------------------------------- /public/navigation-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/navigation-2.png -------------------------------------------------------------------------------- /public/navigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/navigation.png -------------------------------------------------------------------------------- /public/octagon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/octagon.png -------------------------------------------------------------------------------- /public/package.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/package.png -------------------------------------------------------------------------------- /public/pause-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/pause-circle.png -------------------------------------------------------------------------------- /public/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/pause.png -------------------------------------------------------------------------------- /public/percent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/percent.png -------------------------------------------------------------------------------- /public/phone-call.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/phone-call.png -------------------------------------------------------------------------------- /public/phone-forwarded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/phone-forwarded.png -------------------------------------------------------------------------------- /public/phone-incoming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/phone-incoming.png -------------------------------------------------------------------------------- /public/phone-missed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/phone-missed.png -------------------------------------------------------------------------------- /public/phone-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/phone-off.png -------------------------------------------------------------------------------- /public/phone-outgoing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/phone-outgoing.png -------------------------------------------------------------------------------- /public/phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/phone.png -------------------------------------------------------------------------------- /public/pie-chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/pie-chart.png -------------------------------------------------------------------------------- /public/play-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/play-circle.png -------------------------------------------------------------------------------- /public/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/play.png -------------------------------------------------------------------------------- /public/plus-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/plus-circle.png -------------------------------------------------------------------------------- /public/plus-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/plus-square.png -------------------------------------------------------------------------------- /public/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/plus.png -------------------------------------------------------------------------------- /public/pocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/pocket.png -------------------------------------------------------------------------------- /public/power.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/power.png -------------------------------------------------------------------------------- /public/printer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/printer.png -------------------------------------------------------------------------------- /public/radio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/radio.png -------------------------------------------------------------------------------- /public/refresh-ccw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/refresh-ccw.png -------------------------------------------------------------------------------- /public/refresh-cw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/refresh-cw.png -------------------------------------------------------------------------------- /public/repeat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/repeat.png -------------------------------------------------------------------------------- /public/rewind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/rewind.png -------------------------------------------------------------------------------- /public/rotate-ccw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/rotate-ccw.png -------------------------------------------------------------------------------- /public/rotate-cw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/rotate-cw.png -------------------------------------------------------------------------------- /public/save.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/save.png -------------------------------------------------------------------------------- /public/scissors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/scissors.png -------------------------------------------------------------------------------- /public/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/search.png -------------------------------------------------------------------------------- /public/server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/server.png -------------------------------------------------------------------------------- /public/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/settings.png -------------------------------------------------------------------------------- /public/share-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/share-2.png -------------------------------------------------------------------------------- /public/share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/share.png -------------------------------------------------------------------------------- /public/shield.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/shield.png -------------------------------------------------------------------------------- /public/shuffle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/shuffle.png -------------------------------------------------------------------------------- /public/sidebar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/sidebar.png -------------------------------------------------------------------------------- /public/skip-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/skip-back.png -------------------------------------------------------------------------------- /public/skip-forward.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/skip-forward.png -------------------------------------------------------------------------------- /public/slack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/slack.png -------------------------------------------------------------------------------- /public/slash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/slash.png -------------------------------------------------------------------------------- /public/smartphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/smartphone.png -------------------------------------------------------------------------------- /public/speaker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/speaker.png -------------------------------------------------------------------------------- /public/square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/square.png -------------------------------------------------------------------------------- /public/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/star.png -------------------------------------------------------------------------------- /public/stop-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/stop-circle.png -------------------------------------------------------------------------------- /public/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/sun.png -------------------------------------------------------------------------------- /public/sunrise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/sunrise.png -------------------------------------------------------------------------------- /public/sunset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/sunset.png -------------------------------------------------------------------------------- /public/tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/tablet.png -------------------------------------------------------------------------------- /public/tag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/tag.png -------------------------------------------------------------------------------- /public/target.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/target.png -------------------------------------------------------------------------------- /public/thermometer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/thermometer.png -------------------------------------------------------------------------------- /public/thumbs-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/thumbs-down.png -------------------------------------------------------------------------------- /public/thumbs-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/thumbs-up.png -------------------------------------------------------------------------------- /public/toggle-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/toggle-left.png -------------------------------------------------------------------------------- /public/toggle-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/toggle-right.png -------------------------------------------------------------------------------- /public/trash-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/trash-2.png -------------------------------------------------------------------------------- /public/trash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/trash.png -------------------------------------------------------------------------------- /public/trending-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/trending-down.png -------------------------------------------------------------------------------- /public/trending-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/trending-up.png -------------------------------------------------------------------------------- /public/triangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/triangle.png -------------------------------------------------------------------------------- /public/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/twitter.png -------------------------------------------------------------------------------- /public/type.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/type.png -------------------------------------------------------------------------------- /public/umbrella.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/umbrella.png -------------------------------------------------------------------------------- /public/unlock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/unlock.png -------------------------------------------------------------------------------- /public/upload-cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/upload-cloud.png -------------------------------------------------------------------------------- /public/upload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/upload.png -------------------------------------------------------------------------------- /public/user-check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/user-check.png -------------------------------------------------------------------------------- /public/user-minus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/user-minus.png -------------------------------------------------------------------------------- /public/user-plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/user-plus.png -------------------------------------------------------------------------------- /public/user-x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/user-x.png -------------------------------------------------------------------------------- /public/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/user.png -------------------------------------------------------------------------------- /public/users.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/users.png -------------------------------------------------------------------------------- /public/video-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/video-off.png -------------------------------------------------------------------------------- /public/video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/video.png -------------------------------------------------------------------------------- /public/voicemail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/voicemail.png -------------------------------------------------------------------------------- /public/volume-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/volume-1.png -------------------------------------------------------------------------------- /public/volume-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/volume-2.png -------------------------------------------------------------------------------- /public/volume-x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/volume-x.png -------------------------------------------------------------------------------- /public/volume.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/volume.png -------------------------------------------------------------------------------- /public/watch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/watch.png -------------------------------------------------------------------------------- /public/wifi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/wifi.png -------------------------------------------------------------------------------- /public/wind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/wind.png -------------------------------------------------------------------------------- /public/x-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/x-circle.png -------------------------------------------------------------------------------- /public/x-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/x-square.png -------------------------------------------------------------------------------- /public/x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/x.png -------------------------------------------------------------------------------- /public/zap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/zap.png -------------------------------------------------------------------------------- /public/zoom-in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/zoom-in.png -------------------------------------------------------------------------------- /public/zoom-out.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rxb/universal-rendering/45313ad9a33ce01fe009a2080f155078f8608447/public/zoom-out.png -------------------------------------------------------------------------------- /src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, Image, StyleSheet } from 'react-primitives'; 3 | import styles from './styles/styles'; 4 | 5 | import DumbButton from './components/DumbButton'; 6 | import Stripe from './components/Stripe'; 7 | import Bounds from './components/Bounds'; 8 | import Section from './components/Section'; 9 | import Chunk from './components/Chunk'; 10 | import Flex from './components/Flex'; 11 | import FlexItem from './components/FlexItem'; 12 | import Avatar from './components/Avatar'; 13 | import Icon from './components/Icon'; 14 | import TextInput from './components/TextInput'; 15 | import Picker from './components/Picker'; 16 | import List from './components/List'; 17 | import Card from './components/Card'; 18 | import Chip from './components/Chip'; 19 | import Inline from './components/Inline'; 20 | import Tabs from './components/Tabs'; 21 | import Link from './components/Link'; 22 | import Modal from './components/Modal'; 23 | import Toast from './components/Toast'; 24 | 25 | 26 | const people = [ 27 | {name: 'Sally Somebody'}, 28 | {name: 'Norman Nobody'}, 29 | {name: 'Evan Everybody'}, 30 | {name: 'Walt Whatever'}, 31 | {name: 'Fred Fakeperson'}, 32 | {name: 'Andy Avatar'} 33 | ] 34 | 35 | 36 | 37 | class Catalog extends React.Component { 38 | 39 | constructor(props) { 40 | super(props); 41 | this.state = { 42 | selectedPerson: 0, 43 | showModal: false 44 | } 45 | } 46 | 47 | render() { 48 | return( 49 | 50 | 51 | 52 | 53 | 54 |
55 | 56 | {/* something here? */} 57 | 58 |
59 | 60 | 61 | 62 | 63 | 64 |
65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
82 |
83 | 84 | Here we go!!! 85 | 86 | 87 | Please work 88 | Please work 89 | 90 | 91 | 92 | 93 | 94 | 95 |
96 |
97 | 98 | 99 | 100 | { 102 | this.setState({showModal: !this.state.showModal}); 103 | }}> 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 |
132 | 133 |
134 | 135 |
136 | 137 | 141 | 142 | 143 | Oh look it's a card 144 | 145 |
146 | 147 |
148 | 149 |
150 | 151 | { 153 | this.setState({ 154 | tabValue: tabValue, 155 | listVariant: tabValue 156 | }) 157 | }} 158 | fullWidth 159 | selectedValue={this.state.tabValue} 160 | > 161 | 162 | 163 | 164 | 165 | 166 | 167 | {/* 168 | - linear list 169 | inline inline block list 170 | hscroll scrolling inline block list 171 | grid grid list 172 | 173 | */} 174 | 175 | { 179 | return( 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | { 190 | this.setState({selectedPerson: i}) 191 | }}> 192 | 193 | {item.name} 194 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 195 | 196 | 197 | 198 | 199 | 200 | { 202 | alert(`Hey, ${item.name}!`); 203 | }}> 204 | 205 | 206 | 207 | 208 | ); 209 | }} 210 | /> 211 | 212 |
213 |
214 | 215 | 216 | { (['option one', 'option two', 'option three', 'option four']).map((item, i)=>{ 217 | return( 218 | 219 | ); 220 | }) } 221 | 222 | 223 | 224 | 227 | 228 | 229 | 233 | 234 |
235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | this.setState({showModal: false}) } 245 | > 246 |
247 | 248 | Modal 249 | 250 | 251 | Hey y'all I'm a modal 252 | 253 |
254 |
255 | 256 | { 258 | this.setState({showModal: false}); 259 | }}> 260 | 261 | 262 | 263 |
264 | 265 | 266 | 267 | 268 | ); 269 | } 270 | }; 271 | 272 | export default Catalog; -------------------------------------------------------------------------------- /src/components/Avatar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Image } from 'react-primitives'; 3 | import PropTypes from 'prop-types'; 4 | import styles from '../styles/styles'; 5 | 6 | class Avatar extends React.Component { 7 | render() { 8 | const { 9 | size, 10 | source 11 | } = this.props; 12 | 13 | const style = styles[`avatar--${size}`]; 14 | 15 | return( 16 | 20 | ); 21 | } 22 | } 23 | 24 | Avatar.defaultProps = { 25 | size: 'medium', 26 | }; 27 | 28 | Avatar.propTypes = { 29 | size: PropTypes.oneOf(['small', 'medium', 'large']), 30 | source: PropTypes.object 31 | } 32 | 33 | export default Avatar; -------------------------------------------------------------------------------- /src/components/Bounds.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | 5 | const Bounds = (props) => { 6 | const { 7 | style, 8 | children 9 | } = props; 10 | return( 11 | 12 | {children} 13 | 14 | ); 15 | } 16 | 17 | 18 | export default Bounds; -------------------------------------------------------------------------------- /src/components/Card.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | 5 | const Card = (props) => { 6 | const { 7 | children, 8 | style, 9 | ...other 10 | } = props; 11 | 12 | return( 13 | 14 | {children} 15 | 16 | ); 17 | } 18 | 19 | 20 | export default Card; -------------------------------------------------------------------------------- /src/components/Chip.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, StyleSheet } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | 5 | 6 | class Chip extends React.Component { 7 | render() { 8 | const { 9 | shape, 10 | } = this.props; 11 | 12 | 13 | return( 14 | 15 | {this.props.label} 16 | 17 | ); 18 | } 19 | } 20 | 21 | export default Chip; -------------------------------------------------------------------------------- /src/components/Chunk.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | 5 | const Chunk = (props) => { 6 | const { 7 | children, 8 | inline, 9 | style, 10 | ...other 11 | } = props; 12 | 13 | const inlineStyle = (inline) ? styles.inline : {}; 14 | 15 | return( 16 | 17 | {children} 18 | 19 | ); 20 | } 21 | 22 | 23 | export default Chunk; -------------------------------------------------------------------------------- /src/components/DumbButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, StyleSheet } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | import Icon from './Icon'; 5 | 6 | 7 | class DumbButton extends React.Component { 8 | render() { 9 | const { 10 | shape, 11 | } = this.props; 12 | 13 | 14 | return( 15 | 16 | { shape && 17 | 18 | } 19 | {this.props.label} 20 | 21 | ); 22 | } 23 | } 24 | 25 | export default DumbButton; -------------------------------------------------------------------------------- /src/components/Flex.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View } from 'react-primitives'; 3 | import PropTypes from 'prop-types'; 4 | import styles from '../styles/styles'; 5 | import {WithMatchMedia} from './WithMatchMedia'; 6 | 7 | export const VALID_ALIGNMENTS = { 8 | top: 'Top', 9 | bottom: 'Bottom', 10 | center: 'Center', 11 | }; 12 | 13 | export const VALID_BREAKPOINTS = { 14 | all: 'atAll', 15 | medium: 'atMedium', 16 | large: 'atLarge', 17 | }; 18 | 19 | export const VALID_SPACE = { 20 | center: 'center', 21 | spaceAround: 'spaceAround', 22 | spaceBetween: 'spaceBetween', 23 | flexEnd: 'flexEnd' 24 | }; 25 | 26 | export const DIRECTION_ROW = 'row'; 27 | export const DIRECTION_COLUMN = 'column'; 28 | 29 | export const FLEX_CLASS = 'flex'; 30 | export const FLEX_ROW_CLASS = `${FLEX_CLASS}--${DIRECTION_ROW}`; 31 | export const FLEX_COLUMN_CLASS = `${FLEX_CLASS}--${DIRECTION_COLUMN}`; 32 | export const FLEX_WRAP_CLASS = `${FLEX_CLASS}--wrap`; 33 | export const FLEX_NOGUTTER_CLASS = `${FLEX_CLASS}--noGutters`; 34 | export const FLEX_ALIGN_CLASS = `${FLEX_CLASS}--align`; 35 | 36 | 37 | class Flex extends React.Component { 38 | render() { 39 | const { 40 | direction, 41 | switchDirection, 42 | wrap, 43 | noGutters, 44 | justify, 45 | align, 46 | rowReverse, 47 | columnReverse, 48 | children, 49 | style, 50 | media, 51 | ...other 52 | } = this.props; 53 | 54 | const isColumn = direction === DIRECTION_COLUMN; 55 | 56 | 57 | // decide which types of styles are active 58 | // only make an array of keys for now 59 | // this will be used to reference correct styles for the and also s 60 | const styleKeys = [ 61 | FLEX_CLASS, 62 | 63 | // horizontal default 64 | ...[!isColumn ? FLEX_ROW_CLASS : undefined], 65 | ...[!isColumn && switchDirection && media[switchDirection] ? FLEX_COLUMN_CLASS : undefined], 66 | 67 | // vertical default 68 | ...[isColumn ? FLEX_COLUMN_CLASS : undefined], 69 | ...[isColumn && switchDirection && media[switchDirection] ? FLEX_ROW_CLASS : undefined], 70 | 71 | // reverse breakpoint modifiers 72 | ...[rowReverse && media[rowReverse] ? 'flex--rowReverse' : undefined], 73 | ...[columnReverse && media[columnReverse] ? 'flex--columnReverse' : undefined], 74 | 75 | // other 76 | ...[wrap ? FLEX_WRAP_CLASS : undefined], 77 | ...[noGutters ? FLEX_NOGUTTER_CLASS : undefined], 78 | ...[justify ? `${FLEX_CLASS}--${VALID_SPACE[justify]}` : undefined], 79 | ...[align ? `${FLEX_ALIGN_CLASS}${VALID_ALIGNMENTS[align]}` : undefined], 80 | 81 | // media test 82 | ...[media && media.isAtLargeUp ? 'flex-test' : undefined], 83 | ] 84 | 85 | const combinedStyles = styleKeys.map((key, i)=>{ 86 | return styles[key]; 87 | }).filter(function(item){ 88 | return item !== undefined; 89 | }); 90 | 91 | 92 | // assuming that the child of Flex will always be FlexItem or equivalent 93 | // if that turns out to not be true, this will need to be rethought 94 | const combinedDescendantStyles = styleKeys.map((key, i)=>{ 95 | // making up a thing here 96 | // two dashes "__" is for direct descendants of the first part 97 | return styles[`${key}__flex-item`]; 98 | }).filter(function(item){ 99 | return item !== undefined; 100 | }); 101 | 102 | const childrenWithProps = React.Children.map(this.props.children, 103 | (child, i) => React.cloneElement(child, { 104 | descendantStyles: combinedDescendantStyles, 105 | isFirstChild: (i==0) 106 | }) 107 | ); 108 | 109 | return ( 110 | 115 | {childrenWithProps} 116 | 117 | ); 118 | } 119 | } 120 | 121 | Flex.propTypes = { 122 | align: PropTypes.oneOf(Object.keys(VALID_ALIGNMENTS)), 123 | justify: PropTypes.oneOf(Object.keys(VALID_SPACE)), 124 | wrap: PropTypes.bool, 125 | noGutters: PropTypes.bool, 126 | 127 | direction: PropTypes.oneOf([ 128 | DIRECTION_ROW, 129 | DIRECTION_COLUMN, 130 | ]), 131 | switchDirection: PropTypes.oneOf(Object.keys(VALID_BREAKPOINTS)), 132 | rowReverse: PropTypes.oneOfType([ 133 | PropTypes.bool, 134 | PropTypes.oneOf(Object.keys(VALID_BREAKPOINTS)) 135 | ]), 136 | columnReverse: PropTypes.oneOfType([ 137 | PropTypes.bool, 138 | PropTypes.oneOf(Object.keys(VALID_BREAKPOINTS)) 139 | ]), 140 | }; 141 | 142 | Flex.defaultProps = { 143 | direction: DIRECTION_ROW, 144 | }; 145 | 146 | export default WithMatchMedia(Flex); 147 | -------------------------------------------------------------------------------- /src/components/FlexItem.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { View } from 'react-primitives'; 3 | import React from 'react'; 4 | import styles from '../styles/styles'; 5 | 6 | export const FLEX_ITEM_CLASS = 'flex-item'; 7 | export const FLEX_ITEM_SHRINK_CLASS = 'flex-item--shrink'; 8 | export const FLEX_ITEM_GROW_CLASS = 'flex-item--'; 9 | export const FLEX_GROW_FACTORS = [1,2,3,4,5,6,7]; 10 | 11 | class FlexItem extends React.Component { 12 | render() { 13 | const { 14 | children, 15 | className, 16 | shrink, 17 | growFactor, 18 | descendantStyles, 19 | isFirstChild, 20 | media, 21 | ...other 22 | } = this.props; 23 | 24 | const styleKeys = [ 25 | FLEX_ITEM_CLASS, 26 | shrink ? FLEX_ITEM_SHRINK_CLASS : undefined, 27 | growFactor ? `${FLEX_ITEM_GROW_CLASS}${growFactor}` : undefined, 28 | isFirstChild ? `${FLEX_ITEM_CLASS}--firstChild` : undefined 29 | ]; 30 | 31 | const combinedStyles = [...descendantStyles, ...styleKeys.map((key, i)=>{ 32 | return styles[key]; 33 | })]; 34 | 35 | return ( 36 | 40 | {children} 41 | 42 | ); 43 | } 44 | } 45 | 46 | FlexItem.propTypes = { 47 | shrink: PropTypes.bool, 48 | growFactor: PropTypes.oneOf(FLEX_GROW_FACTORS), 49 | }; 50 | 51 | export default FlexItem; 52 | -------------------------------------------------------------------------------- /src/components/Icon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Image, Platform } from 'react-primitives'; 3 | import PropTypes from 'prop-types'; 4 | import styles from '../styles/styles'; 5 | 6 | class Icon extends React.Component { 7 | render() { 8 | const { 9 | color, 10 | size, 11 | shape, 12 | } = this.props; 13 | 14 | // sketch can't do SVG yet, so we need a PNG for them 15 | // to be able to tint this, even on web we need to use svgs not as a standard image 16 | // would be nice to implement tintcolor from RN 17 | 18 | if(Platform.OS =='sketch') 19 | return( 20 | 24 | ); 25 | 26 | if(Platform.OS =='web') 27 | return( 28 | 29 | 30 | 31 | ); 32 | } 33 | } 34 | 35 | Icon.defaultProps = { 36 | size: 'medium', 37 | color: 'orange' 38 | }; 39 | 40 | Icon.propTypes = { 41 | size: PropTypes.oneOf(['small', 'medium', 'large']), 42 | shape: PropTypes.object, 43 | color: PropTypes.string 44 | } 45 | 46 | export default Icon; -------------------------------------------------------------------------------- /src/components/Inline.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | 5 | 6 | class Inline extends React.Component { 7 | render() { 8 | const { 9 | children, 10 | } = this.props; 11 | 12 | 13 | return( 14 | 15 | {children} 16 | 17 | ); 18 | } 19 | } 20 | 21 | export default Inline; -------------------------------------------------------------------------------- /src/components/Link.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Touchable, View } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | 5 | class Link extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | opacity: 1 10 | } 11 | } 12 | 13 | render() { 14 | const { 15 | children, 16 | style, 17 | ...other 18 | } = this.props; 19 | return( 20 | { 23 | this.setState({ 24 | opacity: .5 25 | }) 26 | }} 27 | onPressOut={()=>{ 28 | this.setState({ 29 | opacity: 1 30 | }) 31 | }} 32 | > 33 | 38 | {children} 39 | 40 | 41 | ); 42 | } 43 | } 44 | 45 | 46 | export default Link; -------------------------------------------------------------------------------- /src/components/Link.sketch.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from '../styles/styles'; 3 | 4 | const Link = (props) => { return props.children; } 5 | 6 | export default Link; -------------------------------------------------------------------------------- /src/components/List.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { View } from 'react-primitives'; 4 | import styles from '../styles/styles'; 5 | 6 | class List extends React.Component { 7 | render() { 8 | const { 9 | children, 10 | items = [], 11 | renderItem = ()=>{}, 12 | style, 13 | variant, 14 | ...other 15 | } = this.props; 16 | 17 | const variantStyleModifier = (variant) ? `--${variant}` : ''; 18 | 19 | return( 20 | 24 | { items.map((item, i)=>{ 25 | return ( 26 | 31 | { renderItem(item, i) } 32 | 33 | ); 34 | })} 35 | {children} 36 | 37 | ); 38 | } 39 | } 40 | 41 | List.propTypes = { 42 | variant: PropTypes.oneOf(['grid', 'inline']), 43 | } 44 | 45 | export default List; -------------------------------------------------------------------------------- /src/components/Menu.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | import Link from './Link'; 5 | 6 | const Menu = (props) => { 7 | 8 | const { 9 | children, 10 | ...other 11 | } = props; 12 | 13 | return( 14 | 17 | {children} 18 | 19 | ); 20 | } 21 | 22 | 23 | export default Menu; -------------------------------------------------------------------------------- /src/components/Modal.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Touchable, View } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | import Card from './Card'; 5 | import Link from './Link'; 6 | import Icon from './Icon'; 7 | import Section from './Section'; 8 | 9 | 10 | /* 11 | 12 | how to hide/show? 13 | a prop? 14 | a method? 15 | (i'm guessing a prop but who knows) 16 | 17 | how to hide/remove an element with animations 18 | layoutanimation vs csstransitiongroup (is there a way to code-split this?) 19 | animated is cross-platform 20 | but how do you animate something that has been removed? 21 | 22 | i think the basic idea for modal is 23 | don't directly change the thing that renders it 24 | request to dismiss it 25 | and change that value after the animation runs 26 | 27 | */ 28 | 29 | 30 | class Modal extends React.Component { 31 | constructor(props) { 32 | super(props); 33 | } 34 | 35 | 36 | render() { 37 | const { 38 | children, 39 | onRequestClose, 40 | visible, 41 | ...other 42 | } = this.props; 43 | 44 | 45 | if(visible){ 46 | return( 47 | 48 | 50 | 51 | 52 | 53 | 54 |
55 | 57 | 58 | 59 |
60 | {children} 61 | 62 | 63 | ); 64 | } 65 | else{ 66 | return false; 67 | } 68 | } 69 | } 70 | 71 | 72 | export default Modal; -------------------------------------------------------------------------------- /src/components/Picker.js: -------------------------------------------------------------------------------- 1 | // partial dirty implementation of react-native Picker 2 | // should match http://facebook.github.io/react-native/docs/picker.html 3 | 4 | // https://github.com/necolas/react-native-web/issues/184 5 | import React from "react" 6 | import createDOMElement from "react-native-web/dist/modules/createDOMElement" 7 | 8 | const PickerItem = (props: PropsType) => { 9 | const { value, label } = props; 10 | return ( 11 | 14 | ) 15 | } 16 | 17 | const handleValueChange = ( 18 | children: ?Array>, 19 | cb: Function, 20 | ) => (event: SyntheticEvent) => { 21 | if (children && event.target && event.target.value !== undefined) { 22 | const value = event.target.value 23 | return children.some((child, index) => { 24 | return ( 25 | child.props.value === value && 26 | cb(value, index) 27 | ) 28 | }) 29 | } 30 | return null 31 | } 32 | 33 | const Picker = (props: PropsType) => { 34 | const { selectedValue, onValueChange, children, ...otherProps } = props 35 | return ( 36 | createDOMElement("select", { 37 | className: 'input', 38 | value: selectedValue, 39 | onChange: handleValueChange(children, onValueChange), 40 | ...otherProps, 41 | children, 42 | }) 43 | ) 44 | } 45 | 46 | Picker.Item = PickerItem 47 | 48 | export default Picker -------------------------------------------------------------------------------- /src/components/Picker.sketch.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, StyleSheet } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | 5 | class Picker extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | selectedLabel: "" 10 | } 11 | } 12 | componentDidMount() { 13 | // pick out label of selected picker.item child 14 | const selectedValue = (this.props.selectedValue !== undefined ) ? this.props.selectedValue : this.props.children[0].props.value; 15 | let selectedLabel = ''; 16 | for(const c of this.props.children){ 17 | if(c.props.value == selectedValue){ 18 | selectedLabel = c.props.label; 19 | } 20 | } 21 | this.setState({selectedLabel: selectedLabel}); 22 | } 23 | 24 | render() { 25 | const { 26 | children, 27 | multiline, 28 | } = this.props; 29 | 30 | const selectedLabel = 'Testing'; 31 | 32 | return( 33 | 34 | {this.state.selectedLabel} 35 | 36 | ); 37 | } 38 | } 39 | 40 | // Don't need no items in sketch 41 | Picker.Item = () => {} 42 | 43 | export default Picker; -------------------------------------------------------------------------------- /src/components/Section.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | 5 | const Section = (props) => { 6 | 7 | const { 8 | children, 9 | style, 10 | } = props 11 | 12 | return( 13 | 14 | {children} 15 | 16 | ); 17 | } 18 | 19 | 20 | export default Section; -------------------------------------------------------------------------------- /src/components/Stripe.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Image } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | 5 | const Stripe = (props) => { 6 | 7 | const { 8 | children, 9 | image, 10 | style, 11 | } = props 12 | 13 | if(image){ 14 | return( 15 | 19 | {children} 20 | 21 | ); 22 | } 23 | else{ 24 | return( 25 | 26 | {children} 27 | 28 | ); 29 | } 30 | 31 | } 32 | 33 | 34 | export default Stripe; -------------------------------------------------------------------------------- /src/components/Tabs.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Touchable, View, Text } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | import Link from './Link'; 5 | 6 | const TabItem = (props: PropsType) => { 7 | const { 8 | value, 9 | label, 10 | selected, 11 | fullWidth, 12 | onChange = () => {} 13 | } = props; 14 | 15 | const selectedStyle = (selected) ? {item: styles['tabItem--selected'], text: styles['tabText--selected']} : {}; 16 | const widthStyle = (fullWidth) ? styles['tabItem--fullWidth'] : styles['tabItem--variableWidth']; 17 | 18 | return ( 19 | onChange(value) } 21 | style={[styles.tabItem, selectedStyle.item, widthStyle]} 22 | > 23 | {label} 24 | 25 | ) 26 | } 27 | 28 | 29 | 30 | class Tabs extends React.Component { 31 | constructor(props) { 32 | super(props); 33 | } 34 | 35 | render() { 36 | const { 37 | children, 38 | onChange, 39 | fullWidth, 40 | ...other 41 | } = this.props; 42 | 43 | // default to first tab 44 | const selectedValue = this.props.selectedValue || children[0].props.value; 45 | 46 | // pass selectedness to child 47 | const childrenWithProps = React.Children.map(children, function (child) { 48 | return React.cloneElement(child, { 49 | selected: (selectedValue == child.props.value), 50 | onChange, 51 | fullWidth, 52 | }); 53 | }); 54 | 55 | return( 56 | 60 | {childrenWithProps} 61 | 62 | 63 | ); 64 | } 65 | } 66 | 67 | Tabs.Item = TabItem 68 | 69 | export default Tabs; -------------------------------------------------------------------------------- /src/components/TextInput.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet } from 'react-primitives'; 3 | import { TextInput as TextInputWeb } from 'react-native-web'; 4 | import styles from '../styles/styles'; 5 | 6 | 7 | class TextInput extends React.Component{ 8 | render() { 9 | const { 10 | multiline, 11 | placeholder, 12 | type 13 | } = this.props; 14 | 15 | return ( 16 | 28 | ); 29 | } 30 | } 31 | 32 | 33 | export default TextInput; -------------------------------------------------------------------------------- /src/components/TextInput.sketch.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, StyleSheet } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | 5 | class TextInput extends React.Component { 6 | render() { 7 | const { 8 | multiline 9 | } = this.props; 10 | 11 | return( 12 | 13 | { this.props.placeholder && 14 | {this.props.placeholder} 15 | } 16 | 17 | ); 18 | } 19 | } 20 | 21 | export default TextInput; -------------------------------------------------------------------------------- /src/components/Toast.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Touchable, View, Text } from 'react-primitives'; 3 | import styles from '../styles/styles'; 4 | 5 | 6 | class Toast extends React.Component { 7 | 8 | constructor(props) { 9 | super(props); 10 | } 11 | 12 | render() { 13 | const { 14 | label, 15 | ...other 16 | } = this.props; 17 | 18 | 19 | return( 20 | 21 | Toast is the most 22 | 23 | ); 24 | } 25 | } 26 | 27 | 28 | export default Toast; -------------------------------------------------------------------------------- /src/components/WithMatchMedia.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MEDIA_QUERIES } from '../designConstants'; 3 | 4 | const breakpointNames = Object.keys(MEDIA_QUERIES); 5 | 6 | /** 7 | * @param {String} breakpoint - name of breakpoint (for example, 'medium') 8 | * @returns {String} - state property name (for example, isAtMediumUp) 9 | */ 10 | export const getStateNameByBreakpoint = breakpoint => { 11 | const capitalizedBp = `${breakpoint.substr(0,1).toUpperCase()}${breakpoint.substr(1)}`; 12 | return `at${capitalizedBp}`; 13 | }; 14 | 15 | /** 16 | * @param {Array} mediaQueries - list of matchMedia-created MediaQueryList objects 17 | * @param {Array} breakpoints - array of breakpoint names that were passed to HOC 18 | * @returns {Object} - updated `state` object for `withMatchMedia` 19 | */ 20 | export const getUpdatedMediaState = (mediaQueries) => mediaQueries 21 | .reduce((state, mq, i) => { 22 | state[getStateNameByBreakpoint(breakpointNames[i])] = mq.matches; 23 | return state; 24 | }, {}); 25 | 26 | 27 | /** 28 | * Provides viewport-aware props to wrapped component. 29 | * 30 | * @param {React.element} WrappedComponent - the component to wrap 31 | * @param {Array} breakpoints - array of breakpoint names to watch 32 | */ 33 | export const WithMatchMedia = ( 34 | WrappedComponent 35 | ) => class extends React.Component { 36 | /** 37 | * @constructor 38 | * @param {Object} - React element props 39 | */ 40 | constructor(props) { 41 | super(props); 42 | 43 | this.state = { 44 | media: {} 45 | }; 46 | 47 | this.handleMediaChange = this.handleMediaChange.bind(this); 48 | } 49 | 50 | /** 51 | * handles media change for _all_ breakpoints configured 52 | * updates state.media with matched media 53 | * @returns {undefined} 54 | */ 55 | handleMediaChange() { 56 | const updated = getUpdatedMediaState(this.mediaQueries); 57 | this.setState({ 58 | media: {...this.state.media, ...updated} 59 | }); 60 | } 61 | 62 | /** 63 | * react lifecycle method 64 | * sets up MediaQueryList listeners 65 | * @returns {undefined} 66 | */ 67 | componentDidMount() { 68 | 69 | if ( typeof window === 'undefined' || !window.matchMedia ) { 70 | return false; 71 | } 72 | 73 | this.mediaQueries = breakpointNames 74 | .map(bp => window.matchMedia(MEDIA_QUERIES[bp])); 75 | 76 | // add listners for every MediaQueryList object 77 | this.mediaQueries.forEach(mq => { 78 | mq.addListener(this.handleMediaChange); 79 | }); 80 | 81 | this.setState({ media: getUpdatedMediaState(this.mediaQueries) }); 82 | 83 | } 84 | 85 | /** 86 | * react lifecycle method 87 | * clean up media query listeners on unmount 88 | * @returns {undefined} 89 | */ 90 | componentWillUnmount() { 91 | this.mediaQueries.forEach(mq => { 92 | mq.removeListener(this.handleMediaChange); 93 | }); 94 | } 95 | 96 | /** 97 | * `media` prop is provided to the wrapped component in render(). 98 | * 99 | * When `this.mediaListeners` detect a media change, `this.state.media` is updated 100 | * and the component will re-render with correct media-conditional prop values. 101 | * 102 | * @returns {React.element} 103 | */ 104 | render() { 105 | return ( 106 | 110 | ); 111 | } 112 | }; -------------------------------------------------------------------------------- /src/designConstants.js: -------------------------------------------------------------------------------- 1 | export const BREAKPOINTS = { 2 | s: '440px', 3 | m: '640px', 4 | l: '840px', 5 | xl: '1024px', 6 | }; 7 | 8 | export const MEDIA_QUERIES = { 9 | small: `screen and (min-width: ${BREAKPOINTS.s})`, 10 | medium: `screen and (min-width: ${BREAKPOINTS.m})`, 11 | large: `screen and (min-width: ${BREAKPOINTS.l})`, 12 | huge: `screen and (min-width: ${BREAKPOINTS.xl})`, 13 | }; 14 | 15 | export const MEDIA_SIZES = { 16 | xs: '16', 17 | s: '24', 18 | m: '36', 19 | l: '48', 20 | xl: '72', 21 | xxl: '120', 22 | }; -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | -------------------------------------------------------------------------------- /src/index.ios.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry } from 'react-native'; 3 | import Catalog from './Catalog'; 4 | 5 | AppRegistry.registerComponent('App', Catalog); -------------------------------------------------------------------------------- /src/index.sketch.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, Artboard } from 'react-sketchapp'; 3 | import Catalog from './Catalog'; 4 | 5 | const Document = () => ( 6 | 12 | 13 | 14 | ); 15 | 16 | export default (context) => { 17 | render(, context.document.currentPage()); 18 | } -------------------------------------------------------------------------------- /src/index.web.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import { StyleSheet } from 'react-primitives'; 4 | import swatches from './styles/swatches'; 5 | import Catalog from './Catalog'; 6 | import iconSprite from 'raw-loader!../dist/sprite/sprite.inc'; 7 | 8 | const Document = () => ( 9 |
10 | 11 | {/* icon sprite */} 12 |
16 |
17 | 18 | {/* weird web-specific styling stuff you can't set any other way */} 19 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
36 | ) 37 | 38 | render(, document.getElementById('app')); -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "compatibleVersion": 1, 3 | "bundleVersion": 1, 4 | "commands": [ 5 | { 6 | "name": "Meetup components: Universal Render", 7 | "identifier": "main", 8 | "script": "./index.sketch.js" 9 | } 10 | ], 11 | "menu": { 12 | "isRoot": true, 13 | "items": [ 14 | "main" 15 | ] 16 | } 17 | } -------------------------------------------------------------------------------- /src/styles/flex.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-primitives'; 2 | 3 | // move to a constants file somewhere 4 | const base = 16; 5 | const space = base * .75; 6 | const spaceSection = base * 1.5; 7 | const flexGrowFactors = [1, 2, 3, 4, 5, 6, 7]; 8 | const flexJustifyMap = { 9 | "flexEnd": "flex-end", 10 | "center": "center", 11 | "spaceBetween": "space-between", 12 | "spaceAround": "space-around" 13 | }; 14 | const flexAlignMap = { 15 | "top": "flex-start", 16 | "bottom": "flex-end", 17 | "center": "center" 18 | }; 19 | const breakpointsMap = { 20 | "medium": 600, 21 | "large": 800 22 | } 23 | const capitalize = (string) => { 24 | return string.charAt(0).toUpperCase() + string.slice(1); 25 | } 26 | const styles = StyleSheet.create({ 27 | 28 | 29 | /*doc 30 | --- 31 | title: Flex 32 | --- 33 | Lays out content using `display: flex`. 34 | 35 | The `.flex` class is rendered with the `` component. 36 | 37 | Direct children of `.flex` are flex children, and use the 38 | `` component to render the class `.flex-item` 39 | with an optional prop `shrink` to render the class 40 | `.row-item--shrink` for a flex-shrink item. 41 | 42 | By default, the `` component renders the class 43 | `flex--row` to setting `flex-direction: row` 44 | 45 | The flex children in flex row do not have a `flex-basis` set; a 46 | basis is not required for most common layout tasks. 47 | */ 48 | 49 | 'flex' : { 50 | alignItems: 'stretch', 51 | flexDirection: 'row', 52 | }, 53 | 54 | 'flex-item' : { 55 | width: 'auto', 56 | flex: 1, 57 | flexBasis: 0 58 | }, 59 | 60 | // testing setting first-child manually 61 | // works across platforms better 62 | // consider a composable component that adds this to iteratable items 63 | 'flex-item--firstChild': { 64 | paddingLeft: 0 65 | }, 66 | 67 | /*doc 68 | --- 69 | title: Flex Layout Variants 70 | --- 71 | The following classes control the `flex-direction` allowing 72 | content to be arranged in rows or columns. 73 | 74 | Class | Description 75 | ----------------------- | ------------------------------- 76 | `.flex--row` | arranges content in rows 77 | `.flex--column` | arranges content in columns 78 | 79 | Layout can change from row to column (or vice versa) at a breakpoint 80 | Using this signature: `.at[Breakpoint]_flex--[direction]` 81 | 82 | Breakpoints | Direction | Description 83 | ------------------ | --------------- | --------------------------- 84 | `medium`, `large` | `row` | arranges content in a row 85 | `medium`, `large` | `column` | arranges content in column 86 | */ 87 | 88 | 89 | 'flex--row' : { 90 | flexDirection: 'row', 91 | }, 92 | 93 | 'flex--row__flex-item': { 94 | paddingLeft: base, 95 | minHeight: '-webkit-min-content' 96 | }, 97 | 98 | 99 | 'flex--column': { 100 | flexDirection: 'column', 101 | height: '100%' 102 | }, 103 | 104 | 'flex--column__flex-item': { 105 | paddingLeft: 0, 106 | minHeight: '-webkit-min-content' 107 | }, 108 | 109 | 110 | 111 | /*doc 112 | --- 113 | title: Flex Item Variants 114 | --- 115 | The following classes are variants that can be by adding 116 | props to the component 117 | 118 | 119 | Class | Description 120 | --------------------------- | ------------------------------- 121 | `.flex-item--shrink` | Gives a shrink factor, shrinking item to fit content 122 | `.flex-item--[n]` | Sets grow factor 123 | */ 124 | 125 | ...(()=>{ 126 | const growObj = {}; 127 | for(let factor of flexGrowFactors){ 128 | growObj[`flex-item--${factor}`] = { flex: factor }; 129 | } 130 | return growObj; 131 | })(), 132 | 133 | 134 | 'flex-item--shrink': { 135 | flex: 0, 136 | minWidth: '-webkit-min-content' 137 | }, 138 | 139 | 140 | /*doc 141 | --- 142 | title: Flex Variants 143 | --- 144 | The following classes are variants that can be by adding 145 | props to the component 146 | 147 | Class | Description 148 | -------------------------------- | ------------------------------- 149 | `.flex--noGutters` | removes padding from all `.flex-item` children 150 | `.flex--wrap` | allows row wrapping (useful for collapsing rows in smaller viewports) 151 | `.flex--rowReverse` | reverses row order 152 | `.atMedium_flex--rowReverse` | reverses row order for medium breakpoint and up 153 | `.atLarge_flex--rowReverse` | reverses row order for large breakpoint and up 154 | `.flex--columnReverse` | reverses column order 155 | `.atMedium_flex--columnReverse` | reverses column order for medium breakpoint and up 156 | `.atLarge_flex--columnReverse` | reverses column order for large breakpoint and up 157 | */ 158 | 159 | 'flex--noGutters__flex-item': { 160 | padding: 0, 161 | }, 162 | 163 | 'flex--wrap': { 164 | flexWrap: 'wrap' 165 | }, 166 | 167 | 'flex--columnReverse': { 168 | flexDirection: 'column-reverse' 169 | }, 170 | 171 | 'flex--rowReverse': { 172 | flexDirection: 'row-reverse' 173 | }, 174 | 175 | /* 176 | 'flex--rowReverse__flex-item--firstChild': { 177 | paddingLeft: space 178 | }, 179 | 180 | 'flex--rowReverse__flex-item--lastChild': { 181 | paddingLeft: space 182 | }, 183 | */ 184 | 185 | 186 | /* 187 | Content justification variants are also available (see also: css tricks flexbox demo) 188 | Using this signature: `.at[Breakpoint]_flex--[justification]` 189 | 190 | Class | Variants 191 | ----------------------- | ------------------------------- 192 | `.flex--flexEnd` | justifies content to `flex-end` 193 | `.flex--center` | justifies content to `center` 194 | `.flex--spaceBetween` | justifies content to `spaceBetween` 195 | `.flex--spaceAround` | justifies content to `spaceAround` 196 | */ 197 | 198 | ...(()=>{ 199 | const justifyObj = {}; 200 | for( let jName in flexJustifyMap){ 201 | justifyObj[`flex--${jName}`] = { justifyContent: flexJustifyMap[jName] }; 202 | } 203 | return justifyObj; 204 | })(), 205 | 206 | 207 | 208 | /* 209 | Alignment variants are also available using `align-items` (see also: css tricks flexbox demo) 210 | 211 | Class | Variants 212 | ----------------------- | ------------------------------- 213 | `flex--alignTop` | aligns content to `flex-start` 214 | `flex--alignBottom` | aligns content to `flex-end` 215 | `flex--alignCenter` | aligns content to `center` 216 | */ 217 | 218 | ...(()=>{ 219 | const alignObj = {}; 220 | for( let aName in flexAlignMap){ 221 | alignObj[`flex--align${capitalize(aName)}`] = { alignItems: flexAlignMap[aName] }; 222 | } 223 | return alignObj; 224 | })(), 225 | 226 | 227 | }); 228 | 229 | export default styles; -------------------------------------------------------------------------------- /src/styles/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-primitives'; 2 | import swatches from './swatches'; 3 | import flexStyles from './flex'; 4 | 5 | 6 | const base = 16; 7 | const space = base * .75; 8 | const spaceSection = base * 1.5; 9 | 10 | const styles = StyleSheet.create({ 11 | 12 | 13 | // LAYOUT 14 | stripe: { 15 | backgroundColor: 'white' 16 | }, 17 | bounds: { 18 | maxWidth: 1000, 19 | }, 20 | section: { 21 | paddingTop: spaceSection, 22 | marginHorizontal: spaceSection, 23 | paddingBottom: spaceSection - space 24 | }, 25 | chunk: { 26 | paddingBottom: space 27 | }, 28 | 29 | // stacking up some inline 30 | inline: { 31 | flexDirection: 'row', 32 | flexWrap: 'wrap' 33 | }, 34 | 35 | // LISTS 36 | // react-sketchapp lists other than default depend on yoga https://github.com/airbnb/react-sketchapp/issues/52 37 | 38 | // default 39 | list:{ 40 | 41 | }, 42 | 'list-item': { 43 | borderTopWidth: 1, 44 | borderTopColor: '#ddd', 45 | paddingTop: space 46 | }, 47 | 48 | // grid 49 | 50 | 'list--grid':{ 51 | flexDirection: 'row', 52 | flexWrap: 'wrap' 53 | }, 54 | 'list-item--grid': { 55 | flexBasis: '50%' 56 | }, 57 | 58 | // inline 59 | 'list--inline':{ 60 | flexDirection: 'row', 61 | flexWrap: 'nowrap', 62 | overflow: 'scroll', 63 | WebkitOverflowScrolling: 'touch', 64 | }, 65 | 'list-item--inline': { 66 | flexBasis: 200 67 | }, 68 | 69 | // hscroll 70 | 'list--hscroll':{ 71 | flexDirection: 'row', 72 | flexWrap: 'nowrap', 73 | overflowY: 'scroll', 74 | WebkitOverflowScrolling: 'touch', 75 | }, 76 | 'list-item--hscroll': { 77 | flexBasis: 200 78 | }, 79 | 80 | 81 | // INPUT 82 | input: { 83 | backgroundColor: '#eeeeee', 84 | padding: space * 1.5, 85 | borderRadius: 5, 86 | borderWidth: 0, 87 | color: swatches.textPrimary, 88 | boxSizing: 'border-box', 89 | appearance: 'none' 90 | }, 91 | 'input--multiline': { 92 | minHeight: base * 6 93 | }, 94 | 95 | 96 | // BUTTON 97 | button: { 98 | backgroundColor: '#1D7CF2', 99 | padding: space*1.5, 100 | borderRadius: 5, 101 | flexDirection: 'row', 102 | justifyContent: 'center' 103 | }, 104 | buttonText: { 105 | color: '#ffffff', 106 | textAlign: 'center' 107 | }, 108 | 109 | // CHIP 110 | chip: { 111 | backgroundColor: '#eee', 112 | paddingVertical: space*0.5, 113 | paddingHorizontal: space, 114 | borderRadius: 20, 115 | flex: 0, 116 | flexBasis: 0, 117 | minHeight: '-webkit-min-content', 118 | width: 'auto', 119 | minWidth: '-webkit-min-content' 120 | }, 121 | chipText: { 122 | textAlign: 'center' 123 | }, 124 | 125 | // CARD 126 | card: { 127 | borderRadius: 5, 128 | shadowRadius: 12, 129 | shadowColor: 'rgba(0,0,0,.25)', 130 | backgroundColor: 'white', 131 | }, 132 | 133 | // TABS 134 | tabs: { 135 | flexDirection: 'row', 136 | alignItems: 'stretch', 137 | }, 138 | tabItem: { 139 | minHeight: '-webkit-min-content', 140 | paddingHorizontal: space, 141 | paddingVertical: space / 2 142 | }, 143 | 144 | 'tabItem--variableWidth':{ 145 | flex: 0 146 | }, 147 | 148 | 'tabItem--fullWidth': { 149 | flex: 1, 150 | textAlign: 'center' 151 | }, 152 | 153 | 'tabItem--selected': { 154 | borderBottomColor: 'blue', 155 | borderBottomWidth: 3, 156 | }, 157 | 'tabText--selected': { 158 | color: 'blue' 159 | }, 160 | 161 | // MODAL 162 | 'modal-backdrop': { 163 | position: 'fixed', 164 | top: 0, 165 | left: 0, 166 | right: 0, 167 | bottom: 0, 168 | backgroundColor: 'rgba(0,0,0,.75)' 169 | }, 170 | modal: { 171 | position: 'fixed', 172 | top: space*2, 173 | left: space*2, 174 | right: space*2, 175 | bottom: space*2 176 | }, 177 | 178 | // TOAST 179 | toast: { 180 | backgroundColor: 'red', 181 | position: 'fixed', 182 | left: space*2, 183 | right: space*2, 184 | bottom: space*2, 185 | padding: space 186 | }, 187 | 188 | // AVATAR 189 | avatar: { 190 | resizeMode: 'cover', 191 | }, 192 | 'avatar--small':{ 193 | width: 24, 194 | height: 24, 195 | borderRadius: 12 196 | }, 197 | 'avatar--medium':{ 198 | width: 36, 199 | height: 36, 200 | borderRadius: 18 201 | }, 202 | 'avatar--large':{ 203 | width: 120, 204 | height: 120, 205 | borderRadius: 60 206 | }, 207 | 208 | // TEXT 209 | text: { 210 | fontSize: base, 211 | fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif', 212 | fontWeight: '400', 213 | color: swatches.textPrimary, 214 | lineHeight: base * 1.4, 215 | WebkitFontSmoothing: 'antialiased', // retina/non-retina rendering 216 | }, 217 | textSecondary:{ 218 | color: swatches.textSecondary 219 | }, 220 | textHint:{ 221 | color: swatches.textHint 222 | }, 223 | textSmall: { 224 | fontSize: base * 0.875, 225 | }, 226 | textStrong: { 227 | fontWeight: '600', 228 | }, 229 | textBig: { 230 | fontSize: base * 1.375, 231 | fontWeight: '800' 232 | }, 233 | textSectionHead: { 234 | fontSize: base * 1.125, 235 | fontWeight: '800' 236 | }, 237 | textPageHead: { 238 | fontSize: base * 2, 239 | fontWeight: '800' 240 | } 241 | }); 242 | 243 | export default {...styles, ...flexStyles}; -------------------------------------------------------------------------------- /src/styles/swatches.js: -------------------------------------------------------------------------------- 1 | const swatches = { 2 | textPrimary: 'rgba(0,0,0,.87)', 3 | textSecondary: 'rgba(0,0,0,.54)', 4 | textHint: 'rgba(0,0,0,.30)', 5 | } 6 | export default swatches; -------------------------------------------------------------------------------- /universal-render.sketchplugin/Contents/Sketch/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "compatibleVersion": 1, 3 | "bundleVersion": 1, 4 | "commands": [ 5 | { 6 | "name": "Meetup components: Universal Render", 7 | "identifier": "main", 8 | "script": "index.sketch.js" 9 | } 10 | ], 11 | "menu": { 12 | "isRoot": true, 13 | "items": [ 14 | "main" 15 | ] 16 | }, 17 | "version": "1.0.0", 18 | "description": "", 19 | "name": "universal-render", 20 | "disableCocoaScriptPreprocessor": true, 21 | "appcast": "https://raw.githubusercontent.com//master/.appcast.xml", 22 | "author": "Jon Gold", 23 | "email": "jon.gold@airbnb.com" 24 | } --------------------------------------------------------------------------------