nexstruct 1.0.0

package/templates/ui/mui/src/components/ui/radio-group.component.tsx

@@ -0,0 +1,25 @@
+'use client';
+import MuiRadioGroup, { RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';
+import MuiRadio from '@mui/material/Radio';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+import { styled } from '@mui/material/styles';
+
+const StyledRadio = styled(MuiRadio)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  '&.Mui-checked': {
+    color: theme.palette.primary.main,
+  },
+}));
+
+export type RadioGroupProps = MuiRadioGroupProps;
+
+export function RadioGroup(props: RadioGroupProps) {
+  return <MuiRadioGroup {...props} />;
+}
+
+export const RadioGroupItem = StyledRadio;
+
+export function RadioItem({ label, ...props }: { label?: React.ReactNode; value: string }) {
+  return <FormControlLabel control={<StyledRadio {...props} />} label={label} />;
+}

package/templates/ui/mui/src/components/ui/scroll-area.component.tsx

@@ -0,0 +1,27 @@
+'use client';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+
+const ScrollAreaRoot = styled(Box)({
+  overflow: 'auto',
+  position: 'relative',
+  '&::-webkit-scrollbar': {
+    width: 8,
+    height: 8,
+  },
+  '&::-webkit-scrollbar-track': {
+    backgroundColor: 'transparent',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    borderRadius: 4,
+  },
+});
+
+export type ScrollAreaProps = { children: React.ReactNode; className?: string };
+
+export function ScrollArea({ children, ...props }: ScrollAreaProps) {
+  return <ScrollAreaRoot {...props}>{children}</ScrollAreaRoot>;
+}
+
+export const ScrollBar = Box;

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

@@ -0,0 +1,26 @@
+'use client';
+import MuiSelect, { SelectProps as MuiSelectProps } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import { styled } from '@mui/material/styles';
+
+const StyledSelect = styled(MuiSelect)(({ theme }) => ({
+  borderRadius: theme.shape.borderRadius,
+  '& .MuiOutlinedInput-notchedOutline': {
+    borderRadius: theme.shape.borderRadius,
+  },
+}));
+
+export type SelectProps = MuiSelectProps;
+
+export function Select(props: SelectProps) {
+  return <StyledSelect {...props} />;
+}
+
+export const SelectItem = MenuItem;
+export const SelectGroup = FormControl;
+export const SelectLabel = InputLabel;
+export const SelectValue = MuiSelect;
+export const SelectTrigger = StyledSelect;
+export const SelectContent = ({ children, ...props }: { children: React.ReactNode } & Record<string, any>) => <>{children}</>;

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

@@ -0,0 +1,11 @@
+'use client';
+import Divider from '@mui/material/Divider';
+
+export type SeparatorProps = {
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+};
+
+export function Separator({ orientation = 'horizontal', ...props }: SeparatorProps) {
+  return <Divider orientation={orientation === 'vertical' ? 'vertical' : 'horizontal'} {...props} />;
+}

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

@@ -0,0 +1,44 @@
+'use client';
+import MuiDrawer, { DrawerProps as MuiDrawerProps } from '@mui/material/Drawer';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+
+const StyledSheet = styled(MuiDrawer)(({ theme }) => ({
+  '& .MuiDrawer-paper': {
+    borderRadius: 0,
+  },
+}));
+
+export type SheetProps = MuiDrawerProps;
+
+export function Sheet(props: SheetProps) {
+  return <StyledSheet {...props} />;
+}
+
+export const SheetTrigger = ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => <>{children}</>;
+export const SheetClose = CloseIcon;
+export const SheetPortal = Box;
+
+export function SheetContent({ children, onClose, title, ...props }: SheetProps & { title?: string }) {
+  return (
+    <StyledSheet {...props} onClose={onClose}>
+      <Box sx={{ p: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: 1, borderColor: 'divider' }}>
+        {title && <Typography variant="h6">{title}</Typography>}
+        {onClose && (
+          <IconButton onClick={() => onClose({}, 'escapeKeyDown')}>
+            <CloseIcon />
+          </IconButton>
+        )}
+      </Box>
+      <Box sx={{ p: 2 }}>{children}</Box>
+    </StyledSheet>
+  );
+}
+
+export const SheetHeader = Box;
+export const SheetFooter = Box;
+export const SheetTitle = Typography;
+export const SheetDescription = Typography;

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

