CUI-156 Add new admin components directory with microfrontend container

src/admin_components/Container/MicrofrontendContainer.module.scss

@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+.container {
+  margin: 1.5rem 2rem 1rem;
+  max-width: 75rem;
+}
+
+.full-width {
+  max-width: unset;
+}

src/admin_components/Container/MicrofrontendContainer.test.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React from "react";
+import { render } from "@testing-library/react";
+import { MicrofrontendContainer, Props } from "./MicrofrontendContainer";
+
+const createMicrofrontendContainer = (props?: Props) => {
+  const queries = render(
+    <MicrofrontendContainer
+      {...props}
+      data-testid="microfrontend-container"
+    ></MicrofrontendContainer>
+  );
+  const microfrontendContainer = queries.getByTestId("microfrontend-container");
+
+  return {
+    ...queries,
+    microfrontendContainer
+  };
+};
+
+describe("MicrofrontendContainer component", () => {
+  test("should render without crashing", () => {
+    const { microfrontendContainer } = createMicrofrontendContainer();
+
+    expect(microfrontendContainer).toBeDefined();
+    expect(microfrontendContainer.className).not.toContain("full-width");
+  });
+
+  test("should render with full-width class", () => {
+    const { microfrontendContainer } = createMicrofrontendContainer({ fullWidth: true });
+
+    expect(microfrontendContainer).toBeDefined();
+    expect(microfrontendContainer.className).toContain("full-width");
+  });
+});

src/admin_components/Container/MicrofrontendContainer.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ForwardRefRenderFunction, HTMLProps } from "react";
+import classes from "./MicrofrontendContainer.module.scss";
+
+export interface Props extends HTMLProps<HTMLDivElement> {
+  fullWidth?: boolean;
+}
+
+/*
+ *  FIXME: This component is meant to be moved to a separate UCL package when it's finished.
+ */
+export const MicrofrontendContainer: ForwardRefRenderFunction<HTMLDivElement, Props> = ({
+  fullWidth = false,
+  children,
+  ...rest
+}: Props) => {
+  const containerClasses: string[] = [];
+
+  fullWidth && containerClasses.push(classes["full-width"]);
+  containerClasses.push(classes["container"]);
+
+  return (
+    <div {...rest} className={containerClasses.join(" ")}>
+      {children}
+    </div>
+  );
+};

src/index.ts

@@ -175,3 +175,9 @@ export { DataGridCell } from "./components/DataGrid/DataGridBody/DataGridCell";
 export type { Props as DataGridCellProps } from "./components/DataGrid/DataGridBody/DataGridCell";
 export { Banner } from "./components/Notifications/Banner/Banner";
 export type { Props as BannerProps } from "./components/Notifications/Banner/Banner";
+
+/**
+ * Admin components
+ */
+export type { Props as MicrofrontendContainerProps } from "./admin_components/Container/MicrofrontendContainer";
+export { MicrofrontendContainer } from "./admin_components/Container/MicrofrontendContainer";

stories/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import {
   Breadcrumbs as BreadcrumbsComponent,
   Props
@@ -36,7 +36,7 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <BreadcrumbsComponent {...args} />;
+const Template: StoryFn<Props> = args => <BreadcrumbsComponent {...args} />;
 
 export const Breadcrumbs = Template.bind({});
 
@@ -58,7 +58,7 @@ Breadcrumbs.args = {
   ]
 };
 
