Implement document VSCode emmet snippets

[larsrickert]

Why?

For onyx developers and contributors, we want to provide VSCode emmet snippets to quickly create a new .vue, .stories.ts and .ct.tsx file for a new component.

Acceptance criteria

• [ ] the .vue snippet is documented in the GitHub Wiki
  • [ ] includes the usual density styles
  • [ ] includes the usual css layer setup
  • [ ] includes a default skeleton setup
• [ ] the .stories.ts snippet is documented in the GitHub Wiki
• [ ] the .ct.tsx snippet is documented in the GitHub Wiki

Definition of Done

• [ ] covered by component tests
• [ ] screenshot tests are updated
• [ ] follow-up tickets were created if necessary
• [ ] updated version + documentation is deployed
• [ ] Storybook can show the feature
• [ ] Set task to In review

Review

• add link to deployed storybook
• add link to deployed docs
• [ ] approved by designer @jannick-ux
• [ ] approved by dev add dev tag

Implementation details

• for snippets, see the comment below
• VSCode docs

[larsrickert]

For .vue:

{
  "onyx component": {
    "prefix": "onyx-component",
    "description": "Create a basic onyx Vue.js Single-File-Component",
    "body": [
      "<script lang=\"ts\" setup>",
      "const props = defineProps<{",
      "  modelValue?: unknown;",
      "}>();",
      "",
      "const emit = defineEmits<{",
      "  'update:modelValue': [value: unknown];",
      "}>();",
      "</script>",
      "",
      "<template>",
      "  <div>$TM_FILENAME_BASE.vue works!</div>",
      "</template>",
      "",
      "<style lang=\"scss\"></style>",
      ""
    ]
  }
}

For .stories.ts:

{
  "onyx storybook": {
    "prefix": ["onyx-storybook"],
    "description": "Empty onyx Storybook file for vue component.",
    "body": [
      "import { defineStorybookActionsAndVModels } from \"@sit-onyx/storybook-utils\";",
      "import type { Meta, StoryObj } from \"@storybook/vue3\";",
      "import ${1:MyComponent} from \"./${1:MyComponent}.vue\";",
      "",
      "const meta: Meta<typeof ${1:MyComponent}> = {",
      "  title: \"components/${1:MyComponent}\",",
      "  ...defineStorybookActionsAndVModels({",
      "    component: ${1:MyComponent},",
      "    events: [],",
      "  }),",
      "};",
      "",
      "export default meta;",
      "type Story = StoryObj<typeof ${1:MyComponent}>;",
      "",
      "export const Default = { args: {} } satisfies Story;",
      ""
    ]
  }
}

For .ct.tsx:

{
  "onyx component test": {
    "prefix": ["onyx-playwright-ct"],
     "description": "Basic Playwright component test for a onyx component",
     "body": [
      "import { expect, test } from \"../../playwright-axe\";",
      "import ${1:MyComponent} from \"./${1:MyComponent}.vue\";",
      "",
      "test(\"should render\", async ({ mount, makeAxeBuilder }) => {",
      "  // ARRANGE",
      "  const component = await mount(<${1:MyComponent} />);",
      "",
      "  // ASSERT",
      "  await expect(component).toHaveScreenshot(\"default.png\");",
      "",
      "  // ACT",
      "  const accessibilityScanResults = await makeAxeBuilder().analyze();",
      "",
      "  // ASSERT",
      "  expect(accessibilityScanResults.violations).toEqual([]);",
      "});",
      ""
     ]
  }
}

[BoppLi]

Note: the contribution docs in the docu app at http://localhost:5173/principles/contributing.html#developing-components should be updated, when

• 1609

  is merged