🤝 Help Penpot move forward by Community Contribution

[BDV]

As you probably know, the Penpot Community has already helped advance Penpot in several areas.
Like e.g. helping to translate for text within penpot using WebLate.

adding a library and/or template

Penpot | Libraries & Templates

creating a plugin for Penpot

Penpot | Plugins

and the many other possibilities with the support of a Penpot member each time if needed.

[ladybenko]

Hi, thanks for the initiative to bring this up to the community!

@BDV

After that, I think it might be best to have 1 GitHub account where the community sends the commits to build the signature tuning for npm packages, before applying everything to Penpot’s GitHub repo.

I believe these community projects should live in separate GitHub repos, though, like Penpot Desktop. This way, the community has have full governance of the project:

• The community decides which language(s) use for the implementation, code conventions, etc.
• The community handles PRs and reviews. At the moment, all PRs to Penpot’s repository must be approved, tested and review by someone from the Penpot team, and we need to prioritize our current releases. Keeping the project on a separate repo does not introduce this block.
• The community decides which Continuous Integration rules and tests to apply to the project.
• And many more! That’s the beauty of Open Source

Of course we can link (as we are already doing) these projects from our documentation and pages. And you can always reach out to ask questions, etc.

Cheers!

[shark]

Hi @BDV, in the initial message you’ve mentioned about usability of npm registry for the benefit of design teams. And then seeing multiple options for different skill-set requirements in the form you shared kinda makes me confused about what specifically we are building as part of this project.

Can you please help me clarify is it just one project or multiple projects which you’re proposing?

[shark]

Moreover I’m interested in this idea “bundle penpot pencil design system into an npm package”. Specifically because I personally want to use penpot more for my personal projects, so up until design part it’s okay but translating designs into a web app is the missing puzzle piece right now.

Also, I can make the npm package just for react backed apps to start with. This project does not require too wide range of skills, like design we already have and it’s mostly frontend coding work. Your thoughts are invited on this.

[shark]

Thanks @BDV for sharing the high level approach you have in mind. I understand that the goal of this project is to make importing any component library available in npm into penpot possible, please correct if I’m wrong.

And the use case I’m looking for is to be able to add penpot’s design system as an npm dependency in my web-app. The Storybook link is super useful for that, I’ll spin up a separate topic to find if there already exist an npm package for it, if not will try to bundle it up.

[shark]

I’m not sure either which should be prioritised first. I think you can ask the users of penpot what do they want, or if you have a requirement for your own use then you can start with yourself as very first user of the feature.

[ladybenko]

Hi! Thanks for bringing this project up, here are my two cents.

My initial understanding is that the npm package was meant to release icons (which is feasible), and not the whole Penpot Design System (named Pencil).

I’m afraid at the time being porting the Design System to an npm package it’s not quite straight forward. Let me explain.

• It’s still very much a WIP endeavor. We’re tweaking both the design and the implementation, changing the name of tokens, adding/removing them, etc. Also, we still have a long way ahead in terms of implentation, since only a small subset of the whole system that has been designed is actually implemented. Keep in mind that right now we’re not thinking in terms of backwards compatibility nor we do have proper versioning (at the time being, this is something we’ll need to do in the future, but I don’t think it will be a short-term endeavor).
• Penpot design systems is implemented in this stack: ClojureScript, React 18, some custom middleware to bring those two together and, more importantly, common code with the rest of the application (for instance, to handle translation, but we plan to use common utilities for converting colors, etc.). Meaning: our final JS bundle that we are exporting to storybook is a bit heavy.

What I would suggest: I think it would be wise to start small and see if there are contributors that can handle the icons (and maybe considering creating a component for React or other frameworks directly in JS/TS, skipping ClojureScript. Eventually this project would require to set up some kind of automation so updating the icons, etc. does not need to be done manually after each Penpot release (which now happen every ~6 weeks aprox.)

Cheers!