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.

npx create-react-app test-application

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.

npm install styled-components
npm install @types/styled-components --save-dev

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.

/**
* GlobalStyle.ts: Font Raleway has been src into index.html
*/
import { createGlobalStyle } from 'styled-components'
export default createGlobalStyle`
body {
padding: 0;
margin: 0;
overflow-x:hidden!important;
font-family: Raleway, sans-serif;
}

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

/**
* index.tsx: Here we use Theme Provider that under the hood uses the * context to provide theme object throughout the react app.
*/
import React from 'react'
import ReactDOM from 'react-dom'
import { ThemeProvider } from 'styled-components'
import App from './App'
import * as serviceWorker from './serviceWorker'
import GlobalStyle from './GlobalStyle'

const theme = {
primary: 'black',
secondary: 'white',
secondaryDark: '#0077c2',
acmBlue: '#0077c2'
}
ReactDOM.render(
<ThemeProvider theme={theme}>
<GlobalStyle />
<React.StrictMode> <App /> </React.StrictMode>
</ThemeProvider>,
document.getElementById('root'))
serviceWorker.unregister()

Next Up. Let’s create the styled component

/**
* Heading.tsx: The file takes a varient as parameter and then renders the heading tag with appropriate size.
*/
import styled from 'styled-components'
interface PROPTYPES {
varients: number
theme: any
}
const getFontSizeBasedOnVarient = (varients: number) => {
switch (varients) {
case 1: return '5rem'
case 2: return '4rem'
case 3: return '3rem'
case 4: return '2rem'
default: return '1rem'
}
}
const Heading = styled.h1<{ varients: number }>`
color: ${(props: PROPTYPES) => props.theme.primary};
font-size: ${(props: PROPTYPES) => getFontSizeBasedOnVarient(props.varients, props.mediaQueryType)};
font-family: 'Raleway', sans-serif;
font-weight: 900;
`
export default Heading

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

import React from 'react'
import Heading from './components/Typography/Heading'
function App() {
return (<Heading varients={1}>This is heading, One</Heading>)
}
export default App

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.

/**
* src/stories/Typography.tsx
*/
import React from 'react'
import Heading from '../components/Typography/Heading'
export default { title: 'Typography',component: Heading}
export const Heading1 = () => <Heading varients={1}>This is heading 1 with 5 rem</Heading>
export const Heading2 = () => <Heading varients={2}>This is heading 2 with 4 rem</Heading>
export const Heading3 = () => <Heading varients={3}>This is heading 3 with 3 rem</Heading>
export const Heading4 = () => <Heading varients={4}>This is heading 3 with 2 rem</Heading>
export const DeafultTag = () => <Heading varients={5}>This is the default </Heading>

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.

{
"arrowParens": "always",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 120,
"endOfLine": "crlf"
}

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

{
"extends": ["react-app", "prettier", "prettier/react"],
"parserOptions": { "ecmaVersion": 2018 },
"env": { "commonjs": true, "es6": true, "node": true },
"plugins": ["jsx-a11y", "prettier"],
"rules": {
"linebreak-style": "off",
"no-plusplus": [2,{ "allowForLoopAfterthoughts": true }],
"react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"]]
}
}

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.

aesher9o1/cra-storybook-boilerplate

A note from JavaScript In Plain English

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.