Continue CSF Next migration and use fullscreen layout as default

apps/storybook/.storybook/preview.ts

@@ -9,6 +9,8 @@ export default definePreview({
   addons: [addonDocs(), addonLinks()],
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: { sort: 'requiredFirst', disableSaveFromUI: true },
+    layout: 'fullscreen',
     options: {
       storySort: {
         order: [

apps/storybook/src/Annotation.stories.tsx

@@ -15,10 +15,6 @@ import { formatCoord } from './utils';
 const meta = preview.meta({
   title: 'Building Blocks/Annotation',
   component: Annotation,
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   decorators: [
     (Story) => (
       <VisCanvas

apps/storybook/src/AxialSelectToZoom.stories.tsx

@@ -24,7 +24,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Interactions/AxialSelectToZoom',
   component: AxialSelectToZoom,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   argTypes: {
     axis: {
       control: { type: 'inline-radio' },

apps/storybook/src/AxialSelectionTool.stories.tsx

@@ -19,7 +19,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Interactions/AxialSelectionTool',
   component: AxialSelectionTool,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   argTypes: {
     axis: {
       control: { type: 'inline-radio' },

apps/storybook/src/ColorBar.stories.tsx

@@ -20,9 +20,6 @@ const meta = {
     ),
     FillHeight,
   ],
-  parameters: {
-    layout: 'fullscreen',
-  },
   argTypes: {
     domain: { control: false },
     domainMin: {

apps/storybook/src/DataCurve.stories.tsx

@@ -22,10 +22,6 @@ const meta = preview.meta({
   title: 'Building Blocks/DataCurve',
   component: DataCurve,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   argTypes: {
     abscissas: { control: false },
     ordinates: { control: false },

apps/storybook/src/DefaultInteractions.stories.tsx

@@ -19,7 +19,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Interactions/DefaultInteractions',
   component: DefaultInteractions,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   args: {
     pan: {},
     zoom: {},

apps/storybook/src/DimensionMapper.stories.tsx

@@ -8,7 +8,6 @@ const meta = preview.meta({
   title: 'Building Blocks/DimensionMapper',
   component: DimensionMapper,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   argTypes: {
     dimMapping: { control: false },
   },

apps/storybook/src/DomainControls.stories.tsx

@@ -4,9 +4,12 @@ import { useToggle } from '@react-hookz/web';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useEffect, useState } from 'react';
 
+import CenterTop from './decorators/CenterTop';
+
 const meta = {
   title: 'Toolbar/DomainControls',
   component: DomainControls,
+  decorators: [CenterTop],
   argTypes: {
     sliderDomain: { control: false },
     errors: { control: false },

apps/storybook/src/DomainSlider.stories.module.css

@@ -1,7 +1,6 @@
 .root {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
 }
 
 .sliderWrapper {
@@ -10,6 +9,11 @@
   --h5w-domainSlider-track--width: 12rem;
 }
 
+.info {
+  min-width: 25em;
+  padding-left: 0;
+}
+
 .resetBtn {
   margin-left: 0.75rem;
 }

apps/storybook/src/DomainSlider.stories.tsx

@@ -10,12 +10,14 @@ import { COLOR_SCALE_TYPES } from '@h5web/shared/vis-utils';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useEffect, useState } from 'react';
 
+import CenterTop from './decorators/CenterTop';
 import styles from './DomainSlider.stories.module.css';
 import { formatDomain } from './utils';
 
 const meta = {
   title: 'Toolbar/DomainSlider',
   component: DomainSlider,
+  decorators: [CenterTop],
   argTypes: {
     value: { control: false },
     safeVisDomain: { control: false },
@@ -77,7 +79,7 @@ export const Default = {
             }}
           />
         </div>
-        <ul>
+        <ul className={styles.info}>
           <li>
             Data domain: <code>{formatDomain(dataDomain)}</code>
           </li>

apps/storybook/src/DomainWidget.stories.tsx

@@ -3,12 +3,12 @@ import { COLOR_SCALE_TYPES } from '@h5web/shared/vis-utils';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 
-import DomainWidgetDecorator from './decorators/DomainWidgetDecorator';
+import CenterTop from './decorators/CenterTop';
 
 const meta = {
   title: 'Toolbar/DomainWidget',
   component: DomainWidget,
-  decorators: [DomainWidgetDecorator],
+  decorators: [CenterTop],
   args: {
     customDomain: [null, null],
     onCustomDomainChange: () => {},

apps/storybook/src/ErrorBars.stories.tsx

@@ -18,10 +18,6 @@ const meta = preview.meta({
   title: 'Building Blocks/ErrorBars',
   component: ErrorBars,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   argTypes: {
     abscissas: { control: false },
     ordinates: { control: false },

apps/storybook/src/FloatingControl.stories.tsx

@@ -8,7 +8,6 @@ const meta = preview.meta({
   title: 'Toolbar/FloatingControl',
   component: FloatingControl,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
 });
 
 export const Default = meta.story({

apps/storybook/src/Glyphs.stories.tsx

@@ -18,10 +18,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Glyphs',
   component: Glyphs,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   argTypes: {
     abscissas: { control: false },
     ordinates: { control: false },

apps/storybook/src/Guides.stories.tsx

@@ -13,7 +13,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Guides',
   component: Guides,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
 });
 
 export const Default = meta.story({

apps/storybook/src/HeatmapMesh.stories.tsx

@@ -36,7 +36,6 @@ const meta = preview.meta({
   title: 'Building Blocks/HeatmapMesh',
   component: HeatmapMesh,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen', controls: { sort: 'requiredFirst' } },
   argTypes: {
     scaleType: {
       control: { type: 'inline-radio' },

apps/storybook/src/HeatmapVis.stories.tsx

@@ -27,10 +27,6 @@ const meta = {
   title: 'Visualizations/HeatmapVis',
   component: HeatmapVis,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   args: {
     dataArray: twoD,
     domain,

apps/storybook/src/Histogram.stories.tsx

@@ -3,10 +3,12 @@ import { COLOR_SCALE_TYPES } from '@h5web/shared/vis-utils';
 import { useState } from 'react';
 
 import preview from '../.storybook/preview';
+import CenterTop from './decorators/CenterTop';
 
 const meta = preview.meta({
   title: 'Toolbar/Histogram',
   component: Histogram,
+  decorators: [CenterTop],
   argTypes: {
     scaleType: {
       control: { type: 'inline-radio' },
@@ -24,17 +26,27 @@ export const Default = meta.story({
     const [max, setMax] = useState(value[1]);
 
     return (
-      <>
-        <p style={{ marginTop: 0 }}>
-          Domain: [{min.toFixed(2)}, {max.toFixed(2)}]
-        </p>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '1rem',
+        }}
+      >
         <Histogram
           {...otherArgs}
           value={[min, max]}
           onChangeMin={setMin}
           onChangeMax={setMax}
         />
-      </>
+        <p>
+          Domain:{' '}
+          <code>
+            [{min.toFixed(2)}, {max.toFixed(2)}]
+          </code>
+        </p>
+      </div>
     );
   },
   args: {

apps/storybook/src/Html.stories.tsx

@@ -15,7 +15,6 @@ import FillHeight from './decorators/FillHeight';
 const meta = preview.meta({
   title: 'Building Blocks/Html',
   component: Html,
-  parameters: { layout: 'fullscreen' },
   decorators: [
     (Story) => (
       <VisCanvas

apps/storybook/src/Line.stories.tsx

@@ -18,10 +18,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Line',
   component: Line,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   argTypes: {
     abscissas: { control: false },
     ordinates: { control: false },

apps/storybook/src/LineVis.stories.tsx

@@ -32,10 +32,6 @@ const meta = {
   title: 'Visualizations/LineVis',
   component: LineVis,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   args: {
     dataArray: oneD,
     domain: undefined, // compute dynamically in each story based on scale type, errors and auxiliaries

apps/storybook/src/MatrixVis.stories.tsx

@@ -19,7 +19,6 @@ const meta = preview.meta({
   title: 'Visualizations/MatrixVis',
   component: MatrixVis,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
 });
 
 export const Default = meta.story({

apps/storybook/src/Menu.stories.tsx

@@ -3,13 +3,15 @@ import { useState } from 'react';
 import { MdIcecream } from 'react-icons/md';
 
 import preview from '../.storybook/preview';
+import CenterTop from './decorators/CenterTop';
 
 type Option = 'Bar' | 'Baz';
 const OPTIONS: Option[] = ['Bar', 'Baz'];
 
 const meta = preview.meta({
   title: 'Toolbar/Menu',
   component: Menu,
+  decorators: [CenterTop],
 });
 
 export const Default = meta.story({

apps/storybook/src/Overlay.stories.tsx

@@ -7,7 +7,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Overlay',
   component: Overlay,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   argTypes: {
     className: { control: false },
     style: { control: false },

apps/storybook/src/Pan.stories.tsx

@@ -14,7 +14,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Interactions/Pan',
   component: Pan,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   argTypes: {
     id: { control: false },
     button: {

apps/storybook/src/PreventDefaultContextMenu.stories.tsx

@@ -15,7 +15,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Interactions/PreventDefaultContextMenu',
   component: PreventDefaultContextMenu,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   argTypes: {
     when: {
       control: { type: 'inline-check' },