Include UI library

package.json

@@ -205,7 +205,7 @@
     "@buttercup/importer": "^3.1.0",
     "@buttercup/secure-file-host": "^0.3.0",
     "@electron/remote": "^2.0.8",
-    "buttercup": "^7.7.0",
+    "buttercup": "^7.7.1",
     "cors": "^2.8.5",
     "debounce": "^1.2.1",
     "debounce-promise": "^3.1.2",
@@ -240,6 +240,7 @@
     "@blueprintjs/core": "^4.20.2",
     "@blueprintjs/popover2": "^1.14.11",
     "@blueprintjs/select": "^4.9.24",
+    "@buttercup/generator": "^2.0.0",
     "@buttercup/ui": "^6.4.2",
     "@electron/fuses": "^1.7.0",
     "@hookstate/core": "^3.0.13",
@@ -250,6 +251,7 @@
     "@types/react": "^17.0.52",
     "@types/react-dom": "^17.0.18",
     "@types/styled-components": "^5.1.29",
+    "allotment": "^1.20.1",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "classnames": "^2.3.2",
@@ -258,6 +260,7 @@
     "css-loader": "^6.8.1",
     "electron": "^22.0.0",
     "electron-builder": "^24.13.3",
+    "elt-react-credit-cards": "^0.0.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.4",
     "husky": "^4.3.8",
@@ -270,10 +273,13 @@
     "pretty-ms": "^7.0.1",
     "pug": "^2.0.4",
     "pug-loader": "^2.4.0",
+    "ramda": "^0.30.0",
     "react": "^17.0.2",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^17.0.2",
+    "react-dropzone": "^14.2.3",
+    "react-hotkeys": "^2.0.0",
     "react-obstate": "^0.1.3",
     "react-router-dom": "^5.3.3",
     "rimraf": "^5.0.5",
@@ -284,7 +290,9 @@
     "styled-components": "^6.1.1",
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.3",
+    "use-reducer-state": "^0.1.0",
     "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "xbytes": "^1.9.1"
   }
 }

source/main/library/build.ts

@@ -1,3 +1,3 @@
 // This file updated automatically: changes made here will be overwritten!
 
-export const VERSION = "2.26.5";
+export const VERSION = "2.27.0";

source/renderer/components/ErrorBoundary.tsx

@@ -3,6 +3,15 @@ import styled from "styled-components";
 import { Callout, Intent } from "@blueprintjs/core";
 import { t } from "../../shared/i18n/trans";
 
