progress on fs upgrades

Author: gallayl

.cursor/rules/CODE_STYLE.mdc

@@ -180,7 +180,7 @@ function getData() {}
 ```typescript
 // ✅ Good - Shades component with event handlers
 const MyComponent = Shade({
-  shadowDomName: 'my-component',
+  customElementName: 'my-component',
   render: ({ props, injector }) => {
     const handleButtonClick = () => {
       // Internal logic
@@ -267,7 +267,7 @@ type UserProfileProps = {
 };
 
 export const UserProfile = Shade<UserProfileProps>({
-  shadowDomName: 'user-profile',
+  customElementName: 'user-profile',
   render: ({ props }) => {
     // Component implementation
   },
@@ -501,7 +501,7 @@ const formatDate = (date: Date): string => {
 
 // 5. Main component
 export const UserProfile = Shade<UserProfileProps>({
-  shadowDomName: 'user-profile',
+  customElementName: 'user-profile',
   render: ({ props, injector, useObservable, useDisposable }) => {
     // Services
     const userService = injector.getInstance(UserService);
@@ -646,7 +646,7 @@ export const formatCurrency = (value: number, currency: string): string => {
  * UserProfile component displays user information and allows editing
  */
 export const UserProfile = Shade<UserProfileProps>({
-  shadowDomName: 'user-profile',
+  customElementName: 'user-profile',
   render: ({ props }) => {
     // Component implementation
   },

.cursor/rules/SHADES_COMPONENTS.mdc

@@ -24,7 +24,7 @@ type MyComponentProps = {
 };
 
 export const MyComponent = Shade<MyComponentProps>({
-  shadowDomName: 'my-component',
+  customElementName: 'my-component',
   render: ({ props, injector }) => {
     return (
       <div>
@@ -42,15 +42,15 @@ Always provide a unique `shadowDomName` in kebab-case:
 
 ```typescript
 // ✅ Good - unique, descriptive kebab-case names
-shadowDomName: 'shade-app-layout'
-shadowDomName: 'shade-login'
-shadowDomName: 'theme-switch'
-shadowDomName: 'github-logo'
+customElementName: 'shade-app-layout'
+customElementName: 'shade-login'
+customElementName: 'theme-switch'
+customElementName: 'github-logo'
 
 // ❌ Avoid - generic or poorly named
