diff options
3 files changed, 59 insertions, 41 deletions
diff --git a/packages/taler-wallet-webextension/.storybook/.babelrc b/packages/taler-wallet-webextension/.storybook/.babelrc index d1f93f336..39829d509 100644 --- a/packages/taler-wallet-webextension/.storybook/.babelrc +++ b/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" + ] }
\ No newline at end of file diff --git a/packages/taler-wallet-webextension/.storybook/main.js b/packages/taler-wallet-webextension/.storybook/main.js index d9f87eef0..01765e009 100644 --- a/packages/taler-wallet-webextension/.storybook/main.js +++ b/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 }) => { - // // `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. - // // Make whatever fine-grained changes you need - // // Return the altered config - // return config; - // }, + // sb does not yet support new jsx transform by default + // https://github.com/storybookjs/storybook/issues/12881 + // https://github.com/storybookjs/storybook/issues/12952 + babel: async (options) => ({ + ...options, + presets: [ + ...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; + }, } diff --git a/packages/taler-wallet-webextension/.storybook/preview.js b/packages/taler-wallet-webextension/.storybook/preview.js index 2b685b366..c5740261a 100644 --- a/packages/taler-wallet-webextension/.storybook/preview.js +++ b/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 { ConfigContextProvider } from '../src/context/config' -// import { TranslationProvider } from '../src/context/translation' +import * as core from "@gnu-taler/taler-wallet-core"; const mockConfig = { backendURL: 'http://demo.taler.net', currency: 'KUDOS' } -// export const parameters = { -// controls: { expanded: true }, -// actions: { argTypesRegex: "^on[A-Z].*" }, -// } - -// export const globalTypes = { -// locale: { -// name: 'Locale', -// description: 'Internationalization locale', -// defaultValue: 'en', -// toolbar: { -// icon: 'globe', -// items: [ -// { value: 'en', right: 'πΊπΈ', title: 'English' }, -// { value: 'es', right: 'πͺπΈ', title: 'Spanish' }, -// ], -// }, -// }, -// }; - -// export const decorators = [ -// (Story, { globals }) => { - -// return <TranslationProvider initial={globals.locale}> -// <Story /> -// </TranslationProvider> -// }, +export const parameters = { + controls: { expanded: true }, + actions: { argTypesRegex: "^on[A-Z].*" }, +} + +export const globalTypes = { + locale: { + name: 'Locale', + description: 'Internationalization locale', + defaultValue: 'en', + toolbar: { + icon: 'globe', + items: [ + { value: 'en', right: 'πΊπΈ', title: 'English' }, + { value: 'es', right: 'πͺπΈ', title: 'Spanish' }, + ], + }, + }, +}; + + + +export const decorators = [ + (Story, { globals }) => { + core.setupI18n(globals.locale); + return <Story /> + }, // (Story) => <ConfigContextProvider value={mockConfig}> <Story /> </ConfigContextProvider> -// ]; +]; |