refactor: bring online all existing stories

Author: TylerAPfledderer

.storybook/main.ts

@@ -15,13 +15,8 @@ import { propNames } from "@chakra-ui/react"
  * The primary recommendation is to upgrade to Yarn 3 if possible
  */
 
-/**
- * Temporary list of allowed stories during migration to NextJS
- */
-const tempStoryList = ["../src/components/Buttons/**/*.stories.@(ts|tsx)"]
-
 const config: StorybookConfig = {
-  stories: tempStoryList,
+  stories: ["../src/components/**/*.stories.{ts,tsx}"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

src/components/BannerNotification/BannerNotification.stories.tsx

@@ -18,7 +18,7 @@ export default {
  * and content from `../../content/developers/tutorials/hello-world-smart-contract-fullstack/index.md`
  */
 export const PostMergeBanner: StoryFn<typeof BannerNotification> = (args) => {
-  const { t } = useTranslation()
+  const { t } = useTranslation("page-upgrades")
 
   return (
     <BannerNotification {...args}>

src/components/BaseStories/Heading.stories.tsx

@@ -68,7 +68,7 @@ const headingScale: Array<HeadingProps> = [
 
 export const Heading: Story = {
   args: {
-    children: <Translation id="page-index-title" />,
+    children: <Translation id="page-index:page-index-title" />,
   },
   render: (args) => (
     <VStack w="full">
@@ -85,7 +85,7 @@ export const Heading: Story = {
               textAlign="end"
               size={obj.size}
             >
-              {obj.size as string|| "xl"}
+              {(obj.size as string) || "xl"}
             </HeadingComponent>
             <HeadingComponent flex="3" {...obj}>
               {args.children}

src/components/BaseStories/Text.stories.tsx

@@ -37,9 +37,11 @@ type Story = StoryObj<typeof meta>
 
 const textSizes = components.Text.sizes
 
+const SINGLE_TEXT_CHILD = <Translation id="page-index:page-index-title" />
+
 export const Normal: Story = {
   args: {
-    children: <Translation id="page-index-title" />,
+    children: SINGLE_TEXT_CHILD,
   },
   render: (args) => {
     return (
@@ -65,7 +67,7 @@ export const Normal: Story = {
 
 export const Bold: Story = {
   args: {
-    children: <Translation id="page-index-title" />,
+    children: SINGLE_TEXT_CHILD,
     fontWeight: "bold",
   },
   render: (args) => {
@@ -91,7 +93,7 @@ export const Bold: Story = {
 }
 export const Italic: Story = {
   args: {
-    children: <Translation id="page-index-title" />,
+    children: SINGLE_TEXT_CHILD,
     fontStyle: "italic",
   },
   render: (args) => {
@@ -118,7 +120,7 @@ export const Italic: Story = {
 
 export const Link: StoryObj<typeof ChakraLink> = {
   args: {
-    children: <Translation id="page-index-title" />,
+    children: SINGLE_TEXT_CHILD,
   },
   render: (args) => {
     return (

src/components/Hero/HubHero/HubHero.stories.tsx

@@ -30,9 +30,9 @@ import learnHubHeroImg from "../../../../public/heroes/learn-hub-hero.png"
 
 export const HubHero: StoryObj<typeof meta> = {
   args: {
-    title: "learn-hub",
-    header: "hero-header",
-    description: "hero-subtitle",
+    title: "common:learn-hub",
+    header: "page-learn:hero-header",
+    description: "page-learn:hero-subtitle",
     heroImg: learnHubHeroImg,
   },
 
@@ -42,7 +42,7 @@ export const HubHero: StoryObj<typeof meta> = {
 
     const buttons: CommonHeroProps["buttons"] = [
       {
-        content: t("hero-button-lets-get-started"),
+        content: t("page-learn:hero-button-lets-get-started"),
         toId: "what-is-crypto-ethereum",
         matomo: {
           eventCategory: "learn hub hero buttons",