WIP

.eslintrc.json

@@ -1,41 +1,44 @@
 {
- "globals": {
- "EMOJIS": true,
- "PRODUCTION": true,
- "SCOPE_VERSION": true,
- "TRANSLATIONS": true,
- "oc_userconfig": true,
- "appName": true,
- "appVersion": true
- },
- "extends": [
- "@nextcloud/eslint-config/vue3"
- ],
- "parserOptions": {
- "babelOptions": {
- "plugins": [
- "@babel/plugin-syntax-import-assertions"
- ]
- }
- },
- "rules": {
- "@nextcloud/no-deprecations": [
- "error",
- {
- "parseAppInfo": false
- }
- ],
- "@nextcloud/no-removed-apis": [
- "error",
- {
- "parseAppInfo": false
- }
- ],
- "import/no-unresolved": [
- "error",
- {
- "ignore": ["\\?raw$"]
- }
- ]
- }
+ "globals": {
+ "EMOJIS": true,
+ "PRODUCTION": true,
+ "SCOPE_VERSION": true,
+ "TRANSLATIONS": true,
+ "oc_userconfig": true,
+ "appName": true,
+ "appVersion": true
+ },
+ "extends": [
+ "@nextcloud/eslint-config/vue3",
+ "plugin:storybook/recommended"
+ ],
+ "parserOptions": {
+ "babelOptions": {
+ "plugins": [
+ "@babel/plugin-syntax-import-assertions"
+ ]
+ }
+ },
+ "rules": {
+ "@nextcloud/no-deprecations": [
+ "error",
+ {
+ "parseAppInfo": false
+ }
+ ],
+ "@nextcloud/no-removed-apis": [
+ "error",
+ {
+ "parseAppInfo": false
+ }
+ ],
+ "import/no-unresolved": [
+ "error",
+ {
+ "ignore": [
+ "\\?raw$"
+ ]
+ }
+ ]
+ }
 }

.gitignore

@@ -32,3 +32,5 @@ styleguide/index.html
 /playwright-report/
 /blob-report/
 /tests/component/setup/.cache/
+
+*storybook.log

.storybook/globals.mock.ts

@@ -0,0 +1,110 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * From server util.js
+ *
+ * @param {string} t The string to chunkify
+ * @return {Array}
+ */
+function chunkify(t) {
+ // Adapted from http://my.opera.com/GreyWyvern/blog/show.dml/1671288
+ const tz = []
+ let x = 0
+ let y = -1
+ let n = 0
+ let c
+
+ while (x < t.length) {
+ c = t.charAt(x) // only include the dot in strings
+
+ const m = !n && (c === '.' || (c >= '0' && c <= '9'))
+
+ if (m !== n) {
+ // next chunk
+ y++
+ tz[y] = ''
+ n = m
+ }
+
+ tz[y] += c
+ x++
+ }
+
+ return tz
+}
+
+// Global variables
+window._oc_webroot = ''
+
+window.OC = {
+ debug: true,
+ getCurrentUser() {
+ return {
+ uid: 'admin',
+ displayName: 'Administrator',
+ }
+ },
+ generateUrl() {
+ return 'https://raw.githubusercontent.com/nextcloud/promo/master/nextcloud-icon.png'
+ },
+ getLanguage() {
+ return 'en'
+ },
+ isUserAdmin() {
+ return true
+ },
+ config: {},
+ Util: {
+ /**
+ * Compare two strings to provide a natural sort
+ *
+ * @param {string} a first string to compare
+ * @param {string} b second string to compare
+ * @return {number} -1 if b comes before a, 1 if a comes before b
+ * or 0 if the strings are identical
+ */
+ naturalSortCompare: function naturalSortCompare(a, b) {
+ let x
+ const aa = chunkify(a)
+ const bb = chunkify(b)
+
+ for (x = 0; aa[x] && bb[x]; x++) {
+ if (aa[x] !== bb[x]) {
+ const aNum = Number(aa[x])
+ const bNum = Number(bb[x]) // note: == is correct here
+
+ /* eslint-disable-next-line */
+ if (aNum == aa[x] && bNum == bb[x]) {
+ return aNum - bNum
+ } else {
+ // Note: This locale setting isn't supported by all browsers but for the ones
+ // that do there will be more consistency between client-server sorting
+ return aa[x].localeCompare(bb[x], OC.getLanguage())
+ }
+ }
+ }
+
+ return aa.length - bb.length
+ },
+ },
+ coreApps: [
+ '',
+ 'admin',
+ 'log',
+ 'core/search',
+ 'core',
+ '3rdparty',
+ ],
+ appswebroots: {
+ calendar: '/apps/calendar',
+ deck: '/apps/deck',
+ files: '/apps/files',
+ spreed: '/apps/spreed',
+ },
+ webroot: '',
+}
+window.OCA = {}
+window.appName = 'nextcloud-vue'

