feat: initial ci/cd pipeline (#31)

* test: update misc snapshots

* ci: add test:ci script for quiet console output

* build(files): update package.json

* ci: add github actions
Pull: runs build, lint, test,
Release: runs above, then releases via semantic-release

* docs: rename doc dir -> docs

* chore(deps): add semantic release

* refactor(workflows): miscellaneous edits

* chore(deps): use node v20.6.1

* chore(directories): move cli to top level

* chore(deps): add commitizen

add commitizen, add conventional changelog adapter

* fix(components): update miscellaneous styles per stylelint

* chore(deps): add and configure husky and lint-staged

* docs(contributing): move -> docs/

* chore(husky): add pre-push hook to run tests

* refactor(tools): move tools src -> ./

* feat(config): export tailwind config with library

* fix(lint): update linting config

* chore: misc updates to package scripts

* docs(readme,contributing): update miscellaneous docs

document new scripts and build process

* fix(build): use quiet test script in pre-push hook

* fix(ci): update workflow actions

use checkout@v4, fetch depth 0 for lint script

.eslintignore

@@ -5,6 +5,3 @@ node_modules
 dist
 
 *.config.*
-cli
-bin
-# TODO: remove bin and cli once they are converted to TS

.github/workflows/pull.yaml

@@ -0,0 +1,67 @@
+name: Pull Request
+
+on:
+  pull_request:
+
+jobs:
+  setup:
+    name: Setup
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel previous
+        uses: styfle/cancel-workflow-action@0.11.0
+        with:
+          access_token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+      - name: Install deps 🧶
+        run: npm ci
+
+
+  lint:
+    needs: setup
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+      - run: npm ci
+      - name: Lint commit messages 🗂️
+        run: npx commitlint --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }} --verbose
+      - name: Lint TS and CSS 🎨
+        run: npm run lint
+
+  test:
+    needs: setup
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+      - run: npm ci
+      - name: Run tests 📋
+        run: npm run test:ci
+
+  build:
+    needs: setup
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+      - run: npm ci
+      - name: Build lib 👷‍♂️
+        run: npm run build
+

.github/workflows/release.yaml

@@ -0,0 +1,62 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  issues: write
+  pull-requests: write
+  id-token: write
+
+jobs:
+  setup:
+    name: Setup
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel previous
+        uses: styfle/cancel-workflow-action@0.11.0
+        with:
+          access_token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+      - name: Install deps 🧶
+        run: npm ci
+
+  release:
+    name: Release
+    needs: setup
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+
+      - name: Install deps 🧶
+        run: npm ci
+
+      - name: Lint TS and CSS 🎨
+        run: npm run lint
+
+      - name: Lint commit messages 🗂️
+        run: npx commitlint --from HEAD~1 --to HEAD
+
+      - name: Run tests 📋
+        run: npm run test:ci
+
+      - name: Build lib 👷‍♂️
+        run: npm run build
+
+      - name: Release 🚀🚀🚀
+        run: npm exec semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.husky/commit-msg

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+[ -n "$CI" ] && exit 0
+
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}

.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+[ -n "$CI" ] && exit 0
+
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm exec lint-staged

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run test:ci

.lintstagedrc

@@ -0,0 +1,8 @@
+{    
+  "*.{js,jsx,ts,tsx,vue}": [
+      "eslint src --ext .ts ."
+    ],
+  "*.{css,vue}": [
+      "stylelint 'src/**/*.{css,vue}'"
+    ]
+}

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-	"css.validate": false
+	"css.validate": false,
+	"eslint.validate": ["typescript", "javascript", "vue"],
 }

README.md

@@ -13,7 +13,7 @@ npm install pdap-design-system
 2. Import the stylesheet in the app's entrypoint (usually `index.js` or `main.js`, at the root of your project)
 
 ```
-// index.js
+// index.js | main.js
 
 import 'pdap-design-system/styles';
 ```
