sumcumo / nuxt-styleguide Goto Github PK

I have a transparent button with white text.
Would it be possible to add special styling to the component-demo div? Like a background-color and padding for example.

In this example I added the background-color via devtools.

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:

<styleguide-states> looks funny now.
Nothing serious. Just opening this for transparency.

Extend 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

in favour of webpack inline loaders

blocked by nuxt/nuxt#3314

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

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:

• Which .vue files are found in the components directory?
• Which are skipped due to not conforming to the specification?
• How many routes are added under the styleguide path?
• Same for icons, design tokens, documentation pages,…

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.

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:

• Having the tokens in JSON format
• No AST parsing necessary – this choked with using !default for SCSS tokens which was mildly annoying already
• Win: Ability to output the tokens in several formats rather easily

Current state:

The icon route gets rendered, even if there is no content.

expected behaviour: doesn't get rendered

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?