[WIP] Patron

package.json

@@ -54,7 +54,7 @@
     "opn": "4.0.2",
     "path-exists": "3.0.0",
     "postcss-loader": "^1.2.1",
-    "prettier": "CompuIves/custom-prettier-codesandbox",
+    "prettier": "^1.5.2",
     "promise": "7.1.1",
     "raw-loader": "^0.5.1",
     "react-hot-loader": "^3.0.0-beta.6",
@@ -86,6 +86,7 @@
     "codemirror": "^5.27.4",
     "color": "^0.11.4",
     "cssnano": "^3.10.0",
+    "custom-prettier-codesandbox": "CompuIves/custom-prettier-codesandbox",
     "debug": "^2.6.8",
     "file-saver": "^1.3.3",
     "glamor": "^2.20.25",
@@ -99,6 +100,7 @@
     "moment": "^2.18.1",
     "normalize.css": "^5.0.0",
     "normalizr": "^3.2.3",
+    "rc-slider": "^8.2.0",
     "react": "^15.6.1",
     "react-addons-css-transition-group": "^15.6.0",
     "react-deep-force-update": "^2.0.1",
@@ -114,12 +116,14 @@
     "react-router-dom": "^4.1.1",
     "react-router-redux": "next",
     "react-split-pane": "^0.1.63",
+    "react-stripe-elements": "^0.0.2",
     "react-tippy": "^0.14.0",
     "redbox-react": "^1.4.3",
     "redux": "^3.7.1",
     "reselect": "^3.0.1",
     "store": "^2.0.12",
     "styled-components": "^2.1.1",
