@property-pass/ui

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
• 🧐 What's inside?
• 🤖 Available Scripts
  • yarn commit
  • yarn build
  • yarn lint
  • yarn pretty
  • yarn start
  • yarn storybook:build
  • yarn check
  • yarn clean
  • yarn release
  • yarn release:dry
• 🎓 Frequently asked questions
  • What should my new component look like?
    • Align often
    • Where's my design?
• 💫 Deploying/Azure Devops
• ⚙️ Technical decisions

🚀 Quick start

Clone the project

Clone the property pass client repository via SSH

$ git clone [e-mail]:v3/Axiom0147/Axiom/property-pass-ui

Traverse into directory

cd property-pass-ui

Install dependencies/modules

yarn install

Start the project

yarn start

If everything is correct your project will launch at 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.

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

3. /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.

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

5. 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).

6. 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.

7. 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/ 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 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