/community page refactor

thunderstore-io · Nov 4, 2024 · e64c9a0 · e64c9a0
1 parent d7d644f
commit e64c9a0
Show file tree

Hide file tree

Showing 20 changed files with 246 additions and 333 deletions.
diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx
@@ -1,13 +1,11 @@
 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 styles from "./CommunityCard.module.css";
 import { formatInteger } from "@thunderstore/cyberstorm/src/utils/utils";
@@ -21,6 +19,9 @@ 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";
+import { PackageRecentOptions } from "~/commonComponents/PackageSearch/PackageRecent";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -34,20 +35,19 @@ 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");
+      const created_recent =
+        searchParams.get("created_recent") ?? PackageRecentOptions.AllTime;
+      const updated_recent =
+        searchParams.get("updated_recent") ?? PackageRecentOptions.AllTime;
       return {
         community: await dapper.getCommunity(params.communityId),
         filters: await dapper.getCommunityFilters(params.communityId),
@@ -56,7 +56,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
             kind: "community",
             communityId: params.communityId,
           },
-          order ?? "",
+          ordering ?? "",
           page === null ? undefined : Number(page),
           search ?? "",
           includedCategories?.split(",") ?? undefined,
@@ -65,11 +65,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
           nsfw === "true" ? true : false,
           deprecated === "true" ? true : false,
           created_recent ?? "",
-          updated_recent ?? "",
-          created_after ?? "",
-          created_before ?? "",
-          updated_after ?? "",
-          updated_before ?? ""
+          updated_recent ?? ""
         ),
       };
     } catch (error) {
@@ -89,20 +85,19 @@ 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");
+      const created_recent =
+        searchParams.get("created_recent") ?? PackageRecentOptions.AllTime;
+      const updated_recent =
+        searchParams.get("updated_recent") ?? PackageRecentOptions.AllTime;
       return {
         community: await dapper.getCommunity(params.communityId),
         filters: await dapper.getCommunityFilters(params.communityId),
@@ -111,7 +106,7 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
             kind: "community",
             communityId: params.communityId,
           },
-          order ?? "",
+          ordering ?? "",
           page === null ? undefined : Number(page),
           search ?? "",
           includedCategories?.split(",") ?? undefined,
@@ -120,11 +115,7 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
           nsfw === "true" ? true : false,
           deprecated === "true" ? true : false,
           created_recent ?? "",
-          updated_recent ?? "",
-          created_after ?? "",
-          created_before ?? "",
-          updated_after ?? "",
-          updated_before ?? ""
+          updated_recent ?? ""
         ),
       };
     } catch (error) {
@@ -154,59 +145,64 @@ 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">
+          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"
+                  >
+                    <NewIcon>
+                      <FontAwesomeIcon icon={faDiscord} />
+                    </NewIcon>
+                    Join our community
+                    <NewIcon>
+                      <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
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}

diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from "react";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./CollapsibleMenu.module.css";
-import { Icon } from "@thunderstore/cyberstorm";
+import { NewIcon } from "@thunderstore/cyberstorm";
 
 interface Props extends PropsWithChildren {
   headerTitle: string;
@@ -19,9 +19,9 @@ export const CollapsibleMenu = (props: Props) => {
     <details className={styles.root} open={defaultOpen}>
       <summary className={styles.header}>
         {headerTitle}
-        <Icon inline>
+        <NewIcon csMode="inline" noWrapper>
           <FontAwesomeIcon icon={faCaretDown} />
-        </Icon>
+        </NewIcon>
       </summary>
       {children}
     </details>

diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/OthersMenu.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/OthersMenu.tsx
@@ -4,7 +4,7 @@ import * as Checkbox from "@radix-ui/react-checkbox";
 import { Dispatch, SetStateAction } from "react";
 
 import styles from "./FilterMenu.module.css";
-import { Icon } from "@thunderstore/cyberstorm";
+import { NewIcon } from "@thunderstore/cyberstorm";
 import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 
 interface Props {
@@ -39,9 +39,9 @@ export const OthersMenu = (props: Props) => {
               className={styles.checkbox}
             >
               <Checkbox.Indicator>
-                <Icon>
+                <NewIcon csMode="inline" noWrapper>
                   <FontAwesomeIcon icon={faCheck} className={styles.icon} />
-                </Icon>
+                </NewIcon>
               </Checkbox.Indicator>
             </Checkbox.Root>
             {label}

diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageOrder.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageOrder.tsx
@@ -5,17 +5,16 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { faHandSparkles } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Dispatch, SetStateAction } from "react";
 
-import { Select } from "@thunderstore/cyberstorm";
+import { NewSelect } from "@thunderstore/cyberstorm";
 
 interface Props {
-  order: PackageOrderOptions;
-  setOrder: Dispatch<SetStateAction<PackageOrderOptions>>;
+  order: PackageOrderOptionsType;
+  setOrder: (val: PackageOrderOptionsType) => void;
 }
 
 export const PackageOrder = (props: Props) => (
-  <Select
+  <NewSelect
     options={selectOptions}
     value={props.order}
     onChange={props.setOrder}
@@ -29,6 +28,7 @@ export enum PackageOrderOptions {
   Rated = "top-rated",
   Updated = "last-updated",
 }
+export type PackageOrderOptionsType = `${PackageOrderOptions}`;
 
 const selectOptions = [
   {