@@ -24,14 +24,33 @@ import 'pdap-design-system/styles';
 import { Button, Form } from 'pdap-design-system';
 ```
 
-4. If your project is using `TypeScript`, the component props definitions and other types are exposed for import as well.  
+4. Import and use the tailwind config (if your project is using tailwind)
+
+```
+// tailwind.config.js
+import { tailwindConfig } from 'pdap-design-system';
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // Spread base config
+  ...tailwindConfig,
+  // Then override with `content` property and any other superseding config (if necessary - it really shouldn't be)
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,css}",
+  ],
+}
+
+```
+
+5. If your 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._
 
 ```
 import { PdapInputTypes } from 'pdap-design-system';
 ```
 
-5. See [the component documentation](./doc/components.md) for details on each component's API.
+6. See [the component documentation](./docs/components.md) for details on each component's API.
 
 ### About images
 
@@ -96,7 +115,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](./CONTRIBUTING.md) for development requirements and tips.
+5. Read the [contributing guide](./docs/CONTRIBUTING.md) for development requirements and tips.
 
 ## Assets
 
@@ -105,14 +124,21 @@ Use this [terminology](https://docs.pdap.io/activities/terms-and-definitions).
 
 ## Scripts reference
 
-| Script         | What it does                                    |
-| -------------- | ----------------------------------------------- |
-| `build`        | Builds the library                              |
-| `build:watch`  | Builds the library and watches for file changes |
-| `clean`        | Removes testing coverage reports after build    |
-| `lint`         | Lint `ts` and `css`                             |
-| `lint:es`      | Lint `ts`                                       |
-| `lint:css`     | Lint `css`                                      |
-| `test`         | Runs full test suite                            |
-| `test:changed` | Runs only test suites affected by changed files |
-| `types`        | Runs type check on all `ts` and `vue` files     |
+| Script         | What it does                                             |
+| -------------- | -------------------------------------------------------- |
+| `_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                                         |
+| `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              |
+_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,6 @@
 #!/usr/bin/env node
 import minimist from 'minimist';
-import cli from '../src/cli/index.js';
+import cli from '../cli';
 
 // Convert argv to object keyed by argName where --argName is what is passed to CLI
 const args = minimist(process.argv);

commitlint.config.js

@@ -0,0 +1 @@
+export default {extends: ['@commitlint/config-conventional']};

config/index.ts

@@ -0,0 +1,5 @@
+// Imports
+import * as tailwindConfig from '../tailwind.config';
+
+// Exports
+export { tailwindConfig };

docs/CONTRIBUTING.md

@@ -0,0 +1,64 @@
+# Contributing
+
+## Tech Stack
+
+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/)
+[Tailwind](https://tailwindui.com/documentation)  
+[TypeScript](https://www.typescriptlang.org/docs/)
+[Vite](https://vitejs.dev/guide/)  
+[Vitest](https://vitest.dev/guide/)  
+[Vue Testing Handbook](https://lmiller1990.github.io/vue-testing-handbook/v3/)  
+[Vue.js](https://vuejs.org/guide/introduction.html)  
+[Vuelidate](https://vuelidate.js.org/)
+
+### Etiquette
+
+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.
+
+Test your changes **locally first**, if possible. Include **screenshots with your PR** if you're changing something visual.
+
+### Setup
+
+1. [Clone the repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).
+2. Install `node@v20.6.1` (Recommended to [use `nvm` to manage `node` versions](https://github.com/nvm-sh/nvm))
+3. `cd` into the project directory `cd design-system` and install dependencies `npm i`
+
+### Workflow
+1. Create a branch prefixed with the appropriate action (e.g. `feature/add-dropdown-component`, `fix/button-border-styles`).
+2. Make your changes.
+3. Commit your changes, using `npm run _commit` (this calls `commitizen`, which guides you through creating a conventional commit).*
+
+
+* [Conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#specification) are strictly enforced. It is generally best to use `npm run _commit` or `cz`, if you have `commitizen` installed globally. Even if you commit using `git commit`, this repository uses `husky` to lint commit messages. If you must skip the pre-commit hook (useful for `git commit --amend`, etc.) you can pass `no-verify` to `git commit`. But we check commit messages again on pull request, so please make sure they are formatted according to the convention.
+#### A few examples
+```
+# example 1
+feat: Button
+
+# example 2
+fix(Button): update border styles
+Bug in post-css causing....
+
+BREAKING CHANGE
+
+# example 3
+docs(README): add button documentation
+Document component API
+```
+
+### Why all this humbuggery about conventional commits?
+Because we use `semantic-release` to auto-generate releases, `CHANGELOG` entries, etc., based on conventional commits, all commits need to follow the convention.
+
+### Testing and verifying changes
+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.