-const TemplateWithReactRouter: Story<Props> = args => (
+const TemplateWithReactRouter: StoryFn<Props> = args => (
   <BrowserRouter>
     <BreadcrumbsComponent {...args} />
   </BrowserRouter>

stories/ContextMenu/ContextMenu.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { Fragment, useState } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import {
   ContextMenu as ContextMenuComponent,
   Props
@@ -24,10 +24,10 @@ import { ContextMenuItem } from "../../src/components/ContextMenu/ContextMenuIte
 import { action } from "@storybook/addon-actions";
 import { IconButton } from "../../src/components/Button/IconButton";
 import { Icon, Icons } from "../../src/components/Icon/Icon";
-import { Offset, Placement, horizontal, vertical } from "../../src/hooks/usePosition";
+import { Offset, Placement } from "../../src/hooks/usePosition";
 import ContextMenuDocumentation from "./ContextMenu.mdx";
 import { Typography } from "../../src/components/Typography/Typography";
-import { within, userEvent, waitFor, getByRole, getAllByRole } from "@storybook/testing-library";
+import { userEvent, waitFor, within } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
 import { useStoryCentring } from "../utils/useStoryCentring";
 import { conditionalPlay } from "../../.storybook/conditionalPlay";
@@ -63,7 +63,7 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => {
+const Template: StoryFn<Props> = args => {
   const [placement, setPlacement] = useState<Placement>({
     vertical: "bottom",
     horizontal: "left"

stories/Typography/Typography.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import {
   Props,
   Typography as TypographyComponent,
@@ -41,7 +41,9 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <TypographyComponent {...args}>content</TypographyComponent>;
+const Template: StoryFn<Props> = args => (
+  <TypographyComponent {...args}>content</TypographyComponent>
+);
 
 export const Typography = Template.bind({});
 

stories/admin/MicrofrontendContainer/MicrofrontendContainer.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Story, Title, Subtitle, ArgTypes, PRIMARY_STORY } from "@storybook/blocks";
+import * as MicrofrontendContainerStories from "./MicrofrontendContainer.stories.tsx";
+
+<Title />
+<Subtitle />
+
+The Microfrontend Container component is designed to simplify the implementation of responsive layouts and spacing management
+within microfrontend architectures. This component offers developers a straightforward solution for ensuring that content remains
+visually appealing and well-structured across various screen sizes and devices.
+
+At its core, the Microfrontend Container utilizes standard CSS techniques to adjust its size and layout based on the dimensions of the viewport.
+This ensures that content within the container adapts seamlessly to different screen sizes, providing a consistent user experience across desktops, tablets,
+and mobile devices. It comes with pre-applied margin properties.
+
+In essence, the Microfrontend Container streamlines the process of creating responsive and well-structured user interfaces within Admin UI container.
+By abstracting away the complexities of responsiveness and margin management, this component allows developers to focus on designing engaging
+content while ensuring a polished and cohesive user experience across all devices.
+
+The component is based on the following design: [LINK](https://www.figma.com/file/tZLMF6dw6LOSkmEhlV3rkF/UI-Patterns?type=design&node-id=2107%3A16959&mode=design&t=9UWjpVqhIeYZOXXR-1)
+
+# Props
+
+<ArgTypes story={PRIMARY_STORY} />

stories/admin/MicrofrontendContainer/MicrofrontendContainer.stories.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { Fragment } from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import MicrofrontendContainerDocumentation from "./MicrofrontendContainer.mdx";
+import {
+  MicrofrontendContainer as MicrofrontendContainerComponent,
+  Props
+} from "../../../src/admin_components/Container/MicrofrontendContainer";
+
+const meta: Meta = {
+  title: "Admin components/Microfrontend Container",
+  component: MicrofrontendContainerComponent,
+  parameters: {
+    docs: {
+      page: MicrofrontendContainerDocumentation
+    }
+  },
+  argTypes: {
+    fullWidth: {
+      description:
+        "In some cases, such as complex data tables, there might be a need to not limit the maximum width of the container.  <br/>"
+    }
+  }
+};
+
+export default meta;
+
+const Template: StoryFn<Props> = args => {
+  const outline = {
+    outlineColor: "black",
+    outlineWidth: "2px",
+    outlineStyle: "dashed"
+  };
+  const centerText = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  };
+
+  return (
+    <Fragment>
+      <div style={{ height: "5vw", ...outline, ...centerText }}>HEADER</div>
+      <div style={{ display: "flex" }}>
+        <div style={{ ...outline, ...centerText, width: "8vw" }}>NAV</div>
+        <MicrofrontendContainerComponent style={{ width: "100%" }} {...args}>
+          <div style={{ height: "50vw", ...outline, ...centerText }}>CONTENT</div>
+        </MicrofrontendContainerComponent>
+      </div>
+    </Fragment>
+  );
+};
+export const MicrofrontendContainer = Template.bind({});
+
+MicrofrontendContainer.args = {};
+
+export const MicrofrontendContainerFullWidth = Template.bind({});
+
+MicrofrontendContainerFullWidth.args = { fullWidth: true };
+
+MicrofrontendContainerFullWidth.parameters = {
+  chromatic: { viewports: [1440, 3440] }
+};