.storybook/http.mock.ts

@@ -0,0 +1,41 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+// A copy of styleguide/global.requires.js
+// TODO: use proper mocking with msw.io
+// @ts-nocheck
+
+import axios from '@nextcloud/axios'
+
+const USER_GROUPS = [
+ { id: 'admin', displayname: 'The administrators' },
+ { id: 'accounting', displayname: 'Accounting team' },
+ { id: 'developer', displayname: 'Engineering team' },
+ { id: 'support', displayname: 'Support crew' },
+ { id: 'users', displayname: 'users' },
+]
+
+/**
+ * Mock some requests for docs
+ *
+ * @param {object} error Axios error
+ */
+function mockRequests(error) {
+ const { request } = error
+ let data = null
+
+ // Mock requesting groups
+ const requestGroups = request.responseURL.match(/cloud\/groups\/details\?search=([^&]*)&limit=\d+$/)
+ if (requestGroups) {
+ data = { groups: USER_GROUPS.filter(e => !requestGroups[1] || e.displayname.startsWith(requestGroups[1]) || e.id.startsWith(requestGroups[1])) }
+ }
+
+ if (data) {
+ return Promise.resolve({ data: { ocs: { data } } })
+ }
+ return Promise.reject(error)
+}
+
+axios.interceptors.response.use((r) => r, e => mockRequests(e))

.storybook/main.ts

@@ -0,0 +1,24 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+
+const config: StorybookConfig = {
+ stories: ['../docs/**/*.mdx', '../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+ addons: [
+ // Collection of essential addons like actions, controls, backgrounds, viewport, etc.
+ '@storybook/addon-essentials',
+ // Links between stories
+ '@storybook/addon-links',
+ // Allows to see and edit the source code of a story
+ '@storybook/addon-storysource',
+ ],
+
+ framework: {
+ name: '@storybook/vue3-vite',
+ options: {
+ // vue-component-meta is recommended for Vue 3 and will be the default in the future
+ docgen: 'vue-component-meta',
+ },
+ },
+}
+
+export default config

.storybook/preview.ts

@@ -0,0 +1,34 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Preview } from '@storybook/vue3'
+
+import './styles.mock.ts'
+import './http.mock.ts'
+import './globals.mock.ts'
+
+const preview: Preview = {
+ parameters: {
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/i,
+ },
+ },
+ },
+
+ decorators: [
+ (_, { parameters }) => {
+ const { pageLayout } = parameters
+ // TODO: add layouts for app navigation/sidebar
+ switch (pageLayout) {
+ default:
+ return { template: '<story/>' };
+ }
+ },
+ ]
+}
+
+export default preview

.storybook/styles.mock.ts

@@ -0,0 +1,7 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import '../styleguide/assets/icons.css'
+import '../styleguide/assets/additional.css'

README.md

@@ -73,6 +73,7 @@ Our awesome translation community will then be notified and a bot will sync thos
 
 Nonetheless, it requires a bit of caution.
 When you implement a translated string, import the `translate` or `translatePlural` and add it in your methods like so:
+
 ```vue
 <template>
  <element>
@@ -93,13 +94,15 @@ export default {
 
 Please note that using a translated string as an attribute will _NOT_ work.
 But it will work if it's within an element (like the example above)
+
 ```vue
 <template>
  <element :prop="t('This will not work')" />
 </template>
 ```
 
 You will instead have to define the string in the data section and use the relevant variable reference.
+
 ```vue
 <template>
  <element :prop="chooseProp" />