3

We are currently working on setting up a design system for our company and part of the process is to create a pattern library based on Atomic Design. Our frontend team is currently using React Styled Components in their workflow.

One of the main criteria for our architecture is to have a pattern library that is tech-agnostic. This means setting up the pattern library with plain HTML, CSS and presentational Javascript.

Is there a way to get around writing all this code twice (so the plain HTML/CSS/JS components ánd the React Styled Components)?

Does anyone have an idea (or preferably an example) as to how we can automate the process of going from components in the pattern library (HTML/CSS/JS) to React Styled Components, and also keeping the door open for potential VUE or Angular (or whatever) developers to consume our patterns in their frameworks?

Essentially, we're looking for a pattern library that automatically pushes changes to all of our websites/apps.

kn03i
  • 141
  • 4
  • did you manage to find anything in these lines? – Bala Sivagnanam Jul 24 '18 at 04:04
  • Unfortunately no. Still trying to find a workable solution – kn03i Jul 26 '18 at 06:09
  • 1
    Still no true solution. I was wondering whether [Stencil JS](https://stenciljs.com/) could be a basis for this workflow. I know Stencil doesn't do styled components, but it's the best thing I've found. Any thoughts? – kn03i Aug 14 '18 at 07:46
  • Yes @kn03i looks like.. But my major worry is do we need to create everything from scratch with stencilJS and can't utilise JQuery and other libraries that are available now. – Bala Sivagnanam Sep 06 '18 at 07:45

0 Answers0