owncloud · dschmidt · Jan 13, 2023 · Jan 13, 2023 · Jan 13, 2023 · Jan 13, 2023
diff --git a/.npmrc b/.npmrc
@@ -8,6 +8,7 @@ public-hoist-pattern[]=owncloud-sdk
 public-hoist-pattern[]=lodash-es
 public-hoist-pattern[]=mark.js
 public-hoist-pattern[]=fuse.js
+public-hoist-pattern[]=filesize
 
 # @vue/component-compiler-utils
 hoist-pattern[]=sass

diff --git a/Makefile.release b/Makefile.release
@@ -34,6 +34,7 @@ build: build-web copy-config
 .PHONY: build-web
 build-web:
 	$(PNPM) install
+	$(PNPM) check-types
 	$(PNPM) build
 
 .PHONY: copy-config

diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "license": "AGPL-3.0",
   "author": "ownCloud GmbH <[email protected]>",
   "scripts": {
+    "check-types": "tsc --noEmit",
     "build": "vue-demi-fix && pnpm build:tokens && pnpm vite build",
     "build:w": "pnpm build --watch",
     "build:tokens": "pnpm --filter @ownclouders/design-system tokens",
@@ -145,7 +146,8 @@
       "@adobe/[email protected]": "patches/@[email protected]",
       "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]",
+      "[email protected]": "patches/[email protected]"
     }
   },
   "jestSerializer": {

diff --git a/packages/design-system/docs/components/status/ComponentsList.vue b/packages/design-system/docs/components/status/ComponentsList.vue
@@ -63,10 +63,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import orderBy from '../../utils/orderBy'
 
-export default {
+export default defineComponent({
   name: 'ComponentsList',
   data() {
     return {
@@ -90,7 +91,7 @@ export default {
       return orderBy(data, 'name', 'asc')
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

diff --git a/packages/design-system/docs/components/tokens/AllTokens.vue b/packages/design-system/docs/components/tokens/AllTokens.vue
@@ -33,7 +33,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import designTokens from '../../../src/assets/tokens/ods.json'
 
 /**
@@ -42,14 +43,14 @@ import designTokens from '../../../src/assets/tokens/ods.json'
  * To edit these tokens and add more, see
  * [/src/tokens/](https://github.com/owncloud/owncloud-design-system/blob/master/src/tokens).
  */
-export default {
+export default defineComponent({
   name: 'AllTokens',
   data() {
     return {
       tokens: Object.values(designTokens)
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

diff --git a/packages/design-system/docs/components/tokens/ColorTokens.vue b/packages/design-system/docs/components/tokens/ColorTokens.vue
@@ -19,7 +19,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import designTokens from '../../../src/assets/tokens/ods.json'
 
 /**
@@ -29,15 +30,15 @@ import designTokens from '../../../src/assets/tokens/ods.json'
  * like destructive actions and error messages. To edit the colors, see
  * [/src/tokens/color.yml](https://github.com/owncloud/owncloud-design-system/blob/master/src/tokens/color.yml).
  */
-export default {
+export default defineComponent({
   name: 'ColorTokens',
 
   computed: {
     tokens() {
       return Object.values(designTokens).filter((token) => token.name.startsWith('oc-color-'))
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

diff --git a/packages/design-system/docs/components/tokens/FontSize.vue b/packages/design-system/docs/components/tokens/FontSize.vue
@@ -12,7 +12,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import designTokens from '../../../src/assets/tokens/ods.json'
 
 /**
@@ -21,15 +22,15 @@ import designTokens from '../../../src/assets/tokens/ods.json'
  * sizes to a minimum. To edit font-sizes, see
  * [/src/tokens/font-size.yml](https://github.com/owncloud/web/blob/master/packages/design-system/src/tokens/font-size.yml).
  */
-export default {
+export default defineComponent({
   name: 'FontSize',
 
   computed: {
     tokens() {
       return Object.values(designTokens).filter((token) => token.name.startsWith('oc-font-size-'))
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -63,7 +64,7 @@ export default {
 </style>
 
 <docs>
-  ```jsx
+  ```
   <FontSize/>
   ```
 </docs>
diff --git a/packages/design-system/docs/components/tokens/IconList.vue b/packages/design-system/docs/components/tokens/IconList.vue
@@ -66,7 +66,9 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import OcIcon from '../../../src/components/OcIcon/OcIcon.vue'
 import OcTable from '../../../src/components/OcTable/OcTable.vue'
 import OcSearchBar from '../../../src/components/OcSearchBar/OcSearchBar'
@@ -79,7 +81,7 @@ const req = require.context('../../../src/assets/icons/', true, /^\.\/.*\.svg$/)
  *  Icons made by <a href="https://remixicon.com/">Remixicon</a> and, in the case of the `resource-type-*` icons, <a href="https://fontawesome.com/">Font Awesome</a> (available under the [CC-BY-4.0](https://creativecommons.org/licenses/by/4.0/) license).
  * </p>
  */
-export default {
+export default defineComponent({
   name: 'IconList',
   components: { HighlightedText, OcSearchBar, OcIcon, OcTable },
   data() {
@@ -147,7 +149,7 @@ export default {
       return filename.split('.').slice(0, -1).join('.').substring(2)
     })
   }
-}
+})
 </script>
 
 <docs>

diff --git a/packages/design-system/docs/components/tokens/SpacingTokens.vue b/packages/design-system/docs/components/tokens/SpacingTokens.vue
@@ -12,7 +12,9 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import designTokens from '../../../src/assets/tokens/ods.json'
 
 /**
@@ -22,14 +24,14 @@ import designTokens from '../../../src/assets/tokens/ods.json'
  * To edit spacing, see
  * [/src/tokens/spacing.yml](https://github.com/owncloud/web/blob/master/packages/design-system/src/tokens/spacing.yml).
  */
-export default {
+export default defineComponent({
   name: 'SpacingTokens',
   computed: {
     tokens() {
       return Object.values(designTokens).filter((token) => token.name.startsWith('oc-space'))
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

diff --git a/packages/design-system/docs/components/tokens/_HighlightedText.vue b/packages/design-system/docs/components/tokens/_HighlightedText.vue
@@ -22,8 +22,8 @@
   </component>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+export default defineComponent({
   name: 'HighlightedText',
   props: {
     tag: {
@@ -83,7 +83,7 @@ export default {
       ]
     }
   }
-}
+})
 </script>
 
 <style lang="scss">

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -64,7 +64,7 @@
     "deepmerge": "^4.2.2",
     "depcheck": "^1.3.1",
     "file-loader": "^6.2.0",
-    "filesize": "^9.0.9",
+    "filesize": "^9.0.11",
     "focus-trap": "^6.4.0",
     "focus-trap-vue": "^1.1.1",
     "fuse.js": "^6.4.6",
@@ -126,7 +126,7 @@
   },
   "peerDependencies": {
     "@popperjs/core": "^2.4.0",
-    "filesize": "^9.0.9",
+    "filesize": "^9.0.11",
     "focus-trap": "^6.4.0",
     "focus-trap-vue": "^1.1.1",
     "fuse.js": "^6.4.6",

diff --git a/packages/design-system/src/components/OcAccordion/OcAccordion.vue b/packages/design-system/src/components/OcAccordion/OcAccordion.vue
@@ -5,9 +5,10 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcAccordionItem from '../OcAccordionItem/OcAccordionItem.vue'
-export default {
+export default defineComponent({
   name: 'OcAccordion',
   // eslint-disable-next-line vue/no-unused-components
   components: { OcAccordionItem },
@@ -144,7 +145,7 @@ export default {
       this.expandedIdsInternal = this.expandedIdsInternal.filter((expandedId) => expandedId !== id)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">

diff --git a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
@@ -6,11 +6,13 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 /**
  * Count of avatars which weren't displayed.
  */
-export default {
+export default defineComponent({
   name: 'OcAvatarCount',
   status: 'ready',
   release: '2.1.0',
@@ -37,7 +39,7 @@ export default {
       return Math.floor(this.size / 2.5) + 'px'
     }
   }
-}
+})
 </script>
 
 <style lang="scss">

diff --git a/packages/design-system/src/components/OcAvatarFederated/OcAvatarFederated.vue b/packages/design-system/src/components/OcAvatarFederated/OcAvatarFederated.vue
@@ -10,10 +10,11 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcAvatarItem from '../OcAvatarItem/OcAvatarItem.vue'
 
-export default {
+export default defineComponent({
   name: 'OcAvatarFederated',
   status: 'ready',
   release: '10.0.0',
@@ -55,7 +56,7 @@ export default {
       default: 'small'
     }
   }
-}
+})
 </script>
 
 <docs>

diff --git a/packages/design-system/src/components/OcAvatarGroup/OcAvatarGroup.vue b/packages/design-system/src/components/OcAvatarGroup/OcAvatarGroup.vue
@@ -8,10 +8,11 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcAvatarItem from '../OcAvatarItem/OcAvatarItem.vue'
 
-export default {
+export default defineComponent({
   name: 'OcAvatarGroup',
   status: 'ready',
   release: '10.0.0',
@@ -53,7 +54,7 @@ export default {
       default: 'small'
     }
   }
-}
+})
 </script>
 
 <docs>

diff --git a/packages/design-system/src/components/OcAvatarGuest/OcAvatarGuest.vue b/packages/design-system/src/components/OcAvatarGuest/OcAvatarGuest.vue
@@ -10,10 +10,11 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcAvatarItem from '../OcAvatarItem/OcAvatarItem.vue'
 
-export default {
+export default defineComponent({
   name: 'OcAvatarGuest',
   status: 'ready',
   release: '10.0.0',
@@ -55,7 +56,7 @@ export default {
       default: 'small'
     }
   }
-}
+})
 </script>
 
 <docs>

diff --git a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
@@ -19,10 +19,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 
-export default {
+export default defineComponent({
   name: 'OcAvatarItem',
   status: 'ready',
   release: '10.0.0',
@@ -130,7 +131,7 @@ export default {
       return backgroundColors[Math.floor(Math.random() * backgroundColors.length)]
     }
   }
-}
+})
 </script>
 
 <style lang="scss">