wcz-layout 6.7.2 → 8.3.2

package/src/components/Layout.tsx

@@ -1,183 +0,0 @@
-import { Menu } from "@mui/icons-material";
-import { Box, Chip, CssBaseline, IconButton, LinearProgress, AppBar as MuiAppBar, AppBarProps as MuiAppBarProps, Theme, Toolbar, Typography, useMediaQuery } from "@mui/material";
-import { grey } from "@mui/material/colors";
-import { csCZ, enUS } from "@mui/material/locale";
-import { ThemeProvider, createTheme, styled } from "@mui/material/styles";
-import { csCZ as dataGridCsCz, enUS as dataGridEnUs } from "@mui/x-data-grid-premium/locales";
-import { csCZ as datePickersCsCz, enUS as datePickersEnUs } from "@mui/x-date-pickers-pro/locales";
-import { useIsFetching, useIsMutating } from "@tanstack/react-query";
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { matchPath, useLocation } from "react-router-dom";
-import { LayoutPaletteColorOptions } from "../models/LayoutPaletteColorOptions";
-import { LayoutRoute } from "../models/LayoutRoute";
-import Notification from "../models/Notification";
-import { User } from "../models/User";
-import { environment } from "../utils/Helpers";
-import { AccountMenu } from "./layout/AccountMenu";
-import { DevelopmentBanner } from "./layout/DevelopmentBanner";
-import { NavigationDrawer } from "./layout/NavigationDrawer";
-import { NotificationMenu } from "./layout/NotificationMenu";
-import { Unauthorized } from "./layout/Unauthorized";
-import useLocalStorageState from "use-local-storage-state";
-import { useIsAuthenticated, useMsal } from "@azure/msal-react";
-import { InteractionStatus } from "@azure/msal-browser";
-
-//Drawer
-const drawerWidth = 240;
-const DrawerHeader = styled("div")(({ theme }) => ({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    padding: theme.spacing(0, 1),
-    // necessary for content to be below app bar
-    ...theme.mixins.toolbar,
-}));
-
-//AppBar
-interface AppBarProps extends MuiAppBarProps {
-    open?: boolean;
-}
-
-const AppBar = styled(MuiAppBar, {
-    shouldForwardProp: (prop) => prop !== "open",
-})<AppBarProps>(({ theme, open }) => ({
-    zIndex: theme.zIndex.drawer + 1,
-    transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-    }),
-    ...(open && {
-        marginLeft: drawerWidth,
-        width: `calc(100% - ${drawerWidth}px)`,
-        transition: theme.transitions.create(["width", "margin"], {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
-    }),
-}));
-
-const getAllRoutesWithPath = (routes: LayoutRoute[]): LayoutRoute[] => {
-    let result: LayoutRoute[] = [];
-    for (const route of routes) {
-        if (route.path) {
-            result.push(route);
-        }
-        if (route.children) {
-            result = result.concat(getAllRoutesWithPath(route.children));
-        }
-    }
-    return result;
-};
-
-interface LayoutProps {
-    routes: LayoutRoute[];
-    appVersion: string;
-    colors: LayoutPaletteColorOptions;
-    children: React.ReactNode;
-    user: User;
-    notifications: Notification[] | undefined;
-    setNotifications: Dispatch<SetStateAction<Notification[] | undefined>>;
-}
-
-export const Layout: React.FC<LayoutProps> = ({ routes, colors, appVersion, user, notifications, setNotifications, children }) => {
-    const prefersDarkMode: boolean = useMediaQuery("(prefers-color-scheme: dark)");
-    const [mode, setMode] = useLocalStorageState<"light" | "dark" | "system">("mui-mode", { defaultValue: "system" });
-    const [leftDrawerOpen, setLeftDrawerOpen] = useState<boolean>(false);
-    const { i18n } = useTranslation();
-    const isFetching = !!useIsFetching();
-    const isMutating = !!useIsMutating();
-    const location = useLocation();
-    const navigationRoutes = getAllRoutesWithPath(routes);
-    const route = navigationRoutes.find(r => matchPath(r.path!, location.pathname))!;
-    const { instance, inProgress } = useMsal();
-    const isAuthenticated = useIsAuthenticated();
-
-    useEffect(() => {
-        if (route.authenticated !== false && !isAuthenticated && inProgress === InteractionStatus.None)
-            instance.loginRedirect({ scopes: [], redirectUri: "/" });
-    }, [route, isAuthenticated, inProgress]);
-
-    const resolvedMode = mode === "system" ? (prefersDarkMode ? "dark" : "light") : mode;
-
-    const theme: Theme = createTheme({
-        palette: {
-            mode: resolvedMode,
-            primary: { main: (colors.primary as any)?.[resolvedMode] || (colors.primary as any)?.main, },
-            secondary: { main: (colors.secondary as any)?.[resolvedMode] || (colors.secondary as any)?.main, },
-            background: resolvedMode === "light" && colors.background ? { default: colors.background.default, paper: colors.background.paper, } : {},
-        },
-        components: {
-            MuiCssBaseline: {
-                styleOverrides: (theme) => ({
-                    body: {
-                        "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
-                            width: "0.7em",
-                            height: "0.7em",
-                        },
-                        "&::-webkit-scrollbar-track, & *::-webkit-scrollbar-track": {
-                            backgroundColor: theme.palette.mode === "dark" ? grey[900] : grey[200],
-                            borderRadius: "5px",
-                        },
-                        "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
-                            backgroundColor: theme.palette.mode === "dark" ? grey[800] : grey[400],
-                            borderRadius: "10px",
-                        },
-                        "&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": {
-                            backgroundColor: theme.palette.mode === "dark" ? grey[700] : grey[500],
-                        },
-                        "&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
-                            backgroundColor: "transparent",
-                        },
-                    },
-                }),
-            },
-        },
-    },
-        i18n.language === "cs" ? datePickersCsCz : datePickersEnUs,
-        i18n.language === "cs" ? dataGridCsCz : dataGridEnUs,
-        i18n.language === "cs" ? csCZ : enUS
-    );
-
-    const title = route.pageTitle ?? route.title;
-
-    useEffect(() => {
-        if (title) document.title = title;
-    }, [title]);
-
-    const toggleNavigationDrawer = () => setLeftDrawerOpen(!leftDrawerOpen);
-
-    const hasNavigationRoutes: boolean = navigationRoutes.filter(route => route.showInMenu && !route.disabled).length > 1;
-
-    return (
-        <ThemeProvider theme={theme}>
-            <Box sx={{ display: "flex", position: "sticky" }}>
-                <CssBaseline />
-                <AppBar position="fixed" open={leftDrawerOpen}>
-                    <Toolbar>
-                        <IconButton color="inherit" onClick={toggleNavigationDrawer} edge="start" sx={{ marginRight: 2, ...((leftDrawerOpen || !hasNavigationRoutes) && { display: "none" }) }} >
-                            <Menu />
-                        </IconButton>
-
-                        <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>{title}</Typography>
-
-                        {environment !== "prd" && <Chip sx={theme => ({ mr: 1, bgcolor: "secondary.main", color: theme.palette.primary.contrastText })} label={environment} />}
-
-                        <NotificationMenu notifications={notifications} setNotifications={setNotifications} />
-                        <AccountMenu mode={mode} setMode={setMode} user={user}/>
-                    </Toolbar>
-                </AppBar>
-
-                <NavigationDrawer routes={navigationRoutes} appVersion={appVersion} open={leftDrawerOpen} setOpen={setLeftDrawerOpen} hasRoutes={hasNavigationRoutes} />
-
-                <Box component="main" sx={{ flex: 1, overflow: "auto" }}>
-                    <DrawerHeader />
-                    {(route.authenticated === false || isAuthenticated) && !route.disabled ? children : <Unauthorized />}
-                </Box>
-            </Box>
-
-            <DevelopmentBanner user={user} hasNavigationRoutes={hasNavigationRoutes} />
-            {(isFetching || isMutating) && <LinearProgress sx={{ position: "fixed", top: { xs: 56, sm: 64 }, left: 0, right: 0 }} />}
-        </ThemeProvider>
-    );
-};

