Merge branch 'main' into yogesh-41-slider

b-yogesh · b-yogesh · commit 629727414610 · 2024-12-16T15:14:39.000+01:00
diff --git a/.github/workflows/backend-ci.yml b/.github/workflows/backend-ci.yml
@@ -27,5 +27,6 @@ jobs:
           uses: codecov/codecov-action@v4
           with:
             directory: chartlets.py/
+            flags: backend
             verbose: true
             token: ${{ secrets.CODECOV_TOKEN }}
diff --git a/.github/workflows/frontend-ci.yml b/.github/workflows/frontend-ci.yml
@@ -40,7 +40,8 @@ jobs:
       - name: Upload coverage reports for lib to Codecov
         uses: codecov/codecov-action@v4
         with:
-          directory: chartlets.js/packages/lib/
+          directory: chartlets.js/packages/lib/coverage/
+          flags: frontend
           verbose: true
           token: ${{ secrets.CODECOV_TOKEN }}
 
diff --git a/chartlets.js/CHANGES.md b/chartlets.js/CHANGES.md
@@ -39,7 +39,9 @@
 
 * New (MUI) components
   - `LinearProgress`
+  - `RadioGroup` and `Radio`
   - `Switch`
+  - `Tabs`
 
 * Supporting `tooltip` property for interactive MUI components.
 
