nexstruct 1.0.0

package/templates/ui/mui/src/components/common/fields/assets/interface/input-props.type.ts

@@ -0,0 +1,193 @@
+export interface TextInputProps {
+  form?: any;
+  name?: string;
+  placeholder?: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  disableLabelFormatting?: boolean;
+  customMessage?: React.ReactNode;
+  isArray?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  value?: string;
+  setValue?: (value: string) => void;
+}
+
+export interface TextAreaInputProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  rows?: number;
+  disableLabelFormatting?: boolean;
+  customMessage?: React.ReactNode;
+  value?: string;
+  setValue?: (value: string) => void;
+}
+
+export interface NumberInputProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  disableLabelFormatting?: boolean;
+  numberType?: 'float' | 'integer';
+  customMessage?: React.ReactNode;
+}
+
+export interface PasswordInputProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  disableLabelFormatting?: boolean;
+  mode?: 'normal' | 'validate';
+  customMessage?: React.ReactNode;
+}
+
+export interface SingleSelectProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  options?: string[];
+  viewOnly?: boolean;
+  isLoading?: boolean;
+  defaultValue?: any;
+  onValueChange?: (value: any) => void;
+  disableLabelFormatting?: boolean;
+  customMessage?: string;
+}
+
+export interface SelectFieldProps {
+  form: any;
+  name: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  options?: { value: string; label: string; image?: string; flag?: string; disabled?: boolean }[] | string[];
+  placeholder?: string;
+  showSearch?: boolean;
+  type?: 'single' | 'multiple';
+  viewOnly?: boolean;
+  onValueChange?: (value: string | string[]) => void;
+  isLoading?: boolean;
+  onSearch?: (query: string) => void;
+  customMessage?: string;
+}
+
+export interface SwitchProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  disableLabelFormatting?: boolean;
+  customMessage?: React.ReactNode;
+  description?: string;
+  border?: boolean;
+  value?: boolean;
+  setValue?: (value: boolean) => void;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export interface CheckboxProps {
+  form?: any;
+  name: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  options?: { label: string; value: string }[];
+}
+
+export interface RadioProps {
+  form?: any;
+  name: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  options?: { label: string; value: string }[];
+}
+
+export interface DatePickerProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  disableLabelFormatting?: boolean;
+  customMessage?: string;
+}
+
+export interface PhoneNumberProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  disableLabelFormatting?: boolean;
+  customMessage?: string;
+  onValueChange?: (value: string) => void;
+  hasPhone?: boolean;
+}
+
+export interface SearchFieldProps {
+  form?: any;
+  name?: string;
+  placeholder?: string;
+  onSearch?: (value: string) => void;
+  value?: string;
+  setValue?: (value: string) => void;
+}
+
+export interface InputInterface {
+  Text: TextInputProps;
+  TextArea: TextAreaInputProps;
+  Number: NumberInputProps;
+  Password: PasswordInputProps;
+  SingleSelect: SingleSelectProps;
+  PhoneNumber: PhoneNumberProps;
+  Switch: SwitchProps;
+  DatePicker: DatePickerProps;
+  Search: SearchFieldProps;
+}
+
+export interface FieldPropsInterface {
+  form?: any;
+  name: string;
+  placeholder?: string;
+  labelName?: string;
+  description?: string;
+  border?: boolean;
+  options?: string[];
+  required?: boolean;
+  disabled?: boolean;
+  isArray?: boolean;
+  defaultValue?: any;
+  viewOnly?: boolean;
+  rows?: number;
+  disableLabelFormatting?: boolean;
+  maxLength?: number;
+  suffix?: string;
+  mode?: 'normal' | 'validate';
+  customMessage?: React.ReactNode;
+  onValueChange?: (value: any) => void;
+  isLoading?: boolean;
+}

package/templates/ui/mui/src/components/common/fields/cusInputField.component.tsx

