Skip to content

Commit

Permalink
Refactor /communities to new component system standard
Browse files Browse the repository at this point in the history
  • Loading branch information
@Oksamies
Oksamies committed Sep 9, 2024
1 parent 54d074a commit 4508075
Show file tree
Hide file tree
Showing 58 changed files with 3,440 additions and 799 deletions.
31 changes: 7 additions & 24 deletions apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,43 +6,26 @@
}

.searchTextInput {
display: flex;
flex-direction: column;
gap: var(--space--8);
width: 50%;
}

.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 (max-width: 40rem) {
.searchTextInput {
width: 100%;
}

.root {
flex-direction: column;
}

.searchFiltersSortLabel {
display: none;
.searchTextInput {
width: 100%;
}

.searchFilters {
Expand Down
38 changes: 23 additions & 15 deletions apps/cyberstorm-remix/app/communities/communities.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
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 searchAndOrderStyles from "./SearchAndOrder.module.css";
Expand All @@ -27,7 +29,6 @@ import {
} 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 [
Expand Down Expand Up @@ -115,14 +116,23 @@ export default function CommunitiesPage() {

return (
<>
<BreadCrumbs>Communities</BreadCrumbs>
<NewBreadCrumbs>Communities</NewBreadCrumbs>
<header className={rootStyles.pageHeader}>
<PageHeader title="Communities" />
<Heading level="2" variant="primary" mode="display">
Communities
</Heading>
</header>
<main className={rootStyles.main}>
<div className={searchAndOrderStyles.root}>
<Container
rootClasses={searchAndOrderStyles.root}
csVariant="tertiary"
csSize="s"
csWeight="bold"
csMode="auto"
>
<div className={searchAndOrderStyles.searchTextInput}>
<TextInput
Search
<NewTextInput
onChange={(e) => setSearchValue(e.target.value)}
value={searchValue}
placeholder="Search communities..."
Expand All @@ -131,16 +141,14 @@ export default function CommunitiesPage() {
/>
</div>
<div className={searchAndOrderStyles.searchFilters}>
<div className={searchAndOrderStyles.searchFiltersSortLabel}>
Sort by
</div>
<Select
Sort by
<NewSelect
onChange={changeOrder}
options={selectOptions}
value={searchParams.get("order") ?? SortOptions.Popular}
/>
</div>
</div>
</Container>

{navigation.state === "loading" ? (
<CommunitiesListSkeleton />
Expand All @@ -159,7 +167,7 @@ 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} />
))}
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions apps/cyberstorm-remix/app/root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { LinkLibrary } from "cyberstorm/utils/LinkLibrary";
import { AdContainer, LinkingProvider } from "@thunderstore/cyberstorm";
import { DapperTs } from "@thunderstore/dapper-ts";
// import { CurrentUser } from "@thunderstore/dapper/types";
import { getDapper } from "cyberstorm/dapper/sessionUtils";
// import { getDapper } from "cyberstorm/dapper/sessionUtils";

import { captureRemixErrorBoundaryError, withSentry } from "@sentry/remix";
import {
Expand Down Expand Up @@ -183,7 +183,7 @@ function Root() {
<div className={styles.sideContainers}>
{shouldShowAds
? adContainerIds.map((cid, k_i) => (
<AdContainer key={k_i} containerId={cid} noHeader />
<AdContainer key={k_i} containerId={cid} />
))
: null}
</div>
Expand Down
25 changes: 3 additions & 22 deletions apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,12 @@
import { faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import styles from "./Navigation.module.css";
import { Popover } from "@thunderstore/cyberstorm";
import { Modal } from "@thunderstore/cyberstorm";
import { AvatarButton } from "@thunderstore/cyberstorm/src/components/Avatar/AvatarButton";
import * as Button from "@thunderstore/cyberstorm/src/components/Button/index";
import { LoginList } from "./LoginList";

export function DesktopLoginPopover() {
return (
<Popover
<Modal
popoverId={"navAccount"}
popoverRootClasses={styles.navAccountPopoverRoot}
popoverWrapperClasses={styles.navAccountPopoverWrapper}
trigger={
<AvatarButton
size="small"
Expand All @@ -21,22 +15,9 @@ export function DesktopLoginPopover() {
/>
}
>
<Button.Root
{...{
popovertarget: "navAccount",
popovertargetaction: "close",
}}
colorScheme="transparentTertiary"
className={styles.navAccountPopoverCloseButton}
tooltipText="Close"
>
<Button.ButtonIcon>
<FontAwesomeIcon icon={faXmark} />
</Button.ButtonIcon>
</Button.Root>
<nav className={styles.mobileNavPopoverList}>
<LoginList />
</nav>
</Popover>
</Modal>
);
}
72 changes: 40 additions & 32 deletions apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,51 @@
import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { DropDown, Button, DropDownItem } from "@thunderstore/cyberstorm";
import {
DropDown,
DropDownItem,
Icon,
NewButton,
} from "@thunderstore/cyberstorm";
import { DropDownLink } from "@thunderstore/cyberstorm/src/components/DropDown/DropDownLink";
const { Root, ButtonLabel, ButtonIcon } = Button;

export function DevelopersDropDown() {
return (
<DropDown
trigger={
<Root paddingSize="large" colorScheme="transparentDefault">
<ButtonLabel fontSize="large" fontWeight="600">
<>
<DropDown
trigger={
<NewButton size="l" variant="tertiary" color="surface">
Developers
</ButtonLabel>
<ButtonIcon>
<FontAwesomeIcon icon={faCaretDown} />
</ButtonIcon>
</Root>
}
content={[
<a href="/api/docs" key="docs">
<DropDownItem content={<DropDownLink label="API Docs" />} />
</a>,
<a href="/package/create/docs/" key="old_format_docs">
<DropDownItem
content={<DropDownLink label="Package Format Docs" />}
/>
</a>,
<a href="/tools/manifest-v1-validator/" key="old_manifest_validator">
<DropDownItem content={<DropDownLink label="Manifest Validator" />} />
</a>,
<a href="/tools/markdown-preview/" key="old_markdown_preview">
<DropDownItem content={<DropDownLink label="Markdown Preview" />} />
</a>,
<a href="https://github.com/thunderstore-io" key="github">
<DropDownItem content={<DropDownLink label="GitHub" isExternal />} />
</a>,
]}
/>
<Icon inline>
<FontAwesomeIcon icon={faCaretDown} />
</Icon>
</NewButton>
}
content={[
<a href="/api/docs" key="docs">
<DropDownItem content={<DropDownLink label="API Docs" />} />
</a>,
<a href="/package/create/docs/" key="old_format_docs">
<DropDownItem
content={<DropDownLink label="Package Format Docs" />}
/>
</a>,
<a href="/tools/manifest-v1-validator/" key="old_manifest_validator">
<DropDownItem
content={<DropDownLink label="Manifest Validator" />}
/>
</a>,
<a href="/tools/markdown-preview/" key="old_markdown_preview">
<DropDownItem content={<DropDownLink label="Markdown Preview" />} />
</a>,
<a href="https://github.com/thunderstore-io" key="github">
<DropDownItem
content={<DropDownLink label="GitHub" isExternal />}
/>
</a>,
]}
/>
</>
);
}

Expand Down
Loading

0 comments on commit 4508075

Please sign in to comment.