feat: adjust components for rapor

.changeset/shaggy-mice-sin.md

@@ -0,0 +1,12 @@
+---
+"@ppdbultimate/elysium": patch
+---
+
+Adjust component for rapor
+
+### Features
+- Add `ErrorMessage` component
+- Move total property on `StatisticsSummaryCard`
+- Export `FieldErrors` from react-hook-form
+- Export type `File` for forms
+- Add isFixed props on `Select`

packages/ui/src/components/error-message.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { get, useFormState } from 'react-hook-form';
+import cn from '@/lib/classnames';
+
+export type ErrorMessageProps = {
+  id: string;
+} & React.ComponentPropsWithoutRef<'p'>;
+
+const ErrorMessage = ({ id, className, ...rest }: ErrorMessageProps) => {
+  const { errors } = useFormState();
+  const error = get(errors, id);
+
+  return (
+    <p className={cn('text-sm text-red-500', className)} {...rest}>
+      {error?.message?.toString()}
+    </p>
+  );
+};
+ErrorMessage.displayName = 'ErrorMessage';
+
+export { ErrorMessage };

packages/ui/src/components/select.tsx

@@ -13,6 +13,7 @@ export type SelectProps = {
   placeholder?: React.ReactNode;
   helperText?: string;
   type?: string;
+  isFixed?: boolean;
   isMulti?: boolean;
   readOnly?: boolean;
   hideError?: boolean;
@@ -28,6 +29,7 @@ const Select = ({
   label,
   helperText,
   id,
+  isFixed = false,
   isMulti = false,
   placeholder,
   validation,
@@ -145,6 +147,10 @@ const Select = ({
       borderRadius: '0.5rem',
       overflow: 'hidden',
     }),
+    menuPortal: (styles) => ({
+      ...styles,
+      zIndex: 1,
+    }),
   };
 
   //#endregion  //*======== Styles ===========
@@ -199,6 +205,7 @@ const Select = ({
                 isClearable
                 isDisabled={disabled || readOnly}
                 isMulti={isMulti}
+                menuPosition={isFixed ? 'fixed' : undefined}
                 onChange={(selectedOptions) => {
                   isMulti
                     ? field.onChange(

packages/ui/src/components/statistics-summary-card.tsx

@@ -14,10 +14,10 @@ export type StatisticsSummaryCardProps = {
     label: string;
     /** partial value to calculate getPercentage from  */
     value: number;
+    total: number;
     /** representation data in a color  */
     color: string;
   }[];
-  total: number;
   isLoading?: boolean;
   includePercentage?: boolean;
   includeTotal?: boolean;
@@ -28,7 +28,6 @@ const StatisticsSummaryCard = ({
   title,
   unit,
   data,
-  total,
   isLoading,
   includePercentage = false,
   includeTotal = false,
@@ -53,7 +52,7 @@ const StatisticsSummaryCard = ({
               includePercentage={includePercentage}
               includeTotal={includeTotal}
               key={item.id}
-              total={total}
+              total={item.total}
               unit={unit}
             />
           ))

packages/ui/src/index.tsx

@@ -67,6 +67,10 @@ export {
   DropzoneInput,
   type DropzoneInputProps,
 } from '@/components/dropzone-input';
+export {
+  ErrorMessage,
+  type ErrorMessageProps,
+} from '@/components/error-message';
 export { FilePreview, type FilePreviewProps } from '@/components/file-preview';
 export { FormMessage, type FormMessageProps } from '@/components/form-message';
 export { Form, type FormProps } from '@/components/form';
@@ -200,6 +204,7 @@ export type * from '@/types/helper';
 
 export {
   Controller,
+  type FieldErrors,
   FormProvider,
   type SubmitHandler,
   useController,

packages/ui/src/types/dropzone.ts

@@ -1,3 +1,6 @@
 import type { FileWithPath } from 'react-dropzone';
 
 export type FileWithPreview = FileWithPath & { preview: string };
+
+// Used for react hook form field type
+export type File = string | { preview: string; name: string; type: string }[];