Skip to content

contentful/forma-36

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Forma 36 - The Contentful Design System

Contentful All Contributors

Forma 36 is an open-source design system by Contentful created with the intent to reduce the overhead of creating UI by providing tools and guidance for digital teams building and extending Contentful products

Table of contents

Creating new packages

We use Plop to create scripts that help you to scaffold new packages. In the root of the repo, you can run npm run-script generate. Then follow the steps in the CLI. Plop will generate the relevant files and add the relevant imports and exports to the main src/index.ts file required to make the component available when publishing the library. Read more about contribution to Forma 36.

Development

For local development, in the root of the repo run npm i to install all dependencies and then npm run-script build to build all packages. Now follow the instructions of the specific package you’re working on. You will find each package’s instructions in their README files, check the Packages section for a list of all packages.

In case you are having problems to install the dependencies, try using NVM to get the same node version we use by running nvm use in the root of the repo

Storybook for f36-components

We use storybook with our react component library to develop components. You can start it from the root of the repo, just run npm run-script storybook after building.

Commits & releases

Use npm run-script commit. This uses the Commitzen CLI to create a conventional commit message based on your changes. CI is setup to release all new commits on the main branch that contains a new changeset.

Read more about changeset here

Testing with your own project locally

You can test changes to a package of this monorepo in your own project locally by taking the following steps:

  1. Run npm run-script build in the desired package's directory to ensure your latest changes have been built
  2. Run npm link in the desired package's directory
  3. Change to your local project's directory and run npm link NAME_OF_PACKAGE to link to the local version of the package (e.g. npm link @contentful/f36-components)

Get involved

PRs Welcome

We appreciate any help on our repositories. For more details about how to contribute to a package, see the README of the corresponding package.

Reach out to us

You can reach out to us using the Contentful Community Discord.

You found a bug or want to propose a feature?

Create an issue using one of the templates File an issue. Make sure to remove any credential from your code before sharing it.

License

This repository is published under the MIT license.

Code of Conduct

We want to provide a safe, inclusive, welcoming, and harassment-free space and experience for all participants, regardless of gender identity and expression, sexual orientation, disability, physical appearance, socioeconomic status, body size, ethnicity, nationality, level of experience, age, religion (or lack thereof), or other identity markers.

Read our full Code of Conduct.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Mike Mitchell
Mike Mitchell

πŸ’» 🚧
Johannes Bugiel
Johannes Bugiel

πŸ’» 🚧
Gui Santos
Gui Santos

πŸ’» 🚧 πŸ“–
Moe Shaaban
Moe Shaaban

πŸ’» 🚧 πŸ“–
Patrycja RadaczyΕ„ska
Patrycja RadaczyΕ„ska

πŸ’» 🚧 πŸ“–
Dominik Markuőić
Dominik Markuőić

🎨 πŸ“–
Kristoffer
Kristoffer

πŸ’» 🚧 πŸ“–
Alexander Suevalov
Alexander Suevalov

πŸ’» 🚧
Gracegross
Gracegross

🎨
Miretxu
Miretxu

πŸ’»
Tanya Bessonova
Tanya Bessonova

πŸ’»
John Whiles
John Whiles

πŸ’»
Guilherme Barbosa
Guilherme Barbosa

πŸ’»
Marco Link
Marco Link

πŸ’»
David Fateh
David Fateh

πŸ’»
Bruce Felt
Bruce Felt

πŸ’»
Daniel Vasylenko
Daniel Vasylenko

πŸ’»
kdamball
kdamball

πŸ’»
MarkusLaut
MarkusLaut

πŸ’»
Andreas HΓΆrnicke
Andreas HΓΆrnicke

πŸ’»
ChidinmaOrajiaku
ChidinmaOrajiaku

πŸ’»
Andi PΓ€tzold
Andi PΓ€tzold

πŸ’» πŸ›
Wiktoria Dalach
Wiktoria Dalach

πŸ’»
Joshua Smock
Joshua Smock

πŸ’»
Yiotis Kaltsikis
Yiotis Kaltsikis

