[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] 02/02: remove storybook
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] 02/02: remove storybook |
|
Date: |
Tue, 29 Mar 2022 05:45:27 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
commit be489b6b3ea4214f546dfc33d6bb0f39ce82b5ab
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Tue Mar 29 00:45:17 2022 -0300
remove storybook
---
.../taler-wallet-webextension/.storybook/main.js | 85 ----------
.../.storybook/preview.js | 179 ---------------------
packages/taler-wallet-webextension/package.json | 5 -
.../src/NavigationBar.tsx | 2 -
.../src/components/Banner.stories.tsx | 10 +-
.../src/components/Banner.tsx | 2 +-
.../.babelrc => src/components/index.stories.tsx} | 13 +-
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 d3f21692..00000000
--- 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 02d8a0e0..00000000
--- 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 f61a0390..909b27d0 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 8b545b98..df779cae 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 e4fc63ac..f023e0d8 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 7bbacee8..88b36430 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
similarity index 83%
rename from packages/taler-wallet-webextension/.storybook/.babelrc
rename to packages/taler-wallet-webextension/src/components/index.stories.tsx
index 4476798e..7cf9d4c5 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 531425bc..10c903ae 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)),
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.