chore: add VS Code code snippets for new components (#5063)

closes #370

Add VSCode emmet snippets that can be used to easily generate initial
boilerplate code for new onyx components. They will atuomatically detect
the filename for correct snippet generation. Just start typing one of
the commands below in a new file and Press Enter/Tab to autofill the
code snippet.

- `onyx-component` for Vue components
- `onyx-component-props` for `types.ts` file
- `onyx-compoennt-storybook` for `.stories.ts` file
- `onyx-component-playwright` for `.ct.tsx` file

(Generated with the help of Gemini :D)

## Checklist

- [x] The added / edited code has been documented with
[JSDoc](https://jsdoc.app/about-getting-started)
- [x] I have performed a self review of my code ("Files changed" tab in
the pull request)

Author: larsrickert

.gitignore

@@ -24,6 +24,7 @@ vite.*.timestamp*
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/*.code-snippets
 .idea
 *.suo
 *.ntvs*

.vscode/onyx.code-snippets

@@ -0,0 +1,103 @@
+{
+  "New onyx component": {
+    "prefix": "onyx-component",
+    "description": "Generates a boilerplate onyx Vue Component based on the filename.",
+    "isFileTemplate": true,
+    "scope": "vue",
+    "body": [
+      "<script lang=\"ts\" setup>",
+      "import { useDensity } from \"../../composables/density.js\";",
+      "import type { ${TM_FILENAME_BASE}Props } from \"./types.js\";",
+      "",
+      "const props = defineProps<${TM_FILENAME_BASE}Props>();",
+      "",
+      "const { densityClass } = useDensity(props);",
+      "</script>",
+      "",
+      "<template>",
+      "  <div :class=\"['onyx-component', '${TM_FILENAME_BASE/^([A-Z])|([a-z])([A-Z])/${1:/downcase}$2${3:+-}${3:/downcase}/g}', densityClass]\">",
+      "    ${1:<!-- add component content here... -->}",
+      "  </div>",
+      "</template>",
+      "",
+      "<style lang=\"scss\">",
+      "@use \"../../styles/mixins/layers.scss\";",
+      "",
+      ".${TM_FILENAME_BASE/^([A-Z])|([a-z])([A-Z])/${1:/downcase}$2${3:+-}${3:/downcase}/g} {",
+      "  @include layers.component() {",
+      "    // add component styles here...",
+      "  }",
+      "}",
+      "</style>",
+      "",
+    ],
+  },
+  "New onyx component properties": {
+    "prefix": "onyx-component-props",
+    "description": "Generates the property type definition for a new onyx component based on the parent folder name.",
+    "include": ["types.ts"],
+    "scope": "typescript",
+    "body": [
+      "import type { DensityProp } from \"../../composables/density.js\";",
+      "",
+      "export type ${TM_DIRECTORY/.*[\\\\\\/](.*)$/$1/}Props = DensityProp & {",
+      "  $1",
+      "};",
+      "",
+    ],
+  },
+  "New onyx Storybook file": {
+    "prefix": "onyx-component-storybook",
+    "description": "Generates a boilerplate onyx Storybook file based on the filename.",
+    "isFileTemplate": true,
+    "scope": "typescript",
+    "include": ["*.stories.ts"],
+    "body": [
+      "import type { Meta, StoryObj } from \"@storybook/vue3-vite\";",
+      "import ${TM_FILENAME_BASE/\\.stories$//} from \"./${TM_FILENAME_BASE/\\.stories$//}.vue\";",
+      "",
+      "const meta: Meta<typeof ${TM_FILENAME_BASE/\\.stories$//}> = {",
+      "  title: \"${1:Support}/${TM_FILENAME_BASE/^Onyx(.*)\\.stories$/$1/}\",",
+      "  component: ${TM_FILENAME_BASE/\\.stories$//},",
+      "};",
+      "",
+      "export default meta;",
+      "type Story = StoryObj<typeof ${TM_FILENAME_BASE/\\.stories$//}>;",
+      "",
+      "export const Default = {",
+      "  args: {",
+      "    ${2:// properties here...}",
+      "  },",
+      "} satisfies Story;",
+      "",
+    ],
+  },
+  "New onyx Playwright test": {
+    "prefix": "onyx-component-playwright",
+    "description": "Generates a boilerplate onyx Playwright screenshot test file based on the filename.",
+    "scope": "typescriptreact",
+    "include": ["*.ct.tsx"],
+    "body": [
+      "import { useFocusStateHooks } from \"@sit-onyx/playwright-utils\";",
+      "import { DENSITIES } from \"../../composables/density.js\";",
+      "import { test } from \"../../playwright/a11y.js\";",
+      "import { executeMatrixScreenshotTest } from \"../../playwright/screenshots.js\";",
+      "import ${TM_FILENAME_BASE/\\.ct$//} from \"./${TM_FILENAME_BASE/\\.ct$//}.vue\";",
+      "",
+      "test.describe(\"Screenshot tests\", () => {",
+      "  executeMatrixScreenshotTest({",
+      "    name: \"${TM_FILENAME_BASE/\\.ct$//}\",",
+      "    columns: DENSITIES,",
+      "    rows: [\"default\", \"hover\", \"focus-visible\", \"active\"],",
+      "    component: (column) => <${TM_FILENAME_BASE/\\.ct$//} density={column} />,",
+      "    hooks: {",
+      "      beforeEach: async (component, page, column, row) => {",
+      "        await useFocusStateHooks({ component, page, state: row });",
+      "      },",
+      "    },",
+      "  });",
+      "});",
+      "",
+    ],
+  },
+}