+interface ErrorBoundaryProps {
+    children: JSX.Element;
+}
+
+interface ErrorBoundaryState {
+    error: Error | null;
+    errorStack: string | null;
+}
+
 const ErrorCallout = styled(Callout)`
     margin: 4px;
     box-sizing: border-box;
@@ -20,12 +29,12 @@ function stripBlanks(txt = '') {
         .join('\n');
 }
 
-export class ErrorBoundary extends Component {
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
     static getDerivedStateFromError(error: Error) {
         return { error };
     }
 
-    state = {
+    state: ErrorBoundaryState = {
         error: null,
         errorStack: null
     };

source/renderer/components/OTPDigits.tsx

@@ -0,0 +1,128 @@
+import React, { Component, Fragment } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { Intent, Spinner, Text } from "@blueprintjs/core";
+import * as OTPAuth from "otpauth";
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    user-select: none;
+`;
+const DigitsContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    flex-wrap: none;
+`;
+const Digits = styled(Text)`
+    font-family: monospace;
+    font-size: 2em;
+    word-break: keep-all;
+`;
+const TimeLeftSpinner = styled(Spinner)`
+    margin-right: 8px;
+`;
+
+export class OTPDigits extends Component<{
+    otpRef: (digits: string) => void;
+    otpURI: string;
+}> {
+    static defaultProps = {
+        otpRef: n => n
+    };
+
+    static propTypes = {
+        otpRef: PropTypes.func.isRequired,
+        otpURI: PropTypes.string.isRequired
+    };
+
+    private __interval: ReturnType<typeof setInterval>;
+    private __totp: OTPAuth.TOTP | OTPAuth.HOTP | null = null;
+
+    state = {
+        digits: "",
+        error: false,
+        otpRef: () => {},
+        otpURI: null,
+        period: 30,
+        timeLeft: 30
+    };
+
+    componentDidMount() {
+        this.update();
+        this.__interval = setInterval(() => this.update(), 1000);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.__interval);
+    }
+
+    render() {
+        const leftDigits = this.state.digits.substring(0, this.state.digits.length / 2);
+        const rightDigits = this.state.digits.substring(this.state.digits.length / 2);
+        return (
+            <Container>
+                {this.state.error || typeof this.state.period !== "number" || isNaN(this.state.timeLeft) && (
+                    <Fragment>
+                        <TimeLeftSpinner
+                            intent={Intent.DANGER}
+                            size={30}
+                            value={1}
+                        />
+                        <DigitsContainer>
+                            <Digits>ERROR</Digits>
+                        </DigitsContainer>
+                    </Fragment>
+                ) || (
+                    <Fragment>
+                        <TimeLeftSpinner
+                            intent={this.state.timeLeft > 7 ? Intent.PRIMARY : Intent.DANGER}
+                            size={30}
+                            value={this.state.timeLeft / this.state.period}
+                        />
+                        <DigitsContainer>
+                            <Digits>{leftDigits}</Digits>
+                            &nbsp;
+                            <Digits>{rightDigits}</Digits>
+                        </DigitsContainer>
+                    </Fragment>
+                )}
+            </Container>
+        );
+    }
+
+    update(props = this.props) {
+        let period = this.state.period;
+        try {
+            if (this.state.otpURI !== props.otpURI) {
+                this.__totp = OTPAuth.URI.parse(props.otpURI);
+                if (this.__totp instanceof OTPAuth.TOTP === false) {
+                    throw new Error("Bad OTP");
+                }
+                period = this.__totp.period;
+                this.setState({
+                    otpURI: props.otpURI,
+                    period
+                });
+            }
+            if (!this.__totp) {
+                throw new Error("No OTP initialised");
+            }
+            const digits = this.__totp.generate();
+            this.setState({
+                digits,
+                timeLeft: period - (Math.floor(Date.now() / 1000) % period)
+            });
+            this.props.otpRef(digits);
+        } catch (err) {
+            console.error(err);
+            clearInterval(this.__interval);
+            this.setState({ error: true });
+        }
+    }
+}

source/renderer/components/VaultEditor.tsx

@@ -3,10 +3,12 @@ import { useHistory } from "react-router-dom";
 import { useState as useHookState } from "@hookstate/core";
 import { useSingleState } from "react-obstate";
 import { Intent, NonIdealState, Tag } from "@blueprintjs/core";
-import { VaultProvider, VaultUI, themes } from "@buttercup/ui";
+import { themes } from "@buttercup/ui";
 import { VaultFacade, VaultSourceStatus } from "buttercup";
 import styled, { ThemeProvider } from "styled-components";
 import { SearchContext } from "./search/SearchContext";
+import { VaultProvider } from "./vault/VaultContext";
+import { VaultUI } from "./vault/VaultUI";
 import { VAULTS_STATE } from "../state/vaults";
 import { SAVING } from "../state/app";
 import { fetchUpdatedFacade } from "../actions/facade";
@@ -23,7 +25,7 @@ import { t } from "../../shared/i18n/trans";
 import { ATTACHMENTS_MAX_SIZE } from "../../shared/symbols";
 import { Theme } from "../types";
 
-import "@buttercup/ui/dist/styles.css";
+// import "@buttercup/ui/dist/styles.css";
 
 const BENCH_IMAGE = require("../../../resources/images/bench.png").default;
 
@@ -135,7 +137,6 @@ export function VaultEditor(props: VaultEditorProps) {
                         attachmentsMaxSize={ATTACHMENTS_MAX_SIZE}
                         attachmentPreviews={attachmentPreviews}
                         icons
-                        iconsPath="icons"
                         onAddAttachments={addAttachments}
                         onDeleteAttachment={deleteAttachment}
                         onDownloadAttachment={downloadAttachment}

source/renderer/components/navigation/VaultTabs.tsx

@@ -11,6 +11,7 @@ import { showVaultSettingsForSource } from "../../state/vaultSettings";
 import { t } from "../../../shared/i18n/trans";
 
 export interface Tab {
+    available: boolean;
     content: string;
     icon: string;
     id: VaultSourceID;
@@ -83,12 +84,12 @@ export function VaultTabs(props: VaultTabsProps) {
     const { onAddVault, onLockVault, onRemoveVault, onReorder, onSelectVault, onUnlockVault, sourceID } = props;
     const [rawVaults] = useSingleState(VAULTS_STATE, "vaultsList");
     const vaults = useMemo(() => sortVaults(rawVaults), [rawVaults]);
-    const tabs: Array<Tab> = useMemo(() => vaults.map(vault => ({
+    const tabs = useMemo(() => vaults.map(vault => ({
         content: vault.name,
         id: vault.id,
         icon: getIconForProvider(vault.type),
         available: vault.state === VaultSourceStatus.Unlocked
-    })), [vaults]);
+    } satisfies Tab)), [vaults]);
     return (
         <Tabs
             menu={(props: Partial<TabMenuProps> & { id: VaultSourceID; }) => (