@wealthx/ui 0.0.1 → 1.0.1

package/src/charts/mock-data.ts

@@ -0,0 +1,153 @@
+import type { LineChartDataset } from "./FrontendLineChart";
+import type { FrontendBarChartData } from "./FrontendBarChart";
+import type { DoughnutChartDataItem } from "./FrontendDoughnutChart";
+import type { MixedChartDataset } from "./FrontendMixedChart";
+import type { PercentageBarPart } from "./FrontendPercentageBar";
+import type { LiabilitiesPart } from "./FrontendLiabilitiesChart";
+import type { ScenarioDataPoint } from "./FrontendScenarioLineChart";
+import type { MobileLineChartDataset } from "./FrontendLineChartMobile";
+
+const generateMonthlyPeriods = (months: number = 12): string[] => {
+  const periods: string[] = [];
+  const now = new Date();
+  for (let i = months - 1; i >= 0; i--) {
+    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
+    periods.push(d.toISOString().split("T")[0]!);
+  }
+  return periods;
+};
+
+const randInt = (min: number, max: number) =>
+  Math.floor(Math.random() * (max - min + 1)) + min;
+
+const periods = generateMonthlyPeriods(12);
+
+// ── Frontend Mocks ──
+
+export const mockLineChartData: LineChartDataset[] = [
+  {
+    label: "Portfolio Value",
+    data: periods.map((p) => ({ x: p, y: randInt(100000, 500000) })),
+    customOptions: {
+      borderColor: "#2B72FB",
+      backgroundColor: "#2B72FB1A",
+      fill: true,
+    },
+  },
+];
+
+export const mockMobileLineChartData: MobileLineChartDataset[] = [
+  {
+    label: "Portfolio Value",
+    data: periods.map((p) => ({ x: p, y: randInt(100000, 500000) })),
+    color: "#162029",
+  },
+  {
+    label: "Benchmark",
+    data: periods.map((p) => ({ x: p, y: randInt(80000, 450000) })),
+    color: "#A1B9BD",
+    lineSpacing: [5, 5],
+  },
+];
+
+export const mockBarChartData: FrontendBarChartData = {
+  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+  datasets: [
+    {
+      label: "Income",
+      data: Array.from({ length: 12 }, () => randInt(3000, 8000)),
+      backgroundColor: "#39FD99",
+    },
+    {
+      label: "Expenses",
+      data: Array.from({ length: 12 }, () => -randInt(2000, 6000)),
+      backgroundColor: "#F44336",
+    },
+  ],
+};
+
+export const mockDoughnutData: DoughnutChartDataItem = {
+  data: [35000, 22000, 18000, 12000, 8000, 5000],
+  title: [
+    "Property",
+    "Shares",
+    "Superannuation",
+    "Cash",
+    "Crypto",
+    "Other",
+  ],
+  colors: ["#2B72FB", "#64BDC6", "#EECA34", "#FE6A35", "#7B47E9", "#3FDC7E"],
+};
+
+export const mockMixedChartDatasets: MixedChartDataset[] = [
+  {
+    type: "line",
+    label: "Estimate Value",
+    data: periods.map((p) => ({ x: p, y: randInt(400000, 600000) })),
+    borderColor: "#131C24",
+    backgroundColor: "#131C24",
+    borderWidth: 3,
+    fill: false,
+    tension: 0.4,
+    pointRadius: 0,
+    pointStyle: "rect",
+  },
+  {
+    type: "line",
+    label: "Suburb Average",
+    data: periods.map((p) => ({ x: p, y: randInt(450000, 550000) })),
+    borderColor: "#e8e8eb",
+    backgroundColor: "#e8e8eb",
+    borderWidth: 1,
+    fill: false,
+    tension: 0.4,
+    pointRadius: 0,
+    pointStyle: "rect",
+  },
+  {
+    type: "bar",
+    label: "Debt",
+    data: periods.map((p) => ({ x: p, y: randInt(200000, 350000) })),
+    backgroundColor: "#E9EDF2",
+    borderColor: "#E9EDF2",
+    fill: false,
+    tension: 0.4,
+    pointRadius: 0,
+    pointStyle: "rect",
+  },
+];
+
+export const mockPercentageBarParts: PercentageBarPart[] = [
+  { title: "Groceries", percentage: 0.25 },
+  { title: "Transport", percentage: 0.18 },
+  { title: "Entertainment", percentage: 0.15 },
+  { title: "Utilities", percentage: 0.12 },
+  { title: "Dining", percentage: 0.1 },
+  { title: "Shopping", percentage: 0.08 },
+  { title: "Healthcare", percentage: 0.07 },
+  { title: "Education", percentage: 0.05 },
+];
+
+export const mockPercentageBarColors = [
+  "#2B72FB", "#64BDC6", "#EECA34", "#FE6A35",
+  "#FA4B42", "#EE60E0", "#7B47E9", "#3FDC7E",
+];
+
+export const mockLiabilitiesParts: LiabilitiesPart[] = [
+  { id: "1", title: "Home Loan", percentage: 0.55 },
+  { id: "2", title: "Car Loan", percentage: 0.25 },
+  { id: "3", title: "Credit Card", percentage: 0.12 },
+  { id: "4", title: "Personal Loan", percentage: 0.08 },
+];
+
+export const mockScenarioData: ScenarioDataPoint[] = periods.map((p) => ({
+  x: p,
+  y: randInt(500000, 800000),
+}));
+
+export const mockScenarioSecondaryData: ScenarioDataPoint[] = periods.map(
+  (p) => ({
+    x: p,
+    y: randInt(600000, 900000),
+  })
+);

