Introduce new systems, components and rewrite /communities

.gitignore

@@ -1,3 +1,4 @@
 .idea
 /node_modules/
 **/yarn-error.log
+.npmrc

apps/cyberstorm-remix/Dockerfile

@@ -4,7 +4,7 @@ RUN apk add --no-cache libc6-compat
 
 WORKDIR /app
 
-COPY package.json yarn.lock babel.config.js .eslintrc.json .eslintignore .yarnrc .prettierrc .prettierignore .stylelintrc ./
+COPY package.json yarn.lock babel.config.js eslint.config.mjs .eslintignore .yarnrc .prettierrc .prettierignore .stylelintrc ./
 COPY .yarn ./.yarn
 COPY packages ./packages
 COPY apps/cyberstorm-remix ./apps/cyberstorm-remix

apps/cyberstorm-remix/app/Error.module.css

@@ -5,8 +5,8 @@
   align-items: center;
   justify-content: center;
 
-  --glitch-color-1: var(--color-cyber-green--50);
-  --glitch-color-2: var(--color-pink--50);
+  --glitch-color-1: var(--old--color-cyber-green--50);
+  --glitch-color-2: var(--old--color-pink--50);
 }
 
 .description {

apps/cyberstorm-remix/app/Markdown.module.css

@@ -115,7 +115,7 @@
 }
 
 .root a {
-  color: var(--color-cyber-green--50);
+  color: var(--old--color-cyber-green--50);
 }
 
 .root blockquote {

apps/cyberstorm-remix/app/RootLayout.module.css

@@ -18,7 +18,10 @@
 
 .middleContainer {
   position: relative;
+  display: flex;
   flex: 1 1 auto;
+  flex-direction: column;
+  gap: 1rem;
   width: 100%;
   max-width: 83.5rem;
 }
@@ -36,7 +39,7 @@
 }
 
 .pageHeader {
-  padding: 2.5rem 0;
+  padding: 0;
 }
 
 .pageBody {
@@ -72,6 +75,14 @@
   .fullWidth {
     flex: 0 0 100%;
   }
+
+  .pageHeader {
+    padding: 2.5rem 0;
+  }
+
+  .middleContainer {
+    gap: 0;
+  }
 }
 
 @media (width <= 92.125rem) {

apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.module.css

@@ -16,8 +16,8 @@
 }
 
 .tag.exclude {
-  --text-color: var(--color-red--3);
-  --bg-color: var(--color-red--10);
+  --text-color: var(--old--color-red--3);
+  --bg-color: var(--old--color-red--10);
 }
 
 .icon {
@@ -26,5 +26,5 @@
 }
 
 .tag.exclude .icon {
-  --text-color: var(--color-red--3);
+  --text-color: var(--old--color-red--3);
 }

apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css

@@ -32,13 +32,13 @@
   transition: var(--animation-length-xs);
   user-select: none;
 
