Implement prop-types for component

lucagez · Nov 25, 2018 · 5c2f025 · 5c2f025
1 parent 9ed0879
commit 5c2f025
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -28,9 +28,9 @@ import myImage from "./media/myImage.png"
 class App extends Component {
   render() {
     return (
-      <div> 
+      <div>
         /* Sky adapts size to its container */
-        <Sky 
+        <Sky
           images={{
             /* FORMAT AS FOLLOWS */
             0: "https://linkToYourImage0",  /* You can pass as many images as you want */
@@ -60,18 +60,16 @@ export default App;
 
 ### images
 
-Type: Object. Default: null
+Type: Object. **Required**
 
 **NOTE:** Only one object is allowed to be passed.
 
 ### how
 
-Type: Number. Default: null
+Type: Number. **Required**
 
 Number of images you want to display
 
-**NOTE:** you must pass a number to display your images
-
 ### time
 
 Type: Number. Default: 20
@@ -82,16 +80,16 @@ Number of seconds of every single animation
 
 Type: String. Default: 150px
 
-Dimension of the images 
+Dimension of the images
 
 ### background
 
 Type: String. Default: none
 
-Color of the background 
+Color of the background
 
 
 
 ## License
 
-MIT
+MIT
diff --git a/module/.babelrc b/module/.babelrc
@@ -3,5 +3,12 @@
       "react",
       "env",
       "stage-0"
+  ],
+  "plugins": [
+    [
+      "transform-react-remove-prop-types", {
+        "ignoreFilenames": ["node_modules"]
+      }
+    ]
   ]
-}
+}
diff --git a/module/package.json b/module/package.json
@@ -27,6 +27,7 @@
     "devDependencies": {
         "babel-core": "^6.21.0",
         "babel-loader": "^7.1.4",
+        "babel-plugin-transform-react-remove-prop-types": "^0.4.20",
         "babel-preset-env": "^1.6.1",
         "babel-preset-react": "^6.16.0",
         "babel-preset-stage-0": "^6.24.1",
@@ -40,4 +41,4 @@
     "dependencies": {
         "webpack-dev-server": "^3.1.10"
     }
-}
+}
diff --git a/module/src/Sky.jsx → module/src/Sky.js b/module/src/Sky.jsx → module/src/Sky.js
@@ -1,5 +1,6 @@
-import React from "react"
-import Item from "./item"
+import React from 'react'
+import PropTypes from 'prop-types'
+import Item from './item'
 
 class Sky extends React.Component {
   constructor(props) {
@@ -38,7 +39,7 @@ class Sky extends React.Component {
   }
 
   render() {
-    const items = this.props.images;
+    const { images, background, size, time } = this.props;
     const outerStyle = {
       position: 'absolute',
       top: '0',
@@ -49,21 +50,21 @@ class Sky extends React.Component {
       padding: '0',
       overflow: 'hidden',
       zIndex: '-1',
-      background: this.props.background ? this.props.background : ''
+      background
     }
 
     return (
       <div style={outerStyle} id="sky">
         {this.state.moves.map((e, i) => {
-          const conditional = Math.floor(Math.random() * Object.keys(items).length);
+          const conditional = Math.floor(Math.random() * Object.keys(images).length);
 
           return <Item
-            what={items[conditional]}
+            what={images[conditional]}
             from={[e.fromX, e.fromY]}
             to={[e.toX, e.toY]}
             rotation={e.rotation}
-            size={this.props.size}
-            time={this.props.time}
+            size={size}
+            time={time}
             key={i}
           />
         })}
@@ -72,4 +73,19 @@ class Sky extends React.Component {
   }
 }
 
-export default Sky;
+
+Sky.defaultProps = {
+  size: '150px',
+  background: '',
+  time: 20
+}
+
+Sky.propTypes = {
+  size: PropTypes.string,
+  background: PropTypes.string,
+  time: PropTypes.number,
+  how: PropTypes.number.isRequired,
+  images: PropTypes.object.isRequired
+}
+
+export default Sky;
diff --git a/module/src/item.js b/module/src/item.js
@@ -1,4 +1,5 @@
-import React from "react"
+import React from 'react'
+import PropTypes from 'prop-types'
 
 class Item extends React.Component {
   constructor(props) {
@@ -17,8 +18,7 @@ class Item extends React.Component {
 
   setStyle() {
     const movingStyle = `translate(${Math.random() * window.innerHeight * 2}px, ${Math.random() * window.innerWidth * 2}px) rotate(${Math.random() * 360}deg)`;
-    const time = this.props.time ? this.props.time : 10;
-    const size = this.props.size ? this.props.size : '150px';
+    const { time, size } = this.props;
     const style = {
       position: 'absolute',
       zIndex: '-1',
@@ -53,4 +53,11 @@ class Item extends React.Component {
   }
 }
 
+Item.propTypes = {
+  time: PropTypes.number.isRequired,
+  size: PropTypes.string.isRequired,
+  from: PropTypes.array.isRequired,
+  what: PropTypes.string.isRequired
+}
+
 export default Item;
diff --git a/module/webpack.config.js b/module/webpack.config.js
@@ -2,7 +2,7 @@ var path = require('path');
 
 module.exports = {
     mode: 'production',
-    entry: './src/Sky.jsx',
+    entry: './src/Sky.js',
     output: {
         path: path.resolve('lib'),
         filename: 'Sky.js',
@@ -11,10 +11,10 @@ module.exports = {
     module: {
         rules: [
             {
-                test: /\.jsx?$/,
+                test: /(\.js|\.jsx)$/,
                 exclude: /(node_modules)/,
                 use: 'babel-loader'
             }
         ]
     }
-}
+}
diff --git a/src/App.js b/src/App.js
@@ -142,7 +142,7 @@ class App extends Component {
         <div className="title">
           <div className="git">
             <h1>Sky</h1>
-            <a class="github-button" href="https://github.com/lucagez/sky" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star lucagez/sky on GitHub">Star</a>
+            <a className="github-button" href="https://github.com/lucagez/sky" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star lucagez/sky on GitHub">Star</a>
           </div>
           <button how={35} background={'#2F3939'} value={'gif'} onClick={this.handleClick}>gif 🤣</button>
           <button how={100} background={'#2F3939'} value={'404'} onClick={this.handleClick}>404 💩</button>
@@ -160,7 +160,7 @@ class App extends Component {
         <Sky
           images={modes[mode]}
           how={how}
-          size={'100px'}
+          size="100px"
           time={30}
           background={background}
         />

diff --git a/src/components/sky/item.js b/src/components/sky/item.js
@@ -1,4 +1,5 @@
-import React from "react"
+import React from 'react'
+import PropTypes from 'prop-types'
 
 class Item extends React.Component {
   constructor(props) {
@@ -17,8 +18,7 @@ class Item extends React.Component {
 
   setStyle() {
     const movingStyle = `translate(${Math.random() * window.innerHeight * 2}px, ${Math.random() * window.innerWidth * 2}px) rotate(${Math.random() * 360}deg)`;
-    const time = this.props.time ? this.props.time : 20;
-    const size = this.props.size ? this.props.size : '150px';
+    const { time, size } = this.props;
     const style = {
       position: 'absolute',
       zIndex: '-1',
@@ -53,4 +53,11 @@ class Item extends React.Component {
   }
 }
 
+Item.propTypes = {
+  time: PropTypes.number.isRequired,
+  size: PropTypes.string.isRequired,
+  from: PropTypes.array.isRequired,
+  what: PropTypes.string.isRequired
+}
+
 export default Item;
diff --git a/src/components/sky/sky.js b/src/components/sky/sky.js
@@ -1,5 +1,6 @@
-import React from "react"
-import Item from "./item"
+import React from 'react'
+import PropTypes from 'prop-types'
+import Item from './item'
 
 class Sky extends React.Component {
   constructor(props) {
@@ -38,7 +39,7 @@ class Sky extends React.Component {
   }
 
   render() {
-    const items = this.props.images;
+    const { images, background, size, time } = this.props;
     const outerStyle = {
       position: 'absolute',
       top: '0',
@@ -49,21 +50,21 @@ class Sky extends React.Component {
       padding: '0',
       overflow: 'hidden',
       zIndex: '-1',
-      background: this.props.background ? this.props.background : ''
+      background
     }
 
     return (
       <div style={outerStyle} id="sky">
         {this.state.moves.map((e, i) => {
-          const conditional = Math.floor(Math.random() * Object.keys(items).length);
+          const conditional = Math.floor(Math.random() * Object.keys(images).length);
 
           return <Item
-            what={items[conditional]}
+            what={images[conditional]}
             from={[e.fromX, e.fromY]}
             to={[e.toX, e.toY]}
             rotation={e.rotation}
-            size={this.props.size}
-            time={this.props.time}
+            size={size}
+            time={time}
             key={i}
           />
         })}
@@ -72,4 +73,19 @@ class Sky extends React.Component {
   }
 }
 
+
+Sky.defaultProps = {
+  size: '150px',
+  background: '',
+  time: 20
+}
+
+Sky.propTypes = {
+  size: PropTypes.string,
+  background: PropTypes.string,
+  time: PropTypes.number,
+  how: PropTypes.any.isRequired,
+  images: PropTypes.object.isRequired
+}
+
 export default Sky;