feat(*): create component package

.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/[email protected].4
+      - uses: wagoid/[email protected].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",
+  ]
+}