@lego-box/shell 1.0.6 → 1.0.8

package/.krasrc

@@ -0,0 +1,13 @@
+{
+  "api": "/$api",
+  "ui": "/$manage",
+  "port": 1234,
+  "base": "/",
+  "mode": "develop",
+  "injectors": {
+    "index.html": {
+      "active": true,
+      "source": "index.html"
+    }
+  }
+}

package/README.md

@@ -1,67 +1,67 @@
-# @lego-box/shell
-
-Piral microfrontend shell providing authentication, PocketBase integration, RBAC, and shared UI components for the Lego Box ecosystem.
-
-## Installation
-
-```bash
-npm install @lego-box/shell
-# or
-pnpm add @lego-box/shell
-```
-
-## Usage
-
-### Creating a Pilet
-
-```bash
-pilet new @lego-box/shell --target my-pilet
-cd my-pilet
-pnpm install
-pnpm start
-```
-
-### Pilet Development
-
-```typescript
-import type { PiletApi } from '@lego-box/shell/pilet';
-
-export function setup(app: PiletApi) {
-  // Access authentication
-  const user = app.auth.getUser();
-  
-  // Access PocketBase
-  const records = await app.pocketbase.collection('items').getList();
-  
-  // Register protected pages
-  app.registerProtectedPage('/my-route', MyPage, {
-    action: 'read',
-    subject: 'items'
-  });
-  
-  // Register sidebar menu
-  app.registerSidebarMenu({
-    id: 'my-menu',
-    label: 'My Feature',
-    href: '/my-route',
-    action: 'read',
-    subject: 'items'
-  });
-}
-```
-
-## Shared Dependencies
-
-The shell provides these dependencies to all pilets:
-- `@lego-box/ui-kit` - Reusable UI components
-- `pocketbase` - Backend SDK
-- `piral-auth` - Authentication plugin
-- `react` & `react-dom` - UI framework
-
-## API Reference
-
-See [full documentation](link-to-docs) for complete API reference.
-
-## License
-
-MIT
+# @lego-box/shell
+
+Piral microfrontend shell providing authentication, PocketBase integration, RBAC, and shared UI components for the Lego Box ecosystem.
+
+## Installation
+
+```bash
+npm install @lego-box/shell
+# or
+pnpm add @lego-box/shell
+```
+
+## Usage
+
+### Creating a Pilet
+
+```bash
+pilet new @lego-box/shell --target my-pilet
+cd my-pilet
+pnpm install
+pnpm start
+```
+
+### Pilet Development
+
+```typescript
+import type { PiletApi } from '@lego-box/shell/pilet';
+
+export function setup(app: PiletApi) {
+  // Access authentication
+  const user = app.auth.getUser();
+  
+  // Access PocketBase
+  const records = await app.pocketbase.collection('items').getList();
+  
+  // Register protected pages
+  app.registerProtectedPage('/my-route', MyPage, {
+    action: 'read',
+    subject: 'items'
+  });
+  
+  // Register sidebar menu
+  app.registerSidebarMenu({
+    id: 'my-menu',
+    label: 'My Feature',
+    href: '/my-route',
+    action: 'read',
+    subject: 'items'
+  });
+}
+```
+
+## Shared Dependencies
+
+The shell provides these dependencies to all pilets:
+- `@lego-box/ui-kit` - Reusable UI components
+- `pocketbase` - Backend SDK
+- `piral-auth` - Authentication plugin
+- `react` & `react-dom` - UI framework
+
+## API Reference
+
+See [full documentation](link-to-docs) for complete API reference.
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lego-box/shell",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Piral microfrontend shell for Lego Box - provides authentication, PocketBase integration, RBAC, and shared UI components",
   "keywords": [
     "piral",
@@ -26,6 +26,10 @@
     "dist/emulator",
     "pilet.ts",
     "src",
+    "webpack.config.js",
+    "tailwind.config.js",
+    "postcss.config.js",
+    ".krasrc",
     "README.md"
   ],
   "main": "dist/emulator/index.js",

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/config/env.ts

@@ -67,13 +67,15 @@ function validateEnvConfig(raw: EnvConfig): EnvConfig {
   return raw;
 }
 
