Skip to content

Commit eb4c21d

Browse files
siddharthkpSaraVieira
siddharthkp
authored and
SaraVieira
committed
Prototype: Sandbox Live + Github (codesandbox#3328)
* add live example * use Text block * add github screens
1 parent 76f06b0 commit eb4c21d

File tree

9 files changed

+394
-1814
lines changed

9 files changed

+394
-1814
lines changed

‎packages/common/src/themes/codesandbox-black.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { colors as tokens } from '../design-language/colors';
1212
const colors = {
1313
contrastBorder: tokens.grays[500],
1414
contrastActiveBorder: null,
15-
errorForeground: tokens.reds[500],
15+
errorForeground: tokens.reds[300],
1616
focusBorder: tokens.grays[500],
1717
foreground: tokens.grays[200],
1818
activityBar: {

‎packages/components/src/components/Avatar/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const AvatarImage = styled.img(
1616
borderRadius: 'small',
1717
border: '1px solid',
1818
borderColor: 'avatar.border',
19-
backgroundColor: 'avatar.border', // fallback for loading image
19+
backgroundColor: 'avatar.border', // fallback for loading image,
2020
})
2121
);
2222

‎packages/components/src/components/Collapsible/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Element } from '../Element';
55
import { Text } from '../Text';
66
import { SidebarRow } from '../SidebarRow';
77

