Merge pull request #255 from TylerAPfledderer/refactor/stories

Refactor/stories

Author: pettinarip

.storybook/main.ts

@@ -15,20 +15,14 @@ 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",
-    "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
     "@chakra-ui/storybook-addon",
-    "storybook-react-i18next"
+    "storybook-react-i18next",
   ],
   staticDirs: ["../public"],
   framework: {

package.json

@@ -54,12 +54,11 @@
   "devDependencies": {
     "@chakra-ui/storybook-addon": "5.1.0",
     "@netlify/plugin-nextjs": "^4.41.3",
-    "@storybook/addon-essentials": "7.5.3",
-    "@storybook/addon-interactions": "7.5.3",
-    "@storybook/addon-links": "7.5.3",
-    "@storybook/addon-onboarding": "1.0.8",
-    "@storybook/nextjs": "7.5.3",
-    "@storybook/react": "7.5.3",
+    "@storybook/addon-essentials": "7.6.6",
+    "@storybook/addon-interactions": "7.6.6",
+    "@storybook/addon-links": "7.6.6",
+    "@storybook/nextjs": "7.6.6",
+    "@storybook/react": "7.6.6",
     "@storybook/testing-library": "0.2.2",
     "@svgr/webpack": "^8.1.0",
     "@types/hast": "^3.0.0",
@@ -77,7 +76,7 @@
     "minimist": "^1.2.8",
     "polished": "^4.2.2",
     "raw-loader": "^4.0.2",
-    "storybook": "7.5.3",
+    "storybook": "7.6.6",
     "storybook-react-i18next": "^2.0.9",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6",

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",