@pautena/react-design-system 0.0.1 → 0.1.0

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import * as _mui_material from '@mui/material';
-import { PropTypes, LinkProps as LinkProps$1, AppBarProps as AppBarProps$1, DrawerProps as DrawerProps$1, SxProps, Theme, GridProps } from '@mui/material';
-import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
+import { PropTypes, LinkProps as LinkProps$1, AppBarProps as AppBarProps$1, DrawerProps as DrawerProps$1, SxProps, Theme, GridProps, Color } from '@mui/material';
 import * as React from 'react';
-import React__default, { PropsWithChildren, ReactNode, FunctionComponent, ReactElement } from 'react';
+import React__default, { FunctionComponent, ReactElement, PropsWithChildren, ReactNode } from 'react';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
 import { LinkProps } from 'react-router-dom';
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
-import { DataGridProps } from '@mui/x-data-grid';
+import { BasicModelInstance as BasicModelInstance$1 } from '~/generators';
 
 declare type HeaderPreset = PropTypes.Color | "transparent";
 declare type HeaderActionVariant = "text" | "outlined" | "contained";
@@ -40,7 +40,7 @@ declare type HeaderProps = {
     /**
      * Color palete used to render the component
      */
-    preset: HeaderPreset;
+    preset?: HeaderPreset;
     /**
      * List of breadcumbs to represent the path to reach
      * the page that we are
@@ -59,20 +59,15 @@ declare type HeaderProps = {
      * If is set, a list of tabs is dispayed at the bottom
      */
     tabs?: HeaderTab[];
-    /**
-     * Tab that has to be marked as selected
-     */
-    selectedTab?: number;
-    /**
-     * Callback executed when the user click a tab
-     */
-    onChangeTab?: (tab: HeaderTab, index: number) => void;
 };
+declare type HeaderComponent = FunctionComponent<HeaderProps>;
+declare type HeaderElement = ReactElement<HeaderProps, HeaderComponent>;
+
 /**
  * Section used to explain give basic information about the page
  * and put the main actions
  */
