# Component development for Property Pass 🔑

Basically we design our components in Sketch, build them in Storybook and consume them in React, that’s short-and-simple, here’s an in depth guide.

## 01. Design stage

The UI/UX designers of Property Pass will create new components; Always check with them. They also set the guidelines, spacing, fonts and other tokens.

### Align often

It's good to have meetings often to counter and challenge each-other, not everything what can be designed is easy to build.

### Where's my design?

In the JIRA tickets there would be either a screenshot attached or a URL to Zeplin, our design system exploring tool.

## 02. Build stage

As stated before we build our components within the Storybook framework so it's mostly framework agnostic and everything can be build in isolation.

![enter image description here](https://www.learnstorybook.com/design-systems-for-developers/design-system-context.jpg)

> Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.

### A. Extract the necessary data

Before you begin writing your component head off to Zeplin to check if the UI/UX design is finalised, and, if there are new tokens that should be taken into account.

### B. Let's build a `<ListItem>` component

1.) Pull the latest version of `develop`

2.) Create branch for component
`$ git checkout -b feature/add-list-item-component`

3.) Open your editor and create a new folder in `src/stories` give this folder the name of your component e.g, `list-item`

4.) Add two files `ListItem.tsx` and `ListItem.stories.tsx`

5.) `ListItem.tsx` contains our component code; A Property Pass UI component always needs to have the following structure:

**Every component should be typed**
We use TypeScript so whenever you make a new component use the `.tsx` extension.

**You need to import all the resources you need (modules, assets, helpers, etc.)**

In our case we want to import `react` and leverage `baseui/list`

```
import  React  from  'react';
import {
ListItem  as  BaseListItem,
ListItemLabel,
ARTWORK_SIZES,
} from  'baseui/list';
```

As you've might noticed we rename the current ListItem to BaseListItem because we want to use that name in our component.

**Each component that recieves props needs to be typed**

We also need to add an interface to our component so that TypeScript knows what to expect and show the develop who's implementing the component you've build.

```
export interface ListItemProps {
	children: React.ReactNode;
	artwork?: React.ReactNode;
	endEnhancer?: React.ReactNode;
	onClick?: () => void;
}
```

Notice that the interface name reflects the components name, in this case we can easily clone and identify. If you have problems figuring out your interface take a look at https://github.com/typescript-cheatsheets/react

**Each component should be small whenever it's controlled or uncontrolled, it should a have a single responsibility (in general)**

```
/**
* This is a title that automatically will be reflected in your storybook story
*/

const ListItem: React.FC<ListItemProps> = (props) => {
	const { children, artwork, endEnhancer } = props;

	return (
		<BaseListItem
		artwork={artwork}
		artworkSize={ARTWORK_SIZES.MEDIUM}
		endEnhancer={() => endEnhancer}
		{...props}
		>
			<ListItemLabel>{children}</ListItemLabel>
		</BaseListItem>
	);
};
export default ListItem;
```

Now that we've defined our component it's time to write the story.

6.) `ListItem.stories.tsx` contains our storybook story code; A Property Pass UI component story always needs to have the following structure:

**Every story should be typed**
We use TypeScript so whenever you make a new component use the `.tsx` extension.

**You need to import all the resources you need (modules, assets, helpers, etc.)**

In our case we want to import `react`, the `Story` and `Meta` module from storybook react/types, the `ThemeProvider` and the component itself.

```
import  React  from  'react';
import { Story, Meta } from  '@storybook/react/types-6-0';
import { ThemeProvider } from  '../ThemeProvider';
import  ListItem, { ListItemProps } from  './ListItem';
```

First we we'll define our default `Meta` export, this META data allows storybook to know a couple of things beforehand. In our case it yields the path within the tree-view (the sidebar in Storybook) and the component itself.

```
export  default {
	title:  'Components/Content/ListItem',
	component:  ListItem,
} as  Meta;
```

After that we want to setup the `Template` of our story. This always includes the `<ThemeProvider>` since we need to provide the theme to the story.

```
const  Template:  Story<ListItemProps> = (args) => {
	return (
		<ThemeProvider>
		<ListItem  {...args}  />
		</ThemeProvider>
	);
};
```

Lastly we should define our arguments, in react words, the props of the component. Although our component can receive many props we only need/want to pass the children.

```
export  const  Default  =  Template.bind({});
Default.args  = {
	children:  'Add a new building',
};
```

That should be it 🎉

**Build your storybook instance**

Build your instance by running `$ yarn storybook`

**Navigate to your component in the tree-view**
Once you've found it, go play around, see if everything works as expected and if it does move on to the next stage.

### C. Consume the `<ListItem>` component

// This section is reserved for the implmentation part of the components

## 03. Review/deploy stage

// This section is reserved for PR, CI/CD and publishing steps, in the end we want to components to live in isolation and be published on NPM so that all projects can use them