Support Nova 4 (#46)

* Update dependencies

* Wip

* Fix tests

* Wip

* Changelog

* Readme

* Screenshot

* Wip

* Fix

.github/workflows/main.yaml

@@ -1,25 +1,20 @@
 name: CI
-
 on:
   pull_request:
   push:
-    brances: [main]
-
+    branches: [1.x, 2.x]
 jobs:
   test:
     name: Tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
+      - uses: shivammathur/setup-php@v2
         with:
-          fetch-depth: 1
-      - env:
+          php-version: 8.0
+      - run: composer config http-basic.nova.laravel.com $NOVA_USERNAME $NOVA_PASSWORD
+        env:
           NOVA_USERNAME: ${{ secrets.NOVA_USERNAME }}
           NOVA_PASSWORD: ${{ secrets.NOVA_PASSWORD }}
-        run: |
-          composer config http-basic.nova.laravel.com $NOVA_USERNAME $NOVA_PASSWORD
-          composer install -n --prefer-dist --no-ansi --no-progress --no-suggest --no-scripts
+      - uses: ramsey/composer-install@v2
       - run: vendor/bin/phpunit --testdox --colors=always
-      - run: |
-          npm install
-          npm run test

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to `nova-settings-tool` will be documented in this file.
 
+## 2.0.0 – 2022-04-16
+
+- Add support for Nova 4
+
 ## 1.1.3 – 2021-08-05
 
 - Default Settings tool page title to `Settings` and make it translatable

README.md

@@ -18,6 +18,8 @@ Install the package via Composer in any Laravel app using [Nova](https://nova.la
 composer require bakerkretzmar/nova-settings-tool
 ```
 
+> Nova Settings Tool currently requires Nova 4—for older versions of Nova, use v1 of this package.
+
 Publish the default configuration file to `config/nova-settings-tool.php`:
 
 ```bash

composer.json

@@ -22,13 +22,13 @@
         }
     ],
     "require": {
-        "php": "^7.1|^8.0",
-        "laravel/nova": "^1.0|^2.0|^3.0",
-        "spatie/valuestore": "^1.2"
+        "php": "^7.3|^8.0",
+        "laravel/nova": "^4.0",
+        "spatie/valuestore": "^1.3"
     },
     "require-dev": {
-        "orchestra/testbench": "^6.4",
-        "phpunit/phpunit": "^9.4"
+        "orchestra/testbench": "^7.4",
+        "phpunit/phpunit": "^9.5"
     },
     "autoload": {
         "psr-4": {
@@ -48,6 +48,7 @@
         }
     },
     "config": {
+        "optimize-autoloader": true,
         "sort-packages": true
     },
     "minimum-stability": "dev",

dist/mix-manifest.json

@@ -1,3 +1,3 @@
 {
     "/js/tool.js": "/js/tool.js"
-}
+}

package.json

@@ -1,52 +1,22 @@
 {
     "private": true,
     "scripts": {
-        "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "prod": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "test": "jest --verbose"
+        "dev": "mix",
+        "watch": "mix watch",
+        "prod": "mix --production"
     },
     "devDependencies": {
-        "@vue/test-utils": "^1.0.0-beta.29",
-        "codemirror": "^5.49.0",
-        "cross-env": "^6.0.0",
-        "jest": "^24.8.0",
-        "laravel-mix": "^1.0",
-        "vue-jest": "^3.0.4"
+        "@vue/compiler-sfc": "^3.2.22",
+        "codemirror": "^5.65.2",
+        "laravel-mix": "^6.0.41",
+        "lodash": "^4.17.21",
+        "prettier": "^2.6.2",
+        "vue": "^3.2.33",
+        "vue-loader": "^17.0.0"
     },
-    "dependencies": {
-        "vue": "^2.5.0"
-    },
-    "jest": {
-        "moduleFileExtensions": [
-            "js",
-            "vue"
-        ],
-        "moduleNameMapper": {
-            "^@/(.*)$": "<rootDir>/resources/js/$1"
-        },
-        "transform": {
-            "^.+\\.js$": "babel-jest",
-            "^.+\\.vue$": "vue-jest"
-        },
-        "testMatch": [
-            "<rootDir>/tests/js/**/*.spec.js"
-        ]
-    },
-    "babel": {
-        "env": {
-            "test": {
-                "presets": [
-                    [
-                        "env",
-                        {
-                            "targets": {
-                                "node": "current"
-                            }
-                        }
-                    ]
-                ]
-            }
-        }
+    "prettier": {
+        "printWidth": 140,
+        "tabWidth": 4,
+        "singleQuote": true
     }
 }

phpunit.xml

@@ -1,16 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-         xsi:noNamespaceSchemaLocation="./vendor/phpunit/phpunit/phpunit.xsd"
-         bootstrap="vendor/autoload.php"
-         colors="true">
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="./vendor/phpunit/phpunit/phpunit.xsd" bootstrap="vendor/autoload.php" colors="true">
     <testsuites>
-        <testsuite name="Nova Settings Tool Tests">
+        <testsuite name="Nova Settings Tool">
             <directory>./tests</directory>
         </testsuite>
     </testsuites>
-    <coverage processUncoveredFiles="true">
-        <include>
-            <directory suffix=".php">./src</directory>
-        </include>
-    </coverage>
 </phpunit>

resources/js/CodeSetting.vue

@@ -1,81 +1,75 @@
 <template>
-    <default-setting :setting="setting" :errors="errors || []">
-
-        <template slot="setting">
-
-            <div class="form-input-bordered px-0 overflow-hidden">
-                <textarea ref="textarea" :id="setting.key"/>
-            </div>
-
-        </template>
-
-    </default-setting>
+    <DefaultSetting :setting="setting" :errors="errors || []">
+        <div class="form-input form-input-bordered px-0 overflow-hidden">
+            <textarea ref="txt" :id="setting.key" />
+        </div>
+    </DefaultSetting>
 </template>
 
 <script>
-import DefaultSetting from './DefaultSetting'
-
-import CodeMirror from 'codemirror'
-import 'codemirror/mode/php/php'
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/mode/css/css'
-import 'codemirror/mode/htmlmixed/htmlmixed'
-import 'codemirror/mode/markdown/markdown'
-import 'codemirror/mode/yaml/yaml'
-import 'codemirror/mode/shell/shell'
+import CodeMirror from 'codemirror';
+import 'codemirror/keymap/vim';
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/dockerfile/dockerfile';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/markdown/markdown';
+import 'codemirror/mode/nginx/nginx';
+import 'codemirror/mode/php/php';
+import 'codemirror/mode/shell/shell';
+import 'codemirror/mode/sql/sql';
+import 'codemirror/mode/vue/vue';
+import 'codemirror/mode/xml/xml';
+import 'codemirror/mode/yaml/yaml';
+import 'codemirror/mode/yaml-frontmatter/yaml-frontmatter';
+import DefaultSetting from './DefaultSetting.vue';
 
 export default {
-    components: { DefaultSetting },
-
+    components: {
+        DefaultSetting,
+    },
     props: {
         setting: Object,
         errors: Array,
     },
-
-    data: () => ({
-        codemirror: null,
-    }),
-
-    computed: {
-        doc() {
-            return this.codemirror.getDoc()
-        },
-    },
-
+    emits: ['update'],
+    codemirror: null,
     mounted() {
-        this.codemirror = CodeMirror.fromTextArea(this.$refs.textarea, {
+        this.codemirror = CodeMirror.fromTextArea(this.$refs.txt, {
             indentUnit: 4,
             lineNumbers: true,
             mode: this.setting.language,
             theme: 'solarized light',
             viewportMargin: Infinity,
-        })
-
-        this.doc.setValue(this.setting.value || '')
-
-        this.doc.on('change', (cm, change) => {
+        });
+        this.codemirror?.getDoc()?.on('change', (cm, changeObj) => {
             this.$emit('update', {
                 key: this.setting.key,
                 value: cm.getValue(),
-            })
-        })
+            });
+        });
+        this.codemirror?.getDoc()?.setValue(this.setting.value);
+        this.codemirror?.setSize('100%');
     },
