Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Feb 06 20:51

    JosefBredereck on migrate-to-nx-workspace

    feat: move dev packages feat: update package structure (compare)

  • Feb 06 07:49

    JosefBredereck on migrate-to-nx-workspace

    (compare)

  • Feb 04 15:19

    JosefBredereck on fix-engine-config-loading

    (compare)

  • Feb 04 15:13
    JosefBredereck labeled #1481
  • Feb 04 15:13
    JosefBredereck labeled #1480
  • Feb 04 15:12
    JosefBredereck assigned #1480
  • Feb 03 21:26
    JosefBredereck commented #1481
  • Feb 03 21:22
    JosefBredereck commented #1480
  • Feb 03 21:17
    JosefBredereck commented #1480
  • Feb 03 08:42
    StfBauer opened #1481
  • Feb 03 08:20
    StfBauer edited #1480
  • Feb 03 08:19
    StfBauer opened #1480
  • Feb 01 20:38
    mfranzke synchronize #1447
  • Feb 01 20:38

    mfranzke on 1446-migrate-from-node-14-to-node-16-new-lts-support

    [skip travis] chore(release): p… fix(twig engine): startup and r… [skip travis] chore(release): p… and 1 more (compare)

  • Feb 01 20:38
    mfranzke synchronize #1459
  • Feb 01 20:38

    mfranzke on 1030-fully-support-htmltwig-suffix

    [skip travis] chore(release): p… fix(twig engine): startup and r… [skip travis] chore(release): p… and 1 more (compare)

  • Feb 01 20:38
    mfranzke synchronize #1467
  • Feb 01 20:38

    mfranzke on 1180-deprecate-pattern-parameters

    [skip travis] chore(release): p… fix(twig engine): startup and r… [skip travis] chore(release): p… and 1 more (compare)

  • Feb 01 20:23

    JosefBredereck on v6.0.1

    (compare)

  • Feb 01 20:23

    JosefBredereck on dev

    [skip travis] chore(release): p… (compare)

Andi
@hadl
@perriard did not used that bundle. but i am using the engine-twig-php and there you can just „extend“ it with a simple function, or filter for trans
10 replies
Stefan Bauer
@StfBauer
Just a quick question: Is there any way to make sure patternlabs always open the patterns in full screen and not at a random size?
4 replies
Josef Bredreck
@JosefBredereck
Release v5.15.0 is live and makes it possible to use node 16 now.
It has a lot of updates, thanks to @mfranzke again 😊
(Somehow I made a minor version update, I don't know what happened)
Maximilian Franzke
@mfranzke
And thanks a lot to you, Josef, for your ongoing support, reviews and feedback !
Rikke Perriard
@perriard
Hi all, I'm having problems with date format localisation - I just need to display a date with twig (weekday and month) in danish instead of english - I guess it's my usual headache; I need more twig functionality, than what comes out of the box with the node version of Pattern lab. ;-) Any chance that this will be included in Pattern lab in the future? And in the meantime, any suggestions for solutions?
1 reply
Andi
@hadl

i am using the bodyClass for theming and use that inside the pseudo-pattern json file.
now, if you list patterns and pseudo patterns that value is not set on the individual pattern containers and not even on the body (which wouldnt be good anyway).
anyone knows on how to get that running? Or is that not possible?

using the node version with twig rendering.

6 replies
Stefan Bauer
@StfBauer

I raised the question probably before but now I have an issue with pattern lab. I need to run it for development locally on HTTPS. The reason I need to embed for one of my projects is a web font from a third-party provider. Sadly this does not support HTTP anymore any only HTTPS.

When I run pattern lab on a GitHub page everything works fine but not for local development. Any idea how to make use of patter lab, while still enable HTTPS? Thanks in advance.

4 replies
Ingo Steinke
@openmindculture

