senf-atomic-design-system

An atomic-design-system-library for all Senf-apps (https://senf.app , Senf-workspace & Senf-Monitoring)

Our main Apps are built within a opensource Monorepo, that you can find here: https://github.com/AgileVentures/senf_client (That Repo isn't as straight forward as this one though – and not the easiest to contribute to)

About

The aim of this project is to strengthen participation of citizens in urban planning & to make it more interactive and transparent. Since we see citizens as the real experts in their neighborhoods, we want to create an attractive opportunity for people to contribute their own ideas and suggestions.

Ultimately, through this platform, we are attempting to establish a collaborative community-based environment in which citizens have a voice and organizations of any kind are empowered to be more participatory. Simultaneously, we see this environment as a space for people to get creative and connect in real life in order to collectively shape their own urban space.

Since the beginning of 2021, we have been running the platform Senf.app for the area of Cologne, Germany – and we see this expanding to any city and municipality. Btw: checkout/follow our Instagram (https://www.instagram.com/senf.koeln/)

If it sounds interesting to you, we would love you to join and contribute to this project!

1: Fork this repository and clone your own Fork

To avoid ending up with an unmanageable amount of branches, we decided to go this way: fork the repository first and then clone your fork to your computer using terminal command git clone https://github.com/your-github-name/senf-atomic-design-system. When contributing, create a pull request as described in this documentation.

2: Install packages

Open senf-atomic-design-system folder in the terminal and type npm install.

If you get error npm command not found make sure you have node.js installed on your machine.

3: Run Storybook

To run the design Library, type npm run storybook

4: Let's talk!

We are extremely happy about any contribution! We are a young interdisciplinary team and would love to welcome you on board! Send us a short email to [email protected] or send me a message here: LinkedIn. We will get in touch with you and add you to our Slack-Channel if you wish! We are looking forward to meeting you!

5: ZenHub

We will invite you to our ZenHub Workspace, where you can find tickets to work on. Create an account and add the ZenHub Widget to Github. Now you can find an appealing ticket within the Sprint-Backlog or Bugs/Questions and try to tackle it.

6: Take a look at the Designfile (Work in Progress)

We are designing all components in Framer. You can find all to-do-components there and copy CSS attributes directly from there. It is still evolving and the Design-Experteriments-Page might be a little chaotic, but the other pages should be really straight forward. To get the icons, you got to ask us.

https://framer.com/projects/senf-app--fiUScOsONkcproCH8qAH-jfmFv

7: Atomic-Design-System-Principles

To get a background-understanding about the atomic-design-system, take a look at this resource: https://atomicdesign.bradfrost.com/chapter-2/

8: Background-Info about the foundation of this Repository

To get a background-understanding on how the repository is built, here’s a link to a tutorial that has been the base: https://blog.logrocket.com/build-component-library-react-typescript/