Renamed Joy and Material UI components + cleanup stories (#13)

* Cleanup Joy stories

* Rename Joy form components

* Rename Material UI components

* Eslint

* Rush change

common/changes/@ilbrando/simple-form-joy/cleanup-stories_2024-06-22-13-56.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@ilbrando/simple-form-joy",
+      "comment": "Renamed form components",
+      "type": "major"
+    }
+  ],
+  "packageName": "@ilbrando/simple-form-joy"
+}

common/changes/@ilbrando/simple-form-material-ui/cleanup-stories_2024-06-22-13-56.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@ilbrando/simple-form-material-ui",
+      "comment": "Renamed form components",
+      "type": "major"
+    }
+  ],
+  "packageName": "@ilbrando/simple-form-material-ui"
+}

common/changes/@ilbrando/simple-form/cleanup-stories_2024-06-22-13-56.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@ilbrando/simple-form",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@ilbrando/simple-form"
+}

examples/joy/src/persons-example/person-dialog.tsx

@@ -1,5 +1,5 @@
 import { getFormManager, useFormDefinition } from "@ilbrando/simple-form";
-import { FormNumberField, FormRangeSliderField, FormTextField } from "@ilbrando/simple-form-joy";
+import { FormNumber, FormRangeSlider, FormText } from "@ilbrando/simple-form-joy";
 import { ensureValue, hasValue, singleOrUndefined } from "@ilbrando/utils";
 import { Alert, DialogContent, DialogTitle, Modal, ModalDialog, Stack } from "@mui/joy";
 