@@ -0,0 +1,23 @@
+'use client';
+import MuiSwitch, { SwitchProps as MuiSwitchProps } from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { styled } from '@mui/material/styles';
+
+const StyledSwitch = styled(MuiSwitch)(({ theme }) => ({
+  '& .MuiSwitch-switchBase.Mui-checked': {
+    color: theme.palette.primary.main,
+  },
+  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+    backgroundColor: theme.palette.primary.main,
+  },
+}));
+
+export type SwitchProps = MuiSwitchProps;
+
+export function Switch(props: SwitchProps) {
+  return <StyledSwitch {...props} />;
+}
+
+export function SwitchLabel({ label, ...props }: SwitchProps & { label?: React.ReactNode }) {
+  return <FormControlLabel control={<Switch {...props} />} label={label} />;
+}

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

@@ -0,0 +1,34 @@
+'use client';
+import MuiTable, { TableProps as MuiTableProps } from '@mui/material/Table';
+import MuiTableBody from '@mui/material/TableBody';
+import MuiTableCell from '@mui/material/TableCell';
+import MuiTableContainer from '@mui/material/TableContainer';
+import MuiTableHead from '@mui/material/TableHead';
+import MuiTableRow from '@mui/material/TableRow';
+import MuiTableFooter from '@mui/material/TableFooter';
+import MuiTablePagination from '@mui/material/TablePagination';
+import Paper from '@mui/material/Paper';
+import { styled } from '@mui/material/styles';
+
+const StyledTableContainer = styled(MuiTableContainer)(({ theme }) => ({
+  borderRadius: theme.shape.borderRadius,
+  border: `1px solid ${theme.palette.divider}`,
+}));
+
+export type TableProps = MuiTableProps;
+
+export function Table({ children, ...props }: TableProps) {
+  return (
+    <StyledTableContainer component={Paper}>
+      <MuiTable {...props}>{children}</MuiTable>
+    </StyledTableContainer>
+  );
+}
+
+export const TableHeader = MuiTableHead;
+export const TableBody = MuiTableBody;
+export const TableFooter = MuiTableFooter;
+export const TableRow = MuiTableRow;
+export const TableHead = MuiTableCell;
+export const TableCell = MuiTableCell;
+export const TableCaption = MuiTablePagination;

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

@@ -0,0 +1,38 @@
+'use client';
+import MuiTabs, { TabsProps as MuiTabsProps } from '@mui/material/Tabs';
+import MuiTab, { TabProps as MuiTabProps } from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+
+const StyledTabs = styled(MuiTabs)(({ theme }) => ({
+  '& .MuiTabs-indicator': {
+    backgroundColor: theme.palette.primary.main,
+  },
+}));
+
+const StyledTab = styled(MuiTab)(({ theme }) => ({
+  textTransform: 'none',
+  fontWeight: 500,
+  borderRadius: theme.shape.borderRadius,
+  '&.Mui-selected': {
+    color: theme.palette.primary.main,
+  },
+}));
+
+export type TabsProps = MuiTabsProps;
+export type TabProps = MuiTabProps;
+
+export function Tabs(props: TabsProps) {
+  return <StyledTabs {...props} />;
+}
+
+export const TabsList = StyledTabs;
+export const TabsTrigger = StyledTab;
+
+export function TabsContent({ children, value, ...props }: { children: React.ReactNode; value: any } & Record<string, any>) {
+  return (
+    <Box role="tabpanel" {...props}>
+      {children}
+    </Box>
+  );
+}

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

