From b0906b3d567409663577b6fd5b08e772d6bc63f3 Mon Sep 17 00:00:00 2001 From: Drake Costa Date: Tue, 3 Dec 2019 02:58:56 -0800 Subject: [PATCH 001/101] =?UTF-8?q?=E2=9C=A8=20New=20Profiles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/app/package.json | 4 +- .../app/src/app/pages/Profile/DELETEME.ts | 162 +++++ .../pages/Profile/DropPlaceholder/elements.ts | 26 + .../pages/Profile/DropPlaceholder/index.ts | 1 + .../FeaturedSandbox/FeaturedSandbox.tsx | 18 + .../pages/Profile/FeaturedSandbox/elements.ts | 10 + .../pages/Profile/FeaturedSandbox/index.ts | 1 + .../Header/UserInfo/ProfileInfo/elements.js | 38 - .../Header/UserInfo/ProfileInfo/index.js | 41 -- .../Header/UserInfo/Stats/Badges/index.js | 31 - .../Profile/Header/UserInfo/Stats/elements.js | 24 - .../Profile/Header/UserInfo/Stats/index.js | 18 - .../pages/Profile/Header/UserInfo/index.js | 28 - .../src/app/pages/Profile/Header/elements.js | 20 - .../app/src/app/pages/Profile/Header/index.js | 26 - .../app/pages/Profile/Navigation/elements.js | 30 - .../src/app/pages/Profile/Navigation/index.js | 39 - .../app/src/app/pages/Profile/Profile.tsx | 111 +++ .../app/pages/Profile/Sandboxes/elements.js | 41 -- .../src/app/pages/Profile/Sandboxes/index.js | 146 ---- .../Profile/Showcase/SandboxInfo/elements.ts | 62 -- .../Profile/Showcase/SandboxInfo/index.tsx | 56 -- .../Showcase/SandboxInfo/play-button.svg | 41 -- .../app/pages/Profile/Showcase/elements.js | 7 - .../src/app/pages/Profile/Showcase/index.tsx | 78 -- .../Profile/ShowcaseCard/ShowcaseCard.tsx | 89 +++ .../Profile/ShowcaseCard/abbreviateNumber.ts | 31 + .../pages/Profile/ShowcaseCard/elements.ts | 105 +++ .../app/pages/Profile/ShowcaseCard/index.ts | 1 + .../src/app/pages/Profile/UserInfo/Icons.tsx | 38 + .../app/pages/Profile/UserInfo/UserInfo.tsx | 210 ++++++ .../app/pages/Profile/UserInfo/elements.ts | 373 ++++++++++ .../src/app/pages/Profile/UserInfo/index.ts | 1 + .../app/src/app/pages/Profile/elements.js | 16 - .../app/src/app/pages/Profile/elements.ts | 108 +++ packages/app/src/app/pages/Profile/index.ts | 1 + packages/app/src/app/pages/Profile/index.tsx | 98 --- packages/app/src/app/pages/index.tsx | 4 +- packages/app/src/embed/theme/index.js | 2 +- packages/common/src/components/Footer.tsx | 165 ----- .../common/src/components/Footer/Footer.tsx | 172 +++++ .../common/src/components/Footer/elements.ts | 62 ++ .../common/src/components/Footer/index.ts | 1 + packages/common/src/components/Layout.ts | 22 + packages/common/src/components/Link.tsx | 1 + packages/common/src/components/Typography.tsx | 67 ++ .../common/src/components/icons/GitHub.tsx | 12 + .../common/src/components/icons/Spectrum.tsx | 10 + .../common/src/components/icons/Twitter.tsx | 10 + packages/common/src/components/icons/index.ts | 3 + packages/common/src/components/index.ts | 3 + yarn.lock | 679 +++++++++++++++--- 52 files changed, 2246 insertions(+), 1097 deletions(-) create mode 100644 packages/app/src/app/pages/Profile/DELETEME.ts create mode 100644 packages/app/src/app/pages/Profile/DropPlaceholder/elements.ts create mode 100644 packages/app/src/app/pages/Profile/DropPlaceholder/index.ts create mode 100644 packages/app/src/app/pages/Profile/FeaturedSandbox/FeaturedSandbox.tsx create mode 100644 packages/app/src/app/pages/Profile/FeaturedSandbox/elements.ts create mode 100644 packages/app/src/app/pages/Profile/FeaturedSandbox/index.ts delete mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/elements.js delete mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.js delete mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.js delete mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/Stats/elements.js delete mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/Stats/index.js delete mode 100644 packages/app/src/app/pages/Profile/Header/UserInfo/index.js delete mode 100644 packages/app/src/app/pages/Profile/Header/elements.js delete mode 100644 packages/app/src/app/pages/Profile/Header/index.js delete mode 100644 packages/app/src/app/pages/Profile/Navigation/elements.js delete mode 100644 packages/app/src/app/pages/Profile/Navigation/index.js create mode 100644 packages/app/src/app/pages/Profile/Profile.tsx delete mode 100644 packages/app/src/app/pages/Profile/Sandboxes/elements.js delete mode 100644 packages/app/src/app/pages/Profile/Sandboxes/index.js delete mode 100644 packages/app/src/app/pages/Profile/Showcase/SandboxInfo/elements.ts delete mode 100644 packages/app/src/app/pages/Profile/Showcase/SandboxInfo/index.tsx delete mode 100644 packages/app/src/app/pages/Profile/Showcase/SandboxInfo/play-button.svg delete mode 100644 packages/app/src/app/pages/Profile/Showcase/elements.js delete mode 100644 packages/app/src/app/pages/Profile/Showcase/index.tsx create mode 100644 packages/app/src/app/pages/Profile/ShowcaseCard/ShowcaseCard.tsx create mode 100644 packages/app/src/app/pages/Profile/ShowcaseCard/abbreviateNumber.ts create mode 100644 packages/app/src/app/pages/Profile/ShowcaseCard/elements.ts create mode 100644 packages/app/src/app/pages/Profile/ShowcaseCard/index.ts create mode 100644 packages/app/src/app/pages/Profile/UserInfo/Icons.tsx create mode 100644 packages/app/src/app/pages/Profile/UserInfo/UserInfo.tsx create mode 100644 packages/app/src/app/pages/Profile/UserInfo/elements.ts create mode 100644 packages/app/src/app/pages/Profile/UserInfo/index.ts delete mode 100644 packages/app/src/app/pages/Profile/elements.js create mode 100644 packages/app/src/app/pages/Profile/elements.ts create mode 100644 packages/app/src/app/pages/Profile/index.ts delete mode 100644 packages/app/src/app/pages/Profile/index.tsx delete mode 100644 packages/common/src/components/Footer.tsx create mode 100644 packages/common/src/components/Footer/Footer.tsx create mode 100644 packages/common/src/components/Footer/elements.ts create mode 100644 packages/common/src/components/Footer/index.ts create mode 100644 packages/common/src/components/Layout.ts create mode 100644 packages/common/src/components/Typography.tsx create mode 100644 packages/common/src/components/icons/GitHub.tsx create mode 100644 packages/common/src/components/icons/Spectrum.tsx create mode 100644 packages/common/src/components/icons/Twitter.tsx create mode 100644 packages/common/src/components/icons/index.ts diff --git a/packages/app/package.json b/packages/app/package.json index 9cc0f0c4968..48e20513eae 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -172,6 +172,7 @@ "react": "^16.9.0", "react-addons-css-transition-group": "^15.6.0", "react-apollo": "^2.5.6", + "react-autosize-textarea": "^7.0.0", "react-color": "^2.17.3", "react-day-picker": "^7.2.4", "react-devtools-inline": "^4.0.0", @@ -215,7 +216,8 @@ "vue-hot-reload-api": "^2.3.3", "vue-template-compiler": "^2.6.10", "vue-template-es2015-compiler": "^1.9.1", - "xterm": "3.7.0" + "xterm": "3.7.0", + "yup": "^0.27.0" }, "devDependencies": { "@babel/cli": "^7.7.4", diff --git a/packages/app/src/app/pages/Profile/DELETEME.ts b/packages/app/src/app/pages/Profile/DELETEME.ts new file mode 100644 index 00000000000..1e970f5630c --- /dev/null +++ b/packages/app/src/app/pages/Profile/DELETEME.ts @@ -0,0 +1,162 @@ +export const initialState = { + user: { + id: `userID`, + avatar: `https://avatars2.githubusercontent.com/u/42876?s=200&v=4`, + isPro: false, + isTeam: true, + name: `Framer`, + username: `Festina Lente`, + bio: `Bring your creative ideas to life with Framer X, the best tool for interactive design. Create responsive layouts, design realistic prototypes, and bring everything closer to production—all in one place`, + totalSandboxes: 450, + associations: [ + { + thumbnail: `https://avatars2.githubusercontent.com/u/10724744?s=96&v=4`, + url: ``, + entityName: `Stefan Mansson` + }, + { + thumbnail: `https://avatars3.githubusercontent.com/u/12829?s=96&v=4`, + url: ``, + entityName: `Eelco Lempsink` + }, + { + thumbnail: `https://avatars0.githubusercontent.com/u/39778?s=96&v=4`, + url: ``, + entityName: `Jordan Dobson` + }, + { + thumbnail: `https://avatars3.githubusercontent.com/u/206779?s=96&v=4`, + url: ``, + entityName: `Koen Bok` + }, + { + thumbnail: `https://avatars3.githubusercontent.com/u/28392?s=96&v=4`, + url: ``, + entityName: `Stefan Borsje` + } + ], + socialLinks: [ + `https://twitter.com/framer`, + `https://www.framer.com/`, + `https://github.com/framer` + ], + featured: { + id: "123", + heroImage: `https://i.imgur.com/h2nQnqU.png` + }, + pinned: [ + { + id: "123", + preview: `https://i.imgur.com/iy4AKF1.png`, + title: `wabisabi-js/isthereuber.in`, + description: `Simple app to tell you where there is uber`, + likes: 999999, + views: 999999, + forks: 999999, + environment: `React` + }, + { + id: "456", + preview: `https://i.imgur.com/Kl4WYmI.png`, + title: `wabisabi-js/isthereuber.in`, + description: `Simple app to tell you where there is uber`, + likes: 32, + views: 122, + forks: 234, + environment: `React` + }, + { + id: "789", + preview: `https://i.imgur.com/9xitUWN.png`, + title: `wabisabi-js/isthereuber.in`, + description: `Simple app to tell you where there is uber`, + likes: 32, + views: 122, + forks: 234, + environment: `React` + }, + { + id: "012", + preview: `https://i.imgur.com/Ihb874i.png`, + title: `wabisabi-js/isthereuber.in`, + description: `Simple app to tell you where there is uber`, + likes: 32, + views: 122, + forks: 234, + environment: `React` + }, + { + id: "345", + preview: `https://i.imgur.com/t3TVRY8.png`, + title: `wabisabi-js/isthereuber.in`, + description: `Simple app to tell you where there is uber`, + likes: 32, + views: 122, + forks: 234, + environment: `React` + } + ], + sandboxes: [ + { + id: "123", + preview: `https://i.imgur.com/NOzyPxz.png`, + title: `wabisabi-js/isthereuber.in`, + description: `Simple app to tell you where there is uber`, + likes: 123456789, + views: 999999, + forks: 999999, + environment: `React` + }, + { + id: "456", + preview: `https://i.imgur.com/u6kR235.png`, + title: `Getting Started`, + description: `Simple app to tell you where there is uber`, + likes: 32, + views: 122, + forks: 234, + environment: `React` + }, + { + id: "789", + preview: `https://i.imgur.com/a4KpNHf.png`, + title: `Custom Properties`, + description: `Simple app to tell you where there is uber`, + likes: 32, + views: 122, + forks: 234, + environment: `React` + }, + { + id: "012", + preview: `https://i.imgur.com/JpRs4Gm.png`, + title: `wabisabi-js/isthereuber.in`, + description: `Simple app to tell you where there is uber`, + likes: 32, + views: 122, + forks: 234, + environment: `React` + }, + { + id: "345", + preview: `https://i.imgur.com/6x1wrIJ.png`, + title: `wabisabi-js/isthereuber.in`, + description: `Simple app to tell you where there is uber`, + likes: 32, + views: 122, + forks: 234, + environment: `React` + }, + { + id: "678", + preview: `https://i.imgur.com/JxGN2TS.png`, + title: `wabisabi-js/isthereuber.in`, + description: `Simple app to tell you where there is uber`, + likes: 32, + views: 122, + forks: 234, + environment: `React` + } + ] + } +} diff --git a/packages/app/src/app/pages/Profile/DropPlaceholder/elements.ts b/packages/app/src/app/pages/Profile/DropPlaceholder/elements.ts new file mode 100644 index 00000000000..02bfeb49a47 --- /dev/null +++ b/packages/app/src/app/pages/Profile/DropPlaceholder/elements.ts @@ -0,0 +1,26 @@ +import styled from "styled-components" + +export const DropPlaceholder = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + min-height: 178px; + border: 1px dashed #757575; + border-width: 2px; + border-radius: 4px; + background-color: #000000; + color: #999; + font-family: Inter; + font-size: 16px; + font-weight: 600; +` + +export const PlaceholderHeader = styled.span` + display: block; + color: #fff; + font-family: Inter; + font-size: 23px; + font-weight: 600; +` diff --git a/packages/app/src/app/pages/Profile/DropPlaceholder/index.ts b/packages/app/src/app/pages/Profile/DropPlaceholder/index.ts new file mode 100644 index 00000000000..fb2c87413f6 --- /dev/null +++ b/packages/app/src/app/pages/Profile/DropPlaceholder/index.ts @@ -0,0 +1 @@ +export { DropPlaceholder, PlaceholderHeader } from "./elements" diff --git a/packages/app/src/app/pages/Profile/FeaturedSandbox/FeaturedSandbox.tsx b/packages/app/src/app/pages/Profile/FeaturedSandbox/FeaturedSandbox.tsx new file mode 100644 index 00000000000..16e59a9a4bb --- /dev/null +++ b/packages/app/src/app/pages/Profile/FeaturedSandbox/FeaturedSandbox.tsx @@ -0,0 +1,18 @@ +import React from "react" +import { Container, HeroImage } from "./elements" + +interface IFeaturedSandboxProps { + heroImage: string +} + +export const FeaturedSandbox: React.FC = ({ + heroImage +}) => { // eslint-disable-line + // TODO: + // - Make Hero Image a Live Sandbox Preview? + return ( + + + + ) +} diff --git a/packages/app/src/app/pages/Profile/FeaturedSandbox/elements.ts b/packages/app/src/app/pages/Profile/FeaturedSandbox/elements.ts new file mode 100644 index 00000000000..9e4f63d629f --- /dev/null +++ b/packages/app/src/app/pages/Profile/FeaturedSandbox/elements.ts @@ -0,0 +1,10 @@ +import styled from "styled-components" + +export const Container = styled.div` + grid-area: featured; + width: 100%; +` + +export const HeroImage = styled.img` + width: 100%; +` diff --git a/packages/app/src/app/pages/Profile/FeaturedSandbox/index.ts b/packages/app/src/app/pages/Profile/FeaturedSandbox/index.ts new file mode 100644 index 00000000000..cefbe4f055a --- /dev/null +++ b/packages/app/src/app/pages/Profile/FeaturedSandbox/index.ts @@ -0,0 +1 @@ +export { FeaturedSandbox } from "./FeaturedSandbox" diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/elements.js b/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/elements.js deleted file mode 100644 index c9a2645fe0e..00000000000 --- a/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/elements.js +++ /dev/null @@ -1,38 +0,0 @@ -import styled from 'styled-components'; -import GithubIcon from 'react-icons/lib/go/mark-github'; -import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect'; - -export const ProfileImage = styled.img` - border-radius: 2px; - margin-right: 1.5rem; - - box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5); - background-color: ${props => props.theme.background2}; - - ${delayEffect(0.05)}; -`; - -export const Name = styled.div` - ${delayEffect(0.1)}; - display: flex; - align-items: center; - font-size: 2rem; - font-weight: 300; - margin-bottom: 0.25rem; -`; - -export const Username = styled.div` - ${delayEffect(0.15)}; - display: flex; - align-items: center; - font-size: ${props => (props.main ? 1.5 : 1.25)}rem; - font-weight: 200; - color: ${props => (props.main ? 'white' : 'rgba(255, 255, 255, 0.6)')}; - margin-bottom: 1rem; -`; - -export const IconWrapper = styled(GithubIcon)` - margin-left: 0.75rem; - font-size: 1.1rem; - color: white; -`; diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.js b/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.js deleted file mode 100644 index 08a331435f3..00000000000 --- a/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; - -import Row from '@codesandbox/common/lib/components/flex/Row'; -import Column from '@codesandbox/common/lib/components/flex/Column'; - -import Margin from '@codesandbox/common/lib/components/spacing/Margin'; -import { PatronStar } from '@codesandbox/common/lib/components/PatronStar'; - -import { ProfileImage, Name, Username, IconWrapper } from './elements'; - -function ProfileInfo({ username, subscriptionSince, name, avatarUrl }) { - return ( - - - - - {name && ( - - {name} - {subscriptionSince && ( - - )} - - )} - - {username} - - - - - - - - ); -} - -export default ProfileInfo; diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.js b/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.js deleted file mode 100644 index 43753352f94..00000000000 --- a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -import Margin from '@codesandbox/common/lib/components/spacing/Margin'; -import Badge from '@codesandbox/common/lib/utils/badges/Badge'; -import ContributorsBadge from '@codesandbox/common/lib/components/ContributorsBadge'; - -import { patronUrl } from '@codesandbox/common/lib/utils/url-generator'; - -function Badges({ badges, username }) { - return ( - - - {badges.map(badge => ( - - ))} - - - - - ); -} - -export default Badges; diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/elements.js b/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/elements.js deleted file mode 100644 index 47cd0e62555..00000000000 --- a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/elements.js +++ /dev/null @@ -1,24 +0,0 @@ -import styled from 'styled-components'; -import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect'; - -export const Container = styled.div` - float: right; - flex: 1; - display: flex; - height: 100%; - max-width: 450px; - margin-bottom: 4rem; - align-items: center; - - ${delayEffect(0.1)}; -`; - -export const Stats = styled.div` - flex: 1; - display: flex; - height: 100%; - - justify-content: center; - align-items: top; - font-size: 1.25rem; -`; diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/index.js b/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/index.js deleted file mode 100644 index 4cca27c5a32..00000000000 --- a/packages/app/src/app/pages/Profile/Header/UserInfo/Stats/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { Stat } from 'app/components/Stat'; -import Badges from './Badges'; -import { Container, Stats as StatsWrapper } from './elements'; - -export function Stats({ viewCount, likeCount, forkCount, username, badges }) { - return ( - - - - - - - - - - ); -} diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/index.js b/packages/app/src/app/pages/Profile/Header/UserInfo/index.js deleted file mode 100644 index 77eafbca85a..00000000000 --- a/packages/app/src/app/pages/Profile/Header/UserInfo/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; - -import Row from '@codesandbox/common/lib/components/flex/Row'; - -import ProfileInfo from './ProfileInfo'; -import { Stats } from './Stats'; - -function UserInfo({ user }) { - return ( - - - - - ); -} - -export default UserInfo; diff --git a/packages/app/src/app/pages/Profile/Header/elements.js b/packages/app/src/app/pages/Profile/Header/elements.js deleted file mode 100644 index 1cbe56fef51..00000000000 --- a/packages/app/src/app/pages/Profile/Header/elements.js +++ /dev/null @@ -1,20 +0,0 @@ -import styled from 'styled-components'; -import Padding from '@codesandbox/common/lib/components/spacing/Padding'; -import Margin from '@codesandbox/common/lib/components/spacing/Margin'; - -export const Top = styled.div` - display: flex; - background-image: linear-gradient(-180deg, #121415 0%, #1f2224 100%); - box-shadow: inset 0 -3px 4px 0 rgba(0, 0, 0, 0.5); - - width: 100%; - justify-content: center; -`; - -export const FullWidthPadding = styled(Padding)` - width: 100%; -`; - -export const FullWidthMargin = styled(Margin)` - width: 100%; -`; diff --git a/packages/app/src/app/pages/Profile/Header/index.js b/packages/app/src/app/pages/Profile/Header/index.js deleted file mode 100644 index 34bb22f3f7b..00000000000 --- a/packages/app/src/app/pages/Profile/Header/index.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import { Navigation } from 'app/pages/common/Navigation'; -import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth'; - -import UserInfo from './UserInfo'; -import { Top, FullWidthPadding, FullWidthMargin } from './elements'; - -export default class Header extends React.PureComponent { - render() { - const { user } = this.props; - return ( - - - - - - - - - - - - ); - } -} diff --git a/packages/app/src/app/pages/Profile/Navigation/elements.js b/packages/app/src/app/pages/Profile/Navigation/elements.js deleted file mode 100644 index 6023d2b32f1..00000000000 --- a/packages/app/src/app/pages/Profile/Navigation/elements.js +++ /dev/null @@ -1,30 +0,0 @@ -import styled from 'styled-components'; -import { NavLink } from 'react-router-dom'; - -import Row from '@codesandbox/common/lib/components/flex/Row'; -import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect'; - -export const NavigationLink = styled(NavLink)` - transition: 0.3s ease all; - - display: block; - color: white; - padding: 0rem 4rem; - margin: 1.5rem 0; - font-size: 1.25rem; - font-weight: 300; - text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); - color: rgba(255, 255, 255, 0.5); - text-decoration: none; - - ${({ border }) => border}; - - ${delayEffect(0.2)}; - &:hover { - color: white; - } -`; - -export const CenteredRow = styled(Row)` - width: 100%; -`; diff --git a/packages/app/src/app/pages/Profile/Navigation/index.js b/packages/app/src/app/pages/Profile/Navigation/index.js deleted file mode 100644 index 128e0d3b7c9..00000000000 --- a/packages/app/src/app/pages/Profile/Navigation/index.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; - -import { NavigationLink, CenteredRow } from './elements'; - -function Navigation({ username, sandboxCount, likeCount }) { - return ( - - - SHOWCASE - - - SANDBOXES ({sandboxCount}) - - - LIKES ({likeCount}) - - - ); -} - -export default Navigation; diff --git a/packages/app/src/app/pages/Profile/Profile.tsx b/packages/app/src/app/pages/Profile/Profile.tsx new file mode 100644 index 00000000000..a8bc074ce4f --- /dev/null +++ b/packages/app/src/app/pages/Profile/Profile.tsx @@ -0,0 +1,111 @@ +import React, { useState } from 'react'; +import { RouteComponentProps } from '@reach/router'; +import { + Main, + PageContent, + Navigation, + Pagination, + SearchInput, +} from '@codesandbox/common/lib/components'; +import { + DropPlaceholder, + // PlaceholderHeader +} from './DropPlaceholder'; +import { FeaturedSandbox } from './FeaturedSandbox'; +import { ShowcaseCard } from './ShowcaseCard'; +import { UserInfo } from './UserInfo'; +import { + Content, + SearchRow, + // FeaturedPlaceholder, + PinnedPlaceholder, + SandboxCount, + PinnedGrid, + TitleRow, + SectionTitle, + ShowcaseGrid, + PageNav, +} from './elements'; +import { initialState } from './DELETEME'; + +export const Profile: React.FC = () => { + // Replace with API + const [data, setData] = useState(initialState); + const [isEditing, setIsEditing] = useState(false); + + // TODO: + // - Add Query to retrieve user data + // - Add page navigation handler to load additional sandboxes + // - Add search input handler to filter on all sandboxes + // - Add Edit toggle for logged-in user + // - Add drag and drop support for grids + + return ( +
+ + + + setIsEditing(!isEditing)} + onEdit={({ bio, socialLinks }) => { + setData({ + ...data, + user: { + ...data.user, + bio, + socialLinks, + }, + }); + }} + {...data.user} + /> + {data.user.featured && } + + + + {data.user.totalSandboxes} + Sandboxes + + + {isEditing && !data.user.pinned.length ? ( + + Drag your Sandbox here to pin them to your profile + + ) : isEditing && data.user.pinned.length ? ( + + {data.user.pinned.map(sandbox => ( + + ))} + Drag Sandbox to pin + + ) : ( + data.user.pinned && ( + + {data.user.pinned.map(sandbox => ( + + ))} + + ) + )} + {data.user.sandboxes && ( + <> + + All Sandboxes + + + {data.user.sandboxes.map(sandbox => ( + + ))} + + + + + + )} + + +
+ ); +}; diff --git a/packages/app/src/app/pages/Profile/Sandboxes/elements.js b/packages/app/src/app/pages/Profile/Sandboxes/elements.js deleted file mode 100644 index 5e24bc59f88..00000000000 --- a/packages/app/src/app/pages/Profile/Sandboxes/elements.js +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components'; - -import Centered from '@codesandbox/common/lib/components/flex/Centered'; -import Margin from '@codesandbox/common/lib/components/spacing/Margin'; - -export const Navigation = styled.div` - width: 100%; - display: flex; - align-items: center; - justify-content: center; - - padding-bottom: 2rem; -`; - -export const Notice = styled.div` - color: rgba(255, 255, 255, 0.5); - padding: 2rem 0; - padding-bottom: 0; - - margin-bottom: 2rem; -`; - -const ErrorTitle = styled.div` - font-size: 1.25rem; - color: ${props => - props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'}; -`; -const prefix = { - currentSandboxes: ["You don't have", "This user doesn't have"], - currentLikedSandboxes: ["You haven't liked", "This user didn't like"], -}; -export const NoSandboxes = ({ source, isCurrentUser }) => ( - - - - {prefix[source][isCurrentUser ? 0 : 1]} any sandboxes yet - - - -); diff --git a/packages/app/src/app/pages/Profile/Sandboxes/index.js b/packages/app/src/app/pages/Profile/Sandboxes/index.js deleted file mode 100644 index e49197ec6e6..00000000000 --- a/packages/app/src/app/pages/Profile/Sandboxes/index.js +++ /dev/null @@ -1,146 +0,0 @@ -import * as React from 'react'; -import { Link } from 'react-router-dom'; -import { Button } from '@codesandbox/common/lib/components/Button'; -import { dashboardUrl } from '@codesandbox/common/lib/utils/url-generator'; -import { inject, observer } from 'app/componentConnectors'; -import { SandboxList } from 'app/components/SandboxList'; -import { Navigation, Notice, NoSandboxes } from './elements'; - -const PER_PAGE_COUNT = 15; - -class Sandboxes extends React.Component { - static defaultProps = { - page: 1, - }; - - getPage(source, page) { - if (!source) { - return undefined; - } - return source.get ? source.get(page) : source[page]; - } - - fetch(force = false) { - const { signals, source, store, page } = this.props; - - if (store.profile.isLoadingSandboxes) { - return; - } - - if ( - force || - !store.profile[source] || - !this.getPage(store.profile[source], page) - ) { - switch (source) { - case 'currentSandboxes': - signals.profile.sandboxesPageChanged({ page }); - break; - case 'currentLikedSandboxes': - signals.profile.likedSandboxesPageChanged({ page }); - break; - default: - } - } - } - - componentDidMount() { - this.fetch(); - } - - componentDidUpdate(prevProps) { - if ( - prevProps.page !== this.props.page || - prevProps.source !== this.props.source - ) { - this.fetch(); - } - } - - getSandboxesByPage(sandboxes, page) { - return sandboxes.get ? sandboxes.get(page) : sandboxes[page]; - } - - getLastPage = () => { - if (this.props.source === 'currentSandboxes') { - const { sandboxCount } = this.props.store.profile.current; - - return Math.ceil(sandboxCount / PER_PAGE_COUNT); - } - - const { givenLikeCount } = this.props.store.profile.current; - - return Math.ceil(givenLikeCount / PER_PAGE_COUNT); - }; - - deleteSandbox = id => { - this.props.signals.profile.deleteSandboxClicked({ id }); - }; - - render() { - const { store, source, page, baseUrl } = this.props; - const { isProfileCurrentUser } = store.profile; - const { isLoadingSandboxes } = store.profile; - const sandboxes = store.profile[source]; - - if ( - isLoadingSandboxes || - !sandboxes || - !this.getSandboxesByPage(sandboxes, page) - ) { - return
; - } - - const sandboxesPage = this.getSandboxesByPage(sandboxes, page); - - if (sandboxesPage.length === 0) - return ( - - ); - - return ( -
- {isProfileCurrentUser && ( - - You - {"'"} - re viewing your own profile, so you can see your private and - unlisted sandboxes. Others can - {"'"} - t. To manage your sandboxes you can go to your dashboard{' '} - here. - - )} - - -
- {page > 1 && ( - - )} - {this.getLastPage() !== page && ( - - )} -
- -
- ); - } -} - -export default inject('signals', 'store')(observer(Sandboxes)); diff --git a/packages/app/src/app/pages/Profile/Showcase/SandboxInfo/elements.ts b/packages/app/src/app/pages/Profile/Showcase/SandboxInfo/elements.ts deleted file mode 100644 index e3f710694a1..00000000000 --- a/packages/app/src/app/pages/Profile/Showcase/SandboxInfo/elements.ts +++ /dev/null @@ -1,62 +0,0 @@ -import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect'; -import { Link } from 'react-router-dom'; -import styled from 'styled-components'; - -import { LikeHeart } from 'app/pages/common/LikeHeart'; - -export const Container = styled.div` - background-color: #272c2e; - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); - box-sizing: border-box; - padding: 1.5rem; - - display: flex; - flex-direction: column; - - margin-bottom: 2rem; - - ${delayEffect(0.35)}; -`; - -export const Title = styled.h1` - margin: 0; - padding: 0; - box-sizing: border-box; - font-size: 1.25rem; - font-weight: 300; - z-index: 2; -`; - -export const Like = styled(LikeHeart)` - margin-left: 0.5rem; - transform: translateY(-3px); -`; - -export const Description = styled.p` - font-weight: 300; - font-size: 1rem; - margin-right: 3rem; - color: rgba(255, 255, 255, 0.8); -`; - -export const Stats = styled.div` - position: relative; - display: flex; - width: 100%; - justify-content: space-around; - z-index: 1; - flex: 4; -`; - -export const PlayButtonContainer = styled(Link)` - position: absolute; - display: flex; - justify-content: center; - top: -160%; - left: 0; - right: 0; - - cursor: pointer; - - ${delayEffect(0.5)}; -`; diff --git a/packages/app/src/app/pages/Profile/Showcase/SandboxInfo/index.tsx b/packages/app/src/app/pages/Profile/Showcase/SandboxInfo/index.tsx deleted file mode 100644 index 1350296c7a2..00000000000 --- a/packages/app/src/app/pages/Profile/Showcase/SandboxInfo/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import Row from '@codesandbox/common/lib/components/flex/Row'; -import { Sandbox } from '@codesandbox/common/lib/types'; -import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name'; -import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator'; -import React, { FunctionComponent } from 'react'; - -import { Stat } from 'app/components/Stat'; -import { useOvermind } from 'app/overmind'; - -import { - Container, - Description, - Like, - PlayButtonContainer, - Stats, - Title, -} from './elements'; -import SvgButton from './play-button.svg'; - -type Props = { - sandbox: Sandbox; -}; -export const SandboxInfo: FunctionComponent = ({ sandbox }) => { - const { - state: { isLoggedIn }, - } = useOvermind(); - - return ( - - - - {getSandboxName(sandbox)}{' '} - {isLoggedIn ? <Like sandbox={sandbox} /> : null} - - - - -
- {sandbox.description} -
- - - - edit - - - - - - - - - - - ); -}; diff --git a/packages/app/src/app/pages/Profile/Showcase/SandboxInfo/play-button.svg b/packages/app/src/app/pages/Profile/Showcase/SandboxInfo/play-button.svg deleted file mode 100644 index fb97ae17bec..00000000000 --- a/packages/app/src/app/pages/Profile/Showcase/SandboxInfo/play-button.svg +++ /dev/null @@ -1,41 +0,0 @@ - - - - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/app/src/app/pages/Profile/Showcase/elements.js b/packages/app/src/app/pages/Profile/Showcase/elements.js deleted file mode 100644 index 7448eac8259..00000000000 --- a/packages/app/src/app/pages/Profile/Showcase/elements.js +++ /dev/null @@ -1,7 +0,0 @@ -import styled from 'styled-components'; - -export const ErrorTitle = styled.div` - font-size: 1.25rem; - color: ${props => - props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'}; -`; diff --git a/packages/app/src/app/pages/Profile/Showcase/index.tsx b/packages/app/src/app/pages/Profile/Showcase/index.tsx deleted file mode 100644 index 416c1e21a31..00000000000 --- a/packages/app/src/app/pages/Profile/Showcase/index.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import { useOvermind } from 'app/overmind'; - -import Column from '@codesandbox/common/lib/components/flex/Column'; -import Centered from '@codesandbox/common/lib/components/flex/Centered'; -import Margin from '@codesandbox/common/lib/components/spacing/Margin'; -import { Button } from '@codesandbox/common/lib/components/Button'; - -import { SandboxInfo } from './SandboxInfo'; -import ShowcasePreview from '../../common/ShowcasePreview'; - -import { ErrorTitle } from './elements'; - -export const Showcase: FunctionComponent = () => { - const { - state: { - profile, - profile: { isLoadingProfile }, - preferences: { settings }, - }, - actions: { - profile: { selectSandboxClicked }, - }, - } = useOvermind(); - const sandbox = profile.showcasedSandbox; - const isCurrentUser = profile.isProfileCurrentUser; - - const openModal = () => { - selectSandboxClicked(); - }; - - if (isLoadingProfile) { - return ( - - - Loading showcased sandbox... - - - ); - } - - if (!sandbox) { - return ( - - - - {isCurrentUser ? "You don't" : "This user doesn't"} have any - sandboxes yet - - - - ); - } - - return ( - - - {isCurrentUser && ( - - )} - - - - -
- -
- -
- -
- - - - ); -}; diff --git a/packages/app/src/app/pages/Profile/ShowcaseCard/ShowcaseCard.tsx b/packages/app/src/app/pages/Profile/ShowcaseCard/ShowcaseCard.tsx new file mode 100644 index 00000000000..2844c65fc0f --- /dev/null +++ b/packages/app/src/app/pages/Profile/ShowcaseCard/ShowcaseCard.tsx @@ -0,0 +1,89 @@ +import React from 'react'; +import { LightIcons } from '@codesandbox/template-icons'; +import { GoHeart, GoEye, GoRepoForked } from 'react-icons/go'; +import { MdMoreHoriz } from 'react-icons/md'; +import { Link, MenuItem, Separator } from '@codesandbox/common/lib/components'; +import { abbreviateNumber } from './abbreviateNumber'; +import { + Container, + Preview, + SandboxInfo, + TitleRow, + Title, + Menu, + Description, + Statistics, + Action, + Stat, + Environment, +} from './elements'; + +const environments = { + React: , +}; + +interface IShowcaseCardProps { + id: string; + preview: string; + title: string; + description: string; + likes: number; + views: number; + forks: number; + environment: string; +} + +export const ShowcaseCard: React.FC = ({ + id, + preview, + title, + description, + likes, + views, + forks, + environment, + // eslint-disable-next-line +}) => { + // TODO: + // - Add handler for Liking/Unliking the sandbox. + // - Add handles for all options menu buttons (Pin, Open, Fork, Hide, Trash) + return ( + + + + + + + {title} + } aria-label="Sandbox Options"> + Pin Sandbox + + Open Sandbox + + Fork Sandbox + + Hide Sandbox + + Move to Trash + + + {description} + + + + {abbreviateNumber(likes, { decimalPlaces: 1 })} + + + + {abbreviateNumber(views, { decimalPlaces: 1 })} + + + + {abbreviateNumber(forks, { decimalPlaces: 1 })} + + {environments[environment]} + + + + ); +}; diff --git a/packages/app/src/app/pages/Profile/ShowcaseCard/abbreviateNumber.ts b/packages/app/src/app/pages/Profile/ShowcaseCard/abbreviateNumber.ts new file mode 100644 index 00000000000..4f9745d8556 --- /dev/null +++ b/packages/app/src/app/pages/Profile/ShowcaseCard/abbreviateNumber.ts @@ -0,0 +1,31 @@ +interface Options { + units?: string[]; + decimalPlaces?: number; +} + +export const abbreviateNumber = ( + number: number, + { units = ['k', 'm', 'b', 't'], decimalPlaces = 0 }: Options = {} +) => { + const decPlaces = 10 ** decimalPlaces; + let result: number | string = Math.abs(number); + + for (let i = units.length - 1; i >= 0; i--) { + const size = 10 ** ((i + 1) * 3); + + if (size <= result) { + result = Math.round(((result as number) * decPlaces) / size) / decPlaces; + + if (result === 1000 && i < units.length - 1) { + result = 1; + i++; + } + + result = `${result}${units[i]}`; + + break; + } + } + + return number < 0 ? `-${result}` : result; +}; diff --git a/packages/app/src/app/pages/Profile/ShowcaseCard/elements.ts b/packages/app/src/app/pages/Profile/ShowcaseCard/elements.ts new file mode 100644 index 00000000000..69e3f762c13 --- /dev/null +++ b/packages/app/src/app/pages/Profile/ShowcaseCard/elements.ts @@ -0,0 +1,105 @@ +import styled, { css } from 'styled-components'; +import { Button } from 'reakit/Button'; +import { Link, Menu as BaseMenu } from '@codesandbox/common/lib/components'; + +export const Container = styled.div` + min-width: 303px; + border: 1px #242424 solid; + border-radius: 4px; + background-color: #151515; +`; + +export const Preview = styled.img` + width: 100%; +`; + +export const SandboxInfo = styled.div` + padding: 0.5rem 1rem 1rem 1rem; +`; + +export const TitleRow = styled.div` + display: flex; +`; + +export const Title = styled.h1` + flex: 1 1 auto; + display: inline-flex; + color: #fff; + font-family: Inter; + font-size: 14px; + font-weight: 500; +`; + +export const Menu = styled(BaseMenu)` + flex: 0 0 auto; + + svg { + color: #757575; + font-size: 32px; + + &:hover, + &:focus { + color: #fff; + } + } +`; + +export const Description = styled.p` + color: #999; + font-family: Inter; + font-size: 14px; + font-weight: 500; +`; + +const iconButton = css` + display: flex; + align-items: center; + padding: 0; + margin: 0; + border: none; + background: none; + cursor: pointer; +`; + +export const Options = styled(Button)` + ${iconButton} +`; + +export const Statistics = styled.div` + display: grid; + grid-template-columns: repeat(3, auto) 1fr; + width: 100%; +`; + +const stat = css` + width: 80px; + color: #757575; + font-family: Inter; + font-size: 0.8rem; + + svg { + width: 18px; + padding-right: 0.5rem; + font-size: 1rem; + } +`; + +export const Action = styled(Button)` + ${stat} + ${iconButton} + + &:hover, + &:focus { + color: #fff; + } +`; + +export const Stat = styled.span` + ${stat} + display: flex; + align-items: center; +`; + +export const Environment = styled(Link)` + justify-self: end; +`; diff --git a/packages/app/src/app/pages/Profile/ShowcaseCard/index.ts b/packages/app/src/app/pages/Profile/ShowcaseCard/index.ts new file mode 100644 index 00000000000..f691a1d7fd3 --- /dev/null +++ b/packages/app/src/app/pages/Profile/ShowcaseCard/index.ts @@ -0,0 +1 @@ +export { ShowcaseCard } from "./ShowcaseCard"; diff --git a/packages/app/src/app/pages/Profile/UserInfo/Icons.tsx b/packages/app/src/app/pages/Profile/UserInfo/Icons.tsx new file mode 100644 index 00000000000..37ae6d8eb83 --- /dev/null +++ b/packages/app/src/app/pages/Profile/UserInfo/Icons.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { + FaAngellist, + FaFacebookSquare, + FaTwitter, + FaInstagram, + FaLinkedin, + FaYoutube, + FaTwitch, + FaPatreon, + FaDribbble, + FaBehanceSquare, + FaMedium, + FaStackOverflow, + FaGithub, + FaGitlab, + FaNpm, +} from 'react-icons/fa'; +import { GoGlobe } from 'react-icons/go'; + +export const Icons = { + angellist: , + facebook: , + twitter: , + instagram: , + linkedin: , + youtube: , + twitch: , + patreon: , + dribbble: , + behance: , + medium: , + stackoverflow: , + github: , + gitlab: , + npm: , + web: , +}; diff --git a/packages/app/src/app/pages/Profile/UserInfo/UserInfo.tsx b/packages/app/src/app/pages/Profile/UserInfo/UserInfo.tsx new file mode 100644 index 00000000000..9fdee7af68a --- /dev/null +++ b/packages/app/src/app/pages/Profile/UserInfo/UserInfo.tsx @@ -0,0 +1,210 @@ +import React from 'react'; +import { MdAdd, MdClose } from 'react-icons/md'; +import { + unstable_Form as Form, + unstable_useFormState as useFormState, +} from 'reakit/Form'; +import { object, string, array, InferType, ValidationError } from 'yup'; +import set from 'lodash/set'; +import { Link } from '@codesandbox/common/lib/components'; +import { Icons } from './Icons'; +import { + Container, + AboutUser, + ProfilePicture, + Avatar, + ProBadge, + TeamBadge, + Name, + Username, + BioInput, + InputCounter, + Bio, + Associations, + SubHeader, + Grid, + Thumbnail, + SocialMedia, + Places, + LinkInput, + RemoveLink, + InputError, + SocialLink, + Edit, + Save, + Cancel, + AddSite, +} from './elements'; + +const getIcon = (url: string): React.ReactNode => + Icons[ + ( + new URL(url).hostname + .split(`.`) + .find(domain => Object.keys(Icons).includes(domain)) || `web` + ).toLowerCase() + ]; + +const schema = object({ + bio: string(), + socialLinks: array().of(string().url(`Please provide a valid URL`)), +}); + +type Values = InferType; + +const validateWithYup = (values: Values) => + schema.validate(values, { abortEarly: false }).then( + () => {}, + (error: ValidationError) => { + if (error.inner.length) { + throw error.inner.reduce( + (errors: {}, curr: ValidationError) => + set(errors, curr.path, curr.message), + {} + ); + } + } + ); + +interface IUserInfoProps { + avatar: string; + isPro: boolean; + isTeam: boolean; + name: string; + username: string; + bio: string; + associations: { + thumbnail: string; + url: string; + entityName: string; + }[]; + socialLinks: string[]; + isEditing: boolean; + canEdit: boolean; + toggleEditing: () => void; + onEdit: (values: Values) => void; +} + +export const UserInfo: React.FC = ({ + avatar, + isPro, + isTeam, + name, + username, + bio, + associations, + socialLinks, + isEditing = false, + canEdit = true, + toggleEditing, + onEdit, +}) => { + const initialValues = { bio, socialLinks }; + const form = useFormState({ + values: initialValues, + onValidate: validateWithYup, + onSubmit: (values: Values) => { + values.socialLinks = values.socialLinks.filter((link: string) => link); + // onEdit(values) + toggleEditing(); + }, + }); + + const reset = () => { + form.reset(); + toggleEditing(); + }; + + // TODO: + // - Need support for uploading Team Avatars + + return ( + + + + + {(isPro && Pro) || + (isTeam && Team)} + + {name} + {username} + {isEditing ? ( + + + {`${form.values + .bio.length || 0} / 280`} + + ) : ( + {bio} + )} + + {associations.length && ( + + {isTeam ? `Team Members` : `Teams`} + + {associations.map(({ thumbnail, url, entityName }) => ( + + + + ))} + + + )} + {(isEditing || socialLinks.length) && ( + + Other Places + + {form.values.socialLinks.map((url: string, i: number) => ( + <> + {/* eslint-disable */} + + {/* eslint-enable */} + {isEditing ? ( + <> + + + + + + + ) : ( + + {getIcon(url)} + {url} + + )} + + + ))} + + {isEditing && ( + + + Add Website + + )} + + )} + {isEditing && canEdit ? ( + <> + Save Changes + Cancel + + ) : ( + Edit Profile + )} + + ); +}; diff --git a/packages/app/src/app/pages/Profile/UserInfo/elements.ts b/packages/app/src/app/pages/Profile/UserInfo/elements.ts new file mode 100644 index 00000000000..8a1d98ff7fa --- /dev/null +++ b/packages/app/src/app/pages/Profile/UserInfo/elements.ts @@ -0,0 +1,373 @@ +import styled, { css } from 'styled-components'; +import TextareaAutosize from 'react-autosize-textarea'; +import { + unstable_FormMessage as FormMessage, + unstable_FormRemoveButton as FormRemoveButton, + unstable_FormPushButton as FormPushButton, + unstable_FormSubmitButton as FormSubmitButton, +} from 'reakit/Form'; +import { + Button as BaseButton, + FormInput, +} from '@codesandbox/common/lib/components'; + +export const Container = styled.div` + grid-area: userinfo; + align-self: start; + display: flex; + flex-direction: column; + width: 100%; + background-color: #151515; + border: 1px #242424 solid; + border-radius: 4px; +`; + +export const AboutUser = styled.div` + display: grid; + grid-template-areas: + 'avatar name' + 'avatar username' + 'bio bio'; + grid-template-columns: min-content; + padding: 1rem; + + &:not(:last-child) { + border-bottom: 1px #242424 solid; + } +`; + +export const ProfilePicture = styled.div` + position: relative; + grid-area: avatar; + display: flex; + justify-content: center; + align-items: center; + width: 68px; + height: 68px; +`; + +const rollover = css` + transition: filter 0.1s linear; + + &:hover { + filter: brightness(120%); + } +`; + +export const Avatar = styled.img` + ${rollover} + position: absolute; + top: 0; + left: 0; + width: 64px; + height: 64px; + border: 1px #242424 solid; + border-radius: 4px; +`; + +const badge = css` + position: absolute; + bottom: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + width: 34px; + height: 14px; + border-radius: 1px; + font-family: Inter; + font-weight: bold; + user-select: none; + + &:after { + content: ''; + position: absolute; + display: block; + width: 34px; + height: 14px; + border: 1px #151515 solid; + border-radius: 1px; + } +`; + +export const ProBadge = styled.span` + ${badge} + background-color: #535BCF; + color: #fff; + font-size: 11px; +`; + +export const TeamBadge = styled.span` + ${badge} + background-color: #BF5AF2; + color: #000; + font-size: 9px; +`; + +export const Name = styled.h1` + display: inline-flex; + align-items: center; + grid-area: name; + margin: 0; + margin-top: 0.5rem; + padding-left: 1rem; + color: #fff; + font-family: Inter; + font-size: 19px; + font-weight: 700; +`; + +export const Username = styled.h2` + display: inline-flex; + align-items: center; + grid-area: username; + margin: 0; + margin-bottom: 0.5rem; + padding-left: 1rem; + color: #757575; + font-family: Inter; + font-size: 13px; + font-weight: 500; +`; + +export const BioInput = styled(FormInput).attrs({ + forwardedAs: TextareaAutosize, + rows: 3, + maxLength: 280, + async: true, +})` + resize: none; +`; + +export const InputCounter = styled.div<{ valid: boolean }>` + ${({ valid }) => css` + width: 100%; + color: ${valid ? css`#757575` : css`#e1270e`}; + text-align: right; + `} +`; + +export const Bio = styled.div` + grid-area: bio; + margin-top: 1rem; + color: #999999; + font-family: Inter; + font-size: 13px; +`; + +export const Associations = styled.div` + padding: 1rem; + + &:not(:last-child) { + border-bottom: 1px #242424 solid; + } +`; + +export const SubHeader = styled.h3` + margin: 0; + margin-bottom: 1rem; + font-family: Inter; + font-size: 12px; + font-weight: 700; +`; + +export const Grid = styled.div` + display: grid; + grid-template-columns: repeat(auto-fit, 32px); + grid-gap: 13px 8px; +`; + +export const Thumbnail = styled.img` + ${rollover} + width: 2rem; + height: 2rem; + border: 1px #242424 solid; + border-radius: 4px; +`; + +export const SocialMedia = styled.div` + padding: 1rem; +`; + +export const Places = styled.ul` + ${({ theme }) => css` + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 0; + list-style: none; + + ${theme.media.greaterThan(theme.sizes.medium)} { + flex-direction: column; + } + `} +`; + +export const LinkInput = styled(FormInput).attrs({ + type: 'url', +})` + position: relative; + padding: 2px 32px 2px 8px; +`; + +export const RemoveLink = styled(FormRemoveButton)` + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + width: 25px; + height: 25px; + padding: 0; + border-radius: 0px 4px 0px 0px; + border: none; + background: none; + color: #999999; + font-size: 16px; + line-height: 25px; + user-select: none; + cursor: pointer; + + &:focus { + outline: none; + } + + &:hover, + &:focus { + color: #fff; + } +`; + +export const InputError = styled(FormMessage)` + margin-top: 0.5rem; + color: #e1270e; +`; + +export const SocialLink = styled.li` + ${({ theme }) => css` + position: relative; + width: 100%; + margin-bottom: 1rem; + color: #757575; + font-family: Inter; + font-size: 13px; + font-weight: 500; + + ${theme.media.lessThan(theme.sizes.medium)} { + flex: 0 0 25%; + min-width: 160px; + } + + a { + display: inline-flex; + align-items: center; + text-decoration: none; + transition: color 0.1s linear; + white-space: nowrap; + + &:visited, + &:active { + color: #757575; + } + + &:hover, + &:focus { + color: #fff; + } + + svg { + color: #fff; + font-size: 16px; + padding-right: 0.5rem; + } + } + `} +`; + +const button = css` + align-self: center; + width: 85%; + padding: 4px 8px; + border: none; + border-radius: 2px; + font-family: Inter; + font-size: 14px; +`; + +export const Edit = styled(BaseButton)` + ${button} + margin-bottom: 1.25rem; + background-color: #242424; + color: #fff; + + &:disabled { + opacity: 40%; + cursor: initial; + } + + &:hover, + &:focus { + background-color: #575757; + transform: scale(1.02); + } +`; + +export const Save = styled(FormSubmitButton)` + ${button} + margin-bottom: 0.5rem; + background-color: #0971f1; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); + color: #fff; + cursor: pointer; + + &:disabled { + box-shadow: none; + opacity: 40%; + cursor: initial; + } + + &:hover, + &:focus { + box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.24); + transform: scale(1.02); + } +`; + +export const Cancel = styled(BaseButton).attrs({ + type: 'reset', +})` + ${button} + margin-bottom: 1.25rem; + background-color: transparent; + color: #757575; + + &:hover, + &:focus { + background-color: transparent; + color: #999999; + } +`; + +export const AddSite = styled(FormPushButton)` + ${button} + display: inline-flex; + align-items: center; + width: 100%; + padding: 4px 0; + margin-bottom: 1.25rem; + background-color: transparent; + color: #757575; + text-align: inherit; + cursor: pointer; + + svg { + padding-right: 4px; + font-size: 16px; + } + + &:hover, + &:focus { + background-color: transparent; + color: #999999; + } +`; diff --git a/packages/app/src/app/pages/Profile/UserInfo/index.ts b/packages/app/src/app/pages/Profile/UserInfo/index.ts new file mode 100644 index 00000000000..5616777f615 --- /dev/null +++ b/packages/app/src/app/pages/Profile/UserInfo/index.ts @@ -0,0 +1 @@ +export { UserInfo } from "./UserInfo" diff --git a/packages/app/src/app/pages/Profile/elements.js b/packages/app/src/app/pages/Profile/elements.js deleted file mode 100644 index c8ee2ca2de1..00000000000 --- a/packages/app/src/app/pages/Profile/elements.js +++ /dev/null @@ -1,16 +0,0 @@ -import styled from 'styled-components'; -import Fullscreen from '@codesandbox/common/lib/components/flex/Fullscreen'; - -export const Container = styled(Fullscreen)` - color: white; - - display: flex; - flex-direction: column; - height: 100%; - background-image: linear-gradient(-180deg, #282d2f 0%, #1d1f20 100%); -`; - -export const Content = styled(Fullscreen)` - border-top: 1px solid ${props => props.theme.background3}; - flex: 0 0 70px; -`; diff --git a/packages/app/src/app/pages/Profile/elements.ts b/packages/app/src/app/pages/Profile/elements.ts new file mode 100644 index 00000000000..b7e0f29815a --- /dev/null +++ b/packages/app/src/app/pages/Profile/elements.ts @@ -0,0 +1,108 @@ +import styled, { css } from "styled-components" +import { DropPlaceholder } from "./DropPlaceholder" + +export const Content = styled.div` + ${({ theme }) => css` + display: grid; + grid-template-areas: + "userinfo" + "featured" + "search" + "pinned" + "title" + "showcase" + "pagination"; + grid-template-columns: 1fr; + + ${theme.media.greaterThan(theme.sizes.medium)} { + grid-template-areas: + "userinfo featured" + "userinfo search" + "userinfo pinned" + "userinfo title" + "userinfo showcase" + "userinfo pagination"; + grid-template-columns: 272px 1fr; + } + grid-gap: 1.75rem; + width: 100%; + max-width: 1280px; + margin-bottom: 1.5rem; + `} +` + +const row = css` + display: flex; + width: 100%; +` + +export const SearchRow = styled.div` + ${row} + grid-area: search; +` + +export const FeaturedPlaceholder = styled(DropPlaceholder)` + grid-area: featured; +` + +export const PinnedPlaceholder = styled(DropPlaceholder)` + grid-area: pinned; +` + +export const SandboxCount = styled.div` + flex: 0 0 auto; + display: flex; + justify-content: flex-end; + align-items: center; + min-width: 100px; + margin-left: 1rem; + color: #757575; + font-family: Inter; + font-size: 15px; + + em { + padding-right: 0.5rem; + color: #fff; + font-style: normal; + } +` + +const results = css` + display: grid; + grid-template-columns: repeat(auto-fit, minmax(305px, 1fr)); + grid-gap: 1.75rem; + justify-content: space-between; + width: 100%; +` + +export const PinnedGrid = styled.div` + ${results} + grid-area: pinned; +` + +export const TitleRow = styled.div` + ${row} + grid-area: title; +` + +export const SectionTitle = styled.h2` + margin: 0; + padding: 0; + font-family: Inter; + font-size: 29px; + font-weight: 700; +` + +export const ShowcaseGrid = styled.div` + ${results} + grid-area: showcase; +` + +export const PageNav = styled.div` + grid-area: pagination; + display: flex; + justify-content: center; + width: 100%; + margin-top: 1.75rem; + margin-bottom: 1.75rem; +` diff --git a/packages/app/src/app/pages/Profile/index.ts b/packages/app/src/app/pages/Profile/index.ts new file mode 100644 index 00000000000..cdc2d5a129b --- /dev/null +++ b/packages/app/src/app/pages/Profile/index.ts @@ -0,0 +1 @@ +export { Profile } from "./Profile" diff --git a/packages/app/src/app/pages/Profile/index.tsx b/packages/app/src/app/pages/Profile/index.tsx deleted file mode 100644 index 47c8762a72c..00000000000 --- a/packages/app/src/app/pages/Profile/index.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React, { useEffect } from 'react'; -import { Helmet } from 'react-helmet'; -import { Route, Switch } from 'react-router-dom'; -import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth'; -import Margin from '@codesandbox/common/lib/components/spacing/Margin'; -import { - profileSandboxesUrl, - profileLikesUrl, -} from '@codesandbox/common/lib/utils/url-generator'; -import { NotFound } from 'app/pages/common/NotFound'; -import { useOvermind } from 'app/overmind'; -import Header from './Header'; -import Navigation from './Navigation'; -import { Showcase } from './Showcase'; -import Sandboxes from './Sandboxes'; -import { Container, Content } from './elements'; - -interface IProfileProps { - match: { - params: { username: string }; - url: string; - }; -} - -const Profile: React.FC = ({ - match: { - params: { username }, - url, - }, -}) => { - const { - state: { - profile: { current: user, notFound }, - }, - actions: { - profile: { profileMounted }, - }, - } = useOvermind(); - - useEffect(() => { - profileMounted({ username }); - }, [profileMounted, username]); - - if (notFound) { - return ; - } - - if (!user) { - return
; - } - - return ( - - - {user.name || user.username} - CodeSandbox - -
- - - - - - - - - } /> - ( - - )} - /> - ( - - )} - /> - - - - - ); -}; - -export default Profile; diff --git a/packages/app/src/app/pages/index.tsx b/packages/app/src/app/pages/index.tsx index b574d25a6e4..a92dcb32107 100644 --- a/packages/app/src/app/pages/index.tsx +++ b/packages/app/src/app/pages/index.tsx @@ -39,7 +39,9 @@ const NotFound = Loadable(() => import(/* webpackChunkName: 'page-not-found' */ './common/NotFound') ); const Profile = Loadable(() => - import(/* webpackChunkName: 'page-profile' */ './Profile') + import(/* webpackChunkName: 'page-profile' */ './Profile').then(module => ({ + default: module.Profile, + })) ); const Search = Loadable(() => import(/* webpackChunkName: 'page-search' */ './Search').then(module => ({ diff --git a/packages/app/src/embed/theme/index.js b/packages/app/src/embed/theme/index.js index eeace529624..bca1516ea1b 100644 --- a/packages/app/src/embed/theme/index.js +++ b/packages/app/src/embed/theme/index.js @@ -1,6 +1,6 @@ import dot from 'dot-object'; import applicationTheme from '@codesandbox/common/lib/theme'; -import codesandboxBlack from '@codesandbox/common/lib/themes/codesandbox-black'; +import codesandboxBlack from '@codesandbox/common/lib/themes/codesandbox-black.json'; import codesandboxLight from '@codesandbox/common/lib/themes/codesandbox-light.json'; import tokens from './tokens'; diff --git a/packages/common/src/components/Footer.tsx b/packages/common/src/components/Footer.tsx deleted file mode 100644 index 6aead232fdc..00000000000 --- a/packages/common/src/components/Footer.tsx +++ /dev/null @@ -1,165 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import MaxWidth from './flex/MaxWidth'; - -import media from '../utils/media'; - -const Container = styled.div` - display: flex; - justify-content: space-around; - width: 100%; - padding-top: 5rem; - padding-bottom: 3rem; - flex-wrap: wrap; -`; - -const Column = styled.div` - width: calc(33% - 2rem); - margin: 0 1rem; - - ${media.phone` - width: 100%; - margin-bottom: 1rem; - `}; -`; - -const Title = styled.h5` - font-size: 1.125rem; - font-weight: 400; - margin: 0; - margin-bottom: 1rem; - - color: ${({ theme }) => theme.secondary}; -`; - -const List = styled.ul` - color: rgba(255, 255, 255, 0.7); - list-style-type: none; - margin: 0; - padding: 0; - - li { - a { - transition: 0.3s ease color; - text-decoration: none; - color: rgba(255, 255, 255, 0.7); - - &:hover { - color: rgba(255, 255, 255, 0.9); - } - } - } -`; - -const Background = styled.div` - position: relative; - background-color: ${props => props.theme.background2.darken(0.2)}; - padding: 1rem; - z-index: 5; -`; - -export default () => ( - - - <> - - - CodeSandbox - -
  • - - Create Sandbox - -
    • -
  • - - Search - -
    • -
  • - - Explore - -
    • -
  • - Documentation -
    • -
  • - - Patron - -
    • -
  • - - Status - -
    • -
  • - - Sign In - -
    • -     -     - - - About - -
  • - - Blog - -
    • -
  • - - GitHub - -
    • -
  • - Careers -
    • -
  • - Legal -
    • -
  • - Contact Us -
    • -     -     - - - Social - -
  • - - Twitter - -
    • -
  • - - Spectrum - -
    • -     -     -     - -     -     -); diff --git a/packages/common/src/components/Footer/Footer.tsx b/packages/common/src/components/Footer/Footer.tsx new file mode 100644 index 00000000000..be8846f44fe --- /dev/null +++ b/packages/common/src/components/Footer/Footer.tsx @@ -0,0 +1,172 @@ +import React from 'react'; +import { Link } from 'gatsby'; +import { P } from '../Typography'; +import { GitHub, Spectrum, Twitter } from '../icons'; +import { Container, Nav, Social } from './elements'; + +export const Footer = () => ( + + + +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +     +

    + Copyright © {new Date().getFullYear()} CodeSandbox +

    +     +); diff --git a/packages/common/src/components/Footer/elements.ts b/packages/common/src/components/Footer/elements.ts new file mode 100644 index 00000000000..a3a2dba78af --- /dev/null +++ b/packages/common/src/components/Footer/elements.ts @@ -0,0 +1,62 @@ +import styled, { css } from 'styled-components'; + +export const Container = styled.footer` + padding-bottom: 1rem; + margin-top: 6rem; + margin-bottom: 3rem; +`; + +export const Nav = styled.nav` + ${({ theme }) => css` + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + grid-gap: 3rem; + width: 1200px; + max-width: 80%; + padding-top: 2.5rem; + margin: auto; + margin-bottom: 4.5rem; + border-top: 1px solid ${theme.homepage.grey}; + + a { + color: inherit; + text-decoration: none; + + &:hover { + color: ${theme.homepage.white}; + } + } + + ul { + padding: 0; + margin: 0; + list-style: none; + + li:first-child { + margin-bottom: 1rem; + } + } + `} +`; + +export const Social = styled.ul` + ${({ theme }) => css` + display: grid; + grid-template-columns: repeat(3, 1rem); + grid-gap: 1rem; + justify-content: center; + padding: 0; + margin: 0; + list-style: none; + + svg { + path { + transition: all 200ms ease; + } + + &:hover path { + fill: ${theme.homepage.white}; + } + } + `} +`; diff --git a/packages/common/src/components/Footer/index.ts b/packages/common/src/components/Footer/index.ts new file mode 100644 index 00000000000..65e2506faf5 --- /dev/null +++ b/packages/common/src/components/Footer/index.ts @@ -0,0 +1 @@ +export { Footer } from './Footer'; diff --git a/packages/common/src/components/Layout.ts b/packages/common/src/components/Layout.ts new file mode 100644 index 00000000000..0d6fcbb44cb --- /dev/null +++ b/packages/common/src/components/Layout.ts @@ -0,0 +1,22 @@ +import styled, { css } from 'styled-components'; + +export const Main = styled.main` + ${({ theme }) => css` + display: flex; + flex-direction: column; + width: 100%; + min-height: 100vh; + height: 100%; + background-color: #040404; + color: ${theme.white}; + ${theme.fonts.primary.normal}; + `} +`; + +export const PageContent = styled.section` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0 1rem; +`; diff --git a/packages/common/src/components/Link.tsx b/packages/common/src/components/Link.tsx index 1f08807a5f6..25ce2733ee6 100644 --- a/packages/common/src/components/Link.tsx +++ b/packages/common/src/components/Link.tsx @@ -3,6 +3,7 @@ import { Link as RouterLink } from 'react-router-dom'; export interface ILinkProps { to?: any; + alt?: string; external?: boolean; onClick?: React.MouseEventHandler; } diff --git a/packages/common/src/components/Typography.tsx b/packages/common/src/components/Typography.tsx new file mode 100644 index 00000000000..970acf29b5e --- /dev/null +++ b/packages/common/src/components/Typography.tsx @@ -0,0 +1,67 @@ +import styled, { css } from 'styled-components'; + +export const H2 = styled.h2` + ${({ theme }) => css` + padding: 0; + margin: 0; + margin-bottom: 0.5rem; + color: ${theme.homepage.white}; + font-family: ${theme.homepage.appleFont}; + font-size: 3rem; + font-weight: 500; + line-height: 57px; + + ${theme.breakpoints.md} { + font-size: 1.8rem; + line-height: 1.2; + } + `} +`; + +export const H3 = styled.h3` + ${({ theme }) => css` + margin: 0; + color: ${theme.homepage.white}; + font-size: 2rem; + font-weight: bold; + line-height: 39px; + `} +`; + +export const H5 = styled.h5` + ${({ theme }) => css` + margin: 0; + color: ${theme.homepage.white}; + font-family: ${theme.homepage.appleFont}; + font-size: 1.4375rem; + font-weight: 500; + line-height: 27px; + `} +`; + +export const P = styled.p<{ + small?: boolean; + big?: boolean; + muted?: boolean; + centered?: boolean; +}>` + ${({ + small = false, + big = false, + muted = false, + centered = false, + theme, + }) => css` + margin: 0; + margin-bottom: 1rem; + color: ${muted ? theme.homepage.muted : theme.homepage.white}; + font-size: ${small ? css`0.875rem` : big ? css`1.4375rem` : css`1.125rem`}; + font-weight: normal; + line-height: 1.3; + + ${centered && + css` + text-align: center; + `} + `} +`; diff --git a/packages/common/src/components/icons/GitHub.tsx b/packages/common/src/components/icons/GitHub.tsx new file mode 100644 index 00000000000..a29212c921d --- /dev/null +++ b/packages/common/src/components/icons/GitHub.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +export const GitHub = props => ( + + + +); diff --git a/packages/common/src/components/icons/Spectrum.tsx b/packages/common/src/components/icons/Spectrum.tsx new file mode 100644 index 00000000000..3858f2f3a2f --- /dev/null +++ b/packages/common/src/components/icons/Spectrum.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +export const Spectrum = props => ( + + + +); diff --git a/packages/common/src/components/icons/Twitter.tsx b/packages/common/src/components/icons/Twitter.tsx new file mode 100644 index 00000000000..4963e59db6c --- /dev/null +++ b/packages/common/src/components/icons/Twitter.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +export const Twitter = props => ( + + + +); diff --git a/packages/common/src/components/icons/index.ts b/packages/common/src/components/icons/index.ts new file mode 100644 index 00000000000..978cc27130a --- /dev/null +++ b/packages/common/src/components/icons/index.ts @@ -0,0 +1,3 @@ +export { GitHub } from './GitHub'; +export { Spectrum } from './Spectrum'; +export { Twitter } from './Twitter'; diff --git a/packages/common/src/components/index.ts b/packages/common/src/components/index.ts index 4b825832708..8adea8caa5c 100644 --- a/packages/common/src/components/index.ts +++ b/packages/common/src/components/index.ts @@ -1,8 +1,11 @@ export { Button, ButtonIcon, IButtonProps } from './Button'; +export { Footer } from './Footer'; export { Menu, MenuItem, Separator } from './Menu'; export { Modal, IModalProps } from './Modal'; export { MultiAction } from './MultiAction'; export { Pagination } from './Pagination'; export { SearchInput } from './SearchInput'; export { FormInput } from './FormInput'; +export { Main, PageContent } from "./Layout" export { Link } from './Link'; +export { H2, H3, H5, P } from './Typography'; diff --git a/yarn.lock b/yarn.lock index 00eeffb1db1..aaef459ab1f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20,22 +20,21 @@ ts-invariant "^0.4.4" tslib "^1.10.0" -"@babel/cli@^7.2.3", "@babel/cli@^7.5.5": - version "7.5.5" - resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.5.5.tgz#bdb6d9169e93e241a08f5f7b0265195bf38ef5ec" - integrity sha512-UHI+7pHv/tk9g6WXQKYz+kmXTI77YtuY3vqC59KIqcoWEjsJJSG6rAxKaLsgj3LDyadsPrCB929gVOKM6Hui0w== +"@babel/cli@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.7.4.tgz#38804334c8db40209f88c69a5c90998e60cca18b" + integrity sha512-O7mmzaWdm+VabWQmxuM8hqNrWGGihN83KfhPUzp2lAW4kzIMwBxujXkZbD4fMwKMYY9FXTbDvXsJqU+5XHXi4A== dependencies: - commander "^2.8.1" + commander "^4.0.1" convert-source-map "^1.1.0" fs-readdir-recursive "^1.1.0" glob "^7.0.0" lodash "^4.17.13" - mkdirp "^0.5.1" - output-file-sync "^2.0.0" + make-dir "^2.1.0" slash "^2.0.0" source-map "^0.5.0" optionalDependencies: - chokidar "^2.0.4" + chokidar "^2.1.8" "@babel/code-frame@7.0.0": version "7.0.0" @@ -110,6 +109,26 @@ semver "^5.4.1" source-map "^0.5.0" +"@babel/core@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.4.tgz#37e864532200cb6b50ee9a4045f5f817840166ab" + integrity sha512-+bYbx56j4nYBmpsWtnPUsKW3NdnYxbqyfrP2w9wILBuHzdfIKz9prieZK0DFPyIzkjYVUe4QkusGL07r5pXznQ== + dependencies: + "@babel/code-frame" "^7.5.5" + "@babel/generator" "^7.7.4" + "@babel/helpers" "^7.7.4" + "@babel/parser" "^7.7.4" + "@babel/template" "^7.7.4" + "@babel/traverse" "^7.7.4" + "@babel/types" "^7.7.4" + convert-source-map "^1.7.0" + debug "^4.1.0" + json5 "^2.1.0" + lodash "^4.17.13" + resolve "^1.3.2" + semver "^5.4.1" + source-map "^0.5.0" + "@babel/generator@^7.0.0", "@babel/generator@^7.1.2", "@babel/generator@^7.4.0", "@babel/generator@^7.4.4", "@babel/generator@^7.6.3", "@babel/generator@^7.6.4": version "7.6.4" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.6.4.tgz#a4f8437287bf9671b07f483b76e3bb731bc97671" @@ -120,6 +139,16 @@ lodash "^4.17.13" source-map "^0.5.0" +"@babel/generator@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369" + integrity sha512-m5qo2WgdOJeyYngKImbkyQrnUN1mPceaG5BV+G0E3gWsa4l/jCSryWJdM2x8OuGAOyh+3d5pVYfZWCiNFtynxg== + dependencies: + "@babel/types" "^7.7.4" + jsesc "^2.5.1" + lodash "^4.17.13" + source-map "^0.5.0" + "@babel/helper-annotate-as-pure@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32" @@ -127,6 +156,13 @@ dependencies: "@babel/types" "^7.0.0" +"@babel/helper-annotate-as-pure@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz#bb3faf1e74b74bd547e867e48f551fa6b098b6ce" + integrity sha512-2BQmQgECKzYKFPpiycoF9tlb5HA4lrVyAmLLVK177EcQAqjVLciUb2/R+n1boQ9y5ENV3uz2ZqiNw7QMBBw1Og== + dependencies: + "@babel/types" "^7.7.4" + "@babel/helper-builder-binary-assignment-operator-visitor@^7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.1.0.tgz#6b69628dfe4087798e0c4ed98e3d4a6b2fbd2f5f" @@ -143,6 +179,14 @@ "@babel/types" "^7.3.0" esutils "^2.0.0" +"@babel/helper-builder-react-jsx@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.7.4.tgz#da188d247508b65375b2c30cf59de187be6b0c66" + integrity sha512-kvbfHJNN9dg4rkEM4xn1s8d1/h6TYNvajy9L1wx4qLn9HFg0IkTsQi4rfBe92nxrPUFcMsHoMV+8rU7MJb3fCA== + dependencies: + "@babel/types" "^7.7.4" + esutils "^2.0.0" + "@babel/helper-call-delegate@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.4.4.tgz#87c1f8ca19ad552a736a7a27b1c1fcf8b1ff1f43" @@ -164,6 +208,18 @@ "@babel/helper-replace-supers" "^7.5.5" "@babel/helper-split-export-declaration" "^7.4.4" +"@babel/helper-create-class-features-plugin@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.7.4.tgz#fce60939fd50618610942320a8d951b3b639da2d" + integrity sha512-l+OnKACG4uiDHQ/aJT8dwpR+LhCJALxL0mJ6nzjB25e5IPwqV1VOsY7ah6UB1DG+VOXAIMtuC54rFJGiHkxjgA== + dependencies: + "@babel/helper-function-name" "^7.7.4" + "@babel/helper-member-expression-to-functions" "^7.7.4" + "@babel/helper-optimise-call-expression" "^7.7.4" + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/helper-replace-supers" "^7.7.4" + "@babel/helper-split-export-declaration" "^7.7.4" + "@babel/helper-define-map@^7.4.0", "@babel/helper-define-map@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.5.5.tgz#3dec32c2046f37e09b28c93eb0b103fd2a25d369" @@ -190,6 +246,15 @@ "@babel/template" "^7.1.0" "@babel/types" "^7.0.0" +"@babel/helper-function-name@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz#ab6e041e7135d436d8f0a3eca15de5b67a341a2e" + integrity sha512-AnkGIdiBhEuiwdoMnKm7jfPfqItZhgRaZfMg1XX3bS25INOnLPjPG1Ppnajh8eqgt5kPJnfqrRHqFqmjKDZLzQ== + dependencies: + "@babel/helper-get-function-arity" "^7.7.4" + "@babel/template" "^7.7.4" + "@babel/types" "^7.7.4" + "@babel/helper-get-function-arity@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3" @@ -197,6 +262,13 @@ dependencies: "@babel/types" "^7.0.0" +"@babel/helper-get-function-arity@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0" + integrity sha512-QTGKEdCkjgzgfJ3bAyRwF4yyT3pg+vDgan8DSivq1eS0gwi+KGKE5x8kRcbeFTb/673mkO5SN1IZfmCfA5o+EA== + dependencies: + "@babel/types" "^7.7.4" + "@babel/helper-hoist-variables@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.4.4.tgz#0298b5f25c8c09c53102d52ac4a98f773eb2850a" @@ -211,12 +283,26 @@ dependencies: "@babel/types" "^7.5.5" +"@babel/helper-member-expression-to-functions@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.7.4.tgz#356438e2569df7321a8326644d4b790d2122cb74" + integrity sha512-9KcA1X2E3OjXl/ykfMMInBK+uVdfIVakVe7W7Lg3wfXUNyS3Q1HWLFRwZIjhqiCGbslummPDnmb7vIekS0C1vw== + dependencies: + "@babel/types" "^7.7.4" + "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.0.0-beta.49": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d" dependencies: "@babel/types" "^7.0.0" +"@babel/helper-module-imports@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz#e5a92529f8888bf319a6376abfbd1cebc491ad91" + integrity sha512-dGcrX6K9l8258WFjyDLJwuVKxR4XZfU0/vTUgOQYWEnRD8mgr+p4d6fCUMq/ys0h4CCt/S5JhbvtyErjWouAUQ== + dependencies: + "@babel/types" "^7.7.4" + "@babel/helper-module-transforms@^7.1.0", "@babel/helper-module-transforms@^7.4.4": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.5.5.tgz#f84ff8a09038dcbca1fd4355661a500937165b4a" @@ -236,6 +322,13 @@ dependencies: "@babel/types" "^7.0.0" +"@babel/helper-optimise-call-expression@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.7.4.tgz#034af31370d2995242aa4df402c3b7794b2dcdf2" + integrity sha512-VB7gWZ2fDkSuqW6b1AKXkJWO5NyNI3bFL/kK79/30moK57blr6NbH8xcl2XcKCwOmJosftWunZqfO84IGq3ZZg== + dependencies: + "@babel/types" "^7.7.4" + "@babel/helper-plugin-utils@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250" @@ -259,6 +352,17 @@ "@babel/traverse" "^7.1.0" "@babel/types" "^7.0.0" +"@babel/helper-remap-async-to-generator@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.7.4.tgz#c68c2407350d9af0e061ed6726afb4fff16d0234" + integrity sha512-Sk4xmtVdM9sA/jCI80f+KS+Md+ZHIpjuqmYPk1M7F/upHou5e4ReYmExAiu6PVe65BhJPZA2CY9x9k4BqE5klw== + dependencies: + "@babel/helper-annotate-as-pure" "^7.7.4" + "@babel/helper-wrap-function" "^7.7.4" + "@babel/template" "^7.7.4" + "@babel/traverse" "^7.7.4" + "@babel/types" "^7.7.4" + "@babel/helper-replace-supers@^7.1.0", "@babel/helper-replace-supers@^7.4.0", "@babel/helper-replace-supers@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.5.5.tgz#f84ce43df031222d2bad068d2626cb5799c34bc2" @@ -269,6 +373,16 @@ "@babel/traverse" "^7.5.5" "@babel/types" "^7.5.5" +"@babel/helper-replace-supers@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.7.4.tgz#3c881a6a6a7571275a72d82e6107126ec9e2cdd2" + integrity sha512-pP0tfgg9hsZWo5ZboYGuBn/bbYT/hdLPVSS4NMmiRJdwWhP0IznPwN9AE1JwyGsjSPLC364I0Qh5p+EPkGPNpg== + dependencies: + "@babel/helper-member-expression-to-functions" "^7.7.4" + "@babel/helper-optimise-call-expression" "^7.7.4" + "@babel/traverse" "^7.7.4" + "@babel/types" "^7.7.4" + "@babel/helper-simple-access@^7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz#65eeb954c8c245beaa4e859da6188f39d71e585c" @@ -284,6 +398,13 @@ dependencies: "@babel/types" "^7.4.4" +"@babel/helper-split-export-declaration@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz#57292af60443c4a3622cf74040ddc28e68336fd8" + integrity sha512-guAg1SXFcVr04Guk9eq0S4/rWS++sbmyqosJzVs8+1fH5NI+ZcmkaSkc7dmtAFbHFva6yRJnjW3yAcGxjueDug== + dependencies: + "@babel/types" "^7.7.4" + "@babel/helper-wrap-function@^7.1.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa" @@ -294,6 +415,16 @@ "@babel/traverse" "^7.1.0" "@babel/types" "^7.2.0" +"@babel/helper-wrap-function@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz#37ab7fed5150e22d9d7266e830072c0cdd8baace" + integrity sha512-VsfzZt6wmsocOaVU0OokwrIytHND55yvyT4BPB9AIIgwr8+x7617hetdJTsuGwygN5RC6mxA9EJztTjuwm2ofg== + dependencies: + "@babel/helper-function-name" "^7.7.4" + "@babel/template" "^7.7.4" + "@babel/traverse" "^7.7.4" + "@babel/types" "^7.7.4" + "@babel/helpers@^7.1.2", "@babel/helpers@^7.4.3", "@babel/helpers@^7.6.2": version "7.6.2" resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.6.2.tgz#681ffe489ea4dcc55f23ce469e58e59c1c045153" @@ -303,6 +434,15 @@ "@babel/traverse" "^7.6.2" "@babel/types" "^7.6.0" +"@babel/helpers@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.7.4.tgz#62c215b9e6c712dadc15a9a0dcab76c92a940302" + integrity sha512-ak5NGZGJ6LV85Q1Zc9gn2n+ayXOizryhjSUBTdu5ih1tlVCJeuQENzc4ItyCVhINVXvIT/ZQ4mheGIsfBkpskg== + dependencies: + "@babel/template" "^7.7.4" + "@babel/traverse" "^7.7.4" + "@babel/types" "^7.7.4" + "@babel/highlight@^7.0.0": version "7.5.0" resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.5.0.tgz#56d11312bd9248fa619591d02472be6e8cb32540" @@ -317,6 +457,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.6.4.tgz#cb9b36a7482110282d5cb6dd424ec9262b473d81" integrity sha512-D8RHPW5qd0Vbyo3qb+YjO5nvUVRTXFLQ/FsDxJU2Nqz4uB5EnUN0ZQSEYpvTIbRuttig1XbHWU5oMeQwQSAA+A== +"@babel/parser@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.4.tgz#75ab2d7110c2cf2fa949959afb05fa346d2231bb" + integrity sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g== + "@babel/plugin-proposal-async-generator-functions@^7.1.0", "@babel/plugin-proposal-async-generator-functions@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e" @@ -344,7 +489,7 @@ "@babel/helper-create-class-features-plugin" "^7.4.0" "@babel/helper-plugin-utils" "^7.0.0" -"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.3.3", "@babel/plugin-proposal-class-properties@^7.4.4", "@babel/plugin-proposal-class-properties@^7.5.5": +"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.3.3", "@babel/plugin-proposal-class-properties@^7.4.4": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.5.5.tgz#a974cfae1e37c3110e71f3c6a2e48b8e71958cd4" integrity sha512-AF79FsnWFxjlaosgdi421vmYG6/jg79bVD0dpD44QdgobzHKuLZ6S3vl8la9qIeSwGi8i1fS0O1mfuDAAdo1/A== @@ -352,6 +497,14 @@ "@babel/helper-create-class-features-plugin" "^7.5.5" "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-proposal-class-properties@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.7.4.tgz#2f964f0cb18b948450362742e33e15211e77c2ba" + integrity sha512-EcuXeV4Hv1X3+Q1TsuOmyyxeTRiSqurGJ26+I/FW1WbymmRRapVORm6x1Zl3iDIHyRxEs+VXWp6qnlcfcJSbbw== + dependencies: + "@babel/helper-create-class-features-plugin" "^7.7.4" + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-proposal-decorators@7.4.0", "@babel/plugin-proposal-decorators@^7.1.0": version "7.4.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.4.0.tgz#8e1bfd83efa54a5f662033afcc2b8e701f4bb3a9" @@ -399,6 +552,14 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-object-rest-spread" "^7.2.0" +"@babel/plugin-proposal-object-rest-spread@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.7.4.tgz#cc57849894a5c774214178c8ab64f6334ec8af71" + integrity sha512-rnpnZR3/iWKmiQyJ3LKJpSwLDcX/nSXhdLk4Aq/tXOApIvyu7qoabrige0ylsAJffaUC51WiBu209Q0U+86OWQ== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-object-rest-spread" "^7.7.4" + "@babel/plugin-proposal-optional-catch-binding@^7.0.0", "@babel/plugin-proposal-optional-catch-binding@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.2.0.tgz#135d81edb68a081e55e56ec48541ece8065c38f5" @@ -406,13 +567,13 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-optional-catch-binding" "^7.2.0" -"@babel/plugin-proposal-optional-chaining@^7.6.0": - version "7.6.0" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.6.0.tgz#e9bf1f9b9ba10c77c033082da75f068389041af8" - integrity sha512-kj4gkZ6qUggkprRq3Uh5KP8XnE1MdIO0J7MhdDX8+rAbB6dJ2UrensGIS+0NPZAaaJ1Vr0PN6oLUgXMU1uMcSg== +"@babel/plugin-proposal-optional-chaining@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.7.4.tgz#3f04c2de1a942cbd3008324df8144b9cbc0ca0ba" + integrity sha512-JmgaS+ygAWDR/STPe3/7y0lNlHgS+19qZ9aC06nYLwQ/XB7c0q5Xs+ksFU3EDnp9EiEsO0dnRAOKeyLHTZuW3A== dependencies: "@babel/helper-plugin-utils" "^7.0.0" - "@babel/plugin-syntax-optional-chaining" "^7.2.0" + "@babel/plugin-syntax-optional-chaining" "^7.7.4" "@babel/plugin-proposal-unicode-property-regex@^7.0.0", "@babel/plugin-proposal-unicode-property-regex@^7.4.0", "@babel/plugin-proposal-unicode-property-regex@^7.4.4": version "7.4.4" @@ -456,6 +617,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-syntax-dynamic-import@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.7.4.tgz#29ca3b4415abfe4a5ec381e903862ad1a54c3aec" + integrity sha512-jHQW0vbRGvwQNgyVxwDh4yuXu4bH1f5/EICJLAhl1SblLs2CDhrsmCk+v5XLdE9wxtAFRyxx+P//Iw+a5L/tTg== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-flow@^7.0.0", "@babel/plugin-syntax-flow@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.2.0.tgz#a765f061f803bc48f240c26f8747faf97c26bf7c" @@ -463,6 +631,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-syntax-flow@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.7.4.tgz#6d91b59e1a0e4c17f36af2e10dd64ef220919d7b" + integrity sha512-2AMAWl5PsmM5KPkB22cvOkUyWk6MjUaqhHNU5nSPUl/ns3j5qLfw2SuYP5RbVZ0tfLvePr4zUScbICtDP2CUNw== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-json-strings@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz#72bd13f6ffe1d25938129d2a186b11fd62951470" @@ -477,6 +652,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-syntax-jsx@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.7.4.tgz#dab2b56a36fb6c3c222a1fbc71f7bf97f327a9ec" + integrity sha512-wuy6fiMe9y7HeZBWXYCGt2RGxZOj0BImZ9EyXJVnVGBKO/Br592rbR3rtIQn0eQhAk9vqaKP5n8tVqEFBQMfLg== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e" @@ -484,16 +666,23 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-syntax-object-rest-spread@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.7.4.tgz#47cf220d19d6d0d7b154304701f468fc1cc6ff46" + integrity sha512-mObR+r+KZq0XhRVS2BrBKBpr5jqrqzlPvS9C9vuOf5ilSwzloAl7RPWLrgKdWS6IreaVrjHxTjtyqFiOisaCwg== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-optional-catch-binding@^7.0.0", "@babel/plugin-syntax-optional-catch-binding@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.2.0.tgz#a94013d6eda8908dfe6a477e7f9eda85656ecf5c" dependencies: "@babel/helper-plugin-utils" "^7.0.0" -"@babel/plugin-syntax-optional-chaining@^7.2.0": - version "7.2.0" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.2.0.tgz#a59d6ae8c167e7608eaa443fda9fa8fa6bf21dff" - integrity sha512-HtGCtvp5Uq/jH/WNUPkK6b7rufnCPLLlDAFN7cmACoIjaOOiXxUt3SswU5loHqrhtqTsa/WoLQ1OQ1AGuZqaWA== +"@babel/plugin-syntax-optional-chaining@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.7.4.tgz#c91fdde6de85d2eb8906daea7b21944c3610c901" + integrity sha512-2MqYD5WjZSbJdUagnJvIdSfkb/ucOC9/1fRJxm7GAxY6YQLWlUvkfxoNbUPcPLHJyetKUDQ4+yyuUyAoc0HriA== dependencies: "@babel/helper-plugin-utils" "^7.0.0" @@ -504,6 +693,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-syntax-typescript@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.7.4.tgz#5d037ffa10f3b25a16f32570ebbe7a8c2efa304b" + integrity sha512-77blgY18Hud4NM1ggTA8xVT/dBENQf17OpiToSa2jSmEY3fWXD2jwrdVlO4kq5yzUTeF15WSQ6b4fByNvJcjpQ== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-transform-arrow-functions@^7.0.0", "@babel/plugin-transform-arrow-functions@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550" @@ -520,6 +716,15 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/helper-remap-async-to-generator" "^7.1.0" +"@babel/plugin-transform-async-to-generator@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.7.4.tgz#694cbeae6d613a34ef0292713fa42fb45c4470ba" + integrity sha512-zpUTZphp5nHokuy8yLlyafxCJ0rSlFoSHypTUWgpdwoDXWQcseaect7cJ8Ppk6nunOM6+5rPMkod4OYKPR5MUg== + dependencies: + "@babel/helper-module-imports" "^7.7.4" + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/helper-remap-async-to-generator" "^7.7.4" + "@babel/plugin-transform-block-scoped-functions@^7.0.0", "@babel/plugin-transform-block-scoped-functions@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.2.0.tgz#5d3cc11e8d5ddd752aa64c9148d0db6cb79fd190" @@ -623,6 +828,14 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-flow" "^7.2.0" +"@babel/plugin-transform-flow-strip-types@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.7.4.tgz#cc73f85944782df1d77d80977bc097920a8bf31a" + integrity sha512-w9dRNlHY5ElNimyMYy0oQowvQpwt/PRHI0QS98ZJCTZU2bvSnKXo5zEiD5u76FBPigTm8TkqzmnUTg16T7qbkA== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-flow" "^7.7.4" + "@babel/plugin-transform-for-of@^7.0.0", "@babel/plugin-transform-for-of@^7.4.3", "@babel/plugin-transform-for-of@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.4.4.tgz#0267fc735e24c808ba173866c6c4d1440fc3c556" @@ -749,13 +962,20 @@ "@babel/helper-annotate-as-pure" "^7.0.0" "@babel/helper-plugin-utils" "^7.0.0" -"@babel/plugin-transform-react-display-name@7.2.0", "@babel/plugin-transform-react-display-name@^7.0.0", "@babel/plugin-transform-react-display-name@^7.2.0": +"@babel/plugin-transform-react-display-name@7.2.0", "@babel/plugin-transform-react-display-name@^7.0.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.2.0.tgz#ebfaed87834ce8dc4279609a4f0c324c156e3eb0" integrity sha512-Htf/tPa5haZvRMiNSQSFifK12gtr/8vwfr+A9y69uF0QcU77AVu4K7MiHEkTxF7lQoHOL0F9ErqgfNEAKgXj7A== dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-transform-react-display-name@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.7.4.tgz#9f2b80b14ebc97eef4a9b29b612c58ed9c0d10dd" + integrity sha512-sBbIvqYkthai0X0vkD2xsAwluBp+LtNHH+/V4a5ydifmTtb8KOVOlrMIk/MYmIc4uTYDnjZUHQildYNo36SRJw== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-transform-react-jsx-self@^7.0.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.2.0.tgz#461e21ad9478f1031dd5e276108d027f1b5240ba" @@ -764,6 +984,14 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-jsx" "^7.2.0" +"@babel/plugin-transform-react-jsx-self@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.7.4.tgz#81b8fbfd14b2215e8f1c2c3adfba266127b0231c" + integrity sha512-PWYjSfqrO273mc1pKCRTIJXyqfc9vWYBax88yIhQb+bpw3XChVC7VWS4VwRVs63wFHKxizvGSd00XEr+YB9Q2A== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-jsx" "^7.7.4" + "@babel/plugin-transform-react-jsx-source@^7.0.0": version "7.5.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.5.0.tgz#583b10c49cf057e237085bcbd8cc960bd83bd96b" @@ -772,6 +1000,14 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-jsx" "^7.2.0" +"@babel/plugin-transform-react-jsx-source@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.7.4.tgz#8994b1bf6014b133f5a46d3b7d1ee5f5e3e72c10" + integrity sha512-5ZU9FnPhqtHsOXxutRtXZAzoEJwDaP32QcobbMP1/qt7NYcsCNK8XgzJcJfoEr/ZnzVvUNInNjIW22Z6I8p9mg== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-jsx" "^7.7.4" + "@babel/plugin-transform-react-jsx@^7.0.0": version "7.3.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.3.0.tgz#f2cab99026631c767e2745a5368b331cfe8f5290" @@ -781,6 +1017,15 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-jsx" "^7.2.0" +"@babel/plugin-transform-react-jsx@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.7.4.tgz#d91205717fae4e2f84d020cd3057ec02a10f11da" + integrity sha512-LixU4BS95ZTEAZdPaIuyg/k8FiiqN9laQ0dMHB4MlpydHY53uQdWCUrwjLr5o6ilS6fAgZey4Q14XBjl5tL6xw== + dependencies: + "@babel/helper-builder-react-jsx" "^7.7.4" + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-jsx" "^7.7.4" + "@babel/plugin-transform-regenerator@^7.0.0", "@babel/plugin-transform-regenerator@^7.4.3", "@babel/plugin-transform-regenerator@^7.4.5": version "7.4.5" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.4.5.tgz#629dc82512c55cee01341fb27bdfcb210354680f" @@ -814,7 +1059,7 @@ resolve "^1.8.1" semver "^5.5.1" -"@babel/plugin-transform-runtime@^7.0.0", "@babel/plugin-transform-runtime@^7.5.5", "@babel/plugin-transform-runtime@^7.6.2": +"@babel/plugin-transform-runtime@^7.0.0", "@babel/plugin-transform-runtime@^7.6.2": version "7.6.2" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.6.2.tgz#2669f67c1fae0ae8d8bf696e4263ad52cb98b6f8" integrity sha512-cqULw/QB4yl73cS5Y0TZlQSjDvNkzDbu0FurTZyHlJpWE5T3PCMdnyV+xXoH1opr1ldyHODe3QAX3OMAii5NxA== @@ -824,6 +1069,16 @@ resolve "^1.8.1" semver "^5.5.1" +"@babel/plugin-transform-runtime@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.7.4.tgz#51fe458c1c1fa98a8b07934f4ed38b6cd62177a6" + integrity sha512-O8kSkS5fP74Ad/8pfsCMGa8sBRdLxYoSReaARRNSz3FbFQj3z/QUvoUmJ28gn9BO93YfnXc3j+Xyaqe8cKDNBQ== + dependencies: + "@babel/helper-module-imports" "^7.7.4" + "@babel/helper-plugin-utils" "^7.0.0" + resolve "^1.8.1" + semver "^5.5.1" + "@babel/plugin-transform-shorthand-properties@^7.0.0", "@babel/plugin-transform-shorthand-properties@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.2.0.tgz#6333aee2f8d6ee7e28615457298934a3b46198f0" @@ -853,6 +1108,14 @@ "@babel/helper-annotate-as-pure" "^7.0.0" "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-transform-template-literals@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.7.4.tgz#1eb6411736dd3fe87dbd20cc6668e5121c17d604" + integrity sha512-sA+KxLwF3QwGj5abMHkHgshp9+rRz+oY9uoRil4CyLtgEuE/88dpkeWgNk5qKVsJE9iSfly3nvHapdRiIS2wnQ== + dependencies: + "@babel/helper-annotate-as-pure" "^7.7.4" + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-transform-typeof-symbol@^7.0.0", "@babel/plugin-transform-typeof-symbol@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.2.0.tgz#117d2bcec2fbf64b4b59d1f9819894682d29f2b2" @@ -867,6 +1130,15 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-typescript" "^7.2.0" +"@babel/plugin-transform-typescript@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.7.4.tgz#2974fd05f4e85c695acaf497f432342de9fc0636" + integrity sha512-X8e3tcPEKnwwPVG+vP/vSqEShkwODOEeyQGod82qrIuidwIrfnsGn11qPM1jBLF4MqguTXXYzm58d0dY+/wdpg== + dependencies: + "@babel/helper-create-class-features-plugin" "^7.7.4" + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-typescript" "^7.7.4" + "@babel/plugin-transform-unicode-regex@^7.0.0", "@babel/plugin-transform-unicode-regex@^7.4.3", "@babel/plugin-transform-unicode-regex@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.4.4.tgz#ab4634bb4f14d36728bf5978322b35587787970f" @@ -884,6 +1156,14 @@ core-js "^2.6.5" regenerator-runtime "^0.13.2" +"@babel/polyfill@^7.7.0": + version "7.7.0" + resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.7.0.tgz#e1066e251e17606ec7908b05617f9b7f8180d8f3" + integrity sha512-/TS23MVvo34dFmf8mwCisCbWGrfhbiWZSwBo6HkADTBhUa2Q/jWltyY/tpofz/b6/RIhqaqQcquptCirqIhOaQ== + dependencies: + core-js "^2.6.5" + regenerator-runtime "^0.13.2" + "@babel/preset-env@7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.1.0.tgz#e67ea5b0441cfeab1d6f41e9b5c79798800e8d11" @@ -1047,6 +1327,14 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-transform-flow-strip-types" "^7.0.0" +"@babel/preset-flow@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.7.4.tgz#99c1349b6fd7132783196de181e6b32d0949427e" + integrity sha512-6LbUqcHD8BcRtXMOp5bc5nJeU8RlKh6q5U8TgZeCrf9ebBdW8Wyy5ujAUnbJfmzQ56Kkq5XtwErC/5+5RHyFYA== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-transform-flow-strip-types" "^7.7.4" + "@babel/preset-react@7.0.0", "@babel/preset-react@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.0.0.tgz#e86b4b3d99433c7b3e9e91747e2653958bc6b3c0" @@ -1057,7 +1345,18 @@ "@babel/plugin-transform-react-jsx-self" "^7.0.0" "@babel/plugin-transform-react-jsx-source" "^7.0.0" -"@babel/preset-typescript@7.3.3", "@babel/preset-typescript@^7.3.3": +"@babel/preset-react@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.7.4.tgz#3fe2ea698d8fb536d8e7881a592c3c1ee8bf5707" + integrity sha512-j+vZtg0/8pQr1H8wKoaJyGL2IEk3rG/GIvua7Sec7meXVIvGycihlGMx5xcU00kqCJbwzHs18xTu3YfREOqQ+g== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-transform-react-display-name" "^7.7.4" + "@babel/plugin-transform-react-jsx" "^7.7.4" + "@babel/plugin-transform-react-jsx-self" "^7.7.4" + "@babel/plugin-transform-react-jsx-source" "^7.7.4" + +"@babel/preset-typescript@7.3.3": version "7.3.3" resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.3.3.tgz#88669911053fa16b2b276ea2ede2ca603b3f307a" integrity sha512-mzMVuIP4lqtn4du2ynEfdO0+RYcslwrZiJHXu4MGaC1ctJiW2fyaeDrtjJGs7R/KebZ1sgowcIoWf4uRpEfKEg== @@ -1065,6 +1364,14 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-transform-typescript" "^7.3.2" +"@babel/preset-typescript@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.7.4.tgz#780059a78e6fa7f7a4c87f027292a86b31ce080a" + integrity sha512-rqrjxfdiHPsnuPur0jKrIIGQCIgoTWMTjlbWE69G4QJ6TIOVnnRnIJhUxNTL/VwDmEAVX08Tq3B1nirer5341w== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-transform-typescript" "^7.7.4" + "@babel/runtime-corejs2@7.1.2": version "7.1.2" resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.1.2.tgz#8695811a3fd8091f54f274b9320334e5e8c62200" @@ -1101,6 +1408,13 @@ dependencies: regenerator-runtime "^0.13.2" +"@babel/runtime@^7.4.0": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.4.tgz#b23a856751e4bf099262f867767889c0e3fe175b" + integrity sha512-r24eVUUr0QqNZa+qrImUk8fn5SPhHq+IfYvIoIMg0do3GdK9sMdiLKP3GYVVaxpPKORgm8KRKaNTEhAjgIpLMw== + dependencies: + regenerator-runtime "^0.13.2" + "@babel/template@7.1.2": version "7.1.2" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.1.2.tgz#090484a574fef5a2d2d7726a674eceda5c5b5644" @@ -1118,6 +1432,15 @@ "@babel/parser" "^7.6.0" "@babel/types" "^7.6.0" +"@babel/template@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b" + integrity sha512-qUzihgVPguAzXCK7WXw8pqs6cEwi54s3E+HrejlkuWO6ivMKx9hZl3Y2fSXp9i5HgyWmj7RKP+ulaYnKM4yYxw== + dependencies: + "@babel/code-frame" "^7.0.0" + "@babel/parser" "^7.7.4" + "@babel/types" "^7.7.4" + "@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.1.6", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4", "@babel/traverse@^7.5.5", "@babel/traverse@^7.6.2", "@babel/traverse@^7.6.3": version "7.6.3" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.6.3.tgz#66d7dba146b086703c0fb10dd588b7364cec47f9" @@ -1133,6 +1456,21 @@ globals "^11.1.0" lodash "^4.17.13" +"@babel/traverse@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558" + integrity sha512-P1L58hQyupn8+ezVA2z5KBm4/Zr4lCC8dwKCMYzsa5jFMDMQAzaBNy9W5VjB+KAmBjb40U7a/H6ao+Xo+9saIw== + dependencies: + "@babel/code-frame" "^7.5.5" + "@babel/generator" "^7.7.4" + "@babel/helper-function-name" "^7.7.4" + "@babel/helper-split-export-declaration" "^7.7.4" + "@babel/parser" "^7.7.4" + "@babel/types" "^7.7.4" + debug "^4.1.0" + globals "^11.1.0" + lodash "^4.17.13" + "@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.1.2", "@babel/types@^7.1.6", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.5.5", "@babel/types@^7.6.0", "@babel/types@^7.6.3": version "7.6.3" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.6.3.tgz#3f07d96f854f98e2fbd45c64b0cb942d11e8ba09" @@ -1142,6 +1480,15 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@babel/types@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193" + integrity sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA== + dependencies: + esutils "^2.0.2" + lodash "^4.17.13" + to-fast-properties "^2.0.0" + "@cerebral/http@^4.0.0": version "4.2.3" resolved "https://registry.yarnpkg.com/@cerebral/http/-/http-4.2.3.tgz#58e0251ab582241f8cca2f3ff4d5133df7f945a7" @@ -1163,6 +1510,11 @@ resolved "https://registry.yarnpkg.com/@codesandbox/template-icons/-/template-icons-1.0.1.tgz#c29068ce93d7d1db8dfbf0c82d618ee7192d9fb8" integrity sha512-o7Zgw88GoV/xogZ56rwXFohIYoYsB2UiKERC49Y1yuwV6SFAshPLdUBx9GX6HAHLUQg5R0pOoRrSeEsan+dHEw== +"@codesandbox/template-icons@^1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@codesandbox/template-icons/-/template-icons-1.0.2.tgz#9471002b5d05b3782f893138e0fc6ee5469dd879" + integrity sha512-pYN5g2U6QygS168qDrgKbCFPa9ITBUACt1zpdmTZHktJi14o+pLqy1CJct41UQP6ovdL1XFL00hpPpp0qfJ0gw== + "@csstools/convert-colors@^1.4.0": version "1.4.0" resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7" @@ -4259,22 +4611,6 @@ resolved "https://registry.yarnpkg.com/@types/storybook__addon-actions/-/storybook__addon-actions-3.4.3.tgz#bb0c3fd066e1f495d3f2b724487e2b99194b3f1a" integrity sha512-RSFFfruUHL7La4CZpuiKZ0mZvr5orjenFA2jc31tfPwvA3fYNH4/9XSfA2MB08IpJbF3aErtYWT5Dtigkxnltg== -"@types/storybook__addon-knobs@^5.0.3": - version "5.0.3" - resolved "https://registry.yarnpkg.com/@types/storybook__addon-knobs/-/storybook__addon-knobs-5.0.3.tgz#a6366877d7b21f9fa2cc9eb23650304388393350" - integrity sha512-NnSOu4ajk4kL1e1eRe9zzyspIghgFu8B9ELyrAl1jF/nJE26YK2oDTi7qr+k/+X33rNaYFo6e7+lsEqeI3MLXg== - dependencies: - "@types/react" "*" - "@types/storybook__react" "*" - -"@types/storybook__react@*", "@types/storybook__react@^4.0.2": - version "4.0.2" - resolved "https://registry.yarnpkg.com/@types/storybook__react/-/storybook__react-4.0.2.tgz#f36fb399574c662e79c1a0cf6e429b6ff730da40" - integrity sha512-U/+J5qccRdKFryvHkk1a0IeZaSIZLCmTwAQhTSDGeC3SPNIYPus+EtunBqP49r870l8czbfxtjeC3IL9P66ngQ== - dependencies: - "@types/react" "*" - "@types/webpack-env" "*" - "@types/stripe-v3@*", "@types/stripe-v3@^3.1.7": version "3.1.7" resolved "https://registry.yarnpkg.com/@types/stripe-v3/-/stripe-v3-3.1.7.tgz#7ae64076e663af2852d23706deb503d3c5ce7e67" @@ -4346,11 +4682,6 @@ "@types/unist" "*" "@types/vfile-message" "*" -"@types/webpack-env@*": - version "1.14.0" - resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.14.0.tgz#8edfc5f8e6eae20eeed3ca0d02974ed4ee5e4efc" - integrity sha512-Fv+0gYJzE/czLoRKq+gnXWr4yBpPM3tO3C8pDLFwqVKlMICQUq5OsxwwFZYDaVr7+L6mgNDp16iOcJHEz3J5RQ== - "@types/webpack-sources@*": version "0.1.5" resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-0.1.5.tgz#be47c10f783d3d6efe1471ff7f042611bd464a92" @@ -5767,6 +6098,11 @@ autoprefixer@^9.4.9, autoprefixer@^9.6.1: postcss "^7.0.17" postcss-value-parser "^4.0.0" +autosize@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/autosize/-/autosize-4.0.2.tgz#073cfd07c8bf45da4b9fd153437f5bafbba1e4c9" + integrity sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA== + aws-sign2@~0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f" @@ -5857,6 +6193,18 @@ babel-eslint@^10.0.2: eslint-scope "3.7.1" eslint-visitor-keys "^1.0.0" +babel-eslint@^10.0.3: + version "10.0.3" + resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a" + integrity sha512-z3U7eMY6r/3f3/JB9mTsLjyxrv0Yb1zb8PCWCLpguxfCzBIZUwy23R1t/XKewP+8mEN2Ck8Dtr4q20z6ce6SoA== + dependencies: + "@babel/code-frame" "^7.0.0" + "@babel/parser" "^7.0.0" + "@babel/traverse" "^7.0.0" + "@babel/types" "^7.0.0" + eslint-visitor-keys "^1.0.0" + resolve "^1.12.0" + babel-eslint@^9.0.0: version "9.0.0" resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-9.0.0.tgz#7d9445f81ed9f60aff38115f838970df9f2b6220" @@ -5947,6 +6295,19 @@ babel-jest@^24.8.0: chalk "^2.4.2" slash "^2.0.0" +babel-jest@^24.9.0: + version "24.9.0" + resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54" + integrity sha512-ntuddfyiN+EhMw58PTNL1ph4C9rECiQXjI4nMMBKBaNjXvqLdkXpPRcMSr4iyBrJg/+wz9brFUD6RhOAT6r4Iw== + dependencies: + "@jest/transform" "^24.9.0" + "@jest/types" "^24.9.0" + "@types/babel__core" "^7.1.0" + babel-plugin-istanbul "^5.1.0" + babel-preset-jest "^24.9.0" + chalk "^2.4.2" + slash "^2.0.0" + babel-literal-to-ast@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/babel-literal-to-ast/-/babel-literal-to-ast-2.1.0.tgz#c8b12f9c36a8cee13572d65aabf6cff8adb1e8b3" @@ -5965,7 +6326,7 @@ babel-loader@8.0.2: mkdirp "^0.5.1" util.promisify "^1.0.0" -babel-loader@^8.0.0, babel-loader@^8.0.6: +babel-loader@8.0.6, babel-loader@^8.0.0, babel-loader@^8.0.6: version "8.0.6" resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb" integrity sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw== @@ -6069,10 +6430,10 @@ babel-plugin-emotion@^9.1.2, babel-plugin-emotion@^9.2.11: source-map "^0.5.7" touch "^2.0.1" -babel-plugin-graphql-tag@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/babel-plugin-graphql-tag/-/babel-plugin-graphql-tag-2.1.0.tgz#3abd08d589375ac8b88f8d5d5ca854bfcb794667" - integrity sha512-kN7MvtBusXUwJlryxF5iiFQYKq4wuZoQBIII6QCQWd3KF4irwDpYZ/eklzx51FUzOFj1jz0PfxSaAk2ORwkDEA== +babel-plugin-graphql-tag@^2.5.0: + version "2.5.0" + resolved "https://registry.yarnpkg.com/babel-plugin-graphql-tag/-/babel-plugin-graphql-tag-2.5.0.tgz#2b2df0dc4b9638022d18868d03abe60117aaf38d" + integrity sha512-X6qczBVs/UtB8evDgOizGuQJNDBkvXZy5kZd4c0SU14L986RR+p4EXtK/T31HkpYoYOjvrcp+QO82qjL3/nHoQ== dependencies: "@babel/parser" "^7.3.2" babel-literal-to-ast "^2.1.0" @@ -6094,6 +6455,13 @@ babel-plugin-jest-hoist@^24.6.0: dependencies: "@types/babel__traverse" "^7.0.6" +babel-plugin-jest-hoist@^24.9.0: + version "24.9.0" + resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.9.0.tgz#4f837091eb407e01447c8843cbec546d0002d756" + integrity sha512-2EMA2P8Vp7lG0RAzr4HXqtYwacfMErOuv1U3wrvxHX6rD1sV6xS3WXG3r8TRQ2r6w8OhvSdWt+z41hQNwNm3Xw== + dependencies: + "@types/babel__traverse" "^7.0.6" + babel-plugin-jsx-pragmatic@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-1.0.2.tgz#41e2beb8642235f34b2a7ab12ca39e07201b8e59" @@ -6484,6 +6852,14 @@ babel-preset-jest@^24.6.0: "@babel/plugin-syntax-object-rest-spread" "^7.0.0" babel-plugin-jest-hoist "^24.6.0" +babel-preset-jest@^24.9.0: + version "24.9.0" + resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz#192b521e2217fb1d1f67cf73f70c336650ad3cdc" + integrity sha512-izTUuhE4TMfTRPF92fFwD2QfdXaZW08qvWTFCI51V8rW5x00UuPgc3ajRoWofXOuxjfcOM5zzSYsQS3H8KGCAg== + dependencies: + "@babel/plugin-syntax-object-rest-spread" "^7.0.0" + babel-plugin-jest-hoist "^24.9.0" + "babel-preset-minify@^0.5.0 || 0.6.0-alpha.5": version "0.5.0" resolved "https://registry.yarnpkg.com/babel-preset-minify/-/babel-preset-minify-0.5.0.tgz#e25bb8d3590087af02b650967159a77c19bfb96b" @@ -7567,7 +7943,7 @@ chokidar@^1.6.0: optionalDependencies: fsevents "^1.0.0" -chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.5, chokidar@^2.1.6: +chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.5, chokidar@^2.1.6, chokidar@^2.1.8: version "2.1.8" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg== @@ -7806,6 +8182,11 @@ clone@^2.1.1: resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f" integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18= +cnbuilder@^1.1.7: + version "1.1.7" + resolved "https://registry.yarnpkg.com/cnbuilder/-/cnbuilder-1.1.7.tgz#04ef08d278efd69bc65a95b087328455a85a2eef" + integrity sha512-8D9dpabOVOh7GX/qPZ60sJpqxHaiLqSDsuZOYH1TvoNkgMrO7BJHCbNepHHoglSdU//M2sjLHaL9Vu0qibSV2A== + co@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" @@ -7963,11 +8344,16 @@ commander@2.15.x, commander@~2.15.0: version "2.15.1" resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f" -commander@^2.11.0, commander@^2.12.1, commander@^2.13.0, commander@^2.19.0, commander@^2.20.0, commander@^2.8.1, commander@^2.9.0, commander@~2.20.0: +commander@^2.11.0, commander@^2.12.1, commander@^2.13.0, commander@^2.19.0, commander@^2.20.0, commander@^2.9.0, commander@~2.20.0: version "2.20.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422" integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ== +commander@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/commander/-/commander-4.0.1.tgz#b67622721785993182e807f4883633e6401ba53c" + integrity sha512-IPF4ouhCP+qdlcmCedhxX4xiGBPyigb8v5NeUp+0LyhwLgxMqyp3S0vl7TAPfS/hiP7FC3caI/PB9lTmP8r1NA== + commander@~2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781" @@ -8096,6 +8482,11 @@ compression@^1.7.3, compression@^1.7.4: safe-buffer "5.1.2" vary "~1.1.2" +computed-style@~0.1.3: + version "0.1.4" + resolved "https://registry.yarnpkg.com/computed-style/-/computed-style-0.1.4.tgz#7f344fd8584b2e425bedca4a1afc0e300bb05d74" + integrity sha1-fzRP2FhLLkJb7cpKGvwOMAuwXXQ= + concat-map@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" @@ -8371,6 +8762,13 @@ convert-source-map@^0.3.3: resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190" integrity sha1-8dgClQr33SYxof6+BZZVDIarMZA= +convert-source-map@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442" + integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA== + dependencies: + safe-buffer "~5.1.1" + cookie-signature@1.0.6: version "1.0.6" resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c" @@ -11597,6 +11995,11 @@ flush-write-stream@^1.0.0: inherits "^2.0.3" readable-stream "^2.3.6" +fn-name@~2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-2.0.1.tgz#5214d7537a4d06a4a301c0cc262feb84188002e7" + integrity sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc= + focus-lock@^0.6.3: version "0.6.5" resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.5.tgz#f6eb37832a9b1b205406175f5277396a28c0fce1" @@ -13579,15 +13982,17 @@ highlight.js@^9.0.0, highlight.js@~9.12.0: version "9.12.0" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e" -history@^4.7.2: - version "4.7.2" - resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b" +history@^4.9.0: + version "4.10.1" + resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3" + integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew== dependencies: - invariant "^2.2.1" + "@babel/runtime" "^7.1.2" loose-envify "^1.2.0" - resolve-pathname "^2.2.0" - value-equal "^0.4.0" - warning "^3.0.0" + resolve-pathname "^3.0.0" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" + value-equal "^1.0.1" hmac-drbg@^1.0.0: version "1.0.1" @@ -13613,7 +14018,7 @@ hoist-non-react-statics@3.2.0: dependencies: react-is "^16.3.2" -hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0: +hoist-non-react-statics@^2.3.1: version "2.5.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40" @@ -14452,7 +14857,7 @@ into-stream@^3.1.0: from2 "^2.1.1" p-is-promise "^1.1.0" -invariant@2.2.4, invariant@^2.1.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4: +invariant@2.2.4, invariant@^2.1.0, invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" dependencies: @@ -16326,6 +16731,13 @@ liftoff@^2.1.0: rechoir "^0.6.2" resolve "^1.1.7" +line-height@^0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/line-height/-/line-height-0.3.1.tgz#4b1205edde182872a5efa3c8f620b3187a9c54c9" + integrity sha1-SxIF7d4YKHKl76PI9iCzGHqcVMk= + dependencies: + computed-style "~0.1.3" + linkifyjs@^2.1.6: version "2.1.6" resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.6.tgz#f1cc88a86ff8863196615857fd47eb193c0a26cb" @@ -17538,6 +17950,15 @@ min-document@^2.19.0: dependencies: dom-walk "^0.1.0" +mini-create-react-context@^0.3.0: + version "0.3.2" + resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189" + integrity sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw== + dependencies: + "@babel/runtime" "^7.4.0" + gud "^1.0.0" + tiny-warning "^1.0.2" + mini-css-extract-plugin@0.4.3: version "0.4.3" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.3.tgz#98d60fcc5d228c3e36a9bd15a1d6816d6580beb8" @@ -18972,14 +19393,6 @@ ot@^0.0.15: version "0.0.15" resolved "https://registry.yarnpkg.com/ot/-/ot-0.0.15.tgz#98bd953e6283670a01868e7ef4d2d983a29cd6a7" -output-file-sync@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/output-file-sync/-/output-file-sync-2.0.1.tgz#f53118282f5f553c2799541792b723a4c71430c0" - dependencies: - graceful-fs "^4.1.11" - is-plain-obj "^1.1.0" - mkdirp "^0.5.1" - overmind-devtools@^19.0.0: version "19.0.1" resolved "https://registry.yarnpkg.com/overmind-devtools/-/overmind-devtools-19.0.1.tgz#a56150371bf52de971582681c94f8233fa1140d7" @@ -20725,6 +21138,11 @@ prettier@1.19.0, prettier@^1.14.2, prettier@^1.14.3, prettier@^1.16.4, prettier@ resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.0.tgz#3bec4489d5eebcd52b95ddd2c22467b5c852fde1" integrity sha512-GlAIjk6DjkNT6u/Bw5QCWrbzh9YlLKwwmJT//1YiCR3WDpZDnyss64aXHQZgF8VKeGlWnX6+tGsKSVxsZT/gtA== +prettier@1.19.1: + version "1.19.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb" + integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew== + pretty-bytes@^1.0.2: version "1.0.4" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-1.0.4.tgz#0a22e8210609ad35542f8c8d5d2159aff0751c84" @@ -20979,6 +21397,11 @@ prop-types@15.7.2, prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, pro object-assign "^4.1.1" react-is "^16.8.1" +property-expr@^1.5.0: + version "1.5.1" + resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-1.5.1.tgz#22e8706894a0c8e28d58735804f6ba3a3673314f" + integrity sha512-CGuc0VUTGthpJXL36ydB6jnbyOf/rAHFvmVrJlH+Rg0DqqLFQGAP6hIaxD/G0OAmBJPhXDHuEJigrp0e0wFV6g== + property-information@^4.0.0: version "4.2.0" resolved "https://registry.yarnpkg.com/property-information/-/property-information-4.2.0.tgz#f0e66e07cbd6fed31d96844d958d153ad3eb486e" @@ -21384,6 +21807,15 @@ react-apollo@^2.5.6: ts-invariant "^0.4.2" tslib "^1.9.3" +react-autosize-textarea@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/react-autosize-textarea/-/react-autosize-textarea-7.0.0.tgz#4f633e4238de7ba73c1da8fdc307353c50f1c5ab" + integrity sha512-rGQLpGUaELvzy3NKzp0kkcppaUtZTptsyR0PGuLotaJDjwRbT0DpD000yCzETpXseJQ/eMsyVGDDHXjXP93u8w== + dependencies: + autosize "^4.0.2" + line-height "^0.3.1" + prop-types "^15.5.6" + react-clientside-effect@^1.2.0: version "1.2.2" resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837" @@ -21559,6 +21991,14 @@ react-draggable@^3.0.5, react-draggable@^3.1.1: classnames "^2.2.5" prop-types "^15.6.0" +react-draggable@^3.3.2: + version "3.3.2" + resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-3.3.2.tgz#966ef1d90f2387af3c2d8bd3516f601ea42ca359" + integrity sha512-oaz8a6enjbPtx5qb0oDWxtDNuybOylvto1QLydsXgKmwT7e3GXC2eMVDwEMIUYJIFqVG72XpOv673UuuAq6LhA== + dependencies: + classnames "^2.2.5" + prop-types "^15.6.0" + react-emotion@^9.1.1: version "9.1.3" resolved "https://registry.yarnpkg.com/react-emotion/-/react-emotion-9.1.3.tgz#299c29731d12d6236e33277845f5692ec8ba92d6" @@ -21828,28 +22268,43 @@ react-resize-detector@^4.0.5: raf-schd "^4.0.0" resize-observer-polyfill "^1.5.1" -react-router-dom@^4.2.2, react-router-dom@^4.3.1: - version "4.3.1" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6" +react-router-dom@^5.0.1, react-router-dom@^5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18" + integrity sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew== dependencies: - history "^4.7.2" - invariant "^2.2.4" + "@babel/runtime" "^7.1.2" + history "^4.9.0" loose-envify "^1.3.1" - prop-types "^15.6.1" - react-router "^4.3.1" - warning "^4.0.1" + prop-types "^15.6.2" + react-router "5.1.2" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" -react-router@^4.3.1: - version "4.3.1" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e" +react-router@5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418" + integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A== dependencies: - history "^4.7.2" - hoist-non-react-statics "^2.5.0" - invariant "^2.2.4" + "@babel/runtime" "^7.1.2" + history "^4.9.0" + hoist-non-react-statics "^3.1.0" loose-envify "^1.3.1" + mini-create-react-context "^0.3.0" path-to-regexp "^1.7.0" - prop-types "^15.6.1" - warning "^4.0.1" + prop-types "^15.6.2" + react-is "^16.6.0" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" + +react-scrollbars-custom@^4.0.21: + version "4.0.21" + resolved "https://registry.yarnpkg.com/react-scrollbars-custom/-/react-scrollbars-custom-4.0.21.tgz#daab3104b9707033a5be29fdc5b7408dee41a5ad" + integrity sha512-EwIVXBYsZG91Wm90a8ajSjpclXMu3XehcSGz+QbnLDQbmc+Rj/Uj+gP9bgbhyvQTKlhfjoka77VEWu9/DxOwBg== + dependencies: + cnbuilder "^1.1.7" + react-draggable "^3.3.2" + zoom-level "^1.2.4" react-select@^2.2.0: version "2.4.4" @@ -22866,9 +23321,10 @@ resolve-from@^5.0.0: resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69" integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw== -resolve-pathname@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879" +resolve-pathname@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd" + integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng== resolve-url-loader@^3.1.0: version "3.1.0" @@ -22910,6 +23366,13 @@ resolve@1.x, resolve@^1.1.5, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, re dependencies: path-parse "^1.0.6" +resolve@^1.12.0: + version "1.13.1" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.13.1.tgz#be0aa4c06acd53083505abb35f4d66932ab35d16" + integrity sha512-CxqObCX8K8YtAhOBRg+lrcdn+LK+WYOS8tSjqSFbjtrI5PnS63QPhZl4+yKfrU9tdsbMu9Anr/amegT87M9Z6w== + dependencies: + path-parse "^1.0.6" + responselike@1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7" @@ -24997,6 +25460,11 @@ symbol.prototype.description@^1.0.0: dependencies: has-symbols "^1.0.0" +synchronous-promise@^2.0.6: + version "2.0.10" + resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.10.tgz#e64c6fd3afd25f423963353043f4a68ebd397fd8" + integrity sha512-6PC+JRGmNjiG3kJ56ZMNWDPL8hjyghF5cMXIFOKg+NiwwEZZIvxTWd0pinWKyD227odg9ygF8xVhhz7gb8Uq7A== + table@^5.2.3: version "5.4.6" resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e" @@ -25325,6 +25793,16 @@ tiny-inflate@^1.0.0: resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.2.tgz#93d9decffc8805bd57eae4310f0b745e9b6fb3a7" integrity sha1-k9nez/yIBb1X6uQxDwt0Xptvs6c= +tiny-invariant@^1.0.2: + version "1.0.6" + resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73" + integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA== + +tiny-warning@^1.0.0, tiny-warning@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== + tinycolor2@^1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8" @@ -25438,6 +25916,11 @@ topo@2.x.x: dependencies: hoek "4.x.x" +toposort@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330" + integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA= + touch@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/touch/-/touch-2.0.2.tgz#ca0b2a3ae3211246a61b16ba9e6cbf1596287164" @@ -26463,9 +26946,10 @@ validate-npm-package-name@^3.0.0: dependencies: builtins "^1.0.3" -value-equal@^0.4.0: - version "0.4.0" - resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7" +value-equal@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c" + integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw== vary@^1, vary@~1.1.2: version "1.1.2" @@ -26645,7 +27129,7 @@ warning@^3.0.0: dependencies: loose-envify "^1.0.0" -warning@^4.0.1, warning@^4.0.2, warning@^4.0.3: +warning@^4.0.2, warning@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== @@ -27610,6 +28094,18 @@ yoga-layout-prebuilt@^1.9.3: resolved "https://registry.yarnpkg.com/yoga-layout-prebuilt/-/yoga-layout-prebuilt-1.9.3.tgz#11e3be29096afe3c284e5d963cc2d628148c1372" integrity sha512-9SNQpwuEh2NucU83i2KMZnONVudZ86YNcFk9tq74YaqrQfgJWO3yB9uzH1tAg8iqh5c9F5j0wuyJ2z72wcum2w== +yup@^0.27.0: + version "0.27.0" + resolved "https://registry.yarnpkg.com/yup/-/yup-0.27.0.tgz#f8cb198c8e7dd2124beddc2457571329096b06e7" + integrity sha512-v1yFnE4+u9za42gG/b/081E7uNW9mUj3qtkmelLbW5YPROZzSH/KUUyJu9Wt8vxFJcT9otL/eZopS0YK1L5yPQ== + dependencies: + "@babel/runtime" "^7.0.0" + fn-name "~2.0.1" + lodash "^4.17.11" + property-expr "^1.5.0" + synchronous-promise "^2.0.6" + toposort "^2.0.2" + yurnalist@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/yurnalist/-/yurnalist-1.0.5.tgz#98534ddc1330e1316684981f53cba879ffc07a28" @@ -27647,6 +28143,11 @@ zen-observable@^0.8.0: version "0.8.8" resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.8.tgz#1ea93995bf098754a58215a1e0a7309e5749ec42" +zoom-level@^1.2.4: + version "1.2.4" + resolved "https://registry.yarnpkg.com/zoom-level/-/zoom-level-1.2.4.tgz#52bc5ae3af945cac82f9f685e8707fa2c9b962e2" + integrity sha512-nGFUhyU3Y4jWh6l+hYCVVUxu3vrD0i/RkumJRzYGU0COMWMs2Szs84mltacd64R9zJcxwKckWQN/KKbfB1btVA== + zwitch@^1.0.0: version "1.0.4" resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.4.tgz#93b1b993b13c8926753a41afaf8f27bbfac6be8b" From d840cd0252eda8f08aa2ca8d12c55cb1229bab88 Mon Sep 17 00:00:00 2001 From: Drake Costa Date: Fri, 6 Dec 2019 04:08:17 -0800 Subject: [PATCH 002/101] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Fix=20Compilation?= =?UTF-8?q?=20Bugs,=20Add=20Layout=20+=20Footer=20to=20Common?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/src/app/pages/Profile/Profile.tsx | 123 +- .../Profile/ShowcaseCard/ShowcaseCard.tsx | 6 +- .../src/app/pages/Profile/UserInfo/Icons.tsx | 38 +- .../app/pages/Profile/UserInfo/UserInfo.tsx | 3 +- .../app/src/app/pages/Profile/elements.ts | 55 +- packages/app/src/embed/theme/index.js | 2 +- .../common/src/components/Button/elements.tsx | 165 -- .../common/src/components/Button/index.tsx | 37 - .../common/src/components/Footer/Footer.tsx | 8 +- .../common/src/components/Layout/Layout.tsx | 18 + .../{Layout.ts => Layout/elements.ts} | 0 .../common/src/components/Layout/index.ts | 1 + .../src/components/MultiAction/elements.ts | 11 +- .../components/SearchInput/SearchInput.tsx | 2 +- .../{Typography.tsx => Typography.ts} | 0 packages/common/src/components/index.ts | 2 +- packages/common/src/theme/theme.ts | 13 + yarn.lock | 1506 +++-------------- 18 files changed, 389 insertions(+), 1601 deletions(-) delete mode 100644 packages/common/src/components/Button/elements.tsx delete mode 100644 packages/common/src/components/Button/index.tsx create mode 100644 packages/common/src/components/Layout/Layout.tsx rename packages/common/src/components/{Layout.ts => Layout/elements.ts} (100%) create mode 100644 packages/common/src/components/Layout/index.ts rename packages/common/src/components/{Typography.tsx => Typography.ts} (100%) diff --git a/packages/app/src/app/pages/Profile/Profile.tsx b/packages/app/src/app/pages/Profile/Profile.tsx index a8bc074ce4f..ee64d7b0b31 100644 --- a/packages/app/src/app/pages/Profile/Profile.tsx +++ b/packages/app/src/app/pages/Profile/Profile.tsx @@ -1,9 +1,7 @@ import React, { useState } from 'react'; import { RouteComponentProps } from '@reach/router'; import { - Main, - PageContent, - Navigation, + Layout, Pagination, SearchInput, } from '@codesandbox/common/lib/components'; @@ -41,71 +39,68 @@ export const Profile: React.FC = () => { // - Add drag and drop support for grids return ( -
    - - - - setIsEditing(!isEditing)} - onEdit={({ bio, socialLinks }) => { - setData({ - ...data, - user: { - ...data.user, - bio, - socialLinks, - }, - }); - }} - {...data.user} - /> - {data.user.featured && } - - - - {data.user.totalSandboxes} - Sandboxes - - - {isEditing && !data.user.pinned.length ? ( - - Drag your Sandbox here to pin them to your profile - - ) : isEditing && data.user.pinned.length ? ( + + + setIsEditing(!isEditing)} + onEdit={({ bio, socialLinks }) => { + setData({ + ...data, + user: { + ...data.user, + bio, + socialLinks, + }, + }); + }} + {...data.user} + /> + {data.user.featured && } + + + + {data.user.totalSandboxes} + Sandboxes + + + {isEditing && !data.user.pinned.length ? ( + + Drag your Sandbox here to pin them to your profile + + ) : isEditing && data.user.pinned.length ? ( + + {data.user.pinned.map(sandbox => ( + + ))} + Drag Sandbox to pin + + ) : ( + data.user.pinned && ( {data.user.pinned.map(sandbox => ( ))} - Drag Sandbox to pin - ) : ( - data.user.pinned && ( - - {data.user.pinned.map(sandbox => ( - - ))} - - ) - )} - {data.user.sandboxes && ( - <> - - All Sandboxes - - - {data.user.sandboxes.map(sandbox => ( - - ))} - - - - - - )} - - -
    + ) + )} + {data.user.sandboxes && ( + <> + + All Sandboxes + + + {data.user.sandboxes.map(sandbox => ( + + ))} + + + + + + )} + + ); }; diff --git a/packages/app/src/app/pages/Profile/ShowcaseCard/ShowcaseCard.tsx b/packages/app/src/app/pages/Profile/ShowcaseCard/ShowcaseCard.tsx index 2844c65fc0f..8423f2ae58d 100644 --- a/packages/app/src/app/pages/Profile/ShowcaseCard/ShowcaseCard.tsx +++ b/packages/app/src/app/pages/Profile/ShowcaseCard/ShowcaseCard.tsx @@ -1,7 +1,9 @@ import React from 'react'; import { LightIcons } from '@codesandbox/template-icons'; -import { GoHeart, GoEye, GoRepoForked } from 'react-icons/go'; -import { MdMoreHoriz } from 'react-icons/md'; +import GoHeart from 'react-icons/go/heart'; +import GoEye from 'react-icons/go/eye'; +import GoRepoForked from 'react-icons/go/repo-forked'; +import MdMoreHoriz from 'react-icons/md/more-horiz'; import { Link, MenuItem, Separator } from '@codesandbox/common/lib/components'; import { abbreviateNumber } from './abbreviateNumber'; import { diff --git a/packages/app/src/app/pages/Profile/UserInfo/Icons.tsx b/packages/app/src/app/pages/Profile/UserInfo/Icons.tsx index 37ae6d8eb83..7384bd3f3a3 100644 --- a/packages/app/src/app/pages/Profile/UserInfo/Icons.tsx +++ b/packages/app/src/app/pages/Profile/UserInfo/Icons.tsx @@ -1,22 +1,20 @@ import React from 'react'; -import { - FaAngellist, - FaFacebookSquare, - FaTwitter, - FaInstagram, - FaLinkedin, - FaYoutube, - FaTwitch, - FaPatreon, - FaDribbble, - FaBehanceSquare, - FaMedium, - FaStackOverflow, - FaGithub, - FaGitlab, - FaNpm, -} from 'react-icons/fa'; -import { GoGlobe } from 'react-icons/go'; +import FaAngellist from 'react-icons/fa/angellist'; +import FaFacebookSquare from 'react-icons/fa/facebook-square'; +import FaTwitter from 'react-icons/fa/twitter'; +import FaInstagram from 'react-icons/fa/instagram'; +import FaLinkedin from 'react-icons/fa/linkedin'; +import FaYoutube from 'react-icons/fa/youtube'; +import FaTwitch from 'react-icons/fa/twitch'; +// import FaPatreon from 'react-icons/fa/patreon'; +import FaDribbble from 'react-icons/fa/dribbble'; +import FaBehanceSquare from 'react-icons/fa/behance-square'; +import FaMedium from 'react-icons/fa/medium'; +import FaStackOverflow from 'react-icons/fa/stack-overflow'; +import FaGithub from 'react-icons/fa/github'; +import FaGitlab from 'react-icons/fa/gitlab'; +// import FaNpm from 'react-icons/fa/npm'; +import GoGlobe from 'react-icons/go/globe'; export const Icons = { angellist: , @@ -26,13 +24,13 @@ export const Icons = { linkedin: , youtube: , twitch: , - patreon: , + // patreon: , dribbble: , behance: , medium: , stackoverflow: , github: , gitlab: , - npm: , + // npm: , web: , }; diff --git a/packages/app/src/app/pages/Profile/UserInfo/UserInfo.tsx b/packages/app/src/app/pages/Profile/UserInfo/UserInfo.tsx index 9fdee7af68a..a01bad6f283 100644 --- a/packages/app/src/app/pages/Profile/UserInfo/UserInfo.tsx +++ b/packages/app/src/app/pages/Profile/UserInfo/UserInfo.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { MdAdd, MdClose } from 'react-icons/md'; +import MdAdd from 'react-icons/md/add'; +import MdClose from 'react-icons/md/close'; import { unstable_Form as Form, unstable_useFormState as useFormState, diff --git a/packages/app/src/app/pages/Profile/elements.ts b/packages/app/src/app/pages/Profile/elements.ts index b7e0f29815a..4ed40491ddc 100644 --- a/packages/app/src/app/pages/Profile/elements.ts +++ b/packages/app/src/app/pages/Profile/elements.ts @@ -1,53 +1,52 @@ -import styled, { css } from "styled-components" -import { DropPlaceholder } from "./DropPlaceholder" +import styled, { css } from 'styled-components'; +import { DropPlaceholder } from './DropPlaceholder'; export const Content = styled.div` ${({ theme }) => css` display: grid; grid-template-areas: - "userinfo" - "featured" - "search" - "pinned" - "title" - "showcase" - "pagination"; + 'userinfo' + 'featured' + 'search' + 'pinned' + 'title' + 'showcase' + 'pagination'; grid-template-columns: 1fr; ${theme.media.greaterThan(theme.sizes.medium)} { grid-template-areas: - "userinfo featured" - "userinfo search" - "userinfo pinned" - "userinfo title" - "userinfo showcase" - "userinfo pagination"; + 'userinfo featured' + 'userinfo search' + 'userinfo pinned' + 'userinfo title' + 'userinfo showcase' + 'userinfo pagination'; grid-template-columns: 272px 1fr; } grid-gap: 1.75rem; width: 100%; max-width: 1280px; - margin-bottom: 1.5rem; `} -` +`; const row = css` display: flex; width: 100%; -` +`; export const SearchRow = styled.div` ${row} grid-area: search; -` +`; export const FeaturedPlaceholder = styled(DropPlaceholder)` grid-area: featured; -` +`; export const PinnedPlaceholder = styled(DropPlaceholder)` grid-area: pinned; -` +`; export const SandboxCount = styled.div` flex: 0 0 auto; @@ -65,7 +64,7 @@ export const SandboxCount = styled.div` color: #fff; font-style: normal; } -` +`; const results = css` display: grid; @@ -73,17 +72,17 @@ const results = css` grid-gap: 1.75rem; justify-content: space-between; width: 100%; -` +`; export const PinnedGrid = styled.div` ${results} grid-area: pinned; -` +`; export const TitleRow = styled.div` ${row} grid-area: title; -` +`; export const SectionTitle = styled.h2` margin: 0; @@ -91,12 +90,12 @@ export const SectionTitle = styled.h2` font-family: Inter; font-size: 29px; font-weight: 700; -` +`; export const ShowcaseGrid = styled.div` ${results} grid-area: showcase; -` +`; export const PageNav = styled.div` grid-area: pagination; @@ -105,4 +104,4 @@ export const PageNav = styled.div` width: 100%; margin-top: 1.75rem; margin-bottom: 1.75rem; -` +`; diff --git a/packages/app/src/embed/theme/index.js b/packages/app/src/embed/theme/index.js index bca1516ea1b..eeace529624 100644 --- a/packages/app/src/embed/theme/index.js +++ b/packages/app/src/embed/theme/index.js @@ -1,6 +1,6 @@ import dot from 'dot-object'; import applicationTheme from '@codesandbox/common/lib/theme'; -import codesandboxBlack from '@codesandbox/common/lib/themes/codesandbox-black.json'; +import codesandboxBlack from '@codesandbox/common/lib/themes/codesandbox-black'; import codesandboxLight from '@codesandbox/common/lib/themes/codesandbox-light.json'; import tokens from './tokens'; diff --git a/packages/common/src/components/Button/elements.tsx b/packages/common/src/components/Button/elements.tsx deleted file mode 100644 index 758453b481a..00000000000 --- a/packages/common/src/components/Button/elements.tsx +++ /dev/null @@ -1,165 +0,0 @@ -import React from 'react'; -import styled, { css } from 'styled-components'; -import { Link } from 'react-router-dom'; -import { Button as ReakitButton } from 'reakit/Button'; -import theme from '../../theme'; -import { IButtonProps } from '.'; -import { withoutProps } from '../../utils'; - -export type OptionProps = { - theme: any; - disabled?: boolean; - red?: boolean; - secondary?: boolean; - danger?: boolean; -}; - -const getBackgroundColor = ({ - theme: internalTheme, - disabled, - red, - secondary, - danger, -}: OptionProps) => { - if (disabled) - return `background-color: ${ - internalTheme.light - ? 'rgba(0, 0, 0, 0.4)' - : theme.background2.darken(0.3)() - }`; - if (danger) return `background-color: ${theme.dangerBackground()}`; - if (secondary) return `background-color: transparent`; - if (red) return `background-color: ${theme.red.darken(0.2)()}`; - if (internalTheme && internalTheme['button.background']) { - return `background-color: ${internalTheme['button.background']}`; - } - - return `background-color: #40A9F3;`; -}; - -const getBackgroundHoverColor = ({ - theme: internalTheme, - disabled, - red, - secondary, - danger, -}: OptionProps) => { - if (disabled) - return `background-color: ${ - internalTheme.light - ? 'rgba(0, 0, 0, 0.4)' - : theme.background2.darken(0.3)() - }`; - if (danger) return `background-color: #E25D6A`; - if (red) return `background-color: #F27777`; - if (internalTheme && internalTheme['button.hoverBackground']) { - return `background-color: ${internalTheme['button.hoverBackground']}`; - } - if (secondary) return `background-color: #66b9f4`; - - return `background-color: #66b9f4;`; -}; - -const getColor = ({ - disabled, - secondary, - theme: internalTheme, -}: OptionProps) => { - if (disabled) return theme.background2.lighten(1.5)(); - if (secondary) - return internalTheme.light - ? 'rgba(0, 0, 0, 0.75)' - : 'rgba(255, 255, 255, 0.75)'; - - return 'white'; -}; - -const getHoverColor = ({ secondary, disabled }: OptionProps) => { - if (disabled) return ''; - if (secondary) return 'color: white'; - - return ''; -}; - -const getBorder = ({ - theme: internalTheme, - secondary, - danger, - red, - disabled, -}: OptionProps) => { - if (disabled) - return internalTheme.light - ? '2px solid rgba(0, 0, 0, 0.3)' - : '2px solid #161A1C'; - if (red) return '2px solid #F27777'; - if (danger) return '2px solid #E25D6A'; - if (internalTheme && internalTheme['button.hoverBackground']) { - return `2px solid ${internalTheme['button.hoverBackground']}`; - } - if (secondary) return `2px solid #66B9F4`; - - return '2px solid #66B9F4'; -}; - -export const styles = css` - transition: 0.3s ease all; - font-family: Poppins, Roboto, sans-serif; - - border: none; - outline: none; - ${props => getBackgroundColor(props)}; - background-size: 720%; - - border: ${props => getBorder(props)}; - border-radius: 4px; - - box-sizing: border-box; - font-size: 1.125em; - text-align: center; - color: ${props => getColor(props)}; - font-weight: 600; - width: ${props => (props.block ? '100%' : 'inherit')}; - - user-select: none; - text-decoration: none; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - ${props => - props.small - ? css` - padding: 0.5em 0.7em; - font-size: 0.875em; - ` - : css` - padding: 0.65em 2.25em; - `}; - - ${props => - !props.disabled && - css` - cursor: pointer; - `}; - - &:hover, - &:focus { - ${props => getBackgroundHoverColor(props)}; - ${props => getHoverColor(props)}; - - outline: 0 !important; - } -`; - -// @ts-ignore -export const LinkButton = styled(withoutProps(`small`)(Link))` - ${styles}; -`; -// eslint-disable-next-line -export const AButton = styled(withoutProps(`small`)(props => ))` - ${styles}; -`; -export const Button = styled(withoutProps(`small`)(ReakitButton))` - ${styles} -`; diff --git a/packages/common/src/components/Button/index.tsx b/packages/common/src/components/Button/index.tsx deleted file mode 100644 index cc1755a51c6..00000000000 --- a/packages/common/src/components/Button/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { LinkButton, AButton, Button, styles } from './elements'; - -export interface IButtonProps { - to?: string; - href?: string; - big?: boolean; - small?: boolean; - style?: React.CSSProperties; - block?: boolean; - onClick?: (event: React.MouseEvent) => void; - children?: React.ReactNode; - disabled?: boolean; - type?: 'button' | 'reset' | 'submit'; - danger?: boolean; - secondary?: boolean; - red?: boolean; - target?: string; - rel?: string; -} - -function ButtonComponent({ style = {}, ...props }: IButtonProps) { - // Link - if (typeof props.to === 'string') { - return ; - } - - if (props.href) { - // @ts-ignore - return ; - } - - // @ts-ignore - return