Merge branch 'main' into forman-x-dont_render_falsifying_children

forman · web-flow · commit e753d888365f · 2024-11-22T14:28:52.000+01:00
diff --git a/chartlets.js/CHANGES.md b/chartlets.js/CHANGES.md
@@ -3,6 +3,9 @@
 * Replacing entire components if a related component `StateChange` 
   has an empty `property`. (#38)
 
+* Added handy hooks `useContributions` and `useComponentChangeHandlers`.
+
+
 ## Version 0.0.22 (from 2024/11/19)
 
 * Improved robustness while rendering the in `Select` component
diff --git a/chartlets.js/src/demo/components/PanelsControl.tsx b/chartlets.js/src/demo/components/PanelsControl.tsx
@@ -2,12 +2,13 @@ import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormGroup from "@mui/material/FormGroup";
 
+import { useContributions } from "@/lib";
 import { hidePanel } from "@/demo/actions/hidePanel";
 import { showPanel } from "@/demo/actions/showPanel";
-import { usePanelStates } from "@/demo/hooks";
+import type { PanelState } from "@/demo/types";
 
 function PanelsControl() {
-  const panelStates = usePanelStates();
+  const panelStates = useContributions<PanelState>("panels");
   if (!panelStates) {
     // Ok, not ready yet
     return null;
diff --git a/chartlets.js/src/demo/components/PanelsRow.tsx b/chartlets.js/src/demo/components/PanelsRow.tsx
@@ -1,20 +1,18 @@
-import { type ComponentChangeEvent, handleComponentChange } from "@/lib";
-import { usePanelStates } from "@/demo/hooks";
+import type { PanelState } from "@/demo/types";
+import { useComponentChangeHandlers, useContributions } from "@/lib/hooks";
 import Panel from "./Panel";
 
 function PanelsRow() {
-  const panelStates = usePanelStates();
+  const panelStates = useContributions<PanelState>("panels");
+  const panelChangeHandlers = useComponentChangeHandlers(
+    "panels",
+    panelStates?.length || 0,
+  );
   if (!panelStates) {
     // Ok, not ready yet
     return null;
   }
 
-  const handlePanelChange = (
-    panelIndex: number,
-    panelEvent: ComponentChangeEvent,
-  ) => {
-    handleComponentChange("panels", panelIndex, panelEvent);
-  };
   const panels = panelStates.map((panelState, panelIndex) => {
     const { container, component, componentResult } = panelState;
     return (
@@ -24,7 +22,7 @@ function PanelsRow() {
         componentProps={component}
         componentStatus={componentResult.status}
         componentError={componentResult.error}
-        onChange={(e) => handlePanelChange(panelIndex, e)}
+        onChange={panelChangeHandlers[panelIndex]}
       />
     );
   });
diff --git a/chartlets.js/src/demo/hooks.ts b/chartlets.js/src/demo/hooks.ts
diff --git a/chartlets.js/src/lib/actions/helpers/applyStateChangeRequests.test.ts b/chartlets.js/src/lib/actions/helpers/applyStateChangeRequests.test.ts
@@ -114,7 +114,7 @@ describe("Test that applyComponentStateChange()", () => {
     expect(newState).toBe(componentTree);
   });
 
-  it("replaces state if no property given", () => {
+  it("replaces state if property is empty string", () => {
     const value: BoxState = {
       type: "Box",
       id: "b1",
diff --git a/chartlets.js/src/lib/hooks.ts b/chartlets.js/src/lib/hooks.ts
@@ -2,6 +2,11 @@ import type { StoreState } from "@/lib/types/state/store";
 import { store } from "@/lib/store";
 import { useMemo } from "react";
 import type { ContributionState } from "@/lib/types/state/contribution";
+import type {
+  ComponentChangeEvent,
+  ComponentChangeHandler,
+} from "@/lib/types/state/event";
+import { handleComponentChange } from "@/lib/actions/handleComponentChange";
 
 const selectConfiguration = (state: StoreState) => state.configuration;
 
@@ -32,3 +37,44 @@ export function makeContributionsHook<S extends object = object>(
     }, [contributions]);
   };
 }
+
+/**
+ * A hook that retrieves the contributions for the given contribution
+ * point given by `contribPoint`.
+ *
+ * @param contribPoint Contribution point name.
+ * @typeParam S Type of the container state.
+ */
+export function useContributions<S extends object = object>(
+  contribPoint: string,
+): ContributionState<S>[] {
+  const contributionsRecord = useContributionsRecord();
+  return contributionsRecord[contribPoint] as ContributionState<S>[];
+}
+
+/**
+ * A hook that creates an array of length `numContribs` with stable
+ * component change handlers of type `ComponentChangeHandler` for
+ * the contribution point given by `contribPoint`.
+ *
+ * @param contribPoint Contribution point name.
+ * @param numContribs Number of contributions. This should be the length
+ *   of the array of contributions you get using the `useContributions` hook.
+ */
+export function useComponentChangeHandlers(
+  contribPoint: string,
+  numContribs: number,
+): ComponentChangeHandler[] {
+  return useMemo(
+    () =>
+      Array.from({ length: numContribs }).map(
+        (_, contribIndex) => (componentEvent: ComponentChangeEvent) =>
+          void handleComponentChange(
+            contribPoint,
+            contribIndex,
+            componentEvent,
+          ),
+      ),
+    [contribPoint, numContribs],
+  );
+}
diff --git a/chartlets.js/src/lib/index.ts b/chartlets.js/src/lib/index.ts
@@ -18,5 +18,7 @@ export {
   useExtensions,
   useContributionsResult,
   useContributionsRecord,
+  useContributions,
+  useComponentChangeHandlers,
   makeContributionsHook,
 } from "@/lib/hooks";
diff --git a/chartlets.py/CHANGES.md b/chartlets.py/CHANGES.md
@@ -1,5 +1,8 @@
 ## Version 0.0.22 (in development)
 
+* Added progress components `CircularProgress`, `CircularProgressWithLabel`, 
+  `LinearProgress`, `LinearProgressWithLabel`.
+
 * Replacing components is now possible by using an 
   `Output` with `property` set to an empty string. (#38)
 
diff --git a/chartlets.py/chartlets/component.py b/chartlets.py/chartlets/component.py
@@ -31,6 +31,9 @@ class Component(ABC):
     label: str | None = None
     """HTML `label` attribute. Optional."""
 
+    color: str | None = None
+    """HTML `color` attribute. Optional."""
+
     children: list[Union["Component", str, None]] | None = None
     """Children used by many specific components. Optional."""
 
diff --git a/chartlets.py/chartlets/components/__init__.py b/chartlets.py/chartlets/components/__init__.py
@@ -1,6 +1,10 @@
 from .box import Box
 from .button import Button
 from .checkbox import Checkbox
+from .progress import CircularProgress
+from .progress import CircularProgressWithLabel
+from .progress import LinearProgress
+from .progress import LinearProgressWithLabel
 from .plot import Plot
 from .select import Select
 from .typography import Typography
diff --git a/chartlets.py/chartlets/components/progress.py b/chartlets.py/chartlets/components/progress.py
@@ -0,0 +1,49 @@
+from abc import ABC
+from dataclasses import dataclass, field
+from typing import Literal
+
+from chartlets import Component
+
+
+@dataclass(frozen=True)
+class Progress(Component, ABC):
+    """Progress indicators commonly known as spinners,
+    express an unspecified wait time or display the length of a process.
+    """
+
+    value: int | None = None
+    """Progress value in percent. Optional."""
+
+    variant: str | None = None
+    """Progress size. Example values: `"determinate"` or the default `"indeterminate"`."""
+
+
+@dataclass(frozen=True)
+class CircularProgress(Progress):
+    """Progress indicators commonly known as spinners,
+    express an unspecified wait time or display the length of a process.
+    """
+
+    size: str | int | None = None
+    """Progress size. Example values: `"30px"`, `40`, `"3rem"`."""
+
+
+@dataclass(frozen=True)
+class CircularProgressWithLabel(CircularProgress):
+    """Progress indicators commonly known as spinners,
+    express an unspecified wait time or display the length of a process.
+    """
+
+
+@dataclass(frozen=True)
+class LinearProgress(Progress):
+    """Progress indicators commonly known as spinners,
+    express an unspecified wait time or display the length of a process.
+    """
+
+
+@dataclass(frozen=True)
+class LinearProgressWithLabel(LinearProgress):
+    """Progress indicators commonly known as spinners,
+    express an unspecified wait time or display the length of a process.
+    """
diff --git a/chartlets.py/chartlets/components/typography.py b/chartlets.py/chartlets/components/typography.py
@@ -9,10 +9,23 @@ class Typography(Component):
     and efficiently as possible."""
 
     text: str | None = None
-    """Text to be displayed. Optional"""
+    """Text to be displayed."""
+
+    align: str | None = None
+    """Set the text-align on the component."""
 
     color: str | None = None
     """The color of the component."""
 
     variant: str | None = None
     """Applies the theme typography styles."""
+
+    gutterBottom: bool | None = None
+    """If True, the text will have a bottom margin."""
+
+    noWrap: bool | None = None
+    """If true, the text will not wrap, but instead will 
+    truncate with a text overflow ellipsis."""
+
+    component: str | None = None
+    """The HTML element used for the root node."""
diff --git a/chartlets.py/tests/component_test.py b/chartlets.py/tests/component_test.py
@@ -1,28 +1,47 @@
-import unittest
 from dataclasses import dataclass
+import json
+import unittest
+from typing import Any
+
 
 from chartlets import Component
 
 
+def make_base(component_cls: type):
+    class ComponentTestBase(unittest.TestCase):
+
+        cls = component_cls
+
+        def assert_is_json_serializable(
+            self, component: Component, expected_dict: dict[str, Any]
+        ):
+            self.assertIsInstance(component, Component)
+
+            actual_dict = component.to_dict()
+            self.assertIsInstance(actual_dict, dict)
+
+            serialized = json.dumps(actual_dict)
+            deserialized = json.loads(serialized)
+            self.assertEqual(expected_dict, deserialized)
+
+        def test_type_is_class_name(self):
+            component = self.cls()
+            self.assertIsInstance(component, Component)
+            self.assertEqual(self.cls.__name__, component.type)
+
+    return ComponentTestBase
+
+
 @dataclass(frozen=True)
 class Pin(Component):
     text: str = ""
 
 
 # noinspection PyMethodMayBeStatic
-class ComponentTest(unittest.TestCase):
-    pin = Pin(id="p12", text="hello!", style={"color": "red"})
-
-    def test_attributes(self):
-        pin = self.pin
-        self.assertEqual("Pin", pin.type)
-        self.assertEqual("p12", pin.id)
-        self.assertEqual("hello!", pin.text)
-        self.assertEqual({"color": "red"}, pin.style)
-
-    def test_to_dict(self):
-        pin = self.pin
-        self.assertEqual(
+class ComponentTest(make_base(Pin)):
+
+    def test_is_json_serializable(self):
+        self.assert_is_json_serializable(
+            self.cls(id="p12", text="hello!", style={"color": "red"}),
             {"type": "Pin", "id": "p12", "text": "hello!", "style": {"color": "red"}},
-            pin.to_dict(),
         )
diff --git a/chartlets.py/tests/components/box_test.py b/chartlets.py/tests/components/box_test.py
@@ -1,22 +1,24 @@
-import json
-import unittest
-
 from chartlets.components import Box
+from tests.component_test import make_base
 
 
-class BoxTest(unittest.TestCase):
+class BoxTest(make_base(Box)):
 
     def test_is_json_serializable(self):
-        box = Box(
-            children=[
-                Box(id="b1"),
-                Box(id="b2"),
-            ]
+        self.assert_is_json_serializable(
+            self.cls(
+                children=[
+                    Box(id="b1"),
+                    Box(id="b2"),
+                ],
+                style={"color": "grey", "display": "flex"},
+            ),
+            {
+                "type": "Box",
+                "children": [
+                    {"children": [], "id": "b1", "type": "Box"},
+                    {"children": [], "id": "b2", "type": "Box"},
+                ],
+                "style": {"color": "grey", "display": "flex"},
+            },
         )
-
-        d = box.to_dict()
-        self.assertIsInstance(d, dict)
-        self.assertIsInstance(d.get("children"), list)
-        json_text = json.dumps(d)
-        self.assertEqual("{", json_text[0])
-        self.assertEqual("}", json_text[-1])
diff --git a/chartlets.py/tests/components/button_test.py b/chartlets.py/tests/components/button_test.py
@@ -0,0 +1,11 @@
+from chartlets.components import Button
+from tests.component_test import make_base
+
+
+class ButtonTest(make_base(Button)):
+
+    def test_is_json_serializable(self):
+        self.assert_is_json_serializable(
+            self.cls(text="Update"),
+            {"type": "Button", "text": "Update"},
+        )
diff --git a/chartlets.py/tests/components/checkbox_test.py b/chartlets.py/tests/components/checkbox_test.py
@@ -0,0 +1,11 @@
+from chartlets.components import Checkbox
+from tests.component_test import make_base
+
+
+class CheckboxTest(make_base(Checkbox)):
+
+    def test_is_json_serializable(self):
+        self.assert_is_json_serializable(
+            self.cls(value=True, label="Auto-safe"),
+            {"type": "Checkbox", "value": True, "label": "Auto-safe"},
+        )
diff --git a/chartlets.py/tests/components/plot_test.py b/chartlets.py/tests/components/plot_test.py
diff --git a/chartlets.py/tests/components/progress_test.py b/chartlets.py/tests/components/progress_test.py
diff --git a/chartlets.py/tests/components/select_test.py b/chartlets.py/tests/components/select_test.py
diff --git a/chartlets.py/tests/components/typography_test.py b/chartlets.py/tests/components/typography_test.py