@@ -0,0 +1,34 @@
+import { Text } from './assets/components/text-field.component';
+import { TextArea } from './assets/components/text-area-field.component';
+import { Number } from './assets/components/number-field.component';
+import { StringNumber } from './assets/components/string-number-field.component';
+import { Password } from './assets/components/password-field.component';
+import { SingleSelectField } from './assets/components/single-select-field.component';
+import { SelectField } from './assets/components/select-field.component';
+import { SwitchField } from './assets/components/switch-field.component';
+import { RadioField } from './assets/components/radio-field.component';
+import { CheckField } from './assets/components/check-field.component';
+import { MultiCheckField } from './assets/components/multi-check-field.component';
+import { SingleCheckField } from './assets/components/single-check-field.component';
+import { SearchField } from './assets/components/search-field.component';
+import { DatePickerField } from './assets/components/date-picker-field.component';
+import { PhoneNumber } from './assets/components/phone-number-field.component';
+
+export const CustomField = {
+  Text,
+  TextArea,
+  Number,
+  StringNumber,
+  Password,
+  SingleSelectField,
+  SelectField,
+  SwitchField,
+  RadioField,
+  CheckField,
+  MultiCheckField,
+  SingleCheckField,
+  SearchField,
+  CommonSearch: SearchField,
+  DatePickerField,
+  PhoneNumber,
+};

package/templates/ui/mui/src/components/common/pagination/pagination.component.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import Button from '@mui/material/Button';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  setCurrentPage: (page: number) => void;
+}
+
+export function Pagination({ currentPage, totalPages, setCurrentPage }: PaginationProps) {
+  if (totalPages <= 1) return null;
+
+  const getPageNumbers = () => {
+    const pages: (number | 'ellipsis')[] = [];
+    const delta = 2;
+    const left = Math.max(2, currentPage - delta);
+    const right = Math.min(totalPages - 1, currentPage + delta);
+    pages.push(1);
+    if (left > 2) pages.push('ellipsis');
+    for (let i = left; i <= right; i++) pages.push(i);
+    if (right < totalPages - 1) pages.push('ellipsis');
+    if (totalPages > 1) pages.push(totalPages);
+    return pages;
+  };
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.5 }}>
+      <IconButton size="small" disabled={currentPage <= 1} onClick={() => setCurrentPage(currentPage - 1)}>
+        <ChevronLeftIcon />
+      </IconButton>
+      {getPageNumbers().map((page, idx) =>
+        page === 'ellipsis' ? (
+          <Typography key={`ellipsis-${idx}`} variant="body2" color="text.secondary" sx={{ px: 1 }}>
+            ...
+          </Typography>
+        ) : (
+          <Button
+            key={page}
+            size="small"
+            variant={currentPage === page ? 'contained' : 'outlined'}
+            onClick={() => setCurrentPage(page)}
+            sx={{ minWidth: 36, height: 36 }}
+          >
+            {page}
+          </Button>
+        )
+      )}
+      <IconButton size="small" disabled={currentPage >= totalPages} onClick={() => setCurrentPage(currentPage + 1)}>
+        <ChevronRightIcon />
+      </IconButton>
+    </Box>
+  );
+}

package/templates/ui/mui/src/components/ui/avatar.component.tsx

@@ -0,0 +1,19 @@
+'use client';
+import MuiAvatar, { AvatarProps as MuiAvatarProps } from '@mui/material/Avatar';
+import MuiAvatarGroup from '@mui/material/AvatarGroup';
+import { styled } from '@mui/material/styles';
+
+const StyledAvatar = styled(MuiAvatar)(({ theme }) => ({
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+}));
+
+export type AvatarProps = MuiAvatarProps;
+
+export function Avatar(props: AvatarProps) {
+  return <StyledAvatar {...props} />;
+}
+
+export const AvatarImage = MuiAvatar;
+export const AvatarFallback = MuiAvatar;
+export const AvatarGroup = MuiAvatarGroup;

