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 [email protected]: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 |