Hi all! I am interested in using pattern lab, but can't get it to install (using npm create pattern-lab and variations with npm mentioned in closed pattern-lab/patternlab-node#1257 and older (2018) gitter discussion ).
After
UnhandledPromiseRejectionWarning: Error: Command failed with exit code 243: npm install @pattern-lab/edition-twig
the installation hangs at
⠧ ⊙ patternlab → Installing edition: @pattern-lab/edition-twig
Node version: v14.17.6
npm version: 7.16.0
Shell: GNU bash, version 5.0.17 on Ubuntu Budgie 20.04.2 LTS

Thanks in advance!

Ingo Steinke
@openmindculture
Now using node v16.10.0 (npm v7.24.0).
Deleted node_modules etc. and did a fresh start using only
npm create pattern-lab, now no more error message after the wizard, but still
the "installing" message with the spinner keeps spinning for several minutes now.
Maybe I am just too impatient. Can't even tell if it is going to finish eventually.
5 replies
Ingo Steinke
@openmindculture
After node update and using a new terminal, there is also a new warning message:
(node:103589) [DEP0128] DeprecationWarning: Invalid 'main' field in '/home/ingo/.npm/_npx/1e487ca7ecaa91bf/node_modules/emitter-mixin/package.json' of 'y'. Please either fix that or report it to the module author
(Use `node --trace-deprecation ...` to show where the warning was created)
? Please specify a directory for your Pattern Lab project. (./)
2 replies
Installation does not hang if I choose "no template language".
But then there is no 'start' target or anything useful in the directory.
1 reply
Ingo Steinke
@openmindculture
^ I have got the Grunt Edition installed with a twig starterkit, so hopefully I am ready to start now!
SBU DoIT
@SBUDoIT
image.png
is there any up to date docs / process / best practices on getting gulp/sass working with pattern lab node v5? i feel like i've been going in circles between outdated documentation/archived projects etc. i attempted to install the node-edition-gulp but it threw an error and has just been spinning for awhile..but there is no gulpfile and the package.json doesn't seem any different then the standard install
1 reply
Ingo Steinke
@openmindculture

Hi @SBUDoIT , I had similar problems with the installer hanging and circling around documentations.
Finally it was not the gulp, but the grunt version that finished to install.
See @mfranzke 's replies to my error report :

the installation sadly currently doesn't work on Node 16, which should be fixed with the next release of pattern lab.
So far the main workarounds would be to use Node versions equal or below 14, or follow the steps described in this issue: pattern-lab/patternlab-node#1348

Josef Bredreck
@JosefBredereck
Release v5.15.1 is live and makes it (hopefully) possible to use node 16 now.
It has a lot of updates, thanks to @mfranzke again 😊
Maximilian Franzke
@mfranzke
👍
and thanks to @renestalder as well.
… and I've just tested it again, npm create pattern-lab finally works like great even with node 16 now.
Stefan Bauer
@StfBauer
Can I hide "View all Pages" and "View all Templates" from being displayed they do more harm than good in my scenarios since they won't be rendered in an Iframe. I get a lot of overlapping elements that bleed in from other pages.
7 replies
Claude Henry-Smoot
@ultraloveninja

Alright, I was going to create an issue on GitHub, but it said I should try here, so, I'll give this a shot.
I'm working on an older pattern lab project that a client gave to me and I'm just trying to get it to compile so I can at least migrate it over to the newer version of pattern lab. So, I can sorta get it to work, but there's a hangup in the running process. I keep getting this error (FYI - I've redacted the file paths):

