formatting linting

README.md

@@ -33,3 +33,10 @@ The recommended way to work on Pronto is to work within Vitrine after cloning Pr
 1. Clone Pronto to a folder of your choosing.
 2. Within that folder, run `npm install` and `npm run dev`.
 3. Make sure to check any functional changes to Vitrine or Pronto also work properly with the build step `npm run prod` as well.
+
+#### Formatting and linting
+
+Formatting is handled by Prettier, while ESLint and Stylelint focus on linting. Use these commands during development:
+
+- `npm run lint` checks Prettier formatting without making changes, then runs ESLint and Stylelint.
+- `npm run lint:fix` tries to fix the code to match Prettier formatting, then runs ESLint and Stylelint.

eslint.config.js

@@ -0,0 +1,36 @@
+import js from '@eslint/js'
+import eslintConfigPrettier from 'eslint-config-prettier'
+import vue from 'eslint-plugin-vue'
+import globals from 'globals'
+
+const vueMacros = {
+  defineProps: 'readonly',
+  defineEmits: 'readonly',
+  defineExpose: 'readonly',
+  defineOptions: 'readonly',
+  withDefaults: 'readonly',
+}
+
+export default [
+  js.configs.recommended,
+  ...vue.configs['flat/essential'],
+  {
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...vueMacros,
+      },
+    },
+  },
+  eslintConfigPrettier,
+  {
+    files: ['bin.js', 'vite.config.js', 'vite.config.template.js', 'index.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+  },
+]

package.json

@@ -1,86 +1,66 @@
 {
-    "name": "@imarc/pronto",
-    "version": "2.0.4",
-    "description": "A light, customizable frontend starter kit for the component library",
-    "author": "Imarc",
-    "license": "Apache-2.0",
-    "bin": "./bin.js",
-    "main": "./index.js",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/imarc/component-library.git"
-    },
-    "type": "module",
-    "bugs": {
-        "url": "https://github.com/imarc/component-library/issues"
-    },
-    "homepage": "https://github.com/imarc/component-library#readme",
-    "scripts": {
-        "dev": "vite",
-        "prod": "vite build",
-        "build": "vite build",
-        "preview": "vite preview"
-    },
-    "dependencies": {
-        "@clack/prompts": "^0.9.1",
-        "@imarc/vitrine": "^1.2.1",
-        "modern-normalize": "^3.0.1",
-        "swiper": "^11.2.6",
-        "vue": "^3.4.31"
-    },
-    "devDependencies": {
-        "@vitejs/plugin-vue": "*",
-        "sass": "^1.83.4",
-        "vite": "^6.0.7 || ^7.0.0"
-    },
-    "browserslist": [
-        "defaults"
-    ],
-    "eslintConfig": {
-        "env": {
-            "browser": true,
-            "es6": true,
-            "vue/setup-compiler-macros": true
-        },
-        "extends": [
-            "plugin:vue/vue3-recommended",
-            "standard"
-        ],
-        "globals": {
-            "Atomics": "readonly",
-            "SharedArrayBuffer": "readonly"
-        },
-        "parserOptions": {
-            "ecmaVersion": 2020,
-            "sourceType": "module"
-        },
-        "plugins": [
-            "vue"
-        ],
-        "rules": {
-            "comma-dangle": [
-                "warn",
-                {
-                    "arrays": "always-multiline",
-                    "objects": "always-multiline",
-                    "imports": "never",
-                    "exports": "never",
-                    "functions": "never"
-                }
-            ],
-            "indent": [
-                "warn",
-                4
-            ],
-            "vue/html-indent": [
-                "warn",
-                4
-            ]
-        }
-    },
-    "peerDependencies": {
-        "@vitejs/plugin-vue": "^5.2.3 || ^6.0.0",
-        "@vueform/multiselect": "^2.6.11",
-        "sass-embedded": "^1.87.0"
-    }
+  "name": "@imarc/pronto",
+  "version": "2.1.0-beta.0",
+  "description": "A light, customizable frontend starter kit for the component library",
+  "author": "Imarc",
+  "license": "Apache-2.0",
+  "bin": "./bin.js",
+  "main": "./index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/imarc/component-library.git"
+  },
+  "type": "module",
+  "bugs": {
+    "url": "https://github.com/imarc/component-library/issues"
+  },
+  "homepage": "https://github.com/imarc/component-library#readme",
+  "scripts": {
+    "dev": "vite",
+    "prod": "vite build",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "prettier -c \"resources/**/*.{js,vue,scss,css,md}\" && eslint \"resources/js/**/*.{js,vue}\" && stylelint \"resources/**/*.scss\"",
+    "lint:fix": "prettier -w \"resources/**/*.{js,vue,scss,css,md}\" && eslint \"resources/js/**/*.{js,vue}\" && stylelint \"resources/**/*.scss\" --fix"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.9.1",
+    "@imarc/vitrine": "^1.2.1",
+    "modern-normalize": "^3.0.1",
+    "swiper": "^11.2.6",
+    "vue": "^3.4.31"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@vitejs/plugin-vue": "*",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-vue": "^10.7.0",
+    "globals": "^15.15.0",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.8.1",
+    "sass": "^1.83.4",
+    "stylelint": "^17.1.1",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-config-standard-scss": "^17.0.0",
+    "stylelint-scss": "^7.0.0",
+    "vite": "^6.0.7 || ^7.0.0"
+  },
+  "browserslist": [
+    "defaults"
+  ],
+  "prettier": {
+    "arrowParens": "avoid",
+    "printWidth": 999,
+    "semi": false,
+    "singleQuote": true
+  },
+  "peerDependencies": {
+    "@vitejs/plugin-vue": "^5.2.3 || ^6.0.0",
+    "@vueform/multiselect": "^2.6.11",
+    "sass-embedded": "^1.87.0"
+  }
 }

