feat: integrate AG Grid with Mantine theme and add showcase component

2026-07-20 11:48:47 +07:00
parent 853769b1f8
commit d089c40707
10 changed files with 577 additions and 5 deletions
@@ -0,0 +1,95 @@
+import { themeQuartz, colorSchemeVariable } from 'ag-grid-community';
+
+/**
+ * AG Grid theme built on **Quartz** that inherits 100% of its visual
+ * identity from Mantine CSS custom properties.
+ *
+ * ┌─────────────────────────────────────────────────────────────────┐
+ * │  DESIGN PRINCIPLE — "Single door" theming                       │
+ * │                                                                 │
+ * │  Every color, font, radius and spacing value below is a         │
+ * │  `var(--mantine-*)` reference, never a hardcoded hex/rgb.       │
+ * │  Changing the Mantine theme (brand color, dark palette, font)   │
+ * │  automatically propagates into AG Grid with zero extra work.    │
+ * └─────────────────────────────────────────────────────────────────┘
+ *
+ * How dark/light mode works:
+ * - `colorSchemeVariable` reads the `data-ag-theme-mode` attribute
+ *   from a parent element (set by `<AgGridProvider>`).
+ * - Light-mode params are the defaults; dark-mode overrides are
+ *   passed via `.withParams({…}, 'dark')`.
+ * - Mantine itself swaps the values behind `--mantine-color-body`,
+ *   `--mantine-color-text`, etc., so the grid follows automatically.
+ */
+export const agGridMantineTheme = themeQuartz
+  .withPart(colorSchemeVariable)
+
+  /* ═══════════════════════════════════════════════════════════════
+   *  LIGHT MODE (default)
+   * ═══════════════════════════════════════════════════════════════ */
+  .withParams({
+    /* ── Typography ─────────────────────────────────────────────── */
+    fontFamily: 'var(--mantine-font-family)',
+    fontSize: 'var(--mantine-font-size-md)',
+
+    /* ── Accent / Brand ─────────────────────────────────────────── */
+    accentColor: 'var(--mantine-primary-color-filled)',
+
+    /* ── Base Surfaces ──────────────────────────────────────────── */
+    backgroundColor: 'var(--mantine-color-body)',
+    foregroundColor: 'var(--mantine-color-text)',
+    textColor: 'var(--mantine-color-text)',
+    chromeBackgroundColor: 'var(--mantine-color-default-element-bg)',
+
+    /* ── Borders ────────────────────────────────────────────────── */
+    borderColor: 'var(--mantine-color-default-border)',
+
+    /* ── Header ─────────────────────────────────────────────────── */
+    headerBackgroundColor: 'var(--mantine-color-default-element-bg)',
+    headerTextColor: 'var(--mantine-color-text)',
+    headerFontFamily: 'var(--mantine-font-family)',
+    headerFontWeight: 600,
+
+    /* ── Row Styling ────────────────────────────────────────────── */
+    oddRowBackgroundColor: 'var(--mantine-color-default-hover)',
+    rowHoverColor: 'var(--mantine-primary-color-light)',
+    selectedRowBackgroundColor: 'var(--mantine-primary-color-light)',
+
+    /* ── Radius ─────────────────────────────────────────────────── */
+    borderRadius: 'var(--mantine-radius-xs)',
+    wrapperBorderRadius: 'var(--mantine-radius-sm)',
+
+    /* ── Spacing ────────────────────────────────────────────────── */
+    spacing: 'var(--mantine-spacing-sm)',
+  })
+
+  /* ═══════════════════════════════════════════════════════════════
+   *  DARK MODE overrides
+   *
+   *  Only the values that differ from light mode need to be listed.
+   *  Most `--mantine-color-*` vars already swap values in dark mode,
+   *  but surface/border vars often need explicit dark palette refs.
+   * ═══════════════════════════════════════════════════════════════ */
+  .withParams(
+    {
+      /* ── Base Surfaces ────────────────────────────────────────── */
+      backgroundColor: 'var(--mantine-color-dark-7)',
+      foregroundColor: 'var(--mantine-color-dark-0)',
+      textColor: 'var(--mantine-color-dark-0)',
+      chromeBackgroundColor: 'var(--mantine-color-dark-6)',
+
+      /* ── Borders ──────────────────────────────────────────────── */
+      borderColor: 'var(--mantine-color-dark-4)',
+
+      /* ── Header ───────────────────────────────────────────────── */
+      headerBackgroundColor: 'var(--mantine-color-dark-6)',
+      headerTextColor: 'var(--mantine-color-dark-0)',
+
+      /* ── Row Styling ──────────────────────────────────────────── */
+      oddRowBackgroundColor: 'var(--mantine-color-dark-6)',
+      rowHoverColor: 'color-mix(in srgb, var(--mantine-primary-color-filled) 12%, transparent)',
+      selectedRowBackgroundColor:
+        'color-mix(in srgb, var(--mantine-primary-color-filled) 18%, transparent)',
+    },
+    'dark',
+  );