+    "svg-react-loader": "^0.4.4",
     "tern": "^0.21.0"
   },
   "scripts": {

src/app/components/Input.js

@@ -1,13 +1,21 @@
 import styled from 'styled-components';
 
 export default styled.input`
+  transition: 0.3s ease border-color;
   background-color: rgba(0, 0, 0, 0.3);
   border: none;
   outline: none;
   border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, .1);
   color: white;
   padding: 0.25em;
   width: inherit;
   box-sizing: border-box;
+
+  border: 1px solid
+    ${props =>
+      props.error ? props.theme.red.clearer(0.5) : 'rgba(0, 0, 0, 0.1)'};
+
+  &:focus {
+    border-color: ${props => props.theme.secondary.clearer(0.6)};
+  }
 `;

src/app/components/Preference/PreferenceNumber.js

@@ -1,7 +1,12 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import Input from 'app/components/Input';
 
+const StyledInput = styled(Input)`
+  text-align: center;
+`;
+
 type Props = {
   value: boolean,
   setValue: boolean => any,
@@ -20,6 +25,8 @@ export default class PreferenceInput extends React.PureComponent {
 
   render() {
     const { value } = this.props;
-    return <Input type="number" value={value} onChange={this.handleChange} />;
+    return (
+      <StyledInput type="number" value={value} onChange={this.handleChange} />
+    );
   }
 }

src/app/components/Switch.js

@@ -12,15 +12,16 @@ const Container = styled.div`
   position: relative;
   background-color: ${getColor};
   width: ${({ small }) => (small ? 3 : 3.5)}rem;
-  color: rgba(0,0,0,0.5);
-  border: 1px solid rgba(0,0,0,.1);
+  color: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(0, 0, 0, .1);
   padding: 0.5rem;
   height: ${props => (props.small ? 20 : 26)}px;
   box-sizing: border-box;
   cursor: pointer;
   border-radius: 4px;
 
-  &:before, &:after {
+  &:before,
+  &:after {
     position: absolute;
     top: 50%;
     margin-top: -.5em;
@@ -29,7 +30,7 @@ const Container = styled.div`
 `;
 
 const getSize = ({ small }) =>
-  (small ? 'calc(1.5rem + 2px)' : 'calc(2rem + 2px)');
+  small ? 'calc(1.5rem + 2px)' : 'calc(2rem + 2px)';
 
 const Dot = styled.div`
   transition: inherit;
@@ -39,9 +40,9 @@ const Dot = styled.div`
   left: 0.1rem;
   border-radius: 4px;
   transform: translateX(${props => (props.right ? getSize(props) : '0')});
-  top: ${({ small }) => (small ? `calc(0.1rem + 1px)` : `calc(0.1rem)`)};
+  top: 0.1rem;
   background-color: white;
-  box-shadow: 0 0 4px rgba(0,0,0,0.2);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
 `;
 
 type Props = {
@@ -58,7 +59,7 @@ export default ({
   secondary = false,
   offMode = false,
   small = false,
-}: Props) => (
+}: Props) =>
   <Container
     small={small}
     secondary={secondary}
@@ -67,5 +68,4 @@ export default ({
     right={right}
   >
     <Dot small={small} right={right} />
-  </Container>
-);
+  </Container>;

src/app/components/buttons/Button.js

@@ -43,7 +43,7 @@ const styles = css`
   font-size: 1.125rem;
   text-align: center;
   color: ${props => getColor(props)};
-  font-weight: 300;
+  font-weight: 400;
   ${props => !props.disabled && `box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);`};
   width: ${props => (props.block ? '100%' : 'inherit')};
 
@@ -55,9 +55,7 @@ const styles = css`
       `;
     }
     return 'padding: 0.65rem 2.25rem;';
-  }}
-
-  user-select: none;
+  }} user-select: none;
   text-decoration: none;
 
   ${props =>
@@ -78,7 +76,7 @@ const styles = css`
   &:active {
     transform: translateY(1px);
     box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
-  }`}
+  }`};
 `;
 const LinkButton = styled(Link)`${styles}`;
 const AButton = styled.a`${styles};`;

src/app/components/buttons/__snapshots__/Button.test.js.snap

@@ -2,15 +2,15 @@
 
 exports[`Button renders 1`] = `
 <button
-  className="sc-htpNat iGlKTD"
+  className="sc-htpNat hCsYOm"
 >
   Test
 </button>
 `;
 
 exports[`Button renders disabled 1`] = `
 <button
-  className="sc-htpNat fTFVBb"
+  className="sc-htpNat hsOzQt"
   disabled={true}
 >
   Test
@@ -19,7 +19,7 @@ exports[`Button renders disabled 1`] = `
 
 exports[`Button renders href 1`] = `
 <a
-  className="sc-bwzfXH eBmlcd"
+  className="sc-bwzfXH djbEWS"
   href="https://ivesvh.com"
 >
   Test
@@ -28,7 +28,7 @@ exports[`Button renders href 1`] = `
 
 exports[`Button renders onClick 1`] = `
 <button
-  className="sc-htpNat iGlKTD"
+  className="sc-htpNat hCsYOm"
   onClick={[Function]}
 >
   Test
@@ -37,15 +37,15 @@ exports[`Button renders onClick 1`] = `
 
 exports[`Button renders properties 1`] = `
 <button
-  className="sc-htpNat dpXcLN"
+  className="sc-htpNat cGrUyB"
 >
   Test
 </button>
 `;
 
 exports[`Button renders to 1`] = `
 <a
-  className="sc-bdVaJa gUBIAT"
+  className="sc-bdVaJa dRYfIP"
   href="https://ivesvh.com"
   onClick={[Function]}
 >

src/app/components/flex/Centered.js

@@ -3,8 +3,7 @@ import styled from 'styled-components';
 export default styled.div`
   position: relative;
   display: flex;
-  ${props => props.horizontal && 'justify-content: center;'}
-  ${props => props.vertical && 'align-items: center;'}
-  flex-direction: column;
+  ${props => props.vertical && 'justify-content: center;'} ${props =>
+      props.horizontal && 'align-items: center;'} flex-direction: column;
   width: 100%;
 `;

src/app/components/sandbox/PrivacyStatus.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import Question from 'react-icons/lib/go/question';
+
+import Unlisted from 'react-icons/lib/go/link';
+import Private from 'react-icons/lib/go/lock';
+
+import Tooltip from '../Tooltip';
+
+const iconStyles = css`
+  opacity: 0.5;
+  margin-left: 0.5em;
+  margin-bottom: 0.2rem;
+`;
+
+const StyledUnlisted = styled(Unlisted)(iconStyles);
+const StyledPrivate = styled(Private)(iconStyles);
+
+const PRIVACY_MESSAGES = {
+  0: {
+    title: 'Public',
+    tooltip: 'Everyone can see the sandbox',
+    icon: null,
+  },
+  1: {
+    title: 'Unlisted',
+    tooltip: 'Only users with the url can see the sandbox',
+    icon: <StyledUnlisted />,
+  },
+  2: {
+    title: 'Private',
+    tooltip: 'Only you can see the sandbox',
+    icon: <StyledPrivate />,
+  },
+};
+
+const Icon = styled(Question)(iconStyles);
+
+export default ({ privacy, asIcon }: { privacy: number, asIcon: boolean }) => {
+  if (asIcon) {
+    return (
+      <Tooltip title={PRIVACY_MESSAGES[privacy].tooltip}>
+        {PRIVACY_MESSAGES[privacy].icon}
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip title={PRIVACY_MESSAGES[privacy].tooltip}>
+      {PRIVACY_MESSAGES[privacy].title}
+      <Icon />
+    </Tooltip>
+  );
+};

src/app/components/sandbox/SandboxList.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
 
+import PrivacyStatus from 'app/components/sandbox/PrivacyStatus';
 import delayEffect from 'app/utils/animation/delay-effect';
 import { sandboxUrl } from 'app/utils/url-generator';
 
@@ -97,6 +98,7 @@ export default ({ sandboxes, isCurrentUser, onDelete }: Props) =>
             <Link to={sandboxUrl(s)}>
               {s.title || s.id}
             </Link>
+            <PrivacyStatus privacy={s.privacy} asIcon />
           </td>
           <td>
             {moment(s.insertedAt).format('ll')}

src/app/pages/Sandbox/Editor/Workspace/Tags/Tag.js → src/app/components/sandbox/Tags/Tag.js

@@ -6,11 +6,10 @@ import CrossIcon from 'react-icons/lib/md/clear';
 const Container = styled.span`
   position: relative;
   color: white;
-  font-size: .875rem;
   background-color: ${props => props.theme.secondary};
   padding: .3em .5em;
   border-radius: 4px;
-  font-weight: 400;
+  font-weight: 500;
 
   ${props => props.canRemove && css`padding-right: 1.5rem;`};
 `;

src/app/components/sandbox/Tags/index.js

@@ -0,0 +1,28 @@
+/* @flow */
+import React from 'react';
+import styled from 'styled-components';
+
+import Margin from 'app/components/spacing/Margin';
+
+import Tag from './Tag';
+
+const TagContainer = styled.div`
+  margin: .75em;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
+
+type Props = {
+  tags: Array<string>,
+  removeTag: ?(id: string, tag: string) => void,
+};
+
+export default ({ tags, removeTag }: Props) =>
+  <TagContainer>
+    {tags.sort().map(tag =>
+      <Margin key={tag} vertical={0.5} horizontal={0.25}>
+        <Tag removeTag={removeTag} tag={tag} />
+      </Margin>,
+    )}
+  </TagContainer>;

src/app/components/user/PatronStar.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+import moment from 'moment';
+import Tooltip from 'app/components/Tooltip';
+import StarIcon from 'react-icons/lib/go/star';
+
+const Container = styled(Tooltip)`
+  margin-left: 0.25rem;
+`;
+
+export default ({
+  subscriptionSince,
+  ...props
+}: {
+  subscriptionSince: string,
+}) =>
+  <Container
+    title={`Patron since ${moment(subscriptionSince).format('MMM/YY')}!`}
+  >
+    <StarIcon {...props} />
+  </Container>;