feat(*): initial commit 🎉

.czrc

@@ -0,0 +1,8 @@
+{
+  "path": "./node_modules/@digitalroute/cz-conventional-changelog-for-jira",
+  "skipScope": false,
+  "jiraOptional": true,
+  "jiraLocation": "post-description",
+  "jiraPrepend": "[",
+  "jiraAppend": "]"
+}

.github/CODEOWNERS

@@ -0,0 +1,14 @@
+# These owners will be the default owners for everything in
+# the repo. They will be requested for review whenever someone
+# opens a PR, unless a later match takes precedence.
+* @adamdehaven @jillztom @Kong/team-core-ui
+
+# Workflows & CI
+/.github/ @adamdehaven @jillztom
+
+# ================================================
+# Renovate Bot approvals
+# Allow Kongponents BOT to approve dependency updates
+# These rules MUST remain at the bottom as the last entry
+package.json @kongponents-bot @Kong/team-core-ui @adamdehaven @jillztom
+yarn.lock @kongponents-bot @Kong/team-core-ui @adamdehaven @jillztom

.github/actions/setup-pnpm-with-dependencies/action.yaml

@@ -0,0 +1,60 @@
+name: Setup PNPM with Yarn Dependencies
+description: Reusable composition of setup-node, cache, and pnpm install actions
+inputs:
+  nodejs-version:
+    description: 'Version of NodeJS to use (ex: 20.11.0)'
+    default: '20.11.0'
+  force-install:
+    description: When 'true', pnpm install will be executed regardless of a cache hit
+    required: false
+    default: 'false'
+  frozen-lockfile:
+    description: When false, pnpm install will use the --no-frozen-lockfile flag
+    required: false
+    default: 'true'
+outputs:
+  cache-hit:
+    description: Whether or not there was a cache hit
+    value: ${{ steps.dependency-cache.outputs.cache-hit }}
+runs:
+  using: composite
+  steps:
+
+    - name: get Node version
+      id: node-version
+      shell: bash
+      run: |
+        voltaNodeVersion=$(cat package.json|jq -r ".volta.node")
+        if [[ $voltaNodeVersion == null ]]; then
+          voltaNodeVersion="${{ inputs.nodejs-version }}"
+        fi
+        voltaPnpmVersion=$(cat package.json|jq -r ".volta.pnpm")
+        if [[ $voltaPnpmVersion == null ]]; then
+          voltaPnpmVersion="8.10.5"
+        fi
+
+        echo "node-version=${voltaNodeVersion}">> $GITHUB_OUTPUT
+        echo "pnpm-version=${voltaPnpmVersion}">> $GITHUB_OUTPUT
+
+    - name: Setup Node
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ steps.node-version.outputs.node-version }}
+
+    - name: Install PNPM
+      shell: bash
+      run: |
+        npm i -g pnpm@${{ steps.node-version.outputs.pnpm-version }}
+        pnpm --version
+
+    - name: Dependency Cache
+      id: dependency-cache
+      uses: actions/cache@v3
+      with:
+        path: '**/node_modules'
+        key: pnpm-${{ steps.node-version.outputs.pnpm-version }}-${{ steps.node-version.outputs.node-version }}-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+    - name: Install Dependencies
+      if: ${{ inputs.force-install == 'true' || steps.dependency-cache.outputs.cache-hit != 'true' }}
+      shell: bash
+      run: pnpm i${{ inputs.frozen-lockfile == 'false' && ' --no-frozen-lockfile' || '' }}

.github/workflows/auto-approve.yaml

@@ -0,0 +1,21 @@
+---
+name: Renovate Bot dependency updates auto-merge
+
+permissions:
+  pull-requests: write
+  contents: write
+
+on: pull_request_target
+
+jobs:
+  renovate-autoapprove:
+    runs-on: ubuntu-latest
+    if: ${{ github.actor == 'renovate[bot]' }}
+    timeout-minutes: 5
+    steps:
+      - name: Approve a PR
+        run: gh pr review --approve "$PR_URL"
+        env:
+          PR_URL: ${{ github.event.pull_request.html_url }}
+          # Use the bot account PAT to allow auto-approve and merge the PRs
+          GITHUB_TOKEN: ${{ secrets.KONGPONENTS_BOT_PAT }}

.github/workflows/test.yaml

@@ -0,0 +1,27 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    name: Lint, Build, and Test
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup PNPM with Dependencies
+        uses: ./.github/actions/setup-pnpm-with-dependencies/
+        with:
+          force-install: true
+
+      - name: Build
+        run: pnpm build
+
+      - name: Test
+        run: pnpm test

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

.nvmrc

@@ -0,0 +1 @@
+20.11.1

.stylelintrc.cjs

@@ -0,0 +1,22 @@
+module.exports = {
+  extends: [
+    'stylelint-config-html',
+    'stylelint-config-recommended-scss',
+    'stylelint-config-recommended-vue/scss',
+  ],
+  overrides: [
+    {
+      files: [
+        '**/*.vue',
+        '**/*.scss',
+      ],
+      rules: {
+        // Disable the following rules
+        'custom-property-no-missing-var-function': null,
+        'no-descending-specificity': null,
+      },
+    },
+  ],
+  plugins: ['stylelint-order'],
+  rules: { 'order/properties-alphabetical-order': true },
+}

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint",
+    "mrmlnc.vscode-scss"
+  ],
+}

README.md

