Statamic 6 + Vue 3 update & Statamic UI refactor

Author: kevinmeijer97

composer.json

@@ -13,11 +13,11 @@
     "require": {
         "php": "^8.4|^8.5",
         "laravel/framework": "^12.0",
-        "statamic/cms": "^5.0"
+        "statamic/cms": "^6.0"
     },
     "require-dev": {
         "larastan/larastan": "^3.4",
-        "laravel/pint": "^1.22",
+        "laravel/pint": "^1.29",
         "orchestra/testbench": "^10.3",
         "pestphp/pest": "^3.7",
         "phpstan/phpstan-mockery": "^2.0",

package.json

@@ -4,13 +4,17 @@
         "dev": "vite",
         "build": "vite build"
     },
+    "dependencies": {
+        "@statamic/cms": "file:./vendor/statamic/cms/resources/dist-package",
+        "@tailwindcss/vite": "^4.1.18",
+        "tailwindcss": "^4.1.18",
+        "vue": "^3.5.23"
+    },
     "devDependencies": {
-        "@vitejs/plugin-vue2": "^2.2.0",
-        "laravel-vite-plugin": "^0.7.2",
+        "@vitejs/plugin-vue": "^6.0.1",
+        "laravel-vite-plugin": "^1.3.0",
+        "vite": "^6.4.1",
         "postcss": "^8.4.41",
-        "tailwindcss": "^3.4.10",
-        "vite": "^4.0.0",
-        "vue": "^2.6.11",
-        "vuedraggable": "^2.24.3"
+        "vuedraggable": "^4.0.1"
     }
 }

postcss.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-    plugins: {
-        tailwindcss: {}
-    },
+    plugins: {},
 };

resources/css/statamic-structured-data.css

@@ -1,55 +1,11 @@
+@import "@statamic/cms/tailwind.css";
+
 .structured-data-builder,
 .structured-data-object {
     @apply max-w-full;
 }
 
-.structured-data-builder .card,
-.structured-data-object .card {
-    @apply bg-white rounded shadow-sm;
-}
-
-.structured-data-builder .input-text,
-.structured-data-object .input-text {
-    @apply w-full px-2 py-1 border rounded;
-}
-
-.structured-data-builder .select-input,
-.structured-data-object .select-input {
-    @apply w-full px-2 py-1 border rounded;
-}
-
-.structured-data-builder .btn,
-.structured-data-object .btn {
-    @apply bg-gray-200 px-3 py-1 rounded hover:bg-gray-300;
-}
-
-.structured-data-builder .btn-close,
-.structured-data-object .btn-close {
-    @apply px-2 py-1 text-gray-500 hover:text-gray-700;
-}
-
 .structured-data-builder pre,
 .structured-data-object pre {
     @apply font-mono text-sm;
-}
-
-.structured-data-preview-code {
-    @apply bg-gray-100 dark:bg-gray-800;
-}
-
-.structured-data-schema {
-    @apply bg-white dark:bg-transparent;
-}
-
-.structured-data-schema-field-header {
-    @apply bg-gray-100 dark:bg-transparent;
-}
-
-.structured-data-variables-list {
-    @apply bg-white dark:bg-transparent;
-}
-
-.structured-data-variables-list .variable-item {
-    @apply hover:bg-gray-100 dark:hover:bg-gray-800;
-}
-
+}