package/src/checkbox.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import MuiCheckbox, {
+  type CheckboxProps as MuiCheckboxProps,
+} from "@mui/material/Checkbox";
+
+export type CheckboxProps = Omit<MuiCheckboxProps, "size"> & {
+  size?: "small" | "medium" | "large";
+};
+
+export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+  (props, ref) => {
+    return <MuiCheckbox ref={ref} {...props} />;
+  }
+);
+
+Checkbox.displayName = "Checkbox";

package/src/chip.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiChip, { type ChipProps as MuiChipProps } from "@mui/material/Chip";
+
+export type ChipProps = MuiChipProps;
+
+export const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
+  (props, ref) => {
+    return <MuiChip ref={ref} {...props} />;
+  }
+);
+
+Chip.displayName = "Chip";

package/src/container.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiContainer, {
+  type ContainerProps as MuiContainerProps,
+} from "@mui/material/Container";
+
+export type ContainerProps = MuiContainerProps;
+
+export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
+  (props, ref) => {
+    return <MuiContainer ref={ref} {...props} />;
+  }
+);
+
+Container.displayName = "Container";

package/src/dialog-actions.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiDialogActions, {
+  type DialogActionsProps as MuiDialogActionsProps,
+} from "@mui/material/DialogActions";
+
+export type DialogActionsProps = MuiDialogActionsProps;
+
+export const DialogActions = React.forwardRef<HTMLDivElement, DialogActionsProps>(
+  (props, ref) => {
+    return <MuiDialogActions ref={ref} {...props} />;
+  }
+);
+
+DialogActions.displayName = "DialogActions";

package/src/dialog-content.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiDialogContent, {
+  type DialogContentProps as MuiDialogContentProps,
+} from "@mui/material/DialogContent";
+
+export type DialogContentProps = MuiDialogContentProps;
+
+export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
+  (props, ref) => {
+    return <MuiDialogContent ref={ref} {...props} />;
+  }
+);
+
+DialogContent.displayName = "DialogContent";

