@property-pass/ui v2.12.6
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
- π Frequently asked questions
- π« Deploying/Azure Devops
- βοΈ Technical decisions
π Quick start
Clone the project
Clone the property pass client repository via SSH
$ git clone git@ssh.dev.azure.com: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
/node_modules
: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed./public
: This directory contains all of the static files to be served, required for the build./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.
.gitignore
: This file tells git which files it should not track / not maintain a version history for.yarn.lock
(Seepackage.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).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.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 |
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago