@carlonicora/nextjs-jsonapi 1.115.0 → 1.117.0

package/src/components/forms/FormDate.tsx

@@ -26,6 +26,8 @@ export function FormDate({
   isRequired = false,
   defaultMonth,
   allowEmpty,
+  description,
+  futureYears,
 }: {
   form: any;
   id: string;
@@ -36,6 +38,8 @@ export function FormDate({
   isRequired?: boolean;
   defaultMonth?: Date;
   allowEmpty?: boolean;
+  description?: string;
+  futureYears?: number;
 }) {
   const t = useI18nTranslations();
   const locale = useI18nLocale();
@@ -117,7 +121,7 @@ export function FormDate({
 
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired}>
+      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired} description={description}>
         {(field) => (
           <Popover open={open} onOpenChange={setOpen} modal={true}>
             <InputGroup>
@@ -162,7 +166,7 @@ export function FormDate({
                 month={displayMonth}
                 onMonthChange={setDisplayMonth}
                 startMonth={new Date(1900, 0)}
-                endMonth={new Date(new Date().getFullYear() + 10, 11)}
+                endMonth={new Date(new Date().getFullYear() + (futureYears ?? 10), 11)}
               />
               {allowEmpty !== false && (
                 <div className="border-t p-2">

package/src/components/forms/FormDateTime.tsx

@@ -27,6 +27,9 @@ export function FormDateTime({
   onChange,
   allowEmpty,
   defaultMonth,
+  placeholder,
+  isRequired,
+  description,
 }: {
   form: any;
   id: string;
@@ -36,6 +39,8 @@ export function FormDateTime({
   onChange?: (date?: Date) => Promise<void>;
   allowEmpty?: boolean;
   defaultMonth?: Date;
+  isRequired?: boolean;
+  description?: string;
 }) {
   const [open, setOpen] = useState<boolean>(false);
   const t = useI18nTranslations();
@@ -100,7 +105,7 @@ export function FormDateTime({
 
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name}>
+      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired} description={description}>
         {(field) => (
           <div className="relative flex flex-row">
             <Popover open={open} onOpenChange={setOpen} modal={true}>
@@ -113,7 +118,11 @@ export function FormDateTime({
                     />
                   }
                 >
-                  {field.value ? formatDateTime(field.value) : <span>{t(`common.pick_date_time`)}</span>}
+                  {field.value ? (
+                    formatDateTime(field.value)
+                  ) : (
+                    <span>{placeholder ? placeholder : t(`common.pick_date_time`)}</span>
+                  )}
                   <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                 </PopoverTrigger>
                 {field.value && allowEmpty !== false && (

package/src/components/forms/FormFieldWrapper.tsx

@@ -18,6 +18,7 @@ type FormFieldWrapperProps<T extends FieldValues> = {
   description?: string;
   isRequired?: boolean;
   orientation?: "vertical" | "horizontal" | "responsive";
+  className?: string;
   children: (field: ControllerRenderProps<T, Path<T>>, fieldState: ControllerFieldState) => ReactNode;
   testId?: string;
 };
@@ -29,6 +30,7 @@ export function FormFieldWrapper<T extends FieldValues>({
   description,
   isRequired,
   orientation = "vertical",
+  className,
   children,
   testId,
 }: FormFieldWrapperProps<T>) {
@@ -37,7 +39,7 @@ export function FormFieldWrapper<T extends FieldValues>({
       control={form.control}
       name={name}
       render={({ field, fieldState }) => (
-        <Field orientation={orientation} data-invalid={!!fieldState.error} data-testid={testId}>
+        <Field orientation={orientation} className={className} data-invalid={!!fieldState.error} data-testid={testId}>
           {label && (
             <FieldLabel>
               {label}

package/src/components/forms/FormInput.tsx

@@ -9,6 +9,7 @@ export function FormInput({
   form,
   id,
   name,
+  description,
   placeholder,
   type,
   onBlur,
@@ -22,6 +23,7 @@ export function FormInput({
   form: any;
   id: string;
   name?: string;
+  description?: string;
   placeholder?: string;
   type?: "text" | "number" | "currency" | "decimal" | "password" | "link";
   onBlur?: () => Promise<void>;
@@ -36,7 +38,7 @@ export function FormInput({
 
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired}>
+      <FormFieldWrapper form={form} name={id} label={name} description={description} isRequired={isRequired}>
         {(field) => {
           const handleBlur = async (e: React.FocusEvent<HTMLInputElement>) => {
             let value = e.target.value;

package/src/components/forms/FormPassword.tsx

@@ -12,6 +12,7 @@ export function FormPassword({
   disabled,
   testId,
   isRequired,
+  description,
 }: {
   form: any;
   id: string;
@@ -21,10 +22,18 @@ export function FormPassword({
   disabled?: boolean;
   testId?: string;
   isRequired?: boolean;
+  description?: string;
 }) {
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired} testId={testId}>
+      <FormFieldWrapper
+        form={form}
+        name={id}
+        label={name}
+        isRequired={isRequired}
+        description={description}
+        testId={testId}
+      >
         {(field) => (
           <PasswordInput
             {...field}

package/src/components/forms/FormPlaceAutocomplete.tsx

@@ -42,6 +42,7 @@ interface PlaceAutocompleteProps {
   form: any;
   id: string;
   name?: string;
+  description?: string;
   placeholder?: string;
   disabled?: boolean;
   testId?: string;
@@ -56,12 +57,15 @@ interface PlaceAutocompleteProps {
    * For regions, use: ["administrative_area_level_1", "administrative_area_level_2"]
    */
   includeTypes?: string[];
+  /** Google Places language code for results. Defaults to "en". */
+  languageCode?: string;
 }
 
 export function FormPlaceAutocomplete({
   form,
   id,
   name,
+  description,
   placeholder,
   disabled,
   testId,
@@ -69,6 +73,7 @@ export function FormPlaceAutocomplete({
   onPlaceSelect,
   className,
   includeTypes,
+  languageCode = "en",
 }: PlaceAutocompleteProps) {
   const [inputValue, setInputValue] = useState("");
   const [suggestions, setSuggestions] = useState<PlaceSuggestion[]>([]);
@@ -117,7 +122,7 @@ export function FormPlaceAutocomplete({
         body: JSON.stringify({
           input: input,
           ...(includeTypes ? { includedPrimaryTypes: includeTypes } : {}),
-          languageCode: "en",
+          languageCode: languageCode,
         }),
       });
 
@@ -270,7 +275,7 @@ export function FormPlaceAutocomplete({
   if (loadError) {
     return (
       <div className="flex w-full flex-col">
-        <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired}>
+        <FormFieldWrapper form={form} name={id} label={name} description={description} isRequired={isRequired}>
           {(field) => (
             <Input
               {...field}
@@ -287,7 +292,7 @@ export function FormPlaceAutocomplete({
 
   return (
     <div className="flex w-full flex-col" ref={containerRef}>
-      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired}>
+      <FormFieldWrapper form={form} name={id} label={name} description={description} isRequired={isRequired}>
         {(field) => (
           <div className="relative">
             <Input

package/src/components/forms/FormSelect.tsx

@@ -9,6 +9,7 @@ export function FormSelect({
   form,
   id,
   name,
+  description,
   placeholder,
   disabled,
   values,
@@ -21,6 +22,7 @@ export function FormSelect({
   form: any;
   id: string;
   name?: string;
+  description?: string;
   placeholder?: string;
   disabled?: boolean;
   values: { id: string; text: string }[];
@@ -36,6 +38,7 @@ export function FormSelect({
         form={form}
         name={id}
         label={name}
+        description={description}
         isRequired={isRequired}
         orientation={useRows ? "horizontal" : "vertical"}
         testId={testId}

package/src/components/forms/FormSlider.tsx

@@ -10,6 +10,7 @@ export function FormSlider({
   name,
   disabled,
   showPercentage,
+  description,
 }: {
   form: any;
   id: string;
@@ -17,12 +18,13 @@ export function FormSlider({
   placeholder?: string;
   disabled?: boolean;
   showPercentage?: boolean;
+  description?: string;
 }) {
   const value = useWatch({ control: form.control, name: id });
 
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name}>
+      <FormFieldWrapper form={form} name={id} label={name} description={description}>
         {() => (
           <div>
             {showPercentage && (

package/src/components/forms/FormTextarea.tsx

@@ -11,6 +11,9 @@ export function FormTextarea({
   className,
   placeholder,
   testId,
+  description,
+  isRequired,
+  textareaRef,
 }: {
   form: any;
   id: string;
@@ -18,13 +21,24 @@ export function FormTextarea({
   placeholder?: string;
   className?: string;
   testId?: string;
+  description?: string;
+  isRequired?: boolean;
+  textareaRef?: React.RefObject<HTMLTextAreaElement>;
 }) {
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name} testId={testId}>
+      <FormFieldWrapper
+        form={form}
+        name={id}
+        label={name}
+        description={description}
+        isRequired={isRequired}
+        testId={testId}
+      >
         {(field) => (
           <Textarea
             {...field}
+            ref={textareaRef}
             className={cn("min-h-96 w-full", className)}
             disabled={form.formState.isSubmitting}
             placeholder={placeholder}

package/src/features/notification/data/notification.interface.ts

@@ -1,5 +1,4 @@
 import { ApiDataInterface } from "../../../core";
-import { UserInterface } from "../../user";
 
 export type NotificationInput = {
   id: string;
@@ -12,5 +11,6 @@ export interface NotificationInterface extends ApiDataInterface {
   get message(): string | undefined;
   get actionUrl(): string | undefined;
 
-  get actor(): UserInterface | undefined;
+  get actor(): ApiDataInterface | undefined;
+  get subject(): ApiDataInterface | undefined;
 }

package/src/features/notification/data/notification.ts

@@ -1,5 +1,4 @@
-import { AbstractApiData, JsonApiHydratedDataInterface, Modules } from "../../../core";
-import { UserInterface } from "../../user";
+import { AbstractApiData, ApiDataInterface, JsonApiHydratedDataInterface, Modules } from "../../../core";
 import { NotificationInput, NotificationInterface } from "./notification.interface";
 
 export class Notification extends AbstractApiData implements NotificationInterface {
@@ -8,7 +7,8 @@ export class Notification extends AbstractApiData implements NotificationInterfa
   private _message?: string;
   private _actionUrl?: string;
 
-  private _actor?: UserInterface;
+  private _actor?: ApiDataInterface;
+  private _subject?: ApiDataInterface;
 
   get notificationType(): string {
     if (this._notificationType === undefined) throw new Error("notificationType is not set");
@@ -27,10 +27,14 @@ export class Notification extends AbstractApiData implements NotificationInterfa
     return this._actionUrl;
   }
 
-  get actor(): UserInterface | undefined {
+  get actor(): ApiDataInterface | undefined {
     return this._actor;
   }
 
+  get subject(): ApiDataInterface | undefined {
+    return this._subject;
+  }
+
   rehydrate(data: JsonApiHydratedDataInterface): this {
     super.rehydrate(data);
 
@@ -39,7 +43,19 @@ export class Notification extends AbstractApiData implements NotificationInterfa
     this._message = data.jsonApi.attributes.message;
     this._actionUrl = data.jsonApi.attributes.actionUrl;
 
-    this._actor = this._readIncluded(data, "actor", Modules.User) as UserInterface;
+    const rels = (data.jsonApi.relationships ?? {}) as Record<string, { data?: { type: string; id: string } }>;
+
+    const actorType = rels.actor?.data?.type;
+    this._actor = actorType
+      ? (this._readIncluded(data, "actor", Modules.findByName(actorType)) as ApiDataInterface)
+      : undefined;
+
+    const subjectName = Object.keys(rels).find((name) => name !== "actor" && rels[name]?.data?.type);
+    const subjectType = subjectName ? rels[subjectName]?.data?.type : undefined;
+    this._subject =
+      subjectName && subjectType
+        ? (this._readIncluded(data, subjectName, Modules.findByName(subjectType)) as ApiDataInterface)
+        : undefined;
 
     return this;
   }

package/src/shadcnui/ui/badge.tsx

@@ -17,6 +17,18 @@ const badgeVariants = cva(
           "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/20 dark:bg-input/30",
         ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
         link: "text-primary underline-offset-4 hover:underline",
+        warning: "bg-warning text-warning-foreground [a]:hover:bg-warning/80",
+        blue: "bg-sky-500 text-primary-foreground [a]:hover:bg-sky-500/80",
+        green: "bg-emerald-500 text-primary-foreground [a]:hover:bg-emerald-500/80",
+        red: "bg-red-500 text-primary-foreground [a]:hover:bg-red-500/80",
+        yellow: "bg-yellow-500 text-primary-foreground [a]:hover:bg-yellow-500/80",
+        purple: "bg-purple-500 text-primary-foreground [a]:hover:bg-purple-500/80",
+        pink: "bg-pink-500 text-primary-foreground [a]:hover:bg-pink-500/80",
+        gray: "bg-gray-500 text-primary-foreground [a]:hover:bg-gray-500/80",
+        orange: "bg-orange-500 text-primary-foreground [a]:hover:bg-orange-500/80",
+        teal: "bg-teal-500 text-primary-foreground [a]:hover:bg-teal-500/80",
+        lime: "bg-lime-500 text-primary-foreground [a]:hover:bg-lime-500/80",
+        none: "border-input bg-transparent text-muted-foreground min-w-20 min-h-5",
       },
     },
     defaultVariants: {
@@ -47,4 +59,7 @@ function Badge({
   });
 }
 
+type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>;
+
 export { Badge, badgeVariants };
+export type { BadgeProps };