Skip to content

Commit

Permalink
Merge pull request #1279 from thunderstore-io/01-03-package_detail_pa…
Browse files Browse the repository at this point in the history
…ge_versions_tab

Package Detail page versions tab
  • Loading branch information
Oksamies authored Jan 8, 2025
2 parents d0b2c85 + 216ea18 commit 45a59d3
Show file tree
Hide file tree
Showing 22 changed files with 694 additions and 70 deletions.
2 changes: 2 additions & 0 deletions apps/cyberstorm-remix/app/Markdown.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,8 @@
font-family: var(--font-family-monospace);
font-style: normal;
line-height: 150%;
white-space: break-spaces;
overflow-wrap: break-word;
background: #0d0d21;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,6 @@
.nimbus-commoncomponents-listingdependency__image {
flex-shrink: 0;
width: 80px;

> svg {
width: 40px;
height: 40px;
color: var(--color-surface-a10);
}
}

.nimbus-commoncomponents-listingdependency__info {
Expand Down
1 change: 1 addition & 0 deletions apps/cyberstorm-remix/app/p/packageListing.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
flex-direction: column;
flex-grow: 1;
gap: var(--space-32);
min-width: 0;
}

.nimbus-packagelisting__sidebar {
Expand Down
14 changes: 7 additions & 7 deletions apps/cyberstorm-remix/app/p/tabs/Required/Required.css
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
.nimbus-packagelisting__tabs__required {
display: flex;
flex-direction: column;
gap: 1rem;
gap: var(--gap-md);
}

.nimbus-packagelisting__tabs__required__title {
display: flex;
flex-direction: column;
gap: 16px;
gap: var(--gap-md);
align-items: flex-start;
align-self: stretch;
padding-bottom: 24px;
padding-bottom: var(--space-24);
}

.nimbus-packagelisting__tabs__required__title__description {
color: var(--color-text-secondary);
font-weight: 400;
line-height: 150%;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-md);
}

.nimbus-packagelisting__tabs__required__body {
display: flex;
flex-direction: column;
gap: 2px;
gap: var(--gap-xxxs);
align-items: flex-start;
align-self: stretch;
padding-bottom: 32px;
padding-bottom: var(--space-32);
}
34 changes: 34 additions & 0 deletions apps/cyberstorm-remix/app/p/tabs/Versions/Versions.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.nimbus-packagelisting__tabs__versions {
display: flex;
flex-direction: column;
gap: 1rem;
}

.nimbus-packagelisting__tabs__versions__actionscell {
display: flex;
gap: 24px;
align-items: flex-start;
align-self: stretch;
justify-content: flex-end;
}

.nimbus-packagelisting__tabs__versions__columns__version {
color: var(--color-text-primary);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-body-md);
line-height: var(--line-height-md);
}

.nimbus-packagelisting__tabs__versions__columns__uploaddate {
color: var(--color-text-tertiary);
font-weight: var(--font-weight-regular);
font-size: var(--font-size-body-md);
line-height: var(--line-height-md);
}

.nimbus-packagelisting__tabs__versions__columns__downloads {
color: var(--color-text-tertiary);
font-weight: var(--font-weight-regular);
font-size: var(--font-size-body-md);
line-height: var(--line-height-md);
}
5 changes: 0 additions & 5 deletions apps/cyberstorm-remix/app/p/tabs/Versions/Versions.module.css

This file was deleted.

127 changes: 81 additions & 46 deletions apps/cyberstorm-remix/app/p/tabs/Versions/Versions.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons";
import { faDownload } from "@fortawesome/free-solid-svg-icons";
import { faBoltLightning } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import styles from "./Versions.module.css";
import { Table, Sort, Alert, Button } from "@thunderstore/cyberstorm";
import "./Versions.css";
import {
NewTableSort,
NewButton,
NewIcon,
NewTable,
NewTableRows,
NewTableLabels,
Heading,
NewAlert,
} from "@thunderstore/cyberstorm";
import { LoaderFunctionArgs } from "@remix-run/node";
import { getDapper } from "cyberstorm/dapper/sessionUtils";
import { ApiError } from "@thunderstore/thunderstore-api";
Expand Down Expand Up @@ -83,73 +92,99 @@ export default function Versions() {
return <div>{message}</div>;
}

