12787 resizable layout component

frontend/app-development/features/overview/components/Navigation.test.tsx

@@ -7,7 +7,7 @@ import { renderWithProviders } from 'app-development/test/testUtils';
 import { APP_DEVELOPMENT_BASENAME } from 'app-shared/constants';
 import { TopBarMenu } from 'app-shared/enums/TopBarMenu';
 import { RepositoryType } from 'app-shared/types/global';
-import { typedLocalStorage } from 'app-shared/utils/webStorage';
+import { typedLocalStorage } from '@studio/components/src/hooks/webStorage';
 import type { TopBarMenuItem } from 'app-shared/types/TopBarMenuItem';
 
 describe('Navigation', () => {

frontend/app-development/features/textEditor/TextEditor.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { LangCode } from '@altinn/text-editor';
 import { TextEditor as TextEditorImpl, defaultLangCode } from '@altinn/text-editor';
 import { StudioPageSpinner } from '@studio/components';
-import { useLocalStorage } from 'app-shared/hooks/useLocalStorage';
+import { useLocalStorage } from '@studio/components/src/hooks/useLocalStorage';
 import { useSearchParams } from 'react-router-dom';
 import type { TextResourceIdMutation } from '@altinn/text-editor/types';
 import { useLanguagesQuery, useTextResourcesQuery } from '../../hooks/queries';

frontend/app-development/hooks/mutations/useAddLayoutSetMutation.ts

@@ -2,7 +2,7 @@ import { type UseMutateFunction, useMutation, useQueryClient } from '@tanstack/r
 import { useServicesContext } from 'app-shared/contexts/ServicesContext';
 import { QueryKey } from 'app-shared/types/QueryKey';
 import type { LayoutSetConfig, LayoutSets } from 'app-shared/types/api/LayoutSetsResponse';
-import { useLocalStorage } from 'app-shared/hooks/useLocalStorage';
+import { useLocalStorage } from '@studio/components/src/hooks/useLocalStorage';
 import type {
   AddLayoutSetResponse,
   LayoutSetsResponse,

frontend/app-development/layout/AppBar/appBarConfig.test.ts

@@ -1,6 +1,6 @@
 import { RepositoryType } from 'app-shared/types/global';
 import { getFilteredTopBarMenu, topBarMenuItem } from './appBarConfig';
-import { typedLocalStorage } from 'app-shared/utils/webStorage';
+import { typedLocalStorage } from '@studio/components/src/hooks/webStorage';
 import { TopBarMenu } from 'app-shared/enums/TopBarMenu';
 import type { TopBarMenuItem } from 'app-shared/types/TopBarMenuItem';
 import { RoutePaths } from 'app-development/enums/RoutePaths';

frontend/app-preview/src/views/LandingPage.tsx

@@ -3,7 +3,7 @@ import classes from './LandingPage.module.css';
 import { useTranslation } from 'react-i18next';
 import { usePreviewConnection } from 'app-shared/providers/PreviewConnectionContext';
 import { useInstanceIdQuery, useRepoMetadataQuery, useUserQuery } from 'app-shared/hooks/queries';
-import { useLocalStorage } from 'app-shared/hooks/useLocalStorage';
+import { useLocalStorage } from '@studio/components/src/hooks/useLocalStorage';
 import { AltinnHeader } from 'app-shared/components/altinnHeader';
 import type { AltinnHeaderVariant } from 'app-shared/components/altinnHeader/types';
 import { getRepositoryType } from 'app-shared/utils/repository';

frontend/dashboard/hooks/guards/useContextRedirectionGuard.ts

@@ -4,7 +4,7 @@ import { useSelectedContext } from '../useSelectedContext';
 import type { NavigateFunction } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { SelectedContextType } from 'app-shared/navigation/main-header/Header';
-import { typedSessionStorage } from 'app-shared/utils/webStorage';
+import { typedSessionStorage } from '@studio/components/src/hooks/webStorage';
 import { userHasAccessToSelectedContext } from 'dashboard/utils/userUtils';
 
 export type UseRedirectionGuardResult = {

frontend/language/src/en.json

@@ -450,12 +450,14 @@
   "language.za": "Zhuang",
   "language.zh": "Chinese",
   "language.zu": "Zulu",
+  "left_menu.close_components": "Close components",
   "left_menu.components": "Components",
   "left_menu.configure_layout_sets": "Convert form to handle multiple groups of pages",
   "left_menu.configure_layout_sets_info": "NB, this action will change the folder structure of your application. Read more at <0 href=\"{{layoutSetsDocs}}\" >Altinn Docs</0> for details of what this involves.",
   "left_menu.configure_layout_sets_name": "Name of first group:",
   "left_menu.layout_sets": "Groups of pages",
   "left_menu.layout_sets_add": "Add new group",
+  "left_menu.open_components": "Open components",
   "left_menu.pages.invalid_page_data": "The page contains invalid data and cannot be shown. Please check all component IDs and references to components from groups.",
   "left_menu.pages_error_empty": "Can not be empty",
   "left_menu.pages_error_format": "Must consist of letters (a-z), numbers, or \"-\", \"_\" and \".\"",

frontend/language/src/nb.json

@@ -605,6 +605,7 @@
   "language.za": "Zhuang",
   "language.zh": "Kinesisk",
   "language.zu": "Zulu",
+  "left_menu.close_components": "Lukk komponenter",
   "left_menu.components": "Komponenter",
   "left_menu.configure_layout_sets": "Konverter skjema til å håndtere sidegrupper",
   "left_menu.configure_layout_sets_info": "Obs, ved å velge denne handlingen endrer du mappestrukturen i applikasjonen. Les mer om hva det vil si på <0 href=\"{{layoutSetsDocs}}\" >Altinn Docs</0>.",
@@ -613,6 +614,7 @@
   "left_menu.layout_sets": "Sidegrupper",
   "left_menu.layout_sets_add": "Legg til ny sidegruppe",
   "left_menu.no_components_selected": "Velg en side for å se komponenter",
+  "left_menu.open_components": "Åpne komponenter",
   "left_menu.pages.invalid_page_data": "Siden inneholder ugyldig data, og kan ikke vises. Kontroller alle komponent-ID-er og referanser til komponenter fra grupper.",
   "left_menu.pages_error_empty": "Kan ikke være tom",
   "left_menu.pages_error_format": "Må bestå av bokstaver (a-z), tall, eller \"-\", \"_\" og \".\"",

frontend/libs/studio-components/src/components/StudioResizableLayout/StudioResizableLayout.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import { Heading, Paragraph } from '@digdir/design-system-react';
+import * as StudioResizableLayoutStories from './StudioResizableLayout.stories';
+
+<Meta of={StudioResizableLayoutStories} />
+
+<Heading level={1} size='small'>
+  StudioResizableLayout
+</Heading>
+<Paragraph>
+  StudioResizableLayout is used to create resizable layouts with mouse dragging and keyboard
+  support. Arrow keys can be used to resize the layout when the separator handle is focused.
+</Paragraph>
+
+<Canvas of={StudioResizableLayoutStories.Preview} />

frontend/libs/studio-components/src/components/StudioResizableLayout/StudioResizableLayout.stories.tsx

@@ -0,0 +1,62 @@
+import type { StoryFn, Meta } from '@storybook/react/*';
+import React from 'react';
+import type { StudioResizableLayoutContainerProps } from './StudioResizableLayoutContainer/StudioResizableLayoutContainer';
+import { StudioResizableLayoutContainer } from './StudioResizableLayoutContainer/StudioResizableLayoutContainer';
+import { StudioResizableLayoutElement } from './StudioResizableLayoutElement/StudioResizableLayoutElement';
+
+type PreviewProps = {
+  topContainerOrientation: StudioResizableLayoutContainerProps['orientation'];
+  subContainerOrientation: StudioResizableLayoutContainerProps['orientation'];
+};
+
+type Story = StoryFn<PreviewProps>;
+const meta: Meta = {
+  title: 'Studio/StudioResizableLayoutContainer',
+  component: StudioResizableLayoutContainer,
+};
+
+export const Preview: Story = (args): React.ReactElement => (
+  <div>
+    <StudioResizableLayoutContainer
+      orientation={args.topContainerOrientation}
+      style={{ width: 900, height: 800 }}
+    >
+      <StudioResizableLayoutElement style={{ backgroundColor: '#A1A1A1' }}>
+        <div>
+          lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua
+        </div>
+      </StudioResizableLayoutElement>
+      <StudioResizableLayoutElement>
+        <StudioResizableLayoutContainer orientation={args.subContainerOrientation}>
+          <StudioResizableLayoutElement style={{ backgroundColor: '#C1C1C1' }}>
+            <div>
+              lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua
+            </div>
+          </StudioResizableLayoutElement>
+          <StudioResizableLayoutElement style={{ backgroundColor: '#D1D1D1' }}>
+            <div>
+              lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua
+            </div>
+          </StudioResizableLayoutElement>
+        </StudioResizableLayoutContainer>
+      </StudioResizableLayoutElement>
+      <StudioResizableLayoutElement style={{ backgroundColor: '#F1F1F1' }}>
+        <div>
+          lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua
+        </div>
+      </StudioResizableLayoutElement>
+    </StudioResizableLayoutContainer>
+  </div>
+);
+
+// TODO: use group story
+
+Preview.args = {
+  topContainerOrientation: 'vertical',
+  subContainerOrientation: 'horizontal',
+};
+export default meta;

frontend/libs/studio-components/src/components/StudioResizableLayout/StudioResizableLayoutContainer/StudioResizableLayoutContainer.module.css

@@ -0,0 +1,5 @@
+.root {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}

frontend/libs/studio-components/src/components/StudioResizableLayout/StudioResizableLayoutContainer/StudioResizableLayoutContainer.test.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import type { StudioResizableLayoutContainerProps } from './StudioResizableLayoutContainer';
+import { StudioResizableLayoutContainer } from './StudioResizableLayoutContainer';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { StudioResizableLayoutElement } from '../StudioResizableLayoutElement/StudioResizableLayoutElement';
+
+describe('StudioResizableLayoutContainer', () => {
+  it('should render just one handle with two elements', () => {
+    renderStudioResizableLayoutContainer();
+    expect(screen.getAllByRole('separator').length).toBe(1);
+  });
+
+  it('should resize containers', () => {
+    renderStudioResizableLayoutContainer();
+    const handle = screen.getByRole('separator');
+
+    dragHandle(handle, { clientX: 400 }, { clientX: 200 });
+
+    expect(screen.getAllByTestId('resizablelayoutelement')[0].style.flexGrow).toBe('0.5');
+    expect(screen.getAllByTestId('resizablelayoutelement')[1].style.flexGrow).toBe('1.5');
+  });
+
+  it('should not resize containers below minimum size', () => {
+    // minimum flexgrow should be minimumSize/containerSize=0.25
+    renderStudioResizableLayoutContainer();
+    const handle = screen.getByRole('separator');
+
+    dragHandle(handle, { clientX: 400 }, { clientX: 0 });
+    expect(screen.getAllByTestId('resizablelayoutelement')[0].style.flexGrow).toBe('0.25');
+    expect(screen.getAllByTestId('resizablelayoutelement')[1].style.flexGrow).toBe('1.75');
+
+    dragHandle(handle, { clientX: 0 }, { clientX: 800 });
+    expect(screen.getAllByTestId('resizablelayoutelement')[0].style.flexGrow).toBe('1.75');
+    expect(screen.getAllByTestId('resizablelayoutelement')[1].style.flexGrow).toBe('0.25');
+  });
+
+  it('should not resize containers above maximum size', () => {
+    renderStudioResizableLayoutContainer(600);
+    const handle = screen.getByRole('separator');
+
+    dragHandle(handle, { clientX: 400 }, { clientX: 800 });
+    expect(screen.getAllByTestId('resizablelayoutelement')[0].style.flexGrow).toBe('1.5');
+    expect(screen.getAllByTestId('resizablelayoutelement')[1].style.flexGrow).toBe('0.5');
+  });
+});
+
+const dragHandle = (
+  handle: HTMLElement,
+  from: { clientX?: number; clientY?: number },
+  to: { clientX?: number; clientY?: number },
+) => {
+  fireEvent.mouseDown(handle, from);
+  fireEvent.mouseMove(handle, to);
+  fireEvent.mouseUp(handle, to);
+};
+
+const renderStudioResizableLayoutContainer = (
+  maximumSize = 800,
+  collapsed = false,
+  props: Partial<StudioResizableLayoutContainerProps> = {},
+) => {
+  Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+    value: 400,
+  });
+  return render(
+    <StudioResizableLayoutContainer
+      style={{ width: 800, height: 800 }}
+      orientation='horizontal'
+      {...props}
+    >
+      <StudioResizableLayoutElement
+        minimumSize={100}
+        maximumSize={maximumSize}
+        collapsed={collapsed}
+        collapsedSize={400}
+      >
+        <div>test1</div>
+      </StudioResizableLayoutElement>
+      <StudioResizableLayoutElement
+        minimumSize={100}
+        maximumSize={maximumSize}
+        collapsed={collapsed}
+        collapsedSize={400}
+      >
+        <div>test1</div>
+      </StudioResizableLayoutElement>
+    </StudioResizableLayoutContainer>,
+  );
+};

frontend/libs/studio-components/src/components/StudioResizableLayout/StudioResizableLayoutContainer/StudioResizableLayoutContainer.tsx

@@ -0,0 +1,82 @@
+import type { CSSProperties, ReactElement } from 'react';
+import React, { Children, useEffect, useRef } from 'react';
+import classes from './StudioResizableLayoutContainer.module.css';
+import { type StudioResizableLayoutElementProps } from '../StudioResizableLayoutElement/StudioResizableLayoutElement';
+import { useStudioResizableLayoutFunctions } from '../hooks/useStudioResizableFunctions';
+import { useTrackContainerSizes } from '../hooks/useTrackContainerSizes';
+import { StudioResizableLayoutContext } from '../context/StudioResizableLayoutContext';
+
+export const ORIENTATIONS = ['horizontal', 'vertical'] as const;
+export type StudioResizableOrientation = (typeof ORIENTATIONS)[number];
+export const horizontal: StudioResizableOrientation = 'horizontal';
+export const vertical: StudioResizableOrientation = 'vertical';
+
+export type StudioResizableLayoutContainerProps = {
+  localStorageContext?: string;
+  orientation: StudioResizableOrientation;
+  style?: CSSProperties;
+
+  children: ReactElement<StudioResizableLayoutElementProps>[];
+};
+
+const StudioResizableLayoutContainer = ({
+  children,
+  orientation,
+  localStorageContext = 'default',
+  style,
+}: StudioResizableLayoutContainerProps): ReactElement => {
+  const elementRefs = useRef<(HTMLDivElement | null)[]>([]);
+  useEffect(() => {
+    elementRefs.current = elementRefs.current.slice(0, getValidChildren(children).length);
+  }, [children]);
+
+  const { containerSizes, setContainerSizes } = useTrackContainerSizes(localStorageContext);
+  const { resizeTo, resizeDelta } = useStudioResizableLayoutFunctions(
+    orientation,
+    elementRefs,
+    getValidChildren(children),
+    (index, size) => setContainerSizes((prev) => ({ ...prev, [index]: size })),
+  );
+
+  const renderChildren = () => {
+    return Children.map(getValidChildren(children), (child, index) => {
+      const hasNeighbour = index < getValidChildren(children).length - 1;
+      return React.cloneElement(child, {
+        index,
+        hasNeighbour,
+        ref: (element: HTMLDivElement) => (elementRefs.current[index] = element),
+      });
+    });
+  };
+
+  return (
+    <StudioResizableLayoutContext.Provider
+      value={{ resizeDelta, resizeTo, orientation, containerSizes }}
+    >
+      <div
+        className={classes.root}
+        style={{ ...style, flexDirection: orientation === 'horizontal' ? 'row' : 'column' }}
+      >
+        {renderChildren()}
+      </div>
+    </StudioResizableLayoutContext.Provider>
+  );
+};
+
+const getValidChildren = (
+  children: React.ReactElement<
+    StudioResizableLayoutElementProps,
+    string | React.JSXElementConstructor<any>
+  >[],
+) => {
+  return Children.map(children, (child) => {
+    if (!child) {
+      return;
+    }
+    return child;
+  }).filter((child) => !!child);
+};
+
+StudioResizableLayoutContainer.displayName = 'StudioResizableLayout.Container';
+
+export { StudioResizableLayoutContainer as StudioResizableLayoutContainer };

frontend/libs/studio-components/src/components/StudioResizableLayout/StudioResizableLayoutElement/StudioResizableLayoutElement.module.css

@@ -0,0 +1,11 @@
+.container {
+  display: flex;
+  overflow: auto;
+  position: relative;
+  flex: 1;
+}
+
+.resizingOverlay {
+  position: absolute;
+  z-index: 100;
+}