/community page refactor

thunderstore-io · Nov 5, 2024 · 038fd49 · 038fd49
1 parent d7d644f
commit 038fd49
Show file tree

Hide file tree

Showing 65 changed files with 317 additions and 498 deletions.
diff --git a/apps/cyberstorm-remix/app/Error.module.css b/apps/cyberstorm-remix/app/Error.module.css
@@ -10,7 +10,7 @@
 }
 
 .description {
-  color: var(--color-text--accent);
+  color: var(--color-text-accent);
   font-weight: var(--font-weight-semibold);
   line-height: 1;
 }

diff --git a/apps/cyberstorm-remix/app/c/Community.css b/apps/cyberstorm-remix/app/c/Community.css
@@ -0,0 +1,28 @@
+@layer project-layout {
+  .project-community__metaitem {
+    display: flex;
+    gap: var(--gap-xs);
+    align-items: center;
+    color: var(--Meta-item-text-color--default, #c6c3ff);
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-md);
+    line-height: var(--line-height-lg);
+
+    & > svg {
+      inline-size: var(--space-16);
+    }
+  }
+
+  .project-community__metalink {
+    display: flex;
+    gap: var(--gap-xs);
+    align-items: center;
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-md);
+    line-height: var(--line-height-lg);
+
+    & > svg {
+      inline-size: var(--space-16);
+    }
+  }
+}
diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx
@@ -1,14 +1,13 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import {
-  BreadCrumbs,
-  Button,
-  CollapsibleText,
-  CyberstormLink,
-  ImageWithFallback,
-  MetaItem,
-  Title,
+  Heading,
+  Image,
+  NewBreadCrumbs,
+  NewIcon,
+  NewLink,
 } from "@thunderstore/cyberstorm";
+import "./Community.css";
 import styles from "./CommunityCard.module.css";
 import { formatInteger } from "@thunderstore/cyberstorm/src/utils/utils";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
@@ -21,6 +20,8 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { ApiError } from "@thunderstore/thunderstore-api";
+import { CollapsibleText } from "~/commonComponents/CollapsibleText/CollapsibleText";
+import { PackageOrderOptions } from "~/commonComponents/PackageSearch/PackageOrder";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -34,20 +35,15 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     try {
       const dapper = await getDapper();
       const searchParams = new URL(request.url).searchParams;
-      const order = searchParams.get("order");
+      const ordering =
+        searchParams.get("ordering") ?? PackageOrderOptions.Updated;
       const page = searchParams.get("page");
       const search = searchParams.get("search");
       const includedCategories = searchParams.get("includedCategories");
       const excludedCategories = searchParams.get("excludedCategories");
       const section = searchParams.get("section");
       const nsfw = searchParams.get("nsfw");
       const deprecated = searchParams.get("deprecated");
-      const created_recent = searchParams.get("created_recent");
-      const updated_recent = searchParams.get("updated_recent");
-      const created_after = searchParams.get("created_after");
-      const created_before = searchParams.get("created_before");
-      const updated_after = searchParams.get("updated_after");
-      const updated_before = searchParams.get("updated_before");
       return {
         community: await dapper.getCommunity(params.communityId),
         filters: await dapper.getCommunityFilters(params.communityId),
@@ -56,20 +52,14 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
             kind: "community",
             communityId: params.communityId,
           },
-          order ?? "",
+          ordering ?? "",
           page === null ? undefined : Number(page),
           search ?? "",
           includedCategories?.split(",") ?? undefined,
           excludedCategories?.split(",") ?? undefined,
           section ?? "",
           nsfw === "true" ? true : false,
-          deprecated === "true" ? true : false,
-          created_recent ?? "",
-          updated_recent ?? "",
-          created_after ?? "",
-          created_before ?? "",
-          updated_after ?? "",
-          updated_before ?? ""
+          deprecated === "true" ? true : false
         ),
       };
     } catch (error) {
@@ -89,20 +79,15 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
     try {
       const dapper = await getDapper(true);
       const searchParams = new URL(request.url).searchParams;
-      const order = searchParams.get("order");
+      const ordering =
+        searchParams.get("ordering") ?? PackageOrderOptions.Updated;
       const page = searchParams.get("page");
       const search = searchParams.get("search");
       const includedCategories = searchParams.get("includedCategories");
       const excludedCategories = searchParams.get("excludedCategories");
       const section = searchParams.get("section");
       const nsfw = searchParams.get("nsfw");
       const deprecated = searchParams.get("deprecated");
-      const created_recent = searchParams.get("created_recent");
-      const updated_recent = searchParams.get("updated_recent");
-      const created_after = searchParams.get("created_after");
-      const created_before = searchParams.get("created_before");
-      const updated_after = searchParams.get("updated_after");
-      const updated_before = searchParams.get("updated_before");
       return {
         community: await dapper.getCommunity(params.communityId),
         filters: await dapper.getCommunityFilters(params.communityId),
@@ -111,20 +96,14 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
             kind: "community",
             communityId: params.communityId,
           },
-          order ?? "",
+          ordering ?? "",
           page === null ? undefined : Number(page),
           search ?? "",
           includedCategories?.split(",") ?? undefined,
           excludedCategories?.split(",") ?? undefined,
           section ?? "",
           nsfw === "true" ? true : false,
-          deprecated === "true" ? true : false,
-          created_recent ?? "",
-          updated_recent ?? "",
-          created_after ?? "",
-          created_before ?? "",
-          updated_after ?? "",
-          updated_before ?? ""
+          deprecated === "true" ? true : false
         ),
       };
     } catch (error) {
@@ -154,59 +133,70 @@ export default function Community() {
           }}
         />
       ) : null}