package/templates/ui/mui/src/components/ui/badge.component.tsx

@@ -0,0 +1,18 @@
+'use client';
+import MuiChip, { ChipProps as MuiChipProps } from '@mui/material/Chip';
+import { styled } from '@mui/material/styles';
+
+const StyledBadge = styled(MuiChip)(({ theme }) => ({
+  fontWeight: 600,
+  fontSize: '0.75rem',
+  height: 24,
+  '& .MuiChip-label': {
+    padding: '0 8px',
+  },
+}));
+
+export type BadgeProps = MuiChipProps;
+
+export function Badge(props: BadgeProps) {
+  return <StyledBadge size="small" {...props} />;
+}

package/templates/ui/mui/src/components/ui/button.component.tsx

@@ -0,0 +1,22 @@
+'use client';
+import { forwardRef } from 'react';
+import MuiButton, { ButtonProps as MuiButtonProps } from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export type ButtonProps = MuiButtonProps & {
+  isLoading?: boolean;
+};
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, isLoading, disabled, ...props }, ref) => {
+    return (
+      <MuiButton ref={ref} disabled={isLoading || disabled} {...props}>
+        {isLoading ? <CircularProgress size={18} color="inherit" sx={{ mr: 1 }} /> : null}
+        {children}
+      </MuiButton>
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button };

package/templates/ui/mui/src/components/ui/card.component.tsx

@@ -0,0 +1,39 @@
+'use client';
+import MuiCard, { CardProps as MuiCardProps } from '@mui/material/Card';
+import MuiCardContent from '@mui/material/CardContent';
+import MuiCardActions from '@mui/material/CardActions';
+import MuiCardHeader from '@mui/material/CardHeader';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+
+const StyledCard = styled(MuiCard)(({ theme }) => ({
+  borderRadius: theme.shape.borderRadius,
+}));
+
+export type CardProps = MuiCardProps;
+
+export function Card(props: CardProps) {
+  return <StyledCard {...props} />;
+}
+
+export const CardContent = MuiCardContent;
+export const CardActions = MuiCardActions;
+export const CardHeader = MuiCardHeader;
+
+export function CardTitle({ children, ...props }: { children: React.ReactNode } & React.ComponentPropsWithoutRef<typeof Typography>) {
+  return (
+    <Typography variant="h5" fontWeight={600} {...props}>
+      {children}
+    </Typography>
+  );
+}
+
+export function CardDescription({ children, ...props }: { children: React.ReactNode } & React.ComponentPropsWithoutRef<typeof Typography>) {
+  return (
+    <Typography variant="body2" color="text.secondary" {...props}>
+      {children}
+    </Typography>
+  );
+}
+
+export const CardFooter = MuiCardActions;

package/templates/ui/mui/src/components/ui/checkbox.component.tsx

@@ -0,0 +1,21 @@
+'use client';
+import MuiCheckbox, { CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { styled } from '@mui/material/styles';
+
+const StyledCheckbox = styled(MuiCheckbox)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  '&.Mui-checked': {
+    color: theme.palette.primary.main,
+  },
+}));
+
+export type CheckboxProps = MuiCheckboxProps;
+
+export function Checkbox(props: CheckboxProps) {
+  return <StyledCheckbox {...props} />;
+}
+
+export function CheckboxLabel({ label, ...props }: CheckboxProps & { label?: React.ReactNode }) {
+  return <FormControlLabel control={<Checkbox {...props} />} label={label} />;
+}

package/templates/ui/mui/src/components/ui/dialog.component.tsx

