senf-koeln / senf-atomic-design-system

An atomic-design-system-library for all Senf-apps

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/

senf-atomic-design-system's Issues

colors

Finalize Buttons + add correct typography + correct usage of Theme

Tertiary Icon only button (like the clear search button)

Integrate all Icons

Please reach out to Louis on Slack if you need Icons. These then need to be formatted in a way to add them correctly to the Icons.tsx file....use online tools, like this one:

https://www.ofoct.com/image-converter/svg-optimizer.html

Fix Typescript errormessages

Add Layout Components like FlexWrapper, GridWrapper, etc.

Typography

Implement a Typography system based on the Textstyles defined in Framer:

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

Idea-Detailpage

Define and submit all Theme-specifications

fontFamily: "Nunito",

//SPACE are not complete/verified
space: [0, 2, 4, 8, 16, 24, 32],

fontSizes: [12, 14, 16, 20, 24, 32],
fontWeights: [500, 600, 700, 800],

lineHeight: [1.4, 1.3, 1.3, 1.5, 1.5, 1.3, 1.4, 1.2],
letterSpacings: [0],

//what exactly is SIZES? Do we need that?
sizes: [],

//should we split up BORDERS?? Is borderstyles really necessary? Bestpractices?
borders: [],
borderWidths: [0, 1, 2, 3],
borderStyles: ["dashed", "solid"],

//RADII are not complete/verified
radii: [10, 18, 20, 24, 28, 30],

//OPACITIES are not complete/verified
opacities: [0.4, 0.6, 0.75],

//SHADOWS are not complete/verified
shadows: [
"0px 12px 18px -8px rgba(186, 160, 79, 0.2)",
"0px -4px 10px 4px rgba(255, 255, 255, 0.2)",
],

//Does Louis define the TRANSITIONS??
transitions: [],

//bestpractice for ZINDICES??
zIndices: [0, 1],

colors: {
primary: {
160: "#d6ab00",
140: "#e8ba02",
120: "#f2c71c",
100: "#fed957",
75: "#fee381",
50: "#feecab",
35: "#fff2c4",
20: "#fff7dd",
},
beige: {
100: "#e2b736",
75: "#e9c968",
50: "#f0db9a",
35: "#f5e6b9",
20: "#f9f1d7",
10: "#fcf8eb",
"75-tra": "rgba(226, 183, 54, 0.75)",
"50-tra": "rgba(226, 183, 54, 0.5)",
"35-tra": "rgba(226, 183, 54, 0.35)",
"20-tra": "rgba(226, 183, 54, 0.2)",
"10-tra": "rgba(226, 183, 54, 0.1)",
},
brown: {
100: "#baa04f",
75: "#cbb87b",
50: "#dccfa7",
35: "#e7dec2",
20: "#f1ecdc",
10: "#faf8f3",
7: "#faf8f3",
4: "#fcfbf8",
"75-tra": "rgba(186, 160, 79, 0.75)",
"50-tra": "rgba(186, 160, 79, 0.5)",
"35-tra": "rgba(186, 160, 79, 0.35)",
"20-tra": "rgba(186, 160, 79, 0.2)",
"10-tra": "rgba(186, 160, 79, 0.1)",
"7-tra": "rgba(186, 160, 79, 0.07)",
"4-tra": "rgba(186, 160, 79, 0.04)",
},
greyscale: {
100: "#c3baa2",
75: "#d2cbb9",
50: "#e1dcd0",
35: "#eae7df",
20: "#f3f1ec",
10: "#f8f7f5",
8: "#fafaf9",
5: "#fcfcfb",
"75-tra": "rgba(195, 186, 162, 0.75)",
"50-tra": "rgba(195, 186, 162, 0.5)",
"35-tra": "rgba(195, 186, 162, 0.35)",
"20-tra": "rgba(195, 186, 162, 0.2)",
"10-tra": "rgba(195, 186, 162, 0.11)",
"8-tra": "rgba(192, 188, 175, 0.08)",
"5-tra": "rgba(192, 188, 175, 0.05)",
},
black: {
"80-tra": "rgba(0, 0, 0, 0.8)",
"60-tra": "rgba(0, 0, 0, 0.6)",
"40-tra": "rgba(0, 0, 0, 0.4)",
"30-tra": "rgba(0, 0, 0, 0.3)",
},
signal: {
redDark: "#ca3336",
red: "#ff3c3e",
greenDark: "#00857b",
green: "#009a8e",
blueDark: "#241ebe",
blue: "#322bf3",
},
},

Fix the implementation of Theming and styled-system

Theming is not yet implemented correctly. I (Tassillo) did not yet understand how to do this correctkly. My biggest issues were the following:

• As Theming always comes with a Themeprovider, how is the implementation within the component-library? We need a clean way to work with for an example "primary-color"

Checkboxes

Layer Styles

Export all icons and send to the dev team

Finalize Tertiary Buttons

Radio Buttons

Add Colorpalette to the Theme-file

Implement the colorpalette into the Theme-file based on the one defined in Framer:

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

Register-panel, verification, and thanks/lets go

Finalize Ideacard + ProjectroomCard + OrganizationCard

Desktop/Mobile main concept

Adjust all components using the theme-specifications

Add ProjectroomCard

Implement all Selects according to the designfile

Error: Color of Layerstyle-YellowHover is not a color within the Colorpalette

Create the dynamic input/textarea component using the props "rows"

For an example, the Material-UI library has the component TextFields which can be used as a Inputfield as well as a textarea: https://mui.com/components/text-fields/

how can we implement it the same way? the html tag Input does not allow multirows, the html tag textarea though does.... should we always use textarea instead of input? or should we define the input component to switch between <input and <textarea if a prop rows="x" is given?

test

OrganizationsOverview (Copy from Main App)

OrganizationProfile

Error: brown 010 and brown 007 have the same HEX values

layers styles

Loading-Component using Lottie.js

This is the loading-animation you can find and use within the buttons too

Deploy storybook

Prevent Darkmode

Modals - all types of modals + animation

Tags

What is it about the syntax errors, which are not supposed to be showing up?

What's it about these syntax errors??

small text inputs

Segment control

Adjust all components to Accessability-rules

Enhance the Inputs

The implemented Inputs are not yet fully implemented as designed within Framer:

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

Inputs cant display the onChange events in the Storybook?

if the component-library is purely the design and the functions come as props from the main app, how can the components-stories be working?

or should the functions also be within the component-library

example: Inputfield Error-messages

Positioning components in the main App: through wrapping-divs? or through props?

Should we position components by adding props like

< ComponentX
position="fixed"
margin="20px 20px 20px 20px"
/>

or should we position components like

< ComponentWrapper>
< ComponentX/>
< /ComponentWrapper>

toggle switch

tooltips

Finalize OrganizationCard

Systematic color implementation – Converting colors to appearances?

Define and submit all Theme-specifications

space
fontSizes
colors
fonts
fontWeights
lineHeights
letterSpacings
sizes
borders
borderWidths
borderStyles
radii
shadows
transitions
zIndices

Cards: Hover & Click effect

how to implement global styles in component-library

Checkboxes

is it ok to use images as div with background-src, or rather use the img tag?