Frontend Standards

Validation

Use Yup for frontend validation schemas:

import * as Yup from 'yup';

export const userValidationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Email is required'),
  age: Yup.number().min(18, 'Must be at least 18 years old').required('Age is required'),
  password: Yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'),
});

Component Composition

Do not create a page file that only renders a single child component. Render the actual page content directly.

Example:

// Bad
const UsersPage = () => <UsersList />;

// Good
const UsersPage = () => (
  <div>
    <PageHeader title="Users" />
    <UsersList />
  </div>
);

JSX Conditions

Avoid unclear inline conditions. Define clear boolean flags first:

const shouldShowSelectEmailField = !isEdit && !token;

return shouldShowSelectEmailField ? <SelectEmailField /> : null;

Redux Usage

• Do not import internal slice actions directly in components.
• Export wrapper functions that call internal actions.
• Keep slice actions internal to slices.
• Avoid overpowered actions. Prefer intent-specific actions that operate inside the slice.

Example:

// slice.ts
const bookingSlice = createSlice({
  name: 'booking',
  reducers: {
    setBookingCriteria(state, action) {
      state.criteria = {...state.criteria, ...action.payload};
    },
  },
});

export const updateBookingCriteria = (payload) => (dispatch, getState) => {
  dispatch(bookingSlice.actions.setBookingCriteria(payload));
};