├── .gitignore ├── LICENSE ├── README.md ├── compliments.js ├── index.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Veeti Haapsamo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # styled-compliments 2 | 3 | `styled-compliments` provides you with a `styled-components`-compatible compliment component! 4 | 5 | This is a silly little package inspired by the talk "Styled Components, SSR and Theming" by [Kasia Jastrzębska](https://github.com/kajas90) at [React Finland 2018](https://react-finland.fi/) 6 | 7 | > I have this thing where I accidentally pronounce `styled-components` as `styled-compliments`. Count them and I will drink as many shots at the afterparty 8 | > 9 | > -- @kajas90 10 | 11 | ## Contributing / TODO 12 | 13 | * [ ] enforce `prettier` 14 | * [x] store compliments in a separate file, fetch a random one 15 | * [ ] write lots of compliments 16 | * [ ] translations? 17 | -------------------------------------------------------------------------------- /compliments.js: -------------------------------------------------------------------------------- 1 | const compliments = [ 2 | "You look beautiful today ❤️", 3 | "That smile suits your style. Keep it!", 4 | "You're the best you I've ever met" 5 | ]; 6 | 7 | const sample = array => { 8 | return array[Math.floor(Math.random() * array.length)]; 9 | }; 10 | 11 | const getCompliment = () => sample(compliments); 12 | 13 | export default getCompliment; 14 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import React, { Component } from "react"; 3 | 4 | import getCompliment from "./compliments"; 5 | 6 | class Compliment extends Component { 7 | render() { 8 | const { className } = this.props; 9 | const compliment = getCompliment(); 10 | return
{compliment}
; 11 | } 12 | } 13 | 14 | export default styled(Compliment)``; 15 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled-compliments", 3 | "version": "1.1.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "asap": { 8 | "version": "2.0.6", 9 | "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", 10 | "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" 11 | }, 12 | "base64-js": { 13 | "version": "1.3.0", 14 | "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz", 15 | "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==" 16 | }, 17 | "buffer": { 18 | "version": "5.1.0", 19 | "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.1.0.tgz", 20 | "integrity": "sha512-YkIRgwsZwJWTnyQrsBTWefizHh+8GYj3kbL1BTiAQ/9pwpino0G7B2gp5tx/FUBqUlvtxV85KNR3mwfAtv15Yw==", 21 | "requires": { 22 | "base64-js": "1.3.0", 23 | "ieee754": "1.1.11" 24 | } 25 | }, 26 | "core-js": { 27 | "version": "1.2.7", 28 | "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", 29 | "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" 30 | }, 31 | "css-color-keywords": { 32 | "version": "1.0.0", 33 | "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", 34 | "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" 35 | }, 36 | "css-to-react-native": { 37 | "version": "2.1.2", 38 | "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.1.2.tgz", 39 | "integrity": "sha512-akxvxNPNm+Qb7kGswgWhD8rLENM8857NVIn1lX0Dr9BQuju8vx6ypet7KvwvqBC01FUEne5V/jvt7FJXWJPtgw==", 40 | "requires": { 41 | "css-color-keywords": "1.0.0", 42 | "fbjs": "0.8.16", 43 | "postcss-value-parser": "3.3.0" 44 | } 45 | }, 46 | "encoding": { 47 | "version": "0.1.12", 48 | "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", 49 | "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", 50 | "requires": { 51 | "iconv-lite": "0.4.21" 52 | } 53 | }, 54 | "fbjs": { 55 | "version": "0.8.16", 56 | "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", 57 | "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=", 58 | "requires": { 59 | "core-js": "1.2.7", 60 | "isomorphic-fetch": "2.2.1", 61 | "loose-envify": "1.3.1", 62 | "object-assign": "4.1.1", 63 | "promise": "7.3.1", 64 | "setimmediate": "1.0.5", 65 | "ua-parser-js": "0.7.17" 66 | } 67 | }, 68 | "has-flag": { 69 | "version": "1.0.0", 70 | "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", 71 | "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=" 72 | }, 73 | "hoist-non-react-statics": { 74 | "version": "2.5.0", 75 | "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz", 76 | "integrity": "sha512-6Bl6XsDT1ntE0lHbIhr4Kp2PGcleGZ66qu5Jqk8lc0Xc/IeG6gVLmwUGs/K0Us+L8VWoKgj0uWdPMataOsm31w==" 77 | }, 78 | "iconv-lite": { 79 | "version": "0.4.21", 80 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.21.tgz", 81 | "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==", 82 | "requires": { 83 | "safer-buffer": "2.1.2" 84 | } 85 | }, 86 | "ieee754": { 87 | "version": "1.1.11", 88 | "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.11.tgz", 89 | "integrity": "sha512-VhDzCKN7K8ufStx/CLj5/PDTMgph+qwN5Pkd5i0sGnVwk56zJ0lkT8Qzi1xqWLS0Wp29DgDtNeS7v8/wMoZeHg==" 90 | }, 91 | "is-plain-object": { 92 | "version": "2.0.4", 93 | "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", 94 | "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", 95 | "requires": { 96 | "isobject": "3.0.1" 97 | } 98 | }, 99 | "is-stream": { 100 | "version": "1.1.0", 101 | "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", 102 | "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" 103 | }, 104 | "isobject": { 105 | "version": "3.0.1", 106 | "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", 107 | "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" 108 | }, 109 | "isomorphic-fetch": { 110 | "version": "2.2.1", 111 | "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", 112 | "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", 113 | "requires": { 114 | "node-fetch": "1.7.3", 115 | "whatwg-fetch": "2.0.4" 116 | } 117 | }, 118 | "js-tokens": { 119 | "version": "3.0.2", 120 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", 121 | "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" 122 | }, 123 | "loose-envify": { 124 | "version": "1.3.1", 125 | "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", 126 | "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", 127 | "requires": { 128 | "js-tokens": "3.0.2" 129 | } 130 | }, 131 | "node-fetch": { 132 | "version": "1.7.3", 133 | "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", 134 | "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", 135 | "requires": { 136 | "encoding": "0.1.12", 137 | "is-stream": "1.1.0" 138 | } 139 | }, 140 | "object-assign": { 141 | "version": "4.1.1", 142 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", 143 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" 144 | }, 145 | "postcss-value-parser": { 146 | "version": "3.3.0", 147 | "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz", 148 | "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=" 149 | }, 150 | "promise": { 151 | "version": "7.3.1", 152 | "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", 153 | "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", 154 | "requires": { 155 | "asap": "2.0.6" 156 | } 157 | }, 158 | "prop-types": { 159 | "version": "15.6.1", 160 | "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz", 161 | "integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==", 162 | "requires": { 163 | "fbjs": "0.8.16", 164 | "loose-envify": "1.3.1", 165 | "object-assign": "4.1.1" 166 | } 167 | }, 168 | "react": { 169 | "version": "16.3.2", 170 | "resolved": "https://registry.npmjs.org/react/-/react-16.3.2.tgz", 171 | "integrity": "sha512-o5GPdkhciQ3cEph6qgvYB7LTOHw/GB0qRI6ZFNugj49qJCFfgHwVNjZ5u+b7nif4vOeMIOuYj3CeYe2IBD74lg==", 172 | "requires": { 173 | "fbjs": "0.8.16", 174 | "loose-envify": "1.3.1", 175 | "object-assign": "4.1.1", 176 | "prop-types": "15.6.1" 177 | } 178 | }, 179 | "react-is": { 180 | "version": "16.3.2", 181 | "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.3.2.tgz", 182 | "integrity": "sha512-ybEM7YOr4yBgFd6w8dJqwxegqZGJNBZl6U27HnGKuTZmDvVrD5quWOK/wAnMywiZzW+Qsk+l4X2c70+thp/A8Q==" 183 | }, 184 | "safer-buffer": { 185 | "version": "2.1.2", 186 | "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", 187 | "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" 188 | }, 189 | "setimmediate": { 190 | "version": "1.0.5", 191 | "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", 192 | "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" 193 | }, 194 | "styled-components": { 195 | "version": "3.2.6", 196 | "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-3.2.6.tgz", 197 | "integrity": "sha1-mebnWnRr3t0pWhfgPdFJMFWhzDs=", 198 | "requires": { 199 | "buffer": "5.1.0", 200 | "css-to-react-native": "2.1.2", 201 | "fbjs": "0.8.16", 202 | "hoist-non-react-statics": "2.5.0", 203 | "is-plain-object": "2.0.4", 204 | "prop-types": "15.6.1", 205 | "react-is": "16.3.2", 206 | "stylis": "3.5.0", 207 | "stylis-rule-sheet": "0.0.10", 208 | "supports-color": "3.2.3" 209 | } 210 | }, 211 | "stylis": { 212 | "version": "3.5.0", 213 | "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.0.tgz", 214 | "integrity": "sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw==" 215 | }, 216 | "stylis-rule-sheet": { 217 | "version": "0.0.10", 218 | "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", 219 | "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" 220 | }, 221 | "supports-color": { 222 | "version": "3.2.3", 223 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", 224 | "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", 225 | "requires": { 226 | "has-flag": "1.0.0" 227 | } 228 | }, 229 | "ua-parser-js": { 230 | "version": "0.7.17", 231 | "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz", 232 | "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==" 233 | }, 234 | "whatwg-fetch": { 235 | "version": "2.0.4", 236 | "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz", 237 | "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==" 238 | } 239 | } 240 | } 241 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled-compliments", 3 | "version": "1.1.0", 4 | "description": "Styled Compliments", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/Walther/styled-compliments.git" 12 | }, 13 | "author": "Walther", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/Walther/styled-compliments/issues" 17 | }, 18 | "homepage": "https://github.com/Walther/styled-compliments#readme", 19 | "dependencies": { 20 | "react": "^16.3.2", 21 | "styled-components": "^3.2.6" 22 | } 23 | } 24 | --------------------------------------------------------------------------------