Skip to content

Commit a2ec6d9

Browse files
SaerisSaeris
committed
Merge branch 'master' into prototype-common-sync
2 parents b8ab5e0 + e84a7c7 commit a2ec6d9

File tree

48 files changed

+1190
-241
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1190
-241
lines changed

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@
1414
[![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
1515
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
1616

17-
An instantly ready, full-featured online IDE for web development on any device with a browser. Enabling you to start new projects quickly and prototype rapidly. With CodeSandbox, you can create web apps, experiment with code, test ideas, and share creations easily.
17+
An instantly ready, full-featured online IDE for web development on any device
18+
with a browser. Enabling you to start new projects quickly and prototype
19+
rapidly. With CodeSandbox, you can create web apps, experiment with code, test
20+
ideas, and share creations easily.
1821

1922
## Other CodeSandbox repositories
2023

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"build:embed": "lerna run build:embed --scope app --stream && gulp",
3838
"build:prod": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" lerna run build --scope homepage --stream && lerna run build --scope app --stream && lerna run copy-assets --scope app --stream",
3939
"commit": "concurrently \"yarn typecheck\" \"yarn lint\" && git commit -m",
40-
"postinstall": "yarn lerna run install-dependencies --stream --concurrency 1 && opencollective postinstall",
40+
"postinstall": "yarn lerna run install-dependencies --stream --concurrency 1 --ignore smooshpack --ignore react-smooshpack && opencollective postinstall",
4141
"contributors:add": "all-contributors add",
4242
"contributors:generate": "all-contributors generate",
4343
"lint": "lerna run lint --stream",

‎packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Create/Create.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
22
import { Scrollable } from '@codesandbox/common/lib/components/Scrollable';
33
import { useOvermind } from 'app/overmind';
44
import { LinkButton } from 'app/components/LinkButton';
5+
import track from '@codesandbox/common/lib/utils/analytics';
56
import { Header } from '../elements';
67
import { CenteredMessage } from './elements';
78

@@ -14,6 +15,10 @@ export const Create = () => {
1415
const [filter, setFilter] = React.useState('');
1516
const [officialTemplateInfos, setOfficialTemplates] = React.useState([]);
1617

18+
useEffect(() => {
19+
track('Create Sandbox Tab Open', { tab: 'create' });
20+
}, []);
21+
1722
useEffect(() => {
1823
getTemplateInfosFromAPI('/api/v1/sandboxes/templates/official').then(x => {
1924
setOfficialTemplates(x);

‎packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Explore/Explore.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useEffect } from 'react';
22
import { Scrollable } from '@codesandbox/common/lib/components/Scrollable';
3+
import track from '@codesandbox/common/lib/utils/analytics';
34
import { Header } from '../elements';
45
import { SearchBox } from '../SearchBox';
56
import { SearchResults } from './SearchResults';
@@ -13,6 +14,10 @@ export const Explore = () => {
1314
const [exploreTemplates, setExploreTemplates] = useState<ITemplateInfo[]>([]);
1415
const [loading, setLoading] = useState(false);
1516

17+
useEffect(() => {
18+
track('Create Sandbox Tab Open', { tab: 'explore' });
19+
}, []);
20+
1621
useEffect(() => {
1722
let loaded = false;
1823
const timeout = window.setTimeout(() => {

‎packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Import/Import.tsx‎

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import React, { useState, useCallback } from 'react';
1+
import React, { useState, useCallback, useEffect } from 'react';
22
import {
33
gitHubToSandboxUrl,
44
protocolAndHost,
55
gitHubRepoPattern,
66
} from '@codesandbox/common/lib/utils/url-generator';
77
import { Button } from '@codesandbox/common/lib/components/Button';
88
import { useOvermind } from 'app/overmind';
9+
import { SignInButton } from 'app/pages/common/SignInButton';
10+
import track from '@codesandbox/common/lib/utils/analytics';
911
import { TerminalIcon } from '../Icons/TerminalIcon';
1012
import { DownloadIcon } from '../Icons/DownloadIcon';
1113
import { GitHubIcon, StackbitIcon } from '../Icons';
@@ -47,6 +49,10 @@ export const Import = () => {
4749
const [transformedUrl, setTransformedUrl] = useState('');
4850
const [url, setUrl] = useState('');
4951

52+
useEffect(() => {
53+
track('Create Sandbox Tab Open', { tab: 'import' });
54+
}, []);
55+
5056
const updateUrl = useCallback(({ target: { value: newUrl } }) => {
5157
if (!newUrl) {
5258
setError(null);
@@ -129,33 +135,36 @@ export const Import = () => {
129135
</ButtonContainer>
130136
</form>
131137
</Column>
132-
{state.user && (
133-
<>
134-
<VerticalSeparator />
135-
<Column>
136-
<FeatureName>
137-
<StackbitIcon style={{ marginRight: '1rem' }} />
138-
Import from Stackbit
139-
</FeatureName>
140-
<FeatureText>
141-
Create a project using{' '}
142-
<a
143-
href="https://www.stackbit.com/"
144-
target="_blank"
145-
rel="noreferrer noopener"
146-
>
147-
Stackbit
148-
</a>
149-
. This generates a project for you that{"'"}s automatically set
150-
up with any Theme, Site Generator and CMS.
151-
</FeatureText>
138+
139+
<>
140+
<VerticalSeparator />
141+
<Column>
142+
<FeatureName>
143+
<StackbitIcon style={{ marginRight: '1rem' }} />
144+
Import from Stackbit
145+
</FeatureName>
146+
<FeatureText>
147+
Create a project using{' '}
148+
<a
149+
href="https://www.stackbit.com/"
150+
target="_blank"
151+
rel="noreferrer noopener"
152+
>
153+
Stackbit
154+
</a>
155+
. This generates a project for you that{"'"}s automatically set up
156+
with any Theme, Site Generator and CMS.
157+
</FeatureText>
158+
{!state.user ? (
159+
<SignInButton />
160+
) : (
152161
<StackbitButton
153162
style={{ fontSize: 11 }}
154163
username={state.user.username}
155164
/>
156-
</Column>
157-
</>
158-
)}
165+
)}
166+
</Column>
167+
</>
159168
</Features>
160169
<ImportChoices>
161170
<a href="/docs/importing#export-with-cli">

‎packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Welcome/Welcome.tsx‎

Lines changed: 46 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,53 @@
1-
import React from 'react';
1+
import React, { useEffect } from 'react';
22
import { Button } from '@codesandbox/common/lib/components/Button';
3+
import track from '@codesandbox/common/lib/utils/analytics';
34
import { CodeAnywhere } from './CodeAnywhere';
45
import { StartQuickly } from './StartQuickly';
56
import { PrototypeRapidly } from './PrototypeRapidly';
67
import { Header } from '../elements';
78
import { Features, FeatureName, FeatureText, Actions } from './elements';
89

9-
export const Welcome = ({ goToTab }: { goToTab: (event: any) => void }) => (
10-
<>
11-
<Header>
12-
<span>Welcome to CodeSandbox</span>
13-
</Header>
14-
<Features>
15-
<li>
16-
<CodeAnywhere />
17-
<FeatureName>Code Anywhere</FeatureName>
18-
<FeatureText>
19-
An instantly ready, full-featured online IDE for web development on
20-
any device with a browser.
21-
</FeatureText>
22-
</li>
23-
<li>
24-
<StartQuickly />
25-
<FeatureName>Start Quickly</FeatureName>
26-
<FeatureText>
27-
With no setup, and templates for all popular frameworks to get you
28-
started quickly.
29-
</FeatureText>
30-
</li>
31-
<li>
32-
<PrototypeRapidly />
33-
<FeatureName>Prototype Rapidly</FeatureName>
34-
<FeatureText>
35-
You can create web apps, experiment with code, test ideas, and share
36-
creations easily.
37-
</FeatureText>
38-
</li>
39-
</Features>
40-
<Actions>
41-
<Button small style={{ fontSize: 12, width: 200 }} onClick={goToTab}>
42-
Create Sandbox
43-
</Button>
44-
</Actions>
45-
</>
46-
);
10+
export const Welcome = ({ goToTab }: { goToTab: (event: any) => void }) => {
11+
useEffect(() => {
12+
track('Create Sandbox Tab Open', { tab: 'welcome' });
13+
}, []);
14+
15+
return (
16+
<>
17+
<Header>
18+
<span>Welcome to CodeSandbox</span>
19+
</Header>
20+
<Features>
21+
<li>
22+
<CodeAnywhere />
23+
<FeatureName>Code Anywhere</FeatureName>
24+
<FeatureText>
25+
An instantly ready, full-featured online IDE for web development on
26+
any device with a browser.
27+
</FeatureText>
28+
</li>
29+
<li>
30+
<StartQuickly />
31+
<FeatureName>Start Quickly</FeatureName>
32+
<FeatureText>
33+
With no setup, and templates for all popular frameworks to get you
34+
started quickly.
35+
</FeatureText>
36+
</li>
37+
<li>
38+
<PrototypeRapidly />
39+
<FeatureName>Prototype Rapidly</FeatureName>
40+
<FeatureText>
41+
You can create web apps, experiment with code, test ideas, and share
42+
creations easily.
43+
</FeatureText>
44+
</li>
45+
</Features>
46+
<Actions>
47+
<Button small style={{ fontSize: 12, width: 200 }} onClick={goToTab}>
48+
Create Sandbox
49+
</Button>
50+
</Actions>
51+
</>
52+
);
53+
};

‎packages/app/src/app/index.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,15 @@
3434
<!-- {{OEMBED TAG}} -->
3535
<title>CodeSandbox</title>
3636
<link href="/static/fonts/dmvendor.css" rel="stylesheet">
37-
</link>
37+
</link>
38+
<link crossOrigin="anonymous" rel="preload" href="/static/fonts/inter/Inter-Regular.woff2" as="font">
39+
</link>
40+
<link crossOrigin="anonymous" rel="preload" href="/static/fonts/inter/Inter-Medium.woff2" as="font">
41+
</link>
42+
<link crossOrigin="anonymous" rel="preload" href="/static/fonts/inter/Inter-Bold.woff2" as="font">
43+
</link>
44+
<link href="/static/fonts/inter/inter.css" rel="stylesheet">
45+
</link>
3846
<!-- Google Tag Manager -->
3947
<script>
4048
(function (w, d, s, l, i) {

‎packages/app/src/app/overmind/actions.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,18 @@ type ModalName =
7474
| 'share'
7575
| 'signInForTemplates'
7676
| 'userSurvey';
77-
export const modalOpened: Action<{ modal: ModalName; message?: string }> = (
78-
{ state, effects },
79-
{ modal, message }
80-
) => {
77+
78+
export const modalOpened: Action<{
79+
modal: ModalName;
80+
message?: string;
81+
itemId?: string;
82+
}> = ({ state, effects }, { modal, message, itemId }) => {
8183
effects.analytics.track('Open Modal', { modal });
8284
state.currentModalMessage = message;
8385
state.currentModal = modal;
86+
if (state.currentModal === 'preferences') {
87+
state.preferences.itemId = itemId;
88+
}
8489
};
8590

8691
export const modalClosed: Action = ({ state, effects }) => {

‎packages/app/src/app/overmind/effects/vscode/initializers.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,12 @@ export function installCustomTheme(id: string, name: string, theme: string) {
9393
// @ts-ignore
9494
const fs = window.BrowserFS.BFSRequire('fs');
9595
const extName = `${id}-theme`;
96-
fs.mkdirSync(`/extensions/${extName}`);
96+
97+
const folder = `/extensions/${extName}`;
98+
const folderExists = fs.existsSync(folder);
99+
if (!folderExists) {
100+
fs.mkdirSync(folder);
101+
}
97102
fs.writeFileSync(
98103
`/extensions/${extName}/package.json`,
99104
JSON.stringify(packageJSON)

‎packages/app/src/app/overmind/internalActions.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -371,9 +371,10 @@ export const onApiError: Action<ApiError> = (
371371
error.message = result;
372372
} else if ('errors' in result) {
373373
const errors = values(result.errors)[0];
374+
const fields = Object.keys(result.errors)[0];
374375
if (Array.isArray(errors)) {
375376
if (errors[0]) {
376-
error.message = errors[0]; // eslint-disable-line no-param-reassign,prefer-destructuring
377+
error.message = `${fields[0]}: ${errors[0]}`; // eslint-disable-line no-param-reassign,prefer-destructuring
377378
}
378379
} else {
379380
error.message = errors; // eslint-disable-line no-param-reassign

0 commit comments

Comments
 (0)