19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/demo/dist/main.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Atom One Dark by Daniel Gamage
4 | Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
5 |
6 | base: #282c34
7 | mono-1: #abb2bf
8 | mono-2: #818896
9 | mono-3: #5c6370
10 | hue-1: #56b6c2
11 | hue-2: #61aeee
12 | hue-3: #c678dd
13 | hue-4: #98c379
14 | hue-5: #e06c75
15 | hue-5-2: #be5046
16 | hue-6: #d19a66
17 | hue-6-2: #e6c07b
18 |
19 | */
20 | .hljs {
21 | display: block;
22 | overflow-x: auto;
23 | padding: 0.5em;
24 | color: #abb2bf;
25 | background: #282c34; }
26 |
27 | .hljs-comment,
28 | .hljs-quote {
29 | color: #5c6370;
30 | font-style: italic; }
31 |
32 | .hljs-doctag,
33 | .hljs-keyword,
34 | .hljs-formula {
35 | color: #c678dd; }
36 |
37 | .hljs-section,
38 | .hljs-name,
39 | .hljs-selector-tag,
40 | .hljs-deletion,
41 | .hljs-subst {
42 | color: #e06c75; }
43 |
44 | .hljs-literal {
45 | color: #56b6c2; }
46 |
47 | .hljs-string,
48 | .hljs-regexp,
49 | .hljs-addition,
50 | .hljs-attribute,
51 | .hljs-meta-string {
52 | color: #98c379; }
53 |
54 | .hljs-built_in,
55 | .hljs-class .hljs-title {
56 | color: #e6c07b; }
57 |
58 | .hljs-attr,
59 | .hljs-variable,
60 | .hljs-template-variable,
61 | .hljs-type,
62 | .hljs-selector-class,
63 | .hljs-selector-attr,
64 | .hljs-selector-pseudo,
65 | .hljs-number {
66 | color: #d19a66; }
67 |
68 | .hljs-symbol,
69 | .hljs-bullet,
70 | .hljs-link,
71 | .hljs-meta,
72 | .hljs-selector-id,
73 | .hljs-title {
74 | color: #61aeee; }
75 |
76 | .hljs-emphasis {
77 | font-style: italic; }
78 |
79 | .hljs-strong {
80 | font-weight: bold; }
81 |
82 | .hljs-link {
83 | text-decoration: underline; }
84 |
85 | /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9ub2RlX21vZHVsZXMvaGlnaGxpZ2h0LmpzL3N0eWxlcy9hdG9tLW9uZS1kYXJrLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBa0JFO0FBQ0Y7RUFDRSxlQUFlO0VBQ2YsaUJBQWlCO0VBQ2pCLGVBQWU7RUFDZixlQUFlO0VBQ2Ysb0JBQW9CLEVBQUU7O0FBRXhCOztFQUVFLGVBQWU7RUFDZixtQkFBbUIsRUFBRTs7QUFFdkI7OztFQUdFLGVBQWUsRUFBRTs7QUFFbkI7Ozs7O0VBS0UsZUFBZSxFQUFFOztBQUVuQjtFQUNFLGVBQWUsRUFBRTs7QUFFbkI7Ozs7O0VBS0UsZUFBZSxFQUFFOztBQUVuQjs7RUFFRSxlQUFlLEVBQUU7O0FBRW5COzs7Ozs7OztFQVFFLGVBQWUsRUFBRTs7QUFFbkI7Ozs7OztFQU1FLGVBQWUsRUFBRTs7QUFFbkI7RUFDRSxtQkFBbUIsRUFBRTs7QUFFdkI7RUFDRSxrQkFBa0IsRUFBRTs7QUFFdEI7RUFDRSwyQkFBMkIsRUFBRSIsImZpbGUiOiJtYWluLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG5cbkF0b20gT25lIERhcmsgYnkgRGFuaWVsIEdhbWFnZVxuT3JpZ2luYWwgT25lIERhcmsgU3ludGF4IHRoZW1lIGZyb20gaHR0cHM6Ly9naXRodWIuY29tL2F0b20vb25lLWRhcmstc3ludGF4XG5cbmJhc2U6ICAgICMyODJjMzRcbm1vbm8tMTogICNhYmIyYmZcbm1vbm8tMjogICM4MTg4OTZcbm1vbm8tMzogICM1YzYzNzBcbmh1ZS0xOiAgICM1NmI2YzJcbmh1ZS0yOiAgICM2MWFlZWVcbmh1ZS0zOiAgICNjNjc4ZGRcbmh1ZS00OiAgICM5OGMzNzlcbmh1ZS01OiAgICNlMDZjNzVcbmh1ZS01LTI6ICNiZTUwNDZcbmh1ZS02OiAgICNkMTlhNjZcbmh1ZS02LTI6ICNlNmMwN2JcblxuKi9cbi5obGpzIHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIG92ZXJmbG93LXg6IGF1dG87XG4gIHBhZGRpbmc6IDAuNWVtO1xuICBjb2xvcjogI2FiYjJiZjtcbiAgYmFja2dyb3VuZDogIzI4MmMzNDsgfVxuXG4uaGxqcy1jb21tZW50LFxuLmhsanMtcXVvdGUge1xuICBjb2xvcjogIzVjNjM3MDtcbiAgZm9udC1zdHlsZTogaXRhbGljOyB9XG5cbi5obGpzLWRvY3RhZyxcbi5obGpzLWtleXdvcmQsXG4uaGxqcy1mb3JtdWxhIHtcbiAgY29sb3I6ICNjNjc4ZGQ7IH1cblxuLmhsanMtc2VjdGlvbixcbi5obGpzLW5hbWUsXG4uaGxqcy1zZWxlY3Rvci10YWcsXG4uaGxqcy1kZWxldGlvbixcbi5obGpzLXN1YnN0IHtcbiAgY29sb3I6ICNlMDZjNzU7IH1cblxuLmhsanMtbGl0ZXJhbCB7XG4gIGNvbG9yOiAjNTZiNmMyOyB9XG5cbi5obGpzLXN0cmluZyxcbi5obGpzLXJlZ2V4cCxcbi5obGpzLWFkZGl0aW9uLFxuLmhsanMtYXR0cmlidXRlLFxuLmhsanMtbWV0YS1zdHJpbmcge1xuICBjb2xvcjogIzk4YzM3OTsgfVxuXG4uaGxqcy1idWlsdF9pbixcbi5obGpzLWNsYXNzIC5obGpzLXRpdGxlIHtcbiAgY29sb3I6ICNlNmMwN2I7IH1cblxuLmhsanMtYXR0cixcbi5obGpzLXZhcmlhYmxlLFxuLmhsanMtdGVtcGxhdGUtdmFyaWFibGUsXG4uaGxqcy10eXBlLFxuLmhsanMtc2VsZWN0b3ItY2xhc3MsXG4uaGxqcy1zZWxlY3Rvci1hdHRyLFxuLmhsanMtc2VsZWN0b3ItcHNldWRvLFxuLmhsanMtbnVtYmVyIHtcbiAgY29sb3I6ICNkMTlhNjY7IH1cblxuLmhsanMtc3ltYm9sLFxuLmhsanMtYnVsbGV0LFxuLmhsanMtbGluayxcbi5obGpzLW1ldGEsXG4uaGxqcy1zZWxlY3Rvci1pZCxcbi5obGpzLXRpdGxlIHtcbiAgY29sb3I6ICM2MWFlZWU7IH1cblxuLmhsanMtZW1waGFzaXMge1xuICBmb250LXN0eWxlOiBpdGFsaWM7IH1cblxuLmhsanMtc3Ryb25nIHtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7IH1cblxuLmhsanMtbGluayB7XG4gIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lOyB9XG5cblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gLi9ub2RlX21vZHVsZXMvaGlnaGxpZ2h0LmpzL3N0eWxlcy9hdG9tLW9uZS1kYXJrLmNzcyJdLCJzb3VyY2VSb290IjoiIn0=*/
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/demo/index.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 | import Highlight from 'react-highlight';
5 | import 'highlight.js/styles/atom-one-dark.css';
6 |
7 | import DadJoke from 'DadJoke';
8 | import {
9 | Jumbotron,
10 | PageHeader,
11 | Panel
12 | } from 'react-bootstrap';
13 |
14 | import './main.scss';
15 |
16 | const usage = `import React from 'react';
17 | import DadJoke from 'react-dadjoke';
18 |
19 | const MyComponent = () => (
20 |
21 | ...
22 |
25 | );`
26 |
27 | const Demo = () => (
28 |
29 |
30 |
35 |
36 |
120 | );
121 |
122 | ReactDOM.render(
31 |
34 | React Dad Joke
32 |Add the most hilarious jokes to your app or web site!
33 |
37 |
119 |
38 |
39 | Basic Example
40 |
41 |
45 |
46 | <DadJoke /> }>
42 |
47 |
48 | Installation
49 |
50 | Install with npm:
52 |
53 | npm install --save react-dadjoke.
51 |
54 |
55 | Usage
56 |
57 |
58 | { usage }
59 |
60 |
61 |
62 |
63 |
64 | Display as image
65 |
66 |
70 |
71 | <DadJoke img /> }>
67 |
72 |
73 | Display with refresh button
74 |
75 |
79 |
80 | <DadJoke refreshButton /> }>
76 |
81 |
82 | Display a specific joke
83 |
84 |
88 |
89 | <DadJoke jokeID="haahVKZDtrc" /> }>
85 |
90 |
91 | Optional Props
92 |
93 |
118 | -
94 |
-
95 |
className(string) adds to wrappingdivorimg. 96 | Default:.dad-joke97 |
98 |
99 | -
100 |
jokeID(string) specify a joke to display 101 |
102 |
103 | -
104 |
img(boolean) display an image instead of text 105 |
106 |
107 | -
108 |
refreshButton(boolean) display a refresh button 109 |
110 |
111 | -
112 |
refreshButtonClassName113 | (string) adds classes(es) to thebutton. 114 | Default:.dad-joke__refresh-button115 |
116 |
45 |
53 | );
54 | }
55 | }
56 |
57 | DadJoke.propTypes = {
58 | className: PropTypes.string,
59 | jokeID: PropTypes.string,
60 | img: PropTypes.bool,
61 | refreshButton: PropTypes.bool,
62 | refreshButtonClassName: PropTypes.string,
63 | };
64 |
65 | DadJoke.defaultProps = {
66 | className: 'dad-joke',
67 | jokeID: null,
68 | img: false,
69 | refreshButton: false,
70 | refreshButtonClassName: 'dad-joke__refresh-button',
71 | };
72 |
--------------------------------------------------------------------------------
/src/components/react-dadjoke.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import axios from "axios";
4 |
5 | const BASE_API_URL = "https://icanhazdadjoke.com";
6 |
7 | export default class DadJoke extends React.Component {
8 | constructor(props) {
9 | super(props);
10 | this.state = {
11 | joke: null
12 | };
13 | this.loadJoke = this.loadJoke.bind(this);
14 | }
15 |
16 | componentDidMount() {
17 | this.loadJoke();
18 | }
19 |
20 | loadJoke() {
21 | let url = BASE_API_URL;
22 |
23 | if (this.props.jokeID) {
24 | url += `/j/${ this.props.jokeID }`;
25 | }
26 | axios.get(url, {
27 | headers: {
28 | "Accept": "application/json"
29 | }
30 | }).then((res) => {
31 | this.setState({ joke: { id: res.data.id, text: res.data.joke }});
32 | });
33 | }
34 |
35 | render() {
36 | const { className, img, refreshButton, refreshButtonClassName } = this.props;
37 | const { joke } = this.state;
38 | if (!joke) {
39 | ;
40 | }
41 | return (
42 | img ?
43 |
46 | { joke.text }
47 |
48 | {
49 | refreshButton &&
50 |
51 | }
52 |
45 | { joke.text }
46 | {
47 | refreshButton &&
48 |
49 | }
50 |
51 | );
52 | }
53 | }
54 |
55 | DadJoke.propTypes = {
56 | className: PropTypes.string,
57 | jokeID: PropTypes.string,
58 | img: PropTypes.bool,
59 | refreshButton: PropTypes.bool,
60 | refreshButtonClassName: PropTypes.string
61 | };
62 |
63 | DadJoke.defaultProps = {
64 | className: "dad-joke",
65 | jokeID: null,
66 | img: false,
67 | refreshButton: false,
68 | refreshButtonClassName: "dad-joke__refresh-button"
69 | };
70 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | DadJoke:
3 | require("./components/react-dadjoke")
4 | };
5 |
--------------------------------------------------------------------------------
/test/client/main.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Test setup for client-side tests.
3 | *
4 | * Intended for:
5 | * - Karma tests: `builder run test-frontend`
6 | * - Browser tests: `http://localhost:3000/test/client/test.html`
7 | */
8 | /*globals window:false*/
9 | const chai = require("chai");
10 | const sinonChai = require("sinon-chai");
11 |
12 | // --------------------------------------------------------------------------
13 | // Chai / Sinon / Mocha configuration.
14 | // --------------------------------------------------------------------------
15 | // Exports
16 | window.expect = chai.expect;
17 |
18 | // Plugins
19 | chai.use(sinonChai);
20 |
21 | // Mocha (part of static include).
22 | window.mocha.setup({
23 | ui: "bdd",
24 | bail: false
25 | });
26 |
27 | // --------------------------------------------------------------------------
28 | // Bootstrap
29 | // --------------------------------------------------------------------------
30 | // Use webpack to include all app code _except_ the entry point so we can get
31 | // code coverage in the bundle, whether tested or not.
32 | const srcReq = require.context("src", true, /\.jsx?$/);
33 | srcReq.keys().map(srcReq);
34 |
35 | // Use webpack to infer and `require` tests automatically.
36 | const testsReq = require.context(".", true, /\.spec.jsx?$/);
37 | testsReq.keys().map(testsReq);
38 |
39 | // Only start mocha in browser.
40 | if (!window.__karma__) {
41 | window.mocha.run();
42 | }
43 |
--------------------------------------------------------------------------------
/test/client/spec/components/react-dadjoke.spec.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Client tests
3 | */
4 | import React from "react";
5 | import Component from "src/components/react-dadjoke";
6 | import TestUtils from "react-addons-test-utils";
7 |
8 | describe("components/react-dadjoke", () => {
9 |
10 | it("has expected content with deep render");
11 |
12 | it("has expected content with shallow render");
13 | });
14 |
--------------------------------------------------------------------------------
/test/client/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |