Skip to content

Commit e112aa7

Browse files
SaraVieirasiddharthkp
SaraVieira
authored and
siddharthkp
committed
Start Adding a new Sidebar (codesandbox#3333)
* start * use theme * clean ThemeProvider * add icons * move files * more cleaning * remove default export * add more stuff * fix ts * add stats * use theme * fix * add FormFields * fix description * trim description * add user if anon * remove /lib * fix ts
1 parent eb4c21d commit e112aa7

File tree

26 files changed

+911
-51
lines changed

26 files changed

+911
-51
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryEntryModal/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import * as CSSProps from 'styled-components/cssprop'; // eslint-disable-line
12
import React from 'react';
23
import { Alert } from 'app/components/Alert';
34
import Modal from 'app/components/Modal';

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import * as CSSProps from 'styled-components/cssprop'; // eslint-disable-line
12
import {
23
getChildren as calculateChildren,
34
inDirectory,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
import Checked from 'react-icons/lib/md/check-box';
1717
import Unchecked from 'react-icons/lib/md/check-box-outline-blank';
1818
import { MultiAction } from '@codesandbox/common/lib/components/MultiAction';
19+
import * as CSSProps from 'styled-components/cssprop'; // eslint-disable-line
1920
import { ButtonContainer, ButtonIcon } from './elements';
2021
import { BOOKMARK_TEMPLATE, UNBOOKMARK_TEMPLATE } from './mutations';
2122
import { BOOKMARKED_SANDBOX_INFO } from './queries';

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import fadeIn from '@codesandbox/common/lib/utils/animation/fade-in';
2-
import styled from 'styled-components';
2+
import styled, { css } from 'styled-components';
33

44
type ContainerStylesProps = {
55
theme?: any;
@@ -110,7 +110,7 @@ export const EntryContainer = styled.div<ContainerStylesProps>`
110110
${props => getContainerStyles(props)};
111111
`;
112112

113-
export const Container = styled.div`
113+
export const Container = styled.div<{ REDESIGNED_SIDEBAR: boolean }>`
114114
position: absolute;
115115
display: flex;
116116
flex-direction: column;
@@ -122,6 +122,14 @@ export const Container = styled.div`
122122
width: 100%;
123123
overflow-y: overlay;
124124
overflow-x: auto;
125+
126+
${props =>
127+
props.REDESIGNED_SIDEBAR &&
128+
css`
129+
* {
130+
box-sizing: border-box;
131+
}
132+
`}
125133
`;
126134

127135
export const ContactContainer = styled.div`

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

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import VERSION from '@codesandbox/common/lib/version';
22
import { SocialInfo } from 'app/components/SocialInfo';
33
import { useOvermind } from 'app/overmind';
44
import getWorkspaceItems, { getDisabledItems } from 'app/overmind/utils/items';
5-
import React, { FunctionComponent } from 'react';
6-
// Fix css prop types in styled-components (see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-463640878)
7-
import * as CSSProps from 'styled-components/cssprop'; // eslint-disable-line
8-
5+
import React from 'react';
6+
import { REDESIGNED_SIDEBAR } from '@codesandbox/common/lib/utils/feature-flags';
7+
import { ThemeProvider } from '@codesandbox/components';
8+
import { withTheme } from 'styled-components';
99
import { Advertisement } from './Advertisement';
1010
import { Chat } from './Chat';
1111
import { ConnectionNotice } from './ConnectionNotice';
@@ -15,31 +15,36 @@ import {
1515
ItemTitle,
1616
VersionContainer,
1717
} from './elements';
18-
import ConfigurationFiles from './items/ConfigurationFiles';
18+
import { ConfigurationFiles } from './items/ConfigurationFiles';
19+
import { ConfigurationFiles as ConfigurationFilesNew } from './screens/ConfigurationFiles';
1920
import { Deployment } from './items/Deployment';
2021
import { FilesItem } from './items/Files';
2122
import { GitHub } from './items/GitHub';
2223
import { Live } from './items/Live';
2324
import { More } from './items/More';
2425
import { NotOwnedSandboxInfo } from './items/NotOwnedSandboxInfo';
2526
import { ProjectInfo } from './items/ProjectInfo';
27+
import { ProjectInfo as ProjectInfoNew } from './screens/ProjectInfo';
28+
2629
import { Server } from './items/Server';
2730
import { SSEDownNotice } from './SSEDownNotice';
2831
import { WorkspaceItem } from './WorkspaceItem';
2932

33+
const WorkspaceWrapper = REDESIGNED_SIDEBAR ? ThemeProvider : React.Fragment;
34+
3035
const workspaceTabs = {
31-
project: ProjectInfo,
36+
project: REDESIGNED_SIDEBAR ? ProjectInfoNew : ProjectInfo,
3237
'project-summary': NotOwnedSandboxInfo,
3338
files: FilesItem,
3439
github: GitHub,
3540
deploy: Deployment,
36-
config: ConfigurationFiles,
41+
config: REDESIGNED_SIDEBAR ? ConfigurationFilesNew : ConfigurationFiles,
3742
live: Live,
3843
server: Server,
3944
more: More,
4045
};
4146

42-
export const Workspace: FunctionComponent = () => {
47+
export const WorkspaceComponent = ({ theme }) => {
4348
const { state } = useOvermind();
4449
const {
4550
editor: {
@@ -63,20 +68,24 @@ export const Workspace: FunctionComponent = () => {
6368
getDisabledItems(state).find(({ id }) => id === activeTab);
6469

6570
return (
66-
<Container>
67-
{item && !item.hasCustomHeader && <ItemTitle>{item.name}</ItemTitle>}
71+
<Container REDESIGNED_SIDEBAR={REDESIGNED_SIDEBAR}>
72+
{item && !item.hasCustomHeader && !REDESIGNED_SIDEBAR && (
73+
<ItemTitle>{item.name}</ItemTitle>
74+
)}
6875

6976
<div style={{ flex: 1, overflowY: 'auto' }}>
70-
<Component />
77+
<WorkspaceWrapper theme={theme.vscodeTheme}>
78+
<Component />
79+
</WorkspaceWrapper>
7180
</div>
7281

73-
{isLive && roomInfo.chatEnabled && (
82+
{isLive && roomInfo.chatEnabled && !REDESIGNED_SIDEBAR && (
7483
<WorkspaceItem defaultOpen title="Chat">
7584
<Chat />
7685
</WorkspaceItem>
7786
)}
7887

79-
{!zenMode && (
88+
{!zenMode && !REDESIGNED_SIDEBAR && (
8089
<>
8190
{!(isPatron || owned) && <Advertisement />}
8291

@@ -96,3 +105,5 @@ export const Workspace: FunctionComponent = () => {
96105
</Container>
97106
);
98107
};
108+
109+
export const Workspace = withTheme(WorkspaceComponent);

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const FileConfig = ({
8383
);
8484
};
8585

86-
const ConfigurationFiles = () => {
86+
export const ConfigurationFiles = () => {
8787
const {
8888
state,
8989
actions: { files, editor },
@@ -157,5 +157,3 @@ const ConfigurationFiles = () => {
157157
</div>
158158
);
159159
};
160-
161-
export default ConfigurationFiles;

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ConfigurationFiles/Icons.tsx‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import React from 'react';
2+
3+
export const NetlifyIcon = props => (
4+
<svg width={12} height={12} fill="none" viewBox="0 0 12 12" {...props}>
5+
<path
6+
fill="#4CAA9F"
7+
d="M.474 7.144a1.619 1.619 0 010-2.288L4.856.474a1.619 1.619 0 012.288 0l4.382 4.382a1.619 1.619 0 010 2.288l-4.382 4.382a1.619 1.619 0 01-2.288 0L.474 7.144z"
8+
/>
9+
</svg>
10+
);
11+
12+
export const PrettierIcon = props => (
13+
<svg width={10} height={11} fill="none" viewBox="0 0 10 11" {...props}>
14+
<path
15+
fill="#56B3B4"
16+
d="M8.486 2.057H7.97a.257.257 0 100 .514h.515a.257.257 0 100-.514z"
17+
/>
18+
<path
19+
fill="#EA5E5E"
20+
d="M2.829 10.286H.257a.257.257 0 000 .514H2.83a.257.257 0 100-.514z"
21+
/>
22+
<path
23+
fill="#BF85BF"
24+
d="M7.971 6.171H6.43a.257.257 0 100 .515H7.97a.257.257 0 000-.515z"
25+
/>
26+
<path
27+
fill="#EA5E5E"
28+
d="M5.4 6.171H3.343a.257.257 0 100 .515H5.4a.257.257 0 100-.515z"
29+
/>
30+
<path
31+
fill="#56B3B4"
32+
d="M2.314 6.171H.257a.257.257 0 100 .515h2.057a.257.257 0 100-.515z"
33+
/>
34+
<path
35+
fill="#BF85BF"
36+
d="M2.829 8.229H.257a.257.257 0 100 .514H2.83a.257.257 0 100-.514zM2.829 4.114H.257a.257.257 0 100 .515H2.83a.257.257 0 100-.515z"
37+
/>
38+
<path
39+
fill="#F7BA3E"
40+
d="M7.971 1.028H2.828a.257.257 0 000 .515h5.143a.257.257 0 000-.515z"
41+
/>
42+
<path
43+
fill="#EA5E5E"
44+
d="M1.8 1.028H.257a.257.257 0 000 .515H1.8a.257.257 0 000-.515z"
45+
/>
46+
<path
47+
fill="#F7BA3E"
48+
d="M2.829 9.257h-.515a.257.257 0 000 .515h.515a.257.257 0 100-.515z"
49+
/>
50+
<path
51+
fill="#56B3B4"
52+
d="M2.829 3.086h-.515a.257.257 0 100 .514h.515a.257.257 0 100-.514zM1.286 9.257H.257a.257.257 0 000 .515h1.029a.257.257 0 100-.515z"
53+
/>
54+
<path
55+
fill="#F7BA3E"
56+
d="M1.286 3.086H.257a.257.257 0 100 .514h1.029a.257.257 0 100-.514z"
57+
/>
58+
<path
59+
fill="#56B3B4"
60+
d="M8.486 5.143H4.37a.257.257 0 100 .514h4.115a.257.257 0 100-.514z"
61+
/>
62+
<path
63+
fill="#F7BA3E"
64+
d="M3.343 5.143H1.8a.257.257 0 100 .514h1.543a.257.257 0 100-.514z"
65+
/>
66+
<path
67+
fill="#EA5E5E"
68+
d="M.771 5.143H.257a.257.257 0 100 .514h.514a.257.257 0 100-.514z"
69+
/>
70+
<path
71+
fill="#BF85BF"
72+
d="M6.943 2.057H4.886a.257.257 0 100 .514h2.057a.257.257 0 100-.514z"
73+
/>
74+
<path
75+
fill="#56B3B4"
76+
d="M3.857 2.057h-3.6a.257.257 0 000 .514h3.6a.257.257 0 100-.514z"
77+
/>
78+
<path
79+
fill="#BF85BF"
80+
d="M.771 7.2H.257a.257.257 0 100 .514h.514a.257.257 0 000-.514z"
81+
/>
82+
<path
83+
fill="#EA5E5E"
84+
d="M9 3.086H6.429a.257.257 0 100 .514H9a.257.257 0 100-.514z"
85+
/>
86+
<path
87+
fill="#F7BA3E"
88+
d="M9 4.114H6.429a.257.257 0 100 .515H9a.257.257 0 100-.515z"
89+
/>
90+
<path
91+
fill="#56B3B4"
92+
d="M6.429 0H.257a.257.257 0 000 .514H6.43a.257.257 0 100-.514z"
93+
/>
94+
</svg>
95+
);
96+
97+
export const NPMIcon = props => (
98+
<svg width={17} height={16} fill="none" viewBox="0 0 17 16" {...props}>
99+
<path
100+
fill="#FF453A"
101+
d="M.667 16V0h16.172v16H.668zM3.708 2.998v9.98h5.097V5.079h2.97v7.9h2.022V3H3.708z"
102+
/>
103+
</svg>
104+
);
105+
106+
export const ZeitIcon = props => (
107+
<svg width={12} height={10} fill="none" viewBox="0 0 12 10" {...props}>
108+
<path fill="#fff" d="M6 0l6 10H0L6 0z" />
109+
</svg>
110+
);
111+
112+
export const JSIcon = props => (
113+
<svg width={16} height={16} viewBox="0 0 16 16" {...props}>
114+
<g id="Page-1" fill="none" fillRule="evenodd" stroke="none" strokeWidth={1}>
115+
<g id="configJS" fillRule="nonzero">
116+
<path id="Path" fill="#F7DF1E" d="M0 0L16 0 16 16 0 16z" />
117+
<g id="Group" fill="#000" transform="translate(4 7)">
118+
<path
119+
id="Path"
120+
d="M.207 6.37l1.224-.74c.237.418.452.773.967.773.494 0 .806-.194.806-.945V.345h1.503V5.48c0 1.557-.913 2.266-2.244 2.266C1.26 7.745.56 7.122.207 6.37M5.524 6.21l1.224-.71c.322.527.741.913 1.482.913.623 0 1.02-.311 1.02-.74 0-.516-.407-.699-1.095-1l-.376-.16C6.695 4.05 5.975 3.47 5.975 2.245c0-1.127.86-1.987 2.202-1.987.956 0 1.643.333 2.137 1.203l-1.17.752c-.258-.462-.538-.644-.967-.644-.44 0-.72.279-.72.644 0 .451.28.634.924.913l.376.161c1.278.548 1.997 1.106 1.997 2.363 0 1.353-1.063 2.094-2.491 2.094-1.397 0-2.299-.666-2.739-1.536"
121+
/>
122+
</g>
123+
</g>
124+
</g>
125+
</svg>
126+
);
127+
128+
export const CodeSandboxIcon = props => (
129+
<svg width={16} height={16} viewBox="0 0 16 16" {...props}>
130+
<g id="Page-1" fill="none" fillRule="evenodd" stroke="none" strokeWidth={1}>
131+
<g id="configCodesandbox">
132+
<path
133+
id="Path"
134+
fill="#000"
135+
fillRule="nonzero"
136+
d="M0 1a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H1a1 1 0 01-1-1V1z"
137+
/>
138+
<path
139+
id="Shape"
140+
fill="#999"
141+
d="M7.82 8.532v5.418c.095 0 .157-.02.241-.069l4.339-2.48c.171-.097.241-.25.241-.447V5.927c0-.099-.02-.158-.069-.241L7.959 8.293a.275.275 0 00-.139.239zm2.41 3.11c0 .139-.051.208-.172.276l-1.446.827c-.103.069-.24.034-.24-.104V8.957c0-.098.086-.226.171-.275l3.306-1.894c.092-.053.172.032.172.138v1.962a.265.265 0 01-.138.241l-1.48.792c-.09.048-.172.14-.172.241v1.48z"
142+
/>
143+
<path
144+
id="Shape"
145+
fill="#F2F2F2"
146+
d="M3 10.954V5.927c0-.198.104-.384.276-.482l4.2-2.376A.839.839 0 017.821 3c.103 0 .262.026.344.069l4.166 2.376c.083.048.195.16.241.24L7.958 8.304a.278.278 0 00-.137.24v5.407a.555.555 0 01-.276-.07L3.31 11.437c-.172-.098-.31-.284-.31-.482zm.62-4.029v1.963c0 .138.034.207.172.276l1.446.826a.283.283 0 01.172.275v1.378c0 .137.035.206.172.275l1.447.827c.137.068.24.034.24-.104V8.957a.284.284 0 00-.171-.276L3.86 6.822c-.104-.069-.241-.034-.241.103zm5.647-2.341l-1.274.723a.313.313 0 01-.345 0l-1.274-.723a.285.285 0 00-.275 0l-1.584.895c-.138.069-.138.207 0 .276L7.683 7.58c.085.048.19.048.275 0l3.168-1.825c.103-.07.138-.207 0-.276l-1.584-.895a.285.285 0 00-.275 0z"
147+
/>
148+
</g>
149+
</g>
150+
</svg>
151+
);

0 commit comments

Comments
 (0)