refactor: Model UI Issue + file conventions

.changeset/little-zebras-boil.md

@@ -0,0 +1,6 @@
+---
+'@halfdomelabs/project-builder-web': patch
+'@halfdomelabs/ui-components': patch
+---
+
+Fix model UI fields alignment

packages/project-builder-web/src/index.tsx

@@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 
 import './index.css';
-import { router } from './pages';
+import { router } from './pages/_routes';
 
 const rootElement = document.querySelector('#root');
 if (!rootElement) throw new Error('Failed to find root element');

packages/project-builder-web/src/pages/index.tsx → packages/project-builder-web/src/pages/_routes.tsx

@@ -5,7 +5,7 @@ import { AppLayout } from '@src/app/AppLayout/AppLayout';
 import { createRouteCrumb } from '@src/types/routes';
 
 import { AppsRoutes } from './apps';
-import { DataRoutes } from './data';
+import { DataRoutes } from './data/_routes';
 import { FeatureRoutes } from './features';
 import HomePage from './home/home.page';
 import { NotFoundRoute } from './NotFound.page';

packages/project-builder-web/src/pages/data/DataLayout.tsx → packages/project-builder-web/src/pages/data/_layout.tsx

@@ -8,7 +8,7 @@ import { NavLink, Outlet, useMatch } from 'react-router-dom';
 import { ErrorBoundary } from '@src/components/ErrorBoundary/ErrorBoundary';
 
 import { EnumsSidebarList } from './enums/EnumsSidebarList';
