Consistent design across teams with React, Styled Component, Storybook, & Prettier

There is nothing more irritating than making a card and inspecting the card again for shadows and radius that you might have used in it. The worst-case being redesigning the card because you did not know it existed. Or maybe some of your team members using double quotes for string declaration while 80% of the code using single quotes.

It is not the language that makes programs appear simple. It is the programmer that make the language appear simple! -Robert C. Martin, Clean Code: A Handbook of Agile Software Craftsmanship

Let’s dive into the implementation without technical jargon ❤.

Step 1. Setting Up React

Here we use the community’s favorite create-react-app with typescript flag. We’ll neither of typescript or create-react-app are a necessity for the project. CRA removes a huge burden of setting up ESLint, WebPack, and Babel so that you can focus more on coding. Nonetheless, if you want to set up react from scratch here’s a link to my repo. And we use typescript because it help’s us write self-documenting code and a safer environment with fewer errors. Type the following command to get yourself started.

Next up create 2 files .eslintrc and .eslintignore . Add build/* in your eslintignore. This will tell eslint, not to the lint build folder. And as of now copy-paste the eslintConfig block from package.json into .eslintrc

Tip: Most IDEs have plugins for ESLint Prettier and Styled Components. Installing them could help you a lot as they prompt for errors as you code.

Step 2. Setting Up Styled Components

Screenshot from Official Website Explaining why to use Styled Components so that I don’t have to

Well now that you are convinced about it. Let’s dive into setting it up.

Creating your first Styled Component

Files to create:
src/GlobalStyle.ts: This file will contain all the Global Styles analogous to index.css
src/components/Typography/Heading.tsx: Our first Styled Component. We will define how our H1, H2… should look like.
Let’s now dive into codes.

Now we’ll set up a Global Color Pallet so that we don’t find a different shade of blue, green on every page.

Next Up. Let’s create the styled component

All Done. Now we’ll be able to use it in our App.tsx like this

Step 3: Setting up storybook

Hufft. Tired? We’re almost there!! To show how useful storybooks can be. Here’s a link to Coursera's branding guidelines. Promise this section will be swift. A detailed explanation can be found here.

Firstly run npx -p @storybook/cli sb init. This will autodetect the framework you use and set up a storybook for you. After it completes. You will have a .storybook folder and /src/stories folder. Create a file named Typography.stories.tsx in the stories folder.

All DONE!! run npm run storybook to view your story.

Step 4. Setting up Prettier

To set up the necessary items run npm i prettier eslint-plugin-prettier eslint-config-prettier. Next up create a .prettierrc file in the root and paste the following contents. You can enable more content if you want, have a look at all of them here.

Lastly, we will modify our .eslinrc to let us know if we are not following the pattern the workspace has set. Paste the following content in your .eslintrc

You deserve a pat on the back if you made it till here ❤ ❤

Hope you learned something new. You can find all the source code. With some automation on how to deploy your storybooks automatically in the below link.

We have launched three new publications! Show some love for our new publications by following them: AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!

We are also always interested in helping to promote quality content. If you have an article that you would like to submit to any of our publications, send us an email at submissions@plainenglish.io with your Medium username and we will get you added as a writer. Also let us know which publication/s you want to be added to.

Sometimes it is the people no one can imagine anything of, do the things no one can imagine.