fix sb config

packages/taler-wallet-webextension/.storybook/.babelrc

@@ -19,4 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 {
+    //FIXME: check if we can remove this preset and just use default storybook presets
+    "presets": [
+        "preact-cli/babel"
+    ]
 }

packages/taler-wallet-webextension/.storybook/main.js

@@ -22,18 +22,34 @@
 
 module.exports = {
   "stories": [
-    "../lib/**/*.stories.js"
+    "../src/**/*.stories.tsx",
   ],
   "addons": [
     "@storybook/addon-a11y",
-    "@storybook/addon-essentials" //docs, control, actions, viewpot, toolbar, background
+    "@storybook/addon-essentials" //docs, control, actions, viewport, toolbar, background
   ],
-  // webpackFinal: async (config, { configType }) => {
+  // sb does not yet support new jsx transform by default
-  //   // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+  // https://github.com/storybookjs/storybook/issues/12881
-  //   // You can change the configuration based on that.
+  // https://github.com/storybookjs/storybook/issues/12952
-  //   // 'PRODUCTION' is used when building the static version of storybook.
+  babel: async (options) => ({
-  //   // Make whatever fine-grained changes you need
+    ...options,
-  //   // Return the altered config
+    presets: [
-  //   return config;
+      ...options.presets,
-  // },
+      [
+        '@babel/preset-react', {
+          runtime: 'automatic',
+        },
+        'preset-react-jsx-transform' 
+      ],
+    ],
+  }),
+  webpackFinal: (config) => {
+    // should be removed after storybook 6.3
+    // https://github.com/storybookjs/storybook/issues/12853#issuecomment-821576113
+    config.resolve.alias = {
+      react: "preact/compat",
+      "react-dom": "preact/compat",
+    };
+    return config;
+  },
 }

packages/taler-wallet-webextension/.storybook/preview.js

@@ -14,41 +14,39 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-// import "../src/scss/main.scss"
+import * as core from "@gnu-taler/taler-wallet-core";
-// import { ConfigContextProvider } from '../src/context/config'
-// import { TranslationProvider } from '../src/context/translation'
 
 const mockConfig = {
   backendURL: 'http://demo.taler.net',
   currency: 'KUDOS'
 }
 
-// export const parameters = {
+export const parameters = {
-//   controls: { expanded: true },
+  controls: { expanded: true },
-//   actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: "^on[A-Z].*" },
-// }
+}
 
-// export const globalTypes = {
+export const globalTypes = {
-//   locale: {
+  locale: {
-//     name: 'Locale',
+    name: 'Locale',
-//     description: 'Internationalization locale',
+    description: 'Internationalization locale',
-//     defaultValue: 'en',
+    defaultValue: 'en',
-//     toolbar: {
+    toolbar: {
-//       icon: 'globe',
+      icon: 'globe',
-//       items: [
+      items: [
-//         { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'en', right: '🇺🇸', title: 'English' },
-//         { value: 'es', right: '🇪🇸', title: 'Spanish' },
+        { value: 'es', right: '🇪🇸', title: 'Spanish' },
-//       ],
+      ],
-//     },
+    },
-//   },
+  },
-// };
+};
 
-// export const decorators = [
+
-//   (Story, { globals }) => {
+
-    
+export const decorators = [
-//     return <TranslationProvider initial={globals.locale}>
+  (Story, { globals }) => {
-//       <Story />
+    core.setupI18n(globals.locale);
-//     </TranslationProvider>
+    return <Story />
-//   },
+  },
 //   (Story) => <ConfigContextProvider value={mockConfig}> <Story /> </ConfigContextProvider>
-// ];
+];