Fix Cyberstorm Storybook and BreadCrumb's story

thunderstore-io · Aug 27, 2024 · a3692b9 · a3692b9
1 parent b391fd0
commit a3692b9
Show file tree

Hide file tree

Showing 13 changed files with 152 additions and 530 deletions.
diff --git a/apps/cyberstorm-storybook/.storybook/main.js b/apps/cyberstorm-storybook/.storybook/main.js
@@ -11,16 +11,6 @@ export default {
       files: "*.@(mdx|stories.*)",
       titlePrefix: "@thunderstore",
     },
-    {
-      directory: "../stories/layouts",
-      files: "*.@(mdx|stories.*)",
-      titlePrefix: "@thunderstore",
-    },
-    {
-      directory: "../stories/pages",
-      files: "*.@(mdx|stories.*)",
-      titlePrefix: "@thunderstore",
-    },
   ],
   addons: [
     "@storybook/addon-links",

diff --git a/apps/cyberstorm-storybook/.storybook/preview.js b/apps/cyberstorm-storybook/.storybook/preview.js
@@ -1,17 +1,8 @@
 import React from "react";
 
-import {
-  LinkingProvider,
-  CyberstormProviders,
-  Footer,
-  Header,
-} from "@thunderstore/cyberstorm";
+import { CyberstormProviders, LinkingProvider } from "@thunderstore/cyberstorm";
 import "@thunderstore/cyberstorm-styles";
-import { DapperProvider } from "@thunderstore/dapper";
-import { DapperFake } from "@thunderstore/dapper-fake";
 import { LinkLibrary } from "../LinkLibrary";
-import { SessionProvider } from "../SessionContext";
-// import styles from "../../cyberstorm-nextjs/app/RootLayout.module.css";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -33,18 +24,7 @@ export const decorators = [
     return (
       <LinkingProvider value={LinkLibrary}>
         <CyberstormProviders>
-          <SessionProvider>
-            <DapperProvider dapperConstructor={() => new DapperFake()}>
-              <LinkingProvider value={LinkLibrary}>
-                {/* <div className={styles.root}>
-                  <Header />
-                  <Story />
-                  <Footer />
-                </div> */}
-                <Story />
-              </LinkingProvider>
-            </DapperProvider>
-          </SessionProvider>
+          <Story />
         </CyberstormProviders>
       </LinkingProvider>
     );

diff --git a/apps/cyberstorm-storybook/LinkLibrary.tsx b/apps/cyberstorm-storybook/LinkLibrary.tsx
@@ -27,15 +27,43 @@ function linkOnClick(event: React.MouseEvent<HTMLAnchorElement>) {
 
 const library: LinkLibrary = {
   Anonymous: (p) => Link(p),
-  Communities: (p) => Link({ ...p, url: "/communities/" }),
+  Communities: (p) =>
+    Link({
+      ...p,
+      url: "/communities",
+    }),
   Community: (p) => Link({ ...p, url: `/c/${p.community}/` }),
   CommunityPackages: (p) => Link({ ...p, url: `/c/${p.community}/packages/` }),
-  Index: (p) => Link({ ...p, url: "/" }),
+  Index: (p) =>
+    Link({
+      ...p,
+      url: "/communities",
+    }), // /communities temporarily the frontpage
   ManifestValidator: (p) =>
     Link({ ...p, url: "/developers/manifest-validator/" }),
   MarkdownPreview: (p) => Link({ ...p, url: "/developers/markdown-preview/" }),
   Package: (p) =>
     Link({ ...p, url: `/c/${p.community}/p/${p.namespace}/${p.package}/` }),
+  PackageWiki: (p) =>
+    Link({
+      ...p,
+      url: `/c/${p.community}/p/${p.namespace}/${p.package}/wiki`,
+    }),
+  PackageChangelog: (p) =>
+    Link({
+      ...p,
+      url: `/c/${p.community}/p/${p.namespace}/${p.package}/changelog`,
+    }),
+  PackageVersions: (p) =>
+    Link({
+      ...p,
+      url: `/c/${p.community}/p/${p.namespace}/${p.package}/versions`,
+    }),
+  PackageSource: (p) =>
+    Link({
+      ...p,
+      url: `/c/${p.community}/p/${p.namespace}/${p.package}/source`,
+    }),
   PackageDependants: (p) =>
     Link({
       ...p,
@@ -51,9 +79,14 @@ const library: LinkLibrary = {
   PackageUpload: (p) => Link({ ...p, url: "/developers/upload-package/" }),
   PrivacyPolicy: (p) => Link({ ...p, url: "/privacy-policy/" }),
   Settings: (p) => Link({ ...p, url: `/settings/` }),
+  SettingsAccount: (p) => Link({ ...p, url: `/settings/account/` }),
   Team: (p) => Link({ ...p, url: `/c/${p.community}/p/${p.team}/` }),
   Teams: (p) => Link({ ...p, url: `/teams/` }),
-  TeamSettings: (p) => Link({ ...p, url: `/teams/${p.team}/` }),
+  TeamSettings: (p) => Link({ ...p, url: `/teams/${p.team}` }),
+  TeamSettingsMembers: (p) => Link({ ...p, url: `/teams/${p.team}/members` }),
+  TeamSettingsServiceAccounts: (p) =>
+    Link({ ...p, url: `/teams/${p.team}/service-accounts` }),
+  TeamSettingsSettings: (p) => Link({ ...p, url: `/teams/${p.team}/settings` }),
   TermsOfService: (p) => Link({ ...p, url: "/terms-of-service/" }),
   User: (p) => Link({ ...p, url: `/u/${p.user}/` }),
 };

diff --git a/apps/cyberstorm-storybook/SessionContext.tsx b/apps/cyberstorm-storybook/SessionContext.tsx
diff --git a/apps/cyberstorm-storybook/package.json b/apps/cyberstorm-storybook/package.json
@@ -22,5 +22,8 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes"
+  },
+  "devDependencies": {
+    "@types/uuid": "^10.0.0"
   }
 }
diff --git a/apps/cyberstorm-storybook/stories/components/BreadCrumb.stories.tsx b/apps/cyberstorm-storybook/stories/components/BreadCrumb.stories.tsx
@@ -16,35 +16,37 @@ export default {
 type BreadCrumbsStory = StoryFn<typeof BreadCrumbs>;
 const community = "riskofrain2";
 
-export const FullCrumbs: BreadCrumbsStory = (args) => (
-  <BreadCrumbs {...args}>
-    <CyberstormLink linkId="Community" community={community}>
-      Risk of Rain 2
-    </CyberstormLink>
-    <CyberstormLink linkId="CommunityPackages" community={community}>
-      Packages
-    </CyberstormLink>
-    Popular
-  </BreadCrumbs>
-);
+const breadCrumbStory = (args: { excludeHome?: boolean | undefined }) => (
+  <>
+    <BreadCrumbs {...args} />
 
-export const HomeOnly: BreadCrumbsStory = (args) => <BreadCrumbs {...args} />;
+    <BreadCrumbs {...args}>
+      <CyberstormLink linkId="Community" community={community}>
+        Risk of Rain 2
+      </CyberstormLink>
+    </BreadCrumbs>
 
-export const OneCrumb: BreadCrumbsStory = (args) => (
-  <BreadCrumbs {...args}>
-    <CyberstormLink linkId="Community" community={community}>
-      Risk of Rain 2
-    </CyberstormLink>
-  </BreadCrumbs>
-);
+    <BreadCrumbs {...args}>
+      <CyberstormLink linkId="Community" community={community}>
+        Risk of Rain 2
+      </CyberstormLink>
+      <CyberstormLink linkId="CommunityPackages" community={community}>
+        Packages
+      </CyberstormLink>
+    </BreadCrumbs>
 
-export const TwoCrumbs: BreadCrumbsStory = (args) => (
-  <BreadCrumbs {...args}>
-    <CyberstormLink linkId="Community" community={community}>
-      Risk of Rain 2
-    </CyberstormLink>
-    <CyberstormLink linkId="CommunityPackages" community={community}>
-      Packages
-    </CyberstormLink>
-  </BreadCrumbs>
+    <BreadCrumbs {...args}>
+      <CyberstormLink linkId="Community" community={community}>
+        Risk of Rain 2
+      </CyberstormLink>
+      <CyberstormLink linkId="CommunityPackages" community={community}>
+        Packages
+      </CyberstormLink>
+      Popular
+    </BreadCrumbs>
+  </>
 );
+
+export const DefaultCrumbs: BreadCrumbsStory = (args) => breadCrumbStory(args);
+export const ExcludeHomeCrumbs: BreadCrumbsStory = () =>
+  breadCrumbStory({ excludeHome: true });
diff --git a/packages/cyberstorm/src/components/BreadCrumbs/BreadCrumbs.tsx b/packages/cyberstorm/src/components/BreadCrumbs/BreadCrumbs.tsx
@@ -11,6 +11,7 @@ type BreadCrumbsProps = PropsWithChildren<{
   excludeHome?: boolean;
 }>;
 
+// TODO: Bug: when excludeHome is true, last element's style is wrong
 export function BreadCrumbs(props: BreadCrumbsProps) {
   const children = React.Children.toArray(props.children);