feat(*): create component package (#19)

* feat: alpha branch

* chore(release): 1.0.0-alpha.1 [skip ci]

# 1.0.0-alpha.1 (2024-01-04)

### Features

* alpha branch ([8860869](8860869))
* initial commit 🚀 ([8fe75b2](8fe75b2))

* ci: no preview package for alpha branch

* chore(release): 1.0.0-alpha.1 [skip ci]

# 1.0.0-alpha.1 (2024-01-04)

### Features

* alpha branch ([8860869](8860869))
* initial commit 🚀 ([8fe75b2](8fe75b2))

* fix: update package version

* chore(release): 1.0.0-alpha.1 [skip ci]

# 1.0.0-alpha.1 (2024-01-04)

### Bug Fixes

* update package version ([8384d6b](8384d6b))

### Features

* alpha branch ([8860869](8860869))
* initial commit 🚀 ([8fe75b2](8fe75b2))

* chore: trigger ci

* chore(release): 1.0.0-alpha.1 [skip ci]

# 1.0.0-alpha.1 (2024-01-04)

### Bug Fixes

* update package version ([8384d6b](8384d6b))

### Features

* alpha branch ([8860869](8860869))
* initial commit 🚀 ([8fe75b2](8fe75b2))

* chore: trigger ci

* fix: remove comments

* chore(release): 1.0.0-alpha.25 [skip ci]

# [1.0.0-alpha.25](v1.0.0-alpha.24...v1.0.0-alpha.25) (2024-01-04)

### Bug Fixes

* remove comments ([6803204](6803204))

* test: format and template tests

* feat: download document

* chore(release): 1.0.0-alpha.26 [skip ci]

# [1.0.0-alpha.26](v1.0.0-alpha.25...v1.0.0-alpha.26) (2024-01-07)

### Features

* download document ([934651e](934651e))

* chore: spacing

* fix: min height

* chore(release): 1.0.0-alpha.27 [skip ci]

# [1.0.0-alpha.27](v1.0.0-alpha.26...v1.0.0-alpha.27) (2024-01-07)

### Bug Fixes

* min height ([3d32693](3d32693))

* test: click events

* feat: publish sandbox to github pages

* chore(release): 1.0.0-alpha.28 [skip ci]

# [1.0.0-alpha.28](v1.0.0-alpha.27...v1.0.0-alpha.28) (2024-01-08)

### Features

* publish sandbox to github pages ([687f91f](687f91f))

* chore: update sandbox

* revert: remove mermaid prop

* chore: update markdown example

* chore: update markdown example

* chore: table example

* chore(deps): update dependency stylelint to v16 (#16)

* chore(deps): update dependency stylelint to v16

* chore(deps): update all stylelint deps

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Adam DeHaven <adam.dehaven@konghq.com>

* chore(deps): update dependency @vue/tsconfig to ^0.5.1 (#12)

* chore(deps): update dependency @vue/tsconfig to ^0.5.1

* chore: update tsconfig.build

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Adam DeHaven <adam.dehaven@konghq.com>

* chore: swap out download icon

* fix: switch mermaid theme

* chore(release): 1.0.0-alpha.29 [skip ci]

# [1.0.0-alpha.29](v1.0.0-alpha.28...v1.0.0-alpha.29) (2024-01-08)

### Bug Fixes

* switch mermaid theme ([ab48adc](ab48adc))

### Reverts

* remove mermaid prop ([e8297b2](e8297b2))

* fix: mobile button layout

* chore(release): 1.0.0-alpha.30 [skip ci]

# [1.0.0-alpha.30](v1.0.0-alpha.29...v1.0.0-alpha.30) (2024-01-09)

### Bug Fixes

* mobile button layout ([c878507](c878507))

* fix: list display

* chore(release): 1.0.0-alpha.31 [skip ci]

# [1.0.0-alpha.31](v1.0.0-alpha.30...v1.0.0-alpha.31) (2024-01-09)

### Bug Fixes

* list display ([cbf75e5](cbf75e5))

* fix: completed tasks

* chore(release): 1.0.0-alpha.32 [skip ci]

# [1.0.0-alpha.32](v1.0.0-alpha.31...v1.0.0-alpha.32) (2024-01-09)

### Bug Fixes

* completed tasks ([09d7b46](09d7b46))

* feat: links

* chore(release): 1.0.0-alpha.33 [skip ci]

# [1.0.0-alpha.33](v1.0.0-alpha.32...v1.0.0-alpha.33) (2024-01-09)

### Features

* links ([e3a9db5](e3a9db5))

* feat: dark mode

* chore: remove rule

* feat: dark mode

* feat: dark mode

* fix: color theme

* docs: update readme

* chore(release): 1.0.0-alpha.34 [skip ci]

# [1.0.0-alpha.34](v1.0.0-alpha.33...v1.0.0-alpha.34) (2024-01-10)

### Bug Fixes

* color theme ([fbad8e8](fbad8e8))

### Features

* dark mode ([915ea98](915ea98))
* dark mode ([32f6222](32f6222))
* dark mode ([175a9b3](175a9b3))

* ci: wait for build before publish

* ci: rename job

* chore(renovate): group shikiji dependencies

* fix(deps): update dependency @kong/icons to ^1.8.11 (#22)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency rollup-plugin-visualizer to ^5.12.0 (#21)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(release): 1.0.0-alpha.35 [skip ci]

# [1.0.0-alpha.35](v1.0.0-alpha.34...v1.0.0-alpha.35) (2024-01-12)

### Bug Fixes

* **deps:** update dependency @kong/icons to ^1.8.11 ([#22](#22)) ([9be9db0](9be9db0))

* chore(deps): update all non-major dependencies with stable version (#20)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): udpate shikiji

* fix: renovate config

* chore(release): 1.0.0-alpha.36 [skip ci]

# [1.0.0-alpha.36](v1.0.0-alpha.35...v1.0.0-alpha.36) (2024-01-12)

### Bug Fixes

* **deps:** udpate shikiji ([493ef6f](493ef6f))
* renovate config ([0d42bbb](0d42bbb))

* fix(deps): update dependency @kong/icons to ^1.8.12 (#23)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update all non-major dependencies with stable version (#25)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency markdown-it-textual-uml to ^0.17.1 (#26)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(release): 1.0.0-alpha.37 [skip ci]

# [1.0.0-alpha.37](v1.0.0-alpha.36...v1.0.0-alpha.37) (2024-01-16)

### Bug Fixes

* **deps:** update dependency @kong/icons to ^1.8.12 ([#23](#23)) ([8bb60d4](8bb60d4))
* **deps:** update dependency markdown-it-textual-uml to ^0.17.1 ([#26](#26)) ([38c4b22](38c4b22))

* chore(deps): update all non-major dependencies with stable version (#24)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix: remove border color

* chore(release): 1.0.0-alpha.38 [skip ci]

# [1.0.0-alpha.38](v1.0.0-alpha.37...v1.0.0-alpha.38) (2024-01-16)

### Bug Fixes

* remove border color ([44e2605](44e2605))

* fix(deps): update dependency @kong/icons to ^1.8.13 (#30)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency c8 to v9 (#29)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update all non-major dependencies with stable version (#28)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(release): 1.0.0-alpha.39 [skip ci]

# [1.0.0-alpha.39](v1.0.0-alpha.38...v1.0.0-alpha.39) (2024-01-23)

### Bug Fixes

* **deps:** update dependency @kong/icons to ^1.8.13 ([#30](#30)) ([78ea236](78ea236))

* chore(deps): update all non-major dependencies with stable version (#27)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore: prep for merge to main

* docs: update todo in readme

---------

Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.eslintignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+
+docs/.vitepress/.temp/
+docs/.vitepress/.cache/
+docs/.vitepress/dist/

.eslintrc.cjs

@@ -0,0 +1,80 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
+  },
+  env: {
+    node: true,
+  },
+  plugins: ['vue', 'import', '@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    'standard',
+  ],
+  rules: {
+    quotes: ['error', 'single', {
+      avoidEscape: true,
+    }],
+    'no-multi-spaces': 'error',
+    'no-trailing-spaces': 'error',
+    'no-empty': 'off',
+    'padded-blocks': 'off',
+    'comma-dangle': ['error', 'always-multiline'],
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'max-len': [process.env.NODE_ENV === 'production' ? 'warn' : 'off', {
+      code: 120,
+      ignoreTrailingComments: true,
+      ignoreUrls: true,
+      ignoreStrings: true,
+      ignoreTemplateLiterals: true,
+      ignoreRegExpLiterals: true,
+    }],
+    'space-before-function-paren': 'off',
+    'vue/attributes-order': ['error', {
+      alphabetical: true,
+    }],
+    '@typescript-eslint/no-explicit-any': 'off',
+    // Avoids false errors like “'NodeListOf' is not defined”.
+    'no-undef': 'off',
+    // Turns off some non-TypeScript rules in favor of their specific TypeScript rules to avoid false negatives:
+    indent: 'off',
+    '@typescript-eslint/indent': ['error', 2],
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/space-before-function-paren': ['error', {
+      anonymous: 'never',
+      named: 'never',
+      asyncArrow: 'always',
+    }],
+    // Ensures ESLint understands that `defineEmits<{ ... }>()` does _not_ fail this rule.
+    'func-call-spacing': 'off',
+    '@typescript-eslint/func-call-spacing': 'error',
+    '@typescript-eslint/consistent-type-imports': ['error', {
+      prefer: 'type-imports',
+      fixStyle: 'separate-type-imports',
+    }],
+    'vue/no-restricted-static-attribute': ['error',
+      {
+        key: 'data-test-id',
+        message: 'Using "data-test-id" is not allowed. Use "data-testid" instead.',
+      },
+      {
+        key: 'data-tracking-id',
+        message: 'Using "data-tracking-id" is not allowed. Use "data-testid" instead.',
+      },
+    ],
+    'vue/no-restricted-v-bind': ['error',
+      {
+        argument: 'data-test-id',
+        message: 'Using "data-test-id" is not allowed. Use "data-testid" instead.',
+      },
+      {
+        argument: 'data-tracking-id',
+        message: 'Using "data-tracking-id" is not allowed. Use "data-testid" instead.',
+      },
+    ],
+  },
+}

.github/workflows/commitlint.yaml

@@ -16,6 +16,6 @@ jobs:
       - name: Remove tsconfig
         run: rm tsconfig.json
 
-      - uses: wagoid/commitlint-github-action@v5.4.4
+      - uses: wagoid/commitlint-github-action@v5.4.5
         with:
           configFile: commitlint.config.cjs

.github/workflows/publish.yaml

@@ -4,8 +4,6 @@ on:
   push:
     branches:
       - main
-      - alpha
-      - beta
 
 jobs:
   run-tests:
@@ -14,8 +12,7 @@ jobs:
 
   publish:
       name: Build and Publish
-      needs:
-        - run-tests
+      needs: [run-tests]
       runs-on: ubuntu-latest
       steps:
         - name: Checkout
@@ -49,3 +46,49 @@ jobs:
             GITHUB_TOKEN: ${{ secrets.KONGPONENTS_BOT_PAT }}
             NPM_TOKEN: ${{ secrets.NPM_TOKEN_PUBLIC_PUBLISH }}
 
+  deploy-github-pages:
+    name: Deploy GitHub Pages
+    if: ${{ github.ref == 'refs/heads/main' }}
+    needs: [publish]
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+    # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+    concurrency:
+      group: 'pages'
+      cancel-in-progress: false
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup PNPM with Dependencies
+        uses: ./.github/actions/setup-pnpm-with-dependencies/
+        with:
+          force-install: true
+
+      - name: Build Sandbox
+        env:
+          # Tell the script to use the sandbox directory
+          USE_SANDBOX: true
+        run: pnpm run build:sandbox
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload sandbox/dist directory
+          path: './sandbox/dist'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/test.yaml

@@ -9,8 +9,6 @@ on:
       - labeled
     branches:
       - main
-      - alpha
-      - beta
 
   # Allow calling manually from GitHub
   workflow_dispatch:

.gitignore

@@ -0,0 +1,18 @@
+node_modules
+.DS_Store
+dist
+bin
+*.local
+bundle-analyzer
+
+# Temp files
+
+.temp
+.cache
+.idea
+.husky
+
+docs/.vitepress/.temp
+docs/.vitepress/.cache
+docs/.vitepress/cache
+docs/.vitepress/dist

.nvmrc

@@ -0,0 +1 @@
+20.11.0

.stylelintrc.cjs

@@ -0,0 +1,28 @@
+module.exports = {
+  extends: [
+    'stylelint-config-html',
+    'stylelint-config-recommended-scss',
+    'stylelint-config-recommended-vue/scss'
+  ],
+  plugins: [
+    'stylelint-order',
+    '@kong/design-tokens/stylelint-plugin',
+  ],
+  rules: {
+    'order/properties-alphabetical-order': true,
+    'unit-disallowed-list': [
+      ['rem', 'em'],
+    ],
+    // Only allow @kong/design-tokens or `--kong-ui-*` CSS custom properties
+    'custom-property-pattern': [
+      "^(kui-).+$",
+      {
+        message: "Expected custom property \"%s\" to be sourced from @kong/design-tokens with prefix '--kui-'",
+      }
+    ],
+    '@kong/design-tokens/use-proper-token': true,
+    // Disable the following rules
+    'custom-property-no-missing-var-function': null,
+    'no-descending-specificity': null,
+  }
+}

.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint",
+    "yzhang.markdown-all-in-one",
+    "mrmlnc.vscode-scss"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+  "markdown.extension.toc.levels": "2..3",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
+  },
+  "editor.formatOnPaste": true,
+  "editor.trimAutoWhitespace": true,
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true,
+  "editor.detectIndentation": false,
+  "eslint.format.enable": true,
+  "eslint.validate": [
+    "typescript",
+    "javascript",
+    "javascriptreact",
+    "vue"
+  ],
+  "scss.scannerExclude": [
+    "**/.git",
+    "**/bower_components",
+  ]
+}