package/src/components/dataGrid/ChipInputCell.tsx

@@ -1,31 +0,0 @@
-import { Chip, ChipProps, Stack } from "@mui/material";
-import { GridRenderCellParams, GridValidRowModel } from "@mui/x-data-grid-premium";
-import { newGuid } from "../../utils/Helpers";
-
-const isArray = (value: any) => Array.isArray(value);
-
-interface ChipInputCellProps<T extends GridValidRowModel> {
-    params: GridRenderCellParams<T>;
-    slotProps?: ChipProps;
-    getLabel?: (object: T) => string | number;
-}
-
-export const ChipInputCell = <T extends GridValidRowModel>({ params, slotProps, getLabel }: ChipInputCellProps<T>) => {
-    if (!params.value) return null;
-
-    const getLabelValue = (value: any) => {
-        if (getLabel) return getLabel(value);
-        return value;
-    };
-
-    if (isArray(params.value))
-        return (
-            <Stack direction="row" alignItems="center" gap={1} sx={{ overflowX: "auto", height: "100%", width: params.colDef.computedWidth }}>
-                {params.value.map((value: any) =>
-                    <Chip key={newGuid()} label={getLabelValue(value)} {...slotProps} />
-                )}
-            </Stack>
-        );
-
-    return <Chip label={getLabelValue(params.value)} {...slotProps} />;
-};

