New demo (#65)

.gitignore

@@ -11,6 +11,7 @@ npm-debug.log
 /dist/
 /lib/
 /example/bundle.js
+/example-dist
 
 # General Files
 .sass-cache

example/components/code.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import strip from 'strip-indent';
+
+const Code = ({ children, className }) => (
+  <pre className={className}>
+    {strip(children)
+      .replace(/^\n*/, '')
+      .replace(/\s*\n*$/, '')}
+  </pre>
+);
+
+export const InlineCode = styled(Code)`
+  display: inline-block;
+  background: #333;
+  color: ${({ theme }) => theme.lightText};
+  padding: 1rem;
+  border-radius: 4px;
+  opacity: 0.9;
+  line-height: 1rem;
+  overflow: scroll;
+  max-width: 100%;
+`;
+
+export const CodeBlock = styled(InlineCode)`
+  display: block;
+  line-height: 2rem;
+`;

example/components/demo.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import styled from 'styled-components';
+import Draggable from 'react-draggable';
+import chroma from 'chroma-js';
+import TetherComponent from '../../src/react-tether';
+import Target from './target';
+import Tooltip from './tooltip';
+
+const DemoZone = styled.div`
+  border: 4px solid
+    ${({ theme }) =>
+      chroma(theme.colors[1])
+        .darken()
+        .hex()};
+  border-radius: 4px;
+  height: 600px;
+  position: relative;
+`;
+
+const DraggableTarget = ({ color, height, id, width, ...props }) => (
+  <Draggable {...props}>
+    <Target color={color} height={height} width={width} id={id} />
+  </Draggable>
+);
+
+const Text = styled.p`
+  color: ${({ theme }) => theme.lightText};
+  font-family: ${({ theme }) => theme.font};
+  font-size: 1rem;
+  display: block;
+  margin: 0.5rem;
+  text-align: center;
+`;
+
+export default class Demo extends React.Component {
+  tether = null;
+  container = null;
+
+  componentDidMount() {
+    // Rerender with the container ref
+    this.setState({});
+  }
+
+  render() {
+    return (
+      <DemoZone>
+        <div
+          ref={container => (this.container = container)}
+          style={{ height: '100%' }}
+        >
+          {this.container && (
+            <TetherComponent
+              ref={tether => (this.tether = tether)}
+              attachment="middle left"
+              constraints={[
+                {
+                  to: this.container,
+                  attachment: 'together',
+                },
+              ]}
+            >
+              <DraggableTarget
+                id="DRAG_ME"
+                height={100}
+                width={100}
+                color="red"
+                bounds="parent"
+                onDrag={() => this.tether.position()}
+                defaultPosition={{ x: 25, y: 25 }}
+              />
+              <Tooltip id="WATCH_ME">
+                <Text>Drag the box around</Text>
+                <Text>I'll stay within the outline</Text>
+              </Tooltip>
+            </TetherComponent>
+          )}
+        </div>
+      </DemoZone>
+    );
+  }
+}

example/components/link.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import chroma from 'chroma-js';
+
+export default styled.a`
+  color: ${({ theme }) =>
+    chroma(theme.colors[1])
+      .darken()
+      .hex()};
+`;

example/components/page-title.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import styled, { withTheme } from 'styled-components';
+import TetherComponent from '../../src/react-tether';
+import Target from './target';
+import Tooltip from './tooltip';
+import shuffle from '../shuffle';
+
+const Wrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  padding-bottom: 8rem;
+`;
+
+const Title = styled.h1`
+  color: ${({ theme }) => theme.lightText};
+  font-family: ${({ theme }) => theme.font};
+  letter-spacing: -4px;
+  word-spacing: 0.5rem;
+  margin: 1rem;
+  font-size: 3rem;
+  display: inline-block;
+`;
+
+class PageTitle extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: 0,
+      interval: null,
+    };
+    this.incrementCount = this.incrementCount.bind(this);
+  }
+
+  sides = ['middle left', 'top center', 'middle right', 'top center'];
+
+  direction(tetherString) {
+    return tetherString.match(/left|top|right/)[0];
+  }
+
+  incrementCount() {
+    this.setState(state => ({
+      count: state.count >= 3 ? 0 : state.count + 1,
+    }));
+  }
+
+  componentDidMount() {
+    const interval = setInterval(() => {
+      this.incrementCount();
+    }, 3000);
+    this.setState(() => ({
+      interval,
+    }));
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.state.interval);
+  }
+
+  render() {
+    const { children } = this.props;
+    const side =
+      window.innerWidth > 750 ? this.sides[this.state.count] : 'top center';
+    return (
+      <Wrapper>
+        <TetherComponent
+          attachment={side}
+          constraints={[
+            {
+              to: 'scrollParent',
+              attachment: 'together',
+            },
+          ]}
+        >
+          <Target
+            height="100"
+            width="100"
+            color={this.props.theme.colors[this.state.count]}
+          />
+          <Tooltip side={this.direction(side)}>
+            <Title>{children}</Title>
+          </Tooltip>
+        </TetherComponent>
+      </Wrapper>
+    );
+  }
+}
+
+export default withTheme(PageTitle);

example/components/page.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export default styled.div`
+  width: 100%;
+  max-width: 860px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 5rem;
+`;

example/components/section.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export default styled.section`
+  width: 95%;
+  overflow: hidden;
+  margin-left: auto;
+  margin-right: auto;
+  font-size: 2rem;
+  font-family: ${({ theme }) => theme.font};
+  & p,
+  & nav {
+    margin-top: 0;
+    text-align: center;
+  }
+`;

example/components/target.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import chroma from 'chroma-js';
+
+export default styled.div`
+  display: block;
+  height: ${props => props.height}px;
+  width: ${props => props.width}px;
+  background-color: ${props => props.color};
+  border-radius: 4px;
+  border: 0.3rem solid
+    ${props =>
+      chroma(props.color)
+        .darken()
+        .hex()};
+`;

example/components/theme.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+const theme = {
+  colors: ['#BDA1E8', '#77FFEC', '#E8E19A', '#B1FFDD', '#FFCDBE'],
+  font: '"Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif',
+  lightText: '#fff',
+  darkText: '#000',
+};
+
+export default props => <ThemeProvider theme={theme} {...props} />;

example/components/tooltip.js

@@ -0,0 +1,84 @@
+import styled, { css } from 'styled-components';
+
+// THIS FILE IS AN ABSOLUTE MESS
+// IM TOO TIRED TO FIX IT
+// :)
+
+function triangleForSide(side) {
+  if (side === 'left') {
+    return css`
+      top: calc(50% - 10px);
+      left: -10px;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid transparent;
+      border-right: 10px solid #333;
+    `;
+  } else if (side === 'top') {
+    return css`
+      top: -10px;
+      left: calc(50% - 10px);
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-bottom: 10px solid #333;
+    `;
+  } else if (side === 'right') {
+    return css`
+      top: calc(50% - 10px);
+      right: -10px;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid transparent;
+      border-left: 10px solid #333;
+    `;
+  }
+}
+const triangleCommon = css`
+  position: absolute;
+  content: ' ';
+  font-size: 0;
+  line-height: 0;
+  width: 0;
+`;
+export default styled.div`
+  display: inline-block;
+  border-radius: 6px;
+  background: #333;
+  opacity: 0.8;
+  position: relative;
+  padding: 0.25em;
+
+  ${props =>
+    props.side
+      ? css`
+  margin-${props => props.side}: 10px;
+  &:after {
+    position: absolute;
+    content: ' ';
+    font-size: 0;
+    line-height: 0;
+    width: 0;
+    ${props => triangleForSide(props.side)};
+  }`
+      : css`
+          .tether-target-attached-right &:after {
+            ${props => triangleForSide('left')};
+            ${triangleCommon};
+          }
+          .tether-target-attached-right & {
+            margin-left: 10px;
+          }
+          .tether-target-attached-left &:after {
+            ${props => triangleForSide('right')};
+            ${triangleCommon};
+          }
+          .tether-target-attached-left & {
+            margin-right: 10px;
+          }
+          .tether-target-attached-bottom &:after {
+            ${props => triangleForSide('top')};
+            ${triangleCommon};
+          }
+          .tether-target-attached-bottom & {
+            margin-top: 10px;
+          }
+        `};
+`;

example/index.html

@@ -1,11 +1,13 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en-GB">
 <head>
-  <meta charset="UTF-8">
-  <title>React Tether</title>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>React Tether</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 </head>
 <body>
-  <div id="app"></div>
-  <script src="bundle.js"></script>
+    <div id="app"></div>
+    <script src="./index.js"></script>
 </body>
-</html>
+</html>