8-
export const Section = styled(Element).attrs({ as: 'section' })(
8+
const Section = styled(Element).attrs({ as: 'section' })(
99
css({
1010
fontSize: 3,
1111
})
@@ -30,7 +30,7 @@ export const Header = styled(SidebarRow).attrs({ gap: 2 })(
3030
);
3131

3232
// temporary: replace with <Icon name="triangle/toggle">
33-
export const Icon = styled.svg<{
33+
const Icon = styled.svg<{
3434
open?: boolean;
3535
}>(props =>
3636
css({

‎packages/components/src/components/Grid/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ export const Grid = styled(Element)<{ columnGap?: number; rowGap?: number }>(
1111
display: 'grid',
1212
gridTemplateColumns: 'repeat(12, 1fr)', // always 12 columns
1313
gridColumnGap:
14-
(typeof columnGap !== 'undefined' ? columnGap : lineHeight * 2) + 'rem',
15-
gridRowGap: (typeof rowGap !== 'undefined' ? rowGap : lineHeight) + 'rem',
14+
typeof columnGap !== 'undefined' ? columnGap : lineHeight * 2 + 'rem',
15+
gridRowGap: typeof rowGap !== 'undefined' ? rowGap : lineHeight + 'rem',
1616
})
1717
);
1818

‎packages/components/src/components/Integration/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Element } from '../Element';
55
import { Text } from '../Text';
66
import { Stack } from '../Stack';
77

8-
export const Header = styled(Stack)(
8+
const Header = styled(Stack)(
99
css({
1010
height: 6,
1111
paddingX: 4,
@@ -19,7 +19,7 @@ export const Header = styled(Stack)(
1919
})
2020
);
2121

22-
export const Content = styled(Element)(
22+
const Content = styled(Element)(
2323
css({
2424
display: 'grid',
2525
gridTemplateColumns: '1fr 50px',

‎packages/components/src/examples/sandbox-github.stories.tsx‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import React from 'react';
2+
import {
3+
Element,
4+
Button,
5+
Collapsible,
6+
Input,
7+
List,
8+
ListAction,
9+
Textarea,
10+
Stack,
11+
Text,
12+
} from '../index';
13+
14+
import { IntegrationGitHub } from '../components/Integration/index.stories';
15+
16+
export default {
17+
title: 'examples/SandboxGithub',
18+
};
19+
20+
const Sidebar = props => (
21+
<Element
22+
as="aside"
23+
css={{
24+
width: '200px',
25+
height: '100vh',
26+
borderRight: '1px solid',
27+
borderColor: 'sideBar.border',
28+
position: 'relative', // for absolute position delete button
29+
}}
30+
{...props}
31+
/>
32+
);
33+
34+
const GitHubIcon = (
35+
<svg
36+
width="16"
37+
height="16"
38+
viewBox="0 0 16 16"
39+
fill="none"
40+
xmlns="http://www.w3.org/2000/svg"
41+
>
42+
<path
43+
d="M14.9269 4.08427C14.2115 2.82782 13.2411 1.83308 12.0155 1.09983C10.7897 0.366548 9.45149 0 7.99993 0C6.54855 0 5.20991 0.36666 3.98437 1.09983C2.75864 1.83304 1.78831 2.82782 1.07293 4.08427C0.357655 5.34069 0 6.71272 0 8.2003C0 9.98723 0.50859 11.5941 1.52602 13.0213C2.54335 14.4486 3.85758 15.4362 5.46862 15.9843C5.65615 16.02 5.79497 15.9949 5.88523 15.9096C5.97553 15.8243 6.02062 15.7174 6.02062 15.5894C6.02062 15.5681 6.01884 15.3759 6.01537 15.0128C6.01179 14.6497 6.01012 14.333 6.01012 14.0627L5.77052 14.1052C5.61776 14.1338 5.42505 14.146 5.19239 14.1426C4.95984 14.1392 4.71843 14.1142 4.46848 14.0678C4.21841 14.0218 3.98583 13.915 3.77053 13.7477C3.55535 13.5804 3.40259 13.3614 3.31229 13.0911L3.20813 12.8454C3.1387 12.6818 3.02939 12.5001 2.88006 12.3009C2.73073 12.1015 2.57973 11.9664 2.42697 11.8952L2.35403 11.8417C2.30544 11.8061 2.26034 11.7632 2.21864 11.7135C2.17698 11.6637 2.14578 11.6139 2.12495 11.564C2.10408 11.514 2.12137 11.4731 2.17701 11.441C2.23265 11.4088 2.3332 11.3932 2.4791 11.3932L2.68735 11.4251C2.82625 11.4537 2.99805 11.5389 3.20298 11.6814C3.40781 11.8237 3.57618 12.0088 3.70814 12.2364C3.86795 12.5284 4.06047 12.7508 4.28627 12.9039C4.51189 13.057 4.73937 13.1334 4.96849 13.1334C5.19761 13.1334 5.3955 13.1156 5.56223 13.0802C5.72879 13.0446 5.88505 12.991 6.03095 12.9199C6.09344 12.4428 6.26361 12.0762 6.54129 11.82C6.14551 11.7774 5.78968 11.7132 5.47361 11.6278C5.15773 11.5423 4.83131 11.4035 4.49456 11.2111C4.15763 11.019 3.87812 10.7805 3.65597 10.4959C3.43378 10.2111 3.25144 9.83726 3.10918 9.37467C2.96686 8.91189 2.89568 8.37806 2.89568 7.77302C2.89568 6.91153 3.17004 6.17843 3.71865 5.57332C3.46166 4.92564 3.48592 4.19958 3.79151 3.3952C3.9929 3.33106 4.29156 3.37919 4.68734 3.5393C5.0832 3.69948 5.37303 3.83669 5.55713 3.95046C5.74123 4.06419 5.88873 4.16057 5.99986 4.23873C6.64582 4.05372 7.31242 3.96119 7.99985 3.96119C8.68729 3.96119 9.35404 4.05372 10 4.23873L10.3958 3.98259C10.6665 3.81167 10.9862 3.65505 11.354 3.51267C11.722 3.37036 12.0035 3.33117 12.198 3.39531C12.5104 4.19973 12.5382 4.92575 12.2812 5.57343C12.8297 6.17855 13.1042 6.91183 13.1042 7.77313C13.1042 8.37817 13.0328 8.91369 12.8907 9.38002C12.7484 9.84642 12.5645 10.2199 12.3388 10.5012C12.113 10.7825 11.8317 11.0192 11.4949 11.2113C11.1581 11.4035 10.8316 11.5422 10.5157 11.6277C10.1997 11.7132 9.84384 11.7775 9.44806 11.8202C9.80903 12.1404 9.98956 12.6458 9.98956 13.3363V15.5891C9.98956 15.7171 10.033 15.8239 10.1199 15.9093C10.2067 15.9946 10.3437 16.0197 10.5313 15.9839C12.1425 15.4359 13.4568 14.4483 14.474 13.021C15.4912 11.5938 16 9.98693 16 8.2C15.9996 6.7126 15.6418 5.34069 14.9269 4.08427Z"
44+
fill="white"
45+
/>
46+
</svg>
47+
);
48+
49+
const addedIcon = (
50+
<svg
51+
width="16"
52+
height="16"
53+
viewBox="0 0 16 16"
54+
fill="none"
55+
xmlns="http://www.w3.org/2000/svg"
56+
>
57+
<path
58+
fillRule="evenodd"
59+
clipRule="evenodd"
60+
d="M2 1H14C14.5523 1 15 1.44772 15 2V14C15 14.5523 14.5523 15 14 15H2C1.44772 15 1 14.5523 1 14V2C1 1.44772 1.44772 1 2 1ZM0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM9 12H7V9H4V7H7V4H9V7H12V9H9V12Z"
61+
fill="#30D158"
62+
/>
63+
</svg>
64+
);
65+
66+
const deletedIcon = (
67+
<svg
68+
width="16"
69+
height="16"
70+
viewBox="0 0 16 16"
71+
fill="none"
72+
xmlns="http://www.w3.org/2000/svg"
73+
>
74+
<path
75+
fillRule="evenodd"
76+
clipRule="evenodd"
77+
d="M2 1H14C14.5523 1 15 1.44772 15 2V14C15 14.5523 14.5523 15 14 15H2C1.44772 15 1 14.5523 1 14V2C1 1.44772 1.44772 1 2 1ZM0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM12 7H4V9H12V7Z"
78+
fill="#FF453A"
79+
/>
80+
</svg>
81+
);
82+
83+
const changedIcon = (
84+
<svg
85+
width="16"
86+
height="16"
87+
viewBox="0 0 16 16"
88+
fill="none"
89+
xmlns="http://www.w3.org/2000/svg"
90+
>
91+
<path
92+
fillRule="evenodd"
93+
clipRule="evenodd"
94+
d="M2 1H14C14.5523 1 15 1.44772 15 2V14C15 14.5523 14.5523 15 14 15H2C1.44772 15 1 14.5523 1 14V2C1 1.44772 1.44772 1 2 1ZM0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z"
95+
fill="#F69935"
96+
/>
97+
</svg>
98+
);
99+
100+
export const NotLoggedIn = () => (
101+
<Sidebar>
102+
<Collapsible title="Github" defaultOpen>
103+
<Element css={{ paddingX: 2 }}>
104+
<Text size={2} variant="muted" block marginBottom={4}>
105+
You can create commits and open pull request if you add GitHub to your
106+
intergrations.
107+
</Text>
108+
<IntegrationGitHub />
109+
</Element>
110+
</Collapsible>
111+
</Sidebar>
112+
);
113+
114+
export const NotConnected = () => (
115+
<Sidebar>
116+
<Collapsible title="Github" defaultOpen>
117+
<Element css={{ paddingX: 2 }}>
118+
<Text size={3} weight="semibold" block marginBottom={4}>
119+
Export Sandbox to GitHub
120+
</Text>
121+
122+
<Stack as="form" direction="vertical" gap={2}>
123+
<Input type="text" placeholder="Enter repository url" />
124+
<Button>Create Repository</Button>
125+
</Stack>
126+
</Element>
127+
</Collapsible>
128+
</Sidebar>
129+
);
130+
131+
export const Connected = () => (
132+
<Sidebar>
133+
<Collapsible title="Github" defaultOpen>
134+
<Element css={{ paddingX: 2 }}>
135+
<Stack gap={2} marginBottom={6}>
136+
{GitHubIcon}
137+
<Text size={2}>codesandbox/components</Text>
138+
</Stack>
139+
140+
<Element>
141+
<Text variant="muted">There are no changes</Text>
142+
</Element>
143+
</Element>
144+
</Collapsible>
145+
<Collapsible title="Export to GitHub" defaultOpen>
146+
<Element css={{ paddingX: 2 }}>
147+
<Stack as="form" direction="vertical" gap={2}>
148+
<Input type="text" placeholder="Enter repository url" />
149+
<Button variant="secondary">Create Repository</Button>
150+
</Stack>
151+
</Element>
152+
</Collapsible>
153+
</Sidebar>
154+
);
155+
156+
export const Changes = () => (
157+
<Sidebar>
158+
<Collapsible title="Github" defaultOpen>
159+
<Element css={{ paddingX: 2 }}>
160+
<Stack gap={2} marginBottom={6}>
161+
{GitHubIcon}
162+
<Text size={2}>codesandbox/components</Text>
163+
</Stack>
164+
</Element>
165+
166+
<Element>
167+
<Text size={3} block marginBottom={2} marginX={2}>
168+
Changes (4)
169+
</Text>
170+
<List marginBottom={6}>
171+
<ListAction gap={2}>
172+
{addedIcon} <Text variant="muted">src/index.js</Text>
173+
</ListAction>
174+
<ListAction gap={2}>
175+
{deletedIcon} <Text variant="muted">src/style.css</Text>
176+
</ListAction>
177+
<ListAction gap={2}>
178+
{changedIcon} <Text variant="muted">package.json</Text>
179+
</ListAction>
180+
<ListAction gap={2}>
181+
{changedIcon} <Text variant="muted">dist.js</Text>
182+
</ListAction>
183+
</List>
184+
185+
<Text size={3} block marginBottom={2} marginX={2}>
186+
Commit Message
187+
</Text>
188+
<Stack as="form" direction="vertical" gap={1} marginX={2}>
189+
<Input placeholder="Subject" />
190+
<Textarea maxLength={280} placeholder="Description" />
191+
<Button variant="secondary">Open Pull Request</Button>
192+
</Stack>
193+
</Element>
194+
</Collapsible>
195+
<Collapsible title="Export to GitHub" defaultOpen>
196+
<Element css={{ paddingX: 2 }}>
197+
<Stack as="form" direction="vertical" gap={2}>
198+
<Input type="text" placeholder="Enter repository url" />
199+
<Button variant="secondary">Create Repository</Button>
200+
</Stack>
201+
</Element>
202+
</Collapsible>
203+
</Sidebar>
204+
);

0 commit comments

Comments
 (0)