@@ -0,0 +1,18 @@
+'use client';
+import MuiTextField, { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
+import { styled } from '@mui/material/styles';
+
+const StyledTextarea = styled(MuiTextField)(({ theme }) => ({
+  '& .MuiOutlinedInput-root': {
+    borderRadius: theme.shape.borderRadius,
+  },
+  '& textarea': {
+    minHeight: 80,
+  },
+}));
+
+export type TextareaProps = MuiTextFieldProps;
+
+export function Textarea(props: TextareaProps) {
+  return <StyledTextarea variant="outlined" fullWidth multiline {...props} />;
+}

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

@@ -0,0 +1,24 @@
+'use client';
+import MuiTooltip, { TooltipProps as MuiTooltipProps } from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
+
+const StyledTooltip = styled(MuiTooltip)({
+  '& .MuiTooltip-tooltip': {
+    fontSize: '0.75rem',
+    padding: '6px 12px',
+  },
+});
+
+export type TooltipProps = MuiTooltipProps;
+export type TooltipProviderProps = { children: React.ReactNode };
+
+export function TooltipProvider({ children }: TooltipProviderProps) {
+  return <>{children}</>;
+}
+
+export function Tooltip(props: TooltipProps) {
+  return <StyledTooltip {...props} />;
+}
+
+export const TooltipTrigger = ({ children, ...props }: { children: React.ReactElement } & Record<string, any>) => children;
+export const TooltipContent = MuiTooltip;

package/templates/ui/mui/src/lib/theme.util.ts

@@ -0,0 +1,73 @@
+'use client';
+import { createTheme } from '@mui/material/styles';
+
+export const theme = createTheme({
+  colorSchemes: {
+    light: {
+      palette: {
+        primary: { main: '#2563eb' },
+        secondary: { main: '#64748b' },
+        error: { main: '#dc2626' },
+        warning: { main: '#f59e0b' },
+        success: { main: '#16a34a' },
+        info: { main: '#0ea5e9' },
+      },
+    },
+    dark: {
+      palette: {
+        primary: { main: '#60a5fa' },
+        secondary: { main: '#94a3b8' },
+        error: { main: '#f87171' },
+        warning: { main: '#fbbf24' },
+        success: { main: '#4ade80' },
+        info: { main: '#38bdf8' },
+      },
+    },
+  },
+  shape: { borderRadius: 8 },
+  typography: {
+    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          borderRadius: 8,
+          fontWeight: 500,
+        },
+      },
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            borderRadius: 8,
+          },
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+        },
+      },
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: 8,
+        },
+      },
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          fontWeight: 600,
+          fontSize: '0.75rem',
+        },
+      },
+    },
+  },
+});

package/templates/ui/mui/src/providers/mui.provider.tsx

@@ -0,0 +1,13 @@
+'use client';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { theme } from '@/lib/theme.util';
+
+export function MuiProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+}

package/templates/ui/shadcn/COMPONENT_GUIDE.md