resources/Overview.md

@@ -1,25 +1,24 @@
 # Overview
+
 ##### Pronto is Imarc's front-end framework for websites and web applications.
 
 It is open source, opinionated, and is built to be changed over configured, with an emphasis on the code being simple to read, maintain, and adapt to individual project needs.
 
 Pronto uses [Vite](https://vite.dev/) and [Vitrine](https://github.com/imarc/vitrine) to provide this library of its components, that becomes part of your project. See [Pronto's own site](https://imarc-pronto.netlify.app/components/) to see the latest components.
 
-
 ## Organization
 
 Pronto's components are organized following [Atomic Design](https://atomicdesign.bradfrost.com/):
 
-* **Atoms** are the smallest components, and should not contain any other components. *Examples: buttons, inputs, tags, headings.*
-* **Molecules** are the next smallest, and should only depend on atoms. *Examples: banners, accordions, lists, pagination.*
-* **Organisms** can depend on both atoms and molecules. These often represent a full slice across the page. *Examples: hero, section, site header, site footer.*
-* Pronto currently doesn't ship with any **Templates** or **Pages**, but these groups should be created as appropriate.
-* **Utilities** are components that are meant to be used with other components and primarily provide functionality.
-* **Imported** components are not copied into your project by default. They are meant to be consistent across projects.
+- **Atoms** are the smallest components, and should not contain any other components. _Examples: buttons, inputs, tags, headings._
+- **Molecules** are the next smallest, and should only depend on atoms. _Examples: banners, accordions, lists, pagination._
+- **Organisms** can depend on both atoms and molecules. These often represent a full slice across the page. _Examples: hero, section, site header, site footer._
+- Pronto currently doesn't ship with any **Templates** or **Pages**, but these groups should be created as appropriate.
+- **Utilities** are components that are meant to be used with other components and primarily provide functionality.
+- **Imported** components are not copied into your project by default. They are meant to be consistent across projects.
 
 Every visual component should have its folder. Vue components, composables and directives have folders within resources/js/. The folder name for a component should match the blockName, in lowerCamelCase, as should the naming of example HTML files.
 
-
 ### Naming Conventions
 
 Pronto uses SCSS for all styles, and uses ABEM for class naming:
@@ -34,13 +33,14 @@ Pronto uses SCSS for all styles, and uses ABEM for class naming:
 #### Custom Properties
 
 Custom property names should use the following naming convention:
+
 ```
 --prefix-property-name-suffix
 ```
 
-* Root level custom properties are prefixed with `--root-` and are not meant to overridden by components.
-* Properties that are meant to be overridden should be unprefixed (like `--accent-color`, `--gap`, `--size`)
-* Private, component specific properties should be prefixed with the component name in kebab-case (`--cell-span`)
+- Root level custom properties are prefixed with `--root-` and are not meant to overridden by components.
+- Properties that are meant to be overridden should be unprefixed (like `--accent-color`, `--gap`, `--size`)
+- Private, component specific properties should be prefixed with the component name in kebab-case (`--cell-span`)
 
 #### Vue files
 
@@ -50,9 +50,9 @@ PComponentName.vue
 useComposableName.js
 ```
 
-* Vue directive files should be named in UpperCamelCase and prefixed with 'v'. *Example: vDirectionals.js.*
-* Pronto's Vue components should be prefixed with P and follow Vue naming conventions. Other components do not need to use the P prefix. *Example: PAccordion.vue.*
-* Vue composables only need to follow Vue naming conventions.
+- Vue directive files should be named in UpperCamelCase and prefixed with 'v'. _Example: vDirectionals.js._
+- Pronto's Vue components should be prefixed with P and follow Vue naming conventions. Other components do not need to use the P prefix. _Example: PAccordion.vue._
+- Vue composables only need to follow Vue naming conventions.
 
 ## Goals
 

resources/_preview.html

@@ -1,15 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <title>${component.name}</title>
     <!-- ${template ? `Using template ${template}` : "Using builtin template"} -->
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
     <div
       id="app"
-      ${component.url?.match(/atoms|molecules/) ? 'style="padding: 2rem"' : ''}>
+      style="${component.url?.match(/atoms|molecules/)?'padding: 2rem':''}"
+    >
       ${code}
     </div>
     ${includes}

resources/index.md

@@ -1,4 +1,5 @@
 # Great!
+
 ## Let's Get Started.
 
 ##### You're running Pronto, Imarc's front-end framework.

resources/js/components/PAccordion.vue

@@ -5,12 +5,12 @@ import { useTemplateRef } from 'vue'
  * PAccordion is a vue component for the <details> element. It uses the native <details> element
  * state to determine whether it's open or closed, and merely handles updating CSS properties
  * to allow the element to use transitions between dynamic closed and [open] heights.
- * 
+ *
  * @param {string} summary - selector for the summary element.
  *                           Default: 'summary:first-of-type'
  */
 const props = defineProps({
-  summary: { type: String, default: 'summary:first-of-type' }
+  summary: { type: String, default: 'summary:first-of-type' },
 })
 const details = useTemplateRef('details')
 

resources/js/components/PDirectionalKeys.vue

@@ -8,7 +8,7 @@ const test = evt => {
   console.log('test', evt)
 }
 
-//useDirectionalKeys(...slots.default())
+useDirectionalKeys(...slots.default())
 </script>
 <template>
   <slot @keydown="test" @click="test" />

resources/js/components/PDismissable.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 
-const { name } = defineProps({ name: { type: String } })
+const { name } = defineProps({ name: { type: String, required: true } })
 
 const open = ref(name ? sessionStorage[name] !== 'dismissed' : true)