Setup for development

Both rehua and rehua-doc have the devcontainer.json file.

To use it, install Docker, VS Code and the ms-vscode-remote.remote-containers plugin. Then follow these instructions to clone the repository to your local machine.

Common commands

Main repository

npm run check-all -w api -w web: run tests on both web and api packages
npm run fix-all -w api -w web: run linter and formatter fix on both web and api packages
npm run format & npm run format:fix: run formatter on the root folder
npm run build:sdk -w sdk: update sdk
npm run dev -w api & npm run dev -w web: preview the api and web
npm run build -w api & npm run build -w web: build the api and web

Document repository

source .venv/bin/activate & deactivate: activate and deactivate venv
mkdocs serve / npm run dev: preview the doc
mkdocs build -s / npm run build: build the doc

SDK usage

This project uses SDK generated by nestia.

Update SDK

Edit files in api folder.
Run npm run build:sdk -w sdk to update SDK
Edit files in web folder.

Example usage

API:

import { AppService } from './app.service';
import { TypedRoute } from '@nestia/core';
import { Controller } from '@nestjs/common';

@Controller()
export class AppController {
    constructor(private readonly appService: AppService) {}

    @TypedRoute.Get()
    getHello(): string {
        return this.appService.getHello();
    }
}

SDK output:

/**
 * @packageDocumentation
 * @module api.functional
 * @nestia Generated by Nestia - https://github.com/samchon/nestia
 */
//================================================================
import type { IConnection } from '@nestia/fetcher';
import { PlainFetcher } from '@nestia/fetcher';
import type { Primitive, Resolved } from 'typia';
import typia from 'typia';

/**
 * @controller AppController.getHello
 * @path GET /
 * @accessor api.functional.getHello
 * @nestia Generated by Nestia - https://github.com/samchon/nestia
 */
export async function getHello(
    connection: IConnection,
): Promise<getHello.Output> {
    return true === connection.simulate
        ? getHello.simulate(connection)
        : PlainFetcher.fetch(connection, {
              ...getHello.METADATA,
              template: getHello.METADATA.path,
              path: getHello.path(),
          });
}
export namespace getHello {
    export type Output = Primitive<string>;

    export const METADATA = {
        method: 'GET',
        path: '/',
        request: null,
        response: {
            type: 'application/json',
            encrypted: false,
        },
        status: 200,
    } as const;

    export const path = () => '/';
    export const random = (): Resolved<Primitive<string>> =>
        typia.random<Primitive<string>>();
    export const simulate = (_connection: IConnection): Output => {
        return random();
    };
}

Web:

'use client';

import { APIUrlContext } from './providers';
import { isTesting } from '@/app/utils/env';
import { getHello } from '@rehua/sdk/functional';
import { queryOptions, useQuery } from '@tanstack/react-query';
import { useContext, type JSX } from 'react';
import { functional } from 'typia';

function useHelloOptions(): ReturnType<
  typeof queryOptions<string, Error, string, string[]>
> {
  const host = useContext(APIUrlContext);

  return queryOptions({
    queryKey: ['hello', host],
    queryFn: () =>
      getHello({
        host: host,
        simulate: isTesting,
      }),
  });
}

function Home(): JSX.Element {
  const query = useQuery(useHelloOptions());

  if (query.isLoading) {
    return <h1>Loading...</h1>;
  }

  return <h1>Hello world -- {query.data}</h1>;
}

export default functional.assertFunction(Home);

Web Icons

Within the main repository, all the SVG icons used in the frontend are kept in web/app/assets/icons. In web/app/assets/scripts, there are two icon-related scripts:

normalise-icons.ts: will standardise SVGs in the icons folder to ensure all icons can be manipulated in size, colour and other transformations.
generate-icons.ts: will generate web/app/components/auto-generated-icons.ts. This file imports each SVG icon from the icons folder and exports a const icons object record to be used within the Icon.tsx name prop. Never manually modify this file.

Scripts Usage

These scripts are to be run only when:

New SVG icons are added to the icons folder, OR
SVG icons are removed from the icons folder

When adding new SVG icons

npm run normalise-icons -w web - you will see a list of all icons and whether they have been changed or not. Newly added icons are likely to change, old ones will stay the same.
npm run generate-icons -w web - you will see the following file has been added: web/app/components/auto-generated-icons.ts. You will also see how many icons have been generated. Never manually modify this file.
Conduct linting as shown in common commands.

When removing SVG icons

npm run generate-icons -w web - you will see the following file has been added: web/app/components/auto-generated-icons.ts. You will also see how many icons have been generated. Never manually modify this file.
Conduct linting as shown in common commands.