├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── LICENSE.md
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
└── src
    ├── App.vue
    ├── assets
        └── logo.png
    ├── components
        ├── Lightbulb.vue
        └── RockerSwitch.vue
    ├── main.js
    └── utils
        └── helpers.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) 2019 Danny Feliz.
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-rocker-switch
  2 | 
  3 | > A customizable rocker switch component for Vue.js.
  4 | 
  5 | [<img src="https://img.shields.io/npm/dt/vue-rocker-switch.svg">](https://www.npmjs.com/package/vue-rocker-switch)
  6 | [<img src="https://img.shields.io/npm/v/vue-rocker-switch.svg">](https://www.npmjs.com/package/vue-rocker-switch)
  7 | 
  8 | ![](https://i.imgur.com/SFobdvN.png)
  9 | 
 10 | ## Installation
 11 | 
 12 | ```sh
 13 | npm install vue-rocker-switch --save
 14 | ```
 15 | 
 16 | # Demo
 17 | 
 18 | [![Edit vue-rocker-switch demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/qvw4o1k24)
 19 | 
 20 | ## Usage example
 21 | 
 22 | ```vue
 23 | <template>
 24 |   <RockerSwitch />
 25 | </template>
 26 | 
 27 | <script>
 28 | // Import package
 29 | import RockerSwitch from "vue-rocker-switch";
 30 | // Import styles
 31 | import "vue-rocker-switch/dist/vue-rocker-switch.css";
 32 | 
 33 | export default {
 34 |   name: "App",
 35 |   components: {
 36 |     RockerSwitch
 37 |   }
 38 | };
 39 | </script>
 40 | ```
 41 | 
 42 | ## Props
 43 | 
 44 | | Prop               | Description                                                                                             | Default value                                                      | Type             |
 45 | | ------------------ | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ---------------- |
 46 | | value              | Boolean value attached to the rocker switcher. This will be used to initialize the component value too. | `false`                                                            | Boolean          |
 47 | | size               | rocker switch size, it can be a string (`small`, `medium` and `large`) or a decimal number              | `small`                                                            | String or Number |
 48 | | labelOn            | Text of the `On` label                                                                                  | `On`                                                               | String or Number |
 49 | | labelOff           | Text of the `Off` label                                                                                 | `Off`                                                              | String or Number |
 50 | | activeColorLabel   | Text color used when the `On` label is active                                                           | ![#fff](https://placehold.it/15/fff/000000?text=+) `#fff`          | String           |
 51 | | inactiveColorLabel | Text color used when the `Off` label is inactive                                                        | ![#333](https://placehold.it/15/333/000000?text=+) `#333`          | String           |
 52 | | backgroundColorOn  | Background color of the `On` button                                                                     | ![#0084d0](https://placehold.it/15/0084d0/000000?text=+) `#0084d0` | String           |
 53 | | backgroundColorOff | Background color of the `Off` button                                                                    | ![#bd5757](https://placehold.it/15/bd5757/000000?text=+) `#bd5757` | String           |
 54 | | borderColor        | Border color of the rocker switch                                                                       | ![#eee](https://placehold.it/15/eee/000000?text=+) `#eee`          | String           |
 55 | | toggle             | Allow to the rocker switch to behave as a toggle switch                                                 | `true`                                                             | Boolean          |
 56 | 
 57 | ## Events
 58 | 
 59 | <table>
 60 |     <thead>
 61 |         <tr>
 62 |             <th>Event</th>
 63 |             <th>Description</th>
 64 |         </tr>
 65 |     </thead>
 66 |     <tbody>
 67 |         <tr>
 68 |             <td>change</td>
 69 |             <td>Fires each time the rocker switch changes.</td>
 70 |         </tr>
 71 |     </tbody>
 72 | </table>
 73 | 
 74 | ## Development setup
 75 | 
 76 | ```
 77 | 
 78 | npm install
 79 | 
 80 | ```
 81 | 
 82 | ### Compiles and hot-reloads for development
 83 | 
 84 | ```
 85 | 
 86 | npm run serve
 87 | 
 88 | ```
 89 | 
 90 | ### Compiles and minifies for production
 91 | 
 92 | ```
 93 | 
 94 | npm run build
 95 | 
 96 | ```
 97 | 
 98 | ### Lints and fixes files
 99 | 
100 | ```
101 | 
102 | npm run lint
103 | 
104 | ```
105 | 
106 | ### Customize configuration
107 | 
108 | See [Configuration Reference](https://cli.vuejs.org/config/).
109 | 
110 | ## Contributing
111 | 
112 | 1. Fork it (<https://github.com/dannyfeliz/vue-rocker-switch/fork>)
113 | 2. Create your feature branch (`git checkout -b feature/fooBar`)
114 | 3. Commit your changes (`git commit -am 'Add some fooBar'`)
115 | 4. Push to the branch (`git push origin feature/fooBar`)
116 | 5. Create a new Pull Request
117 | 
118 | ## License
119 | 
120 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
121 | 
122 | ## Acknowledgments
123 | 
124 | - This project was inspired by this post from codepen.io [Checkbox Toggle Switches Are Confusing UI](https://codepen.io/marcusconnor/post/checkbox-toggle-switches-are-confusing-ui) by [@MarcusConnorNH](https://twitter.com/MarcusConnorNH)
125 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-rocker-switch",
 3 |   "version": "1.2.4",
 4 |   "description": "A customisable rocker switch component for Vue.js",
 5 |   "main": "./dist/vue-rocker-switch.umd.min.js",
 6 |   "files": [
 7 |     "dist/vue-rocker-switch.umd.min.js",
 8 |     "dist/vue-rocker-switch.css"
 9 |   ],
10 |   "keywords": [
11 |     "vue",
12 |     "rocker",
13 |     "switch",
14 |     "vue-rocker",
15 |     "vue-rocker-switch",
16 |     "light-rocker-switch",
17 |     "light-switcher"
18 |   ],
19 |   "author": "Danny Feliz <dannyfeliz08@gmail.com>",
20 |   "license": "MIT",
21 |   "bugs": "https://github.com/DannyFeliz/vue-rocker-switch/issues/new",
22 |   "repository": {
23 |     "type": "git",
24 |     "url": "https://github.com/DannyFeliz/vue-rocker-switch"
25 |   },
26 |   "scripts": {
27 |     "serve": "vue-cli-service serve",
28 |     "build": "vue-cli-service build",
29 |     "bundle": "vue-cli-service build --target lib --name vue-rocker-switch ./src/components/RockerSwitch.vue",
30 |     "lint": "vue-cli-service lint",
31 |     "publish": "npm publish --access public"
32 |   },
33 |   "dependencies": {
34 |     "color-string": "^1.5.3",
35 |     "vue": "^2.5.21"
36 |   },
37 |   "devDependencies": {
38 |     "@vue/cli-plugin-babel": "^3.2.0",
39 |     "@vue/cli-plugin-eslint": "^3.2.0",
40 |     "@vue/cli-service": "^3.2.0",
41 |     "babel-eslint": "^10.0.1",
42 |     "eslint": "^5.8.0",
43 |     "eslint-plugin-vue": "^5.0.0",
44 |     "node-sass": "^4.9.0",
45 |     "sass-loader": "^7.0.1",
46 |     "vue-template-compiler": "^2.5.21"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DannyFeliz/vue-rocker-switch/ef5d9f2f51a288573e8cfb83d49cad7421921187/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-rocker-switch</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-rocker-switch doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Lightbulb :isOn="currentValue" class="pointer"/>
 4 |     <div>
 5 |         <code>{{ currentValue }}</code>
 6 |     </div>
 7 |     <RockerSwitch
 8 |       labelOn="Yes"
 9 |       labelOff="No"
10 |       activeColorLabel="chartreuse"
11 |       inactiveColorLabel="darkred"
12 |       backgroundColorOn="fuchsia"
13 |       backgroundColorOff="#8389f8"
14 |       borderColor="orange"
15 |       size="medium"
16 |       :value="currentValue"
17 |       :toggle="false"
18 |       @change="isOn => currentValue = isOn"
19 |     />
20 |     <RockerSwitch
21 |       :size="1.2"
22 |       :value="currentValue"
23 |       background-color-on="green"
24 |       activeColorLabel="yellow"
25 |       @change="isOn => currentValue = isOn"
26 |     />
27 | 
28 |   </div>
29 | </template>
30 | 
31 | <script>
32 | import Lightbulb from "./components/Lightbulb";
33 | import RockerSwitch from "./components/RockerSwitch";
34 | 
35 | export default {
36 |   name: "app",
37 |   components: {
38 |     RockerSwitch,
39 |     Lightbulb
40 |   },
41 |   data() {
42 |     return {
43 |       currentValue: false
44 |     };
45 |   }
46 | };
47 | </script>
48 | 
49 | <style>
50 | #app div {
51 |   display: flex;
52 |   justify-content: center;
53 |   align-items: center;
54 |   margin-top: 30px;
55 | }
56 | .pointer {
57 |     cursor: pointer;
58 | }
59 | </style>
60 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DannyFeliz/vue-rocker-switch/ef5d9f2f51a288573e8cfb83d49cad7421921187/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Lightbulb.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <img
 4 |       v-if="isOn"
 5 |       height="80"
 6 |       src="https://image.flaticon.com/icons/png/128/351/351667.png"
 7 |     />
 8 |     <img
 9 |       v-else
10 |       height="80"
11 |       src="https://image.flaticon.com/icons/png/256/515/515077.png"
12 |     />
13 |   </div>
14 | </template>
15 | <script>
16 | export default {
17 |   props: {
18 |     isOn: Boolean
19 |   }
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/components/RockerSwitch.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="rocker-switch-container">
  3 |     <label class="rocker" :style="this.rockerSize" @click.prevent="">
  4 |       <input
  5 |         type="checkbox"
  6 |         v-model="isChecked"
  7 |         ref="switch"
  8 |         v-bind="$attrs">
  9 |       <span
 10 |         class="switch-left"
 11 |         @click="changeState(true, $event)">
 12 |         <span>{{ labelOn }}</span>
 13 |       </span>
 14 |       <span
 15 |         class="switch-right"
 16 |         @click="changeState(false, $event)">
 17 |         <span>{{ labelOff }}</span>
 18 |       </span>
 19 |     </label>
 20 |   </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | import { isColorValid }  from '../utils/helpers';
 25 | 
 26 | export default {
 27 |   name: "RockerSwitch",
 28 |   props: {
 29 |     value: {
 30 |       type: Boolean,
 31 |       default: false
 32 |     },
 33 |     size: {
 34 |       type: [String, Number],
 35 |       default: "small",
 36 |       validator(size) {
 37 |         return (
 38 |           ["small", "medium", "large"].includes(
 39 |             size.toString().toLowerCase()
 40 |           ) || typeof size === "number"
 41 |         );
 42 |       }
 43 |     },
 44 |     labelOn: {
 45 |       type: [String, Number],
 46 |       default: "On"
 47 |     },
 48 |     labelOff: {
 49 |       type: [String, Number],
 50 |       default: "Off"
 51 |     },
 52 |     activeColorLabel: {
 53 |       type: String,
 54 |       default: "#fff",
 55 |       validator: isColorValid,
 56 |     },
 57 |     inactiveColorLabel: {
 58 |       type: String,
 59 |       default: "#333",
 60 |       validator: isColorValid,
 61 |     },
 62 |     backgroundColorOn: {
 63 |       type: String,
 64 |       default: "#0084d0",
 65 |       validator: isColorValid,
 66 |     },
 67 |     backgroundColorOff: {
 68 |       type: String,
 69 |       default: "#bd5757",
 70 |       validator: isColorValid,
 71 |     },
 72 |     borderColor: {
 73 |       type: String,
 74 |       default: "#eee",
 75 |       validator: isColorValid,
 76 |     },
 77 |     toggle: {
 78 |       type: Boolean,
 79 |       default: true
 80 |     }
 81 |   },
 82 |   data() {
 83 |     return {
 84 |       isChecked: this.value,
 85 |       sizes: {
 86 |         small: 0.5,
 87 |         medium: 0.8,
 88 |         large: 0.9
 89 |       }
 90 |     };
 91 |   },
 92 |   computed: {
 93 |     labelsSize() {
 94 |       return { on: this.labelOn.length, off: this.labelOff.length };
 95 |     },
 96 |     rockerSize() {
 97 |       return {
 98 |         fontSize:
 99 |           (typeof this.size === "number" ? this.size : this.sizes[this.size]) +
100 |           "em"
101 |       };
102 |     },
103 |     isDisabled() {
104 |       return (
105 |         !!(
106 |           !!this.$attrs.hasOwnProperty("disabled") &&
107 |           this.$attrs.disabled === ""
108 |         ) || this.$attrs.disabled === true
109 |       );
110 |     }
111 |   },
112 |   mounted() {
113 |     this.setUpColors();
114 |   },
115 |   watch: {
116 |     value(currentValue, oldValue) {
117 |       if (!this.isDisabled && currentValue != oldValue) {
118 |           this.isChecked = currentValue;
119 |       }
120 |     },
121 |     isChecked(isOn) {
122 |         this.$emit("change", isOn);
123 |     }
124 |   },
125 |   methods: {
126 |     setUpColors() {
127 |       const root = this.$el;
128 | 
129 |       root.style.setProperty("--onColor", this.backgroundColorOn);
130 |       root.style.setProperty("--offColor", this.backgroundColorOff);
131 |       root.style.setProperty("--borderColor", this.borderColor);
132 |       root.style.setProperty("--activeColorLabel", this.activeColorLabel);
133 |       root.style.setProperty("--inactiveColorLabel", this.inactiveColorLabel);
134 |     },
135 |     changeState(value, event = {}) {
136 |       if (this.isDisabled) {
137 |         event.preventDefault();
138 |         return;
139 |       }
140 | 
141 |       if (this.toggle) {
142 |         this.isChecked = !this.isChecked;
143 |       } else {
144 |         if (this.$refs.switch.checked != value) {
145 |           this.isChecked = value;
146 |         }
147 |         event.preventDefault();
148 |       }
149 |     }
150 |   }
151 | };
152 | </script>
153 | 
154 | <style>
155 | .rocker-switch-container {
156 |   display: inline-block;
157 |   --onColor: #0084d0;
158 |   --offColor: #bd5757;
159 |   --borderColor: #eee;
160 |   --activeColorLabel: #fff;
161 |   --inactiveColorLabel: #333;
162 | }
163 | .rocker-switch-container .mid {
164 |   display: flex;
165 |   align-items: center;
166 |   justify-content: center;
167 |   padding-top: 1em;
168 | }
169 | .rocker-switch-container .rocker {
170 |   display: inline-block;
171 |   position: relative;
172 |   /*
173 |    SIZE OF SWITCH
174 |    ==============
175 |    All sizes are in em - therefore
176 |    changing the font-size here
177 |    will change the size of the switch.
178 |    See .rocker-small below as example.
179 |    */
180 |   font-size: 0.6em;
181 |   font-weight: bold;
182 |   text-align: center;
183 |   text-transform: uppercase;
184 |   color: var(--inactiveColorLabel);
185 |   width: 7em;
186 |   height: 4em;
187 |   overflow: hidden;
188 |   border-bottom: 0.5em solid var(--borderColor);
189 |   box-sizing: border-box;
190 |   font-family: "Arial", sans-serif;
191 |   font-size: 100%;
192 |   user-select: none;
193 |   -webkit-user-select: none;
194 |   -ms-user-select: none;
195 |   -webkit-touch-callout: none;
196 |   -o-user-select: none;
197 |   -moz-user-select: none;
198 | }
199 | .rocker-switch-container .rocker-small {
200 |   font-size: 0.75em;
201 |   /* Sizes the switch */
202 |   margin: 1em;
203 | }
204 | .rocker-switch-container .rocker::before {
205 |   content: "";
206 |   position: absolute;
207 |   top: 0.5em;
208 |   left: 0;
209 |   right: 0;
210 |   bottom: 0;
211 |   background-color: #999;
212 |   border: 0.5em solid var(--borderColor);
213 |   border-bottom: 0;
214 | }
215 | .rocker-switch-container .rocker input {
216 |   opacity: 0;
217 |   width: 0;
218 |   height: 0;
219 | }
220 | .rocker-switch-container .switch-left,
221 | .rocker-switch-container .switch-right {
222 |   cursor: pointer;
223 |   position: absolute;
224 |   display: flex;
225 |   align-items: center;
226 |   justify-content: center;
227 |   height: 2.5em;
228 |   width: 3em;
229 |   transition: 0.2s;
230 | }
231 | .rocker-switch-container .switch-left {
232 |   height: 2.4em;
233 |   width: 2.75em;
234 |   left: 0.85em;
235 |   bottom: 0.4em;
236 |   background-color: #ddd;
237 |   transform: rotate(15deg) skewX(15deg);
238 | }
239 | .rocker-switch-container .switch-right {
240 |   right: 0.5em;
241 |   bottom: 0;
242 |   background-color: var(--offColor);
243 |   color: var(--activeColorLabel);
244 | }
245 | .rocker-switch-container .switch-left::before,
246 | .rocker-switch-container .switch-right::before {
247 |   content: "";
248 |   position: absolute;
249 |   width: 0.4em;
250 |   height: 2.45em;
251 |   bottom: -0.45em;
252 |   background-color: #ccc;
253 |   transform: skewY(-65deg);
254 | }
255 | .rocker-switch-container .switch-left::before {
256 |   left: -0.4em;
257 | }
258 | .rocker-switch-container .switch-right::before {
259 |   right: -0.375em;
260 |   background-color: transparent;
261 |   transform: skewY(65deg);
262 | }
263 | .rocker-switch-container input:checked + .switch-left {
264 |   background-color: var(--onColor);
265 |   color: var(--activeColorLabel);
266 |   bottom: 0px;
267 |   left: 0.5em;
268 |   height: 2.5em;
269 |   width: 3em;
270 |   transform: rotate(0deg) skewX(0deg);
271 | }
272 | .rocker-switch-container input:checked + .switch-left::before {
273 |   background-color: transparent;
274 |   width: 3.0833em;
275 | }
276 | .rocker-switch-container input:checked + .switch-left + .switch-right {
277 |   background-color: #ddd;
278 |   color: var(--inactiveColorLabel);
279 |   bottom: 0.4em;
280 |   right: 0.8em;
281 |   height: 2.4em;
282 |   width: 2.75em;
283 |   transform: rotate(-15deg) skewX(-15deg);
284 | }
285 | .rocker-switch-container input:checked + .switch-left + .switch-right::before {
286 |   background-color: #ccc;
287 | }
288 | .rocker-switch-container input:focus + .switch-left {
289 |   color: var(--inactiveColorLabel);
290 | }
291 | .rocker-switch-container input:checked:focus + .switch-left {
292 |   color: var(--activeColorLabel);
293 | }
294 | .rocker-switch-container input:focus + .switch-left + .switch-right {
295 |   color: var(--activeColorLabel);
296 | }
297 | .rocker-switch-container input:checked:focus + .switch-left + .switch-right {
298 |   color: var(--inactiveColorLabel);
299 | }
300 | </style>
301 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/src/utils/helpers.js:
--------------------------------------------------------------------------------
 1 | import colorString from 'color-string';
 2 | 
 3 | export const isColorValid = (color) => {
 4 |   const isValid = !!colorString.get(color);
 5 | 
 6 |   if (!isValid) {
 7 |     console.warn(`The color ${color} it's not a valid color, please check your input.`);
 8 |   }
 9 | 
10 |   return isValid;
11 | };
12 | 


--------------------------------------------------------------------------------