Add rest of the stories required for Communities page to Storybook

apps/cyberstorm-storybook/package.json

@@ -22,8 +22,5 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes"
-  },
-  "devDependencies": {
-    "@types/uuid": "^10.0.0"
   }
 }

apps/cyberstorm-storybook/stories/components/BreadCrumb.stories.tsx

@@ -47,6 +47,7 @@ const breadCrumbStory = (args: { excludeHome?: boolean | undefined }) => (
   </>
 );
 
-export const DefaultCrumbs: BreadCrumbsStory = (args) => breadCrumbStory(args);
+export const ReferenceCrumbs: BreadCrumbsStory = (args) =>
+  breadCrumbStory(args);
 export const ExcludeHomeCrumbs: BreadCrumbsStory = () =>
   breadCrumbStory({ excludeHome: true });

apps/cyberstorm-storybook/stories/components/CommunityCard.stories.tsx

@@ -0,0 +1,61 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { CommunityCard } from "@thunderstore/cyberstorm";
+import React from "react";
+
+const style: React.CSSProperties = {
+  padding: "3rem",
+  flexWrap: "wrap",
+  display: "grid",
+  flexDirection: "row",
+  gap: "1rem",
+  gridTemplateColumns: "repeat(auto-fit, minmax(15.5rem, 1fr))",
+};
+
+const defaultCommunity = {
+  name: "Risk of Rain 2",
+  identifier: "",
+  description: "",
+  discord_url: "",
+  datetime_created: "",
+  background_image_url: "",
+  cover_image_url: "",
+  icon_url: "",
+  total_download_count: 0,
+  total_package_count: 0,
+};
+
+const meta = {
+  title: "Cyberstorm/Components/CommunityCard",
+  component: CommunityCard,
+} as Meta<typeof CommunityCard>;
+
+const Template: StoryFn<typeof CommunityCard> = (args) => (
+  <div style={style}>
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+  </div>
+);
+
+const ReferenceCommunityCard = Template.bind({});
+ReferenceCommunityCard.args = { community: defaultCommunity };
+
+const LongCommunityCard = Template.bind({});
+LongCommunityCard.args = {
+  community: {
+    ...defaultCommunity,
+    name: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    total_download_count: 123456789,
+    total_package_count: 123456789,
+  },
+};
+
+export { meta as default, ReferenceCommunityCard, LongCommunityCard };

apps/cyberstorm-storybook/stories/components/Footer.stories.tsx

@@ -0,0 +1,15 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { Footer } from "@thunderstore/cyberstorm";
+import React from "react";
+
+const meta = {
+  title: "Cyberstorm/Components/Footer",
+  component: Footer,
+} as Meta<typeof Footer>;
+
+const Template: StoryFn<typeof Footer> = () => <Footer />;
+
+const ReferenceFooter = Template.bind({});
+ReferenceFooter.args = {};
+
+export { meta as default, ReferenceFooter };

apps/cyberstorm-storybook/stories/components/SearchFilter.stories.tsx

@@ -0,0 +1,28 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { SearchFilter } from "@thunderstore/cyberstorm";
+import React from "react";
+
+const meta = {
+  title: "Cyberstorm/Components/SearchFilter",
+  component: SearchFilter,
+} as Meta<typeof SearchFilter>;
+
+const defaultArgs = {
+  tags: [],
+};
+
+const Template: StoryFn<typeof SearchFilter> = (args) => (
+  <SearchFilter {...args} />
+);
+
+const MinimalSearchFilter = Template.bind({});
+MinimalSearchFilter.args = {
+  ...defaultArgs,
+};
+
+const ReferenceSearchFilter = Template.bind({});
+ReferenceSearchFilter.args = {
+  tags: ["tag1", "tag2", "tag3", "tag4", "tag5"],
+};
+
+export { meta as default, MinimalSearchFilter, ReferenceSearchFilter };

apps/cyberstorm-storybook/stories/components/TextInput.stories.tsx

@@ -0,0 +1,53 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { TextInput } from "@thunderstore/cyberstorm";
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+
+const meta = {
+  title: "Cyberstorm/Components/TextInput",
+  component: TextInput,
+} as Meta<typeof TextInput>;
+
+const defaultArgs = {};
+
+const Template: StoryFn<typeof TextInput> = (args) => <TextInput {...args} />;
+
+const ReferenceTextInput = Template.bind({});
+ReferenceTextInput.args = defaultArgs;
+
+const IconTextInput = Template.bind({});
+IconTextInput.args = {
+  ...defaultArgs,
+  leftIcon: <FontAwesomeIcon icon={faSearch} />,
+};
+
+const PlaceholderTextInput = Template.bind({});
+PlaceholderTextInput.args = {
+  ...defaultArgs,
+  placeholder: "Placeholder text",
+};
+
+const ValueTextInput = Template.bind({});
+ValueTextInput.args = {
+  ...defaultArgs,
+  value: "Text value",
+};
+
+const ValueTextWithClearInput = Template.bind({});
+ValueTextWithClearInput.args = {
+  ...defaultArgs,
+  value: "Text value",
+  clearValue: () => {
+    return;
+  },
+};
+
+export {
+  meta as default,
+  ReferenceTextInput,
+  IconTextInput,
+  PlaceholderTextInput,
+  ValueTextInput,
+  ValueTextWithClearInput,
+};

