nextcloud-libraries · susnux · Nov 27, 2022 · Nov 27, 2022 · Nov 27, 2022 · Nov 27, 2022
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -7,6 +7,8 @@ module.exports = {
 		oc_userconfig: true,
 		appName: true,
 		appVersion: true,
+		TRANSLATIONS: true,
+		SCOPE_VERSION: true,
 	},
 	extends: [
 		'@nextcloud',

diff --git a/.github/workflows/server-styling-update.yml b/.github/workflows/server-styling-update.yml
@@ -14,7 +14,7 @@ jobs:
 
       - name: Download css
         run: |
-          cd styleguide/assets
+          cd docs/.vitepress/theme/assets
           # Fix img css import
           curl https://nextcloud.github.io/server/apps/theming/css/default.css | sed 's|/apps/theming/img|./img|g' > default.css
           # Fix icons and img css import

diff --git a/.gitignore b/.gitignore
@@ -20,9 +20,12 @@ yarn-error.log*
 # Unit test / coverage reports
 coverage
 
+# genereated file
+docs/components
+docs/.vitepress
+
 # Docs compiled build
-styleguide/build/
-styleguide/index.html
+styleguide/*
 
 # Cypress files
 cypress/videos

diff --git a/Makefile b/Makefile
@@ -47,6 +47,7 @@ stylelint-fix:
 clean:
 	rm -rf dist/
 	rm -rf src/fonts/
+	rm -rf styleguide/build/
 
 clean-dev:
 	rm -rf node_modules

diff --git a/build/extract-l10n.js b/build/extract-l10n.js
@@ -1,28 +1,28 @@
-const { GettextExtractor, JsExtractors } = require('gettext-extractor');
+const { GettextExtractor, JsExtractors } = require('gettext-extractor')
 
-let extractor = new GettextExtractor();
+const extractor = new GettextExtractor()
 
 extractor
-    .createJsParser([
-        JsExtractors.callExpression('t', {
-            arguments: {
-                text: 0,
-            }
-        }),
-        JsExtractors.callExpression('n', {
-            arguments: {
-                text: 0,
-                textPlural: 1,
-            }
-        }),
-    ])
-    .parseFilesGlob('./src/**/*.@(ts|js|vue)');
+	.createJsParser([
+		JsExtractors.callExpression('t', {
+			arguments: {
+				text: 0,
+			},
+		}),
+		JsExtractors.callExpression('n', {
+			arguments: {
+				text: 0,
+				textPlural: 1,
+			},
+		}),
+	])
+	.parseFilesGlob('./src/**/*.@(ts|js|vue)')
 
 // remove references to avoid conflicts
 extractor.getMessages().forEach((msg) => {
-    msg.references = [];
-});
-
-extractor.savePotFile('./l10n/messages.pot');
+	msg.references = []
+})
 
-extractor.printStats();
+extractor.savePotFile('./l10n/messages.pot')
+
+extractor.printStats()
diff --git a/build/usernameToColor-export.js b/build/usernameToColor-export.js
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -1,31 +1,7 @@
 import { defineConfig } from 'cypress'
-import { DefinePlugin } from 'webpack'
 import getCompareSnapshotsPlugin  from 'cypress-visual-regression/dist/plugin'
-import path from 'path'
-import webpackConfig from '@nextcloud/webpack-vue-config'
-import webpackRules from '@nextcloud/webpack-vue-config/rules'
 
