Skip to content

Commit

Permalink
chore: migrate design system docs to Vue 3 (#10243)
Browse files Browse the repository at this point in the history
* chore: upgrade vue styleguidist

* Fix acorn issue

* Downgrade vue in design-system

* chore: move docs components together with the rest and migrate codemirror

* refactor: conform to eslint rules

* test: update snapshots and use test utils instead of vue constructor

* refactor: conform to sonarcloud standards

* fix: bring back minicss plugin, resolve tokens collisions and drop docs unit tests

* fix: initial modal focus

---------

Co-authored-by: Dominik Schmidt <[email protected]>
Co-authored-by: Jannik Stehle <[email protected]>
  • Loading branch information
3 people authored Jan 18, 2024

Verified

This commit was signed with the committer’s verified signature.
yunakim714 Yuna Kim
1 parent 5f1f681 commit 1f9946e
Showing 55 changed files with 3,133 additions and 3,060 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -103,7 +103,7 @@
"requirejs": "2.3.6",
"rollup-plugin-node-polyfills": "0.2.1",
"rollup-plugin-visualizer": "5.9.0",
"sass": "1.62.1",
"sass": "1.69.7",
"ts-jest": "29.1.1",
"ts-node": "10.9.2",
"tslib": "2.5.0",
19 changes: 17 additions & 2 deletions packages/design-system/build/build-tokens.js
Original file line number Diff line number Diff line change
@@ -10,12 +10,27 @@ StyleDictionary.extend({
parsers: [
{
pattern: /\.yaml$/,
parse: ({ contents }) => yaml.parse(contents)
parse: ({ contents, filePath }) => {
// This is a bit of a hack to prevent name collisions which would drop the tokens then
if (filePath.split('/').some((n) => n === 'docs')) {
const parsed = yaml.parse(contents)

Object.keys(parsed).forEach((k) => {
parsed['docs-' + k] = parsed[k]

delete parsed[k]
})

return parsed
}

return yaml.parse(contents)
}
}
],
source: [path.join(__dirname, '../src/tokens/**/*.yaml')],
platforms: {
default: {
ods: {
transforms: ['name/cti/kebab', 'transform/ods/namespace'],
buildPath: 'src/assets/tokens/',
files: [
Original file line number Diff line number Diff line change
@@ -2,8 +2,6 @@ module.exports = {
name: 'transform/ods/namespace',
type: 'name',
transformer: function (prop) {
return ['oc', prop.filePath.split('/').some((n) => n === 'docs') ? 'docs' : '', prop.name]
.filter(Boolean)
.join('-')
return ['oc', prop.name].filter(Boolean).join('-')
}
}
2 changes: 0 additions & 2 deletions packages/design-system/build/utils.js
Original file line number Diff line number Diff line change
@@ -41,8 +41,6 @@ exports.cssLoaders = function (options) {
// (which is the case during production build)
if (options.extract) {
loaders.push(MiniCssExtractPlugin.loader)
} else {
loaders.push('vue-style-loader')
}

loaders.push(cssLoader)
108 changes: 61 additions & 47 deletions packages/design-system/build/webpack.base.conf.js
Original file line number Diff line number Diff line change
@@ -12,36 +12,44 @@ function resolve(dir) {
module.exports = {
mode: process.env.NODE_ENV === 'production' ? config.build.mode : config.dev.mode,
context: path.resolve(__dirname, '../'),
entry: {
app: ['./src/system.js']
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath:
process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
extensions: ['.js', '.vue', '.json', '.ts'],
alias: {
vue$: 'vue/dist/vue.esm.js',
vue$: 'vue/dist/vue.esm-bundler.js',
'@': resolve('src')
},
fallback: {
url: require.resolve('url/'),
path: false,
'process/browser': require.resolve('process/browser')
}
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
cacheBusting: config.dev.cacheBusting,
transformAssetUrls: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
use: {
loader: 'vue-loader',
options: {
cacheBusting: config.dev.cacheBusting,
transformAssetUrls: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
}
},
@@ -72,45 +80,51 @@ module.exports = {
},
{
test: /\.(png|jpe?g|gif)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
type: 'asset/resource',
generator: {
filename: 'img/[name].[hash:7][ext]'
}
},
{
test: /\.svg$/,
loader: 'html-loader'
type: 'asset/inline'
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
type: 'asset/resource',
generator: {
filename: 'media/[name].[hash:7][ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
type: 'asset/resource',
generator: {
filename: 'fonts/[name].[hash:7][ext]'
}
},
{
test: /\.(css|scss)$/,
use: [
process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.join(__dirname, '../src/assets/tokens/docs.scss'),
path.join(__dirname, '../src/assets/tokens/ods.scss'),
path.join(__dirname, '../docs/docs.mixins.scss'),
path.join(__dirname, '../docs/docs.functions.scss'),
path.join(__dirname, '../docs/docs.spacing.scss'),
path.join(__dirname, '../src/styles/styles.scss')
]
}
}
]
}
]
},
plugins: [new VueLoaderPlugin(), new MiniCssExtractPlugin({ filename: 'style.css' })],
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
plugins: [new VueLoaderPlugin(), new MiniCssExtractPlugin({ filename: 'style.css' })]
}
6 changes: 6 additions & 0 deletions packages/design-system/changelog/unreleased/bugfix-docs-build
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
Bugfix: Migrate build process of documentation to the latest versions

We've bumped build dependencies of the Design system to support Vue 3 and fix the build of documentation.

https://github.com/owncloud/web/issues/10233
https://github.com/owncloud/web/pull/10243
52 changes: 11 additions & 41 deletions packages/design-system/config/docs.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
const path = require('path')
const baseConfig = require('../build/webpack.base.conf.js')
const { merge } = require('webpack-merge')
const packageConfig = require('../package.json')
const chalk = require('chalk')

@@ -9,6 +8,7 @@ module.exports = {
* Name of your design system. Changes both page title and sidebar logo.
*/
title: 'ownCloud Design System',
webpackConfig: baseConfig,
/**
* Most of the styles are defined in /docs/docs.styles.scss
*/
@@ -21,7 +21,6 @@ module.exports = {
monospace: ['Consolas', "'Liberation Mono'", 'Menlo', 'monospace']
}
},
renderRootJsx: path.join(__dirname, '../docs/components/Preview.js'),
/**
* Define a custom code highlighting theme.
*/
@@ -37,12 +36,13 @@ module.exports = {
* Enabling the below option will break things in ownCloud Design System!
*/
skipComponentsWithoutExample: false,
renderRootJsx: '../docs/components/Preview.js',
/**
* We’re defining below JS and SCSS requires for the documentation.
*/
require: [
path.join(__dirname, '../docs/docs.helper.js'),
path.join(__dirname, '../docs/docs.styles.scss')
path.join(__dirname, '../docs/docs.styles.scss'),
path.join(__dirname, '../docs/docs.helper.js')
],
/**
* Enabling the following option splits sections into separate views.
@@ -52,9 +52,6 @@ module.exports = {
{
name: 'Getting Started',
content: '../docs/getting-started.md',
// Needs to be loaded in somewhere as this is also shown in
// components overviews.
components: '../docs/components/status/**/[A-Z]*.vue',
sectionDepth: 1,
exampleMode: 'hide',
usageMode: 'hide'
@@ -86,12 +83,13 @@ module.exports = {
sectionDepth: 1,
exampleMode: 'hide',
usageMode: 'hide',
components: () => [
'../docs/components/tokens/IconList.vue',
'../docs/components/tokens/ColorTokens.vue',
'../docs/components/tokens/FontSize.vue',
'../docs/components/tokens/SpacingTokens.vue',
'../docs/components/tokens/AllTokens.vue'
sections: [
{
name: 'Icons',
content: '../docs/icons.md',
exampleMode: 'hide',
usageMode: 'hide'
}
]
},
{
@@ -209,34 +207,6 @@ module.exports = {
'**/*.spec.js',
'**/*.spec.jsx'
],
webpackConfig: merge(baseConfig, {
module: {
rules: [
{
test: /\.(css?|scss|sass)(\?.*)?$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.join(__dirname, '../src/assets/tokens/docs.scss'),
path.join(__dirname, '../src/assets/tokens/ods.scss'),
path.join(__dirname, '../docs/docs.mixins.scss'),
path.join(__dirname, '../docs/docs.functions.scss'),
path.join(__dirname, '../docs/docs.spacing.scss'),
path.join(__dirname, '../src/styles/styles.scss')
]
}
}
]
}
]
}
}),
styleguideDir: '../dist/docs',
printServerInstructions() {},
printBuildInstructions(config) {
2 changes: 1 addition & 1 deletion packages/design-system/docs/components.md
Original file line number Diff line number Diff line change
@@ -5,5 +5,5 @@ You’re looking at ownCloud Design System’s demo <code>UI Components</code>.
## Overview

```
<components-list />
<docs-components-list />
```
Loading

0 comments on commit 1f9946e

Please sign in to comment.