sumcumo / nuxt-styleguide Goto Github PK
View Code? Open in Web Editor NEWIncrease the quality and efficiency of product design and development workflows
Home Page: https://sumcumo.github.io/nuxt-styleguide/
License: Apache License 2.0
Increase the quality and efficiency of product design and development workflows
Home Page: https://sumcumo.github.io/nuxt-styleguide/
License: Apache License 2.0
I'm trying to setup the styleguide in a Nuxt project.
For reasons I can't easily figure out, nuxt-styleguide
does not recognise components placed in the component directory. They do conform to the specification, at least one testComponent.vue
which I explicitly built conforming to the spec.
To get a better idea of what is going on while the styleguide is being built, I'd like the package to be more verbose:
.vue
files are found in the components
directory?Right now, the test coverage across the different packages is rather low:
I'd like to improve this quite a bit to make future work on the packages a bit more secure. Can't pin down a definite percentage I want to achieve since a) I don't know whether I'm able to test everything and b) I currently have no idea which parts need testing and which can do without ๐
Something at ~50%
seems like a good first shot, though.
@svewag @escapedcat @Xiphe @fdietz If anyone of you has input here, feel free to comment :)
https://github.com/sumcumo/nuxt-styleguide/blob/master/demo/design-tokens/Colors.scss
Add one more comment like this:
/**
* ### These are the best colors!
*
* @render color
*/
/**
* This color must be used for all backgrounds
*/
// comment
$main-color-with-farily-long-name: whitesmoke;
$contrast: blue;
In the generated output the variable-name for Whitesmoke is missing:
Not a big deal. Just mentioning this.
Warning in CircleCI says:
Projects currently running on CircleCI 1.0 are no longer supported. Please migrate to CircleCI 2.0.
On trying to embellish my examples with some custom slot data, I get the following error:
ERROR in ./components/BannerItem.vue?vue&type=custom&index=0&blockType=nsg-states
Module build failed (from ./node_modules/@sum.cumo/nuxt-styleguide/lib/loaders/states-loader.js):
Error: Couldn't find preset "env" relative to directory "/workspace/dev"
I just dropped the nsg-state block from: https://github.com/sumcumo/nuxt-styleguide/blob/master/demo/docs/docs/working-with-components.md for testing.
I'm running Nuxt 2.3.4
Currently, rendering design tokens works only with *.scss
files (=> https://github.com/sumcumo/nuxt-styleguide/blob/master/packages/nuxt-styleguide/src/loaders/design-token-loader.js#L107 )
I'd like to change this and use Theo for generating design tokens. Things I like about this:
!default
for SCSS tokens which was mildly annoying alreadyExtend Headline.vue
this:
<script>
/**
* ### Meta Warning!
*
* This component is used in the documentation you are just reading.
* It is not part of the re-usable packages and mainly exits for demonstration purposes.
*/
import Highlight from './Highlight.vue'
export default {
name: 'Headline',
components: {
Highlight,
},
...
On startup (yarn start
) this does not throw an error. But if you change something in the file and save this error shows up:
ERROR Failed to compile with 1 errors 17:40:02
error in ./components/Headline.vue
Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
at assertPath (path.js:39:11)
at Object.dirname (path.js:1270:5)
at /Users/foo/nuxt-styleguide/node_modules/vue-docgen-api/dist/utils/getSourceInRequire.js:24:41
at Array.forEach (<anonymous>)
at getSourceInRequire (/Users/foo/nuxt-styleguide/node_modules/vue-docgen-api/dist/utils/getSourceInRequire.js:21:48)
at Object.getSandbox (/Users/foo/nuxt-styleguide/node_modules/vue-docgen-api/dist/utils/getSandbox.js:29:54)
at parseSource (/Users/foo/nuxt-styleguide/node_modules/vue-docgen-api/dist/parse.js:46:25)
at _callee$ (/Users/foo/nuxt-styleguide/packages/nuxt-styleguide/lib/vueDocGenCached.js:15:67)
at tryCatch (/Users/foo/nuxt-styleguide/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (/Users/foo/nuxt-styleguide/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:296:22)
at Generator.prototype.(anonymous function) [as next] (/Users/foo/nuxt-styleguide/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:114:21)
at step (/Users/foo/nuxt-styleguide/packages/nuxt-styleguide/lib/vueDocGenCached.js:41:191)
at /Users/foo/nuxt-styleguide/packages/nuxt-styleguide/lib/vueDocGenCached.js:41:437
at new Promise (<anonymous>)
at /Users/foo/nuxt-styleguide/packages/nuxt-styleguide/lib/vueDocGenCached.js:41:99
at vueDocGenCached (/Users/foo/nuxt-styleguide/packages/nuxt-styleguide/lib/vueDocGenCached.js:29:17)
@ ../.nuxt/router.js 81:8-159
@ ../.nuxt/index.js
@ ../.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ../.nuxt/client.js
https://sumcumo.github.io/nuxt-styleguide/docs/configuration/
Here Configuration in the left sidebar should be highlighted in a way.
If navigating through a long list of components it's easy to get lost where you actually are.
Apparently, the API usage introduced in 392dfdf#diff-9fb54c666ef3230de38f8308486a0d6d is not valid anymore with the current nuxt-version (2.3.0-25694505.cf1aa1a
) โ I got an error on yarn start
when using the project in the current state:
$ yarn start
yarn run v1.12.3
$ cd demo && yarn start $1
$ nuxt
Options undefined 11:05:38
FATAL [ 11:05:38
/Users/markussiering/Sites/nuxt-styleguide/packages/nuxt-styleguide-config/nuxtStyleguideConfig.js:1
TypeError: Cannot read property 'from' of undefined
at Object.<anonymous> (/Users/markussiering/Sites/nuxt-styleguide/packages/nuxt-styleguide-config/nuxtStyleguideConfig.js:59:26)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
]
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ
โ โ Nuxt Fatal Error โ
โ โ
โ TypeError: Cannot read property 'from' of undefined โ
โ โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I did a console.log("Options", Options)
which you might notice. And as you'll notice as well, Options
is undefined.
I couldn't find a quick replacement for this.
Utils
is undefined as well โ doing a plain require('nuxt')
offers this:
$ nuxt
NuxtImport: { 11:17:50
Module: [Function: ModuleContainer],
Nuxt: [Function: Nuxt],
Resolver: [Function: Resolver],
Builder: [Function: Builder],
Generator: [Function: Generator]
}
NuxtImport Utils: undefined
I do not have deep knowledge of the Nuxt@2 API โ maybe someone could help here?
Side note: I got this to work by reverting to the module.export = Object.assign(โฆ)
part that was changed in the commit (and removing the Options.defaults
which of course is also undefined. Since Utils
is undefined as well, I guess that's not a very thorough solution, though :D
Maybe @Xiphe or @escapedcat have an idea about what to do here?
in favour of webpack inline loaders
blocked by nuxt/nuxt#3314
The code highlighting is a bit plain right now. I want to change this.
I liked prism.js in the design system I helped build at Xing. It looks quite nice, is easy to integrate (=> https://www.yasminzy.com/tutorial/prism.html#installation ) and if we're very bored, we could even build an own theme for it. Which isn't even that hard to accomplish :)
Would look similar to this:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.