package/src/components/dataGrid/EditableColumnHeader.tsx

@@ -1,7 +0,0 @@
-import { Edit } from "@mui/icons-material";
-import { GridColumnHeaderParams, GridValidRowModel } from "@mui/x-data-grid-premium";
-import { TypographyWithIcon } from "../layout/TypographyWithIcon";
-
-export const EditableColumnHeader = <T extends GridValidRowModel>({ colDef }: GridColumnHeaderParams<T>) => {
-    return <TypographyWithIcon endIcon={<Edit color="disabled" fontSize="small" />} variant="body2" className="MuiDataGrid-columnHeaderTitle">{colDef.headerName}</TypographyWithIcon>;
-};

package/src/components/dataGrid/GridToolbar.tsx

@@ -1,63 +0,0 @@
-import { Add } from "@mui/icons-material";
-import { Box, Button } from "@mui/material";
-import { GridRowId, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarExport, GridToolbarFilterButton, GridToolbarQuickFilter, GridToolbarProps as MuiGridToolbarProps, useGridApiContext } from "@mui/x-data-grid-premium";
-import { GridApiPremium } from "@mui/x-data-grid-premium/models/gridApiPremium";
-import React, { useContext } from "react";
-import { LayoutContext } from "../../contexts/LayoutContext";
-import { newGuid } from "../../utils/Helpers";
-
-const getFirstEditableColumn = (apiRef: GridApiPremium) => {
-    const editableColumns = apiRef.getAllColumns().filter(column => column.editable);
-    if (editableColumns.length)
-        return editableColumns[0];
-};
-
-const hasEditableColumn = (apiRef: GridApiPremium | null) => {
-    const editableColumns = apiRef?.getAllColumns().filter(column => column.editable);
-    return !!editableColumns?.length;
-};
-
-export interface GridToolbarProps extends MuiGridToolbarProps {
-    actions?: React.ReactNode[];
-    hideAddNewRow?: boolean;
-    newRowDefaultValue?: any;
-}
-
-export const GridToolbar: React.FC<GridToolbarProps> = (props) => {
-    const apiRef = useGridApiContext();
-    const { t } = useContext(LayoutContext);
-
-    const handleOnAddRecordClick = () => {
-        if (!apiRef.current) return;
-
-        const rowIds: GridRowId[] = apiRef.current?.getAllRowIds();
-        const allRows: any[] = rowIds.map(rowId => (apiRef.current?.getRow(rowId)));
-
-        const id: GridRowId = props.newRowDefaultValue?.id ?? newGuid();
-        apiRef.current?.setRows([{ ...props.newRowDefaultValue, id, isNew: true }, ...allRows]);
-        setTimeout(() => apiRef.current?.startRowEditMode({ id }));
-
-        const firstEditableColumn = getFirstEditableColumn(apiRef.current);
-        if (firstEditableColumn) {
-            apiRef.current.setCellFocus(id, firstEditableColumn.field);
-            setTimeout(() => apiRef.current?.scrollToIndexes({ rowIndex: 0 }));
-        }
-    };
-
-    const showNewRowButton = hasEditableColumn(apiRef.current) && !props.hideAddNewRow;
-    const hasActiveFilters = !!apiRef.current?.state.filter.filterModel.items.length || !!apiRef.current?.state.filter.filterModel.quickFilterValues?.length;
-
-    return (
-        <GridToolbarContainer>
-            <GridToolbarColumnsButton />
-            <GridToolbarFilterButton />
-            <GridToolbarExport />
-            {showNewRowButton && <Button size="small" startIcon={<Add />} onClick={handleOnAddRecordClick} disabled={hasActiveFilters}>{t("Layout.AddRow")}</Button>}
-            {props.actions?.map(action => action)}
-
-            <Box sx={{ flexGrow: 1 }} />
-
-            <GridToolbarQuickFilter />
-        </GridToolbarContainer>
-    );
-};

