Reorganising components; added CircularProgress

Author: forman

chartlets.js/src/lib/actions/helpers/applyStateChangeRequests.test.ts

@@ -1,12 +1,10 @@
 import { describe, it, expect } from "vitest";
 
+import { type ComponentState } from "@/lib";
 import { type ContribPoint } from "@/lib/types/model/extension";
 import { type StateChangeRequest } from "@/lib/types/model/callback";
-import {
-  type BoxState,
-  type ComponentState,
-  type PlotState,
-} from "@/lib/types/state/component";
+import { type BoxState } from "@/lib/components/Box";
+import { type PlotState } from "@/lib/components/Plot";
 import { type ContributionState } from "@/lib/types/state/contribution";
 import {
   applyComponentStateChange,

chartlets.js/src/lib/actions/helpers/getInputValues.test.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect } from "vitest";
 
-import type { ComponentState, PlotState } from "@/lib/types/state/component";
+import type { ComponentState } from "@/lib";
+import type { PlotState } from "@/lib/components/Plot";
 import {
   getInputValueFromComponent,
   getInputValueFromState,

chartlets.js/src/lib/components/Box.tsx

@@ -1,9 +1,13 @@
 import MuiBox from "@mui/material/Box";
 
-import { type BoxState } from "@/lib/types/state/component";
+import { type ContainerState } from "@/lib/types/state/component";
 import { type ComponentChangeHandler } from "@/lib/types/state/event";
 import { ComponentChildren } from "./ComponentChildren";
 
+export interface BoxState extends ContainerState {
+  type: "Box";
+}
+
 export interface BoxProps extends Omit<BoxState, "type"> {
   onChange: ComponentChangeHandler;
 }

chartlets.js/src/lib/components/Button.tsx

@@ -1,9 +1,14 @@
 import { type MouseEvent } from "react";
 import MuiButton from "@mui/material/Button";
 
-import { type ButtonState } from "@/lib/types/state/component";
+import { type ComponentState } from "@/lib/types/state/component";
 import { type ComponentChangeHandler } from "@/lib/types/state/event";
 
+export interface ButtonState extends ComponentState {
+  type: "Button";
+  text: string;
+}
+
 export interface ButtonProps extends Omit<ButtonState, "type"> {
   onChange: ComponentChangeHandler;
 }

chartlets.js/src/lib/components/Checkbox.tsx

@@ -3,9 +3,15 @@ import MuiCheckbox from "@mui/material/Checkbox";
 import MuiFormControl from "@mui/material/FormControl";
 import MuiFormControlLabel from "@mui/material/FormControlLabel";
 
-import { type CheckboxState } from "@/lib/types/state/component";
+import { type ComponentState } from "@/lib/types/state/component";
 import { type ComponentChangeHandler } from "@/lib/types/state/event";
 
+export interface CheckboxState extends ComponentState {
+  type: "Checkbox";
+  label: string;
+  value?: boolean;
+}
+
 export interface CheckboxProps extends Omit<CheckboxState, "type"> {
   onChange: ComponentChangeHandler;
 }

chartlets.js/src/lib/components/CircularProgress.tsx

@@ -0,0 +1,31 @@
+import MuiCircularProgress from "@mui/material/CircularProgress";
+
+import { type ComponentState } from "@/lib/types/state/component";
+
+export interface CircularProgressState extends ComponentState {
+  type: "CircularProgress";
+  size?: number | string;
+  value?: number;
+  variant?: "determinate" | "indeterminate";
+}
+
+export interface CircularProgressProps
+  extends Omit<CircularProgressState, "type"> {}
+
+export function CircularProgress({
+  id,
+  style,
+  size,
+  value,
+  variant,
+}: CircularProgressProps) {
+  return (
+    <MuiCircularProgress
+      id={id}
+      style={style}
+      size={size}
+      value={value}
+      variant={variant}
+    />
+  );
+}

chartlets.js/src/lib/components/Component.tsx

@@ -6,6 +6,10 @@ import { Checkbox, type CheckboxProps } from "./Checkbox";
 import { Select, type SelectProps } from "./Select";
 import { Plot, type PlotProps } from "./Plot";
 import { Typography, type TypographyProps } from "@/lib/components/Typography";
+import {
+  CircularProgress,
+  type CircularProgressProps,
+} from "./CircularProgress";
 
 export interface ComponentProps extends ComponentState {
   onChange: ComponentChangeHandler;
@@ -28,7 +32,11 @@ export function Component({ type, ...props }: ComponentProps) {
     return <Box {...(props as BoxProps)} />;
   } else if (type === "Checkbox") {
     return <Checkbox {...(props as CheckboxProps)} />;
+  } else if (type === "CircularProgress") {
+    return <CircularProgress {...(props as CircularProgressProps)} />;
   } else if (type === "Typography") {
     return <Typography {...(props as TypographyProps)} />;
+  } else {
+    console.error(`Cannot render unknown component type ${type}`);
   }
 }

chartlets.js/src/lib/components/Plot.tsx

@@ -1,8 +1,17 @@
-import { VegaLite } from "react-vega";
+import { VegaLite, type VisualizationSpec } from "react-vega";
 
-import { type PlotState } from "@/lib/types/state/component";
+import { type ComponentState } from "@/lib/types/state/component";
 import { type ComponentChangeHandler } from "@/lib/types/state/event";
 
+export interface PlotState extends ComponentState {
+  type: "Plot";
+  chart:
+    | (VisualizationSpec & {
+        datasets?: Record<string, unknown>; // Add the datasets property
+      })
+    | null;
+}
+
 export interface PlotProps extends Omit<PlotState, "type"> {
   onChange: ComponentChangeHandler;
 }

chartlets.js/src/lib/components/Select.tsx

@@ -3,12 +3,21 @@ import MuiInputLabel from "@mui/material/InputLabel";
 import MuiMenuItem from "@mui/material/MenuItem";
 import MuiSelect, { type SelectChangeEvent } from "@mui/material/Select";
 
-import {
-  type SelectOption,
-  type SelectState,
-} from "@/lib/types/state/component";
+import { type ComponentState } from "@/lib/types/state/component";
 import { type ComponentChangeHandler } from "@/lib/types/state/event";
 
+export type SelectOption =
+  | string
+  | number
+  | [string, string]
+  | [number, string]
+  | { value: string | number; label?: string };
+
+export interface SelectState extends ComponentState {
+  type: "Select";
+  options: SelectOption[];
+}
+
 export interface SelectProps extends Omit<SelectState, "type"> {
   onChange: ComponentChangeHandler;
 }

chartlets.js/src/lib/components/Typography.tsx

@@ -1,8 +1,16 @@
 import MuiTypography from "@mui/material/Typography";
+import { type TypographyVariant } from "@mui/material";
 
-import type { TypographyState } from "@/lib/types/state/component";
 import { ComponentChildren } from "@/lib/components/ComponentChildren";
-import type { ComponentChangeHandler } from "@/lib";
+import type { ComponentChangeHandler, ContainerState } from "@/lib";
+
+export interface TypographyState extends ContainerState {
+  type: "Typography";
+  align?: "right" | "left" | "center" | "inherit" | "justify";
+  gutterBottom?: boolean;
+  noWrap?: boolean;
+  variant?: TypographyVariant;
+}
 
 export interface TypographyProps extends Omit<TypographyState, "type"> {
   onChange: ComponentChangeHandler;
@@ -11,11 +19,22 @@ export interface TypographyProps extends Omit<TypographyState, "type"> {
 export function Typography({
   id,
   style,
+  align,
+  gutterBottom,
+  noWrap,
+  variant,
   children: components,
   onChange,
 }: TypographyProps) {
   return (
-    <MuiTypography id={id} style={style}>
+    <MuiTypography
+      id={id}
+      style={style}
+      align={align}
+      gutterBottom={gutterBottom}
+      noWrap={noWrap}
+      variant={variant}
+    >
       <ComponentChildren components={components} onChange={onChange} />
     </MuiTypography>
   );