remove storybook

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

@@ -1,85 +0,0 @@
-/*
- This file is part of GNU Taler
- (C) 2021 Taler Systems S.A.
-
- GNU Taler is free software; you can redistribute it and/or modify it under the
- terms of the GNU General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-
-/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-
-module.exports = {
-  "stories": [
-    "../src/**/*.stories.tsx",
-  ],
-  "addons": [
-    "storybook-dark-mode",
-    "@storybook/addon-a11y",
-    "@storybook/addon-essentials" //docs, control, actions, viewport, toolbar, background
-  ],
-  // 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'
-      ],
-      "@linaria",
-    ],
-  }),
-  webpackFinal: (config) => {
-    // should be removed after storybook 6.3
-    // https://github.com/storybookjs/storybook/issues/12853#issuecomment-821576113
-    // removing workaround since this creates another problem
-    // https://github.com/storybookjs/storybook/issues/16623
-    // https://github.com/nodejs/node/issues/33460
-    // FIXME: remove this comments in 2022 if no problem arise 
-    //    config.resolve.alias = {
-    //      react: "preact/compat",
-    //      "react-dom": "preact/compat",
-    //    };
-
-    // we need to add @linaria loader AFTER the babel-loader
-    // https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#webpack  
-    config.module.rules[0] = {
-      ...(config.module.rules[0]),
-      loader: undefined, // Disable the predefined babel-loader on the rule
-      use: [
-        {
-          ...(config.module.rules[0].use[0]),
-          loader: 'babel-loader',
-        },
-        {
-          loader: '@linaria/webpack-loader',
-          options: {
-            sourceMap: true, //always true since this is dev
-            babelOptions: {
-              presets: config.module.rules[0].use[0].options.presets,
-            }
-            // Pass the current babel options to linaria's babel instance
-          }
-        }
-      ]
-    };
-
-    return config;
-  },
-}

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

@@ -1,179 +0,0 @@
-/*
- This file is part of GNU Taler
- (C) 2021 Taler Systems S.A.
-
- GNU Taler is free software; you can redistribute it and/or modify it under the
- terms of the GNU General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-
-import { h, Fragment } from "preact"
-import { PopupNavBar, WalletNavBar } from '../src/NavigationBar'
-import { LogoHeader } from '../src/components/LogoHeader'
-import { TranslationProvider } from '../src/context/translation'
-import { PopupBox, WalletBox } from '../src/components/styled'
-export const parameters = {
-  controls: { expanded: true },
-}
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    defaultValue: 'en',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ja', right: '🇯🇵', title: 'Japanese' },
-        { value: 'es', right: '🇪🇸', title: 'Spanish' },
-        { value: 'de', right: '🇩🇪', title: 'German' },
-      ],
-    },
-  },
-};
-
-
-
-export const decorators = [
-  (Story, { kind }) => {
-    if (kind.startsWith('popup')) {
-
-      function Body() {
-        const isTestingHeader = (/.*\/header\/?.*/.test(kind));
-        if (isTestingHeader) {
-          // simple box with correct width and height
-          return <div style={{ width: "fit-content" }}>
-            <Story />
-          </div>
-        }
-
-        const path = /popup(\/.*).*/.exec(kind)[1];
-        // add a fake header so it looks similar
-        return <Fragment>
-          <PopupNavBar path={path} devMode={path === '/dev'} />
-          <PopupBox>
-            <Story />
-          </PopupBox>
-        </Fragment>
-      }
-
-      return <div class="popup-container">
-        <style>{`
-        html {
-          font-family: sans-serif; /* 1 */
-        }
-        body {
-          margin: 0;
-        }`}
-        </style>
-        <style>{`
-        html {
-        }
-        h1 {
-          font-size: 2em;
-        }
-        input {
-          font: inherit;
-        }
-        body {
-          margin: 0;
-          font-size: 100%;
-          padding: 0;
-          overflow: hidden;
-          background-color: #f8faf7;
-          font-family: Arial, Helvetica, sans-serif;
-        }`}
-        </style>
-        <div style={{ border: 'black solid 1px', width: "fit-content" }}>
-          <Body />
-        </div>
-      </div>
-    }
-    if (kind.startsWith('cta')) {
-      return <div>
-        <style>{`
-        html {
-          font-family: sans-serif; /* 1 */
-        }
-        body {
-          margin: 0;
-        }`}
-        </style>
-        <style>{`
-        html {
-        }
-        h1 {
-          font-size: 2em;
-        }
-        input {
-          font: inherit;
-        }
-        body {
-          margin: 0;
-          font-size: 100%;
-          padding: 0;
-          font-family: Arial, Helvetica, sans-serif;
-        }`}
-        </style>
-        <link key="1" rel="stylesheet" type="text/css" href="/static/style/pure.css" />
-        <link key="2" rel="stylesheet" type="text/css" href="/static/style/wallet.css" />
-        <Story />
-      </div>
-    }
-    if (kind.startsWith('mui') || kind.startsWith('component')) {
-      return <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-        <Story />
-      </div>
-    }
-    if (kind.startsWith('wallet')) {
-      const path = /wallet(\/.*).*/.exec(kind)[1];
-      return <div class="wallet-container">
-        <style>{`
-        html {
-          font-family: sans-serif; /* 1 */
-        }
-        body {
-          margin: 0;
-        }`}
-        </style>
-        <style>{`
-        html {
-        }
-        h1 {
-          font-size: 2em;
-        }
-        input {
-          font: inherit;
-        }
-        body {
-          margin: 0;
-          font-size: 100%;
-          padding: 0;
-          background-color: #f8faf7;
-          font-family: Arial, Helvetica, sans-serif;
-        }`}
-        </style>
-        <LogoHeader />
-        <WalletNavBar path={path} />
-        <WalletBox>
-          <Story />
-        </WalletBox>
-      </div>
-    }
-    return <div>
-      <h1>this story is not under wallet or popup, check title property</h1>
-      <Story />
-    </div>
-  },
-  (Story, { globals }) => <TranslationProvider initial='en' forceLang={globals.locale}>
-    <Story />
-  </TranslationProvider>,
-];

