use nice-color-palettes to generate palettes

src/App.js

@@ -1,3 +1,4 @@
+import palette from 'nice-color-palettes';
 import chroma from 'chroma-js';
 import React from 'react';
 import styled from 'styled-components';
@@ -185,42 +186,74 @@ Color.defaultProps = {
 }
 
 S.Color = styled(Color)`
+	display: flex;
+	flex-direction: column;
+	justify-content: stretch;
+	align-items: stretch;
+
+	ul {
+		display: flex;
+		flex-direction: column;
+		justify-content: stretch;
+		align-items: stretch;
+
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	li {
+		display: flex;
+		flex-direction: column;
+		justify-content: stretch;
+		align-items: stretch;
+		flex: 1 1 100%;
+	}
+`;
+
+class Palette extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			palette: palette[0],
+		}
+
+		this.randomizePalette = this.randomizePalette.bind(this);
+	}
+
+	randomizePalette() {
+		const newPalette = palette[Math.floor(Math.random() * palette.length)];
+		this.setState({palette: newPalette});
+	}
+
+	render() {
+		const colors = this.state.palette.map(color =>
+			<li key={color}>
+				<S.Color
+					className="color-list"
+					baseColor={color}
+				/>
+			</li>
+		);
+		return (
+			<article>
+				<button onClick={this.randomizePalette}>Random Palette</button>
+				<ul className={this.props.className}>
+					{colors}
+				</ul>
+			</article>
+		);
+	}
+}
+
+S.Palette = styled(Palette)`
 display: flex;
-flex-direction: column;
-justify-content: stretch;
-align-items: stretch;
-
-ul {
-	display: flex;
-	flex-direction: column;
-	justify-content: stretch;
-	align-items: stretch;
-
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-
-li {
-	display: flex;
-	flex-direction: column;
-	justify-content: stretch;
-	align-items: stretch;
-	flex: 1 1 100%;
-}
 `;
 
 function App() {
 	return (
 		<div className="App">
-			<S.Color
+			<S.Palette />
-				className="color-list"
-				baseColor="#dbdfac"
-			/>
-			<S.Color
-				className="color-list"
-				baseColor="#fb3640"
-			/>
 		</div>
 	);
 }