umwd-components 0.1.710 → 0.1.712

package/.ai/form-patterns.md

@@ -1,198 +0,0 @@
-# Form Patterns
-
-## Snackbar Usage in Forms
-
-### Setup
-
-1. Import the Snackbar context:
-
-```typescript
-import { useSnackbar } from "../../../context/common/SnackbarContext";
-```
-
-2. Initialize form state with severity:
-
-```typescript
-const INITIAL_STATE = {
-  zodErrors: null,
-  strapiErrors: null,
-  data: null,
-  message: null,
-  severity: null,
-};
-```
-
-3. Get the handleAddMessage function from useSnackbar:
-
-```typescript
-const { handleAddMessage } = useSnackbar();
-```
-
-### Implementation Pattern
-
-1. Message Handling:
-
-```typescript
-useEffect(() => {
-  if (formState?.message) {
-    handleAddMessage({
-      message: formState.message,
-      severity: formState.severity || "error",
-    });
-
-    if (formState.severity === "success") {
-      revalidateCallback && revalidateCallback();
-      handleClose && handleClose();
-    }
-  }
-}, [formState?.message]);
-```
-
-2. Error Handling:
-
-```typescript
-useEffect(() => {
-  if (formState?.strapiErrors) {
-    handleAddMessage({
-      message: formState.strapiErrors.message || "Error performing action",
-      severity: formState.severity || "error",
-    });
-  }
-}, [formState?.strapiErrors]);
-```
-
-### Props Interface
-
-Forms using this pattern should extend their props interface with:
-
-```typescript
-& {
-  sx?: SxProps;
-  revalidateCallback?: () => void;
-  handleClose?: () => void;
-}
-```
-
-### Box Component Styling
-
-When using this pattern, wrap your form in a Box component with consistent
-styling:
-
-```typescript
-<Box sx={[...(Array.isArray(sx) ? sx : [sx])]}>
-```
-
-### Key Features
-
-1. **Severity Fallback**: Always provides a fallback to "error" if severity is
-   not specified
-2. **Success Handling**: On success (severity === "success"):
-   - Triggers revalidation if revalidateCallback is provided
-   - Closes form if handleClose is provided
-3. **Error Messages**: Provides fallback error messages for strapiErrors
-4. **Consistent Styling**: Uses consistent Box wrapper with padding and sx prop
-   spreading
-
-### Form Layout Pattern
-
-1. **Title Section**:
-
-```typescript
-<Grid item xs={12}>
-  <Stack spacing={2}>
-    <Typography variant="h3" component={"h1"}>
-      Form Title Here
-    </Typography>
-  </Stack>
-</Grid>
-```
-
-2. **Action Buttons**:
-
-- Place at bottom of form
-- Cancel button is optional (only shown if handleClose provided)
-- Use consistent button layout with space-between
-
-```typescript
-<Grid item xs={12}>
-  <Stack direction={"row"} justifyContent={"space-between"}>
-    {handleClose && (
-      <Button onClick={handleClose} variant="outlined">
-        Cancel
-      </Button>
-    )}
-    <SubmitButton text="Submit" loadingText="Loading..." variant="contained" />
-  </Stack>
-</Grid>
-```
-
-3. **Messages and Alerts**:
-
-- Use Snackbar for all notifications instead of inline Alerts
-- Remove StrapiErrors component as errors are shown in Snackbar
-- Success messages automatically close the form and revalidate data
-
-### Form Action Setup
-
-1. Action Binding Pattern:
-
-```typescript
-// For actions that require an ID or other parameters
-const boundAction = actionFunction.bind(null, entityId);
-const [formState, formAction] = useFormState(boundAction, INITIAL_STATE);
-
-// Example with type:
-const updateEntityWithIdAction = updateEntityAction.bind(null, entity.id);
-const [formState, formAction] = useFormState(updateEntityWithIdAction, INITIAL_STATE);
-```
-
-This pattern ensures:
-
-- Clean separation of entity ID from form data
-- Consistent action parameter order
-- Type safety for bound parameters
-- Clear distinction between entity parameters and form data
-
-### Example Usage
-
-```typescript
-export default function ExampleForm({
-  sx,
-  revalidateCallback,
-  handleClose,
-  ...props
-}: ExampleFormProps & { sx?: SxProps }) {
-  const [formState, formAction] = useFormState(exampleAction, INITIAL_STATE);
-  const { handleAddMessage } = useSnackbar();
-
-  // Message handling effect
-  useEffect(() => {
-    if (formState?.message) {
-      handleAddMessage({
-        message: formState.message,
-        severity: formState.severity || "error",
-      });
-
-      if (formState.severity === "success") {
-        revalidateCallback && revalidateCallback();
-        handleClose && handleClose();
-      }
-    }
-  }, [formState?.message]);
-
-  // Error handling effect
-  useEffect(() => {
-    if (formState?.strapiErrors) {
-      handleAddMessage({
-        message: formState.strapiErrors.message || "Error in form submission",
-        severity: formState.severity || "error",
-      });
-    }
-  }, [formState?.strapiErrors]);
-  return (
-    <Box sx={[...(Array.isArray(sx) ? sx : [sx])]}>
-      <form action={formAction}>{/* Form content */}</form>
-    </Box>
-  );
-}
-```

