Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

![Buffet.js Cover](/uploads/cover-article-1.png_5ba172b8b5.png)

*React Components Library made with styled-components.*

🚨 We are very excited to announce the release of a new component library, [Buffet.js](https://www.buffetjs.io).

While this project is just out of the oven, you can already [give it a try](https://github.com/strapi/buffet).
This effort is part of our [roadmap](https://feedback.strapi.io) for Q2 2019.

The purpose of Buffet.js - an all-you-can-eat component library - is to give the community a faster, easier, and better way to develop both their private and public plugins and also to allow us to set up a more robust design system that can be easily updated.

If you want to try it, here’s [how to](https://buffetjs.io).

### Why develop a component library

We design Strapi as a single application where each feature (plugin) is entirely independent. They can communicate with each other, but the main idea is to keep them all independent. 

Since your project’s administration is a “simple” React application that encapsulates smaller ones located in completely different packages, its structure is not monolithic. We needed a global package containing all the components needed for the plugins’ interface to have a consistent design system.

If you followed the development of Strapi, you are aware that we started as a small team (we kinda still are...) and chose to adopt a monorepository structure for the v3. These reusable components were placed in the `strapi-helper-plugin` package, a module that was and still is very opaque for the community.

Until the release of Strapi beta, this package was a bit of a mess: it contained the shared `webpack` configuration, entry point, components, file generators, eslint and so on... Technically speaking, it caused issues:

- The package is not agnostic so we can’t develop plugins that are not inside the monorepository.
- The package is built for each plugin instead of a single time.
- No code completion so the development was heavy and painful for new contributors.
- Heavy build mainly due to our styled system that uses SaaS and PostCSS.

This non-exhaustive list of drawbacks leads us to think, *it is time to pimp up the `strapi-helper-plugin` package.*

<iframe src="https://giphy.com/embed/YjJZKbm2kNN7i" width="480" height="360" style="margin:auto" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/YjJZKbm2kNN7i"></a></p>

### Enhanced features 

So several months ago, [Aurélien Georget](https://twitter.com/aureliengeorget) asked me to lead the ambitious task of creating a component library called Buffet. The goal of Buffet.js is to address the long-standing issues listed above in terms of community guidance, developer experience, code optimization, and maintenance.

##### Open-source contributors need consistency

An external component library facilitates contributions but also ensures the components are not duplicated in the codebase and makes the development of Strapi plugins easier.

As primary contributors to the Strapi open-source project, the core product team is also responsible for creating the best developer experience, no matter the number of contributors to the project. Our end-user must always enjoy using Strapi, and the feedback we received until now shows that ease of use and intuitive admin panel are among the top reasons Strapi is selected as a CMS.

> Buffet.js allows the team to provide the community with a visual and functionally consistent UI and UX guidelines.

##### Developers at the core of Design Thinking
We want Buffet.js to be helpful to the Strapi community and everyone who may need a UI library of components. 
We know that a good developer experience will allow better adoption from the community and increase contribution to improve the project and make it grow.

Particular attention has been given to the following points:

- **CSS-in-JS**. We looked at different libraries and decided to use [styled-components](https://www.styled-components.com) for leveraging JS power while still using CSS syntax.

<a href="https://www.styled-components.com" target="_blank"><img style="width:50%" style="margin:auto" alt="Styled-components-logo logo" src="/uploads/styled-components-logo.png_2a4137c96d.png"></a>

- **DOM**. We focused on providing the best readability by making sure provided components are as close as possible to the underlying DOM structure and as stateless as possible.

- **Isolation**. The components in Buffet.js work in isolation. You can use any Buffet.js component in your codebase without any side effects.

- **Documentation**. The website is developed using [Gatsby.js](https://www.gatsbyjs.org) for a super-fast navigation experience. All the components are rendered with [Storybook](https://storybook.js.org/). 

<a href="https://gatsbyjs.org" target="_blank"><img style="width:50%" style="margin:auto" alt="Gatsby-logo logo" src="/uploads/gatsby-logo.jpg_98a81d42c0.jpeg"></a>
<a href="https://storybook.js.org" target="_blank"><img style="width:50%" style="margin:auto" alt="Storybook-logo logo" src="/uploads/storybook-logo.png_8cd31be2e5.png"></a>
Thanks to Storybook, components can be shown in a definite order or on different pages for better readability. We also have made the demonstration more interactive with knobs allowing to visualize different states of a  component.

![Storybook](/uploads/Storybook.gif_0d6be34d42.gif)


##### Code optimization

- **Code quality**. Thanks to styled-components, unique class names are generated for the styles, so forget about class name bugs. Only the rendered components style is injected on a page. Combined with code splitting, your users load the least amount of necessary code.

- **Performance**. The administration panel build size and time have both been reduced.

- **Maintenance**. Developing the component library will also allow further scalability with seamless maintenance. All plugin developments based on Buffet.js components will be updated by updating Buffet.js.


#### Some cool stuff

If you're used to the administration panel, you will recognize most developed components. However, we are a bit proud to introduce our new DatePicker which can be combined with a TimePicker...

Our current DatePicker, and we are completely aware of it, is “a bit outdated and unusable” so we decided to develop a new one using [Airbnb’s DatePicker](http://airbnb.io/react-dates/?selectedKind=DateRangePicker%20%28DRP%29&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel).

![DatePicker](/uploads/DatePicker-1.gif_9d847245e7.gif)


For the TimePicker on the other hand... it is another story: we couldn’t find a React one that fit our needs so we undertook the development of a new one mainly inspired by the one you see and use in your Google Calendar... [Just check it out](https://buffetjs.io/storybook/?path=/story/custom--datetime)

![TimePicker](/uploads/TimePicker.gif_e48b7474cf.gif)

### Thank you

Lastly, thank you to everyone who’s contributed to Buffet.js.
We will keep working hard on delivering the best components to ease community contributions.

Buffet.js is an MIT-licensed open-source project. It’s an independent project launched by the Strapi team, but anyone wishing to contribute is welcome!
Check us out on Github: https://github.com/strapi/buffet


The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 

Ecosystem

buffet-js-v1-is-out

🍱 🍲 Open Buffet for you all