add new inputs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rave-ui",
-  "version": "0.17.0",
+  "version": "0.19.3",
   "license": "MIT",
   "author": "BjoernRave",
   "main": "dist/src/index.js",

src/FormItems/Basic/DateTimeProvider.tsx

@@ -4,10 +4,10 @@ import deLocale from "date-fns/locale/de"
 import enLocale from "date-fns/locale/en-US"
 import esLocale from "date-fns/locale/es"
 import ptLocale from "date-fns/locale/pt"
-import { FC, PropsWithChildren } from "react"
-import { Language } from "../../lib/types"
+import type { FC, PropsWithChildren } from "react"
+import type { Language } from "../../lib/types"
 
-const localeMap = {
+export const localeMap = {
   en: enLocale,
   es: esLocale,
   pt: ptLocale,

src/FormItems/Basic/MonthInput.tsx

@@ -0,0 +1,58 @@
+import { FormControl, FormHelperText } from "@mui/material"
+import { DatePicker } from "@mui/x-date-pickers-pro"
+import { format } from "date-fns"
+import { useController } from "react-hook-form"
+import { useLocale } from "../../lib/theme"
+import type { InputProps, Language } from "../../lib/types"
+import DateTimeProvider, { localeMap } from "./DateTimeProvider"
+
+export default function YearInput({
+  label,
+  name,
+  index,
+  subName,
+  helperText,
+}: Props) {
+  const { lang } = useLocale()
+  const formName =
+    typeof index === "number" && subName ? `${name}[${index}].${subName}` : name
+
+  const { field, fieldState } = useController({ name: formName })
+
+  return (
+    <FormControl
+      style={{ width: "100%" }}
+      className="my-2"
+      error={Boolean(fieldState.error)}
+    >
+      <DateTimeProvider lang={lang as Language}>
+        <DatePicker
+          label={label}
+          closeOnSelect
+          value={field.value ?? null}
+          views={["month", "year"]}
+          onChange={(month) => field.onChange({ target: { value: month } })}
+          slotProps={{
+            textField: {
+              size: "small",
+              InputProps: {
+                value:
+                  field.value === null
+                    ? ""
+                    : format(new Date(field.value), "MMMM yyyy", {
+                        locale: localeMap[lang],
+                      }),
+              },
+              FormHelperTextProps: { style: { display: "none" } },
+            },
+          }}
+        />
+      </DateTimeProvider>
+      <FormHelperText>
+        {fieldState.error ? fieldState.error.message : helperText}
+      </FormHelperText>
+    </FormControl>
+  )
+}
+
+interface Props extends InputProps {}

src/FormItems/Basic/YearInput.tsx

@@ -0,0 +1,55 @@
+import { FormControl, FormHelperText } from "@mui/material"
+import { DatePicker } from "@mui/x-date-pickers-pro"
+import { useController } from "react-hook-form"
+import { useLocale } from "../../lib/theme"
+import type { InputProps, Language } from "../../lib/types"
+import DateTimeProvider from "./DateTimeProvider"
+
+export default function YearInput({
+  label,
+  name,
+  index,
+  subName,
+  helperText,
+}: Props) {
+  const { lang } = useLocale()
+  const formName =
+    typeof index === "number" && subName ? `${name}[${index}].${subName}` : name
+
+  const { field, fieldState } = useController({ name: formName })
+
+  return (
+    <FormControl
+      style={{ width: "100%" }}
+      className="my-2"
+      error={Boolean(fieldState.error)}
+    >
+      <DateTimeProvider lang={lang as Language}>
+        <DatePicker
+          closeOnSelect
+          label={label}
+          value={field.value ?? null}
+          views={["year"]}
+          onChange={(year) => field.onChange({ target: { value: year } })}
+          slotProps={{
+            textField: {
+              size: "small",
+              InputProps: {
+                value:
+                  field.value === null
+                    ? ""
+                    : new Date(field.value)?.getFullYear?.(),
+              },
+              FormHelperTextProps: { style: { display: "none" } },
+            },
+          }}
+        />
+      </DateTimeProvider>
+      <FormHelperText>
+        {fieldState.error ? fieldState.error.message : helperText}
+      </FormHelperText>
+    </FormControl>
+  )
+}
+
+interface Props extends InputProps {}

src/FormItems/MultiCreate.tsx

@@ -12,12 +12,17 @@ import {
   FormHelperText,
   FormLabel,
 } from "@mui/material"
-import { FC, PropsWithChildren, useId, useMemo, useState } from "react"
+import {
+  type FC,
+  type PropsWithChildren,
+  useId,
+  useMemo,
+  useState,
+} from "react"
 import { useController, useFormContext, useWatch } from "react-hook-form"
 import Table from "../Table"
 import { generateSlug, getErrorMessage } from "../lib/misc"
 import { useLocale } from "../lib/theme"
-
 import SubmitButton from "./Basic/SubmitButton"
 
 const StyledDialogContent = styled(DialogContent)`
@@ -164,52 +169,51 @@ const MultiCreate: FC<PropsWithChildren<Props>> = ({
       >
         <FormLabel style={{ marginBottom: 10 }}>{label}</FormLabel>
         {tableData?.length > 0 && (
-          <>
-            <Table
-              hideSearch
-              columns={fields.map((field) => ({
-                ...(field.getOptionLabel
-                  ? {
-                      id: field.name,
-                      accessorFn: (row) => field.getOptionLabel(row),
-                    }
-                  : {
-                      accessorKey: field.name,
-                    }),
-                header: field.label,
-                enableSorting: false,
-              }))}
-              data={formatFunction ? formatFunction(tableData) : tableData}
-              rowActions={[
-                {
-                  label: locales.edit,
-                  onClick: (row) => {
-                    const newArray = Array.from(tableData)
+          <Table
+            error={(fieldState?.error as any)?.findIndex((er) => Boolean(er))}
+            hideSearch
+            columns={fields.map((field) => ({
+              ...(field.getOptionLabel
+                ? {
+                    id: field.name,
+                    accessorFn: (row) => field.getOptionLabel(row),
+                  }
+                : {
+                    accessorKey: field.name,
+                  }),
+              header: field.label,
+              enableSorting: false,
+            }))}
+            data={formatFunction ? formatFunction(tableData) : tableData}
+            rowActions={[
+              {
+                label: locales.edit,
+                onClick: (row) => {
+                  const newArray = Array.from(tableData)
 
-                    const item = newArray.splice(row.index, 1)
+                  const item = newArray.splice(row.index, 1)
 
-                    newArray.push(item[0])
+                  newArray.push(item[0])
 
-                    field.onChange({ target: { value: newArray } })
+                  field.onChange({ target: { value: newArray } })
 
-                    setIsUpdating(row.index)
-                  },
-                  icon: <EditIcon />,
+                  setIsUpdating(row.index)
                 },
-                {
-                  label: locales.delete,
-                  onClick: (row) => {
-                    const updatedData = Array.from(tableData)
-                    updatedData.splice(row.index, 1)
-                    field.onChange({
-                      target: { value: updatedData },
-                    })
-                  },
-                  icon: <DeleteIcon />,
+                icon: <EditIcon />,
+              },
+              {
+                label: locales.delete,
+                onClick: (row) => {
+                  const updatedData = Array.from(tableData)
+                  updatedData.splice(row.index, 1)
+                  field.onChange({
+                    target: { value: updatedData },
+                  })
                 },
-              ]}
-            />
-          </>
+                icon: <DeleteIcon />,
+              },
+            ]}
+          />
         )}
         <CreateButton
           variant="contained"

src/Table.tsx

@@ -17,18 +17,18 @@ import TableCell from "@mui/material/TableCell"
 import TableHead from "@mui/material/TableHead"
 import TableRow from "@mui/material/TableRow"
 import {
-  ColumnDef,
-  Row,
-  SortingState,
+  type ColumnDef,
+  type Row,
+  type SortingState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table"
-import { CSSProperties, FC, useMemo, useState } from "react"
+import { type CSSProperties, type FC, useMemo, useState } from "react"
 import { useLocale } from "./lib/theme"
-import { Action } from "./lib/types"
+import type { Action } from "./lib/types"
 
 const StyledTableBody = styled(TableBody)`
   @media (max-width: 1023px) {
@@ -55,6 +55,7 @@ const Table: FC<Props> = ({
   maxHeight,
   style,
   labelledBy,
+  error,
 }) => {
   const { locales } = useLocale()
   const [sorting, setSorting] = useState<SortingState>([])
@@ -192,7 +193,7 @@ const Table: FC<Props> = ({
               </TableRow>
             ))}
           </TableHead>
-          {!Boolean(data) ? (
+          {!data ? (
             <StyledTableBody>
               {array.map((row, ind) => (
                 <TableRow key={ind}>
@@ -209,18 +210,21 @@ const Table: FC<Props> = ({
             </StyledTableBody>
           ) : rows.length > 0 ? (
             <StyledTableBody>
-              {rows.map((row) => {
+              {rows.map((row, ind) => {
                 return (
                   <TableRow
                     key={row.id}
                     className={` ${
                       onRowClick && "cursor-pointer hover:bg-gray-300"
-                    }`}
-                    onClick={() => onRowClick && onRowClick(row)}
+                    } `}
+                    onClick={() => onRowClick?.(row)}
                   >
                     {row.getVisibleCells().map((cell) => {
                       return (
-                        <TableCell key={cell.id}>
+                        <TableCell
+                          className={`${error === ind ? "!text-red-500 !font-bold" : ""}`}
+                          key={cell.id}
+                        >
                           {flexRender(
                             cell.column.columnDef.cell,
                             cell.getContext(),
@@ -263,4 +267,5 @@ export interface Props {
   maxHeight?: number
   style?: CSSProperties
   labelledBy?: string
+  error?: number
 }

src/index.ts

@@ -26,6 +26,7 @@ export { default as DateTimeInput } from "./FormItems/Basic/DateTimeInput"
 export { default as DateTimeProvider } from "./FormItems/Basic/DateTimeProvider"
 export { default as EmailInput } from "./FormItems/Basic/EmailInput"
 export { default as Form } from "./FormItems/Basic/Form"
+export { default as MonthInput } from "./FormItems/Basic/MonthInput"
 export { default as MultiCombobox } from "./FormItems/Basic/MultiCombobox"
 export { default as NumberInput } from "./FormItems/Basic/NumberInput"
 export { default as PasswordInput } from "./FormItems/Basic/PasswordInput"
@@ -36,6 +37,7 @@ export { default as TextAreaInput } from "./FormItems/Basic/TextAreaInput"
 export { default as TextInput } from "./FormItems/Basic/TextInput"
 export { default as TextListInput } from "./FormItems/Basic/TextListInput"
 export { default as TimeInput } from "./FormItems/Basic/TimeInput"
+export { default as YearInput } from "./FormItems/Basic/YearInput"
 export { default as ZipInput } from "./FormItems/Basic/ZipInput"
 export { default as EntitySelect } from "./FormItems/EntitySelect"
 export { default as FileInput } from "./FormItems/FileInput"
@@ -50,10 +52,10 @@ export { default as FormModal } from "./FormModal"
 export { default as FormPage } from "./FormPage"
 export { default as ImageViewer } from "./ImageViewer"
 export { default as Infos } from "./Infos"
-export { default as Table } from "./Table"
 export * from "./lib/colors"
 export * from "./lib/date"
 export * from "./lib/misc"
 export * from "./lib/styles"
 export { defaultTheme, useLocale } from "./lib/theme"
 export * from "./lib/types"
+export { default as Table } from "./Table"