[ { "path": ".claude/skills/use-ui-kit/SKILL.md", "content": "---\nname: use-ui-kit\ndescription: Use whenever creating or editing UI in this repo — React components, modals, dialogs, forms, buttons, inputs, typography, styling, icons, or any .tsx/.jsx work. The repo uses `@tetherto/pearpass-lib-ui-kit` as the single source for UI primitives; do not roll custom ones. Load this before suggesting any UI change, especially for v2 files (V2 suffix) or when touching src/components, src/containers/Modal, or src/pages.\n---\n\n\n\n# UI conventions for pearpass-app-desktop-tether\n\nThis is the Electron desktop app for PearPass. It's written in React + TypeScript. UI is built on the shared component library `@tetherto/pearpass-lib-ui-kit`.\n\nThis document is for **anyone contributing UI** to the repo — new hires, current engineers, and AI coding assistants (Claude Code, Cursor, Codex, etc.). It captures the component catalog, styling conventions, file-naming rules, and patterns we use when building UI in this app. Read it once before your first UI change; keep it open when you're in doubt.\n\n## Design-system state — `DESKTOP_DESIGN_VERSION === 2`\n\nWhich design renders at runtime is controlled by the `DESKTOP_DESIGN_VERSION` flag from `@tetherto/pearpass-lib-constants` (resolved in [electron/runtime-config.cjs](../../../electron/runtime-config.cjs) and exposed via `isV2()` in [src/utils/designVersion.js](../../../src/utils/designVersion.js)).\n\n**Currently `DESKTOP_DESIGN_VERSION === 2`**, so kit components are the right choice for all new UI work. Legacy v1 components still live under [src/lib-react-components/](../../../src/lib-react-components/) and are rendered whenever `isV2()` returns `false` — do not delete them as part of v2 work.\n\n## File naming: when to use the `V2` suffix\n\nThe `V2` suffix is a **coexistence marker**, not a design marker. Use it only when a v1 sibling already exists:\n\n- **A v1 file already exists** for this component/screen → create a new file with the `V2` suffix next to it (e.g. v1 `CreateVaultModalContent.jsx` → new `CreateVaultModalContentV2.tsx`). Both live in the tree during migration; the branching happens at the call site via `isV2()`.\n- **No v1 equivalent exists** (net-new feature, net-new component) → create the file with its natural name, **no `V2` suffix**. The codebase is already v2 by default, so the suffix would just be noise.\n\nBefore creating a file, glob the directory for the base name without the suffix. If nothing comes up, skip the suffix.\n\n## Golden rules\n\n1. **Check the catalog below before creating any component.** If it exists in the kit, use it — never wrap or reimplement.\n2. **All new UI goes through the kit.** Any new `.tsx`/`.jsx` file — suffixed or not — must import from `@tetherto/pearpass-lib-ui-kit`, not from [src/lib-react-components/](../../../src/lib-react-components/).\n3. **Never add variants under [src/lib-react-components/components/](../../../src/lib-react-components/components/)** (`ButtonThin`, `ButtonPrimary`, `ButtonRoundIcon`, `PearPassInputField`, etc.). That tree is legacy; the kit's `Button` takes variants.\n4. **Style with tokens.** Use `useTheme()` + `rawTokens`. No hardcoded hex colors or px spacing.\n5. **Icons come from the kit.** `@tetherto/pearpass-lib-ui-kit/icons` has 530 icons. Do not add new SVGs under `src/`.\n6. **If the kit lacks something you need, stop and ask the user.** Don't silently roll a custom component.\n\n## Component catalog (31 components)\n\nImport pattern: `import { ComponentName } from '@tetherto/pearpass-lib-ui-kit'`\n\n### Actions\n- `Button` — all CTAs. Takes variants; use instead of `ButtonThin`, `ButtonPrimary`, `ButtonSecondary`, `ButtonRoundIcon`, `ButtonLittle`, `ButtonFilter`, `ButtonFolder`, `ButtonRadio`, `ButtonSingleInput`, `ButtonCreate`.\n- `Pressable` — low-level pressable wrapper for custom interactive elements.\n- `Link` — text links.\n\n### Forms\n- `Form` — form wrapper with validation.\n- `InputField` — text input. Use instead of `PearPassInputField`.\n- `PasswordField` — password input with strength indicator. Use instead of `PearPassPasswordField` / `PearPassPasswordFieldV2`.\n- `SearchField` — search input.\n- `SelectField` — dropdown select.\n- `Dropdown` — low-level dropdown primitive.\n- `TextArea` — multiline text input.\n- `Checkbox`\n- `Radio`\n- `ToggleSwitch`\n- `Slider`\n- `DateField`\n- `AttachmentField`\n- `UploadField`\n- `MultiSlotInput` — split inputs for OTP / recovery codes. Use instead of custom `OtpCodeField`.\n- `FieldError` — inline field validation error.\n\n### Typography\n- `Title` — headings.\n- `Text` — body text.\n\n### Layout / surfaces\n- `Dialog` — modals. Use instead of custom `ModalContent` wrappers.\n- `NativeBottomSheet` — bottom sheets.\n- `PageHeader` — top-of-page header.\n- `ItemScreenHeader` — item-detail header.\n- `Breadcrumb`\n- `ListItem`\n- `NavbarListItem`\n- `ContextMenu`\n\n### Feedback\n- `AlertMessage` — inline alerts. Reference: [src/pages/WelcomePage/CardCreateMasterPasswordV2/index.tsx](../../../src/pages/WelcomePage/CardCreateMasterPasswordV2/index.tsx).\n- `Snackbar` — toast-style notifications.\n- `PasswordIndicator` — standalone password strength meter.\n\n### Type exports\n- `ThemeColors`, `Theme`, `ThemeType`, `RawTokens`\n- `PasswordIndicatorVariant` — `'vulnerable' | 'decent' | 'strong'`\n\nImport types with `import type { ... } from '@tetherto/pearpass-lib-ui-kit'`.\n\n## Component props (15 most-used)\n\nRequired props have no `?`. **Always include a test ID on interactive components** — see the \"Test IDs\" section below for which prop to use per component.\n\n- **Button** — `variant: 'primary' | 'secondary' | 'tertiary' | 'destructive'`, `size: 'small' | 'medium'`, `onClick`, `children`, `type?: 'button' | 'submit'`, `disabled?`, `isLoading?`, `iconBefore?`, `iconAfter?`, `data-testid?`. Icon-only buttons need `aria-label`.\n- **Dialog** — `title` (ReactNode), `onClose?`, `open?`, `footer?`, `children?`, `closeOnOutsideClick?`, `hideCloseButton?`, `trapFocus?`, `initialFocusRef?`, `testID?`, `closeButtonTestID?`. Put action buttons in `footer`.\n- **InputField** — `label`, `value`, `onChange?: (e) => void`, `placeholder?`, `error?: string`, `inputType?: 'text' | 'password'`, `disabled?`, `readOnly?`, `copyable?`, `onCopy?`, `leftSlot?`, `rightSlot?`, `testID?`.\n- **PasswordField** — `label`, `value`, `onChange?`, `placeholder?`, `error?`, `passwordIndicator?: 'vulnerable' | 'decent' | 'strong' | 'match'`, `infoBox?: string`, `copyable?`, `testID?`.\n- **SearchField** — `value`, `onChangeText` (yes, this one is still current), `placeholderText?`, `size?: 'small' | 'medium'`, `testID?`.\n- **Form** — `children`, `onSubmit?`, `noValidate?`, `testID?`. Wrap fields here; pair with `useForm` from `@tetherto/pear-apps-lib-ui-react-hooks`.\n- **Text** — `children`, `as?: 'p' | 'span'`, `variant?: 'label' | 'labelEmphasized' | 'body' | 'bodyEmphasized' | 'caption'`, `color?`, `numberOfLines?`, `data-testid?`.\n- **Title** — `children`, `as?: 'h1' | 'h2' | ... | 'h6'`, `data-testid?`.\n- **AlertMessage** — `variant: 'info' | 'warning' | 'error'`, `size: 'small' | 'medium' | 'big'`, `title`, `description`, `actionText?`, `onAction?`, `testID?`, `actionTestId?`.\n- **ToggleSwitch** — `checked?`, `onChange?: (b: boolean) => void`, `label?`, `description?`, `disabled?`, `data-testid?`.\n- **Checkbox** — same shape as `ToggleSwitch` (uses `data-testid`).\n- **Radio** — `options: Array<{value, label?, description?, disabled?}>`, `value?`, `onChange?: (v: string) => void`, `testID?`.\n- **SelectField** — `label`, `value?`, `placeholder?`, `onClick?` (opens dropdown), `error?`, `disabled?`, `leftSlot?`, `rightSlot?`, `testID?`.\n- **TextArea** — `value`, `onChange?`, `label?`, `placeholder?`, `error?`, `disabled?`, `testID?`.\n- **Link** — `children`, `href?`, `isExternal?`, `onClick?`, `data-testid?` (and standard `` attributes).\n\nFor components not listed, open `node_modules/@tetherto/pearpass-lib-ui-kit/dist/components//types.d.ts`.\n\n### Test IDs — `testID` vs `data-testid`\n\nAlways include a test ID on anything a user interacts with (buttons, fields, toggles, dialogs). Which prop depends on the component:\n\n- **`testID`** — components that declare it explicitly: `Dialog` (+ `closeButtonTestID`), `Form`, `InputField`, `PasswordField`, `SearchField`, `SelectField`, `TextArea`, `Radio`, `AlertMessage` (+ `actionTestId`).\n- **`data-testid`** — components that extend native HTML and don't redeclare it: `Button`, `ToggleSwitch`, `Checkbox`, `Link`, `Pressable`, `Text`, `Title`.\n\nRule of thumb: try `testID` first; if TypeScript rejects it, use `data-testid`. When editing an existing file, follow the naming pattern already there (e.g. `createvault-name-v2`, `createvault-discard-v2`).\n\n### Prop naming — modern vs. deprecated (important)\n\nThe kit recently renamed several field props. **Use the modern names:**\n\n| Use | Not (deprecated) |\n| --- | --- |\n| `onChange` (receives `ChangeEvent`) | `onChangeText` (receives string) |\n| `placeholder` | `placeholderText` |\n| `error` (string) | `errorMessage` + `variant` |\n\n⚠️ **Existing v2 files in this repo (e.g. `CreateVaultModalContentV2`, `CardCreateMasterPasswordV2`) still use the deprecated props.** Don't copy their prop names blindly — use the modern ones in new code. The deprecated props still work for now but will be removed.\n\n**Exception:** `SearchField` still uses `onChangeText` + `placeholderText` — those aren't deprecated there. `testID` is current everywhere.\n\n## Theming\n\nThe codebase does **not** use styled-components. The convention is a `createStyles(colors)` factory that returns plain inline-style objects, consumed via `style={styles.foo}`.\n\n**In the component** (reference: `src/pages/WelcomePage/CardCreateMasterPasswordV2/index.tsx`):\n\n```tsx\nimport { useTheme } from '@tetherto/pearpass-lib-ui-kit'\nimport { createStyles } from './styles'\n\nconst Component = () => {\n const { theme } = useTheme()\n const styles = createStyles(theme.colors)\n return
…
\n}\n```\n\n**In the companion `styles.ts`** (reference: `src/pages/WelcomePage/CardCreateMasterPasswordV2/styles.ts`):\n\n```ts\nimport type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\nimport { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = (colors: ThemeColors) => ({\n card: {\n background: colors.colorSurfacePrimary,\n border: `1px solid ${colors.colorBorderPrimary}`,\n borderRadius: `${rawTokens.radius8}px`,\n padding: `${rawTokens.spacing24}px`,\n gap: `${rawTokens.spacing12}px`,\n },\n})\n```\n\n### `rawTokens` — flat, numeric-suffixed keys (not nested)\n\n- Spacing: `spacing2`, `spacing4`, `spacing6`, `spacing8`, `spacing10`, `spacing12`, `spacing16`, `spacing20`, `spacing24`, `spacing32`, `spacing40`, `spacing48` (all `number`, multiply with `${n}px`)\n- Radius: `radius8`, `radius16`, `radius20`, `radius26`\n- Font size: `fontSize12`, `fontSize14`, `fontSize16`, `fontSize24`, `fontSize28`\n- Font family: `fontPrimary` (`\"Inter\"`), `fontDisplay` (`\"Humble Nostalgia\"`)\n- Weight: `weightRegular` (`\"400\"`), `weightMedium` (`\"500\"`)\n\n### `theme.colors` — common keys seen in this repo\n\n`colorSurfacePrimary`, `colorSurfaceHover`, `colorBorderPrimary`, `colorBorderSecondary`, `colorTextPrimary`, `colorTextSecondary`, `colorTextTertiary`, `colorLinkText`. If you need one you haven't seen, inspect the `ThemeColors` type from `@tetherto/pearpass-lib-ui-kit`.\n\n### When hardcoded values are OK\n\nTokens cover the design-system primitives. Feature-specific layout values (a card's `maxWidth: '500px'`, a one-off `padding: '55px 0'`) are fine as literals — these aren't design tokens. **Rule of thumb:** if the value corresponds to a semantic design decision (spacing step, brand color, radius), it must come from a token.\n\n## Icons\n\n```tsx\nimport { Add, Download, Folder, OpenInNew } from '@tetherto/pearpass-lib-ui-kit/icons'\n```\n\n530 icons, mostly Material Design, with style variants as suffixes: `Filled`, `Outlined`, `Round`, `Sharp`, `Tone` (e.g. `LockFilled`, `InfoOutlined`, `KeyboardArrowRightRound`). If a name has no suffix, it exists as a single variant.\n\n**Commonly used in this repo** (check these first before browsing):\n\n- **Actions:** `Add`, `Download`, `ContentCopy`, `Share`, `Send`, `Swap`, `UploadFileFilled`\n- **Folder / organization:** `Folder`, `FolderOpen`, `FolderCopy`, `CreateNewFolder`, `Layers`\n- **Navigation / arrows:** `KeyboardArrowRightFilled`, `KeyboardArrowRightRound`, `KeyboardArrowLeftFilled`, `ExpandMore`\n- **Status / feedback:** `InfoOutlined`, `ReportProblemRound`, `ErrorFilled`, `Check`, `DoneAll`, `CheckBox`\n- **Security:** `LockFilled`, `Key`, `SecurityFilled`, `Fingerprint`, `TwoFactorAuthenticationFilled`\n- **External / misc:** `ImportOutlined`, `OpenInNew`\n\n**Discovering others:** `ls node_modules/@tetherto/pearpass-lib-ui-kit/dist/icons/components/ | grep -i ` — names are PascalCase, grep is case-insensitive friendly.\n\n## Anti-patterns to avoid\n\nWhen editing a v2 file or creating new UI, do **not**:\n\n- Add a new file under `src/lib-react-components/components/` for a Button/Input/Modal variant.\n- Import `PearPassInputField`, `PearPassPasswordField`, or any `Button*` variant from `src/lib-react-components/` into any new file — swap to the kit equivalents.\n- Add a `V2` suffix to a net-new file that has no v1 sibling. Suffix is only for migration coexistence.\n- Use native `\n\n
\n \n
\n
\n
\n

\n

\n
\n
\n \n \n
\n \n Launch PearPass\n \n \n \n
\n ${pearSvg}\n Powered by Pear\n
\n \n \n`\n" }, { "path": "appling/lib/worker.cjs", "content": "const appling = require('appling-native')\nconst { App } = require('fx-native')\nconst bootstrap = require('pear-updater-bootstrap')\n\nconst { Progress } = require('./progress')\nconst { encode, decode, format } = require('./utils')\n\nconst app = App.shared()\n\nlet config\nlet platform\nlet installing = false // Guard against concurrent installation\n\nfunction setup(data) {\n config = data\n}\n\n/**\n * Validates that config has all required fields.\n * @returns {string|null} Error message if invalid, null if valid\n */\nfunction validateConfig() {\n if (!config) {\n return 'Configuration not received - setup() was not called'\n }\n if (!config.dir) {\n return \"Configuration missing required 'dir' field\"\n }\n if (!config.platform) {\n return \"Configuration missing required 'platform' field\"\n }\n if (!config.link) {\n return \"Configuration missing required 'link' field\"\n }\n return null\n}\n\nasync function install() {\n // Prevent concurrent installation attempts\n if (installing) {\n return\n }\n\n // Validate configuration before proceeding\n const configError = validateConfig()\n if (configError) {\n console.error('[worker] Configuration error:', configError)\n app.broadcast(encode({ type: 'error', error: configError }))\n return\n }\n\n installing = true\n const progress = new Progress(app, [0.3, 0.7])\n let platformFound = false\n let bootstrapInterval = null\n\n try {\n try {\n platform = await appling.resolve(config.dir)\n platformFound = true\n } catch {\n // Platform not found - bootstrap it\n await bootstrap(config.platform, config.dir, {\n lock: false,\n onupdater: (u) => {\n bootstrapInterval = setInterval(() => {\n progress.update(format(u))\n if (u.downloadProgress === 1) {\n clearInterval(bootstrapInterval)\n }\n }, 250)\n }\n })\n platform = await appling.resolve(config.dir)\n }\n\n if (platformFound) {\n progress.stage(0, 1)\n }\n\n progress.update({ progress: 0, speed: '', peers: 0, bytes: 0 }, 1)\n\n await platform.preflight(config.link, (u) => {\n progress.update(format(u), 1)\n })\n\n progress.complete()\n app.broadcast(encode({ type: 'complete' }))\n } catch (e) {\n console.error('[worker] Installation error:', e.message)\n app.broadcast(encode({ type: 'error', error: e.message }))\n } finally {\n // Always reset installing flag to allow retry\n installing = false\n if (bootstrapInterval) {\n clearInterval(bootstrapInterval)\n }\n }\n}\n\napp.on('message', async (message) => {\n const msg = decode(message)\n\n // Handle decode failure (malformed JSON)\n if (!msg) {\n return\n }\n\n switch (msg.type) {\n case 'config':\n setup(msg.data)\n break\n case 'install':\n await install()\n break\n }\n})\n\napp.broadcast(encode({ type: 'ready' }))\n" }, { "path": "appling/package.json", "content": "{\n \"private\": true,\n \"name\": \"PearPass\",\n \"version\": \"1.0.0\",\n \"description\": \"Pear Appling for PearPass\",\n \"engines\": {\n \"node\": \">=22.0.0\"\n },\n \"exports\": {\n \"./package\": \"./package.json\"\n },\n \"files\": [\n \"app.cjs\",\n \"lib\"\n ],\n \"scripts\": {\n \"test\": \"npm run lint\",\n \"lint\": \"prettier . --check\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/tetherto/pearpass-app-desktop.git\"\n },\n \"author\": \"Tether Data S.A. de C.V.\",\n \"license\": \"Apache-2.0\",\n \"bugs\": {\n \"url\": \"https://github.com/tetherto/pearpass-app-desktop/issues\"\n },\n \"homepage\": \"https://github.com/tetherto/pearpass-app-desktop#readme\",\n \"dependencies\": {\n \"appling-native\": \"^1.4.0\",\n \"bare-thread\": \"^1.1.3\",\n \"fx-native\": \"^1.1.3\",\n \"pear-updater-bootstrap\": \"^2.3.0\",\n \"prettier-bytes\": \"^1.0.4\"\n },\n \"devDependencies\": {\n \"prettier\": \"^3.6.2\",\n \"prettier-config-holepunch\": \"^2.0.0\"\n }\n}\n" }, { "path": "babel.config.cjs", "content": "module.exports = {\n presets: [\n [\n '@babel/preset-env',\n {\n targets: { node: 'current' },\n modules: 'commonjs'\n }\n ],\n '@babel/preset-react',\n '@babel/preset-typescript'\n ],\n env: {\n test: {\n // Compile `css.create(...)` / `html.*` calls from react-strict-dom and\n // @tetherto/pearpass-lib-ui-kit the same way the production bundler does\n // (see `scripts/bundle-renderer.mjs`). Without this, evaluating those\n // modules in Jest throws \"Styles must be compiled by '@stylexjs/babel-plugin'\".\n presets: [\n [\n 'react-strict-dom/babel-preset',\n {\n debug: false,\n dev: false,\n rootDir: process.cwd(),\n platform: 'web'\n }\n ]\n ]\n }\n }\n}\n" }, { "path": "babel.strict-dom.cjs", "content": "const dev = process.env.NODE_ENV !== 'production'\n\nmodule.exports = {\n babelrc: false,\n configFile: false,\n parserOpts: {\n plugins: ['typescript', 'jsx']\n },\n presets: [\n [\n 'react-strict-dom/babel-preset',\n {\n debug: dev,\n dev,\n rootDir: process.cwd(),\n platform: 'web'\n }\n ]\n ]\n}\n" }, { "path": "build-assets/win/AppxManifest.xml", "content": "\n\n \n \n PearPass\n PearPass\n PearPass password manager\n \n assets\\PearPass.png\n disabled\n disabled\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n" }, { "path": "docs/Electron-Packaging-And-Runtime.md", "content": "# Electron packaging and runtime\n\nThis document describes how the PearPass desktop app is built, packaged, and how the main process, worklet (vault), and renderer communicate.\n\n---\n\n## 1. Architecture overview\n\n```\n┌─────────────────────────────────────────────────────────────────┐\n│ Renderer (React) │\n│ - Uses window.electronAPI (from preload) for vault & runtime │\n└────────────────────────────┬────────────────────────────────────┘\n │ IPC (vault:invoke, runtime:*, get-app-path)\n ▼\n┌─────────────────────────────────────────────────────────────────┐\n│ Main process (electron/main.cjs) │\n│ - Creates window, preload, BrowserWindow │\n│ - Starts worklet via pear-runtime or bare-sidecar │\n│ - Registers IPC handlers; forwards vault calls to vaultClient │\n└────────────────────────────┬────────────────────────────────────┘\n │ stdio / IPC pipe\n ▼\n┌─────────────────────────────────────────────────────────────────┐\n│ Worklet (Bare sidecar) │\n│ - Runs vault logic (pearpass-lib-vault-core worklet) │\n│ - Dev: app.js (ESM). Packaged: app.cjs (CJS bundle) │\n└─────────────────────────────────────────────────────────────────┘\n```\n\n- **Renderer** never talks to the worklet directly. It calls `window.electronAPI.vaultInvoke(method, args)` (and runtime helpers). The **main process** receives those and forwards them to **PearpassVaultClient**, which speaks to the worklet over a pipe.\n- The **worklet** runs in a separate process (Bare runtime). It uses `bare-*` modules and native addons; the main process only spawns it and connects IPC.\n\n---\n\n## 2. Main process (electron/main.cjs)\n\n- **Entry:** `main` in package.json points to `electron/main.cjs`.\n- **On ready:** Sets log path, registers IPC, then starts the runtime via `startRuntime()` and finally creates the main window.\n- **Runtime start:**\n - If `runtime-config.cjs.upgrade` is set: uses **pear-runtime** (P2P OTA), configures storage based on `pear-runtime-legacy-storage`, and calls `PearRuntime.run(workletPath)` to launch the vault worklet as a sidecar.\n - If no upgrade link is set: uses **bare-sidecar** only (`startWorkletOnly()`), spawns the worklet with `new Sidecar(workletPath)` and runs without P2P updates.\n- **Storage layout:** Tries to reuse existing Pear platform storage via `pear-runtime-legacy-storage`. If none is found, it falls back to `app.getPath('userData')/app-storage/by-dkey/`.\n- **Flatpak compatibility:** `electron/flatpak-paths.cjs` wraps both `app.getPath('userData')` and any legacy Pear storage path with `getSandboxSafePath()`. Inside Flatpak, host-mapped XDG paths under `~/.var/app/...` are remapped into `~/.config/...` compatibility paths so the vault worklet accepts them.\n- **Packaged app:** With `asar: false` all code and `node_modules` live under `Contents/Resources/app/` on macOS, so the worklet and renderer resolve modules from the real filesystem (no `app.asar` indirection).\n- **IPC:** Handles `get-app-path`, `runtime:getConfig`, `runtime:applyUpdate`, `runtime:restart`, `runtime:checkUpdated`, and `vault:invoke`. Vault methods are forwarded to `vaultClient`; Buffers are serialized as `{ __base64 }`. It also listens for `pearRuntime.updater` events and forwards `runtime:updating` / `runtime:updated` to the renderer to drive the OTA UI.\n\n---\n\n## 3. Worklet: dev vs packaged\n\nThe vault worklet lives in `@tetherto/pearpass-lib-vault-core` (Git dependency) under `src/worklet/`. It is loaded in two different ways so it works in both dev and packaged app.\n\n### 3.1 Dev\n\n- **Path:** `getWorkletPath()` returns \n `app.getAppPath()/node_modules/@tetherto/pearpass-lib-vault-core/src/worklet/app.js`.\n- **Format:** ESM (`app.js`). The Bare loader in dev can run ESM and resolve Node built-ins to its own shims.\n- **No bundle:** Dependencies are required from the real `node_modules` tree.\n\n### 3.2 Packaged\n\n- **Path:** `getWorkletPath()` returns \n `process.resourcesPath/app/node_modules/@tetherto/pearpass-lib-vault-core/src/worklet/app.cjs`.\n- **Format:** CommonJS bundle (`app.cjs`). The Bare runtime used in the packaged app loads the entry as CJS; giving it ESM `app.js` would throw “Cannot use import statement outside a module”.\n- **Bundle:** Produced by `scripts/build.worklet.mjs` (see below). Only the worklet **source** (relative imports) is bundled; all `node_modules` are external so Bare resolves them at runtime and native addons work.\n\n---\n\n## 4. Worklet build (scripts/build.worklet.mjs)\n\n- **Runs as part of `npm run build`** (before `tsc` and the renderer bundle).\n- **Input:** `node_modules/@tetherto/pearpass-lib-vault-core/src/worklet/app.js` (ESM).\n- **Output:** `node_modules/@tetherto/pearpass-lib-vault-core/src/worklet/app.cjs` (single CJS file).\n- **Behaviour (current esbuild config):**\n - `entryPoints`: the ESM worklet entry; `bundle: true`, `platform: 'node'`, `format: 'cjs'`, `target: 'node18'`.\n - **Externalize Node built-ins and native-heavy modules:** `fs`, `path`, `os`, `net`, `crypto`, `child_process`, `fs/promises`, `require-addon`, `fs-native-extensions`, `sodium-native` are marked as `external` so they resolve at runtime from `node_modules`.\n- **Result:** A CJS bundle that contains only the worklet code; at runtime Bare loads its dependencies from `node_modules` in the packaged app.\n\n---\n\n## 5. Packaging (no asar; mac = electron-builder, win = electron-forge)\n\n- **asar:** Disabled (`\"asar\": false` in `build`). All app code and `node_modules` are real files on disk (no `app.asar`), so the worklet and renderer always resolve modules from the filesystem.\n- **Why no asar:** Electron patches the Node `fs` module so any access to `*.asar` is routed through its ASAR reader. During OTA on macOS, `pear-runtime-updater` mirrors a partially written `app.asar` into the `next` directory; Electron’s patched `fs` then tries to treat that in‑progress file as a valid ASAR and throws `Error: Invalid package ...app.asar`. Turning asar off avoids this class of error and lets the updater see only plain files.\n\n### 5.1 macOS (electron-builder)\n\n- **Tooling:** `electron-builder@23.6.0`.\n- **Build commands:** `npm run dist:mac` (local) and `npm run dist:mac:ci` (CI).\n- **Pipeline:**\n - `npm run build` → worklet bundle + `tsc` + renderer bundle (`dist/renderer.bundle.js`).\n - `npx electron-builder --mac` → `dist/mac-arm64/PearPass.app` + DMG.\n - CI uses `scripts/notarize.cjs` as an `afterSign` hook (`@electron/notarize` + `notarytool`) to sign and notarize the app.\n - After that, `PearPass.app` is copied into `out/darwin-arm64/` and `pear:build:darwin` produces the Pear drive layout (`by-arch/darwin-arm64/app/PearPass.app/...`).\n\n### 5.2 Windows (electron-forge, MSIX)\n\n- **Tooling:** **Electron Forge** for Windows packaging (electron-builder does not support MSIX).\n- **Build:** Forge produces an MSIX package for the Windows desktop app; CI then stages that MSIX into the Pear drive for the `win32-x64` arch so `PearRuntime` on Windows can install it via `MSIXManager`.\n- **Pear layout:** The staged drive contains `by-arch/win32-x64/app/.msix`, where `` matches the `name` passed to `PearRuntime` in `electron/main.cjs`.\n\n---\n\n## 6. Preload (electron/preload.cjs)\n\n- **Attached to the renderer** via `webPreferences.preload` (with `nodeIntegration: true`, `contextIsolation: false`).\n- **Responsibilities:**\n 1. **App path for fs-native-extensions:** Sends `get-app-path` sync, then sets `global.__dirname` and `global.__filename` to the `fs-native-extensions` path so code that uses it (e.g. via pear-ipc) in the renderer does not break.\n 2. **Renderer API:** Exposes `window.electronAPI` with:\n - Runtime: `getConfig`, `applyUpdate`, `restart`, `checkUpdated`, `onRuntimeUpdating`, `onRuntimeUpdated`\n - Vault: `vaultInvoke(method, args)`, `vaultOnUpdate(cb)`\n- The renderer must use this preload; without it there is no `window.electronAPI` and no correct `__dirname`/`__filename` for fs-native-extensions.\n\n---\n\n## 7. Renderer → main → worklet flow\n\n1. Renderer calls e.g. `window.electronAPI.vaultInvoke('someMethod', [arg1, arg2])`.\n2. Preload forwards to `ipcRenderer.invoke('vault:invoke', { method, args })`.\n3. Main process `ipcMain.handle('vault:invoke', …)` receives it, gets `vaultClient[method]`, deserializes args (e.g. `__base64` → Buffer), calls the method on `vaultClient`.\n4. `PearpassVaultClient` sends the call over the pipe to the worklet; worklet runs the vault logic and replies.\n5. Main process serializes the result (e.g. Buffer → `__base64`) and returns to the renderer.\n\n---\n\n## 8. Key files reference\n\n| Role | File |\n| ------------------------------ | -------------------------------------------------------------------------------- |\n| Main process | `electron/main.cjs` |\n| Preload | `electron/preload.cjs` |\n| Flatpak path helper | `electron/flatpak-paths.cjs` |\n| Worklet entry (ESM) | `node_modules/@tetherto/pearpass-lib-vault-core/src/worklet/app.js` |\n| Worklet bundle (CJS, packaged) | `node_modules/@tetherto/pearpass-lib-vault-core/src/worklet/app.cjs` (generated) |\n| Worklet build script | `scripts/build.worklet.mjs` |\n| Renderer bundle | `scripts/bundle-renderer.mjs` → `dist/renderer.bundle.js` |\n| Build pipeline | `package.json` scripts: `build`, `dist:*`, `pear:build:*` |\n\n---\n\n## 9. Troubleshooting\n\n- **“Cannot use import statement outside a module” in packaged app** \n Packaged app must run the CJS worklet (`app.cjs`). Ensure `npm run build` runs the worklet build and `getWorkletPath()` returns `.../app.cjs` when `app.isPackaged` is true.\n\n- **“MODULE_NOT_FOUND” for a package when running from DMG /Applications** \n With `asar: false` this usually means the package was not included in `build.files` or was only a devDependency. Ensure it is a runtime dependency and matched by `build.files`.\n\n- **“ADDON_NOT_FOUND” for a native addon** \n The worklet bundle must not inline that package. Ensure the module is in the `external` list in `scripts/build.worklet.mjs` (so it is loaded from `node_modules` at runtime) and that the native binary is present in the packaged app.\n\n- **Flatpak build starts but vault/worklet storage init fails** \n Ensure `electron/main.cjs` still routes both `app.getPath('userData')` and `pear-runtime-legacy-storage` results through `getSandboxSafePath()` from `electron/flatpak-paths.cjs`. Flatpak commonly exposes XDG directories under `~/.var/app/...`, which the worklet rejects unless they are remapped to the approved `~/.config/...` compatibility location.\n\n- **OTA update appears stuck on Windows** \n Confirm that the Pear drive for `by-arch/win32-x64/app/...` contains a valid `.msix` (if `PearRuntime` is using `MSIXManager.addPackage`) and that the filename matches the `name` passed to `PearRuntime` in `electron/main.cjs`.\n" }, { "path": "e2e/.gitignore", "content": "test-artifacts/\nnode_modules/\nplaywright-report/\n.DS_Store\n.env\n" }, { "path": "e2e/components/CreateOrEditPage.js", "content": "import { test, expect } from '../fixtures/app.runner.js'\n\nclass CreateOrEditPage {\n constructor(root) {\n this.root = root\n }\n\n // --- Input fields ---\n\n getCreateOrEditInputField(field) {\n const overrides = {\n website: 'createoredit-input-website-v2-0',\n attachment: 'createoredit-attachment-upload-v2',\n }\n const dashIndex = field.indexOf('-')\n const testId = overrides[field] ??\n (dashIndex !== -1\n ? `createoredit-${field.slice(0, dashIndex)}-input-${field.slice(dashIndex + 1)}-v2`\n : `createoredit-input-${field}-v2`)\n return this.root.getByTestId(testId).locator('input').first()\n }\n\n getCreateOrEditTextareaField(field) {\n return this.root.getByTestId(`createoredit-textarea-${field}`)\n }\n\n async fillCreateOrEditInput(field, value) {\n const input = this.getCreateOrEditInputField(field)\n await input.waitFor({ state: 'visible' })\n await input.fill('')\n await input.fill(value)\n }\n\n async verifyPasswordToNotHaveValue(password) {\n const passwordInput = this.getCreateOrEditInputField('password')\n await expect(passwordInput).toBeVisible()\n await expect(passwordInput).not.toHaveValue(password)\n }\n\n // --- Form buttons ---\n\n getCreateOrEditButton(name) {\n const dashIndex = name.indexOf('-')\n const testId = dashIndex !== -1\n ? `createoredit-${name.slice(0, dashIndex)}-button-${name.slice(dashIndex + 1)}-v2`\n : `createoredit-button-${name}-v2`\n return this.root.getByTestId(testId)\n }\n\n async clickOnCreateOrEditButton(button) {\n const input = this.getCreateOrEditButton(button)\n await input.waitFor({ state: 'visible' })\n await input.click()\n }\n\n get saveButton() {\n return this.root.getByTestId('createoredit-button-save')\n }\n\n get elementItemCloseButton() {\n return this.root.getByTestId(/-close-v2$/).first()\n }\n\n async clickElementItemCloseButton() {\n await expect(this.elementItemCloseButton).toBeVisible()\n await this.elementItemCloseButton.click()\n }\n\n // --- Multi-slot website / comment ---\n\n get detailsWebsite() {\n return this.root.getByTestId('website-multi-slot-input-slot-0')\n }\n\n async verifyDetailsWebsiteCount(expectedCount) {\n await expect(this.detailsWebsite).toHaveCount(expectedCount)\n }\n\n get detailsComment() {\n return this.root.getByTestId('comments-multi-slot-input-slot-0')\n }\n\n async verifyDetailsCommentCount(expectedCount) {\n await expect(this.detailsComment).toHaveCount(expectedCount)\n }\n\n // --- Password generation ---\n\n get passwordMenu() {\n return this.root.getByTestId('createoredit-button-generatepassword-v2')\n }\n\n async openPasswordMenu() {\n await expect(this.passwordMenu).toBeVisible()\n await this.passwordMenu.click()\n }\n\n get insertPasswordButton() {\n return this.root\n .getByTestId('generatepassword-button-primary-v2')\n .first()\n }\n\n async clickInsertPasswordButton() {\n await expect(this.insertPasswordButton).toBeVisible()\n await this.insertPasswordButton.click()\n }\n\n // --- Password field ---\n\n get elementItemPassword() {\n return this.root.getByPlaceholder('Password')\n }\n\n get passwordInput() {\n return this.root.getByTestId('createoredit-input-password')\n }\n\n get elementItemPasswordShowHideFirst() {\n return this.root\n .getByTestId('password-field-eye-button')\n .first()\n }\n\n get elementItemPasswordShowHideLast() {\n return this.root.getByTestId('password-field-eye-button').last()\n }\n\n async clickShowHidePasswordButtonFirst() {\n await expect(this.elementItemPasswordShowHideFirst).toBeVisible()\n await this.elementItemPasswordShowHideFirst.click()\n }\n\n async clickShowHidePasswordButtonLast() {\n await expect(this.elementItemPasswordShowHideLast).toBeVisible()\n await this.elementItemPasswordShowHideLast.click()\n }\n\n async verifyPasswordType(password_type) {\n const itemDetail = this.root.getByPlaceholder('Password')\n await expect(itemDetail).toBeVisible()\n await expect(itemDetail).toHaveAttribute('type', password_type)\n }\n\n // --- Attachment upload ---\n\n getCreateOrEditUploadAttachment() {\n return this.root.getByTestId(/-attachment-upload-v2$/).first()\n }\n\n async clickOnAttachment() {\n const input = this.getCreateOrEditUploadAttachment()\n await input.waitFor({ state: 'visible' })\n await input.click()\n }\n\n get deleteAttachmentButton() {\n return this.root.getByTestId(/-button-deleteattachment-v2-0$/).first()\n }\n\n async clickOnDeleteAttachmentButton() {\n const deleteButton = this.deleteAttachmentButton\n await expect(deleteButton).toBeVisible()\n await deleteButton.click()\n }\n\n get loadFile() {\n return this.root.getByTestId('createoredit-button-loadfile')\n }\n\n get fileInput() {\n return this.root.locator('input[type=\"file\"]').first()\n }\n\n async uploadFile() {\n await this.fileInput.setInputFiles('test-files/TestPhoto.png')\n }\n\n get uploadedFileLink() {\n return this.root\n .getByTestId('uploadfiles-field-v2')\n .getByText('TestPhoto.png', { exact: true })\n }\n\n get uploadedFile() {\n return this.root.getByTestId('uploadfiles-button-additem-v2')\n }\n\n get uploadedImage() {\n return this.root.getByAltText('TestPhoto.png')\n }\n\n async clickOnUploadedFile() {\n await expect(this.uploadedFile).toBeVisible()\n await this.uploadedFile.click()\n }\n\n async verifyUploadedFileIsVisible() {\n await expect(this.uploadedFileLink).toBeVisible()\n await expect(this.uploadedFileLink).toHaveText('TestPhoto.png')\n }\n\n async verifyUploadedImageIsVisible() {\n await expect(this.uploadedImage).toBeVisible()\n }\n\n // --- Custom note fields ---\n\n get createCustomNote() {\n return this.root.getByTestId('createcustomfield-option-note')\n }\n\n get customNoteInput() {\n return this.root.getByTestId('createoredit-custom-input-customfield-v2-0').locator('input').first()\n }\n\n get customNoteInput_first() {\n return this.root.getByTestId(/^createoredit-custom-input-customfield-v2-/)\n }\n\n async fillCustomNoteInput() {\n const input = this.customNoteInput\n await input.waitFor({ state: 'visible' })\n await input.fill('')\n await input.fill('Custom Note')\n }\n\n async fillCustomNoteInput_first() {\n const input = this.customNoteInput_first\n await input.waitFor({ state: 'visible' })\n await input.fill('')\n await input.fill('Custom Note')\n }\n\n async deleteCustomNote() {\n const input = this.customNoteInput\n await input.waitFor({ state: 'visible' })\n await input.fill('')\n }\n\n // --- Folder dropdown ---\n\n get dropdownFolderMenu() {\n return this.root.getByTestId('createoredit-select-folder-v2')\n }\n\n async openDropdownMenu() {\n await this.dropdownFolderMenu.waitFor({ state: 'attached' })\n await this.dropdownFolderMenu.click()\n }\n\n async selectFromDropdownMenu(foldername) {\n const folder = this.root.getByTestId(`createoredit-folder-option-v2-${foldername}`)\n await expect(folder).toBeVisible()\n await folder.click()\n }\n\n // --- Identity sections ---\n\n getSection(sectionname) {\n return this.root.getByTestId(`createoredit-section-${sectionname}`)\n }\n\n get identitySection() {\n return this.root.getByTestId(`createoredit-section-personalinfo`)\n }\n\n async clickOnIdentitySection(sectionname) {\n const section = this.getSection(sectionname)\n await section.waitFor({ state: 'visible' })\n await section.click()\n }\n\n // --- PassPhrase ---\n\n get passPhrasePasteButton() {\n return this.root.getByRole('button', { name: 'Paste recovery phrase' }).first()\n }\n\n async clickOnPasteFromClipboard() {\n const pasteButton = this.passPhrasePasteButton\n await expect(pasteButton).toBeVisible()\n await pasteButton.click()\n }\n\n // --- Item details (shared verifications) ---\n\n async verifyItemDetailsValue(labelOrPlaceholder, expectedValue) {\n const itemDetail = this.getElementItemDetails(labelOrPlaceholder)\n await expect(itemDetail).toHaveValue(expectedValue)\n }\n\n async verifyItemDetailsValueIsNotVisible(labelOrPlaceholder) {\n const itemDetail = this.getElementItemDetails(labelOrPlaceholder)\n await expect(itemDetail).not.toBeVisible()\n }\n\n}\n\nmodule.exports = { CreateOrEditPage }\n" }, { "path": "e2e/components/DetailsPage.js", "content": "import { test, expect } from '../fixtures/app.runner.js'\n\nclass DetailsPage {\n constructor(root) {\n this.root = root\n }\n\n // --- General / counter ---\n\n get itemDetailsCounter() {\n return this.root\n .getByTestId('details-header-v2')\n .locator('input[placeholder]')\n }\n\n async verifyDetailsNoItems() {\n await expect(this.itemDetailsCounter).toHaveCount(0)\n }\n\n // --- Title ---\n\n get getItemDetailsTitle() {\n return this.root.locator('[data-testid^=\"details-title\"], [data-testid=\"details-header-v2\"]')\n }\n\n async verifyTitle(expectedTitle) {\n await expect(this.getItemDetailsTitle).toContainText(expectedTitle)\n }\n\n // --- Item details / multi-slot ---\n\n getElementItemDetails(labelOrPlaceholder) {\n const v2LabelMap = {\n 'Email or username': 'credentials-multi-slot-input-slot-0',\n 'Password': 'credentials-multi-slot-input-slot-1',\n 'https://': 'website-multi-slot-input-slot-0',\n 'Name on card': 'card-details-multi-slot-input-slot-0',\n 'Number on card': 'card-details-multi-slot-input-slot-1',\n 'Date of expire': 'card-details-multi-slot-input-slot-2',\n 'Security code': 'card-details-multi-slot-input-slot-3',\n 'Pin code': 'card-details-multi-slot-input-slot-4',\n 'Comment': 'comments-multi-slot-input-slot-0',\n 'Wi-Fi Password': 'credentials-multi-slot-input-slot-0',\n 'Add comment': 'comments-multi-slot-input-slot-0',\n 'Other Field': 'custom-fields-multi-slot-input-slot-0',\n }\n const v2TestId = v2LabelMap[labelOrPlaceholder]\n if (v2TestId) {\n return this.root.getByTestId(v2TestId).locator('input').first()\n }\n\n return this.root\n .locator('input', {\n has: this.root.locator('[data-testid=\"details-header\"]', {\n hasText: labelOrPlaceholder\n })\n })\n .or(this.root.locator(`input[placeholder=\"${labelOrPlaceholder}\"]`))\n }\n\n async verifyItemDetailsValue(labelOrPlaceholder, expectedValue) {\n const itemDetail = this.getElementItemDetails(labelOrPlaceholder)\n await expect(itemDetail).toHaveValue(expectedValue)\n }\n\n async verifyItemDetailsValueIsNotVisible(labelOrPlaceholder) {\n const itemDetail = this.getElementItemDetails(labelOrPlaceholder)\n await expect(itemDetail).not.toBeVisible()\n }\n\n // --- Comment / note ---\n\n get getItemDetailsCommentInput() {\n return this.root.getByTestId('comments-multi-slot-input-slot-0').locator('input')\n }\n\n async verifyCustomNoteText(expectedText) {\n await expect(this.getItemDetailsCommentInput).toBeVisible()\n await expect(this.getItemDetailsCommentInput).toHaveValue(expectedText)\n }\n\n getElementItemDetailsNew() {\n return this.root.getByTestId('note-multi-slot-input-slot-0').locator('input').first()\n }\n\n async verifyNoteText(note_text) {\n const noteTextDetail = this.getElementItemDetailsNew()\n await expect(noteTextDetail).toBeVisible()\n await expect(noteTextDetail).toHaveValue(note_text)\n }\n\n // --- Identity ---\n\n getIdentityDetails(name) {\n const v2SlotMap = {\n fullname: 'personal-information-multi-slot-input-slot-0',\n email: 'personal-information-multi-slot-input-slot-1',\n phone: 'personal-information-multi-slot-input-slot-2',\n address: 'address-multi-slot-input-slot-0',\n zip: 'address-multi-slot-input-slot-1',\n city: 'address-multi-slot-input-slot-2',\n region: 'address-multi-slot-input-slot-3',\n country: 'address-multi-slot-input-slot-4',\n passportfullname: 'passport-multi-slot-input-slot-0',\n passportnumber: 'passport-multi-slot-input-slot-1',\n passportissuingcountry: 'passport-multi-slot-input-slot-2',\n passportdateofissue: 'passport-multi-slot-input-slot-3',\n passportexpirydate: 'passport-multi-slot-input-slot-4',\n passportnationality: 'passport-multi-slot-input-slot-5',\n passportdob: 'passport-multi-slot-input-slot-6',\n passportgender: 'passport-multi-slot-input-slot-7',\n idcardnumber: 'identity-card-multi-slot-input-slot-0',\n idcarddateofissue: 'identity-card-multi-slot-input-slot-1',\n idcardexpirydate: 'identity-card-multi-slot-input-slot-2',\n idcardissuingcountry: 'identity-card-multi-slot-input-slot-3',\n comment: 'comments-multi-slot-input-slot-0',\n note: 'comments-multi-slot-input-slot-0',\n }\n const v2TestId = v2SlotMap[name]\n if (v2TestId) {\n return this.root.getByTestId(v2TestId).locator('input').first()\n }\n return this.root.getByTestId(`identitydetails-field-${name}`)\n }\n\n async verifyIdentityDetails(name) {\n const identityDetail = this.getIdentityDetails(name)\n await expect(identityDetail).toBeVisible()\n }\n\n async verifyIdentityDetailsValue(name, expectedValue) {\n const identityDetail = this.getIdentityDetails(name)\n await expect(identityDetail).toHaveValue(expectedValue)\n }\n\n // --- Recovery phrase ---\n\n get recoveryPhraseDetails() {\n return this.root.getByTestId(/passphrase-word-input-\\d+/)\n }\n\n async verifyAllRecoveryPhraseWords(expectedWords) {\n const slots = this.recoveryPhraseDetails\n const count = await slots.count()\n for (let i = 0; i < count; i++) {\n const input = slots.nth(i).locator('input').first()\n await expect(input).toHaveValue(expectedWords[i])\n }\n }\n\n // --- Attachment / file ---\n\n get elementItemFileLink() {\n return this.root\n .getByTestId('attachment-field-0')\n .getByText('TestPhoto.png', { exact: true })\n }\n\n get uploadedImage() {\n return this.root.getByAltText('TestPhoto.png')\n }\n\n async clickOnUploadedFile() {\n await expect(this.elementItemFileLink).toBeVisible()\n await this.elementItemFileLink.click()\n }\n\n async verifyUploadedFileIsVisible() {\n await expect(this.elementItemFileLink).toBeVisible()\n }\n\n async verifyUploadedImageIsVisible() {\n await expect(this.uploadedImage).toBeVisible()\n }\n\n // --- Actions bar ---\n\n get detailsBarActionsButton() {\n return this.root.getByTestId('details-button-actions-v2')\n }\n\n get detailsBarEditButton() {\n return this.root.getByTestId('details-actions-item-edit-v2')\n }\n\n get detailsBarFavoriteButton() {\n return this.root.getByTestId('details-actions-item-favorite-v2')\n }\n\n get detailsBarThreeDots() {\n return this.root.getByTestId('button-round-icon').first()\n }\n\n async openItemBarThreeDotsDropdownMenu() {\n await expect(this.detailsBarActionsButton).toBeVisible()\n await this.detailsBarActionsButton.click()\n }\n\n async editElement() {\n await expect(this.detailsBarActionsButton).toBeVisible()\n await this.detailsBarActionsButton.click()\n await expect(this.detailsBarEditButton).toBeVisible()\n await this.detailsBarEditButton.click()\n }\n\n get markAsFavoriteButton() {\n return this.root.locator('[data-testid=\"details-actions-item-favorite-v2\"]').getByText('Add to Favorites', { exact: true })\n }\n\n get removeFromFavoritesButton() {\n return this.root.locator('[data-testid=\"details-actions-item-favorite-v2\"]').getByText('Remove from Favorites', { exact: true })\n }\n\n async clickMarkAsFavoriteButton() {\n await expect(this.detailsBarFavoriteButton).toBeVisible()\n await this.detailsBarFavoriteButton.click()\n }\n\n async clickRemoveFromFavoritesButton() {\n await expect(this.removeFromFavoritesButton).toBeVisible()\n await this.removeFromFavoritesButton.click()\n }\n\n async clickFavoriteButton() {\n await expect(this.detailsBarActionsButton).toBeVisible()\n await this.detailsBarActionsButton.click()\n await expect(this.detailsBarFavoriteButton).toBeVisible()\n await this.detailsBarFavoriteButton.click()\n }\n\n // --- Close button ---\n\n get elementItemCloseButton() {\n return this.root.getByTestId(/-close-v2$/).first()\n }\n\n async clickElementItemCloseButton() {\n await expect(this.elementItemCloseButton).toBeVisible()\n await this.elementItemCloseButton.click()\n }\n\n // --- Folder management ---\n\n getCreateNewFolderTitleInput() {\n return this.root.locator(\n 'input[placeholder=\"Enter Name\"]'\n )\n }\n\n get createFolderButton() {\n return this.root.getByRole('button', { name: 'Create New Folder' });\n }\n\n async fillCreateNewFolderTitleInput(value) {\n await this.getCreateNewFolderTitleInput().fill(value)\n }\n\n async clickCreateFolderButton() {\n const saveBtn = this.root.getByTestId('createfolder-save-v2')\n await expect(saveBtn).toBeVisible()\n await saveBtn.click()\n }\n\n getItemDetailsFolderName(foldername) {\n return this.root.getByTestId(`sidebar-folder-${foldername}`)\n }\n\n async verifyItemDetailsFolderName(foldername) {\n const itemDetailsFolder = this.getItemDetailsFolderName(foldername)\n await expect(itemDetailsFolder).toBeVisible()\n }\n\n // --- Record list / favorites ---\n\n get recordListContainer() {\n return this.root.getByTestId('recordList-record-container')\n }\n\n // --- Password visibility ---\n\n async clickShowHidePasswordButton() {\n await expect(this.elementItemPasswordShowHide).toBeVisible()\n await this.elementItemPasswordShowHide.click()\n }\n\n async clickPasswordToggle(slotTestId) {\n const toggle = this.root.getByTestId(slotTestId).getByTestId('password-field-eye-button')\n await expect(toggle).toBeVisible()\n await toggle.click()\n }\n\n async verifyPasswordFieldType(slotTestId, expectedType) {\n const input = this.root.getByTestId(slotTestId).locator('input').first()\n await expect(input).toBeVisible()\n await expect(input).toHaveAttribute('type', expectedType)\n }\n\n}\n\nmodule.exports = { DetailsPage }\n" }, { "path": "e2e/components/LoginPage.js", "content": "import { test, expect } from '../fixtures/app.runner.js'\n\nclass LoginPage {\n constructor(root) {\n this.root = root\n }\n\n // --- Title / ready state ---\n\n get title() {\n return this.root.locator('h1', { hasText: 'Enter Your Master Password' })\n }\n\n async waitForReady(timeout = 30000) {\n await expect(this.title).toBeVisible({ timeout })\n }\n\n // --- Password ---\n\n get passwordInput() {\n return this.root.getByTestId('login-password-input-v2').locator('input')\n }\n\n async enterPassword(password) {\n await expect(this.passwordInput).toBeVisible()\n await this.passwordInput.fill(password)\n }\n\n // --- Continue button ---\n\n get continueButton() {\n return this.root.getByTestId('login-continue-button-v2')\n }\n\n async clickContinue() {\n await this.continueButton.click()\n }\n\n async loginToApplication(password) {\n await this.waitForReady()\n await this.enterPassword(password)\n await this.clickContinue()\n }\n}\n\nmodule.exports = { LoginPage }\n" }, { "path": "e2e/components/MainPage.js", "content": "import { test, expect } from '../fixtures/app.runner.js'\n\nclass MainPage {\n constructor(root) {\n this.root = root\n }\n\n // --- Element list / records ---\n\n get element() {\n return this.root.locator('[data-record-id]').first()\n }\n\n getElementByPosition(position) {\n return this.root\n .locator('[data-record-id]')\n .nth(position)\n .locator('span')\n .last()\n }\n\n async clickOnFirstElement() {\n await expect(this.element).toBeVisible()\n await this.element.click()\n }\n\n async openElementDetails() {\n await expect(this.element).toBeVisible()\n await this.element.click()\n }\n\n async verifyElementTitle(title) {\n const row = this.root.locator('[data-record-id]').filter({ hasText: title })\n await expect(row).toBeVisible()\n }\n\n async verifyElementIsNotVisible() {\n await expect(this.element).not.toBeVisible()\n }\n\n async verifyElementByPosition(position, element_name) {\n await expect(this.getElementByPosition(position)).toHaveText(element_name)\n }\n\n async clickElementByPosition(position, element_name) {\n const element = this.getElementByPosition(position)\n await expect(element).toContainText(element_name)\n await element.click()\n }\n\n async elementCheckBox(expectedState) {\n const checkbox = this.element\n .locator('button[aria-checked]')\n\n await expect(checkbox)\n .toHaveAttribute('aria-checked', String(expectedState))\n }\n\n // --- Favorites ---\n\n get mainViewFavoriteIcon() {\n return this.root.getByTestId('multi-select-favorite')\n }\n\n async clickOnMainViewFavoriteIcon() {\n await expect(this.mainViewFavoriteIcon).toBeVisible()\n await this.mainViewFavoriteIcon.click()\n }\n\n async favoriteIconDisabled() {\n const favorite1 = this.mainViewFavoriteIcon\n await expect(favorite1).toHaveAttribute('aria-label', 'Add to Favorites')\n }\n\n async favoriteIconEnabled() {\n const favorite2 = this.mainViewFavoriteIcon\n await expect(favorite2).toHaveAttribute('aria-label', 'Remove from Favorites')\n }\n\n // --- Multi-select ---\n\n get mainViewHeaderSelect() {\n return this.root.getByTestId('main-view-header-select')\n }\n\n get multipleSelectionButon() {\n return this.root.getByTestId('main-view-header-select')\n }\n\n get multipleSelectDeleteButon() {\n return this.root.getByTestId('multi-select-delete')\n }\n\n get multipleSelectMoveButon() {\n return this.root.getByTestId('multi-select-move')\n }\n\n get multipleSelectCancelButon() {\n return this.root.getByTestId('multi-select-cancel-button')\n }\n\n get multipleSelectCheckerByPosition() {\n return this.root\n .getByTestId('recordList-record-container')\n .nth(`${position}`)\n .getByTestId('undefined-selected')\n }\n\n async clickMainViewHeaderSelect() {\n await expect(this.mainViewHeaderSelect).toBeVisible()\n await this.mainViewHeaderSelect.click()\n }\n\n async clickMultipleSelectiontButton() {\n await expect(this.multipleSelectionButon).toBeVisible()\n await this.multipleSelectionButon.click()\n }\n\n async clickMultipleSelectDeletetButton() {\n await expect(this.multipleSelectDeleteButon).toBeVisible()\n await this.multipleSelectDeleteButon.click()\n }\n\n async clickMultipleSelectMoveButon() {\n await expect(this.multipleSelectMoveButon).toBeVisible()\n await this.multipleSelectMoveButon.click()\n }\n\n async verifyMultipleSelectDeleteButtonIsEnabled() {\n await expect(this.multipleSelectDeleteButon).toBeVisible()\n await expect(this.multipleSelectDeleteButon).toBeEnabled()\n }\n\n // --- Add item / plus button ---\n\n get mainPlusButon() {\n return this.root.getByTestId('main-plus-button')\n }\n\n async clickAddItem(type) {\n await expect(this.mainPlusButon).toBeVisible()\n await this.mainPlusButon.click()\n\n const menuItem = this.root.getByTestId(`add-item-${type}`)\n await expect(menuItem).toBeVisible()\n await menuItem.click()\n }\n\n // --- Sort ---\n\n get sortButon() {\n return this.root.getByTestId('main-view-header-sort-menu')\n }\n\n getSortOption(option) {\n return this.root.getByTestId(`main-view-header-sort-${option}`)\n }\n\n async clickSortButton() {\n await expect(this.sortButon).toBeVisible()\n await this.sortButon.click()\n }\n\n async selectSortOption(option) {\n const sortOption = this.getSortOption(option)\n await sortOption.click()\n }\n\n // --- Folder management ---\n\n get createNewFolderinputFolderName() {\n return this.root.getByTestId('input-field')\n }\n\n get createFolderModalButton() {\n return this.root.getByRole('button', { name: 'Create folder' })\n }\n\n getCollectionButton(button_name) {\n return this.root.getByTestId(`emptycollection-button-create-${button_name}`)\n }\n\n async verifyElementFolderName(elementfoldername) {\n const folderBtn = this.root.getByTestId(`sidebar-folder-${elementfoldername}`)\n await expect(folderBtn).toBeVisible()\n await folderBtn.click()\n await expect(this.root.locator('[data-record-id]').first()).toBeVisible()\n }\n\n // --- Move folder ---\n\n async clickMoveFolderChip(folderName) {\n const chip = this.root.getByTestId(`movefolder-chip-${folderName}`)\n await expect(chip).toBeVisible()\n await chip.click()\n }\n\n async clickMoveFolderSubmit() {\n const submitBtn = this.root.getByTestId('movefolder-submit-v2')\n await expect(submitBtn).toBeVisible()\n await expect(submitBtn).toBeEnabled()\n await submitBtn.click()\n }\n\n // --- Empty collection ---\n\n get emptyCollectionView() {\n return this.root.getByTestId('empty-collection-v2')\n }\n\n async verifyEmptyCollection() {\n await expect(this.emptyCollectionView).toBeVisible()\n }\n\n // --- Details close ---\n\n get detailsCloseButton() {\n return this.root.getByTestId('details-button-collapse')\n }\n\n async clickDetailsCloseButton() {\n const collapseBtn = this.root.getByTestId('details-button-collapse')\n const modalCloseBtn = this.root\n .getByTestId('modalheader-button-close')\n .last()\n const closeBtn = collapseBtn.or(modalCloseBtn)\n await closeBtn.click({ timeout: 5000 }).catch(() => { })\n }\n\n // --- Confirm / delete ---\n\n async clickYesButton() {\n await this.root.getByTestId('delete-records-submit-v2').click()\n }\n\n}\n\nmodule.exports = { MainPage }\n" }, { "path": "e2e/components/SettingsPage.js", "content": "import { test, expect } from '../fixtures/app.runner.js'\n\nclass SettingsPage {\n constructor(root) {\n this.root = root\n }\n\n // --- Navigation ---\n\n getSettingsDropdownSection(section_name) {\n return this.root.getByTestId(`section-${section_name}`)\n }\n\n async verifySettingsDropdownSectionIsVisible(section_name) {\n const section_dropdown = this.getSettingsDropdownSection(section_name)\n await expect(section_dropdown).toBeVisible()\n }\n\n getSettingsDropdownNavigation(section_navigation_name) {\n return this.root.getByTestId(`settings-nav-${section_navigation_name}`)\n }\n\n async verifySettingsDropdownNavigationIsVisible(section_navigation_name) {\n const section_navigation = this.getSettingsDropdownNavigation(section_navigation_name)\n await expect(section_navigation).toBeVisible()\n }\n\n get backSettingsButton() {\n return this.root.getByRole('button', { name: 'Go back' });\n }\n\n async clickBackSettingsButton() {\n await this.backSettingsButton.waitFor({ state: 'visible' });\n await this.backSettingsButton.click();\n }\n\n // --- Dropdowns ---\n\n getPearPassFunctionDropdown(pearpass_dropdown_id) {\n return this.root.getByTestId(`settings-${pearpass_dropdown_id}`)\n }\n\n async clickPearPassFunctionDropdown(dropdown_id) {\n const function_dropdown = this.getPearPassFunctionDropdown(dropdown_id)\n await expect(function_dropdown).toBeVisible()\n await function_dropdown.click()\n }\n\n getPearPassFunctionDropdownOption(dropdown_option) {\n return this.root.getByTestId(`settings-auto-lock-option-${dropdown_option}`)\n }\n\n async verifyPearPassFunctionDropdownOptionIsVisible(dropdown_id) {\n const function_dropdown =\n this.getPearPassFunctionDropdownOption(dropdown_id)\n await expect(function_dropdown).toBeVisible()\n }\n}\n\nmodule.exports = { SettingsPage }\n" }, { "path": "e2e/components/SideMenuPage.js", "content": "import { test, expect } from '../fixtures/app.runner.js'\n\nclass SideMenuPage {\n constructor(root) {\n this.root = root\n }\n\n // --- Exit / lock ---\n\n get sidebarExitButton() {\n return this.root.getByTestId('sidebar-lock-app')\n }\n\n async clickSidebarExitButton() {\n await expect(this.sidebarExitButton).toBeVisible()\n await this.sidebarExitButton.click()\n }\n\n // --- Settings ---\n\n get sidebarSettingsButton() {\n return this.root.getByTestId('sidebar-settings-button')\n }\n\n async clickSidebarSettingsButton() {\n await expect(this.sidebarSettingsButton).toBeVisible()\n await this.sidebarSettingsButton.click()\n }\n\n // --- Categories ---\n\n getSidebarCategory(categoryname) {\n return this.root.getByTestId(`sidebar-category-${categoryname}`)\n }\n\n async selectSideBarCategory(name) {\n const category = this.getSidebarCategory(name)\n await expect(category).toBeVisible()\n await expect(category).toBeEnabled()\n await category.click()\n }\n\n // --- Favorites folder ---\n\n get favoritesFolder() {\n return this.root.getByTestId('sidebar-folder-favorites').locator('span').last()\n }\n\n async verifySideBarFavoritesFolder(items) {\n await expect(this.favoritesFolder).toBeVisible()\n await expect(this.favoritesFolder).toHaveAttribute('aria-label', items)\n }\n\n // --- Folders ---\n\n getSideMenuFolder(folderName) {\n return this.root.getByRole('button', { name: folderName })\n .and(this.root.locator('[data-testid^=\"sidebar-\"]'))\n }\n\n get sidebarAddButton() {\n return this.root.getByTestId('sidebar-folder-add')\n }\n\n get confirmButton() {\n return this.root.getByTestId('button-primary')\n }\n\n get deleteFolderButton() {\n return this.root.getByTestId('deletefolder-submit-v2')\n }\n\n async clickSidebarAddButton() {\n await expect(this.sidebarAddButton).toBeVisible()\n await this.sidebarAddButton.click()\n }\n\n async createFolder(name) {\n await this.clickSidebarAddButton()\n const nameInput = this.root.getByTestId('createfolder-name-v2').locator('input')\n await expect(nameInput).toBeVisible()\n await nameInput.fill(name)\n const saveBtn = this.root.getByTestId('createfolder-save-v2')\n await expect(saveBtn).toBeVisible()\n await saveBtn.click()\n await expect(saveBtn).toBeHidden()\n }\n\n async openSideBarFolder(foldername) {\n await expect(this.getSideMenuFolder(foldername)).toBeVisible()\n await this.getSideMenuFolder(foldername).click()\n }\n\n async deleteMultipleItemsFolder(foldername) {\n const folder = this.getSideMenuFolder(foldername)\n await expect(folder).toBeVisible()\n await folder.click({ button: 'right' })\n const deleteButton = this.root.getByText('Delete Folder', { exact: true })\n await expect(deleteButton).toBeVisible()\n await deleteButton.click()\n }\n\n async deleteFolder(foldername) {\n const folder = this.getSideMenuFolder(foldername)\n await expect(folder).toBeVisible()\n await folder.click({ button: 'right' })\n const deleteButton = this.root.getByText('Delete Folder', { exact: true })\n await expect(deleteButton).toBeVisible()\n await deleteButton.click()\n await expect(deleteButton).toBeHidden()\n }\n\n async clickDeleteFolderButton() {\n await expect(this.deleteFolderButton).toBeVisible()\n await this.deleteFolderButton.click()\n }\n\n async verifySidebarFolderName(foldername) {\n const folder = this.getSideMenuFolder(foldername)\n await expect(folder).toBeVisible()\n }\n}\n\nmodule.exports = { SideMenuPage }\n" }, { "path": "e2e/components/Utilities.js", "content": "import { test, expect } from '../fixtures/app.runner.js'\n\nclass Utilities {\n constructor(root) {\n this.root = root\n }\n\n // --- Bulk delete ---\n\n async deleteAllElements() {\n const emptyState = this.root.getByTestId('empty-collection-v2')\n\n while (true) {\n const emptyVisible = await emptyState.isVisible().catch(() => false)\n if (emptyVisible) break\n\n const firstRow = this.root.locator('[data-record-id]').first()\n const rowVisible = await firstRow\n .isVisible({ timeout: 3000 })\n .catch(() => false)\n if (!rowVisible) break\n\n const recordId = await firstRow.getAttribute('data-record-id')\n if (!recordId) break\n\n await firstRow.click({ button: 'right' })\n\n const deleteButton = this.root.getByTestId(\n `record-row-menu-delete-${recordId}`\n )\n await expect(deleteButton).toBeVisible({ timeout: 5000 })\n await deleteButton.click()\n\n const confirmButton = this.root.getByTestId('delete-records-submit-v2')\n await expect(confirmButton).toBeVisible({ timeout: 5000 })\n await confirmButton.click()\n\n await confirmButton\n .waitFor({ state: 'hidden', timeout: 5000 })\n .catch(() => { })\n }\n }\n\n // --- Clipboard ---\n\n async pasteFromClipboard(locator, text) {\n await this.root.page().evaluate(async (t) => {\n await navigator.clipboard.writeText(t)\n }, text)\n\n await locator.click()\n const modifier = process.platform === 'darwin' ? 'Meta' : 'Control'\n await this.root.page().keyboard.press(`${modifier}+v`)\n }\n}\n\nmodule.exports = { Utilities }\n" }, { "path": "e2e/components/index.js", "content": "export { LoginPage } from './LoginPage.js'\nexport { CreateOrEditPage } from './CreateOrEditPage.js'\nexport { DetailsPage } from './DetailsPage.js'\nexport { MainPage } from './MainPage.js'\nexport { SideMenuPage } from './SideMenuPage.js'\nexport { Utilities } from './Utilities.js'\nexport { SettingsPage } from './SettingsPage.js'\n" }, { "path": "e2e/fixtures/app.runner.js", "content": "import { spawn } from 'node:child_process'\nimport { createRequire } from 'node:module'\nimport os from 'node:os'\nimport path from 'node:path'\n\nimport { test as base, expect, chromium } from '@playwright/test'\n\nconst isWindows = os.platform() === 'win32'\n\n/** Real Electron binary path (avoids Windows spawn EINVAL from .cmd without shell). */\nfunction resolveElectronBinary(appDir) {\n const require = createRequire(path.join(appDir, 'package.json'))\n return require('electron')\n}\n\nfunction sleep(ms) {\n return new Promise((resolve) => setTimeout(resolve, ms))\n}\n\nasync function connectWithRetries(wsEndpoint, maxRetries) {\n // Windows needs more retries with shorter delays\n // Mac works better with exponential backoff\n const retries = maxRetries ?? (isWindows ? 15 : 10)\n\n for (let attempt = 0; attempt <= retries; attempt++) {\n try {\n // Sleep AFTER first attempt fails, not before\n if (attempt > 0) {\n const delay = isWindows ? 1000 : 2 ** attempt * 1000\n await sleep(delay)\n }\n\n console.log(\n `[CDP] Attempting connection to ${wsEndpoint} (attempt ${attempt + 1}/${retries + 1})`\n )\n return await chromium.connectOverCDP(wsEndpoint)\n } catch (err) {\n console.log(`[CDP] Connection failed: ${err.message}`)\n if (attempt === retries) throw err\n }\n }\n}\n\nasync function waitForPage(browser, maxRetries = 60) {\n for (let attempt = 0; attempt <= maxRetries; attempt++) {\n const contexts = browser.contexts()\n for (const context of contexts) {\n const pages = context.pages()\n // Debug: log all page URLs\n if (attempt % 5 === 0) {\n console.log(\n `[Attempt ${attempt}] Available pages:`,\n pages.map((p) => p.url())\n )\n }\n\n // Electron loads index.html via file:// on all platforms\n const page = pages.find((p) => p.url().includes('index.html'))\n\n if (page) {\n console.log('[Found] App page:', page.url())\n return page\n }\n }\n await sleep(1000)\n }\n\n // Last resort: return any page that's not blank\n const contexts = browser.contexts()\n for (const context of contexts) {\n const page = context.pages().find((p) => !p.url().startsWith('about:'))\n if (page) {\n console.log('[Fallback] Using page:', page.url())\n return page\n }\n }\n\n return null\n}\n\nasync function launchApp(appDir) {\n const port = Math.floor(Math.random() * (65535 - 10000 + 1)) + 10000\n\n console.log(\n `[Launch] Starting app on port ${port}, platform: ${os.platform()}`\n )\n\n const electronBin = resolveElectronBinary(appDir)\n\n // ELECTRON_RUN_AS_NODE=1 makes Electron behave as plain Node.js, which\n // prevents require('electron') from returning the built-in API (app, BrowserWindow, etc.)\n const env = { ...process.env }\n delete env.ELECTRON_RUN_AS_NODE\n\n let proc\n if (isWindows) {\n proc = spawn(\n electronBin,\n ['.', `--remote-debugging-port=${port}`, '--no-sandbox'],\n {\n cwd: appDir,\n stdio: 'inherit',\n windowsHide: false,\n env\n }\n )\n } else {\n // Mac/Linux: use detached process so we can kill the process group on teardown\n proc = spawn(\n electronBin,\n ['.', `--remote-debugging-port=${port}`, '--no-sandbox'],\n {\n cwd: appDir,\n stdio: 'inherit',\n detached: true,\n env\n }\n )\n proc.unref()\n }\n\n // Give the app time to start before trying to connect\n // Electron needs time for startRuntime() (P2P + worklet) before the window is created\n const initialDelay = isWindows ? 5000 : 5000\n console.log(`[Launch] Waiting ${initialDelay}ms for app to initialize...`)\n await sleep(initialDelay)\n\n const browser = await connectWithRetries(`http://localhost:${port}`)\n\n // Listen for new pages on all contexts\n for (const context of browser.contexts()) {\n context.on('page', (p) => console.log('[Event] New page created:', p.url()))\n }\n\n const page = await waitForPage(browser)\n\n if (!page) {\n // Final debug output\n const allPages = browser\n .contexts()\n .flatMap((c) => c.pages().map((p) => p.url()))\n console.error('[Debug] All available page URLs:', allPages)\n throw new Error('Could not find app page')\n }\n\n // Wait for page to be fully loaded on all platforms\n console.log('[Launch] Waiting for page to be ready...')\n await page.waitForLoadState('domcontentloaded')\n\n // Windows needs additional settling time\n if (isWindows) {\n await sleep(2000)\n }\n\n const app = { proc, browser, page, isWindows }\n\n /**\n * Returns the current app page. If the page was closed (e.g. app restarted),\n * tries to find the new page from the browser. Use this in beforeEach to\n * avoid \"Target page, context or browser has been closed\" errors.\n */\n app.getPage = async function getPage() {\n if (this.page && !this.page.isClosed()) {\n return this.page\n }\n const newPage = await waitForPage(this.browser, 10)\n if (newPage) {\n this.page = newPage\n await this.page.waitForLoadState('domcontentloaded')\n if (isWindows) await sleep(500)\n return this.page\n }\n throw new Error('App page was closed and no new page could be found')\n }\n\n return app\n}\n\nimport { spawnSync } from 'node:child_process'\n\nexport async function teardown({ proc, browser, isWindows }) {\n try {\n if (proc?.pid) {\n console.log(`[Teardown] Killing Electron process PID=${proc.pid} ...`)\n if (isWindows) {\n // Windows: koristi taskkill\n spawnSync('taskkill', ['/PID', String(proc.pid), '/T', '/F'], {\n stdio: 'inherit'\n })\n } else {\n // Mac/Linux: ubij proces grupu (-pid)\n process.kill(-proc.pid, 'SIGKILL')\n }\n }\n } catch (e) {\n console.warn(\n 'Electron process already terminated or could not be killed',\n e.message\n )\n }\n\n // Mali delay da OS oslobodi port i prozore\n await new Promise((r) => setTimeout(r, 500))\n\n // Close CDP browser connection\n try {\n if (browser) {\n console.log('[Teardown] Closing CDP browser connection...')\n await browser.close()\n }\n } catch (e) {\n console.warn('Browser already closed', e.message)\n }\n}\n\nexports.test = base.extend({\n app: [\n async ({}, use) => {\n const appDir = path.resolve(__dirname, '..', '..')\n const app = await launchApp(appDir)\n await use(app)\n await teardown(app)\n },\n { scope: 'worker' }\n ]\n})\n\nexports.expect = expect\n" }, { "path": "e2e/fixtures/test-data.js", "content": "'use strict'\n\n/**\n * Centralized test data for reuse across test suites\n */\nmodule.exports = {\n // User credentials\n credentials: {\n validPassword: 'Test123!',\n invalidPassword: 'WrongPassword123!'\n },\n\n // Vault data\n vault: {\n name: 'Test'\n },\n\n // Timeouts\n timeouts: {\n navigation: 3000,\n action: 3000\n },\n\n // PassPhrase\n passphrase: {\n text12:\n 'word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 word11 word12',\n text24:\n 'word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 word11 word12 word13 word14 word15 word16 word17 word18 word19 word20 word21 word22 word23 word24'\n }\n}\n" }, { "path": "e2e/package.json", "content": "{\n \"name\": \"pearpass-e2e\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"test\": \"npx playwright test\",\n \"test:headed\": \"npx playwright test --headed\",\n \"test:debug\": \"npx playwright test --debug\",\n \"report\": \"npx playwright show-report test-artifacts/report\"\n },\n \"dependencies\": {\n \"@playwright/test\": \"^1.52.0\",\n \"dotenv\": \"^17.3.1\"\n },\n \"devDependencies\": {\n \"clipboardy\": \"^5.1.0\",\n \"playwright-qase-reporter\": \"^2.2.2\"\n }\n}\n" }, { "path": "e2e/playwright.config.js", "content": "import { defineConfig } from '@playwright/test'\nimport dotenv from 'dotenv'\n\ndotenv.config()\n\nexport default defineConfig({\n timeout: 5 * 60 * 1000,\n testDir: './specs',\n\n workers: 1,\n forbidOnly: !!process.env.CI,\n maxFailures: process.env.CI ? 5 : undefined,\n fullyParallel: false,\n\n retries: 0,\n\n use: {\n screenshot: 'only-on-failure',\n trace: 'on-first-retry',\n actionTimeout: 30000,\n navigationTimeout: 60000\n },\n\n reporter: [\n ['list'],\n ['html', { outputFolder: 'test-artifacts/report', open: 'never' }],\n [\n 'playwright-qase-reporter',\n {\n mode: 'testops',\n debug: false,\n testops: {\n api: {\n token: process.env.API_TOKEN\n },\n project: 'PAS',\n uploadAttachments: true,\n run: {\n title: 'Automated Playwright Run',\n description: 'Nightly regression tests',\n complete: true\n },\n batch: {\n size: 100\n }\n },\n framework: {\n browser: {\n addAsParameter: true,\n parameterName: 'Browser'\n },\n markAsFlaky: true\n }\n }\n ]\n ],\n\n outputDir: 'test-artifacts/results'\n})\n" }, { "path": "e2e/scripts/explore.js", "content": "'use strict'\nconst { chromium } = require('@playwright/test')\n\nasync function explore() {\n const browser = await chromium.connectOverCDP('http://localhost:9222')\n const page = browser\n .contexts()[0]\n .pages()\n .find((p) => p.url().includes('index.html'))\n\n console.log('Connected to:', page.url())\n await page.waitForTimeout(2000)\n\n console.log('\\n=== VISIBLE TEXT ===')\n console.log(await page.locator('body').innerText())\n\n console.log('\\n=== BUTTONS ===')\n const buttons = await page.locator('button').all()\n for (const btn of buttons) {\n if (await btn.isVisible()) {\n console.log('-', await btn.textContent())\n }\n }\n\n console.log('\\n=== INPUTS ===')\n const inputs = await page.locator('input').all()\n for (const input of inputs) {\n if (await input.isVisible()) {\n const type = await input.getAttribute('type')\n const placeholder = await input.getAttribute('placeholder')\n console.log(`- type=\"${type}\" placeholder=\"${placeholder}\"`)\n }\n }\n}\n\nexplore().catch(console.error)\n" }, { "path": "e2e/specs/01-Login/creatingLoginItem.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Creating Login Item', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n\n loginPage = new LoginPage(root)\n sideMenuPage = new SideMenuPage(root)\n utilities = new Utilities(root)\n mainPage = new MainPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('login')\n await utilities.deleteAllElements()\n try {\n await sideMenuPage.deleteFolder('Test Folder')\n } catch (e) {\n // folder may not exist from a previous run\n }\n await mainPage.clickAddItem('login')\n\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async () => {\n await utilities.deleteAllElements()\n try {\n await sideMenuPage.deleteFolder('Test Folder')\n } catch (e) {\n }\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Creating the \"Login\" item', async () => {\n qase.id(1928)\n await createOrEditPage.fillCreateOrEditInput('title', 'Login Title')\n await createOrEditPage.fillCreateOrEditInput('username', 'Test User')\n await createOrEditPage.fillCreateOrEditInput('password', 'Test Pass')\n await createOrEditPage.fillCreateOrEditInput('website', 'https://www.website.co')\n await createOrEditPage.fillCreateOrEditInput('comment', 'Test Note')\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test('Viewing created item. Verify item details', async () => {\n qase.id(1929)\n await mainPage.verifyElementTitle('Login Title')\n await mainPage.openElementDetails()\n await detailsPage.verifyItemDetailsValue('Email or username', 'Test User')\n await detailsPage.verifyItemDetailsValue('Password', 'Test Pass')\n await detailsPage.verifyItemDetailsValue('https://', 'https://www.website.co')\n await detailsPage.verifyCustomNoteText('Test Note')\n })\n\n test('Password visibility icon displays/hides value', async () => {\n qase.id(1930)\n await mainPage.verifyElementTitle('Login Title')\n await mainPage.openElementDetails()\n await detailsPage.verifyPasswordFieldType('credentials-multi-slot-input-slot-1', 'password')\n await detailsPage.clickPasswordToggle('credentials-multi-slot-input-slot-1')\n await detailsPage.verifyPasswordFieldType('credentials-multi-slot-input-slot-1', 'text')\n })\n\n test('Dropdown moves to selected item edit screen', async () => {\n qase.id(1931)\n await mainPage.verifyElementTitle('Login Title')\n await sideMenuPage.clickSidebarAddButton()\n await detailsPage.fillCreateNewFolderTitleInput('Test Folder')\n await detailsPage.clickCreateFolderButton()\n await detailsPage.editElement()\n await createOrEditPage.openDropdownMenu()\n await createOrEditPage.selectFromDropdownMenu('Test Folder')\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await expect(detailsPage.getItemDetailsFolderName('Test Folder')).toBeVisible()\n await mainPage.verifyElementFolderName('Test Folder')\n })\n\n test('Item moved to folder (and cleanup)', async ({ page }) => {\n qase.id(1932)\n await sideMenuPage.verifySidebarFolderName('Test Folder')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.openDropdownMenu()\n await createOrEditPage.selectFromDropdownMenu('Test Folder')\n await createOrEditPage.clickOnCreateOrEditButton('save')\n\n await sideMenuPage.deleteFolder('Test Folder')\n })\n\n test('Add via Favorite icon', async ({ page }) => {\n qase.id(1933)\n await sideMenuPage.selectSideBarCategory('all')\n await mainPage.clickMainViewHeaderSelect()\n await mainPage.elementCheckBox(false)\n await mainPage.clickOnFirstElement()\n await mainPage.elementCheckBox(true)\n await mainPage.clickOnMainViewFavoriteIcon()\n await sideMenuPage.verifySideBarFavoritesFolder('1 items')\n })\n\n test('Remove via Favorite icon', async ({ page }) => {\n qase.id(1934)\n await mainPage.clickMainViewHeaderSelect()\n await mainPage.clickOnFirstElement()\n await mainPage.clickOnMainViewFavoriteIcon()\n await sideMenuPage.verifySideBarFavoritesFolder('0 items')\n })\n\n test('Add via More options', async ({ page }) => {\n qase.id(1935)\n await mainPage.openElementDetails()\n await detailsPage.openItemBarThreeDotsDropdownMenu()\n await detailsPage.clickMarkAsFavoriteButton()\n await sideMenuPage.verifySideBarFavoritesFolder('1 items')\n })\n\n test('Remove via More options', async ({ page }) => {\n qase.id(1936)\n await detailsPage.openItemBarThreeDotsDropdownMenu()\n await detailsPage.clickRemoveFromFavoritesButton()\n await sideMenuPage.verifySideBarFavoritesFolder('0 items')\n })\n\n // test('Add Custom Note', async ({ page }) => {\n // qase.id(1937)\n // await mainPage.verifyElementTitle('Login Title')\n // await mainPage.openElementDetails()\n // await detailsPage.editElement()\n // await createOrEditPage.clickCreateCustomItem()\n // await createOrEditPage.clickCustomItemOptionNote()\n // await expect(createOrEditPage.customNoteInput).toHaveCount(1)\n // await createOrEditPage.fillCustomNoteInput()\n // await createOrEditPage.clickOnCreateOrEditButton('save')\n // await page.waitForTimeout(testData.timeouts.action)\n // await mainPage.clickDetailsCloseButton()\n // })\n\n // test('Delete Note field', async ({ page }) => {\n // qase.id(1938)\n // await mainPage.verifyElementTitle('Login Title')\n // await mainPage.openElementDetails()\n // await detailsPage.editElement()\n // await expect(createOrEditPage.customNoteInput_first).toHaveCount(2)\n // await createOrEditPage.deleteCustomNote()\n // await expect(createOrEditPage.customNoteInput_first).toHaveCount(1)\n // await createOrEditPage.clickOnCreateOrEditButton('save')\n // await page.waitForTimeout(testData.timeouts.action)\n // await mainPage.clickDetailsCloseButton()\n // })\n\n test('Close via Cross icon', async ({ page }) => {\n qase.id(1939)\n await mainPage.verifyElementTitle('Login Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await detailsPage.clickElementItemCloseButton()\n await mainPage.verifyElementTitle('Login Title')\n })\n\n test('View uploaded file in Edit mode', async ({ page }) => {\n qase.id(1940)\n await detailsPage.editElement()\n await createOrEditPage.clickOnAttachment()\n await createOrEditPage.uploadFile()\n await createOrEditPage.verifyUploadedFileIsVisible()\n await createOrEditPage.clickOnUploadedFile()\n\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await detailsPage.verifyUploadedFileIsVisible()\n\n await detailsPage.clickOnUploadedFile()\n await detailsPage.verifyUploadedImageIsVisible()\n\n await createOrEditPage.clickElementItemCloseButton()\n })\n\n test('Empty fields not displayed in view mode', async ({ page }) => {\n qase.id(1942)\n await mainPage.verifyElementTitle('Login Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput('username', '')\n await createOrEditPage.fillCreateOrEditInput('password', '')\n await createOrEditPage.fillCreateOrEditInput('website', '')\n await createOrEditPage.fillCreateOrEditInput('comment', '')\n await createOrEditPage.clickOnDeleteAttachmentButton()\n\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await mainPage.openElementDetails()\n\n await detailsPage.verifyDetailsNoItems()\n\n await test.step('CLOSE DETAILS', async () => {\n await mainPage.clickDetailsCloseButton()\n })\n })\n})\n" }, { "path": "e2e/specs/01-Login/creatingLoginItemPassword.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Password', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('login')\n await utilities.deleteAllElements()\n await mainPage.clickAddItem('login')\n\n await createOrEditPage.fillCreateOrEditInput('title', 'Login Title')\n await createOrEditPage.fillCreateOrEditInput('username', 'Test User')\n await createOrEditPage.fillCreateOrEditInput('password', 'Test Pass')\n await createOrEditPage.fillCreateOrEditInput('website', 'https://www.website.co')\n await createOrEditPage.fillCreateOrEditInput('comment', 'Test Note')\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test.beforeEach(async () => {\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async () => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Verify that the password was changed to a generic password, with \"Safe\" strength as the default option.', async () => {\n qase.id(2000)\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.openPasswordMenu()\n await createOrEditPage.clickInsertPasswordButton()\n await createOrEditPage.clickShowHidePasswordButtonLast()\n await createOrEditPage.verifyPasswordToNotHaveValue('Test Pass')\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await page.waitForTimeout(testData.timeouts.action)\n await mainPage.clickDetailsCloseButton()\n })\n\n test('Verify that password strength updates when the \"special characters\" switch is toggled', async () => {\n qase.id(2001)\n const root = page.locator('body')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.openPasswordMenu()\n\n await expect(root.getByRole('radio', { name: /Random Characters/i })).toBeChecked()\n await expect(root.getByText('8 chars')).toBeVisible()\n await expect(root.getByText('Special character')).toBeVisible()\n const toggle = root.locator('[role=\"switch\"]')\n await expect(toggle).toHaveAttribute('aria-checked', 'true')\n await expect(root.getByText('Strong')).toBeVisible()\n\n await toggle.click()\n await expect(toggle).toHaveAttribute('aria-checked', 'false')\n await expect(root.getByText('Strong')).not.toBeVisible()\n\n await toggle.click()\n await expect(toggle).toHaveAttribute('aria-checked', 'true')\n await expect(root.getByText('Strong')).toBeVisible()\n\n await root.getByTestId('generatepassword-button-discard-v2').click()\n await createOrEditPage.clickOnCreateOrEditButton('discard')\n await mainPage.clickDetailsCloseButton()\n })\n})\n" }, { "path": "e2e/specs/01-Login/editingDeletingLoginItem.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Editing/Deleting Login Item', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('login')\n await utilities.deleteAllElements()\n await mainPage.clickAddItem('login')\n\n await createOrEditPage.fillCreateOrEditInput('title', 'Login Title')\n await createOrEditPage.fillCreateOrEditInput('username', 'Test User')\n await createOrEditPage.fillCreateOrEditInput('password', 'Test Pass')\n await createOrEditPage.fillCreateOrEditInput('website', 'https://www.website.co')\n await createOrEditPage.fillCreateOrEditInput('comment', 'Test Note')\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async () => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Verify that edited \"Login\" item fields are saved correctly', async () => {\n qase.id(2034)\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput('title', 'Login Title EDITED')\n await createOrEditPage.fillCreateOrEditInput('username', 'Test User EDITED')\n await createOrEditPage.fillCreateOrEditInput('password', 'Test Pass EDITED')\n await createOrEditPage.fillCreateOrEditInput('website', 'https://www.website1.co')\n await createOrEditPage.fillCreateOrEditInput('comment', 'Test Note EDITED')\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await mainPage.verifyElementTitle('Login Title EDITED')\n await mainPage.openElementDetails()\n await detailsPage.verifyItemDetailsValue('Email or username', 'Test User EDITED')\n await detailsPage.verifyItemDetailsValue('Password', 'Test Pass EDITED')\n await detailsPage.verifyItemDetailsValue('https://', 'https://www.website1.co')\n await detailsPage.verifyCustomNoteText('Test Note EDITED')\n })\n\n test('Verify that deleted \"Website\" and custom \"Note\" fields are not saved in the edited \"Login\" item', async () => {\n qase.id(2035)\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput('website', '')\n await createOrEditPage.fillCreateOrEditInput('comment', '')\n\n await createOrEditPage.clickOnCreateOrEditButton('save')\n\n await detailsPage.verifyItemDetailsValue('Email or username', 'Test User EDITED')\n await detailsPage.verifyItemDetailsValue('Password', 'Test Pass EDITED')\n\n await createOrEditPage.verifyDetailsWebsiteCount(0)\n await createOrEditPage.verifyDetailsCommentCount(0)\n })\n\n test('Empty fields are not displayed in view mode', async () => {\n qase.id(2036)\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput('username', '')\n await createOrEditPage.fillCreateOrEditInput('password', '')\n\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await mainPage.openElementDetails()\n\n await detailsPage.verifyDetailsNoItems()\n })\n\n test('Verify that the \"Login\" item is removed after deletion', async () => {\n qase.id(2037)\n await utilities.deleteAllElements()\n await mainPage.verifyElementIsNotVisible()\n })\n\n test('Verify that the empty collection view is displayed on the Home screen after deleting the last item', async () => {\n qase.id(2037)\n await sideMenuPage.selectSideBarCategory('all')\n await expect(mainPage.emptyCollectionView).toBeVisible()\n })\n})\n" }, { "path": "e2e/specs/02-CreditCard/creatingCreditCardItem.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Creating Credit Card Item', async () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n mainPage = new MainPage(root)\n detailsPage = new DetailsPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('all')\n await utilities.deleteAllElements()\n await sideMenuPage.selectSideBarCategory('creditCard')\n await mainPage.clickAddItem('creditCard')\n\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async ({ app }) => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Creating the \"Credit Card\" item', async ({ page }) => {\n qase.id(2115)\n await createOrEditPage.fillCreateOrEditInput('creditcard-title', 'Credit Card Title')\n await createOrEditPage.fillCreateOrEditInput('creditcard-name', 'John')\n await createOrEditPage.fillCreateOrEditInput('creditcard-number', '1231 2312')\n await createOrEditPage.fillCreateOrEditInput('creditcard-expiredate', '12 12')\n await createOrEditPage.fillCreateOrEditInput('creditcard-securitycode', '111')\n await createOrEditPage.fillCreateOrEditInput('creditcard-pincode', '5555')\n await createOrEditPage.fillCreateOrEditInput('creditcard-comment', 'Credit Card Note')\n await createOrEditPage.clickOnCreateOrEditButton('creditcard-save')\n })\n\n test('Viewing created item. Verify item details', async ({ page }) => {\n qase.id(2116)\n await mainPage.verifyElementTitle('Credit Card Title')\n await mainPage.openElementDetails()\n\n await detailsPage.verifyItemDetailsValue('Name on card', 'John')\n await detailsPage.verifyItemDetailsValue('Number on card', '1231 2312')\n await detailsPage.verifyItemDetailsValue('Date of expire', '12 12')\n await detailsPage.verifyItemDetailsValue('Security code', '111')\n await detailsPage.verifyItemDetailsValue('Pin code', '5555')\n await detailsPage.verifyItemDetailsValue('Comment', 'Credit Card Note')\n })\n\n test('Password visibility icon displays/hides value', async ({ page }) => {\n qase.id(2117)\n await mainPage.verifyElementTitle('Credit Card Title')\n await mainPage.openElementDetails()\n await detailsPage.verifyPasswordFieldType('card-details-multi-slot-input-slot-3', 'password')\n await detailsPage.clickPasswordToggle('card-details-multi-slot-input-slot-3')\n await detailsPage.verifyPasswordFieldType('card-details-multi-slot-input-slot-3', 'text')\n })\n\n test('Add via Favorite icon', async ({ page }) => {\n qase.id(2120)\n await sideMenuPage.selectSideBarCategory('all')\n await mainPage.clickMainViewHeaderSelect()\n await mainPage.elementCheckBox(false)\n await mainPage.clickOnFirstElement()\n await mainPage.elementCheckBox(true)\n await mainPage.clickOnMainViewFavoriteIcon()\n await sideMenuPage.verifySideBarFavoritesFolder('1 items')\n })\n\n test('Remove via Favorite icon', async ({ page }) => {\n qase.id(2121)\n await mainPage.clickMainViewHeaderSelect()\n await mainPage.clickOnFirstElement()\n await mainPage.clickOnMainViewFavoriteIcon()\n await sideMenuPage.verifySideBarFavoritesFolder('0 items')\n })\n\n test('Add via More options', async ({ page }) => {\n qase.id(2122)\n await mainPage.openElementDetails()\n await detailsPage.openItemBarThreeDotsDropdownMenu()\n await detailsPage.clickMarkAsFavoriteButton()\n await sideMenuPage.verifySideBarFavoritesFolder('1 items')\n })\n\n test('Remove via More options', async ({ page }) => {\n qase.id(2123)\n await detailsPage.openItemBarThreeDotsDropdownMenu()\n await detailsPage.clickRemoveFromFavoritesButton()\n await sideMenuPage.verifySideBarFavoritesFolder('0 items')\n })\n\n // test('Add Custom Note', async ({ page }) => {\n // qase.id(2124)\n // await mainPage.verifyElementTitle('Credit Card Title')\n // await mainPage.openElementDetails()\n // await detailsPage.editElement()\n // await createOrEditPage.clickCreateCustomItem()\n // await createOrEditPage.clickCustomItemOptionNote()\n // await expect(createOrEditPage.customNoteInput).toHaveCount(1)\n // await createOrEditPage.fillCustomNoteInput()\n\n // await createOrEditPage.clickOnCreateOrEditButton('save')\n // await page.waitForTimeout(testData.timeouts.action)\n // await mainPage.clickDetailsCloseButton()\n // })\n\n // test('Delete Note field', async ({ page }) => {\n // qase.id(2125)\n // await mainPage.verifyElementTitle('Credit Card Title')\n // await mainPage.openElementDetails()\n // await detailsPage.editElement()\n // await expect(createOrEditPage.customNoteInput_first).toHaveCount(2)\n // await createOrEditPage.deleteCustomNote()\n // await expect(createOrEditPage.customNoteInput_first).toHaveCount(1)\n // await createOrEditPage.clickOnCreateOrEditButton('save')\n // await page.waitForTimeout(testData.timeouts.action)\n // await mainPage.clickDetailsCloseButton()\n // })\n\n test('Close via Cross icon', async ({ page }) => {\n qase.id(2126)\n await mainPage.verifyElementTitle('Credit Card Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await detailsPage.clickElementItemCloseButton()\n await mainPage.verifyElementTitle('Credit Card Title')\n })\n\n test('View uploaded file in Edit mode', async ({ page }) => {\n qase.id(2127)\n await detailsPage.editElement()\n await createOrEditPage.clickOnAttachment()\n await createOrEditPage.uploadFile()\n await createOrEditPage.verifyUploadedFileIsVisible()\n await createOrEditPage.clickOnUploadedFile()\n\n await createOrEditPage.clickOnCreateOrEditButton('creditcard-save')\n await page.waitForTimeout(testData.timeouts.action)\n\n\n await detailsPage.verifyUploadedFileIsVisible()\n\n await detailsPage.clickOnUploadedFile()\n await detailsPage.verifyUploadedImageIsVisible()\n\n await createOrEditPage.clickElementItemCloseButton()\n })\n\n test('Empty fields not displayed in view mode', async ({ page }) => {\n qase.id(2129)\n await mainPage.verifyElementTitle('Credit Card Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput('creditcard-name', '')\n await createOrEditPage.fillCreateOrEditInput('creditcard-number', '')\n await createOrEditPage.fillCreateOrEditInput('creditcard-expiredate', '')\n await createOrEditPage.fillCreateOrEditInput('creditcard-securitycode', '')\n await createOrEditPage.fillCreateOrEditInput('creditcard-pincode', '')\n await createOrEditPage.fillCreateOrEditInput('creditcard-comment', '')\n await createOrEditPage.clickOnDeleteAttachmentButton()\n\n await createOrEditPage.clickOnCreateOrEditButton('creditcard-save')\n await mainPage.openElementDetails()\n\n await detailsPage.verifyDetailsNoItems()\n\n await test.step('CLOSE DETAILS', async () => {\n await mainPage.clickDetailsCloseButton()\n })\n })\n})\n" }, { "path": "e2e/specs/02-CreditCard/editingDeleteCreditCardItem.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Editing/Deleting Credit Card Item', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('all')\n await utilities.deleteAllElements()\n await sideMenuPage.selectSideBarCategory('creditCard')\n await mainPage.clickAddItem('creditCard')\n\n await createOrEditPage.fillCreateOrEditInput('creditcard-title', 'Credit Card Title')\n await createOrEditPage.fillCreateOrEditInput('creditcard-name', 'John')\n await createOrEditPage.fillCreateOrEditInput('creditcard-number', '12312312')\n await createOrEditPage.fillCreateOrEditInput('creditcard-expiredate', '1212')\n await createOrEditPage.fillCreateOrEditInput('creditcard-securitycode', '111')\n await createOrEditPage.fillCreateOrEditInput('creditcard-pincode', '111')\n await createOrEditPage.fillCreateOrEditInput('creditcard-comment', 'Credit Card Note')\n await createOrEditPage.clickOnCreateOrEditButton('creditcard-save')\n await page.waitForTimeout(testData.timeouts.action)\n await mainPage.verifyElementTitle('Credit Card Title')\n\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async ({ app }) => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Verify that edited \"Credit Card\" item fields are saved correctly', async () => {\n qase.id(2130)\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput('creditcard-name', 'John EDITED')\n await createOrEditPage.fillCreateOrEditInput('creditcard-number', '99999999')\n await createOrEditPage.fillCreateOrEditInput('creditcard-expiredate', '0101')\n await createOrEditPage.fillCreateOrEditInput('creditcard-securitycode', '222')\n await createOrEditPage.fillCreateOrEditInput('creditcard-pincode', '222')\n await createOrEditPage.fillCreateOrEditInput('creditcard-comment', 'Credit Card Note EDITED')\n await createOrEditPage.clickOnCreateOrEditButton('creditcard-save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await mainPage.verifyElementTitle('Credit Card Title')\n await mainPage.openElementDetails()\n await detailsPage.verifyItemDetailsValue('Name on card', 'John EDITED')\n await detailsPage.verifyItemDetailsValue('Number on card', '9999 9999')\n await detailsPage.verifyCustomNoteText('Credit Card Note EDITED')\n })\n\n test('Empty fields are not displayed in view mode', async ({ page }) => {\n qase.id(2131)\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput('creditcard-name', '')\n await createOrEditPage.fillCreateOrEditInput('creditcard-number', '')\n await createOrEditPage.fillCreateOrEditInput('creditcard-expiredate', '')\n await createOrEditPage.fillCreateOrEditInput('creditcard-securitycode', '')\n await createOrEditPage.fillCreateOrEditInput('creditcard-pincode', '')\n await createOrEditPage.fillCreateOrEditInput('creditcard-comment', '')\n\n await createOrEditPage.clickOnCreateOrEditButton('creditcard-save')\n await mainPage.openElementDetails()\n\n await detailsPage.verifyDetailsNoItems()\n\n await test.step('CLOSE DETAILS', async () => {\n await mainPage.clickDetailsCloseButton()\n })\n })\n\n test('Verify that the \"Credit Card\" item is removed after deletion', async () => {\n qase.id(2133)\n await utilities.deleteAllElements()\n await mainPage.verifyElementIsNotVisible()\n })\n\n test('Verify that the empty collection view is displayed on the Home screen after deleting the last item', async () => {\n qase.id(2134)\n await sideMenuPage.selectSideBarCategory('all')\n await expect(mainPage.emptyCollectionView).toBeVisible()\n })\n})\n" }, { "path": "e2e/specs/03-WiFi/creatingWiFiItem.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Creating WiFi Item', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n mainPage = new MainPage(root)\n detailsPage = new DetailsPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('wifiPassword')\n await utilities.deleteAllElements()\n await mainPage.clickAddItem('wifiPassword')\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async ({ }) => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Creating the \"WiFi\" item', async ({ page }) => {\n qase.id(2135)\n await createOrEditPage.fillCreateOrEditInput('wifi-name', 'WiFi Title')\n await createOrEditPage.fillCreateOrEditInput('wifi-password', 'WiFi Pass')\n await createOrEditPage.fillCreateOrEditInput('wifi-comment', 'WiFi Note')\n await createOrEditPage.clickOnCreateOrEditButton('wifi-save')\n })\n\n test('Viewing created item. Verify item details', async ({ page }) => {\n qase.id(2136)\n await mainPage.openElementDetails()\n await detailsPage.verifyTitle('WiFi Title')\n await detailsPage.verifyItemDetailsValue('Wi-Fi Password', 'WiFi Pass')\n await detailsPage.verifyItemDetailsValue('Add comment', 'WiFi Note')\n })\n\n test('Password visibility icon displays/hides value', async ({ page }) => {\n qase.id(2137)\n await mainPage.openElementDetails()\n await mainPage.verifyElementTitle('WiFi Title')\n await createOrEditPage.verifyPasswordType('password')\n await createOrEditPage.clickShowHidePasswordButtonFirst()\n await createOrEditPage.verifyPasswordType('text')\n })\n\n test('Add via Favorite icon', async ({ page }) => {\n qase.id(2140)\n await sideMenuPage.selectSideBarCategory('all')\n await mainPage.clickMainViewHeaderSelect()\n await mainPage.elementCheckBox(false)\n await mainPage.clickOnFirstElement()\n await mainPage.elementCheckBox(true)\n await mainPage.clickOnMainViewFavoriteIcon()\n await sideMenuPage.verifySideBarFavoritesFolder('1 items')\n })\n\n test('Remove via Favorite icon', async ({ page }) => {\n qase.id(2141)\n await mainPage.clickMainViewHeaderSelect()\n await mainPage.clickOnFirstElement()\n await mainPage.clickOnMainViewFavoriteIcon()\n await sideMenuPage.verifySideBarFavoritesFolder('0 items')\n })\n\n test('Add via More options', async ({ page }) => {\n qase.id(2142)\n await mainPage.openElementDetails()\n await detailsPage.openItemBarThreeDotsDropdownMenu()\n await detailsPage.clickMarkAsFavoriteButton()\n await sideMenuPage.verifySideBarFavoritesFolder('1 items')\n })\n\n test('Remove via More options', async ({ page }) => {\n qase.id(2143)\n await detailsPage.openItemBarThreeDotsDropdownMenu()\n await detailsPage.clickRemoveFromFavoritesButton()\n await sideMenuPage.verifySideBarFavoritesFolder('0 items')\n })\n\n // test('Add Custom Note', async ({ page }) => {\n // qase.id(2144)\n // await mainPage.verifyElementTitle('WiFi Title')\n // await mainPage.openElementDetails()\n // await detailsPage.editElement()\n // await createOrEditPage.clickCreateCustomItem()\n // await createOrEditPage.clickCustomItemOptionNote()\n // await expect(createOrEditPage.customNoteInput).toHaveCount(1)\n // await createOrEditPage.fillCustomNoteInput()\n // await createOrEditPage.clickOnCreateOrEditButton('save')\n // await page.waitForTimeout(testData.timeouts.action)\n // await mainPage.clickDetailsCloseButton()\n // })\n\n // test('Delete Note field', async ({ page }) => {\n // qase.id(2145)\n // await mainPage.verifyElementTitle('WiFi Title')\n // await mainPage.openElementDetails()\n // await detailsPage.editElement()\n // await expect(createOrEditPage.customNoteInput_first).toHaveCount(2)\n // await createOrEditPage.deleteCustomNote()\n // await expect(createOrEditPage.customNoteInput_first).toHaveCount(1)\n // await createOrEditPage.clickOnCreateOrEditButton('save')\n // await page.waitForTimeout(testData.timeouts.action)\n // await mainPage.clickDetailsCloseButton()\n // })\n\n test('Close via Cross icon', async ({ page }) => {\n qase.id(2146)\n await mainPage.verifyElementTitle('WiFi Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await detailsPage.clickElementItemCloseButton()\n await mainPage.verifyElementTitle('WiFi Title')\n })\n\n test('Empty fields not displayed in view mode', async ({ page }) => {\n qase.id(2147)\n await mainPage.verifyElementTitle('WiFi Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput('wifi-comment', '')\n\n await createOrEditPage.clickOnCreateOrEditButton('wifi-save')\n await mainPage.openElementDetails()\n\n await detailsPage.verifyTitle('WiFi Title')\n\n await detailsPage.verifyItemDetailsValueIsNotVisible('Add comment')\n await mainPage.clickDetailsCloseButton()\n })\n})\n" }, { "path": "e2e/specs/03-WiFi/editingDeletingWiFiItem.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Editing/Deleting WiFi Item', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n mainPage = new MainPage(root)\n detailsPage = new DetailsPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('wifiPassword')\n await utilities.deleteAllElements()\n await mainPage.clickAddItem('wifiPassword')\n\n await createOrEditPage.fillCreateOrEditInput('wifi-name', 'WiFi Title')\n await createOrEditPage.fillCreateOrEditInput('wifi-password', 'WiFi Pass')\n await createOrEditPage.fillCreateOrEditInput('wifi-comment', 'WiFi Note')\n await createOrEditPage.clickOnCreateOrEditButton('wifi-save')\n\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async ({ }) => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Verify that edited \"WiFi\" item fields are saved correctly', async ({ page }) => {\n qase.id(2148)\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput('wifi-name', 'WiFi Title Edited')\n await createOrEditPage.fillCreateOrEditInput('wifi-comment', 'WiFi Note Edited')\n await createOrEditPage.clickOnCreateOrEditButton('wifi-save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await mainPage.verifyElementTitle('WiFi Title Edited')\n await mainPage.openElementDetails()\n await detailsPage.verifyItemDetailsValue('Add comment', 'WiFi Note Edited')\n })\n\n test('Empty fields are not displayed in view mode', async () => {\n qase.id(2150)\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput('wifi-comment', '')\n await createOrEditPage.clickOnCreateOrEditButton('wifi-save')\n await mainPage.openElementDetails()\n await detailsPage.verifyItemDetailsValueIsNotVisible('Add comment')\n await mainPage.clickDetailsCloseButton()\n })\n})\n" }, { "path": "e2e/specs/04-Identity/creatingIdentityItem.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Creating Identity Item', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n sideMenuPage = new SideMenuPage(root)\n utilities = new Utilities(root)\n mainPage = new MainPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('identity')\n await utilities.deleteAllElements()\n await mainPage.clickAddItem('identity')\n\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async () => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Creating the \"Identity\" item', async ({ page }) => {\n qase.id(2151)\n await createOrEditPage.fillCreateOrEditInput('identity-title', 'Identity Title')\n await createOrEditPage.fillCreateOrEditInput('identity-fullname', 'Identity Fullname')\n await createOrEditPage.fillCreateOrEditInput('identity-email', 'identitytest@mail.co')\n await createOrEditPage.fillCreateOrEditInput('identity-phone', '')\n await createOrEditPage.fillCreateOrEditInput('identity-address', 'Identity Address')\n await createOrEditPage.fillCreateOrEditInput('identity-zip', 'Identity Zip')\n await createOrEditPage.fillCreateOrEditInput('identity-city', 'Identity City')\n await createOrEditPage.fillCreateOrEditInput('identity-region', 'Identity Region')\n await createOrEditPage.fillCreateOrEditInput('identity-country', 'Identity Country')\n await createOrEditPage.fillCreateOrEditInput('identity-passportfullname', 'Identity Passport Fullname')\n await createOrEditPage.fillCreateOrEditInput('identity-passportnumber', 'Identity Passport Number')\n await createOrEditPage.fillCreateOrEditInput('identity-passportissuingcountry', 'Identity Issuing Country')\n await createOrEditPage.fillCreateOrEditInput('identity-passportdateofissue', 'Identity Date of Issue')\n await createOrEditPage.fillCreateOrEditInput('identity-passportexpirydate', '01/01/2020')\n await createOrEditPage.fillCreateOrEditInput('identity-passportnationality', '01/01/2025')\n await createOrEditPage.fillCreateOrEditInput('identity-passportdob', '01/01/1990')\n await createOrEditPage.fillCreateOrEditInput('identity-passportgender', 'Identity Gender')\n await createOrEditPage.fillCreateOrEditInput('identity-idcardnumber', 'Identity ID Card Number')\n await createOrEditPage.fillCreateOrEditInput('identity-idcarddateofissue', '01/01/2025')\n await createOrEditPage.fillCreateOrEditInput('identity-idcardexpirydate', '01/01/2030')\n await createOrEditPage.fillCreateOrEditInput('identity-idcardissuingcountry', 'USA')\n await createOrEditPage.fillCreateOrEditInput('identity-comment', 'Identity Driving License Note')\n await createOrEditPage.clickOnCreateOrEditButton('identity-save')\n\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test('Viewing created item. Verify item details', async ({ page }) => {\n qase.id(2152)\n await mainPage.openElementDetails()\n await detailsPage.verifyIdentityDetailsValue('fullname', 'Identity Fullname')\n await detailsPage.verifyIdentityDetailsValue('email', 'identitytest@mail.co')\n await detailsPage.verifyIdentityDetailsValue('address', 'Identity Address')\n await detailsPage.verifyIdentityDetailsValue('zip', 'Identity Zip')\n await detailsPage.verifyIdentityDetailsValue('city', 'Identity City')\n await detailsPage.verifyIdentityDetailsValue('region', 'Identity Region')\n await detailsPage.verifyIdentityDetailsValue('country', 'Identity Country')\n await detailsPage.verifyIdentityDetailsValue('passportfullname', 'Identity Passport Fullname')\n await detailsPage.verifyIdentityDetailsValue('passportnumber', 'Identity Passport Number')\n await detailsPage.verifyIdentityDetailsValue('passportissuingcountry', 'Identity Issuing Country')\n await detailsPage.verifyIdentityDetailsValue('passportdateofissue', 'Identity Date of Issue')\n await detailsPage.verifyIdentityDetailsValue('passportexpirydate', '01/01/2020')\n await detailsPage.verifyIdentityDetailsValue('passportnationality', '01/01/2025')\n await detailsPage.verifyIdentityDetailsValue('passportdob', '01/01/1990')\n await detailsPage.verifyIdentityDetailsValue('passportgender', 'Identity Gender')\n await detailsPage.verifyIdentityDetailsValue('idcardnumber', 'Identity ID Card Number')\n await detailsPage.verifyIdentityDetailsValue('idcarddateofissue', '01/01/2025')\n await detailsPage.verifyIdentityDetailsValue('idcardexpirydate', '01/01/2030')\n await detailsPage.verifyIdentityDetailsValue('idcardissuingcountry', 'USA')\n await detailsPage.verifyIdentityDetailsValue('note', 'Identity Driving License Note')\n })\n\n test('Add via Favorite icon', async ({ page }) => {\n qase.id(2156)\n await sideMenuPage.selectSideBarCategory('all')\n await mainPage.clickMainViewHeaderSelect()\n await mainPage.elementCheckBox(false)\n await mainPage.clickOnFirstElement()\n await mainPage.elementCheckBox(true)\n await mainPage.clickOnMainViewFavoriteIcon()\n await sideMenuPage.verifySideBarFavoritesFolder('1 items')\n })\n\n test('Remove via Favorite icon', async ({ page }) => {\n qase.id(2157)\n await mainPage.clickMainViewHeaderSelect()\n await mainPage.clickOnFirstElement()\n await mainPage.clickOnMainViewFavoriteIcon()\n await sideMenuPage.verifySideBarFavoritesFolder('0 items')\n })\n\n test('Add via More options', async ({ page }) => {\n qase.id(2158)\n await mainPage.openElementDetails()\n await detailsPage.openItemBarThreeDotsDropdownMenu()\n await detailsPage.clickMarkAsFavoriteButton()\n await sideMenuPage.verifySideBarFavoritesFolder('1 items')\n })\n\n test('Remove via More options', async ({ page }) => {\n qase.id(2159)\n await detailsPage.openItemBarThreeDotsDropdownMenu()\n await detailsPage.clickRemoveFromFavoritesButton()\n await sideMenuPage.verifySideBarFavoritesFolder('0 items')\n })\n\n // test('Add Custom Note', async ({ page }) => {\n // qase.id(2160)\n // await mainPage.verifyElementTitle('Identity Title')\n // await mainPage.openElementDetails()\n // await detailsPage.editElement()\n // await createOrEditPage.clickCreateCustomItem()\n // await createOrEditPage.clickCustomItemOptionNote()\n // await expect(createOrEditPage.customNoteInput).toHaveCount(1)\n // await createOrEditPage.fillCustomNoteInput()\n // await createOrEditPage.clickOnCreateOrEditButton('save')\n // await page.waitForTimeout(testData.timeouts.action)\n // await mainPage.clickDetailsCloseButton()\n // })\n\n // test('Delete Note field', async ({ page }) => {\n // qase.id(2161)\n // await mainPage.verifyElementTitle('Identity Title')\n // await mainPage.openElementDetails()\n // await detailsPage.editElement()\n // await expect(createOrEditPage.customNoteInput_first).toHaveCount(2)\n // await createOrEditPage.deleteCustomNote()\n // await expect(createOrEditPage.customNoteInput_first).toHaveCount(1)\n // await createOrEditPage.clickOnCreateOrEditButton('save')\n // await page.waitForTimeout(testData.timeouts.action)\n // await mainPage.clickDetailsCloseButton()\n // })\n\n test('Close via Cross icon', async ({ page }) => {\n qase.id(2162)\n await mainPage.verifyElementTitle('Identity Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await detailsPage.clickElementItemCloseButton()\n await mainPage.verifyElementTitle('Identity Title')\n })\n\n test('View uploaded file in Edit mode', async ({ page }) => {\n qase.id(2163)\n await detailsPage.editElement()\n await createOrEditPage.clickOnAttachment()\n await createOrEditPage.uploadFile()\n await createOrEditPage.verifyUploadedFileIsVisible()\n await createOrEditPage.clickOnUploadedFile()\n\n await createOrEditPage.clickOnCreateOrEditButton('identity-save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await detailsPage.verifyUploadedFileIsVisible()\n\n await detailsPage.clickOnUploadedFile()\n await detailsPage.verifyUploadedImageIsVisible()\n\n await createOrEditPage.clickElementItemCloseButton()\n })\n\n test('Empty fields not displayed in view mode', async ({ page }) => {\n qase.id(2165)\n await mainPage.verifyElementTitle('Identity Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n\n await createOrEditPage.fillCreateOrEditInput('identity-fullname', '')\n await createOrEditPage.fillCreateOrEditInput('identity-email', '')\n await createOrEditPage.fillCreateOrEditInput('identity-phone', '')\n await createOrEditPage.fillCreateOrEditInput('identity-address', '')\n await createOrEditPage.fillCreateOrEditInput('identity-zip', '')\n await createOrEditPage.fillCreateOrEditInput('identity-city', '')\n await createOrEditPage.fillCreateOrEditInput('identity-region', '')\n await createOrEditPage.fillCreateOrEditInput('identity-country', '')\n await createOrEditPage.fillCreateOrEditInput('identity-passportfullname', '')\n await createOrEditPage.fillCreateOrEditInput('identity-passportnumber', '')\n await createOrEditPage.fillCreateOrEditInput('identity-passportissuingcountry', '')\n await createOrEditPage.fillCreateOrEditInput('identity-passportdateofissue', '')\n await createOrEditPage.fillCreateOrEditInput('identity-passportexpirydate', '')\n await createOrEditPage.fillCreateOrEditInput('identity-passportnationality', '')\n await createOrEditPage.fillCreateOrEditInput('identity-passportdob', '')\n await createOrEditPage.fillCreateOrEditInput('identity-passportgender', '')\n await createOrEditPage.fillCreateOrEditInput('identity-idcardnumber', '')\n await createOrEditPage.fillCreateOrEditInput('identity-idcarddateofissue', '')\n await createOrEditPage.fillCreateOrEditInput('identity-idcardexpirydate', '')\n await createOrEditPage.fillCreateOrEditInput('identity-idcardissuingcountry', '')\n await createOrEditPage.fillCreateOrEditInput('identity-comment', '')\n await createOrEditPage.clickOnCreateOrEditButton('identity-save')\n\n await mainPage.openElementDetails()\n await detailsPage.verifyDetailsNoItems()\n\n await mainPage.clickDetailsCloseButton()\n })\n})\n" }, { "path": "e2e/specs/04-Identity/editingDeletingIdentityItem.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Editing/Deleting Identity Item', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('identity')\n await utilities.deleteAllElements()\n await mainPage.clickAddItem('identity')\n\n await createOrEditPage.fillCreateOrEditInput('identity-title', 'Identity Title')\n await createOrEditPage.fillCreateOrEditInput('identity-fullname', 'Identity Fullname')\n await createOrEditPage.fillCreateOrEditInput('identity-email', 'identitytest@mail.co')\n await createOrEditPage.fillCreateOrEditInput('identity-phone', '')\n await createOrEditPage.fillCreateOrEditInput('identity-address', 'Identity Address')\n await createOrEditPage.fillCreateOrEditInput('identity-zip', 'Identity Zip')\n await createOrEditPage.fillCreateOrEditInput('identity-city', 'Identity City')\n await createOrEditPage.fillCreateOrEditInput('identity-region', 'Identity Region')\n await createOrEditPage.fillCreateOrEditInput('identity-country', 'Identity Country')\n await createOrEditPage.fillCreateOrEditInput('identity-passportfullname', 'Identity Passport Fullname')\n await createOrEditPage.fillCreateOrEditInput('identity-passportnumber', 'Identity Passport Number')\n await createOrEditPage.fillCreateOrEditInput('identity-passportissuingcountry', 'Identity Issuing Country')\n await createOrEditPage.fillCreateOrEditInput('identity-passportdateofissue', 'Identity Date of Issue')\n await createOrEditPage.fillCreateOrEditInput('identity-passportexpirydate', '01/01/2020')\n await createOrEditPage.fillCreateOrEditInput('identity-passportnationality', '01/01/2025')\n await createOrEditPage.fillCreateOrEditInput('identity-passportdob', '01/01/1990')\n await createOrEditPage.fillCreateOrEditInput('identity-passportgender', 'Identity Gender')\n await createOrEditPage.fillCreateOrEditInput('identity-idcardnumber', 'Identity ID Card Number')\n await createOrEditPage.fillCreateOrEditInput('identity-idcarddateofissue', '01/01/2025')\n await createOrEditPage.fillCreateOrEditInput('identity-idcardexpirydate', '01/01/2030')\n await createOrEditPage.fillCreateOrEditInput('identity-idcardissuingcountry', 'USA')\n await createOrEditPage.fillCreateOrEditInput('identity-comment', 'Identity Driving License Note')\n await createOrEditPage.clickOnCreateOrEditButton('identity-save')\n await page.waitForTimeout(testData.timeouts.action)\n\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async () => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Verify that edited \"Identity\" item fields are saved correctly', async () => {\n qase.id(2166)\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput('identity-title', 'Identity Title Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-fullname', 'Identity Fullname Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-email', 'identitytestedited@mail.co')\n await createOrEditPage.fillCreateOrEditInput('identity-phone', 'Phone Number Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-address', 'Identity Address Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-zip', 'Identity Zip Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-city', 'Identity City Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-region', 'Identity Region Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-country', 'Identity Country Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-passportfullname', 'Identity Passport Fullname Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-passportnumber', 'Identity Passport Number Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-passportissuingcountry', 'Identity Issuing Country Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-passportdateofissue', 'Identity Date of Issue Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-passportexpirydate', '01/01/2022')\n await createOrEditPage.fillCreateOrEditInput('identity-passportnationality', '01/01/2027')\n await createOrEditPage.fillCreateOrEditInput('identity-passportdob', '01/01/1991')\n await createOrEditPage.fillCreateOrEditInput('identity-passportgender', 'Identity Gender Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-idcardnumber', 'Identity ID Card Number Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-idcarddateofissue', '01/01/2026')\n await createOrEditPage.fillCreateOrEditInput('identity-idcardexpirydate', '01/01/2031')\n await createOrEditPage.fillCreateOrEditInput('identity-idcardissuingcountry', 'USA Edited')\n await createOrEditPage.fillCreateOrEditInput('identity-comment', 'Identity Driving License Note Edited')\n await createOrEditPage.clickOnCreateOrEditButton('identity-save')\n\n await page.waitForTimeout(testData.timeouts.action)\n\n await mainPage.openElementDetails()\n await detailsPage.verifyIdentityDetailsValue('fullname', 'Identity Fullname Edited')\n await detailsPage.verifyIdentityDetailsValue('email', 'identitytestedited@mail.co')\n await detailsPage.verifyIdentityDetailsValue('address', 'Identity Address Edited')\n await detailsPage.verifyIdentityDetailsValue('zip', 'Identity Zip Edited')\n await detailsPage.verifyIdentityDetailsValue('city', 'Identity City Edited')\n await detailsPage.verifyIdentityDetailsValue('region', 'Identity Region Edited')\n await detailsPage.verifyIdentityDetailsValue('country', 'Identity Country Edited')\n await detailsPage.verifyIdentityDetailsValue('passportfullname', 'Identity Passport Fullname Edited')\n await detailsPage.verifyIdentityDetailsValue('passportnumber', 'Identity Passport Number Edited')\n await detailsPage.verifyIdentityDetailsValue('passportissuingcountry', 'Identity Issuing Country Edited')\n await detailsPage.verifyIdentityDetailsValue('passportdateofissue', 'Identity Date of Issue Edited')\n await detailsPage.verifyIdentityDetailsValue('passportexpirydate', '01/01/2022')\n await detailsPage.verifyIdentityDetailsValue('passportnationality', '01/01/2027')\n await detailsPage.verifyIdentityDetailsValue('passportdob', '01/01/1991')\n await detailsPage.verifyIdentityDetailsValue('passportgender', 'Identity Gender Edited')\n await detailsPage.verifyIdentityDetailsValue('idcardnumber', 'Identity ID Card Number Edited')\n await detailsPage.verifyIdentityDetailsValue('idcarddateofissue', '01/01/2026')\n await detailsPage.verifyIdentityDetailsValue('idcardexpirydate', '01/01/2031')\n await detailsPage.verifyIdentityDetailsValue('idcardissuingcountry', 'USA Edited')\n await detailsPage.verifyIdentityDetailsValue('note', 'Identity Driving License Note Edited')\n\n })\n\n test('Verify that the \"Identity\" item is removed after deletion', async () => {\n qase.id(2168)\n await utilities.deleteAllElements()\n await mainPage.verifyElementIsNotVisible()\n })\n\n test('Verify that the empty collection view is displayed on the Home screen after deleting the last item', async () => {\n qase.id(2169)\n await sideMenuPage.selectSideBarCategory('all')\n await expect(mainPage.emptyCollectionView).toBeVisible()\n })\n})\n" }, { "path": "e2e/specs/05-PassPhrase/creatingPassPhraseItem.test.js", "content": "import clipboard from 'clipboardy'\nimport { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Creating PassPhrase Item', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n sideMenuPage = new SideMenuPage(root)\n utilities = new Utilities(root)\n mainPage = new MainPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('passPhrase')\n await utilities.deleteAllElements()\n await mainPage.clickAddItem('passPhrase')\n\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async () => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Creating the \"PassPhrase\" item', async ({ page }) => {\n qase.id(2209)\n await createOrEditPage.fillCreateOrEditInput('passphrase-title', 'PassPhrase Title')\n\n await clipboard.write(\n 'word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 word11 word12'\n )\n await createOrEditPage.clickOnPasteFromClipboard()\n await createOrEditPage.clickOnCreateOrEditButton('passphrase-save')\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test('Viewing created item. Verify item details', async ({ page }) => {\n qase.id(2210)\n await mainPage.verifyElementTitle('PassPhrase Title')\n await mainPage.openElementDetails()\n await detailsPage.verifyAllRecoveryPhraseWords([\n 'word1',\n 'word2',\n 'word3',\n 'word4',\n 'word5',\n 'word6',\n 'word7',\n 'word8',\n 'word9',\n 'word10',\n 'word11',\n 'word12'\n ])\n })\n\n test('Add via Favorite icon', async ({ page }) => {\n qase.id(2213)\n await sideMenuPage.selectSideBarCategory('all')\n await mainPage.clickMainViewHeaderSelect()\n await mainPage.elementCheckBox(false)\n await mainPage.clickOnFirstElement()\n await mainPage.elementCheckBox(true)\n await mainPage.clickOnMainViewFavoriteIcon()\n await sideMenuPage.verifySideBarFavoritesFolder('1 items')\n })\n\n test('Remove via Favorite icon', async ({ page }) => {\n qase.id(2214)\n await mainPage.clickMainViewHeaderSelect()\n await mainPage.clickOnFirstElement()\n await mainPage.clickOnMainViewFavoriteIcon()\n await sideMenuPage.verifySideBarFavoritesFolder('0 items')\n })\n\n test('Add via More options', async ({ page }) => {\n qase.id(2215)\n await mainPage.openElementDetails()\n await detailsPage.openItemBarThreeDotsDropdownMenu()\n await detailsPage.clickMarkAsFavoriteButton()\n await sideMenuPage.verifySideBarFavoritesFolder('1 items')\n })\n\n test('Remove via More options', async ({ page }) => {\n qase.id(2216)\n await detailsPage.openItemBarThreeDotsDropdownMenu()\n await detailsPage.clickRemoveFromFavoritesButton()\n await sideMenuPage.verifySideBarFavoritesFolder('0 items')\n })\n\n // test('Add Custom Note', async ({ page }) => {\n // qase.id(2217);\n // await mainPage.verifyElementTitle('PassPhrase Title')\n // await mainPage.openElementDetails()\n // await detailsPage.editElement()\n // await createOrEditPage.clickCreateCustomItem()\n // await createOrEditPage.clickCustomItemOptionNote()\n // await expect(createOrEditPage.customNoteInput).toHaveCount(1)\n // await createOrEditPage.fillCustomNoteInput()\n // await createOrEditPage.clickOnCreateOrEditButton('save')\n // await page.waitForTimeout(testData.timeouts.action)\n // await mainPage.clickDetailsCloseButton()\n // })\n\n // test('Delete Note field', async ({ page }) => {\n // qase.id(2218);\n // await mainPage.verifyElementTitle('PassPhrase Title')\n // await mainPage.openElementDetails()\n // await detailsPage.editElement()\n // await expect(createOrEditPage.customNoteInput_first).toHaveCount(2)\n // await createOrEditPage.deleteCustomNote()\n // await expect(createOrEditPage.customNoteInput_first).toHaveCount(1)\n // await createOrEditPage.clickOnCreateOrEditButton('save')\n // await page.waitForTimeout(testData.timeouts.action)\n // await mainPage.clickDetailsCloseButton()\n // })\n\n test('Close via Cross icon', async ({ page }) => {\n qase.id(2219)\n await mainPage.verifyElementTitle('PassPhrase Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await detailsPage.clickElementItemCloseButton()\n await mainPage.verifyElementTitle('PassPhrase Title')\n })\n})\n" }, { "path": "e2e/specs/05-PassPhrase/editingDeletingPassPhraseItem.test.js", "content": "import clipboard from 'clipboardy'\nimport { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Editing/Deleting PassPhrase Item', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('passPhrase')\n await utilities.deleteAllElements()\n await mainPage.clickAddItem('passPhrase')\n\n await createOrEditPage.fillCreateOrEditInput('passphrase-title', 'PassPhrase Title')\n await clipboard.write(\n 'word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 word11 word12'\n )\n await createOrEditPage.clickOnPasteFromClipboard()\n await createOrEditPage.clickOnCreateOrEditButton('passphrase-save')\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async () => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Verify that edited \"PassPhrase\" item fields are saved correctly', async () => {\n qase.id(2658)\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput('passphrase-title', 'PassPhrase Title Edited')\n\n await clipboard.write(testData.passphrase.text24)\n await createOrEditPage.clickOnPasteFromClipboard()\n await createOrEditPage.clickOnCreateOrEditButton('passphrase-save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await mainPage.openElementDetails()\n\n await detailsPage.verifyTitle('PassPhrase Title Edited')\n await detailsPage.verifyAllRecoveryPhraseWords([\n 'word1',\n 'word2',\n 'word3',\n 'word4',\n 'word5',\n 'word6',\n 'word7',\n 'word8',\n 'word9',\n 'word10',\n 'word11',\n 'word12',\n 'word13',\n 'word14',\n 'word15',\n 'word16',\n 'word17',\n 'word18',\n 'word19',\n 'word20',\n 'word21',\n 'word22',\n 'word23',\n 'word24'\n ])\n })\n\n test('Verify that the \"PassPhrase\" item is removed after deletion', async () => {\n qase.id(2221)\n await utilities.deleteAllElements()\n await mainPage.verifyElementIsNotVisible()\n })\n\n test('Verify that the empty collection view is displayed on the Home screen after deleting the last item', async () => {\n qase.id(2222)\n await sideMenuPage.selectSideBarCategory('all')\n await expect(mainPage.emptyCollectionView).toBeVisible()\n })\n})\n" }, { "path": "e2e/specs/06-Note/creatingNoteItem.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Creating Note Item', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n mainPage = new MainPage(root)\n detailsPage = new DetailsPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('all')\n await utilities.deleteAllElements()\n await sideMenuPage.selectSideBarCategory('note')\n await mainPage.clickAddItem('note')\n\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async () => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Creating the \"Note\" item', async ({ page }) => {\n qase.id(2248)\n await createOrEditPage.fillCreateOrEditInput('note-title', 'Note Title')\n await createOrEditPage.fillCreateOrEditInput('note-comment', 'Test Note Text')\n await createOrEditPage.clickOnCreateOrEditButton('note-save')\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test('Viewing created item. Verify item details', async ({ page }) => {\n qase.id(2249)\n await mainPage.openElementDetails()\n await detailsPage.verifyTitle('Note Title')\n await detailsPage.verifyNoteText('Test Note Text')\n })\n\n test('Add via Favorite icon', async ({ page }) => {\n qase.id(2252)\n await sideMenuPage.selectSideBarCategory('all')\n await mainPage.clickMainViewHeaderSelect()\n await mainPage.elementCheckBox(false)\n await mainPage.clickOnFirstElement()\n await mainPage.elementCheckBox(true)\n await mainPage.clickOnMainViewFavoriteIcon()\n await sideMenuPage.verifySideBarFavoritesFolder('1 items')\n })\n\n test('Remove via Favorite icon', async ({ page }) => {\n qase.id(2253)\n await mainPage.clickMainViewHeaderSelect()\n await mainPage.clickOnFirstElement()\n await mainPage.clickOnMainViewFavoriteIcon()\n await sideMenuPage.verifySideBarFavoritesFolder('0 items')\n })\n\n test('Add via More options', async ({ page }) => {\n qase.id(2254)\n await mainPage.openElementDetails()\n await detailsPage.openItemBarThreeDotsDropdownMenu()\n await detailsPage.clickMarkAsFavoriteButton()\n await sideMenuPage.verifySideBarFavoritesFolder('1 items')\n })\n\n test('Remove via More options', async ({ page }) => {\n qase.id(2255)\n await detailsPage.openItemBarThreeDotsDropdownMenu()\n await detailsPage.clickRemoveFromFavoritesButton()\n await sideMenuPage.verifySideBarFavoritesFolder('0 items')\n })\n\n // test('Add Custom Note', async ({ page }) => {\n // qase.id(2256);\n // await mainPage.verifyElementTitle('Note Title')\n // await mainPage.openElementDetails()\n // await detailsPage.editElement()\n // await createOrEditPage.clickCreateCustomItem()\n // await createOrEditPage.clickCustomItemOptionNote()\n // await expect(createOrEditPage.customNoteInput).toHaveCount(1)\n // await createOrEditPage.fillCustomNoteInput()\n // await createOrEditPage.clickOnCreateOrEditButton('save')\n // await page.waitForTimeout(testData.timeouts.action)\n // await mainPage.clickDetailsCloseButton()\n // })\n\n // test('Delete Note field', async ({ page }) => {\n // qase.id(2257);\n // await mainPage.verifyElementTitle('Note Title')\n // await mainPage.openElementDetails()\n // await detailsPage.editElement()\n // await expect(createOrEditPage.customNoteInput).toHaveCount(2)\n // await createOrEditPage.deleteCustomNote()\n // await expect(createOrEditPage.customNoteInput).toHaveCount(1)\n // await createOrEditPage.clickOnCreateOrEditButton('save')\n // await page.waitForTimeout(testData.timeouts.action)\n // await mainPage.clickDetailsCloseButton()\n\n // })\n\n test('Close via Cross icon', async ({ page }) => {\n qase.id(2258)\n await mainPage.verifyElementTitle('Note Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await detailsPage.clickElementItemCloseButton()\n await mainPage.verifyElementTitle('Note Title')\n })\n\n test('View uploaded file in Edit mode', async ({ page }) => {\n qase.id(2259)\n await detailsPage.editElement()\n await createOrEditPage.clickOnAttachment()\n await createOrEditPage.uploadFile()\n await createOrEditPage.verifyUploadedFileIsVisible()\n await createOrEditPage.clickOnUploadedFile()\n\n await createOrEditPage.clickOnCreateOrEditButton('note-save')\n await page.waitForTimeout(testData.timeouts.action)\n\n\n await detailsPage.verifyUploadedFileIsVisible()\n\n await detailsPage.clickOnUploadedFile()\n await detailsPage.verifyUploadedImageIsVisible()\n\n await createOrEditPage.clickElementItemCloseButton()\n })\n\n test('Empty fields not displayed in view mode', async ({ page }) => {\n qase.id(2261)\n await mainPage.verifyElementTitle('Note Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput('note-comment', '')\n await createOrEditPage.clickOnCreateOrEditButton('note-save')\n await detailsPage.verifyItemDetailsValueIsNotVisible('Add comment')\n })\n})\n" }, { "path": "e2e/specs/06-Note/editingDeleteNoteItem.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Editing/Deleting Note Item', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('note')\n await utilities.deleteAllElements()\n await mainPage.clickAddItem('note')\n\n await createOrEditPage.fillCreateOrEditInput('note-title', 'Note Title')\n await createOrEditPage.fillCreateOrEditInput('note-comment', 'Test Note Text')\n await createOrEditPage.clickOnCreateOrEditButton('note-save')\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async () => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Verify that edited \"Note\" item fields are saved correctly', async () => {\n qase.id(2262)\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput('note-title', 'EDITED Note Title')\n await createOrEditPage.fillCreateOrEditInput('note-comment', 'EDITED Test Note Text')\n await createOrEditPage.clickOnCreateOrEditButton('note-save')\n await page.waitForTimeout(testData.timeouts.action)\n await mainPage.openElementDetails()\n await detailsPage.verifyTitle('EDITED Note Title')\n await detailsPage.verifyNoteText('EDITED Test Note Text')\n })\n\n test('Verify that the \"Login\" item is removed after deletion', async () => {\n qase.id(2265)\n await utilities.deleteAllElements()\n await mainPage.verifyElementIsNotVisible()\n })\n\n test('Verify that the empty collection view is displayed on the Home screen after deleting the last item', async () => {\n qase.id(2266)\n await sideMenuPage.selectSideBarCategory('all')\n await expect(mainPage.emptyCollectionView).toBeVisible()\n })\n})\n" }, { "path": "e2e/specs/07-CustomField/creatingCustomFieldItem.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Creating Custom Item', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n sideMenuPage = new SideMenuPage(root)\n utilities = new Utilities(root)\n mainPage = new MainPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('custom')\n await utilities.deleteAllElements()\n await mainPage.clickAddItem('custom')\n\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async () => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Creating the \"Custom\" item', async ({ page }) => {\n qase.id(2546)\n await createOrEditPage.fillCreateOrEditInput('custom-title', 'Custom Field Title')\n await createOrEditPage.clickOnCreateOrEditButton('custom-save')\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test('Viewing created item. Verify item details', async ({ page }) => {\n qase.id(2547)\n await mainPage.openElementDetails()\n await detailsPage.verifyTitle('Custom Field Title')\n })\n\n test('Add via Favorite icon', async ({ page }) => {\n qase.id(2250)\n await sideMenuPage.selectSideBarCategory('all')\n await mainPage.verifyElementTitle('Custom Field Title')\n await mainPage.openElementDetails()\n await detailsPage.clickFavoriteButton()\n await sideMenuPage.verifySideBarFavoritesFolder('1 items')\n })\n\n test('Remove via Favorite icon', async ({ page }) => {\n qase.id(2251)\n await mainPage.openElementDetails()\n await detailsPage.clickFavoriteButton()\n })\n\n test('Add via More options', async ({ page }) => {\n qase.id(2252)\n await mainPage.openElementDetails()\n await detailsPage.openItemBarThreeDotsDropdownMenu()\n await detailsPage.clickMarkAsFavoriteButton()\n await sideMenuPage.verifySideBarFavoritesFolder('1 items')\n })\n\n test('Remove via More options', async ({ page }) => {\n qase.id(2253)\n await mainPage.openElementDetails()\n await detailsPage.openItemBarThreeDotsDropdownMenu()\n await detailsPage.clickRemoveFromFavoritesButton()\n await sideMenuPage.verifySideBarFavoritesFolder('0 items')\n })\n\n test('Add Custom Note', async ({ page }) => {\n qase.id(2254)\n await mainPage.verifyElementTitle('Custom Field Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await expect(createOrEditPage.customNoteInput).toHaveCount(1)\n await createOrEditPage.fillCustomNoteInput()\n await createOrEditPage.clickOnCreateOrEditButton('custom-save')\n await page.waitForTimeout(testData.timeouts.action)\n await mainPage.clickDetailsCloseButton()\n })\n\n test('Delete Note field', async ({ page }) => {\n qase.id(2255)\n await mainPage.verifyElementTitle('Custom Field Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await expect(createOrEditPage.customNoteInput_first).toHaveCount(1)\n await createOrEditPage.deleteCustomNote()\n await expect(createOrEditPage.customNoteInput_first).toHaveCount(1)\n await createOrEditPage.clickOnCreateOrEditButton('custom-save')\n await page.waitForTimeout(testData.timeouts.action)\n await mainPage.clickDetailsCloseButton()\n })\n\n test('Close via Cross icon', async ({ page }) => {\n qase.id(2256)\n await mainPage.verifyElementTitle('Custom Field Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await detailsPage.clickElementItemCloseButton()\n await mainPage.verifyElementTitle('Custom Field Title')\n })\n\n test('View uploaded file in Edit mode', async ({ page }) => {\n qase.id(2257)\n await mainPage.verifyElementTitle('Custom Field Title')\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.clickOnAttachment()\n await createOrEditPage.uploadFile()\n await createOrEditPage.verifyUploadedFileIsVisible()\n await createOrEditPage.clickOnUploadedFile()\n await createOrEditPage.clickOnCreateOrEditButton('custom-save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await detailsPage.verifyUploadedFileIsVisible()\n\n await detailsPage.clickOnUploadedFile()\n await detailsPage.verifyUploadedImageIsVisible()\n\n await createOrEditPage.clickElementItemCloseButton()\n await mainPage.clickDetailsCloseButton()\n })\n\n // test('Empty fields not displayed in view mode', async ({ page }) => {\n // qase.id(2259);\n // await mainPage.verifyElementTitle('Custom Field Title')\n // await mainPage.openElementDetails()\n // await detailsPage.editElement()\n // await createOrEditPage.fillCreateOrEditTextArea('note', '')\n // await createOrEditPage.clickOnCreateOrEditButton('save')\n // await mainPage.openElementDetails()\n // await detailsPage.verifyItemDetailsValueIsNotVisible('Add comment')\n\n // await mainPage.clickDetailsCloseButton()\n\n // })\n})\n" }, { "path": "e2e/specs/07-CustomField/editingDeleteCustomFieldItem.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Editing/Deleting Custom Item', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('custom')\n await utilities.deleteAllElements()\n await mainPage.clickAddItem('custom')\n\n await createOrEditPage.fillCreateOrEditInput('custom-title', 'Custom Field Title')\n await createOrEditPage.fillCustomNoteInput()\n\n await createOrEditPage.clickOnCreateOrEditButton('custom-save')\n\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async () => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Verify that edited \"Custom\" item fields are saved correctly', async () => {\n qase.id(2572)\n await mainPage.openElementDetails()\n await detailsPage.editElement()\n await createOrEditPage.fillCreateOrEditInput(\n 'custom-title',\n 'EDITED Custom Field Title'\n )\n await createOrEditPage.fillCustomNoteInput()\n await page.waitForTimeout(testData.timeouts.action)\n\n await createOrEditPage.clickOnCreateOrEditButton('custom-save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await mainPage.openElementDetails()\n await page.waitForTimeout(testData.timeouts.action)\n await mainPage.verifyElementTitle('EDITED Custom Field Title')\n await detailsPage.verifyItemDetailsValue('Other Field', 'Custom Note')\n // Verify Note\n })\n\n test('Verify that custom \"Note\" fields are not saved in the edited \"Custom\" item', async () => {\n qase.id(2573)\n await detailsPage.editElement()\n await createOrEditPage.deleteCustomNote()\n await createOrEditPage.clickOnCreateOrEditButton('custom-save')\n await detailsPage.verifyItemDetailsValueIsNotVisible('Other Field')\n })\n\n test('Verify that the \"Custom Field\" item is removed after deletion', async () => {\n qase.id(2574)\n await utilities.deleteAllElements()\n await mainPage.verifyElementIsNotVisible()\n })\n\n test('Verify that the empty collection view is displayed on the Home screen after deleting the last item', async () => {\n qase.id(2575)\n await sideMenuPage.selectSideBarCategory('all')\n await expect(mainPage.emptyCollectionView).toBeVisible()\n })\n})\n" }, { "path": "e2e/specs/08-MultipleSelection/multipleSelection.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Multiple Selection', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n sideMenuPage = new SideMenuPage(root)\n utilities = new Utilities(root)\n mainPage = new MainPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('all')\n await utilities.deleteAllElements()\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async () => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Verify that selected items in one tab are deleted on \"Delete\" click', async ({\n page\n }) => {\n qase.id(2580)\n await sideMenuPage.selectSideBarCategory('login')\n await mainPage.clickAddItem('login')\n await createOrEditPage.fillCreateOrEditInput('title', 'AAA')\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await sideMenuPage.selectSideBarCategory('all')\n\n await mainPage.clickMultipleSelectiontButton()\n await mainPage.clickElementByPosition(0, 'AAA')\n\n await mainPage.clickMultipleSelectDeletetButton()\n await mainPage.clickYesButton()\n })\n\n test('Verify that selected items across tabs are deleted on \"Delete\" click', async ({\n page\n }) => {\n qase.id(2581)\n await sideMenuPage.selectSideBarCategory('login')\n await mainPage.clickAddItem('login')\n await createOrEditPage.fillCreateOrEditInput('title', 'AAA')\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await sideMenuPage.selectSideBarCategory('identity')\n await mainPage.clickAddItem('identity')\n await createOrEditPage.fillCreateOrEditInput('identity-title', 'BBB')\n await createOrEditPage.clickOnCreateOrEditButton('identity-save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await sideMenuPage.selectSideBarCategory('login')\n await mainPage.clickMultipleSelectiontButton()\n await mainPage.clickElementByPosition(0, 'AAA')\n await mainPage.clickMultipleSelectDeletetButton()\n await mainPage.clickYesButton()\n await page.waitForTimeout(testData.timeouts.action)\n\n await sideMenuPage.selectSideBarCategory('identity')\n await mainPage.clickMultipleSelectiontButton()\n await mainPage.clickElementByPosition(0, 'BBB')\n await mainPage.clickMultipleSelectDeletetButton()\n await mainPage.clickYesButton()\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test('Verify that \"Multiple Selection\" button is hidden when no items exist', async ({\n page\n }) => {\n qase.id(2582)\n await sideMenuPage.selectSideBarCategory('all')\n await mainPage.verifyEmptyCollection()\n })\n\n test('Verify that \"Multiple Selection\" mode can be canceled', async ({\n page\n }) => {\n qase.id(2583)\n await sideMenuPage.selectSideBarCategory('all')\n await utilities.deleteAllElements()\n await page.waitForTimeout(testData.timeouts.action)\n\n await sideMenuPage.selectSideBarCategory('login')\n await mainPage.clickAddItem('login')\n await createOrEditPage.fillCreateOrEditInput('title', 'AAA')\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await mainPage.clickMultipleSelectiontButton()\n await page.waitForTimeout(testData.timeouts.action)\n await mainPage.clickElementByPosition(0, 'AAA')\n await mainPage.clickMultipleSelectiontButton()\n })\n\n test('Verify that \"Delete\" button is enabled only when items are selected', async ({\n page\n }) => {\n qase.id(2584)\n await sideMenuPage.selectSideBarCategory('login')\n await mainPage.clickMultipleSelectiontButton()\n await page.waitForTimeout(testData.timeouts.action)\n await mainPage.clickElementByPosition(0, 'AAA')\n await mainPage.verifyMultipleSelectDeleteButtonIsEnabled()\n await page.waitForTimeout(testData.timeouts.action)\n await mainPage.clickMultipleSelectiontButton()\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test('Verify that multiple items can be added to a folder simultaneously', async ({\n page\n }) => {\n qase.id(2585)\n await sideMenuPage.selectSideBarCategory('all')\n await utilities.deleteAllElements()\n await page.waitForTimeout(testData.timeouts.action)\n\n await sideMenuPage.createFolder('Test Folder')\n await page.waitForTimeout(testData.timeouts.action)\n\n await sideMenuPage.selectSideBarCategory('login')\n await mainPage.clickAddItem('login')\n await createOrEditPage.fillCreateOrEditInput('title', 'AAA')\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await mainPage.clickAddItem('login')\n await createOrEditPage.fillCreateOrEditInput('title', 'BBB')\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await mainPage.clickMultipleSelectiontButton()\n await page.waitForTimeout(testData.timeouts.action)\n await mainPage.clickElementByPosition(0, 'BBB')\n await mainPage.clickElementByPosition(1, 'AAA')\n await page.waitForTimeout(testData.timeouts.action)\n\n await mainPage.clickMultipleSelectMoveButon()\n await page.waitForTimeout(testData.timeouts.action)\n await mainPage.clickMoveFolderChip('Test Folder')\n await mainPage.clickMoveFolderSubmit()\n await page.waitForTimeout(testData.timeouts.action)\n\n await sideMenuPage.selectSideBarCategory('all')\n await mainPage.verifyElementFolderName('Test Folder')\n await sideMenuPage.deleteMultipleItemsFolder('Test Folder')\n await page.waitForTimeout(testData.timeouts.action)\n\n await sideMenuPage.clickDeleteFolderButton()\n })\n})\n" }, { "path": "e2e/specs/09-SortingAndFiltering/sorting.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Sorting test', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n sideMenuPage = new SideMenuPage(root)\n utilities = new Utilities(root)\n mainPage = new MainPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n\n await sideMenuPage.selectSideBarCategory('all')\n await utilities.deleteAllElements()\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n })\n\n test.afterAll(async () => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Verify that items are sorted by most recently modified when \"Recent\" is selected', async () => {\n qase.id(2592)\n await sideMenuPage.selectSideBarCategory('login')\n await mainPage.clickAddItem('login')\n await createOrEditPage.fillCreateOrEditInput('title', 'AAA')\n await createOrEditPage.clickOnCreateOrEditButton('save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await sideMenuPage.selectSideBarCategory('identity')\n await mainPage.clickAddItem('identity')\n await createOrEditPage.fillCreateOrEditInput('identity-title', 'BBB')\n await createOrEditPage.clickOnCreateOrEditButton('identity-save')\n await page.waitForTimeout(testData.timeouts.action)\n\n await sideMenuPage.selectSideBarCategory('identity')\n await mainPage.clickAddItem('identity')\n await createOrEditPage.fillCreateOrEditInput('identity-title', 'CCC')\n await createOrEditPage.clickOnCreateOrEditButton('identity-save')\n await page.waitForTimeout(testData.timeouts.action)\n await page.waitForTimeout(testData.timeouts.action)\n\n await sideMenuPage.selectSideBarCategory('all')\n await page.waitForTimeout(testData.timeouts.action)\n\n await mainPage.verifyElementByPosition(0, 'CCC')\n await mainPage.verifyElementByPosition(1, 'BBB')\n await mainPage.verifyElementByPosition(2, 'AAA')\n })\n\n test('Verify that items are sorted from newest to oldest when \"Newest to oldest\" is selected', async ({\n page\n }) => {\n qase.id(2593)\n await mainPage.clickSortButton()\n await mainPage.selectSortOption('last_updated_newest')\n\n await mainPage.verifyElementByPosition('0', 'CCC')\n await mainPage.verifyElementByPosition('1', 'BBB')\n await mainPage.verifyElementByPosition('2', 'AAA')\n })\n\n test('Verify that items are sorted from oldest to newest when \"Oldest to newest\" is selected', async ({\n page\n }) => {\n qase.id(2594)\n await mainPage.clickSortButton()\n await mainPage.selectSortOption('last_updated_oldest')\n\n await mainPage.verifyElementByPosition('0', 'AAA')\n await mainPage.verifyElementByPosition('1', 'BBB')\n await mainPage.verifyElementByPosition('2', 'CCC')\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test('Verify that favorite items are displayed first on the Home screen', async ({\n page\n }) => {\n qase.id(2595)\n await sideMenuPage.selectSideBarCategory('login')\n await mainPage.openElementDetails()\n await detailsPage.clickFavoriteButton()\n\n await sideMenuPage.selectSideBarCategory('identity')\n await mainPage.openElementDetails()\n await detailsPage.clickFavoriteButton()\n\n await sideMenuPage.selectSideBarCategory('all')\n await page.waitForTimeout(testData.timeouts.action)\n\n await mainPage.verifyElementByPosition('0', 'AAA')\n await mainPage.verifyElementByPosition('1', 'BBB')\n await mainPage.verifyElementByPosition('2', 'CCC')\n })\n\n test('Verify that only favorite items are displayed when \"Favorite\" is selected', async ({\n page\n }) => {\n qase.id(2596)\n await sideMenuPage.openSideBarFolder('Favorites')\n await page.waitForTimeout(testData.timeouts.action)\n await mainPage.verifyElementByPosition('0', 'AAA')\n await mainPage.verifyElementByPosition('1', 'BBB')\n\n await sideMenuPage.selectSideBarCategory('all')\n })\n})\n" }, { "path": "e2e/specs/10-Settings/settings.test.js", "content": "import { qase } from 'playwright-qase-reporter'\n\nimport {\n LoginPage,\n MainPage,\n SideMenuPage,\n CreateOrEditPage,\n Utilities,\n DetailsPage,\n SettingsPage\n} from '../../components/index.js'\nimport { test, expect } from '../../fixtures/app.runner.js'\nimport testData from '../../fixtures/test-data.js'\n\ntest.describe('Settings test', () => {\n test.describe.configure({ mode: 'serial' })\n\n let loginPage,\n createOrEditPage,\n sideMenuPage,\n mainPage,\n utilities,\n detailsPage,\n page,\n settingsPage\n\n test.beforeAll(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n sideMenuPage = new SideMenuPage(root)\n utilities = new Utilities(root)\n mainPage = new MainPage(root)\n\n await loginPage.loginToApplication(testData.credentials.validPassword)\n })\n\n test.beforeEach(async ({ app }) => {\n page = await app.getPage()\n const root = page.locator('body')\n loginPage = new LoginPage(root)\n mainPage = new MainPage(root)\n sideMenuPage = new SideMenuPage(root)\n createOrEditPage = new CreateOrEditPage(root)\n utilities = new Utilities(root)\n detailsPage = new DetailsPage(root)\n settingsPage = new SettingsPage(root)\n })\n\n test.afterAll(async () => {\n await utilities.deleteAllElements()\n await sideMenuPage.clickSidebarExitButton()\n })\n\n test('Verify Security Settings', async ({ page }) => {\n qase.id(2605)\n await sideMenuPage.clickSidebarSettingsButton()\n\n await settingsPage.verifySettingsDropdownSectionIsVisible('security')\n await settingsPage.verifySettingsDropdownNavigationIsVisible('app-preferences')\n await settingsPage.verifySettingsDropdownNavigationIsVisible('master-password')\n\n await settingsPage.clickPearPassFunctionDropdown('auto-lock-select')\n await page.waitForTimeout(testData.timeouts.action)\n await settingsPage.getPearPassFunctionDropdownOption('seconds_30')\n await settingsPage.getPearPassFunctionDropdownOption('minutes_1')\n await settingsPage.getPearPassFunctionDropdownOption('minutes_5')\n await settingsPage.getPearPassFunctionDropdownOption('minutes_15')\n await settingsPage.getPearPassFunctionDropdownOption('minutes_30')\n await settingsPage.getPearPassFunctionDropdownOption('hours_1')\n await settingsPage.getPearPassFunctionDropdownOption('hours_4')\n await settingsPage.getPearPassFunctionDropdownOption('never')\n\n await settingsPage.getPearPassFunctionDropdown('auto-lock-select').click({ force: true })\n await page.waitForTimeout(testData.timeouts.action)\n })\n\n test('Verify Syncing Settings', async ({ page }) => {\n qase.id(2606)\n await settingsPage.verifySettingsDropdownSectionIsVisible('syncing')\n await settingsPage.verifySettingsDropdownNavigationIsVisible('blind-peering')\n await settingsPage.verifySettingsDropdownNavigationIsVisible('your-devices')\n })\n\n test('Verify Vault Settings', async ({ page }) => {\n qase.id(2607)\n await settingsPage.verifySettingsDropdownSectionIsVisible('vault')\n await settingsPage.verifySettingsDropdownNavigationIsVisible('your-vaults')\n await settingsPage.verifySettingsDropdownNavigationIsVisible('import-items')\n await settingsPage.verifySettingsDropdownNavigationIsVisible('export-items')\n })\n\n test('Verify Appearance Settings', async ({ page }) => {\n qase.id(2608)\n await settingsPage.verifySettingsDropdownSectionIsVisible('appearance')\n await settingsPage.verifySettingsDropdownNavigationIsVisible('language')\n })\n\n test('Verify About Settings', async ({ page }) => {\n qase.id(2609)\n await settingsPage.verifySettingsDropdownSectionIsVisible('about')\n await settingsPage.verifySettingsDropdownNavigationIsVisible('report-a-problem')\n await settingsPage.verifySettingsDropdownNavigationIsVisible('app-version')\n\n await settingsPage.clickBackSettingsButton()\n })\n})\n" }, { "path": "electron/clipboardCleanup.cjs", "content": "const { spawn } = require('child_process')\nconst crypto = require('crypto')\nconst fs = require('fs')\nconst path = require('path')\n\nconst DEFAULT_CLIPBOARD_CLEAR_DELAY_MS = 30000\nconst CLIPBOARD_CLEANUP_STATE_FILE = 'pearpass-clipboard-cleanup-current.token'\n\nfunction getClipboardCleanupStatePath(app) {\n return path.join(app.getPath('temp'), CLIPBOARD_CLEANUP_STATE_FILE)\n}\n\nfunction removeFileIfExists(filePath) {\n try {\n fs.unlinkSync(filePath)\n } catch (err) {\n if (err && err.code !== 'ENOENT') throw err\n }\n}\n\nfunction removeClipboardCleanupTokenIfCurrent(statePath, token) {\n try {\n const currentToken = fs.readFileSync(statePath, 'utf8')\n if (currentToken === token) {\n removeFileIfExists(statePath)\n }\n } catch (err) {\n if (err && err.code !== 'ENOENT') throw err\n }\n}\n\nfunction spawnDetachedClipboardHelper(secretPath, token, statePath, delayMs) {\n const helperPath = path.join(__dirname, 'clipboardCleanupHelper.cjs')\n if (!fs.existsSync(helperPath)) {\n throw new Error(`Clipboard cleanup helper not found: ${helperPath}`)\n }\n\n const child = spawn(\n process.execPath,\n [helperPath, secretPath, token, statePath, String(delayMs)],\n {\n detached: true,\n env: { ...process.env, ELECTRON_RUN_AS_NODE: '1' },\n stdio: 'inherit',\n windowsHide: true\n }\n )\n\n child.unref()\n}\n\nfunction spawnDetachedWindowsClipboardHelper(\n secretPath,\n token,\n statePath,\n delayMs\n) {\n const scriptPath = path.join(__dirname, 'clipboardCleanup.windows.ps1')\n if (!fs.existsSync(scriptPath)) {\n throw new Error(`Windows clipboard cleanup script not found: ${scriptPath}`)\n }\n\n const child = spawn(\n 'cmd.exe',\n [\n '/c',\n 'start',\n '\"\"',\n '/min',\n 'powershell.exe',\n '-NoProfile',\n '-WindowStyle',\n 'Hidden',\n '-ExecutionPolicy',\n 'Bypass',\n '-File',\n scriptPath,\n '-SecretPath',\n secretPath,\n '-StatePath',\n statePath,\n '-Token',\n token,\n '-DelayMs',\n String(delayMs)\n ],\n {\n detached: true,\n stdio: 'inherit',\n windowsHide: true\n }\n )\n\n child.unref()\n}\n\nfunction scheduleClipboardCleanup({\n app,\n clipboard,\n logger,\n isWindows,\n text,\n delayMs\n}) {\n const finalDelayMs =\n Number.isFinite(delayMs) && delayMs > 0\n ? delayMs\n : DEFAULT_CLIPBOARD_CLEAR_DELAY_MS\n const textToMatch = typeof text === 'string' ? text : clipboard.readText()\n\n if (typeof textToMatch !== 'string' || textToMatch.length === 0) {\n return false\n }\n\n const token = crypto.randomUUID()\n const statePath = getClipboardCleanupStatePath(app)\n const secretPath = path.join(\n app.getPath('temp'),\n `pearpass-clipboard-secret-${token}.txt`\n )\n\n try {\n fs.writeFileSync(secretPath, textToMatch, { encoding: 'utf8', mode: 0o600 })\n fs.writeFileSync(statePath, token, { encoding: 'utf8', mode: 0o600 })\n\n if (isWindows) {\n spawnDetachedWindowsClipboardHelper(\n secretPath,\n token,\n statePath,\n finalDelayMs\n )\n } else {\n spawnDetachedClipboardHelper(secretPath, token, statePath, finalDelayMs)\n }\n\n return true\n } catch (err) {\n try {\n removeFileIfExists(secretPath)\n removeClipboardCleanupTokenIfCurrent(statePath, token)\n } catch (_) {}\n\n logger.warn(\n 'MAIN',\n 'Failed to schedule detached clipboard cleanup:',\n err && err.message ? err.message : err\n )\n return false\n }\n}\n\nmodule.exports = {\n scheduleClipboardCleanup\n}\n" }, { "path": "electron/clipboardCleanup.test.js", "content": "/* eslint-env jest */\n\njest.mock('fs', () => ({\n existsSync: jest.fn(() => true),\n readFileSync: jest.fn(),\n unlinkSync: jest.fn(),\n writeFileSync: jest.fn()\n}))\n\njest.mock('crypto', () => ({\n randomUUID: jest.fn(() => 'token-1')\n}))\n\njest.mock('child_process', () => ({\n spawn: jest.fn(() => ({\n unref: jest.fn()\n }))\n}))\n\ndescribe('clipboardCleanup', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n it('uses the Windows script', () => {\n const path = require('path')\n const fs = require('fs')\n const { spawn } = require('child_process')\n const { scheduleClipboardCleanup } = require('./clipboardCleanup.cjs')\n\n const app = {\n getPath: jest.fn((name) =>\n name === 'temp' ? 'C:\\\\Temp' : `/unknown/${name}`\n )\n }\n const clipboard = {\n readText: jest.fn(() => 'secret')\n }\n const logger = {\n warn: jest.fn()\n }\n\n const result = scheduleClipboardCleanup({\n app,\n clipboard,\n logger,\n isWindows: true,\n text: 'secret',\n delayMs: 30000\n })\n\n expect(result).toBe(true)\n expect(fs.writeFileSync).toHaveBeenNthCalledWith(\n 1,\n path.join('C:\\\\Temp', 'pearpass-clipboard-secret-token-1.txt'),\n 'secret',\n { encoding: 'utf8', mode: 0o600 }\n )\n expect(fs.writeFileSync).toHaveBeenNthCalledWith(\n 2,\n path.join('C:\\\\Temp', 'pearpass-clipboard-cleanup-current.token'),\n 'token-1',\n { encoding: 'utf8', mode: 0o600 }\n )\n expect(spawn).toHaveBeenCalledWith(\n 'cmd.exe',\n expect.arrayContaining([\n '/c',\n 'start',\n '\"\"',\n '/min',\n 'powershell.exe',\n '-NoProfile',\n '-WindowStyle',\n 'Hidden',\n '-ExecutionPolicy',\n 'Bypass',\n '-File',\n path.join(process.cwd(), 'electron', 'clipboardCleanup.windows.ps1')\n ]),\n expect.objectContaining({\n detached: true,\n stdio: 'inherit',\n windowsHide: true\n })\n )\n })\n})\n" }, { "path": "electron/clipboardCleanup.windows.ps1", "content": "param(\n [string]$SecretPath,\n [string]$StatePath,\n [string]$Token,\n [int]$DelayMs\n)\n\ntry {\n $expected = ''\n\n try {\n if (-not (Test-Path -LiteralPath $SecretPath)) {\n exit 0\n }\n\n $expected = [System.IO.File]::ReadAllText($SecretPath, [System.Text.Encoding]::UTF8)\n } finally {\n Remove-Item -LiteralPath $SecretPath -Force -ErrorAction SilentlyContinue\n }\n\n Start-Sleep -Milliseconds $DelayMs\n\n $currentToken = ''\n try {\n if (Test-Path -LiteralPath $StatePath) {\n $currentToken = [System.IO.File]::ReadAllText($StatePath, [System.Text.Encoding]::UTF8)\n }\n } catch {\n $currentToken = ''\n }\n\n if (-not [string]::Equals($currentToken, $Token, [System.StringComparison]::Ordinal)) {\n exit 0\n }\n\n $clipboardText = ''\n try {\n $clipboardText = Get-Clipboard -Raw\n } catch {\n $clipboardText = ''\n }\n\n if ([string]::Equals($clipboardText, $expected, [System.StringComparison]::Ordinal)) {\n Set-Clipboard -Value ''\n }\n\n $latestToken = ''\n try {\n if (Test-Path -LiteralPath $StatePath) {\n $latestToken = [System.IO.File]::ReadAllText($StatePath, [System.Text.Encoding]::UTF8)\n }\n } catch {\n $latestToken = ''\n }\n\n if ([string]::Equals($latestToken, $Token, [System.StringComparison]::Ordinal)) {\n Remove-Item -LiteralPath $StatePath -Force -ErrorAction SilentlyContinue\n }\n} catch {\n exit 1\n}\n" }, { "path": "electron/clipboardCleanupHelper.cjs", "content": "const { spawnSync } = require('child_process')\nconst fs = require('fs')\n\nconst linuxWaylandClipboard = require('./linuxWaylandClipboard.cjs')\nconst linuxX11Clipboard = require('./linuxX11Clipboard.cjs')\n\nfunction removeFileIfExists(filePath) {\n try {\n fs.unlinkSync(filePath)\n } catch (err) {\n if (err && err.code !== 'ENOENT') throw err\n }\n}\n\nfunction readSecretFromFile(secretPath) {\n try {\n return fs.readFileSync(secretPath, 'utf8')\n } finally {\n removeFileIfExists(secretPath)\n }\n}\n\nfunction readCurrentToken(statePath) {\n try {\n return fs.readFileSync(statePath, 'utf8')\n } catch (err) {\n if (err && err.code === 'ENOENT') return ''\n throw err\n }\n}\n\nfunction clearCurrentTokenIfMatches(statePath, token) {\n if (readCurrentToken(statePath) === token) {\n removeFileIfExists(statePath)\n }\n}\n\nfunction describeLinuxSession() {\n const waylandDisplay = process.env.WAYLAND_DISPLAY || ''\n const sessionType = process.env.XDG_SESSION_TYPE || ''\n const display = process.env.DISPLAY || ''\n return `WAYLAND_DISPLAY=${waylandDisplay || '(unset)'} XDG_SESSION_TYPE=${sessionType || '(unset)'} DISPLAY=${display || '(unset)'}`\n}\n\nfunction logLinuxClipboardSkip(sessionLabel) {\n process.stderr.write(\n `PearPass clipboard cleanup skipped: ${sessionLabel} clipboard command unavailable or failed. (${describeLinuxSession()})\\n`\n )\n}\n\nfunction sleep(delayMs) {\n return new Promise((resolve) => setTimeout(resolve, delayMs))\n}\n\nfunction runClipboardCommand(command, args, input) {\n return spawnSync(command, args, {\n encoding: 'utf8',\n input,\n stdio: ['pipe', 'pipe', 'pipe']\n })\n}\n\nfunction readClipboard() {\n if (process.platform === 'darwin') {\n const result = runClipboardCommand('/usr/bin/pbpaste', [], undefined)\n if (result.error || result.status !== 0) {\n throw result.error || new Error('pbpaste failed')\n }\n return result.stdout || ''\n }\n\n if (process.platform === 'linux') {\n const isWayland = linuxWaylandClipboard.isWaylandSession()\n const linuxClipboard = isWayland ? linuxWaylandClipboard : linuxX11Clipboard\n const sessionLabel = isWayland ? 'Wayland' : 'X11'\n\n const result = linuxClipboard.readClipboard()\n if (typeof result === 'string') return result\n\n logLinuxClipboardSkip(sessionLabel)\n return null\n }\n\n throw new Error(`Unsupported platform: ${process.platform}`)\n}\n\nfunction clearClipboard() {\n if (process.platform === 'darwin') {\n const result = runClipboardCommand('/usr/bin/pbcopy', [], '')\n if (result.error || result.status !== 0) {\n throw result.error || new Error('pbcopy failed')\n }\n return\n }\n\n if (process.platform === 'linux') {\n const isWayland = linuxWaylandClipboard.isWaylandSession()\n const linuxClipboard = isWayland ? linuxWaylandClipboard : linuxX11Clipboard\n const sessionLabel = isWayland ? 'Wayland' : 'X11'\n\n if (linuxClipboard.clearClipboard()) return\n\n logLinuxClipboardSkip(sessionLabel)\n return\n }\n\n throw new Error(`Unsupported platform: ${process.platform}`)\n}\n\nasync function runClipboardCleanup({\n secretPath,\n token,\n statePath,\n delayMs = 30000\n}) {\n const expectedText = readSecretFromFile(secretPath)\n\n await sleep(delayMs)\n\n if (readCurrentToken(statePath) !== token) {\n return false\n }\n\n try {\n const clipboardText = readClipboard()\n\n if (typeof clipboardText !== 'string') {\n return false\n }\n\n if (clipboardText === expectedText) {\n clearClipboard()\n }\n\n return true\n } finally {\n clearCurrentTokenIfMatches(statePath, token)\n }\n}\n\nasync function main(argv = process.argv) {\n const [, , secretPath, token, statePath, delayMsArg] = argv\n const delayMs = Number.parseInt(delayMsArg, 10)\n\n if (!secretPath || !token || !statePath) {\n process.exitCode = 1\n return\n }\n\n try {\n await runClipboardCleanup({\n secretPath,\n token,\n statePath,\n delayMs: Number.isFinite(delayMs) && delayMs > 0 ? delayMs : 30000\n })\n } catch (err) {\n process.stderr.write(\n `PearPass clipboard cleanup failed: ${err && err.message ? err.message : err}\\n`\n )\n process.exitCode = 1\n }\n}\n\nif (require.main === module) {\n main()\n}\n\nmodule.exports = {\n clearClipboard,\n clearCurrentTokenIfMatches,\n logLinuxClipboardSkip,\n main,\n readClipboard,\n readCurrentToken,\n readSecretFromFile,\n runClipboardCleanup,\n sleep\n}\n" }, { "path": "electron/clipboardCleanupHelper.test.js", "content": "/* eslint-env jest */\n\njest.mock('fs', () => ({\n readFileSync: jest.fn(),\n unlinkSync: jest.fn(),\n existsSync: jest.fn(() => true),\n promises: {\n mkdir: jest.fn()\n }\n}))\n\njest.mock('child_process', () => ({\n spawnSync: jest.fn(() => ({ status: 0, stdout: '', error: null }))\n}))\n\njest.mock('./linuxWaylandClipboard.cjs', () => ({\n isWaylandSession: jest.fn(() => false),\n readClipboard: jest.fn(() => null),\n clearClipboard: jest.fn(() => false)\n}))\n\njest.mock('./linuxX11Clipboard.cjs', () => ({\n readClipboard: jest.fn(() => null),\n clearClipboard: jest.fn(() => false)\n}))\n\nconst originalPlatform = process.platform\n\nconst setPlatform = (platform) => {\n Object.defineProperty(process, 'platform', {\n configurable: true,\n value: platform\n })\n}\n\nconst loadHelper = () => {\n jest.resetModules()\n return require('./clipboardCleanupHelper.cjs')\n}\n\nconst getFs = () => require('fs')\nconst getSpawnSync = () => require('child_process').spawnSync\n\ndescribe('clipboardCleanupHelper', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n jest.useFakeTimers()\n })\n\n afterEach(() => {\n jest.useRealTimers()\n setPlatform(originalPlatform)\n })\n\n it('clears the clipboard only for the latest matching token', async () => {\n setPlatform('darwin')\n const helper = loadHelper()\n const fs = getFs()\n const spawnSync = getSpawnSync()\n\n fs.readFileSync\n .mockReturnValueOnce('secret')\n .mockReturnValueOnce('token-1')\n .mockReturnValueOnce('token-1')\n\n spawnSync\n .mockReturnValueOnce({ status: 0, stdout: 'secret' })\n .mockReturnValueOnce({ status: 0, stdout: '' })\n\n const cleanupPromise = helper.runClipboardCleanup({\n secretPath: '/tmp/secret.txt',\n token: 'token-1',\n statePath: '/tmp/state.token',\n delayMs: 30000\n })\n\n await jest.advanceTimersByTimeAsync(30000)\n await expect(cleanupPromise).resolves.toBe(true)\n\n expect(spawnSync).toHaveBeenNthCalledWith(\n 1,\n '/usr/bin/pbpaste',\n [],\n expect.objectContaining({ input: undefined })\n )\n expect(spawnSync).toHaveBeenNthCalledWith(\n 2,\n '/usr/bin/pbcopy',\n [],\n expect.objectContaining({ input: '' })\n )\n expect(fs.unlinkSync).toHaveBeenCalledWith('/tmp/secret.txt')\n expect(fs.unlinkSync).toHaveBeenCalledWith('/tmp/state.token')\n })\n\n it('does not clear when a newer clipboard token replaced it', async () => {\n setPlatform('darwin')\n const helper = loadHelper()\n const fs = getFs()\n const spawnSync = getSpawnSync()\n\n fs.readFileSync.mockReturnValueOnce('secret').mockReturnValueOnce('token-2')\n\n const cleanupPromise = helper.runClipboardCleanup({\n secretPath: '/tmp/secret.txt',\n token: 'token-1',\n statePath: '/tmp/state.token',\n delayMs: 30000\n })\n\n await jest.advanceTimersByTimeAsync(30000)\n await expect(cleanupPromise).resolves.toBe(false)\n\n expect(spawnSync).not.toHaveBeenCalled()\n expect(fs.unlinkSync).toHaveBeenCalledWith('/tmp/secret.txt')\n expect(fs.unlinkSync).not.toHaveBeenCalledWith('/tmp/state.token')\n })\n\n it('skips Linux cleanup gracefully when no clipboard tool is available', async () => {\n setPlatform('linux')\n const helper = loadHelper()\n const fs = getFs()\n const linuxX11Clipboard = require('./linuxX11Clipboard.cjs')\n const stderrSpy = jest\n .spyOn(process.stderr, 'write')\n .mockImplementation(() => true)\n\n fs.readFileSync\n .mockReturnValueOnce('secret')\n .mockReturnValueOnce('token-1')\n .mockReturnValueOnce('token-1')\n\n const cleanupPromise = helper.runClipboardCleanup({\n secretPath: '/tmp/secret.txt',\n token: 'token-1',\n statePath: '/tmp/state.token',\n delayMs: 30000\n })\n\n await jest.advanceTimersByTimeAsync(30000)\n await expect(cleanupPromise).resolves.toBe(false)\n\n expect(linuxX11Clipboard.readClipboard).toHaveBeenCalled()\n expect(stderrSpy).toHaveBeenCalledWith(\n expect.stringContaining('PearPass clipboard cleanup skipped:')\n )\n expect(fs.unlinkSync).toHaveBeenCalledWith('/tmp/secret.txt')\n expect(fs.unlinkSync).toHaveBeenCalledWith('/tmp/state.token')\n\n stderrSpy.mockRestore()\n })\n})\n" }, { "path": "electron/flatpak-paths.cjs", "content": "const fs = require('fs')\nconst path = require('path')\n\nfunction isFlatpakRuntime(options = {}) {\n const env = options.env || process.env\n const existsSync = options.existsSync || fs.existsSync\n const flatpakInfoPath = options.flatpakInfoPath || '/.flatpak-info'\n\n return Boolean(env.FLATPAK_ID) || existsSync(flatpakInfoPath)\n}\n\nfunction isSnapRuntime(options = {}) {\n const env = options.env || process.env\n return Boolean(env.SNAP_NAME)\n}\n\nfunction getSnapRealHome(options = {}) {\n const env = options.env || process.env\n // $HOME is remapped to ~/snap// inside the sandbox; snapd\n // exposes the real home as SNAP_REAL_HOME.\n if (!isSnapRuntime(options)) return env.HOME || ''\n return env.SNAP_REAL_HOME || env.HOME || ''\n}\n\nfunction getHostHome(options = {}) {\n const env = options.env || process.env\n if (!isFlatpakRuntime(options)) return env.HOME || ''\n // Inside flatpak $HOME is remapped to the per-app sandbox home.\n // With --filesystem=home the real host home is mounted at /home/$USER\n // and is where host-side browsers (e.g. Chrome) read NativeMessagingHosts.\n const user = env.USER || env.USERNAME\n return user ? path.join('/home', user) : env.HOME || ''\n}\n\nfunction getFlatpakCompatRoots(options = {}) {\n const env = options.env || process.env\n const homeDir = env.HOME\n\n if (!homeDir) return null\n\n return {\n config: path.join(homeDir, '.config'),\n data: path.join(homeDir, '.config', 'pearpass-flatpak-data'),\n cache: path.join(homeDir, '.config', 'pearpass-flatpak-cache')\n }\n}\n\nfunction mapFlatpakPathToSandbox(targetPath, options = {}) {\n if (!targetPath || typeof targetPath !== 'string') return targetPath\n\n const env = options.env || process.env\n const compatRoots = getFlatpakCompatRoots(options)\n if (!compatRoots) return targetPath\n\n const mappings = [\n [env.XDG_CONFIG_HOME, compatRoots.config],\n [env.XDG_DATA_HOME, compatRoots.data],\n [env.XDG_CACHE_HOME, compatRoots.cache]\n ].filter(([prefix]) => typeof prefix === 'string' && prefix.length > 0)\n\n for (const [hostPrefix, sandboxPrefix] of mappings) {\n if (targetPath === hostPrefix) return sandboxPrefix\n if (targetPath.startsWith(hostPrefix + path.sep)) {\n return path.join(sandboxPrefix, path.relative(hostPrefix, targetPath))\n }\n }\n\n return targetPath\n}\n\nfunction getSandboxSafePath(targetPath, options = {}) {\n if (!isFlatpakRuntime(options)) return targetPath\n return mapFlatpakPathToSandbox(targetPath, options)\n}\n\nmodule.exports = {\n getFlatpakCompatRoots,\n getHostHome,\n getSandboxSafePath,\n getSnapRealHome,\n isFlatpakRuntime,\n isSnapRuntime,\n mapFlatpakPathToSandbox\n}\n" }, { "path": "electron/flatpak-paths.test.js", "content": "const {\n getFlatpakCompatRoots,\n getSandboxSafePath,\n getSnapRealHome,\n isFlatpakRuntime,\n isSnapRuntime,\n mapFlatpakPathToSandbox\n} = require('./flatpak-paths.cjs')\n\ndescribe('flatpak path helpers', () => {\n const env = {\n HOME: '/home/alvaro',\n XDG_CONFIG_HOME: '/home/alvaro/.var/app/com.pears.pass/config',\n XDG_DATA_HOME: '/home/alvaro/.var/app/com.pears.pass/data',\n XDG_CACHE_HOME: '/home/alvaro/.var/app/com.pears.pass/cache'\n }\n\n it('detects flatpak via FLATPAK_ID', () => {\n expect(isFlatpakRuntime({ env: { FLATPAK_ID: 'com.pears.pass' } })).toBe(\n true\n )\n })\n\n it('derives flatpak compatibility roots under the user config directory', () => {\n expect(getFlatpakCompatRoots({ env })).toEqual({\n config: '/home/alvaro/.config',\n data: '/home/alvaro/.config/pearpass-flatpak-data',\n cache: '/home/alvaro/.config/pearpass-flatpak-cache'\n })\n })\n\n it('maps host-side flatpak config paths into sandbox-safe paths', () => {\n expect(\n mapFlatpakPathToSandbox(\n '/home/alvaro/.var/app/com.pears.pass/config/PearPass',\n { env }\n )\n ).toBe('/home/alvaro/.config/PearPass')\n })\n\n it('detects snap via SNAP_NAME', () => {\n expect(isSnapRuntime({ env: { SNAP_NAME: 'pearpass' } })).toBe(true)\n expect(isSnapRuntime({ env: {} })).toBe(false)\n })\n\n it('returns SNAP_REAL_HOME inside snap, HOME otherwise', () => {\n expect(\n getSnapRealHome({\n env: {\n SNAP_NAME: 'pearpass',\n SNAP_REAL_HOME: '/home/alvaro',\n HOME: '/home/alvaro/snap/pearpass/current'\n }\n })\n ).toBe('/home/alvaro')\n expect(getSnapRealHome({ env: { HOME: '/home/alvaro' } })).toBe(\n '/home/alvaro'\n )\n expect(getSnapRealHome({ env: {} })).toBe('')\n })\n\n it('returns sandbox-safe path only when running inside flatpak', () => {\n const targetPath = '/home/alvaro/.var/app/com.pears.pass/data/PearPass'\n\n expect(\n getSandboxSafePath(targetPath, {\n env: { ...env, FLATPAK_ID: 'com.pears.pass' }\n })\n ).toBe('/home/alvaro/.config/pearpass-flatpak-data/PearPass')\n expect(\n getSandboxSafePath(targetPath, { env, existsSync: () => false })\n ).toBe(targetPath)\n })\n})\n" }, { "path": "electron/linuxWaylandClipboard.cjs", "content": "const { spawnSync } = require('child_process')\n\nconst {\n readClipboardWithFallback,\n clearClipboardWithFallback\n} = require('./linuxWaylandClipboardFallback.cjs')\n\nfunction isWaylandSession() {\n return (\n Boolean(process.env.WAYLAND_DISPLAY) ||\n process.env.XDG_SESSION_TYPE === 'wayland'\n )\n}\n\nfunction runCommand(command, args, input) {\n return spawnSync(command, args, {\n encoding: 'utf8',\n input,\n stdio: ['pipe', 'pipe', 'pipe']\n })\n}\n\nfunction readClipboard() {\n const result = runCommand('wl-paste', ['--no-newline'], undefined)\n\n if (result.error) {\n return readClipboardWithFallback()\n }\n\n if (result.status === 0) return result.stdout || ''\n if (result.status === 1) return ''\n\n process.stderr.write(\n `[linuxWaylandClipboard] wl-paste exited with unexpected status ${result.status}: ${result.stderr}\\n`\n )\n return readClipboardWithFallback()\n}\n\nfunction clearClipboard() {\n const clearResult = runCommand('wl-copy', ['--clear'], undefined)\n\n if (!clearResult.error && clearResult.status === 0) return true\n\n if (clearResult.error) {\n return clearClipboardWithFallback()\n }\n\n process.stderr.write(\n `[linuxWaylandClipboard] wl-copy --clear failed (status ${clearResult.status}), trying empty input fallback: ${clearResult.stderr}\\n`\n )\n\n const emptyResult = runCommand('wl-copy', [], '')\n if (!emptyResult.error && emptyResult.status === 0) return true\n\n process.stderr.write(\n `[linuxWaylandClipboard] wl-copy empty fallback also failed (status ${emptyResult.status}): ${emptyResult.stderr}\\n`\n )\n\n return clearClipboardWithFallback()\n}\n\nmodule.exports = {\n clearClipboard,\n isWaylandSession,\n readClipboard\n}\n" }, { "path": "electron/linuxWaylandClipboardFallback.cjs", "content": "const { spawnSync } = require('child_process')\nconst fs = require('fs')\nconst os = require('os')\nconst path = require('path')\n\nconst TEMP_WL_PASTE_NAME = 'pearpass-wl-paste'\nconst TEMP_WL_COPY_NAME = 'pearpass-wl-copy'\n\nfunction getWlPasteBinaryArchitectureName() {\n return process.arch === 'arm64' ? 'wl-paste-arm64' : 'wl-paste-x86_64'\n}\n\nfunction getWlCopyBinaryArchitectureName() {\n return process.arch === 'arm64' ? 'wl-copy-arm64' : 'wl-copy-x86_64'\n}\n\nfunction resolveBundledBinarySourcePath(archName) {\n const packagedPath = path.join(__dirname, '..', '..', 'bin', archName)\n if (fs.existsSync(packagedPath)) return packagedPath\n\n const devPath = path.join(__dirname, '..', 'resources', 'bin', archName)\n if (fs.existsSync(devPath)) return devPath\n\n return null\n}\n\nfunction prepareBundledBinary(archName, tempName) {\n const sourcePath = resolveBundledBinarySourcePath(archName)\n\n if (!sourcePath) {\n process.stderr.write(\n `[linuxWaylandClipboardFallback] Bundled ${archName} binary not found in packaged or dev location.\\n`\n )\n return null\n }\n\n const destPath = path.join(os.tmpdir(), tempName)\n\n try {\n fs.copyFileSync(sourcePath, destPath)\n fs.chmodSync(destPath, 0o755)\n return destPath\n } catch (err) {\n process.stderr.write(\n `[linuxWaylandClipboardFallback] Failed to extract bundled binary ${archName}: ${err && err.message ? err.message : err}\\n`\n )\n return null\n }\n}\n\nfunction prepareWlPasteBinary() {\n return prepareBundledBinary(\n getWlPasteBinaryArchitectureName(),\n TEMP_WL_PASTE_NAME\n )\n}\n\nfunction prepareWlCopyBinary() {\n return prepareBundledBinary(\n getWlCopyBinaryArchitectureName(),\n TEMP_WL_COPY_NAME\n )\n}\n\nfunction readClipboardWithFallback() {\n const binaryPath = prepareWlPasteBinary()\n if (!binaryPath) return null\n\n const result = spawnSync(binaryPath, ['--no-newline'], {\n encoding: 'utf8',\n stdio: ['pipe', 'pipe', 'pipe']\n })\n\n if (result.error) {\n process.stderr.write(\n `[linuxWaylandClipboardFallback] Bundled wl-paste failed to start: ${result.error.message}\\n`\n )\n return null\n }\n\n if (result.status === 0) return result.stdout || ''\n if (result.status === 1) return ''\n\n process.stderr.write(\n `[linuxWaylandClipboardFallback] Bundled wl-paste exited with unexpected status ${result.status}: ${result.stderr}\\n`\n )\n return null\n}\n\nfunction clearClipboardWithFallback() {\n const binaryPath = prepareWlCopyBinary()\n if (!binaryPath) return false\n\n const clearResult = spawnSync(binaryPath, ['--clear'], {\n encoding: 'utf8',\n stdio: ['pipe', 'pipe', 'pipe']\n })\n\n if (!clearResult.error && clearResult.status === 0) return true\n\n if (clearResult.error) {\n process.stderr.write(\n `[linuxWaylandClipboardFallback] Bundled wl-copy --clear failed to start: ${clearResult.error.message}\\n`\n )\n } else {\n process.stderr.write(\n `[linuxWaylandClipboardFallback] Bundled wl-copy --clear failed (status ${clearResult.status}), trying empty input fallback: ${clearResult.stderr}\\n`\n )\n }\n\n const emptyResult = spawnSync(binaryPath, [], {\n encoding: 'utf8',\n input: '',\n stdio: ['pipe', 'pipe', 'pipe']\n })\n\n if (!emptyResult.error && emptyResult.status === 0) return true\n\n process.stderr.write(\n `[linuxWaylandClipboardFallback] Bundled wl-copy empty fallback also failed (status ${emptyResult.status}): ${emptyResult.stderr}\\n`\n )\n return false\n}\n\nmodule.exports = {\n readClipboardWithFallback,\n clearClipboardWithFallback\n}\n" }, { "path": "electron/linuxX11Clipboard.cjs", "content": "const { spawnSync } = require('child_process')\n\nconst {\n readClipboardWithFallback,\n clearClipboardWithFallback\n} = require('./linuxX11ClipboardFallback.cjs')\n\nfunction runCommand(command, args, input) {\n return spawnSync(command, args, {\n encoding: 'utf8',\n input,\n stdio: ['pipe', 'pipe', 'pipe']\n })\n}\n\nfunction readClipboard() {\n const commands = [\n ['xsel', ['--clipboard', '--output']],\n ['xclip', ['-selection', 'clipboard', '-o']]\n ]\n\n for (const [command, args] of commands) {\n const result = runCommand(command, args, undefined)\n if (!result.error && result.status === 0) {\n return result.stdout || ''\n }\n }\n\n return readClipboardWithFallback()\n}\n\nfunction clearClipboard() {\n const commands = [\n ['xsel', ['--clipboard', '--input']],\n ['xclip', ['-selection', 'clipboard']]\n ]\n\n for (const [command, args] of commands) {\n const result = runCommand(command, args, '')\n if (!result.error && result.status === 0) {\n return true\n }\n }\n\n return clearClipboardWithFallback()\n}\n\nmodule.exports = {\n clearClipboard,\n readClipboard\n}\n" }, { "path": "electron/linuxX11ClipboardFallback.cjs", "content": "const { spawnSync } = require('child_process')\nconst fs = require('fs')\nconst os = require('os')\nconst path = require('path')\n\nconst TEMP_BINARY_NAME = 'pearpass-xsel'\n\n/**\n * Returns the architecture-specific bundled xsel binary filename.\n * @returns {'xsel-arm64' | 'xsel-x86_64'}\n */\nfunction getBinaryArchitectureName() {\n return process.arch === 'arm64' ? 'xsel-arm64' : 'xsel-x86_64'\n}\n\n/**\n * Resolves the bundled xsel binary source path purely from __dirname.\n * No arguments needed — this file always knows where it lives on disk.\n *\n * Packaged Electron app structure:\n * resources/app/electron/linuxClipboardFallback.cjs ← __dirname\n * resources/bin/xsel-x86_64 ← extraResources (to: \"bin\")\n * → path.join(__dirname, '..', '..', 'bin', archName)\n *\n * Dev structure:\n * /electron/linuxClipboardFallback.cjs ← __dirname\n * /resources/bin/xsel-x86_64\n * → path.join(__dirname, '..', 'resources', 'bin', archName)\n *\n * @returns {string | null} Absolute path to the binary, or null if not found in either location\n */\nfunction resolveBundledBinarySourcePath() {\n const archName = getBinaryArchitectureName()\n\n // Packaged: resources/app/electron/ → ../../bin/\n const packagedPath = path.join(__dirname, '..', '..', 'bin', archName)\n if (fs.existsSync(packagedPath)) return packagedPath\n\n // Dev: /electron/ → ../resources/bin/\n const devPath = path.join(__dirname, '..', 'resources', 'bin', archName)\n if (fs.existsSync(devPath)) return devPath\n\n return null\n}\n\n/**\n * Extracts the bundled xsel binary to a temp location and ensures it is\n * executable. Returns the path to the extracted binary, or null if the\n * source binary is not found in any known location.\n *\n * @returns {string | null}\n */\nfunction prepareBundledBinary() {\n const sourcePath = resolveBundledBinarySourcePath()\n\n if (!sourcePath) {\n process.stderr.write(\n '[linuxClipboardFallback] Bundled xsel binary not found in packaged or dev location.\\n'\n )\n return null\n }\n\n const destPath = path.join(os.tmpdir(), TEMP_BINARY_NAME)\n\n try {\n fs.copyFileSync(sourcePath, destPath)\n fs.chmodSync(destPath, 0o755)\n return destPath\n } catch (err) {\n process.stderr.write(\n `[linuxClipboardFallback] Failed to extract bundled binary: ${err && err.message ? err.message : err}\\n`\n )\n return null\n }\n}\n\n/**\n * Reads the clipboard content using the bundled xsel binary.\n * Returns the clipboard text, or null if the fallback is unavailable or fails.\n *\n * @returns {string | null}\n */\nfunction readClipboardWithFallback() {\n const binaryPath = prepareBundledBinary()\n if (!binaryPath) return null\n\n const result = spawnSync(binaryPath, ['--clipboard', '--output'], {\n encoding: 'utf8',\n stdio: ['pipe', 'pipe', 'pipe']\n })\n\n if (!result.error && result.status === 0) {\n return result.stdout || ''\n }\n\n process.stderr.write(\n `[linuxClipboardFallback] Bundled xsel read failed. status=${result.status}, error=${result.error}\\n`\n )\n return null\n}\n\n/**\n * Clears the clipboard using the bundled xsel binary.\n * Returns true on success, false if the fallback is unavailable or fails.\n *\n * @returns {boolean}\n */\nfunction clearClipboardWithFallback() {\n const binaryPath = prepareBundledBinary()\n if (!binaryPath) return false\n\n const result = spawnSync(binaryPath, ['--clipboard', '--input'], {\n encoding: 'utf8',\n input: '',\n stdio: ['pipe', 'pipe', 'pipe']\n })\n\n if (!result.error && result.status === 0) {\n return true\n }\n\n process.stderr.write(\n `[linuxClipboardFallback] Bundled xsel clear failed. status=${result.status}, error=${result.error}\\n`\n )\n return false\n}\n\nmodule.exports = {\n readClipboardWithFallback,\n clearClipboardWithFallback\n}\n" }, { "path": "electron/main.cjs", "content": "/* eslint-disable no-unused-vars */\n/* eslint-disable no-underscore-dangle */\n/**\n * Electron main process: creates the window, starts pear-runtime (P2P OTA, bare workers, storage),\n * and registers secure IPC handlers so the renderer can use runtime and vault services.\n */\nconst fs = require('fs')\nconst path = require('path')\n\nconst {\n app,\n BrowserWindow,\n ipcMain,\n nativeImage,\n shell,\n clipboard\n} = require('electron')\nconst PearRuntime = require('pear-runtime')\nconst getPearRuntimeLegacyStorage = require('pear-runtime-legacy-storage')\nconst { isLinux, isWindows, isMac } = require('which-runtime')\n\nconst { scheduleClipboardCleanup } = require('./clipboardCleanup.cjs')\n\nlet debugMode = false\n\n;(async () => {\n try {\n const { DEBUG_MODE } = await import('../src/constants/appConstants.js')\n debugMode = DEBUG_MODE\n } catch {\n // fall back to default debugMode = false\n }\n})()\n\nconst pkg = require('../package.json')\nconst {\n getSandboxSafePath,\n isFlatpakRuntime,\n isSnapRuntime\n} = require('./flatpak-paths.cjs')\nconst runtimeConfig = require('./runtime-config.cjs')\nconst devicePreferences = require('../src/utils/devicePreferences.cjs')\nconst {\n getLogPaths,\n removeLogFiles,\n setupLogging\n} = require('../src/utils/logHelper.cjs')\n\nconst { logger, loggingForced, enableWorkletFileLogging } = setupLogging({\n app,\n pkg,\n debugMode,\n getStorageDir: () => getStorageDir(),\n getVaultClient: () => vaultClient\n})\n\n// Effective logging state. Initialized in app.whenReady (after setName, so\n// getStorageDir() resolves correctly). Mutable so the in-app toggle can flip\n// it at runtime via the vault:setLogging IPC.\nlet loggingActive = false\n\n/**\n * Emit a structured startup marker to stderr.\n *\n * The main-process logger is a no-op when DEBUG_MODE=false (i.e. in every\n * packaged build), which means the CI smoke test has no way to observe\n * runtime progress and local failures can't be diagnosed from `journalctl`.\n * This helper writes directly to process.stderr so markers survive regardless\n * of logger configuration. Keep the output format stable — the flatpak smoke\n * test greps for `[PEARPASS] ` lines.\n */\nfunction emitStartupMarker(name, detail) {\n try {\n const hasDetail = typeof detail === 'string' && detail.length > 0\n const line = hasDetail\n ? `[PEARPASS] ${name} ${detail}\\n`\n : `[PEARPASS] ${name}\\n`\n process.stderr.write(line)\n } catch {\n // never let the marker path break startup\n }\n}\n\n// Enable auto-reload during development for main + renderer code\nif (!app.isPackaged) {\n try {\n // Watch the project root; electron-reload will restart Electron or\n // reload windows when files change. Renderer JS is rebuilt into dist/.\n require('electron-reload')(path.join(__dirname, '..'), {\n // Avoid watching node_modules to reduce noise\n ignored: /node_modules|[\\/\\\\]\\./,\n awaitWriteFinish: true\n })\n } catch (err) {\n logger.error('MAIN', 'Failed to enable electron-reload:', err)\n }\n}\n\n/** @type {import('electron').BrowserWindow | null} */\nlet mainWindow = null\n\n/** @type {import('pear-runtime') | null} */\nlet pearRuntime = null\n\n/** @type {import('bare-sidecar') | null} */\nlet workletSidecar = null\n\n/** @type {import('@tetherto/pearpass-lib-vault-core').PearpassVaultClient | null} */\nlet vaultClient = null\n\nfunction getExecPath() {\n if (!app.isPackaged) return null\n if (isLinux && process.env.APPIMAGE) return process.env.APPIMAGE\n if (isWindows) return true\n return path.join(process.resourcesPath, '..', '..')\n}\n\nfunction getWorkletPath() {\n const workletDir = path.join(\n 'node_modules',\n '@tetherto/pearpass-lib-vault-core',\n 'src',\n 'worklet'\n )\n\n if (app.isPackaged) {\n // Packaged: Bare runs .js as CJS, so use the CJS bundle from build.worklet.mjs\n return path.join(process.resourcesPath, 'app', workletDir, 'app.cjs')\n }\n\n // Dev: ESM app.js so Bare's loader can resolve fs -> bare-fs etc.\n const appPath = app.getAppPath()\n return path.join(appPath, workletDir, 'app.js')\n}\n\nfunction getStorageDir() {\n return getSandboxSafePath(app.getPath('userData'))\n}\n\n// Resolve storage root for this pear app.\n// 1) If the legacy Pear platform store knows this app (existing install),\n// use that path for full compatibility.\n// 2) Otherwise, fall back to an Electron-owned per-link directory under\n// userData so multiple links can coexist on the same machine.\nasync function resolveRuntimeStorageDir() {\n const { legacyChannelLink, upgrade } = runtimeConfig || {}\n\n let storageDir = getStorageDir()\n const linkId = upgrade.replace(/^pear:\\/\\//, '')\n\n if (isFlatpakRuntime() || isSnapRuntime()) {\n storageDir = path.join(storageDir, 'app-storage', 'by-dkey', linkId)\n logger.info('[MAIN]', 'Using sandbox per-link storage root:', storageDir)\n return storageDir\n }\n\n try {\n const legacyStorageDir = legacyChannelLink\n ? await getPearRuntimeLegacyStorage(legacyChannelLink)\n : null\n\n if (legacyStorageDir) {\n storageDir = getSandboxSafePath(legacyStorageDir)\n logger.info('[MAIN]', 'Using pear legacy storage root:', storageDir)\n } else {\n storageDir = path.join(storageDir, 'app-storage', 'by-dkey', linkId)\n logger.warn(\n 'MAIN',\n 'pear-runtime-legacy-storage returned null; using per-link Electron storage:',\n storageDir\n )\n }\n } catch (err) {\n storageDir = path.join(getStorageDir(), 'app-storage', 'by-dkey', linkId)\n logger.warn(\n 'MAIN',\n 'Failed to resolve legacy pear storage, using per-link Electron storage:',\n legacyChannelLink,\n err && err.message ? err.message : err,\n 'storageDir=',\n storageDir\n )\n }\n\n return storageDir\n}\n\nfunction getNativeBridgePath() {\n const bundleFile = path.join('dist', 'native-messaging-bridge.bundle.cjs')\n\n if (app.isPackaged) {\n return path.join(process.resourcesPath, 'app', bundleFile)\n }\n\n return path.join(app.getAppPath(), bundleFile)\n}\n\n/**\n * In dev, when PEARPASS_DEV_RESET=1, clear vault/encryption data so the app\n * Only runs when NODE_ENV !== 'production'.\n */\nfunction clearVaultStorageForDevReset(storageDir) {\n if (process.env.NODE_ENV === 'production') return\n if (process.env.PEARPASS_DEV_RESET !== '1') return\n\n const dirs = ['encryption', 'vaults', 'vault', 'pear-runtime']\n for (const name of dirs) {\n const dir = path.join(storageDir, name)\n try {\n if (fs.existsSync(dir)) {\n fs.rmSync(dir, { recursive: true, force: true })\n logger.log('MAIN', `Dev reset: removed ${name} at ${dir}`)\n }\n } catch (err) {\n logger.warn(\n 'MAIN',\n `Dev reset: failed to remove ${name} at ${dir}:`,\n err && err.message ? err.message : err\n )\n }\n }\n}\n\nconst WORKLET_READY_TIMEOUT_MS = 15000\nconst WORKLET_READY_SIGNAL = 'WORKLET_READY'\n\nfunction waitForWorkletReady(sidecar) {\n const ipcStream = sidecar?._process?.stdio?.[3]\n if (ipcStream) {\n // Having an IPC pipe is treated as \"ready enough\" — bare-sidecar has\n // already finished its side of the handshake.\n emitStartupMarker('WORKLET_READY', 'via=ipc-stream')\n return Promise.resolve(true)\n }\n return new Promise((resolve) => {\n const timeout = setTimeout(() => {\n cleanup()\n emitStartupMarker(\n 'WORKLET_READY_TIMEOUT',\n `ms=${WORKLET_READY_TIMEOUT_MS}`\n )\n resolve(false)\n }, WORKLET_READY_TIMEOUT_MS)\n let buffer = ''\n const onData = (d) => {\n const s = (d && (typeof d === 'string' ? d : d.toString?.())) || ''\n buffer += s\n if (buffer.includes(WORKLET_READY_SIGNAL)) {\n cleanup()\n emitStartupMarker('WORKLET_READY', 'via=stdio-signal')\n resolve(true)\n }\n }\n const cleanup = () => {\n clearTimeout(timeout)\n if (sidecar.stderr) sidecar.stderr.removeListener('data', onData)\n if (sidecar.stdout) sidecar.stdout.removeListener('data', onData)\n }\n sidecar.stderr?.on?.('data', onData)\n sidecar.stdout?.on?.('data', onData)\n })\n}\n/**\n * Start pear-runtime and the vault worklet (bare worker). Called after app is ready.\n */\nasync function startRuntime() {\n const upgrade = runtimeConfig.upgrade\n\n if (!upgrade) {\n logger.warn(\n 'MAIN',\n 'Pear runtime: no upgrade link configured. Running without P2P OTA.'\n )\n await startWorkletOnly()\n return\n }\n\n const storageDir = getStorageDir()\n\n // to clear local vault/encryption data so the app starts from scratch.\n clearVaultStorageForDevReset(storageDir)\n const workletPath = getWorkletPath()\n\n const { PearpassVaultClient } = await import(\n '@tetherto/pearpass-lib-vault-core'\n )\n const extension = isLinux ? '.AppImage' : isMac ? '.app' : '.msix'\n\n pearRuntime = new PearRuntime({\n // pear runtime doesn't care about pear (platform) directory\n dir: storageDir,\n upgrade,\n version: runtimeConfig.version,\n app: app.isPackaged ? getExecPath() : null,\n bundled: !!app.isPackaged,\n name: `${pkg.productName}${extension}`\n })\n\n await pearRuntime.ready()\n\n logger.info('[MAIN]', 'workletPath', workletPath)\n if (!fs.existsSync(workletPath)) {\n throw new Error(`Worklet not found: ${workletPath}`)\n }\n\n workletSidecar = pearRuntime.run(workletPath)\n emitStartupMarker('WORKLET_SPAWNED', 'mode=pear-runtime')\n workletSidecar.on('error', (err) => {\n logger.error('MAIN', '[worklet IPC error]', err.code || err.message, err)\n })\n const ipcStream = workletSidecar._process?.stdio?.[3]\n if (ipcStream)\n ipcStream.on('error', (err) => {\n logger.error(\n 'MAIN',\n '[worklet IPC pipe error]',\n err.code || err.message,\n err\n )\n })\n workletSidecar.stderr?.on('data', (d) =>\n logger.error('MAIN', '[worklet stderr]', d?.toString?.() || d)\n )\n workletSidecar.stdout?.on('data', (d) =>\n logger.log('MAIN', '[worklet stdout]', d?.toString?.() || d)\n )\n workletSidecar._process?.on?.('exit', (code, sig) => {\n logger.error('MAIN', '[worklet exit] code=', code, 'signal=', sig)\n })\n workletSidecar._process?.on?.('error', (err) => {\n logger.error('MAIN', '[worklet process error]', err)\n })\n await waitForWorkletReady(workletSidecar)\n const storagePath = await resolveRuntimeStorageDir()\n emitStartupMarker('STORAGE_PATH_SET', storagePath)\n try {\n vaultClient = new PearpassVaultClient(workletSidecar, storagePath, {\n debugMode,\n logger\n })\n emitStartupMarker('VAULT_CLIENT_READY')\n } catch (error) {\n emitStartupMarker(\n 'VAULT_CLIENT_ERROR',\n (error && (error.stack || error.message)) || String(error)\n )\n throw error\n }\n\n if (loggingActive) {\n await enableWorkletFileLogging()\n }\n\n vaultClient.on('update', () => {\n if (mainWindow && !mainWindow.isDestroyed()) {\n mainWindow.webContents.send('vault:update')\n }\n })\n\n pearRuntime.updater.on('updating', () => {\n if (mainWindow && !mainWindow.isDestroyed()) {\n logger.info('runtime:updating', 'sending updating event')\n mainWindow.webContents.send('runtime:updating')\n }\n })\n\n pearRuntime.updater.on('updated', async () => {\n if (mainWindow && !mainWindow.isDestroyed()) {\n logger.info('runtime:updated', 'sending updated event')\n await pearRuntime.updater.applyUpdate()\n mainWindow.webContents.send('runtime:updated')\n }\n })\n}\n\n/**\n * Run only the worklet via bare-sidecar (no P2P runtime). Used when no upgrade link is set (e.g. dev).\n */\nasync function startWorkletOnly() {\n // When there is no upgrade link, we don't need pear-runtime's full\n // update machinery – we just need to run the worklet via bare-sidecar.\n // bare-sidecar is a dependency of pear-runtime and will be hoisted into\n // this app's node_modules, so we can require it directly.\n const Sidecar = require('bare-sidecar')\n const { PearpassVaultClient } = await import(\n '@tetherto/pearpass-lib-vault-core'\n )\n\n const workletPath = getWorkletPath()\n if (!fs.existsSync(workletPath)) {\n throw new Error(`Worklet not found: ${workletPath}`)\n }\n\n // Dev-only: allow `PEARPASS_DEV_RESET=1 npm run dev` (or `npm run dev:reset`)\n // to clear local vault/encryption data so the app starts from scratch.\n clearVaultStorageForDevReset(getStorageDir())\n\n // In packaged builds, Bare's module resolution uses the process cwd.\n let previousCwd = null\n if (app.isPackaged) {\n const appRoot = path.join(process.resourcesPath, 'app')\n if (fs.existsSync(appRoot)) {\n previousCwd = process.cwd()\n process.chdir(appRoot)\n logger.log('MAIN', 'Worklet cwd set to', appRoot)\n }\n }\n\n try {\n workletSidecar = new Sidecar(workletPath)\n } finally {\n if (previousCwd !== null) {\n process.chdir(previousCwd)\n }\n }\n emitStartupMarker('WORKLET_SPAWNED', 'mode=bare-sidecar')\n workletSidecar.on('error', (err) => {\n logger.error('MAIN', '[worklet IPC error]', err.code || err.message, err)\n })\n const ipcStream = workletSidecar._process?.stdio?.[3]\n if (ipcStream)\n ipcStream.on('error', (err) => {\n logger.error(\n 'MAIN',\n '[worklet IPC pipe error]',\n err.code || err.message,\n err\n )\n })\n workletSidecar.stderr?.on('data', (d) =>\n logger.error('MAIN', '[worklet stderr]', d?.toString?.() || d)\n )\n workletSidecar.stdout?.on('data', (d) =>\n logger.log('MAIN', '[worklet stdout]', d?.toString?.() || d)\n )\n workletSidecar._process?.on?.('exit', (code, sig) => {\n logger.error('MAIN', '[worklet exit] code=', code, 'signal=', sig)\n })\n workletSidecar._process?.on?.('error', (err) => {\n logger.error('MAIN', '[worklet process error]', err)\n })\n await waitForWorkletReady(workletSidecar)\n const storagePath = getStorageDir()\n emitStartupMarker('STORAGE_PATH_SET', storagePath)\n try {\n vaultClient = new PearpassVaultClient(workletSidecar, storagePath, {\n debugMode,\n logger\n })\n emitStartupMarker('VAULT_CLIENT_READY')\n } catch (error) {\n emitStartupMarker(\n 'VAULT_CLIENT_ERROR',\n (error && (error.stack || error.message)) || String(error)\n )\n throw error\n }\n\n if (loggingActive) {\n await enableWorkletFileLogging()\n }\n\n vaultClient.on('update', () => {\n if (mainWindow && !mainWindow.isDestroyed()) {\n mainWindow.webContents.send('vault:update')\n }\n })\n}\n\nfunction createWindow() {\n const isV2 = runtimeConfig.designVersion === 2\n // Resolve app icon per-platform\n let iconPath = null\n if (process.platform === 'darwin') {\n iconPath = app.isPackaged\n ? path.join(process.resourcesPath, 'assets', 'darwin', 'icon.png')\n : path.join(__dirname, '..', 'assets', 'darwin', 'icon.png')\n } else if (process.platform === 'win32') {\n iconPath = app.isPackaged\n ? path.join(process.resourcesPath, 'assets', 'win32', 'icon.ico')\n : path.join(__dirname, '..', 'assets', 'win32', 'icon.ico')\n } else {\n iconPath = app.isPackaged\n ? path.join(process.resourcesPath, 'assets', 'linux', 'icon.png')\n : path.join(__dirname, '..', 'assets', 'linux', 'icon.png')\n }\n\n let iconImage = null\n try {\n iconImage = nativeImage.createFromPath(iconPath)\n } catch {\n iconImage = null\n }\n\n // Set Dock icon explicitly on macOS\n if (process.platform === 'darwin' && iconImage && !iconImage.isEmpty()) {\n try {\n app.dock.setIcon(iconImage)\n } catch {\n // ignore dock icon errors\n }\n }\n\n mainWindow = new BrowserWindow({\n width: 1440,\n height: 1024,\n minWidth: 816,\n ...(isMac && isV2\n ? {\n titleBarStyle: 'hidden',\n trafficLightPosition: { x: 18, y: 12 }\n }\n : {}),\n backgroundColor: '#1F2430',\n icon: iconPath && iconImage && !iconImage.isEmpty() ? iconPath : undefined,\n autoHideMenuBar: true,\n webPreferences: {\n preload: path.join(__dirname, 'preload.cjs'),\n nodeIntegration: true,\n contextIsolation: false,\n sandbox: false\n }\n })\n\n mainWindow.loadFile(path.join(__dirname, '..', 'index.html'))\n emitStartupMarker('WINDOW_CREATED')\n\n // Open external links in the default browser instead of the Electron window\n mainWindow.webContents.setWindowOpenHandler(({ url }) => {\n shell.openExternal(url)\n return { action: 'deny' }\n })\n\n mainWindow.webContents.on('will-navigate', (event, url) => {\n const appUrl = mainWindow.webContents.getURL()\n if (url !== appUrl) {\n event.preventDefault()\n shell.openExternal(url)\n }\n })\n\n mainWindow.on('closed', () => {\n mainWindow = null\n })\n}\n\nfunction fromSerializableArg(data) {\n if (data && typeof data === 'object' && data.__base64) {\n return Buffer.from(data.__base64, 'base64')\n }\n if (data && typeof data === 'object' && !Array.isArray(data)) {\n const out = {}\n for (const k of Object.keys(data)) {\n out[k] = fromSerializableArg(data[k])\n }\n return out\n }\n if (Array.isArray(data)) {\n return data.map(fromSerializableArg)\n }\n return data\n}\n\nfunction toSerializableArg(value) {\n if (Buffer.isBuffer(value)) {\n return { __base64: value.toString('base64') }\n }\n if (value && typeof value === 'object' && !Array.isArray(value)) {\n const out = {}\n for (const k of Object.keys(value)) {\n out[k] = toSerializableArg(value[k])\n }\n return out\n }\n if (Array.isArray(value)) {\n return value.map(toSerializableArg)\n }\n return value\n}\n\nfunction registerIPC() {\n ipcMain.on('get-app-path', (e) => {\n e.returnValue = app.getAppPath()\n })\n\n ipcMain.handle('app:getVersion', () => app.getVersion())\n\n ipcMain.handle('runtime:getConfig', async () => {\n const storage = await resolveRuntimeStorageDir()\n return {\n storage,\n key: runtimeConfig.upgrade || null,\n upgrade: runtimeConfig.upgrade,\n version: runtimeConfig.version,\n productName: runtimeConfig.productName,\n applink: runtimeConfig.upgrade || '',\n userDataPath: getStorageDir(),\n execPath:\n isWindows && process.windowsStore\n ? path.join(\n process.env.LOCALAPPDATA,\n 'Microsoft',\n 'WindowsApps',\n path.basename(process.execPath)\n )\n : process.execPath,\n bridgePath: getNativeBridgePath()\n }\n })\n\n ipcMain.handle('runtime:applyUpdate', async () => {\n logger.info(\n '[MAIN]',\n 'runtime:applyUpdate',\n pearRuntime?.updater?.applyUpdate\n )\n return await pearRuntime.updater.applyUpdate()\n })\n\n ipcMain.handle('runtime:restart', async () => {\n logger.info('[MAIN]', 'runtime:restart')\n if (isMac || isLinux) {\n app.relaunch()\n app.exit(0)\n } else {\n app.exit(0)\n }\n })\n\n ipcMain.handle(\n 'runtime:checkUpdated',\n async () => !!(pearRuntime && pearRuntime.updated)\n )\n\n ipcMain.handle('shell:openExternal', async (_event, url) => {\n await shell.openExternal(url)\n })\n\n ipcMain.handle('vault:invoke', async (_event, { method, args }) => {\n if (!vaultClient) {\n throw new Error('Vault client not ready')\n }\n const fn = vaultClient[method]\n if (typeof fn !== 'function') {\n throw new Error(`Unknown vault method: ${method}`)\n }\n const rawArgs = args || []\n const deserialized = rawArgs.map(fromSerializableArg)\n try {\n const result = await fn.apply(vaultClient, deserialized)\n return { ok: true, data: toSerializableArg(result) }\n } catch (err) {\n return {\n ok: false,\n error: err.message || String(err),\n code: err.code\n }\n }\n })\n\n ipcMain.handle('clipboard:clearAfter', async (_event, { text, delayMs }) =>\n scheduleClipboardCleanup({\n app,\n clipboard,\n logger,\n isWindows,\n text,\n delayMs\n })\n )\n\n ipcMain.handle('vault:openLogsFolder', async () => {\n const { logsDir, mainPath } = getLogPaths(getStorageDir())\n fs.mkdirSync(logsDir, { recursive: true })\n if (fs.existsSync(mainPath)) {\n shell.showItemInFolder(mainPath)\n } else {\n await shell.openPath(logsDir)\n }\n })\n\n ipcMain.handle('vault:isLoggingEnabled', () => ({\n enabled: loggingActive,\n forced: loggingForced\n }))\n\n ipcMain.handle('vault:setLogging', async (_event, payload) => {\n if (loggingForced) {\n return { enabled: true, forced: true }\n }\n\n const next = !!(payload && payload.enabled)\n if (next === loggingActive) {\n return { enabled: loggingActive, forced: false }\n }\n\n loggingActive = next\n try {\n devicePreferences.write(getStorageDir(), {\n loggingEnabled: loggingActive\n })\n } catch (err) {\n logger.warn('MAIN', 'Failed to persist device preferences', err)\n }\n\n if (loggingActive) {\n // Toggle ON: clear any leftover files for a clean session\n removeLogFiles(getStorageDir())\n logger.setLogPath(getStorageDir())\n await enableWorkletFileLogging()\n return { enabled: true, forced: false }\n }\n\n // Toggle OFF: stop worklet writes first, then close main, then delete\n if (vaultClient) {\n try {\n await vaultClient.setLogOptions({ logFile: null })\n } catch (err) {\n logger.warn('MAIN', 'setLogOptions(disable) failed', err)\n }\n }\n logger.clearLogPath()\n removeLogFiles(getStorageDir())\n return { enabled: false, forced: false }\n })\n}\n\napp.whenReady().then(async () => {\n emitStartupMarker('PEARPASS_MAIN_READY')\n app.setName(pkg.productName)\n const { loggingEnabled } = devicePreferences.read(getStorageDir())\n loggingActive = loggingForced || loggingEnabled\n if (loggingActive) {\n logger.setLogPath(getStorageDir())\n }\n registerIPC()\n try {\n await startRuntime()\n } catch (err) {\n emitStartupMarker(\n 'STARTUP_ERROR',\n (err && (err.stack || err.message)) || String(err)\n )\n logger.error('MAIN', 'Failed to start runtime/worklet:', err)\n }\n\n createWindow()\n\n app.on('activate', () => {\n if (BrowserWindow.getAllWindows().length === 0) {\n createWindow()\n }\n })\n})\n\nasync function cleanup() {\n if (workletSidecar) {\n try {\n workletSidecar.destroy()\n } catch (_) {}\n }\n if (pearRuntime && typeof pearRuntime.close === 'function') {\n try {\n await pearRuntime.close()\n } catch (_) {}\n }\n}\n\napp.on('window-all-closed', async () => {\n app.quit()\n})\n\napp.on('before-quit', async () => {\n await cleanup()\n})\n" }, { "path": "electron/preload.cjs", "content": "/* eslint-disable no-underscore-dangle */\n/**\n * Preload: with contextIsolation false, runs in the same context as the page.\n * Injects Node globals (__dirname, __filename) and Pear placeholder so the original\n */\nconst path = require('path')\n\nconst { ipcRenderer } = require('electron')\n\nconst pkg = require('../package.json')\n\nconst appPath = ipcRenderer.sendSync('get-app-path')\n\n// Required by fs-native-extensions (pulled in via pear-ipc): binding.js uses __filename\nconst fsNativeExtDir = path.join(\n appPath,\n 'node_modules',\n 'fs-native-extensions'\n)\nglobal.__dirname = fsNativeExtDir\nglobal.__filename = path.join(fsNativeExtDir, 'binding.js')\nglobal.global = global\n\nwindow.electronAPI = {\n productName: pkg.productName,\n getAppVersion: () => ipcRenderer.invoke('app:getVersion'),\n getConfig: () => ipcRenderer.invoke('runtime:getConfig'),\n onRuntimeUpdating: (cb) => {\n const sub = () => cb()\n ipcRenderer.on('runtime:updating', sub)\n return () => ipcRenderer.removeListener('runtime:updating', sub)\n },\n onRuntimeUpdated: (cb) => {\n const sub = () => cb()\n ipcRenderer.on('runtime:updated', sub)\n return () => ipcRenderer.removeListener('runtime:updated', sub)\n },\n applyUpdate: () => ipcRenderer.invoke('runtime:applyUpdate'),\n restart: () => ipcRenderer.invoke('runtime:restart'),\n checkUpdated: () => ipcRenderer.invoke('runtime:checkUpdated'),\n clearClipboardAfter: (text, delayMs) =>\n ipcRenderer.invoke('clipboard:clearAfter', { text, delayMs }),\n vaultInvoke: (method, args) =>\n ipcRenderer.invoke('vault:invoke', { method, args }),\n vaultOnUpdate: (cb) => {\n const sub = () => cb()\n ipcRenderer.on('vault:update', sub)\n return () => ipcRenderer.removeListener('vault:update', sub)\n },\n openExternal: (url) => ipcRenderer.invoke('shell:openExternal', url),\n openLogsFolder: () => ipcRenderer.invoke('vault:openLogsFolder'),\n isLoggingEnabled: () => ipcRenderer.invoke('vault:isLoggingEnabled'),\n setLogging: (enabled) =>\n ipcRenderer.invoke('vault:setLogging', { enabled: !!enabled })\n}\n" }, { "path": "electron/preload.test.js", "content": "/* eslint-disable no-underscore-dangle */\n/* eslint-env jest */\n\nconst path = require('path')\n\njest.mock('electron', () => ({\n ipcRenderer: {\n sendSync: jest.fn(() => '/fake/app/path'),\n invoke: jest.fn(),\n on: jest.fn(),\n removeListener: jest.fn()\n }\n}))\n\n// Helper to load the preload script fresh for each test\nconst loadPreload = () => {\n // Ensure we start from a clean module state\n jest.resetModules()\n\n return require('./preload.cjs')\n}\n\ndescribe('preload.cjs', () => {\n beforeEach(() => {\n // Provide a minimal window shim so preload.cjs can attach electronAPI\n globalThis.window = globalThis.window || {}\n\n // Clean up globals that the preload may set\n delete globalThis.__dirname\n delete globalThis.__filename\n if (typeof window !== 'undefined') {\n delete window.electronAPI\n }\n\n jest.clearAllMocks()\n\n // Load the preload script (which will set globals and window.electronAPI)\n loadPreload()\n })\n\n it('sets Node-related globals correctly', () => {\n const expectedDir = path.join(\n '/fake/app/path',\n 'node_modules',\n 'fs-native-extensions'\n )\n\n expect(globalThis.__dirname).toBe(expectedDir)\n expect(globalThis.__filename).toBe(path.join(expectedDir, 'binding.js'))\n })\n\n it('exposes electronAPI on window with expected methods', () => {\n expect(window.electronAPI).toBeDefined()\n expect(typeof window.electronAPI.getAppVersion).toBe('function')\n expect(typeof window.electronAPI.getConfig).toBe('function')\n expect(typeof window.electronAPI.onRuntimeUpdating).toBe('function')\n expect(typeof window.electronAPI.onRuntimeUpdated).toBe('function')\n expect(typeof window.electronAPI.applyUpdate).toBe('function')\n expect(typeof window.electronAPI.restart).toBe('function')\n expect(typeof window.electronAPI.checkUpdated).toBe('function')\n expect(typeof window.electronAPI.clearClipboardAfter).toBe('function')\n expect(typeof window.electronAPI.vaultInvoke).toBe('function')\n expect(typeof window.electronAPI.vaultOnUpdate).toBe('function')\n })\n\n it('routes simple invoke-based APIs through ipcRenderer.invoke', async () => {\n const { ipcRenderer } = require('electron')\n\n await window.electronAPI.getAppVersion()\n await window.electronAPI.getConfig()\n await window.electronAPI.applyUpdate()\n await window.electronAPI.restart()\n await window.electronAPI.checkUpdated()\n await window.electronAPI.clearClipboardAfter('secret', 30000)\n\n expect(ipcRenderer.invoke).toHaveBeenCalledWith('app:getVersion')\n expect(ipcRenderer.invoke).toHaveBeenCalledWith('runtime:getConfig')\n expect(ipcRenderer.invoke).toHaveBeenCalledWith('runtime:applyUpdate')\n expect(ipcRenderer.invoke).toHaveBeenCalledWith('runtime:restart')\n expect(ipcRenderer.invoke).toHaveBeenCalledWith('runtime:checkUpdated')\n expect(ipcRenderer.invoke).toHaveBeenCalledWith('clipboard:clearAfter', {\n text: 'secret',\n delayMs: 30000\n })\n })\n\n it('routes vaultInvoke through ipcRenderer.invoke with payload', async () => {\n const { ipcRenderer } = require('electron')\n\n await window.electronAPI.vaultInvoke('doSomething', { foo: 'bar' })\n\n expect(ipcRenderer.invoke).toHaveBeenCalledWith('vault:invoke', {\n method: 'doSomething',\n args: { foo: 'bar' }\n })\n })\n\n it('subscribes and unsubscribes to runtime updating events', () => {\n const { ipcRenderer } = require('electron')\n const cb = jest.fn()\n\n const unsubscribe = window.electronAPI.onRuntimeUpdating(cb)\n\n expect(ipcRenderer.on).toHaveBeenCalledTimes(1)\n const [channel, handler] = ipcRenderer.on.mock.calls[0]\n expect(channel).toBe('runtime:updating')\n expect(typeof handler).toBe('function')\n\n // When unsubscribe is called, it should remove the same handler\n unsubscribe()\n expect(ipcRenderer.removeListener).toHaveBeenCalledWith(\n 'runtime:updating',\n handler\n )\n })\n\n it('subscribes and unsubscribes to runtime updated events', () => {\n const { ipcRenderer } = require('electron')\n const cb = jest.fn()\n\n const unsubscribe = window.electronAPI.onRuntimeUpdated(cb)\n\n expect(ipcRenderer.on).toHaveBeenCalledTimes(1)\n const [channel, handler] = ipcRenderer.on.mock.calls[0]\n expect(channel).toBe('runtime:updated')\n expect(typeof handler).toBe('function')\n\n unsubscribe()\n expect(ipcRenderer.removeListener).toHaveBeenCalledWith(\n 'runtime:updated',\n handler\n )\n })\n\n it('subscribes and unsubscribes to vault update events', () => {\n const { ipcRenderer } = require('electron')\n const cb = jest.fn()\n\n const unsubscribe = window.electronAPI.vaultOnUpdate(cb)\n\n expect(ipcRenderer.on).toHaveBeenCalledTimes(1)\n const [channel, handler] = ipcRenderer.on.mock.calls[0]\n expect(channel).toBe('vault:update')\n expect(typeof handler).toBe('function')\n\n unsubscribe()\n expect(ipcRenderer.removeListener).toHaveBeenCalledWith(\n 'vault:update',\n handler\n )\n })\n})\n" }, { "path": "electron/runtime-config.cjs", "content": "/**\n * Pear runtime config for P2P OTA updates.\n */\nconst fs = require('fs')\nconst path = require('path')\n\nconst pkg = require('../package.json')\n\nfunction readDesignVersion() {\n try {\n const flagsPath = path.join(\n __dirname,\n '..',\n 'node_modules',\n '@tetherto/pearpass-lib-constants',\n 'src',\n 'constants',\n 'flags.js'\n )\n const content = fs.readFileSync(flagsPath, 'utf8')\n const match = content.match(/DESKTOP_DESIGN_VERSION\\s*=\\s*(\\d+)/)\n return match ? Number(match[1]) : 1\n } catch {\n return 1\n }\n}\nmodule.exports = {\n upgrade: pkg.upgrade || null,\n version: pkg.version ?? 0,\n productName: pkg.productName ?? pkg.name ?? 'PearPass',\n legacyChannelLink: pkg.legacyChannelLink || null,\n designVersion: readDesignVersion()\n}\n" }, { "path": "electron-builder.linux.json", "content": "{\n \"appId\": \"com.pears.pass\",\n \"icon\": \"assets/linux/icon.png\",\n \"asar\": false,\n \"directories\": {\n \"output\": \"out\"\n },\n \"files\": [\n \"electron/**/*\",\n \"dist/**/*\",\n \"index.html\",\n \"index.js\",\n \"packages/**/*\",\n \"assets/**/*\",\n \"src/utils/**/*\",\n \"!**/node_modules/react-native/**/*\",\n \"!**/node_modules/@react-native/**/*\"\n ],\n \"extraResources\": [\n {\n \"from\": \"assets\",\n \"to\": \"assets\"\n },\n {\n \"from\": \"resources/bin\",\n \"to\": \"bin\"\n }\n ],\n \"linux\": {\n \"icon\": \"assets/linux/icon.png\",\n \"target\": [\n \"AppImage\"\n ],\n \"artifactName\": \"${productName}.${ext}\"\n },\n \"toolsets\": {\n \"appimage\": \"1.0.2\"\n },\n \"afterPack\": \"scripts/afterPack.cjs\"\n}\n" }, { "path": "electron-builder.mac.json", "content": "{\n \"appId\": \"com.pears.pass\",\n \"icon\": \"assets/darwin/icon.png\",\n \"asar\": false,\n \"directories\": {\n \"output\": \"out\"\n },\n \"files\": [\n \"electron/**/*\",\n \"dist/**/*\",\n \"index.html\",\n \"index.js\",\n \"packages/**/*\",\n \"assets/**/*\",\n \"src/utils/**/*\",\n \"!**/node_modules/react-native/**/*\",\n \"!**/node_modules/@react-native/**/*\"\n ],\n \"extraResources\": [\n {\n \"from\": \"assets\",\n \"to\": \"assets\"\n },\n {\n \"from\": \"resources/bin\",\n \"to\": \"bin\"\n }\n ],\n \"mac\": {\n \"category\": \"public.app-category.utilities\",\n \"icon\": \"assets/darwin/icon.png\",\n \"target\": \"dmg\",\n \"hardenedRuntime\": true,\n \"gatekeeperAssess\": false\n },\n \"afterSign\": \"scripts/notarize.cjs\",\n \"afterPack\": \"scripts/afterPack.cjs\",\n \"dmg\": {}\n}\n" }, { "path": "eslint.config.js", "content": "import { eslintConfig } from '@tetherto/tether-dev-docs'\nimport globals from 'globals'\n\nexport default [\n { ignores: ['src/PearPass/**'] },\n ...eslintConfig,\n {\n files: ['**/*.test.{js,jsx,mjs,cjs,ts,tsx}'],\n languageOptions: {\n globals: globals.jest\n }\n },\n {\n files: ['**/*.{js,jsx,mjs,cjs}'],\n rules: {\n 'no-unused-vars': [\n 'error',\n {\n varsIgnorePattern: '^React$',\n ignoreRestSiblings: true\n }\n ]\n }\n },\n {\n files: ['**/*.{ts,tsx}'],\n rules: {\n '@typescript-eslint/no-unused-vars': [\n 'error',\n {\n argsIgnorePattern: '^_',\n varsIgnorePattern: '^React$',\n ignoreRestSiblings: true\n }\n ]\n }\n }\n]\n" }, { "path": "flatpak/appimage/.gitkeep", "content": "" }, { "path": "flatpak/com.pears.pass.desktop", "content": "[Desktop Entry]\nName=PearPass\nGenericName=Password Manager\nComment=A secure, decentralized and fully local password manager\nExec=pearpass %U\nIcon=com.pears.pass\nTerminal=false\nType=Application\nCategories=Utility;Security;\nKeywords=password;manager;vault;security;credentials;encryption;sync;\nStartupNotify=true\nStartupWMClass=PearPass\nMimeType=x-scheme-handler/pearpass;\n\n" }, { "path": "flatpak/com.pears.pass.metainfo.xml", "content": "\n\n\n com.pears.pass\n\n PearPass\n A secure, decentralized and fully local password manager\n\n \n Tether Data S.A. de C.V.\n \n\n CC0-1.0\n Apache-2.0\n\n https://pearpass.io\n https://github.com/tetherto/pearpass-app-desktop/issues\n https://github.com/tetherto/pearpass-app-desktop\n\n \n

\n PearPass is a distributed password manager powered by Pear Runtime. It provides\n secure storage of passwords, credit card details, and secure notes, with the\n ability to distribute and synchronize data across multiple devices.\n

\n

Features:

\n
    \n
  • Secure password, identity, credit card, notes, and custom fields storage
    • \n
  • Cross-device and cross-platform synchronization
    • \n
  • Offline access to your credentials
    • \n
  • Strong encryption for data security
    • \n
  • Password strength analysis
    • \n
  • Random password generator
    • \n
  • Easy-to-use interface
    • \n
  • Fully decentralized - your data stays on your devices
    • \n
\n \n\n com.pears.pass.desktop\n\n \n #4CAF50\n #1F2430\n \n\n \n \n \n Main vault view with password entries\n https://pearpass.io/screenshots/vault-view.png\n \n \n Password generator with strength indicator\n https://pearpass.io/screenshots/password-generator.png\n \n \n Secure notes and custom fields\n https://pearpass.io/screenshots/secure-notes.png\n \n \n\n \n\n \n \n \n \n

Latest stable release of PearPass.

\n \n \n \n \n

Initial release of PearPass password manager.

\n
    \n
  • Secure password storage with encryption
    • \n
  • Credit card and secure notes support
    • \n
  • Cross-device synchronization via Pear Runtime
    • \n
  • Password strength analysis and generator
    • \n
\n \n \n \n\n \n Utility\n Security\n \n\n \n password\n password manager\n security\n vault\n credentials\n encryption\n sync\n decentralized\n p2p\n pear\n \n\n \n pearpass\n \n\n \n 768\n \n\n \n keyboard\n pointing\n \n\n \n offline-only\n \n\n\n" }, { "path": "flatpak/com.pears.pass.yaml", "content": "app-id: com.pears.pass\nruntime: org.gnome.Platform\nruntime-version: '49'\nsdk: org.gnome.Sdk\ncommand: pearpass\n\nfinish-args:\n - --share=ipc\n - --share=network\n - --socket=x11\n - --socket=fallback-x11\n - --socket=system-bus\n - --device=dri\n - --filesystem=home\n - --filesystem=xdg-config/pear:create\n - --talk-name=org.freedesktop.Notifications\n - --talk-name=org.freedesktop.secrets\n - --system-talk-name=org.freedesktop.DBus\n - --system-talk-name=org.bluez\n - --system-talk-name=org.freedesktop.UPower\n\nmodules:\n - name: pearpass\n buildsystem: simple\n build-commands:\n # ── Extract AppImage ──────────────────────────────────────────────\n - chmod +x PearPass.AppImage\n - ./PearPass.AppImage --appimage-extract\n\n # ── Install extracted AppImage payload ────────────────────────────\n - mkdir -p /app/lib/pearpass\n - cp -a squashfs-root/. /app/lib/pearpass/\n\n # ── Install wrapper script ────────────────────────────────────────\n - mkdir -p /app/bin\n - |\n cat > /app/bin/pearpass <<'WRAPPER'\n #!/bin/sh\n APP_ROOT=\"/app/lib/pearpass\"\n export LD_LIBRARY_PATH=\"$APP_ROOT${LD_LIBRARY_PATH:+:$LD_LIBRARY_PATH}\"\n # Force X11 backend: Wayland auto-detection inside the flatpak sandbox\n # is unreliable and was producing a black window on CI-built bundles.\n # X11 works natively on X11 sessions and via XWayland on Wayland sessions.\n export GDK_BACKEND=x11\n cd \"$APP_ROOT\"\n exec \"$APP_ROOT/pearpass-app-desktop\" \\\n --no-sandbox \\\n --disable-gpu \\\n --disable-gpu-sandbox \\\n --disable-dev-shm-usage \\\n --enable-features=UseOzonePlatform \\\n --ozone-platform=x11 \\\n \"$@\"\n WRAPPER\n - chmod +x /app/bin/pearpass\n\n # ── Native messaging host entry point ────────────────────────────\n # Invoked via `flatpak run --command=pearpass-native-host com.pears.pass`\n # by the host-side wrapper script that Chrome's Native Messaging API\n # launches. Runs the bridge bundle through Electron's embedded Node.\n - |\n cat > /app/bin/pearpass-native-host <<'NMHOST'\n #!/bin/sh\n # Call the Electron binary directly, bypassing the pearpass-app-desktop\n # shell launcher which unconditionally injects --no-sandbox. Under\n # ELECTRON_RUN_AS_NODE=1 the binary runs as Node and rejects that flag,\n # causing Chrome to see \"Native host has exited\".\n APP_ROOT=\"/app/lib/pearpass\"\n export LD_LIBRARY_PATH=\"$APP_ROOT${LD_LIBRARY_PATH:+:$LD_LIBRARY_PATH}\"\n export ELECTRON_RUN_AS_NODE=1\n exec \"$APP_ROOT/pearpass-app-desktop.bin\" \\\n \"$APP_ROOT/resources/app/dist/native-messaging-bridge.bundle.cjs\" \\\n \"$@\"\n NMHOST\n - chmod +x /app/bin/pearpass-native-host\n\n # ── Desktop integration ───────────────────────────────────────────\n - install -Dm644 com.pears.pass.desktop /app/share/applications/com.pears.pass.desktop\n - install -Dm644 com.pears.pass.metainfo.xml /app/share/metainfo/com.pears.pass.metainfo.xml\n\n # ── Install icon (pre-resized to 512x512 by build script) ────────\n - install -Dm644 icon-512.png /app/share/icons/hicolor/512x512/apps/com.pears.pass.png\n\n sources:\n - type: file\n path: appimage/PearPass.AppImage\n - type: file\n path: com.pears.pass.desktop\n - type: file\n path: com.pears.pass.metainfo.xml\n - type: file\n path: icon-512.png\n\n" }, { "path": "forge.config.cjs", "content": "const fs = require('fs')\nconst path = require('path')\n\nconst { isWindows } = require('which-runtime')\n\nconst pkg = require('./package.json')\n\nconst appName = pkg.productName ?? pkg.name\n\nfunction getWindowsKitVersion() {\n const programFiles =\n process.env['PROGRAMFILES(X86)'] || process.env.PROGRAMFILES\n if (!programFiles) return undefined\n const kitsDir = path.join(programFiles, 'Windows Kits')\n try {\n for (const kit of fs.readdirSync(kitsDir).sort().reverse()) {\n const binDir = path.join(kitsDir, kit, 'bin')\n if (!fs.existsSync(binDir)) continue\n const version = fs\n .readdirSync(binDir)\n .filter((d) => /^\\d+\\.\\d+\\.\\d+\\.\\d+$/.test(d))\n .sort()\n .pop()\n if (version) return version\n }\n } catch {\n return undefined\n }\n}\n\nconst packagerConfig = {\n icon: path.join(__dirname, 'assets', 'win32', 'icon'),\n protocols: [{ name: appName, schemes: [pkg.name] }],\n derefSymlinks: true,\n ignore: [\n // RN deps — bundled by esbuild, never required at runtime\n /(^|\\/)node_modules\\/react-native(\\/|$)/,\n /(^|\\/)node_modules\\/@react-native(\\/|$)/,\n /^\\/e2e($|\\/)/,\n /^\\/docs($|\\/)/,\n ]\n}\n\n/** @type {import('@electron-forge/shared-types').ForgeConfig} */\nmodule.exports = {\n packagerConfig,\n\n makers: [\n {\n name: '@electron-forge/maker-msix',\n config: {\n appManifest: path.join(\n __dirname,\n 'build-assets',\n 'win',\n 'AppxManifest.xml'\n ),\n packageAssets: path.join(__dirname, 'build-assets', 'icon'),\n createPri: false,\n windowsKitVersion: getWindowsKitVersion(),\n manifestVariables: {\n publisher:\n 'CN="Tether Operations, SA de CV", O="Tether Operations, SA de CV", L=San Salvador, C=SV, SERIALNUMBER=2025120324, OID.2.5.4.15=Private Organization, OID.1.3.6.1.4.1.311.60.2.1.3=SV'\n },\n windowsSignOptions: {\n certificateSha1: '874b95fdc8a490a3d3bab28643902948b2c7ad43',\n signWithParams: '/sha1 874b95fdc8a490a3d3bab28643902948b2c7ad43',\n timestampServer: 'http://timestamp.digicert.com',\n fileDigestAlgorithm: 'sha256',\n timestampDigestAlgorithm: 'sha256'\n }\n }\n }\n ],\n\n hooks: {\n preMake: async (_config, options) => {\n const targetArch = options?.arch || process.arch\n const msixArch = targetArch === 'arm64' ? 'arm64' : 'x64'\n\n const pkgJson = JSON.parse(\n fs.readFileSync(path.resolve('package.json'), 'utf8')\n )\n const [major, minor, patch] = pkgJson.version\n .split('-')[0]\n .split('.')\n .map(Number)\n const msixVersion = `${major}.${minor}.${patch}.0`\n const manifestPath = path.resolve('build-assets/win/AppxManifest.xml')\n const manifest = fs.readFileSync(manifestPath, 'utf8')\n fs.writeFileSync(\n manifestPath,\n manifest\n .replace(/Version=\"\\d+\\.\\d+\\.\\d+\\.\\d+\"/, `Version=\"${msixVersion}\"`)\n .replace(\n /ProcessorArchitecture=\"\\w+\"/,\n `ProcessorArchitecture=\"${msixArch}\"`\n )\n )\n },\n postMake: async (forgeConfig, results) => {\n for (const result of results) {\n if (result.platform !== 'win32') continue\n for (let i = 0; i < result.artifacts.length; i++) {\n const artifact = result.artifacts[i]\n if (!artifact.endsWith('.msix')) continue\n const dir = path.dirname(artifact)\n const ext = path.extname(artifact)\n const base = path.basename(artifact, ext)\n const renamed = path.join(dir, `${base}-${result.arch}${ext}`)\n fs.renameSync(artifact, renamed)\n result.artifacts[i] = renamed\n }\n }\n },\n readPackageJson: async (forgeConfig, packageJson) => {\n if (process.env.PEARPASS_UPGRADE_LINK) {\n packageJson.upgrade = process.env.PEARPASS_UPGRADE_LINK\n }\n if (process.env.PEARPASS_LEGACY_CHANNEL_LINK) {\n packageJson.legacyChannelLink = process.env.PEARPASS_LEGACY_CHANNEL_LINK\n }\n if (process.env.BUILD_VERSION) {\n packageJson.version = process.env.BUILD_VERSION\n }\n return packageJson\n }\n },\n\n plugins: [\n {\n name: 'electron-forge-plugin-universal-prebuilds',\n config: {}\n },\n {\n name: 'electron-forge-plugin-prune-prebuilds',\n config: {}\n }\n ]\n}\n" }, { "path": "index.html", "content": "\n\n \n
\n \n \n \n \n \n\n" }, { "path": "index.js", "content": "import Runtime from 'pear-electron'\nimport Bridge from 'pear-bridge'\n\nconst bridge = new Bridge({ waypoint: '/index.html' })\nawait bridge.ready()\n\nconst runtime = new Runtime()\nconst pipe = await runtime.start({ bridge })\npipe.on('close', () => Pear.exit())\n\nPear.teardown(() => pipe.destroy())\n" }, { "path": "jest.config.js", "content": "export default {\n testEnvironment: 'jsdom',\n transform: {\n '^.+\\\\.[jt]sx?$': 'babel-jest'\n },\n moduleNameMapper: {\n '^@tetherto/pearpass-lib-ui-theme-provider$':\n '/node_modules/@tetherto/pearpass-lib-ui-theme-provider/src/index.js',\n '^pearpass-lib-ui-theme-provider$':\n '/node_modules/@tetherto/pearpass-lib-ui-theme-provider/src/index.js'\n },\n testPathIgnorePatterns: [\n '/node_modules/',\n '/.yalc/',\n '/packages/',\n '/e2e/',\n '/dist/'\n ],\n transformIgnorePatterns: [\n 'node_modules/(?!(htm|react-strict-dom|@tetherto/pearpass-lib-ui-theme-provider|@tetherto/pearpass-lib-ui-react-components|@tetherto/pear-apps-lib-ui-react-hooks|@tetherto/pear-apps-utils-validator|@tetherto/pearpass-lib-vault|@tetherto/pearpass-lib-vault-core|@tetherto/pearpass-lib-ui-kit|@tetherto/pearpass-utils-password-check|@tetherto/pearpass-utils-password-generator|@tetherto/pear-apps-utils-pattern-search|@tetherto/pear-apps-utils-avatar-initials|@tetherto/pear-apps-lib-feedback|@tetherto/pear-apps-utils-generate-unique-id|@tetherto/pearpass-lib-constants|@tetherto/pear-apps-utils-date|@tetherto/pear-apps-utils-qr)/)'\n ],\n globals: {\n Pear: {\n config: { tier: 'dev' }\n }\n }\n}\n" }, { "path": "lingui.config.js", "content": "import { defineConfig } from '@lingui/cli'\nimport { formatter } from '@lingui/format-json'\n\nexport default defineConfig({\n locales: ['en'],\n sourceLocale: 'en',\n catalogs: [\n {\n path: './src/locales/{locale}/messages',\n include: ['./src'],\n exclude: [\n './src/native-messaging-bridge/node_modules/**',\n './src/PearPass/**'\n ]\n }\n ],\n format: formatter({ style: 'minimal' }),\n compileNamespace: 'es'\n})\n" }, { "path": "package.json", "content": "{\n \"name\": \"pearpass-app-desktop\",\n \"productName\": \"PearPass\",\n \"version\": \"2.0.0\",\n \"description\": \"PearPass password manager\",\n \"author\": \"PearPass\",\n \"main\": \"electron/main.cjs\",\n \"upgrade\": \"pear://dbkezmhetxwo95ab1kcojfraw1eryzf7kex5cahykf6b9c3amd6o\",\n \"legacyChannelLink\": \"pear://tywsat7gz8m65ejx4zjn3773pbdc4j8m66tukis8dgzekraymtzo\",\n \"build\": {\n \"appId\": \"com.pears.pass\",\n \"icon\": \"assets/darwin/icon.png\",\n \"asar\": false,\n \"files\": [\n \"electron/**/*\",\n \"dist/**/*\",\n \"index.html\",\n \"index.js\",\n \"packages/**/*\",\n \"assets/**/*\",\n \"src/utils/**/*\"\n ],\n \"extraResources\": [\n {\n \"from\": \"assets\",\n \"to\": \"assets\"\n },\n {\n \"from\": \"resources/bin\",\n \"to\": \"bin\"\n }\n ],\n \"mac\": {\n \"category\": \"public.app-category.utilities\",\n \"icon\": \"assets/darwin/icon.png\",\n \"target\": \"dmg\",\n \"hardenedRuntime\": true,\n \"gatekeeperAssess\": false\n },\n \"afterSign\": \"scripts/notarize.cjs\",\n \"afterPack\": \"scripts/afterPack.cjs\",\n \"dmg\": {},\n \"linux\": {\n \"icon\": \"assets/linux/icon.png\",\n \"target\": [\n \"AppImage\"\n ],\n \"artifactName\": \"${productName}.${ext}\"\n },\n \"toolsets\": {\n \"appimage\": \"1.0.2\"\n },\n \"publish\": [\n {\n \"provider\": \"github\",\n \"owner\": \"tetherto\",\n \"repo\": \"pearpass-app-desktop\"\n }\n ]\n },\n \"pear\": {\n \"name\": \"pearpass-app-desktop\",\n \"routes\": \".\",\n \"unrouted\": [\n \"/packages/pearpass-lib-vault-core/src/worklet/app.js\"\n ],\n \"gui\": {\n \"backgroundColor\": \"#1F2430\",\n \"height\": \"1024\",\n \"width\": \"1440\",\n \"minWidth\": \"816\"\n },\n \"links\": [\n \"https://hooks.slack.com/services/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\",\n \"https://docs.google.com/forms/d/e/1FAIpQLScLltvRe64VzMDRzOVjGtHWZ3KafLC2zzvkEoJfTzJkFd67OA/*\"\n ],\n \"stage\": {\n \"entrypoints\": [],\n \"prefetch\": [\n \"assets\",\n \"resources\"\n ],\n \"ignore\": [\n \".github\",\n \"appling\",\n \".git\",\n \".gitignore\",\n \".husky\",\n \"e2e\",\n \"scripts\",\n \"src\",\n \"tsconfig.json\",\n \"eslint.config.js\",\n \"jest.config.js\",\n \"flatpak\"\n ]\n }\n },\n \"type\": \"module\",\n \"license\": \"Apache-2.0\",\n \"scripts\": {\n \"test\": \"jest\",\n \"build:app\": \"lingui extract && lingui compile && tsc\",\n \"lint:fix\": \"eslint --fix ./src\",\n \"lint\": \"eslint ./src\",\n \"build:worklet\": \"node scripts/build.worklet.mjs\",\n \"build\": \"node scripts/build.worklet.mjs && npm run build:app && node scripts/bundle-renderer.mjs && node scripts/bundle-bridge.mjs\",\n \"build:prod\": \"cross-env NODE_ENV=production npm run build\",\n \"bundle:renderer\": \"node scripts/bundle-renderer.mjs\",\n \"bundle:bridge\": \"node scripts/bundle-bridge.mjs\",\n \"lingui:extract\": \"lingui extract\",\n \"lingui:compile\": \"lingui compile\",\n \"prepare\": \"husky\",\n \"postinstall\": \"node scripts/patch-electron-dock-name.mjs\",\n \"watch:packages\": \"nodemon --watch packages --ext js,json --exec \\\"echo 'Packages changed'\\\"\",\n \"electron\": \"electron .\",\n \"dev\": \"concurrently -n \\\"TypeScript,Bundle,Bridge,Electron\\\" -c \\\"blue,cyan,magenta,green\\\" \\\"node node_modules/typescript/bin/tsc --watch\\\" \\\"node scripts/bundle-renderer.mjs --watch\\\" \\\"node scripts/bundle-bridge.mjs --watch\\\" \\\"wait-on dist/renderer.bundle.js && electron .\\\"\",\n \"dev:reset\": \"PEARPASS_DEV_RESET=1 npm run dev\",\n \"dist:prepare:dev\": \"npm install && npm run build && npm prune --omit=dev && npm install electron --no-save\",\n \"dist:mac:arm64\": \"npx electron-builder --mac --arm64 -c electron-builder.mac.json --publish never\",\n \"dist:mac:x64\": \"npx electron-builder --mac --x64 -c electron-builder.mac.json --publish never\",\n \"dist:mac:arm64:dev\": \"SKIP_NOTARIZE=true CSC_IDENTITY_AUTO_DISCOVERY=false npm run dist:mac:arm64\",\n \"dist:mac:x64:dev\": \"SKIP_NOTARIZE=true CSC_IDENTITY_AUTO_DISCOVERY=false npm run dist:mac:x64\",\n \"dist:win:x64\": \"electron-forge make --platform=win32 --arch=x64\",\n \"dist:win:arm64\": \"electron-forge make --platform=win32 --arch=arm64\",\n \"dist:linux:x64\": \"npx electron-builder --linux --x64 -c electron-builder.linux.json --publish never\",\n \"dist:linux:arm64\": \"npx electron-builder --linux --arm64 -c electron-builder.linux.json --publish never\",\n \"make\": \"npm run build:prod && npm run dist:win:x64 && npm run dist:win:arm64\",\n \"dist:snap:x64\": \"npx electron-builder --linux snap --x64 --publish never\",\n \"dist:snap:arm64\": \"npx electron-builder --linux snap --arm64 --publish never\",\n \"dist:snap:x64:dev\": \"npm run dist:prepare:dev && dist:snap:x64 && npm install\",\n \"dist:snap:arm64:dev\": \"npm run dist:prepare:dev && dist:snap:arm64 && npm install\",\n \"pear:build:darwin:arm64\": \"npx pear-build --package=./package.json --darwin-arm64-app ./out/mac-arm64/PearPass.app --target ../pearpass-app-desktop-$npm_package_version\",\n \"pear:build:darwin:x64\": \"npx pear-build --package=./package.json --darwin-x64-app ./out/mac/PearPass.app --target ../pearpass-app-desktop-$npm_package_version\",\n \"pear:build:linux:x64\": \"npx pear-build --package=./package.json --linux-x64-app ./out/PearPass.AppImage --target ../pearpass-app-desktop-$npm_package_version\",\n \"pear:build:linux:arm64\": \"npx pear-build --package=./package.json --linux-arm64-app ./out/PearPass.AppImage --target ../pearpass-app-desktop-$npm_package_version\",\n \"pear:build:win:x64\": \"npx pear-build --package=./package.json --win32-x64-app ./out/PearPass/PearPass.msix --target ../pearpass-app-desktop-%npm_package_version%\",\n \"pear:build:win:arm64\": \"npx pear-build --package=./package.json --win32-arm64-app ./out/PearPass/PearPass.msix --target ../pearpass-app-desktop-%npm_package_version%\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"7.26.10\",\n \"@babel/preset-env\": \"7.26.9\",\n \"@babel/preset-react\": \"7.26.3\",\n \"@babel/preset-typescript\": \"^7.28.5\",\n \"@electron-forge/cli\": \"^7.6.0\",\n \"@electron-forge/maker-msix\": \"^7.6.0\",\n \"@electron/notarize\": \"^2.2.1\",\n \"@lingui/cli\": \"5.1.2\",\n \"@testing-library/dom\": \"^10.4.1\",\n \"@testing-library/jest-dom\": \"6.6.3\",\n \"@testing-library/react\": \"16.2.0\",\n \"@tetherto/tether-dev-docs\": \"git+https://github.com/tetherto/tether-dev-docs.git\",\n \"@types/node\": \"25.4.0\",\n \"@types/react\": \"19.2.7\",\n \"@types/react-dom\": \"19.2.3\",\n \"@typescript-eslint/eslint-plugin\": \"^8.46.0\",\n \"@typescript-eslint/parser\": \"^8.46.0\",\n \"@vercel/ncc\": \"0.38.3\",\n \"babel-jest\": \"29.7.0\",\n \"bare-pack\": \"1.4.8\",\n \"cmake-pear\": \"2.0.0\",\n \"concurrently\": \"9.2.1\",\n \"cross-env\": \"^10.1.0\",\n \"electron\": \"^33.0.0\",\n \"electron-builder\": \"^26.8.1\",\n \"electron-forge-plugin-prune-prebuilds\": \"^1.0.0\",\n \"electron-forge-plugin-universal-prebuilds\": \"^1.0.0\",\n \"electron-reload\": \"^2.0.0-alpha.1\",\n \"esbuild\": \"^0.24.2\",\n \"eslint\": \"^9.39.3\",\n \"eslint-config-prettier\": \"9.1.0\",\n \"eslint-plugin-eslint-plugin\": \"6.4.0\",\n \"eslint-plugin-import\": \"2.31.0\",\n \"eslint-plugin-prettier\": \"5.2.1\",\n \"eslint-plugin-react\": \"7.37.4\",\n \"globals\": \"15.14.0\",\n \"husky\": \"9.1.7\",\n \"jest\": \"29.7.0\",\n \"jest-environment-jsdom\": \"29.7.0\",\n \"nodemon\": \"^3.0.0\",\n \"patch-package\": \"^8.0.1\",\n \"pear-build\": \"^1.1.0\",\n \"pear-interface\": \"1.0.0\",\n \"pear-runtime-updater\": \"^3.0.10\",\n \"prettier\": \"3.4.2\",\n \"typescript\": \"5.9.3\",\n \"wait-on\": \"^8.0.0\",\n \"which-runtime\": \"^1.3.2\"\n },\n \"dependencies\": {\n \"@lingui/core\": \"5.1.2\",\n \"@lingui/format-json\": \"5.1.2\",\n \"@lingui/macro\": \"5.1.2\",\n \"@lingui/react\": \"5.1.2\",\n \"@rive-app/react-webgl2\": \"^4.28.1\",\n \"@tetherto/pear-apps-lib-feedback\": \"git+https://github.com/tetherto/pear-apps-lib-feedback.git\",\n \"@tetherto/pear-apps-lib-ui-react-hooks\": \"git+https://github.com/tetherto/pear-apps-lib-ui-react-hooks.git\",\n \"@tetherto/pear-apps-utils-avatar-initials\": \"git+https://github.com/tetherto/pear-apps-utils-avatar-initials.git\",\n \"@tetherto/pear-apps-utils-date\": \"git+https://github.com/tetherto/pear-apps-utils-date.git\",\n \"@tetherto/pear-apps-utils-generate-unique-id\": \"git+https://github.com/tetherto/pear-apps-utils-generate-unique-id.git\",\n \"@tetherto/pear-apps-utils-pattern-search\": \"git+https://github.com/tetherto/pear-apps-utils-pattern-search.git\",\n \"@tetherto/pear-apps-utils-qr\": \"git+https://github.com/tetherto/pear-apps-utils-qr.git\",\n \"@tetherto/pear-apps-utils-validator\": \"git+https://github.com/tetherto/pear-apps-utils-validator.git\",\n \"@tetherto/pearpass-lib-constants\": \"git+https://github.com/tetherto/pearpass-lib-constants.git\",\n \"@tetherto/pearpass-lib-data-export\": \"git+https://github.com/tetherto/pearpass-lib-data-export.git\",\n \"@tetherto/pearpass-lib-data-import\": \"git+https://github.com/tetherto/pearpass-lib-data-import.git\",\n \"@tetherto/pearpass-lib-native-messaging-bridge\": \"git+https://github.com/tetherto/pearpass-lib-native-messaging-bridge.git\",\n \"@tetherto/pearpass-lib-ui-kit\": \"git+https://github.com/tetherto/pearpass-lib-ui-react-native-components.git#52a0203fac624124e214ffa965eccb840c48d715\",\n \"@tetherto/pearpass-lib-ui-theme-provider\": \"git+https://github.com/tetherto/pearpass-lib-ui-theme-provider.git\",\n \"@tetherto/pearpass-lib-vault\": \"git+https://github.com/tetherto/pearpass-lib-vault.git\",\n \"@tetherto/pearpass-lib-vault-core\": \"git+https://github.com/tetherto/pearpass-lib-vault-core.git#de5403042d35c6f200c37c10c28adfc3c82151b1\",\n \"@tetherto/pearpass-utils-password-check\": \"git+https://github.com/tetherto/pearpass-utils-password-check.git\",\n \"@tetherto/pearpass-utils-password-generator\": \"git+https://github.com/tetherto/pearpass-utils-password-generator.git\",\n \"autopass\": \"~3.3.0\",\n \"bare-os\": \"3.6.2\",\n \"bare-subprocess\": \"5.2.1\",\n \"buffer\": \"6.0.3\",\n \"compact-encoding\": \"2.18.0\",\n \"dotenv\": \"17.2.1\",\n \"electron-updater\": \"^6.8.3\",\n \"htm\": \"3.1.1\",\n \"hyperblobs\": \"^2.11.1\",\n \"hyperdht\": \"^6.29.6\",\n \"hyperdrive\": \"^13.3.2\",\n \"jszip\": \"3.10.1\",\n \"mirror-drive\": \"^1.14.1\",\n \"pear-aliases\": \"1.0.6\",\n \"pear-bridge\": \"1.2.4\",\n \"pear-electron\": \"1.7.25-rc.0\",\n \"pear-ipc\": \"6.4.0\",\n \"pear-run\": \"1.0.5\",\n \"pear-runtime\": \"^1.1.1\",\n \"pear-runtime-legacy-storage\": \"^1.1.0\",\n \"react\": \"19.1.0\",\n \"react-dom\": \"19.1.0\",\n \"styled-components\": \"6.1.19\"\n },\n \"optionalDependencies\": {\n \"@esbuild/win32-x64\": \"0.24.2\"\n },\n \"overrides\": {\n \"@xmldom/xmldom\": \"^0.8.10\",\n \"react\": \"19.1.0\",\n \"react-dom\": \"19.1.0\",\n \"electron-windows-msix\": \"git+https://github.com/chetasr/electron-windows-msix.git\"\n }\n}\n" }, { "path": "scripts/afterPack.cjs", "content": "#!/usr/bin/env node\n/**\n * Electron-builder afterPack hook.\n *\n * 1. Prune native `prebuilds/-` dirs that don't match the\n * current target. Native modules in the bare/holepunch ecosystem ship\n * prebuilds for every platform (darwin/linux/win32/android/ios × x64/arm64\n * + simulators).\n *\n * 2. Linux only: remove chrome-sandbox (squashfs/AppImage cannot preserve\n * SUID bits, so Chromium's setuid sandbox probe crashes before Node.js\n * even starts) and wrap the real Electron binary with a shell script that\n * passes --no-sandbox. app.commandLine.appendSwitch('no-sandbox') in\n * main.cjs is too late — Chromium's zygote sandbox decision happens\n * before Node.js initializes. The wrapper ensures --no-sandbox reaches\n * Chromium at process start.\n */\nconst fs = require('fs')\nconst fsp = require('fs/promises')\nconst path = require('path')\n\nconst ARCH_NAMES = {\n 0: 'ia32',\n 1: 'x64',\n 2: 'armv7l',\n 3: 'arm64',\n 4: 'universal'\n}\n\nexports.default = async function afterPack(context) {\n await prunePrebuilds(context)\n\n if (context.electronPlatformName === 'linux') {\n await wrapLinuxNoSandbox(context)\n }\n}\n\nasync function prunePrebuilds(context) {\n const { appOutDir, electronPlatformName, arch, packager } = context\n const archName = ARCH_NAMES[arch] ?? String(arch)\n const target = `${electronPlatformName}-${archName}`\n\n let appRoot\n if (electronPlatformName === 'darwin' || electronPlatformName === 'mas') {\n const appName = packager.appInfo.productFilename\n appRoot = path.join(\n appOutDir,\n `${appName}.app`,\n 'Contents',\n 'Resources',\n 'app'\n )\n } else {\n appRoot = path.join(appOutDir, 'resources', 'app')\n }\n\n const nodeModules = path.join(appRoot, 'node_modules')\n if (!fs.existsSync(nodeModules)) {\n console.warn(\n `afterPack: node_modules not found at ${nodeModules}, skipping prune`\n )\n return\n }\n\n const stats = { kept: 0, removed: 0, bytes: 0 }\n await pruneTree(appRoot, target, stats)\n\n const mb = (stats.bytes / (1024 * 1024)).toFixed(1)\n console.log(\n `afterPack: pruned ${stats.removed} prebuild dir(s), kept ${stats.kept} ` +\n `matching '${target}'/-universal, freed ~${mb} MB`\n )\n}\n\nasync function pruneTree(base, target, stats) {\n await pruneOneLevel(path.join(base, 'prebuilds'), target, stats)\n\n const nm = path.join(base, 'node_modules')\n const entries = await safeReadDir(nm)\n await Promise.all(\n entries.map(async (entry) => {\n if (!entry.isDirectory()) return\n const full = path.join(nm, entry.name)\n if (entry.name.startsWith('@')) {\n const subs = await safeReadDir(full)\n await Promise.all(\n subs.map((sub) =>\n sub.isDirectory()\n ? pruneTree(path.join(full, sub.name), target, stats)\n : null\n )\n )\n } else {\n await pruneTree(full, target, stats)\n }\n })\n )\n}\n\nasync function pruneOneLevel(dir, target, stats) {\n const entries = await safeReadDir(dir)\n for (const entry of entries) {\n if (!entry.isDirectory()) continue\n if (entry.name === target || entry.name.endsWith('-universal')) {\n stats.kept++\n continue\n }\n const full = path.join(dir, entry.name)\n stats.bytes += await dirSize(full)\n await fsp.rm(full, { recursive: true, force: true })\n stats.removed++\n }\n}\n\nasync function safeReadDir(dir) {\n try {\n return await fsp.readdir(dir, { withFileTypes: true })\n } catch {\n return []\n }\n}\n\nasync function dirSize(dir) {\n let total = 0\n const stack = [dir]\n while (stack.length) {\n const d = stack.pop()\n let entries\n try {\n entries = await fsp.readdir(d, { withFileTypes: true })\n } catch {\n continue\n }\n for (const e of entries) {\n const full = path.join(d, e.name)\n try {\n if (e.isDirectory()) stack.push(full)\n else {\n const s = await fsp.stat(full)\n total += (s.blocks ?? 0) * 512 || s.size\n }\n } catch {}\n }\n }\n return total\n}\n\nasync function wrapLinuxNoSandbox(context) {\n const appOutDir = context.appOutDir\n\n // 1. Remove chrome-sandbox (cannot work inside squashfs / AppImage)\n const sandboxBin = path.join(appOutDir, 'chrome-sandbox')\n if (fs.existsSync(sandboxBin)) {\n fs.unlinkSync(sandboxBin)\n console.log(`afterPack: removed ${sandboxBin}`)\n }\n\n // 2. Wrap the real binary so --no-sandbox is on the command line\n // before Chromium's early startup\n const execName = context.packager.executableName\n const realBin = path.join(appOutDir, execName)\n const renamedBin = path.join(appOutDir, `${execName}.bin`)\n\n if (!fs.existsSync(realBin)) {\n console.warn(\n `afterPack: executable not found at ${realBin}, skipping wrapper`\n )\n return\n }\n\n fs.renameSync(realBin, renamedBin)\n\n const wrapper = [\n '#!/bin/bash',\n `exec \"$(dirname \"$(readlink -f \"$0\")\")/${execName}.bin\" --no-sandbox \"$@\"`,\n ''\n ].join('\\n')\n\n fs.writeFileSync(realBin, wrapper, { mode: 0o755 })\n console.log(`afterPack: created --no-sandbox wrapper for ${execName}`)\n}\n" }, { "path": "scripts/apply-flavor.mjs", "content": "#!/usr/bin/env node\n/**\n * Apply build-flavor branding to the working tree. CI-only: mutates icon\n * files and config files in place when PEARPASS_FLAVOR=nightly.\n *\n * Swaps nightly icons over the stable paths, rewrites productName/appId in\n * package.json + electron-builder configs, and patches the Windows MSIX\n * AppxManifest.xml identity + display names. No-op for any other flavor.\n */\nimport fs from 'fs'\nimport path from 'path'\nimport { fileURLToPath } from 'url'\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url))\nconst root = path.resolve(__dirname, '..')\n\nconst flavor = process.env.PEARPASS_FLAVOR || 'release'\nif (flavor === 'release') {\n process.exit(0)\n}\nif (flavor !== 'nightly') {\n console.error(`[apply-flavor] Unknown PEARPASS_FLAVOR=\"${flavor}\"`)\n process.exit(1)\n}\n\nconst STABLE_NAME = 'PearPass'\nconst NIGHTLY_NAME = 'PearPass-nightly'\nconst STABLE_APP_ID = 'com.pears.pass'\nconst NIGHTLY_APP_ID = 'com.pears.pass.nightly'\nconst MSIX_STABLE_IDENTITY = 'PearPass'\nconst MSIX_NIGHTLY_IDENTITY = 'PearPass-Nightly'\n\nconst iconSwaps = [\n ['assets/darwin/icon-nightly.png', 'assets/darwin/icon.png'],\n ['assets/linux/icon-nightly.png', 'assets/linux/icon.png'],\n ['assets/win32/icon-nightly.png', 'assets/win32/icon.png'],\n ['assets/win32/icon-nightly.ico', 'assets/win32/icon.ico'],\n ['build-assets/icon/PearPass-nightly.png', 'build-assets/icon/PearPass.png']\n]\n\nfor (const [from, to] of iconSwaps) {\n const src = path.join(root, from)\n const dst = path.join(root, to)\n if (!fs.existsSync(src)) {\n console.error(`[apply-flavor] Missing nightly asset: ${from}`)\n process.exit(1)\n }\n fs.copyFileSync(src, dst)\n console.log(`[apply-flavor] swapped ${to} <- ${from}`)\n}\n\nfunction rewriteJson(relPath, mutate) {\n const abs = path.join(root, relPath)\n const json = JSON.parse(fs.readFileSync(abs, 'utf8'))\n mutate(json)\n fs.writeFileSync(abs, JSON.stringify(json, null, 2) + '\\n', 'utf8')\n console.log(`[apply-flavor] rewrote ${relPath}`)\n}\n\nrewriteJson('package.json', (pkg) => {\n if (pkg.productName !== STABLE_NAME) {\n throw new Error(\n `[apply-flavor] package.json productName is \"${pkg.productName}\", expected \"${STABLE_NAME}\"`\n )\n }\n pkg.productName = NIGHTLY_NAME\n if (pkg.build?.appId === STABLE_APP_ID) {\n pkg.build.appId = NIGHTLY_APP_ID\n }\n})\n\nrewriteJson('electron-builder.mac.json', (cfg) => {\n if (cfg.appId === STABLE_APP_ID) cfg.appId = NIGHTLY_APP_ID\n})\nrewriteJson('electron-builder.linux.json', (cfg) => {\n if (cfg.appId === STABLE_APP_ID) cfg.appId = NIGHTLY_APP_ID\n})\n\nconst manifestPath = path.join(root, 'build-assets/win/AppxManifest.xml')\nlet manifest = fs.readFileSync(manifestPath, 'utf8')\n// Order matters: Name=\"PearPass\" is a substring of DisplayName=\"PearPass\", so\n// swap the more specific tokens first to avoid collateral rewrites.\nconst manifestSwaps = [\n [`DisplayName=\"${MSIX_STABLE_IDENTITY}\"`, `DisplayName=\"${NIGHTLY_NAME}\"`],\n [\n `${MSIX_STABLE_IDENTITY}`,\n `${NIGHTLY_NAME}`\n ],\n // electron-packager derives the .exe name from productName, so the manifest\n // must point at PearPass-nightly.exe once productName is rewritten.\n [`app\\\\${STABLE_NAME}.exe`, `app\\\\${NIGHTLY_NAME}.exe`],\n [`Alias=\"${STABLE_NAME}.exe\"`, `Alias=\"${NIGHTLY_NAME}.exe\"`],\n [`Name=\"${MSIX_STABLE_IDENTITY}\"`, `Name=\"${MSIX_NIGHTLY_IDENTITY}\"`]\n]\nfor (const [from, to] of manifestSwaps) {\n if (!manifest.includes(from)) {\n throw new Error(\n `[apply-flavor] AppxManifest.xml missing expected token: ${from}`\n )\n }\n manifest = manifest.split(from).join(to)\n}\nfs.writeFileSync(manifestPath, manifest, 'utf8')\nconsole.log('[apply-flavor] rewrote build-assets/win/AppxManifest.xml')\n\nconsole.log(`[apply-flavor] flavor=\"${flavor}\" applied`)\n" }, { "path": "scripts/build-flatpak.sh", "content": "#!/bin/bash\nset -euo pipefail\n\nSCRIPT_DIR=\"$(cd \"$(dirname \"$0\")\" && pwd)\"\nPROJECT_DIR=\"$(cd \"$SCRIPT_DIR/..\" && pwd)\"\nFLATPAK_DIR=\"$PROJECT_DIR/flatpak\"\nBUILD_DIR=\"$PROJECT_DIR/build/flatpak\"\n\nAPPIMAGE_PATH=\"\"\nARCH=\"\"\nVERSION=\"\"\n\nlog_info() { echo -e \"\\033[1;34m[INFO]\\033[0m $*\"; }\nlog_ok() { echo -e \"\\033[1;32m[OK]\\033[0m $*\"; }\nlog_error() { echo -e \"\\033[1;31m[ERROR]\\033[0m $*\"; }\n\nusage() {\n cat < [--arch arm64|x64]\n\nOptions:\n --local Path to a locally-built AppImage (required)\n --arch Target architecture (default: auto-detect)\n -h, --help Show this help message\n\nExample:\n $(basename \"$0\") --local ./dist/PearPass-1.6.0-arm64.AppImage\nEOF\n exit 0\n}\n\ndetect_arch() {\n local machine\n machine=\"$(uname -m)\"\n case \"$machine\" in\n x86_64) echo \"x64\" ;;\n aarch64|arm64) echo \"arm64\" ;;\n *) log_error \"Unsupported architecture: $machine\"; exit 1 ;;\n esac\n}\n\ncheck_prerequisites() {\n local missing=()\n command -v flatpak >/dev/null 2>&1 || missing+=(\"flatpak\")\n command -v flatpak-builder >/dev/null 2>&1 || missing+=(\"flatpak-builder\")\n\n if (( ${#missing[@]} )); then\n log_error \"Missing tools: ${missing[*]}\"\n log_error \"Install with: sudo apt install ${missing[*]}\"\n exit 1\n fi\n\n # Check runtime & SDK\n if ! flatpak info org.gnome.Platform//49 >/dev/null 2>&1; then\n log_error \"Missing org.gnome.Platform//49\"\n log_error \"Install: flatpak install flathub org.gnome.Platform//49\"\n exit 1\n fi\n if ! flatpak info org.gnome.Sdk//49 >/dev/null 2>&1; then\n log_error \"Missing org.gnome.Sdk//49\"\n log_error \"Install: flatpak install flathub org.gnome.Sdk//49\"\n exit 1\n fi\n log_ok \"Prerequisites satisfied\"\n}\n\nparse_args() {\n while [[ $# -gt 0 ]]; do\n case \"$1\" in\n --local) APPIMAGE_PATH=\"$2\"; shift 2 ;;\n --arch) ARCH=\"$2\"; shift 2 ;;\n -h|--help) usage ;;\n *) log_error \"Unknown option: $1\"; usage ;;\n esac\n done\n\n if [[ -z \"$APPIMAGE_PATH\" ]]; then\n log_error \"--local is required\"\n usage\n fi\n\n # Resolve to absolute path without requiring the parent directory to exist.\n case \"$APPIMAGE_PATH\" in\n /*) ;;\n *) APPIMAGE_PATH=\"$PWD/$APPIMAGE_PATH\" ;;\n esac\n\n if [[ ! -f \"$APPIMAGE_PATH\" ]]; then\n local fallback_out=\"$PROJECT_DIR/out/PearPass.AppImage\"\n local fallback_dist=\"$PROJECT_DIR/dist/PearPass.AppImage\"\n if [[ \"$(basename \"$APPIMAGE_PATH\")\" == \"PearPass.AppImage\" && -f \"$fallback_out\" ]]; then\n APPIMAGE_PATH=\"$fallback_out\"\n log_info \"Using detected AppImage: $APPIMAGE_PATH\"\n elif [[ \"$(basename \"$APPIMAGE_PATH\")\" == \"PearPass.AppImage\" && -f \"$fallback_dist\" ]]; then\n APPIMAGE_PATH=\"$fallback_dist\"\n log_info \"Using detected AppImage: $APPIMAGE_PATH\"\n else\n log_error \"AppImage not found: $APPIMAGE_PATH\"\n log_error \"Expected output is usually ./out/PearPass.AppImage after dist:linux build\"\n exit 1\n fi\n fi\n\n [[ -z \"$ARCH\" ]] && ARCH=\"$(detect_arch)\"\n VERSION=\"$(jq -r '.version' \"$PROJECT_DIR/package.json\")\"\n log_info \"AppImage : $APPIMAGE_PATH\"\n log_info \"Arch : $ARCH\"\n log_info \"Version : $VERSION\"\n}\n\nprepare_icon() {\n log_info \"Extracting and resizing icon from AppImage ...\"\n local tmpdir\n local src_icon=\"\"\n tmpdir=\"$(mktemp -d)\"\n cp \"$APPIMAGE_PATH\" \"$tmpdir/PearPass.AppImage\"\n chmod +x \"$tmpdir/PearPass.AppImage\"\n (cd \"$tmpdir\" && ./PearPass.AppImage --appimage-extract >/dev/null 2>&1)\n\n local dst_icon=\"$FLATPAK_DIR/icon-512.png\"\n\n for candidate in \\\n \"$tmpdir/squashfs-root/resources/assets/linux/icon.png\" \\\n \"$tmpdir/squashfs-root/usr/share/icons/PearPass.png\"\n do\n if [[ -f \"$candidate\" ]]; then\n src_icon=\"$candidate\"\n break\n fi\n done\n\n if [[ -z \"$src_icon\" ]]; then\n log_error \"Icon not found inside AppImage (checked resources/assets/linux/icon.png and usr/share/icons/PearPass.png)\"\n rm -rf \"$tmpdir\"\n exit 1\n fi\n\n # Resize to 512x512 using ffmpeg (widely available)\n if command -v ffmpeg >/dev/null 2>&1; then\n ffmpeg -y -i \"$src_icon\" -vf \"scale=512:512\" \"$dst_icon\" 2>/dev/null\n elif command -v convert >/dev/null 2>&1; then\n convert \"$src_icon\" -resize 512x512 \"$dst_icon\"\n elif command -v magick >/dev/null 2>&1; then\n magick \"$src_icon\" -resize 512x512 \"$dst_icon\"\n else\n log_error \"No image resize tool found (need ffmpeg, imagemagick convert, or magick)\"\n rm -rf \"$tmpdir\"\n exit 1\n fi\n\n rm -rf \"$tmpdir\"\n log_ok \"Icon resized to 512x512: $dst_icon\"\n}\n\nbuild_flatpak() {\n log_info \"Staging AppImage into flatpak/appimage/ ...\"\n mkdir -p \"$FLATPAK_DIR/appimage\"\n cp \"$APPIMAGE_PATH\" \"$FLATPAK_DIR/appimage/PearPass.AppImage\"\n chmod +x \"$FLATPAK_DIR/appimage/PearPass.AppImage\"\n\n log_info \"Building flatpak ...\"\n mkdir -p \"$BUILD_DIR\"\n\n flatpak-builder --force-clean \\\n --repo=\"$BUILD_DIR/repo\" \\\n \"$BUILD_DIR/build-dir\" \\\n \"$FLATPAK_DIR/com.pears.pass.yaml\"\n\n log_ok \"Build complete. Creating bundle ...\"\n\n local bundle_name=\"pearpass_${VERSION}_${ARCH}.flatpak\"\n flatpak build-bundle \\\n \"$BUILD_DIR/repo\" \\\n \"$BUILD_DIR/$bundle_name\" \\\n com.pears.pass\n\n log_ok \"Flatpak bundle: $BUILD_DIR/$bundle_name\"\n ls -lh \"$BUILD_DIR/$bundle_name\"\n}\n\ncleanup() {\n log_info \"Cleaning staging files ...\"\n rm -f \"$FLATPAK_DIR/appimage/PearPass.AppImage\"\n rm -f \"$FLATPAK_DIR/icon-512.png\"\n}\n\n# ── Main ────────────────────────────────────────────────────────────────\nparse_args \"$@\"\ncheck_prerequisites\nprepare_icon\nbuild_flatpak\ncleanup\n\nlog_ok \"Done!\"\n" }, { "path": "scripts/build-snap.sh", "content": "#!/bin/bash\nset -euo pipefail\n\nSCRIPT_DIR=\"$(cd \"$(dirname \"$0\")\" && pwd)\"\nPROJECT_DIR=\"$(cd \"$SCRIPT_DIR/..\" && pwd)\"\nSNAP_DIR=\"$PROJECT_DIR/snap\"\nLOCAL_DIR=\"$SNAP_DIR/local\"\nBUILD_DIR=\"$PROJECT_DIR/build/snap\"\n\nAPPIMAGE_PATH=\"\"\nUNPACKED_PATH=\"\"\nARCH=\"\"\nVERSION=\"\"\nSNAP_OUT=\"\"\n\nlog_info() { echo -e \"\\033[1;34m[INFO]\\033[0m $*\"; }\nlog_ok() { echo -e \"\\033[1;32m[OK]\\033[0m $*\"; }\nlog_error() { echo -e \"\\033[1;31m[ERROR]\\033[0m $*\"; }\n\nusage() {\n cat < | --local ) [--arch arm64|x64]\n\nOptions:\n --unpacked Path to electron-builder's linux-*-unpacked directory\n (preferred — skips AppImage round-trip and avoids\n mksquashfs glibc issues on newer hosts).\n --local Path to a locally-built AppImage. Used as a fallback\n when --unpacked is unavailable.\n --arch Target architecture (default: auto-detect)\n -h, --help Show this help message\n\nExamples:\n $(basename \"$0\") --unpacked ./out/linux-arm64-unpacked\n $(basename \"$0\") --local ./out/PearPass.AppImage\nEOF\n exit 0\n}\n\ndetect_arch() {\n local machine\n machine=\"$(uname -m)\"\n case \"$machine\" in\n x86_64) echo \"amd64\" ;;\n aarch64|arm64) echo \"arm64\" ;;\n *) log_error \"Unsupported architecture: $machine\"; exit 1 ;;\n esac\n}\n\ncheck_prerequisites() {\n local missing=()\n command -v snapcraft >/dev/null 2>&1 || missing+=(\"snapcraft\")\n\n if (( ${#missing[@]} )); then\n log_error \"Missing tools: ${missing[*]}\"\n log_error \"Install snapcraft: sudo snap install snapcraft --classic\"\n exit 1\n fi\n\n # snapcraft 8+ on core22 needs lxd (default) or multipass as a backend.\n if ! command -v lxd >/dev/null 2>&1 && ! command -v multipass >/dev/null 2>&1; then\n log_error \"snapcraft needs an LXD or Multipass backend\"\n log_error \" sudo snap install lxd && sudo lxd init --auto && sudo usermod -aG lxd \\$USER\"\n log_error \" (then log out and back in, or run: newgrp lxd)\"\n exit 1\n fi\n\n log_ok \"Prerequisites satisfied\"\n}\n\nparse_args() {\n while [[ $# -gt 0 ]]; do\n case \"$1\" in\n --local) APPIMAGE_PATH=\"${2:?--local requires a path}\"; shift 2 ;;\n --unpacked)\n # Bare --unpacked → auto-detect below. --unpacked → explicit.\n if [[ $# -ge 2 && \"$2\" != --* ]]; then\n UNPACKED_PATH=\"$2\"; shift 2\n else\n shift 1\n fi\n ;;\n --arch) ARCH=\"${2:?--arch requires a value}\"; shift 2 ;;\n -h|--help) usage ;;\n *) log_error \"Unknown option: $1\"; usage ;;\n esac\n done\n\n [[ -z \"$ARCH\" ]] && ARCH=\"$(detect_arch)\"\n\n if [[ -z \"$UNPACKED_PATH\" && -z \"$APPIMAGE_PATH\" ]]; then\n # Match electron-builder's naming: linux-arm64-unpacked for arm64,\n # linux-unpacked for x64.\n case \"$ARCH\" in\n arm64) arch_dir=\"linux-arm64-unpacked\" ;;\n amd64|x64) arch_dir=\"linux-unpacked\" ;;\n *) log_error \"Unsupported arch for auto-detect: $ARCH\"; exit 1 ;;\n esac\n for candidate in \"$PROJECT_DIR/out/$arch_dir\" \"$PROJECT_DIR/dist/$arch_dir\"; do\n if [[ -d \"$candidate\" ]]; then\n UNPACKED_PATH=\"$candidate\"\n log_info \"Auto-detected unpacked dir: $UNPACKED_PATH\"\n break\n fi\n done\n fi\n\n if [[ -z \"$UNPACKED_PATH\" && -z \"$APPIMAGE_PATH\" ]]; then\n log_error \"Pass --unpacked or --local \"\n usage\n fi\n\n if [[ -n \"$UNPACKED_PATH\" ]]; then\n case \"$UNPACKED_PATH\" in /*) ;; *) UNPACKED_PATH=\"$PWD/$UNPACKED_PATH\" ;; esac\n if [[ ! -d \"$UNPACKED_PATH\" ]]; then\n log_error \"Unpacked directory not found: $UNPACKED_PATH\"\n exit 1\n fi\n elif [[ -n \"$APPIMAGE_PATH\" ]]; then\n case \"$APPIMAGE_PATH\" in /*) ;; *) APPIMAGE_PATH=\"$PWD/$APPIMAGE_PATH\" ;; esac\n if [[ ! -f \"$APPIMAGE_PATH\" ]]; then\n log_error \"AppImage not found: $APPIMAGE_PATH\"\n log_error \"Build one first with: npm run dist:linux:\"\n exit 1\n fi\n fi\n\n VERSION=\"$(jq -r '.version' \"$PROJECT_DIR/package.json\")\"\n log_info \"Source : ${UNPACKED_PATH:-$APPIMAGE_PATH}\"\n log_info \"Arch : $ARCH\"\n log_info \"Version : $VERSION\"\n}\n\nstage_sources() {\n mkdir -p \"$LOCAL_DIR\"\n # Clean stale staging so unpacked/ wins deterministically over PearPass.AppImage.\n rm -rf \"$LOCAL_DIR/unpacked\" \"$LOCAL_DIR/PearPass.AppImage\"\n\n if [[ -n \"$UNPACKED_PATH\" ]]; then\n log_info \"Staging unpacked Electron payload into snap/local/unpacked/ ...\"\n # Hard-link to avoid duplicating ~1 GB on the same filesystem.\n cp -al \"$UNPACKED_PATH\" \"$LOCAL_DIR/unpacked\"\n else\n log_info \"Staging AppImage into snap/local/ ...\"\n cp \"$APPIMAGE_PATH\" \"$LOCAL_DIR/PearPass.AppImage\"\n chmod +x \"$LOCAL_DIR/PearPass.AppImage\"\n fi\n}\n\nbuild_snap() {\n log_info \"Building snap (this may take several minutes on first run) ...\"\n mkdir -p \"$BUILD_DIR\"\n\n cd \"$PROJECT_DIR\"\n # `--output ` is unreliable across snapcraft+LXD versions,\n # so we glob the result in PROJECT_DIR instead.\n snapcraft pack\n local OUT\n OUT=\"$(ls -1t \"$PROJECT_DIR\"/pearpass_*_\"${ARCH}\".snap 2>/dev/null | head -n1)\"\n if [[ -z \"$OUT\" || ! -f \"$OUT\" ]]; then\n log_error \"snapcraft reported success but no pearpass_*_${ARCH}.snap was found in $PROJECT_DIR\"\n exit 1\n fi\n SNAP_OUT=\"$BUILD_DIR/$(basename \"$OUT\")\"\n mv -f \"$OUT\" \"$SNAP_OUT\"\n\n log_ok \"Snap bundle: $SNAP_OUT\"\n ls -lh \"$SNAP_OUT\"\n}\n\ncleanup() {\n log_info \"Cleaning staging files ...\"\n rm -rf \"$LOCAL_DIR/unpacked\"\n rm -f \"$LOCAL_DIR/PearPass.AppImage\"\n}\n\n# ── Main ────────────────────────────────────────────────────────────────\nparse_args \"$@\"\ncheck_prerequisites\nstage_sources\nbuild_snap\ncleanup\n\nSNAP_NAME=\"$(awk '/^name:/ {print $2; exit}' \"$SNAP_DIR/snapcraft.yaml\")\"\nlog_ok \"Done!\"\nlog_info \"Install with:\"\nlog_info \" sudo snap install --dangerous $SNAP_OUT\"\nlog_info \" sudo snap connect ${SNAP_NAME}:browser-native-messaging\"\n" }, { "path": "scripts/build.worklet.mjs", "content": "#!/usr/bin/env node\n/* eslint-disable no-underscore-dangle */\n/**\n * Bundle the vault worklet (ESM) to CommonJS for the packaged app so Bare can run it.\n * Only worklet source is bundled; all node_modules are external so Bare resolves them at runtime\n */\nimport path from 'path'\nimport { fileURLToPath } from 'url'\n\nimport * as esbuild from 'esbuild'\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url))\nconst root = path.join(__dirname, '..')\nconst workletDir = path.join(\n root,\n 'node_modules',\n '@tetherto/pearpass-lib-vault-core',\n 'src',\n 'worklet'\n)\n\n/** Externalize any package (non-relative specifier) so node_modules are never inlined. */\nconst externalizeNodeModules = {\n name: 'externalize-node-modules',\n setup(build) {\n build.onResolve({ filter: /^[^./]/ }, (args) => {\n // Skip Windows absolute paths (e.g. C:\\, F:\\)\n if (/^[A-Za-z]:[/\\\\]/.test(args.path)) return null\n return { path: args.path, external: true }\n })\n }\n}\n\nasync function buildWorklet() {\n await esbuild.build({\n entryPoints: [path.join(workletDir, 'app.js')],\n bundle: true,\n platform: 'node',\n format: 'cjs',\n target: 'node18',\n outfile: path.join(workletDir, 'app.cjs'),\n plugins: [externalizeNodeModules],\n alias: {\n fs: 'bare-fs',\n path: 'bare-path',\n buffer: 'bare-buffer',\n crypto: 'bare-crypto',\n os: 'bare-os'\n },\n logLevel: 'info'\n })\n}\n\nbuildWorklet()\n" }, { "path": "scripts/bundle-bridge.mjs", "content": "#!/usr/bin/env node\n/**\n * Bundle the native messaging bridge into a single CJS file for Electron (ELECTRON_RUN_AS_NODE).\n * Node built-ins and pear-ipc are external: they resolve at runtime.\n */\nimport * as esbuild from 'esbuild'\nimport path from 'path'\nimport { fileURLToPath } from 'url'\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url))\nconst root = path.join(__dirname, '..')\nconst watch = process.argv.includes('--watch')\n\nconst ctx = await esbuild.context({\n entryPoints: [\n path.join(\n root,\n 'node_modules',\n '@tetherto',\n 'pearpass-lib-native-messaging-bridge',\n 'index.js'\n )\n ],\n bundle: true,\n outfile: path.join(root, 'dist', 'native-messaging-bridge.bundle.cjs'),\n platform: 'node',\n target: ['node18'],\n format: 'cjs',\n external: [\n 'fs',\n 'fs/promises',\n 'path',\n 'os',\n 'net',\n 'events',\n 'crypto',\n 'child_process',\n 'pear-ipc'\n ],\n logLevel: 'info'\n})\n\nif (watch) {\n await ctx.watch()\n console.log('Watching for changes...')\n} else {\n await ctx.rebuild()\n ctx.dispose()\n}\n" }, { "path": "scripts/bundle-renderer.mjs", "content": "#!/usr/bin/env node\n/**\n * Bundle the renderer (app.electron.tsx + deps) into a single file for Electron.\n * Node built-ins are external: they resolve at runtime in the renderer (nodeIntegration: true).\n */\nimport * as esbuild from 'esbuild'\nimport { readFile } from 'fs/promises'\nimport { createRequire } from 'module'\nimport { fileURLToPath } from 'url'\nimport path from 'path'\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url))\nconst root = path.join(__dirname, '..')\nconst watch = process.argv.includes('--watch')\nconst require = createRequire(import.meta.url)\nconst postcss = require('postcss')\nconst babel = require('@babel/core')\nconst fg = require('fast-glob')\nconst reactStrictDomPostcssPlugin = require('react-strict-dom/postcss-plugin')\nconst strictDomBabelConfig = require(path.join(root, 'babel.strict-dom.cjs'))\nconst strictDomCssInclude = [\n 'app.electron.tsx',\n 'src/**/*.{js,jsx,mjs,ts,tsx}',\n 'node_modules/@tetherto/pearpass-lib-ui-kit/dist/**/*.js'\n]\nconst strictDomRuntimePaths = [\n `${path.sep}node_modules${path.sep}react-strict-dom${path.sep}dist${path.sep}`,\n `${path.sep}node_modules${path.sep}@tetherto${path.sep}pearpass-lib-ui-kit${path.sep}dist${path.sep}`\n]\n\nfunction shouldTransformStrictDomRuntime(filePath) {\n return strictDomRuntimePaths.some((runtimePath) => filePath.includes(runtimePath))\n}\n\nfunction getLoader(filePath) {\n if (filePath.endsWith('.tsx')) return 'tsx'\n if (filePath.endsWith('.ts')) return 'ts'\n if (filePath.endsWith('.jsx')) return 'jsx'\n return 'js'\n}\n\nfunction strictDomBabelPlugin() {\n return {\n name: 'strict-dom-babel',\n setup(build) {\n build.onLoad({ filter: /\\.[cm]?[jt]sx?$/ }, async (args) => {\n if (!shouldTransformStrictDomRuntime(args.path)) return null\n\n const source = await readFile(args.path, 'utf8')\n const transformed = await babel.transformAsync(source, {\n filename: args.path,\n sourceMaps: true,\n ...strictDomBabelConfig\n })\n\n return {\n contents: transformed?.code ?? source,\n loader: getLoader(args.path),\n resolveDir: path.dirname(args.path)\n }\n })\n }\n }\n}\n\nfunction strictDomCssPlugin() {\n return {\n name: 'strict-dom-css',\n setup(build) {\n build.onLoad({ filter: /strict\\.css$/ }, async (args) => {\n const source = await readFile(args.path, 'utf8')\n const watchFiles = fg.sync(strictDomCssInclude, {\n cwd: root,\n absolute: true,\n onlyFiles: true,\n dot: false\n })\n const result = await postcss([\n reactStrictDomPostcssPlugin({\n cwd: root,\n include: strictDomCssInclude,\n babelConfig: strictDomBabelConfig,\n useCSSLayers: true\n })\n ]).process(source, { from: args.path })\n\n return {\n contents: result.css,\n loader: 'css',\n resolveDir: path.dirname(args.path),\n watchFiles\n }\n })\n }\n }\n}\n\nconst ctx = await esbuild.context({\n entryPoints: [path.join(root, 'app.electron.tsx')],\n bundle: true,\n outfile: path.join(root, 'dist', 'renderer.bundle.js'),\n platform: 'browser',\n target: ['es2020'],\n format: 'iife',\n sourcemap: true,\n define: {\n 'process.env.NODE_ENV': JSON.stringify(\n process.env.NODE_ENV || 'development'\n )\n },\n loader: {\n '.js': 'jsx',\n '.mjs': 'js'\n },\n resolveExtensions: [\n '.web.mjs',\n '.web.js',\n '.web.mts',\n '.web.ts',\n '.web.jsx',\n '.web.tsx',\n '.mjs',\n '.js',\n '.mts',\n '.ts',\n '.jsx',\n '.tsx',\n '.css',\n '.json'\n ],\n plugins: [strictDomBabelPlugin(), strictDomCssPlugin()],\n jsx: 'automatic',\n alias: {\n react: path.join(root, 'node_modules', 'react'),\n 'react-dom': path.join(root, 'node_modules', 'react-dom')\n },\n external: [\n 'fs',\n 'path',\n 'os',\n 'net',\n 'crypto',\n 'child_process',\n 'fs/promises',\n 'require-addon',\n 'fs-native-extensions',\n 'sodium-native',\n 'crypto'\n ],\n logLevel: 'info'\n})\n\nif (watch) {\n await ctx.watch()\n console.log('Watching for changes...')\n} else {\n await ctx.rebuild()\n ctx.dispose()\n}\n" }, { "path": "scripts/create-linux-tarball.sh", "content": "#!/bin/bash\n# PearPass Desktop - Create Linux tar.gz archive from AppImage\n# Creates a consistent archive structure for Flatpak/Snapcraft builds\n#\n# Usage:\n# ./scripts/create-linux-tarball.sh [--appimage PATH] [--arch x64|arm64] [--output DIR]\n#\n# Default:\n# --appimage: appling/PearPass.AppImage\n# --arch: auto-detect from current system\n# --output: build/\n\nset -euo pipefail\n\nSCRIPT_DIR=\"$(cd \"$(dirname \"${BASH_SOURCE[0]}\")\" && pwd)\"\nPROJECT_ROOT=\"$(cd \"${SCRIPT_DIR}/..\" && pwd)\"\n\n# Default values\nAPPIMAGE_PATH=\"${PROJECT_ROOT}/appling/PearPass.AppImage\"\nARCH=\"\"\nOUTPUT_DIR=\"${PROJECT_ROOT}/build\"\n\n# Colors for output\nRED='\\033[0;31m'\nGREEN='\\033[0;32m'\nYELLOW='\\033[1;33m'\nNC='\\033[0m'\n\nlog_info() { echo -e \"${GREEN}[INFO]${NC} $1\"; }\nlog_warn() { echo -e \"${YELLOW}[WARN]${NC} $1\"; }\nlog_error() { echo -e \"${RED}[ERROR]${NC} $1\"; }\n\ndetect_arch() {\n local machine=$(uname -m)\n case \"$machine\" in\n x86_64) echo \"x64\" ;;\n aarch64|arm64) echo \"arm64\" ;;\n *) log_error \"Unsupported architecture: $machine\"; exit 1 ;;\n esac\n}\n\nparse_args() {\n while [[ $# -gt 0 ]]; do\n case \"$1\" in\n --appimage)\n APPIMAGE_PATH=\"$2\"\n shift 2\n ;;\n --arch)\n ARCH=\"$2\"\n shift 2\n ;;\n --output)\n OUTPUT_DIR=\"$2\"\n shift 2\n ;;\n -h|--help)\n echo \"Usage: $0 [--appimage PATH] [--arch x64|arm64] [--output DIR]\"\n exit 0\n ;;\n *)\n log_error \"Unknown option: $1\"\n exit 1\n ;;\n esac\n done\n\n if [[ -z \"$ARCH\" ]]; then\n ARCH=$(detect_arch)\n fi\n}\n\nmain() {\n parse_args \"$@\"\n\n # Validate AppImage exists\n if [[ ! -f \"$APPIMAGE_PATH\" ]]; then\n log_error \"AppImage not found: $APPIMAGE_PATH\"\n exit 1\n fi\n\n log_info \"Using AppImage: $APPIMAGE_PATH\"\n log_info \"Target architecture: $ARCH\"\n\n # Create temp directory for extraction\n EXTRACT_DIR=$(mktemp -d)\n TARBALL_DIR=$(mktemp -d)\n trap \"rm -rf '$EXTRACT_DIR' '$TARBALL_DIR'\" EXIT\n\n # Extract AppImage\n log_info \"Extracting AppImage...\"\n cd \"$EXTRACT_DIR\"\n chmod +x \"$APPIMAGE_PATH\"\n \"$APPIMAGE_PATH\" --appimage-extract > /dev/null 2>&1\n\n # Create tarball structure\n mkdir -p \"$TARBALL_DIR/lib\"\n mkdir -p \"$TARBALL_DIR/pear-pass\"\n\n # Find and copy binary\n log_info \"Copying binary...\"\n BINARY_PATH=$(find squashfs-root -name \"pear-pass\" -type f -executable 2>/dev/null | head -n 1)\n if [[ -z \"$BINARY_PATH\" ]]; then\n BINARY_PATH=$(find squashfs-root -name \"pearpass\" -type f -executable 2>/dev/null | head -n 1)\n fi\n if [[ -n \"$BINARY_PATH\" ]]; then\n cp \"$BINARY_PATH\" \"$TARBALL_DIR/pearpass\"\n chmod +x \"$TARBALL_DIR/pearpass\"\n log_info \" Found binary: $BINARY_PATH\"\n else\n log_error \"Could not find main binary in AppImage\"\n log_info \"Available executables:\"\n find squashfs-root -type f -executable\n exit 1\n fi\n\n # Find and copy app.bundle\n log_info \"Copying app.bundle...\"\n BUNDLE_PATH=$(find squashfs-root -name \"app.bundle\" -type f 2>/dev/null | head -n 1)\n if [[ -n \"$BUNDLE_PATH\" ]]; then\n cp \"$BUNDLE_PATH\" \"$TARBALL_DIR/pear-pass/app.bundle\"\n log_info \" Found bundle: $BUNDLE_PATH\"\n else\n log_warn \"app.bundle not found in AppImage\"\n fi\n\n # Find and copy native .so libraries\n log_info \"Copying native libraries...\"\n SO_COUNT=0\n while IFS= read -r -d '' so_file; do\n cp \"$so_file\" \"$TARBALL_DIR/lib/\"\n ((SO_COUNT++))\n done < <(find squashfs-root -name \"*.so\" -type f -print0 2>/dev/null) || true\n log_info \" Copied $SO_COUNT libraries\"\n\n # Show contents\n log_info \"Archive contents:\"\n find \"$TARBALL_DIR\" -type f | sed 's|'\"$TARBALL_DIR\"'| |'\n\n # Create output directory and tarball\n mkdir -p \"$OUTPUT_DIR\"\n TARBALL_NAME=\"PearPass.linux.${ARCH}.bin.tar.gz\"\n cd \"$TARBALL_DIR\"\n tar -czvf \"$OUTPUT_DIR/$TARBALL_NAME\" . > /dev/null\n\n log_info \"Created: $OUTPUT_DIR/$TARBALL_NAME\"\n log_info \"Done!\"\n}\n\nmain \"$@\"\n\n" }, { "path": "scripts/notarize.cjs", "content": "#!/usr/bin/env node\n/**\n * Electron-builder afterSign hook: notarize the macOS app using the \"notary\" keychain profile.\n * CI must run: xcrun notarytool store-credentials \"notary\" ... before the build.\n */\nconst path = require('path')\n\nconst { notarize } = require('@electron/notarize')\n\nexports.default = async function notarizeHook(context) {\n const { electronPlatformName, appOutDir, packager } = context\n if (electronPlatformName !== 'darwin') return\n if (process.env.SKIP_NOTARIZE === 'true') {\n console.log('Skipping notarization')\n return\n }\n const appName = packager.appInfo.productFilename\n const appPath = path.join(appOutDir, `${appName}.app`)\n\n await notarize({\n appPath,\n keychainProfile: 'notary',\n tool: 'notarytool'\n })\n}\n" }, { "path": "scripts/patch-electron-dock-name.mjs", "content": "#!/usr/bin/env node\n/* eslint-disable no-underscore-dangle */\n/**\n * On macOS, make the dock show \"PearPass\" when running `electron .` in development.\n * The dock uses the .app bundle *folder name*, not Info.plist. So we:\n * 1. Rename Electron.app -> PearPass.app\n * 2. Update electron's path.txt so it launches PearPass.app\n * 3. Patch Info.plist in the renamed bundle and clear quarantine (avoid translocation)\n * Run automatically after npm install (postinstall) on darwin only.\n */\nimport { execSync } from 'child_process'\nimport fs from 'fs'\nimport path from 'path'\nimport { fileURLToPath } from 'url'\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url))\nconst root = path.resolve(__dirname, '..')\nconst dist = path.join(root, 'node_modules', 'electron', 'dist')\nconst electronApp = path.join(dist, 'Electron.app')\nconst pathTxt = path.join(root, 'node_modules', 'electron', 'path.txt')\n\nif (process.platform !== 'darwin') {\n process.exit(0)\n}\n\nlet appName = 'PearPass'\ntry {\n const pkg = JSON.parse(\n fs.readFileSync(path.join(root, 'package.json'), 'utf8')\n )\n appName = pkg.build?.productName || pkg.productName || appName\n} catch {\n // keep default\n}\n\n// Sanitize for folder name (no slashes)\nconst appFolderName = `${appName}.app`\nconst renamedApp = path.join(dist, appFolderName)\n\nif (!fs.existsSync(electronApp)) {\n // Already patched (renamed) or electron not installed\n if (fs.existsSync(renamedApp)) {\n process.exit(0)\n }\n process.exit(0)\n}\n\ntry {\n // 1. Rename Electron.app -> PearPass.app (dock uses .app folder name)\n fs.renameSync(electronApp, renamedApp)\n console.log(\n `[patch-electron-dock-name] Renamed Electron.app -> ${appFolderName}`\n )\n\n // 2. Update path.txt so \"electron\" CLI launches the renamed app (binary inside is still \"Electron\")\n const macPath = `${appFolderName}/Contents/MacOS/Electron`\n fs.writeFileSync(pathTxt, macPath, 'utf8')\n console.log(`[patch-electron-dock-name] Updated path.txt to ${macPath}`)\n\n // 3. Patch Info.plist in the renamed bundle\n const plistPath = path.join(renamedApp, 'Contents', 'Info.plist')\n const PlistBuddy = '/usr/libexec/PlistBuddy'\n execSync(`\"${PlistBuddy}\" -c \"Set :CFBundleName ${appName}\" \"${plistPath}\"`, {\n stdio: 'inherit'\n })\n execSync(\n `\"${PlistBuddy}\" -c \"Set :CFBundleDisplayName ${appName}\" \"${plistPath}\"`,\n { stdio: 'inherit' }\n )\n\n // 4. Clear quarantine so macOS doesn't translocate (run from copy with old name)\n execSync(`xattr -cr \"${renamedApp}\"`, { stdio: 'ignore' })\n console.log(\n `[patch-electron-dock-name] Dock will show \"${appName}\". Quit the app and run again.`\n )\n} catch (err) {\n console.warn('[patch-electron-dock-name] Failed:', err.message)\n process.exit(1)\n}\n" }, { "path": "snap/snapcraft.yaml", "content": "name: pearpass\nadopt-info: pearpass\ntitle: PearPass\nsummary: A secure, decentralized and fully local password manager\ndescription: |\n PearPass is a privacy-focused password manager. Vaults sync peer-to-peer\n between your devices via the Pear runtime — no cloud, no servers, no\n account.\nlicense: Apache-2.0\nbase: core22\ngrade: stable\nconfinement: strict\ncompression: lzo\n\narchitectures:\n - build-on: amd64\n - build-on: arm64\n\napps:\n pearpass:\n command: usr/bin/pearpass\n common-id: com.pears.pass\n desktop: usr/share/applications/com.pears.pass.desktop\n extensions: [gnome]\n plugs:\n - home\n - network\n - network-bind\n - desktop\n - desktop-legacy\n - wayland\n - x11\n - unity7\n - opengl\n - removable-media\n - browser-native-messaging\n\n native-host:\n # Browsers exec /snap/bin/pearpass.native-host directly (the manifest's\n # `path` field). snapd routes that to this app slot, which pipes JSON\n # over stdio through Electron's embedded Node.\n command: usr/bin/pearpass-native-host\n extensions: [gnome]\n plugs:\n - home\n - network\n - network-bind\n\n# Directory-scoped (not file-scoped): file scope's AppArmor expansion\n# `{,/,/**}` blocks mkdir of the parent, and browsers don't create\n# NativeMessagingHosts/ themselves (verified for host + snap Firefox 150).\n# Snap only writes com.pears.pass.json inside each granted dir.\n# brave/current resolves via snap-Brave's revision symlink — smoke-tested\n# with Firefox, retest under snap-Brave.\nplugs:\n browser-native-messaging:\n interface: personal-files\n write:\n - $HOME/.mozilla/native-messaging-hosts\n - $HOME/.config/chromium/NativeMessagingHosts\n - $HOME/.config/google-chrome/NativeMessagingHosts\n - $HOME/.config/microsoft-edge/NativeMessagingHosts\n - $HOME/.config/BraveSoftware/Brave-Browser/NativeMessagingHosts\n - $HOME/snap/chromium/common/chromium/NativeMessagingHosts\n - $HOME/snap/firefox/common/.mozilla/native-messaging-hosts\n - $HOME/snap/brave/current/.config/BraveSoftware/Brave-Browser/NativeMessagingHosts\n\nparts:\n pearpass:\n plugin: nil\n source: snap/local\n build-packages:\n - jq\n # stage-packages intentionally empty: Electron bundles ffmpeg/GL/vulkan,\n # the gnome extension + core22 base provide GTK/NSS/dbus. Add specific\n # .so files here if a missing-symbol error surfaces at runtime.\n override-build: |\n set -eux\n\n # Snap version follows package.json; `adopt-info: pearpass` lets\n # this part publish the value via craftctl.\n craftctl set version=\"$(jq -r .version \"${CRAFT_PROJECT_DIR}/package.json\")\"\n\n # build-snap.sh stages the Electron payload as either snap/local/unpacked/\n # (preferred, pre-extracted from electron-builder) or snap/local/PearPass.AppImage\n # (fallback, extracted here via AppRun).\n UNPACKED=\"${CRAFT_PART_SRC}/unpacked\"\n APPIMAGE=\"${CRAFT_PART_SRC}/PearPass.AppImage\"\n\n install -d \"${CRAFT_PART_INSTALL}/lib/pearpass\"\n\n if [ -d \"${UNPACKED}\" ]; then\n cp -a \"${UNPACKED}/.\" \"${CRAFT_PART_INSTALL}/lib/pearpass/\"\n elif [ -f \"${APPIMAGE}\" ]; then\n WORKDIR=\"$(mktemp -d)\"\n cp \"${APPIMAGE}\" \"${WORKDIR}/PearPass.AppImage\"\n chmod +x \"${WORKDIR}/PearPass.AppImage\"\n cd \"${WORKDIR}\"\n ./PearPass.AppImage --appimage-extract >/dev/null\n cp -a squashfs-root/. \"${CRAFT_PART_INSTALL}/lib/pearpass/\"\n cd -\n else\n echo \"Expected ${UNPACKED}/ or ${APPIMAGE}\" >&2\n echo \"Stage one via scripts/build-snap.sh, not snapcraft directly.\" >&2\n exit 1\n fi\n chmod +x \"${CRAFT_PART_INSTALL}/lib/pearpass/pearpass-app-desktop\" || true\n chmod +x \"${CRAFT_PART_INSTALL}/lib/pearpass/pearpass-app-desktop.bin\" || true\n\n install -d \"${CRAFT_PART_INSTALL}/usr/bin\"\n\n # Main GUI launcher. --no-sandbox + ozone X11 mirrors the flatpak\n # launcher; Wayland auto-detect inside snap is unreliable and X11 via\n # XWayland works on both session types.\n cat > \"${CRAFT_PART_INSTALL}/usr/bin/pearpass\" <<'WRAPPER'\n #!/bin/sh\n APP_ROOT=\"${SNAP}/lib/pearpass\"\n export LD_LIBRARY_PATH=\"${APP_ROOT}${LD_LIBRARY_PATH:+:${LD_LIBRARY_PATH}}\"\n export GDK_BACKEND=x11\n cd \"${APP_ROOT}\"\n exec \"${APP_ROOT}/pearpass-app-desktop\" \\\n --no-sandbox \\\n --disable-gpu-sandbox \\\n --disable-dev-shm-usage \\\n --enable-features=UseOzonePlatform \\\n --ozone-platform=x11 \\\n \"$@\"\n WRAPPER\n chmod +x \"${CRAFT_PART_INSTALL}/usr/bin/pearpass\"\n\n # Native messaging host. Bypass the launcher (which forces\n # --no-sandbox) and call .bin directly: ELECTRON_RUN_AS_NODE rejects\n # --no-sandbox and Chrome would see \"Native host has exited\".\n cat > \"${CRAFT_PART_INSTALL}/usr/bin/pearpass-native-host\" <<'NMHOST'\n #!/bin/sh\n APP_ROOT=\"${SNAP}/lib/pearpass\"\n export LD_LIBRARY_PATH=\"${APP_ROOT}${LD_LIBRARY_PATH:+:${LD_LIBRARY_PATH}}\"\n export ELECTRON_RUN_AS_NODE=1\n exec \"${APP_ROOT}/pearpass-app-desktop.bin\" \\\n \"${APP_ROOT}/resources/app/dist/native-messaging-bridge.bundle.cjs\" \\\n \"$@\"\n NMHOST\n chmod +x \"${CRAFT_PART_INSTALL}/usr/bin/pearpass-native-host\"\n\n # Reuse flatpak desktop entry + metainfo + icon; sed below patches\n # Exec/Icon for snap-resolved paths.\n install -Dm644 \"${CRAFT_PROJECT_DIR}/flatpak/com.pears.pass.desktop\" \\\n \"${CRAFT_PART_INSTALL}/usr/share/applications/com.pears.pass.desktop\"\n install -Dm644 \"${CRAFT_PROJECT_DIR}/flatpak/com.pears.pass.metainfo.xml\" \\\n \"${CRAFT_PART_INSTALL}/usr/share/metainfo/com.pears.pass.metainfo.xml\"\n install -Dm644 \"${CRAFT_PROJECT_DIR}/assets/linux/icon.png\" \\\n \"${CRAFT_PART_INSTALL}/meta/gui/pearpass.png\"\n\n sed -i 's|^Exec=.*|Exec=pearpass %U|' \\\n \"${CRAFT_PART_INSTALL}/usr/share/applications/com.pears.pass.desktop\"\n sed -i 's|^Icon=.*|Icon=${SNAP}/meta/gui/pearpass.png|' \\\n \"${CRAFT_PART_INSTALL}/usr/share/applications/com.pears.pass.desktop\"\n" }, { "path": "src/app/App/appConfig.js", "content": "export const appConfig = {\n headerWithLogo: ['settings', 'welcome', 'intro']\n}\n" }, { "path": "src/app/App/hooks/useInactivity.js", "content": "import { useEffect, useRef } from 'react'\n\nimport {\n closeAllInstances,\n useUserData,\n useVaults\n} from '@tetherto/pearpass-lib-vault'\n\nimport { NAVIGATION_ROUTES } from '../../../constants/navigation'\nimport { useLoadingContext } from '../../../context/LoadingContext'\nimport { useModal } from '../../../context/ModalContext'\nimport { useRouter } from '../../../context/RouterContext'\nimport {\n getAutoLockTimeoutMs,\n useAutoLockPreferences\n} from '../../../hooks/useAutoLockPreferences'\nimport { logger } from '../../../utils/logger'\nconst DEDUPE_WINDOW_MS = 50\n\n/**\n * @returns {void}\n */\nexport function useInactivity() {\n const lastResetAtRef = useRef(0)\n\n const { setIsLoading } = useLoadingContext()\n const { navigate } = useRouter()\n const { refetch: refetchUser } = useUserData()\n const { closeModal } = useModal()\n const resetTimerRef = useRef(() => {})\n const { resetState } = useVaults()\n const timerRef = useRef(null)\n const { shouldBypassAutoLock } = useAutoLockPreferences()\n\n resetTimerRef.current = () => {\n if (shouldBypassAutoLock) {\n return\n }\n\n const now = Date.now()\n\n if (now - lastResetAtRef.current < DEDUPE_WINDOW_MS) {\n return\n }\n lastResetAtRef.current = now\n\n if (timerRef.current) {\n clearTimeout(timerRef.current)\n }\n\n const timeoutMs = getAutoLockTimeoutMs()\n\n if (timeoutMs === null) {\n return\n }\n\n timerRef.current = setTimeout(async () => {\n const userData = await refetchUser()\n logger.info(\n 'INACTIVITY-TIMER',\n `Inactivity timer triggered, user data: ${JSON.stringify(userData)}`\n )\n\n if (!userData.isLoggedIn) {\n return\n }\n\n setIsLoading(true)\n await closeAllInstances()\n closeModal()\n navigate('welcome', { state: NAVIGATION_ROUTES.MASTER_PASSWORD })\n resetState()\n setIsLoading(false)\n\n logger.info('INACTIVITY-TIMER', 'Inactivity timer reset')\n }, timeoutMs)\n }\n const resetTimer = () => resetTimerRef.current()\n\n const activityEvents = [\n 'mousemove',\n 'keydown',\n 'mousedown',\n 'touchstart',\n 'scroll'\n ]\n\n useEffect(() => {\n if (shouldBypassAutoLock && timerRef.current) {\n clearTimeout(timerRef.current)\n timerRef.current = null\n }\n }, [shouldBypassAutoLock])\n\n useEffect(() => {\n window.addEventListener('reset-timer', resetTimer)\n return () => {\n window.removeEventListener('reset-timer', resetTimer)\n }\n }, [])\n\n useEffect(() => {\n // Handler for IPC activity\n const handleIPCActivity = () => resetTimer()\n\n // Handler for settings changes - reset timer with new values\n const handleSettingsChange = () => resetTimer()\n\n activityEvents.forEach((event) =>\n window.addEventListener(event, resetTimer)\n )\n\n // Listen for IPC activity events\n window.addEventListener('ipc-activity', handleIPCActivity)\n\n // Listen for auto-lock settings changes\n window.addEventListener('auto-lock-settings-changed', handleSettingsChange)\n\n resetTimer()\n\n return () => {\n activityEvents.forEach((event) =>\n window.removeEventListener(event, resetTimer)\n )\n window.removeEventListener('ipc-activity', handleIPCActivity)\n window.removeEventListener(\n 'auto-lock-settings-changed',\n handleSettingsChange\n )\n if (timerRef.current) clearTimeout(timerRef.current)\n }\n }, [])\n}\n" }, { "path": "src/app/App/hooks/useInactivity.test.js", "content": "import React from 'react'\n\nimport { render, act } from '@testing-library/react'\n\nconst { useInactivity } = require('./useInactivity')\n\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n closeAllInstances: jest.fn(() => Promise.resolve()),\n useVaults: () => ({\n resetState: jest.fn()\n }),\n useUserData: () => ({\n refetch: jest.fn(() => Promise.resolve({ isLoggedIn: true }))\n })\n}))\n\njest.mock('../../../hooks/useAutoLockPreferences', () => ({\n getAutoLockTimeoutMs: jest.fn(() => 500),\n useAutoLockPreferences: jest.fn(() => ({ shouldBypassAutoLock: false }))\n}))\n\njest.mock('../../../context/LoadingContext', () => ({\n useLoadingContext: () => ({\n setIsLoading: jest.fn()\n })\n}))\n\njest.mock('../../../context/RouterContext', () => ({\n useRouter: () => ({\n currentPage: 'home',\n data: {},\n navigate: jest.fn()\n })\n}))\n\njest.mock('../../../context/ModalContext', () => ({\n useModal: () => ({\n closeModal: jest.fn()\n })\n}))\n\ndescribe('useInactivity', () => {\n let addEventListenerSpy\n let removeEventListenerSpy\n let clearTimeoutSpy\n let setTimeoutSpy\n let originalClearTimeout\n let originalSetTimeout\n\n beforeEach(() => {\n jest.useFakeTimers()\n originalClearTimeout = global.clearTimeout\n originalSetTimeout = global.setTimeout\n if (typeof global.clearTimeout !== 'function') {\n global.clearTimeout = () => {}\n }\n if (typeof global.setTimeout !== 'function') {\n global.setTimeout = () => {}\n }\n addEventListenerSpy = jest.spyOn(window, 'addEventListener')\n removeEventListenerSpy = jest.spyOn(window, 'removeEventListener')\n clearTimeoutSpy = jest.spyOn(global, 'clearTimeout')\n setTimeoutSpy = jest.spyOn(global, 'setTimeout')\n })\n\n afterEach(() => {\n global.clearTimeout = originalClearTimeout\n global.setTimeout = originalSetTimeout\n jest.useRealTimers()\n jest.clearAllMocks()\n })\n\n const TestComponent = () => {\n useInactivity()\n return null\n }\n\n it('adds and removes event listeners on mount/unmount', () => {\n const { unmount } = render()\n expect(addEventListenerSpy).toHaveBeenCalled()\n unmount()\n expect(removeEventListenerSpy).toHaveBeenCalled()\n })\n\n it('registers activity event listeners including reset-timer and ipc-activity', () => {\n render()\n const expectedEvents = [\n 'reset-timer',\n 'mousemove',\n 'keydown',\n 'mousedown',\n 'touchstart',\n 'scroll',\n 'ipc-activity',\n 'auto-lock-settings-changed'\n ]\n expectedEvents.forEach((event) => {\n expect(addEventListenerSpy).toHaveBeenCalledWith(\n event,\n expect.any(Function)\n )\n })\n })\n\n it('dedupes rapid successive resetTimer calls', () => {\n render()\n // Grab the last registered listener for, say, mousemove\n const mouseListener = addEventListenerSpy.mock.calls.find(\n ([name]) => name === 'mousemove'\n )[1]\n\n act(() => {\n mouseListener()\n mouseListener()\n })\n\n // Only one timeout should be scheduled because of dedupe\n expect(setTimeoutSpy).toHaveBeenCalledTimes(1)\n })\n\n it('schedules and clears timeout on unmount', () => {\n const { unmount } = render()\n expect(setTimeoutSpy).toHaveBeenCalled()\n unmount()\n expect(clearTimeoutSpy).toHaveBeenCalled()\n })\n})\n" }, { "path": "src/app/App/hooks/useOnExtension.test.js", "content": "import React from 'react'\n\nimport { render } from '@testing-library/react'\n\nimport { HANDLER_EVENTS } from '../../../constants/services'\n\nconst { useOnExtensionExit } = require('./useOnExtensionExit')\n\nconst mockNavigate = jest.fn()\nconst mockResetState = jest.fn()\n\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n useVaults: () => ({\n resetState: mockResetState\n })\n}))\n\njest.mock('../../../context/RouterContext', () => ({\n useRouter: () => ({\n navigate: mockNavigate\n })\n}))\n\ndescribe('UseOnExtensionExit', () => {\n let addEventListenerSpy\n let removeEventListenerSpy\n\n beforeEach(() => {\n addEventListenerSpy = jest.spyOn(window, 'addEventListener')\n removeEventListenerSpy = jest.spyOn(window, 'removeEventListener')\n })\n\n afterEach(() => {\n jest.clearAllMocks()\n })\n\n it('should add and remove extension-exit listener on mount/unmount', () => {\n function TestComponent() {\n useOnExtensionExit()\n return null\n }\n\n const { unmount } = render()\n\n expect(addEventListenerSpy).toHaveBeenCalledWith(\n HANDLER_EVENTS.extensionExit,\n expect.any(Function)\n )\n\n unmount()\n\n expect(removeEventListenerSpy).toHaveBeenCalledWith(\n HANDLER_EVENTS.extensionExit,\n expect.any(Function)\n )\n })\n\n it('should call navigate and resetState on extension-exit event', () => {\n let handler\n addEventListenerSpy.mockImplementation((event, cb) => {\n if (event === HANDLER_EVENTS.extensionExit) {\n handler = cb\n }\n })\n\n function TestComponent() {\n useOnExtensionExit()\n return null\n }\n\n render()\n\n // Simulate event\n handler()\n\n expect(mockNavigate).toHaveBeenCalledWith('welcome', {\n state: 'masterPassword'\n })\n expect(mockResetState).toHaveBeenCalled()\n })\n})\n" }, { "path": "src/app/App/hooks/useOnExtensionExit.js", "content": "import { useEffect } from 'react'\n\nimport { useVaults } from '@tetherto/pearpass-lib-vault'\n\nimport { NAVIGATION_ROUTES } from '../../../constants/navigation'\nimport { HANDLER_EVENTS } from '../../../constants/services'\nimport { useRouter } from '../../../context/RouterContext'\n\nexport const useOnExtensionExit = () => {\n const { navigate } = useRouter()\n const { resetState } = useVaults()\n\n useEffect(() => {\n const handleExtensionExit = () => {\n navigate('welcome', { state: NAVIGATION_ROUTES.MASTER_PASSWORD })\n resetState()\n }\n\n window.addEventListener(HANDLER_EVENTS.extensionExit, handleExtensionExit)\n return () => {\n window.removeEventListener(\n HANDLER_EVENTS.extensionExit,\n handleExtensionExit\n )\n }\n }, [navigate])\n}\n" }, { "path": "src/app/App/hooks/useOnExtensionLockOut.js", "content": "import { useEffect } from 'react'\n\nimport { NAVIGATION_ROUTES } from '../../../constants/navigation'\nimport { HANDLER_EVENTS } from '../../../constants/services'\nimport { useRouter } from '../../../context/RouterContext'\n\nexport const useOnExtensionLockOut = () => {\n const { navigate } = useRouter()\n\n useEffect(() => {\n const handleExtensionLockOut = () => {\n navigate('welcome', { state: NAVIGATION_ROUTES.SCREEN_LOCKED })\n }\n\n window.addEventListener(\n HANDLER_EVENTS.extensionLock,\n handleExtensionLockOut\n )\n\n return () => {\n window.removeEventListener(\n HANDLER_EVENTS.extensionLock,\n handleExtensionLockOut\n )\n }\n }, [navigate])\n}\n" }, { "path": "src/app/App/hooks/useOnExtensionLockOut.test.js", "content": "import React from 'react'\n\nimport { render } from '@testing-library/react'\n\nimport { useOnExtensionLockOut } from './useOnExtensionLockOut'\nimport { NAVIGATION_ROUTES } from '../../../constants/navigation'\nimport { HANDLER_EVENTS } from '../../../constants/services'\n\nconst mockNavigate = jest.fn()\n\njest.mock('../../../context/RouterContext', () => ({\n useRouter: () => ({\n navigate: mockNavigate\n })\n}))\n\ndescribe('useOnExtensionLockOut', () => {\n let addEventListenerSpy\n let removeEventListenerSpy\n\n beforeEach(() => {\n addEventListenerSpy = jest.spyOn(window, 'addEventListener')\n removeEventListenerSpy = jest.spyOn(window, 'removeEventListener')\n })\n\n afterEach(() => {\n jest.clearAllMocks()\n })\n\n it('should add and remove extension-lock listener on mount/unmount', () => {\n function TestComponent() {\n useOnExtensionLockOut()\n return null\n }\n\n const { unmount } = render()\n\n expect(addEventListenerSpy).toHaveBeenCalledWith(\n HANDLER_EVENTS.extensionLock,\n expect.any(Function)\n )\n\n unmount()\n\n expect(removeEventListenerSpy).toHaveBeenCalledWith(\n HANDLER_EVENTS.extensionLock,\n expect.any(Function)\n )\n })\n\n it('should call navigate with correct params on extension-lock event', () => {\n let handler\n addEventListenerSpy.mockImplementation((event, cb) => {\n if (event === HANDLER_EVENTS.extensionLock) {\n handler = cb\n }\n })\n\n function TestComponent() {\n useOnExtensionLockOut()\n return null\n }\n\n render()\n\n handler()\n\n expect(mockNavigate).toHaveBeenCalledWith('welcome', {\n state: NAVIGATION_ROUTES.SCREEN_LOCKED\n })\n })\n})\n" }, { "path": "src/app/App/hooks/useRedirect.js", "content": "import { useEffect, useState } from 'react'\n\nimport { useUserData } from '@tetherto/pearpass-lib-vault'\n\nimport { NAVIGATION_ROUTES } from '../../../constants/navigation'\nimport { useRouter } from '../../../context/RouterContext'\nimport { logger } from '../../../utils/logger'\n\n/**\n * @returns {Object} An object containing:\n * @property {boolean} isLoading - Indicates if the user data is currently loading.\n */\nexport const useRedirect = () => {\n const [isLoading, setIsLoading] = useState(true)\n\n const { navigate } = useRouter()\n\n const { refetch: refetchUser } = useUserData()\n\n useEffect(() => {\n ;(async () => {\n try {\n setIsLoading(true)\n const userData = await refetchUser()\n\n if (userData?.masterPasswordStatus?.isLocked) {\n navigate('welcome', {\n state: NAVIGATION_ROUTES.SCREEN_LOCKED\n })\n return\n }\n\n if (!userData?.hasPasswordSet) {\n navigate('intro')\n return\n }\n\n navigate('welcome', {\n state: userData?.hasPasswordSet\n ? NAVIGATION_ROUTES.MASTER_PASSWORD\n : NAVIGATION_ROUTES.CREATE_MASTER_PASSWORD\n })\n } catch (error) {\n logger.error('Error fetching user data:', error)\n } finally {\n setIsLoading(false)\n }\n })()\n }, [])\n\n return {\n isLoading\n }\n}\n" }, { "path": "src/app/App/hooks/useRedirect.test.js", "content": "import { renderHook, waitFor } from '@testing-library/react'\nimport { useUserData } from '@tetherto/pearpass-lib-vault'\n\nimport { useRedirect } from './useRedirect'\nimport { useRouter } from '../../../context/RouterContext'\n\n// Mock dependencies\n\njest.mock('@tetherto/pearpass-lib-vault')\njest.mock('../../../context/RouterContext')\njest.mock('../../../utils/logger', () => ({\n error: jest.fn()\n}))\njest.mock('../../../constants/localStorage', () => ({\n LOCAL_STORAGE_KEYS: {\n TOU_ACCEPTED: 'TOU_ACCEPTED'\n }\n}))\n\nconst mockNavigate = jest.fn()\nconst mockRefetchUser = jest.fn()\n\ndescribe('useRedirect', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n\n useRouter.mockReturnValue({ navigate: mockNavigate })\n useUserData.mockReturnValue({\n isLoading: false,\n refetch: mockRefetchUser\n })\n\n // Mock localStorage\n Object.defineProperty(window, 'localStorage', {\n value: {\n getItem: jest.fn(),\n setItem: jest.fn(),\n clear: jest.fn()\n },\n writable: true\n })\n })\n\n it('should return isLoading as true when user data is loading', () => {\n useUserData.mockReturnValue({\n isLoading: true,\n refetch: mockRefetchUser\n })\n\n const { result } = renderHook(() => useRedirect())\n\n expect(result.current.isLoading).toBe(true)\n })\n\n it('should navigate to \"welcome\" with masterPassword state if password is set and ToU is accepted', async () => {\n mockRefetchUser.mockResolvedValue({ hasPasswordSet: true })\n localStorage.getItem.mockReturnValue('true')\n\n renderHook(() => useRedirect())\n\n await waitFor(() => {\n expect(mockNavigate).toHaveBeenCalledWith('welcome', {\n state: 'masterPassword'\n })\n })\n })\n\n it('should navigate to \"intro\" if password is not set', async () => {\n mockRefetchUser.mockResolvedValue({ hasPasswordSet: false })\n localStorage.getItem.mockReturnValue('true') // ToU accepted doesn't matter here\n\n renderHook(() => useRedirect())\n\n await waitFor(() => {\n expect(mockNavigate).toHaveBeenCalledWith('intro')\n })\n })\n\n it('should navigate to \"intro\" if user data is null', async () => {\n mockRefetchUser.mockResolvedValue(null)\n\n renderHook(() => useRedirect())\n\n await waitFor(() => {\n expect(mockNavigate).toHaveBeenCalledWith('intro')\n })\n })\n})\n" }, { "path": "src/app/App/index.js", "content": "import { useState, useCallback } from 'react'\n\nimport { useTheme } from '@tetherto/pearpass-lib-ui-kit'\nimport { html } from 'htm/react'\n\nimport { appConfig } from './appConfig'\nimport { useInactivity } from './hooks/useInactivity'\nimport { useOnExtensionExit } from './hooks/useOnExtensionExit'\nimport { useOnExtensionLockOut } from './hooks/useOnExtensionLockOut'\nimport { useRedirect } from './hooks/useRedirect'\nimport { TitleBar } from '../../components/TitleBar'\nimport { AppHeaderContainer } from '../../containers/AppHeaderContainer'\nimport { useRouter } from '../../context/RouterContext'\nimport { usePearUpdate } from '../../hooks/usePearUpdate'\nimport { useSimulatedLoading } from '../../hooks/useSimulatedLoading'\nimport { Routes } from '../Routes'\nimport { ContentFrame, WindowBackground } from './styles'\nimport { isV2 } from '../../utils/designVersion'\n\nexport const App = () => {\n const { theme } = useTheme()\n const { currentPage } = useRouter()\n usePearUpdate()\n const isSimulatedLoading = useSimulatedLoading()\n const [isLoadingPageComplete, setIsLoadingPageComplete] = useState(false)\n\n useInactivity()\n const { isLoading: isDataLoading } = useRedirect()\n\n useOnExtensionExit()\n useOnExtensionLockOut()\n\n const handleLoadingComplete = useCallback(() => {\n setIsLoadingPageComplete(true)\n }, [])\n\n const showLoadingPage = isV2()\n ? isDataLoading || !isLoadingPageComplete\n : !isSimulatedLoading && (isDataLoading || !isLoadingPageComplete)\n\n if (isV2()) {\n const useLogoTitleBar = appConfig.headerWithLogo.includes(currentPage)\n return html`\n <${WindowBackground} $backgroundColor=${theme.colors.colorBackground}>\n ${useLogoTitleBar\n ? html`<${TitleBar} />`\n : html`<${AppHeaderContainer} />`}\n <${ContentFrame}\n $backgroundColor=${theme.colors.colorBackground}\n $borderColor=${theme.colors.colorBorderPrimary}\n >\n <${Routes}\n isSplashScreenShown=${false}\n isDataLoading=${showLoadingPage}\n onLoadingComplete=${handleLoadingComplete}\n />\n \n \n `\n }\n\n return html`\n <${Routes}\n isSplashScreenShown=${isSimulatedLoading}\n isDataLoading=${showLoadingPage}\n onLoadingComplete=${handleLoadingComplete}\n />\n `\n}\n" }, { "path": "src/app/App/styles.js", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\nimport styled from 'styled-components'\n\nimport { isV2 } from '../../utils/designVersion'\n\nexport const AppWrapper = styled.div`\n height: 100%;\n`\n\nexport const WindowBackground = styled.div`\n ${isV2()\n ? `\n position: fixed;\n inset: 0;\n width: 100vw;\n height: 100vh;\n overflow: hidden;\n `\n : `\n height: 100%;\n width: 100%;\n `}\n background-color: ${({ $backgroundColor }) =>\n $backgroundColor || 'transparent'};\n display: flex;\n flex-direction: column;\n`\nexport const ContentFrame = styled.div`\n ${isV2()\n ? `\n position: relative;\n z-index: 0;\n flex: 1 1 0;\n min-height: 0;\n min-width: 0;\n margin: ${rawTokens.spacing8}px;\n `\n : `\n flex: 1 1 auto;\n `}\n border-radius: ${isV2()\n ? process.platform === 'darwin'\n ? `${rawTokens.radius8}px ${rawTokens.radius8}px ${rawTokens.radius20}px ${rawTokens.radius20}px`\n : `${rawTokens.radius8}px`\n : '16px'};\n border: ${({ $borderColor }) =>\n isV2() ? `1px solid ${$borderColor || 'transparent'}` : 'none'};\n overflow: auto;\n background-color: ${({ $backgroundColor }) =>\n $backgroundColor || 'transparent'};\n`\n" }, { "path": "src/app/Routes/index.js", "content": "import { AUTHENTICATOR_ENABLED } from '@tetherto/pearpass-lib-constants'\nimport { OtpRefreshProvider, RECORD_TYPES } from '@tetherto/pearpass-lib-vault'\nimport { html } from 'htm/react'\n\nimport { LayoutWithSidebar } from '../../containers/LayoutWithSidebar'\nimport { RecordDetails } from '../../containers/RecordDetails'\nimport { useRouter } from '../../context/RouterContext'\nimport { AuthenticatorView } from '../../pages/AuthenticatorView'\nimport { InitialPage } from '../../pages/InitialPage'\nimport { Intro } from '../../pages/Intro'\nimport { IntroV2 } from '../../pages/Intro/IntroV2'\nimport { LoadingPage } from '../../pages/LoadingPage'\nimport { LoadingPageV2 } from '../../pages/LoadingPage/LoadingPageV2'\nimport { MainView } from '../../pages/MainView'\nimport { MainViewV2 } from '../../pages/MainView/MainViewV2'\nimport { SettingsView } from '../../pages/SettingsView'\nimport { SettingsViewV2 } from '../../pages/SettingsViewV2/SettingsViewV2'\nimport { WelcomePage } from '../../pages/WelcomePage'\nimport { isV2 } from '../../utils/designVersion'\n\n/**\n * @param {Object} props\n * @param {boolean} props.isSplashScreenShown - Shows InitialPage (splash screen)\n * @param {boolean} props.isDataLoading - Shows LoadingPage (with progress bar)\n * @param {() => void} [props.onLoadingComplete] - Callback when LoadingPage finishes\n * @returns {import('react').ReactNode}\n */\nexport const Routes = ({\n isSplashScreenShown,\n isDataLoading,\n onLoadingComplete\n}) => {\n const { currentPage, data } = useRouter()\n\n // Show InitialPage during initial splash\n if (isSplashScreenShown) {\n if (isV2()) {\n return html` <${LoadingPageV2} progress=${0} /> `\n }\n return html` <${InitialPage} /> `\n }\n\n // Show LoadingPage with progress bar during data loading\n if (isDataLoading || currentPage === 'loading') {\n return html` <${LoadingPage} onLoadingComplete=${onLoadingComplete} /> `\n }\n\n if (currentPage === 'intro') {\n if (isV2()) {\n return html` <${IntroV2} /> `\n }\n return html` <${Intro} /> `\n }\n\n if (currentPage === 'welcome') {\n return html` <${WelcomePage} /> `\n }\n\n if (currentPage === 'settings') {\n if (isV2()) {\n return \n } else {\n return \n }\n }\n\n if (currentPage === 'vault') {\n const isAuthenticator =\n AUTHENTICATOR_ENABLED && data?.recordType === RECORD_TYPES.OTP\n\n const VersionBasedMainView = isV2() ? MainViewV2 : MainView\n\n return html`\n <${OtpRefreshProvider}>\n <${LayoutWithSidebar}\n mainView=${isAuthenticator\n ? html`<${AuthenticatorView} />`\n : html`<${VersionBasedMainView} />`}\n sideView=${html`<${RecordDetails} />`}\n isSideViewOpen=${!!data?.recordId}\n />\n \n `\n }\n}\n" }, { "path": "src/components/AlertBox/index.tsx", "content": "import { useRef, useEffect, useState } from 'react'\nimport { IconWrapper, Container, Message } from './styles'\nimport { ErrorIcon, YellowErrorIcon } from '../../lib-react-components'\n\n\nexport enum AlertBoxType {\n WARNING = 'warning', \n ERROR = 'error', \n}\n\ninterface Props {\n message: string\n type?: AlertBoxType\n testId?: string\n}\n\n/**\n * @param {Object} props\n * @param {string} props.message\n * @param {('warning'|'error')} [props.type='warning']\n * @param {string} [props.testId]\n * @returns {JSX.Element}\n */\nexport const AlertBox = ({ message, type = AlertBoxType.WARNING, testId }: Props): React.ReactElement => {\n const messageRef = useRef(null)\n const [isMultiLine, setIsMultiLine] = useState(false)\n\n useEffect(() => {\n if (messageRef.current) {\n const lineHeight = parseFloat(\n getComputedStyle(messageRef.current).lineHeight\n )\n const height = messageRef.current.offsetHeight\n setIsMultiLine(height > lineHeight * 1.2)\n }\n }, [message])\n\n return (\n \n \n {type === AlertBoxType.WARNING ? : }\n \n\n {message}\n \n )\n}\n" }, { "path": "src/components/AlertBox/styles.ts", "content": "import styled from 'styled-components'\nimport { AlertBoxType } from '.'\n\ninterface ContainerProps {\n $isMultiLine?: boolean\n type?: AlertBoxType\n}\n\nexport const Container = styled.div`\n display: flex;\n width: 100%;\n padding: 10px;\n align-items: ${({ $isMultiLine }) =>\n $isMultiLine ? 'flex-start' : 'center'};\n gap: 8px;\n border-radius: 10px;\n border: 1px solid\n ${({ theme, type }) =>\n type === 'warning'\n ? theme.colors.errorYellow.mode1\n : theme.colors.errorRed.mode1};\n background: linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0.8) 0%,\n rgba(0, 0, 0, 0.8) 100%\n ),\n ${({ theme, type }) =>\n type === 'warning'\n ? theme.colors.errorYellow.mode1\n : theme.colors.errorRed.mode1};\n`\n\nexport const Message = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 14px;\n font-weight: 500;\n line-height: 1.4;\n`\n\nexport const IconWrapper = styled.div`\n flex-shrink: 0;\n`\n" }, { "path": "src/components/AppHeaderV2/AppHeaderV2.styles.ts", "content": "import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\nimport { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = (\n colors: ThemeColors,\n) => ({\n root: {\n display: 'flex' as const,\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n padding: '12px 16px',\n width: '100%',\n gap: `${rawTokens.spacing16}px`,\n marginBottom: 0,\n boxSizing: 'border-box' as const\n },\n flexSpacer: {\n flex: '1 1 0',\n minWidth: 0\n },\n searchWrap: {\n display: \"flex\",\n justifyContent: \"center\",\n width: '100%',\n },\n search:{\n maxWidth: '400px',\n width: '100%',\n },\n searchField: {\n display: 'flex' as const,\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n gap: `${rawTokens.spacing8}px`,\n width: '100%',\n paddingBlock: `${rawTokens.spacing10}px`,\n paddingInline: `${rawTokens.spacing12}px`,\n borderRadius: 9999,\n borderWidth: 1,\n borderStyle: 'solid' as const,\n borderColor: colors.colorBorderSearchField,\n backgroundColor: colors.colorSurfaceSearchField,\n boxSizing: 'border-box' as const\n },\n\n actions: {\n display: 'flex' as const,\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n justifyContent: 'flex-end' as const,\n gap: `${rawTokens.spacing8}px`\n }\n})\n" }, { "path": "src/components/AppHeaderV2/AppHeaderV2.test.js", "content": "import React from 'react'\n\nimport '@testing-library/jest-dom'\nimport { render, screen, fireEvent } from '@testing-library/react'\n\nimport { AppHeaderV2, AppHeaderAddItemTrigger } from './AppHeaderV2'\n\njest.mock('@lingui/react', () => ({\n useLingui: () => ({ i18n: { _: (s) => s } })\n}))\n\njest.mock('./AppHeaderV2.styles', () => ({\n createStyles: () => ({\n root: {},\n searchWrap: {},\n search: {},\n actions: {}\n })\n}))\n\nconst mockTheme = { colors: {} }\n\njest.mock('@tetherto/pearpass-lib-ui-kit', () => ({\n useTheme: () => ({ theme: mockTheme }),\n SearchField: ({ value, onChangeText, placeholderText, testID }) => (\n onChangeText(e.target.value)}\n />\n ),\n Button: ({ children, onClick, 'data-testid': dataTestId }) => (\n \n )\n}))\n\njest.mock('@tetherto/pearpass-lib-ui-kit/icons', () => ({\n Add: () => null,\n ImportOutlined: () => null\n}))\n\ndescribe('AppHeaderV2', () => {\n const defaultProps = {\n searchValue: '',\n onSearchChange: jest.fn(),\n onImportClick: jest.fn(),\n addItemControl: add\n }\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n it('renders search, import, and addItemControl', () => {\n render()\n\n expect(screen.getByTestId('main-search-input')).toBeInTheDocument()\n expect(screen.getByTestId('main-import-button')).toBeInTheDocument()\n expect(screen.getByTestId('add-control')).toBeInTheDocument()\n expect(\n screen.getByPlaceholderText('Search in All Items')\n ).toBeInTheDocument()\n expect(screen.getByText('Import')).toBeInTheDocument()\n })\n\n it('uses custom test ids when provided', () => {\n render(\n \n )\n\n expect(screen.getByTestId('custom-search')).toBeInTheDocument()\n expect(screen.getByTestId('custom-import')).toBeInTheDocument()\n })\n\n it('calls onSearchChange when search value changes', () => {\n render()\n\n fireEvent.change(screen.getByTestId('main-search-input'), {\n target: { value: 'next' }\n })\n\n expect(defaultProps.onSearchChange).toHaveBeenCalledWith('next')\n })\n\n it('calls onImportClick when import is pressed', () => {\n render()\n\n fireEvent.click(screen.getByTestId('main-import-button'))\n\n expect(defaultProps.onImportClick).toHaveBeenCalledTimes(1)\n })\n})\n\ndescribe('AppHeaderAddItemTrigger', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n it('renders Add Item with default test id', () => {\n render()\n\n expect(screen.getByTestId('main-plus-button')).toBeInTheDocument()\n expect(screen.getByText('Add Item')).toBeInTheDocument()\n })\n\n it('uses custom test id when provided', () => {\n render()\n\n expect(screen.getByTestId('plus-custom')).toBeInTheDocument()\n })\n})\n" }, { "path": "src/components/AppHeaderV2/AppHeaderV2.tsx", "content": "import React, { type ReactNode } from 'react'\n\nimport { Button, useTheme, SearchField } from '@tetherto/pearpass-lib-ui-kit'\nimport { Add, ImportOutlined } from '@tetherto/pearpass-lib-ui-kit/icons'\n\nimport { createStyles } from './AppHeaderV2.styles'\nimport { useTranslation } from '../../hooks/useTranslation'\n\nexport type AppHeaderV2Props = {\n searchValue: string\n onSearchChange: (value: string) => void\n onImportClick: () => void\n addItemControl: ReactNode\n searchTestId?: string\n importTestId?: string\n}\n\nexport const AppHeaderV2 = ({\n searchValue,\n onSearchChange,\n onImportClick,\n addItemControl,\n searchTestId = 'main-search-input',\n importTestId = 'main-import-button',\n}: AppHeaderV2Props) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const styles = createStyles(theme.colors)\n const { root, searchWrap, search, actions } = styles\n\n return (\n
\n
\n
\n \n
\n
\n
\n \n }\n >\n {t('Import')}\n \n {addItemControl}\n
\n
\n )\n}\n\ntype AppHeaderAddItemTriggerProps = {\n testId?: string\n}\n\nexport const AppHeaderAddItemTrigger = ({\n testId = 'main-plus-button'\n}: AppHeaderAddItemTriggerProps) => {\n const { t } = useTranslation()\n\n return (\n \n }\n >\n {t('Add Item')}\n \n )\n}\n" }, { "path": "src/components/AppHeaderV2/index.ts", "content": "export {\n AppHeaderV2,\n AppHeaderAddItemTrigger,\n type AppHeaderV2Props,\n} from './AppHeaderV2'\n" }, { "path": "src/components/BackgroundWithGradient.tsx", "content": "import React, { useState, useEffect, ReactNode, CSSProperties } from 'react'\nimport styled from 'styled-components'\nimport { useTheme } from '@tetherto/pearpass-lib-ui-kit'\n\ninterface ContainerProps {\n $backgroundColor: string\n}\n\nconst Container = styled.div`\n position: relative;\n width: 100%;\n height: 100%;\n background-color: ${(props) => props.$backgroundColor};\n overflow: hidden;\n display: flex;\n flex-direction: column;\n`\n\nconst SVGBackground = styled.svg`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n`\n\ninterface BackgroundWithGradientProps {\n children?: ReactNode\n style?: CSSProperties\n backgroundColor?: string\n gradientColors?: string[]\n}\n\nexport const BackgroundWithGradient: React.FC = ({\n children,\n style,\n backgroundColor: customBg,\n gradientColors: customGradientColors\n}) => {\n const { theme } = useTheme()\n const backgroundColor = customBg || theme.colors.colorSurfacePrimary\n const gradientColors = customGradientColors || ['#2A3317', backgroundColor]\n\n const [dimensions, setDimensions] = useState({\n width: typeof window !== 'undefined' ? window.innerWidth : 0,\n height: typeof window !== 'undefined' ? window.innerHeight : 0\n })\n\n useEffect(() => {\n const handleResize = () => {\n setDimensions({\n width: window.innerWidth,\n height: window.innerHeight\n })\n }\n\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [])\n\n const radius = Math.max(dimensions.width, dimensions.height) * 0.4\n const cx = dimensions.width / 2\n const cy = dimensions.height * 0.45\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n {children}\n \n )\n}\n" }, { "path": "src/components/BadgeTextItem/index.js", "content": "import { html } from 'htm/react'\n\nimport { BadgeContainer, BadgeText, BadgeCount } from './styles'\n\n/**\n * @param {{\n * count: number,\n * word: string,\n * isNumberVisible?: boolean\n * testId?: string\n * }} props\n */\n\nexport const BadgeTextItem = ({\n count,\n word,\n isNumberVisible = true,\n testId\n}) =>\n html`<${BadgeContainer} data-testid=${testId}>\n ${isNumberVisible ? html`<${BadgeCount}>#${count}` : null}\n <${BadgeText}>${word}\n `\n" }, { "path": "src/components/BadgeTextItem/index.test.js", "content": "import React from 'react'\n\nimport { render, screen } from '@testing-library/react'\nimport '@testing-library/jest-dom'\n\nimport { BadgeTextItem } from './index'\n\njest.mock('./styles', () => ({\n BadgeContainer: ({ children }) => (\n
{children}
\n ),\n BadgeText: ({ children, title }) => (\n \n {children}\n \n ),\n BadgeCount: ({ children }) => (\n {children}\n )\n}))\n\ndescribe('BadgeTextItem', () => {\n test('renders word and count by default', () => {\n render()\n\n expect(screen.getByTestId('badge-text')).toHaveTextContent('alpha')\n expect(screen.getByTestId('badge-count')).toHaveTextContent('#3')\n })\n\n test('hides count when isNumberVisible is false', () => {\n render()\n\n expect(screen.getByTestId('badge-text')).toHaveTextContent('beta')\n expect(screen.queryByTestId('badge-count')).toBeNull()\n })\n})\n" }, { "path": "src/components/BadgeTextItem/styles.js", "content": "import styled from 'styled-components'\n\nexport const BadgeContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background-color: ${({ theme }) => theme.colors.grey500?.mode1};\n padding: 13.5px 10px;\n width: 105px;\n border-radius: 10px;\n gap: 5px;\n font-family: Inter;\n font-style: normal;\n font-size: 12px;\n`\n\nexport const BadgeText = styled.span`\n font-weight: 500;\n color: ${({ theme }) => theme.colors.grey100.mode1};\n max-width: 70%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`\n\nexport const BadgeCount = styled.span`\n font-weight: 400;\n color: ${({ theme }) => theme.colors.grey100.mode1};\n`\n" }, { "path": "src/components/BannerBox/index.js", "content": "import { html } from 'htm/react'\n\nimport {\n CloseButtonWrapper,\n Container,\n HighlightedDescription,\n Message,\n Title\n} from './styles'\nimport {\n ButtonPrimary,\n ButtonRoundIcon,\n XIcon\n} from '../../lib-react-components'\n\n/**\n * @param {Object} props\n * @param {Function} props.onClose\n * @param {boolean} props.isVisible\n * @param {string} props.href\n * @param {string} props.title\n * @param {string} props.message\n * @param {string} props.highlightedDescription\n * @param {string} props.buttonText\n * @param {string} props.testId\n * @returns {null|Object}\n */\nexport const BannerBox = ({\n onClose,\n isVisible,\n href,\n title,\n message,\n highlightedDescription,\n buttonText\n}) => {\n if (!isVisible) return null\n\n return html`\n <${Container} data-testid=\"bannerbox-container\">\n <${Title}>${title} \n <${Message}> ${message} \n <${HighlightedDescription}> ${highlightedDescription} \n\n \n <${ButtonPrimary} onClick=${onClose} testId=\"bannerbox-button-download\">\n ${buttonText}\n \n \n <${CloseButtonWrapper}>\n <${ButtonRoundIcon}\n testId=\"bannerbox-button-close\"\n startIcon=${XIcon}\n onClick=${onClose}\n />\n \n \n `\n}\n" }, { "path": "src/components/BannerBox/styles.js", "content": "import styled from 'styled-components'\n\nexport const Container = styled.div`\n position: absolute;\n display: flex;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n gap: 10px;\n width: min(90%, 507px);\n flex-direction: column;\n align-items: flex-start;\n padding: 10px;\n\n border-radius: 10px;\n border: 1px solid ${({ theme }) => theme.colors.primary400.mode1};\n background-color: ${({ theme }) => theme.colors.grey400.mode1};\n`\n\nexport const Title = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n font-style: normal;\n font-weight: 700;\n line-height: normal;\n`\n\nexport const Message = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nexport const HighlightedDescription = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: normal;\n`\n\nexport const CloseButtonWrapper = styled.div`\n display: flex;\n top: -15px;\n right: -15px;\n position: absolute;\n`\n" }, { "path": "src/components/ButtonPlusCreateNew/index.js", "content": "import { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport { html } from 'htm/react'\n\nimport { Button } from './styles'\nimport { PlusIcon, XIcon } from '../../lib-react-components'\n\n/**\n * @param {{\n * isOpen: boolean\n * testId?: string\n * }} props\n */\nexport const ButtonPlusCreateNew = ({ isOpen, testId }) => html`\n <${Button} data-testid=${testId}>\n <${isOpen ? XIcon : PlusIcon} color=${colors.black.mode1} />\n \n`\n" }, { "path": "src/components/ButtonPlusCreateNew/index.test.js", "content": "import React from 'react'\n\nimport { render } from '@testing-library/react'\n\nimport { ButtonPlusCreateNew } from './index'\n\njest.mock('../../lib-react-components', () => ({\n PlusIcon: () => 'PlusIcon',\n XIcon: () => 'XIcon'\n}))\n\njest.mock('@tetherto/pearpass-lib-ui-theme-provider', () => ({\n colors: {\n black: {\n mode1: '#000000'\n }\n }\n}))\n\njest.mock('./styles', () => ({\n Button: ({ children }) =>
{children}
\n}))\n\ndescribe('ButtonPlusCreateNew', () => {\n it('renders PlusIcon when isOpen is false', () => {\n const { container, getByTestId } = render(\n \n )\n expect(getByTestId('button').textContent).toBe('PlusIcon')\n expect(container).toMatchSnapshot()\n })\n\n it('renders XIcon when isOpen is true', () => {\n const { container, getByTestId } = render(\n \n )\n expect(getByTestId('button').textContent).toBe('XIcon')\n expect(container).toMatchSnapshot()\n })\n\n it('passes the correct color prop to icons', () => {\n const { container } = render()\n expect(container).toMatchSnapshot()\n })\n\n it('uses the Button component from styles', () => {\n const { getByTestId } = render()\n expect(getByTestId('button')).toBeTruthy()\n })\n})\n" }, { "path": "src/components/ButtonPlusCreateNew/styles.js", "content": "import styled from 'styled-components'\n\nexport const Button = styled.button`\n display: flex;\n position: relative;\n width: 30px;\n height: 30px;\n padding: 5px;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 15px;\n background: ${({ theme }) => theme.colors.primary400.mode1};\n border: none;\n cursor: pointer;\n`\n" }, { "path": "src/components/CardSingleSetting/index.js", "content": "import { html } from 'htm/react'\n\nimport { Container, Description, Header, Title } from './styles'\n\n/**\n * @param {{\n * title: string\n * description?: string\n * additionalHeaderContent?: import('react').ReactNode\n * children: import('react').ReactNode\n * }} props\n */\nexport const CardSingleSetting = ({\n title,\n description,\n children,\n additionalHeaderContent,\n testId\n}) => html`\n <${Container} data-testid=${testId}>\n <${Header}>\n <${Title}>${title}\n ${additionalHeaderContent && additionalHeaderContent}\n \n ${description && html` <${Description}>${description} `}\n
${children}\n \n`\n" }, { "path": "src/components/CardSingleSetting/index.test.js", "content": "import React from 'react'\n\nimport { render } from '@testing-library/react'\n\nimport { CardSingleSetting } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('./styles', () => ({\n Container: 'div',\n Content: 'div',\n Header: 'div',\n Title: 'h3'\n}))\n\ndescribe('CardSingleSetting', () => {\n it('renders with title', () => {\n const { container, getByText } = render(\n \n )\n expect(getByText('Test Title')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n it('renders children correctly', () => {\n const { getByText } = render(\n \n
Child Content
\n \n )\n expect(getByText('Child Content')).toBeInTheDocument()\n })\n\n it('renders with the correct structure', () => {\n const { container } = render(\n \n
Child Content
\n \n )\n\n const header = container.querySelector('div > div:first-child')\n const content = container.querySelector('div > div:nth-child(2)')\n\n expect(header).toBeInTheDocument()\n expect(content).toBeInTheDocument()\n })\n})\n" }, { "path": "src/components/CardSingleSetting/styles.js", "content": "import styled from 'styled-components'\n\nexport const Container = styled.div`\n padding: 17px 20px;\n border-radius: 10px;\n border: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n display: flex;\n flex-direction: column;\n gap: 15px;\n`\nexport const Header = styled.div`\n padding-bottom: 15px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid ${({ theme }) => theme.colors.white.mode1};\n`\n\nexport const Title = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n font-style: normal;\n font-weight: 700;\n`\n\nexport const Description = styled.p`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\n" }, { "path": "src/components/CopyButton/index.tsx", "content": "import React from 'react'\nimport { useCopyToClipboard } from '../../hooks/useCopyToClipboard.electron'\nimport { useToast } from '../../context/ToastContext'\nimport { CopyIcon } from '../../lib-react-components'\nimport { useTranslation } from '../../hooks/useTranslation'\n\ninterface CopyButtonProps {\n value?: string\n testId?: string\n text?: string\n color?: string\n}\n\nconst CopyButton = ({\n value,\n testId,\n text,\n color\n}: CopyButtonProps): React.ReactElement => {\n const { t } = useTranslation()\n const { setToast } = useToast()\n\n const { copyToClipboard, isCopyToClipboardDisabled } = useCopyToClipboard({\n onCopy: () => {\n setToast({\n message: t('Copied to clipboard'),\n icon: CopyIcon\n })\n }\n })\n\n const handleCopy = () => {\n if (value) {\n copyToClipboard(value)\n }\n }\n\n if (isCopyToClipboardDisabled) {\n return <>\n }\n\n return (\n \n \n {text && (\n \n {text}\n \n )}\n
\n )\n}\n\nexport { CopyButton }\n" }, { "path": "src/components/CreateCustomField/index.js", "content": "import { useState } from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { html } from 'htm/react'\n\nimport { ArrowIconWrapper, DropDown, Label, Wrapper } from './styles'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\nimport {\n ArrowDownIcon,\n ArrowUpIcon,\n CommonFileIcon,\n PlusIcon,\n ButtonFilter\n} from '../../lib-react-components'\n\nconst OPTIONS = [\n // {\n // name: 'Email',\n // type: 'email',\n // icon: EmailIcon\n // },\n // {\n // name: 'Picture',\n // type: 'picture',\n // icon: ImageIcon\n // },\n {\n name: 'Comment',\n type: 'note',\n icon: CommonFileIcon\n }\n // {\n // name: 'Pin code',\n // type: 'pinCode',\n // icon: NineDotsIcon\n // },\n // {\n // name: 'Date',\n // type: 'date',\n // icon: CalendarIcon\n // },\n // {\n // name: 'Website',\n // type: 'website',\n // icon: WorldIcon\n // },\n // {\n // name: 'Phone number',\n // type: 'phoneNumber',\n // icon: PhoneIcon\n // }\n]\n\n/**\n * @param {{\n * onCreateCustom: (type: string) => void,\n * testId?: string,\n * dataId?: string\n * }} props\n */\nexport const CreateCustomField = ({ onCreateCustom, testId, dataId }) => {\n const { i18n } = useLingui()\n\n const [isOpen, setIsOpen] = useState(false)\n\n const wrapperRef = useOutsideClick({\n onOutsideClick: () => {\n setIsOpen(false)\n }\n })\n\n const handleSelect = (type) => {\n onCreateCustom(type)\n\n setIsOpen(false)\n }\n\n return html`\n <${Wrapper} ref=${wrapperRef} data-id=${dataId}>\n <${Label} data-testid=${testId} onClick=${() => setIsOpen(!isOpen)}>\n <${PlusIcon} size=\"21\" />\n\n
${i18n._('Create Custom')}
\n\n <${ArrowIconWrapper}>\n <${isOpen ? ArrowUpIcon : ArrowDownIcon} size=\"21\" />\n \n \n\n ${isOpen &&\n html`<${DropDown}>\n ${OPTIONS.map(\n (option) => html`\n <${ButtonFilter}\n testId=${`createcustomfield-option-${option.type}`}\n variant=\"secondary\"\n startIcon=${option.icon}\n onClick=${() => handleSelect(option.type)}\n >\n ${option.name}\n \n `\n )}\n `}\n \n `\n}\n" }, { "path": "src/components/CreateCustomField/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { CreateCustomField } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('@lingui/react', () => ({\n useLingui: () => ({\n i18n: { _: (str) => str }\n })\n}))\n\njest.mock('../../hooks/useOutsideClick', () => ({\n useOutsideClick: jest.fn()\n}))\n\ndescribe('CreateCustomField component', () => {\n const mockOnCreateCustom = jest.fn()\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders with correct initial state', () => {\n const { container } = render(\n \n \n \n )\n\n expect(container).toMatchSnapshot()\n })\n\n test('opens dropdown when clicked', () => {\n const { getByText } = render(\n \n \n \n )\n\n fireEvent.click(getByText('Create Custom'))\n\n expect(getByText('Comment')).toBeInTheDocument()\n })\n\n test('calls onCreateCustom when an option is selected', () => {\n const { getByText } = render(\n \n \n \n )\n\n fireEvent.click(getByText('Create Custom'))\n fireEvent.click(getByText('Comment'))\n\n expect(mockOnCreateCustom).toHaveBeenCalledWith('note')\n })\n\n test('closes dropdown after selecting an option', () => {\n const { getByText, queryByText } = render(\n \n \n \n )\n\n fireEvent.click(getByText('Create Custom'))\n fireEvent.click(getByText('Comment'))\n\n expect(queryByText('Comment')).not.toBeInTheDocument()\n })\n\n test('toggles dropdown visibility when clicked multiple times', () => {\n const { getByText, queryByText } = render(\n \n \n \n )\n\n fireEvent.click(getByText('Create Custom'))\n expect(getByText('Comment')).toBeInTheDocument()\n\n fireEvent.click(getByText('Create Custom'))\n expect(queryByText('Comment')).not.toBeInTheDocument()\n })\n})\n" }, { "path": "src/components/CreateCustomField/styles.js", "content": "import styled from 'styled-components'\n\nexport const Wrapper = styled.div`\n border-radius: 10px;\n background: ${({ theme }) => theme.colors.grey400.mode1};\n border: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n padding: 10px;\n z-index: 5;\n`\n\nexport const Label = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 400;\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n width: 100%;\n`\n\nexport const ArrowIconWrapper = styled.div`\n display: flex;\n margin-left: auto;\n`\n\nexport const DropDown = styled.div`\n display: flex;\n flex-wrap: wrap;\n gap: 17px;\n padding: 10px 10px 0 10px;\n border-top: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n margin-top: 10px;\n`\n" }, { "path": "src/components/CreateNewCategoryPopupContent/index.js", "content": "import { html } from 'htm/react'\n\nimport { MenuItem, MenuList } from './styles'\nimport { RECORD_COLOR_BY_TYPE } from '../../constants/recordColorByType'\nimport { RECORD_ICON_BY_TYPE } from '../../constants/recordIconByType'\n\n/**\n * @param {{\n * menuItems: Array<{ name: string; type: string; }>,\n * onClick: (item: { name: string; type: string; }) => void,\n * }}\n */\nexport const CreateNewCategoryPopupContent = ({ menuItems, onClick }) => {\n const handleMenuItemClick = (e, item) => {\n e.stopPropagation()\n\n onClick(item)\n }\n\n return html`\n <${MenuList}>\n ${menuItems?.map((item) => {\n const Icon = RECORD_ICON_BY_TYPE?.[item.type]\n\n return html`<${MenuItem}\n data-testid=${`createcategory-popup-${item.type}`}\n color=${RECORD_COLOR_BY_TYPE?.[item.type]}\n key=${item.type}\n onClick=${(e) => handleMenuItemClick(e, item)}\n >\n ${Icon &&\n html`<${Icon}\n size=\"24\"\n fill=${true}\n color=${RECORD_COLOR_BY_TYPE?.[item.type]}\n />`}\n ${item.name}\n `\n })}\n \n `\n}\n" }, { "path": "src/components/CreateNewCategoryPopupContent/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { CreateNewCategoryPopupContent } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('CreateNewCategoryPopupContent', () => {\n const mockMenuItems = [\n { type: 'note', name: 'Note' },\n { type: 'email', name: 'Email' }\n ]\n const mockOnClick = jest.fn()\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders menu items correctly', () => {\n const { getByText, container } = render(\n \n \n \n )\n\n expect(getByText('Note')).toBeInTheDocument()\n expect(getByText('Email')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n it('calls onClick with correct item when menu item is clicked', () => {\n const { getByText } = render(\n \n \n \n )\n\n const noteMenuItem = getByText('Note')\n fireEvent.click(noteMenuItem)\n\n expect(mockOnClick).toHaveBeenCalledWith(mockMenuItems[0])\n })\n})\n" }, { "path": "src/components/CreateNewCategoryPopupContent/styles.js", "content": "import styled from 'styled-components'\n\nexport const MenuList = styled.div`\n display: flex;\n font-family: 'Inter';\n position: absolute;\n flex-direction: column;\n width: 200px;\n align-items: flex-start;\n overflow: hidden;\n`\n\nexport const MenuItem = styled.div`\n display: flex;\n width: 100%;\n padding: 5px 9px;\n gap: 12px;\n align-self: stretch;\n color: ${({ theme }) => theme.colors.white.mode1};\n background: ${({ theme }) => theme.colors.grey400.mode1};\n border: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n border-bottom: none;\n align-items: center;\n cursor: pointer;\n position: relative;\n\n &:first-child {\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n\n &:last-child {\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n border-bottom: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n }\n\n &:hover {\n border-color: ${({ color }) => color};\n }\n\n &:hover + div {\n border-top-color: ${({ color }) => color};\n }\n`\n" }, { "path": "src/components/DropdownSwapVault/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport '@testing-library/jest-dom'\n\njest.mock(\n '../../containers/Modal/CreateOrEditVaultModalContentV2/CreateOrEditVaultModalContentV2',\n () => ({\n CreateOrEditVaultModalContentV2: () => null\n })\n)\n\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n useVault: () => ({\n refetch: jest.fn(),\n isVaultProtected: jest.fn()\n })\n}))\n\njest.mock('../../context/LoadingContext', () => ({\n useLoadingContext: () => ({\n setIsLoading: jest.fn()\n })\n}))\n\njest.mock('../../context/ModalContext', () => ({\n useModal: () => ({\n setModal: jest.fn(),\n closeModal: jest.fn()\n })\n}))\n\njest.mock('../../hooks/useTranslation', () => ({\n useTranslation: () => ({\n t: (key) => key\n })\n}))\n\nimport { DropdownSwapVault } from './index'\n\ndescribe('DropdownSwapVault component', () => {\n const mockVaults = [\n { id: 'vault2', name: 'vault2' },\n { id: 'vault3', name: 'vault3' }\n ]\n const mockSelectedVault = { id: 'vault1', name: 'vault1' }\n\n test('renders with selected vault even when vaults array is empty', () => {\n const { getAllByText } = render(\n \n \n \n )\n\n const elements = getAllByText('vault1')\n expect(elements).toHaveLength(1)\n })\n\n test('renders with selected vault', () => {\n const { getAllByText } = render(\n \n \n \n )\n\n const elements = getAllByText('vault1')\n\n expect(elements).toHaveLength(1)\n })\n\n test('displays all vault options when open', () => {\n const { getByText, getAllByText } = render(\n \n \n \n )\n\n fireEvent.click(getByText('vault1'))\n const vaultOptions = getAllByText(/vault[12]/)\n expect(vaultOptions).toHaveLength(2)\n })\n})\n" }, { "path": "src/components/DropdownSwapVault/index.tsx", "content": "import React, { useEffect, useState } from 'react'\n\nimport { html } from 'htm/react'\nimport { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport { useVault, type Vault } from '@tetherto/pearpass-lib-vault'\n\nimport {\n HeaderContainer,\n CreateVaultButton,\n Dropdown,\n DropdownItem,\n DropdownItemLabel,\n HeaderLabel,\n HeaderLeft,\n HeaderRight,\n Wrapper\n} from './styles'\nimport { CreateVaultModalContent } from '../../containers/Modal/CreateVaultModalContent'\nimport { CreateOrEditVaultModalContentV2 } from '../../containers/Modal/CreateOrEditVaultModalContentV2/CreateOrEditVaultModalContentV2'\nimport { VaultPasswordFormModalContent } from '../../containers/Modal/VaultPasswordFormModalContent'\nimport { useModal } from '../../context/ModalContext'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { isV2 } from '../../utils/designVersion'\nimport {\n LockCircleIcon,\n LockIcon,\n SmallArrowIcon\n} from '../../lib-react-components'\nimport { logger } from '../../utils/logger'\n\ninterface DropdownSwapVaultProps {\n vaults?: Vault[]\n selectedVault?: Vault\n}\n\nexport const DropdownSwapVault = ({ vaults, selectedVault }: DropdownSwapVaultProps) => {\n const { t } = useTranslation()\n\n const [isOpen, setIsOpen] = useState(false)\n\n const { closeModal, setModal } = useModal()\n\n const { isVaultProtected, refetch: refetchVault } = useVault()\n\n const [protectedVaultById, setProtectedVaultById] = useState>({})\n\n useEffect(() => {\n if (!isOpen || !vaults?.length) {\n return\n }\n\n let isCancelled = false\n\n const loadProtected = async () => {\n const results = await Promise.all(\n vaults.map(async (vault) => {\n try {\n const isProtected = await isVaultProtected(vault.id)\n return [vault.id, !!isProtected]\n } catch {\n return [vault.id, false]\n }\n })\n )\n\n if (isCancelled) {\n return\n }\n\n setProtectedVaultById(Object.fromEntries(results))\n }\n\n loadProtected()\n\n return () => {\n isCancelled = true\n }\n }, [isOpen, isVaultProtected, vaults])\n\n const handleVaultUnlock = async ({\n vault,\n password\n }: {\n vault: Vault\n password: string\n }) => {\n if (!vault.id) {\n return\n }\n\n try {\n await refetchVault(vault.id, { password })\n closeModal()\n } catch (error) {\n logger.error('DropdownSwapVault', error)\n\n throw error\n }\n }\n\n const onVaultSelect = async (vault: Vault) => {\n const cached = protectedVaultById[vault.id]\n const isProtected = cached ?? (await isVaultProtected(vault.id))\n\n if (cached === undefined) {\n setProtectedVaultById((prev) => ({ ...prev, [vault.id]: isProtected }))\n }\n\n if (isProtected) {\n setModal(\n html`<${VaultPasswordFormModalContent}\n onSubmit=${async (password: string) =>\n handleVaultUnlock({ vault, password })}\n vault=${vault}\n />`\n )\n } else {\n await refetchVault(vault.id)\n }\n\n setIsOpen(false)\n }\n\n const handleCreateNewVault = () => {\n setIsOpen(false)\n\n const CreateContent = isV2()\n ? CreateOrEditVaultModalContentV2\n : CreateVaultModalContent\n\n setModal(\n html`<${CreateContent} onClose=${closeModal} onSuccess=${closeModal} />`\n )\n }\n\n if (!selectedVault?.id) {\n return null\n }\n\n return (\n \n setIsOpen(!isOpen)}\n >\n \n \n {selectedVault?.name}\n \n\n \n \n \n \n\n \n {vaults?.map((vault, index) => (\n onVaultSelect(vault)}\n >\n {vault.name}\n {protectedVaultById[vault.id] ? (\n \n ) : null}\n \n ))}\n\n \n {t('Create New Vault')}\n \n \n \n )\n}\n" }, { "path": "src/components/DropdownSwapVault/styles.ts", "content": "import styled from 'styled-components'\n\nimport { BASE_TRANSITION_DURATION } from '../../constants/transitions'\n\nconst ROW_VERTICAL_PADDING = 9\nconst ROW_HORIZONTAL_PADDING = 10\nconst ROW_MIN_HEIGHT = 42\n\nexport const Wrapper = styled.div`\n width: 100%;\n background: ${({ theme }) => theme.colors.black.mode1};\n border-radius: 10px;\n`\n\nconst BaseRow = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n padding: ${ROW_VERTICAL_PADDING}px ${ROW_HORIZONTAL_PADDING}px;\n min-height: ${ROW_MIN_HEIGHT}px;\n\n border-radius: 10px;\n box-sizing: border-box;\n`\n\nexport const HeaderContainer = styled(BaseRow)<{ isOpen: boolean }>`\n border: 1px solid\n ${({ theme, isOpen }) =>\n isOpen ? theme.colors.primary400.mode1 : 'transparent'};\n cursor: pointer;\n user-select: none;\n`\n\nexport const HeaderLeft = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n`\n\nexport const HeaderLabel = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 14px;\n font-weight: 700;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`\n\nexport const HeaderRight = styled.div<{ isOpen: boolean }>`\n display: flex;\n align-items: center;\n\n & svg {\n transform: ${({ isOpen }) => (isOpen ? 'rotate(0deg)' : 'rotate(-90deg)')};\n transition: transform ${BASE_TRANSITION_DURATION}ms ease;\n }\n`\n\nexport const Dropdown = styled.div<{ isOpen: boolean }>`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n\n padding: ${({ isOpen }) => (isOpen ? '10px' : '0')};\n\n max-height: ${({ isOpen }) => (isOpen ? '260px' : '0')};\n opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};\n overflow-x: hidden;\n overflow-y: ${({ isOpen }) => (isOpen ? 'auto' : 'hidden')};\n pointer-events: ${({ isOpen }) => (isOpen ? 'auto' : 'none')};\n\n transition:\n max-height ${BASE_TRANSITION_DURATION}ms ease,\n opacity ${BASE_TRANSITION_DURATION}ms ease,\n padding ${BASE_TRANSITION_DURATION}ms ease;\n`\n\nexport const DropdownItem = styled(BaseRow)<{\n isOpen?: boolean\n delayMs?: number\n}>`\n border: 1px solid transparent;\n background: ${({ theme }) => theme.colors.grey500.mode1};\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 14px;\n font-weight: 700;\n cursor: pointer;\n\n opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};\n transform: ${({ isOpen }) => (isOpen ? 'translateY(0)' : 'translateY(-6px)')};\n will-change: transform, opacity;\n\n transition:\n opacity ${BASE_TRANSITION_DURATION}ms ease,\n transform ${BASE_TRANSITION_DURATION}ms ease;\n transition-delay: ${({ isOpen, delayMs = 0 }) =>\n isOpen ? `${delayMs}ms` : '0ms'};\n\n &:hover {\n border-color: ${({ theme }) => theme.colors.primary400.mode1};\n }\n\n & svg {\n flex-shrink: 0;\n }\n`\n\nexport const DropdownItemLabel = styled.span`\n flex: 1;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`\n\nexport const CreateVaultButton = styled(DropdownItem)`\n justify-content: flex-start;\n color: ${({ theme }) => theme.colors.primary400.mode1};\n`\n" }, { "path": "src/components/EditFolderPopupContent/index.js", "content": "import { useMemo } from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { useFolders } from '@tetherto/pearpass-lib-vault'\nimport { html } from 'htm/react'\n\nimport { MenuItem, MenuList } from './styles'\nimport { ConfirmationModalContent } from '../../containers/Modal/ConfirmationModalContent'\nimport { CreateFolderModalContent } from '../../containers/Modal/CreateFolderModalContent'\nimport { CreateFolderModalContentV2 } from '../../containers/Modal/CreateFolderModalContentV2/CreateFolderModalContentV2'\nimport { DeleteFolderModalContentV2 } from '../../containers/Modal/DeleteFolderModalContentV2/DeleteFolderModalContentV2'\nimport { useModal } from '../../context/ModalContext'\nimport { DeleteIcon, FolderIcon } from '../../lib-react-components'\nimport { isV2 } from '../../utils/designVersion'\n\n/**\n *\n * @param {{\n * name: string\n * }} props\n * @returns\n */\nexport const EditFolderPopupContent = ({ name }) => {\n const { i18n } = useLingui()\n const { deleteFolder, data: folderData } = useFolders()\n const { setModal, closeModal } = useModal()\n\n const menuItems = useMemo(\n () => [\n {\n name: i18n._('Delete'),\n type: 'delete',\n icon: DeleteIcon,\n onClick: () => {\n if (isV2()) {\n const count =\n folderData?.customFolders?.[name]?.records?.length ?? 0\n if (count === 1) {\n deleteFolder(name)\n closeModal()\n } else {\n setModal(\n \n )\n }\n } else {\n setModal(\n html`<${ConfirmationModalContent}\n primaryAction=${() => {\n deleteFolder(name)\n closeModal()\n }}\n secondaryAction=${closeModal}\n title=${i18n._('Are you sure you want to delete this folder?')}\n text=${i18n._(\n 'This action will permanently delete the folder and all items contained within it. Are you sure you want to proceed?'\n )}\n />`\n )\n }\n }\n },\n {\n name: i18n._('Rename'),\n type: 'rename',\n icon: FolderIcon,\n onClick: () =>\n isV2()\n ? setModal(\n \n )\n : setModal(\n html`<${CreateFolderModalContent}\n initialValues=${{ title: name }}\n />`\n )\n }\n ],\n [closeModal, deleteFolder, folderData, i18n, name, setModal]\n )\n\n const handleMenuItemClick = (e, item) => {\n e.stopPropagation()\n\n item.onClick()\n }\n\n return html`\n <${MenuList}>\n ${menuItems?.map((item) => {\n const Icon = item.icon\n\n return html`<${MenuItem}\n data-testid=${`folder-menuitem-${item.type}`}\n key=${item.type}\n onClick=${(e) => handleMenuItemClick(e, item)}\n >\n ${Icon && html`<${Icon} size=\"24\" />`} ${item.name}\n `\n })}\n \n `\n}\n" }, { "path": "src/components/EditFolderPopupContent/styles.js", "content": "import styled from 'styled-components'\n\nexport const MenuList = styled.div`\n display: flex;\n font-family: 'Inter';\n position: absolute;\n flex-direction: column;\n width: 200px;\n align-items: flex-start;\n overflow: hidden;\n`\n\nexport const MenuItem = styled.div`\n display: flex;\n width: 100%;\n padding: 5px 9px;\n align-items: center;\n gap: 12px;\n align-self: stretch;\n color: ${({ theme }) => theme.colors.white.mode1};\n background: ${({ theme }) => theme.colors.grey400.mode1};\n border: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n border-bottom: none;\n cursor: pointer;\n position: relative;\n\n &:first-child {\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n\n &:last-child {\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n border-bottom: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n }\n\n &:hover {\n border-color: ${({ color }) => color};\n }\n\n &:hover + div {\n border-top-color: ${({ color }) => color};\n }\n`\n" }, { "path": "src/components/EmptyCollectionView/index.js", "content": "import { RECORD_TYPES } from '@tetherto/pearpass-lib-vault'\nimport { html } from 'htm/react'\n\nimport {\n CollectionsContainer,\n CollectionsTitle,\n CollectionsWrapper\n} from './styles'\nimport { RECORD_ICON_BY_TYPE } from '../../constants/recordIconByType'\nimport { useRouter } from '../../context/RouterContext'\nimport { useCreateOrEditRecord } from '../../hooks/useCreateOrEditRecord'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { ButtonCreate } from '../../lib-react-components'\n\n/**\n * @param {{\n * selectedFolder?: string\n * isFavoritesView?: boolean\n * isSearchActive?: boolean\n * }} props\n */\nexport const EmptyCollectionView = ({\n selectedFolder,\n isFavoritesView,\n isSearchActive\n}) => {\n const { data } = useRouter()\n const { t } = useTranslation()\n const { handleCreateOrEditRecord } = useCreateOrEditRecord()\n\n const createCollectionOptions = [\n { text: t('Create a login'), type: RECORD_TYPES.LOGIN },\n { text: t('Create an identity'), type: RECORD_TYPES.IDENTITY },\n {\n text: t('Create a credit card'),\n type: RECORD_TYPES.CREDIT_CARD\n },\n { text: t('Save a Wi-fi'), type: RECORD_TYPES.WIFI_PASSWORD },\n { text: t('Save a Recovery phrase'), type: RECORD_TYPES.PASS_PHRASE },\n { text: t('Create a note'), type: RECORD_TYPES.NOTE },\n { text: t('Create a custom element'), type: RECORD_TYPES.CUSTOM }\n ]\n\n return html`\n <${CollectionsWrapper}\n data-testid=\"empty-collection-view\"\n $isSearchActive=${isSearchActive}\n >\n <${CollectionsContainer}>\n <${CollectionsTitle}>\n \n ${isSearchActive\n ? t('No result found.')\n : t('This collection is empty.')}\n \n\n ${!isSearchActive &&\n html`

\n ${t('Create a new element or pass to another collection')}\n

`}\n \n\n ${!isSearchActive &&\n createCollectionOptions\n .filter(\n (option) =>\n data.recordType === 'all' || option.type === data.recordType\n )\n .map(\n (option) => html`\n <${ButtonCreate}\n key=${option.type}\n testId=${`emptycollection-button-create-${option.type}`}\n startIcon=${RECORD_ICON_BY_TYPE[option.type]}\n onClick=${() =>\n handleCreateOrEditRecord({\n recordType: option.type,\n selectedFolder,\n isFavorite: isFavoritesView ? true : undefined\n })}\n >\n ${option.text}\n \n `\n )}\n \n \n `\n}\n" }, { "path": "src/components/EmptyCollectionView/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { EmptyCollectionView } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('../../context/RouterContext', () => ({\n useRouter: () => ({\n data: {\n recordType: 'all'\n }\n })\n}))\n\nconst mockHandleCreateOrEditRecord = jest.fn()\njest.mock('../../hooks/useCreateOrEditRecord', () => ({\n useCreateOrEditRecord: () => ({\n handleCreateOrEditRecord: mockHandleCreateOrEditRecord\n })\n}))\n\njest.mock('@lingui/react', () => ({\n useLingui: () => ({\n i18n: { _: (str) => str }\n })\n}))\n\ndescribe('EmptyCollectionView component', () => {\n const renderComponent = () =>\n render(\n \n \n \n )\n\n test('renders empty collection message', () => {\n const { container, getByText } = renderComponent()\n expect(getByText('This collection is empty.')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('displays all create options when recordType is \"all\"', () => {\n const { getByText } = renderComponent()\n expect(getByText('Create a login')).toBeInTheDocument()\n expect(getByText('Create an identity')).toBeInTheDocument()\n expect(getByText('Create a credit card')).toBeInTheDocument()\n expect(getByText('Create a note')).toBeInTheDocument()\n expect(getByText('Create a custom element')).toBeInTheDocument()\n })\n test('buttons are clickable and trigger handleCreateOrEditRecord', () => {\n const { getByText } = renderComponent()\n const loginButton = getByText('Create a login')\n\n fireEvent.click(loginButton)\n expect(mockHandleCreateOrEditRecord).toHaveBeenCalledWith({\n recordType: 'login',\n selectedFolder: 'test-folder',\n isFavorite: true\n })\n })\n\n test('displays help text', () => {\n const { getByText } = renderComponent()\n expect(\n getByText('Create a new element or pass to another collection')\n ).toBeInTheDocument()\n })\n\n describe('when isSearchActive is true', () => {\n const renderSearchComponent = () =>\n render(\n \n \n \n )\n\n test('renders \"No result found.\" message', () => {\n const { getByText } = renderSearchComponent()\n expect(getByText('No result found.')).toBeInTheDocument()\n })\n\n test('does not render empty collection message', () => {\n const { queryByText } = renderSearchComponent()\n expect(queryByText('This collection is empty.')).not.toBeInTheDocument()\n })\n\n test('does not render help text', () => {\n const { queryByText } = renderSearchComponent()\n expect(\n queryByText('Create a new element or pass to another collection')\n ).not.toBeInTheDocument()\n })\n\n test('does not render create buttons', () => {\n const { queryByText } = renderSearchComponent()\n expect(queryByText('Create a login')).not.toBeInTheDocument()\n expect(queryByText('Create an identity')).not.toBeInTheDocument()\n expect(queryByText('Create a credit card')).not.toBeInTheDocument()\n expect(queryByText('Create a note')).not.toBeInTheDocument()\n expect(queryByText('Create a custom element')).not.toBeInTheDocument()\n })\n })\n})\n" }, { "path": "src/components/EmptyCollectionView/styles.js", "content": "import styled from 'styled-components'\n\nexport const CollectionsWrapper = styled.div`\n display: flex;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: ${({ $isSearchActive }) =>\n $isSearchActive ? 'flex-start' : 'center'};\n padding-top: ${({ $isSearchActive }) => ($isSearchActive ? '20%' : '0')};\n`\n\nexport const CollectionsContainer = styled.div`\n display: flex;\n flex-direction: column;\n width: 300px;\n gap: 10px;\n`\n\nexport const CollectionsTitle = styled.div`\n display: flex;\n flex-direction: column;\n gap: 5px;\n margin-bottom: 20px;\n color: ${({ theme }) => theme.colors.white.mode1};\n text-align: center;\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 600;\n\n & span {\n font-weight: 600;\n }\n\n & p {\n font-weight: 400;\n }\n`\n" }, { "path": "src/components/FileDropArea/index.js", "content": "import { useRef, useState } from 'react'\n\nimport { html } from 'htm/react'\n\nimport { DropAreaWrapper, HiddenInput, Label } from './styles'\n\n/**\n * @param {{\n * label: import('react').ReactNode,\n * onFileDrop: (files: File[]) => void,\n * accepts: string,\n * }} props\n */\nexport const FileDropArea = ({ label, onFileDrop, accepts }) => {\n const fileInputRef = useRef(null)\n const [isDragging, setIsDragging] = useState(false)\n\n const handleAreaClick = () => {\n fileInputRef.current?.click()\n }\n\n const handleFileChange = (event) => {\n const files = event.target.files\n\n onFileDrop?.(files)\n }\n\n const handleDragOver = (event) => {\n event.preventDefault()\n\n setIsDragging(true)\n }\n\n const handleDragLeave = () => {\n setIsDragging(false)\n }\n\n const handleDrop = (event) => {\n event.preventDefault()\n\n const files = Array.from(event.dataTransfer.files)\n\n onFileDrop?.(files)\n }\n\n return html` <${DropAreaWrapper}\n onClick=${handleAreaClick}\n onDragOver=${handleDragOver}\n onDragLeave=${handleDragLeave}\n onDrop=${handleDrop}\n isDragging=${isDragging}\n >\n <${Label}> ${label} \n <${HiddenInput}\n ref=${fileInputRef}\n type=\"file\"\n accept=${accepts}\n onChange=${handleFileChange}\n />\n `\n}\n" }, { "path": "src/components/FileDropArea/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { FileDropArea } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('FileDropArea component', () => {\n const mockOnFileDrop = jest.fn()\n const testLabel = 'Drop files here'\n\n const renderComponent = () =>\n render(\n \n \n \n )\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders the label correctly', () => {\n const { getByText, container } = renderComponent()\n expect(getByText(testLabel)).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('triggers file input click when area is clicked', () => {\n const { getByText, container } = renderComponent()\n const dropArea = getByText(testLabel)\n const fileInput = container.querySelector('input[type=\"file\"]')\n\n const mockClick = jest.spyOn(fileInput, 'click')\n fireEvent.click(dropArea)\n\n expect(mockClick).toHaveBeenCalled()\n })\n\n test('calls onFileDrop when files are selected via input', () => {\n const { container } = renderComponent()\n const fileInput = container.querySelector('input[type=\"file\"]')\n\n const testFiles = [\n new File(['test content'], 'test.txt', { type: 'text/plain' })\n ]\n Object.defineProperty(fileInput, 'files', {\n value: testFiles\n })\n\n fireEvent.change(fileInput)\n expect(mockOnFileDrop).toHaveBeenCalledWith(testFiles)\n })\n\n test('handles file drop correctly', () => {\n const { getByText } = renderComponent()\n const dropArea = getByText(testLabel)\n\n const testFiles = [\n new File(['test content'], 'test.txt', { type: 'text/plain' })\n ]\n\n fireEvent.drop(dropArea, {\n dataTransfer: {\n files: testFiles\n }\n })\n\n expect(mockOnFileDrop).toHaveBeenCalledWith(testFiles)\n })\n})\n" }, { "path": "src/components/FileDropArea/styles.js", "content": "import styled from 'styled-components'\n\nexport const DropAreaWrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 83px;\n border-radius: 10px;\n width: 100%;\n border: 1px dashed ${({ theme }) => theme.colors.grey100.mode1};\n background: ${({ theme }) => theme.colors.grey400.mode1};\n opacity: ${({ isDragging }) => (isDragging ? 0.5 : 1)};\n`\n\nexport const Label = styled.div`\n color: ${({ theme }) => theme.colors.grey100.mode1};\n font-family: 'Inter';\n font-size: 14px;\n font-weight: 500;\n`\n\nexport const HiddenInput = styled.input`\n display: none;\n`\n" }, { "path": "src/components/FileUploadContent/index.js", "content": "import { useRef, useState } from 'react'\n\nimport {\n MAX_FILE_SIZE_MB,\n MAX_FILE_SIZE_BYTES\n} from '@tetherto/pearpass-lib-constants'\nimport { html } from 'htm/react'\n\nimport { ContentWrapper, FileSizeWarning, HiddenInput } from './styles'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { ButtonSecondary } from '../../lib-react-components'\nimport { YellowErrorIcon } from '../../lib-react-components'\nimport { FileDropArea } from '../FileDropArea'\n\nexport const FileUploadContent = ({\n accepts,\n isTypeImage,\n handleFileChange\n}) => {\n const { t } = useTranslation()\n const [isFileSizeWarning, setIsFileSizeWarning] = useState(false)\n const fileInputRef = useRef(null)\n\n const handleBrowseClick = () => {\n fileInputRef.current?.click()\n }\n\n const onFileChange = (files) => {\n const file = files?.[0]\n\n if (!file) return\n\n if (file.size > MAX_FILE_SIZE_BYTES) {\n setIsFileSizeWarning(true)\n return\n }\n\n if (isFileSizeWarning) {\n setIsFileSizeWarning(false)\n }\n\n handleFileChange(files)\n }\n\n return html` <${ContentWrapper}>\n <${FileDropArea}\n onFileDrop=${onFileChange}\n accepts=${accepts}\n label=${isTypeImage\n ? t('Drop picture here...')\n : t('Drop file here...')}\n />\n \n\n ${isFileSizeWarning\n ? html` <${FileSizeWarning}>\n <${YellowErrorIcon} size=\"18\" />\n ${t(\n `Your picture is too large. Please upload one that’s ${MAX_FILE_SIZE_MB} MB or smaller.`\n )}\n `\n : html`<${FileSizeWarning}>\n ${t(`Maximum file size: ${MAX_FILE_SIZE_MB} MB.`)}\n `}\n\n <${ButtonSecondary} onClick=${handleBrowseClick}>\n ${t('Browse folders')}\n \n\n <${HiddenInput}\n ref=${fileInputRef}\n type=\"file\"\n accept=${accepts}\n onChange=${(event) => onFileChange(event?.target?.files)}\n />`\n}\n" }, { "path": "src/components/FileUploadContent/styles.js", "content": "import styled from 'styled-components'\n\nexport const ContentWrapper = styled.div`\n width: 100%;\n`\n\nexport const HiddenInput = styled.input`\n display: none;\n`\n\nexport const FileSizeWarning = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 14px;\n display: flex;\n align-items: center;\n gap: 6px;\n`\n" }, { "path": "src/components/FolderDropdown/FolderDropdownV2.tsx", "content": "import { useMemo } from 'react'\n\nimport {\n Button,\n ContextMenu,\n MultiSlotInput,\n NavbarListItem,\n SelectField,\n rawTokens,\n useTheme\n} from '@tetherto/pearpass-lib-ui-kit'\nimport { Close, CreateNewFolder, Folder, KeyboardArrowBottom } from '@tetherto/pearpass-lib-ui-kit/icons'\nimport { useFolders } from '@tetherto/pearpass-lib-vault'\n\nimport { CreateFolderModalContentV2 } from '../../containers/Modal/CreateFolderModalContentV2/CreateFolderModalContentV2'\nimport { useModal } from '../../context/ModalContext'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { sortByName } from '../../utils/sortByName'\n\ntype FolderDropdownV2Props = {\n selectedFolder?: string\n onFolderSelect: (name: string) => void\n}\n\nexport const FolderDropdownV2 = ({\n selectedFolder,\n onFolderSelect\n}: FolderDropdownV2Props) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const { setModal, closeModal } = useModal()\n const { data: folders } = useFolders()\n\n const folderOptions = useMemo(() => {\n return sortByName(\n Object.values(\n (folders?.customFolders ?? {}) as Record\n )\n ).map((f) => f.name)\n }, [folders])\n\n const handleCreateFolder = () => {\n setModal(\n {\n onFolderSelect(folderName)\n }}\n />\n )\n }\n\n return (\n \n \n {selectedFolder && (\n \n }\n onClick={(e) => {\n e.stopPropagation()\n onFolderSelect(selectedFolder)\n }}\n data-testid='createoredit-folder-clear-v2'\n />\n )}\n \n \n }\n />\n \n }\n >\n {folderOptions.map((name) => (\n \n }\n iconSize={16}\n label={name}\n selected={selectedFolder === name}\n onClick={() => onFolderSelect(name)}\n testID={`createoredit-folder-option-v2-${name}`}\n />\n ))}\n \n }\n iconSize={16}\n label={t('Add New Folder')}\n onClick={handleCreateFolder}\n testID='createoredit-folder-create-v2'\n />\n \n )\n}\n\n" }, { "path": "src/components/FolderDropdown/index.js", "content": "import React, { useEffect } from 'react'\n\nimport { useFolders } from '@tetherto/pearpass-lib-vault'\nimport { html } from 'htm/react'\n\nimport { CreateFolderModalContent } from '../../containers/Modal/CreateFolderModalContent'\nimport { CreateFolderModalContentV2 } from '../../containers/Modal/CreateFolderModalContentV2/CreateFolderModalContentV2'\nimport { useModal } from '../../context/ModalContext'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { PlusIcon, StarIcon } from '../../lib-react-components'\nimport { isV2 } from '../../utils/designVersion'\nimport { FAVORITES_FOLDER_ID } from '../../utils/isFavorite'\nimport { sortByName } from '../../utils/sortByName'\nimport { MenuDropdown } from '../MenuDropdown'\nimport { DropDownItem } from '../MenuDropdown/styles'\n\nconst NO_FOLDER = 'no-folder'\n\n/**\n * @param {{\n * selectedFolder?: {\n * name: string;\n * icon?: React.ReactNode;\n * },\n * onFolderSelect: (folder: {\n * name: string;\n * icon?: React.ReactNode;\n * }) => void\n * testId?: string\n * }} props\n */\nexport const FolderDropdown = ({ selectedFolder, onFolderSelect, testId }) => {\n const { data: folders } = useFolders()\n\n const { t } = useTranslation()\n const { setModal, closeModal } = useModal()\n\n const customFolders = React.useMemo(() => {\n const mappedFolders = sortByName(\n Object.values(folders?.customFolders ?? {})\n ).map((folder) => ({ name: folder.name }))\n\n if (selectedFolder) {\n mappedFolders.unshift({ name: t('No Folder'), type: NO_FOLDER })\n }\n\n return mappedFolders\n }, [folders])\n\n const isFavorite = selectedFolder === FAVORITES_FOLDER_ID\n const name = isFavorite ? t('Favorite') : selectedFolder\n const icon = isFavorite ? StarIcon : undefined\n\n const handleCreateNewFolder = () => {\n isV2()\n ? setModal(\n closeModal()}\n onCreate={(folderData) =>\n onFolderSelect({ name: folderData?.folder })\n }\n />\n )\n : setModal(html`\n <${CreateFolderModalContent}\n onCreate=${(folderData) =>\n onFolderSelect({ name: folderData?.folder })}\n />\n `)\n }\n\n const handleFolderSelect = (folder) => {\n onFolderSelect(folder.type === NO_FOLDER ? undefined : folder)\n }\n useEffect(() => {\n if (!selectedFolder) {\n return\n }\n\n const existingFolders = Object.values(folders?.customFolders ?? {})\n const exists = existingFolders.some(\n (folder) => folder.name === selectedFolder\n )\n\n if (!exists) {\n onFolderSelect(undefined)\n }\n }, [folders, onFolderSelect, selectedFolder])\n\n const CreteNewFolderComponent = html`\n <${DropDownItem}\n data-testid=\"menudropdown-create-new\"\n onClick=${() => handleCreateNewFolder()}\n >\n <${PlusIcon} size=\"24\" />\n ${t('Create new')}\n \n `\n\n return html`\n <${MenuDropdown}\n testId=${testId}\n selectedItem=${{ name, icon }}\n onItemSelect=${handleFolderSelect}\n items=${customFolders}\n bottomComponent=${CreteNewFolderComponent}\n />\n `\n}\n" }, { "path": "src/components/FolderDropdown/index.test.js", "content": "import React from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { render, screen, fireEvent } from '@testing-library/react'\nimport { useFolders } from '@tetherto/pearpass-lib-vault'\n\nimport { FolderDropdown } from './index'\nimport '@testing-library/jest-dom'\n\nconst mockSetModal = jest.fn()\n\njest.mock(\n '../../containers/Modal/CreateFolderModalContentV2/CreateFolderModalContentV2',\n () => ({\n CreateFolderModalContentV2: function MockCreateFolderModalContentV2() {\n return null\n }\n })\n)\n\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n useFolders: jest.fn()\n}))\n\njest.mock('@lingui/react', () => ({\n useLingui: jest.fn()\n}))\n\njest.mock('../../context/ModalContext', () => ({\n useModal: jest.fn(() => ({\n setModal: mockSetModal,\n closeModal: jest.fn()\n }))\n}))\n\njest.mock('../MenuDropdown', () => ({\n MenuDropdown: ({ selectedItem, onItemSelect, items, bottomComponent }) => (\n
\n
{selectedItem.name}
\n
\n {items.map((item, index) => (\n onItemSelect(item)}\n >\n {item.name}\n \n ))}\n
\n
{bottomComponent}
\n
\n )\n}))\n\njest.mock('../MenuDropdown/styles', () => ({\n DropDownItem: ({ children, ...rest }) => (\n
\n {children}\n
\n )\n}))\n\ndescribe('FolderDropdown', () => {\n const mockOnFolderSelect = jest.fn()\n const mockFolders = {\n customFolders: {\n folder1: { name: 'Personal' },\n folder2: { name: 'Work' },\n folder3: { name: 'Finance' }\n }\n }\n\n beforeEach(() => {\n useFolders.mockReturnValue({ data: mockFolders })\n useLingui.mockReturnValue({ i18n: { _: (text) => text } })\n mockOnFolderSelect.mockClear()\n mockSetModal.mockClear()\n })\n\n test('renders with correct custom folders', () => {\n render(\n \n )\n\n expect(screen.getByTestId('selected-item')).toHaveTextContent('Personal')\n expect(screen.getByTestId('item-Personal')).toBeInTheDocument()\n expect(screen.getByTestId('item-Work')).toBeInTheDocument()\n expect(screen.getByTestId('item-Finance')).toBeInTheDocument()\n // Bottom \"Create new\" component is rendered\n expect(screen.getByTestId('bottom-component')).toBeInTheDocument()\n })\n\n test('handles favorites folder correctly', () => {\n render(\n \n )\n\n expect(screen.getByTestId('selected-item')).toHaveTextContent('Favorite')\n })\n\n test('calls onFolderSelect when folder is selected', () => {\n render(\n \n )\n\n fireEvent.click(screen.getByTestId('item-Work'))\n expect(mockOnFolderSelect).toHaveBeenCalledWith({ name: 'Work' })\n })\n\n test('handles empty folders gracefully', () => {\n useFolders.mockReturnValue({ data: null })\n\n render(\n \n )\n\n expect(screen.getByTestId('items')).toBeInTheDocument()\n expect(screen.queryByTestId('item-Personal')).not.toBeInTheDocument()\n })\n\n test('handles undefined selectedFolder', () => {\n render()\n\n expect(screen.getByTestId('selected-item')).toBeInTheDocument()\n expect(screen.getByTestId('selected-item').textContent).toBe('')\n })\n\n test('clears selectedFolder when it no longer exists', () => {\n useFolders.mockReturnValue({\n data: {\n customFolders: {\n folder1: { name: 'Other' }\n }\n }\n })\n\n render(\n \n )\n\n expect(mockOnFolderSelect).toHaveBeenCalledWith(undefined)\n })\n\n test('opens create-folder modal and selects newly created folder', () => {\n render(\n \n )\n\n const createButton = screen.getByTestId('menudropdown-create-new')\n fireEvent.click(createButton)\n\n expect(mockSetModal).toHaveBeenCalledTimes(1)\n\n const modalElement = mockSetModal.mock.calls[0][0]\n expect(typeof modalElement.props.onCreate).toBe('function')\n\n mockOnFolderSelect.mockClear()\n\n // Simulate onCreate being called with an object that contains folder field\n modalElement.props.onCreate({ folder: 'NewFolder' })\n expect(mockOnFolderSelect).toHaveBeenCalledTimes(1)\n expect(mockOnFolderSelect).toHaveBeenCalledWith({ name: 'NewFolder' })\n })\n})\n" }, { "path": "src/components/FolderDropdown/styles.js", "content": "import styled, { css } from 'styled-components'\n\nexport const Label = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isHidden'].includes(prop)\n})`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 16px;\n cursor: pointer;\n white-space: nowrap;\n\n ${({ isHidden }) => {\n if (isHidden) {\n return css`\n opacity: 0;\n pointer-events: none;\n padding: 5px;\n `\n }\n }}\n`\n\nexport const MainWrapper = styled.div`\n position: relative;\n`\n\nexport const Wrapper = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isOpen'].includes(prop)\n})`\n border-radius: 10px;\n background: ${({ theme }) => theme.colors.grey400.mode1};\n border: 1px solid\n ${({ theme, isOpen }) =>\n isOpen ? theme.colors.primary400.mode1 : theme.colors.grey100.mode1};\n padding: 5px;\n top: 0;\n left: 0;\n position: absolute;\n z-index: 5;\n\n &:hover {\n border-color: ${({ theme }) => theme.colors.primary400.mode1};\n\n & ${Label} path {\n stroke: ${({ theme }) => theme.colors.primary400.mode1};\n }\n }\n`\n\nexport const DropDown = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 4px 5px 0 30px;\n`\n\nexport const DropDownItem = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 10px;\n white-space: nowrap;\n cursor: pointer;\n`\n\nexport const FolderIconWrapper = styled.div`\n flex-shrink: 0;\n`\n" }, { "path": "src/components/FormGroup/index.js", "content": "import { useState } from 'react'\n\nimport { html } from 'htm/react'\n\nimport { Collapse, TitleWrapper, Wrapper } from './styles'\nimport { ArrowDownIcon, ArrowUpIcon } from '../../lib-react-components'\n\n/**\n * @param {{\n * title?: string,\n * isCollapse?: boolean\n * defaultOpenState?: boolean\n * children: import('react').ReactNode\n * testId?: string\n * }} props\n */\nexport const FormGroup = ({\n title,\n isCollapse,\n children,\n defaultOpenState = true,\n testId\n}) => {\n const [isOpen, setIsOpen] = useState(defaultOpenState)\n\n if (!children) {\n return\n }\n\n return html`\n <${Wrapper}>\n ${!!title?.length &&\n isCollapse &&\n html`\n <${TitleWrapper}\n data-testid=${testId}\n onClick=${() => setIsOpen(!isOpen)}\n >\n <${isOpen ? ArrowUpIcon : ArrowDownIcon} />\n ${title}\n \n `}\n ${isOpen && html` <${Collapse}> ${children} `}\n \n `\n}\n" }, { "path": "src/components/FormGroup/index.test.js", "content": "import React from 'react'\n\nimport { render, screen, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { FormGroup } from './index'\n\nimport '@testing-library/jest-dom'\n\njest.mock('../../lib-react-components', () => ({\n ArrowDownIcon: () =>
ArrowDown
,\n ArrowUpIcon: () =>
ArrowUp
\n}))\n\ndescribe('FormGroup', () => {\n const mockTitle = 'Test Title'\n const mockChildren =
Test Children
\n\n test('renders with children and title when isCollapse is true', () => {\n const { container } = render(\n \n \n {mockChildren}\n \n \n )\n\n expect(screen.getByText(mockTitle)).toBeInTheDocument()\n expect(screen.getByTestId('test-children')).toBeInTheDocument()\n expect(screen.getByTestId('arrow-up-icon')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('renders without title section when isCollapse is false', () => {\n render(\n \n {mockChildren}\n \n )\n\n expect(screen.queryByText(mockTitle)).not.toBeInTheDocument()\n expect(screen.getByTestId('test-children')).toBeInTheDocument()\n })\n\n test('toggles collapse state when title is clicked', () => {\n render(\n \n \n {mockChildren}\n \n \n )\n\n expect(screen.getByTestId('test-children')).toBeInTheDocument()\n expect(screen.getByTestId('arrow-up-icon')).toBeInTheDocument()\n\n fireEvent.click(screen.getByText(mockTitle))\n\n expect(screen.queryByTestId('test-children')).not.toBeInTheDocument()\n expect(screen.queryByTestId('arrow-up-icon')).not.toBeInTheDocument()\n expect(screen.getByTestId('arrow-down-icon')).toBeInTheDocument()\n\n fireEvent.click(screen.getByText(mockTitle))\n\n expect(screen.getByTestId('test-children')).toBeInTheDocument()\n expect(screen.getByTestId('arrow-up-icon')).toBeInTheDocument()\n })\n\n test('does not render when children is not provided', () => {\n const { container } = render(\n \n \n \n )\n expect(container.firstChild).toBeNull()\n })\n\n test('renders without title when title is empty string', () => {\n render(\n \n \n {mockChildren}\n \n \n )\n\n expect(screen.queryByTestId('arrow-up-icon')).not.toBeInTheDocument()\n expect(screen.getByTestId('test-children')).toBeInTheDocument()\n })\n\n test('renders without title when title is undefined', () => {\n render({mockChildren})\n\n expect(screen.queryByTestId('arrow-up-icon')).not.toBeInTheDocument()\n expect(screen.getByTestId('test-children')).toBeInTheDocument()\n })\n})\n" }, { "path": "src/components/FormGroup/styles.js", "content": "import styled from 'styled-components'\n\nexport const Wrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n`\n\nexport const TitleWrapper = styled.div`\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: ${({ theme }) => theme.colors.grey100.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 400;\n cursor: pointer;\n align-self: flex-start;\n`\n\nexport const Collapse = styled.div`\n width: 100%;\n`\n" }, { "path": "src/components/FormModalHeaderWrapper/index.js", "content": "import { html } from 'htm/react'\n\nimport { Buttons, FormModalHeaderWrapperComponent, Main } from './styles'\n\n/**\n * @param {{\n * children: import('react').ReactNode,\n * buttons: import('react').ReactNode\n * }} props\n */\nexport const FormModalHeaderWrapper = ({ children, buttons }) =>\n html` <${FormModalHeaderWrapperComponent}>\n <${Main}> ${children} \n <${Buttons}> ${buttons} \n `\n" }, { "path": "src/components/FormModalHeaderWrapper/index.test.js", "content": "import React from 'react'\n\nimport { render, screen } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { FormModalHeaderWrapper } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('FormModalHeaderWrapper', () => {\n const mockChildren =
Test Children
\n const mockButtons =
Test Buttons
\n\n test('renders children and buttons correctly', () => {\n const { container } = render(\n \n \n \n )\n\n expect(screen.getByTestId('test-children')).toBeInTheDocument()\n expect(screen.getByTestId('test-buttons')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('renders without children', () => {\n const { container } = render(\n \n \n \n )\n\n expect(screen.queryByTestId('test-children')).not.toBeInTheDocument()\n expect(screen.getByTestId('test-buttons')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('renders without buttons', () => {\n const { container } = render(\n \n \n \n )\n\n expect(screen.getByTestId('test-children')).toBeInTheDocument()\n expect(screen.queryByTestId('test-buttons')).not.toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('renders with empty content', () => {\n const { container } = render(\n \n \n \n )\n\n expect(container).toMatchSnapshot()\n })\n})\n" }, { "path": "src/components/FormModalHeaderWrapper/styles.js", "content": "import styled from 'styled-components'\n\nexport const FormModalHeaderWrapperComponent = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`\n\nexport const Main = styled.div`\n display: flex;\n`\n\nexport const Buttons = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n`\n" }, { "path": "src/components/FormWrapper/index.js", "content": "import styled from 'styled-components'\n\nexport const FormWrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 15px;\n`\n" }, { "path": "src/components/FormWrapper/index.test.js", "content": "import React from 'react'\n\nimport { render } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { FormWrapper } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('FormWrapper', () => {\n test('renders correctly', () => {\n const { container } = render(\n \n \n \n )\n expect(container).toMatchSnapshot()\n })\n\n test('renders with children', () => {\n const { getByText } = render(\n \n \n
Test Child
\n \n \n )\n expect(getByText('Test Child')).toBeInTheDocument()\n })\n\n test('renders multiple children in correct order', () => {\n const { container } = render(\n \n \n
First Child
\n
Second Child
\n
Third Child
\n \n \n )\n\n expect(container).toMatchSnapshot()\n })\n})\n" }, { "path": "src/components/ImportDataOption/index.js", "content": "import { html } from 'htm/react'\n\nimport { AcceptedTypes, Container, Title } from './styles'\nimport { UploadFilesModalContent } from '../../containers/Modal/UploadImageModalContent'\nimport { useModal } from '../../context/ModalContext'\n\n/**\n * @param {Object} props\n * @param {string} props.title\n * @param {string[]} props.accepts\n * * @param {(files: FileList) => void} [props.onFilesSelected]\n */\nexport const ImportDataOption = ({\n title,\n accepts,\n onFilesSelected,\n testId\n}) => {\n const { setModal } = useModal()\n\n const handleClick = () => {\n setModal(\n html`<${UploadFilesModalContent}\n type=${'file'}\n closeOnChange=${false}\n accepts=${accepts.join(',')}\n onFilesSelected=${onFilesSelected}\n />`\n )\n }\n\n return html` <${Container} data-testid=${testId} onClick=${handleClick}>\n <${Title}>${title}\n <${AcceptedTypes}>${accepts.join(', ')}\n `\n}\n" }, { "path": "src/components/ImportDataOption/styles.js", "content": "import styled from 'styled-components'\n\nexport const Container = styled.div`\n display: flex;\n width: 150px;\n height: 100px;\n padding: 14px 2px;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n\n cursor: pointer;\n border-radius: 10px;\n border: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n`\n\nexport const Title = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n font-style: normal;\n font-weight: 700;\n line-height: normal;\n`\n\nexport const AcceptedTypes = styled.span`\n color: ${({ theme }) => theme.colors.grey100.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\n" }, { "path": "src/components/InitialPageWrapper/index.js", "content": "import { html } from 'htm/react'\n\nimport {\n Background,\n BottomGradient,\n ContentWrapper,\n LeftSpotlightWrapper,\n LogoContainer,\n PageContent,\n PearPass\n} from './styles'\nimport { LogoLock } from '../../svgs/LogoLock'\n\n/**\n * @param {{\n * children: import('react').ReactNode\n * isAuthScreen: boolean\n * }} props\n */\nexport const InitialPageWrapper = ({ children, isAuthScreen = false }) => html`\n <${Background} isAuthScreen=${isAuthScreen}>\n <${LeftSpotlightWrapper} isAuthScreen=${isAuthScreen} />\n\n <${PageContent} isAuthScreen=${isAuthScreen}>\n <${LogoContainer}>\n <${LogoLock} width=\"42\" height=\"57\" />\n <${PearPass}>${window.electronAPI?.productName ?? 'PearPass'}\n \n\n <${ContentWrapper}> ${children} \n \n\n <${BottomGradient} isAuthScreen=${isAuthScreen} />\n \n`\n" }, { "path": "src/components/InitialPageWrapper/index.test.js", "content": "import React from 'react'\n\nimport { render, screen } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { InitialPageWrapper } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('InitialPageWrapper', () => {\n const mockChildren =
Test Children
\n\n test('renders children correctly', () => {\n const { container } = render(\n \n \n \n )\n\n expect(screen.getByTestId('test-children')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('renders without children', () => {\n const { container } = render(\n \n \n \n )\n\n expect(screen.queryByTestId('test-children')).not.toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n})\n" }, { "path": "src/components/InitialPageWrapper/styles.js", "content": "import styled from 'styled-components'\n\nexport const Background = styled.div`\n position: relative;\n background-color: ${({ theme, isAuthScreen }) =>\n isAuthScreen ? theme.colors.grey500.mode1 : theme.colors.black.mode1};\n width: 100%;\n height: 100%;\n overflow: hidden;\n`\n\nexport const LogoContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 15px;\n z-index: 10;\n text-align: start;\n height: 55px;\n width: 311px;\n`\n\nexport const PearPass = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Humble Nostalgia';\n font-size: 68px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n height: 55px;\n`\n\nexport const PageContent = styled.div`\n position: relative;\n color: white;\n width: 100%;\n height: 100%;\n padding-top: 42px;\n padding: 42px 110px 0 110px;\n display: flex;\n flex-direction: column;\n align-items: ${({ isAuthScreen }) =>\n isAuthScreen ? 'center' : 'flex-start'};\n`\n\nexport const ContentWrapper = styled.div`\n flex: 1;\n z-index: 2;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nexport const LeftSpotlightWrapper = styled.div`\n display: ${({ isAuthScreen }) => (isAuthScreen ? 'none' : 'block')};\n\n position: absolute;\n left: -5%;\n bottom: 0;\n\n width: 25%;\n height: 100%;\n flex-shrink: 0;\n\n border-radius: 1194.565px;\n opacity: 0.3;\n background: #b0d944;\n filter: blur(250px);\n`\n\nexport const MiddleSmallSpotlightWrapper = styled.div`\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n`\n\nexport const RightSpotlightWrapper = styled.div`\n width: 40%;\n height: 40%;\n position: absolute;\n right: 0;\n`\n\nexport const BottomGradient = styled.div`\n display: ${({ isAuthScreen }) => (isAuthScreen ? 'block' : 'none')};\n\n z-index: 1;\n transform: translate(-50%, 95%);\n opacity: 0.7;\n bottom: 0;\n left: 50%;\n width: 85%;\n height: 25%;\n position: absolute;\n border-radius: 100%;\n background: #b0d944;\n filter: blur(90px);\n`\n" }, { "path": "src/components/InputFieldNote/index.js", "content": "import { useLingui } from '@lingui/react'\nimport { html } from 'htm/react'\n\nimport { CommonFileIcon, InputField } from '../../lib-react-components'\n\n/**\n * @param {{\n * value?: string,\n * onChange?: (e?: string) => void,\n * icon?: import('react').FC,\n * label?: string,\n * error?: string,\n * additionalItems?: import('react').ReactNode,\n * placeholder?: string,\n * isDisabled?: boolean,\n * onClick?: () => void,\n * type?: 'text' | 'password' | 'url',\n * variant?: 'default' | 'outline',\n * testId?: string\n * }} props\n */\n// UI displays this as \"Comment\"\nexport const InputFieldNote = (props) => {\n const { i18n } = useLingui()\n\n return html`<${InputField}\n testId=${props.testId}\n label=${i18n._('Comment')}\n placeholder=${i18n._('Add comment')}\n variant=\"outline\"\n icon=${CommonFileIcon}\n ...${props}\n />`\n}\n" }, { "path": "src/components/InputFieldNote/index.test.js", "content": "import React from 'react'\n\nimport { render, screen, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { InputFieldNote } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('@lingui/react', () => ({\n useLingui: () => ({\n i18n: {\n _: (str) => str\n }\n }),\n I18nProvider: ({ children }) => children\n}))\n\ndescribe('InputFieldNote', () => {\n test('renders with default props', () => {\n const { container } = render(\n \n \n \n )\n\n expect(container).toMatchSnapshot()\n })\n\n test('renders with custom value', () => {\n const { container } = render(\n \n \n \n )\n\n expect(container).toMatchSnapshot()\n expect(screen.getByDisplayValue('Test note')).toBeInTheDocument()\n })\n\n test('renders with custom icon', () => {\n const CustomIcon = () =>
Custom Icon
\n render(\n \n \n \n )\n\n expect(screen.getByTestId('custom-icon')).toBeInTheDocument()\n })\n\n test('renders with error message', () => {\n render(\n \n \n \n )\n\n expect(screen.getByText('Error message')).toBeInTheDocument()\n })\n\n test('calls onChange when input changes', () => {\n const handleChange = jest.fn()\n render(\n \n \n \n )\n\n const input = screen.getByPlaceholderText('Add comment')\n fireEvent.change(input, { target: { value: 'New note' } })\n\n expect(handleChange).toHaveBeenCalled()\n })\n\n test('renders with disabled state', () => {\n render(\n \n \n \n )\n\n expect(screen.getByPlaceholderText('Add comment')).toHaveAttribute(\n 'readonly'\n )\n })\n\n test('renders with custom variant', () => {\n const { container } = render(\n \n \n \n )\n\n expect(container).toMatchSnapshot()\n })\n})\n" }, { "path": "src/components/InputPearpassPassword/index.js", "content": "import { useState } from 'react'\n\nimport { html } from 'htm/react'\n\nimport {\n AdditionalItems,\n IconWrapper,\n Input,\n InputAreaWrapper,\n InputWrapper,\n MainWrapper,\n NoticeWrapper\n} from './styles'\nimport {\n ButtonRoundIcon,\n EyeClosedIcon,\n EyeIcon,\n LockCircleIcon,\n NoticeText\n} from '../../lib-react-components'\n\n/**\n * @param {{\n * value: string,\n * olaceholder?: string,\n * onChange: (value: string) => void,\n * isDisabled: boolean,\n * error: string,\n * }} props\n */\nexport const InputPearpassPassword = ({\n value,\n placeholder,\n onChange,\n isDisabled,\n error,\n isFilled = false\n}) => {\n const [isPasswordVisible] = useState(false)\n\n const handleChange = (e) => {\n if (isDisabled) {\n return\n }\n onChange?.(e.target.value)\n }\n\n return html`\n <${InputWrapper} isFilled=${isFilled}>\n <${IconWrapper}> <${LockCircleIcon} size=\"24\" /> \n\n <${MainWrapper}>\n <${InputAreaWrapper}>\n <${Input}\n placeholder=${placeholder}\n value=${value}\n onChange=${handleChange}\n disabled=${isDisabled}\n type=${isPasswordVisible ? 'text' : 'password'}\n />\n \n ${!!error?.length &&\n html` <${NoticeWrapper}>\n <${NoticeText} text=${error} type=\"error\" />\n `}\n \n\n <${AdditionalItems}>\n <${ButtonRoundIcon}\n startIcon=${isPasswordVisible ? EyeClosedIcon : EyeIcon}\n />\n \n \n `\n}\n" }, { "path": "src/components/InputPearpassPassword/styles.js", "content": "import styled from 'styled-components'\n\nexport const InputWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n position: relative;\n\n border-radius: 10px;\n border: 1px solid;\n border-color: ${({ theme }) => theme.colors.grey100.mode1};\n margin-top: 0;\n padding: 5px 10px;\n\n &:hover,\n &:focus-within {\n border-color: ${({ theme }) => theme.colors.primary400.mode1};\n }\n background: ${({ isFilled }) =>\n isFilled\n ? 'linear-gradient(180deg, rgba(255, 255, 255, 0.00) -8.33%, #A8E408 115.48%)'\n : 'linear-gradient(180deg, rgba(255, 255, 255, 0) -8.33%, rgba(153, 153, 153, 0.31) 189.29%)'};\n\n box-shadow:\n 4px 4px 12px 0px rgba(216, 216, 216, 0.49),\n 0px 0.5px 4px 0px rgba(255, 255, 255, 0.4) inset;\n backdrop-filter: blur(7px);\n`\n\nexport const MainWrapper = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n`\n\nexport const IconWrapper = styled.div`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n align-self: 'stretch';\n`\n\nexport const InputAreaWrapper = styled.div`\n flex: 1;\n position: relative;\n overflow-x: auto;\n white-space: nowrap;\n display: flex;\n align-items: center;\n`\n\nexport const Input = styled.input`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n font-weight: 700;\n pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};\n width: 100%;\n\n &::placeholder {\n color: ${({ theme }) => theme.colors.grey100.mode1};\n }\n`\n\nexport const NoticeWrapper = styled.div`\n margin-top: 2px;\n`\n\nexport const AdditionalItems = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 10px;\n align-self: center;\n`\n" }, { "path": "src/components/InputSearch/index.js", "content": "import { useLingui } from '@lingui/react'\nimport { html } from 'htm/react'\n\nimport { Container, IconWrapper, Input, QuantityWrapper } from './styles'\nimport { LockCircleIcon } from '../../lib-react-components'\n\n/**\n * @param {{\n * value: string\n * onChange: (event: import('react').ChangeEvent) => void\n * quantity?: number\n * testId?: string\n * }} props\n */\nexport const InputSearch = ({ value, onChange, quantity, testId }) => {\n const { i18n } = useLingui()\n return html`\n <${Container}>\n <${IconWrapper}>\n <${LockCircleIcon} />\n \n <${Input}\n data-testid=${testId}\n placeholder=${i18n._('Search...')}\n value=${value}\n onChange=${onChange}\n />\n <${QuantityWrapper}>${value?.length ? quantity : null}\n \n `\n}\n" }, { "path": "src/components/InputSearch/index.test.js", "content": "import React from 'react'\n\nimport { render, screen, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { InputSearch } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('@lingui/react', () => ({\n useLingui: () => ({\n i18n: {\n _: (str) => str\n }\n }),\n I18nProvider: ({ children }) => children\n}))\n\njest.mock('../../lib-react-components', () => ({\n LockCircleIcon: () =>
LockCircleIcon
\n}))\n\ndescribe('InputSearch', () => {\n test('renders with default props', () => {\n const { container } = render(\n \n \n \n )\n\n expect(container).toMatchSnapshot()\n })\n\n test('renders with custom value', () => {\n const { container } = render(\n \n \n \n )\n\n expect(container).toMatchSnapshot()\n expect(screen.getByDisplayValue('Test search')).toBeInTheDocument()\n })\n\n test('displays quantity when value is not empty', () => {\n render(\n \n \n \n )\n\n expect(screen.getByText('5')).toBeInTheDocument()\n })\n\n test('does not display quantity when value is empty', () => {\n const { container } = render(\n \n \n \n )\n\n expect(container.textContent).not.toContain('5')\n })\n\n test('calls onChange when input changes', () => {\n const handleChange = jest.fn()\n render(\n \n \n \n )\n\n const input = screen.getByPlaceholderText('Search...')\n fireEvent.change(input, { target: { value: 'New search' } })\n\n expect(handleChange).toHaveBeenCalled()\n })\n\n test('renders lock circle icon', () => {\n render(\n \n \n \n )\n\n expect(screen.getByTestId('lock-circle-icon')).toBeInTheDocument()\n })\n\n test('has correct placeholder text', () => {\n render(\n \n \n \n )\n\n expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument()\n })\n})\n" }, { "path": "src/components/InputSearch/styles.js", "content": "import styled from 'styled-components'\n\nexport const Container = styled.div`\n width: 100%;\n display: flex;\n gap: 10px;\n align-items: center;\n border-radius: 15px;\n padding: 6px 10px;\n background: ${({ theme }) => theme.colors.black.mode1};\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n`\n\nexport const IconWrapper = styled.label`\n display: flex;\n flex-grow: 0;\n`\n\nexport const Input = styled.input`\n all: unset;\n display: flex;\n width: 100%;\n flex: 1;\n color: ${({ theme }) => theme.colors.grey200.mode1};\n align-self: stretch;\n font-family: 'Inter';\n font-style: normal;\n font-weight: 500;\n`\n\nexport const QuantityWrapper = styled.div`\n flex-grow: 0;\n color: ${({ theme }) => theme.colors.white.mode1};\n font-weight: 200;\n`\n" }, { "path": "src/components/ListItem/index.js", "content": "import { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport { html } from 'htm/react'\n\nimport {\n SelectedListItemIconContainer,\n ListItemActions,\n ListItemContainer,\n ListItemDate,\n ListItemDescription,\n ListItemInfo,\n ListItemName\n} from './styles'\nimport {\n BrushIcon,\n CheckIcon,\n DeleteIcon,\n LockCircleIcon,\n ShareIcon\n} from '../../lib-react-components'\n\nexport const ListItem = ({\n itemName,\n itemDateText,\n onClick,\n onShareClick,\n onEditClick,\n onDeleteClick,\n isSelected,\n testId,\n editTestId,\n deleteTestId\n}) => html`\n <${ListItemContainer}\n isSelected=${isSelected}\n onClick=${onClick}\n data-testid=${testId}\n >\n <${ListItemInfo}>\n ${isSelected\n ? html` <${SelectedListItemIconContainer}>\n <${CheckIcon} size=\"24\" color=${colors.black.mode1} />\n `\n : html`<${LockCircleIcon} size=\"24\" />`}\n\n <${ListItemDescription}>\n <${ListItemName}>${itemName}\n ${itemDateText && html`<${ListItemDate}> ${itemDateText}`}\n \n \n\n <${ListItemActions}>\n ${onShareClick &&\n html`\n \n <${ShareIcon} />\n \n `}\n ${onEditClick &&\n html`\n <${BrushIcon}\n />`}\n ${onDeleteClick &&\n html`<${DeleteIcon}\n />`}\n \n \n`\n" }, { "path": "src/components/ListItem/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { ListItem } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('../../lib-react-components', () => ({\n BrushIcon: () => ,\n DeleteIcon: () => ,\n LockCircleIcon: () => ,\n ShareIcon: () => \n}))\n\ndescribe('Item Component', () => {\n const dummyItem = {\n name: 'vault-123',\n createdAt: 'Created 13/06/2025'\n }\n\n test('renders Item component correctly and matches snapshot', () => {\n const { asFragment } = render(\n \n {}}\n onShareClick={() => {}}\n onEditClick={() => {}}\n onDeleteClick={() => {}}\n />\n \n )\n expect(asFragment()).toMatchSnapshot()\n })\n\n test('calls onClick when Item container is clicked', () => {\n const onClick = jest.fn()\n const { container } = render(\n \n {}}\n onEditClick={() => {}}\n onDeleteClick={() => {}}\n />\n \n )\n\n fireEvent.click(container.firstChild)\n expect(onClick).toHaveBeenCalled()\n })\n\n test('calls onShareClick when share icon is clicked', () => {\n const onShareClick = jest.fn()\n const { container } = render(\n \n {}}\n onShareClick={onShareClick}\n onEditClick={() => {}}\n onDeleteClick={() => {}}\n />\n \n )\n const shareIcon = container.querySelector('[data-testid=\"share-icon\"]')\n expect(shareIcon).toBeInTheDocument()\n\n fireEvent.click(shareIcon.parentElement)\n expect(onShareClick).toHaveBeenCalled()\n })\n\n test('calls onEditClick when brush icon is clicked', () => {\n const onEditClick = jest.fn()\n const { container } = render(\n \n {}}\n onShareClick={() => {}}\n onEditClick={onEditClick}\n onDeleteClick={() => {}}\n />\n \n )\n const brushIcon = container.querySelector('[data-testid=\"brush-icon\"]')\n expect(brushIcon).toBeInTheDocument()\n fireEvent.click(brushIcon.parentElement)\n expect(onEditClick).toHaveBeenCalled()\n })\n\n test('matches snapshot when action icons are clicked', () => {\n const { asFragment, container } = render(\n \n {}}\n onShareClick={() => {}}\n onEditClick={() => {}}\n onDeleteClick={() => {}}\n />\n \n )\n\n expect(asFragment()).toMatchSnapshot('initial state')\n\n const shareIcon = container.querySelector('[data-testid=\"share-icon\"]')\n const brushIcon = container.querySelector('[data-testid=\"brush-icon\"]')\n const deleteIcon = container.querySelector('[data-testid=\"delete-icon\"]')\n\n fireEvent.click(shareIcon.parentElement)\n fireEvent.click(brushIcon.parentElement)\n fireEvent.click(deleteIcon.parentElement)\n\n expect(asFragment()).toMatchSnapshot('after action icons clicked')\n })\n})\n" }, { "path": "src/components/ListItem/styles.js", "content": "import styled from 'styled-components'\n\nexport const ListItemContainer = styled.div`\n display: flex;\n width: 100%;\n padding: 5px 10px;\n align-items: center;\n justify-content: space-between;\n border-radius: 10px;\n background-color: ${({ isSelected }) =>\n isSelected ? 'rgba(134, 170, 172, 0.2)' : 'transparent'};\n border: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n cursor: pointer;\n\n &:hover {\n border-color: ${({ theme }) => theme.colors.primary400.mode1};\n }\n`\nexport const ListItemInfo = styled.div`\n display: flex;\n gap: 10px;\n align-items: center;\n`\n\nexport const ListItemDescription = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n`\nexport const ListItemName = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n`\nexport const ListItemDate = styled.p`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 10px;\n font-style: normal;\n font-weight: 300;\n`\n\nexport const ListItemActions = styled.div`\n display: flex;\n gap: 12px;\n align-items: center;\n`\n\nexport const SelectedListItemIconContainer = styled.div`\n display: flex;\n width: 30px;\n height: 30px;\n padding: 5px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex-shrink: 0;\n border-radius: 10px;\n background: ${({ theme }) => theme.colors.primary400.mode1};\n`\n" }, { "path": "src/components/LoadingOverlay/index.js", "content": "import styled from 'styled-components'\n\nexport const LoadingOverlay = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 4000;\n cursor: wait;\n`\n" }, { "path": "src/components/LoadingOverlay/index.test.js", "content": "import React from 'react'\n\nimport { render } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { LoadingOverlay } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('LoadingOverlay', () => {\n test('renders correctly', () => {\n const { container } = render(\n \n \n \n )\n\n expect(container).toMatchSnapshot()\n })\n\n test('passes props correctly', () => {\n const { getByTestId } = render(\n \n \n \n )\n\n const overlay = getByTestId('loading-overlay')\n expect(overlay).toHaveAttribute('id', 'test-id')\n expect(overlay).toHaveClass('test-class')\n })\n})\n" }, { "path": "src/components/MenuDropdown/MenuDropdownItem/index.js", "content": "import { html } from 'htm/react'\n\nimport { FolderIcon } from '../../../lib-react-components'\nimport { DropDownItem } from '../styles'\n\n/**\n * @param {{\n * onClick: () => void,\n * item: {name: string, icon?: import('react').ReactNode},\n * testId?: string\n * }} props\n */\nexport const MenuDropdownItem = ({ item, onClick, testId }) => html`\n <${DropDownItem} onClick=${() => onClick?.()} data-testid=${testId}>\n <${item.icon ?? FolderIcon} size=\"24\" color=${item.color ?? undefined} />\n\n ${item.name}\n \n`\n" }, { "path": "src/components/MenuDropdown/MenuDropdownItem/index.test.js", "content": "import React from 'react'\n\nimport { render, screen } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { MenuDropdownItem } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('MenuDropdownItem', () => {\n const mockOnClick = jest.fn()\n\n beforeEach(() => {\n mockOnClick.mockClear()\n })\n\n test('renders correctly with name', () => {\n const { container } = render(\n \n \n \n )\n\n expect(screen.getByText('Test Item')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('calls onClick when clicked', async () => {\n render(\n \n \n \n )\n\n const item = screen.getByText('Test Item')\n\n item.click()\n\n expect(mockOnClick).toHaveBeenCalledTimes(1)\n })\n\n test('renders with custom icon when provided', () => {\n const CustomIcon = () =>
Custom
\n\n render(\n \n \n \n )\n\n expect(screen.getByTestId('custom-icon')).toBeInTheDocument()\n })\n\n test('renders with default FolderIcon when no icon is provided', () => {\n render(\n \n \n \n )\n\n expect(screen.getByText('Test Item')).toBeInTheDocument()\n })\n\n test('renders with custom color when provided', () => {\n const { container } = render(\n \n \n \n )\n\n expect(container).toMatchSnapshot()\n })\n\n test('does not throw when onClick is not provided', () => {\n expect(() => {\n render(\n \n \n \n )\n }).not.toThrow()\n })\n})\n" }, { "path": "src/components/MenuDropdown/MenuDropdownLabel/index.js", "content": "import { useLingui } from '@lingui/react'\nimport { html } from 'htm/react'\n\nimport { ArrowDownIcon, ArrowUpIcon } from '../../../lib-react-components'\nimport { MenuDropdownItem } from '../MenuDropdownItem'\nimport { Label } from '../styles'\n\n/**\n * @param {{\n * isHidden: boolean,\n * selectedItem?: {name: string, icon?: import('react').ReactNode},\n * isOpen: boolean,\n * setIsOpen?: (isOpen: boolean) => void,\n * testId?: string\n * }} props\n */\nexport const MenuDropdownLabel = ({\n isHidden,\n selectedItem,\n isOpen,\n setIsOpen,\n testId\n}) => {\n const { i18n } = useLingui()\n\n return html`\n <${Label}\n isHidden=${isHidden}\n onClick=${() => setIsOpen?.(!isOpen)}\n data-testid=${testId}\n >\n <${isOpen ? ArrowUpIcon : ArrowDownIcon} size=\"24\" />\n\n ${selectedItem?.name\n ? html`\n <${MenuDropdownItem}\n testId=${`menudropdown-item-${selectedItem.name}`}\n item=${selectedItem}\n />\n `\n : i18n._('No folder')}\n \n `\n}\n" }, { "path": "src/components/MenuDropdown/MenuDropdownLabel/index.test.js", "content": "import React from 'react'\n\nimport { render, screen } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { MenuDropdownLabel } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('../../../lib-react-components', () => ({\n ArrowDownIcon: () =>
,\n ArrowUpIcon: () =>
\n}))\n\njest.mock('../MenuDropdownItem', () => ({\n MenuDropdownItem: ({ item }) => (\n
{item.name}
\n )\n}))\n\njest.mock('@lingui/react', () => ({\n useLingui: () => ({\n i18n: { _: (str) => str }\n })\n}))\n\ndescribe('MenuDropdownLabel', () => {\n const mockSetIsOpen = jest.fn()\n\n beforeEach(() => {\n mockSetIsOpen.mockClear()\n })\n\n const renderComponent = (props) =>\n render(\n \n \n \n )\n\n test('renders ArrowDownIcon when closed', () => {\n const { container } = renderComponent({ isOpen: false })\n expect(screen.getByTestId('arrow-down-icon')).toBeInTheDocument()\n expect(screen.queryByTestId('arrow-up-icon')).not.toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('renders ArrowUpIcon when open', () => {\n renderComponent({ isOpen: true })\n expect(screen.getByTestId('arrow-up-icon')).toBeInTheDocument()\n expect(screen.queryByTestId('arrow-down-icon')).not.toBeInTheDocument()\n })\n\n test('renders \"No folder\" when no selectedItem is provided', () => {\n renderComponent()\n expect(screen.getByText('No folder')).toBeInTheDocument()\n })\n\n test('renders MenuDropdownItem when selectedItem is provided', () => {\n const selectedItem = { name: 'Test Folder' }\n renderComponent({ selectedItem })\n expect(screen.getByTestId('menu-dropdown-item')).toBeInTheDocument()\n expect(screen.getByText('Test Folder')).toBeInTheDocument()\n })\n\n test('calls setIsOpen when clicked', () => {\n renderComponent({ isOpen: false })\n screen.getByText('No folder').click()\n expect(mockSetIsOpen).toHaveBeenCalledWith(true)\n })\n\n test('toggles isOpen value when clicked', () => {\n renderComponent({ isOpen: true })\n screen.getByText('No folder').click()\n expect(mockSetIsOpen).toHaveBeenCalledWith(false)\n })\n\n test('does not call setIsOpen when it is not provided', () => {\n renderComponent({ setIsOpen: undefined })\n expect(() => {\n screen.getByText('No folder').click()\n }).not.toThrow()\n })\n})\n" }, { "path": "src/components/MenuDropdown/index.js", "content": "import React, { useState } from 'react'\n\nimport { html } from 'htm/react'\n\nimport { MenuDropdownItem } from './MenuDropdownItem'\nimport { MenuDropdownLabel } from './MenuDropdownLabel'\nimport { DropDown, MainWrapper, Wrapper } from './styles'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\n\n/**\n * @param {{\n * selectedItem?: {name: string, icon?: import('react').ReactNode},\n * onItemSelect: (item: {name: string, icon?: import('react').ReactNode}) => void,\n * items: Array<{name: string, icon?: import('react').ReactNode}>,\n * bottomComponent?: import('react').ReactNode,\n * testId?: string\n * }} props\n */\nexport const MenuDropdown = ({\n selectedItem,\n onItemSelect,\n items,\n bottomComponent,\n testId\n}) => {\n const [isOpen, setIsOpen] = useState(false)\n\n const currentItems = React.useMemo(\n () => items.filter((item) => item?.name !== selectedItem?.name),\n [items, selectedItem]\n )\n\n const wrapperRef = useOutsideClick({\n onOutsideClick: () => {\n setIsOpen(false)\n }\n })\n\n const handleFolderSelect = (item) => {\n onItemSelect(item)\n\n setIsOpen(false)\n }\n\n return html`\n <${MainWrapper} data-testid=${testId} ref=${wrapperRef}>\n <${MenuDropdownLabel}\n isHidden\n selectedItem=${selectedItem}\n isOpen=${isOpen}\n testId=\"menudropdown-defaultlabel-hidden\"\n />\n\n <${Wrapper} isOpen=${isOpen}>\n <${MenuDropdownLabel}\n selectedItem=${selectedItem}\n isOpen=${isOpen}\n setIsOpen=${setIsOpen}\n testId=${`menudropdown-defaultlabel-${selectedItem?.name || 'No folder'}`}\n />\n\n ${isOpen &&\n html`<${DropDown}>\n ${currentItems.map(\n (item) => html`\n <${MenuDropdownItem}\n key=${item.name}\n testId=${`menudropdown-item-${item.name}`}\n item=${item}\n onClick=${() => handleFolderSelect(item)}\n />\n `\n )}\n ${bottomComponent && bottomComponent}\n `}\n \n \n `\n}\n" }, { "path": "src/components/MenuDropdown/index.test.js", "content": "import React from 'react'\n\nimport { render, screen, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { MenuDropdown } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('./MenuDropdownItem', () => ({\n MenuDropdownItem: ({ item, onClick }) => (\n
\n {item.name}\n
\n )\n}))\n\njest.mock('./MenuDropdownLabel', () => ({\n MenuDropdownLabel: ({ selectedItem, isOpen, setIsOpen }) => (\n setIsOpen && setIsOpen(!isOpen)}\n >\n {selectedItem ? selectedItem.name : 'No selected item'}\n {isOpen ? 'Open' : 'Closed'}\n
\n )\n}))\n\njest.mock('../../hooks/useOutsideClick', () => ({\n useOutsideClick: jest.fn()\n}))\n\ndescribe('MenuDropdown', () => {\n const mockOnItemSelect = jest.fn()\n const mockItems = [{ name: 'Item 1' }, { name: 'Item 2' }, { name: 'Item 3' }]\n\n beforeEach(() => {\n mockOnItemSelect.mockClear()\n })\n\n const renderComponent = (props = {}) =>\n render(\n \n \n \n )\n\n test('renders both dropdown labels', () => {\n const { container } = renderComponent()\n const labels = screen.getAllByTestId('menu-dropdown-label')\n expect(labels).toHaveLength(2)\n expect(container).toMatchSnapshot()\n })\n\n test('does not show dropdown items when closed', () => {\n renderComponent()\n expect(screen.queryAllByTestId('menu-dropdown-item')).toHaveLength(0)\n })\n\n test('shows dropdown items when open', () => {\n renderComponent()\n\n const visibleLabel = screen.getAllByTestId('menu-dropdown-label')[1]\n fireEvent.click(visibleLabel)\n\n expect(screen.getAllByTestId('menu-dropdown-item')).toHaveLength(3)\n })\n\n test('filters out selected item from dropdown options', () => {\n const selectedItem = mockItems[0]\n renderComponent({ selectedItem })\n\n const visibleLabel = screen.getAllByTestId('menu-dropdown-label')[1]\n fireEvent.click(visibleLabel)\n\n const shownItems = screen.getAllByTestId('menu-dropdown-item')\n expect(shownItems).toHaveLength(2)\n expect(shownItems[0]).toHaveTextContent('Item 2')\n expect(shownItems[1]).toHaveTextContent('Item 3')\n })\n\n test('calls onItemSelect when an item is clicked', () => {\n renderComponent()\n\n const visibleLabel = screen.getAllByTestId('menu-dropdown-label')[1]\n fireEvent.click(visibleLabel)\n\n const items = screen.getAllByTestId('menu-dropdown-item')\n fireEvent.click(items[1])\n\n expect(mockOnItemSelect).toHaveBeenCalledWith(mockItems[1])\n })\n\n test('closes dropdown after item selection', () => {\n renderComponent()\n\n const visibleLabel = screen.getAllByTestId('menu-dropdown-label')[1]\n fireEvent.click(visibleLabel)\n\n const items = screen.getAllByTestId('menu-dropdown-item')\n fireEvent.click(items[0])\n\n expect(screen.queryAllByTestId('menu-dropdown-item')).toHaveLength(0)\n })\n\n test('renders bottomComponent when provided', () => {\n const bottom =
Bottom
\n\n renderComponent({ bottomComponent: bottom })\n\n const visibleLabel = screen.getAllByTestId('menu-dropdown-label')[1]\n fireEvent.click(visibleLabel)\n\n expect(screen.getByTestId('bottom-component')).toBeInTheDocument()\n expect(screen.getByTestId('bottom-component')).toHaveTextContent('Bottom')\n })\n})\n" }, { "path": "src/components/MenuDropdown/styles.js", "content": "import styled, { css } from 'styled-components'\n\nexport const Label = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isHidden'].includes(prop)\n})`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 7px;\n cursor: pointer;\n white-space: nowrap;\n\n ${({ isHidden }) => {\n if (isHidden) {\n return css`\n opacity: 0;\n pointer-events: none;\n padding: 4px 10px;\n `\n }\n }}\n`\n\nexport const MainWrapper = styled.div`\n position: relative;\n`\n\nexport const Wrapper = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isOpen'].includes(prop)\n})`\n border-radius: 10px;\n background: ${({ theme }) => theme.colors.grey400.mode1};\n border: 1px solid\n ${({ theme, isOpen }) =>\n isOpen ? theme.colors.primary400.mode1 : theme.colors.grey100.mode1};\n padding: 4px 10px;\n top: 0;\n left: 0;\n position: absolute;\n z-index: ${({ isOpen }) => (isOpen ? 6 : 5)};\n\n &:hover {\n border-color: ${({ theme }) => theme.colors.primary400.mode1};\n\n & ${Label} path {\n stroke: ${({ theme }) => theme.colors.primary400.mode1};\n }\n }\n`\n\nexport const DropDown = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 4px 5px 0 30px;\n`\n\nexport const DropDownItem = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 10px;\n white-space: nowrap;\n cursor: pointer;\n`\n\nexport const FolderIconWrapper = styled.div`\n flex-shrink: 0;\n`\n" }, { "path": "src/components/NoticeContainer/index.js", "content": "import { html } from 'htm/react'\n\nimport { Container } from './styles'\nimport { YellowErrorIcon } from '../../lib-react-components'\n\nexport const NoticeContainer = ({ text }) => html`\n <${Container}>\n <${YellowErrorIcon} size=\"19\" />\n ${text}\n \n`\n" }, { "path": "src/components/NoticeContainer/styles.js", "content": "import styled from 'styled-components'\n\nexport const Container = styled.div`\n display: inline-flex;\n justify-content: center;\n padding: 10px;\n align-items: center;\n gap: 8px;\n\n border-radius: 10px;\n border: 1px solid #bd8610;\n background: linear-gradient(\n 0deg,\n #bd8610 -14.1%,\n rgba(70, 70, 70, 0.05) 125.68%\n );\n box-shadow:\n 4px 4px 12px 0px rgba(216, 216, 216, 0.5),\n 0px 0.5px 4px 0px rgba(255, 255, 255, 0.25) inset;\n backdrop-filter: blur(7px);\n\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n`\n" }, { "path": "src/components/OnboardingShell/index.tsx", "content": "import React from 'react'\nimport { useTheme } from '@tetherto/pearpass-lib-ui-kit'\nimport { BackgroundWithGradient } from '../BackgroundWithGradient'\n\nimport {\n ContentWrapper,\n Panel,\n ShellViewport,\n SolidBackground,\n Stage\n} from './styles'\n\ninterface OnboardingShellProps {\n background: 'gradient' | 'solid'\n children: React.ReactNode\n}\n\nexport const OnboardingShell = ({\n background,\n children\n}: OnboardingShellProps): React.ReactElement => {\n const { theme } = useTheme()\n\n const content = (\n \n \n {children}\n \n \n )\n\n if (background === 'gradient') {\n return (\n \n {content}\n \n )\n }\n\n return (\n \n \n {content}\n \n \n )\n}\n" }, { "path": "src/components/OnboardingShell/styles.ts", "content": "import styled from 'styled-components'\nimport { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\ninterface SolidBackgroundProps {\n $backgroundColor: string\n}\n\nexport const ShellViewport = styled.div`\n display: flex;\n width: 100%;\n height: 100%;\n min-height: 100%;\n box-sizing: border-box;\n overflow: hidden;\n\n & > * {\n flex: 1 1 auto;\n min-height: 0;\n }\n`\n\nexport const SolidBackground = styled.div`\n width: 100%;\n height: 100%;\n background-color: ${({ $backgroundColor }) => $backgroundColor};\n`\n\nexport const Stage = styled.div`\n width: 100%;\n height: 100%;\n`\n\nexport const Panel = styled.div<{ $isSolid?: boolean }>`\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n background: transparent;\n box-shadow: ${({ $isSolid }) =>\n $isSolid\n ? 'none'\n : `inset 0 1px 0 rgba(255, 255, 255, 0.03),\n 0 20px 60px rgba(0, 0, 0, 0.28)`};\n\n &::after {\n content: '';\n display: ${({ $isSolid }) => ($isSolid ? 'none' : 'block')};\n position: absolute;\n inset: 0;\n pointer-events: none;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.03) 0%,\n rgba(255, 255, 255, 0) 18%\n );\n }\n`\n\nexport const ContentWrapper = styled.div`\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n padding: 27px 32px;\n text-align: center;\n\n @media (max-height: 820px) {\n padding: 27px ${rawTokens.spacing24}px;\n }\n\n @media (max-width: 1100px) {\n padding: 27px ${rawTokens.spacing24}px;\n }\n`\n\nexport const SharedVideo = styled.video`\n width: 282px;\n height: 282px;\n flex: 0 0 auto;\n object-fit: contain;\n z-index: 10;\n mix-blend-mode: screen;\n background: transparent;\n isolation: isolate;\n filter: saturate(1.05) brightness(1.02);\n`\n" }, { "path": "src/components/OtpCodeField/index.test.js", "content": "import React from 'react'\n\nimport { render, screen, fireEvent } from '@testing-library/react'\nimport '@testing-library/jest-dom'\n\nimport { OtpCodeField } from './index'\n\nconst mockGenerateNext = jest.fn()\nconst mockUseOtp = jest.fn()\n\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n useOtp: (...args) => mockUseOtp(...args),\n formatOtpCode: (code) => {\n if (!code) return ''\n const mid = Math.ceil(code.length / 2)\n return code.slice(0, mid) + ' ' + code.slice(mid)\n },\n OTP_TYPE: { TOTP: 'TOTP', HOTP: 'HOTP' }\n}))\n\njest.mock('@lingui/react', () => ({\n useLingui: () => ({\n i18n: {\n _: (msg) => msg\n }\n })\n}))\n\njest.mock('../CopyButton', () => ({\n CopyButton: ({ value, testId }) => (\n \n )\n}))\n\njest.mock('../../lib-react-components', () => ({\n InputField: ({\n label,\n value,\n additionalItems,\n belowInputContent,\n testId\n }) => (\n
\n {label}\n {value}\n
{additionalItems}
\n {belowInputContent && (\n
{belowInputContent}
\n )}\n
\n ),\n LockIcon: () => LockIcon\n}))\n\njest.mock('../TimerBar', () => ({\n TimerBar: ({ timeRemaining }) => (\n
{timeRemaining}s
\n )\n}))\n\nconst useOtp = mockUseOtp\n\ndescribe('OtpCodeField', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders TOTP code with progress bar', () => {\n useOtp.mockReturnValue({\n code: '123456',\n timeRemaining: 20,\n type: 'TOTP',\n period: 30,\n generateNext: null,\n isLoading: false\n })\n\n render(\n \n )\n\n expect(screen.getByTestId('otp-label')).toHaveTextContent(\n 'Authenticator Token'\n )\n expect(screen.getByTestId('otp-value')).toHaveTextContent('123 456')\n expect(screen.getByTestId('otp-progress-bar')).toHaveTextContent('20s')\n expect(screen.getByTestId('otp-copy-button')).toBeInTheDocument()\n })\n\n test('renders HOTP code with Next Code button', () => {\n useOtp.mockReturnValue({\n code: '111222',\n timeRemaining: null,\n type: 'HOTP',\n period: null,\n generateNext: mockGenerateNext,\n isLoading: false\n })\n\n render(\n \n )\n\n expect(screen.getByTestId('otp-value')).toHaveTextContent('111 222')\n expect(screen.getByTestId('otp-next-code-button')).toHaveTextContent(\n 'Next Code'\n )\n expect(screen.queryByTestId('otp-progress-bar')).not.toBeInTheDocument()\n })\n\n test('HOTP Next Code button calls generateNext', () => {\n useOtp.mockReturnValue({\n code: '111222',\n timeRemaining: null,\n type: 'HOTP',\n period: null,\n generateNext: mockGenerateNext,\n isLoading: false\n })\n\n render(\n \n )\n\n fireEvent.click(screen.getByTestId('otp-next-code-button'))\n expect(mockGenerateNext).toHaveBeenCalledTimes(1)\n })\n\n test('formats codes with odd digit count correctly', () => {\n useOtp.mockReturnValue({\n code: '1234567',\n timeRemaining: 20,\n type: 'TOTP',\n period: 30,\n generateNext: null,\n isLoading: false\n })\n\n render(\n \n )\n\n // 7 digits: mid = 4, so \"1234 567\"\n expect(screen.getByTestId('otp-value')).toHaveTextContent('1234 567')\n })\n})\n" }, { "path": "src/components/OtpCodeField/index.ts", "content": "import { useLingui } from '@lingui/react'\nimport { html } from 'htm/react'\nimport { useOtp, formatOtpCode, OTP_TYPE } from '@tetherto/pearpass-lib-vault'\n\nimport { InputField, LockIcon } from '../../lib-react-components'\nimport { CopyButton } from '../CopyButton'\nimport { TimerBar } from '../TimerBar'\nimport type { OtpPublic } from '@tetherto/pearpass-lib-vault/src/types'\n\ninterface OtpCodeFieldProps {\n recordId: string\n otpPublic: OtpPublic\n testId?: string\n}\n\nexport const OtpCodeField = ({ recordId, otpPublic, testId }: OtpCodeFieldProps) => {\n const { i18n } = useLingui()\n const { code, timeRemaining, type, period, generateNext, isLoading } = useOtp(\n {\n recordId,\n otpPublic\n }\n )\n\n const formattedCode = formatOtpCode(code)\n const isTOTP = type === OTP_TYPE.TOTP\n const hasTimeData = isTOTP && timeRemaining !== null\n\n const timerBar = isTOTP\n ? html`\n
\n <${TimerBar} timeRemaining=${timeRemaining} period=${period} />\n
\n `\n : null\n\n return html`\n <${InputField}\n testId=${testId || 'otp-code-field'}\n label=${i18n._('Authenticator Token')}\n value=${formattedCode}\n variant=\"outline\"\n icon=${LockIcon}\n isDisabled\n belowInputContent=${timerBar}\n additionalItems=${html`\n ${type === OTP_TYPE.HOTP &&\n generateNext &&\n html`\n \n ${i18n._('Next Code')}\n \n `}\n <${CopyButton} value=${code} testId=\"otp-copy-button\" />\n `}\n />\n `\n}\n" }, { "path": "src/components/OtpCodeField/utils.ts", "content": "import { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nexport const getTimerColor = (expiring: boolean): string =>\n expiring ? colors.errorRed.mode1 : colors.primary400.mode1\n" }, { "path": "src/components/OtpCodeFieldV2/index.test.tsx", "content": "import React from 'react'\n\nimport '@testing-library/jest-dom'\nimport { fireEvent, render, screen } from '@testing-library/react'\n\nconst mockGenerateNext = jest.fn()\nconst mockUseOtp = jest.fn()\nconst mockCopyToClipboard = jest.fn()\n\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n useOtp: (...args: unknown[]) => mockUseOtp(...args),\n formatOtpCode: (code: string | null) => {\n if (!code) return ''\n const mid = Math.ceil(code.length / 2)\n return code.slice(0, mid) + ' ' + code.slice(mid)\n },\n OTP_TYPE: { TOTP: 'TOTP', HOTP: 'HOTP' },\n useTimerAnimation: (timeRemaining: number | null, period: number) => ({\n noTransition: false,\n expiring: timeRemaining !== null && timeRemaining <= 5,\n targetTime: timeRemaining ?? period\n })\n}))\n\njest.mock('@lingui/react', () => ({\n useLingui: () => ({\n i18n: { _: (msg: string) => msg }\n })\n}))\n\njest.mock('../../hooks/useCopyToClipboard.electron', () => ({\n useCopyToClipboard: () => ({\n copyToClipboard: mockCopyToClipboard\n })\n}))\n\njest.mock('@tetherto/pearpass-lib-ui-kit', () => ({\n Button: ({\n children,\n onClick,\n disabled,\n 'data-testid': testId,\n 'aria-label': ariaLabel,\n iconBefore\n }: {\n children?: React.ReactNode\n onClick?: () => void\n disabled?: boolean\n 'data-testid'?: string\n 'aria-label'?: string\n iconBefore?: React.ReactNode\n }) => (\n \n {iconBefore}\n {children}\n \n ),\n Text: ({\n children,\n color\n }: {\n children?: React.ReactNode\n color?: string\n }) => {children},\n useTheme: () => ({\n theme: {\n colors: {\n colorTextPrimary: '#fff',\n colorTextSecondary: '#aaa',\n colorTextDestructive: '#f00',\n colorPrimary: '#0f0',\n colorBorderPrimary: '#333',\n colorSurfacePrimary: '#000'\n }\n }\n }),\n rawTokens: {\n spacing2: 2,\n spacing8: 8,\n spacing12: 12,\n radius8: 8\n }\n}))\n\njest.mock('@tetherto/pearpass-lib-ui-kit/icons', () => ({\n ContentCopy: () => \n}))\n\nimport { OtpCodeFieldV2 } from './index'\n\nconst useOtp = mockUseOtp\n\ndescribe('OtpCodeFieldV2', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders TOTP code with timer and copy button', () => {\n useOtp.mockReturnValue({\n code: '123456',\n timeRemaining: 20,\n type: 'TOTP',\n period: 30,\n generateNext: null,\n isLoading: false\n })\n\n render(\n [0]['otpPublic']\n }\n />\n )\n\n expect(screen.getByText('Authenticator Token')).toBeInTheDocument()\n expect(screen.getByText('123 456')).toBeInTheDocument()\n expect(screen.getByText('20s')).toBeInTheDocument()\n expect(screen.getByTestId('otp-code-field-v2-copy')).toBeInTheDocument()\n expect(\n screen.queryByTestId('otp-code-field-v2-next-code')\n ).not.toBeInTheDocument()\n })\n\n test('copy button calls copyToClipboard with the code', () => {\n useOtp.mockReturnValue({\n code: '123456',\n timeRemaining: 20,\n type: 'TOTP',\n period: 30,\n generateNext: null,\n isLoading: false\n })\n\n render(\n [0]['otpPublic']\n }\n />\n )\n\n fireEvent.click(screen.getByTestId('otp-code-field-v2-copy'))\n expect(mockCopyToClipboard).toHaveBeenCalledWith('123456')\n })\n\n test('renders HOTP code with Next Code button (no timer)', () => {\n useOtp.mockReturnValue({\n code: '111222',\n timeRemaining: null,\n type: 'HOTP',\n period: null,\n generateNext: mockGenerateNext,\n isLoading: false\n })\n\n render(\n [0]['otpPublic']\n }\n />\n )\n\n expect(screen.getByText('111 222')).toBeInTheDocument()\n expect(\n screen.getByTestId('otp-code-field-v2-next-code').textContent\n ).toContain('Next Code')\n expect(screen.queryByText(/s$/)).not.toBeInTheDocument()\n })\n\n test('HOTP Next Code button calls generateNext', () => {\n useOtp.mockReturnValue({\n code: '111222',\n timeRemaining: null,\n type: 'HOTP',\n period: null,\n generateNext: mockGenerateNext,\n isLoading: false\n })\n\n render(\n [0]['otpPublic']\n }\n />\n )\n\n fireEvent.click(screen.getByTestId('otp-code-field-v2-next-code'))\n expect(mockGenerateNext).toHaveBeenCalledTimes(1)\n })\n})\n" }, { "path": "src/components/OtpCodeFieldV2/index.tsx", "content": "import React from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { Button, Text, useTheme } from '@tetherto/pearpass-lib-ui-kit'\nimport { ContentCopy } from '@tetherto/pearpass-lib-ui-kit/icons'\nimport {\n OTP_TYPE,\n formatOtpCode,\n useOtp,\n useTimerAnimation\n} from '@tetherto/pearpass-lib-vault'\n\nimport type { OtpPublic } from '@tetherto/pearpass-lib-vault/src/types'\n\nimport { useCopyToClipboard } from '../../hooks/useCopyToClipboard.electron'\nimport { createStyles } from './styles'\n\nconst TIMER_ANIMATION_DURATION = 1000\n\ninterface OtpCodeFieldV2Props {\n recordId: string\n otpPublic: OtpPublic\n isGrouped?: boolean\n testID?: string\n}\n\nexport const OtpCodeFieldV2 = ({\n recordId,\n otpPublic,\n isGrouped = false,\n testID\n}: OtpCodeFieldV2Props) => {\n const { i18n } = useLingui()\n const { theme } = useTheme()\n const styles = createStyles(theme.colors)\n const { copyToClipboard } = useCopyToClipboard()\n\n const { code, timeRemaining, type, period, generateNext, isLoading } = useOtp(\n {\n recordId,\n otpPublic\n }\n )\n\n const formattedCode = formatOtpCode(code)\n const isTOTP = type === OTP_TYPE.TOTP\n const isHOTP = type === OTP_TYPE.HOTP\n\n const { noTransition, expiring, targetTime } = useTimerAnimation(\n timeRemaining,\n period ?? 30\n )\n\n const progress =\n timeRemaining !== null && period ? (targetTime / period) * 100 : 0\n\n const timerColor = expiring\n ? theme.colors.colorTextDestructive\n : theme.colors.colorPrimary\n\n const cardStyle = isGrouped ? styles.cardGrouped : styles.card\n\n return (\n
\n
\n
\n \n {i18n._('Authenticator Token')}\n \n {formattedCode || ''}\n
\n }\n onClick={() => code && copyToClipboard(code)}\n />\n
\n\n {isTOTP && (\n
\n
\n \n
\n
\n \n {timeRemaining !== null ? `${timeRemaining}s` : ''}\n \n
\n
\n )}\n\n {isHOTP && generateNext && (\n \n {i18n._('Next Code')}\n \n )}\n
\n )\n}\n" }, { "path": "src/components/OtpCodeFieldV2/styles.ts", "content": "import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\nimport { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = (colors: ThemeColors) => ({\n card: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing12}px`,\n padding: `${rawTokens.spacing12}px`,\n borderWidth: '1px',\n borderStyle: 'solid' as const,\n borderColor: colors.colorBorderPrimary,\n borderRadius: `${rawTokens.radius8}px`,\n backgroundColor: colors.colorSurfacePrimary,\n boxSizing: 'border-box' as const\n },\n cardGrouped: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing12}px`,\n padding: `${rawTokens.spacing12}px`,\n backgroundColor: 'transparent',\n borderBottom: `1px solid ${colors.colorBorderPrimary}`,\n boxSizing: 'border-box' as const\n },\n topRow: {\n display: 'flex' as const,\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n gap: `${rawTokens.spacing8}px`\n },\n innerColumn: {\n flex: 1,\n minWidth: 0,\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing2}px`\n },\n timerRow: {\n display: 'flex' as const,\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n gap: `${rawTokens.spacing8}px`\n },\n timerTrack: {\n flex: 1,\n height: 6,\n borderRadius: `${rawTokens.radius8}px`,\n backgroundColor: colors.colorBorderPrimary,\n overflow: 'hidden' as const\n },\n timerFill: {\n height: '100%',\n borderRadius: `${rawTokens.radius8}px`\n },\n timerLabel: {\n minWidth: 28,\n textAlign: 'right' as const\n }\n})\n" }, { "path": "src/components/Overlay/index.js", "content": "import { useRef } from 'react'\n\nimport { useTheme } from '@tetherto/pearpass-lib-ui-kit'\nimport { html } from 'htm/react'\n\nimport { OverlayComponent } from './styles'\nimport { BASE_TRANSITION_DURATION } from '../../constants/transitions'\nimport { useAnimatedVisibility } from '../../hooks/useAnimatedVisibility'\n\n/**\n * @param {{\n * isOpen: boolean\n * onClick: () => void\n * type: 'default' | 'blur'\n * }} props\n */\nexport const Overlay = ({ isOpen, onClick, type = 'default' }) => {\n const { theme } = useTheme()\n const nodeRef = useRef(null)\n const { isShown, isRendered } = useAnimatedVisibility({\n isOpen: isOpen,\n transitionDuration: BASE_TRANSITION_DURATION,\n nodeRef,\n propertyName: 'opacity'\n })\n\n if (!isRendered) {\n return null\n }\n\n return html`\n <${OverlayComponent}\n ref=${nodeRef}\n type=${type}\n isShown=${isShown}\n scrim=${theme.colors.colorScrim}\n onClick=${() => onClick?.()}\n />\n `\n}\n" }, { "path": "src/components/Overlay/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { Overlay } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('../../hooks/useAnimatedVisibility', () => ({\n useAnimatedVisibility: jest.fn().mockImplementation(({ isOpen }) => ({\n isShown: isOpen,\n isRendered: isOpen\n }))\n}))\n\ndescribe('Overlay', () => {\n const mockOnClick = jest.fn()\n\n beforeEach(() => {\n mockOnClick.mockClear()\n jest.clearAllMocks()\n })\n\n const renderComponent = (props = {}) =>\n render(\n \n \n \n )\n\n test('does not render when isRendered is false', () => {\n require('../../hooks/useAnimatedVisibility').useAnimatedVisibility.mockReturnValue(\n {\n isShown: false,\n isRendered: false\n }\n )\n\n const { container } = renderComponent()\n expect(container).toBeEmptyDOMElement()\n expect(container).toMatchSnapshot()\n })\n\n test('renders when isRendered is true', async () => {\n require('../../hooks/useAnimatedVisibility').useAnimatedVisibility.mockReturnValue(\n {\n isShown: true,\n isRendered: true\n }\n )\n\n const { container } = renderComponent({ isOpen: true })\n\n expect(container.querySelector('div[type=\"default\"]')).toBeInTheDocument()\n })\n\n test('calls onClick when clicked', () => {\n require('../../hooks/useAnimatedVisibility').useAnimatedVisibility.mockReturnValue(\n {\n isShown: true,\n isRendered: true\n }\n )\n\n const { container } = renderComponent({ isOpen: true })\n fireEvent.click(container.querySelector('div[type=\"default\"]'))\n expect(mockOnClick).toHaveBeenCalledTimes(1)\n })\n\n test('passes type prop to OverlayComponent', () => {\n require('../../hooks/useAnimatedVisibility').useAnimatedVisibility.mockReturnValue(\n {\n isShown: true,\n isRendered: true\n }\n )\n\n const { container } = renderComponent({ isOpen: true, type: 'blur' })\n expect(container.querySelector('div[type=\"blur\"]')).toBeInTheDocument()\n })\n\n test('uses default type when not provided', () => {\n require('../../hooks/useAnimatedVisibility').useAnimatedVisibility.mockReturnValue(\n {\n isShown: true,\n isRendered: true\n }\n )\n\n const { container } = renderComponent({ isOpen: true })\n expect(container.querySelector('div[type=\"default\"]')).toBeInTheDocument()\n })\n})\n" }, { "path": "src/components/Overlay/styles.js", "content": "import styled from 'styled-components'\n\nimport { BASE_TRANSITION_DURATION } from '../../constants/transitions'\n\nconst SCRIM_BLUR = 'rgba(0, 0, 0, 0.5)'\n\nexport const OverlayComponent = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isShown', 'scrim'].includes(prop)\n})`\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: ${({ isShown }) => (isShown ? 1 : 0)};\n transition: opacity ${BASE_TRANSITION_DURATION}ms ease-in-out;\n background: ${({ type, scrim }) => {\n if (type === 'default') {\n return scrim\n }\n\n if (type === 'blur') {\n return SCRIM_BLUR\n }\n }};\n backdrop-filter: ${({ type }) => {\n if (type === 'default') {\n return 'none'\n }\n\n if (type === 'blur') {\n return 'blur(10px)'\n }\n }};\n`\n" }, { "path": "src/components/PasswordFieldStrengthIndicator/index.test.tsx", "content": "import React from 'react'\nimport { render, fireEvent } from '@testing-library/react'\nimport '@testing-library/jest-dom'\n\nimport { PasswordFieldStrengthIndicator } from './index'\nimport { PassType } from '../../shared/types'\n\n// mocks\njest.mock('@tetherto/pearpass-lib-ui-kit', () => ({\n PasswordField: jest.fn(({ onChange, ...props }) => (\n onChange(e)}\n />\n ))\n}))\n\njest.mock('../../hooks/useTranslation', () => ({\n useTranslation: () => ({\n t: (key: string) => key\n })\n}))\n\njest.mock('../../utils/getPasswordStrengthInfo', () => ({\n getPasswordStrength: jest.fn()\n}))\n\njest.mock('../../constants/password', () => ({\n STRENGTH_MAP: {\n error: 'vulnerable',\n warning: 'decent',\n success: 'strong'\n }\n}))\n\ndescribe('PasswordFieldStrengthIndicator', () => {\n const mockOnChange = jest.fn()\n const mockOnBlur = jest.fn()\n const mockSetPasswordType = jest.fn()\n\n const baseProps = {\n label: 'Password',\n placeholder: 'Enter Password',\n testID: 'password-input',\n passwordType: PassType.Password,\n setPasswordType: mockSetPasswordType,\n passwordField: {\n name: 'password',\n value: '123456',\n onChange: mockOnChange,\n onBlur: mockOnBlur,\n error: ''\n }\n }\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders input with value', () => {\n const { getByTestId } = render(\n \n )\n\n expect(getByTestId('password-input')).toHaveValue('123456')\n })\n\n test('calls passwordField.onChange on input change', () => {\n const { getByTestId } = render(\n \n )\n\n fireEvent.change(getByTestId('password-input'), {\n target: { value: 'newpass' }\n })\n\n expect(mockOnChange).toHaveBeenCalledWith('newpass')\n })\n\n test('resets passwordType when not Password', () => {\n const { getByTestId } = render(\n \n )\n\n fireEvent.change(getByTestId('password-input'), {\n target: { value: 'newpass' }\n })\n\n expect(mockSetPasswordType).toHaveBeenCalledWith(PassType.Password)\n })\n\n test('does not reset passwordType if already Password', () => {\n const { getByTestId } = render(\n \n )\n\n fireEvent.change(getByTestId('password-input'), {\n target: { value: 'newpass' }\n })\n\n expect(mockSetPasswordType).not.toHaveBeenCalled()\n })\n\n test('passes error when provided', () => {\n const { getByTestId } = render(\n \n )\n\n const input = getByTestId('password-input')\n expect(input).toBeInTheDocument()\n })\n\n test('computes password strength and maps indicator', () => {\n const { getPasswordStrength } = require('../../utils/getPasswordStrengthInfo')\n const { PasswordField } = require('@tetherto/pearpass-lib-ui-kit')\n\n getPasswordStrength.mockReturnValue({ strengthType: 'success' })\n\n render()\n\n expect(getPasswordStrength).toHaveBeenCalledWith('123456', PassType.Password)\n expect(PasswordField).toHaveBeenLastCalledWith(\n expect.objectContaining({ passwordIndicator: 'strong' }),\n undefined\n )\n })\n\n test('handles undefined password strength', () => {\n const {\n getPasswordStrength\n } = require('../../utils/getPasswordStrengthInfo')\n\n getPasswordStrength.mockReturnValue(undefined)\n\n render()\n\n expect(getPasswordStrength).toHaveBeenCalled()\n })\n})\n" }, { "path": "src/components/PasswordFieldStrengthIndicator/index.tsx", "content": "import React, { useMemo } from 'react'\nimport {\n PasswordField,\n PasswordIndicatorVariant\n} from '@tetherto/pearpass-lib-ui-kit'\nimport { PassType } from '../../shared/types'\nimport { getPasswordStrength } from '../../utils/getPasswordStrengthInfo'\nimport { STRENGTH_MAP } from '../../constants/password'\nimport { useTranslation } from '../../hooks/useTranslation'\n\ninterface IPasswordField {\n onChange: (value: string) => void\n onBlur: (event: React.FocusEvent) => void\n name: string\n value: string\n error: string\n}\n\ninterface IPasswordFieldStrengthIndicatorProps {\n label?: string\n placeholder?: string\n passwordField: IPasswordField\n testID: string\n passwordType: PassType\n setPasswordType: React.Dispatch>\n}\n\nexport const PasswordFieldStrengthIndicator = ({\n label = 'Password',\n placeholder = 'Enter Password',\n passwordType,\n setPasswordType,\n passwordField,\n testID\n}: IPasswordFieldStrengthIndicatorProps) => {\n const { t } = useTranslation()\n const passwordStrength = useMemo(() => {\n return getPasswordStrength(passwordField.value, passwordType)\n }, [passwordField.value, passwordType])\n\n const passwordIndicator: PasswordIndicatorVariant | undefined =\n passwordStrength ? STRENGTH_MAP[passwordStrength.strengthType] : undefined\n\n return (\n {\n passwordField.onChange(e.target.value)\n if (passwordType !== PassType.Password) {\n setPasswordType(PassType.Password)\n }\n }}\n error={passwordField.error || undefined}\n testID={testID}\n passwordIndicator={passwordIndicator}\n />\n )\n}\n" }, { "path": "src/components/PopupMenu/index.js", "content": "import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { html } from 'htm/react'\n\nimport {\n MenuCard,\n MenuTrigger,\n MenuWrapper,\n TRANSITION_DURATION\n} from './styles'\nimport { getHorizontal } from './utils/getHorizontal'\nimport { getVertical } from './utils/getVertical'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\nimport { toSentenceCase } from '../../utils/toSentenceCase'\n\n/**\n * @param {{\n * isOpen: boolean,\n * setIsOpen: (isOpen: boolean) => void,\n * content: import('react').ReactNode,\n * children: import('react').ReactNode,\n * direction: 'top' | 'bottom' | 'left' | 'right' | 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft'\n * displayOnHover?: boolean\n * testId?: string\n * }} props\n */\nexport const PopupMenu = ({\n isOpen,\n setIsOpen,\n children,\n content,\n direction = 'bottomLeft',\n displayOnHover = false,\n testId\n}) => {\n const boxRef = useRef(null)\n const closeTimeoutRef = useRef(null)\n\n const [shouldRender, setShouldRender] = useState(false)\n\n const handleClose = useCallback(() => {\n if (displayOnHover) {\n closeTimeoutRef.current = setTimeout(() => {\n setIsOpen(false)\n }, 100)\n } else {\n setIsOpen(false)\n }\n }, [setIsOpen, displayOnHover])\n\n const handleOpen = useCallback(() => {\n if (closeTimeoutRef.current) {\n clearTimeout(closeTimeoutRef.current)\n closeTimeoutRef.current = null\n }\n setIsOpen(true)\n }, [setIsOpen])\n\n const wrapperRef = useOutsideClick({\n onOutsideClick: () => {\n handleClose()\n }\n })\n\n const handleToggle = useCallback(() => {\n setIsOpen(!isOpen)\n }, [isOpen, setIsOpen])\n\n const { newDirection, newPositions } = useMemo(() => {\n const {\n right = 0,\n left = 0,\n top = 0,\n bottom = 0\n } = boxRef.current?.getBoundingClientRect() || {}\n\n const width =\n boxRef.current?.children[0]?.getBoundingClientRect().width ?? 0\n const height =\n boxRef.current?.children[0]?.getBoundingClientRect().height ?? 0\n\n const screenWidth = window.innerWidth\n const screenHeight = window.innerHeight\n\n const positionToSet = {\n horizontal: getHorizontal(direction),\n vertical: getVertical(direction)\n }\n\n const rightPosition = screenWidth - right\n const leftPosition = left\n const topPosition = top\n const bottomPosition = screenHeight - bottom\n\n const newPositions = {\n right: rightPosition - (positionToSet.horizontal === 'right' ? width : 0),\n left: leftPosition - (positionToSet.horizontal === 'left' ? width : 0),\n top: topPosition - (positionToSet.vertical === 'top' ? height : 0),\n bottom:\n bottomPosition - (positionToSet.vertical === 'bottom' ? height : 0),\n width: width,\n height: height\n }\n\n if (newPositions.top < 0) {\n positionToSet.vertical = 'bottom'\n }\n\n if (newPositions.bottom < 0) {\n positionToSet.vertical = 'top'\n }\n\n if (newPositions.left < 0) {\n positionToSet.horizontal = 'right'\n }\n\n if (newPositions.right < 0) {\n positionToSet.horizontal = 'left'\n }\n\n return {\n newDirection: `${positionToSet.vertical}${\n positionToSet.vertical\n ? toSentenceCase(positionToSet.horizontal)\n : positionToSet.horizontal\n }`,\n newPositions: newPositions\n }\n }, [boxRef, direction, shouldRender])\n\n const contentOrigin = useMemo(() => {\n if (!wrapperRef.current) {\n return { top: 0, left: 0 }\n }\n\n const {\n top = 0,\n bottom = 0,\n left = 0,\n right = 0,\n width = 0,\n height = 0\n } = wrapperRef.current.getBoundingClientRect() || {}\n\n switch (newDirection) {\n case 'top':\n return {\n top: top,\n left: left + width / 2\n }\n case 'bottom':\n return {\n top: bottom,\n left: left + width / 2\n }\n case 'left':\n return {\n top: top + height / 2,\n left: left\n }\n case 'right':\n return {\n top: top + height / 2,\n left: right\n }\n case 'topRight':\n return { top: top, left: left }\n case 'topLeft':\n return { top: top, left: right }\n case 'bottomRight':\n return { top: bottom, left: left }\n case 'bottomLeft':\n return {\n top: bottom,\n left: right\n }\n default:\n return { top: 0, left: 0 }\n }\n }, [newDirection, wrapperRef, isOpen, shouldRender])\n\n const getScrollableAncestors = (element) => {\n const scrollableAncestors = []\n let parent = element.parentElement\n\n while (parent) {\n const overflowX = window.getComputedStyle(parent).overflowX\n const overflowY = window.getComputedStyle(parent).overflowY\n\n if (\n ['auto', 'scroll'].includes(overflowX) ||\n ['auto', 'scroll'].includes(overflowY)\n ) {\n scrollableAncestors.push(parent)\n }\n\n parent = parent.parentElement\n }\n\n return scrollableAncestors\n }\n\n useEffect(() => {\n if (!wrapperRef.current) {\n return\n }\n\n const scrollableAncestors = getScrollableAncestors(wrapperRef.current)\n\n if (isOpen) {\n window.addEventListener('scroll', handleClose)\n window.addEventListener('resize', handleClose)\n\n scrollableAncestors.forEach((ancestor) => {\n ancestor.addEventListener('scroll', handleClose)\n })\n }\n\n return () => {\n window.removeEventListener('scroll', handleClose)\n window.removeEventListener('resize', handleClose)\n\n scrollableAncestors.forEach((ancestor) => {\n ancestor.removeEventListener('scroll', handleClose)\n })\n }\n }, [wrapperRef, isOpen, handleClose])\n\n useEffect(() => {\n if (isOpen) {\n setShouldRender(true)\n } else {\n const timer = setTimeout(() => {\n setShouldRender(false)\n }, TRANSITION_DURATION)\n\n return () => {\n clearTimeout(timer)\n }\n }\n }, [isOpen])\n\n useEffect(\n () => () => {\n if (closeTimeoutRef.current) {\n clearTimeout(closeTimeoutRef.current)\n }\n },\n []\n )\n\n return html`\n <${MenuWrapper}\n ref=${wrapperRef}\n onMouseEnter=${displayOnHover ? handleOpen : undefined}\n onMouseLeave=${displayOnHover ? handleClose : undefined}\n >\n <${MenuTrigger}\n data-testid=${testId}\n onClick=${!displayOnHover && handleToggle}\n >\n ${children}\n \n\n <${MenuCard}\n ref=${boxRef}\n direction=${newDirection}\n top=${contentOrigin.top}\n left=${contentOrigin.left}\n isOpen=${isOpen}\n shouldRender=${shouldRender}\n height=${newPositions.height}\n width=${newPositions.width}\n >\n ${content}\n \n \n `\n}\n" }, { "path": "src/components/PopupMenu/index.test.js", "content": "import React, { useState } from 'react'\n\nimport { render, fireEvent, waitFor, act } from '@testing-library/react'\n\nimport { PopupMenu } from './index'\nimport { TRANSITION_DURATION } from './styles'\nimport '@testing-library/jest-dom'\n\nconst PopupMenuWrapper = ({\n children,\n content,\n direction = 'bottomLeft',\n initialOpen = false\n}) => {\n const [isOpen, setIsOpen] = useState(initialOpen)\n return (\n \n {children}\n \n )\n}\n\ndescribe('PopupMenu Component', () => {\n beforeEach(() => {\n jest.useFakeTimers()\n })\n\n afterEach(() => {\n jest.runOnlyPendingTimers()\n jest.useRealTimers()\n })\n\n test('toggles open state when trigger is clicked (by opacity)', async () => {\n const { getByText, container } = render(\n Menu Content
}>\n \n \n )\n\n const menuContentInitial = getByText('Menu Content')\n const menuCardInitial = menuContentInitial.parentElement\n const computedStyle = window.getComputedStyle(menuCardInitial)\n expect(computedStyle.opacity).toBe('0')\n\n fireEvent.click(getByText('Toggle Menu'))\n await waitFor(() => {\n const menuContentOpen = getByText('Menu Content')\n const menuCardOpen = menuContentOpen.parentElement\n const computedStyleOpen = window.getComputedStyle(menuCardOpen)\n expect(computedStyleOpen.opacity).toBe('1')\n })\n\n fireEvent.click(getByText('Toggle Menu'))\n act(() => {\n jest.advanceTimersByTime(TRANSITION_DURATION)\n })\n await waitFor(() => {\n const menuContentClosed = getByText('Menu Content')\n const menuCardClosed = menuContentClosed.parentElement\n const computedStyleClosed = window.getComputedStyle(menuCardClosed)\n expect(computedStyleClosed.opacity).toBe('0')\n })\n\n expect(container).toMatchSnapshot()\n })\n\n test('closes menu when clicking outside', async () => {\n const { getByText } = render(\n
\n
Outside Element
\n Menu Content
}>\n \n \n \n )\n\n fireEvent.click(getByText('Toggle Menu'))\n\n await waitFor(() => {\n const menuContent = getByText('Menu Content')\n const menuCard = menuContent.parentElement\n expect(window.getComputedStyle(menuCard).opacity).toBe('1')\n })\n\n fireEvent.mouseDown(getByText('Outside Element'))\n\n act(() => {\n jest.advanceTimersByTime(TRANSITION_DURATION)\n })\n await waitFor(() => {\n const menuContent = getByText('Menu Content')\n const menuCard = menuContent.parentElement\n expect(window.getComputedStyle(menuCard).opacity).toBe('0')\n })\n })\n\n test('removes content from the DOM after transition completes', async () => {\n const { getByText } = render(\n Menu Content} initialOpen={true}>\n \n \n )\n\n const menuContent = getByText('Menu Content')\n const menuCard = menuContent.parentElement\n expect(window.getComputedStyle(menuCard).visibility).toBe('visible')\n\n fireEvent.click(getByText('Toggle Menu'))\n\n expect(window.getComputedStyle(menuCard).opacity).toBe('0')\n expect(window.getComputedStyle(menuCard).visibility).toBe('visible')\n\n act(() => {\n jest.advanceTimersByTime(TRANSITION_DURATION)\n })\n await waitFor(() => {\n expect(window.getComputedStyle(menuCard).visibility).toBe('hidden')\n })\n })\n\n test('handles window resize by closing the menu', async () => {\n const { getByText } = render(\n Menu Content}>\n \n \n )\n\n fireEvent.click(getByText('Toggle Menu'))\n\n await waitFor(() => {\n const menuContent = getByText('Menu Content')\n const menuCard = menuContent.parentElement\n expect(window.getComputedStyle(menuCard).opacity).toBe('1')\n })\n\n fireEvent(window, new Event('resize'))\n\n act(() => {\n jest.advanceTimersByTime(TRANSITION_DURATION)\n })\n await waitFor(() => {\n const menuContent = getByText('Menu Content')\n const menuCard = menuContent.parentElement\n expect(window.getComputedStyle(menuCard).opacity).toBe('0')\n })\n })\n})\n" }, { "path": "src/components/PopupMenu/styles.js", "content": "import styled from 'styled-components'\n\nexport const TRANSITION_DURATION = 250\n\nconst TRANSFORM_BY_DIRECTION = {\n top: 'translate(-100%, calc(-100% - 10px))',\n right: 'translate(10px, -50%)',\n bottom: 'translate(-50%, 10px)',\n left: 'translate(10px, -50%)',\n topRight: 'translate(0, calc(-100% - 10px))',\n topLeft: 'translate(-100%, calc(-100% - 10px))',\n bottomRight: 'translate(0, 10px)',\n bottomLeft: 'translate(-100%, 10px)'\n}\n\nexport const MenuWrapper = styled.div`\n position: relative;\n display: inline-block;\n`\n\nexport const MenuCard = styled.div.withConfig({\n shouldForwardProp: (prop) =>\n ![\n 'direction',\n 'isOpen',\n 'top',\n 'left',\n 'height',\n 'width',\n 'shouldRender'\n ].includes(prop)\n})`\n height: ${({ height }) => height}px;\n width: ${({ width }) => width}px;\n position: fixed;\n z-index: 20000;\n left: ${({ left }) => left}px;\n top: ${({ top }) => top}px;\n opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};\n visibility: ${({ shouldRender }) => (shouldRender ? 'visible' : 'hidden')};\n pointer-events: ${({ isOpen }) => (isOpen ? 'auto' : 'none')};\n transition:\n opacity ${TRANSITION_DURATION}ms ease-in-out,\n visibility ${TRANSITION_DURATION}ms ease-in-out;\n\n & {\n transform: ${({ direction }) => TRANSFORM_BY_DIRECTION[direction]};\n }\n\n @keyframes identifier {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n`\n\nexport const MenuTrigger = styled.div`\n cursor: pointer;\n`\n" }, { "path": "src/components/PopupMenu/utils/getHorizontal.js", "content": "/**\n * @param {'left' | 'right' | 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft'} direction\n * @returns {'left' | 'right' | ''}\n */\nexport const getHorizontal = (direction) => {\n if (direction?.toLowerCase().includes('left')) {\n return 'left'\n }\n if (direction?.toLowerCase().includes('right')) {\n return 'right'\n }\n return ''\n}\n" }, { "path": "src/components/PopupMenu/utils/getHorizontal.test.js", "content": "import { getHorizontal } from './getHorizontal'\n\ndescribe('getHorizontal', () => {\n it('should return \"left\" when direction contains \"left\"', () => {\n expect(getHorizontal('left')).toBe('left')\n expect(getHorizontal('topLeft')).toBe('left')\n expect(getHorizontal('bottomLeft')).toBe('left')\n })\n\n it('should return \"right\" when direction contains \"right\"', () => {\n expect(getHorizontal('right')).toBe('right')\n expect(getHorizontal('topRight')).toBe('right')\n expect(getHorizontal('bottomRight')).toBe('right')\n })\n\n it('should return empty string when direction does not contain \"left\" or \"right\"', () => {\n expect(getHorizontal('top')).toBe('')\n expect(getHorizontal('bottom')).toBe('')\n expect(getHorizontal('')).toBe('')\n })\n\n it('should handle undefined input', () => {\n expect(getHorizontal(undefined)).toBe('')\n })\n\n it('should be case insensitive', () => {\n expect(getHorizontal('LEFT')).toBe('left')\n expect(getHorizontal('Right')).toBe('right')\n expect(getHorizontal('topLEFT')).toBe('left')\n expect(getHorizontal('bottomRIGHT')).toBe('right')\n })\n})\n" }, { "path": "src/components/PopupMenu/utils/getVertical.js", "content": "/**\n * @param {'top' | 'bottom' | 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft'} direction\n * @returns {'top' | 'bottom' | ''}\n */\nexport const getVertical = (direction) => {\n if (direction?.includes('top')) {\n return 'top'\n }\n if (direction?.includes('bottom')) {\n return 'bottom'\n }\n return ''\n}\n" }, { "path": "src/components/PopupMenu/utils/getVertical.test.js", "content": "import { getVertical } from './getVertical'\n\ndescribe('getVertical', () => {\n test('should return \"top\" when direction includes \"top\"', () => {\n expect(getVertical('top')).toBe('top')\n expect(getVertical('topRight')).toBe('top')\n expect(getVertical('topLeft')).toBe('top')\n })\n\n test('should return \"bottom\" when direction includes \"bottom\"', () => {\n expect(getVertical('bottom')).toBe('bottom')\n expect(getVertical('bottomRight')).toBe('bottom')\n expect(getVertical('bottomLeft')).toBe('bottom')\n })\n\n test('should return empty string for other directions', () => {\n expect(getVertical('left')).toBe('')\n expect(getVertical('right')).toBe('')\n expect(getVertical('')).toBe('')\n expect(getVertical(null)).toBe('')\n expect(getVertical(undefined)).toBe('')\n })\n})\n" }, { "path": "src/components/RadioSelect/index.js", "content": "import { html } from 'htm/react'\n\nimport { RadioOption, RadioSelectWrapper, Title } from './styles'\nimport { ButtonRadio } from '../../lib-react-components'\n\n/**\n * @param {{\n * title?: string,\n * options: { label: string, value: string }[],\n * selectedOption: string,\n * onChange: (value: string) => void,\n * optionStyle?: object,\n * titleStyle?: object,\n * buttonType?: 'button' | 'submit',\n * disabled?: boolean\n * }} props\n */\nexport const RadioSelect = ({\n title,\n options,\n selectedOption,\n onChange,\n optionStyle,\n titleStyle,\n buttonType = 'button',\n disabled = false\n}) => {\n const handleChange = (value) => {\n onChange(value)\n }\n\n return html`\n <${RadioSelectWrapper} data-testid=\"radioselect-container\">\n ${title && html`<${Title} style=${titleStyle}>${title}`}\n ${options.map(\n (option) => html`\n <${RadioOption}\n key=${option.value}\n onClick=${() => handleChange(option.value)}\n style=${optionStyle}\n data-testid=\"radioselect-${option.value}-${selectedOption ===\n option.value\n ? 'active'\n : 'inactive'}\"\n >\n <${ButtonRadio}\n type=${buttonType}\n isActive=${selectedOption === option.value}\n disabled=${disabled}\n />\n ${option.label}\n \n `\n )}\n \n `\n}\n" }, { "path": "src/components/RadioSelect/index.test.js", "content": "import React from 'react'\n\nimport { render, screen, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { RadioSelect } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('./styles', () => ({\n RadioSelectWrapper: ({ children }) => (\n
{children}
\n ),\n Title: ({ children }) =>
{children}
,\n RadioOption: ({ children, onClick }) => (\n
\n {children}\n
\n )\n}))\n\njest.mock('../../lib-react-components', () => ({\n ButtonRadio: ({ isActive }) => (\n
\n {isActive ? 'Active' : 'Inactive'}\n
\n )\n}))\n\ndescribe('RadioSelect', () => {\n const mockOptions = [\n { label: 'Option 1', value: 'option1' },\n { label: 'Option 2', value: 'option2' },\n { label: 'Option 3', value: 'option3' }\n ]\n const mockTitle = 'Select an option'\n const mockOnChange = jest.fn()\n\n beforeEach(() => {\n mockOnChange.mockClear()\n })\n\n const renderComponent = (props = {}) =>\n render(\n \n \n \n )\n\n test('renders the component with title and options', () => {\n const { container } = renderComponent()\n expect(screen.getByTestId('title')).toHaveTextContent(mockTitle)\n expect(screen.getAllByTestId('radio-option')).toHaveLength(3)\n expect(container).toMatchSnapshot()\n })\n\n test('correctly marks the selected option', () => {\n renderComponent({ selectedOption: 'option2' })\n const radioButtons = screen.getAllByTestId('button-radio')\n\n expect(radioButtons[0]).toHaveAttribute('data-active', 'false')\n expect(radioButtons[1]).toHaveAttribute('data-active', 'true')\n expect(radioButtons[2]).toHaveAttribute('data-active', 'false')\n })\n\n test('calls onChange when an option is clicked', () => {\n renderComponent()\n\n const radioOptions = screen.getAllByTestId('radio-option')\n fireEvent.click(radioOptions[1])\n\n expect(mockOnChange).toHaveBeenCalledWith('option2')\n })\n\n test('renders all option labels correctly', () => {\n renderComponent()\n\n const radioOptions = screen.getAllByTestId('radio-option')\n expect(radioOptions[0]).toHaveTextContent('Option 1')\n expect(radioOptions[1]).toHaveTextContent('Option 2')\n expect(radioOptions[2]).toHaveTextContent('Option 3')\n })\n\n test('handles empty options array', () => {\n renderComponent({ options: [] })\n expect(screen.queryAllByTestId('radio-option')).toHaveLength(0)\n })\n\n test('maintains selection state between renders', () => {\n const { rerender } = renderComponent({ selectedOption: 'option1' })\n\n expect(screen.getAllByTestId('button-radio')[0]).toHaveAttribute(\n 'data-active',\n 'true'\n )\n\n rerender(\n \n \n \n )\n\n expect(screen.getAllByTestId('button-radio')[2]).toHaveAttribute(\n 'data-active',\n 'true'\n )\n })\n})\n" }, { "path": "src/components/RadioSelect/styles.js", "content": "import styled from 'styled-components'\n\nexport const RadioSelectWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`\n\nexport const Title = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 500;\n`\n\nexport const RadioOption = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 14px;\n font-weight: 600;\n margin-top: 10px;\n\n & + & {\n margin-top: 5px;\n }\n`\n" }, { "path": "src/components/Record/index.js", "content": "import { useState } from 'react'\n\nimport { generateAvatarInitials } from '@tetherto/pear-apps-utils-avatar-initials'\nimport { formatOtpCode } from '@tetherto/pearpass-lib-vault'\nimport { html } from 'htm/react'\n\nimport { RECORD_COLOR_BY_TYPE } from '../../constants/recordColorByType'\nimport { useRecordActionItems } from '../../hooks/useRecordActionItems'\nimport { KebabMenuIcon } from '../../lib-react-components'\nimport { CopyButton } from '../CopyButton'\nimport { PopupMenu } from '../PopupMenu'\nimport { RecordActionsPopupContent } from '../RecordActionsPopupContent'\nimport { RecordAvatar } from '../RecordAvatar'\nimport {\n OtpCodeText,\n RecordActions,\n RecordInformation,\n RecordName,\n RecordRightSection,\n RecordWrapper\n} from './styles'\n\n/**\n *\n * @param {{\n * record: {\n * id: string\n * createdAt: number\n * updatedAt: number\n * isFavorite: boolean\n * vaultId: string\n * folder: string\n * type: 'note' | 'creditCard' | 'custom' | 'identity' | 'login'\n * data: {\n * title: string\n * [key: string]: any\n * }\n * },\n * isSelected: boolean,\n * onClick: () => void\n * onSelect: () => void,\n * testId?: string,\n * dataId?: string,\n * otpCode?: string | null\n * }} props\n */\nexport const Record = ({\n record,\n isSelected = false,\n onClick,\n onSelect,\n testId,\n dataId,\n otpCode,\n recordType\n}) => {\n const [isOpen, setIsOpen] = useState()\n\n const folderName = record?.folder\n\n const { actions } = useRecordActionItems({\n record,\n recordType,\n onSelect,\n excludeTypes: ['edit'],\n onClose: () => {\n setIsOpen(false)\n }\n })\n\n const handleActionMenuToggle = (e) => {\n e.stopPropagation()\n\n setIsOpen(!isOpen)\n }\n\n const domain = record.type === 'login' ? record?.data?.websites?.[0] : null\n\n const formattedOtp = otpCode ? formatOtpCode(otpCode) : null\n\n return html`\n <${RecordWrapper}\n open=${isOpen}\n isSelected=${isSelected}\n onClick=${onClick}\n data-testid=${testId}\n data-id=${dataId}\n >\n <${RecordInformation}>\n <${RecordAvatar}\n websiteDomain=${domain}\n initials=${generateAvatarInitials(record?.data?.title)}\n isSelected=${isSelected}\n isFavorite=${record?.isFavorite}\n color=${RECORD_COLOR_BY_TYPE[record?.type]}\n />\n\n <${RecordName}>\n ${record?.data?.title}\n\n

${folderName}

\n \n \n\n <${RecordRightSection}>\n ${formattedOtp &&\n html`\n <${OtpCodeText} data-testid=\"record-otp-code\"> ${formattedOtp} \n e.stopPropagation()}>\n <${CopyButton} value=${otpCode} testId=\"record-otp-copy-button\" />\n \n `}\n ${!isSelected &&\n html` <${RecordActions}>\n <${PopupMenu}\n side=\"right\"\n align=\"right\"\n isOpen=${isOpen}\n setIsOpen=${setIsOpen}\n content=${html`\n <${RecordActionsPopupContent} menuItems=${actions} />\n `}\n >\n \n <${KebabMenuIcon} />\n \n \n `}\n \n \n `\n}\n" }, { "path": "src/components/Record/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent, waitFor } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { Record } from './index'\nimport '@testing-library/jest-dom/'\n\njest.mock('../../hooks/useRecordActionItems', () => ({\n useRecordActionItems: () => ({\n actions: [\n { label: 'Action 1', onClick: jest.fn() },\n { label: 'Action 2', onClick: jest.fn() }\n ]\n })\n}))\n\njest.mock('../RecordActionsPopupContent', () => ({\n RecordActionsPopupContent: () => (\n
\n RecordActionsPopupContent\n
\n )\n}))\n\njest.mock('../../lib-react-components', () => ({\n KebabMenuIcon: () => \n}))\n\njest.mock('../RecordAvatar', () => ({\n RecordAvatar: () =>
RecordAvatar
\n}))\n\ndescribe('Record Component', () => {\n const dummyRecord = {\n id: '1',\n createdAt: 1630000000000,\n updatedAt: 1630000000000,\n isFavorite: false,\n vaultId: 'vault-1',\n folder: 'Test Folder',\n type: 'note',\n data: {\n title: 'Test Record Title',\n avatarSrc: ''\n }\n }\n\n test('renders Record component correctly when not selected', () => {\n const { asFragment } = render(\n \n {}}\n onSelect={() => {}}\n />\n \n )\n expect(asFragment()).toMatchSnapshot()\n })\n\n test('renders Record component correctly when selected', () => {\n const { asFragment } = render(\n \n {}}\n onSelect={() => {}}\n />\n \n )\n expect(asFragment()).toMatchSnapshot()\n })\n\n test('toggles action menu when kebab icon is clicked (snapshot test)', async () => {\n const { container, asFragment } = render(\n \n {}}\n onSelect={() => {}}\n />\n \n )\n\n expect(asFragment()).toMatchSnapshot('initial state')\n\n const kebabIcon = container.querySelector('[data-testid=\"kebab-icon\"]')\n expect(kebabIcon).toBeInTheDocument()\n\n fireEvent.click(kebabIcon)\n\n await waitFor(() => {\n expect(\n container.querySelector('[data-testid=\"record-actions-popup-content\"]')\n ).toBeInTheDocument()\n })\n\n expect(asFragment()).toMatchSnapshot('after toggle')\n })\n})\n" }, { "path": "src/components/Record/styles.js", "content": "import styled, { css } from 'styled-components'\n\nexport const RecordWrapper = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isSelected', 'open'].includes(prop)\n})`\n width: 100%;\n height: auto;\n display: flex;\n min-height: 45px;\n padding: 5px 10px;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n border-radius: 10px;\n background: transparent;\n cursor: pointer;\n\n ${({ isSelected }) =>\n isSelected &&\n css`\n background: rgba(134, 170, 172, 0.4);\n `}\n\n ${({ open }) =>\n open &&\n css`\n background: rgba(134, 170, 172, 0.2);\n pointer-events: auto;\n `}\n \n &:hover {\n background: ${({ isSelected }) =>\n !isSelected && 'rgba(134, 170, 172, 0.2)'};\n }\n`\n\nexport const RecordInformation = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n`\n\nexport const RecordName = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: start;\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n\n & p {\n color: ${({ theme }) => theme.colors.grey100.mode1};\n font-size: 12px;\n }\n`\n\nexport const RecordRightSection = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n margin-left: auto;\n flex-shrink: 0;\n`\n\nexport const OtpCodeText = styled.span`\n font-family: 'Inter';\n font-variant-numeric: tabular-nums;\n font-size: 18px;\n font-weight: 600;\n color: ${({ theme }) => theme.colors.white.mode1};\n white-space: nowrap;\n`\n\nexport const RecordActions = styled.div`\n display: flex;\n align-items: center;\n`\n" }, { "path": "src/components/RecordActionsPopupContent/index.js", "content": "import { html } from 'htm/react'\n\nimport { MenuCard, MenuItem } from './styles'\nimport { RECORD_ACTION_ICON_BY_TYPE } from '../../constants/recordActions'\n\n/**\n * @param {{\n * menuItems: Array<{\n * name: string,\n * type: string,\n * click?: () => void,\n * }>,\n * variant: 'default' | 'compact',\n * onClick?: () => void,\n * }}\n */\nexport const RecordActionsPopupContent = ({\n variant = 'default',\n menuItems,\n onClick\n}) => html`\n <${MenuCard} variant=${variant}>\n ${menuItems.map(\n (item) => html`\n <${MenuItem}\n data-testid=${`recordaction-item-${item.type}`}\n data-id=${item.dataId}\n key=${item.type}\n variant=${variant}\n onClick=${(e) => {\n e.stopPropagation()\n\n if (item.click) {\n item.click()\n return\n }\n\n onClick?.()\n }}\n >\n <${RECORD_ACTION_ICON_BY_TYPE[item.type]} size=\"24\" />\n\n

${item.name}

\n \n `\n )}\n \n`\n" }, { "path": "src/components/RecordActionsPopupContent/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { RecordActionsPopupContent } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('../../constants/recordActions', () => ({\n RECORD_ACTION_ICON_BY_TYPE: {\n edit: () => ,\n delete: () => \n }\n}))\n\ndescribe('RecordActionsPopupContent Component', () => {\n const mockMenuItems = [\n { name: 'Edit', type: 'edit', click: jest.fn() },\n { name: 'Delete', type: 'delete', click: jest.fn() }\n ]\n\n test('renders correctly with default variant', () => {\n const { asFragment, getByText } = render(\n \n \n \n )\n\n expect(getByText('Edit')).toBeInTheDocument()\n expect(getByText('Delete')).toBeInTheDocument()\n expect(asFragment()).toMatchSnapshot()\n })\n\n test('renders correctly with compact variant', () => {\n const { asFragment } = render(\n \n \n \n )\n\n expect(asFragment()).toMatchSnapshot()\n })\n\n test('calls item.click when menu item is clicked', () => {\n const { getByText } = render(\n \n \n \n )\n\n fireEvent.click(getByText('Edit'))\n expect(mockMenuItems[0].click).toHaveBeenCalledTimes(1)\n\n fireEvent.click(getByText('Delete'))\n expect(mockMenuItems[1].click).toHaveBeenCalledTimes(1)\n })\n\n test('calls onClick prop when menu item without click handler is clicked', () => {\n const onClickMock = jest.fn()\n const itemsWithoutClick = [\n { name: 'Edit', type: 'edit' },\n { name: 'Delete', type: 'delete' }\n ]\n\n const { getByText } = render(\n \n \n \n )\n\n fireEvent.click(getByText('Edit'))\n expect(onClickMock).toHaveBeenCalledTimes(1)\n })\n})\n" }, { "path": "src/components/RecordActionsPopupContent/styles.js", "content": "import styled from 'styled-components'\n\nexport const MenuCard = styled.div`\n position: absolute;\n font-family: 'Inter';\n font-size: ${({ variant }) => (variant === 'default' ? '14px' : '10px')};\n align-items: flex-start;\n display: flex;\n padding: ${({ variant }) => (variant === 'default' ? '4px 8px' : '5px 5px')};\n flex-direction: column;\n gap: 4px;\n overflow: hidden;\n border-radius: 10px;\n border: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n background: ${({ theme }) => theme.colors.grey400.mode1};\n min-width: 150px;\n`\n\nexport const MenuItem = styled.div`\n display: flex;\n padding: 8px 0px;\n align-items: center;\n gap: 5px;\n align-self: stretch;\n word-break: keep-all;\n white-space: nowrap;\n cursor: pointer;\n color: ${({ theme }) => theme.colors.white.mode1};\n\n &:not(:last-child) {\n border-bottom: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n }\n`\n" }, { "path": "src/components/RecordAvatar/index.test.js", "content": "import React from 'react'\n\nimport { render } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { RecordAvatar } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('../../lib-react-components', () => ({\n CheckIcon: (props) => ,\n StarIcon: (props) => \n}))\n\nconst mockUseFavicon = jest.fn()\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n ...jest.requireActual('@tetherto/pearpass-lib-vault'),\n useFavicon: (params) => mockUseFavicon(params)\n}))\n\ndescribe('RecordAvatar Component', () => {\n const defaultProps = {\n initials: 'AB',\n color: '#FF5500'\n }\n\n beforeEach(() => {\n mockUseFavicon.mockReset()\n mockUseFavicon.mockReturnValue({\n faviconSrc: null,\n isLoading: false,\n hasError: false\n })\n global.URL.createObjectURL = jest.fn(() => 'blob:test-url')\n })\n\n test('calls useFavicon with domain', () => {\n render(\n \n \n \n )\n\n expect(mockUseFavicon).toHaveBeenCalledWith({ url: 'https://example.com' })\n })\n\n test('calls useFavicon with undefined when no websiteDomain', () => {\n render(\n \n \n \n )\n\n expect(mockUseFavicon).toHaveBeenCalledWith({ url: undefined })\n })\n\n test('renders image when useFavicon returns faviconSrc', () => {\n mockUseFavicon.mockReturnValue({\n faviconSrc: 'blob:test-url',\n isLoading: false,\n hasError: false\n })\n\n const { container } = render(\n \n \n \n )\n\n const img = container.querySelector('img')\n expect(img).toBeInTheDocument()\n expect(img).toHaveAttribute('src', 'blob:test-url')\n })\n\n test('renders initials fallback if favicon returns null', () => {\n const { getByText } = render(\n \n \n \n )\n\n expect(getByText('AB')).toBeInTheDocument()\n })\n\n test('renders check icon instead of favorite when both isSelected and isFavorite are true', () => {\n const { getByTestId, queryByTestId } = render(\n \n \n \n )\n\n expect(getByTestId('check-icon')).toBeInTheDocument()\n expect(queryByTestId('star-icon')).not.toBeInTheDocument()\n })\n})\n" }, { "path": "src/components/RecordAvatar/index.tsx", "content": "import React from 'react'\nimport { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport {\n AvatarAlt,\n AvatarContainer,\n AvatarImage,\n AvatarSize,\n FavoriteIcon,\n SelectedAvatarContainer\n} from './styles'\nimport { CheckIcon, StarIcon } from '../../lib-react-components'\nimport { useFavicon } from '@tetherto/pearpass-lib-vault'\n\ninterface Props {\n websiteDomain: string\n initials: string\n size: AvatarSize\n isSelected: boolean\n isFavorite: boolean\n color: string\n testId?: string\n}\n\nexport const RecordAvatar = (props: Props): React.ReactElement => {\n const { websiteDomain, initials, size, isSelected, isFavorite, color, testId } = props\n\n const { faviconSrc, isLoading } = useFavicon({ url: websiteDomain })\n\n if (isSelected) {\n return (\n \n \n \n )\n }\n\n const isFaviconLoaded = faviconSrc && !isLoading\n\n return (\n \n {isFaviconLoaded && }\n\n {!isFaviconLoaded && (\n \n {initials}\n \n )}\n\n {isFavorite && (\n \n \n \n )}\n \n )\n}\n" }, { "path": "src/components/RecordAvatar/styles.ts", "content": "import styled from 'styled-components'\n\nexport type AvatarSize = 'md' | 'sm'\n\nconst AVATAR_CONTAINER_SIZE = '30px'\n\ninterface AvatarContainerProps {\n size?: AvatarSize\n}\n\ninterface AvatarAltProps {\n color: string\n size?: AvatarSize\n}\n\nconst getAvatarHeight = (size?: AvatarSize): string => {\n return size === 'sm' ? '21px' : AVATAR_CONTAINER_SIZE\n}\n\nconst getAvatarBorderRadius = (size?: AvatarSize): string => {\n return size === 'sm' ? '7px' : '10px'\n}\n\nconst getAvatarFontSize = (size?: AvatarSize): string => {\n return size === 'sm' ? '12px' : '16px'\n}\n\nexport const AvatarContainer = styled.div`\n position: relative;\n display: flex;\n height: ${({ size }) => getAvatarHeight(size)};\n aspect-ratio: 1/1;\n padding: 2px;\n justify-content: center;\n align-items: center;\n border-radius: ${({ size }) => getAvatarBorderRadius(size)};\n background: ${({ theme }) => theme.colors.secondary400.mode1};\n min-width: 0;\n flex-shrink: 0;\n`\n\nexport const AvatarAlt = styled.div`\n color: ${({ color }) => color};\n text-align: center;\n font-family: 'Inter';\n font-size: ${({ size }) => getAvatarFontSize(size)};\n font-style: normal;\n font-weight: 700;\n line-height: normal;\n`\n\nexport const SelectedAvatarContainer = styled.div`\n display: flex;\n width: ${AVATAR_CONTAINER_SIZE};\n height: ${AVATAR_CONTAINER_SIZE};\n padding: 5px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex-shrink: 0;\n border-radius: 10px;\n background: ${({ theme }) => theme.colors.primary400.mode1};\n`\n\nexport const FavoriteIcon = styled.div`\n position: absolute;\n right: -6px;\n bottom: -9px;\n\n & > svg {\n fill: ${({ theme }) => theme.colors.primary400.mode1};\n }\n`\n\nexport const AvatarImage = styled.img`\n min-width: 0;\n display: flex;\n object-fit: cover;\n`\n" }, { "path": "src/components/RecordItemIcon/RecordItemIcon.styles.ts", "content": "import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\nimport { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = (colors: ThemeColors, size: number) => ({\n wrapper: {\n width: size,\n height: size,\n borderRadius: `${rawTokens.radius8}px`,\n overflow: 'hidden' as const,\n backgroundColor: colors.colorSurfaceHover,\n display: 'flex' as const,\n justifyContent: 'center' as const,\n alignItems: 'center' as const,\n flexShrink: 0\n },\n\n image: {\n width: size,\n height: size,\n borderRadius: `${rawTokens.radius8}px`,\n objectFit: 'contain' as const\n }\n})\n" }, { "path": "src/components/RecordItemIcon/RecordItemIcon.tsx", "content": "import React from 'react'\n\nimport { generateAvatarInitials } from '@tetherto/pear-apps-utils-avatar-initials'\nimport { Text, useTheme } from '@tetherto/pearpass-lib-ui-kit'\nimport { useFavicon } from '@tetherto/pearpass-lib-vault'\n\nimport { createStyles } from './RecordItemIcon.styles'\nimport { RECORD_COLOR_BY_TYPE } from '../../constants/recordColorByType'\n\ntype RecordLike = {\n type: string\n data?: {\n title?: string\n websites?: string[]\n }\n}\n\ntype RecordItemIconProps = {\n record: RecordLike\n size?: number\n testId?: string\n}\n\nexport const RecordItemIcon = ({\n record,\n size = 32,\n testId\n}: RecordItemIconProps) => {\n const { theme } = useTheme()\n const styles = createStyles(theme.colors, size)\n\n const websiteDomain =\n record.type === 'login' ? record.data?.websites?.[0] : undefined\n const { faviconSrc, isLoading } = useFavicon({ url: websiteDomain ?? '' })\n\n const showFavicon = !!faviconSrc && !isLoading\n const initials = generateAvatarInitials(record.data?.title ?? '')\n const color =\n RECORD_COLOR_BY_TYPE[record.type as keyof typeof RECORD_COLOR_BY_TYPE] ??\n theme.colors.colorTextPrimary\n\n return (\n
\n {showFavicon ? (\n \"\"\n ) : (\n = 32 ? 'labelEmphasized' : 'caption'}\n color={color}\n >\n {initials}\n \n )}\n
\n )\n}\n" }, { "path": "src/components/RecordItemIcon/index.ts", "content": "export { RecordItemIcon } from './RecordItemIcon'\n" }, { "path": "src/components/RecordSortActionsPopupContent/index.js", "content": "import { html } from 'htm/react'\n\nimport { MenuCard, MenuItem } from './styles'\nimport { CheckIcon } from '../../lib-react-components'\n\n/**\n * @param {{\n * menuItems: Array,\n * onClick: (type: 'recent' | 'newToOld' | 'oldToNew') => void,\n * }}\n */\nexport const RecordSortActionsPopupContent = ({\n menuItems,\n onClick,\n onClose,\n selectedType\n}) => {\n const handleMenuItemClick = (e, type) => {\n e.stopPropagation()\n\n onClick(type)\n\n onClose()\n }\n\n return html`\n <${MenuCard}>\n ${menuItems.map(\n (item) => html`\n <${MenuItem}\n key=${item.name}\n data-testid=${`sort-option-${item.type}`}\n onClick=${(e) => handleMenuItemClick(e, item.type)}\n >\n
\n <${item.icon} size=\"24\" />\n\n ${item.name}\n
\n\n ${selectedType === item.type && html`<${CheckIcon} size=\"24\" />`}\n \n `\n )}\n \n `\n}\n" }, { "path": "src/components/RecordSortActionsPopupContent/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { RecordSortActionsPopupContent } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('../../lib-react-components', () => ({\n CheckIcon: () => \n}))\n\ndescribe('RecordSortActionsPopupContent Component', () => {\n const mockMenuItems = [\n {\n name: 'Recent',\n type: 'recent',\n icon: () => \n },\n {\n name: 'Newest First',\n type: 'newToOld',\n icon: () => \n },\n {\n name: 'Oldest First',\n type: 'oldToNew',\n icon: () => \n }\n ]\n\n const mockOnClick = jest.fn()\n const mockOnClose = jest.fn()\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders correctly with all menu items', () => {\n const { getByText, queryAllByTestId, container } = render(\n \n \n \n )\n\n expect(getByText('Recent')).toBeInTheDocument()\n expect(getByText('Newest First')).toBeInTheDocument()\n expect(getByText('Oldest First')).toBeInTheDocument()\n expect(queryAllByTestId(/.*-icon/).length).toBe(3)\n expect(container).toMatchSnapshot()\n })\n\n test('shows check icon for selected item', () => {\n const { queryAllByTestId } = render(\n \n \n \n )\n\n expect(queryAllByTestId('check-icon').length).toBe(1)\n })\n\n test('calls onClick and onClose when menu item is clicked', () => {\n const { getByText } = render(\n \n \n \n )\n\n fireEvent.click(getByText('Recent'))\n expect(mockOnClick).toHaveBeenCalledWith('recent')\n expect(mockOnClose).toHaveBeenCalled()\n })\n\n test('renders correctly with no selected item', () => {\n const { queryAllByTestId } = render(\n \n \n \n )\n\n expect(queryAllByTestId('check-icon').length).toBe(0)\n })\n\n test('renders correctly with empty menu items', () => {\n const { container } = render(\n \n \n \n )\n\n expect(container.firstChild).toBeEmptyDOMElement()\n })\n})\n" }, { "path": "src/components/RecordSortActionsPopupContent/styles.js", "content": "import styled from 'styled-components'\n\nexport const MenuCard = styled.div`\n position: absolute;\n font-family: 'Inter';\n font-size: 10px;\n align-items: flex-start;\n display: flex;\n padding: 5px;\n flex-direction: column;\n gap: 3px;\n overflow: hidden;\n border-radius: 10px;\n border: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n background: ${({ theme }) => theme.colors.grey400.mode1};\n`\n\nexport const MenuItem = styled.div`\n display: flex;\n padding: 4px 0px;\n align-items: center;\n justify-content: space-between;\n gap: 5px;\n align-self: stretch;\n word-break: keep-all;\n white-space: nowrap;\n cursor: pointer;\n color: ${({ theme }) => theme.colors.white.mode1};\n\n & > div:first-child {\n display: flex;\n align-items: center;\n gap: 5px;\n }\n`\n" }, { "path": "src/components/RecordTypeMenu/index.js", "content": "import { html } from 'htm/react'\n\nimport { useRecordMenuItems } from '../../hooks/useRecordMenuItems'\nimport { MenuDropdown } from '../MenuDropdown'\n\n/**\n * @param {{\n * selectedRecord?: {\n * name: string;\n * icon?: React.ReactNode;\n * },\n * onRecordSelect: (record: {\n * name: string;\n * icon?: React.ReactNode;\n * }) => void,\n * testId?: string\n * }} props\n */\nexport const RecordTypeMenu = ({ selectedRecord, onRecordSelect, testId }) => {\n const { defaultItems } = useRecordMenuItems()\n\n const selectedItem = defaultItems.filter(\n (item) => item.type === selectedRecord\n )?.[0]\n\n return html`\n <${MenuDropdown}\n selectedItem=${selectedItem}\n onItemSelect=${onRecordSelect}\n items=${defaultItems}\n testId=${testId}\n />\n `\n}\n" }, { "path": "src/components/RecordTypeMenu/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { RecordTypeMenu } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('../../hooks/useRecordMenuItems', () => ({\n useRecordMenuItems: () => ({\n defaultItems: [\n {\n name: 'Login',\n type: 'login',\n icon: () => \n },\n {\n name: 'Card',\n type: 'card',\n icon: () => \n },\n {\n name: 'Note',\n type: 'note',\n icon: () => \n }\n ]\n })\n}))\n\njest.mock('../MenuDropdown', () => ({\n MenuDropdown: ({ selectedItem, onItemSelect, items }) => (\n
\n
{selectedItem?.name}
\n
    \n {items.map((item) => (\n onItemSelect(item)}\n >\n {item.name}\n {item.icon && item.icon()}\n \n ))}\n
\n
\n )\n}))\n\ndescribe('RecordTypeMenu Component', () => {\n const mockOnRecordSelect = jest.fn()\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders correctly with no selected record', () => {\n const { getByTestId, container } = render(\n \n \n \n )\n\n expect(getByTestId('menu-dropdown')).toBeInTheDocument()\n expect(getByTestId('selected-item')).toBeEmptyDOMElement()\n expect(container).toMatchSnapshot()\n })\n\n test('passes the correct selected item when selectedRecord is provided', () => {\n const { getByTestId } = render(\n \n \n \n )\n\n expect(getByTestId('selected-item')).toHaveTextContent('Card')\n })\n\n test('calls onRecordSelect when a menu item is clicked', () => {\n const { getByTestId } = render(\n \n \n \n )\n\n fireEvent.click(getByTestId('menu-item-login'))\n expect(mockOnRecordSelect).toHaveBeenCalledTimes(1)\n expect(mockOnRecordSelect).toHaveBeenCalledWith({\n name: 'Login',\n type: 'login',\n icon: expect.any(Function)\n })\n })\n\n test('renders all menu items from useRecordMenuItems hook', () => {\n const { getByTestId } = render(\n \n \n \n )\n\n expect(getByTestId('menu-item-login')).toBeInTheDocument()\n expect(getByTestId('menu-item-card')).toBeInTheDocument()\n expect(getByTestId('menu-item-note')).toBeInTheDocument()\n })\n\n test('handles case when selectedRecord does not match any item', () => {\n const { getByTestId } = render(\n \n \n \n )\n\n expect(getByTestId('selected-item')).toBeEmptyDOMElement()\n })\n})\n" }, { "path": "src/components/Select/SelectItem/index.js", "content": "import { html } from 'htm/react'\n\nimport { SelectItemWrapper } from './styles'\n\n/**\n * @param {{\n * onClick: () => void,\n * item: { label: string }\n * }} props\n */\nexport const SelectItem = ({ item, onClick, testId }) => html`\n <${SelectItemWrapper} data-testid=${testId} onClick=${() => onClick?.()}>\n ${item.label}\n \n`\n" }, { "path": "src/components/Select/SelectItem/index.test.js", "content": "import React from 'react'\n\nimport { fireEvent, render } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { SelectItem } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('SelectItem Component', () => {\n const mockOnClick = jest.fn()\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders correctly with item name', () => {\n const { getByText, container } = render(\n \n \n \n )\n\n expect(getByText('English')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('calls onClick when clicked', () => {\n const { getByText } = render(\n \n \n \n )\n\n fireEvent.click(getByText('English'))\n expect(mockOnClick).toHaveBeenCalledTimes(1)\n })\n\n test('renders correctly with a different item name', () => {\n const { getByText, container } = render(\n \n \n \n )\n\n expect(getByText('Spanish')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n})\n" }, { "path": "src/components/Select/SelectItem/styles.js", "content": "import styled from 'styled-components'\n\nexport const SelectItemWrapper = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n padding: 5px 10px;\n font-weight: 400;\n line-height: normal;\n cursor: pointer;\n white-space: nowrap;\n`\n" }, { "path": "src/components/Select/SelectLabel/index.js", "content": "import { html } from 'htm/react'\n\nimport { Label } from './styles'\nimport { ArrowDownIcon, ArrowUpIcon } from '../../../lib-react-components'\n\n/**\n * @param {{\n * selectedItem?: { label: string },\n * isOpen: boolean,\n * setIsOpen?: (isOpen: boolean) => void,\n * placeholder: string\n * }} props\n */\nexport const SelectLabel = ({\n selectedItem,\n isOpen,\n setIsOpen,\n placeholder,\n testId\n}) => html`\n <${Label} data-testid=${testId} onClick=${() => setIsOpen?.(!isOpen)}>\n ${selectedItem?.label || placeholder} \n <${isOpen ? ArrowUpIcon : ArrowDownIcon} size=\"24\" />\n \n`\n" }, { "path": "src/components/Select/SelectLabel/index.test.js", "content": "import React from 'react'\n\nimport { fireEvent, render } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { SelectLabel } from './index'\n\nimport '@testing-library/jest-dom'\n\ndescribe('SelectLabel Component', () => {\n const mockSetIsOpen = jest.fn()\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders correctly with placeholder when no selected item', () => {\n const { getByText, container } = render(\n \n \n \n )\n\n expect(getByText('Select an option')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('renders correctly with selected item', () => {\n const { getByText, container } = render(\n \n \n \n )\n\n expect(getByText('English')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('renders ArrowDownIcon when isOpen is false', () => {\n const { container } = render(\n \n \n \n )\n\n expect(container.querySelector('svg')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('renders ArrowUpIcon when isOpen is true', () => {\n const { container } = render(\n \n \n \n )\n\n expect(container.querySelector('svg')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('calls setIsOpen with the correct value when clicked', () => {\n const { getByText } = render(\n \n \n \n )\n\n fireEvent.click(getByText('Select an option'))\n expect(mockSetIsOpen).toHaveBeenCalledTimes(1)\n expect(mockSetIsOpen).toHaveBeenCalledWith(true)\n })\n})\n" }, { "path": "src/components/Select/SelectLabel/styles.js", "content": "import styled from 'styled-components'\n\nexport const Label = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n border: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n border-radius: 10px;\n padding: 7px 10px;\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 700;\n line-height: normal;\n cursor: pointer;\n white-space: nowrap;\n`\n" }, { "path": "src/components/Select/index.js", "content": "import { useState } from 'react'\n\nimport { html } from 'htm/react'\n\nimport { SelectItem } from './SelectItem'\nimport { SelectLabel } from './SelectLabel'\nimport { SelectWrapper, SelectDropdown } from './styles'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\n\n/**\n * @param {{\n * selectedItem?: { label: string },\n * onItemSelect: (item: { label: string, value: string }) => void,\n * items: Array<{ label: string, value: string }>,\n * placeholder: string\n * }} props\n */\nexport const Select = ({\n selectedItem,\n onItemSelect,\n items,\n placeholder,\n testId\n}) => {\n const [isOpen, setIsOpen] = useState(false)\n\n const wrapperRef = useOutsideClick({\n onOutsideClick: () => {\n setIsOpen(false)\n }\n })\n\n const handleSelect = (item) => {\n onItemSelect(item)\n setIsOpen(false)\n }\n\n return html`\n <${SelectWrapper} ref=${wrapperRef}>\n <${SelectLabel}\n selectedItem=${selectedItem}\n isOpen=${isOpen}\n setIsOpen=${setIsOpen}\n placeholder=${placeholder}\n testId=${testId}\n />\n\n ${isOpen &&\n html`<${SelectDropdown}>\n ${items.map(\n (item) => html`\n <${SelectItem}\n key=${item.label}\n item=${item}\n testId=${item.testId}\n onClick=${() => handleSelect(item)}\n />\n `\n )}\n `}\n \n `\n}\n" }, { "path": "src/components/Select/index.test.js", "content": "import React from 'react'\n\nimport { fireEvent, render } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { Select } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('Select Component', () => {\n const mockOnItemSelect = jest.fn()\n\n const items = [\n { label: 'English' },\n { label: 'Italian' },\n { label: 'Spanish' },\n { label: 'French' }\n ]\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders correctly with placeholder when no selected item', () => {\n const { getByText, container } = render(\n \n \n \n )\n\n expect(getByText('Select a language')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('renders correctly with a selected item', () => {\n const { getByText, container } = render(\n \n \n \n )\n\n expect(getByText('English')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('opens dropdown when label is clicked', () => {\n const { getByText, container } = render(\n \n \n \n )\n\n fireEvent.click(getByText('Select a language'))\n expect(getByText('English')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('calls onItemSelect with the correct item when an option is clicked', () => {\n const { getByText } = render(\n \n \n \n )\n\n fireEvent.click(getByText('Select a language'))\n fireEvent.click(getByText('Italian'))\n\n expect(mockOnItemSelect).toHaveBeenCalledTimes(1)\n expect(mockOnItemSelect).toHaveBeenCalledWith({ label: 'Italian' })\n })\n\n test('closes dropdown when an option is selected', () => {\n const { getByText, queryByText } = render(\n \n \n \n )\n\n fireEvent.click(getByText('Select a language'))\n fireEvent.click(getByText('Italian'))\n\n expect(queryByText('Italian')).not.toBeInTheDocument()\n })\n\n test('closes dropdown when clicking outside', () => {\n const { getByText, container } = render(\n \n \n \n )\n\n fireEvent.click(getByText('Select a language'))\n fireEvent.mouseDown(document.body)\n\n expect(container.querySelector('ul')).not.toBeInTheDocument()\n })\n})\n" }, { "path": "src/components/Select/styles.js", "content": "import styled from 'styled-components'\n\nexport const SelectWrapper = styled.div`\n position: relative;\n`\nexport const SelectDropdown = styled.div`\n margin-top: 1px;\n border: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n border-radius: 10px;\n width: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n padding: 7px 0;\n`\n" }, { "path": "src/components/SidebarCategory/index.js", "content": "import { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport { html } from 'htm/react'\n\nimport {\n CategoryButton,\n CategoryDescription,\n CategoryIconWrapper,\n CategoryName,\n CategoryQuantity\n} from './styles'\n\n/**\n * @param {{\n * size: 'default' | 'tight',\n * isSelected: boolean,\n * categoryName: string,\n * quantity: number,\n * color: string,\n * icon: import('react').ReactNode,\n * onClick: () => void,\n * testId?: string\n * }} props\n */\nexport const SidebarCategory = ({\n size = 'default',\n isSelected = false,\n categoryName,\n quantity = 0,\n color,\n icon,\n onClick,\n testId\n}) => html`\n <${CategoryButton}\n size=${size}\n color=${color}\n isSelected=${isSelected}\n onClick=${onClick}\n data-testid=${testId}\n >\n <${CategoryDescription} size=${size}>\n <${CategoryIconWrapper} isSelected=${isSelected} color=${color}>\n <${icon}\n color=${isSelected ? colors.black.mode1 : color}\n fill=${true}\n size=\"24px\"\n />\n \n\n <${CategoryName}>${categoryName}\n \n\n <${CategoryQuantity} size=${size}>${quantity}\n \n`\n" }, { "path": "src/components/SidebarCategory/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { SidebarCategory } from './index'\nimport '@testing-library/jest-dom'\n\nconst MockIcon = () =>
Icon
\n\ndescribe('SidebarCategory Component', () => {\n const defaultProps = {\n categoryName: 'Test Category',\n quantity: 5,\n color: '#ff0000',\n icon: MockIcon,\n onClick: jest.fn(),\n isSelected: false,\n size: 'default'\n }\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders correctly with default props', () => {\n const { container, getByText, getByTestId } = render(\n \n \n \n )\n expect(\n getByText((content) => content.includes('Test Category'))\n ).toBeInTheDocument()\n expect(getByText('5')).toBeInTheDocument()\n expect(getByTestId('mock-icon')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('calls onClick handler when clicked', () => {\n const { getByText } = render(\n \n {' '}\n \n )\n fireEvent.click(getByText('Test Category'))\n expect(defaultProps.onClick).toHaveBeenCalledTimes(1)\n })\n\n test('renders with zero quantity', () => {\n const { getByText } = render(\n \n {' '}\n \n )\n expect(getByText('0')).toBeInTheDocument()\n })\n})\n" }, { "path": "src/components/SidebarCategory/styles.js", "content": "import styled, { css } from 'styled-components'\n\nexport const CategoryButton = styled.button.withConfig({\n shouldForwardProp: (prop) => !['size', 'color', 'isSelected'].includes(prop)\n})`\n display: flex;\n font-family: 'Inter';\n font-size: 16px;\n line-height: normal;\n flex-direction: row;\n justify-content: space-between;\n background: ${({ theme }) => theme.colors.grey400.mode1};\n border-radius: 10px;\n border: 1px solid transparent;\n color: ${({ theme }) => theme.colors.white.mode1};\n cursor: pointer;\n position: relative;\n\n &:hover {\n border-color: ${({ color }) => color};\n }\n\n ${({ size }) =>\n size === 'default' &&\n css`\n flex: 1;\n min-width: 121px;\n padding: 10px 9px;\n `}\n\n ${({ size }) =>\n size === 'tight' &&\n css`\n width: 100%;\n padding: 5px 9px;\n align-items: center;\n `}\n \n ${({ isSelected, theme, color }) =>\n isSelected &&\n css`\n background: ${color};\n color: ${theme.colors.black.mode1};\n `}\n`\n\nexport const CategoryDescription = styled.div`\n display: flex;\n gap: 2px;\n white-space: nowrap;\n font-weight: 600;\n width: 100%;\n text-align: left;\n\n ${({ size }) =>\n size === 'default' &&\n css`\n flex-direction: column;\n `}\n\n ${({ size }) =>\n size === 'tight' &&\n css`\n align-items: center;\n flex-direction: row;\n `}\n`\n\nexport const CategoryIconWrapper = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isSelected', 'color'].includes(prop)\n})`\n display: flex;\n`\n\nexport const CategoryName = styled.span`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n`\n\nexport const CategoryQuantity = styled.span.withConfig({\n shouldForwardProp: (prop) => !['size'].includes(prop)\n})`\n font-weight: 300;\n position: ${({ size }) => (size === 'default' ? 'absolute' : '')};\n top: ${({ size }) => (size === 'default' ? '8px' : '')};\n right: 9px;\n`\n" }, { "path": "src/components/SidebarFolder/index.js", "content": "import React, { useState } from 'react'\n\nimport { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport { html } from 'htm/react'\n\nimport { FolderIcon, KebabMenuIcon, PlusIcon } from '../../lib-react-components'\nimport { EditFolderPopupContent } from '../EditFolderPopupContent'\nimport { PopupMenu } from '../PopupMenu'\nimport {\n AddIconWrapper,\n FolderName,\n NestedFolder,\n NestedFoldersContainer,\n NestedItem\n} from './styles'\n\n/**\n * @param {{\n * isOpen: boolean\n * onClick: () => void\n * onAddClick: () => void\n * isRoot: boolean\n * name: string\n * icon: string\n * isActive: boolean\n * hasMenu?: boolean\n * }} props\n */\nexport const SidebarFolder = ({\n onClick,\n onAddClick,\n isRoot,\n name,\n icon: Icon,\n isActive,\n hasMenu = true\n}) => {\n const [isNewPopupMenuOpen, setIsNewPopupMenuOpen] = useState(false)\n\n return html`\n <${React.Fragment}>\n <${NestedFoldersContainer}>\n <${NestedItem}>\n <${NestedFolder}\n isActive=${isActive}\n data-testid=\"sidebar-folder\"\n onClick=${onClick}\n >\n ${!isRoot &&\n html`\n <${Icon ?? FolderIcon}\n size=\"24\"\n color=${isActive ? colors.primary400.mode1 : undefined}\n />\n `}\n\n <${FolderName}>${name}\n\n ${!isRoot &&\n hasMenu &&\n html` <${PopupMenu}\n side=\"right\"\n align=\"right\"\n isOpen=${isNewPopupMenuOpen}\n setIsOpen=${setIsNewPopupMenuOpen}\n content=${html` <${EditFolderPopupContent} name=${name} /> `}\n testId=\"sidebar-folder-options\"\n >\n <${KebabMenuIcon} />\n `}\n \n \n\n ${isRoot &&\n html`\n <${AddIconWrapper}\n data-testid=\"sidebarfolder-button-add\"\n onClick=${() => onAddClick()}\n >\n <${PlusIcon} color=${colors.primary400.mode1} size=\"24\" />\n \n `}\n \n \n `\n}\n" }, { "path": "src/components/SidebarFolder/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { SidebarFolder } from './index'\n\nimport '@testing-library/jest-dom'\n\nconst MockIcon = () =>
Icon
\n\njest.mock('../PopupMenu', () => ({\n PopupMenu: ({ title, children }) => (\n
\n {children}\n
\n )\n}))\n\njest.mock('../EditFolderPopupContent', () => ({\n EditFolderPopupContent: ({ title, children }) => (\n
\n {children}\n
\n )\n}))\n\njest.mock('../../lib-react-components', () => ({\n FolderIcon: () =>
,\n KebabMenuIcon: () =>
,\n PlusIcon: () =>
\n}))\n\ndescribe('SidebarFolder Component', () => {\n const defaultProps = {\n isOpen: false,\n onClick: jest.fn(),\n onDropDown: jest.fn(),\n onAddClick: jest.fn(),\n isRoot: false,\n name: 'Test Folder',\n icon: MockIcon,\n isActive: false\n }\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders correctly with default props', () => {\n const { getByText, getByTestId } = render(\n \n \n \n )\n expect(getByText('Test Folder')).toBeInTheDocument()\n expect(getByTestId('mock-icon')).toBeInTheDocument()\n })\n\n test('calls onClick handler when clicked', () => {\n const { getByTestId } = render(\n \n \n \n )\n const wrapper = getByTestId('sidebar-folder')\n fireEvent.click(wrapper)\n\n expect(defaultProps.onClick).toHaveBeenCalledTimes(1)\n })\n\n test('renders with custom icon when provided', () => {\n const { getByTestId } = render(\n \n \n \n )\n expect(getByTestId('mock-icon')).toBeInTheDocument()\n })\n})\n" }, { "path": "src/components/SidebarFolder/styles.js", "content": "import styled from 'styled-components'\n\nexport const NestedFoldersContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n`\n\nexport const NestedItem = styled.div`\n display: flex;\n align-items: center;\n gap: 7px;\n cursor: pointer;\n flex: 1;\n min-width: 0;\n`\n\nexport const NestedFolder = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isActive'].includes(prop)\n})`\n display: flex;\n flex: 1;\n color: ${({ theme, isActive }) =>\n isActive ? theme.colors.primary400.mode1 : undefined};\n align-items: center;\n gap: 10px;\n min-width: 0;\n`\n\nexport const AddIconWrapper = styled.div`\n cursor: pointer;\n`\n\nexport const FolderName = styled.span`\n flex: 1;\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n`\n" }, { "path": "src/components/SidebarSearch/index.js", "content": "import { useLingui } from '@lingui/react'\nimport { html } from 'htm/react'\n\nimport { SearchInput, SearchLabelIcon, SidebarSearchContainer } from './styles'\nimport { SearchIcon } from '../../lib-react-components'\n\n/**\n * @param {{\n * value: string\n * onChange: (value: string) => void\n * testId?: string\n * }} props\n */\nexport const SidebarSearch = ({ value, onChange, testId }) => {\n const { i18n } = useLingui()\n\n const handleSearch = (e) => {\n onChange(e.target.value)\n }\n\n return html`\n <${SidebarSearchContainer}>\n <${SearchLabelIcon}>\n <${SearchIcon} size=\"24\" />\n \n\n <${SearchInput}\n data-testid=${testId}\n type=\"search\"\n value=${value}\n onChange=${handleSearch}\n placeholder=${i18n._('Search...')}\n />\n \n `\n}\n" }, { "path": "src/components/SidebarSearch/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { SidebarSearch } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('../../lib-react-components', () => ({\n SearchIcon: () =>
SearchIcon
\n}))\n\njest.mock('@lingui/react', () => ({\n useLingui: () => ({\n i18n: { _: (str) => str }\n })\n}))\n\ndescribe('SidebarSearch Component', () => {\n const defaultProps = {\n value: '',\n onChange: jest.fn()\n }\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders correctly with default props', () => {\n const { container, getByTestId } = render(\n \n \n \n )\n expect(getByTestId('search-icon')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('calls onChange handler when input changes', () => {\n const { getByPlaceholderText } = render(\n \n \n \n )\n const input = getByPlaceholderText('Search...')\n fireEvent.change(input, { target: { value: 'test search' } })\n expect(defaultProps.onChange).toHaveBeenCalledWith('test search')\n })\n\n test('displays the current value in the input', () => {\n const props = {\n ...defaultProps,\n value: 'current search'\n }\n const { getByDisplayValue } = render(\n \n \n \n )\n expect(getByDisplayValue('current search')).toBeInTheDocument()\n })\n\n test('has the correct placeholder text', () => {\n const { getByPlaceholderText } = render(\n \n \n \n )\n expect(getByPlaceholderText('Search...')).toBeInTheDocument()\n })\n\n test('input has search type attribute', () => {\n const { getByPlaceholderText } = render(\n \n \n \n )\n const input = getByPlaceholderText('Search...')\n expect(input).toHaveAttribute('type', 'search')\n })\n})\n" }, { "path": "src/components/SidebarSearch/styles.js", "content": "import styled from 'styled-components'\n\nexport const SidebarSearchContainer = styled.div`\n height: 29px;\n font-family: 'Inter';\n font-size: 16px;\n display: flex;\n align-items: center;\n padding: 5px 30px;\n position: relative;\n`\n\nexport const SearchLabelIcon = styled.label`\n position: absolute;\n left: 4px;\n\n & path {\n stroke: ${({ theme }) => theme.colors.primary400.mode1};\n }\n`\n\nexport const SearchInput = styled.input`\n border: none;\n background: transparent;\n color: ${({ theme }) => theme.colors.white.mode1};\n padding: 0;\n font-family: 'Inter';\n font-size: 16px;\n font-weight: 500;\n\n &::placeholder {\n color: ${({ theme }) => theme.colors.grey200.mode1};\n }\n\n &:focus {\n border: none;\n box-shadow: none;\n outline: none;\n }\n\n &::-webkit-search-cancel-button {\n appearance: none;\n }\n`\n" }, { "path": "src/components/SwitchWithLabel/index.js", "content": "import { html } from 'htm/react'\n\nimport { ContentWrapper, Description, Label, Wrapper } from './styles'\nimport { Switch } from '../../lib-react-components'\n\n/**\n * @param {{\n * isOn?: boolean,\n * onChange?: (isOn: boolean) => void\n * label?: string,\n * description?: string,\n * isLabelBold?: boolean\n * isSwitchFirst?: boolean\n * stretch?: boolean\n * disabled?: boolean,\n * testId?: string\n * }} props\n */\nexport const SwitchWithLabel = ({\n isOn,\n onChange,\n label,\n description,\n isLabelBold,\n isSwitchFirst = false,\n stretch = true,\n disabled = false,\n testId\n}) => {\n const toggleSwitch = () => {\n if (!disabled) {\n onChange?.(!isOn)\n }\n }\n\n return html`\n <${Wrapper}\n isSwitchFirst=${isSwitchFirst}\n stretch=${stretch}\n onClick=${toggleSwitch}\n data-testid=${testId}\n >\n <${ContentWrapper}>\n <${Label} isBold=${isLabelBold}> ${label} \n ${description && html`<${Description}> ${description} `}\n \n <${Switch}\n testId=${`switchwithlabel-switch-${isOn ? 'on' : 'off'}`}\n isOn=${isOn}\n />\n \n `\n}\n" }, { "path": "src/components/SwitchWithLabel/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport '@testing-library/jest-dom'\nimport { SwitchWithLabel } from './index'\n\njest.mock('../../lib-react-components', () => ({\n Switch: ({ isOn }) => (\n
\n Switch Component\n
\n )\n}))\n\ndescribe('SwitchWithLabel Component', () => {\n const defaultProps = {\n isOn: false,\n onChange: jest.fn(),\n label: 'Test Label',\n isLabelBold: false\n }\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders correctly with default props', () => {\n const { container, getByText, getByTestId } = render(\n \n \n \n )\n\n expect(getByText('Test Label')).toBeInTheDocument()\n expect(getByTestId('switch')).toBeInTheDocument()\n expect(container).toMatchSnapshot()\n })\n\n test('calls onChange handler when clicked', () => {\n const { container } = render(\n \n \n \n )\n\n fireEvent.click(container.firstChild)\n expect(defaultProps.onChange).toHaveBeenCalledWith(true)\n })\n\n test('toggles from on to off when clicked', () => {\n const props = {\n ...defaultProps,\n isOn: true\n }\n\n const { container } = render(\n \n \n \n )\n\n fireEvent.click(container.firstChild)\n expect(props.onChange).toHaveBeenCalledWith(false)\n })\n\n test('renders switch with correct isOn state', () => {\n const props = {\n ...defaultProps,\n isOn: true\n }\n\n const { getByTestId } = render(\n \n \n \n )\n\n const switchComponent = getByTestId('switch')\n expect(switchComponent).toHaveAttribute('data-is-on', 'true')\n })\n\n test('does not throw when onChange is not provided', () => {\n const props = {\n ...defaultProps,\n onChange: undefined\n }\n\n const { container } = render(\n \n \n \n )\n\n expect(() => {\n fireEvent.click(container.firstChild)\n }).not.toThrow()\n })\n})\n" }, { "path": "src/components/SwitchWithLabel/styles.js", "content": "import styled from 'styled-components'\n\nexport const Wrapper = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: ${({ isSwitchFirst }) =>\n isSwitchFirst ? 'row-reverse' : 'row'};\n justify-content: ${({ stretch, isSwitchFirst }) =>\n stretch ? 'space-between' : isSwitchFirst ? 'flex-end' : 'flex-start'};\n gap: 8px;\n cursor: pointer;\n`\n\nexport const ContentWrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n`\n\nexport const Label = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isBold'].includes(prop)\n})`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 14px;\n font-weight: ${({ isBold }) => (isBold ? '600' : '400')};\n`\n\nexport const Description = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-style: normal;\n font-weight: 300;\n line-height: normal;\n`\n" }, { "path": "src/components/TimerBar/index.test.js", "content": "import React from 'react'\n\nimport { render } from '@testing-library/react'\nimport '@testing-library/jest-dom'\n\nimport { TimerBar } from './index'\n\nconst mockUseTimerAnimation = jest.fn()\n\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n useTimerAnimation: (...args) => mockUseTimerAnimation(...args)\n}))\n\njest.mock('../OtpCodeField/utils', () => ({\n getTimerColor: (expiring) => (expiring ? '#red' : '#green')\n}))\n\njest.mock('./styles', () => ({\n styles: {\n wrapper: {},\n track: {},\n fill: {},\n timer: {}\n }\n}))\n\ndescribe('TimerBar', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n mockUseTimerAnimation.mockReturnValue({\n noTransition: false,\n expiring: false,\n targetTime: 20\n })\n })\n\n test('renders timer text with timeRemaining', () => {\n const { container } = render()\n\n expect(container.querySelector('span')).toHaveTextContent('15s')\n })\n\n test('sets progress to 0 when timeRemaining is null', () => {\n mockUseTimerAnimation.mockReturnValue({\n noTransition: false,\n expiring: false,\n targetTime: 0\n })\n\n const { container } = render()\n\n const fill = container.querySelectorAll('div')[2]\n expect(fill.style.width).toBe('0%')\n })\n\n test('sets progress to 0 when period is 0', () => {\n mockUseTimerAnimation.mockReturnValue({\n noTransition: false,\n expiring: false,\n targetTime: 10\n })\n\n const { container } = render()\n\n const fill = container.querySelectorAll('div')[2]\n expect(fill.style.width).toBe('0%')\n })\n\n test('applies noTransition style when set', () => {\n mockUseTimerAnimation.mockReturnValue({\n noTransition: true,\n expiring: false,\n targetTime: 30\n })\n\n const { container } = render()\n\n const fill = container.querySelectorAll('div')[2]\n expect(fill.style.transition).toBe('none')\n })\n\n test('applies linear transition when noTransition is false', () => {\n const { container } = render()\n\n const fill = container.querySelectorAll('div')[2]\n expect(fill.style.transition).toBe('width 1s linear')\n })\n\n test('passes animated prop to useTimerAnimation', () => {\n render()\n\n expect(mockUseTimerAnimation).toHaveBeenCalledWith(20, 30, false)\n })\n\n test('defaults animated to true', () => {\n render()\n\n expect(mockUseTimerAnimation).toHaveBeenCalledWith(20, 30, true)\n })\n})\n" }, { "path": "src/components/TimerBar/index.ts", "content": "import { html } from 'htm/react'\nimport { useTimerAnimation } from '@tetherto/pearpass-lib-vault'\n\nimport { getTimerColor } from '../OtpCodeField/utils'\nimport { styles } from './styles'\n\ninterface TimerBarProps {\n timeRemaining: number | null\n period: number\n animated?: boolean\n}\n\nexport const TimerBar = ({ timeRemaining, period, animated = true }: TimerBarProps) => {\n const { noTransition, expiring, targetTime } = useTimerAnimation(\n timeRemaining,\n period,\n animated\n )\n\n const progress =\n timeRemaining !== null && period ? (targetTime / period) * 100 : 0\n\n const color = getTimerColor(expiring)\n\n return html`\n
\n
\n \n
\n \n ${timeRemaining}s\n \n
\n `\n}\n" }, { "path": "src/components/TimerBar/styles.ts", "content": "import { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nexport const styles = {\n wrapper: {\n display: 'flex',\n alignItems: 'center',\n gap: 8,\n padding: '4px 10px 6px',\n width: '100%'\n },\n track: {\n flex: 1,\n height: 6,\n borderRadius: 20,\n background: `${colors.grey100.mode1}33`,\n overflow: 'hidden'\n },\n fill: {\n height: '100%',\n borderRadius: 10\n },\n timer: {\n fontFamily: 'Inter',\n fontSize: 12,\n fontWeight: 500,\n minWidth: 22,\n textAlign: 'right' as const\n }\n}\n" }, { "path": "src/components/TimerCircle/index.test.js", "content": "import React from 'react'\n\nimport { render } from '@testing-library/react'\nimport '@testing-library/jest-dom'\n\nimport { TimerCircle } from './index'\n\nconst mockUseTimerAnimation = jest.fn()\n\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n useTimerAnimation: (...args) => mockUseTimerAnimation(...args)\n}))\n\njest.mock('../OtpCodeField/utils', () => ({\n getTimerColor: (expiring) => (expiring ? '#red' : '#green')\n}))\n\njest.mock('./styles', () => ({\n styles: {\n wrapper: {},\n svg: {},\n circleBg: {}\n }\n}))\n\nconst CIRCUMFERENCE = 2 * Math.PI * 5.5\n\ndescribe('TimerCircle', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n mockUseTimerAnimation.mockReturnValue({\n noTransition: false,\n expiring: false,\n targetTime: 20\n })\n })\n\n test('renders svg with correct viewBox', () => {\n const { container } = render()\n\n const svg = container.querySelector('svg')\n expect(svg).toHaveAttribute('viewBox', '0 0 14 14')\n })\n\n test('renders two circles', () => {\n const { container } = render()\n\n const circles = container.querySelectorAll('circle')\n expect(circles).toHaveLength(2)\n })\n\n test('computes dashOffset from targetTime and period', () => {\n mockUseTimerAnimation.mockReturnValue({\n noTransition: false,\n expiring: false,\n targetTime: 15\n })\n\n const { container } = render()\n\n const fillCircle = container.querySelectorAll('circle')[1]\n const expectedOffset = (1 - 15 / 30) * CIRCUMFERENCE\n expect(fillCircle).toHaveAttribute(\n 'stroke-dashoffset',\n String(expectedOffset)\n )\n })\n\n test('sets dashOffset to 0 when timeRemaining is null', () => {\n mockUseTimerAnimation.mockReturnValue({\n noTransition: false,\n expiring: false,\n targetTime: 0\n })\n\n const { container } = render(\n \n )\n\n const fillCircle = container.querySelectorAll('circle')[1]\n expect(fillCircle).toHaveAttribute('stroke-dashoffset', '0')\n })\n\n test('applies noTransition style', () => {\n mockUseTimerAnimation.mockReturnValue({\n noTransition: true,\n expiring: false,\n targetTime: 30\n })\n\n const { container } = render()\n\n const fillCircle = container.querySelectorAll('circle')[1]\n expect(fillCircle.style.transition).toBe('none')\n })\n\n test('applies linear transition when noTransition is false', () => {\n const { container } = render()\n\n const fillCircle = container.querySelectorAll('circle')[1]\n expect(fillCircle.style.transition).toBe('stroke-dashoffset 1s linear')\n })\n\n test('passes animated prop to useTimerAnimation', () => {\n render()\n\n expect(mockUseTimerAnimation).toHaveBeenCalledWith(20, 30, false)\n })\n\n test('defaults animated to true', () => {\n render()\n\n expect(mockUseTimerAnimation).toHaveBeenCalledWith(20, 30, true)\n })\n})\n" }, { "path": "src/components/TimerCircle/index.ts", "content": "import { html } from 'htm/react'\nimport { useTimerAnimation } from '@tetherto/pearpass-lib-vault'\n\nimport { getTimerColor } from '../OtpCodeField/utils'\nimport { styles } from './styles'\n\nconst SIZE = 14\nconst RADIUS = 5.5\nconst STROKE_WIDTH = 1.5\nconst CENTER = SIZE / 2\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\ninterface TimerCircleProps {\n timeRemaining: number | null\n period: number\n animated?: boolean\n}\n\nexport const TimerCircle = ({ timeRemaining, period, animated = true }: TimerCircleProps) => {\n const { noTransition, expiring, targetTime } = useTimerAnimation(\n timeRemaining,\n period,\n animated\n )\n\n const dashOffset =\n timeRemaining !== null ? (1 - targetTime / period) * CIRCUMFERENCE : 0\n\n const color = getTimerColor(expiring)\n\n return html`\n
\n \n \n \n \n
\n `\n}\n" }, { "path": "src/components/TimerCircle/styles.ts", "content": "import { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nexport const styles = {\n wrapper: {\n width: 14,\n height: 14,\n flexShrink: 0\n },\n svg: {\n width: 14,\n height: 14,\n transform: 'rotate(-90deg)'\n },\n circleBg: {\n fill: 'none',\n stroke: `${colors.grey100.mode1}33`,\n strokeWidth: 1.5\n }\n}\n" }, { "path": "src/components/TitleBar/index.js", "content": "import { useTheme } from '@tetherto/pearpass-lib-ui-kit'\nimport { html } from 'htm/react'\nimport styled from 'styled-components'\n\nimport { PearpassLogo } from '../../svgs/PearpassLogo'\nimport { isV2 } from '../../utils/designVersion'\n\nconst BarInner = styled.div`\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n padding: 12px 16px;\n`\n\nconst Brand = styled.div`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-height: 20px;\n user-select: none;\n`\n\nexport const TitleBar = () => {\n if (!isV2()) return null\n if (process.platform !== 'darwin') return null\n\n const { theme } = useTheme()\n const backgroundColor = theme.colors.colorBackground\n\n return html`\n \n <${BarInner}>\n <${Brand}>\n <${PearpassLogo} />\n \n \n \n `\n}\n" }, { "path": "src/components/Toasts/index.js", "content": "import { Snackbar } from '@tetherto/pearpass-lib-ui-kit'\nimport { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport { html } from 'htm/react'\n\nimport { ToastContainer, ToastStack } from './styles'\nimport { isV2 } from '../../utils/designVersion'\n\n/**\n * @param {{\n * toasts: Array.<{\n * message: string\n * icon?: import('react').ElementType\n * }>\n * }} props\n */\nexport const Toasts = ({ toasts }) => {\n const v2 = isV2()\n\n return html`\n <${ToastStack}>\n ${toasts?.map((toast, index) => {\n const Icon = toast.icon\n if (v2) {\n return html`\n <${Snackbar}\n key=${index}\n text=${toast.message}\n icon=${Icon ? html`<${Icon} />` : undefined}\n />\n `\n }\n return html`\n <${ToastContainer} key=${index}>\n ${Icon && html`<${Icon} color=${colors.black.mode1} />`}\n ${toast.message}\n \n `\n })}\n \n `\n}\n" }, { "path": "src/components/Toasts/index.test.js", "content": "import React from 'react'\n\nimport { render } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { Toasts } from './index'\nimport '@testing-library/jest-dom'\n\njest.mock('./styles', () => ({\n ToastContainer: ({ children }) => (\n
{children}
\n ),\n ToastStack: ({ children }) =>
{children}
\n}))\n\nconst mockSnackbar = jest.fn(({ text, icon }) => (\n
\n {icon ?
{icon}
: null}\n {text}\n
\n))\n\njest.mock('@tetherto/pearpass-lib-ui-kit', () => ({\n Snackbar: (props) => mockSnackbar(props)\n}))\n\njest.mock('../../utils/designVersion', () => ({\n isV2: () => true\n}))\n\ndescribe('Toasts Component', () => {\n const mockIcon = jest.fn(() =>
Icon
)\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders correctly with toasts', () => {\n const toasts = [\n { message: 'Success message', icon: mockIcon },\n { message: 'Error message', icon: null }\n ]\n\n const { getByTestId, getAllByTestId, getByText, container } = render(\n \n \n \n )\n\n expect(getByTestId('toast-stack')).toBeInTheDocument()\n expect(getAllByTestId('snackbar')).toHaveLength(2)\n expect(getByText('Success message')).toBeInTheDocument()\n expect(getByText('Error message')).toBeInTheDocument()\n expect(getByTestId('mock-icon')).toBeInTheDocument()\n expect(mockSnackbar).toHaveBeenCalledTimes(2)\n expect(mockSnackbar).toHaveBeenNthCalledWith(\n 1,\n expect.objectContaining({\n text: 'Success message',\n icon: expect.anything()\n })\n )\n expect(mockSnackbar).toHaveBeenNthCalledWith(\n 2,\n expect.objectContaining({\n text: 'Error message',\n icon: undefined\n })\n )\n expect(container).toMatchSnapshot()\n })\n\n test('renders correctly with empty toasts array', () => {\n const { getByTestId } = render(\n \n \n \n )\n\n expect(getByTestId('toast-stack')).toBeInTheDocument()\n expect(mockSnackbar).not.toHaveBeenCalled()\n })\n\n test('renders correctly with undefined toasts', () => {\n const { getByTestId } = render(\n \n \n \n )\n\n expect(getByTestId('toast-stack')).toBeInTheDocument()\n expect(mockSnackbar).not.toHaveBeenCalled()\n })\n\n test('passes icon through to Snackbar', () => {\n const toasts = [{ message: 'Test message', icon: mockIcon }]\n\n render(\n \n \n \n )\n\n expect(mockSnackbar).toHaveBeenCalledWith(\n expect.objectContaining({\n text: 'Test message',\n icon: expect.anything()\n })\n )\n })\n})\n" }, { "path": "src/components/Toasts/styles.js", "content": "import styled from 'styled-components'\n\nexport const ToastStack = styled.div`\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n bottom: 23.5px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n z-index: 1000;\n`\n\nexport const ToastContainer = styled.div`\n display: flex;\n padding: 5px 10px;\n justify-content: center;\n align-items: center;\n gap: 7px;\n\n border-radius: 10px;\n background: ${({ theme }) => theme.colors.white.mode1};\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);\n\n color: ${({ theme }) => theme.colors.black.mode1};\n font-family: 'Inter';\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\n" }, { "path": "src/components/WebsiteButton/index.tsx", "content": "import React from 'react'\nimport { OutsideLinkIcon } from '../../lib-react-components/icons/OutsideLinkIcon'\n\ninterface WebsiteButtonProps {\n url?: string\n testId?: string\n}\n\nconst WebsiteButton = ({ url, testId }: WebsiteButtonProps): React.ReactElement => {\n const handleWebsiteClick = () => {\n if (!url?.length) {\n return\n }\n\n window.open(url, '_blank')\n }\n\n return (\n \n \n \n )\n}\n\nexport { WebsiteButton }\n" }, { "path": "src/constants/appConstants.js", "content": "export const DEBUG_MODE = false\n" }, { "path": "src/constants/feedback.js", "content": "import {\n TEST_SLACK_WEBHOOK_URL_PATH as _TEST_SLACK_WEBHOOK_URL_PATH,\n SLACK_WEBHOOK_URL_PATH as _SLACK_WEBHOOK_URL_PATH,\n TEST_GOOGLE_FORM_KEY as _TEST_GOOGLE_FORM_KEY,\n GOOGLE_FORM_KEY as _GOOGLE_FORM_KEY,\n TEST_GOOGLE_FORM_MAPPING_TIMESTAMP,\n TEST_GOOGLE_FORM_MAPPING_TOPIC,\n TEST_GOOGLE_FORM_MAPPING_APP,\n TEST_GOOGLE_FORM_MAPPING_OPERATING_SYSTEM,\n TEST_GOOGLE_FORM_MAPPING_DEVICE_MODEL,\n TEST_GOOGLE_FORM_MAPPING_MESSAGE,\n TEST_GOOGLE_FORM_MAPPING_APP_VERSION,\n GOOGLE_FORM_MAPPING_TIMESTAMP,\n GOOGLE_FORM_MAPPING_TOPIC,\n GOOGLE_FORM_MAPPING_APP,\n GOOGLE_FORM_MAPPING_OPERATING_SYSTEM,\n GOOGLE_FORM_MAPPING_DEVICE_MODEL,\n GOOGLE_FORM_MAPPING_MESSAGE,\n GOOGLE_FORM_MAPPING_APP_VERSION\n} from '@tetherto/pearpass-lib-constants'\n\nimport { isDev } from '../utils/envGetter'\n\nexport const SLACK_WEBHOOK_URL_PATH = isDev()\n ? _TEST_SLACK_WEBHOOK_URL_PATH\n : _SLACK_WEBHOOK_URL_PATH\n\nexport const GOOGLE_FORM_KEY = isDev()\n ? _TEST_GOOGLE_FORM_KEY\n : _GOOGLE_FORM_KEY\n\nexport const GOOGLE_FORM_MAPPING = isDev()\n ? {\n timestamp: TEST_GOOGLE_FORM_MAPPING_TIMESTAMP,\n topic: TEST_GOOGLE_FORM_MAPPING_TOPIC,\n app: TEST_GOOGLE_FORM_MAPPING_APP,\n operatingSystem: TEST_GOOGLE_FORM_MAPPING_OPERATING_SYSTEM,\n deviceModel: TEST_GOOGLE_FORM_MAPPING_DEVICE_MODEL,\n message: TEST_GOOGLE_FORM_MAPPING_MESSAGE,\n appVersion: TEST_GOOGLE_FORM_MAPPING_APP_VERSION\n }\n : {\n timestamp: GOOGLE_FORM_MAPPING_TIMESTAMP,\n topic: GOOGLE_FORM_MAPPING_TOPIC,\n app: GOOGLE_FORM_MAPPING_APP,\n operatingSystem: GOOGLE_FORM_MAPPING_OPERATING_SYSTEM,\n deviceModel: GOOGLE_FORM_MAPPING_DEVICE_MODEL,\n message: GOOGLE_FORM_MAPPING_MESSAGE,\n appVersion: GOOGLE_FORM_MAPPING_APP_VERSION\n }\n" }, { "path": "src/constants/formFields.js", "content": "const ATTACHMENTS_FIELD_KEY = 'attachments'\n\nexport { ATTACHMENTS_FIELD_KEY }\n" }, { "path": "src/constants/layout.ts", "content": "// Shared height for v2 column headers so they line up across columns.\nexport const HEADER_MIN_HEIGHT = 44\n\n// Bottom fade on scroll areas; list also pads by this to keep the last row visible.\nexport const FADE_GRADIENT_HEIGHT = 70\n" }, { "path": "src/constants/localStorage.js", "content": "export const LOCAL_STORAGE_KEYS = {\n NATIVE_MESSAGING_ENABLED: 'native-messaging-enabled',\n TOU_ACCEPTED: 'tou-accepted',\n COPY_TO_CLIPBOARD_DISABLED: 'copy-to-clipboard-disabled',\n PASSWORD_CHANGE_REMINDER_ENABLED: 'password-change-reminder-enabled',\n AUTO_LOCK_ENABLED: 'auto-lock-enabled',\n AUTO_LOCK_TIMEOUT_MS: 'auto-lock-timeout-ms',\n NM_CLIENT_PUBLIC_KEY: 'nm-client-public-key',\n EXTENSION_DIALOG_DISMISSED: 'extension-dialog-dismissed'\n}\n" }, { "path": "src/constants/meta.js", "content": "export const META_URL = import.meta.url\n" }, { "path": "src/constants/navigation.js", "content": "export const NAVIGATION_ROUTES = {\n CREATE_MASTER_PASSWORD: 'createMasterPassword',\n MASTER_PASSWORD: 'masterPassword',\n VAULTS: 'vaults',\n LOAD_VAULT: 'loadVault',\n UPLOAD_BACKUP_FILE: 'uploadBackupFile',\n VAULT_PASSWORD: 'vaultPassword',\n NEW_VAULT_CREDENTIALS: 'newVaultCredentials',\n SCREEN_LOCKED: 'screenLocked'\n}\n" }, { "path": "src/constants/pairing.js", "content": "/**\n * Pairing states for tracking extension pairing confirmation\n */\nexport const PAIRING_STATES = {\n PENDING: 'PENDING', // getIdentity called, desktop identity key pinned\n CONFIRMED: 'CONFIRMED' // confirmPairing succeeded, final pairing confirmed\n}\n" }, { "path": "src/constants/password.ts", "content": "import { PasswordIndicatorVariant } from '@tetherto/pearpass-lib-ui-kit'\n\nconst STRENGTH_MAP: Record = {\n error: 'vulnerable',\n warning: 'decent',\n success: 'strong'\n}\n\nexport { STRENGTH_MAP }\n" }, { "path": "src/constants/pearpassLinks.js", "content": "export const CHROME_EXTENSION_STORE_LINK =\n 'https://chromewebstore.google.com/detail/pdeffakfmcdnjjafophphgmddmigpejh'\n" }, { "path": "src/constants/recordActions.js", "content": "import {\n CheckIcon,\n MoveToIcon,\n DeleteIcon,\n StarIcon\n} from '../lib-react-components'\n\n/**\n * @type {Record}\n */\nexport const RECORD_ACTION_ICON_BY_TYPE = {\n select: CheckIcon,\n favorite: StarIcon,\n move: MoveToIcon,\n delete: DeleteIcon\n}\n" }, { "path": "src/constants/recordColorByType.js", "content": "import { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nexport const RECORD_COLOR_BY_TYPE = {\n all: colors.primary400.dark,\n login: colors.categoryLogin.dark,\n identity: colors.categoryIdentity.dark,\n creditCard: colors.categoryCreditCard.dark,\n note: colors.categoryNote.dark,\n custom: colors.categoryCustom.dark,\n password: colors.categoryPassword.dark,\n wifiPassword: colors.categoryWifiPassword.dark,\n passPhrase: colors.categoryPassPhrase.dark\n}\n" }, { "path": "src/constants/recordIconByType.js", "content": "import {\n CreditCardIcon,\n FullBodyIcon,\n KeyIcon,\n LockIcon,\n NoteIcon,\n PasswordIcon,\n UserIcon,\n PassPhraseIcon\n} from '../lib-react-components'\nimport { WifiIcon } from '../lib-react-components/icons/WifiIcon'\n\nexport const RECORD_ICON_BY_TYPE = {\n all: KeyIcon,\n login: UserIcon,\n identity: FullBodyIcon,\n creditCard: CreditCardIcon,\n note: NoteIcon,\n custom: LockIcon,\n password: PasswordIcon,\n wifiPassword: WifiIcon,\n passPhrase: PassPhraseIcon\n}\n" }, { "path": "src/constants/securityErrors.js", "content": "/**\n * Error codes for security-related operations\n */\nexport const SecurityErrorCodes = {\n // Pairing errors\n PAIRING_TOKEN_REQUIRED: 'PAIRING_TOKEN_REQUIRED',\n INVALID_PAIRING_TOKEN: 'INVALID_PAIRING_TOKEN',\n INVALID_PAIRING_SECRET: 'INVALID_PAIRING_SECRET',\n CLIENT_PUBLIC_KEY_REQUIRED: 'CLIENT_PUBLIC_KEY_REQUIRED',\n CLIENT_ALREADY_PAIRED: 'CLIENT_ALREADY_PAIRED',\n MISSING_CLIENT_PUBLIC_KEY: 'MISSING_CLIENT_PUBLIC_KEY',\n NO_PENDING_PAIRING: 'NO_PENDING_PAIRING',\n CLIENT_KEY_MISMATCH: 'CLIENT_KEY_MISMATCH',\n\n // Handshake errors\n NATIVE_MESSAGING_DISABLED: 'NATIVE_MESSAGING_DISABLED',\n NOT_PAIRED: 'NOT_PAIRED',\n CLIENT_NOT_PAIRED: 'CLIENT_NOT_PAIRED',\n MISSING_EPHEMERAL_PUBLIC_KEY: 'MISSING_EPHEMERAL_PUBLIC_KEY',\n MISSING_SESSION_ID: 'MISSING_SESSION_ID',\n MISSING_CLIENT_SIGNATURE: 'MISSING_CLIENT_SIGNATURE',\n SESSION_NOT_FOUND: 'SESSION_NOT_FOUND',\n IDENTITY_KEYS_UNAVAILABLE: 'IDENTITY_KEYS_UNAVAILABLE',\n\n // Validation errors\n INVALID_CLIENT_PUBLIC_KEY: 'INVALID_CLIENT_PUBLIC_KEY',\n INVALID_CLIENT_SIGNATURE: 'INVALID_CLIENT_SIGNATURE',\n INVALID_TRANSCRIPT: 'INVALID_TRANSCRIPT',\n CLIENT_SIGNATURE_INVALID: 'CLIENT_SIGNATURE_INVALID',\n\n // Secure request errors\n INVALID_SECURE_PAYLOAD: 'INVALID_SECURE_PAYLOAD',\n CLIENT_NOT_VERIFIED: 'CLIENT_NOT_VERIFIED',\n DECRYPT_FAILED: 'DECRYPT_FAILED',\n INVALID_SEQ: 'INVALID_SEQ',\n REPLAY_DETECTED: 'REPLAY_DETECTED',\n\n // Method registry errors\n UNKNOWN_METHOD: 'UNKNOWN_METHOD',\n DESKTOP_NOT_AUTHENTICATED: 'DESKTOP_NOT_AUTHENTICATED',\n\n // Auto lock errors\n MISSING_AUTO_LOCK_TIMEOUT_MS: 'MISSING_AUTO_LOCK_TIMEOUT_MS',\n INVALID_AUTO_LOCK_ENABLED: 'INVALID_AUTO_LOCK_ENABLED'\n}\n" }, { "path": "src/constants/services.js", "content": "export const HANDLER_EVENTS = {\n extensionLock: 'extension-lock',\n extensionExit: 'extension-exit'\n}\n" }, { "path": "src/constants/sortOptions.ts", "content": "export const SORT_KEYS = {\n TITLE_AZ: 'title_az',\n LAST_UPDATED_NEWEST: 'last_updated_newest',\n LAST_UPDATED_OLDEST: 'last_updated_oldest',\n DATE_ADDED_NEWEST: 'date_added_newest',\n DATE_ADDED_OLDEST: 'date_added_oldest'\n} as const\n\nexport type SortKey = (typeof SORT_KEYS)[keyof typeof SORT_KEYS]\n\nexport const SORT_BY_TYPE: Record<\n SortKey,\n { key: string; direction: 'asc' | 'desc' }\n> = {\n [SORT_KEYS.TITLE_AZ]: { key: 'data.title', direction: 'asc' },\n [SORT_KEYS.LAST_UPDATED_NEWEST]: { key: 'updatedAt', direction: 'desc' },\n [SORT_KEYS.LAST_UPDATED_OLDEST]: { key: 'updatedAt', direction: 'asc' },\n [SORT_KEYS.DATE_ADDED_NEWEST]: { key: 'createdAt', direction: 'desc' },\n [SORT_KEYS.DATE_ADDED_OLDEST]: { key: 'createdAt', direction: 'asc' }\n}\n" }, { "path": "src/constants/timeConstants.js", "content": "export const COPY_FEEDBACK_DISPLAY_TIME = 2000\n" }, { "path": "src/constants/transitions.js", "content": "export const BASE_TRANSITION_DURATION = 300\n" }, { "path": "src/containers/AppHeaderContainer/AppHeaderContainer.test.js", "content": "import React from 'react'\n\nimport '@testing-library/jest-dom'\nimport { render, screen, fireEvent } from '@testing-library/react'\n\nlet mockAuthenticatorEnabled = false\n\njest.mock('@tetherto/pearpass-lib-constants', () => ({\n get AUTHENTICATOR_ENABLED() {\n return mockAuthenticatorEnabled\n }\n}))\n\njest.mock('../../utils/designVersion', () => ({\n isV2: jest.fn()\n}))\n\nconst mockNavigate = jest.fn()\nconst mockSetModal = jest.fn()\n\njest.mock('../../context/RouterContext', () => ({\n useRouter: jest.fn()\n}))\n\njest.mock('../../context/ModalContext', () => ({\n useModal: () => ({\n setModal: mockSetModal\n })\n}))\n\njest.mock('../../hooks/useTranslation', () => ({\n useTranslation: () => ({\n t: (key) => key\n })\n}))\n\njest.mock('../../hooks/useRecordMenuItems', () => ({\n useRecordMenuItems: jest.fn()\n}))\n\njest.mock('../../hooks/useCreateOrEditRecord', () => ({\n useCreateOrEditRecord: jest.fn()\n}))\n\njest.mock('../../components/PopupMenu', () => ({\n PopupMenu: ({ children }) =>
{children}
\n}))\n\njest.mock('../../components/CreateNewCategoryPopupContent', () => ({\n CreateNewCategoryPopupContent: () => (\n
\n )\n}))\n\njest.mock('../../components/AppHeaderV2', () => {\n const React = require('react')\n return {\n AppHeaderV2: jest.fn((props) =>\n React.createElement(\n 'div',\n { 'data-testid': 'app-header-v2-mock' },\n React.createElement('input', {\n 'data-testid': 'mock-search',\n value: props.searchValue,\n onChange: (e) => props.onSearchChange(e.target.value)\n }),\n React.createElement(\n 'button',\n {\n type: 'button',\n 'data-testid': 'mock-import',\n onClick: props.onImportClick\n },\n 'Import'\n ),\n props.addItemControl\n )\n ),\n AppHeaderAddItemTrigger: () =>\n React.createElement(\n 'button',\n { type: 'button', 'data-testid': 'add-item-trigger' },\n 'Add'\n )\n }\n})\n\njest.mock('../Modal/ImportItemOrVaultModalContentV2', () => ({\n ImportItemOrVaultModalContentV2: () => null\n}))\n\nimport { AppHeaderContainer } from './AppHeaderContainer'\nimport { AppHeaderV2 } from '../../components/AppHeaderV2'\nimport { AppHeaderContextProvider } from '../../context/AppHeaderContext'\nimport { useRouter } from '../../context/RouterContext'\nimport { useCreateOrEditRecord } from '../../hooks/useCreateOrEditRecord'\nimport { useRecordMenuItems } from '../../hooks/useRecordMenuItems'\nimport { isV2 } from '../../utils/designVersion'\n\nconst renderWithHeaderContext = (ui) =>\n render({ui})\n\ndescribe('AppHeaderContainer', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n mockAuthenticatorEnabled = false\n isV2.mockReturnValue(true)\n mockNavigate.mockReset()\n mockSetModal.mockReset()\n useRouter.mockReturnValue({\n currentPage: 'vault',\n data: { folder: 'folder-1', recordType: 'login' },\n navigate: mockNavigate\n })\n useRecordMenuItems.mockReturnValue({\n categoriesItems: [],\n defaultItems: [],\n popupItems: []\n })\n useCreateOrEditRecord.mockReturnValue({\n handleCreateOrEditRecord: jest.fn()\n })\n })\n\n it('returns null when design is not v2', () => {\n isV2.mockReturnValue(false)\n\n const { container } = renderWithHeaderContext()\n\n expect(container.firstChild).toBeNull()\n expect(AppHeaderV2).not.toHaveBeenCalled()\n })\n\n it('returns null when current page is not vault', () => {\n useRouter.mockReturnValue({\n currentPage: 'settings',\n data: {},\n navigate: mockNavigate\n })\n\n const { container } = renderWithHeaderContext()\n\n expect(container.firstChild).toBeNull()\n expect(AppHeaderV2).not.toHaveBeenCalled()\n })\n\n it('renders AppHeaderV2 on authenticator vault when AUTHENTICATOR_ENABLED', () => {\n mockAuthenticatorEnabled = true\n useRouter.mockReturnValue({\n currentPage: 'vault',\n data: { recordType: 'otp' },\n navigate: mockNavigate\n })\n\n renderWithHeaderContext()\n\n expect(screen.getByTestId('app-header-v2-mock')).toBeInTheDocument()\n expect(AppHeaderV2).toHaveBeenCalled()\n })\n\n it('renders AppHeaderV2 on vault when v2 and not blocked', () => {\n renderWithHeaderContext()\n\n expect(screen.getByTestId('app-header-v2-mock')).toBeInTheDocument()\n expect(AppHeaderV2).toHaveBeenCalled()\n })\n\n it('opens import modal on import', () => {\n renderWithHeaderContext()\n\n fireEvent.click(screen.getByTestId('mock-import'))\n\n expect(mockSetModal).toHaveBeenCalledTimes(1)\n })\n\n it('wires search to header context state', () => {\n renderWithHeaderContext()\n\n fireEvent.change(screen.getByTestId('mock-search'), {\n target: { value: 'find-me' }\n })\n\n expect(screen.getByTestId('mock-search')).toHaveValue('find-me')\n })\n})\n" }, { "path": "src/containers/AppHeaderContainer/AppHeaderContainer.tsx", "content": "import React from 'react'\nimport { AUTHENTICATOR_ENABLED } from '@tetherto/pearpass-lib-constants'\nimport { ContextMenu, NavbarListItem, useTheme } from '@tetherto/pearpass-lib-ui-kit'\nimport {\n AccountCircleOutlined,\n AssignmentInd,\n CreditCard,\n FormatQuote,\n GridView,\n Key,\n Note,\n QrCode,\n WiFi\n} from '@tetherto/pearpass-lib-ui-kit/icons'\nimport { RECORD_TYPES } from '@tetherto/pearpass-lib-vault'\n\nimport {\n AppHeaderAddItemTrigger,\n AppHeaderV2\n} from '../../components/AppHeaderV2'\nimport { useModal } from '../../context/ModalContext'\nimport { useRouter } from '../../context/RouterContext'\nimport { useAppHeaderContext } from '../../context/AppHeaderContext'\nimport { useCreateOrEditRecord } from '../../hooks/useCreateOrEditRecord'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { isV2 } from '../../utils/designVersion'\nimport { isFavorite } from '../../utils/isFavorite'\nimport { ImportItemOrVaultModalContentV2 } from '../Modal/ImportItemOrVaultModalContentV2'\n\nexport const AppHeaderContainer = () => {\n const { currentPage, data: routerData } = useRouter()\n const { setModal } = useModal()\n const {\n searchValue,\n setSearchValue,\n isAddMenuOpen,\n setIsAddMenuOpen\n } = useAppHeaderContext()\n const { handleCreateOrEditRecord } = useCreateOrEditRecord()\n const { theme } = useTheme()\n const { t } = useTranslation()\n\n if (!isV2()) {\n return null\n }\n\n if (currentPage !== 'vault') {\n return null\n }\n\n const isFavoritesView = isFavorite(routerData?.folder ?? '')\n const selectedFolder =\n routerData?.folder && !isFavoritesView ? routerData.folder : undefined\n\n const iconColor = theme.colors.colorTextPrimary\n\n const addItems = [\n { type: RECORD_TYPES.LOGIN, label: t('Logins'), icon: },\n { type: RECORD_TYPES.CREDIT_CARD, label: t('Credit Card'), icon: },\n { type: RECORD_TYPES.IDENTITY, label: t('Identities'), icon: },\n { type: RECORD_TYPES.NOTE, label: t('Notes'), icon: },\n { type: RECORD_TYPES.PASS_PHRASE, label: t('Recovery Phrases'), icon: },\n { type: RECORD_TYPES.WIFI_PASSWORD, label: t('Wi-Fi'), icon: },\n { type: 'password', label: t('Password'), icon: },\n { type: RECORD_TYPES.CUSTOM, label: t('Other'), icon: },\n ...(AUTHENTICATOR_ENABLED\n ? [{ type: RECORD_TYPES.OTP, label: t('Authenticator Code'), icon: }]\n : [])\n ]\n\n const handleImportClick = () => {\n setModal()\n }\n\n const addItemControl = (\n }\n open={isAddMenuOpen}\n onOpenChange={setIsAddMenuOpen}\n testID=\"add-item-menu\"\n >\n {addItems.map(item => (\n {\n handleCreateOrEditRecord({\n recordType: item.type,\n selectedFolder,\n isFavorite: isFavoritesView ? true : undefined\n })\n setIsAddMenuOpen(false)\n }}\n />\n ))}\n \n )\n\n return (\n setSearchValue(val)}\n onImportClick={handleImportClick}\n addItemControl={addItemControl}\n />\n )\n}\n" }, { "path": "src/containers/AppHeaderContainer/index.ts", "content": "export { AppHeaderContainer } from './AppHeaderContainer'\n" }, { "path": "src/containers/AttachmentField/index.js", "content": "import { html } from 'htm/react'\n\nimport {\n AdditionalItems,\n AttachmentName,\n IconWrapper,\n InputAreaWrapper,\n Label,\n MainWrapper,\n Wrapper\n} from './styles'\nimport { useModal } from '../../context/ModalContext'\nimport { CommonFileIcon } from '../../lib-react-components'\nimport { isV2 } from '../../utils/designVersion'\nimport { DisplayPictureModalContent } from '../Modal/DisplayPictureModalContent'\nimport { DisplayPictureModalContentV2 } from '../Modal/DisplayPictureModalContentV2/DisplayPictureModalContentV2'\n\nconst imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp']\n\nconst getExtension = (filename) => filename?.split('.').pop()?.toLowerCase()\n\nexport const AttachmentField = ({\n attachment,\n label,\n additionalItems,\n testId\n}) => {\n const { setModal } = useModal()\n\n const isImage = attachment?.name\n ? imageExtensions.includes(getExtension(attachment.name))\n : false\n\n const handleDownload = (e) => {\n e.stopPropagation()\n\n if (!attachment?.buffer || !attachment?.name) {\n return\n }\n\n const blob = new Blob([attachment.buffer])\n const url = URL.createObjectURL(blob)\n\n if (isImage) {\n const ModalContentComponent = isV2()\n ? DisplayPictureModalContentV2\n : DisplayPictureModalContent\n\n setModal()\n } else {\n const a = document.createElement('a')\n a.href = url\n a.download = attachment.name\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n URL.revokeObjectURL(url)\n }\n }\n\n return html`\n <${Wrapper} data-testid=${testId}>\n <${IconWrapper}> <${CommonFileIcon} size=\"21\" /> \n <${MainWrapper}>\n <${Label}> ${label} \n\n <${InputAreaWrapper}>\n <${AttachmentName} href=\"#\" onClick=${handleDownload}>\n ${attachment.name}\n \n \n \n\n ${!!additionalItems &&\n html`\n <${AdditionalItems} onMouseDown=${(e) => e.stopPropagation()}>\n ${additionalItems}\n \n `}\n \n `\n}\n" }, { "path": "src/containers/AttachmentField/styles.js", "content": "import styled from 'styled-components'\n\nexport const Wrapper = styled.div`\n display: flex;\n align-items: flex-start;\n gap: 10px;\n width: 100%;\n position: relative;\n border: 1px solid;\n border-color: ${({ theme }) => theme.colors.grey100.mode1};\n border-bottom: none;\n background: ${({ theme }) => theme.colors.grey400.mode1};\n margin-top: 0;\n padding: 8px 10px;\n\n &:first-child {\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n\n &:last-child {\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n border-bottom: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n }\n\n &:hover,\n &:focus-within {\n border-color: ${({ theme }) => theme.colors.primary400.mode1};\n }\n\n &:hover + &,\n &:focus-within + & {\n border-top-color: ${({ theme }) => theme.colors.primary400.mode1};\n }\n`\n\nexport const InputAreaWrapper = styled.div`\n position: relative;\n margin-top: 5px;\n overflow-x: auto;\n white-space: nowrap;\n display: flex;\n align-items: center;\n`\n\nexport const IconWrapper = styled.div`\n display: flex;\n flex-shrink: 0;\n margin-top: 9px;\n`\n\nexport const MainWrapper = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n`\n\nexport const AttachmentName = styled.a`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n font-weight: 700;\n padding: 1px 0px;\n height: 21.5px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`\n\nexport const Label = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 400;\n`\n\nexport const AdditionalItems = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 10px;\n align-self: center;\n`\n" }, { "path": "src/containers/AuthenticationCard/index.js", "content": "import { useState } from 'react'\n\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { Validator } from '@tetherto/pear-apps-utils-validator'\nimport { useUserData } from '@tetherto/pearpass-lib-vault'\nimport {\n stringToBuffer,\n clearBuffer\n} from '@tetherto/pearpass-lib-vault/src/utils/buffer'\nimport { html } from 'htm/react'\n\nimport { ButtonWrapper, CardContainer, CardTitle, Title } from './styles.js'\nimport { useGlobalLoading } from '../../context/LoadingContext.js'\nimport { useTranslation } from '../../hooks/useTranslation.js'\nimport {\n ButtonPrimary,\n PearPassPasswordField\n} from '../../lib-react-components/index.js'\nimport { logger } from '../../utils/logger.js'\n\n/**\n * Authentication card component that provides master password input form for authentication.\n * Validates the master password and calls the onSuccess callback upon successful authentication.\n *\n * @param {Object} props - Component props\n * @param {string} props.title - The title displayed at the top of the card\n * @param {string} props.buttonLabel - The label text for the submit button\n * @param {React.ReactNode} [props.descriptionComponent] - Optional component to display additional description or content below the password field\n * @param {Function} [props.onSuccess] - Optional callback function invoked after successful authentication, receives the password as an argument\n * @param {Function} [props.onError] - Optional callback function invoked after failed authentication, receives the error and setErrors function\n * @param {Object} [props.style] - Optional CSS styles to apply to the card container\n * @returns {React.ReactElement} The authentication card component\n */\nexport const AuthenticationCard = ({\n title,\n buttonLabel,\n descriptionComponent,\n onSuccess,\n onError,\n style\n}) => {\n const { t } = useTranslation()\n\n const [isLoading, setIsLoading] = useState(false)\n\n useGlobalLoading({ isLoading })\n\n const schema = Validator.object({\n password: Validator.string().required(t('Password is required'))\n })\n\n const { logIn } = useUserData()\n\n const { register, handleSubmit, setErrors } = useForm({\n initialValues: { password: '' },\n validate: (values) => schema.validate(values)\n })\n\n const onSubmit = async (values) => {\n if (isLoading) {\n return\n }\n\n if (!values.password) {\n setErrors({\n password: t('Password is required')\n })\n\n return\n }\n\n const passwordBuffer = stringToBuffer(values.password)\n try {\n setIsLoading(true)\n\n await logIn({ password: passwordBuffer })\n\n await onSuccess?.(passwordBuffer)\n\n setIsLoading(false)\n } catch (error) {\n setIsLoading(false)\n\n if (onError) {\n await onError(error, setErrors)\n } else {\n setErrors({\n password: t('Invalid password')\n })\n }\n\n logger.error(\n 'AuthenticationCard',\n 'Error unlocking with master password:',\n error\n )\n } finally {\n clearBuffer(passwordBuffer)\n }\n }\n\n return html`\n <${CardContainer} onSubmit=${handleSubmit(onSubmit)} style=${style}>\n <${CardTitle}>\n <${Title} data-testid=\"login-title\"> ${title}\n \n\n <${PearPassPasswordField}\n testId=\"login-password-input\"\n placeholder=${t('Master password')}\n ...${register('password')}\n />\n\n ${descriptionComponent}\n\n <${ButtonWrapper}>\n <${ButtonPrimary} testId=\"login-continue-button\" type=\"submit\">\n ${buttonLabel}\n \n \n \n `\n}\n" }, { "path": "src/containers/AuthenticationCard/styles.js", "content": "import styled from 'styled-components'\n\nexport const CardContainer = styled.form`\n display: flex;\n flex-direction: column;\n gap: 25px;\n justify-content: center;\n width: 609px;\n`\n\nexport const CardTitle = styled.div`\n display: flex;\n flex-direction: column;\n gap: 10px;\n justify-content: center;\n`\n\nexport const Title = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n text-align: center;\n font-family: 'Inter';\n font-size: 20px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n`\n\nexport const ButtonWrapper = styled.div`\n align-self: center;\n`\n" }, { "path": "src/containers/BaseInitialPage/index.js", "content": "import { useLingui } from '@lingui/react'\nimport { html } from 'htm/react'\n\nimport {\n GreenText,\n PageContainer,\n PageContentContainer,\n PearHand,\n Title\n} from './styles'\nimport { InitialPageWrapper } from '../../components/InitialPageWrapper'\n\n/**\n * @param {Object} props - Component props.\n * @param {React.ReactNode} props.children - Child components to be rendered inside the page.\n * @returns {JSX.Element} The rendered initial page layout.\n */\nexport const BaseInitialPage = ({ children }) => {\n const { i18n } = useLingui()\n\n return html`\n <${InitialPageWrapper}>\n <${PageContainer}>\n <${PageContentContainer}>\n
\n <${Title}>\n ${i18n._('Protect')}${' '}\n\n <${GreenText}>${i18n._('your digital')}\n ${' '} ${i18n._('life')}\n \n ${children}\n
\n\n <${PearHand} src=\"assets/images/pear_lock_clear.png\" alt=\"pearHand\" />\n \n \n \n `\n}\n" }, { "path": "src/containers/BaseInitialPage/styles.js", "content": "import styled from 'styled-components'\n\nexport const PageContainer = styled.div`\n width: 100%;\n height: 100%;\n`\n\nexport const PearHand = styled.img`\n position: relative;\n width: 50%;\n max-width: 585px;\n aspect-ratio: 1/1;\n`\n\nexport const PageContentContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 180px;\n`\n\nexport const Title = styled.span`\n flex: 1;\n color: ${({ theme }) => theme.colors.white.mode1};\n max-width: 700px;\n font-family: 'Humble Nostalgia';\n font-size: clamp(1rem, 8vw, 10rem);\n font-style: normal;\n font-weight: 400;\n line-height: 1.1;\n`\n\nexport const GreenText = styled.span`\n color: ${({ theme }) => theme.colors.primary400.mode1};\n`\n" }, { "path": "src/containers/CustomFields/index.tsx", "content": "import React from 'react'\n\nimport { FormGroup } from '../../components/FormGroup'\nimport { InputFieldNote } from '../../components/InputFieldNote'\nimport { ButtonRoundIcon, DeleteIcon } from '../../lib-react-components'\nimport { CopyButton } from '../../components/CopyButton'\n\ninterface CustomField {\n id: string\n type: 'note'\n props: Record\n}\n\ninterface CustomFieldsProps {\n register: (name: string, index: number) => {\n name: string;\n value: string;\n error?: string;\n onChange: (e: unknown) => void;\n }\n customFields?: CustomField[]\n onClick?: () => void\n areInputsDisabled: boolean\n removeItem?: (index: number) => void\n}\n\n/**\n * @param {{\n * register: (name: string, index: number) => {\n * name: string;\n * value: string;\n * error?: string;\n * onChange: (e: unknown) => void;\n * }\n * customFields?: {\n * id: string\n * type: 'note'\n * props: Record\n * }[]\n * onClick?: () => void\n * areInputsDisabled: boolean\n * removeItem?: () => void\n * }} props\n */\nexport const CustomFields: React.FC = ({\n customFields,\n register,\n areInputsDisabled,\n removeItem,\n onClick\n}) => {\n return (\n \n {customFields?.map((customField, index) => {\n if (customField.type === 'note') {\n return (\n \n \n {areInputsDisabled && (\n \n )}\n\n {!areInputsDisabled && (\n removeItem?.(index)}\n />\n )}\n \n }\n {...register('note', index)}\n />\n \n )\n }\n return null\n })}\n \n )\n}" }, { "path": "src/containers/EmptyCollectionViewV2/EmptyCollectionViewV2.styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const CONTENT_MAX_WIDTH = 500\nexport const BUTTONS_MAX_WIDTH = 350\nexport const ILLUSTRATION_HEIGHT = 151\n\nexport const createStyles = () => ({\n container: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n alignItems: 'center' as const,\n justifyContent: 'center' as const,\n flex: 1,\n paddingInline: `${rawTokens.spacing12}px`,\n paddingBlock: '60px',\n width: '100%',\n boxSizing: 'border-box' as const\n },\n\n content: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n alignItems: 'center' as const,\n gap: `${rawTokens.spacing24}px`,\n width: '100%',\n maxWidth: `${CONTENT_MAX_WIDTH}px`\n },\n\n illustration: {\n width: '100%',\n height: `${ILLUSTRATION_HEIGHT}px`,\n overflow: 'hidden' as const,\n flexShrink: 0,\n display: 'flex' as const,\n justifyContent: 'center',\n },\n\n textBlock: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n alignItems: 'center' as const,\n gap: `${rawTokens.spacing6}px`,\n width: '100%',\n textAlign: 'center' as const\n },\n\n descriptionParagraph: {\n margin: 0\n },\n\n ctas: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n alignItems: 'center' as const,\n justifyContent: 'center' as const,\n gap: `${rawTokens.spacing12}px`,\n width: '100%'\n },\n\n ctaButton: {\n width: '100%',\n maxWidth: `${BUTTONS_MAX_WIDTH}px`\n }\n})\n" }, { "path": "src/containers/EmptyCollectionViewV2/EmptyCollectionViewV2.tsx", "content": "import React, { useMemo } from 'react'\n\nimport { Button, Text, Title, useTheme } from '@tetherto/pearpass-lib-ui-kit'\nimport { Add, ImportExport } from '@tetherto/pearpass-lib-ui-kit/icons'\n\nimport {\n ILLUSTRATION_HEIGHT,\n createStyles\n} from './EmptyCollectionViewV2.styles'\nimport { useAppHeaderContext } from '../../context/AppHeaderContext'\nimport { useRouter } from '../../context/RouterContext'\nimport { useRecordMenuItemsV2 } from '../../hooks/useRecordMenuItemsV2'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { SettingsItemKey } from '../../pages/SettingsViewV2/SettingsViewV2'\nimport { ItemCardIllustration } from '../../svgs/ItemCardIllustration'\n\ntype EmptyCollectionViewV2Props = {\n recordType?: string\n selectedFolder?: string\n isFavoritesView?: boolean\n}\n\nexport const EmptyCollectionViewV2 = ({\n recordType = 'all',\n selectedFolder,\n isFavoritesView = false\n}: EmptyCollectionViewV2Props) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const { navigate } = useRouter()\n const { setIsAddMenuOpen } = useAppHeaderContext()\n const { categoriesItems } = useRecordMenuItemsV2()\n const styles = createStyles()\n\n const handleAddItem = () => {\n setIsAddMenuOpen(true)\n }\n\n const handleImport = () => {\n navigate('settings', { initialTab: SettingsItemKey.ImportItems })\n }\n\n const categoryLabel = categoriesItems.find(\n (item) => item.type === recordType\n )?.label\n\n const { title, descriptionParagraphs } = useMemo<{\n title: string\n descriptionParagraphs: string[]\n }>(() => {\n if (isFavoritesView) {\n return {\n title: t('No favorite items'),\n descriptionParagraphs: [t('Mark items as favorites')]\n }\n }\n\n if (selectedFolder) {\n return {\n title: t('Empty folder'),\n descriptionParagraphs: [\n t('Start adding items or save existing ones in the {folder} folder', {\n folder: selectedFolder\n })\n ]\n }\n }\n\n if (recordType !== 'all' && categoryLabel) {\n return {\n title: t('No item of type {category}', { category: categoryLabel }),\n descriptionParagraphs: [\n t('Start adding items of type {category} in your vault', {\n category: categoryLabel\n })\n ]\n }\n }\n\n return {\n title: t('No item saved'),\n descriptionParagraphs: [\n t('Start using PearPass by creating your first item'),\n t('or import your items from a different password manager')\n ]\n }\n }, [isFavoritesView, selectedFolder, recordType, categoryLabel, t])\n\n return (\n
\n
\n
\n \n
\n\n
\n \n {title}\n \n {descriptionParagraphs.map((paragraph, index) => (\n ['style']\n }\n >\n {paragraph}\n \n ))}\n
\n\n {!isFavoritesView && (\n
\n
\n }\n onClick={handleAddItem}\n >\n {t('Add Item')}\n \n
\n
\n \n }\n onClick={handleImport}\n >\n {t('Import Items')}\n \n
\n
\n )}\n
\n
\n )\n}\n" }, { "path": "src/containers/EmptyCollectionViewV2/index.ts", "content": "export { EmptyCollectionViewV2 } from './EmptyCollectionViewV2'\n" }, { "path": "src/containers/EmptyResultsViewV2/EmptyResultsViewV2.styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = () => ({\n container: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n alignItems: 'center' as const,\n justifyContent: 'center' as const,\n flex: 1,\n gap: `${rawTokens.spacing16}px`,\n paddingInline: `${rawTokens.spacing16}px`,\n paddingBlock: `${rawTokens.spacing24}px`,\n width: '100%'\n },\n\n text: {\n textAlign: 'center' as const\n }\n})\n" }, { "path": "src/containers/EmptyResultsViewV2/EmptyResultsViewV2.tsx", "content": "import React from 'react'\n\nimport { Text, useTheme } from '@tetherto/pearpass-lib-ui-kit'\n\nimport { createStyles } from './EmptyResultsViewV2.styles'\nimport { useTranslation } from '../../hooks/useTranslation'\n\nexport const EmptyResultsViewV2 = () => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const styles = createStyles()\n\n return (\n
\n \n {t('No result found.')}\n \n
\n )\n}\n" }, { "path": "src/containers/EmptyResultsViewV2/index.ts", "content": "export { EmptyResultsViewV2 } from './EmptyResultsViewV2'\n" }, { "path": "src/containers/ImagesField/index.js", "content": "import { useEffect, useMemo } from 'react'\n\nimport { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport { html } from 'htm/react'\n\nimport {\n AddContainer,\n Body,\n Container,\n DeleteIconWrapper,\n DeleteOverlay,\n Header,\n ImageContainer,\n Photo,\n Title\n} from './styles'\nimport { useModal } from '../../context/ModalContext'\nimport { DeleteIcon, ImageIcon, PlusIcon } from '../../lib-react-components'\nimport { isV2 } from '../../utils/designVersion'\nimport { DisplayPictureModalContent } from '../Modal/DisplayPictureModalContent'\nimport { DisplayPictureModalContentV2 } from '../Modal/DisplayPictureModalContentV2/DisplayPictureModalContentV2'\n\n/**\n * @param {{\n * title: string\n * pictures: { buffer: ArrayBuffer, name: string }[]\n * onAdd?: () => void\n * onRemove?: (index: number) => void\n * testId?: string\n * }} props\n */\nexport const ImagesField = ({\n title,\n pictures = [],\n onAdd,\n onRemove,\n testId\n}) => {\n const { setModal } = useModal()\n\n const pictureUrls = useMemo(\n () =>\n pictures.map((picture) => ({\n url: URL.createObjectURL(new Blob([picture.buffer])),\n name: picture.name\n })),\n [pictures]\n )\n\n useEffect(\n () => () => {\n pictureUrls.forEach((p) => URL.revokeObjectURL(p.url))\n },\n [pictureUrls]\n )\n\n const handlePictureClick = (url, name) => {\n const ModalContentComponent = isV2()\n ? DisplayPictureModalContentV2\n : DisplayPictureModalContent\n\n setModal()\n }\n\n const handleRemove = (e, index) => {\n e.stopPropagation()\n onRemove?.(index)\n }\n\n return html`\n <${Container} data-testid=${testId}>\n <${Header}>\n <${ImageIcon} />\n <${Title}>${title}\n \n <${Body}>\n ${pictureUrls?.map(\n (picture, idx) => html`\n <${ImageContainer}\n onClick=${() => handlePictureClick(picture.url, picture.name)}\n key=${idx}\n >\n <${Photo} src=${picture.url} alt=\"attachment\" />\n\n ${onRemove &&\n html`<${DeleteOverlay}>\n <${DeleteIconWrapper} onClick=${(e) => handleRemove(e, idx)}>\n <${DeleteIcon} size=\"24\" color=${colors.black.mode1} />\n \n `}\n \n `\n )}\n ${!!onAdd &&\n html` <${AddContainer}\n data-testid=${testId ? `${testId}-add` : undefined}\n onClick=${onAdd}\n >\n <${PlusIcon} color=${colors.primary400.mode1} />\n `}\n \n \n `\n}\n" }, { "path": "src/containers/ImagesField/styles.js", "content": "import styled from 'styled-components'\n\nexport const Container = styled.div`\n margin-top: 10px;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px;\n\n border-radius: 10px;\n border: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n background: ${({ theme }) => theme.colors.grey400.mode1};\n`\n\nexport const Header = styled.div`\n display: flex;\n gap: 10px;\n`\n\nexport const Title = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\n\nexport const Body = styled.div`\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n min-height: 50px;\n`\n\nexport const ImageContainer = styled.div`\n display: flex;\n align-items: center;\n width: 90px;\n height: 50px;\n border-radius: 10px;\n overflow: hidden;\n position: relative;\n border: 1px solid ${({ theme }) => theme.colors.primary400.mode1};\n`\n\nexport const DeleteOverlay = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.3s ease;\n &:hover {\n opacity: 1;\n }\n`\n\nexport const DeleteIconWrapper = styled.div`\n width: 20px;\n height: 20px;\n position: absolute;\n top: 0px;\n right: 0px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background-color: ${({ theme }) => theme.colors.primary400.mode1};\n cursor: pointer;\n`\n\nexport const Photo = styled.img`\n width: 100%;\n height: 100%;\n object-fit: cover;\n`\n\nexport const AddContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 90px;\n height: 50px;\n border-radius: 10px;\n border: 2px solid ${({ theme }) => theme.colors.primary400.mode1};\n cursor: pointer;\n`\n" }, { "path": "src/containers/LayoutWithSidebar/index.js", "content": "import { useTheme } from '@tetherto/pearpass-lib-ui-kit'\nimport { html } from 'htm/react'\n\nimport {\n ContentWrapper,\n ContentWrapperV2,\n LayoutWrapper,\n SideBarWrapper,\n SideViewWrapper\n} from './styles'\nimport { isV2 } from '../../utils/designVersion'\nimport { Sidebar } from '../Sidebar'\nimport { SidebarV2 } from '../Sidebar/SidebarV2'\n\n/**\n * @typedef LayoutWithSidebarProps\n * @property {import('react').ReactNode} mainView\n * @property {import('react').ReactNode} sideView\n * @property {boolean} isSideViewOpen\n */\n\n/**\n * @param {LayoutWithSidebarProps} props\n */\n\nexport const LayoutWithSidebar = ({ mainView, sideView, isSideViewOpen }) => {\n const { theme } = useTheme()\n const isV2Design = isV2()\n const VersionBasedContentWrapper = isV2Design\n ? ContentWrapperV2\n : ContentWrapper\n\n const v2SideViewStyle = {\n flexBasis: 0,\n flexShrink: isSideViewOpen ? 0 : 1,\n flexGrow: isSideViewOpen ? 1 : 0,\n minWidth: isSideViewOpen ? '250px' : 0,\n overflowX: 'hidden',\n overflowY: isSideViewOpen ? 'auto' : 'hidden',\n backgroundColor: theme.colors.colorSurfacePrimary,\n borderLeftWidth: isSideViewOpen ? 1 : 0,\n borderLeftStyle: 'solid',\n borderLeftColor: theme.colors.colorBorderPrimary,\n transition:\n 'flex-grow 150ms ease, border-left-width 150ms ease, min-width 150ms ease'\n }\n\n const v2MainViewStyle =\n isV2Design && isSideViewOpen\n ? {\n flex: '0 1 350px',\n minWidth: '300px',\n transition: 'flex 150ms ease'\n }\n : {}\n\n return html`\n <${LayoutWrapper}>\n <${SideBarWrapper}>\n ${isV2Design ? html`<${SidebarV2} />` : html`<${Sidebar} />`}\n \n\n <${VersionBasedContentWrapper} style=${v2MainViewStyle}> ${mainView} \n\n ${isV2Design\n ? sideView && html`
${sideView}
`\n : isSideViewOpen && sideView\n ? html`<${SideViewWrapper}>${sideView}`\n : null}\n \n `\n}\n" }, { "path": "src/containers/LayoutWithSidebar/styles.js", "content": "import styled from 'styled-components'\n\nexport const LayoutWrapper = styled.div`\n display: flex;\n width: 100%;\n height: 100%;\n`\n\nexport const SideBarWrapper = styled.div`\n flex-shrink: 0;\n`\n\nexport const ContentWrapper = styled.div`\n position: relative;\n flex: 1;\n padding: 29px 15px 0;\n display: flex;\n align-items: center;\n align-self: stretch;\n background: ${({ theme }) => theme.colors.grey400.mode1};\n`\n\nexport const ContentWrapperV2 = styled.div`\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n align-self: stretch;\n`\n\nexport const SideViewWrapper = styled.div`\n flex: 1;\n overflow-y: auto;\n background: ${({ theme }) => theme.colors.grey500.mode1};\n border-left: 1px solid ${({ theme }) => theme.colors.grey300.mode1};\n padding: 24px 27px 0 27px;\n`\n" }, { "path": "src/containers/MainViewHeader/MainViewHeader.styles.ts", "content": "import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\nimport { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nimport { HEADER_MIN_HEIGHT } from '../../constants/layout'\n\nexport const SORT_MENU_WIDTH = 260\n\nexport const createStyles = (colors: ThemeColors) => ({\n container: {\n display: 'flex' as const,\n alignItems: 'center' as const,\n height: `${HEADER_MIN_HEIGHT}px`,\n paddingInline: `${rawTokens.spacing12}px`,\n borderBottom: `1px solid ${colors.colorBorderPrimary}`,\n backgroundColor: colors.colorSurfacePrimary,\n boxSizing: 'border-box' as const,\n flexShrink: 0\n },\n\n breadcrumbWrapper: {\n flex: 1,\n minWidth: 0,\n display: 'flex' as const,\n alignItems: 'center' as const\n },\n\n actions: {\n display: 'flex' as const,\n alignItems: 'center' as const,\n gap: `${rawTokens.spacing4}px`\n }\n})\n" }, { "path": "src/containers/MainViewHeader/MainViewHeader.test.tsx", "content": "import React from 'react'\n\nimport '@testing-library/jest-dom'\nimport { fireEvent, render, screen } from '@testing-library/react'\n\nimport { SORT_KEYS } from '../../constants/sortOptions'\n\nlet mockRouterData: Record = {}\n\njest.mock('../../context/RouterContext', () => ({\n useRouter: () => ({ data: mockRouterData })\n}))\n\njest.mock('../../hooks/useTranslation', () => ({\n useTranslation: () => ({ t: (key: string) => key })\n}))\n\njest.mock('../../hooks/useRecordMenuItemsV2', () => ({\n ALL_ITEMS_TYPE: 'all',\n useRecordMenuItemsV2: () => ({\n categoriesItems: [\n { type: 'all', label: 'All Items' },\n { type: 'login', label: 'Logins' }\n ]\n })\n}))\n\njest.mock('@tetherto/pearpass-lib-ui-kit', () => {\n const React = require('react')\n return {\n useTheme: () => ({\n theme: {\n colors: {\n colorTextPrimary: '#fff',\n colorBorderPrimary: '#222',\n colorSurfacePrimary: '#000'\n }\n }\n }),\n rawTokens: new Proxy({}, { get: () => 0 }),\n Breadcrumb: ({\n items,\n actions\n }: {\n items: string[]\n actions?: React.ReactNode\n }) =>\n React.createElement(\n 'nav',\n { 'data-testid': 'breadcrumb' },\n [\n React.createElement(\n 'span',\n { key: 'items', 'data-testid': 'breadcrumb-items' },\n items.join(' > ')\n ),\n actions\n ]\n ),\n Button: ({\n children,\n onClick,\n disabled,\n ...rest\n }: {\n children?: React.ReactNode\n onClick?: () => void\n disabled?: boolean\n [key: string]: unknown\n }) =>\n React.createElement(\n 'button',\n { type: 'button', onClick, disabled, ...rest },\n children\n ),\n ContextMenu: ({\n trigger,\n children,\n open\n }: {\n trigger: React.ReactNode\n children: React.ReactNode\n open?: boolean\n }) =>\n React.createElement('div', { 'data-testid': 'context-menu' }, [\n React.createElement('div', { key: 'trigger' }, trigger),\n open\n ? React.createElement('div', { key: 'menu', role: 'menu' }, children)\n : null\n ]),\n NavbarListItem: ({\n label,\n onClick,\n testID\n }: {\n label?: string\n onClick?: () => void\n testID?: string\n }) =>\n React.createElement(\n 'button',\n { type: 'button', 'data-testid': testID, onClick },\n label\n )\n }\n})\n\njest.mock('@tetherto/pearpass-lib-ui-kit/icons', () => {\n const React = require('react')\n const Icon = (name: string) => () =>\n React.createElement('span', { 'data-icon': name })\n return {\n CalendarToday: Icon('CalendarToday'),\n Check: Icon('Check'),\n Checklist: Icon('Checklist'),\n FilterList: Icon('FilterList'),\n SortByAlpha: Icon('SortByAlpha')\n }\n})\n\nimport { MainViewHeader } from './MainViewHeader'\n\ndescribe('MainViewHeader', () => {\n const baseProps = {\n sortKey: SORT_KEYS.LAST_UPDATED_NEWEST,\n setSortKey: jest.fn(),\n isMultiSelectOn: false,\n setIsMultiSelectOn: jest.fn()\n }\n\n beforeEach(() => {\n mockRouterData = {}\n jest.clearAllMocks()\n })\n\n it('renders the breadcrumb, select and sort controls', () => {\n render()\n expect(screen.getByTestId('breadcrumb-items').textContent).toBe(\n 'All Items > All Folders'\n )\n expect(screen.getByTestId('main-view-header-select')).toBeInTheDocument()\n expect(screen.getByTestId('main-view-header-sort')).toBeInTheDocument()\n })\n\n it('toggles multi-select via the select button', () => {\n const setIsMultiSelectOn = jest.fn()\n render(\n \n )\n fireEvent.click(screen.getByTestId('main-view-header-select'))\n expect(setIsMultiSelectOn).toHaveBeenCalledWith(true)\n })\n\n it('deactivates multi-select when already active and the select button is clicked', () => {\n const setIsMultiSelectOn = jest.fn()\n render(\n \n )\n fireEvent.click(screen.getByTestId('main-view-header-select'))\n expect(setIsMultiSelectOn).toHaveBeenCalledWith(false)\n })\n\n it('reflects router data in the breadcrumb', () => {\n mockRouterData = { recordType: 'login', folder: 'Work' }\n render()\n expect(screen.getByTestId('breadcrumb-items').textContent).toBe(\n 'Logins > Work'\n )\n })\n})\n" }, { "path": "src/containers/MainViewHeader/MainViewHeader.tsx", "content": "import React, { useMemo, useState } from 'react'\n\nimport {\n Breadcrumb,\n Button,\n ContextMenu,\n NavbarListItem,\n useTheme\n} from '@tetherto/pearpass-lib-ui-kit'\nimport {\n CalendarToday,\n Check,\n Checklist,\n FilterList,\n SortByAlpha\n} from '@tetherto/pearpass-lib-ui-kit/icons'\n\nimport { createStyles, SORT_MENU_WIDTH } from './MainViewHeader.styles'\nimport { SORT_KEYS, type SortKey } from '../../constants/sortOptions'\nimport { useRouter } from '../../context/RouterContext'\nimport {\n ALL_ITEMS_TYPE,\n useRecordMenuItemsV2\n} from '../../hooks/useRecordMenuItemsV2'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { isFavorite } from '../../utils/isFavorite'\n\ntype MainViewHeaderProps = {\n sortKey: SortKey\n setSortKey: (key: SortKey) => void\n isMultiSelectOn: boolean\n setIsMultiSelectOn: (value: boolean) => void\n}\n\nexport const MainViewHeader = ({\n sortKey,\n setSortKey,\n isMultiSelectOn,\n setIsMultiSelectOn\n}: MainViewHeaderProps) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const { data: routerData } = useRouter()\n const { categoriesItems } = useRecordMenuItemsV2()\n const styles = createStyles(theme.colors)\n const [isSortOpen, setIsSortOpen] = useState(false)\n\n const recordType = routerData?.recordType ?? ALL_ITEMS_TYPE\n const categoryLabel =\n categoriesItems.find((item) => item.type === recordType)?.label ??\n t('All Items')\n\n const folder = routerData?.folder\n const folderLabel = isFavorite(folder ?? '')\n ? t('Favorites')\n : folder\n ? folder\n : t('All Folders')\n\n const sortOptions = useMemo<\n Array<{ key: SortKey; label: string; Icon: React.ComponentType<{ color?: string }> }>\n >(\n () => [\n { key: SORT_KEYS.TITLE_AZ, label: t('Title (A-Z)'), Icon: SortByAlpha },\n {\n key: SORT_KEYS.LAST_UPDATED_NEWEST,\n label: t('Last Updated (Newest first)'),\n Icon: CalendarToday\n },\n {\n key: SORT_KEYS.LAST_UPDATED_OLDEST,\n label: t('Last Updated (Oldest first)'),\n Icon: CalendarToday\n },\n {\n key: SORT_KEYS.DATE_ADDED_NEWEST,\n label: t('Date Added (Newest first)'),\n Icon: CalendarToday\n },\n {\n key: SORT_KEYS.DATE_ADDED_OLDEST,\n label: t('Date Added (Oldest first)'),\n Icon: CalendarToday\n }\n ],\n [t]\n )\n\n const handleSelectSort = (key: SortKey) => {\n setSortKey(key)\n setIsSortOpen(false)\n }\n\n const iconStyle = { color: theme.colors.colorTextPrimary }\n\n return (\n
\n
\n \n setIsMultiSelectOn(!isMultiSelectOn)}\n data-testid=\"main-view-header-select\"\n aria-label={\n isMultiSelectOn\n ? t('Exit multi-select')\n : t('Toggle multi-select')\n }\n aria-pressed={isMultiSelectOn}\n iconBefore={}\n />\n\n }\n />\n }\n >\n {sortOptions.map(({ key, label, Icon }) => (\n }\n additionalItems={\n sortKey === key ? (\n \n ) : undefined\n }\n onClick={() => handleSelectSort(key)}\n />\n ))}\n \n
\n }\n />\n
\n
\n )\n}\n" }, { "path": "src/containers/Modal/AddDeviceModalContent/ScanQRExpireTimer.tsx", "content": "import { useCountDown } from '@tetherto/pear-apps-lib-ui-react-hooks'\n\nimport { ExpireTime } from './styles'\n\ninterface Props {\n initialSeconds?: number\n onFinish?: () => void\n withSuffix?: boolean\n}\n\nexport const ScanQRExpireTimer = ({\n initialSeconds = 120,\n onFinish,\n withSuffix = false\n}: Props) => {\n const expireTime = useCountDown({\n initialSeconds,\n onFinish\n })\n\n return (\n \n {' '}\n {expireTime}\n {withSuffix ? 's' : ''}{' '}\n \n )\n}\n" }, { "path": "src/containers/Modal/AddDeviceModalContent/index.ts", "content": "import os from 'os'\n\nimport { useEffect, useState } from 'react'\nimport type { ClipboardEvent } from 'react'\n\nimport { html } from 'htm/react'\nimport { generateQRCodeSVG } from '@tetherto/pear-apps-utils-qr'\nimport { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport {\n authoriseCurrentProtectedVault,\n useInvite,\n useVault,\n usePair\n} from '@tetherto/pearpass-lib-vault'\nimport { InputFieldWrapper } from './styles'\nimport { PasteIconWrapper } from './styles'\nimport {\n BackgroundSection,\n Content,\n CopyText,\n ExpireText,\n HeaderTitle,\n PairTabs,\n PairTab,\n QRCode,\n QRCodeCopy,\n QRCodeCopyWrapper,\n QRCodeSection,\n QRCodeText,\n LoadVaultNotice,\n PairingDescription\n} from './styles'\nimport { AlertBox } from '../../../components/AlertBox'\nimport { FormModalHeaderWrapper } from '../../../components/FormModalHeaderWrapper'\nimport { useModal } from '../../../context/ModalContext'\nimport { useRouter } from '../../../context/RouterContext'\nimport { useToast } from '../../../context/ToastContext'\nimport { useCopyToClipboard } from '../../../hooks/useCopyToClipboard.electron'\nimport { useAutoLockPreferences } from '../../../hooks/useAutoLockPreferences'\nimport { useGlobalLoading } from '../../../context/LoadingContext'\nimport { useTranslation } from '../../../hooks/useTranslation'\nimport {\n CopyIcon,\n TimeIcon,\n UserSecurityIcon\n} from '../../../lib-react-components'\nimport { InputField } from '../../../lib-react-components/components/InputField'\nimport { PasteIcon } from '../../../lib-react-components/icons/PasteIcon'\nimport { ModalContent } from '../ModalContent'\nimport { VaultPasswordFormModalContent } from '../VaultPasswordFormModalContent'\nimport { ScanQRExpireTimer } from './ScanQRExpireTimer'\n\nexport const AddDeviceModalContent = () => {\n const { t } = useTranslation()\n const { setToast } = useToast()\n const { closeModal } = useModal()\n const [qrSvg, setQrSvg] = useState('')\n const [isProtected, setIsProtected] = useState(true)\n const [scanQRStep, setScanQRStep] = useState(true)\n const {\n data: vaultData,\n isVaultProtected,\n refetch: refetchVault,\n addDevice\n } = useVault()\n const { createInvite, deleteInvite, data } = useInvite()\n const [inviteCode, setInviteCodeId] = useState('')\n const {\n pairActiveVault,\n isLoading: isPairing,\n cancelPairActiveVault\n } = usePair()\n const { navigate } = useRouter()\n const { setShouldBypassAutoLock } = useAutoLockPreferences()\n\n const { copyToClipboard, isCopied } = useCopyToClipboard()\n\n useEffect(() => {\n setShouldBypassAutoLock(true)\n return () => setShouldBypassAutoLock(false)\n }, [setShouldBypassAutoLock])\n\n useGlobalLoading({ isLoading: isPairing })\n\n useEffect(() => {\n createInvite()\n\n return () => {\n deleteInvite()\n }\n }, [])\n\n useEffect(() => {\n if (data?.publicKey) {\n generateQRCodeSVG(data?.publicKey, { type: 'svg', margin: 0 }).then(\n (value: string) => setQrSvg(value)\n )\n }\n }, [data])\n\n useEffect(() => {\n const checkProtection = async () => {\n const result = await isVaultProtected(vaultData?.id)\n setIsProtected(result)\n }\n checkProtection()\n }, [vaultData?.id])\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && isPairing) {\n cancelPairActiveVault()\n }\n }\n\n window.addEventListener('keydown', handleKeyDown)\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown)\n }\n }, [cancelPairActiveVault, isPairing])\n\n if (isProtected) {\n return html`<${VaultPasswordFormModalContent}\n onSubmit=${async (password: string) => {\n if (await authoriseCurrentProtectedVault(password)) {\n setIsProtected(false)\n }\n }}\n vault=${vaultData}\n />`\n }\n\n const handleLoadVault = async (code: string) => {\n try {\n const vaultId = await pairActiveVault(code)\n\n if (!vaultId) {\n throw new Error('Vault ID is empty')\n }\n\n await refetchVault(vaultId)\n\n await addDevice(os.hostname() + ' ' + os.platform() + ' ' + os.release())\n\n navigate('vault', {\n recordType: 'all'\n })\n closeModal()\n } catch {\n setInviteCodeId('')\n setToast({ message: t('Something went wrong, please check invite code') })\n }\n }\n\n const handleChange = (value: string) => {\n if (isPairing) {\n return\n }\n\n setInviteCodeId(value)\n }\n\n const processPastedText = (pastedText: string) => {\n if (pastedText) {\n setInviteCodeId(pastedText)\n setTimeout(() => {\n if (!isPairing) {\n handleLoadVault(pastedText)\n }\n }, 0)\n }\n }\n\n const handlePaste = (e: ClipboardEvent) => {\n const pastedText = e.clipboardData?.getData('text')\n processPastedText(pastedText)\n }\n\n const handlePasteClick = async () => {\n try {\n const pastedText = await navigator.clipboard.readText()\n processPastedText(pastedText)\n } catch {\n setToast({\n message: t('Failed to paste from clipboard'),\n })\n }\n }\n\n return html`\n <${ModalContent}\n onClose=${closeModal}\n headerChildren=${html`\n <${FormModalHeaderWrapper}>\n <${HeaderTitle}>\n <${UserSecurityIcon} />\n\n ${t('Add a device')}\n \n \n `}\n >\n <${Content}>\n <${PairingDescription}>\n ${t(\n scanQRStep\n ? 'Scan this QR code or paste the vault key into the PearPass app on your other device to connect it to your account. This method keeps your account secure.'\n : 'Paste the vault key from the PearPass app on your other device to connect it to your account. This method keeps your account secure.'\n )}\n \n <${PairTabs}>\n <${PairTab}\n type=\"button\"\n $active=${scanQRStep}\n onClick=${() => setScanQRStep(true)}\n >\n ${t('Share this vault')}\n \n <${PairTab}\n type=\"button\"\n $active=${!scanQRStep}\n onClick=${() => setScanQRStep(false)}\n >\n ${t('Import vault')}\n \n \n ${scanQRStep\n ? html`\n <${QRCodeSection}>\n <${QRCodeText}> ${t('Scan this QR code while in the PearPass App')} \n\n <${QRCode}\n style=${{ width: '200px', height: '200px' }}\n dangerouslySetInnerHTML=${{ __html: qrSvg }}\n />\n \n\n <${BackgroundSection}>\n <${ExpireText}>\n ${t('Expires in')}\n <${ScanQRExpireTimer} onFinish=${closeModal} />\n \n\n <${TimeIcon} color=${colors.primary400.mode1} />\n \n\n <${BackgroundSection}\n onClick=${() => {\n if (data?.publicKey) {\n copyToClipboard(data.publicKey)\n } else {\n setToast({\n message: t('Invite code not found')\n })\n }\n }}\n >\n <${QRCodeCopyWrapper}>\n <${QRCodeCopy}>\n <${QRCodeText}>\n ${t('Copy vault key')}\n \n <${CopyIcon} color=${colors.primary400.mode1} />\n \n <${CopyText}>\n ${isCopied ? t('Copied!') : data?.publicKey || ''}\n \n \n \n\n <${AlertBox}\n message=${t(\n 'Keep this code private. Anyone with it can connect a device to your vault.'\n )}\n />\n `\n : html`\n <${InputFieldWrapper}>\n <${InputField}\n testId=\"add-device-input-code\"\n label=${t('Vault key')}\n placeholder=${t('Insert vault key...')}\n variant=\"outline\"\n onChange=${handleChange}\n value=${inviteCode}\n onPaste=${handlePaste}\n additionalItems=${html`<${PasteIconWrapper}\n onClick=${handlePasteClick}\n >\n <${PasteIcon} color=${colors.primary400.mode1} size=\"16\" />\n ${t('Paste')}\n `}\n />\n \n ${isPairing &&\n html`\n <${LoadVaultNotice}> ${t('Click Escape to cancel pairing')} \n `}\n `}\n \n \n `\n}\n" }, { "path": "src/containers/Modal/AddDeviceModalContent/styles.ts", "content": "import styled, { css } from 'styled-components'\n\nexport const HeaderTitle = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n font-weight: 500;\n`\nexport const PairingDescription = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 14px;\n text-align: center;\n margin-bottom: 10px;\n`\n\nexport const PairTabs = styled.div`\n display: flex;\n align-items: stretch;\n justify-content: center;\n gap: 4px;\n width: 100%;\n border: 2px solid ${({ theme }) => theme.colors.grey100.mode1};\n border-radius: 10px;\n color: ${({ theme }) => theme.colors.primary400.mode1};\n`\n\nexport const PairTab = styled.button<{ $active?: boolean }>`\n flex: 1;\n padding: 8px 14px;\n border: none;\n outline: none;\n cursor: pointer;\n font-family: 'Inter';\n font-size: 14px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n background-color 0.15s ease-in-out,\n color 0.15s ease-in-out,\n border-color 0.15s ease-in-out;\n background-color: transparent;\n border-radius: 7px;\n color: ${({ theme }) => theme.colors.primary400.mode1};\n ${({ $active }) =>\n $active &&\n css`\n background-color: ${({ theme }) => theme.colors.primary400.mode1};\n color: ${({ theme }) => theme.colors.black.dark};\n `}\n`\n\nexport const Content = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px;\n`\n\nexport const QRCodeSection = styled.div`\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n`\n\nexport const QRCodeText = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 14px;\n font-weight: 500;\n`\n\nexport const QRCodeCopy = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n`\nexport const QRCodeCopyWrapper = styled.div`\n max-width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n`\n\nexport const QRCode = styled.div`\n width: 226px;\n height: 226px;\n padding: 15px;\n border-radius: 10px;\n background-color: ${({ theme }) => theme.colors.white.mode1};\n`\n\nexport const BackgroundSection = styled.div`\n max-width: 100%;\n display: flex;\n padding: 7px 10px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 10px;\n background-color: ${({ theme }) => theme.colors.grey400.mode1};\n cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};\n`\n\nexport const ExpireText = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 14px;\n font-weight: 500;\n`\n\nexport const ExpireTime = styled.span`\n color: ${({ theme }) => theme.colors.primary400.mode1};\n`\n\nexport const CopyText = styled.div`\n color: ${({ theme }) => theme.colors.grey200.mode1};\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n font-family: 'Inter';\n font-size: 16px;\n font-weight: 500;\n flex: 1;\n min-width: 0;\n width: 100%;\n`\n\nexport const WarningSection = styled.div`\n display: flex;\n padding: 10px;\n align-items: flex-start;\n gap: 8px;\n border-radius: 10px;\n border: 1px solid ${({ theme }) => theme.colors.errorYellow.mode1};\n background: linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0.8) 0%,\n rgba(0, 0, 0, 0.8) 100%\n ),\n ${({ theme }) => theme.colors.errorYellow.mode1};\n`\n\nexport const WarningText = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 14px;\n font-weight: 500;\n`\n\nexport const IconWrapper = styled.div`\n flex-shrink: 0;\n`\n\nexport const PasteIconWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n background-color: ${({ theme }) => theme.colors.black.dark};\n color: ${({ theme }) => theme.colors.primary400.mode1};\n padding: 9px 15px;\n cursor: pointer;\n gap: 7px;\n font-family: 'Inter';\n font-size: 12px;\n`\n\nexport const InputFieldWrapper = styled.div`\n width: 100%;\n\n > div {\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n`\n\nexport const LoadVaultNotice = styled.div`\n white-space: nowrap;\n width: 100%;\n color: ${({ theme }) => theme.colors.white.mode1};\n text-align: left;\n font-family: 'Inter';\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\n" }, { "path": "src/containers/Modal/AddDeviceModalContentV2/AddDeviceModalContentV2.styles.ts", "content": "import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\nimport { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = (colors: ThemeColors) => ({\n divider: {\n width: '100%',\n height: 1,\n backgroundColor: colors.colorBorderPrimary,\n flexShrink: 0,\n border: 'none',\n padding: 0,\n margin: 0\n },\n body: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: rawTokens.spacing12,\n boxSizing: 'border-box' as const\n },\n accessPanel: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n alignItems: 'stretch' as const,\n borderWidth: 1,\n borderStyle: 'solid' as const,\n borderColor: colors.colorBorderPrimary,\n borderRadius: rawTokens.radius8,\n backgroundColor: colors.colorSurfacePrimary,\n boxSizing: 'border-box' as const\n },\n qrWrap: {\n display: 'flex' as const,\n justifyContent: 'center' as const,\n alignItems: 'center' as const,\n marginTop: rawTokens.spacing24,\n marginBottom: rawTokens.spacing16,\n },\n qrInner: {\n width: 160,\n height: 160,\n padding: rawTokens.spacing10,\n borderRadius: rawTokens.radius8,\n backgroundColor: '#FFFFFF',\n boxSizing: 'border-box' as const,\n display: 'flex' as const,\n alignItems: 'center' as const,\n justifyContent: 'center' as const,\n },\n timerRow: {\n display: 'flex' as const,\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n justifyContent: 'center' as const,\n gap: rawTokens.spacing8,\n flexWrap: 'wrap' as const,\n marginBottom: rawTokens.spacing24,\n },\n timerTextRow: {\n display: 'flex' as const,\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n flexWrap: 'wrap' as const,\n gap: rawTokens.spacing4\n },\n vaultLinkSection: {\n display: 'flex' as const,\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n gap: rawTokens.spacing4,\n width: '100%',\n minWidth: 0,\n padding: rawTokens.spacing12,\n boxSizing: 'border-box' as const\n },\n vaultLinkTextColumn: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n alignItems: 'stretch' as const,\n gap: rawTokens.spacing8,\n flex: '1 1 auto' as const,\n minWidth: 0\n },\n vaultLinkValue: {\n display: 'block' as const,\n minWidth: 0,\n maxWidth: '100%',\n overflow: 'hidden' as const,\n textOverflow: 'ellipsis' as const,\n whiteSpace: 'nowrap' as const\n }\n})\n" }, { "path": "src/containers/Modal/AddDeviceModalContentV2/AddDeviceModalContentV2.tsx", "content": "import React, { useEffect, useState } from 'react'\n\nimport { generateQRCodeSVG } from '@tetherto/pear-apps-utils-qr'\nimport {\n AlertMessage,\n Button,\n Dialog,\n RingSpinner,\n Text,\n useTheme\n} from '@tetherto/pearpass-lib-ui-kit'\nimport { ContentCopy } from '@tetherto/pearpass-lib-ui-kit/icons'\nimport { useInvite, useVault } from '@tetherto/pearpass-lib-vault'\n\nimport { createStyles } from './AddDeviceModalContentV2.styles'\nimport { useModal } from '../../../context/ModalContext'\nimport { useToast } from '../../../context/ToastContext'\nimport { useAutoLockPreferences } from '../../../hooks/useAutoLockPreferences'\nimport { useCopyToClipboard } from '../../../hooks/useCopyToClipboard.electron'\nimport { useTranslation } from '../../../hooks/useTranslation'\nimport { ScanQRExpireTimer } from '../AddDeviceModalContent/ScanQRExpireTimer'\n\nexport const AddDeviceModalContentV2 = () => {\n const { t } = useTranslation()\n const { setToast } = useToast()\n const { closeModal } = useModal()\n const { theme } = useTheme()\n const { colors } = theme\n const [qrSvg, setQrSvg] = useState('')\n const { createInvite, deleteInvite, data } = useInvite()\n const { data: vault } = useVault()\n const { setShouldBypassAutoLock } = useAutoLockPreferences()\n const { copyToClipboard, isCopied } = useCopyToClipboard()\n\n useEffect(() => {\n setShouldBypassAutoLock(true)\n return () => setShouldBypassAutoLock(false)\n }, [setShouldBypassAutoLock])\n\n useEffect(() => {\n if (!data?.publicKey) {\n createInvite()\n }\n\n return () => {\n deleteInvite()\n }\n // `data?.publicKey` intentionally excluded: this is a mount/unmount\n // lifecycle - create once on open, delete once on close.\n }, [createInvite, deleteInvite])\n\n useEffect(() => {\n if (data?.publicKey) {\n generateQRCodeSVG(data.publicKey, { type: 'svg', margin: 0 }).then(\n (value: string) => setQrSvg(value)\n )\n }\n }, [data])\n\n const styles = createStyles(colors)\n\n const handleCopyKey = () => {\n if (data?.publicKey) {\n copyToClipboard(data.publicKey)\n } else {\n setToast({\n message: t('Invite code not found')\n })\n }\n }\n\n const displayLink = isCopied ? t('Copied!') : (data?.publicKey ?? '')\n\n return (\n \n
\n \n {t('Access Code')}\n \n
\n
\n \n
\n
\n \n
\n \n {t('Code expires in')}\n \n \n
\n
\n
\n
\n
\n \n {t('Vault Link')}\n \n
\n \n {displayLink}\n \n
\n
\n \n \n \n
\n
\n \n
\n \n )\n}\n" }, { "path": "src/containers/Modal/AuthenticationModalContentV2/index.tsx", "content": "import React, { useState } from 'react'\n\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { Validator } from '@tetherto/pear-apps-utils-validator'\nimport {\n Button,\n Dialog,\n Form,\n PasswordField,\n Text\n} from '@tetherto/pearpass-lib-ui-kit'\nimport { KeyboardArrowRightRound } from '@tetherto/pearpass-lib-ui-kit/icons'\nimport { useUserData } from '@tetherto/pearpass-lib-vault'\nimport {\n clearBuffer,\n stringToBuffer\n} from '@tetherto/pearpass-lib-vault/src/utils/buffer'\n\nimport { useGlobalLoading } from '../../../context/LoadingContext'\nimport { useModal } from '../../../context/ModalContext'\nimport { useTranslation } from '../../../hooks/useTranslation'\nimport { createStyles } from './styles'\n\nexport type AuthenticationModalContentV2Props = {\n open?: boolean\n onClose?: () => void\n onSuccess?: (password: Uint8Array) => Promise\n onError?: (\n error: unknown,\n setErrors: (errors: Record) => void\n ) => Promise\n}\n\nexport const AuthenticationModalContentV2 = ({\n open,\n onClose,\n onSuccess,\n onError\n}: AuthenticationModalContentV2Props) => {\n const styles = createStyles()\n const { t } = useTranslation()\n const { closeModal } = useModal()\n\n const handleClose = onClose ?? closeModal\n\n const [isLoading, setIsLoading] = useState(false)\n\n useGlobalLoading({ isLoading })\n\n const schema = Validator.object({\n password: Validator.string().required(t('Password is required'))\n })\n\n const { logIn } = useUserData()\n\n const { register, handleSubmit, setErrors } = useForm({\n initialValues: { password: '' },\n validate: (values: { password: string }) => schema.validate(values)\n })\n\n const onSubmit = async (values: { password: string }) => {\n if (isLoading) {\n return\n }\n\n if (!values.password) {\n setErrors({ password: t('Password is required') })\n return\n }\n\n const passwordBuffer = stringToBuffer(values.password)\n\n try {\n setIsLoading(true)\n await logIn({ password: passwordBuffer })\n await onSuccess?.(passwordBuffer)\n setIsLoading(false)\n } catch (error) {\n setIsLoading(false)\n\n if (onError) {\n await onError(error, setErrors)\n } else {\n setErrors({ password: t('Invalid password') })\n }\n } finally {\n clearBuffer(passwordBuffer)\n }\n }\n\n const { onChange: onChangePassword, ...passwordFieldProps } =\n register('password')\n\n return (\n }\n onClick={() => handleSubmit(onSubmit)()}\n data-testid=\"authentication-continue-v2\"\n >\n {t('Continue')}\n \n }\n >\n ['style']}\n testID=\"authentication-form-v2\"\n >\n \n {t('Use your Master Password to authorize this action.')}\n \n\n onChangePassword(e.target.value)}\n error={passwordFieldProps.error || undefined}\n testID=\"authentication-password-v2\"\n />\n \n \n )\n}\n" }, { "path": "src/containers/Modal/AuthenticationModalContentV2/styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = () => ({\n container: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing16}px`,\n width: '100%'\n }\n})\n" }, { "path": "src/containers/Modal/BlindPeersModalContent/index.js", "content": "import React, { useEffect, useState } from 'react'\n\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport {\n BLIND_PEER_FORM_NAME,\n BLIND_PEERS_FORM_NAME,\n BLIND_PEER_TYPE\n} from '@tetherto/pearpass-lib-constants'\nimport { useBlindMirrors } from '@tetherto/pearpass-lib-vault'\nimport { html } from 'htm/react'\n\nimport {\n ActionsContainer,\n ContentWrapper,\n FormWrapper,\n HeaderWrapper\n} from './styles'\nimport { RadioSelect } from '../../../components/RadioSelect'\nimport { useTranslation } from '../../../hooks/useTranslation'\nimport {\n ButtonPrimary,\n ButtonSecondary,\n ButtonSingleInput,\n CompoundField,\n DeleteIcon,\n InputField,\n PlusIcon\n} from '../../../lib-react-components'\nimport { ModalContent } from '../ModalContent'\n\nconst { DEFAULT, PERSONAL } = BLIND_PEER_TYPE\n/**\n * @component\n * @param {Object} props\n * @param {(data: { blindPeerType: 'default' | 'personal', blindPeers?: string[] }) => void} props.onConfirm\n * @param {() => void} props.onClose\n */\nexport const BlindPeersModalContent = ({ onConfirm, onClose }) => {\n const { t } = useTranslation()\n const { data: blindMirrorsData } = useBlindMirrors()\n const isEditMode = blindMirrorsData.length > 0\n const [selectedOption, setSelectedOption] = useState(DEFAULT)\n\n const getInitialValues = () => {\n const manualPeers = blindMirrorsData.filter((item) => !item.isDefault)\n\n if (manualPeers.length > 0) {\n return {\n blindPeers: manualPeers.map((item) => ({\n name: BLIND_PEER_FORM_NAME,\n blindPeer: item.key\n }))\n }\n }\n return {\n blindPeers: [\n {\n name: BLIND_PEER_FORM_NAME,\n blindPeer: ''\n }\n ]\n }\n }\n\n const { registerArray } = useForm({\n initialValues: getInitialValues()\n })\n\n const {\n value: blindPeersList,\n addItem,\n registerItem,\n removeItem\n } = registerArray(BLIND_PEERS_FORM_NAME)\n\n useEffect(() => {\n if (isEditMode && blindMirrorsData.length > 0) {\n setSelectedOption(blindMirrorsData[0].isDefault ? DEFAULT : PERSONAL)\n }\n }, [isEditMode, blindMirrorsData.length])\n\n const radioOptions = [\n { label: t('Automatic blind peers'), value: DEFAULT },\n { label: t('Manual blind peers'), value: PERSONAL }\n ]\n\n const handleOptionChange = (option) => {\n setSelectedOption(option)\n }\n\n const handleBlindPeersConfirm = async () => {\n if (selectedOption === DEFAULT) {\n onConfirm({ blindPeerType: DEFAULT, isEditMode })\n } else if (selectedOption === PERSONAL) {\n const blindPeers = blindPeersList\n .map((peer) => peer.blindPeer?.trim())\n .filter((peer) => peer && peer.length > 0)\n\n if (blindPeers.length === 0) {\n return\n }\n\n onConfirm({ blindPeerType: PERSONAL, blindPeers, isEditMode })\n }\n }\n\n return html`\n <${ModalContent}\n onClose=${onClose}\n headerChildren=${html`\n <${HeaderWrapper}> ${t('Choose your Blind Peer')} \n `}\n >\n <${ContentWrapper}>\n <${RadioSelect}\n options=${radioOptions}\n selectedOption=${selectedOption}\n onChange=${handleOptionChange}\n />\n\n <${FormWrapper} isOpen=${selectedOption === PERSONAL}>\n <${CompoundField}>\n ${blindPeersList.map(\n (blindPeer, index) => html`\n <${React.Fragment} key=${blindPeer.id}>\n <${InputField}\n label=${'#' + (index + 1) + ' ' + t('Blind Peer')}\n placeholder=${t('Add here your code...')}\n isFirst=${index === 0}\n ...${registerItem(BLIND_PEER_FORM_NAME, index)}\n additionalItems=${index === 0\n ? html`\n <${ButtonSingleInput}\n startIcon=${PlusIcon}\n onClick=${() => addItem({ name: 'website' })}\n >\n ${t('Add Peer')}\n \n `\n : html`\n <${ButtonSingleInput}\n startIcon=${DeleteIcon}\n onClick=${() => removeItem(index)}\n >\n ${t('Remove Peer')}\n \n `}\n />\n \n `\n )}\n \n \n\n <${ActionsContainer}>\n <${ButtonPrimary} onClick=${handleBlindPeersConfirm}>\n ${t('Confirm')}\n \n <${ButtonSecondary} onClick=${onClose}> ${t('Cancel')} \n \n \n \n `\n}\n" }, { "path": "src/containers/Modal/BlindPeersModalContent/styles.js", "content": "import styled from 'styled-components'\n\nexport const HeaderWrapper = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 20px;\n font-weight: 700;\n`\n\nexport const ContentWrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 15px;\n`\n\nexport const FormWrapper = styled.div`\n max-height: 400px;\n overflow-y: auto;\n pointer-events: ${({ isOpen }) => (isOpen ? 'auto' : 'none')};\n max-height: ${({ isOpen }) => (isOpen ? '300px' : '0')};\n transition: max-height 0.5s ease;\n`\n\nexport const ActionsContainer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`\n" }, { "path": "src/containers/Modal/BrowserExtensionDialogV2/index.tsx", "content": "import React from 'react'\n\nimport { Button, Dialog, Text, Title } from '@tetherto/pearpass-lib-ui-kit'\nimport { OpenInNew } from '@tetherto/pearpass-lib-ui-kit/icons'\nimport { useTheme } from '@tetherto/pearpass-lib-ui-kit'\n\nimport { createStyles } from './styles'\nimport { LOCAL_STORAGE_KEYS } from '../../../constants/localStorage'\nimport { CHROME_EXTENSION_STORE_LINK } from '../../../constants/pearpassLinks'\nimport { useModal } from '../../../context/ModalContext'\nimport { useTranslation } from '../../../hooks/useTranslation'\n\nexport const BrowserExtensionDialogV2 = () => {\n const { t } = useTranslation()\n const { closeModal } = useModal()\n const { theme } = useTheme()\n const styles = createStyles(theme.colors)\n\n const handleDismiss = () => {\n localStorage.setItem(LOCAL_STORAGE_KEYS.EXTENSION_DIALOG_DISMISSED, 'true')\n closeModal()\n }\n\n const handleDownload = () => {\n localStorage.setItem(LOCAL_STORAGE_KEYS.EXTENSION_DIALOG_DISMISSED, 'true')\n window.electronAPI?.openExternal(CHROME_EXTENSION_STORE_LINK)\n closeModal()\n }\n\n return (\n \n \n \n \n }\n >\n
\n \n\n
\n {/* @ts-ignore */}\n \n {t(\"You've got the app.\")}{'\\n'}\n {t('Now unlock the full experience.')}\n \n {/* @ts-ignore */}\n \n {t('Install the browser extension to autofill passwords, save new logins with one click, and sign in instantly —')}{'\\n'}\n {t('right where you browse.')}{'\\n\\n'}\n {t('No copy-paste. No interruptions. Just seamless security.')}\n \n
\n\n
\n \n )\n}\n" }, { "path": "src/containers/Modal/BrowserExtensionDialogV2/styles.ts", "content": "import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\nimport { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = (colors: ThemeColors) => ({\n body: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n alignItems: 'flex-start',\n padding: rawTokens.spacing8,\n gap: rawTokens.spacing32,\n position: 'relative' as const\n },\n browserMockup: {\n width: '100%',\n borderRadius: rawTokens.radius8,\n height: '80px',\n objectFit: 'cover' as const,\n userSelect: 'none' as const,\n pointerEvents: 'none' as const\n },\n textContent: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: rawTokens.spacing12,\n width: '100%',\n textAlign: 'center' as const,\n lineHeight: 'normal'\n },\n heading: {\n whiteSpace: 'pre-wrap' as const\n },\n description: {\n color: colors.colorTextSecondary,\n whiteSpace: 'pre-wrap' as const\n },\n})\n" }, { "path": "src/containers/Modal/ConfirmationModalContent/index.js", "content": "import { useLingui } from '@lingui/react'\nimport { html } from 'htm/react'\n\nimport { ButtonWrapper, HeaderWrapper, TextWrapper } from './styles'\nimport { useModal } from '../../../context/ModalContext'\nimport { ButtonPrimary, ButtonSecondary } from '../../../lib-react-components'\nimport { ModalContent } from '../ModalContent'\n\n/**\n * @param {{\n * title: string\n * text: string\n * primaryAction: () => void\n * secondaryAction: () => void\n * primaryLabel: string\n * secondaryLabel: string\n * }} props\n */\nexport const ConfirmationModalContent = (props) => {\n const { i18n } = useLingui()\n\n const {\n title = i18n._('Are you sure?'),\n text = i18n._('Are you sure you want to proceed?'),\n primaryAction,\n secondaryAction,\n primaryLabel = i18n._('Confirm'),\n secondaryLabel = i18n._('Cancel')\n } = props\n\n const { closeModal } = useModal()\n\n return html`\n <${ModalContent}\n onClose=${closeModal}\n headerChildren=${html` <${HeaderWrapper}> ${title} `}\n >\n <${TextWrapper}> ${text} \n\n <${ButtonWrapper}>\n <${ButtonPrimary}\n data-testid=\"confirmation-button-confirm\"\n onClick=${primaryAction}\n >\n ${primaryLabel}\n \n\n <${ButtonSecondary}\n data-testid=\"confirmation-button-cancel\"\n onClick=${secondaryAction}\n >\n ${secondaryLabel}\n \n \n \n `\n}\n" }, { "path": "src/containers/Modal/ConfirmationModalContent/styles.js", "content": "import styled from 'styled-components'\n\nexport const HeaderWrapper = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 400;\n`\n\nexport const TextWrapper = styled.div`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 400;\n padding-top: 5px;\n`\n\nexport const ButtonWrapper = styled.div`\n display: flex;\n align-items: center;\n padding-top: 20px;\n gap: 15px;\n`\n" }, { "path": "src/containers/Modal/CreateFileEncryptionPassword/index.tsx", "content": "import { html } from 'htm/react'\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { Validator } from '@tetherto/pear-apps-utils-validator'\n\nimport { FormModalHeaderWrapper } from '../../../components/FormModalHeaderWrapper'\nimport { useLoadingContext } from '../../../context/LoadingContext'\nimport { useModal } from '../../../context/ModalContext'\nimport { useTranslation } from '../../../hooks/useTranslation'\nimport {\n ButtonPrimary,\n PearPassPasswordField\n} from '../../../lib-react-components'\nimport { logger } from '../../../utils/logger'\nimport { ModalContent } from '../ModalContent'\nimport { Description, Header, Title, UnlockVaultContainer } from './styles'\n\ninterface props {\n onSubmit: (password: string) => Promise\n}\n\n/**\n *\n * @param {Object} props\n * @param {(password: string) => Promise} props.onSubmit\n */\nexport const CreateFileEncryptionPassword = ({ onSubmit }: props) => {\n const { t } = useTranslation()\n const { closeModal } = useModal()\n const { setIsLoading } = useLoadingContext()\n\n const schema = Validator.object({\n password: Validator.string().required(t('Password is required')),\n confirmPassword: Validator.string().required(\n t('Confirm password is required')\n )\n })\n\n const { register, handleSubmit, setErrors } = useForm({\n initialValues: {\n password: '',\n confirmPassword: ''\n },\n validate: (values: { password: string; confirmPassword: string }) =>\n schema.validate(values)\n })\n\n const submit = async (values: {\n password: string\n confirmPassword: string\n }) => {\n try {\n if (values.password !== values.confirmPassword) {\n setErrors({\n confirmPassword: t('Passwords do not match')\n })\n return\n }\n\n setIsLoading(true)\n\n await onSubmit?.(values.password)\n\n setIsLoading(false)\n } catch (error) {\n logger.error('CreateFileEncryptionPassword', error)\n\n setIsLoading(false)\n\n setErrors({\n password: t('Invalid password')\n })\n }\n }\n\n return html` <${ModalContent}\n onClose=${closeModal}\n headerChildren=${html`\n <${FormModalHeaderWrapper}>\n <${Header}>\n <${Title}> ${t('Are you sure to encrypt your Vault?')} \n <${Description}>\n ${t('This will create a password for your exported file.')}\n \n \n `}\n >\n <${UnlockVaultContainer} onSubmit=${handleSubmit(submit)}>\n <${PearPassPasswordField}\n placeholder=${t('Set file password')}\n ...${register('password')}\n />\n <${PearPassPasswordField}\n placeholder=${t('Repeat file password')}\n ...${register('confirmPassword')}\n />\n\n <${ButtonPrimary} type=\"submit\"> ${t('Export')} \n \n `\n}\n" }, { "path": "src/containers/Modal/CreateFileEncryptionPassword/styles.ts", "content": "import styled from 'styled-components'\n\nexport const Header = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n`\nexport const Title = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nexport const Description = styled.span`\n color: ${({ theme }) => theme.colors.grey100.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nexport const VaultsContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px;\n`\nexport const UnlockVaultContainer = styled.form`\n display: flex;\n flex-direction: column;\n align-items: self-start;\n gap: 20px;\n`\n" }, { "path": "src/containers/Modal/CreateFolderModalContent/index.js", "content": "import React from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { Validator } from '@tetherto/pear-apps-utils-validator'\nimport { useCreateFolder, useFolders } from '@tetherto/pearpass-lib-vault'\nimport { html } from 'htm/react'\n\nimport { HeaderWrapper } from './styles'\nimport { useGlobalLoading } from '../../../context/LoadingContext'\nimport { useModal } from '../../../context/ModalContext'\nimport {\n InputField,\n ButtonLittle,\n SaveIcon\n} from '../../../lib-react-components'\nimport { ModalContent } from '../ModalContent'\n\n/**\n * @param {{\n * onCreate: (folderName: string) => void\n * initialValues: {title: string}\n * }} props\n */\nexport const CreateFolderModalContent = ({ onCreate, initialValues }) => {\n const { i18n } = useLingui()\n const { closeModal } = useModal()\n const { renameFolder } = useFolders()\n\n const { isLoading, createFolder } = useCreateFolder({\n onCompleted: (folderData) => {\n onCreate?.(folderData)\n\n closeModal()\n }\n })\n\n useGlobalLoading({ isLoading })\n\n const { data } = useFolders()\n\n const customFolders = Object.values(data?.customFolders ?? {})\n\n const schema = Validator.object({\n title: Validator.string()\n .required(i18n._('Title is required'))\n .refine((value) => {\n const isDuplicate = customFolders.some(\n (folder) => folder.name === value\n )\n\n if (isDuplicate) {\n return i18n._('Folder already exists')\n }\n\n return null\n })\n })\n\n const { register, handleSubmit } = useForm({\n initialValues: {\n title: initialValues?.title ?? ''\n },\n validate: (values) => schema.validate(values)\n })\n\n const onSubmit = async (values) => {\n if (initialValues) {\n await renameFolder(initialValues.title, values.title)\n closeModal()\n } else {\n createFolder(values.title)\n }\n }\n\n return html`\n <${React.Fragment}>\n <${ModalContent}\n onSubmit=${handleSubmit(onSubmit)}\n onClose=${closeModal}\n headerChildren=${html`\n <${HeaderWrapper}>\n <${ButtonLittle}\n data-testid=\"createfolder-button-submit\"\n startIcon=${SaveIcon}\n type=\"submit\"\n >\n ${!!initialValues ? i18n._('Save') : i18n._('Create folder')}\n \n \n `}\n >\n <${InputField}\n data-testid=\"input-folder-name\"\n label=${i18n._('Title')}\n placeholder=${i18n._('Insert folder name')}\n variant=\"outline\"\n autoFocus\n ...${register('title')}\n />\n \n \n `\n}\n" }, { "path": "src/containers/Modal/CreateFolderModalContent/styles.js", "content": "import styled from 'styled-components'\n\nexport const HeaderWrapper = styled.div`\n display: flex;\n justify-content: flex-end;\n`\n" }, { "path": "src/containers/Modal/CreateFolderModalContentV2/CreateFolderModalContentV2.styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = () => ({\n form: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing16}px`,\n width: '100%'\n }\n})\n" }, { "path": "src/containers/Modal/CreateFolderModalContentV2/CreateFolderModalContentV2.tsx", "content": "import React, { useState } from 'react'\n\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { Validator } from '@tetherto/pear-apps-utils-validator'\nimport { Button, Dialog, Form, InputField } from '@tetherto/pearpass-lib-ui-kit'\nimport { useCreateFolder, useFolders } from '@tetherto/pearpass-lib-vault'\nimport { createStyles } from './CreateFolderModalContentV2.styles'\nimport { useGlobalLoading } from '../../../context/LoadingContext'\nimport { useTranslation } from '../../../hooks/useTranslation'\n\nexport interface CreateFolderModalContentV2Props {\n onClose: () => void\n onCreate?: (folderName: string) => void\n onRename?: (newFolderName: string, previousFolderName: string) => void\n initialValues?: { title: string }\n}\n\nexport const CreateFolderModalContentV2 = ({\n onClose,\n onCreate,\n onRename,\n initialValues\n}: CreateFolderModalContentV2Props) => {\n const { t } = useTranslation()\n const styles = createStyles()\n\n const isRename = !!initialValues\n\n const { renameFolder, data } = useFolders()\n const customFolders = Object.values(data?.customFolders ?? {})\n\n const [isRenameLoading, setIsRenameLoading] = useState(false)\n\n const { isLoading: isCreateLoading, createFolder } = useCreateFolder({\n onCompleted: (folderData: { folder: string }) => {\n onCreate?.(folderData.folder)\n onClose()\n }\n })\n\n const isLoading = isRename ? isRenameLoading : isCreateLoading\n\n useGlobalLoading({ isLoading })\n\n const schema = Validator.object({\n title: Validator.string()\n .required(t('Title is required'))\n .refine((value: string) => {\n if (isRename && value === initialValues?.title) {\n return null\n }\n\n const isDuplicate = (customFolders as { name: string }[]).some(\n (folder: { name: string }) => folder.name === value\n )\n\n if (isDuplicate) {\n return t('Folder already exists')\n }\n\n return null\n })\n })\n\n const { register, handleSubmit, values } = useForm({\n initialValues: {\n title: initialValues?.title ?? ''\n },\n validate: (formValues: { title: string }) => schema.validate(formValues)\n })\n\n const onSubmit = async (formValues: { title: string }) => {\n if (isLoading) return\n\n if (isRename) {\n try {\n setIsRenameLoading(true)\n await renameFolder(initialValues.title, formValues.title)\n onRename?.(formValues.title, initialValues.title)\n onClose()\n } finally {\n setIsRenameLoading(false)\n }\n } else {\n createFolder(formValues.title)\n }\n }\n\n const isSaveDisabled = !values?.title?.trim() || isLoading\n\n const titleField = register('title')\n\n return (\n \n \n {t('Discard')}\n \n \n {isRename ? t('Save') : t('Create New Folder')}\n \n \n }\n >\n ['style']}\n testID=\"createfolder-form-v2\"\n >\n ) =>\n titleField.onChange(e.target.value)\n }\n error={titleField.error || undefined}\n testID=\"createfolder-name-v2\"\n />\n \n \n )\n}\n" }, { "path": "src/containers/Modal/CreateOrEditCategoryWrapper/CreateOrEditAuthenticatorModalContent/CreateOrEditAuthenticatorModalContent.styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = () => ({\n form: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing8}px`,\n width: '100%'\n },\n sectionLabel: {\n marginTop: `${rawTokens.spacing8}px`\n }\n})\n" }, { "path": "src/containers/Modal/CreateOrEditCategoryWrapper/CreateOrEditAuthenticatorModalContent/CreateOrEditAuthenticatorModalContent.tsx", "content": "import React from 'react'\n\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { Validator } from '@tetherto/pear-apps-utils-validator'\nimport {\n AttachmentField as UiKitAttachmentField,\n Button,\n Dialog,\n Form,\n InputField,\n MultiSlotInput,\n PasswordField,\n Text,\n useTheme\n} from '@tetherto/pearpass-lib-ui-kit'\nimport { RECORD_TYPES } from '@tetherto/pearpass-lib-vault'\nimport { useCreateRecord, useRecords } from '@tetherto/pearpass-lib-vault'\nimport {\n Add,\n TrashOutlined,\n UploadFileFilled\n} from '@tetherto/pearpass-lib-ui-kit/icons'\nimport { html } from 'htm/react'\nimport { createStyles } from './CreateOrEditAuthenticatorModalContent.styles'\nimport { ATTACHMENTS_FIELD_KEY } from '../../../../constants/formFields'\nimport { useGlobalLoading } from '../../../../context/LoadingContext'\nimport { useModal } from '../../../../context/ModalContext'\nimport { useToast } from '../../../../context/ToastContext'\nimport { useTranslation } from '../../../../hooks/useTranslation'\nimport { useGetMultipleFiles } from '../../../../hooks/useGetMultipleFiles'\nimport { getFilteredAttachmentsById } from '../../../../utils/getFilteredAttachmentsById'\nimport { handleFileSelect } from '../../../../utils/handleFileSelect'\nimport { UploadFilesModalContentV2 } from '../../UploadFilesModalContentV2'\n\nexport type CreateOrEditAuthenticatorModalContentProps = {\n initialRecord?: {\n data: {\n title: string\n note: string\n attachments: { id: string; name: string }[]\n [key: string]: unknown\n }\n folder?: string\n isFavorite?: boolean\n attachments?: { id: string; name: string }[]\n [key: string]: unknown\n }\n selectedFolder?: string\n isFavorite?: boolean\n onTypeChange?: (type: string) => void\n}\n\nexport const CreateOrEditAuthenticatorModalContent = ({\n initialRecord,\n selectedFolder,\n isFavorite\n}: CreateOrEditAuthenticatorModalContentProps) => {\n const { t } = useTranslation()\n const { closeModal, setModal } = useModal()\n const { theme } = useTheme()\n const styles = createStyles()\n const { setToast } = useToast()\n\n const { createRecord, isLoading: isCreateLoading } = useCreateRecord({\n onCompleted: () => {\n closeModal()\n setToast({ message: t('Record created successfully') })\n }\n })\n\n const { updateRecords, isLoading: isUpdateLoading } = useRecords({\n onCompleted: () => {\n closeModal()\n setToast({ message: t('Record updated successfully') })\n }\n })\n\n const onError = (error: { message: string }) => {\n setToast({ message: error.message })\n }\n\n const isLoading = isCreateLoading || isUpdateLoading\n\n useGlobalLoading({ isLoading })\n\n const schema = Validator.object({\n title: Validator.string().required(t('Title is required')),\n otpSecret: Validator.string(),\n note: Validator.string(),\n attachments: Validator.array().items(\n Validator.object({\n id: Validator.string(),\n name: Validator.string().required()\n })\n )\n })\n\n const { register, handleSubmit, values, setValue } = useForm({\n initialValues: {\n title: initialRecord?.data?.title ?? '',\n otpSecret:\n initialRecord?.data?.otpInput ??\n (initialRecord?.data?.otp as { secret?: string } | undefined)?.secret ??\n '',\n note: initialRecord?.data?.note ?? '',\n attachments: initialRecord?.attachments ?? []\n },\n validate: (formValues: Record) =>\n schema.validate(formValues)\n })\n\n useGetMultipleFiles({\n fieldNames: [ATTACHMENTS_FIELD_KEY],\n updateValues: setValue,\n initialRecord\n })\n\n const onSubmit = (formValues: Record) => {\n const otpInput = (formValues.otpSecret as string)?.trim() || undefined\n\n const data = {\n type: RECORD_TYPES.LOGIN,\n folder: selectedFolder ?? initialRecord?.folder,\n isFavorite: initialRecord?.isFavorite ?? isFavorite,\n data: {\n ...(initialRecord?.data ? initialRecord.data : {}),\n title: formValues.title,\n note: formValues.note,\n attachments: formValues.attachments,\n otpInput\n }\n }\n\n if (initialRecord) {\n updateRecords([{ ...initialRecord, ...data }], onError)\n } else {\n createRecord(data, onError)\n }\n }\n\n const handleFileLoad = () => {\n setModal(\n html`<${UploadFilesModalContentV2}\n type=${'file'}\n onFilesSelected=${(files: File[]) =>\n handleFileSelect({\n files: files as unknown as FileList,\n fieldName: ATTACHMENTS_FIELD_KEY,\n setValue,\n values\n })}\n />`\n )\n }\n\n const isEdit = !!initialRecord\n\n const titleField = register('title')\n const otpSecretField = register('otpSecret')\n const noteField = register('note')\n\n return (\n \n \n {t('Discard')}\n \n handleSubmit(onSubmit)()}\n data-testid='createoredit-authenticator-button-save'\n >\n {isEdit ? t('Save') : t('Add Item')}\n \n \n }\n >\n ['style']}\n testID='createoredit-authenticator-form'\n >\n titleField.onChange(e.target.value)}\n error={titleField.error || undefined}\n testID='createoredit-authenticator-input-title'\n />\n\n \n otpSecretField.onChange(e.target.value)}\n error={otpSecretField.error || undefined}\n testID='createoredit-authenticator-input-otpsecret'\n />\n \n\n
\n \n {t('Additional')}\n \n
\n\n \n noteField.onChange(e.target.value)}\n error={noteField.error || undefined}\n testID='createoredit-authenticator-input-comment'\n />\n \n\n }\n onClick={handleFileLoad}\n data-testid='createoredit-authenticator-button-addattachment'\n >\n {t('Add Another Attachment')}\n \n }\n >\n {values.attachments.length > 0\n ? values.attachments.map(\n (\n attachment: {\n id?: string\n tempId?: string\n name: string\n },\n index: number\n ) => (\n \n }\n onClick={() =>\n setValue(\n ATTACHMENTS_FIELD_KEY,\n getFilteredAttachmentsById(\n values.attachments,\n attachment\n )\n )\n }\n data-testid={`createoredit-authenticator-button-deleteattachment-${index}`}\n />\n }\n />\n )\n )\n : null}\n \n }\n />\n \n \n \n )\n}\n" }, { "path": "src/containers/Modal/CreateOrEditCategoryWrapper/CreateOrEditCreditCardModalContent/index.js", "content": "import { useLingui } from '@lingui/react'\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { Validator } from '@tetherto/pear-apps-utils-validator'\nimport {\n RECORD_TYPES,\n useCreateRecord,\n useRecords\n} from '@tetherto/pearpass-lib-vault'\nimport { html } from 'htm/react'\n\nimport { CreateCustomField } from '../../../../components/CreateCustomField'\nimport { FolderDropdown } from '../../../../components/FolderDropdown'\nimport { FormGroup } from '../../../../components/FormGroup'\nimport { FormModalHeaderWrapper } from '../../../../components/FormModalHeaderWrapper'\nimport { FormWrapper } from '../../../../components/FormWrapper'\nimport { InputFieldNote } from '../../../../components/InputFieldNote'\nimport { RecordTypeMenu } from '../../../../components/RecordTypeMenu'\nimport { ATTACHMENTS_FIELD_KEY } from '../../../../constants/formFields'\nimport { useGlobalLoading } from '../../../../context/LoadingContext'\nimport { useModal } from '../../../../context/ModalContext'\nimport { useToast } from '../../../../context/ToastContext'\nimport { useGetMultipleFiles } from '../../../../hooks/useGetMultipleFiles'\nimport {\n ButtonLittle,\n ButtonSingleInput,\n CalendarIcon,\n CreditCardIcon,\n DeleteIcon,\n ImageIcon,\n InputField,\n NineDotsIcon,\n PasswordField,\n SaveIcon,\n UserIcon\n} from '../../../../lib-react-components'\nimport { getFilteredAttachmentsById } from '../../../../utils/getFilteredAttachmentsById'\nimport { handleFileSelect } from '../../../../utils/handleFileSelect'\nimport { AttachmentField } from '../../../AttachmentField'\nimport { CustomFields } from '../../../CustomFields'\nimport { ModalContent } from '../../ModalContent'\nimport { DropdownsWrapper } from '../../styles'\nimport { UploadFilesModalContent } from '../../UploadImageModalContent'\n\n/**\n * @param {{\n * initialRecord: {\n * data: {\n * title: string\n * name: string\n * number: string\n * expireDate: string\n * securityCode: string\n * pinCode: string\n * note: string\n * customFields: {\n * type: string\n * name: string\n * }[]\n * attachments: { id: string, name: string}[]\n * }\n * }\n * selectedFolder?: string\n * isFavorite?: boolean\n * onTypeChange: (type: string) => void\n * }} props\n */\nexport const CreateOrEditCreditCardModalContent = ({\n initialRecord,\n selectedFolder,\n isFavorite,\n onTypeChange\n}) => {\n const { i18n } = useLingui()\n\n const { closeModal, setModal } = useModal()\n const { setToast } = useToast()\n\n const { createRecord, isLoading: isCreateLoading } = useCreateRecord({\n onCompleted: () => {\n closeModal()\n\n setToast({\n message: i18n._('Record created successfully')\n })\n }\n })\n\n const onError = (error) => {\n setToast({\n message: error.message\n })\n }\n\n const { updateRecords, isLoading: isUpdateLoading } = useRecords({\n onCompleted: () => {\n closeModal()\n\n setToast({\n message: i18n._('Record updated successfully')\n })\n }\n })\n\n const isLoading = isCreateLoading || isUpdateLoading\n\n useGlobalLoading({ isLoading })\n\n const schema = Validator.object({\n title: Validator.string().required(i18n._('Title is required')),\n name: Validator.string(),\n number: Validator.string().numeric(\n i18n._('Number on card must be a number')\n ),\n expireDate: Validator.string(),\n securityCode: Validator.string().numeric(i18n._('Note must be a string')),\n pinCode: Validator.string().numeric(i18n._('Pin code must be a number')),\n note: Validator.string(),\n customFields: Validator.array().items(\n Validator.object({\n note: Validator.string().required(i18n._('Comment is required'))\n })\n ),\n folder: Validator.string(),\n attachments: Validator.array().items(\n Validator.object({\n id: Validator.string(),\n name: Validator.string().required(),\n buffer: Validator.object({})\n })\n )\n })\n\n const { values, register, handleSubmit, registerArray, setValue } = useForm({\n initialValues: {\n title: initialRecord?.data?.title ?? '',\n name: initialRecord?.data?.name ?? '',\n number: initialRecord?.data?.number ?? '',\n expireDate: initialRecord?.data?.expireDate ?? '',\n securityCode: initialRecord?.data?.securityCode ?? '',\n pinCode: initialRecord?.data?.pinCode ?? '',\n note: initialRecord?.data?.note ?? '',\n customFields: initialRecord?.data?.customFields ?? [],\n folder: selectedFolder ?? initialRecord?.folder,\n attachments: initialRecord?.attachments ?? []\n },\n validate: (values) => schema.validate(values)\n })\n\n useGetMultipleFiles({\n fieldNames: [ATTACHMENTS_FIELD_KEY],\n updateValues: setValue,\n initialRecord\n })\n\n const {\n value: list,\n addItem,\n registerItem,\n removeItem\n } = registerArray('customFields')\n\n const onSubmit = (values) => {\n const data = {\n type: RECORD_TYPES.CREDIT_CARD,\n folder: values.folder,\n isFavorite: initialRecord?.isFavorite ?? isFavorite,\n data: {\n title: values.title,\n name: values.name,\n number: values.number,\n expireDate: values.expireDate,\n securityCode: values.securityCode,\n pinCode: values.pinCode,\n note: values.note,\n customFields: values.customFields,\n attachments: values.attachments\n }\n }\n\n if (initialRecord) {\n updateRecords([{ ...initialRecord, ...data }], onError)\n } else {\n createRecord(data, onError)\n }\n }\n\n const handleRecordTypeChange = (item) => {\n onTypeChange(item)\n }\n\n const handleExpireDateChange = (inputValue) => {\n let value = inputValue.replace(/\\D/g, '')\n\n if (value.length > 4) {\n value = value.slice(0, 4)\n }\n\n if (value.length > 2) {\n value = `${value.slice(0, 2)} ${value.slice(2)}`\n }\n\n setValue('expireDate', value)\n }\n\n const handleFileLoad = () => {\n setModal(\n html`<${UploadFilesModalContent}\n type=${'file'}\n onFilesSelected=${(files) =>\n handleFileSelect({\n files,\n fieldName: ATTACHMENTS_FIELD_KEY,\n setValue,\n values\n })}\n />`\n )\n }\n\n const handleNumericInputChange = (value, field) => {\n setValue(field, value.replace(/\\D/g, ''))\n }\n\n return html`\n <${ModalContent}\n onClose=${closeModal}\n onSubmit=${handleSubmit(onSubmit)}\n headerChildren=${html`\n <${FormModalHeaderWrapper}\n buttons=${html`\n <${ButtonLittle}\n testId=\"createoredit-button-loadfile\"\n startIcon=${ImageIcon}\n onClick=${handleFileLoad}\n >\n ${i18n._('Load file')}\n \n <${ButtonLittle}\n testId=\"createoredit-button-save\"\n startIcon=${SaveIcon}\n type=\"submit\"\n >\n ${i18n._('Save')}\n \n `}\n >\n <${DropdownsWrapper}>\n <${FolderDropdown}\n testId=\"createoredit-dropdown-folder\"\n selectedFolder=${values?.folder}\n onFolderSelect=${(folder) => setValue('folder', folder?.name)}\n />\n ${!initialRecord &&\n html` <${RecordTypeMenu}\n testId=\"createoredit-dropdown-recordtype\"\n selectedRecord=${RECORD_TYPES.CREDIT_CARD}\n onRecordSelect=${(record) => handleRecordTypeChange(record?.type)}\n />`}\n \n \n `}\n >\n <${FormWrapper}>\n <${FormGroup}>\n <${InputField}\n testId=\"createoredit-input-title\"\n label=${i18n._('Title')}\n placeholder=${i18n._('Insert title')}\n variant=\"outline\"\n ...${register('title')}\n />\n \n\n <${FormGroup}>\n <${InputField}\n testId=\"createoredit-input-fullname\"\n label=${i18n._('Full name')}\n placeholder=${i18n._('Full name')}\n variant=\"outline\"\n icon=${UserIcon}\n ...${register('name')}\n />\n\n <${InputField}\n testId=\"createoredit-input-number\"\n label=${i18n._('Number on card')}\n placeholder=\"1234 1234 1234 1234 \"\n variant=\"outline\"\n icon=${CreditCardIcon}\n ...${register('number')}\n value=${values.number.replace(/(.{4})/g, '$1 ').trim()}\n onChange=${(value) => handleNumericInputChange(value, 'number')}\n />\n\n <${InputField}\n testId=\"createoredit-input-expiredate\"\n label=${i18n._('Date of expire')}\n placeholder=\"MM YY\"\n variant=\"outline\"\n icon=${CalendarIcon}\n value=${values.expireDate}\n onChange=${handleExpireDateChange}\n />\n\n <${PasswordField}\n testId=\"createoredit-input-securitycode\"\n label=${i18n._('Security code')}\n placeholder=\"123\"\n variant=\"outline\"\n icon=${CreditCardIcon}\n ...${register('securityCode')}\n onChange=${(value) =>\n handleNumericInputChange(value, 'securityCode')}\n />\n\n <${PasswordField}\n testId=\"createoredit-input-pincode\"\n label=${i18n._('Pin code')}\n placeholder=\"1234\"\n variant=\"outline\"\n icon=${NineDotsIcon}\n ...${register('pinCode')}\n onChange=${(value) => handleNumericInputChange(value, 'pinCode')}\n />\n \n\n ${values.attachments.length > 0 &&\n html`\n <${FormGroup}>\n ${values.attachments.map(\n (attachment) =>\n html`<${AttachmentField}\n testId=\"createoredit-attachment\"\n key=${attachment.id || attachment.tempId}\n attachment=${attachment}\n label=${i18n._('File')}\n additionalItems=${html`\n <${ButtonSingleInput}\n testId=\"createoredit-button-deleteattachment\"\n startIcon=${DeleteIcon}\n onClick=${() =>\n setValue(\n ATTACHMENTS_FIELD_KEY,\n getFilteredAttachmentsById(\n values.attachments,\n attachment\n )\n )}\n >\n ${i18n._('Delete File')}\n \n `}\n />`\n )}\n \n `}\n\n <${FormGroup}>\n <${InputFieldNote}\n testId=\"createoredit-input-note\"\n ...${register('note')}\n />\n \n\n <${CustomFields}\n customFields=${list}\n register=${registerItem}\n removeItem=${removeItem}\n />\n\n <${FormGroup}>\n <${CreateCustomField}\n testId=\"createoredit-button-createcustom\"\n onCreateCustom=${(type) => addItem({ type: type, name: type })}\n />\n \n \n \n `\n}\n" }, { "path": "src/containers/Modal/CreateOrEditCategoryWrapper/CreateOrEditCreditCardModalContentV2/CreateOrEditCreditCardModalContentV2.styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = () => ({\n form: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing8}px`,\n width: '100%'\n },\n sectionLabel: {\n marginTop: `${rawTokens.spacing8}px`\n }\n})\n" }, { "path": "src/containers/Modal/CreateOrEditCategoryWrapper/CreateOrEditCreditCardModalContentV2/CreateOrEditCreditCardModalContentV2.tsx", "content": "import React from 'react'\n\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { Validator } from '@tetherto/pear-apps-utils-validator'\nimport {\n AttachmentField as UiKitAttachmentField,\n Button,\n DateField,\n Dialog,\n Form,\n InputField,\n MultiSlotInput,\n PasswordField,\n Text,\n useTheme\n} from '@tetherto/pearpass-lib-ui-kit'\nimport { RECORD_TYPES } from '@tetherto/pearpass-lib-vault'\nimport { useCreateRecord, useRecords } from '@tetherto/pearpass-lib-vault'\nimport {\n Add,\n TrashOutlined,\n UploadFileFilled\n} from '@tetherto/pearpass-lib-ui-kit/icons'\nimport { html } from 'htm/react'\n\nimport { createStyles } from './CreateOrEditCreditCardModalContentV2.styles'\nimport { ATTACHMENTS_FIELD_KEY } from '../../../../constants/formFields'\nimport { useGlobalLoading } from '../../../../context/LoadingContext'\nimport { useModal } from '../../../../context/ModalContext'\nimport { useToast } from '../../../../context/ToastContext'\nimport { useTranslation } from '../../../../hooks/useTranslation'\nimport { useGetMultipleFiles } from '../../../../hooks/useGetMultipleFiles'\nimport { getFilteredAttachmentsById } from '../../../../utils/getFilteredAttachmentsById'\nimport { handleFileSelect } from '../../../../utils/handleFileSelect'\nimport { UploadFilesModalContentV2 } from '../../UploadFilesModalContentV2'\nimport { FolderDropdownV2 } from '../../../../components/FolderDropdown/FolderDropdownV2'\n\nexport type CreateOrEditCreditCardModalContentV2Props = {\n initialRecord?: {\n data: {\n title: string\n name: string\n number: string\n expireDate: string\n securityCode: string\n pinCode: string\n note: string\n customFields: { type: string; name: string }[]\n attachments: { id: string; name: string }[]\n [key: string]: unknown\n }\n folder?: string\n isFavorite?: boolean\n attachments?: { id: string; name: string }[]\n [key: string]: unknown\n }\n selectedFolder?: string\n isFavorite?: boolean\n onTypeChange: (type: string) => void\n}\n\nconst formatCardNumber = (raw: string): string => {\n const digits = raw.replace(/\\D/g, '').slice(0, 16)\n return digits.match(/.{1,4}/g)?.join(' ') ?? digits\n}\n\nconst formatExpireDate = (raw: string): string => {\n const digits = raw.replace(/\\D/g, '').slice(0, 4)\n return digits.length > 2 ? `${digits.slice(0, 2)} ${digits.slice(2)}` : digits\n}\n\nexport const CreateOrEditCreditCardModalContentV2 = ({\n initialRecord,\n selectedFolder,\n isFavorite,\n onTypeChange: _onTypeChange\n}: CreateOrEditCreditCardModalContentV2Props) => {\n const { t } = useTranslation()\n const { closeModal, setModal } = useModal()\n const { setToast } = useToast()\n const { theme } = useTheme()\n const styles = createStyles()\n\n const { createRecord, isLoading: isCreateLoading } = useCreateRecord({\n onCompleted: () => {\n closeModal()\n setToast({ message: t('Record created successfully') })\n }\n })\n\n const { updateRecords, isLoading: isUpdateLoading } = useRecords({\n onCompleted: () => {\n closeModal()\n setToast({ message: t('Record updated successfully') })\n }\n })\n\n const onError = (error: { message: string }) => {\n setToast({ message: error.message })\n }\n\n const isLoading = isCreateLoading || isUpdateLoading\n\n useGlobalLoading({ isLoading })\n\n const schema = Validator.object({\n title: Validator.string().required(t('Title is required')),\n name: Validator.string(),\n number: Validator.string(),\n expireDate: Validator.string(),\n securityCode: Validator.string().numeric(t('Should contain only numbers')),\n pinCode: Validator.string().numeric(t('Should contain only numbers')),\n note: Validator.string(),\n customFields: Validator.array().items(\n Validator.object({\n note: Validator.string()\n })\n ),\n folder: Validator.string(),\n attachments: Validator.array().items(\n Validator.object({\n id: Validator.string(),\n name: Validator.string().required()\n })\n )\n })\n\n const { register, handleSubmit, registerArray, values, setValue } = useForm({\n initialValues: {\n title: initialRecord?.data?.title ?? '',\n name: initialRecord?.data?.name ?? '',\n number: initialRecord?.data?.number ?? '',\n expireDate: initialRecord?.data?.expireDate ?? '',\n securityCode: initialRecord?.data?.securityCode ?? '',\n pinCode: initialRecord?.data?.pinCode ?? '',\n note: initialRecord?.data?.note ?? '',\n customFields: initialRecord?.data?.customFields?.length\n ? initialRecord.data.customFields\n : [{ type: 'note', name: 'note', note: '' }],\n folder: selectedFolder ?? initialRecord?.folder,\n attachments: initialRecord?.attachments ?? []\n },\n validate: (formValues: Record) =>\n schema.validate(formValues)\n })\n\n const {\n value: customFieldsList,\n addItem: addCustomField,\n registerItem: registerCustomFieldItem,\n removeItem: removeCustomFieldItem\n } = registerArray('customFields')\n\n useGetMultipleFiles({\n fieldNames: [ATTACHMENTS_FIELD_KEY],\n updateValues: setValue,\n initialRecord\n })\n\n const onSubmit = (formValues: Record) => {\n const data = {\n type: RECORD_TYPES.CREDIT_CARD,\n folder: formValues.folder,\n isFavorite: initialRecord?.isFavorite ?? isFavorite,\n data: {\n ...(initialRecord?.data ? initialRecord.data : {}),\n title: formValues.title,\n name: formValues.name,\n number: formValues.number,\n expireDate: formValues.expireDate,\n securityCode: formValues.securityCode,\n pinCode: formValues.pinCode,\n note: formValues.note,\n customFields: (\n (formValues.customFields as Array<{ type: string; note?: string }>) ??\n []\n ).filter((f) => f.note?.trim().length),\n attachments: formValues.attachments\n }\n }\n\n if (initialRecord) {\n updateRecords([{ ...initialRecord, ...data }], onError)\n } else {\n createRecord(data, onError)\n }\n }\n\n const handleFileLoad = () => {\n setModal(\n html`<${UploadFilesModalContentV2}\n type=${'file'}\n onFilesSelected=${(files: File[]) =>\n handleFileSelect({\n files: files as unknown as FileList,\n fieldName: ATTACHMENTS_FIELD_KEY,\n setValue,\n values\n })}\n />`\n )\n }\n\n const isEdit = !!initialRecord\n\n const titleField = register('title')\n const nameField = register('name')\n const securityCodeField = register('securityCode')\n const pinCodeField = register('pinCode')\n const noteField = register('note')\n\n return (\n \n \n {t('Discard')}\n \n handleSubmit(onSubmit)()}\n data-testid=\"createoredit-creditcard-button-save-v2\"\n >\n {isEdit ? t('Save') : t('Add Item')}\n \n \n }\n >\n ['style']}\n testID=\"createoredit-creditcard-form-v2\"\n >\n titleField.onChange(e.target.value)}\n error={titleField.error || undefined}\n testID=\"createoredit-creditcard-input-title-v2\"\n />\n\n
\n \n {t('Details')}\n \n
\n\n \n nameField.onChange(e.target.value)}\n error={nameField.error || undefined}\n testID=\"createoredit-creditcard-input-name-v2\"\n />\n setValue('number', formatCardNumber(e.target.value))}\n testID=\"createoredit-creditcard-input-number-v2\"\n />\n setValue('expireDate', formatExpireDate(e.target.value))}\n pickerMode=\"month-year\"\n testID=\"createoredit-creditcard-input-expiredate-v2\"\n />\n \n securityCodeField.onChange(e.target.value.replace(/\\D/g, ''))\n }\n error={securityCodeField.error || undefined}\n testID=\"createoredit-creditcard-input-securitycode-v2\"\n />\n \n pinCodeField.onChange(e.target.value.replace(/\\D/g, ''))\n }\n error={pinCodeField.error || undefined}\n testID=\"createoredit-creditcard-input-pincode-v2\"\n />\n \n\n
\n \n {t('Additional')}\n \n
\n\n \n setValue('folder', name === values.folder ? '' : name)\n }\n />\n\n \n noteField.onChange(e.target.value)}\n error={noteField.error || undefined}\n testID=\"createoredit-creditcard-input-comment-v2\"\n />\n \n\n }\n onClick={handleFileLoad}\n data-testid=\"createoredit-creditcard-button-addattachment-v2\"\n >\n {t('Add Another Attachment')}\n \n }\n >\n {values.attachments.length > 0\n ? values.attachments.map(\n (\n attachment: {\n id?: string\n tempId?: string\n name: string\n },\n index: number\n ) => (\n \n }\n onClick={() =>\n setValue(\n ATTACHMENTS_FIELD_KEY,\n getFilteredAttachmentsById(\n values.attachments,\n attachment\n )\n )\n }\n data-testid={`createoredit-creditcard-button-deleteattachment-v2-${index}`}\n />\n }\n />\n )\n )\n : null}\n \n }\n />\n \n\n }\n onClick={() => addCustomField({ type: 'note', name: 'note' })}\n data-testid=\"createoredit-creditcard-button-addhiddenmessage-v2\"\n >\n {t('Add Another Message')}\n \n }\n >\n {customFieldsList.map((field: { id: string }, index: number) => {\n const fieldReg = registerCustomFieldItem('note', index)\n const canRemove = customFieldsList.length > 1\n return (\n
\n )}\n \n )\n}\n" }, { "path": "src/containers/Modal/PairedDevicesModalContent/styles.ts", "content": "import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\nimport { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = (colors: ThemeColors) => ({\n list: {\n display: 'flex' as const,\n flexDirection: 'column' as const\n },\n iconWrap: {\n width: '32px',\n height: '32px',\n borderRadius: `${rawTokens.radius8}px`,\n display: 'flex' as const,\n alignItems: 'center' as const,\n justifyContent: 'center' as const,\n flexShrink: 0,\n backgroundColor: colors.colorSurfaceHover\n },\n emptyState: {\n display: 'flex' as const,\n justifyContent: 'center' as const,\n alignItems: 'center' as const,\n padding: `${rawTokens.spacing24}px`\n }\n})\n" }, { "path": "src/containers/Modal/SideDrawer/index.js", "content": "import { useRef } from 'react'\n\nimport { html } from 'htm/react'\n\nimport { SideDrawerWrapper } from './styles'\nimport { BASE_TRANSITION_DURATION } from '../../../constants/transitions'\nimport { useAnimatedVisibility } from '../../../hooks/useAnimatedVisibility'\n\n/**\n * @param {{\n * children: import('react').ReactNode\n * isOpen: boolean\n * }} props\n */\nexport const SideDrawer = ({ children, isOpen }) => {\n const nodeRef = useRef(null)\n const { isShown, isRendered } = useAnimatedVisibility({\n isOpen: isOpen,\n transitionDuration: BASE_TRANSITION_DURATION,\n nodeRef,\n propertyName: 'transform'\n })\n\n if (!isRendered) {\n return null\n }\n\n return html`\n <${SideDrawerWrapper} ref=${nodeRef} isShown=${isShown}> ${children} \n `\n}\n" }, { "path": "src/containers/Modal/SideDrawer/styles.js", "content": "import styled from 'styled-components'\n\nimport { BASE_TRANSITION_DURATION } from '../../../constants/transitions'\n\nexport const SideDrawerWrapper = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isShown'].includes(prop)\n})`\n position: fixed;\n bottom: 0;\n right: 0;\n width: 400px;\n height: calc(100% - var(--title-bar-height));\n background: ${({ theme }) => theme.colors.grey500.mode1};\n box-shadow: -4px 4px 4px 0px rgba(0, 0, 0, 0.25);\n transform: ${({ isShown }) =>\n isShown ? 'translateX(0)' : 'translateX(100%)'};\n transition: transform ${BASE_TRANSITION_DURATION}ms ease-in-out;\n`\n" }, { "path": "src/containers/Modal/UnsavedChangesModalContent/UnsavedChangesModalContent.tsx", "content": "import { Button, Dialog, Text, useTheme } from '@tetherto/pearpass-lib-ui-kit'\n\nimport { useModal } from '../../../context/ModalContext'\nimport { useTranslation } from '../../../hooks/useTranslation'\n\ntype UnsavedChangesModalContentProps = {\n description?: string\n onSave: () => void | Promise\n onDiscard: () => void\n}\n\nexport const UnsavedChangesModalContent = ({\n description,\n onSave,\n onDiscard\n}: UnsavedChangesModalContentProps) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const { closeModal } = useModal()\n\n return (\n \n \n {t('Discard')}\n \n void onSave()}\n data-testid=\"unsaved-changes-save\"\n >\n {t('Save Changes')}\n \n \n }\n >\n \n {description ??\n t(\n 'You have unsaved changes. Would you like to save them before leaving?'\n )}\n \n \n )\n}\n" }, { "path": "src/containers/Modal/UnsavedChangesModalContent/index.ts", "content": "export { UnsavedChangesModalContent } from './UnsavedChangesModalContent'\n" }, { "path": "src/containers/Modal/UpdateRequiredModalContent/index.js", "content": "import { useLingui } from '@lingui/react'\nimport { useCountDown } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { html } from 'htm/react'\n\nimport {\n ButtonWrapper,\n Container,\n Description,\n Timer,\n TimerTitle,\n TimerWrapper,\n Title\n} from './styles'\nimport { useModal } from '../../../context/ModalContext'\nimport { ButtonPrimary } from '../../../lib-react-components'\n\n/**\n * @param {{\n * onUpdate: () => void\n * }} props\n */\nexport const UpdateRequiredModalContent = ({ onUpdate }) => {\n const { closeModal } = useModal()\n const { i18n } = useLingui()\n\n const handleUpdateApp = () => {\n onUpdate?.()\n closeModal()\n }\n\n const expireTime = useCountDown({\n initialSeconds: 120,\n onFinish: handleUpdateApp\n })\n\n return html` <${Container}>\n <${Title}> ${i18n._('Update Required')} \n <${Description}>\n ${i18n._(\n 'Find out what exciting features and updates await you in this version.'\n )}\n \n\n <${TimerWrapper}>\n <${TimerTitle}> ${i18n._('App will restart in:')} \n <${Timer}> ${expireTime} \n \n\n <${ButtonWrapper}>\n <${ButtonPrimary} onClick=${handleUpdateApp}> ${i18n._('Update App')} \n \n `\n}\n" }, { "path": "src/containers/Modal/UpdateRequiredModalContent/styles.js", "content": "import styled from 'styled-components'\n\nexport const Container = styled.div`\n position: relative;\n display: flex;\n width: 380px;\n padding: 20px;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n\n border-radius: 10px;\n border: 1px solid ${({ theme }) => theme.colors.grey300.mode1};\n background: ${({ theme }) => theme.colors.grey400.mode1};\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\n`\n\nexport const Title = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n letter-spacing: -0.32px;\n`\n\nexport const Description = styled.span`\n color: ${({ theme }) => theme.colors.grey100.mode1};\n font-family: 'Inter';\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px */\n letter-spacing: -0.28px;\n`\n\nexport const ButtonWrapper = styled.div`\n display: flex;\n width: 100%;\n\n & > * {\n width: 100%;\n }\n`\n\nexport const TimerWrapper = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n`\n\nexport const TimerTitle = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 150%; /* 21px */\n letter-spacing: -0.28px;\n`\n\nexport const Timer = styled.span`\n color: ${({ theme }) => theme.colors.primary400.mode1};\n font-family: 'Inter';\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px */\n letter-spacing: -0.28px;\n`\n" }, { "path": "src/containers/Modal/UpdateRequiredModalContentV2/UpdateRequiredModalContentV2.styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = () => ({\n body: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing16}px`,\n width: '100%'\n },\n timerRow: {\n display: 'flex' as const,\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n justifyContent: 'space-between' as const,\n width: '100%'\n },\n footer: {\n display: 'flex' as const,\n justifyContent: 'flex-end' as const,\n width: '100%'\n }\n})\n" }, { "path": "src/containers/Modal/UpdateRequiredModalContentV2/UpdateRequiredModalContentV2.tsx", "content": "import React from 'react'\n\nimport { useCountDown } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { Button, Dialog, Text, useTheme } from '@tetherto/pearpass-lib-ui-kit'\n\nimport { createStyles } from './UpdateRequiredModalContentV2.styles'\nimport { useModal } from '../../../context/ModalContext'\nimport { useTranslation } from '../../../hooks/useTranslation'\n\nexport type UpdateRequiredModalContentV2Props = {\n onUpdate: () => void\n}\n\nexport const UpdateRequiredModalContentV2 = ({\n onUpdate\n}: UpdateRequiredModalContentV2Props) => {\n const { t } = useTranslation()\n const { closeModal } = useModal()\n const { theme } = useTheme()\n const styles = createStyles()\n\n const handleUpdateApp = () => {\n onUpdate?.()\n closeModal()\n }\n\n const expireTime = useCountDown({\n initialSeconds: 120,\n onFinish: handleUpdateApp\n })\n\n return (\n \n \n {t('Update App')}\n \n \n }\n >\n
\n \n {t(\n 'A newer version of PearPass is available. Please update to the latest version to continue using the app.'\n )}\n \n
\n \n {t('App will restart in:')}\n \n \n {expireTime}\n \n
\n
\n \n )\n}\n" }, { "path": "src/containers/Modal/UploadFilesModalContentV2/UploadFilesModalContentV2.styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = () => ({\n body: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing12}px`,\n width: '100%'\n }\n})\n" }, { "path": "src/containers/Modal/UploadFilesModalContentV2/UploadFilesModalContentV2.tsx", "content": "import React, { useState } from 'react'\n\nimport {\n Button,\n Dialog,\n UploadField\n} from '@tetherto/pearpass-lib-ui-kit'\nimport type { UploadedFile } from '@tetherto/pearpass-lib-ui-kit'\n\nimport { createStyles } from './UploadFilesModalContentV2.styles'\nimport { useModal } from '../../../context/ModalContext'\nimport { useTranslation } from '../../../hooks/useTranslation'\n\nexport type UploadFilesModalContentV2Props = {\n type?: 'file' | 'image'\n accepts?: string\n onFilesSelected?: (files: File[]) => void\n}\n\nexport const UploadFilesModalContentV2 = ({\n type = 'file',\n accepts,\n onFilesSelected\n}: UploadFilesModalContentV2Props) => {\n const { t } = useTranslation()\n const { closeModal } = useModal()\n const styles = createStyles()\n\n const [files, setFiles] = useState([])\n\n const isTypeImage = type === 'image'\n const acceptedFormats = accepts\n ? accepts.split(',').map((a) => a.trim()).filter(Boolean)\n : undefined\n\n const handleSubmit = () => {\n if (!files.length) return\n onFilesSelected?.(files.map((f) => f.file))\n closeModal()\n }\n\n return (\n \n \n {t('Discard')}\n \n \n {t('Add Item')}\n \n \n }\n >\n
\n \n
\n \n )\n}\n" }, { "path": "src/containers/Modal/UploadFilesModalContentV2/index.ts", "content": "export { UploadFilesModalContentV2 } from './UploadFilesModalContentV2'\nexport type { UploadFilesModalContentV2Props } from './UploadFilesModalContentV2'\n" }, { "path": "src/containers/Modal/UploadImageModalContent/index.js", "content": "import { useLingui } from '@lingui/react'\nimport { html } from 'htm/react'\n\nimport { ContentWrapper, HeaderWrapper } from './styles'\nimport { FileUploadContent } from '../../../components/FileUploadContent'\nimport { useModal } from '../../../context/ModalContext'\nimport { CommonFileIcon, ImageIcon } from '../../../lib-react-components'\nimport { ModalContent } from '../ModalContent'\n\n/**\n * @component\n * @param {Object} props\n * @param {'file'|'image'} props.type\n * @param {string} props.accepts\n * @param {boolean} [props.closeOnChange=true]\n * @returns {JSX.Element}\n */\n\nexport const UploadFilesModalContent = ({\n accepts,\n type,\n onFilesSelected,\n closeOnChange = true\n}) => {\n const isTypeImage = type === 'image'\n\n const { i18n } = useLingui()\n const { closeModal } = useModal()\n\n const handleFileChange = (files) => {\n if (files && files.length > 0) {\n onFilesSelected?.(files)\n }\n\n if (closeOnChange) {\n closeModal()\n }\n }\n\n return html`\n <${ModalContent}\n onClose=${closeModal}\n headerChildren=${html`\n <${HeaderWrapper}>\n ${isTypeImage\n ? html` <${ImageIcon} size=\"21\" />\n ${i18n._('Upload picture')}`\n : html`\n <${CommonFileIcon} size=\"21\" />\n ${i18n._('Upload file')}\n `}\n \n `}\n >\n <${ContentWrapper}>\n <${FileUploadContent}\n accepts=${accepts}\n isTypeImage=${isTypeImage}\n handleFileChange=${handleFileChange}\n />\n \n \n `\n}\n" }, { "path": "src/containers/Modal/UploadImageModalContent/styles.js", "content": "import styled from 'styled-components'\n\nexport const HeaderWrapper = styled.div`\n display: flex;\n gap: 8px;\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n font-weight: 500;\n`\n\nexport const ContentWrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n`\n" }, { "path": "src/containers/Modal/VaultPasswordFormModalContent/index.js", "content": "import { useMemo } from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { Validator } from '@tetherto/pear-apps-utils-validator'\nimport { html } from 'htm/react'\n\nimport { Description, Header, Title, UnlockVaultContainer } from './styles'\nimport { FormModalHeaderWrapper } from '../../../components/FormModalHeaderWrapper'\nimport { useLoadingContext } from '../../../context/LoadingContext'\nimport { useModal } from '../../../context/ModalContext'\nimport {\n ButtonPrimary,\n PearPassPasswordField\n} from '../../../lib-react-components'\nimport { logger } from '../../../utils/logger'\nimport { ModalContent } from '../ModalContent'\n\n/**\n *\n * @param {Object} props\n * @param {Object} props.vault\n * @param {string} props.vault.id\n * @param {string} [props.vault.name]\n * @param {(password: string) => Promise | void} [props.onSubmit]\n */\nexport const VaultPasswordFormModalContent = ({ vault, onSubmit }) => {\n const { i18n } = useLingui()\n const { closeModal } = useModal()\n const { setIsLoading } = useLoadingContext()\n\n const schema = Validator.object({\n password: Validator.string().required(i18n._('Password is required'))\n })\n\n const { register, handleSubmit, setErrors } = useForm({\n initialValues: {\n password: ''\n },\n validate: (values) => schema.validate(values)\n })\n\n const submit = async (values) => {\n if (!vault.id) {\n return\n }\n\n try {\n setIsLoading(true)\n\n await onSubmit?.(values.password)\n\n setIsLoading(false)\n } catch (error) {\n logger.error('VaultPasswordFormModalContent', error)\n\n setIsLoading(false)\n\n setErrors({\n password: i18n._('Invalid password')\n })\n }\n }\n\n const titles = useMemo(\n () => ({\n title: i18n._('Enter Your Vault Password'),\n description: i18n._(\n 'Unlock your {vaultName} Vault to access your stored passwords.',\n {\n vaultName: vault.name ?? vault.id\n }\n )\n }),\n []\n )\n\n return html` <${ModalContent}\n onClose=${closeModal}\n headerChildren=${html`\n <${FormModalHeaderWrapper}>\n <${Header}>\n <${Title}> ${titles.title} \n <${Description}> ${titles.description}\n \n \n `}\n >\n <${UnlockVaultContainer} onSubmit=${handleSubmit(submit)}>\n <${PearPassPasswordField} ...${register('password')} />\n\n <${ButtonPrimary} type=\"submit\"> ${i18n._('Unlock Vault')} \n \n `\n}\n" }, { "path": "src/containers/Modal/VaultPasswordFormModalContent/styles.js", "content": "import styled from 'styled-components'\n\nexport const Header = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n`\nexport const Title = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nexport const Description = styled.span`\n color: ${({ theme }) => theme.colors.grey100.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\nexport const VaultsContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px;\n`\nexport const UnlockVaultContainer = styled.form`\n display: flex;\n flex-direction: column;\n align-items: self-start;\n gap: 20px;\n`\n" }, { "path": "src/containers/Modal/index.js", "content": "import { ModalWrapper } from './styles'\n\nexport { ModalWrapper }\n" }, { "path": "src/containers/Modal/styles.js", "content": "import styled from 'styled-components'\n\nexport const ModalWrapper = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 500;\n`\n\nexport const DropdownsWrapper = styled.div`\n display: flex;\n gap: 20px;\n`\n" }, { "path": "src/containers/MultiSelectActionsBar/MultiSelectActionsBar.styles.ts", "content": "import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\nimport { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nimport { HEADER_MIN_HEIGHT } from '../../constants/layout'\n\nexport const createStyles = (colors: ThemeColors) => ({\n container: {\n display: 'flex' as const,\n alignItems: 'center' as const,\n justifyContent: 'space-between' as const,\n gap: `${rawTokens.spacing8}px`,\n height: `${HEADER_MIN_HEIGHT}px`,\n paddingInline: `${rawTokens.spacing12}px`,\n borderBottom: `1px solid ${colors.colorBorderPrimary}`,\n backgroundColor: colors.colorSurfacePrimary,\n boxSizing: 'border-box' as const,\n flexShrink: 0\n },\n\n label: {\n overflow: 'hidden' as const,\n textOverflow: 'ellipsis' as const,\n whiteSpace: 'nowrap' as const,\n minWidth: 0\n },\n\n actions: {\n display: 'flex' as const,\n alignItems: 'center' as const,\n gap: `${rawTokens.spacing4}px`,\n flexShrink: 0\n },\n\n buttonWrapper: {\n position: 'relative' as const,\n display: 'inline-flex' as const\n },\n\n tooltip: {\n // Right-anchor so the tooltip grows leftward into the screen — the actions\n // bar sits at the right edge, and centered tooltips overflow the viewport.\n position: 'absolute' as const,\n top: '100%',\n right: 0,\n transform: 'translateY(6px)',\n zIndex: 10,\n pointerEvents: 'none' as const,\n whiteSpace: 'nowrap' as const\n },\n\n destructiveDivider: {\n width: '1px',\n height: '12px',\n backgroundColor: colors.colorBorderPrimary,\n marginInline: `${rawTokens.spacing4}px`,\n flexShrink: 0\n }\n})\n" }, { "path": "src/containers/MultiSelectActionsBar/MultiSelectActionsBar.test.tsx", "content": "import React from 'react'\n\nimport '@testing-library/jest-dom'\nimport { fireEvent, render, screen } from '@testing-library/react'\n\njest.mock('../../hooks/useTranslation', () => ({\n useTranslation: () => ({\n t: (key: string, values?: Record) => {\n if (!values) return key\n return Object.entries(values).reduce(\n (acc, [k, v]) => acc.replace(`{${k}}`, String(v)),\n key\n )\n }\n })\n}))\n\njest.mock('@tetherto/pearpass-lib-ui-kit', () => {\n const React = require('react')\n return {\n useTheme: () => ({\n theme: {\n colors: {\n colorTextPrimary: '#fff',\n colorBorderPrimary: '#222',\n colorSurfacePrimary: '#000'\n }\n }\n }),\n rawTokens: new Proxy({}, { get: () => 0 }),\n Button: ({\n children,\n onClick,\n disabled,\n ...rest\n }: {\n children?: React.ReactNode\n onClick?: () => void\n disabled?: boolean\n [key: string]: unknown\n }) =>\n React.createElement(\n 'button',\n { type: 'button', onClick, disabled, ...rest },\n children\n ),\n Snackbar: ({ text, testID }: { text: string; testID?: string }) =>\n React.createElement(\n 'div',\n { 'data-testid': testID ?? 'snackbar' },\n text\n ),\n Text: ({\n children,\n ...rest\n }: {\n children?: React.ReactNode\n [key: string]: unknown\n }) => React.createElement('span', { ...rest }, children)\n }\n})\n\njest.mock('@tetherto/pearpass-lib-ui-kit/icons', () => {\n const React = require('react')\n const Icon = (name: string) => () =>\n React.createElement('span', { 'data-icon': name })\n return {\n DriveFileMoveOutlined: Icon('DriveFileMoveOutlined'),\n StarFilled: Icon('StarFilled'),\n StarOutlined: Icon('StarOutlined'),\n TrashOutlined: Icon('TrashOutlined')\n }\n})\n\nimport { MultiSelectActionsBar } from './MultiSelectActionsBar'\n\ndescribe('MultiSelectActionsBar', () => {\n const baseProps = {\n selectedCount: 3,\n allSelectedFavorited: false,\n canMove: true,\n onMove: jest.fn(),\n onToggleFavorite: jest.fn(),\n onDelete: jest.fn()\n }\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n it('renders count label and all three action buttons', () => {\n render()\n expect(screen.getByTestId('multi-select-count').textContent).toBe(\n '3 Items selected'\n )\n expect(screen.getByTestId('multi-select-move')).toBeInTheDocument()\n expect(screen.getByTestId('multi-select-favorite')).toBeInTheDocument()\n expect(screen.getByTestId('multi-select-delete')).toBeInTheDocument()\n })\n\n it('uses singular label when exactly one item is selected', () => {\n render()\n expect(screen.getByTestId('multi-select-count').textContent).toBe(\n '1 Item selected'\n )\n })\n\n it('disables all action buttons when no records are selected', () => {\n render()\n expect(screen.getByTestId('multi-select-move')).toBeDisabled()\n expect(screen.getByTestId('multi-select-favorite')).toBeDisabled()\n expect(screen.getByTestId('multi-select-delete')).toBeDisabled()\n })\n\n it('disables only the move button when no folders exist', () => {\n render()\n expect(screen.getByTestId('multi-select-move')).toBeDisabled()\n expect(screen.getByTestId('multi-select-favorite')).not.toBeDisabled()\n expect(screen.getByTestId('multi-select-delete')).not.toBeDisabled()\n })\n\n it('invokes the matching handlers when action buttons are clicked', () => {\n const onMove = jest.fn()\n const onToggleFavorite = jest.fn()\n const onDelete = jest.fn()\n render(\n \n )\n fireEvent.click(screen.getByTestId('multi-select-move'))\n fireEvent.click(screen.getByTestId('multi-select-favorite'))\n fireEvent.click(screen.getByTestId('multi-select-delete'))\n expect(onMove).toHaveBeenCalledTimes(1)\n expect(onToggleFavorite).toHaveBeenCalledTimes(1)\n expect(onDelete).toHaveBeenCalledTimes(1)\n })\n\n it('shows a snackbar tooltip on hover over the move button', () => {\n render()\n expect(\n screen.queryByTestId('multi-select-move-tooltip')\n ).not.toBeInTheDocument()\n\n const move = screen.getByTestId('multi-select-move')\n const wrapper = move.parentElement as HTMLElement\n fireEvent.mouseEnter(wrapper)\n expect(screen.getByTestId('multi-select-move-tooltip').textContent).toBe(\n 'Move to Another Folder'\n )\n\n fireEvent.mouseLeave(wrapper)\n expect(\n screen.queryByTestId('multi-select-move-tooltip')\n ).not.toBeInTheDocument()\n })\n\n it('swaps favorite tooltip wording based on allSelectedFavorited', () => {\n const { rerender } = render()\n const wrapper = screen.getByTestId('multi-select-favorite')\n .parentElement as HTMLElement\n fireEvent.mouseEnter(wrapper)\n expect(screen.getByTestId('multi-select-favorite-tooltip').textContent).toBe(\n 'Add to Favorites'\n )\n fireEvent.mouseLeave(wrapper)\n\n rerender()\n const wrapper2 = screen.getByTestId('multi-select-favorite')\n .parentElement as HTMLElement\n fireEvent.mouseEnter(wrapper2)\n expect(\n screen.getByTestId('multi-select-favorite-tooltip').textContent\n ).toBe('Remove from Favorites')\n })\n})\n" }, { "path": "src/containers/MultiSelectActionsBar/MultiSelectActionsBar.tsx", "content": "import React, { useState } from 'react'\n\nimport { Button, Snackbar, Text, useTheme } from '@tetherto/pearpass-lib-ui-kit'\nimport {\n DriveFileMoveOutlined,\n StarFilled,\n StarOutlined,\n TrashOutlined\n} from '@tetherto/pearpass-lib-ui-kit/icons'\n\nimport { createStyles } from './MultiSelectActionsBar.styles'\nimport { useTranslation } from '../../hooks/useTranslation'\n\ntype MultiSelectActionsBarProps = {\n selectedCount: number\n allSelectedFavorited: boolean\n canMove: boolean\n onMove: () => void\n onToggleFavorite: () => void\n onDelete: () => void\n}\n\ntype HoverButtonProps = {\n tooltip: string\n tooltipTestId: string\n children: React.ReactNode\n wrapperStyle: React.CSSProperties\n tooltipStyle: React.CSSProperties\n}\n\nconst HoverButton = ({\n tooltip,\n tooltipTestId,\n children,\n wrapperStyle,\n tooltipStyle\n}: HoverButtonProps) => {\n const [isHovered, setIsHovered] = useState(false)\n\n return (\n setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n onFocus={() => setIsHovered(true)}\n onBlur={() => setIsHovered(false)}\n >\n {children}\n {isHovered && (\n
\n \n
\n )}\n \n )\n}\n\nexport const MultiSelectActionsBar = ({\n selectedCount,\n allSelectedFavorited,\n canMove,\n onMove,\n onToggleFavorite,\n onDelete\n}: MultiSelectActionsBarProps) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const styles = createStyles(theme.colors)\n\n const hasSelection = selectedCount > 0\n const isMoveDisabled = !hasSelection || !canMove\n const isFavoriteDisabled = !hasSelection\n const isDeleteDisabled = !hasSelection\n const FavoriteIcon = allSelectedFavorited ? StarFilled : StarOutlined\n\n const iconColor = (disabled: boolean) =>\n disabled ? theme.colors.colorTextDisabled : theme.colors.colorTextPrimary\n\n const moveIconStyle = { color: iconColor(isMoveDisabled) }\n const favoriteIconStyle = { color: iconColor(isFavoriteDisabled) }\n const deleteIconStyle = { color: iconColor(isDeleteDisabled) }\n\n const selectedLabel =\n selectedCount === 1\n ? t('1 Item selected')\n : t('{count} Items selected', { count: selectedCount })\n\n const favoriteLabel = allSelectedFavorited\n ? t('Remove from Favorites')\n : t('Add to Favorites')\n\n return (\n
\n
\n \n {selectedLabel}\n \n
\n\n
\n \n }\n />\n \n\n \n }\n />\n \n\n
\n\n }\n />\n
\n
\n )\n}\n" }, { "path": "src/containers/MultiSelectActionsBar/index.ts", "content": "export { MultiSelectActionsBar } from './MultiSelectActionsBar'\n" }, { "path": "src/containers/PassPhrase/PassPhraseSettings.js", "content": "import { useLingui } from '@lingui/react'\nimport { PASSPHRASE_TYPE_OPTIONS } from '@tetherto/pearpass-lib-constants'\nimport { html } from 'htm/react'\n\nimport {\n PassPraseSettingsContainer,\n PassPraseSettingsRandomWordContainer,\n PassPraseSettingsRandomWordText,\n SwitchWrapper\n} from './styles'\nimport { RadioSelect } from '../../components/RadioSelect'\nimport { SwitchWithLabel } from '../../components/SwitchWithLabel'\n\n/**\n * @param {{\n * selectedType: number,\n * setSelectedType: (value: number) => void,\n * withRandomWord: boolean,\n * setWithRandomWord: (value: boolean) => void,\n * isDisabled: boolean,\n * testId?: string\n * }} props\n */\nexport const PassPhraseSettings = ({\n selectedType,\n setSelectedType,\n withRandomWord,\n setWithRandomWord,\n isDisabled,\n testId\n}) => {\n const { i18n } = useLingui()\n\n return html`\n <${PassPraseSettingsContainer} data-testid=${testId}>\n <${RadioSelect}\n title=${i18n._('Type')}\n options=${PASSPHRASE_TYPE_OPTIONS.map((option) => ({\n label: i18n._('{count} words', { count: option.value }),\n value: option.value\n }))}\n selectedOption=${selectedType}\n onChange=${(value) => setSelectedType(value)}\n optionStyle=${{ fontSize: 12, fontWeight: 400 }}\n titleStyle=${{ fontSize: 12, marginBottom: 5, fontWeight: 500 }}\n disabled=${isDisabled}\n />\n\n <${PassPraseSettingsRandomWordContainer}>\n <${PassPraseSettingsRandomWordText}>${i18n._('+1 random word')}\n <${SwitchWrapper}>\n <${SwitchWithLabel}\n testId=\"passphrase-random-word-toggle\"\n isOn=${withRandomWord}\n onChange=${(value) => setWithRandomWord(value)}\n disabled=${isDisabled}\n />\n \n \n \n `\n}\n" }, { "path": "src/containers/PassPhrase/PassPhraseV2.styles.ts", "content": "import { rawTokens, type ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = (\n colors: ThemeColors,\n { hasError }: { hasError: boolean }\n) => ({\n section: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing12}px`,\n width: '100%'\n },\n groupContainer: {\n borderWidth: 1,\n borderStyle: 'solid' as const,\n borderRadius: `${rawTokens.spacing8}px`,\n overflow: 'hidden' as const,\n backgroundColor: colors.colorSurfacePrimary,\n borderColor: hasError\n ? colors.colorSurfaceDestructiveElevated\n : colors.colorBorderPrimary\n },\n optionSection: {\n padding: `${rawTokens.spacing12}px`,\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing12}px`\n },\n headerRow: {\n display: 'flex' as const,\n flexDirection: 'row' as const,\n alignItems: 'flex-start' as const,\n gap: `${rawTokens.spacing12}px`\n },\n headerInfo: { flex: 1 },\n grid: {\n display: 'flex' as const,\n flexDirection: 'row' as const,\n flexWrap: 'wrap' as const,\n gap: `${rawTokens.spacing12}px`\n },\n wordInputWrapper: {\n width: `calc(50% - ${rawTokens.spacing12 / 2}px)`\n },\n optionSectionWithBorder: {\n borderTop: `1px solid ${colors.colorBorderPrimary}`\n },\n copyIconWrapper:{\n display: \"flex\",\n justifyContent: 'space-between',\n alignItems: \"center\"\n }\n})\n" }, { "path": "src/containers/PassPhrase/PassPhraseV2.tsx", "content": "import React, { useEffect, useRef, useState } from 'react'\n\nimport {\n DEFAULT_SELECTED_TYPE,\n PASSPHRASE_WORD_COUNTS,\n VALID_WORD_COUNTS\n} from '@tetherto/pearpass-lib-constants'\nimport {\n Button,\n FieldError,\n InputField,\n Radio,\n useTheme,\n Text\n} from '@tetherto/pearpass-lib-ui-kit'\nimport {\n ContentCopy,\n ContentPaste\n} from '@tetherto/pearpass-lib-ui-kit/icons'\n\nimport { useCopyToClipboard } from '../../hooks/useCopyToClipboard.electron'\nimport { usePasteFromClipboard } from '../../hooks/usePasteFromClipboard'\nimport { useToast } from '../../context/ToastContext'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { createStyles } from './PassPhraseV2.styles'\n\ntype PassPhraseV2Props = {\n error?: string\n isCreateOrEdit?: boolean\n onChange?: (value: string) => void\n value?: string\n}\n\nconst parsePassphraseText = (text: string): string[] =>\n text\n .trim()\n .split(/[-\\s]+/)\n .map((word) => word.trim())\n .filter((word) => word.length > 0)\n\nconst isValidRange = (wordCount: number): boolean =>\n !wordCount || VALID_WORD_COUNTS.includes(wordCount)\n\nconst getWordLabel = (index: number): string => {\n const position = index + 1\n const remainder10 = position % 10\n const remainder100 = position % 100\n\n let suffix = 'th'\n if (remainder10 === 1 && remainder100 !== 11) suffix = 'st'\n else if (remainder10 === 2 && remainder100 !== 12) suffix = 'nd'\n else if (remainder10 === 3 && remainder100 !== 13) suffix = 'rd'\n\n return `${position}${suffix} Word`\n}\n\nconst getSelectedTypeForWords = (wordCount: number): number => {\n if (\n wordCount === PASSPHRASE_WORD_COUNTS.STANDARD_24 ||\n wordCount === PASSPHRASE_WORD_COUNTS.WITH_RANDOM_24\n ) {\n return PASSPHRASE_WORD_COUNTS.STANDARD_24\n }\n if (\n wordCount === PASSPHRASE_WORD_COUNTS.STANDARD_12 ||\n wordCount === PASSPHRASE_WORD_COUNTS.WITH_RANDOM_12\n ) {\n return PASSPHRASE_WORD_COUNTS.STANDARD_12\n }\n return DEFAULT_SELECTED_TYPE\n}\n\nexport const PassPhraseV2 = ({\n error,\n isCreateOrEdit = false,\n onChange,\n value = ''\n}: PassPhraseV2Props) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const { copyToClipboard } = useCopyToClipboard()\n const { pasteFromClipboard } = usePasteFromClipboard()\n const { setToast } = useToast()\n const lastCommittedValueRef = useRef(value)\n\n const initialWords = parsePassphraseText(value)\n\n const [selectedType, setSelectedType] = useState(\n getSelectedTypeForWords(initialWords.length)\n )\n const [passphraseWords, setPassphraseWords] = useState(initialWords)\n\n const detectAndUpdateSettings = (words: string[]) => {\n setSelectedType(getSelectedTypeForWords(words.length))\n }\n\n useEffect(() => {\n if (value === lastCommittedValueRef.current) return\n if (!value?.trim().length) {\n setPassphraseWords([])\n lastCommittedValueRef.current = value\n return\n }\n const words = parsePassphraseText(value)\n setPassphraseWords(words)\n detectAndUpdateSettings(words)\n lastCommittedValueRef.current = value\n }, [value])\n\n const handlePasteFromClipboard = async () => {\n const pastedText = await pasteFromClipboard()\n if (!pastedText) return\n\n const words = parsePassphraseText(pastedText)\n\n if (!isValidRange(words.length)) {\n setToast({ message: t('Only 12 or 24 words are allowed') })\n return\n }\n\n setPassphraseWords(words)\n detectAndUpdateSettings(words)\n lastCommittedValueRef.current = pastedText\n onChange?.(pastedText)\n }\n\n const expandedWords = Array.from(\n { length: Math.max(selectedType, passphraseWords.length || selectedType) },\n (_, index) => passphraseWords[index] ?? ''\n )\n\n const handleWordChange = (index: number, nextValue: string) => {\n const sanitized = nextValue.replace(/\\s+/g, '').trim()\n const nextWords = [...expandedWords]\n nextWords[index] = sanitized\n setPassphraseWords(nextWords)\n\n const serialized = nextWords.filter(Boolean).join(' ')\n lastCommittedValueRef.current = serialized\n onChange?.(serialized)\n }\n\n const handleTypeSelect = (wordCount: number) => {\n setSelectedType(wordCount)\n\n if (passphraseWords.length > wordCount) {\n const nextWords = passphraseWords.slice(0, wordCount)\n setPassphraseWords(nextWords)\n const serialized = nextWords.filter(Boolean).join(' ')\n lastCommittedValueRef.current = serialized\n onChange?.(serialized)\n }\n }\n\n const optionsToRender = isCreateOrEdit\n ? [PASSPHRASE_WORD_COUNTS.STANDARD_12, PASSPHRASE_WORD_COUNTS.STANDARD_24]\n : [selectedType]\n const detailWords = passphraseWords.length\n ? passphraseWords\n : parsePassphraseText(value)\n\n const styles = createStyles(theme.colors, { hasError: !!error })\n\n return (\n
\n
\n {!isCreateOrEdit ? (\n
\n
\n {t(`Recovery Phrase`)}\n \n }\n onClick={() => {\n copyToClipboard(value)\n }}\n />\n\n
\n
\n {detailWords.map((word, inputIndex) => (\n \n \n
\n ))}\n
\n
\n ) : (\n optionsToRender.map((wordCount: number, index: number) => {\n const isSelected = selectedType === wordCount\n const description = t(\n `Paste or enter ${wordCount} words. Optional +1 works only when pasted`\n )\n const borderStyle: React.CSSProperties =\n index > 0 ? styles.optionSectionWithBorder : {}\n\n return (\n \n
\n
\n handleTypeSelect(wordCount)\n : undefined\n }\n disabled={!isCreateOrEdit}\n />\n
\n\n \n ) : (\n \n )\n }\n onClick={() => {\n if (isCreateOrEdit) {\n handleTypeSelect(wordCount)\n void handlePasteFromClipboard()\n return\n }\n copyToClipboard(value)\n }}\n />\n
\n\n {isSelected ? (\n
\n {expandedWords.map((word, inputIndex) => (\n \n \n handleWordChange(inputIndex, e.target.value)\n }\n readOnly={!isCreateOrEdit}\n testID={`passphrase-word-input-${inputIndex}`}\n />\n
\n ))}\n
\n ) : null}\n
\n )\n })\n )}\n \n\n {!!error?.length && {error}}\n \n )\n}\n" }, { "path": "src/containers/PassPhrase/__tests__/PassPhrase.test.js", "content": "import React from 'react'\nimport '@testing-library/jest-dom'\n\nimport { render, screen, fireEvent, waitFor } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { PassPhrase } from '../'\n\n// i18n returns key\njest.mock('@lingui/react', () => ({\n useLingui: () => ({ i18n: { _: (s) => s } })\n}))\n\n// Styles\njest.mock('../styles', () => ({\n Container: ({ children }) =>
{children}
,\n PassPhraseHeader: ({ children }) => (\n
{children}
\n ),\n HeaderText: ({ children }) =>

{children}

,\n PasteButton: ({ children, onClick, type, ...props }) => (\n \n ),\n CopyPasteText: ({ children }) => (\n {children}\n ),\n PassPhraseContainer: ({ children }) => (\n
{children}
\n ),\n ErrorContainer: ({ children }) => (\n
{children}
\n ),\n ErrorText: ({ children }) =>
{children}
\n}))\n// Icons and shared components\njest.mock('../../../lib-react-components', () => ({\n CopyIcon: () => ,\n PasteIcon: () => ,\n PassPhraseIcon: () => ,\n ErrorIcon: () => \n}))\n\n// Badge item capture\nconst mockBadgeCalls = []\njest.mock('../../../components/BadgeTextItem', () => ({\n BadgeTextItem: (props) => {\n mockBadgeCalls.push(props)\n return (\n
\n #{props.count}:{props.word}\n
\n )\n }\n}))\n\n// PassPhraseSettings capture\nconst mockSettingsCalls = []\njest.mock('../PassPhraseSettings', () => ({\n PassPhraseSettings: (props) => {\n mockSettingsCalls.push(props)\n return
\n }\n}))\n\n// Hooks\nconst mockCopy = jest.fn()\njest.mock('../../../hooks/useCopyToClipboard.electron', () => ({\n useCopyToClipboard: () => ({ copyToClipboard: mockCopy })\n}))\n\nconst mockPaste = jest.fn()\njest.mock('../../../hooks/usePasteFromClipboard', () => ({\n usePasteFromClipboard: () => ({ pasteFromClipboard: mockPaste })\n}))\n\nconst mockSetToast = jest.fn()\njest.mock('../../../context/ToastContext', () => ({\n useToast: () => ({ setToast: mockSetToast })\n}))\n\ndescribe('PassPhrase (container)', () => {\n const renderComponent = (props = {}) =>\n render(\n \n \n \n )\n\n beforeEach(() => {\n mockBadgeCalls.length = 0\n mockSettingsCalls.length = 0\n mockCopy.mockReset()\n mockPaste.mockReset()\n mockSetToast.mockReset()\n })\n\n test('renders header and no words initially', () => {\n renderComponent()\n expect(screen.getByTestId('pp-icon')).toBeInTheDocument()\n expect(screen.getByTestId('title')).toHaveTextContent('Recovery phrase')\n expect(screen.getByTestId('words').children.length).toBe(0)\n })\n\n test('renders BadgeTextItem for each word in value', () => {\n renderComponent({ value: 'alpha@ !beta ,.gamma' })\n expect(screen.getAllByTestId('badge-item')).toHaveLength(3)\n expect(mockBadgeCalls.map((c) => c.word)).toEqual([\n 'alpha@',\n '!beta',\n ',.gamma'\n ])\n expect(mockBadgeCalls.map((c) => c.count)).toEqual([1, 2, 3])\n })\n\n test('copy button copies when not create/edit', () => {\n renderComponent({ value: 'one two' })\n fireEvent.click(screen.getByTestId('passphrase-button-copy'))\n expect(mockCopy).toHaveBeenCalledWith('one two')\n })\n\n test('paste button pastes, updates list, and calls onChange in create/edit', async () => {\n const onChange = jest.fn()\n const value =\n 'fo1o-1bar-3bam,.z-q#ux-quux-corge-gra.!ult-garpl&&!@y-waldo-!red-pl@ugh-%@xyzzy'\n mockPaste.mockResolvedValueOnce(value) // 12 words\n renderComponent({ isCreateOrEdit: true, onChange, value: '' })\n\n fireEvent.click(screen.getByTestId('passphrase-button-paste'))\n\n await waitFor(() => expect(onChange).toHaveBeenCalledWith(value))\n expect(mockPaste).toHaveBeenCalledTimes(1)\n // After paste we should have badges for words\n\n const splittedVal = value.split('-')\n expect(mockBadgeCalls.length).toBe(splittedVal.length)\n mockBadgeCalls.forEach((c) => {\n expect(c.word).toBe(splittedVal[c.count - 1])\n })\n })\n\n test('renders settings in create/edit, disabled when words present', async () => {\n mockPaste.mockResolvedValueOnce('a b c d e f g h i j k l') // 12 words\n renderComponent({ isCreateOrEdit: true })\n\n // Initially with zero words: settings shown and not disabled\n expect(screen.getByTestId('settings')).toBeInTheDocument()\n expect(mockSettingsCalls[0].isDisabled).toBe(false)\n\n fireEvent.click(screen.getByTestId('passphrase-button-paste'))\n await waitFor(() => expect(mockBadgeCalls.length).toBe(12))\n\n const lastSettings = mockSettingsCalls[mockSettingsCalls.length - 1]\n expect(lastSettings.isDisabled).toBe(true)\n })\n\n test('shows error text when error prop is provided', () => {\n renderComponent({ error: 'Oops!' })\n expect(screen.getByTestId('error-text')).toHaveTextContent('Oops!')\n })\n\n test('13 words: switch is on and radio selected to 12', () => {\n const thirteen =\n 'one two three four five six seven eight nine ten eleven twelve rand'\n renderComponent({ isCreateOrEdit: true, value: thirteen })\n\n // Last settings props reflect current state\n const last = mockSettingsCalls[mockSettingsCalls.length - 1]\n expect(last.withRandomWord).toBe(true)\n expect(last.selectedType).toBe(12)\n })\n\n test('25 words: switch is on and radio selected to 24', () => {\n const twentyFive = 'a-b-c-d-!-@-g-h-i-j-k-l-(-)-o-p-q-r-s-3-u-v-w-x-y'\n\n renderComponent({ isCreateOrEdit: true, value: twentyFive })\n\n const last = mockSettingsCalls[mockSettingsCalls.length - 1]\n expect(last.withRandomWord).toBe(true)\n expect(last.selectedType).toBe(24)\n })\n\n test('after paste: settings are disabled', async () => {\n mockPaste.mockResolvedValueOnce(\n 'one two three four five six seven eight nine ten eleven twelve'\n )\n renderComponent({ isCreateOrEdit: true })\n fireEvent.click(screen.getByTestId('passphrase-button-paste'))\n await waitFor(() => expect(mockBadgeCalls.length).toBe(12))\n const last = mockSettingsCalls[mockSettingsCalls.length - 1]\n expect(last.isDisabled).toBe(true)\n })\n\n test('shows error toast when pasting invalid word count', async () => {\n const onChange = jest.fn()\n mockPaste.mockResolvedValueOnce('one-two-three-four-five')\n renderComponent({ isCreateOrEdit: true, onChange, value: '' })\n\n fireEvent.click(screen.getByTestId('passphrase-button-paste'))\n\n await waitFor(() => {\n expect(mockSetToast).toHaveBeenCalledWith({\n message: 'Only 12 or 24 words are allowed',\n icon: expect.anything()\n })\n })\n\n expect(onChange).not.toHaveBeenCalled()\n expect(mockBadgeCalls.length).toBe(0)\n })\n})\n" }, { "path": "src/containers/PassPhrase/__tests__/PassPhraseSettings.test.js", "content": "import React from 'react'\n\nimport { render, screen, fireEvent } from '@testing-library/react'\nimport { PASSPHRASE_WORD_COUNTS } from '@tetherto/pearpass-lib-constants'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport '@testing-library/jest-dom'\n\nimport { PassPhraseSettings } from '../PassPhraseSettings'\n\njest.mock('../styles', () => ({\n PassPraseSettingsContainer: ({ children }) => (\n
{children}
\n ),\n PassPraseSettingsRandomWordContainer: ({ children }) => (\n
{children}
\n ),\n PassPraseSettingsRandomWordText: ({ children }) => (\n
{children}
\n ),\n SwitchWrapper: ({ children }) => (\n
{children}
\n )\n}))\n\n// Mock i18n to handle translation with interpolation\njest.mock('@lingui/react', () => ({\n useLingui: () => ({\n i18n: {\n _: (key, values) => {\n if (values?.count !== undefined) {\n return `${values.count} words`\n }\n return key\n }\n }\n })\n}))\n\n// Capture props passed into children\nconst mockRadioSelectSpy = jest.fn()\nconst mockSwitchWithLabelSpy = jest.fn()\n\njest.mock('../../../components/RadioSelect', () => ({\n RadioSelect: (props) => {\n mockRadioSelectSpy(props)\n return (\n \n )\n }\n}))\n\njest.mock('../../../components/SwitchWithLabel', () => ({\n SwitchWithLabel: (props) => {\n mockSwitchWithLabelSpy(props)\n return (\n props.onChange(true)}\n disabled={props.disabled}\n >\n toggle\n \n )\n }\n}))\n\ndescribe('PassPhraseSettings', () => {\n const renderComponent = (overrideProps = {}) => {\n const defaultProps = {\n selectedType: PASSPHRASE_WORD_COUNTS.STANDARD_12,\n setSelectedType: jest.fn(),\n withRandomWord: false,\n setWithRandomWord: jest.fn(),\n isDisabled: false\n }\n\n const props = { ...defaultProps, ...overrideProps }\n\n const utils = render(\n \n \n \n )\n\n return { ...utils, props }\n }\n\n beforeEach(() => {\n mockRadioSelectSpy.mockClear()\n mockSwitchWithLabelSpy.mockClear()\n })\n\n test('renders and passes correct props to RadioSelect', () => {\n const { props } = renderComponent()\n\n const radio = screen.getByTestId('radio-select')\n expect(radio).toBeInTheDocument()\n expect(radio).toHaveTextContent('Type')\n\n const passed = mockRadioSelectSpy.mock.calls[0][0]\n expect(passed.selectedOption).toBe(props.selectedType)\n expect(passed.disabled).toBe(false)\n expect(passed.options.map((o) => o.value)).toEqual([\n PASSPHRASE_WORD_COUNTS.STANDARD_12,\n PASSPHRASE_WORD_COUNTS.STANDARD_24\n ])\n expect(passed.options.map((o) => o.label)).toEqual([\n `${PASSPHRASE_WORD_COUNTS.STANDARD_12} words`,\n `${PASSPHRASE_WORD_COUNTS.STANDARD_24} words`\n ])\n })\n\n test('invokes setSelectedType when RadioSelect triggers onChange', () => {\n const { props } = renderComponent()\n\n fireEvent.click(screen.getByTestId('radio-select'))\n expect(props.setSelectedType).toHaveBeenCalledWith(\n PASSPHRASE_WORD_COUNTS.STANDARD_24\n )\n })\n\n test('renders and toggles SwitchWithLabel', () => {\n const { props } = renderComponent({ withRandomWord: false })\n\n const passed = mockSwitchWithLabelSpy.mock.calls[0][0]\n expect(passed.isOn).toBe(false)\n expect(passed.disabled).toBe(false)\n\n fireEvent.click(screen.getByTestId('switch-with-label'))\n expect(props.setWithRandomWord).toHaveBeenCalledWith(true)\n })\n\n test('forwards disabled to children', () => {\n renderComponent({ isDisabled: true })\n\n const radioProps = mockRadioSelectSpy.mock.calls[0][0]\n const switchProps = mockSwitchWithLabelSpy.mock.calls[0][0]\n expect(radioProps.disabled).toBe(true)\n expect(switchProps.disabled).toBe(true)\n })\n})\n" }, { "path": "src/containers/PassPhrase/index.js", "content": "import { useState, useEffect } from 'react'\n\nimport {\n PASSPHRASE_WORD_COUNTS,\n VALID_WORD_COUNTS,\n DEFAULT_SELECTED_TYPE\n} from '@tetherto/pearpass-lib-constants'\nimport { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport { html } from 'htm/react'\n\nimport { PassPhraseSettings } from './PassPhraseSettings'\nimport {\n Container,\n PassPhraseHeader,\n HeaderText,\n PasteButton,\n CopyPasteText,\n PassPhraseContainer,\n ErrorContainer,\n ErrorText\n} from './styles'\nimport { BadgeTextItem } from '../../components/BadgeTextItem'\nimport { CopyButton } from '../../components/CopyButton'\nimport { useToast } from '../../context/ToastContext'\nimport { usePasteFromClipboard } from '../../hooks/usePasteFromClipboard'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport {\n PassPhraseIcon,\n ErrorIcon,\n PasteIcon\n} from '../../lib-react-components'\n/**\n * @param {{\n * isCreateOrEdit: boolean,\n * onChange: (value: string) => void,\n * value: string,\n * error: string,\n * testId?: string\n * }} props\n */\n\nexport const PassPhrase = ({\n isCreateOrEdit,\n onChange,\n value,\n error,\n testId\n}) => {\n const { t } = useTranslation()\n const { setToast } = useToast()\n const [selectedType, setSelectedType] = useState(DEFAULT_SELECTED_TYPE)\n const [withRandomWord, setWithRandomWord] = useState(false)\n const [passphraseWords, setPassphraseWords] = useState([])\n\n const { pasteFromClipboard } = usePasteFromClipboard()\n\n const parsePassphraseText = (text) =>\n text\n .trim()\n .split(/[-\\s]+/)\n .map((word) => word.trim())\n .filter((word) => word.length > 0)\n\n const detectAndUpdateSettings = (words) => {\n const wordCount = words.length\n if (\n wordCount === PASSPHRASE_WORD_COUNTS.STANDARD_12 ||\n wordCount === PASSPHRASE_WORD_COUNTS.WITH_RANDOM_12\n ) {\n setSelectedType(PASSPHRASE_WORD_COUNTS.STANDARD_12)\n setWithRandomWord(wordCount === PASSPHRASE_WORD_COUNTS.WITH_RANDOM_12)\n } else if (\n wordCount === PASSPHRASE_WORD_COUNTS.STANDARD_24 ||\n wordCount === PASSPHRASE_WORD_COUNTS.WITH_RANDOM_24\n ) {\n setSelectedType(PASSPHRASE_WORD_COUNTS.STANDARD_24)\n setWithRandomWord(wordCount === PASSPHRASE_WORD_COUNTS.WITH_RANDOM_24)\n }\n }\n\n const isValidRange = (wordCount) =>\n !wordCount || VALID_WORD_COUNTS.includes(wordCount)\n\n const handlePasteFromClipboard = async () => {\n const pastedText = await pasteFromClipboard()\n\n if (pastedText) {\n const words = parsePassphraseText(pastedText)\n if (!isValidRange(words.length)) {\n setToast({\n message: t('Only 12 or 24 words are allowed'),\n icon: ErrorIcon\n })\n return\n }\n setPassphraseWords(words)\n detectAndUpdateSettings(words)\n if (onChange) {\n onChange(pastedText)\n }\n }\n }\n\n useEffect(() => {\n if (value) {\n const words = parsePassphraseText(value)\n setPassphraseWords(words)\n detectAndUpdateSettings(words)\n }\n }, [value])\n\n const isCreateOrEditWithValidRange =\n isCreateOrEdit && isValidRange(passphraseWords.length)\n return html`\n <${Container} data-testid=${testId}>\n <${PassPhraseHeader}>\n <${PassPhraseIcon} />\n <${HeaderText}>${t('Recovery phrase 2')}\n \n <${PassPhraseContainer} data-testid=\"passphrase-words-container\">\n ${passphraseWords.map(\n (word, i) =>\n html`<${BadgeTextItem}\n testId=${`passphrase-word-${i + 1}`}\n key=${`${word}-${i}`}\n count=${i + 1}\n word=${word || ''}\n />`\n )}\n \n\n ${isCreateOrEdit\n ? html`\n <${PasteButton}\n type=\"button\"\n data-testid=\"passphrase-button-paste\"\n withExtraBottomSpace=${!isCreateOrEditWithValidRange}\n onClick=${handlePasteFromClipboard}\n >\n <${PasteIcon} color=${colors.primary400?.mode1} />\n <${CopyPasteText}>${t('Paste from clipboard')}\n \n `\n : html`\n
\n <${CopyButton}\n value=${value}\n testId=\"passphrase-button-copy\"\n text=${t('Copy')}\n color=${colors.primary400?.mode1}\n withExtraBottomSpace=${!isCreateOrEditWithValidRange}\n />\n
\n `}\n ${isCreateOrEditWithValidRange &&\n html`<${PassPhraseSettings}\n testId=\"passphrase-settings\"\n selectedType=${selectedType}\n setSelectedType=${setSelectedType}\n withRandomWord=${withRandomWord}\n setWithRandomWord=${setWithRandomWord}\n isDisabled=${!!passphraseWords.length}\n />`}\n ${!!error?.length &&\n html`<${ErrorContainer}>\n <${ErrorIcon} size=\"10\" />\n <${ErrorText}>${error}\n `}\n \n `\n}\n" }, { "path": "src/containers/PassPhrase/styles.js", "content": "import styled from 'styled-components'\n\nexport const PassPraseSettingsContainer = styled.div`\n font-size: 12px;\n background-color: ${({ theme }) => theme.colors.grey350.mode1};\n border-radius: 10px;\n padding: 10px;\n gap: 15px;\n display: flex;\n flex-direction: column;\n`\n\nexport const PassPraseSettingsTitle = styled.div`\n font-size: 14px;\n font-weight: 400;\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: Inter;\n`\n\nexport const PassPraseSettingsRandomWordContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n`\n\nexport const PassPraseSettingsRandomWordText = styled.div`\n font-size: 12px;\n font-weight: 400;\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: Inter;\n`\n\nexport const SwitchWrapper = styled.div`\n transform: scale(1.2);\n`\n\nexport const Container = styled.div`\n background-color: ${({ theme }) => theme.colors.grey400?.mode1};\n border: 1px solid ${({ theme }) => theme.colors.grey100?.mode1};\n border-radius: 10px;\n padding: 10px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n`\n\nexport const PassPhraseHeader = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 10px;\n`\n\nexport const HeaderText = styled.span`\n color: ${({ theme }) => theme.colors.white?.mode1};\n font-family: Inter;\n font-size: 12px;\n font-weight: 400;\n`\n\nexport const PasteButton = styled.button`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 10px;\n color: ${({ theme }) => theme.colors.primary400?.mode1};\n background: transparent;\n border: none;\n cursor: pointer;\n margin-bottom: ${({ withExtraBottomSpace }) =>\n withExtraBottomSpace ? '10px' : '0'};\n`\n\nexport const CopyPasteText = styled.span`\n color: ${({ theme }) => theme.colors.primary400?.mode1};\n font-family: Inter;\n font-size: 14px;\n text-align: center;\n display: inline-flex;\n`\n\nexport const PassPhraseContainer = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n row-gap: 15px;\n justify-content: space-around;\n`\n\nexport const ErrorContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 5px;\n`\n\nexport const ErrorText = styled.span`\n color: ${({ theme }) => theme.colors.categoryIdentity.mode1};\n font-family: Inter;\n font-size: 10px;\n font-weight: 500;\n`\n" }, { "path": "src/containers/RecordDetails/CreditCardDetailsForm/CreditCardDetailsFormV2.styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = () => ({\n container: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing8}px`,\n width: '100%'\n }\n})\n" }, { "path": "src/containers/RecordDetails/CreditCardDetailsForm/CreditCardDetailsFormV2.tsx", "content": "import { useEffect, useMemo } from 'react'\n\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport {\n AttachmentField,\n InputField,\n MultiSlotInput,\n PasswordField\n} from '@tetherto/pearpass-lib-ui-kit'\nimport { html } from 'htm/react'\n\nimport { ATTACHMENTS_FIELD_KEY } from '../../../constants/formFields'\nimport { useModal } from '../../../context/ModalContext'\nimport { useCopyToClipboard } from '../../../hooks/useCopyToClipboard.electron'\nimport { useGetMultipleFiles } from '../../../hooks/useGetMultipleFiles'\nimport { useTranslation } from '../../../hooks/useTranslation'\nimport { DisplayPictureModalContentV2 } from '../../Modal/DisplayPictureModalContentV2/DisplayPictureModalContentV2'\nimport { createStyles } from './CreditCardDetailsFormV2.styles'\nimport { toReadOnlyFieldProps } from './utils'\n\ntype Attachment = {\n id?: string\n tempId?: string\n name: string\n buffer?: ArrayBuffer | Uint8Array\n}\n\ntype CustomField = {\n type: string\n name?: string\n note?: string\n}\n\ntype CreditCardRecord = {\n id: string\n folder?: string\n attachments?: Attachment[]\n data: {\n title?: string\n name?: string\n number?: string\n expireDate?: string\n securityCode?: string\n pinCode?: string\n note?: string\n customFields?: CustomField[]\n }\n}\n\ntype CreditCardDetailsFormV2Props = {\n initialRecord?: CreditCardRecord\n selectedFolder?: string\n}\n\ntype CreditCardDetailsFormValues = {\n name: string\n number: string\n expireDate: string\n securityCode: string\n pinCode: string\n note: string\n customFields: CustomField[]\n folder?: string\n attachments: Attachment[]\n}\n\nconst IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp']\n\nconst getExtension = (filename?: string) =>\n filename?.split('.').pop()?.toLowerCase() ?? ''\n\nexport const CreditCardDetailsFormV2 = ({\n initialRecord,\n selectedFolder\n}: CreditCardDetailsFormV2Props) => {\n const { t } = useTranslation()\n const styles = createStyles()\n const { setModal } = useModal()\n const { copyToClipboard } = useCopyToClipboard()\n\n const initialValues = useMemo(\n () => ({\n name: initialRecord?.data?.name ?? '',\n number: initialRecord?.data?.number ?? '',\n expireDate: initialRecord?.data?.expireDate ?? '',\n securityCode: initialRecord?.data?.securityCode ?? '',\n pinCode: initialRecord?.data?.pinCode ?? '',\n note: initialRecord?.data?.note ?? '',\n customFields: initialRecord?.data?.customFields ?? [],\n folder: selectedFolder ?? initialRecord?.folder,\n attachments: initialRecord?.attachments ?? []\n }),\n [initialRecord, selectedFolder]\n )\n\n const { register, setValues, values, setValue } = useForm({ initialValues })\n\n useGetMultipleFiles({\n fieldNames: [ATTACHMENTS_FIELD_KEY],\n updateValues: setValue,\n initialRecord\n })\n\n useEffect(() => {\n setValues(initialValues)\n }, [initialValues, setValues])\n\n const hasName = !!values.name?.length\n const hasNumber = !!values.number?.length\n const hasExpireDate = !!values.expireDate?.length\n const hasSecurityCode = !!values.securityCode?.length\n const hasPinCode = !!values.pinCode?.length\n const hasNote = !!values.note?.length\n const hasCustomFields = !!values.customFields?.length\n const hasAttachments = !!values.attachments?.length\n\n const handleAttachmentPress = (attachment: Attachment) => {\n if (!attachment?.buffer || !attachment?.name) return\n\n const blob = new Blob([attachment.buffer as BlobPart])\n const url = URL.createObjectURL(blob)\n const isImage = IMAGE_EXTENSIONS.includes(getExtension(attachment.name))\n\n if (isImage) {\n setModal(\n html`<${DisplayPictureModalContentV2}\n url=${url}\n name=${attachment.name}\n />`\n )\n return\n }\n\n const a = document.createElement('a')\n a.href = url\n a.download = attachment.name\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n URL.revokeObjectURL(url)\n }\n\n return (\n
\n {(hasName ||\n hasNumber ||\n hasExpireDate ||\n hasSecurityCode ||\n hasPinCode) && (\n \n {hasName && (\n \n )}\n\n {hasNumber && (\n \n )}\n\n {hasExpireDate && (\n \n )}\n\n {hasSecurityCode && (\n \n )}\n\n {hasPinCode && (\n \n )}\n \n )}\n\n {hasAttachments && (\n \n {(values.attachments as Attachment[]).map((attachment, index) => (\n handleAttachmentPress(attachment)}\n />\n ))}\n \n )}\n\n {hasNote && (\n \n \n \n )}\n\n {hasCustomFields && (\n \n {(values.customFields as CustomField[]).map((field, index) => (\n \n )}\n
\n )\n}\n" }, { "path": "src/containers/RecordDetails/CreditCardDetailsForm/index.js", "content": "import React, { useEffect } from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { html } from 'htm/react'\n\nimport { CopyButton } from '../../../components/CopyButton'\nimport { FormGroup } from '../../../components/FormGroup'\nimport { FormWrapper } from '../../../components/FormWrapper'\nimport { InputFieldNote } from '../../../components/InputFieldNote'\nimport { ATTACHMENTS_FIELD_KEY } from '../../../constants/formFields'\nimport { useGetMultipleFiles } from '../../../hooks/useGetMultipleFiles'\nimport {\n CalendarIcon,\n CreditCardIcon,\n InputField,\n NineDotsIcon,\n PasswordField,\n UserIcon\n} from '../../../lib-react-components'\nimport { AttachmentField } from '../../AttachmentField'\nimport { CustomFields } from '../../CustomFields'\n\n/**\n * @param {{\n * initialRecord: {\n * data: {\n * title: string\n * name: string\n * number: string\n * expireDate: string\n * securityCode: string\n * pinCode: string\n * note: string\n * customFields: {\n * type: string\n * name: string\n * }[]\n * attachments: { id: string, name: string}[]\n * }\n * }\n * selectedFolder?: string\n * }} props\n */\nexport const CreditCardDetailsForm = ({ initialRecord, selectedFolder }) => {\n const { i18n } = useLingui()\n\n const initialValues = React.useMemo(\n () => ({\n name: initialRecord?.data?.name ?? '',\n number: initialRecord?.data?.number ?? '',\n expireDate: initialRecord?.data?.expireDate ?? '',\n securityCode: initialRecord?.data?.securityCode ?? '',\n pinCode: initialRecord?.data?.pinCode ?? '',\n note: initialRecord?.data?.note ?? '',\n customFields: initialRecord?.data?.customFields ?? [],\n folder: selectedFolder ?? initialRecord?.folder,\n attachments: initialRecord?.attachments ?? []\n }),\n [initialRecord, selectedFolder]\n )\n\n const { register, registerArray, setValues, values, setValue } = useForm({\n initialValues\n })\n\n const { value: list, registerItem } = registerArray('customFields')\n\n useGetMultipleFiles({\n fieldNames: [ATTACHMENTS_FIELD_KEY],\n updateValues: setValue,\n initialRecord\n })\n\n useEffect(() => {\n setValues(initialValues)\n }, [initialValues, setValues])\n\n return html`\n <${FormWrapper}>\n <${FormGroup}>\n ${!!values?.name?.length &&\n html`\n <${InputField}\n label=${i18n._('Full name')}\n placeholder=${i18n._('Full name')}\n variant=\"outline\"\n icon=${UserIcon}\n isDisabled\n ...${register('name')}\n additionalItems=${html` <${CopyButton} value=${values.name} /> `}\n />\n `}\n ${!!values?.number?.length &&\n html`\n <${InputField}\n label=${i18n._('Number on card')}\n placeholder=\"1234 1234 1234 1234 \"\n variant=\"outline\"\n icon=${CreditCardIcon}\n isDisabled\n ...${register('number')}\n value=${values.number.replace(/(.{4})/g, '$1 ').trim()}\n additionalItems=${html`\n <${CopyButton} value=${values.number.replace(/\\s/g, '')} />\n `}\n />\n `}\n ${!!values?.expireDate?.length &&\n html`\n <${InputField}\n label=${i18n._('Date of expire')}\n placeholder=\"MM YY\"\n variant=\"outline\"\n icon=${CalendarIcon}\n isDisabled\n ...${register('expireDate')}\n additionalItems=${html`\n <${CopyButton} value=${values.expireDate} />\n `}\n />\n `}\n ${!!values?.securityCode?.length &&\n html`\n <${PasswordField}\n label=${i18n._('Security code')}\n placeholder=\"123\"\n variant=\"outline\"\n icon=${CreditCardIcon}\n isDisabled\n ...${register('securityCode')}\n additionalItems=${html`\n <${CopyButton} value=${values.securityCode} />\n `}\n />\n `}\n ${!!values?.pinCode?.length &&\n html`\n <${PasswordField}\n label=${i18n._('Pin code')}\n placeholder=\"1234\"\n variant=\"outline\"\n icon=${NineDotsIcon}\n isDisabled\n ...${register('pinCode')}\n additionalItems=${html` <${CopyButton} value=${values.pinCode} /> `}\n />\n `}\n \n\n ${values?.attachments?.length > 0 &&\n html`\n <${FormGroup}>\n ${values.attachments.map(\n (attachment) => html`\n <${AttachmentField}\n label=${i18n._('File')}\n attachment=${attachment}\n />\n `\n )}\n \n `}\n\n <${FormGroup}>\n ${!!values?.note?.length &&\n html`\n <${InputFieldNote}\n isDisabled\n ...${register('note')}\n additionalItems=${html` <${CopyButton} value=${values.note} /> `}\n />\n `}\n \n\n <${CustomFields}\n areInputsDisabled=${true}\n customFields=${list}\n register=${registerItem}\n />\n \n `\n}\n" }, { "path": "src/containers/RecordDetails/CreditCardDetailsForm/utils.ts", "content": "type FieldRegistration = {\n name: string\n value: string\n onChange?: unknown\n error?: string\n}\n\nexport const toReadOnlyFieldProps = (field: FieldRegistration) => ({\n name: field.name,\n value: field.value\n})\n" }, { "path": "src/containers/RecordDetails/CustomDetailsForm/CustomDetailsFormV2.styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = () => ({\n container: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing8}px`,\n width: '100%'\n },\n section: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing12}px`\n }\n})\n" }, { "path": "src/containers/RecordDetails/CustomDetailsForm/CustomDetailsFormV2.tsx", "content": "import { useEffect, useMemo } from 'react'\n\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport {\n AttachmentField,\n InputField,\n MultiSlotInput,\n PasswordField,\n Text,\n useTheme\n} from '@tetherto/pearpass-lib-ui-kit'\nimport { html } from 'htm/react'\n\nimport { ATTACHMENTS_FIELD_KEY } from '../../../constants/formFields'\nimport { useModal } from '../../../context/ModalContext'\nimport { useCopyToClipboard } from '../../../hooks/useCopyToClipboard.electron'\nimport { useGetMultipleFiles } from '../../../hooks/useGetMultipleFiles'\nimport { useTranslation } from '../../../hooks/useTranslation'\nimport { DisplayPictureModalContentV2 } from '../../Modal/DisplayPictureModalContentV2/DisplayPictureModalContentV2'\nimport { createStyles } from './CustomDetailsFormV2.styles'\n\ntype Attachment = {\n id?: string\n tempId?: string\n name: string\n buffer?: ArrayBuffer | Uint8Array\n}\n\ntype CustomField = {\n type: string\n name?: string\n note?: string\n}\n\ntype CustomRecord = {\n id: string\n folder?: string\n attachments?: Attachment[]\n data: {\n title?: string\n note?: string\n customFields?: CustomField[]\n }\n}\n\ntype CustomDetailsFormV2Props = {\n initialRecord?: CustomRecord\n selectedFolder?: string\n}\n\ntype CustomDetailsFormValues = {\n note: string\n customFields: CustomField[]\n folder?: string\n attachments: Attachment[]\n}\n\nconst IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp']\n\nconst getExtension = (filename?: string) =>\n filename?.split('.').pop()?.toLowerCase() ?? ''\n\nexport const CustomDetailsFormV2 = ({\n initialRecord,\n selectedFolder\n}: CustomDetailsFormV2Props) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const styles = createStyles()\n const { setModal } = useModal()\n const { copyToClipboard } = useCopyToClipboard()\n\n const initialValues = useMemo(\n () => ({\n note: initialRecord?.data?.note ?? '',\n customFields: initialRecord?.data?.customFields ?? [],\n folder: selectedFolder ?? initialRecord?.folder,\n attachments: initialRecord?.attachments ?? []\n }),\n [initialRecord, selectedFolder]\n )\n\n const { setValues, values, setValue } = useForm({ initialValues })\n\n useGetMultipleFiles({\n fieldNames: [ATTACHMENTS_FIELD_KEY],\n updateValues: setValue,\n initialRecord\n })\n\n useEffect(() => {\n setValues(initialValues)\n }, [initialValues, setValues])\n\n const hasCustomFields = !!values.customFields?.length\n const hasAttachments = !!values.attachments?.length\n const hasNote = !!(values.note as string)?.length\n\n const handleAttachmentPress = (attachment: Attachment) => {\n if (!attachment?.buffer || !attachment?.name) return\n\n const blob = new Blob([attachment.buffer as BlobPart])\n const url = URL.createObjectURL(blob)\n const isImage = IMAGE_EXTENSIONS.includes(getExtension(attachment.name))\n\n if (isImage) {\n setModal(\n html`<${DisplayPictureModalContentV2}\n url=${url}\n name=${attachment.name}\n />`\n )\n return\n }\n\n const a = document.createElement('a')\n a.href = url\n a.download = attachment.name\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n URL.revokeObjectURL(url)\n }\n\n return (\n
\n {(hasAttachments || hasCustomFields || hasNote) && (\n
\n \n {t('Additional')}\n \n\n {hasNote && (\n \n \n \n )}\n\n {hasAttachments && (\n \n {(values.attachments as Attachment[]).map((attachment, index) => (\n handleAttachmentPress(attachment)}\n />\n ))}\n \n )}\n\n {hasCustomFields && (\n \n {(values.customFields as CustomField[]).map((field, index) => (\n \n )}\n
\n )}\n
\n )\n}\n" }, { "path": "src/containers/RecordDetails/CustomDetailsForm/index.js", "content": "import React, { useEffect } from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { html } from 'htm/react'\n\nimport { FormGroup } from '../../../components/FormGroup'\nimport { FormWrapper } from '../../../components/FormWrapper'\nimport { ATTACHMENTS_FIELD_KEY } from '../../../constants/formFields'\nimport { useGetMultipleFiles } from '../../../hooks/useGetMultipleFiles'\nimport { AttachmentField } from '../../AttachmentField'\nimport { CustomFields } from '../../CustomFields'\n\n/**\n *\n * @param {{\n * initialRecord: {\n * data: {\n * title: string\n * customFields: {\n * note: string\n * type: string\n * }[]\n * attachments: { id: string, name: string}[]\n * }\n * }\n * selectedFolder?: string\n * }} props\n * @returns\n */\nexport const CustomDetailsForm = ({ initialRecord, selectedFolder }) => {\n const { i18n } = useLingui()\n\n const initialValues = React.useMemo(\n () => ({\n customFields: initialRecord?.data?.customFields || [],\n folder: selectedFolder ?? initialRecord?.folder,\n attachments: initialRecord?.attachments ?? []\n }),\n [initialRecord, selectedFolder]\n )\n\n const { registerArray, setValues, setValue, values } = useForm({\n initialValues\n })\n\n const { value: list, registerItem } = registerArray('customFields')\n\n useGetMultipleFiles({\n fieldNames: [ATTACHMENTS_FIELD_KEY],\n updateValues: setValue,\n initialRecord\n })\n\n useEffect(() => {\n setValues(initialValues)\n }, [initialValues, setValues])\n\n return html`\n <${FormWrapper} data-id=\"custom-details\">\n <${CustomFields}\n areInputsDisabled=${true}\n customFields=${list}\n register=${registerItem}\n />\n\n ${values?.attachments?.length > 0 &&\n html`\n <${FormGroup}>\n ${values.attachments.map(\n (attachment) => html`\n <${AttachmentField}\n label=${i18n._('File')}\n attachment=${attachment}\n />\n `\n )}\n \n `}\n \n `\n}\n" }, { "path": "src/containers/RecordDetails/IdentityDetailsForm/IdentityDetailsFormV2.styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = () => ({\n container: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing8}px`,\n width: '100%'\n },\n section: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing12}px`\n }\n})\n" }, { "path": "src/containers/RecordDetails/IdentityDetailsForm/IdentityDetailsFormV2.tsx", "content": "import { useEffect, useMemo } from 'react'\n\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { DATE_FORMAT } from '@tetherto/pearpass-lib-constants'\nimport {\n AttachmentField,\n InputField,\n MultiSlotInput,\n PasswordField,\n Text\n} from '@tetherto/pearpass-lib-ui-kit'\nimport { html } from 'htm/react'\n\nimport { ATTACHMENTS_FIELD_KEY } from '../../../constants/formFields'\nimport { useModal } from '../../../context/ModalContext'\nimport { useCopyToClipboard } from '../../../hooks/useCopyToClipboard.electron'\nimport { useGetMultipleFiles } from '../../../hooks/useGetMultipleFiles'\nimport { useTranslation } from '../../../hooks/useTranslation'\nimport { DisplayPictureModalContentV2 } from '../../Modal/DisplayPictureModalContentV2/DisplayPictureModalContentV2'\nimport { createStyles } from './IdentityDetailsFormV2.styles'\nimport { toReadOnlyFieldProps } from './utils'\n\ntype Attachment = {\n id?: string\n tempId?: string\n name: string\n buffer?: ArrayBuffer | Uint8Array\n}\n\ntype CustomField = {\n type: string\n name?: string\n note?: string\n}\n\ntype IdentityRecord = {\n id: string\n folder?: string\n attachments?: Attachment[]\n data: {\n title?: string\n fullName?: string\n email?: string\n phoneNumber?: string\n address?: string\n zip?: string\n city?: string\n region?: string\n country?: string\n note?: string\n customFields?: CustomField[]\n passportFullName?: string\n passportNumber?: string\n passportIssuingCountry?: string\n passportDateOfIssue?: string\n passportExpiryDate?: string\n passportNationality?: string\n passportDob?: string\n passportGender?: string\n passportPicture?: Attachment[]\n idCardNumber?: string\n idCardDateOfIssue?: string\n idCardExpiryDate?: string\n idCardIssuingCountry?: string\n idCardPicture?: Attachment[]\n drivingLicenseNumber?: string\n drivingLicenseDateOfIssue?: string\n drivingLicenseExpiryDate?: string\n drivingLicenseIssuingCountry?: string\n drivingLicensePicture?: Attachment[]\n }\n}\n\ntype FileFieldName =\n | 'attachments'\n | 'passportPicture'\n | 'idCardPicture'\n | 'drivingLicensePicture'\n\ntype AttachmentSource = {\n attachment: Attachment\n fieldName: FileFieldName\n}\n\nconst IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp']\n\nconst getExtension = (filename?: string) =>\n filename?.split('.').pop()?.toLowerCase() ?? ''\n\nconst getAttachmentKey = (\n attachment: Pick,\n fieldName: FileFieldName,\n index: number\n) => {\n if (attachment.id) return `id:${attachment.id}`\n if (attachment.name) return `name:${attachment.name}`\n return `${fieldName}:${index}`\n}\n\nconst buildIdentityAttachmentSources = (values: {\n attachments?: Attachment[]\n passportPicture?: Attachment[]\n idCardPicture?: Attachment[]\n drivingLicensePicture?: Attachment[]\n}): AttachmentSource[] => {\n const sources: AttachmentSource[] = []\n const indexByKey = new Map()\n const groups: Array<{ fieldName: FileFieldName; items: Attachment[] }> = [\n { fieldName: 'attachments', items: values.attachments ?? [] },\n { fieldName: 'passportPicture', items: values.passportPicture ?? [] },\n { fieldName: 'idCardPicture', items: values.idCardPicture ?? [] },\n { fieldName: 'drivingLicensePicture', items: values.drivingLicensePicture ?? [] }\n ]\n\n groups.forEach(({ fieldName, items }) => {\n items.forEach((attachment, index) => {\n const key = getAttachmentKey(attachment, fieldName, index)\n const existing = indexByKey.get(key)\n if (existing === undefined) {\n indexByKey.set(key, sources.length)\n sources.push({ attachment, fieldName })\n return\n }\n const prev = sources[existing]\n if (!prev.attachment.buffer && attachment.buffer) {\n sources[existing] = {\n ...prev,\n attachment: { ...prev.attachment, ...attachment }\n }\n }\n })\n })\n\n return sources\n}\n\ntype IdentityDetailsFormV2Props = {\n initialRecord?: IdentityRecord\n selectedFolder?: string\n}\n\ntype IdentityDetailsFormValues = {\n fullName: string\n email: string\n phoneNumber: string\n address: string\n zip: string\n city: string\n region: string\n country: string\n note: string\n customFields: CustomField[]\n folder?: string\n passportFullName: string\n passportNumber: string\n passportIssuingCountry: string\n passportDateOfIssue: string\n passportExpiryDate: string\n passportNationality: string\n passportDob: string\n passportGender: string\n passportPicture: Attachment[]\n idCardNumber: string\n idCardDateOfIssue: string\n idCardExpiryDate: string\n idCardIssuingCountry: string\n idCardPicture: Attachment[]\n drivingLicenseNumber: string\n drivingLicenseDateOfIssue: string\n drivingLicenseExpiryDate: string\n drivingLicenseIssuingCountry: string\n drivingLicensePicture: Attachment[]\n attachments: Attachment[]\n}\n\nexport const IdentityDetailsFormV2 = ({\n initialRecord,\n selectedFolder\n}: IdentityDetailsFormV2Props) => {\n const { t } = useTranslation()\n const styles = createStyles()\n const { setModal } = useModal()\n const { copyToClipboard } = useCopyToClipboard()\n\n const initialValues = useMemo(\n () => ({\n fullName: initialRecord?.data?.fullName ?? '',\n email: initialRecord?.data?.email ?? '',\n phoneNumber: initialRecord?.data?.phoneNumber ?? '',\n address: initialRecord?.data?.address ?? '',\n zip: initialRecord?.data?.zip ?? '',\n city: initialRecord?.data?.city ?? '',\n region: initialRecord?.data?.region ?? '',\n country: initialRecord?.data?.country ?? '',\n note: initialRecord?.data?.note ?? '',\n customFields: initialRecord?.data?.customFields ?? [],\n folder: selectedFolder ?? initialRecord?.folder,\n passportFullName: initialRecord?.data?.passportFullName ?? '',\n passportNumber: initialRecord?.data?.passportNumber ?? '',\n passportIssuingCountry: initialRecord?.data?.passportIssuingCountry ?? '',\n passportDateOfIssue: initialRecord?.data?.passportDateOfIssue ?? '',\n passportExpiryDate: initialRecord?.data?.passportExpiryDate ?? '',\n passportNationality: initialRecord?.data?.passportNationality ?? '',\n passportDob: initialRecord?.data?.passportDob ?? '',\n passportGender: initialRecord?.data?.passportGender ?? '',\n passportPicture: initialRecord?.data?.passportPicture ?? [],\n idCardNumber: initialRecord?.data?.idCardNumber ?? '',\n idCardDateOfIssue: initialRecord?.data?.idCardDateOfIssue ?? '',\n idCardExpiryDate: initialRecord?.data?.idCardExpiryDate ?? '',\n idCardIssuingCountry: initialRecord?.data?.idCardIssuingCountry ?? '',\n idCardPicture: initialRecord?.data?.idCardPicture ?? [],\n drivingLicenseNumber: initialRecord?.data?.drivingLicenseNumber ?? '',\n drivingLicenseDateOfIssue:\n initialRecord?.data?.drivingLicenseDateOfIssue ?? '',\n drivingLicenseExpiryDate:\n initialRecord?.data?.drivingLicenseExpiryDate ?? '',\n drivingLicenseIssuingCountry:\n initialRecord?.data?.drivingLicenseIssuingCountry ?? '',\n drivingLicensePicture: initialRecord?.data?.drivingLicensePicture ?? [],\n attachments: initialRecord?.attachments ?? []\n }),\n [initialRecord, selectedFolder]\n )\n\n const { register, setValues, values, setValue } = useForm({ initialValues })\n\n useGetMultipleFiles({\n fieldNames: [\n ATTACHMENTS_FIELD_KEY,\n 'passportPicture',\n 'idCardPicture',\n 'drivingLicensePicture'\n ],\n updateValues: setValue,\n initialRecord\n })\n\n useEffect(() => {\n setValues(initialValues)\n }, [initialValues, setValues])\n\n const hasPersonalInformation =\n !!values.fullName?.length ||\n !!values.email?.length ||\n !!values.phoneNumber?.length\n\n const hasAddress =\n !!values.address?.length ||\n !!values.zip?.length ||\n !!values.city?.length ||\n !!values.region?.length ||\n !!values.country?.length\n\n const hasPassport =\n !!values.passportFullName?.length ||\n !!values.passportNumber?.length ||\n !!values.passportIssuingCountry?.length ||\n !!values.passportDateOfIssue?.length ||\n !!values.passportExpiryDate?.length ||\n !!values.passportNationality?.length ||\n !!values.passportDob?.length ||\n !!values.passportGender?.length\n\n const hasIdCard =\n !!values.idCardNumber?.length ||\n !!values.idCardDateOfIssue?.length ||\n !!values.idCardExpiryDate?.length ||\n !!values.idCardIssuingCountry?.length\n\n const hasDrivingLicense =\n !!values.drivingLicenseNumber?.length ||\n !!values.drivingLicenseDateOfIssue?.length ||\n !!values.drivingLicenseExpiryDate?.length ||\n !!values.drivingLicenseIssuingCountry?.length\n\n const attachmentSources = useMemo(\n () =>\n buildIdentityAttachmentSources({\n attachments: values.attachments,\n passportPicture: values.passportPicture,\n idCardPicture: values.idCardPicture,\n drivingLicensePicture: values.drivingLicensePicture\n }),\n [\n values.attachments,\n values.passportPicture,\n values.idCardPicture,\n values.drivingLicensePicture\n ]\n )\n const hasAttachments = attachmentSources.length > 0\n\n const hasNote = !!values.note?.length\n const hasCustomFields = !!values.customFields?.length\n\n const handleAttachmentPress = (attachment: Attachment) => {\n if (!attachment?.buffer || !attachment?.name) return\n\n const blob = new Blob([attachment.buffer as BlobPart])\n const url = URL.createObjectURL(blob)\n const isImage = IMAGE_EXTENSIONS.includes(getExtension(attachment.name))\n\n if (isImage) {\n setModal(\n html`<${DisplayPictureModalContentV2}\n url=${url}\n name=${attachment.name}\n />`\n )\n return\n }\n\n const a = document.createElement('a')\n a.href = url\n a.download = attachment.name\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n URL.revokeObjectURL(url)\n }\n\n return (\n
\n {hasPersonalInformation && (\n
\n {t('Personal Information')}\n\n \n {!!values.fullName?.length && (\n \n )}\n\n {!!values.email?.length && (\n \n )}\n\n {!!values.phoneNumber?.length && (\n \n )}\n \n
\n )}\n\n {hasAddress && (\n
\n {t('Address')}\n\n \n {!!values.address?.length && (\n \n )}\n\n {!!values.zip?.length && (\n \n )}\n\n {!!values.city?.length && (\n \n )}\n\n {!!values.region?.length && (\n \n )}\n\n {!!values.country?.length && (\n \n )}\n \n
\n )}\n\n {hasPassport && (\n
\n {t('Passport')}\n\n \n {!!values.passportFullName?.length && (\n \n )}\n\n {!!values.passportNumber?.length && (\n \n )}\n\n {!!values.passportIssuingCountry?.length && (\n \n )}\n\n {!!values.passportDateOfIssue?.length && (\n \n )}\n\n {!!values.passportExpiryDate?.length && (\n \n )}\n\n {!!values.passportNationality?.length && (\n \n )}\n\n {!!values.passportDob?.length && (\n \n )}\n\n {!!values.passportGender?.length && (\n \n )}\n \n
\n )}\n\n {hasIdCard && (\n
\n {t('Identity Card')}\n\n \n {!!values.idCardNumber?.length && (\n \n )}\n\n {!!values.idCardDateOfIssue?.length && (\n \n )}\n\n {!!values.idCardExpiryDate?.length && (\n \n )}\n\n {!!values.idCardIssuingCountry?.length && (\n \n )}\n \n
\n )}\n\n {hasDrivingLicense && (\n
\n {t('Driving License')}\n\n \n {!!values.drivingLicenseNumber?.length && (\n \n )}\n\n {!!values.drivingLicenseDateOfIssue?.length && (\n \n )}\n\n {!!values.drivingLicenseExpiryDate?.length && (\n \n )}\n\n {!!values.drivingLicenseIssuingCountry?.length && (\n \n )}\n \n
\n )}\n\n {hasAttachments && (\n
\n {t('Attachments')}\n\n \n {attachmentSources.map(({ attachment }, index) => (\n handleAttachmentPress(attachment)}\n />\n ))}\n \n
\n )}\n {(hasNote || hasCustomFields) && (\n
\n {t('Additional')}\n\n {hasNote && (\n \n \n \n )}\n\n {hasCustomFields && (\n \n {(values.customFields as CustomField[]).map((field, index) => (\n \n )}\n
\n )}\n
\n )\n}\n" }, { "path": "src/containers/RecordDetails/IdentityDetailsForm/index.js", "content": "import React, { useEffect } from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { DATE_FORMAT } from '@tetherto/pearpass-lib-constants'\nimport { html } from 'htm/react'\n\nimport { CopyButton } from '../../../components/CopyButton'\nimport { FormGroup } from '../../../components/FormGroup'\nimport { FormWrapper } from '../../../components/FormWrapper'\nimport { InputFieldNote } from '../../../components/InputFieldNote'\nimport { ATTACHMENTS_FIELD_KEY } from '../../../constants/formFields'\nimport { useGetMultipleFiles } from '../../../hooks/useGetMultipleFiles'\nimport {\n EmailIcon,\n InputField,\n PhoneIcon,\n UserIcon\n} from '../../../lib-react-components'\nimport { AttachmentField } from '../../AttachmentField'\nimport { CustomFields } from '../../CustomFields'\nimport { ImagesField } from '../../ImagesField'\n\n/**\n * @param {{\n * initialRecord: {\n * data: {\n * title: string\n * fullName: string\n * email: string\n * phoneNumber: string\n * address: string\n * zip: string\n * city: string\n * region: string\n * country: string\n * note: string\n * customFields: {\n * note: string\n * type: string\n * }[]\n * attachments: { id: string, name: string}[]\n * }\n * }\n * selectedFolder?: string\n * }} props\n */\nexport const IdentityDetailsForm = ({ initialRecord, selectedFolder }) => {\n const { i18n } = useLingui()\n const initialValues = React.useMemo(\n () => ({\n fullName: initialRecord?.data?.fullName ?? '',\n email: initialRecord?.data?.email ?? '',\n phoneNumber: initialRecord?.data?.phoneNumber ?? '',\n address: initialRecord?.data?.address ?? '',\n zip: initialRecord?.data?.zip ?? '',\n city: initialRecord?.data?.city ?? '',\n region: initialRecord?.data?.region ?? '',\n country: initialRecord?.data?.country ?? '',\n note: initialRecord?.data?.note ?? '',\n customFields: initialRecord?.data?.customFields || [],\n folder: selectedFolder ?? initialRecord?.folder,\n passportFullName: initialRecord?.data?.passportFullName ?? '',\n passportNumber: initialRecord?.data?.passportNumber ?? '',\n passportIssuingCountry: initialRecord?.data?.passportIssuingCountry ?? '',\n passportDateOfIssue: initialRecord?.data?.passportDateOfIssue ?? '',\n passportExpiryDate: initialRecord?.data?.passportExpiryDate ?? '',\n passportNationality: initialRecord?.data?.passportNationality ?? '',\n passportDob: initialRecord?.data?.passportDob ?? '',\n passportGender: initialRecord?.data?.passportGender ?? '',\n passportPicture: initialRecord?.data?.passportPicture ?? [],\n idCardNumber: initialRecord?.data?.idCardNumber ?? '',\n idCardDateOfIssue: initialRecord?.data?.idCardDateOfIssue ?? '',\n idCardExpiryDate: initialRecord?.data?.idCardExpiryDate ?? '',\n idCardIssuingCountry: initialRecord?.data?.idCardIssuingCountry ?? '',\n idCardPicture: initialRecord?.data?.idCardPicture ?? [],\n drivingLicenseNumber: initialRecord?.data?.drivingLicenseNumber ?? '',\n drivingLicenseDateOfIssue:\n initialRecord?.data?.drivingLicenseDateOfIssue ?? '',\n drivingLicenseExpiryDate:\n initialRecord?.data?.drivingLicenseExpiryDate ?? '',\n drivingLicenseIssuingCountry:\n initialRecord?.data?.drivingLicenseIssuingCountry ?? '',\n drivingLicensePicture: initialRecord?.data?.drivingLicensePicture ?? [],\n attachments: initialRecord?.attachments ?? []\n }),\n [initialRecord, selectedFolder]\n )\n\n const { register, registerArray, setValues, values, setValue } = useForm({\n initialValues\n })\n\n const { value: list, registerItem } = registerArray('customFields')\n\n useGetMultipleFiles({\n fieldNames: [\n ATTACHMENTS_FIELD_KEY,\n 'passportPicture',\n 'idCardPicture',\n 'drivingLicensePicture'\n ],\n updateValues: setValue,\n initialRecord\n })\n\n useEffect(() => {\n setValues(initialValues)\n }, [initialValues, setValues])\n\n const hasFullName = !!values?.fullName?.length\n const hasEmail = !!values?.email?.length\n const hasPhoneNumber = !!values?.phoneNumber?.length\n const hasAddress = !!values?.address?.length\n const hasZip = !!values?.zip?.length\n const hasCity = !!values?.city?.length\n const hasRegion = !!values?.region?.length\n const hasCountry = !!values?.country?.length\n const hasNote = !!values?.note?.length\n const hasCustomFields = !!list.length\n const hasPassportFullName = !!values?.passportFullName?.length\n const hasPassportNumber = !!values?.passportNumber?.length\n const hasPassportIssuingCountry = !!values?.passportIssuingCountry?.length\n const hasPassportDateOfIssue = !!values?.passportDateOfIssue?.length\n const hasPassportExpiryDate = !!values?.passportExpiryDate?.length\n const hasPassportNationality = !!values?.passportNationality?.length\n const hasPassportDob = !!values?.passportDob?.length\n const hasPassportGender = !!values?.passportGender?.length\n const hasPassportPicture = !!values?.passportPicture?.length\n const hasIdCardNumber = !!values?.idCardNumber?.length\n const hasIdCardDateOfIssue = !!values?.idCardDateOfIssue?.length\n const hasIdCardExpiryDate = !!values?.idCardExpiryDate?.length\n const hasIdCardIssuingCountry = !!values?.idCardIssuingCountry?.length\n const hasIdCardPicture = !!values?.idCardPicture?.length\n const hasDrivingLicenseNumber = !!values?.drivingLicenseNumber?.length\n const hasDrivingLicenseDateOfIssue =\n !!values?.drivingLicenseDateOfIssue?.length\n const hasDrivingLicenseExpiryDate = !!values?.drivingLicenseExpiryDate?.length\n const hasDrivingLicenseIssuingCountry =\n !!values?.drivingLicenseIssuingCountry?.length\n const hasDrivingLicensePicture = !!values?.drivingLicensePicture?.length\n\n const hasPassport =\n hasPassportFullName ||\n hasPassportNumber ||\n hasPassportIssuingCountry ||\n hasPassportDateOfIssue ||\n hasPassportExpiryDate ||\n hasPassportNationality ||\n hasPassportDob ||\n hasPassportGender ||\n hasPassportPicture\n\n const hasIdCard =\n hasIdCardNumber ||\n hasIdCardDateOfIssue ||\n hasIdCardExpiryDate ||\n hasIdCardIssuingCountry ||\n hasIdCardPicture\n\n const hasDrivingLicense =\n hasDrivingLicenseNumber ||\n hasDrivingLicenseDateOfIssue ||\n hasDrivingLicenseExpiryDate ||\n hasDrivingLicenseIssuingCountry ||\n hasDrivingLicensePicture\n\n return html`\n <${FormWrapper}>\n ${(hasFullName || hasEmail || hasPhoneNumber) &&\n html` <${FormGroup}\n testId=\"identitydetails-section-personalinfo\"\n title=${i18n._('Personal information')}\n isCollapse\n >\n ${!!values?.fullName?.length &&\n html`\n <${InputField}\n testId=\"identitydetails-field-fullname\"\n label=${i18n._('Full name')}\n placeholder=${i18n._('Full name')}\n variant=\"outline\"\n icon=${UserIcon}\n isDisabled\n ...${register('fullName')}\n additionalItems=${html`\n <${CopyButton} value=${values.fullName} />\n `}\n />\n `}\n ${!!values?.email?.length &&\n html` <${InputField}\n testId=\"identitydetails-field-email\"\n label=${i18n._('Email')}\n placeholder=${i18n._('Insert email')}\n variant=\"outline\"\n icon=${EmailIcon}\n isDisabled\n ...${register('email')}\n additionalItems=${html` <${CopyButton} value=${values.email} /> `}\n />`}\n ${!!values?.phoneNumber?.length &&\n html`\n <${InputField}\n testId=\"identitydetails-field-phonenumber\"\n label=${i18n._('Phone number ')}\n placeholder=${i18n._('Phone number ')}\n variant=\"outline\"\n icon=${PhoneIcon}\n isDisabled\n ...${register('phoneNumber')}\n additionalItems=${html`\n <${CopyButton} value=${values.phoneNumber} />\n `}\n />\n `}\n `}\n ${(hasAddress || hasZip || hasCity || hasRegion || hasCountry) &&\n html`\n <${FormGroup}\n testId=\"identitydetails-section-address\"\n title=${i18n._('Detail of address')}\n isCollapse\n >\n ${!!values?.address?.length &&\n html`\n <${InputField}\n testId=\"identitydetails-field-address\"\n label=${i18n._('Address')}\n placeholder=${i18n._('Address')}\n variant=\"outline\"\n isDisabled\n ...${register('address')}\n additionalItems=${html`\n <${CopyButton} value=${values.address} />\n `}\n />\n `}\n ${!!values?.zip?.length &&\n html`\n <${InputField}\n testId=\"identitydetails-field-zip\"\n label=${i18n._('ZIP')}\n placeholder=${i18n._('Insert zip')}\n variant=\"outline\"\n isDisabled\n ...${register('zip')}\n additionalItems=${html` <${CopyButton} value=${values.zip} /> `}\n />\n `}\n ${!!values?.city?.length &&\n html`\n <${InputField}\n testId=\"identitydetails-field-city\"\n label=${i18n._('City')}\n placeholder=${i18n._('City')}\n variant=\"outline\"\n isDisabled\n ...${register('city')}\n additionalItems=${html` <${CopyButton} value=${values.city} /> `}\n />\n `}\n ${!!values?.region?.length &&\n html`\n <${InputField}\n testId=\"identitydetails-field-region\"\n label=${i18n._('Region')}\n placeholder=${i18n._('Region')}\n variant=\"outline\"\n isDisabled\n ...${register('region')}\n additionalItems=${html`\n <${CopyButton} value=${values.region} />\n `}\n />\n `}\n ${!!values?.country?.length &&\n html`\n <${InputField}\n testId=\"identitydetails-field-country\"\n label=${i18n._('Country')}\n placeholder=${i18n._('Country')}\n variant=\"outline\"\n isDisabled\n ...${register('country')}\n additionalItems=${html`\n <${CopyButton} value=${values.country} />\n `}\n />\n `}\n \n `}\n ${hasPassport &&\n html`\n <${FormGroup}\n testId=\"identitydetails-section-passport\"\n title=${i18n._('Passport')}\n isCollapse\n >\n
\n ${hasPassportFullName &&\n html`\n <${InputField}\n testId=\"identitydetails-field-passportfullname\"\n label=${i18n._('Full name')}\n placeholder=${i18n._('John Smith')}\n variant=\"outline\"\n isDisabled\n ...${register('passportFullName')}\n additionalItems=${html`\n <${CopyButton} value=${values.passportFullName} />\n `}\n />\n `}\n ${hasPassportNumber &&\n html`\n <${InputField}\n testId=\"identitydetails-field-passportnumber\"\n label=${i18n._('Passport number')}\n placeholder=${i18n._('Insert numbers')}\n variant=\"outline\"\n isDisabled\n ...${register('passportNumber')}\n additionalItems=${html`\n <${CopyButton} value=${values.passportNumber} />\n `}\n />\n `}\n ${hasPassportIssuingCountry &&\n html`\n <${InputField}\n testId=\"identitydetails-field-passportissuingcountry\"\n label=${i18n._('Issuing country')}\n placeholder=${i18n._('Insert country')}\n variant=\"outline\"\n isDisabled\n ...${register('passportIssuingCountry')}\n additionalItems=${html`\n <${CopyButton} value=${values.passportIssuingCountry} />\n `}\n />\n `}\n ${hasPassportDateOfIssue &&\n html`\n <${InputField}\n testId=\"identitydetails-field-passportdateofissue\"\n label=${i18n._('Date of issue')}\n placeholder=${DATE_FORMAT}\n variant=\"outline\"\n isDisabled\n ...${register('passportDateOfIssue')}\n additionalItems=${html`\n <${CopyButton} value=${values.passportDateOfIssue} />\n `}\n />\n `}\n ${hasPassportExpiryDate &&\n html`\n <${InputField}\n testId=\"identitydetails-field-passportexpirydate\"\n label=${i18n._('Expiry date')}\n placeholder=${DATE_FORMAT}\n variant=\"outline\"\n isDisabled\n ...${register('passportExpiryDate')}\n additionalItems=${html`\n <${CopyButton} value=${values.passportExpiryDate} />\n `}\n />\n `}\n ${hasPassportNationality &&\n html`\n <${InputField}\n testId=\"identitydetails-field-passportnationality\"\n label=${i18n._('Nationality')}\n placeholder=${i18n._('Insert your nationality')}\n variant=\"outline\"\n isDisabled\n ...${register('passportNationality')}\n additionalItems=${html`\n <${CopyButton} value=${values.passportNationality} />\n `}\n />\n `}\n ${hasPassportDob &&\n html`\n <${InputField}\n testId=\"identitydetails-field-passportdob\"\n label=${i18n._('Date of birth')}\n placeholder=${DATE_FORMAT}\n variant=\"outline\"\n isDisabled\n ...${register('passportDob')}\n additionalItems=${html`\n <${CopyButton} value=${values.passportDob} />\n `}\n />\n `}\n ${hasPassportGender &&\n html`\n <${InputField}\n testId=\"identitydetails-field-passportgender\"\n label=${i18n._('Gender')}\n placeholder=${i18n._('M/F')}\n variant=\"outline\"\n isDisabled\n ...${register('passportGender')}\n additionalItems=${html`\n <${CopyButton} value=${values.passportGender} />\n `}\n />\n `}\n \n ${hasPassportPicture &&\n html` <${ImagesField}\n testId=\"identitydetails-imagesfield-passport\"\n title=${i18n._('Passport Images')}\n pictures=${values.passportPicture}\n />`}\n \n `}\n ${hasIdCard &&\n html`\n <${FormGroup}\n testId=\"identitydetails-section-idcard\"\n title=${i18n._('Identity Card')}\n isCollapse\n >\n
\n ${hasIdCardNumber &&\n html`\n <${InputField}\n testId=\"identitydetails-field-idcardnumber\"\n label=${i18n._('ID card number')}\n placeholder=\"123456789\"\n variant=\"outline\"\n isDisabled\n ...${register('idCardNumber')}\n additionalItems=${html`\n <${CopyButton} value=${values.idCardNumber} />\n `}\n />\n `}\n ${hasIdCardDateOfIssue &&\n html`\n <${InputField}\n testId=\"identitydetails-field-idcarddateofissue\"\n label=${i18n._('Creation date')}\n placeholder=${DATE_FORMAT}\n variant=\"outline\"\n isDisabled\n ...${register('idCardDateOfIssue')}\n additionalItems=${html`\n <${CopyButton} value=${values.idCardDateOfIssue} />\n `}\n />\n `}\n ${hasIdCardExpiryDate &&\n html`\n <${InputField}\n testId=\"identitydetails-field-idcardexpirydate\"\n label=${i18n._('Expiry date')}\n placeholder=${DATE_FORMAT}\n variant=\"outline\"\n isDisabled\n ...${register('idCardExpiryDate')}\n additionalItems=${html`\n <${CopyButton} value=${values.idCardExpiryDate} />\n `}\n />\n `}\n ${hasIdCardIssuingCountry &&\n html`\n <${InputField}\n testId=\"identitydetails-field-idcardissuingcountry\"\n label=${i18n._('Issuing country')}\n placeholder=${i18n._('Insert country')}\n variant=\"outline\"\n isDisabled\n ...${register('idCardIssuingCountry')}\n additionalItems=${html`\n <${CopyButton} value=${values.idCardIssuingCountry} />\n `}\n />\n `}\n \n ${hasIdCardPicture &&\n html` <${ImagesField}\n testId=\"identitydetails-imagesfield-idcard\"\n title=${i18n._('Identity Card Images')}\n pictures=${values.idCardPicture}\n />`}\n \n `}\n ${hasDrivingLicense &&\n html` <${FormGroup}\n testId=\"identitydetails-section-drivinglicense\"\n title=${i18n._('Driving license')}\n isCollapse\n >\n
\n ${hasDrivingLicenseNumber &&\n html`\n <${InputField}\n testId=\"identitydetails-field-drivinglicensenumber\"\n label=${i18n._('Driving license number')}\n placeholder=\"123456789\"\n variant=\"outline\"\n isDisabled\n ...${register('drivingLicenseNumber')}\n additionalItems=${html`\n <${CopyButton} value=${values.drivingLicenseNumber} />\n `}\n />\n `}\n ${hasDrivingLicenseDateOfIssue &&\n html`\n <${InputField}\n testId=\"identitydetails-field-drivinglicensedateofissue\"\n label=${i18n._('Creation date')}\n placeholder=${DATE_FORMAT}\n variant=\"outline\"\n isDisabled\n ...${register('drivingLicenseDateOfIssue')}\n additionalItems=${html`\n <${CopyButton} value=${values.drivingLicenseDateOfIssue} />\n `}\n />\n `}\n ${hasDrivingLicenseExpiryDate &&\n html`\n <${InputField}\n testId=\"identitydetails-field-drivinglicenseexpirydate\"\n label=${i18n._('Expiry date')}\n placeholder=${DATE_FORMAT}\n variant=\"outline\"\n isDisabled\n ...${register('drivingLicenseExpiryDate')}\n additionalItems=${html`\n <${CopyButton} value=${values.drivingLicenseExpiryDate} />\n `}\n />\n `}\n ${hasDrivingLicenseIssuingCountry &&\n html`\n <${InputField}\n testId=\"identitydetails-field-drivinglicenseissuingcountry\"\n label=${i18n._('Issuing country')}\n placeholder=${i18n._('Insert country')}\n variant=\"outline\"\n isDisabled\n ...${register('drivingLicenseIssuingCountry')}\n additionalItems=${html`\n <${CopyButton} value=${values.drivingLicenseIssuingCountry} />\n `}\n />\n `}\n \n ${hasDrivingLicensePicture &&\n html` <${ImagesField}\n testId=\"identitydetails-imagesfield-drivinglicense\"\n title=${i18n._('Driving License Images')}\n pictures=${values.drivingLicensePicture}\n />`}\n `}\n ${values?.attachments?.length > 0 &&\n html`\n <${FormGroup}>\n ${values.attachments.map(\n (attachment) => html`\n <${AttachmentField}\n testId=\"identitydetails-attachment\"\n label=${i18n._('File')}\n attachment=${attachment}\n />\n `\n )}\n \n `}\n ${hasNote &&\n html`\n <${FormGroup}>\n <${InputFieldNote}\n testId=\"identitydetails-field-note\"\n isDisabled\n ...${register('note')}\n additionalItems=${html` <${CopyButton} value=${values.note} /> `}\n />\n \n `}\n ${hasCustomFields &&\n html`\n <${FormGroup}>\n <${CustomFields}\n areInputsDisabled=${true}\n customFields=${list}\n register=${registerItem}\n />\n \n `}\n \n `\n}\n" }, { "path": "src/containers/RecordDetails/IdentityDetailsForm/utils.ts", "content": "type FieldRegistration = {\n name: string\n value: string\n onChange?: unknown\n error?: string\n}\n\nexport const toReadOnlyFieldProps = (field: FieldRegistration) => ({\n name: field.name,\n value: field.value\n})\n" }, { "path": "src/containers/RecordDetails/LoginRecordDetailsForm/LoginRecordDetailsFormV2.styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = () => ({\n container: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n justifyContent: 'space-between' as const,\n gap: `${rawTokens.spacing16}px`,\n width: '100%'\n },\n topContent: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing8}px`\n }\n})\n" }, { "path": "src/containers/RecordDetails/LoginRecordDetailsForm/LoginRecordDetailsFormV2.tsx", "content": "import { useEffect, useMemo } from 'react'\n\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\n// @ts-ignore - declaration file is missing\nimport { isBefore, subtractDateUnits } from '@tetherto/pear-apps-utils-date'\nimport {\n AlertMessage,\n AttachmentField,\n Button,\n InputField,\n MultiSlotInput,\n PasswordField,\n useTheme\n} from '@tetherto/pearpass-lib-ui-kit'\nimport { OpenInNew } from '@tetherto/pearpass-lib-ui-kit/icons'\nimport { html } from 'htm/react'\n\nimport { OtpCodeFieldV2 } from '../../../components/OtpCodeFieldV2'\nimport { ATTACHMENTS_FIELD_KEY } from '../../../constants/formFields'\nimport { useModal } from '../../../context/ModalContext'\nimport { useCopyToClipboard } from '../../../hooks/useCopyToClipboard.electron'\nimport { useGetMultipleFiles } from '../../../hooks/useGetMultipleFiles'\nimport { addHttps } from '../../../utils/addHttps'\nimport { formatPasskeyDate } from '../../../utils/formatPasskeyDate'\nimport { isPasswordChangeReminderDisabled } from '../../../utils/isPasswordChangeReminderDisabled'\nimport { useTranslation } from '../../../hooks/useTranslation'\nimport { DisplayPictureModalContentV2 } from '../../Modal/DisplayPictureModalContentV2/DisplayPictureModalContentV2'\nimport { createStyles } from './LoginRecordDetailsFormV2.styles'\nimport { toReadOnlyFieldProps } from './utils'\n\ntype Attachment = {\n id?: string\n tempId?: string\n name: string\n buffer?: ArrayBuffer | Uint8Array\n}\n\ntype CustomField = {\n type: string\n name: string\n note?: string\n}\n\ntype LoginRecord = {\n id: string\n folder?: string\n attachments?: Attachment[]\n otpPublic?: unknown\n data: {\n title?: string\n username?: string\n password?: string\n note?: string\n websites?: string[]\n customFields?: CustomField[]\n credential?: { id: string }\n passkeyCreatedAt?: number | string | Date | null\n passwordUpdatedAt?: number | string | Date\n }\n}\n\ntype LoginRecordDetailsFormV2Props = {\n initialRecord?: LoginRecord\n selectedFolder?: string\n}\n\ntype LoginRecordDetailsFormValues = {\n username: string\n password: string\n note: string\n websites: string[]\n customFields: CustomField[]\n folder?: string\n attachments: Attachment[]\n credential: string\n passkeyCreatedAt: number | string | Date | null\n}\n\nconst IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp']\n\nconst getExtension = (filename?: string) =>\n filename?.split('.').pop()?.toLowerCase() ?? ''\n\nexport const LoginRecordDetailsFormV2 = ({\n initialRecord,\n selectedFolder\n}: LoginRecordDetailsFormV2Props) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const styles = createStyles()\n const { setModal } = useModal()\n const { copyToClipboard } = useCopyToClipboard()\n\n const initialValues = useMemo(\n () => ({\n username: initialRecord?.data?.username ?? '',\n password: initialRecord?.data?.password ?? '',\n note: initialRecord?.data?.note ?? '',\n websites: initialRecord?.data?.websites ?? [],\n customFields: initialRecord?.data?.customFields ?? [],\n folder: selectedFolder ?? initialRecord?.folder,\n attachments: initialRecord?.attachments ?? [],\n credential: initialRecord?.data?.credential?.id ?? '',\n passkeyCreatedAt: initialRecord?.data?.passkeyCreatedAt ?? null\n }),\n [initialRecord, selectedFolder]\n )\n\n const { register, setValues, values, setValue } = useForm({\n initialValues\n })\n\n useGetMultipleFiles({\n fieldNames: [ATTACHMENTS_FIELD_KEY],\n updateValues: setValue,\n initialRecord\n })\n\n useEffect(() => {\n setValues(initialValues)\n }, [initialValues, setValues])\n\n const hasUsername = !!values.username?.length\n const hasPassword = !!values.password?.length\n const hasPasskey = !!values.credential\n const hasWebsites = !!values.websites?.length\n const hasNote = !!values.note?.length\n const hasCustomFields = !!values.customFields?.length\n const hasAttachments = !!values.attachments?.length\n\n const isPasswordSixMonthsOld = () => {\n const passwordUpdatedAt = initialRecord?.data?.passwordUpdatedAt\n return (\n !!passwordUpdatedAt &&\n isBefore(passwordUpdatedAt, subtractDateUnits(6, 'month'))\n )\n }\n\n const shouldShowSecurityWarning =\n !isPasswordChangeReminderDisabled() && isPasswordSixMonthsOld()\n\n const handleAttachmentPress = (attachment: Attachment) => {\n if (!attachment?.buffer || !attachment?.name) return\n\n const blob = new Blob([attachment.buffer as BlobPart])\n const url = URL.createObjectURL(blob)\n const isImage = IMAGE_EXTENSIONS.includes(getExtension(attachment.name))\n\n if (isImage) {\n setModal(\n html`<${DisplayPictureModalContentV2}\n url=${url}\n name=${attachment.name}\n />`\n )\n return\n }\n\n const a = document.createElement('a')\n a.href = url\n a.download = attachment.name\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n URL.revokeObjectURL(url)\n }\n\n return (\n
\n
\n {(hasUsername || hasPassword || !!initialRecord?.otpPublic) && (\n \n {hasUsername && (\n \n )}\n\n {hasPassword && (\n \n )}\n\n {!!initialRecord?.otpPublic && !!initialRecord?.id && (\n [0]['otpPublic']\n }\n isGrouped\n />\n )}\n \n )}\n\n {hasWebsites &&\n values.websites.map((website: string, index: number) => (\n \n \n }\n onClick={() =>\n window.open(\n addHttps(website) as unknown as string,\n '_blank',\n 'noopener,noreferrer'\n )\n }\n />\n ) : undefined\n }\n />\n \n ))}\n\n {hasPasskey && (\n \n )}\n\n {hasAttachments && (\n \n {values.attachments.map((attachment: Attachment, index: number) => (\n handleAttachmentPress(attachment)}\n />\n ))}\n \n )}\n\n {hasNote && (\n \n \n \n )}\n\n {hasCustomFields && (\n \n {values.customFields.map((field: CustomField, index: number) => (\n \n )}\n
\n\n {shouldShowSecurityWarning && (\n \n )}\n
\n )\n}\n" }, { "path": "src/containers/RecordDetails/LoginRecordDetailsForm/index.js", "content": "import React, { useEffect } from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { isBefore, subtractDateUnits } from '@tetherto/pear-apps-utils-date'\nimport { html } from 'htm/react'\n\nimport { AlertBox } from '../../../components/AlertBox'\nimport { CopyButton } from '../../../components/CopyButton'\nimport { FormGroup } from '../../../components/FormGroup'\nimport { FormWrapper } from '../../../components/FormWrapper'\nimport { InputFieldNote } from '../../../components/InputFieldNote'\nimport { OtpCodeField } from '../../../components/OtpCodeField'\nimport { WebsiteButton } from '../../../components/WebsiteButton'\nimport { ATTACHMENTS_FIELD_KEY } from '../../../constants/formFields'\nimport { useGetMultipleFiles } from '../../../hooks/useGetMultipleFiles'\nimport {\n CompoundField,\n InputField,\n KeyIcon,\n PasswordField,\n UserIcon,\n WorldIcon\n} from '../../../lib-react-components'\nimport { formatPasskeyDate } from '../../../utils/formatPasskeyDate'\nimport { isPasswordChangeReminderDisabled } from '../../../utils/isPasswordChangeReminderDisabled'\nimport { AttachmentField } from '../../AttachmentField'\nimport { CustomFields } from '../../CustomFields'\n\n/**\n * @param {{\n * initialRecord: {\n * data: {\n * title: string\n * username: string\n * password: string\n * note: string\n * websites: string[]\n * customFields: {\n * type: string\n * name: string\n * }[]\n * attachments: { id: string, name: string}[]\n * }\n * }\n * selectedFolder?: string\n * }} props\n */\nexport const LoginRecordDetailsForm = ({ initialRecord, selectedFolder }) => {\n const { i18n } = useLingui()\n\n const initialValues = React.useMemo(\n () => ({\n username: initialRecord?.data?.username ?? '',\n password: initialRecord?.data?.password ?? '',\n note: initialRecord?.data?.note ?? '',\n websites: initialRecord?.data?.websites?.length\n ? initialRecord?.data?.websites.map((website) => ({ website }))\n : [{ name: 'website' }],\n customFields: initialRecord?.data.customFields ?? [],\n folder: selectedFolder ?? initialRecord?.folder,\n attachments: initialRecord?.attachments ?? [],\n credential: initialRecord?.data?.credential?.id ?? '',\n passkeyCreatedAt: initialRecord?.data?.passkeyCreatedAt\n }),\n [initialRecord, selectedFolder]\n )\n\n const { register, registerArray, setValues, values, setValue } = useForm({\n initialValues\n })\n\n const { value: websitesList, registerItem } = registerArray('websites')\n\n const { value: customFieldsList, registerItem: registerCustomFieldItem } =\n registerArray('customFields')\n\n useGetMultipleFiles({\n fieldNames: [ATTACHMENTS_FIELD_KEY],\n updateValues: setValue,\n initialRecord\n })\n\n const isPasswordSixMonthsOld = () => {\n const { passwordUpdatedAt } = initialRecord?.data || {}\n return (\n !!passwordUpdatedAt &&\n isBefore(passwordUpdatedAt, subtractDateUnits(6, 'month'))\n )\n }\n\n useEffect(() => {\n setValues(initialValues)\n }, [initialValues, setValues])\n\n return html`\n ${!isPasswordChangeReminderDisabled() &&\n isPasswordSixMonthsOld() &&\n html`\n <${AlertBox}\n message=${html`\n ${i18n._(\"It's been 6 months since you last updated this password\")}\n
\n ${i18n._('Consider changing it to keep your account secure.')}\n `}\n />\n `}\n <${FormWrapper}>\n <${FormGroup}>\n ${!!values?.username?.length &&\n html`\n <${InputField}\n label=${i18n._('Email or username')}\n placeholder=${i18n._('Email or username')}\n variant=\"outline\"\n icon=${UserIcon}\n isDisabled\n ...${register('username')}\n additionalItems=${html`\n <${CopyButton} value=${values.username} />\n `}\n />\n `}\n ${!!values?.password?.length &&\n html`\n <${PasswordField}\n label=${i18n._('Password')}\n placeholder=${i18n._('Password')}\n variant=\"outline\"\n icon=${KeyIcon}\n isDisabled\n ...${register('password')}\n additionalItems=${html`\n <${CopyButton} value=${values.password} />\n `}\n />\n `}\n \n\n ${!!values?.credential &&\n html`\n <${FormGroup}>\n <${InputField}\n label=${i18n._('Passkey')}\n value=${formatPasskeyDate(values.passkeyCreatedAt) ||\n i18n._('Passkey Stored')}\n variant=\"outline\"\n icon=${KeyIcon}\n isDisabled\n />\n \n `}\n ${!!initialRecord?.otpPublic &&\n html`\n <${FormGroup}>\n <${OtpCodeField}\n key=${initialRecord.id}\n recordId=${initialRecord.id}\n otpPublic=${initialRecord.otpPublic}\n />\n \n `}\n ${!!values?.websites?.length &&\n html`\n <${CompoundField}>\n ${websitesList.map(\n (website, index) => html`\n <${React.Fragment} key=${website.id}>\n <${InputField}\n label=${i18n._('Website')}\n placeholder=${i18n._('https://')}\n icon=${WorldIcon}\n ...${registerItem('website', index)}\n isDisabled\n additionalItems=${html`\n <${WebsiteButton}\n url=${registerItem('website', index).value}\n />\n <${CopyButton}\n value=${registerItem('website', index).value}\n />\n `}\n />\n \n `\n )}\n \n `}\n ${values?.attachments?.length > 0 &&\n html`\n <${FormGroup}>\n ${values.attachments.map(\n (attachment) => html`\n <${AttachmentField}\n label=${i18n._('File')}\n attachment=${attachment}\n />\n `\n )}\n \n `}\n\n <${FormGroup}>\n ${!!values?.note?.length &&\n html`\n <${InputFieldNote}\n ...${register('note')}\n isDisabled\n additionalItems=${html` <${CopyButton} value=${values.note} /> `}\n />\n `}\n \n\n <${CustomFields}\n customFields=${customFieldsList}\n register=${registerCustomFieldItem}\n areInputsDisabled=${true}\n />\n \n `\n}\n" }, { "path": "src/containers/RecordDetails/LoginRecordDetailsForm/utils.ts", "content": "type FieldRegistration = {\n name: string\n value: string\n onChange?: unknown\n error?: string\n}\n\nexport const toReadOnlyFieldProps = (field: FieldRegistration) => ({\n name: field.name,\n value: field.value\n})\n" }, { "path": "src/containers/RecordDetails/NoteDetailsForm/NoteDetailsFormV2.styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = () => ({\n container: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing8}px`,\n width: '100%'\n },\n section: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing12}px`\n }\n})\n" }, { "path": "src/containers/RecordDetails/NoteDetailsForm/NoteDetailsFormV2.tsx", "content": "import { useEffect, useMemo } from 'react'\n\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport {\n AttachmentField,\n InputField,\n MultiSlotInput,\n PasswordField,\n Text,\n useTheme\n} from '@tetherto/pearpass-lib-ui-kit'\nimport { html } from 'htm/react'\n\nimport { ATTACHMENTS_FIELD_KEY } from '../../../constants/formFields'\nimport { useModal } from '../../../context/ModalContext'\nimport { useCopyToClipboard } from '../../../hooks/useCopyToClipboard.electron'\nimport { useGetMultipleFiles } from '../../../hooks/useGetMultipleFiles'\nimport { useTranslation } from '../../../hooks/useTranslation'\nimport { DisplayPictureModalContentV2 } from '../../Modal/DisplayPictureModalContentV2/DisplayPictureModalContentV2'\nimport { createStyles } from './NoteDetailsFormV2.styles'\nimport { toReadOnlyFieldProps } from './utils'\n\ntype Attachment = {\n id?: string\n tempId?: string\n name: string\n buffer?: ArrayBuffer | Uint8Array\n}\n\ntype CustomField = {\n type: string\n name?: string\n note?: string\n}\n\ntype NoteRecord = {\n id: string\n folder?: string\n attachments?: Attachment[]\n data: {\n title?: string\n note?: string\n customFields?: CustomField[]\n }\n}\n\ntype NoteDetailsFormV2Props = {\n initialRecord?: NoteRecord\n selectedFolder?: string\n}\n\ntype NoteDetailsFormValues = {\n note: string\n customFields: CustomField[]\n folder?: string\n attachments: Attachment[]\n}\n\nconst IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp']\n\nconst getExtension = (filename?: string) =>\n filename?.split('.').pop()?.toLowerCase() ?? ''\n\nexport const NoteDetailsFormV2 = ({\n initialRecord,\n selectedFolder\n}: NoteDetailsFormV2Props) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const styles = createStyles()\n const { setModal } = useModal()\n const { copyToClipboard } = useCopyToClipboard()\n\n const initialValues = useMemo(\n () => ({\n note: initialRecord?.data?.note ?? '',\n customFields: initialRecord?.data?.customFields ?? [],\n folder: selectedFolder ?? initialRecord?.folder,\n attachments: initialRecord?.attachments ?? []\n }),\n [initialRecord, selectedFolder]\n )\n\n const { register, setValues, values, setValue } = useForm({ initialValues })\n\n useGetMultipleFiles({\n fieldNames: [ATTACHMENTS_FIELD_KEY],\n updateValues: setValue,\n initialRecord\n })\n\n useEffect(() => {\n setValues(initialValues)\n }, [initialValues, setValues])\n\n const hasNote = !!values.note?.length\n const hasCustomFields = !!values.customFields?.length\n const hasAttachments = !!values.attachments?.length\n\n const handleAttachmentPress = (attachment: Attachment) => {\n if (!attachment?.buffer || !attachment?.name) return\n\n const blob = new Blob([attachment.buffer as BlobPart])\n const url = URL.createObjectURL(blob)\n const isImage = IMAGE_EXTENSIONS.includes(getExtension(attachment.name))\n\n if (isImage) {\n setModal(\n html`<${DisplayPictureModalContentV2}\n url=${url}\n name=${attachment.name}\n />`\n )\n return\n }\n\n const a = document.createElement('a')\n a.href = url\n a.download = attachment.name\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n URL.revokeObjectURL(url)\n }\n \n return (\n
\n {hasNote && (\n
\n \n {t('Details')}\n \n\n \n \n \n
\n )}\n\n {(hasAttachments || hasCustomFields) && (\n
\n \n {t('Additional')}\n \n\n {hasAttachments && (\n \n {(values.attachments as Attachment[]).map((attachment, index) => (\n handleAttachmentPress(attachment)}\n />\n ))}\n \n )}\n\n {hasCustomFields && (\n \n {(values.customFields as CustomField[]).map((field, index) => (\n \n )}\n
\n )}\n
\n )\n}\n" }, { "path": "src/containers/RecordDetails/NoteDetailsForm/index.js", "content": "import React, { useEffect } from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { html } from 'htm/react'\n\nimport { CopyButton } from '../../../components/CopyButton'\nimport { FormGroup } from '../../../components/FormGroup'\nimport { FormWrapper } from '../../../components/FormWrapper'\nimport { ATTACHMENTS_FIELD_KEY } from '../../../constants/formFields'\nimport { useGetMultipleFiles } from '../../../hooks/useGetMultipleFiles'\nimport { TextArea } from '../../../lib-react-components'\nimport { AttachmentField } from '../../AttachmentField'\nimport { CustomFields } from '../../CustomFields'\n\n/**\n * @param {{\n * initialRecord: {\n * data: {\n * title: string\n * note: string\n * customFields: {\n * type: string\n * name: string\n * }[]\n * attachments: { id: string, name: string}[]\n * }\n * }\n * selectedFolder?: string\n * }} props\n */\nexport const NoteDetailsForm = ({ initialRecord, selectedFolder }) => {\n const { i18n } = useLingui()\n\n const initialValues = React.useMemo(\n () => ({\n note: initialRecord?.data?.note ?? '',\n customFields: initialRecord?.data?.customFields ?? [],\n folder: selectedFolder ?? initialRecord?.folder,\n attachments: initialRecord?.attachments ?? []\n }),\n [initialRecord, selectedFolder]\n )\n\n const { register, registerArray, setValues, values, setValue } = useForm({\n initialValues\n })\n\n const { value: list, registerItem } = registerArray('customFields')\n\n useGetMultipleFiles({\n fieldNames: [ATTACHMENTS_FIELD_KEY],\n updateValues: setValue,\n initialRecord\n })\n\n useEffect(() => {\n setValues(initialValues)\n }, [initialValues, setValues])\n\n return html`\n <${FormWrapper} data-id=\"note-details\">\n <${FormGroup}>\n ${!!values?.note?.length &&\n html`\n <${TextArea}\n ...${register('note')}\n placeholder=${i18n._('Write a comment...')}\n isDisabled\n additionalItems=${html`<${CopyButton} value=${values.note} />`}\n />\n `}\n \n ${values?.attachments?.length > 0 &&\n html`\n <${FormGroup}>\n ${values.attachments.map(\n (attachment) => html`\n <${AttachmentField}\n key=${attachment.id}\n label=${i18n._('File')}\n attachment=${attachment}\n />\n `\n )}\n \n `}\n <${CustomFields}\n areInputsDisabled=${true}\n customFields=${list}\n register=${registerItem}\n />\n \n `\n}\n" }, { "path": "src/containers/RecordDetails/NoteDetailsForm/utils.ts", "content": "type FieldRegistration = {\n name: string\n value: string\n onChange?: unknown\n error?: string\n}\n\nexport const toReadOnlyFieldProps = (field: FieldRegistration) => ({\n name: field.name,\n value: field.value\n})\n" }, { "path": "src/containers/RecordDetails/PassPhraseDetailsForm/PassPhraseDetailsFormV2.styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = () => ({\n container: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing8}px`,\n width: '100%'\n }\n})\n" }, { "path": "src/containers/RecordDetails/PassPhraseDetailsForm/PassPhraseDetailsFormV2.tsx", "content": "import { useEffect, useMemo } from 'react'\n\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport {\n InputField,\n MultiSlotInput,\n PasswordField\n} from '@tetherto/pearpass-lib-ui-kit'\n\nimport { useCopyToClipboard } from '../../../hooks/useCopyToClipboard.electron'\nimport { useTranslation } from '../../../hooks/useTranslation'\nimport { PassPhraseV2 } from '../../PassPhrase/PassPhraseV2'\nimport { createStyles } from './PassPhraseDetailsFormV2.styles'\nimport { toReadOnlyFieldProps } from './utils'\n\ntype CustomField = {\n type: string\n name?: string\n note?: string\n}\n\ntype PassPhraseRecord = {\n id: string\n folder?: string\n data: {\n title?: string\n passPhrase?: string\n note?: string\n customFields?: CustomField[]\n }\n}\n\ntype PassPhraseDetailsFormV2Props = {\n initialRecord?: PassPhraseRecord\n selectedFolder?: string\n}\n\ntype PassPhraseDetailsFormValues = {\n title: string\n passPhrase: string\n note: string\n customFields: CustomField[]\n folder?: string\n}\n\nexport const PassPhraseDetailsFormV2 = ({\n initialRecord,\n selectedFolder\n}: PassPhraseDetailsFormV2Props) => {\n const { t } = useTranslation()\n const styles = createStyles()\n const { copyToClipboard } = useCopyToClipboard()\n\n const initialValues = useMemo(\n () => ({\n title: initialRecord?.data?.title ?? '',\n passPhrase: initialRecord?.data?.passPhrase ?? '',\n note: initialRecord?.data?.note ?? '',\n customFields: initialRecord?.data?.customFields ?? [],\n folder: selectedFolder ?? initialRecord?.folder\n }),\n [initialRecord, selectedFolder]\n )\n\n const { register, setValues, values } = useForm({ initialValues })\n\n useEffect(() => {\n setValues(initialValues)\n }, [initialValues, setValues])\n\n const hasPassPhrase = !!values.passPhrase?.length\n const hasNote = !!values.note?.length\n const hasCustomFields = !!values.customFields?.length\n\n return (\n
\n {hasPassPhrase && }\n\n {hasNote && (\n \n \n \n )}\n\n {hasCustomFields && (\n \n {(values.customFields as CustomField[]).map((field, index) => (\n \n )}\n
\n )\n}\n" }, { "path": "src/containers/RecordDetails/PassPhraseDetailsForm/index.js", "content": "import React, { useEffect } from 'react'\n\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { html } from 'htm/react'\n\nimport { CopyButton } from '../../../components/CopyButton'\nimport { FormGroup } from '../../../components/FormGroup'\nimport { FormWrapper } from '../../../components/FormWrapper'\nimport { InputFieldNote } from '../../../components/InputFieldNote'\nimport { CustomFields } from '../../CustomFields'\nimport { PassPhrase } from '../../PassPhrase'\n\n/**\n * @param {{\n * initialRecord: {\n * data: {\n * title: string\n * passPhrase: string\n * note: string\n * customFields: {\n * type: string\n * name: string\n * }[]\n * }\n * }\n * selectedFolder?: string\n * }} props\n */\nexport const PassPhraseDetailsForm = ({ initialRecord, selectedFolder }) => {\n const initialValues = React.useMemo(\n () => ({\n title: initialRecord?.data?.title ?? '',\n passPhrase: initialRecord?.data?.passPhrase ?? '',\n note: initialRecord?.data?.note ?? '',\n customFields: initialRecord?.data?.customFields ?? [],\n folder: selectedFolder ?? initialRecord?.folder\n }),\n [initialRecord, selectedFolder]\n )\n\n const { register, registerArray, setValues, values } = useForm({\n initialValues\n })\n\n const { value: list, registerItem } = registerArray('customFields')\n\n useEffect(() => {\n setValues(initialValues)\n }, [initialValues, setValues])\n\n return html`\n <${FormWrapper} data-testid=\"recoveryphrase-details\">\n <${FormGroup}>\n ${!!values?.passPhrase?.length &&\n html`<${PassPhrase} ...${register('passPhrase')} /> `}\n \n\n <${FormGroup}>\n ${!!values?.note?.length &&\n html`\n <${InputFieldNote}\n ...${register('note')}\n additionalItems=${html` <${CopyButton} value=${values.note} /> `}\n isDisabled\n />\n `}\n \n\n <${CustomFields}\n areInputsDisabled=${true}\n customFields=${list}\n register=${registerItem}\n />\n \n `\n}\n" }, { "path": "src/containers/RecordDetails/PassPhraseDetailsForm/utils.ts", "content": "type FieldRegistration = {\n name: string\n value: string\n onChange?: unknown\n error?: string\n}\n\nexport const toReadOnlyFieldProps = (field: FieldRegistration) => ({\n name: field.name,\n value: field.value\n})\n" }, { "path": "src/containers/RecordDetails/RecordDetailsContent/index.js", "content": "import { RECORD_TYPES } from '@tetherto/pearpass-lib-vault'\nimport { html } from 'htm/react'\n\nimport { isV2 } from '../../../utils/designVersion'\nimport { CreditCardDetailsForm } from '../CreditCardDetailsForm'\nimport { CreditCardDetailsFormV2 } from '../CreditCardDetailsForm/CreditCardDetailsFormV2'\nimport { CustomDetailsForm } from '../CustomDetailsForm'\nimport { CustomDetailsFormV2 } from '../CustomDetailsForm/CustomDetailsFormV2'\nimport { IdentityDetailsForm } from '../IdentityDetailsForm'\nimport { IdentityDetailsFormV2 } from '../IdentityDetailsForm/IdentityDetailsFormV2'\nimport { LoginRecordDetailsForm } from '../LoginRecordDetailsForm'\nimport { LoginRecordDetailsFormV2 } from '../LoginRecordDetailsForm/LoginRecordDetailsFormV2'\nimport { NoteDetailsForm } from '../NoteDetailsForm'\nimport { NoteDetailsFormV2 } from '../NoteDetailsForm/NoteDetailsFormV2'\nimport { PassPhraseDetailsForm } from '../PassPhraseDetailsForm'\nimport { PassPhraseDetailsFormV2 } from '../PassPhraseDetailsForm/PassPhraseDetailsFormV2'\nimport { WifiDetailsForm } from '../WifiDetailsForm'\nimport { WifiDetailsFormV2 } from '../WifiDetailsForm/WifiDetailsFormV2'\n\n/**\n * @param {{\n * record: {\n * type: 'note' | 'creditCard' | 'custom' | 'identity' | 'login'\n * }\n * selectedFolder?: string\n * }} props\n */\nexport const RecordDetailsContent = ({ record, selectedFolder }) => {\n if (record?.type === RECORD_TYPES.CREDIT_CARD) {\n const CreditCardForm = isV2()\n ? CreditCardDetailsFormV2\n : CreditCardDetailsForm\n return html`<${CreditCardForm}\n initialRecord=${record}\n selectedFolder=${selectedFolder}\n />`\n }\n if (record?.type === RECORD_TYPES.CUSTOM) {\n const CustomForm = isV2() ? CustomDetailsFormV2 : CustomDetailsForm\n return html`<${CustomForm}\n initialRecord=${record}\n selectedFolder=${selectedFolder}\n />`\n }\n if (record?.type === RECORD_TYPES.IDENTITY) {\n const IdentityForm = isV2() ? IdentityDetailsFormV2 : IdentityDetailsForm\n return html`<${IdentityForm}\n initialRecord=${record}\n selectedFolder=${selectedFolder}\n />`\n }\n if (record?.type === RECORD_TYPES.LOGIN) {\n const LoginForm = isV2() ? LoginRecordDetailsFormV2 : LoginRecordDetailsForm\n return html`<${LoginForm}\n initialRecord=${record}\n selectedFolder=${selectedFolder}\n />`\n }\n if (record?.type === RECORD_TYPES.NOTE) {\n const NoteForm = isV2() ? NoteDetailsFormV2 : NoteDetailsForm\n return html`<${NoteForm}\n initialRecord=${record}\n selectedFolder=${selectedFolder}\n />`\n }\n if (record?.type === RECORD_TYPES.WIFI_PASSWORD) {\n const WifiForm = isV2() ? WifiDetailsFormV2 : WifiDetailsForm\n return html`<${WifiForm}\n initialRecord=${record}\n selectedFolder=${selectedFolder}\n />`\n }\n if (record?.type === RECORD_TYPES.PASS_PHRASE) {\n const PassPhraseForm = isV2()\n ? PassPhraseDetailsFormV2\n : PassPhraseDetailsForm\n return html`<${PassPhraseForm}\n initialRecord=${record}\n selectedFolder=${selectedFolder}\n />`\n }\n}\n" }, { "path": "src/containers/RecordDetails/RecordDetailsV2.styles.ts", "content": "import { rawTokens, type ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\n\nimport { HEADER_MIN_HEIGHT } from '../../constants/layout'\n\nexport const createStyles = (colors: ThemeColors) => ({\n root: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n width: '100%',\n height: '100%',\n backgroundColor: colors.colorSurfacePrimary,\n boxSizing: 'border-box' as const,\n overflowY: 'auto' as const\n },\n header: {\n display: 'flex' as const,\n alignItems: 'center' as const,\n height: `${HEADER_MIN_HEIGHT}px`,\n paddingInline: `${rawTokens.spacing12}px`,\n borderBottom: `1px solid ${colors.colorBorderPrimary}`,\n boxSizing: 'border-box' as const,\n flexShrink: 0\n },\n body: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing8}px`,\n padding: `${rawTokens.spacing16}px`\n }\n})\n" }, { "path": "src/containers/RecordDetails/RecordDetailsV2.tsx", "content": "import React, { useEffect, useState } from 'react'\n\nimport {\n Button,\n ContextMenu,\n ItemScreenHeader,\n NavbarListItem,\n rawTokens,\n useTheme\n} from '@tetherto/pearpass-lib-ui-kit'\nimport {\n KeyboardTab,\n ContentCopy,\n DriveFileMoveOutlined,\n EditOutlined,\n MoreVert,\n StarBorder,\n StarFilled,\n TrashOutlined\n} from '@tetherto/pearpass-lib-ui-kit/icons'\n// @ts-expect-error - declaration file is incomplete\nimport { RECORD_TYPES, useRecordById } from '@tetherto/pearpass-lib-vault'\n\nimport { RecordItemIcon } from '../../components/RecordItemIcon'\nimport { useRouter } from '../../context/RouterContext'\nimport { useRecordActionItems } from '../../hooks/useRecordActionItems'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { RecordDetailsContent } from './RecordDetailsContent'\nimport { createStyles } from './RecordDetailsV2.styles'\n\ntype RecordAction = {\n type: 'favorite' | 'edit' | 'move' | 'delete' | 'copy' | string\n name: string\n click?: () => void\n}\n\nconst ACTION_ICON_BY_TYPE: Record<\n string,\n React.ComponentType<{ color?: string }>\n> = {\n copy: ContentCopy,\n move: DriveFileMoveOutlined,\n edit: EditOutlined,\n delete: TrashOutlined\n}\n\nconst getActionIcon = (\n action: RecordAction,\n isFavorite: boolean,\n textColor: string,\n destructiveColor: string\n): React.ReactElement => {\n if (action.type === 'favorite') {\n const FavoriteIcon = isFavorite ? StarFilled : StarBorder\n return \n }\n const Icon = ACTION_ICON_BY_TYPE[action.type] ?? MoreVert\n const iconColor = action.type === 'delete' ? destructiveColor : textColor\n return \n}\n\ntype RecordShape = {\n id: string\n type: string\n isFavorite?: boolean\n folder?: string\n data?: {\n title?: string\n websites?: string[]\n }\n}\n\nexport const RecordDetailsV2 = () => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const styles = createStyles(theme.colors)\n const [isMenuOpen, setIsMenuOpen] = useState(false)\n const { currentPage, data: routerData, navigate } = useRouter()\n\n const { data: record } = useRecordById({\n variables: { id: routerData.recordId }\n }) as { data?: RecordShape }\n\n const { actions } = useRecordActionItems({\n excludeTypes: ['select', 'pin'],\n record,\n recordType:\n routerData?.recordType === RECORD_TYPES.OTP\n ? RECORD_TYPES.OTP\n : undefined,\n onClose: () => setIsMenuOpen(false)\n })\n\n const handleCollapse = () => {\n navigate(currentPage, { ...routerData, recordId: '' })\n }\n\n useEffect(() => {\n if (routerData.recordId && !record) handleCollapse()\n }, [record, routerData.recordId])\n\n if (!record) return null\n\n const title = record?.data?.title ?? ''\n\n const avatar = (\n \n )\n\n const headerActions = (\n \n }\n data-testid=\"details-button-actions-v2\"\n />\n }\n >\n {(actions as RecordAction[]).map((action, index, list) => (\n {\n setIsMenuOpen(false)\n action.click?.()\n }}\n testID={`details-actions-item-${action.type}-v2`}\n />\n ))}\n \n }\n onClick={handleCollapse}\n data-testid=\"details-button-close-v2\"\n />\n
\n )\n\n return (\n
\n
\n \n
\n\n
\n [0]['record']\n }\n />\n
\n
\n )\n}\n" }, { "path": "src/containers/RecordDetails/WifiDetailsForm/WifiDetailsFormV2.styles.ts", "content": "import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const createStyles = () => ({\n container: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing8}px`,\n width: '100%'\n },\n section: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: `${rawTokens.spacing12}px`\n }\n})\n" }, { "path": "src/containers/RecordDetails/WifiDetailsForm/WifiDetailsFormV2.tsx", "content": "import { useEffect, useMemo } from 'react'\n\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport {\n InputField,\n MultiSlotInput,\n PasswordField,\n Text,\n useTheme\n} from '@tetherto/pearpass-lib-ui-kit'\n\nimport { useCopyToClipboard } from '../../../hooks/useCopyToClipboard.electron'\nimport { useTranslation } from '../../../hooks/useTranslation'\nimport { WifiPasswordQRCodeV2 } from '../../WifiPasswordQRCode/WifiPasswordQRCodeV2'\nimport { createStyles } from './WifiDetailsFormV2.styles'\nimport { toReadOnlyFieldProps } from './utils'\n\ntype CustomField = {\n type: string\n name?: string\n note?: string\n}\n\ntype WifiRecord = {\n id: string\n folder?: string\n data: {\n title?: string\n password?: string\n note?: string\n customFields?: CustomField[]\n }\n}\n\ntype WifiDetailsFormV2Props = {\n initialRecord?: WifiRecord\n selectedFolder?: string\n}\n\ntype WifiDetailsFormValues = {\n title: string\n password: string\n note: string\n customFields: CustomField[]\n folder?: string\n}\n\nexport const WifiDetailsFormV2 = ({\n initialRecord,\n selectedFolder\n}: WifiDetailsFormV2Props) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const styles = createStyles()\n const { copyToClipboard } = useCopyToClipboard()\n\n const initialValues = useMemo(\n () => ({\n title: initialRecord?.data?.title ?? '',\n password: initialRecord?.data?.password ?? '',\n note: initialRecord?.data?.note ?? '',\n customFields: initialRecord?.data?.customFields ?? [],\n folder: selectedFolder ?? initialRecord?.folder\n }),\n [initialRecord, selectedFolder]\n )\n\n const { register, setValues, values } = useForm({ initialValues })\n\n useEffect(() => {\n setValues(initialValues)\n }, [initialValues, setValues])\n\n const hasPassword = !!values.password?.length\n const hasNote = !!values.note?.length\n const hasCustomFields = !!values.customFields?.length\n\n return (\n
\n {hasPassword && (\n
\n \n {t('Credentials')}\n \n\n \n \n \n \n
\n )}\n\n {(hasNote || hasCustomFields) && (\n
\n \n {t('Additional')}\n \n\n {hasNote && (\n \n \n \n )}\n\n {hasCustomFields && (\n \n {(values.customFields as CustomField[]).map((field, index) => (\n \n )}\n
\n )}\n
\n )\n}\n" }, { "path": "src/containers/RecordDetails/WifiDetailsForm/index.js", "content": "import React, { useEffect } from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks'\nimport { html } from 'htm/react'\n\nimport { CopyButton } from '../../../components/CopyButton'\nimport { FormGroup } from '../../../components/FormGroup'\nimport { FormWrapper } from '../../../components/FormWrapper'\nimport { InputFieldNote } from '../../../components/InputFieldNote'\nimport { ATTACHMENTS_FIELD_KEY } from '../../../constants/formFields'\nimport { useGetMultipleFiles } from '../../../hooks/useGetMultipleFiles'\nimport { PasswordField, PasswordIcon } from '../../../lib-react-components'\nimport { AttachmentField } from '../../AttachmentField'\nimport { CustomFields } from '../../CustomFields'\nimport { WifiPasswordQRCode } from '../../WifiPasswordQRCode'\n\n/**\n * @param {{\n * initialRecord: {\n * data: {\n * title: string\n * password: string\n * note: string\n * customFields: {\n * type: string\n * name: string\n * }[]\n * attachments: { id: string, name: string}[]\n * }\n * }\n * selectedFolder?: string\n * }} props\n */\nexport const WifiDetailsForm = ({ initialRecord, selectedFolder }) => {\n const { i18n } = useLingui()\n\n const initialValues = React.useMemo(\n () => ({\n password: initialRecord?.data?.password ?? '',\n note: initialRecord?.data?.note ?? '',\n customFields: initialRecord?.data?.customFields ?? [],\n folder: selectedFolder ?? initialRecord?.folder,\n attachments: initialRecord?.attachments ?? []\n }),\n [initialRecord, selectedFolder]\n )\n\n const { register, registerArray, setValues, values, setValue } = useForm({\n initialValues\n })\n\n const { value: list, registerItem } = registerArray('customFields')\n\n useGetMultipleFiles({\n fieldNames: [ATTACHMENTS_FIELD_KEY],\n updateValues: setValue,\n initialRecord\n })\n\n useEffect(() => {\n setValues(initialValues)\n }, [initialValues, setValues])\n\n return html`\n <${FormWrapper}>\n <${FormGroup}>\n ${!!values?.password?.length &&\n html`\n <${PasswordField}\n testId=\"wifidetails-field-password\"\n label=${i18n._('Password')}\n placeholder=${i18n._('Password')}\n belowInputContent=${html`\n <${WifiPasswordQRCode}\n ssid=${initialRecord?.data?.title}\n password=${values?.password}\n />\n `}\n variant=\"outline\"\n icon=${PasswordIcon}\n isDisabled\n ...${register('password')}\n additionalItems=${html`\n <${CopyButton} value=${values.password} />\n `}\n />\n `}\n \n\n <${FormGroup}>\n ${!!values?.note?.length &&\n html`\n <${InputFieldNote}\n testId=\"wifidetails-field-note\"\n ...${register('note')}\n isDisabled\n additionalItems=${html` <${CopyButton} value=${values.note} /> `}\n />\n `}\n \n ${values?.attachments?.length > 0 &&\n html`\n <${FormGroup}>\n ${values.attachments.map(\n (attachment) => html`\n <${AttachmentField}\n testId=\"wifidetails-attachment\"\n key=${attachment.id}\n label=${i18n._('File')}\n attachment=${attachment}\n />\n `\n )}\n \n `}\n <${CustomFields}\n areInputsDisabled=${true}\n customFields=${list}\n register=${registerItem}\n />\n \n `\n}\n" }, { "path": "src/containers/RecordDetails/WifiDetailsForm/utils.ts", "content": "type FieldRegistration = {\n name: string\n value: string\n onChange?: unknown\n error?: string\n}\n\nexport const toReadOnlyFieldProps = (field: FieldRegistration) => ({\n name: field.name,\n value: field.value\n})\n" }, { "path": "src/containers/RecordDetails/index.js", "content": "import React, { useEffect, useState } from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { generateAvatarInitials } from '@tetherto/pear-apps-utils-avatar-initials'\nimport { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport { useRecordById, useRecords } from '@tetherto/pearpass-lib-vault'\nimport { html } from 'htm/react'\n\nimport { RecordDetailsContent } from './RecordDetailsContent'\nimport { RecordDetailsV2 } from './RecordDetailsV2'\nimport {\n Fields,\n FavoriteButtonWrapper,\n FolderWrapper,\n Header,\n HeaderRight,\n RecordActions,\n Title,\n RecordInfo\n} from './styles'\nimport { PopupMenu } from '../../components/PopupMenu'\nimport { RecordActionsPopupContent } from '../../components/RecordActionsPopupContent'\nimport { RecordAvatar } from '../../components/RecordAvatar'\nimport { RECORD_COLOR_BY_TYPE } from '../../constants/recordColorByType'\nimport { useRouter } from '../../context/RouterContext'\nimport { useCreateOrEditRecord } from '../../hooks/useCreateOrEditRecord'\nimport { useRecordActionItems } from '../../hooks/useRecordActionItems'\nimport {\n BrushIcon,\n ButtonLittle,\n ButtonRoundIcon,\n CollapseIcon,\n FolderIcon,\n KebabMenuIcon,\n StarIcon\n} from '../../lib-react-components'\nimport { isV2 } from '../../utils/designVersion'\n\nexport const RecordDetails = () => {\n if (isV2()) {\n return html`<${RecordDetailsV2} />`\n }\n\n return html`<${RecordDetailsV1} />`\n}\n\nconst RecordDetailsV1 = () => {\n const { i18n } = useLingui()\n\n const [isOpen, setIsOpen] = useState(false)\n\n const { currentPage, data: routerData, navigate } = useRouter()\n\n const { data: record } = useRecordById({\n variables: { id: routerData.recordId }\n })\n\n const { handleCreateOrEditRecord } = useCreateOrEditRecord()\n const { updateFavoriteState } = useRecords()\n\n const DATA_ID_PREFIX_BY_TYPE = {\n note: 'note',\n custom: 'custom'\n }\n\n const dataIdPrefix = DATA_ID_PREFIX_BY_TYPE[record?.type]\n\n const { actions: rawActions } = useRecordActionItems({\n excludeTypes: ['select', 'pin'],\n record: record,\n onClose: () => {\n setIsOpen(false)\n }\n })\n\n const actions = dataIdPrefix\n ? rawActions.map((action) =>\n action.type === 'delete'\n ? { ...action, dataId: `${dataIdPrefix}-delete-button` }\n : action\n )\n : rawActions\n\n const handleEdit = () => {\n handleCreateOrEditRecord({\n recordType: record?.type,\n initialRecord: record\n })\n }\n\n const handleCollapseRecordDetails = () => {\n navigate(currentPage, { ...routerData, recordId: '' })\n }\n\n useEffect(() => {\n if (!record) {\n handleCollapseRecordDetails()\n }\n }, [record])\n\n if (!record) {\n return null\n }\n\n const domain = record.type === 'login' ? record?.data?.websites?.[0] : null\n\n return html`\n <${React.Fragment}>\n <${Header} data-testid=\"details-header\">\n <${RecordInfo}>\n <${RecordAvatar}\n testId=${`details-avatar-${generateAvatarInitials(record?.data?.title)}`}\n websiteDomain=${domain}\n initials=${generateAvatarInitials(record?.data?.title)}\n isFavorite=${record?.isFavorite}\n color=${RECORD_COLOR_BY_TYPE[record?.type]}\n />\n
\n <${Title} data-testid=${`details-title-${record?.id}`}>\n ${record?.data?.title}\n \n\n ${!!record?.folder &&\n html`\n <${FolderWrapper}\n data-testid=${`details-folder-${record?.folder ?? 'none'}`}\n >\n <${FolderIcon} size=\"24\" color=${colors.grey200.mode1} />\n ${record?.folder}\n \n `}\n
\n \n\n <${HeaderRight}>\n <${FavoriteButtonWrapper}\n data-testid=\"details-button-favorite\"\n favorite=${record?.isFavorite}\n onClick=${() =>\n updateFavoriteState([record?.id], !record?.isFavorite)}\n >\n <${StarIcon}\n size=\"24\"\n fill=${record?.isFavorite}\n color=${colors.primary400.mode1}\n />\n \n\n <${ButtonLittle}\n testId=\"details-button-edit\"\n dataId=${dataIdPrefix ? `${dataIdPrefix}-edit-button` : undefined}\n startIcon=${BrushIcon}\n onClick=${handleEdit}\n >\n ${i18n._('Edit')}\n \n\n <${RecordActions}>\n <${PopupMenu}\n side=\"right\"\n align=\"right\"\n isOpen=${isOpen}\n setIsOpen=${setIsOpen}\n content=${html`\n <${RecordActionsPopupContent} menuItems=${actions} />\n `}\n >\n <${ButtonRoundIcon}\n data-testid=\"details-button-actions\"\n startIcon=${KebabMenuIcon}\n />\n \n \n\n <${ButtonRoundIcon}\n testId=\"details-close-button\"\n startIcon=${CollapseIcon}\n onClick=${handleCollapseRecordDetails}\n />\n \n \n <${Fields}>\n <${RecordDetailsContent} record=${record} />\n \n \n `\n}\n" }, { "path": "src/containers/RecordDetails/styles.js", "content": "import styled from 'styled-components'\n\nexport const Header = styled.div`\n display: flex;\n justify-content: space-between;\n`\n\nexport const RecordInfo = styled.div`\n display: flex;\n gap: 10px;\n align-items: center;\n`\n\nexport const Title = styled.div`\n color: ${({ theme }) => theme.colors.white.dark};\n font-family: 'Inter';\n font-size: 16px;\n font-weight: 700;\n`\n\nexport const FolderWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 5px;\n color: ${({ theme }) => theme.colors.grey200.dark};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 400;\n margin-top: 2px;\n`\n\nexport const HeaderRight = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n`\n\nexport const FavoriteButtonWrapper = styled.div.withConfig({\n shouldForwardProp: (prop) => !['favorite'].includes(prop)\n})`\n display: flex;\n cursor: pointer;\n\n & path {\n fill: ${({ favorite, theme }) => favorite && theme.colors.primary400.mode1};\n }\n`\n\nexport const Fields = styled.div`\n display: flex;\n flex-direction: column;\n gap: 15px;\n margin-top: 15px;\n padding-bottom: 24px;\n`\n\nexport const RecordActions = styled.div`\n display: flex;\n`\n" }, { "path": "src/containers/RecordListView/RecordListViewV2.styles.ts", "content": "import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\nimport { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nimport { FADE_GRADIENT_HEIGHT } from '../../constants/layout'\n\nexport const createStyles = (colors: ThemeColors) => ({\n wrapper: {\n position: 'relative' as const,\n display: 'flex' as const,\n flexDirection: 'column' as const,\n flex: 1,\n minHeight: 0,\n width: '100%'\n },\n\n scrollArea: {\n flex: 1,\n minHeight: 0,\n overflowY: 'auto' as const,\n overflowX: 'hidden' as const,\n paddingInline: `${rawTokens.spacing12}px`,\n paddingTop: `${rawTokens.spacing12}px`,\n paddingBottom: `${FADE_GRADIENT_HEIGHT}px`,\n display: 'flex' as const,\n flexDirection: 'column' as const\n },\n\n section: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: 2\n },\n\n sectionHeader: {\n display: 'flex' as const,\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n gap: `${rawTokens.spacing4}px`,\n paddingBlock: `${rawTokens.spacing8}px`,\n paddingInline: `${rawTokens.spacing4}px`,\n background: 'transparent',\n border: 'none',\n cursor: 'pointer' as const,\n userSelect: 'none' as const,\n color: colors.colorTextSecondary,\n width: '100%'\n },\n\n staticSectionHeader: {\n display: 'flex' as const,\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n gap: `${rawTokens.spacing4}px`,\n paddingBlock: `${rawTokens.spacing8}px`,\n paddingInline: `${rawTokens.spacing4}px`,\n background: 'transparent',\n border: 'none',\n userSelect: 'none' as const,\n color: colors.colorTextPrimary,\n width: '100%'\n },\n\n sectionHeaderChevron: {\n width: 16,\n height: 16,\n display: 'flex' as const,\n alignItems: 'center' as const,\n justifyContent: 'center' as const,\n transition: 'transform 150ms ease',\n flexShrink: 0\n },\n\n sectionHeaderChevronCollapsed: {\n transform: 'rotate(-90deg)'\n },\n\n sectionList: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: 1\n },\n\n recordRow: {\n cursor: 'pointer' as const\n },\n\n divider: {\n width: '100%',\n height: 1,\n alignSelf: 'stretch' as const,\n backgroundColor: colors.colorBorderPrimary,\n marginBlock: `${rawTokens.spacing8}px`,\n flexShrink: 0\n },\n\n rowRightElement: {\n display: 'flex' as const,\n alignItems: 'center' as const,\n gap: `${rawTokens.spacing4}px`\n },\n\n rowChevron: {\n display: 'flex' as const,\n alignItems: 'center' as const,\n justifyContent: 'center' as const,\n transform: 'rotate(-90deg)'\n },\n\n fadeGradient: {\n position: 'absolute' as const,\n left: 0,\n right: 0,\n bottom: 0,\n height: FADE_GRADIENT_HEIGHT,\n pointerEvents: 'none' as const,\n background: `linear-gradient(180deg, ${colors.colorSurfacePrimary}00 0%, ${colors.colorSurfacePrimary} 100%)`\n }\n})\n" }, { "path": "src/containers/RecordListView/RecordListViewV2.test.tsx", "content": "import React from 'react'\n\nimport '@testing-library/jest-dom'\nimport { fireEvent, render, screen } from '@testing-library/react'\n\nimport type { RecordSection } from '../../utils/groupRecordsByTimePeriod'\n\nconst mockNavigate = jest.fn()\nlet mockRouterData: Record = {}\n\njest.mock('../../context/RouterContext', () => ({\n useRouter: () => ({\n currentPage: 'vault',\n data: mockRouterData,\n navigate: (...args: unknown[]) => mockNavigate(...args)\n })\n}))\n\njest.mock('../../hooks/useTranslation', () => ({\n useTranslation: () => ({ t: (key: string) => key })\n}))\n\njest.mock('../../components/RecordItemIcon', () => {\n const React = require('react')\n return {\n RecordItemIcon: ({ record }: { record: { id: string } }) =>\n React.createElement('div', {\n 'data-testid': `record-icon-${record.id}`\n })\n }\n})\n\njest.mock('@tetherto/pearpass-lib-ui-kit', () => {\n const React = require('react')\n return {\n useTheme: () => ({\n theme: {\n colors: {\n colorTextSecondary: '#888',\n colorSurfaceDestructiveElevated: '#f00',\n colorBorderPrimary: '#222',\n colorSurfacePrimary: '#000'\n }\n }\n }),\n rawTokens: new Proxy({}, { get: () => 0 }),\n ListItem: ({\n title,\n subtitle,\n onClick,\n testID,\n isSelected,\n selectionMode,\n rightElement\n }: {\n title: string\n subtitle?: string\n onClick?: () => void\n testID?: string\n isSelected?: boolean\n selectionMode?: string\n rightElement?: React.ReactNode\n }) =>\n React.createElement(\n 'button',\n {\n type: 'button',\n 'data-testid': testID,\n 'data-selected': isSelected ? 'true' : 'false',\n 'data-selection-mode': selectionMode,\n onClick\n },\n [\n React.createElement('span', { key: 'title' }, title),\n subtitle\n ? React.createElement('span', { key: 'subtitle' }, subtitle)\n : null,\n rightElement\n ? React.createElement(\n 'div',\n { key: 'right', 'data-testid': `${testID}-right` },\n rightElement\n )\n : null\n ]\n )\n }\n})\n\njest.mock('@tetherto/pearpass-lib-ui-kit/icons', () => {\n const React = require('react')\n const Stub = (name: string) =>\n React.forwardRef((_: Record, _ref: unknown) =>\n React.createElement('span', { 'data-icon': name })\n )\n return {\n ExpandMore: Stub('ExpandMore'),\n StarFilled: Stub('StarFilled'),\n ErrorFilled: Stub('ErrorFilled')\n }\n})\n\njest.mock('./RecordRowContextMenuV2', () => {\n return {\n RecordRowContextMenuV2: () => null\n }\n})\n\nimport { RecordListViewV2 } from './RecordListViewV2'\n\nconst makeSection = (\n key: string,\n titles: string[],\n extras?: Partial\n): RecordSection => ({\n key,\n title: key,\n data: titles.map((title, i) => ({\n id: `${key}-${i}`,\n type: 'login',\n data: { title, username: `${title.toLowerCase()}@example.com` }\n })),\n ...extras\n})\n\ndescribe('RecordListViewV2', () => {\n beforeEach(() => {\n mockRouterData = {}\n mockNavigate.mockReset()\n })\n\n it('renders sections with titles translated and rows per record', () => {\n const sections: RecordSection[] = [\n makeSection('favorites', ['Fav One'], { isFavorites: true }),\n makeSection('today', ['Today Item'])\n ]\n render()\n\n expect(screen.getByText('Favorites')).toBeInTheDocument()\n expect(screen.getByText('Today')).toBeInTheDocument()\n expect(screen.getByText('Fav One')).toBeInTheDocument()\n expect(screen.getByText('Today Item')).toBeInTheDocument()\n })\n\n it('collapses a section when its header is clicked', () => {\n const sections: RecordSection[] = [makeSection('today', ['Row'])]\n render()\n\n expect(screen.getByText('Row')).toBeInTheDocument()\n fireEvent.click(screen.getByTestId('record-list-section-today'))\n expect(screen.queryByText('Row')).not.toBeInTheDocument()\n })\n\n it('navigates to record details on row click when not in multi-select', () => {\n mockRouterData = { recordType: 'login' }\n const sections: RecordSection[] = [makeSection('today', ['Row'])]\n render()\n\n fireEvent.click(screen.getByTestId('record-list-item-today-0'))\n expect(mockNavigate).toHaveBeenCalledWith('vault', {\n recordId: 'today-0',\n recordType: 'login'\n })\n })\n\n it('toggles selection instead of navigating when multi-select is on', () => {\n const setSelectedRecords = jest.fn()\n const sections: RecordSection[] = [makeSection('today', ['Row A', 'Row B'])]\n render(\n \n )\n\n fireEvent.click(screen.getByTestId('record-list-item-today-1'))\n expect(mockNavigate).not.toHaveBeenCalled()\n expect(setSelectedRecords).toHaveBeenCalledTimes(1)\n const updater = setSelectedRecords.mock.calls[0][0] as (\n prev: string[]\n ) => string[]\n expect(updater(['today-0'])).toEqual(['today-0', 'today-1'])\n expect(updater(['today-0', 'today-1'])).toEqual(['today-0'])\n })\n\n it('renders a divider between each pair of sections but not after the last', () => {\n const sections: RecordSection[] = [\n makeSection('today', ['A']),\n makeSection('yesterday', ['B']),\n makeSection('older', ['C'])\n ]\n render()\n expect(screen.getAllByRole('separator')).toHaveLength(2)\n expect(screen.getByTestId('record-list-divider-today')).toBeInTheDocument()\n expect(\n screen.getByTestId('record-list-divider-yesterday')\n ).toBeInTheDocument()\n expect(\n screen.queryByTestId('record-list-divider-older')\n ).not.toBeInTheDocument()\n })\n})\n" }, { "path": "src/containers/RecordListView/RecordListViewV2.tsx", "content": "import React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { ListItem, useTheme } from '@tetherto/pearpass-lib-ui-kit'\nimport {\n ErrorFilled,\n ExpandMore,\n StarFilled\n} from '@tetherto/pearpass-lib-ui-kit/icons'\n\nimport { createStyles } from './RecordListViewV2.styles'\nimport { RecordRowContextMenuV2 } from './RecordRowContextMenuV2'\nimport { RecordItemIcon } from '../../components/RecordItemIcon'\nimport { useRouter } from '../../context/RouterContext'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { getRecordSubtitle } from '../../utils/getRecordSubtitle'\nimport type {\n RecordSection,\n VaultRecord\n} from '../../utils/groupRecordsByTimePeriod'\n\nconst ROW_RECORD_ID_ATTR = 'data-record-id'\n\ntype RecordListViewV2Props = {\n sections: RecordSection[]\n isMultiSelectOn?: boolean\n selectedRecords?: string[]\n setSelectedRecords?: (\n updater: string[] | ((prev: string[]) => string[])\n ) => void\n setIsMultiSelectOn?: (value: boolean) => void\n}\n\ntype ActiveContextMenu = {\n record: VaultRecord\n position: { x: number; y: number }\n}\n\nconst SECTION_TITLE_KEYS: Record = {\n favorites: 'Favorites',\n all: 'All Items',\n today: 'Today',\n yesterday: 'Yesterday',\n thisWeek: 'This Week',\n thisMonth: 'This Month',\n older: 'Older'\n}\n\nexport const RecordListViewV2 = ({\n sections,\n isMultiSelectOn = false,\n selectedRecords = [],\n setSelectedRecords,\n setIsMultiSelectOn\n}: RecordListViewV2Props) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const { currentPage, navigate, data: routeData } = useRouter()\n const styles = createStyles(theme.colors)\n\n const [collapsedSections, setCollapsedSections] = useState<\n Record\n >({})\n const [activeMenu, setActiveMenu] = useState(null)\n\n const allRecords = useMemo(\n () => sections.flatMap((s) => s.data),\n [sections]\n )\n\n const toggleSection = useCallback((key: string) => {\n setCollapsedSections((prev) => ({ ...prev, [key]: !prev[key] }))\n }, [])\n\n const selectedRecordsSet = useMemo(\n () => new Set(selectedRecords),\n [selectedRecords]\n )\n\n const handleRecordPress = useCallback(\n (record: VaultRecord) => {\n if (isMultiSelectOn) {\n setSelectedRecords?.((prev) =>\n prev.includes(record.id)\n ? prev.filter((id) => id !== record.id)\n : [...prev, record.id]\n )\n return\n }\n const isAlreadyOpen = routeData?.recordId === record.id\n navigate(currentPage, {\n recordId: isAlreadyOpen ? '' : record.id,\n recordType: routeData?.recordType\n })\n },\n [\n isMultiSelectOn,\n setSelectedRecords,\n navigate,\n currentPage,\n routeData?.recordId,\n routeData?.recordType\n ]\n )\n\n const handleRowContextMenu = useCallback(\n (event: React.MouseEvent, record: VaultRecord) => {\n if (isMultiSelectOn) return\n event.preventDefault()\n setActiveMenu({\n record,\n position: { x: event.clientX, y: event.clientY }\n })\n },\n [isMultiSelectOn]\n )\n\n // The overlay covers rows while open; re-target right-clicks via the\n // element stack at the cursor.\n useEffect(() => {\n if (!activeMenu) return\n const handler = (event: MouseEvent) => {\n event.preventDefault()\n const stack = document.elementsFromPoint(event.clientX, event.clientY)\n let recordId: string | null = null\n for (const el of stack) {\n const row = (el as HTMLElement).closest?.(`[${ROW_RECORD_ID_ATTR}]`) as\n | HTMLElement\n | null\n if (row) {\n recordId = row.getAttribute(ROW_RECORD_ID_ATTR)\n break\n }\n }\n const next = recordId\n ? allRecords.find((r) => r.id === recordId)\n : undefined\n setActiveMenu(\n next\n ? { record: next, position: { x: event.clientX, y: event.clientY } }\n : null\n )\n }\n document.addEventListener('contextmenu', handler, true)\n return () => document.removeEventListener('contextmenu', handler, true)\n }, [activeMenu, allRecords])\n\n const iconColor = theme.colors.colorTextSecondary\n const alertColor = theme.colors.colorSurfaceDestructiveElevated\n\n return (\n
\n
\n {sections.map((section, sectionIndex) => {\n const isCollapsed = !!collapsedSections[section.key]\n const labelKey = SECTION_TITLE_KEYS[section.key] ?? section.title\n const label = t(labelKey)\n const isLastSection = sectionIndex === sections.length - 1\n\n return (\n \n
\n toggleSection(section.key)}\n data-testid={`record-list-section-${section.key}`}\n >\n \n \n
\n\n {section.isFavorites && (\n \n )}\n\n {label}\n \n\n {!isCollapsed && (\n
\n {section.data.map((record) => {\n const isSelected = selectedRecordsSet.has(record.id)\n return (\n \n handleRowContextMenu(event, record)\n }\n >\n }\n iconSize={32}\n title={record.data?.title ?? ''}\n subtitle={getRecordSubtitle(record) || undefined}\n selectionMode={\n isMultiSelectOn ? 'multi' : 'none'\n }\n isSelected={isSelected}\n onSelect={() => handleRecordPress(record)}\n onClick={() => handleRecordPress(record)}\n testID={`record-list-item-${record.id}`}\n isCheckboxSelectable={false}\n style={\n styles.recordRow as React.ComponentProps<\n typeof ListItem\n >['style']\n }\n rightElement={\n !isMultiSelectOn ? (\n
\n {record.hasSecurityAlert && (\n \n )}\n
\n \n
\n
\n ) : undefined\n }\n />\n
\n )\n })}\n
\n )}\n
\n {!isLastSection && (\n \n )}\n \n )\n })}\n
\n\n
\n\n {activeMenu && (\n {\n if (!open) setActiveMenu(null)\n }}\n setIsMultiSelectOn={setIsMultiSelectOn}\n setSelectedRecords={setSelectedRecords}\n />\n )}\n
\n )\n}\n" }, { "path": "src/containers/RecordListView/RecordRowContextMenuV2.styles.ts", "content": "import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\nimport { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const RECORD_ROW_CONTEXT_MENU_WIDTH = 240\n\nexport const createStyles = (colors: ThemeColors) => ({\n menuDivider: {\n width: '100%',\n height: 1,\n border: 'none',\n margin: 0,\n marginBlock: rawTokens.spacing4,\n backgroundColor: colors.colorBorderPrimary,\n flexShrink: 0\n }\n})\n" }, { "path": "src/containers/RecordListView/RecordRowContextMenuV2.tsx", "content": "import React, {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState\n} from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { UNSUPPORTED } from '@tetherto/pearpass-lib-constants'\nimport { NavbarListItem, useTheme } from '@tetherto/pearpass-lib-ui-kit'\nimport {\n CheckBox,\n CopyAll,\n DriveFileMoveOutlined,\n EditOutlined,\n Share,\n StarOutlined,\n TrashOutlined\n} from '@tetherto/pearpass-lib-ui-kit/icons'\n// @ts-expect-error - declaration file is incomplete\nimport { useCreateRecord, useRecords, vaultGetFile } from '@tetherto/pearpass-lib-vault'\n\nimport {\n createStyles,\n RECORD_ROW_CONTEXT_MENU_WIDTH\n} from './RecordRowContextMenuV2.styles'\nimport { useModal } from '../../context/ModalContext'\nimport { useCreateOrEditRecord } from '../../hooks/useCreateOrEditRecord'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { logger } from '../../utils/logger'\nimport type { VaultRecord } from '../../utils/groupRecordsByTimePeriod'\nimport { DeleteRecordsModalContentV2 } from '../Modal/DeleteRecordsModalContentV2'\nimport { MoveFolderModalContentV2 } from '../Modal/MoveFolderModalContentV2/MoveFolderModalContentV2'\n\nconst VIEWPORT_MARGIN = 8\n\nconst MENU_BOX_SHADOW =\n '0 185px 52px 0 rgba(8,10,5,0.01), 0 118px 47px 0 rgba(8,10,5,0.06), 0 67px 40px 0 rgba(8,10,5,0.20), 0 30px 30px 0 rgba(8,10,5,0.34), 0 7px 16px 0 rgba(8,10,5,0.39)'\n\ntype RecordRowContextMenuV2Props = {\n record: VaultRecord\n open: boolean\n position: { x: number; y: number }\n onOpenChange: (open: boolean) => void\n setIsMultiSelectOn?: (value: boolean) => void\n setSelectedRecords?: (\n updater: string[] | ((prev: string[]) => string[])\n ) => void\n}\n\ntype FileAttachment = { id: string; name: string }\n\nexport const RecordRowContextMenuV2 = ({\n record,\n open,\n position,\n onOpenChange,\n setIsMultiSelectOn,\n setSelectedRecords\n}: RecordRowContextMenuV2Props) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const styles = createStyles(theme.colors)\n const { setModal } = useModal()\n const { handleCreateOrEditRecord } = useCreateOrEditRecord()\n const { updateFavoriteState } = useRecords() as {\n updateFavoriteState: (ids: string[], value: boolean) => Promise | void\n }\n const { createRecord } = useCreateRecord()\n\n const close = useCallback(() => onOpenChange(false), [onOpenChange])\n\n const handleEdit = useCallback(() => {\n close()\n handleCreateOrEditRecord({\n recordType: record.type,\n initialRecord: record\n })\n }, [close, handleCreateOrEditRecord, record])\n\n const handleToggleFavorite = useCallback(() => {\n close()\n void updateFavoriteState([record.id], !record.isFavorite)\n }, [close, updateFavoriteState, record.id, record.isFavorite])\n\n const handleSelectItem = useCallback(() => {\n close()\n setIsMultiSelectOn?.(true)\n setSelectedRecords?.((prev) =>\n prev.includes(record.id) ? prev : [...prev, record.id]\n )\n }, [close, setIsMultiSelectOn, setSelectedRecords, record.id])\n\n const handleShareItem = useCallback(() => {\n close()\n }, [close])\n\n const handleMove = useCallback(() => {\n close()\n setModal()\n }, [close, setModal, record])\n\n const fetchFileBuffers = useCallback(\n async (files: FileAttachment[] | undefined) => {\n if (!files?.length) return []\n return Promise.all(\n files.map(async ({ id, name }) => {\n const buffer = await vaultGetFile(`record/${record.id}/file/${id}`)\n return { name, buffer }\n })\n )\n },\n [record.id]\n )\n\n const handleDuplicate = useCallback(async () => {\n close()\n try {\n const data: Record = { ...(record.data ?? {}) }\n\n data.attachments = await fetchFileBuffers(\n record.data?.attachments as FileAttachment[] | undefined\n )\n\n if (record.type === 'identity') {\n data.passportPicture = await fetchFileBuffers(\n record.data?.passportPicture as FileAttachment[] | undefined\n )\n data.idCardPicture = await fetchFileBuffers(\n record.data?.idCardPicture as FileAttachment[] | undefined\n )\n data.drivingLicensePicture = await fetchFileBuffers(\n record.data?.drivingLicensePicture as FileAttachment[] | undefined\n )\n }\n\n await createRecord({\n type: record.type,\n folder: record.folder,\n isFavorite: record.isFavorite,\n data\n })\n } catch (error) {\n logger.error('RecordRowContextMenuV2', 'Failed to duplicate record', error)\n }\n }, [close, createRecord, fetchFileBuffers, record])\n\n const handleDelete = useCallback(() => {\n close()\n setModal()\n }, [close, setModal, record])\n\n const textPrimary = theme.colors.colorTextPrimary\n const destructive = theme.colors.colorSurfaceDestructiveElevated\n\n const items = useMemo(\n () => [\n {\n key: 'edit',\n label: t('Edit'),\n icon: ,\n onClick: handleEdit\n },\n {\n key: 'favorite',\n label: record.isFavorite\n ? t('Remove from Favorites')\n : t('Add to Favorites'),\n icon: ,\n onClick: handleToggleFavorite\n },\n {\n key: 'select',\n label: t('Select Item'),\n icon: ,\n onClick: handleSelectItem\n },\n ...(UNSUPPORTED\n ? [\n {\n key: 'share',\n label: t('Share Item'),\n icon: ,\n onClick: handleShareItem\n }\n ]\n : []),\n {\n key: 'move',\n label: t('Move to Another Folder'),\n icon: ,\n onClick: handleMove\n },\n {\n key: 'duplicate',\n label: t('Duplicate'),\n icon: ,\n onClick: handleDuplicate\n }\n ],\n [\n t,\n textPrimary,\n record.isFavorite,\n handleEdit,\n handleToggleFavorite,\n handleSelectItem,\n handleShareItem,\n handleMove,\n handleDuplicate\n ]\n )\n\n const menuRef = useRef(null)\n // null until measured — keeps the menu hidden to avoid a one-frame flash.\n const [coords, setCoords] = useState<{\n top: number\n left: number\n } | null>(null)\n\n useLayoutEffect(() => {\n if (!open) {\n setCoords(null)\n return\n }\n const el = menuRef.current\n if (!el) return\n\n const rect = el.getBoundingClientRect()\n const viewportWidth =\n typeof window !== 'undefined' ? window.innerWidth : Infinity\n const viewportHeight =\n typeof window !== 'undefined' ? window.innerHeight : Infinity\n\n const maxLeft = Math.max(\n VIEWPORT_MARGIN,\n viewportWidth - rect.width - VIEWPORT_MARGIN\n )\n const left = Math.min(Math.max(position.x, VIEWPORT_MARGIN), maxLeft)\n\n const fitsBelow =\n position.y + rect.height <= viewportHeight - VIEWPORT_MARGIN\n const top = fitsBelow\n ? position.y\n : Math.max(VIEWPORT_MARGIN, position.y - rect.height)\n\n setCoords({ top, left })\n }, [open, position.x, position.y])\n\n useEffect(() => {\n if (!open) return\n const handler = (event: KeyboardEvent) => {\n if (event.key === 'Escape') close()\n }\n document.addEventListener('keydown', handler)\n return () => document.removeEventListener('keydown', handler)\n }, [open, close])\n\n if (!open || typeof document === 'undefined') return null\n\n const visibility = coords === null ? 'hidden' : 'visible'\n const top = coords?.top ?? position.y\n const left = coords?.left ?? position.x\n\n return createPortal(\n <>\n event.preventDefault()}\n style={{\n position: 'fixed',\n inset: 0,\n backgroundColor: 'transparent',\n zIndex: 999\n }}\n />\n \n {items.map((item) => (\n \n ))}\n \n }\n label={t('Delete Item')}\n onClick={handleDelete}\n testID={`record-row-menu-delete-${record.id}`}\n />\n
\n ,\n document.body\n )\n}\n" }, { "path": "src/containers/RecordListView/index.tsx", "content": "import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport type { Dispatch, SetStateAction } from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { useRecords } from '@tetherto/pearpass-lib-vault'\n\nimport {\n ActionsSection,\n DatePeriod,\n Folder,\n LeftActions,\n RecordsSection,\n RightActions,\n ViewWrapper\n} from './styles'\nimport { isStartOfLast14DaysGroup, isStartOfLast7DaysGroup } from './utils'\nimport { PopupMenu } from '../../components/PopupMenu'\nimport { Record } from '../../components/Record'\nimport { RecordSortActionsPopupContent } from '../../components/RecordSortActionsPopupContent'\nimport { useModal } from '../../context/ModalContext'\nimport { useRouter } from '../../context/RouterContext'\nimport {\n ArrowUpAndDown,\n ButtonFilter,\n DeleteIcon,\n FolderIcon,\n MoveToIcon,\n MultiSelectionIcon,\n StarIcon,\n TimeIcon,\n XIcon\n} from '../../lib-react-components'\nimport { FAVORITES_FOLDER_ID } from '../../utils/isFavorite'\nimport { isV2 } from '../../utils/designVersion'\nimport { ConfirmationModalContent } from '../Modal/ConfirmationModalContent'\nimport { MoveFolderModalContent } from '../Modal/MoveFolderModalContent'\nimport { MoveFolderModalContentV2 } from '../Modal/MoveFolderModalContentV2/MoveFolderModalContentV2'\n\nconst ITEM_HEIGHT_RECORD = 45\nconst ITEM_HEIGHT_HEADER = 30\nconst ITEM_GAP = 5\nconst OVERSCAN = 5\n\ntype VirtualItem =\n | { kind: 'header'; label: string; index: number }\n | { kind: 'record'; record: RecordItem; index: number }\n\ntype SortType = 'recent' | 'newToOld' | 'oldToNew'\n\ntype RecordItem = {\n id: string\n createdAt: number\n updatedAt: number\n isFavorite: boolean\n vaultId: string\n folder: string\n type: 'note' | 'creditCard' | 'custom' | 'identity' | 'login'\n data?: {\n title?: string\n [key: string]: unknown\n }\n otpPublic?: {\n currentCode?: string | null\n }\n}\n\ntype SortAction = {\n name: string\n icon: React.ComponentType\n type: SortType\n}\n\ntype RecordListViewProps = {\n records: RecordItem[]\n selectedRecords: RecordItem[]\n setSelectedRecords: Dispatch>\n sortType: SortType\n setSortType: (type: SortType) => void\n}\n\nconst PopupMenuComponent = PopupMenu as React.ComponentType<{\n direction:\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'topRight'\n | 'topLeft'\n | 'bottomRight'\n | 'bottomLeft'\n isOpen: boolean\n setIsOpen: (value: boolean) => void\n content: React.ReactNode\n children: React.ReactNode\n}>\nconst RecordComponent = Record as React.ComponentType<{\n testId: string\n dataId: string\n record: RecordItem\n isSelected: boolean\n otpCode: string | null\n onSelect: (record: RecordItem, isSelected: boolean) => void\n onClick: (record: RecordItem, isSelected: boolean) => void\n}>\nconst RecordSortActionsPopupContentComponent =\n RecordSortActionsPopupContent as unknown as React.ComponentType<{\n onClick: (type: SortType) => void\n onClose: () => void\n selectedType: SortType\n menuItems: SortAction[]\n }>\n\nexport const RecordListView = ({\n records,\n selectedRecords,\n setSelectedRecords,\n sortType,\n setSortType\n}: RecordListViewProps) => {\n const { i18n } = useLingui()\n const { currentPage, navigate, data: routeData } = useRouter()\n const { setModal, closeModal } = useModal()\n\n const { deleteRecords } = useRecords()\n\n const [isSortPopupOpen, setIsSortPopupOpen] = useState(false)\n const [isMultiSelect, setIsMultiSelect] = useState(false)\n\n const navigateRef = useRef(navigate)\n const currentPageRef = useRef(currentPage)\n const recordTypeRef = useRef(routeData.recordType)\n const isMultiSelectRef = useRef(isMultiSelect)\n\n navigateRef.current = navigate\n currentPageRef.current = currentPage\n recordTypeRef.current = routeData.recordType\n isMultiSelectRef.current = isMultiSelect\n\n const sortActions: SortAction[] = [\n { name: i18n._('Recent'), icon: TimeIcon, type: 'recent' },\n {\n name: i18n._('Newest to oldest'),\n icon: ArrowUpAndDown,\n type: 'newToOld'\n },\n { name: i18n._('Oldest to newest'), icon: ArrowUpAndDown, type: 'oldToNew' }\n ]\n\n const selectedRecordIds = useMemo(\n () => new Set(selectedRecords.map((r) => r.id)),\n [selectedRecords]\n )\n\n // Refs & scroll state\n const scrollContainerRef = useRef(null)\n const [scrollTop, setScrollTop] = useState(0)\n const [containerHeight, setContainerHeight] = useState(600)\n\n const handleScroll = useCallback(() => {\n if (scrollContainerRef.current) setScrollTop(scrollContainerRef.current.scrollTop)\n }, [])\n\n useEffect(() => {\n const el = scrollContainerRef.current\n if (!el) return\n el.addEventListener('scroll', handleScroll, { passive: true })\n return () => el.removeEventListener('scroll', handleScroll)\n }, [handleScroll])\n\n useEffect(() => {\n const el = scrollContainerRef.current\n if (!el) return\n const ro = new ResizeObserver(([entry]) => setContainerHeight(entry.contentRect.height))\n ro.observe(el)\n return () => ro.disconnect()\n }, [])\n\n const flatItems = useMemo((): VirtualItem[] => {\n const result: VirtualItem[] = []\n records.forEach((record, originalIndex) => {\n if (!record?.data) return\n if (isStartOfLast7DaysGroup(record, originalIndex, records))\n result.push({ kind: 'header', label: i18n._('Last 7 days'), index: result.length })\n if (isStartOfLast14DaysGroup(record, originalIndex, records))\n result.push({ kind: 'header', label: i18n._('Last 14 days'), index: result.length })\n result.push({ kind: 'record', record, index: result.length })\n })\n return result\n }, [records, i18n])\n\n const itemHeights = useMemo(\n () =>\n flatItems.map((item) =>\n item.kind === 'header' ? ITEM_HEIGHT_HEADER : ITEM_HEIGHT_RECORD\n ),\n [flatItems]\n )\n\n const itemOffsets = useMemo((): number[] => {\n let top = 0\n return flatItems.map((_, i) => {\n const offset = top\n const h = itemHeights[i]\n top += h + (i < flatItems.length - 1 ? ITEM_GAP : 0)\n return offset\n })\n }, [flatItems, itemHeights])\n\n const totalHeight = useMemo(() => {\n if (!flatItems.length) return 0\n const last = flatItems.length - 1\n return itemOffsets[last] + itemHeights[last]\n }, [flatItems.length, itemHeights, itemOffsets])\n\n const { startIndex, endIndex } = useMemo(() => {\n if (!flatItems.length) return { startIndex: 0, endIndex: -1 }\n const viewTop = scrollTop\n const viewBottom = scrollTop + containerHeight\n\n let lo = 0, hi = flatItems.length - 1\n while (lo < hi) {\n const mid = (lo + hi) >> 1\n const h = itemHeights[mid]\n if (itemOffsets[mid] + h <= viewTop) lo = mid + 1\n else hi = mid\n }\n let end = lo\n while (end < flatItems.length - 1 && itemOffsets[end + 1] < viewBottom) end++\n\n return {\n startIndex: Math.max(0, lo - OVERSCAN),\n endIndex: Math.min(flatItems.length - 1, end + OVERSCAN)\n }\n }, [scrollTop, containerHeight, flatItems, itemHeights, itemOffsets])\n\n const isRecordsSelected = selectedRecords.length > 0\n const isFavorite = routeData.folder === FAVORITES_FOLDER_ID\n\n const selectedSortAction =\n sortActions.find((action) => action.type === sortType) ?? sortActions[0]\n\n const openRecordDetails = useCallback((record: RecordItem) => {\n navigateRef.current(currentPageRef.current, {\n recordId: record?.id,\n recordType: recordTypeRef.current\n })\n }, [])\n\n const handleSelect = useCallback(\n (record: RecordItem, isSelected: boolean) => {\n setIsMultiSelect(true)\n\n setSelectedRecords((prev) =>\n isSelected\n ? prev.filter((selectedRecord) => selectedRecord.id !== record?.id)\n : [...prev, record]\n )\n },\n [setSelectedRecords]\n )\n\n const handleRecordClick = useCallback(\n (record: RecordItem, isSelected: boolean) => {\n if (isMultiSelectRef.current) {\n handleSelect(record, isSelected)\n return\n }\n\n openRecordDetails(record)\n },\n [handleSelect, openRecordDetails]\n )\n\n const handleSortTypeChange = (type: SortType) => {\n setSortType(type)\n }\n\n const onClearSelection = () => {\n setSelectedRecords([])\n\n setIsMultiSelect(false)\n }\n\n const handleDeleteConfirm = async () => {\n await deleteRecords(selectedRecords.map((record) => record?.id))\n\n onClearSelection()\n\n closeModal()\n }\n\n const handleDelete = async () => {\n setModal(\n \n )\n }\n\n const handleMoveClick = () => {\n const VersionBasedMoveFolderModalContent = isV2() ? MoveFolderModalContentV2 : MoveFolderModalContent\n\n setModal(\n onClearSelection()}\n />\n )\n }\n\n return (\n \n \n \n {isMultiSelect ? (\n <>\n \n {i18n._('Move')}\n \n\n \n {i18n._('Delete')}\n \n \n ) : (\n setIsSortPopupOpen(false)}\n selectedType={sortType}\n menuItems={sortActions}\n />\n }\n >\n setIsSortPopupOpen((prev) => !prev)}\n >\n {selectedSortAction.name}\n \n \n )}\n \n\n \n {isMultiSelect ? (\n \n {i18n._('Cancel')}\n \n ) : (\n setIsMultiSelect(true)}\n startIcon={MultiSelectionIcon}\n >\n {i18n._('Multiple selection')}\n \n )}\n \n \n\n {!isMultiSelect &&\n !!routeData?.folder?.length &&\n (isFavorite ? (\n \n {i18n._('Favorite')}\n \n ) : (\n \n {routeData.folder}\n \n ))}\n\n \n {flatItems.slice(startIndex, endIndex + 1).map((item) => {\n const top = itemOffsets[item.index]\n if (item.kind === 'header') {\n return (\n \n {item.label}\n \n )\n }\n const { record } = item\n\n const isSelected = selectedRecordIds.has(record.id)\n return (\n \n handleSelect(record, isSelected)}\n onClick={() => handleRecordClick(record, isSelected)}\n />\n
\n )\n })}\n \n \n )\n}\n" }, { "path": "src/containers/RecordListView/styles.js", "content": "import styled from 'styled-components'\n\nexport const ViewWrapper = styled.div`\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: 13px;\n`\n\nexport const ActionsSection = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-between;\n`\n\nexport const LeftActions = styled.div`\n display: flex;\n gap: 10px;\n`\n\nexport const RightActions = styled.div`\n display: flex;\n`\n\nexport const Folder = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n gap: 6px;\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: Inter;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\n\nexport const RecordsSection = styled.div`\n width: 100%;\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n position: relative;\n`\n\nexport const DatePeriod = styled.div`\n color: ${({ theme }) => theme.colors.grey100.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`\n" }, { "path": "src/containers/RecordListView/utils.js", "content": "import { MS_PER_WEEK } from '@tetherto/pearpass-lib-constants'\n/**\n * @param {{\n * record: {\n * updatedAt: number\n * }\n * }}\n * @returns {boolean}\n */\nexport const isRecordInLast7Days = (record) => {\n const now = Date.now()\n const sevenDaysAgo = now - MS_PER_WEEK\n\n return record?.updatedAt >= sevenDaysAgo\n}\n\n/**\n * @param {{\n * record: {\n * updatedAt: number\n * }\n * }}\n * @returns {boolean}\n */\nexport const isRecordInLast14Days = (record) => {\n const now = Date.now()\n const fourteenDaysAgo = now - MS_PER_WEEK * 2\n const sevenDaysAgo = now - MS_PER_WEEK\n\n return (\n record?.updatedAt >= fourteenDaysAgo && record?.updatedAt < sevenDaysAgo\n )\n}\n\n/**\n * @param {{\n * record: {\n * isFavorite: boolean,\n * updatedAt: number\n * },\n * index: number,\n * sortedRecords: Array<{\n * isFavorite: boolean,\n * updatedAt: number\n * }>\n * }}\n * @returns {boolean}\n */\nexport const isStartOfLast7DaysGroup = (record, index, sortedRecords) => {\n const prevRecord = sortedRecords[index - 1]\n const prevIsFavorite = prevRecord?.isFavorite\n\n const isInLast7Days = isRecordInLast7Days(record)\n\n return !record?.isFavorite && isInLast7Days && (index === 0 || prevIsFavorite)\n}\n\n/**\n * @param {{\n * record: {\n * updatedAt: number\n * },\n * index: number,\n * sortedRecords: Array<{\n * isFavorite: boolean\n * updatedAt: number\n * }>\n * }}\n * @returns {boolean}\n */\nexport const isStartOfLast14DaysGroup = (record, index, sortedRecords) => {\n const prevRecord = sortedRecords[index - 1]\n const prevIsFavorite = prevRecord?.isFavorite\n const prevIsInLast7Days = prevRecord && isRecordInLast7Days(prevRecord)\n\n const isInLast14Days = isRecordInLast14Days(record)\n\n return (\n !record?.isFavorite &&\n isInLast14Days &&\n (index === 0 || prevIsFavorite || prevIsInLast7Days)\n )\n}\n" }, { "path": "src/containers/Sidebar/SidebarCategories/index.js", "content": "import { useRecordCountsByType } from '@tetherto/pearpass-lib-vault'\nimport { html } from 'htm/react'\n\nimport { CategoriesContainer } from './styles'\nimport { SidebarCategory } from '../../../components/SidebarCategory'\nimport { RECORD_COLOR_BY_TYPE } from '../../../constants/recordColorByType'\nimport { RECORD_ICON_BY_TYPE } from '../../../constants/recordIconByType'\nimport { useRouter } from '../../../context/RouterContext'\nimport { useRecordMenuItems } from '../../../hooks/useRecordMenuItems'\n\n/**\n *\n * @param {{\n * sidebarSize: 'default' | 'tight'\n * }} props\n */\nexport const SideBarCategories = ({ sidebarSize = 'default' }) => {\n const { navigate, data: routerData } = useRouter()\n\n const { menuItems } = useRecordMenuItems()\n const { data: recordCountData } = useRecordCountsByType()\n\n const handleRecordClick = (type) => {\n navigate('vault', { ...routerData, recordType: type, folder: undefined })\n }\n\n return html`\n <${CategoriesContainer} size=${sidebarSize}>\n ${menuItems.map((record) => {\n const count = recordCountData[record?.type] || 0\n return html`\n <${SidebarCategory}\n testId=${`sidebar-category-${record?.type}`}\n key=${record?.type}\n categoryName=${record?.name}\n color=${RECORD_COLOR_BY_TYPE[record?.type]}\n quantity=${count}\n isSelected=${routerData.recordType === record?.type}\n icon=${RECORD_ICON_BY_TYPE[record?.type]}\n onClick=${() => handleRecordClick(record?.type)}\n size=${sidebarSize}\n />\n `\n })}\n \n `\n}\n" }, { "path": "src/containers/Sidebar/SidebarCategories/styles.js", "content": "import styled from 'styled-components'\n\nimport { isV2 } from '../../../utils/designVersion'\n\nexport const CategoriesContainer = styled.div`\n display: flex;\n width: 100%;\n flex-wrap: wrap;\n justify-content: space-between;\n row-gap: ${({ size }) => (size === 'default' ? '8px' : '10px')};\n column-gap: 12px;\n ${isV2() && 'flex-shrink: 0;'}\n`\n" }, { "path": "src/containers/Sidebar/SidebarV2.styles.ts", "content": "import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\nimport { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nimport { FADE_GRADIENT_HEIGHT, HEADER_MIN_HEIGHT } from '../../constants/layout'\n\nexport const SIDEBAR_WIDTH_EXPANDED = 250\nexport const SIDEBAR_WIDTH_COLLAPSED = 57\n\nconst SIDEBAR_HORIZONTAL_PADDING = rawTokens.spacing12\nconst FOLDERS_HEADER_HORIZONTAL_PADDING = rawTokens.spacing4\n\n// Icon (16) + padding (4×2) + border (1×2).\nconst COLLAPSED_SMALL_ICON_BUTTON_WIDTH = 26\nconst COLLAPSED_CHEVRON_WIDTH = 16\n\n// translateX offsets to re-center a flex-anchored child in the collapsed column.\nexport const COLLAPSE_BUTTON_CENTER_SHIFT_PX =\n (SIDEBAR_WIDTH_COLLAPSED - COLLAPSED_SMALL_ICON_BUTTON_WIDTH) / 2 -\n (SIDEBAR_WIDTH_COLLAPSED -\n SIDEBAR_HORIZONTAL_PADDING -\n COLLAPSED_SMALL_ICON_BUTTON_WIDTH)\n\nexport const FOLDERS_CHEVRON_CENTER_SHIFT_PX =\n (SIDEBAR_WIDTH_COLLAPSED - COLLAPSED_CHEVRON_WIDTH) / 2 -\n (SIDEBAR_HORIZONTAL_PADDING + FOLDERS_HEADER_HORIZONTAL_PADDING)\n\nexport const FOLDER_CONTEXT_MENU_WIDTH = 220\n\nexport const createStyles = (colors: ThemeColors, isCollapsed: boolean) => ({\n wrapper: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n height: '100%',\n width: isCollapsed ? SIDEBAR_WIDTH_COLLAPSED : SIDEBAR_WIDTH_EXPANDED,\n backgroundColor: colors.colorSurfacePrimary,\n borderRight: `1px solid ${colors.colorBorderPrimary}`,\n boxSizing: 'border-box' as const,\n overflow: 'hidden' as const,\n transition: 'width 150ms ease'\n },\n\n vaultSelector: {\n display: 'flex' as const,\n alignItems: 'center' as const,\n gap: rawTokens.spacing8,\n width: '100%',\n height: HEADER_MIN_HEIGHT,\n padding: rawTokens.spacing12,\n borderBottom: `1px solid ${colors.colorBorderPrimary}`,\n backgroundColor: colors.colorSurfacePrimary,\n boxSizing: 'border-box' as const,\n flexShrink: 0\n },\n\n vaultIconHidden: {\n display: 'none' as const\n },\n\n vaultNameGroup: {\n flex: 1,\n minWidth: 0\n },\n\n vaultNameGroupHidden: {\n display: 'none' as const\n },\n\n vaultNameRow: {\n display: 'flex' as const,\n alignItems: 'center' as const,\n gap: rawTokens.spacing4,\n minWidth: 0,\n cursor: 'pointer' as const,\n userSelect: 'none' as const\n },\n\n vaultNameText: {\n minWidth: 0,\n overflow: 'hidden' as const,\n textOverflow: 'ellipsis' as const,\n whiteSpace: 'nowrap' as const,\n color: colors.colorTextPrimary\n },\n\n chevron: {\n flexShrink: 0,\n transition: 'transform 150ms ease'\n },\n\n chevronFlipped: {\n transform: 'rotate(180deg)'\n },\n\n collapseButtonSlot: {\n marginInlineStart: 'auto' as const,\n display: 'flex' as const,\n // Use the individual-transform properties so `translate` can animate\n // while `rotate` flips instantly.\n translate: `${isCollapsed ? COLLAPSE_BUTTON_CENTER_SHIFT_PX : 0}px`,\n rotate: `${isCollapsed ? 180 : 0}deg`,\n transition: 'translate 150ms ease'\n },\n\n scrollContainer: {\n position: 'relative' as const,\n display: 'flex' as const,\n flexDirection: 'column' as const,\n flex: 1,\n minHeight: 0\n },\n\n scrollArea: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n flex: 1,\n minHeight: 0,\n gap: rawTokens.spacing8,\n paddingInline: rawTokens.spacing12,\n paddingTop: rawTokens.spacing12,\n paddingBottom: FADE_GRADIENT_HEIGHT,\n overflowY: 'auto' as const,\n overflowX: 'hidden' as const\n },\n\n fadeGradient: {\n position: 'absolute' as const,\n left: 0,\n right: 0,\n bottom: 0,\n height: FADE_GRADIENT_HEIGHT,\n pointerEvents: 'none' as const,\n background: `linear-gradient(180deg, ${colors.colorSurfacePrimary}00 0%, ${colors.colorSurfacePrimary} 100%)`\n },\n\n sectionList: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: 1,\n width: '100%'\n },\n\n divider: {\n width: '100%',\n height: 1,\n backgroundColor: colors.colorBorderPrimary,\n border: 'none',\n margin: 0,\n flexShrink: 0\n },\n\n foldersHeader: {\n display: 'flex' as const,\n alignItems: 'center' as const,\n gap: rawTokens.spacing4,\n height: 32,\n padding: `${rawTokens.spacing8}px ${rawTokens.spacing4}px`,\n borderRadius: rawTokens.radius8,\n width: '100%',\n boxSizing: 'border-box' as const\n },\n\n foldersHeaderToggle: {\n flex: 1,\n minWidth: 0\n },\n\n foldersHeaderToggleInner: {\n display: 'flex' as const,\n alignItems: 'center' as const,\n gap: rawTokens.spacing4,\n cursor: 'pointer' as const,\n userSelect: 'none' as const\n },\n\n // Kept mounted and allowed to shrink so the chevron keeps its size when collapsed.\n foldersHeaderLabel: {\n opacity: isCollapsed ? 0 : 1,\n transition: 'opacity 150ms ease',\n minWidth: 0,\n overflow: 'hidden' as const,\n whiteSpace: 'nowrap' as const\n },\n\n // Anchors the right-click ContextMenu so it opens just below the row,\n // aligned to its right edge, regardless of where the cursor was clicked.\n folderRow: {\n position: 'relative' as const,\n width: '100%'\n },\n\n folderRowMenuAnchor: {\n position: 'absolute' as const,\n bottom: 0,\n right: 0\n },\n\n folderRowMenuTrigger: {\n display: 'block' as const,\n width: 0,\n height: 0\n },\n\n footerSection: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n alignItems: isCollapsed ? ('center' as const) : ('stretch' as const),\n gap: 1,\n padding: rawTokens.spacing12,\n borderTop: `1px solid ${colors.colorBorderPrimary}`,\n backgroundColor: colors.colorSurfacePrimary,\n flexShrink: 0\n }\n})\n" }, { "path": "src/containers/Sidebar/SidebarV2.test.tsx", "content": "import React from 'react'\n\nimport '@testing-library/jest-dom'\nimport { fireEvent, render, screen, waitFor } from '@testing-library/react'\n\nconst mockNavigate = jest.fn()\nconst mockCloseAllInstances = jest.fn()\nconst mockResetState = jest.fn()\nconst mockSetIsLoading = jest.fn()\nconst mockDeleteFolder = jest.fn()\nconst mockSetModal = jest.fn()\nconst mockCloseModal = jest.fn()\n\nlet mockRouterData: Record = {}\nlet mockFoldersData: {\n customFolders: Record<\n string,\n { name: string; records: Array<{ data?: unknown }> }\n >\n favorites: { records: unknown[] }\n} = { customFolders: {}, favorites: { records: [] } }\n\njest.mock('@tetherto/pearpass-lib-constants', () => ({\n AUTHENTICATOR_ENABLED: false\n}))\n\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n RECORD_TYPES: {\n LOGIN: 'login',\n IDENTITY: 'identity',\n CREDIT_CARD: 'credit_card',\n NOTE: 'note',\n CUSTOM: 'custom',\n WIFI_PASSWORD: 'wifi_password',\n PASS_PHRASE: 'pass_phrase'\n },\n closeAllInstances: (...args: unknown[]) => mockCloseAllInstances(...args),\n useFolders: () => ({\n data: mockFoldersData,\n deleteFolder: mockDeleteFolder\n }),\n useRecordCountsByType: () => ({ data: {} }),\n useVault: () => ({ data: { name: 'Test Vault' } }),\n useVaults: () => ({ resetState: mockResetState })\n}))\n\njest.mock('@tetherto/pearpass-lib-ui-kit', () => {\n const React = require('react')\n return {\n useTheme: () => ({ theme: { colors: {} } }),\n rawTokens: new Proxy({}, { get: () => 0 }),\n Button: ({ onClick, 'data-testid': dataTestId, 'aria-label': ariaLabel }: {\n onClick?: () => void\n 'data-testid'?: string\n 'aria-label'?: string\n }) =>\n React.createElement('button', {\n type: 'button',\n 'data-testid': dataTestId,\n 'aria-label': ariaLabel,\n onClick\n }),\n NavbarListItem: ({\n label,\n onClick,\n onContextMenu,\n testID\n }: {\n label?: string\n onClick?: (e: React.MouseEvent) => void\n onContextMenu?: (e: React.MouseEvent) => void\n testID?: string\n }) =>\n React.createElement(\n 'button',\n { type: 'button', 'data-testid': testID, onClick, onContextMenu },\n label\n ),\n ContextMenu: ({\n open,\n children,\n testID\n }: {\n open?: boolean\n children?: React.ReactNode\n testID?: string\n }) =>\n open\n ? React.createElement(\n 'div',\n { role: 'menu', 'data-testid': testID },\n children\n )\n : null,\n Text: ({ children }: { children: React.ReactNode }) =>\n React.createElement('span', null, children)\n }\n})\n\njest.mock(\n '@tetherto/pearpass-lib-ui-kit/components/Pressable',\n () => {\n const React = require('react')\n return {\n Pressable: ({\n children,\n onClick,\n 'data-testid': dataTestId\n }: {\n children: React.ReactNode\n onClick?: () => void\n 'data-testid'?: string\n }) =>\n React.createElement(\n 'button',\n { type: 'button', 'data-testid': dataTestId, onClick },\n children\n )\n }\n },\n { virtual: true }\n)\n\nconst iconStub = () => null\n\njest.mock('@tetherto/pearpass-lib-ui-kit/icons', () => ({\n Add: iconStub,\n Close: iconStub,\n CreateNewFolder: iconStub,\n EditOutlined: iconStub,\n ExpandMore: iconStub,\n Folder: iconStub,\n FolderCopy: iconStub,\n Layers: iconStub,\n LockFilled: iconStub,\n LockOutlined: iconStub,\n MenuOpen: iconStub,\n SettingsOutlined: iconStub,\n StarBorder: iconStub,\n StarFilled: iconStub,\n TrashOutlined: iconStub,\n TwoFactorAuthenticationOutlined: iconStub,\n AccountCircleFilled: iconStub,\n AccountCircleOutlined: iconStub,\n AssignmentInd: iconStub,\n CreditCard: iconStub,\n FormatQuote: iconStub,\n GridView: iconStub,\n LayerFilled: iconStub,\n Note: iconStub,\n WiFi: iconStub\n}))\n\njest.mock('../../context/RouterContext', () => ({\n useRouter: () => ({ navigate: mockNavigate, data: mockRouterData })\n}))\n\njest.mock('../../context/ModalContext', () => ({\n useModal: () => ({ setModal: mockSetModal, closeModal: mockCloseModal })\n}))\n\njest.mock('../../context/LoadingContext', () => ({\n useLoadingContext: () => ({ setIsLoading: mockSetIsLoading })\n}))\n\njest.mock('../../hooks/useTranslation', () => ({\n useTranslation: () => ({ t: (s: string) => s })\n}))\n\njest.mock('../Modal/CreateFolderModalContentV2/CreateFolderModalContentV2', () => {\n const React = require('react')\n return {\n CreateFolderModalContentV2: (props: { initialValues?: { title: string } }) =>\n React.createElement('div', {\n 'data-testid': 'mock-create-folder-modal',\n 'data-initial-title': props.initialValues?.title ?? ''\n })\n }\n})\n\njest.mock('../Modal/DeleteFolderModalContentV2/DeleteFolderModalContentV2', () => {\n const React = require('react')\n return {\n DeleteFolderModalContentV2: (props: { folderName: string; count: number }) =>\n React.createElement('div', {\n 'data-testid': 'mock-delete-folder-modal',\n 'data-folder-name': props.folderName,\n 'data-count': String(props.count)\n })\n }\n})\n\nimport { SidebarV2 } from './SidebarV2'\n\nconst makeFolder = (\n name: string,\n itemCount: number\n): { name: string; records: Array<{ data?: unknown }> } => ({\n name,\n records: Array.from({ length: itemCount }, () => ({ data: {} }))\n})\n\ndescribe('SidebarV2 — lock app flow', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n mockRouterData = {}\n mockFoldersData = { customFolders: {}, favorites: { records: [] } }\n })\n\n it('closes instances, navigates to master password, and resets vault state', async () => {\n mockCloseAllInstances.mockImplementation(() => Promise.resolve())\n\n render()\n\n fireEvent.click(screen.getByTestId('sidebar-lock-app'))\n\n await waitFor(() => {\n expect(mockCloseAllInstances).toHaveBeenCalledTimes(1)\n })\n expect(mockNavigate).toHaveBeenCalledWith('welcome', {\n state: 'masterPassword'\n })\n expect(mockResetState).toHaveBeenCalledTimes(1)\n expect(mockSetIsLoading).toHaveBeenNthCalledWith(1, true)\n expect(mockSetIsLoading).toHaveBeenLastCalledWith(false)\n })\n\n it('navigates to settings when Settings is clicked', async () => {\n render()\n\n fireEvent.click(screen.getByTestId('sidebar-settings-button'))\n\n expect(mockNavigate).toHaveBeenCalledWith('settings', {})\n })\n})\n\ndescribe('SidebarV2 — folder context menu', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n mockRouterData = {}\n mockFoldersData = {\n customFolders: {\n work: makeFolder('work', 2),\n empty: makeFolder('empty', 0),\n other: makeFolder('other', 1)\n },\n favorites: { records: [] }\n }\n })\n\n it('opens the menu with Rename and Delete on right-click', () => {\n render()\n\n expect(screen.queryByTestId('sidebar-folder-menu-work')).toBeNull()\n\n fireEvent.contextMenu(screen.getByTestId('sidebar-folder-work'))\n\n expect(screen.getByTestId('sidebar-folder-menu-work')).toBeInTheDocument()\n expect(\n screen.getByTestId('sidebar-folder-menu-rename-work')\n ).toBeInTheDocument()\n expect(\n screen.getByTestId('sidebar-folder-menu-delete-work')\n ).toBeInTheDocument()\n })\n\n it('Rename opens CreateFolderModalContentV2 prefilled with the folder title', () => {\n render()\n\n fireEvent.contextMenu(screen.getByTestId('sidebar-folder-work'))\n fireEvent.click(screen.getByTestId('sidebar-folder-menu-rename-work'))\n\n expect(mockSetModal).toHaveBeenCalledTimes(1)\n const modal = mockSetModal.mock.calls[0][0] as React.ReactElement\n render(modal)\n const instance = screen.getByTestId('mock-create-folder-modal')\n expect(instance.getAttribute('data-initial-title')).toBe('work')\n })\n\n it('Delete on an empty folder calls deleteFolder directly (no modal)', () => {\n render()\n\n fireEvent.contextMenu(screen.getByTestId('sidebar-folder-empty'))\n fireEvent.click(screen.getByTestId('sidebar-folder-menu-delete-empty'))\n\n expect(mockDeleteFolder).toHaveBeenCalledWith('empty')\n expect(mockSetModal).not.toHaveBeenCalled()\n })\n\n it('Delete on an empty active folder navigates away to All Folders', () => {\n mockRouterData = { folder: 'empty', recordType: 'all' }\n render()\n\n fireEvent.contextMenu(screen.getByTestId('sidebar-folder-empty'))\n fireEvent.click(screen.getByTestId('sidebar-folder-menu-delete-empty'))\n\n expect(mockDeleteFolder).toHaveBeenCalledWith('empty')\n expect(mockNavigate).toHaveBeenCalledWith('vault', { recordType: 'all' })\n })\n\n it('Delete on a non-empty folder opens DeleteFolderModalContentV2 with the item count', () => {\n render()\n\n fireEvent.contextMenu(screen.getByTestId('sidebar-folder-work'))\n fireEvent.click(screen.getByTestId('sidebar-folder-menu-delete-work'))\n\n expect(mockDeleteFolder).not.toHaveBeenCalled()\n expect(mockSetModal).toHaveBeenCalledTimes(1)\n const modal = mockSetModal.mock.calls[0][0] as React.ReactElement\n render(modal)\n const instance = screen.getByTestId('mock-delete-folder-modal')\n expect(instance.getAttribute('data-folder-name')).toBe('work')\n expect(instance.getAttribute('data-count')).toBe('2')\n })\n\n it('opening one folder menu closes any other open menu', () => {\n render()\n\n fireEvent.contextMenu(screen.getByTestId('sidebar-folder-work'))\n expect(screen.getByTestId('sidebar-folder-menu-work')).toBeInTheDocument()\n\n fireEvent.contextMenu(screen.getByTestId('sidebar-folder-other'))\n expect(screen.getByTestId('sidebar-folder-menu-other')).toBeInTheDocument()\n expect(screen.queryByTestId('sidebar-folder-menu-work')).toBeNull()\n })\n})\n" }, { "path": "src/containers/Sidebar/SidebarV2.tsx", "content": "import React, { useMemo, useState } from 'react'\n\nimport { AUTHENTICATOR_ENABLED } from '@tetherto/pearpass-lib-constants'\nimport {\n closeAllInstances,\n useFolders,\n useRecordCountsByType,\n useVault,\n useVaults,\n RECORD_TYPES\n} from '@tetherto/pearpass-lib-vault'\nimport {\n Button,\n ContextMenu,\n NavbarListItem,\n Text,\n useTheme\n} from '@tetherto/pearpass-lib-ui-kit'\nimport { Pressable } from '@tetherto/pearpass-lib-ui-kit/components/Pressable'\nimport {\n Close,\n CreateNewFolder,\n EditOutlined,\n ExpandMore,\n Folder,\n FolderCopy,\n LockFilled,\n LockOutlined,\n MenuOpen,\n SettingsOutlined,\n StarBorder,\n StarFilled,\n TrashOutlined,\n TwoFactorAuthenticationOutlined\n} from '@tetherto/pearpass-lib-ui-kit/icons'\n\nimport {\n createStyles,\n FOLDER_CONTEXT_MENU_WIDTH,\n FOLDERS_CHEVRON_CENTER_SHIFT_PX\n} from './SidebarV2.styles'\nimport { VaultSelector } from './VaultSelector/VaultSelector'\nimport { NAVIGATION_ROUTES } from '../../constants/navigation'\nimport { useLoadingContext } from '../../context/LoadingContext'\nimport { useModal } from '../../context/ModalContext'\nimport { useRouter } from '../../context/RouterContext'\nimport { useRecordMenuItemsV2 } from '../../hooks/useRecordMenuItemsV2'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { FAVORITES_FOLDER_ID } from '../../utils/isFavorite'\nimport { sortByName } from '../../utils/sortByName'\nimport { CreateFolderModalContentV2 } from '../Modal/CreateFolderModalContentV2/CreateFolderModalContentV2'\nimport { DeleteFolderModalContentV2 } from '../Modal/DeleteFolderModalContentV2/DeleteFolderModalContentV2'\n\nexport const SidebarV2 = () => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n\n const [isCollapsed, setIsCollapsed] = useState(false)\n const [isVaultSelectorOpen, setIsVaultSelectorOpen] = useState(false)\n const [openFolderMenu, setOpenFolderMenu] = useState(null)\n const styles = createStyles(theme.colors, isCollapsed)\n\n const { navigate, data: routerData } = useRouter()\n const { data: vaultData } = useVault()\n const { data: foldersData, deleteFolder } = useFolders()\n const { data: recordCounts } = useRecordCountsByType()\n const { resetState } = useVaults()\n const { setModal, closeModal } = useModal()\n const { setIsLoading } = useLoadingContext()\n\n const [isFoldersExpanded, setIsFoldersExpanded] = useState(true)\n\n const { categoriesItems } = useRecordMenuItemsV2()\n\n const isAuthenticatorActive = routerData?.recordType === RECORD_TYPES.OTP\n const activeCategory = isAuthenticatorActive\n ? null\n : (routerData?.recordType ?? null)\n const isFavoritesActive = routerData?.folder === FAVORITES_FOLDER_ID\n const selectedFolderName =\n routerData?.folder && !isFavoritesActive ? routerData.folder : null\n\n const customFolders = useMemo(() => {\n const raw = Object.values(foldersData?.customFolders ?? {}) as Array<{\n name: string\n records: Array<{ data?: unknown }>\n }>\n\n return sortByName(\n raw.map((folder) => ({\n name: folder.name,\n count: folder.records.filter((record) => !!record.data).length\n }))\n )\n }, [foldersData])\n\n const favoritesCount =\n (foldersData?.favorites?.records?.length as number | undefined) ?? 0\n\n const currentRecordType = routerData?.recordType ?? 'all'\n const currentFolder = routerData?.folder\n // Folder selection doesn't apply in authenticator mode; fall back to \"all\"\n // so clicking a folder exits authenticator cleanly instead of landing on the\n // nonsensical { recordType: RECORD_TYPES.OTP, folder: X } state.\n const folderClickRecordType = isAuthenticatorActive ? 'all' : currentRecordType\n\n const handleCategoryClick = (type: string) => {\n navigate('vault', {\n recordType: type,\n ...(currentFolder ? { folder: currentFolder } : {})\n })\n }\n\n const handleFolderClick = (folderId: string) => {\n navigate('vault', { recordType: folderClickRecordType, folder: folderId })\n }\n\n const handleAllFoldersClick = () => {\n navigate('vault', { recordType: folderClickRecordType })\n }\n\n const handleAddFolderClick = () => {\n setModal()\n }\n\n const handleRenameFolder = (folderName: string) => {\n setModal(\n {\n if (routerData?.folder === previousName) {\n navigate('vault', {\n recordType: currentRecordType,\n folder: newName\n })\n }\n }}\n />\n )\n }\n\n const handleDeleteFolder = (folderName: string, count: number) => {\n if (count === 0) {\n void deleteFolder(folderName)\n if (routerData?.folder === folderName) {\n navigate('vault', { recordType: currentRecordType })\n }\n return\n }\n setModal(\n \n )\n }\n\n const handleSettingsClick = () => {\n navigate('settings', {})\n }\n\n const handleLockApp = async () => {\n setIsLoading(true)\n try {\n await closeAllInstances()\n navigate('welcome', { state: NAVIGATION_ROUTES.MASTER_PASSWORD })\n resetState()\n } finally {\n setIsLoading(false)\n }\n }\n\n const isAllFoldersActive = !isAuthenticatorActive && !routerData?.folder\n\n const iconTextPrimary = { color: theme.colors.colorTextPrimary }\n const iconTextSecondary = { color: theme.colors.colorTextSecondary }\n\n const renderCollapseButton = () => (\n
\n setIsCollapsed((value) => !value)}\n data-testid=\"sidebar-collapse-toggle\"\n aria-label={isCollapsed ? t('Expand sidebar') : t('Collapse sidebar')}\n iconBefore={}\n />\n
\n )\n\n const renderVaultHeader = () => {\n const chevronStyle = {\n ...iconTextPrimary,\n ...styles.chevron,\n ...(isVaultSelectorOpen ? styles.chevronFlipped : {})\n }\n\n const showCloseButton = !isCollapsed && isVaultSelectorOpen\n const rightButton = showCloseButton ? (\n setIsVaultSelectorOpen(false)}\n data-testid=\"sidebar-vault-selector-close\"\n aria-label={t('Close vault selector')}\n iconBefore={}\n />\n ) : (\n renderCollapseButton()\n )\n\n return (\n
\n
\n \n
\n \n setIsVaultSelectorOpen((value) => !value)}\n data-testid=\"sidebar-vault-selector-toggle\"\n aria-label={\n isVaultSelectorOpen\n ? t('Close vault selector')\n : t('Open vault selector')\n }\n >\n
\n
\n \n {vaultData?.name ?? t('Personal')}\n \n
\n \n
\n \n
\n {rightButton}\n \n )\n }\n\n return (\n \n )\n}\n\ntype FolderRowProps = {\n folder: { name: string; count: number }\n selected: boolean\n isCollapsed: boolean\n menuOpen: boolean\n onMenuOpenChange: (open: boolean) => void\n styles: ReturnType\n theme: ReturnType['theme']\n onSelect: (folderName: string) => void\n onRename: (folderName: string) => void\n onDelete: (folderName: string, count: number) => void\n t: ReturnType['t']\n}\n\nconst FolderRow = ({\n folder,\n selected,\n isCollapsed,\n menuOpen,\n onMenuOpenChange,\n styles,\n theme,\n onSelect,\n onRename,\n onDelete,\n t\n}: FolderRowProps) => {\n const iconColor = selected\n ? theme.colors.colorTextPrimary\n : theme.colors.colorTextSecondary\n\n const withMenuClose = (handler: () => void) => () => {\n onMenuOpenChange(false)\n handler()\n }\n\n return (\n
\n }\n onClick={() => onSelect(folder.name)}\n onContextMenu={(e: React.MouseEvent) => {\n e.preventDefault()\n onMenuOpenChange(true)\n }}\n />\n
\n }\n >\n }\n label={t('Rename Folder')}\n testID={`sidebar-folder-menu-rename-${folder.name}`}\n onClick={withMenuClose(() => onRename(folder.name))}\n />\n \n }\n label={t('Delete Folder')}\n testID={`sidebar-folder-menu-delete-${folder.name}`}\n onClick={withMenuClose(() => onDelete(folder.name, folder.count))}\n />\n \n
\n
\n )\n}\n" }, { "path": "src/containers/Sidebar/VaultSelector/VaultSelector.styles.ts", "content": "import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'\nimport { rawTokens } from '@tetherto/pearpass-lib-ui-kit'\n\nexport const VAULT_ACTIONS_MENU_WIDTH = 215\n\nexport const createStyles = (colors: ThemeColors) => ({\n wrapper: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: rawTokens.spacing4,\n width: '100%'\n },\n\n titleRow: {\n display: 'flex' as const,\n alignItems: 'center' as const,\n gap: rawTokens.spacing4,\n padding: `${rawTokens.spacing8}px ${rawTokens.spacing4}px`,\n borderRadius: rawTokens.radius8,\n width: '100%',\n boxSizing: 'border-box' as const\n },\n\n titleLabel: {\n flex: 1,\n minWidth: 0\n },\n\n list: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n gap: 1,\n width: '100%',\n cursor: 'pointer' as const\n },\n\n vaultRow: {\n minHeight: '58px',\n gap: `${rawTokens.spacing8}px`,\n paddingInline: `${rawTokens.spacing8}px`\n },\n\n rowActions: {\n display: 'flex' as const,\n alignItems: 'center' as const,\n gap: `${rawTokens.spacing8}px`\n },\n\n iconActionButton: {\n paddingInline: '0',\n paddingBlock: '0',\n borderWidth: '0'\n },\n\n menuGroup: {\n display: 'flex' as const,\n flexDirection: 'column' as const,\n width: '100%'\n },\n\n menuDivider: {\n width: '100%',\n height: 1,\n backgroundColor: colors.colorBorderPrimary,\n border: 'none',\n margin: 0,\n flexShrink: 0\n }\n})\n" }, { "path": "src/containers/Sidebar/VaultSelector/VaultSelector.tsx", "content": "import React, { useMemo, useState } from 'react'\n\nimport { UNSUPPORTED } from '@tetherto/pearpass-lib-constants'\nimport {\n useInvite,\n useVault,\n useVaults,\n type Vault\n} from '@tetherto/pearpass-lib-vault'\nimport {\n Button,\n ContextMenu,\n ListItem,\n NavbarListItem,\n Text,\n useTheme\n} from '@tetherto/pearpass-lib-ui-kit'\nimport {\n Add,\n Devices,\n EditOutlined,\n Key,\n LockFilled,\n MoreVert,\n PersonAddAlt,\n Share,\n TrashOutlined\n} from '@tetherto/pearpass-lib-ui-kit/icons'\n\nimport { createStyles, VAULT_ACTIONS_MENU_WIDTH } from './VaultSelector.styles'\nimport { useLoadingContext } from '../../../context/LoadingContext'\nimport { useModal } from '../../../context/ModalContext'\nimport { useTranslation } from '../../../hooks/useTranslation'\nimport { sortByName } from '../../../utils/sortByName'\nimport { AddDeviceModalContentV2 } from '../../Modal/AddDeviceModalContentV2/AddDeviceModalContentV2'\nimport { CreateOrEditVaultModalContentV2 } from '../../Modal/CreateOrEditVaultModalContentV2/CreateOrEditVaultModalContentV2'\nimport { DeleteVaultModalContent } from '../../Modal/DeleteVaultModalContent'\nimport { ModifyVaultModalContent } from '../../Modal/ModifyVaultModalContent'\nimport { PairedDevicesModalContent } from '../../Modal/PairedDevicesModalContent'\nimport { useVaultSwitch } from '../../../hooks/useVaultSwitch'\n\ntype VaultSelectorProps = {\n onClose?: () => void\n}\n\nexport const VaultSelector = ({ onClose }: VaultSelectorProps = {}) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const styles = createStyles(theme.colors)\n const { setIsLoading } = useLoadingContext()\n const { setModal, closeModal } = useModal()\n const { switchVault } = useVaultSwitch()\n\n const { data: vaultsData } = useVaults()\n const { data: activeVault } = useVault()\n const { data: inviteData, createInvite } = useInvite()\n\n const vaults = useMemo(\n () => sortByName(vaultsData ?? []),\n [vaultsData]\n )\n\n const iconPrimary = { color: theme.colors.colorTextPrimary }\n const iconSecondary = { color: theme.colors.colorTextSecondary }\n const iconDestructive = {\n color: theme.colors.colorSurfaceDestructiveElevated\n }\n\n const openInviteModal = async (vault: Vault) => {\n if (inviteData?.vaultId !== vault.id) {\n setIsLoading(true)\n try {\n await createInvite()\n } finally {\n setIsLoading(false)\n }\n }\n setModal()\n }\n\n const handleCreate = () => {\n setModal(\n {\n closeModal()\n onClose?.()\n }}\n />\n )\n }\n\n const handleVaultClick = (vault: Vault) => {\n if (activeVault?.id !== vault.id) {\n void switchVault(vault)\n }\n onClose?.()\n }\n\n const handleInvite = (vault: Vault) => {\n openInviteModal(vault)\n }\n\n const handleRename = (vault: Vault) => {\n setModal(\n \n )\n }\n\n const handleSetPassword = (vault: Vault) => {\n void switchVault(vault, () => {\n setModal(\n \n )\n })\n }\n\n const handleDelete = (vault: Vault) => {\n setModal()\n }\n\n const handleViewDevices = () => {\n setModal()\n }\n\n return (\n
\n
\n
\n \n {t('Vaults')}\n \n
\n }\n />\n
\n\n
\n {vaults.map((vault) => (\n \n ))}\n
\n
\n )\n}\n\ntype VaultRowProps = {\n vault: Vault\n isActive: boolean\n iconPrimary: { color: string }\n iconDestructive: { color: string }\n styles: ReturnType\n onSelect: (vault: Vault) => void\n onInvite: (vault: Vault) => void\n onRename: (vault: Vault) => void\n onViewDevices: () => void\n onManageMembers: (vault: Vault) => void\n onSetPassword: (vault: Vault) => void\n onDelete: (vault: Vault) => void\n}\n\nconst VaultRow = ({\n vault,\n isActive,\n iconPrimary,\n iconDestructive,\n styles,\n onSelect,\n onInvite,\n onRename,\n onViewDevices,\n onManageMembers,\n onSetPassword,\n onDelete\n}: VaultRowProps) => {\n const { t } = useTranslation()\n const [menuOpen, setMenuOpen] = useState(false)\n\n const withMenuClose = (handler: (vault: Vault) => void) => () => {\n setMenuOpen(false)\n handler(vault)\n }\n\n const stopPropagation = (event: React.MouseEvent) => {\n event.stopPropagation()\n }\n\n const actionButtonStyle = styles.iconActionButton as React.ComponentProps<\n typeof Button\n >['style']\n\n const rightElement = (\n \n onInvite(vault)}\n style={actionButtonStyle}\n iconBefore={\n \n }\n />\n \n }\n />\n }\n >\n
\n }\n label={t('Rename')}\n testID={`vault-row-rename-${vault.id}`}\n onClick={withMenuClose(onRename)}\n />\n }\n label={t('View Paired Devices')}\n testID={`vault-row-devices-${vault.id}`}\n onClick={() => {\n setMenuOpen(false)\n onViewDevices()\n }}\n />\n {UNSUPPORTED && (\n <>\n }\n label={t('Manage Members')}\n testID={`vault-row-members-${vault.id}`}\n onClick={withMenuClose(onManageMembers)}\n />\n }\n label={t('Set Vault Password')}\n testID={`vault-row-password-${vault.id}`}\n onClick={withMenuClose(onSetPassword)}\n />\n \n )}\n
\n {UNSUPPORTED && (\n <>\n
\n
\n }\n label={t('Delete')}\n testID={`vault-row-delete-${vault.id}`}\n onClick={withMenuClose(onDelete)}\n />\n
\n \n )}\n \n \n )\n\n return (\n }\n iconSize={16}\n title={vault.name}\n selected={isActive}\n style={styles.vaultRow as React.ComponentProps['style']}\n testID={`vault-row-${vault.id}`}\n onClick={() => onSelect(vault)}\n rightElement={isActive ? rightElement : undefined}\n />\n )\n}\n" }, { "path": "src/containers/Sidebar/index.js", "content": "import React, { useEffect, useMemo, useState } from 'react'\n\nimport { matchPatternToValue } from '@tetherto/pear-apps-utils-pattern-search'\nimport { AUTHENTICATOR_ENABLED } from '@tetherto/pearpass-lib-constants'\nimport {\n closeAllInstances,\n useFolders,\n useVault,\n useVaults,\n RECORD_TYPES\n} from '@tetherto/pearpass-lib-vault'\nimport { html } from 'htm/react'\n\nimport { SideBarCategories } from './SidebarCategories'\nimport {\n FoldersWrapper,\n LogoWrapper,\n PearPass,\n SettingsContainer,\n SettingsSeparator,\n SidebarAuthenticatorSection,\n sideBarContent,\n SidebarNestedFoldersContainer,\n SidebarSettings,\n SidebarWrapper\n} from './styles'\nimport { DropdownSwapVault } from '../../components/DropdownSwapVault'\nimport { SidebarFolder } from '../../components/SidebarFolder'\nimport { SidebarSearch } from '../../components/SidebarSearch'\nimport { NAVIGATION_ROUTES } from '../../constants/navigation'\nimport { useLoadingContext } from '../../context/LoadingContext'\nimport { useModal } from '../../context/ModalContext'\nimport { useRouter } from '../../context/RouterContext'\nimport { useTranslation } from '../../hooks/useTranslation.js'\nimport {\n ButtonThin,\n ExitIcon,\n LockIcon,\n SettingsIcon,\n StarIcon,\n UserSecurityIcon\n} from '../../lib-react-components'\nimport { LogoLock } from '../../svgs/LogoLock'\nimport { isV2 } from '../../utils/designVersion'\nimport { FAVORITES_FOLDER_ID } from '../../utils/isFavorite'\nimport { sortByName } from '../../utils/sortByName'\nimport { AddDeviceModalContent } from '../Modal/AddDeviceModalContent'\nimport { AddDeviceModalContentV2 } from '../Modal/AddDeviceModalContentV2/AddDeviceModalContentV2'\nimport { CreateFolderModalContent } from '../Modal/CreateFolderModalContent'\nimport { CreateFolderModalContentV2 } from '../Modal/CreateFolderModalContentV2/CreateFolderModalContentV2'\n\n/**\n * @param {{\n * sidebarSize?: 'default' | 'tight'\n * }} props\n */\nexport const Sidebar = ({ sidebarSize = 'tight' }) => {\n const { t } = useTranslation()\n const { navigate, data: routerData } = useRouter()\n\n const [searchValue, setSearchValue] = useState('')\n\n const { setIsLoading } = useLoadingContext()\n\n const { data } = useFolders()\n\n const {\n data: vaultsData,\n resetState,\n refetch: refetchMasterVault\n } = useVaults()\n\n const { data: vaultData } = useVault()\n\n const vaults = useMemo(\n () => sortByName(vaultsData?.filter((vault) => vault.id !== vaultData?.id)),\n [vaultsData, vaultData]\n )\n\n const handleSettingsClick = () => {\n navigate('settings', {})\n }\n\n const openMainView = () => {\n navigate('vault', { recordType: 'all' })\n }\n\n const handleExitVault = async () => {\n setIsLoading(true)\n await closeAllInstances()\n navigate('welcome', { state: NAVIGATION_ROUTES.MASTER_PASSWORD })\n resetState()\n setIsLoading(false)\n }\n\n const folders = React.useMemo(() => {\n const { customFolders } = data || {}\n\n const otherFolders = Object.values(customFolders ?? {})\n .map(({ name }) => ({\n name,\n id: name,\n isActive: routerData?.folder === name\n }))\n .sort((a, b) => a.name.localeCompare(b.name))\n\n const filteredFolders = searchValue\n ? otherFolders.filter((folder) =>\n matchPatternToValue(searchValue, folder.name)\n )\n : otherFolders\n\n const allItemsFolder = {\n name: t('All Items'),\n id: 'allItems',\n isRoot: true,\n isActive: !routerData?.folder && routerData?.recordType === 'all'\n }\n\n const favoritesFolder = {\n name: t('Favorites'),\n id: FAVORITES_FOLDER_ID,\n icon: StarIcon,\n isActive: routerData?.folder === FAVORITES_FOLDER_ID\n }\n\n return [allItemsFolder, favoritesFolder, ...filteredFolders]\n }, [data, t, routerData, searchValue])\n\n const { setModal, closeModal } = useModal()\n\n const handleAddDevice = () => {\n setModal(isV2() ? : )\n }\n\n const handleAddFolderClick = () => {\n isV2()\n ? setModal()\n : setModal(html`<${CreateFolderModalContent} />`)\n }\n\n const handleFolderClick = (id) => {\n if (id === 'allItems') {\n navigate('vault', { recordType: 'all' })\n return\n }\n\n if (id === RECORD_TYPES.OTP) {\n navigate('vault', { recordType: RECORD_TYPES.OTP })\n return\n }\n\n navigate('vault', { recordType: 'all', folder: id })\n }\n\n useEffect(() => {\n refetchMasterVault()\n }, [])\n\n return html`\n <${SidebarWrapper} size=${sidebarSize}>\n <${LogoWrapper} onClick=${openMainView}>\n <${LogoLock} width=\"20\" height=\"26\" />\n <${PearPass}>${window.electronAPI?.productName ?? 'PearPass'}\n \n\n <${sideBarContent}>\n <${DropdownSwapVault} vaults=${vaults} selectedVault=${vaultData} />\n\n <${SideBarCategories} sidebarSize=${sidebarSize} />\n\n ${data &&\n html`\n <${SidebarNestedFoldersContainer}>\n <${SidebarSearch}\n testId=\"sidebar-folder-search\"\n value=${searchValue}\n onChange=${setSearchValue}\n />\n\n <${FoldersWrapper}>\n ${folders.map(({ id, isRoot, name, icon, isActive }) => {\n const hasMenu = id !== FAVORITES_FOLDER_ID && !isRoot\n\n return html`<${SidebarFolder}\n key=${id}\n isOpen=${false}\n onClick=${() => handleFolderClick(id)}\n onAddClick=${handleAddFolderClick}\n isRoot=${isRoot}\n name=${name}\n icon=${icon}\n isActive=${isActive}\n hasMenu=${hasMenu}\n />`\n })}\n \n\n ${AUTHENTICATOR_ENABLED &&\n html`\n <${SidebarAuthenticatorSection}>\n <${SidebarFolder}\n key=\"authenticator\"\n isOpen=${false}\n onClick=${() => handleFolderClick(RECORD_TYPES.OTP)}\n name=${t('Authenticator')}\n icon=${LockIcon}\n isActive=${routerData?.recordType === RECORD_TYPES.OTP}\n hasMenu=${false}\n />\n \n `}\n \n `}\n \n\n <${SidebarSettings}>\n <${SettingsContainer}\n data-testid=\"sidebar-settings-button\"\n onClick=${handleSettingsClick}\n >\n <${SettingsIcon} size=\"24\" />\n ${t('Settings')}\n \n\n <${SettingsSeparator} />\n\n <${ButtonThin}\n testId=\"sidebar-adddevice-button\"\n startIcon=${UserSecurityIcon}\n onClick=${handleAddDevice}\n >\n ${t('Add a Device')}\n \n\n <${ButtonThin}\n testId=\"sidebar-exit-button\"\n startIcon=${ExitIcon}\n onClick=${handleExitVault}\n >\n ${t('Exit Vault')}\n \n \n \n `\n}\n" }, { "path": "src/containers/Sidebar/styles.js", "content": "import styled from 'styled-components'\n\nimport { isV2 } from '../../utils/designVersion'\n\nexport const SidebarWrapper = styled.div`\n display: flex;\n gap: 20px;\n padding: 25px 20px;\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n width: ${({ size }) => (size === 'tight' ? '245px' : '296px')};\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-start;\n align-self: stretch;\n border-right: 1px solid ${({ theme }) => theme.colors.grey300.mode1};\n background: ${({ theme }) => theme.colors.grey500.mode1};\n height: 100%;\n`\n\nexport const LogoWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n`\n\nexport const PearPass = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Humble Nostalgia';\n font-size: 32px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n height: 26px;\n`\n\nexport const sideBarContent = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n width: 100%;\n gap: 20px;\n min-height: 0;\n overflow: hidden;\n ${isV2() &&\n `\n overflow-y: auto;\n overflow-x: hidden;\n padding-right: 4px;\n \n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.1);\n border-radius: 10px;\n }\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n padding-bottom: 20px;\n `}\n`\n\nexport const SidebarNestedFoldersContainer = styled.div`\n padding: 10px 0;\n display: flex;\n flex-direction: column;\n gap: 6px;\n ${isV2() ? 'flex-shrink: 0;' : 'flex: 1; min-height: 0;'}\n`\n\nexport const FoldersWrapper = styled.div`\n overflow-y: ${isV2() ? 'visible' : 'auto'};\n display: flex;\n flex-direction: column;\n ${isV2() ? 'flex-shrink: 0;' : 'min-height: 0;'}\n`\n\nexport const SidebarAuthenticatorSection = styled.div`\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid ${({ theme }) => theme.colors.grey300.mode1};\n flex-shrink: 0;\n`\n\nexport const SidebarSettings = styled.div`\n width: 100%;\n flex-grow: 0;\n display: flex;\n flex-direction: column;\n gap: 10px;\n`\n\nexport const SettingsContainer = styled.div`\n display: flex;\n align-items: center;\n padding: 0px 5px;\n gap: 5px;\n cursor: pointer;\n`\n\nexport const SettingsSeparator = styled.div`\n width: 100%;\n height: 2px;\n background: ${({ theme }) => theme.colors.grey300.mode1};\n`\n" }, { "path": "src/containers/WifiPasswordQRCode/WifiPasswordQRCodeV2.tsx", "content": "import { useEffect, useState } from 'react'\n\nimport { generateQRCodeSVG } from '@tetherto/pear-apps-utils-qr'\nimport { rawTokens, Text, useTheme } from '@tetherto/pearpass-lib-ui-kit'\n\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { logger } from '../../utils/logger'\n\ninterface Props {\n ssid?: string\n password?: string\n encryptionType?: string\n isHidden?: boolean\n}\n\nexport const WifiPasswordQRCodeV2 = ({\n ssid,\n password,\n encryptionType = 'WPA',\n isHidden = false\n}: Props) => {\n const { t } = useTranslation()\n const { theme } = useTheme()\n const [qrCodeSvg, setQrCodeSvg] = useState('')\n\n useEffect(() => {\n if (!ssid || !password) {\n setQrCodeSvg('')\n return\n }\n const wifiString = `WIFI:T:${encryptionType};S:${ssid};P:${password};H:${isHidden};;`\n generateQRCodeSVG(wifiString, { type: 'svg', margin: 0 })\n .then((svg: string) => setQrCodeSvg(svg))\n .catch((err: unknown) => logger.error('Error generating QR code:', err))\n }, [ssid, password, encryptionType, isHidden])\n\n if (!ssid || !password || !qrCodeSvg) return null\n\n return (\n \n \n {t('Scan QR Code to connect with the Wi-Fi')}\n \n \n \n \n \n )\n}\n" }, { "path": "src/containers/WifiPasswordQRCode/index.js", "content": "import { useEffect, useState } from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { generateQRCodeSVG } from '@tetherto/pear-apps-utils-qr'\nimport { html } from 'htm/react'\n\nimport { Container, QRCode, QrContainer, Title } from './styles'\nimport { logger } from '../../utils/logger'\n\n/**\n * @param {{\n * ssid: string\n * password: string\n * encryptionType?: string\n * isHidden?: boolean\n * }} props\n */\nexport const WifiPasswordQRCode = ({\n ssid,\n password,\n encryptionType = 'WPA',\n isHidden = false\n}) => {\n const { i18n } = useLingui()\n\n const [qrCodeSvg, setQrCodeSvg] = useState('')\n\n const generateWifiQRString = (\n ssid,\n password,\n encryptionType = 'WPA',\n isHidden = false\n ) => `WIFI:T:${encryptionType};S:${ssid};P:${password};H:${isHidden};;`\n\n useEffect(() => {\n if (ssid && password) {\n const wifiString = generateWifiQRString(\n ssid,\n password,\n encryptionType,\n isHidden\n )\n\n generateQRCodeSVG(wifiString, { type: 'svg', margin: 0 })\n .then((svgString) => {\n setQrCodeSvg(svgString)\n })\n .catch((error) => {\n logger.error('Error generating QR code:', error)\n })\n }\n }, [ssid, password, encryptionType, isHidden])\n\n if (!ssid || !password || !qrCodeSvg) {\n return null\n }\n\n return html`\n <${Container} data-testid=\"wifidetails-qrcode\">\n <${Title}> ${i18n._(`Scan the QR-Code to connect to the Wi-Fi`)} \n <${QrContainer}>\n <${QRCode}\n style=${{ width: '200px', height: '200px' }}\n dangerouslySetInnerHTML=${{ __html: qrCodeSvg }}\n />\n \n \n `\n}\n" }, { "path": "src/containers/WifiPasswordQRCode/styles.js", "content": "import styled from 'styled-components'\n\nexport const Container = styled.div`\n width: 100%;\n display: flex;\n padding: 20px 10px;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n align-self: stretch;\n\n border-radius: 10px;\n background: ${({ theme }) => theme.colors.grey500.mode1};\n`\n\nexport const Title = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n\n font-family: 'Inter';\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: normal;\n`\n\nexport const QrContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n`\n\nexport const QRCode = styled.div`\n width: 226px;\n height: 226px;\n padding: 15px;\n border-radius: 10px;\n background-color: ${({ theme }) => theme.colors.white.mode1};\n`\n" }, { "path": "src/context/AppHeaderContext.test.js", "content": "import React from 'react'\n\nimport '@testing-library/jest-dom'\nimport { render, screen, act } from '@testing-library/react'\nimport { renderHook } from '@testing-library/react'\n\nimport {\n AppHeaderContextProvider,\n useAppHeaderContext\n} from './AppHeaderContext'\n\nconst Consumer = () => {\n const { searchValue, setSearchValue, isAddMenuOpen, setIsAddMenuOpen } =\n useAppHeaderContext()\n\n return (\n
\n {searchValue}\n {String(isAddMenuOpen)}\n setSearchValue('hello')}\n >\n set\n \n setIsAddMenuOpen((open) => !open)}\n >\n toggle\n \n
\n )\n}\n\ndescribe('AppHeaderContext', () => {\n it('throws when useAppHeaderContext is used outside AppHeaderContextProvider', () => {\n const spy = jest.spyOn(console, 'error').mockImplementation(() => {})\n\n expect(() => {\n renderHook(() => useAppHeaderContext())\n }).toThrow(\n 'useAppHeaderContext must be used within AppHeaderContextProvider'\n )\n\n spy.mockRestore()\n })\n\n it('provides default state', () => {\n render(\n \n \n \n )\n\n expect(screen.getByTestId('search')).toHaveTextContent('')\n expect(screen.getByTestId('menu-open')).toHaveTextContent('false')\n })\n\n it('updates searchValue and isAddMenuOpen via setters', () => {\n render(\n \n \n \n )\n\n act(() => {\n screen.getByTestId('set-search').click()\n })\n expect(screen.getByTestId('search')).toHaveTextContent('hello')\n\n act(() => {\n screen.getByTestId('toggle-menu').click()\n })\n expect(screen.getByTestId('menu-open')).toHaveTextContent('true')\n\n act(() => {\n screen.getByTestId('toggle-menu').click()\n })\n expect(screen.getByTestId('menu-open')).toHaveTextContent('false')\n })\n})\n" }, { "path": "src/context/AppHeaderContext.tsx", "content": "import React, {\n createContext,\n useContext,\n useMemo,\n useState,\n type Dispatch,\n type ReactNode,\n type SetStateAction\n} from 'react'\n\nexport type AppHeaderContextState = {\n searchValue: string\n setSearchValue: Dispatch>\n isAddMenuOpen: boolean\n setIsAddMenuOpen: Dispatch>\n}\n\nconst AppHeaderContext = createContext(null)\n\nexport const AppHeaderContextProvider = ({\n children\n}: {\n children: ReactNode\n}) => {\n const [searchValue, setSearchValue] = useState('')\n const [isAddMenuOpen, setIsAddMenuOpen] = useState(false)\n\n const value = useMemo(\n (): AppHeaderContextState => ({\n searchValue,\n setSearchValue,\n isAddMenuOpen,\n setIsAddMenuOpen\n }),\n [searchValue, isAddMenuOpen]\n )\n\n return (\n \n {children}\n \n )\n}\n\nexport const useAppHeaderContext = (): AppHeaderContextState => {\n const ctx = useContext(AppHeaderContext)\n if (!ctx) {\n throw new Error(\n 'useAppHeaderContext must be used within AppHeaderContextProvider'\n )\n }\n return ctx\n}\n" }, { "path": "src/context/BannerContext.js", "content": "import { createContext, useContext, useEffect, useState } from 'react'\n\nimport { html } from 'htm/react'\n\nimport { BannerBox } from '../components/BannerBox'\nimport { CHROME_EXTENSION_STORE_LINK } from '../constants/pearpassLinks'\nimport { useTranslation } from '../hooks/useTranslation'\nimport { isNativeMessagingIPCRunning } from '../services/nativeMessagingIPCServer'\nimport { getNativeMessagingEnabled } from '../services/nativeMessagingPreferences'\n\nconst BannerContext = createContext()\n\nexport const BannerProvider = ({ children }) => {\n const { t } = useTranslation()\n\n const [visible, setVisible] = useState(false)\n\n useEffect(() => {\n const enabled = getNativeMessagingEnabled()\n const isRunning = isNativeMessagingIPCRunning()\n\n if (!enabled || !isRunning) {\n setVisible(true)\n }\n }, [])\n\n const showBanner = () => {\n setVisible(true)\n }\n\n const hideBanner = () => {\n setVisible(false)\n }\n\n return html`\n <${BannerContext.Provider}\n value=${{\n visible,\n showBanner,\n hideBanner\n }}\n >\n ${children}\n ${visible &&\n html`\n <${BannerBox}\n onClose=${hideBanner}\n isVisible=${visible}\n href=${CHROME_EXTENSION_STORE_LINK}\n title=${t('You’ve got the app. Now unlock the full experience.')}\n message=${t(\n 'Install our browser extension to autofill passwords, save new logins in a click, and log in instantly,right where you browse.'\n )}\n highlightedDescription=${t(\n 'No more copy-paste. No more interruptions. Just seamless security.'\n )}\n buttonText=${t('Download now')}\n />\n `}\n \n `\n}\n\nexport const useBanner = () => useContext(BannerContext)\n" }, { "path": "src/context/LoadingContext.js", "content": "import {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useState\n} from 'react'\n\nimport { html } from 'htm/react'\n\nimport { LoadingOverlay } from '../components/LoadingOverlay'\n\nconst LoadingContext = createContext()\n\n/**\n * @param {{\n * children: import('react').ReactNode\n * }} props\n */\nexport const LoadingProvider = ({ children }) => {\n // Ref-counted so concurrent callers don't stomp each other's loading state.\n const [count, setCount] = useState(0)\n\n const setIsLoading = useCallback((isLoading) => {\n setCount((prev) => {\n if (isLoading) return prev + 1\n return prev > 0 ? prev - 1 : 0\n })\n }, [])\n\n const isLoading = count > 0\n\n return html`\n <${LoadingContext.Provider} value=${{ isLoading, setIsLoading }}>\n ${children} ${isLoading && html`<${LoadingOverlay} />`}\n \n `\n}\n\n/**\n * @returns {{\n * isLoading: boolean,\n * setIsLoading: (isLoading: boolean) => void\n * }}\n */\nexport const useLoadingContext = () => useContext(LoadingContext)\n\n/**\n * @param {{\n * isLoading: boolean\n * }} props\n */\nexport const useGlobalLoading = ({ isLoading }) => {\n const { setIsLoading } = useLoadingContext()\n\n useEffect(() => {\n if (isLoading !== true) return\n setIsLoading(true)\n return () => setIsLoading(false)\n }, [isLoading, setIsLoading])\n}\n" }, { "path": "src/context/LoadingContext.test.js", "content": "import React from 'react'\n\nimport { render, act } from '@testing-library/react'\n\nimport {\n LoadingProvider,\n useLoadingContext,\n useGlobalLoading\n} from './LoadingContext'\nimport '@testing-library/jest-dom'\n\njest.mock('../components/LoadingOverlay', () => ({\n LoadingOverlay: () => 'LoadingOverlay'\n}))\n\ndescribe('LoadingContext', () => {\n describe('LoadingProvider', () => {\n it('should render children', () => {\n const { getByText } = render(\n \n
Test Child
\n \n )\n\n expect(getByText('Test Child')).toBeInTheDocument()\n })\n\n it('should show LoadingOverlay when loading', () => {\n const { container } = render(\n \n
Test Child
\n \n )\n\n expect(container.innerHTML).not.toContain('LoadingOverlay')\n\n const TestComponent = () => {\n const { setIsLoading } = useLoadingContext()\n return \n }\n\n const { getByText } = render(\n \n \n \n )\n\n act(() => {\n getByText('Load').click()\n })\n\n expect(container.innerHTML).toContain('Test Child')\n })\n })\n\n describe('useLoadingContext', () => {\n it('should provide loading state and setter', () => {\n let contextValue\n\n const TestComponent = () => {\n contextValue = useLoadingContext()\n return null\n }\n\n render(\n \n \n \n )\n\n expect(contextValue.isLoading).toBe(false)\n expect(typeof contextValue.setIsLoading).toBe('function')\n\n act(() => {\n contextValue.setIsLoading(true)\n })\n\n expect(contextValue.isLoading).toBe(true)\n })\n\n it('should stay loading until every acquire is released', () => {\n let contextValue\n\n const TestComponent = () => {\n contextValue = useLoadingContext()\n return null\n }\n\n render(\n \n \n \n )\n\n act(() => {\n contextValue.setIsLoading(true)\n contextValue.setIsLoading(true)\n })\n expect(contextValue.isLoading).toBe(true)\n\n act(() => {\n contextValue.setIsLoading(false)\n })\n expect(contextValue.isLoading).toBe(true)\n\n act(() => {\n contextValue.setIsLoading(false)\n })\n expect(contextValue.isLoading).toBe(false)\n })\n\n it('should clamp release at zero so stray falses do not underflow', () => {\n let contextValue\n\n const TestComponent = () => {\n contextValue = useLoadingContext()\n return null\n }\n\n render(\n \n \n \n )\n\n act(() => {\n contextValue.setIsLoading(false)\n contextValue.setIsLoading(false)\n contextValue.setIsLoading(true)\n })\n\n expect(contextValue.isLoading).toBe(true)\n })\n })\n\n describe('useGlobalLoading', () => {\n it('should set loading state based on props', () => {\n let contextValue\n\n const TestComponent = ({ isLoading }) => {\n useGlobalLoading({ isLoading })\n contextValue = useLoadingContext()\n return null\n }\n\n const { rerender } = render(\n \n \n \n )\n\n expect(contextValue.isLoading).toBe(false)\n\n rerender(\n \n \n \n )\n\n expect(contextValue.isLoading).toBe(true)\n })\n\n it('should not set loading state when isLoading is not boolean', () => {\n let contextValue\n\n const TestComponent = ({ isLoading }) => {\n useGlobalLoading({ isLoading })\n contextValue = useLoadingContext()\n return null\n }\n\n render(\n \n \n \n )\n\n expect(contextValue.isLoading).toBe(false)\n })\n\n it('should not release a concurrent imperative acquire when its own isLoading flips to false', () => {\n let contextValue\n\n const TestComponent = ({ isLoading }) => {\n useGlobalLoading({ isLoading })\n contextValue = useLoadingContext()\n return null\n }\n\n const { rerender } = render(\n \n \n \n )\n\n act(() => {\n contextValue.setIsLoading(true)\n })\n expect(contextValue.isLoading).toBe(true)\n\n rerender(\n \n \n \n )\n rerender(\n \n \n \n )\n\n expect(contextValue.isLoading).toBe(true)\n })\n })\n})\n" }, { "path": "src/context/ModalContext.js", "content": "import {\n createContext,\n useState,\n useContext,\n useEffect,\n useCallback,\n useMemo,\n useRef\n} from 'react'\n\nimport { generateUniqueId } from '@tetherto/pear-apps-utils-generate-unique-id'\nimport { html } from 'htm/react'\n\nimport { Overlay } from '../components/Overlay'\nimport { BASE_TRANSITION_DURATION } from '../constants/transitions'\nimport { ModalWrapper } from '../containers/Modal'\nimport { SideDrawer } from '../containers/Modal/SideDrawer'\n\n// Pad past the overlay fade so unmount lands after `transitionend`.\nexport const STACK_CLEANUP_BUFFER = 100\n\nconst ModalContext = createContext()\n\nconst getTopModal = (modalStack) => modalStack[modalStack.length - 1]\n\nconst DEFAULT_MODAL_PARAMS = {\n hasOverlay: true,\n overlayType: 'default',\n modalType: 'default',\n closable: true,\n replace: false\n}\n\n/**\n * @param {{\n * children: import('react').ReactNode\n * }} props\n */\nexport const ModalProvider = ({ children }) => {\n const [modalStack, setModalStack] = useState([])\n // Ids that already have a removal timer pending, to avoid duplicates.\n const scheduledIdsRef = useRef(new Set())\n\n const isOpen = !!modalStack.length\n\n const setModal = useCallback((content, params) => {\n setModalStack((prevState) => {\n if (params?.replace) {\n return [\n {\n content,\n id: generateUniqueId(),\n isOpen: true,\n params: { ...DEFAULT_MODAL_PARAMS, ...params }\n }\n ]\n }\n\n return [\n ...prevState,\n {\n content,\n id: generateUniqueId(),\n isOpen: true,\n params: { ...DEFAULT_MODAL_PARAMS, ...params }\n }\n ]\n })\n }, [])\n\n const closeModal = useCallback(() => {\n setModalStack((prevState) => {\n // Skip entries already closing so a rapid second close hits the modal\n // beneath one mid-transition.\n for (let i = prevState.length - 1; i >= 0; i--) {\n if (prevState[i].isOpen) {\n const next = [...prevState]\n next[i] = { ...next[i], isOpen: false }\n return next\n }\n }\n return prevState\n })\n }, [])\n\n // Drops closing entries after their fade. Runs as an effect because the\n // state closeModal flips isn't visible until the next render.\n useEffect(() => {\n const closingEntries = modalStack.filter(\n (m) => !m.isOpen && !scheduledIdsRef.current.has(m.id)\n )\n if (closingEntries.length === 0) return\n\n closingEntries.forEach(({ id }) => {\n scheduledIdsRef.current.add(id)\n setTimeout(() => {\n setModalStack((prev) => prev.filter((m) => m.id !== id))\n scheduledIdsRef.current.delete(id)\n }, BASE_TRANSITION_DURATION + STACK_CLEANUP_BUFFER)\n })\n }, [modalStack])\n\n useEffect(() => {\n const handleKeydown = (event) => {\n if (event.key === 'Escape' && isOpen) {\n const topModal = getTopModal(modalStack)\n if (topModal?.params?.closable !== false) {\n void closeModal()\n }\n }\n }\n\n window.addEventListener('keydown', handleKeydown)\n\n return () => {\n window.removeEventListener('keydown', handleKeydown)\n }\n }, [isOpen])\n\n const contextValue = useMemo(\n () => ({ isOpen, setModal, closeModal }),\n [isOpen, setModal, closeModal]\n )\n\n return html`\n <${ModalContext.Provider} value=${contextValue}>\n ${children}\n ${modalStack?.map(\n ({ content, id, isOpen, params }) => html`\n <${ModalWrapper} key=${id}>\n ${params.hasOverlay &&\n html`<${Overlay}\n onClick=${params?.closable ? closeModal : undefined}\n type=${params.overlayType}\n isOpen=${isOpen}\n /> `}\n ${params.modalType === 'sideDrawer' &&\n html`<${SideDrawer} isOpen=${isOpen}> ${content} `}\n ${params.modalType === 'default' && isOpen && content}\n \n `\n )}\n \n `\n}\n\n/**\n * @returns {{\n * isOpen: boolean,\n * setModal: (content: any, params?: any) => void,\n * closeModal: () => void\n * }}\n */\nexport const useModal = () => useContext(ModalContext)\n" }, { "path": "src/context/ModalContext.test.js", "content": "import React from 'react'\n\nimport { render, screen, fireEvent, act } from '@testing-library/react'\n\nimport { ModalProvider, STACK_CLEANUP_BUFFER, useModal } from './ModalContext'\nimport { BASE_TRANSITION_DURATION } from '../constants/transitions'\nimport '@testing-library/jest-dom'\n\nconst CLOSE_DURATION = BASE_TRANSITION_DURATION + STACK_CLEANUP_BUFFER\n\njest.mock('@tetherto/pear-apps-utils-generate-unique-id', () => {\n let n = 0\n return { generateUniqueId: jest.fn(() => `id-${n++}`) }\n})\n\njest.mock('../components/Overlay', () => ({\n Overlay: ({ onClick, type, isOpen }) => (\n
\n Overlay: {type}, isOpen: {isOpen.toString()}\n
\n )\n}))\n\njest.mock('../containers/Modal', () => ({\n ModalWrapper: ({ children }) => (\n
{children}
\n )\n}))\n\njest.mock('../containers/Modal/SideDrawer', () => ({\n SideDrawer: ({ children, isOpen }) => (\n
\n {children}\n
\n )\n}))\n\nconst TestComponent = () => {\n const { setModal, closeModal, isOpen } = useModal()\n\n return (\n
\n \n setModal(
Modal Content
)\n }\n >\n Open Modal\n \n \n
{isOpen.toString()}
\n
\n )\n}\n\nconst StackedModalsTestComponent = () => {\n const { setModal, closeModal } = useModal()\n return (\n
\n \n \n \n
\n )\n}\n\nconst TestSideDrawerComponent = () => {\n const { setModal, isOpen } = useModal()\n\n return (\n
\n \n setModal(\n
Side Drawer Content
,\n { modalType: 'sideDrawer' }\n )\n }\n >\n Open Side Drawer Modal\n \n
{isOpen.toString()}
\n
\n )\n}\n\ndescribe('ModalProvider', () => {\n beforeEach(() => {\n jest.useFakeTimers()\n })\n\n afterEach(() => {\n jest.runOnlyPendingTimers()\n jest.useRealTimers()\n })\n\n test('renders children', () => {\n render(\n \n
Child Content
\n \n )\n expect(screen.getByTestId('child')).toBeInTheDocument()\n })\n\n test('opens and closes default modal using setModal and closeModal', () => {\n render(\n \n \n \n )\n\n expect(screen.getByTestId('is-open').textContent).toBe('false')\n\n fireEvent.click(screen.getByText('Open Modal'))\n expect(screen.getByTestId('is-open').textContent).toBe('true')\n expect(screen.getByTestId('modal-content')).toBeInTheDocument()\n\n fireEvent.click(screen.getByText('Close Modal'))\n\n act(() => {\n jest.advanceTimersByTime(CLOSE_DURATION)\n })\n\n expect(screen.queryByTestId('modal-content')).not.toBeInTheDocument()\n })\n\n test('closes modal on Escape key press', () => {\n render(\n \n \n \n )\n\n fireEvent.click(screen.getByText('Open Modal'))\n expect(screen.getByTestId('modal-content')).toBeInTheDocument()\n\n fireEvent.keyDown(window, { key: 'Escape', code: 'Escape' })\n\n act(() => {\n jest.advanceTimersByTime(CLOSE_DURATION)\n })\n\n expect(screen.queryByTestId('modal-content')).not.toBeInTheDocument()\n })\n\n test('closes modal on overlay click', () => {\n render(\n \n \n \n )\n\n fireEvent.click(screen.getByText('Open Modal'))\n expect(screen.getByTestId('modal-content')).toBeInTheDocument()\n\n fireEvent.click(screen.getByTestId('overlay'))\n\n act(() => {\n jest.advanceTimersByTime(CLOSE_DURATION)\n })\n\n expect(screen.queryByTestId('modal-content')).not.toBeInTheDocument()\n })\n\n test('removes wrapper from stack after close, not just content', () => {\n render(\n \n \n \n )\n\n fireEvent.click(screen.getByText('Open Modal'))\n expect(screen.getAllByTestId('modal-wrapper').length).toBe(1)\n\n fireEvent.click(screen.getByText('Close Modal'))\n act(() => {\n jest.advanceTimersByTime(CLOSE_DURATION)\n })\n\n expect(screen.queryAllByTestId('modal-wrapper').length).toBe(0)\n })\n\n test('closes stacked modals sequentially', () => {\n render(\n \n \n \n )\n\n fireEvent.click(screen.getByText('open A'))\n fireEvent.click(screen.getByText('open B'))\n expect(screen.getAllByTestId('modal-wrapper').length).toBe(2)\n\n fireEvent.click(screen.getByText('close'))\n act(() => {\n jest.advanceTimersByTime(CLOSE_DURATION)\n })\n expect(screen.queryByTestId('modal-B')).not.toBeInTheDocument()\n expect(screen.getByTestId('modal-A')).toBeInTheDocument()\n expect(screen.getAllByTestId('modal-wrapper').length).toBe(1)\n\n fireEvent.click(screen.getByText('close'))\n act(() => {\n jest.advanceTimersByTime(CLOSE_DURATION)\n })\n expect(screen.queryByTestId('modal-A')).not.toBeInTheDocument()\n expect(screen.queryAllByTestId('modal-wrapper').length).toBe(0)\n })\n\n test('rapid double-close targets the modal beneath one mid-transition', () => {\n render(\n \n \n \n )\n\n fireEvent.click(screen.getByText('open A'))\n fireEvent.click(screen.getByText('open B'))\n fireEvent.click(screen.getByText('close'))\n fireEvent.click(screen.getByText('close'))\n\n act(() => {\n jest.advanceTimersByTime(CLOSE_DURATION)\n })\n\n expect(screen.queryByTestId('modal-A')).not.toBeInTheDocument()\n expect(screen.queryByTestId('modal-B')).not.toBeInTheDocument()\n expect(screen.queryAllByTestId('modal-wrapper').length).toBe(0)\n })\n\n test('renders sideDrawer modal correctly', () => {\n render(\n \n \n \n )\n\n fireEvent.click(screen.getByText('Open Side Drawer Modal'))\n\n expect(screen.getByTestId('side-drawer')).toBeInTheDocument()\n expect(screen.getByTestId('side-drawer-content')).toBeInTheDocument()\n })\n})\n" }, { "path": "src/context/RouterContext.d.ts", "content": "import type { ReactNode } from 'react'\n\n/** Shape of `data` passed to `navigate` and read from `useRouter().data` */\nexport type RouterData = {\n recordId?: string\n recordType?: string\n folder?: string\n vaultId?: string\n initialTab?: string\n} & Record\n\nexport type RouterContextValue = {\n currentPage: string\n data: RouterData\n navigate: (page: string, data?: RouterData) => void\n}\n\nexport declare function RouterProvider(props: {\n children: ReactNode\n}): ReactNode\n\nexport declare function useRouter(): RouterContextValue\n" }, { "path": "src/context/RouterContext.js", "content": "import { createContext, useState, useContext } from 'react'\n\nimport { html } from 'htm/react'\n\nconst RouterContext = createContext()\n\n/**\n * @typedef RouterProviderProps\n * @property {import('react').ReactNode} children React node to be rendered inside\n */\n\n/**\n * @param {RouterProviderProps} props\n */\nexport const RouterProvider = ({ children }) => {\n const [state, setState] = useState({\n currentPage: 'loading',\n data: {\n recordId: '',\n recordType: 'all'\n }\n })\n\n const navigate = (page, data = {}) => {\n setState({ currentPage: page, data })\n }\n\n return html`\n <${RouterContext.Provider} value=${{ ...state, navigate }}> ${children} \n `\n}\n\n/**\n * @returns {{\n * currentPage: string,\n * data: Object.,\n * navigate: (currentPage: string, data: Object.) => void\n * }}\n */\nexport const useRouter = () => useContext(RouterContext)\n" }, { "path": "src/context/RouterContext.test.js", "content": "import React from 'react'\n\nimport { render, act } from '@testing-library/react'\n\nimport { RouterProvider, useRouter } from './RouterContext'\n\nconst TestComponent = () => {\n const { currentPage, data, navigate } = useRouter()\n return (\n
\n
{currentPage}
\n
{data.recordId}
\n
{data.recordType}
\n \n navigate('test-page', { recordId: '123', recordType: 'password' })\n }\n >\n Navigate\n \n
\n )\n}\n\ndescribe('RouterContext', () => {\n test('should provide initial router state', () => {\n const { getByTestId } = render(\n \n \n \n )\n\n expect(getByTestId('current-page').textContent).toBe('loading')\n expect(getByTestId('record-id').textContent).toBe('')\n expect(getByTestId('record-type').textContent).toBe('all')\n })\n\n test('should navigate to a new page with data', () => {\n const { getByTestId } = render(\n \n \n \n )\n\n expect(getByTestId('current-page').textContent).toBe('loading')\n\n act(() => {\n getByTestId('navigate-button').click()\n })\n\n expect(getByTestId('current-page').textContent).toBe('test-page')\n expect(getByTestId('record-id').textContent).toBe('123')\n expect(getByTestId('record-type').textContent).toBe('password')\n })\n\n test('should handle multiple navigation events', () => {\n const MultiNavComponent = () => {\n const { currentPage, navigate } = useRouter()\n return (\n
\n
{currentPage}
\n \n \n
\n )\n }\n\n const { getByTestId } = render(\n \n \n \n )\n\n expect(getByTestId('current-page').textContent).toBe('loading')\n\n act(() => {\n getByTestId('nav1').click()\n })\n expect(getByTestId('current-page').textContent).toBe('page1')\n\n act(() => {\n getByTestId('nav2').click()\n })\n expect(getByTestId('current-page').textContent).toBe('page2')\n })\n})\n" }, { "path": "src/context/ToastContext.js", "content": "import { createContext, useState, useContext } from 'react'\n\nimport { html } from 'htm/react'\n\nimport { Toasts } from '../components/Toasts'\n\nconst ToastContext = createContext()\n\n/**\n * @param {{\n * children: import('react').ReactNode\n * }} props\n */\nexport const ToastProvider = ({ children }) => {\n const [stack, setStack] = useState([])\n\n const setToast = (data) => {\n setStack((prev) => [...prev, data])\n\n setTimeout(() => {\n setStack((prev) => prev.slice(1))\n }, 3000)\n }\n\n return html`\n <${ToastContext.Provider} value=${{ setToast }}>\n ${children}\n <${Toasts} toasts=${stack} />\n \n `\n}\n\n/**\n * @returns {{\n * setToast: (data: { message: string, icon?: import('react').ElementType }) => void\n * }}\n */\nexport const useToast = () => useContext(ToastContext)\n" }, { "path": "src/context/ToastContext.test.js", "content": "import React from 'react'\n\nimport { render, act } from '@testing-library/react'\n\nimport { ToastProvider, useToast } from './ToastContext'\nimport { Toasts } from '../components/Toasts'\n\njest.mock('../components/Toasts', () => ({\n Toasts: jest.fn(() => null)\n}))\n\njest.useFakeTimers()\n\nconst TestComponent = ({ onToast }) => {\n const { setToast } = useToast()\n React.useEffect(() => {\n if (onToast) {\n onToast(setToast)\n }\n }, [onToast])\n return null\n}\n\ndescribe('ToastContext', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n jest.clearAllTimers()\n })\n\n it('should provide toast context', () => {\n const mockSetToast = jest.fn()\n\n render(\n \n \n \n )\n\n expect(mockSetToast).toHaveBeenCalled()\n expect(typeof mockSetToast.mock.calls[0][0]).toBe('function')\n })\n\n it('should add toast to stack when setToast is called', () => {\n let setToastFn\n const toastData = { message: 'Test toast', icon: 'test-icon' }\n\n render(\n \n {\n setToastFn = fn\n }}\n />\n \n )\n\n act(() => {\n setToastFn(toastData)\n })\n\n // Find the call with toasts\n const callsWithToasts = Toasts.mock.calls.filter(\n (call) => call[0].toasts.length > 0\n )\n expect(callsWithToasts.length).toBeGreaterThan(0)\n expect(callsWithToasts[callsWithToasts.length - 1][0]).toEqual(\n expect.objectContaining({\n toasts: [toastData]\n })\n )\n })\n\n it('should remove toast after timeout', () => {\n let setToastFn\n const toastData = { message: 'Test toast', icon: 'test-icon' }\n\n render(\n \n {\n setToastFn = fn\n }}\n />\n \n )\n\n act(() => {\n setToastFn(toastData)\n })\n\n // Verify toast was added\n const callsWithToasts = Toasts.mock.calls.filter(\n (call) => call[0].toasts.length > 0\n )\n expect(callsWithToasts.length).toBeGreaterThan(0)\n expect(callsWithToasts[callsWithToasts.length - 1][0]).toEqual(\n expect.objectContaining({\n toasts: [toastData]\n })\n )\n\n act(() => {\n jest.advanceTimersByTime(3000)\n })\n\n // Find the last call with empty toasts\n const lastCall = Toasts.mock.calls[Toasts.mock.calls.length - 1]\n expect(lastCall[0].toasts).toEqual([])\n })\n\n it('should handle multiple toasts', () => {\n let setToastFn\n const toast1 = { message: 'Test toast 1', icon: 'icon-1' }\n const toast2 = { message: 'Test toast 2', icon: 'icon-2' }\n\n render(\n \n {\n setToastFn = fn\n }}\n />\n \n )\n\n act(() => {\n setToastFn(toast1)\n setToastFn(toast2)\n })\n\n // Find the call with two toasts\n const callsWithTwoToasts = Toasts.mock.calls.filter(\n (call) => call[0].toasts.length === 2\n )\n expect(callsWithTwoToasts.length).toBeGreaterThan(0)\n expect(callsWithTwoToasts[callsWithTwoToasts.length - 1][0]).toEqual(\n expect.objectContaining({\n toasts: [toast1, toast2]\n })\n )\n })\n})\n" }, { "path": "src/context/UnsavedChangesContext.tsx", "content": "import React, {\n createContext,\n ReactNode,\n useCallback,\n useContext,\n useMemo,\n useRef\n} from 'react'\n\nexport type UnsavedChangesGuard = {\n hasUnsavedChanges: boolean\n description: string\n save: () => Promise\n}\n\ntype UnsavedChangesContextValue = {\n setGuard: (guard: UnsavedChangesGuard | null) => void\n getGuard: () => UnsavedChangesGuard | null\n}\n\nconst UnsavedChangesContext = createContext(\n null\n)\n\ntype UnsavedChangesProviderProps = {\n children: ReactNode\n}\n\nexport const UnsavedChangesProvider = ({\n children\n}: UnsavedChangesProviderProps) => {\n const guardRef = useRef(null)\n\n const setGuard = useCallback((guard: UnsavedChangesGuard | null) => {\n guardRef.current = guard\n }, [])\n\n const getGuard = useCallback(() => guardRef.current, [])\n\n const value = useMemo(() => ({ setGuard, getGuard }), [setGuard, getGuard])\n\n return (\n \n {children}\n \n )\n}\n\nexport const useUnsavedChanges = () => {\n const ctx = useContext(UnsavedChangesContext)\n if (!ctx) {\n throw new Error(\n 'useUnsavedChanges must be used within an UnsavedChangesProvider'\n )\n }\n return ctx\n}\n" }, { "path": "src/electron/index.js", "content": "/**\n * Electron entry helpers: config and vault client when running inside Electron.\n * Use these when window.electronAPI is defined (Electron); otherwise use Pear + createOrGetPipe.\n */\n\nimport { createElectronVaultClientProxy } from './vaultClientProxy'\n\nlet configPromise = null\nlet vaultClientPromise = null\n\n/**\n * @returns {Promise<{ storage: string, key: string | null, upgrade: string | null, version: string | number, applink: string }>}\n */\nexport function getElectronConfig() {\n if (!configPromise && typeof window !== 'undefined' && window.electronAPI) {\n configPromise = window.electronAPI.getConfig()\n }\n return configPromise || Promise.resolve(null)\n}\n\n/**\n * @returns {Promise}\n */\nexport function getElectronVaultClient() {\n if (\n !vaultClientPromise &&\n typeof window !== 'undefined' &&\n window.electronAPI\n ) {\n vaultClientPromise = Promise.resolve(\n createElectronVaultClientProxy(window.electronAPI)\n )\n }\n return vaultClientPromise || Promise.resolve(null)\n}\n\n/**\n * Runtime update APIs (for usePearUpdate).\n */\nexport const electronRuntime =\n typeof window !== 'undefined' && window.electronAPI\n ? {\n onUpdating: (cb) => window.electronAPI.onRuntimeUpdating(cb),\n onUpdated: (cb) => window.electronAPI.onRuntimeUpdated(cb),\n applyUpdate: () => window.electronAPI.applyUpdate(),\n restart: () => window.electronAPI.restart(),\n checkUpdated: () => window.electronAPI.checkUpdated()\n }\n : null\n\nexport function isElectron() {\n return typeof window !== 'undefined' && !!window.electronAPI\n}\n" }, { "path": "src/electron/vaultClientProxy.js", "content": "/* eslint-disable no-underscore-dangle */\n/**\n * Renderer-side proxy for PearpassVaultClient when running in Electron.\n * Forwards every method call to the main process via IPC; main process holds\n * the real client connected to the bare worklet. Buffer args must be sent as\n * { __base64: base64String }; Buffer return values come back as { __base64 }.\n */\nimport EventEmitter from 'events'\n\nfunction isBufferLike(value) {\n return (\n value instanceof Uint8Array ||\n (typeof Buffer !== 'undefined' && Buffer.isBuffer(value))\n )\n}\n\nfunction toSerializableArg(value) {\n if (isBufferLike(value)) {\n const b =\n typeof Buffer !== 'undefined' ? Buffer.from(value) : new Uint8Array(value)\n const base64 =\n typeof b.toString === 'function'\n ? b.toString('base64')\n : btoa(String.fromCharCode(...new Uint8Array(b)))\n return { __base64: base64 }\n }\n if (value && typeof value === 'object' && !Array.isArray(value)) {\n const out = {}\n for (const k of Object.keys(value)) {\n out[k] = toSerializableArg(value[k])\n }\n return out\n }\n if (Array.isArray(value)) {\n return value.map(toSerializableArg)\n }\n return value\n}\n\nfunction fromSerializableData(data) {\n if (data && typeof data === 'object' && data.__base64) {\n const bin = atob(data.__base64)\n const bytes = new Uint8Array(bin.length)\n for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i)\n return typeof Buffer !== 'undefined' ? Buffer.from(bytes) : bytes\n }\n if (data && typeof data === 'object' && !Array.isArray(data)) {\n const out = {}\n for (const k of Object.keys(data)) {\n out[k] = fromSerializableData(data[k])\n }\n return out\n }\n if (Array.isArray(data)) {\n return data.map(fromSerializableData)\n }\n return data\n}\n\nconst VAULT_METHODS = [\n 'setStoragePath',\n 'vaultsInit',\n 'vaultsGetStatus',\n 'vaultsGet',\n 'vaultsClose',\n 'vaultsAdd',\n 'activeVaultGetFile',\n 'activeVaultRemoveFile',\n 'vaultsList',\n 'activeVaultInit',\n 'activeVaultGetStatus',\n 'recordFailedMasterPassword',\n 'getMasterPasswordStatus',\n 'resetFailedAttempts',\n 'createMasterPassword',\n 'initWithPassword',\n 'updateMasterPassword',\n 'initWithCredentials',\n 'activeVaultClose',\n 'activeVaultAdd',\n 'activeVaultRemove',\n 'activeVaultList',\n 'activeVaultGet',\n 'activeVaultCreateInvite',\n 'activeVaultDeleteInvite',\n 'pairActiveVault',\n 'cancelPairActiveVault',\n 'initListener',\n 'getBlindMirrors',\n 'addBlindMirrors',\n 'removeBlindMirror',\n 'addDefaultBlindMirrors',\n 'removeAllBlindMirrors',\n 'encryptionInit',\n 'encryptExportData',\n 'encryptionGetStatus',\n 'encryptionGet',\n 'encryptionAdd',\n 'hashPassword',\n 'encryptVaultKeyWithHashedPassword',\n 'encryptVaultWithKey',\n 'getDecryptionKey',\n 'decryptVaultKey',\n 'encryptionClose',\n 'closeAllInstances',\n 'activeVaultAddFile',\n 'activeVaultGetFile',\n 'beginBackground',\n 'endBackground',\n 'generateOtpCodesByIds',\n 'generateHotpNext',\n 'addOtpToRecord',\n 'removeOtpFromRecord',\n 'fetchFavicon',\n 'decryptExportData'\n]\n\n/**\n * Creates a proxy that implements the vault client interface over IPC.\n * Extends EventEmitter so removeAllListeners, removeListener, on, once, etc. are always available.\n * @param {{ vaultInvoke: (method: string, args: any[]) => Promise<{ok: boolean, data?: any, error?: string}>, vaultOnUpdate: (cb: () => void) => () => void }} api\n * @returns {import('@tetherto/pearpass-lib-vault-core').PearpassVaultClient}\n */\nexport function createElectronVaultClientProxy(api) {\n class ElectronVaultClientProxy extends EventEmitter {\n constructor() {\n super()\n api.vaultOnUpdate(() => this.emit('update'))\n for (const method of VAULT_METHODS) {\n this[method] = async (...args) => {\n const serialized = args.map(toSerializableArg)\n const result = await api.vaultInvoke(method, serialized)\n if (!result.ok) {\n const err = new Error(result.error || 'Vault request failed')\n if (result.code) err.code = result.code\n throw err\n }\n return fromSerializableData(result.data)\n }\n }\n }\n }\n return new ElectronVaultClientProxy()\n}\n" }, { "path": "src/electron/vaultClientProxy.test.js", "content": "/* eslint-disable no-underscore-dangle */\n\nimport { createElectronVaultClientProxy } from './vaultClientProxy'\n\n// Ensure btoa/atob exist in the Jest environment\nif (typeof globalThis.btoa === 'undefined') {\n globalThis.btoa = (str) => Buffer.from(str, 'binary').toString('base64')\n}\nif (typeof globalThis.atob === 'undefined') {\n globalThis.atob = (b64) => Buffer.from(b64, 'base64').toString('binary')\n}\n\ndescribe('createElectronVaultClientProxy', () => {\n let vaultInvoke\n let vaultOnUpdate\n let unsubscribe\n let updateCallback\n let client\n\n beforeEach(() => {\n vaultInvoke = jest.fn().mockResolvedValue({ ok: true, data: null })\n unsubscribe = jest.fn()\n updateCallback = null\n\n vaultOnUpdate = jest.fn((cb) => {\n updateCallback = cb\n return unsubscribe\n })\n\n const api = { vaultInvoke, vaultOnUpdate }\n client = createElectronVaultClientProxy(api)\n })\n\n test('subscribes to vaultOnUpdate and re-emits update events', () => {\n const handler = jest.fn()\n client.on('update', handler)\n\n expect(vaultOnUpdate).toHaveBeenCalledTimes(1)\n expect(typeof updateCallback).toBe('function')\n\n // Simulate an update from the main process\n updateCallback()\n\n expect(handler).toHaveBeenCalledTimes(1)\n })\n\n test('creates proxy methods that forward to vaultInvoke', async () => {\n const args = [{ foo: 'bar' }, 42]\n\n await client.vaultsInit(...args)\n\n expect(vaultInvoke).toHaveBeenCalledTimes(1)\n const [method, forwardedArgs] = vaultInvoke.mock.calls[0]\n expect(method).toBe('vaultsInit')\n expect(forwardedArgs).toHaveLength(args.length)\n expect(forwardedArgs[0]).toEqual({ foo: 'bar' })\n expect(forwardedArgs[1]).toBe(42)\n })\n\n test('serializes buffer-like arguments to base64 objects', async () => {\n const bytes = Uint8Array.from([1, 2, 3, 4])\n\n await client.hashPassword(bytes)\n\n expect(vaultInvoke).toHaveBeenCalledTimes(1)\n const [method, forwardedArgs] = vaultInvoke.mock.calls[0]\n expect(method).toBe('hashPassword')\n\n const serialized = forwardedArgs[0]\n expect(serialized).toHaveProperty('__base64')\n\n const decoded = Buffer.from(serialized.__base64, 'base64')\n expect(Array.from(decoded)).toEqual([1, 2, 3, 4])\n })\n\n test('serializes nested objects and arrays containing buffer-like values', async () => {\n const payload = {\n meta: 'test',\n data: [Uint8Array.from([9, 8, 7])]\n }\n\n await client.encryptVaultWithKey(payload)\n\n const [method, forwardedArgs] = vaultInvoke.mock.calls[0]\n expect(method).toBe('encryptVaultWithKey')\n\n const serialized = forwardedArgs[0]\n expect(serialized.meta).toBe('test')\n expect(Array.isArray(serialized.data)).toBe(true)\n expect(serialized.data[0]).toHaveProperty('__base64')\n })\n\n test('deserializes base64 data from vaultInvoke into Buffer/Uint8Array', async () => {\n const bytes = Uint8Array.from([5, 6, 7])\n const base64 = Buffer.from(bytes).toString('base64')\n\n vaultInvoke.mockResolvedValueOnce({\n ok: true,\n data: { __base64: base64 }\n })\n\n const result = await client.getDecryptionKey('some-id')\n\n expect(vaultInvoke).toHaveBeenCalledWith(\n 'getDecryptionKey',\n expect.any(Array)\n )\n expect(result instanceof Uint8Array || Buffer.isBuffer(result)).toBe(true)\n expect(Array.from(result)).toEqual([5, 6, 7])\n })\n\n test('throws an Error when vaultInvoke indicates failure and preserves error code', async () => {\n vaultInvoke.mockResolvedValueOnce({\n ok: false,\n error: 'Something went wrong',\n code: 'E_VAULT'\n })\n\n await expect(client.vaultsGetStatus()).rejects.toMatchObject({\n message: 'Something went wrong',\n code: 'E_VAULT'\n })\n })\n})\n" }, { "path": "src/hooks/__tests__/useTranslation.test.js", "content": "import { jest } from '@jest/globals'\nimport { useLingui } from '@lingui/react'\nimport { renderHook, act } from '@testing-library/react'\n\njest.mock('@lingui/react', () => ({\n useLingui: jest.fn()\n}))\n\nimport { useTranslation } from '../useTranslation'\n\ndescribe('useTranslation', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('returns an object with a t function', () => {\n const translateMock = jest.fn((key) => `translated:${key}`)\n useLingui.mockReturnValue({ i18n: { _: translateMock } })\n\n const { result } = renderHook(() => useTranslation())\n\n expect(result.current).toHaveProperty('t')\n expect(typeof result.current.t).toBe('function')\n })\n\n test('t calls i18n._ with the provided key and returns translation', () => {\n const translateMock = jest.fn((key) => `translated:${key}`)\n useLingui.mockReturnValue({ i18n: { _: translateMock } })\n\n const { result } = renderHook(() => useTranslation())\n\n let output\n act(() => {\n output = result.current.t('hello.world')\n })\n\n expect(translateMock).toHaveBeenCalledTimes(1)\n expect(translateMock).toHaveBeenCalledWith('hello.world')\n expect(output).toBe('translated:hello.world')\n })\n\n test('t passes interpolation values as the second argument to i18n._', () => {\n const translateMock = jest.fn((key, values) =>\n values !== null ? `${key}|${JSON.stringify(values)}` : key\n )\n useLingui.mockReturnValue({ i18n: { _: translateMock } })\n\n const { result } = renderHook(() => useTranslation())\n\n let output\n act(() => {\n output = result.current.t('and {count} more', { count: 2 })\n })\n\n expect(translateMock).toHaveBeenCalledTimes(1)\n expect(translateMock).toHaveBeenCalledWith('and {count} more', {\n count: 2\n })\n expect(output).toBe('and {count} more|{\"count\":2}')\n })\n\n test('t reference is stable when i18n instance does not change', () => {\n const translateMock = jest.fn((key) => key)\n const i18nInstance = { _: translateMock }\n useLingui.mockReturnValue({ i18n: i18nInstance })\n\n const { result, rerender } = renderHook(() => useTranslation())\n const firstT = result.current.t\n\n rerender()\n const secondT = result.current.t\n\n expect(secondT).toBe(firstT)\n })\n\n test('t reference updates when i18n instance changes', () => {\n const translateMock1 = jest.fn((key) => key)\n const translateMock2 = jest.fn((key) => key)\n\n const i18n1 = { _: translateMock1 }\n const i18n2 = { _: translateMock2 }\n\n useLingui\n .mockReturnValueOnce({ i18n: i18n1 })\n .mockReturnValue({ i18n: i18n2 })\n\n const { result, rerender } = renderHook(() => useTranslation())\n const firstT = result.current.t\n\n rerender()\n const secondT = result.current.t\n\n expect(secondT).not.toBe(firstT)\n })\n})\n" }, { "path": "src/hooks/useAnimatedVisibility.js", "content": "import { useEffect, useState } from 'react'\n\nimport { BASE_TRANSITION_DURATION } from '../constants/transitions'\n\nconst SAFETY_BUFFER = 100\n\n/**\n * @param {{\n * isOpen: boolean\n * transitionDuration?: number\n * nodeRef?: import('react').RefObject\n * propertyName?: string\n * }} params\n * @returns {{\n * isShown: boolean\n * isRendered: boolean\n * }}\n */\nexport const useAnimatedVisibility = ({\n isOpen,\n transitionDuration = BASE_TRANSITION_DURATION,\n nodeRef,\n propertyName\n}) => {\n const [isShown, setIsShown] = useState(false)\n\n useEffect(() => {\n if (isOpen) {\n setIsShown(true)\n return\n }\n\n const node = nodeRef?.current ?? null\n const useTransitionEnd = !!(node && propertyName)\n let done = false\n\n const finish = () => {\n if (done) return\n done = true\n setIsShown(false)\n }\n\n const handleTransitionEnd = (event) => {\n if (event.target !== node) return\n if (event.propertyName !== propertyName) return\n finish()\n }\n\n if (useTransitionEnd) {\n node.addEventListener('transitionend', handleTransitionEnd)\n }\n\n const fallbackDelay = useTransitionEnd\n ? transitionDuration + SAFETY_BUFFER\n : transitionDuration\n const fallbackTimer = setTimeout(finish, fallbackDelay)\n\n return () => {\n if (useTransitionEnd) {\n node.removeEventListener('transitionend', handleTransitionEnd)\n }\n clearTimeout(fallbackTimer)\n }\n }, [isOpen, transitionDuration, nodeRef, propertyName])\n\n return { isShown: isShown && isOpen, isRendered: isShown || isOpen }\n}\n" }, { "path": "src/hooks/useAnimatedVisibility.test.js", "content": "import { useRef } from 'react'\n\nimport { renderHook, act } from '@testing-library/react'\n\nimport { useAnimatedVisibility } from './useAnimatedVisibility'\n\njest.useFakeTimers()\n\nconst SAFETY_BUFFER = 100\n\ndescribe('useAnimatedVisibility', () => {\n test('initial state when isOpen is false', () => {\n const { result } = renderHook(() =>\n useAnimatedVisibility({ isOpen: false })\n )\n\n expect(result.current.isShown).toBe(false)\n expect(result.current.isRendered).toBe(false)\n })\n\n test('initial state when isOpen is true', () => {\n const { result } = renderHook(() => useAnimatedVisibility({ isOpen: true }))\n\n expect(result.current.isShown).toBe(true)\n expect(result.current.isRendered).toBe(true)\n })\n\n test('transitions from closed to open', () => {\n const { result, rerender } = renderHook(\n (props) => useAnimatedVisibility(props),\n { initialProps: { isOpen: false } }\n )\n\n expect(result.current.isShown).toBe(false)\n expect(result.current.isRendered).toBe(false)\n\n rerender({ isOpen: true })\n\n expect(result.current.isShown).toBe(true)\n expect(result.current.isRendered).toBe(true)\n })\n\n test('transitions from open to closed', () => {\n const { result, rerender } = renderHook(\n (props) => useAnimatedVisibility(props),\n { initialProps: { isOpen: true, transitionDuration: 300 } }\n )\n\n expect(result.current.isShown).toBe(true)\n expect(result.current.isRendered).toBe(true)\n\n rerender({ isOpen: false, transitionDuration: 300 })\n\n expect(result.current.isShown).toBe(false)\n expect(result.current.isRendered).toBe(true)\n\n act(() => {\n jest.advanceTimersByTime(300)\n })\n\n expect(result.current.isShown).toBe(false)\n expect(result.current.isRendered).toBe(false)\n })\n\n test('uses custom transition duration', () => {\n const customDuration = 500\n const { result, rerender } = renderHook(\n (props) => useAnimatedVisibility(props),\n { initialProps: { isOpen: true, transitionDuration: customDuration } }\n )\n\n rerender({ isOpen: false, transitionDuration: customDuration })\n\n expect(result.current.isRendered).toBe(true)\n\n act(() => {\n jest.advanceTimersByTime(customDuration - 10)\n })\n\n expect(result.current.isRendered).toBe(true)\n\n act(() => {\n jest.advanceTimersByTime(10)\n })\n\n expect(result.current.isRendered).toBe(false)\n })\n\n describe('with nodeRef + propertyName', () => {\n const renderWithNode = (node, initialProps = {}) =>\n renderHook(\n (props) => {\n const ref = useRef(node)\n return useAnimatedVisibility({\n ...props,\n nodeRef: ref,\n propertyName: 'opacity'\n })\n },\n {\n initialProps: {\n isOpen: true,\n transitionDuration: 300,\n ...initialProps\n }\n }\n )\n\n test('finalizes on matching transitionend before the fallback timer', () => {\n const node = document.createElement('div')\n const { result, rerender } = renderWithNode(node)\n\n rerender({ isOpen: false, transitionDuration: 300 })\n expect(result.current.isRendered).toBe(true)\n\n act(() => {\n const event = new Event('transitionend')\n Object.defineProperty(event, 'propertyName', { value: 'opacity' })\n Object.defineProperty(event, 'target', { value: node })\n node.dispatchEvent(event)\n })\n\n expect(result.current.isRendered).toBe(false)\n })\n\n test('ignores transitionend for a different property', () => {\n const node = document.createElement('div')\n const { result, rerender } = renderWithNode(node)\n\n rerender({ isOpen: false, transitionDuration: 300 })\n\n act(() => {\n const event = new Event('transitionend')\n Object.defineProperty(event, 'propertyName', { value: 'transform' })\n Object.defineProperty(event, 'target', { value: node })\n node.dispatchEvent(event)\n })\n\n // Still rendered: the transform transitionend doesn't match opacity.\n expect(result.current.isRendered).toBe(true)\n })\n\n test('ignores transitionend bubbling up from a descendant', () => {\n const node = document.createElement('div')\n const child = document.createElement('span')\n node.appendChild(child)\n\n const { result, rerender } = renderWithNode(node)\n rerender({ isOpen: false, transitionDuration: 300 })\n\n act(() => {\n const event = new Event('transitionend', { bubbles: true })\n Object.defineProperty(event, 'propertyName', { value: 'opacity' })\n Object.defineProperty(event, 'target', { value: child })\n child.dispatchEvent(event)\n })\n\n expect(result.current.isRendered).toBe(true)\n })\n\n test('falls back after transitionDuration + SAFETY_BUFFER if no event fires', () => {\n const node = document.createElement('div')\n const { result, rerender } = renderWithNode(node)\n\n rerender({ isOpen: false, transitionDuration: 300 })\n\n act(() => {\n jest.advanceTimersByTime(300 + SAFETY_BUFFER - 1)\n })\n expect(result.current.isRendered).toBe(true)\n\n act(() => {\n jest.advanceTimersByTime(1)\n })\n expect(result.current.isRendered).toBe(false)\n })\n\n test('does not double-fire when transitionend and fallback both occur', () => {\n const node = document.createElement('div')\n const { result, rerender } = renderWithNode(node)\n\n rerender({ isOpen: false, transitionDuration: 300 })\n\n act(() => {\n const event = new Event('transitionend')\n Object.defineProperty(event, 'propertyName', { value: 'opacity' })\n Object.defineProperty(event, 'target', { value: node })\n node.dispatchEvent(event)\n })\n expect(result.current.isRendered).toBe(false)\n\n // Fallback timer firing after the listener already finalized must be a\n // no-op — not flip state back to a stale value.\n act(() => {\n jest.advanceTimersByTime(SAFETY_BUFFER + 300)\n })\n expect(result.current.isRendered).toBe(false)\n })\n\n test('removes the transitionend listener on unmount', () => {\n const node = document.createElement('div')\n const removeSpy = jest.spyOn(node, 'removeEventListener')\n\n const { rerender, unmount } = renderWithNode(node)\n rerender({ isOpen: false, transitionDuration: 300 })\n\n unmount()\n\n expect(removeSpy).toHaveBeenCalledWith(\n 'transitionend',\n expect.any(Function)\n )\n })\n })\n})\n" }, { "path": "src/hooks/useAutoLockPreferences.test.js", "content": "// Mock the constants module before imports\nconst DEFAULT_AUTO_LOCK_TIMEOUT = 300000\njest.mock('@tetherto/pearpass-lib-constants', () => ({\n DEFAULT_AUTO_LOCK_TIMEOUT: 300000,\n AUTO_LOCK_ENABLED: true\n}))\n\nimport { renderHook, act } from '@testing-library/react'\n\nimport {\n useAutoLockPreferences,\n getAutoLockTimeoutMs,\n isAutoLockEnabled,\n AutoLockProvider\n} from './useAutoLockPreferences'\nimport { LOCAL_STORAGE_KEYS } from '../constants/localStorage'\n\ndescribe('useAutoLockPreferences', () => {\n beforeEach(() => {\n localStorage.clear()\n jest.clearAllMocks()\n })\n\n describe('initial state', () => {\n it('should default isAutoLockEnabled to true when localStorage is empty', () => {\n const { result } = renderHook(() => useAutoLockPreferences(), {\n wrapper: AutoLockProvider\n })\n expect(result.current.isAutoLockEnabled).toBe(true)\n })\n\n it('should default timeoutMs to DEFAULT_AUTO_LOCK_TIMEOUT when localStorage is empty', () => {\n const { result } = renderHook(() => useAutoLockPreferences(), {\n wrapper: AutoLockProvider\n })\n expect(result.current.timeoutMs).toBe(DEFAULT_AUTO_LOCK_TIMEOUT)\n })\n\n it('should return false for isAutoLockEnabled when localStorage is set to \"false\"', () => {\n localStorage.setItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_ENABLED, 'false')\n const { result } = renderHook(() => useAutoLockPreferences(), {\n wrapper: AutoLockProvider\n })\n expect(result.current.isAutoLockEnabled).toBe(false)\n })\n\n it('should return stored timeoutMs from localStorage', () => {\n const customTimeout = 60000\n localStorage.setItem(\n LOCAL_STORAGE_KEYS.AUTO_LOCK_TIMEOUT_MS,\n String(customTimeout)\n )\n const { result } = renderHook(() => useAutoLockPreferences(), {\n wrapper: AutoLockProvider\n })\n expect(result.current.timeoutMs).toBe(customTimeout)\n })\n })\n\n describe('setAutoLockEnabled', () => {\n it('should set isAutoLockEnabled to false and update localStorage', () => {\n const { result } = renderHook(() => useAutoLockPreferences(), {\n wrapper: AutoLockProvider\n })\n\n act(() => {\n result.current.setAutoLockEnabled(false)\n })\n\n expect(result.current.isAutoLockEnabled).toBe(false)\n expect(localStorage.getItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_ENABLED)).toBe(\n 'false'\n )\n })\n\n it('should set isAutoLockEnabled to true and remove localStorage key', () => {\n localStorage.setItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_ENABLED, 'false')\n const { result } = renderHook(() => useAutoLockPreferences(), {\n wrapper: AutoLockProvider\n })\n\n act(() => {\n result.current.setAutoLockEnabled(true)\n })\n\n expect(result.current.isAutoLockEnabled).toBe(true)\n expect(localStorage.getItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_ENABLED)).toBe(\n null\n )\n })\n\n it('should dispatch auto-lock-settings-changed event when enabling', () => {\n const dispatchEventSpy = jest.spyOn(window, 'dispatchEvent')\n const { result } = renderHook(() => useAutoLockPreferences(), {\n wrapper: AutoLockProvider\n })\n\n act(() => {\n result.current.setAutoLockEnabled(true)\n })\n\n expect(dispatchEventSpy).toHaveBeenCalledWith(\n expect.objectContaining({ type: 'auto-lock-settings-changed' })\n )\n })\n\n it('should dispatch auto-lock-settings-changed event when disabling', () => {\n const dispatchEventSpy = jest.spyOn(window, 'dispatchEvent')\n const { result } = renderHook(() => useAutoLockPreferences(), {\n wrapper: AutoLockProvider\n })\n\n act(() => {\n result.current.setAutoLockEnabled(false)\n })\n\n expect(dispatchEventSpy).toHaveBeenCalledWith(\n expect.objectContaining({ type: 'auto-lock-settings-changed' })\n )\n })\n })\n\n describe('setTimeoutMs', () => {\n it('should update timeoutMs state and localStorage', () => {\n const { result } = renderHook(() => useAutoLockPreferences(), {\n wrapper: AutoLockProvider\n })\n const newTimeout = 120000\n\n act(() => {\n result.current.setTimeoutMs(newTimeout)\n })\n\n expect(result.current.timeoutMs).toBe(newTimeout)\n expect(\n localStorage.getItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_TIMEOUT_MS)\n ).toBe(String(newTimeout))\n })\n\n it('supports null timeout and stores \"null\"', () => {\n const { result } = renderHook(() => useAutoLockPreferences(), {\n wrapper: AutoLockProvider\n })\n\n act(() => {\n result.current.setTimeoutMs(null)\n })\n\n expect(result.current.timeoutMs).toBeNull()\n expect(\n localStorage.getItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_TIMEOUT_MS)\n ).toBe('null')\n })\n\n it('should dispatch auto-lock-settings-changed event', () => {\n const dispatchEventSpy = jest.spyOn(window, 'dispatchEvent')\n const { result } = renderHook(() => useAutoLockPreferences(), {\n wrapper: AutoLockProvider\n })\n\n act(() => {\n result.current.setTimeoutMs(60000)\n })\n\n expect(dispatchEventSpy).toHaveBeenCalledWith(\n expect.objectContaining({ type: 'auto-lock-settings-changed' })\n )\n })\n })\n})\n\ndescribe('getAutoLockTimeoutMs', () => {\n beforeEach(() => {\n localStorage.clear()\n })\n\n it('should return DEFAULT_AUTO_LOCK_TIMEOUT when localStorage is empty', () => {\n expect(getAutoLockTimeoutMs()).toBe(DEFAULT_AUTO_LOCK_TIMEOUT)\n })\n\n it('should return stored timeout from localStorage', () => {\n const customTimeout = 300000\n localStorage.setItem(\n LOCAL_STORAGE_KEYS.AUTO_LOCK_TIMEOUT_MS,\n String(customTimeout)\n )\n expect(getAutoLockTimeoutMs()).toBe(customTimeout)\n })\n\n it('returns null when localStorage value is \"null\"', () => {\n localStorage.setItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_TIMEOUT_MS, 'null')\n expect(getAutoLockTimeoutMs()).toBeNull()\n })\n})\n\ndescribe('isAutoLockEnabled', () => {\n beforeEach(() => {\n localStorage.clear()\n })\n\n it('should return true when localStorage is empty', () => {\n expect(isAutoLockEnabled()).toBe(true)\n })\n\n it('should return false when localStorage is set to \"false\"', () => {\n localStorage.setItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_ENABLED, 'false')\n expect(isAutoLockEnabled()).toBe(false)\n })\n\n it('should return true for any value other than \"false\"', () => {\n localStorage.setItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_ENABLED, 'true')\n expect(isAutoLockEnabled()).toBe(true)\n\n localStorage.setItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_ENABLED, 'random')\n expect(isAutoLockEnabled()).toBe(true)\n })\n})\n\ndescribe('storage sync events', () => {\n beforeEach(() => {\n localStorage.clear()\n jest.clearAllMocks()\n })\n\n it('updates enabled state on apply-auto-lock-enabled event', () => {\n const { result } = renderHook(() => useAutoLockPreferences(), {\n wrapper: AutoLockProvider\n })\n expect(result.current.isAutoLockEnabled).toBe(true)\n\n act(() => {\n localStorage.setItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_ENABLED, 'false')\n window.dispatchEvent(new Event('apply-auto-lock-enabled'))\n })\n\n expect(result.current.isAutoLockEnabled).toBe(false)\n })\n\n it('updates timeout state on apply-auto-lock-timeout event', () => {\n const { result } = renderHook(() => useAutoLockPreferences(), {\n wrapper: AutoLockProvider\n })\n const newTimeout = 1234\n\n act(() => {\n localStorage.setItem(\n LOCAL_STORAGE_KEYS.AUTO_LOCK_TIMEOUT_MS,\n String(newTimeout)\n )\n window.dispatchEvent(new Event('apply-auto-lock-timeout'))\n })\n\n expect(result.current.timeoutMs).toBe(newTimeout)\n })\n})\n" }, { "path": "src/hooks/useAutoLockPreferences.ts", "content": "import {\n createContext,\n createElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState\n} from 'react'\n\nimport { DEFAULT_AUTO_LOCK_TIMEOUT, AUTO_LOCK_ENABLED } from '@tetherto/pearpass-lib-constants'\n\nimport { LOCAL_STORAGE_KEYS } from '../constants/localStorage'\nimport { applyAutoLockEnabled, applyAutoLockTimeout } from '../utils/autoLock'\n\n\ntype AutoLockContextValue = {\n shouldBypassAutoLock: boolean\n setShouldBypassAutoLock: (value: boolean) => void\n isAutoLockEnabled: boolean\n timeoutMs: number | null\n setAutoLockEnabled: (enabled: boolean) => void\n setTimeoutMs: (ms: number | null) => void\n}\n\nconst AutoLockContext = createContext({\n shouldBypassAutoLock: false,\n setShouldBypassAutoLock: () => { },\n isAutoLockEnabled: true,\n timeoutMs: DEFAULT_AUTO_LOCK_TIMEOUT,\n setAutoLockEnabled: () => { },\n setTimeoutMs: () => { }\n})\n\nexport const AutoLockProvider = ({ children }: { children: React.ReactNode }) => {\n const [shouldBypassAutoLock, setShouldBypassAutoLock] = useState(false)\n\n const [autoLockEnabled, setAutoLockEnabledState] = useState(() => {\n if (!AUTO_LOCK_ENABLED) {\n return false\n }\n const stored = localStorage.getItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_ENABLED)\n return stored !== 'false'\n })\n\n const [timeoutMs, setTimeoutMsState] = useState(() => {\n if (!AUTO_LOCK_ENABLED) {\n return DEFAULT_AUTO_LOCK_TIMEOUT\n }\n const stored = localStorage.getItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_TIMEOUT_MS)\n if (stored === 'null') {\n return null\n }\n return stored ? Number(stored) : DEFAULT_AUTO_LOCK_TIMEOUT\n })\n\n useEffect(() => {\n const syncFromStorage = () => {\n setAutoLockEnabledState(isAutoLockEnabled())\n }\n\n window.addEventListener('apply-auto-lock-enabled', syncFromStorage)\n\n return () => {\n window.removeEventListener(\n 'apply-auto-lock-enabled',\n syncFromStorage\n )\n }\n }, [])\n\n\n useEffect(() => {\n const syncFromStorage = () => {\n setTimeoutMsState(getAutoLockTimeoutMs())\n }\n\n window.addEventListener('apply-auto-lock-timeout', syncFromStorage)\n\n return () => {\n window.removeEventListener(\n 'apply-auto-lock-timeout',\n syncFromStorage\n )\n }\n }, [])\n\n\n\n const setAutoLockEnabled = useCallback((enabled: boolean) => {\n applyAutoLockEnabled(enabled)\n setAutoLockEnabledState(enabled)\n }, [])\n\n\n const setTimeoutMs = useCallback((ms: number | null) => {\n applyAutoLockTimeout(ms)\n setTimeoutMsState(ms)\n }, [])\n\n const value = useMemo(\n () => ({\n shouldBypassAutoLock,\n setShouldBypassAutoLock,\n isAutoLockEnabled: autoLockEnabled,\n timeoutMs,\n setAutoLockEnabled,\n setTimeoutMs\n }),\n [shouldBypassAutoLock, autoLockEnabled, timeoutMs, setAutoLockEnabled, setTimeoutMs]\n )\n\n return createElement(AutoLockContext.Provider, { value }, children)\n}\n\nexport const useAutoLockPreferences = () => useContext(AutoLockContext)\n\nexport function getAutoLockTimeoutMs(): number | null {\n if (!AUTO_LOCK_ENABLED) {\n return DEFAULT_AUTO_LOCK_TIMEOUT\n }\n const stored = localStorage.getItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_TIMEOUT_MS)\n if (stored === 'null') {\n return null\n }\n return stored ? Number(stored) : DEFAULT_AUTO_LOCK_TIMEOUT\n}\n\nexport function isAutoLockEnabled(): boolean {\n const stored = localStorage.getItem(LOCAL_STORAGE_KEYS.AUTO_LOCK_ENABLED)\n return stored !== 'false'\n}\n" }, { "path": "src/hooks/useConnectExtension.js", "content": "import React, { useState } from 'react'\n\nimport { CopyIcon } from '../lib-react-components'\nimport { useCopyToClipboard } from './useCopyToClipboard.electron'\nimport { useTranslation } from './useTranslation'\nimport { COPY_FEEDBACK_DISPLAY_TIME } from '../constants/timeConstants'\nimport { ExtensionPairingModalContent } from '../containers/Modal/ExtensionPairingModalContent'\nimport { ExtensionPairingModalContentV2 } from '../containers/Modal/ExtensionPairingModalContent/ExtensionPairingModalContentV2'\nimport { useGlobalLoading } from '../context/LoadingContext.js'\nimport { useModal } from '../context/ModalContext'\nimport { useToast } from '../context/ToastContext'\nimport { getElectronConfig } from '../electron'\nimport { createOrGetPearpassClient } from '../services/createOrGetPearpassClient'\nimport {\n isNativeMessagingIPCRunning,\n startNativeMessagingIPC,\n stopNativeMessagingIPC\n} from '../services/nativeMessagingIPCServer'\nimport {\n getNativeMessagingEnabled,\n setNativeMessagingEnabled\n} from '../services/nativeMessagingPreferences'\nimport {\n getFingerprint,\n getOrCreateIdentity,\n getPairingToken,\n resetIdentity\n} from '../services/security/appIdentity'\nimport { clearAllSessions } from '../services/security/sessionStore.js'\nimport { isV2 } from '../utils/designVersion'\nimport {\n setupNativeMessaging,\n killNativeMessagingHostProcesses,\n cleanupNativeMessaging\n} from '../utils/nativeMessagingSetup'\n\nexport const useConnectExtension = () => {\n const { setModal } = useModal()\n const { setToast } = useToast()\n const { t } = useTranslation()\n\n const { copyToClipboard } = useCopyToClipboard({\n onCopy: () => setToast({ message: t('Copied!'), icon: CopyIcon })\n })\n\n const [isBrowserExtensionEnabled, setIsBrowserExtensionEnabled] = useState(\n getNativeMessagingEnabled() && isNativeMessagingIPCRunning()\n )\n\n const handleSetupExtension = async () => {\n // Setup native messaging for the extension\n const config = await getElectronConfig()\n const result = await setupNativeMessaging({\n userDataPath: config.userDataPath,\n execPath: config.execPath,\n bridgePath: config.bridgePath\n })\n\n if (result.success) {\n // Kill any existing native host so Chrome respawns it and re-reads the manifest\n await killNativeMessagingHostProcesses()\n // Start native messaging IPC server\n const client = createOrGetPearpassClient()\n await startNativeMessagingIPC(client)\n setNativeMessagingEnabled(true)\n setIsBrowserExtensionEnabled(true)\n setToast({\n message: t('PearPass ready for extension connection.')\n })\n } else {\n const errorMessage = result.message || t('Setup failed')\n throw new Error(errorMessage)\n }\n }\n\n const handleStopNativeMessaging = async () => {\n clearAllSessions()\n await stopNativeMessagingIPC()\n\n // Ensure any running native host is terminated so it cannot continue talking\n await killNativeMessagingHostProcesses()\n\n // Clean unused manifest file and make sure browser cannot respawn the host while off\n await cleanupNativeMessaging().catch(() => {})\n\n resetState()\n\n setNativeMessagingEnabled(false)\n\n // Reset identity to force re-pairing\n // This prevents extensions from reconnecting without a new pairing token\n const client = createOrGetPearpassClient()\n await resetIdentity(client)\n }\n\n // Pairing info state\n const [isExtensionConnectionLoading, setIsExtensionConnectionLoading] =\n useState(false)\n useGlobalLoading({ isLoading: isExtensionConnectionLoading })\n const [copyFeedback, setCopyFeedback] = useState('')\n\n const resetState = () => {\n setIsBrowserExtensionEnabled(false)\n setIsExtensionConnectionLoading(false)\n setCopyFeedback('')\n }\n\n const loadPairingInfo = async (reset = false) => {\n const client = createOrGetPearpassClient()\n\n const id = reset\n ? // Reset pairing - generate new identity and clear sessions\n await resetIdentity(client)\n : // Just load existing identity\n await getOrCreateIdentity(client)\n\n // Mark pairing as approved for this identity so that nmBeginHandshake is allowed\n await client\n .encryptionAdd('nm.identity.pairingApproved', 'true')\n .catch(() => {})\n\n const pairingToken = await getPairingToken(client, id.ed25519PublicKey)\n const fingerprint = getFingerprint(id.ed25519PublicKey)\n const result = {\n pairingToken,\n fingerprint,\n tokenCreationDate: id.creationDate\n }\n\n if (reset) {\n // Show feedback when new token is generated\n setCopyFeedback(t('New pairing token generated!'))\n setTimeout(() => setCopyFeedback(''), COPY_FEEDBACK_DISPLAY_TIME)\n }\n\n return result\n }\n\n const toggleBrowserExtension = async (isOn) => {\n if (isOn) {\n setIsExtensionConnectionLoading(true)\n return handleSetupExtension()\n .then(loadPairingInfo)\n .then(({ pairingToken, fingerprint, tokenCreationDate }) => {\n setModal(\n isV2() ? (\n copyToClipboard(pairingToken)}\n pairingToken={pairingToken}\n loadingPairing={isExtensionConnectionLoading}\n />\n ) : (\n copyToClipboard(pairingToken)}\n pairingToken={pairingToken}\n loadingPairing={isExtensionConnectionLoading}\n copyFeedback={copyFeedback}\n tokenCreationDate={tokenCreationDate}\n fingerprint={fingerprint}\n />\n ),\n { replace: true }\n )\n })\n .catch((error) => {\n setToast({ message: t('Error: ') + error.message })\n })\n .finally(() => {\n setIsExtensionConnectionLoading(false)\n })\n }\n\n return handleStopNativeMessaging()\n }\n\n return {\n toggleBrowserExtension,\n isBrowserExtensionEnabled\n }\n}\n" }, { "path": "src/hooks/useConnectExtension.test.js", "content": "jest.mock('sodium-native', () => ({\n crypto_sign_keypair: jest.fn(),\n crypto_sign_ed25519_pk_to_curve25519: jest.fn(),\n crypto_sign_ed25519_sk_to_curve25519: jest.fn(),\n crypto_kx_keypair: jest.fn(),\n crypto_kx_server_session_keys: jest.fn(),\n crypto_kx_client_session_keys: jest.fn(),\n crypto_secretbox_easy: jest.fn(),\n crypto_secretbox_open_easy: jest.fn(),\n randombytes_buf: jest.fn(),\n sodium_malloc: jest.fn((size) => Buffer.alloc(size)),\n crypto_sign_PUBLICKEYBYTES: 32,\n crypto_sign_SECRETKEYBYTES: 64,\n crypto_kx_PUBLICKEYBYTES: 32,\n crypto_kx_SECRETKEYBYTES: 32,\n crypto_kx_SESSIONKEYBYTES: 32,\n crypto_secretbox_NONCEBYTES: 24,\n crypto_secretbox_MACBYTES: 16\n}))\njest.mock(\n '../containers/Modal/ExtensionPairingModalContent/ExtensionPairingModalContentV2',\n () => ({ ExtensionPairingModalContentV2: () => null })\n)\njest.mock('../containers/Modal/ExtensionPairingModalContent', () => ({\n ExtensionPairingModalContent: () => null\n}))\n\nimport { act, renderHook, waitFor } from '@testing-library/react'\n\nimport { useConnectExtension } from './useConnectExtension'\nimport { createOrGetPearpassClient } from '../services/createOrGetPearpassClient'\nimport {\n isNativeMessagingIPCRunning,\n startNativeMessagingIPC,\n stopNativeMessagingIPC\n} from '../services/nativeMessagingIPCServer'\nimport {\n getNativeMessagingEnabled,\n setNativeMessagingEnabled\n} from '../services/nativeMessagingPreferences'\nimport {\n getFingerprint,\n getOrCreateIdentity,\n getPairingToken\n} from '../services/security/appIdentity'\nimport {\n killNativeMessagingHostProcesses,\n setupNativeMessaging\n} from '../utils/nativeMessagingSetup'\n\nconst mockSetModal = jest.fn()\nconst mockSetToast = jest.fn()\n\njest.mock('../context/ModalContext', () => ({\n useModal: () => ({ setModal: mockSetModal })\n}))\njest.mock('../context/ToastContext', () => ({\n useToast: () => ({ setToast: mockSetToast })\n}))\njest.mock('../context/LoadingContext', () => ({\n useGlobalLoading: jest.fn()\n}))\njest.mock('@lingui/react', () => ({\n useLingui: () => ({ i18n: { _: (msg) => msg } })\n}))\n\njest.mock('../services/createOrGetPearpassClient', () => ({\n createOrGetPearpassClient: jest.fn()\n}))\njest.mock('../services/nativeMessagingIPCServer', () => ({\n isNativeMessagingIPCRunning: jest.fn(),\n startNativeMessagingIPC: jest.fn(),\n stopNativeMessagingIPC: jest.fn()\n}))\njest.mock('../services/nativeMessagingPreferences', () => ({\n getNativeMessagingEnabled: jest.fn(),\n setNativeMessagingEnabled: jest.fn()\n}))\njest.mock('../services/security/appIdentity', () => ({\n getFingerprint: jest.fn(),\n getOrCreateIdentity: jest.fn(),\n getPairingToken: jest.fn(),\n resetIdentity: jest.fn()\n}))\njest.mock('../utils/nativeMessagingSetup', () => ({\n setupNativeMessaging: jest.fn(),\n cleanupNativeMessaging: jest.fn().mockResolvedValue(),\n killNativeMessagingHostProcesses: jest.fn().mockResolvedValue()\n}))\njest.mock('../electron', () => ({\n getElectronConfig: jest.fn().mockResolvedValue({\n userDataPath: '/mock/user/data',\n execPath: '/mock/exec/path',\n bridgePath: '/mock/bridge/path'\n })\n}))\n\ndescribe('useConnectExtension', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n it('initializes extension state if enabled and running', () => {\n getNativeMessagingEnabled.mockReturnValue(true)\n isNativeMessagingIPCRunning.mockReturnValue(true)\n\n const { result } = renderHook(() => useConnectExtension())\n expect(result.current.isBrowserExtensionEnabled).toBe(true)\n })\n\n it('does not enable if not running or not enabled', () => {\n getNativeMessagingEnabled.mockReturnValue(false)\n isNativeMessagingIPCRunning.mockReturnValue(false)\n\n const { result } = renderHook(() => useConnectExtension())\n expect(result.current.isBrowserExtensionEnabled).toBe(false)\n })\n\n it('connects extension successfully via toggleBrowserExtension', async () => {\n const fakeIdentity = {\n ed25519PublicKey: 'pubkey',\n creationDate: '2023-01-01'\n }\n\n setupNativeMessaging.mockResolvedValue({ success: true })\n startNativeMessagingIPC.mockResolvedValue()\n killNativeMessagingHostProcesses.mockResolvedValue()\n createOrGetPearpassClient.mockReturnValue({\n encryptionAdd: jest.fn().mockResolvedValue(undefined)\n })\n getOrCreateIdentity.mockResolvedValue(fakeIdentity)\n getPairingToken.mockResolvedValue('PAIRCODE-ABCD')\n getFingerprint.mockReturnValue('ABCD1234')\n\n const { result } = renderHook(() => useConnectExtension())\n\n await act(async () => {\n await result.current.toggleBrowserExtension(true)\n })\n\n expect(setupNativeMessaging).toHaveBeenCalled()\n expect(killNativeMessagingHostProcesses).toHaveBeenCalled()\n expect(startNativeMessagingIPC).toHaveBeenCalled()\n expect(setNativeMessagingEnabled).toHaveBeenCalledWith(true)\n expect(mockSetModal).toHaveBeenCalled()\n })\n\n it('handles setup failure gracefully via toggleBrowserExtension', async () => {\n setupNativeMessaging.mockResolvedValue({ success: false, message: 'fail' })\n createOrGetPearpassClient.mockReturnValue({})\n\n const { result } = renderHook(() => useConnectExtension())\n\n await act(async () => {\n await result.current.toggleBrowserExtension(true)\n })\n\n expect(setupNativeMessaging).toHaveBeenCalled()\n expect(startNativeMessagingIPC).not.toHaveBeenCalled()\n expect(mockSetToast).toHaveBeenCalled()\n })\n\n it('stops native messaging when toggled off', async () => {\n stopNativeMessagingIPC.mockResolvedValue()\n\n const { result } = renderHook(() => useConnectExtension())\n\n await act(async () => {\n await result.current.toggleBrowserExtension(false)\n })\n\n expect(stopNativeMessagingIPC).toHaveBeenCalled()\n expect(setNativeMessagingEnabled).toHaveBeenCalledWith(false)\n })\n\n it('loads pairing info on enable', async () => {\n const fakeIdentity = {\n ed25519PublicKey: 'pubkey',\n creationDate: '2023-01-01'\n }\n\n setupNativeMessaging.mockResolvedValue({ success: true })\n startNativeMessagingIPC.mockResolvedValue()\n killNativeMessagingHostProcesses.mockResolvedValue()\n getOrCreateIdentity.mockResolvedValue(fakeIdentity)\n getPairingToken.mockResolvedValue('PAIRCODE-ABCD')\n getFingerprint.mockReturnValue('ABCD1234')\n\n getNativeMessagingEnabled.mockReturnValue(false)\n isNativeMessagingIPCRunning.mockReturnValue(false)\n createOrGetPearpassClient.mockReturnValue({\n encryptionAdd: jest.fn().mockResolvedValue(undefined)\n })\n\n const { result } = renderHook(() => useConnectExtension())\n\n await act(async () => {\n await result.current.toggleBrowserExtension(true)\n })\n\n await waitFor(() => {\n expect(getOrCreateIdentity).toHaveBeenCalled()\n expect(getPairingToken).toHaveBeenCalled()\n expect(getFingerprint).toHaveBeenCalledWith('pubkey')\n })\n })\n})\n" }, { "path": "src/hooks/useCopyToClipboard.electron.js", "content": "/**\n * Electron renderer implementation: uses Clipboard API only.\n * No pear-run / pear-ipc so the bundle doesn't pull in Node-only deps (__filename, etc.).\n * Optional: clear clipboard after delay can be added via IPC to main later.\n */\nimport React, { useState, useEffect } from 'react'\n\nimport { CLIPBOARD_CLEAR_TIMEOUT } from '@tetherto/pearpass-lib-constants'\nimport { Check } from '@tetherto/pearpass-lib-ui-kit/icons'\n\nimport { useTranslation } from './useTranslation'\nimport { LOCAL_STORAGE_KEYS } from '../constants/localStorage'\nimport { useToast } from '../context/ToastContext'\nimport { logger } from '../utils/logger'\n\n/**\n * @param {{ onCopy?: () => void }} props\n * @returns {{ isCopied: boolean, copyToClipboard: (text: string) => boolean, isCopyToClipboardDisabled: boolean }}\n */\nexport const useCopyToClipboard = ({ onCopy } = {}) => {\n const { t } = useTranslation()\n const toastCtx = useToast()\n const setToast = toastCtx?.setToast\n const [isCopyToClipboardDisabled, setIsCopyToClipboardDisabled] =\n useState(true)\n const [isCopied, setIsCopied] = useState(false)\n\n useEffect(() => {\n const disabled = localStorage.getItem(\n LOCAL_STORAGE_KEYS.COPY_TO_CLIPBOARD_DISABLED\n )\n setIsCopyToClipboardDisabled(disabled === 'true')\n }, [])\n\n const copyToClipboard = (text) => {\n if (isCopyToClipboardDisabled) return false\n if (!text || typeof text !== 'string') {\n logger.error('useCopyToClipboard', 'Text to copy is invalid or undefined')\n return false\n }\n if (!navigator.clipboard) {\n logger.error('useCopyToClipboard', 'Clipboard API is not available')\n return false\n }\n navigator.clipboard.writeText(text).then(\n () => {\n setIsCopied(true)\n if (onCopy) {\n onCopy()\n } else {\n setToast?.({ message: t('Copied to Clipboard'), icon: Check })\n }\n // Clear clipboard automatically after delay\n if (window.electronAPI) {\n window.electronAPI.clearClipboardAfter?.(\n text,\n CLIPBOARD_CLEAR_TIMEOUT\n )\n }\n },\n (err) => {\n logger.error(\n 'useCopyToClipboard',\n 'Failed to copy text to clipboard',\n err\n )\n }\n )\n return true\n }\n\n return { isCopied, copyToClipboard, isCopyToClipboardDisabled }\n}\n" }, { "path": "src/hooks/useCopyToClipboard.electron.test.js", "content": "import { act, renderHook, waitFor } from '@testing-library/react'\n\nimport { useCopyToClipboard } from './useCopyToClipboard.electron'\nimport { LOCAL_STORAGE_KEYS } from '../constants/localStorage'\nimport { logger } from '../utils/logger'\n\njest.mock('../utils/logger', () => ({\n logger: {\n error: jest.fn()\n }\n}))\njest.mock('./useTranslation', () => ({\n useTranslation: () => ({\n t: (value) => value\n })\n}))\njest.mock('@tetherto/pearpass-lib-constants', () => ({\n CLIPBOARD_CLEAR_TIMEOUT: 1000\n}))\n\ndescribe('useCopyToClipboard.electron', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n localStorage.clear()\n window.electronAPI = {\n clearClipboardAfter: jest.fn()\n }\n\n Object.defineProperty(navigator, 'clipboard', {\n configurable: true,\n writable: true,\n value: {\n writeText: jest.fn().mockResolvedValue(undefined)\n }\n })\n })\n\n it('starts with isCopied set to false', () => {\n const { result } = renderHook(() => useCopyToClipboard())\n expect(result.current.isCopied).toBe(false)\n })\n\n it('reads disabled flag from localStorage on mount', async () => {\n localStorage.setItem(LOCAL_STORAGE_KEYS.COPY_TO_CLIPBOARD_DISABLED, 'true')\n const { result } = renderHook(() => useCopyToClipboard())\n\n await waitFor(() => {\n expect(result.current.isCopyToClipboardDisabled).toBe(true)\n })\n })\n\n it('enables copy when disabled flag is not true', async () => {\n const { result } = renderHook(() => useCopyToClipboard())\n\n await waitFor(() => {\n expect(result.current.isCopyToClipboardDisabled).toBe(false)\n })\n })\n\n it('does not copy when disabled', async () => {\n localStorage.setItem(LOCAL_STORAGE_KEYS.COPY_TO_CLIPBOARD_DISABLED, 'true')\n const { result } = renderHook(() => useCopyToClipboard())\n\n await waitFor(() => {\n expect(result.current.isCopyToClipboardDisabled).toBe(true)\n })\n\n let copied\n await act(async () => {\n copied = result.current.copyToClipboard('secret')\n })\n\n expect(copied).toBe(false)\n expect(navigator.clipboard.writeText).not.toHaveBeenCalled()\n })\n\n it('copies text and sets isCopied on success', async () => {\n const onCopy = jest.fn()\n const { result } = renderHook(() => useCopyToClipboard({ onCopy }))\n\n await waitFor(() => {\n expect(result.current.isCopyToClipboardDisabled).toBe(false)\n })\n\n let copied\n await act(async () => {\n copied = result.current.copyToClipboard('secret')\n })\n\n expect(copied).toBe(true)\n expect(navigator.clipboard.writeText).toHaveBeenCalledWith('secret')\n\n await waitFor(() => {\n expect(result.current.isCopied).toBe(true)\n expect(onCopy).toHaveBeenCalledTimes(1)\n })\n expect(window.electronAPI.clearClipboardAfter).toHaveBeenCalledWith(\n 'secret',\n 1000\n )\n })\n\n it('logs and returns false when text is invalid', async () => {\n const { result } = renderHook(() => useCopyToClipboard())\n\n await waitFor(() => {\n expect(result.current.isCopyToClipboardDisabled).toBe(false)\n })\n\n let copied\n await act(async () => {\n copied = result.current.copyToClipboard(undefined)\n })\n\n expect(copied).toBe(false)\n expect(logger.error).toHaveBeenCalledWith(\n 'useCopyToClipboard',\n 'Text to copy is invalid or undefined'\n )\n expect(navigator.clipboard.writeText).not.toHaveBeenCalled()\n })\n\n it('logs and returns false when Clipboard API is unavailable', async () => {\n const { result } = renderHook(() => useCopyToClipboard())\n\n await waitFor(() => {\n expect(result.current.isCopyToClipboardDisabled).toBe(false)\n })\n\n Object.defineProperty(navigator, 'clipboard', {\n configurable: true,\n writable: true,\n value: undefined\n })\n\n let copied\n await act(async () => {\n copied = result.current.copyToClipboard('secret')\n })\n\n expect(copied).toBe(false)\n expect(logger.error).toHaveBeenCalledWith(\n 'useCopyToClipboard',\n 'Clipboard API is not available'\n )\n })\n\n it('logs write failure when clipboard write rejects', async () => {\n const error = new Error('copy failed')\n navigator.clipboard.writeText.mockRejectedValueOnce(error)\n\n const { result } = renderHook(() => useCopyToClipboard())\n\n await waitFor(() => {\n expect(result.current.isCopyToClipboardDisabled).toBe(false)\n })\n\n let copied\n await act(async () => {\n copied = result.current.copyToClipboard('secret')\n await Promise.resolve()\n })\n\n expect(copied).toBe(true)\n await waitFor(() => {\n expect(logger.error).toHaveBeenCalledWith(\n 'useCopyToClipboard',\n 'Failed to copy text to clipboard',\n error\n )\n })\n })\n})\n" }, { "path": "src/hooks/useCreateOrEditRecord.d.ts", "content": "import { PassType } from '../shared/types'\n\nexport type CreateOrEditRecordParams = {\n recordType: string\n initialRecord?: unknown\n selectedFolder?: string\n isFavorite?: boolean\n setValue?: (value: string, type: PassType) => void\n}\n\nexport function useCreateOrEditRecord(): {\n handleCreateOrEditRecord: (params: CreateOrEditRecordParams) => void\n}\n" }, { "path": "src/hooks/useCreateOrEditRecord.js", "content": "import { html } from 'htm/react'\n\nimport { CreateOrEditCategoryWrapper } from '../containers/Modal/CreateOrEditCategoryWrapper'\nimport { GeneratePasswordModalContentV2 } from '../containers/Modal/GeneratePasswordModalContentV2/GeneratePasswordModalContentV2'\nimport { GeneratePasswordSideDrawerContent } from '../containers/Modal/GeneratePasswordSideDrawerContent'\nimport { useModal } from '../context/ModalContext'\nimport { isV2 } from '../utils/designVersion'\n\nexport const useCreateOrEditRecord = () => {\n const { setModal } = useModal()\n\n const getModalContentByRecordType = ({\n recordType,\n initialRecord,\n selectedFolder,\n isFavorite\n }) => html`\n <${CreateOrEditCategoryWrapper}\n recordType=${recordType}\n initialRecord=${initialRecord}\n selectedFolder=${selectedFolder}\n isFavorite=${isFavorite}\n />\n `\n\n const getSideDrawerContentByRecordType = ({ recordType, setValue }) => {\n if (recordType === 'password') {\n return html`<${GeneratePasswordSideDrawerContent}\n onPasswordInsert=${setValue}\n />`\n }\n }\n\n const getGeneratePasswordV2Content = ({ setValue }) => html`\n <${GeneratePasswordModalContentV2} onPasswordInsert=${setValue} />\n `\n\n /**\n * @param {{\n * recordType: string,\n * initialRecord?: unknown,\n * selectedFolder?: string,\n * isFavorite?: boolean,\n * setValue?: (value: string, type: import('../shared/types').PassType) => void\n * }} options\n */\n const handleCreateOrEditRecord = (options) => {\n const { recordType, initialRecord, selectedFolder, isFavorite, setValue } =\n options\n\n if (recordType === 'password') {\n if (isV2()) {\n setModal(getGeneratePasswordV2Content({ setValue }))\n return\n }\n\n setModal(getSideDrawerContentByRecordType({ recordType, setValue }), {\n modalType: 'sideDrawer'\n })\n\n return\n }\n\n setModal(\n getModalContentByRecordType({\n recordType,\n initialRecord,\n selectedFolder,\n isFavorite\n })\n )\n }\n\n return {\n handleCreateOrEditRecord\n }\n}\n" }, { "path": "src/hooks/useCreateOrEditRecord.test.js", "content": "import { renderHook } from '@testing-library/react'\n\nimport { useCreateOrEditRecord } from './useCreateOrEditRecord'\nimport { useModal } from '../context/ModalContext'\nimport '@testing-library/jest-dom'\n\njest.mock(\n '../containers/Modal/CreateFolderModalContentV2/CreateFolderModalContentV2',\n () => ({\n CreateFolderModalContentV2: function MockCreateFolderModalContentV2() {\n return null\n }\n })\n)\n\njest.mock(\n '../containers/Modal/DisplayPictureModalContentV2/DisplayPictureModalContentV2',\n () => ({\n DisplayPictureModalContentV2: function MockDisplayPictureModalContentV2() {\n return null\n }\n })\n)\n\njest.mock('../containers/Modal/CreateOrEditCategoryWrapper', () => ({\n CreateOrEditCategoryWrapper: function MockCreateOrEditCategoryWrapper() {\n return null\n }\n}))\n\njest.mock(\n '../containers/Modal/GeneratePasswordModalContentV2/GeneratePasswordModalContentV2',\n () => ({\n GeneratePasswordModalContentV2:\n function MockGeneratePasswordModalContentV2() {\n return null\n }\n })\n)\n\njest.mock('../context/ModalContext', () => ({\n useModal: jest.fn()\n}))\n\njest.mock('@tetherto/pear-apps-utils-generate-unique-id', () => ({\n generateUniqueId: jest.fn(() => 'mocked-unique-id')\n}))\n\njest.mock('../utils/designVersion', () => ({\n isV2: () => true\n}))\n\ndescribe('useCreateOrEditRecord', () => {\n const setModalMock = jest.fn()\n\n beforeEach(() => {\n jest.clearAllMocks()\n useModal.mockReturnValue({ setModal: setModalMock })\n })\n\n it('should return handleCreateOrEditRecord function', () => {\n const { result } = renderHook(() => useCreateOrEditRecord())\n expect(typeof result.current.handleCreateOrEditRecord).toBe('function')\n })\n\n it('should call setModal for password record type', () => {\n const { result } = renderHook(() => useCreateOrEditRecord())\n const setValue = jest.fn()\n\n result.current.handleCreateOrEditRecord({\n recordType: 'password',\n setValue\n })\n\n expect(setModalMock).toHaveBeenCalledTimes(1)\n expect(setModalMock.mock.calls[0][1]).toBeUndefined()\n })\n\n it('should call setModal with category wrapper content for non-password record types', () => {\n const { result } = renderHook(() => useCreateOrEditRecord())\n\n result.current.handleCreateOrEditRecord({\n recordType: 'login',\n initialRecord: { id: '123' },\n selectedFolder: 'folder1'\n })\n\n expect(setModalMock).toHaveBeenCalledTimes(1)\n expect(setModalMock.mock.calls[0][1]).toBeUndefined()\n })\n\n it('should handle various record types', () => {\n const { result } = renderHook(() => useCreateOrEditRecord())\n const recordTypes = ['login', 'creditCard', 'identity', 'note', 'custom']\n\n recordTypes.forEach((recordType) => {\n setModalMock.mockClear()\n result.current.handleCreateOrEditRecord({ recordType })\n expect(setModalMock).toHaveBeenCalledTimes(1)\n })\n })\n})\n" }, { "path": "src/hooks/useCustomFields.js", "content": "import { useState } from 'react'\n\nimport { generateUniqueId } from '@tetherto/pear-apps-utils-generate-unique-id'\n\n/**\n * @param {{\n * customFields?: {\n * id: string,\n * type: string,\n * props: any\n * }[]\n * }} props\n * @returns {{\n * customFields: {id: string, type: string, props: any}[],\n * createCustomField: (type: string, props: any) => void,\n * setCustomFields: React.Dispatch>\n * }}\n */\nexport const useCustomFields = ({\n customFields: initialCustomFields = []\n} = {}) => {\n const [customFields, setCustomFields] = useState(initialCustomFields)\n\n const createCustomField = (type, props) => {\n const id = generateUniqueId()\n\n return {\n id,\n type,\n props: {\n ...props\n }\n }\n }\n\n return {\n customFields,\n createCustomField,\n setCustomFields\n }\n}\n" }, { "path": "src/hooks/useCustomFields.test.js", "content": "import { renderHook, act } from '@testing-library/react'\nimport { generateUniqueId } from '@tetherto/pear-apps-utils-generate-unique-id'\n\nimport { useCustomFields } from './useCustomFields'\n\njest.mock('@tetherto/pear-apps-utils-generate-unique-id', () => ({\n generateUniqueId: jest.fn()\n}))\n\ndescribe('useCustomFields', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n generateUniqueId.mockReturnValue('test-id-123')\n })\n\n test('should initialize with empty customFields by default', () => {\n const { result } = renderHook(() => useCustomFields())\n\n expect(result.current.customFields).toEqual([])\n })\n\n test('should initialize with provided customFields', () => {\n const initialCustomFields = [\n { id: 'field1', type: 'text', props: { label: 'Field 1' } }\n ]\n\n const { result } = renderHook(() =>\n useCustomFields({ customFields: initialCustomFields })\n )\n\n expect(result.current.customFields).toEqual(initialCustomFields)\n })\n\n test('should create a custom field with the correct structure', () => {\n const { result } = renderHook(() => useCustomFields())\n\n const newField = result.current.createCustomField('text', {\n label: 'New Field'\n })\n\n expect(generateUniqueId).toHaveBeenCalledTimes(1)\n expect(newField).toEqual({\n id: 'test-id-123',\n type: 'text',\n props: { label: 'New Field' }\n })\n })\n\n test('should update customFields with setCustomFields', () => {\n const { result } = renderHook(() => useCustomFields())\n\n const newCustomFields = [\n { id: 'field1', type: 'text', props: { label: 'Field 1' } }\n ]\n\n act(() => {\n result.current.setCustomFields(newCustomFields)\n })\n\n expect(result.current.customFields).toEqual(newCustomFields)\n })\n\n test('should handle multiple custom fields', () => {\n generateUniqueId.mockReturnValueOnce('id-1').mockReturnValueOnce('id-2')\n\n const { result } = renderHook(() => useCustomFields())\n\n const field1 = result.current.createCustomField('text', {\n label: 'Field 1'\n })\n const field2 = result.current.createCustomField('checkbox', {\n label: 'Field 2',\n checked: false\n })\n\n act(() => {\n result.current.setCustomFields([field1, field2])\n })\n\n expect(result.current.customFields).toEqual([\n { id: 'id-1', type: 'text', props: { label: 'Field 1' } },\n {\n id: 'id-2',\n type: 'checkbox',\n props: { label: 'Field 2', checked: false }\n }\n ])\n })\n})\n" }, { "path": "src/hooks/useGetMultipleFiles.js", "content": "import { useEffect } from 'react'\n\nimport { vaultGetFile } from '@tetherto/pearpass-lib-vault'\n\nimport { logger } from '../utils/logger'\n\n/**\n * @param {object} [param0]\n * @param {string[]} [param0.fieldNames]\n * @param {(name: string, value: unknown) => void} [param0.updateValues]\n * @param {{ data?: Record } | undefined} [param0.initialRecord]\n */\nexport const useGetMultipleFiles = ({\n fieldNames,\n updateValues,\n initialRecord\n} = {}) => {\n const getFilesAsync = async (fieldName) => {\n const attachments = initialRecord?.data?.[fieldName] || []\n\n if (!attachments.length) {\n return\n }\n\n try {\n const files = await Promise.all(\n attachments.map(async (attachment) => {\n const file = await vaultGetFile(\n `record/${initialRecord.id}/file/${attachment.id}`\n )\n return { ...attachment, buffer: file }\n })\n )\n\n updateValues(fieldName, files)\n } catch (error) {\n logger.error('useGetMultipleFiles', 'Error retrieving files:', error)\n }\n }\n\n useEffect(() => {\n ;(async () => {\n await Promise.all(\n fieldNames.map(async (fieldName) => {\n if (!fieldName || !updateValues || !initialRecord) {\n return\n }\n await getFilesAsync(fieldName)\n })\n )\n })()\n }, [initialRecord])\n}\n" }, { "path": "src/hooks/useGetMultipleFiles.test.js", "content": "import { renderHook, waitFor } from '@testing-library/react'\nimport { vaultGetFile } from '@tetherto/pearpass-lib-vault'\n\nimport { useGetMultipleFiles } from './useGetMultipleFiles'\nimport { logger } from '../utils/logger'\n\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n vaultGetFile: jest.fn()\n}))\n\njest.mock('../utils/logger', () => ({\n logger: { error: jest.fn() }\n}))\n\ndescribe('useGetMultipleFiles', () => {\n const mockUpdateValues = jest.fn()\n const initialRecord = {\n id: 'rec-1',\n data: {\n fieldA: [\n { id: 'file-1', name: 'file1.txt' },\n { id: 'file-2', name: 'file2.txt' }\n ],\n fieldB: []\n }\n }\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n it('fetches files for each field and calls updateValues', async () => {\n vaultGetFile\n .mockResolvedValueOnce('buffer1')\n .mockResolvedValueOnce('buffer2')\n\n await renderHook(() =>\n useGetMultipleFiles({\n fieldNames: ['fieldA', 'fieldB'],\n updateValues: mockUpdateValues,\n initialRecord\n })\n )\n\n await waitFor(() => {\n expect(vaultGetFile).toHaveBeenCalledTimes(2)\n expect(vaultGetFile).toHaveBeenCalledWith('record/rec-1/file/file-1')\n expect(vaultGetFile).toHaveBeenCalledWith('record/rec-1/file/file-2')\n\n expect(mockUpdateValues).toHaveBeenCalledWith('fieldA', [\n { id: 'file-1', name: 'file1.txt', buffer: 'buffer1' },\n { id: 'file-2', name: 'file2.txt', buffer: 'buffer2' }\n ])\n expect(mockUpdateValues).toHaveBeenCalledTimes(1)\n })\n })\n\n it('does not call updateValues if attachments are empty', async () => {\n await renderHook(() =>\n useGetMultipleFiles({\n fieldNames: ['fieldB'],\n updateValues: mockUpdateValues,\n initialRecord\n })\n )\n\n await Promise.resolve()\n\n expect(vaultGetFile).not.toHaveBeenCalled()\n expect(mockUpdateValues).not.toHaveBeenCalled()\n })\n\n it('logs error if getFile throws', async () => {\n vaultGetFile.mockRejectedValueOnce(new Error('fail'))\n\n await renderHook(() =>\n useGetMultipleFiles({\n fieldNames: ['fieldA'],\n updateValues: mockUpdateValues,\n initialRecord\n })\n )\n\n await waitFor(() => {\n expect(logger.error).toHaveBeenCalledWith(\n 'useGetMultipleFiles',\n 'Error retrieving files:',\n expect.any(Error)\n )\n expect(mockUpdateValues).not.toHaveBeenCalled()\n })\n })\n\n it('does nothing if fieldNames, updateValues, or initialRecord are missing', async () => {\n await renderHook(() =>\n useGetMultipleFiles({\n fieldNames: [],\n updateValues: mockUpdateValues,\n initialRecord\n })\n )\n await renderHook(() =>\n useGetMultipleFiles({\n fieldNames: ['fieldA'],\n updateValues: null,\n initialRecord\n })\n )\n await renderHook(() =>\n useGetMultipleFiles({\n fieldNames: ['fieldA'],\n updateValues: mockUpdateValues,\n initialRecord: null\n })\n )\n\n await Promise.resolve()\n\n expect(vaultGetFile).not.toHaveBeenCalled()\n expect(mockUpdateValues).not.toHaveBeenCalled()\n })\n})\n" }, { "path": "src/hooks/useLanguageOptions.js", "content": "import { useMemo } from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { LANGUAGES } from '@tetherto/pearpass-lib-constants'\n\nexport const useLanguageOptions = () => {\n const { i18n } = useLingui()\n\n const languageOptions = useMemo(() => {\n const languageLabelByValue = {\n en: i18n._('English'),\n it: i18n._('Italian'),\n es: i18n._('Spanish'),\n fr: i18n._('French')\n }\n\n return LANGUAGES.map((lang) => ({\n label: languageLabelByValue[lang.value],\n value: lang.value,\n testId: `settings-language-${lang.value}`\n }))\n }, [LANGUAGES, i18n])\n\n return {\n languageOptions\n }\n}\n" }, { "path": "src/hooks/useLanguageOptions.test.js", "content": "import { renderHook } from '@testing-library/react'\n\nimport { useLanguageOptions } from './useLanguageOptions'\n\njest.mock('@lingui/react', () => ({\n useLingui: () => ({\n i18n: { _: (str) => str }\n })\n}))\n\njest.mock('@tetherto/pearpass-lib-constants', () => ({\n LANGUAGES: [\n { value: 'en' },\n { value: 'it' },\n { value: 'es' },\n { value: 'fr' }\n ]\n}))\n\ndescribe('useLanguageOptions', () => {\n afterEach(() => {\n jest.clearAllMocks()\n })\n it('should return language options with correct labels and values', () => {\n const { result } = renderHook(() => useLanguageOptions())\n\n expect(result.current.languageOptions).toEqual([\n { label: 'English', value: 'en', testId: 'settings-language-en' },\n { label: 'Italian', value: 'it', testId: 'settings-language-it' },\n { label: 'Spanish', value: 'es', testId: 'settings-language-es' },\n { label: 'French', value: 'fr', testId: 'settings-language-fr' }\n ])\n })\n\n it('should memoize the language options', () => {\n const { result, rerender } = renderHook(() => useLanguageOptions())\n const firstResult = result.current.languageOptions\n\n rerender()\n\n expect(result.current.languageOptions).toStrictEqual(firstResult)\n })\n})\n" }, { "path": "src/hooks/useOutsideClick.js", "content": "import { useEffect, useRef } from 'react'\n\n/**\n * @typedef UseOutsideClickParams\n * @property {(event: Event) => void} onOutsideClick\n */\n\n/**\n * @param {UseOutsideClickParams} params\n * @returns {import('react').MutableRefObject}\n */\n\nexport const useOutsideClick = ({ onOutsideClick }) => {\n const ref = useRef(null)\n\n useEffect(() => {\n const handleListener = (event) => {\n if (ref?.current && ref.current.contains(event.target)) {\n return\n }\n\n onOutsideClick(event)\n }\n\n document.addEventListener('mousedown', handleListener)\n document.addEventListener('touchstart', handleListener)\n\n return () => {\n document.removeEventListener('mousedown', handleListener)\n document.removeEventListener('touchstart', handleListener)\n }\n }, [])\n\n return ref\n}\n" }, { "path": "src/hooks/useOutsideClick.test.js", "content": "import { renderHook, fireEvent } from '@testing-library/react'\n\nimport { useOutsideClick } from './useOutsideClick'\n\ndescribe('useOutsideClick', () => {\n beforeEach(() => {\n const div = document.createElement('div')\n document.body.appendChild(div)\n })\n\n afterEach(() => {\n document.body.innerHTML = ''\n jest.clearAllMocks()\n })\n\n test('should add event listeners on mount', () => {\n const addEventListenerSpy = jest.spyOn(document, 'addEventListener')\n const mockOnOutsideClick = jest.fn()\n\n renderHook(() => useOutsideClick({ onOutsideClick: mockOnOutsideClick }))\n\n expect(addEventListenerSpy).toHaveBeenCalledWith(\n 'mousedown',\n expect.any(Function)\n )\n expect(addEventListenerSpy).toHaveBeenCalledWith(\n 'touchstart',\n expect.any(Function)\n )\n })\n\n test('should remove event listeners on unmount', () => {\n const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')\n const mockOnOutsideClick = jest.fn()\n\n const { unmount } = renderHook(() =>\n useOutsideClick({ onOutsideClick: mockOnOutsideClick })\n )\n unmount()\n\n expect(removeEventListenerSpy).toHaveBeenCalledWith(\n 'mousedown',\n expect.any(Function)\n )\n expect(removeEventListenerSpy).toHaveBeenCalledWith(\n 'touchstart',\n expect.any(Function)\n )\n })\n\n test('should call onOutsideClick when clicking outside the ref element', () => {\n const mockOnOutsideClick = jest.fn()\n\n const { result } = renderHook(() =>\n useOutsideClick({ onOutsideClick: mockOnOutsideClick })\n )\n\n const divElement = document.createElement('div')\n document.body.appendChild(divElement)\n\n Object.defineProperty(result.current, 'current', {\n value: divElement,\n writable: true\n })\n\n const outsideElement = document.createElement('button')\n document.body.appendChild(outsideElement)\n\n fireEvent.mouseDown(outsideElement)\n\n expect(mockOnOutsideClick).toHaveBeenCalled()\n })\n\n test('should not call onOutsideClick when clicking inside the ref element', () => {\n const mockOnOutsideClick = jest.fn()\n\n const { result } = renderHook(() =>\n useOutsideClick({ onOutsideClick: mockOnOutsideClick })\n )\n\n const divElement = document.createElement('div')\n document.body.appendChild(divElement)\n\n Object.defineProperty(result.current, 'current', {\n value: divElement,\n writable: true\n })\n\n fireEvent.mouseDown(divElement)\n\n expect(mockOnOutsideClick).not.toHaveBeenCalled()\n })\n})\n" }, { "path": "src/hooks/usePasteFromClipboard.js", "content": "import { useCallback } from 'react'\n\nimport { useLingui } from '@lingui/react'\n\nimport { useToast } from '../context/ToastContext'\n/**\n * @returns {{\n * pasteFromClipboard: () => Promise\n * }}\n */\n\nexport const usePasteFromClipboard = () => {\n const { i18n } = useLingui()\n const { setToast } = useToast()\n\n const pasteFromClipboard = useCallback(async () => {\n try {\n let text = ''\n if (typeof navigator !== 'undefined' && navigator?.clipboard?.readText) {\n text = await navigator.clipboard.readText()\n } else {\n throw new Error('Clipboard API not available')\n }\n\n if (!text?.length) {\n setToast({\n message: i18n._('No text found in clipboard')\n })\n return null\n }\n\n setToast({\n message: i18n._('Pasted from clipboard!')\n })\n\n return text\n } catch {\n setToast({\n message: i18n._('Failed to paste from clipboard')\n })\n return null\n }\n }, [i18n, setToast])\n\n return { pasteFromClipboard }\n}\n" }, { "path": "src/hooks/usePasteFromClipboard.test.js", "content": "import React from 'react'\n\nimport { render, act } from '@testing-library/react'\nimport '@testing-library/jest-dom'\n\nimport { usePasteFromClipboard } from './usePasteFromClipboard'\n\njest.mock('@lingui/react', () => ({\n useLingui: () => ({ i18n: { _: (s) => s } })\n}))\n\nconst mockSetToast = jest.fn()\njest.mock('../context/ToastContext', () => ({\n useToast: () => ({ setToast: mockSetToast })\n}))\n\nlet exposedPaste\nconst HookHost = () => {\n const { pasteFromClipboard } = usePasteFromClipboard()\n exposedPaste = pasteFromClipboard\n return null\n}\n\ndescribe('usePasteFromClipboard', () => {\n const originalNavigator = global.navigator\n\n const renderHost = () => {\n render()\n }\n\n afterEach(() => {\n mockSetToast.mockReset()\n // Restore navigator between tests\n Object.defineProperty(global, 'navigator', {\n value: originalNavigator,\n configurable: true\n })\n })\n\n test('returns text and shows success toast when clipboard has text', async () => {\n const readText = jest.fn().mockResolvedValue('hello world')\n Object.defineProperty(global, 'navigator', {\n value: { clipboard: { readText } },\n configurable: true\n })\n\n renderHost()\n let result\n await act(async () => {\n result = await exposedPaste()\n })\n\n expect(readText).toHaveBeenCalled()\n expect(result).toBe('hello world')\n expect(mockSetToast).toHaveBeenCalledWith({\n message: 'Pasted from clipboard!'\n })\n })\n\n test('returns null and warns when clipboard text is empty', async () => {\n const readText = jest.fn().mockResolvedValue('')\n Object.defineProperty(global, 'navigator', {\n value: { clipboard: { readText } },\n configurable: true\n })\n\n renderHost()\n let result\n await act(async () => {\n result = await exposedPaste()\n })\n\n expect(readText).toHaveBeenCalled()\n expect(result).toBeNull()\n expect(mockSetToast).toHaveBeenCalledWith({\n message: 'No text found in clipboard'\n })\n })\n\n test('returns null and shows failure toast when API unavailable or throws', async () => {\n // Case: navigator missing clipboard API\n Object.defineProperty(global, 'navigator', {\n value: {},\n configurable: true\n })\n\n renderHost()\n let result\n await act(async () => {\n result = await exposedPaste()\n })\n\n expect(result).toBeNull()\n expect(mockSetToast).toHaveBeenCalledWith({\n message: 'Failed to paste from clipboard'\n })\n\n mockSetToast.mockReset()\n\n // Case: readText throws\n const readText = jest.fn().mockRejectedValue(new Error('boom'))\n Object.defineProperty(global, 'navigator', {\n value: { clipboard: { readText } },\n configurable: true\n })\n\n await act(async () => {\n result = await exposedPaste()\n })\n\n expect(readText).toHaveBeenCalled()\n expect(result).toBeNull()\n expect(mockSetToast).toHaveBeenCalledWith({\n message: 'Failed to paste from clipboard'\n })\n })\n})\n" }, { "path": "src/hooks/usePearUpdate.js", "content": "/** @typedef {import('pear-interface')} */\n\nimport { useEffect, useRef } from 'react'\n\nimport { html } from 'htm/react'\n\nimport { UpdateRequiredModalContent } from '../containers/Modal/UpdateRequiredModalContent'\nimport { UpdateRequiredModalContentV2 } from '../containers/Modal/UpdateRequiredModalContentV2/UpdateRequiredModalContentV2'\nimport { useModal } from '../context/ModalContext'\nimport { isV2 } from '../utils/designVersion'\n\nexport const usePearUpdate = () => {\n const { setModal } = useModal()\n const modalShownRef = useRef(false)\n const electronAPI = window.electronAPI\n\n const showUpdateRequiredModal = () => {\n if (modalShownRef.current || !Pear.config.key) return\n\n setModal(\n isV2()\n ? html`<${UpdateRequiredModalContentV2} onUpdate=${handleUpdateApp} />`\n : html`<${UpdateRequiredModalContent} onUpdate=${handleUpdateApp} />`,\n { closable: false }\n )\n\n modalShownRef.current = true\n }\n\n const onPearEvent = (name, listener) => {\n if (!electronAPI) return () => {}\n\n if (name === 'updated') {\n return electronAPI.onRuntimeUpdated(() => listener('updated'))\n }\n\n return () => {}\n }\n\n useEffect(() => {\n // DEV: preserve hot-reload behaviour driven by Pear core.\n const checkUpdated = async () => {\n const isUpdated = await electronAPI.checkUpdated()\n if (isUpdated) {\n showUpdateRequiredModal()\n }\n }\n checkUpdated()\n if (!Pear.config.key) {\n const onPearUpdate = () => {\n Pear.reload()\n }\n Pear.updates(onPearUpdate)\n return () => {\n Pear.updates(() => {})\n }\n }\n\n const offUpdated = onPearEvent('updated', async () => {\n showUpdateRequiredModal()\n })\n\n return () => {\n offUpdated?.()\n }\n }, [])\n}\n\nasync function handleUpdateApp() {\n const electronAPI = window.electronAPI\n if (!electronAPI) return\n electronAPI.restart()\n}\n" }, { "path": "src/hooks/usePearUpdate.test.js", "content": "import { act, renderHook, waitFor } from '@testing-library/react'\n\nimport { usePearUpdate } from './usePearUpdate'\nimport { UpdateRequiredModalContent } from '../containers/Modal/UpdateRequiredModalContent'\nimport { UpdateRequiredModalContentV2 } from '../containers/Modal/UpdateRequiredModalContentV2/UpdateRequiredModalContentV2'\nimport { useModal } from '../context/ModalContext'\nimport { isV2 } from '../utils/designVersion'\n\nglobal.Pear = {\n updates: jest.fn(),\n restart: jest.fn(),\n reload: jest.fn(),\n updated: jest.fn(() => Promise.resolve(false)),\n config: { tier: 'prod', key: 'some-key' }\n}\n\nwindow.electronAPI = {\n checkUpdated: jest.fn(() => Promise.resolve(false)),\n onRuntimeUpdated: jest.fn(() => () => {}),\n restart: jest.fn()\n}\n\njest.mock('../context/ModalContext', () => ({\n useModal: jest.fn()\n}))\n\njest.mock('../utils/designVersion', () => ({\n isV2: jest.fn()\n}))\n\njest.mock(\n '../containers/Modal/UpdateRequiredModalContentV2/UpdateRequiredModalContentV2',\n () => ({\n UpdateRequiredModalContentV2: function UpdateRequiredModalContentV2() {\n return null\n }\n })\n)\n\ndescribe('usePearUpdate', () => {\n let setModalMock\n\n beforeEach(() => {\n setModalMock = jest.fn()\n useModal.mockReturnValue({ setModal: setModalMock })\n isV2.mockReturnValue(true)\n Pear.updates.mockClear()\n Pear.restart.mockClear()\n Pear.reload.mockClear()\n Pear.updated.mockClear()\n Pear.config.tier = 'prod'\n Pear.config.key = 'some-key'\n window.electronAPI.checkUpdated.mockClear()\n window.electronAPI.onRuntimeUpdated.mockClear()\n window.electronAPI.restart.mockClear()\n window.electronAPI.checkUpdated.mockResolvedValue(false)\n })\n\n it('subscribes to electron runtime updates in prod mode', () => {\n renderHook(() => usePearUpdate())\n expect(window.electronAPI.onRuntimeUpdated).toHaveBeenCalledTimes(1)\n })\n\n it('shows modal when checkUpdated resolves with isUpdated true', async () => {\n window.electronAPI.checkUpdated.mockResolvedValue(true)\n\n await act(async () => {\n renderHook(() => usePearUpdate())\n })\n\n await waitFor(() => {\n expect(setModalMock).toHaveBeenCalledTimes(1)\n })\n expect(Pear.restart).not.toHaveBeenCalled()\n expect(Pear.reload).not.toHaveBeenCalled()\n })\n\n it('shows modal when onRuntimeUpdated fires (prod)', async () => {\n window.electronAPI.checkUpdated.mockResolvedValue(true)\n let updateCallback\n window.electronAPI.onRuntimeUpdated.mockImplementation((cb) => {\n updateCallback = cb\n return () => {}\n })\n\n renderHook(() => usePearUpdate())\n\n await act(async () => {\n updateCallback()\n })\n\n expect(setModalMock).toHaveBeenCalledTimes(1)\n })\n\n it('ignores updates in dev mode (no key)', async () => {\n Pear.config.key = null\n renderHook(() => usePearUpdate())\n\n const callback = Pear.updates.mock.calls[0][0]\n await act(async () => {\n await callback({ diff: [{ key: '/app/file.js' }] })\n })\n\n expect(setModalMock).not.toHaveBeenCalled()\n expect(Pear.restart).not.toHaveBeenCalled()\n expect(Pear.reload).toHaveBeenCalled()\n })\n\n it('triggers restart when update handler is called', async () => {\n window.electronAPI.checkUpdated.mockResolvedValue(true)\n\n await act(async () => {\n renderHook(() => usePearUpdate())\n })\n\n await waitFor(() => {\n expect(setModalMock).toHaveBeenCalled()\n })\n const modalElement = setModalMock.mock.calls[0][0]\n await act(async () => {\n modalElement.props.onUpdate()\n })\n expect(window.electronAPI.restart).toHaveBeenCalled()\n })\n\n it('uses UpdateRequiredModalContentV2 when isV2() is true', async () => {\n isV2.mockReturnValue(true)\n window.electronAPI.checkUpdated.mockResolvedValue(true)\n let updateCallback\n window.electronAPI.onRuntimeUpdated.mockImplementation((cb) => {\n updateCallback = cb\n return () => {}\n })\n await act(async () => {\n renderHook(() => usePearUpdate())\n })\n await act(async () => {\n updateCallback()\n })\n\n expect(setModalMock).toHaveBeenCalledTimes(1)\n const modalElement = setModalMock.mock.calls[0][0]\n expect(modalElement.type).toBe(UpdateRequiredModalContentV2)\n })\n\n it('uses UpdateRequiredModalContent when isV2() is false', async () => {\n isV2.mockReturnValue(false)\n window.electronAPI.checkUpdated.mockResolvedValue(true)\n let updateCallback\n window.electronAPI.onRuntimeUpdated.mockImplementation((cb) => {\n updateCallback = cb\n return () => {}\n })\n await act(async () => {\n renderHook(() => usePearUpdate())\n })\n await act(async () => {\n updateCallback()\n })\n\n expect(setModalMock).toHaveBeenCalledTimes(1)\n const modalElement = setModalMock.mock.calls[0][0]\n expect(modalElement.type).toBe(UpdateRequiredModalContent)\n })\n})\n" }, { "path": "src/hooks/useRecordActionItems.d.ts", "content": "export type RecordActionItem = {\n name: string\n type: string\n click?: () => void\n}\n\nexport function useRecordActionItems(params?: {\n excludeTypes?: string[]\n record?: { id?: string; type?: string; isFavorite?: boolean } & Record<\n string,\n unknown\n >\n recordType?: 'login' | 'otp'\n onSelect?: () => void\n onClose?: () => void\n}): {\n actions: RecordActionItem[]\n}\n" }, { "path": "src/hooks/useRecordActionItems.js", "content": "import React from 'react'\n\nimport { useLingui } from '@lingui/react'\nimport { RECORD_TYPES, useRecords } from '@tetherto/pearpass-lib-vault'\nimport { html } from 'htm/react'\n\nimport { useCreateOrEditRecord } from './useCreateOrEditRecord'\nimport { ConfirmationModalContent } from '../containers/Modal/ConfirmationModalContent'\nimport { DeleteRecordsModalContentV2 } from '../containers/Modal/DeleteRecordsModalContentV2'\nimport { MoveFolderModalContent } from '../containers/Modal/MoveFolderModalContent'\nimport { MoveFolderModalContentV2 } from '../containers/Modal/MoveFolderModalContentV2/MoveFolderModalContentV2'\nimport { useModal } from '../context/ModalContext'\nimport { useRouter } from '../context/RouterContext'\nimport { useToast } from '../context/ToastContext'\nimport { isV2 } from '../utils/designVersion'\n\n/**\n * @param {{\n * excludeType: Array\n * record: {\n * id: string\n * }\n * onSelect: () => void\n * onClose: () => void\n * }}\n *\n * @returns {{\n * actions: Array<{\n * name: string,\n * type: string\n * }>}}\n */\nexport const useRecordActionItems = ({\n excludeTypes = [],\n record,\n recordType,\n onSelect,\n onClose\n} = {}) => {\n const { i18n } = useLingui()\n const { setModal, closeModal } = useModal()\n const { data: routerData, navigate, currentPage } = useRouter()\n const { setToast } = useToast()\n\n const { deleteRecords, updateRecords, updateFavoriteState } = useRecords()\n const { handleCreateOrEditRecord } = useCreateOrEditRecord()\n\n const isOtpContext =\n recordType === RECORD_TYPES.OTP ||\n routerData?.recordType === RECORD_TYPES.OTP\n const isAuthenticatorLoginRecord =\n isOtpContext && record?.type === RECORD_TYPES.LOGIN\n\n const handleStripOtp = async () => {\n const { otpInput, otp, ...restData } = record?.data ?? {}\n const { otpPublic, ...recordWithoutOtp } = record ?? {}\n const updatedRecord = { ...recordWithoutOtp, data: restData }\n try {\n await updateRecords([updatedRecord])\n if (routerData?.recordId === record?.id) {\n navigate(currentPage, { ...routerData, recordId: undefined })\n }\n closeModal?.()\n } catch (err) {\n setToast({\n message: err?.message ?? i18n._('Failed to remove authenticator code')\n })\n }\n }\n\n const handleDeleteConfirm = () => {\n if (routerData?.recordId === record?.id) {\n navigate(currentPage, { ...routerData, recordId: undefined })\n }\n\n deleteRecords([record?.id])\n\n closeModal?.()\n }\n\n const handleDelete = () => {\n if (isV2()) {\n setModal(\n \n )\n } else {\n setModal(\n \n )\n }\n onClose?.()\n }\n\n const handleFavoriteToggle = () => {\n updateFavoriteState([record?.id], !record?.isFavorite)\n\n onClose?.()\n }\n\n const handleSelect = () => {\n onSelect?.(record)\n\n onClose?.()\n }\n\n const handleEdit = () => {\n handleCreateOrEditRecord({\n recordType: isOtpContext ? RECORD_TYPES.OTP : record?.type,\n initialRecord: record\n })\n\n onClose?.()\n }\n\n const handleMoveClick = () => {\n const VersionBasedMoveFolderModalContent = isV2()\n ? MoveFolderModalContentV2\n : MoveFolderModalContent\n\n setModal(html`\n <${VersionBasedMoveFolderModalContent} records=${[record]} />\n `)\n\n onClose?.()\n }\n\n const v2Actions = [\n { name: i18n._('Select element'), type: 'select', click: handleSelect },\n { name: i18n._('Edit'), type: 'edit', click: handleEdit },\n {\n name: i18n._(\n record?.isFavorite ? 'Remove from Favorites' : 'Add to Favorites'\n ),\n type: 'favorite',\n click: handleFavoriteToggle\n },\n {\n name: i18n._('Move to Another Folder'),\n type: 'move',\n click: handleMoveClick\n },\n { name: i18n._('Delete Item'), type: 'delete', click: handleDelete }\n ]\n\n const v1Actions = [\n { name: i18n._('Select element'), type: 'select', click: handleSelect },\n {\n name: i18n._(\n record?.isFavorite ? 'Remove from Favorites' : 'Mark as favorite'\n ),\n type: 'favorite',\n click: handleFavoriteToggle\n },\n {\n name: i18n._('Move to another folder'),\n type: 'move',\n click: handleMoveClick\n },\n { name: i18n._('Delete element'), type: 'delete', click: handleDelete }\n ]\n\n const defaultActions = isV2() ? v2Actions : v1Actions\n\n const filteredActions = excludeTypes.length\n ? defaultActions.filter((action) => !excludeTypes.includes(action.type))\n : defaultActions\n\n return { actions: filteredActions }\n}\n" }, { "path": "src/hooks/useRecordActionItems.test.js", "content": "import { renderHook } from '@testing-library/react'\n\nimport { useRecordActionItems } from './useRecordActionItems'\nimport { useModal } from '../context/ModalContext'\nimport { useRouter } from '../context/RouterContext'\nimport { isV2 } from '../utils/designVersion'\n\nconst mockDeleteRecord = jest.fn()\nconst mockUpdateRecords = jest.fn().mockResolvedValue(undefined)\nconst mockUpdateFavoriteState = jest.fn()\n\njest.mock(\n '../containers/Modal/MoveFolderModalContentV2/MoveFolderModalContentV2',\n () => ({\n MoveFolderModalContentV2: () => null\n })\n)\n\njest.mock('../containers/Modal/DeleteRecordsModalContentV2', () => ({\n DeleteRecordsModalContentV2: () => null\n}))\n\njest.mock('../utils/designVersion', () => ({\n isV2: jest.fn().mockReturnValue(true)\n}))\n\njest.mock(\n '../containers/Modal/CreateFolderModalContentV2/CreateFolderModalContentV2',\n () => ({\n CreateFolderModalContentV2: function MockCreateFolderModalContentV2() {\n return null\n }\n })\n)\n\njest.mock('../context/ModalContext', () => ({\n useModal: jest.fn()\n}))\n\njest.mock('../context/ToastContext', () => ({\n useToast: () => ({ setToast: jest.fn() })\n}))\n\njest.mock('../context/RouterContext', () => ({\n useRouter: jest.fn()\n}))\n\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n RECORD_TYPES: { LOGIN: 'login', OTP: 'otp' },\n useRecords: () => ({\n deleteRecords: mockDeleteRecord,\n updateRecords: mockUpdateRecords,\n updateFavoriteState: mockUpdateFavoriteState\n })\n}))\n\njest.mock('@lingui/react', () => ({\n useLingui: () => ({\n i18n: {\n _: (text) => text\n }\n })\n}))\n\njest.mock('./useCreateOrEditRecord', () => ({\n useCreateOrEditRecord: () => ({\n handleCreateOrEditRecord: jest.fn()\n })\n}))\n\ndescribe('useRecordActionItems', () => {\n const mockRecord = { id: '123', isFavorite: false }\n const mockOnSelect = jest.fn()\n const mockOnClose = jest.fn()\n\n const mockSetModal = jest.fn()\n const mockCloseModal = jest.fn()\n const mockNavigate = jest.fn()\n\n beforeEach(() => {\n jest.clearAllMocks()\n isV2.mockReturnValue(true)\n\n useModal.mockReturnValue({\n setModal: mockSetModal,\n closeModal: mockCloseModal\n })\n\n useRouter.mockReturnValue({\n data: {},\n navigate: mockNavigate,\n currentPage: 'somePage'\n })\n })\n\n test('returns correct actions when no excludeTypes provided', () => {\n const { result } = renderHook(() =>\n useRecordActionItems({\n record: mockRecord,\n onSelect: mockOnSelect,\n onClose: mockOnClose\n })\n )\n\n expect(result.current.actions).toHaveLength(5)\n expect(result.current.actions[0].type).toBe('select')\n expect(result.current.actions[1].type).toBe('edit')\n expect(result.current.actions[2].type).toBe('favorite')\n expect(result.current.actions[3].type).toBe('move')\n expect(result.current.actions[4].type).toBe('delete')\n })\n\n test('filters actions based on excludeTypes', () => {\n const { result } = renderHook(() =>\n useRecordActionItems({\n excludeTypes: ['delete', 'move'],\n record: mockRecord,\n onSelect: mockOnSelect,\n onClose: mockOnClose\n })\n )\n\n expect(result.current.actions).toHaveLength(3)\n expect(result.current.actions[0].type).toBe('select')\n expect(result.current.actions[1].type).toBe('edit')\n expect(result.current.actions[2].type).toBe('favorite')\n })\n\n test('handles select action', () => {\n const { result } = renderHook(() =>\n useRecordActionItems({\n record: mockRecord,\n onSelect: mockOnSelect,\n onClose: mockOnClose\n })\n )\n\n result.current.actions[0].click()\n expect(mockOnSelect).toHaveBeenCalledWith(mockRecord)\n expect(mockOnClose).toHaveBeenCalled()\n })\n\n test('handles favorite toggle action', () => {\n const { result } = renderHook(() =>\n useRecordActionItems({\n record: mockRecord,\n onSelect: mockOnSelect,\n onClose: mockOnClose\n })\n )\n\n const favoriteAction = result.current.actions.find(\n (action) => action.type === 'favorite'\n )\n favoriteAction.click()\n expect(mockUpdateFavoriteState).toHaveBeenCalledWith([mockRecord.id], true)\n expect(mockOnClose).toHaveBeenCalled()\n })\n\n test('handles move action', () => {\n const { result } = renderHook(() =>\n useRecordActionItems({\n record: mockRecord,\n onSelect: mockOnSelect,\n onClose: mockOnClose\n })\n )\n\n const moveAction = result.current.actions.find(\n (action) => action.type === 'move'\n )\n moveAction.click()\n expect(mockSetModal).toHaveBeenCalled()\n expect(mockOnClose).toHaveBeenCalled()\n })\n\n test('handles delete action', () => {\n const { result } = renderHook(() =>\n useRecordActionItems({\n record: mockRecord,\n onSelect: mockOnSelect,\n onClose: mockOnClose\n })\n )\n\n const deleteAction = result.current.actions.find(\n (action) => action.type === 'delete'\n )\n deleteAction.click()\n expect(mockSetModal).toHaveBeenCalled()\n expect(mockOnClose).toHaveBeenCalled()\n })\n\n test('handles delete confirmation', () => {\n isV2.mockReturnValue(false)\n\n useRouter.mockReturnValue({\n data: { recordId: '123' },\n navigate: mockNavigate,\n currentPage: 'somePage'\n })\n\n const { result } = renderHook(() =>\n useRecordActionItems({\n record: mockRecord,\n onSelect: mockOnSelect,\n onClose: mockOnClose\n })\n )\n\n const deleteAction = result.current.actions.find(\n (action) => action.type === 'delete'\n )\n deleteAction.click()\n\n const confirmationAction =\n mockSetModal.mock.calls[0][0].props.secondaryAction\n\n confirmationAction()\n\n expect(mockNavigate).toHaveBeenCalledWith('somePage', {\n recordId: undefined\n })\n expect(mockDeleteRecord).toHaveBeenCalledWith(['123'])\n expect(mockCloseModal).toHaveBeenCalled()\n })\n\n test('strips OTP fields from login record when deleting in authenticator context', async () => {\n const otpLoginRecord = {\n id: '123',\n type: 'login',\n isFavorite: false,\n otpPublic: { currentCode: '169462', timeRemaining: 18 },\n data: {\n title: 'Test Account',\n username: 'user@test.com',\n otpInput: 'JBSWY3DPEHPK3PXP',\n otp: {\n secret: 'JBSWY3DPEHPK3PXP',\n type: 'TOTP',\n algorithm: 'SHA1',\n digits: 6,\n period: 30\n }\n }\n }\n\n useRouter.mockReturnValue({\n data: { recordId: '123', recordType: 'otp' },\n navigate: mockNavigate,\n currentPage: 'vault'\n })\n\n const { result } = renderHook(() =>\n useRecordActionItems({\n record: otpLoginRecord,\n onSelect: mockOnSelect,\n onClose: mockOnClose\n })\n )\n\n const deleteAction = result.current.actions.find(\n (action) => action.type === 'delete'\n )\n deleteAction.click()\n\n const onConfirm = mockSetModal.mock.calls[0][0].props.onConfirm\n expect(onConfirm).toBeDefined()\n await onConfirm()\n\n expect(mockUpdateRecords).toHaveBeenCalledTimes(1)\n const updatedRecord = mockUpdateRecords.mock.calls[0][0][0]\n expect(updatedRecord.data.otpInput).toBeUndefined()\n expect(updatedRecord.data.otp).toBeUndefined()\n expect(updatedRecord.otpPublic).toBeUndefined()\n expect(updatedRecord.data.title).toBe('Test Account')\n expect(updatedRecord.data.username).toBe('user@test.com')\n\n expect(mockDeleteRecord).not.toHaveBeenCalled()\n expect(mockNavigate).toHaveBeenCalledWith('vault', {\n recordType: 'otp',\n recordId: undefined\n })\n expect(mockCloseModal).toHaveBeenCalled()\n })\n})\n" }, { "path": "src/hooks/useRecordMenuItems.js", "content": "import { RECORD_TYPES } from '@tetherto/pearpass-lib-vault'\n\nimport { useTranslation } from './useTranslation'\nimport { RECORD_COLOR_BY_TYPE } from '../constants/recordColorByType'\nimport { RECORD_ICON_BY_TYPE } from '../constants/recordIconByType'\n\n/**\n * @returns {{\n * categoriesItems: Array<{\n * name: string,\n * type: string\n * }>,\n * defaultItems: Array<{\n * name: string,\n * type: string\n * }>,\n * popupItems: Array<{\n * name: string,\n * type: string\n * }>}}\n */\n\nexport const useRecordMenuItems = () => {\n const { t } = useTranslation()\n const defaultItems = [\n {\n name: t('Login'),\n type: RECORD_TYPES.LOGIN,\n icon: RECORD_ICON_BY_TYPE.login,\n color: RECORD_COLOR_BY_TYPE.login\n },\n {\n name: t('Identity'),\n type: RECORD_TYPES.IDENTITY,\n icon: RECORD_ICON_BY_TYPE.identity,\n color: RECORD_COLOR_BY_TYPE.identity\n },\n {\n name: t('Credit Card'),\n type: RECORD_TYPES.CREDIT_CARD,\n icon: RECORD_ICON_BY_TYPE.creditCard,\n color: RECORD_COLOR_BY_TYPE.creditCard\n },\n {\n name: t('Wi-Fi'),\n type: RECORD_TYPES.WIFI_PASSWORD,\n icon: RECORD_ICON_BY_TYPE.wifiPassword,\n color: RECORD_COLOR_BY_TYPE.wifiPassword\n },\n {\n name: t('Recovery phrase'),\n type: RECORD_TYPES.PASS_PHRASE,\n icon: RECORD_ICON_BY_TYPE.passPhrase,\n color: RECORD_COLOR_BY_TYPE.passPhrase\n },\n {\n name: t('Note'),\n type: RECORD_TYPES.NOTE,\n icon: RECORD_ICON_BY_TYPE.note,\n color: RECORD_COLOR_BY_TYPE.note\n },\n\n {\n name: t('Custom'),\n type: RECORD_TYPES.CUSTOM,\n icon: RECORD_ICON_BY_TYPE.custom,\n color: RECORD_COLOR_BY_TYPE.custom\n }\n ]\n\n const menuItems = [\n {\n name: t('All'),\n type: 'all'\n },\n ...defaultItems\n ]\n\n const popupItems = [\n ...defaultItems,\n {\n name: t('Password'),\n type: 'password'\n }\n ]\n\n return { menuItems, popupItems, defaultItems }\n}\n" }, { "path": "src/hooks/useRecordMenuItems.test.js", "content": "import { useLingui } from '@lingui/react'\nimport { renderHook } from '@testing-library/react'\nimport { RECORD_TYPES } from '@tetherto/pearpass-lib-vault'\n\nimport { useRecordMenuItems } from './useRecordMenuItems'\nimport { RECORD_COLOR_BY_TYPE } from '../constants/recordColorByType'\nimport { RECORD_ICON_BY_TYPE } from '../constants/recordIconByType'\n\njest.mock('@lingui/react', () => ({\n useLingui: jest.fn()\n}))\n\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n RECORD_TYPES: {\n LOGIN: 'login',\n IDENTITY: 'identity',\n CREDIT_CARD: 'credit_card',\n NOTE: 'note',\n CUSTOM: 'custom',\n WIFI_PASSWORD: 'wifi_password',\n PASS_PHRASE: 'pass_phrase'\n }\n}))\n\ndescribe('useRecordMenuItems', () => {\n const mockI18n = {\n _: jest.fn((str) => str)\n }\n\n beforeEach(() => {\n useLingui.mockReturnValue({ i18n: mockI18n })\n })\n\n it('should return menu items with correct structure', () => {\n const { result } = renderHook(() => useRecordMenuItems())\n\n expect(result.current).toHaveProperty('menuItems')\n expect(result.current).toHaveProperty('popupItems')\n expect(result.current).toHaveProperty('defaultItems')\n })\n\n it('should have \"All\" as first menuItem', () => {\n const { result } = renderHook(() => useRecordMenuItems())\n\n expect(result.current.menuItems[0]).toEqual({\n name: 'All',\n type: 'all'\n })\n })\n\n it('should have default items in menuItems after \"All\"', () => {\n const { result } = renderHook(() => useRecordMenuItems())\n\n expect(result.current.menuItems[1].type).toBe(RECORD_TYPES.LOGIN)\n expect(result.current.menuItems[2].type).toBe(RECORD_TYPES.IDENTITY)\n expect(result.current.menuItems[3].type).toBe(RECORD_TYPES.CREDIT_CARD)\n expect(result.current.menuItems[4].type).toBe(RECORD_TYPES.WIFI_PASSWORD)\n expect(result.current.menuItems[5].type).toBe(RECORD_TYPES.PASS_PHRASE)\n expect(result.current.menuItems[6].type).toBe(RECORD_TYPES.NOTE)\n expect(result.current.menuItems[7].type).toBe(RECORD_TYPES.CUSTOM)\n })\n\n it('should include icons and colors in default items', () => {\n const { result } = renderHook(() => useRecordMenuItems())\n\n const loginItem = result.current.defaultItems.find(\n (item) => item.type === RECORD_TYPES.LOGIN\n )\n expect(loginItem.icon).toBe(RECORD_ICON_BY_TYPE.login)\n expect(loginItem.color).toBe(RECORD_COLOR_BY_TYPE.login)\n })\n\n it('should include \"Password\" in popupItems but not in defaultItems', () => {\n const { result } = renderHook(() => useRecordMenuItems())\n\n const passwordInPopup = result.current.popupItems.find(\n (item) => item.type === 'password'\n )\n const passwordInDefault = result.current.defaultItems.find(\n (item) => item.type === 'password'\n )\n\n expect(passwordInPopup).toBeTruthy()\n expect(passwordInPopup.name).toBe('Password')\n expect(passwordInDefault).toBeFalsy()\n })\n\n it('should call i18n._ for all item names', () => {\n renderHook(() => useRecordMenuItems())\n\n expect(mockI18n._).toHaveBeenCalledWith('Login')\n expect(mockI18n._).toHaveBeenCalledWith('Identity')\n expect(mockI18n._).toHaveBeenCalledWith('Credit Card')\n expect(mockI18n._).toHaveBeenCalledWith('Wi-Fi')\n expect(mockI18n._).toHaveBeenCalledWith('Recovery phrase')\n expect(mockI18n._).toHaveBeenCalledWith('Note')\n expect(mockI18n._).toHaveBeenCalledWith('Custom')\n expect(mockI18n._).toHaveBeenCalledWith('All')\n expect(mockI18n._).toHaveBeenCalledWith('Password')\n })\n})\n" }, { "path": "src/hooks/useRecordMenuItemsV2.test.ts", "content": "import { renderHook } from '@testing-library/react'\n\nimport { ALL_ITEMS_TYPE, useRecordMenuItemsV2 } from './useRecordMenuItemsV2'\n\njest.mock('./useTranslation', () => ({\n useTranslation: () => ({ t: (s: string) => s })\n}))\n\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n RECORD_TYPES: {\n LOGIN: 'login',\n IDENTITY: 'identity',\n CREDIT_CARD: 'credit_card',\n NOTE: 'note',\n CUSTOM: 'custom',\n WIFI_PASSWORD: 'wifi_password',\n PASS_PHRASE: 'pass_phrase'\n }\n}))\n\nconst iconStub = () => null\n\njest.mock('@tetherto/pearpass-lib-ui-kit/icons', () => ({\n AccountCircleFilled: iconStub,\n AccountCircleOutlined: iconStub,\n AssignmentInd: iconStub,\n CreditCard: iconStub,\n FormatQuote: iconStub,\n GridView: iconStub,\n LayerFilled: iconStub,\n Layers: iconStub,\n Note: iconStub,\n WiFi: iconStub\n}))\n\ndescribe('useRecordMenuItemsV2', () => {\n it('returns categoriesItems and defaultItems', () => {\n const { result } = renderHook(() => useRecordMenuItemsV2())\n\n expect(result.current).toHaveProperty('categoriesItems')\n expect(result.current).toHaveProperty('defaultItems')\n })\n\n it('prepends ALL_ITEMS_TYPE (\"All Items\") to categoriesItems', () => {\n const { result } = renderHook(() => useRecordMenuItemsV2())\n\n expect(result.current.categoriesItems[0]).toMatchObject({\n type: ALL_ITEMS_TYPE,\n label: 'All Items'\n })\n })\n\n it('orders defaultItems to match the Figma sidebar order', () => {\n const { result } = renderHook(() => useRecordMenuItemsV2())\n\n expect(result.current.defaultItems.map((i) => i.type)).toEqual([\n 'login',\n 'credit_card',\n 'identity',\n 'note',\n 'pass_phrase',\n 'wifi_password',\n 'custom'\n ])\n })\n\n it('uses pluralized labels', () => {\n const { result } = renderHook(() => useRecordMenuItemsV2())\n\n const labels = Object.fromEntries(\n result.current.defaultItems.map((i) => [i.type, i.label])\n )\n\n expect(labels).toMatchObject({\n login: 'Logins',\n credit_card: 'Credit Card',\n identity: 'Identities',\n note: 'Notes',\n pass_phrase: 'Recovery Phrases',\n wifi_password: 'Wi-Fi',\n custom: 'Other'\n })\n })\n\n it('provides both OutlinedIcon and FilledIcon per item', () => {\n const { result } = renderHook(() => useRecordMenuItemsV2())\n\n for (const item of result.current.categoriesItems) {\n expect(typeof item.OutlinedIcon).toBe('function')\n expect(typeof item.FilledIcon).toBe('function')\n }\n })\n})\n" }, { "path": "src/hooks/useRecordMenuItemsV2.ts", "content": "import React, { useMemo } from 'react'\n\nimport { RECORD_TYPES } from '@tetherto/pearpass-lib-vault'\nimport {\n AccountCircleFilled,\n AccountCircleOutlined,\n AssignmentInd,\n CreditCard,\n FormatQuote,\n GridView,\n LayerFilled,\n Layers,\n Note,\n WiFi\n} from '@tetherto/pearpass-lib-ui-kit/icons'\n\nimport { useTranslation } from './useTranslation'\n\ntype IconComponent = React.ComponentType>\n\nexport type RecordMenuItemV2 = {\n type: string\n label: string\n OutlinedIcon: IconComponent\n FilledIcon: IconComponent\n}\n\nexport const ALL_ITEMS_TYPE = 'all'\n\nexport const useRecordMenuItemsV2 = () => {\n const { t } = useTranslation()\n\n const defaultItems: RecordMenuItemV2[] = useMemo(\n () => [\n {\n type: RECORD_TYPES.LOGIN,\n label: t('Logins'),\n OutlinedIcon: AccountCircleOutlined,\n FilledIcon: AccountCircleFilled\n },\n {\n type: RECORD_TYPES.CREDIT_CARD,\n label: t('Credit Card'),\n OutlinedIcon: CreditCard,\n FilledIcon: CreditCard\n },\n {\n type: RECORD_TYPES.IDENTITY,\n label: t('Identities'),\n OutlinedIcon: AssignmentInd,\n FilledIcon: AssignmentInd\n },\n {\n type: RECORD_TYPES.NOTE,\n label: t('Notes'),\n OutlinedIcon: Note,\n FilledIcon: Note\n },\n {\n type: RECORD_TYPES.PASS_PHRASE,\n label: t('Recovery Phrases'),\n OutlinedIcon: FormatQuote,\n FilledIcon: FormatQuote\n },\n {\n type: RECORD_TYPES.WIFI_PASSWORD,\n label: t('Wi-Fi'),\n OutlinedIcon: WiFi,\n FilledIcon: WiFi\n },\n {\n type: RECORD_TYPES.CUSTOM,\n label: t('Other'),\n OutlinedIcon: GridView,\n FilledIcon: GridView\n }\n ],\n [t]\n )\n\n const categoriesItems: RecordMenuItemV2[] = useMemo(\n () => [\n {\n type: ALL_ITEMS_TYPE,\n label: t('All Items'),\n OutlinedIcon: Layers,\n FilledIcon: LayerFilled\n },\n ...defaultItems\n ],\n [t, defaultItems]\n )\n\n return { categoriesItems, defaultItems }\n}\n" }, { "path": "src/hooks/useRiveWithRetry.ts", "content": "import { useRive } from '@rive-app/react-webgl2'\nimport { UseRiveParameters, UseRiveOptions, RiveState } from '@rive-app/react-webgl2'\nimport { useState, useCallback, useMemo } from 'react'\n\nconst MAX_RETRIES = 20\nconst RETRY_DELAY_MS = 1000\n\ntype UseRiveWithRetryReturn = RiveState & {\n key: string\n}\n\nexport const useRiveWithRetry = (params: {\n riveParams: UseRiveParameters\n riveOptions?: Partial\n}): UseRiveWithRetryReturn => {\n const { riveParams, riveOptions } = params\n const [retryCount, setRetryCount] = useState(0)\n\n const handleLoadError = useCallback(\n (_err: unknown): void => {\n\n if (retryCount < MAX_RETRIES) {\n setTimeout(() => {\n setRetryCount((prev) => prev + 1)\n }, RETRY_DELAY_MS)\n }\n },\n [retryCount]\n )\n\n const modifiedParams = useMemo((): UseRiveParameters => {\n if (!riveParams) return null\n\n return {\n ...riveParams,\n onLoadError: handleLoadError,\n }\n }, [riveParams, handleLoadError])\n\n const riveState = useRive(modifiedParams, riveOptions)\n\n const key = useMemo((): string => `retry-rive-${retryCount}`, [retryCount])\n\n return { ...riveState, key }\n}\n" }, { "path": "src/hooks/useScrollOverflow.test.js", "content": "import { useRef } from 'react'\n\nimport { renderHook, act } from '@testing-library/react'\n\nimport { useScrollOverflow } from './useScrollOverflow'\n\nfunction MockResizeObserver(callback) {\n this.callback = callback\n this.observed = new Set()\n MockResizeObserver.lastInstance = this\n}\nMockResizeObserver.prototype.observe = function (el) {\n this.observed.add(el)\n}\nMockResizeObserver.prototype.disconnect = function () {\n this.observed.clear()\n}\nMockResizeObserver.prototype.fire = function () {\n this.callback([], this)\n}\nMockResizeObserver.lastInstance = null\n\nfunction MockMutationObserver(callback) {\n this.callback = callback\n MockMutationObserver.lastInstance = this\n}\nMockMutationObserver.prototype.observe = function () {}\nMockMutationObserver.prototype.disconnect = function () {}\nMockMutationObserver.prototype.fire = function () {\n this.callback([], this)\n}\nMockMutationObserver.lastInstance = null\n\nconst setRect = (el, rect) => {\n el.getBoundingClientRect = () => ({\n top: 0,\n left: 0,\n right: 0,\n width: 0,\n height: 0,\n bottom: 0,\n x: 0,\n y: 0,\n toJSON: () => ({}),\n ...rect\n })\n}\n\nconst setClientHeight = (el, h) => {\n Object.defineProperty(el, 'clientHeight', {\n configurable: true,\n value: h\n })\n}\n\nconst buildContainer = ({\n containerHeight,\n lastChildBottom,\n childCount = 1\n}) => {\n const container = document.createElement('div')\n setRect(container, {\n top: 0,\n bottom: containerHeight,\n height: containerHeight\n })\n setClientHeight(container, containerHeight)\n container.scrollTop = 0\n for (let i = 0; i < childCount - 1; i++) {\n container.appendChild(document.createElement('div'))\n }\n const last = document.createElement('div')\n setRect(last, { top: lastChildBottom - 20, bottom: lastChildBottom })\n container.appendChild(last)\n return container\n}\n\ndescribe('useScrollOverflow', () => {\n const realResizeObserver = global.ResizeObserver\n const realMutationObserver = global.MutationObserver\n\n beforeEach(() => {\n global.ResizeObserver = MockResizeObserver\n global.MutationObserver = MockMutationObserver\n MockResizeObserver.lastInstance = null\n MockMutationObserver.lastInstance = null\n })\n\n afterEach(() => {\n global.ResizeObserver = realResizeObserver\n global.MutationObserver = realMutationObserver\n })\n\n const renderWith = (container, deps = []) =>\n renderHook(() => {\n const ref = useRef(container)\n return useScrollOverflow(ref, deps)\n })\n\n it('returns false when the container has no children', () => {\n const container = document.createElement('div')\n setClientHeight(container, 100)\n setRect(container, { bottom: 100, height: 100 })\n const { result } = renderWith(container)\n expect(result.current).toBe(false)\n })\n\n it('returns false when the last child fits within the container', () => {\n const container = buildContainer({\n containerHeight: 220,\n lastChildBottom: 200\n })\n const { result } = renderWith(container)\n expect(result.current).toBe(false)\n })\n\n it('returns true when the last child extends past the container height', () => {\n const container = buildContainer({\n containerHeight: 220,\n lastChildBottom: 400\n })\n const { result } = renderWith(container)\n expect(result.current).toBe(true)\n })\n\n it('ignores absolutely-positioned descendants that inflate scrollHeight', () => {\n // The defining test: emulate what a favorite badge does. scrollHeight is\n // huge, but the last child (an actual list row) sits within the viewport.\n const container = buildContainer({\n containerHeight: 220,\n lastChildBottom: 180\n })\n Object.defineProperty(container, 'scrollHeight', {\n configurable: true,\n value: 9999\n })\n const { result } = renderWith(container)\n expect(result.current).toBe(false)\n })\n\n it('treats sub-pixel overhang as non-overflow', () => {\n const container = buildContainer({\n containerHeight: 220,\n lastChildBottom: 220.3\n })\n const { result } = renderWith(container)\n expect(result.current).toBe(false)\n })\n\n it('re-measures when ResizeObserver fires', () => {\n const container = buildContainer({\n containerHeight: 220,\n lastChildBottom: 200\n })\n const { result } = renderWith(container)\n expect(result.current).toBe(false)\n\n // Simulate a child resize that pushes the last row past the bottom.\n const last = container.lastElementChild\n setRect(last, { top: 280, bottom: 300 })\n\n act(() => {\n MockResizeObserver.lastInstance.fire()\n })\n\n expect(result.current).toBe(true)\n })\n\n it('re-measures when MutationObserver fires (children added)', () => {\n const container = buildContainer({\n containerHeight: 220,\n lastChildBottom: 200\n })\n const { result } = renderWith(container)\n expect(result.current).toBe(false)\n\n const newLast = document.createElement('div')\n setRect(newLast, { top: 380, bottom: 400 })\n container.appendChild(newLast)\n\n act(() => {\n MockMutationObserver.lastInstance.fire()\n })\n\n expect(result.current).toBe(true)\n })\n\n it('disconnects observers on unmount', () => {\n const container = buildContainer({\n containerHeight: 220,\n lastChildBottom: 200\n })\n const ro = []\n const mo = []\n global.ResizeObserver = function (cb) {\n MockResizeObserver.call(this, cb)\n this.disconnected = false\n ro.push(this)\n }\n global.ResizeObserver.prototype = Object.create(\n MockResizeObserver.prototype\n )\n global.ResizeObserver.prototype.disconnect = function () {\n MockResizeObserver.prototype.disconnect.call(this)\n this.disconnected = true\n }\n\n global.MutationObserver = function (cb) {\n MockMutationObserver.call(this, cb)\n this.disconnected = false\n mo.push(this)\n }\n global.MutationObserver.prototype = Object.create(\n MockMutationObserver.prototype\n )\n global.MutationObserver.prototype.disconnect = function () {\n this.disconnected = true\n }\n\n const { unmount } = renderWith(container)\n unmount()\n\n expect(ro.every((o) => o.disconnected)).toBe(true)\n expect(mo.every((o) => o.disconnected)).toBe(true)\n })\n})\n" }, { "path": "src/hooks/useScrollOverflow.ts", "content": "import { RefObject, useLayoutEffect, useState } from 'react'\n\nconst SUBPIXEL_TOLERANCE = 0.5\n\nconst measureOverflow = (element: HTMLElement): boolean => {\n // Use last child's rect, not scrollHeight: absolutely positioned descendants\n // (e.g. favorite badges) inflate scrollHeight and produce false positives.\n const last = element.lastElementChild\n if (!last) return false\n const elementRect = element.getBoundingClientRect()\n const lastRect = last.getBoundingClientRect()\n const lastBottomInContent =\n lastRect.bottom - elementRect.top + element.scrollTop\n return lastBottomInContent - element.clientHeight > SUBPIXEL_TOLERANCE\n}\n\nexport const useScrollOverflow = (\n ref: RefObject,\n deps: ReadonlyArray = []\n): boolean => {\n const [hasOverflow, setHasOverflow] = useState(false)\n\n useLayoutEffect(() => {\n const element = ref.current\n if (!element) {\n setHasOverflow(false)\n return\n }\n\n const check = () => setHasOverflow(measureOverflow(element))\n\n check()\n\n const ro = new ResizeObserver(check)\n ro.observe(element)\n // Also observe children: container is clamped at maxHeight, so its own\n // box doesn't resize when children reflow (e.g. favicon load).\n const observeChildren = () => {\n for (const child of Array.from(element.children)) {\n ro.observe(child)\n }\n }\n observeChildren()\n\n const mo = new MutationObserver(() => {\n observeChildren()\n check()\n })\n mo.observe(element, { childList: true })\n\n return () => {\n ro.disconnect()\n mo.disconnect()\n }\n }, deps)\n\n return hasOverflow\n}\n" }, { "path": "src/hooks/useSimulatedLoading.js", "content": "import { useState, useEffect } from 'react'\n\n/**\n * @param {number} duration\n * @returns {boolean}\n */\nexport const useSimulatedLoading = (duration = 2000) => {\n const [loading, setLoading] = useState(true)\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setLoading(false)\n }, duration)\n\n return () => clearTimeout(timer)\n }, [duration])\n\n return loading\n}\n" }, { "path": "src/hooks/useSimulatedLoading.test.js", "content": "import { renderHook, act } from '@testing-library/react'\n\nimport { useSimulatedLoading } from './useSimulatedLoading'\n\ndescribe('useSimulatedLoading', () => {\n beforeEach(() => {\n jest.useFakeTimers()\n })\n\n afterEach(() => {\n jest.useRealTimers()\n })\n\n it('should initially return true', () => {\n const { result } = renderHook(() => useSimulatedLoading())\n expect(result.current).toBe(true)\n })\n\n it('should return false after the duration', () => {\n const { result } = renderHook(() => useSimulatedLoading(1000))\n\n expect(result.current).toBe(true)\n\n act(() => {\n jest.advanceTimersByTime(1000)\n })\n\n expect(result.current).toBe(false)\n })\n\n it('should use the default duration when not provided', () => {\n const { result } = renderHook(() => useSimulatedLoading())\n\n expect(result.current).toBe(true)\n\n act(() => {\n jest.advanceTimersByTime(1999)\n })\n expect(result.current).toBe(true)\n\n act(() => {\n jest.advanceTimersByTime(1)\n })\n expect(result.current).toBe(false)\n })\n\n it('should clear timeout on unmount', () => {\n const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout')\n const { unmount } = renderHook(() => useSimulatedLoading())\n\n unmount()\n\n expect(clearTimeoutSpy).toHaveBeenCalled()\n })\n})\n" }, { "path": "src/hooks/useTranslation.ts", "content": "import { useCallback } from 'react'\nimport { useLingui } from '@lingui/react'\n\n/** Values for ICU-style placeholders in messages, e.g. `t('Hello {name}', { name: 'Ada' })` */\nexport type TranslationValues = Record\n\n/**\n * Custom hook for handling translations using Lingui\n * @returns {Object} Object containing the translation function\n * @returns {Function} t - Translation function: `t(key)` or `t(key, values)` for interpolated messages\n */\nexport const useTranslation = () => {\n const { i18n } = useLingui()\n\n const t = useCallback(\n (key: string, values?: TranslationValues): string => {\n if (values === undefined) {\n return i18n._(key)\n }\n return i18n._(key, values)\n },\n [i18n]\n )\n\n return {\n t\n }\n}\n" }, { "path": "src/hooks/useVaultSwitch.test.tsx", "content": "import React from 'react'\n\nimport { act, renderHook } from '@testing-library/react'\nimport '@testing-library/jest-dom'\n\nimport { type Vault, useVault } from '@tetherto/pearpass-lib-vault'\n\nimport { useVaultSwitch } from './useVaultSwitch'\n\nconst mockSetIsLoading = jest.fn()\nconst mockSetModal = jest.fn()\nconst mockCloseModal = jest.fn()\nconst mockRefetchVault = jest.fn(() => Promise.resolve())\nconst mockIsVaultProtected = jest.fn(() => Promise.resolve(false))\nconst mockLoggerError = jest.fn()\n\nconst vaultA: Vault = { id: 'vault-a', name: 'Alpha' }\nconst vaultB: Vault = { id: 'vault-b', name: 'Bravo' }\n\nconst mockUseVault = jest.mocked(useVault)\n\njest.mock('@tetherto/pearpass-lib-vault', () => ({\n useVault: jest.fn()\n}))\n\njest.mock('../context/LoadingContext', () => ({\n useLoadingContext: () => ({ setIsLoading: mockSetIsLoading })\n}))\n\njest.mock('../context/ModalContext', () => ({\n useModal: () => ({\n setModal: mockSetModal,\n closeModal: mockCloseModal\n })\n}))\n\njest.mock('../utils/logger', () => ({\n logger: {\n error: (...args: unknown[]) => mockLoggerError(...args)\n }\n}))\n\njest.mock('../containers/Modal/VaultPasswordFormModalContent', () => ({\n VaultPasswordFormModalContent: () => null\n}))\n\ndescribe('useVaultSwitch', () => {\n beforeEach(() => {\n jest.clearAllMocks()\n\n mockIsVaultProtected.mockResolvedValue(false)\n mockRefetchVault.mockResolvedValue(undefined)\n\n mockUseVault.mockReturnValue({\n data: vaultA,\n isVaultProtected: mockIsVaultProtected,\n refetch: mockRefetchVault\n } as unknown as ReturnType)\n })\n\n it('returns switchVault', () => {\n const { result } = renderHook(() => useVaultSwitch())\n\n expect(result.current).toEqual({ switchVault: expect.any(Function) })\n })\n\n it('when target is already active, runs onSuccess only (no refetch or password check)', async () => {\n const onSuccess = jest.fn(async () => {})\n const { result } = renderHook(() => useVaultSwitch())\n\n await act(async () => {\n await result.current.switchVault(vaultA, onSuccess)\n })\n\n expect(mockIsVaultProtected).not.toHaveBeenCalled()\n expect(mockRefetchVault).not.toHaveBeenCalled()\n expect(mockSetModal).not.toHaveBeenCalled()\n expect(onSuccess).toHaveBeenCalledTimes(1)\n expect(mockSetIsLoading).toHaveBeenCalledWith(true)\n expect(mockSetIsLoading).toHaveBeenCalledWith(false)\n })\n\n it('when target is another vault and unprotected, refetches then runs onSuccess', async () => {\n const onSuccess = jest.fn<() => void | Promise>()\n const { result } = renderHook(() => useVaultSwitch())\n\n await act(async () => {\n await result.current.switchVault(vaultB, onSuccess)\n })\n\n expect(mockIsVaultProtected).toHaveBeenCalledWith('vault-b')\n expect(mockRefetchVault).toHaveBeenCalledWith('vault-b')\n expect(mockRefetchVault).toHaveBeenCalledTimes(1)\n expect(onSuccess).toHaveBeenCalledTimes(1)\n expect(mockSetModal).not.toHaveBeenCalled()\n expect(mockSetIsLoading).toHaveBeenCalledWith(false)\n })\n\n it('when vault is protected, opens password modal instead of refetching immediately', async () => {\n mockIsVaultProtected.mockResolvedValueOnce(true)\n\n const onSuccess = jest.fn<() => void | Promise>()\n const { result } = renderHook(() => useVaultSwitch())\n\n await act(async () => {\n await result.current.switchVault(vaultB, onSuccess)\n })\n\n expect(mockSetModal).toHaveBeenCalledTimes(1)\n expect(mockRefetchVault).not.toHaveBeenCalled()\n expect(onSuccess).not.toHaveBeenCalled()\n\n const modalEl = mockSetModal.mock.calls[0][0] as React.ReactElement<{\n vault: Vault\n onSubmit: (password: string) => Promise\n }>\n expect(modalEl.props.vault).toEqual(vaultB)\n expect(typeof modalEl.props.onSubmit).toBe('function')\n })\n\n it('when protected, modal onSubmit refetches with password, closes modal, and runs onSuccess', async () => {\n mockIsVaultProtected.mockResolvedValueOnce(true)\n\n const onSuccess = jest.fn<() => void | Promise>()\n const { result } = renderHook(() => useVaultSwitch())\n\n await act(async () => {\n await result.current.switchVault(vaultB, onSuccess)\n })\n\n const modalEl = mockSetModal.mock.calls[0][0] as React.ReactElement<{\n onSubmit: (password: string) => Promise\n }>\n\n await act(async () => {\n await modalEl.props.onSubmit('secret-password')\n })\n\n expect(mockRefetchVault).toHaveBeenCalledWith('vault-b', {\n password: 'secret-password'\n })\n expect(mockCloseModal).toHaveBeenCalled()\n expect(onSuccess).toHaveBeenCalledTimes(1)\n })\n\n it('logs and rethrows when refetch fails for an unprotected vault', async () => {\n const err = new Error('network')\n mockRefetchVault.mockRejectedValueOnce(err)\n\n const { result } = renderHook(() => useVaultSwitch())\n\n let thrown: unknown\n const noopSuccess = async () => {}\n await act(async () => {\n try {\n await result.current.switchVault(vaultB, noopSuccess)\n } catch (e) {\n thrown = e\n }\n })\n\n expect(thrown).toBe(err)\n expect(mockLoggerError).toHaveBeenCalledWith(\n 'useVaultSwitch',\n 'Error switching to vault:',\n err\n )\n })\n})\n" }, { "path": "src/hooks/useVaultSwitch.tsx", "content": "import React, { useCallback } from 'react'\n\nimport { useVault, type Vault } from '@tetherto/pearpass-lib-vault'\n\nimport { VaultPasswordFormModalContent } from '../containers/Modal/VaultPasswordFormModalContent'\nimport { useLoadingContext } from '../context/LoadingContext'\nimport { useModal } from '../context/ModalContext'\nimport { logger } from '../utils/logger'\n/**\n * Switch active vault with the same flow everywhere: optional password modal\n * when the vault is protected, then {@link refetch} and an optional success callback.\n */\nexport function useVaultSwitch() {\n const { setIsLoading } = useLoadingContext()\n const { setModal, closeModal } = useModal()\n const {\n data: activeVault,\n isVaultProtected,\n refetch: refetchVault\n } = useVault()\n\n const switchVault = useCallback(\n async (\n vault: Vault,\n onSuccess: () => void | Promise = async () => {}\n ) => {\n setIsLoading(true)\n\n try {\n if (vault.id === activeVault?.id) {\n await onSuccess()\n return\n }\n\n const isProtected = await isVaultProtected(vault.id)\n\n if (isProtected) {\n setModal(\n {\n setIsLoading(true)\n try {\n await refetchVault(vault.id, { password })\n closeModal()\n await onSuccess()\n } finally {\n setIsLoading(false)\n }\n }}\n />\n )\n return\n }\n\n await refetchVault(vault.id)\n await onSuccess()\n } catch (error) {\n logger.error('useVaultSwitch', 'Error switching to vault:', error)\n throw error\n } finally {\n setIsLoading(false)\n }\n },\n [activeVault?.id, closeModal, isVaultProtected, setIsLoading, setModal]\n )\n\n return { switchVault }\n}\n" }, { "path": "src/hooks/useWindowResize.js", "content": "import { useState, useEffect } from 'react'\n\nimport { useThrottle } from '@tetherto/pear-apps-lib-ui-react-hooks'\n\n/**\n * Hook to get the window size with throttling.\n * @param {number} delay - The throttle delay in milliseconds.\n * @returns {{ width: number, height: number }} - The throttled window size.\n */\nexport const useWindowResize = (interval = 350) => {\n const [windowSize, setWindowSize] = useState({\n width: window.innerWidth,\n height: window.innerHeight\n })\n\n const { throttle } = useThrottle({ value: windowSize, interval: interval })\n\n useEffect(() => {\n const handleResize = () => {\n throttle(() => {\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight\n })\n })\n }\n\n window.addEventListener('resize', handleResize)\n\n return () => {\n window.removeEventListener('resize', handleResize)\n }\n }, [throttle])\n\n return windowSize\n}\n" }, { "path": "src/hooks/useWindowResize.test.js", "content": "import { renderHook, act } from '@testing-library/react'\nimport { useThrottle } from '@tetherto/pear-apps-lib-ui-react-hooks'\n\nimport { useWindowResize } from './useWindowResize'\n\njest.mock('@tetherto/pear-apps-lib-ui-react-hooks', () => ({\n useThrottle: jest.fn()\n}))\n\ndescribe('useWindowResize', () => {\n const originalInnerWidth = window.innerWidth\n const originalInnerHeight = window.innerHeight\n\n const mockThrottle = jest.fn((callback) => callback())\n\n beforeEach(() => {\n jest.clearAllMocks()\n\n useThrottle.mockReturnValue({\n throttle: mockThrottle,\n value: { width: window.innerWidth, height: window.innerHeight }\n })\n\n Object.defineProperty(window, 'innerWidth', {\n writable: true,\n value: originalInnerWidth\n })\n Object.defineProperty(window, 'innerHeight', {\n writable: true,\n value: originalInnerHeight\n })\n })\n\n afterAll(() => {\n Object.defineProperty(window, 'innerWidth', {\n writable: true,\n value: originalInnerWidth\n })\n Object.defineProperty(window, 'innerHeight', {\n writable: true,\n value: originalInnerHeight\n })\n })\n\n test('should initialize with current window dimensions', () => {\n const { result } = renderHook(() => useWindowResize())\n\n expect(result.current).toEqual({\n width: window.innerWidth,\n height: window.innerHeight\n })\n })\n\n test('should update dimensions when window resizes', () => {\n const { result } = renderHook(() => useWindowResize())\n\n act(() => {\n Object.defineProperty(window, 'innerWidth', {\n writable: true,\n value: 1024\n })\n Object.defineProperty(window, 'innerHeight', {\n writable: true,\n value: 768\n })\n\n window.dispatchEvent(new Event('resize'))\n })\n\n expect(mockThrottle).toHaveBeenCalled()\n expect(result.current).toEqual({\n width: 1024,\n height: 768\n })\n })\n\n test('should use the provided interval for throttling', () => {\n const customInterval = 500\n renderHook(() => useWindowResize(customInterval))\n\n expect(useThrottle).toHaveBeenCalledWith({\n value: expect.any(Object),\n interval: customInterval\n })\n })\n\n test('should use default interval of 350ms when not specified', () => {\n renderHook(() => useWindowResize())\n\n expect(useThrottle).toHaveBeenCalledWith({\n value: expect.any(Object),\n interval: 350\n })\n })\n\n test('should remove event listener on unmount', () => {\n const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener')\n\n const { unmount } = renderHook(() => useWindowResize())\n unmount()\n\n expect(removeEventListenerSpy).toHaveBeenCalledWith(\n 'resize',\n expect.any(Function)\n )\n })\n})\n" }, { "path": "src/lib-react-components/components/ButtonCreate/index.js", "content": "import { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport { html } from 'htm/react'\n\nimport { ButtonContainer, IconWrapper } from './styles'\n\n/**\n * @param {{\n * startIcon?: import('react').ElementType,\n * endIcon?: import('react').ElementType,\n * children: import('react').ReactNode,\n * type?: 'button' | 'submit',\n * onClick: () => void,\n * testId?: string\n * }} props\n */\nexport const ButtonCreate = ({\n startIcon,\n endIcon,\n children,\n type = 'button',\n onClick,\n testId\n}) => html`\n <${ButtonContainer}\n onClick=${() => onClick()}\n type=${type}\n data-testid=${testId}\n >\n <${IconWrapper}>\n ${startIcon &&\n html`<${startIcon} color=${colors.black.mode1} size=\"24\" />`}\n \n ${children}\n <${IconWrapper}>\n ${endIcon && html`<${endIcon} color=${colors.black.mode1} size=\"24\" />`}\n \n \n`\n" }, { "path": "src/lib-react-components/components/ButtonCreate/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { ButtonCreate } from './index'\nimport { ArrowDownIcon } from '../../icons/ArrowDownIcon'\n\nimport '@testing-library/jest-dom'\n\nconst DummyIcon = ArrowDownIcon\n\ndescribe('ButtonCreate Component', () => {\n test('renders correctly with children and onClick handler', () => {\n const handleClick = jest.fn()\n const { getByText } = render(\n \n Click Me\n \n )\n\n const buttonText = getByText('Click Me')\n expect(buttonText).toBeInTheDocument()\n\n fireEvent.click(buttonText)\n expect(handleClick).toHaveBeenCalledTimes(1)\n })\n\n test('renders with startIcon and endIcon correctly', () => {\n const handleClick = jest.fn()\n\n const { getByText, container } = render(\n \n \n Icon Button\n \n \n )\n\n expect(getByText('Icon Button')).toBeInTheDocument()\n\n const icons = container.querySelectorAll('svg')\n\n expect(icons.length).toBe(2)\n\n icons.forEach((icon) => {\n expect(icon.getAttribute('width')).toBe('24')\n expect(icon.getAttribute('height')).toBe('24')\n })\n })\n\n test('matches snapshot', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Snapshot Button\n \n \n )\n\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('renders with testId attribute', () => {\n const handleClick = jest.fn()\n const { getByTestId } = render(\n \n \n Test Button\n \n \n )\n\n expect(getByTestId('test-button-id')).toBeInTheDocument()\n })\n})\n" }, { "path": "src/lib-react-components/components/ButtonCreate/styles.js", "content": "import styled from 'styled-components'\n\nexport const ButtonContainer = styled.button`\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: relative;\n width: 100%;\n padding: 8px;\n background: ${({ theme }) => theme.colors.primary300.mode1};\n border: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n border-radius: 10px;\n cursor: pointer;\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 600;\n\n &:hover {\n background: ${({ theme }) => theme.colors.primary400.mode1};\n }\n`\n\nexport const IconWrapper = styled.div`\n display: flex;\n`\n" }, { "path": "src/lib-react-components/components/ButtonFilter/index.js", "content": "import { html } from 'htm/react'\n\nimport { Button } from './styles'\n\n/**\n * @param {{\n * children: import('react').ReactNode\n * variant?: 'primary' | 'secondary'\n * startIcon?: import('react').ElementType\n * isDisabled?: boolean\n * type?: 'button' | 'submit'\n * onClick: () => void,\n * testId?: string\n * }} props\n */\nexport const ButtonFilter = ({\n children,\n startIcon,\n variant = 'primary',\n type = 'button',\n isDisabled,\n onClick,\n testId\n}) => {\n const handleClick = isDisabled ? () => {} : onClick\n\n return html`\n <${Button}\n variant=${variant}\n isDisabled=${isDisabled}\n type=${type}\n onClick=${handleClick}\n data-testid=${testId}\n aria-disabled=${isDisabled}\n >\n ${startIcon && html`<${startIcon} size=\"24\" />`} ${children}\n \n `\n}\n" }, { "path": "src/lib-react-components/components/ButtonFilter/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { ButtonFilter } from './index'\nimport { ArrowDownIcon } from '../../icons/ArrowDownIcon'\nimport '@testing-library/jest-dom'\n\nconst DummyIcon = ArrowDownIcon\n\ndescribe('ButtonFilter Component', () => {\n test('renders correctly with children and onClick handler', () => {\n const handleClick = jest.fn()\n const { getByText } = render(\n \n Filter Me\n \n )\n\n const buttonText = getByText('Filter Me')\n expect(buttonText).toBeInTheDocument()\n\n fireEvent.click(buttonText)\n expect(handleClick).toHaveBeenCalledTimes(1)\n })\n\n test('renders with startIcon correctly for primary variant', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Primary Filter\n \n \n )\n\n const dummyIcon = container.querySelector('svg')\n\n expect(dummyIcon).toBeInTheDocument()\n expect(dummyIcon.getAttribute('width')).toBe('24')\n expect(dummyIcon.getAttribute('height')).toBe('24')\n })\n\n test('renders with startIcon correctly for secondary variant', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Secondary Filter\n \n \n )\n\n const dummyIcon = container.querySelector('svg')\n\n expect(dummyIcon).toBeInTheDocument()\n expect(dummyIcon.getAttribute('width')).toBe('24')\n expect(dummyIcon.getAttribute('height')).toBe('24')\n })\n\n test('matches snapshot', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Snapshot Filter\n \n \n )\n\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('does not call onClick when disabled', () => {\n const handleClick = jest.fn()\n const { getByText } = render(\n \n \n Disabled Filter\n \n \n )\n\n const buttonText = getByText('Disabled Filter')\n fireEvent.click(buttonText)\n expect(handleClick).not.toHaveBeenCalled()\n })\n})\n" }, { "path": "src/lib-react-components/components/ButtonFilter/styles.js", "content": "import styled, { css } from 'styled-components'\n\nconst getDisabledGradient = (theme) =>\n `linear-gradient(0deg, rgba(5, 11, 6, 0.40) 0%, rgba(5, 11, 6, 0.40) 100%), ${theme.colors.secondary200.mode1};`\n\nexport const Button = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isDisabled'].includes(prop)\n})`\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 400;\n cursor: pointer;\n pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'auto')};\n\n ${({ variant, theme, isDisabled }) => {\n if (variant === 'primary') {\n return css`\n border-radius: 10px;\n background: ${isDisabled\n ? getDisabledGradient(theme)\n : theme.colors.secondary200.mode1};\n padding: 4px;\n color: ${theme.colors.secondary400.mode1};\n\n & svg path {\n fill: ${theme.colors.secondary400.mode1};\n }\n\n &:hover {\n background: ${theme.colors.secondary100.mode1};\n }\n `\n }\n\n if (variant === 'secondary') {\n return css`\n border-radius: 10px;\n background: ${theme.colors.grey500.mode1};\n padding: 5px 8px;\n color: ${theme.colors.white.mode1};\n\n & svg path {\n fill: ${theme.colors.white.mode1};\n }\n\n &:hover {\n background: ${theme.colors.grey100.mode1};\n color: ${theme.colors.black.mode1};\n\n & svg path {\n fill: ${theme.colors.black.mode1};\n }\n }\n `\n }\n }};\n`\n" }, { "path": "src/lib-react-components/components/ButtonFolder/index.js", "content": "import { html } from 'htm/react'\n\nimport { Button } from './styles'\nimport { FolderIcon } from '../../icons/FolderIcon'\n\n/**\n * @param {{\n * children: import('react').ReactNode\n * type?: 'button' | 'submit'\n * onClick: () => void\n * }} props\n */\nexport const ButtonFolder = ({ children, type = 'button', onClick }) => html`\n <${Button} onClick=${onClick} type=${type}>\n ${html`<${FolderIcon} size=\"21\" />`} ${children}\n \n`\n" }, { "path": "src/lib-react-components/components/ButtonFolder/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { ButtonFolder } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('ButtonFolder Component', () => {\n test('renders correctly with children and onClick handler', () => {\n const handleClick = jest.fn()\n const { getByText } = render(\n \n Open Folder\n \n )\n\n const buttonText = getByText('Open Folder')\n expect(buttonText).toBeInTheDocument()\n\n fireEvent.click(buttonText)\n expect(handleClick).toHaveBeenCalledTimes(1)\n })\n\n test('renders FolderIcon with correct size', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n Open Folder\n \n )\n\n const svg = container.querySelector('svg')\n expect(svg).toBeInTheDocument()\n expect(svg.getAttribute('width')).toBe('21')\n expect(svg.getAttribute('height')).toBe('21')\n })\n\n test('matches snapshot', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n Snapshot Folder\n \n )\n\n expect(container.firstChild).toMatchSnapshot()\n })\n})\n" }, { "path": "src/lib-react-components/components/ButtonFolder/styles.js", "content": "import styled from 'styled-components'\n\nexport const Button = styled.div`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 10px;\n gap: 10px;\n border-radius: 10px;\n cursor: pointer;\n font-family: 'Inter';\n font-size: 16px;\n font-weight: 500;\n background: 'transparent';\n color: ${({ theme }) => theme.colors.white.mode1};\n border: 1px solid ${({ theme }) => theme.colors.primary400.mode1};\n\n & svg path {\n fill: ${({ theme }) => theme.colors.white.mode1};\n }\n\n &:hover {\n border: 1px solid ${({ theme }) => theme.colors.primary300.mode1};\n background: ${({ theme }) => theme.colors.primary300.mode1};\n color: ${({ theme }) => theme.colors.black.mode1};\n\n & svg path {\n fill: ${({ theme }) => theme.colors.black.mode1};\n }\n }\n\n &:active {\n border: 1px solid ${({ theme }) => theme.colors.primary400.mode1};\n background: ${({ theme }) => theme.colors.primary400.mode1};\n color: ${({ theme }) => theme.colors.black.mode1};\n\n & svg path {\n fill: ${({ theme }) => theme.colors.black.mode1};\n }\n }\n`\n" }, { "path": "src/lib-react-components/components/ButtonLittle/index.js", "content": "import { html } from 'htm/react'\n\nimport { Button } from './styles'\n\n/**\n * @param {{\n * children: import('react').ReactNode\n * variant?: 'primary' | 'secondary'\n * startIcon?: import('react').ElementType\n * type?: 'button' | 'submit'\n * onClick: () => void,\n * testId?: string,\n * dataId?: string\n * }} props\n */\nexport const ButtonLittle = ({\n children,\n startIcon,\n variant = 'primary',\n type = 'button',\n onClick,\n testId,\n dataId\n}) => html`\n <${Button}\n data-testid=${testId}\n data-id=${dataId}\n type=${type}\n variant=${variant}\n onClick=${onClick}\n isIconOnly=${!children}\n >\n ${startIcon && html`<${startIcon} size=\"24px\" />`} ${children}\n \n`\n" }, { "path": "src/lib-react-components/components/ButtonLittle/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { ButtonLittle } from './index'\nimport { ArrowDownIcon } from '../../icons/ArrowDownIcon'\n\nimport '@testing-library/jest-dom'\n\nconst DummyIcon = ArrowDownIcon\n\ndescribe('ButtonLittle Component', () => {\n test('renders correctly with children and onClick handler', () => {\n const handleClick = jest.fn()\n const { getByText } = render(\n \n Little Button\n \n )\n\n const buttonText = getByText('Little Button')\n expect(buttonText).toBeInTheDocument()\n\n fireEvent.click(buttonText)\n expect(handleClick).toHaveBeenCalledTimes(1)\n })\n\n test('renders with startIcon correctly', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Little Button\n \n \n )\n\n const dummyIcon = container.querySelector('svg')\n\n expect(dummyIcon).toBeInTheDocument()\n expect(dummyIcon.getAttribute('width')).toBe('24px')\n expect(dummyIcon.getAttribute('height')).toBe('24px')\n })\n\n test('renders as icon-only when no children provided', () => {\n const handleClick = jest.fn()\n const { queryByText, container } = render(\n \n \n \n )\n\n const text = queryByText(/./)\n expect(text).toBeNull()\n\n const dummyIcon = container.querySelector('svg')\n\n expect(dummyIcon).toBeInTheDocument()\n })\n\n test('applies type prop correctly', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Submit Button\n \n \n )\n\n const buttonElement = container.querySelector('button')\n expect(buttonElement).toBeInTheDocument()\n expect(buttonElement.getAttribute('type')).toBe('submit')\n })\n\n test('matches snapshot', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Snapshot Little Button\n \n \n )\n\n expect(container.firstChild).toMatchSnapshot()\n })\n})\n" }, { "path": "src/lib-react-components/components/ButtonLittle/styles.js", "content": "import styled, { css } from 'styled-components'\n\nexport const Button = styled.button.withConfig({\n shouldForwardProp: (prop) => !['isIconOnly'].includes(prop)\n})`\n width: fit-content;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ${({ isIconOnly }) => (isIconOnly ? '50%' : '10px')};\n padding: 4px 10px;\n gap: 5px;\n cursor: pointer;\n font-weight: 500;\n font-family: 'Inter';\n\n ${({ variant, theme }) => {\n if (variant === 'primary') {\n return css`\n background: ${theme.colors.primary300.mode1};\n color: ${theme.colors.black.mode1};\n border: 1px solid ${theme.colors.primary300.mode1};\n\n & svg path {\n fill: ${theme.colors.black.mode1};\n }\n\n &:hover {\n border: 1px solid ${theme.colors.primary400.mode1};\n background: ${theme.colors.primary400.mode1};\n }\n `\n }\n\n if (variant === 'secondary') {\n return css`\n background: ${theme.colors.black.mode1};\n color: ${theme.colors.primary300.mode1};\n border: 1px solid ${theme.colors.black.mode1};\n\n & svg path {\n fill: ${theme.colors.primary300.mode1};\n }\n\n &:hover {\n border-color: ${theme.colors.primary400.mode1};\n color: ${theme.colors.primary400.mode1};\n\n & svg path {\n fill: ${theme.colors.primary400.mode1};\n }\n }\n `\n }\n }};\n`\n" }, { "path": "src/lib-react-components/components/ButtonPrimary/index.js", "content": "import { html } from 'htm/react'\n\nimport { Button } from './styles'\n\n/**\n * @param {{\n * children: import('react').ReactNode,\n * size?: 'sm' | 'md' | 'lg',\n * onClick: () => void\n * type?: 'button' | 'submit'\n * testId?: string\n * width?: string\n * }} props\n */\nexport const ButtonPrimary = ({\n children,\n size = 'md',\n onClick,\n type = 'button',\n testId = 'button-primary',\n width\n}) => html`\n <${Button}\n size=${size}\n onClick=${onClick}\n type=${type}\n data-testid=${testId}\n width=${width}\n >\n ${children}\n \n`\n" }, { "path": "src/lib-react-components/components/ButtonPrimary/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { ButtonPrimary } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('ButtonPrimary Component', () => {\n test('renders correctly with children and onClick handler', () => {\n const handleClick = jest.fn()\n const { getByText } = render(\n \n Primary Button\n \n )\n\n const buttonText = getByText('Primary Button')\n expect(buttonText).toBeInTheDocument()\n\n fireEvent.click(buttonText)\n expect(handleClick).toHaveBeenCalledTimes(1)\n })\n\n test('applies type prop correctly', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Submit Button\n \n \n )\n\n const buttonElement = container.querySelector('button')\n expect(buttonElement).toBeInTheDocument()\n expect(buttonElement.getAttribute('type')).toBe('submit')\n })\n\n test('matches snapshot with default size (\"md\")', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n Snapshot Button\n \n )\n\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('matches snapshot with small size (\"sm\")', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Small Button\n \n \n )\n\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('matches snapshot with large size (\"lg\")', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Large Button\n \n \n )\n\n expect(container.firstChild).toMatchSnapshot()\n })\n})\n" }, { "path": "src/lib-react-components/components/ButtonPrimary/styles.js", "content": "import styled from 'styled-components'\n\nexport const Button = styled.button`\n ${({ width }) => width && `width: ${width};`}\n box-sizing: border-box;\n background: ${({ theme }) => theme.colors.primary400.mode1};\n color: ${({ theme }) => theme.colors.black.mode1};\n padding: 10px 15px;\n border: none;\n cursor: pointer;\n border-radius: 10px;\n font-size: ${({ size }) => {\n switch (size) {\n case 'sm':\n return '12px'\n case 'lg':\n return '16px'\n default:\n return '14px'\n }\n }};\n font-family: 'Inter';\n font-weight: 600;\n line-height: 17px;\n\n &:hover {\n background: ${({ theme }) => theme.colors.primary300.mode1};\n }\n\n &:active {\n background: ${({ theme }) => theme.colors.primary500.mode1};\n }\n`\n" }, { "path": "src/lib-react-components/components/ButtonRadio/index.js", "content": "import { ButtonRadio } from './styles'\n\nexport { ButtonRadio }\n" }, { "path": "src/lib-react-components/components/ButtonRadio/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { ButtonRadio } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('ButtonRadio Component', () => {\n test('handles onClick event', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n \n )\n\n fireEvent.click(container.querySelector('button'))\n expect(handleClick).toHaveBeenCalledTimes(1)\n })\n\n test('renders as a button element', () => {\n const { container } = render(\n \n {}} />\n \n )\n\n expect(container.querySelector('button')).toBeInTheDocument()\n expect(container.firstChild).toMatchSnapshot()\n })\n})\n" }, { "path": "src/lib-react-components/components/ButtonRadio/styles.js", "content": "import styled from 'styled-components'\n\nexport const ButtonRadio = styled.button.withConfig({\n shouldForwardProp: (prop) => !['isActive'].includes(prop)\n})`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 15px;\n height: 15px;\n flex-shrink: 0;\n border-radius: 50%;\n background: transparent;\n border: 2px solid\n ${({ theme, isActive }) =>\n isActive ? theme.colors.primary400.mode1 : theme.colors.primary300.mode1};\n padding: 2px;\n cursor: pointer;\n\n &:before {\n content: '';\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: ${({ theme }) => theme.colors.primary400.mode1};\n opacity: ${({ isActive }) => (isActive ? 1 : 0)};\n transition: opacity 300ms ease-in-out;\n }\n`\n" }, { "path": "src/lib-react-components/components/ButtonRoundIcon/index.js", "content": "import { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport { html } from 'htm/react'\n\nimport { Button } from './styles'\n\n/**\n * @param {{\n * children?: import('react').ReactNode\n * startIcon: import('react').ElementType\n * onClick: () => void\n * iconSize?: string,\n * testId?: string,\n * dataId?: string\n * }} props\n */\nexport const ButtonRoundIcon = ({\n children,\n startIcon,\n onClick,\n iconSize,\n testId = 'button-round-icon',\n dataId\n}) => html`\n <${Button}\n type=\"button\"\n onClick=${onClick}\n data-testid=${testId}\n data-id=${dataId}\n >\n ${startIcon &&\n html`<${startIcon}\n color=${colors.primary400.mode1}\n size=${iconSize || '24'}\n />`}\n ${children}\n \n`\n" }, { "path": "src/lib-react-components/components/ButtonRoundIcon/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { ButtonRoundIcon } from './index'\nimport { ArrowDownIcon } from '../../icons/ArrowDownIcon'\nimport '@testing-library/jest-dom'\n\nconst DummyIcon = ArrowDownIcon\n\ndescribe('ButtonRoundIcon Component', () => {\n test('renders correctly with children and onClick handler', () => {\n const handleClick = jest.fn()\n const { getByText, getByRole } = render(\n \n Round Button\n \n )\n\n const buttonText = getByText('Round Button')\n expect(buttonText).toBeInTheDocument()\n\n fireEvent.click(getByRole('button'))\n expect(handleClick).toHaveBeenCalledTimes(1)\n })\n\n test('renders with startIcon correctly', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Round Button With Icon\n \n \n )\n\n const icons = container.querySelectorAll('svg')\n expect(icons.length).toBe(1)\n icons.forEach((icon) => {\n expect(icon.getAttribute('width') || icon.getAttribute('size')).toBe('24')\n expect(icon.getAttribute('height') || icon.getAttribute('size')).toBe(\n '24'\n )\n })\n })\n\n test('does not render startIcon if not provided', () => {\n const { container } = render(\n \n {}}>No Icon\n \n )\n const icons = container.querySelectorAll('svg')\n expect(icons.length).toBe(0)\n })\n\n test('matches snapshot for default rendering', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Snapshot Round Button\n \n \n )\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('renders correctly when children is a React element', () => {\n const handleClick = jest.fn()\n const { getByText } = render(\n \n \n Element Child\n \n \n )\n expect(getByText('Element Child')).toBeInTheDocument()\n })\n\n test('button has type=\"button\"', () => {\n const { getByRole } = render(\n \n {}}>Type Button\n \n )\n expect(getByRole('button')).toHaveAttribute('type', 'button')\n })\n})\n" }, { "path": "src/lib-react-components/components/ButtonRoundIcon/styles.js", "content": "import styled from 'styled-components'\n\nexport const Button = styled.button`\n display: inline-flex;\n width: 30px;\n height: 30px;\n padding: 4px;\n justify-content: center;\n align-items: center;\n border: 1px solid ${({ theme }) => theme.colors.black.mode1};\n border-radius: 50%;\n cursor: pointer;\n background: ${({ theme }) => theme.colors.black.mode1};\n color: ${({ theme }) => theme.colors.primary400.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 500;\n\n &:hover {\n border-color: ${({ theme }) => theme.colors.primary400.mode1};\n }\n`\n" }, { "path": "src/lib-react-components/components/ButtonSecondary/index.js", "content": "import { html } from 'htm/react'\n\nimport { Button } from './styles'\n\n/**\n * @param {{\n * children: import('react').ReactNode,\n * size?: 'sm' | 'md' | 'lg',\n * onClick: () => void\n * type?: 'button' | 'submit'\n * disabled?: boolean\n * }} props\n */\n\nexport const ButtonSecondary = ({\n children,\n size = 'md',\n onClick,\n type = 'button',\n disabled = false,\n testId\n}) => html`\n <${Button}\n size=${size}\n onClick=${onClick}\n type=${type}\n disabled=${disabled}\n data-testid=${testId}\n >\n ${children}\n \n`\n" }, { "path": "src/lib-react-components/components/ButtonSecondary/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { ButtonSecondary } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('ButtonSecondary Component', () => {\n test('renders correctly with children and onClick handler', () => {\n const handleClick = jest.fn()\n const { getByText } = render(\n \n \n Secondary Button\n \n \n )\n\n const buttonText = getByText('Secondary Button')\n expect(buttonText).toBeInTheDocument()\n\n fireEvent.click(buttonText)\n expect(handleClick).toHaveBeenCalledTimes(1)\n })\n\n test('applies type prop correctly', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Submit Button\n \n \n )\n\n const buttonElement = container.querySelector('button')\n expect(buttonElement).toBeInTheDocument()\n expect(buttonElement.getAttribute('type')).toBe('submit')\n })\n\n test('matches snapshot with default size (\"md\")', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n Snapshot Button\n \n )\n\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('matches snapshot with small size (\"sm\")', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Small Button\n \n \n )\n\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('matches snapshot with large size (\"lg\")', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Large Button\n \n \n )\n\n expect(container.firstChild).toMatchSnapshot()\n })\n})\n" }, { "path": "src/lib-react-components/components/ButtonSecondary/styles.js", "content": "import styled from 'styled-components'\n\nexport const Button = styled.button`\n background: transparent;\n box-sizing: border-box;\n color: ${({ theme }) => theme.colors.white.mode1};\n padding: 10px 15px;\n border: none;\n cursor: pointer;\n border-radius: 10px;\n border: 1px solid ${({ theme }) => theme.colors.primary400.mode1};\n font-size: ${({ size }) => {\n switch (size) {\n case 'sm':\n return '12px'\n case 'lg':\n return '16px'\n default:\n return '14px'\n }\n }};\n font-family: 'Inter';\n font-weight: 600;\n line-height: 17px;\n opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};\n pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};\n\n &:hover {\n background: ${({ theme }) => theme.colors.grey400.mode1};\n box-shadow: 0 0 0 1px ${({ theme }) => theme.colors.primary500.mode1};\n }\n\n &:active {\n background: ${({ theme }) => theme.colors.black.mode1};\n }\n`\n" }, { "path": "src/lib-react-components/components/ButtonSingleInput/index.js", "content": "import { html } from 'htm/react'\n\nimport { Button } from './styles'\n\n/**\n * @param {{\n * children: import('react').ReactNode\n * startIcon: import('react').ElementType\n * variant: 'default' | 'bordered',\n * rounded: 'default' | 'md'\n * type?: 'button' | 'submit'\n * onClick: () => void,\n * testId?: string\n * }} props\n */\nexport const ButtonSingleInput = ({\n children,\n startIcon,\n variant = 'default',\n rounded = 'default',\n type = 'button',\n onClick,\n testId = 'button-single-input'\n}) => html`\n <${Button}\n data-testid=${testId}\n onClick=${onClick}\n variant=${variant}\n rounded=${rounded}\n type=${type}\n >\n ${startIcon && html`<${startIcon} size=\"24\" />`} ${children}\n \n`\n" }, { "path": "src/lib-react-components/components/ButtonSingleInput/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { ButtonSingleInput } from './index'\nimport { ArrowDownIcon } from '../../icons/ArrowDownIcon'\n\nimport '@testing-library/jest-dom'\n\nconst DummyIcon = ArrowDownIcon\n\ndescribe('ButtonSingleInput Component', () => {\n test('renders correctly with children and onClick handler', () => {\n const handleClick = jest.fn()\n const { getByText } = render(\n \n \n Single Input Button\n \n \n )\n\n const buttonText = getByText('Single Input Button')\n expect(buttonText).toBeInTheDocument()\n\n fireEvent.click(buttonText)\n expect(handleClick).toHaveBeenCalledTimes(1)\n })\n\n test('renders startIcon correctly with size \"20\"', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Single Input Button\n \n \n )\n\n const dummyIcon = container.querySelector('svg')\n expect(dummyIcon).toBeInTheDocument()\n expect(dummyIcon.getAttribute('width')).toBe('24')\n expect(dummyIcon.getAttribute('height')).toBe('24')\n })\n\n test('matches snapshot with default props', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Snapshot Button\n \n \n )\n\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('matches snapshot with variant \"bordered\" and rounded \"md\"', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Bordered Button\n \n \n )\n\n expect(container.firstChild).toMatchSnapshot()\n })\n})\n" }, { "path": "src/lib-react-components/components/ButtonSingleInput/styles.js", "content": "import styled from 'styled-components'\n\nexport const Button = styled.button.withConfig({\n shouldForwardProp: (prop) => !['variant'].includes(prop)\n})`\n width: fit-content;\n display: inline-flex;\n padding: 5px 10px;\n border: 1px solid\n ${({ theme, variant }) =>\n variant === 'bordered'\n ? theme.colors.primary400.mode1\n : theme.colors.black.mode1};\n align-items: center;\n gap: 7px;\n border-radius: 10px;\n cursor: pointer;\n background: ${({ theme }) => theme.colors.black.mode1};\n color: ${({ theme }) => theme.colors.primary400.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 500;\n\n & svg path {\n fill: ${({ theme }) => theme.colors.primary400.mode1};\n }\n\n &:hover {\n border-color: 1px solid ${({ theme }) => theme.colors.primary400.mode1};\n }\n`\n" }, { "path": "src/lib-react-components/components/ButtonThin/index.js", "content": "import { html } from 'htm/react'\n\nimport { Button } from './styles'\n\n/**\n * @param {{\n * children: import('react').ReactNode\n * startIcon: import('react').ElementType\n * endIcon: import('react').ElementType\n * variant: 'black' | 'grey'\n * type?: 'button' | 'submit'\n * onClick: () => void,\n * testId?: string\n * }} props\n */\nexport const ButtonThin = ({\n children,\n startIcon,\n endIcon,\n variant = 'black',\n type = 'button',\n onClick,\n testId = 'button-thin'\n}) => html`\n <${Button}\n data-testid=${testId}\n variant=${variant}\n onClick=${onClick}\n type=${type}\n >\n ${startIcon && html`<${startIcon} size=\"24\" />`} ${children}\n ${endIcon && html`<${endIcon} size=\"24\" />`}\n \n`\n" }, { "path": "src/lib-react-components/components/ButtonThin/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { ButtonThin } from './index'\nimport { ArrowDownIcon } from '../../icons/ArrowDownIcon'\nimport '@testing-library/jest-dom'\n\nconst DummyIcon = ArrowDownIcon\n\ndescribe('ButtonThin Component', () => {\n test('renders correctly with children and onClick handler', () => {\n const handleClick = jest.fn()\n const { getByText } = render(\n \n Thin Button\n \n )\n\n const buttonText = getByText('Thin Button')\n expect(buttonText).toBeInTheDocument()\n\n fireEvent.click(buttonText)\n expect(handleClick).toHaveBeenCalledTimes(1)\n })\n\n test('renders with startIcon and endIcon correctly', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Thin Button With Icons\n \n \n )\n\n const icons = container.querySelectorAll('svg')\n expect(icons.length).toBe(2)\n icons.forEach((icon) => {\n expect(icon.getAttribute('width')).toBe('24')\n expect(icon.getAttribute('height')).toBe('24')\n })\n })\n\n test('matches snapshot for default variant', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Snapshot Thin Button\n \n \n )\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('matches snapshot for grey variant', () => {\n const handleClick = jest.fn()\n const { container } = render(\n \n \n Grey Thin Button\n \n \n )\n expect(container.firstChild).toMatchSnapshot()\n })\n})\n" }, { "path": "src/lib-react-components/components/ButtonThin/styles.js", "content": "import styled, { css } from 'styled-components'\n\nexport const Button = styled.div`\n width: fit-content;\n height: auto;\n display: inline-flex;\n padding: 5px 10px;\n border: 1px solid transparent;\n align-items: center;\n gap: 7px;\n border-radius: 10px;\n cursor: pointer;\n\n ${({ variant, theme }) => {\n if (variant === 'black') {\n return css`\n background: ${theme.colors.black.mode1};\n color: ${theme.colors.primary300.mode1};\n\n & svg path {\n fill: ${theme.colors.primary300.mode1};\n }\n\n &:hover {\n border: 1px solid ${theme.colors.primary400.mode1};\n color: ${theme.colors.primary400.mode1};\n\n & svg path {\n fill: ${theme.colors.primary400.mode1};\n }\n }\n `\n }\n\n if (variant === 'grey') {\n return css`\n background: ${theme.colors.grey300.mode1};\n color: ${theme.colors.white.mode1};\n `\n }\n }};\n`\n" }, { "path": "src/lib-react-components/components/CompoundField/index.js", "content": "import { html } from 'htm/react'\n\nimport { CompoundFieldComponent } from './styles'\n\n/**\n * @param {{\n * children: import('react').ReactNode\n * isDisabled?: boolean\n * }} props\n */\n\nexport const CompoundField = ({ children, isDisabled }) => html`\n <${CompoundFieldComponent} isDisabled=${isDisabled}> ${children} \n`\n" }, { "path": "src/lib-react-components/components/CompoundField/index.test.js", "content": "import React from 'react'\n\nimport { render } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { CompoundField } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('CompoundField Component', () => {\n test('renders children correctly', () => {\n const { getByText } = render(\n \n \n
Compound Field Content
\n \n \n )\n expect(getByText('Compound Field Content')).toBeInTheDocument()\n })\n\n test('matches snapshot when not disabled', () => {\n const { container } = render(\n \n Compound Field Content\n \n )\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('matches snapshot when disabled', () => {\n const { container } = render(\n \n Compound Field Content\n \n )\n expect(container.firstChild).toMatchSnapshot()\n })\n})\n" }, { "path": "src/lib-react-components/components/CompoundField/styles.js", "content": "import styled from 'styled-components'\n\nexport const CompoundFieldComponent = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isDisabled'].includes(prop)\n})`\n border-radius: 10px;\n padding: 8px 10px;\n border: 1px solid ${({ theme }) => theme.colors.grey100.dark};\n background-color: ${({ theme }) => theme.colors.grey400.dark};\n\n &:hover {\n border-color: ${({ theme, isDisabled }) =>\n isDisabled ? theme.colors.grey100.dark : theme.colors.primary300.mode1};\n }\n max-height: 100%;\n overflow-y: auto;\n`\n" }, { "path": "src/lib-react-components/components/HighlightString/index.js", "content": "import { html } from 'htm/react'\n\nimport { HighlightedText, NumberSpan, SymbolSpan } from './styles'\n\n/**\n *\n * @param {{\n * text: string,\n * testId: string,\n * }} props\n */\nexport const HighlightString = ({ text, testId }) => {\n const highlightText = (text) => {\n const regex = /(\\d+|[^a-zA-Z\\d\\s])/g\n const parts = text.split(regex)\n\n return parts.map((part, index) => {\n if (/^\\d+$/.test(part)) {\n return html`<${NumberSpan} key=${index}>${part}`\n }\n\n if (/[^a-zA-Z\\d\\s]/.test(part)) {\n return html`<${SymbolSpan} key=${index}>${part}`\n }\n\n return part\n })\n }\n\n return html`<${HighlightedText} data-testid=${testId}>\n ${highlightText(text)}\n `\n}\n" }, { "path": "src/lib-react-components/components/HighlightString/index.test.js", "content": "import React from 'react'\n\nimport { render } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { HighlightString } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('HighlightString Component', () => {\n test('renders plain text without numbers or symbols', () => {\n const { getByText } = render(\n \n \n \n )\n expect(getByText('Hello world')).toBeInTheDocument()\n })\n\n test('renders and highlights numbers and symbols correctly', () => {\n const { container, getByText } = render(\n \n \n \n )\n\n expect(container).toHaveTextContent('Hello 123!')\n\n const numberElement = getByText('123')\n expect(numberElement).toBeInTheDocument()\n\n const symbolElement = getByText('!')\n expect(symbolElement).toBeInTheDocument()\n\n expect(numberElement.tagName.toLowerCase()).toBe('span')\n expect(symbolElement.tagName.toLowerCase()).toBe('span')\n })\n\n test('matches snapshot', () => {\n const { container } = render(\n \n \n \n )\n expect(container.firstChild).toMatchSnapshot()\n })\n})\n" }, { "path": "src/lib-react-components/components/HighlightString/styles.js", "content": "import styled from 'styled-components'\n\nexport const HighlightedText = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n span {\n white-space: pre-wrap;\n }\n`\n\nexport const NumberSpan = styled.span`\n color: ${({ theme }) => theme.colors.primary400.mode1};\n font-weight: bold;\n`\n\nexport const SymbolSpan = styled.span`\n color: ${({ theme }) => theme.colors.categoryLogin.mode1};\n font-weight: bold;\n`\n" }, { "path": "src/lib-react-components/components/InputField/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { InputField } from './index'\nimport { ArrowDownIcon } from '../../icons/ArrowDownIcon'\nimport '@testing-library/jest-dom'\n\nconst DummyIcon = ArrowDownIcon\n\ndescribe('InputField Component', () => {\n test('renders label, placeholder, and error message', () => {\n const { getByText, getByPlaceholderText } = render(\n \n \n \n )\n expect(getByText('Test Label')).toBeInTheDocument()\n expect(getByPlaceholderText('Enter text')).toBeInTheDocument()\n expect(getByText('Error occurred')).toBeInTheDocument()\n })\n\n test('calls onChange when input changes if not disabled', () => {\n const handleChange = jest.fn()\n const { getByPlaceholderText } = render(\n \n \n \n )\n const input = getByPlaceholderText('Enter text')\n fireEvent.change(input, { target: { value: 'new value' } })\n expect(handleChange).toHaveBeenCalledWith('new value')\n })\n\n test('does not call onChange when disabled', () => {\n const handleChange = jest.fn()\n const { getByPlaceholderText } = render(\n \n \n \n )\n const input = getByPlaceholderText('Enter text')\n fireEvent.change(input, { target: { value: 'should not change' } })\n expect(handleChange).not.toHaveBeenCalled()\n })\n\n test('calls onClick when outer element is clicked and focuses input', () => {\n const handleClick = jest.fn()\n const { container, getByPlaceholderText } = render(\n \n \n \n )\n const outerElement = container.firstChild\n fireEvent.click(outerElement)\n expect(handleClick).toHaveBeenCalledWith('click test')\n const input = getByPlaceholderText('Enter text')\n expect(document.activeElement).toBe(input)\n })\n\n test('renders overlay correctly: visible when not focused, hidden when focused', async () => {\n const overlayText = 'Overlay Content'\n const { queryByText, getByPlaceholderText } = render(\n \n \n \n )\n expect(queryByText(overlayText)).toBeInTheDocument()\n\n const input = getByPlaceholderText('Enter text')\n fireEvent.focus(input)\n expect(queryByText(overlayText)).not.toBeInTheDocument()\n })\n\n test('renders icon if provided', () => {\n const { container } = render(\n \n \n \n )\n const icon = container.querySelector('svg')\n expect(icon).toBeInTheDocument()\n })\n\n test('renders additionalItems if provided', () => {\n const additionalItemText = 'Additional'\n const { getByText } = render(\n \n {additionalItemText}}\n />\n \n )\n expect(getByText(additionalItemText)).toBeInTheDocument()\n })\n\n test('matches snapshot for default variant', () => {\n const { container } = render(\n \n \n \n )\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('matches snapshot for outline variant', () => {\n const { container } = render(\n \n \n \n )\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('autoFocus prop focuses input automatically', () => {\n const { getByPlaceholderText } = render(\n \n \n \n )\n const input = getByPlaceholderText('Enter text')\n expect(document.activeElement).toBe(input)\n })\n})\n" }, { "path": "src/lib-react-components/components/InputField/index.tsx", "content": "import React, { useRef, useState } from 'react'\n\nimport {\n MainWrapper,\n Label,\n Input,\n AdditionalItems,\n IconWrapper,\n DefaultInputWrapper,\n OutlineInputWrapper,\n NoticeWrapper,\n InputAreaWrapper,\n InputOverlay,\n InsideWrapper\n} from './styles'\nimport { NoticeText } from '../NoticeText'\n\ntype InputType = 'text' | 'password' | 'url'\ntype InputVariant = 'default' | 'outline'\n\ninterface Props {\n value?: string\n onChange?: (value: string) => void\n icon?: React.FC<{ size: string }>\n label?: string\n error?: string\n additionalItems?: React.ReactNode\n belowInputContent?: React.ReactNode\n placeholder?: string\n isDisabled?: boolean\n onClick?: (value: string) => void\n type?: InputType\n variant?: InputVariant\n overlay?: React.ReactNode\n autoFocus?: boolean\n testId?: string\n dataId?: string\n onPaste?: (e: React.ClipboardEvent) => void\n}\n\nconst InputField = (props: Props): React.ReactElement => {\n const {\n value,\n onChange,\n icon: Icon,\n label,\n error,\n additionalItems,\n belowInputContent,\n placeholder,\n isDisabled,\n onClick,\n type = 'text',\n variant = 'default',\n overlay,\n autoFocus,\n testId = 'input-field',\n dataId,\n onPaste\n } = props\n\n const inputRef = useRef(null)\n const [isFocused, setIsFocused] = useState(false)\n\n const handleChange = (e: React.ChangeEvent): void => {\n if (isDisabled) {\n return\n }\n onChange?.(e.target.value)\n }\n\n const handleClick = (): void => {\n inputRef.current?.focus()\n onClick?.(value || '')\n\n if (!isDisabled) {\n setIsFocused(true)\n }\n }\n\n const getStyedWrapperByVariant = (): typeof DefaultInputWrapper | typeof OutlineInputWrapper => {\n if (variant === 'outline') {\n return OutlineInputWrapper\n }\n return DefaultInputWrapper\n }\n\n const StyledWrapper = getStyedWrapperByVariant()\n\n return (\n \n \n {Icon && (\n \n \n \n )}\n\n \n \n\n \n setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n type={type}\n hasOverlay={!!overlay && !isFocused}\n autoFocus={autoFocus}\n isDisabled={isDisabled}\n onPaste={onPaste}\n />\n\n {!isFocused && {overlay}}\n \n\n {!!error?.length && (\n \n \n \n )}\n \n\n {!!additionalItems && (\n e.stopPropagation()}>\n {additionalItems}\n \n )}\n \n {!!belowInputContent && belowInputContent}\n \n )\n}\n\nexport { InputField }\n" }, { "path": "src/lib-react-components/components/InputField/styles.ts", "content": "import styled from 'styled-components'\n\ninterface InputProps {\n hasOverlay?: boolean\n isDisabled?: boolean\n type?: string\n}\n\nexport const InputWrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n width: 100%;\n position: relative;\n`\n\nexport const OutlineInputWrapper = styled(InputWrapper)`\n border: 1px solid;\n border-color: ${({ theme }) => theme.colors.grey100.mode1};\n border-bottom: none;\n background: ${({ theme }) => theme.colors.grey400.mode1};\n margin-top: 0;\n padding: 8px 10px;\n\n &:first-child {\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n\n &:last-child {\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n border-bottom: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n }\n\n &:hover,\n &:focus-within {\n border-color: ${({ theme }) => theme.colors.primary400.mode1};\n }\n\n &:hover + &,\n &:focus-within + & {\n border-top-color: ${({ theme }) => theme.colors.primary400.mode1};\n }\n`\n\nexport const DefaultInputWrapper = styled(InputWrapper)`\n &:not(:first-child) {\n margin-top: 10px;\n padding-top: 10px;\n border-top: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n }\n`\n\nexport const InsideWrapper = styled.div`\n display: flex;\n align-items: flex-start;\n align-items: center;\n gap: 10px;\n width: 100%;\n position: relative;\n`\n\nexport const IconWrapper = styled.div`\n display: flex;\n flex-shrink: 0;\n margin-top: 9px;\n`\n\nexport const MainWrapper = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n`\n\nexport const Label = styled.span`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 12px;\n font-weight: 400;\n`\n\nexport const InputAreaWrapper = styled.div`\n position: relative;\n margin-top: 5px;\n overflow-x: auto;\n white-space: nowrap;\n display: flex;\n align-items: center;\n`\n\nconst getInputColor = (params: {\n theme: { colors: Record> }\n type?: string\n hasOverlay?: boolean\n}): string => {\n const { theme, type, hasOverlay } = params\n\n if (hasOverlay) {\n return 'transparent'\n }\n\n if (type === 'url') {\n return theme.colors.primary400.mode1\n }\n\n return theme.colors.white.mode1\n}\n\nexport const Input = styled.input.withConfig({\n shouldForwardProp: (prop) => !['hasOverlay', 'isDisabled'].includes(prop)\n}) `\n color: ${({ theme, type, hasOverlay }) =>\n getInputColor({ theme, type, hasOverlay })};\n font-family: 'Inter';\n font-size: 16px;\n font-weight: 700;\n caret-color: ${({ theme, hasOverlay }) =>\n hasOverlay ? theme.colors.primary400.mode1 : ''};\n width: 100%;\n user-select: ${({ isDisabled }) => (isDisabled ? 'none' : 'auto')};\n cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'text')};\n\n &::selection {\n color: ${({ hasOverlay }) => (hasOverlay ? 'transparent' : '')};\n }\n\n &::placeholder {\n color: ${({ theme }) => theme.colors.grey100.mode1};\n }\n`\n\nexport const InputOverlay = styled.div`\n position: absolute;\n top: 0;\n left: -6px;\n width: 100%;\n height: 100%;\n font-family: 'Inter';\n font-size: 16px;\n font-weight: 700;\n z-index: 1;\n pointer-events: none;\n display: flex;\n align-items: center;\n padding: 8px;\n white-space: nowrap;\n\n & span {\n display: flex;\n white-space: nowrap;\n }\n`\n\nexport const NoticeWrapper = styled.div`\n margin-top: 2px;\n`\n\nexport const AdditionalItems = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 10px;\n align-self: center;\n`\n" }, { "path": "src/lib-react-components/components/NoticeText/index.js", "content": "import { html } from 'htm/react'\n\nimport { NoticeTextComponent, NoticeTextWrapper } from './styles'\nimport { ErrorIcon } from '../../icons/ErrorIcon'\nimport { OkayIcon } from '../../icons/OkayIcon'\nimport { YellowErrorIcon } from '../../icons/YellowErrorIcon'\n\n/**\n * @param {{\n * text: string\n * type: 'success' | 'error' | 'warning'\n * testId?: string\n * }} props\n */\nexport const NoticeText = ({ text, type = 'success', testId }) => {\n const getIconByType = () => {\n switch (type) {\n case 'success':\n return OkayIcon\n case 'error':\n return ErrorIcon\n case 'warning':\n return YellowErrorIcon\n default:\n return null\n }\n }\n\n return html`\n <${NoticeTextWrapper}>\n <${getIconByType()} size=\"10px\" />\n <${NoticeTextComponent} data-testid=${testId} type=${type}> ${text} \n \n `\n}\n" }, { "path": "src/lib-react-components/components/NoticeText/index.test.js", "content": "import React from 'react'\n\nimport { render } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { NoticeText } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('NoticeText Component', () => {\n test('renders success type correctly', () => {\n const { getByText, container } = render(\n \n \n \n )\n expect(getByText('Success message')).toBeInTheDocument()\n\n const svgElement = container.querySelector('svg')\n expect(svgElement).toBeInTheDocument()\n expect(svgElement.getAttribute('width')).toBe('10px')\n })\n\n test('renders error type correctly', () => {\n const { getByText, container } = render(\n \n \n \n )\n expect(getByText('Error message')).toBeInTheDocument()\n const svgElement = container.querySelector('svg')\n expect(svgElement).toBeInTheDocument()\n expect(svgElement.getAttribute('width')).toBe('10px')\n })\n\n test('renders warning type correctly', () => {\n const { getByText, container } = render(\n \n \n \n )\n expect(getByText('Warning message')).toBeInTheDocument()\n const svgElement = container.querySelector('svg')\n expect(svgElement).toBeInTheDocument()\n expect(svgElement.getAttribute('width')).toBe('10px')\n })\n\n test('matches snapshot for success type', () => {\n const { container } = render(\n \n \n \n )\n expect(container.firstChild).toMatchSnapshot()\n })\n})\n" }, { "path": "src/lib-react-components/components/NoticeText/styles.js", "content": "import styled from 'styled-components'\n\nexport const NoticeTextWrapper = styled.div`\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 5px;\n`\n\nexport const NoticeTextComponent = styled.div`\n color: ${({ theme, type }) => {\n switch (type) {\n case 'success':\n return theme.colors.primary400.mode1\n case 'error':\n return theme.colors.errorRed.dark\n case 'warning':\n return theme.colors.errorYellow.mode1\n default:\n return theme.colors.white.mode1\n }\n }};\n font-family: 'Inter';\n font-size: 8px;\n font-weight: 500;\n`\n" }, { "path": "src/lib-react-components/components/PasswordField/index.js", "content": "import React, { useState } from 'react'\n\nimport {\n checkPassphraseStrength,\n checkPasswordStrength\n} from '@tetherto/pearpass-utils-password-check'\nimport { html } from 'htm/react'\n\nimport { PasswordStrongnessWrapper } from './styles'\nimport { useTranslation } from '../../../hooks/useTranslation'\nimport { ErrorIcon } from '../../icons/ErrorIcon'\nimport { EyeClosedIcon } from '../../icons/EyeClosedIcon'\nimport { EyeIcon } from '../../icons/EyeIcon'\nimport { KeyIcon } from '../../icons/KeyIcon'\nimport { OkayIcon } from '../../icons/OkayIcon'\nimport { YellowErrorIcon } from '../../icons/YellowErrorIcon'\nimport { ButtonRoundIcon } from '../ButtonRoundIcon'\nimport { HighlightString } from '../HighlightString'\nimport { InputField } from '../InputField'\n\nconst PASSWORD_STRENGTH_ICONS = {\n error: ErrorIcon,\n warning: YellowErrorIcon,\n success: OkayIcon\n}\n\n/**\n * @param {{\n * value: string,\n * onChange: (value: string) => void,\n * label: string,\n * error: string,\n * passType: 'password' | 'passphrase',\n * additionalItems: import('react').ReactNode,\n * belowInputContent: import('react').ReactNode,\n * placeholder: string,\n * isDisabled: boolean,\n * hasStrongness: boolean,\n * onClick: () => void,\n * variant?: 'default' | 'outline'\n * icon: import('react').ReactNode,\n * testId?: string\n * }} props\n */\nexport const PasswordField = ({\n value,\n onChange,\n label,\n error,\n passType = 'password',\n additionalItems,\n belowInputContent,\n placeholder,\n isDisabled,\n hasStrongness = false,\n onClick,\n variant = 'default',\n icon,\n testId = 'password-field'\n}) => {\n const { t } = useTranslation()\n const [isPasswordVisible, setIsPasswordVisible] = useState(false)\n\n const handleChange = (value) => {\n onChange?.(value)\n }\n\n const getPasswordStrongness = () => {\n if (!value?.length) {\n return null\n }\n\n const { success, type, strengthType, strengthText } =\n passType === 'password'\n ? checkPasswordStrength(value)\n : checkPassphraseStrength(value)\n\n if (!success) {\n return null\n }\n\n const icon = PASSWORD_STRENGTH_ICONS[strengthType]\n\n return html`\n <${PasswordStrongnessWrapper} strength=${type}>\n <${icon} />\n ${t(strengthText)}\n \n `\n }\n\n return html`\n <${InputField}\n testId=${testId}\n label=${label || 'Password'}\n icon=${icon || KeyIcon}\n isDisabled=${isDisabled}\n value=${value}\n overlay=${isPasswordVisible\n ? html` <${HighlightString} text=${value} /> `\n : null}\n onChange=${handleChange}\n onClick=${onClick}\n placeholder=${placeholder}\n error=${error}\n variant=${variant}\n belowInputContent=${belowInputContent}\n additionalItems=${html`\n <${React.Fragment}>\n ${!!hasStrongness && getPasswordStrongness()}\n\n <${ButtonRoundIcon}\n testId=\"passwordfield-button-togglevisibility\"\n startIcon=${isPasswordVisible ? EyeClosedIcon : EyeIcon}\n onClick=${(e) => {\n e.stopPropagation()\n setIsPasswordVisible(!isPasswordVisible)\n }}\n />\n\n ${additionalItems}\n \n `}\n type=${isPasswordVisible ? 'text' : 'password'}\n />\n `\n}\n" }, { "path": "src/lib-react-components/components/PasswordField/index.test.js", "content": "import React from 'react'\n\njest.mock('@lingui/react', () => ({\n useLingui: jest.fn(() => ({\n i18n: { _: (key) => key }\n }))\n}))\n\njest.mock('@tetherto/pearpass-utils-password-check', () => ({\n checkPasswordStrength: jest.fn(),\n checkPassphraseStrength: jest.fn(),\n PASSWORD_STRENGTH: {\n SAFE: 'safe',\n VULNERABLE: 'vulnerable',\n WEAK: 'weak'\n }\n}))\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport { checkPasswordStrength } from '@tetherto/pearpass-utils-password-check'\n\nimport { PasswordField } from './index'\nimport '@testing-library/jest-dom'\n\nconst DummyAdditionalItem = () => (\n
Additional
\n)\n\ndescribe('PasswordField Component', () => {\n const setup = (props) =>\n render(\n \n \n \n )\n\n beforeEach(() => {\n jest.clearAllMocks()\n })\n\n test('renders label, placeholder, and error message', () => {\n const { getByText, getByPlaceholderText } = setup({\n value: 'secret',\n label: 'Password',\n error: 'Error occurred',\n placeholder: 'Enter password',\n onChange: jest.fn(),\n onClick: jest.fn(),\n isDisabled: false\n })\n\n expect(getByText('Password')).toBeInTheDocument()\n expect(getByPlaceholderText('Enter password')).toBeInTheDocument()\n expect(getByText('Error occurred')).toBeInTheDocument()\n })\n\n test('calls onChange when input value changes', () => {\n const handleChange = jest.fn()\n const { getByPlaceholderText } = setup({\n value: '',\n placeholder: 'Enter password',\n onChange: handleChange\n })\n\n const input = getByPlaceholderText('Enter password')\n fireEvent.change(input, { target: { value: 'newpass' } })\n expect(handleChange).toHaveBeenCalledWith('newpass')\n })\n\n test('toggles password visibility when toggle button is clicked', () => {\n const { container, getByPlaceholderText, queryByText } = setup({\n value: 'secret',\n placeholder: 'Enter password',\n onChange: jest.fn()\n })\n\n const input = getByPlaceholderText('Enter password')\n expect(input).toHaveAttribute('type', 'password')\n\n const toggleButton = container.querySelector('button')\n expect(toggleButton).toBeInTheDocument()\n\n fireEvent.click(toggleButton)\n\n expect(input).toHaveAttribute('type', 'text')\n\n expect(queryByText('secret')).toBeInTheDocument()\n\n fireEvent.click(toggleButton)\n expect(input).toHaveAttribute('type', 'password')\n })\n\n test('displays password strongness as \"Strong\" when safe', () => {\n checkPasswordStrength.mockReturnValue({\n success: true,\n type: 'strong',\n strengthType: 'success',\n strengthText: 'Strong'\n })\n\n const { getByText } = setup({\n value: 'safePassword',\n label: 'Password',\n onChange: jest.fn(),\n hasStrongness: true,\n passType: 'password'\n })\n\n expect(getByText('Strong')).toBeInTheDocument()\n })\n\n test('displays password strongness as \"Weak\" when not safe', () => {\n checkPasswordStrength.mockReturnValue({\n success: true,\n type: 'weak',\n strengthType: 'error',\n strengthText: 'Weak'\n })\n\n const { getByText } = setup({\n value: 'weak',\n label: 'Password',\n onChange: jest.fn(),\n hasStrongness: true,\n passType: 'password'\n })\n\n expect(getByText('Weak')).toBeInTheDocument()\n })\n\n test('renders additionalItems if provided', () => {\n const { getByTestId } = setup({\n value: 'secret',\n placeholder: 'Enter password',\n onChange: jest.fn(),\n additionalItems: \n })\n\n expect(getByTestId('additional-item')).toBeInTheDocument()\n })\n\n test('matches snapshot for default variant', () => {\n const { container } = setup({\n value: 'snapshot test',\n label: 'Password',\n placeholder: 'Enter password',\n onChange: jest.fn(),\n variant: 'default'\n })\n\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('matches snapshot for outline variant', () => {\n const { container } = setup({\n value: 'outline snapshot',\n label: 'Password',\n placeholder: 'Enter password',\n onChange: jest.fn(),\n variant: 'outline'\n })\n\n expect(container.firstChild).toMatchSnapshot()\n })\n})\n" }, { "path": "src/lib-react-components/components/PasswordField/styles.js", "content": "import { PASSWORD_STRENGTH } from '@tetherto/pearpass-utils-password-check'\nimport styled from 'styled-components'\n\nexport const PasswordStrongnessWrapper = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isStrong'].includes(prop)\n})`\n display: flex;\n align-items: center;\n gap: 5px;\n color: ${({ theme, strength }) => {\n switch (strength) {\n case PASSWORD_STRENGTH.SAFE:\n return theme.colors.primary400.mode1\n case PASSWORD_STRENGTH.VULNERABLE:\n return theme.colors.errorRed.dark\n case PASSWORD_STRENGTH.WEAK:\n return theme.colors.errorYellow.mode1\n default:\n return theme.colors.white.mode1\n }\n }};\n font-family: 'Inter';\n font-size: 8px;\n font-weight: 500;\n`\n" }, { "path": "src/lib-react-components/components/PearPassInputField/index.js", "content": "import { html } from 'htm/react'\n\nimport {\n Input,\n InputAreaWrapper,\n InputWrapper,\n MainWrapper,\n NoticeWrapper\n} from './styles'\nimport { NoticeText } from '../../../lib-react-components'\n\n/**\n * @param {{\n * value: string,\n * onChange: (value: string) => void,\n * placeholder: string,\n * isDisabled: boolean,\n * error: string,\n * }} props\n */\nexport const PearPassInputField = ({\n placeholder,\n value,\n onChange,\n isDisabled,\n error\n}) => {\n const handleChange = (e) => {\n if (isDisabled) {\n return\n }\n onChange?.(e.target.value)\n }\n\n return html`\n <${InputWrapper}>\n <${MainWrapper}>\n <${InputAreaWrapper}>\n <${Input}\n value=${value}\n onChange=${handleChange}\n disabled=${isDisabled}\n placeholder=${placeholder}\n />\n \n ${!!error?.length &&\n html` <${NoticeWrapper}>\n <${NoticeText} text=${error} type=\"error\" />\n `}\n \n \n `\n}\n" }, { "path": "src/lib-react-components/components/PearPassInputField/index.test.js", "content": "import React from 'react'\n\njest.mock('@tetherto/pearpass-utils-password-check', () => ({\n checkPasswordStrength: jest.fn(),\n checkPassphraseStrength: jest.fn()\n}))\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport '@testing-library/jest-dom'\nimport { PearPassInputField } from '.'\n\ndescribe('PearPassInputField Component', () => {\n test('renders placeholder and error message', () => {\n const { getByPlaceholderText, getByText } = render(\n \n \n \n )\n expect(getByPlaceholderText('Enter text')).toBeInTheDocument()\n expect(getByText('Error occurred')).toBeInTheDocument()\n })\n\n test('calls onChange when input changes if not disabled', () => {\n const handleChange = jest.fn()\n const { getByPlaceholderText } = render(\n \n \n \n )\n const input = getByPlaceholderText('Enter text')\n fireEvent.change(input, { target: { value: 'new value' } })\n expect(handleChange).toHaveBeenCalledWith('new value')\n })\n\n test('does not call onChange when disabled', () => {\n const handleChange = jest.fn()\n const { getByPlaceholderText } = render(\n \n \n \n )\n const input = getByPlaceholderText('Enter text')\n fireEvent.change(input, { target: { value: 'should not change' } })\n expect(handleChange).not.toHaveBeenCalled()\n })\n\n test('displays an error message when error prop is provided', () => {\n const { getByText } = render(\n \n \n \n )\n expect(getByText('This field is required')).toBeInTheDocument()\n })\n\n test('does not display error message when error prop is empty', () => {\n const { queryByText } = render(\n \n \n \n )\n expect(queryByText('This field is required')).not.toBeInTheDocument()\n })\n\n test('renders input as disabled when isDisabled is true', () => {\n const { getByPlaceholderText } = render(\n \n \n \n )\n const input = getByPlaceholderText('Enter text')\n expect(input).toBeDisabled()\n })\n\n test('matches snapshot for default variant', () => {\n const { container } = render(\n \n \n \n )\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('matches snapshot for outline variant', () => {\n const { container } = render(\n \n \n \n )\n expect(container.firstChild).toMatchSnapshot()\n })\n})\n" }, { "path": "src/lib-react-components/components/PearPassInputField/styles.js", "content": "import styled from 'styled-components'\n\nexport const InputWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n position: relative;\n\n border-radius: 10px;\n border: 1px solid;\n border-color: ${({ theme }) => theme.colors.grey100.mode1};\n margin-top: 0;\n padding: 10px 10px;\n\n &:hover,\n &:focus-within {\n border-color: ${({ theme }) => theme.colors.primary400.mode1};\n }\n`\n\nexport const MainWrapper = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n`\n\nexport const InputAreaWrapper = styled.div`\n flex: 1;\n position: relative;\n overflow-x: auto;\n white-space: nowrap;\n display: flex;\n align-items: center;\n`\n\nexport const Input = styled.input`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n font-weight: 700;\n pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};\n width: 100%;\n\n &::placeholder {\n color: ${({ theme }) => theme.colors.grey100.mode1};\n }\n`\n\nexport const NoticeWrapper = styled.div`\n margin-top: 2px;\n`\n" }, { "path": "src/lib-react-components/components/PearPassPasswordField/index.js", "content": "import { useState } from 'react'\n\nimport { html } from 'htm/react'\n\nimport {\n AdditionalItems,\n IconWrapper,\n Input,\n InputAreaWrapper,\n InputWrapper,\n MainWrapper,\n NoticeWrapper\n} from './styles'\nimport { EyeClosedIcon } from '../../icons/EyeClosedIcon'\nimport { EyeIcon } from '../../icons/EyeIcon'\nimport { LockCircleIcon } from '../../icons/LockCircleIcon'\nimport { ButtonRoundIcon } from '../ButtonRoundIcon'\nimport { NoticeText } from '../NoticeText'\n\n/**\n * @param {{\n * value: string,\n * placeholder?: string,\n * onChange: (value: string) => void,\n * isDisabled: boolean,\n * error: string,\n * testId?: string\n * errorTestId?: string\n * }} props\n */\nexport const PearPassPasswordField = ({\n value,\n placeholder,\n onChange,\n isDisabled,\n error,\n testId = 'pearpass-password-field'\n}) => {\n const [isPasswordVisible, setIsPasswordVisible] = useState(false)\n\n const handleChange = (e) => {\n if (isDisabled) {\n return\n }\n onChange?.(e.target.value)\n }\n\n return html`\n <${InputWrapper}>\n <${IconWrapper}> <${LockCircleIcon} size=\"24\" /> \n\n <${MainWrapper}>\n <${InputAreaWrapper}>\n <${Input}\n data-testid=${testId}\n placeholder=${placeholder}\n value=${value}\n onChange=${handleChange}\n disabled=${isDisabled}\n type=${isPasswordVisible ? 'text' : 'password'}\n />\n \n ${!!error?.length &&\n html` <${NoticeWrapper}>\n <${NoticeText}\n text=${error}\n type=\"error\"\n testId=${`password-error-${error}`}\n />\n `}\n \n\n <${AdditionalItems}>\n <${ButtonRoundIcon}\n testId=\"password-visibility-button\"\n startIcon=${isPasswordVisible ? EyeClosedIcon : EyeIcon}\n onClick=${() => setIsPasswordVisible(!isPasswordVisible)}\n />\n \n \n `\n}\n" }, { "path": "src/lib-react-components/components/PearPassPasswordField/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { PearPassPasswordField } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('PearPassPasswordField Component', () => {\n test('renders input with type \"password\" initially and displays LockCircleIcon', () => {\n const { getByDisplayValue, container } = render(\n \n \n \n )\n const input = getByDisplayValue('secret')\n expect(input).toBeInTheDocument()\n expect(input).toHaveAttribute('type', 'password')\n\n const iconSvg = container.querySelector('svg')\n expect(iconSvg).toBeInTheDocument()\n expect(iconSvg.getAttribute('width')).toBe('24')\n })\n\n test('calls onChange when input value changes if not disabled', () => {\n const handleChange = jest.fn()\n const { getByDisplayValue } = render(\n \n \n \n )\n const input = getByDisplayValue('')\n fireEvent.change(input, { target: { value: 'newsecret' } })\n expect(handleChange).toHaveBeenCalledWith('newsecret')\n })\n\n test('does not call onChange when disabled', () => {\n const handleChange = jest.fn()\n const { getByDisplayValue } = render(\n \n \n \n )\n const input = getByDisplayValue('')\n fireEvent.change(input, { target: { value: 'newsecret' } })\n expect(handleChange).not.toHaveBeenCalled()\n })\n\n test('toggles password visibility when toggle button is clicked', () => {\n const { getByDisplayValue, container } = render(\n \n \n \n )\n const input = getByDisplayValue('secret')\n expect(input).toHaveAttribute('type', 'password')\n\n const toggleButton = container.querySelector('button')\n expect(toggleButton).toBeInTheDocument()\n\n fireEvent.click(toggleButton)\n expect(input).toHaveAttribute('type', 'text')\n\n fireEvent.click(toggleButton)\n expect(input).toHaveAttribute('type', 'password')\n })\n\n test('renders error message when error prop is provided', () => {\n const errorMessage = 'Error occurred'\n const { getByText } = render(\n \n \n \n )\n expect(getByText(errorMessage)).toBeInTheDocument()\n })\n\n test('matches snapshot', () => {\n const { container } = render(\n \n \n \n )\n expect(container.firstChild).toMatchSnapshot()\n })\n})\n" }, { "path": "src/lib-react-components/components/PearPassPasswordField/styles.js", "content": "import styled from 'styled-components'\n\nexport const InputWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n position: relative;\n\n border-radius: 10px;\n border: 1px solid;\n border-color: ${({ theme }) => theme.colors.grey100.mode1};\n margin-top: 0;\n padding: 5px 10px;\n\n &:hover,\n &:focus-within {\n border-color: ${({ theme }) => theme.colors.primary400.mode1};\n }\n`\n\nexport const MainWrapper = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n`\n\nexport const IconWrapper = styled.div`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n align-self: 'stretch';\n`\n\nexport const InputAreaWrapper = styled.div`\n flex: 1;\n position: relative;\n overflow-x: auto;\n white-space: nowrap;\n display: flex;\n align-items: center;\n`\n\nexport const Input = styled.input`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n font-weight: 700;\n pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};\n width: 100%;\n\n &::placeholder {\n color: ${({ theme }) => theme.colors.grey100.mode1};\n }\n`\n\nexport const NoticeWrapper = styled.div`\n margin-top: 2px;\n`\n\nexport const AdditionalItems = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 10px;\n align-self: center;\n`\n" }, { "path": "src/lib-react-components/components/PearPassPasswordFieldV2/index.test.ts", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { PearPassPasswordFieldV2 } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('PearPassPasswordFieldV2 Component', () => {\n const renderWithTheme = (ui: React.ReactElement) =>\n render(\n React.createElement(\n ThemeProvider as React.ComponentType<{ children: React.ReactNode }>,\n null,\n ui\n )\n )\n\n test('renders input with type \"password\" initially', () => {\n const { getByTestId } = renderWithTheme(\n React.createElement(PearPassPasswordFieldV2, {\n value: 'secret',\n placeholder: 'Insert master password',\n onChange: jest.fn(),\n isDisabled: false,\n error: ''\n })\n )\n\n const input = getByTestId('@tetherto/pearpass-password-field-v2') as HTMLInputElement\n expect(input).toBeInTheDocument()\n expect(input).toHaveAttribute('type', 'password')\n expect(input.value).toBe('secret')\n })\n\n test('calls onChange when input value changes if not disabled', () => {\n const handleChange = jest.fn()\n const { getByTestId } = renderWithTheme(\n React.createElement(PearPassPasswordFieldV2, {\n value: '',\n placeholder: 'Insert master password',\n onChange: handleChange,\n isDisabled: false,\n error: ''\n })\n )\n\n const input = getByTestId('@tetherto/pearpass-password-field-v2')\n fireEvent.change(input, { target: { value: 'newsecret' } })\n expect(handleChange).toHaveBeenCalledWith('newsecret')\n })\n\n test('does not call onChange when disabled', () => {\n const handleChange = jest.fn()\n const { getByTestId } = renderWithTheme(\n React.createElement(PearPassPasswordFieldV2, {\n value: '',\n placeholder: 'Insert master password',\n onChange: handleChange,\n isDisabled: true,\n error: ''\n })\n )\n\n const input = getByTestId('@tetherto/pearpass-password-field-v2')\n fireEvent.change(input, { target: { value: 'newsecret' } })\n expect(handleChange).not.toHaveBeenCalled()\n })\n\n test('toggles password visibility when toggle control is clicked', () => {\n const { getByTestId } = renderWithTheme(\n React.createElement(PearPassPasswordFieldV2, {\n value: 'secret',\n placeholder: 'Insert master password',\n onChange: jest.fn(),\n isDisabled: false,\n error: ''\n })\n )\n\n const input = getByTestId('@tetherto/pearpass-password-field-v2')\n const toggle = getByTestId('@tetherto/pearpass-password-field-v2-toggle')\n\n expect(input).toHaveAttribute('type', 'password')\n\n fireEvent.click(toggle)\n expect(input).toHaveAttribute('type', 'text')\n\n fireEvent.click(toggle)\n expect(input).toHaveAttribute('type', 'password')\n })\n\n test('renders error message when error prop is provided', () => {\n const errorMessage = 'Error occurred'\n const { getByText } = renderWithTheme(\n React.createElement(PearPassPasswordFieldV2, {\n value: 'secret',\n placeholder: 'Insert master password',\n onChange: jest.fn(),\n isDisabled: false,\n error: errorMessage\n })\n )\n expect(getByText(errorMessage)).toBeInTheDocument()\n })\n\n})\n" }, { "path": "src/lib-react-components/components/PearPassPasswordFieldV2/index.tsx", "content": "import { useState } from 'react'\n\nimport { html } from 'htm/react'\n\nimport {\n AdditionalItems,\n Input,\n InputAreaWrapper,\n InputWrapper,\n MainWrapper,\n NoticeWrapper\n} from './styles'\nimport { EyeClosedIcon } from '../../icons/EyeClosedIcon'\nimport { EyeIcon } from '../../icons/EyeIcon'\nimport { NoticeText } from '../NoticeText'\nimport { colors } from '@tetherto/pearpass-lib-ui-theme-provider'\nimport { PearPassPasswordFieldV2Props } from './types'\n\nexport const PearPassPasswordFieldV2 = ({\n value,\n placeholder,\n onChange,\n isDisabled,\n error,\n testId = '@tetherto/pearpass-password-field-v2'\n}: PearPassPasswordFieldV2Props) => {\n const [isPasswordVisible, setIsPasswordVisible] = useState(false)\n\n const handleChange = (e: React.ChangeEvent) => {\n if (isDisabled) {\n return\n }\n onChange?.(e.target.value)\n }\n\n return html`\n <${InputWrapper}>\n <${MainWrapper}>\n <${InputAreaWrapper}>\n <${Input}\n data-testid=${testId}\n placeholder=${placeholder}\n value=${value}\n onChange=${handleChange}\n disabled=${isDisabled}\n type=${isPasswordVisible ? 'text' : 'password'}\n />\n \n ${!!error?.length &&\n html` <${NoticeWrapper}>\n <${NoticeText}\n text=${error}\n type=\"error\"\n testId=${`password-error-${error}`}\n />\n `}\n \n\n <${AdditionalItems}>\n setIsPasswordVisible(!isPasswordVisible)}\n >\n ${isPasswordVisible\n ? html`<${EyeClosedIcon} color=${colors.primary400.mode1} />`\n : html`<${EyeIcon} color=${colors.primary400.mode1} />`}\n \n \n \n `\n}\n" }, { "path": "src/lib-react-components/components/PearPassPasswordFieldV2/styles.ts", "content": "import styled from 'styled-components'\n\nexport const InputWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n position: relative;\n\n border-radius: 10px;\n margin-top: 0;\n padding: 20px 20px 20px 10px;\n background-color: ${({ theme }) => theme.colors.grey400.mode1};\n`\n\nexport const MainWrapper = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n`\n\nexport const IconWrapper = styled.div`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n align-self: 'stretch';\n`\n\nexport const InputAreaWrapper = styled.div`\n flex: 1;\n position: relative;\n overflow-x: auto;\n white-space: nowrap;\n display: flex;\n align-items: center;\n`\n\nexport const Input = styled.input`\n color: ${({ theme }) => theme.colors.white.mode1};\n font-family: 'Inter';\n font-size: 16px;\n font-weight: 700;\n pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};\n width: 100%;\n\n &::placeholder {\n color: ${({ theme }) => theme.colors.grey100.mode1};\n }\n`\n\nexport const NoticeWrapper = styled.div`\n margin-top: 2px;\n`\n\nexport const AdditionalItems = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 10px;\n align-self: center;\n`\n" }, { "path": "src/lib-react-components/components/PearPassPasswordFieldV2/types.ts", "content": "export type PearPassPasswordFieldV2Props = {\n value: string\n placeholder: string\n onChange: (value: string) => void\n isDisabled: boolean\n error: string\n testId?: string\n }\n " }, { "path": "src/lib-react-components/components/Slider/index.js", "content": "import { html } from 'htm/react'\n\nimport { StyledRange } from './styles'\n\n/**\n * @param {{\n * value: number,\n * onChange: (value: number) => void,\n * testId?: string,\n * }} props\n */\nexport const Slider = ({\n value,\n onChange,\n min = 0,\n max = 100,\n step = 1,\n testId = 'slider'\n}) => {\n const handleChange = (event) => {\n const value = event.target.value\n onChange?.(parseFloat(value))\n }\n\n return html`\n <${StyledRange}\n value=${value}\n onChange=${handleChange}\n min=${min}\n max=${max}\n step=${step}\n data-testid=${testId}\n />\n `\n}\n" }, { "path": "src/lib-react-components/components/Slider/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { Slider } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('Slider Component', () => {\n test('renders with correct attributes', () => {\n const { getByRole } = render(\n \n {}} min={10} max={50} step={5} />\n \n )\n\n const slider = getByRole('slider')\n expect(slider).toHaveAttribute('min', '10')\n expect(slider).toHaveAttribute('max', '50')\n expect(slider).toHaveAttribute('step', '5')\n expect(slider.value).toBe('30')\n })\n\n test('calls onChange with correct numeric value on change', () => {\n const handleChange = jest.fn()\n const { getByRole } = render(\n \n \n \n )\n const slider = getByRole('slider')\n fireEvent.change(slider, { target: { value: '40' } })\n\n expect(handleChange).toHaveBeenCalledWith(40)\n })\n})\n" }, { "path": "src/lib-react-components/components/Slider/styles.js", "content": "import styled from 'styled-components'\n\nexport const StyledRange = styled.input.attrs({ type: 'range' })`\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n cursor: pointer;\n outline: none;\n border-radius: 15px;\n height: 10px;\n background: ${({ theme, value = 0, max = 0, min = 0 }) => {\n const maxValue = parseFloat(max)\n const minValue = parseFloat(min)\n const progress = ((value - minValue) / (maxValue - minValue)) * 100\n\n return `linear-gradient(to right, ${theme.colors.primary300.mode1} ${progress}%, ${theme.colors.grey200.mode1} ${progress}%)`\n }};\n\n &::-webkit-slider-runnable-track {\n }\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n height: 15px;\n width: 15px;\n background-color: ${({ theme }) => theme.colors.primary400.mode1};\n border-radius: 50%;\n border: none;\n transition: 300ms ease-in-out;\n\n &:hover {\n box-shadow: 0 0 0 4px\n ${({ theme }) => `${theme.colors.primary400.mode1}66`};\n }\n }\n\n &:active::-webkit-slider-thumb {\n box-shadow: 0 0 0 4px ${({ theme }) => `${theme.colors.primary400.mode1}66`};\n }\n\n &:focus::-webkit-slider-thumb {\n box-shadow: 0 0 0 4px ${({ theme }) => `${theme.colors.primary400.mode1}66`};\n }\n`\n" }, { "path": "src/lib-react-components/components/Switch/index.js", "content": "import { html } from 'htm/react'\n\nimport { SwitchBackground, SwitchThumb } from './styles'\n\n/**\n * @param {{\n * isOn: boolean,\n * onChange: (isOn: boolean) => void,\n * testId?: string\n * }} props\n */\nexport const Switch = ({ isOn, onChange, testId = 'switch' }) => {\n const toggleSwitch = () => {\n onChange?.(!isOn)\n }\n\n return html`\n <${SwitchBackground}\n onClick=${toggleSwitch}\n isOn=${isOn}\n data-testid=${testId}\n >\n <${SwitchThumb} isOn=${isOn} />\n \n `\n}\n" }, { "path": "src/lib-react-components/components/Switch/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { Switch } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('Switch Component', () => {\n test('toggles switch correctly when clicked', () => {\n const handleChange = jest.fn()\n const { container } = render(\n \n \n \n )\n\n const background = container.firstChild\n fireEvent.click(background)\n expect(handleChange).toHaveBeenCalledWith(false)\n })\n\n test('matches snapshot when switched on', () => {\n const { container } = render(\n \n {}} />\n \n )\n expect(container.firstChild).toMatchSnapshot()\n })\n\n test('matches snapshot when switched off', () => {\n const { container } = render(\n \n {}} />\n \n )\n expect(container.firstChild).toMatchSnapshot()\n })\n})\n" }, { "path": "src/lib-react-components/components/Switch/styles.js", "content": "import styled from 'styled-components'\n\nconst TRANSITION_PROPERTIES = '300ms ease-in-out'\n\nexport const SwitchBackground = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isOn'].includes(prop)\n})`\n border: 1px solid ${({ theme }) => theme.colors.grey100.mode1};\n width: 30px;\n height: 16px;\n background-color: ${({ theme, isOn }) =>\n isOn ? theme.colors.grey400.mode1 : theme.colors.grey100.mode1};\n border-radius: 8px;\n position: relative;\n transition: background-color ${TRANSITION_PROPERTIES};\n`\n\nexport const SwitchThumb = styled.div.withConfig({\n shouldForwardProp: (prop) => !['isOn'].includes(prop)\n})`\n width: 16px;\n height: 16px;\n background-color: ${({ isOn, theme }) =>\n isOn ? theme.colors.primary400.mode1 : theme.colors.grey400.mode1};\n border: 1px solid\n ${({ theme, isOn }) =>\n isOn ? theme.colors.primary400.mode1 : theme.colors.grey200.mode1};\n border-radius: 50%;\n position: absolute;\n top: -1px;\n left: ${({ isOn }) => (isOn ? '14px' : '0')};\n transition:\n left ${TRANSITION_PROPERTIES},\n background-color ${TRANSITION_PROPERTIES};\n`\n" }, { "path": "src/lib-react-components/components/TextArea/index.test.js", "content": "import React from 'react'\n\nimport { render, fireEvent } from '@testing-library/react'\nimport { ThemeProvider } from '@tetherto/pearpass-lib-ui-theme-provider'\n\nimport { TextArea } from './index'\nimport '@testing-library/jest-dom'\n\ndescribe('TextArea Component', () => {\n const setup = (props) =>\n render(\n \n