Lecca.io LogoLecca.io
Directory structure

UI Package

The UI is built using React, Typescript, Tailwind, and React Query.

The directory structure is the following:

  • /packages/ui/src/api - All api services are found within this directory. Never make an api call without a service. Services are defined and added to the api-library.ts. If you need to make an api call to the server, import api and use it like this: api.agents.getList(). It completely typed so you don't need to guess what parameters to pass. If you need to make an api call to the server within a component, use the react query hook wrapper the api library provides. You would use it like this within a component
const { data: agents } = useApiQuery({
  service: "agents",
  method: "getList",
  apiLibraryArgs: {},
});

This will cache the response until it reaches the stale time (defined in api-library.ts) or until invalidated.

  • /packages/ui/src/components - All resuable components should be defined in this folder. This includes reusable forms, loaders, tables, .etc. This is also where we have our shadcn/ui components defined. They are in the packages/ui/src/components/ui directory.

  • /packages/ui/src/hooks - Define context hooks and any other hooks here. We don't use them much, but this is where you'd put them.

  • packages/ui/src/models - This is where we define all the types for the models we use throughout the platform. Any entity that is sent from the server should have a type. We define types using zod schemas and then export the type as well using z.infer<typeof zodSchema>.

The reason we use zod schema is because we used to (and still may) mock all requests using zod and faker and having the zod schemas defined allowed the mock data to take the shape of the expected model. This will be useful for testing with mocked calls.

If you are making a schema always end it with schema. E.g. agentSchema. And the type that is exported will just be Agent. E.g. export type Agent = z.infer<typeof agentSchema>

Every property besides id and name should be optional. Since additional properties are only returned when expansions are added to the api call.

  • packages/ui/src/pages - Every root page should have it's own folder. For example, to create the projectspage, aprojectsfolder was created and aprojects-page.tsxfile was created within there. All nested pages should be created within thatprojects folder. There's no strict structure for sub pages.

All new pages must have a route. You can modify the routes in packages/ui/src/router/routes.tsx.

  • packages/ui/src/utils - Any common utility functions should be added to this directory.

Previous

Server Package