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 committed Mar 16, 2024
1 parent c969fab commit b5a59a7
Show file tree
Hide file tree
Showing 15 changed files with 439 additions and 356 deletions.

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -681,32 +681,36 @@ 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';

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 +793,9 @@ 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';

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,36 @@ 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';

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 +1088,9 @@ 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';

export function UserTestUiUpdateForm({
submit,
Expand All @@ -1092,23 +1099,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
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
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
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
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 /> },
])
}
Original file line number Diff line number Diff line change
@@ -1,27 +1,30 @@
import { Button, Group } from '@mantine/core'
import { Button, Group, TextInput } from '@mantine/core'
import { useForm } from '@mantine/form'
import { <%= model.className %><%= actor.className %>CreateInput } from '@<%= npmScope %>/sdk'
import { formFieldText, UiForm, UiFormField } from '@pubkey-ui/core'
import { UiStack } from '@pubkey-ui/core'

export function <%= actor.className %><%= model.className %>UiCreateForm({ submit }: { submit: (res: <%= model.className %><%= actor.className %>CreateInput) => Promise<boolean> }) {
const model: <%= model.className %><%= actor.className %>CreateInput = {
<% for (let field of fields){ %>
<%= field.name %>: '',
<% } %>
<% if(ownerId && actor.className === 'Admin'){ %>
<%= ownerId %>: '',
<% } %>
}
const form = useForm<<%= model.className %><%= actor.className %>CreateInput>({
initialValues: {
<% for (let field of fields){ %>
<%= field.name %>: '',
<% } %>
<% if(ownerId && actor.className === 'Admin'){ %>
<%= ownerId %>: '',
<% } %>
},
})

const fields: UiFormField<<%= model.className %><%= actor.className %>CreateInput>[] = [
<% for (let field of fields){ %>
formFieldText('<%= field.name %>', { label: '<%= field.name %>', required: true, }),
<% } %>
]
return (
<UiForm model={model} fields={fields} submit={(res) => submit(res as <%= model.className %><%= actor.className %>CreateInput)}>
<Group justify="right">
<Button type="submit">Create</Button>
</Group>
</UiForm>
<form onSubmit={form.onSubmit((values) => submit(values))}>
<UiStack>
<% for (let field of fields){ %>
<TextInput required name="<%= field.name %>" label="<%= field.name %>" {...form.getInputProps('<%= field.name %>')} />
<% } %>
<Group justify="right">
<Button type="submit">Save</Button>
</Group>
</UiStack>
</form>
)
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Button, Group } from '@mantine/core'
import { Button, Group, TextInput } from '@mantine/core'
import { useForm } from '@mantine/form'
import { <%= model.className %><%= actor.className %>UpdateInput, <%= model.className %> } from '@<%= npmScope %>/sdk'
import { formFieldText, UiForm, UiFormField } from '@pubkey-ui/core'
import { UiStack } from '@pubkey-ui/core'

export function <%= actor.className %><%= model.className %>UiUpdateForm({
submit,
Expand All @@ -9,22 +10,24 @@ export function <%= actor.className %><%= model.className %>UiUpdateForm({
submit: (res: <%= model.className %><%= actor.className %>UpdateInput) => Promise<boolean>
<%= model.propertyName %>: <%= model.className %>
}) {
const model: <%= model.className %><%= actor.className %>UpdateInput = {
<% for (let field of fields){ %>
<%= field.name %>: <%= model.propertyName %>.<%= field.name %> ?? '',
<% } %>
}
const form = useForm<<%= model.className %><%= actor.className %>UpdateInput>({
initialValues: {
<% for (let field of fields){ %>
<%= field.name %>: <%= model.propertyName %>.<%= field.name %> ?? '',
<% } %>
},
})

const fields: UiFormField<<%= model.className %><%= actor.className %>UpdateInput>[] = [
<% for (let field of fields){ %>
formFieldText('<%= field.name %>', { label: '<%= field.name %>', }),
<% } %>
]
return (
<UiForm model={model} fields={fields} submit={(res) => submit(res as <%= model.className %><%= actor.className %>UpdateInput)}>
<Group justify="right">
<Button type="submit">Save</Button>
</Group>
</UiForm>
<form onSubmit={form.onSubmit((values) => submit(values))}>
<UiStack>
<% for (let field of fields){ %>
<TextInput name="<%= field.name %>" label="<%= field.name %>" {...form.getInputProps('<%= field.name %>')} />
<% } %>
<Group justify="right">
<Button type="submit">Save</Button>
</Group>
</UiStack>
</form>
)
}
Loading

0 comments on commit b5a59a7

Please sign in to comment.