Export and document DomainControls

apps/storybook/src/DomainControls.stories.tsx

@@ -0,0 +1,73 @@
+import { DomainControls } from '@h5web/lib';
+import type { Domain } from '@h5web/shared';
+import { useToggle } from '@react-hookz/web';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect, useState } from 'react';
+
+const meta = {
+  title: 'Toolbar/DomainControls',
+  component: DomainControls,
+  argTypes: {
+    sliderDomain: { control: false },
+    errors: { control: false },
+    isAutoMin: { control: false },
+    isAutoMax: { control: false },
+    isEditingMin: { control: false },
+    isEditingMax: { control: false },
+  },
+} satisfies Meta<typeof DomainControls>;
+
+export default meta;
+type Story = StoryObj<typeof DomainControls>;
+
+export const Default = {
+  render: (args) => {
+    const { dataDomain } = args;
+
+    const [sliderDomain, setSliderDomain] = useState<Domain>(dataDomain);
+    const [isAutoMin, toggleAutoMin] = useToggle();
+    const [isAutoMax, toggleAutoMax] = useToggle();
+    const [isEditingMin, toggleEditingMin] = useToggle();
+    const [isEditingMax, toggleEditingMax] = useToggle();
+
+    useEffect(() => {
+      setSliderDomain(dataDomain);
+    }, [dataDomain]);
+
+    return (
+      <div style={{ maxWidth: '18rem' }}>
+        <DomainControls
+          sliderDomain={sliderDomain}
+          dataDomain={dataDomain}
+          errors={{}}
+          isAutoMin={isAutoMin}
+          isAutoMax={isAutoMax}
+          onAutoMinToggle={() => {
+            toggleAutoMin();
+            if (!isAutoMin) {
+              setSliderDomain([dataDomain[0], sliderDomain[1]]);
+              toggleEditingMin(false);
+            }
+          }}
+          onAutoMaxToggle={() => {
+            toggleAutoMax();
+            if (!isAutoMax) {
+              setSliderDomain([sliderDomain[0], dataDomain[1]]);
+              toggleEditingMax(false);
+            }
+          }}
+          isEditingMin={isEditingMin}
+          isEditingMax={isEditingMax}
+          onEditMin={toggleEditingMin}
+          onEditMax={toggleEditingMax}
+          onChangeMin={(val) => setSliderDomain([val, sliderDomain[1]])}
+          onChangeMax={(val) => setSliderDomain([sliderDomain[0], val])}
+          onSwap={() => setSliderDomain([sliderDomain[1], sliderDomain[0]])}
+        />
+      </div>
+    );
+  },
+  args: {
+    dataDomain: [4, 400],
+  },
+} satisfies Story;

packages/lib/src/index.ts

@@ -17,6 +17,7 @@ export { default as ToggleBtn } from './toolbar/controls/ToggleBtn';
 export { default as ToggleGroup } from './toolbar/controls/ToggleGroup';
 export { default as DomainWidget } from './toolbar/controls/DomainWidget/DomainWidget';
 export { default as DomainSlider } from './toolbar/controls/DomainWidget/DomainSlider';
+export { default as DomainControls } from './toolbar/controls/DomainWidget/DomainControls';
 export { default as ColorMapSelector } from './toolbar/controls/ColorMapSelector/ColorMapSelector';
 export { default as ScaleSelector } from './toolbar/controls/ScaleSelector/ScaleSelector';
 export { default as GridToggler } from './toolbar/controls/GridToggler';
@@ -30,6 +31,8 @@ export { default as Histogram } from './toolbar/controls/Histogram/Histogram';
 export type { ToolbarProps } from './toolbar/Toolbar';
 export type { DomainWidgetProps } from './toolbar/controls/DomainWidget/DomainWidget';
 export type { DomainSliderProps } from './toolbar/controls/DomainWidget/DomainSlider';
+export type { DomainControlsHandle } from './toolbar/controls/DomainWidget/DomainControls';
+export type { DomainControlsProps } from './toolbar/controls/DomainWidget/DomainControls';
 export type { HistogramProps } from './toolbar/controls/Histogram/Histogram';
 
 // Building blocks

packages/lib/src/toolbar/controls/DomainWidget/DomainControls.tsx

@@ -125,4 +125,5 @@ const DomainControls = forwardRef<Handle, Props>((props, ref) => {
 DomainControls.displayName = 'DomainControls';
 
 export type { Handle as DomainControlsHandle };
+export type { Props as DomainControlsProps };
 export default DomainControls;