remove storybook
This commit is contained in:
Sebastian
parent
47f51ced7f
commit
be489b6b3e
@ -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;
|
||||
},
|
||||
}
|
||||
@ -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>,
|
||||
];
|
||||
@ -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",
|
||||
|
||||
@ -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" : ""}
|
||||
|
||||
@ -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 = () => (
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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",
|
||||
]
|
||||
}
|
||||
|
||||
import * as a1 from "./Banner.stories.js";
|
||||
import * as a2 from "./PendingTransactions.stories.js";
|
||||
|
||||
export default [a1, a2];
|
||||
@ -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)),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user