package/src/dialog-title.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiDialogTitle, {
+  type DialogTitleProps as MuiDialogTitleProps,
+} from "@mui/material/DialogTitle";
+
+export type DialogTitleProps = MuiDialogTitleProps;
+
+export const DialogTitle = React.forwardRef<HTMLDivElement, DialogTitleProps>(
+  (props, ref) => {
+    return <MuiDialogTitle ref={ref} {...props} />;
+  }
+);
+
+DialogTitle.displayName = "DialogTitle";

package/src/dialog.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiDialog, { type DialogProps as MuiDialogProps } from "@mui/material/Dialog";
+
+export type DialogProps = MuiDialogProps;
+
+export const Dialog = React.forwardRef<HTMLDivElement, DialogProps>(
+  (props, ref) => {
+    return <MuiDialog ref={ref} {...props} />;
+  }
+);
+
+Dialog.displayName = "Dialog";

package/src/divider.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiDivider, { type DividerProps as MuiDividerProps } from "@mui/material/Divider";
+
+export type DividerProps = MuiDividerProps;
+
+export const Divider = React.forwardRef<HTMLHRElement, DividerProps>(
+  (props, ref) => {
+    return <MuiDivider ref={ref} {...props} />;
+  }
+);
+
+Divider.displayName = "Divider";

package/src/drawer.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiDrawer, { type DrawerProps as MuiDrawerProps } from "@mui/material/Drawer";
+
+export type DrawerProps = MuiDrawerProps;
+
+export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
+  (props, ref) => {
+    return <MuiDrawer ref={ref} {...props} />;
+  }
+);
+
+Drawer.displayName = "Drawer";

package/src/fab.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiFab, { type FabProps as MuiFabProps } from "@mui/material/Fab";
+
+export type FabProps = MuiFabProps;
+
+export const Fab = React.forwardRef<HTMLButtonElement, FabProps>(
+  (props, ref) => {
+    return <MuiFab ref={ref} {...props} />;
+  }
+);
+
+Fab.displayName = "Fab";

package/src/form-control.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiFormControl, {
+  type FormControlProps as MuiFormControlProps,
+} from "@mui/material/FormControl";
+
+export type FormControlProps = MuiFormControlProps;
+
+export const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
+  (props, ref) => {
+    return <MuiFormControl ref={ref} {...props} />;
+  }
+);
+
+FormControl.displayName = "FormControl";

package/src/grid.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiGrid, { type GridProps as MuiGridProps } from "@mui/material/Grid";
+
+export type GridProps = MuiGridProps;
+
+export const Grid = React.forwardRef<HTMLDivElement, GridProps>(
+  (props, ref) => {
+    return <MuiGrid ref={ref} {...props} />;
+  }
+);
+
+Grid.displayName = "Grid";

package/src/icon-button.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiIconButton, {
+  type IconButtonProps as MuiIconButtonProps,
+} from "@mui/material/IconButton";
+
+export type IconButtonProps = MuiIconButtonProps;
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (props, ref) => {
+    return <MuiIconButton ref={ref} {...props} />;
+  }
+);
+
+IconButton.displayName = "IconButton";

package/src/image-list-item.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiImageListItem, {
+  type ImageListItemProps as MuiImageListItemProps,
+} from "@mui/material/ImageListItem";
+
+export type ImageListItemProps = MuiImageListItemProps;
+
+export const ImageListItem = React.forwardRef<HTMLLIElement, ImageListItemProps>(
+  (props, ref) => {
+    return <MuiImageListItem ref={ref} {...props} />;
+  }
+);
+
+ImageListItem.displayName = "ImageListItem";

package/src/image-list.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiImageList, {
+  type ImageListProps as MuiImageListProps,
+} from "@mui/material/ImageList";
+
+export type ImageListProps = MuiImageListProps;
+
+export const ImageList = React.forwardRef<HTMLUListElement, ImageListProps>(
+  (props, ref) => {
+    return <MuiImageList ref={ref} {...props} />;
+  }
+);
+
+ImageList.displayName = "ImageList";

