alpe-temp 1.0.1 → 1.0.2

package/frontend-project/src/components/Card.jsx

@@ -0,0 +1,104 @@
+// ═══════════════════════════════════════════════════════════════════════════
+//  🃏  CARD  —  Reusable card & stat card with config-driven styling
+// ═══════════════════════════════════════════════════════════════════════════
+//
+//  HOW TO USE:
+//    <Card title="Users" action={<Button>Add</Button>}>
+//      <p>Content goes here</p>
+//    </Card>
+//
+//    <StatCard label="Total Employees" value="150" trend="+12%" />
+//
+//  PROPS (Card):
+//    title:     card heading text
+//    subtitle:  smaller text below title
+//    action:    element to show on the right (e.g. a Button)
+//    children:  card body content
+//    className: additional CSS classes
+//
+//  PROPS (StatCard):
+//    label:     stat label
+//    value:     stat value (string or number)
+//    trend:     optional trend text (e.g. "+12%")
+//    trendUp:   whether trend is positive (true=green, false=red)
+//    loading:   show skeleton placeholder
+//    className: additional CSS classes
+//
+//  CONFIG INTEGRATION:
+//    - Background from var(--color-card)
+//    - Border from var(--color-border)
+//
+// ═══════════════════════════════════════════════════════════════════════════
+
+import React from 'react';
+import { config } from '../config';
+import { getRoundedClass } from '../design';
+
+export function Card({ title, subtitle, action, children, className = '' }) {
+  const roundClass = getRoundedClass(config.rounded);
+
+  return (
+    <div
+      className={`p-5 ${roundClass} ${className}`}
+      style={{
+        backgroundColor: 'var(--color-card)',
+        border: '1px solid var(--color-border)',
+      }}
+    >
+      {(title || action) && (
+        <div className="flex items-start justify-between mb-4">
+          <div>
+            {title && (
+              <h3 className="text-[13px] font-semibold" style={{ color: 'var(--color-text)' }}>
+                {title}
+              </h3>
+            )}
+            {subtitle && (
+              <p className="text-[11px] mt-0.5" style={{ color: 'var(--color-text-muted)' }}>
+                {subtitle}
+              </p>
+            )}
+          </div>
+          {action && <div className="flex-shrink-0">{action}</div>}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
+
+export function StatCard({ label, value, trend, trendUp = true, loading = false, className = '' }) {
+  const roundClass = getRoundedClass(config.rounded);
+
+  return (
+    <div
+      className={`p-5 flex flex-col gap-3 ${roundClass} ${className}`}
+      style={{
+        backgroundColor: 'var(--color-card)',
+        border: '1px solid var(--color-border)',
+      }}
+    >
+      <div className="flex items-center justify-between">
+        <span className="text-[12px] font-semibold uppercase tracking-wide" style={{ color: 'var(--color-text-muted)' }}>
+          {label}
+        </span>
+      </div>
+      {loading ? (
+        <div className="h-8 w-24 animate-pulse" style={{ backgroundColor: 'var(--color-border)' }} />
+      ) : (
+        <span className="text-[32px] font-bold leading-none" style={{ color: 'var(--color-text)' }}>
+          {value ?? '—'}
+        </span>
+      )}
+      {trend && (
+        <span
+          className={`text-[11px] font-semibold px-2 py-0.5 w-fit ${
+            trendUp ? 'bg-emerald-50 text-emerald-600' : 'bg-red-50 text-red-500'
+          }`}
+        >
+          {trend}
+        </span>
+      )}
+    </div>
+  );
+}

package/frontend-project/src/components/FormField.jsx

@@ -0,0 +1,129 @@
+// ═══════════════════════════════════════════════════════════════════════════
+//  📝  FORM FIELD  —  Reusable form inputs with labels & validation
+// ═══════════════════════════════════════════════════════════════════════════
+//
+//  HOW TO USE:
+//    <FormField label="Email" required error={errors.email}>
+//      <FormField.Input type="email" value={email} onChange={setEmail} />
+//    </FormField>
+//
+//    <FormField label="Role">
+//      <FormField.Select options={['admin', 'user']} value={role} onChange={setRole} />
+//    </FormField>
+//
+//    <FormField label="Bio">
+//      <FormField.Textarea value={bio} onChange={setBio} />
+//    </FormField>
+//
+//  PROPS:
+//    label:      field label text
+//    required:   show red asterisk
+//    error:      error message string
+//    children:   input element(s)
+//    className:  additional CSS classes
+//
+//  SUB-COMPONENTS:
+//    FormField.Input     →  <input>
+//    FormField.Select    →  <select>
+//    FormField.Textarea  →  <textarea>
+//
+//  CONFIG INTEGRATION:
+//    - Rounded corners from config.js → --radius CSS variable
+//    - Colors from CSS variables
+//
+// ═══════════════════════════════════════════════════════════════════════════
+
+import React from 'react';
+import { config } from '../config';
+import { getRoundedClass } from '../design';
+
+// ─── BASE INPUT STYLES ──────────────────────────────────────────────────────
+const INPUT_BASE =
+  'w-full px-3 py-2 text-[13px] font-medium ' +
+  'border transition-colors duration-150 ' +
+  'placeholder:text-gray-400 focus:outline-none focus:ring-1 ' +
+  'disabled:bg-gray-50 disabled:text-gray-400';
+
+// ─── MAIN FORM FIELD COMPONENT ──────────────────────────────────────────────
+export default function FormField({ label, required = false, error, children, className = '' }) {
+  return (
+    <div className={`flex flex-col gap-1 ${className}`}>
+      {label && (
+        <label className="text-[12px] font-semibold select-none" style={{ color: 'var(--color-text-muted)' }}>
+          {label}
+          {required && <span className="text-red-400 ml-0.5">*</span>}
+        </label>
+      )}
+      {children}
+      {error && <p className="text-[11px] text-red-500 font-medium">{error}</p>}
+    </div>
+  );
+}
+
+// ─── TEXT INPUT ──────────────────────────────────────────────────────────────
+FormField.Input = function FieldInput({ onChange, className = '', ...props }) {
+  const roundClass = getRoundedClass(config.rounded);
+  return (
+    <input
+      className={`${INPUT_BASE} ${roundClass} ${className}`}
+      style={{
+        backgroundColor: 'var(--color-card)',
+        borderColor: 'var(--color-border)',
+        color: 'var(--color-text)',
+      }}
+      onChange={(e) => onChange?.(e.target.value, e)}
+      {...props}
+    />
+  );
+};
+
+// ─── SELECT DROPDOWN ─────────────────────────────────────────────────────────
+FormField.Select = function FieldSelect({ value, onChange, options = [], placeholder, className = '', ...props }) {
+  const roundClass = getRoundedClass(config.rounded);
+  const normalised = options.map((o) =>
+    typeof o === 'string' ? { value: o, label: o } : o
+  );
+
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange?.(e.target.value, e)}
+      className={`${INPUT_BASE} ${roundClass} ${className}`}
+      style={{
+        backgroundColor: 'var(--color-card)',
+        borderColor: 'var(--color-border)',
+        color: 'var(--color-text)',
+      }}
+      {...props}
+    >
+      {placeholder && (
+        <option value="" disabled>
+          {placeholder}
+        </option>
+      )}
+      {normalised.map((o) => (
+        <option key={o.value} value={o.value}>
+          {o.label}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+// ─── TEXTAREA ────────────────────────────────────────────────────────────────
+FormField.Textarea = function FieldTextarea({ onChange, className = '', ...props }) {
+  const roundClass = getRoundedClass(config.rounded);
+  return (
+    <textarea
+      rows={3}
+      className={`${INPUT_BASE} resize-none ${roundClass} ${className}`}
+      style={{
+        backgroundColor: 'var(--color-card)',
+        borderColor: 'var(--color-border)',
+        color: 'var(--color-text)',
+      }}
+      onChange={(e) => onChange?.(e.target.value, e)}
+      {...props}
+    />
+  );
+};

package/frontend-project/src/components/Modal.jsx

@@ -0,0 +1,106 @@
+// ═══════════════════════════════════════════════════════════════════════════
+//  🪟  MODAL  —  Backdrop modal with config-driven styling
+// ═══════════════════════════════════════════════════════════════════════════
+//
+//  WHAT THIS IS:
+//    A modal dialog that appears over everything with a dark backdrop.
+//    Press Escape or click outside to close.
+//
+//  HOW TO USE:
+//    <Modal open={isOpen} onClose={() => setOpen(false)} title="Edit Item">
+//      <p>Modal content here</p>
+//      <Modal.Footer>
+//        <Button onClick={() => setOpen(false)}>Cancel</Button>
+//      </Modal.Footer>
+//    </Modal>
+//
+//  PROPS:
+//    open:      boolean (show/hide)
+//    onClose:   function to close
+//    title:     modal header text
+//    size:      'sm' | 'md' | 'lg' | 'xl' | '2xl'
+//    children:  modal body
+//    className: additional CSS classes
+//
+//  CONFIG INTEGRATION:
+//    - Rounded corners from config.js
+//    - Colors from CSS variables
+//
+// ═══════════════════════════════════════════════════════════════════════════
+
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { config } from '../config';
+import { getRoundedClass } from '../design';
+
+const SIZES = {
+  sm:  'max-w-sm',
+  md:  'max-w-md',
+  lg:  'max-w-lg',
+  xl:  'max-w-xl',
+  '2xl': 'max-w-2xl',
+};
+
+export default function Modal({ open, onClose, title, size = 'md', children, className = '' }) {
+  const roundClass = getRoundedClass(config.rounded);
+
+  // Close on Escape key
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/40 backdrop-blur-[2px]"
+        onClick={onClose}
+      />
+      {/* Modal content */}
+      <div
+        className={`relative shadow-xl w-full ${SIZES[size] ?? SIZES.md} ${roundClass} ${className}`}
+        style={{
+          backgroundColor: 'var(--color-card)',
+          border: '1px solid var(--color-border)',
+        }}
+      >
+        {title && (
+          <div className="flex items-center justify-between px-5 py-4 border-b" style={{ borderColor: 'var(--color-border)' }}>
+            <h2 className="text-[14px] font-semibold" style={{ color: 'var(--color-text)' }}>
+              {title}
+            </h2>
+            <button
+              onClick={onClose}
+              className="w-7 h-7 flex items-center justify-center transition-colors hover:opacity-70"
+              style={{ color: 'var(--color-text-muted)' }}
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        )}
+        <div className="px-5 py-4">{children}</div>
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+// ─── MODAL FOOTER ────────────────────────────────────────────────────────────
+//  Use inside <Modal> to add a footer with action buttons.
+//
+Modal.Footer = function ModalFooter({ children }) {
+  return (
+    <div
+      className="flex justify-end gap-2 pt-3 mt-2 border-t"
+      style={{ borderColor: 'var(--color-border)' }}
+    >
+      {children}
+    </div>
+  );
+};

package/frontend-project/src/components/Table.jsx

@@ -0,0 +1,127 @@
+// ═══════════════════════════════════════════════════════════════════════════
+//  📊  TABLE  —  Reusable data table with loading & empty states
+// ═══════════════════════════════════════════════════════════════════════════
+//
+//  HOW TO USE:
+//    <Table
+//      columns={[
+//        { key: 'name', label: 'Name' },
+//        { key: 'email', label: 'Email', align: 'center' },
+//        { key: 'status', label: 'Status', render: (val) => <Badge>{val}</Badge> },
+//      ]}
+//      data={users}
+//      rowKey="id"
+//    />
+//
+//  PROPS:
+//    columns:      array of { key, label, align?, render? }
+//    data:         array of row objects
+//    rowKey:       unique key per row (default: 'id')
+//    loading:      show loading skeleton
+//    emptyMessage: text when no data
+//    className:    additional CSS classes
+//    maxHeight:    max scrollable height (default: '360px')
+//
+//  CONFIG INTEGRATION:
+//    - Rounded corners from config.js
+//    - Colors from CSS variables
+//
+// ═══════════════════════════════════════════════════════════════════════════
+
+import React from 'react';
+import { config } from '../config';
+import { getRoundedClass } from '../design';
+
+export default function Table({
+  columns,
+  data = [],
+  rowKey = 'id',
+  loading = false,
+  emptyMessage = 'No data found',
+  className = '',
+  maxHeight = '360px',
+}) {
+  const ALIGN = { left: 'text-left', center: 'text-center', right: 'text-right' };
+  const roundClass = getRoundedClass(config.rounded);
+
+  return (
+    <div
+      className={`w-full overflow-auto border ${roundClass} ${className}`}
+      style={{ maxHeight, borderColor: 'var(--color-border)' }}
+    >
+      <table className="w-full min-w-max">
+        {/* ─── HEADER ──────────────────────────────────────────────────── */}
+        <thead className="sticky top-0 z-10">
+          <tr
+            className="border-b"
+            style={{
+              backgroundColor: 'var(--color-surface)',
+              borderColor: 'var(--color-border)',
+            }}
+          >
+            {columns.map((col) => (
+              <th
+                key={col.key}
+                className={`px-4 py-3 text-[11px] font-semibold uppercase tracking-wider whitespace-nowrap ${ALIGN[col.align ?? 'left']}`}
+                style={{ color: 'var(--color-text-muted)' }}
+              >
+                {col.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+
+        {/* ─── BODY ────────────────────────────────────────────────────── */}
+        <tbody className="divide-y" style={{ backgroundColor: 'var(--color-card)', borderColor: 'var(--color-border)' }}>
+          {/* Loading skeleton */}
+          {loading ? (
+            Array.from({ length: 5 }).map((_, i) => (
+              <tr key={i}>
+                {columns.map((col) => (
+                  <td key={col.key} className="px-4 py-3">
+                    <div
+                      className="h-3 animate-pulse"
+                      style={{
+                        width: `${60 + (i * 13 + col.key.length * 7) % 30}%`,
+                        backgroundColor: 'var(--color-border)',
+                      }}
+                    />
+                  </td>
+                ))}
+              </tr>
+            ))
+          ) : data.length === 0 ? (
+            // Empty state
+            <tr>
+              <td
+                colSpan={columns.length}
+                className="px-4 py-10 text-center text-[13px]"
+                style={{ color: 'var(--color-text-muted)' }}
+              >
+                {emptyMessage}
+              </td>
+            </tr>
+          ) : (
+            // Data rows
+            data.map((row, rowIdx) => (
+              <tr
+                key={row[rowKey] ?? rowIdx}
+                className="transition-colors duration-100 hover:bg-gray-50"
+              >
+                {columns.map((col) => (
+                  <td
+                    key={col.key}
+                    className={`px-4 py-3 text-[12px] font-medium whitespace-nowrap ${ALIGN[col.align ?? 'left']}`}
+                    style={{ color: 'var(--color-text)' }}
+                  >
+                    {col.render ? col.render(row[col.key], row) : (row[col.key] ?? '—')}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/frontend-project/src/components/Toast.jsx

@@ -0,0 +1,64 @@
+import React, { createContext, useCallback, useContext, useState } from 'react';
+import { CheckCircle, XCircle, Info, X } from 'lucide-react';
+
+const ToastContext = createContext(null);
+
+const ICONS = {
+  success: <CheckCircle className="w-4 h-4 text-emerald-500 flex-shrink-0" />,
+  error:   <XCircle    className="w-4 h-4 text-red-500    flex-shrink-0" />,
+  info:    <Info        className="w-4 h-4 text-blue-500   flex-shrink-0" />,
+};
+
+const BG = {
+  success: 'bg-white border-emerald-200',
+  error:   'bg-white border-red-200',
+  info:    'bg-white border-blue-200',
+};
+
+let _id = 0;
+
+export function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+
+  const add = useCallback((message, type = 'info', duration = 3500) => {
+    const id = ++_id;
+    setToasts((prev) => [...prev, { id, message, type }]);
+    setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), duration);
+    return id;
+  }, []);
+
+  const remove = useCallback((id) => setToasts((prev) => prev.filter((t) => t.id !== id)), []);
+
+  const api = {
+    success: (msg, dur) => add(msg, 'success', dur),
+    error:   (msg, dur) => add(msg, 'error',   dur),
+    info:    (msg, dur) => add(msg, 'info',     dur),
+    remove,
+  };
+
+  return (
+    <ToastContext.Provider value={api}>
+      {children}
+      <div className="fixed top-5 right-5 z-[9999] flex flex-col gap-2 pointer-events-none">
+        {toasts.map((t) => (
+          <div
+            key={t.id}
+            className={`pointer-events-auto flex items-center gap-3 px-4 py-3 border shadow-lg text-[13px] font-medium text-gray-700 min-w-[240px] max-w-xs ${BG[t.type]}`}
+          >
+            {ICONS[t.type]}
+            <span className="flex-1">{t.message}</span>
+            <button onClick={() => remove(t.id)} className="text-gray-300 hover:text-gray-500 transition-colors">
+              <X className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast must be used inside <ToastProvider>');
+  return ctx;
+}

package/frontend-project/src/components/index.js

@@ -0,0 +1,14 @@
+/**
+ * src/components/ui/index.js
+ * Barrel export for all reusable UI primitives.
+ *
+ * Usage:
+ *   import { Button, Table, Modal, FormField, Card, StatCard, ToastProvider, useToast } from '../components/ui';
+ */
+
+export { default as Button }    from './Button';
+export { default as Table }     from './Table';
+export { default as Modal }     from './Modal';
+export { default as FormField } from './FormField';
+export { Card, StatCard }       from './Card';
+export { ToastProvider, useToast } from './Toast';

package/frontend-project/src/config.js

@@ -0,0 +1,66 @@
+// ═══════════════════════════════════════════════════════════════════════════
+//  🎨  APP CONFIGURATION  —  Change ONE value to transform the whole app!
+// ═══════════════════════════════════════════════════════════════════════════
+//
+//  📖  BEGINNER GUIDE:
+//
+//    This is the ONLY file you need to touch to change the entire look
+//    and behavior of the app. Every page, component, and layout reads
+//    from this file.
+//
+//  🚀  QUICK EXAMPLES:
+//
+//    1. navigation: 'bottomnav'   →  navbar moves to the bottom (mobile style)
+//    2. theme:      'midnight'    →  dark mode, instantly
+//    3. rounded:    'none'        →  all buttons/cards become square
+//    4. fontSize:   'large'       →  bigger text everywhere
+//    5. colors.primary: '#FF0000' →  brand color changes to red
+//
+// ═══════════════════════════════════════════════════════════════════════════
+
+export const config = {
+  // ─── NAVIGATION ───────────────────────────────────────────────────────
+  //  'topnav'    →  horizontal bar at the TOP of the screen
+  //  'bottomnav' →  bar at the BOTTOM (great for mobile / app-like feel)
+  navigation: 'bottomnav',
+
+  // ─── THEME ────────────────────────────────────────────────────────────
+  //  Pick any theme name from themes.js. Available themes:
+  //    'forest'   (green - default)
+  //    'midnight' (dark)
+  //    'slate'    (blue-gray)
+  //    'rose'     (pink/crimson)
+  //    'amber'    (orange/gold)
+  //    'ocean'    (navy/cyan)
+  //    'chalk'    (black & white)
+  //    'violet'   (purple)
+  theme: 'forest',
+
+  // ─── BORDER RADIUS ────────────────────────────────────────────────────
+  //  Controls how rounded buttons, cards, inputs, and modals are.
+  //  'none'  →  completely square (sharp, modern)
+  //  'sm'    →  slightly rounded
+  //  'md'    →  moderately rounded (default feel)
+  //  'lg'    →  very rounded (pill-like)
+  //  'xl'    →  extra rounded
+  //  'full'  →  fully pill-shaped
+  rounded: 'md',
+
+  // ─── FONT SIZE ────────────────────────────────────────────────────────
+  //  'normal' →  default text size
+  //  'large'  →  bigger text (easier to read)
+  fontSize: 'normal',
+
+  // ─── COLORS ───────────────────────────────────────────────────────────
+  //  Leave empty ('') to use the theme's default colors.
+  //  Set a value to override that specific color.
+  //  Format: any valid CSS color (#hex, rgb, name)
+  colors: {
+    primary: '',       // main brand color (buttons, links, active nav)
+    // secondary: '',  // secondary accent
+    // success: '',    // success states (green)
+    // danger: '',     // error/danger states (red)
+    // warning: '',    // warning states (yellow/amber)
+    // info: '',       // info states (blue)
+  },
+};