Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/contentful/forma-36

A design system by Contentful
https://github.com/contentful/forma-36

contentful-ui design-system monorepo react react-components

Last synced: 29 days ago
JSON representation

A design system by Contentful

Host: GitHub
URL: https://github.com/contentful/forma-36
Owner: contentful
License: mit
Created: 2018-10-19T13:00:05.000Z (about 6 years ago)
Default Branch: main
Last Pushed: 2024-10-04T13:56:16.000Z (about 1 month ago)
Last Synced: 2024-10-04T14:27:20.308Z (about 1 month ago)
Topics: contentful-ui, design-system, monorepo, react, react-components
Language: TypeScript
Homepage: https://f36.contentful.com
Size: 63.5 MB
Stars: 333
Watchers: 62
Forks: 81
Open Issues: 34
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        


 Forma 36 - The Contentful Design System


[![Contentful](https://circleci.com/gh/contentful/forma-36.svg?style=shield)](https://circleci.com/gh/contentful/forma-36)

[![All Contributors](https://img.shields.io/github/all-contributors/contentful/forma-36/main)](#contributors-)

[Forma 36](https://f36.contentful.com/) is an open-source design system by [Contentful](https://www.contentful.com) 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

- [Table of contents](#table-of-contents)

  - [Creating new packages](#creating-new-packages)

- [Development](#development)

  - [Storybook for f36-components](#storybook-for-f36-components)

- [Commits & releases](#commits--releases)

- [Testing with your own project locally](#testing-with-your-own-project-locally)

- [Get involved](#get-involved)

- [Reach out to us](#reach-out-to-us)

  - [You found a bug or want to propose a feature?](#you-found-a-bug-or-want-to-propose-a-feature)

- [License](#license)

- [Code of Conduct](#code-of-conduct)

- [Contributors ✨](#contributors-)

### Creating new packages

We use [Plop](https://plopjs.com/) 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](https://f36.contentful.com/introduction/contributing).

## 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](#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](https://github.com/commitizen/cz-cli) 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](https://github.com/changesets/changesets).

Read more about changeset [here](RELEASES.md)

## 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](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?maxAge=31557600)](http://makeapullrequest.com)

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](https://www.contentful.com/discord/).

### You found a bug or want to propose a feature?

Create an issue using one of the templates [![File an issue](https://img.shields.io/badge/-Create%20Issue-6cc644.svg?logo=github&maxAge=31557600)](https://github.com/contentful/forma-36/issues/new/choose).

Make sure to remove any credential from your code before sharing it.

## License

This repository is published under the [MIT](LICENSE.md) 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](https://github.com/contentful-developer-relations/community-code-of-conduct).

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    

      
_{Mike Mitchell}
💻 🚧

      
_{Johannes Bugiel}
💻 🚧

      
_{Gui Santos}
💻 🚧 📖

      
_{Moe Shaaban}
💻 🚧 📖

      
_{Patrycja Radaczyńska}
💻 🚧 📖

      
_{Dominik Markušić}
🎨 📖

      
_Kristoffer
💻 🚧 📖

    

    

      
_{Alexander Suevalov}
💻 🚧

      
_Gracegross
🎨

      
_Miretxu
💻

      
_{Tanya Bessonova}
💻

      
_{John Whiles}
💻

      
_{Guilherme Barbosa}
💻

      
_{Marco Link}
💻

    

    

      
_{David Fateh}
💻

      
_{Bruce Felt}
💻

      
_{Daniel Vasylenko}
💻

      
_kdamball
💻

      
_MarkusLaut
💻

      
_{Andreas Hörnicke}
💻

      
_{ChidinmaOrajiaku}
💻

    

    

      
_{Andi Pätzold}
💻 🐛

      
_{Wiktoria Dalach}
💻

      
_{Joshua Smock}
💻

      
_{Yiotis Kaltsikis}
💻

      
_{Azer Koçulu}
💻

      
_taye
💻

      
_dannyiacono
💻

    

    

      
_{Grant Sauer}
💻

      
_{João Ramos}
💻

      
_{Ante Sepic}
💻 🐛

      
_{Blair Rampling}
💻

      
_{Daniel A. R. Werner}
💻

      
_{Sergii Bezliudnyi}
💻

      
_{Manuel Spagnolo}
💻

    

    

      
_{Mohamed Turki}
💻

      
_{Ahmed T. Ali}
💻

      
_{Bruno Russi Lautenschlager}
💻

      
_{Chris Towler}
💻 🐛

      
_{Christoph Grabo}
💻

      
_{Colton Colcleasure}
💻

      
_{Connor Bär}
💻

    

    

      
_{Danil Zakablukovskii}
💻

      
_{Dominic Bonnice}
💻

      
_{Khaled Garbaya}
💻

      
_{Stefan Judis}
💻

      
_{Thomas Jaggi}
💻

      
_{Turcan Vladimir}
💻

      
_{V. Milone}
💻

    

    

      
_{Aris Plakias}
💻

      
_{Kam Figy}
🐛

      
_{Peter Wielander}
💻 🐛

      
_{Felix Boenke}
🐛

      
_damienxy
💻 🐛

      
_{Nika Zawila}
💻 🚧 📖

      
_Sarah
📖

    

    

      
_th1nkgr33n
🐛

      
_{Thomas Kellermeier}
🐛 💻

      
_{Ikko Ashimine}
📖

      
_{Anil Kumar krishanshetty}
💻 📖

      
_{Renato Massao Yonamine}
💻

      
_{Charlie Chrisman}
🐛

      
_{Jan van den Berg}
💻

    

    

      
_SirGavin
🐛

      
_{Kathrin Holzmann}
💻 🚧

      
_{Bohdan Hutsol}
💻 🚧

      
_{Gary Hepting}
🐛 💻

      
_Rowadz
💻

      
_{Maxim Cheremisin}
💻

      
_benomatis
📖

    

    

      
_Wake1st
💻

      
_{Ridwan Ajanaku}
📖

      
_{Rémy Lenoir}
🚧 💻 📖

      
_{Wojciech Maj}
🐛 💻

      
_{Lillian Bitner}
🚧 💻 📖

      
_{Lisa White}
🚧 💻 📖

      
_{Eddie Chung}
🚧 💻 📖

    

    

      
_{Marouen Ben Salem}
💻 📖 🐛

      
_{Kudakwashe Mupeni}
💻

      
_{Marta Sierosławska}
💻

      
_MayaGillilan
💻

      
_{Stephan Leece}
💻 🚧

      
_{Chris Helgert}
💻 📖

    

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!