chore: upgrade dependencies, restructure shared libs, and fix UI

- Upgrade Nx 22.1.1 → 22.6.3 and all patch/minor dependencies - Restructure shared libs: move business logic from utils to service - Consolidate shadcn-ui into ui lib with atomic design pattern - Fix container centering for landing app (Tailwind v4 compatibility) - Fix button styling by updating @source directive in globals.css - Fix SiCss3 → SiCss rename in react-icons 5.6 - Fix duplicate useSession export conflict - Remove dead code, comments, and unused files Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-31 01:44:17 +07:00
parent f68d97188c
commit 3f4461c65c
231 changed files with 6062 additions and 39166 deletions
@@ -1 +0,0 @@
-Tue, Nov 25, 2025  4:21:27 PM
@@ -1,2 +0,0 @@
-# Deployment trigger
-# Updated to deploy circular dependency fixes and auth hooks
@@ -4,7 +4,7 @@ import { motion } from 'framer-motion';
 import { useEffect, useMemo, useState } from 'react';
 import {
  SiCplusplus,
-  SiCss3,
+  SiCss,
  SiGo,
  SiHtml5,
  SiJavascript,
@@ -35,7 +35,7 @@ export function AnimatedBackground() {
      { Icon: SiGo, color: '#00ADD8' },
      { Icon: SiPhp, color: '#777BB4' },
      { Icon: SiHtml5, color: '#E34F26' },
-      { Icon: SiCss3, color: '#1572B6' },
+      { Icon: SiCss, color: '#1572B6' },
    ],
    []
  );