@@ -0,0 +1,306 @@
+# Custom Component System — Usage Guide
+
+This project includes a reusable, dynamic component system built on shadcn/ui + react-hook-form + zod. Every component follows a **dual-mode** pattern: works with or without react-hook-form.
+
+---
+
+## 1. CustomField — Dynamic Form Fields
+
+A compound object (`CustomField.*`) that registers all field types. Each field auto-wraps in shadcn `<FormField>` when given a `form` prop, or renders standalone with `value`/`setValue`.
+
+### Available Fields
+
+| Component | Usage |
+|-----------|-------|
+| `CustomField.Text` | Single-line text with optional left/right icons, array input |
+| `CustomField.TextArea` | Multi-line text with configurable rows |
+| `CustomField.Number` | Number input (integer/float) |
+| `CustomField.StringNumber` | Numeric string (digits only, e.g. roll number, PIN) |
+| `CustomField.Password` | Password with show/hide toggle |
+| `CustomField.SingleSelectField` | Single-select dropdown (wraps shadcn Select) |
+| `CustomField.SelectField` | Advanced select with search, single/multiple, images, flags |
+| `CustomField.Switch` | Toggle switch with optional border/label/description |
+| `CustomField.RadioField` | Radio group from options array |
+| `CustomField.CheckField` | Multi-checkbox group from options array |
+| `CustomField.MultiCheckField` | Alternative multi-checkbox (same as CheckField) |
+| `CustomField.SingleCheckField` | Single checkbox with optional description |
+| `CustomField.SearchField` | Search input with clear button |
+| `CustomField.DatePickerField` | Native date picker input |
+| `CustomField.PhoneNumber` | Telephone input (`type="tel"`) |
+
+### Shared Props (all fields)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `form` | `UseFormReturn` | — | react-hook-form instance (omit for standalone) |
+| `name` | `string` | — | Field name in form schema |
+| `labelName` | `string` | — | Visible label text |
+| `required` | `boolean` | `false` | Shows red asterisk |
+| `disabled` | `boolean` | `false` | Disables input |
+| `viewOnly` | `boolean` | `false` | Renders plain text instead of input |
+| `disableLabelFormatting` | `boolean` | `false` | Skip auto-formatting of label text |
+| `customMessage` | `string\|ReactNode` | — | Custom message below field |
+| `placeholder` | `string` | — | Placeholder text |
+
+### With react-hook-form (controlled)
+
+```tsx
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Form } from '@/components/ui/form.component';
+import { CustomField } from '@/components/common/fields/cusInputField.component';
+
+const schema = z.object({
+  name: z.string().min(1, 'Required'),
+  email: z.string().email('Invalid email'),
+  role: z.string().min(1),
+});
+
+export function UserForm() {
+  const form = useForm({ resolver: zodResolver(schema) });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(console.log)} className="space-y-4">
+        <CustomField.Text form={form} name="name" labelName="Full Name" required />
+        <CustomField.Text
+          form={form}
+          name="email"
+          labelName="Email"
+          placeholder="Enter email"
+          leftIcon={<MailIcon />}
+        />
+        <CustomField.SingleSelectField
+          form={form}
+          name="role"
+          labelName="Role"
+          options={['admin', 'user', 'editor']}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  );
+}
+```
+
+### Standalone (uncontrolled)
+
+```tsx
+const [email, setEmail] = useState('');
+
+<CustomField.Text
+  name="email"
+  labelName="Email"
+  value={email}
+  setValue={setEmail}
+  placeholder="Enter email"
+/>
+```
+
+---
+
+## 2. DynamicTable — Config-Driven Table
+
+Renders a table from a `columns` config array, with loading/empty states, optional checkboxes, and expandable rows.
+
+```tsx
+import { DynamicTable } from '@/components/common/DynamicTable/dynamic-table.component';
+
+const columns = [
+  { key: 'name', header: 'Name' },
+  { key: 'email', header: 'Email' },
+  {
+    key: 'status',
+    header: 'Status',
+    render: (row) => (
+      <Badge variant={row.active ? 'default' : 'secondary'}>
+        {row.active ? 'Active' : 'Inactive'}
+      </Badge>
+    ),
+  },
+  {
+    key: 'actions',
+    header: '',
+    render: (row) => (
+      <ActionButton
+        variant="outline"
+        buttonContent="Edit"
+        handleOpen={() => handleEdit(row)}
+      />
+    ),
+  },
+];
+
+<DynamicTable
+  data={users}
+  isLoading={loading}
+  currentPage={page}
+  setCurrentPage={setPage}
+  config={{ columns, emptyMessage: 'No users found' }}
+/>
+```
+
+### With checkbox selection
+
+```tsx
+const [selected, setSelected] = useState<string[]>([]);
+
+<DynamicTable
+  data={users}
+  isLoading={loading}
+  currentPage={page}
+  setCurrentPage={setPage}
+  config={{ columns }}
+  isCheckBox
+  selectedIds={selected}
+  setSelectedIds={setSelected}
+/>
+```
+
+---
+
+## 3. DialogWrapper — Reusable Modal
+
+A scrollable dialog with sticky header, optional close button, and optional footer.
+
+```tsx
+import { DialogWrapper } from '@/components/common/dialog/dialog-wrapper.component';
+
+const [open, setOpen] = useState(false);
+
+<DialogWrapper
+  open={open}
+  setOpen={setOpen}
+  title="Edit User"
+  description="Update user details"
+  triggerContent={<Button>Open Dialog</Button>}
+  footer={<Button type="submit">Save</Button>}
+>
+  <Form {...form}>
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <CustomField.Text form={form} name="name" labelName="Name" required />
+    </form>
+  </Form>
+</DialogWrapper>
+```
+
+### Controlled from parent
+
+```tsx
+// Parent passes open/setOpen
+<DialogWrapper open={modalOpen} setOpen={setModalOpen}>
+  <UserForm ... />
+</DialogWrapper>
+```
+
+### Without trigger content
+
+```tsx
+// Dialog opened programmatically
+const [open, setOpen] = useState(true); // starts open
+
+<DialogWrapper open={open} setOpen={setOpen}>
+  <p>This dialog has no trigger button.</p>
+</DialogWrapper>
+```
+
+---
+
+## 4. ActionButton — Extended Button
+
+A button with variant, icon positions, loading spinner, and optional tooltip.
+
+```tsx
+import { ActionButton } from '@/components/common/button/action-button.component';
+
+// Simple
+<ActionButton buttonContent="Save" handleOpen={handleSave} />
+
+// With tooltip
+<ActionButton
+  variant="outline"
+  icon={<EditIcon />}
+  buttonContent="Edit"
+  tooltipContent="Edit this item"
+  handleOpen={() => setEditOpen(true)}
+/>
+
+// Loading state
+<ActionButton
+  buttonContent="Submit"
+  isPending={isSubmitting}
+  loadingContent="Saving..."
+  type="submit"
+/>
+
+// With left icon only
+<ActionButton icon={<PlusIcon />} buttonContent="Add User" variant="default" />
+
+// Destructive
+<ActionButton buttonContent="Delete" variant="destructive" handleOpen={handleDelete} />
+```
+
+---
+
+## 5. Pagination — Page Navigation
+
+```tsx
+import { Pagination } from '@/components/common/pagination/pagination.component';
+
+<Pagination
+  currentPage={page}
+  totalPages={totalPages}
+  setCurrentPage={setPage}
+/>
+```
+
+---
+
+## 6. Form Pattern (recommended)
+
+```tsx
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Form } from '@/components/ui/form';
+import { Button } from '@/components/ui/button';
+import { CustomField } from '@/components/common/fields/cusInputField';
+
+// 1. Define schema
+const formSchema = z.object({
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().optional(),
+  category: z.string().min(1, 'Select a category'),
+  published: z.boolean().default(false),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+// 2. Create form
+const form = useForm<FormData>({
+  resolver: zodResolver(formSchema),
+  defaultValues: { title: '', published: false },
+});
+
+// 3. Render
+<Form {...form}>
+  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+    <CustomField.Text form={form} name="title" labelName="Title" required />
+    <CustomField.TextArea form={form} name="description" labelName="Description" rows={5} />
+    <CustomField.SingleSelectField
+      form={form}
+      name="category"
+      labelName="Category"
+      options={['tech', 'design', 'business']}
+    />
+    <CustomField.Switch
+      form={form}
+      name="published"
+      labelName="Publish"
+      description="Make this visible to everyone"
+    />
+    <Button type="submit" disabled={isPending}>Save</Button>
+  </form>
+</Form>
+```