-import { loadTranslations } from './resources/translations'
-
-const SCOPE_VERSION = Date.now()
-webpackRules.RULE_SCSS.use.push({
-	loader: 'sass-loader',
-	options: {
-		additionalData: `@use 'sass:math'; $scope_version:${SCOPE_VERSION}; @import 'variables'; @import 'material-icons';`,
-		/**
-		 * ! needed for resolve-url-loader
-		 */
-		sourceMap: true,
-		sassOptions: {
-			sourceMapContents: false,
-			includePaths: [
-				path.resolve(__dirname, './src/assets'),
-			],
-		},
-	},
-})
-
-webpackConfig.module.rules = Object.values(webpackRules)
+import viteConfig from './vite.config.mjs'
 
 export default defineConfig({
 	projectId: '3paxvy',
@@ -67,17 +43,8 @@ export default defineConfig({
 
 		devServer: {
 			framework: 'vue',
-			bundler: 'webpack',
-			webpackConfig: async () => {
-				const translations = await loadTranslations(path.resolve(__dirname, './l10n'))
-				webpackConfig.plugins.push(new DefinePlugin({
-					PRODUCTION: false,
-					SCOPE_VERSION,
-					TRANSLATIONS: JSON.stringify(translations),
-				}))
-
-				return webpackConfig
-			},
+			bundler: 'vite',
+			viteConfig,
 		},
 	},
 })
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -9,4 +9,4 @@
   <body>
     <div data-cy-root></div>
   </body>
-</html>
+</html>
diff --git a/cypress/visual/NcAppSidebar/NcAppSidebar-compact.cy.js b/cypress/visual/NcAppSidebar/NcAppSidebar-compact.cy.js
@@ -3,7 +3,7 @@
  *
  * @author Raimund Schlüßler <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -19,6 +19,6 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import BuildAppSidebarTest from './NcAppSidebarMixin'
+import BuildAppSidebarTest from './NcAppSidebarMixin.js'
 
 BuildAppSidebarTest(true)
diff --git a/cypress/visual/NcAppSidebar/NcAppSidebar.cy.js b/cypress/visual/NcAppSidebar/NcAppSidebar.cy.js
@@ -3,7 +3,7 @@
  *
  * @author Raimund Schlüßler <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -19,6 +19,6 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import BuildAppSidebarTest from './NcAppSidebarMixin'
+import BuildAppSidebarTest from './NcAppSidebarMixin.js'
 
 BuildAppSidebarTest(false)
diff --git a/cypress/visual/NcAppSidebar/NcAppSidebarMixin.js b/cypress/visual/NcAppSidebar/NcAppSidebarMixin.js
@@ -26,8 +26,8 @@ import NcAppSidebar from '../../../src/components/NcAppSidebar/NcAppSidebar.vue'
 import NcActionButton from '../../../src/components/NcActionButton/NcActionButton.vue'
 
 // Server CSS styles
-import '../../../styleguide/assets/icons.css'
-import '../../../styleguide/assets/additional.css'
+import '../../../docs/.vitepress/theme/assets/icons.css'
+import '../../../docs/.vitepress/theme/assets/additional.css'
 
 /**
  * We need this custom style because we run the AppSidebar component without a Content component,

diff --git a/docgen.config.js b/docgen.config.js
@@ -0,0 +1,24 @@
+const { defineConfig } = require('vue-docgen-cli')
+const fs = require('fs')
+
+const generatePages = () => {
+	const path = 'src/components'
+	return fs.readdirSync(path)
+		.filter(file => fs.statSync(`${path}/${file}`).isDirectory())
+		.map(file => {
+			return {
+				components: `${file}/*.vue`,
+				outFile: `${file}.md`,
+			}
+		})
+}
+
+module.exports = defineConfig({
+	componentsRoot: 'src/components',
+	docsRepo: 'nextcloud/nextcloud-vue',
+	docsBranch: 'master',
+	editLinkLabel: 'Fork me on GitHub',
+	outDir: 'docs/components',
+
+	pages: generatePages(),
+})
diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
@@ -0,0 +1,110 @@
+import * as path from "path";
+import * as fs from 'fs'
+import { fileURLToPath } from "url";
+import { defineConfig } from "vitepress";
+import { SearchPlugin } from 'vitepress-plugin-search'
+import PackageJSON from '../../package.json'
+import vueLiveMd from './vue-live-md-it.mjs'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const version = PackageJSON.version
+const docsPath = path.resolve(__dirname, '..')
+
+/**
+ * Generate list of all components grouped by functionality for sidebar menu
+ * 
+ * @returns {import('vitepress').DefaultTheme.SidebarItem[]}
+ */
+function getComponents() {
+	const sections = {}
+
+	fs.readdirSync(path.resolve(docsPath, 'components'))
+		.forEach(file => {
+			const name = file.replace('.md', '')
+			const words = name.split(/(?=[A-Z])/)
+			const section = words
+				.slice(0, (words[1] === 'App' && words.length >= 3 ? 3 : 2))
+				.join('')
+				.replace(/s$/, '') // fix NcActions
+			if (!(section in sections)) sections[section] = []
+			sections[section].push(name)
+		})
+
+	return Object.keys(sections)
+		.sort()
+		.map(section => {
+			// Get base component as first entry, sort is not enogh because of `NcActions` vs `NcActionX`
+			const first = sections[section].sort((p, q) => p.length - q.length)[0]
+			const other = sections[section].filter(p => p !== first).sort()
+			return {
+				text: section,
+				items: [
+					first,
+					...other
+				].map(file => ({ text: file, link: `/components/${file}` }))
+			}
+		})
+}
+
+
+// Plugin for stripping out <docs> sections from vue files
+const vueDocsPlugin = {
+	name: 'vue-i18n',
+	transform(code, id) {
+		if (!/vue&type=doc/.test(id)) {
+			return
+		}
+		return 'export default ""'
+	},
+}
+
+export default defineConfig({
+	title: '@nextcloud/vue',
+	description: 'Vue.js components for Nextcloud app development',
+
+	ignoreDeadLinks: true,
+
+	themeConfig: {
+		logo: 'https://nextcloud.com/wp-content/uploads/2022/10/nextcloud-logo-blue-transparent.svg',
+		nav: [
+			{
+				text: `${version}`, items: [
+					{ text: 'Changelog', link: `https://github.com/nextcloud/nextcloud-vue/blob/v${version}/CHANGELOG.md` },
+				]
+			},
+		],
+		sidebar: [
+			{
+				text: 'Components',
+				collapsible: true,
+				collapsed: true,
+				items: getComponents(),
+			},
+			{
+				items: [{
+					text: 'Directives',
+					link: '/directives'
+				}]
+			},
+		],
+		socialLinks: [
+			{
+				icon: 'github',
+				link: 'https://github.com/nextcloud/nextcloud-vue'
+			}
+		],
+	},
+
+	outDir: '../styleguide',
+	vite: {
+		plugins: [vueDocsPlugin, SearchPlugin()],
+	},
+
+	markdown: {
+		config(md){
+			md.use(vueLiveMd)
+		},
+	},
+})
diff --git a/styleguide/assets/additional.css → docs/.vitepress/theme/assets/additional.css b/styleguide/assets/additional.css → docs/.vitepress/theme/assets/additional.css
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,4 +9,4 @@ @@
       <body>
         <div data-cy-root></div>
       </body>
-    </html>
+    </html>