feat(webview): finalize v0.4.0 UI

.gitignore

@@ -193,3 +193,5 @@ cobertura.xml
 # Used to build and embed sidecars during the bundling process.
 /src-tauri/sidecars/*
 !/src-tauri/sidecars/.gitkeep
+
+*storybook.log

.storybook/argsStore/ArgsStore.ts

@@ -0,0 +1,79 @@
+import type { ArgStoreKey } from './constants'
+import type { Args, ArgsStoreItem, Listener } from './types'
+
+export class ArgsStore {
+ #store: Map<ArgStoreKey, ArgsStoreItem<Args>>
+
+ constructor() {
+ this.#store = new Map()
+ }
+
+ getArgs<T extends Args>(key: ArgStoreKey): T | undefined {
+ return this.#store.get(key)?.args as T
+ }
+
+ initArgs<T extends Args>(key: ArgStoreKey, newArgs: T): T {
+ const storeEntry = this.#store.get(key)
+ const newListeners = storeEntry?.listeners ?? []
+
+ this.#store.set(key, {
+ args: newArgs,
+ listeners: newListeners,
+ })
+
+ return newArgs
+ }
+
+ updateArgs<T extends Args>(key: ArgStoreKey, nextlArgsPatch: Partial<T>): void {
+ const storeEntry = this.#store.get(key)
+ if (!storeEntry) {
+ return
+ }
+
+ const nextArgs = { ...storeEntry.args, ...nextlArgsPatch }
+
+ this.#store.set(key, {
+ args: nextArgs,
+ listeners: storeEntry.listeners,
+ })
+ this.#triggerChange(key, nextArgs)
+ }
+
+ addListener<T extends Args>(key: ArgStoreKey, callback: Listener<T>): void {
+ const storeEntry = this.#store.get(key)
+ const args = storeEntry?.args
+ const listeners = storeEntry?.listeners ?? []
+
+ const nextListeners = [...listeners, callback]
+
+ this.#store.set(key, {
+ args,
+ listeners: nextListeners as Listener<Args>[],
+ })
+ }
+
+ removeListener<T extends Args>(key: ArgStoreKey, callbackToRemove: Listener<T>): void {
+ const storeEntry = this.#store.get(key)
+ if (!storeEntry) {
+ return
+ }
+
+ const updatedListeners = storeEntry.listeners.filter(callback => callback !== callbackToRemove)
+
+ this.#store.set(key, {
+ ...storeEntry,
+ listeners: updatedListeners,
+ })
+ }
+
+ #triggerChange<T extends Args>(key: ArgStoreKey, updatedArgs: T): void {
+ const storeEntry = this.#store.get(key)
+ if (!storeEntry) {
+ return
+ }
+
+ for (const listener of storeEntry.listeners) {
+ listener(updatedArgs)
+ }
+ }
+}

.storybook/argsStore/constants.ts

@@ -0,0 +1,5 @@
+export enum ArgStoreKey {
+ DashboardScreenComponent = 'DashboardScreenComponent',
+ LoaderScreenComponent = 'LoaderScreenComponent',
+ ScannerScreenComponent = 'ScannerScreenComponent',
+}

.storybook/argsStore/index.ts

@@ -0,0 +1,3 @@
+import { ArgsStore } from './ArgsStore'
+
+export const argsStore = new ArgsStore()

.storybook/argsStore/types.ts

@@ -0,0 +1,8 @@
+export interface ArgsStoreItem<T extends Args> {
+ args: T | undefined
+ listeners: Listener<T>[]
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: Args are generic.
+export type Args = Record<string, any>
+export type Listener<T extends Args> = (args: T) => void

.storybook/argsStore/useArgsStoreArgs.ts

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import { argsStore } from '.'
+import type { ArgStoreKey } from './constants'
+import type { Args } from './types'
+
+export function useArgsStoreArgs<T extends Args>(
+ key: ArgStoreKey,
+ initialArgs: T,
+): [T, (nextArgsPatch: Partial<T>) => void] {
+ const [args, setArgs] = useState<T>(argsStore.initArgs<T>(key, initialArgs))
+
+ const updateArgs = useCallback(
+ (nextArgsPatch: Partial<T>) => {
+ argsStore.updateArgs<T>(key, nextArgsPatch)
+ },
+ [key],
+ )
+
+ useEffect(() => {
+ const handleArgsChange = (updatedArgs: T) => {
+ setArgs(updatedArgs)
+ }
+
+ argsStore.addListener<T>(key, handleArgsChange)
+
+ return () => {
+ argsStore.removeListener<T>(key, handleArgsChange)
+ }
+ }, [key])
+
+ return [args, updateArgs]
+}

.storybook/main.ts

@@ -0,0 +1,24 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+ framework: {
+ name: '@storybook/react-vite',
+ options: {},
+ },
+ staticDirs: ['../public'],
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+ async viteFinal(config) {
+ const { mergeConfig } = await import('vite')
+
+ return mergeConfig(config, {
+ server: {
+ hmr: {
+ overlay: false,
+ },
+ },
+ })
+ },
+}
+export default config

.storybook/preview.css

@@ -0,0 +1,13 @@
+html {
+ height: 100%;
+}
+body {
+ background-color: #0d1117;
+ border-radius: unset;
+ height: 100%;
+}
+
+#storybook-root {
+ display: flex;
+ height: 100%;
+}

.storybook/preview.tsx

@@ -0,0 +1,54 @@
+import type { Preview } from '@storybook/react'
+import { StrictMode } from 'react'
+import { ThemeProvider } from 'styled-components'
+
+import { ScreenStoryBox } from './story-components/ScreenStoryBox'
+
+import '@fontsource/poppins/300.css'
+import '@fontsource/poppins/400.css'
+import '@fontsource/poppins/500.css'
+import '@fontsource/reddit-mono/400.css'
+import '@fontsource/reddit-mono/600.css'
+
+import '../src/global.css'
+import './preview.css'
+
+const preview: Preview = {
+ decorators: [
+ (Story, { parameters }) => {
+ switch (parameters.type) {
+ case 'screen':
+ return (
+ <StrictMode>
+ <ThemeProvider theme={{}}>
+ <ScreenStoryBox>
+ <Story />
+ </ScreenStoryBox>
+ </ThemeProvider>
+ </StrictMode>
+ )
+
+ default:
+ return <Story />
+ }
+ },
+ ],
+
+ parameters: {
+ backgrounds: {
+ values: [
+ { name: 'Dark', value: '#0d1117' },
+ { name: 'Light', value: '#f6f8fa' },
+ ],
+ default: 'Dark',
+ },
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/i,
+ },
+ },
+ },
+}
+
+export default preview

.storybook/story-components/ScreenStoryBox.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react'
+import styled from 'styled-components'
+
+type ScreenStoryBoxProps = Readonly<{
+ children: ReactNode
+}>
+export function ScreenStoryBox({ children }: ScreenStoryBoxProps) {
+ return (
+ <Box className="Box">
+ <ScreenBox className="ScreenBox">{children}</ScreenBox>
+ </Box>
+ )
+}
+
+const Box = styled.div`
+ align-items: center;
+ display: flex;
+ flex-grow: 1;
+ justify-content: center;
+`
+
+const ScreenBox = styled.div`
+ background: linear-gradient(135deg, #660033 0%, #330a1f 100%);
+ border-radius: 16px;
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
+ display: flex;
+ height: 496px;
+ width: 800px;
+`

biome.jsonc

@@ -16,5 +16,18 @@
  "noNamespace": "off"
  }
  }
- }
+ },
+ "overrides": [
+ {
+ "include": ["./.storybook/**/*.ts", "./.storybook/**/*.tsx", "./src/stories/**/*.ts", "./src/stories/**/*.tsx"],
+ "linter": {
+ "rules": {
+ "style": {
+ "noDefaultExport": "off",
+ "useNamingConvention": "off"
+ }
+ }
+ }
+ }
+ ]
 }

configs/jest.config.js

@@ -1,4 +1,5 @@
-export default {
+/** @type {import('jest').Config} */
+const jestConfig = {
  clearMocks: true,
  collectCoverageFrom: ['<rootDir>/src/{hooks,libs,utils}/**/*.t{s,sx}', '<rootDir>/src/**/utils.t{s,sx}'],
  maxWorkers: '50%',
@@ -7,6 +8,14 @@ export default {
  setupFilesAfterEnv: ['<rootDir>/configs/jest.setup.ts'],
  testEnvironment: 'jsdom',
  testMatch: ['<rootDir>/src/**/*.test.t{s,sx}'],
+ testPathIgnorePatterns: [
+ '<rootDir>/.dev/*',
+ '<rootDir>/.yarn/*',
+ '<rootDir>/daemon/*',
+ '<rootDir>/node_modules/*',
+ '<rootDir>/sidecars/*',
+ '<rootDir>/src-tauri/*',
+ ],
  transform: {
  '.*\\.(j|t)sx?$': [
  '@swc/jest',
@@ -23,3 +32,5 @@ export default {
  },
  transformIgnorePatterns: [],
 }
+
+export default jestConfig