-  --mark-color: var(--color-purple--6);
+  --mark-color: var(--old--color-purple--6);
 }
 
 .label:hover {
   background-color: var(--color-surface--4);
 
-  --mark-color: var(--color-purple--2);
+  --mark-color: var(--old--color-purple--2);
 }
 
 .checkbox {

apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css

@@ -26,13 +26,13 @@
   transition: var(--animation-length-xs);
   user-select: none;
 
-  --mark-color: var(--color-purple--6);
+  --mark-color: var(--old--color-purple--6);
 }
 
 .label:hover {
   background-color: var(--color-surface--4);
 
-  --mark-color: var(--color-purple--2);
+  --mark-color: var(--old--color-purple--2);
 }
 
 .checkbox {

apps/cyberstorm-remix/app/communities/Communities.module.css

@@ -0,0 +1,5 @@
+@media (width <= 40rem) {
+  .breadcrumbs {
+    display: none;
+  }
+}

apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css

@@ -6,46 +6,43 @@
 }
 
 .searchTextInput {
-  width: 50%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--space--8);
 }
 
 .searchFilters {
   display: flex;
-  flex: 0 1 auto;
-  gap: var(--gap--16);
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.searchFiltersSortLabel {
-  color: var(--color-text--tertiary);
-  font-weight: var(--font-weight-bold);
+  flex-direction: column;
+  gap: var(--space--8);
   white-space: nowrap;
 }
 
-.skeletonSearch {
-  height: 2.75rem;
-}
-
-.skeletonSort {
-  width: 13rem;
-  height: 2.75rem;
-}
-
 @media (width <= 40rem) {
-  .searchTextInput {
-    width: 100%;
-  }
-
   .root {
     flex-direction: column;
   }
 
-  .searchFiltersSortLabel {
+  .searchTextInput {
+    width: 100%;
+  }
+
+  .searchTextInput > span {
     display: none;
   }
 
   .searchFilters {
     width: 100%;
   }
+
+  .searchFilters > span {
+    display: none;
+  }
+}
+
+@media (width > 40rem) {
+  .searchTextInput {
+    max-width: 26.25rem;
+  }
 }

apps/cyberstorm-remix/app/communities/communities.tsx

@@ -1,14 +1,17 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import {
-  BreadCrumbs,
-  CommunityCard,
+  Container,
+  CardCommunity,
   CommunityCardSkeleton,
   EmptyState,
-  Select,
-  TextInput,
+  Heading,
+  NewBreadCrumbs,
   range,
+  NewTextInput,
+  NewSelect,
 } from "@thunderstore/cyberstorm";
 import rootStyles from "../RootLayout.module.css";
+import styles from "./Communities.module.css";
 import searchAndOrderStyles from "./SearchAndOrder.module.css";
 import communitiesListStyles from "./CommunityList.module.css";
 import { useState, useEffect } from "react";
@@ -22,12 +25,12 @@ import { faGhost, faFire } from "@fortawesome/free-solid-svg-icons";
 import { useDebounce } from "use-debounce";
 import {
   useLoaderData,
-  useNavigation,
+  useNavigationType,
+  // useNavigation,
   useSearchParams,
 } from "@remix-run/react";
 import { Communities } from "@thunderstore/dapper/types";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
-import { PageHeader } from "~/commonComponents/PageHeader/PageHeader";
 
 export const meta: MetaFunction = () => {
   return [
@@ -88,8 +91,11 @@ export async function clientLoader({ request }: LoaderFunctionArgs) {
 
 export default function CommunitiesPage() {
   const communitiesData = useLoaderData<typeof loader | typeof clientLoader>();
+  const navigationType = useNavigationType();
+
   const [searchParams, setSearchParams] = useSearchParams();
-  const navigation = useNavigation();
+  // TODO: Disabled until we can figure out how a proper way to display skeletons
+  // const navigation = useNavigation();
 
   const changeOrder = (v: SortOptions) => {
     searchParams.set("order", v);
@@ -99,54 +105,78 @@ export default function CommunitiesPage() {
   const [searchValue, setSearchValue] = useState(
     searchParams.getAll("search").join(" ")
   );
+
+  useEffect(() => {
+    if (navigationType === "POP") {
+      setSearchValue(searchParams.getAll("search").join(" "));
+    }
+  }, [searchParams]);
+
   const [debouncedSearchValue] = useDebounce(searchValue, 300, {
     maxWait: 300,
   });
 
   useEffect(() => {
     if (debouncedSearchValue === "") {
       searchParams.delete("search");
-      setSearchParams(searchParams);
+      setSearchParams(searchParams, { replace: true });
     } else {
       searchParams.set("search", debouncedSearchValue);
-      setSearchParams(searchParams);
+      setSearchParams(searchParams, { replace: true });
     }
   }, [debouncedSearchValue]);
 
   return (
     <>
-      <BreadCrumbs>Communities</BreadCrumbs>
+      <NewBreadCrumbs rootClasses={styles.breadcrumbs}>
+        Communities
+      </NewBreadCrumbs>
       <header className={rootStyles.pageHeader}>
-        <PageHeader title="Communities" />
+        <Heading
+          csLevel="1"
+          csStyleLevel="2"
+          csVariant="primary"
+          mode="display"
+        >
+          Communities
+        </Heading>
       </header>
       <main className={rootStyles.main}>
-        <div className={searchAndOrderStyles.root}>
+        <Container
+          rootClasses={searchAndOrderStyles.root}
+          csVariant="tertiary"
+          csTextStyles={["fontWeightBold", "lineHeightAuto", "fontSizeS"]}
+        >
           <div className={searchAndOrderStyles.searchTextInput}>
-            <TextInput
+            <label htmlFor="communitiesSearchInput">Search</label>
+            <NewTextInput
               onChange={(e) => setSearchValue(e.target.value)}
               value={searchValue}
               placeholder="Search communities..."
               clearValue={() => setSearchValue("")}
               leftIcon={<FontAwesomeIcon icon={faSearch} />}
+              csColor="cyber-green"
+              id="communitiesSearchInput"
             />
           </div>
           <div className={searchAndOrderStyles.searchFilters}>
-            <div className={searchAndOrderStyles.searchFiltersSortLabel}>
-              Sort by
-            </div>
-            <Select
+            <label htmlFor="communitiesSortBy">Sort by</label>
+            <NewSelect
               onChange={changeOrder}
               options={selectOptions}
               value={searchParams.get("order") ?? SortOptions.Popular}
+              aria-label="Sort communities by"
+              id="communitiesSortBy"
             />
           </div>
-        </div>
+        </Container>
 
-        {navigation.state === "loading" ? (
+        <CommunitiesList communitiesData={communitiesData} />
+        {/* {navigation.state === "loading" ? (
           <CommunitiesListSkeleton />
         ) : (
           <CommunitiesList communitiesData={communitiesData} />
-        )}
+        )} */}
       </main>
     </>
   );
@@ -159,7 +189,15 @@ function CommunitiesList(props: { communitiesData: Communities }) {
     return (
       <div className={communitiesListStyles.root}>
         {communitiesData.results.map((community) => (
-          <CommunityCard key={community.identifier} community={community} />
+          <CardCommunity
+            key={community.identifier}
+            community={community}
+            isPopular={community.total_package_count > 1000}
+            isNew={
+              new Date(community.datetime_created).getTime() >
+              new Date().getTime() - 1000 * 60 * 60 * 336
+            }
+          />
         ))}
       </div>
     );

apps/cyberstorm-remix/app/p/Tabs.module.css

@@ -7,7 +7,7 @@
 
 .buttons {
   display: flex;
-  border-bottom: 3px solid var(--color-purple--5);
+  border-bottom: 3px solid var(--old--color-purple--5);
 }
 
 .button {
@@ -20,7 +20,7 @@
   margin-bottom: -3px;
 
   padding: var(--space--12) var(--space--16);
-  border-bottom: 3px solid var(--color-purple--5);
+  border-bottom: 3px solid var(--old--color-purple--5);
   color: var(--tab-color);
   background-color: transparent;
 
@@ -30,7 +30,7 @@
 .button.active {
   border-color: var(--tab-color);
 
-  --tab-color: var(--color-green--5);
+  --tab-color: var(--old--color-green--5);
 }
 
 .button:disabled {

apps/cyberstorm-remix/app/p/dependants/Dependants.module.css

@@ -50,5 +50,5 @@
 }
 
 .header a {
-  color: var(--color-cyber-green--60);
+  color: var(--old--color-cyber-green--60);
 }