refactor: 2023 launch aesthetic tweaks (#30)

Co-authored-by: Joshua Graber <68428039+joshuagraber@users.noreply.github.com>
Co-authored-by: Joshua Graber <joshua.d.graber@gmail.com>

.eslintignore

@@ -5,3 +5,4 @@ node_modules
 dist
 
 *.config.*
+

.eslintrc.json

@@ -3,7 +3,9 @@
 	"parser": "vue-eslint-parser",
 	"parserOptions": {
 		"parser": "@typescript-eslint/parser",
-		"project": ["./tsconfig.eslint.json"],
+		"project": [
+			"./tsconfig.eslint.json"
+		],
 		"tsConfigRootDir": "./"
 	},
 	"extends": [
@@ -15,7 +17,20 @@
 		"@vue/typescript/recommended",
 		"@vue/eslint-config-prettier"
 	],
-	"plugins": ["@typescript-eslint", "prettier"],
+	"plugins": [
+		"@typescript-eslint",
+		"prettier"
+	],
+	"overrides": [
+		{
+			"extends": [
+				"plugin:@typescript-eslint/disable-type-checked"
+			],
+			"files": [
+				"./**/*.js"
+			]
+		}
+	],
 	"rules": {
 		"vue/require-default-prop": "off",
 		// Switch base eslint indent rule off
@@ -37,11 +52,17 @@
 		"prettier/prettier": [
 			"warn",
 			{
-				"indent": ["warn", "tab", { "SwitchCase": 2 }],
+				"indent": [
+					"warn",
+					"tab",
+					{
+						"SwitchCase": 2
+					}
+				],
 				"tabWidth": 2,
 				"useTabs": true
 			}
 		],
 		"vue/no-multiple-template-root": "off"
 	}
-}
+}

.husky/pre-push

@@ -1,4 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+npx commitlint --from origin/HEAD --to HEAD
 npm run test:ci

docs/CONTRIBUTING.md → CONTRIBUTING.md

@@ -5,8 +5,8 @@
 This is a `Vue` component library. It is built using `Vue3` and the `composition` API with TypeScript. Styles are created using `TailwindCSS`. The library is built using `Vite`. For testing, we use `Vitest`, for linting `eslint`, for formatting `prettier`. Conventional commits are enforced using `commitizen`, and publishing is done automatically via `semantic-release`.
 Some helpful resources and reading:
 
