Added component IconButton and enhanced other components' attributes.

Author: forman

chartlets.js/CHANGES.md

@@ -1,3 +1,7 @@
+## Version 0.0.27 (from 2024/11/25)
+
+* Added component `IconButton` and enhanced other components' attributes.
+
 ## Version 0.0.26 (from 2024/11/23)
 
 * Channels such as `Input`, `State`, `Output` no longer have a `link` property.

chartlets.js/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "chartlets",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "An experimental library for integrating interactive charts into existing JavaScript applications.",
   "type": "module",
   "files": [

chartlets.js/package.json

@@ -1,17 +1,27 @@
 import MuiBox from "@mui/material/Box";
 
+import type { ElementType } from "react";
 import type { ComponentState } from "@/lib/types/state/component";
-import { Children } from "../component/Children";
 import type { ComponentProps } from "@/lib/component/Component";
+import { Children } from "@/lib/component/Children";
 
-interface BoxState extends ComponentState {}
+interface BoxState extends ComponentState {
+  component?: ElementType<Element>;
+}
 
 interface BoxProps extends ComponentProps, BoxState {}
 
-export function Box({ id, style, children, onChange }: BoxProps) {
+export function Box({
+  id,
+  style,
+  color,
+  component,
+  children: nodes,
+  onChange,
+}: BoxProps) {
   return (
-    <MuiBox id={id} style={style}>
-      <Children nodes={children} onChange={onChange} />
+    <MuiBox id={id} style={style} color={color} component={component || "div"}>
+      <Children nodes={nodes} onChange={onChange} />
     </MuiBox>
   );
 }

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

@@ -1,11 +1,23 @@
 import { type MouseEvent } from "react";
 import MuiButton from "@mui/material/Button";
+import MuiIcon from "@mui/material/Icon";
 
 import { type ComponentState } from "@/lib/types/state/component";
 import type { ComponentProps } from "@/lib/component/Component";
 
 interface ButtonState extends ComponentState {
   text?: string;
+  startIcon?: string;
+  endIcon?: string;
+  variant?: "contained" | "outlined" | "text";
+  color?:
+    | "inherit"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "error"
+    | "info"
+    | "warning";
 }
 
 interface ButtonProps extends ComponentProps, ButtonState {}
@@ -15,8 +27,12 @@ export function Button({
   id,
   name,
   style,
-  text,
+  variant,
+  color,
   disabled,
+  text,
+  startIcon,
+  endIcon,
   onChange,
 }: ButtonProps) {
   const handleClick = (_event: MouseEvent<HTMLButtonElement>) => {
@@ -34,7 +50,11 @@ export function Button({
       id={id}
       name={name}
       style={style}
+      variant={variant}
+      color={color}
       disabled={disabled}
+      startIcon={startIcon && <MuiIcon>{startIcon}</MuiIcon>}
+      endIcon={endIcon && <MuiIcon>{endIcon}</MuiIcon>}
       onClick={handleClick}
     >
       {text}

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

@@ -0,0 +1,57 @@
+import { type MouseEvent } from "react";
+import MuiIconButton from "@mui/material/IconButton";
+import MuiIcon from "@mui/material/Icon";
+
+import { type ComponentState } from "@/lib/types/state/component";
+import type { ComponentProps } from "@/lib/component/Component";
+
+interface IconButtonState extends ComponentState {
+  icon?: string;
+  color?:
+    | "inherit"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "error"
+    | "info"
+    | "warning";
+  size?: "small" | "medium" | "large";
+}
+
+interface IconButtonProps extends ComponentProps, IconButtonState {}
+
+export function IconButton({
+  type,
+  id,
+  name,
+  style,
+  color,
+  icon,
+  size,
+  disabled,
+  onChange,
+}: IconButtonProps) {
+  const handleClick = (_event: MouseEvent<HTMLButtonElement>) => {
+    if (id) {
+      onChange({
+        componentType: type,
+        id: id,
+        property: "clicked",
+        value: true,
+      });
+    }
+  };
+  return (
+    <MuiIconButton
+      id={id}
+      name={name}
+      style={style}
+      color={color}
+      size={size}
+      disabled={disabled}
+      onClick={handleClick}
+    >
+      <MuiIcon>{icon}</MuiIcon>
+    </MuiIconButton>
+  );
+}

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

@@ -1,9 +1,9 @@
 import MuiTypography from "@mui/material/Typography";
 import { type TypographyVariant } from "@mui/material";
 
-import { Children } from "@/lib/component/Children";
 import type { ComponentState } from "@/lib/types/state/component";
 import type { ComponentProps } from "@/lib/component/Component";
+import { Children } from "@/lib/component/Children";
 
 interface TypographyState extends ComponentState {
   align?: "right" | "left" | "center" | "inherit" | "justify";

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

@@ -35,14 +35,17 @@ export {
 export { type HostStore } from "@/lib/types/state/options";
 
 /////////////////////////////////////////////////////////////////////
-// Register standard Chartlets components
+// Register standard Chartlets components that can be rendered
+// by the Chartlets `Component` component.
+// Plugins may register their own components.
 
 import { registry } from "@/lib/component/Registry";
 
 import { Box } from "@/lib/components/Box";
 import { Button } from "@/lib/components/Button";
 import { Checkbox } from "@/lib/components/Checkbox";
 import { CircularProgress } from "@/lib/components/CircularProgress";
+import { IconButton } from "@/lib/components/IconButton";
 import { Plot } from "@/lib/components/Plot";
 import { Select } from "@/lib/components/Select";
 import { Typography } from "@/lib/components/Typography";
@@ -51,6 +54,7 @@ registry.register("Box", Box);
 registry.register("Button", Button);
 registry.register("Checkbox", Checkbox);
 registry.register("CircularProgress", CircularProgress);
+registry.register("IconButton", IconButton);
 registry.register("Plot", Plot);
 registry.register("Select", Select);
 registry.register("Typography", Typography);

chartlets.js/src/lib/index.ts

@@ -29,6 +29,7 @@ export interface ComponentState {
   style?: CSSProperties;
   disabled?: boolean;
   label?: string;
+  color?: string;
 }
 
 export interface ContainerState extends ComponentState {

chartlets.js/src/lib/types/state/component.ts

@@ -1,5 +1,7 @@
 ## Version 0.0.x (in development)
 
+* Added component `IconButton` and enhanced other components' attributes.
+
 * Channels such as `Input`, `State`, `Output` no longer have a `link` property. 
   Instead, we use a special `id` format, namely `"@app"` and `@container` 
   to address states other than components.