Statamic v6

.github/workflows/test.yml

@@ -10,9 +10,9 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        php: [8.2, 8.3]
-        laravel: [10.*, 11.*]
-        statamic: [^5.0]
+        php: [8.3, 8.4]
+        laravel: [12.*]
+        statamic: [^6.0]
     name: P${{ matrix.php }} - S${{ matrix.statamic }} - L${{ matrix.laravel }} - ubuntu-latest
     steps:
       - name: Checkout code

composer.json

@@ -13,14 +13,14 @@
     "require": {
         "pixelfear/composer-dist-plugin": "^0.1",
         "shopify/shopify-api": "^5.1",
-        "statamic/cms": "^4.56 || ^5.0"
+        "statamic/cms": "^6.0"
     },
     "require-dev": {
         "jasonmccreary/laravel-test-assertions": "^2.0",
         "laravel/pint": "^1.0",
         "mockery/mockery": "^1.3.3",
-        "orchestra/testbench": "^8.0 || ^9.0.2",
-        "phpunit/phpunit": "^9.4 || ^10.0 || ^11.0",
+        "orchestra/testbench": "^10.0.2",
+        "phpunit/phpunit": "^11.0",
         "spatie/laravel-ray": "*"
     },
     "autoload": {
@@ -55,6 +55,5 @@
             "description": "Shopify Addon for Statamic",
             "name": "Shopify"
         }
-    },
-    "minimum-stability": "alpha"
+    }
 }

package.json

@@ -1,22 +1,15 @@
 {
-  "private": true,
-  "scripts": {
-    "dev": "npm run development",
-    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch-poll": "npm run watch -- --watch-poll",
-    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "prod": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
-  },
-  "devDependencies": {
-    "cross-env": "^5.1",
-    "laravel-mix": "^5.0.0",
-    "vue": "^2.6.0",
-    "vue-template-compiler": "^2.6.14"
-  },
-  "dependencies": {
-    "@shopify/storefront-api-client": "^1.0.2",
-    "axios": "^0.21.1"
-  }
+    "scripts": {
+        "dev": "vite build --watch",
+        "build": "vite build"
+    },
+    "dependencies": {
+        "@statamic/cms": "file:./vendor/statamic/cms/resources/dist-package",
+        "@shopify/storefront-api-client": "^1.0.2",
+        "axios": "^1.11.0"
+    },
+    "devDependencies": {
+        "laravel-vite-plugin": "^1.2.0",
+        "vite": "^6.3.4"
+    }
 }

resources/js/components/ImportButton.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex items-center">
-        <button type="button" class="btn-primary" @click="fetch()">Import All</button>
-        <p class="ml-2 text-sm" :class="messageColor" v-if="message">{{ message }}</p>
+        <ui-button type="button" @click="fetch()" :disabled="processing">{{ processing ? 'Please wait' : 'Run import' }}</ui-button>
+        <ui-error-message class="ml-2" v-if="message">{{ message }}</ui-error-message>
     </div>
 </template>
 
@@ -16,29 +16,27 @@ export default {
     data() {
         return {
             message: null,
-            messageColor: 'text-black'
+            processing: false,
         }
     },
 
     methods: {
         fetch() {
-            this.message = 'working....'
-            this.messageColor = 'text-black'
+            this.message = '';
+            this.processing = true;
 
             axios.get(this.url)
                 .then(res => {
-                    console.log(res)
                     this.message = res.data.message
-                    this.messageColor = 'text-green'
 
                     setTimeout(() => this.message = null, 3000)
                 })
                 .catch(err => {
                     this.message = 'Something went wrong. Please try again.'
-                    this.messageColor = 'text-red'
 
                     setTimeout(() => this.message = null, 5000)
                 })
+                .finally(() => this.processing = false)
         }
     }
 }

resources/js/components/ImportProductButton.vue

@@ -1,17 +1,21 @@
-<template>
+ <template>
     <form @submit.prevent="fetchProduct()" >
-        <p class="mb-1 max-w-sm"><v-select
-              placeholder="Select a product"
-              :options="products"
-              :get-option-key="(option) => option.product_id"
-              :get-option-label="(option) => option.title"
-              :searchable="true"
-              @input="input"
-        /></p>
+        <div class="mb-1 max-w-sm">
+            <ui-combobox
+                class="w-full"
+                clearable="true"
+                :label="__('Select a product')"
+                v-model="selectedProduct"
+                optionLabel="title"
+                :options="products"
+                optionValue="product_id"
+                searchable="true"
+            />
+        </div>
 
         <div class="flex items-center">
-            <button type="submit" class="btn-primary" >Import Product</button>
-            <p class="ml-2 text-sm" :class="messageColor" v-if="message">{{ message }}</p>
+            <ui-button type="button" @click="fetch()" :disabled="processing">{{ processing ? 'Please wait' : 'Import product' }}</ui-button>
+            <ui-error-message class="ml-2" v-if="message">{{ message }}</ui-error-message>
         </div>
     </form>
 </template>
@@ -28,10 +32,10 @@ export default {
 
     data() {
         return {
-            products: [],
             message: null,
-            messageColor: 'text-black',
-            selectedProduct: null
+            selectedProduct: null,
+            processing: false,
+            products: [],
         }
     },
 
@@ -47,25 +51,20 @@ export default {
                 })
         },
 
-        input(value) {
-            this.selectedProduct = value
-        },
-
         fetchProduct() {
-            this.message = 'working....'
-            this.messageColor = 'text-black'
+            this.message = '';
+            this.processing = true;
 
             axios.get(`${this.url}?product=${this.selectedProduct.product_id}`)
                 .then(res => {
                     this.message = res.data.message
-                    this.messageColor = 'text-green'
 
                     setTimeout(() => this.message = null, 3000)
                 }).catch(err => {
                     this.message = 'Something went wrong. Please try again.'
-                    this.messageColor = 'text-red'
                     setTimeout(() => this.message = null, 5000)
                 })
+                .finally(() => this.processing = false)
         }
     }
 }

