customer-module-frontend 1.0.1-beta.1

package/tailwind.config.js

@@ -0,0 +1,179 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        'hanken': ['"Hanken Grotesk"', 'sans-serif'],
+      },
+      fontSize: {
+        'body-small': ['14px', {
+          lineHeight: '20px',
+          fontWeight: '400',
+        }],
+        'body-medium': ['16px', {
+          lineHeight: '24px',
+          fontWeight: '500',
+        }],
+        'label-medium': ['16px', {
+          lineHeight: '24px',
+          fontWeight: '500',
+        }],
+        /* Label/Small */
+        'label-small': ['14px', {
+          lineHeight: '20px',
+          fontWeight: '500',
+        }],
+      },
+      borderRadius: {
+        'base': '0.375rem', // 6px
+      },
+      boxShadow: {
+        'xs': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+      },
+      colors: {
+        slate: {
+          surface: {
+            white: '#FFFFFF',
+            subtle: '#F8FAFC',
+            subtle_100: '#F1F5F9',
+            subtle_150: '#EDF1F6',
+            subtle_200: '#E2E8F0',
+            subtle_300: '#CBD5E1',
+            default: '#94A3B8',
+            dark_500: '#64758B',
+            dark_600: '#475569',
+            darkest: '#334155',
+            disabled: '#E2E8F0',
+          },
+          border: {
+            default: '#94A3B8',
+            light: '#E2E8F0',
+            mild: '#EDF1F6',
+            dark: '#64758B',
+          },
+          text: {
+            title: '#0F172A',
+            body: '#334155',
+            subtle: '#64758B',
+            caption: '#CBD5E1',
+            disabled: '#94A3B8',
+          },
+          icons: {
+            active: '#334155',
+            subtle: '#64758B',
+            disabled: '#94A3B8',
+          }
+        },
+        primary: {
+          surface: {
+            default: '#276CF0',
+            subtle: '#E6EFFD',
+            dark: '#0C3E9D',
+            'mild-dark': '#0F53D2',
+            lighter: '#7EA8F6',
+          },
+          border: {
+            subtle: '#D4E2FC',
+            lighter: '#A9C5F9',
+            default: '#276CF0',
+            dark: '#0C3E9D',
+          },
+          text: {
+            default: '#0C3E9D',
+            label: '#0C3E9D',
+          },
+        },
+        success: {
+          surface: {
+            subtle: '#D3F4E1',
+          },
+          border: {
+            default: '#4AD387',
+          },
+          text: {
+            body: '#1B6F41',
+          },
+        },
+        blue: {
+          surface: {
+            subtle: '#E6EFFD',
+          },
+          border: {
+            light: '#A9C5F9',
+          },
+        },
+        'pastel-yellow': {
+          surface: {
+            subtle: '#FAF5D6',
+          },
+          text: {
+            title: '#5F540E',
+          },
+        },
+        // Primary colors
+        'primary-blue': '#007bff',
+        'primary-blue-dark': '#0056b3',
+        'primary-blue-light': '#66b3ff',
+        // Secondary colors
+        'secondary-green': '#28a745',
+        'secondary-green-dark': '#1e7e34',
+        'secondary-green-light': '#71dd8a',
+        // Accent colors
+        'accent-orange': '#fd7e14',
+        'accent-purple': '#6f42c1',
+        'accent-teal': '#20c997',
+        // Neutral grays
+        'gray-1': '#f8f9fa',
+        'gray-2': '#e9ecef',
+        'gray-3': '#dee2e6',
+        'gray-4': '#ced4da',
+        'gray-5': '#adb5bd',
+        'gray-6': '#6c757d',
+        'gray-7': '#495057',
+        'gray-8': '#343a40',
+        'gray-9': '#212529',
+        // Status colors
+        'success': '#28a745',
+        'warning': '#ffc107',
+        'error': '#dc3545',
+        'info': '#17a2b8',
+        // Background colors
+        'bg-primary': '#ffffff',
+        'bg-secondary': '#f8f9fa',
+        'bg-tertiary': '#e9ecef',
+        // Text colors
+        'text-primary': '#212529',
+        'text-secondary': '#6c757d',
+        'text-muted': '#adb5bd',
+        // Border colors
+        'border-light': '#dee2e6',
+        'border-medium': '#ced4da',
+        'border-dark': '#adb5bd',
+        // Pro plan dark background (charcoal)
+        'pro-bg': '#2d3748',
+        'pro-bg-light': '#374151',
+        // New colors from design
+        'banner-bg': '#D4E2FC',
+        'banner-text': '#0C3E9D',
+        'banner-icon-bg': '#2563eb',
+        'toggle-inactive': '#94A3B8',
+        'toggle-active': '#276CF0',
+        'savings-bg': '#d1fae5',
+        'savings-text': '#059669',
+        'card-border': '#e5e7eb',
+        'card-hover-border': '#d1d5db',
+        'plan-highlighted-bg': '#475569',
+        // Google blue for buttons
+        'google-blue': '#4285f4',
+        'google-blue-hover': '#3367d6',
+        'google-blue-active': '#2d5aa0',
+      },
+    },
+  },
+  plugins: [],
+}
+

package/tsconfig.app.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"],
+      "@assets/*": ["src/assets/*"]
+    }
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig, loadEnv } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+  
+  // Check for UI_FRAMEWORK env var, default to 'primereact'
+  const uiFramework = (env.UI_FRAMEWORK || 'primereact') as 'hui' | 'primereact'
+    
+  return {
+    plugins: [react()],
+    resolve: {
+      dedupe: ["react", "react-dom"],
+      conditions: [uiFramework, 'import', 'module', 'browser', 'default'],
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+        '@components': path.resolve(__dirname, 'src/components'),
+        '@assets': path.resolve(__dirname, 'src/assets'),
+        'hiver-ui-kit-extended/dist/hiver-ui-kit-extended.css': path.resolve(
+          __dirname,
+          'node_modules/hiver-ui-kit-extended/dist/hiver-ui-kit-extended.css'
+        ),
+      },
+    },
+  }
+})