diff --git a/chartlets.js/packages/lib/src/plugins/mui/RadioGroup.test.tsx b/chartlets.js/packages/lib/src/plugins/mui/RadioGroup.test.tsx
@@ -0,0 +1,62 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { createChangeHandler } from "./common.test";
+import { RadioGroup } from "./RadioGroup";
+
+describe("RadioGroup", () => {
+  it("should render the component", () => {
+    render(
+      <RadioGroup
+        id="rg"
+        type={"RadioGroup"}
+        label={"Gender"}
+        value={"f"}
+        children={[
+          { type: "Radio", value: "f", label: "Female" },
+          { type: "Radio", value: "m", label: "Male" },
+          { type: "Radio", value: "v", label: "Varying" },
+        ]}
+        onChange={() => {}}
+        row
+        dense
+      />,
+    );
+    // to inspect rendered component, do:
+    // expect(document.querySelector("#rg")).toEqual({});
+    expect(screen.getByRole("radiogroup")).not.toBeUndefined();
+  });
+
+  it("should fire 'value' property with text options", () => {
+    const { recordedEvents, onChange } = createChangeHandler();
+    render(
+      <RadioGroup
+        id="rg"
+        type={"RadioGroup"}
+        label={"Gender"}
+        value={"m"}
+        children={[
+          { type: "Radio", value: "f", label: "Female" },
+          { type: "Radio", value: "m", label: "Male" },
+          { type: "Radio", value: "v", label: "Varying" },
+        ]}
+        onChange={onChange}
+      />,
+    );
+    fireEvent.click(screen.getByLabelText("Varying"));
+    expect(recordedEvents.length).toBe(1);
+    expect(recordedEvents[0]).toEqual({
+      componentType: "RadioGroup",
+      id: "rg",
+      property: "value",
+      value: "v",
+    });
+    fireEvent.click(screen.getByLabelText("Female"));
+    expect(recordedEvents.length).toBe(2);
+    expect(recordedEvents[1]).toEqual({
+      componentType: "RadioGroup",
+      id: "rg",
+      property: "value",
+      value: "f",
+    });
+  });
+});
diff --git a/chartlets.js/packages/lib/src/plugins/mui/RadioGroup.tsx b/chartlets.js/packages/lib/src/plugins/mui/RadioGroup.tsx
@@ -0,0 +1,84 @@
+import { type ChangeEvent } from "react";
+import MuiRadio from "@mui/material/Radio";
+import MuiRadioGroup from "@mui/material/RadioGroup";
+import MuiFormControl from "@mui/material/FormControl";
+import MuiFormControlLabel from "@mui/material/FormControlLabel";
+import MuiFormLabel from "@mui/material/FormLabel";
+import { Tooltip } from "./Tooltip";
+
+import type { ComponentState, ComponentProps } from "@/index";
+
+interface RadioState extends ComponentState {
+  type: "Radio";
+  value?: boolean | number | string | undefined;
+  label?: string;
+  size?: "medium" | "small" | string;
+}
+
+interface RadioGroupState extends ComponentState {
+  children?: RadioState[];
+  label?: string;
+  row?: boolean;
+  dense?: boolean;
+  tooltip?: string;
+}
+
+interface RadioGroupProps extends ComponentProps, RadioGroupState {}
+
+export function RadioGroup({
+  type,
+  id,
+  name,
+  value,
+  disabled,
+  style,
+  label,
+  row,
+  tooltip,
+  dense,
+  children: radioButtons,
+  onChange,
+}: RadioGroupProps) {
+  const handleChange = (
+    _event: ChangeEvent<HTMLInputElement>,
+    value: string,
+  ) => {
+    if (id) {
+      return onChange({
+        componentType: type,
+        id: id,
+        property: "value",
+        value,
+      });
+    }
+  };
+  return (
+    <Tooltip title={tooltip}>
+      <MuiFormControl style={style} disabled={disabled}>
+        <MuiFormLabel>{label}</MuiFormLabel>
+        <MuiRadioGroup
+          id={id}
+          name={name}
+          row={row}
+          value={value}
+          onChange={handleChange}
+        >
+          {radioButtons &&
+            radioButtons.map((radioButton) => (
+              <MuiFormControlLabel
+                value={radioButton.value}
+                label={radioButton.label}
+                disabled={radioButton.disabled}
+                control={
+                  <MuiRadio
+                    id={radioButton.id}
+                    size={dense ? "small" : "medium"}
+                  />
+                }
+              />
+            ))}
+        </MuiRadioGroup>
+      </MuiFormControl>
+    </Tooltip>
+  );
+}
diff --git a/chartlets.js/packages/lib/src/plugins/mui/Tabs.test.tsx b/chartlets.js/packages/lib/src/plugins/mui/Tabs.test.tsx
@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { createChangeHandler } from "./common.test";
+import { Tabs } from "./Tabs";
+
+describe("Tabs", () => {
+  it("should render the Tabs component", () => {
+    render(
+      <Tabs
+        id="tbs"
+        type={"Tabs"}
+        onChange={() => {}}
+        children={["Datasets", "Variables"]}
+      />,
+    );
+    // to inspect rendered component, do:
+    // expect(document.querySelector("#tbs")).toEqual({});
+    expect(screen.getByText("Datasets")).not.toBeUndefined();
+  });
+
+  it("should fire 'value' property", () => {
+    const { recordedEvents, onChange } = createChangeHandler();
+    render(
+      <Tabs
+        id="tbs"
+        type={"Tabs"}
+        value={0}
+        onChange={onChange}
+        children={["Datasets", "Variables", { type: "Tab", label: "Stats" }]}
+      />,
+    );
+    fireEvent.click(screen.getByText("Variables"));
+    expect(recordedEvents.length).toEqual(1);
+    expect(recordedEvents[0]).toEqual({
+      componentType: "Tabs",
+      id: "tbs",
+      property: "value",
+      value: 1,
+    });
+    fireEvent.click(screen.getByText("Stats"));
+    expect(recordedEvents.length).toEqual(2);
+    expect(recordedEvents[1]).toEqual({
+      componentType: "Tabs",
+      id: "tbs",
+      property: "value",
+      value: 2,
+    });
+  });
+});
diff --git a/chartlets.js/packages/lib/src/plugins/mui/Tabs.tsx b/chartlets.js/packages/lib/src/plugins/mui/Tabs.tsx
@@ -0,0 +1,59 @@
+import MuiIcon from "@mui/material/Icon";
+import MuiTabs from "@mui/material/Tabs";
+import MuiTab from "@mui/material/Tab";
+
+import type { ComponentProps, ComponentState } from "@/index";
+import type { SyntheticEvent } from "react";
+import { isString } from "@/utils/isString";
+import { isComponentState } from "@/types/state/component";
+
+interface TabState {
+  type: "Tab";
+  label?: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+interface TabsState extends ComponentState {
+  value?: number;
+  children?: (string | TabState)[];
+}
+
+interface TabsProps extends ComponentProps, TabsState {}
+
+export function Tabs({
+  type,
+  id,
+  value,
+  children: tabItems,
+  disabled,
+  style,
+  onChange,
+}: TabsProps) {
+  const handleChange = (_event: SyntheticEvent, value: number) => {
+    if (id) {
+      onChange({
+        componentType: type,
+        id: id,
+        property: "value",
+        value: value,
+      });
+    }
+  };
+  return (
+    <MuiTabs id={id} style={style} value={value} onChange={handleChange}>
+      {tabItems?.map((tab) => {
+        const tabState = isComponentState(tab) ? (tab as TabState) : undefined;
+        return (
+          <MuiTab
+            label={tabState ? tabState.label : isString(tab) ? tab : ""}
+            icon={
+              tabState && tabState.icon && <MuiIcon>{tabState.icon}</MuiIcon>
+            }
+            disabled={disabled || (tabState && tabState.disabled)}
+          />
+        );
+      })}
+    </MuiTabs>
+  );
+}
diff --git a/chartlets.js/packages/lib/src/plugins/mui/index.ts b/chartlets.js/packages/lib/src/plugins/mui/index.ts
@@ -4,8 +4,10 @@ import { Button } from "./Button";
 import { Checkbox } from "./Checkbox";
 import { CircularProgress } from "./CircularProgress";
 import { IconButton } from "./IconButton";
+import { RadioGroup } from "./RadioGroup";
 import { Select } from "./Select";
 import { Switch } from "./Switch";
+import { Tabs } from "./Tabs";
 import { Typography } from "./Typography";
 
 export default function mui(): Plugin {
@@ -16,8 +18,10 @@ export default function mui(): Plugin {
       ["Checkbox", Checkbox],
       ["CircularProgress", CircularProgress],
       ["IconButton", IconButton],
+      ["RadioGroup", RadioGroup],
       ["Select", Select],
       ["Switch", Switch],
+      ["Tabs", Tabs],
       ["Typography", Typography],
     ],
   };
diff --git a/chartlets.py/CHANGES.md b/chartlets.py/CHANGES.md
@@ -20,6 +20,8 @@
 
 * New components
   - `Switch`
+  - `RadioGroup` and `Radio`
+  - `Tabs`
 
 ## Version 0.0.29 (from 2024/11/26)
 
diff --git a/chartlets.py/chartlets/components/__init__.py b/chartlets.py/chartlets/components/__init__.py
@@ -7,6 +7,10 @@
 from .progress import LinearProgress
 from .progress import LinearProgressWithLabel
 from .charts.vega import VegaChart
+from .radiogroup import Radio
+from .radiogroup import RadioGroup
 from .select import Select
 from .switch import Switch
+from .tabs import Tab
+from .tabs import Tabs
 from .typography import Typography
diff --git a/chartlets.py/chartlets/components/radiogroup.py b/chartlets.py/chartlets/components/radiogroup.py
@@ -0,0 +1,42 @@
+from dataclasses import dataclass, field
+
+from chartlets import Component
+
+
+@dataclass(frozen=True)
+class Radio(Component):
+    """Select components are used for collecting user provided
+    information from a list of options."""
+
+    value: bool | int | float | str | None = None
+    """The value of the component. 
+    The DOM API casts this to a string.
+    """
+
+    label: str | None = None
+    """Button label. Optional."""
+
+
+@dataclass(frozen=True)
+class RadioGroup(Component):
+    """The Radio Group allows the user to select one option from a set.
+
+    Use radio buttons when the user needs to see all available options.
+    If available options can be collapsed, consider using a `Select`
+    component because it uses less space.
+
+    Radio buttons should have the most commonly used option selected
+    by default.
+    """
+
+    children: list[Radio] = field(default_factory=list)
+    """The list of radio buttons."""
+
+    label: str | None = None
+    """A label for the group. Optional"""
+
+    tooltip: str | None = None
+    """Tooltip title. Optional."""
+
+    dense: bool | None = None
+    """Dense styling with smaller radio buttons."""
diff --git a/chartlets.py/chartlets/components/tabs.py b/chartlets.py/chartlets/components/tabs.py
diff --git a/chartlets.py/tests/components/radiogroup_test.py b/chartlets.py/tests/components/radiogroup_test.py
diff --git a/chartlets.py/tests/components/tabs_test.py b/chartlets.py/tests/components/tabs_test.py
