Skip to content

Commit

Permalink
refactor: switch to native @mantine/forms
Browse files Browse the repository at this point in the history
  • Loading branch information
@beeman
beeman committed Mar 16, 2024
1 parent c969fab commit f54a6b3
Show file tree
Hide file tree
Showing 15 changed files with 523 additions and 430 deletions.
428 changes: 256 additions & 172 deletions libs/tools/src/generators/web-crud/__snapshots__/web-crud-generator.spec.ts.snap
View file

Large diffs are not rendered by default.

196 changes: 102 additions & 94 deletions libs/tools/src/generators/web-feature/__snapshots__/web-feature-generator.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ import { AdminTestUiCreateForm } from '@proj/web-test-ui';
import { toastError, UiBack, UiCard, UiPage } from '@pubkey-ui/core';
import { useNavigate } from 'react-router-dom';

export function AdminTestCreateFeature() {
export default function AdminTestCreateFeature() {
const navigate = useNavigate();
const { createTest } = useAdminFindManyTest();

Expand Down Expand Up @@ -323,7 +323,7 @@ import { useParams } from 'react-router-dom';
import { AdminTestDetailInfoTab } from './admin-test-detail-info.tab';
import { AdminTestDetailSettingsTab } from './admin-test-detail-settings.tab';

export function AdminTestDetailFeature() {
export default function AdminTestDetailFeature() {
const { testId } = useParams<{ testId: string }>() as { testId: string };
const { item, query } = useAdminFindOneTest({ testId });

Expand Down Expand Up @@ -378,7 +378,7 @@ import {
} from '@pubkey-ui/core';
import { Link } from 'react-router-dom';

export function AdminTestListFeature() {
export default function AdminTestListFeature() {
const { items, pagination, query, setSearch } = useAdminFindManyTest({
limit: 10,
});
Expand Down Expand Up @@ -429,19 +429,18 @@ export function AdminTestListFeature() {
`;

exports[`web-feature generator should run successfully with crud 15`] = `
"import { useRoutes } from 'react-router-dom';
import { AdminTestDetailFeature } from './admin-test-detail.feature';
import { AdminTestCreateFeature } from './admin-test-create.feature';
import { AdminTestListFeature } from './admin-test-list.feature';
"import { lazy } from 'react';
import { useRoutes } from 'react-router-dom';

const Create = lazy(() => import('./admin-test-create.feature'));
const Detail = lazy(() => import('./admin-test-detail.feature'));
const List = lazy(() => import('./admin-test-list.feature'));

export default function AdminTestRoutes() {
return useRoutes([
{ path: '', element: <AdminTestListFeature /> },
{
path: 'create',
element: <AdminTestCreateFeature />,
},
{ path: ':testId/*', element: <AdminTestDetailFeature /> },
{ path: '', element: <List /> },
{ path: 'create', element: <Create /> },
{ path: ':testId/*', element: <Detail /> },
]);
}
"
Expand All @@ -454,7 +453,7 @@ import { UserTestUiCreateForm } from '@proj/web-test-ui';
import { toastError, UiBack, UiCard, UiPage } from '@pubkey-ui/core';
import { useNavigate } from 'react-router-dom';

export function UserTestCreateFeature() {
export default function UserTestCreateFeature() {
const navigate = useNavigate();
const { createTest } = useUserFindManyTest();

Expand Down Expand Up @@ -548,7 +547,7 @@ import { useParams } from 'react-router-dom';
import { UserTestDetailInfoTab } from './user-test-detail-info.tab';
import { UserTestDetailSettingsTab } from './user-test-detail-settings.tab';

export function UserTestDetailFeature() {
export default function UserTestDetailFeature() {
const { testId } = useParams<{ testId: string }>() as { testId: string };
const { item, query } = useUserFindOneTest({ testId });

Expand Down Expand Up @@ -603,7 +602,7 @@ import {
} from '@pubkey-ui/core';
import { Link } from 'react-router-dom';

export function UserTestListFeature() {
export default function UserTestListFeature() {
const { items, pagination, query, setSearch } = useUserFindManyTest({
limit: 12,
});
Expand Down Expand Up @@ -647,19 +646,18 @@ export function UserTestListFeature() {
`;

exports[`web-feature generator should run successfully with crud 21`] = `
"import { useRoutes } from 'react-router-dom';
import { UserTestDetailFeature } from './user-test-detail.feature';
import { UserTestCreateFeature } from './user-test-create.feature';
import { UserTestListFeature } from './user-test-list.feature';
"import { lazy } from 'react';
import { useRoutes } from 'react-router-dom';

const Create = lazy(() => import('./user-test-create.feature'));
const Detail = lazy(() => import('./user-test-detail.feature'));
const List = lazy(() => import('./user-test-list.feature'));

export default function UserTestRoutes() {
return useRoutes([
{ path: '', element: <UserTestListFeature /> },
{
path: 'create',
element: <UserTestCreateFeature />,
},
{ path: ':testId/*', element: <UserTestDetailFeature /> },
{ path: '', element: <List /> },
{ path: 'create', element: <Create /> },
{ path: ':testId/*', element: <Detail /> },
]);
}
"
Expand All @@ -681,32 +679,37 @@ export * from './lib/user-test-ui-update-form';
`;

exports[`web-feature generator should run successfully with crud 23`] = `
"import { Button, Group } from '@mantine/core';
"import { Button, Group, TextInput } from '@mantine/core';
import { useForm } from '@mantine/form';
import { TestAdminCreateInput } from '@proj/sdk';
import { formFieldText, UiForm, UiFormField } from '@pubkey-ui/core';
import { UiStack } from '@pubkey-ui/core';

export function AdminTestUiCreateForm({
submit,
}: {
submit: (res: TestAdminCreateInput) => Promise<boolean>;
}) {
const model: TestAdminCreateInput = {
name: '',
};
const form = useForm<TestAdminCreateInput>({
initialValues: {
name: '',
},
});

const fields: UiFormField<TestAdminCreateInput>[] = [
formFieldText('name', { label: 'name', required: true }),
];
return (
<UiForm
model={model}
fields={fields}
submit={(res) => submit(res as TestAdminCreateInput)}
>
<Group justify="right">
<Button type="submit">Create</Button>
</Group>
</UiForm>
<form onSubmit={form.onSubmit((values) => submit(values))}>
<UiStack>
<TextInput
required
name="name"
label="name"
{...form.getInputProps('name')}
/>

<Group justify="right">
<Button type="submit">Save</Button>
</Group>
</UiStack>
</form>
);
}
"
Expand Down Expand Up @@ -789,9 +792,10 @@ export function AdminTestUiTable({
`;

exports[`web-feature generator should run successfully with crud 25`] = `
"import { Button, Group } from '@mantine/core';
"import { Button, Group, TextInput } from '@mantine/core';
import { useForm } from '@mantine/form';
import { TestAdminUpdateInput, Test } from '@proj/sdk';
import { formFieldText, UiForm, UiFormField } from '@pubkey-ui/core';
import { UiStack } from '@pubkey-ui/core';

export function AdminTestUiUpdateForm({
submit,
Expand All @@ -800,23 +804,22 @@ export function AdminTestUiUpdateForm({
submit: (res: TestAdminUpdateInput) => Promise<boolean>;
test: Test;
}) {
const model: TestAdminUpdateInput = {
name: test.name ?? '',
};
const form = useForm<TestAdminUpdateInput>({
initialValues: {
name: test.name ?? '',
},
});

const fields: UiFormField<TestAdminUpdateInput>[] = [
formFieldText('name', { label: 'name' }),
];
return (
<UiForm
model={model}
fields={fields}
submit={(res) => submit(res as TestAdminUpdateInput)}
>
<Group justify="right">
<Button type="submit">Save</Button>
</Group>
</UiForm>
<form onSubmit={form.onSubmit((values) => submit(values))}>
<UiStack>
<TextInput name="name" label="name" {...form.getInputProps('name')} />

<Group justify="right">
<Button type="submit">Save</Button>
</Group>
</UiStack>
</form>
);
}
"
Expand Down Expand Up @@ -973,32 +976,37 @@ export function TestUiItem({
`;

exports[`web-feature generator should run successfully with crud 31`] = `
"import { Button, Group } from '@mantine/core';
"import { Button, Group, TextInput } from '@mantine/core';
import { useForm } from '@mantine/form';
import { TestUserCreateInput } from '@proj/sdk';
import { formFieldText, UiForm, UiFormField } from '@pubkey-ui/core';
import { UiStack } from '@pubkey-ui/core';

export function UserTestUiCreateForm({
submit,
}: {
submit: (res: TestUserCreateInput) => Promise<boolean>;
}) {
const model: TestUserCreateInput = {
name: '',
};
const form = useForm<TestUserCreateInput>({
initialValues: {
name: '',
},
});

const fields: UiFormField<TestUserCreateInput>[] = [
formFieldText('name', { label: 'name', required: true }),
];
return (
<UiForm
model={model}
fields={fields}
submit={(res) => submit(res as TestUserCreateInput)}
>
<Group justify="right">
<Button type="submit">Create</Button>
</Group>
</UiForm>
<form onSubmit={form.onSubmit((values) => submit(values))}>
<UiStack>
<TextInput
required
name="name"
label="name"
{...form.getInputProps('name')}
/>

<Group justify="right">
<Button type="submit">Save</Button>
</Group>
</UiStack>
</form>
);
}
"
Expand Down Expand Up @@ -1081,9 +1089,10 @@ export function UserTestUiTable({
`;

exports[`web-feature generator should run successfully with crud 33`] = `
"import { Button, Group } from '@mantine/core';
"import { Button, Group, TextInput } from '@mantine/core';
import { useForm } from '@mantine/form';
import { TestUserUpdateInput, Test } from '@proj/sdk';
import { formFieldText, UiForm, UiFormField } from '@pubkey-ui/core';
import { UiStack } from '@pubkey-ui/core';

export function UserTestUiUpdateForm({
submit,
Expand All @@ -1092,23 +1101,22 @@ export function UserTestUiUpdateForm({
submit: (res: TestUserUpdateInput) => Promise<boolean>;
test: Test;
}) {
const model: TestUserUpdateInput = {
name: test.name ?? '',
};
const form = useForm<TestUserUpdateInput>({
initialValues: {
name: test.name ?? '',
},
});

const fields: UiFormField<TestUserUpdateInput>[] = [
formFieldText('name', { label: 'name' }),
];
return (
<UiForm
model={model}
fields={fields}
submit={(res) => submit(res as TestUserUpdateInput)}
>
<Group justify="right">
<Button type="submit">Save</Button>
</Group>
</UiForm>
<form onSubmit={form.onSubmit((values) => submit(values))}>
<UiStack>
<TextInput name="name" label="name" {...form.getInputProps('name')} />

<Group justify="right">
<Button type="submit">Save</Button>
</Group>
</UiStack>
</form>
);
}
"
Expand Down
2 changes: 1 addition & 1 deletion ...eb-crud/files/feature/lib/__actorFileName__-__modelFileName__-create.feature.tsx.template
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { toastError, UiBack, UiCard<% if(ownerId && actor.className === 'Admin')
import { useNavigate } from 'react-router-dom'
<% if(ownerId && actor.className === 'Admin'){ %>import { Group, Text } from '@mantine/core'<% } %>

export function <%= actor.className %><%= model.className %>CreateFeature(<% if(ownerId && actor.className === 'Admin'){ %>{ <%= ownerId %> }: { <%= ownerId %>: string } <% } %>) {
export default function <%= actor.className %><%= model.className %>CreateFeature(<% if(ownerId && actor.className === 'Admin'){ %>{ <%= ownerId %> }: { <%= ownerId %>: string } <% } %>) {
const navigate = useNavigate()
const { create<%= model.className %> } = use<%= actor.className %>FindMany<%= model.className %>(<% if(ownerId && actor.className === 'Admin'){ %>{ <%= ownerId %> }<% } %>)

Expand Down
2 changes: 1 addition & 1 deletion ...eb-crud/files/feature/lib/__actorFileName__-__modelFileName__-detail.feature.tsx.template
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useParams } from 'react-router-dom'
import { <%= actor.className %><%= model.className %>DetailInfoTab } from './<%= actor.propertyName %>-<%= model.fileName %>-detail-info.tab'
import { <%= actor.className %><%= model.className %>DetailSettingsTab } from './<%= actor.propertyName %>-<%= model.fileName %>-detail-settings.tab'

export function <%= actor.className %><%= model.className %>DetailFeature() {
export default function <%= actor.className %><%= model.className %>DetailFeature() {
const { <%= model.propertyName %>Id } = useParams<{ <%= model.propertyName %>Id: string }>() as { <%= model.propertyName %>Id: string }
const { item, query } = use<%= actor.className %>FindOne<%= model.className %>({ <%= model.propertyName %>Id })

Expand Down
2 changes: 1 addition & 1 deletion .../web-crud/files/feature/lib/__actorFileName__-__modelFileName__-list.feature.tsx.template
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { <% if(actorAdmin){ %><%= actor.className %><%= model.className %>UiTabl
import { UiBack, UiDebugModal, UiInfo, UiLoader, <% if(ownerId && actor.className === 'Admin'){ %>UiStack<% } else { %>UiPage<% } %> } from '@pubkey-ui/core'
import { Link } from 'react-router-dom'

export function <%= actor.className %><%= model.className %>ListFeature(<% if(ownerId && actor.className === 'Admin'){ %>{ <%= ownerId %> }: { <%= ownerId %>: string } <% } %>) {
export default function <%= actor.className %><%= model.className %>ListFeature(<% if(ownerId && actor.className === 'Admin'){ %>{ <%= ownerId %> }: { <%= ownerId %>: string } <% } %>) {
const { <% if(ownerId && actor.className === 'Admin'){ %>delete<%= model.className %>, <% } %> items, pagination, query, setSearch } = use<%= actor.className %>FindMany<%= model.className %>({
limit: <% if(actorAdmin){ %>10<% } else { %>12<% } %>,
<% if(ownerId && actor.className === 'Admin'){ %><%= ownerId %>,<% } %>
Expand Down
17 changes: 8 additions & 9 deletions ...rc/lib/web-crud/files/feature/lib/__actorFileName__-__modelFileName__.routes.tsx.template
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import { lazy } from 'react'
import { useRoutes } from 'react-router-dom'
import { <%= actor.className %><%= model.className %>DetailFeature } from './<%= actor.propertyName %>-<%= model.fileName %>-detail.feature'
import { <%= actor.className %><%= model.className %>CreateFeature } from './<%= actor.propertyName %>-<%= model.fileName %>-create.feature'
import { <%= actor.className %><%= model.className %>ListFeature } from './<%= actor.propertyName %>-<%= model.fileName %>-list.feature'

const Create = lazy(() => import('./<%= actor.fileName %>-<%= model.fileName %>-create.feature'))
const Detail = lazy(() => import('./<%= actor.fileName %>-<%= model.fileName %>-detail.feature'))
const List = lazy(() => import('./<%= actor.fileName %>-<%= model.fileName %>-list.feature'))

export default function <%= actor.className %><%= model.className %>Routes(<% if(ownerId && actor.className === 'Admin'){ %>{ <%= ownerId %> }: { <%= ownerId %>: string } <% } %>) {
return useRoutes([
{ path: '', element: <<%= actor.className %><%= model.className %>ListFeature <% if(ownerId && actor.className === 'Admin'){ %><%= ownerId %>={<%= ownerId %>}<% } %> /> },
{
path: 'create',
element: <<%= actor.className %><%= model.className %>CreateFeature <% if(ownerId && actor.className === 'Admin'){ %><%= ownerId %>={<%= ownerId %>}<% } %> />,
},
{ path: ':<%= model.propertyName %>Id/*', element: <<%= actor.className %><%= model.className %>DetailFeature /> },
{ path: '', element: <List <% if(ownerId && actor.className === 'Admin'){ %><%= ownerId %>={<%= ownerId %>}<% } %> /> },
{ path: 'create', element: <Create <% if(ownerId && actor.className === 'Admin'){ %><%= ownerId %>={<%= ownerId %>}<% } %> /> },
{ path: ':<%= model.propertyName %>Id/*', element: <Detail /> },
])
}
Loading

0 comments on commit f54a6b3

Please sign in to comment.