handleKeyPress(e)}>
{props.title}
@@ -195,6 +194,7 @@ const AnastasisClient: FunctionalComponent = () => {
return (
+
diff --git a/packages/anastasis-webui/src/stories.tsx b/packages/anastasis-webui/src/stories.tsx
new file mode 100644
index 000000000..2b830766f
--- /dev/null
+++ b/packages/anastasis-webui/src/stories.tsx
@@ -0,0 +1,381 @@
+/*
+ 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
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+import { setupI18n } from "@gnu-taler/taler-util";
+import { ComponentChild, Fragment, h, render, VNode } from "preact";
+import { useEffect, useErrorBoundary, useState } from "preact/hooks";
+import { strings } from "./i18n/strings.js";
+import * as pages from "./pages/home/index.storiesNo.js";
+
+const url = new URL(window.location.href);
+const lang = url.searchParams.get("lang") || "en";
+
+setupI18n(lang, strings);
+
+const Page = ({ children }: any) =>
{children}
;
+const SideBar = ({ children }: any) => ;
+const Content = ({ children }: any) =>
{children}
;
+
+function parseExampleImport(group: string, im: any): ComponentItem {
+ const component = im.default.title;
+ const order: number = im.default.args?.order || 0;
+ return {
+ name: component,
+ order,
+ examples: Object.entries(im)
+ .filter(([k]) => k !== "default")
+ .map(
+ ([name, render]) =>
+ ({
+ group,
+ component,
+ name,
+ render,
+ } as ExampleItem),
+ ),
+ };
+}
+
+function SortStories(a: any, b: any): number {
+ return (a?.order ?? 0) - (b?.order ?? 0);
+}
+
+const allExamples = Object.entries({ pages }).map(([title, value]) => ({
+ title,
+ list: value.default
+ .map((s) => parseExampleImport(title, s))
+ .sort(SortStories),
+}));
+
+interface ComponentItem {
+ name: string;
+ order: number;
+ examples: ExampleItem[];
+}
+
+interface ExampleItem {
+ group: string;
+ component: string;
+ name: string;
+ render: {
+ (args: any): VNode;
+ args: any;
+ };
+}
+
+function findByGroupComponentName(
+ group: string,
+ component: string,
+ name: string,
+): ExampleItem | undefined {
+ const gl = allExamples.filter((e) => e.title === group);
+ if (gl.length === 0) {
+ return undefined;
+ }
+ const cl = gl[0].list.filter((l) => l.name === component);
+ if (cl.length === 0) {
+ return undefined;
+ }
+ const el = cl[0].examples.filter((c) => c.name === name);
+ if (el.length === 0) {
+ return undefined;
+ }
+ return el[0];
+}
+
+function getContentForExample(item: ExampleItem | undefined): () => VNode {
+ if (!item)
+ return function SelectExampleMessage() {
+ return
select example from the list on the left
;
+ };
+ const example = findByGroupComponentName(
+ item.group,
+ item.component,
+ item.name,
+ );
+ if (!example)
+ return function ExampleNotFoundMessage() {
+ return
example not found
;
+ };
+ return () => example.render(example.render.args);
+}
+
+function ExampleList({
+ name,
+ list,
+ selected,
+ onSelectStory,
+}: {
+ name: string;
+ list: {
+ name: string;
+ examples: ExampleItem[];
+ }[];
+ selected: ExampleItem | undefined;
+ onSelectStory: (i: ExampleItem, id: string) => void;
+}): VNode {
+ const [isOpen, setOpen] = useState(selected && selected.group === name);
+ return (
+
+ setOpen(!isOpen)}>{name}
+
+
+ );
+}
+
+// function getWrapperForGroup(group: string): FunctionComponent {
+// switch (group) {
+// case "popup":
+// return function PopupWrapper({ children }: any) {
+// return (
+//
+// {children}
+//
+// );
+// };
+// case "wallet":
+// return function WalletWrapper({ children }: any) {
+// return (
+//
+// {children}
+//
+// );
+// };
+// case "cta":
+// return function WalletWrapper({ children }: any) {
+// return (
+//
+// {children}
+//
+// );
+// };
+// default:
+// return Fragment;
+// }
+// }
+
+function ErrorReport({
+ children,
+ selected,
+}: {
+ children: ComponentChild;
+ selected: ExampleItem | undefined;
+}): VNode {
+ const [error] = useErrorBoundary();
+ if (error) {
+ return (
+
+
Error was thrown trying to render
+ {selected && (
+
+ )}
+
{error.message}
+
{error.stack}
+
+ );
+ }
+ return
{children} ;
+}
+
+function getSelectionFromLocationHash(hash: string): ExampleItem | undefined {
+ if (!hash) return undefined;
+ const parts = hash.substring(1).split("-");
+ if (parts.length < 3) return undefined;
+ return findByGroupComponentName(
+ decodeURIComponent(parts[0]),
+ decodeURIComponent(parts[1]),
+ decodeURIComponent(parts[2]),
+ );
+}
+
+function Application(): VNode {
+ const initialSelection = getSelectionFromLocationHash(location.hash);
+ const [selected, updateSelected] = useState
(
+ initialSelection,
+ );
+ useEffect(() => {
+ if (location.hash) {
+ const hash = location.hash.substring(1);
+ const found = document.getElementById(hash);
+ if (found) {
+ setTimeout(() => {
+ found.scrollIntoView({
+ block: "center",
+ });
+ }, 10);
+ }
+ }
+ }, []);
+
+ const ExampleContent = getContentForExample(selected);
+
+ // const GroupWrapper = getWrapperForGroup(selected?.group || "default");
+
+ return (
+
+
+ {allExamples.map((e) => (
+ {
+ document.getElementById(htmlId)?.scrollIntoView({
+ block: "center",
+ });
+ updateSelected(item);
+ }}
+ />
+ ))}
+
+
+
+ {/* */}
+ */}
+
+
+
+ );
+}
+
+if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", main);
+} else {
+ main();
+}
+function main(): void {
+ try {
+ const container = document.getElementById("container");
+ if (!container) {
+ throw Error("container not found, can't mount page contents");
+ }
+ render(
+
reloading...
+
+ );
+ }
+ return ;
@@ -210,6 +216,7 @@ export const reducerStatesExample = {
} as ReducerState,
secretSelection: {
...base,
+ reducer_type: "recovery",
recovery_state: RecoveryStates.SecretSelecting,
} as ReducerState,
recoveryFinished: {
@@ -260,6 +267,7 @@ export const reducerStatesExample = {
authEditing: {
...base,
backup_state: BackupStates.AuthenticationsEditing,
+ reducer_type: "backup",
} as ReducerState,
backupAttributeEditing: {
...base,
diff --git a/packages/anastasis-webui/stories.html b/packages/anastasis-webui/stories.html
new file mode 100644
index 000000000..9f41fdeaf
--- /dev/null
+++ b/packages/anastasis-webui/stories.html
@@ -0,0 +1,72 @@
+
+
+
+ Stories
+
+
+