Synkronus portal UI

.github/workflows/synkronus-portal-docker.yml

@@ -82,7 +82,7 @@ jobs:
         id: build
         uses: docker/build-push-action@v5
         with:
-          context: ./synkronus-portal
+          context: .
           file: ./synkronus-portal/Dockerfile
           platforms: linux/amd64
           push: ${{ github.event_name != 'pull_request' }}

packages/components/src/react-web/Badge.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { BadgeProps } from '../shared/types';
+import type { BadgeProps } from '../shared/types';
 import tokensJson from '@ode/tokens/dist/json/tokens.json';
 
 const tokens = tokensJson as any;

packages/components/src/react-web/Button.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useState, useMemo } from 'react';
-import { ButtonProps, ButtonVariant, ButtonPosition } from '../shared/types';
+import type { ButtonProps, ButtonVariant } from '../shared/types';
 import { getOppositeVariant, getFadeDirection } from '../shared/utils';
 import tokensJson from '@ode/tokens/dist/json/tokens.json';
 
@@ -95,17 +95,6 @@ const Button: React.FC<WebButtonProps> = ({
   const padding = paddingMap[size];
   const fontSize = fontSizeMap[size];
 
-  // Create gradient mask for fading border effect
-  const createFadeMask = () => {
-    if (fadeDirection === 'right') {
-      // Fade on right end - gradient from opaque to transparent
-      return `linear-gradient(to right, black 0%, black 85%, transparent 100%)`;
-    } else {
-      // Fade on left end - gradient from transparent to opaque
-      return `linear-gradient(to right, transparent 0%, black 15%, black 100%)`;
-    }
-  };
-
   const buttonStyle: React.CSSProperties = {
     position: 'relative',
     padding: `${padding.vertical} ${padding.horizontal}`,

packages/components/src/react-web/ButtonGroup.tsx

@@ -5,9 +5,8 @@
  */
 
 import React from 'react';
-import Button from './Button';
-import { ButtonVariant } from '../shared/types';
-import { ButtonProps } from '../shared/types';
+import type { ButtonVariant } from '../shared/types';
+import type { ButtonProps } from '../shared/types';
 
 interface WebButtonProps extends ButtonProps {
   isPaired?: boolean;

packages/components/src/react-web/Card.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { CardProps } from '../shared/types';
+import type { CardProps } from '../shared/types';
 import tokensJson from '@ode/tokens/dist/json/tokens.json';
 
 const tokens = tokensJson as any;

packages/components/src/react-web/Input.tsx

@@ -4,8 +4,8 @@
  * Modern minimalist input with clean styling and error states
  */
 
-import React, { useState, useRef, useEffect } from 'react';
-import { InputProps } from '../shared/types';
+import React, { useState, useRef } from 'react';
+import type { InputProps } from '../shared/types';
 import tokensJson from '@ode/tokens/dist/json/tokens.json';
 
 const tokens = tokensJson as any;
@@ -33,16 +33,10 @@ const Input: React.FC<InputProps> = ({
   testID,
 }) => {
   const [isFocused, setIsFocused] = useState(false);
-  const [hasValue, setHasValue] = useState(!!value);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
-    setHasValue(!!value);
-  }, [value]);
-
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
-    setHasValue(!!newValue);
     if (onChangeText) {
       onChangeText(newValue);
     }

packages/components/src/shared/utils.ts

@@ -4,7 +4,7 @@
  * Platform-agnostic utility functions
  */
 
-import { ButtonVariant, ButtonPosition, ThemeMode } from './types';
+import type { ButtonVariant, ButtonPosition, ThemeMode } from './types';
 
 /**
  * Get the opposite button variant for paired buttons
@@ -26,7 +26,7 @@ export function getOppositeVariant(variant: ButtonVariant): ButtonVariant {
  * Get text color for button based on variant and mode
  */
 export function getButtonTextColor(
-  variant: ButtonVariant,
+  _variant: ButtonVariant,
   isHovered: boolean,
   mode: ThemeMode = 'light'
 ): string {

packages/components/tsconfig.json

@@ -19,5 +19,5 @@
     "noEmit": false
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "src/react-native"]
 }

synkronus-portal/Dockerfile

@@ -4,23 +4,56 @@ FROM node:20-alpine AS builder
 
 WORKDIR /app
 
-# Copy package files
-COPY package*.json ./
+# Copy package files for all packages (monorepo structure)
+# Copy tokens package (with package-lock.json and config file needed for prepare script)
+COPY packages/tokens/package*.json ./packages/tokens/
+COPY packages/tokens/package-lock.json ./packages/tokens/
+COPY packages/tokens/style-dictionary.config.js ./packages/tokens/
+COPY packages/tokens/config.json ./packages/tokens/
+COPY packages/tokens/src ./packages/tokens/src
+# Copy components package  
+COPY packages/components/package*.json ./packages/components/
+# Copy portal package (with package-lock.json)
+COPY synkronus-portal/package*.json ./synkronus-portal/
+COPY synkronus-portal/package-lock.json ./synkronus-portal/
 
-# Install dependencies
+# Install dependencies for tokens (needed by components)
+# The prepare script will build tokens during npm ci
+WORKDIR /app/packages/tokens
 RUN npm ci
 
-# Copy source code
-COPY . .
+# Install dependencies for components (needed by portal)
+# Note: components doesn't have package-lock.json, so use npm install
+WORKDIR /app/packages/components
+RUN npm install
 
-# Build the application
+# Install dependencies for portal
+WORKDIR /app/synkronus-portal
+RUN npm ci
+
+# Copy source code for all packages
+WORKDIR /app
+COPY packages/tokens ./packages/tokens
+COPY packages/components ./packages/components
+COPY synkronus-portal ./synkronus-portal
+
+# Build tokens first (if needed)
+WORKDIR /app/packages/tokens
+RUN npm run build || true
+
+# Build components (if needed)
+WORKDIR /app/packages/components
+RUN npm run build || true
+
+# Build the portal application
+WORKDIR /app/synkronus-portal
 RUN npm run build
 
 # Stage 2: Serve with nginx
 FROM nginx:alpine
 
 # Copy built assets from builder
-COPY --from=builder /app/dist /usr/share/nginx/html
+COPY --from=builder /app/synkronus-portal/dist /usr/share/nginx/html
 
 # Copy custom nginx configuration for SPA routing
 # Backend API: http://demo.synkronus.cloud (remote demo server)

synkronus-portal/package.json

@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ode/components": "file:../packages/components",
+    "@ode/tokens": "file:../packages/tokens",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

synkronus-portal/src/App.css

@@ -1 +1 @@
-/* App-specific styles */
+/* App-specific styles - ensure styles are loaded */