package/src/input-label.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiInputLabel, {
+  type InputLabelProps as MuiInputLabelProps,
+} from "@mui/material/InputLabel";
+
+export type InputLabelProps = MuiInputLabelProps;
+
+export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(
+  (props, ref) => {
+    return <MuiInputLabel ref={ref} {...props} />;
+  }
+);
+
+InputLabel.displayName = "InputLabel";

package/src/link.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiLink, { type LinkProps as MuiLinkProps } from "@mui/material/Link";
+
+export type LinkProps = MuiLinkProps;
+
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  (props, ref) => {
+    return <MuiLink ref={ref} {...props} />;
+  }
+);
+
+Link.displayName = "Link";

package/src/list-item-icon.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiListItemIcon, {
+  type ListItemIconProps as MuiListItemIconProps,
+} from "@mui/material/ListItemIcon";
+
+export type ListItemIconProps = MuiListItemIconProps;
+
+export const ListItemIcon = React.forwardRef<HTMLDivElement, ListItemIconProps>(
+  (props, ref) => {
+    return <MuiListItemIcon ref={ref} {...props} />;
+  }
+);
+
+ListItemIcon.displayName = "ListItemIcon";

package/src/list-item-text.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiListItemText, {
+  type ListItemTextProps as MuiListItemTextProps,
+} from "@mui/material/ListItemText";
+
+export type ListItemTextProps = MuiListItemTextProps;
+
+export const ListItemText = React.forwardRef<HTMLDivElement, ListItemTextProps>(
+  (props, ref) => {
+    return <MuiListItemText ref={ref} {...props} />;
+  }
+);
+
+ListItemText.displayName = "ListItemText";

package/src/list-item.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiListItem, {
+  type ListItemProps as MuiListItemProps,
+} from "@mui/material/ListItem";
+
+export type ListItemProps = MuiListItemProps;
+
+export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
+  (props, ref) => {
+    return <MuiListItem ref={ref} {...props} />;
+  }
+);
+
+ListItem.displayName = "ListItem";

package/src/list.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiList, { type ListProps as MuiListProps } from "@mui/material/List";
+
+export type ListProps = MuiListProps;
+
+export const List = React.forwardRef<HTMLUListElement, ListProps>(
+  (props, ref) => {
+    return <MuiList ref={ref} {...props} />;
+  }
+);
+
+List.displayName = "List";

package/src/masonry.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiMasonry, {
+  type MasonryProps as MuiMasonryProps,
+} from "@mui/lab/Masonry";
+
+export type MasonryProps = MuiMasonryProps;
+
+export const Masonry = React.forwardRef<HTMLDivElement, MasonryProps>(
+  (props, ref) => {
+    return <MuiMasonry ref={ref} {...props} />;
+  }
+);
+
+Masonry.displayName = "Masonry";

package/src/menu-item.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiMenuItem, {
+  type MenuItemProps as MuiMenuItemProps,
+} from "@mui/material/MenuItem";
+
+export type MenuItemProps = MuiMenuItemProps;
+
+export const MenuItem = React.forwardRef<HTMLLIElement, MenuItemProps>(
+  (props, ref) => {
+    return <MuiMenuItem ref={ref} {...props} />;
+  }
+);
+
+MenuItem.displayName = "MenuItem";

package/src/menu.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiMenu, { type MenuProps as MuiMenuProps } from "@mui/material/Menu";
+
+export type MenuProps = MuiMenuProps;
+
+export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(
+  (props, ref) => {
+    return <MuiMenu ref={ref} {...props} />;
+  }
+);
+
+Menu.displayName = "Menu";

package/src/mui-augmentation.ts