package/.ai/instructions/form-patterns.instructions.md

@@ -1,150 +0,0 @@
----
-applyTo: "/**/*Form.tsx"
----
-
-# Form Implementation Instructions
-
-## Basic Form Setup
-
-1. Add required imports:
-
-```typescript
-import { useSnackbar } from "../../../context/common/SnackbarContext";
-import { useFormState } from "react-dom";
-import { SxProps } from "@mui/material/styles";
-```
-
-2. Include standard props interface:
-
-```typescript
-interface FormProps {
-  sx?: SxProps;
-  revalidateCallback?: () => void;
-  handleClose?: () => void;
-}
-```
-
-3. Initialize form state:
-
-```typescript
-const INITIAL_STATE = {
-  zodErrors: null,
-  strapiErrors: null,
-  data: null,
-  message: null,
-  severity: null,
-};
-```
-
-4. Setup form action binding:
-
-```typescript
-// For forms that operate on an entity
-const boundAction = actionFunction.bind(null, entity.id);
-const [formState, formAction] = useFormState(boundAction, INITIAL_STATE);
-```
-
-Note: Always bind entity IDs and other fixed parameters to the action, rather than including them in the form data.
-
-## Required Form Structure
-
-1. **Base Structure**:
-
-```typescript
-<Box sx={[...(Array.isArray(sx) ? sx : [sx])]}>
-  <form action={formAction}>
-    <Grid container spacing={2}>
-      {/* Form content */}
-    </Grid>
-  </form>
-</Box>
-```
-
-2. **Title Section**:
-
-```typescript
-<Grid item xs={12}>
-  <Stack spacing={2}>
-    <Typography variant="h3" component={"h1"}>
-      Form Title Here
-    </Typography>
-    <Typography variant="body2">Optional description text</Typography>
-  </Stack>
-</Grid>
-```
-
-3. **Action Buttons**:
-
-```typescript
-<Grid item xs={12}>
-  <Stack direction={"row"} justifyContent={"space-between"}>
-    {handleClose && (
-      <Button onClick={handleClose} variant="outlined">
-        Cancel
-      </Button>
-    )}
-    <SubmitButton text="Submit" loadingText="Loading..." variant="contained" />
-  </Stack>
-</Grid>
-```
-
-## Message Handling Implementation
-
-1. Add snackbar message handling:
-
-```typescript
-const { handleAddMessage } = useSnackbar();
-
-useEffect(() => {
-  if (formState?.message) {
-    handleAddMessage({
-      message: formState.message,
-      severity: formState.severity || "error",
-    });
-
-    if (formState.severity === "success") {
-      revalidateCallback && revalidateCallback();
-      handleClose && handleClose();
-    }
-  }
-}, [formState?.message]);
-```
-
-2. Add error handling:
-
-```typescript
-useEffect(() => {
-  if (formState?.strapiErrors) {
-    handleAddMessage({
-      message: formState.strapiErrors.message || "Error performing action",
-      severity: formState.severity || "error",
-    });
-  }
-}, [formState?.strapiErrors]);
-```
-
-## Best Practices
-
-1. **Form Layout**:
-
-- Use Grid system with `spacing={2}`
-- Group related fields in Stack components
-- Use consistent spacing throughout the form
-
-2. **Error Handling**:
-
-- Always provide fallback error messages
-- Use Snackbar for notifications instead of inline alerts
-- Handle both form validation and API errors
-
-3. **Success Handling**:
-
-- Close form on success if handleClose is provided
-- Trigger revalidation if revalidateCallback is provided
-- Show success message through Snackbar
-
-4. **Accessibility**:
-
-- Use semantic HTML elements
-- Include proper ARIA labels
-- Maintain heading hierarchy with h1 for form title

package/.ai/prompts/form-patterns.prompt.md