-      <BreadCrumbs>
-        <CyberstormLink linkId="Communities">Communities</CyberstormLink>
-        <CyberstormLink linkId="Community" community={community.identifier}>
+      <NewBreadCrumbs rootClasses="project-root__breadcrumbs">
+        <NewLink
+          primitiveType="cyberstormLink"
+          linkId="Communities"
+          csVariant="cyber"
+        >
+          Communities
+        </NewLink>
+        <NewLink
+          primitiveType="cyberstormLink"
+          linkId="Community"
+          community={community.identifier}
+        >
           {community.name}
-        </CyberstormLink>
-      </BreadCrumbs>
+        </NewLink>
+      </NewBreadCrumbs>
       <header className="project-root__page-header">
         <div className={styles.root}>
           <div className={styles.image}>
-            <ImageWithFallback
-              src={community.cover_image_url}
-              type="community"
-            />
+            <Image src={community.cover_image_url} cardType="community" />
           </div>
           <div className={styles.info}>
-            <Title text={community.name} />
+            <Heading csLevel="1" csSize="2" csVariant="primary" mode="display">
+              {community.name}
+            </Heading>
             {community.description ? (
               <CollapsibleText text={community.description} maxLength={85} />
             ) : null}
             <div className={styles.meta}>
               {[
-                <MetaItem
+                <div
+                  className="project-community__metaitem"
                   key="meta-packages"
-                  label={`${formatInteger(
-                    community.total_package_count
-                  )} packages`}
-                  icon={<FontAwesomeIcon icon={faBoxOpen} />}
-                  colorScheme="accent"
-                  size="bold_large"
-                />,
-                <MetaItem
+                >
+                  <NewIcon csMode="inline" noWrapper>
+                    <FontAwesomeIcon icon={faBoxOpen} />
+                  </NewIcon>
+                  {formatInteger(community.total_package_count)} packages
+                </div>,
+                <div
+                  className="project-community__metaitem"
                   key="meta-downloads"
-                  label={`${formatInteger(
-                    community.total_download_count
-                  )} downloads`}
-                  icon={<FontAwesomeIcon icon={faDownload} />}
-                  colorScheme="accent"
-                  size="bold_large"
-                />,
+                >
+                  <NewIcon csMode="inline" noWrapper>
+                    <FontAwesomeIcon icon={faDownload} />
+                  </NewIcon>
+                  {formatInteger(community.total_download_count)} downloads
+                </div>,
                 community.discord_url ? (
-                  <a key="meta-link" href="{community.discord_url}">
-                    <Button.Root colorScheme="transparentPrimary">
-                      <Button.ButtonIcon>
-                        <FontAwesomeIcon icon={faDiscord} />
-                      </Button.ButtonIcon>
-                      <Button.ButtonLabel>
-                        Join our community
-                      </Button.ButtonLabel>
-                      <Button.ButtonIcon>
-                        <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-                      </Button.ButtonIcon>
-                    </Button.Root>
-                  </a>
+                  <NewLink
+                    primitiveType="link"
+                    href={community.discord_url}
+                    key="meta-link"
+                    csVariant="cyber"
+                    rootClasses="project-community__metalink"
+                  >
+                    <NewIcon csMode="inline" noWrapper>
+                      <FontAwesomeIcon icon={faDiscord} />
+                    </NewIcon>
+                    Join our community
+                    <NewIcon csMode="inline" noWrapper>
+                      <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+                    </NewIcon>
+                  </NewLink>
                 ) : null,
               ]}
             </div>

