ssd-frontend-setup

SSD Frontend Setup — Frontend project setup

Context

SSD's Frontend mainly uses React + TypeScript (TSX), with a standard Template downloadable from SSD's GitHub Organization. Every project must use the same Template and the same set of Packages.

Main rules

1. Must always use TypeScript + TSX; do not use plain JavaScript.
2. Must use SSD's Template as the basis; do not create an empty project yourself.
3. Must save every file with UTF-8 encoding and end lines with CRLF.
4. Must use only the specified Packages. If you want to use other Packages, consult your supervisor first.
5. Must follow the Style Guide consistently: new files must use the Style Guide immediately.

Tools that must be installed

VS Code Extensions:

• Auto Close Tag
• Auto Rename Tag
• ESLint
• Path Intellisense
• Prettier - Code formatter
• ES7+ React/Redux/React-Native snippets
• Error Lens

Chrome Extensions:

• Redux Devtools
• React Developer Tools

Prettier Config (configured in .prettierrc):

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": true,
  "singleQuote": false,
  "printWidth": 120,
  "editorconfig": false,
  "eslintIntegration": true,
  "stylelintIntegration": true,
  "endOfLine": "crlf"
}

Standard Packages that must be used

Must use:

• Vite 4.3.9, React 18.2
• @mui/material ^5.13.4 — UI components
• @tanstack/react-query ^4.29.17 — API state management
• axios 1.4.0 — HTTP client
• formik 2.4.1 — Form management
• react-redux 8.0.7, redux-persist 6.0.0 — State management
• react-router-dom 6.12.1 — Routing
• oidc-client-ts 2.2.4 — SSO/Identity Server
• dayjs 1.11.8, @mui/x-date-pickers ^6.9.0 — Date handling
• sweetalert2 11.7.12 — Popup dialogs

Should use as appropriate:

• zod ^3.22.4 + zod-formik-adapter ^1.2.0 — Validation
• apexcharts ^3.35.0 — Charts
• pdfmake ^0.2.10, html-to-image ^1.11.11 — Export

Standard Folder structure

src/app/
├── layout/          # Template layout (ไม่ควรแก้ไข)
├── api/             # API client files
│   ├── orderApi.client.ts   # สร้างจาก NSwag
│   ├── orderApi.ts          # เขียนเอง
│   └── order.query.ts       # React Query hooks
├── modules/         # UI screens และ components
│   ├── _common/    # Shared components (Template, ไม่ควรแก้)
│   ├── _auth/      # Auth components (Template, ไม่ควรแก้)
│   └── Order/      # ชื่อ Module ต้องขึ้นต้นด้วยตัวใหญ่
│       ├── components/
│       │   ├── OrderTable.tsx
│       │   ├── OrderTable.hook.tsx
│       │   └── index.ts
│       ├── pages/
│       │   ├── IndexPage.tsx    # หน้าแรกของ module ต้องชื่อนี้
│       │   ├── OrderPage.tsx    # ทุก page ต้องลงท้ายด้วย Page
│       │   └── index.ts
│       └── orderSlice.ts
├── routes/
│   ├── Routes.tsx        # Route configuration
│   └── ASideMenuList.tsx # Sidebar menu
└── redux/                # Redux store configuration

src/
├── const.ts              # Constants และ environment variables
└── vite-env.d.ts         # Type definitions สำหรับ env vars

Naming Conventions

TypeScript/JavaScript

Format	Used for
PascalCase	class, interface, type, enum, component functions, TSX
camelCase	variable, parameter, function, method, property
CONSTANT_CASE	global constants, enum values

• Abbreviation of 2+ words: all uppercase, e.g. DTO, API, HTML
• Abbreviation of 1 word: PascalCase, e.g. Id, Doc, Cust
• Do not use any type — use unknown or a clear type
• Do not use {} type — use Record<string, T> instead

React/File Naming

• Component files always use .tsx always
• Component file names: PascalCase, e.g. ReservationCard.tsx
• The main Component of the folder is named index.tsx
• Module names: PascalCase, no more than 3 words
• Page names: start with an uppercase letter, end with Page
• Component naming suffixes: Container, View, Card, Form, Table, List, Item

Route Naming

• All lowercase, use - instead of space
• Do not use punctuation
• No more than 70 characters

Steps for setting up Environment Variables

Step 1: Add Type in vite-env.d.ts

interface ImportMetaEnv {
    readonly VITE_API_URL: string;
    readonly VITE_SSO_ISSUER: string;
    // ชื่อ config ต้องขึ้นต้นด้วย VITE_ เสมอ
}

Step 2: Configure in .env files

VITE_APP_NAME = "ชื่อระบบ"
VITE_APP_VERSION = "1.0.0"
VITE_BASE_URL = "https://..."
VITE_API_URL = "https://...api..."
VITE_SSO_ISSUER = "https://...sso..."
VITE_SSO_CLIENT_ID = "..."
VITE_SSO_SCOPE = "openid profile roles email ..."

File	Used with
.env	Default value
.env.production	Production
.env.uat	UAT
.env.dev	Development
.env.local	Local machine

Step 3: Export via const.ts (recommended)

// /src/const.ts
export { VITE_BASE_URL, VITE_API_URL } = window.__CONST__ENV__;

// เรียกใช้ใน Component
import { API_URL } from '../Const';

Do not use import.meta.env directly, use window.__CONST__ENV__ or via const.ts

RPA & Automation Test

so that components can be tested with RPA and automation tests:

1. All Standard form components must work normally
2. Button must include the attribute name
3. Label, Typography that are displayed must include name
4. Dynamic render component must include the attribute id