package/src/components/dataGrid/TableContainer.tsx

@@ -1,39 +0,0 @@
-import { Box, BoxProps, useTheme } from "@mui/material";
-import React from "react";
-
-export const TableContainer: React.FC<BoxProps> = ({ sx, ...props }) => {
-    const theme = useTheme();
-
-    return (
-        <Box
-            {...props}
-            sx={{
-                height: { xs: "calc(100vh - 56px)", sm: "calc(100vh - 64px)" },
-                "& .MuiDataGrid-cell--editing": {
-                    "& .MuiInputBase-root": {
-                        height: "100%",
-                    },
-                },
-                "& .MuiDataGrid-columnHeaderTitle": {
-                    fontWeight: "600",
-                },
-                "& .MuiDataGrid-cell": {
-                    display: "flex",
-                    alignItems: "center",
-                },
-                "& .Mui-error": {
-                    backgroundColor: theme.palette.error.main,
-                    color: theme.palette.error.contrastText
-                },
-                "& .MuiDataGrid-booleanCell[data-value=\"true\"]": {
-                    color: `${theme.palette.success.main}!important`
-                },
-                "& .MuiDataGrid-booleanCell[data-value=\"false\"]": {
-                    color: `${theme.palette.error.main}!important`
-                },
-                ...sx
-            }}>
-            {props.children}
-        </Box>
-    );
-};

package/src/components/form/FormAutocomplete.tsx

@@ -1,34 +0,0 @@
-import { Autocomplete, AutocompleteProps, TextField, TextFieldProps } from "@mui/material";
-import { FC } from "react";
-
-import { FormOmittedProps, getFieldStatus } from "../../utils/FormUtils";
-import { useFieldContext } from "../../hooks/FormHooks";
-
-export interface FormAutocompleteProps extends Omit<AutocompleteProps<any, boolean, boolean, boolean>, FormOmittedProps> {
-    textFieldProps?: Omit<TextFieldProps, FormOmittedProps>;
-}
-
-export const FormAutocomplete: FC<FormAutocompleteProps> = ({ textFieldProps, ...autocompleteProps }) => {
-    const field = useFieldContext();
-    const { isTouched, hasError, helperText } = getFieldStatus(field);
-
-    return (
-        <Autocomplete
-            value={field.state.value}
-            onChange={(_, value) => !autocompleteProps.freeSolo && field.handleChange(value)}
-            onInputChange={(_, value, reason) => reason !== "reset" && autocompleteProps.freeSolo && field.handleChange(value)}
-            onBlur={field.handleBlur}
-            aria-label={field.name}
-            {...autocompleteProps}
-            renderInput={(params) =>
-                <TextField
-                    {...params}
-                    name={field.name}
-                    error={isTouched && hasError}
-                    helperText={isTouched && helperText}
-                    {...textFieldProps}
-                />
-            }
-        />
-    )
-}

