diff --git a/README.md b/README.md index 6b252a3..0dae163 100644 --- a/README.md +++ b/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. diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000..774c5f4 --- /dev/null +++ b/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, + }, + }, + }, +] diff --git a/package.json b/package.json index 0521ab4..f26706a 100644 --- a/package.json +++ b/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" + } } diff --git a/resources/Overview.md b/resources/Overview.md index 3db1c4b..1bbc06e 100644 --- a/resources/Overview.md +++ b/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 diff --git a/resources/_preview.html b/resources/_preview.html index 0ba0d1b..5514bd6 100644 --- a/resources/_preview.html +++ b/resources/_preview.html @@ -1,15 +1,16 @@ - + - + ${component.name} - +
+ style="${component.url?.match(/atoms|molecules/)?'padding: 2rem':''}" + > ${code}
${includes} diff --git a/resources/index.md b/resources/index.md index c631282..7e76668 100644 --- a/resources/index.md +++ b/resources/index.md @@ -1,4 +1,5 @@ # Great! + ## Let's Get Started. ##### You're running Pronto, Imarc's front-end framework. diff --git a/resources/js/components/PAccordion.vue b/resources/js/components/PAccordion.vue index e443a7e..7d54eed 100644 --- a/resources/js/components/PAccordion.vue +++ b/resources/js/components/PAccordion.vue @@ -5,12 +5,12 @@ import { useTemplateRef } from 'vue' * PAccordion is a vue component for the
element. It uses the native
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') diff --git a/resources/js/components/PDirectionalKeys.vue b/resources/js/components/PDirectionalKeys.vue index 1b9d2b1..b6bcc24 100644 --- a/resources/js/components/PDirectionalKeys.vue +++ b/resources/js/components/PDirectionalKeys.vue @@ -8,7 +8,7 @@ const test = evt => { console.log('test', evt) } -//useDirectionalKeys(...slots.default()) +useDirectionalKeys(...slots.default())