@@ -0,0 +1,38 @@
+'use client';
+import MuiDialog, { DialogProps as MuiDialogProps } from '@mui/material/Dialog';
+import MuiDialogTitle from '@mui/material/DialogTitle';
+import MuiDialogContent from '@mui/material/DialogContent';
+import MuiDialogActions from '@mui/material/DialogActions';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { styled } from '@mui/material/styles';
+
+const StyledDialog = styled(MuiDialog)(({ theme }) => ({
+  '& .MuiDialog-paper': {
+    borderRadius: theme.shape.borderRadius,
+  },
+}));
+
+export type DialogProps = MuiDialogProps;
+
+export function Dialog({ children, ...props }: DialogProps) {
+  return <StyledDialog {...props}>{children}</StyledDialog>;
+}
+
+export const DialogTitle = MuiDialogTitle;
+export const DialogContent = MuiDialogContent;
+export const DialogActions = MuiDialogActions;
+
+export function DialogClose({ onClick }: { onClick?: () => void }) {
+  return (
+    <IconButton
+      onClick={onClick}
+      sx={{
+        position: 'absolute', right: 8, top: 8,
+        color: 'text.secondary',
+      }}
+    >
+      <CloseIcon />
+    </IconButton>
+  );
+}

package/templates/ui/mui/src/components/ui/dropdown-menu.component.tsx

@@ -0,0 +1,43 @@
+'use client';
+import MuiMenu, { MenuProps as MuiMenuProps } from '@mui/material/Menu';
+import MuiMenuItem from '@mui/material/MenuItem';
+import MuiListSubheader from '@mui/material/ListSubheader';
+import Divider from '@mui/material/Divider';
+import { styled } from '@mui/material/styles';
+
+const StyledMenu = styled(MuiMenu)(({ theme }) => ({
+  '& .MuiPaper-root': {
+    borderRadius: theme.shape.borderRadius,
+    minWidth: 180,
+  },
+}));
+
+const StyledMenuItem = styled(MuiMenuItem)(({ theme }) => ({
+  fontSize: '0.875rem',
+  '&:hover': {
+    backgroundColor: theme.palette.action.hover,
+  },
+}));
+
+export type DropdownMenuProps = MuiMenuProps;
+
+export function DropdownMenu(props: DropdownMenuProps) {
+  return <StyledMenu {...props} />;
+}
+
+export const DropdownMenuTrigger = ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => <>{children}</>;
+export const DropdownMenuContent = StyledMenu;
+export const DropdownMenuItem = StyledMenuItem;
+export const DropdownMenuLabel = MuiListSubheader;
+export const DropdownMenuSeparator = Divider;
+export const DropdownMenuGroup = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+export const DropdownMenuCheckboxItem = StyledMenuItem;
+export const DropdownMenuRadioItem = StyledMenuItem;
+export const DropdownMenuRadioGroup = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+export const DropdownMenuSub = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+export const DropdownMenuSubContent = StyledMenu;
+export const DropdownMenuSubTrigger = StyledMenuItem;
+export const DropdownMenuPortal = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+export const DropdownMenuShortcut = ({ children }: { children: React.ReactNode }) => (
+  <span style={{ marginLeft: 'auto', fontSize: '0.75rem', opacity: 0.6 }}>{children}</span>
+);

package/templates/ui/mui/src/components/ui/form.component.tsx