package/src/components/form/FormCheckbox.tsx

@@ -1,32 +0,0 @@
-import { Checkbox, CheckboxProps, FormControl, FormControlLabel, FormHelperText } from "@mui/material";
-import { FC } from "react";
-import { useFieldContext } from "../../hooks/FormHooks";
-import { FormOmittedProps, getFieldStatus } from "../../utils/FormUtils";
-
-export interface FormCheckboxProps extends Omit<CheckboxProps, FormOmittedProps> {
-    label?: string;
-}
-
-export const FormCheckbox: FC<FormCheckboxProps> = (props) => {
-    const field = useFieldContext<boolean | null | undefined>();
-    const { isTouched, hasError, helperText } = getFieldStatus(field);
-
-    return (
-        <FormControl component="fieldset">
-            <FormControlLabel
-                control={
-                    <Checkbox
-                        name={field.name}
-                        checked={Boolean(field.state.value)}
-                        onChange={(e) => field.handleChange(e.target.checked)}
-                        onBlur={field.handleBlur}
-                        aria-label={field.name}
-                        {...props}
-                    />
-                }
-                label={props.label ?? ""}
-            />
-            {isTouched && hasError && <FormHelperText error={hasError}>{helperText}</FormHelperText>}
-        </FormControl>
-    );
-};

package/src/components/form/FormDatePicker.tsx

@@ -1,34 +0,0 @@
-import { TextFieldProps } from "@mui/material";
-import { DatePicker, DatePickerProps } from "@mui/x-date-pickers-pro";
-import { FC } from "react";
-import { useFieldContext } from "../../hooks/FormHooks";
-import { FormOmittedProps, getFieldStatus } from "../../utils/FormUtils";
-import moment, { Moment } from "moment";
-
-export interface FormDatePickerProps extends Omit<DatePickerProps<Moment>, FormOmittedProps> {
-    textFieldProps?: TextFieldProps;
-}
-
-export const FormDatePicker: FC<FormDatePickerProps> = (props) => {
-    const field = useFieldContext<string | null | undefined>();
-    const { isTouched, hasError, helperText } = getFieldStatus(field);
-
-    return (
-        <DatePicker
-            name={field.name}
-            value={field.state.value ? moment(field.state.value) : null}
-            onChange={(value) => field.handleChange(value ? value.format() : null)}
-            slotProps={{
-                textField: {
-                    onBlur: field.handleBlur,
-                    error: isTouched && hasError,
-                    helperText: isTouched && helperText,
-                    ...props.textFieldProps
-                },
-                ...props.slotProps
-            }}
-            aria-label={field.name}
-            {...props}
-        />
-    )
-}

package/src/components/form/FormDateTimePicker.tsx

@@ -1,34 +0,0 @@
-import { TextFieldProps } from "@mui/material";
-import { DateTimePicker, DateTimePickerProps } from "@mui/x-date-pickers-pro";
-import { FC } from "react";
-import { useFieldContext } from "../../hooks/FormHooks";
-import { FormOmittedProps, getFieldStatus } from "../../utils/FormUtils";
-import moment, { Moment } from "moment";
-
-export interface FormDateTimePickerProps extends Omit<DateTimePickerProps<Moment>, FormOmittedProps> {
-    textFieldProps?: TextFieldProps;
-}
-
-export const FormDateTimePicker: FC<FormDateTimePickerProps> = (props) => {
-    const field = useFieldContext<string | null | undefined>();
-    const { isTouched, hasError, helperText } = getFieldStatus(field);
-
-    return (
-        <DateTimePicker
-            name={field.name}
-            value={field.state.value ? moment(field.state.value) : null}
-            onChange={(value) => field.handleChange(value ? value.format() : null)}
-            slotProps={{
-                textField: {
-                    onBlur: field.handleBlur,
-                    error: isTouched && hasError,
-                    helperText: isTouched && helperText,
-                    ...props.textFieldProps,
-                },
-                ...props.slotProps
-            }}
-            aria-label={field.name}
-            {...props}
-        />
-    );
-};

