Initial commit

.gitignore

@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Maximilian
+
+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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.

README.md

@@ -0,0 +1,52 @@
+# Colors
+
+A demo React app built with [💅 `styled-components`](https://github.com/styled-components/styled-components) and [✨ `polished`](https://github.com/styled-components/polished).
+
+## Structure
+
+Every component has a folder beneath the `src/` folder, with an `index.js` containing the component and a `style.js` containing the styled components used within that component.
+
+```sh
+colors
+├── App
+├── Tile
+├── Tiles
+├── global-styles.js # The global styles
+└── index.js
+```
+
+```
+┌───────────────────────────────────────────────────────────────────┐
+│                              <App />                              │
+│┌─────────────────────────────────────────────────────────────────┐│
+││                                                                 ││
+││                                                                 ││
+││                           <BigTile />                           ││
+││                                                                 ││
+││                                                                 ││
+│└─────────────────────────────────────────────────────────────────┘│
+│┌─────────────────────────────────────────────────────────────────┐│
+││ <Tiles />                                                       ││
+││┌───────────┐┌───────────┐┌───────────┐┌───────────┐┌───────────┐││
+│││           ││           ││           ││           ││           │││
+│││ <Tile />  ││ <Tile />  ││ <Tile />  ││ <Tile />  ││ <Tile />  │││
+│││           ││           ││           ││           ││           │││
+││└───────────┘└───────────┘└───────────┘└───────────┘└───────────┘││
+│└─────────────────────────────────────────────────────────────────┘│
+└───────────────────────────────────────────────────────────────────┘
+```
+
+## Calculation
+
+We take the entered color, convert it to HSL and render the same hue and saturation with lightness' of `0.1`, `0.3`, `0.5`, `0.7` and `0.9`.
+
+## Uses
+
+- [React](https://github.com/facebook/react)
+- [💅 `styled-components`](https://github.com/styled-components/styled-components)
+- [✨ `polished`](https://github.com/styled-components/polished)
+- [clipboard.js](https://clipboardjs.com/)
+
+## License
+
+Copyright (c) 2017 Maximilian Stoiber. Licensed under the MIT License, see the [LICENSE](LICENSE) file for more information.

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "colors",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.9.3"
+  },
+  "dependencies": {
+    "clipboard": "^1.6.1",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "styled-components": "^1.4.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}

public/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Color Schemer | Built with 💅 styled-components and ✨ polished</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>

src/App/index.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { invert } from 'polished';
+import Tiles from '../Tiles';
+
+import {
+	BigTile,
+	Input,
+	Title,
+	ForkBanner,
+	Link,
+	Wrapper
+} from './style';
+
+let inverted, color;
+class App extends Component {
+	state = {
+		color: '#65daa2'
+	}
+
+	changeColor = (evt) => {
+		this.setState({
+			color: evt.target.value,
+		});
+	}
+
+  render() {
+		try {
+			// This will throw if this.state.color is invalid,
+			// leaving us with the old colors if somebody enters
+			// an invalid color
+			inverted = invert(this.state.color);
+			color = this.state.color;
+		} catch (err) {}
+    return (
+			<Wrapper>
+				<Link href="https://github.com/styled-components/colors-demo">
+					<ForkBanner
+						src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
+						alt="Fork me on GitHub"
+						target="_blank"
+						data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" />
+				</Link>
+	      <BigTile bg={color}>
+					<Title color={inverted}>Colors</Title>
+					<Input
+						type="text"
+						autoFocus
+						value={this.state.color}
+						onChange={this.changeColor}
+						color={inverted}
+					/>
+	      </BigTile>
+				<Tiles color={color} />
+			</Wrapper>
+    );
+  }
+}
+
+export default App;

src/App/style.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+export const BigTile = styled.div`
+	background: ${props => props.bg || '#6cc0e5'};
+	width: 100%;
+	height: 50vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`
+
+export const Input = styled.input`
+	background: transparent;
+	border: none;
+	color: ${props => props.color};
+	font-size: 24px;
+	font-family: monaco,Consolas,Lucida Console,monospace;
+	width: ${props => `${props.value.length * 16 || 96}px`};
+	text-align: center;
+	border-bottom: 1px solid ${props => props.color};
+
+	&:focus,
+	&:hover {
+		outline: none;
+	}
+`
+
+export const Title = styled.h1`
+	position: absolute;
+	top: 0;
+	color: ${props => props.color};
+`
+
+export const ForkBanner = styled.img`
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: 'none';
+`
+
+export const Link = styled.a``;
+
+export const Wrapper = styled.div``;

src/Tile/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+import { invert } from 'polished';
+import Clipboard from 'clipboard';
+import {
+	Wrapper,
+	Text
+} from './style';
+
+class Tile extends React.Component {
+	state = {
+		text: this.props.color,
+	};
+
+	// Set the text of the tile temporarily, reverting
+	// back to the color after one second
+	setText = (text) => {
+		this.setState({
+			text: text,
+		});
+		setTimeout(() => {
+			this.setState({
+				text: this.props.color,
+			});
+		}, 1000);
+	}
+
+	componentDidMount() {
+		const clipboard = new Clipboard(findDOMNode(this.tile));
+		clipboard.on('success', () => {
+			this.setText('Copied! 💯');
+		});
+		clipboard.on('error', function(e) {
+		  this.setText('Copying failed 😢');
+		});
+	}
+
+	render() {
+		const { color } = this.props;
+		return (
+			<Wrapper
+				bg={color}
+				ref={comp => this.tile = comp}
+				data-clipboard-text={color}
+			>
+				<Text color={invert(color)}>{this.state.text}</Text>
+			</Wrapper>
+		);
+	}
+}
+
+export default Tile

src/Tile/style.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.button`
+	background: ${props => props.bg};
+	height: 50vh;
+	width: 20%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	display: block;
+	outline: none;
+	cursor: pointer;
+
+	@media screen and (max-aspect-ratio: 2/3) {
+		width: 100%;
+		height: 10vh;
+	}
+`
+
+export const Text = styled.p`
+	font-size: 1.75em;
+	color: ${props => props.color};
+`

src/Tiles/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+// These are currently not officially exposed, so we import them directly
+import parseColor from 'polished/lib/internalHelpers/_parseColorString'
+import rgbToHsl from 'polished/lib/internalHelpers/_rgbToHsl'
+import hslToHex from 'polished/lib/internalHelpers/_hslToHex'
+
+import Tile from '../Tile';
+import { Wrapper } from './style';
+
+export default ({ color }) => {
+	const base = rgbToHsl(parseColor(color));
+	return (
+		<Wrapper>
+			<Tile color={hslToHex(base.hue, base.saturation, 0.1)} />
+			<Tile color={hslToHex(base.hue, base.saturation, 0.3)} />
+			<Tile color={hslToHex(base.hue, base.saturation, 0.5)} />
+			<Tile color={hslToHex(base.hue, base.saturation, 0.7)} />
+			<Tile color={hslToHex(base.hue, base.saturation, 0.9)} />
+		</Wrapper>
+	)
+}

src/Tiles/style.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+	display: flex;
+	flex-direction: row;
+
+	@media screen and (max-aspect-ratio: 2/3) {
+		flex-direction: column;
+	}
+`

src/global-styles.js

@@ -0,0 +1,15 @@
+import { injectGlobal } from 'styled-components';
+
+injectGlobal`
+	html,
+	#root,
+	body {
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		padding: 0;
+		font-size: 16px;
+		font-family: Andale Mono,AndaleMono,monospace;
+		overflow: hidden;
+	}
+`

src/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './global-styles';
+import App from './App';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);