able to add githubUsername

siriwatknp · Oct 11, 2023 · 07115f3 · 07115f3
1 parent 5ca7927
commit 07115f3
Show file tree

Hide file tree

Showing 52 changed files with 97 additions and 3 deletions.
diff --git a/.hygen/_templates/block/new/Component.stories.ejs.t b/.hygen/_templates/block/new/Component.stories.ejs.t
@@ -13,6 +13,7 @@ const meta = {
   component: <%=h.toName(name)%>,
   parameters: {
     layout: "centered",
+    githubUsername: "", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof <%=h.toName(name)%>>;

diff --git a/.storybook/decorators/Author.tsx b/.storybook/decorators/Author.tsx
@@ -0,0 +1,34 @@
+import React, { memo } from "react";
+import { Img } from "@storybook/components";
+import { useParameter } from "@storybook/manager-api";
+
+export const Tool = memo(function MyAddonSelector() {
+  const author = useParameter<string | undefined>("githubUsername");
+  if (!author) {
+    return null;
+  }
+  return (
+    <a
+      key="contributor"
+      style={{
+        display: "flex",
+        gap: "0.25rem",
+        alignItems: "center",
+        alignSelf: "center",
+        fontSize: "0.75rem",
+        fontWeight: 600,
+        color: "#029CFD",
+        textDecoration: "none",
+      }}
+      href={`/~https://github.com/${author}`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Img
+        src={`/~https://github.com/${author}.png?size=64`}
+        style={{ width: 28, borderRadius: 28 }}
+      />
+      By {author}
+    </a>
+  );
+});
diff --git a/.storybook/manager.ts → .storybook/manager.tsx b/.storybook/manager.ts → .storybook/manager.tsx
@@ -1,10 +1,12 @@
-import { addons } from "@storybook/addons";
+import React from "react";
+import ReactGA from "react-ga4";
+import { addons, types } from "@storybook/addons";
 import {
   STORY_CHANGED,
   STORY_ERRORED,
   STORY_MISSING,
 } from "@storybook/core-events";
-import ReactGA from "react-ga4";
+import { Tool } from "./decorators/Author";
 
 // https://storybook.js.org/docs/react/configure/features-and-behavior
 addons.setConfig({
@@ -41,3 +43,11 @@ addons.register("google-analytics", (api) => {
     });
   });
 });
+
+addons.register("contributor", () => {
+  addons.add("contributor/toolbar", {
+    title: "Author",
+    type: types.TOOL,
+    render: Tool as unknown as () => React.ReactElement,
+  });
+});
diff --git a/blocks/card-apple-arcade/src/CardAppleArcade.stories.tsx b/blocks/card-apple-arcade/src/CardAppleArcade.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardAppleArcade,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardAppleArcade>;

diff --git a/blocks/card-apple-essentials/src/CardAppleEssentials.stories.tsx b/blocks/card-apple-essentials/src/CardAppleEssentials.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardAppleEssentials,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardAppleEssentials>;

diff --git a/blocks/card-apple-video/src/CardAppleVideo.stories.tsx b/blocks/card-apple-video/src/CardAppleVideo.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardAppleVideo,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardAppleVideo>;

diff --git a/blocks/card-cover-interest/src/CardCoverInterest.stories.tsx b/blocks/card-cover-interest/src/CardCoverInterest.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardCoverInterest,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardCoverInterest>;

diff --git a/blocks/card-cover-stream/src/CardCoverStream.stories.tsx b/blocks/card-cover-stream/src/CardCoverStream.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardCoverStream,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardCoverStream>;

diff --git a/blocks/card-cover-travel/src/CardCoverTravel.stories.tsx b/blocks/card-cover-travel/src/CardCoverTravel.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardCoverTravel,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardCoverTravel>;

diff --git a/blocks/card-cover-trip/src/CardCoverTrip.stories.tsx b/blocks/card-cover-trip/src/CardCoverTrip.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardCoverTrip,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardCoverTrip>;

diff --git a/blocks/card-dashboard-company/src/CardDashboardCompany.stories.tsx b/blocks/card-dashboard-company/src/CardDashboardCompany.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardDashboardCompany,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardDashboardCompany>;

diff --git a/blocks/card-dashboard-stat1/src/CardDashboardStat1.stories.tsx b/blocks/card-dashboard-stat1/src/CardDashboardStat1.stories.tsx
@@ -10,6 +10,7 @@ const meta = {
   component: CardDashboardStat1,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardDashboardStat1>;

diff --git a/blocks/card-dashboard-stat2/src/CardDashboardStat2.stories.tsx b/blocks/card-dashboard-stat2/src/CardDashboardStat2.stories.tsx
@@ -10,6 +10,7 @@ const meta = {
   component: CardDashboardStat2,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardDashboardStat2>;

diff --git a/blocks/card-dashboard-stat3/src/CardDashboardStat3.stories.tsx b/blocks/card-dashboard-stat3/src/CardDashboardStat3.stories.tsx
@@ -10,6 +10,7 @@ const meta = {
   component: CardDashboardStat3,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardDashboardStat3>;

diff --git a/blocks/card-dashboard-stat4/src/CardDashboardStat4.stories.tsx b/blocks/card-dashboard-stat4/src/CardDashboardStat4.stories.tsx
@@ -10,6 +10,7 @@ const meta = {
   component: CardDashboardStat4,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardDashboardStat4>;

diff --git a/blocks/card-dashboard-stat5/src/CardDashboardStat5.stories.tsx b/blocks/card-dashboard-stat5/src/CardDashboardStat5.stories.tsx
@@ -10,6 +10,7 @@ const meta = {
   component: CardDashboardStat5,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardDashboardStat5>;

diff --git a/blocks/card-dashboard-stat6/src/CardDashboardStat6.stories.tsx b/blocks/card-dashboard-stat6/src/CardDashboardStat6.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardDashboardStat6,
   parameters: {
     layout: "padded",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardDashboardStat6>;

diff --git a/blocks/card-featured-city/src/CardFeaturedCity.stories.tsx b/blocks/card-featured-city/src/CardFeaturedCity.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardFeaturedCity,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [
     storyDialog(Usage),

diff --git a/blocks/card-featured-repo/src/CardFeaturedRepo.stories.tsx b/blocks/card-featured-repo/src/CardFeaturedRepo.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardFeaturedRepo,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardFeaturedRepo>;

diff --git a/blocks/card-form-signup/src/CardFormSignup.stories.tsx b/blocks/card-form-signup/src/CardFormSignup.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardFormSignup,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardFormSignup>;

diff --git a/blocks/card-grid-simple/src/CardGridSimple.stories.tsx b/blocks/card-grid-simple/src/CardGridSimple.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardGridSimple,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardGridSimple>;

diff --git a/blocks/card-link-embed/src/CardLinkEmbed.stories.tsx b/blocks/card-link-embed/src/CardLinkEmbed.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardLinkEmbed,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardLinkEmbed>;

diff --git a/blocks/card-news-maldives/src/CardNewsMaldives.stories.tsx b/blocks/card-news-maldives/src/CardNewsMaldives.stories.tsx
@@ -10,6 +10,7 @@ const meta = {
   component: CardNewsMaldives,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardNewsMaldives>;

diff --git a/blocks/card-news-plane/src/CardNewsPlane.stories.tsx b/blocks/card-news-plane/src/CardNewsPlane.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardNewsPlane,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardNewsPlane>;

diff --git a/blocks/card-preview-cafe/src/CardPreviewCafe.stories.tsx b/blocks/card-preview-cafe/src/CardPreviewCafe.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardPreviewCafe,
   parameters: {
     layout: "centered",
+    githubUsername: "kevintruo",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardPreviewCafe>;

diff --git a/blocks/card-preview-cafe2/src/CardPreviewCafe2.stories.tsx b/blocks/card-preview-cafe2/src/CardPreviewCafe2.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardPreviewCafe2,
   parameters: {
     layout: "centered",
+    githubUsername: "kevintruo",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardPreviewCafe2>;

diff --git a/blocks/card-pricing-plan/src/CardPricingPlan.stories.tsx b/blocks/card-pricing-plan/src/CardPricingPlan.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardPricingPlan,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardPricingPlan>;

diff --git a/blocks/card-pricing-plan2/src/CardPricingPlan2.stories.tsx b/blocks/card-pricing-plan2/src/CardPricingPlan2.stories.tsx
@@ -23,6 +23,7 @@ const meta = {
   },
   parameters: {
     layout: "centered",
+    githubUsername: "kevintruo",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardPricingPlan2>;

diff --git a/blocks/card-social-reply/src/CardSocialReply.stories.tsx b/blocks/card-social-reply/src/CardSocialReply.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardSocialReply,
   parameters: {
     layout: "centered",
+    githubUsername: "bossthanawat",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardSocialReply>;
@@ -27,7 +28,7 @@ export const Reply: Story = {
         overflow: "auto",
       }}
     >
-      <CardSocialReply/>
+      <CardSocialReply />
     </div>
   ),
 };
diff --git a/blocks/card-social-suggestions/src/CardSocialSuggestions.stories.tsx b/blocks/card-social-suggestions/src/CardSocialSuggestions.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CardSocialSuggestions,
   parameters: {
     layout: "centered",
+    githubUsername: "pobch",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardSocialSuggestions>;

diff --git a/blocks/card-travel-spa/src/CardTravelSpa.stories.tsx b/blocks/card-travel-spa/src/CardTravelSpa.stories.tsx
@@ -11,6 +11,7 @@ const meta = {
   component: CardTravelSpa,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [
     storyDialog(Usage),

diff --git a/blocks/carousel-apple-games/src/CarouselAppleGames.stories.tsx b/blocks/carousel-apple-games/src/CarouselAppleGames.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CarouselAppleGames,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CarouselAppleGames>;

diff --git a/blocks/cmdk-joy-default/src/CmdkJoyDefault.stories.tsx b/blocks/cmdk-joy-default/src/CmdkJoyDefault.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: CmdkJoyDefault,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CmdkJoyDefault>;

diff --git a/blocks/input-color-picker/src/InputColorPicker.stories.tsx b/blocks/input-color-picker/src/InputColorPicker.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: InputColorPicker,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof InputColorPicker>;

diff --git a/blocks/input-file-upload/src/InputFileUpload.stories.tsx b/blocks/input-file-upload/src/InputFileUpload.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: InputFileUpload,
   parameters: {
     layout: "centered",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof InputFileUpload>;

diff --git a/blocks/landing-cookies-toolbar/src/LandingCookiesToolbar.stories.tsx b/blocks/landing-cookies-toolbar/src/LandingCookiesToolbar.stories.tsx
@@ -10,6 +10,7 @@ const meta = {
   component: LandingCookiesToolbar,
   parameters: {
     layout: "fullscreen",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof LandingCookiesToolbar>;

diff --git a/blocks/landing-main-benefit/src/LandingMainBenefit.stories.tsx b/blocks/landing-main-benefit/src/LandingMainBenefit.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: LandingMainBenefit,
   parameters: {
     layout: "fullscreen",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof LandingMainBenefit>;

diff --git a/blocks/landing-main-evervault/src/LandingMainEvervault.stories.tsx b/blocks/landing-main-evervault/src/LandingMainEvervault.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: LandingMainEvervault,
   parameters: {
     layout: "fullscreen",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof LandingMainEvervault>;

diff --git a/blocks/layout-carousel-snap/src/LayoutCarouselSnap.stories.tsx b/blocks/layout-carousel-snap/src/LayoutCarouselSnap.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: LayoutCarouselSnap,
   parameters: {
     layout: "padded",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof LayoutCarouselSnap>;

diff --git a/blocks/layout-dashboard-curve/src/LayoutDashboardCurve.stories.tsx b/blocks/layout-dashboard-curve/src/LayoutDashboardCurve.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: LayoutDashboardCurve,
   parameters: {
     layout: "fullscreen",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof LayoutDashboardCurve>;

diff --git a/blocks/layout-dashboard-inset/src/LayoutDashboardInset.stories.tsx b/blocks/layout-dashboard-inset/src/LayoutDashboardInset.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: LayoutDashboardInset,
   parameters: {
     layout: "fullscreen",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof LayoutDashboardInset>;

diff --git a/blocks/layout-dashboard-starter/src/LayoutDashboardStarter.stories.tsx b/blocks/layout-dashboard-starter/src/LayoutDashboardStarter.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: LayoutDashboardStarter,
   parameters: {
     layout: "fullscreen",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof LayoutDashboardStarter>;

diff --git a/blocks/layout-grid-autofill/src/LayoutGridAutofill.stories.tsx b/blocks/layout-grid-autofill/src/LayoutGridAutofill.stories.tsx
@@ -9,6 +9,7 @@ const meta = {
   component: LayoutGridAutofill,
   parameters: {
     layout: "padded",
+    githubUsername: "siriwatknp",
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof LayoutGridAutofill>;