Skip to content

Commit 5122175

Browse files
SaraVieiraSaraVieira
committed
Merge branch 'overmind/Project' of https://github.com/MichaelDeBoey/codesandbox-client into MichaelDeBoey-overmind/Project
2 parents 9895dc8 + 008c3f9 commit 5122175

Some content is hidden

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

42 files changed

+702
-577
lines changed

‎packages/app/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,7 @@
252252
"@types/phoenix": "^1.4.0",
253253
"@types/prop-types": "^15.7.0",
254254
"@types/react": "^16.8.12",
255+
"@types/react-color": "^2.17.2",
255256
"@types/react-dom": "^16.8.3",
256257
"@types/react-helmet": "^5.0.11",
257258
"@types/react-icons": "2.2.7",

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -188,9 +188,10 @@ export const sandboxDeleted: AsyncAction = async ({
188188
effects.router.redirectToSandboxWizard();
189189
};
190190

191-
export const sandboxPrivacyChanged: AsyncAction<{
192-
privacy: 0 | 1 | 2;
193-
}> = async ({ state, effects, actions }, { privacy }) => {
191+
export const sandboxPrivacyChanged: AsyncAction<0 | 1 | 2> = async (
192+
{ actions, effects, state },
193+
privacy
194+
) => {
194195
const oldPrivacy = state.editor.currentSandbox.privacy;
195196
const sandbox = await effects.api.updatePrivacy(
196197
state.editor.currentSandbox.id,

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/Alias.tsx

Lines changed: 0 additions & 69 deletions
This file was deleted.

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/elements.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@ import styled, { css } from 'styled-components';
33
export const SandboxAlias = styled.div`
44
${({ theme }) => css`
55
margin-top: 0.5rem;
6-
color: ${theme.light
7-
? css`rgba(0, 0, 0, 0.8)`
8-
: css`rgba(255, 255, 255, 0.8)`};
6+
color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
97
font-size: 0.875rem;
108
`}
119
`;

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { ESC } from '@codesandbox/common/lib/utils/keycodes';
2+
import React, {
3+
ChangeEvent,
4+
FunctionComponent,
5+
KeyboardEvent,
6+
useState,
7+
} from 'react';
8+
9+
import { useOvermind } from 'app/overmind';
10+
11+
import { WorkspaceInputContainer } from '../../elements';
12+
13+
import { EditPenIcon } from '../elements';
14+
15+
import { SandboxAlias } from './elements';
16+
17+
type Props = {
18+
editable: boolean;
19+
};
20+
export const Alias: FunctionComponent<Props> = ({ editable }) => {
21+
const {
22+
actions: {
23+
workspace: { sandboxInfoUpdated, valueChanged },
24+
},
25+
state: {
26+
editor: { currentSandbox },
27+
workspace: { project },
28+
},
29+
} = useOvermind();
30+
const [editing, setEditing] = useState(false);
31+
32+
const alias = project.alias || currentSandbox.alias;
33+
34+
return editing ? (
35+
<WorkspaceInputContainer>
36+
<input
37+
onBlur={() => {
38+
sandboxInfoUpdated();
39+
40+
setEditing(false);
41+
}}
42+
onChange={({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
43+
valueChanged({ field: 'alias', value });
44+
}}
45+
onKeyUp={({ keyCode }: KeyboardEvent<HTMLInputElement>) => {
46+
if (keyCode === ESC) {
47+
sandboxInfoUpdated();
48+
49+
setEditing(false);
50+
}
51+
}}
52+
placeholder="Alias"
53+
type="text"
54+
value={alias}
55+
ref={el => {
56+
if (el) {
57+
el.focus();
58+
}
59+
}}
60+
/>
61+
</WorkspaceInputContainer>
62+
) : (
63+
<SandboxAlias>
64+
{alias}
65+
66+
{editable && <EditPenIcon onClick={() => setEditing(true)} />}
67+
</SandboxAlias>
68+
);
69+
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author.tsx

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author/elements.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Link } from 'react-router-dom';
2+
import styled, { css } from 'styled-components';
3+
4+
export const UserLink = styled(Link)`
5+
${({ theme }) => css`
6+
display: block;
7+
color: ${theme[`editor.foreground`] || css`rgba(255, 255, 255, 0.8)`};
8+
font-size: 0.875rem;
9+
text-decoration: none;
10+
`}
11+
`;

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author/index.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { UserWithAvatar } from '@codesandbox/common/lib/components/UserWithAvatar';
2+
import { profileUrl } from '@codesandbox/common/lib/utils/url-generator';
3+
import React, { FunctionComponent } from 'react';
4+
5+
import { useOvermind } from 'app/overmind';
6+
7+
import { Item } from '../elements';
8+
9+
import { UserLink } from './elements';
10+
11+
export const Author: FunctionComponent = () => {
12+
const {
13+
state: {
14+
editor: {
15+
currentSandbox: {
16+
author: { username, avatarUrl, subscriptionSince },
17+
},
18+
},
19+
},
20+
} = useOvermind();
21+
22+
return (
23+
<Item>
24+
<UserLink title={username} to={profileUrl(username)}>
25+
<UserWithAvatar
26+
avatarUrl={avatarUrl}
27+
subscriptionSince={subscriptionSince}
28+
username={username}
29+
/>
30+
</UserLink>
31+
</Item>
32+
);
33+
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/elements.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import styled, { css } from 'styled-components';
22

3+
import { WorkspaceInputContainer as WorkspaceInputContainerBase } from '../../elements';
4+
35
export const SandboxDescription = styled.div<{ empty: boolean }>`
46
${({ empty, theme }) => css`
57
margin-top: 0.5rem;
@@ -10,3 +12,7 @@ export const SandboxDescription = styled.div<{ empty: boolean }>`
1012
font-style: ${empty ? 'normal' : 'italic'};
1113
`}
1214
`;
15+
16+
export const WorkspaceInputContainer = styled(WorkspaceInputContainerBase)`
17+
margin: 0 -0.25rem;
18+
`;

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/Description.tsx renamed to ‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/index.tsx

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
2-
import React, { FunctionComponent, useState } from 'react';
2+
import React, {
3+
ChangeEvent,
4+
FunctionComponent,
5+
KeyboardEvent,
6+
useState,
7+
} from 'react';
38

49
import { useOvermind } from 'app/overmind';
510

6-
import { WorkspaceInputContainer } from '../../elements';
11+
import { EditPenIcon } from '../elements';
712

8-
import { EditPen } from '../elements';
9-
10-
import { SandboxDescription } from './elements';
13+
import { SandboxDescription, WorkspaceInputContainer } from './elements';
1114

1215
type Props = {
1316
editable: boolean;
@@ -25,44 +28,44 @@ export const Description: FunctionComponent<Props> = ({ editable }) => {
2528
} = useOvermind();
2629
const [editing, setEditing] = useState(false);
2730

28-
const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
31+
const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
2932
if (event.keyCode === ENTER && !event.shiftKey) {
3033
event.preventDefault();
3134
event.stopPropagation();
35+
3236
sandboxInfoUpdated();
37+
3338
setEditing(false);
3439
}
3540
};
3641

3742
return editing ? (
38-
<WorkspaceInputContainer style={{ margin: '0 -0.25rem' }}>
43+
<WorkspaceInputContainer>
3944
<textarea
40-
rows={2}
45+
onBlur={() => {
46+
sandboxInfoUpdated();
47+
48+
setEditing(false);
49+
}}
50+
onChange={({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) => {
51+
valueChanged({ field: 'description', value });
52+
}}
53+
onKeyDown={onKeyDown}
4154
placeholder="Description"
42-
value={description}
4355
ref={el => {
4456
if (el) {
4557
el.focus();
4658
}
4759
}}
48-
onKeyDown={onKeyDown}
49-
onChange={event => {
50-
valueChanged({
51-
field: 'description',
52-
value: event.target.value,
53-
});
54-
}}
55-
onBlur={() => {
56-
sandboxInfoUpdated();
57-
setEditing(false);
58-
}}
60+
rows={2}
61+
value={description}
5962
/>
6063
</WorkspaceInputContainer>
6164
) : (
6265
<SandboxDescription empty={Boolean(description)}>
6366
{description || (editable ? 'No description, create one!' : '')}
6467

65-
{editable && <EditPen onClick={() => setEditing(true)} />}
68+
{editable && <EditPenIcon onClick={() => setEditing(true)} />}
6669
</SandboxDescription>
6770
);
6871
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/elements.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import styled, { css } from 'styled-components';
2+
3+
export const BundlerLink = styled.a.attrs({
4+
target: '_blank',
5+
rel: 'noreferrer noopener',
6+
})`
7+
${({ theme }) => css`
8+
color: ${theme.templateColor} !important;
9+
`}
10+
`;

0 commit comments

Comments
 (0)