@@ -111,14 +111,14 @@ export const PersonDialog = (props: PersonDialogProps) => {
             <Alert color="warning">Age = 99 is valid but will simulate an error from the backend.</Alert>
             <GroupBox>
               <Stack alignItems="flex-start">
-                {isAddingPerson && <FormTextField formManager={fm} fieldName="id" label="ID" />}
-                <FormTextField formManager={fm} fieldName="name" label="Name" fullWidth />
-                <FormNumberField formManager={fm} fieldName="age" label="Age" />
-                <FormTextField formManager={fm} fieldName="jobTitle" label="Job title" fullWidth />
+                {isAddingPerson && <FormText formManager={fm} fieldName="id" label="ID" />}
+                <FormText formManager={fm} fieldName="name" label="Name" fullWidth />
+                <FormNumber formManager={fm} fieldName="age" label="Age" />
+                <FormText formManager={fm} fieldName="jobTitle" label="Job title" fullWidth />
               </Stack>
             </GroupBox>
             <GroupBox title="Working hours">
-              <FormRangeSliderField formManager={fm} fieldName="workingHours" min={3} max={23} marks={[...Array(23 - 3 + 1).keys()].map(x => ({ value: x + 3, label: (x + 3).toString() }))} />
+              <FormRangeSlider formManager={fm} fieldName="workingHours" min={3} max={23} marks={[...Array(23 - 3 + 1).keys()].map(x => ({ value: x + 3, label: (x + 3).toString() }))} />
             </GroupBox>
           </Stack>
         </DialogContent>

examples/storybook/src/stories/joy/form-fields.stories.tsx

@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useFormDefinition, getFormManager, useValidationRules } from "@ilbrando/simple-form";
+import {
+  AutocompleteOption,
+  FormAutocomplete,
+  FormAutocompleteMultiple,
+  FormCheckbox,
+  FormNumber,
+  FormRadioGroup,
+  FormRangeSlider,
+  FormRangeSliderValue,
+  FormSwitch,
+  FormText,
+  RadioGroupOption
+} from "@ilbrando/simple-form-joy";
+import { Box, Button, ThemeProvider, extendTheme } from "@mui/joy";
+
+type FormFields = {
+  textField: string;
+  numberField: number;
+  autocompleteField: string;
+  autocompleteMultipleField: string[];
+  radiogroupField: string;
+  rangeField: FormRangeSliderValue;
+  switchField: boolean;
+  checkboxField: boolean;
+};
+
+const optionValues = new Array(10).fill(0).map((_, index) => ({
+  value: index.toString(),
+  label: `Option number ${index}`
+}));
+
+const autocompleteOptions: AutocompleteOption<string>[] = optionValues;
+
+const radioGroupOptions: RadioGroupOption<string>[] = optionValues;
+
+type FormStoryProps = {
+  isDisabled: boolean;
+  isRequired: boolean;
+  size: "sm" | "md" | "lg";
+  reserveSpaceForValidationMessage: boolean;
+};
+
+const FormStory = (props: FormStoryProps) => {
+  const { isDisabled, isRequired, size, reserveSpaceForValidationMessage } = props;
+
+  const { required, minCount, equal } = useValidationRules();
+
+  const fd = useFormDefinition<FormFields>({
+    fields: {
+      textField: {
+        validators: isRequired ? [required()] : [],
+        initialIsDisabled: isDisabled
+      },
+      numberField: {
+        validators: isRequired ? [required()] : [],
+        initialIsDisabled: isDisabled
+      },
+      autocompleteField: {
+        validators: isRequired ? [required()] : [],
+        initialIsDisabled: isDisabled
+      },
+      autocompleteMultipleField: {
+        validators: isRequired ? [required(), minCount(1)] : [],
+        initialIsDisabled: isDisabled
+      },
+      radiogroupField: {
+        validators: isRequired ? [required()] : [],
+        initialIsDisabled: isDisabled
+      },
+      rangeField: {
+        validators: isRequired ? [required()] : [],
+        initialIsDisabled: isDisabled
+      },
+      switchField: {
+        validators: isRequired ? [required(), equal(true)] : [],
+        initialIsDisabled: isDisabled
+      },
+      checkboxField: {
+        validators: isRequired ? [required("You must check this box."), equal(true, "You must check this box.")] : [],
+        initialIsDisabled: isDisabled
+      }
+    },
+    reCreateDependencies: [isDisabled, isRequired]
+  });
+
+  const fm = getFormManager(fd, false);
+
+  const handleSubmit = () => {
+    if (fm.validateForm()) {
+      // perform submit action
+    }
+  };
+
+  const theme = extendTheme({
+    simpleForm: {
+      reserveSpaceForValidationMessage
+    },
+    // If you think form component take up too much space then reserveSpaceForValidationMessage you can decrease
+    // the margin between the helper text (error message) and the input.
+    components: reserveSpaceForValidationMessage
+      ? {
+          JoyFormHelperText: {
+            styleOverrides: {
+              root: {
+                marginTop: "2px"
+              }
+            }
+          }
+        }
+      : undefined
+  });
+  return (
+    <ThemeProvider theme={theme}>
+      <Box display="grid" gridTemplateColumns="400px auto" gap={2}>
+        <Box gridColumn="1" display="flex" flexDirection="column" gap={reserveSpaceForValidationMessage ? 0 : 1}>
+          <FormText formManager={fm} fieldName="textField" label="Text Field" disabled={isDisabled} size={size} />
+          <FormNumber formManager={fm} fieldName="numberField" label="Number Field" disabled={isDisabled} size={size} />
+          <FormAutocomplete formManager={fm} fieldName="autocompleteField" label="Autocomplete Field" options={autocompleteOptions} disabled={isDisabled} size={size} />
+          <FormAutocompleteMultiple formManager={fm} fieldName="autocompleteMultipleField" label="Autocomplete Field (multiple)" options={autocompleteOptions} disabled={isDisabled} size={size} />
+          <FormRadioGroup formManager={fm} fieldName="radiogroupField" label="Radiogroup Field" options={radioGroupOptions} disabled={isDisabled} size={size} />
+          <FormRangeSlider formManager={fm} fieldName="rangeField" label="Range Slider" min={1} max={10} />
+          <FormSwitch formManager={fm} fieldName="switchField" label="Switch Field" disabled={isDisabled} size={size} />
+          <FormCheckbox formManager={fm} fieldName="checkboxField" label="Checkbox Field" disabled={isDisabled} size={size} />
+        </Box>
+        <Box gridColumn="2">
+          <Button onClick={handleSubmit} size={size}>
+            SUBMIT
+          </Button>
+        </Box>
+      </Box>
+    </ThemeProvider>
+  );
+};
+
+const meta = {
+  title: "Joy/Form Fields",
+  component: FormStory,
+  argTypes: {
+    size: {
+      control: "inline-radio",
+      options: ["sm", "md", "lg"]
+    }
+  },
+  args: {
+    isDisabled: false,
+    isRequired: false,
+    size: "md",
+    reserveSpaceForValidationMessage: false
+  }
+} satisfies Meta<typeof FormStory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FormFields: Story = {};