@@ -0,0 +1,196 @@
+# Welcome
+
+Please take the time to read through all of the sections below; we want you to do great! :rocket:
+
+Feel free to reach out to your recruiting contact with any questions or concerns.
+
+## Goal
+
+Modify the provided Vue 3 app to match [this mock](https://www.figma.com/file/swzJVL624G434CVdWi3FLv/Core-UI-Team-Project) as closely as possible while utilizing best-practices to improve the codebase and implement the functional requirements outlined below.
+
+- The provided exercise files are a starting point and they have room for improvement; feel free to modify
+- Don't treat the mock as gospel -- if you see things that don't make sense, ask questions or implement what you think is right
+- In the exercise you are utilizing a local API; however, code your submission as if you are using a production API, accounting for typical issues that can occur
+
+### Links
+
+- Figma Mock: <https://www.figma.com/file/swzJVL624G434CVdWi3FLv/Core-UI-Team-Project>
+- Acceptance criteria: <https://docs.google.com/document/d/1AIXTtrEMZBnfoLYXDlBYiEB-BTk7XNt2QlY7jWYdPv0/edit?tab=t.0#heading=h.8hapmwf98sj>
+
+## Functional Requirements
+
+- [Vue 3](https://vuejs.org/) and TypeScript
+- User should be able to view the name, a brief description, versions available, and other info shown in the mock for services
+- User should be able to search for services ([See search endpoint details below](#searching-the-services-endpoint))
+- User should be able to click on a service to view more details
+- User should be able to paginate through services (client-side implementation)
+- The create Service Package button doesn't have to be operable -- interacting with this elements could do nothing, could be fully implemented (stretch goal), or something in between
+- Please update the `README` in the project with a section to describe your design considerations, assumptions, and trade-offs made during this exercise. Also feel free to include any notes about your submission
+
+## Additional Considerations (if applicable)
+
+- The UI should be responsive and look great at different browser viewport sizes
+- Pixel-perfect implementation
+- Routing and views (e.g. navigating to a given service from its card)
+- State management with [Pinia](https://pinia.vuejs.org/)
+- [Component Tests and/or Unit Tests](#run-component-and-unit-tests-with-vitest-and-optionally-vue-test-utils)
+- Other items covered in your Panel 1 interview
+
+## Evaluation
+
+We will review your code for quality and your ability to talk through it, how you approach the UI, and what tradeoffs you make. Specifically we'll be looking at the following:
+
+- How closely your implementation matches the design along with the other [Functional Requirements](#functional-requirements)
+- Code quality, including appropriate componentization and modularity
+- TypeScript usage
+- Coding (and Vue) best-practices
+- The project should pass type checking and build successfully
+- How you dedicate the allotted time to focus on your strengths
+- Test coverage, if applicable
+
+## How to submit the project
+
+You have up to a week to complete the exercise, but we don't expect you to spend more than a few hours on it.
+
+When it's ready, please send your recruiter a link to the source code in a GitHub repository (no Pull Requests).
+
+---
+
+## Project Setup
+
+### Clone the repository
+
+```sh
+git clone git@github.com:Kong/konnect-team-interview-frontend-exercise.git
+```
+
+### pnpm
+
+This repository uses [`pnpm`](https://pnpm.io) rather than `npm` or `yarn`. [See here for instructions on installing pnpm](https://pnpm.io/installation).
+
+### Install dependencies
+
+```sh
+pnpm install
+```
+
+### Compile and Hot-Reload for Development
+
+Start the backend which serves the `services` API:
+
+```sh
+pnpm dev:server
+```
+
+In a separate terminal, start the Vue app:
+
+```sh
+pnpm dev:ui
+```
+
+## Searching the services endpoint
+
+The local API is available at `http://localhost:4001` after running `pnpm dev:server`.
+
+Searching this endpoint is supported by passing a query string with a value to search with (case-insensitive): `/api/services?q={value}`
+
+**Note**: The search endpoint evaluates all property values as a `string` to determine a match.
+
+### Searchable properties
+
+The search endpoint is configured to search the following fields for each service within the JSON response:
+
+```ts
+{
+  id: string;
+  name: string;
+  description: string;
+  type: string;
+}
+```
+
+### Search example
+
+If I wanted to search for a service with "dogs" in the service name, I would pass the name in the query string:
+
+```sh
+GET: /api/services?q=dogs
+```
+
+### Linting and fixing the code
+
+#### ESLint
+
+```sh
+# Run the linter
+pnpm lint
+
+# Fix linting errors
+pnpm lint:fix
+```
+
+#### Stylelint
+
+```sh
+# Run stylelint
+pnpm stylelint
+
+# Fix stylelint errors
+pnpm stylelint:fix
+```
+
+### Run Component and Unit Tests with [Vitest](https://vitest.dev/) and optionally [Vue Test Utils](https://test-utils.vuejs.org/)
+
+Component and unit test files must be located in the `/src/` directory and have a filename format of `*.spec.ts`. In the starter project, see `src/components/ServiceCatalog.spec.ts` for an example.
+
+```sh
+# Run tests
+pnpm test
+
+# or run the tests in the Vitest UI
+pnpm test:open
+```
+
+### Build and Minify for Production
+
+```sh
+pnpm build
+```
+
+### Preview your built application
+
+First, you'll need to build the app
+
+```sh
+pnpm build
+```
+
+Next, run the API server
+
+```sh
+pnpm dev:server
+```
+
+Now run the `preview` command
+
+```sh
+pnpm preview
+```
+
+### Committing Changes
+
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+
+At Kong, we utilize [Conventional Commits](https://www.conventionalcommits.org/) in all of our repositories. [Commitizen](https://github.com/commitizen/cz-cli) can be used to to help build and enforce commit messages.
+
+If you're unfamiliar with conventional commits, it is **recommended** to use the following command in order to create your commits:
+
+```sh
+# Stage your changes
+git add -A
+
+# Trigger the commitizen CLI to help compose your commit message
+pnpm commit
+```
+
+This will trigger the Commitizen interactive prompt for building your commit message.

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />