Skip to content

Commit 075d2fb

Browse files
siddharthkpsiddharthkp
authored
Sandbox summary v3? (codesandbox#3494)
* improve tags * build new tags input in stories * tag input has different color tags * add tag input component * almost there * auto grow input in tags * refactor to new form * form works but autogrow broke * pull autogrowing input in its own component * give ample space to move around * get own sandbox right first * duplication > wrong abstraction * move not owned summary to its own file * borders and margins at the right place * touched the wrong file, sorry!
1 parent 0048c75 commit 075d2fb

File tree

21 files changed

+562
-456
lines changed

21 files changed

+562
-456
lines changed

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,31 @@ export const tagsChanged: AsyncAction<{
116116
await actions.workspace.tagAdded();
117117
};
118118

119+
/** tagsChanged2 takes new tags and does the diffing on its own
120+
* This is v2 of tagsChanged. It's used in the redesign
121+
*/
122+
export const tagsChanged2: AsyncAction<string[]> = withOwnedSandbox(
123+
async ({ state, effects, actions }, newTags) => {
124+
const sandbox = state.editor.currentSandbox;
125+
if (!sandbox) return;
126+
127+
const { tags: oldTags } = sandbox;
128+
129+
const removedTags = oldTags.filter(tag => !newTags.includes(tag));
130+
const addedTags = newTags.filter(tag => !oldTags.includes(tag));
131+
132+
removedTags.forEach(actions.workspace.tagRemoved);
133+
134+
addedTags.forEach(async tag => {
135+
const cleanTag = tag.replace(/#/g, '');
136+
137+
// use old methods to update tags
138+
actions.workspace.tagChanged(cleanTag);
139+
await actions.workspace.tagAdded();
140+
});
141+
}
142+
);
143+
119144
export const sandboxInfoUpdated: AsyncAction = withOwnedSandbox(
120145
async ({ state, effects, actions }) => {
121146
const sandbox = state.editor.currentSandbox;

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,10 @@ export const LiveNow = () => {
104104
<Collapsible title="Preferences" defaultOpen>
105105
<List>
106106
{isOwner && (
107-
<ListAction justify="space-between" onClick={() => onChatEnabledToggle()}>
107+
<ListAction
108+
justify="space-between"
109+
onClick={() => onChatEnabledToggle()}
110+
>
108111
<Label htmlFor="chat_enabled">Chat enabled</Label>
109112
<Switch
110113
id="chat_enabled"

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/BookmarkTemplateButton/index.tsx renamed to ‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/BookmarkTemplateButton/index.tsx

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@ import {
1313
UnbookmarkTemplateMutationVariables,
1414
BookmarkedSandboxInfoQueryVariables,
1515
} from 'app/graphql/types';
16-
import { Element, Button } from '@codesandbox/components';
17-
import { css } from '@styled-system/css';
16+
import { Button } from '@codesandbox/components';
1817
import { BOOKMARK_TEMPLATE, UNBOOKMARK_TEMPLATE } from './mutations';
1918
import { BOOKMARKED_SANDBOX_INFO } from './queries';
2019

@@ -93,19 +92,10 @@ export const BookmarkTemplateButton = () => {
9392
bookmarkInfos[i].isBookmarked ? unbookmark(config(i)) : bookmark(config(i));
9493

9594
return (
96-
<Element
97-
marginTop={6}
98-
paddingBottom={8}
99-
css={css({
100-
borderBottom: '1px solid',
101-
borderColor: 'sideBar.border',
102-
})}
103-
>
104-
<Button disabled={loading} onClick={() => handleToggleFollow()}>
105-
{bookmarkInfos[0]?.isBookmarked
106-
? `Unbookmark Template`
107-
: `Bookmark Template`}
108-
</Button>
109-
</Element>
95+
<Button disabled={loading} onClick={() => handleToggleFollow()}>
96+
{bookmarkInfos[0]?.isBookmarked
97+
? `Unbookmark Template`
98+
: `Bookmark Template`}
99+
</Button>
110100
);
111101
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/BookmarkTemplateButton/mutations.ts renamed to ‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/BookmarkTemplateButton/mutations.ts

File renamed without changes.

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/BookmarkTemplateButton/queries.ts renamed to ‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/BookmarkTemplateButton/queries.ts

File renamed without changes.

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/Summary.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+
import { useOvermind } from 'app/overmind';
3+
4+
import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
5+
import {
6+
sandboxUrl,
7+
profileUrl,
8+
} from '@codesandbox/common/lib/utils/url-generator';
9+
import getTemplateDefinition from '@codesandbox/common/lib/templates';
10+
import { Icons } from '@codesandbox/template-icons';
11+
import getIcon from '@codesandbox/common/lib/templates/icons';
12+
13+
import {
14+
Element,
15+
Collapsible,
16+
Text,
17+
Link,
18+
Avatar,
19+
Stack,
20+
List,
21+
ListItem,
22+
Stats,
23+
Tags,
24+
} from '@codesandbox/components';
25+
import { css } from '@styled-system/css';
26+
27+
import { BookmarkTemplateButton } from './BookmarkTemplateButton';
28+
29+
export const Summary = () => {
30+
const {
31+
state: {
32+
editor: { currentSandbox },
33+
},
34+
} = useOvermind();
35+
const {
36+
author,
37+
description,
38+
customTemplate,
39+
template,
40+
forkedFromSandbox,
41+
forkedTemplateSandbox,
42+
tags,
43+
team,
44+
} = currentSandbox;
45+
46+
const isForked = forkedFromSandbox || forkedTemplateSandbox;
47+
const { url: templateUrl } = getTemplateDefinition(template);
48+
49+
return (
50+
<>
51+
<Collapsible
52+
title={customTemplate ? 'Template Info' : 'Sandbox Info'}
53+
defaultOpen
54+
>
55+
<Element marginBottom={6}>
56+
<Stack as="section" direction="vertical" gap={2} paddingX={2}>
57+
<Stack justify="space-between" align="center">
58+
{customTemplate ? (
59+
<Stack gap={2} align="center">
60+
<TemplateIcon
61+
iconUrl={customTemplate.iconUrl}
62+
environment={template}
63+
/>
64+
<Text maxWidth={190}>{getSandboxName(currentSandbox)}</Text>
65+
</Stack>
66+
) : (
67+
<Text maxWidth={190}>{getSandboxName(currentSandbox)}</Text>
68+
)}
69+
</Stack>
70+
71+
<Text variant="muted">{description}</Text>
72+
73+
{tags.length ? (
74+
<Element marginTop={4}>
75+
<Tags tags={tags} />
76+
</Element>
77+
) : null}
78+
</Stack>
79+
</Element>
80+
81+
<Stack as="section" direction="vertical" gap={6} paddingX={2}>
82+
<Stats sandbox={currentSandbox} />
83+
{customTemplate && <BookmarkTemplateButton />}
84+
</Stack>
85+
86+
<Divider marginTop={8} marginBottom={4} />
87+
88+
<Stack as="section" direction="vertical" gap={4}>
89+
{author ? (
90+
<Link href={profileUrl(author.username)}>
91+
<Stack gap={2} align="center" paddingX={2}>
92+
<Avatar user={author} />
93+
<Stack direction="vertical">
94+
<Text variant={team ? 'body' : 'muted'} block>
95+
{author.username}
96+
</Text>
97+
{team && (
98+
<Text size={2} variant="muted">
99+
{team.name}
100+
</Text>
101+
)}
102+
</Stack>
103+
</Stack>
104+
</Link>
105+
) : null}
106+
107+
<List>
108+
{isForked ? (
109+
<ListItem justify="space-between">
110+
<Text>
111+
{forkedTemplateSandbox ? 'Template' : 'Forked From'}
112+
</Text>
113+
<Link
114+
variant="muted"
115+
href={sandboxUrl(forkedFromSandbox || forkedTemplateSandbox)}
116+
target="_blank"
117+
>
118+
{getSandboxName(forkedFromSandbox || forkedTemplateSandbox)}
119+
</Link>
120+
</ListItem>
121+
) : null}
122+
<ListItem justify="space-between">
123+
<Text>Environment</Text>
124+
<Link variant="muted" href={templateUrl} target="_blank">
125+
{template}
126+
</Link>
127+
</ListItem>
128+
</List>
129+
</Stack>
130+
</Collapsible>
131+
</>
132+
);
133+
};
134+
135+
const TemplateIcon = ({ iconUrl, environment }) => {
136+
const Icon = Icons[iconUrl] || getIcon(environment);
137+
return <Icon />;
138+
};
139+
140+
const Divider = props => (
141+
<Element
142+
as="hr"
143+
css={css({
144+
width: '100%',
145+
border: 'none',
146+
borderBottom: '1px solid',
147+
borderColor: 'sideBar.border',
148+
})}
149+
{...props}
150+
/>
151+
);

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
2+
23
import { Explorer } from '../Explorer';
3-
import { Summary } from '../ProjectInfo/Summary';
4+
import { Summary } from './Summary';
45

56
export const NotOwnedSandboxInfo = () => (
67
<>

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Description.tsx

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

0 commit comments

Comments
 (0)