pattern-lab/node

Krzysztof Węgiel

@kwegiel

Is there a module/way to show some components/views only for logged in users, so something like a simple authentication?

2 replies

Maximilian Franzke

@mfranzke

... or even server side rules for HTTP Auth, like some rules in the apache regarding specific pattern path.

Stefan Bauer

@StfBauer

This is actually related to Assertion issue above. Still yet unsure how to solved this

Unbound Web Design

@JaiDoubleU

@StfBauer, I managed to get my dark/light stylesceets working by adding a change listener on the existing theme switcher buttons in PL. That listener executes a basic function that toggles the “alternate” atribute between my two (dark and light) stylesheets. Im sure there are otger ways of doing this, but thats how I did it. Hope that helps.

1 reply

Maximilian Franzke

@mfranzke

Thanks a lot for your feedback - we‘re currently doing a lot of dependency update work (pattern-lab/patternlab-node#1301), some of them have already been merged and might even be a quick win. Fingers crossed!

michaelprflores

@michaelprflores

Can anyone share a tutorial on getting Sass compilation setup in Patternlab project please? Thanks in advance.

4 replies

ray87

@ray87

Hey everyone, I've problems using patternlab-node with engine-twig. When running serve, changing some files, it builds automatically, but it doesn't render HTML files. The UI shows old version of the rendered versions, but new version of twig-file. After running build by myself it also updates rendered files. Using LogLevel "debug" has the same output on serve and manual build. With engine-twig-php it works with same basic pattern-lib. Anyone already had that problem and has a solution ?

9 replies

bhupesh-git

@bhupesh-git

Hello everyone, I am trying to create a new atom using pattern-lab node, it is working however, the styles are not picked up. Not able to use styles with my newly created atom. please let me know what should I do?

1 reply

Rikke Perriard

@perriard

Hi everyone - I'm having trouble using the ignore paths in serverOptions in patternlabConfig. It just doesn't seem to ignore ie. my fonts - and it would be a lot faster to work with, if it didn't copy unnecessary files. Can anyone give me some hints?

7 replies

Stefan Bauer

@StfBauer

On the Bolt Design System on the patternlabs logo was changed to the bolt design logo. Is there any option to exchange the logo up there? haven't found any so far.

10 replies

Stefan Bauer

@StfBauer

Just in case if someone is interested. Over the last couple of weeks I was working on the first release of a custom UI Framework named hTWOo that implements Microsoft Fluent Design using pattern lab. The site went live today:

Github Repo: https://github.com/n8design/htwoo
PatternLab: https://lab.n8d.studio/htwoo/htwoo-core/?p=all
Blog post: https://n8d.at/htwoo-ui-launched-fluent-design-in-html-and-css/

Maximilian Franzke

@mfranzke

Just in case if someone is interested. Over the last couple of weeks I was working on the first release of a custom UI Framework named hTWOo that implements Microsoft Fluent Design using pattern lab. The site went live today:

Github Repo: https://github.com/n8design/htwoo

PatternLab: https://lab.n8d.studio/htwoo/htwoo-core/?p=all

Blog post: https://n8d.at/htwoo-ui-launched-fluent-design-in-html-and-css/

great work, thank you !!

Vinoth Krishnan

@vinothcascade_gitlab

Getting error message in command prompt - The "path" argument must be of type string -
after configure from gulp

1 reply

Using patternlab Twig 5.14.2 version

Node also latest version

Stefan Bauer

@StfBauer

Is there some plugin that allows me to do accessibility check just like storybook does?

5 replies

Maximilian Franzke

@mfranzke

As node version 10 has reached its „end of life“ at the end of april, we could switch to 12, as I‘ce just recognized it at several prominent open source libraries these days - I could bring in a change request for changing all .nvmrc files that still include node version 10. what do you think ?

2 replies

Josef Bredreck

@JosefBredereck

Release v5.14.3 is live and has hopefully fixed some issues.
It has a lot of updates, thanks to @mfranzke

Maximilian Franzke

@mfranzke

Release v5.14.3 is live and has hopefully fixed some issues.
It has a lot of updates, thanks to @mfranzke

♥

Andi

@hadl

Release v5.14.3 is live and has hopefully fixed some issues.
It has a lot of updates, thanks to @mfranzke

❤️

Rikke Perriard

@perriard

Hi all, just trying to ask one more time :-) Has anyone ever installed the Twig extra bundle? https://github.com/twigphp/twig-extra-bundle I could use some help with this. I need the translate filter, to handle aria translations in Pattern lab.

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

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

Where communities thrive

People

Repo info

Activity

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