July update (codesandbox#67)

* Algolia Search (codesandbox#65)

* Add result filtering

* Add default margin

* Filter styling, GitHub icons

* Tweaks

* Improve Algolia search

* Add search to header

* Add search icons

* Tag support

* Add tags to search

* Use new styles everywhere

* Rename search titles

* CodeSandbox Patron (codesandbox#66)

* Add result filtering

* Add default margin

* Filter styling, GitHub icons

* Tweaks

* Improve Algolia search

* Add search to header

* Add search icons

* Base pricing

* Tag support

* Add tags to search

* Pricing page WIP

* Slider

* Badge work

* Update particle animations

* Remove second argument from raf

* Add name to form

* Finish subscription form

* Rename to patron

* Add Badges

* Preferences

* Use new styles everywhere

* Rename search titles

* Improve preferences

* Payment details

* Update user entity

* Update payment details & add more badges

* Patron and private sandboxes

* Saving privacy status

* Show private sandboxes on profile

* Add notice

* Show tags in search

* Make tag names more clear

* Add Stripe production key

* Terms of Service

* Update badges

* Add legal urls

* Load editor by default

* Bring Notifications to the right

* Change logo, adjust config

* Hide badges

* Change badge behaviour

* Make better distinction between badge and patron

* Adjust badge size

* Tweaks to badge and fix title

* Adjust badge position

Author: CompuIves

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,26 +100,30 @@
     "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",
     "react-dnd": "^2.4.0",
     "react-dnd-html5-backend": "^2.4.1",
     "react-dom": "^15.6.1",
     "react-icons": "^2.2.5",
+    "react-instantsearch": "^4.0.6",
     "react-loadable": "^3.3.1",
     "react-modal": "^2.2.1",
     "react-motion": "^0.5.0",
     "react-redux": "^5.0.5",
     "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/pages/Profile/MaxWidth.js src/app/components/flex/MaxWidth.jssrc/app/pages/Profile/MaxWidth.js renamed to src/app/components/flex/MaxWidth.js

@@ -4,13 +4,13 @@ import styled from 'styled-components';
 import DeleteIcon from 'react-icons/lib/md/delete';
 import Tooltip from 'app/components/Tooltip';
 
-const DeleteSandboxButton = styled((props) => (
+const DeleteSandboxButton = styled(props =>
   <Tooltip title="Delete Sandbox">
     <button {...props}>
       <DeleteIcon />
     </button>
-  </Tooltip>
-))`
+  </Tooltip>,
+)`
   font-size: 1.2em;
   background-color: inherit;
   border: none;
@@ -23,20 +23,18 @@ const DeleteSandboxButton = styled((props) => (
 `;
 
 type Props = {
-  onDelete: Function;
-  id: string;
+  onDelete: Function,
+  id: string,
 };
 
 export default class DeleteSandboxButtonContainer extends React.PureComponent {
   props: Props;
 
   deleteSandbox = () => {
     this.props.onDelete(this.props.id);
-  }
+  };
 
   render() {
-    return (
-      <DeleteSandboxButton {...this.props} onClick={this.deleteSandbox} />
-    )
+    return <DeleteSandboxButton {...this.props} onClick={this.deleteSandbox} />;
   }
 }

src/app/components/sandbox/DeleteSandboxButton.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>
+  );
+};