-}
+};
 </script>
 
-<style src="codemirror/lib/codemirror.css"/>
-<style src="codemirror/theme/solarized.css"/>
-
 <style>
+@import 'codemirror/lib/codemirror.css';
+@import 'codemirror/theme/solarized.css';
 @import url(https://cdn.jsdelivr.net/gh/tonsky/[email protected]/distr/fira_code.css);
 
 .CodeMirror {
-    font-family: "Fira Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: 'Fira Code', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
     font-size: 14px;
     line-height: 1.75;
     font-weight: 500;
     -moz-box-shadow: none !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
 }
+.cm-s-solarized.cm-s-light {
+    background-color: #fdf6e3 !important;
+    color: #657b83 !important;
+}
 </style>

resources/js/DefaultSetting.vue

@@ -1,49 +1,33 @@
 <template>
-    <setting-wrapper :stacked="setting.stacked">
-
-        <div class="w-1/5 px-8" :class="setting.stacked ? 'pt-6' : 'py-6'">
-
-            <setting-label :label-for="setting.key" :class="{ 'mb-2': setting.help }">
+    <SettingWrapper :stacked="setting.stacked">
+        <div class="px-8 mt-2 md:mt-0" :class="setting.stacked ? 'md:pt-5 w-full' : 'w-full md:w-1/5 md:py-5'">
+            <SettingLabel :label-for="setting.key" :class="{ 'mb-2': setting.help }">
                 {{ __(setting.label) }}
-            </setting-label>
-
+            </SettingLabel>
         </div>
-
-        <div class="py-6 px-8" :class="settingClasses">
-
-            <slot name="setting"/>
-
-            <setting-help class="error-text text-danger" v-if="errors.length">
-                {{ errors[0] }}
-            </setting-help>
-
-            <setting-help v-if="setting.help">
-                {{ __(setting.help) }}
-            </setting-help>
-
+        <div class="mt-1 md:mt-0 pb-5 px-8" :class="setting.stacked ? 'md:pt-5 w-full' : 'w-full md:w-3/5 md:py-5'">
+            <slot />
+            <SettingHelp class="mt-2 help-text-error" v-if="errors.length">{{ errors[0] }}</SettingHelp>
+            <SettingHelp class="mt-2 help-text" v-if="setting.help" v-html="__(setting.help)" />
         </div>
-
-    </setting-wrapper>
+    </SettingWrapper>
 </template>
 
 <script>
-import SettingHelp from './SettingHelp'
-import SettingLabel from './SettingLabel'
-import SettingWrapper from './SettingWrapper'
+import SettingHelp from './SettingHelp.vue';
+import SettingLabel from './SettingLabel.vue';
+import SettingWrapper from './SettingWrapper.vue';
 
 export default {
-    components: { SettingHelp, SettingLabel, SettingWrapper },
-
+    components: {
+        SettingHelp,
+        SettingLabel,
+        SettingWrapper,
+    },
     props: {
         setting: Object,
         fullWidth: Boolean,
         errors: Array,
     },
-
-    computed: {
-        settingClasses() {
-            return this.fullWidth ? (this.setting.stacked ? 'w-full' : 'w-4/5') : 'w-1/2'
-        },
-    },
-}
+};
 </script>