@@ -11,7 +11,7 @@ export function CTASection() {

  return (
    <section className="w-full py-20 md:py-32 bg-gradient-to-br from-primary-500 to-primary-600 relative overflow-hidden">
-      {/* Background pattern */}
+
      <div
        className="absolute inset-0 opacity-10"
        style={{
@@ -21,7 +21,7 @@ export function CTASection() {

      <div className="container relative" ref={ref}>
        <div className="flex flex-col lg:flex-row items-center justify-between gap-12">
-          {/* Text Content */}
+
          <div className="flex-1 text-center lg:text-left space-y-8">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
@@ -65,7 +65,6 @@ export function CTASection() {
            </motion.div>
          </div>

-          {/* Illustration */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
@@ -26,7 +26,7 @@ export function HeroSection() {

  return (
    <section className="relative w-full py-20 md:py-32 lg:py-40 overflow-hidden">
-      {/* Background gradients and motion */}
+
      <div className="absolute inset-0 -z-10 overflow-hidden">
        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background to-background/50" />
        <div
@@ -39,7 +39,7 @@ export default function EventsPage() {
  return (
    <section className="min-h-screen bg-background container py-10">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-        {/* Featured Card */}
+
        <div className="col-span-full">
          <div className="rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden bg-card">
            <div className="grid md:grid-cols-2">
@@ -119,7 +119,6 @@ export default function EventsPage() {
          </div>
        </div>

-        {/* Regular Cards */}
        {sortedEvents.slice(1).map((event) => (
          <div
            key={event.name}
@@ -79,7 +79,7 @@ export default function ProjectsVote() {

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
-      {/* Vote Now Column */}
+
      <div className="space-y-6">
        <div className="flex items-center gap-3 px-2">
          <div className="flex items-center justify-center w-10 h-10 bg-amber-100 text-amber-600 rounded-lg">
@@ -144,7 +144,6 @@ export default function ProjectsVote() {
        </AnimatePresence>
      </div>

-      {/* In Progress Column */}
      <div className="space-y-6">
        <div className="flex items-center gap-3 px-2">
          <div className="flex items-center justify-center w-10 h-10 bg-primary-100 text-primary-600 rounded-lg">
@@ -189,7 +188,6 @@ export default function ProjectsVote() {
        </AnimatePresence>
      </div>

-      {/* Completed Column */}
      <div className="space-y-6">
        <div className="flex items-center gap-3 px-2">
          <div className="flex items-center justify-center w-10 h-10 bg-green-100 text-green-600 rounded-lg">
@@ -3,7 +3,6 @@
 import { useEffect, useState } from 'react';

 export function useMediaQuery(query: string): boolean {
-  // 1) Always default to `false`—this guarantees SSR and the very first client render match.
  const [matches, setMatches] = useState(false);

  useEffect(() => {
@@ -13,10 +12,8 @@ export function useMediaQuery(query: string): boolean {

    const mediaQueryList = window.matchMedia(query);

-    // 2) On mount, immediately set to the real match value (true or false).
    setMatches(mediaQueryList.matches);

-    // 3) Subscribe to changes.
    const listener = (event: MediaQueryListEvent) => {
      setMatches(event.matches);
    };
@@ -5,7 +5,6 @@ export async function getRemoteIp() {
  const xff = hdrs.get('x-forwarded-for');
  if (!xff) return undefined;

-  // 'x-forwarded-for' can be a comma-separated list of IPs
  const ips = xff.split(',').map((ip) => ip.trim());
  return ips[0] || undefined;
 }
@@ -1,3 +1,129 @@
@import 'tailwindcss';
-@import "../../../../libs/shadcn-ui/src/index.css";
-@source "../../../../libs/shadcn-ui/src/atoms/**/*.{ts,tsx}";
+@import 'tw-animate-css';
+@source "../../../../libs/ui/src/**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+.container {
+  margin-inline: auto;
+}
+
+@theme inline {
+  --color-primary-50: #f0f8ff;
+  --color-primary-100: #e1f0fd;
+  --color-primary-200: #bce1fb;
+  --color-primary-300: #81cbf8;
+  --color-primary-400: #3eb0f2;
+  --color-primary-500: #23a1eb;
+  --color-primary-600: #0877c1;
+  --color-primary-700: #085f9c;
+  --color-primary-800: #0b5181;
+  --color-primary-900: #0f446b;
+  --color-primary-950: #0a2b47;
+
+  --color-neutral-50: #f6f6f6;
+  --color-neutral-100: #e7e7e7;
+  --color-neutral-200: #d1d1d1;
+  --color-neutral-300: #b0b0b0;
+  --color-neutral-400: #888888;
+  --color-neutral-500: #6d6d6d;
+  --color-neutral-600: #5d5d5d;
+  --color-neutral-700: #4f4f4f;
+  --color-neutral-800: #454545;
+  --color-neutral-900: #3d3d3d;
+  --color-neutral-950: #2b2b2b;
+
+  --color-success-100: #e0fbd8;
+  --color-success-200: #bcf8b0;
+  --color-success-300: #8eea85;
+  --color-success-400: #63d564;
+  --color-success-500: #35ba43;
+  --color-success-600: #269f3e;
+  --color-success-700: #1a8439;
+  --color-success-800: #106b32;
+  --color-success-900: #0b592f;
+
+  --color-info-100: #ccfcfe;
+  --color-info-200: #9bf3fd;
+  --color-info-300: #67e3fb;
+  --color-info-400: #42cdf8;
+  --color-info-500: #04acf3;
+  --color-info-600: #0185d0;
+  --color-info-700: #0264af;
+  --color-info-800: #01478d;
+  --color-info-900: #003375;
+
+  --color-warning-100: #fffcd3;
+  --color-warning-200: #fffaa9;
+  --color-warning-300: #fff67d;
+  --color-warning-400: #fff25d;
+  --color-warning-500: #ffed27;
+  --color-warning-600: #dbc91d;
+  --color-warning-700: #b7a714;
+  --color-warning-800: #93850b;
+  --color-warning-900: #7a6d07;
+
+  --color-danger-100: #ffe8da;
+  --color-danger-200: #ffcbb3;
+  --color-danger-300: #ffaa8d;
+  --color-danger-400: #ff8870;
+  --color-danger-500: #ff5242;
+  --color-danger-600: #da3030;
+  --color-danger-700: #b7212d;
+  --color-danger-800: #93152a;
+  --color-danger-900: #7a0c27;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
+
+:root {
+  --radius: 1rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.623 0.214 259.815);
+  --primary-foreground: oklch(0.97 0.014 254.604);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.623 0.214 259.815);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
@@ -23,10 +23,15 @@
    ],
    "baseUrl": ".",
    "paths": {
-      "@components": ["../../libs/shadcn-ui/src/atoms/index.ts"],
-      "@utils": ["../../libs/shadcn-ui/src/lib/index.ts"],
+      "@components": ["../../libs/ui/src/atoms/index.ts"],
+      "@utils": ["../../libs/utils/src/tailwind-merge/index.ts"],
      "@schemas": ["../../libs/service/src/schemas/index.ts"],
-      "@/*": ["src/*"]
+      "@/*": ["src/*"],
+      "@imphnen-frontend-service/service": ["../../libs/service/src/index.ts"],
+      "@imphnen-frontend-service/ui/atoms": ["../../libs/ui/src/atoms/index.ts"],
+      "@imphnen-frontend-service/ui/molecules": ["../../libs/ui/src/molecules/index.ts"],
+      "@imphnen-frontend-service/ui/organisms": ["../../libs/ui/src/organisms/index.ts"],
+      "@imphnen-frontend-service/utils": ["../../libs/utils/src/index.ts"]
    }
  },
  "include": [