performa 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -140,7 +140,7 @@ export default function LoginRoute() {
|
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
// Action handler
|
|
143
|
-
import { validateForm } from '
|
|
143
|
+
import { validateForm } from 'performa/server';
|
|
144
144
|
|
|
145
145
|
export async function action({ request }: ActionFunctionArgs) {
|
|
146
146
|
const result = await validateForm(request, loginForm);
|
|
@@ -159,7 +159,7 @@ export async function action({ request }: ActionFunctionArgs) {
|
|
|
159
159
|
```typescript
|
|
160
160
|
import { TanStackStartForm } from 'performa/tanstack-start';
|
|
161
161
|
import { createServerFn } from '@tanstack/start';
|
|
162
|
-
import { validateForm } from '
|
|
162
|
+
import { validateForm } from 'performa/server';
|
|
163
163
|
|
|
164
164
|
const submitLogin = createServerFn({ method: 'POST' }).handler(
|
|
165
165
|
async ({ data }: { data: FormData }) => {
|
|
@@ -185,7 +185,7 @@ export default function LoginPage() {
|
|
|
185
185
|
|
|
186
186
|
### Field Types
|
|
187
187
|
|
|
188
|
-
|
|
188
|
+
performa supports the following field types:
|
|
189
189
|
|
|
190
190
|
#### Text Inputs
|
|
191
191
|
- `text` - Standard text input
|
|
@@ -284,7 +284,7 @@ All validation rules are applied server-side for security:
|
|
|
284
284
|
The `validateForm` function performs server-side validation and returns typed results:
|
|
285
285
|
|
|
286
286
|
```typescript
|
|
287
|
-
import { validateForm } from '
|
|
287
|
+
import { validateForm } from 'performa/server';
|
|
288
288
|
|
|
289
289
|
const result = await validateForm(request, formConfig);
|
|
290
290
|
|
|
@@ -394,7 +394,7 @@ export async function submitForm(prevState: any, formData: FormData) {
|
|
|
394
394
|
|
|
395
395
|
### Default Theme
|
|
396
396
|
|
|
397
|
-
|
|
397
|
+
performa comes with a default theme optimized for Tailwind CSS with dark mode support:
|
|
398
398
|
|
|
399
399
|
```typescript
|
|
400
400
|
import { FormThemeProvider } from 'performa';
|
|
@@ -413,7 +413,7 @@ function App() {
|
|
|
413
413
|
Override the default theme with your own styles:
|
|
414
414
|
|
|
415
415
|
```typescript
|
|
416
|
-
import { FormThemeProvider } from '
|
|
416
|
+
import { FormThemeProvider } from 'performa';
|
|
417
417
|
|
|
418
418
|
const customTheme = {
|
|
419
419
|
formGroup: 'mb-6',
|
|
@@ -524,7 +524,7 @@ The complete theme object structure:
|
|
|
524
524
|
Customize form labels and messages:
|
|
525
525
|
|
|
526
526
|
```typescript
|
|
527
|
-
import { FormThemeProvider } from '
|
|
527
|
+
import { FormThemeProvider } from 'performa';
|
|
528
528
|
|
|
529
529
|
const customLabels = {
|
|
530
530
|
fileUpload: {
|
|
@@ -722,7 +722,7 @@ function DynamicForm() {
|
|
|
722
722
|
|
|
723
723
|
## TypeScript
|
|
724
724
|
|
|
725
|
-
|
|
725
|
+
performa is built with TypeScript and provides full type safety:
|
|
726
726
|
|
|
727
727
|
```typescript
|
|
728
728
|
import { FormConfig } from 'performa';
|
|
@@ -819,7 +819,7 @@ All components are memoized with `React.memo` for optimal performance. The libra
|
|
|
819
819
|
|
|
820
820
|
## Accessibility
|
|
821
821
|
|
|
822
|
-
|
|
822
|
+
performa is built with accessibility in mind:
|
|
823
823
|
|
|
824
824
|
- Proper ARIA attributes on all form elements
|
|
825
825
|
- Keyboard navigation support
|