-declare const Header: ({ title, subtitle, preset, actionsVariant, breadcrumbs, actions, tabs, selectedTab, onChangeTab, }: HeaderProps) => JSX.Element;
+declare const Header: HeaderComponent;
 
 declare const LinkBehaviour: React__default.ForwardRefExoticComponent<Omit<LinkProps, "to"> & {
     href: LinkProps["to"];
@@ -118,14 +113,14 @@ declare type QueryContainerProps = PropsWithChildren<{
  */
 declare function QueryContainer({ isFetching, error, success, children }: QueryContainerProps): JSX.Element;
 
-interface Props$9 {
+interface Props$5 {
     title: string;
     subtitle: string;
     error?: Error;
     loading?: boolean;
     onSubmitSignIn: (email: string, password: string) => void;
 }
-declare function SignIn({ title, subtitle, loading, error, onSubmitSignIn }: Props$9): JSX.Element;
+declare function SignIn({ title, subtitle, loading, error, onSubmitSignIn }: Props$5): JSX.Element;
 
 interface TabPanelProps {
     children?: React__default.ReactNode;
@@ -133,15 +128,10 @@ interface TabPanelProps {
 }
 declare function TabPanel({ children, index }: TabPanelProps): JSX.Element;
 
-interface Props$8 {
+interface Props$4 {
     tabs: string[];
-    initialTab?: number;
 }
-declare const TabCard: ({ children, tabs, initialTab }: PropsWithChildren<Props$8>) => JSX.Element;
-
-declare const TabContext: React.Context<number>;
-declare const TabContextProvider: React.Provider<number>;
-declare const useTab: () => number;
+declare const TabCard: ({ children, tabs }: PropsWithChildren<Props$4>) => JSX.Element;
 
 declare type Order = "asc" | "desc";
 interface HeadCell {
@@ -151,15 +141,15 @@ interface HeadCell {
     numeric: boolean;
     sort: boolean;
 }
-interface Props$7 {
+interface Props$3 {
     onRequestSort: (property: string) => void;
     order: Order;
     orderBy: string;
     headCells: HeadCell[];
 }
-declare function EnhancedTableHead({ order, orderBy, headCells, onRequestSort }: Props$7): JSX.Element;
+declare function EnhancedTableHead({ order, orderBy, headCells, onRequestSort }: Props$3): JSX.Element;
 
-interface Props$6<T> {
+interface Props$2<T> {
     readonly data: T[];
     search?: boolean;
     defaultSort: string;
@@ -169,13 +159,13 @@ interface Props$6<T> {
     children: (data: T[]) => ReactNode;
 }
 declare const EnhancedTable: {
-    <T>({ children, data, search, columns, defaultSort, defaultOrder, loading, }: Props$6<T>): JSX.Element;
+    <T>({ children, data, search, columns, defaultSort, defaultOrder, loading, }: Props$2<T>): JSX.Element;
     defaultProps: {
         defaultOrder: string;
     };
 };
 
-interface Props$5<T> {
+interface Props$1<T> {
     data: T[];
     loading: boolean;
     defaultSort: string;
@@ -184,7 +174,7 @@ interface Props$5<T> {
     children: (data: T, index: number) => ReactNode;
     onRequestSort: (col: string, orderBy: "asc" | "desc") => void;
 }
-declare const EnhancedRemoteTable: <T>({ children, data, loading, columns, defaultSort, defaultOrder, onRequestSort, }: Props$5<T>) => JSX.Element;
+declare const EnhancedRemoteTable: <T>({ children, data, loading, columns, defaultSort, defaultOrder, onRequestSort, }: Props$1<T>) => JSX.Element;
 
 interface AppBarProfile {
     name: string;
@@ -197,6 +187,7 @@ interface AppBarProps extends AppBarProps$1 {
     onClickSignOut: () => void;
 }
 declare type AppBarComponent = FunctionComponent<AppBarProps>;
+declare type AppBarElement = ReactElement<AppBarProps, AppBarComponent>;
 
 declare const MiniAppBar: AppBarComponent;
 
@@ -279,10 +270,10 @@ declare const Drawer: DrawerComponent;
 
 declare const MiniDrawer: _emotion_styled.StyledComponent<DrawerProps & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
 
-declare type Props$4 = PropsWithChildren<{
+declare type Props = PropsWithChildren<{
     initialOpen?: boolean;
 }>;
-declare const DrawerProvider: ({ children, initialOpen }: Props$4) => JSX.Element;
+declare const DrawerProvider: ({ children, initialOpen }: Props) => JSX.Element;
 
 interface DrawerContextProps {
     isOpen: boolean;
@@ -293,16 +284,12 @@ declare const DrawerContext: React.Context<DrawerContextProps | undefined>;
 declare const UndefinedProvider: Error;
 declare const useDrawer: () => DrawerContextProps;
 
-interface BasicData {
-    id: string;
-    [key: string]: any;
-}
-interface TableRowOption<T extends BasicData> {
+interface TableRowOption<T extends BasicModelInstance$1> {
     id: string;
     label: string;
     onClick: (item: T) => void;
 }
-interface TableListProps<T extends BasicData> {
+interface TableListProps<T extends BasicModelInstance$1> {
     columns: HeadCell[];
     data: T[];
     search?: boolean;
@@ -312,7 +299,7 @@ interface TableListProps<T extends BasicData> {
     options?: TableRowOption<T>[];
     onClick?: (d: T) => void;
 }
-declare const TableList: <T extends BasicData>({ columns: columnsProp, options, data, onClick, search, defaultSort, defaultOrder, loading, }: TableListProps<T>) => JSX.Element;
+declare const TableList: <T extends BasicModelInstance$1>({ columns: columnsProp, options, data, onClick, search, defaultSort, defaultOrder, loading, }: TableListProps<T>) => JSX.Element;
 
 declare type IconColor = "inherit" | "action" | "disabled" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
 interface PlaceholderAction {
@@ -445,51 +432,33 @@ interface GroupValueCardProps {
 }
 declare const GroupValueCard: ({ title, subtitle, children }: GroupValueCardProps) => JSX.Element;
 
+declare type ContentProps = PropsWithChildren;
+declare type ContentComponent = FunctionComponent<ContentProps>;
+declare type ContentElement = ReactElement<ContentElement, ContentComponent>;
+
+declare const Content: ({ children }: ContentProps) => JSX.Element;
+
 declare const newArrayWithSize: <T>(size: number, fillValue: T) => any[];
 declare const getRandomItem: <T>(items: T[]) => {
     index: number;
     item: T;
 };
 
-declare const useGetDefaultThemeColor: ({ lightWeight, darkWeight }?: {
-    lightWeight?: number | undefined;
-    darkWeight?: number | undefined;
-}) => any;
-
-interface Props$3 {
-    loading?: boolean;
-    headerProps: HeaderProps;
-    emptyPlaceholderProps: PlaceholderProps;
-    dataGridProps: DataGridProps & {
-        height: number;
-    };
-}
-declare const DataTableLayout: ({ loading, headerProps, emptyPlaceholderProps, dataGridProps: { height, rows, ...restDataGridProps }, }: Props$3) => JSX.Element;
-
-interface Props$2 {
-    loading?: boolean;
-    headerProps: HeaderProps;
-}
-declare const HeaderLayout: ({ loading, headerProps, children }: PropsWithChildren<Props$2>) => JSX.Element;
+declare const useGetDefaultThemeColor: ({ lightWeight, darkWeight, }?: {
+    lightWeight?: keyof Color | undefined;
+    darkWeight?: keyof Color | undefined;
+}) => string;
 
-interface Props$1 {
-    headerProps: HeaderProps;
+interface AppBarWithDrawerLayoutProps {
+    children: [DrawerElement, AppBarElement, ReactNode];
 }
-declare const TabLayout: ({ headerProps, children }: PropsWithChildren<Props$1>) => JSX.Element;
+declare const AppBarWithDrawerLayout: ({ children: childrenProps, }: AppBarWithDrawerLayoutProps) => JSX.Element;
 
-interface ListLayoutProps<T extends BasicData> {
+interface HeaderLayoutProps {
     loading?: boolean;
-    headerProps: HeaderProps;
-    listProps: TableListProps<T>;
-    emptyPlaceholderProps: PlaceholderProps;
+    children: [HeaderElement, ContentElement];
 }
-declare const ListLayout: <T extends BasicData>({ loading, headerProps, emptyPlaceholderProps, listProps: { data, ...restListProps }, }: ListLayoutProps<T>) => JSX.Element;
-
-interface Props {
-    drawer: DrawerElement;
-    appBar: ReactElement<AppBarProps$1, AppBarComponent>;
-}
-declare const AppBarWithDrawerLayout: ({ drawer, appBar, children }: PropsWithChildren<Props>) => JSX.Element;
+declare const HeaderLayout: ({ loading, children }: HeaderLayoutProps) => JSX.Element;
 
 declare type Base = {
     id: string;
@@ -517,18 +486,22 @@ declare type SingleFields = StringField | NumberField | BooleanField;
 declare type GroupField = {
     type: "group";
     value: (Base & Breakpoints & SingleFields)[];
-};
+} & Base;
 declare type Fields = SingleFields | GroupField;
 declare type ModelField = Base & Breakpoints & Fields;
 declare type Model = {
     fields: ModelField[];
 };
+interface BasicModelInstance {
+    id: string;
+    [key: string]: any;
+}
 
-interface ObjectDetailsProps {
+interface ObjectDetailsProps<T extends BasicModelInstance> {
     model: Model;
-    instance: object;
+    instance: T;
 }
-declare const ObjectDetails: ({ model, instance }: ObjectDetailsProps) => JSX.Element;
+declare const ObjectDetails: <T extends BasicModelInstance>({ model, instance, }: ObjectDetailsProps<T>) => JSX.Element;
 
 interface RequestState {
     idle?: boolean;
@@ -536,59 +509,110 @@ interface RequestState {
     error?: string;
     success?: boolean;
 }
-interface ModelRouterProps {
+
+interface BaseScreenProps {
+    /**
+     * UI-friendly string that represents the model
+     */
     modelName: string;
+    /**
+     * Structure that represents the fields of the model
+     */
     model: Model;
-    requestList?: () => void;
-    list: {
-        data: any[];
-        onClickRemoveItem: (item: any) => void;
-        listRequest: RequestState;
-        requestDelete: RequestState;
-    };
-    add: {
-        onSubmit: (obj: object) => void;
-        request: RequestState;
-    };
-    detail: {
-        onScreenMount?: (id: string) => void;
-        request: RequestState;
-        instance?: any;
-    };
-    update: {
-        onSubmit: (obj: object) => void;
-        request: RequestState;
-        requestInstance: RequestState;
-        onRequestInstance: (id: string) => void;
-        instance?: any;
-    };
 }
-declare const ModelRouter: (props: ModelRouterProps) => JSX.Element;
 
-interface ModelFormProps {
-    model: Model;
-    initialValues?: object;
-    saveButtonText: string;
-    onSubmit: (values: object) => void;
+interface UpdateScreenProps<T extends BasicModelInstance$1> extends BaseScreenProps {
+    /**
+     * Callback executed when the user wants to update
+     * an item
+     */
+    onSubmitUpdateItem: (obj: T) => void;
+    /**
+     * Current status of the request to update an item
+     */
+    submitUpdateItemRequest: RequestState;
+    /**
+     * Current status of the request to retrieve
+     * the item to be updated
+     */
+    updateItemRequest: RequestState;
+    /**
+     * Callback executed to retrive the item that
+     * has to going tobe updated
+     */
+    onRequestUpdateItem: (id: string) => void;
+    /**
+     * Item that is going to be updated
+     */
+    updateItem?: T;
 }
-declare const ModelForm: ({ model, saveButtonText, onSubmit, initialValues, }: ModelFormProps) => JSX.Element;
 
-interface DetailsLayoutProps {
-    loading?: boolean;
-    headerProps: HeaderProps;
-    objectDetailsProps: {
-        model: Model;
-        instance?: object;
-    };
-    notFoundPlaceholderProps: PlaceholderProps;
+interface ListScreenProps<T extends BasicModelInstance$1> extends BaseScreenProps {
+    /**
+     * Callback executed each time the list screen
+     * requests for a data update
+     */
+    onRequestList: () => void;
+    /**
+     * List of items to be displayed in the list screen
+     */
+    listData: T[];
+    /**
+     * Callback executed when the user clicks an option
+     * to delete an item
+     */
+    onClickDeleteItem: (item: T) => void;
+    /**
+     * Current status of the request to retrieve
+     * the list items
+     */
+    listRequest: RequestState;
+    /**
+     * Current status of the request to delete
+     * an item
+     */
+    deleteRequest: RequestState;
 }
-declare const DetailsLayout: ({ loading, headerProps, notFoundPlaceholderProps, objectDetailsProps: { model, instance }, }: DetailsLayoutProps) => JSX.Element;
 
-interface FormLayoutProps {
-    loading?: boolean;
-    headerProps: HeaderProps;
-    modelFormProps: ModelFormProps;
+interface AddScreenProps<T extends BasicModelInstance$1> extends BaseScreenProps {
+    /**
+     * Callback executed when the user wants to
+     * add a new item
+     */
+    onSubmitNewItem: (obj: T) => void;
+    /**
+     * Current status of the request to retrieve
+     * add a new item
+     */
+    newItemRequest: RequestState;
+}
+
+interface DetailsScreenProps<T extends BasicModelInstance$1> extends BaseScreenProps {
+    /**
+     * Callback executed each time we want
+     * the details information of an item
+     */
+    onRequestItem: (id: string) => void;
+    /**
+     * Current status of the request to retrieve
+     * an item
+     */
+    itemRequest: RequestState;
+    /**
+     * Item to be displayed
+     */
+    detailsItem?: T;
+}
+
+declare type ModelRouterProps<T extends BasicModelInstance> = DetailsScreenProps<T> & ListScreenProps<T> & AddScreenProps<T> & UpdateScreenProps<T>;
+declare const ModelRouter: <T extends BasicModelInstance>(props: ModelRouterProps<T>) => JSX.Element;
+
+interface ModelFormProps<T extends BasicModelInstance> {
+    model: Model;
+    initialValues?: T;
+    saveButtonText: string;
+    onSubmit: (values: T) => void;
 }
-declare const FormLayout: ({ loading, headerProps, modelFormProps }: FormLayoutProps) => JSX.Element;
+declare const ModelForm: <T extends BasicModelInstance>({ model, saveButtonText, onSubmit, initialValues, }: ModelFormProps<T>) => JSX.Element;
 
-export { AppBarComponent, AppBarProfile, AppBarProps, AppBarWithDrawerLayout, BasicData, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, DataTableLayout, DetailsLayout, DetailsLayoutProps, Drawer, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerItem, DrawerItemProps, DrawerProps, DrawerProvider, DrawerSection, DrawerSectionProps, EnhancedRemoteTable, EnhancedTable, EnhancedTableHead, FormLayout, FormLayoutProps, GroupField, GroupValueCard, GroupValueCardProps, GroupValueItem, GroupValueItemComponent, GroupValueItemElement, GroupValueItemProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderLayout, HeaderPreset, HeaderProps, HeaderTab, Label, LabelProps, LabelVariant, Link, LinkBehaviour, ListLayout, ListLayoutProps, MiniAppBar, MiniDrawer, Model, ModelField, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Nav, NavItem, NavItemAvatar, NavItemBullet, NavItemLabel, NavSection, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, SignIn, TabCard, TabContext, TabContextProvider, TabLayout, TabPanel, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueText, ValueTextProps, bulletClasses, getRandomItem, groupValueItemClasses, labelClasses, newArrayWithSize, useDrawer, useGetDefaultThemeColor, useTab };
+export { AppBarComponent, AppBarElement, AppBarProfile, AppBarProps, AppBarWithDrawerLayout, AppBarWithDrawerLayoutProps, BasicModelInstance, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, Content, ContentComponent, ContentElement, ContentProps, Drawer, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerItem, DrawerItemProps, DrawerProps, DrawerProvider, DrawerSection, DrawerSectionProps, EnhancedRemoteTable, EnhancedTable, EnhancedTableHead, GroupField, GroupValueCard, GroupValueCardProps, GroupValueItem, GroupValueItemComponent, GroupValueItemElement, GroupValueItemProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderPreset, HeaderProps, HeaderTab, Label, LabelProps, LabelVariant, Link, LinkBehaviour, MiniAppBar, MiniDrawer, Model, ModelField, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Nav, NavItem, NavItemAvatar, NavItemBullet, NavItemLabel, NavSection, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, SignIn, TabCard, TabPanel, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueText, ValueTextProps, bulletClasses, getRandomItem, groupValueItemClasses, labelClasses, newArrayWithSize, useDrawer, useGetDefaultThemeColor };

package/jest.config.js

@@ -11,4 +11,7 @@ module.exports = {
     "!src/tests/**",
     "!src/**/__snapshots__/**",
   ],
+  moduleNameMapper: {
+    "~/(.*)": "<rootDir>/src/$1",
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -44,6 +44,7 @@
     "@babel/preset-react": "^7.18.6",
     "@faker-js/faker": "^7.3.0",
     "@mui/x-data-grid-generator": "^5.13.0",
+    "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.3",
@@ -66,6 +67,7 @@
     "@typescript-eslint/parser": "^5.30.6",
     "babel-jest": "^28.1.3",
     "babel-loader": "^8.2.5",
+    "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^8.19.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",

package/rollup.config.js

@@ -1,11 +1,15 @@
 import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import typescript from "@rollup/plugin-typescript";
+import alias from "@rollup/plugin-alias";
 import dts from "rollup-plugin-dts";
+import path from "path";
 import { terser } from "rollup-plugin-terser";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import packageJson from "./package.json";
 
+const projectRootDir = path.resolve(__dirname);
+
 export default [
   {
     input: "src/index.ts",
@@ -29,6 +33,14 @@ export default [
         tsconfig: "./tsconfig.rollup.json",
       }),
       terser(),
+      alias({
+        entries: [
+          {
+            find: "~",
+            replacement: path.resolve(projectRootDir, "src"),
+          },
+        ],
+      }),
     ],
     external: ["react", "react-dom"],
   },

package/src/components/app-bar/app-bar.types.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, ReactElement } from "react";
 import { AppBarProps as MuiAppBarProps } from "@mui/material";
 
 export interface AppBarProfile {
@@ -14,3 +14,4 @@ export interface AppBarProps extends MuiAppBarProps {
 }
 
 export type AppBarComponent = FunctionComponent<AppBarProps>;
+export type AppBarElement = ReactElement<AppBarProps, AppBarComponent>;

package/src/components/content/content.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { Content } from "./content";
+import { SkeletonGrid } from "../../tests";
+
+export default {
+  title: "Sections/Content",
+  component: Content,
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof Content>;
+
+const Template = createTemplate(() => {
+  return (
+    <Content>
+      <SkeletonGrid />
+    </Content>
+  );
+});
+
+export const Default = Template.bind({});

package/src/components/content/content.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Content } from "./content";
+import { render, screen } from "../../tests";
+import { Typography } from "@mui/material";
+
+describe("Content", () => {
+  const renderComponent = () => {
+    return render(
+      <Content>
+        <Typography>Children content</Typography>
+      </Content>,
+    );
+  };
+
+  it("would render a children", () => {
+    renderComponent();
+
+    expect(screen.getByText(/children content/i)).toBeInTheDocument();
+  });
+
+  it("would render a main element", () => {
+    renderComponent();
+
+    expect(screen.getByRole("main")).toBeInTheDocument();
+  });
+});

package/src/components/content/content.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Container } from "@mui/material";
+import { ContentProps } from "./content.types";
+
+export const Content = ({ children }: ContentProps) => {
+  return (
+    <Container component="main" sx={{ py: 3, flexGrow: 1 }}>
+      {children}
+    </Container>
+  );
+};

package/src/components/content/content.types.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren, FunctionComponent, ReactElement } from "react";
+
+export type ContentProps = PropsWithChildren;
+export type ContentComponent = FunctionComponent<ContentProps>;
+export type ContentElement = ReactElement<ContentElement, ContentComponent>;

package/src/components/content/index.ts

@@ -0,0 +1,2 @@
+export * from "./content";
+export * from "./content.types";

package/src/components/drawer-item/drawer-item.tsx

@@ -41,6 +41,8 @@ export interface DrawerItemProps {
   bullet?: NavItemBullet;
 }
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 const DrawerItemLink = styled(Link)(({ theme }) => {
   return {
     color: theme.palette.text.primary,

package/src/components/header/header.test.tsx

@@ -1,15 +1,16 @@
 import React from "react";
 import { render, screen } from "../../tests";
 import userEvent from "@testing-library/user-event";
+import { Header } from "./header";
 import {
-  Header,
   HeaderAction,
   HeaderActionVariant,
   HeaderBreadcrumb,
   HeaderPreset,
   HeaderTab,
-} from "./header";
+} from "./header.types";
 import { breadcrumbs, actions as actionsData, tabs } from "./header.dummy";
+import { TabProvider } from "../../providers";
 
 const actions = actionsData.map((a) => ({ ...a, onClick: a.onClick && jest.fn() }));
 
@@ -35,17 +36,17 @@ function renderInstance({
   const onChangeTab = jest.fn();
 
   const instance = render(
-    <Header
-      title={title}
-      subtitle={subtitle}
-      preset={preset}
-      breadcrumbs={breadcrumbs}
-      actions={actions}
-      actionsVariant={actionsVariant}
-      tabs={tabs}
-      selectedTab={selectedTab}
-      onChangeTab={onChangeTab}
-    />,
+    <TabProvider initialValue={selectedTab}>
+      <Header
+        title={title}
+        subtitle={subtitle}
+        preset={preset}
+        breadcrumbs={breadcrumbs}
+        actions={actions}
+        actionsVariant={actionsVariant}
+        tabs={tabs}
+      />
+    </TabProvider>,
   );
 
   return { ...instance, onChangeTab };
@@ -147,13 +148,14 @@ describe("Header", () => {
       expect(screen.getByRole("tab", { name: /tab 2/i })).toBeDisabled();
     });
 
-    it("would call onChangeTab when a tab is clicked", async () => {
+    it("would change the selected tab when a tab is clicked", async () => {
       const { onChangeTab } = renderInstance({ tabs, selectedTab: 0 });
 
       await userEvent.click(screen.getByRole("tab", { name: /tab 3/i }));
 
-      expect(onChangeTab).toHaveBeenCalledTimes(1);
-      expect(onChangeTab).toHaveBeenCalledWith(tabs[2], 2);
+      expect(screen.getByRole("tab", { name: /tab 1/i, selected: false })).toBeInTheDocument();
+      expect(screen.getByRole("tab", { name: /tab 2/i, selected: false })).toBeInTheDocument();
+      expect(screen.getByRole("tab", { name: /tab 3/i, selected: true })).toBeInTheDocument();
     });
 
     it("wouldn't call onChangeTab when the clicked tab is the selectedTab", async () => {