From 2698d420bf88fd353b6bb6c593e58e548c98ba5f Mon Sep 17 00:00:00 2001 From: Oksamies Date: Tue, 28 Jan 2025 00:35:30 +0200 Subject: [PATCH] Clean up code project wide --- apps/cyberstorm-remix/app/Error.module.css | 407 ----------- apps/cyberstorm-remix/app/Markdown.module.css | 179 ----- .../app/RootLayout.module.css | 92 --- apps/cyberstorm-remix/app/c/community.tsx | 2 +- .../CheckboxList/CheckboxList.css | 109 +++ .../CheckboxList/CheckboxList.tsx | 72 ++ .../Collapsible/Collapsible.css | 26 + .../Collapsible.tsx} | 8 +- .../CollapsibleText/CollapsibleText.css | 100 +-- .../CollapsibleText/CollapsibleText.tsx | 16 +- .../CopyButton/CopyButton.css | 19 + .../CopyButton/CopyButton.tsx | 72 ++ .../app/commonComponents/Footer/Footer.css | 6 +- .../app/commonComponents/Footer/Footer.tsx | 2 +- .../ListingDependency/ListingDependency.css | 46 +- .../ListingDependency/ListingDependency.tsx | 20 +- .../Navigation/MobileNavigation.css | 193 +++++ .../Navigation/Navigation.css | 182 +++++ .../Navigation/Navigation.tsx | 611 ++++++++++++++++ .../Navigation}/NavigationWrapper.tsx | 3 +- .../CategoryTagCloud.module.css | 36 - .../FilterMenus/CategoryMenu.tsx | 102 --- .../FilterMenus/CollapsibleMenu.module.css | 14 - .../FilterMenus/FilterMenu.module.css | 126 ---- .../PackageSearch/FilterMenus/OthersMenu.tsx | 52 -- .../PackageSearch/FilterMenus/SectionMenu.tsx | 87 --- .../PackageSearch/PackageList.module.css | 96 --- .../PackageSearch/PackageListSkeleton.tsx | 24 - .../PackageSearch/PackageSearch.css | 186 +++++ .../PackageSearch/PackageSearch.module.css | 204 ------ .../PackageSearch/PackageSearch.tsx | 392 +++++----- .../CategoryTagCloud/CategoryTagCloud.css | 24 + .../CategoryTagCloud/CategoryTagCloud.tsx | 28 +- .../components/PackageCount/PackageCount.css | 10 + .../PackageCount}/PackageCount.tsx | 22 +- .../{ => components}/PackageOrder.tsx | 0 .../commonComponents/PackageSearch/types.ts | 9 - .../PageHeader/PageHeader.css | 100 +-- .../PageHeader/PageHeader.tsx | 18 +- .../RadioGroup/RadioGroup.css | 115 +++ .../RadioGroup/RadioGroup.tsx | 51 ++ .../app/commonComponents/types.ts | 13 + .../app/commonComponents/utils.ts | 9 + .../app/communities/Communities.css | 18 + .../app/communities/CommunityList.module.css | 13 - .../app/communities/SearchAndOrder.module.css | 51 -- .../app/communities/communities.tsx | 18 +- .../app/namespace/namespace.tsx | 190 ----- .../p/components/TeamMembers/TeamMembers.css | 88 +++ .../TeamMembers/TeamMembers.module.css | 65 -- .../p/components/TeamMembers/TeamMembers.tsx | 19 +- .../app/p/dependants/Dependants.css | 18 + .../app/p/dependants/Dependants.module.css | 54 -- .../app/p/dependants/Dependants.tsx | 91 +-- .../cyberstorm-remix/app/p/packageListing.css | 37 - .../cyberstorm-remix/app/p/packageListing.tsx | 669 +++++++++--------- .../app/p/tabs/Changelog/Changelog.tsx | 4 +- .../app/p/tabs/Readme/Readme.tsx | 4 +- .../app/p/tabs/Versions/Versions.tsx | 1 + apps/cyberstorm-remix/app/root.tsx | 3 +- apps/cyberstorm-remix/app/styles/index.css | 2 +- apps/cyberstorm-remix/app/styles/markdown.css | 181 +++++ .../manifest-validator/manifestValidator.css | 41 ++ .../manifestValidator.module.css | 5 - .../manifest-validator/manifestValidator.tsx | 199 +++--- .../markdown-preview/MarkdownPreview.css | 53 ++ .../MarkdownPreview.module.css | 5 - .../markdown-preview/markdownPreview.tsx | 203 +++--- .../package-format-docs/PackageFormatDocs.css | 9 + .../PackageFormatDocs.module.css | 10 - .../package-format-docs/packageFormatDocs.tsx | 94 ++- .../navigation/DesktopLoginPopover.tsx | 124 ---- .../navigation/DesktopUserDropdown.tsx | 75 -- .../navigation/DevelopersDropDown.module.css | 13 - .../navigation/DevelopersDropDown.tsx | 82 --- .../cyberstorm/navigation/LoginList.tsx | 99 --- .../navigation/MobileUserPopoverContent.tsx | 97 --- .../cyberstorm/navigation/Navigation.css | 74 -- .../navigation/Navigation.module.css | 298 -------- .../cyberstorm/navigation/Navigation.tsx | 412 ----------- .../components/CommunityCard.stories.tsx | 63 -- .../stories/components/DropDown.stories.tsx | 100 --- .../components/MetaInfoItem.stories.tsx | 33 - .../components/PackageCard.stories.tsx | 62 -- .../stories/components/Pagination.stories.tsx | 63 -- .../components/SearchFilter.stories.tsx | 28 - .../src/components/Table/Table.ts | 2 +- .../cyberstorm-theme/src/styles/layout.css | 2 +- .../components/BreadCrumbs/BreadCrumbs.tsx | 2 +- .../src/components/Button/Button.tsx | 2 +- .../components/CodeInput/CodeInput.module.css | 1 + .../src/components/CodeInput/CodeInput.tsx | 27 +- .../CommunityCard/CommunityCard.module.css | 45 -- .../CommunityCard/CommunityCard.tsx | 67 -- .../CommunityCardSkeleton.module.css | 18 - .../CommunityCard/CommunityCardSkeleton.tsx | 16 - .../CopyButton/CopyButton.module.css | 19 - .../src/components/CopyButton/CopyButton.tsx | 86 --- .../components/DropDown/DropDown.module.css | 52 -- .../src/components/DropDown/DropDown.tsx | 62 -- .../DropDown/DropDownLink.module.css | 32 - .../src/components/DropDown/DropDownLink.tsx | 38 - .../src/components/Link/Link.module.css | 37 - .../cyberstorm/src/components/Link/Link.tsx | 62 -- .../MetaInfoItem/MetaInfoItem.module.css | 18 - .../components/MetaInfoItem/MetaInfoItem.tsx | 26 - .../MetaInfoItemList.module.css | 7 - .../MetaInfoItemList/MetaInfoItemList.tsx | 24 - .../Pagination/Pagination.module.css | 30 - .../src/components/Pagination/Pagination.tsx | 138 ---- .../Pagination/PaginationButton.module.css | 47 -- .../Pagination/PaginationButton.tsx | 66 -- .../components/SearchFilter/SearchFilter.tsx | 40 -- .../SearchFilter/Searchfilter.module.css | 7 - .../SkeletonBoxes/SkeletonBoxes.tsx | 2 +- .../StalenessIndicator/StalenessIndicator.tsx | 4 +- .../ValidationBar/ValidationBar.tsx | 148 ++-- .../WrapperCard/WrapperCard.module.css | 32 - .../components/WrapperCard/WrapperCard.tsx | 35 - packages/cyberstorm/src/index.ts | 50 +- .../Card/CardPackage/CardPackage.css | 2 +- .../EmptyState/EmptyState.css} | 8 +- .../EmptyState/EmptyState.tsx | 6 +- .../EmptyState/EmptyStateIcon.tsx | 12 +- .../EmptyState/EmptyStateMessage.tsx | 6 +- .../EmptyState/EmptyStateTitle.tsx | 6 +- .../EmptyState/index.ts | 0 .../SkeletonBox/SkeletonBox.css} | 2 +- .../SkeletonBox/SkeletonBox.tsx | 4 +- .../src/newComponents/Table/Table.css | 41 +- .../src/newComponents/Table/Table.tsx | 1 + .../Tooltip/Tooltip.css} | 18 +- .../Tooltip/Tooltip.tsx | 9 +- .../src/fetch/toolsManifestValidate.ts | 1 + 134 files changed, 3242 insertions(+), 5769 deletions(-) delete mode 100644 apps/cyberstorm-remix/app/Error.module.css delete mode 100644 apps/cyberstorm-remix/app/Markdown.module.css delete mode 100644 apps/cyberstorm-remix/app/RootLayout.module.css create mode 100644 apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.css create mode 100644 apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.tsx create mode 100644 apps/cyberstorm-remix/app/commonComponents/Collapsible/Collapsible.css rename apps/cyberstorm-remix/app/commonComponents/{PackageSearch/FilterMenus/CollapsibleMenu.tsx => Collapsible/Collapsible.tsx} (83%) create mode 100644 apps/cyberstorm-remix/app/commonComponents/CopyButton/CopyButton.css create mode 100644 apps/cyberstorm-remix/app/commonComponents/CopyButton/CopyButton.tsx create mode 100644 apps/cyberstorm-remix/app/commonComponents/Navigation/MobileNavigation.css create mode 100644 apps/cyberstorm-remix/app/commonComponents/Navigation/Navigation.css create mode 100644 apps/cyberstorm-remix/app/commonComponents/Navigation/Navigation.tsx rename apps/cyberstorm-remix/{cyberstorm/navigation => app/commonComponents/Navigation}/NavigationWrapper.tsx (99%) delete mode 100644 apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.module.css delete mode 100644 apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CategoryMenu.tsx delete mode 100644 apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css delete mode 100644 apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css delete mode 100644 apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/OthersMenu.tsx delete mode 100644 apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/SectionMenu.tsx delete mode 100644 apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css delete mode 100644 apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageListSkeleton.tsx create mode 100644 apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.css delete mode 100644 apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css create mode 100644 apps/cyberstorm-remix/app/commonComponents/PackageSearch/components/CategoryTagCloud/CategoryTagCloud.css rename apps/cyberstorm-remix/app/commonComponents/PackageSearch/{ => components}/CategoryTagCloud/CategoryTagCloud.tsx (78%) create mode 100644 apps/cyberstorm-remix/app/commonComponents/PackageSearch/components/PackageCount/PackageCount.css rename apps/cyberstorm-remix/app/commonComponents/PackageSearch/{ => components/PackageCount}/PackageCount.tsx (65%) rename apps/cyberstorm-remix/app/commonComponents/PackageSearch/{ => components}/PackageOrder.tsx (100%) delete mode 100644 apps/cyberstorm-remix/app/commonComponents/PackageSearch/types.ts create mode 100644 apps/cyberstorm-remix/app/commonComponents/RadioGroup/RadioGroup.css create mode 100644 apps/cyberstorm-remix/app/commonComponents/RadioGroup/RadioGroup.tsx create mode 100644 apps/cyberstorm-remix/app/commonComponents/types.ts create mode 100644 apps/cyberstorm-remix/app/commonComponents/utils.ts delete mode 100644 apps/cyberstorm-remix/app/communities/CommunityList.module.css delete mode 100644 apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css delete mode 100644 apps/cyberstorm-remix/app/namespace/namespace.tsx create mode 100644 apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.css delete mode 100644 apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css create mode 100644 apps/cyberstorm-remix/app/p/dependants/Dependants.css delete mode 100644 apps/cyberstorm-remix/app/p/dependants/Dependants.module.css create mode 100644 apps/cyberstorm-remix/app/styles/markdown.css create mode 100644 apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.css delete mode 100644 apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.module.css create mode 100644 apps/cyberstorm-remix/app/tools/markdown-preview/MarkdownPreview.css delete mode 100644 apps/cyberstorm-remix/app/tools/markdown-preview/MarkdownPreview.module.css create mode 100644 apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.css delete mode 100644 apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.module.css delete mode 100644 apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx delete mode 100644 apps/cyberstorm-remix/cyberstorm/navigation/DesktopUserDropdown.tsx delete mode 100644 apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.module.css delete mode 100644 apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx delete mode 100644 apps/cyberstorm-remix/cyberstorm/navigation/LoginList.tsx delete mode 100644 apps/cyberstorm-remix/cyberstorm/navigation/MobileUserPopoverContent.tsx delete mode 100644 apps/cyberstorm-remix/cyberstorm/navigation/Navigation.css delete mode 100644 apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css delete mode 100644 apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx delete mode 100644 apps/cyberstorm-storybook/stories/components/CommunityCard.stories.tsx delete mode 100644 apps/cyberstorm-storybook/stories/components/DropDown.stories.tsx delete mode 100644 apps/cyberstorm-storybook/stories/components/MetaInfoItem.stories.tsx delete mode 100644 apps/cyberstorm-storybook/stories/components/PackageCard.stories.tsx delete mode 100644 apps/cyberstorm-storybook/stories/components/Pagination.stories.tsx delete mode 100644 apps/cyberstorm-storybook/stories/components/SearchFilter.stories.tsx delete mode 100644 packages/cyberstorm/src/components/CommunityCard/CommunityCard.module.css delete mode 100644 packages/cyberstorm/src/components/CommunityCard/CommunityCard.tsx delete mode 100644 packages/cyberstorm/src/components/CommunityCard/CommunityCardSkeleton.module.css delete mode 100644 packages/cyberstorm/src/components/CommunityCard/CommunityCardSkeleton.tsx delete mode 100644 packages/cyberstorm/src/components/CopyButton/CopyButton.module.css delete mode 100644 packages/cyberstorm/src/components/CopyButton/CopyButton.tsx delete mode 100644 packages/cyberstorm/src/components/DropDown/DropDown.module.css delete mode 100644 packages/cyberstorm/src/components/DropDown/DropDown.tsx delete mode 100644 packages/cyberstorm/src/components/DropDown/DropDownLink.module.css delete mode 100644 packages/cyberstorm/src/components/DropDown/DropDownLink.tsx delete mode 100644 packages/cyberstorm/src/components/Link/Link.module.css delete mode 100644 packages/cyberstorm/src/components/Link/Link.tsx delete mode 100644 packages/cyberstorm/src/components/MetaInfoItem/MetaInfoItem.module.css delete mode 100644 packages/cyberstorm/src/components/MetaInfoItem/MetaInfoItem.tsx delete mode 100644 packages/cyberstorm/src/components/MetaInfoItemList/MetaInfoItemList.module.css delete mode 100644 packages/cyberstorm/src/components/MetaInfoItemList/MetaInfoItemList.tsx delete mode 100644 packages/cyberstorm/src/components/Pagination/Pagination.module.css delete mode 100644 packages/cyberstorm/src/components/Pagination/Pagination.tsx delete mode 100644 packages/cyberstorm/src/components/Pagination/PaginationButton.module.css delete mode 100644 packages/cyberstorm/src/components/Pagination/PaginationButton.tsx delete mode 100644 packages/cyberstorm/src/components/SearchFilter/SearchFilter.tsx delete mode 100644 packages/cyberstorm/src/components/SearchFilter/Searchfilter.module.css delete mode 100644 packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css delete mode 100644 packages/cyberstorm/src/components/WrapperCard/WrapperCard.tsx rename packages/cyberstorm/src/{components/EmptyState/EmptyState.module.css => newComponents/EmptyState/EmptyState.css} (83%) rename packages/cyberstorm/src/{components => newComponents}/EmptyState/EmptyState.tsx (79%) rename packages/cyberstorm/src/{components => newComponents}/EmptyState/EmptyStateIcon.tsx (64%) rename packages/cyberstorm/src/{components => newComponents}/EmptyState/EmptyStateMessage.tsx (71%) rename packages/cyberstorm/src/{components => newComponents}/EmptyState/EmptyStateTitle.tsx (71%) rename packages/cyberstorm/src/{components => newComponents}/EmptyState/index.ts (100%) rename packages/cyberstorm/src/{components/SkeletonBox/SkeletonBox.module.css => newComponents/SkeletonBox/SkeletonBox.css} (94%) rename packages/cyberstorm/src/{components => newComponents}/SkeletonBox/SkeletonBox.tsx (78%) rename packages/cyberstorm/src/{components/Tooltip/Tooltip.module.css => newComponents/Tooltip/Tooltip.css} (80%) rename packages/cyberstorm/src/{components => newComponents}/Tooltip/Tooltip.tsx (87%) diff --git a/apps/cyberstorm-remix/app/Error.module.css b/apps/cyberstorm-remix/app/Error.module.css deleted file mode 100644 index 1412c6d8a..000000000 --- a/apps/cyberstorm-remix/app/Error.module.css +++ /dev/null @@ -1,407 +0,0 @@ -.root { - display: flex; - flex-direction: column; - gap: var(--space-32); - align-items: center; - justify-content: center; - - --glitch-color-1: var(--old--color-cyber-green-50); - --glitch-color-2: var(--old--color-accent-pink-50); -} - -.description { - color: var(--color-text-accent); - font-weight: var(--font-weight-semibold); - line-height: 1; -} - -.flavor { - font-weight: var(--font-weight-bold); - font-size: var(--space-32); - line-height: 1; - text-align: center; -} - -.glitch { - position: relative; - margin-top: var(--space-32); - margin-bottom: var(--space-48); - font-weight: var(--font-weight-extra-bold); - font-size: 12rem; - line-height: 1; -} - -.glitch::before, -.glitch::after { - position: absolute; - z-index: -1; - width: 110%; - content: attr(data-text); -} - -.glitch::before { - top: 10px; - left: 15px; - color: var(--glitch-color-1); - animation: - paths 5s step-end infinite, - opacity 5s step-end infinite, - font 8s step-end infinite, - movement 10s step-end infinite; -} - -.glitch::after { - top: 5px; - left: -10px; - color: var(--glitch-color-2); - animation: - paths 5s step-end infinite, - opacity 5s step-end infinite, - font 7s step-end infinite, - movement 8s step-end infinite; -} - -@keyframes paths { - 0% { - clip-path: polygon( - 0% 43%, - 83% 43%, - 83% 22%, - 23% 22%, - 23% 24%, - 91% 24%, - 91% 26%, - 18% 26%, - 18% 83%, - 29% 83%, - 29% 17%, - 41% 17%, - 41% 39%, - 18% 39%, - 18% 82%, - 54% 82%, - 54% 88%, - 19% 88%, - 19% 4%, - 39% 4%, - 39% 14%, - 76% 14%, - 76% 52%, - 23% 52%, - 23% 35%, - 19% 35%, - 19% 8%, - 36% 8%, - 36% 31%, - 73% 31%, - 73% 16%, - 1% 16%, - 1% 56%, - 50% 56%, - 50% 8% - ); - } - - 5% { - clip-path: polygon( - 0% 29%, - 44% 29%, - 44% 83%, - 94% 83%, - 94% 56%, - 11% 56%, - 11% 64%, - 94% 64%, - 94% 70%, - 88% 70%, - 88% 32%, - 18% 32%, - 18% 96%, - 10% 96%, - 10% 62%, - 9% 62%, - 9% 84%, - 68% 84%, - 68% 50%, - 52% 50%, - 52% 55%, - 35% 55%, - 35% 87%, - 25% 87%, - 25% 39%, - 15% 39%, - 15% 88%, - 52% 88% - ); - } - - 30% { - clip-path: polygon( - 0% 53%, - 93% 53%, - 93% 62%, - 68% 62%, - 68% 37%, - 97% 37%, - 97% 89%, - 13% 89%, - 13% 45%, - 51% 45%, - 51% 88%, - 17% 88%, - 17% 54%, - 81% 54%, - 81% 75%, - 79% 75%, - 79% 76%, - 38% 76%, - 38% 28%, - 61% 28%, - 61% 12%, - 55% 12%, - 55% 62%, - 68% 62%, - 68% 51%, - 0% 51%, - 0% 92%, - 63% 92%, - 63% 4%, - 65% 4% - ); - } - - 45% { - clip-path: polygon( - 0% 33%, - 2% 33%, - 2% 69%, - 58% 69%, - 58% 94%, - 55% 94%, - 55% 25%, - 33% 25%, - 33% 85%, - 16% 85%, - 16% 19%, - 5% 19%, - 5% 20%, - 79% 20%, - 79% 96%, - 93% 96%, - 93% 50%, - 5% 50%, - 5% 74%, - 55% 74%, - 55% 57%, - 96% 57%, - 96% 59%, - 87% 59%, - 87% 65%, - 82% 65%, - 82% 39%, - 63% 39%, - 63% 92%, - 4% 92%, - 4% 36%, - 24% 36%, - 24% 70%, - 1% 70%, - 1% 43%, - 15% 43%, - 15% 28%, - 23% 28%, - 23% 71%, - 90% 71%, - 90% 86%, - 97% 86%, - 97% 1%, - 60% 1%, - 60% 67%, - 71% 67%, - 71% 91%, - 17% 91%, - 17% 14%, - 39% 14%, - 39% 30%, - 58% 30%, - 58% 11%, - 52% 11%, - 52% 83%, - 68% 83% - ); - } - - 76% { - clip-path: polygon( - 0% 26%, - 15% 26%, - 15% 73%, - 72% 73%, - 72% 70%, - 77% 70%, - 77% 75%, - 8% 75%, - 8% 42%, - 4% 42%, - 4% 61%, - 17% 61%, - 17% 12%, - 26% 12%, - 26% 63%, - 73% 63%, - 73% 43%, - 90% 43%, - 90% 67%, - 50% 67%, - 50% 41%, - 42% 41%, - 42% 46%, - 50% 46%, - 50% 84%, - 96% 84%, - 96% 78%, - 49% 78%, - 49% 25%, - 63% 25%, - 63% 14% - ); - } - - 90% { - clip-path: polygon( - 0% 41%, - 13% 41%, - 13% 6%, - 87% 6%, - 87% 93%, - 10% 93%, - 10% 13%, - 89% 13%, - 89% 6%, - 3% 6%, - 3% 8%, - 16% 8%, - 16% 79%, - 0% 79%, - 0% 99%, - 92% 99%, - 92% 90%, - 5% 90%, - 5% 60%, - 0% 60%, - 0% 48%, - 89% 48%, - 89% 13%, - 80% 13%, - 80% 43%, - 95% 43%, - 95% 19%, - 80% 19%, - 80% 85%, - 38% 85%, - 38% 62% - ); - } - - 1%, - 7%, - 33%, - 47%, - 78%, - 93% { - clip-path: none; - } -} - -@keyframes movement { - 0% { - top: 0; - left: -20px; - } - - 15% { - top: 10px; - left: 10px; - } - - 60% { - top: 5px; - left: -10px; - } - - 75% { - top: -5px; - left: 20px; - } - - 100% { - top: 10px; - left: 5px; - } -} - -@keyframes opacity { - 0% { - opacity: 0.1; - } - - 5% { - opacity: 0.7; - } - - 30% { - opacity: 0.4; - } - - 45% { - opacity: 0.6; - } - - 76% { - opacity: 0.4; - } - - 90% { - opacity: 0.8; - } - - 1%, - 7%, - 33%, - 47%, - 78%, - 93% { - opacity: 0; - } -} - -@keyframes font { - 0% { - color: var(--glitch-color-1); - font-weight: 100; - } - - 20% { - color: #fff; - font-weight: var(--font-weight-medium); - } - - 50% { - color: var(--glitch-color-2); - font-weight: 300; - } - - 60% { - color: #fff; - font-weight: var(--font-weight-bold); - } - - 90% { - color: var(--glitch-color-1); - font-weight: var(--font-weight-medium); - } -} - -.glitch span { - animation: paths 5s step-end infinite; -} diff --git a/apps/cyberstorm-remix/app/Markdown.module.css b/apps/cyberstorm-remix/app/Markdown.module.css deleted file mode 100644 index 6f6d8f11f..000000000 --- a/apps/cyberstorm-remix/app/Markdown.module.css +++ /dev/null @@ -1,179 +0,0 @@ -.root { - display: flex; - flex-direction: column; - gap: 1.5rem; - color: var(--color-text--default); - font: var(--font-body); - font-weight: var(--font-weight-medium); - line-height: 1.6rem; - word-break: break-word; -} - -.root > :first-child { - padding-top: 0; -} - -/* - We can't control the elements inside the Markdown wrapper, e.g. to - give them class names, and linting requires pure selectors, so repeat - the .root class name on each selector. -*/ -.root h1, -.root h2, -.root h3, -.root h4, -.root h5, -.root h6 { - display: flex; - gap: 0.5rem; - align-items: flex-start; - align-self: stretch; - font: var(--font-body); - font-weight: var(--font-weight-bold); - line-height: normal; -} - -.root h1, -.root h2 { - padding: 2rem 0 0.5rem; - border-bottom: 1px solid #29295b; -} - -.root h3, -.root h4, -.root h5, -.root h6 { - padding-top: 1rem; -} - -.root h1 { - font-size: 2.25rem; -} - -.root h2 { - font-size: 1.75rem; -} - -.root h3 { - font-size: var(--font-size-body-xxl); -} - -.root h4 { - font-size: 1rem; -} - -.root h5 { - font-size: 0.875rem; -} - -.root h6 { - color: #9c9cc4; - font-size: 0.875rem; -} - -.root ul li, -.root ol li { - margin-inline-start: 0.75rem; -} - -.root img { - display: inline-block; -} - -.root li > ul, -.root li > ol { - margin-top: 0.25rem; -} - -.root pre { - padding: 1rem; - border: 1px solid #333370; - border-radius: 0.5rem; - background: #0f0f1f; -} - -.root code { - display: inline-flex; - padding: 0 0.35rem; - border: 1px solid #333370; - border-radius: 0.25rem; - color: #39e9aa; - font-weight: var(--font-weight-regular); - - font-size: 0.875rem; - font-family: var(--font-family-monospace); - font-style: normal; - line-height: 150%; - white-space: break-spaces; - overflow-wrap: break-word; - background: #0d0d21; -} - -.root pre code { - display: block; - padding: 0; - border: 0; - border-radius: 0; - color: #f5f5f6; -} - -.root a { - color: var(--old--color-cyber-green-50); -} - -.root blockquote { - display: flex; - flex-direction: column; - gap: 1rem; - padding-left: 2rem; - border-left: 4px solid #3c3c86; -} - -.root table { - border-collapse: separate; - border-spacing: 0; -} - -.root tbody tr:nth-child(even) { - background: #0d0d21; -} - -.root tbody tr:nth-child(odd) { - background: #15152d; -} - -.root table tr th, -.root table tr td { - padding: 0.75rem 1rem; - border-right: 1px solid #333370; - border-bottom: 1px solid #333370; - color: #fff; -} - -.root table tr th { - border-top: solid 1px #333370; - color: #c6c3ff; - text-align: left; - background: #1f1f42; -} - -.root table tr th:first-child, -.root table tr td:first-child { - border-left: 1px solid #333370; -} - -.root table tr:first-child th:first-child { - border-top-left-radius: 0.5rem; -} - -.root table tr:first-child th:last-child { - border-top-right-radius: 0.5rem; -} - -.root table tr:last-child td:first-child { - border-bottom-left-radius: 0.5rem; -} - -.root table tr:last-child td:last-child { - border-bottom-right-radius: 0.5rem; -} diff --git a/apps/cyberstorm-remix/app/RootLayout.module.css b/apps/cyberstorm-remix/app/RootLayout.module.css deleted file mode 100644 index 96b58ee17..000000000 --- a/apps/cyberstorm-remix/app/RootLayout.module.css +++ /dev/null @@ -1,92 +0,0 @@ -.root { - display: flex; - flex-direction: column; - min-height: 100vh; -} - -.content { - display: flex; - flex: 1; - flex-direction: row; - gap: 3rem; - align-items: flex-start; - justify-content: center; - width: 100%; - max-width: 100%; - padding: var(--content-padding-top-desktop) 1rem 6rem; -} - -.middleContainer { - position: relative; - display: flex; - flex: 1 1 auto; - flex-direction: column; - gap: 1rem; - width: 100%; - max-width: 83.5rem; -} - -.sideContainers { - position: sticky; - top: var(--header-height); - display: flex; - flex-basis: 0; - flex-direction: column; - flex-grow: 1; - gap: 2rem; - align-items: flex-start; - padding-top: 1rem; -} - -.pageHeader { - padding: 0; -} - -.pageBody { - display: flex; - flex-direction: column; -} - -.layoutSidebar { - display: flex; - flex-direction: column; - gap: 2rem; -} - -.main { - display: flex; - flex-direction: column; - gap: 2rem; -} - -@media (width >= 60rem) { - .layoutSidebar { - flex-flow: row wrap; - } - - .sidebar { - flex: 0 1 16rem; - } - - .main { - flex: 1; - } - - .fullWidth { - flex: 0 0 100%; - } - - .pageHeader { - padding: 2.5rem 0; - } - - .middleContainer { - gap: 0; - } -} - -@media (width <= 92.125rem) { - .sideContainers { - display: none; - } -} diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx index 94d07dacf..e333fe7e3 100644 --- a/apps/cyberstorm-remix/app/c/community.tsx +++ b/apps/cyberstorm-remix/app/c/community.tsx @@ -13,7 +13,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBook } from "@fortawesome/free-solid-svg-icons"; import { faDiscord } from "@fortawesome/free-brands-svg-icons"; import { ApiError } from "@thunderstore/thunderstore-api"; -import { PackageOrderOptions } from "~/commonComponents/PackageSearch/PackageOrder"; +import { PackageOrderOptions } from "~/commonComponents/PackageSearch/components/PackageOrder"; import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons"; import { DapperTs } from "@thunderstore/dapper-ts"; diff --git a/apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.css b/apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.css new file mode 100644 index 000000000..10c907114 --- /dev/null +++ b/apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.css @@ -0,0 +1,109 @@ +@layer nimbus-components { + .nimbus-commonComponents-checkboxList { + list-style: none; + + > li > label.__label { + display: flex; + gap: var(--gap-sm); + align-items: center; + justify-content: space-between; + padding: var(--space-8) var(--space-16); + border-radius: var(--radius-md); + color: var(--color-text-secondary); + font-weight: var(--font-weight-regular); + font-size: var(--font-size-body-md); + cursor: pointer; + transition: var(--animation-duration-xs); + user-select: none; + + > .__checkbox { + display: flex; + align-items: center; + justify-content: center; + width: var(--space-20); + height: var(--space-20); + + --icon-inline-size: var(--space-20); + + background-color: transparent; + transition: ease-out var(--animation-duration-xs); + } + + &.unselected { + --icon-color: var(--color-surface-a8); + } + + &.selected { + color: var(--color-cyber-green-7); + font-weight: var(--font-weight-bold); + + --icon-color: var(--color-cyber-green-7); + } + + &.off { + color: var(--color-text-secondary); + + & > .__checkbox > svg { + --icon-color: var(--color-surface-a8); + } + } + + &.include { + color: var(--color-cyber-green-7); + font-weight: var(--font-weight-bold); + + & > .__checkbox > svg { + --icon-color: var(--color-cyber-green-7); + } + } + + &.exclude { + color: var(--color-accent-red-7); + font-weight: var(--font-weight-bold); + + & > .__checkbox > svg { + --icon-color: var(--color-accent-red-7); + } + } + + &:hover { + color: var(--color-text-primary); + background-color: var(--color-surface-a5); + + &.unselected { + --icon-color: var(--color-surface-a10); + } + + &.selected { + color: var(--color-cyber-green-8); + + --icon-color: var(--color-cyber-green-8); + } + + &.off { + color: var(--color-text-primary); + + & > .__checkbox > svg { + --icon-color: var(--color-surface-a10); + } + } + + &.include { + color: var(--color-cyber-green-8); + + & > .__checkbox > svg { + --icon-color: var(--color-cyber-green-8); + } + } + + &.exclude { + color: var(--color-accent-red-8); + + & > .__checkbox > svg { + --icon-color: var(--color-accent-red-8); + } + } + } + } + } +} diff --git a/apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.tsx b/apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.tsx new file mode 100644 index 000000000..4cef79a4a --- /dev/null +++ b/apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.tsx @@ -0,0 +1,72 @@ +import { + faSquare, + faSquareCheck, + faSquareXmark, +} from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +import "./CheckboxList.css"; +import { CycleButton, NewIcon } from "@thunderstore/cyberstorm"; +import { classnames } from "@thunderstore/cyberstorm/src/utils/utils"; +import { resolveTriState } from "~/commonComponents/utils"; +import { TRISTATE } from "~/commonComponents/types"; + +type typeA = (v: B) => void; + +interface Props { + items: { + state: boolean | TRISTATE; + setStateFunc: typeA; + label: string; + }[]; +} + +const nextStateResolve = (state: TRISTATE | boolean) => + typeof state === "string" ? resolveTriState(state) : !state; + +const currentState = (state: TRISTATE | boolean) => + typeof state === "string" ? state : state ? "include" : "off"; + +/** + * CheckboxList which supports boolean and tri-state "checkboxes" + */ +export const CheckboxList = (props: Props) => { + const { items } = props; + + return ( +
    + {items.map((item) => { + const cs = currentState(item.state); + return ( +
  1. + +
    2. + ); + })} +
+ ); +}; + +CheckboxList.displayName = "CheckboxList"; diff --git a/apps/cyberstorm-remix/app/commonComponents/Collapsible/Collapsible.css b/apps/cyberstorm-remix/app/commonComponents/Collapsible/Collapsible.css new file mode 100644 index 000000000..99b6d7cba --- /dev/null +++ b/apps/cyberstorm-remix/app/commonComponents/Collapsible/Collapsible.css @@ -0,0 +1,26 @@ +@layer nimbus-components { + .nimbus-commonComponents-collapsible { + display: flex; + flex: 1; + flex-direction: column; + font-size: var(--font-size-body-md); + + > .__header { + display: flex; + gap: var(--gap-md); + justify-content: space-between; + padding: var(--space-8) var(--space-12); + font-weight: var(--font-weight-bold); + font-size: var(--font-size-body-lg); + } + + > .__content { + display: flex; + flex-direction: column; + gap: var(--gap-xs); + align-items: stretch; + align-self: stretch; + padding-bottom: var(--gap-xs); + } + } +} diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx b/apps/cyberstorm-remix/app/commonComponents/Collapsible/Collapsible.tsx similarity index 83% rename from apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx rename to apps/cyberstorm-remix/app/commonComponents/Collapsible/Collapsible.tsx index 109f42116..20146a330 100644 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx +++ b/apps/cyberstorm-remix/app/commonComponents/Collapsible/Collapsible.tsx @@ -1,7 +1,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 "./Collapsible.css"; import { NewIcon } from "@thunderstore/cyberstorm"; import { classnames } from "@thunderstore/cyberstorm/src/utils/utils"; @@ -17,11 +17,11 @@ export const CollapsibleMenu = (props: Props) => { const { headerTitle, defaultOpen, children } = props; return ( -
+
{headerTitle} @@ -29,7 +29,7 @@ export const CollapsibleMenu = (props: Props) => { - {children} +
{children}
); }; diff --git a/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.css b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.css index 430f72dfc..a6cc636a5 100644 --- a/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.css +++ b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.css @@ -1,58 +1,58 @@ -.nimbus-commoncomponents-collapsibletext { - display: flex; - flex-direction: row; - gap: var(--space-8); - align-items: center; - min-width: 0; - max-width: 100%; -} +@layer nimbus-components { + .nimbus-commonComponents-collapsibleText { + display: flex; + flex-direction: row; + gap: var(--space-8); + align-items: center; + min-width: 0; + max-width: 100%; -.nimbus-commoncomponents-collapsibletext:has( - .nimbus-commoncomponents-collapsibletext__opened - ) { - flex-direction: column; - align-items: flex-start; -} + &:has(.__opened) { + flex-direction: column; + align-items: flex-start; + } -.nimbus-commoncomponents-collapsibletext__text { - width: 100%; - min-width: 0; - max-width: 80ch; - max-height: 1lh; - overflow: hidden; - 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: var(--textshadow-default); - transition: max-height 500ms cubic-bezier(0, 1, 0, 1); -} + > .__text { + width: 100%; + min-width: 0; + max-width: 80ch; + max-height: 1lh; + overflow: hidden; + 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: var(--textshadow-default); + transition: max-height 500ms cubic-bezier(0, 1, 0, 1); + } -.nimbus-commoncomponents-collapsibletext__opened { - max-height: 30rem; - white-space: normal; - transition: max-height 500ms; -} + > .__opened { + max-height: 30rem; + white-space: normal; + transition: max-height 500ms; + } -.nimbus-commoncomponents-collapsibletext__show { - color: var(--color-text-accent); - font-weight: var(--font-weight-bold); - font-size: var(--font-size-body-md); - line-height: normal; - text-wrap: nowrap; - text-shadow: var(--textshadow-default); - background-color: transparent; -} - -@media (width <= 48rem) { - .nimbus-commoncomponents-collapsibletext__text { - font-size: var(--font-size-body-md); - line-height: var(--line-height-sm); + > .__show { + color: var(--color-text-accent); + font-weight: var(--font-weight-bold); + font-size: var(--font-size-body-md); + line-height: normal; + text-wrap: nowrap; + text-shadow: var(--textshadow-default); + background-color: transparent; + } } - .nimbus-commoncomponents-collapsibletext__show { - font-size: var(--font-size-body-sm); + @media (width <= 48rem) { + .__text { + font-size: var(--font-size-body-md); + line-height: var(--line-height-sm); + } + + .__show { + font-size: var(--font-size-body-sm); + } } } diff --git a/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.tsx b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.tsx index c5469426a..17f73ae5e 100644 --- a/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.tsx +++ b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.tsx @@ -15,20 +15,10 @@ export function CollapsibleText(props: CollapsibleTextProps) { const [opened, setOpened] = useState(!textIsTooLong); return ( -
-

- {text} -

+
+

{text}

{textIsTooLong ? ( - ) : null} diff --git a/apps/cyberstorm-remix/app/commonComponents/CopyButton/CopyButton.css b/apps/cyberstorm-remix/app/commonComponents/CopyButton/CopyButton.css new file mode 100644 index 000000000..14a1959fe --- /dev/null +++ b/apps/cyberstorm-remix/app/commonComponents/CopyButton/CopyButton.css @@ -0,0 +1,19 @@ +.nimbus-commonComponents-copyButton { + width: 1rem; + height: 1rem; + background: transparent; + + > .copy { + all: unset; + color: var(--color-text-tertiary); + } + + &:hover > .copy { + color: var(--color-highlight); + } + + > .checkmark { + all: unset; + color: var(--color-highlight); + } +} diff --git a/apps/cyberstorm-remix/app/commonComponents/CopyButton/CopyButton.tsx b/apps/cyberstorm-remix/app/commonComponents/CopyButton/CopyButton.tsx new file mode 100644 index 000000000..32ef63e85 --- /dev/null +++ b/apps/cyberstorm-remix/app/commonComponents/CopyButton/CopyButton.tsx @@ -0,0 +1,72 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faClone, faCheck } from "@fortawesome/free-solid-svg-icons"; +import { Dispatch, SetStateAction, useEffect, useState } from "react"; +import "./CopyButton.css"; +import { NewIcon, Tooltip } from "@thunderstore/cyberstorm/src"; +import React from "react"; + +interface CopyButtonProps { + text: string; +} + +export const CopyButton = React.forwardRef( + (props: CopyButtonProps, forwardedRef) => { + const { text, ...forwardedProps } = props; + + const [isSupported, setIsSupported] = useState(false); + const [isTooltipOpen, setIsTooltipOpen] = useState(false); + const [wasRecentlyCopied, setWasRecentlyCopied] = useState(false); + + useEffect(() => { + setIsSupported( + typeof window !== "undefined" && + typeof navigator?.clipboard !== "undefined" + ); + }, [setIsSupported]); + + return isSupported ? ( + + + + ) : null; + } +); + +CopyButton.displayName = "CopyButton"; + +function useCopyToClipboard( + text: string, + recentlyCopiedMethod: Dispatch> +) { + // Try to save to clipboard then save it in the state if worked + try { + navigator?.clipboard.writeText(text); + recentlyCopiedMethod(true); + setTimeout(() => { + recentlyCopiedMethod(false); + }, 2000); + } catch (error) { + console.warn("Copy failed", error); + } +} diff --git a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css index c8ba9559f..b76d917a6 100644 --- a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css +++ b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css @@ -1,5 +1,5 @@ -@layer nimbus-layout { - .nimbus-footer { +@layer nimbus-components { + .nimbus-commonComponents-footer { > .__content { flex-direction: row; min-height: 34rem; @@ -229,7 +229,7 @@ } @media (width <= 72rem) { - .nimbus-footer { + .nimbus-commonComponents-footer { > .__content { flex-direction: column; diff --git a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx index 4a7a83a1d..c2c8040b8 100644 --- a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx +++ b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx @@ -21,7 +21,7 @@ const GITHUB_URL = "https://github.com/thunderstore-io"; export function Footer() { return (