Convert Remix app Root and Error styles from modules to BEM

thunderstore-io · Oct 22, 2024 · 39d0889 · 39d0889
1 parent d863304
commit 39d0889
Show file tree

Hide file tree

Showing 16 changed files with 543 additions and 65 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -2,12 +2,6 @@
   "extends": ["stylelint-config-standard", "stylelint-config-rational-order"],
   "rules": {
     "alpha-value-notation": "number",
-    "custom-property-pattern": [
-      "^(-{0,2}[a-z0-9]+)*$",
-      {
-        "message": "Expected custom property name \"${name}\" to be kebab-case + double hyphens"
-      }
-    ],
     "declaration-block-no-duplicate-properties": [
       true,
       {
@@ -24,14 +18,9 @@
     "font-weight-notation": "numeric",
     "import-notation": "string",
     "number-max-precision": 3,
-    "selector-class-pattern": [
-      "^((?!\\-).)*$",
-      { "message": "Don't use hyphens in class selectors" }
-    ],
-    "selector-id-pattern": [
-      "^((?!\\-).)*$",
-      { "message": "Don't use hyphens in id selectors" }
-    ],
+    "custom-property-pattern": null,
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
     "selector-no-vendor-prefix": null,
     "selector-pseudo-element-colon-notation": "double",
     "property-no-vendor-prefix": [

diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx
@@ -10,7 +10,6 @@ import {
   Title,
 } from "@thunderstore/cyberstorm";
 import styles from "./CommunityCard.module.css";
-import rootStyles from "../RootLayout.module.css";
 import { formatInteger } from "@thunderstore/cyberstorm/src/utils/utils";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { PackageSearch } from "~/commonComponents/PackageSearch/PackageSearch";
@@ -161,7 +160,7 @@ export default function Community() {
           {community.name}
         </CyberstormLink>
       </BreadCrumbs>
-      <header className={rootStyles.pageHeader}>
+      <header className="project-root__page-header">
         <div className={styles.root}>
           <div className={styles.image}>
             <ImageWithFallback
@@ -214,7 +213,7 @@ export default function Community() {
           </div>
         </div>
       </header>
-      <main className={rootStyles.main}>
+      <main className="project-root__main">
         <PackageSearch
           listings={listings}
           packageCategories={filters.package_categories}

diff --git a/apps/cyberstorm-remix/app/communities/communities.tsx b/apps/cyberstorm-remix/app/communities/communities.tsx
@@ -10,7 +10,6 @@ import {
   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";
@@ -131,7 +130,7 @@ export default function CommunitiesPage() {
       <NewBreadCrumbs rootClasses={styles.breadcrumbs}>
         Communities
       </NewBreadCrumbs>
-      <header className={rootStyles.pageHeader}>
+      <header className="project-root__page-header">
         <Heading
           csLevel="1"
           csStyleLevel="2"
@@ -141,7 +140,7 @@ export default function CommunitiesPage() {
           Communities
         </Heading>
       </header>
-      <main className={rootStyles.main}>
+      <main className="project-root__main">
         <Container
           rootClasses={searchAndOrderStyles.root}
           csVariant="tertiary"

diff --git a/apps/cyberstorm-remix/app/namespace/namespace.tsx b/apps/cyberstorm-remix/app/namespace/namespace.tsx
@@ -10,7 +10,6 @@ import {
   Title,
 } from "@thunderstore/cyberstorm";
 import styles from "./CommunityCard.module.css";
-import rootStyles from "../RootLayout.module.css";
 import { formatInteger } from "@thunderstore/cyberstorm/src/utils/utils";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { PackageSearch } from "~/commonComponents/PackageSearch/PackageSearch";
@@ -129,7 +128,7 @@ export default function Community() {
           {community.name}
         </CyberstormLink>
       </BreadCrumbs>
-      <header className={rootStyles.pageHeader}>
+      <header className="project-root__page-header">
         <div className={styles.root}>
           <div className={styles.image}>
             <ImageWithFallback
@@ -182,7 +181,7 @@ export default function Community() {
           </div>
         </div>
       </header>
-      <main className={rootStyles.main}>
+      <main className="project-root__main">
         <PackageSearch
           listings={listings}
           packageCategories={filters.package_categories}

diff --git a/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx b/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx
@@ -2,7 +2,6 @@ import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { BreadCrumbs, CyberstormLink } from "@thunderstore/cyberstorm";
 import styles from "./Dependants.module.css";
-import rootStyles from "../../RootLayout.module.css";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { PackageSearch } from "~/commonComponents/PackageSearch/PackageSearch";
 import { ApiError } from "@thunderstore/thunderstore-api";
@@ -171,7 +170,7 @@ export default function Community() {
         </CyberstormLink>
         Dependants
       </BreadCrumbs>
-      <header className={rootStyles.pageHeader}>
+      <header className="project-root__page-header">
         <div className={styles.root}>
           <div className={styles.header}>
             Mods that depend on{" "}
@@ -194,7 +193,7 @@ export default function Community() {
           </div>
         </div>
       </header>
-      <main className={rootStyles.main}>
+      <main className="project-root__main">
         <PackageSearch
           listings={listings}
           packageCategories={filters.package_categories}

diff --git a/apps/cyberstorm-remix/app/p/packageListing.tsx b/apps/cyberstorm-remix/app/p/packageListing.tsx
@@ -17,7 +17,6 @@ import headerStyles from "./headerPackageDetailLayout.module.css";
 import sidebarStyles from "./sidebarPackageDetailsLayout.module.css";
 import tabsStyles from "./Tabs.module.css";
 import styles from "./mainPackageLayout.module.css";
-import rootStyles from "../RootLayout.module.css";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ApiError } from "@thunderstore/thunderstore-api";
@@ -219,7 +218,7 @@ export default function Community() {
         </CyberstormLink>
         {listing.name}
       </BreadCrumbs>
-      <header className={rootStyles.pageHeader}>
+      <header className="project-root__page-header">
         <div className={headerStyles.packageInfo}>
           <PageHeader
             title={listing.name}
@@ -299,7 +298,7 @@ export default function Community() {
           </div>
         </div>
       </header>
-      <main className={rootStyles.main}>
+      <main className="project-root__main">
         <div className={styles.packageContainer}>
           <div className={tabsStyles.root}>
             <div className={tabsStyles.buttons}>

diff --git a/apps/cyberstorm-remix/app/root.tsx b/apps/cyberstorm-remix/app/root.tsx
@@ -1,6 +1,5 @@
 import "@thunderstore/cyberstorm-styles";
-import styles from "./RootLayout.module.css";
-import errorStyles from "./Error.module.css";
+import "./styles/index.css";
 import {
   Links,
   Meta,
@@ -197,7 +196,7 @@ function Root() {
           <LinkingProvider value={LinkLibrary}>
             <Toast.Provider toastDuration={10000}>
               <RadixTooltip delayDuration={300}>
-                <div className={styles.root}>
+                <div className="project-root">
                   {/* REMIX TODO: For whatever reason the Navigation seems to cause suspense boundary errors. Couldn't find a reason why */}
                   <Navigation
                     hydrationCheck={!startsHydrated.current && isHydrated}
@@ -209,12 +208,12 @@ function Root() {
                   ) : (
                     <MobileUserPopoverContent />
                   )}
-                  <section className={styles.content}>
-                    <div className={styles.sideContainers} />
-                    <div className={styles.middleContainer}>
+                  <section className="project-root__content">
+                    <div className="project-root__side-containers" />
+                    <div className="project-root__middle-container">
                       <Outlet />
                     </div>
-                    <div className={styles.sideContainers}>
+                    <div className="project-root__side-containers">
                       {shouldShowAds
                         ? adContainerIds.map((cid, k_i) => (
                             <AdContainer key={k_i} containerId={cid} />
@@ -269,29 +268,29 @@ export function ErrorBoundary() {
         <LinkingProvider value={LinkLibrary}>
           <Toast.Provider toastDuration={10000}>
             <RadixTooltip delayDuration={300}>
-              <div className={styles.root}>
+              <div className="project-root">
                 {/* <Navigation user={getEmptyUser} /> */}
-                <section className={styles.content}>
-                  <div className={styles.sideContainers} />
-                  <div className={styles.middleContainer}>
-                    <div className={errorStyles.root}>
+                <section className="project-root__content">
+                  <div className="project-root__side-containers" />
+                  <div className="project-root__middle-container">
+                    <div className="project-error">
                       <div
-                        className={errorStyles.glitch}
+                        className="project-error__glitch"
                         data-text={isResponseError ? error.status : 500}
                       >
                         <span>{isResponseError ? error.status : 500}</span>
                       </div>
-                      <div className={errorStyles.description}>
+                      <div className="project-error__description">
                         {isResponseError ? error.data : "Internal server error"}
                       </div>
                       {!isResponseError && (
-                        <div className={errorStyles.flavor}>
+                        <div className="project-error__flavor">
                           Beep boop. Server something error happens.
                         </div>
                       )}
                     </div>
                   </div>
-                  <div className={styles.sideContainers}></div>
+                  <div className="project-root__side-containers"></div>
                 </section>
                 <Footer />
               </div>

diff --git a/apps/cyberstorm-remix/app/settings/teams/Teams.tsx b/apps/cyberstorm-remix/app/settings/teams/Teams.tsx
@@ -10,7 +10,6 @@ import {
 } from "@thunderstore/cyberstorm";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import styles from "./TeamsLayout.module.css";
-import rootStyles from "../../RootLayout.module.css";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useState } from "react";
@@ -63,10 +62,10 @@ export default function Teams() {
       <BreadCrumbs>
         <CyberstormLink linkId="Teams">Teams</CyberstormLink>
       </BreadCrumbs>
-      <header className={rootStyles.pageHeader}>
+      <header className="project-root__page-header">
         <PageHeader title="Teams" />
       </header>
-      <main className={rootStyles.main}>
+      <main className="project-root__main">
         <SettingItem
           title="Teams"
           description="Manage your teams"

diff --git a/apps/cyberstorm-remix/app/settings/teams/team/teamSettings.tsx b/apps/cyberstorm-remix/app/settings/teams/team/teamSettings.tsx
@@ -3,7 +3,6 @@ import { Outlet, useLoaderData, useLocation } from "@remix-run/react";
 import { BreadCrumbs, CyberstormLink, Icon } from "@thunderstore/cyberstorm";
 import tabsStyles from "./Tabs.module.css";
 import styles from "./teamSettingsLayout.module.css";
-import rootStyles from "../../../RootLayout.module.css";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ApiError } from "@thunderstore/thunderstore-api";
@@ -16,7 +15,7 @@ import {
 import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 import { PageHeader } from "~/commonComponents/PageHeader/PageHeader";
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
+export const meta: MetaFunction<typeof clientLoader> = ({ data }) => {
   return [
     { title: `${data?.team.name} settings` },
     { name: "description", content: `${data?.team.name} settings` },
@@ -65,12 +64,12 @@ export default function Community() {
         <CyberstormLink linkId="Teams">Teams</CyberstormLink>
         {team.name}
       </BreadCrumbs>
-      <header className={rootStyles.pageHeader}>
+      <header className="project-root__page-header">
         <div className={styles.header}>
           <PageHeader title="Teams" />
         </div>
       </header>
-      <main className={rootStyles.main}>
+      <main className="project-root__main">
         <div className={styles.teamContainer}>
           <div className={tabsStyles.root}>
             <div className={tabsStyles.buttons}>

diff --git a/apps/cyberstorm-remix/app/settings/user/Settings.tsx b/apps/cyberstorm-remix/app/settings/user/Settings.tsx
@@ -1,9 +1,8 @@
-import type { MetaFunction } from "@remix-run/node";
+// import type { MetaFunction } from "@remix-run/node";
 import { Outlet, useLoaderData, useLocation } from "@remix-run/react";
 import { BreadCrumbs, CyberstormLink, Icon } from "@thunderstore/cyberstorm";
 import tabsStyles from "./Tabs.module.css";
 import styles from "./SettingsLayout.module.css";
-import rootStyles from "../../RootLayout.module.css";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleNodes, faCog } from "@fortawesome/free-solid-svg-icons";
@@ -36,12 +35,12 @@ export default function Community() {
       <BreadCrumbs>
         <CyberstormLink linkId="Settings">Settings</CyberstormLink>
       </BreadCrumbs>
-      <header className={rootStyles.pageHeader}>
+      <header className="project-root__page-header">
         <div className={styles.header}>
           <PageHeader title="Settings" />
         </div>
       </header>
-      <main className={rootStyles.main}>
+      <main className="project-root__main">
         <div className={styles.tabContent}>
           <div className={tabsStyles.root}>
             <div className={tabsStyles.buttons}>