npm package: @property-pass/ui
Description: Property Pass UI components
Latest version: 2.12.6

<p  align="center">

<a  href="https://propertypass.com/">

<img alt="Property Pass" src="https://www.learnstorybook.com/design-systems-for-developers/design-system-context.jpg" width="960" />

</a>

</p>

<h1  align="center">

Property Pass UI

</h1>

[![npm version](https://badge.fury.io/js/%40property-pass%2Fui.svg)](https://npmjs.org/package/@property-pass/ui)

The property pass UI is a web interface build in React, the goal of the application is to facility the developers (or external parties) of Property Pass with control, flexibility and above all speed to add new functionality.

- [🚀 Quick start](#-quick-start)
- [🧐 What's inside?](#-whats-inside)
- [🤖 Available Scripts](#-available-scripts)
  - [`yarn commit`](#yarn-commit)
  - [`yarn build`](#yarn-build)
  - [`yarn lint`](#yarn-lint)
  - [`yarn pretty`](#yarn-pretty)
  - [`yarn start`](#yarn-start)
  - [`yarn storybook:build`](#yarn-storybookbuild)
  - [`yarn check`](#yarn-check)
  - [`yarn clean`](#yarn-clean)
  - [`yarn release`](#yarn-release)
  - [`yarn release:dry`](#yarn-releasedry)
- [🎓 Frequently asked questions](#-frequently-asked-questions)
  - [What should my new component look like?](#what-should-my-new-component-look-like)
    - [Align often](#align-often)
    - [Where's my design?](#wheres-my-design)
- [💫 Deploying/Azure Devops](#-deployingazure-devops)
- [⚙️ Technical decisions](#️-technical-decisions)

## 🚀 Quick start

**Clone the project**

Clone the property pass client repository via SSH

```shell

$ git clone git@ssh.dev.azure.com:v3/Axiom0147/Axiom/property-pass-ui

```

**Traverse into directory**

```shell

cd property-pass-ui

```

**Install dependencies/modules**

```shell

yarn install

```

**Start the project**

```shell

yarn start

```

If everything is correct your project will launch at [http://localhost:6006/](http://localhost:6006/)

## 🧐 What's inside?

A quick look at the top-level files and directories you will find in our project

    .
    ├── node_modules
    ├── public
    ├── src
        ├── assets
        ├── (*) components
            ├── *.stories.tsx
            ├── *.styles.tsx
            ├── *.tsx
        ├── GlobalStyle.ts
    ├── .gitignore
    ├── package-lock.json
    ├── package.json
    └── README.md

1.  **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

1.  **`/public`**: This directory contains all of the static files to be served, required for the build.

1.  **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.

    - **`/assets`**: The assets that the componetns use.
    - **`/*/*.tsx`**: The component
      - **`/*/*.stories.tsx`**: The component their story
      - **`/*/*.styles.tsx`**: The component their style
    - **`/*/GlobalStyle.ts`**: The global CSS style file provided by styled components.

1.  **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.

1.  **`yarn.lock`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**

1.  **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

1.  **`README.md`**: A text file containing useful reference information about your project.

## 🤖 Available Scripts

In the project directory, you can run the following commands:

### `yarn commit`

Prompts commitizen CLI to adhere to the convetional commit defaults.

### `yarn build`

Builds the app for production to the `build` folder.

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

### `yarn lint`

Runs ESlint over the whole project.

### `yarn pretty`

Runs Prettieer over the whole project.

### `yarn start`

Runs the app in the development mode.

A new tab will open and launch [http://localhost:6006/](http://localhost:6006/) so you can view it in your browser.

### `yarn storybook:build`

Build a static version of our storybook instance.

### `yarn check`

Pretty, lint and build.

### `yarn clean`

Remove the `build` directory.

### `yarn release`

Utilize `semantic-release` to generate a changelog, tag the build version and deploy to NPM.

### `yarn release:dry`

Do a DRY-RUN `semantic-release`, this is a sandboxed run, nothing is released.

## 🎓 Frequently asked questions

### What should my new component look like?

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.

## 💫 Deploying/Azure Devops

In the file `azure-pipelines.yml` you'll find our pipeline configration, paired with the variables that you'll mange [over here](https://dev.azure.com/Axiom0147/Axiom/_library?itemType=VariableGroups&view=VariableGroupView&variableGroupId=16&path=property-pass-ui-dev) you can let your pipeline automate everything you want to. THese are the steps that are currenlty included.

- Create .npmrc
- Authenticate private NPM modules
- Install Node.js
- Clean install NPM modules
- Run build
- Deploy to chromatic
- Generate changelog, tag version and release

## ⚙️ Technical decisions

This list reflects all the technical decisions that have been made around certain topics.

| Option                             | Decision                                                                                           |
| ---------------------------------- | -------------------------------------------------------------------------------------------------- |
| Static Site Generation             | -                                                                                                  |
| Server Side Rendering              | -                                                                                                  |
| Base package                       | Create React App / Storybook                                                                       |
| GraphQL client                     | -                                                                                                  |
| State management                   | -                                                                                                  |
| Code formatter                     | Prettier                                                                                           |
| Linter                             | ESlint                                                                                             |
| Static Type Checking               | TypeScript                                                                                         |
| Localization                       | -                                                                                                  |
| Routing                            | -                                                                                                  |
| Bundler/build                      | Webpack                                                                                            |
| Compiler                           | Babel                                                                                              |
| CSS-in-JS                          | Styled components                                                                                  |
| Unit/Integration Testing           | Jest / React Testing Library                                                                       |
| E2E testing                        | -                                                                                                  |
| Visual testing                     | Snapshot testing                                                                                   |
| Distribution                       | Chromatic                                                                                          |
| Commit template                    | Conventional Commits                                                                               |
| Preferred Component Design Pattern | Functional Compound Components (https://kentcdodds.com/blog/compound-components-with-react-hooks/) |
| Document Head Manager              | -                                                                                                  |
| Dates                              | Date fns                                                                                           |
| Package Manager                    | Yarn                                                                                               |
| Task runner                        | Yarn Scripts                                                                                       |