fix storybook for react components lib

Author: fmtabbara

sdk/typescript/packages/react-components/.storybook/main.js

@@ -1,40 +1,22 @@
-/* eslint-disable no-param-reassign */
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 
-module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
-  framework: '@storybook/react',
-  core: {
-    builder: 'webpack5',
-  },
-  // webpackFinal: async (config, { configType }) => {
-  //   // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-  //   // You can change the configuration based on that.
-  //   // 'PRODUCTION' is used when building the static version of storybook.
-  webpackFinal: async (config) => {
-    config.module.rules.forEach((rule) => {
-      // look for SVG import rule and replace
-      // NOTE: the rule before modification is /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
-      if (rule.test?.toString().includes('svg')) {
-        rule.test = /\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
-      }
-    });
+export const framework = {
+  name: '@storybook/react-vite',
+  options: {},
+};
 
-    // handle asset loading with this
-    config.module.rules.unshift({
-      test: /\.svg(\?.*)?$/i,
-      issuer: /\.[jt]sx?$/,
-      use: ['@svgr/webpack'],
-    });
+export const docs = {
+  autodocs: true,
+};
 
-    config.resolve.extensions = ['.tsx', '.ts', '.js'];
-    config.resolve.plugins = [new TsconfigPathsPlugin()];
+export const typescript = {
+  reactDocgen: 'react-docgen-typescript',
+};
 
-    // Return the altered config
-    return config;
-  },
-  features: {
-    emotionAlias: false,
-  },
+const config = {
+  framework: '@storybook/react-vite',
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
 };
+
+export default config;

sdk/typescript/packages/react-components/.storybook/preview.js renamed to sdk/typescript/packages/react-components/.storybook/preview.jsx

@@ -13,7 +13,9 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
   },
   "dependencies": {
     "@cosmjs/math": "^0.27.1",
@@ -36,7 +38,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@storybook/react": "^6.5.15",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-vite": "^8.1.11",
     "@types/flat": "^5.0.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -47,6 +50,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
+    "storybook": "^8.1.11",
     "typescript": "^5.2.2",
     "vite": "^5.3.1",
     "vite-plugin-dts": "^3.9.1",

sdk/typescript/packages/react-components/package.json

@@ -1,6 +1,7 @@
+import React from 'react';
 import { Button, Stack } from '@mui/material';
 
-export const PlaygroundButtons: FCWithChildren = () => (
+export const PlaygroundButtons = () => (
   <Stack spacing={2} direction="row">
     <Button variant="text">Text</Button>
     <Button variant="contained">Contained</Button>

sdk/typescript/packages/react-components/src/index.ts

@@ -1,17 +1,25 @@
+import React from 'react';
 import type { Theme } from '@mui/material/styles';
 import TreeView from '@mui/lab/TreeView';
 import TreeItem from '@mui/lab/TreeItem';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import { Box } from '@mui/material';
 
-const MUIThemeExplorerItem: FCWithChildren<{
+const MUIThemeExplorerItem = ({
+  theme,
+  item,
+  parentKey,
+  path,
+  isArrayItem,
+}: {
   path: string;
   parentKey: string;
   theme: Theme;
   item: any;
   isArrayItem?: boolean;
-}> = ({ theme, item, parentKey, path, isArrayItem }) => {
+  children: React.ReactNode;
+}) => {
   if (!item) {
     return null;
   }

sdk/typescript/packages/react-components/src/playground/buttons.tsx

@@ -1,16 +1,22 @@
+import React from 'react';
 import { Theme } from '@mui/material/styles';
-import * as React from 'react';
 import { Box, Grid, Typography } from '@mui/material';
 import flatten from 'flat';
 
 const SWATCH_SIZE = '40px';
 
-const PaletteSwatch: FCWithChildren<{
+const PaletteSwatch = ({
+  theme,
+  path,
+  value,
+  width,
+}: {
   theme: Theme;
   path: string;
   value: string;
   width?: string;
-}> = ({ theme, path, value, width }) => (
+  chidlren: React.ReactNode;
+}) => (
   <>
     <Box
       sx={{

sdk/typescript/packages/react-components/src/playground/theme/MUIThemeExplorer.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ComponentMeta } from '@storybook/react';
 import { useTheme } from '@mui/material';
 import { Playground } from '../playground/Playground';

sdk/typescript/packages/react-components/src/playground/theme/PaletteSwatches.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { ComponentMeta } from '@storybook/react';
 import { Box } from '@mui/material';
-import { WalletAddressFormField } from '@lib/components/account';
+import { WalletAddressFormField } from '../../../lib/components/account/WalletAddressFormField';
 
 export default {
   title: 'Accounts/Wallet Address',

sdk/typescript/packages/react-components/src/stories/Introduction.stories.mdx

@@ -1,15 +1,16 @@
+import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Box } from '@mui/material';
-import { ClientAddressDisplay } from '@lib/components/client-address';
+import { ClientAddress } from '../../../lib/components/client-address/ClientAddress';
 
 export default {
   title: 'Wallet / Client Address',
-  component: ClientAddressDisplay,
-} as ComponentMeta<typeof ClientAddressDisplay>;
+  component: ClientAddress,
+} as ComponentMeta<typeof ClientAddress>;
 
-const Template: ComponentStory<typeof ClientAddressDisplay> = (args) => (
+const Template: ComponentStory<typeof ClientAddress> = (args) => (
   <Box display="flex" alignContent="center">
-    <ClientAddressDisplay {...args} />
+    <ClientAddress {...args} />
   </Box>
 );
 

sdk/typescript/packages/react-components/src/stories/Playground.stories.js

@@ -1,6 +1,7 @@
+import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Box, Typography } from '@mui/material';
-import { CopyToClipboard } from '@lib/components/clipboard';
+import { CopyToClipboard } from '../../../lib/components/clipboard/CopyToClipboard';
 
 export default {
   title: 'Decorators / Copy to clipboard',

sdk/typescript/packages/react-components/src/stories/Playground.stories.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { ComponentMeta } from '@storybook/react';
 import { Stack, Typography } from '@mui/material';
-import { CoinMark } from '@lib/components/coins';
+import { CoinMark } from '../../../lib/components/coins/CoinMark';
 
 export default {
   title: 'Branding/Coin Mark',