packages/taler-wallet-webextension/package.json

@@ -14,8 +14,6 @@
     "compile": "rollup -c -m",
     "compile:test": "rollup -c rollup.config.test.js -m",
     "prepare": "rollup -c -m",
-    "build-storybook": "build-storybook",
-    "storybook": "start-storybook -s . -p 6006 --no-open",
     "pretty": "prettier --write src",
     "watch": "tsc --watch & rollup -w -c",
     "i18n:extract": "pogen extract",
@@ -51,9 +49,6 @@
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^3.0.1",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@storybook/addon-a11y": "^6.4.18",
-    "@storybook/addon-essentials": "^6.4.18",
-    "@storybook/preact": "6.4.18",
     "@testing-library/preact": "^2.0.1",
     "@testing-library/preact-hooks": "^1.1.0",
     "@types/chai": "^4.3.0",

packages/taler-wallet-webextension/src/NavigationBar.tsx

@@ -75,7 +75,6 @@ export function PopupNavBar({ path = "" }: { path?: string }): VNode {
       <a href="/backup" class={path.startsWith("/backup") ? "active" : ""}>
         <i18n.Translate>Backup</i18n.Translate>
       </a>
-      <a />
       <a href="/settings">
         <SvgIcon
           title={i18n.str`Settings`}
@@ -105,7 +104,6 @@ export function WalletNavBar({ path = "" }: { path?: string }): VNode {
           </a>
         </JustInDevMode>
 
-        <a />
         <a
           href="/settings"
           class={path.startsWith("/settings") ? "active" : ""}

packages/taler-wallet-webextension/src/components/Banner.stories.tsx

@@ -19,18 +19,18 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { Banner } from "./Banner.js";
 import { Fragment, h, VNode } from "preact";
 import { Avatar } from "../mui/Avatar.js";
-import { Icon, SvgIcon } from "./styled/index.js";
 import { Typography } from "../mui/Typography.js";
-
+import { Banner } from "./Banner.js";
+import { SvgIcon } from "./styled/index.js";
+import wifiIcon from "../svg/wifi.svg";
 export default {
   title: "mui/banner",
   component: Banner,
 };
 
-function Wrapper({ children }: any) {
+function Wrapper({ children }: any): VNode {
   return (
     <div
       style={{
@@ -48,7 +48,7 @@ function Wrapper({ children }: any) {
   );
 }
 function SignalWifiOffIcon({ ...rest }: any): VNode {
-  return <SvgIcon {...rest} />;
+  return <SvgIcon {...rest} dangerouslySetInnerHTML={{ __html: wifiIcon }} />;
 }
 
 export const BasicExample = () => (

packages/taler-wallet-webextension/src/components/Banner.tsx

@@ -19,7 +19,7 @@ interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
   };
 }
 
-export function Banner({ title, elements, confirm, ...rest }: Props) {
+export function Banner({ title, elements, confirm, ...rest }: Props): VNode {
   return (
     <Fragment>
       <Paper elevation={0} {...rest}>

packages/taler-wallet-webextension/src/components/index.stories.tsx

@@ -14,13 +14,12 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
- /**
+/**
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
-{
+
-    //FIXME: check if we can remove this preset and just use default storybook presets
+import * as a1 from "./Banner.stories.js";
-    "presets": [
+import * as a2 from "./PendingTransactions.stories.js";
-      "preact-cli/babel",
+
-    ]
+export default [a1, a2];
-}

packages/taler-wallet-webextension/src/stories.tsx

@@ -35,8 +35,13 @@ import * as mui from "./mui/index.stories.js";
 import { PopupNavBar, WalletNavBar } from "./NavigationBar.js";
 import * as popup from "./popup/index.stories.js";
 import * as wallet from "./wallet/index.stories.js";
+import * as components from "./components/index.stories.js";
+import { strings } from "./i18n/strings.js";
 
-setupI18n("en", { en: {} });
+const url = new URL(window.location.href);
+const lang = url.searchParams.get("lang") || "en";
+
+setupI18n(lang, strings);
 
 const Page = styled.div`
   * {
@@ -107,7 +112,7 @@ function parseExampleImport(group: string, im: any): ComponentItem {
   };
 }
 
-const allExamples = Object.entries({ popup, wallet, mui }).map(
+const allExamples = Object.entries({ popup, wallet, mui, components }).map(
   ([title, value]) => ({
     title,
     list: value.default.map((s) => parseExampleImport(title, s)),