+/** Safe access to process.env (polyfilled by webpack when shell config is merged) */
+const _env = typeof process !== 'undefined' ? process.env : {};
+
 /**
- * Build-time env vars (injected by Webpack DefinePlugin).
- * MUST use static references only - e.g. process.env.VITE_FEED_URLS, not process.env[name].
- * Dynamic access leaves process in the bundle and throws "process is not defined" in browser.
+ * Build-time env vars (injected by Webpack DefinePlugin when shell webpack config is used).
+ * Falls back to _env when process is not polyfilled (e.g. Webpack 15 without config merge).
  */
 function parseFeedUrls(): string[] {
-  const viteRaw = process.env.VITE_FEED_URLS;
+  const viteRaw = _env.VITE_FEED_URLS;
   if (viteRaw && typeof viteRaw === 'string') {
     try {
       const parsed = JSON.parse(viteRaw) as unknown;
@@ -84,7 +86,7 @@ function parseFeedUrls(): string[] {
       /* fall through */
     }
   }
-  const feedUrl = process.env.FEED_URL;
+  const feedUrl = _env.FEED_URL;
   if (feedUrl && typeof feedUrl === 'string' && feedUrl.trim()) {
     return [feedUrl.trim()];
   }
@@ -92,11 +94,11 @@ function parseFeedUrls(): string[] {
 }
 
 const rawEnv: EnvConfig = {
-  pocketbaseUrl: process.env.VITE_POCKETBASE_URL || 'http://localhost:8090',
-  adminEmail: process.env.VITE_POCKETBASE_ADMIN_EMAIL || 'superuser@legobox.local',
-  adminPassword: process.env.VITE_POCKETBASE_ADMIN_PASSWORD || 'SuperUser123!',
-  appName: process.env.VITE_APP_NAME || 'Lego Box',
-  appIdentifier: process.env.VITE_APP_IDENTIFIER || 'lego-box-default',
+  pocketbaseUrl: _env.VITE_POCKETBASE_URL || 'http://localhost:8090',
+  adminEmail: _env.VITE_POCKETBASE_ADMIN_EMAIL || 'superuser@legobox.local',
+  adminPassword: _env.VITE_POCKETBASE_ADMIN_PASSWORD || 'SuperUser123!',
+  appName: _env.VITE_APP_NAME || 'Lego Box',
+  appIdentifier: _env.VITE_APP_IDENTIFIER || 'lego-box-default',
   feedUrls: parseFeedUrls(),
 };
 

package/src/services/telemetry.ts

@@ -1,12 +1,59 @@
 /**
  * Telemetry Service
- * 
+ *
  * Handles tracking of user activities.
  * Integrates with PocketBase for data storage.
  */
 
 import PocketBase from 'pocketbase';
 
+/** Generate a unique session ID */
+export function generateSessionId(): string {
+  return `session_${Date.now()}_${Math.random().toString(36).slice(2, 11)}`;
+}
+
+/**
+ * Start a user session (track session start in PocketBase if collection exists)
+ */
+export async function startUserSession(
+  pocketbase: PocketBase,
+  userId: string,
+  sessionId: string,
+  meta?: { userAgent?: string }
+): Promise<void> {
+  try {
+    await pocketbase.collection('user_sessions').create({
+      user_id: userId,
+      session_id: sessionId,
+      started_at: new Date().toISOString(),
+      user_agent: meta?.userAgent,
+    });
+  } catch {
+    // Collection may not exist yet - ignore
+  }
+}
+
+/**
+ * End a user session (update session end time in PocketBase if collection exists)
+ */
+export async function endUserSession(
+  pocketbase: PocketBase,
+  sessionId: string
+): Promise<void> {
+  try {
+    const records = await pocketbase.collection('user_sessions').getList(1, 1, {
+      filter: `session_id="${sessionId}"`,
+    });
+    if (records.items.length > 0) {
+      await pocketbase.collection('user_sessions').update(records.items[0].id, {
+        ended_at: new Date().toISOString(),
+      });
+    }
+  } catch {
+    // Collection may not exist yet - ignore
+  }
+}
+
 /**
  * Track a user login event
  */

package/tailwind.config.js

@@ -0,0 +1,86 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  content: [
+    './src/**/*.{ts,tsx}',
+    '../ui-kit/src/**/*.{ts,tsx}',
+    '../ui-kit/dist/**/*.js',
+    '../ui-kit/dist/**/*.mjs',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        success: {
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))',
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+      },
+      boxShadow: {
+        'premium-glow': '0 0 20px rgba(99, 102, 241, 0.15)',
+        'premium-glow-lg': '0 0 40px rgba(99, 102, 241, 0.2)',
+        elevated: '0 8px 30px rgba(37, 37, 64, 0.6)',
+      },
+      animation: {
+        shimmer: 'shimmer 2.5s linear infinite',
+        'fade-in': 'fade-in 0.3s ease-out',
+        'slide-up': 'slide-up 0.4s ease-out',
+      },
+      keyframes: {
+        shimmer: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(100%)' },
+        },
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        'slide-up': {
+          '0%': { transform: 'translateY(10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+};

package/webpack.config.js

@@ -0,0 +1,89 @@
+/**
+ * Force the shell to use global React (window.React / window.ReactDOM) from index.html script tags
+ * so pilets and shell share a single React instance and avoid "dispatcher is null" / Rules of Hooks.
+ */
+const path = require('path');
+const webpack = require('webpack');
+const postcss = require('postcss');
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+// Load .env - from monorepo root when in workspace, or from pilet root when used as dependency
+const envPath = path.resolve(process.cwd(), '.env');
+require('dotenv').config({ path: envPath });
+require('dotenv').config({ path: path.resolve(__dirname, '../../.env') });
+
+module.exports = function (config) {
+  // Polyfill process for browser (avoids "process is not defined" from deps or dynamic access)
+  config.resolve = config.resolve || {};
+  config.resolve.fallback = {
+    ...config.resolve.fallback,
+    process: require.resolve('process/browser'),
+  };
+
+  const prev = config.externals;
+  const globalExternals = {
+    react: 'root React',
+    'react-dom': 'root ReactDOM',
+    'react-dom/client': 'root ReactDOM',
+  };
+  if (Array.isArray(prev)) {
+    const withoutGlobal = prev.filter(
+      (e) => typeof e !== 'object' || (e && typeof e === 'object' && !('react' in e) && !('react-dom' in e))
+    );
+    config.externals = [...withoutGlobal, globalExternals];
+  } else if (prev && typeof prev === 'object' && !Array.isArray(prev)) {
+    config.externals = { ...prev, ...globalExternals };
+  } else {
+    config.externals = globalExternals;
+  }
+
+  // Inject environment variables via DefinePlugin (avoids "process is not defined" in browser)
+  const definePlugin = new webpack.DefinePlugin({
+    'process.env.VITE_POCKETBASE_URL': JSON.stringify(process.env.VITE_POCKETBASE_URL || 'http://localhost:8090'),
+    'process.env.VITE_POCKETBASE_ADMIN_EMAIL': JSON.stringify(process.env.VITE_POCKETBASE_ADMIN_EMAIL || 'superuser@legobox.local'),
+    'process.env.VITE_POCKETBASE_ADMIN_PASSWORD': JSON.stringify(process.env.VITE_POCKETBASE_ADMIN_PASSWORD || 'SuperUser123!'),
+    'process.env.VITE_APP_NAME': JSON.stringify(process.env.VITE_APP_NAME || 'Lego Box'),
+    'process.env.VITE_APP_IDENTIFIER': JSON.stringify(process.env.VITE_APP_IDENTIFIER || 'lego-box-default'),
+    'process.env.VITE_FEED_URLS': JSON.stringify(process.env.VITE_FEED_URLS || '["http://localhost:9000/$pilet-api"]'),
+    'process.env.FEED_URL': JSON.stringify(process.env.FEED_URL || ''),
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+  });
+  if (!config.plugins) config.plugins = [];
+  config.plugins.push(definePlugin);
+
+  // Ensure PostCSS processes CSS files (for Tailwind)
+  if (config.module && config.module.rules) {
+    config.module.rules.forEach((rule) => {
+      if (rule.oneOf) {
+        rule.oneOf.forEach((subRule) => {
+          if (subRule.use && Array.isArray(subRule.use)) {
+            subRule.use.forEach((useRule) => {
+              if (useRule.loader && useRule.loader.includes('css-loader')) {
+                // Add PostCSS processing before CSS loader
+                const postcssLoader = {
+                  loader: 'postcss-loader',
+                  options: {
+                    postcssOptions: {
+                      plugins: [
+                        tailwindcss(),
+                        autoprefixer(),
+                      ],
+                    },
+                  },
+                };
+                // Insert postcss-loader before css-loader
+                const idx = subRule.use.indexOf(useRule);
+                if (idx > -1) {
+                  subRule.use.splice(idx, 0, postcssLoader);
+                }
+              }
+            });
+          }
+        });
+      }
+    });
+  }
+
+  return config;
+};