Property-pass-ui NPM

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

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