LayoutPanels (WIP)

Description

the LayoutPanels component helps create a 2 to 3 panel layout commonly used with mapping applications (this does not include other app layout like the header and footer). Panels can be toggled open and closed with overridable button tabs. Optionally panels can also be configured to have width resized by the user dragging an inner edge.

You can preview the LayoutPanels Storybook here and view an example app here.

Current available props (this section will be polished up later!)

children: ReactNode;

Content for the main non-panel content. Typically where the map would go.

isLeftPanelOpen?: boolean;

Optional override to manually control panel visibility from consuming code.

isLeftPanelResizable?: boolean;

Config option to allow the user to drag a panel's inner edge to resize width.

isLeftPanelToggleable?: boolean;

Config option to allow the user to open and close.

isRightPanelOpen?: boolean;

Optional override to manually control panel visibility from consuming code.

isRightPanelResizable?: boolean;

Config option to allow the user to drag a panel's inner edge to resize width.

isRightPanelToggleable?: boolean;

Config option to allow the user to open and close.

isSubpanelOpen?: boolean;

Optional override to manually control panel visibility from consuming code.

leftPanelClassName?: string;

CSS classname to override panel styles.

leftPanelContent?: ReactNode;

Content for the left panel

leftPanelToggleButton?: ReactElement;

Optional override default visibility toggle button.

rightPanelClassName?: string;

CSS classname to overide panel styles.

rightPanelContent?: ReactNode;

Content for the right panel

rightPanelToggleButton?: ReactElement;

Optional override default visibility toggle button.

setIsLeftPanelOpen?: Dispatch<SetStateAction<boolean>>;

Optional override to manually control panel visibility from consuming code.

setIsRightPanelOpen?: Dispatch<SetStateAction<boolean>>;

Optional override to manually control panel visibility from consuming code.

setIsSubpanelOpen?: Dispatch<SetStateAction<boolean>>;

Optional override to manually control panel visibility from consuming code.

subpanelClassName?: string;

CSS classname to overide panel styles.

subpanelContent?: ReactNode;

Content for the subpanel

Getting started - consuming the component in your own app.

1. Set up a React app. For example run yarn create vite appName --template react-ts and follow instructions for setting up a React app as documented here. The install guide assumes you are using modern React and Vite.

2. Copy the LayoutPanels folder in src/components in this repo into your codebase. If you are starting from scratch with the above example, you might put this LayoutPanels component into your project's src or src/components folder.

3. Add vitest and @testing-library to your project. yarn add -D vitest @testing-library/jest-dom @testing-library/react @testing-library/user-event. Or optionally, but less ideal, you can remove any test files copied in the previous step.

4. Add Sass. yarn add -D sass.

5. Add supporting type dependencies to your project. yarn add -D @types/react-dom @types/react

6. Configure testing and other types in your typescript config file. compilerOptions.types should include vitest/globals and @testing-library/jest-dom

7. Ensure the container the LayoutPanels component renders in has width and height set. LayoutPanels will fit to the dimensions of its parent and will not work properly if its ancestors don't have dimensions set properly to accommodate this. Typically the aim of LayoutPanels would be to fill any remainder of the screen not taken up by a header and footer.

   • For convenience you can copy a LayoutApp folder from src/components/ and paste it into your app. You may use this as a parent to LayoutPanels. It has the following optional props for header and footer content:
     • footerContent
     • headerContent

Getting started - for LayoutPanel devs (to edit this repo)

• make sure you are using the right node version (check .nvmrc or run nvm use)
• run yarn install
• run yarn dev

Launching Storybook

• run yarn storybook

Development notes:

• Our current folder structure and location of code is to prioritize easy copy pasting of the LayoutPanels component. This is due to the nature of our consulting work and this abstraction being produced and maintained in a side-of-the-desk capacity. We're experimenting with this approach to prevent blocking project work and also prevent rushed and reactionary PR requests to this repo.