fix: Fix propTypes and remove React warnings

Fixes #1

Author: Andrey Okonetchnikov

src/components/ColorSwatch.jsx

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { readableColor } from "polished";
 import { Swatch, SwatchToken, SwatchValue } from "../";
 import { css } from "theme-ui";
+import { tokenPropType, valuePropType } from "../propTypes";
 
 export const ColorSwatch = ({ value, token }) => {
 	const color = readableColor(
@@ -28,8 +29,8 @@ export const ColorSwatch = ({ value, token }) => {
 };
 
 ColorSwatch.propTypes = {
-	token: PropTypes.string.isRequired,
-	value: PropTypes.string.isRequired
+	...tokenPropType,
+	...valuePropType
 };
 
 /** @component */

src/components/FontSizeSwatch.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { css } from "theme-ui";
+import { valuePropType } from "../propTypes";
 
 const FontSizeSwatch = ({ value, css: componentCSS, ...rest }) => (
 	<p
@@ -16,7 +17,7 @@ const FontSizeSwatch = ({ value, css: componentCSS, ...rest }) => (
 );
 
 FontSizeSwatch.propTypes = {
-	value: PropTypes.string.isRequired
+	...valuePropType
 };
 
 /** @component */

src/components/PaletteSwatch.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Swatches, ColorSwatch } from "../index";
+import { tokenPropType, valuePropType } from "../propTypes";
 
 export const PaletteSwatch = ({ token, value }) => (
 	<Swatches items={value}>
@@ -9,8 +10,8 @@ export const PaletteSwatch = ({ token, value }) => (
 );
 
 PaletteSwatch.propTypes = {
-	token: PropTypes.string.isRequired,
-	value: PropTypes.string.isRequired
+	...tokenPropType,
+	...valuePropType
 };
 
 /** @component */

src/components/SpacingSwatch.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { css } from "theme-ui";
 import { SwatchValue } from "../";
+import { valuePropType } from "../propTypes";
 
 const SpacingSwatch = ({ value, css: componentCSS, ...rest }) => {
 	return (
@@ -21,7 +22,7 @@ const SpacingSwatch = ({ value, css: componentCSS, ...rest }) => {
 };
 
 SpacingSwatch.propTypes = {
-	value: PropTypes.string.isRequired
+	...valuePropType
 };
 
 /** @component */

src/components/Swatch.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import copy from "clipboard-copy";
+import { tokenPropType, valuePropType } from "../propTypes";
 
 function Swatch(props) {
 	return (
@@ -16,8 +17,8 @@ function Swatch(props) {
 }
 
 Swatch.propTypes = {
-	token: PropTypes.string.isRequired,
-	value: PropTypes.string.isRequired
+	...tokenPropType,
+	...valuePropType
 };
 
 export default Swatch;

src/propTypes.js

@@ -0,0 +1,21 @@
+import PropTypes from "prop-types";
+
+/**
+ * Design token name
+ * See https://theme-ui.com/theme-spec
+ *  */
+export const tokenPropType = {
+	token: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+};
+
+/**
+ * The value to render inside the swatch
+ *  */
+export const valuePropType = {
+	value: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
+		PropTypes.object,
+		PropTypes.array
+	]).isRequired
+};