-import { ModelsSidebarList } from './models/ModelsSidebarList';
+import { ModelsSidebarList } from './models/_components/ModelsSidebarList';
 
 export function DataLayout(): React.JSX.Element {
   const {

packages/project-builder-web/src/pages/data/index.tsx → packages/project-builder-web/src/pages/data/_routes.tsx

@@ -2,16 +2,16 @@ import type { RouteObject } from 'react-router-dom';
 
 import { Navigate } from 'react-router-dom';
 
-import { DataLayout } from './DataLayout';
+import { DataLayout } from './_layout';
 import { EnumRoutes } from './enums';
-import { ModelRoutes } from './models';
+import { ModelsRoutes } from './models/_routes';
 
 export const DataRoutes: RouteObject = {
   element: <DataLayout />,
   path: '/data',
   children: [
     { index: true, element: <Navigate to="./models" /> },
-    ModelRoutes,
+    ModelsRoutes,
     EnumRoutes,
   ],
 };

packages/project-builder-web/src/pages/data/enums/EnumsSidebarList.tsx

@@ -13,7 +13,7 @@ import { useState } from 'react';
 import { MdAdd, MdClear } from 'react-icons/md';
 import { NavLink } from 'react-router-dom';
 
-import { createEnumEditLink } from '../models/utils/url';
+import { createEnumEditLink } from '../models/_utils/url';
 import { NewEnumDialog } from './new/NewEnumDialog';
 
 interface EnumsSidebarListProps {

packages/project-builder-web/src/pages/data/enums/hooks/useEnumForm.tsx

@@ -23,7 +23,7 @@ import { useDeleteReferenceDialog } from '@src/hooks/useDeleteReferenceDialog';
 import { logAndFormatError } from '@src/services/error-formatter';
 import { NotFoundError, RefDeleteError } from '@src/utils/error';
 
-import { createEnumEditLink } from '../../models/utils/url';
+import { createEnumEditLink } from '../../models/_utils/url';
 
 interface UseEnumFormOptions {
   schema?: z.ZodTypeAny;

packages/project-builder-web/src/pages/data/models/ModelsSidebarList.tsx → packages/project-builder-web/src/pages/data/models/_components/ModelsSidebarList.tsx

@@ -13,8 +13,8 @@ import { useState } from 'react';
 import { MdAdd, MdClear } from 'react-icons/md';
 import { NavLink } from 'react-router-dom';
 
+import { createModelEditLink } from '../_utils/url';
 import { NewModelDialog } from './NewModelDialog';
-import { createModelEditLink } from './utils/url';
 
 interface ModelsSidebarListProps {
   className?: string;

packages/project-builder-web/src/pages/data/models/NewModelDialog.tsx → packages/project-builder-web/src/pages/data/models/_components/NewModelDialog.tsx

@@ -7,8 +7,8 @@ import {
   useControlledState,
 } from '@halfdomelabs/ui-components';
 
-import { ModelInfoForm } from './edit/model/ModelInfoForm';
-import { useModelForm } from './hooks/useModelForm';
+import { useModelForm } from '../_hooks/useModelForm';
+import { ModelInfoForm } from '../edit/[id]/_components/ModelInfoForm';
 
 interface NewModelDialogProps {
   children: React.ReactNode;

packages/project-builder-web/src/pages/data/models/constants/scalar-types.ts → packages/project-builder-web/src/pages/data/models/_constants.tsx

@@ -1,5 +1,32 @@
 import type { ScalarFieldType } from '@halfdomelabs/project-builder-lib';
 
+import { modelTransformerEntityType } from '@halfdomelabs/project-builder-lib';
+import { createNewModelTransformerWebConfig } from '@halfdomelabs/project-builder-lib/web';
+
+import { embeddedRelationTransformerWebConfig } from './edit/[id]/_components/service/ServiceEmbeddedRelationForm';
+
+export const BUILT_IN_TRANSFORMER_WEB_CONFIGS = [
+  embeddedRelationTransformerWebConfig,
+  createNewModelTransformerWebConfig({
+    name: 'password',
+    label: 'Password',
+    description: "Hashes the input value of value 'password' using Argon2id",
+    getNewTransformer: () => ({
+      id: modelTransformerEntityType.generateNewId(),
+      type: 'password',
+    }),
+    allowNewTransformer(_, modelConfig) {
+      return (
+        !modelConfig.service?.transformers?.some(
+          (t) => t.type === 'password',
+        ) && modelConfig.model.fields.some((f) => f.name === 'passwordHash')
+      );
+    },
+    getSummary: () => [],
+    pluginId: undefined,
+  }),
+];
+
 export interface ScalarFieldTypeOption {
   label: string;
   value: string;

packages/project-builder-web/src/pages/data/models/hooks/useModelForm.ts → packages/project-builder-web/src/pages/data/models/_hooks/useModelForm.ts

@@ -24,7 +24,7 @@ import { logAndFormatError } from 'src/services/error-formatter';
 import { useDeleteReferenceDialog } from '@src/hooks/useDeleteReferenceDialog';
 import { NotFoundError, RefDeleteError } from '@src/utils/error';
 
-import { createModelEditLink } from '../utils/url';
+import { createModelEditLink } from '../_utils/url';
 
 interface UseModelFormOptions {
   schema?: z.ZodTypeAny;

packages/project-builder-web/src/pages/data/models/index.tsx → packages/project-builder-web/src/pages/data/models/_routes.tsx

@@ -3,16 +3,16 @@ import type { RouteObject } from 'react-router-dom';
 import { NotFoundRoute } from '@src/pages/NotFound.page';
 import { createRouteCrumb } from '@src/types/routes';
 
-import { ModelEditRoutes } from './edit/_routes';
-import ModelListPage from './ModelList.page';
+import { ModelEditRoutes } from './edit/[id]/_routes';
+import ModelsIndexPage from './index.page';
 
-export const ModelRoutes: RouteObject = {
+export const ModelsRoutes: RouteObject = {
   path: 'models/*',
   handle: {
     crumb: createRouteCrumb({ label: 'Models', url: '/data/models' }),
   },
   children: [
-    { index: true, element: <ModelListPage /> },
+    { index: true, element: <ModelsIndexPage /> },
     ModelEditRoutes,
     NotFoundRoute,
   ],

packages/project-builder-web/src/pages/data/models/edit/ModelInfoEditDialog.tsx → packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelInfoEditDialog.tsx

@@ -6,8 +6,9 @@ import {
   useControlledState,
 } from '@halfdomelabs/ui-components';
 
-import { useModelForm } from '../hooks/useModelForm';
-import { ModelInfoForm } from './model/ModelInfoForm';
+import { useModelForm } from '@src/pages/data/models/_hooks/useModelForm';
+
+import { ModelInfoForm } from './ModelInfoForm';
 
 interface ModelInfoEditDialogProps {
   open?: boolean;

packages/project-builder-web/src/pages/data/models/edit/model/ModelRelationsSection.tsx → packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelRelationsSection.tsx

@@ -11,7 +11,7 @@ import {
 } from '@halfdomelabs/ui-components';
 import { MdAdd, MdDeleteOutline, MdEdit } from 'react-icons/md';
 
-import { useEditedModelConfig } from '../../hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '../../../_hooks/useEditedModelConfig';
 import { ModelRelationDialog } from './fields/relations/ModelRelationDialog';
 
 interface Props {

packages/project-builder-web/src/pages/data/models/edit/model/ModelUniqueConstraintsSection.tsx → packages/project-builder-web/src/pages/data/models/edit/[id]/_components/ModelUniqueConstraintsSection.tsx

@@ -10,7 +10,7 @@ import {
 } from '@halfdomelabs/ui-components';
 import { MdAdd, MdDeleteOutline, MdEdit } from 'react-icons/md';
 
-import { useEditedModelConfig } from '../../hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '../../../_hooks/useEditedModelConfig';
 import { ModelUniqueConstraintDialog } from './fields/unique-constraints/ModelUniqueConstraintDialog';
 
 interface Props {

packages/project-builder-web/src/pages/data/models/edit/model/fields/ModelAddFieldButton.tsx → packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelAddFieldButton.tsx

@@ -10,7 +10,7 @@ import { Button, ButtonGroup, Dropdown } from '@halfdomelabs/ui-components';
 import { useMemo } from 'react';
 import { MdExpandMore } from 'react-icons/md';
 
-import { useEditedModelConfig } from '../../../hooks/useEditedModelConfig';
+import { useEditedModelConfig } from '../../../../_hooks/useEditedModelConfig';
 
 interface ModelAddFieldButtonProps {
   className?: string;