const tableRows = versions.map((v) => [
const tableRows: NewTableRows = versions.map((v) => [
{ value: v.version_number, sortValue: v.version_number },
{
value: new Date(v.datetime_created).toUTCString(),
sortValue: v.datetime_created,
},
{ value: v.download_count.toLocaleString(), sortValue: v.download_count },
{ value: <DownloadLink {...v} />, sortValue: 0 },
{ value: <InstallLink {...v} />, sortValue: 0 },
{
value: (
<div className="nimbus-packagelisting__tabs__versions__actionscell">
<DownloadLink {...v} />
<InstallLink {...v} />
</div>
),
sortValue: 0,
},
]);

return (
<div className={styles.main}>
<div className="nimbus-packagelisting__tabs__versions">
<ModManagerBanner />
<Table
<NewTable
titleRowContent={
<Heading csSize="3" csLevel="3">
Versions
</Heading>
}
headers={columns}
rows={tableRows}
sortDirection={Sort.ASC}
variant="itemListSmall"
sortDirection={NewTableSort.ASC}
/>
</div>
);
}

const columns = [
{ value: "Version", disableSort: false },
{ value: "Upload date", disableSort: false },
{ value: "Downloads", disableSort: false },
{ value: "", disableSort: true },
{ value: "", disableSort: true },
const columns: NewTableLabels = [
{
value: "Version",
disableSort: false,
columnClasses: "nimbus-packagelisting__tabs__versions__columns__version",
},
{
value: "Upload date",
disableSort: false,
columnClasses: "nimbus-packagelisting__tabs__versions__columns__uploaddate",
},
{
value: "Downloads",
disableSort: false,
columnClasses: "nimbus-packagelisting__tabs__versions__columns__downloads",
},
{ value: "Actions", disableSort: true },
];

const ModManagerBanner = () => (
<Alert
content={
<span>
Please note that the install buttons only work if you have compatible
client software installed, such as the{" "}
<a
href="https://www.overwolf.com/app/Thunderstore-Thunderstore_Mod_Manager"
className={styles.alertLink}
>
Thunderstore Mod Manager.
</a>{" "}
Otherwise use the zip download links instead.
</span>
}
variant={"info"}
icon={<FontAwesomeIcon icon={faCircleExclamation} />}
/>
<NewAlert csVariant="info">
Please note that the install buttons only work if you have compatible client
software installed, such as the{" "}
<a
href="https://www.overwolf.com/app/Thunderstore-Thunderstore_Mod_Manager"
// className={styles.alertLink}
>
Thunderstore Mod Manager.
</a>{" "}
Otherwise use the zip download links instead.
</NewAlert>
);

const DownloadLink = (props: { download_url: string }) => (
<a href={props.download_url}>
<Button.Root plain paddingSize="large" colorScheme="transparentAccent">
<Button.ButtonLabel>Download</Button.ButtonLabel>
</Button.Root>
</a>
<NewButton
csVariant="secondary"
csModifiers={["ghost"]}
csSize="small"
primitiveType="link"
href={props.download_url}
>
<NewIcon noWrapper csMode="inline">
<FontAwesomeIcon icon={faDownload} />
</NewIcon>
Download
</NewButton>
);

const InstallLink = (props: { install_url: string }) => (
<a href={props.install_url}>
<Button.Root plain paddingSize="large" colorScheme="primary">
<Button.ButtonIcon>
<FontAwesomeIcon icon={faBoltLightning} />
</Button.ButtonIcon>
<Button.ButtonLabel>Install</Button.ButtonLabel>
</Button.Root>
</a>
<NewButton
csVariant="secondary"
csSize="small"
primitiveType="link"
href={props.install_url}
>
<NewIcon noWrapper csMode="inline">
<FontAwesomeIcon icon={faBoltLightning} />
</NewIcon>
Install
</NewButton>
);
14 changes: 14 additions & 0 deletions packages/cyberstorm-theme/src/components.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,14 @@ export {
type SelectModifiers,
SelectModifiersList,
} from "./components/Select/Select";
export {
type TableVariants,
TableVariantsList,
type TableSizes,
TableSizesList,
type TableModifiers,
TableModifiersList,
} from "./components/Table/Table";
export {
type TextInputVariants,
TextInputVariantsList,
Expand All @@ -75,6 +83,12 @@ export {
type TagModifiers,
TagModifiersList,
} from "./components/Tag/Tag";
export {
type AlertVariants,
AlertVariantsList,
type AlertSizes,
AlertSizesList,
} from "./components/Alert/Alert";
export {
type MetaItemVariants,
MetaItemVariantsList,
Expand Down
72 changes: 72 additions & 0 deletions packages/cyberstorm-theme/src/components/Alert/Alert.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
@layer theme-components {
/* SIZES */
.ts-alert:where(.ts-size--small) {
--alert-gap: var(--alert-sm-gap);
--alert-padding-block: var(--alert-sm-padding-block);
--alert-padding-inline: var(--alert-sm-padding-inline);
--alert-font-size: var(--alert-sm-font-size);
--alert-font-weight: var(--alert-sm-font-weight);
--alert-line-height: var(--alert-sm-line-height);
--alert-icon-width: var(--alert-sm-icon-width);
--alert-icon-height: var(--alert-sm-icon-height);
--alert-border-radius: var(--alert-sm-border-radius);
}

/* VARIANTS */
.ts-alert:where(.ts-variant--danger) {
--alert-background-color: var(--alert-danger-bg-color--default);
--alert-border-color: var(--alert-danger-border-color--default);
--alert-icon-color: var(--alert-danger-icon-color--default);
--alert-color: var(--alert-danger-text-color--default);
}

.ts-alert:where(.ts-variant--info) {
--alert-background-color: var(--alert-info-bg-color--default);
--alert-border-color: var(--alert-info-border-color--default);
--alert-icon-color: var(--alert-info-icon-color--default);
--alert-color: var(--alert-info-text-color--default);
}

.ts-alert:where(.ts-variant--success) {
--alert-background-color: var(--alert-success-bg-color--default);
--alert-border-color: var(--alert-success-border-color--default);
--alert-icon-color: var(--alert-success-icon-color--default);
--alert-color: var(--alert-success-text-color--default);
}

.ts-alert:where(.ts-variant--warning) {
--alert-background-color: var(--alert-warning-bg-color--default);
--alert-border-color: var(--alert-warning-border-color--default);
--alert-icon-color: var(--alert-warning-icon-color--default);
--alert-color: var(--alert-warning-text-color--default);
}

/* TOKENS */
:root {
--alert-danger-bg-color--default: var(--color-accent-red-2);
--alert-danger-border-color--default: var(--color-accent-red-7);
--alert-danger-icon-color--default: var(--color-accent-red-7);
--alert-danger-text-color--default: var(--color-accent-red-11);
--alert-info-bg-color--default: var(--color-accent-blue-2);
--alert-info-border-color--default: var(--color-accent-blue-7);
--alert-info-icon-color--default: var(--color-accent-blue-7);
--alert-info-text-color--default: var(--color-accent-blue-11);
--alert-success-bg-color--default: var(--color-accent-green-2);
--alert-success-border-color--default: var(--color-accent-green-7);
--alert-success-icon-color--default: var(--color-accent-green-7);
--alert-success-text-color--default: var(--color-accent-green-11);
--alert-warning-bg-color--default: var(--color-accent-yellow-2);
--alert-warning-border-color--default: var(--color-accent-yellow-7);
--alert-warning-icon-color--default: var(--color-accent-yellow-7);
--alert-warning-text-color--default: var(--color-accent-yellow-11);
--alert-sm-gap: var(--space-16);
--alert-sm-padding-block: var(--space-16);
--alert-sm-padding-inline: var(--space-24);
--alert-sm-font-size: var(--font-size-body-md);
--alert-sm-font-weight: var(--font-weight-regular);
--alert-sm-line-height: var(--line-height-md);
--alert-sm-icon-width: 1.125rem;
--alert-sm-icon-height: 1.375rem;
--alert-sm-border-radius: var(--radius-sm);
}
}
12 changes: 12 additions & 0 deletions packages/cyberstorm-theme/src/components/Alert/Alert.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
// Variants
export const AlertVariantsList = [
"info",
"success",
"warning",
"danger",
] as const;
export type AlertVariants = "info" | "success" | "warning" | "danger";

// Sizes
export const AlertSizesList = ["small"] as const;
export type AlertSizes = "small";
Loading

0 comments on commit 45a59d3

Please sign in to comment.