[8.x] JS Imports (#1242)

duncanmcclean · web-flow · commit 78fa6db73e92 · 2025-08-21T11:08:48.000+01:00
* wip

* Fix styling

* Uncomment .css input

* Use the chart.js library directly

It was erroring out since it couldn't resolve Vue.js, probably because Statamic puts it on the window instead of us pulling it in ourselves.

* Update imports

* Use runway dev-master

---------

Co-authored-by: duncanmcclean &lt;duncanmcclean@users.noreply.github.com&gt;
diff --git a/composer.json b/composer.json
@@ -49,7 +49,7 @@
         "phpunit/phpunit": "^11.0",
         "spatie/ray": "^1.17",
         "spatie/test-time": "^1.3",
-        "statamic-rad-pack/runway": "dev-statamic-6"
+        "statamic-rad-pack/runway": "dev-master"
     },
     "config": {
         "optimize-autoloader": true,
diff --git a/package.json b/package.json
@@ -1,23 +1,15 @@
 {
     "scripts": {
-        "dev": "vite",
+        "dev": "vite build --watch",
         "build": "vite build"
     },
     "dependencies": {
-        "@floating-ui/dom": "^1.2.5",
-        "@shopify/draggable": "^1.0.0-beta.8",
+        "@statamic/cms": "file:./vendor/statamic/cms/resources/js/package",
         "axios": "^0.21.1",
-        "cross-env": "^7.0.2",
-        "marked": "^4.0.12",
-        "underscore": "^1.13.2",
-        "uniqid": "^5.4.0",
-        "vite-svg-loader": "^5.1.0",
-        "vue-chartjs": "^5.3.2"
+        "chart.js": "^4.5.0"
     },
     "devDependencies": {
-        "@vitejs/plugin-vue": "^5.2.3",
         "laravel-vite-plugin": "^1.2.0",
-        "vite": "^6.3.4",
-        "vite-plugin-externals": "^0.6.2"
+        "vite": "^6.3.4"
     }
 }
diff --git a/resources/js/components/Fieldtypes/CountryRegionFieldtype.vue b/resources/js/components/Fieldtypes/CountryRegionFieldtype.vue
@@ -14,8 +14,8 @@
 
 <script>
 import axios from 'axios'
-import { FieldtypeMixin } from 'statamic'
-import { Select } from '@statamic/ui'
+import { FieldtypeMixin } from '@statamic/cms'
+import { Select } from '@statamic/cms/ui'
 
 export default {
     mixins: [FieldtypeMixin],
diff --git a/resources/js/components/Fieldtypes/CouponCodeFieldtype.vue b/resources/js/components/Fieldtypes/CouponCodeFieldtype.vue
@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import { FieldtypeMixin } from 'statamic';
-import { Input } from '@statamic/ui';
+import { FieldtypeMixin } from '@statamic/cms';
+import { Input } from '@statamic/cms/ui';
 
 export default {
     name: 'CouponCodeFieldtype',
diff --git a/resources/js/components/Fieldtypes/CouponSummaryFieldtype.vue b/resources/js/components/Fieldtypes/CouponSummaryFieldtype.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { FieldtypeMixin } from 'statamic';
+import { FieldtypeMixin } from '@statamic/cms';
 
 export default {
     name: 'CouponSummaryFieldtype',
diff --git a/resources/js/components/Fieldtypes/CouponValueFieldtype.vue b/resources/js/components/Fieldtypes/CouponValueFieldtype.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { FieldtypeMixin } from 'statamic';
+import { FieldtypeMixin } from '@statamic/cms';
 
 export default {
     name: 'CouponValueFieldtype',
diff --git a/resources/js/components/Fieldtypes/GatewayFieldtype.vue b/resources/js/components/Fieldtypes/GatewayFieldtype.vue
@@ -50,8 +50,8 @@
 </template>
 
 <script>
-import { FieldtypeMixin, ItemActions } from 'statamic'
-import { Dropdown, DropdownMenu, DropdownItem } from '@statamic/ui'
+import { FieldtypeMixin, ItemActions } from '@statamic/cms'
+import { Dropdown, DropdownMenu, DropdownItem } from '@statamic/cms/ui'
 
 export default {
     name: 'gateway-fieldtype',
diff --git a/resources/js/components/Fieldtypes/MoneyFieldtype.vue b/resources/js/components/Fieldtypes/MoneyFieldtype.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import { FieldtypeMixin } from 'statamic';
-import { Input } from '@statamic/ui'
+import { FieldtypeMixin } from '@statamic/cms';
+import { Input } from '@statamic/cms/ui'
 
 export default {
     name: 'money-fieldtype',
diff --git a/resources/js/components/Fieldtypes/OrderStatusFieldtype.vue b/resources/js/components/Fieldtypes/OrderStatusFieldtype.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import { FieldtypeMixin } from 'statamic';
-import { Badge } from '@statamic/ui'
+import { FieldtypeMixin } from '@statamic/cms';
+import { Badge } from '@statamic/cms/ui'
 
 export default {
     name: 'order-status-fieldtype',
diff --git a/resources/js/components/Fieldtypes/OrderStatusIndexFieldtype.vue b/resources/js/components/Fieldtypes/OrderStatusIndexFieldtype.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import { IndexFieldtypeMixin } from 'statamic';
-import { Badge } from '@statamic/ui'
+import { IndexFieldtypeMixin } from '@statamic/cms';
+import { Badge } from '@statamic/cms/ui'
 
 export default {
     mixins: [IndexFieldtypeMixin],
diff --git a/resources/js/components/Fieldtypes/PaymentStatusFieldtype.vue b/resources/js/components/Fieldtypes/PaymentStatusFieldtype.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import { FieldtypeMixin } from 'statamic';
-import { Badge } from '@statamic/ui'
+import { FieldtypeMixin } from '@statamic/cms';
+import { Badge } from '@statamic/cms/ui'
 
 export default {
     name: 'payment-status-fieldtype',
diff --git a/resources/js/components/Fieldtypes/PaymentStatusIndexFieldtype.vue b/resources/js/components/Fieldtypes/PaymentStatusIndexFieldtype.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import { IndexFieldtypeMixin } from 'statamic';
-import { Badge } from '@statamic/ui'
+import { IndexFieldtypeMixin } from '@statamic/cms';
+import { Badge } from '@statamic/cms/ui'
 
 export default {
     mixins: [IndexFieldtypeMixin],
diff --git a/resources/js/components/Fieldtypes/ProductVariantFieldtype.vue b/resources/js/components/Fieldtypes/ProductVariantFieldtype.vue
@@ -43,8 +43,8 @@
 
 <script>
 import axios from 'axios'
-import { FieldtypeMixin } from 'statamic';
-import { Select, publishContextKey } from '@statamic/ui'
+import { FieldtypeMixin } from '@statamic/cms';
+import { Select, publishContextKey } from '@statamic/cms/ui'
 
 export default {
     name: 'product-variant-fieldtype',
diff --git a/resources/js/components/Fieldtypes/ProductVariantsFieldtype.vue b/resources/js/components/Fieldtypes/ProductVariantsFieldtype.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { Fieldtype } from 'statamic';
-import { Panel, PanelHeader, Heading, Card, Icon, Button, PublishContainer, FieldsProvider, PublishFields as Fields, injectPublishContext } from '@statamic/ui';
+import { Fieldtype } from '@statamic/cms';
+import { Panel, PanelHeader, Heading, Card, Button, PublishContainer, FieldsProvider, PublishFields as Fields, injectPublishContext } from '@statamic/cms/ui';
+import { ConfirmationModal } from '@statamic/cms/temporary';
 import { computed, ref, watch } from 'vue';
 const { values, errors } = injectPublishContext()
 
@@ -190,7 +191,7 @@ watch(
 <template>
     <div class="mt-2">
         <!-- Variants -->
-        <div class="mb-10 flex flex-col">
+        <div class="mb-12 flex flex-col">
             <Panel v-for="(variant, index) in variants" :key="index">
                 <PanelHeader>
                     <div class="flex items-center justify-between">
@@ -200,7 +201,7 @@ watch(
                 </PanelHeader>
 
                 <Card>
-                    <confirmation-modal
+                    <ConfirmationModal
                         v-if="deletingVariant === index"
                         :ref="`variant-deleter-${index}`"
                         :title="__('Delete Variant')"
@@ -209,7 +210,7 @@ watch(
                         @confirm="deleteVariant(index)"
                     >
                         <p>{{ __('Are you sure you want to delete this variant?') }}</p>
-                    </confirmation-modal>
+                    </ConfirmationModal>
 
                     <PublishContainer
                         :name="`product-variant-${index}`"
diff --git a/resources/js/components/Fieldtypes/StatusLogFieldtype.vue b/resources/js/components/Fieldtypes/StatusLogFieldtype.vue
@@ -3,7 +3,7 @@
         <Button
             class="w-full"
             :text="__('Visit Status Log')"
-            icon="light/history"
+            icon="history"
             target="_blank"
             @click="showStatusLog = true"
         />
@@ -26,8 +26,8 @@
 
 <script>
 import StatusLog from '../StatusLog/StatusLog.vue';
-import { FieldtypeMixin } from 'statamic';
-import { Button } from '@statamic/ui'
+import { FieldtypeMixin } from '@statamic/cms';
+import { Button } from '@statamic/cms/ui'
 
 export default {
     name: 'status-log-fieldtype',
diff --git a/resources/js/components/Listings/CouponListing.vue b/resources/js/components/Listings/CouponListing.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { DropdownItem, Listing } from '@statamic/ui';
+import { DropdownItem, Listing } from '@statamic/cms/ui';
 import { ref } from 'vue';
 
 const props = defineProps({
diff --git a/resources/js/components/StatusLog/StatusLog.vue b/resources/js/components/StatusLog/StatusLog.vue
@@ -38,8 +38,8 @@
 
 <script>
 import StatusLogEvent from './StatusLogEvent.vue';
-import { Button, Heading } from '@statamic/ui'
-import { DateFormatter } from 'statamic';
+import { Button, Heading } from '@statamic/cms/ui'
+import { DateFormatter } from '@statamic/cms';
 
 export default {
     components: {
diff --git a/resources/js/components/StatusLog/StatusLogEvent.vue b/resources/js/components/StatusLog/StatusLogEvent.vue
@@ -35,10 +35,11 @@
 <script>
 import axios from 'axios';
 import Avatar from '../../../../vendor/statamic/cms/resources/js/components/Avatar.vue'
-import { Badge, Subheading } from '@statamic/ui'
+import { Badge, Subheading } from '@statamic/cms/ui'
 
 export default {
     components: { Badge, Subheading, Avatar },
+
     props: {
         event: Object,
         orderId: String,
diff --git a/resources/js/components/Widgets/LowStockProducts.vue b/resources/js/components/Widgets/LowStockProducts.vue
@@ -51,7 +51,7 @@ import {
     ListingTableHead as TableHead,
     ListingTableBody as TableBody,
     ListingPagination as Pagination
-} from '@statamic/ui';
+} from '@statamic/cms/ui';
 
 export default {
     components: {
diff --git a/resources/js/components/Widgets/OrdersChart.vue b/resources/js/components/Widgets/OrdersChart.vue
@@ -2,8 +2,8 @@
     <Widget :title :icon>
         <div class="flex flex-wrap -mx-2 mb-4">
             <div class="px-2 w-full">
-                <div class="px-1" v-if="ready">
-                    <Line :data="chartData" :options="chartOptions" />
+                <div class="px-1">
+                    <canvas ref="chartCanvas"></canvas>
                 </div>
             </div>
         </div>
@@ -15,25 +15,25 @@
 </template>
 
 <script>
-import { Widget } from '@statamic/ui';
-
+import { Widget } from '@statamic/cms/ui';
 import {
     Chart as ChartJS,
     CategoryScale,
     LinearScale,
     PointElement,
     LineElement,
+    LineController,
     Title,
     Tooltip,
     Legend
 } from 'chart.js'
-import { Line } from 'vue-chartjs'
 
 ChartJS.register(
     CategoryScale,
     LinearScale,
     PointElement,
     LineElement,
+    LineController,
     Title,
     Tooltip,
     Legend
@@ -42,7 +42,6 @@ ChartJS.register(
 export default {
     components: {
         Widget,
-        Line,
     },
 
     props: {
@@ -53,33 +52,49 @@ export default {
 
     data() {
         return {
-            ready: false,
+            chart: null,
+        }
+    },
 
-            chartData: {
-                labels: [],
-                datasets: [
-                    {
-                        label: __('Paid Orders'),
-                        backgroundColor: '#16a34a',
-                        data: [],
-                    },
-                ],
-            },
+    methods: {
+        createChart() {
+            const ctx = this.$refs.chartCanvas.getContext('2d');
 
-            chartOptions: {
-                responsive: true,
-                maintainAspectRatio: false,
-            },
-        }
+            const labels = [];
+            const chartData = [];
+
+            this.data.forEach((item) => {
+                labels.push(item.date);
+                chartData.push(item.count);
+            });
+
+            this.chart = new ChartJS(ctx, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [
+                        {
+                            label: __('Paid Orders'),
+                            backgroundColor: '#16a34a',
+                            borderColor: '#16a34a',
+                            data: chartData,
+                        },
+                    ],
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                },
+            });
+        },
     },
 
     mounted() {
-        this.data.forEach((item) => {
-            this.chartData.labels.push(item.date)
-            this.chartData.datasets[0].data.push(item.count)
-        })
+        this.createChart();
+    },
 
-        this.ready = true
+    beforeUnmount() {
+        this.chart?.destroy();
     },
 }
 </script>
diff --git a/resources/js/components/Widgets/RecentOrders.vue b/resources/js/components/Widgets/RecentOrders.vue
@@ -46,7 +46,7 @@ import {
     ListingTableHead as TableHead,
     ListingTableBody as TableBody,
     ListingPagination as Pagination
-} from '@statamic/ui';
+} from '@statamic/cms/ui';
 
 export default {
     components: {
diff --git a/resources/js/components/Widgets/TopCustomers.vue b/resources/js/components/Widgets/TopCustomers.vue
@@ -51,7 +51,7 @@ import {
     ListingTableHead as TableHead,
     ListingTableBody as TableBody,
     ListingPagination as Pagination
-} from '@statamic/ui';
+} from '@statamic/cms/ui';
 
 export default {
     components: {
diff --git a/vite.config.js b/vite.config.js
