Skip to content

Commit a271640

Browse files
OksamiesOksamies
committed
Add package uploading feature
1 parent 2cccf9e commit a271640

Some content is hidden

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

50 files changed

+2228
-34
lines changed

Diff for: ‎apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -103,26 +103,28 @@ export function Footer() {
103103
</li>
104104
<li>
105105
<NewLink
106-
primitiveType="link"
107-
href="/package/create/docs/"
106+
// primitiveType="link"
107+
// href="/package/create/docs/"
108+
primitiveType="cyberstormLink"
109+
linkId="PackageFormatDocs"
108110
csVariant="primary"
109111
>
110112
Package Format Docs
111113
</NewLink>
112114
</li>
113115
<li>
114116
<NewLink
115-
primitiveType="link"
116-
href="/tools/manifest-v1-validator/"
117+
primitiveType="cyberstormLink"
118+
linkId="ManifestValidator"
117119
csVariant="primary"
118120
>
119121
Manifest Validator
120122
</NewLink>
121123
</li>
122124
<li>
123125
<NewLink
124-
primitiveType="link"
125-
href="/tools/markdown-preview/"
126+
primitiveType="cyberstormLink"
127+
linkId="MarkdownPreview"
126128
csVariant="primary"
127129
>
128130
Markdown Preview

Diff for: ‎apps/cyberstorm-remix/app/commonComponents/Navigation/Navigation.tsx

+14-14
Original file line numberDiff line numberDiff line change
@@ -101,27 +101,27 @@ export function Navigation(props: {
101101
</NewDropDownItem>
102102
<NewDropDownItem>
103103
<NewLink
104-
primitiveType="link"
105104
rootClasses={"dropdown__item"}
106-
href="/package/create/docs/"
105+
primitiveType="cyberstormLink"
106+
linkId="PackageFormatDocs"
107107
>
108108
Package Format Docs
109109
</NewLink>
110110
</NewDropDownItem>
111111
<NewDropDownItem>
112112
<NewLink
113-
primitiveType="link"
113+
primitiveType="cyberstormLink"
114+
linkId="ManifestValidator"
114115
rootClasses={"dropdown__item"}
115-
href="/tools/manifest-v1-validator/"
116116
>
117117
Manifest Validator
118118
</NewLink>
119119
</NewDropDownItem>
120120
<NewDropDownItem>
121121
<NewLink
122-
primitiveType="link"
123122
rootClasses={"dropdown__item"}
124-
href="/tools/markdown-preview/"
123+
primitiveType="cyberstormLink"
124+
linkId="MarkdownPreview"
125125
>
126126
Markdown Preview
127127
</NewLink>
@@ -160,8 +160,8 @@ export function Navigation(props: {
160160
{currentUser?.username ? (
161161
<span className="navigation-header__profile-actions">
162162
<NewButton
163-
primitiveType="link"
164-
href={`${domain}/package/create/`}
163+
primitiveType="cyberstormLink"
164+
linkId="PackageUpload"
165165
csVariant="secondary"
166166
csModifiers={["ghost", "only-icon"]}
167167
tooltipText="Upload"
@@ -466,22 +466,22 @@ export function MobileNavigationMenu({ domain }: { domain: string }) {
466466
GitHub
467467
</NewLink>
468468
<NewLink
469-
primitiveType="link"
470-
href="/package/create/docs/"
469+
primitiveType="cyberstormLink"
470+
linkId="PackageFormatDocs"
471471
rootClasses="mobile-navigation__popover-item mobile-navigation__popover--thick"
472472
>
473473
Package Format Docs
474474
</NewLink>
475475
<NewLink
476-
primitiveType="link"
477-
href="/tools/markdown-preview/"
476+
primitiveType="cyberstormLink"
477+
linkId="MarkdownPreview"
478478
rootClasses="mobile-navigation__popover-item mobile-navigation__popover--thick"
479479
>
480480
Markdown Preview
481481
</NewLink>
482482
<NewLink
483-
primitiveType="link"
484-
href="/tools/manifest-v1-validator/"
483+
primitiveType="cyberstormLink"
484+
linkId="ManifestValidator"
485485
rootClasses="mobile-navigation__popover-item mobile-navigation__popover--thick"
486486
>
487487
Manifest Validator

Diff for: ‎apps/cyberstorm-remix/app/styles/layout.css

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
gap: var(--gap-sm);
2222
align-self: flex-start;
2323
justify-content: flex-start;
24+
max-width: 83.5rem;
2425
padding: var(--space-16);
2526
}
2627

Diff for: ‎apps/cyberstorm-remix/app/upload/Upload.css

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
@layer nimbus-layout {
2+
.upload {
3+
gap: var(--gap-xxxxxxxl);
4+
}
5+
6+
.upload__row {
7+
gap: 5rem;
8+
}
9+
10+
.upload__meta {
11+
display: flex;
12+
flex-direction: column;
13+
gap: var(--gap-xs);
14+
align-items: flex-start;
15+
align-self: stretch;
16+
width: 21rem;
17+
}
18+
19+
.upload__title {
20+
align-self: stretch;
21+
color: var(--color-text-primary);
22+
font-weight: var(--font-weight-bold);
23+
24+
font-size: var(--font-size-body-lg);
25+
line-height: var(--line-height-md);
26+
}
27+
28+
.upload__description {
29+
align-self: stretch;
30+
color: var(--color-text-tertiary);
31+
font-weight: var(--font-weight-medium);
32+
33+
font-size: var(--font-size-body-md);
34+
line-height: var(--line-height-md);
35+
}
36+
37+
.upload__content {
38+
display: flex;
39+
flex: 1 1 0;
40+
flex-direction: column;
41+
gap: var(--gap-md);
42+
align-items: flex-start;
43+
}
44+
45+
.upload__divider {
46+
display: flex;
47+
flex-direction: column;
48+
align-items: center;
49+
align-self: stretch;
50+
justify-content: center;
51+
height: 0.063rem;
52+
background-color: var(--border-default);
53+
}
54+
55+
.drag-n-drop {
56+
display: flex;
57+
flex: 1 0 0;
58+
flex-direction: column;
59+
gap: 0.75rem;
60+
align-items: center;
61+
align-self: stretch;
62+
justify-content: center;
63+
padding: 1.5rem 2rem;
64+
border: 2px dashed var(--color-surface-a9);
65+
66+
border-radius: var(--radius-md);
67+
background: var(--color-surface-a4);
68+
69+
cursor: pointer;
70+
}
71+
72+
.drag-n-drop__body {
73+
display: flex;
74+
flex-direction: column;
75+
gap: 0.5rem;
76+
align-items: center;
77+
justify-content: center;
78+
}
79+
80+
.drag-n-drop__icon {
81+
display: flex;
82+
flex-direction: column;
83+
flex-shrink: 0;
84+
justify-content: center;
85+
width: 2.25rem;
86+
height: 2.25rem;
87+
}
88+
89+
.drag-n-drop__main-text {
90+
color: var(--color-text-primary);
91+
font-weight: var(--font-weight-bold);
92+
93+
font-size: var(--font-size-body-lg);
94+
text-align: center;
95+
}
96+
97+
.drag-n-drop__sub-text {
98+
color: var(--color-text-tertiary);
99+
font-weight: var(--font-weight-medium);
100+
101+
font-size: var(--font-size-body-md);
102+
text-align: center;
103+
}
104+
105+
.upload__buttons {
106+
display: flex;
107+
flex-direction: row;
108+
gap: var(--gap-md);
109+
}
110+
111+
.upload__submit {
112+
align-self: stretch;
113+
}
114+
115+
/* Mobile breakpoint */
116+
@media (width <= 475px) {
117+
.upload__row {
118+
flex-direction: column;
119+
gap: var(--gap-xxxl);
120+
}
121+
122+
.upload__content {
123+
width: auto;
124+
}
125+
}
126+
127+
.upload-form {
128+
display: flex;
129+
flex-direction: column;
130+
gap: 10px;
131+
align-items: center;
132+
}
133+
134+
.input-base,
135+
.input-drag {
136+
display: flex;
137+
flex: 1 0 0;
138+
flex-direction: column;
139+
gap: 0.75rem;
140+
align-items: center;
141+
justify-content: center;
142+
padding: 1.5rem 2rem;
143+
border: 2px dashed var(--color-surface-a9);
144+
145+
border-radius: var(--radius-md);
146+
background: var(--color-surface-a4);
147+
}
148+
149+
.input-base {
150+
height: 40px;
151+
cursor: pointer;
152+
}
153+
154+
.input-drag {
155+
height: 200px;
156+
border: 4px solid #fff;
157+
}
158+
}

0 commit comments

Comments
 (0)