@@ -0,0 +1,23 @@
+/**
+ * MUI module augmentations for this package.
+ * Imported by toggle-button (for ToggleButton) and by createDesignTheme (for theme/Radio/Switch).
+ */
+declare module "@mui/material/Radio" {
+  interface RadioPropsSizeOverrides {
+    large: true;
+  }
+}
+
+declare module "@mui/material/Switch" {
+  interface SwitchPropsSizeOverrides {
+    large: true;
+  }
+}
+
+declare module "@mui/material/ToggleButton" {
+  interface ToggleButtonOwnProps {
+    outlined?: boolean;
+  }
+}
+
+export {};

package/src/pagination.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiPagination, {
+  type PaginationProps as MuiPaginationProps,
+} from "@mui/material/Pagination";
+
+export type PaginationProps = MuiPaginationProps;
+
+export const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
+  (props, ref) => {
+    return <MuiPagination ref={ref} {...props} />;
+  }
+);
+
+Pagination.displayName = "Pagination";

package/src/paper.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiPaper, { type PaperProps as MuiPaperProps } from "@mui/material/Paper";
+
+export type PaperProps = MuiPaperProps;
+
+export const Paper = React.forwardRef<HTMLDivElement, PaperProps>(
+  (props, ref) => {
+    return <MuiPaper ref={ref} {...props} />;
+  }
+);
+
+Paper.displayName = "Paper";

package/src/progress.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import MuiLinearProgress, {
+  type LinearProgressProps as MuiLinearProgressProps,
+} from "@mui/material/LinearProgress";
+import MuiCircularProgress, {
+  type CircularProgressProps as MuiCircularProgressProps,
+} from "@mui/material/CircularProgress";
+
+export type LinearProgressProps = MuiLinearProgressProps;
+export type CircularProgressProps = MuiCircularProgressProps;
+
+export const LinearProgress = React.forwardRef<HTMLSpanElement, LinearProgressProps>(
+  (props, ref) => {
+    return <MuiLinearProgress ref={ref} {...props} />;
+  }
+);
+
+export const CircularProgress = React.forwardRef<HTMLSpanElement, CircularProgressProps>(
+  (props, ref) => {
+    return <MuiCircularProgress ref={ref} {...props} />;
+  }
+);
+
+LinearProgress.displayName = "LinearProgress";
+CircularProgress.displayName = "CircularProgress";

package/src/radio-group.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiRadioGroup, {
+  type RadioGroupProps as MuiRadioGroupProps,
+} from "@mui/material/RadioGroup";
+
+export type RadioGroupProps = MuiRadioGroupProps;
+
+export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  (props, ref) => {
+    return <MuiRadioGroup ref={ref} {...props} />;
+  }
+);
+
+RadioGroup.displayName = "RadioGroup";

package/src/radio.tsx

@@ -0,0 +1,15 @@
+import "./mui-augmentation";
+import React from "react";
+import MuiRadio, { type RadioProps as MuiRadioProps } from "@mui/material/Radio";
+
+export type RadioProps = Omit<MuiRadioProps, "size"> & {
+  size?: "small" | "medium" | "large";
+};
+
+export const Radio = React.forwardRef<HTMLButtonElement, RadioProps>(
+  (props, ref) => {
+    return <MuiRadio ref={ref} {...(props as MuiRadioProps)} />;
+  }
+);
+
+Radio.displayName = "Radio";

package/src/rating.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiRating, { type RatingProps as MuiRatingProps } from "@mui/material/Rating";
+
+export type RatingProps = MuiRatingProps;
+
+export const Rating = React.forwardRef<HTMLSpanElement, RatingProps>(
+  (props, ref) => {
+    return <MuiRating ref={ref} {...props} />;
+  }
+);
+
+Rating.displayName = "Rating";

package/src/select.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiSelect, { type SelectProps as MuiSelectProps } from "@mui/material/Select";
+
+export type SelectProps<T = unknown> = MuiSelectProps<T>;
+
+export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
+  (props, ref) => {
+    return <MuiSelect ref={ref} {...props} />;
+  }
+) as <T = unknown>(props: SelectProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+
+(Select as React.FC).displayName = "Select";