IYA Web Apex

Local Development

Pre-requisites

• Ensure PNPM is installed globally: npm i -g pnpm vercel
• Checkout the develop branch of the source code (see Version Control Workflow)
• Ensure Prettier is set to run on save in your editor of choice! This should include auto-formatting on save
• Make sure eslint is setup to highlight issues!

_Any eslint or Prettier issues will result in any builds you commit failing! Do get these sorted to avoid wasting your time with re-committing your work! _

There are also a couple of optional steps!

• [OPTIONAL] Make sure you have been added and can access the project in Vercel
• [OPTIONAL] Install the Vercel CLI globally: npm i -g vercel

Local Setup

• Install the packages using pnpm i
• Copy the .env.template file in the root and store it as .env

Running locally

pnpm dev

This will run on http://localhost:3000.

The site is focused only on the /news section of the site, so you're best off starting here currently: http://localhost:3000/news!

...

Storybook

This project uses storybook for developing UI components in an isolated and sandboxed environment.

pnpm storybook

http://localhost:6006

...

Version Control Workflow

This project is Gitflow based. We're running off a simplified workflow as seen here:

https://trinitymirrortech.atlassian.net/wiki/spaces/EP/pages/4351983661/10+Version+Control+Workflow+WIP

Testing (TBI)

There are some tests that are run as part of the CI flow - you can run these locally using: npm run test

These are currently limited in number and cover only certain areas of the codebase.

Contributing

This project generally follows the Airbnb JS Style Guide but excludes the first 3 points. All other preferences are detailed below.

Technological choices

• This project is written in Typescript with strict static type-checking.
• Storybook is used for UI components
• Storybook is used as an isolated environment for developing UI components.

...

Folder Structure

src/
├── assets/
├── common/
├── UI/
│   ├── atoms/
│   ├── molecules/
│   ├── organisms/
├── containers/
├── core/
│   ├── api/
│   ├── config/
│   ├── helpers/
│   ├── http/
│   ├── other-feature/
├── helpers/
├── app/

/UI

We treat this folder as our project's UI library. All reusable UI should go here - these should be presentational basic building blocks of our app.

UI components are organized by complexity and specificity:

• atoms are the smallest (but reasonable) possible components. They are generic enough to be ideally reused in any project with a similar graphic style. (i.e. Input, Button, Pill, Icon, etc)
• molecules are more complex atoms or composition of atoms. These components could still be ideally used in other projects with a similar graphic style. (i.e. Button with Icon, Alert Panel, etc)
• organisms are very complex or project-specific components, barely reusable in any other project. (i.e. any specific entity Card, a very specific map)

Components should never import or use components with higher specificity. Ideally, lower specificity components should always be preferred, but a component with the same specificity could be used in some cases.

app/components

We treat this folder as our project's UI library. All reusable UI should go here - these should be presentational basic building blocks of our app.

UI components are organized by complexity and specificity:

/themes

Theme folder contains all JSON files for themes we use. They contain colour variables, breakpoints and font sizes. To add a new theme, we need to

1. Add a new file to this folder
2. Re export it from index.js
3. Add it's name to Themes enum at ./src/helpers/constants.ts

/lib

Provides a top level reusable business logic across app

/helpers

Contains minor utility files and functions

core/hooks

Folder for reusable react hooks