@@ -1,171 +0,0 @@
----
-mode: "agent"
-tools: []
----
-
-# Form Pattern AI Assistant Guide
-
-## Form Creation and Modification
-
-When assisting with form creation or modification, ensure the following patterns
-are followed:
-
-### Structure Validation
-
-1. **Base Component Structure**
-
-- Verify form is wrapped in a Box component with proper sx prop handling
-- Check Grid container with spacing={2} is used
-- Ensure form sections follow standard layout pattern
-
-2. **Required Sections**
-
-- Title section with h3/h1 Typography
-- Properly grouped form fields
-- Action buttons section at bottom
-
-### Implementation Checks
-
-1. **State Management**
-
-- Verify INITIAL_STATE includes all required fields
-- Check useFormState implementation
-- Validate form action setup
-- Ensure entity IDs are bound to action using bind pattern
-
-2. **Message Handling**
-
-- Confirm Snackbar context is properly imported and used
-- Verify message handling useEffect is implemented
-- Check error handling useEffect is present
-
-3. **Props Interface**
-
-- Ensure required props (sx, revalidateCallback, handleClose) are included
-- Verify props are properly typed
-- Check optional props are marked as such
-
-### Common Fixes
-
-When updating forms to match the pattern:
-
-1. **Structure Fixes**
-
-```typescript
-// Convert from
-<div>
-  <form>...</form>
-</div>
-
-// To
-<Box sx={[...(Array.isArray(sx) ? sx : [sx])]}>
-  <form action={formAction}>
-    <Grid container spacing={2}>
-      ...
-    </Grid>
-  </form>
-</Box>
-```
-
-2. **Message Handling Fixes**
-
-```typescript
-// Remove inline alerts
-<Alert severity="error">{error}</Alert>;
-
-// Use Snackbar context instead
-handleAddMessage({
-  message: error,
-  severity: "error",
-});
-```
-
-3. **Button Layout Fixes**
-
-```typescript
-// Convert from
-<div>
-  <Button>Cancel</Button>
-  <Button>Submit</Button>
-</div>
-
-// To
-<Stack direction={"row"} justifyContent={"space-between"}>
-  {handleClose && (
-    <Button onClick={handleClose} variant="outlined">
-      Cancel
-    </Button>
-  )}
-  <SubmitButton text="Submit" loadingText="Loading..." variant="contained" />
-</Stack>
-```
-
-4. **Action Binding Fixes**
-
-```typescript
-// Convert from
-const [formState, formAction] = useFormState(
-  (prevState, formData) => updateAction(id, prevState, formData),
-  INITIAL_STATE
-);
-
-// To
-const boundAction = updateAction.bind(null, id);
-const [formState, formAction] = useFormState(boundAction, INITIAL_STATE);
-```
-
-### Response Guidelines
-
-When helping users with forms:
-
-1. **Analysis Phase**
-
-- Review current form implementation
-- Identify missing pattern elements
-- List required changes
-
-2. **Implementation Phase**
-
-- Make changes in logical groups (structure, handlers, props)
-- Maintain existing form functionality
-- Preserve custom business logic
-
-3. **Validation Phase**
-
-- Verify pattern compliance
-- Check for proper error handling
-- Ensure success scenarios are handled
-
-4. **Documentation**
-
-- Explain changes made
-- Highlight any pattern deviations (if necessary)
-- Provide reasoning for modifications
-
-## Form Best Practices Enforcement
-
-When reviewing or modifying forms, enforce these best practices:
-
-1. **Consistent Error Handling**
-
-- Use Snackbar for all notifications
-- Provide fallback error messages
-- Handle both validation and API errors
-
-2. **Proper Success Handling**
-
-- Close form on success when appropriate
-- Trigger data revalidation when needed
-- Show success notifications
-
-3. **Accessibility**
-
-- Maintain proper heading hierarchy
-- Use semantic HTML elements
-- Include necessary ARIA labels
-
-4. **Code Organization**
-
-- Group related form fields
-- Maintain consistent spacing
-- Use appropriate MUI components

package/.ai/prompts/update-form-and-actions.prompt.md

@@ -1,20 +0,0 @@
----
-mode: "agent"
-tools: []
----
-
-# Apply form patterns and actions to update forms in the codebase.
-
-Take the documentation from [form-patterns.md](../form-patterns.md) and read it
-carefully. make sure the Form component matches the patterns described there.
-
-Then within this Form component find the actions it uses and make sure these are
-updated according to the documentation in
-[action-patterns.md](../action-patterns.md)
-
-- Respect comments by previous devs (me) and do not remove them unless they are
-  no longer relevant.
-
-- Do not change the currently used texts, often they are by the client, you
-  might however leave suggestions for improvement in comments, these are
-  appriciated.

package/.vscode/settings.json

@@ -1,7 +0,0 @@
-{
-  "workbench.colorCustomizations": {
-    "activityBar.background": "#0000ff",
-    "titleBar.activeBackground": "#ff0000",
-    "titleBar.activeForeground": "#ffcc00"
-  }
-}