Error: Missing helper: "class"
    at Object.<anonymous> (~/node_modules/handlebars/dist/cjs/handlebars/helpers/helper-missing.js:19:13)
    at Object.wrapper (~/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
    at Object.eval [as main] (eval at createFunctionContext (~/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:11:100)
    at main (~/node_modules/handlebars/dist/cjs/handlebars/runtime.js:208:32)
    at ret (~/node_modules/handlebars/dist/cjs/handlebars/runtime.js:212:12)
    at ret (~/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:519:21)
    at Object.renderPattern (~/node_modules/@pattern-lab/engine-handlebars/lib/engine_handlebars.js:69:28)
    at Pattern.render (~/node_modules/@pattern-lab/core/src/lib/object_factory.js:210:35)
    at module.exports (~/node_modules/@pattern-lab/core/src/lib/render.js:13:18)
    at ~/node_modules/@pattern-lab/core/src/lib/compose.js:91:37 {
  description: undefined,
  fileName: undefined,
  lineNumber: undefined,
  endLineNumber: undefined,
  number: undefined
}
Error rendering patterns

In the old project files there are some helper JS files that are in a helpers folder (e.g. - helper-class.js, helper-atomic.js, helper-recursive.js, etc.) . I tried copying them over into the newer project under the helpers folder and that doesn't seem to do anything. So not sure if there's another npm package that needs to be installed or what. Again, this is an old project that I'm just trying to get to compile out.

5 replies
Claude Henry-Smoot
@ultraloveninja
Ok, I'm sure this has been asked before, but, I cannot for the life of me find the documentation on how to get Pattern Lab to compile SCSS/SASS files. I have a feeling that I need to install gulp or grunt to do so, but I wasn't sure if that's going to cause some weirdness trying to add that into the mix. Or does it do it out of the box and I need to just add it to the config?
3 replies
Claude Henry-Smoot
@ultraloveninja

Ok, I'm getting hung up on something. Couple things, actually.
I have a molecule that is called bar-dark.hbs which looks like this:

<div class="bar_dark">
    <div class="pl-page-wrapper">
          <div class="pl-page-margin pad_right_lg pad_left_lg">
              {{{outlet}}}
          </div>
      </div>
</div>

I have a bar-dark.json file that has this:

{
   "outlet": "<p>And then some boxy text. Maecenas faucibus mollis interdum.</p>"
}

So I'm not sure why when it compiles it doesn't pull in the content from the json file?
I also have an atom that is this:

<ul class="social-list">
  {{# items}}
    <li class="social-list--item">
      <span class="social-media-icon--wrapper">
        <a class="social-media-icon {{ grunticon_class }}" href="{{ href }}">
          <span class="tx-icon tx-default-link">{{ name }}</span>
        </a>
      </span>
    </li>
  {{/ items}}
</ul>

But I'm also trying to wrap those around the bar-dark.hbs content. I've tried this:

{{> molecules-bar-dark}}

<ul class="social-list">
  {{# items}}
    <li class="social-list--item">
      <span class="social-media-icon--wrapper">
        <a class="social-media-icon {{ grunticon_class }}" href="{{ href }}">
          <span class="tx-icon tx-default-link">{{ name }}</span>
        </a>
      </span>
    </li>
  {{/ items}}
</ul>
{{/ molecules-bar-dark}}

But that doesn't seem to work. So I'm stumped on how to get one pattern to nest around another. Not sure if I'm missing something in the docs.

2 replies
Claude Henry-Smoot
@ultraloveninja

Not sure what the issue is but I've changed some of the parameters in the patternlab-config.json file and they don't appear to be loading when I run npm run start.
I've tried to change some of the default theme options, but it appears that they are not taking effect when patternlab starts up. It also appears that it's not loading in my helpers.js file either. I have this for the theme in patternlab-config.json:

"theme": {
    "color": "dark",
    "density": "compact",
    "layout": "horizontal"
  }

and this is what I have for the helpers:

  "engines": {
    "handlebars": {
      "extend": "helpers/helpers.js"
    }
  }

Not sure why it's not picking up on those settings. I've also deleted the dependencyGraph.json per the documentation just in case there was some weird caching going on, but that doesn't seem to help either.

3 replies
Maximilian Franzke
@mfranzke

Release v5.15.7 is live (since last week) and brings a lot of updates since our last announcement (5.15.1).


Some of the highlights are:

  • a fix for „subgroups that cannot be hidden“ (pattern-lab/patternlab-node#1368, thanks a lot to @JosefBredereck for that!)
  • enabling pattern lab to work in a npm workspaces environment
  • including additional twig syntax features (pattern-lab/patternlab-node#1367, thanks a lot to @mogsie for that !)
  • providing the possibility to define the initial viewport width even for reoccurring visits (pattern-lab/patternlab-node#1386)
  • some dependency updates
  • as well as moving some dependencies to devDependencies, which should shrink the amount of installed dependencies on consuming pattern lab
  • and some minor bugfixes
Erik Mogensen
@mogsie
Woo thanks for the shoutout. I'd like to give the various twig engines some more TLC, but I can't for the life of me figure out how to set things up to run the tests. Whenever I try it only runs the default test-cases. Today I found the "development-edition-engine-twig" — it seems promising. Is that the way to go? I gave it a spin, but it complained about ports being in use (which are not in use).
9 replies
Erik Mogensen
@mogsie
I'm trying to use patternlab with a source directory outside the main directory; by setting "root" to "../something" and the other properties "patterns", "data" and so on to "../something/..." but it's not going well. I discovered that the twig engine that I'm using has relativeFrom which works well, but things like pattern linking doesn't work. If I go with the defaults and use a symlink instead (source --> ../something, it works well, but I'd prefer to avoid that. The reason for doing this is to be able to have a "live" styleguide, i.e. use the same templates for styleguide as the actual product being built. Is there another approach I haven't seen?
8 replies
Maximilian Franzke
@mfranzke

Node version 12 end of life and how we should handle the update

As our currently used major Node version 12 reaches its end of life on 30th of April it might be important to set up a common understanding and communicate on how we would like to handle Node Major version updates, and especially on whether we always switch to either LTS or the oldest maintenance version. I would argue for the latter, as this would ensure the most common setups out there (especially that everybody on lower Node versions should update in their own best interests, regarding security, etc.).

I've as well set up a pull request to include this aspect in the documentation and am curious about your feedback either here or in the PR: pattern-lab/patternlab-node#1411

Suthakar VK
@epsilon-skolanthasamy

Guys, I am trying to convert my existing components to React components (jsx). Can anybody give me the steps for it ? Thanks in advance.

I am using Patternlab node Mustache engine with Node 14.6.0 and npm 8.x

Josh Jabas
@jjabas
I'm currently unable to use the pattern-lab installer. It appears that pattern-lab/live-server is looking for send version 0.17.2, but send is only on 0.17.1.
7 replies
Monique Veenstra
@mveenstra
Hoping to get some clarification. Just created a patternlab project using the cli. Per documentation, it seems like there should be a gulpfile but there is none. https://patternlab.io/docs/managing-pattern-assets/ Is this correct? Thank you!
10 replies
Brian Grogan
@brianbroken
Is there currently a way to adjust the Pattern Lab theme apart from the 'light' and 'dark options'. We would like to make some minor CSS adjustments to the side navigation colours and logo height for our project. We would like to change the colours for both the light and dark theme to align with a specific brand.
3 replies
gamcilwraith
@gamcilwraith

Hi Folks

I'm trying to add a new status. I've added it in the patternStateCacade, and I've added a color in the pattern-scaffolding.css file as instructed in Using Pattern States. I see the new status in the main pattern area with the correct color, but the pattern navigation pain shows a different colour. I suspect this is because the documentations suggestion to add it in the pattern-scaffolding.css, which is loaded by the main window, thus not available for the navigation. Am I missing something here or is this a bug/oversight/random feature ;) ?

3 replies
shafqat-ali-arekibo
@shafqat-ali-arekibo
Hi Folks, anyone there who can help me to fix issues with uikits/excludedTags feature, Actually it's working fine when we have a single tag on patterns, but if I add multiple tags to a pattern and then use any of these as exclude then it produces the wrong results. I am not sure either I am assigning multiple tags in a wrong way OR there is an issue with uikits/excludedTags feature.
1 reply
Raghavendra Saralaya
@numoonchld
Hi everyone - I am on patternlab-node - I am unable to successfully import .js files from inside _sources/js in my _foot.hbs file - i get an Uncaught SyntaxError: Unexpected token '<' (at scripts.js:1:1) error in the console of the patternlab localhost server - any insights would be helpful
1 reply
Flywall
@Flywall
Hi everyone, I'de like to now how to integrate sass in Pattern Lab, it's not integrated (Pattern Lab Twig edition) ?
1 reply
Marianne Vivat
@vivatm_gitlab
Hi, I'm trying to display associated tags and state with patterns but nothing is showing in the front when I modify the dedicated .md file, and I can't find anything in the doc. I guess I'm missing something ? any help would be appreciated (I'm using patternlab with twig template engine)
3 replies
Stefan Bauer
@StfBauer
Just a random question. As someone tried to include Accessiblity testing in pattern labs?
2 replies
Marianne Vivat
@vivatm_gitlab
Hi everyone, is there a way to preserve patterns directory structure in uikits ? this would be great
1 reply
Rikke Perriard
@perriard
Hi everyone, has anyone got some good examples of how to work around the fact that pseudo patterns can't be used as pattern includes? I'm getting increasingly frustrated by having to maintain the same json data in multiple files. ;-)
2 replies
Chris Romero
@romerocs
Hello PL folks! Is there a way to wrap a pattern in some markup that get's omitted from the source tab? I'm basically trying to recreate the decorator of Storybook
4 replies
mpohlmann73
@mpohlmann73

Got an error today when I tried to add some infos to an atom:

YAMLException: expected a single document in the stream, but found more
error parsing markdown block ---
order: 2
---
title: Lorem Ipsum
---
The logo image is an SVG file, which ensures that the logo displays crisply even on high resolution displays. A PNG fallback is provided for browsers that don't support SVG images.
Further reading: [Optimizing Web Experiences for High Resolution Screens](https://bradfrost.com/blog/mobile/hi-res-optimization/)
error processing markdown for atoms-checkbox

I just added the title to the markdown-file (test.twig, test.md). Any idea how to make the MD-documentation work?
Using Patternlab with NodeJS (v8.19.2)

1 reply
Josef Bredreck
@JosefBredereck
Hello everyone, a new release has just been shipped thanks to @mfranzke with plenty of changes and improvements.
https://github.com/pattern-lab/patternlab-node/releases/tag/v6.0.0
5 replies
Chaz Chumley
@chazchumley
Has anyone tried to spin up a new version of Pattern Lab using Twig with version 6? First I had to patch the twig engine but after that, the Patterns folder is empty even though the Twig demo has things to render
1 reply
Josef Bredreck
@JosefBredereck
We pushed a patch regarding the occurrence of twig-php issues in v6
https://github.com/pattern-lab/patternlab-node/releases/tag/v6.0.1
Stefan Bauer
@StfBauer

After upgrading to version 6.0.1 I got an error that the configurtion is not correct with the following link:
https://patternlab.io/docs/editing-the-configuration-options/#heading-engines

After comparing an existing projet to a new one I figured out the issue.

From the documentation:

  "engines": {
    "handlebars": {
      "package": "@pattern-lab/engine-handlebars",
      "extensions": [
        "handlebars",
        "hbs"
      ],
      "extend": "helpers/*.js"
      ...
    }
  }

Inside the handlebars node it lists 'extensions' in a new project this is now 'fileExtensions' - not quite sure which is the correct one. I got rid of the configuration error by changing it to 'fileExtension'. Now everything was working fine. I later tried to switch it back to only 'extensions' and could not reproduce the error anymore. I wonder which is the correct configuration and which is the wrong one.

2 replies
This message was deleted

Q2: Sometimes I have code documentation in my markdown files, but there are no styles configured for the web component. after adding a manual css link in there I got it working.

So I wonder now is this a general bug or is ther some configuration missing?

image.png

2 replies
Stefan Bauer
@StfBauer

Q3: Links on the documentations are mostly broken. Especially in the examples - https://patternlab.io/resources/

Just in case you like to add a new one - you can add this: https://lab.n8d.studio/htwoo/htwoo-core/

5 replies