-shadowDomName: 'my-component'
-shadowDomName: 'div'
-shadowDomName: 'Component1'
+customElementName: 'my-component'
+customElementName: 'div'
+customElementName: 'Component1'
 ```
 
 ## Render Function Parameters
@@ -79,11 +79,11 @@ Get service instances using the injector:
 
 ```typescript
 export const MyComponent = Shade({
-  shadowDomName: 'my-component',
+  customElementName: 'my-component',
   render: ({ injector }) => {
     const themeProvider = injector.getInstance(ThemeProviderService);
     const sessionService = injector.getInstance(SessionService);
-    
+
     return (
       <div style={{ backgroundColor: themeProvider.theme.background.default }}>
         {/* Component content */}
@@ -101,10 +101,10 @@ Use `useState` for component-local state:
 
 ```typescript
 export const Counter = Shade({
-  shadowDomName: 'app-counter',
+  customElementName: 'app-counter',
   render: ({ useState }) => {
     const [count, setCount] = useState<number>('count', 0);
-    
+
     return (
       <div>
         <span>Count: {count}</span>
@@ -121,22 +121,22 @@ Subscribe to `ObservableValue` from services:
 
 ```typescript
 export const UserStatus = Shade({
-  shadowDomName: 'user-status',
+  customElementName: 'user-status',
   render: ({ injector, useObservable }) => {
     const sessionService = injector.getInstance(SessionService);
-    
+
     // Subscribe to observable values
     const [isOperationInProgress] = useObservable(
       'isOperationInProgress',
       sessionService.isOperationInProgress
     );
     const [currentUser] = useObservable('currentUser', sessionService.currentUser);
     const [state] = useObservable('state', sessionService.state);
-    
+
     if (isOperationInProgress) {
       return <div>Loading...</div>;
     }
-    
+
     return (
       <div>
         {currentUser ? `Welcome, ${currentUser.username}` : 'Not logged in'}
@@ -154,18 +154,18 @@ Properly manage subscriptions and resources:
 
 ```typescript
 export const ThemeSwitch = Shade({
-  shadowDomName: 'theme-switch',
+  customElementName: 'theme-switch',
   render: ({ injector, useState, useDisposable }) => {
     const themeProvider = injector.getInstance(ThemeProviderService);
     const [theme, setTheme] = useState<'light' | 'dark'>('theme', 'dark');
-    
+
     // Subscribe to theme changes with automatic cleanup
     useDisposable('traceThemeChange', () =>
       themeProvider.subscribe('themeChanged', (newTheme) => {
         setTheme(newTheme.name === 'dark' ? 'dark' : 'light');
       }),
     );
-    
+
     return <button>{theme === 'dark' ? '☀️' : '🌜'}</button>;
   },
 });
@@ -188,10 +188,10 @@ import {
 } from '@furystack/shades-common-components';
 
 export const LoginForm = Shade({
-  shadowDomName: 'login-form',
+  customElementName: 'login-form',
   render: ({ injector }) => {
     const sessionService = injector.getInstance(SessionService);
-    
+
     return (
       <Paper elevation={3}>
         <Form<{ username: string; password: string }>
@@ -312,10 +312,10 @@ Use `ThemeProviderService` for consistent theming:
 
 ```typescript
 export const ThemedComponent = Shade({
-  shadowDomName: 'themed-component',
+  customElementName: 'themed-component',
   render: ({ injector }) => {
     const theme = injector.getInstance(ThemeProviderService).theme;
-    
+
     return (
       <div
         style={{
@@ -336,13 +336,11 @@ export const ThemedComponent = Shade({
 Allow users to switch between themes:
 
 ```typescript
-import { defaultDarkTheme, defaultLightTheme } from '@furystack/shades-common-components';
+import { defaultDarkTheme, defaultLightTheme } from '@furystack/shades-common-components'
 
 const toggleTheme = (themeProvider: ThemeProviderService, currentTheme: 'light' | 'dark') => {
-  themeProvider.setAssignedTheme(
-    currentTheme === 'dark' ? defaultLightTheme : defaultDarkTheme
-  );
-};
+  themeProvider.setAssignedTheme(currentTheme === 'dark' ? defaultLightTheme : defaultDarkTheme)
+}
 ```
 
 ## Page Components
@@ -356,7 +354,7 @@ Place page components in `frontend/src/pages/`:
 import { createComponent, Shade } from '@furystack/shades';
 
 export const Dashboard = Shade({
-  shadowDomName: 'page-dashboard',
+  customElementName: 'page-dashboard',
   render: ({ injector }) => {
     return (
       <div>
@@ -374,9 +372,9 @@ Export pages from an index file:
 
 ```typescript
 // frontend/src/pages/index.ts
-export * from './dashboard.js';
-export * from './login.js';
-export * from './hello-world.js';
+export * from './dashboard.js'
+export * from './login.js'
+export * from './hello-world.js'
 ```
 
 ## Application Entry Point

.cursor/rules/TYPESCRIPT_GUIDELINES.mdc

@@ -28,7 +28,7 @@ type ButtonProps = {
 };
 
 export const Button = Shade<ButtonProps>({
-  shadowDomName: 'app-button',
+  customElementName: 'app-button',
   render: ({ props }) => {
     const variant = props.variant ?? 'contained';
     const color = props.color ?? 'primary';
@@ -51,7 +51,7 @@ export const Button = Shade<ButtonProps>({
 
 // ✅ Good - explicit return type for complex conditional logic
 export const StatusBadge = Shade<{ status: string }>({
-  shadowDomName: 'status-badge',
+  customElementName: 'status-badge',
   render: ({ props }): JSX.Element | null => {
     switch (props.status) {
       case 'active':
@@ -88,7 +88,7 @@ type UserProfileProps = {
 }
 
 export const UserProfile = Shade<UserProfileProps>({
-  shadowDomName: 'user-profile',
+  customElementName: 'user-profile',
   render: ({ props }) => {
     // Component implementation
   },
@@ -132,7 +132,7 @@ type ListProps<T> = {
 };
 
 export const List = <T,>(props: ListProps<T>) => Shade({
-  shadowDomName: 'generic-list',
+  customElementName: 'generic-list',
   render: () => {
     return (
       <ul data-testid="list">
@@ -172,7 +172,7 @@ type DataListProps<T extends DataItem> = {
 };
 
 export const DataList = <T extends DataItem>(props: DataListProps<T>) => Shade({
-  shadowDomName: 'data-list',
+  customElementName: 'data-list',
   render: () => {
     return (
       <div data-testid="data-list">
@@ -475,7 +475,7 @@ const hasUsers = users.length > 0; // Inferred as boolean
 
 // ✅ Good - infer component return types when straightforward
 export const SimpleComponent = Shade<{ title: string }>({
-  shadowDomName: 'simple-component',
+  customElementName: 'simple-component',
   render: ({ props }) => {
     return <div>{props.title}</div>; // Return type inferred
   },

.github/workflows/ui-tests.yml

@@ -22,9 +22,10 @@ jobs:
         run: yarn build
       - name: Install Playwright browsers
         run: yarn playwright install --with-deps
-      - name: Seed test data
-        run: yarn seed
-      - name: Execute tests
+
+      - name: Run installer tests
+        run: yarn test:e2e:install
+      - name: Run app tests
         run: yarn test:e2e
       - uses: actions/upload-artifact@v4
         if: failure()

.gitignore

@@ -81,6 +81,7 @@ vitest.config.mjs.map
 service/data.sqlite
 service/data/
 testresults
+test-results
 
 .pnp.*
 .yarn/*

azure-pipelines.yml

@@ -34,11 +34,11 @@ steps:
   - script: yarn playwright install --with-deps
     displayName: Install Playwright browsers
 
-  - script: yarn seed
-    displayName: 'Seed test data'
+  - script: yarn test:e2e:install
+    displayName: 'E2E installer tests'
 
   - script: yarn test:e2e
-    displayName: 'E2E tests'
+    displayName: 'E2E app tests'
 
   - task: PublishTestResults@2
     displayName: Publish test results

common/package.json

@@ -25,12 +25,12 @@
     "create-schemas": "node ./dist/bin/create-schemas.js"
   },
   "devDependencies": {
-    "@types/node": "^25.3.5",
+    "@types/node": "^25.5.0",
     "ts-json-schema-generator": "^2.9.0",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.2"
   },
   "dependencies": {
-    "@furystack/core": "^15.2.4",
-    "@furystack/rest": "^8.0.42"
+    "@furystack/core": "^16.0.2",
+    "@furystack/rest": "^8.1.3"
   }
 }

e2e/helpers.ts

@@ -0,0 +1,13 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+export const login = async (page: Page, userName = 'testuser', password = 'password') => {
+  const loginForm = page.locator('shade-login form')
+  await expect(loginForm).toBeVisible({ timeout: 15000 })
+
+  await loginForm.locator('input[name="userName"]').fill(userName)
+  await loginForm.locator('input[name="password"]').fill(password)
+  await page.locator('button', { hasText: 'Sign in' }).click()
+
+  await expect(page.locator('shade-dashboard')).toBeVisible({ timeout: 10000 })
+}

e2e/installer.spec.ts

@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/test'
+
+test.describe.serial('Installer Wizard', () => {
+  test('should complete the installer wizard', async ({ page }) => {
+    await page.goto('/')
+
+    const welcomeStep = page.locator('shade-welcome-step')
+    await expect(welcomeStep).toBeVisible()
+
+    const welcomeStepNextButton = welcomeStep.locator('button', { hasText: 'Next' })
+
+    await expect(page.locator('text=Welcome to StackCraft')).toBeVisible()
+    await welcomeStepNextButton.click()
+
+    const prerequisitesStep = page.locator('shade-check-prerequisites-step')
+    await expect(page.locator('text=Prerequisites')).toBeVisible()
+    const prerequisitesStepNextButton = prerequisitesStep.locator('button', { hasText: 'Next' })
+    await prerequisitesStepNextButton.click()
+
+    const adminStep = page.locator('shade-create-admin-step')
+
+    await expect(page.locator('text=Create Admin User')).toBeVisible()
+    await page.locator('input[name="username"]').fill('testuser')
+    await page.locator('input[name="password"]').fill('password')
+
+    const adminStepNextButton = adminStep.locator('button', { hasText: 'Next' })
+    await adminStepNextButton.click()
+
+    await expect(page.locator('text=Success')).toBeVisible()
+    await page.locator('button', { hasText: 'Finish' }).click()
+  })
+
+  test('should show login page after install', async ({ page }) => {
+    await page.goto('/')
+
+    const loginForm = page.locator('shade-login form')
+    await expect(loginForm).toBeVisible()
+  })
+})