Added new Switch component (#72)

Author: forman

chartlets.js/CHANGES.md

@@ -37,8 +37,9 @@
   - using `schema` instead of `type` property for callback arguments
   - using `return` object with `schema` property for callback return values
 
-* New components
+* New (MUI) components
   - `LinearProgress`
+  - `Switch`
 
 ## Version 0.0.29 (from 2024/11/26)
 

chartlets.js/packages/lib/src/plugins/mui/Switch.test.tsx

@@ -0,0 +1,37 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { createChangeHandler } from "./common.test";
+import { Switch } from "./Switch";
+
+describe("Switch", () => {
+  it("should render the Switch component", () => {
+    render(
+      <Switch id="cb" type={"Switch"} label={"Click!"} onChange={() => {}} />,
+    );
+    // to inspect rendered component, do:
+    // expect(document.querySelector("#cb")).toEqual({});
+    expect(screen.getByText("Click!")).not.toBeUndefined();
+  });
+
+  it("should fire 'value' property", () => {
+    const { recordedEvents, onChange } = createChangeHandler();
+    render(
+      <Switch
+        data-testid="bt"
+        id="cb"
+        type={"Switch"}
+        label={"Click!"}
+        value={false}
+        onChange={onChange}
+      />,
+    );
+    fireEvent.click(screen.getByText("Click!"));
+    expect(recordedEvents.length).toEqual(1);
+    expect(recordedEvents[0]).toEqual({
+      componentType: "Switch",
+      id: "cb",
+      property: "value",
+      value: true,
+    });
+  });
+});

chartlets.js/packages/lib/src/plugins/mui/Switch.tsx

@@ -0,0 +1,51 @@
+import { type ChangeEvent } from "react";
+import MuiSwitch from "@mui/material/Switch";
+import MuiFormControl from "@mui/material/FormControl";
+import MuiFormControlLabel from "@mui/material/FormControlLabel";
+
+import type { ComponentState, ComponentProps } from "@/index";
+
+interface SwitchState extends ComponentState {
+  label?: string;
+  value?: boolean | undefined;
+}
+
+interface SwitchProps extends ComponentProps, SwitchState {}
+
+export function Switch({
+  type,
+  id,
+  name,
+  value,
+  disabled,
+  style,
+  label,
+  onChange,
+}: SwitchProps) {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (id) {
+      return onChange({
+        componentType: type,
+        id: id,
+        property: "value",
+        value: event.currentTarget.checked,
+      });
+    }
+  };
+  return (
+    <MuiFormControl variant="filled" size="small" style={style}>
+      <MuiFormControlLabel
+        label={label}
+        control={
+          <MuiSwitch
+            id={id}
+            name={name}
+            checked={Boolean(value)}
+            disabled={disabled}
+            onChange={handleChange}
+          />
+        }
+      />
+    </MuiFormControl>
+  );
+}

chartlets.js/packages/lib/src/plugins/mui/index.ts

@@ -5,6 +5,7 @@ import { Checkbox } from "./Checkbox";
 import { CircularProgress } from "./CircularProgress";
 import { IconButton } from "./IconButton";
 import { Select } from "./Select";
+import { Switch } from "./Switch";
 import { Typography } from "./Typography";
 
 export default function mui(): Plugin {
@@ -16,6 +17,7 @@ export default function mui(): Plugin {
       ["CircularProgress", CircularProgress],
       ["IconButton", IconButton],
       ["Select", Select],
+      ["Switch", Switch],
       ["Typography", Typography],
     ],
   };

chartlets.py/CHANGES.md

@@ -16,6 +16,8 @@
   - using `schema` instead of `type` property for callback arguments
   - using `return` object with `schema` property for callback return values
 
+* New components
+  - `Switch`
 
 ## Version 0.0.29 (from 2024/11/26)
 

chartlets.py/chartlets/components/__init__.py

@@ -8,4 +8,5 @@
 from .progress import LinearProgressWithLabel
 from .charts.vega import VegaChart
 from .select import Select
+from .switch import Switch
 from .typography import Typography

chartlets.py/chartlets/components/switch.py

@@ -0,0 +1,14 @@
+from dataclasses import dataclass
+
+from chartlets import Component
+
+
+@dataclass(frozen=True)
+class Switch(Component):
+    """Switches toggle the state of a single setting on or off."""
+
+    value: bool | None = None
+    """The switch value."""
+
+    label: str = ""
+    """The switch label."""

chartlets.py/tests/components/switch_test.py

@@ -0,0 +1,11 @@
+from chartlets.components import Switch
+from tests.component_test import make_base
+
+
+class SwitchTest(make_base(Switch)):
+
+    def test_is_json_serializable(self):
+        self.assert_is_json_serializable(
+            self.cls(value=True, label="Auto-safe"),
+            {"type": "Switch", "value": True, "label": "Auto-safe"},
+        )