@@ -0,0 +1,98 @@
+'use client';
+import React from 'react';
+import {
+  Controller, type ControllerProps, type FieldPath, type FieldValues,
+  FormProvider, useFormContext,
+} from 'react-hook-form';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = { name: TName };
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(
+  props: ControllerProps<TFieldValues, TName>
+) => (
+  <FormFieldContext.Provider value={{ name: props.name }}>
+    <Controller {...props} />
+  </FormFieldContext.Provider>
+);
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  if (!fieldContext) throw new Error('useFormField should be used within <FormField>');
+  const formContext = useFormContext();
+  const fieldState = formContext
+    ? formContext.getFieldState(fieldContext.name, formContext.formState)
+    : { invalid: false, isDirty: false, isTouched: false, error: undefined };
+  const { id } = itemContext;
+  return {
+    id, name: fieldContext.name, formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`, ...fieldState,
+  };
+};
+
+type FormItemContextValue = { id: string };
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ ...props }, ref) => {
+    const id = React.useId();
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} style={{ marginBottom: 16 }} {...props} />
+      </FormItemContext.Provider>
+    );
+  }
+);
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ ...props }, ref) => {
+    const { error, formItemId } = useFormField();
+    return <label ref={ref} htmlFor={formItemId} style={{ fontWeight: 500, fontSize: '0.875rem', color: error ? '#d32f2f' : undefined, display: 'block', marginBottom: 4 }} {...props} />;
+  }
+);
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (
+      <div
+        ref={ref}
+        id={formItemId}
+        aria-describedby={!error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`}
+        aria-invalid={!!error}
+        {...props}
+      />
+    );
+  }
+);
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+    return <p ref={ref} id={formDescriptionId} style={{ fontSize: '0.75rem', color: 'text.secondary', marginTop: 4 }} {...props} />;
+  }
+);
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message) : children;
+    if (!body) return null;
+    return (
+      <p ref={ref} id={formMessageId} style={{ fontSize: '0.75rem', color: '#d32f2f', marginTop: 4, fontWeight: 500 }} {...props}>
+        {body}
+      </p>
+    );
+  }
+);
+FormMessage.displayName = 'FormMessage';
+
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/templates/ui/mui/src/components/ui/input.component.tsx

@@ -0,0 +1,15 @@
+'use client';
+import MuiTextField, { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
+import { styled } from '@mui/material/styles';
+
+const StyledTextField = styled(MuiTextField)(({ theme }) => ({
+  '& .MuiOutlinedInput-root': {
+    borderRadius: theme.shape.borderRadius,
+  },
+}));
+
+export type InputProps = MuiTextFieldProps;
+
+export function Input(props: InputProps) {
+  return <StyledTextField variant="outlined" fullWidth {...props} />;
+}

package/templates/ui/mui/src/components/ui/label.component.tsx

@@ -0,0 +1,15 @@
+'use client';
+import MuiFormLabel, { FormLabelProps as MuiFormLabelProps } from '@mui/material/FormLabel';
+import { styled } from '@mui/material/styles';
+
+const StyledLabel = styled(MuiFormLabel)(({ theme }) => ({
+  fontWeight: 500,
+  fontSize: '0.875rem',
+  marginBottom: theme.spacing(0.5),
+}));
+
+export type LabelProps = MuiFormLabelProps;
+
+export function Label(props: LabelProps) {
+  return <StyledLabel {...props} />;
+}

package/templates/ui/mui/src/components/ui/popover.component.tsx

@@ -0,0 +1,20 @@
+'use client';
+import MuiPopover, { PopoverProps as MuiPopoverProps } from '@mui/material/Popover';
+import { styled } from '@mui/material/styles';
+
+const StyledPopover = styled(MuiPopover)(({ theme }) => ({
+  '& .MuiPopover-paper': {
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(2),
+    marginTop: 4,
+  },
+}));
+
+export type PopoverProps = MuiPopoverProps;
+
+export function Popover(props: PopoverProps) {
+  return <StyledPopover {...props} />;
+}
+
+export const PopoverTrigger = ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => <>{children}</>;
+export const PopoverContent = StyledPopover;

package/templates/ui/mui/src/components/ui/progress.component.tsx

@@ -0,0 +1,19 @@
+'use client';
+import MuiLinearProgress, { LinearProgressProps as MuiLinearProgressProps } from '@mui/material/LinearProgress';
+import { styled } from '@mui/material/styles';
+
+const StyledProgress = styled(MuiLinearProgress)(({ theme }) => ({
+  backgroundColor: theme.palette.action.hover,
+  borderRadius: theme.shape.borderRadius,
+  height: 8,
+  '& .MuiLinearProgress-bar': {
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: theme.palette.primary.main,
+  },
+}));
+
+export type ProgressProps = MuiLinearProgressProps;
+
+export function Progress(props: ProgressProps) {
+  return <StyledProgress {...props} />;
+}