diff options
| -rw-r--r-- | packages/taler-wallet-webextension/.storybook/main.js | 85 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/.storybook/preview.js | 179 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/package.json | 5 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/NavigationBar.tsx | 2 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/components/Banner.stories.tsx | 10 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/components/Banner.tsx | 2 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/components/index.stories.tsx (renamed from packages/taler-wallet-webextension/.storybook/.babelrc) | 13 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/stories.tsx | 9 |
8 files changed, 19 insertions, 286 deletions
diff --git a/packages/taler-wallet-webextension/.storybook/main.js b/packages/taler-wallet-webextension/.storybook/main.js deleted file mode 100644 index d3f216922..000000000 --- a/packages/taler-wallet-webextension/.storybook/main.js +++ /dev/null @@ -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; - }, -} diff --git a/packages/taler-wallet-webextension/.storybook/preview.js b/packages/taler-wallet-webextension/.storybook/preview.js deleted file mode 100644 index 02d8a0e06..000000000 --- a/packages/taler-wallet-webextension/.storybook/preview.js +++ /dev/null @@ -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>, -]; diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json index f61a03903..909b27d03 100644 --- a/packages/taler-wallet-webextension/package.json +++ b/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", diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx index 8b545b981..df779cae3 100644 --- a/packages/taler-wallet-webextension/src/NavigationBar.tsx +++ b/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" : ""} diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx index e4fc63ac1..f023e0d83 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx +++ b/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 = () => ( diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx index 7bbacee8d..88b36430b 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.tsx +++ b/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}> diff --git a/packages/taler-wallet-webextension/.storybook/.babelrc b/packages/taler-wallet-webextension/src/components/index.stories.tsx index 4476798e2..7cf9d4c58 100644 --- a/packages/taler-wallet-webextension/.storybook/.babelrc +++ b/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 - "presets": [ - "preact-cli/babel", - ] -}
\ No newline at end of file + +import * as a1 from "./Banner.stories.js"; +import * as a2 from "./PendingTransactions.stories.js"; + +export default [a1, a2]; diff --git a/packages/taler-wallet-webextension/src/stories.tsx b/packages/taler-wallet-webextension/src/stories.tsx index 531425bc9..10c903ae6 100644 --- a/packages/taler-wallet-webextension/src/stories.tsx +++ b/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)), |