package/src/components/form/FormNumberField.tsx

@@ -1,33 +0,0 @@
-import { TextField, TextFieldProps } from '@mui/material';
-import { FC } from 'react';
-import { NumericFormat } from 'react-number-format';
-import { useFieldContext } from "../../hooks/FormHooks";
-import { FormOmittedProps, getFieldStatus } from "../../utils/FormUtils";
-import { NumericFormatProps, InputAttributes } from 'react-number-format/types/types';
-
-interface FormTextFieldProps extends Omit<TextFieldProps, FormOmittedProps> { }
-
-export interface FormNumberFieldProps extends FormTextFieldProps {
-	defaultValue?: number | null;
-	options?: Omit<NumericFormatProps<InputAttributes>, "customInput" | "onValueChange" | keyof InputAttributes>;
-}
-
-export const FormNumberField: FC<FormNumberFieldProps> = ({ options, ...props }) => {
-	const field = useFieldContext<number | null | undefined>();
-	const { isTouched, hasError, helperText } = getFieldStatus(field);
-
-	return (
-		<NumericFormat
-			customInput={TextField}
-			name={field.name}
-			value={field.state.value ?? ''}
-			onValueChange={({ floatValue }) => field.handleChange(floatValue)}
-			onBlur={field.handleBlur}
-			error={isTouched && hasError}
-			helperText={isTouched && helperText}
-			aria-label={field.name}
-			{...props}
-			{...options}
-		/>
-	);
-}

package/src/components/form/FormRadioGroup.tsx

@@ -1,43 +0,0 @@
-import { FormControl, FormControlLabel, FormHelperText, FormLabel, Radio, RadioGroup, RadioGroupProps } from "@mui/material";
-import { FC } from "react";
-import { useFieldContext } from "../../hooks/FormHooks";
-import { FormOmittedProps, getFieldStatus } from "../../utils/FormUtils";
-
-interface Option {
-    label: string;
-    value: string | number;
-}
-
-export interface FormRadioGroupProps extends Omit<RadioGroupProps, FormOmittedProps> {
-    label?: string;
-    options: Option[];
-}
-
-export const FormRadioGroup: FC<FormRadioGroupProps> = ({ label, options, ...props }) => {
-    const field = useFieldContext<string | number | null | undefined>();
-    const { isTouched, hasError, helperText } = getFieldStatus(field);
-
-    return (
-        <FormControl component="fieldset">
-            {label && <FormLabel component="legend">{label}</FormLabel>}
-            <RadioGroup
-                name={field.name}
-                value={field.state.value ?? ""}
-                onChange={(e) => field.handleChange(e.target.value)}
-                onBlur={field.handleBlur}
-                aria-label={field.name}
-                {...props}
-            >
-                {options.map((option) => (
-                    <FormControlLabel
-                        key={option.value}
-                        value={option.value}
-                        control={<Radio />}
-                        label={option.label}
-                    />
-                ))}
-            </RadioGroup>
-            {isTouched && hasError && <FormHelperText error={hasError}>{helperText}</FormHelperText>}
-        </FormControl>
-    );
-};

package/src/components/form/FormSlider.tsx