-[Commitizen](https://commitizen-tools.github.io/commitizen/)
-[Semantic Release](https://semantic-release.gitbook.io/semantic-release/)
+[Commitizen](https://commitizen-tools.github.io/commitizen/)  
+[Semantic Release](https://semantic-release.gitbook.io/semantic-release/)  
 [Tailwind](https://tailwindui.com/documentation)  
 [TypeScript](https://www.typescriptlang.org/docs/)
 [Vite](https://vitejs.dev/guide/)  
@@ -16,6 +16,7 @@ Some helpful resources and reading:
 [Vuelidate](https://vuelidate.js.org/)
 
 ### Etiquette
+[![Discord](https://img.shields.io/discord/828274060034965575?logo=discord)](https://discord.gg/vKhDv7nC8B)
 
 Head to [\#outreach](https://discord.com/channels/828274060034965575/853442226034442260/) in our [Discord](https://discord.gg/vKhDv7nC8B) if you'd like to collect feedback from the wider group.
 
@@ -60,6 +61,9 @@ To test the package locally:
 1. Run `npm link` from the root of the project directory.
 2. `cd` into the local directory of the app you want to test importing into, then run `npm link pdap-design-system`
 3. This will create a symlink between your local directories, allowing you to test changes in real time without actually publish to the `npm` registry.
-4. To test publishing, squash merge your local feature/fix/whatever branch into `main`. Then from `main` run `npm exec semantic-release --dry-run`. Then revert the squash merge commit.
-
-The `lint`, `test`, and `build` scripts are all required to pass before pull requests can be merged. The `lint` scripts are run against all staged files, and you can run `test:changed` to verify test suites against all local changes (staged and unstaged) before committing. You can run `build` locally as well, if you want to verify that it will pass before pushing changes. 
+4. To test publishing, squash merge your local feature/fix/whatever branch into `main`. Then from `main` run `npm exec semantic-release --dry-run`. Then reset the squash merge commit using `git reset HEAD~1 && git restore .`.
+5. A few things to note:
+- The `lint`, `test`, and `build` scripts are all required to pass before pull requests can be merged. 
+- The `lint` scripts are run against all staged files before a commit will succeed.
+- All local commit messages are linted and the full test suite is run using the `test:ci` before a `git push` will succeed.
+- You can run `test:changed` to verify test suites against all local changes (staged and un-staged) before committing.

README.md

@@ -1,6 +1,14 @@
-# Design System
+# PDAP Design System
+_A `Vue` component library, styling system, and image asset repository for PDAP-branded client apps._
+
+[![Current npm release](https://img.shields.io/npm/v/pdap-design-system?style=for-the-badge)](https://www.npmjs.com/package/pdap-design-system)
+![Build status](./badges/build.svg) 
+![Test coverage](./badges/coverage.svg) 
+![License](https://img.shields.io/github/license/Police-Data-Accessibility-Project/design-system.svg?style=for-the-badge&color=green) 
+
+
+[![Discord](https://img.shields.io/discord/828274060034965575?logo=discord&style=for-the-badge&color=blue)](https://discord.gg/vKhDv7nC8B)
 
-This is a `Vue` component library, styling system, and image asset repository for PDAP-branded client apps.
 
 ## Usage
 
@@ -43,7 +51,7 @@ module.exports = {
 
 ```
 
-5. If your project is using `TypeScript`, the component props definitions and other types are exposed for import as well.  
+5. If the project is using `TypeScript`, the component props definitions and other types are exposed for import as well.  
    _n.b. This can be particularly useful for composing `Form` schemas, where `Input` schema objects are defined differently depending on the `type` of input desired._
 
 ```
@@ -54,7 +62,7 @@ import { PdapInputTypes } from 'pdap-design-system';
 
 ### About images
 
-PDAP image assets contained in this repo are built to the `/dist` folder. For convenience an importing alias `/images` has been added.
+PDAP image assets contained in this repo are built to the `/dist` directory. For convenience an importing alias `/images` has been added.
 
 ```
 import 'pdap-design-system/images/acronym.svg';
@@ -68,7 +76,7 @@ import `pdap-design-system/images`;
 
 ### Using the CLI to copy assets to your local project directory
 
-If you want either styles or images copied to a local folder, you can do so from the root directory of your project.
+If you want either styles or images copied to a local directory, you can do so from the root directory of your project.
 
 Assets can be copied using the `pdap-design-system` command line method exposed by this package.
 
@@ -92,16 +100,16 @@ The following argument is optional:
 gh repo clone Police-Data-Accessibility-Project/design-system
 ```
 
-2. CD into the project folder and install dependencies
+2. CD into the project directory and install dependencies
 
 ```
 cd design-system
 npm i
 ```
 
-3. Step 2 should result in the `build` script being run after packages are installed. Check the `dist` folder for changes. You then may want to take one or both of the following steps:
+3. Step 2 should result in the `build` script being run after packages are installed. Check the `dist` directory for changes. You then may want to take one or both of the following steps:
 
-- If `build` wasn't called when you installed deps, build styles and images to the `dist` folder:
+- If `build` wasn't called when you installed deps, build styles and images to the `dist` directory:
 
 ```
 npm run build
@@ -115,7 +123,7 @@ npm run build:watch
 
 4. If you use VS Code as your editor, you may want to install the [tailwind VS Code extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss), which helps with intellisense and the custom at-rules used by TailwindCSS.
 
-5. Read the [contributing guide](./docs/CONTRIBUTING.md) for development requirements and tips.
+5. Read the [contributing guide](./CONTRIBUTING.md) for development requirements and tips.
 
 ## Assets
 
@@ -129,16 +137,18 @@ Use this [terminology](https://docs.pdap.io/activities/terms-and-definitions).
 | `_commit`      | Create conventional commits                              |
 | `build`        | Builds the library                                       |
 | `build:watch`  | Builds the library and watches for file changes          |
-| `ci`           | Removes all generated files and re-installs deps         |
-| `clean`        | Removes all generated files (except `package-lock.json`) |
-| `clean:deps`   | Removes node_modules directory                           |
-| `clean:build`  | Removes dist directory                                   |
-| `clean:test`   | Removes testing coverage reports                         |
-| `lint`         | Lints everything                                         |
+| `ci`           | Remove all generated files and re-installs deps         |
+| `clean`        | Remove all generated files (except `package-lock.json`) |
+| `clean:deps`   | Remove node_modules directory                           |
+| `clean:build`  | Remove dist directory                                   |
+| `clean:test`   | Remove testing coverage reports                         |
+| `lint`         | Lint everything                                         |
 | `lint:es`      | Lint `ts`  and `vue` with `eslint`                       |
 | `lint:css`     | Lint `css` and `vue` with `stylelint`                    |
 | `lint:ts`      | Lint `ts` with `tsc`                                     |
-| `test`         | Runs all test suites                                     |
-| `test:changed` | Runs only test suites affected by changed files          |
-| `typecheck`    | Runs type check on all `ts` and `vue` files              |
+| `test`         | Run all test suites                                     |
+| `test:changed` | Run only test suites affected by changed files          |
+| `typecheck`    | Run type check on all `ts` and `vue` files              |
+
+
 _n.b. There are some other scripts defined in the `package.json` `"scripts"` field, but they are mostly for CI or cleanup post-build, etc. You shouldn't need them._

bin/pdap-design-system-cli.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 import minimist from 'minimist';
 import cli from '../cli';
+import process from 'process';
 
 // Convert argv to object keyed by argName where --argName is what is passed to CLI
 const args = minimist(process.argv);

cli/index.js

@@ -1,4 +1,5 @@
 import fs from 'fs-extra';
+import process from 'process';
 
 function copyImageAssets(args) {
 	const packageImagesPath =