enable typechecked for sit-onyx

apps/docs/src/.vitepress/components/ColorPalette.vue

@@ -109,8 +109,8 @@ const handleCopy = async (color: string) => {
  </div>
 
  <DesignVariable
- class="palette__copied"
  v-if="copiedColor"
+ class="palette__copied"
  :name="copiedColor"
  :value="`var(--${copiedColor})`"
  type="color"

apps/docs/src/.vitepress/components/ColorStrip.vue

@@ -14,9 +14,9 @@ const props = withDefaults(
 <template>
  <figure class="strip" :class="{ 'strip--horizontal': props.orientation === 'horizontal' }">
  <div
- class="strip__color"
  v-for="color in props.colors"
  :key="color"
+ class="strip__color"
  :style="{ backgroundColor: color }"
  ></div>
  <figcaption v-if="props.name" class="strip__name">{{ props.name }}</figcaption>

apps/docs/src/.vitepress/components/ComponentCard.vue

@@ -42,7 +42,7 @@ const props = defineProps<ComponentCardProps>();
  :target="props.href?.startsWith('http') ? '_blank' : '_self'"
  >
  <div class="card__header">
- <p class="card__due-date" v-if="props.status !== 'implemented'">
+ <p v-if="props.status !== 'implemented'" class="card__due-date">
  Due: {{ props.dueDate || "n/a" }}
  </p>
  <ComponentStatusBadge :status="props.status" class="card__status" />

apps/docs/src/.vitepress/components/IconLibraryItem.vue

@@ -27,7 +27,7 @@ const handleCopy = async () => {
 <template>
  <OnyxTooltip :text="props.icon.tooltipName" position="bottom">
  <template #default="{ trigger }">
- <button type="button" class="icon" @click="handleCopy" v-bind="trigger">
+ <button type="button" class="icon" v-bind="trigger" @click="handleCopy">
  <OnyxIcon :icon="props.icon.content" />
  </button>
  </template>

apps/docs/src/.vitepress/components/OnyxTypography.vue

@@ -69,7 +69,7 @@ const getTextSizeClass = (fontSize?: TextSize) => {
  {{ previewText }}
  </OnyxLink>
 
- <OnyxHeadline v-else :is="variable.htmlTag" :monospace="isMonospace">
+ <OnyxHeadline :is="variable.htmlTag" v-else :monospace="isMonospace">
  {{ previewText }}
  </OnyxHeadline>
  </template>

apps/docs/tsconfig.json

@@ -1,6 +1,6 @@
 {
  "extends": "@vue/tsconfig/tsconfig.dom.json",
- "include": ["env.d.ts", "src/**/*", "src/.vitepress/**/*", "vite.config.ts"],
+ "include": ["env.d.ts", "src/**/*", "tests/**/*", "src/.vitepress/**/*", "vite.config.ts"],
  "compilerOptions": {
  "moduleResolution": "Bundler",
  "baseUrl": ".",

eslint.config.js

@@ -16,18 +16,13 @@ const gitignorePath = fileURLToPath(import.meta.resolve("./.gitignore"));
 export default tsEslint.config(
  eslint.configs.recommended,
  {
- name: "onyx-vue",
+ name: "general-vue-ts",
  files: ["**/*.{ts,tsx,vue}"],
  extends: [
  ...vue.configs["flat/recommended"],
  ...vueA11y.configs["flat/recommended"],
- ...vueTsEslintConfig({ extends: ["recommendedTypeChecked"] }),
+ ...vueTsEslintConfig({ extends: ["recommended"] }),
  ],
- languageOptions: {
- parserOptions: {
- projectService: true,
- },
- },
  rules: {
  "vue/html-self-closing": [
  "error",
@@ -43,6 +38,7 @@ export default tsEslint.config(
  // we want to provide the flexibility to have the autofocus property.
  // whe JSDoc description includes a warning that it should be used carefully.
  "vuejs-accessibility/no-autofocus": "off",
+ // irrelevant rule for vue 3, as it allows multiple root elements
  "vue/no-multiple-template-root": "off",
  "vuejs-accessibility/label-has-for": [
  "error",
@@ -52,7 +48,6 @@ export default tsEslint.config(
  },
  },
  ],
- "vue/no-multiple-template-root": "error",
  "@typescript-eslint/no-unused-expressions": ["error", { allowShortCircuit: true }],
  "@typescript-eslint/ban-ts-comment": [
  "error",
@@ -76,23 +71,46 @@ export default tsEslint.config(
  name: "onyx-playwright",
  files: ["**/*.ct.{js,jsx,ts,tsx}"],
  extends: [playwrightEslintConfig.configs["flat/recommended"]],
+ rules: {
+ "playwright/expect-expect": [
+ "warn",
+ {
+ assertFunctionNames: [
+ "executeChartScreenshotTest",
+ "menuButtonTesting",
+ "navigationTesting",
+ "listboxTesting",
+ "comboboxTesting",
+ "comboboxSelectOnlyTesting",
+ ],
+ },
+ ],
+ },
  },
  {
  name: "onyx-vitest",
  files: ["**/*.spec.{js,jsx,ts,tsx}"],
  extends: [pluginVitest.configs.recommended],
  },
  {
- name: "onyx-packages-figma-utils",
- files: ["**/packages/figma-utils/**"],
+ name: "onyx-no-console",
+ files: ["**/packages/figma-utils/**", "**/scripts/**"],
  rules: {
  "no-console": "off",
  },
  },
  {
  name: "onyx-sit-onyx",
  files: ["**/packages/sit-onyx/**/*"],
- extends: [...vueScopedCss.configs["flat/recommended"]],
+ extends: [
+ ...vueTsEslintConfig({ extends: ["recommendedTypeChecked"] }),
+ ...vueScopedCss.configs["flat/recommended"],
+ ],
+ languageOptions: {
+ parserOptions: {
+ projectService: true,
+ },
+ },
  plugins: { sitOnyx },
  rules: {
  "sitOnyx/import-playwright-a11y": "error",

packages/eslint-plugin/src/index.cjs

@@ -1,6 +1,9 @@
 // @ts-check
 const packageJson = require("../package.json");
 
+/**
+ * @type {import("eslint").ESLint.Plugin}
+ */
 module.exports = {
  meta: {
  name: packageJson.name,

packages/figma-utils/src/commands/import-variables.spec.ts

@@ -22,15 +22,15 @@ describe("import-variables.ts", () => {
  vi.spyOn(process, "cwd").mockReturnValue("test-cwd");
  });
 
- test("should throw error for unknown formats", () => {
+ test("should throw error for unknown formats", async () => {
  const promise = () =>
  importVariablesCommandAction({ ...mockOptions, format: ["does-not-exist"] });
- expect(promise).rejects.toThrowError(
+ await expect(promise).rejects.toThrowError(
  'Unknown format "does-not-exist". Supported: CSS, SCSS, JSON',
  );
  });
 
- test("should throw error for unknown modes", () => {
+ test("should throw error for unknown modes", async () => {
  vi.spyOn(functions, "parseFigmaVariables").mockReturnValue([
  { modeName: "test-mode-1", variables: {} },
  ]);
@@ -40,7 +40,8 @@ describe("import-variables.ts", () => {
  ...mockOptions,
  modes: ["test-mode-1", "does-not-exist"],
  });
- expect(promise).rejects.toThrowError(
+
+ await expect(promise).rejects.toThrowError(
  'Mode "does-not-exist" not found. Available modes: "test-mode-1"',
  );
  });

packages/figma-utils/src/utils/fs.ts

@@ -10,7 +10,7 @@ export const isDirectory = async (path: PathLike): Promise<boolean> => {
  try {
  const stats = await stat(path);
  return stats.isDirectory();
- } catch (e) {
+ } catch (_) {
  return false;
  }
 };

packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeMenuItem/OnyxColorSchemeMenuItem.ct.tsx

@@ -50,6 +50,6 @@ test("should behave correctly", async ({ page, mount }) => {
  await component.update({ props: { modelValue: "light" } });
 
  // ASSERT
- await expect(modelValueEvents).toStrictEqual(["light"]);
+ expect(modelValueEvents).toStrictEqual(["light"]);
  await expect(component).toContainText("Appearance: Light");
 });

packages/sit-onyx/src/composables/useManagedState.ts

@@ -1,4 +1,4 @@
-import { type Ref, computed, ref } from "vue";
+import { type Ref, computed, ref, toValue } from "vue";
 import { asymComputed } from "./asymmetricComputed";
 
 export type ManagedProp<T> = ManagedSymbolType | T;
@@ -39,8 +39,7 @@ export const useManagedState = <
  emit: (val: T) => void,
 ) => {
  const isManaged = computed(() => prop.value === MANAGED_SYMBOL);
- // eslint-disable-next-line vue/no-ref-object-reactivity-loss
- const internalState = ref(isManaged.value ? initialState : prop.value) as Ref<T>;
+ const internalState = ref(toValue(isManaged) ? initialState : prop.value) as Ref<T>;
 
  const state = asymComputed({
  set: (val: T) => {

packages/sit-onyx/src/utils/strings.spec.ts

@@ -17,7 +17,7 @@ test.each([
  { haystack: "ÜBen", needle: "übEn", expected: true },
  { haystack: "ÜBen", needle: "üBen", expected: true },
 ])(
- "should return $expected when $needle is searched in $haystack ",
+ "should return $expected when $needle is searched in $haystack",
  ({ haystack, needle, expected }) => {
  // ACT
  const result = normalizedIncludes(haystack, needle);