diff --git a/.all-contributorsrc b/.all-contributorsrc index a5552987393..20e00e95303 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1198,6 +1198,15 @@ "contributions": [ "code" ] + }, + { + "login": "twhite96", + "name": "Tiffany White", + "avatar_url": "https://avatars0.githubusercontent.com/u/7698292?v=4", + "profile": "https://tiffanywhite.dev", + "contributions": [ + "code" + ] } ], "repoType": "github", diff --git a/.eslintrc b/.eslintrc index d27202d75a7..58efef9ccb5 100644 --- a/.eslintrc +++ b/.eslintrc @@ -16,6 +16,7 @@ "__DEV__": true }, "rules": { + "linebreak-style": 0, "react/jsx-filename-extension": 0, "react/sort-comp": 0, "import/no-extraneous-dependencies": 0, diff --git a/README.md b/README.md index d140b7e0146..7fb78758b86 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [CodeSandbox](https://codesandbox.io) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox) [![All Contributors](https://img.shields.io/badge/all_contributors-127-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/codesandbox/codesandbox-client.svg?style=svg)](https://circleci.com/gh/codesandbox/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/) +# [CodeSandbox](https://codesandbox.io) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox) [![All Contributors](https://img.shields.io/badge/all_contributors-128-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/codesandbox/codesandbox-client.svg?style=svg)](https://circleci.com/gh/codesandbox/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/) [![Backers on Open Collective](https://opencollective.com/codesandbox/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/codesandbox/sponsors/badge.svg)](#sponsors) @@ -60,7 +60,7 @@ Thanks goes to these wonderful people | [
The Gitter Badger](https://gitter.im)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=gitter-badger "Code") | [
Tim Whitbeck](https://github.com/twhitbeck)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=twhitbeck "Code") | [
Wei Zhu](http://twitter.com/yesmeck)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=yesmeck "Code") | [
Wil Wilsman](http://wilwilsman.com)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=wwilsman "Code") | [
abnessor aka findoff](https://codepen.io/findoff/)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=findoff "Code") | [
cottom](http://jerry-i.github.io)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=jerry-i "Code") | [
gitname](https://github.com/gitname)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=gitname "Code") | | [
Bruce Xu](http://www.xulingming.cn)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=jackdon "Code") | [
jess](http://jessachandler.com)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=monkeywithacupcake "Code") | [
Juliette PrΓ©tot](https://juliette.sh)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=juliettepretot "Code") | [
Victoria Bergquist](https://twitter.com/vicbergquist)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=vicbergquist "Code") [πŸ“–](https://github.com/codesandbox/codesandbox-client/commits?author=vicbergquist "Documentation") | [
Samrith Shankar](https://github.com/samrith-s)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=samrith-s "Code") | [
Mahendra Hirapra](https://github.com/tinahir)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=tinahir "Code") | [
Rabin Gaire](http://rabingaire.com.np)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=rabingaire "Code") | | [
Neville Mehta](https://twitter.com/ask_neville)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=nm123github "Code") | [
Vasiliy](https://github.com/Yeti-or)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=Yeti-or "Code") | [
Romain Lanz](https://slynova.io)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=RomainLanz "Code") | [
LiBe](http://libe.toile-libre.org)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=libetl "Code") | [
Jeremy Bolding](http://thecodechef.github.io)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=thecodechef "Code") | [
Evan Bacon](https://twitter.com/baconbrix)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=EvanBacon "Code") | [
MichaΓ«l De Boey](https://michaeldeboey.be)
[πŸ›](https://github.com/codesandbox/codesandbox-client/issues?q=author%3AMichaelDeBoey "Bug reports") [πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=MichaelDeBoey "Code") [πŸ“–](https://github.com/codesandbox/codesandbox-client/commits?author=MichaelDeBoey "Documentation") [πŸš‡](#infra-MichaelDeBoey "Infrastructure (Hosting, Build-Tools, etc)") [πŸ”§](#tool-MichaelDeBoey "Tools") | -| [
gabeeden](https://github.com/gabeeden)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=gabeeden "Code") | +| [
gabeeden](https://github.com/gabeeden)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=gabeeden "Code") | [
Tiffany White](https://tiffanywhite.dev)
[πŸ’»](https://github.com/codesandbox/codesandbox-client/commits?author=twhite96 "Code") | diff --git a/packages/app/package.json b/packages/app/package.json index f76d81f0ad2..00c70c25f06 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -200,6 +200,7 @@ "memoize-one": "^4.0.0", "mobx": "^4.0.0", "mobx-react": "^5.2.3", + "mobx-react-lite": "^1.3.2", "mobx-state-tree": "^3.3.0", "moment": "^2.18.1", "monaco-editor-textmate": "^2.0.0", diff --git a/packages/app/public/apple-touch-icon-152x152.png b/packages/app/public/apple-touch-icon-152x152.png new file mode 100644 index 00000000000..14f5ec6a7b0 Binary files /dev/null and b/packages/app/public/apple-touch-icon-152x152.png differ diff --git a/packages/app/public/apple-touch-icon-180x180.png b/packages/app/public/apple-touch-icon-180x180.png new file mode 100644 index 00000000000..84b5142613c Binary files /dev/null and b/packages/app/public/apple-touch-icon-180x180.png differ diff --git a/packages/app/public/apple-touch-icon.png b/packages/app/public/apple-touch-icon.png new file mode 100644 index 00000000000..84b5142613c Binary files /dev/null and b/packages/app/public/apple-touch-icon.png differ diff --git a/packages/app/public/manifest.json b/packages/app/public/manifest.json index e6c1f166f0a..9ddd3303471 100644 --- a/packages/app/public/manifest.json +++ b/packages/app/public/manifest.json @@ -31,6 +31,21 @@ "src": "codesandbox-1024.png", "type": "image/png", "sizes": "1024x1024" + }, + { + "src": "apple-touch-icon", + "type": "image/png", + "sizes": "57x57" + }, + { + "src": "apple-touch-icon-152x152", + "type": "image/png", + "sizes": "152x152" + }, + { + "src": "apple-touch-icon-180x180.png", + "type": "image/png", + "sizes": "180x180" } ], "description": "An online editor tailored for web applications", diff --git a/packages/app/src/app/hooks/index.ts b/packages/app/src/app/hooks/index.ts new file mode 100644 index 00000000000..2e88ceda96b --- /dev/null +++ b/packages/app/src/app/hooks/index.ts @@ -0,0 +1,2 @@ +export { useInterval } from './useInterval'; +export { useScript } from './useScript'; diff --git a/packages/app/src/app/hooks/useInterval.ts b/packages/app/src/app/hooks/useInterval.ts new file mode 100644 index 00000000000..0c96767ac2e --- /dev/null +++ b/packages/app/src/app/hooks/useInterval.ts @@ -0,0 +1,21 @@ +// Based on https://overreacted.io/making-setinterval-declarative-with-react-hooks/ +import { useEffect, useRef } from 'react'; + +export const useInterval = (callback = () => {}, delay: number) => { + const savedCallback: { current: any } = useRef(); + + useEffect(() => { + savedCallback.current = callback; + }, [callback]); + + useEffect(() => { + function tick() { + savedCallback.current(); + } + if (delay !== null) { + const id = setInterval(tick, delay); + return () => clearInterval(id); + } + return undefined; + }, [delay]); +}; diff --git a/packages/app/src/app/hooks/useScript.ts b/packages/app/src/app/hooks/useScript.ts new file mode 100644 index 00000000000..06ddd94e59c --- /dev/null +++ b/packages/app/src/app/hooks/useScript.ts @@ -0,0 +1,60 @@ +// Based on https://usehooks.com/useScript/ +import { useState, useEffect } from 'react'; + +const cachedScripts = []; + +export const useScript = (src: string) => { + const [state, setState] = useState({ + loaded: false, + error: false, + }); + + useEffect(() => { + if (cachedScripts.includes(src)) { + setState({ + loaded: true, + error: false, + }); + } else { + cachedScripts.push(src); + + const script = document.createElement('script'); + script.src = src; + script.async = true; + + const onScriptLoad = () => { + setState({ + loaded: true, + error: false, + }); + }; + + const onScriptError = () => { + const index = cachedScripts.indexOf(src); + + if (index >= 0) cachedScripts.splice(index, 1); + + script.remove(); + + setState({ + loaded: true, + error: true, + }); + }; + + script.addEventListener('load', onScriptLoad); + script.addEventListener('error', onScriptError); + + document.body.appendChild(script); + + return () => { + script.removeEventListener('load', onScriptLoad); + script.removeEventListener('error', onScriptError); + }; + } + + return undefined; + }, [src]); + + return [state.loaded, state.error]; +}; diff --git a/packages/app/src/app/index.js b/packages/app/src/app/index.js index 8663b25b58c..0d0fbadf7ee 100644 --- a/packages/app/src/app/index.js +++ b/packages/app/src/app/index.js @@ -10,7 +10,7 @@ import { logError, } from '@codesandbox/common/lib/utils/analytics'; import '@codesandbox/common/lib/global.css'; - +import { Signals, Store } from 'app/store'; import history from 'app/utils/history'; import { client } from 'app/graphql/client'; import registerServiceWorker from '@codesandbox/common/lib/registerServiceWorker'; @@ -119,16 +119,21 @@ function boot() { }); try { + const { signals, store } = controller.provide(); render( - - - - - - - - - , + + + + + + + + + + + + + , rootEl ); } catch (e) { diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/index.js b/packages/app/src/app/pages/Dashboard/Sidebar/index.js index fce06bc819e..db0110761ae 100644 --- a/packages/app/src/app/pages/Dashboard/Sidebar/index.js +++ b/packages/app/src/app/pages/Dashboard/Sidebar/index.js @@ -18,7 +18,7 @@ import { TEAMS_QUERY } from '../queries'; class Sidebar extends React.Component { handleSearchFocus = () => { - history.push('/dashboard/search'); + history.push('/dashboard/search', { from: 'sandboxSearchFocused' }); }; handleSearchChange = e => { diff --git a/packages/app/src/app/pages/Dashboard/index.js b/packages/app/src/app/pages/Dashboard/index.js index 59db9432f75..6c1ad8061af 100644 --- a/packages/app/src/app/pages/Dashboard/index.js +++ b/packages/app/src/app/pages/Dashboard/index.js @@ -52,7 +52,11 @@ class Dashboard extends React.Component { } = this.props; const { showSidebar } = this.state; - history.listen(() => { + history.listen(({ state }) => { + if (Boolean(state) && state.from === 'sandboxSearchFocused') { + return; + } + this.onRouteChange(); }); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/Advertisement.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/Advertisement.tsx new file mode 100644 index 00000000000..3e1341d699f --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/Advertisement.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { useScript } from 'app/hooks'; +import { Container } from './elements'; + +export const Advertisement = () => { + useScript(`https://codefund.app/properties/24/funder.js`); + + return ( + +
+ + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/CodeFund.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/CodeFund.js deleted file mode 100644 index 277f17e5e78..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/CodeFund.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - -const Container = styled.div` - .cf-text { - color: ${props => - props.theme.light - ? `rgba(0, 0, 0, 0.8)` - : `rgba(255, 255, 255, 0.8)`} !important; - } -`; - -const CODEFUND_LINK = 'https://codefund.app/properties/24/funder.js'; -let loaded = false; - -export default class CodeFund extends React.PureComponent { - componentDidMount() { - if (!loaded) { - loaded = true; - - const script = document.createElement('script'); - script.setAttribute('src', CODEFUND_LINK); - script.async = 'true'; - script.setAttribute('id', 'external-js'); - document.head.appendChild(script); - } - } - - render() { - return ( - -
- - ); - } -} diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/elements.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/elements.js deleted file mode 100644 index e277af51698..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/elements.js +++ /dev/null @@ -1,29 +0,0 @@ -import styled from 'styled-components'; - -export const Container = styled.div` - padding: 1rem; - border-top: 1px solid rgba(0, 0, 0, 0.3); - - .carbon-text { - text-decoration: none !important; - color: rgba(255, 255, 255, 0.9) !important; - } - - .carbon-wrap { - font-size: 0.875rem; - - img { - display: block; - margin-bottom: 0.5rem; - } - } - - .carbon-poweredby { - display: block; - margin-top: 0.5rem; - - font-size: 0.75rem; - text-decoration: none !important; - color: rgba(255, 255, 255, 0.6) !important; - } -`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/elements.ts new file mode 100644 index 00000000000..a094e7742b9 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/elements.ts @@ -0,0 +1,9 @@ +import styled, { css } from 'styled-components'; + +export const Container = styled.div` + ${({ theme }) => css` + color: ${theme.light + ? css`rgba(0, 0, 0, 0.8)` + : css`rgba(255, 255, 255, 0.8)`} !important; + `}; +`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/index.js deleted file mode 100644 index e385b45f41b..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -import CodeFund from './CodeFund'; - -export default () => ; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/index.ts new file mode 100644 index 00000000000..10de49bbfd1 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/index.ts @@ -0,0 +1 @@ +export { Advertisement } from './Advertisement'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/ConnectionNotice.tsx similarity index 61% rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/index.js rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/ConnectionNotice.tsx index 8d1d51701f7..cf70782abb6 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/index.js +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/ConnectionNotice.tsx @@ -1,11 +1,13 @@ import React from 'react'; -import { inject, observer } from 'mobx-react'; - +import { observer } from 'mobx-react-lite'; +import { useStore } from 'app/store'; import { Container } from './elements'; -function ConnectionNotice({ store }) { +export const ConnectionNotice = observer(() => { + const { connected } = useStore(); + return ( - !store.connected && ( + !connected && ( You{"'"}re not connected to the internet. You can still edit, but you cannot save. We recommend using the {"'"}Download{"'"} function to keep @@ -13,6 +15,4 @@ function ConnectionNotice({ store }) { ) ); -} - -export default inject('store')(observer(ConnectionNotice)); +}); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/elements.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/elements.js deleted file mode 100644 index fbbae7ce7dd..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/elements.js +++ /dev/null @@ -1,8 +0,0 @@ -import styled from 'styled-components'; - -export const Container = styled.div` - color: ${props => props.theme.red}; - background-color: ${props => props.theme.redBackground}; - padding: 1rem; - font-size: 0.75rem; -`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/elements.ts new file mode 100644 index 00000000000..895269a659a --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/elements.ts @@ -0,0 +1,10 @@ +import styled, { css } from 'styled-components'; + +export const Container = styled.div` + ${({ theme }) => css` + color: ${theme.red}; + background-color: ${theme.redBackground}; + padding: 1rem; + font-size: 0.75rem; + `} +`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/index.ts new file mode 100644 index 00000000000..912664f02ae --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/index.ts @@ -0,0 +1 @@ +export { ConnectionNotice } from './ConnectionNotice'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/CreateRepo/elements.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/CreateRepo/elements.js deleted file mode 100644 index c6f83c5e137..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/CreateRepo/elements.js +++ /dev/null @@ -1,7 +0,0 @@ -import styled from 'styled-components'; - -export const Error = styled.div` - margin: 1rem; - color: ${({ theme }) => theme.red}; - font-size: 0.875rem; -`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/CreateRepo/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/CreateRepo/index.js deleted file mode 100644 index 182cc300612..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/CreateRepo/index.js +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import { inject, observer } from 'mobx-react'; - -import Margin from '@codesandbox/common/lib/components/spacing/Margin'; -import Input from '@codesandbox/common/lib/components/Input'; -import { Button } from '@codesandbox/common/lib/components/Button'; - -import { WorkspaceSubtitle, WorkspaceInputContainer } from '../elements'; - -import { Error } from './elements'; - -class CreateRepo extends React.Component { - updateRepoTitle = e => { - this.props.signals.git.repoTitleChanged({ title: e.target.value }); - }; - - createRepo = () => { - this.props.signals.git.createRepoClicked(); - }; - - render() { - const { store, style } = this.props; - const modulesNotSaved = !store.editor.isAllModulesSynced; - const repoTitle = store.git.repoTitle; - const error = store.git.error; - - return ( -
- {modulesNotSaved && ( - Save your files first before exporting. - )} - {error && {error}} - - Repository Name - - - - - - -
- ); - } -} - -export default inject('signals', 'store')(observer(CreateRepo)); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/Changes/elements.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/Changes/elements.js deleted file mode 100644 index e91a9a72960..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/Changes/elements.js +++ /dev/null @@ -1,26 +0,0 @@ -import styled, { css } from 'styled-components'; -import { EntryContainer } from '../../elements'; - -export const ChangeContainer = styled.div` - &:last-child { - border-bottom: none; - } -`; - -export const Entry = styled(EntryContainer)` - display: flex; - align-items: center; - line-height: 1; - color: ${props => props.theme.vscodeTheme.colors['editor.foreground']}; - ${({ hideColor }) => - hideColor && - css` - background-color: transparent; - padding-left: 0; - `}; - - svg { - color: ${({ color }) => color}; - margin-right: 0.5rem; - } -`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/Changes/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/Changes/index.js deleted file mode 100644 index 3bf5899981d..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/Changes/index.js +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; - -import theme from '@codesandbox/common/lib/theme'; - -import AddedIcon from 'react-icons/lib/go/diff-added'; -import ModifiedIcon from 'react-icons/lib/go/diff-modified'; -import RemovedIcon from 'react-icons/lib/go/diff-removed'; - -import Tooltip from '@codesandbox/common/lib/components/Tooltip'; - -import { ChangeContainer, Entry } from './elements'; - -function Changes({ changes, color, Icon, title, hideColor }) { - return ( -
- {changes.sort().map(change => ( - - - - - - {change} - - - ))} -
- ); -} - -export function Added({ changes, hideColor }) { - return ( - - ); -} - -export function Modified({ changes, hideColor }) { - return ( - - ); -} - -export function Deleted({ changes, hideColor }) { - return ( - - ); -} - -export default Changes; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/TotalChanges/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/TotalChanges/index.js deleted file mode 100644 index 5b5610464b0..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/TotalChanges/index.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Added, Modified, Deleted } from '../Changes'; - -function TotalChanges({ gitChanges, hideColor }) { - return ( -
- - - -
- ); -} - -export default TotalChanges; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/elements.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/elements.js deleted file mode 100644 index 489a2414f24..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/elements.js +++ /dev/null @@ -1,21 +0,0 @@ -import styled from 'styled-components'; - -export const Container = styled.div` - color: ${props => - props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'}; -`; - -export const Buttons = styled.div` - display: flex; - margin: 1rem 0.125rem; - - button { - margin: 0 0.875rem; - } -`; - -export const ErrorMessage = styled.div` - color: ${({ theme }) => theme.red}; - margin: 1rem; - font-size: 0.875rem; -`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/index.js deleted file mode 100644 index 18a5d421103..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/index.js +++ /dev/null @@ -1,153 +0,0 @@ -import React from 'react'; -import { inject, observer } from 'mobx-react'; - -import Margin from '@codesandbox/common/lib/components/spacing/Margin'; -import GithubBadge from '@codesandbox/common/lib/components/GithubBadge'; -import { githubRepoUrl } from '@codesandbox/common/lib/utils/url-generator'; -import { Button } from '@codesandbox/common/lib/components/Button'; -import Notice from '@codesandbox/common/lib/components/Notice'; -import Input, { TextArea } from '@codesandbox/common/lib/components/Input'; - -import TotalChanges from './TotalChanges'; -import { WorkspaceSubtitle, WorkspaceInputContainer } from '../elements'; - -import { Container, Buttons, ErrorMessage } from './elements'; - -function hasWriteAccess(rights: 'none' | 'read' | 'write' | 'admin') { - return rights === 'write' || rights === 'admin'; -} - -class Git extends React.Component { - componentDidMount() { - this.props.signals.git.gitMounted(); - } - createCommit = () => { - this.props.signals.git.createCommitClicked(); - }; - - createPR = () => { - this.props.signals.git.createPrClicked(); - }; - - changeSubject = event => { - this.props.signals.git.subjectChanged({ - subject: event.target.value, - }); - }; - - changeDescription = event => { - this.props.signals.git.descriptionChanged({ - description: event.target.value, - }); - }; - - render() { - const { store } = this.props; - const gitChanges = store.git.originalGitChanges; - const originalGit = store.editor.currentSandbox.originalGit; - const modulesNotSaved = !store.editor.isAllModulesSynced; - const changeCount = gitChanges - ? gitChanges.added.length + - gitChanges.modified.length + - gitChanges.deleted.length - : 0; - - return ( - - beta - GitHub Repository - - - - - - Changes ({gitChanges ? changeCount : '...'}) - - {!store.git.isFetching && gitChanges ? ( - - - - {changeCount > 0 ? ( - - Commit Info - {modulesNotSaved && ( - - You need to save all modules before you can commit - - )} - 72 ? `#F27777` : `#556362`, - textAlign: 'right', - }} - > - {`${store.git.subject.length}/72`} - - - - - -