resources/js/components/VariantForm.vue

@@ -1,23 +1,16 @@
-<template>
-    <stack name="Form Stack" :narrow="narrow" @closed="close">
-        <div class="h-full overflow-auto p-6 bg-gray-300">
-            <header class="-mt-2 mb-3 flex justify-end">
-                <button type="button" class="btn-close" @click="close">×</button>
-            </header>
-            <publish-form
-                name="Form Stack publish form"
-                :title="title"
-                :action="action"
-                :method="method"
-                :blueprint="blueprint"
-                :meta="meta"
-                :values="values"
-                @saved="saved"
-                class="max-w-3xl mx-auto"
-            >
-            </publish-form>
-        </div>
-    </stack>
+ <template>
+    <ui-stack :open="true" :size="narrow ? 'narrow' : null" @update:open="close">
+        <ui-publish-form
+            name="variant-publish-form"
+            :title="title"
+            :submit-url="action"
+            :submit-method="method"
+            :blueprint="blueprint"
+            :initial-meta="meta"
+            :initial-values="values"
+            @saved="saved"
+        ></ui-publish-form>
+    </ui-stack>
 </template>
 
 <script>

resources/js/cp.js

@@ -1,7 +1,7 @@
 import Variants from './fieldtypes/Variants.vue'
 import DisabledText from './fieldtypes/DisabledText.vue'
-import ImportProductButton from './components/ImportProductButton'
-import ImportButton from './components/ImportButton'
+import ImportProductButton from './components/ImportProductButton.vue'
+import ImportButton from './components/ImportButton.vue'
 
 Statamic.booting(() => {
   Statamic.$components.register('variants-fieldtype', Variants)
@@ -10,4 +10,4 @@ Statamic.booting(() => {
   // Dashboard Stuff
   Statamic.$components.register('shopify-import-product-button', ImportProductButton)
   Statamic.$components.register('shopify-import-button', ImportButton)
-})
+});

resources/js/fieldtypes/DisabledText.vue

@@ -1,10 +1,15 @@
 <template>
     <div>
-        <input type="text" :value="value" class="input-text" disabled />
+        <ui-input
+            :value="value"
+            disabled
+        />
     </div>
 </template>
 
 <script>
+import { FieldtypeMixin as Fieldtype } from '@statamic/cms';
+
 export default {
     mixins: [Fieldtype],
 };

resources/js/fieldtypes/Variants.vue

@@ -1,53 +1,53 @@
 <template>
     <div class="flex">
-        <section class="flex-grow border rounded">
-            <table class="data-table" v-if="variants">
-                <thead>
-                    <tr>
-                        <th>Title</th>
-                        <th>SKU</th>
-                        <th>Price</th>
-                        <th>Stock</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="(variant, index) in variants" :key="index" class="cursor-pointer" @click="openEditVariantStack(variant)">
-                        <td class="text-base">
-                            {{ variant.title }}
-                        </td>
-                        <td class="text-sm">
-                            {{ variant.sku }}
-                        </td>
-                        <td class="text-sm">
-                            {{ currencyFormat(variant.price) }}
-                        </td>
-                        <td class="text-sm">
-                            {{ variant.inventory_quantity }}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-            <p v-else class="p-1 text-sm">To get started, add some variants to products in Shopify.</p>
-        </section>
+        <ui-table class="w-full" v-if="variants">
+            <ui-table-columns>
+                <ui-table-column>{{ __('Title') }}</ui-table-column>
+                <ui-table-column>{{ __('SKU') }}</ui-table-column>
+                <ui-table-column>{{ __('Price') }}</ui-table-column>
+                <ui-table-column>{{ __('Stock') }}</ui-table-column>
+                <ui-table-column></ui-table-column>
+            </ui-table-columns>
+            <ui-table-row v-for="(variant, index) in variants" :key="index">
+                <ui-table-cell>
+                    {{ variant.title }}
+                </ui-table-cell>
+                <ui-table-cell>
+                    {{ variant.sku }}
+                </ui-table-cell>
+                <ui-table-cell>
+                    {{ currencyFormat(variant.price) }}
+                </ui-table-cell>
+                <ui-table-cell>
+                    {{ variant.inventory_quantity }}
+                </ui-table-cell>
+                <ui-table-cell>
+                    <ui-button @click="openEditVariantStack(variant)" size="sm">Edit</ui-button>
+                </ui-table-cell>
+            </ui-table-row>
+        </ui-table>
+
+        <ui-description v-else>To get started, add some variants to products in Shopify.</ui-description>
 
         <variant-form
-          name="variant stack"
-          v-if="showVariantStack"
-          :action="stackAction"
-          title="Edit Variant"
-          :blueprint="variantBlueprint"
-          :meta="variantMeta"
-          :method="stackMethod"
-          :values="stackValues"
-          @closed="showVariantStack = false"
-          @saved="closeVariantStack"
+            name="variant stack"
+            v-if="showVariantStack"
+            :action="stackAction"
+            title="Edit Variant"
+            :blueprint="variantBlueprint"
+            :meta="variantMeta"
+            :method="stackMethod"
+            :values="stackValues"
+            @closed="showVariantStack = false"
+            @saved="closeVariantStack"
         />
     </div>
 </template>
 
 <script>
 import axios from 'axios'
-import VariantForm from '../components/VariantForm'
+import { FieldtypeMixin as Fieldtype } from '@statamic/cms';
+import VariantForm from '../components/VariantForm.vue'
 
 export default {
     mixins: [Fieldtype],