πŸ’»
Azer Koçulu
Azer Koçulu

πŸ’»
taye
taye

πŸ’»
dannyiacono
dannyiacono

πŸ’»
Grant Sauer
Grant Sauer

πŸ’»
JoΓ£o Ramos
JoΓ£o Ramos

πŸ’»
Ante Sepic
Ante Sepic

πŸ’» πŸ›
Blair Rampling
Blair Rampling

πŸ’»
Daniel A. R. Werner
Daniel A. R. Werner

πŸ’»
Sergii Bezliudnyi
Sergii Bezliudnyi

πŸ’»
Manuel Spagnolo
Manuel Spagnolo

πŸ’»
Mohamed Turki
Mohamed Turki

πŸ’»
Ahmed T. Ali
Ahmed T. Ali

πŸ’»
Bruno Russi Lautenschlager
Bruno Russi Lautenschlager

πŸ’»
Chris Towler
Chris Towler

πŸ’» πŸ›
Christoph Grabo
Christoph Grabo

πŸ’»
Colton Colcleasure
Colton Colcleasure

πŸ’»
Connor BΓ€r
Connor BΓ€r

πŸ’»
Danil Zakablukovskii
Danil Zakablukovskii

πŸ’»
Dominic Bonnice
Dominic Bonnice

πŸ’»
Khaled Garbaya
Khaled Garbaya

πŸ’»
Stefan Judis
Stefan Judis

πŸ’»
Thomas Jaggi
Thomas Jaggi

πŸ’»
Turcan Vladimir
Turcan Vladimir

πŸ’»
V. Milone
V. Milone

πŸ’»
Aris Plakias
Aris Plakias

πŸ’»
Kam Figy
Kam Figy

πŸ›
Peter Wielander
Peter Wielander

πŸ’» πŸ›
Felix Boenke
Felix Boenke

πŸ›
damienxy
damienxy

πŸ’» πŸ›
Nika Zawila
Nika Zawila

πŸ’» 🚧 πŸ“–
Sarah
Sarah

πŸ“–
th1nkgr33n
th1nkgr33n

πŸ›
Thomas Kellermeier
Thomas Kellermeier

πŸ› πŸ’»
Ikko Ashimine
Ikko Ashimine

πŸ“–
Anil Kumar krishanshetty
Anil Kumar krishanshetty

πŸ’» πŸ“–
Renato Massao Yonamine
Renato Massao Yonamine

πŸ’»
Charlie Chrisman
Charlie Chrisman

πŸ›
Jan van den Berg
Jan van den Berg

πŸ’»
SirGavin
SirGavin

πŸ›
Kathrin Holzmann
Kathrin Holzmann

πŸ’» 🚧
Bohdan Hutsol
Bohdan Hutsol

πŸ’» 🚧
Gary Hepting
Gary Hepting

πŸ› πŸ’»
Rowadz
Rowadz

πŸ’»
Maxim Cheremisin
Maxim Cheremisin

πŸ’»
benomatis
benomatis

πŸ“–
Wake1st
Wake1st

πŸ’»
Ridwan Ajanaku
Ridwan Ajanaku

πŸ“–
RΓ©my Lenoir
RΓ©my Lenoir

🚧 πŸ’» πŸ“–
Wojciech Maj
Wojciech Maj

πŸ› πŸ’»
Lillian Bitner
Lillian Bitner

🚧 πŸ’» πŸ“–
Lisa White
Lisa White

🚧 πŸ’» πŸ“–
Eddie Chung
Eddie Chung

🚧 πŸ’» πŸ“–
Marouen Ben Salem
Marouen Ben Salem

πŸ’» πŸ“– πŸ›
Kudakwashe Mupeni
Kudakwashe Mupeni

πŸ’»
Marta SierosΕ‚awska
Marta SierosΕ‚awska

πŸ’»
MayaGillilan
MayaGillilan

πŸ’»
Stephan Leece
Stephan Leece

πŸ’» 🚧
Chris Helgert
Chris Helgert

πŸ’» πŸ“–

This project follows the all-contributors specification. Contributions of any kind welcome!