diff --git a/...ollapsibleText/CollapsibleText.module.css → ...ollapsibleText/CollapsibleText.module.css b/...ollapsibleText/CollapsibleText.module.css → ...ollapsibleText/CollapsibleText.module.css
@@ -4,11 +4,15 @@
 
 .text {
   overflow: hidden;
-  color: var(--color-text--secondary);
-  font-size: var(--font-size-body-xxxxl);
-  line-height: var(--line-height--l);
-  white-space: pre-wrap;
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-body-lg);
+  line-height: var(--line-height-md);
+  white-space: nowrap;
   text-overflow: ellipsis;
+  text-shadow: 0 1px 1px #0d0d21;
+
+  /* white-space: pre-wrap; */
 }
 
 .opened {
@@ -23,9 +27,9 @@
 }
 
 .show {
-  color: var(--color-text--accent);
+  color: var(--color-text-accent);
   font-weight: var(--font-weight-bold);
-  font-size: 0.875rem;
+  font-size: var(--font-size-body-md);
   line-height: normal;
   background-color: transparent;
 }
diff --git a/...nents/CollapsibleText/CollapsibleText.tsx → ...nents/CollapsibleText/CollapsibleText.tsx b/...nents/CollapsibleText/CollapsibleText.tsx → ...nents/CollapsibleText/CollapsibleText.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { classnames } from "../../utils/utils";
+import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 import styles from "./CollapsibleText.module.css";
 import { ReactElement, useState } from "react";
 
@@ -9,9 +9,6 @@ export interface CollapsibleTextProps {
   meta?: ReactElement[];
 }
 
-/**
- * Cyberstorm CollapsibleText
- */
 export function CollapsibleText(props: CollapsibleTextProps) {
   const { text = "", maxLength = 80 } = props;
 

diff --git a/...cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx b/...cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx
@@ -4,7 +4,7 @@ import { Dispatch, SetStateAction } from "react";
 
 import styles from "./CategoryTagCloud.module.css";
 import { CategorySelection, CATEGORY_STATES } from "../types";
-import { Button } from "@thunderstore/cyberstorm";
+import { NewButton, NewIcon } from "@thunderstore/cyberstorm";
 
 const OFF = CATEGORY_STATES[0];
 
@@ -35,26 +35,30 @@ export const CategoryTagCloud = (props: Props) => {
   return (
     <div className={styles.root}>
       {visible.map((c) => (
-        <Button.Root
+        <NewButton
           key={c.slug}
           onClick={() => clearCategory(c.id)}
-          colorScheme={c.selection === "exclude" ? "danger" : "default"}
-          paddingSize="small"
-          style={{ gap: "0.5rem" }}
+          csVariant={c.selection === "exclude" ? "danger" : "primary"}
+          csSize="xsmall"
+          csModifiers={c.selection === "exclude" ? ["dimmed"] : undefined}
         >
-          <Button.ButtonLabel>{c.name}</Button.ButtonLabel>
-          <Button.ButtonIcon>
+          {c.name}
+          <NewIcon csMode="inline" noWrapper>
             <FontAwesomeIcon icon={faXmark} className={styles.icon} />
-          </Button.ButtonIcon>
-        </Button.Root>
+          </NewIcon>
+        </NewButton>
       ))}
-      <Button.Root
+      <NewButton
         onClick={clearAll}
-        colorScheme="transparentTertiary"
-        paddingSize="small"
+        csVariant="secondary"
+        csSize="xsmall"
+        csModifiers={["ghost"]}
       >
-        <Button.ButtonLabel>Clear all</Button.ButtonLabel>
-      </Button.Root>
+        Clear all
+        <NewIcon csMode="inline" noWrapper>
+          <FontAwesomeIcon icon={faXmark} className={styles.icon} />
+        </NewIcon>
+      </NewButton>
     </div>
   );
 };

diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CategoryMenu.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CategoryMenu.tsx
@@ -5,7 +5,7 @@ import { Dispatch, SetStateAction } from "react";
 
 import styles from "./FilterMenu.module.css";
 import { CategorySelection, CATEGORY_STATES as STATES } from "../types";
-import { Icon } from "@thunderstore/cyberstorm";
+import { NewIcon } from "@thunderstore/cyberstorm";
 import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 
 interface Props {
@@ -40,12 +40,12 @@ export const CategoryMenu = (props: Props) => {
                 className={styles.checkbox}
               >
                 <Checkbox.Indicator>
-                  <Icon>
+                  <NewIcon csMode="inline" noWrapper>
                     <FontAwesomeIcon
                       icon={c.selection === "include" ? faCheck : faXmark}
                       className={styles.icon}
                     />
-                  </Icon>
+                  </NewIcon>
                 </Checkbox.Indicator>
               </Checkbox.Root>
               {c.name}