@@ -1,28 +0,0 @@
-import { FormControl, FormHelperText, FormLabel, Slider, SliderProps } from "@mui/material";
-import { FC } from "react";
-import { useFieldContext } from "../../hooks/FormHooks";
-import { FormOmittedProps, getFieldStatus } from "../../utils/FormUtils";
-
-export interface FormSliderProps extends Omit<SliderProps, FormOmittedProps> {
-    label?: string;
-}
-
-export const FormSlider: FC<FormSliderProps> = ({ label, ...props }) => {
-    const field = useFieldContext<number | null | undefined>();
-    const { isTouched, hasError, helperText } = getFieldStatus(field);
-
-    return (
-        <FormControl component="fieldset">
-            {label && <FormLabel>{label}</FormLabel>}
-            <Slider
-                name={field.name}
-                value={field.state.value ?? 0}
-                onChange={(_, value) => field.handleChange(Array.isArray(value) ? value[0] : value)}
-                onBlur={field.handleBlur}
-                aria-label={field.name}
-                {...props}
-            />
-            {isTouched && hasError && <FormHelperText error={hasError}>{helperText}</FormHelperText>}
-        </FormControl>
-    );
-};

package/src/components/form/FormSubmitButton.tsx

@@ -1,29 +0,0 @@
-import { Button, ButtonProps } from "@mui/material";
-import { FC } from "react";
-import { useFormContext } from "../../hooks/FormHooks";
-
-export interface FormSubmitButtonProps extends Omit<ButtonProps, "loading" | "disabled" | "onClick"> { }
-
-export const FormSubmitButton: FC<FormSubmitButtonProps> = (props) => {
-    const form = useFormContext();
-
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-        e.preventDefault();
-        e.stopPropagation();
-        form.handleSubmit();
-    };
-
-    return (
-        <form.Subscribe selector={(state) => [state.canSubmit, state.isSubmitting]}>
-            {([canSubmit, isSubmitting]) => (
-                <Button
-                    loading={isSubmitting}
-                    disabled={!canSubmit}
-                    onClick={handleClick}
-                    aria-label="submit"
-                    {...props}
-                />
-            )}
-        </form.Subscribe>
-    );
-};

package/src/components/form/FormSwitch.tsx

@@ -1,32 +0,0 @@
-import { FormControl, FormControlLabel, FormHelperText, Switch, SwitchProps } from "@mui/material";
-import { FC } from "react";
-import { useFieldContext } from "../../hooks/FormHooks";
-import { FormOmittedProps, getFieldStatus } from "../../utils/FormUtils";
-
-export interface FormSwitchProps extends Omit<SwitchProps, FormOmittedProps> {
-    label?: string;
-}
-
-export const FormSwitch: FC<FormSwitchProps> = (props) => {
-    const field = useFieldContext<boolean | null | undefined>();
-    const { isTouched, hasError, helperText } = getFieldStatus(field);
-
-    return (
-        <FormControl component="fieldset">
-            <FormControlLabel
-                control={
-                    <Switch
-                        name={field.name}
-                        checked={Boolean(field.state.value)}
-                        onChange={(e) => field.handleChange(e.target.checked)}
-                        onBlur={field.handleBlur}
-                        aria-label={field.name}
-                        {...props}
-                    />
-                }
-                label={props.label ?? ""}
-            />
-            {isTouched && hasError && <FormHelperText error={hasError}>{helperText}</FormHelperText>}
-        </FormControl>
-    );
-};

package/src/components/form/FormTextField.tsx

@@ -1,26 +0,0 @@
-import { TextField, TextFieldProps } from "@mui/material";
-import { FC } from "react";
-import { useFieldContext } from "../../hooks/FormHooks";
-import { FormOmittedProps, getFieldStatus } from "../../utils/FormUtils";
-
-export interface FormTextFieldProps extends Omit<TextFieldProps, FormOmittedProps> {
-    type?: "color" | "email" | "password" | "search" | "tel" | "text" | "url"
-}
-
-export const FormTextField: FC<FormTextFieldProps> = (props) => {
-    const field = useFieldContext<string | number | null | undefined>();
-    const { isTouched, hasError, helperText } = getFieldStatus(field);
-
-    return (
-        <TextField
-            name={field.name}
-            value={field.state.value ?? ''}
-            onChange={e => field.handleChange(e.target.value)}
-            onBlur={field.handleBlur}
-            error={isTouched && hasError}
-            helperText={isTouched && helperText}
-            aria-label={field.name}
-            {...props}
-        />
-    )
-}