apps/cyberstorm-storybook/stories/components/Title.stories.tsx

@@ -0,0 +1,30 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { Title } from "@thunderstore/cyberstorm";
+import React from "react";
+
+const meta = {
+  title: "Cyberstorm/Components/Title",
+  component: Title,
+} as Meta<typeof Title>;
+
+const defaultArgs = {
+  text: "This is a title",
+};
+
+const Template: StoryFn<typeof Title> = (args) => <Title {...args} />;
+
+const ReferenceTitle = Template.bind({});
+ReferenceTitle.args = defaultArgs;
+
+const LongTitle = Template.bind({});
+LongTitle.args = {
+  text:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n" +
+    "Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. \n" +
+    "Vestibulum sapien.",
+};
+
+const EmptyTitle = Template.bind({});
+EmptyTitle.args = { text: "" };
+
+export { meta as default, ReferenceTitle, LongTitle, EmptyTitle };

packages/cyberstorm/src/components/Header/DevelopersDropDown.tsx

@@ -0,0 +1,58 @@
+import { faCaretDown, faCode } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import * as Button from "../Button/";
+import { DropDown, DropDownItem } from "../DropDown/DropDown";
+import { DropDownLink } from "../DropDown/DropDownLink";
+import styles from "./Header.module.css";
+
+interface Props {
+  squareButton?: boolean;
+}
+
+export const DevelopersDropDown = (props: Props) => (
+  <DropDown
+    trigger={
+      props.squareButton ? (
+        <Button.Root
+          paddingSize="mediumSquare"
+          colorScheme="default"
+          tooltipText="Developers"
+          className={styles.developersSquareButton}
+        >
+          <Button.ButtonIcon>
+            <FontAwesomeIcon icon={faCode} />
+          </Button.ButtonIcon>
+        </Button.Root>
+      ) : (
+        <Button.Root paddingSize="large" colorScheme="transparentDefault">
+          <Button.ButtonLabel fontSize="large" fontWeight="600">
+            Developers
+          </Button.ButtonLabel>
+          <Button.ButtonIcon>
+            <FontAwesomeIcon icon={faCaretDown} />
+          </Button.ButtonIcon>
+        </Button.Root>
+      )
+    }
+    content={[
+      <a href="/api/docs" key="docs">
+        <DropDownItem content={<DropDownLink label="API Docs" />} />
+      </a>,
+      <a href="https://github.com/thunderstore-io" key="github">
+        <DropDownItem content={<DropDownLink label="GitHub" isExternal />} />
+      </a>,
+      <a href="/package/create/docs/" key="old_format_docs">
+        <DropDownItem content={<DropDownLink label="Package Format Docs" />} />
+      </a>,
+      <a href="/tools/markdown-preview/" key="old_markdown_preview">
+        <DropDownItem content={<DropDownLink label="Markdown Preview" />} />
+      </a>,
+      <a href="/tools/manifest-v1-validator/" key="old_manifest_validator">
+        <DropDownItem content={<DropDownLink label="Manifest Validator" />} />
+      </a>,
+    ]}
+  />
+);
+
+DevelopersDropDown.displayName = "DevelopersDropDown";

packages/cyberstorm/src/components/Header/Header.module.css

@@ -0,0 +1,124 @@
+.root {
+  position: sticky;
+  top: 0;
+  z-index: 99999;
+  display: flex;
+  gap: var(--gap--32);
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: var(--header-height);
+  background-color: rgb(16 16 40 / 0.85);
+  backdrop-filter: blur(10px);
+}
+
+.item {
+  display: flex;
+  flex: 2 1 100%;
+}
+
+.item:last-child {
+  justify-content: flex-end;
+  padding-right: 0.75rem;
+}
+
+.nav {
+  display: flex;
+  gap: var(--gap--16);
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.search {
+  display: flex;
+  flex: 1 2 100%;
+  justify-content: center;
+}
+
+.logoWrapper {
+  display: flex;
+  width: 1.655rem;
+  height: 1.463rem;
+  margin: 0 0.75rem 0 1.25rem;
+  color: var(--color-highlight);
+}
+
+.navButtons {
+  display: flex;
+  gap: var(--space--8);
+}
+
+.dropDownUserInfo {
+  display: flex;
+  gap: var(--gap--16);
+  margin: 0 var(--space--8);
+  padding: var(--space--8) var(--space--16);
+  border-radius: var(--border-radius--8);
+}
+
+.dropDownUserInfo:hover {
+  background-color: var(--color-surface--6);
+}
+
+.dropdownUserInfoDetails {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.dropdownUserInfoDetails_userName {
+  color: var(--color-text--default);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size--m);
+  line-height: 1;
+}
+
+.dropdownUserInfoDetails_description {
+  color: var(--color-text--tertiary);
+  font-size: var(--font-size--m);
+  line-height: 1;
+}
+
+.narrowHeader {
+  display: none;
+}
+
+.narrowHeader > a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.developersSquareButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 63.5rem) {
+  .root {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+
+  .narrowHeader {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  .logoWrapper {
+    display: flex;
+    width: 2rem;
+    height: 2rem;
+    margin: 0.625rem;
+    color: var(--color-highlight);
+  }
+
+  .wideHeader,
+  .navButtons {
+    display: none;
+  }
+}